JavaScript je poseban jezik koji pomaže u stvaranju zabavnih i interaktivnih web stranica. Mnogi ga ljudi koriste za izradu uzbudljivih web stranica. U web razvoju, JavaScript je poput čarobnog alata koji oživljava web stranice. Može mijenjati tekst, pomicati slike, pa čak i razgovarati s vama!
JavaScript je računalni jezik. On računalu govori kako raditi jednostavne i zabavne stvari na web stranici. Kada kliknete na gumb ili vidite animaciju na web stranici, JavaScript radi iza kulisa. To je jedan od glavnih alata u web razvoju.
Zamislite da imate robotsku igračku. Robotu govorite što treba učiniti dajući mu upute. JavaScript daje upute računalu na taj način.
Web stranice se sastoje od teksta, slika i boja. Ali mogu biti još zabavnije kada reagiraju na vas. JavaScript pomaže web stranicama da vas slušaju i odluče što će sljedeće učiniti. Na primjer, mijenja boju gumba kada ga pritisnete ili može prikazati poruku kada kliknete na poveznicu.
Zbog toga web stranice nisu samo lijepe slike, već živahna mjesta gdje možete komunicirati. Svaki put kada igrate igru na web stranici ili istražujete interaktivnu priču, JavaScript je tu da to omogući.
JavaScript ima neke jednostavne ideje koje je lako razumjeti. Zamislite ove ideje kao gradivne blokove. Kada ih spojite, možete stvoriti nevjerojatne stvari na webu. Evo nekoliko osnovnih ideja:
Svaka od ovih ideja pomaže vam u izradi složenijih i interaktivnijih web stranica.
Varijabla je poput posebnog okvira s imenom. U okvir možete staviti različite vrste stvari. Ponekad možete unutra staviti brojeve, a ponekad riječi. U JavaScriptu možete stvoriti varijablu pomoću riječi poput let ili var .
Na primjer, ako želite pohraniti svoje ime, možete napisati ovaj kod:
neka mojeIme = "Sam";
Ovaj kod stvara okvir pod nazivom „myName“ i u njega stavlja riječ „Sam“.
Postoje različite vrste podataka koje možete pohraniti. Neki su:
Varijable pomažu u pohranjivanju informacija koje se mogu promijeniti tijekom rada web stranice.
Funkcija u JavaScriptu je poput malog stroja koji obavlja jedan zadatak. Dajete stroju ime i kažete mu koji zadatak treba izvršiti. Zatim, kad god vam je potrebno da se taj zadatak obavi, pozivate funkciju.
Na primjer, ako želite pozdraviti, možete napisati funkciju poput ove:
funkcija sayHello() {
upozorenje("Zdravo, prijatelju!");
}
Kada pozovete funkciju sayHello() , pojavljuje se mala poruka koja kaže "Zdravo, prijatelju!" To je slično igrački koja svira kratku pjesmicu kada pritisnete gumb.
Ponekad računalo treba odabrati što će sljedeće učiniti. Tu dolaze do izražaja uvjetne naredbe . One pomažu računalu da odluči provjeravajući je li nešto istinito ili ne.
Razmislite o tome na ovaj način: ako pada kiša, možete odlučiti ponijeti kišobran. Ako ne pada kiša, ne treba vam kišobran. U JavaScriptu možete napisati jednostavan uvjet poput ovog:
ako je (temperatura > 30) {
upozorenje("Vani je vruće!");
} inače {
upozorenje("Nije previše vruće!");
}
Ovaj kod provjerava je li temperatura veća od 30. Ako jest, govori da je vruće. U suprotnom, govori da nije previše vruće.
Petlje vam omogućuju ponavljanje skupa instrukcija mnogo puta. One su kao vrtnja vrtuljka. Umjesto pisanja istog koda iznova i iznova, petlja to radi za vas.
Na primjer, ako želite pet puta reći "Volim programiranje!", možete koristiti petlju:
za (neka i = 0; i < 5; i++) {
console.log("Volim kodiranje!");
}
Ovaj kod traži od računala da ispiše rečenicu pet puta. To je kao da brojite igračke jednu po jednu.
U JavaScriptu, događaji su signali koji računalu govore da se nešto dogodilo. Ti događaji mogu biti klik miša, pritisak tipke ili čak promjena veličine prozora. Računalo osluškuje te događaje i zatim reagira.
Na primjer, kada kliknete gumb na web stranici, događa se događaj. JavaScript može detektirati ovaj klik i zatim pokrenuti funkciju za odgovor. Evo jednostavnog primjera:
neka gumb = dokument.getElementById("mojGumb");
button.addEventListener("klikni", function() {
alert("Kliknuli ste gumb!");
});
Ovaj kod pronalazi gumb s ID-om "myButton" i osluškuje klik. Kada se klikne na gumb, prikazuje se poruka "Kliknuli ste na gumb!".
Objektni model dokumenta ( DOM ) način je pregleda i interakcije sa svim dijelovima web stranice. Zamislite DOM kao stablo. Stablo ima mnogo grana, a svaka grana predstavlja element na stranici, kao što je odlomak, slika ili gumb.
JavaScript može mijenjati ove grane. Može dodavati nove stavke, uklanjati stare ili ih mijenjati. Na primjer, može mijenjati tekst unutar odlomka kada kliknete gumb.
Ovo je važno jer pomaže u stvaranju interaktivnih web stranica. Korištenjem DOM-a, vaša web stranica se može dinamički mijenjati bez potrebe za ponovnim učitavanjem.
Pogledajmo jednostavan primjer JavaScripta u akciji. Zamislite da imate web stranicu s gumbom. Kada kliknete na gumb, želite da vas pozdravi. Kôd možete napisati ovako:
<!DOCTYPE html>
<html>
<glava>
<title>Jednostavan primjer JavaScripta</title>
</head>
<tijelo>
<button id="greetButton">Klikni me!</button>
<skripta>
funkcija pozdraviKorisnika() {
upozorenje("Zdravo, prijatelju!");
}
neka gumb = dokument.getElementById("greetButton");
button.addEventListener("klikni", pozdravKorisnika);
</script>
</body>
</html>
Ovaj kod stvara gumb na web stranici. Kada se klikne na gumb, pokreće se funkcija greetUser() i pojavljuje se skočni prozor s porukom "Pozdrav, prijatelju!".
JavaScript također može obavljati jednostavne matematičke operacije. Može zbrajati, oduzimati, množiti i dijeliti brojeve. Ova značajka je vrlo korisna za izradu malih aplikacija ili čak igara.
Na primjer, ako želite zbrojiti dva broja, možete napisati:
neka je broj1 = 5;
neka je broj2 = 3;
neka zbroj = broj1 + broj2;
alert("Zbroj je " + zbroj);
Ovaj kod uzima dva broja, 5 i 3 , zbraja ih i zatim prikazuje poruku "Zbroj je 8".
Svaki put kada posjetite web stranicu s gumbima, animacijama ili igrama, JavaScript je vjerojatno na djelu. Čini web stranice dinamičnima i ugodnima. Na primjer, kada kupujete online ili gledate videozapise, JavaScript igra važnu ulogu iza kulisa.
Pomaže u brzom učitavanju dijelova stranice, provjeri pogrešaka, pa čak i prikazuje nove informacije bez ponovnog učitavanja stranice. Web-stranice poput YouTubea, Facebooka i mnogih drugih koriste JavaScript kako bi vam stvorile glatko iskustvo.
Učenje JavaScripta slično je igranju sa šarenim LEGO kockicama. Svaka kockica je mali dio koda. Kada kombinirate mnogo kockica, možete izgraditi nešto prekrasno. U početku ćete možda koristiti samo nekoliko kockica za izgradnju jednostavne kuće. Kasnije ćete naučiti koristiti više kockica i izgraditi veliki dvorac ili čak svemirski brod!
Najbolji način za razumijevanje JavaScripta je sastavljanje malih dijelova, a zatim njihovo spajanje kako biste stvorili cijelu web stranicu. Svaka nova ideja koju naučite je još jedna LEGO kockica za vaše web projekte.
Mnogi pomoćni programi čine JavaScript još moćnijim. Ti se pomoćni programi nazivaju biblioteke i okviri. Oni su poput dodatnih setova LEGO blokova koji dolaze u posebnim oblicima. Neki popularni JavaScript pomoćni programi su:
Ovi alati pomažu mnogim programerima da stvore nevjerojatne web stranice umjesto da sami pišu sav kod. Oni pokazuju da čak i jezik namijenjen zabavi može biti moćan alat u stvarnom svijetu.
Web preglednik je program koji koristite za posjećivanje web stranica. Popularni preglednici su Chrome, Firefox, Safari i Edge. JavaScript radi unutar ovih preglednika. Kada napišete JavaScript kod na svoju web stranicu, preglednik ga čita i čini vašu stranicu interaktivnom.
Zamislite preglednik kao pozornicu, a JavaScript kao glumca. Glumac slijedi scenarij (vaš kod) i postavlja predstavu. Bez JavaScripta, pozornica bi bila prazna, a predstava ne bi bila ni približno toliko zanimljiva.
Kada otvorite web stranicu, preglednik radi sljedeće:
Ovaj proces pokazuje kako JavaScript upotpunjuje izgled i dojam web stranice.
JavaScript se koristi na mnogo zabavnih i korisnih načina u našem svakodnevnom životu. Evo nekoliko primjera:
Ovi primjeri pokazuju da JavaScript nije samo kod na ekranu. To je most koji povezuje tehnologiju s našim svakodnevnim aktivnostima.
Čak i ako ste mladi, možete početi učiti JavaScript razmišljajući o jednostavnim projektima. Možete započeti s web stranicom koja mijenja boju pozadine kada pritisnete gumb. Ili možete stvoriti kratku priču koja se mijenja kada kliknete na različite dijelove nje.
Svaki projekt, bez obzira koliko malen, uči vas više o tome kako web stranica funkcionira. Svaki korak gradi vaše samopouzdanje, slično kao što naučite abecedu prije pisanja punih riječi.
JavaScript je alat koji vam omogućuje da budete kreativni. Ne koristi se samo za učenje ili izradu ozbiljnih web stranica; to je i način izražavanja vaše kreativnosti. Pomoću JavaScripta možete dizajnirati igre, interaktivne priče, pa čak i animacije.
Kada radite s JavaScriptom, možete sebe smatrati umjetnikom koji slika kodom. Svaka funkcija i svaka varijabla pomaže vam stvoriti prekrasnu sliku na webu.
Zapamtite, kreativnost u JavaScriptu je kao crtanje jarkim setom bojica na velikom bijelom papiru. Nema granica, a vaša mašta je vaš vodič.
JavaScript je računalni jezik koji se koristi u web razvoju. Pomaže u tome da web stranice budu interaktivne i živahne. Pomoću JavaScripta možete dodati zabavne radnje web stranicama kao što su promjena teksta, reagiranje na klikove, pa čak i izvođenje jednostavnih izračuna.
Osnovni građevni blokovi JavaScripta uključuju:
JavaScript također osluškuje događaje poput klikova i pritisaka tipki. Surađuje s modelom objekata dokumenta (DOM) kako bi promijenio ono što vidite na web stranici bez potrebe za ponovnim učitavanjem. To čini web stranice dinamičnima i zabavnima.
Mnoge popularne web stranice i online igre koriste JavaScript. Posvuda je! Od jednostavnih web stranica s gumbom za pozdrav do složenih online aplikacija, JavaScript je u srži svega.
Učenje JavaScripta je kao gradnja s LEGO kockicama. Počnite s malim stvarima, učite jedan dio po jedan i uskoro ćete moći stvarati sjajne projekte. Svaka nova ideja je još jedan alat u vašem kreativnom setu s alatima.
U ovoj lekciji vidjeli smo kako JavaScript surađuje s HTML-om i CSS-om kako bi web stranice oživjele. Učili smo o varijablama, funkcijama, uvjetnim naredbama, petljama, događajima i DOM-u. Također smo pogledali jednostavne primjere kako bismo razumjeli kako se ovi dijelovi uklapaju zajedno.
Ključne točke koje treba zapamtiti:
Nastavite istraživati i učiti o JavaScriptu. Sa svakim novim kodom koji napišete, otvarate svijet kreativnih mogućnosti u web razvoju. Uživajte u svom putovanju i zabavite se oživljavajući svoje web stranice!