Klijentske web tehnologije

Vežbe | 7. termin

JavaScript - Povezivanje sa stranicom

Interni <script> tag

index.html

HTML kod...

<script>
    // JavaScript kod...
</script>

HTML kod...

Eksterni .js fajl

index.html

HTML kod...
<script src="skripta.js"></script>
HTML kod...

skripta.js

// JavaScript kod...

Linkovi:

• Where should I put <script> tags in HTML markup?

JavaScript - Sintaksa

Komentari

// Inline...

/*
Multiline
...
*/

Promenljive

// Novi nacin (ES6 - 2015)
let x = 33   // promenljiva
const c = 49 // konstanta

// Stari nacin
var v = 17   // izbegavati

• nije obavezno zavrsiti liniju sa ;
• JavaScript Let vs Var vs Constant (YouTube)

Scope

let globalna = 0

function funkcija() 
{
    let lokalna = 0
}

Dynamic-typing

let x = 17
x = 'Tekst'
x = function() { ... }

Redeclaration (error)

let x = 17
let x = 33
// Uncaught SyntaxError: redeclaration of let x

Operacije i izrazi

Aritmeticke:
  + - * / %
Logicke:
  == != === !==
  && || !

4 * 3       // => 12
12 / 5      // => 2.4
11 % 4      // => 3
'str ' + 17 // => 'str 17'

4 == 4      // => true
4 == '4'    // => true
4 === '4'   // => false

true == 1   // => true
true === 1  // => false

// itd.

String

Literali

let s1 = "Tekst"
let s2 = 'Tekst'
let s3 = `Tekst` // template literal

Izvršavanje koda

funkcija(17) // poziv funkcije (validno)

function funkcija(x) // definicija funkcije
{
    // ...
}

funkcija(33) // poziv funkcije (validno)

Grananje (if-else)

if(uslov) {
    // ...
} else if(uslov) {
    // ...
} else {
    // ...
}

Petlje

While

while(uslov) {
    // ...
}

For

for(let i = 0; i < 10; i++) {
    // ...
}

For-of (foreach)

for(const element of array) {
    // ...
}

Umesto const može i let, efekat je uvek takav da se u svakoj iteraciji definiše nova promenljiva element.

Text output

Log

console.log('Tekst')

Alert

alert('Tekst')

JavaScript - Interakcija sa stranicom

Events

<!-- [Klik] na element -->
<p onclick="fn()">On Click</p>

<!-- Pointer [Preko] ili [Izvan] elementa -->
<p onmouseover="fn()">On Mouse Over</p>
<p onmouseout="fn()">On Mouse Out</p>

<!-- Na [Pritisak] ili [Pustanje] klika -->
<p onmouseup="fn()">On Mouse Up</p>
<p onmousedown="fn()">On Mouse Down</p>

<!-- Na [Pritisak] dugmeta na tastaturi -->
<input type="text" onkeydown="fn()">

<script>
    function fn() {
        // ..
    }
</script>

Pristup HTML elementima

JavaScript je objektno-orjentisani jezik. HTML elementima pristupamo pomoću reference na objekat, a ta referenca se može dobiti na više načina:

this

<p onclick="fn(this)">Paragraf</p>

<script>
    function fn(x) {
        // x: referenca na HTMLElement objekat
    }
</script>

getElementById()

<p id="p1">Paragraf</p>

<script>
    // x: referenca na HTMLElement objekat
    let x = document.getElementById('p1')
</script>

Izmena HTML elementa

document.write() - Radikalna izmena!

document.write('Ovaj tekst je postao jedini sadrzaj stranice')
document.write(', a sada je dodat i ovaj tekst')
document.write(', i jos jedan...')

Neka od svojstava HTML elemenata koja se mogu menjati:

innerHTML

Property HTMLElement objekta koji uzima (get) ili postavlja (set) sadržaj elementa

<div id="d1">
    <span>Stari span</span>
</div>

<script>
    // x: referenca na HTMLElement objekat
    let x = document.getElementById('d1')
    x.innerHTML = '<p>Novi paragraf</p>'
</script>

pomocu eventa, JS kod u HTML-u:

<div onclick="this.innerHTML='<p>Novi paragraf</p>'">
    <span>Stari span</span>
</div>

Rezultat je ekvivalentan HTML kodu:

<div id="d1">
    <p>Novi paragraf</p>
</div>

Source: MDN | innerHTML

className

<p id="p1" class="c1">Paragraf</p>

<script>
    // x: referenca na HTMLElement objekat
    let x = document.getElementById('p1')
    x.className = 'c2 c3'
</script>

Rezultat je ekvivalentan HTML kodu:

<p id="p1" class="c2 c3">Paragraf</p>

style

Property HTMLElement objekta preko koga se postavljaju ili citaju vrednosti svojstava inline CSS-a tog elementa (svojstva postavljena preko style attributa)

<p id="p1">Paragraf</p>

<script>
    // x: referenca na HTMLElement objekat
    let x = document.getElementById('p1')
    x.style.fontSize = '25px'
</script>

Rezultat je ekvivalentan HTML kodu:

<p id="p1" style="font-size: 25px;">Paragraf</p>

Source: MDN | style

href

Property HTMLAnchorElement objekta

<a id="a1" href="https://google.com">Paragraf</a>

<script>
    // x: referenca na HTMLAnchorElement objekat
    let x = document.getElementById('a1')
    x.href = 'https://duckduckgo.com'
</script>

HTML elementi

• Različiti HTML elementi imaju različite osobine. Na primer, HTMLAnchorElement predstavlja a HTML element i poseduje svojstvo href, dok HTMLImageElement predstavlja img HTML element i poseduje svojstvo src, itd.
• Lista HTML element interfejsa (Za svaki od interfejsa u listi postoji detaljna dokumentacija, klik na link)

Elementi za interakciju sa stranicom

Text, password, number

<input type="text">
<input type="password">
<input type="number">

<script>
// Pristup podacima preko JavaScript-a 
// (pretpostavka je da su reference na elemente vec dobijene)
inpText.value // string
inpPass.value // string
inpNum.value  // number
</script>

Radio button

HTML atribut name je ono što povezuje radio input-e sa istom vrednošću tog atributa da budu mođusobno isključivi.

<input type="radio" id="rb-da" name="anketa" value="da">
<label for="rb-da">Da</label> <br>

<input type="radio" id="rb-ne" name="anketa" value="ne" checked> 
<label for="rb-ne">Ne</label>
<!-- checked atribut = čekirano po defaultu -->

<script>
// Vrednost atributa checked će biti true/false u zavisnosti od toga da li je dugme čekirano
inpRadioDa.checked // => false
inpRadioNe.checked // => true (zbog atributa checked u html-u)

inpRadioDa.value   // => "da"
inpRadioNe.value   // => "ne"
</script>

Label element se vezuje za željeni input element, pa se u ovom slučaju klik na label posmatra kao klik na radio button.

Checkbox

<input type="checkbox" id="cb-c" value="code" checked>
<label for="cb-c">Code</label> <br>

<input type="checkbox" id="cb-a" value="art"> 
<label for="cb-a">Art</label> <br>

<input type="checkbox" id="cb-m" value="music" checked> 
<label for="cb-m">Music</label>
<!-- checked atribut = podrazumevano čekirano -->

<script>
// Vrednost atributa checked će biti true/false u zavisnosti od toga da li je dugme čekirano
inpCheckCode.checked  // => true (zbog atributa checked u html-u)
inpCheckArt.checked   // => false
inpCheckMusic.checked // => true (zbog atributa checked u html-u)

inpCheckCode.value    // => "code"
inpCheckArt.value     // => "art"
inpCheckMusic.value   // => "music"
</script>

Select

<select id="lang">
    <option value="javascript" selected>JavaScript</option>
    <option value="python">Python</option>
    <option value="java">Java</option>
</select>
<!-- selected atribut = podrazumevano selektovana opcija -->

<script>
const selectElement = document.getElementById('lang');

// Vrednost selectedIndex atributa će biti indeks trenutno selektovane opcije
selectElement.selectedIndex      // => 0 (indeks prve opcije zbog atributa selected u html-u)

// Vrednost value atributa će biti vrednost trenutno selektovane opcije
selectElement.value              // => "javascript" (zbog atributa selected u html-u)

// Možemo postaviti novu vrednost koristeći value atribut
selectElement.value = "python";  // Sada je "Python" selektovan

// Takođe možemo koristiti selectedIndex atribut za promenu selektovane opcije
selectElement.selectedIndex = 2; // Sada je "Java" selektovana
</script>

Ostalo

• optgroup
• textarea; atributi: rows, cols
• button (slika unutar dugmeta)
• fieldset, legend (forma unutra)

This site is open source. Improve this page.