Lecția 4: Structuri condiționate în JavaScript

Structurile condiționate permit executarea unor instrucțiuni diferite în funcție de condiții logice.

1. Instrucțiunea `if`

Format:
if (condiție) { instrucțiuni }

Efect:
Execută instrucțiunile doar dacă expresia logică este adevărată.

Exemplu:

Exemplu interactiv: Verificare paritate

Introdu un număr natural:

Vezi codul JavaScript


    function verifica() {
      const input = document.getElementById('numar').value;
      const rezultat = document.getElementById('rezultat');
    
      if (input === "") {
        rezultat.innerText = "Te rog introdu un număr.";
        return;
      }
    
      const n = parseInt(input);
      
      if (n % 2 === 0) {
        rezultat.innerText = `Numărul ${n} este par.`;
      }
    
      if (n % 2 !== 0) {
        rezultat.innerText = `Numărul ${n} este impar.`;
      }
    }

📘 Explicații pe înțelesul tuturor

const input = document.getElementById('numar').value;
🔹 Declară câmpul cu id-ul numar (adică inputul din formular) și ia valoarea introdusă de utilizator.

const rezultat = document.getElementById('rezultat');
🔹 Pregătește accesul la zona unde vom afișa răspunsul („rezultat”).

if (input === "") { rezultat.innerText = "Te rog introdu un număr."; return; }
🔹 Verifică dacă utilizatorul nu a introdus nimic.
Dacă da, afișează un mesaj de atenționare și oprește funcția (prin return).

const n = parseInt(input);
🔹 Transformă textul introdus de utilizator într-un număr întreg.

if (n % 2 === 0) { rezultat.innerText = `Numărul ${n} este par.`; }
🔹 Verifică dacă numărul este divizibil cu 2 (adică n % 2 === 0).
Dacă da, afișează mesajul: „Numărul este par”.

if (n % 2 !== 0) { rezultat.innerText = `Numărul ${n} este impar.`; }
🔹 Dacă restul împărțirii la 2 NU este 0, înseamnă că numărul este impar — se afișează mesajul corespunzător.

2. Instrucțiunea `if...else`

Format:
if (condiție) { instrucțiuni1 } else { instrucțiuni2 }

Efect:
Execută instrucțiuni diferite în funcție de valoarea expresiei logice.

Exemplu interactiv: verificăm dacă un număr natural este pătrat perfcet

Introdu un număr natural:

Vezi codul JavaScript


function verificaPatratPerfect() {
  const input = document.getElementById('numar2').value;
  const rezultat = document.getElementById('rezultat2');

  if (input === "") {
    rezultat.innerText = "Te rog introdu un număr.";
    return;
  }

  const n = parseInt(input);
  const rad = Math.sqrt(n);

  if (n < 0 || isNaN(n)) {
    rezultat.innerText = "Te rog introdu un număr natural valid.";
    return;
  }

  if (Number.isInteger(rad)) {
    rezultat.innerText = `✔️ Numărul ${n} este un pătrat perfect (${rad} × ${rad}).`;
  } else {
    rezultat.innerText = `❌ Numărul ${n} NU este un pătrat perfect.`;
  }
}

3. Instrucțiunea `if...else if...else`

Format:
if (cond1) { ... } else if (cond2) { ... } else { ... }

Efect:
Verifică mai multe condiții succesiv și execută prima potrivită.

4. Instrucțiunea `switch`

Format:

switch (expresie) {
      case valoare1:
        instrucțiuni;
        break;
      case valoare2:
        instrucțiuni;
        break;
      default:
        instrucțiuni;
    }

Efect:
Selectează un bloc de instrucțiuni în funcție de valoarea expresiei. Este echivalentul lui SWITCH din alte limbaje.

📚 Explicații detaliate pentru codul JavaScript

1. Funcția calculeaza():

const a = parseFloat(document.getElementById('a').value);
- Preia valoarea introdusă în câmpul cu id-ul a și o transformă într-un număr real cu virgulă mobilă (float).
const b = parseFloat(document.getElementById('b').value);
- La fel, preia și convertește al doilea număr introdus.
const op = document.getElementById('op').value.trim();
- Preia operatorul (+, -, *, /) introdus, eliminând eventualele spații înainte sau după.
const rezultat = document.getElementById('rezultat');
- Pregătește zona unde va afișa răspunsul (un paragraf <p> cu id rezultat).

2. Verificarea validității numerelor:

if (isNaN(a) || isNaN(b)) { ... }
- Dacă oricare dintre valorile introduse nu este un număr valid, afișăm un mesaj de eroare și oprim executarea funcției cu return;.

3. Instrucțiunea switch(op):

Analizează valoarea operatorului și execută cazul corespunzător:

case "+": - adună a + b și afișează suma.
case "-": - calculează diferența a - b și o afișează.
case "*": - înmulțește a * b și afișează produsul.
case "/": - verifică dacă b este zero:

dacă b === 0, afișează mesaj că împărțirea la zero nu este permisă;
altfel, calculează și afișează câtul a / b.

default: - dacă operatorul introdus nu este unul din cele permise (+, -, *, /), afișează un mesaj de eroare.

4. Funcția toggleCod():

Controlează afișarea blocului cu codul JavaScript.
Verifică dacă blocul este ascuns (display: none) și îl face vizibil sau invers, pentru a afișa/ascunde codul la click pe butonul „Vezi codul JavaScript”.