Ang JavaScript ay isang espesyal na wika na tumutulong na gawing masaya at interactive ang mga web page. Ito ay ginagamit ng maraming tao upang lumikha ng mga kapana-panabik na website. Sa web development, ang JavaScript ay parang magic tool na nagbibigay-buhay sa mga website. Maaari itong magpalit ng teksto, maglipat ng mga larawan, at kahit na makipag-usap sa iyo!
Ang JavaScript ay isang wika sa computer. Sinasabi nito sa computer kung paano gumawa ng mga simple at nakakatuwang bagay sa isang web page. Kapag nag-click ka sa isang button o nakakita ng animation sa isang website, gumagana ang JavaScript sa likod ng mga eksena. Ito ay isa sa mga pangunahing tool sa pagbuo ng web.
Isipin na mayroon kang isang laruang robot. Sasabihin mo sa robot kung ano ang gagawin sa pamamagitan ng pagbibigay nito ng mga tagubilin. Ang JavaScript ay nagbibigay ng mga tagubilin sa computer na ganoon.
Ang mga website ay gawa sa teksto, mga larawan, at mga kulay. Ngunit maaari silang maging mas masaya kapag nag-react sila sa iyo. Tinutulungan ng JavaScript ang mga website na makinig sa iyo at magpasya kung ano ang susunod na gagawin. Halimbawa, ginagawa nitong baguhin ang kulay ng isang button kapag pinindot mo ito, o maaari itong magpakita ng mensahe kapag nag-click ka sa isang link.
Ginagawa nitong hindi lamang magagandang larawan ang mga website, ngunit masiglang mga lugar kung saan maaari kang makipag-ugnayan. Sa tuwing naglalaro ka ng isang laro sa isang website o nag-e-explore ng isang interactive na kuwento, nariyan ang JavaScript na nagsasagawa nito.
Ang JavaScript ay may ilang simpleng ideya na madaling maunawaan. Isipin ang mga ideyang ito bilang mga bloke ng gusali. Kapag pinagsama mo ang mga ito, makakagawa ka ng mga kamangha-manghang bagay sa web. Narito ang ilang pangunahing ideya:
Ang bawat isa sa mga ideyang ito ay tumutulong sa iyo na bumuo ng mas kumplikado at interactive na mga webpage.
Ang variable ay parang isang espesyal na kahon na may pangalan. Maaari kang maglagay ng iba't ibang uri ng mga bagay sa loob ng isang kahon. Minsan maaari kang maglagay ng mga numero sa loob, at kung minsan ay mga salita. Sa JavaScript, maaari kang lumikha ng variable gamit ang mga salita tulad ng let o var .
Halimbawa, kung gusto mong iimbak ang iyong pangalan, maaari mong isulat ang code na ito:
let myName = "Sam";
Ang code na ito ay gumagawa ng isang kahon na tinatawag na "myName" at inilalagay ang salitang "Sam" sa loob nito.
Mayroong iba't ibang uri ng data na maaari mong iimbak. Ang ilan ay:
Ang mga variable ay tumutulong sa paghawak ng impormasyon na maaaring magbago kapag tumatakbo ang website.
Ang isang function sa JavaScript ay parang isang maliit na makina na gumagawa ng isang trabaho. Bibigyan mo ng pangalan ang makina at sabihin dito kung anong gawain ang dapat tapusin. Pagkatapos, sa tuwing kailangan mong gawin ang trabahong iyon, tatawagan mo ang function.
Halimbawa, kung gusto mong kamustahin, maaari kang magsulat ng function na tulad nito:
function sayHello() {
alerto("Kumusta, kaibigan!");
}
Kapag tinawagan mo ang sayHello() function, may lalabas na maliit na mensahe na nagsasabing "Hello, friend!" Ito ay katulad ng isang laruan na nagpapatugtog ng maikling kanta kapag pinindot mo ang isang pindutan.
Minsan, kailangang piliin ng computer kung ano ang susunod na gagawin. Dito pumapasok ang mga conditional statement . Tinutulungan nila ang computer na magpasya sa pamamagitan ng pagsuri kung totoo ang isang bagay o hindi.
Isipin ito sa ganitong paraan: kung umuulan, maaari kang magpasya na kumuha ng payong. Kung hindi umuulan, hindi mo kailangan ng payong. Sa JavaScript, maaari kang magsulat ng isang simpleng kondisyon tulad nito:
kung (temperatura > 30) {
alert("Mainit sa labas!");
} iba {
alert("Hindi masyadong mainit!");
}
Sinusuri ng code na ito kung ang temperatura ay higit sa 30. Kung ito ay, ito ay nagsasabi sa iyo na ito ay mainit. Kung hindi, sinasabi nito na hindi ito masyadong mainit.
Hinahayaan ka ng mga loop na ulitin ang isang hanay ng mga tagubilin nang maraming beses. Para silang paikot-ikot sa isang merry-go-round. Sa halip na isulat ang parehong code nang paulit-ulit, isang loop ang gumagawa nito para sa iyo.
Halimbawa, kung gusto mong sabihin ang "I love coding!" limang beses, maaari kang gumamit ng loop:
para sa (hayaan i = 0; i < 5; i++) {
console.log("Gustung-gusto ko ang coding!");
}
Hinihiling ng code na ito sa computer na i-print ang pangungusap nang limang beses. Ito ay tulad ng pagbibilang ng iyong mga laruan isa-isa.
Sa JavaScript, ang mga kaganapan ay mga senyales na nagsasabi sa computer na may nangyari. Ang mga kaganapang ito ay maaaring isang pag-click ng mouse, isang pagpindot sa key, o kahit isang pagbabago sa laki ng window. Nakikinig ang computer para sa mga kaganapang ito at pagkatapos ay tumugon.
Halimbawa, kapag nag-click ka sa isang button sa isang webpage, isang kaganapan ang mangyayari. Maaaring makita ng JavaScript ang pag-click na ito at pagkatapos ay magpatakbo ng isang function upang tumugon. Narito ang isang simpleng halimbawa:
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Na-click mo ang button!");
});
Nakahanap ang code na ito ng isang button na may ID na "myButton" at nakikinig para sa isang pag-click. Kapag na-click ang button, nagpapakita ito ng mensahe na nagsasabing, "Na-click mo ang button!"
Ang Document Object Model, o DOM , ay isang paraan upang tingnan at makipag-ugnayan sa lahat ng bahagi ng isang web page. Isipin ang DOM bilang isang puno. Ang puno ay may maraming mga sanga, at ang bawat sangay ay kumakatawan sa isang elemento sa pahina, tulad ng isang talata, isang imahe, o isang pindutan.
Maaaring baguhin ng JavaScript ang mga sangay na ito. Maaari itong magdagdag ng mga bagong item, alisin ang mga luma, o baguhin ang mga ito. Halimbawa, maaari nitong baguhin ang teksto sa loob ng isang talata kapag nag-click ka sa isang pindutan.
Mahalaga ito dahil nakakatulong ito sa paggawa ng mga interactive na website. Sa pamamagitan ng paggamit sa DOM, ang iyong webpage ay maaaring dynamic na magbago nang hindi na kailangang i-reload.
Tingnan natin ang isang simpleng halimbawa ng JavaScript na gumagana. Isipin na mayroon kang isang webpage na may isang pindutan. Kapag na-click mo ang button, gusto mong kumusta ito. Maaari mong isulat ang code tulad nito:
<!DOCTYPE html>
<html>
<ulo>
<title>Simple JavaScript Halimbawa</title>
</head>
<katawan>
<button id="greetButton">I-click ako!</button>
<script>
function greetUser() {
alerto("Kumusta, kaibigan!");
}
let button = document.getElementById("greetButton");
button.addEventListener("click", greetUser);
</script>
</body>
</html>
Lumilikha ang code na ito ng isang button sa webpage. Kapag na-click ang button, tatakbo ang greetUser() function, at may lalabas na popup na may mensaheng "Hello, friend!"
Ang JavaScript ay maaari ding gumawa ng simpleng matematika. Maaari itong magdagdag, magbawas, magparami, at hatiin ang mga numero. Ang tampok na ito ay lubhang kapaki-pakinabang para sa paggawa ng maliliit na application o kahit na mga laro.
Halimbawa, kung gusto mong magdagdag ng dalawang numero, maaari mong isulat ang:
hayaan ang numero1 = 5;
hayaan ang numero2 = 3;
let sum = number1 + number2;
alert("Ang kabuuan ay " + kabuuan);
Ang code na ito ay tumatagal ng dalawang numero, 5 at 3 , idinaragdag ang mga ito nang magkasama, at pagkatapos ay nagpapakita ng mensahe na nagsasabing "Ang kabuuan ay 8".
Sa tuwing bibisita ka sa isang website na may mga button, animation, o laro, malamang na gumagana ang JavaScript. Ginagawa nitong dynamic at kasiya-siya ang mga website. Halimbawa, kapag namimili ka online o nanonood ng mga video, gumaganap ng mahalagang papel ang JavaScript sa likod ng mga eksena.
Nakakatulong itong mabilis na mag-load ng mga bahagi ng page, tingnan kung may mga error, at magpakita pa sa iyo ng bagong impormasyon nang hindi nire-reload ang page. Ang mga website tulad ng YouTube, Facebook, at marami pang iba ay gumagamit ng JavaScript upang lumikha ng isang maayos na karanasan para sa iyo.
Ang pag-aaral ng JavaScript ay katulad ng paglalaro ng mga makukulay na bloke ng LEGO. Ang bawat bloke ay isang maliit na piraso ng code. Kapag pinagsama mo ang maraming mga bloke, maaari kang bumuo ng isang bagay na kahanga-hanga. Sa una, maaari kang gumamit lamang ng ilang mga bloke upang magtayo ng isang simpleng bahay. Sa paglaon, matutunan mong gumamit ng higit pang mga bloke at bumuo ng isang malaking kastilyo o kahit isang sasakyang pangalangaang!
Ang pinakamahusay na paraan upang maunawaan ang JavaScript ay sa pamamagitan ng pagbuo ng maliliit na piraso at pagkatapos ay pagsasama-samahin ang mga ito upang lumikha ng isang buong webpage. Ang bawat bagong ideya na natutunan mo ay isa pang LEGO block para sa iyong mga proyekto sa website.
Maraming katulong ang ginagawang mas malakas ang JavaScript. Ang mga katulong na ito ay tinatawag na mga aklatan at mga balangkas. Para silang mga extra set ng LEGO blocks na may mga espesyal na hugis. Ang ilang sikat na JavaScript helper ay:
Nakakatulong ang mga tool na ito sa maraming developer na lumikha ng mga kamangha-manghang website sa halip na isulat ang lahat ng code nang mag-isa. Ipinakikita nila na kahit na ang isang wikang para sa kasiyahan ay maaari ding maging isang makapangyarihang kasangkapan sa totoong mundo.
Ang web browser ay ang program na ginagamit mo upang bisitahin ang mga website. Ang mga sikat na browser ay ang Chrome, Firefox, Safari, at Edge. Gumagana ang JavaScript sa loob ng mga browser na ito. Kapag sumulat ka ng JavaScript code sa iyong webpage, binabasa ito ng browser at ginagawang interactive ang iyong page.
Isipin ang browser bilang isang yugto at JavaScript bilang ang aktor. Ang aktor ay sumusunod sa script (iyong code) at naglalagay sa isang palabas. Kung walang JavaScript, ang entablado ay walang laman, at ang palabas ay hindi magiging kasing-engganyo.
Kapag nagbukas ka ng webpage, ginagawa ng browser ang sumusunod:
Ipinapakita ng prosesong ito kung paano kinukumpleto ng JavaScript ang hitsura at pakiramdam ng isang webpage.
Ginagamit ang JavaScript sa maraming masaya at kapaki-pakinabang na paraan sa ating pang-araw-araw na buhay. Narito ang ilang halimbawa:
Ang pagtingin sa mga halimbawang ito ay nagpapakita na ang JavaScript ay hindi lamang tungkol sa code sa isang screen. Ito ay isang tulay na nag-uugnay sa teknolohiya sa ating pang-araw-araw na gawain.
Kahit na ikaw ay bata pa, maaari mong simulan ang pag-aaral ng JavaScript sa pamamagitan ng pag-iisip ng mga simpleng proyekto. Maaari kang magsimula sa isang webpage na nagbabago ng kulay ng background nito kapag pinindot mo ang isang pindutan. O maaari kang lumikha ng isang maliit na kuwento na nagbabago kapag nag-click ka sa iba't ibang bahagi nito.
Ang bawat proyekto, gaano man kaliit, ay nagtuturo sa iyo ng higit pa tungkol sa kung paano gumagana ang isang website. Ang bawat hakbang ay bumubuo ng iyong kumpiyansa, tulad ng pag-aaral ng alpabeto bago magsulat ng mga buong salita.
Ang JavaScript ay isang tool na nagbibigay-daan sa iyong maging malikhain. Ito ay hindi lamang ginagamit para sa pag-aaral o para sa paggawa ng mga seryosong website; isa rin itong paraan upang maipahayag ang iyong pagkamalikhain. Maaari kang magdisenyo ng mga laro, interactive na kwento, at maging ng mga animation gamit ang JavaScript.
Kapag nagtatrabaho ka sa JavaScript, maaari mong isipin ang iyong sarili bilang isang artist na nagpinta gamit ang code. Ang bawat function at bawat variable ay tumutulong sa iyo na lumikha ng magandang larawan sa web.
Tandaan, ang pagkamalikhain sa JavaScript ay parang pagguhit gamit ang isang maliwanag na hanay ng mga krayola sa isang malaking puting papel. Walang mga limitasyon, at ang iyong imahinasyon ang iyong gabay.
Ang JavaScript ay isang wika ng computer na ginagamit sa pagbuo ng web. Nakakatulong ito na gawing interactive at masigla ang mga website. Sa JavaScript, maaari kang magdagdag ng mga nakakatuwang aksyon sa mga web page gaya ng pagpapalit ng text, pagtugon sa mga pag-click, at kahit na pagsasagawa ng mga simpleng kalkulasyon.
Ang pangunahing mga bloke ng pagbuo ng JavaScript ay kinabibilangan ng:
Nakikinig din ang JavaScript sa mga kaganapan tulad ng mga pag-click at pagpindot sa key. Gumagana ito sa Document Object Model (DOM) upang baguhin ang nakikita mo sa isang web page nang hindi ito kailangang i-reload. Ginagawa nitong dynamic at masaya ang mga website.
Maraming sikat na website at online na laro ang gumagamit ng JavaScript. Ito ay kahit saan! Mula sa mga simpleng website na may button ng pagbati hanggang sa mga kumplikadong online na application, ang JavaScript ay nasa puso ng lahat ng ito.
Ang pag-aaral ng JavaScript ay parang pagbuo gamit ang mga bloke ng LEGO. Magsimula sa maliit, matuto nang paisa-isa, at sa lalong madaling panahon makakagawa ka ng magagandang proyekto. Ang bawat bagong ideya ay isa pang tool sa iyong creative toolbox.
Sa araling ito, nakita namin kung paano gumagana ang JavaScript sa HTML at CSS upang gawing buhay ang mga website. Natutunan namin ang tungkol sa mga variable, function, conditional, loops, event, at DOM. Tiningnan din namin ang mga simpleng halimbawa para maunawaan kung paano magkatugma ang mga pirasong ito.
Mga Pangunahing Punto na Dapat Tandaan:
Patuloy na mag-explore at matuto tungkol sa JavaScript. Sa bawat bagong code na isusulat mo, nagbubukas ka ng mundo ng mga malikhaing posibilidad sa pagbuo ng web. Masiyahan sa iyong paglalakbay at magsaya sa paggawa ng iyong mga website na mabuhay!