ഈ അധ്യായത്തിൽ, ഒരു HTML ഡോക്യുമെന്റിൽ സ്ക്രിപ്റ്റുകൾ സ്ഥാപിക്കാൻ ഞങ്ങൾ പ്രവർത്തിക്കും, അതുവഴി ഈച്ചയിൽ HTML പ്രമാണം പരിഷ്കരിക്കുന്നതിന് അവ ഉപയോഗിക്കാനാകും. ഒരു HTML പേജിലേക്ക് JavaScript കോഡ് ചേർക്കുന്നതിന്, ഘടകം സാധാരണയായി ഉപയോഗിക്കുന്നു.

ആദ്യ പരിപാടി

നിങ്ങളുടെ ആദ്യത്തെ JavaScript പ്രോഗ്രാം (അല്ലെങ്കിൽ സ്ക്രിപ്റ്റ്) പ്രവർത്തിപ്പിക്കുന്നതിന്, അത് ഒരു HTML പ്രമാണത്തിൽ ഉൾച്ചേർക്കേണ്ടതുണ്ട്.
സ്ക്രിപ്റ്റുകൾ ഒരു HTML പ്രമാണത്തിൽ വിവിധ സ്റ്റാൻഡേർഡ് രീതികളിൽ ഉൾച്ചേർത്തിരിക്കുന്നു:

• HTML ഘടകത്തിന്റെ ഇവന്റ് ആട്രിബ്യൂട്ടിലേക്ക് നേരിട്ട് കോഡ് ഇടുക;
• ഓപ്പണിംഗ്, ക്ലോസിംഗ് ടാഗുകൾക്കിടയിൽ കോഡ് സ്ഥാപിക്കുക;
• നിങ്ങളുടെ എല്ലാ സ്ക്രിപ്റ്റുകളും ഒരു ബാഹ്യ ഫയലിൽ (ഒരു .js വിപുലീകരണത്തോടെ) ഇടുക, തുടർന്ന് അത് ഒരു HTML പ്രമാണത്തിലേക്ക് ലിങ്ക് ചെയ്യുക.

ഒരു സ്ക്രിപ്റ്റ് ഘടകത്തിൽ JavaScript

ഒരു HTML ഡോക്യുമെന്റിൽ JavaScript ഉൾച്ചേർക്കുന്നതിനുള്ള ഏറ്റവും എളുപ്പമുള്ള മാർഗ്ഗം ഉപയോഗിക്കുന്നത് . ടാഗുകൾ പലപ്പോഴും മൂലകത്തിനുള്ളിൽ സ്ഥാപിച്ചിട്ടുണ്ട്, മുമ്പ് ഈ രീതി മിക്കവാറും നിർബന്ധിതമായി കണക്കാക്കപ്പെട്ടിരുന്നു. എന്നിരുന്നാലും, ഈ ദിവസങ്ങളിൽ, വെബ് പേജുകളുടെ മൂലകത്തിലും ബോഡിയിലും ടാഗുകൾ ഉപയോഗിക്കുന്നു.

അങ്ങനെ, ഒരു വെബ് പേജിൽ ഒരേസമയം നിരവധി സ്ക്രിപ്റ്റുകൾ സ്ഥാപിക്കാൻ കഴിയും. ഏത് ക്രമത്തിലാണ് ബ്രൗസർ ഈ സ്ക്രിപ്റ്റുകൾ എക്സിക്യൂട്ട് ചെയ്യുക? സാധാരണഗതിയിൽ, ബ്രൗസറുകൾ ലോഡ് ചെയ്യുമ്പോൾ സ്ക്രിപ്റ്റുകൾ എക്സിക്യൂട്ട് ചെയ്യുന്നു. ബ്രൗസർ HTML ഡോക്യുമെന്റ് മുകളിൽ നിന്ന് താഴേക്ക് വായിക്കുന്നു, ടാഗ് നേരിടുമ്പോൾ, പ്രോഗ്രാം ടെക്‌സ്‌റ്റിനെ ഒരു സ്‌ക്രിപ്‌റ്റായി കണക്കാക്കി അത് എക്‌സിക്യൂട്ട് ചെയ്യുന്നു. എലമെന്റിലെ എല്ലാ കോഡുകളും എക്‌സിക്യൂട്ട് ചെയ്യുന്നതുവരെ ബാക്കി പേജ് ഉള്ളടക്കം ലോഡുചെയ്യുകയോ പ്രദർശിപ്പിക്കുകയോ ചെയ്യുന്നില്ല.

ഇതൊരു സാധാരണ HTML പ്രമാണമാണ്

ഞങ്ങൾ HTML-ലേക്ക് തിരികെ പുറപ്പെടുന്നു

കുറിപ്പ്: സ്ക്രിപ്റ്റ് എഴുതിയ പ്രോഗ്രാമിംഗ് ഭാഷയെ സൂചിപ്പിക്കുന്ന ടാഗിന്റെ ഭാഷാ ആട്രിബ്യൂട്ട് ഞങ്ങൾ വ്യക്തമാക്കി. ഭാഷാ ആട്രിബ്യൂട്ടിന്റെ സ്ഥിര മൂല്യം JavaScript ആണ്, അതിനാൽ നിങ്ങൾ JavaScript ഉപയോഗിക്കുകയാണെങ്കിൽ, നിങ്ങൾക്ക് ഭാഷാ ആട്രിബ്യൂട്ട് ഒഴിവാക്കാവുന്നതാണ്.

HTML എലമെന്റ് ഇവന്റ് ആട്രിബ്യൂട്ടുകളിലെ JavaScript

പേജ് തുറന്ന് സ്ട്രിംഗ് ഔട്ട്പുട്ട് ചെയ്യുമ്പോൾ മുകളിലെ സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്തു: "ഹലോ, വേൾഡ്!" എന്നിരുന്നാലും, നിങ്ങൾ പേജ് തുറക്കുമ്പോൾ സ്ക്രിപ്റ്റ് ഉടനടി പ്രവർത്തിക്കാൻ തുടങ്ങണമെന്ന് നിങ്ങൾ എപ്പോഴും ആഗ്രഹിക്കുന്നില്ല. മിക്കപ്പോഴും, ഒരു ബട്ടണിൽ അമർത്തുമ്പോൾ പോലെ ഒരു പ്രത്യേക ഇവന്റ് സംഭവിക്കുമ്പോൾ ഒരു പ്രോഗ്രാം റൺ ചെയ്യണമെന്ന് നിങ്ങൾ ആഗ്രഹിക്കുന്നു.

ഇനിപ്പറയുന്ന ഉദാഹരണം ഒരു HTML പ്രമാണത്തിന്റെ ഒരു വിഭാഗത്തിൽ ഒരു JavaScript ഫംഗ്ഷൻ സ്ഥാപിക്കുന്നു. മൗസ് ക്ലിക്കുകളോട് പ്രതികരിക്കുന്ന ഇവന്റ് ആട്രിബ്യൂട്ട് ഉള്ള ഒരു HTML ഘടകത്തിന്റെ ഒരു ഉദാഹരണം ഇതാ. ബട്ടൺ ക്ലിക്ക് ചെയ്യുമ്പോൾ, ഒരു ക്ലിക്ക് ഇവന്റ് ജനറേറ്റുചെയ്യുന്നു.

ഹലോ വേൾഡ്!

എന്നെ ക്ലിക്ക് ചെയ്യുക

ബാഹ്യ ജാവാസ്ക്രിപ്റ്റ്

ജാവാസ്ക്രിപ്റ്റ് കോഡ് ധാരാളം ഉണ്ടെങ്കിൽ, അത് ഒരു പ്രത്യേക ഫയലിൽ ഇടുന്നു, ഒരു ചട്ടം പോലെ, .js എന്ന വിപുലീകരണമുണ്ട്.

ഒരു HTML പ്രമാണത്തിൽ ഒരു ബാഹ്യ ഫയലിൽ നിന്നുള്ള JavaScript കോഡ് ഉൾപ്പെടുത്തുന്നതിന്, നിങ്ങൾ ടാഗിന്റെ src (ഉറവിടം) ആട്രിബ്യൂട്ട് ഉപയോഗിക്കേണ്ടതുണ്ട്. അതിന്റെ മൂല്യം JS കോഡ് അടങ്ങുന്ന ഫയലിന്റെ URL ആയിരിക്കണം:

ഈ ഉദാഹരണം സ്ക്രിപ്റ്റ് (സൈറ്റിന്റെ റൂട്ടിൽ നിന്ന്) അടങ്ങുന്ന script.js എന്ന പേരിലുള്ള ഫയലിലേക്കുള്ള സമ്പൂർണ്ണ പാത വ്യക്തമാക്കുന്നു. ഫയലിൽ തന്നെ ജാവാസ്ക്രിപ്റ്റ് കോഡ് മാത്രമേ അടങ്ങിയിരിക്കാവൂ, അത് ടാഗുകൾക്കും ടാഗുകൾക്കുമിടയിൽ സ്ഥിതിചെയ്യും.

മൂലകവുമായുള്ള സാമ്യം വഴി നിലവിലെ HTML പേജിന്റെ ഡൊമെയ്‌നുമായി ബന്ധമില്ലാത്ത ഒരു ഘടകത്തിന്റെ src ആട്രിബ്യൂട്ടിന് ഒരു പൂർണ്ണ URL നൽകാം:

ഒന്നിലധികം സ്ക്രിപ്റ്റുകൾ ബന്ധിപ്പിക്കുന്നതിന്, ഒന്നിലധികം ടാഗുകൾ ഉപയോഗിക്കുക:

...

ശ്രദ്ധിക്കുക: src ആട്രിബ്യൂട്ട് ഉള്ള ഒരു ഘടകത്തിന് ടാഗുകൾക്കും ടാഗുകൾക്കുമിടയിൽ അധിക ജാവാസ്ക്രിപ്റ്റ് കോഡ് അടങ്ങിയിരിക്കരുത്, ബാഹ്യ സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്തിട്ടുണ്ടെങ്കിലും, ഇൻലൈൻ കോഡ് അവഗണിക്കപ്പെടും.

src ആട്രിബ്യൂട്ട് ഉണ്ടെങ്കിൽ, സ്ക്രിപ്റ്റ് ടാഗിന്റെ ഉൾഭാഗം അവഗണിക്കപ്പെടും!

ഒരു HTML ഡോക്യുമെന്റിൽ JS കോഡ് എങ്ങനെയാണ് ഉൾപ്പെടുത്തിയിരിക്കുന്നത് എന്നത് പരിഗണിക്കാതെ തന്നെ, ഘടകങ്ങൾ HTML പ്രമാണത്തിൽ ദൃശ്യമാകുന്ന ക്രമത്തിൽ ബ്രൗസർ വ്യാഖ്യാനിക്കുന്നു. ആദ്യ ഘടകത്തിന്റെ കോഡ് ആദ്യം വ്യാഖ്യാനിക്കപ്പെടുന്നു, തുടർന്ന് ബ്രൗസർ രണ്ടാമത്തെ ഘടകത്തിലേക്ക് പോകുന്നു, തുടങ്ങിയവ.

വ്യത്യസ്ത വെബ് പേജുകളിൽ ഒരേ കോഡ് ഉപയോഗിക്കുമ്പോൾ ബാഹ്യ സ്ക്രിപ്റ്റുകൾ പ്രായോഗികമാണ്. ബ്രൗസർ js ഫയൽ ഒരിക്കൽ ഡൗൺലോഡ് ചെയ്യുകയും പിന്നീട് അത് അതിന്റെ കാഷെയിൽ നിന്ന് എടുക്കുകയും ചെയ്യും, അതിനാൽ സെർവറിൽ നിന്ന് പൂർണ്ണമായി റീലോഡ് ചെയ്യാതെ തന്നെ വ്യത്യസ്ത പേജുകളിൽ ഫംഗ്‌ഷനുകളുടെ ഒരു ലൈബ്രറി അടങ്ങുന്ന അതേ സ്‌ക്രിപ്റ്റ് ഉപയോഗിക്കാനാകും. കൂടാതെ, ബാഹ്യ സ്ക്രിപ്റ്റുകൾക്ക് നന്ദി, നിങ്ങൾ ഒരു സ്ഥലത്ത് മാത്രം മാറ്റങ്ങൾ വരുത്തുകയോ പിശകുകൾ പരിഹരിക്കുകയോ ചെയ്യേണ്ടതിനാൽ, കോഡ് പരിപാലനം ലളിതമാക്കിയിരിക്കുന്നു.

ശ്രദ്ധിക്കുക: തുറക്കുന്നതും അടയ്ക്കുന്നതും ടാഗുകളും കൂടാതെ .

ലൊക്കേഷൻ ടാഗ് ചെയ്യുക

ബ്രൗസർ HTML പ്രമാണം മുകളിൽ നിന്ന് താഴേക്ക് വായിക്കുകയും പേജ് റെൻഡർ ചെയ്യാൻ തുടങ്ങുകയും ചെയ്യുന്നു, ഡോക്യുമെന്റിന്റെ ഭാഗം വരെ കാണിക്കുന്നു. ഒരു ടാഗ് നേരിടുമ്പോൾ, അത് ജാവാസ്ക്രിപ്റ്റ് മോഡിലേക്ക് മാറുകയും സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്യുകയും ചെയ്യുന്നു. പൂർത്തിയാകുമ്പോൾ, അത് HTML മോഡിലേക്ക് മടങ്ങുകയും പ്രമാണത്തിന്റെ ബാക്കി ഭാഗം പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു.

ഇനിപ്പറയുന്ന ഉദാഹരണത്തിലൂടെ ഇത് വ്യക്തമായി തെളിയിക്കുന്നു. അലേർട്ട്() രീതി ഒരു സന്ദേശമുള്ള ഒരു മോഡൽ വിൻഡോ പ്രദർശിപ്പിക്കുകയും ഉപയോക്താവ് ശരി ക്ലിക്കുചെയ്യുന്നത് വരെ സ്‌ക്രിപ്റ്റ് എക്‌സിക്യൂഷൻ താൽക്കാലികമായി നിർത്തുകയും ചെയ്യുന്നു:

ഉള്ളടക്കത്തിന്റെ തുടക്കം...

തുടർച്ചയായ ഉള്ളടക്കം

ഒരു പേജ് ധാരാളം JavaScript ഉപയോഗിക്കുന്നുവെങ്കിൽ, ഉപയോക്താവിന് ഒരു ശൂന്യമായ ബ്രൗസർ വിൻഡോ കാണുന്നതിന് നീണ്ട ലോഡിംഗ് കാലതാമസം ഉണ്ടായേക്കാം. അതിനാൽ, പേജ് ഉള്ളടക്കത്തിന് ശേഷം, ക്ലോസിംഗ് ടാഗിന് മുമ്പ് ജാവാസ്ക്രിപ്റ്റ് സ്ക്രിപ്റ്റുകളിലേക്കുള്ള എല്ലാ ലിങ്കുകളും സൂചിപ്പിക്കുന്നത് നല്ല സമ്പ്രദായമായി കണക്കാക്കപ്പെടുന്നു:

സ്ക്രിപ്റ്റുകളുടെ ഈ ക്രമീകരണം, സ്ക്രിപ്റ്റ് കോഡ് ലോഡുചെയ്യുന്നതിന് മുമ്പ് ആദ്യം പേജ് ഉള്ളടക്കം ലോഡ് ചെയ്യുന്നതിലൂടെ പേജ് വേഗത്തിൽ ലോഡ് ചെയ്യാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നു.
ജാവാസ്ക്രിപ്റ്റ് കോഡ് പ്രോസസ്സ് ചെയ്യുന്നതിന് മുമ്പ് പേജ് പൂർണ്ണമായും ബ്രൗസറിൽ റെൻഡർ ചെയ്തതിനാൽ ഇത് ഉപയോക്താക്കൾക്ക് അഭികാമ്യമാണ്.

അലസവും അസമന്വിതവുമായ സ്ക്രിപ്റ്റുകൾ

നേരത്തെ സൂചിപ്പിച്ചതുപോലെ, ഡിഫോൾട്ടായി, സ്‌ക്രിപ്റ്റ് ഡൗൺലോഡ് ചെയ്ത് എക്‌സിക്യൂട്ട് ചെയ്യുന്നതുവരെ ജാവാസ്ക്രിപ്റ്റ് കോഡ് ഫയലുകൾ HTML ഡോക്യുമെന്റിന്റെ പാഴ്‌സിംഗ് തടസ്സപ്പെടുത്തുന്നു, അതുവഴി പേജ് ആദ്യം റെൻഡർ ചെയ്യുന്നതിന് മുമ്പുള്ള സമയം വർദ്ധിപ്പിക്കുന്നു.
പേജിന്റെ മധ്യത്തിൽ എവിടെയെങ്കിലും ഘടകം സ്ഥിതിചെയ്യുന്ന ഒരു ഉദാഹരണം എടുക്കാം:

കുറച്ച് ടെക്‌സ്‌റ്റ്... ബ്രൗസർ script.js എക്‌സിക്യൂട്ട് ചെയ്യുന്നത് വരെ ഈ ടെക്‌സ്‌റ്റ് കാണിക്കില്ല.

ഈ ഉദാഹരണത്തിൽ, ബ്രൗസർ script.js ഡൗൺലോഡ് ചെയ്ത് എക്സിക്യൂട്ട് ചെയ്യുന്നത് വരെ, പേജിന്റെ താഴെയുള്ള ഭാഗം അത് കാണിക്കില്ല. ഈ ബ്രൗസർ സ്വഭാവത്തെ "സിൻക്രണസ്" എന്ന് വിളിക്കുന്നു, കൂടാതെ ഒരു പേജിൽ ഒന്നിലധികം JavaScript ഫയലുകൾ ലോഡ് ചെയ്താൽ പ്രശ്നങ്ങൾ ഉണ്ടാക്കാം, കാരണം ഇത് റെൻഡറിംഗ് സമയം വർദ്ധിപ്പിക്കും.

HTML പ്രമാണം യഥാർത്ഥത്തിൽ ഈ JS ഫയലുകളെ ആശ്രയിക്കുന്നില്ലെങ്കിലോ, എന്നാൽ ബാഹ്യ ഫയലുകൾ എങ്ങനെ ലോഡ് ചെയ്യുകയും എക്‌സിക്യൂട്ട് ചെയ്യുകയും ചെയ്യുന്നു എന്നത് ഡവലപ്പർ നിയന്ത്രിക്കാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ?

എലമെന്റിന്റെ അസിൻക്, ഡിഫർ ആട്രിബ്യൂട്ടുകൾ സ്ക്രിപ്റ്റുകൾ ലോഡുചെയ്യുന്നതിനുള്ള പ്രശ്നം സമൂലമായി പരിഹരിക്കാൻ സഹായിക്കും.

അസിൻക് ആട്രിബ്യൂട്ട്

സ്ക്രിപ്റ്റ് "അസിൻക്രണസ് ആയി" എക്സിക്യൂട്ട് ചെയ്യാൻ കഴിയുമെന്ന് ബ്രൗസറിലേക്ക് സൂചിപ്പിക്കാൻ Async ഉപയോഗിക്കുന്നു.

ഒരു ടാഗ് കണ്ടെത്തുമ്പോൾ, സ്‌ക്രിപ്റ്റ് ഡൗൺലോഡ് ചെയ്യുന്നതിനും എക്‌സിക്യൂട്ട് ചെയ്യുന്നതിനുമായി HTML പ്രമാണം പ്രോസസ്സ് ചെയ്യുന്നത് ബ്രൗസർ നിർത്തുന്നില്ല; പ്രമാണം പാഴ്‌സുചെയ്യുന്നതിന് സമാന്തരമായി സ്‌ക്രിപ്റ്റ് ലഭിച്ചതിന് ശേഷം എക്‌സിക്യൂഷൻ സംഭവിക്കാം. സ്ക്രിപ്റ്റ് ലോഡ് ചെയ്യുമ്പോൾ, അത് എക്സിക്യൂട്ട് ചെയ്യും.

അസിൻക് ആട്രിബ്യൂട്ട് ഉള്ള സ്‌ക്രിപ്റ്റുകൾ അവ ചേർത്ത ക്രമത്തിൽ സ്‌ക്രിപ്റ്റുകൾ എക്‌സിക്യൂട്ട് ചെയ്യുമെന്ന് ഉറപ്പില്ല, ഉദാഹരണത്തിന്:

ഉദാഹരണത്തിൽ, ആദ്യ സ്ക്രിപ്റ്റിന് മുമ്പ് രണ്ടാമത്തെ സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്യാം, അതിനാൽ ഈ സ്ക്രിപ്റ്റുകൾക്കിടയിൽ ഡിപൻഡൻസികൾ ഇല്ല എന്നത് പ്രധാനമാണ്.

കുറിപ്പ്: ഡൗൺലോഡ് പൂർത്തിയാകുന്നതിനും സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്യുന്നതിനും കാത്തിരിക്കാതെ പേജ് ലോഡ് ചെയ്യുന്നത് തുടരാൻ ബ്രൗസറിനെ അനുവദിക്കണമെങ്കിൽ അസിൻക് ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു.

ആട്രിബ്യൂട്ട് മാറ്റിവയ്ക്കുക

മുഴുവൻ HTML പേജും പൂർണ്ണമായി ലോഡുചെയ്യുന്നത് വരെ ഡിഫർ ആട്രിബ്യൂട്ട് സ്‌ക്രിപ്റ്റ് എക്‌സിക്യൂഷൻ മാറ്റിവയ്ക്കുന്നു.

സ്ക്രിപ്റ്റുകളുടെ അസിൻക്രണസ് ലോഡിംഗ് പോലെ, HTML പ്രമാണം ലോഡുചെയ്യുമ്പോൾ തന്നെ JS ഫയൽ ലോഡ് ചെയ്യാൻ കഴിയും. എന്നിരുന്നാലും, ബ്രൗസർ പേജ് പ്രോസസ്സ് ചെയ്യുന്നത് പൂർത്തിയാക്കുന്നതിന് മുമ്പ് സ്‌ക്രിപ്റ്റ് പൂർണ്ണമായി ലോഡുചെയ്‌താലും, HTML പ്രമാണം പൂർണ്ണമായി പ്രോസസ്സ് ചെയ്യുന്നതുവരെ അത് എക്‌സിക്യൂട്ട് ചെയ്യില്ല.

മുകളിലെ ഉദാഹരണത്തിൽ, HTML പ്രമാണ ഘടകത്തിൽ ടാഗുകൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ടെങ്കിലും, ബ്രൗസർ ക്ലോസിംഗ് ടാഗിൽ എത്തുന്നതുവരെ സ്ക്രിപ്റ്റുകൾ എക്സിക്യൂട്ട് ചെയ്യാൻ തുടങ്ങില്ല.

കൂടാതെ, async-ൽ നിന്ന് വ്യത്യസ്തമായി, defer ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് സ്ക്രിപ്റ്റുകളുടെ നിർവ്വഹണത്തിന്റെ ആപേക്ഷിക ക്രമം സംരക്ഷിക്കപ്പെടും.

സ്ക്രിപ്റ്റ് കോഡ് ഒരു HTML ഡോക്യുമെന്റുമായി പ്രവർത്തിക്കുമ്പോൾ ഡിഫർ ആട്രിബ്യൂട്ടിന്റെ ഉപയോഗം ഉപയോഗപ്രദമാണ്, കൂടാതെ പേജ് പൂർണ്ണമായി ലഭിച്ചുവെന്ന് ഡവലപ്പർക്ക് ഉറപ്പുണ്ടായിരിക്കണം.

ശ്രദ്ധിക്കുക: അസിൻക്, ഡിഫെർ ആട്രിബ്യൂട്ടുകൾ ബാഹ്യ സ്ക്രിപ്റ്റ് ഫയലുകൾക്കായി മാത്രമേ പിന്തുണയ്ക്കൂ, അതായത്. src ആട്രിബ്യൂട്ട് ഉണ്ടെങ്കിൽ മാത്രം പ്രവർത്തിക്കുക.

ഫലം

• രണ്ട് തരത്തിൽ ഒരു ഘടകം ഉപയോഗിച്ച് ഒരു HTML പ്രമാണത്തിലേക്ക് JavaScript ചേർക്കാവുന്നതാണ്:
  • ടാഗ് ജോഡിക്കും ടാഗ് ജോഡിക്കും ഇടയിൽ നേരിട്ട് ഇരിക്കുന്ന ഒരു ഇൻലൈൻ സ്ക്രിപ്റ്റ് നിർവചിക്കുക.
  • വഴി JavaScript കോഡുമായി ഒരു ബാഹ്യ ഫയൽ ബന്ധിപ്പിക്കുക.
• JavaScript കോഡ് നിരവധി പേജുകളിൽ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ, അത് ഒരു ബാഹ്യ സ്ക്രിപ്റ്റായി ഉൾപ്പെടുത്തുന്നതാണ് നല്ലത്. ഇത് കോഡ് മെയിന്റനൻസും എഡിറ്റിംഗും വളരെ സുഗമമാക്കുന്നു, കൂടാതെ വെബ് പേജുകളുടെ ലോഡിംഗും പ്രോസസ്സിംഗും വേഗത്തിലാക്കുന്നു - എക്സ്റ്റേണൽ സ്ക്രിപ്റ്റ് ബ്രൗസർ ഒരു തവണ മാത്രമേ ലോഡ് ചെയ്യുകയുള്ളൂ (പിന്നീട് അത് ബ്രൗസർ കാഷെയിൽ നിന്ന് വീണ്ടെടുക്കും).
• സ്ക്രിപ്റ്റ് ലോഡുചെയ്യുന്നത് ഉടനടി ആരംഭിക്കാൻ കഴിയുമെന്ന് ബ്രൗസറിലേക്ക് defer ആട്രിബ്യൂട്ട് സിഗ്നലുകൾ നൽകുന്നു, എന്നാൽ മുഴുവൻ HTML പ്രമാണവും ലോഡുചെയ്യുന്നത് വരെ നിർവ്വഹണം വൈകും.
• ലോഡുചെയ്യുന്ന HTML പ്രമാണവുമായി സംവദിക്കുന്ന ഫംഗ്‌ഷനുകൾ സ്‌ക്രിപ്റ്റ് ഫയലിൽ അടങ്ങിയിരിക്കുന്ന സന്ദർഭങ്ങളിലോ പേജിൽ മറ്റൊരു ഫയലിനെ ആശ്രയിക്കുന്ന സാഹചര്യത്തിലോ, സ്‌ക്രിപ്റ്റ് എക്‌സിക്യൂട്ട് ചെയ്യുന്നതിനുമുമ്പ് HTML പ്രമാണം പൂർണ്ണമായി ലോഡ് ചെയ്തിരിക്കണം. ചട്ടം പോലെ, ജാവാസ്ക്രിപ്റ്റ് സ്ക്രിപ്റ്റിലേക്കുള്ള അത്തരമൊരു ലിങ്ക് ക്ലോസിംഗ് ടാഗിന് മുമ്പ് പേജിന്റെ ചുവടെ സ്ഥാപിച്ചിരിക്കുന്നു, അത് പ്രവർത്തിക്കുന്നതിന് മുഴുവൻ ഡോക്യുമെന്റും പാഴ്സ് ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. എന്നിരുന്നാലും, ചില കാരണങ്ങളാൽ, JS ഫയൽ ഡോക്യുമെന്റിൽ മറ്റെവിടെയെങ്കിലും സ്ഥാപിക്കേണ്ട സാഹചര്യത്തിൽ, defer ആട്രിബ്യൂട്ട് ഉപയോഗപ്രദമാകും.
• ഡിഫെർ ആട്രിബ്യൂട്ട് സ്‌ക്രിപ്റ്റ് എക്‌സിക്യൂഷന്റെ ആപേക്ഷിക ക്രമം സംരക്ഷിക്കുന്നു, അതേസമയം അസിൻക് ചെയ്യുന്നില്ല.
• async ആട്രിബ്യൂട്ട് ഉള്ള ഒരു സ്ക്രിപ്റ്റ് പേജ് പ്രോസസ്സിംഗിനൊപ്പം അസമന്വിതമായി എക്സിക്യൂട്ട് ചെയ്യുന്നു; സ്ക്രിപ്റ്റ് ലോഡ് ചെയ്യുമ്പോൾ, HTML പ്രമാണം ഇതുവരെ പൂർണ്ണമായും തയ്യാറായിട്ടില്ലെങ്കിലും അത് എക്സിക്യൂട്ട് ചെയ്യപ്പെടും.
• മറ്റ് ഫയലുകളെ ആശ്രയിക്കാത്ത JS ഫയലുകൾക്ക്, async ആട്രിബ്യൂട്ട് ഏറ്റവും ഉപയോഗപ്രദമാകും. സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്യുമ്പോൾ ഞങ്ങൾ ശ്രദ്ധിക്കാത്തതിനാൽ, അസിൻക്രണസ് ലോഡിംഗ് ആണ് ഏറ്റവും അനുയോജ്യമായ ഓപ്ഷൻ.

ചുമതലകൾ

• പോപ്പ്-അപ്പ് വിൻഡോ

  ഒരു ലളിതമായ HTML പ്രമാണം ഇതാ. "ഹേ ജാവാസ്ക്രിപ്റ്റ്!" എന്ന് പറയുന്ന ഒരു പോപ്പ്-അപ്പ് വിൻഡോ പ്രദർശിപ്പിക്കുന്ന HTML പേജിന്റെ ബോഡിയിൽ ഒരു സ്ക്രിപ്റ്റ് സ്ഥാപിക്കുക.

ഇന്ന് നമ്മൾ HTML-ലെ സ്ക്രിപ്റ്റുകളുടെ ഉപയോഗത്തിനായി നീക്കിവച്ചിരിക്കുന്ന ഒരു പുതിയ വിഭാഗം ആരംഭിക്കും. ഈ വിഭാഗത്തിൽ ഒരു വീഡിയോ പാഠം മാത്രമേ ഉള്ളൂ, അതിൽ നമുക്ക് സ്ക്രിപ്റ്റുകൾ പരിചയപ്പെടാം, എന്താണ് സ്ക്രിപ്റ്റ്, സ്ക്രിപ്റ്റുകൾ എങ്ങനെ ഉപയോഗിക്കാം, ഒരു സ്ക്രിപ്റ്റ് HTML-ലേക്ക് എങ്ങനെ ബന്ധിപ്പിക്കാം തുടങ്ങിയവ. ഞങ്ങൾ ഉപയോഗിക്കുന്ന ടാഗുകളെ സംബന്ധിച്ചിടത്തോളം. അവയിൽ രണ്ടെണ്ണം ഉണ്ടാകും, ഇതാണ് ടാഗും ടാഗും.

കൂടാതെ, ഈ വീഡിയോ ട്യൂട്ടോറിയലിൽ ഞങ്ങൾ ഇമേജ് മാപ്പുകളെക്കുറിച്ചുള്ള സംഭാഷണം പുനഃക്രമീകരിക്കും. ഞങ്ങൾ ഇതിനെക്കുറിച്ച് വളരെക്കാലം സംസാരിച്ചു, പക്ഷേ ഞങ്ങളുടെ തലയിൽ ആശയക്കുഴപ്പമോ തെറ്റിദ്ധാരണയോ ഉണ്ടാകാതിരിക്കാൻ ഞാൻ ഇമേജ് ഒബ്ജക്റ്റുകളുടെ വിഷ്വൽ ഡിസൈൻ സ്ക്രിപ്റ്റ് വിഭാഗത്തിലേക്ക് മാറ്റി. അതുകൊണ്ട് ഇതാ. ഒരു HTML ഡോക്യുമെന്റിലേക്ക് സംവേദനാത്മക ഇമേജ് മാപ്പുകൾ ചേർക്കുന്നതിനുള്ള ചോദ്യം ഇന്ന് ഞങ്ങൾ പൂർണ്ണമായും അടയ്ക്കുകയും ചിത്രത്തിലെ ഒബ്ജക്റ്റുകൾ ഹൈലൈറ്റ് ചെയ്യാൻ സഹായിക്കുന്ന സ്ക്രിപ്റ്റുകൾ ഉൾപ്പെടുത്തുകയും ചെയ്യും.

എന്താണ് സ്ക്രിപ്റ്റ്?

സാങ്കേതികവും മികച്ചതുമായ ആശയങ്ങളൊന്നും ഞാൻ വിവരിക്കുന്നില്ല. HTML എന്താണെന്നും ഒരു വെബ്‌സൈറ്റ് ചട്ടക്കൂട് സൃഷ്ടിക്കാൻ അത് ആവശ്യമാണെന്നും നമുക്കെല്ലാവർക്കും വളരെക്കാലമായി അറിയാം. എന്നാൽ ഫ്രെയിമിന് പുറമേ, ഒരു വെബ്സൈറ്റ് സൃഷ്ടിക്കുന്നതിന്, അത് ക്രമീകരിക്കുകയും ഉചിതമായ രീതിയിൽ രൂപകൽപ്പന ചെയ്യുകയും വേണം. CSS-ന് ഇതിന് ഞങ്ങളെ സഹായിക്കാനാകും. സൈറ്റുകളുടെ പ്രവർത്തനക്ഷമത വിപുലീകരിക്കാൻ സ്ക്രിപ്റ്റുകൾ ആവശ്യമാണ്. പൊതുവേ, ഞങ്ങളുടെ സൈറ്റിലേക്ക് ഡൈനാമിക്സ് ചേർക്കാൻ.

ഞങ്ങൾ സംസാരിക്കുന്ന സ്ക്രിപ്റ്റുകൾ വെബ്‌സൈറ്റ്-നിർദ്ദിഷ്ടവും JavaScript, JQuery പോലുള്ള ഭാഷകൾ ഉപയോഗിക്കുന്നതുമാണ്. സ്ക്രിപ്റ്റുകൾ എന്ന ആശയം വളരെ വിശാലവും വ്യത്യസ്ത ദിശകളിൽ ഉപയോഗിക്കുന്നതുമാണ് കാരണം, ഞങ്ങളുടെ കാര്യത്തിൽ ഇവ വെബ്‌സൈറ്റുകളാണ്.

HTML-ലെ സ്ക്രിപ്റ്റുകൾ.

ഞങ്ങളുടെ കാര്യത്തിൽ, സ്ക്രിപ്റ്റുകൾ ബന്ധിപ്പിക്കാൻ സഹായിക്കുന്ന രണ്ട് HTML ടാഗുകൾ ഞങ്ങൾ ഉപയോഗിക്കും.

ഒരു HTML പേജിലേക്ക് ഒരു സ്ക്രിപ്റ്റിനെ ബന്ധിപ്പിക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ് ഒരു HTML ടാഗ്. അതേ സമയം, സ്‌ക്രിപ്റ്റ് കോഡ് ഒരു പ്രത്യേക ഫയലിലാകാം, അത് ഒരു മൂന്നാം കക്ഷി സെർവറിലോ ഞങ്ങളുടെ സെർവറിലോ എവിടെയെങ്കിലും സ്ഥിതിചെയ്യാം, അല്ലെങ്കിൽ ഡോക്യുമെന്റിന്റെ HTML കോഡിൽ നേരിട്ട് ഉൾച്ചേർക്കാം എന്നതിനാൽ, ഞങ്ങൾക്ക് വിവിധ കണക്ഷൻ രീതികൾ ഉപയോഗിക്കാം. .

HTML ടാഗ് പേജ് സന്ദർശകന്റെ ബ്രൗസറിൽ സ്ക്രിപ്റ്റ് പിന്തുണ അപ്രാപ്തമാക്കി അല്ലെങ്കിൽ നിലവിലില്ല എന്ന് അറിയിക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്. ഇതിനർത്ഥം അവൻ സ്ഥിതിചെയ്യുന്ന പേജിന്റെ പൂർണ്ണമായ പ്രവർത്തനക്ഷമത ഉപയോഗിക്കാൻ അദ്ദേഹത്തിന് കഴിയില്ല എന്നാണ്.

സ്ക്രിപ്റ്റ് ബന്ധിപ്പിക്കുന്നു. HTML-ലേക്ക് ഒരു സ്ക്രിപ്റ്റ് എങ്ങനെ ചേർക്കാം? (എല്ലാ കണക്ഷൻ ഓപ്ഷനുകളും)

നമുക്ക് ടാഗിൽ നിന്ന് ആരംഭിച്ച് അത് HTML-ൽ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് കണ്ടെത്താം. എല്ലാത്തിനുമുപരി, ഞങ്ങൾക്ക് പേജ് കൂടുതൽ ചലനാത്മകമാക്കുന്നതിന്, HTML-ൽ സ്ക്രിപ്റ്റുകൾ ബന്ധിപ്പിക്കാനോ നടപ്പിലാക്കാനോ ഞങ്ങൾക്ക് കഴിയണം. ഞാൻ മുകളിൽ സൂചിപ്പിച്ചതുപോലെ, HTML-ൽ സ്ക്രിപ്റ്റുകൾ ബന്ധിപ്പിക്കുന്നതിന് ഞങ്ങൾക്ക് നിരവധി ഓപ്ഷനുകൾ ഉണ്ട്.

മറ്റൊരു സെർവറിൽ നിന്ന് ഒരു സ്ക്രിപ്റ്റ് ബന്ധിപ്പിക്കുന്നു.

സ്ക്രിപ്റ്റുകൾ ഉപയോഗിക്കുമ്പോൾ, ഞങ്ങൾ എല്ലായ്പ്പോഴും അവ സ്വയം എഴുതുകയോ ഫയലുകൾ ഡൗൺലോഡ് ചെയ്യുകയോ കണക്ഷനായി ഞങ്ങളുടെ സെർവറിൽ സ്ഥാപിക്കുകയോ ചെയ്യേണ്ടതില്ല. സ്ക്രിപ്റ്റ് സ്ക്രിപ്റ്റ് ഉള്ള ഫയൽ ഒരു മൂന്നാം കക്ഷി സെർവറിലും സ്ഥിതിചെയ്യാം, ഉദാഹരണത്തിന്, google പോലെ.

ഈ ഉദാഹരണത്തിൽ, ഞങ്ങളുടെ പ്രമാണത്തിൽ jQuery പിന്തുണ ഉൾപ്പെടുത്തും. സ്ക്രിപ്റ്റുകളുള്ള ഫയൽ ഗൂഗിൾ സെർവറിൽ സ്ഥിതിചെയ്യുന്നു, അത് ബന്ധിപ്പിക്കുന്നതിന് ഫയൽ ലൊക്കേഷന്റെ ശരിയായ വിലാസം സൂചിപ്പിക്കേണ്ടതുണ്ട്. ഒരു ടാഗ് ഉപയോഗിക്കുമ്പോൾ, ഞങ്ങൾ HTML ടൈപ്പ് ആട്രിബ്യൂട്ട് ഉപയോഗിക്കണം എന്നതും ഇവിടെ ശ്രദ്ധിക്കേണ്ടതാണ്, ഉൾപ്പെടുത്തിയ ഫയൽ ഏത് തരത്തിലുള്ള ഡോക്യുമെന്റിൽ പെട്ടതാണെന്ന് വെബ് ബ്രൗസറിനെ സൂചിപ്പിക്കാൻ ഇത് സഹായിക്കും.

അതിനാൽ, കണക്റ്റുചെയ്യാൻ, Google ഡവലപ്പർമാരുടെ പേജിലേക്ക് പോകുക. നിങ്ങളുടെ തിരയൽ എളുപ്പമാക്കുന്നതിന്, ലിങ്ക് ഇതാ: https://developers.google.com/speed/libraries/devguide#jquery. അതിനുശേഷം, ഇതുപോലെയുള്ള കോഡ് ഞങ്ങളുടെ HTML പ്രമാണത്തിലേക്ക് പകർത്തുക:

ലൈബ്രറി പതിപ്പ് വ്യത്യാസപ്പെടാം.

കോഡ് പകർത്തിക്കഴിഞ്ഞാൽ, ക്ലോസിംഗ് ടാഗിന് മുമ്പായി ഞങ്ങൾ അത് HTML പ്രമാണത്തിലേക്ക് ഒട്ടിക്കുന്നു. അതിനുശേഷം ലൈബ്രറി കണക്‌റ്റ് ചെയ്‌തിട്ടുണ്ടോ ഇല്ലയോ എന്ന് പരിശോധിക്കാം. ഇത് എങ്ങനെ ചെയ്യണമെന്ന് കാണാൻ വീഡിയോ ട്യൂട്ടോറിയൽ കാണുക.

ഇത് ഒരുപക്ഷേ ഏറ്റവും എളുപ്പമുള്ള മാർഗമാണ്, കാരണം ഇവിടെ, പൂർത്തിയായ കോഡ് പകർത്തി ഒട്ടിക്കുന്നതിന് പുറമെ, നിങ്ങൾ മറ്റൊന്നും ചെയ്യേണ്ടതില്ല. ഒരു മൂല്യം ഉപയോഗിച്ച് തരം ആട്രിബ്യൂട്ട് ഞങ്ങൾ വ്യക്തമാക്കണം എന്നതാണ് ചേർക്കേണ്ട ഒരേയൊരു കാര്യം. അതായത്, അന്തിമ കോഡ് ഇതുപോലെയായിരിക്കും:

ഞങ്ങളുടെ സെർവറിൽ നിന്ന് സ്ക്രിപ്റ്റ് ബന്ധിപ്പിക്കുന്നു.

ഈ കണക്ഷൻ രീതി ആദ്യത്തേതിന് സമാനമാണ്, ഞങ്ങളുടെ സെർവറിൽ നിന്ന് ഒരു സ്ക്രിപ്റ്റ് കണക്റ്റുചെയ്യുമ്പോൾ മാത്രം, അതായത്, സ്ക്രിപ്റ്റുകളുള്ള ഫയൽ സൈറ്റ് തന്നെ ഉപയോഗിക്കുന്ന ഹോസ്റ്റിംഗിൽ സ്ഥിതിചെയ്യണം, ഫയലിലേക്കുള്ള ശരിയായ പാത ഞങ്ങൾ വ്യക്തമാക്കണം. കൂടാതെ, സൈറ്റ് ഫയലുകളിലെ ഓറിയന്റേഷന്റെ കൂടുതൽ സൗകര്യപ്രദമായ ഓർഗനൈസേഷനായി, നമുക്ക് സ്ക്രിപ്റ്റുകൾക്കായി ഒരു പ്രത്യേക ഫോൾഡർ സൃഷ്ടിച്ച് അതിന് പേര് നൽകാം, ഉദാഹരണത്തിന്, js. ഈ ഫോൾഡറിൽ നമ്മൾ .js ഫോർമാറ്റിൽ ഒരു ഫയൽ ഇടണം, അതിൽ കണക്ഷന് ആവശ്യമായ പ്രവർത്തനം അടങ്ങിയിരിക്കുന്നു. ക്ലോസിംഗ് ഹെഡ് ടാഗിന് മുമ്പായി HTML പ്രമാണത്തിൽ ഈ ഫയലിലേക്കുള്ള പാത വ്യക്തമാക്കുക.

ഞാൻ ചുവടെ നൽകുന്ന ഉദാഹരണത്തിൽ, ഇമേജ് മാപ്പുകൾക്കായി ഹൈലൈറ്റിംഗ് സൃഷ്ടിക്കാൻ സഹായിക്കുന്ന ഒരു സ്ക്രിപ്റ്റ് ഞങ്ങൾ ബന്ധിപ്പിക്കാൻ ശ്രമിക്കും. അതേ സമയം, സ്ക്രിപ്റ്റ് ബന്ധിപ്പിക്കുമ്പോൾ, ഞാൻ ആപേക്ഷിക പാത ഉപയോഗിക്കുന്നു.

ഈ പേജിലെ വീഡിയോ കോഴ്‌സിനായുള്ള അധിക മെറ്റീരിയലുകളുടെ പേജിൽ നിങ്ങൾക്ക് സ്‌ക്രിപ്റ്റ് ഫയൽ തന്നെ ഡൗൺലോഡ് ചെയ്യാം.

സ്ക്രിപ്റ്റിന്റെ പ്രവർത്തനം എങ്ങനെ പരിശോധിക്കാം എന്നത് വീഡിയോ ക്ലിപ്പിൽ കാണിച്ചിരിക്കുന്നു.

ഒരു HTML പ്രമാണത്തിലേക്ക് ഒരു സ്ക്രിപ്റ്റ് സ്ക്രിപ്റ്റ് ഉൾച്ചേർക്കുന്നു. HTML-ലേക്ക് ഒരു സ്ക്രിപ്റ്റ് എങ്ങനെ ചേർക്കാം?

പിന്നീടുള്ള രീതി വ്യക്തിഗത ഫയലുകൾ ഉൾപ്പെടുത്തുന്നത് പരിഗണിക്കുന്നില്ല, എന്നാൽ HTML ഡോക്യുമെന്റിനുള്ളിൽ നേരിട്ട് സ്ക്രിപ്റ്റ് ഉൾപ്പെടുത്താൻ നിർദ്ദേശിക്കുന്നു. എന്നാൽ ഇവിടെ സ്ക്രിപ്റ്റ് വലുതല്ലെങ്കിൽ, നമുക്ക് അത് പ്രമാണത്തിലേക്ക് എളുപ്പത്തിൽ നടപ്പിലാക്കാൻ കഴിയും എന്നത് ശ്രദ്ധിക്കേണ്ടതാണ്. ഇതൊരു വലിയ പ്രവർത്തനമോ മുഴുവൻ ലൈബ്രറിയോ ആണെങ്കിൽ, മുകളിൽ ലിസ്റ്റുചെയ്തിരിക്കുന്ന രീതികളിൽ ഒന്ന് നിങ്ങൾ ഉപയോഗിക്കണം.

അതിനാൽ, നടപ്പിലാക്കേണ്ട ഒരു നിശ്ചിത സ്ക്രിപ്റ്റ് ഞങ്ങളുടെ പക്കലുണ്ടെന്ന് കരുതുക. ഞങ്ങളുടെ കാര്യത്തിൽ, ഇത് ഇമേജ് മാപ്പ് ഒബ്‌ജക്റ്റുകളുടെ ഹൈലൈറ്റിംഗിനെ സൂചിപ്പിക്കുന്നു. js ഫോൾഡറിലെ അധിക മെറ്റീരിയലുകളിൽ നിങ്ങൾക്ക് പ്രവർത്തനം കണ്ടെത്താനാകും. സ്ക്രിപ്റ്റ് ഫയൽ സ്ഥിതിചെയ്യുന്ന അതേ സ്ഥലത്ത് ആവശ്യമായ കോഡ് എഴുതിയ ഒരു സാധാരണ ടെക്സ്റ്റ് ഫയൽ ഉണ്ട്. നിങ്ങൾക്ക് ഈ പേജിൽ സ്ക്രിപ്റ്റ് കോഡ് പകർത്താനും കഴിയും:

$(function() ($(".map").maphilight(); $("#squidheadlink").mouseover(function(e) ( $("#squidhead").mouseover(); )).mouseout( ഫംഗ്ഷൻ(ഇ) ($("#squidhead").mouseout(); )).click(function(e) ( e.preventDefault(); ));));

അതിനുശേഷം അത് ടാഗുകൾക്കിടയിൽ ചേർക്കണം. അതായത്, ടാഗിന് മുമ്പായി നമുക്ക് ചില വ്യക്തിഗത ഫംഗ്ഷനുകൾ നേരിട്ട് HTML പ്രമാണത്തിലേക്ക് ചേർക്കാം:

ഇമേജ് മാപ്പ് ഹൈലൈറ്റ് ചെയ്യുന്നതിനായി, നിങ്ങൾ എല്ലാ നിർദ്ദിഷ്ട സ്ക്രിപ്റ്റുകളും ചേർക്കണം എന്നതും ഇവിടെ ശ്രദ്ധിക്കേണ്ടതാണ്. അതായത്, JQuery ലൈബ്രറി, അധിക മെറ്റീരിയലുകളിലുള്ള ഫയൽ കണക്റ്റുചെയ്‌ത് HTML പ്രമാണത്തിലേക്ക് ഫംഗ്ഷൻ ചേർക്കുക. ഒരു ഘട്ടമെങ്കിലും പൂർത്തിയാക്കിയില്ലെങ്കിൽ, ബാക്ക്ലൈറ്റ് പ്രവർത്തിക്കില്ല.

HTML ടാഗ്.

ടാഗിനെ സംബന്ധിച്ചിടത്തോളം, എല്ലാം ലളിതമാണ്. ഉപയോക്താവിന്റെ വെബ് ബ്രൗസറിന് സ്‌ക്രിപ്റ്റ് പിന്തുണ ഇല്ലെങ്കിലോ അത് പ്രവർത്തനരഹിതമാക്കിയാലോ ഈ ടാഗ് വർക്കിൽ ഉൾപ്പെടുത്തും. ഇതൊരു ജോടിയാക്കിയ ടാഗാണ്. ടാഗുകൾ തുറക്കുന്നതിനും അടയ്ക്കുന്നതിനും ഇടയിൽ, ഉപയോക്താവിന്റെ ബ്രൗസർ സ്‌ക്രിപ്റ്റുകളെ പിന്തുണയ്‌ക്കാത്ത സാഹചര്യത്തിൽ കാണിക്കുന്ന വിവരങ്ങൾ ഞങ്ങൾ സൂചിപ്പിക്കണം. ഉദാഹരണത്തിന്, ഇതുപോലെ:

നിങ്ങളുടെ സ്ക്രിപ്റ്റ് പ്രവർത്തിക്കുന്നില്ല...

തുറക്കുന്ന ടാഗിന് ശേഷം ഈ ടാഗ് ഉൾപ്പെടുത്തണം.

വീഡിയോ പാഠം: HTML-ൽ സ്ക്രിപ്റ്റുകൾ ബന്ധിപ്പിക്കുന്നു. ഇമേജ് മാപ്പ് ബാക്ക്ലൈറ്റ് ഓണാക്കുക.

HTML ഡയറക്ടറിയും മറ്റ് മെറ്റീരിയലുകളും ഡൗൺലോഡ് ചെയ്യാനും ഡൗൺലോഡ് ചെയ്യാനും കഴിയും!

അടുത്ത വീഡിയോയിൽ, ഞങ്ങൾ HTML-ലെ സ്ക്രിപ്റ്റുകളുമായുള്ള പരിചയം തുടരുകയും മറ്റൊരു ആശയവുമായി പരിചയപ്പെടാൻ തുടങ്ങുകയും ചെയ്യും, ഇവ HTML-ലെ വീഡിയോ, ഓഡിയോ, ഫ്ലാഷ് ബാനറുകൾ പോലെയുള്ള ഒബ്ജക്റ്റുകളാണ്. ആദ്യം, HTML-ലേക്ക് ഒരു വീഡിയോ എങ്ങനെ ചേർക്കാമെന്നും HTML ടാഗുകൾ പരിചയപ്പെടാമെന്നും നമുക്ക് നോക്കാം.

രചയിതാവിൽ നിന്ന്: ആശംസകൾ, സുഹൃത്തുക്കളെ. ഈ ലേഖനത്തിൽ, നമ്മുടെ JavaScript കോഡ് ഒരു ബാഹ്യ ഫയലിലേക്ക് എങ്ങനെ കൈമാറാമെന്നും JavaScript സ്ക്രിപ്റ്റ് എങ്ങനെ ബന്ധിപ്പിക്കാമെന്നും നമ്മൾ പഠിക്കും. തുടക്കക്കാർ ജാവാസ്ക്രിപ്റ്റ് ഭാഷ പഠിക്കാൻ തുടങ്ങുന്നതിനെ ലക്ഷ്യം വച്ചുള്ളതാണ് ലേഖനം.

അതിനാൽ, നമുക്ക് ചോദ്യത്തിൽ നിന്ന് ആരംഭിക്കാം, എന്തുകൊണ്ടാണ് നിങ്ങൾ ഒരു ബാഹ്യ ഫയലിലേക്ക് JavaScript കോഡ് ഇടേണ്ടത്? ഇത് ലളിതമാണ്. നിങ്ങളുടെ സ്ക്രിപ്റ്റ് പതിനായിരക്കണക്കിന് അല്ലെങ്കിൽ നൂറുകണക്കിന് കോഡ് ലൈനുകൾ എടുക്കുന്നുവെന്ന് സങ്കൽപ്പിക്കുക. അല്ലെങ്കിൽ അതിലും കൂടുതൽ. കൂടാതെ, തീർച്ചയായും, ഞങ്ങളുടെ സൈറ്റിന്റെ എല്ലാ പേജുകളിലും ഈ സ്ക്രിപ്റ്റ് ആവശ്യമായി വരും. സമ്മതിക്കുക, ഓരോ ഫയലിലും ഈ നൂറുകണക്കിന് കോഡുകളുടെ ഡ്യൂപ്ലിക്കേറ്റ് ചെയ്യുന്നത് ഈ സാഹചര്യത്തിൽ തികച്ചും മോശമായിരിക്കും. ഒരു HTML ഡോക്യുമെന്റിൽ HTML ഇതര കോഡ് ഉള്ളത് വളരെ ശരിയോ മനോഹരമോ ആയി കാണപ്പെടില്ല.

അതുകൊണ്ടാണ് പേജുമായി ബന്ധിപ്പിച്ചിരിക്കുന്ന ഒരു പ്രത്യേക ഫയലിൽ ജാവാസ്ക്രിപ്റ്റ് കോഡ് ഇടുന്നത് പതിവാണ്. യഥാർത്ഥത്തിൽ, സ്റ്റൈൽ ഫയലുകളുടെ കാര്യത്തിലെന്നപോലെ എല്ലാം സമാനമാണ്. പ്രധാന ഫയലിലേക്ക് ഒരു JavaScript സ്ക്രിപ്റ്റ് എങ്ങനെ ബന്ധിപ്പിക്കാം? വളരെ ലളിതം. ഇത് ചെയ്യുന്നതിന്, ചിത്രങ്ങളുടെ കാര്യത്തിലെന്നപോലെ, ഞങ്ങൾ ഇതിനകം പരിചിതമായ ടാഗ് ഉപയോഗിക്കുന്നു, അതിൽ src ആട്രിബ്യൂട്ട് ചേർത്തിരിക്കുന്നു. ശരി, നിങ്ങൾ ഊഹിച്ചതുപോലെ, src ആട്രിബ്യൂട്ട് ബന്ധിപ്പിക്കേണ്ട JavaScript സ്ക്രിപ്റ്റിലേക്കുള്ള പാത വ്യക്തമാക്കുന്നു.

ഒരു വരി കോഡ് അടങ്ങുന്ന ഞങ്ങളുടെ പ്രോഗ്രാം ഒരു ബാഹ്യ ഫയലിലേക്ക് മാറ്റാനും ഈ ഫയൽ ഉൾപ്പെടുത്താനും ശ്രമിക്കാം. നമുക്ക് ഈ ഫയലിനെ വിളിക്കാം, ഉദാഹരണത്തിന്, scripts.js:

ജാവാസ്ക്രിപ്റ്റ്. വേഗത്തിലുള്ള തുടക്കം

മുന്നറിയിപ്പ് ("ഹലോ!");

ഞങ്ങൾ ഇപ്പോൾ പേജ് പുതുക്കിയാൽ, ഒന്നും മാറില്ല, ഞങ്ങളുടെ സ്ക്രിപ്റ്റ് പ്രവർത്തിക്കുന്നു, ആശംസകളോടെ ഒരു മോഡൽ വിൻഡോ പ്രദർശിപ്പിക്കുന്നു.

ജാവാസ്ക്രിപ്റ്റ്. വേഗത്തിലുള്ള തുടക്കം

ഒരു വെബ് ആപ്ലിക്കേഷൻ എങ്ങനെ സൃഷ്‌ടിക്കാം എന്നതിന്റെ ഹാൻഡ്-ഓൺ ഉദാഹരണത്തിലൂടെ JavaScript-ന്റെ അടിസ്ഥാനകാര്യങ്ങൾ മനസിലാക്കുക.

സ്ക്രിപ്റ്റുകൾ ബന്ധിപ്പിക്കുമ്പോൾ നിങ്ങൾ എന്താണ് ശ്രദ്ധിക്കേണ്ടത്? ക്ലോസിംഗ് ബോഡി ടാഗിന് മുമ്പായി ഡോക്യുമെന്റിന്റെ അവസാനം ഞങ്ങൾ സ്ക്രിപ്റ്റ് ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. മുമ്പ്, പ്രമാണത്തിന്റെ തുടക്കത്തിൽ, ഹെഡ് ടാഗുകളിൽ സ്ക്രിപ്റ്റുകൾ ഉൾപ്പെടുത്തുന്നത് സാധാരണ രീതിയായിരുന്നു. എന്നിരുന്നാലും, ഇന്ന് ഇത് ചെയ്യാൻ ശുപാർശ ചെയ്യുന്നില്ല കൂടാതെ പ്രമാണത്തിന്റെ അവസാനം സ്ക്രിപ്റ്റുകൾ ഉൾപ്പെടുത്താൻ ശുപാർശ ചെയ്യുന്നു. എന്തുകൊണ്ടാണത്?

ഹെഡ് ടാഗുകൾക്കിടയിൽ കണക്ഷനുകൾ നീക്കാൻ ശ്രമിക്കാം:

നമ്മൾ എന്താണ് കാണുന്നത്? ഒരു മോഡൽ വിൻഡോ അല്ലാതെ മറ്റൊന്നുമില്ല. ഉള്ളടക്കം ഇല്ല. അതാണ് കാര്യം. ഡോക്യുമെന്റിന്റെ തുടക്കത്തിൽ ഒരു ബാഹ്യ സ്ക്രിപ്റ്റ് ഉൾപ്പെടുത്തുമ്പോൾ, ബ്രൗസർ അത് ഡൗൺലോഡ് ചെയ്യാൻ തുടങ്ങുകയും അത് എക്സിക്യൂട്ട് ചെയ്യാൻ ശ്രമിക്കുകയും ചെയ്യുന്നു. സ്‌ക്രിപ്‌റ്റിന്റെ ലോഡിംഗും എക്‌സിക്യൂഷനും പൂർത്തിയാകുന്നതുവരെ, ബ്രൗസർ ഉൾപ്പെടുത്തിയ ഫയലിനെ പിന്തുടരുന്ന ഡോക്യുമെന്റിന്റെ ഭാഗം കാണിക്കില്ല.

ചില കാരണങ്ങളാൽ ഈ ഫയൽ വളരെ സാവധാനത്തിലാണ് ലോഡ് ചെയ്യുന്നതെന്ന് ഇപ്പോൾ സങ്കൽപ്പിക്കുക. തൽഫലമായി, ഉപയോക്താവിന് കാത്തിരിക്കേണ്ടി വരും, ചിലപ്പോൾ അവൻ വെറുതെ കാത്തിരിക്കില്ല. അതുകൊണ്ടാണ് ക്ലോസിംഗ് ബോഡി ടാഗിന് മുമ്പ് ഡോക്യുമെന്റിന്റെ അവസാനം സ്ക്രിപ്റ്റുകൾ ഉൾപ്പെടുത്താൻ ശുപാർശ ചെയ്യുന്നത്.

എന്നാൽ ഒരു പ്രത്യേക ലൈബ്രറിക്ക് ഡോക്യുമെന്റിന്റെ തുടക്കത്തിൽ ഉൾപ്പെടുത്തേണ്ടി വന്നാലോ? ഈ സാഹചര്യത്തിൽ എങ്ങനെ ആയിരിക്കണം? ഈ സാഹചര്യത്തിൽ, അസിൻക്രൊണസ് ആയി സ്ക്രിപ്റ്റുകൾ ലോഡ് ചെയ്യാൻ ബ്രൗസറിനെ അനുവദിക്കുന്ന അസിൻക്, ഡിഫെർ ആട്രിബ്യൂട്ടുകൾ ഞങ്ങളെ സഹായിക്കും, അതായത്. ബ്രൗസർ സ്ക്രിപ്റ്റ് ഡൗൺലോഡ് ചെയ്യാൻ തുടങ്ങും, പക്ഷേ പ്രമാണം പ്രദർശിപ്പിക്കുന്നത് നിർത്തില്ല. ഈ ആട്രിബ്യൂട്ടുകൾ ഓരോന്നായി ഉപയോഗിക്കാൻ ശ്രമിക്കാം:

< ! -- вариант1 -- > < ! -- вариант2 -- >

രണ്ട് സാഹചര്യങ്ങളിലും നമുക്ക് ഒരേ ഫലം ലഭിക്കും; പ്രമാണത്തിന്റെ പ്രദർശനം തടസ്സപ്പെടുത്താതെ സ്ക്രിപ്റ്റ് ബന്ധിപ്പിച്ചിരിക്കുന്നു:

അസിൻക്, ഡിഫർ ആട്രിബ്യൂട്ടുകൾ തമ്മിലുള്ള വ്യത്യാസം എന്താണ്? ഡിഫർ ആട്രിബ്യൂട്ട് ബാഹ്യ സ്ക്രിപ്റ്റുകൾ ബന്ധിപ്പിക്കുന്നതിന്റെ ക്രമം സംരക്ഷിക്കുന്നു, അതായത്. മുകളിൽ കണക്‌റ്റ് ചെയ്‌തിരിക്കുന്ന സ്‌ക്രിപ്റ്റ് എല്ലായ്‌പ്പോഴും ആദ്യം എക്‌സിക്യൂട്ട് ചെയ്യപ്പെടും. ഞങ്ങൾ നിരവധി സ്ക്രിപ്റ്റുകൾ ബന്ധിപ്പിക്കുമ്പോൾ ഇത് പ്രധാനമാണ്, അവയിൽ ചിലത് മറ്റൊന്നിനെ ആശ്രയിച്ചിരിക്കും. ഈ സാഹചര്യത്തിൽ, ആശ്രിതത്വത്തിന് മുമ്പ് പ്രധാന സ്ക്രിപ്റ്റ് ബന്ധിപ്പിച്ചിരിക്കണം. ഡിഫർ ആട്രിബ്യൂട്ട് ക്രമം നിലനിർത്തുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. ലോഡുചെയ്‌ത ഉടൻ തന്നെ സ്‌ക്രിപ്‌റ്റ് എക്‌സിക്യൂട്ട് ചെയ്യുന്നുവെന്ന് അസിൻക് ആട്രിബ്യൂട്ട് ഉറപ്പാക്കും. അതിനാൽ, ഈ ഓപ്ഷൻ എല്ലായ്പ്പോഴും അനുയോജ്യമല്ല, കാരണം പ്രധാന സ്ക്രിപ്റ്റിന് മുമ്പ് ആശ്രിത സ്ക്രിപ്റ്റ് ലോഡ് ചെയ്തേക്കാം.

ഇത് ലേഖനം അവസാനിപ്പിക്കുന്നു. നിങ്ങൾക്ക് JavaScript-നെ കുറിച്ച് കൂടുതലറിയണമെങ്കിൽ, നിങ്ങളുടെ ശ്രദ്ധ വേറൊന്നിലേക്ക് തിരിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു. നല്ലതുവരട്ടെ!

ജാവാസ്ക്രിപ്റ്റ്. വേഗത്തിലുള്ള തുടക്കം

ഒരു വെബ് ആപ്ലിക്കേഷൻ എങ്ങനെ സൃഷ്‌ടിക്കാം എന്നതിന്റെ ഹാൻഡ്-ഓൺ ഉദാഹരണത്തിലൂടെ JavaScript-ന്റെ അടിസ്ഥാനകാര്യങ്ങൾ മനസിലാക്കുക.

നിങ്ങളുടെ വെബ്‌സൈറ്റിലേക്ക് വ്യത്യസ്ത തരം സ്‌ക്രിപ്റ്റുകൾ എങ്ങനെ ബന്ധിപ്പിക്കാമെന്ന് ഇന്ന് ഞാൻ നിങ്ങളോട് പറയും. ഇതൊരു തരം അടിസ്ഥാന കാര്യമാണ്, ഈ ലേഖനം ആദ്യത്തേതിൽ ഒന്ന് ഞാൻ എഴുതേണ്ടതായിരുന്നു. അതിനാൽ, നമുക്ക് ആരംഭിക്കാം.

സൈറ്റിലേക്ക് JS സ്ക്രിപ്റ്റുകൾ (*.js എക്സ്റ്റൻഷനുള്ള ഫയലുകൾ) ബന്ധിപ്പിക്കുന്നു

സൈറ്റിന്റെ പ്രവർത്തനക്ഷമത പല തരത്തിൽ മെച്ചപ്പെടുത്താൻ JavaScript ഞങ്ങളെ സഹായിക്കുന്നു. അത് അല്ലെങ്കിൽ, ഉദാഹരണത്തിന്, പ്രശ്നത്തിന്റെ ചില സാങ്കേതിക വശങ്ങൾ.

JavaScript രണ്ട് തരത്തിൽ ബന്ധിപ്പിക്കാൻ കഴിയും:

1. ആദ്യം- ഇത് ടാഗുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ വെബ്‌സൈറ്റിലേക്ക് നേരിട്ട് കോഡ് ചേർക്കുന്നു:

കോഡ്

2. രണ്ടാമത്- ഫയൽ ഉപയോഗിച്ച്:

ഇവിടെ "https://www..js" എന്നത് സ്ക്രിപ്റ്റ് ഫയലിലേക്കുള്ള പാതയാണ്. ഒരു റിമോട്ട് (ബാഹ്യ) സെർവറിലെ ഫയലുകൾക്കായി ഈ ഓപ്ഷൻ എഴുതാൻ ശുപാർശ ചെയ്യുന്നു. ഫയൽ നിങ്ങളുടെ സൈറ്റിൽ സ്ഥിതിചെയ്യുന്നുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് ആപേക്ഷിക പാത വ്യക്തമാക്കാൻ കഴിയും:

നിങ്ങൾ പെട്ടെന്ന് ഡൊമെയ്ൻ മാറ്റാനോ സൈറ്റ് മറ്റൊരു പ്രോട്ടോക്കോളിലേക്ക് മാറ്റാനോ ആഗ്രഹിക്കുന്നുവെങ്കിൽ ഇത് സൗകര്യപ്രദമാണ്.

കണക്ഷൻ ലൊക്കേഷനെ സംബന്ധിച്ചിടത്തോളം, HEAD വിഭാഗത്തിലെ എല്ലാ സ്ക്രിപ്റ്റുകളും അതിന്റെ ക്ലോസിംഗ് ടാഗിന് മുമ്പ് ബന്ധിപ്പിക്കാൻ ശുപാർശ ചെയ്യുന്നു. ഉദാഹരണത്തിന്:

ഒരു തുടക്കക്കാരനായ വെബ്‌മാസ്റ്റർക്കുള്ള എല്ലാം

അവ ബോഡി വിഭാഗത്തിലും ബന്ധിപ്പിക്കാൻ കഴിയും. ഉദാഹരണത്തിന്, എല്ലാ ലൈബ്രറികളും HEAD വിഭാഗത്തിൽ ഉൾപ്പെടുത്താൻ ശുപാർശ ചെയ്യുന്നു, അതേസമയം എല്ലാ കൗണ്ടറുകളും സ്ലൈഡറുകളും ഗാലറികളും മറ്റ് സ്ക്രിപ്റ്റുകളും ബോഡി വിഭാഗത്തിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്, ക്ലോസിംഗ് ടാഗിന് മുമ്പും.

സൈറ്റിലേക്ക് PHP സ്ക്രിപ്റ്റുകൾ (*.php വിപുലീകരണമുള്ള ഫയലുകൾ) ബന്ധിപ്പിക്കുന്നു

PHP സ്ക്രിപ്റ്റുകൾ ബന്ധിപ്പിക്കുന്നത് മൂന്ന് വഴികളിലൂടെയാണ് നടത്തുന്നത്:

1. ആദ്യം– ഇത് സൈറ്റ് പേജിലേക്ക് തന്നെ കോഡ് ചേർക്കുന്നതാണ് (നിങ്ങൾക്ക് *.html വിപുലീകരണമുള്ള ഒരു പേജ് ഉണ്ടെങ്കിൽ, നിങ്ങൾ വിപുലീകരണം *.php ലേക്ക് മാറ്റേണ്ടതുണ്ട്) ടാഗുകൾ ഉപയോഗിച്ച്:

2. ഒരു ഫയൽ ഉപയോഗിക്കുന്നു (ഈ സാഹചര്യത്തിൽ, *.html വിപുലീകരണമുള്ള ഒരു പേജിലും കണക്ഷൻ ഉണ്ടാക്കാം):

എന്നാൽ ഈ രീതി പ്രവർത്തിക്കുന്നതിന്, നിങ്ങളുടെ സൈറ്റിന്റെ റൂട്ടിൽ, ഏറ്റവും മുകളിൽ സ്ഥിതി ചെയ്യുന്ന .htaccess ഫയലിലേക്ക് ഈ വരികൾ ചേർക്കേണ്ടതുണ്ട്:

RemoveHandler .html .htm AddType application/x-httpd-php .php .htm .html .phtml

നിങ്ങളുടെ ഹോസ്റ്റിംഗിൽ അത്തരമൊരു ഫയൽ ലഭ്യമല്ലെങ്കിൽ, ഏതെങ്കിലും ടെക്സ്റ്റ് എഡിറ്റർ ഉപയോഗിച്ച് അത് സൃഷ്ടിക്കുക.

3. മൂന്നാമത്- ഒരു JS സ്ക്രിപ്റ്റ് ഉപയോഗിച്ച്. ഈ സാഹചര്യത്തിൽ, സെർവറിൽ എക്സിക്യൂട്ട് ചെയ്ത PHP സ്ക്രിപ്റ്റിന്റെ ഫലവും നിങ്ങൾക്ക് ലഭിക്കും.

നടപ്പിലാക്കൽ ഇനിപ്പറയുന്നതായിരിക്കും:

$(ഡോക്യുമെന്റ്).റെഡി(ഫംഗ്ഷൻ() ($(".ഫലം").ലോഡ്("/പ്രധാന.php"); ));

ഇവിടെ ".ഫലം" എന്നത് ഡാറ്റ ലോഡ് ചെയ്യുന്ന ക്ലാസ്സാണ്, കൂടാതെ "/main.php" എന്നത് യഥാക്രമം PHP സ്ക്രിപ്റ്റിന്റെ വിലാസമാണ്.

നിങ്ങൾ മറ്റൊരു സെർവറിൽ നിന്നാണ് ഡാറ്റ ലോഡ് ചെയ്യുന്നതെങ്കിൽ, നിങ്ങളുടെ സെർവറിൽ PHP പിന്തുണ ആവശ്യമില്ല. നിങ്ങളുടെ സൈറ്റിലേക്ക് jQuery ലൈബ്രറി ബന്ധിപ്പിക്കാൻ മറക്കരുത്.

ഇവിടെ നിയമങ്ങൾ തികച്ചും സമാനമാണ്: ഒരു ബാഹ്യ സെർവറിലാണെങ്കിൽ ഫയലിന്റെ പൂർണ്ണ വിലാസം, നിങ്ങളുടേതാണെങ്കിൽ ആപേക്ഷിക വിലാസം.

കുറിപ്പ്! നിങ്ങളുടെ സൈറ്റിലേക്ക് ഒരു PHP സ്ക്രിപ്റ്റ് കണക്റ്റുചെയ്യണമെങ്കിൽ, സെർവറിന് PHP പിന്തുണ ഉണ്ടായിരിക്കണം. നിങ്ങൾക്ക് ഈ ഓപ്ഷൻ ഉണ്ടോ എന്ന് കണ്ടെത്താൻ നിങ്ങളുടെ ഹോസ്റ്റിംഗ് പ്രൊവൈഡറെ പരിശോധിക്കുക.

നിങ്ങൾ ആദ്യമായി സ്‌ക്രിപ്റ്റുകൾ ബന്ധിപ്പിക്കുകയാണെങ്കിൽ, ലേഖനത്തിന്റെ അവസാനം അറ്റാച്ച് ചെയ്‌തിരിക്കുന്ന ആർക്കൈവിൽ നിന്ന് സ്‌ക്രിപ്റ്റുകൾ ബന്ധിപ്പിക്കാൻ ശ്രമിക്കുക. രണ്ട് സാഹചര്യങ്ങളിലും നിങ്ങൾക്ക് “ഹലോ വേൾഡ്! "അർത്ഥം നിങ്ങൾ എല്ലാം ശരിയായി ചെയ്തു എന്നാണ്.

പേജിന്റെ ശരിയായ പ്രവർത്തനത്തിനുള്ള മറ്റൊരു പ്രധാന ഘടകമാണ് സ്ക്രിപ്റ്റുകൾ. HTML അതിന്റെ ഘടന രൂപപ്പെടുത്തുന്നതിന് ഉത്തരവാദിയാണെങ്കിൽ, ശൈലികൾ അതിന്റെ രൂപത്തിന് ഉത്തരവാദിയാണെങ്കിൽ, പ്രമാണത്തിന്റെ പെരുമാറ്റത്തിന് സ്ക്രിപ്റ്റുകൾ ഉത്തരവാദികളാണ്. പേജുകളിൽ എല്ലാത്തരം ചലിക്കുന്ന ഘടകങ്ങളും സൃഷ്ടിക്കാൻ അവ നിങ്ങളെ അനുവദിക്കുന്നു. ഏറ്റവും ശ്രദ്ധേയമായ ഉദാഹരണം ആനിമേഷൻ ആയിരിക്കും. എന്നാൽ മറ്റ് നിരവധി ഇഫക്റ്റുകൾ ഉണ്ട്. സ്ക്രിപ്റ്റുകൾ സൃഷ്ടിക്കാൻ ജാവാസ്ക്രിപ്റ്റ് പോലുള്ള ഒരു ഭാഷ ഉപയോഗിക്കുന്നു.

ഒരു പേജിലേക്ക് സ്ക്രിപ്റ്റുകൾ ബന്ധിപ്പിക്കുന്ന പ്രക്രിയ, ശൈലികൾ ചേർക്കുന്നതിന് തുല്യമാണ്. അതായത്, രണ്ട് ഓപ്ഷനുകൾ ഉണ്ട്. പേജിനുള്ളിൽ തന്നെ സ്ക്രിപ്റ്റ് കോഡ് എഴുതുക എന്നതാണ് ആദ്യത്തേത്. രണ്ടാമത്തേത് ബാഹ്യ ഫയലുകൾ ഉപയോഗിച്ച് അവയെ ബന്ധിപ്പിക്കുന്നത് ഉൾപ്പെടുന്നു.

ഇൻലൈൻ സ്ക്രിപ്റ്റുകൾ

ഒരു പേജിനുള്ളിൽ ഒരു സ്ക്രിപ്റ്റ് എഴുതാൻ, നിങ്ങൾ ടാഗ് ഉപയോഗിക്കണം. ഒരു ഉദാഹരണം ഇതാ:

ജാവാസ്ക്രിപ്റ്റ് കോഡ്

വലിയതോതിൽ, HTML ഡോക്യുമെന്റിൽ ടാഗ് എവിടെ ഉപയോഗിക്കുമെന്നത് പ്രശ്നമല്ല. എന്നിരുന്നാലും, പ്രമാണം അടയ്‌ക്കുന്ന ടാഗിന് തൊട്ടുമുമ്പ് പേജ് കോഡിന്റെ അവസാനം ഇത് സ്ഥാപിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു.

കാലക്രമേണ, JavaScript ഭാഷയുടെ ചില സവിശേഷതകൾ CSS-ലേക്ക് കൈമാറ്റം ചെയ്യപ്പെടുന്നു എന്നത് ശ്രദ്ധിക്കേണ്ടതാണ്. പ്രോപ്പർട്ടി മൂല്യങ്ങളിൽ സുഗമമായ മാറ്റം വ്യക്തമാക്കുന്നതിനുള്ള സാധ്യത ഒരു ഉദാഹരണമാണ്.

ബാഹ്യ സ്ക്രിപ്റ്റുകൾ

ചട്ടം പോലെ, ബാഹ്യ സ്ക്രിപ്റ്റുകൾ ബന്ധിപ്പിക്കുന്നതിന് .js വിപുലീകരണമുള്ള ഫയലുകൾ ഉപയോഗിക്കുന്നു. ഫയലിലേക്കുള്ള പാത തന്നെ വ്യക്തമാക്കുന്ന src ആട്രിബ്യൂട്ടിനൊപ്പം ഒരു ടാഗ് ഉപയോഗിച്ചാണ് ഈ പ്രവർത്തനം നടത്തുന്നത്. ഉദാഹരണത്തിന്:

ടാഗ് ജോടിയാക്കിയത് ശ്രദ്ധിക്കുക. അതിനാൽ, ഈ സാഹചര്യത്തിൽ, ബാഹ്യ സ്ക്രിപ്റ്റുകളുടെ കാര്യം വരുമ്പോൾ, ടാഗിനുള്ളിൽ ഒന്നും എഴുതേണ്ടതില്ല.

പ്രമാണം അടയ്‌ക്കുന്ന ടാഗിന് മുമ്പ് ഒരു ഫയലിൽ നിന്ന് സ്‌ക്രിപ്റ്റുകൾ കണക്‌റ്റ് ചെയ്യുന്നതാണ് നല്ലത്.