1. Osnove JavaScript-a

2. Što je JavaScript ? skriptni jezik razvoj interaktivnih HTML stranica
prednosti korištenja JavaScripta:
jednostavnije pisanje programa
smanjena komunikacija sa serverom
bogatije i zanimljivije sučelje
jedan od triju „osnovnih” jezika za razvoj web sadržaja
JavaScript je skriptni jezika koji je namjenjen razvoju interaktivnih HTML stranica i izvršava se na strani klijenta. Razlika između skriptnih i programskih jezika leži u tome da se kod skriptnog jezika ne treba provoditi skripte u strojni jezik, dok se kod programskog jezika program mora prevesti u strojni jezik. Iz tog razloga pisanje programa puno je jednostavnije u skriptnim u odnosu na programske jezike.
Nadalje, uporabom JavaScripta smanjena je potreba za komunikaciju sa serverom (trenutni odaziv stranice), a sama stranica je obogaćena dodatnim sadržajima koje ne bi bilo moguće stvoriti uporabom „čistog” HTML-a i CSS-a. Neke od dodatnih mogućnosti koje se mogu postići su: provjera točnosti unosa podatak od strane korisnika, kreiranje zanimljivih efekata, otvoriti prozore koji će se pojaviti kada se dogodi neki od predefiniranih događaja i sl.
Baš zbog tih, raznolikih mogućnosti JavaScript se, uz HTML koji se koristi za određivanje sadržaja web stranici i CSS kojim se definira stil stranice u preglednicima, smatra jednim od tri osnovna jezika za razvoj web sadržaja.
Ono što je posebno zanimljivo kod ovog jezika je činjenica da je nastao u svega deset dana. Stvorio ga je Brendan Eich u svibnju godine dok je radio u kompaniji Netscape Communications Corporation.

3. JavaScript sintaksa pravila za pisanje JavaScripta:
osjetljiv na velika i mala slova  document ≠ DOCUMENT
svi izrazi završavaju točka-zarezom  ;
ignorira razmak između znakova  (var x=0;) = ( var x = 0 );
dopušta jednostruke navodnike unutar dvostrukih i obratno  „window.alert(‘OK’);”
dopušta lomljenje teksta  \
JavaScript izjave
Kao i svaki drugi jezik, tako i JavaScript ima određena pravila koja se moraju primjenjivati kako bi se osigurala kvalitetna i korektna uporaba jezika. Skup takvih pravila nazivamo sintaksa, a kod JavaScripta ona podrazumjevaju:
JavaScript je jezik koji je osjetljiv na velika i mala slova, razlikuje ih. Prilikom pisanja koda treba biti vrlo oprezan jer vrijednost napisana samo malim slovima nije isto što i vrijednost napisana samo velikim slovima.
Svi izrazi u JavaScriptu trebaju završiti točka-zarezom. Isto tako, moguće je odvojiti dva izraza u jednom redu ako se između njih stavi isti (točka-zarez) interpukcijski znak
Iako JavaScript ignorira razmak između znakova, tabove i nove redove koji se pojavljuju između redova ipak se preporuča korištenje istih kako bi se osigurala čitljivost i preglednost samog koda
U JavaScriptu koriste se Stringovi – skupine znakova koje su omeđene jednostrukim ili dvostrukim navodnicima. JavaScript dopušta korištenje jednostrukih navodnika unutar dvostrukih i obratno. Iako nema razlike koji će se navodnici koristiti pri pisanju koda, preporuča se korištenje dvostrukih navodnika za omeđivanje stringova, a jednostruke za „književne” funkcije – citiranje i sl.
Nadalje, JavaScript dopušta lomljenje teksta u više redaka što se može postići korištenjem obrnute kose crte
posljednje pravilo na listi – JavaScript izjave – u sebi sadrži dodatne segmente, a to su: vrijednosti, operatori, izrazi, ključne riječi i komentari.

4. JavaScript izjave dvije vrste vrijednosti - fiksne i varijable (var)
operatori - određeni simboli koji označavaju operaciju ( +, -, *, %...)
izrazi = kombinacija vrijednosti, varijabli i operatora
ključne riječi – identificiranje akcije
komentari – pojašnjenje koda
Na prošlom slideu spomenuli smo da se JavaScript izjave sastoje od više dijelova, a to su: vrijednosti, operatori, izrazi, ključne riječi i komentari. Na ovom slideu ćemo se pobliže upoznati sa svakim od navedenih dijelova.
Vrijednosti – JavaScript sintaksa definira dvije vrste vrijednosti: (I) fiksne vrijednosti koje se još nazivaju i literalima kojima se predstavljaju vrijednosti u JavaScriptu te (II) varijable, za čije se određivanje koristi ključna riječ var, a koje služe za pohranjivanje vrijednosti podataka
Operatori – predstavljaju simbole koji označavaju određenu operaciju. Na primjer, kako bi dodali vrijednost određenoj varijabli koristimo operator „=„ , a ukoliko bi htjeli zbrojiti neke dvije vrijednosti koristimo operator „+” i sl.
Izrazi – predstavljaju kombinaciju vrijednosti, varijabli i operatora koji izvršavaju određeni zadatak
Ključne riječi – koriste se za identificiranje akcije koja će biti izvršena. Na primjer, ključna riječ var govori browseru da stvori novu varijablu
Komentari – služe pojašnjenju koda i čine ga lakšim za čitanje.

5. Slika 1. uporaba izraza za računanje vrijednosti kombinacijom vrijednosti, varijabli i operatora - Primjer 1

6. Pisanje JavaScript koda
implementacija JavaScript-a u HTML:
direktno unutar elementa <script></script>
poseban dokument povezan s HTML stranicom
preporuka – poseban dokument!
Nakon upoznavanja s osnovnim informacijama o JavaScriptu možemo kernuti u implementaciju JavaScripta u HTML stranicu.
JavaScript se u HTML stranicu može implementirati na dva načina: (I) direktno u HTML unutar elementa <script></script> ili (II) kao zasebni dokument koji ima završnu oznaku .js. Ukoliko koristimo zasebni dokument tada isti povezujemo s HTML-om pomoću src stributa u script elementu.
Preporuka je pisati JavaScript u posebnom dokumentu radi preglednosti i čistoće HTML koda. Isto tako, na taj način možemo jednu skriptu rabiti u više dokumenata što omogućuje jednostavnije održavanje, smanjuje potrošnju diska te skraćuje vrijeme.

7. Slika 2. povezivanje vanjske JavaScript datoteke sa HTML-om
Slika prikazuje način na koji se vanjska JavaScript datoteka povezuje sa HTML-om. Na sljedećim slajdovima prikazati ćemo mogućnosti JavaScripta, a sam kod ćemo, radi preglednosti i lakšeg snalaženja, implementiranog unutar <script></script> atributa.

8. Slika 3. primjer JavaScript koda unutar HTMLa - Primjer 2
U ovom jednostavnom JavaScript kodu smo HTML elementu a dodali JavaScript funkciju onclick koja na klik mišem izvršava zadanu naredbu. U ovom slučaju na klik mišem u elementu p će se pokazati točno vrijeme i datum.
Preko identifikatora „demo” element p je povezan s elementom a te se klikom na element a poziva funkcija koja elementu koji ima identifikator „demo” ispunjava unutrašnji prostor s datumom i vremenom klika.
___________________________________________________________________________________________________
Samo za predavača: klikom na Primjer 1 otvara se web stranica sa pripremljenim primjerom. Program se pokreće pritiskom na tipku „Run” u gornjem lijevom uglu
Slika 3. primjer JavaScript koda unutar HTMLa - Primjer 2

9. Slika 4. JavaScript kod koji mijenja sadržaj HTML elementa - Primjer 3
Klikom na HTML element a poziva se funkcija koja u elementu p, odnosno u bilo koji element koji ima identifikator isti kao element koji poziva funkciju, upisuje ono što je zadano – što se nalazi između jednostrukih navodnika.
_____________________________________________________________________________________
Samo za predavača: klikom na Primjer 2 otvara se web stranica sa pripremljenim primjerom. Program se pokreće pritiskom na tipku „Run” u gornjem lijevom uglu
Slika 4. JavaScript kod koji mijenja sadržaj HTML elementa - Primjer 3

10. Hvala na pažnji !