Theory
वह button जो अपना box नहीं ढूँढ पाया
आप seat count दिखाने के लिए FestConnect में JavaScript जोड़ते हैं। आप <script> को <head> में रखते हैं, यह चलता है, और crash हो जाता है: 'cannot read property of null'। Seat-count element अभी exist नहीं करता जब script चलती है, क्योंकि browser top से bottom पढ़ता है और उस <body> तक अभी नहीं पहुँचा था जहाँ वह element रहता है।
Logic लिखने से पहले, आपको जानना है JavaScript कहाँ जाती है, यह कैसे structured है, और वह एक rule जो सबको trip करता है: यह case-sensitive है।
Theory
Instructions top से bottom पढ़ी जाती हैं
एक recipe order में किए गए steps की एक list है: आप उस step से पहले 'batter हिला' नहीं सकते जो batter बनाता है। JavaScript उसी तरह चलती है, line by line top से। तो एक script जो एक page element को छूती है उसे उस element के बनने के बाद चलना चाहिए, यही कारण है scripts आमतौर पर page के नीचे बैठती हैं, एक बार जब उनके ऊपर सब कुछ exist कर चुका हो।
Theory
JS कहाँ जाती है और यह कैसे पढ़ी जाती है
- Internal: HTML में एक
<script> ... </script>block। - External:
<script src="app.js"></script>एक अलग file link करता है (reusable, cacheable, Unit 1 का external-file idea फिर से)। - Placement: script को
</body>के ठीक पहले रखिए ताकि इसके ऊपर के elements पहले से exist करें (या head मेंdeferइस्तेमाल कीजिए)।
अंदर, JavaScript statements की एक list है जो top से bottom चलती है, हर एक आमतौर पर एक semicolon से ख़त्म। Comments हैं // एक line या /* कई lines */। console.log(...) testing के लिए browser console पर print करता है।
Practical
FestConnect की पहली script
<body>
<h1 id="title">FestConnect</h1>
<!-- script at the bottom: #title already exists above -->
<script>
// this prints to the browser console (F12)
console.log("FestConnect script loaded");
/* statements run top to bottom, semicolons end them */
let heading = document.getElementById("title");
console.log(heading.textContent); // "FestConnect"
</script>
</body>
<!-- external alternative: <script src="app.js"></script> -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
Head version crash क्यों होता है?
बिल्कुल वही script </body> से पहले काम करती है पर <head> में रखने पर 'null' throw करती है। Explain कीजिए यहाँ 'null' का मतलब क्या है और दो fixes दीजिए।
Show the answer
Head में, script browser के page में आगे #title बनाने से पहले चलती है, तो document.getElementById("title") कुछ नहीं ढूँढता और null return करता है; null पर .textContent call करना throw करता है। दो fixes: (1) <script> को </body> के ठीक पहले move कीजिए ताकि element पहले exist करे, या (2) इसे head में रखिए पर defer जोड़िए (<script src="app.js" defer></script>), जो HTML parse होने तक wait करता है। दोनों सुनिश्चित करते हैं code चलने से पहले DOM exist करे।
Quiz
एक student document.getElementByID("title") लिखता है और यह fail होता है। सही method getElementById है। यह किस तरह की error है?
- एक case-sensitivity error: JS ID को Id से अलग करता है
- एक missing semicolon error
- एक comment जो close नहीं हुआ
- JavaScript से unrelated एक server-side error
Show the answer
एक case-sensitivity error: JS ID को Id से अलग करता है
JavaScript case-sensitive है, तो getElementByID (ID में capital D) getElementById से अलग, non-existent नाम है; method undefined है और call fail होता है (A)। यह semicolons (B) या comments (C) के बारे में नहीं है, और यह pure client-side JS है, server code नहीं (D)। Case sensitivity सबसे common beginner bugs में से एक है: exact capitalisation match कीजिए।
Watch out
Structure traps
1. जिन elements को यह इस्तेमाल करती है उनके ऊपर Script: इसे </body> से पहले रखिए या defer जोड़िए, वरना null errors मिलते हैं।
2. ग़लत capitalisation: getElementById, getElementByID या getelementbyid नहीं। console.log के लिए भी वही, Console.Log नहीं।
3. `src` भूलना एक block को external बना देता है: <script src="app.js">code here</script> inline code को ignore करता है; एक tag या तो एक file link करता है या code रखता है, दोनों नहीं।
Theory
console.log आपकी test tube है
इस unit के बाक़ी हिस्से के लिए, console.log() और browser console (F12 दबाइए) बिना किसी UI के यह check करने का तरीक़ा हैं कि आपका code क्या कर रहा है: एक variable print कीजिए, इसकी value देखिए। यह उन print statements का client-side echo है जो आपने BCA303 में Python सीखते हुए इस्तेमाल किए। अभी console खोलने में comfortable हो जाइए; बाद का हर lesson इस पर टिकता है।
Summary
Key takeaways
- JS को एक internal <script> block या एक external <script src="app.js"> से जोड़िए।
- Scripts को </body> के ठीक पहले रखिए (या defer इस्तेमाल कीजिए) ताकि वे elements जिन्हें वे छूती हैं पहले से exist करें।
- Code statements के रूप में top से bottom चलता है, आमतौर पर semicolons से ख़त्म।
- Comments हैं // (एक line) और / / (कई); console.log() testing के लिए browser console पर print करता है।
- JavaScript case-sensitive है: getElementById, getElementByID नहीं है।
- Memory hook: top से bottom पढ़िए, तो script नीचे।