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"> <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>
function validateform() { var x = document.forms["mojaform"]["brojek"].value; if (x == null x == "") { } } alert("unesite broj od 3 do 50" ); return false; if (isnan(x) x < 3 x > 50) { alert("unesite broj od 3 do 50"); return false; } <form name="mojaform" action="readbrek.php" onsubmit="return validateform()" method="post"> <p>unesite broj ekipa ili takmičara od 3 do 50</p> <input id="numb" type="text" name="brojek"><input type="submit" onclick="myfunction()"value="ok."></form> </div> <div class="col-3 col-m-12"> <div class="aside"> <p><img src="slike/zastave/srbija.png"></p> </div> </div>
</div> <div class="footer"> <p id="footer"></p> document.getelementbyid("footer").innerhtml = "<p> " + new Date().getFullYear() + " JeLiZora? All rights reserved.</p>"; </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> var kolaime1 = "Fiat Punto"; var kolaime2 = 'Fiat Punto'; document.getelementbyid("ovde").innerhtml = kolaime1 + "<br>" + kolaime2; </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> 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; </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> 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; </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> 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; } </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.start() kola.drive() kola.tezina = 1200kg kola.brake() kola.boja = zelena 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> document.getelementbyid("tu").innerhtml = obj.stonoteniskitimovi[1].imetima + " " + obj.stonoteniskitimovi[1].mestotima; Stktimovi.html Pretvara objekat od JSON stringa <!DOCTYPE html>
<html> <body> <h2>kreiranje objekta od JSON Stringa</h2> <p id="tu"></p> var text = '{"stonoteniskitimovi":[' + '{"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; </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> function mojafunkcija() { var text = '{"stonoteniskitimovi":[' + '{"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; </body> </html>