03 - Osnove JavaScript-a

JavaScript je jedan od tri jezika koje svaki web developer mora da nauči:

  1. HTML za kreiranje sadržaja web stranica
  2. CSS za oblikovanje izgleda web stranica
  3. JavaScript za programiranje ponašanja web stranica

Šta radi JavaScript?

  • Može da menja HTML elemente kroz pristup HTML DOM-u (Document Object Model)
    • document.getElementById("demo").innerHTML = "Hello JavaScript";
  • Može da menja skoro sve HTML atribute
    • var image = document.getElementById('myImage');
      image.src = "pic_bulboff.gif";
  • Može da menja CSS - HTML stilove
    • document.getElementById("demo").style.fontSize = "25px";
  • Radi validaciju unetih podataka
    • x = document.getElementById("numb").value;
      if (isNaN(x) || x < 1 || x > 10) {
          text = "Input not valid";
      } else {
          text = "Input OK";
      }

Kako i gde smestiti JavaScript?

  • U HTML dokumentu JavaScript se smešta između <script> i </script> tagova
  • JavaScript se može smestiti u <body> ili u <head> delu HTML dokumenta ili u oba
  • Dobra praksa je da se sav JavaScript kod smesti na jedno mesto
  • Ukoliko je JavaScript kod na kraju <body> dela to skraćuje vreme potrebno da se web stranica prikaže u pregledaču
  • Često se JavaScript kod smešta u funciju koja se može pozvati kada se desi neki događaj
  • JavaScript kod se, takođe, može smestiti i u eksternu datoteku koja ima nastavak .js
    • <script src="/datoteka.js"></script>
  • Referenca za eksternu datoteku se može postaviti i u <head> i u <body> deo
  • Eksterne skript datoteke ne mogu sadržati <script> tagove

JavaScript izlaz

  • JavaScript nema posebne izlazne funkcije kao što je npr. print
  • JavaScript može da manipuliše HTML elementima
    • document.getElementById("demo").innerHTML = "Novi sadrzaj.";
  • Ispis u HTML dokument (ako se izvrši na već učitan dokument zameniće sav postojeći sadržaj)
    • document.write(Date());
  • Ispis u konzolu
    • console.log(promenljiva);

JavaScript identifikatori

  • Jedinstvena imena koja se koriste za promenljive, funkcije i objekte
  • Mogu da sadrže unikod slova, cifre, donju crtu i znak za dolar
  • Ne mogu početi cifrom
  • Ne smeju se koristiti rezervisane reči
  • Razlikuju se mala i velika slova!
  • Uobičajeno je da se koriste camelCase imena

JavaScript naredbe

  • Uobičajeno je da se JavaScript naredbe završavaju sa ; ali nije obavezno
  • Ako se koristi ; moguće je grupisati više naredbi u jednom redu
  • Naredbe, da bi se izvršile zajedno, se grupišu u blok korišćenjem velikih zagrada
  • JavaScript ignoriše višestruke razmake
  • Dugačke naredbe se mogu prelomiti i to najčešće iza operatora ili zareza
  • Ako treba da se napravi prelom reda u sred stringa koristi se obrnuta kosa crta

JavaScript komentari

  • Komentar u jednom redu počinje sa //
  • Sav tekst od // do kraja reda se ignoriše
  • Komentar u više redova počinje sa /* i završava se sa */
  • Sav tekst između /* i */ se ignoriše

JavaScript promenljive

  • Promenljive se koriste za čuvanje vrednosti i za izraze
  • Operator dodele je običan znak jednakosti
  • Promenljive se deklarišu korišćenjem ključne reči var
    • var imeAuta;
  • Moguća je istovremena deklaracija i dodela vrednosti
    • var imeAuta="Neki auto";
  • Može se istovremeno deklarisati više promenljivih tako što se odvoje zarezima
  • Promenljiva koja je deklarisana bez dodele vrednosti ima vrednost undefined
  • Ako se promenljiva ponovo deklariše ostaje joj stara vrednost

JavaScript tipovi podataka

  • String, Number, Boolean, Array, Object, Null, Undefined
  • JavaScript ima dinamičke tipove podataka, tj. ista promenljiva se može koristiti za smeštanje različitih tipova vrednosti
  • Stringovi
    • String je niz znakova, tekst
    • String vrednost se piše između navodnika ili apostrofa
    • Moguće je korišćenje apostrofa u stringu sa navodnicima i obratno
    • Specijalni znakovi:
      • \' - apostrof
      • \" - navodnici
      • \\ - obrnuta kosa crta
      • \n - novi red
      • \r - povratak na početak reda
      • \t - tab
      • \b - backspace
      • \f - nova strana
    • Dužina stringa - duzina = txt.length;
    • JavaScript broji pozicije znakova u strigu od nule
    • String metode
      • charAt() - Vraća znak sa određene pozicije u stringu
        • str.charAt(0);
      • charCodeAt() - Vraća unikod kod znaka sa određene pozicije u stringu
        • str.charCodeAt(0);
      • concat() - Spaja, tj. nadovezuje, dva ili više stringova
        • text3 = text1.concat(" ",text2);
        • text = "Hello" + " " + "World!";
        • var text = "Hello".concat(" ","World!");
      • fromCharCode() - Konvertuje unikod vrednosti u string sastavljen od odgovarajućih znakova
        • res = String.fromCharCode(72, 69, 76, 76, 79);
      • indexOf() - Vraća indeks, tj. poziciju, prvoj pojavljivanja zadatog teksta u stringu ili -1 ako ne postoji
        • pos = str.indexOf("nesto");
        • pos = str.indexOf("nesto",pocevOd);
      • lastIndexOf() - Vraća indeks, tj. poziciju, poslednjeg pojavljivanja zadatog teksta u stringu ili -1 ako ne postoji
        • pos = str.lastIndexOf("nesto");
        • pos = str.lastIndexOf("nesto",pocevOd);
      • localeCompare() - Poredi dva stringa i vraća -1, 0 ili 1 u zavisnosti dali je prvi string manji, jednak ili veći
        • n = str1.localeCompare(str2);
      • match() - Vraća niz pogodaka za pretragu stringa korišćenjem regularnog izraza ili null ako nema pogodaka
        • res = str.match(regexp);
      • replace() - Zamenjuje prvo pojavljivanje traženog teksta u stringu drugim tekstom
        • res = str.replace("Pera","Mika");
      • search() - Kao i indexOf() pretražuje string za pojavljivanje zadatog teksta i vraća njegovu poziciju, ali ima mogućnost korišćenja regularnih izraza
        • pos = str.search("nesto");
      • slice() - Vraća deo stringa između zadatih pozicija
        • slice(start, end)
        • res = str.slice(7,13);
        • res = str.slice(-12,-6);
        • res = str.slice(7);
        • res = str.slice(-12);
      • split() - Deli string korišćenjem određenog znaka i pravi niz sastavljen od podstringova
        • txt.split(",");
        • txt.split(" ");
        • txt.split();
        • txt.split("");
      • substr() - Slično kao i slice() samo što je drugi parametar dužina vraćenog stringa i on ne može biti negativan
        • res = str.substr(7,6);
        • res = str.substr(-12,6);
        • res = str.substr(7);
      • substring() - Slično kao i slice() samo što ne može da prihvati negativne vrednosti
        • res = str.substring(7,13);
        • res = str.substring(7);
      • toLocaleLowerCase() - Pretvara string u mala slova prema lokalnom rasporedu
        • res = str.toLocaleLowerCase();
      • toLocaleUpperCase() - Pretvara string u velika slova prema lokalnom rasporedu
        • res = str.toLocaleUpperCase();
      • toLowerCase() - Pretvara string u mala slova
        • text2 = text1.toLowerCase();
      • toString() - Vraća vrednost string objekta
        • res = str.toString();
      • toUpperCase() - Pretvara string u velika slova
        • text2 = text1.toUpperCase();
      • trim() - Uklanja beline sa početka i kraja stringa
        • alert(str.trim());
      • valueOf() - Vraća prostu vrednost string objekta
        • res = str.valueOf();
  • Brojevi
    • Postoji samo jedan numerički tip podataka - pokretni zarez sa dvostrukom preciznošću u 64 bita
    • Mogu se pisati bez ili sa decimalama, kao i u eksponencijalnoj notaciji
      • x = 3.14;
      • x = 34;
      • x = 123e5;
      • x = 123e-5;
    • Preciznost
      • Celi brojevi na 15 cifara
      • Decimalni do 17 decimala
    • Heksadecimalne konstante se pišu sa 0x na početku - 0xFF
    • Za prikaz u drugim brojnim sistemima koristi se toString()
      • myNumber.toString(16);
      • myNumber.toString(8);
      • myNumber.toString(2);
    • Infinity i -Infinity su, takođe, brojevi
    • NaN - Not a Number
      • Provera da li je nešto broj ili ne - isNaN()
    • Svojstva:
      • MAX_VALUE - Vraća najveći mogući broj u JavaScript-u
      • MIN_VALUE - Vraća najmanji mogući broj u JavaScript-u
      • NEGATIVE_INFINITY - Predstavlja negativnu beskonačnost (vraća se kod prekoračenja)
      • NaN - Predstavlja "Not-a-Number" vrednost
      • POSITIVE_INFINITY - Predstavlja beskonačnost (vraća se kod prekoračenja)
      • Koristi se isključivo kao Number.svojstvo
    • Metode
      • Pretvaranje ostalih tipova u broj
        • Number() - Vraća broj ili NaN
        • parseFloat() - Parsira argument i vraća broj u pokretnom zarezu ili NaN
        • parseInt() - Parsira argument i vraća ceo broj ili NaN
      • toString() - Vraća broj pretvoren u string
      • toExponential() - Vraća string od zaokruženog broja i predstavljenog eksponencijalnom notacijom sa određenim brojem decimala ili bez zaokruživanja
        • x.toExponential(brojDecimala);
        • x.toExponential();
      • toFixed() - Vraća string od zaokruženog broja i predstavljenog sa određenim brojem decimalnih mesta
        • x.toFixed(brojDecimala);
      • toPrecision() - Vraća string od broj predstavljen određenom dužinom, tj. brojem cifara bez decimalne tačke
        • x.toPrecision(brojCifara);
        • x.toPrecision();
      • valueOf() - Vraća broj, koristi se interno

JavaScript operatori

  • Aritmetički operatori
    • + - Sabiranje
      • x = y + 2
    • - - Oduzimanje
      • x = y - 2
    • * - Množenje
      • x = y * 2
    • / - Deljenje
      • x = y / 2
    • % - Ostatak pri deljenju
      • x = y % 2
    • ++ - Inkrement
      • x = ++y
      • x = y++
    • -- - Dekrement
      • x = --y
      • x = y--
  • Operatori dodele
    • =, +=, -=, *=, /=, %=
      • x +=y (x = x + y)
  • String operatori
    • Spajanje stringova - koristi se + ili +=
    • Sabiranje broja i stringa daje string kao rezultat
  • Operatori za rad sa bitovima (koriste se 32-bitni označeni brojevi)
    • & - AND (i)
    • | - OR (ili)
    • ~ - NOT (negacija)
    • ^ - XOR (ekskluzivno ili)
    • << - Left shift (pomeranje ulevo)
    • >> - Right shift (pomeranje udesno)
  • Ostali operatori
    • typeof - Vraća tip promenljive ili izraza
    • delete - Briše svojstva korisnički definisanog objekta
    • unarni + operator - Pretvara promenljivu u broj ili vraća NaN

JavaScript Math objekat

  • Koristi se za obavljanje matematičkih zadataka na brojevima
  • Math.random() - Vraća slučajan broj između 0 i 1
  • Math.min() - Vraća najmanji broj iz liste brojeva razdvojenih zarezom
  • Math.max() - Vraća najveći broj iz liste brojeva razdvojenih zarezom
  • Math.round() - Zaokružuje broj na najbliži ceo broj
  • Math.ceil() - Zaokružuje broj naviše na najbliži ceo broj
  • Math.floor() - Zaokružuje broj naniže na najbliži ceo broj
  • Math konstante:
    • Math.E - Vraća Ojlerov broj
      Math.PI - Vraća pi
      Math.SQRT2 - Vraća kvadratni koren iz 2
      Math.SQRT1_2 - Vraća kvadratni koren iz 1/2
      Math.LN2 - Vraća prirodni algoritam od 2
      Math.LN10 - Vraća prirodni algoritam od 10
      Math.LOG2E - Vraća algoritam sa osnovom 2 od E
      Math.LOG10E - Vraća algoritam sa osnovom 10 od E
  • Math metode
    • abs(x), acos(x), asin(x), atan(x), atan2(y,x), ceil(x), cos(x), exp(x), floor(x), log(x), max(x,y,z,...,n), min(x,y,z,...,n), pow(x,y), random(), round(x),sin(x), sqrt(x), tan(x)

JavaScript datumi

  • Datumski objekat omogućava rad sa datumima (godine, meseci, dani, minuti, sekunde, millisekunde)
  • JavaScript datumi se računaju u millisekundama počev od 01.01.1970. u 00:00:00 UTC
  • Meseci se broje od 0 do 11
  • Kreiranje datumskog objekta
    • new Date()
      • Vraća tekuće vreme
    • new Date(milliseconds)
      • Date(0) - 01.01.1970. 00:00:00 UTC
    • new Date(dateString)
      • Date("October 13, 2014 11:13:00");
    • new Date(year, month, day, hours, minutes, seconds, milliseconds)
      • Date(99,5,24,11,33,30,0);
      • Date(99,5,24);
  • Datumske metode
    • toString() - Koristi se interno prilikom prikazivanja datumskog objekta u HTML-u
    • toUTCString() - Konvertuje datum u UTC string
    • toDateString() - Konvertuje datum u čitljiviji format
    • getDate() - Vraća dan kao broj između 1 i 31
    • getDay() - Vraća dan u nedelji kao broj od 0 do 6 (0 je nedelja)
    • getFullYear() - Vraća četvorocifrenu godinu
    • getHours() - Vraća sate kao broj između 0 i 23
    • getMilliseconds() - Vraća milisekunde kao broj između 0 i 999
    • getMinutes() - Vraća minute kao broj između 0 i 59
    • getMonth() - Vraća mesec kao broj između 0 i 11
    • getSeconds() - Vraća sekunde kao broj između 0 i 59
    • getTime() - Vraća vreme kao broj milisekundi od 01.01.1970.
    • setDate() - Postavlja dan kao broj između 1 i 31, a može se koristiti i za dodavanje dana
    • setFullYear() - Postavlja godinu (opciono i mesec i dan)
    • setHours() - Postavlja sate kao broj između 0 i 23
    • setMilliseconds() - Postavlja milisekunde kao broj između 0 i 999
    • setMinutes() - Postavlja minute kao broj između 0 i 59
    • setMonth() - Postavlja mesec kao broj između 0 i 11
    • setSeconds() - Postavlja sekunde kao broj između 0 i 59
    • setTime() - Postavlja vreme kao broj milisekundi od 01.01.1970.
    • Date.parse() - Konvertuje ulaz, tj. string, u broj milisekundi od 01.01.1970.

JavaScript nizovi

  • JavaScript nizovi se koriste za smeštanje više vrednosti u jednu promenljivu
  • Pošto si nizovi objekti moguće je istovremeno imati različite tipove podataka kao elemente niza
    • Za prepoznavanje niza potrebno je kreirati svoju funkciju jer typeof vraća object
    • function isArray(myArray) {
          return myArray.constructor.toString().indexOf("Array") > -1;
      }
  • Kreiranje niza
    • Preporučeni način - var imeNiza = [element1, element2, ...];
    • Alternativa - var imeNiza = new Array(element1, element2, ...);
  • Pristup elementima niza
    • Indeksi u nizu počinju od nule
    • imeNiza[indeksElementa]
  • Svojstvo length
    • Vraća dužinu niza, tj. broj elemenata
    • imeNiza.length
    • Dodavanje novog elementa u niz - imeNiza[imeNiza.length] = vrednost;
  • String metode
    • valueOf() - Konvertuje niz u string, tj. ređa elemente niza razdvojene zarezima
    • toString() - Konvertuje niz u string, tj. ređa elemente niza razdvojene zarezima
    • join() - Konvertuje niz u string, ali ovde može da se odabere separator
      • imeNiza.join(" * ")
      • imeNiza.join()
    • pop() - Uklanja poslednji element iz niza i vraća taj element
    • push() - Dodaje novi element na kraj niza i vraća novu dužinu niza
    • shift() - Uklanja prvi element iz niza, ostale pomera za jedno mesto napred i vraća taj element
    • unshift() - Dodaje novi element na početak niza i vraća novu dužinu niza
    • delete - Briše element iz niza i na njegovom mestu ostaje undefined
      • delete imeNiza[indeksElementa];
    • splice() - Dodaje nove elemente u niz, ali može i da uklanja elemente
      • splice(indexGdeSeUmece,kolikoElemenataSeUklanja,noviElement1,noviElement2, ...);
      • splice(indexGdeSeUmece,kolikoElemenataSeUklanja);
    • sort() - Sortira niz
      • Moguće je kao argument postaviti funkciju za korisničko sortiranje
      • Ne može se direktno koristiti za sortiranje numeričkih vrednosti jer ih posmatra kao stringove, pa mora funkcija - sort(function(a, b){return a-b})
    • reverse() - Obrće redosled elemenata niza
    • concat() - Spajanje nizova
      • noviNiz = niz1.concat(niz2, niz3, ...);
    • slice() - Izdvaja podniz
      • slice(start,end) - Počinje na start, ide do end, ali ga ne uključuje

JavaScript logičke vrednosti

  • true / false
  • Sve sa realnom vrednošću je true
    • 100, 3.14, -15, "Hello", "false", 7 + 1 + 3.14, 5 < 6
  • Sve bez realne vrednosti je false
    • 0, -0, "", undefined, null, false, NaN

JavaScript konverzija tipova

  • JavaScript ima pet različitih tipova koji mogu da imaju vrednost
    • string
    • number
    • boolean
    • object
    • function
  • JavaScript ima tri tipa koji su objekti
    • Object
    • Date
    • Array
  • JavaScript ima dva tipa koji ne mogu imati vrednost
    • null
    • undefined
  • Operator typeof vraća tip JavaScript promenljive
    • NaN je broj, niz je ojekat, datum je objekat, null je objekat, undefined je undefined
  • constructor svojstvo - Vraća konstruktor funkciju za promenljivu
  • Konverzija tipova se radi korišćenjem JavaScript funkcije ili automatski
    • String(), toString(), Number()...

JavaScript poređenje i logički operatori

  • Poređenje, vraća true ili false
    • == - jednako
    • === - identično, jednaka vrednost i jednak tip
    • != - nije jednako
    • !== - nije jednaka vrednost ili nije jednak tip
    • > - veće od
    • < - manje od
    • >= - veće od ili jednako
    • <= - manje od ili jednako
  • Logički operatori
    • && - and (i)
    • || - or (ili)
    • ! - not (ne)
  • Uslovni operator
    • promenljiva = (uslov) ? vrednostAkoJeTacno : vrednostAkoNijeTacno

JavaScript naredbe grananja

  • JavaScript ima četiri uslovne naredbe
    • if - Definiše blok naredbi koje se izvršavaju ako je određeni uslov ispunjen
    • else - Definiše blok naredbi koje se izvršavaju ako određeni uslov nije ispunjen
    • else if - Za zadavanje novog uslova ukoliko prethodni uslov nije ispunjen
    • switch - Za definisanje više alternativnih blokova naredbi
  • if
    • if (uslov) {
          blok naredbi koje se izvršavaju ako je uslov ispunjen
      }
  • else
    • if (uslov) {
          blok naredbi koje se izvršavaju ako je uslov ispunjen
      } else { 
          blok naredbi koje se izvršavaju ako uslov nije ispunjen
      }
  • else if
    • if (uslov1) {
          blok naredbi koje se izvršavaju ako je uslov1 ispunjen
      } else if (uslov2) {
          blok naredbi koje se izvršavaju ako uslov1 nije ispunjen, a uslov2 jeste
      } else {
          blok naredbi koje se izvršavaju ako ni uslov1 ni uslov2 nisu ispunjeni
      }
  • switch
    • switch(uslov) {
          case vrednost1:
              naredbe1
              break;
          case vrednost2:
              naredbe1
              break;
          default:
              podrazumevane naredbe
      }
    • Ispituje se uslov
    • Vrednost uslova se poredi sa vrednostima svakog case
    • Ako se nađe poklapanje odgovarajući blok naredbi se izvrši
    • break zaustavlja dalje poređenje i izlazi se iz switch naredbe
    • default definiše koje naredbe se izvršavaju ako nema poklapanja sa case vrednostima

JavaScript for petlja

  • Ponavlja blok naredbi određen broj puta
  • for (pocetak; uslov; naKrajuSvakogProlaza) {
        blok naredbi koje se ponavljaju
    }
  • pocetak se izvršava jednom pre početka petlje, najčešće za inicijalizaciju promenljivih
  • uslov kontroliše dokle se petlja izvršava - kad je on true ide se u novi prolaz
  • naKrajuSvakogProlaza se izvršava nakon svakog prolaska kroz petlju
  • Nijedan od ovih delova nije obavezan

JavaScript for/in petlja

  • Prolazi kroz svojstva objekta
  • for (promenljiva in imeObjekta){
        blok naredbi koje se ponavljaju za svako svojstvo objekta
    }

JavaScript while petlja

  • Ponavlja blok naredbi dokle god je navedeni uslov ispunjen
  • while (uslov) {
        blok naredbi koje se ponavljaju
    }

JavaScript do/while petlja

  • Ponavlja blok naredbi dokle god je navedeni uslov ispunjen
  • do {
        blok naredbi koje se ponavljaju
    }
    while (uslov);
  • Ova petlja se uvek izvrši bar jedanput pre nego što se ispituje uslov

JavaScript Break i Continue, oznake (labele)

  • break prekida izvršavanje petlje i prelazi na prvu naredbu posle petlje
  • continue prekida izvršavanje trenutnog prolaska kroz petlju i prelazi na kraj, tj. na prvu naredbu u petlji
  • Oznake služe da označe određenu naredbu u kodu
    • label:
      naredba
  • break i continue se mogu koristiti i sa oznakom, pa se "skače" na tu naredbu
    • break imeOznake;
    • continue imeOznake;
  • continue, sa ili bez oznake, se koristi samo unutar petlje
  • break bez oznake se koristi samo unutar petlje ili switch naredbe
  • break sa oznakom se može koristiti u bilo kom JavaScript bloku

JavaScript greške

  • Greške mogu biti greške u kodu, greške zbog loših ulaznih podataka ili neke druge nepredvidive stvari
  • try i catch
    • try naredba omogućava da se definiše blok naredbi koji se posmatra na pojavu greške u toku izvršavanja
    • catch naredba definiše blok naredbi koje se izvršavaju ukoliko se desi greška u try bloku
    • Naredbe try i catch uvek idu u paru:
      • try {
            blok naredbi koje se štite
        }
        catch(err) {
            blok naredbi koje obrađuju grešku
        }
  • throw
    • Kada se desi greška, program staje i JavaScript generiše (baca) grešku
    • throw omogućava da se programski generiše (baci) greška
    • Greška može biti string, broj, logička vrednost ili objekat
      • throw greska;
  • finally
    • finally omogućava da se definiše blok naredbi koji će se izvršiti posle try i catch nevezano za pojavu greške
    • try {
          blok naredbi koje se štite
      }
      catch(err) {
          blok naredbi koje obrađuju grešku

      finally {
          blok naredbi koje se izvrsavaju nevezano za pojavu greske
      }

JavaScript regularni izrazi

  • Regularni izraz je niz znakova koji se koristi kao šablon za pretragu
  • /sablon/modifikator
  • Šabloni
    • [abc] - Traži bilo koji od znakova unutar zagrada
    • [^abc] - Traži bilo koji znak osim znakova unutar zagrada
    • [0-9] - Traži bilo koju od cifri unutar zagrada
    • [^0-9] - Traži bilo koju cifru osim cifri unutar zagrada
    • (x|y) - Traži bilo koju od alternativa razdvojenih sa |
    • \d - Traži cifru
    • \D - Traži znak koji nije cifra
    • \s - Traži belinu
    • \b - Traži poklapanje na početku ili kraju reči
    • \B - Traži poklapanje koje nije na početku ili kraju reči
    • \n - Traži oznaku novog reda
    • \t - Traži znak tab
    • \uxxxx - Traži unikod znak predstavljem heksadecimalnim brojem xxxx
    • n+ - Traži string koji ima najmanje jedno n
    • n* - Traži string koji ima nijedno ili više pojavljivanja n
    • n? - Traži string koji ima nijedno ili jedno pojavljivanje n
    • n{X} - Traži string koji ima niz od X pojavljivanja n
    • n{X,Y} - Traži string koji ima niz od X do Y pojavljivanja n
    • n{X,} - Traži string koji ima niz od najmanje X pojavljivanja n
    • n$ - Traži string koji ima n na kraju
    • ^n - Traži string koji ima n na počeku
    • ?=n - Traži string koji ima n iza sebe
    • ?!n - Traži string koji nema n iza sebe
  • Modifikatori
    • i - Ne razlikuju se velika i mala slova
    • g - Globalna pretraga, ne staje se kod prvog pojavljivanja
    • m - Pretraga u više redova
  • Metode
    • test() - Vrši pretragu u strignu i vraća true ili false
      • /e/.test("Neki teskst koji ima slovo e")
    • exec() - Vrši pretragu u stringu i vraća pronađeni string ili null
      • /e/.exec("Neki teskst koji ima slovo e")

JavaScript podizanje (hoisting)

  • U JavaScript-u promenljiva može biti deklarisana nakon što je upotrebljena, tj. može se koristiti i pre deklaracija
  • JavaScript podiže sve deklaracije na početak opsega, tj. tekućeg skripta ili tekuće funkcije
  • Deklaracije se podižu, ali ne i inicijalizacija!
  • Dobra praksa je da se sve deklaracije pišu na početku opsega

JavaScript Use Strict

  • "use strict"; definiše da JavaScript treba da se izvršava u "striktnom modu"
  • "use strict"; se dodaje na početku JavaScript datoteke (globalni opseg) ili funkcije (lokalni opseg)
  • Ovo pravi bezbedniji JavaScript kod
  • Šta nije dozvoljeno?
    • Korišćenje promenljive koja nije prethodno deklarisana
    • Brisanje promenljive, funkcije ili argumenta
    • Definisanje svojstva objekta više od jednom
    • Dupliranje argumenta u funkciji
    • ...

JavaScript konvencije

  • Konvencije obično pokrivaju:
    • Imenovanje i deklarisanje promenljivih i funkcija
    • Pravila za upotrebu belina, uvlačenja i komentara
    • Prakse i principe programiranja
  • Svejedno da li su formalne ili lične treba ih se pridržavati
  • Imena promenljivih i funkcija
    • Koristiti camelCase za imena promenljivih i funkcija
    • Globalne promenljive velikim slovima
    • Konstante velikim slovima
    • Imena počinju slovom
  • Deklaracije na vrhu, tj. početku koda
  • Razmaci oko operatora i iza zareza
  • Uvlačenje redova sa četiri razmaka, bez tabulatora
  • Ograničiti dužinu redova na ispod 80 znakova

JavaScript preporuke iz prakse

  • Izbegavati korišćenje globalnih promenljivih
  • Uvek deklarisati lokalne promenljive (korišćenjem var)
  • Nikad ne deklarisati brojeve, stringove i logičke promenljive kao objekte
  • Ne koristiti new Object() već
    • var x = {}; - Novi objekat
    • var x = ""; - Novi string
    • var x = 0; - Novi broj
    • var x = false; - Nova logička promenljiva
    • var x = []; - Novi niz (objekat)
    • var x = /()/ - Novi regularan izraz (objekat)
    • var x = function(){}; - Nova funkcija (objekat)
  • Paziti na automatsku konverziju brojeva u string ili NaN
  • Za poređenje koristiti === umesto ==
  • Ne završavati nabrajanje kod definisanja zarezom iza poslednjeg elementa/svojstva
  • Koristiti podrazumevane vrednosti za argumente funkcija radi izbegavanja vrednosti undefined
  • Izbegavati korišćenje naredbe eval()

JavaScript performanse

  • Smanjiti kod u petljama, tj. sve što je moguće izmestiti van petlje
  • Koliko je moguće smanjiti DOM pristup jer je spor
    • Ako je potrebno nekom DOM elementu pristupiti više puta smestiti ga u lokalnu promenljivu
  • Smanjiti veličinu DOM-a
  • Izbaciti nepotrebne promenljive
  • Odložiti učitavanje JavaScript-a
    • Premestiti JavaScript kod na dno <body> dela
    • Koristiti defer="true" za eksterne skriptove
  • Izbegavati korišćenje naredbe with

JavaScript JSON

  • Šta je JSON?
    • JSON je format za smeštanje i prenos podataka.
    • Često se koristi kada se podaci šalju sa servera web stranici
    • JSON je skraćenica za JavaScript Object Notation
  • Primer
    • {"zaposleni":[
          {"ime":"Pera", "prezime":"Peric"},
          {"ime":"Mika", "prezime":"Mikic"},
          {"ime":"Laza", "prezime":"Lazic"}
      ]}
  • JSON format je jako sličan kodu za kreiranje JavaScript objekata
  • JSON sintaksa
    • Podaci su parovima ime/vrednost
      • "imePolja":"vrednostPolja"
    • Podaci se razdvajaju zarezima
    • Velike zagrade su za objekte
      • {"imePolja1":"vrednostPolja1", "imePolja2":"vrednostPolja2"}
    • Srednje zagrade su za nizove
      • "imeNiza":[
           {"imePolja1":"vrednostPolja1", "imePolja2":"vrednostPolja2"},
           {"imePolja1":"vrednostPolja1", "imePolja2":"vrednostPolja2"},
           {"imePolja1":"vrednostPolja1", "imePolja2":"vrednostPolja2"}
        ]
  • Konverzija JSON tekst u JavaScript objekat
    • Prvo se čitaju podaci sa servera ili se drugačije spremi string sa JSON tekstom
      • var x = '{ JSON objekat }';
    • Konverzija stringa u JavaScript objekat
      • var obj = JSON.parse(text);
    • Korišćenje tog JavaScript objekta na stranici
      • obj.imeNiza[1].imePolja1

JavaScript objekti

  • Skoro sve u JavaScript-u se tretira kao objekat (osm null i undefined)
  • JavaScript objekat je složeni tip podataka koji ima svojstva i metode
  • Svojstva
    • Svojstva su vrednosti povezane sa objektom
    • JavaScript objekat je nesortirana kolekcija svojstava
    • Svako svojstvo ima ime i vrednost
    • Pristup svojstvu objekta
      • imeObjekta.svojstvo
      • imeObjekta["svojstvo"]
      • imeObjekta[izraz]
    • Novo svojstvo se dodaje objektu prostom dodelom vrednost
      • imeObjekta.novoSvojstvo = vrednost;
    • Za brisanje svojstva se koristi naredba delete
      • delete imeObjekta.svojstvo
    • Atributi svojstva
      • value, enumerable, configurable, writable
      • Samo value može da se menja, tj. da mu se dodeli vrednost
  • Metode
    • Metode su akcije koje se mogu izvršiti na objektu
    • Poziv metode objekta
      • imeObjekta.imeMetode()
    • Definisanje metoda objekta se vrši u konstruktor funkciji
  • Kreiranje objekta
    • Definisanje i kreiranje objekta korišćenjem objekt literala
      • Ovo je najlakši način za kreiranje objekta
      • U jednoj naredbi se definiše i kreira objekat
      • Objekt literal je lista parova ime:vrednost unutar velikih zagrada
      • var osoba = {ime:"Pera", prezime:"Peric", godine:50, bojaOciju:"plave"};
    • Korišćenje rezervisane reči new
      • var osoba = new Object();
        osoba.ime = "Pera";
        osoba.prezime = "Peric";
        osoba.godine = 50;
        osoba.bojaOciju = "plava";
    • Korišćenje konstruktora objekta
      • Ponekad nam je potreban tip objekta za kreiranje više objekata jednog tipa
      • Uobičajeni način za kreiranje tog tipa objekta je korišćenje konstruktor funkcije objekta
      • function osoba(oime, oprezime, ogodine, obojaociju) {
            this.ime = oime;
            this.prezime = oprezime;
            this.godine = ogodine;
            this.bojaOciju = obojaociju;
        }
        var otac = new osoba("Pera", "Peric", 50, "plave");
        var majka = new osoba("Mileva", "Peric", 48, "zelene");
  • Rezervisana reč this
    • U JavaScript-u this je objekat koji je nadređen JavaScript kodu
    • Vrednost this, kad se koristi u funkciji, je objekat koji je nadređen funkciji
    • Vrednost this, kada se koristi u objektu, je sam taj objekat
    • Rezervisana reč this u konstruktoru objekta nema vrednost, tada je zamena za novi objekat
    • Vrednost this postaje novi objekat kada se konstruktor upotrebi za kreiranje objekta
    • this nije promenljiva, nego je rezervisana reč i ne može joj se menjati vrednost
  • JavaScript objekti su promenljivi
    • Objekti su promenljivi - adresiraju se po referenci, a ne po vrednosti
    • var x = y; - x i y pokazuju na isti objekat
  • JavaScript prototip objekta
    • Svaki JavaScript objekat ima prototip
    • Prototip je takođe objekat
    • Svi JavaScript objekti nasleđuju svojstva i metode od svojih prototipova
    • Na vrhu lanca prototipova se nalazi Object.prototype od koga svi nasleđuju
    • Kreiranje prototipa
      • Uobičajeni način za kreiranje prototipa je korišćenje konstruktor funkcije objekta
      • Kad imamo konstruktor funkciju onda pomoću rezervisane reči new kreiramo novi objekat
    • Dodavanje svojstva postojećem objektu
      • otac.drzavljanstvo = "Srpsko";
    • Dodavanje metode postojećem objektu
      • otac.punoIme = function() {
            return this.ime + " " + this.prezime;
        };
    • Dodavanje svojstva konstruktoru
      • Mora se ručno dodati konstruktor funkciji
      • Svojstva prototipa mogu imati podrazumevane vrednosti
    • Dodavanje metode konstruktoru
      • Mora se ručno dodati konstruktor funkciji
      • function osoba(oime, oprezime, ogodine, obojaociju) {
            this.ime = oime;
            this.prezime = oprezime;
            this.godine = ogodine;
            this.bojaOciju = obojaociju;
            this.punoIme = function() {return this.ime + " " + this.prezime;};
        }
    • Korišćenje svojstva prototype
      • Svojstvo prototype omogućava dodavanje novog svojstva postojećem prototipu
        • osoba.prototype.drzavljanstvo = "Srpsko";
      • Svojstvo prototype omogućava dodavanje novog svojstva postojećem prototipu
        • osoba.prototype.punoIme = function() {
              return this.ime + " " + this.prezime;
          };
      • Menjaju se samo korisnički prototipovi, a ne ugrađeni

JavaScript funkcije

  • Funkcije se definišu pomoću ključne reči function
  • Funkcije se definišu deklaracijom ili pomoću izraza
  • Deklaracija funkcije
    • function imeFunkcije(parametri) {
        telo funkcije
      }
    • Ovako imamo pripremljenu funkciju koja se koristi kasnije
    • Pošto ovo nije izvršna naredba uobičajeno je da se ne stavlja ; na kraju
  • Pomoću izraza
    • var x = function(a, b) {return a * b};
    • Ovako se dobija bezimena funkcija dodeljena promenljivoj koja se kasnije koristi kao funkcija
  • Podizanje funkcija
    • JavaScript podiže deklaracije funkcija na početak opsega
  • Samopozivajuće funkcije
    • Izraz može biti samopozivajući, tj. da se startuje automatski bez pozivanja
    • Ovo se postiže dodavanjem () na kraju izraza
    • Cela funkcija se mora staviti u malu zagradu da bi se naglasilo da je to izraz
      • (function () {
            var x = "Hello!!";
        })();
  • Funkcije se mogu koristiti kao vrednosti u izrazima
  • typeof za funkciju vraća function
  • Funkcije su objekti
    • Svojstvo arguments.length vraća broj argumenata prosleđenih pri pozivu funkcije
    • imeFuncije.toString() vraća funkciju kao string

Parametri (argumenti) JavaScript funkcija

  • JavaScript funkcije ne vrše nikakvu proveru argumenata - ni tip podataka, ni broj argumenata
  • Terminološki, parametri su imena promenljivih navedena prilikom definisanja funkcije, argumenti su stvarne vrednosti koje se prosleđuju funkciji prilikom njenog pozivanja
  • Pri definiciji funkcije ne navode se tipovi podataka za parametre
  • Ako se funkcija pozove sa manje argumenata nego što je deklarisano, nedostajući argumenti dobijaju vrednost undefined (ako u funkciji nije dodeljenja vrednost)
    • parametar = parametar || podrazumevanaVrednost;
  • Ako se funkcija pozove sa više argumenata nego što je deklarisano njima se može pristupiti samo preko arguments objekta jer nemaju ime
  • arguments objekat sadrži niz argumenata koji su korišćeni pri pozivu funkcije
  • Argumenti se prenose po vrednosti
  • Objekti se prenose po referenci

Pozivanje JavaScript funkcija

  • Pozivanje funkcije kao funkcije
    • function mojaFunkcija(a, b) {
          return a * b;
      }
      myFunction(10, 2);
      window.myFunction(10, 2);
    • Ovakva funkcija pripada globalnom objektu, tj. HTML stranici (prozoru pregledača)
      • mojaFunkcija() i window.mojaFunkcija() je isto
    • Ovo nije dobra praksa jer treba izbegavati globalne promenljive, metode i funkcije
  • Global objekat
    • Kada je poziva funkcija koja pripada globalnom objektu vrednost this je taj globalni objekt
    • this je window objekat - nikako ne koristiti kao promenljivu!
  • Pozivanje funkcije kao metode
    • Kada postoji objekat i u njemu neka funkcija kao metoda onda ta funkcija pripada tom objektu
    • this je objekat u kome je funkcija metoda
  • Pozivanje funkcije pomoću konstruktora funkcije
    • Kada se funkcija poziva tako što se ispred nje stavi new to je poziv konstruktora
    • Poziv konstruktora kreira novi objekat
    • Novi objekat nasleđuje svojstva i metode od njegovog konstruktora
    • this u konstruktoru nema vrednost
    • Vrednost this će biti novi objekat koji je kreiran kada je pozvana funkcija
  • Pozivanje funkcije pomoću metoda funkcije
    • Pošto su objekti i JavaScript funkcije imaju svojstva i metode
    • call() i apply() su predefinisane metode funkcija, obe se korste za poziv funkcije i obe moraju imati nadređeni objekat kao prvi argument
      • myFunction.call(mojObjekat, 10, 2);
      • myFunction.apply(mojObjekat, [10,2]);
    • Sa call() ili apply() moguće je postaviti vrednost za this i pozvati funkciju kao novi metod postojećeg objekta

JavaScript zatvaranje (closure)

  • JavaScript promenljive mogu biti lokalne ili globalne
  • Privatne promenljive su omogućene korišćenjem zatvaranja
  • var add = (function () {
        var counter = 0;
        return function () {return counter += 1;}
    })();
    add();
    add();
    add();
  • Promenljivoj add je dodeljena vrednost koju vraća samopozivajuća funkcija
  • Samopozivajuća funkcija se izvrši jednom - postavi brojač na 0 i vrati funkciju kao izraz
  • Ovako je promenljiva add postala funkcija koja može pristupiti promenljivoj (counter) u nadređenoj funkciji
  • Ovo je zatvaranje (closure) i omogućava funkciji da ima privatne promenljive
  • Zatvaranje je funkcija koja ima pristup nadređenom (roditeljskom) opsegu čak i kad je nadređena (roditeljska) funkcija zatvorena

JavaScript HTML DOM (Document Object Model)

  • Kada se web stranica učita pregledač kreira Document Object Model stranice
  • HTML DOM je konstruisan kao stablo objekata gde je Document koren stabla
  • Pomoću HTML DOM-a JavaScript može da:
    • Menja sve HTML elemente na stranici
    • Menja sve HTML atribute na stranici
    • Menja sve CSS stilove na stranici
    • Uklanja postojeće HTML elemente i atribute
    • Dodaje nove HTML elemente i atribute
    • Reaguje na sve postojeće HTML događaje na stranici
    • Kreira novi HTML događaj na stranici
  • HTML DOM je standardni objektni model i programerski interfejs za HTML i definiše
    • HTML elemente kao objekte
    • Svojstva svih HTML elemenata
    • Metode za pristup svim HTML elementima
    • Događaje za sve HTML elemente
  • HTML je standard koji omogućava dobijanje, menjanje, dodavanje i brisanje HTML elemenata
    • HTML DOM metode su akcije koje se mogu primeniti (na HTML elementima)
    • HTML DOM svojstva su vrednosti (HTML elemenata) koja se mogu postaviti ili promeniti
  • getElementById metod
    • document.getElementById("demo").innerHTML = "Hello World!";
    • Najčešći način za pristup HTML elementu je korišćenje id atributa elementa
  • innerHTML svojstvo
    • Najlakši način da se dobije sadržaj elementa je korišćenjem innerHTML svojstva
    • Koristi se za čitanje ili menjanje sadržaja HTML elementa
    • Može da se koristi za bilo koji element uključujući i <html> i <body>
  • U HTML DOM-u document objekat predstavlja stranicu i od njega se uvek kreće u pristupu elementima
  • Pronalaženje HTML elemenata
    • document.getElementById() - Pronalaženje elementa po atributu id
      • document.getElementById("demo");
      • Vraća element ili null
    • document.getElementsByTagName() - Pronalaženje elemenata po tagu
      • x.getElementsByTagName("p");
      • Pronalazi sve <p> elemente u objektu x
    • document.getElementsByClassName() - Pronalaženje elemenata po imenu klase
      • document.getElementsByClassName("demo");
  • Menjanje HTML elemenata
    • element.innerHTML= - Menjanje HTML sadržaja elementa
      • document.getElementById(id).innerHTML = noviHTML
    • element.attribute= - Menjanje atributa HTML elementa
      • document.getElementById(id).attribute = novaVrednost
    • element.setAttribute(attribute,value) - Menjanje atributa HTML elementa
    • element.style.property= - Menjanje stila HTML elementa
      • document.getElementById(id).style.property = noviStil
  • Dodavanje i brisanje HTML elemenata
    • document.createElement() - Kreiranje HTML elementa
    • document.removeChild() - Brisanje HTML elementa
    • document.appendChild() - Dodavanje HTML elementa
    • document.replaceChild() - Zamena HTML elementa
    • document.write(tekst) - Pisanje u izlazni HTML
      • document.write(Date());
      • Ne koristiti po završetku učitavanja dokumenta jer će obrisati sav sadržaj
  • Dodavanje obrađivača događaja
    • document.getElementById(id).onclick=function(){code} - Dodavanje koda koji će obrađivati događaj onclick
  • Pronalaženje HTML objekata
    • document.anchors - Vraća sve <a> tagove sa postavljenim vrednostima atributa name
    • document.applets - Vraća sve <applet> elemente (ukinuto u HTML5)
    • document.baseURI - Vraća apsolutni URI dokumenta
    • document.body - Vraća <body> element
    • document.cookie - Vraća cookie za dokument
    • document.doctype - Vraća doctype za dokument
    • document.documentElement - Vraća <html> element
    • document.documentMode - Vraća režim koji koristi pretraživač
    • document.documentURI - Vraća URI documenta
    • document.domain - Vraća ime domena servera gde se nalazi dokumet
    • document.domConfig - Vraća DOM podešavanja
    • document.embeds - Vraća sve <embed> elemente
    • document.forms - Vraća sve <form> elemente
    • document.head - Vraća <head> element
    • document.images - Vraća sve <image> elemente
    • document.implementation - Vraća DOM implementaciju
    • document.inputEncoding - Vraća kodiranje dokumenta (character set)
    • document.lastModified - Vraća datum i vreme kada je dokument ažuriran
    • document.links - Vraća sve <area> i <a> vrednost artributa href
    • document.readyState - Vraća status dokumenta na učitavanju
    • document.referrer - Vraća URI referala
    • document.scripts - Vraća sve <script> elemente
    • document.strictErrorChecking - Vraća da li je uključena kontrola grešaka
    • document.title - Vraća <title> element
    • document.URL - Vraća kompletan URL dokumenta

JavaScript HTML DOM događaji

  • HTML DOM omogućava JavaScript-u da reaguje na događaje
  • Reagovanje na događaje - dodaje se JavaScript kod HTML atributu event
    • onclick=JavaScript
  • Neki od HTML događaja:
    • Klik mišem
    • Kad se web stranica učita
    • Kad se slika učita
    • Pomeranje miša iznad elementa
    • Promena sadržaja input polja
    • Slanje sadržaja HTML forme
    • Pritisak na taster
  • HTML Event atribut
    • Koristi se za dodeljivanje događaja HTML elementima
    • <button onclick="displayDate()">Test</button>
  • Dodela događaja korišćenjem HTML DOM-a
    • HTML DOM omogućava dodelu događaja HTML elementima korišćenjem JavaScript-a
    • document.getElementById("dugme").onclick=function(){displayDate()};
  • Događaji onload i onunload
    • Događaji onload i onunload se dešavaju kad korisnik dolazi na ili odlazi sa stranice
    • Zgodni su za rad sa kolačićima
    • <body onload="checkCookies()">
  • Događaj onchange
    • Najčešće se koristi u kombinaciji sa validacijom polja za unos
    • <input type="text" id="fname" onchange="upperCase()">
  • Događaji onmouseover i onmouseout
    • Rade slično kao hover
    • <div onmouseover="mOver(this)" onmouseout="mOut(this)">Neki tekst</div>
  • Događaji onmousedown, onmouseup i onclick
    • Sva tri događaja su deo klika mišem
    • Prvo se desi onmousedown, pa onmouseup i na kraju kad je klik gotov onclick

JavaScript HTML DOM EventListener

  • Metod addEventListener() dodaje obrađivač događaja (event handler) određenom elementu
  • Prilikom ovog dodavanja ne menjaju se već postojeći obrađivači događaja
  • Moguće je dodati proizvoljan broj obrađivača događaja jednom elementu, pri tome više njih može biti istog tipa
  • Obrađivači događaja se mogu dodati bilo kom DOM objektu, a ne samo HTML elementima (npr. window objektu)
  • element.addEventListener(event, function, useCapture);
    • event je tip događaja, npr. click ili mousedown
    • function je funkcija koja se poziva kada se desi događaj
    • useCapture je opcioni logički parametar koji kontroliše dalju propagaciju događaja
    • element.addEventListener("click", function(){ alert("Hello World!"); });
    • element.addEventListener("click", imeNekeFunkcije);
  • Dodavanje obrađivača događaja objektu window
    • window.addEventListener("resize", function(){
          document.getElementById("demo").innerHTML = sometext;
      });
    • Slično se radi za bilo koji DOM objekat koji podržava događaje
  • Prenos parametara
    • Koristi se bezimena funkcija koja poziva funkciju sa parametrima
    • element.addEventListener("click", function(){ nekaFunkcija(p1, p2); });
  • Propagacija događaja - Event Bubbling i Event Capturing
    • Postoje dva načina za propagaciju događaja kod ugnježdenih elemenata u HTML DOM-u - bubbling i capturing
    • addEventListener(event, function, useCapture);
    • Kod bubbling-a prvo se obradi događaj unutrašnjeg elementa, pa spoljašnjeg - useCapture je false (podrazumevano)
    • Kod capturing-a prvo se obradi događaj spoljašnjeg elementa, pa unutrašnjeg - useCapture je true
  • Metod removeEventListener()
    • Koristi se za uklanjanje obrađivača događaja
    • element.removeEventListener("mousemove", nekaFunkcija);
  • Stariji pregledači
    • Neki stariji pregledači ne podržavaju addEventListener() i removeEventListener(), pa se koriste metode attachEvent() i detachEvent()
    • var x = document.getElementById("nesto");
      if (x.addEventListener) {
          x.addEventListener("click", nekaFunkcija);
      } else if (x.attachEvent) {
          x.attachEvent("onclick", nekaFunkcija);
      }
  • JavaScript HTML DOM navigacija
    • Sve u HTML dokumentu je čvor
      • Ceo dokument je dokument čvor
      • Svaki HTML element je element čvor
      • Tekst unutar HTML elementa je tekst čvor
      • Svaki HTML atribut je atribut čvor
      • Svi komentari su komentar čvorovi
    • Svakom čvoru se može pristupiti pomoću JavaScript-a, mogu se kreirati novi čvorovi, menjati i brisati
    • Document -> Koreni element: <html> -> Element <head> / Element <body> -> . . .
    • Poređani su hijerarhijski:
      • Na vrhu je koren (koreni čvor)
      • Svaki čvor ima jednog roditelja, osim korena koji nema roditelja
      • Svaki čvor može da ima proizvoljan broj potomaka/dece
      • Siblinzi (braća/sestre) su čvorovi koji imaju istog roditelja
    • Navigacija između čvorova
      • parentNode
      • childNodes[brojCvora]
      • firstChild
      • lastChild
      • nextSibling
      • previousSibling
    • DOM koreni čvorovi
      • document.body - Sadržaj <body> dela dokumenta
      • document.documentElement - Ceo dokument, sadržaj <html>
    • Svojstvo nodeName
      • nodeName je read-only
      • nodeName element čvora sam naziv taga
      • nodeName atribut čvora je naziv atributa
      • nodeName tekst čvora je #text
      • nodeName dokument čvora #document
      • nodeName sadrži naziv taga velikim slovima
    • Svojstvo nodeValue
      • nodeValue za element čvor je undefined
      • nodeValue za tekst čvor je sami tekst
      • nodeValue za atribut čvor je vrednost atributa
    • Svojstvo nodeType
      • Za element je 1 (ELEMENT_NODE)
      • Za atribut ja 2 (ATTRIBUTE_NODE)
      • Za tekst je 3 (TEXT_NODE)
      • Za komentar je 8 (COMMENT_NODE)
      • Za dokument je 9 (DOCUMENT_NODE)
  • Kreiranje novog HTML elementa (čvora)
    • Prvo se kreira element
    • Zatim se doda na postojeći element
    • <div id="div1">
      <p id="p1">Prvi pasus.</p>
      <p id="p2">Drugi pasus.</p>
      </div>
      <script>
      var para = document.createElement("p");
      var node = document.createTextNode("Novi pasus.");
      para.appendChild(node);
      var element = document.getElementById("div1");
      element.appendChild(para);
      </script>
    • appendChild() dodaje element kao poslednje dete, za prvo dete koristi se insertBefore()
  • Uklanjanje postojećeg HTML elementa
    • Potrebno je znati roditelja elementa koji se uklanja
    • parent.removeChild(child);
    • child.parentNode.removeChild(child);
  • Zamena HTML elementa
    • parent.replaceChild(noviElement,stariElement);
  • JavaScript HTML DOM lista čvorova
    • Metod getElementsByTagName() vraća listu čvorova
    • Ova lista izgleda kao niz čvorova ali nije niz
      • var listaCvorova = document.getElementsByTagName("p");
      • Prvi čvor iz ove liste je listaCvorova[0]
    • listaCvorova.length - Broj čvorova u listi

JavaScript Window - Browser Object Model

  • Ne postoji zvanični standard za Browser Object Model (BOM)
  • Objekat window
    • Podržavaju ga svi pregledači i predstavlja prozor pregledača
    • Svi globalni JavaScript objekti, funkcije i promenljive automatski postaju članovi objekta window
    • Globalne promenljive su svojstva objekta window
    • Globalne funkcije su metode objekta window
    • Čak i HTML DOM je svojstvo objekta window
      • window.document.getElementById("header");
      • document.getElementById("header");
    • Veličina prozora
      • Mogu se koristiti tri različita svojstva
      • Određuje se veličina radnog dela - nisu uključeni tulbarovi i skrolbarovi
      • Za Internet Explorer, Chrome, Firefox, Opera, and Safari:
        • window.innerHeight - the inner height of the browser window
        • window.innerWidth - the inner width of the browser window
      • Za Internet Explorer 8, 7, 6, 5:
        • document.documentElement.clientHeight
        • document.documentElement.clientWidth
        • document.body.clientHeight
        • document.body.clientWidth
      • Odnosno sve zajedno:
        • var w=window.innerWidth ||
              document.documentElement.clientWidth ||
              document.body.clientWidth;
          var h=window.innerHeight ||
              document.documentElement.clientHeight ||
              document.body.clientHeight;
    • Dodatne window metode:
      • window.open() - Otvara novi prozor
      • window.close() - Zatvara tekući prozor
      • window.moveTo() - Pomera tekući prozor
      • window.resizeTo() - Menja veličinu tekućem prozoru
  • Objekat window.screen
    • Pretstavlja korsnikov ekran
    • Objekat window.screen se može pisati bez prefiksa window
    • Svojstva:
      • screen.width - Širina ekrana u pikselima
      • screen.height - Visina ekrana u pikselima
      • screen.availWidth - Širina ekrana u pikselima umanjena za delove interfejsa (npr. taskbar)
      • screen.availHeight - Visina ekrana u pikselima umanjena za delove interfejsa (npr. taskbar)
      • screen.colorDepth - Broj bitova za prikaz jedne boje (najčešće 32 ili 24)
      • screen.pixelDepth - U današnje vreme isto kao i screen.colorDepth
  • Objekat window.location
    • Koristi za određivanje trenutne adrese stranice (URL) i preusmeravanje na novu stranicu
    • Objekat window.location se može pisati bez prefiksa window
    • Svojstva:
      • location.href - Vraća href (URL) tekuće stranice
      • location.hostname - Vraća ime domena
      • location.pathname - Vraća putanju (path) i ime datoteke tekuće stranice
      • location.protocol - Vraća web protokol koji se koristi (http:// ili https://)
      • location.assign - Učitava novi dokument
  • Objekat window.history
    • Sadrži istoriju posećenih stranica
    • Objekat window.history se može pisati bez prefiksa window
    • Zbog zaštite privatnosti korisnika postoje ograničenja kako JavaScript pristupa ovom objektu
    • Metode:
      • history.back() - Isto kao klik na dugme back/nazad u pregledaču
      • history.forward() - Isto kao klik na dugme forward/napred u pregledaču
  • Objekat window.navigator
    • Sadrži informacije o korisnikovom pregledaču
    • Objekat window.navigator se može pisati bez prefiksa window
    • Svojstva:
      • navigator.cookieEnabled - Vraća true ako su kolačići omogućeni
      • navigatorappName i navigator.appCodeName - Vraćaju ime pregledača
      • navigator.product - Vraća naziv motora pregledača
      • navigator.appVersion i navigator.userAgent - Vraćaju informaciju o verziji pregledača
      • navigator.platform - Vraća operativni sistem pregledača
      • navigator.language - Vraća jezik pregledača
    • Metod javaEnabled() - Vraća true ako je Java omogućena
  • Prozori za dijalog (Popup boxes)
    • Alert box - Daje informaciju, prikaz poruke sa dugmetom OK
      • window.alert("neki tekst");
      • alert("neki tekst");
    • Confirm box - Traži potvrdu od korinika, prikaz poruke i dumad OK i Cancel
      • window.confirm("neki tekst");
      • confirm("neki tekst");
      • Vraća true (OK) ili false (cancel)
    • Prompt box - Omogućava korisniku da unese vrednost
      • window.prompt("neki tekst","podrazumevani tekst");
      • prompt("neki tekst","podrazumevani tekst");
      • Vraća uneti tekst (OK) ili null (Cancel)
    • Prelom reda
      • Za unos preloma reda unutar poruke u prozoru za dijalog koristi se \n
  • Metode za JavaScript vremenske događaje
    • window.setInterval() - Pokreće funkciju prema zadatom intervalu
      • window.setInterval("javascript function", milliseconds);
      • setInterval(function(){alert("Hello")},3000);
      • var myVar=setInterval(function(){myTimer()},1000);
        function myTimer() {
            var d = new Date();
            document.getElementById("demo").innerHTML = d.toLocaleTimeString();
        }
    • window.clearInterval() - Zaustavlja ranije zadato ponavljanje funkcije
      • window.clearInterval(intervalVariable)
      • <button onclick="clearInterval(myVar)">Stop time</button>
    • window.setTimeout - Čeka zadati period i onda pokreće funkciju jednom
      • window.setTimeout("javascript function", milliseconds);
    • window.clearTimeout() - Zaustavlja zakazano pokretanje funkcije
      • window.clearTimeout(timeoutVariable)
  • JavaScript kolačići (Cookies)
    • Kolačići su podaci sačuvani u malim tekstualnim datotekana na korisnikovom računaru
    • Kolačići se čuvaju u parovima ime=vrednost
    • JavaScript koristi svojstvo document.cookie za kreiranje, čitanje, menjanje i brisanje kolačića
    • Kreiranje kolačića
      • document.cookie="promenljiva=vrednost";
      • document.cookie="promenljiva=vrednost; expires=GMT/UTC datum i vreme isteka; putanja kojoj pripada kolačić";
      • document.cookie="promenljiva=vrednost; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
    • Čitanje kolačića
      • var x = document.cookie;
      • document.cookie vraća sve kolačiće u jednom stringu - "cookie1=vrednost; cookie2=vrednost; cookie3=vrednost;"
    • Menjanje kolačića
      • Samo se ponovo postavi i to pregazi stari kolačić
    • Brisanje kolačića
      • Samo se datum isteka postavi u prošlost i ne mora da se navede vrednost
      • document.cookie = "promenljiva=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    • Primer - Kad se stranica učita poziva se checkCookie()
      • function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays*24*60*60*1000));
            var expires = "expires="+d.toGMTString();
            document.cookie = cname + "=" + cvalue + "; " + expires;
        }
        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1);
                if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
            }
            return "";
        }
        function checkCookie() {
            var user = getCookie("username");
            if (user != "") {
                alert("Welcome again " + user);
            } else {
                user = prompt("Please enter your name:", "");
                if (user != "" && user != null) {
                    setCookie("username", user, 365);
                }
            }
        }

 

Vi ste ovde: Home Predavanja Četvrta godina Informatički smer - Web dizajn 03 - Osnove JavaScript-a