Kurs Javascripta #1 u Indjiji.

1. HTML, CSS i JAVASCRIPT
WEB TEHNOLOGIJE - predavanje 5
START IT - INĐIJA

2. #1 - Uvod u JS i osnove programiranja (promenljive, operacije, kontrola toka)
#2 - Osnove br.2 (nizovi, petlje, funkcije)
#3 - DOM manipulacija
#4 - JQuery
PLAN I PROGRAM JS KURSA

3. MISIJA
Analitičke sposobnosti i “programersko” razmišljanje

4. UVOD
Programski jezik
Interpretira se
Izvršava se najčešće u browseru
Najčešća upotreba: Dinamički sadržaj, animacije, veza sa serverom

5. Osnovne operacije
Osnove jezika
Promenljive
var x = 5;
var y = “tekst”;
var z = true;
var n = 5 + 10;
var rezultat = 3 * 2 + 3;
var x = 10;
var y = 15;
x + y
x - y
x * y
x / y
x % y
var x = “StartIt”;
var y = “Centar”;
x + “ ” + y
var x = true;
var y = false;
x && y
x || y
!x
!y
Za imena promenljivih koristiti a-z, 0-9 i _.
Ne koristiti ključne reči.

6. Nekoliko primera
var x = 10;
var y = 3;
var sabiranje = x + y;
var moduo = x % 3;
console.log(rezultat);
console.log(moduo);
var rec1 = “Učimo”;
var rec2 = “Programiranje”;
var recenica = rec1 + rec2;
console.log(recenica);
var red = true;
var yellow = true;
var orange = red && yellow;
console.log(orange);
console.log(!red);

7. a b
rezultat
true true
true
true false
false
false true
false
false false
ILI (||)
Logičke operacije
I (&&)
a b
rezultat
true true
true
true false
true
false true
true
false false

8. console.log(...)
Ispis
alert(...)
Ispisuje u developer consolu (f12 ili ctrl + i)
Mali iskačući prozor (popup)
Unutar zagrada stavlja se promenljiva ili tekst koji želite da ispišete

9. VEŽBA
http://jsbin.com
- Uključiti samo console i javascript prozore
Definisinisati po dve promenljive svakog tipa (broj, tekst, logička vrednost)
i ispisati rezultate svih pomenutih operacija.

10. Stringovi
“Danas učimo osnove programiranja u Inđiji”
var tekst1 = “Danas učimo”;
var tekst2 = ‘osnove programiranja’;
Konkatenacija Dužina
var rezultat1 = tekst1 + tekst2;
var rezultat2 = tekst1.concat(tekst2);
tekst1.concat(“ “, tekst2, “ u Inđiji”);
tekst1.length (daje rezultat 11)
Broji i blanko (razmak, prelazak u nov red) karaktere

11. Stringovi - substring
“Javascript”.substring(x,y)
x - mesto početka “sečenja”
y - mesto završetka “sečenja”
Izdvajanje dela teksta.
J a v a s c r i p t
Iseći “Javas” iz “Javascript” :
“Javascript”.substring(0,5)
0 1 2 3 4 5 6 7 8 9
U programerskom svetu, ovi brojevi se nazivaju INDEKSI

12. Stringovi - indexOf
16
var tekst = “Posle sledeće vežbe je pauza za ručak”;
tekst.indexOf(“ž”)
Vraća index određenog substringa.
Koristi se i za ispitivanje da li određeni tekst sadrži neku reč, rečenicu itd.
tekst.indexOf(“sledeće vežbe”)
6
Ukoliko traženi substring ne postoji unutar teksta (stringa), rezultat je -1

13. VEŽBA
Napraviti 3 promenljive sa vašim imenom i prezimenom i omiljenom
bojom. Konkatenirati (spojiti) ih u dodeliti rezultat novoj promenljivoj.
Sa novom promenljivom uraditi sledeće:
1. Ištampati dužinu
2. Ištampati prva 4 i poslednja 4 karaktera (posebno)
3. Ištampati indeks substringa “ić”

14. IF
Omogućava izvršavanje koda ukoliko je zadati uslov ispunjen
if (uslov) {
kod koji će se izvršiti ako je uslov zadovoljen;
}
Uslov ima dve vrednosti: tačno i netačno (true i false)
Ukoliko je uslov tačan, izvršiće se kod unutar vitičastih {} zagrada

15. IF
var a = 1;
var b = 2;
If (a < b) {
console.log(“A je manje od
B”);
}
var a = 3;
var b = 2;
If (a < b) {
console.log(“A je manje od
B”);
}
“A je manje od B” /

16. Operatori za poređenje
< Manje od
> Veće od
<= Manje ili jednako od
>= Veće ili jednako od
=== Jednako
!== Nije jednako

17. IF - nekoliko primera
if (2 * 5 === 10) {
console.log(“to je tačan
odgovor”);
}
if ( “StartIt”.length > 5){
console.log(“Dobrodošli u StartIt centar!”);
}
if ( 2 < 5 && 18 > 10 ){
console.log(“Danas je lep dan za programiranje”);
}

18. ELSE
else zaokružuje deo koda koji će se izvršiti ako uslov u if-u nije ispunjen
if (uslov) {
kod koji će se izvršiti ako je uslov zadovoljen (true);
}
else {
kod koji će se izvršiti ako uslov nije zadovoljen (false);
}

19. ELSE
var a = 3;
var b = 2;
if (a < b) {
console.log(“A je manje od B”);
} else {
console.log(“A nije manje od
B”);
}
“A nije manje od B”
if (16/4 === “else”.length) {
console.log(“If-else je mega kul”);
} else {
console.log(“If-else je kul”);
}
“If-else je mega kul”
Da li je if-else kul ili mega kul?

20. ELSE IF
Koristi se za povezivanje više različitih uslova
if (uslov1) {
kod koji će se izvršiti ako je uslov1 zadovoljen;
}
else if (uslov2) {
kod koji će se izvršiti ako uslov1 nije zadovoljen i uslov 2 je zadovoljen;
}
else {
kod koji će se izvršiti ako uslov1 i uslov2 nisu zadovoljeni;
}

21. ELSE IF
else if se može koristi ponavljati neograničen broj puta, ali sa različitim uslovima
if (uslov1) {...}
else if (uslov2) {...}
else if (uslov 3) {...}
...
...
...
else if (uslov n){...}
else {
kod koji će se izvršiti ako se nijedan prethodni uslov nije ispunjen;
}

22. ELSE IF
var sat = 12;
if (sat > 6 && sat < 10) {
console.log(“Dobro jutro”);
} else if (sat >= 10 && sat < 18) {
console.log(“Dobar dan”);
} else {
console.log(“Dobro vece”);
}
“Dobar dan”
var broj = 7;
if (broj > 10) {
console.log(“Broj je veći od
10”);
} else if (broj < 8) {
console.log(“Broj je manji od
8”);
} else {
console.log(“Broj je između 8 i 10”);
} “Broj je manji od 8”

23. VEŽBA
1. Napravti promenljive ime i prezime. Ako je ime duže od
prezimena, ispisati ime, a u suprtnom ispisati prezime.
1. Ako je zbir dana i meseca vašeg datuma rođenja veći ili jednak od
dužine vašeg imena i prezimena ispisati, ‘Woohoo”, a u suprotom
ispisati “Meeeh”.
1. Jedna promenljiva ima vrednost od 0-100 i predstavlja bodove na
predmetu Osnove programiranja. Na osnovu bodova ispisati
ocenu.
0-50 -> nije položio, 51-60 -> 6, 61->70 - 7...

24. https://www.codecademy.com/learn/javascript - SAMO UNIT 1 (Introduction to Javascript)
Napraviti igru kamen, papir, makaze. 2 promenljive predstavljaju 2 igrača koje imaju neku od
vrednosti “kamen”, “papir” ili “makaze”. (primer: var pera = “makaze”). Koristeći if/else i
poznata pravila igre (kamen je jači od makaza, makaze od papira i papir od kamena),
napisati koji je igrač pobedio ili “Nerešeno” ako su oba igrača izabrali isto.
DOMAĆI ZADATAK

25. https://developer.mozilla.org/en-US/docs/Web/JavaScript
https://www.youtube.com/watch?v=UogH74LirBc
http://www.w3schools.com/jsref/jsref_obj_string.asp
KORISNI LINKOVI

26. HVALA VAM NA PAŽNJI!
PITANJA?