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 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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<title>JavaScript Tutorial</title>
</head>
<body>
<h1 class="bg-dark text-light
text-center py-2">JavaScript Tutorial</h1>
<br/><br/><br/>
<h5 class="bg-dark text-light
text-center py-2" id="footer">
Copyright © 2023 <strong>Manuel Radovanović</strong>
All rights reserved.
</h5>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<title>JavaScript Tutorial</title>
</head>
<body>
<h1 class="bg-dark text-light
text-center py-2">JavaScript Tutorial</h1>
<br/><br/><br/>
<h5 class="bg-dark text-light text-center
py-2" id="footer">
Copyright © 2023 <strong>Manuel Radovanović</strong>
All rights reserved.
</h5>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
<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 1. Variables and
data types
</a></li>
</ul>
</div>
</div>
<script src="js/includes.js"></script>
<footer></footer>
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:
<header></header>
<h2 class="bg-primary text-light text-center py-3">Lesson 1. - Hello World</h2>
<div class="container">
<script type="text/javascript">
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>
<script src="../js/includes.js"></script>
<footer></footer>
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 + "! ");
}
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
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.
Nema komentara:
Objavi komentar