< Nazad na kurseve

Učimo Javascript

Nauči da programiraš kroz popularni jezik JavaScript. Nauči da oživljavaš stranice pomoću interakcije. Nauči da praviš web aplikacije.

Za uspešno praćenje kursa preporučuje se osnovno poznavanje HTML-a i CSS-a.

Uvod

• Učila bih programiranje ali ne znam matematiku
• Čemu služi Javascript?
• Kratka istorija Javascripta

Instalacija i pokretanje

• Instalacija editora (Atom, VS Code, Brackets, Sublime…) i dodataka
• Instalacija NodeJS-a
• Instalacija i pokretanje programa
  • Program Zdravo Svete
  • Pokretanje Javascripta u pregledaču
  • Pokretanje Javascripta iz komandne linije

Promenljive i nepromenljive

• Šta su varijable?
• Promenljive i nepromenljive u Javaskriptu
• Identifikatori i pravila imenovanja
• Dodela vrednosti (=)
• Opseg važenja

Tipovi podataka

• Tipovi podataka u programskim jezicima
• Tipovi podataka u Javaskriptu
• Promena tipa podatka
• Provera tipa podatka
• Opasnost labavih tipova
• Menjanje nepromenljivih u Javaskriptu

Brojevi i računanje

• Osnovne računske operacije (+, -, *, /)
• Upotreba modulo operatora (%)
• Nepreciznosti u računanju
• Napredne Math metode
• Vežba: za koliko ću naučiti programiranje?
• Vežba: postavi model poslovanja
• Vežbe sa brojevima

Rad sa tekstom

• Upotreba navodnika ("") i polunavodnika ('')
• Šablonske strune
• Osnovne metode: length, toLowerCase(), toUpperCase(), trim()
• Vežba: nađi ime u tekstu
• Vežba: napiši cenzor funkciju koja menja ružne reči zvezdicama

Funkcije

• Funkcije u Javascriptu
• Vraćanje vrednosti (return naredba)
• Različiti načini pisanja funkcije
• Podrazumevani parametri
• Opseg varijabli unutar funkcije
• Streličaste funkcije
• Vežba: napravi čiste funkcije za osnovne računske operacije

Logika

• Operatori poređenja (veće, manje, jednako)
• Logički operatori (i, ili, ne)
• Uslovi i grananje (if, else, switch)
• Ternarni operator
• Lenja evaluacija
• Vežba: napravi kviz
• Vežba: napravi priču sa više završetaka

Petlje i ponavljanje

• Petlje u Javascriptu
• Naredbe break i continue
• Uloga zastavice
• Ugnježdene petlje
• Vežbe sa petljama
• Vežbe sa strunama

Rad sa nizovima

• Nizovi
• Višedimenzionalni nizovi
• Iteracija niza
• Mapiranje niza
• Filtriranje niza
• Ostale metode niza (splice, slice…)
• Vežba: prikaži nasumičan citat
• Vežba: pronađi ime u nizu
• Vežba: pronađi najmanji broj u nizu
• Vežba: broj ponavljanja traženog imena u nizu
• Vežbe sa nizovima

Objekti

• Objekti u Javascriptu
• Tri namene objekta u Javaskriptu
• Iteracija objekta: for in i hasOwnProperty
• Međusobna interakcija objekata
• Ključna reč this
• Vežba: prenos sredstava sa računa
• Vežba: broj ponavljanja svakog imena u nizu
• Vežba: napravi kasu za prodavnicu

Klase i nasleđivanje

• Klase u Javascriptu
• Nasleđivanje klasa
  • Ključna reč super
  • Provera nasleđivanja
• Vežba: prenos sredstava pomoću klase
• Vežba: napravi bazu filmova (niz objekata) sa pretragom

Kodni standard

• JS Standard i Airbnb kodni stil
• Instalacija i podešavanje lintera (ESLint)
• Vežba: refaktorisanje po kodnom standardu

Front-end programiranje

Frontend vs. backend

• Razlika između frontenda i bekenda?
• Backend vs. frontend programiranje

Okruženje pregledača

• Globalni window objekat (BOM)
  • navigator
  • location
  • screen
  • history
• Metode prompt, confirm i alert
• Odloženo izvršenje i ponavljanje (setTimeout i setlnterval)

Objektni model dokumenta (DOM)

• Šta je DOM?
• Kretanje po DOM stablu
• Selektori elemenata
• Dodavanje elemenata u DOM
• Uklanjanje elemenata (removeChild ili innerHTML)
• Stilizovanje Javaskriptom
• Vežba: dodaj elemente u DOM pomoću petlje
• Vežba: napravi klasu koja dodaje elemente u DOM
• Vežba: predstavi HTML strukturu pomoću JS objekta

Događaji

• Uvod u Javaskript događaje
• Dodavanje događaja
• Povratne funkcije (callback)
• event objekat i njegova svojstva
• Sprečavanje podrazumevanog ponašanja
• Uklanjanje slušača događaja
• Pravljenje alijas funkcija
• Vežba: napravi div elemente koji reaguju na događaje
• Vežba: napravi editor slike (zum, odzum i filteri)
• Vežba: napravi da element prati kretanje miša
• Vežba: uporedi this unutar obične i streličaste povratne funkcije

Učitavanje podataka (AJAX i API)

• API: Programski interfejs aplikacija
• AJAX tehnika
  • GET zahtev
  • POST zahtev
  • DELETE zahtev
• JSON format
• Dinamičko renderovanje stranica
• Notifikacije i WebSocket protokol
• Vežba: učitaj Wikipediju, vremensku prognozu ili neki drugi javni API

Validacija korisničkog unosa

• Validacija formulara
• Slanje formulara
• Regularni izraz
• Regularni izrazi za validaciju
• Vežba: validacija formulara

Multimedija

• Rad sa slikama
• Rad sa zvukom i videom
• Crtanje i animacije na platnu (canvas)
• Vežba: napravi slajder
• Vežba: dinamički napravi foto galeriju
• Vežba: Javascript magija
• Vežba: Napravi audio plejer i plejlistu

Node.js bekend servisi

• Šta je server?
• Šta su web servisi?
• Žetva podataka (web scraping)
• Čitanje i pisanje fajlova
• Služenje podataka
• Vežba: žanji i kombinuj vesti sa raznih izvora

Testiranje

• Jedinični (unit) testovi
• Razvoj vođen testovima
• Jasmine biblioteka
• Mocha biblioteka
• Integracioni testovi
• Vežba: testiranje sum funkcije

Završni projekat

• Napravi jednostraničnu aplikaciju sa pretragom koja uzima podatke iz javnog API-ja
• Refaktorisanje (optimizacija i povećanje čitkosti koda)
• Objavljivanje na GitHub Pages ili Heroku