Structure of JavaScript

📖 Theory

એ બટન જેને પોતાનું ખાનું જ ન મળ્યું

તમે બેઠકોની ગણતરી દેખાડવા FestConnect માં JavaScript ઉમેરો છો. તમે <script> ને <head> માં મૂકો છો, એ ચાલે છે, અને તૂટી પડે છે: 'cannot read property of null'. Script ચાલે ત્યારે બેઠકોની ગણતરીવાળું element હજી અસ્તિત્વમાં જ નથી, કારણ કે browser ઉપરથી નીચે વાંચે છે અને એ <body> સુધી પહોંચ્યું જ નહોતું જ્યાં એ element વસે છે.

તર્ક લખતાં પહેલાં, તમારે જાણવું પડે કે JavaScript ક્યાં જાય છે, એની રચના કેવી છે, અને એક નિયમ જે બધાને પછાડે છે: એ case-sensitive છે.

📖 Theory

ઉપરથી નીચે વંચાતી સૂચનાઓ

રસોઈની રીત એ ક્રમમાં કરાતાં પગલાંની યાદી છે: ખીરું બનાવવાના પગલા પહેલાં તમે 'ખીરું હલાવો' ન કરી શકો. JavaScript એ જ રીતે ચાલે છે, ટોચથી લીટીએ લીટીએ. એટલે પાનાના element ને અડતું script એ element બન્યા પછી જ ચાલવું જોઈએ, અને એટલા માટે જ scripts સામાન્ય રીતે પાનાના તળિયે બેસે છે, જ્યારે એમની ઉપરનું બધું અસ્તિત્વમાં આવી ગયું હોય.

📖 Theory

JS ક્યાં જાય છે અને એ કેવી રીતે વંચાય છે

• Internal: HTML માં <script> ... </script> નો ભાગ.
• External: <script src="app.js"></script> અલગ file જોડે છે (ફરી વપરાય, cache થાય, ફરી એ જ Unit 1 નો external file નો વિચાર).
• જગ્યા: script ને </body> ની બરાબર પહેલાં મૂકો જેથી એની ઉપરનાં elements પહેલેથી અસ્તિત્વમાં હોય (કે head માં defer વાપરો).

અંદર, JavaScript એ ઉપરથી નીચે ચાલતાં વિધાનો ની યાદી છે, દરેક સામાન્ય રીતે અર્ધવિરામ થી પૂરું થાય છે. ટિપ્પણીઓ છે // એક લીટી કે /* અનેક લીટી */. console.log(...) ચકાસવા માટે browser ના console માં છાપે છે.

⌨️ 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 વાળી આવૃત્તિ કેમ તૂટી પડે છે?

બરાબર એ જ script </body> પહેલાં ચાલે છે પણ <head> માં મૂકતાં 'null' ફેંકે છે. અહીં 'null' નો અર્થ શું છે એ સમજાવો અને બે ઉકેલ આપો.

🧩 Quiz

એક student document.getElementByID("title") લખે છે અને એ નિષ્ફળ જાય છે. સાચી પદ્ધતિ છે getElementById. આ કયા પ્રકારની ભૂલ છે?

1. Case-sensitivity ની ભૂલ: JS એ ID અને Id ને જુદાં ગણે છે
2. ખૂટતા અર્ધવિરામની ભૂલ
3. એવી ટિપ્પણી જે બંધ કરાઈ નહોતી
4. JavaScript સાથે અસંબંધિત server-side ની ભૂલ

⚠️ Watch out

રચનાના ફાંદા

1. એ વાપરે છે એ elements ની ઉપર script: એને </body> પહેલાં મૂકો કે defer ઉમેરો, નહીં તો null ની ભૂલો મળે છે.

2. અક્ષરોનું ખોટું સ્વરૂપ: getElementById, getElementByID કે getelementbyid નહીં. એ જ રીતે console.log, Console.Log નહીં.

3. `src` ભાગને external બનાવે છે એ ભૂલી જવું: <script src="app.js">code here</script> એ અંદરના code ને અવગણે છે; tag કાં તો file જોડે છે કાં તો code રાખે છે, બંને નહીં.

📖 Theory

console.log એ તમારી કસોટીની નળી છે

આ આખા એકમમાં, console.log() અને browser નું console (F12 દબાવો) એ જ રીત છે જેનાથી તમે કોઈ પણ UI વગર તપાસો છો કે તમારો code શું કરી રહ્યો છે: variable છાપો, એનું મૂલ્ય જુઓ. BCA303 માં Python શીખતાં તમે વાપરેલાં print નાં વિધાનોનો એ client-side પડઘો છે. અત્યારે જ console ખોલવાની ટેવ પાડો; પછીનો દરેક પાઠ એના પર ટેકે છે.

✅ Summary

Key takeaways

• JS ને internal <script> ના ભાગથી કે external <script src="app.js"> થી ઉમેરો.
• Scripts ને </body> ની બરાબર પહેલાં મૂકો (કે defer વાપરો) જેથી એ જે elements ને અડે એ પહેલેથી અસ્તિત્વમાં હોય.
• Code વિધાનો તરીકે ઉપરથી નીચે ચાલે છે, સામાન્ય રીતે અર્ધવિરામથી પૂરાં થતાં.
• ટિપ્પણીઓ છે // (એક લીટી) અને / / (અનેક); console.log() ચકાસવા માટે browser ના console માં છાપે છે.
• JavaScript case-sensitive છે: getElementById એ getElementByID નથી.
• Memory hook: ઉપરથી નીચે વંચાય છે, એટલે script તળિયે.