HTML में JavaScript: script Tag और पहला उदाहरण
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
JavaScript web की programming language है। HTML page बनाता है, CSS उसे सजाता है, और JavaScript उसे कुछ करने लायक बनाता है: click पर जवाब देना, form भेजने से पहले उसे जाँचना, content दिखाना और छिपाना, page refresh किए बिना नया data लाना।
Page में JavaScript जोड़ना
इसे <script> tag के अंदर लिखें, आमतौर पर </body> बंद होने से ठीक पहले, ताकि page की content पहले load हो जाए। या इसे अलग .js file में रखें और link करें: <script src="app.js"></script>। असली sites के लिए अलग-file वाला तरीका बेहतर है — एक script file हर page के काम आ सकती है।
JavaScript क्या-क्या कर सकता है
- Content बदलना:
document.getElementById("demo").innerHTML = "Hello!";किसी element के अंदर का text बदल देता है। - Style बदलना:
element.style.color = "red";उसका रंग बदल देता है। - Events पर जवाब देना: button click होने पर, form submit होने पर, या key दबाने पर code चलाएँ।
- Input जाँचना: form भेजने से पहले यह पक्का करें कि email, email जैसा दिखता है।
आपकी पहली script
नीचे दिए गए उदाहरण में एक button है। जब आप उसे click करते हैं, तो JavaScript एक paragraph का text बदल देता है। यह सिर्फ तीन lines हैं — लेकिन यही idea web की हर interactive सुविधा के पीछे है, "like" button से लेकर पूरे quiz timer तक।
JavaScript क्या है
JavaScript web की programming language है। HTML page बनाता है, CSS उसे रंगता है, और JavaScript उसे कुछ करने लायक बनाता है — click पर जवाब देना, form भेजने से पहले उसे जाँचना, page दोबारा load किए बिना नया data लाना। यह browser में, visitor के computer पर चलती है, और हर आधुनिक website इसका इस्तेमाल करती है।
याद रखने की तरकीब: पहले page, फिर script — element मिले, तभी काम ठीक।
Syntax — कोड कैसे लिखें
JavaScript <script> tag के अंदर जाती है। Tag को <body> के अंत में रखें, ताकि HTML पहले load हो जाए और script उन elements को पा सके जिनकी उसे ज़रूरत है:
<p id="demo">Hello.</p>
<script>
document.getElementById("demo").innerHTML = "Hello, JavaScript!";
</script>
यह छोटी script id="demo" वाला paragraph खोजती है और उसका text बदल देती है। जब page load होती है, तो visitor को "Hello." के बजाय "Hello, JavaScript!" दिखता है।
<head> में रखी <script> page की body बनने से पहले चलती है, इसलिए वह आपके elements को अभी पा नहीं सकती। इसीलिए scripts आमतौर पर body के अंत में जाती हैं — या defer attribute इस्तेमाल करें, जो browser को बताता है कि page तैयार होने तक रुक जाए।document.title टाइप करके Enter दबाकर देखें।आम गलतियाँ
- Script को उन elements से पहले रखना जिनका वह इस्तेमाल करती है — script चलती है, कुछ नहीं पाती, और चुपचाप कुछ नहीं करती।
- बंद करने वाला
</script>भूल जाना — उसके बाद की पूरी page script समझी जाती है और गायब हो जाती है। - JavaScript को हर जगह HTML attributes में मिलाना — एक line से बड़ी किसी भी चीज़ के लिए अलग script block या file इस्तेमाल करें।
- यह मान लेना कि JavaScript हमेशा on रहती है — कुछ user इसे बंद कर देते हैं, इसलिए page उसके बिना भी समझ में आनी चाहिए।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<p id="demo">Click the button to change this text.</p>
<button onclick="document.getElementById('demo').innerHTML = 'Hello, JavaScript!'">Click Me</button>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. JavaScript क्या है?
यह वेब की प्रोग्रामिंग भाषा है; HTML पेज बनाता है, CSS उसे स्टाइल देता है और JavaScript उसे क्लिक पर प्रतिक्रिया जैसे काम करने योग्य बनाता है।
2. script टैग कहाँ लगाना चाहिए?
body के अंत में, ताकि पहले HTML लोड हो जाए और स्क्रिप्ट को ज़रूरी एलिमेंट मिल जाएँ।
3. अगर स्क्रिप्ट अपने एलिमेंट से पहले चल जाए तो क्या होता है?
उसे कुछ नहीं मिलता और वह चुपचाप कुछ नहीं करती; इसलिए स्क्रिप्ट body के अंत में लगाते हैं या defer एट्रिब्यूट इस्तेमाल करते हैं।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
