Lectia 3: Introducere in JavaScript | Clasa a XII-a Mat-Info Web

1

1. Variabile in JavaScript: let, const, var

JavaScript are 3 cuvinte cheie pentru declararea variabilelor. Regula moderna: foloseste const implicit; treci la let doar cand valoarea se va schimba; evita var (comportament vechi, confuz).

Comparatie let / const / var:

// const - valoarea nu se poate schimba (reasigna)
const PI = 3.14159;
// PI = 3.14; // Error: Assignment to constant variable

// let - valoarea se poate schimba
let contor = 0;
contor = contor + 1;   // OK - acum contor = 1

// Tipuri de date in JS (dinamic - nu declari tipul)
let nume = "Maria";     // string
let varsta = 17;        // number
let esteElev = true;   // boolean
let nota;               // undefined (nedeclarat)

Template literals (backtick) - concatenare moderna:

const prenume = "Ion";
const clasa = 12;

// Varianta veche (concatenare cu +)
let mesaj1 = "Buna, " + prenume + "! Esti in clasa " + clasa + ".";

// Varianta moderna (template literal cu `)
let mesaj2 = `Buna, ${prenume}! Esti in clasa ${clasa}.`;

// Ambele produc: "Buna, Ion! Esti in clasa 12."
console.log(mesaj2); // Buna, Ion! Esti in clasa 12.

Output real (logica verificata cu Python):

prenume = "Ion", clasa = 12
mesaj2 = "Buna, Ion! Esti in clasa 12."

2

2. Functii: declarative, expresii si arrow functions

O functie este un bloc de cod cu nume, care executa o sarcina si poate returna un rezultat. JavaScript are trei sintaxe pentru functii, toate echivalente ca efect, diferite ca stil.

Cele 3 forme ale unei functii:

// 1. Function declaration (hoisted - poate fi apelata inainte de definitie)
function saluta(nume) {
    return `Buna ziua, ${nume}!`;
}

// 2. Function expression (nu e hoisted)
const saluta2 = function(nume) {
    return `Buna ziua, ${nume}!`;
};

// 3. Arrow function (sintaxa scurta, moderna)
const saluta3 = (nume) => `Buna ziua, ${nume}!`;

console.log(saluta("Maria"));  // Buna ziua, Maria!
console.log(saluta3("Ion"));  // Buna ziua, Ion!

Parametri cu valori implicite si functii cu mai multi parametri:

// Parametru cu valoare implicita
function calculeazaAria(latime, inaltime = 10) {
    return latime * inaltime;
}

console.log(calculeazaAria(5));      // 50 (inaltime = 10 implicit)
console.log(calculeazaAria(5, 3));   // 15

// Arrow function cu calcul direct
const suma = (a, b) => a + b;
console.log(suma(3, 7));           // 10

Output real (verificat Python):

saluta("Maria")        -> "Buna ziua, Maria!"
calculeazaAria(5)      -> 50
calculeazaAria(5, 3)   -> 15
suma(3, 7)             -> 10

3

3. DOM — Selectarea elementelor HTML

DOM (Document Object Model) este reprezentarea paginii HTML ca un arbore de obiecte JavaScript. Prin DOM poti selecta orice element HTML si ii poti modifica continutul, stilul sau atributele.

Analogie: DOM = hartie, JavaScript = creion

HTML creeaza structura (hartia). CSS o stilizeaza (vopseaua). JavaScript o modifica dinamic (creionul care rescrie). DOM este interfata dintre JavaScript si hartie.

Metode de selectie DOM (HTML corespunzator):

<!-- HTML -->
<h1 id="titlu">Pagina mea</h1>
<p class="text-albastru">Paragraf 1</p>
<p class="text-albastru">Paragraf 2</p>

// JavaScript - selectie elemente

// 1. Dupa id (unic in pagina) - cel mai rapid
const titlu = document.getElementById("titlu");

// 2. Primul element care corespunde selectorului CSS
const primaClasa = document.querySelector(".text-albastru");

// 3. Toate elementele care corespund selectorului CSS
const toateClasele = document.querySelectorAll(".text-albastru");
// toateClasele = NodeList cu 2 paragrafe

console.log(titlu.textContent);   // "Pagina mea"
console.log(toateClasele.length); // 2

Output DOM simulat (verificat Python):

titlu.textContent    -> "Pagina mea"
toateClasele.length -> 2
querySelector rezulta primul element din lista NodeList

4

4. DOM — Modificarea elementelor HTML

Dupa ce ai selectat un element, poti modifica: textContent (textul), innerHTML (HTML intern), style (CSS inline), classList (clase CSS) si setAttribute (atribute HTML).

Modificare continut si stil:

// HTML initial: <h1 id="titlu">Pagina mea</h1>
const titlu = document.getElementById("titlu");

// Modifica textul
titlu.textContent = "Pagina mea modificata!";

// Modifica HTML intern (poate contine taguri)
titlu.innerHTML = "Titlu <em>cu italic</em>";

// Modifica stil CSS (camelCase pentru proprietati compuse)
titlu.style.color = "#3b82f6";
titlu.style.backgroundColor = "#1e293b";  // background-color -> backgroundColor
titlu.style.fontSize = "2rem";

// Adauga/elimina clase CSS (mai curat decat style inline)
titlu.classList.add("activ");
titlu.classList.remove("ascuns");
titlu.classList.toggle("evidentiat");

Creare si adaugare elemente noi:

const lista = document.getElementById("lista-mea");

// Creeaza un element nou
const elementNou = document.createElement("li");
elementNou.textContent = "Element adaugat din JS";

// Adauga la sfarsitul listei
lista.appendChild(elementNou);

Output DOM simulat (verificat Python):

titlu.textContent initial:  "Pagina mea"
dupa modificare:            "Pagina mea modificata!"
lista.children.length:      1 (dupa appendChild)
element adaugat:            { tag: "li", text: "Element adaugat din JS" }

5

5. Evenimente (Events) si Event Listeners

Un eveniment este o actiune a utilizatorului sau a browserului (click, apasare tasta, miscare mouse, incarcare pagina). addEventListener leaga o functie la un eveniment.

Exemplu complet: buton contor cu click:

<!-- HTML -->
<button id="btnContor">Apasa-ma</button>
<p>Ai apasat de <span id="numar">0</span> ori.</p>

// JavaScript
let count = 0;   // variabila de stare

const btn = document.getElementById("btnContor");
const numar = document.getElementById("numar");

btn.addEventListener("click", function() {
    count += 1;                          // incrementeaza
    numar.textContent = count;           // actualizeaza DOM
});

Evenimente uzuale:

// click - buton, link
buton.addEventListener("click", fn);

// input - scriere in camp text (se declanseaza la fiecare tasta)
camp.addEventListener("input", fn);

// change - selectie dropdown, checkbox
select.addEventListener("change", fn);

// keydown - tasta apasata
document.addEventListener("keydown", (e) => {
    console.log(`Tasta apasata: ${e.key}`);
});

// DOMContentLoaded - pagina incarcata
document.addEventListener("DOMContentLoaded", () => {
    console.log("Pagina e gata!");
});

Comportament simulat (verificat Python):

count initial = 0
dupa click 1: count = 1, numar.textContent = "1"
dupa click 2: count = 2, numar.textContent = "2"
dupa click 3: count = 3, numar.textContent = "3"

6

6. Mini-aplicatie completa: Calculator IMC

Acum combinam tot ce am invatat: variabile, functii si manipulare DOM intr-o aplicatie reala — un calculator de Indice de Masa Corporala (IMC = greutate / inaltime²).

HTML (structura):

<div id="calculator">
  <h2>Calculator IMC</h2>
  <input type="number" id="greutate" placeholder="Greutate (kg)">
  <input type="number" id="inaltime" placeholder="Inaltime (cm)">
  <button id="btnCalcul">Calculeaza</button>
  <p id="rezultat"></p>
</div>

JavaScript (logica completa):

// 1. Selecteaza elementele
const btnCalcul = document.getElementById("btnCalcul");
const rezultat = document.getElementById("rezultat");

// 2. Functie pura pentru calcul IMC
function calculeazaIMC(greutateKg, inaltimeCm) {
    const inaltimeM = inaltimeCm / 100;
    return greutateKg / (inaltimeM * inaltimeM);
}

// 3. Functie pentru interpretare
function interpreteazaIMC(imc) {
    if (imc < 18.5) return "Subponderal";
    if (imc < 25)   return "Normal";
    if (imc < 30)   return "Supraponderal";
    return "Obezitate";
}

// 4. Event listener pe buton
btnCalcul.addEventListener("click", () => {
    const g = parseFloat(document.getElementById("greutate").value);
    const h = parseFloat(document.getElementById("inaltime").value);

    if (isNaN(g) || isNaN(h) || h === 0) {
        rezultat.textContent = "Date invalide!";
        return;
    }

    const imc = calculeazaIMC(g, h);
    const categorie = interpreteazaIMC(imc);
    rezultat.textContent = `IMC: ${imc.toFixed(2)} - ${categorie}`;
});

Exemple de output real (logica verificata Python):

calculeazaIMC(70, 175) -> 70 / (1.75 * 1.75) = 22.86 -> "Normal"
calculeazaIMC(50, 170) -> 50 / (1.70 * 1.70) = 17.30 -> "Subponderal"
calculeazaIMC(90, 170) -> 90 / (1.70 * 1.70) = 31.14 -> "Obezitate"

Introducere in JavaScript: Variabile, Functii, DOM

Obiectivul lectiei

Dupa aceasta lectie vei putea:

Incearca singur!

1. Variabile in JavaScript: let, const, var

2. Functii: declarative, expresii si arrow functions

3. DOM — Selectarea elementelor HTML

4. DOM — Modificarea elementelor HTML

5. Evenimente (Events) si Event Listeners

6. Mini-aplicatie completa: Calculator IMC

Exercitii practice

Exercitiul 1 (Nivel minim) — Variabile si template literals

Exercitiul 2 (Nivel standard) — Functie si DOM

Exercitiul 3 (Nivel performanta) — Mini-aplicatie lista de cumparaturi

Ce ai invatat astazi

Urmatoarea lectie