Cursul 02 - JavaScript
Cursul 02 - JavaScript
om
on
Ec
dii
tu
e S
d
ia
e m
ad
Ac
TEHNOLOGII WEB
CURSUL 2: JAVASCRIPT – INTRODUCERE
IULIAN ILIE-NÉMEDI
JAVASCRIPT DE LA 10000 DE METRII
Caracteristici
Declararea variabilelor
Tipuri de date
Operatori și conversii
Funcții și obiecte
Tratarea excepțiilor
Evenimente
CARACTERISTICI ALE
LIMBAJULUI JAVASCRIPT
• Limbaj multi-paradigmă:
• Imperativ: metode apelate direct;
• Funcțional: expresii lambda;
• Inițial doar bazat pe obiecte;
• A evoluat în orientat pe obiecte.
• Fundamental asincron;
• Case-sensitive;
• Folosește setul de caractere Unicode;
• Interpretat;
• Cu tipuri dinamice, determinabile și modificabile la runtime;
CLIENT-SIDE JAVASCRIPT
VS. SERVER-SIDE JAVASCRIPT
• Client-side JavaScript extinde limbajul cu obiecte specifice browser-
ului;
• Server-side JavaScript extinde limbajul cu obiecte specifice server-
ului;
• Amândouă sunt construite pe un model asincron.
DOMENII DE VIZIBILITATE
• 3 domenii de vizibilitate:
• Global;
• Funcție;
• Bloc.
• Legătura între domenii și rezolvarea conflictelor de nume;
• Numele interne au prioritate;
• Dacă un nume nu este găsit într-un anumit domeniu, va fi
căutat în domeniile care îl conțin (de la local la global).
DECLARAREA VARIABILELOR
În funcție n = 2
În blocul global n = 4
TIPURI DE DATE
• String;
• Number;
• BigInt;
• Boolean.
STRING
• Array;
• Set;
• Map;
• Object;
• Date;
• RegExp;
• Function;
• Symbol.
ARRAY
• Null:
• Reprezintă o variabilă cu tip definit, dar care nu ține referința unui obiect.
• Undefined:
• Reprezintă o variabilă cu tip nedefinit.
CONVERSII
• String la Number:
• var s = new Number("5"); //rezultatul este 5
• var s = new Number(""); //rezultatul este 0
• var s = new Number("abc"); //rezultatul este NaN
• parseInt("5.2"); // rezultatul este 5
• parseFloat("5.2"); // rezultatul este 5.2
• isNaN() se poate utiliza pentru verificare conversiei.
CONVERSII AUTOMATE
• Operatori aritmetici;
• Operatori de atribuire;
• Operatori string;
• Operații între tipuri diferite;
• Operatori pe biți;
• Operatori de comparație;
• Alți operatori.
OPERATORI ARITMETICI
Instrucțiunea break poate lipsi, caz în care se vor executa toate ramurile
case de sub ramura curentă, chiar dacă nu sunt îndeplinite condițiile lor.
OPERAȚII CU STRING-URI
• Definirea:
• const string1 = "A string primitive";
• const string2 = 'Also a string primitive’;
• const string3 = `Yet another string primitive`;
• Se pot defini și string-uri multiline care pot conține expresii evaluate;
• Un string multiline este conținut de ``;
• Un string multiline poate funcționa și ca un șablon conținând expresii.
• Accesul la un caracter:
• 'cat'.charAt(1) // întoarce "a"
• 'cat'[1] // întoarce tot "a"
• Compararea:
• "a" > "b"; "a" < "b";
• str1.toUpperCase() === str2.toUpperCase();
• str1.localeCompare(str2)
OPERAȚII CU STRING-URI (II)
• Parcurgerea:
• for (let c in s) {console.log(c);}
• Extragerea unui substring:
• "Apple, Banana, Kiwi".substring(7, 13); // extrage Banana
• "Apple, Banana, Kiwi".slice(7, 13); // extrage Banana
• "Apple, Banana, Kiwi".slice(-12, -6); // extrage Banana
• Înlocuirea unui substring:
• "I’m working at AxWAY“
.replace(/AXWAY/i, "Axway");
OPERAȚII CU STRING-URI (III)
• Adăugarea:
• let newLength = fruits.push('Orange');
• Ștergerea:
• let last = fruits.pop(); // șterge de la sfârșit
• let first = fruits.shift(); // șterge de la început
• let removedItem = fruits.splice(index, 1);
// șterge un element de la index
• let removedItems = fruits.splice(index, n);
// șterge n elemente începând de la index
OPERAȚII CU ARRAY-URI (III)
• Reducerea:
• let sum = [1, 2, 3, 4, 5].reduce((s, n) => s += n, 0); // sum = 15
• Substituirea fiecărui element:
• let lengths = ["one", "two", "three"].map(n => n.length); // [3, 3, 5]
• Filtrarea:
• let numbers = ["1", 2, '3'].filter(n => typeof n === "number"); // [2]
• Despachetarea ca listă:
• let numbers = […[1, 2, 3],…[4, 5, 6]]; // [1, 2, 3, 4, 5, 6]
• Concatenarea elementelor:
• let letters = ["a", "b", "c"];
• let s = letters.join(" "); // a b c
DEMO: OPERAȚII CU ARRAY-URI
Ne propunem să implementăm un serviciu care furnizează informații
despre lista județelor și orașele din fiecare județ al României. Rulăm
nmp init comanda npm init pentru a crea aplicația server descrisă de package.json.
• Definirea obiectelor:
• In-line:
var person = {name: "Iulian"};
• Prin apelul constructorului:
var person = new Object();
person.name = "Iulian";
person["name"] = "Iulian";
• Prin extragerea dintr-un șir de caractere:
var person = JSON.parse(`{
"name": "Iulian“
}`);
PROPRIETĂȚILE UNUI OBIECT
event.eventPhase
3 pentru bubbling
event.stopPropagation();
întrerupe mecanismul de bubbling
event.eventPhase
1 pentru capturing event.currentTarget
referă pe rând containerele
event.stopPropagation();
întrerupe mecanismul de capturing
event.currentTarget event.preventDefault()
referă pe rând containerele inhibă tratamentul implicit
event.target pentru eveniment
referă tot timpul elemntul
care a generat evenimentul
TRATAREA EXCEPȚIILOR
• JavaScript are un
mecanism clasic de
tratare a excepțiilor
cu throw, try, catch
și finally.
PYRAMID OF DOOM
https://youtu.be/-fsp342GiRs?si=GO3Z5tzojPoA9hm8
POANTA CURSULUI
Do you want to
hear a JavaScript
joke?