Js

JavaScript is the programming language of HTML and the Web. https://www.w3schools.com/js/

*************************************************************************************************************************
SADRZAJ
Syntax and statements 123
            *Operators
            *function
            *Objects
            *Events
            *Expresions
randum 123
Conditional Statements if else else if switch
Logicke operacije 123
Loop 123
Regular Expressions(search) 123
JavaScript erore 123
Hoisted(uzdizanje) promenjive uvek na vrhu 123
"use strict"; 123
Form Validation 123
getElementsByTagName() Colection 123

JS HTML DOM 123
    getElementsByTagName() Colection 123
    Finding HTML Elements in DOM 123
    Changing the Value of an Attribute 123
    Changing CSS 123
    DOM Nodes 123

JS Browser BOM 123
    Window Screen 123
    Window Size 123
    Window Location 123
    JavaScript Window Navigator 123
    JavaScript Popup Boxes 123
    Timing Events 123

*************************************************************************************************************************
***Syntax and statements 123
statements --> instrukcije koje programski jezik treba da izvrsi. Js statements instrukcije sta browser treba da izvrsi.
one se izvrsavaju jedna po jedna po istim redom kojim su napisane. Znaci gornje prve.
JavaScript statements razdvojene su zarezima. tacka zares na kraju svakog statementsa a zarezi unutar:
var x, y, z;
x = 5;
y = 6;
z = x + y;

Js statements mogu biti value, Operators, Expressions, Keywords i Comments
- Values mogu biti fiksne i promenjive. Literals I Variables. Literals su stringovi(pisu se u duplim ili jednostrukim
navodnicima) i brojevi gde se
decimalni brojevi
pisu sa tackom 10.20 Promenjive moraju da imaju recicu VAR ispred naziva, var x i one se tako declaring -uju i posle
ne mora vise da stoji var. Dobar praktis je da se sve declaring na pocetku skripte.
- *Operators Js uzima matematicke operacije +- * '/' = % ++ --  procenat je koliko se puta sadrzi ovo ostalo dodaje za
jedan ili smanjuje za jedan
Operator    Example        Same As
    =        x = y        x = y
    +=        x += y        x = x + y    x=10 ; x+=5; sad je vrednost x jednaka 15
    -=        x -= y        x = x - y
    *=        x *= y        x = x * y
    /=        x /= y        x = x / y
    %=        x %= y        x = x % y    x=10 ; x%=5; sad je vrednost x jednaka 0 zato sto nema ostatka 5 u 10
    <<=        x <<= y        x = x << y 
    >>=        x >>= y        x = x >> y
    >>>=    x >>>= y    x = x >>> y
    &=        x &= y        x = x & y
    ^=        x ^= y        x = x ^ y
    |=        x |= y        x = x | y
    **=    x     **= y        x = x ** y
- *Expresions je kombinacija value i Operators-a 10*5, x*10..., "string1" + "string2"
- Keywords prestavljaju recice koje predstavljaju js akciju koja treba da se izvrsi, recimo var za promenjivu.
- Comments su isti kao i css-u // ili /**/

Indentifiers ili ti nazivi promenjivih, funkcija, labela... i oni su case sensitive i camelCase pocinje sa malim slovom

Promenjive mogu da budu broj, string ili objekat:
var length = 16;                               // Number
var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // Object

Booleans
var x = true;
var y = false;

arrays u Js-u se definisu kockasti zagradama []
var cars = ["Saab", "Volvo", "BMW"];

Objects su u viticastim zagradama:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

****function kao svuda, definise se recicom 'function' pa onda ide ime sa obicnim zagradicama gde mogu stajati parametri i
onda viticaste zagrade:
    function myFunction(p1, p2) {
            return p1 * p2;           
        }
funkcijsa se poziva kao svuda: imefunkcije()
svaka promnjiva u funkciji je lokalna i moze se koristiti samo u toj funkciji dok je svaka van funkcije i moze ona je
globalna i pripada window-u npr, var peki; moze s e pozvati kao window.peki

funkcija moze da se napravi i preko konstruktora fnkcije

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

a moze i preko expresionsa

var myFunction = function (a, b) {return a * b};

var x = myFunction(4, 3);

hoisting se odnosi i na funkcije i one mogu biti pozvane i pre nego sto se deklarisu sto znaci i da njihova
deklaracija ide na top

self ivouk funkcije su one koje same sebe pozivaju i to tako sto se doda () na kraju pre tacke zareza:

(function () {
    var x = "Hello!!";      // I will invoke myself
})();

call() i applay() funkcija koristi metode jednog objekta za drugi objekat



******* Objects (slicno kao u modelu extbase)  Svaki objekat je promenjiva koji se sastoji od
propertija(niz key eva koji imaju neku valu-u i methoda) . Viticaste zagrade i recica var kojom odredjujes objekat
var car = {type:"Fiat", model:"500", color:"white"};

Booleans can be objects (if defined with the new keyword)
Numbers can be objects (if defined with the new keyword)
Strings can be objects (if defined with the new keyword)
Dates are always objects
Maths are always objects
Regular expressions are always objects
Arrays are always objects
Functions are always objects
Objects are always objects

Da bi dosao do nekog propertija kao i u Extbaseu vezuje se tackom za ime objekta car.type ili car['type'].

Methods su isto sto i akcije u typo3 ju i oni su smesteni u propertijima kao definiciaj samih, posle imena propertija
i dve tacke ide recica function(){} znaci kao funkcija bez imena :) :
var car = {
    type:"Fiat",
    model:"500",
    color:"white",
    sviPodaci: function(){
        return this.type + " " + this.model + " " + this.color;
        }
    };
a poziva se car.sviPodaci();

arrays su slicni kao objekti samo oni koriste indekse ako brojeve dok objekti koriste imena za indekse.
Js ne podrzava asocijativne nizove.

Ima dva nacina pravljenja objekta gornji pokazan literalni i preko konstructora.
prvo se napravi konstruktor objeakt i posle od njega se prave objekti

var primer(prviUnizu, drugiUnizu, treciUnizu){
    this.imePrvogUnizu = prviUnizu;
    this.imeDrugogUnizu = drugiUnizu;
    this.imeTrecegUnizu = treciUnizu
}

to je konstruktor i sad od nega da ocemo napravimo druge objekte:

var primer2 = new primer('peki','car','majstrocina')

i sad se gadjaju parametri primer2.imePrvogUnizu i rezultat bi bio peki

**Events su neka gdesavanja u HTML-u posle kojih hoces da uradis neku Js akciju, recimo loadovanje stranice ili
klikom na neko dugme. tad se moze odmah unutar htmla postaviti Js

***randum 123
Math.random() daje nasumicni broj izmedju 1 i 0 (znaci 1 i 0 nisu ukljuceni)ali u kombinaciji sa mat.flor() koji
zaokruzuje broj na donju vrednost, onda moze dati randum broj
Math.floor(Math.random() * 10);   ---> daje broj izmedju 0 i 9
Math.floor(Math.random() * 11);   ---> daje broj izmedju 0 i 10
Math.floor(Math.random() * 100);   ---> daje broj izmedju 0 i 99  --> znaci uvek za jedno vise od broja mnozenja

ali ako uzmemo ovko
Math.floor(Math.random() * 10) + 1;   ---> daje broj izmedju 0 i 10  -->>> onda daje kako treba

*** Logicke operacije 123 :

Boolean() --> proverava dal je iskaz istinit

==  --> proverava dal je value jednaka drugoj valui
=== --> proverava dal je valu i type jednaka drugom valuetu i tajpu

!= --> proverava dal je nejednaka mu valuje
!== --> proverava dal mu je nejednaka valuje i type

&& --> and
|| --> or
!  --> not

***** Conditional Statements if else else if switch

if (condition) {
    block of code to be executed if the condition is true
}
ako je condition ispravan uradi onda ovo iz viticastih zagrada

ili ti

if (condition1) {
    block of code to be executed if condition1 is true
} else if (condition2) {
    block of code to be executed if the condition1 is false and condition2 is true
} else {
    block of code to be executed if the condition1 is false and condition2 is false
}

switch(expression) {
    case n:
        code block
        break;
    case n:
        code block
        break;
    default:
        code block
}

primer:

switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case 6:
        day = "Saturday";
}

****************** Loop 123 *********************************** https://www.w3schools.com/js/js_loop_while.asp

loop je koristan ako hoces da starujes neki kod ponovo i ponovo svaki put sa drugacijim rezultatiam

JS podrzava nekoliko vrsta loopova:
for - ide kroz kod
for/in - loop ide kroz properties od object
while - ide kroz kod dok god je  condition is true
do/while - ide kroz kod dok god je  condition is true

**for

for (statement 1; statement 2; statement 3) {
    code block to be executed
}

gde je 1 i promenjiva, uglavnom jednaka 0, pocetno stanje pre kretanja loopa, 2 je opseg u kom se loop odvija
i 3 je za koliko se u tom opsegu loop krece

<script>
    var text = "";
    var i;
    for (i = 0; i < 5; i++) {
        text += "The number is " + i + "<br>";
    }
    document.getElementById("demo").innerHTML = text;
</script>

i dobija se

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

*** The For/In Loop

on prolazi kroz properti od objekta

<script>
    var txt = "";
    var person = {fname:"John", lname:"Doe", age:25};
    var x;
    for (x in person) {
        txt += person[x] + " ";
    }
    document.getElementById("demo").innerHTML = txt;
</script>

*** While Loop

on prolazi kroz kod sve dok je special conditional thrue

while (condition) {
    code block to be executed
}

ili ti na primeru:

<script>
    var text = "";
    var i = 0;
    while (i < 10) {
        text += i;
        i++;
    }
    document.getElementById("demo").innerHTML = text;
</script>

znaci imamo ovde prvo opseg (conditional), onda imamo promenjivu i koja ispunjava drugu promenjivu za skok od i++

znaci tocak se okrece i krece sve dok je conditional jednak istini

***Do/While Loop

Do je varijanta while-a on ce da okrene tocak jednom kroz kod pa ce onda tek da prover dal je uslov tacan i ako jeste
okretace dok j egod condition tacan. ovaj pristup je dobar jer moze da ga okrene jedno pa da se kaze da nije tacan i
tu da ga zaustavi

<script>
var text = ""
var i = 0;

do {
    text += "<br>The number is " + i;
    i++;
}
while (i < 10); 

document.getElementById("demo").innerHTML = text;
</script>


***break Statement on zaustavlja loop u nekom trenutku. primer:

for (i = 0; i < 10; i++) {
    if (i === 3) { break; }
    text += "The number is " + i + "<br>";
}

nesto slicno mu je continue, on zaustavlja lup za dati kriterijum i nastavlja jednu stepenicu posle:

for (i = 0; i < 10; i++) {
    if (i === 3) { continue; }
    text += "The number is " + i + "<br>";
}


*** Regular Expressions(search) 123

To je foram po kojoj se sprovodi search za neki pojam:
ona se sastoji od /pattern/modifiers;

var patt = /w3schools/i;

/w3schools/i je regular expressions kojom kazemo serch da trazi w3schools gde 'i' predstavlja da zanemari
velika mala slova(case-insensitive).

w3schools je pattern
i je modifieres.

*search() pokazuje na kom mestu niza se trazi trazena rec,
prime sa regular expessions i sa stringom:

    var peki = "peki frajer Najveci!";
    var n = peki.search(/Najveci/i);
    document.getElementById("demo2").innerHTML = n;

    i autput je 12

    var peki = "Peki Car";
    var test = peki.search("Car");
    document.getElementById('demo2').innerHTML = test;

*replace() on je kao search samo zamenjuje do stringa sa odgovarajcem parametrom. ima 2 parametra,
prvi sta mneja i drugi gde menja:

    var peki = "Peki car";
    var najveci = peki.replace('car','Car najveci!');
    document.getElementById('demo').innerHTML = najveci;

*test() on trazi patern i vraca true ili false u zavisnosti dal ga je pronasao

    var patt = /e/;
    patt.test("The best things in life are free!");

    ili

    /e/.test("The best things in life are free!");

*exec() on je isto kao test() samo sto on vraca ceo upisan patern ako ga pronadje

    /e/.exec("The best things in life are free!");
    i vratice e

*** JavaScript erore 123

The try  trazi errors u bloku kodova.

The catch kad se pronadje greska on onda odgovarajuce reaguje nad njom.

The throw ovo pravi custom errors.

The finally ovo dozvoljava da se izvrsi kod posle try i catch funkcija


Znaci try sluzi da se odredi deo koda koji ce biti ispitan dal u njemu ima gresaka
catch onda unutar tog koda trazi greske i izbacuje error mesage
throw pravi kustom mesage:

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try {
        if(x == "") throw "empty";
        if(isNaN(x)) throw "not a number";
        x = Number(x);
        if(x < 5) throw "too low";
        if(x > 10) throw "too high";
    }
    catch(err) {
        message.innerHTML = "Input is " + err;
    }
    finally {
        document.getElementById("demo").value = "";
    }
}
</script>

I na kraju finally omogucava da se izvrsi kod nevezano za try i catch funkcije

*********** Hoisted(uzdizanje) promenjive uvek na vrhu 123

variable u Jsu mogu da se koriste pa potom tek da se declared(deklarisu) jer kad god da se deklarisu js
ih stavlja na vrh ali njihove vrednosti koje su umedjuvremenu dobili ne povlaci :

*Primer jedan

x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;                     // Display x in the element

var x; // Declare x

Vidimo da je x tek dole deklarisan ali mu je dodeljenda vrednost pre nego sto je bio pozvan. tako da bi rezultat
bio 5,

*Primer dva

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;                     // Display x in the element

var x = 5; // Declare x

Ovde bi bio rezultat nedefinisan jer mu je dodata vrednost tek posto je pozvan


******* "use strict"; 123

Ovaj mod je dodat u kasnijim verzijama javascripta i sluzi da izbacuje greske najcesce za ne deklarisane promenjive.

ako se stavi na vrhu dokumenta onda je global scope, a ako se stavi unuta funkcije onda je local scope.
----
"use strict";
x = 3.14;       // This will cause an error because x is not declared
----
"use strict";
myFunction();

function myFunction() {
    y = 3.14;   // This will also cause an error because y is not declared
}
----

U njemu sta sve nije dozvoljeno moze da se vidi na strani : https://www.w3schools.com/js/js_strict.asp

Form Validation 123


<!DOCTYPE html>
<html>
    <head>
      <script>
        function validateForm() {
          var x = document.forms["myForm"]["fname"].value;
          if (x == "") {
            alert("Name must be filled out");
            return false;
          }
        }
      </script>
    </head>
    <body>
        <form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post">
          <input type="text" name="fname">
          <input type="submit" value="Submit">
        </form>
    </body>
</html>

Pravimo funkciju u kojoj preko .forms() funkcije gadjamo ime forme i ime polja i gadjamo njihovu value.
znaci ako nisu prazna da se pojavi alert(). U HTML formi smao moramo dodati parametar kojo poziva
tu funkciju onsubmit="return validateForm()"

<h2>JavaScript Can Validate Input</h2>

<p>Please input a number between 1 and 10:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

ova proverava dal je input broj i da je u opsegu izmedju 1 i 10
znaci prvo se deklarisu promenjive, onda se dodeli vrednost promenjivoj x tj vrednost input polja i onda imamo
ako x nije broj isNaN() ili je manji od jedan ili je veci od 10 onda izbaci gresku

*Validation DOM Methods ili ti ako je u htmlu vec upisani parametri sa funkcijom checkValidity() proveravamo dal su
ispravni

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>

<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    } else {
        document.getElementById("demo").innerHTML = "Input OK";
    }
}
</script>

znaci HTML mu je vec rekao obseg i da ne moze biti prazno, checkValidity() samo proverava dal je tacno.
i na kraju se poziva .validationMessage; da isprinta validacion poruku

ostale validacione propertije na https://www.w3schools.com/js/js_validation_api.asp
****************************************JS HTML DOM1 23************************************************************

Kad se web page laoduje browser kreira DOM od strane DOcument Object Model

jegove metode su akcije koje se vrse na HTML elementima a propertis su value od html elemenata
najpoznatija nacin pristupanja html elementu je  je getElementById
document. predstavlja ceo HTML ili ti DOM

Neke od metoda promene html elementa:

element.innerHTML =  new html content            Change the inner HTML of an element
element.attribute = new value                    Change the attribute value of an HTML element
element.setAttribute(attribute, value)            Change the attribute value of an HTML element
element.style.property = new style                Change the style of an HTML element

Neke od metoda uklanjanja ili postavljanja html elementa

document.createElement(element)    Create an HTML element
document.removeChild(element)    Remove an HTML element
document.appendChild(element)    Add an HTML element
document.replaceChild(element)    Replace an HTML element
document.write(text)    Write into the HTML output stream

***Finding HTML Elements in DOM 123

Finding HTML elements by id   ----> document.getElementById("intro")
Finding HTML elements by tag name ---> document.getElementsByTagName("p");
Finding HTML elements by class name ---> document.getElementsByClassName("intro");
Finding HTML elements by CSS selectors ---> document.querySelectorAll("p.intro");
Finding HTML elements by HTML object collections  ---> objasnjenje u posebnom odeljku

ostale mogucnosti na strani https://www.w3schools.com/js/js_htmldom_elements.asp

***Changing the Value of an Attribute 123

menjau se atributi pomocu document.getElementById(id).attribute = new value

primer:
<img id="myImage" src="smiley.gif">

<script>
    document.getElementById("myImage").src = "landscape.jpg";
</script>

*** Changing CSS 123

pomocu document.getElementById(id).style.property = new style

primer:

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

<p>The paragraph above was changed by a script.</p>

***** getElementsByTagName() Colection 123

ova funkcija je lista ili niz HTML elemenata, recimo var x = document.getElementsByTagName("p"); selektuje sve <p>
tagove unutar dokumenta. Posto je kao niz, elementima se moze pristupiti pomocu [] i rednog broja u nizu
<p>1</p>

<p>2</p>

<p id="demo"></p>

<script>
var myCollection = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML =
"The innerHTML of the second paragraph is: " + myCollection[1].innerHTML;

</script>

ovde se pristupa 2 elementu u nizu.

pomocu .length mozemo izracunati koliko ima p tagova u dokumentu

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

*** EventListener() 123

element.addEventListener(event, function, useCapture);

ovo je nesto kao funkcije hendler u jQueriu sastoji se od 3 parametra, prvi je naravno neki hendler(onclick, mousower...)
drugi je funkcija koja ce se desiti kad se izvrsi hendler, i trece je boolian i on je opcion( use event bubbling or event
capturing)

Primer:

document.getElementById("myBtn").addEventListener("click", displayDate);

ili ti

element.addEventListener("click", function(){ alert("Hello World!"); });

*** DOM Nodes 123

Sta je NODE. on je sve, ceo html je nod document, svaki tag je nod tag, svaki tekst je nod tekst.

<html> ---> root node on nema jedini parents

  <head> ----> head node
      <title>DOM Tutorial</title> ----> title node i unutar text node
  </head>

  <body>
      <h1>DOM Lesson one</h1>
      <p>Hello world!</p>
  </body>

</html>

*Navigating Between Nodes

parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling

var myTitle = document.getElementById("demo").innerHTML;  ---> ovo recimo moze promeni text nod
var myTitle = document.getElementById("demo").firstChild.nodeValue; ---> ovo su value od prvog deteta
to isto moze i ovako da se napise:
var myTitle = document.getElementById("demo").childNodes[0].nodeValue; --> gde kazemo kojeg tacno prvog deteta

InnerHTML dodej nesto kao setter gde bi document.getElementById bio geter

*DOM Root Nodes
ima 2 properti kad gadja samo body ili kad gadja ceo element

document.body - The body of the document
document.documentElement - The full document

ostatak o nodu na stranici https://www.w3schools.com/js/js_htmldom_navigation.asp

***Creating New HTML Elements (Nodes) and deliting

**********************JS Browser BOM 123**********************************
Browswer Objest Modeling, omogucava JS-u da komunicia sa brauserom

window object kome pripadaju sve globalne promenjive i suportovan je skoro u svim browsers -ima
cak je  i HTML DOM property od window objecta tako da je

window.document.getElementById("header");
isto sto i
document.getElementById("header");

*** Window Size 123

Imamo 2 propertija koja mogu da se koriste da se odredi velicina window sa

window.innerHeight - the inner height of the browser window (in pixels)
window.innerWidth - the inner width of the browser window (in pixels)

primer

 <p id="demo"></p>

  <script>
    var w = window.innerWidth
            document.documentElement.clientWidth
            document.body.clientWidth;

    var h = window.innerHeight
            document.documentElement.clientHeight
            document.body.clientHeight;

    var x = document.getElementById("demo");
    x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
  </script>

Some other methods:

window.open() - open a new window
window.close() - close the current window
window.moveTo() -move the current window
window.resizeTo() -resize the current window

*** Window Screen 123

screen.width  --> document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;
screen.height --> document.getElementById("demo").innerHTML =  "Screen Height: " + screen.height;
screen.availWidth --> ova dva su ista kao iznad samo minus tool barovi i window bar
screen.availHeight

*** Window Location 123

Some examples:

window.location.href             returns the href (URL) of the current page
window.location.hostname         returns the domain name of the web host
window.location.pathname         returns the path and filename of the current page
window.location.protocol         returns the web protocol used (http: or https:)
window.location.assign()        loads a new document

Ova zadnja da se objasni, znaci otvara novi dokument, nesto kao href:

<input type="button" value="Load new document" onclick="newDoc()">

<script>
function newDoc() {
    window.location.assign("https://www.w3schools.com")
}
</script>

*** JavaScript Window Navigator 123
window.navigator objekat sadrzi informacije o posetiocu browser-a i moze biti napisan bez windows prefiksa

Provera dal je cookie dozvoljen na stranici pomocu navigator.cookieEnabled
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"navigator.cookieEnabled is " + navigator.cookieEnabled;
</script>

.navigator ima jos parametre koje mogu da kazu koja je verzija browsera, koji mu je kod itd ali te informacije ne bi
trebale da se uzmu zdravo za gotovo jer razliciti browseri imaju ista imena i kodove. opsirnije na strani
https://www.w3schools.com/js/js_window_navigator.asp

Jos imamo parmetre koji kazu koja je platforma 32 ili 64 bita
koji je jezik ukljuce
i dal je java dozvoljena:
document.getElementById("demo").innerHTML = navigator.platform;
document.getElementById("demo").innerHTML = navigator.language;
document.getElementById("demo").innerHTML = navigator.javaEnabled();

**** JavaScript Popup Boxes 123

Postoje 3 vrste ppopup-a u java scriptu Alert box, Confirm box, and Prompt box

***Alert box iskace kao tekst i treba da se pritisne ok da bi se nastavilo. On iskace da bi se nesto saopstilo posetiocu

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    alert("I am an alert box!");
}
</script>

*** Confirm box on iskace kad od poosetioca se trazi da nesto prihvati ili potvrdi. Ima mogucnost da izabere ok ili
cancel a popup vraca booliane true ili false

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
    function myFunction() {
        var txt;
        if (confirm("Press a button!") == true) {
            txt = "You pressed OK!";
        } else {
            txt = "You pressed Cancel!";
        }
        document.getElementById("demo").innerHTML = txt;
    }
</script>

Prompt box koristi se kad zelimo da user upise neki input pre nego dodje na stranicu, takodje ima ok ili kancel
a popup vraca value od inputa ili nulu

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var txt;
    var person = prompt("Please enter your name:", "Harry Potter");
    if (person == null || person == "") {
        txt = "User cancelled the prompt.";
    } else {
        txt = "Hello " + person + "! How are you today?";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

kao sto vidimo prompt ima 2 parametra, prvi je poruka iznad input polja a drugi je default tekst u input polju

*** Timing Events 123

Oni omogucavaju da se funkcije izvrse posle odredjenog vremena
postoje dve

setTimeout(function, milliseconds)
izvrsava funciju posle odredjenog broja sekundi

setInterval(function, milliseconds)
isto kao Timeout samo sto ponavlja funkciju neprestano. Moze za slajder da se koristi

setTimeout() primer:

<button onclick="setTimeout(myFunction, 3000);">Try it</button>

<script>
function myFunction() {
    alert('Hello');
}
</script>

setInterval() primer:

<p id="demo"></p>

<script>
var myVar = setInterval(myTimer, 1000);

function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

window.clearInterval() stopira izvrsenje intervala


<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(myTimer ,1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

*** Cookies

Je dokument smesten na racunaru korisnika u kome se skladiste informacije o njegovoj poseti odredjenoj web stranici

JS pomocu pomocu document.cookie propertiom moze da napravi cita i brise cookie sa racunara

*Da se napravi:

document.cookie = "username=John Doe";

takodje moze da se stavi vreme kad ce da istekne cookie

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

*da se iscita:

var x = document.cookie;

* da se updejtuje je tako sto se samo napravi novi, tj da se zamenii sa drugim

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Da se izbrise treba samo da se expires stavi u proslo vreme