<audio controls src="glazba/jingl.mp3"></audio>
HTML oznaka: audio Određuje tip HTML elementa te daje značenje njegovom sadržaju HTML atributi: controls, src Pruža dodatne informacije o sadržaju HTML elementa
Potrebno je HTML dokumentu dodijeliti metapodatak koji opisuje njegov sadržaj u formi sljedeće rečenice "Službene stranice Učilišta Algebra". Što je potrebno napisati unutar oznake HTML dokumenta kako bi se to postiglo?
<meta name="description" content="Službene stranice Učilišta Algebra" />
Potrebno je HTML dokumentu dodijeliti oznaku jezika sadržaja "en". Koji atribut je potrebno dodijeliti elementu kako bi se to postiglo?
<html lang="en"></html>
Kod otvaranja HTML dokumenta u web pregledniku u njegovom zaglavlju ispisuje se naslov "Učilište Algebra". Pomoću kojeg HTML elementa je naslov dokumenta postavljen?
<title>Učilište Algebra</title>
https://example.com/movie.mp4 Pomoću HTML-a objavite video sadržaj s kontrolama za upravljanje reprodukcijom sadržaja. Video formi dodijelite dimenzije 600 x 400 px. (zadatak riješiti u dostupnom code editoru).
<video src="https://example.com/movie.mp4" controls width="600" height="400"></video>
galerija/panorama-grada.jpg Pomoću HTML-a objavite grafiku te joj dodijelite dimenzije 720 x 500 px. Postavite zamjenski tekst "Panorama grada" (zadatak riješiti u dostupnom code editoru).
<img src="galerija/panorama-grada.jpg" alt="Panorama grada" width="720" height="500" />
Koji element koristimo za označavanje sadržaja koji predstavlja podnožje tijela stranice ili podnožje određene sekcije (sadrži autorska prava, kontakt podatke itd.)?
<footer></footer>
Koji element koristimo za označavanje sadržaja koji predstavlja cjelinu neovisnog (samostalnog) sadržaja u dokumentu?
<article></article>
Koji element koristimo za grupiranje sadržaja isključivo radi stiliziranja pomoću CSS-a (bez da mu damo značenje)?
<div></div>
<section></section>
Mogućnost da se web rješenje koristi prema potrebama i mogućnostima korisnika. Postiže se: •primjenom semantičkih HTML elemenata •pravilnom definicijom HTML atributa (npr. "alt" kao zamjenski tekst za grafike, "role" za davanje značenja elementima, "lang" kao oznaka jezika sadržaja itd.) •osiguranjem tekstualnog sadržaja kao alternative za ne-tekstualni sadržaj (npr. tekstualni transkript za audio sadržaj) •omogućavanjem korisnicima da prilagode vlastito sučelje (veličinu znakova, boje itd.) •više: https://www.w3.org/WAI/fundamentals/accessibility-principles/
<p>Lorem ipsum dolor</p>
<p style="color: red;">Lorem ipsum dolor</p>
Nadopunite isječak koda tako da u zaglavlju HTML dokumenta dohvatite vanjsku CSS datoteku sa sljedeće lokacije: css/style.css
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
Nadopunite isječak koda odgovarajućim selektorom tako da dohvatite sve HTML elemente koji sadrže atribut title s točnom vrijednošću "Učilište Algebra".
{
display: inline-block; padding: 2em;
color: #eee; font-size: 20px;
}
[title="Učilište Algebra"] { display: inline-block; padding: 2em;
color: #eee; font-size: 20px;
}
Nadopunite isječak koda odgovarajućim selektorom tako da dohvatite sve HTML elemente koji sadrže atribut title u čijoj vrijednosti se bilo gdje nalazi izraz "Algebra".
{
display: inline-block; padding: 2em;
color: #eee; font-size: 20px;
}
[title*="Algebra"] { display: inline-block; padding: 2em;
color: #eee; font-size: 20px;
}
Nadopunite isječak koda odgovarajućim selektorom tako da dohvatite sve HTML elemente koji sadrže atribut title na početku čije vrijednosti se nalazi izraz "Algebra".
{
display: inline-block; padding: 2em;
color: #eee; font-size: 20px;
}
[title^="Algebra"] { display: inline-block; padding: 2em;
color: #eee; font-size: 20px;
}
Nadopunite isječak koda odgovarajućim selektorom tako da dohvatite sve posjećene poveznice (one koje su već bile otvarane).
{
display: inline-block; padding: 2em;
color: #eee; font-size: 20px;
}
a:visited {
display: inline-block; padding: 2em;
color: #eee; font-size: 20px;
}
sve slike iznad kojih je postavljen pokazivač miša.
{
transform: scale(1.1);
}
img:hover {
transform: scale(1.1);
}
Nadopunite isječak koda odgovarajućim selektorom tako da dohvatite sve paragrafe
koji su prvo dijete, određenog tipa, svog roditelja.
{
color: #eee; font-size: 20px;
}
p:first-of-type { color: #eee; font-size: 20px;
}
Nadopunite isječak koda odgovarajućim selektorom tako da ugradite sadržaj "Upamti: " sa zadanim stilovima prije postojećeg sadržaja naslova 1. razine
{
content: "Upamti: "; color: red;
background-color: yellow;
}
h1::before {
content: "Upamti: "; color: red;
background-color: yellow;
}
:root {
--text-color:
}
#333; :root {
--text-color: #333;
}
p {
} p {
color: var(--text-color);
}
Koristeći CSS selektirajte element i uredite ga tako da odgovara obliku na slici (pomoću margina centrirajte područje sadržaja elementa). Pretpostavite veličine i boje, one ne moraju biti u potpunosti točne.
article {
background-color: #eee; text-align: justify; width: 300px;
border: 5px solid #666; margin: 2em auto; padding: 2em;
}
Koristeći CSS selektirajte element i uredite ga tako da odgovara obliku na slici (pomoću margina područje sadržaja elementa postavite na desnu stranu). Pretpostavite veličine i boje, one ne moraju biti u potpunosti točne.
article {
background-color: #eee; text-align: justify; width: 25%;
border-left: 8px double #666; border-right: 5px dashed #666; margin: 2em 0 2em auto; padding: 2em 4em;
}
Na prazno mjesto upišite izraz za poziv SCSS funkcije "margin" te joj dodijelite dva cjelobrojna argumenta.
@function margin($a, $b) {
@return $a * $b;
}
p {
margin-top: * 1px;
}
@function margin($a, $b) {
@return $a * $b;
}
p {
margin-top: margin(3, 2) * 1px;
}
@mixin flex-container { display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
section {
@mixin flex-container { display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
section {
@include flex-container;
} }
@import "base/color";
Kako se naziva proces prilagodbe CSS koda za produkciju, čime se smanjuje veličina datoteke te ubrzava njeno preuzimanje sa poslužitelja?
Proces se naziva minifikacija ili minimizacija CSS koda.
JavaScript je skriptni programski jezik visoke razine, dobar i za objektno-orijentirano i za funkcijsko programiranje.
JavaScript jezik se razvija prema ECMAScript specifikaciji: •opisuje sintaksu i ponašanje programskog jezika •definira standard za implementaciju JavaScript jezika.
1userData
b)$userData
c)user_data
d)user1Data
Koji izraz koristimo u definiciji spremnika za podatke ako želimo onemogućiti promjenu primitivne vrijednosti?
const
•globalni djelokrug (globalne varijable) •definiraju se izvan funkcija •mogu se koristiti u čitavom programu, zatvaranjem stranice brišu se •djelokrug funkcije (lokalne varijable) •definiraju se unutar funkcije te se mogu koristiti samo unutar nje •izlaskom iz funkcije brišu se •djelokrug bloka •definiraju se unutar bloka {} pomoću ključne riječi let •dostupne su samo unutar bloka u kojemu su definirane •moraju se deklarirati prije upotrebe te se ne mogu ponovo deklarirati
Deklarirajte i inicijalizirajte varijable firstName i lastName i spojite ih u varijablu fullName, ali s razmakom (" ") između imena i prezimena.
var firstName = "John"; var lastName = "Doe";
var fullName = firstName + " " + lastName;
/* ili */
var fullName = firstName.concat(" ", lastName);
Deklarirajte varijable y i z te im dodijelite proizvoljne vrijednosti. Nakon toga razlomite ovu ternarnu operaciju na 3 različite operacije (upotrebom grananja). Ispišite dobivenu vrijednost varijable x.
var x = z === 2 ? y : 5;
var x;
var y = 10, z = 2;
if (z === 2) {
x = y;
}
else {
}
x = 5;
Izraz "switch".
for (let count = 0; count <= 10; count+=2) { console.log(count);
}
6 puta.
S obzirom da je uvjet petlje lažan blok naredbi se neće niti jedanput izvršiti. Promijenite definiciju uvjetne petlje tako se da blok naredbi uvijek izvrši barem jedanput, bez obzira o istinitosti uvjeta. Vrijednost varijable "count", kao i izraz uvjeta ne smijete promijeniti.
var count = 10;
while (count < 10) { console.log(count); count++;
}
var count = 10;
do { console.log(count); count++;
} while (count < 10);
Izraz "continue" prekida trenutnu iteraciju (odnosno trenutno izvršavanje bloka naredbi) te nastavlja s idućom. Izraz "break" prekida izvršavanje petlje te izlazi iz nje.
Napišite JavaScript funkciju koja prihvaća cjelobrojnu vrijednost kao argument te vraća poruku da li se radi o parnom ili neparnom broju.
function parniIliNeparni(a){
if(a % 2 == 0){
return "Broj " + a + " je paran.";
}
else {
}
}
return "Broj " + a + " je neparan.";
Napišite JavaScript funkciju koja prihvaća zadani niz kao argument i pronalazi najdužu riječ unutar niza. Vratite tu riječ iz funkcije i spremite u varijablu čiju ćete vrijednost ispisati u konzoli.
var rijeci = ['quickest', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog'];
var rijeci = ['quickest', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog'];
function pronadiNajduljuRijec(niz) {
var rijec = "";
for (let i = 0; i < niz.length; i++) {
if (rijec.length < niz[i].length) {
rijec = niz[i];
}
}
return rijec;
}
var najduljaRijec = pronadiNajduljuRijec(rijeci); console.log(najduljaRijec);
Skupina unaprijed definiranih objekata koji stranici (JavaScript-u) omogućuju interakciju s web preglednikom. Iako ne postoji službeni standard, većina web preglednika ipak ima implementirano identično sučelje za komunikaciju s JavaScript jezikom.
Platforma i jezično neutralno sučelje koje omogućuje programima i skriptama dinamički pristup i ažuriranje sadržaja, strukture i stila dokumenta. Definira: -HTML elemente kao objekte -svojstva svih HTML elemenata -metode pristupa svim HTML elementima -događaje za sve HTML elemente.
elemenata.
document.getElementById() document.getElementsByTagName() document.getElementsByClassName() document.getElementsByName() document.querySelector() document.querySelectorAll()
Koristeći JavaScript dohvatite HTML element preko njegova ID-a "zaglavlje" te mu dodajte novi podelement tipa
var roditelj = document.getElementById("zaglavlje"); roditelj.innerHTML += "<h1>Naslov</h1>";
/* ili */
var roditelj = document.getElementById("zaglavlje"); var naslov = document.createElement("h1"); naslov.textContent = "Naslov"; roditelj.appendChild(naslov);
Koristeći JavaScript dohvatite HTML element preko njegova ID-a "zaglavlje" te ga uklonite iz HTML stabla.
var element = document.getElementById("zaglavlje"); element.remove();
/* ili */
var element = document.getElementById("zaglavlje"); element.parentNode.removeChild(element);
Koristeći JavaScript dohvatite HTML element preko njegova ID-a "zaglavlje" te mu postavite sljedeću pozadinsku boju: "#ddd".
var element = document.getElementById("zaglavlje"); element.style.backgroundColor = "#ddd";
/* ili */
var element = document.getElementById("zaglavlje"); element.style.cssText = "background-color: #ddd;";
Odgovor: Alat koji omogućuje čuvanje i praćenje promjena u datoteci ili skupu datoteka tijekom vremena (tko je napravio promjenu i kada). Omogućuje lak oporavak u slučaju da je nešto pošlo po krivu (vraćanje datoteka u prethodno stanje) te olakšava suradnju više od jedne osobe koje rade na istom projektu.
Lokalni sustav za verzioniranje koda Centralizirani sustav za verzioniranje kôda Distribuirani sustav za verzioniranje kôda
Odgovor: Git je distribuirani sustav za verzioniranje koda (DVCS). Omogućuje praćenje promjena u izvornom kodu tijekom razvoja softvera te koordiniranje rada među programerima.
Odgovor: Repozitorij je mjesto na kojem se pohranjuju sve datoteke jednog projekta. Može biti lokalni ili na nekom poslužitelju, dok na jednom repozitoriju može raditi jedna ili više osoba.
git init
Rješenje:
git commit -m "message"
Rješenje:
git push
Rješenje:
git pull
Napišite Git naredbu za spajanje dvije Git grane kako bi se promjene iz jedne zapisale u drugu (u glavnu granu repozitorija – master).
Rješenje:
git merge
Odgovor: Brzu JavaScript biblioteku bogatu mnogim mogućnostima. Značajno pojednostavljuje izvršavanje sljedećih radnji: •upravljanje HTML stablom (DOM) •upravljanje CSS stilovima •primjenu efekata i animacija u radu web stranica •upotrebu događaja za pokretanje definiranih operacija •asinkronu komunikacija klijenta i poslužitelja (AJAX).
Snažan upravitelj programskim paketima: •softverski alat koji automatizira proces instaliranja, nadogradnje, konfiguriranja i brisanja računalnih programa ili biblioteka (paketa) •dolazi s instalacijom Node.js okruženja.
Napišite npm naredbu za instalaciju paketa "lodash" i editiranje package.json datoteke (ovisnost se zapisuje u datoteku package.json).
Rješenje:
npm install --save lodash
ili
npm install lodash
Napišite npm naredbu za instalaciju paketa "jest" koji se koristi samo prilikom razvoja aplikacije. Ovisnost se zapisuje u datoteku package.json (naredba editira package.json datoteku).
Rješenje:
npm install --save-dev jest
Task runner je alat koji omogućuje automatizaciju ponavljajućih zadataka koji se tipično rade ručno tijekom razvoja projekta. Primjeri: gulp, grunt, broccoli, brunch, …
Alat koji se koristi prilikom izgradnje aplikacije za produkciju. Omogućuje povezivanje i optimizaciju više modula (datoteka) u jedan proizvodno spreman paket. Primjeri: webpack, rollup, browserify, …
Odgovor: React je popularna JavaScript biblioteka koja služi za izradu korisničkih sučelja. Pomoću malih izoliranih dijelova koda (komponenti) stvaramo kompleksno, efikasno i fleksibilno korisničko sučelje.
Napišite naredbu za kreiranje React aplikacije preko CLI-a (Command- line interface). Naziv aplikacije glasi "react-app".
npx create-react-app react-app
Što je potrebno napraviti kako bi se programski kôd napisan u jednoj datoteci mogao koristiti u drugoj datoteci?
Kod je potrebno: ●exportati (napraviti izvoz) iz izvorne datoteke i ●importati (napraviti uvoz) u datoteci u kojoj ga želimo iskoristiti
Prikazana je definicija React komponente koja sadrži grešku u JSX sintaksi. Objasnite u čemu je greška.
function MyComponent() {
return (
<div>
<h1>Hello!</h1>
<p>How are you?</p>
</div>
);
}
Ako komponenta vraća više JSX elemenata, svaki mora biti ugniježđen u jednom vršnom elementu, najčešće elementu
ispravno
function MyComponent() {
const x = 5, y = 7;
return (
<div>
<h1>Hello!</h1>
<p>Zbroj: {x + y}</p>
</div>
ispravno
); }
Ako je vrijednost konstante "user" jednaka "administrator" komponenta vraća poruku "Hello Friend", u suprotnom vraća poruku "Hello Stranger". Što je potrebno upisati na prazna mjesta kako bi se postiglo zadano uvjetno iscrtavanje?
function MyComponent() {
const user = "administrator";
const greetings = user === "administrator" <p>Hello Friend</p> <p>Hello Stranger</p>; return <div>{greetings}</div>;
}
Ako je vrijednost konstante "user" jednaka "administrator" komponenta vraća poruku "Hello Friend", u suprotnom vraća poruku "Hello Stranger". Što je potrebno upisati na prazna mjesta kako bi se postiglo zadano uvjetno iscrtavanje?
function MyComponent() {
const user = "administrator";
const greetings = user === "administrator" ? <p>Hello Friend</p> : <p>Hello Stranger</p>; return <div>{greetings}</div>;
}
Odgovor: Komponente je moguće kreirati pomoću funkcije ili klase.
Propsi su način na koji komponente međusobno komuniciraju: •omogućuju prijenos informacija iz komponente roditelj (parent) u komponentu dijete (child). Protok podataka kroz propse je uvijek jednosmjeran - iz komponente roditelj u komponentu dijete: •komponenta dijete ne može i ne smije mijenjati props objekt koji je primila od roditelja.
Što je potrebno upisati na prazno mjesto kako bi komponenti "ChildComponent" proslijedili props "name" s proizvoljnom vrijednošću (npr. "Child")?
function ParentComponent() { return (
<div>
<h1>Ja sam ParentComponent</h1>
<ChildComponent />
</div>
function ChildComponent(props) { return <h1>Ja sam {props.name}</h1>;
}
);
}
Što je potrebno upisati na prazno mjesto kako bi komponenti "ChildComponent" proslijedio props "name" s proizvoljnom vrijednošću (npr. "Child")?
function ParentComponent() { return (
<div>
<h1>Ja sam ParentComponent</h1>
<ChildComponent name="Child" />
</div>
function ChildComponent(props) { return <h1>Ja sam {props.name}</h1>;
}
);
}
Stanje komponente predstavlja built-in objekt koji sadrži podatke o komponenti. Ako se stanje komponente promijeni ona se ponovno iscrtava (renderira) kako bi prikazala promjene u stanju. Ponovnim renderiranjem komponente, renderiraju se i sve njezine child komponente.
Putem koje metode je jedino ispravno mijenjati stanje komponente definirane klasom, kako bi osigurali da se ona ponovno iscrta (renderira)?
Odgovor: Metoda setState.
Hook funkcije omogućuju upotrebu stanja (state) i drugih mogućnosti unutar komponenata definiranih funkcijom (npr. simulacija životnog ciklusa komponente). Primjeri: •useState hook funkcija omogućuje korištenje stanja u komponentama definiranima funkcijom •useEffect hook funkcija omogućuje oponašanje rada metoda životnog ciklusa.
function MyComponent() {
const handleButtonClick = () => { console.log("Button click!");
};
return (
<button >Klikni me!</button>
);
}
function MyComponent() {
const handleButtonClick = () => { console.log("Button click!");
};
return (
<button onClick={handleButtonClick}>Klikni me!</button>
);
}
1.Inicijalizacija komponente (initialization) 2.Postavljanje na DOM (mounting) 3.Ažuriranje (updating) 4.Brisanje iz DOM-a (unmounting)
Što omogućuje primjena lista unutar React komponenti? Zašto elementima liste dajemo svojstvo key s jedinstvenom vrijednošću?
Liste olakšavaju definiciju sadržaja (elemenata istog tipa) koji vraća određena komponenta te omogućuju veću fleksibilnost u upravljanju njime. Svojstvo key pomaže React-u da prepozna elemente liste koji su se promijenili, dodali ili uklonili – osigurava bolje performanse.
1.CSS Stylesheet 2.Inline stilovi 3.CSS Modules
S React-om gradimo Single-page aplikacije: •web-aplikacije koje se sastoje od samo jedne stranice •stranica u interakciji s korisnikom vrši dinamičko prepisivanje trenutnog sadržaja umjesto učitavanja nove stranice.