Otkrijte potencijal operatora u JavaScript programskom jeziku

Pre nego što pređete na učenje operatora u JavaScript programskom jeziku, podrazumeva se da ste već prostudirali promenjive u JavaScript programskom jeziku, pogledajte ovde; i da imate već započet JavaScript projekat js_tutorial. Operatori u JavaScript programskom jeziku kao i u drugim programskim jezicima su simboli koji se koriste za izvođenje različitih operacija nad vrednostima, promenljivim i izrazima. Oni igraju ključnu ulogu u izračunavanju i manipulaciji podacima u JavaScript programskom jeziku jer omogućavaju programerima da izračunavaju vrednosti, kontrolišu tok programa i izrađuju kompleksne logičke izraze. Razumevanje kako operatori rade i kako se koriste od suštinskog je značaja za razvoj JavaScript aplikacija. Operatori u JavaScript-u nisu znatno različiti od operatora u drugim programskim jezicima. Većina programskih jezika ima slične osnovne operatore, ali ima i nekih razlika u ponašanju i sintaksi. Tako što se tiče osnovnih operatora, JavaScript  programski jezik po tom pitanju uopšte ne zaostaje za mnogo razvijenijim programskim jezicima. JavaScript podržava različite vrste operatora, uključujući sledeće:  

• Arithmetic operators – aritmetički operatori
• Assignment operators – operatori dodeljivanja
• Unary (Increment and Decrement) operators – Unarni operatori, operatori inkrementa i dekrementa
• Comparison operators – operatori poređenja
• Logical operators – logički operatori
• Comma operator – zarez operator
• Ternary (Conditional) operator – ternarni ili uvetni operator
• Nullish Coalescing operator – Nullish koalirajući operator
• Optional Chaining operator – opcioni lančani operator
• Bitwise operators – bit operatori pomeranja
• Itd.

 

(Operatori u JavaScript programskom jeziku )

Kad su u pitanju ternarni, nulish koalirajući, opcioni lančani, bit operatori pomeranja i itd.; sa njima ćemo se baviti u nekim drugim budućim postovima ovog tutorijala, kako budu dolazili na red u praktičnim primerima. Za sada bi bilo odlično da naučite i poznajete najosnovnije operatore koje ćete najčešće koristiti u vašim projektima. Prvo ćemo krenuti od aritmetičkih operatora, predstaviti ostale osnovne operatore u JavaScript programskom jeziku, na jednoj veb stranici. Dok ćemo kreirati i drugu veb stranicu i na njoj predstaviti jednostavan digitron. Tako da će vam projekat dobiti dve nove lekcije. Naša  kreacija digitrona će vam definitivno pokazati i pravo majstorstvo u izradi CSS-a i stilizaciji koja je toliko jednostavna da se u četvrtoj lekciji neće uopšte koristiti Bootstrap.

Aritmetički operatori

Aritmetički operatori u JavaScript programskom jeziku su simboli ili znakovi koji se koriste za izvođenje osnovnih matematičkih operacija nad brojevima. Ovi operatori omogućavaju vam da vršite različite računske operacije i manipulišete numeričkim vrednostima. Ovi operatori se koriste u mnogim aspektima programiranja, uključujući izradu matematičkih formula, upravljanje vrednostima promenljivih, obrada podataka i mnoge druge zadatke. Na primer, u razvoju veb aplikacija; aritmetički operatori se često koriste za izračunavanje vrednosti koje se prikazuju korisnicima ili za upravljanje brojevima u igrama. Osim osnovnih operacija, JavaScript takođe podržava složenije matematičke funkcije i metode putem objekta Math, koji pruža širok spektar matematičkih funkcija kao što su sqrt - korenovanje, pow - stepenovanje i mnoge druge. Ovim funkcijama ćemo se baviti često u budućim lekcijama. Aritmetički operatori su stoga osnovna komponenta za obavljanje računskih operacija u JavaScript-u i drugim programskim jezicima. Pokrenite Visual Studio Code ili IDE - integrisano razvojno okruženje koji vi koristite, otvorite projekat js_tutorial. Kreirajte novu datoteku u direktorijumu lessons i nazovite je lesson3.html. U ovu datoteku ukucajte sledeći HTML5 tekst.

<header></header>

 

<h2 class="bg-primary text-light text-center py-3">Lesson 3. - Using operators in the JavaScript programming language</h2>

 

<div class="container">

 

    <script src="../js/operators.js"></script>

 

</div>

   

    <script src="../js/includes.js"></script>

 

<footer></footer>

 

Otvorite datoteku index.html i dodajte sledeću stavku između <ul> i </ul> tagova.

 

<li><a href="lessons/lesson3.html">

                    Lesson 3. - Using operators in the JavaScript programming language        

                </a></li>

Zatim, kreirajte novu datoteku u folderu js i nazovite je operators. Otkucajte u datoteku sledeći JavaScript  kôd:

// arithmetic operators

 

document.write("<h3><font color=\"seagreen\">Arithmetic operators</font></h3>");

 

let x = 7;

let y = 4;

let z = 0;

 

document.write("<p>X = " + x + "</br>" + "Y = " + y + "</p>");

 

// addition operator

 

document.write("<h4>The addition operator</h4>");

 

z = x + y;

 

document.write("<p>X + Y = " + z + "</p>");

 

// subtraction operator

 

document.write("<h4>The subtraction operator</h4>");

 

z = x - y;

 

document.write("<p>X - Y = " + z + "</p>");

 

// multiplication operator

 

document.write("<h4>The multiplication operator</h4>");

 

z = x * y;

 

document.write("<p>X * Y = " + z + "</p>");

 

// exponentiation operator

 

document.write("<h4>The exponentiation operator</h4>");

 

z = x ** y;

 

document.write("<p>X ** Y = " + z + "</p>");

 

// division operator

 

document.write("<h4>The division operator</h4>");

 

z = x / y;

 

document.write("<p>X / Y = " + z + "</p>");

 

// modulus operator

 

document.write("<h4>The modulus operator</h4>");

 

z = x % y;

 

document.write("<p>X % Y = " + z + "</p>");

Kad pokrenete ovu stranicu na serveru rezultat će biti kao na slici.

 

( Početna stranica projekta js_tutorial )

Kliknite na link treće lekcije i dobićete sledeći rezultat:

Arithmetic operators

X = 7
Y = 4

The addition operator

X + Y = 11

The subtraction operator

X - Y = 3

The multiplication operator

X * Y = 28

The exponentiation operator

X ** Y = 2401

The division operator

X / Y = 1.75

The modulus operator

X % Y = 3

Operatori dodeljivanja

Operatori dodeljivanja u JavaScript programskom jeziku su simboli ili znakovi koji se koriste za dodeljivanje vrednosti promenljivim ili svojstvima objekata. Ovi operatori omogućavaju programerima da postave vrednosti promenljivih ili svojstava na određene vrednosti, što je osnovna operacija u većini programskih jezika, uključujući JavaScript programski jezik. Operatori dodeljivanja su bitni jer omogućavaju manipulaciju podacima i upravljanje promenljivim vrednostima u vašem  JavaScript kodu. Oni čine osnovnu komponentu za izgradnju i ažuriranje stanja u vašim programima. Bez ovih operatora, bilo bi teže postaviti vrednosti promenljivim ili ažurirati svojstva objekata, što bi značajno otežalo razvoj aplikacija. Korišćenje operatora dodeljivanja takođe može poboljšati čitljivost koda i smanjiti broj linija koda, posebno kada se izvode jednostavne aritmetičke operacije. Vratite se u datoteku operators.js i dodajte sledeći JavaScript kôd:

// assignment operators

 

document.write("<h3><font color=\"seagreen\">Assignment operators</font></h3>");

 

x = 9;

y = 5;

 

document.write("<p>X = " + x + "</br>" + "Y = " + y + "</p>");

 

// addition assignment operator

 

document.write("<h4>The addition assignment operator</h4>");

 

x = 9;

x += y;

 

document.write("<p>X += Y -> " + x + "</p>");

 

// subtraction assignment operator

 

document.write("<h4>The subtraction assignment operator</h4>");

 

x = 9;

x -= y;

 

document.write("<p>X -= Y -> " + x + "</p>");

 

// multiplication assignment operator

 

document.write("<h4>The multiplication assignment operator</h4>");

 

x = 9;

x *= y;

 

document.write("<p>X *= Y -> " + x + "</p>");

 

// exponentiation assignment operator

 

document.write("<h4>The exponentiation assignment operator</h4>");

 

x = 9;

x **= y;

 

document.write("<p>X **= Y = " + x + "</p>");

 

// division assignment operator

 

document.write("<h4>The division assignment operator</h4>");

 

x = 9;

x /= y;

 

document.write("<p>X /= Y -> " + x + "</p>");

 

// modulus assignment operator

 

document.write("<h4>The modulus assignment operator</h4>");

 

x = 9;

x %= y;

 

document.write("<p>X %= Y -> " + x + "</p>");

Kada pokrenete ili refrešujete veb stranicu lesson3.html dobićete dodatni tekst na stranici.

Assignment operators

X = 9
Y = 5

The addition assignment operator

X += Y -> 14

The subtraction assignment operator

X -= Y -> 4

The multiplication assignment operator

X *= Y -> 45

The exponentiation assignment operator

X **= Y = 59049

The division assignment operator

X /= Y -> 1.8

The modulus assignment operator

X %= Y -> 4

Operatori inkrementa i dekrementa

Operatori inkrementa ++ i dekrementa -- u JavaScript programskom jeziku koriste se za povećanje ili smanjenje vrednosti promenljive za 1. Ovi operatori su bitni jer često olakšavaju pisanje koda i čine ga efikasnijim u situacijama kada je potrebno raditi sa brojevima i promenljivima koje treba povećavati ili smanjivati za određene vrednosti. Operatori inkrementa i dekrementa često se koriste u petljama kao što su for petlje i u situacijama kada je potrebno pratiti brojače, iteracije i indekse. Ovi operatori takođe mogu učiniti kod čitljivijim i smanjiti potrebu za suvišnim linijama koda. Važno je napomenuti da se operatori inkrementa i dekrementa trebaju koristiti pažljivo, jer njihovo nepažljivo korišćenje može dovesti do nesporazuma i grešaka u kodu. Treba ih koristiti tamo gde ima smisla i gde su potrebni za specifične operacije povećanja ili smanjenja vrednosti promenljivih. Vratite se u datoteku operators.js i dodajte sledeći JavaScript kôd:

// increment and decrement operators

 

document.write("<h3><font color=\"seagreen\">Increment and decrement operators</font></h3>");

 

// increment operator

 

document.write("<h4>The increment operator</h4>");

 

let a = 8;

 

document.write("<p>A = 8</p>");

 

a++; // increments the variable by 1

++a;

 

document.write("<p>A++ i ++A = " + a + "</p>");

 

// decrement operator

 

document.write("<h4>The decrement operator</h4>");

 

a--; // decrements the variable by 1

--a;

 

document.write("<p>A-- i --A = " + a + "</p>");

Kada pokrenete ili refrešujete veb stranicu lesson3.html dobićete dodatni tekst na stranici.

Increment and decrement operators

The increment operator

A = 8

A++ i ++A = 10

The decrement operator

A-- i --A = 8

Operatori poređenja

Operatori poređenja u JavaScript programskom jeziku su simboli ili znakovi koji se koriste za poređenje dve vrednosti kako bi se utvrdila njihova međusobna relacija. Ovi operatori se često koriste za uslovno izvršavanje koda, odnosno za donošenje odluka u skladu sa rezultatom poređenja. Operatori poređenja vraćaju boolean vrednost true – tačno ili false – netačno kao rezultat poređenja. Operatori poređenja su bitni jer omogućavaju programerima da uslovno upravljaju izvršavanjem koda na osnovu određenih uslova. Takođe su važni u manipulaciji nizovima i sortiranju podataka, jer omogućavaju poređenje elemenata niza. Osim toga, pravilno razumevanje operatora poređenja je ključno kako biste izbegli greške u vašem kodu, posebno u slučajevima kada su tipovi podataka važni. Upotreba pogrešnih operatora za poređenje može dovesti do neočekivanih rezultata. Stoga je važno pažljivo razmotriti koji operator koristiti u zavisnosti od konkretnih zahteva i tipova podataka s kojima radite. Vratite se u datoteku operators.js i dodajte sledeći JavaScript kôd:

// comparison operators

document.write("<h3><font color=\"seagreen\">Comparison operators</font></h3>");

 

a = 12;

b = 23;

 

document.write("<p>a = " + a + "</br>" + "b = " + b + "</p>");

 

document.write("<p> equal to --> a == b --> " + (a == b) + "</p>");

document.write("<p> not equal --> a != b --> " + (a != b) + "</p>");

document.write("<p> equal value and equal type --> a === b --> " + (a === b) + "</p>");

document.write("<p> not equal value or not equal type --> a !== b --> " + (a !== b) + "</p>");  

 

document.write("<p> greater than --> a > b --> " + (a > b) + "</p>");

document.write("<p> greater than or equal to --> a >= b --> " + (a >= b) + "</p>");

document.write("<p> less than --> a < b --> " + (a < b) + "</p>");

document.write("<p> less than or equal to --> a <= b --> " + (a <= b) + "</p>");

 

// we will learn this in some of the future tutorial

 

document.write("<br/>");

document.write("<p>in - is contained within an expression or object</p>");

document.write("<p>instanceof - an instance of an object</p>");

Kada pokrenete ili refrešujete veb stranicu lesson3.html dobićete dodatni tekst na stranici.

Comparison operators

a = 12
b = 23

equal to --> a == b --> false

not equal --> a != b --> true

equal value and equal type --> a === b --> false

not equal value or not equal type --> a !== b --> true

greater than --> a > b --> false

greater than or equal to --> a >= b --> false

less than --> a < b --> true

less than or equal to --> a <= b --> true

in - is contained within an expression or object

instanceof - an instance of an object

Logički operatori

Logički operatori u JavaScript programskom jeziku su simboli ili znakovi koji se koriste za izvođenje logičkih operacija nad logičkim vrednostima true - tačno ili false - netačno. Ovi operatori su bitni jer omogućavaju programerima da kontrolišu tok izvršavanja programa na osnovu različitih logičkih uslova i izraza. Logički operatori su bitni jer omogućavaju programerima da kreiraju složene logičke izraze i uslove u svojim programima. Ovi operatori se često koriste u if izjavama, while petljama, for petljama i drugim kontrolnim strukturama kako bi se donosile odluke i upravljalo tokom izvršavanja programa na osnovu različitih uslova. Vratite se u datoteku operators.js i dodajte sledeći JavaScript kôd:

// logical operators

document.write("<h3><font color=\"seagreen\">Logical operators</font></h3>");

 

a = 47;

b = 81;

 

document.write("<p>a = " + a + "</br>" + "b = " + b + "</p>");

 

document.write("<p> and --> (a < 100 && b > 1) --> " + (a < 100 && b > 1) + "</p>");

document.write("<p> or --> (a == 100 or b == 100) --> " + (a == 100 || b == 100) + "</p>");

document.write("<p> not --> !(a === b) --> " + !(a === b) + "</p>");

Kada pokrenete ili refrešujete veb stranicu lesson3.html dobićete dodatni tekst na stranici. 

Logical operators

a = 47
b = 81

and --> (a < 100 && b > 1) --> true

or --> (a == 100 or b == 100) --> false

not --> !(a === b) --> true

Zarez operator

Zarez operator , u JavaScript programskom jeziku je operator koji se koristi za grupisanje i izvršavanje više izraza u okviru jednog izraza. Ovaj operator omogućava izvršavanje niza izraza s leva na desno i vraća vrednost poslednjeg izraza u nizu. Iako zarez operator može biti koristan u određenim situacijama, treba ga koristiti s oprezom, jer može otežati čitanje koda i smanjiti njegovu čitljivost. U većini slučajeva, jasnije je koristiti odvojene linije koda za svaku operaciju ili izraz, umesto da ih grupišete pomoću zarez operatora. Korišćenje zarez operatora se obično preporučuje samo kada je njegova upotreba jasna i doprinosi čitljivosti koda. Vratite se u datoteku operators.js i dodajte sledeći JavaScript kôd:

 

// comma operators

 

document.write("<h3><font color=\"seagreen\">Comma operators</font></h3>");

 

let i = 10, j = 20, k = 30;

 

document.write("<p>i = " + i + " j = " + j + " k = " + k + "</p>");

Kada pokrenete ili refrešujete veb stranicu lesson3.html dobićete dodatni tekst na stranici.

Comma operators

i = 10 j = 20 k = 30

Drugi operatori

Kako smo već naveli druge operatore ćemo učiti i koristiti kada ispunimo uslove da iste primenjujemo u praksi. Međutim, za sada možemo u našoj trećoj lekciji nabrojiti neke od njih. Vratite se u datoteku operators.js i dodajte sledeći JavaScript kôd:

// other operators

document.write("<h3><font color=\"seagreen\">Other operators</font></h3>");

 

document.write("<p> The Conditional (Ternary) Operator --> ? </p>");

document.write("<p> The Nullish Coalescing Operator --> ?? </p>");

document.write("<p> The Optional Chaining Operator --> ?. </p>");

document.write("<p> The Bitwise Operator --> & | ^ ~ << >> >>> </p>");

document.write("<p> etc. </p><br/><br/><br/>");

Kada pokrenete ili refrešujete veb stranicu lesson3.html dobićete dodatni tekst na stranici.

Other operators

The Conditional (Ternary) Operator --> ?

The Nullish Coalescing Operator --> ??

The Optional Chaining Operator --> ?.

The Bitwise Operator --> & | ^ ~ << >> >>>

etc.

Ovaj celi primer isto možete pogledati u sledećem video-u.

( JavaScript - 3. Operators )

Kako da napravite jednostavan digitron u JavaScript programskom jeziku?

Pravljenje jednostavnog kalkulatora ili digitrona u JavaScript je toliko jednostavno da ni sami nećete moći verovati. Prepravite index.html da izgleda ovako:

<header></header>

     <h2 class="bg-primary text-light text-center py-3">Contents</h2>

 

    <div class="container">

        <div>

            <h2><font color="seagreen">Lessons</font></h2>

            <ul>

                <li><a href="lessons/lesson1.html">

                    Lesson 1. Hello World        

                </a></li>

                <li><a href="lessons/lesson2.html">

                    Lesson 2. Variables and data types        

                </a></li>

                <li><a href="lessons/lesson3.html">

                    Lesson 3. - Using operators in the JavaScript programming language        

                </a></li>

                <li><a href="lessons/lesson4.html">

                    Lesson 4. - Calculator      

                </a></li>

            </ul>

 

        </div>

    </div>

 

    <script src="js/includes.js"></script>

 

<footer></footer>

Kreirajte novi direktorijum u projektu js_tutorial i nazovite ga css. Kreirajte u njemu novu datoteku i nazovite je styles1.css . Otkucajte sledeća CSS podešavanja za našu stranicu lesson4.html:

 

* {

    margin: 0;

    padding: 0;

    font-family: 'Courier New', Courier, monospace;

    box-sizing: border-box;

 

}

 

.container {

    width: 100%;

    height: 100vh;

    background: navajowhite;

    display: flex;

    align-items: center;

    justify-content: center;

 

}

 

.calculator {

    background: orange;

    padding: 20px;

    border-radius: 10px;

 

}

 

.calculator form input {

    border: 0;

    outline: 0;

    width: 60px;

    height: 60px;

    border-radius: 10px;

    box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.2);

    background: transparent;

    font-weight: bold;

    font-size: 20px;

    color: brown;

    cursor: pointer;

    margin: 10px;

 

}

 

form .display {

    display: flex;

    justify-content: flex-end;

    margin: 20px 0;

}

 

form .display input {

    text-align: right;

    flex: 1;

    font-size: 45px;

    box-shadow: none;

}

 

form input.equal {

    width: 145px;

 

}

 

form input.operator {

    color: yellow;

}

Kreirajte datoteku u lessons direktorijumu i nazovite je lesson4.html. S obzirom da nećemo koristiti Bootstrap, u ovoj lekciji nećemo uvoziti datoteke kao u prethodnim lekcijama, nego ćemo uvesti samo našu styles1.css datoteku koja će odraditi celi dizajn našeg digitrona i centrirati ga na stranici. 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Calculator</title>

    <link rel="stylesheet" href="../css/styles1.css">

</head>

<body>

    <div class="container">

        <div class="calculator">

            <form>

                <div class="display">

                    <input type="text" name="display">

                </div>

                <div>

                    <input type="button" value="AC" onclick="display.value = ''" class="operator">

                    <input type="button" value="DE" onclick="display.value = display.value.toString().slice(0, -1)" class="operator">

                    <input type="button" value="." onclick="display.value += '.'" class="operator">

                    <input type="button" value="/" onclick="display.value += '/'" class="operator">

                </div>

                <div>

                    <input type="button" value="7" onclick="display.value += '7'">

                    <input type="button" value="8" onclick="display.value += '8'">

                    <input type="button" value="9" onclick="display.value += '9'">

                    <input type="button" value="*" onclick="display.value += '*'" class="operator">

                </div>

                <div>

                    <input type="button" value="4" onclick="display.value += '4'">

                    <input type="button" value="5" onclick="display.value += '5'">

                    <input type="button" value="6" onclick="display.value += '6'">

                    <input type="button" value="-" onclick="display.value += '-'" class="operator">

                </div>

                <div>

                    <input type="button" value="1" onclick="display.value += '1'">

                    <input type="button" value="2" onclick="display.value += '2'">

                    <input type="button" value="3" onclick="display.value += '3'">

                    <input type="button" value="+" onclick="display.value += '+'" class="operator">

                </div>

                <div>

                    <input type="button" value="00" onclick="display.value += '00'">

                    <input type="button" value="0" onclick="display.value += '0'">

                    <input type="button" value="=" onclick="display.value = eval(display.value)" class="equal operator">

                </div>

            </form>

 

        </div>

    </div>

   

</body>

</html>

Kada pokrenete ili refrešujete veb stranicu lesson4.html dobićete rezultat kao na slici.

( Calculator kreiran u HTML5, CSS3 i JavaScript-u )

Ovaj celi primer isto možete pogledati u sledećem video-u.

( JavaScript - 4. How to make a calculator ? )