Tutorial Javascript pentru incepatori si avansati- Curs Javascript

Introducere în limbajul JavaScript

Ce este JavaScript?

JavaScript este limbajul care face paginile web interactive. Dacă HTML este structura, iar CSS este stilul, JavaScript controlează comportamentul — ce se întâmplă când utilizatorul interacționează cu pagina.

• Când apeși pe un buton și apare un mesaj.
• Când imaginea se schimbă când treci cu mouse-ul peste ea.
• Când formularul verifică automat dacă ai completat corect.

Scrierea primului script JavaScript

JavaScript se scrie între etichetele <script>. Codul poate fi inclus direct în pagină sau într-un fișier separat.

Consola browserului - Ce este și cum o folosim?

Consola este un instrument pentru dezvoltatori care ne arată ce se întâmplă „în spatele cortinei”. Aici putem vedea mesaje, erori și putem testa cod JavaScript.

Cum o deschizi:

• Apasă F12 pe tastatură.
• Sau click dreapta pe pagină → Inspect → tab-ul Console.

Exemplu de cod care scrie în consolă:

Alternativă vizuală: Afișare directă în pagină

Pentru începători, e mai intuitiv să vedem rezultatul direct în pagină, nu doar în consolă.

Comentarii în JavaScript

Comentariile sunt explicații în cod care nu sunt executate. Le folosim pentru claritate sau pentru a dezactiva temporar o parte din cod.

Tipuri de date: String și Number

JavaScript lucrează cu diferite tipuri de informații, numite tipuri de date. Cele mai comune sunt:

• String - text între ghilimele: "Salut"
• Number - numere întregi sau zecimale: 42, 3.14

Variabile și convenții de denumire

O variabilă este ca o cutie în care stocăm o valoare. Se declară cu let, const sau var.

Ce este camelCase?

camelCase este o convenție de scriere unde:

• Primul cuvânt începe cu literă mică.
• Fiecare cuvânt nou începe cu literă mare.

Exemplu:

let numeComplet = "Ioan Popescu";

Se numește „camelCase” pentru că seamănă cu cocoașa unei cămile: începe jos și urcă la fiecare cuvânt nou.

Tipuri speciale de date în JavaScript

Boolean - Adevărat sau Fals

Un tip de date boolean are doar două valori posibile: true (adevărat) sau false (fals).

Este folosit pentru a verifica condiții, pentru a controla logica programului și pentru a răspunde la întrebări de tip „da” sau „nu”.

let esteLogat = true;
let areParolaCorecta = false;

Putem folosi aceste valori în condiții:

if (esteLogat) {
  console.log("Bine ai venit!");
}

Null - Absența intenționată a unei valori

null este o valoare specială care înseamnă „nimic” sau „gol”, dar setat intenționat de programator.

Este folosit atunci când vrem să indicăm că o variabilă nu are încă o valoare, dar va primi una mai târziu.

let rezultat = null; // momentan nu avem un rezultat

Mai târziu putem actualiza:

rezultat = "Succes!";

Undefined - Variabilă declarată, dar fără valoare

undefined apare automat atunci când:

• Declarăm o variabilă, dar nu îi atribuim o valoare.
• Încercăm să accesăm o proprietate care nu există.

let nume;
console.log(nume); // va afișa "undefined"

Este diferit de null, care este setat intenționat. undefined apare implicit.

Compararea Null și Undefined

Deși ambele înseamnă „fără valoare”, ele sunt diferite:

• null - valoare setată de programator.
• undefined - valoare implicită când nu s-a setat nimic.

let a = null;
let b;
console.log(a === b); // false

☞ În JavaScript, null și undefined sunt tratate diferit în comparații stricte (===).

Operatorii logici în JavaScript

Operatorii logici sunt folosiți pentru a combina sau compara expresii booleene. Rezultatul este întotdeauna true sau false.

Operatorul AND - &&

Returnează true doar dacă ambele condiții sunt adevărate.

let esteLogat = true;
let areAcces = true;

if (esteLogat && areAcces) {
  console.log("✅ Acces permis");
}

Operatorul OR - ||

Returnează true dacă cel puțin una dintre condiții este adevărată.

let areInvitatie = false;
let esteVIP = true;

if (areInvitatie || esteVIP) {
  console.log("✅ Poți intra");
}

Operatorul NOT - !

Inversează valoarea: !true devine false, iar !false devine true.

let esteObosit = false;

if (!esteObosit) {
  console.log("✅ Poți continua să lucrezi");
}

Combinarea operatorilor logici

Putem combina mai mulți operatori pentru condiții complexe:

let esteLogat = true;
let areRolAdmin = false;
let parolaCorecta = true;

if ((esteLogat && parolaCorecta) || areRolAdmin) {
  console.log("✅ Acces permis");
}

☞ Parantezele ajută la gruparea logică a condițiilor și evită ambiguitatea.

Operatorii de comparație în JavaScript

Operatorii de comparație sunt folosiți pentru a compara două valori. Rezultatul este întotdeauna true sau false.

Egalitate slabă - ==

Compară două valori după conversie. Adică, dacă tipurile sunt diferite, JavaScript încearcă să le transforme.

console.log(5 == "5"); // true - conversie automată

Egalitate strictă - ===

Compară atât valoarea cât și tipul. Este recomandat pentru precizie.

console.log(5 === "5"); // false - tipuri diferite

Diferență - != și !==

!= verifică dacă valorile sunt diferite (cu conversie), iar !== verifică diferența fără conversie.

console.log(5 != "5");   // false
console.log(5 !== "5");  // true

Mai mic / Mai mare

Operatorii <, >, <=, >= compară numeric:

let x = 10;
let y = 7;

console.log(x > y);   // true
console.log(x <= y);  // false

Recomandare

☞ Folosește === și !== în loc de == și != pentru a evita erori cauzate de conversii automate.

Instrucțiuni condiționale în JavaScript

Instrucțiunile condiționale permit codului să ia decizii în funcție de anumite condiții. Cele mai comune sunt:

• if - execută codul dacă o condiție este adevărată
• else - execută codul dacă condiția este falsă
• else if - verifică o altă condiție dacă prima a fost falsă
• switch - verifică mai multe cazuri posibile

Instrucțiunea if

Verifică o condiție și execută codul doar dacă este true.

let temperatura = 30;

if (temperatura > 25) {
  console.log("🌞 E cald afară!");
}

Instrucțiunea if...else

Execută un bloc de cod dacă condiția este true, altul dacă este false.

let ora = 21;

if (ora < 20) {
  console.log("🕒 Mai e devreme");
} else {
  console.log("🌙 E deja seară");
}

Instrucțiunea if...else if...else

Permite verificarea mai multor condiții succesive.

let nota = 8;

if (nota >= 9) {
  console.log("🏆 Excelent");
} else if (nota >= 7) {
  console.log("👍 Bun");
} else {
  console.log("📘 Mai ai de învățat");
}

Instrucțiunea switch

Este utilă când avem mai multe opțiuni distincte de verificat.

let zi = "luni";

switch (zi) {
  case "luni":
    console.log("📅 Începe săptămâna");
    break;
  case "vineri":
    console.log("🎉 Se apropie weekendul");
    break;
  default:
    console.log("⏳ Zi obișnuită");
}

Metode pentru șiruri de caractere și Template Literals

În JavaScript, șirurile de caractere (stringuri) sunt folosite pentru a reprezenta texte. Putem aplica metode utile pentru a le analiza, modifica sau combina.

Metode comune pentru stringuri

Iată câteva dintre cele mai folosite metode:

Template Literals - șiruri flexibile cu backticks

Template literals sunt șiruri de caractere delimitate cu `backticks` (accent grav) care permit:

• Interpolarea variabilelor cu ${}
• Scrierea pe mai multe linii

let nume = "Ioan";
let mesaj = `Salut, ${nume}!
Bine ai venit în tutorialul JavaScript.`;
console.log(mesaj);

Recomandare

☞ Folosește `template literals` în loc de concatenare clasică (+) pentru cod mai clar și mai ușor de întreținut.

🧠 Quiz - JavaScript introducere