JavaScript programiranje - osnove

Java Script je široko primenjen programski jezik za izradu web sajtova i aplikacija. Java Script je front-end programski jezik koji se izvršava na računaru klijenta. U poslednje vreme Js se koristi i kao back-end programski jezik za programiranje na serveru.

JavaScript programski jezik

JavaScript je programski jezik koji se prvenstveno koristi za kreiranje interaktivnih i dinamičkih korisničkih interfejsa za web stranice i web aplikacije. To je jezik visokog nivoa koji koji podržavaju svi glavni web pretraživači i često se koristi u kombinaciji sa HTML-om i CSS-om za kreiranje interaktivnih web lokacija.

JavaScript je svestran jezik i može se koristiti za širok spektar zadataka, uključujucći validaciju obrasca, klizače slika, padajucće menije i druge interaktivne elemente. Takođe se može koristiti za kreiranje web aplikacija koje mogu dinamički ažurirati sadržaj, bez potrebe za ponovnim učitavanjem stranice. Ovo se može postići korišćenjem JavaScript-a za upucćivanje zahteva web serverima i ažuriranjem stranice novim podacima kao odgovor.

JavaScript je jezik na strani klijenta, što znači da radi na korisnikovom uređaju. Ovo omogucćava veće brzine učitavanja web aplikacije, jer se podaci mogu obraditi i ažurirati bez potrebe za ponovnim učitavanjem stranice.
U poslednje vreme JavaScript je popularan za primenu na serveru. Node..js je back-end okruženje koje radi sa JS programskim jezikom.

JavaScript je objektno orijentisan jezik, što znači da omogucćava kreiranje objekata koji mogu da sadrže svojstva i metode. Ovo omogucćava visok stepen ponovne upotrebe koda i olakšava pravljenje i održavanje velikih i složenih web aplikacija.

JavaScript je evoluirao tokom godina, sa uvođenjem novih funkcija i poboljšanja jezika. Neke od najpopularnijih verzija JavaScript-a uključuju ES5, ES6, a najnovija verzija je ECMAScript 2020. Najnovije verzije JavaScript-a su uvele nove funkcije kao što su funkcije nizova, literali šablona i destrukturiranje, koje jezik čine mocćnijim i lakšim za upotrebu.

javaScript promenljive

Deklarisanje JavaScript promenljive

U JavaScript-u, promenljiva je kontejner koji sadrži vrednost. Postoji nekoliko načina da se deklariše promenljiva u JavaScript-u, svaki sa svojom sintaksom i karakteristikama.

ključna reč 'var'

Ključna reč var je najstariji i najosnovniji način da se deklariše promenljiva u JavaScript-u. Ima opseg funkcije, što znači da je dostupan samo u okviru funkcije u kojoj je deklarisan.

var x = 5;

Ključna reč 'let'

Ključna reč 'let' uvedena je u ECMAScript 6 (ES6) i slična je ključnoj reči 'var'. Međutim, ima blokovski opseg, što znači da je dostupan samo unutar bloka u kojem je deklarisan. Ovo može biti korisno za deklarisanje promenljivih koje će se koristiti samo unutar određenog bloka koda.

let y = 10;

Ključna reč 'const'

Ključna reč 'const', takođe uvedena u ES6, koristi se za deklarisanje promenljive koja se ne može ponovo dodeliti. Jednom kada je promenljiva deklarisana sa const, njena vrednost se ne može promeniti.

const z = 15;

Podizanje promenljivih

Sa ključnom reči 'var', podizanje promenljivih znači da se promenljive deklarisane ključnom reči var pomeraju na vrh svog opsega, tako da im se može pristupiti pre nego što budu deklarisane.

console.log(a); //undefined
var a = 10;

Promenljive bez deklarisanja

U JavaScript-u, takođe je moguće kreirati promenljivu bez eksplicitnog deklarisanja, jednostavnim dodeljivanjem vrednosti. Međutim, ovo se generalno smatra lošom praksom i može dovesti do neočekivanog ponašanja.

 x = 13;

Vredi napomenuti da se let i const ne podižu kao var, tako da ako pokušate da im pristupite pre nego što budu deklarisani, to će vam dati ReferenceError.

Ukratko, promenljive u JavaScript-u se mogu deklarisati pomoću ključnih reči 'var', 'let' i 'const', kao i kroz podizanje promenljivih i jednostavnim dodeljivanjem vrednosti nedeklarisanoj promenljivoj. Ključna reč var je sa opsegom funkcije i podignuta, 'let' i 'const' su u opsegu bloka i nisu podignuti, dok se 'const' takođe ne može ponovo dodeliti.

Vrste promenljivih

Broj

Koristi se za čuvanje numeričkih vrednosti, kao što su 42 ili 3.14.

let num = 42;
let pi = 3.14;

String

Koristi se za čuvanje teksta, kao što je "Hello Vorld" ili "JavaScript".

let name = "John";
let message = "Hello World";

Boolean

Boolean varijabla se koristi za čuvanje istinitih ili lažnih vrednosti. Dakle, vrednost može biti 1 ili 0.

let isTrue = true;
let isFalse = false;

Niz

Nizovi se koriste za čuvanje više vrednosti u jednoj promenljivoj, kao što su [1, 2, 3] ili [„JavaScript“, „Pithon“, „C++“].

let numbers = [1, 2, 3];
let languages = ["JavaScript", "Python", "C++"];

Objekat

Variabla objekat koristi se za čuvanje parova ključ/vrednost, kao što je {ime: "John", starost: 30}

let person = {name: "John", age: 30};
let car = {make: "Toyota", model: "Camry", year: 2020};

Funkcija

Koristi se za čuvanje funkcija, kao što je funkcija add(a, b) { return a + b; }. Vrednosti funkcije mogu biti dinamičke i zavise od ulaznih parametara.

function add(a, b) {
    return a + b;
}

let result = add(2, 3);
console.log(result); // Output: 5

Simbol

Novi primitivni tip u javascript-u koji je jedinstven i nepromenljiv.

let sym1 = Symbol("a");
let sym2 = Symbol("a");
console.log(sym1 === sym2); // Output: false

undefined

Posebna vrednost koja ukazuje da je promenljiva deklarisana, ali joj nije dodeljena vrednost.

let x;
console.log(x); // Output: undefined

null

posebna vrednost koja ne predstavlja vrednost ili objekat.

let y = null;
console.log(y); // Output: null

JavaScript operatori

JavaScript ima nekoliko tipova operatora koji se mogu koristiti za obavljanje različitih operacija nad promenljivim i vrednostima.

Aritmetički operatori

Ovi operatori obavljaju osnovne aritmetičke operacije kao što su sabiranje (+), oduzimanje (-), množenje (*), deljenje (/) i modul (%).

Evo nekoliko primera kako da koristite različite aritmetičke operatore u JavaScript-u:

Dodavanje (+)
let x = 5;
let y = 7;
let result = x + y;
console.log(result); // output: 12

Oduzimanje (-)
let x = 5;
let y = 7;
let result = x - y;
console.log(result); // output: -2

Množenje (*)
let x = 5;
let y = 7;
let result = x * y;
console.log(result); // output: 35

Delenje (/)
let x = 10;
let y = 5;
let result = x / y;
console.log(result); // output: 2

Modul (%), vraća ostatak deljenja dva broja:

let x = 10;
let y = 3;
let result = x % y;
console.log(result); // output: 1

Operator eksponencije (**), vracća bazu na stepen eksponencije:
let x = 2;
let y = 3;
let result = x ** y;
console.log(result); // output: 8

Važno je imati na umu da se redosled operacija (takođe poznat kao PEMDAS) primenjuje kada se koristi više operatora u jednom izrazu. Zagrade se mogu koristiti za određivanje redosleda operacija ako je potrebno.

Operatori poređenja

Jednakost (==): Vraća logičku vrednost tačno ako su operandi jednaki, u suprotnom netačnu.
Nejednakost (!=): Tačno je ako operandi nisu jednaki, a u suprotnom netačno.
Veće od (>): Vrednost je tačno ako je levi operand veći od desnog, u suprotnom netačno.
Veće ili jednako (>=): Vraća tačno ako je levi operand veći ili jednak desnom, u suprotnom netačno.
Manje od (< )Daje tačno ako je levi operand manji od desnog, u suprotnom netačno.
Manje od ili jednako (<=): Vracća tačno ako je levi operand manji ili jednak desnom, u suprotnom netačno.

Primer korišćenja operatora poređenja:

5 == 5 // true
5 != 3 // true
5 > 3 // true
5 >= 5 // true
5 < 7 // true
5 <= 5 // true

Logički operatori

Logičko I (&&): Vracća tačno ako su oba operanda tačna, u suprotnom iskas je netačan.
Logičko ILI (||): Vracća tačno ako je bar jedan od operanada tačan, u suprotnom netačno.
Logički NOT (!) : Vracća tačno ako je operand netačan i netačno ako je operand istinit.

Primeri korišćenja logičkih operatora u programskom jeziku JavaScript:

true && false // false
true || false // true
!true // false

Vredi napomenuti da JavaScript ima različite tipove operatora poređenja === i !== koji upoređuje vrednost i tip, preporučuje se da koristite ovaj operator umesto == ili != jer pomaže da se izbegne implicitna prinuda tipa.

Ukratko, operatori poređenja se koriste za upoređivanje dve vrednosti i vracćanje Bulove vrednosti, bez obzira da li je poređenje tačno ili netačno. Logički operatori se koriste za kombinovanje višestrukog poređenja i procenu ukupnog izraza. Koriste se za procenu više izraza i vracćanje Bulove vrednosti na osnovu rezultata tih izraza.

DOM

Model objekta dokumenta (DOM) je programski interfejs za HTML i XML dokumente. Predstavlja strukturu dokumenta kao hijerarhiju čvorova nalik stablu, pri čemu svaki čvor predstavlja drugačiji element dokumenta, kao što je HTML oznaka, tekst ili atribut.

JavaScript može da manipuliše DOM-om menjanjem svojstava i vrednosti njegovih čvorova, dodavanjem ili uklanjanjem čvorova i kretanjem kroz strukturu DOM-a nalik stablu. Ovo omogucćava programerima da kreiraju dinamičke i interaktivne veb stranice koje se mogu ažurirati u realnom vremenu na osnovu korisničkog unosa ili drugih događaja.

Evo nekoliko primera kako JavaScript može da manipuliše DOM-om:

Promena tekstualnog sadržaja elementa:

document.getElementById("my-element").innerHTML = "New text content";

Promena vrednosti atributa
document.getElementById("my-element").setAttribute("class", "new-class");

Dodavanje novog elementa u DOM
var newElement = document.createElement("div");
newElement.innerHTML = "New element";
document.getElementById("my-container").appendChild(newElement);

Brisanje elementa iz DOM-a
var elementToRemove = document.getElementById("my-element");
elementToRemove.parentNode.removeChild(elementToRemove);

Vredi napomenuti da manipulacija DOM-om može biti spor proces, posebno na velikim ili složenim dokumentima, i može učiniti da veb stranica sporo reaguje. Da bi smanjili količinu DOM manipulacije, programeri cće često koristiti biblioteke ili okvire kao što su React, Angular ili VueJS, koji obezbeđuju apstrakcije za efikasniju manipulaciju DOM-om.

Ukratko, DOM je programski interfejs za HTML i XML dokumente, dozvoljava javascript-u da pristupa i manipuliše web stranicama. Predstavlja web stranicu u strukturi nalik stablu, JavaScript može da se krecće i menja svojstva elemenata stabla, dajucći programerima način da web stranice učine dinamičnim i interaktivnim.