Introducere în programarea

cu JavaScript
Istorie
• Limbajul de scripting JavaScript a apărut în 1995 fiind un feature al
browserului Netscape Communicator
• Scopul era acela de a adăuga dinamism în paginile încărcate în browser de către un
client
• Navigatoarele Netscape erau cele mai populare la acel moment
• Multe alte navigatoare web (concurența) au adăugat propriile lor versiuni de
JavaScript
• Nu exista un standard, ci doar foarte multe interpretări despre ce înseamnă
JavaScript
• Standarul JavaScript s-a intitulat ECMAScript și a apărut în 1997 prin
intermediul European Computer Manufacturers Association (ECMA)
• a urmat o cale similară celorlalte limbaje și tehnologii utilizate în browsere (HTML,
respectiv CSS)
Instrumente pentru programare JS
• Chrome – consola de dezvoltator
• CTRL-SHIFT-I
• Customize and Control / Settings -> More Tools -> Developer Tools -> Console
• Alte instrumente de dezvoltare:
• Editor de text
• Interpretor JavaScript
• Repl.it
• Github.com
• Sublime Text
Tipuri de date în JavaScript
• Există 7 (șapte) tipuri de date în JS:
• Numeric
• Șir de caractere (string)
• Boolean
• Undefined (nedefinit)
• Null
• Symbol (începând cu ECMAScript 6 sau ES6)
• Obiect
Demo tipuri de date
• Scrieți în consolă
• (3 + 4)*12 – 24%13 ENTER
• Încercați diferiți operanzi și operatori grupați în expresii numerice
• ‘JavaScript’ ENTER
• ”Hello” + ”world!” ENTER
• ‘This isn’t working’ ENTER (eroare) vs. ‘This isn\’t an error’ ENTER
• 10 + ”11” ENTER vs. 10 – ”2” ENTER vs. ”10” – ”2” ENTER vs. "hello" - "work„
• NaN = Not a Number
• 3 > 2 ENTER vs. 2 > 3 ENTER vs. 2 === 2 vs. 2 == 2
Operatori relaționali în JS
• Mai mic strict <
• Mai mic sau egal <=
• Mai mare strict >
• Mai mare sau egal >=
• Inegalitate strictă !==
• Egalitate strictă ===
• JS încearcă conversia operanzilor la un tip de date comun
• Inegalitate slabă și constrângere de tip (data coercion) !=
• Egalitate slabă și constrângere de tip ==
• false == 0 ENTER (true) vs. false === 0 ENTER (false)
Valori pentru fals logic
• Există 6 (șase) valori echivalente pentru falsul logic în JS
• False – boolean
• 0 – numărul zero
• ”” - șirul de caractere vid
• Null
• Undefined
• NaN – Not a Number
Variabile în JS
• Variabilele se definesc cu ajutorul cuvântului cheie var
• În consolă, var salut = ”Hello world!”;
• Un identificator de variabilă
• Trebuie să înceapă cu o literă sau cu simbolul $
• Poate conține litere și cifre și simboluri speciale (_)
• Convenția de nume recomandată este camelCase în detrimentul snake_case
• Demo cu prompt(), alert() și Number() pentru adunarea a două
numere
• Utilizare SHIFT-ENTER pentru introducerea mai multor instrucțiuni în consolă
• Utilizare săgeată sus pentru reintroducerea unei comenzi din istoric
Expresii și instrucțiuni în JS
• Un program este o listă de instrucțiuni care sunt executate de către
calculator
• În majoritatea limbajelor de programare, aceste instrucțiuni mai sunt numite și
comenzi
• Un program JavaScript este format dintr-o listă de instrucțiuni. În HTML, programele
JS sunt executate de către navigatoarele web.
• Instrucțiunile JS sunt formate din valori, operatori, expresii, cuvinte cheie și
comentarii. Instrucțiunile JS sunt executate, una dupa cealaltă, în ordinea în care apar
• Sfârșitul unei instrucțiuni este precizat prin ; (recomandat) sau prin linie nouă
• Un fragment de cod care produce o valoare este considerată o expresie în
JS
• La sfârșitul fiecărei expresii este recomandată plasarea simbolului ;
• Undefined este tipul de date asociat unei variabile (semnalând faptul că
respectiva variabilă nu are nicio valoare asignată/atribuită)
Structuri de decizie în JS
• Există mai multe alternative:
• If
• If-else
• Operatorul ternar
• Switch-case-default
• Demo:
var name = prompt("Cum va numiti?");
if (name === "Marius") alert("Buna Marius! Ce mai faci?");
else alert("Salut " + name + " Ma bucur sa va cunosc!");
Operatori logici în JS
• Cei mai folosiți operatori logici sunt:
• && – AND
• II – OR
• ! – NOT
Demo – Indice de masă corporală
var name = prompt("Cum va numiti?");
var weight = prompt("Cate greutate aveti (in kilograme)?");
var height = prompt("Ce inaltime aveti (in metri)?");
if (weight !== 0 && height !== 0) {
var imc = Number(weight) / (Number(height) * Number(height));
if (imc <= 18.5) alert("Fotomodel(a)! IMC = " + imc);
else if (imc <= 24.9) alert("Normoponderal! IMC = " + imc);
else if (imc <= 29.9) alert("Normoponderal! IMC = " + imc);
else alert("Supraponderal! IMC = " + imc);
}
else alert("Valori incorecte pentru greutate=" + weight + " si inaltime=" + height);
JavaScript în paginile web
• Codul HTML permite adăugarea de cod JS, la fel cum permite
adăugarea fișierelor de stil CSS
• Eticheta link este folosită pentru inserarea unui fișier de stil în secțiunea antet
(head)
<link rel=”stylesheet” type= ” text/css” href= ”my_style.css”>
• Eticheta script permite adăugarea unui cod JS (ideal la sfârșitul secțiunii body,
dar adesea încărcat în secțiunea head)
<script type = ”text/javascript”> ... Cod JavaScript ... </script>
sau
<script type = ”text/javascript” src = ”my_script.js”> </script>
• Atenție la locul în care încărcați scripturile JS!
Funcții în JS
• Principiul de programare DRY = Don’t Repeat Yourself
• Funcțiile sunt fragmente de cod specializate în implementarea unei
singure funcționalități (single responsibility)
• parametrii în intrare (parametri formali)
• Cod/definiție specifice funcției
• Valori de retur în ieșire (doar primul return este executat, nu pot fi mai multe)
• Metoda de invocare folosind argumente (=parametri actuali)
• Cum se definesc funcțiile ?
• Folosind cuvântul cheie function, numele funcției și lista sa de parametri
• Codul specific funcției apare între acolade
Demo funcții JS
function sayHello() {
console.log(”Hello world!”);
}
sayHello();

• Funcții anonime
var sayHello2 = function() {
console.log(”HELLO WORLD!”);
}
sayHello2();
Structuri de date în JS – tablouri
• Tablourile sunt structuri de date des folosite în programele scrie în JS
var list = [‘one’, ‘two’, ‘three’];
console.log(list[0]);
• Fiecare element din tablou este identificat prin intermediul unui
indice (care corespunde poziției sale în tablou)
• Tablourile au asociate o sumă de atribute și metode predefinite,
accesibile prin intermediul operatorului dot (.) :
• concat, length, push, pop, shift, sort, etc.
Structuri de date în JS – obiecte
• Obiectele JavaScript sunt similare variabilelor, însă conțin mai multe valori
• Obiectele JavaScript sunt containere pentru mai multe valori specificate sub forma unor perechi
(nume:valoare), care pot fi clasificate în două categorii:
• Proprietăți
• Metode (funcții specifice obiectului) – de fapt, o proprietate care conține definiția unei funcții
• De exemplu
var person = { firstName:"John",
lastName:"Doe",
age:40,
eyeColor:"blue”,
introduceHimself: function() {
return this.firstName + ”” + this.lastName;
}
};
Structuri repetitive în JS
• Există patru structuri repetitive în JavaScript:
• for
for (var i = 0; i < length; i++) { ... }
for (item of string/array) { ... } //iterarea elementelor unui string/tablou
for (item in object) { ... } //enumerare proprietăți ale unui obiect
• while
while (condition_is_true) { ... }
• do-while
do { ... } while(condition_is_true);
• Metoda forEach (începând cu ES5) specifică tablourilor
• http://www.caniuse.com poate fi folosit pentru a verifica compatibilitatea navigatoarelor
web la standardele ECMA/W3C
abstract arguments await* boolean
break byte case catch
char class* const continue
debugger default delete do
double else enum* eval
export* extends* false final
finally float for function
goto if implements import*
in instanceof int interface
let* long native new
null package private protected
public return short static
super* switch synchronized this
throw throws transient true
try typeof var void
volatile while with yield
Domeniul de vizibilitate al variabilelor
• În eng. Scope (=sferă de acțiune, domeniu de vizibilitate)
• Local scope vs. Global scope
• Global scope = variabilele sunt accesibile oriunde (pentru că sunt declarate în afara
definițiilor de funcții)
• Local scope = variabilele sunt accesibile între anumite limite (de ex. În funcțiile în
care sunt declarate)
• Context în JS = se referă în principal la modul în care este utilizat cuvântul
cheie this
• This folosit în global scope returnează obiectul window
• This folosit în local scope (al unui obiect) returnează obiectul respectiv
• This folosit în local scope (al unei clase) returnează instanța specifică a clasei
respective, indiferent de câte instanțe ale clasei există în codul sursă curent
ECMAScript = JavaScript
• Navigatoarele web sunt actualizate permanent
• Librării de JS sunt scrise și actualizate pentru aceste browsere
• Numitorul comun după care se face acest lucru este numit standard (ES5/ES6)
• Caracteristicile noi adoptate sunt disponibile în validare via babeljs.io
• Variabile (let în loc de var)
• const pentru obiecte sau variabile
• Moduri noi de definire a proprietăților obiectelor
• Folosirea back-ticks, $ și acolade pentru definirea unor template string-uri
• Manipularea parametrilor impliciți/default de către funcțiile JS
• Manipularea simbolurilor (funcția Symbol())
• Funcții săgeată/arrow (=>)
Tehnici și utilizări avansate ale funcțiilor în JS
• Closures
• Scope-ul unui copil are întotdeauna acces la scope-ul părintelui
• https://www.3data.ro/viewart.php/8/Despre-notiunea-de-closure---in-JavaScript
• Currying
• Este o tehnică în care o funcție este creată cu unul sau mai mulți parametri setați deja
• Ideea este de a returna o funcție nouă și această funcție setează anumiți parametri care sunt
pasați atunci când funcția este apelată
• Compose

• Obiectivul principal al unui programator/dezvoltator web ar trebui să fie acela de

a crea cod
• fără efecte secundare și
• cu puritate funcțională (efect deterministic)
Tehnici avansate pentru tablouri în JS
• forEach

• map

• filter

• reduce

• https://sdras.github.io/array-explorer/
Concepte avansate pentru obiecte în JS
• 3 tipuri de date primitive: numeric, boolean, string,
• 2 tipuri de date speciale: null și undefined
• 2 tipuri de date non-primitive: tipul referință (obiecte, tablouri și
funcții) și symbol
• Instantiation – crearea unei copii a unui obiect (folosind constructorul
unei clase)
• https://sdras.github.io/object-explorer/
Pass by value vs. Pass by reference
• Transmiterea parametrilor se face prin
• Valoare
• Referință
• Metoda assign (Object.assign({}, sourceObject))
• Deep cloning
• Type coercion
• https://dorey.github.io/JavaScript-Equality-Table/
• https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Equality_comparisons_and_sameness
• https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3
Istoric standarde JS
• https://en.wikipedia.org/wiki/ECMAScript
• https://babeljs.io/repl/
• ES5 (2009)
• ES6 (2015)
• ES7 (2016): metoda .includes(), operatorul exponențial (**), async
• ES8 (2017): Object.values(), Object.keys(), Object.entries()
• ES9 (2018): async/await
• ES10 (2019): array.flat()
Javascript debugger
• Se obține prin introducerea cuvântului cheie debugger în codul sursă
• În proximitatea codului sursă pe care dorim să îl depanăm/înțelegem
• JavaScript este single-threaded și non-blocking
• O instrucțiune este executată pe rând, o dată, de către motorul JS
• Se execută un singur lucru o dată
• Există o singură stivă pentru apelurile de funcții
• Poate fi asincron cu ajutorul funcțiilor callback care pot rula în background
• În coada de callback și apoi în bucla de evenimente
Module JS
• Problema coliziunilor de nume în spațiul de nume al obiectului global
window
• Scripturi inline
• Etichete <script></script>
• IIFE = Immediately Invoked Function Expression
• O expresie IIFE este o manieră eficientă de a proteja scope (domeniul de vizibilitate) al unei
funcții și variabilele din aceasta
• https://medium.com/sungthecoder/javascript-module-module-loader-module-bundler-es6-
module-confused-yet-6343510e7bde
• Browserify + CommonJS
• Browserify.org
• Requirejs.org
• JS nu a avut un sistem de modularizare (export, import) până la ES6
• Webpack – webpack.js.org
Referințe
• A. Neagoie, The Complete Web Developer in 2020: from Zero to
Mastery, disponibil pe udemy.com
• JS for web development -
https://www.youtube.com/watch?v=ResWVWI333o
• https://javascript.info/
• http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-
edition/
• https://github.com/getify/You-Dont-Know-JS