# Naloga 1 Izdelali boste spletno stran, ki iz strežnika naloži seznam uporabnikov in jih prikaže v tabeli. Če se vam vmes kdaj zatakne, je vsa koda na voljo na tem repozitoriju. ![Slika spletne strani](screenshots/final.png) ## Navodila za izdelavo ### Osnovna postavitev - Ustvarimo datoteke `index.html`, `style.css` in `script.js`. - Generiramo osnovno postavitev spletne strani (v VS Code pritisnemo `!` in `Enter`). ```html
` za vsakega od njih. - Zaženite `Live Server` ali pa odprite `index.html` v brskalniku in spletna stran bi morala izgledati tako: ![Slika HTML](screenshots/html.png) ### JavaScript V `script.js` bomo napisali kodo, ki bo iz strežnika naložila seznam uporabnikov in jih dodala v html tabelo. - Ustvarimo novo asinhrono funkcijo `getUsers()`: ```js async function getUsers() {} ``` #### Nalaganje podatkov s strežnika - Za nalaganje podatkov s strežnika uporablajmo vgrajeno funkcijo `fetch()`. - Beseda `await` počaka na odgovor s strežnika, medtem ko ostala koda na spletni strani še vedno teče. - Naložimo podatke s strežnika in odgovor shranimo v konstanto `response`: ```js const response = await fetch('https://jsonplaceholder.typicode.com/users'); ``` - Odgovor dobimo v obliki JSONa (JavaScript Object Notation): - Kvadratni oklepaji `[ ]` predstavljajo **seznam** - Zaviti oklepaji `{ }` predstavljajo **objekt** ```json [ { "id": 1, "name": "Leanne Graham", "username": "Bret", "email": "Sincere@april.biz" }, { "id": 2, "name": "Ervin Howell", "username": "Antonette", "email": "Shanna@melissa.tv" }, { "id": 3, "name": "Clementine Bauch", "username": "Samantha", "email": "Nathan@yesenia.net" }, ... ] ``` - Pretvorimo JSON v JavaScript objekt s klicom funkcije `json()` in ga shranimo v konstanto `users`: ```js const users = await response.json(); ``` - `users` sedaj izgleda tako: ```js const users = [ { id: 1, name: 'Leanne Graham', username: 'Bret', email: 'Sincere@april.biz', }, { id: 2, name: 'Ervin Howell', username: 'Antonette', email: 'Shanna@melissa.tv', }, { id: 3, name: 'Clementine Bauch', username: 'Samantha', email: 'Nathan@yesenia.net', }, ... ]; ``` - Vsebino spremenljivke lahko izpišete v konzolo z funkcijo ```js console.log(users); ``` - Do konzole dostopate: `Desni klik` > `inspect` > `console` #### Vstavljanje podatkov v tabelo Sedaj ko imamo želene podatke v spremenljivki `users`, jih moramo vstaviti v tabelo. - Z zanko `for` zaženemo kodo za vsakega uporabnika - Spremenljivka `user` se vsak krog spremeni na naslednjega v seznamu `users` ```js for (const user of users) { // Vso nadalnjo kodo pišite sem notri } ``` - Da ustvarimo novo vrstico v tabeli uporabimo funkcijo ```js const row = document.createElement('tr'); ``` - Enaka stvar v html-ju: ```html | |||
---|---|---|---|
${user.id} | ${user.name} | ${user.username} | ${user.email} | `; ``` - Enaka stvar v html-ju: ```html
(vrednost user.id) | (vrednost user.name) | (vrednost user.username) | (vrednost user.email) |