Săptămâna 1: JavaScript - Introducere și utilizare în pagini web

1. Ce este JavaScript?

JavaScript este un limbaj de programare utilizat pentru a adăuga interactivitate și dinamism paginilor web. Este esențial pentru dezvoltarea modernă a site-urilor, fiind folosit pentru a manipula elementele HTML, a gestiona evenimente și a comunica cu serverul.

2. Moduri de includere a JavaScript în pagini web

JavaScript poate fi adăugat în pagini HTML în trei moduri principale:

Inline JavaScript: cod scris direct în elemente HTML folosind atributul onclick, onmouseover, etc.
JavaScript intern: cod scris în interiorul tag-ului <script> în același fișier HTML.
JavaScript extern: cod scris într-un fișier separat .js și inclus cu <script src="script.js"></script>.

3. Variabile și tipuri de date

Variabilele sunt folosite pentru a stoca informații. JavaScript oferă trei modalități principale de a declara variabile:

var (vechi, folosit rar)
let (modern, recomandat pentru variabile ce se pot schimba)
const (pentru valori constante)

Exemplu:

let nume = "Alex";
const varsta = 25;
console.log(nume + " are " + varsta + " ani.");

Tipuri de date principale:

String ("text")
Number (10, 3.14)
Boolean (true, false)
Null (null – valoare nulă)
Undefined (o variabilă fără valoare atribuită)
Array ([1, 2, 3] – listă de valori)
Object ({nume: "Alex", varsta: 25} – perechi cheie-valoare)

4. Operatorii JavaScript

Operatorii sunt folosiți pentru a efectua operații matematice și logice.

Aritmetici: +, -, *, /, % (modulo), ** (exponențial)
De atribuire: =, +=, -=, *=, /=
De comparare: ==, !=, ===, !==, >, <, >=, <=
Logici: && (AND), || (OR), ! (NOT)

5. Interacțiunea cu utilizatorul

JavaScript permite interacțiunea cu utilizatorul prin metode precum:

alert("Mesaj de avertizare!") – afișează un mesaj pop-up.
prompt("Introdu numele tău:") – cere utilizatorului să introducă o valoare.
console.log("Mesaj de debug") – afișează un mesaj în consola browserului.

Exemplu:

let nume = prompt("Care este numele tău?");
alert("Bun venit, " + nume + "!");
console.log("Utilizatorul a introdus: " + nume);

6. Manipularea elementelor HTML

JavaScript poate accesa și modifica elementele HTML folosind metode precum:

document.getElementById("id") – selectează un element după ID.
document.getElementsByClassName("clasa") – selectează elemente după clasă.
document.querySelector("selector") – selectează primul element care se potrivește cu un selector CSS.

Exemplu:

document.getElementById("titlu").innerHTML = "Salut, JavaScript!";

7. Scrierea primului script JavaScript

Vom crea o pagină HTML care folosește JavaScript pentru a interacționa cu utilizatorul.

HTML:

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Primul Script JavaScript</title>
</head>
<body>
    <h1 id="titlu">Apasă butonul pentru un mesaj!</h1>
    <button onclick="schimbaText()">Apasă-mă</button>
    <script>
        function schimbaText() {
            document.getElementById("titlu").innerHTML = "Ai apăsat butonul!";
        }
    </script>
</body>
</html>

Acest script schimbă textul unui titlu atunci când butonul este apăsat.