MANUEL RADOVANOVIĆ : Učite JavaScript kao ekspert: Kako efikasno koristiti promenjive, tipove podataka i konstante?

Promenljive su osnovni elementi u svakom programskih jezika koji omogućavaju skladištenje i manipulaciju podacima. One su prostor u memoriji računara koji se koristi za čuvanje različitih vrsta podataka, uključujući brojeve, tekst, logičke vrednosti, objekte i druge. Tako i u JavaScript programskom jeziku, promenjive omogućavaju programerima da čuvaju podatke u memoriji računara i manipulišu njima u zavisnosti od potreba programa. Na primer, promenljive se koriste u programima za skladištenje korisničkih podataka, izračunavanje matematičkih operacija, upravljanje interfejsima korisničkog sistema i drugo. Ali ono što prvo treba da razumete kad učite bilo koji programski jezik jeste koliko su promenjive važne u programskim jezicima. Najjednostavniji način da razumete promenjive jeste da zamišljate iste kao memorijske kutice. One mogu biti različite i zbog toga ne možete na primer stavljati slova u memorijsku kuticu koja je namenjena za brojeve. Kakvu ćete memorijsku kuticu koristiti, to u JavaScript programskom jeziku zavisi od toga kakvu ste vrednost dodelili promenjivoj. Npr.

let myVariable = 10;

Ovoj promenjivoj ste dodelili vrednost 10 i zbog toga JavaScript interpreter će ovu promenjivu tretirati kao number tip podataka. Znači broj. Obratite pažnju da pravilno pisanje promenjive može biti bilo koja kombinacija slova, brojeva i donja crta. Praksa nalaže da prvo slovo promenjive uvek pišete malim slovom. Promenjiva myVariable takođe počinje malim slovom ali se kasnije nastavlja velikim slovom, pa opet malim. To je pravilno imenovanje promenjivi i programskim rečnikom to zovemo CamelCase notation – kamel notacija. Promenjive ne možete da nazivate prvim karakterom da bude broj. Ne možete da promenjive pišete razdvojeno kad se sastoje od više reči. Ne možete da koristite specijalne simbole i nikako nemojte da nazivate promenjive isto kao ključne reči. Ako u programu obračunavate PDV - Porez na dodatnu vrednost onda i promenjivu nazovite pdv. Promenjive nemojte imenovati samo jednim slovom kao npr. a, b, c itd. Već se potrudite da stičete naviku da vaša promenjiva govori sama za sebe šta predstavlja. To će dosta značiti i vama i svima koji budu imali uvid u vaš kôd.

( Tipovi podataka u JavaScript programskom jeziku )

JavaScript programski jezik je case-sensitive što znači da razlikuje mala i velika slova. To znači da myVariable i myvariable su dve različite promenjive. Tipovi podataka u JavaScript programskom jeziku nisu strogo tipizirana kao na primer u C# programskom jeziku. JavaScript programski jezik koristi dinamičku tipizaciju. Zato vi u JavaScript programskom jeziku ne deklarišete promenjivu kao na primer u C# programskom jeziku. To takođe znači da vi u JavaScript programskom jeziku određujete tip podataka tokom izvršavanja programa a ne deklaracijom promenjive. Dinamička tipizacija omogućava fleksibilnost i brži razvoj ali može dovoditi i do grešaka ako programer ne pazi na tipove promenjivi u svom kôdu. Baš zato što JavaScript programski jezik nije strogo tipizirani programski jezik, što nije baš najbolji izbor za većinu finansijskih i drugih proračuna. Zato je kreiran TypeScript programski jezik koji koristi statičku tipizaciju. U svakom slučaju, to ne znači da trebate odmah preći na TypeScript programski jezik. JavaScript programski jezik ima toliko toga da vas nauči i da vam ponudi. Za razliku od drugih programskih jezika, JavaScript ima mnogo manje tipova promenjivi. I za razliku na primer od PHP programskog jezika, imaju različite tipove podataka poput undefine i symbol. Dok PHP programski jezik razlikuje cele brojeve i brojeve sa pokretnim zarezom, u JavaScript programskom jeziku tip number se koristi za sve vrste brojeva čak i heksadecimalne.

Tipovi podataka u JavaScript programskom jeziku

JavaScript ima dve vrste tipova promenjivih. I to primitivni tipovi podataka koji se još u nekim informatičkim literaturama zovu osnovni tipovi podataka i složeni tipovi podataka ili objekti. Primitivni ili osnovni tipovi podataka se zovu tako zato što su jednostavniji od složenih. Oni se prenose prema svojoj vrednosti dok se složeni tipovi prenose prema referenci. Najbolje je da pogledate sledeću strukturu.

Primitivni tipovi podataka

string – koristi se za predstavljanje tekstualnih podataka
number – koristi se za predstavljanje numeričkih vrednosti
boolean – koristi se za predstavljanje logičkih vrednosti true i false
null – koristi se za predstavljanje vrednosti null koja označava odsutnost vrednosti
undefined - koristi za predstavljanje vrednosti undefined koja označava da promenjiva nije definisana
symbol – koristi se za stvaranje jedinstvenih identifikatora

Složeni tipovi podataka

object – koristi se za svojstva koja sadrže vrednosti
array – koristi se za uređene skupove vrednosti kojima se može pristupati preko index-a
function – koriste se kao objekti koji imaju povezanu funkcionalnost koja se može povezati iz drugih delova programa
Date – koristi se kao objekat za manipulaciju datumom
RegExp – koristi se kao objekat za regularne izraze
Map – koristi se za manipulaciju vrednostima putem ključa
Set – kolekcija u kojoj možete imati samo jedinstvene vrednosti
Itd.

Kao izgledaju i kako se koriste ovi tipovi podataka, najbolje ćete razumeti kroz praktičan primer. Zato pokrenite Visual Studio Code i otvorite projekat js_tutorial koji smo započeli u prethodnom postu. Pogledajte ovde. Međutim, pre nego što se posvetimo promenjivima i našoj drugoj lekciji, neophodno je da se programerski bolje organizujemo da ne bismo ponavljali kôd i da bi naš tutorial izgledao bolje. Kad učite JavaScript programski jezik pretpostavlja se da poznajete HTML i kako se koristi CSS ili Bootstrap, tako da te stvari nećemo objašnjavati u tutorijalu za JavaScript programski jezik. Za HTML postoji takođe tutorijal ovde. Prvo kreirajte u projektu novi folder i nazovite ga lessons. Prebacite lesson1.html fajl u lessons direktorijum. Zatim, kreirajte novi fajl i nazovite ga index.html . Otkucajte html:5 i pritisnite TAB da vam se ispiše osnovni HTML kôd u fajlu. Zatim otvorite pretraživač. Na zvaničnoj veb adresi Bootstrap, kliknite na link Docs u navigatoru; i pokupite neophodne linkove koji su vam potrebni da Bootstrap koristite u vašem projektu. Sadržaj index.html treba da izgleda kao sledeći kôd. Ili da koriste linkove za noviju verziju Bootstra-a, u zavisnosti kada čitate ovaj tekst.

<!DOCTYPE html>

<head>

<title>JavaScript Tutorial</title>

</head>

<body>

<h1 class="bg-dark text-light text-center py-2">JavaScript Tutorial</h1>

</h5>

</body>

</html>

Ukoliko ste uspeli, kreirajte novi folder includes i u njemu kreirajte fajlove header.html i footer.html. zatim sadržaj index.html podelite na dva dela i prebacite ga da header.html izgleda ovako:

<!DOCTYPE html>

<head>

<title>JavaScript Tutorial</title>

</head>

<body>

<h1 class="bg-dark text-light text-center py-2">JavaScript Tutorial</h1>

Zatim ostatak prebacite u footer.html tako da fajl index.html ostane prazan. Pogledajte sadržaj footer.html

</h5>

</body>

</html>

Zatim, otkucajte sledeći kôd u index.html .

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

<div>

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

<ul>

Lesson 1. Hello World

</a></li>

Lesson 1. Variables and data types

</a></li>

</ul>

</div>

Kreirajte novi folder js u svom projektu. U folderu js kreirajte novi fajl i nazovite ga includes.js . zatim u njemu prekucajte sledeći JavaScript kôd.

// Loading header

fetch('/includes/header.html')

.then(response => response.text())

.then(data => {

document.querySelector('header').innerHTML = data;

});

// Loading footer

fetch('/includes/footer.html')

.then(response => response.text())

.then(data => {

document.querySelector('footer').innerHTML = data;

});

Povezivanje header-a i footer-a na neku stranicu koristeći JavaScript programski jezik može biti veoma problematično zato što se JavaScript ne izvršava na serveru kao PHP programski jezik. Zahvaljujući ugrađenoj funkciji fetch možemo odraditi ovaj zadatak. Ako ste uradili sve kao što smo rekli da uradite, kliknite desnim tasterom miša na index.html u panel explorer-u. Zatim kliknite na Open with Live Server na padajućem meniju. Proverite da li vam se pojavio neki sadržaj na lokalnoj veb adresi u pretraživaču. Ukoliko jeste i nemate nikakvu grešku; vratite se u Visual Studio Code i prepravite lesson1.html da izgleda ovako:

<h2 class="bg-primary text-light text-center py-3">Lesson 1. - Hello World</h2>

alert("Hello World, we are learning JavaScript!");

console.log("This is JavaScript on Chrome Console!");

document.write("This is my first JavaScript code!");

</script>

</div>

Otvorite vaš pretraživač, refrešujte index.html stranicu i kliknite na prvi link. Videćete da prva lekcija koju smo radili u prethodnom postu, sada izgleda mnogo lepše i bolje; kao deo jedne veće celine, JavaScript tutorijala. Ukoliko ste uspeli i sve radi kako treba kreirajte novi fajl variables.js u direktorijumu js. To je fajl u kom ćemo iskodirati sav JavaScript kôd vezan za drugu lekciju; Promenjive i tipovi podataka. Otkucajte sledeći JavaScript kôd:

document.write("<h2><font color=\"seagreen\">Primitive data types</font></h2>");

// String

let greeting = "Hello World!";

document.write(greeting + " - " + typeof greeting + "<br>");

// Number

let age = 25;

document.write(age + " - " + typeof age + "<br>");

// Boolean

let isStudent = true;

document.write(isStudent + " - " + typeof isStudent + "<br>");

// Null

let myNull = null;

document.write(myNull + " - " + typeof myNull + "<br>");

// Undefined

let myUndefined;

document.write(myUndefined + " - " + typeof myUndefined + "<br>");

// Symbol

let sym = Symbol("foo");

document.write(sym.description + " - " + typeof sym + "<br>");

document.write("<h2><font color=\"seagreen\">Complex data types or Objects</font></h2>");

// Object

let person = {

name: "Manuel",

age: 47,

isStudent: false

}

document.write(person.name + " - " + typeof person + "<br>");

// Array

let myArray = [1, "two", false];

document.write(myArray[1] + " - " + typeof myArray + "<br>");

// Function

let name = "Manuel";

function sayHello(name) {

document.write("Hello, " + name + "! ");

}

sayHello("Katarina");

document.write(" - " + typeof sayHello + "<br>");

// Date

let currentDate = new Date();

document.write(currentDate + " - " + typeof currentDate + "<br>");

// RegExp

let myRegExp = /hello/i;

document.write(myRegExp + " - " + typeof myRegExp + "<br>");

// Map

let myMap = new Map();

myMap.set("key1", "value1");

document.write(myMap.get("key1") + " - " + typeof myMap + "<br>");

// Set

let mySet = new Set();

mySet.add("one");

for (let value of mySet.values()) {

document.write(value);

}

document.write(" - " + typeof mySet + "<br>");

document.write("<h2><font color=\"seagreen\">Constants</font></h2>");

const PI = Math.PI;

document.write("PI = " + PI + "<br>");

Vratite se na pretraživač, refrešujte index.html veb stranicu, zatim kliknite na drugi link lekciju 2. Rezultat treba da izgleda ovako:

Primitive data types

Hello World! - string
25 - number
true - boolean
null - object
undefined - undefined
foo - symbol

Complex data types or Objects

Manuel - object
two - object
Hello, Katarina! - function
Tue May 09 2023 03:55:07 GMT+0200 (Central European Summer Time) - object
/hello/i - object
value1 - object
one - object

Constants

PI = 3.141592653589793

( Rezultat organizovanja i kodiranja JavaScript tutorijala )

Konstante

Ukoliko obratite pažnju na navedeni zadnji deo JavaScript kôd-a u variables.js fajlu, možete primetiti da u kodu imamo i konstantu PI. Šta to znači, šta je konstanta? Konstanta je kao i promenjiva, samo što se njena vrednost ne može menjati tokom izvršavanja programa kao što to možete raditi sa promenjivima. Konstante služe da na primer ne morate uvek kucati vrednost 3.141592653589793 kad vam je potreban ovaj broj, nego umesto njega otkucate samo PI. U navedenom primeru mi smo deklarisali konstantu sa ključnom rečju const i dodelili joj vrednost PI. Za ovu dodelu umesto da kucamo vrednost 3.141592653589793, rekli smo ugrađenom JavaScript statičkom objektu Math da nam dodeli vrednost. Jednom kad smo dodelili vrednost konstanti ona se ne može menjati. Obratite pažnju kada kreirate konstante, da njih za razliku od promenjivih uvek pišete u potpunosti velikim slovima. Kako sve ovo izgleda, možete pogledati i u video-u.