iv lekcija - matkosmatkos.in.rs/kurs/stvari/iv lekcija.pdf · sportski turniri- bergerove tablice ...

IV lekcija

Sadržaj:

1. U vezi upitnika proširenje- izbor- konačno

2. U vezi Bergera- kako se pravio ovaj sajt-nalazi se u Beloj knjizi

3. Kako se vrši validacija forme input text

4. JSON

3.Kako se vrši validacija forme input text

<!DOCTYPE html>

<html>

<head>

<title>Bergerove tablice</title>

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bergerove tablice</title>

<link rel="stylesheet" href="bergerstiindexl.css">

</head>

<body>

<div class="header">

<img align="center" src="slike/ZA.png"

width=80 >Ovaj program su osmislili stonoteniseri <b>Zorica Jelid</b> i <b>Aleksandar

Todorovid</b>.

Ovo je program za pravljenje tabela parova i kola za turnire u raznim sportovima<img

align="center" src="slike/ZA.png"

width=70 >

</div>

<div class="row">

<div class="col-3 col-m-3 menu">

<ul>

<li><a href="pocetnasr.php"target=_blank><img

src="slike/zastave/srbija.png"width="25%"><b> Sportski turniri</b></a></li>

<li><a href="itiniziale.php"target=_blank><img src="slike/zastave/italija.png"width="25%"><b>

Girone all'italiana</b></a></li>

<li><a href="depocetna.html"target=_blank><img src="slike/zastave/nemacka1.png"

width="25%"><b> Rundenturnier</b></a></li>

<li><a href="enpocetna.html"target=_blank><img src="slike/zastave/engleska1.png"

width="25%"><b> Round-robin</b></a></li>

</ul>

</div>

<div class="col-6 col-m-9">

<h1>Sportski turniri- Bergerove tablice </h1>

<p>

Ovo je program za pravljenje tabela parova i kola za turnire u raznim sportovima</p>

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

<script>

</div>

<div class="footer">

<p id="footer"></p>

<script>

document.getElementById("footer").innerHTML = "<p>© " + new Date().getFullYear() + "

JeLiZora? All rights reserved.</p>";

</script>

</div>

</body>

</html>

4.Uvođenje programskog jezika Json

Za razumevanje je potrebno da se znaju stringovi i nizovi u JavaScriptu.

JavaScript Stringovi

JavaScript stringovi se koriste za cuvanje I manipulisanje tekstovima.

JavaScript Stringovi

JavaScript string prosto cuva seriju karaktera kao npr. "Stoni tenis".

String moze da bude bilo koji tekst koji je stavljen izmedju navodnika. Mogu da se koriste

jednostruki Ili dvostruki navodnici:

Example

var kolaModel = "Fiat Punto";

var kolaModel ='Fiat Punto';

kolanavodnici.html

<!DOCTYPE html>

<html>

<body>

<p id="ovde"></p>

<script>

var kolaIme1 = "Fiat Punto";

var kolaIme2 = 'Fiat Punto';

document.getElementById("ovde").innerHTML =

kolaIme1 + "<br>" + kolaIme2;

</script>

</body>

</html>

Možete da koristite navodnike I unutar stringa ali se koriste drugačije ( ako su okolo upotrebljene

dvostruke onda unutra jednostruke I obrnuto):

Primer

var tim = "Rudar";

var tim = "STK 'Rudar'";

var tim = 'Ime tima je "Budućnost"';

Dužina stringa - Length

Primer

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

var sln = txt.length;

Specijalni karakteri

Zato što string mora da bude napisan unutar navodnika može doći do grešaka kao u sledećem

primeru:

var y = "Ja igram stoni tenis za STK "Budućnost" ."

Ovakav string će biti isečen ovako "Ja igram stoni tenis za STK "

Rešenje ovakvog problema je u korišćenju kose crte \ (escape character).

Kosa crta vraća specijalni karakter unutar stringa:

Primer

Karijera.html Kako se koriste specijalne karaktere u stringu

<!DOCTYPE html>

<html>

<body>

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

<script>

var x = 'Jel\' igraš stoni tenis?';

var y = "Da, ali ne igram više za \"Rudar\" iz KOstolca.";

document.getElementById("demo").innerHTML = x + "<br>" + y;

</script>

</body>

</html>

Znak (\) može takođe da se koristi za umetanje i drugih specijalnih znakova u string.

Ovo je lista specijalnih znakova koji mogu biti dodati tekstualnom stringu pomoću ovog znaka.

Kod Prikaz na izlazu

\' Jednostruki navodnik

\" Dvostruki navodnik

\\ backslash

\n Novi red- ne radi

\r carriage return

\t tab

\b backspace

\f form feed

Prelom dugog koda

Radi bolje čitljivosti treba izbegavati programske linije duže od 80 karaktera.

U JavaScript programskim linijama to je najbolje da se učini nakon operatora:

Primer

document.getElementById("demo").innerHTML =

"Stoni tenis.";

A u toku stringa to isto radite pomoću jednostruke kose linije (single backslash):

Example

document.getElementById("demo").innerHTML = "Stoni \

tenis!";

Neki brauzeri to ne dozvoljavaju pa je najbolji način korišdenjem +:

Primer

document.getElementById("demo").innerHTML = "Stoni" +

"tenis!";

Ako uradite to ovako onda vam program uopšte ne radi

<!DOCTYPE html>

<html>

<body>

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

<script>

var x = 'Jel\' igraš

stoni tenis?';

var y = "Da, ali ne igram više za \"Rudar\" iz\n KOstolca.";

document.getElementById("demo").innerHTML = x + "<br>" + y;

</script>

</body>

</html>

String Methods

Method Description

charAt() Returns the character at the specified index (position)

charCodeAt() Returns the Unicode of the character at the specified index

concat() Joins two or more strings, and returns a copy of the joined strings

fromCharCode() Converts Unicode values to characters

indexOf() Returns the position of the first found occurrence of a specified value in a

string

lastIndexOf() Returns the position of the last found occurrence of a specified value in a

string

localeCompare() Compares two strings in the current locale

match() Searches a string for a match against a regular expression, and returns the

matches

replace() Searches a string for a value and returns a new string with the value

replaced

search() Searches a string for a value and returns the position of the match

slice() Extracts a part of a string and returns a new string

split() Splits a string into an array of substrings

substr() Extracts a part of a string from a start position through a number of

characters

substring() Extracts a part of a string between two specified positions

toLocaleLowerCase() Converts a string to lowercase letters, according to the host's locale

toLocaleUpperCase() Converts a string to uppercase letters, according to the host's locale

toLowerCase() Converts a string to lowercase letters

toString() Returns the value of a String object

toUpperCase() Converts a string to uppercase letters

trim() Removes whitespace from both ends of a string

valueOf() Returns the primitive value of a String object

Nizovi

<!DOCTYPE html>

<html>

<body>

<p>Najbolji nacin za prikazivanje i manipulisanje nizom je for petlja:</p>

<button onclick="mojaFunkcija()">Voće u ponudi</button>

p id="ovde"></p>

<script>

function mojaFunkcija() {

var index;

var text = "<ul>";

var voce = ["Banana", "Narandza", "Limun", "Mandarina"];

for (index = 0; index < voce.length; index++) {

text += "<li>" + voce[index] + "</li>";

}

text += "</ul>";

document.getElementById("ovde").innerHTML = text;

}

</script>

</body>

</html>

JavaScript JSON

JSON je format za cuvanje I prenos podataka.

JSON se cesto koristi za slanje podataka sa server na web stranicu.

Sta je JSON?

JSON je skracenica od JavaScript Object Notation

JSON je laki format za razmenu podataka.

JSON je nezavistan jezik *

JSON je "samoopisujuci" I lak za razumevanje

* JSON syntax proizilazi iz JavaScript object sintaksne notacije, ali JSON format je samo tekst.

Kod za citanje I pravljenje JSON podataka moze biti pisan u bilo kojem programskom jeziku.

JSON primer

Ova JSON sintaksa definise jedan object polaznikKursa: jedan niz od 3 dosijea polaznika

(objekti):

JSON primer

{

"polaznikKursa":[

{"ime":"Bane", "prezime":"Nikic"},

{"ime":"Bojan", "prezime":"Rankovic"},

{"ime":"Zarko", "prezime":"Zaboravilasam"}

]

}

JSON Format vs. JavaScript Objects

The JSON format is syntactically identical to the code for creating JavaScript objects.

Because of this similarity, a JavaScript program can easily convert JSON data into native

JavaScript objects.

JSON Syntaksna pravila

Podatak je par ime/vrednost

Podaci su međusobno odvojeni zarezom

Vitičaste zagrade obavijaju objekat

Uglaste zagrade grle niz

JSON podaci – Ime I vrednost

JSON podatak je napisan kao par ime/vrednost, baš kao JavaScript objekt.

Ime I vrednost su razdvojeni dvema tačkama a I jedno I drugo su pod znacima navoda:

"imeKluba":"Rudar"

Pažnja JSON ime zahteva dvostruke navode, a JavaScript imena ne.

JSON Objekti

JSON objekti se pišu unutar vitičastih zagrada.

Kao i u JavaScript, objekti mogu sadržati više parova ime/vrednost:

{"imeTima":"Buducnost", "mestoTima":"Krsna"}

JSON Nizovi

JSON nizovi se pišu unutar uglastih zagrada .

Just like in JavaScript, an array can contain objects:

"klubovi":[

{"imeKluba":"Budućnost", "mestoKluba":"Kostolac"},

{" imeKluba ":"Rudar", " mestoKluba ":"Kostolac"},

{" imeKluba ":"Lozovik", " mestoKluba ":"Lozovik"}

]

U gornjem primeru, objekt "klubovi" je niz. On sadrži 3 objekta.

Svaki objekat je jedan klub ( sa imenom I mestom odakle je).

JavaScript Objekti

Objekti iz realnog zivota, osobine, metode

U realnom zivotu, kola su realni objekt.

Kola imaju neke osobine kao npr. Tezina, boja, i metode na primer start i stop:

Object Properties Methods

kola.marka = Opel

kola.model = corsa

kola.tezina = 1200kg

kola.boja = zelena

kola.start()

kola.drive()

kola.brake()

kola.stop()

Sva kola imaju ove osobine (properties), ali su vrednosti razlicite od kola do kola.

Sva kola imaju mogucnost( methods), ali se one izvode razlicit broj puta.

JavaScript Objekti

Ovim kodom dodeljujete prostu vrednost (Opel) promenjivoj koja se zove kola:

var kola = "Opel";

Objekat je promenljiva takodje. Ali objekat moze da sadrzi u sebi vise promenljivih.

Sledecim kodom zadajemo vise vrednosti (Opel, Corsa, zelena) promenljivoj koja se zove kola:

var kola = {tip:"Opel", model:"Corsa", boja:"zelena"};

Vrednosti se zadaju na sledeci nacin ime:vrednost kao par (ime I vrednost su odvojeni dvema

tackama).

JavaScript objekti su kontejneri za imenovane vrednosti .

Objektne osobine (Properties)

ime:vrednost parovi (u JavaScript objectima) se zovu properties.

var persona = {ime:"Zorica", prezime:"Jelic", visina:172,tezina:65, bojaOciju:"crna"};

Konvertovanje nekog JSON Text u JavaScript Objekat

Upotreba JSON je za čitanje podataka sa web servera,I njihov prikaz na web page.

Prvo napravite jedan JavaScript string sa JSON sintaksom:

var text = '{"stonoteniskiTimovi":[' +

'{"imeTima":"STK Lozovik","mestoTima":"Lozovik" },' +

'{"imeTima":"STK Bududnost","mestoTima":"Mala Krsna" },' +

'{"imeTima":"STK Rudar","mestoTima":"Kostolac" }]}';

Onda upotrebite JavaScript built-in funkciju JSON.parse() da bi ste konvertovali string u

JavaScript objekt:

var obj = JSON.parse(text);

Najzad napišite kod za novi JavaScript object na vašoj strani :

Primer

<p id="tu"></p>

<script>

document.getElementById("tu").innerHTML =

obj.stonoteniskiTimovi[1].imeTima + " " + obj.stonoteniskiTimovi[1].mestoTima;

</script>

Stktimovi.html Pretvara objekat od JSON stringa

<!DOCTYPE html>

<html>

<body>

<h2>Kreiranje objekta od JSON Stringa</h2>

<p id="tu"></p>

<script>


'{"imeTima":"STK Lozovik","mestoTima":"Lozovik" },' +

'{"imeTima":"STK Bududnost","mestoTima":"Mala Krsna" },' +

'{"imeTima":"STK Rudar","mestoTima":"Kostolac" }]}';

obj = JSON.parse(text);

document.getElementById("tu").innerHTML =

obj.stonoteniskiTimovi[1].imeTima + " " + obj.stonoteniskiTimovi[1].mestoTima;

</script>

</body>

</html>

Primer programa kada izbacuje sve članove niza koji su u objekti a pisani su kao JSON datoteka,

kao listu:

kaolista.html izbacuje sve članove niza koji su u objekti a pisani su kao JSON datoteka, kao listu:

<!DOCTYPE html>

<html>

<body>

<p>Spisak klubova podunavskog regiona:</p>

<button onclick="mojaFunkcija()">Klubovi</button>

<p id="ovde"></p>

<p id="tu"></p>

<script>

function mojaFunkcija() {


'{"imeTima":"STKBududnost","mestoTima":"MalaKrsna" },' +

'{"imeTima":"STKMorava","mestoTima":"VelikaPlana" },' +

'{"imeTima":"STKLozovik","mestoTima":"Lozovik" },' +

'{"imeTima":"STKRudar","mestoTima":"Kostolac" }]}';

obj = JSON.parse(text);

var index;

var x = "<ul>";

for (index = 0; index < 4; index++) {

x += "<li>" + obj.stonoteniskiTimovi[index].imeTima+ "

"+obj.stonoteniskiTimovi[index].mestoTima+ "</li>";

}

document.getElementById("ovde").innerHTML = x;

}

</script>

</body>

</html>

iv lekcija - matkosmatkos.in.rs/kurs/stvari/iv lekcija.pdf · sportski turniri- bergerove tablice ...

Documents