Priručnik za polaznike 2015 Srce Osnove JavaScripta

Uvod

U okviru ovog tečaja upoznat ćete se s osnovama programiranja u JavaScriptu. JavaScript je skriptni jezik (danas de facto standard) kojim se u statičke HTML-stranice mogu uvesti interaktivni elementi.

Za uspješno praćenje tečaja o JavaScriptu potrebno je znati osnovno o radu u operacijskom sustavu, poznavati sintaksu HTML-a, a poželjna su i osnovna znanja iz programiranja.

Ovaj se priručnik sastoji od jedanaest poglavlja koja će biti detaljno obrađena u 12 školskih sati.

U ovom se priručniku za označavanje važnijih pojmova rabe podebljana slova. Nazivi datoteka oblikovani su podebljanim slovima i kurzivom.

Prečaci na tipkovnici označeni su ovako: [Ctrl]+[Alt]+[Del], [F1], a programski se kôd prikazuje posebnim oblikovanjem:

Savjeti, upozorenja i zanimljivosti nalaze se u okvirima sa strane.

I.Što je JavaScript?

JavaScript je jednostavan, interpretiran programski jezik namijenjen ponajprije razvoju interaktivnih HTML-stranica. Jezgra JavaScripta uključena je u većinu današnjih preglednika (Internet Explorer, Google Chrome, Mozilla Firefox, Opera, Safari i drugi).

I.1.Naziv JavaScript

JavaScript omogućuje izvršavanje određenih radnji u inače statičnim HTML-dokumentima, npr. interakciju s korisnikom, promjenu svojstava preglednikova prozora ili dinamičko stvaranje HTML-sadržaja.

JavaScript nije pojednostavljena inačica programskog jezika Java. Povezuje ih jedino slična sintaksa i to što se koriste za izvršavanje određenih radnji unutar preglednika. Izvorno se JavaScript trebao zvati LiveScript, ali da bi se potakla uporaba novog skriptnog jezika, nazvan je slično jeziku Java, od kojeg se u tadašnje vrijeme dosta očekivalo.

1. 
   Povijest JavaScripta
   

JavaScript se razvija od 1995. godine kada je Netscape objavio nekoliko prvih inačica jezika. Nedugo nakon toga Microsoft je objavio jezik sličan JavaScriptu pod nazivom JScript. Danas je za standardizaciju skriptnih jezika, pa tako i JavaScripta, zadužena organizacija ECMA (http://www.ecma.ch/). Standardi se objavljuju pod nazivom ECMAScript i do sada je objavljeno pet inačica standarda ECMA-262.

U ovom priručniku pojam JavaScript označava bilo koju implementaciju jezika, uključujući i Microsoftov JScript.

Inačica	Opis
JavaScript 1.0	Izvorna inačica jezika, bila je puna pogrešaka. Implementirana u preglednik Netscape 2.
JavaScript 1.1	Dodan novi objekt Array (za rad s poljima); popravljene ozbiljne pogreške. Implementiran u preglednik Netscape 3.
JavaScript 1.2	Dodana nova naredba switch, regularni izrazi i drugo. Djelomično poštuje ECMA v1 uz neke nekompatibilnosti. Implementiran u preglednik Netscape 4.
JavaScript 1.3	Ispravljene nekompatibilnosti JavaScripta 1.2. Usklađenost sa standardom ECMA v1. Implementiran u preglednik Netscape 4.5.
JavaScript 1.4	Implementiran samo u preglednik Netscape za poslužiteljske proizvode.
JavaScript 1.5	Uvedeno upravljanje iznimkama (exception handling). Poštuje standard ECMA v3. Implementiran u preglednike Mozilla Firefox i Netscape 6.
JScript 1.0	Okvirno ekvivalentan JavaScriptu 1.0. Implementiran u prve inačice preglednika Internet Explorer 3.
JScript 2.0	Okvirno ekvivalentan JavaScriptu 1.1. Implementiran u kasnije inačice preglednika Internet Explorer 3.
JScript 3.0	Okvirno ekvivalentan JavaScriptu 1.3. Usklađen sa standardom ECMA v1. Implementiran u preglednik Internet Explorer 4.
JScript 4.0	Nije implementiran ni u jedan preglednik.
JScript 5.0	Podržano upravljanje iznimkama (exception handling). Djelomično poštuje standard ECMA v3. Implementiran u preglednik Internet Explorer 5.
JScript 5.5	Okvirno ekvivalentan JavaScriptu 1.5. Potpuno usklađen sa standardom ECMA v3. Implementiran u preglednike Internet Explorer 5.5 i 6. (IE 6 zapravo ima JScript 5.6, ali 5.6 se značajno ne razlikuje od 5.5 za JavaScript programere koji pišu za preglednike).
ECMA v1	Prva standardna inačica. Standardizirane su osnove JavaScripta 1.1 i dodano je nekoliko novih mogućnosti. Nisu standardizirani naredba switch i regularni izrazi. Implementacije koje poštuju standard ECMA v1 su JavaScript 1.3 i JScript 3.0.
ECMA v2	Razvojna inačica koja nije donijela nove mogućnosti, ali je razjasnila dvosmislenosti.
ECMA v3	Standardizirani naredba switch, regularni izrazi i upravljanje iznimkama. Implementacije usklađene sa standardom ECMA v3 su JavaScript 1.5 i JScript 5.5.
ECMA v4	Ova inačica nikada nije zaživjela zbog nesuglasica u radnoj skupini u kojem bi se smjeru jezik trebao razvijati.
ECMA v5	Dodan način rada strict, razjašnjene su mnoge dvosmislenosti iz standarada ECMA v3 i dodana je podrška za JSON.
ECMA v5.1	Dorađena inačica 5 koja ne sadržava nikakve novitete vezane uz sâm jezik.
ECMA v6	Očekuje se sredinom 2015. godine, a treba dodati novu sintaksu za objektno programiranje i još neke dodatke. Ta je inačica poznata i kao ES6 Harmony.

I.2.Skriptni jezici

Program koji obrađuje i izvršava skripte zove se interpreter. Interpreter čita kôd i prevodi ga u strojni jezik svakog puta kada se pokrene skripta. Svaki jezik koji se interpretira, tj. koji izvršava interpreter, naziva se skriptni jezik. Interpreter za JavaScript ugrađen je u većinu današnjih preglednika.

Skriptni se jezici koriste jer je razvoj programa znatno jednostavniji. Za razliku od programa pisanih u pravim programskim jezicima, kod skriptnog jezika ne treba prevoditi skripte u strojni jezik:

Koraci kod programskih jezika	Koraci kod skriptnih jezika
Napisati ili popraviti program. Prevesti program u strojni jezik. Pokrenuti prevedeni program. Za popravke ponoviti od 1. koraka.	Napisati ili popraviti skriptu. Pokrenuti interpreter. Za popravke ponoviti od 1. koraka.

HTML je jezik koji se koristi za opis dokumenata i nema dinamičnih elemenata. Davno se ukazala potreba za uvođenjem dinamičnog načina stvaranja HTML-elemenata i stvaranje interaktivnog sadržaja u HTML-u.

Danas postoji nekoliko tehnologija za stvaranje interaktivnog sadržaja u HTML-dokumentima:

1. 
   U prvoj skupini su tehnologije za dinamično stvaranje HTML-a, tj. stranice su zapisane pomoću nekog (obično skriptnog) jezika, koji interpretira poslužitelj i šalje korisniku HTML-kôd. Tipični su predstavnici ove skupine ASP.NET, PHP (PHP: Hypertext Preprocessor), a mogu se koristiti i Java, Ruby (Ruby on Rails), Python i Perl.
   

Napomena

Java appleti su manji programi napisani u Javi koji se izvršavaju u pregledniku.

U drugoj skupini su Java (u obliku appleta), Flash i Shockwave za čiji je prikaz potreban vanjski program (plug-in) koji zna interpretirati ili izvoditi navedene programe. Kad je sadržaj prikazan u pregledniku, on je dinamičan i neovisan o „okolnom” HTML-u.

2. 
   U trećoj su skupini tzv. klijentski jezici, jer se njihov kôd interpretira na klijentskoj strani, tj. u pregledniku (klijentu). Glavni predstavnik klijentskih jezika je JavaScript. Nekada je bio značajan i skriptni jezik VBScript koji se koristio u starijim inačicama preglednika Internet Explorera.
   

PHP,
ASP,

…

POSLUŽITELJ

INTERNET

HTML, JavaScript

JVM

JAVA

PREGLEDNIK

HTML, JavaScript, Java, ...

Java Virtual Machine

Primjer toka podataka od web-poslužitelja do web-preglednika:

PHP

POSLUŽITELJ

INTERNET

HTML i JavaScript

PREGLEDNIK

HTML i JavaScript

Za PHP to izgleda ovako:

I.3.Preglednici (browsers)

Danas je podrška za JavaScript izvrsna u svim preglednicima, tako da se autori preglednika više ne natječu u podršci nego u brzini izvođenja određenih algoritama.

Popis preglednika koji podržavaju standard ECMA-262 inačica 5:

• 
  Internet Explorer 10+
  
• 
  Firefox 21+
  
• 
  Safari 6+
  
• 
  Chrome 23+
  
• 
  Opera 15+.
  

Osim utrke u brzini autori preglednika natječu se u jednostavnosti razvoja, odnosno tko će omogućiti što više dodatnih značajki za razvoj. Što je bolja podrška za razvoj, to će se više razvijatelja koristiti tim preglednikom i preporučivati ga svojim klijentima. Tako raste i broj korisnika tog preglednika.

Tri najčešće korištena preglednika (Internet Explorer, Google Chrome i Mozilla Firefox) danas imaju alate za razvijatelje (developer tools) do kojih se u svim preglednicima dolazi jednako – odabirom tipke F12.

Od razvijateljskih značajki za ovaj su tečaj najzanimljivije Console i DOM.

I.4.Aplikacije za uređivanje teksta (editors)

JavaScript se može pisati u bilo kojem uređivaču teksta (editor) koji podržava standard ASCII. Blok za pisanje (Notepad) prisutan je u svim inačicama operacijskog sustava Windows pa se nameće kao pogodan i za programiranje u JavaScriptu.

Da bi se programiranje ubrzalo i učinilo učinkovitijim, poželjno je rabiti uređivač teksta koji ima ova svojstva:

• 
  mogućnost otvaranja više dokumenata u jednom prozoru
  
• 
  razlikuje dijelove kôda i prikazuje ih u različitim bojama (bojanje sintakse)
  
• 
  podrška za UTF-8
  
• 
  automatsko poravnavanje (tidy)
  
• 
  provjera stila kodiranja u skladu s preporučenim postupcima (linter).
  

I.5.Document Object Model u JavaScriptu

Document Object Model (DOM) je model za prikaz i interakciju s objektima u HTML-dokumentu. Omogućava jednoznačan i jednostavan pristup dijelovima (HTML-) dokumenta te rukovanje njegovim dijelovima (npr. elementi u HTML-dokumentu).

JavaScript definira svoj DOM u obliku ovakve hijerarhijske strukture:

Svakom objektu ili svojstvu pristupa se kroz taj model, tj. document je osnovni objekt preko kojeg se pristupa svim drugim objektima dokumenta.

Na primjer, u dokumentu koji sadrži ovaj programski kôd:

vrijednosti polja u koje se upisuje ime pristupa se ovako:

document.forms[0].elements[0].value

Vidljivo je da je tekstni objekt prvi u polju elemenata koji se nalaze u prvom obrascu. Da bi se programiranje pojednostavilo, omogućeno je imenovanje pojedinih objekata. Na primjer, dodavanjem naziva obrascu (name="frm_a") i dodavanjem naziva tekstnom polju za unos imena (name="ime") dobije se:

Vrijednosti polja u tom slučaju pristupamo jednostavnije:

document.frm_a.ime.value

Najjednostavniji način dohvata vrijednosti polja je pomoću jedinstvenog identifikatora (ID). Naime, preporuka je da vrijednost atributa ID mora biti jedinstvena na razini dokumenta. Prvobitni se dokument može dodatno urediti dodavanjem atributa ID (id=“ime“) za polje za unos imena:

Vrijednosti polja u tom slučaju pristupamo još jednostavnije:

document.getElementById('ime').value

Potrebno je naglasiti da atribut name i dalje treba biti naveden zbog načina na koji se obrađuju obrasci.

Objekt window također je važan objekt pomoću kojeg se upravlja prozorom preglednika. U jednom od primjera detaljnije će se obraditi uporaba objekta window.

Dvije često korištene funkcije vezane su uz objekte document i window:

• 
  document.write – funkcija koja upisuje niz znakova koji se proslijedi kao prvi argument u HTML-dokument na mjestu gdje se fukncija poziva
  
• 
  window.alert – funkcija ispisuje niz znakova koji se proslijedi kao prvi argument u zasebnom prozoru i ne dopušta nastavak izvršavanja programa dok se ne zatvori.
  

I.6.Sigurnost

Kad god se programi (kao što su skripte JavaScripta, Java-programi ili makronaredbe programa Microsoft Word) nalaze u odijeljenim dokumentima, osobito u dokumentima koji se šalju Internetom, prisutna je opasnost od virusa i drugih zloćudnih programa. Tvorci JavaScripta bili su svjesni tih sigurnosnih problema i onemogućili su programima JavaScripta postupke koji bi za posljedicu imali brisanje ili izmjenu podataka na korisnikovu računalu. Kao što je već naglašeno, programi JavaScripta ne mogu pristupati lokalnim datotekama, tj. ne mogu zaraziti druge datoteke ili brisati postojeće.

Isto tako, programi JavaScripta ne mogu obavljati mrežne radnje, tj. JavaScript može učitavati adrese web-sadržaja (URL) i slati podatke iz HTML-obrazaca poslužiteljskim skriptama, ali ne može ostvarivati neposredne veze s drugim računalima i tako pokušati pogoditi lozinku na nekom lokalnom poslužitelju.

Međutim, budući da su preglednici složeni programi, u početku implementacija interpretera JavaScripta nije uvijek poštivala propisane standarde. Na primjer, preglednik Netscape 2 (objavljen 1995. godine) omogućavao je pisanje programa JavaScript koji je automatski dohvatio adresu elektroničke pošte bilo kojeg posjetitelja određene stranice i u njegovo ime, bez njegove potvrde, poslao e-mail. Taj je propust, uz niz drugih, manje opasnih, popravljen. Međutim, ne postoji jamstvo da se neće otkriti novi propusti u implementaciji JavaScripta i tako omogućiti zlonamjernicima iskorištavanje tih propusta.

II.Upoznavanje s jezikom

1. 
   
   

II.1.Način pisanja

JavaScript se može pisati prema standardu Unicode, no preporuča se pisanje prema standardu ASCII, osim u komentarima i nizovima znakova.

Napomena

Velika i mala slova su najčešći uzrok početničkih pogrešaka u JavaScriptu.

Velika i mala slova

Prilikom pisanja sintakse JavaScripta važno je zapamtiti:

JavaScript razlikuje velika i mala slova!

To znači da se ključne riječi, varijable, funkcije i drugi nazivi moraju pisati dosljedno s obzirom na velika i mala slova. Tako se, na primjer, ključna riječ mora pisati while, a ne While ili WHILE. Također, varijable stranaa, stranaA, StranaA i STRANAA četiri su različite varijable.

Napomena

Iznimka od ovog načina pisanja su nazivi svojstava objekata DOM-a koji se svi pišu malim slovima, npr. onclick.

Radi izbjegavanja pogrešaka, preporuča se dosljednost prilikom korištenja malih i velikih slova u nazivima. Dobra praksa je slijediti način imenovanja koji se već koristi za nazive postojećih funkcija i svojstava u JavaScriptu, a to je tzv. camelCasing. Nazivi se pišu malim slovima, a ako naziv sadrži dvije ili više riječi, druga i svaka sljedeća riječ počinju velikim slovom (npr. getElementById).

2.1.2. Znak za završetak naredbe

Znakom kojim se u JavaScriptu označava kraj naredbe je točka-zarez (;). Točka-zarez nije obavezan znak, ali se njegova uporaba preporuča. Naime, JavaScript ubacuje točku-zarez na kraju retka ako pojedini kôd izgleda kao naredba, što u nekim situacijama nije to što je programer htio. Na primjer kôd:

JavaScript će interpretirati kao:

(dakle ubačena je točka-zarez na kraju retka), iako je programer htio:

1. 
   Komentari
   

U JavaScriptu se komentari označavaju jednako kao i u programskim jezicima C i C++. Bilo koji tekst između // i kraja retka smatra se komentarom. Bilo koji tekst između znakova /* i */ je komentar i zanemaruje se. Druga vrsta komentara može se protezati u više redaka, ali se ne smiju ugnježđivati. Evo nekoliko ispravnih komentara:

2. 
   Varijable
   

Nazivi varijabli i funkcija trebaju zadovoljavati ovo pravilo: prvi znak u nazivu treba biti slovo, podcrta ( _ ) ili dolarski znak ($). Znakovi koji slijede mogu biti slova, brojevi, podcrta ili dolarski znak. Primjer su ispravnih naziva:

Nazivi ne smiju biti isti kao ključne riječi. U tablici je naveden popis ključnih riječi u JavaScriptu koje treba izbjegavati kod imenovanja varijabli:

break	do	if	switch	typeof
case	else	in	this	var
catch	false	instanceof	throw	void
continue	finally	new	true	while
default	for	null	try	with
delete	function	return

Ova se imena trenutačno ne rabe u JavaScriptu, ali ih standard ECMAScript v3 navodi kao moguće ključne riječi u budućnosti, pa bi i njih trebalo izbjegavati:

Abstract	double	goto	native	static
boolean	enum	implements	package	super
byte	export	import	private	synchronized
char	extends	int	protected	throws
class	final	interface	public	transient
const	float	long	short	volatile

Također treba izbjegavati nazive globalnih varijabli i funkcija predefiniranih u JavaScriptu:

arguments	encodeURI	Infinity	Object	String
Array	Error	isFinite	parseFloat	SyntaxError
Boolean	escape	isNaN	parseInt	TypeError
Date	eval	Math	RangeError	undefined
Decode€URI	EvalError	NaN	ReferenceError	unescape
decodeURIComponent	Function	Number	RegExp	URIError

II.2.Uključivanje JavaScripta u HTML-dokument

JavaScript se ovako može uključiti u HTML-dokument:

• 
  pisanjem kôda između oznaka
  
• 
  iz vanjske datoteke uporabom atributa src u oznaci . Proizvoljan broj JavaScript-naredbi obrađuje se prilikom učitavanja HTML-dokumenata i to redom kojim su napisne. Element