IZBORNIK HOME FORUM ACCESS EXCEL WORD KAZALO
   
  Kazalo - sadržaj tema
  Uvod u JavaScript
1 Načini ispisa
2 Kontrola prozora
2a Sintaxa
3 Kontrola događaja
3a Kontrola toka
4 Detekcija podataka
5 Efekti s podlogom
6 Efekti s tekstom
7 Efekti sa slikom
8 Razna rješenja
9 Rad s formama
10 Razni primjeri
11 Ključne riječi
12 Događaji
 
.17
.
AutoCad tutoriali

-

-
 

Adsense sponzor



JS - JAVA SCRIPT za početnike i neznalice - JAVA SCRIPT for dummies

JS - UVOD u JAVASCRIPT

Search This Web Site

Adsense sponzor






JAVA SCRIPT UVOD

Nakon uvoda u HMTL (HTM), logičan slijed učenja vodi nas prema Java Scriptu, CSS itd.
Kako ovaj tutorial pretpostavlja bar elementarno poznavanje programiranja u nekom od programskih jezika, to se ovdje nećemo šire baviti osnovama programiranja i sintaksom programskog jezika, već ćemo kroz praktične primjere prikazati uporabu Java Scripta. U ovom tutorialu sve oznake datoteka koje uočite sa extenzijom "*.htm" smatrajte kao "*.html"
 

UKRATKO O JAVI

Java je objektno orijentirani programski jezik, izveden iz C i C++ jezika, namijenjen razvoju aplikacija za sisteme na računalnim mrežama.
Aplikacija napisana u Javi prenosiva je između raznih strojnih platformi, što Javu i čini specifičnom.
U Javu su ugrađeni brojni sigurnosni mehanizmi: računalna memorija nije izravno dostupna niti jednom Java programu; svi bajt kodovi prenešeni mrežom se provjeravaju u cilju pronalaženja neželjenih izmjena na putu od servera do klijenta; onemogućeno je da program-uljez kloniranjem klasa unese destruktivni kod u program; itd.

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

UKRATKO O JAVASCRIPTU   

JavaScript je kompaktan i objektno baziran skriptni jezik za razvoj klijent-server Internet aplikacija. Programski kod upisuje se direktno u HTML stranicu i omogućuje nam izradu dinamičnih web stranica.

JavaScript podsjeća na Javu i podržava mnoge Javine izraze, sintaksu i konstrukciju kontrole toka. Ima mali broj tipova podataka (numeričke, boolean i string) te podržava funkcije ali bez posebnih zahtjeva za deklariranjem. Dozvolite u Vašem browseru PopUp prozore za pregled ovih tutoriala

Komparaciju između JavaScripta i Jave možemo vidjeti u donjoj tablici:

JavaScript Java
Ne kompilira se, već samo interpretira kod klijenta. Kompilira se na serveru prije izvršenja kod klijenta.
Objektno baziran. Koristi postojeće objekte, bez klasa ili nasljeđa. Objektno orjentiran. Appleti sadrže objekte sastavljene od klasa sa nasljeđem.
Kod je integriran u HTML. Applet je izdvojen iz HTML-a.
Tip varijable se ne deklarira. Tip varijable mora biti deklariran.
Dinamička povezanost. Objektne referense provjeravaju se run-time. Statička povezanost. Objektne reference moraju postojati u vrijeme kompiliranja.
Zaštićen. Ne može zapisivati na hard disk. Zaštićen. Ne može zapisivati na hard disk.

UKRATKO O VARIJABLAMA, TIPOVIMA, KONVERZIJI I OPERATORIMA

NAZIVI VARIJABLI

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

TIPOVI PODATAKA

  • brojevni (npr: 42, 3.14159 ...)
  • logički (Boolean) - (true / false)
  • stringovi (npr: "Dobar dan!")
  • null (specijalne ključne riječi s null vrijednošću)


SPECIJALNI KARAKTERI

U stringovima možete koristiti slijedeće specijalne karaktere:

\b = jedno mjesto lijevo (backspace)
\f = jedan red dolje (form feed)
\n = na početak novog reda (new line character)
\r = return (carriage return)
\t = tabulator (tab)


KONVERZIJA PODATAKA

JavaScript je slobodan tip jezika i ne zahtjeva posebno deklariranje tipa podataka, te će se konverzija obaviti automatski.

Principijelno, varijable deklariramo na slijedeći način:

var broj1 = 42
var tekst = "Dobar dan!"

ali možemo i ovako:

broj1 = 42
tekst = "Dobar dan!"

U kombinaciji broja i stringa, JavaScript konvertira broj u string. Na primjer:

x = "Upisali ste broj " + 42
y = 42 + " je vaš odgovor."

Za konverziju stringa u broj, koristimo slijedeće funkcije:

  • EVAL - procjenjuje string i ako je moguće pretvara ga u broj;
  • parseINT - konvertira string u integer specificirane base, ako je moguće;
  • parseFLOAT - konvertira 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
- zbrajanje
- oduzimanje
- množenje
- dijeljenje
- ostatak dijeljenja X sa Y (modul)

- postfiksno povećanje za 1
- prefiksno poveć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 UVJETA

Operacija Objašnjenje
X && Y
X || Y
!X
- i X i Y imaju istinitu vrijednost (logičko "I")
- ili X ili Y imaju istinitu vrijednost (logičko "ILI")
- X ima neistinitu vrijednost (logičko "NE")


OPERATORI PRIDRUŽIVANJA

Operacija Objašnjenje
X = Y
X += Y
X -= Y
X *= Y
X /= Y
X %= Y
- varijabli X pridružuje se vrijednost Y
X = X + Y
X = X - Y
X = X * Y
X = X / Y
X = X % Y (mod dijeljenja)


UVJETNI IZRAZI

Uvjetnim izrazom možemo prihvatiti jednu od dvije vrijednosti navedene u uvjetu. Evo sintakse i primjera:

(uvjet) ? izraz1 : izraz2
status = (godina >= 18) ? "odrasli" : "djeca"

Ako je uvjet istinit (true), izraz ima vrijednost izraz1, u suprotnom ima vrijednost izraz2.


UKRATKO O KONTROLI TOKA I ISKAZIMA

IF...ELSE struktura:

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



Primjer s IF... strukturom:

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

var datum = new Date();   /* varijabli datum pridružuje tekući datum */
var sati = datum.getHours();  
/* u varijablu sati prihvaća tekući sat */

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

-->
</SCRIPT>
/* oznaka kraja JavaScripta */

Gornji primjer, zavisno od doba dana, postavlja odgovarajuću podlogu dokumenta i ispisuje poruku u HTML dokumentu.
Kao što već uočavate, unutar zagrada naredbe
document.write(...) možete postaviti bilo koji HTML tag, tekst ili sve to kombinirati s vrijednostima svojih varijabli ili već postojećih funkcija u JavaScriptu.

FOR... petlja:

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

Gornji primjer će u HTML dokumentu, na poziciji gdje je postavljen, ispisati:
   Vrijednost i = 1    Vrijednost i = 2    ...    Vrijednost i = 10

FOR...IN petlja:

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

WHILE... petlja:

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

DO...WHILE... petlja:

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

WITH... iskaz:

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

Na primjer, matematičkim funkcijama mora prethoditi objekt Math.
Slijedeći primjer podrazumijeva 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.
Donji primjer prekida while petlju kada je i=3 i vraća vrijednost (i*x)

function mojaFunkcija(x) {
	var i = 0 
	while (i < 6) { 
		if (i == 3) {
			break
		}
		else {
			i++ 
		}
	}
	 return i * x 
}

CONTINUE iskaz:

prekida izvršenje bloka u while ili for petlji i nastavlja izvršenje u narednom izrazu.
Ne prekida kompletnu petlju. U while petlji, skaće nazad na "uvjet". U for petlji, skaće na "update" izraz.
Donji primjer while petlje aktivira continue iskaz kada je vrijednost i=3, pa će n imati vrijednosti 1, 3, 7 i 12.

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

FUNCTION i RETURN iskaz:

primjer 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:

definira novi objekt na bazi postojećeg.
Donji primjer varijabli datum pridružuje tekući datum:

var datum = new Date();

THIS iskaz:

referensa na tekući objekt.
Donji primjer definira 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:

definiranje varijabli (nije obavezno).

var broj1 = 0, tekst1="proba"


UKRATKO O OBJEKTIMA, METODAMA, SVOJSTVIMAI DOGAĐAJIMA(obavezno pogledajte ove linkove)

Svaka web stranica ima slijedeće objekte:

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

Evo primjera nekih 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 zadnjih 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    //gubm 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 ovdje"
  • document.mojaforma.Button1.name = Gumb1
  • 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 simuliraju događaje.
Npr., button objekt ima click metodu koja simulira klik miša na tom dugmetu.

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/promijeni vrijednost "text", "textarea" ili izabranog elementa

onChange

focus

uđe u fokus nekog elementa forme

onFocus

load

učita stranicu u browser

onLoad

mouseover

pomjera 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


UKRATKO O IMPLEMENTIRANJU JAVASCRIPTA U HTML

Programski kod napisan u JavaScriptu možemo implementirati u HTML na dva načina:

1. način implementiranja
podrazumijeva da programski kod JavaScripta upišemo direktno u svoj HTML dokument. Evo primjera s objašnjenjem (crvenom bojom označene su naredbe HTML jezika a plavom JavaScripta):

Kod u HTML dokumentu Objašnjenje Rezultat
u browseru
<HTML>
<HEAD></HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("
Modificirano:"+document.lastModified+"<BR>")
-->
</SCRIPT>

</BODY>
</HTML>



početak JavaScripta


upis u HTML...

kraj JavaScripta

Modificirano: 10/20/1999 23:44:38 

Gornji primjer će na postavljenoj poziciji unutar HTML dokumenta ispisati podatak o zadnjoj izmjeni dokumenta.
Iskaz
document.write(...) je naredba JavaScripta koja osigurava ispis podataka u HTML dokument.
Iskaz
document.lastModified je funkcija JavaScripta koja daje podatak o datumu zadnje izmjene dokumenta.

2. način implementiranja
podrazumijeva da programski kod JavaScripta upišemo u zasebnu tekstualnu datoteku, kojoj pridružimo ekstenziju .JS i onda u svom HTML dokument navedemo referensu na tu datoteku. Evo primjera:

Kod u HTML dokumentu Kod u PROG-KOD.JS datoteci Rezultat
u browseru
<HTML>
<HEAD>...</HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript" SRC="prog-kod.js">
</SCRIPT>

</BODY>
</HTML>
<!--
document.write(
"Modificirano:"+document.lastModified+"<BR>")
-->
Modificirano: 10/20/1999 23:44:38 

Gornji primjer radi isto što i prethodni, s tim da JavaScript kod nije upisan u HTML već u zasebnu datoteku.


PODSJETNIK ZA SPECIJALNE ZNAKOVE:

Imate li problema sa dobivanjem specijalnih znakova (|{}[]<>) na tastaturi, poslužite se donjom tablicom:
(
ATL i Alt Gr su tipke na tastaturi a ASCII je kod koji se utipkava na numeričkoj tastaturi)

Specijalni znak ALT + ASCII Alt Gr + slovo
|
{
}
[
]
<
>
124
123
125
133
135
74
76
W
B
N
F
G
,
.

KOMENTARI U JAVASCRIPTU

Za komentar do kraja reda ili onaj na kraju nekog iskaza
(npr, iza znaka
;) koristite oznaku: // vaš komentar...

Za komentar kroz više redova ili uglavljeni unutar neke strukture
(npr, unutar
{ } zagrada) koristite oznake: /* vaš komentar...*/

Ako niste najsigurniji koji komentar treba staviti,
koristite "uglavljeni" komentar: /* vaš komentar...*/

Ovdje su navedeni samo neki podaci, koje sam smatrao bitnima za uvod u JavaScript i razumijevanje programskog koda na koji ćete nadalje nailaziti u primjerima. Također downloadajte ovaj ZIP => PowerPoint datoteku i pogledajte uvod u JS
Više o samoj Javi i JavaScriptu možete pogledati na adresi JAVABOUTIQUE

izvorni autor tutoriala: Damir Tomsic ( zahvaljujem se prijatelju Damiru na ustupanju ovih materijala)

Adsense sponzor






 Ova web stranica koristi COOKIES - COPYRIGHT - 2006 - 2017 - IvanC - ic.ims.hr