Mala škola Java Script-a sa primerima - uvod

Nakon uvoda u HMTL, prirodan redosled stvari nameće uputstvo za upotrebu Java Script-a.

Java je objektno orijentisani programski jezik, izveden iz C i C++ jezika, namenjen razvoju aplikacija za sisteme na računarskim mreŽama.
Aplikacija napisana u Javi prenosiva je između različitih platformi, što Javu i čini specifičnom.
U Javu su ugrađeni brojni sigurnosni mehanizmi: memorija nije dostupna niti jednom Java programu; svi bajt kodovi preneseni mrežom se proveravaju u cilju pronalaženja neželjenih izmena na putu od servera do klijenta; onemogućeno je da program-uljez kloniranjem klasa unese destruktivni kôd u program; itd.

Pojavom Jave došlo je do znatnog unapređenja komunikacije u Internet svetu.
Osim što su se otvorile mogućnosti interaktivne komunikacije, i web stranice poprimile su dinamičniji oblik...

Java Script je kompaktan i objektno zasnovan skriptni jezik za razvoj klijent-server Internet aplikacija.
Programski kôd upisuje se direktno na HTML stranicu i omogućava izradu server-baziranih aplikacija poput CGI (common gateway interface) programa.
Java Script podseća na Java-u i podržava mnoge Java-ine izraze, sintaksu i konstrukciju kontrole toka. Poseduje relativno mali broj tipova podataka: numeričke, boolean i string vrednosti. Takođe, podržava funkcije, ali bez posebnih zahteva za deklarisanjem.

Poređene Java Script-a i Java-e

Java Script	Java
Ne kompajilira se, već samo interpretira kod klijenta.	Kompajlira se na serveru pre izvršenja kod klijenta.
Objektno zasnovan. Koristi postojeće objekte, bez klasa ili nasleđa.	Objektno orjentisan. Appleti sadrže objekte sastavljene od klasa sa nasleđem.
Kôd je integrisan u HTML.	Applet je izdvojen iz HTML-a.
Tip promenljive se ne deklariše.	Tip promenljive mora biti deklarisan.
Dinamička povezanost. Objektne reference proveravaju se u run-time.	Statička povezanost. Objektne reference moraju postojati u vreme kompajliranja.
Zaštićen. Ne može zapisivati na hard disk.	Zaštićen. Ne može zapisivati na hard disk.

 

NAZIVI PROMENLJIVIH

- prvi znak mora biti slovo engleske abecede ili znak potcrtavanja ("_")
- mogu sadržati brojeve i slova engleske abecede
- velika i mala slova se razlikuju, ali, uobičajeno je da se pišu malim slovima!
- ključne reči (for, if, else, class, byte, int...) ne mogu se koristiti u nazivu identifikatora

TIPOVI PODATAKA

• numerički (npr: 3.14159 ...)
• logički (Boolean) - (true / false)
• stringovi (npr: "Zdravo, svete!")
• null (specijalne ključne reči s null vrijednošću)

SPECIJALNI KARAKTERI

U stringovima je dozvoljeno koristiti sledeće specijalne karaktere:

• \b = pomeraj za jedno mesto ulevo (backspace)
• \f = pomeraj jedan red dole (form feed)
• \n = na početak novog reda (new line character)
• \r = return (carriage return)
• \t = tabulator (tab)

KONVERZIJA PODATAKA

JavaScript nije strogo tipiziran i ne zahteva posebno deklarisanje tipa podataka, te će se konverzija obaviti automatski.

Osnovni način za deklarisanje promenljivih:

var broj1 = 42
var tekst = "Zdravo, svete!"

ali i:

broj1 = 42
tekst = "Zdravo, svete!"

Generalno, u kombinaciji broja i stringa, Java Script konvertuje broj u string. Na primer:

x = "Upisali ste broj " + 54
y = 54 + " je odgovor na Vas unos."

Za konverziju stringa u broj, koriste se funkcije:

• EVAL - ocenjuje string i ako je moguće pretvara ga u broj;
• parseINT - konvertuje string u integer, ako je moguće;
• parseFLOAT - konvertuje string u floating-point broj, ako je moguće.

.
ARITMETIČKI OPERATORI

Operacija	Objašnjenje
X + Y X - Y X * Y X / Y X % Y X++ ++X X-- --X	- sabiranje - oduzimanje - množenje - deljenje - ostatak deljenja X sa Y (modul) - postfiksno uvećanje za 1 - prefiksno uvećanje za 1 - postfiksno umanjenje za 1 - prefiksno umanjenje za 1

RELACIJSKI OPERATORI

Operacija	Objašnjenje
X > Y X < Y X >= Y X <= Y X == Y X != Y	- X veće od Y - X manje od Y - X veće ili jednako Y - X manje ili jednako Y - X jednako Y - X nije jednako Y

OPERATORI USLOVA

Operacija	Objašnjenje
X && Y X || Y !X	- konjukcija (logičko "I") - disjunkcija (logičko "ILI") - negacija (logičko "NE")

OPERATORI PRIDRUŽIVANJA

Operacija	ObjaŠnjenje
X = Y X += Y X -= Y X *= Y X /= Y X %= Y	- promenljivoj X pridružuje se vrednost Y X = X + Y X = X - Y X = X * Y X = X / Y X = X % Y (ostatak pri celobrojnom deljenju)

USLOVNI IZRAZI

Uslovnim izrazom možemo prihvatiti jednu od dve vrednosti navedene u uslovu. Evo sintakse i primera:

(uslov) ? izraz1 : izraz2
status = (godina >= 7) ? "placaju" : "besplatno"

Ako je uslov istinit (true), izraz ima vrednost izraz1, u suprotnom ima vrednost izraz2.

IF...ELSE struktura:

if (izraz1){
    ...iskazi...
}
else if (izraz2) {
    ...iskazi...
}
else {
    ...iskazi...
}


Primer s IF... strukturom:

<SCRIPT LANGUAGE="JavaScript">   /* oznaka početka Java Scripta */
<!-- /* sve unutar ovog taga je nedostupno browserima koji ne podržavaju Java Script */

var datum = new Date();   /* promenljivoj datum pridružuje tekući datum */
var sat = datum.getHours();   /* u promenljivu sat prihvata tekući čas */

if (sat > 5 && sat < 13){   /* logička provera */
    document.write('<BODY BGCOLOR="blue">Dobro jutro!') /* BODY i ispis poruke */
}
if (sat > 12 && sat < 19){   /* ako je čas veće od 12 i manje od 19 */
    document.write('<BODY BGCOLOR="green">Dobar dan!')
}
if (sat > 18 || sat < 6){   /* ako je čas veći od 18 ili manji od 6 */
    document.write('<BODY BGCOLOR="silver">Dobro veče!')
}

-->
</SCRIPT> /* oznaka kraja Java Scripta */

Navedeni primer postavlja odgovarajuću pozadinu i ispisuje poruku u HTML dokumentu u zavisnosti od tekućeg sata.
Unutar zagrada naredbe document.write(...) može se postaviti bilo koji HTML tag, tekst ili sve to kombinovati s vrednostima svojih promenljivih ili već postojećih funkcija u JavaScriptu...

FOR... ciklus:

<SCRIPT LANGUAGE="JavaScript">
<!--
    for (var i = 1; i <= 10; i++){   /* i=1; vrti ciklus sve dok je i<=10; i=i+1 */
        document.write('Vrednost i = ' + i); /* u HTML ispisuje: Vrednost i = ... */
    }
-->
</SCRIPT>

Navedeni primer će u HTML dokumentu, na poziciji gde je postavljen, ispisati:
   Vrednost i = 1    Vrednost i = 2    ...    Vrednost i = 10

FOR...IN ciklus:

for (promenljiva in objekt) {
	... iskazi...
}

WHILE... petlja:

while (izraz){
    ...iskazi...;
}

DO...WHILE... petlja:

do {
    ...iskazi...;
} while (izraz);

WITH... iskaz:

with (objekt) {
	...iskazi...
}

Na primer, matematičkim funkcijama mora prethoditi objekat Math.
Sledeći primer podrazumeva Math ispred PI, COS() i SIN():
	with (Math) {
		a = PI / 2;
		x = cos(a);
		y = sin(a);
	} 

BREAK iskaz:
prekida tekuću while ili for strukturu i nastavlja iza nje.

i = 0;
n = 0;
while (i < 5) { 
	i++ 
	if (i == 3) {
		continue 
	}
	else {
		n += i 
	}
} 

FUNCTION i RETURN iskaz:
primer funkcije koja izračunava kvadrat broja:

function kvadratBroja( x ) {
	return x * x 
} 
---
x = kvadratBroja(5)   /* poziv funkcije */
document.write("Kvadrat od 5 je " + x)
---
Kvadrat od 5 je 25

NEW  iskaz:
definiše novi objekt na bazi postojećeg.
Donji primer promenljivih datum pridružuje tekući datum:

var datum = new Date();

THIS iskaz:
referenca na tekući objekt.
Donji primer definiše da se klikom na objekt poziva funkcija slucajniBroj() a kao parametar prenosi se naziv tekuće forme (this.form):

ONCLICK="slucajniBroj(this.form)"

VAR iskaz:
definisanje promenljivih (opcionalno).

var broj1 = 0, tekst1="proba"

Svaka web stranica poseduje objekte:

• window: top-level objekt; sadrži svojstva primenjiva na celokupan prozor,
• location: sadrži svojstva tekuće URL,
• history: sadrži svojstva prethodno posećenih URL,
• document: sadrži svojstva sadržaja tekućeg dokumenta, kao što su naziv (title), boja pozadine (bgcolor) i forme.

Primer svojstava:

• location.href = "http://www7.ewebcity.com/1osb/proba.html" //lokacija dokumenta
• document.title = "Probni dokument" //naziv dokumenta (title)
• document.fgColor = #000000   //boja slova
• document.bgColor = #FFFFFF    //boja podloge
• history.length = 7   //koliko poslednjih dokumenta da "pamti" u history

Browser može kreirati objekte bazirane na sadržaju stranice, npr.:

• document.mojaforma   //forma
• document.mojaforma.Check1    //check polje na formi
• document.bojaforma.Button1    //taster na formi

Oni mogu imati svojstva kao što su:

• document.mojaforma.action = "http://www7.ewebcity.com/1osb/obrada.html"
• document.mojaforma.method = get
• document.mojaforma.length = 5
• document.mojaforma.Button1.value = "Klikni ovde"
• document.mojaforma.Button1.name = taster1
• document.mojaforma.text1.value = "sadržaj tekst polja"
• document.mojaforma.text1.name = TekstPolje1
• document.mojaforma.Check1.defaultChecked = true
• document.mojaforma.Check1.value = on
• document.mojaforma.Check1.name = CheckPolje1

Mnogi objekti imaju metode koje emuliraju događaje.
Npr, button objekt ima click metodu koja emulira klik miša na tasteru...

Event (događaj)	Nastaje kada korisnik...	Event Handler
blur	izađe iz fokusa elementa forme	onBlur
click	klikne na elementu forme ili linku	onClick
change	podesi/promeni vrednost "text", "textarea" ili izabranog elementa	onChange
focus	uđe u fokus nekog elementa forme	onFocus
load	učita stranicu u browser	onLoad
mouseover	pomera pokazivač miša preko linka ili "anchora"	onMouseOver
select	izabere "input" polje elementa forme	onSelect
submit	izvrši "submit" (slanje) forme	onSubmit
unload	"napusti" stranicu	onUnload

Za komentar do kraja reda ili onaj na kraju nekog iskaza (npr, iza ;) koristi se oznaka //...
Za komentar kroz više redova ili umetnut unutar neke strukture (npr, unutar { } zagrada) koristi se /*.....*/