Bootstrap Bootstrap HTML css i javascript framework Omoguava

Bootstrap

Bootstrap • HTML, css i javascript framework • Omogućava kreiranje sajtova koji izgledaju dobro na desktop računarima, tabletima, mobilnim telefonima • Jednostavan za korišćenje • Kompatibilnost sa različitim browserima 2

Preuzimanje Bootstrapa • Sa adrese http: //getbootstrap. com/ • CDN (Content Delivery Network) • Instalacija pomoću npm menadžera paketa 3

Ekstenzija za bootstrap

Referenciranje CDN b 4 -$ 5

Lokalna instalacija pomoću npm init --yes npm install jquery npm install popper. js npm install bootstrap 6

Korišćenje Bootstrapa • Obezbediti adekvatnu širinu strane i inicijalno zumiranje sadržaja <meta name="viewport" content="width=device-width, initial-scale=1. 0"> • Obezbediti kontejner: • klasa. container obezbeđuje kontejner fiksne širine • klasa. container-fluid obezbeđuje kontejner maksimalne širine, proteže se na ceo viewport 7

Prva strana koja koristi bootstrap <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Uvod u bootstrap</title> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap. min. css"> </head> <body> <div class="container"> <h 1>Ovo je prva bootstrap strana</h 1> <p>Ovo je neki sadrzaj</p> </div> </body> </html> 8

Prikaz strane u browseru 9

Bootstrap Grid • Omogućava korišćenje do 12 kolona u redu • Kolone se rearanžiraju u zavisnosti od širine ekrana • Grid klase: • • • . col- (ekstra mali uređaji - širina do 576 pix). col-sm- (mali uređaji - širina >= 576 pix ). col-md- (srednji uređaji >=768 pix). col-lg- (veliki uređaji, širina >=992 pix). col-xl- (ektrsa veliki uređaji, širina >=1200 pix ) 10

Podela na tri jednake kolone-1 <!DOCTYPE html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=divicewidth, initial-scale=1" /> <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap. min. css" > </head> <body> <div class="container"> <div class="jumbotron"> <h 1>Layout sa 3 kolone</h 1> </div> <div class="row"> <div class="col">Lipsum. . . </div> </div> </body> 11

Podela na tri jednake kolone-2 12

$Klasa za prikaz grida <style>. prikazi-grid [class^='col-'] { padding-top: 5 px; padding-bottom: 5 px;$

Klasa za prikaz grida <style>. prikazi-grid [class^='col-'] { padding-top: 5 px; padding-bottom: 5 px; margin-bottom: 5 px; border: 1 px solid red; } </style> 13

Podela reda na 12 kolona <div class="container"> <div class="row prikazi-grid"> <div class="col-md-1">. col-md-1</div> <div class="col-md-1">. col-md-1</div> </div> 14

Red podeljen na 12 kolona 15

Podela na dve kolone različitih širina <div class="row prikazi-grid"> <div class="col-md-8"> col-md-8 </div> <div class="col-md-4"> col-md-4 </div> 16

Osnovna bootstrap tabela <div class="row"> <table class="table"> <thead> <tr> <th>Ime</th> <th>Prezime</th> <th>Telefon</th> </tr> </thead> <tbody> <tr> <td>Pera</td> <td>Peric</td> <td>123 -456</td> </tr> <td>Mika</td> <td>Mikic</td> <td>345 -567</td> </tr> </tbody> </table> </div> 17

Tabela sa prugama <table class="table-striped"> 18

Tabela sa prugama i borderom <table class="table-striped table-bordered"> 19

Bootstrap Button <div class="container"> <h 2>Stilovi za button</h 2> <button type="button" class="btn">Basic</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-link">Link</button> </div> 20

Bootstrap input <div class="container"> <div class="row"> <form action=""> <div class="form-group"> <label for="Text. Ime">Ime: </label> <input type="text" name="ime" id="Text. Ime" class="form-control"> </div> <div class="form-group"> <label for="Text. Ime">Prezime: </label> <input type="text" name="prezime" id="Text. Prezime" class="form-control"> </div> <div class="form-group"> <label for="Text. Komentar">Komentar: </label> <textarea name="komentar" id="Text. Komentar" cols="30" rows="10" class="form-control"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> 21

Input kontrole 22

Uvod u Java. Script

Java. Script varijante • Java. Script je prvenstveno korišćen za klijentsko programiranje • Client-side Java. Script • Izvršava se u browseru klijenta • Postoji i Java. Script kod koji se izvršava na serveru • Server-side Java. Script , izvršava se na serveru i kreira dinamički sadržaj koji se šalje do browsera • Node. js serverski Java script, nastao 2009. godine • Node. js je serverska platforma bazirana na script mašini Google chrome browsera • Godine 2010 napravljen je menadžer pakeda za Node. js pod nazivom npm 24

Type. Script • Type. Script je programski jezik otvorenog koda razvijen od strane Microsofta, 2012. godine • Kompajlira se u čist Java. Script • Tekuća verzija Type. Script 4. 0 • Type. Script je programski jezik koji predstavlja proširenje javascripta, dodaje tipove podataka, klase i module u Java. Script • Koristi se za kreiranje javascript koda koji se može izvršavati i na klijentu i na serveru 25

Klijentski Java. Script • • Koristi se za izradu klijentskih delova web aplikacija Baziran na C sintaksi Java script kod se interpretira (ne kompajlira se) Java. Script je programski jezik koji podržava: • • Promenljive za čuvanje informacija Operatore za izvođenje operacija i poređenje Funkcije za grupisanje koda u celine koje se mogu više puta pozivati Uslovne izraze i programske petlje za kontrolu programskog toka • Mogućnost kreiranja objekata sa svojstvima, metodama i događajima 26

Izvršavanje klijentskog javascript koda 27

Funkcionisanje Java. Scripta • Java. Script se koristi u kombinaciji sa objektnim modelom dokumenta (DOM) da bi se web strana učinila dinamičkom • Kada se HTML document učita u browser kreira se njegov objektni model, odnosno objekat pod nazivom document • Objekat document je deo objekta window koji predstavlja prozor browsera • Java. Script može modifikovati web stranu kada se ona učitava u browser ili kao odgovor na akciju korisnika 28

Ekstenzija za Java. Script 29

Java. Script sintaksa • Java. Script naredba predstavlja liniju Java. Script koda koji treba da se izvrši • Naredba u Java. Scriptu treba biti napisana u jednoj liniji i treba da se završava operatorom ; • Java. Script naredbe se grupišu unutar bloka { } • Java. Script je osetljiv na velika i mala slova 30

Pisanje javascript-a • Ubacivanje javascript koda u html dokument • u telu html dokumenta • u head delu html dokumenta • Pisanje javascript koda u zasebnom. js dokumentu i njegovo referenciranje upotrebom src atributa • Pisanje javascript koda u zasebnom. js dokumentu na mreži i njegovo referenciranje upotrebom src atributa • Preferira se pisanje javascript koda neposredno pre završnog body taga radi bržeg učitavanja strane 31

Javascript kod u body delu strane <body> <p>Prvi paragraf</p> <p>Poslednji paragraf</p> <script> document. write("test"); </script> </body> 32

Prikazivanje rezultata na konzoli <body> <h 1>Prikaz na konzoli</h 1> <script> //clg console. log("test 1"); console. log("test 2"); </script> <h 3>Kraj dokumenta</h 3> </body> 33

Referenciranje eksternog js fajla <body> <script src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="Kod 01. js"></script> <p> Kraj dokumenta </p> </body>

Referenciranje eksternog js fajla <body> <script src="Kod 01. js"></script> <p> Kraj dokumenta </p> </body> //Kod 01. js document. write("test"); 34

Komentari <script> // prikaz poruke korisniku document. write("Dobar dan svima"); /* Mozete koristit multi-line komentar da biste dodali vise informacija */ alert("Dobar dan svima, takodje!"); </script> 35

Promenljive • • Promenljive u Java. Scriptu počinju slovom ili donjom crtom Koristi se ključna reč var za deklarisanje promenljivih Imena promenljivih su case - sensitive Promenljiva može biti nedefinisana a takođe može imati i null vrednost <script> //deklarisanje promenljive var x; // promenljiva x nema vrednost console. log(x); var y = null; // null promenljiva console. log(y); // deklarisanje i inicijalizacija promenljive var poruka = "Pozdrav svima"; console. log(poruka); </script> 36

Tipovi podataka • Za razliku od C# ne može se specificirati tip promenljive u javascriptu • Promenljiva se deklariše korišćenjem ključne reči var, a zatim Java. Script sam pokušava da odredi njen tip • Java. Script prepoznaje tri prosta tipa: • string • number • boolean 37

Java. Script stringovi <script> var s 1 = "prvi string"; var s 2 = 'drugi string'; var s 3 = `prva linija druga linija treca linija `; document. write(s 1 + " "); document. write(s 2 + " "); document. write(s 3 + " "); document. write(typeof(s 1)); </script> Stringovi se mogu pisati i između jednostrukih navodnika 38

Java. Script brojevi <script> var a = 5; var b = 12. 24; console. log(a); console. log(b); console. log(typeof(a)); </script> 39

Templejt literali <script> var a = 10; var b = 20; var s 1 = `Rezultat: ${a} + ${b} = ${a + b}`; var s 2 = `<table> <tr> <td>${a}</td> <td>${b}</td> </tr> </table>`; document. write(s 2); </script> 40

Java. Script logičke vrednosti <script> var a = true; var b = false; document. write(a + " "); document. write(b + " "); document. write(typeof (a)); </script> 41

Aritmetički operatori • Sabiranje (+) • Oduzimanje (-) • Množenje (*) • Deljenje (/) • Celobrojni ostatak (%) • Inkerementiranje (++) • Dekrementiranje (--) 42

Operatori dodeljivanja <script> x = y; x += y; x -= y; x *= y; x /= y; x %= y; </script> //x //x //x = = = x x x + * / % y y y 43

Operatori poređenja • Promenljive se konvertuju u isti tip pre poređenja sledećim operatorima: • • • == (jednako) != (različito) > (veće) < (manje) >= (veće ili jednako) <= (manje ili jednako) • Promenljive se ne konvertuju u isti tip pre poređenja • === (jednakost po vrednosti i tipu) • !== (nejednakosto po vrednosti ili tipu) 44

Logički operatori • x && y (logičko I) • x || y (logičko ILI) • !x (logičko NE) 45

Rad sa operandom tipa string • Sabiranje – operand koji nije tipa string se konvertuje u string i radi se konkatenacija (sabiranje, tj. spajanje stringova) • Ostale operacije – string se konvertuje u broj, a zatim se obavlja operacija; ako konverzija ne uspe, dobija se vrednost Na. N (Not a Number) <script> var a = 1 + "1"; var b = 2 * "3"; document. write("a=" + a + " "); document. write("b=" + b + " "); </script> 46

Rad sa brojevima <script> var x 1 = 55; var y 1 = 44; var z 1 = x 1 + y 1; document. write("z 1= " + z 1 + " "); document. write(typeof (z 1)); </script> 47

Rad sa boolean vrednostima <script> var a var b var c var d = = true; false; a || b; a && b; document. write("a = " document. write("b = " document. write("c = " document. write("d = " document. write(typeof </script> + a + + b + + c + + d + (a)); " "); 48

Uslovni operator x = (uslov) ? value 1 : value 2; Math. random() [0, 1) <script> var a = Math. round(10 * Math. random()); var b = 10 * Math. random(); var c = a > b ? a : b; document. write("a = " + a + " "); document. write("b = " + b + " "); document. write("c = " + c + " "); </script> 49

Naredba if <script> var a = 10 * Math. random(); var b = 10 * Math. random(); var c=0; if (a > b) { c = a + b; } else { c = a * b; } document. write("a = " + a + " "); document. write("b = " + b + " "); document. write("c=" + c + " "); </script> 50

Rad sa datumom var d = new Date(); Metoda get. Date() get. Day() get. Full. Year() get. Hours() get. Milliseconds() get. Minutes() get. Month() get. Seconds() get. Time() Opis Get the day as a number (1 -31) Get the weekday a number (0 -6) Get the four digit year (yyyy) Get the hour (0 -23) Get the milliseconds (0 -999) Get the minutes (0 -59) Get the month (0 -11) Get the seconds (0 -59) Get the time (milliseconds since January 1, 1970) 51

Prikaz datuma i vremena <script> var d 1 = new Date(); console. log(d 1); var s 1 = d 1. get. Date() + ". " + ( d 1. get. Month() +1 ) + ". " + d 1. get. Full. Year(); console. log(s 1); var s 2 = d 1. to. Locale. Date. String("sr-Latn-RS"); var s 3 = d 1. to. Locale. Time. String("sr-Latn-RS"); console. log(s 2); console. log(s 3); </script> 52

if-else if- else <script> var a = 10* Math. random(); var b = 10* Math. random(); if (a > b) { console. log(`${a} >${b}`); } else if (a==b) { console. log(`${a} == ${b}`); } else{ console. log(`${a} <${b}`); } </script> 53

Switch selekcija <script> var redni. Broj = new Date(). get. Day(); var dan = ""; switch (redni. Broj) { case 0: dan = "Nedelja"; break; case 1: dan = "Ponedeljak"; break; case 2: dan = "Utorak"; break; case 3: dan = "Sreda"; break; case 4: dan = "Cetvrtak"; break; case 5: dan = "Petak"; break; case 6: dan = "Subota"; break; } document. write("Danas je : " + dan); </script> 54