📘 Lesson · Lesson 02
How to Add JavaScript
JavaScript कैसे जोड़ें
Three Ways to Add JavaScript
Just like CSS, JavaScript can be added to a web page in three ways: inline (directly in an HTML attribute), internal (inside a
<script> tag in the HTML), and external (in a separate .js file that you link). All three use the <script> element as the entry point. For real projects, external files are the recommended approach — but let's understand each one, since you'll encounter them all.Internal JavaScript — the script tag
<!DOCTYPE html>
<html>
<body>
<h1>My Page</h1>
<script>
// JavaScript goes here
alert("Hello from JavaScript!");
console.log("This runs when the page loads");
</script>
</body>
</html>Internal JavaScript lives inside a
<script> tag right in your HTML file. Everything between <script> and </script> is JavaScript code that the browser runs. This is handy for small scripts or quick testing — the code and page are in one file. alert() pops up a message box, and console.log() prints to the browser console (which you'll use constantly for testing). Notice the // comment style — unlike CSS, JavaScript DOES have single-line // comments. Internal scripts are fine for learning, but for real sites, external is better.External JavaScript — the .js file (recommended)
<!-- In your HTML file: -->
<script src="script.js"></script>
/* In a separate file named script.js: */
alert("Hello from an external file!");
console.log("Cleaner and reusable");External JavaScript keeps your code in a separate
.js file, linked with <script src="...">. This is the professional approach, and mirrors why external CSS is preferred: your HTML stays clean and focused on structure, your JavaScript lives in its own organised file, and — crucially — ONE .js file can be shared across MANY HTML pages. Update the script once, and every page using it updates. The src attribute points to the file's path, exactly like <link> does for CSS. This separation of concerns (structure, style, and behaviour in separate files) is a core principle of good web development.Where to Place the Script — a critical detail
<!-- BEST: just before the closing </body> tag -->
<body>
<h1>My Page</h1>
<button id="btn">Click me</button>
<script src="script.js"></script> <!-- HTML is loaded first, THEN JS runs -->
</body>WHERE you put the script matters a lot. JavaScript often needs to interact with HTML elements (like a button) — but if the script runs BEFORE those elements exist, it fails. The classic solution: place your
<script> tag just before the closing </body> tag, so all the HTML above it has already loaded and is ready to use. If you put a script in the <head> that tries to grab a button, it runs too early and finds nothing (a very common beginner bug). Placing scripts at the end of the body is the simplest, most reliable fix — and where you should put them while learning.Best Practice — defer and external files
<!-- The modern professional way: in the head, with defer -->
<head>
<script src="script.js" defer></script>
</head>The modern professional approach uses an external file with the
defer attribute. defer tells the browser: "download this script while reading the page, but DON'T run it until the whole HTML is loaded." This gives you the best of both worlds — the script loads efficiently AND runs at the right time (after the HTML exists), even if it's in the <head>. So the two solid options are: (1) external script just before </body> (simple, great for learning), or (2) external script in <head> with defer (the modern standard). Either way: use external files, and make sure the HTML loads before your JS runs.Exam Corner
Q: What are the three ways to add JavaScript? Inline (attribute), internal (script tag in HTML), external (linked .js file).
Q: How do you link an external JavaScript file?
Q: Why is external JavaScript preferred? It keeps HTML clean and lets one file be reused across many pages.
Q: Where should you place a script tag and why? Just before
Q: What does the defer attribute do? Downloads the script while reading the page but runs it only after the HTML has fully loaded.
Q: How do you link an external JavaScript file?
<script src="script.js"></script>Q: Why is external JavaScript preferred? It keeps HTML clean and lets one file be reused across many pages.
Q: Where should you place a script tag and why? Just before
</body>, so the HTML elements it uses have already loaded.Q: What does the defer attribute do? Downloads the script while reading the page but runs it only after the HTML has fully loaded.
JavaScript जोड़ने के 3 तरीके
CSS की तरह, JavaScript web page में तीन तरीकों से जोड़ा जा सकता है: inline (सीधे HTML attribute में), internal (HTML में
<script> tag के अंदर), और external (अलग .js file में जिसे आप link करते हैं). तीनों entry point के रूप में <script> element use करते हैं. असली projects के लिए external files recommended approach है — पर हर एक समझते हैं, क्योंकि आप तीनों से मिलेंगे.Internal JavaScript — script tag
<!DOCTYPE html>
<html>
<body>
<h1>My Page</h1>
<script>
// JavaScript yahan aata hai
alert("Hello from JavaScript!");
console.log("Yeh page load hone par chalta hai");
</script>
</body>
</html>Internal JavaScript आपकी HTML file में ही
<script> tag के अंदर रहता है. <script> और </script> के बीच जो कुछ है वह JavaScript code है जो browser चलाता है. यह छोटे scripts या जल्दी testing के लिए काम का है — code और page एक file में. alert() message box pop करता है, और console.log() browser console में print करता है (जिसे आप testing के लिए लगातार use करेंगे). // comment style देखिए — CSS के उलट, JavaScript में single-line // comments HOTE हैं. Internal scripts सीखने के लिए ठीक हैं, पर असली sites के लिए external बेहतर है.External JavaScript — .js file (recommended)
<!-- Aapki HTML file me: -->
<script src="script.js"></script>
/* script.js naam ki alag file me: */
alert("Hello from an external file!");
console.log("Saaf aur reusable");External JavaScript आपका code अलग
.js file में रखता है, <script src="..."> से linked. यह professional approach है, और वही दर्शाता है क्यों external CSS पसंद है: आपका HTML साफ और structure पर focused रहता है, आपका JavaScript अपनी व्यवस्थित file में रहता है, और — अहम बात — EK .js file KAI HTML pages में share हो सकती है. Script एक बार update कीजिए, और उसे use करने वाला हर page update होता है. src attribute file के path की ओर point करता है, ठीक जैसे CSS के लिए <link>. यह separation of concerns (structure, style, और behaviour अलग files में) अच्छे web development का core सिद्धांत है.Script कहां रखें — अहम detail
<!-- BEST: closing </body> tag se theek pehle -->
<body>
<h1>My Page</h1>
<button id="btn">Click me</button>
<script src="script.js"></script> <!-- HTML pehle load, PHIR JS chalta -->
</body>आप script KAHAN रखते हैं बहुत मायने रखता है. JavaScript अक्सर HTML elements (जैसे button) से interact करता है — पर अगर script उन elements के बनने से PEHLE चले, यह fail होता है. Classic solution: अपना
<script> tag closing </body> tag से ठीक पहले रखिए, ताकि उसके ऊपर का सारा HTML पहले ही load होकर तैयार हो. अगर <head> में script रखें जो button पकड़ने की कोशिश करे, यह बहुत जल्दी चलता है और कुछ नहीं पाता (बहुत common beginner bug). Scripts को body के अंत में रखना सबसे सरल, भरोसेमंद fix है — और जहां सीखते समय आपको उन्हें रखना चाहिए.Best Practice — defer और external files
<!-- Modern professional tarika: head me, defer ke saath -->
<head>
<script src="script.js" defer></script>
</head>Modern professional approach external file को
defer attribute के साथ use करता है. defer browser को कहता है: "इस script को page पढ़ते समय download करो, पर इसे तब तक मत CHALAO जब तक पूरा HTML load न हो." यह आपको दोनों का best देता है — script efficiently load होता है AUR सही समय पर चलता है (HTML के बनने के बाद), भले ही यह <head> में हो. तो दो ठोस options हैं: (1) external script </body> से ठीक पहले (सरल, सीखने के लिए बढ़िया), या (2) external script <head> में defer के साथ (modern standard). किसी भी तरह: external files use कीजिए, और पक्का कीजिए HTML आपके JS चलने से पहले load हो.Exam Corner
Q: JavaScript जोड़ने के तीन तरीके क्या हैं? Inline (attribute), internal (HTML में script tag), external (linked .js file).
Q: External JavaScript file कैसे link करते हैं?
Q: External JavaScript क्यों पसंद है? यह HTML साफ रखता है और एक file को कई pages में reuse करने देता है.
Q: Script tag कहां रखना चाहिए और क्यों?
Q: defer attribute क्या करता है? Page पढ़ते समय script download करता है पर उसे HTML पूरा load होने के बाद ही चलाता है.
Q: External JavaScript file कैसे link करते हैं?
<script src="script.js"></script>Q: External JavaScript क्यों पसंद है? यह HTML साफ रखता है और एक file को कई pages में reuse करने देता है.
Q: Script tag कहां रखना चाहिए और क्यों?
</body> से ठीक पहले, ताकि उसके इस्तेमाल किए HTML elements पहले load हो चुके हों.Q: defer attribute क्या करता है? Page पढ़ते समय script download करता है पर उसे HTML पूरा load होने के बाद ही चलाता है.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.