Tutorial JavaScript - Introducere Completă

🔢 Operatori

Operatorii sunt simboluri care efectuează operații asupra valorilor (operanzi).

Operatori Aritmetici

Operatori de bază

let a = 10;
let b = 3;

console.log(a + b);  // 13 (adunare)
console.log(a - b);  // 7 (scădere)
console.log(a * b);  // 30 (înmulțire)
console.log(a / b);  // 3.333... (împărțire)
console.log(a % b);  // 1 (restul împărțirii)
console.log(a ** b); // 1000 (ridicare la putere)
                    

Operatori de incrementare

let x = 5;
console.log(x++);  // 5 (apoi x devine 6)
console.log(++x);  // 7 (x devine 7, apoi se afișează)
console.log(x--);  // 7 (apoi x devine 6)
console.log(--x);  // 5 (x devine 5, apoi se afișează)
                    

Operatori de Comparare

let num1 = 5;
let num2 = "5";

console.log(num1 == num2);   // true (comparare cu conversie)
console.log(num1 === num2);  // false (comparare strictă)
console.log(num1 != num2);   // false
console.log(num1 !== num2);  // true
console.log(num1 > 3);       // true
console.log(num1 <= 5);      // true
            

Operatori Logici

let isTrue = true;
let isFalse = false;

console.log(isTrue && isFalse);  // false (AND)
console.log(isTrue || isFalse);  // true (OR)
console.log(!isTrue);            // false (NOT)

// Exemple practice
let varsta = 25;
let arePermis = true;

if (varsta >= 18 && arePermis) {
    console.log("Poate conduce!");
}
            

🔥 Demo Interactiv - Calculator

🤔 Instrucțiuni Condiționale

Instrucțiunile condiționale ne permit să executăm cod diferit în funcție de anumite condiții.

If, Else If, Else

let temperatura = 25;

if (temperatura > 30) {
    console.log("Este foarte cald!");
} else if (temperatura > 20) {
    console.log("Este plăcut afară!");
} else if (temperatura > 10) {
    console.log("Este răcoros!");
} else {
    console.log("Este frig!");
}
            

Switch Statement

let ziua = "luni";

switch (ziua) {
    case "luni":
        console.log("Începe săptămâna de lucru!");
        break;
    case "marți":
        console.log("Marțea motivației!");
        break;
    case "miercuri":
        console.log("Mijlocul săptămânii!");
        break;
    case "sâmbătă":
    case "duminică":
        console.log("Weekend relaxant!");
        break;
    default:
        console.log("Zi obișnuită!");
}
            

Operator Ternar

let varsta = 20;
let status = varsta >= 18 ? "adult" : "minor";
console.log(status); // "adult"

// Exemplu mai complex
let punctaj = 85;
let nota = punctaj >= 90 ? "A" : 
           punctaj >= 80 ? "B" : 
           punctaj >= 70 ? "C" : 
           punctaj >= 60 ? "D" : "F";
console.log(nota); // "B"
            

🔥 Demo Interactiv - Verificator Vârstă

🔄 Loops și Funcții

For Loop

For clasic

// Afișează numerele de la 1 la 5
for (let i = 1; i <= 5; i++) {
    console.log("Numărul: " + i);
}

// Parcurgerea unui array
let culori = ["roșu", "verde", "albastru"];
for (let i = 0; i < culori.length; i++) {
    console.log(culori[i]);
}
                    

For...of și For...in

let fructe = ["măr", "banană", "portocală"];

// For...of (pentru valori)
for (let fruct of fructe) {
    console.log(fruct);
}

// For...in (pentru indici)
for (let index in fructe) {
    console.log(index + ": " + fructe[index]);
}
                    

While și Do-While

// While loop
let contor = 0;
while (contor < 3) {
    console.log("Contor: " + contor);
    contor++;
}

// Do-while loop (se execută cel puțin o dată)
let numar = 0;
do {
    console.log("Numărul este: " + numar);
    numar++;
} while (numar < 3);
            

Funcții

Declararea funcțiilor

// Function declaration
function saluta(nume) {
    return "Salut, " + nume + "!";
}

// Function expression
const aduna = function(a, b) {
    return a + b;
};

// Arrow function
const inmulteste = (a, b) => a * b;

// Apelarea funcțiilor
console.log(saluta("Ana"));
console.log(aduna(5, 3));
console.log(inmulteste(4, 7));
                    

Funcții avansate

// Funcție cu parametri default
function prezinta(nume, varsta = 25) {
    return `Sunt ${nume} și am ${varsta} de ani.`;
}

// Funcție cu rest parameters
function sumeaza(...numere) {
    return numere.reduce((sum, num) => sum + num, 0);
}

console.log(prezinta("Maria"));
console.log(sumeaza(1, 2, 3, 4, 5)); // 15
                    

🔥 Demo Interactiv - Generator de Tabele

📝 Strings

String-urile sunt secvențe de caractere folosite pentru a reprezenta text.

Crearea String-urilor

// Diferite modalități de a crea string-uri
let str1 = "Ghilimele duble";
let str2 = 'Ghilimele simple';
let str3 = `Template literal`;
let str4 = new String("Constructor");

// Template literals cu interpolare
let nume = "Alex";
let varsta = 30;
let mesaj = `Salut, sunt ${nume} și am ${varsta} de ani.`;
console.log(mesaj);
            

Metode String Importante

Metode de bază

let text = "JavaScript este grozav!";

console.log(text.length);        // 23
console.log(text.toUpperCase()); // "JAVASCRIPT ESTE GROZAV!"
console.log(text.toLowerCase()); // "javascript este grozav!"
console.log(text.charAt(4));     // "S"
console.log(text.indexOf("este")); // 11
                    

Slice și Substring

let propozitie = "Învățăm JavaScript";

console.log(propozitie.slice(0, 8));     // "Învățăm"
console.log(propozitie.substring(9));    // "JavaScript"
console.log(propozitie.slice(-10));      // "JavaScript"
console.log(propozitie.split(" "));      // ["Învățăm", "JavaScript"]
                    

Metode Avansate

let cuvinte = "   programare, web, javascript, frontend   ";

// Curățare și procesare
let curat = cuvinte.trim();
let lista = curat.split(", ");
let procesat = lista.map(cuvant => 
    cuvant.charAt(0).toUpperCase() + cuvant.slice(1)
);

console.log(procesat); // ["Programare", "Web", "Javascript", "Frontend"]

// Replace și match
let text = "Azi este o zi frumoasă. Zi perfectă pentru programare.";
let inlocuit = text.replace(/zi/gi, "seară");
console.log(inlocuit);

// Verificări
console.log(text.includes("frumoasă"));  // true
console.log(text.startsWith("Azi"));     // true
console.log(text.endsWith("programare."));  // true
            

🔥 Demo Interactiv - Procesator de Text

🏗️ Objects

Obiectele sunt colecții de proprietăți (perechi cheie-valoare) și metode.

Crearea Obiectelor

Object Literal

let persoana = {
    nume: "Ana Maria",
    varsta: 28,
    oras: "București",
    
    // Metodă
    saluta: function() {
        return `Salut, sunt ${this.nume}!`;
    },
    
    // Metodă arrow function (ES6)
    prezinta: () => {
        return "Mă prezint...";
    }
};

console.log(persoana.nume);      // "Ana Maria"
console.log(persoana.saluta());  // "Salut, sunt Ana Maria!"
                    

Constructor Function

function Masina(marca, model, an) {
    this.marca = marca;
    this.model = model;
    this.an = an;
    
    this.descriere = function() {
        return `${this.marca} ${this.model} din ${this.an}`;
    };
}

let masina1 = new Masina("Toyota", "Corolla", 2020);
let masina2 = new Masina("BMW", "X5", 2022);

console.log(masina1.descriere());
                    

Lucrul cu Proprietăți

let student = {
    nume: "Mihai",
    note: [8, 9, 7, 10],
    facultate: "Informatică"
};

// Accesarea proprietăților
console.log(student.nume);        // Dot notation
console.log(student["note"]);     // Bracket notation

// Adăugarea proprietăților
student.grupa = "A1";
student["mentor"] = "Prof. Popescu";

// Verificarea existenței unei proprietăți
console.log("note" in student);              // true
console.log(student.hasOwnProperty("note")); // true

// Ștergerea unei proprietăți
delete student.facultate;

// Iterarea prin proprietăți
for (let cheie in student) {
    console.log(`${cheie}: ${student[cheie]}`);
}
            

Metode Object Avansate

let produs = {
    nume: "Laptop",
    pret: 2500,
    brand: "Dell",
    specificatii: {
        procesor: "Intel i7",
        ram: "16GB",
        storage: "512GB SSD"
    }
};

// Object.keys(), Object.values(), Object.entries()
console.log(Object.keys(produs));     // ["nume", "pret", "brand", "specificatii"]
console.log(Object.values(produs));   // ["Laptop", 2500, "Dell", {...}]
console.log(Object.entries(produs));  // [["nume", "Laptop"], ...]

// Object.assign() - copierea obiectelor
let copie = Object.assign({}, produs);

// Destructuring
let {nume, pret, brand} = produs;
console.log(nume, pret, brand);

// Nested destructuring
let {specificatii: {procesor, ram}} = produs;
console.log(procesor, ram);
            

🔥 Demo Interactiv - Creator de Profil

📊 Arrays

Array-urile sunt structuri de date care pot stoca multiple valori într-o singură variabilă.

Crearea și Accesarea Array-urilor

// Diferite modalități de a crea array-uri let numere = [1, 2, 3, 4, 5]; let fructe = ["măr", "banană", "portocală"]; let mixt = [1, "text", true, null, {nume: "obiect"}]; let gol = []; let constructor = new Array(10); // Array cu 10 elemente undefined // Accesarea elementelor console.log(fructe[0]); // "măr" console.log(fructe[2]); // "portocală" console.log(fructe.length); // 3 // Modificarea elementelor fructe[1] = "strugure"; console.log(fructe); // ["măr", "strugure", "portocală"]

Metode Array Fundamentale

Adăugare și Eliminare

let lista = ["a", "b", "c"];

// Adăugare la sfârșit
lista.push("d", "e");
console.log(lista); // ["a", "b", "c", "d", "e"]

// Eliminare de la sfârșit
let ultimul = lista.pop();
console.log(ultimul); // "e"

// Adăugare la început
lista.unshift("z");
console.log(lista); // ["z", "a", "b", "c", "d"]

// Eliminare de la început
let primul = lista.shift();
console.log(primul); // "z"
                    

Splice și Slice

let numere = [1, 2, 3, 4, 5, 6];

// Slice - nu modifică array-ul original
let portiune = numere.slice(2, 4);
console.log(portiune); // [3, 4]

// Splice - modifică array-ul original
let eliminate = numere.splice(1, 2, "a", "b");
console.log(eliminate); // [2, 3]
console.log(numere);    // [1, "a", "b", 4, 5, 6]
                    

Metode Array Avansate

let studenti = [
    {nume: "Ana", nota: 9},
    {nume: "Bogdan", nota: 7},
    {nume: "Clara", nota: 10},
    {nume: "Dan", nota: 8}
];

// Map - transformă fiecare element
let nume = studenti.map(student => student.nume);
console.log(nume); // ["Ana", "Bogdan", "Clara", "Dan"]

// Filter - filtrează elementele
let studientiExcelenti = studenti.filter(student => student.nota >= 9);
console.log(studientiExcelenti);

// Find - găsește primul element
let clara = studenti.find(student => student.nume === "Clara");
console.log(clara);

// Reduce - reduce array-ul la o singură valoare
let mediaNotes = studenti.reduce((sum, student) => sum + student.nota, 0) / studenti.length;
console.log(mediaNotes); // 8.5

// Some și Every
console.log(studenti.some(student => student.nota === 10)); // true
console.log(studenti.every(student => student.nota >= 7));  // true
            

Alte Metode Utile

let cuvinte = ["programare", "web", "javascript"];

// Join - combină elementele într-un string
let propozitie = cuvinte.join(" ");
console.log(propozitie); // "programare web javascript"

// Includes - verifică existența unui element
console.log(cuvinte.includes("web")); // true

// IndexOf și lastIndexOf
let pozitie = cuvinte.indexOf("javascript");
console.log(pozitie); // 2

// Sort - sortează array-ul
let numereBulversate = [3, 1, 4, 1, 5, 9, 2, 6];
numereBulversate.sort((a, b) => a - b);
console.log(numereBulversate); // [1, 1, 2, 3, 4, 5, 6, 9]

// Reverse - inversează array-ul
let invers = [1, 2, 3, 4].reverse();
console.log(invers); // [4, 3, 2, 1]
            