എഴുതിയത് ജെറമി തോമസ് പരിഭാഷ ഡിജിറ്റൽ മലയാളി സ്റ്റുഡിയോ
JavaScript in 14 minutes-ന്റെ മലയാളപരിഭാഷ. നിങ്ങൾ ഇതിനോടകം Web design in 4 minutes പഠിച്ചിട്ടുണ്ടായിരിക്കുമെന്ന് കരുതുന്നു. ഇനി വെബ്ബിന്റെ പ്രധാന പ്രോഗ്രാമിങ് ഭാഷയായ ജാവാസ്ക്രിപ്റ്റിലേക്ക് കടക്കാനുള്ള സമയമാണ്.
ഇവയാണ് നിങ്ങൾ ഉപയോഗിക്കുന്നതെന്ന് ഞാൻ കരുതുന്നു:
ഈ വിവരങ്ങൾ ശരിയാണെങ്കിൽ, നമുക്ക് ആരംഭിക്കാം.
ജാവാസ്ക്രിപ്റ്റ് ഈ വെബ്പേജിൽ നേരിട്ട് ടൈപ്പ് ചെയ്യാൻ സഹായിക്കുന്ന ഡെവലപ്പർ കൺസോൾ നിങ്ങളുടെ ബ്രൗസറിനുണ്ട്.
നിങ്ങൾ ആപ്പിൾ സഫാരി ഉപയോഗിക്കുന്നതിനാൽ:
സംഗതി പ്രവർത്തിക്കുന്നുണ്ടോന്ന് നോക്കിയാലോ!
താഴെക്കൊടുത്തിരിക്കുന്നത് കൺസോളിൽ എഴുതുകയോ പകർത്തുകയോ ചെയ്ത്, Enter അമർത്തുക. പകർത്തുന്നതിനേക്കാൾ കോഡെഴുതി പരിശീലിക്കുന്നത് ഏറെ ഗുണം ചെയ്യും.
alert('Hello World!')
എല്ലാ ബ്രൗസറിലും സ്വാഭാവികമായി ഉണ്ടാകാറുള്ള alert() എന്ന ജാവാസ്ക്രിപ്റ്റ് ഫംഗ്ഷനാണ്
നിങ്ങളിപ്പോൾ ഉപയോഗിച്ചത്.
എന്നാൽ നിങ്ങൾ എന്താണ് യഥാർത്ഥത്തിൽ ചെയ്തത്?
alert() ഫംഗ്ഷനെ 'Hello World!' എന്ന ആർഗ്യുമെന്റ് ഉപയോഗിച്ച്
വിളിക്കുകയാണ് നിങ്ങൾ ചെയ്തത്. ഒരു പ്രത്യേക ദൗത്യത്തിനായി നിയോഗിക്കപ്പെട്ട ഒരു കൂട്ടം കോഡുകളെയാണ്
ഫംഗ്ഷൻ എന്ന് പറയുന്നത്.
അടിസ്ഥാനപരമായി നിങ്ങൾ 4 കാര്യങ്ങൾ ചെയ്തു:
alert('Hello World!')alert('Hello World!')alert('Hello World!')alert('Hello World!')ഒരു ഫംഗ്ഷനിലേക്ക് നൽകപ്പെടുന്ന മൂല്യമാണ് ആർഗ്യുമെന്റ്. ചിലപ്പോൾ, ആർഗ്യുമെന്റ് ഒന്നുപോലുമുണ്ടാവില്ല. മറ്റു ചിലപ്പോൾ, ഒന്നിലധികം ആർഗ്യുമെന്റുകളുണ്ടാവും. ഭൂരിഭാഗവും ആവശ്യമായിരിക്കും, ചിലത് ഐച്ഛികമായിരിക്കും.
ഈ കേസിൽ, alert()-ന് ഒരു ആർഗ്യുമെന്റ് മാത്രമേ ആവശ്യമൊള്ളൂ.
എന്നാലത്, എന്ത് തരം ആർഗ്യുമെന്റാണ്?
വാക്യങ്ങൾ കൈകാര്യം ചെയ്യുമ്പോൾ, നിങ്ങൾ സ്ട്രിങുകൾ, അഥവാ അക്ഷരചിഹ്നങ്ങളുടെ
(ക്യാരക്റ്ററുകൾ) ഒരു കൂട്ടത്തെ ഉപയോഗിക്കുന്നു. നമ്മുടെ കേസിൽ, 12 ക്യാരക്റ്ററുകൾ ഉപയോഗിച്ചു:
Hello World! ഇതിൽ ലോവർകേസ്, അപ്പർകേസ്, സ്പേസ്, ആശ്ചര്യചിഹ്നമുൾപ്പടെ എല്ലാം ഉൾക്കൊള്ളുന്നു.
ഒരു സ്ട്രിങ് ആരംഭിക്കുന്നതും അവസാനിക്കുന്നതും സൂചിപ്പിക്കാനായി, അതിനെ ഉദ്ധരണികളുടെ
(ഒന്നുകിൽ ഏകോദ്ധരണി (സിംഗിൾ ക്വോട്ട്) ' അല്ലെങ്കിൽ ദ്വയോദ്ധരണി (ഡബിൾ ക്വോട്ട്)")
ഉള്ളിലാക്കേണ്ടതുണ്ട്.
'Hello World!' സ്ട്രിങ് നിർവചിച്ചപ്പോൾ:
എന്നാൽ, നിങ്ങൾക്ക് സംഖ്യകളെയാണ് കൈകാര്യം ചെയ്യേണ്ടതെങ്കിലോ?
മറ്റേതൊരു പ്രോഗ്രാമിങ് ഭാഷയേയും പോലെ ജാവാസ്ക്രിപ്റ്റിനും സംഖ്യകൾ കൈകാര്യം ചെയ്യാൻ സാധിക്കും.
ഈ സംഖ്യകൾ വലുതോ ചെറുതോ, ദശാംശങ്ങളുള്ളതോ ഇല്ലാത്തതോ ഗണിതക്രിയകൾ വഴി കൂടിച്ചേർന്നതോ ആവാം…
താഴെയുള്ള കോഡ് നിങ്ങളുടെ കൺസോളിലേക്ക് പകർത്തുകയോ എഴുതുകയോ ചെയ്യുക:
alert(9+5 * 3)
കുറച്ച് കാര്യങ്ങൾ ശ്രദ്ധിക്കൂ:
+, * എന്നീ ഓപ്പറേറ്റേഴ്സ് അഥവാ സംകാരകങ്ങൾ ഉപയോഗിക്കുന്നു
5 * 3 ഗുണിക്കുന്നു, ശേഷം 9 + 15* ചിഹ്നത്തിന്റെ ചുറ്റുമുള്ള സ്പേസ് ഫലത്തെ ബാധിക്കുന്നില്ല; നമ്മളെ (മനുഷ്യരെ!)
കോഡ് വായിക്കാൻ സഹായിക്കാൻ വേണ്ടി മാത്രമാണ് അതവിടെയുള്ളത്.ഒരുപാട് സ്ഥലങ്ങളിൽ നിങ്ങൾക്ക് സംഖ്യകൾ കാണാൻ സാധിക്കും.
സംഖ്യകൾ എല്ലായിടത്തുമുണ്ട്! പ്രത്യേകിച്ച് ഒരു ബ്രൗസറിൽ.
ഉദാഹരണത്തിന്, നിങ്ങളുടെ നിലവിലെ ബ്രൗസറിന് ഒരു നിശ്ചിത വീതിയുണ്ട്. അത് ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് മനസ്സിലാക്കാൻ സാധിക്കും.
താഴെയുള്ളത് ടൈപ്പ് ചെയ്യൂ:
alert(window.innerWidth)
ഇതിനർത്ഥം നിങ്ങളുടെ ബ്രൗസർ വിൻഡോയ്ക്ക് 1680 പിക്സൽസ് വീതിയുണ്ടെന്നാണ്.
നിങ്ങൾ ഊഹിച്ചതുപോലെ, window.innerHeight-ഉം, നിലവിലെ സ്ക്രോളിന്റെ സ്ഥാനം നൽകുന്ന
window.scrollY-യുമുണ്ട്.
എന്നാൽ, എന്താണ് window കൊണ്ട് അർത്ഥമാക്കുന്നത്?
window ഒരു ജാവാസ്ക്രിപ്റ്റ് ഒബ്ജെക്റ്റാണ്. പരസ്പരബന്ധമുള്ള വിവരങ്ങളും
പ്രവർത്തനങ്ങളുമടങ്ങിയ ശേഖരങ്ങൾ സൂക്ഷിക്കാനുപയോഗിക്കുന്നവയാണ് ഒബ്ജെക്റ്റുകൾ.
window ഒബ്ജെക്റ്റിന്റെ ഒരു സവിശേഷത അല്ലെങ്കിൽ പ്രോപ്പർട്ടിയാണ്
innerWidth ഒബ്ജെക്റ്റുകളെ പ്രോപ്പർട്ടികളുടെ ഒരു ശേഖരം എന്നും നിർവചിക്കാറുണ്ട്.
ഈ പ്രോപ്പർട്ടി ആക്സസ് ചെയ്യാനായി, window ഒബ്ജെക്റ്റിന്റെ അകത്തുള്ള
innerWidth-ആണ് വേണ്ടതെന്ന് കാണിക്കാൻ, നിങ്ങൾ പൂർണ്ണവിരാമം . ഉപയോഗിച്ചു.
അടിസ്ഥാനപരമായി ജാവാസ്ക്രിപ്റ്റ് ഒബ്ജെക്റ്റ് മറ്റു കാര്യങ്ങളും ഉൾപ്പെടുന്ന ഒരു ടൈപ്പാണ്.
ഉദാഹരണത്തിന്, window-യ്ക്ക് താഴെപ്പറയുന്ന പ്രോപ്പർട്ടികളുമുണ്ട്:
window.origin, ഇതൊരു സ്ട്രിങാണ്window.scrollY, ഇതൊരു സംഖ്യയാണ്window.location, ഇതൊരു ഒബ്ജെക്റ്റാണ്window എന്ന ഒബ്ജെക്റ്റിൽ location എന്ന മറ്റൊരു ഒബ്ജെക്റ്റുണ്ടെങ്കിൽ, അത്
അർത്ഥമാക്കുന്നത് ജാവാസ്ക്രിപ്റ്റ് ഒബ്ജെക്റ്റുകൾ ഇതിനെ പിന്തുണയ്ക്കുന്നുവെന്നാണ്…
ഒരു ഒബ്ജെക്റ്റിന്റെ പ്രോപ്പർട്ടി മറ്റൊരു ഒബ്ജെക്റ്റാകാം (ഇതെന്തോന്ന്, നോളന്റെ പടമോ!).
window.location-നും ഒരു ഒബ്ജെക്റ്റായതിനാൽ, അതിനും സ്വന്തമായി പ്രോപ്പർട്ടികളുണ്ട്. അവയിലേക്ക്
പ്രവേശനം ലഭിക്കാൻ, മറ്റൊരു പൂർണ്ണവിരാമവും . പ്രോപ്പർട്ടിയുടെ പേരും ചേർക്കുകയേ വേണ്ടൂ.
ഉദാഹരണത്തിന്, href എന്നൊരു പ്രോപ്പർട്ടിയുണ്ട്:
alert(window.location.href)
ഈ വെബ്പേജിന്റെ മുഴുവൻ URL-ഉം നിങ്ങൾക്കിപ്പോൾ കാണാൻ പറ്റിയിട്ടുണ്ടാവും. ഇതിനുകാരണം:
window ഒരു ഒബ്ജെക്റ്റാണ്location ഒരു ഒബ്ജെക്റ്റാണ്href ഒരു സ്ട്രിങാണ്
എത്ര ആഴത്തിൽ ഒബ്ജെക്റ്റുകളെ നെസ്റ്റ് ചെയ്യാമെന്നതിന് പരിധിയില്ല.
ഒരു ഒബ്ജെക്റ്റിനെത്ര പ്രോപ്പർട്ടികളാകാമെന്നതിനും പരിധിയില്ല.
നമ്മൾ കണ്ടതുപോലെ, ഒരു ഒബ്ജെക്റ്റിന് ഏതുതരം ടൈപ്പുമാവാം: സ്ട്രിങുകൾ, സംഖ്യകൾ, ഒബ്ജെക്റ്റുകൾ, എന്തിന് ഫംഗ്ഷനുകൾ പോലുമാവാം. ഒടുവിൽ പറഞ്ഞതാണെങ്കിൽ അതിനെ വിളിക്കുന്നത്…
ഒരു ഒബ്ജെക്റ്റിന്റെ പ്രോപ്പർട്ടി ഒരു ഫംഗ്ഷനാകുമ്പോൾ, അതിനെ മെത്തേഡ് എന്നാണ് പറയുക.
യഥാർത്ഥത്തിൽ, നമ്മൾ ഇത്രയും നേരം ഉപയോഗിച്ചുവന്നിരുന്ന alert() ഫംഗ്ഷൻ window
ഒബ്ജെക്റ്റിന്റെ ഒരു മെത്തേഡാണ്!
window.alert('OMG')
ബ്രൗസറിലെ ഏറ്റവും മുകൾത്തട്ടിലുള്ള ഒബ്ജെക്റ്റ് window ആയതിനാൽ അതിന്റെ എല്ലാ പ്രോപ്പർട്ടികളെയും
മെത്തേഡുകളെയും നിങ്ങൾക്ക് നേരിട്ട് ആക്സസ് ചെയ്യാൻ സാധിക്കും.
അതിനാലാണ് location.href എന്ന് ടൈപ്പ് ചെയ്യുന്നതും window.location.href എന്ന് ടൈപ്പ്
ചെയ്യുന്നതും ഒരുപോലെയാകുന്നത്.
അല്ലെങ്കിൽ alert() എന്നത് window.alert()-നോട് തുല്യമാകുന്നത്.
വിവിധ പ്രോപ്പർട്ടികൾ ഒരേ പേരിലും പരിധിയിലും ഒരുമിച്ചുകൂട്ടുന്നതിനും ഡേറ്റയിൽ ശ്രേണി അഥവാ ഹയറാർക്കി നിർവചിക്കുന്നതിനും ഒബ്ജെക്റ്റുകൾ ഉപകാരപ്രദമാണ്. ഒരോ ശാഖയ്ക്കും മറ്റു ഉപശാഖകളുള്ള ഒരു മരം പോലെയാണത്.
എന്നാൽ, നിങ്ങൾക്ക് കാര്യങ്ങളുടെ ഒരു പട്ടിക മാത്രമാണ് വേണ്ടതെങ്കിലോ…
ക്രമത്തിലുള്ള ഒരു പട്ടികയിലെന്നപോലെ ഒന്നിലധികം മൂല്യങ്ങളുള്ള ഒരു ടൈപ്പിനെയാണ് ജാവാസ്ക്രിപ്റ്റ് അറേ എന്ന് പറയുന്നത്.
3 സ്ട്രിങുകളുള്ള ഒരു അറേ alert() ഫംഗ്ഷനിലേക്ക് നമുക്ക് കൊടുത്തുനോക്കാം:
alert(['What', 'is', 'up'])
alert ഫംഗ്ഷൻ വിളിക്കുന്നതിനുള്ള ഘടന അഥവാ സിന്റാക്സ് നിങ്ങൾക്ക് ഇതിനോടകം അറിയാം:
alert(argument).
ഈ കേസിൽ, നിങ്ങൾ നൽകിയ ആർഗ്യുമെന്റ്, ഇപ്രകാരം നിർവചിച്ചിരിക്കുന്ന 3 മൂല്യങ്ങളുള്ള ഒരു അറേയാണ്:
['What', 'is', 'up']['What', 'is', 'up']['What', 'is', 'up']['What', 'is', 'up']
['What', 'is', 'up']ഒരു അറേയ്ക്ക് എന്ത് തരം മൂല്യങ്ങളും ഉൾക്കൊള്ളാനാകും: സ്ട്രിങുകൾ, സംഖ്യകൾ, ഒബ്ജെക്റ്റുകൾ, മറ്റു അറേകൾ, അങ്ങനെ പലതും…
ഈ കോഡ് പരീക്ഷിച്ചുനോക്കൂ:
alert([2 + 5, 'unniyappam', true])
ആദ്യത്തെ മൂല്യം 2 + 5 ഒരു സംഖ്യയും, രണ്ടാമത്തെ 'unniyappam' ഒരു സ്ട്രിങുമാണ്.
അങ്ങനെയാണെങ്കിൽ മൂന്നാമത്തെ ആർഗ്യുമെന്റിന്റെ കാര്യമോ? അതൊരു സ്ട്രിങല്ല, കാരണമത് ഉദ്ധരണികളുടെയുള്ളിലല്ല. അതൊരു സംഖ്യയുമല്ല.
അപ്പൊൾ പിന്നെ എന്താണത്?
സ്ട്രിങുകൾക്കും സംഖ്യകൾക്കും അനന്തമായ മൂല്യങ്ങൾ സാധ്യമാകുമ്പോൾ ഒരു ബൂളിയന് ഒന്നുകിൽ
true അല്ലെങ്കിൽ false എന്നീ മൂല്യങ്ങൾ മാത്രമേ സാധ്യമാകൂ.
alert() ഫംഗ്ഷനും 3 മൂല്യങ്ങളടങ്ങിയ അറേയും ഒരൊറ്റ വരിയിലാക്കിയാൽ, നമ്മുടെ കോഡ് സുഗമമായി
വായിക്കുന്നതിന് തടസ്സമാകും.
അറേയെ അതിന്റേതായ ഒരു വരിയിലേക്ക് മാറ്റി അവയെ വിഭജിക്കാൻ സാധിക്കുമെങ്കിലോ?
നമുക്ക് അറേയെ ഒരു വേരിയബളിന്റെ ഉള്ളിലേക്ക് മാറ്റാൻ സാധിക്കും.
ഒരു പ്രത്യേക മൂല്യം സൂക്ഷിക്കുന്ന കണ്ടെയ്നറാണ് വേരിയബിൾ. അതിനൊരു പേരും (നിങ്ങൾക്കതിനെ തിരിച്ചറിയാനും പുനരുപയോഗം നടത്താനും സാധിക്കുന്ന വിധത്തിൽ), ഒരു മൂല്യവുമുണ്ട് (നിങ്ങൾക്ക് പിന്നീട് പുതുക്കാൻ സാധിക്കുന്ന വിധത്തിൽ).
var my_things = [2 + 5, 'unniyappam', true];
my_things എന്നതാണ് വേരിയബളിന്റെ പേര്
[2 + 5, 'unniyappam', true] എന്നിവയാണ് വേരിയബളിന്റെ മൂല്യം
വിശദമായി താഴെക്കൊടുത്തിരിക്കുന്നു:
var എന്ന കീവേഡ് ടൈപ്പ് ചെയ്തുvar my_things = [2 + 5, 'unniyappam', true];var my_things = [2 + 5, 'unniyappam', true];= എന്ന ഓപ്പറേറ്റർ ഉപയോഗിച്ചു
var my_things = [2 + 5, 'unniyappam', true];var my_things = [2 + 5, 'unniyappam', true];
var my_things = [2 + 5, 'unniyappam', true];
ഇത് അർത്ഥമാക്കുന്നത് my_things, [2 + 5, 'unniyappam', true]-ന് സമമാണെന്നാണ്.
ഇനി നമുക്ക് alert ഫംഗ്ഷൻ പുനഃസ്ഥാപിക്കാൻ സാധിക്കും:
ഇപ്പോൾ നമുക്ക് രണ്ട് സ്റ്റേറ്റ്മെന്റുകളുള്ളതിനാൽ, ഒരെണ്ണം എവിടെ അവസാനിക്കുന്നു മറ്റേത് എവിടെ തുടങ്ങുന്നു
എന്ന് മനസ്സിലാക്കാൻ അർദ്ധവിരാമം ; ഉപയോഗിക്കാം.
var my_things = [2 + 5, 'unniyappam', true];
alert(my_things);
വേരിയബിളിൽ നമ്മുടെ അറേ സൂക്ഷിച്ചുകൊണ്ട്, നമ്മുടെ കോഡ് വായിക്കാവുന്ന വിധത്തിലാക്കി.
ഈ my_things വേരിയബളിൽ ഒരുപാട് സാധനങ്ങളുടെ പട്ടികയുണ്ടെങ്കിലും, ചിലപ്പോൾ അതിലെ ഒരു
വസ്തു അഥവാ ഐറ്റം മാത്രമേ നമുക്ക് കൈകാര്യം ചെയ്യേണ്ടതായി വരികയുള്ളൂ.
അറേയിലെ ഒരു പ്രത്യേക വസ്തു ആക്സസ് ചെയ്യാൻ, നിങ്ങളാദ്യം അറേയിൽ അതിന്റെ ഇൻഡെക്സ് (അഥവാ സ്ഥാനം) എവിടെയാണെന്ന് അറിഞ്ഞിരിക്കണം. ശേഷം, ഈ ഇൻഡെക്സിനെ സ്ക്വയർ ബ്രാക്കറ്റുകളുടെ ഉള്ളിലാക്കണം.
ഏതായിരിക്കും പ്രദർശിപ്പിക്കപ്പെടുക എന്നത് നിങ്ങൾക്ക് ഊഹിക്കാൻ സാധിക്കുമോ?
var my_things = [2 + 5, 'unniyappam', true];
alert(my_things[1]);
രണ്ടാമത്തെ വസ്തുവാണ് ലഭിച്ചത്! പ്രോഗ്രാമിങിൽ, ഇൻഡെക്സുകൾ പൂജ്യത്തിലാണ് 0
തുടങ്ങുന്നത്.
my_things[1]my_things[1]my_things[1]my_things[1]വേരിയബിളുകളും ഒബ്ജെക്റ്റുകളാണത്രേ! അതിനർത്ഥം വേരിയബിളുകൾക്കും പ്രോപ്പർട്ടികളും മെത്തേഡുകളും ഉണ്ടെന്നാണ്.
ഉദാഹരണത്തിന്, my_things-ന് length എന്ന പ്രോപ്പർട്ടിയുണ്ട്:
var my_things = [2 + 5, 'unniyappam', true];
alert(my_things.length);
ഈ അറേയിൽ 3 വസ്തുക്കളുണ്ട്. my_things-ലെ വസ്തുക്കളുടെ എണ്ണം കൂട്ടുകയോ കുറയ്ക്കുകയോ
ചെയ്താൽ, length മൂല്യം അതിനനുസരിച്ച് മാറുന്നത് നമുക്ക് കാണാൻ സാധിക്കും. ലെങ്ത് എന്നാൽ ഇവിടെ 'നീളം'
എന്നർത്ഥത്തിലല്ല മറിച്ച് എണ്ണമാണ് ഉദ്ദേശിക്കുന്നതെന്ന് നിങ്ങൾക്ക് മനസ്സിലായിട്ടുണ്ടാകുമെന്ന് കരുതുന്നു.
വായിക്കാനുള്ള സുഖവും പ്രോപ്പർട്ടികളും ഉപകാരപ്രദമാണെങ്കിലും, ഒരു വേരിയബിളിന്റെ പ്രധാന സവിശേഷത അത് തിരുത്താൻ സാധിക്കുമെന്നതാണ്: നിങ്ങൾക്കതിന്റെ മൂല്യം പിന്നീട് മാറ്റാം!
var my_things = [2 + 5, 'unniyappam', true];
alert(my_things);
my_things = [2 + 5, 'unniyappam', true, 'LOVE'];
alert(my_things);
രണ്ട് അലേർട്ട് ബോക്സുകൾ വന്നിട്ടുണ്ടാവും. പക്ഷേ, അവയ്ക്ക് വ്യത്യസ്ത മൂല്യങ്ങളായിരുന്നു! കാരണം, ആദ്യത്തേതിന്റെയും
രണ്ടാമത്തേതിന്റെയും ഇടയിൽ my_things-ന്റെ മൂല്യം മാറി: നാലാമതായി ഒരു വസ്തു,
'LOVE' എന്ന സ്ട്രിങ്, ചേർക്കപ്പെട്ടു.
രണ്ടാമത് നമ്മൾ my_things-ന് ഒരു മൂല്യം കൊടുത്തപ്പോൾ, var എന്ന കീവേഡ്
ഉപയോഗിച്ചില്ല: കാരണം, നമ്മൾ രണ്ട് വരികൾക്ക് മുമ്പ് നിർവചിച്ചിരുന്ന my_things-നെ
തിരുത്തുകയാണ്.
ഒരു പുതിയ വേരിയബിൾ ഉണ്ടാക്കുമ്പോൾ മാത്രമാണ് നിങ്ങൾ var എന്ന് കീവേഡ്
ഉപയോഗിക്കുന്നത്, അത് തിരുത്തുമ്പോഴല്ല.
വേരിയബിളുകൾക്കും (അവയും ഒബ്ജെക്റ്റുകളായതിനാൽ) മെത്തേഡുകൾ ഉണ്ടെന്ന് ഞാൻ പറഞ്ഞത് നിങ്ങൾ
ഓർക്കുന്നുണ്ടോ? ഒരു അറേയുടെ മൂല്യം തിരുത്താനുള്ള മറ്റൊരു വഴി push() മെത്തേഡ് ഉപയോഗിക്കുക എന്നതാണ്:
var my_things = [2 + 5, 'unniyappam', true];
alert(my_things);
my_things.push('The Button');
alert(my_things);
my_things അറേയ്ക്ക് ഒടുവിൽ 4 വസ്തുക്കളുണ്ട്.
push() മെത്തേഡ് അറേയെ മാറ്റിയപ്പോൾ, മറ്റുള്ളവ കേവലമൊരു മൂല്യം മാത്രം തിരിച്ചുനൽകി:
var my_things = [2 + 5, 'unniyappam', true];
alert(my_things.includes('puttu'));
അറേയിൽ 'puttu' എന്ന സ്ട്രിങ് ഉണ്ടോയെന്ന് includes() മെത്തേഡ് പരിശോധിച്ചു.
അതില്ലാത്തതിനാൽ, false എന്ന ബൂളിയൻ തിരിച്ചുനൽകി.
ഒരു വസ്തുതയെന്തെന്നാൽ, ബൂളിയനുകളെ കൈകാര്യം ചെയ്യുമ്പോൾ, true അല്ലെങ്കിൽ false എന്നീ
കീവേഡുകൾ ഉപയോഗിക്കുന്നത് വളരെ അപൂർവ്വമാണ്. സാധാരണയായി, ബൂളിയനുകൾ നിലനിൽക്കുന്നത് (includes()
പോലെയുള്ള) ഫംഗ്ഷൻ കോളിന്റെ ഫലമായോ അല്ലെങ്കിൽ താരതമ്യമായോ ആണ്.
ഒരു "വലുതാണോ അല്ലയോ" താരതമ്യം:
alert(window.innerWidth > 400)
ഇതിനർത്ഥം നിങ്ങളുടെ ബ്രൗസർ വിൻഡോയ്ക്ക് 400 പിക്സലിന് മുകളിൽ വീതി ഇല്ല എന്നാണ്.
window.innerWidth > 400
window.innerWidth > 400window.innerWidth > 400
മുമ്പുണ്ടായിരുന്ന +, * എന്നിവയെ പോലെ, >-ഉം ഒരു ജാവാസ്ക്രിപ്റ്റ്
ഓപ്പറേറ്ററാണ്.
"വലുതാണോ അല്ലയോ" ഓപ്പറേറ്ററുമായി >, അത്തരമൊരു താരതമ്യം നടത്തുമ്പോൾ നിങ്ങൾക്കൊരു
ബൂളിയൻ മൂല്യം ലഭിക്കുന്നു.
താരതമ്യത്തിന് 2 ഫലങ്ങൾ മാത്രമുള്ളതിനാൽ (true അല്ലെങ്കിൽ
false), നിങ്ങളുടെ കോഡിന് ഒരു തീരുമാനമെടുക്കേണ്ടി വരുന്ന ഘട്ടങ്ങളിൽ അത്
ഉപകാരപ്രദമായിരിക്കും…
പ്രോഗ്രാമിങിലെ ഏറ്റവും പ്രധാനപ്പെട്ട കൊൺസെപ്റ്റുകളിലൊന്നാണ് കണ്ടീഷണൽ സ്റ്റേറ്റ്മെന്റുകൾ. പ്രത്യേക നിബന്ധനകളുണ്ടെങ്കിൽ മാത്രം നിങ്ങളുടെ കോഡിനെ ചില കാര്യങ്ങൾ ചെയ്യാൻ അനുവദിക്കുക എന്നതാണ് അവ ചെയ്യുന്നത്. ഈ നിബന്ധനകൾ, താഴെ നൽകിയിരിക്കുന്ന ഉദാഹരണങ്ങൾ പോലുള്ളവയെ ആശ്രയിച്ചിരിക്കും:
ഒരു ഉദാഹരണമെന്ന നിലയിൽ, നിങ്ങൾ ഡിജിറ്റൽ മലയാളിയുടെ ഡൊമെയ്നിലാണെങ്കിൽ മാത്രം ഒരു അലേർട്ട് ബോക്സ് വരുന്നത് ഒന്നു ചെയ്തുനോക്കാം!
if (window.location.hostname == 'javascript-in-14-minutes-malayalam.digitalmalayali.in') {
alert('Welcome to my Mana! 🤗')
}
നമ്മളിവിടെ മറ്റൊരു താരതമ്യം നടത്തുകയാണ്. പക്ഷേ, "സമചിഹ്നമാണ്" == പകരമായി ഉപയോഗിക്കുന്നത്.
if കീവേഡ് ടൈപ്പ് ചെയ്തുif (window.location.hostname == 'javascript-in-14-minutes-malayalam.digitalmalayali.in') {
if (window.location.hostname == 'javascript-in-14-minutes-malayalam.digitalmalayali.in') {
if (window.location.hostname == 'javascript-in-14-minutes-malayalam.digitalmalayali.in') {
if (window.location.hostname == 'javascript-in-14-minutes-malayalam.digitalmalayali.in') {
if (window.location.hostname == 'javascript-in-14-minutes-malayalam.digitalmalayali.in') {
alert('Welcome to my Mana! 🤗')
}
അലേർട്ട് ബോക്സ് നിശ്ചയമായും വന്നതിനാൽ, അതിനർത്ഥം ഹോസ്റ്റ്നെയിം
'javascript-in-14-minutes-malayalam.digitalmalayali.in'-ന് സമമായിരുന്നുവെന്നാണ്!
താരതമ്യം true ആയിരിക്കുമ്പോഴുള്ള കേസാണ് നമ്മൾ കൈകാര്യം ചെയ്തത്.
മറിച്ചാണെങ്കിൽ, അതായത് ഹോസ്റ്റ്നെയിം 'javascript-in-14-minutes-malayalam.digitalmalayali.in' അല്ലാത്തപ്പോൾ, നമുക്ക്
"സമമല്ലാത്തപ്പോൾ" ഓപ്പറേറ്റർ != ഉപയോഗിക്കാം:
if (window.location.hostname != 'javascript-in-14-minutes-malayalam.digitalmalayali.in') {
alert('Come back, my son! 😉')
}
ഈ കോഡ് പരീക്ഷിക്കുമ്പോൾ, ഒന്നും സംഭവിക്കുന്നില്ലെന്ന് നിങ്ങൾക്ക് കാണാനാകും! (ഈ ട്യൂട്ടോറിയൽ മറ്റൊരു ഡൊമെയ്നിലേക്ക് പകർത്താത്ത പക്ഷം 😆).
ഒരേസമയം രണ്ട് കേസുകളും കൈകാര്യം ചെയ്യണമെങ്കിലോ? രണ്ട് if സ്റ്റേറ്റ്മെന്റുകൾ
ഒന്നിച്ച് എഴുതാൻ സാധിക്കും. ഒരു സ്റ്റേറ്റ്മെന്റ് മറ്റേതിന്റെ നേർ വിപരീതമായതിനാൽ, നമുക്ക് അവയെ ഒരു
else സ്റ്റേറ്റ്മെന്റ് ഉപയോഗിച്ച് ഒന്നിപ്പിക്കാൻ സാധിക്കും:
if (window.location.hostname == 'javascript-in-14-minutes-malayalam.digitalmalayali.in') {
alert('Welcome to my Mana! 🤗')
} else {
alert('Come back, my son! 😉')
}
ഈ കണ്ടീഷണൽ സെറ്റപ്പുകൊണ്ട്, നമുക്ക് ഒരു കാര്യം ഉറപ്പിക്കാം:
അവശേഷിക്കുന്ന കേസുകളെ കൈകാര്യം ചെയ്യാൻ else ഉപയോഗപ്രദമാണെങ്കിലും, ചിലപ്പോൾ നമുക്ക്
രണ്ടിലധികം കേസുകളെ കൈകാര്യം ചെയ്യേണ്ടതായി വരും.
else if ഉപയോഗിച്ചുകൊണ്ട് നിങ്ങൾക്ക് ഇടയിൽ (ഇന്റർമീഡിയേറ്റ്) സ്റ്റേറ്റ്മെന്റുകൾ
ചേർക്കാനും ഒന്നിലധികം കേസുകൾ കൈകാര്യം ചെയ്യാനും സാധിക്കും:
if (window.innerWidth > 2000) {
alert('Big screen! 🔥')
} else if (window.innerWidth < 600) {
alert('Probably a mobile phone 📱')
} else {
alert('Decent size 👍')
}
ഒരു താരതമ്യം true എന്ന് മറുപടി നൽകുന്ന നിമിഷം, അത് പ്രവർത്തനസജ്ജമാകും, ശേഷിക്കുന്ന എല്ലാ
സ്റ്റേറ്റ്മെന്റുകളും അവഗണിക്കപ്പെടും. അതിനാലാണ് ഒരു അലേർട്ട് ബോക്സ് മാത്രം ലഭിച്ചത്!
കണ്ടീഷണൽ സ്റ്റേറ്റ്മെന്റുകൾ if, else എന്നീ കീവേഡുകളെയും തുടർന്ന് ഒരു
സെറ്റ് ബ്രാക്കറ്റുകളെയും ഉപയോഗപ്പെടുത്തുന്നു.
കീവേഡുകളുടെയും ബ്രാക്കറ്റുകളുടെയും ഈയൊരു രീതിയിലുള്ള കോമ്പിനേഷൻ മറ്റൊരു പ്രധാന പ്രോഗ്രാമിങ് കൊൺസെപ്റ്റിലുമുണ്ട്…
കുറച്ച് കോഡ് ഒരു നിശ്ചിത സമയത്തേക്ക്, പ്രവർത്തിപ്പിക്കണമെങ്കിൽ ജാവാസ്ക്രിപ്റ്റ് ലൂപ് ഉപയോഗിക്കാം.
എത്ര അലേർട്ട് ബോക്സുകൾ ഈ സ്നിപ്പറ്റ് മൂലമുണ്ടാകുമെന്ന് നിങ്ങൾക്ക് ഊഹിക്കാനാകുമോ?
for (var i = 0; i < 3; i++) {
alert(i);
}
കൃത്യമായി 3 അലേർട്ട് ബോക്സുകളുണ്ടായിരുന്നു! എന്താണ് സംഭവിച്ചതെന്ന് ഇഴകീറി പരിശോധിക്കാം:
var i = 0 എന്നതായിരുന്നു ആദ്യത്തെ നിലi-ക്ക് പൂജ്യം 0 എന്ന മൂല്യം നൽകി.
i < 3 എന്നതാണ് കണ്ടീഷണൽ സ്റ്റേറ്റ്മെന്റ്true ആണെങ്കിൽ, കൂട്ടത്തിലുള്ള കോഡ് നമ്മൾ പ്രവർത്തിപ്പിക്കുന്നു.false ആണെങ്കിൽ, ലൂപ്പിൽ നിന്നും നമ്മൾ പുറത്തുകടക്കുന്നു.i++ എന്നതാണ് ഇൻക്രിമെന്റ് എക്സ്പ്രെഷൻi-യുടെ മൂല്യം 1 വെച്ച് വർദ്ധിക്കുന്നു.
ഇപ്രകാരമാണ് നിങ്ങളത് നിർവ്വഹിച്ചത്:
for എന്ന കീവേഡ് നിങ്ങൾ ടൈപ്പ് ചെയ്തുfor (var i = 0; i < 3; i++) {
for (var i = 0; i < 3; i++) {
for (var i = 0; i < 3; i++) {
for (var i = 0; i < 3; i++) {
for (var i = 0; i < 3; i++) {
for (var i = 0; i < 3; i++) {
for (var i = 0; i < 3; i++) {
for (var i = 0; i < 3; i++) {
for (var i = 0; i < 3; i++) {
alert(i);
}ലൂപ്പിന്റെ ഒരോ ആവർത്തനവും നമുക്ക് വിശകലനം ചെയ്യാം:
| ആവർത്തനം | i-യുടെ മൂല്യം |
പരിശോധന | അലേർട്ടിന് കാരണമായോ? |
|---|---|---|---|
| 1 | 0 | 0 < 3 |
ആയി |
| 2 | 1 | 1 < 3 |
ആയി |
| 3 | 2 | 2 < 3 |
ആയി |
| 4 | 3 | 3 < 3 |
ഇല്ല! |
ഒരു പ്രവർത്തനം ഇത്ര തവണ ആവർത്തിക്കാൻ ഈ ലൂപ്പ് നമുക്ക് അനുവാദം നൽകി. അതാണ് കമ്പ്യൂട്ടറുകളുടെ കാര്യം!
നമ്മൾ ഇതുവരെ കണ്ടു പരിചയിച്ച എല്ലാ തരം വേരിയബിളുകളിലും വെച്ച്, ഒരെണ്ണം പ്രത്യേകമായി ലൂപ്പിങിന് ഉതകുന്നതാണ്…
ലൂപ്പുകൾക്കുള്ള പറ്റിയ കക്ഷികളാണ് അറേകൾ. കാരണം, പ്രോഗ്രാമിങിൽ പലപ്പോഴും നമുക്ക് ഒരേ പ്രവർത്തനം അറേയിലെ ഓരോ വസ്തുവിനായും ആവർത്തിക്കേണ്ടി വരാറുണ്ട്.
ഉദാഹരണത്തിന്, അറേയിലെ ഓരോ വസ്തുവിനും ഒരു അലേർട്ട് ബോക്സ് വീതം നമുക്ക് വരുത്തണമെന്ന് കരുതുക. അറേയിൽ എത്ര
വസ്തുക്കളുണ്ടോ അത്രയും alert() സ്റ്റേറ്റ്മെന്റുകൾ നമുക്ക് എഴുതാമെങ്കിലും (😰), അത് സങ്കീർണ്ണതകളുള്ള
ഫലശൂന്യമായ ഏർപ്പാടാണ്! പിഴവുകൾക്ക് കാരണമാകുക മാത്രമല്ല, അത് വലിയ അറേകളുടെ കാര്യം വരുമ്പോൾ സംഗതി ഒന്നുകൂടി
ദുഷ്കരമാക്കുകയും ചെയ്യും.
നമ്മുടെ ജോലി ലളിതമാക്കി സഹായിക്കാൻ പ്രോഗ്രാമിങ് ഭാഷകളുള്ളതിനാൽ, മെച്ചപ്പെട്ടൊരു മാർഗ്ഗമുണ്ടോന്ന് നമുക്ക് നോക്കാം. ഇതിനോടകം നമുക്ക് കുറച്ച് കാര്യങ്ങളറിയാം:
i എന്ന വേരിയബിളിലേക്കും നമുക്ക് ആക്സസുണ്ട്
ഈ വിവരങ്ങളെല്ലാം ചേർത്തുകൊണ്ട്, നമുക്ക് താഴെക്കാണുന്ന കോഡ് ശകലം രൂപകല്പന ചെയ്യാൻ സാധിക്കും:
var my_things = [2 + 5, 'unniyappam', true];
for (var i = 0; i < my_things.length; i++) {
alert(my_things[i]);
}
ഒന്നൊന്നായി, അറേയിലെ വസ്തുക്കൾ അവയുടെ സ്വന്തം അലേർട്ട് ബോക്സുകളിൽ പ്രത്യക്ഷമായി.
ഒരു അറേയിലെ ഓരോ വസ്തുവിലൂടെയും പോകുന്ന രീതിയെ ലൂപ്പ് ലളിതമാക്കുമെങ്കിലും, യാന്ത്രികമല്ലാതെ ഒരു
for ബ്ലോക്കും ഓരോ ലൂപ്പിന് ശേഷവും വർദ്ധനവെന്ന ഏകദൗത്യമുള്ള i എന്ന പുതിയ വേരിയബിളും നമ്മൾ
നിർമ്മിക്കേണ്ടതുണ്ട്.
നിങ്ങളെന്താണ് ചിന്തിക്കുന്നതെന്ന് എനിക്കറിയാം. "മെച്ചപ്പെട്ടൊരു മാർഗ്ഗമുണ്ടാകും!"
അറേയിലെ ഓരോ വസ്തുവിനും ദൗത്യം നൽകുന്ന forEach() എന്നൊരു മെത്തേഡ്
അറേകൾക്കുണ്ട്:
var my_things = [2 + 5, 'unniyappam', true];
my_things.forEach(function(item) {
alert(item);
});
മെച്ചപ്പെട്ട കുറച്ച് കാര്യങ്ങൾ ശ്രദ്ധിക്കൂ:
i വേരിയബിൾ ഉൾപ്പെട്ടിട്ടില്ല
length എടുക്കേണ്ട ആവശ്യമില്ല
my_thing[i]-ന്റെയൊപ്പം ഇൻഡെക്സ് ഉപയോഗിക്കേണ്ട ആവശ്യമില്ല
alert() ഫംഗ്ഷന്റെ ഘടന ഓർക്കുന്നുണ്ടോ? അത് alert(argument) എന്നാണ്.
ശ്രദ്ധിച്ച് നോക്കിയാൽ, forEach()-ന് അതേ ഘടനയാണ് ഉള്ളതെന്ന് കാണാം! അത് forEach(argument)
എന്നിരിക്കെ, ആർഗ്യുമെന്റ് എന്നത് 3 വരികളിലായി വ്യാപിച്ചിരിക്കുന്ന ഒരു ഫംഗ്ഷനാണ്.
ഇതിനോടകം നമ്മൾ ചില ഫംഗ്ഷനുകളും മെത്തേഡുകളും ഉപയോഗിച്ചു:
alert() ഫംഗ്ഷൻ (അഥവാ window മെത്തേഡ്)
push() അറേ മെത്തേഡ്
includes() അറേ മെത്തേഡ്
forEach() അറേ മെത്തേഡ്
ഒരു ഫംഗ്ഷനെ എങ്ങനെ വിളിക്കണമെന്ന് നമുക്കറിയാം, എന്നാൽ ഒരെണ്ണം എങ്ങനെ നിർമ്മിക്കാം?
നിങ്ങളുടെ ആവശ്യങ്ങൾക്കനുസരിച്ച് സ്വന്തം ഫംഗ്ഷനുകളെ നിർമ്മിക്കുക എന്നത് പ്രോഗ്രാമിങ് ഭാഷകളുടെ ഒരു കരുത്താണ്.
if/else-നും for-നുമായി നമ്മൾ ഉപയോഗിച്ച കീവേഡ്/ബ്രാക്കറ്റിന്റെ കൂട്ട് ഓർക്കുന്നുണ്ടോ?
എന്നാൽ കേട്ടോളൂ: ഇത് ഏറെക്കുറെ അതേ മാതൃകയിലാണ്!
"ഏറെക്കുറെ" എന്ന് ഞാൻ പറയാൻ കാരണം ഒരു ഫംഗ്ഷന് പേര് ആവശ്യമാണ് എന്നതാണ് ഒരേയൊരു വ്യത്യാസം!
നമുക്ക് name എന്ന 1 പാരാമീറ്ററോട് കൂടി greet() എന്ന ഫംഗ്ഷൻ
നിർമ്മിച്ച്, ഉടൻ തന്നെ അതിനെ വിളിക്കാം:
function greet(name) {
var message = 'Hey there ' + name;
alert(message);
}
greet('Kumbidi');
ആദ്യമായി നിങ്ങളൊരു ഫംഗ്ഷൻ നിർമ്മിച്ചിരിക്കുന്നു! ചെറുതാണെങ്കിലും ഒരുപാട് കാര്യങ്ങൾ അത് നിങ്ങളെ പഠിപ്പിക്കും.
കുറച്ച് കാര്യങ്ങൾ ശ്രദ്ധിക്കുക:
greet എന്നാണ്
name എന്നും: മൂല്യം സൂക്ഷിക്കുന്ന കണ്ടെയ്നർ പോലെ
പ്രവർത്തിക്കുന്നതിനാൽ അത് വേരിയബിളിന് സമമാണ്
'Hey there ' + name എന്ന മൂല്യത്തോട് കൂടി message (ഒരു സ്ട്രിങ്) എന്ന് പേരുള്ള
ഒരു വേരിയബിൾ നിർമ്മിക്കുന്നു
+ എന്താണ് ചെയ്യുന്നതെന്ന് വെച്ചാൽ രണ്ട് സ്ട്രിങുകളെ
ബന്ധിപ്പിച്ച് (അഥവാ കൺകാറ്റിനേറ്റ് ചെയ്ത്) നീളമുള്ള ഒരു സ്ട്രിങാക്കുന്നു
alert() ഫംഗ്ഷനെ വിളിച്ച്, message വേരിയബിളിനെ പാരാമീറ്ററായി
ഉപയോഗിക്കുന്നു
'Kumbidi' എന്ന ആർഗ്യുമെന്റ് ഉപയോഗിച്ച് വിളിക്കുന്നു
ഘട്ടം ഘട്ടമായി അതിനെ നമ്മൾ വിഭജിച്ചാൽ:
function എന്ന കീവേഡ് ടൈപ്പ് ചെയ്തുfunction greet(name) {function greet(name) {function greet(name) {name എന്ന പാരാമീറ്റർ നിർമ്മിച്ചുfunction greet(name) {function greet(name) {function greet(name) { var message = 'Hey there ' + name; alert(message);
}greet('Kumbidi');
അവസാനം നമ്മൾ greet() ഫംഗ്ഷനെ വിളിക്കാത്ത പക്ഷം ഒന്നും സംഭവിക്കില്ല! കാരണം, That's because the
alert()-നെ വിളിക്കുന്നത് greet()-ന്റെ പരിധിക്ക് ഉള്ളിൽ നിന്നുകൊണ്ടാണ്. അതിനാൽ,
മാതൃ ഫംഗ്ഷനായ greet()-നെ വിളിക്കാത്ത പക്ഷം അത് പ്രവർത്തിക്കുകയില്ല!
അടിസ്ഥാനപരമായി, greet() നിർമ്മിക്കുന്നത് വഴി, നിങ്ങൾ ബ്രൗസറിനോട് ഇത്രമാത്രമാണ്
പറയുന്നത്: "ഹേയ്! ഞാനീ ഫംഗ്ഷൻ നിർമ്മിച്ചിട്ടുണ്ട്. അതിനാൽ, എപ്പോഴെങ്കിലും ഞാനതിനെ വിളിച്ചാൽ, അതിനകത്തുള്ള
ദൗത്യം നിർവ്വഹിക്കുക!".
അതുകൊണ്ടാണ്, അവസാനം നിങ്ങൾ greet()-നെ വിളിക്കുമ്പോൾ, alert()-നെ
വിളിക്കുക പോലുള്ള അതിലെ കാര്യങ്ങൾ ബ്രൗസർ നിർവ്വഹിക്കുന്നത്.
ഫംഗ്ഷനുകൾ 2 ഘട്ടങ്ങളുള്ള ഒരു പ്രക്രിയയാണെന്ന് മനസ്സിലാക്കേണ്ടത് പ്രധാനമാണ്: ആദ്യം അതിനെ നിർമ്മിക്കുന്നു, പിന്നീട് അതിനെ വിളിക്കുന്നു.
യഥാർത്ഥത്തിൽ, നമ്മൾ ഇതുവരെയും ഉപയോഗിച്ച alert() ഫംഗ്ഷൻ, നേരത്തെതന്നെ നിർമ്മിക്കപ്പെട്ടതാണ്. അത്
നിങ്ങളുടെ ബ്രൗസറിലെവിടെയോ ആയിരിക്കുന്നെന്ന് മാത്രം.
എന്താണെങ്കിലും, 14 മിനിറ്റിൽ നമ്മൾ കുറേ കാര്യങ്ങളിലൂടെ കടന്നുപോയി!
അപ്പോൾ, എന്താ അടുത്ത പരിപാടി?
നമ്മൾ കേവലം അടിസ്ഥാനകാര്യങ്ങൾ മാത്രമേ നോക്കിയിട്ടുള്ളൂ. വിഷമിക്കേണ്ട കാര്യമില്ല! കാരണം, ഇഷ്ടംപോലെ പഠനസഹായികൾ ഓൺലൈനിൽ ലഭ്യമാണ്!
അവയിൽ സൗജന്യമായ ചിലത് ഞാൻ ചുവടെ നിർദ്ദേശിക്കുന്നു:
ഒരു വെബ്പേജിനുള്ള മൂന്നിൽ ഒരു ഘടകം മാത്രമാണ് ജാവാസ്ക്രിപ്റ്റ്! നിങ്ങൾ HTML-ഉം CSS-ഉം അറിഞ്ഞിരിക്കണം.
ഞാൻ രണ്ട് സൗജന്യ സഹായികൾ നിർമ്മിച്ചിട്ടുണ്ട്. അവ നോക്കി നിങ്ങൾക്ക് കാര്യങ്ങൾ പഠിക്കാം!
വായിച്ചതിന് നന്ദി! ഈ ട്യൂട്ടോറിയൽ നിങ്ങൾക്ക് ഉപകാരപ്പെട്ടാൽ, അഭിപ്രായമറിയിക്കാനും മറ്റുള്ളവർക്ക് പങ്കുവെയ്ക്കാനും ശ്രദ്ധിക്കുമല്ലോ.
നിർമ്മാണം @jgthms പരിഭാഷ @DigitalMalayaliStudio