JavaScript - Početak rada

Početak rada sa JavaScript

U ovoj lekciji ćete naučiti kako je jednostavno dodavati interaktivnost na web stranicu pomoću JavaScript. Prije nego što započnemo sa učenjem JavaScript pogledajte kurs » HTML5 - CSS3 kako biste mogli ispratiti ovaj kurs neometano. Ako tek ulazite u IT svijet, počnite sa kursom » HTML5 - CSS3, pa tek onda krenite sa učenjem najpopularnijeg client-side jezikom.


Dodavanje JavaScript na web stranicu

Postoje tri načina za dodavanje JavaScript na web stranicu:

  • Umetanje JavaScript koda između tagova <script> i </script>.
  • Izradom eksterne JavaScript datoteke sa .js ekstenzijom, a zatim je učitavate unutar stranice kroz atribut src taga <script>.
  • Postavljanje JavaScript koda direktno unutar HTML oznake pomoću atributa posebnih tagova kao što su: onclick, onmouseover, onkeypress, onload itd.

Sljedeći dio će detaljno opisati svaki od ovih postupaka:


Ugrađivanje JavaScript koda u stranicu

JavaScript kod možete ugraditi direktno u svoje web stranice tako da ga postavite između tagova <script> i </script>. Tag <script> ukazuje pretraživaču da sadržaj treba tumačiti kao izvršnu skriptu, a ne kao HTML. Pogledajmo primjer: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ugrađivanje JavaScript</title>
</head>
<body>
    <script>
    var greet = "Hello World!";
    document.write(greet); // Ispisuje: Hello World!
    </script>
</body>
</html>

JavaScript kod u primjeru jednostavno će ispisati tekstualnu poruku na web stranici. Naučićete šta svaka od ovih JavaScript izjava znači u narednim lekcijama.


Pozivanje eksterne JavaScript

JavaScript kod možete smjestiti i u zasebnu datoteku s .js nastavkom, a zatim je pozvati u svoju stranicu kroz atribut src oznake <script>, ovako: 

<script src="js/hello.js">

Ovo je korisno ako želite da iste skripte budu dostupne u više dokumenata. To vam štedi od ponavljanja istog posla iznova i iznova, a vašu web stranicu čini mnogo lakšom za održavanje. Napravimo JavaScript datoteku pod nazivom "hello.js" i u nju stavimo sljedeći kod: 

// Funkcija ispisuje poruku
function sayHello() {
    alert("Hello World!");
}

// Poziva funkciju da kline na dugme
document.getElementById("myBtn").onclick = sayHello;

Sada možete pozvati ovu eksternu JavaScript datoteku na web stranici koristeći <script> oznaku, ovako: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pozivanje eksternog JavaScript fajla</title>        
</head>
<body>    
    <button type="button" id="myBtn">Click Me</button>
    <script src="js/hello.js"></script>
</body>
</html>

Postavljanje JavaScript koda u jednu liniju

Možete staviti i JavaScript kod u red tako da ga ubacite direktno u HTML tag koristeći posebne atribute oznaka kao što su:onclick, onmouseover, onkeypress, onload itd. Međutim, trebali biste izbjegavati stavljanje velike količine JavaScripta koda u jedan red, jer on pretrpava HTML sa JavaScript-om i čini vaš JavaScript kod teškim za održavanje. Pogledajmo primjer: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript u redu</title>        
</head>
<body>    
    <button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

Ovaj primjer pokazaće vam poruku upozorenja kada kliknete na dugme.


Postavljanje skripte u HTML dokumentu

Element <script> može se smjestiti između taga <head> ili <body> HTML dokumenta. Ali u idealnom slučaju, skripte treba postaviti na kraj HTML dokumenta, neposredno prije zatvaranja taga </body>, to će učiniti da se vaše web stranice brže učitavaju, jer sprječava prepreku početnog prikazivanja stranica. Svaka <script> oznaka blokira postupak prikazivanja stranica dok u potpunosti ne preuzme i izvrši JavaScript kod, pa će ih postavljanje u dijelu zaglavlja (tj. <head> element) dokumenta bez ikakvog razloga usporiti rad vaše web stranice.


Razlika između klijenta Client-side i poslužitelja Server-side Scripting

Skriptne jezike na strani klijenta kao što su: JavaScript, VBScript itd. tumači i izvršava web pretraživač, dok se skriptni jezici na strani poslužitelja kao što su: PHP, ASP, Java, Python, Ruby itd. pokreću na web pretraživaču i izlaznu vrijednost šalje nazad u web pretraživač u HTML formatu. Skriptiranje na strani klijenta ima brojne prednosti u odnosu na tradicionalni scenario na strani poslužitelja.

Na primjer, možete koristiti JavaScript da provjerite da li je korisnik unio nevažeće podatke u polja obrazca i prikazao obaviještenje o greškama pri unosu u stvarnom vremenu prije slanja obrazca na web-poslužitelj radi konačne provjere podataka i dalje obrade kako bi se spriječilo nepotrebna iskorištavanja propusnosti mreže i iskorištavanje resursa sistema. Takođe je odgovor sa skripte na strani poslužitelja sporiji u odnosu na skriptu na strani klijenta, jer se skripte na strani poslužitelja obrađuju na udaljenom računaru, a ne na lokalnom računalu korisnika.