Javascript
Intro
Programiranje?
Javascript?
JQuery?
Plan i program
1. Uvod, osnovna sintaksa, DOM
2. HTTP/AJAX, uzimanje i manipulacija podacima sa servera
if( sveJeOK ) {
3. Memory Game - Uvod u Objektno orijentisan JS
4. Uvod u AngularJS/React
} else {
3. radimo na unapređenju gradiva sa prva dva časa
}
Plan i program
Predavanje
Vežba
Mini projekat
subota
nedelja ... subota
BITNO!
4 nedelje je malo vremena!
Ukoliko je ovo teško, možete da pređete u lakšu grupu
Javascript
Izvršava se u browseru i na serveru (NodeJs)
Javascript
Promenljive
keyword: var
var imePromenljive = "neka vrednost";
var broj = 5;
var student = {ime: "Dusan", prosek: 9.05};
var polaznici = ["Petar", "Ana", "Milan"];
Javascript
Tipovi podataka
"neka vrednost" - string
5 - broj
{ime: "Dusan", prosek: 9.05} - objekat
["Petar", "Ana", "Milan"] - niz
Javascript
Kontrola toka
keywords: if, else
if (4 < 5) {
console.log('hello');
} else {
console.log('nooooo');
}
Javascript
Kontrola toka
keywords: switch
var x = 10;
switch(x){
case 10: {
console.log("it's 10");
break;
}
default:{
console.log("promenljiva ne zadovoljava ni jedan slucaj");
}
}
var x = 4;
switch(x){
case 2: {
console.log("it's 2");
break;
}
case 4: {
console.log("it's 4");
break;
}
default:{
console.log("?!?");
}
}
Javascript
Petlje
keywords: for
for(var i = 0; i < 10; i ++){
console.log(i);
}
var niz = [1, 1, 2, 3, 5, 8, 13, 21];
for(var i=0; i< niz.length; i++){
console.log(niz[i]);
}
Javascript
Funkcije
keywords: function
function sabiranje(a,b,c){
return a+b+c;
}
sabiranje - ime funkcije
return - vraća neku vrednost
var x = sabiranje(1,3,4);
Javascript
Vežba 1
1. Napisati funkciju koja prima string kao parametar, broji sve njegove samoglasnike i vraća rezultat.
2. Napisati funkciju koja prima niz brojeva i vraća zbir svih deljivih sa 7.
Javascript + HTML
<head>
<script src="app.js" ></script>
</head>
//app.js
alert("Hello world");
JQuery
- Najčešeće se koristi za manipulaciju DOMom
- Komunikaciju sa serverom
- Animacije
JQuery predstalja skup korisnih funkcija- biblioteka.
JQuery
Koristi css selektore za dohvatanje elemenata
var header = $(".header");
JQuery
1. Koristeći developer konzolu u browseru i JQuery, otići na sajt https://developer.mozilla.org i promeniti background color na body elementu u crvenu. Takođe, zameniti tekst "Shared knowledge for the Open Web" nekim drugim.
Vežba 2
DOM
Reprezentacija HTML-a u browseru
DOM
Vežba 3.
Napraviti input text i dugme. Kada korisnik klikne na dugme, uzeti vrednost input polja i upisati ga u poseban div.
Mini projekat
Loto listić
Koristeći samo JQuery, izgenerisati loto listić 7/39 (slika). Korisnik može da izabere do 7 brojeva u svakoj koloni. Takođe, brojeve je moguće i odselektovati.