HTML, CSS i JAVASCRIPTWEB TEHNOLOGIJE - predavanje 5

START IT - INĐIJA

#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

MISIJAAnalitičke sposobnosti i

“programersko” razmišljanje

UVODProgramski jezik

Interpretira se

Izvršava se najčešće u browseru

Najčešća upotreba: Dinamički sadržaj, animacije,

veza sa serverom

Osnovne operacije

Osnove jezikaPromenljivevar 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 - yx * yx / yx % y

var x = “StartIt”;var y = “Centar”;

x + “ ” + y

var x = true;var y = false;

x && yx || y!x!y

Za imena promenljivih koristiti a-z, 0-9 i _. Ne koristiti ključne reči.

Nekoliko primeravar 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);

a brezultat

true truetrue

true falsefalse

false truefalse

false falsefalse

ILI (||)

Logičke operacijeI (&&)

a brezultat

true truetrue

true falsetrue

false truetrue

false falsefalse

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

VEŽBAhttp://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.

Stringovi

“Danas učimo osnove programiranja u Inđiji”

var tekst1 = “Danas učimo”;var tekst2 = ‘osnove programiranja’;

Konkatenacija

Dužinavar 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

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 9U programerskom svetu, ovi brojevi se

nazivaju INDEKSI

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

VEŽBANapraviti 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ć”

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

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”

/

Operatori za poređenje < Manje od

> Veće od<= Manje ili jednako od>= Veće ili jednako od=== Jednako!== Nije jednako

IF - nekoliko primeraif (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”);

}

ELSEelse zaokružuje deo koda koji će se izvršiti ako uslov u if-u

nije ispunjenif (uslov) { kod koji će se izvršiti ako je uslov zadovoljen (true);} else { kod koji će se izvršiti ako uslov nije zadovoljen (false);}

ELSEvar 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?

ELSE IFKoristi 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;}

ELSE IFelse 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;}

ELSE IFvar 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”

VEŽBA1. Napravti promenljive ime i prezime. Ako je

ime duže od prezimena, ispisati ime, a u suprtnom ispisati prezime.

2. 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”.

3. 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...

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.

Bonus: Istražiti Switch naredbu

DOMAĆI ZADATAK

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

HVALA VAM NA PAŽNJI!PITANJA?