Data Types
| Type | typeof return value | Object wrapper |
|---|---|---|
| Null | "object" | N/A |
| Undefined | "undefined" | N/A |
| Boolean | "boolean" | Boolean |
| Number | "number" | Number |
| BigInt | "bigint" | BigInt |
| String | "string" | String |
| Symbol | "symbol" | Symbol |
null
Tip null ima točno jednu vrijednost null.
const nul = null;
console.log(nul);
console.log(typeof nul);unedefined
Undefined tip ima točno jednu vrijednost: undefined.
Jezik se obično postavlja prema zadanim postavkama undefined kada je nešto lišeno vrijednosti. Vrijabla može biti unedefined dok joj se ne dodjeli vrijednost.
let une;
console.log(une);
console.log(typeof une);boolean
Tip Boolean predstavlja logički entitet i nastanjen je s dvije vrijednosti: true & false.
Booleove vrijednosti obično se koriste za uvjetne operacije, uključujući ternarne operatore , if…else, while itd.
const num1 = 1;
const num2 = 2;
const boo = num1 === num2;
console.log(boo);
console.log(typeof boo);number
Je broj i može pohraniti pozitivne i negativne brojeve s pomičnim zarezom i može sigurno pohraniti samo cijele brojeve u sigurnom rasponu Izvan ovog raspona, JavaScript više ne može sigurno predstavljati cijele brojeve; oni će umjesto toga biti predstavljeni aproksimacijom pomičnog zareza dvostruke preciznosti. Možete provjeriti je li broj unutar raspona sigurnih cijelih brojeva pomoću Number.isSafeInteger().
koristi se u matematičkim računima
const num3 = 1;
const num4 = 2;
console.log(`num3 + num4 = ${num3 + num4} `);
console.log(typeof num1);bigint
BigInts može sigurno pohranjivati i raditi s velikim cijelim brojevima čak i izvan granice sigurnog cijelog broja ( Number.MAX_SAFE_INTEGER).
const big = BigInt(Number.MAX_SAFE_INTEGER); // n na kraju je samo znak da je to bigint
console.log(big);
console.log(big + BigInt(1)); //primjer casting zbrajanje bigint sa numberom
console.log(typeof big);string
string predstalvlja jednu riječ ili tekst uglavnom string je tekstualni zapis
- In V8 (used by Chrome and Node), maksimalna dužina stringa je 229 – 24 (~1GB). Na 32-bit sistemima, tj maksimalna dužina stringa 228 – 16 (~512MB).
- In Firefox, maksimalna dužina 230 – 2 (~2GB). prije Firefox 65, maksimalna dužina 228 – 1 (~512MB).
- In Safari, maksimalna dužina 231 – 1 (~4GB).
const string = 'This is string';
console.log(string);
console.log(string[2]);
console.log(typeof string);symbol
symbol predstavlja nepromjenjivu jedinstvenu vrijednost i moze biti samo jedan, mogu izgledati isto ali to nisu, u sljedećem primjeru vraćati ce false
const sym1 = Symbol('foo');
const sym2 = Symbol('foo');
const symbol = sym1 === sym2;
console.log(symbol);Varijable
Varijable var let const
var se vise manje ne koristi
let je promjenjiva varijabla
const je konstantna varijabla
var imeVarijable = nesto;
let imeVarijable = nesto;
const imeVarijable = nesto;Za maknuti grešku u konzoli favicon.ico koja ide na živce.
<link rel="shortcut icon" href="#" />Arrays
Klasični array sa brojevima
const numbers = [22, 44, 23, 45, 21];Array sa stringom:
const arrayString = ['apple', 'banana', 'orange', 'lemon'];Array konstraktor kao u objektnom orjentiranom
const numbers2 = new Array(22, 45, 33, 34, 64);Array moze biti sa bilo kojim vrjednostima (data types) u sebi
brojevi, boolean (true/false), datumi, nedefiniran, null, objekt…
const mixed = [22, 'Hello', true, undefined, null, { a: 1, b: 2 }, new Date()];Dobivanje koliki je broj vrijednosti u arrayu tj za ovaj primjer koliko ima brojeva u arrayu.
const numbers = [22, 44, 23, 45, 21];
let val;
val = numbers.lenght;Provjera dali je nešto array ili nije
u ovom primjeru gledamo dali je varijabla numbers array ili nije, a dobivamo boolian vrijednost (true/false) u ovom slucaju true.
const numbers = [22, 44, 23, 45, 21];
let val;
val = Array.isArray(numbers);Dobivanje pojedinačne vrijednosti (u ovom slucaju broja) arraya
Izbaciti ce nam broj 45 jer se racuna od 0.
const numbers = [22, 44, 23, 45, 21];
let val;
val = numbers[3];
Ubacivanje u array tj zamjena
U ovom primjeru cemo zamjeniti broj 23 koi se nalazi na index mjestu 3 sa brojem 100
const numbers = [22, 44, 23, 45, 21];
numbers[2] = 100;Nalazenje index broja za odeđeni broj ili vrijednost u arrayu
u ovom primjeru ce izbaciti index broj 2
const numbers = [22, 44, 23, 45, 21];
let val;
val = numbers.indexOf(23);MUTIRANJE ARRAYA
Metoda push dodaje na kraj arraya
u ovom primjeru ce se dodati broj 250 na kraju arraya
const numbers = [22, 44, 23, 45, 21];
numbers.push(250);Sa metodom unshift cemo dodati nesto na pocetak arraya.
const numbers = [22, 44, 23, 45, 21];
numbers.unshift(250);Sa pop metodom skidamo zadnju vrijednost arrayu.
const numbers = [22, 44, 23, 45, 21];
numbers.pop();Sa shift metodom skidamo prvu vrijednost
const numbers = [22, 44, 23, 45, 21];
numbers.shift();Splice metoda skida djeloce arraya u ovom slucaju ce makniti broeve od index broja 1 do index broja 3
const numbers = [22, 44, 23, 45, 21];
numbers.splice(1, 3);Reverse metoda ce obrnuti vrijednosti u arrayu
const numbers = [22, 44, 23, 45, 21];
numbers.reverse();Concat metoda spaja array.
U ovom primjeru smo spoili ova 2 arraya u jedan
const numbers = [22, 44, 23, 45, 21];
const numbers2 = [12, 14, 11, 54, 77];
let val;
val = numbers.concat(numbers2);U ovom slucaju se spajau 3 arraya itd itd
const numbers = [22, 44, 23, 45, 21];
const numbers2 = [12, 14, 11, 54, 77];
const numbers3 = [32, 64, 41, 94, 17];
let val;
val = numbers.concat(numbers2, numbers3);SORTIRANJE ARRAYA
Sortiranje arraya po abecedi
ako sortiramo brojeve na ovaj nacin isto ce sortirati po “abecedi”
const fruits = ['apple', 'banana', 'orange', 'lemon', 'ananas', 'centrun'];
let val;
val = fruits.sort();Sortiranje brojeva
u funckiji postavimo “x” i “y” a mogu biti bilo koi znakovi, znaci ovo je funkcija za sortiranje brojeva od manjeg prema vecem ako cemo sortirati obrnuto onda umjesto – ide + ili zamjenimo x i y.
const numbers = [22, 44, 23, 45, 21, 100];
val = numbers.sort(function (x, y) {
return x - y;
});Date & times
Za dobivanje danasnjega datuma
const today = new Date();Datum je u obliku objekta ako ga trebamo u string obliku pisemo sljedece
let val;
const today = new Date();
val = today.toString();Ako ocemo postaviti neko drugo vrijeme u zagrade dodajemo datum koi zelimo
const newdate = new Date('9/10/1985');Primjeri za dobivanje mjeseca dana u mjesecu i dana u tjednu itd itd
let val;
const today = new Date();
val = today.getMonth(); //za dobivanje mjeseca
val = today.getDate(); //za dobivanje dana u mjesecu
val = today.getDay(); //za dobivanje dana u tjednu
val = today.getFullYear(); //za dobivanje godine
val = today.getHours(); //za dobivanje sata
val = today.getMinutes(); //za dobivanje minute
val = today.getSeconds(); //za dobivanje sekunde
console.log(val);Uvjetne naredbe if else statment
Osnovna sintaksa
if (something) {
do something
} else {
do something else
}U ovom prijmeru uspoređujemo dali je vrijednost varijable jednaka 100 sto u ovom primjeru je
const id = 100;
if (id == 100) {
console.log('TOCNO');
} else {
console.log('NETOCNO');
}U ovom primjeru uspoređujemo dali vrijednost nije jednaka vrijednosti varijable !=
const id = 100;
if (id != 100) {
console.log('TOCNO');
} else {
console.log('NETOCNO');
}Ako uspoređujemo sa 2 znaka jednakosti uspoređujemo vrijednost ne uspoređujemo tip varijable ako je varijabla string a u if-u intiger (broj) pokazati ce da je tocno. Ako ocemo uspoređivati i tip i vrijednost onda koristimo 3 znaka jednakosti === sto se u vecini slucaja koristi.
const id = 100;
if (id === 100) {
console.log('TOCNO');
} else {
console.log('NETOCNO');
}U ovom primjeru gledamo dali je id undefined tj dali postoji i dali je postavljen
const id = 100;
if (typeof id !== 'undefined') {
console.log(`The ID is ${id}`);
} else {
console.log('NO ID');
}Testiranje dali je nesto vece ili manje od necega
< manje od
> vece od
<= manje ili jednako
>= vece ili jednakoconst id = 100;
if (id > 90) {
console.log('TOCNO');
} else {
console.log('NETOCNO');
}else if u ovom primjeru gledamo koja je boja u varijabli else if mozemo dodavati koliko god puta treba
const color = 'red';
if (color === 'red') {
console.log('Color is red');
} else if (color === 'blue') {
console.log('Color is blue');
} else if (color === 'orange') {
console.log('Color is orange');
} else {
console.log('Color is not red, blue or orange');
}Logicki operatori
Logicki operatori su i (AND &&) i ili (OR ||)
const name = 'Steve';
const age = 70;
// AND &&
if (age > 0 && age < 12) {
console.log(`${name} is a child`);
} else if (age >= 13 && age <= 19) {
console.log(`${name} is a teenager`);
} else {
console.log(`${name} is an adult`);
}
// OR ||
if (age < 16 || age > 65) {
console.log(`${name} can not run in race`);
} else {
console.log(`${name} is registered for the race`);
}
Ternary operator je puno kraci od if else
const id = 100;
console.log(id === 100 ? 'CORRECT' : 'INCORRECT');ili drugi primjer
let age = 18;
let message;
message = age >= 16 ? 'You can drive.' : 'You cannot drive.';
console.log(message);
if else bez zagrada nije bas preporucljivo ali radi
const id = 100;
if(id === 100)
console.log('CORRECT');
else
console.log('INCORRECT');Switches
Switch statment je slican kao if samo radi na drugom principu ako imamo vise opcija bolje koristiti switch nego else if
Primjer u kojem provjeravamo koja je boja dodjeljena u varijabli
const color = 'red';
switch (color) {
case 'red':
console.log('Color is red');
break;
case 'blue':
console.log('Color is blue');
break;
case 'orenge':
console.log('Color is orange');
break;
default:
console.log('Color is not on the list');
break;
}U ovom primjeru gledamo koi je dan.
Dani u tjednu imaju index broj i po njemu gledamo koi je danas dan.
let day;
switch (new Date().getDay()) {
case 0:
day = 'Sunday';
break;
case 1:
day = 'Monday';
break;
case 2:
day = 'Tuesday';
break;
case 3:
day = 'Wednesday';
break;
case 4:
day = 'Thursday';
break;
case 5:
day = 'Friday';
break;
case 6:
day = 'Saturday';
break;
}
console.log(`Today is ${day}`);Funkcije function
Funkcija su blok koda koi izvrsavaju neku operaciju
U ovom primjeru Ispisujemo u konzolu “Hello”.
Pisemo funkciju sa kljucnom rjeci function dajemo joj ime i moramo je pozvati prije ili poslje funkcije nebitno.
function greet() {
console.log('Hello');
}
greet();Mozemo i pisati kljucnu rijec return u funkciji
function greet() {
return 'Hello';
}
console.log(greet());U ovom primjeru vidimo kako se dodjeljuju vrijednosti
function greet(firstName, lastName) {
return 'Hello ' + firstName + ' ' + lastName;
}
console.log(greet('John', 'Doe'));U ovom primjeru mozemo postaviti defaultne vrijednosti ako ih ne definiramo
function greet(firstName = 'John', lastName = 'Doe') {
return 'Hello ' + firstName + ' ' + lastName;
}
console.log(greet('Steve', 'Smith'));Function expression je funkcija u varijabli koa se i nemora nazvati imenom jer je u varijabli.
u ovom primjeru x ce biti br 8, i raditi ce mnozenje isto tako mozemo staviti defaltnu vrijednost tako da stavimo x = nesto.
const square = function (x) {
return x * x;
};
console.log(square(8));Immediately Invoked Function Expression IIFE
Funkcija koja se deklarira i izvrsava u isto vrijeme a pise se u zagradama i dodadju se zagrade na kraju.
(function () {
console.log('IIFE run...');
})();(function (name) {
console.log('Hello ' + name);
})('Brad');Property methods kad u objekt stavljamo funkciju
const todo = {
add: function () {
console.log('Add todo...');
},
edit: function(id){
console.log(`Editi todo ${id}`);
}
};
todo.add();
todo.edit(23);Loops
For
For loop petlja sa poznatim brojem ponavljanja ili petlja
Kad je točno poznat broj ponavljanja nekog postupka ili su poznati početni i krajnji uvjet. U for loopu se koristi let ili var a ne const jer mora biti promjenjiva.
U ovom primjeru ce izbaciti brojeve od 0 do 9 ako stavimo <= 10 onda ce izbaciti od 0 do 10
for (let i = 0; i < 10; i++) {
document.write(i);
}U ovom primjeru vidimo kako se moze dodati zapis u bilo kojem djelu petlje.
for (let i = 0; i <= 10; i++) {
if (i === 2) {
console.log('2 is added');
}
console.log(i);
}Ako dodamo continue u if onda ce se zamjeniti zapis na poziciji 2
for (let i = 0; i <= 10; i++) {
if (i === 2) {
console.log('2 is replaced');
continue;
}
console.log(i);
}Za prekid petlje u nekom trenutuku koristimo break, u obom slucaju ce se prekiniti petlja nakon sto dode do broja 5
for (let i = 0; i <= 10; i++) {
if (i === 2) {
console.log('2 is replaced');
continue;
}
if (i === 5) {
break;
}
console.log(i);
}While
For petlja se u prinicipu koristi kad znamo koliko puta cemo ponavljati a kad neznamo onda se koristi while loop
U ovom primjeru smo postavli i = 0 i petlja ce vrtiti dok ne dode do 10 a i++ pisemo unutrar viticastih zagrada, princip isti kako kod for
let i = 0;
while (i < 10) {
console.log(i);
i++;
}Do While
Do While je petlja sa uvjetom na kraju znacu da ce se petlja izvrtiti bar jednom do kraja tek tada ce gledati određene uvjete.
let i = 0;
do {
console.log('Number ' + i);
i++;
} while (i < 10);Tako i ako i stavimo da je 100 on ce ispisati 100 i tek tada gledati kakvi su uvjeti u while zagrdama
let i = 100;
do {
console.log('Number ' + i);
i++;
} while (i < 10);Primjer ispisivanja arraya kroz for petlju
const cars = ['Ford', 'Fiat', 'Skoda', 'Opel', 'Citroen'];
for (let i = 0; i < cars.length; i++) {
console.log(cars[i]);
}const cars = ['Ford', 'Fiat', 'Skoda', 'Opel', 'Citroen'];
for (let i = 0; i < cars.length; i++) {
document.write(`Auto ${cars[i]} </br>`);
}forEach fetlja je prakticna za ispisivanje arraya i puno jenostavniji kod.
Primjer za ispis arraya kroz forEach.
const cars = ['Ford', 'Fiat', 'Skoda', 'Opel', 'Citroen'];
cars.forEach(function (car) {
console.log(car);
});const cars = ['Ford', 'Fiat', 'Skoda', 'Opel', 'Citroen'];
cars.forEach((car) => {
console.log(car);
});Ako ocemo pristupiti index brojevima arrayu mozemo tako da dodamo u zagrade jos index i potom ga ispisemo u konzoli.
const cars = ['Ford', 'Fiat', 'Skoda', 'Opel', 'Citroen'];
cars.forEach((car, index) => {
console.log(index, car);
});Metoda map ce nam pretvoriti djelove objekta u array u ovom slucaju cemo id-jeve i imena izvuci iz objekta i pretvoriti u array
const users = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Sara' },
{ id: 3, name: 'Karen' },
{ id: 4, name: 'Josko' },
];
const ids = users.map(function (user) {
return user.id;
});
const names = users.map(function (user) {
return user.name;
});
console.log(ids);
console.log(names);for in petlja izvlaci podatke iz objekta u ovom slucaju x izvlaci key u sljedecem ce izvlaciti key i vrijednost keya
const user = {
firstName: 'John',
lastName: 'Doe',
age: 40,
};
for (let x in user) {
console.log(x);
}for (let x in user) {
console.log(`${x} : ${user[x]}`);
}Window Object Propertie
| Property | Description |
|---|---|
| closed | Returns a boolean true if a window is closed. |
| console | Returns the Console Object for the window. See also The Console Object. |
| defaultStatus | Deprecated. |
| document | Returns the Document object for the window. See also The Document Object. |
| frameElement | Returns the frame in which the window runs. |
| frames | Returns all window objects running in the window. |
| history | Returns the History object for the window. See also The History Object. |
| innerHeight | Returns the height of the window’s content area (viewport) including scrollbars |
| innerWidth | Returns the width of a window’s content area (viewport) including scrollbars |
| length | Returns the number of <iframe> elements in the current window |
| localStorage | Allows to save key/value pairs in a web browser. Stores the data with no expiration date |
| location | Returns the Location object for the window. See also the The Location Object. |
| name | Sets or returns the name of a window |
| navigator | Returns the Navigator object for the window. See also The Navigator object. |
| opener | Returns a reference to the window that created the window |
| outerHeight | Returns the height of the browser window, including toolbars/scrollbars |
| outerWidth | Returns the width of the browser window, including toolbars/scrollbars |
| pageXOffset | Returns the pixels the current document has been scrolled (horizontally) from the upper left corner of the window |
| pageYOffset | Returns the pixels the current document has been scrolled (vertically) from the upper left corner of the window |
| parent | Returns the parent window of the current window |
| screen | Returns the Screen object for the window See also The Screen object |
| screenLeft | Returns the horizontal coordinate of the window relative to the screen |
| screenTop | Returns the vertical coordinate of the window relative to the screen |
| screenX | Returns the horizontal coordinate of the window relative to the screen |
| screenY | Returns the vertical coordinate of the window relative to the screen |
| sessionStorage | Allows to save key/value pairs in a web browser. Stores the data for one session |
| scrollX | An alias of pageXOffset |
| scrollY | An alias of pageYOffset |
| self | Returns the current window |
| status | Deprecated. Avoid using it. |
| top | Returns the topmost browser window |
| Method | Description |
|---|---|
| alert() | Displays an alert box with a message and an OK button |
| atob() | Decodes a base-64 encoded string |
| blur() | Removes focus from the current window |
| btoa() | Encodes a string in base-64 |
| clearInterval() | Clears a timer set with setInterval() |
| clearTimeout() | Clears a timer set with setTimeout() |
| close() | Closes the current window |
| confirm() | Displays a dialog box with a message and an OK and a Cancel button |
| focus() | Sets focus to the current window |
| getComputedStyle() | Gets the current computed CSS styles applied to an element |
| getSelection() | Returns a Selection object representing the range of text selected by the user |
| matchMedia() | Returns a MediaQueryList object representing the specified CSS media query string |
| moveBy() | Moves a window relative to its current position |
| moveTo() | Moves a window to the specified position |
| open() | Opens a new browser window |
| print() | Prints the content of the current window |
| prompt() | Displays a dialog box that prompts the visitor for input |
| requestAnimationFrame() | Requests the browser to call a function to update an animation before the next repaint |
| resizeBy() | Resizes the window by the specified pixels |
| resizeTo() | Resizes the window to the specified width and height |
| scroll() | Deprecated. This method has been replaced by the scrollTo() method. |
| scrollBy() | Scrolls the document by the specified number of pixels |
| scrollTo() | Scrolls the document to the specified coordinates |
| setInterval() | Calls a function or evaluates an expression at specified intervals (in milliseconds) |
| setTimeout() | Calls a function or evaluates an expression after a specified number of milliseconds |
| stop() | Stops the window from loading |
Primjer kako se radi provjera.
U ovom primjeru ako se stisne da u konzli se ispise poruka YES a ako se stisne cancel izbaci poruku NO.
if (confirm('Dali ste sigurni')) {
console.log('YES');
} else {
console.log('NO');
}Mjerenje vanjskog prozora visina i širina znaci mjerimo vanjsku visinu i širinu browser-a.
window.outerHeight mijeri visinu
window.outerWidth mjeri širinu
let height;
let width;
height = window.outerHeight;
width = window.outerWidth;
console.log(`Visina browswera je: ${height}`);
console.log(`Širina browswera je: ${width}`);Mjerenje unutrašnjeg prozora znaci mjerimo unutrašnji dio browsera bez menija i ostaloga.
window.innerHeight mjerimo unutarnju visinu
window.innerWidth mjerimo unutanju širinu
let height;
let width;
height = window.innerHeight;
width = window.innerWidth;
console.log(`Visina unutrašnjeg prozora je: ${height}`);
console.log(`Širina unutrašnjeg prozora je: ${width}`);Za mjerenje koliko smo skrolali po visini.
let val;
val = window.scrollY;
console.log(val);Za mjerenje koliko smo skrolali po širini.
let val;
val = window.scrollY;
console.log(val);location nam pokazuje razne stvari vezano za sajt kao npr…
window.location;
window.location.hostname; //pokazuje host name
window.location.port; //pokazuje port
window.location.href; //pokazuje hrefRedirektanje na drugu stranicu u ovom slucaju google
window.location.href = 'https://www.google.com/';Reloudanje stranice.
window.location.reload();History Object
Ova metoda vraca na prethodnu stranicu za 1 ako nije minus ide naprijed za jednu stranicu
window.history.go(-1);Ova metoda nam vraca koliko stanica imamo unazad
window.history.length;Navigator Object daje razno razne informacije o browseru koi je, koja verzija, koi OS koi jezik itd itd, u principu je ok metoda za izvuci razno razne podatke o korisniku
window.navigator;platform namdaje koji OS koristi korsnik
appCodeName nam daje koi je browser
language nam daje koi jezik koristi
itd itd
window.navigator.platform;
window.navigator.appCodeName;
window.navigator.language;JavaScript Scope
U ovom primjeru varijabla a, b, c su varijable globalnog opsega
var a = 1;
let b = 2;
const c = 3;
console.log('Global scope: ', a, b, c);U ovom prijmeru imamo varijeble opsega funkcije i globalne varijable bitno je napomenuti da se nemogu mjenjati ili koristiti varijable drugog opsega
var a = 1;
let b = 2;
const c = 3;
function test() {
var a = 4;
let b = 5;
const c = 6;
console.log('Function scope: ', a, b, c);
}
test();
console.log('Global scope: ', a, b, c);DOM Document Object Model
Ako zelimo obuhvatiti ili seletirati cijeli HTML koristimo:
let val;
val = document.all;
console.log(val);Ako zelimo selektirati oderđeni html dio.
u ovom primjeru smo selektirali <head> dio
let val;
val = document.all[1];Ako zelimo viditi koliko elemenata ima određeni HTML koristimo
let val;
val = document.all.length;U ovom primjeru selektiramo i prvoj liniji <head> a u drugoj <body> itd itd
let val;
val = document.head;
val = document.body;Single element selectori
document.getElementById();
U ovom primjeru dohvaćamo element po ID nazivu
document.getElementById('id_diva');Dohvacanje HTML ID-a.
document.getElementById('id_diva').id;Dohvacanje klase ID ako je ima.
document.getElementById('id_diva').className;Promjena stila div-a sa metodom style . U ovom slucaju dodajemo crvenu pozadinu na ovaj div, inace mozemo koristiti sve css stilove.
document.getElementById('id-diva').style.background = 'red';Ako zelimo promjeniti npr. tekst u divu.
document.getElementById('id-diva').textContent = 'Novi tekst';Isto dobijemo i sa innerText.
val = document.getElementById('id-diva').innerText = 'Novi tekst';
Ako zelimo ubaciti HTML kod u div.
U ovom slucaju cemo promjeniti boju teksta.
document.getElementById('id-diva').innerHTML =
'<span style="color:red">Novi tekst</span>';document.querySelector();
Query selector je noviji i u principu se koristi za dohvacanje elemenata u HTML-u
U prvoj liniji smo selektirali id i morali smo mu staviti # kao znak za id.
U drugoj liniji smo selektirali po klasi i morali smo mu staviti . kao znak za class.
U trećoj smo selektirali h5 bez ID ili klase samo smo stavili h5, u ovom slucaju ce selektirati samo prvi h5 u dokumentu.
document.querySelector('#id-diva');
document.querySelector('.class-diva');
document.querySelector('h5');Ako imamo listu sa vise elemenata ovaj primjer ce selektirati samo prvi element liste i promjeniti boju.
document.querySelector('li').style.color = 'red';U ovom primjeru cemo selektirati zadnji element u listi i promjeniti boju
li:last-child
document.querySelector('li:last-child').style.color = 'red';Ako zelimo selektirati npr 3 element u listi koristimo pseudo klase
li:nth-child(3) sad koi broj stavimo u zagradi na taj element ce se odnositi.
document.querySelector('li:nth-child(3)').style.color = 'red';Ako ocemo promjeniti tekst u 3 elementu liste radimo na sljedeci nacin.
document.querySelector('li:nth-child(3)').textContent = 'Novi Tekst';Selekcija više elemenata
Selekciom vise elemenata nam vraca ili HTML kolekciju element ili node list koje su slicnog fomata kao array nemoze s njima manišulirati kao sa arrayem ali mozemo konvertirati u array i onda manipulirati s njima kao array
document.getElementsByClassName();
u ovom slucaju imamo listu sa klasom collection-items sa getElementsByClassName(); cemo dohvatiti cijelu listu i cak neki drugi element koi ima ovu klasu. U konzioli ce se ispisati svi elmeniti s ovom klasom.
<ul>
<li class="list-class">Coffee</li>
<li class="list-class">Tea</li>
<li class="list-class">Milk</li>
<li class="list-class">Orange</li>
<li class="list-class">Water</li>
<li class="list-class">Cola</li>
</ul> const items = document.getElementsByClassName('list-class');
console.log(items);Ako zelimo pristupiti određenom elementu ove klase stavljamo ga u uglate zagrade []
const items = document.getElementsByClassName('list-class');
console.log(items[2]);Mozemo pristupiti određenom elementu na ovaj nacin i manipulirati s njime.
U ovom primjeru ćemo promjeniti boju teksta elementu koi ima index broj 2.
Ali nemozemo promjeniti svima kompletnoj listi ako maknemo uglate zagrade.
const items = document.getElementsByClassName('list-class');
items[2].style.color = 'red';U ovom primjeru cemo promjeniti tekst u elementu sa index brojem 3
const items = document.getElementsByClassName('list-class');
items[3].textContent = 'Novi tekst';Nemoramo koristiti getElementsByClassName() na globalnom nivou je mozemo biti specificniji tako da sa document.querySelector() selektiramo listu pa onda sa getElementsByClassName() izabenremo elemente u toj listi da nebi obuhvatili neke druge elemente koi imaju tu klasu
const listItems = document.querySelector('ul').getElementsByClassName('list-class')document.getElementsByTagName();
Sa ovom metodom dohvacamo HTML tag name u ovom slucaju <li> i mjenjamo tekst u 3. index polju. Isto dohvacamo odeđeni element sa uglatima zagradama.
Uglavnom radi isto kao i querySelector().
const items = document.getElementsByTagName('li');
items[3].textContent = 'Novi tekst';Konvertiranje HTML kolekcije u array. U ovom slucaju konvertiramo cijelu listu u array.
let lis = document.getElementsByTagName('li');
lis = Array.from(lis);Sad ako zelimo manipulirati sa cijelom listom mozemo to ako konvertiramo HTML kolekciju u array kao u gornjem primjeru i provucemo je kroz forEach petlju. U ovom slucaju smo Promjenili tekst i boju u cijeloj listi .
let lis = document.getElementsByTagName('li');
lis = Array.from(lis);
lis.forEach(function (li) {
li.textContent = 'Novi Text';
li.style.color = 'red';
});document.querySelectorAll();
querySelectorAll vraca node list i nemoramo ga konvertirati u array da možemo manipulirati s u ovom slucaju listom.
const items = document.querySelectorAll('.list-class');
items.forEach(function (item) {
item.textContent = 'Novi tekst';
});U ovom prijmeru mozemo izvuci index brojeve liste.
const items = document.querySelectorAll('.list-class');
items.forEach(function (item, index) {
item.textContent = `${index}: Novi tekst`;
});U ovom prijmeru cemo zamjeniti tekst svakom drugom elementu u listi poćevši od prvog elementa.
const liOdd = document.querySelectorAll('li:nth-child(odd)');
liOdd.forEach(function (item, index) {
item.textContent = `${index}: Novi tekst`;
});U ovom prijmeru cemo zamjeniti tekst svakom drugom elementu u listi poćevši od drugog elementa.
const liEven = document.querySelectorAll('li:nth-child(even)');
liEven.forEach(function (item, index) {
item.textContent = `${index}: Novi tekst`;
});Mozemo to sve i sa for loopom for loop ce raditi i na html kolekciji ako nismo konvertirali u array. U ovom slucaju cemo obojati pozadinu svaku drugu počenši od druge.
const liEven = document.querySelectorAll('li:nth-child(even)');
for (let i = 0; i < liEven.length; i++) {
liEven[i].style.background = '#ccc';
}Travesing DOM znaci dohvacanje child ili parent nodova.
childNodes dohvaća nodove (node list) po redovima.
children dohvaca html kolekciju elemente u ovom slucaju liste.
let val;
const list = document.querySelector('ul.collection');
val = list.childNodes;
console.log(val);Dohvacanje childrena.
let val;
const list = document.querySelector('ul.collection');
val = list.children;
console.log(val);Dohvacanje samo jednog childrena u ovom slucaju index boja 1
let val;
const list = document.querySelector('ul.collection');
val = list;
val = list.children[1];
console.log(val);U ovom slucaju cemo promjeniti tekst na listi indexa br 1
let val;
const list = document.querySelector('ul.collection');
val = list;
val = list.children[1].textContent = 'Novi tekst';
console.log(val);U ovom slucaju dobijamo children od childrena imamo link u listi pa cemo dobiti njega.
let val;
const list = document.querySelector('ul.collection');
val = list.children[3].children;
console.log(val);Na ovaj nacin mozemo dodavati id u specifican child.
let val;
const list = document.querySelector('ul.collection');
val = list;
list.children[3].children[0].id = 'test-id';Kako dobaviti parent od elementa.
Ako imamo neku listu sa li elementom
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>Ako hocemo dohvatiti parent element koristimo parentNode.
u ovom slucaju ce nam u konzoli izbaciti <ul>
let val;
const listItem = document.querySelector('li');
val = listItem.parentNode;
console.log(val);Ako dodamo vise parentNode-a moze mo ih staviti koliko ocemo on ce se samo dizati koliko ima parent elemenata.
nextSibling nam daje sljedeci text node.
let val;
const listItem = document.querySelector('li');
val = listItem.nextSibling;
console.log(val);
nextElementSibling nam daje sljedeci element u listi.
U ovom prijmeru smo selektirali prvi li element on ce nam dohvatiti prvi sljedeci.
let val;
const listItem = document.querySelector('li');
val = listItem.nextElementSibling;
console.log(val);Ako zelimo ici dalje i dohvatiti sljedeci samo stavimo vise nextElementSibling
let val;
const listItem = document.querySelector('li');
val = listItem.nextElementSibling.nextElementSibling;
console.log(val);Isto tako mozemo dohvatiti i prethodni element ili text node
let val;
const listItem = document.querySelector('li');
val = listItem.previusElementSibling;
console.log(val);Kreiranje elemenata
Primjer kako se kreira novi HTML <li> element
const li = document.createElement('li');
console.log(li);
Sada cemo dodati prethodo kreiranom <li> elementu klasu, klasa se dodaje tako da na varijablu kreiranog elementa stavimo className.
const li = document.createElement('li');
li.className = 'dodana-klasa';
console.log(li);Isto tako mozemo dodavati i ID elementa
li.id = 'dodan-id';Mozemo dodavati i atribute u ovom slucaju novi title.
li.setAttribute('title', 'Novi Element');Ako zelimo staviti tekst node tj staviti nesto u element koi smo kreirali
li.appendChild(document.createTextNode('Hello World'));Primjer kako dodati <li> element na <ul>, selektirali smo listu i sa appendChild dodali varijeblu i sve sta smo nakačili na nju (klasu, id i dodali tekst u listi).
document.querySelector('ul').appendChild(li);Ovako izgleda kompletan kod pravljenja elementa dodavanja klasa id-jeva i ostaloga i kačenje na listu.
//Kreiranje elementa
const li = document.createElement('li');
//Dodavanje klase
li.className = 'dodana-klasa';
//Dodavanje id-a
li.id = 'dodan-id';
//Dodavanje atributa
li.setAttribute('title', 'Novi Element');
//Kreiranje teksta i dodavanje elementu
li.appendChild(document.createTextNode('Hello World'));
//Dodavanje kreiranog li elementa na ul
document.querySelector('ul').appendChild(li);
console.log(li);U ovom primjeru smo kreirali a element i dodali ga na prethodno kreiran li element koi smo dodali na kraj vec postojeće liste.
//Kreiranje link elementa
const link = document.createElement('a');
//dodavanje klase linku
link.className = 'klasa-linka';
//Ubacivanje html u element
link.innerHTML = ' <a href="#">X</a>';
//Dodavanje linka slovo X u li da se prikazuje u produzetku dodanog elemeta liste
li.appendChild(link);Primjer kako sve skupa izgleda.
//Kreiranje elementa
const li = document.createElement('li');
//Dodavanje klase
li.className = 'dodana-klasa';
//Dodavanje id-a
li.id = 'dodan-id';
//Dodavanje atributa
li.setAttribute('title', 'Novi Element');
//Kreiranje teksta i dodavanje elementu
li.appendChild(document.createTextNode('Hello World'));
//Kreiranje link elementa
const link = document.createElement('a');
//dodavanje klase linku
link.className = 'klasa-linka';
//Ubacivanje html u element
link.innerHTML = ' <a href="#">X</a>';
//Dodavanje linka slovo X u li da se prikazuje u produzetku dodanog elemeta liste
li.appendChild(link);
//Dodavanje kreiranog li elementa na ul
document.querySelector('ul').appendChild(li);
console.log(li);Dodavanje i zamjena elemenata
<div id="naslov-liste">
<h1 id="naslov">Lista</h1>
</div>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Orange</li>
<li>Bannana</li>
</ul>U ovom odjeljku cemo vidjeti kako se miču elementi dodavaju i miču klase, kako manipulirati klasama.
Zamjena elementa
U ovom primjeru cemo zamjeniti h1 elment poviše liste sa h2.
Napraviti ćemo to tako da prvo kreiramo element, dodamo mu id zatim dodamo text node (sadržaj), zatim dohvatimo stari element koi ocemo zamjeniti, zatim dohvatimo njegov parent i paretntu zamjenimo sa metodom replaceChild() i u zagradama prvo stavljamo novi naslov koi smo kreirali i onda stari naslov koi ćemo zamjeniti.
//Kreiranje elementa
const newHeading = document.createElement('h2');
//Dodavanje id
newHeading.id = 'naslov';
//Dodavanje teksta u element
newHeading.appendChild(document.createTextNode('Novi Naslov'));
//Dohvacanje staroga naslova kojega cemo zamjeniti
const oldHeading = document.querySelector('#naslov');
//Parent od staroga naslova
const parent = document.querySelector('#naslov-liste');
//Zamjena naslova
parent.replaceChild(newHeading, oldHeading);Micanje elemenata
Radimo na nacin da selektiramo cijelu listu stavimo u varijablu lis potom sa uglatim zagradama lis[] selektiramo tocno element po index broju i stavimo .remove() i taj element se pobriše ili makne.
const lis = document.querySelectorAll('li');
lis[1].remove();Micanje child elementa radimo tako da selektiramo parent element od u ovom prijeru liste i sa metodom removeChild() maknemo element koi u zagradama selektiramo kao u gornjem primjeru removeChild(lis[2]);
const lis = document.querySelectorAll('li');
const list = document.querySelector('ul');
list.removeChild(lis[2]);Dodavanje klase na link
<div id="naslov-liste">
<h1 id="naslov">Lista</h1>
</div>
<ul>
<li>Coffee <a href="#" class="link">X</a></li>
<li>Tea <a href="#" class="link">X</a></li>
<li>Milk <a href="#" class="link">X</a></li>
<li>Orange <a href="#" class="link">X</a></li>
<li>Bannana <a href="#" class="link">X</a></li>
</ul>U ovom primjeru cemo dodati klasu liku u listi i to prvom elementu liste
const firstLi = document.querySelector('li:first-child');
const link = firstLi.children[0];
link.classList.add('test');U ovom primjeru ćemo makniti dodanu klasu
link.classList.remove('test');Dohvaćanje atributa.
Atribute dohvacamo sa metodom getAttribute(); u ovom slucaju ce vratiti # jer ima taj atribut.
U sljedecem primjeru cemo dohvatiti atribut linka u listi.
const firstLi = document.querySelector('li:first-child');
const link = firstLi.children[0];
let val;
val = link.getAttribute('href');
console.log(val);Zamjena atributa radimo sa metodom
setAttribute(‘href’, ‘http://google.com’); znaci prva vrijednost u zagradi je atribut kojeg mjenjamo a druga vrijednost je s com ga mjenjamo, u ovom slucaju atribut href mjenjamo sa # na google.com.
const firstLi = document.querySelector('li:first-child');
const link = firstLi.children[0];
let val;
val = link.getAttribute('href');
val = link.setAttribute('href', 'http://google.com');
console.log(val);U ovom primjeru ćemo provjeriti dali ima neki atribut metodom hasAttribute().
U ovom slucaju vraca boolean vrijednost true ili false, tu ce vratiti true jer ima atribut href.
const firstLi = document.querySelector('li:first-child');
const link = firstLi.children[0];
let val;
val = link.getAttribute('href');
val = link.setAttribute('href', 'http://google.com');
val = link.hasAttribute('href');
console.log(val);Micanje atributa sa metodom removeAttribute();.
Prethodnoj varijabli link ćemo makniti atribut href
const firstLi = document.querySelector('li:first-child');
const link = firstLi.children[0];
let val;
val = link.getAttribute('href');
val = link.setAttribute('href', 'http://google.com');
val = link.hasAttribute('href');
link.removeAttribute('href');
console.log(val);Event Listeneri
Event listeneri slusaju sta se događa sa odeđenim izabranim dijelom stranice npr sa botunom. U prethodni HTML ćemo dodati botun an kraju liste.
<div id="naslov-liste">
<h1 id="naslov">Lista</h1>
</div>
<ul>
<li>Coffee <a href="#" class="link">X</a></li>
<li>Tea <a href="#" class="link">X</a></li>
<li>Milk <a href="#" class="link">X</a></li>
<li>Orange <a href="#" class="link">X</a></li>
<li>Bannana <a href="#" class="link">X</a></li>
</ul>
<button type="button" id="button">Click Me!</button>U ovom primjeru kad kliknemo na botun ispisati ce se u konzolu poruka.
Kroz querySelector() smo selektirali id botun dodali mu event listener metodom addEventListener() u zagradama smo stavili koju metodu da slusa u ovom slućaju klik i u produzetku stavljamo funkciju koja kad kliknemo ispisuje poruku u konzoli.
document.querySelector('#button').addEventListener('click', function () {
console.log('Kliknuto na botun');
});Malo čišći kod tako da smo u zagradi stavili metodu klik i u produzetku samo naziv funckije i potom funciju posebno.
document.querySelector('#button').addEventListener('click', onClick);
function onClick() {
console.log('Kliknuto na botun');
}Ovom metodom ispisujemo u konzolu kompletan e event funkcije
document.querySelector('#button').addEventListener('click', onClick);
function onClick(e) {
let val;
val = e;
console.log(val);
}Mouse event
Od mouse eventa imamo click, dblclick, mouseup, mousedown, mouseenter, mouseleave, mouseover, mouseout, mousemove
U ovom primjeru ćemo postaviti click event za html botun.
U prvoj liniji smo postavili varijablu za botun.
U trecoj smo dodali event listener za click i postavlili ime funkcije.
U petoj liniji smo napravili funkciju koja raditi tako kad kliknemo na botun u konzoli se ispisuje tekst.
<button type="button" id="button">Click Me!</button>const button = document.querySelector('#button');
button.addEventListener('click', runEvent);
function runEvent() {
console.log('Button clicked');
}U ovom primjeru ispisujemo u konzoli koi je tip eventa u ovom slucaju klik.
function runEvent(e) {
console.log(`EVENT TYPE: ${e.type}`);
}U ovom primeru cemo ispisati tekst u konzoli ako 2 puta kliknemo na botun takozvani duble click
const button = document.querySelector('#button');
button.addEventListener('dblclick', runEvent);
function runEvent() {
console.log('Duble click');
}Mousedown je metoda kad misom kliknemo na botun i drzimo stisnuto
button.addEventListener('mousedown', runEvent);
function runEvent() {
console.log('Mousedown');
}Mouseup je metoda kad pustimo stisnuti botun tek onda ce se ispisati tekst u konzoli
button.addEventListener('mouseup', runEvent);
function runEvent() {
console.log('Mouseup');
}Za mouseenter metodu cemo napraviti div kvadrat 200 x 200 px.
poruka u konzoli ce se ispisati kad uđemo mišom u kvadrat bez ikakvog klikanja ili bilokakve interakcije.
<div id="box" style="height: 200px; width: 200px"></div>const box = document.querySelector('#box');
box.addEventListener('mouseenter', runEvent);
function runEvent() {
console.log('Mouseenter');
}mouseleave je metoda koja radi kad izađemo iz boxa znaci kad izađemo misom iz boxa onda u ovom slucaju ispisuje poruku u konzoli
box.addEventListener('mouseleave', runEvent);
function runEvent() {
console.log('Mouseleave');
}mouseover je slicna metoda kao mouseenter isto se u ovom slucaju ispisuje poruka u konzoli kad se prelazi mišom preko boxa
box.addEventListener('mouseover', runEvent);
function runEvent() {
console.log('Mouseover');
}mouseout metoda je slicna kao mouseleave isto se u ovom slucaju ispisuje poruka u konzoli kad izađemo iz boxa mišom
box.addEventListener('mouseout', runEvent);
function runEvent() {
console.log('Mouseout');
}U ovom primjeri cemo ispisati u konzolu kordinate miša po y i x osnovi kad mis uđe u kvadrat koi smo napravili.
box.addEventListener('mousemove', runEvent);
function runEvent(e) {
console.log(`MouseX: ${e.offsetX} MouseY: ${e.offsetY}`);
}Keyboard Input
keydown
U ovom primjeru cemo u konzoli ispisati vrijednost upisanog teksta u formi kroz eventListener keydown.
<input type="text" id="form" />const form = document.querySelector('#form');
form.addEventListener('keydown', runEvent);
function runEvent(e) {
console.log(form.value);
}
U ovom primjeru cemo u konzoli ispisati tip listenera
form.addEventListener('keydown', runEvent);
function runEvent(e) {
console.log(e.type);
}U ovom prijmeru cemo istovremeno ispisivati ispod forme u h5 element ono sto upisujemo u formu
<input type="text" id="form" />
<h5>Naslov</h5>const form = document.querySelector('#form');
const heading = document.querySelector('h5');
form.addEventListener('keydown', runEvent);
function runEvent(e) {
console.log(e.type);
heading.innerText = e.target.value;
}keyup
Keyup event se pali kad stisnemo tipku pa tek kad pustimo keyup se pali u ovom slucaju ce u konzoli ispisati keyup tek kad se stisnuta tipka pusti.
const form = document.querySelector('#form');
form.addEventListener('keyup', runEvent);
function runEvent(e) {
console.log(e.type);
}keypress
Keypress event se pali cim stisnemo neku tipku
const form = document.querySelector('#form');
form.addEventListener('keypress', runEvent);
function runEvent(e) {
console.log(e.type);
}focus
Focus event se trigera kad fokusiramo neku formu
const form = document.querySelector('#form');
form.addEventListener('focus', runEvent);
function runEvent(e) {
console.log(e.type);
}blur
Blur event radi kontra focusa on se trigera kad kliknemo unutra neke forme tj. kad fokusiramo pa kad kliknemo izvan forme onda ce u ovom slucaju ispisati konzolu.
const form = document.querySelector('#form');
form.addEventListener('blur', runEvent);
function runEvent(e) {
console.log(e.type);
}cut event radi tako da kad upisemo nesto u formu ili ne upisemo pa stisnemo cut, isto tako radi event copy i paste.
const form = document.querySelector('#form');
form.addEventListener('cut', runEvent);
form.addEventListener('copy', runEvent);
form.addEventListener('paste', runEvent);
function runEvent(e) {
console.log(e.type);
}
input event radi tako da ako nesto upisujemo brisemo cutamo pastamo on ce se aktivirati.
const form = document.querySelector('#form');
form.addEventListener('input', runEvent);
function runEvent(e) {
console.log(e.type);
}change event slusa dali smo u navedenom primjeru promjenili listu za biranje on ce se aktivirati tj ispisati u konzolu kad promjenimo vrijednost u neku drugu.
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>const select = document.querySelector('select');
select.addEventListener('change', runEvent);
function runEvent(e) {
console.log(e.type);
}Mozemo i dodati da se ispisuje vrijednost onoga sto smo promjenili sa e.target.value.
select.addEventListener('change', runEvent);
function runEvent(e) {
console.log(e.type);
console.log(e.target.value);
}Event delegacija
U ovom primjeru cemo ispisati u konzolu koi element smo kliknili u ovom html dokumentu. Stavili smo da se slusa cijeli dokument i kad kliknemo na neki element on ce se ispisati u konzoli.
<div id="naslov-liste">
<h1 id="naslov">Lista</h1>
</div>
<ul>
<li>Coffee <a href="#" class="link delete-item">X</a></li>
<li>Tea <a href="#" class="link delete-item">X</a></li>
<li>Milk <a href="#" class="link delete-item">X</a></li>
<li>Orange <a href="#" class="link delete-item">X</a></li>
<li>Banana <a href="#" class="link delete-item">X</a></li>
</ul>document.body.addEventListener('click', elementClick);
function elementClick(e) {
console.log(e.target);
}U sljedećem primjeru ćemo targetirati samo odeđeni element ili klasu tako da se u konzoli nece nista isoisati neko tek kad kliknemo na ranije određeni element ili klasu.
document.body.addEventListener('click', elementClick);
function elementClick(e) {
if (e.target.classList.contains('link')) {
console.log('Kliknut element koi ima klasu link');
}
}U ovom primjeru cemo izbrisati element liste na link X.
e.target.parentElement.remove(); s ovom metodom izbrisemo parent element od odabranoge elementa. Ako je element dublje samo dodamo jos jedan parentElement kao u ovom primjeru e.target.parentElement.parentElement.remove();.
document.body.addEventListener('click', elementClick);
function elementClick(e) {
if (e.target.classList.contains('link')) {
console.log('Kliknut element koi ima klasu link');
e.target.parentElement.remove();
}
}Local i Session Storage
Da bi dodali nesto u local storage koristimo metodu localStorage.setItem();
Kod spremanje imamo key u value, kod sljedeceg primjera imamo key = name i value = John
localStorage.setItem('name', 'John');
Session storage upisijemo sessiju koja je tu dok se ne ugasi browser isto se upisuje kao localstorage samo sa drugom metodom sessionStorage.
sessionStorage.setItem('name', 'Bath');
Micanje elemenata iz local storega koristimo metodu localStorage.removeItem();.
u ovom primjeru smo maknuli zapis po kljucu name
localStorage.removeItem('name');Dobivanje elemenata iz storega metodom localStorage.getItem();
U ovom primjeru smo dodali u varijablu da po kljucu name izvucemo zapis iz localstorega i ispisemo ga u konzoli, ispisati ce se samo value od ovog kljuca.
const name = localStorage.getItem('name');
console.log(name);Ispisivanje vise zapisa.
localStorage.setItem('name', 'John');
localStorage.setItem('age', '30');
const name = localStorage.getItem('name');
const age = localStorage.getItem('age');
console.log(name, age);Brisanje svih zapisa iz localstorega kositimo metodu localStorage.clear();
localStorage.clear();U sljedećem primjeru ćemo iz forme submitati u localstorage.
U prvoj liniji smo selektirali formu i stavlili event listener na submit botun i postavlili smo funkciju u kojoj smo u 4 liniji postavili varijablu vrijednosti upisane u formu znaci ono sto smo mi upisali u formu u onda smo 5 liniji to upisali pod kljucem task u localstorage.
U ovom primjeru je problem sto mozemo upisati samo jedan zapis pod tim kljucem. Svaki sljedeci ga pregazi ili zamjeni za drugi.
<form>
<input type="text" id="form" />
<input type="submit" value="Submit" id="button" />
</form>document.querySelector('form').addEventListener('submit', additem);
function additem(e) {
const task = document.querySelector('#form').value;
localStorage.setItem('task', task);
e.preventDefault();
}Spremanje u localstorage vise podatataka mozemo tako da kreiramo array i spremimo ga kao string.
U 6 liniji koda smo kreirali varijablu tasks nju cemo koristiti da u nju upisemo array.
U 7 liniji koda povlacimo iz localstorega vrijednosti ili provjeravamo ima li sta unutra ako ima povlacimo to vanka i nadodajemo ako nema povlacimo samo prazni array i nadodajemo na njega to. U 11 liniji povlacimo vrijednosti iz localstorega .
U 14 liniji pushamo task kroz tasks.
u 16 liniji postavljamo u localstorage.
document.querySelector('form').addEventListener('submit', additem);
function additem(e) {
const task = document.querySelector('#form').value;
let tasks;
if (localStorage.getItem('tasks') === null) {
tasks = [];
} else {
tasks = JSON.parse(localStorage.getItem('tasks'));
}
tasks.push(task);
localStorage.setItem('tasks', JSON.stringify(tasks));
e.preventDefault();
}
OOP Object Oriented Javascrit
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
Objektno orijentirano programiranje ili kraće OOP je jedan od mogućih pristupa programiranju računala. Za razliku od ostalih pristupa, u kojima je težište na akcijama koje se vrše na podatkovnim strukturama, ovdje je težište na projektiranju aplikacije kao skupa objekata koji izmjenjuju poruke između sebe.
U oop mozemo imati 2 klase a jedan objekt moze imati 2 instance iz te dvije klase.
U OOP imamo
– Class
– abstract Class
– Static method
– Method in class – instance methods
– Objects
– Inheritance
– Prototypes
Class – klasa je predložak nacrt ili skup uputa ili pravila za kreiranje objekata, klasa određuje kako će se objekt ponašati i što će objekt sadržavati.
Constructor – Konstruktor je posebna metoda klase koja inicijalizira novostvoreni objekt tog tipa. Kad god se kreira objekt, konstruktor se automatski poziva.
Object – Objekt je instanca klase. Objekti se cesto koriste za predstavljanje stvari iz stvarnog svijeta.
//klasa je definicija, patern, kalup ili, blueprint za instancu objekta
class Person {
//constructor je metoda klase koja inicijalizira novostvoreni objekt kad god se kreira objekt konstruktor se automatski poziva
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
//Objekt je instanca klase koja sadrzi realne vrijednosti ili podatke
const mary = new Person('Mary', 'Wiliams');
const john = new Person('John', 'Doe');
console.log(mary);
console.log(john);Abstract class – Apstraktna klasa je klasa koja se nemože instancirati
class Person2 {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
if (new.target === Person2)
throw new Error('ova se klase nemoze instancirati');
}
}
class Man extends Person2 {
constructor(firstName, lastName, gender) {
super(firstName, lastName);
this.gender = gender;
}
}
const brad = new Man('Brad', 'Anderson', 'male');
// const brad2 = new Person2('Brad', 'Anderson', 'male');
console.log(brad);Static method ili property – staic metoda ili property je metoda koja se veže ili prikaći za klasu ne za instancu, nemoze se pozvati sa instancom klase samo klasa moze pozvati static method ili property, instancirani objekti kreirani iz klase nemogu pozvati ni prisupiti static methodi ili property
//static metoda se nemoze pozvati sa instancom nego se ona veze za klasu
class Car {
//static property
static numberOfCar = 0;
//static method
static startRace() {
console.log('Race start');
}
constructor(model) {
this.model = model;
Car.numberOfCar += 1; //svakom instanciranju klase ce se povecati br za 1
}
}
const car1 = new Car('Punto');
const car2 = new Car('Combo');
const car3 = new Car('C3');
console.log(car1);
console.log(Car.numberOfCar); //static property
console.log(`Broj instanci klase ${Car.numberOfCar}`); //static property
//ni jedan od instanciranih objekata ne mogu startati race jer je to staticna metoda klase, samo class moze startati race ili samo class moze pozvati static method
Car.startRace(); //static methodPrimjer klase bez konstruktora samo sa static methodom
class Numbers {
static addNumbers(x, y) {
return x + y;
}
}
console.log(Numbers.addNumbers(1, 2));Inheritance – nasljeđivanje – kad već definiramo neki objekt, a zatreba nam neki sličan objekt koji je zapravo podskup početnog objekta, a treba nam za nadogradnju postojece klase.
Super kljucna rijec se koristi u nasljeđenim klasama (Inheritance) da povuće svojstva konstuktora iz nasljeđene klase.
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
class Worker extends Person {
constructor(firstName, lastName, company) {
// super keyword se koristi da povuce svojstva konstruktora od superklase
super(firstName, lastName);
this.company = company;
}
fact() {
return `Worker ${this.firstName} ${this.lastName} is working in ${this.company}.`;
}
}
const dave = new Worker('Dave', 'Collins', 'Microsoft');
console.log(dave);
console.log(dave.fact());Prototypes dodaje nova svojstva (properties) u konstruktor objekta, koristi se kad se nemoze pristupiti klasi u frareworkovima kad ocemo dodati novo svojstvo u konstuktor.
class Person4 {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
const brian = new Person4('Brian', 'Brijanovic');
console.log(brian);
Person4.prototype.company = 'microsoft';
console.log(brian.company);Ako ocemo ispisati npr samo prezime u jednostavnom objektu
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
const mary = new Person('Mary', 'Wiliams');
console.log(mary.lastName);Metode u objektima
U ovom prijeru smo dodali metodu greeting. Metoda predstavlja nacin ponašanja klase.
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
greeting() {
return `Hello there ${this.firstName} ${this.lastName}`;
}
}
const mary = new Person('Mary', 'Wiliams');
console.log(mary.greeting());Asynchronous JavaScript
Sinkroni javacript funkcionira tako da se ne izvrsava kod sinkrono ili po redu nego asinkrono to znaci da ne mora cekati da se izvrsi neki dio koda da bi se dalje izvrsavalo.
AJAX
AJAX = Asynchronous JavaScript And XML.
Ajax nije programski jezik ni framework ni libraries nego je ugrađeni protokol u browseru koi nam omogućava asinkrono izvršavanje koda tj dohvaćanje sa servera nekih djelova nekih data ili tekstualnih datoteka te prikazivanja bez ponovnog ucitavanja/ refreshanja kompletne stranice nego samo tog dijela.
Libraries i metode i tehnologije:
- Fetch API
- Axios
- Superagent
- jQuery
- Node HTTP
Vecina API-ja vraca JSONdata a AJAX moze raditi sa obicnim textom ćitajuci i izbacivanju obićnog teksta u stranicu.
Neki kod statusi:
HTTP Statuses //samo oni sta nama trebaju za ovo poglavlje
200: "OK"
403: "Forbidden"
404: "Not Found"
Dohvacanje tekasta iz .txt file i ispisivanje u konzolu
U prvoj liniji smo seletirali botun i dodali mu event listener na klik i dodali funkciju loadData.
U 5. liniji smo kreirali XHR objekt.
U 8. liniji smo postavili tip requesta za otvoriti metodom GET.
GET znaci da zelis porocitati file ili url. Sljedeci parametar je fajla koju Želimo otvoriti ili procitati metodom GET u ovom slucaju data.txt Treci parametar stavljamo ako zelimo asinkrono izvrsavanje koda onda stavljamo true. I bez toga true bi se dokument otvorio i prikazao u konzoli.
U 10 liniji metoda onload znaci kad se ucita file koi smo pozvali pravimo funkciju s kojom provjeravamo status loadanja (HTTP stastus) ako je 200 znaci da je sve ok kod loudanja i da je spremno zatim u konzoli ispišemo sadrzaj fajle sa this.responseText metodom. Mogli smo i bez if provjere isto bi ispisalo ako bi sve proslo u redu.
| Method | Description |
|---|---|
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
<button id="button">Get Data</button>
<br /><br />
<div id="output"></div>document.querySelector('#button').addEventListener('click', loadData);
function loadData() {
//Create XHR Object
const xhr = new XMLHttpRequest();
//OPEN
xhr.open('GET', 'data.txt', true);
xhr.onload = function () {
if (this.status === 200) {
console.log(this.responseText);
}
};
xhr.send();
}Za provjeru readystatea ovisno di ga stavimo
console.log('READYSTATE:', xhr.readyState);ReadyState Values
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is readyAko stavimo readyState provjeru u onload funkciju pokazati ce state 4
xhr.onload = function () {
console.log('READYSTATE', xhr.readyState);
if (this.status === 200) {
console.log(xhr.responseText);
}
};Ako ocemo da se nesto prikaze dok se louda dokument kao neki progres loader ili spiner koristimo onprogress i tu ce readyState biti 3 “processing request”.
Dobro koristiti da aplikacija bude user friendly.
xhr.onprogress = function () {
console.log('READYSTATE:', xhr.readyState);
};
Za provjeru errora ako nesto nije proslo kako treba koristimo onerror
xhr.onerror = function(){
console.log('Error');
}Primjerk kako ispisemo u dokumentu da se stanica ne louda samo da se ispise tekst iz dokumenta data.txt.
xhr.onload = function () {
console.log('READYSTATE', xhr.readyState);
if (this.status === 200) {
document.querySelector(
'#output'
).innerHTML = `<p>${this.responseText}</p>`;
}
};kompletan kod sa error i ostalim provjerama
document.querySelector('#button').addEventListener('click', loadData);
function loadData() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.txt', true);
xhr.onprogress = function () {
console.log('READYSTATE:', xhr.readyState);
};
xhr.onload = function () {
console.log('READYSTATE', xhr.readyState);
if (this.status === 200) {
document.querySelector(
'#output'
).innerHTML = `<p>${this.responseText}</p>`;
}
};
xhr.onerror = function () {
console.log('Error');
};
xhr.send();
}
Povlacenje JSON data
Napraviti cemo jednostavni JSON file i nazvati ga customer.json
{
"id": 1,
"name": "John Doe",
"company": "123 design",
"phone": "222-333-444"
}<div class="container">
<button id="button1">Get customer</button>
<button id="button2">Get customers</button>
<br /><br />
<h1>Customer</h1>
<div id="customer"></div>
<h1>Customers</h1>
<div id="customer"></div>
</div>U prvoj liniji smo delektirali botun stavlili event listener za klik i poslali ga u funkciju.
U funkciji loadCustomer radimo XMLHttpRequest().
U 6 liniji smo povukli JSON fajlu.
U 10. liniji smo deklarirali varijablu i formatirali je u JSON.parse.
U 12. liniji smo deklarirali output i fomatirali ga.
U 21. smo selektirali div di ce biti prikazan output ili podaci iz JSON file
document.querySelector('#button1').addEventListener('click', loadCustomer);
function loadCustomer() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'customer.json', true);
xhr.onload = function () {
if (this.status === 200) {
const customer = JSON.parse(this.responseText);
const output = `
<ul>
<li>ID: ${customer.id}</li>
<li>Name: ${customer.name}</li>
<li>Company: ${customer.company}</li>
<li>Phone: ${customer.phone}</li>
</ul>
`;
document.querySelector('#customer').innerHTML = output;
}
};
xhr.send();
}Primjer izvlacenja kad imamo JSON pod polja.
{
"id": 1,
"name": {
"firstname": "John Doe",
"lastname": "English"
},
"company": "123 design",
"phone": "222-333-444",
"friends": ["jure","sime","ante"],
"dict": {"pas": "hund", "macka": "katze"}
}function loadCustomer() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'customer.json', true);
xhr.onload = function () {
if (this.status === 200) {
const customer = JSON.parse(this.responseText);
console.log(customer);
const output = `
<ul>
<li>ID: ${customer.id}</li>
<li>Name: ${customer.name.firstname}</li>
<li>Name: ${customer.name.lastname}</li>
<li>Company: ${customer.company}</li>
<li>Phone: ${customer.phone}</li>
<li>Friends: ${customer.friends[1]}</li>
<li>dict: ${customer.dict['pas']}</li>
</ul>
`;
document.querySelector('#customer').innerHTML = output;
}
};
xhr.send();
}Izvlacenje kad imamo vise poslja preko forEach petlje.
U 8 liniji smo stavili funkciju u noj smo postavli customers varijablu formatirali sa JSON.parse, zatim smo deklarirali praznu output varijablu da bi kad provucemo output varijablu kroz forEach petlju nadodali sa += na output da se napuni varijabla rezultatima iz petlje.
document.querySelector('#button2').addEventListener('click', loadCustomers);
function loadCustomers(e) {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'customers.json', true);
xhr.onload = function () {
if (this.status === 200) {
const customers = JSON.parse(this.responseText);
let output = '';
customers.forEach(function (customer) {
output += `
<ul>
<li>ID: ${customer.id}</li>
<li>Name: ${customer.name}</li>
<li>Company: ${customer.company}</li>
<li>Phone: ${customer.phone}</li>
</ul>
`;
});
document.querySelector('#customers').innerHTML = output;
}
};
xhr.send();
}
Jednostavnija varijanta bez provjere
document.querySelector('#button2').addEventListener('click', loadCustomers);
function loadCustomers() {
const http = new XMLHttpRequest();
http.open('GET', 'customers.json', true);
http.onload = function () {
const customers = JSON.parse(this.responseText);
let output = '';
customers.forEach(function (customer) {
output += `
<ul>
<li>ID: ${customer.id}</li>
<li>Name: ${customer.name}</li>
<li>Name: ${customer.name}</li>
<li>Company: ${customer.company}</li>
<li>Phone: ${customer.phone}</li>
</ul>
`;
});
document.querySelector('#customers').innerHTML = output;
};
http.send();
}Znaci ajmo reci osnovna varijenta
1 linija slektiranje botuna postavljanje na klik i pozivanje funkcije
3. linija funkcija loadCustomers()
4. linija kreirali smo XMLHttpRequest Object
6. linija šaljemo request serveru
8. linija pravi onload funkciju i postalvlja varijablu U ovom slučaju, funkcija povratnog poziva trebala bi sadržavati kod koji će se izvršiti kada je odgovor spreman.
11. linija postavljanje output let prazne varijable koja ce se na koju ce se nakaciti forEach petlja koja ce izvrtiti outpute.
17 linija selektiranje id diva u koi ce se ispisati rezultat
20. linija je da se posalje request serveru
document.querySelector('#button2').addEventListener('click', loadCustomers);
function loadCustomers() {
const http = new XMLHttpRequest();
http.open('GET', 'customers.json', true);
http.onload = function () {
const customers = JSON.parse(this.responseText);
let output = '';
customers.forEach(function (customer) {
output += //formatiran output u HTML ili nesto drugo (customer.id) koi se kaći na let varijablu;
});
document.querySelector('#customers').innerHTML = output;
};
http.send();
}
function loadCustomers() {
const http = new XMLHttpRequest();
http.open('GET', 'customers.json', true);
http.onload = function () {
const customers = JSON.parse(this.responseText);
};
http.send();
}AJAX external API
Povlacenje JSON fajle iz vanjskog izvora isto kao iz lokalnog izvora samo stavimo vanjski link.
document.querySelector('.get-post').addEventListener('click', getPost);
function getPost(e) {
const number = document.querySelector('input[type="number"]').value;
const xhr = new XMLHttpRequest();
xhr.open('GET', `https://jsonplaceholder.typicode.com/posts/${number}`, true);
xhr.onload = function () {
if (this.status === 200) {
const response = JSON.parse(this.responseText);
console.log(response);
console.log(response.id);
console.log(response.body);
}
};
xhr.send();
e.preventDefault();
}Rest API
HTTP metode:
GET
POST
PUT
HEAD
DELETE
PATCH
OPTIONS
CONNECT
TRACE
GET
GET se koristi za traženje podataka iz određenog izvora.
- GET zahtjevi se mogu spremiti u predmemoriju
- GET zahtjevi ostaju u povijesti preglednika
- GET zahtjevi mogu se označiti
- GET zahtjevi se nikada ne bi trebali koristiti kada se radi o osjetljivim podacima
- GET zahtjevi imaju ograničenja duljine
- GET zahtjevi se koriste samo za traženje podataka (ne za izmjenu)
POST
POST se koristi za slanje podataka na poslužitelj za stvaranje/ažuriranje resursa.
Podaci poslani poslužitelju s POST-om pohranjuju se u tijelu zahtjeva HTTP zahtjeva:
- POST zahtjevi se nikada ne spremaju u predmemoriju
- POST zahtjevi ne ostaju u povijesti preglednika
- POST zahtjevi se ne mogu označiti
- POST zahtjevi nemaju ograničenja u pogledu duljine podataka
PUT
PUT se koristi za slanje podataka poslužitelju za stvaranje/ažuriranje resursa.
Razlika između POST i PUT je u tome što su PUT zahtjevi idempotentni. To jest, pozivanje istog PUT zahtjeva više puta uvijek će proizvesti isti rezultat. Nasuprot tome, opetovano pozivanje POST zahtjeva ima nuspojave stvaranja istog resursa više puta.
HEAD
HEAD je gotovo identičan GET-u, ali bez tijela odgovora.
Drugim riječima, ako GET /users vrati popis korisnika, tada će HEAD /users uputiti isti zahtjev, ali neće vratiti popis korisnika.
HEAD zahtjevi korisni su za provjeru što će GET zahtjev vratiti prije stvarnog postavljanja GET zahtjeva – kao prije preuzimanja velike datoteke ili tijela odgovora.
DELETE
Metoda DELETE briše navedeni resurs.
PATCH
Metoda PATCH koristi se za primjenu djelomičnih izmjena na resurs.
OPTIONS
Metoda OPTIONS opisuje komunikacijske opcije za ciljni resurs.
CONNECT
Metoda CONNECT koristi se za pokretanje dvosmjerne komunikacije (tunel) sa traženim resursom.
TRACE
Metoda TRACE koristi se za izvođenje testa povratne petlje poruka koji testira stazu za ciljni resurs (korisno za svrhe otklanjanja pogrešaka).
Callback Funkcije
Callback funkcije su funkcije koje prosljeđuju argumente drugoj funkciji da bi se nešto izvrsilo nakon nećega. Ova tehnika omogucuje funkciji pozivanje druge funkcije. Funkcija callback može se pokrenuti nakon završetka druge funkcije
U povom primjeru ce se prvo izvršiti funkcija myFirst a zatim mySecond.
function myDisplayer(some) {
document.write(some);
}
function myFirst() {
myDisplayer('Hello');
}
function mySecond() {
myDisplayer('Goodbye');
}
myFirst();
mySecond();
Ako zelimo da se prvo izvrši druga mySecond funkcija pa onda prva myFirst
function myDisplayer(some) {
document.write(some);
}
function myFirst() {
myDisplayer('Hello');
}
function mySecond() {
myDisplayer('Goodbye');
}
mySecond();
myFirst();Ponekad zelimo bolju kontrolu izvrsavanja funkcije, npr. ako želimo nesto izraćunati a onda prikazati rezultate.
function myDisplayer(some) {
document.write(some);
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);Ili mozemo pozvati kalkulator funkciju (myCalculator) i neka kalkulator funkcija zove display funkciju (myDisplayer)
function myDisplayer(some) {
document.write(some);
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);Problem s prvim primjerom iznad je taj što morate pozvati dvije funkcije za prikaz rezultata.
Problem s drugim primjerom je taj što ne možete spriječiti funkciju kalkulatora da prikaže rezultat.
Kad koristimo callback mozemo pozvati kalkulator finkciju (myCalculator) sa callbackom da izvrši funkciju (myCalculator) nakon računanja.
function myDisplayer(some) {
document.write(some);
}
function myCalculator(num1, num2, callback) {
let sum = num1 + num2;
callback(sum);
}
myCalculator(5, 5, myDisplayer);Kad prosljeđujemo funkciju kao argument ne koristimo zagrade na kraju
Right: myCalculator(5, 5, myDisplayer);
Wrong: myCalculator(5, 5, myDisplayer());
Fetch API
Metoda fetch pokrece proces dohvacanja resursa sa servera.
U ovom prijeru kad se stusne botun pokrese se funkcija u 3. liniji getText() koja dohvaća fajlu text.txt ali kao Promise. zato koristimo .then
u 5. liniji postavljamo funkciju sa parametrom res (MSBŠ) da nam vrati res kao teks res.text() jer zelimo dohvatiti text fajlu, ako npr zelimo JSON filu pisemo res.JSON()
Zatim u 8 liniji pravimo funkciju stavljamo joj parametar data (MSBŠ) koja nam ispisuje sadržaj text fajle.
U 11 liniji metodom .catch() dohvacamo greske.
<button class="button1">Get Text</button>
<br /><br />
<div id="output"></div>document.querySelector('.button1').addEventListener('click', getText);
function getText() {
fetch('text.txt') //putanja tekst fajle
.then((res) => res.text()) //priprema text fajle ako je tekst onda stavljamo.text()
.then((data) => (document.querySelector('#output').innerHTML = data))//selektiramo div output da prikazemo tekst
.catch((err) => console.log(err)); //hvatanje errora da ispise u konzolu error ako se desila neka greška
}Dohvačanje iz JSON file
ISto kao dohvacanje iz texta samo u 4. linji koda u ovom primjeru umjesto text za tekstualu fajlu pisemo json() i provucemo ga kroz forEach petlju.
function getJSON() {
fetch('posts.json') //putanja json fajle
.then((res) => res.json()) //priprema json fajle ako je json onda stavljamo.json()
.then((data) => {
let output = ''; //postavljanje prazne varijable da je mozemo puniti u petlji
//petlja za ispisivanje postova
data.forEach((post) => {
output += `<h4>${post.title}</h4>`;
output += `<p>${post.body}</p>`;
});
document.querySelector('#output').innerHTML = output; //selektiramo div output da prikazemo tekst
})
.catch((err) => console.log(err)); //hvatanje errora da ispise u konzolu error ako se desila neka greška
}Dohvačanje sa vanjskog API-a isto kao u JSON likalnoj fajli
function getExternal() {
fetch('https://api.github.com/users')
.then(function (res) {
return res.json();
})
.then(function (data) {
let output = '';
data.forEach(function (user) {
output += `<li>${user.login}</li>`;
output += `<li>${user.id}</li>`;
});
document.querySelector('#output').innerHTML = output;
console.log(data);
})
.catch(function (err) {
console.log(err);
});
}Fetch POST method
POST metoda stavlja post na kraj JSON-a koi je na udaljenom serveru zato smo dobili ID 101
<form id="addPost">
<div>
<input type="text" id="title" placeholder="Title" />
</div>
<div>
<textarea id="body" placeholder="body"></textarea>
</div>
<input type="submit" value="submit" />
</form>document.querySelector('#addPost').addEventListener('submit', addPost);
function addPost(e) {
//e u zagradi znaci da je submit event u pitanju
e.preventDefault(); // da zaustavi submitanje u neku fajlu
let title = document.querySelector('#title').value; //dohvaćanje upisane vrijednosi u title polje
let body = document.querySelector('#body').value; //dohvaćanje upisane vrijednosi u body polje
//dohvaćamo server
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST', //metoda POST znaci da postamo na server
//head posta
headers: {
Accept: 'application/json, text/plain */*',
'Content-type': 'application/json',
},
//body posta formatiramo u JSON.stringify
body: JSON.stringify({ title: title, body: body }),
})
.then((res) => res.json()) //kažemo da je rezultat json
.then((data) => console.log(data)) //ispisivanje u konzolu posta
.catch((err) => console.log(err)); //dohvaćanje errora ako ih ima
}
Fetch PUT metoda
PUT metoda stavlja post na određeno mjesto u ovom slucaju na mjesto pod ID bojem 2
document.querySelector('#addPost').addEventListener('submit', putPost);
function putPost(e) {
e.preventDefault();
let title = document.querySelector('#title').value;
let body = document.querySelector('#body').value;
fetch('https://jsonplaceholder.typicode.com/posts/2', {
method: 'PUT',
headers: {
Accept: 'application/json, text/plain */*',
'Content-type': 'application/json',
},
body: JSON.stringify({ title: title, body: body }),
})
.then((res) => res.json())
.then((data) => console.log(data))
.catch((err) => console.log(err));
}
DELETE jos dokumentirati
Arrow functions
Primjer koda obicne funkcije prije ES6 standarda
const sayHello = function () {
console.log('Hello');
};
sayHello();primjer arrow funkcije ES6 standard.
Micemo ime funkcija i dodajemo arrow =>
const sayHello = () => {
console.log('Hello');
};
sayHello();Primjer koda arrow funkcije ako je funkcija samo u jenoj liniji koda. Kod takve vrste funkcija nam netrebaju viticaste zagrade {}
const sayHello = () => console.log('hello');Primjer koda kod return metode kod funkcije sa jednom linijom koda
const sayHello = () => 'hello';
console.log(sayHello());Primjer iste funkcije u ES5
const sayHello = function () {
return 'hello';
};
console.log(sayHello());Mozemo naici na problem kod postavljanja objekta u funkciju.
ovakva funkcija nece raditi ispisuje u konzolu undefined
const sayHello = () => { msg: 'hello' };
console.log(sayHello());Ako zelimo staviti objekt u arrow funkciju onda moramo staviti u uglate zagrade.
const sayHello = () => ({ msg: 'hello' });
console.log(sayHello());Postavljanje parametara
const sayHello = (name) => console.log(`Hello ${name}`);
sayHello('John');Moze se pisati i bez zagrada
const sayHello = name => console.log(`Hello ${name}`);
sayHello('John');Ako imamo vise parametara moraju biti u zagradama
const sayHello = (firstName, lastName) =>
console.log(`Heloo ${firstName} ${lastName}`);
sayHello('John', 'Doe');Primjer kako izvuci br slova iz arraya sa motodom map
const users = ['John', 'Natham', 'William'];
const nameLenghts = users.map(function (name) {
return name.length;
});
console.log(nameLenghts);Kraća verzija
const users = ['John', 'Natham', 'William'];
const nameLenghts = users.map((name) => {
return name.length;
});
console.log(nameLenghts);Još kraća verzija
const users = ['John', 'Natham', 'William'];
const nameLenghts = users.map((name) => name.length);
console.log(nameLenghts);async
async pretvara funkciju u Promise objekt, pisemo je prije finkcije an sl. nacin
async function myFunc() {
return 'Say Hello';
}
myFunc().then((res) => console.log(res));await
await kljucna rijec se moze korisiti samo u async funkcijama.
await cini da funkcija async pauzira izvršavanje i ceka rezultat Promise objekta te onda nastavlja izvršavanje
async function myFunc() {
const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('hello'), 1000);
});
const res = await promise;
return res;
}
myFunc().then((res) => console.log(res));Primjer dohvacanja JSON fajle
U ovom primjeru.
U 2. liniji koda pravimo varijablu koja dohvaca JSON fajlu iz vanjskog izvora.
async function getUsers() {
const respone = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await respone.json();
return data;
}
getUsers().then((users) => console.log(users));Error Handling with Try…Catch
S ovom metodom mozemo imati error u programu a da se nastavlja izvrsavanje koda. tray & catch je elegantni nacin hendlanja errorima.
try {
//Produce a ReferenceError
myFunction();
} catch (e) {
console.log(e);
}
console.log('Program continues...');
Mozemo i elegantnije prikazati error
try {
//Produce a ReferenceError
myFunction();
} catch (e) {
// console.log(e);
console.log(e.message);
}
console.log('Program continues...');
try {
//Produce a ReferenceError
myFunction();
} catch (e) {
// console.log(e);
console.log(e.message);
console.log(e.name);
console.log(e instanceof ReferenceError);
console.log(e instanceof TypeError);
}
console.log('Program continues...');
3. dio ovog bloka moze biti finaly taj dio ce se izvršiti bez obzira nas bilo kakve rezultate na sve gore postavljeno
try {
//Produce a ReferenceError
myFunction();
} catch (e) {
console.log(e.message);
} finally {
console.log('Finaly run regardless of result...');
}
console.log('Program continues...');
SyntaxError znaci da je kriva sintaksa
try {
//Produce a SynataxError
eval('Hello World');
} catch (e) {
console.log(e.name);
} finally {
console.log('Finaly run regardless of result...');
}
console.log('Program continues...');
URIError
try {
//Produce a URIError
decodeURIComponent('%');
} catch (e) {
console.log(e);
} finally {
console.log('Finaly run regardless of result...');
}
console.log('Program continues...');
Mozemo i napraviti vlastite errore ili provjere
const user = { email: 'jdoe@gmail.com' };
try {
if (!user.name) {
throw 'User has no name';
}
} catch (e) {
console.log(e);
} finally {
console.log('Finaly run regardless of result...');
}
console.log('Program continues...');
U ovom slucaju nece izbaciti error
const user = { email: 'jdoe@gmail.com', name: 'john' };
try {
if (!user.name) {
throw 'User has no name';
}
} catch (e) {
console.log(e);
} finally {
console.log('Finaly run regardless of result...');
}
console.log('Program continues...');Ovako ga ubacimo u HTML i moze se javljati kao neka greska
const user = { email: 'jdoe@gmail.com' };
try {
if (!user.name) {
throw (document.body.innerHTML = 'User Has no name');
}
} catch (e) {
console.log(e);
} finally {
console.log('Finaly run regardless of result...');
}Regular Expressions
je niz znakova koji opisuje druge nizove znakova, u skladu s određenim sintaksnim pravilima. Prvenstvena svrha regularnog izraza je opisivanje uzorka za pretraživanje nizova znakova.
Primjer jednostavnog regular expressionsa:
let re;
re = /hello/;
console.log(re);
console.log(re.source);
Funkcija za validiranje ili provjere expressionsa
exsec() funkcija ce vratiti reszultat u arrayu ili se poklapa ili ce vratiti null
let re;
re = /hello/;
const result = re.exec('Hello World');
const result1 = re.exec('hello');
console.log(result);
console.log(result1);
U ovom primjeru ce vratiti array i prikazati u kojem index broju se poklapaju izrazi, index br 0 se poklapa
let re;
re = /hello/;
const result = re.exec('hello world');
console.log(result);
Mozemo secificirati tocno po index broju posto imamo samo jedan otvoriti ce njega, mozemo vodoti koi je index broj u odnosu na string, i mozemo viditi input upita
let re;
re = /hello/;
const result = re.exec('brad hello world');
console.log(result);
console.log(result[0]); //speceifiranje po index broju
console.log(result.index);
console.log(result.input);
test()
test() vraca true ili false.
U ovom primjeru ce vratiti false jer imamo veliko slovo na poćektu
let re;
re = /hello/;
const result = re.test('Hello');
console.log(result);U ovom primjeru ce vratiti true je smo stavlili i flag na kraju expressona i predstalja da nije osjetljiv na velika i mala slova
let re;
re = /hello/i; // i = case insensitive
const result = re.test('Hello');
console.log(result);U ovom primjer trazi sve instance stringa ne smo prvu u ovom slucaju vraca false
let re;
re = /hello/g; //Global sarch
const result = re.test('Hello');
console.log(result);U ovom slućaju ce vratiti true jer smo poništili velika i mala slova
let re;
re = /hello/gi;
const result = re.test('Hello');
console.log(result);matsc()
match() vraca rezultate arraya ili null malo je drukcija od match.
U ovom slucaju vraca array jer je case insensitive
let re;
re = /hello/i;
const str = 'Hello there';
const result = str.match(re);
console.log(result);U ovom slucaju vraca null jer se nista ne poklapa
let re;
re = /hello/i; // i = case insensitive
const str = 'Hell there';
const result = str.match(re);
console.log(result);search()
search() vraca index prvoga poklapanja ili vraca -1
U ovom primjeru vraca 5
let re;
re = /hello/i; // i = case insensitive
const str = 'Brad Hello there';
const result = str.search(re);
console.log(result);replace() zamjenjuje string za neki drugi
let re;
re = /hello/i; // i = case insensitive
const str = 'Hello there ';
const newstr = str.replace(re, 'Hi');
console.log(newstr);
let re;
// literal Characters
re = /hello/i;
//string to mach
const str = 'Hello world';
//log result
const result = re.exec(str);
console.log(result);
function reTest(re, str) {
if (re.test(str)) {
console.log(`${str} matches ${re.source}`);
} else {
console.log(`${str} not matches ${re.source}`);
}
}
reTest(re, str);
let re;
// Literal Characters
re = /hello/;
re = /hello/i;
// Metacharacter Symbols
re = /^h/i; // Must start with
re = / world$/i; // Must ends with
re = /^hello$/i; // Must begin and end with
re = /h.llo/i; // Matches any ONE character
re = /h*llo/i; // Matches any character 0 or more times
re = /gre?a?y/i; // Optional character
re = /gre?a?y\?/i; // Escape character
// String to match
const str = 'Gray?';
// Log Results
const result = re.exec(str);
console.log(result);
function reTest(re, str) {
if (re.test(str)) {
console.log(`${str} matches ${re.source}`);
} else {
console.log(`${str} does NOT match ${re.source}`);
}
}
reTest(re, str);
U ovom primjeru stavljmo uglate zagrade sta bi znacilo da ono unutar zagrada moze biti jedno ili drugo
re = /gra[ae]y/iError Handling
Pogreške ili errori u programiranju se odnose na situacije koje ne dopuštaju normalno funkcioniranje programa: To se moze dogoditi kada program nezna kako obaviti posao koji mu je pri ruci, kao što je pokušaj otvaranja nepostojeće datoteke ili dopiranja do API krajnje točke koja je na udaljenom serveru dok nema veze.
Program porikuplja što je više moguće informacija o pogreški zatim javlja da nemože nastaviti.
Vrste grešaka u JavaScriptu
RangeError
RangeError se javlja kad se varijabli dodjeli neka vrijednost koja je izvan dozvoljenog raspona vrijednosti.
U ovom primjeru smo definirali funkciju koja postavlja uvjete da broj mora biti između -500 i 500, u if smo stavlili ako nije broj u tom razmjeru baci (throw) grešku.
Sa try kazemo koi broj da provjerava.
let a = new Array(100); //ok
let b = new Array(-1); //rangeError
ReferenceError
ReferenceError se javlja kada nešto nije u redu s referencom varijable u vašem kodu. Možda ste zaboravili definirati vrijednost za varijablu prije njezine upotrebe ili možda pokušavate upotrijebiti nedostupnu varijablu u svom kodu.
let a = undefinedVariable;
console.log(a);
try {
let a = undefinedVariable;
} catch (e) {
console.log(e instanceof ReferenceError); // provjera dali je instanca od ReferenceError
console.log(e.message); // loganje poruke
console.log(e.name); // loganje ime errora
console.log(e.fileName); // U kojemu je fajlu
console.log(e.lineNumber); // u kojoj je liniji error
console.log(e.columnNumber); // u kojoj koloni je error
console.log(e.stack); // link
}
SyntaxError
Ove su pogreške jedne od najjednostavnijih za ispravljanje jer ukazuju na pogrešku u sintaksi koda.
Neki od uobičajenih razloga zašto se SyntaxErrors mogu pojaviti su:
- Nedostaju navodnici
- Nedostaju zatvorene zagrade
- Nepravilno poravnavanje vitičastih zagrada ili drugih znakova
U ovom primjeru konzola jasno javlja da nismo funkciji dali ime
function(){
console.log('SyntaxError');
}
TypeError
Ova se pogreška stvara kada se ispostavi da neka vrijednost nije određene očekivane vrste. Neki od uobičajenih slučajeva kada se to dogodi su:
- Pozivanje objekata koji nisu metode.
- Pokušaj pristupa svojstvima nultih ili nedefiniranih objekata
- Tretiranje niza kao broja ili obrnuto
let num = 1;
try {
num.toUpperCase();
} catch (err) {
console.log(err);
}
InternalError
InternalError označava pogrešku koja se interno dogodila u JavaScript enginu.
Primjeri slučajeva su uglavnom kada je nešto preveliko, npr.
- previše slučajeva
switch cases - previše zagrada u
regular expression - inicijalizator
arrayaje prevelik
function loop(x) {
if (x >= 1000000000000) return;
loop(x + 1);
}
loop(0);
URIError
URIError se događa kada se nepropisno koristi globalna funkcija za rukovanje URI-jem decodeURIComponent.
decodeURIComponent('%');
EvalError