HTML and Browser Flashcards
HTML Interview questions including basic web concepts (29 cards)
HTTP
Protokol aplikativnog sloja koji omogućava komunikaciju između klijenta i servera preko mreže. Koristi se za prenos HTML dokumenata, slika, video i drugog sadržaja koji omogućava funkcionisanje veb stranica.
Osnovne karakteristike:
* Stateless (ne čuva stanje između 2 zahteva)
* Port broj 80 za komunikaciju
* Protokol na osnovu TCP/IP protokola za prenos podataka
http://
HTTPS
Koja je razlika između HTTP i HTTPS-a?
Protkol aplikativnog sloja koji omogućava SIGURNU komunikaciju između klijenta i servera preko mreže. HTTPS je proširenje HTTP protokola koje koristi TLS/SSL enkripciju za zaštitu podataka.
Osnovne karakteristike:
* Sigurnost komunikacije (Treće strane ne mogu presresti podatke)
* Autentifikacija servera
* Integritet podataka (podaci se ne mogu presresti, pa ne mogu biti izmenjeni)
* Port broj 443 za komunikaciju
https://
Man in the middle attack
MITM Attack
Napad u kojem se napadač postavlja između klijenta i servera kako bi presreo i potencijalno izmenio podatke koji se prosleđuju. Cilj je uglavnom krađa poverljivih informacija poput lozinki, podataka o kreditnim karticama ili šifrovanih poruka.
SSL
Secure Sockets Layer
Kako se zove naslednik SSL-a?
Protokol za šifrovanje i sigurnost podataka tokom komunikacije između klijenta i servera.
Osnovne karakteristike:
* Šifrovanje
* Autentifikacija (Server dokazuje svoj identitet digitalnim sertifikatom)
* Integeritet podataka
TLS
Transport Layer Security
Kako se zove prethodnik TLS-a?
Protokol za šifrovanje i sigurnost podataka tokom komunikacije između klijenta i servera. TLS je naslednik SSL-a i pruža poboljšanu sigurnost.
Osnovne karakteristike:
* Šifrovanje
* Autentifikacija (Server dokazuje svoj identitet digitalnim sertifikatom)
* Integeritet podataka
TCP
Transmission Control Protocol
Protokol transportnog sloja koji omogućava pouzdan prenos podataka između uređaja na mreži.
Osnovne karakteristike:
Pouzdanost (Osigurava da svi podaci budu isporučeni u pravilnom redosledu)
Three Way Handshake (SYN - SYN/ACK - ACK)
HTTP Response Code Types
Kodovi koje server vraća kako bi označio status zahteva klijentu.
Vrste kodova:
1xx - Informational
2xx - Success (200 - OK, 201 - Created, 204 - No Content)
3xx - Redirection (301 - Moved Permanently)
4xx - Client Error (401 - Unauthorized, 403 - Forbidden)
5xx - Server Error (502 - Bad Gateway, 503 - Service Unavailable)
HTTP Metode
+ HEAD + OPTIONS
GET
POST
PUT
DELETE
PATCH (parcijalno ažuriranje resursa)
HEAD (slično GET-u, ali ne vraća telo već samo zaglavlja, koristi se za proveru metapodataka resursa)
OPTIONS (koristi se za dobijanje informacija o podržanim metodama za određeni resurs)
HTML and XHTML
U oba jezika veb stranica može biti napisana. XHTML je izveden iz HTML-a ali da se pridržava XML standarda.
Razlike:
* Sintaksa - HTML ima labaviju sintaksu, ne zahteva zatvaranje tagova
* Case Sensitivity - HTML nije case sensitive
* Doctype - Ne zahteva doctype deklaraciju
GraphQL
Query jezik za API-je koji omogućava klijentima da precizno definišu podatke koje žele. Ključne karakteristike:
* Deklarativan - Klijent definiše oblik podataka koje želi da dobije
* 1 endpoint - svi zahtevi idu na isti URL za razliku od REST-a sa više ruta
* Efikasnost - vraća samo tražene podatke što smanjuje višak
REST
Representational State Transfer
Arhitektonski stil za kreiranje API-ja. Koristi HTTP protokol za komunikaciju između klijenta i servera. Ključne karakteristike:
Resurs - sve se tretira kao resurs (klijent, proizvod…)
URL - resurse identifikujemo pomoću jedinstvenih URL-ova
Stateless - server ne čuva informacije o stanju klijenta između zahteva
REST Constraints
Uniform Interface - Osigurava doslednost komunikacije između klijenta i servera. Podrazumeva nekoliko podkriterijuma:
* Identifikacija resursa - resursi se identifikuju putem URI (npr /users/123)
* Manipulacija resursima putem reprezentacija - resurs se najčešće predstavlja kao JSON ili XML
Resource based - resursi su pojedinčni entiteti i svaki resurs ima jedinstven URI
Stateless
HTML5 Additions
Novi semantički elementi (header, footer, article, section, aside, nav)
**Form elementi **(novi input tipovi - email, date, time, number)
Multimedija (audio i video)
Canvas i SVG
Lokalno skladištenje (localStorage i sessionStorage za čuvanje na klijentskoj strani)
JSON
JavaScript Object Notation
Lagan i čitljiv format za razmenu podataka. Izvorno je nastao iz JavaScript-a ali se koristi u svim jezicima. Osnovne karakteristike:
key-value struktura - podaci su organizovani kao key-value parovi
jednostavna sintaksa
XML
eXtensible Markup Language
Markup jezik za skladištenje i prenos podataka u hijerarhijskom formatu.
Osnovne karakteristike:
Tagovi i atributi - podaci su organizovani u hijerarhijsku strukturu koristeći otvarajuće i zatvarajuće tagove
Složenija sintaksa - tagovi povećavaju veličinu fajla ali pružaju više mogućnosti za stukturiranje
JSON vs XML
{
“person”: {
“name”: “Maja”,
“age”: 23,
“skills”: [“JavaScript”, “React”]
}
}
<person>
<name>Maja<name></name>
<age>23<age></age>
<skills>
<skill>JavaScript<skill></skill>
<skill>React<skill></skill>
<skills></skills>
<person></person>
</skill></skill></skills></age></name></person>
Doctype
Deklaracija na početku HTML dokumenta koja govori browser-u koju verziju HTML-a koristi veb stranica.
Standards mode - Browser koristi najnovije standarde za renderovanje. Aktivira se kada je doctype pravilno deklarisan.
Quirks mode - Browser pokušava da oponaša stare, neispravne prikaze stranica. Aktivira se kada nema doctype deklaracije.
URI, URL i URN
URI - opšti pojam za identifikaciju resursa. Može biti lokacija resursa (URL) ili ime resursa (URN) ili oboje. Sastavni delovi URI-ja su:
Shema - određuje protokol (http, ftp, mailto)
Domen/IP adresa
Putanja - lokacija resursa na serveru (/author/nesto…)
Fragment
URL - URI koji uključuje lokaciju resursa. Uvek sadrži protokol i lokaciju resursa (domen+putanja)
URI - URI koji uključuje ime resursa
AJAX
Asynchronous JavaScript and XML
Tehnika koja omogućava klijentu da asinhrono komunicira sa serverom, bez potrebe za ponovnim učitavanjem cele stranice. Kako radi AJAX?
1. Klijent šalje zahtev serveru
2. Server odgovara sa podacima (JSON npr)
3. Klijent obrađuje podatke i ažurira DOM bez osvežavanja stranice
Ključne komponente AJAX-a:
XMLHttpRequest (starija metoda)
Fetch API (moderniji način za slanje zaahteva)
XMLHttpRequest
JavaScript objekat koji omogućava slanje HTTP zahteva ka serveru i obradu odgovora. Korišćen je za implementaciju AJAX-a pre uvođenja Fetch API-ja.
Primer AJAX zahteva:
// Kreiranje XMLHttpRequest objekta
const xhr = new XMLHttpRequest();
// Konfigurisanje zahteva (GET metoda, URL, asinhrono)
xhr.open(‘GET’, ‘https://jsonplaceholder.typicode.com/posts’, true)
// Postavljanje event handler-a za praćenje statusa zahteva
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// Prikazivanje odgovora u konzoli
console.log(JSON.parse(xhr.responseText));
}
};
// Slanje zahteva
xhr.send();
DOM
Predstavlja HTML dokument u obliku logičkog stabla, i omogućava skriptama (JavaScript-u) da manipulišu strukturom stranice.
DOM metode:
document.getElementById(‘id’)
document.querySelector(‘selector’)
document.querySelectorAll(‘selector’)
element.textContent = ‘Novi tekst’
element.innerHTML = ‘Novi sadržaj’
document.createElement(‘div’)
parentElement.appendChild(newElement)
Cookies
Cookie vs Session Storage vs Local Storage
Male datoteke koje se čuvaju u pretraživaču klijenta. Koriste se za čuvanje informacija koje mogu biti poslate serveru sa svakim HTTP zahtevom.
Maksimalna veličina: 4KB
Trajanje: Može biti podešeno na određeno vreme (persistent cookie) ili da traje samo tokom jedne sesije (session cookie)
Pristup: Dostupni su i u klijentu i serveru
document.cookie = “username=Maja; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/”;
console.log(document.cookie); // Vrati sve cookie-je u formatu stringa
Session Storage
Cookie vs Session Storage vs Local Storage
Session Storage čuva podatke samo dok traje sesija pretraživača (dok je tab otvoren). Podaci se brišu kada se tab zatvori.
Maksimalna veličina: 5-10MB (zavisi od pretraživača)
Trajanje: Samo dok je tab otvoren
Pristup: Dostupno samo klijentskoj strani
sessionStorage.setItem(“username”, “Maja”);
const user = sessionStorage.getItem(“username”);
console.log(user); // “Maja”
sessionStorage.removeItem(“username”);
sessionStorage.clear(); // Briše sve podatke iz sessionStorage-a
Local Storage
Cookie vs Session Storage vs Local Storage
Local Storage omogućava trajno skladištenje podataka u pretraživaču. Podaci ostaju sačuvani i nakon zatvaranja pretraživača.
Maksimalna veličina: 5-10MB (zavisi od pretraživača)
Trajanje: Podaci ostaju dok ih eksplicitno ne obrišem
Pristup: Dostupno samo klijentskoj strani
localStorage.setItem(“theme”, “dark”);
localStorage.setItem(“theme”, “dark”);
localStorage.removeItem(“theme”);
localStorage.clear(); // Briše sve podatke iz localStorage-a
