Lecția 3: Consola, comentarii și sintaxa de bază. Variabile

✔️ Consola dezvoltatorului este un instrument al browserului pentru a vedea mesaje, erori și a testa cod JavaScript.

În majoritatea browserelor, o deschizi apăsând F12 sau click dreapta → Inspect → tab-ul Console.

✔️ Comentarii în JavaScript sunt linii ignorate de browser, folosite pentru a explica codul și pentru a-l face mai ușor de înțeles.

  • // Comentariu pe o linie
  • /* Comentariu pe mai multe linii */

✔️ Sintaxa de bază:

  • Instrucțiunile se termină cu ; (punct și virgulă)
  • JavaScript este sensibil la majuscule/minuscule (alert ≠ Alert)
  • Codul este organizat în blocuri între acolade { ... }

Exemplu JavaScript comentat:

// Afișează un mesaj în consola browserului
console.log('Salut, lume!');

// Afișează o alertă pe ecran
alert('Salut, lume!');

/*
  Acesta este un comentariu
  pe mai multe linii
*/

✔️ Exemplu live:

Apasă butonul și verifică Consola dezvoltatorului (F12 → Console) pentru mesajul „Buton apăsat!”.

Codul butonului:

 <button onclick=”console.log(‘Buton apăsat!’); alert(‘Buton apăsat!’)” style=”padding: 10px 20px; background-color: #CC0000; color: white; border: none; border-radius: 5px; cursor: pointer;”>
Apasă-mă
</button>

Declararea variabilelor în JavaScript

✔️ Ce este o variabilă?

O variabilă este un „recipient” în care putem stoca date pe care programul le poate folosi și modifica.

✔️ Cum declarăm o variabilă în JavaScript?

  • var – vechea formă, folosită mai puțin acum
  • let – recomandată pentru variabile care pot fi modificate
  • const – pentru variabile constante, care nu se modifică

✔️ Exemplu:

// Declararea variabilelor
let nume = 'Vasile';
const PI = 3.14;
var varsta = 40;

// Folosirea variabilelor
console.log('Salut, ' + nume + '!');
console.log('Valoarea lui PI este ' + PI);
console.log('Am ' + varsta + ' ani');

✔️ Exemplu live:

Codul butonului:

<button onclick=”
  let nume = ‘Vasile’;
  const PI = 3.14;
  var varsta = 63;
  alert(‘Salut, ‘ + nume + ‘!\nValoarea lui PI este ‘ + PI + ‘\nAm ‘ + varsta + ‘ ani’);”

  style=”padding: 10px 20px; background-color: #CC0000; color: white; border: none; border-radius: 5px; cursor: pointer;”>
  Apasă-mă
</button>

Lecția 4.2: Tipuri de date primitive în JavaScript

Tipuri de date primitive în JavaScript

✔️ Ce sunt tipurile de date primitive?

Sunt valorile simple pe care JavaScript le poate manipula direct.

✔️ Tipurile principale sunt:

  • number — numere, ex: 5, 3.14
  • string — șiruri de caractere, ex: 'Salut'
  • boolean — adevărat sau fals, ex: true, false
  • null — valoare „vidă” sau „nulă”
  • undefined — variabilă declarată dar neinițializată
  • symbol — identificatori unici (mai avansat)
// Exemplu variabile și tipuri
let nr = 10;              // number
let text = 'Salut';       // string
let adevar = true;        // boolean
let nimic = null;         // null
let necunoscut;           // undefined

console.log(typeof nr);       // "number"
console.log(typeof text);     // "string"
console.log(typeof adevar);   // "boolean"
console.log(typeof nimic);    // "object" (excepție istorică)
console.log(typeof necunoscut);// "undefined"

✔️ Exemplu live: Afișarea tipurilor în alertă

Explicații pentru console.log(typeof ...)

console.log(typeof nr); // "number"
→ Afișează tipul variabilei nr, care este number (număr).

console.log(typeof text); // "string"
→ Afișează tipul variabilei text, care este string (șir de caractere).

console.log(typeof adevar); // "boolean"
→ Afișează tipul variabilei adevar, care este boolean (adevărat/fals).

console.log(typeof nimic); // "object" (excepție istorică)
→ Afișează tipul variabilei nimic care are valoarea null. Din cauza unui bug istoric, JavaScript spune că este object.

console.log(typeof necunoscut);// "undefined"
→ Afișează tipul variabilei necunoscut care este declarată, dar nu are valoare. Tipul este undefined.

Pe scurt: typeof ne spune ce tip de date are o variabilă, iar console.log() afișează acest tip în consola browserului.

Lecția 4.3: Variabile numerice și operații matematice

Variabile numerice și operații matematice în JavaScript

✔️ Variabile numerice

Variabilele pot stoca numere întregi sau zecimale și pot fi folosite în calcule matematice.

✔️ Operatorii matematici de bază:

  • + Adunare
  • - Scădere
  • * Înmulțire
  • / Împărțire
  • % Restul împărțirii (modulo)
// Declarăm variabile numerice
let a = 10;
let b = 3;

// Operații matematice
let suma = a + b;
let diferenta = a - b;
let produs = a * b;
let cat = a / b;
let rest = a % b;

console.log('Suma: ' + suma);
console.log('Diferența: ' + diferenta);
console.log('Produsul: ' + produs);
console.log('Câtul: ' + cat);
console.log('Restul: ' + rest);

✔️ Exemplu live: calculează și afișează rezultatele

Operații matematice în consolă

Operații matematice în JavaScript

Deschide consola browserului (F12 → Console) pentru a vedea rezultatele.

Codul HTML:

<!DOCTYPE html>
<html lang=”ro”>
<head>
<meta charset=”UTF-8″>
<title>Operații matematice în consolă</title>
<style>
body {
font-family: Calibri, sans-serif;
background-color: #FFF3CD;
color: #CC0000;
padding: 20px;
font-size: 16px;
}
code {
background-color: #eee;
padding: 2px 5px;
border-radius: 4px;
color: black;
}
</style>
</head>
<body>

<h3>Operații matematice în JavaScript</h3>

<p>Deschide consola browserului (F12 → <em>Console</em>) pentru a vedea rezultatele.</p>

<script>
// Declarăm variabile numerice
let a = 10;
let b = 3;

// Operații matematice
let suma = a + b;
let diferenta = a – b;
let produs = a * b;
let cat = a / b;
let rest = a % b;

// Afișăm în consolă
console.log(‘Suma: ‘ + suma);
console.log(‘Diferența: ‘ + diferenta);
console.log(‘Produsul: ‘ + produs);
console.log(‘Câtul: ‘ + cat);
console.log(‘Restul: ‘ + rest);
</script>

<button onclick=”
let a = 10;
let b = 3;
let suma = a + b;
let diferenta = a – b;
let produs = a * b;
let cat = a / b;
let rest = a % b;
alert(
‘Suma: ‘ + suma + ‘\n’ +
‘Diferența: ‘ + diferenta + ‘\n’ +
‘Produsul: ‘ + produs + ‘\n’ +
‘Câtul: ‘ + cat + ‘\n’ +
‘Restul: ‘ + rest
);
„>
Apasă-mă
</button>


</body>
</html>

Lecția 4.4: Citire și afișare

Citirea numerelor de la tastatură

Introduceți două numere și apăsați butonul pentru a le afișa.

Codul HTML:

<!DOCTYPE html>
<html lang=”ro”>
<head>
<meta charset=”UTF-8″>
<title>Lecția 4.4: Citire și afișare</title>
<style>
body {
font-family: Calibri, sans-serif;
background-color: #FFF3CD;
color: #CC0000;
padding: 20px;
font-size: 16px;
}
input {
padding: 5px;
margin: 5px 10px 5px 0;
width: 100px;
}
button {
padding: 8px 16px;
background-color: #CC0000;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#rezultat {
margin-top: 20px;
background-color: #fff;
border-left: 5px solid #CC0000;
padding: 10px;
}
</style>
</head>
<body>

<h3>Citirea numerelor de la tastatură</h3>

<p>Introduceți două numere și apăsați butonul pentru a le afișa.</p>

<input type=”number” id=”numar1″ placeholder=”Nr. 1:”>
<input type=”number” id=”numar2″ placeholder=”Nr. 2:”>
<button onclick=”citesteSiAfiseaza()”>Afișează</button>

<div id=”rezultat”></div>

<script>
function citesteSiAfiseaza() {
let a = Number(document.getElementById(‘numar1’).value);
let b = Number(document.getElementById(‘numar2’).value);

document.getElementById(‘rezultat’).innerHTML =
‘<strong>Primul număr:</strong> ‘ + a + ‘<br>’ +
‘<strong>Al doilea număr:</strong> ‘ + b;
}
</script>

</body>
</html>

📘 Explicații:

🔶 Forma generală:

  <input type="number" id="valoare">
  <button onclick="functie()">Trimite</button>

  <script>
    function functie() {
      let x = Number(document.getElementById('valoare').value);
      // Aici folosim x în continuare...
    }
  </script>

✅ Efectul fiecărei instrucțiuni:

  • <input type="number" id="valoare"> – creează un câmp în care elevul introduce un număr.
  • <button onclick="functie()"> – când elevul apasă butonul, se apelează funcția JavaScript.
  • document.getElementById('valoare').value – preia valoarea introdusă de utilizator (sub formă de text).
  • Number(...) – transformă textul într-un număr real.
  • let x = ... – salvează valoarea în variabila x.

🧠 Observații importante:

  • Orice valoare introdusă este inițial un string (text), chiar dacă e număr.
  • De aceea folosim Number(...) pentru conversie la tipul number.
  • Dacă nu se face conversia, poți obține concatenare în loc de adunare!

✔️ Această metodă este preferabilă față de prompt() pentru aplicații educaționale moderne.

Operații cu două numere nenule

Operații cu două numere nenule

Introduceți două numere nenule, apoi apăsați butonul pentru a vedea calculele.

Codul HTML:

<!DOCTYPE html>
<html lang=”ro”>
<head>
<meta charset=”UTF-8″>
<title>Operații cu două numere nenule</title>
<style>
body {
font-family: Calibri, sans-serif;
background-color: #FFF3CD;
color: #CC0000;
padding: 20px;
font-size: 16px;
}
input {
padding: 5px;
margin-right: 10px;
width: 120px;
}
button {
padding: 8px 16px;
background-color: #CC0000;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
#rezultat {
margin-top: 20px;
background-color: #fff;
border-left: 5px solid #CC0000;
padding: 15px;
}
</style>
</head>
<body>

<h3>Operații între două numere nenule</h3>

<p>Introduceți două numere nenule, apoi apăsați butonul pentru a vedea calculele.</p>

<input type=”number” id=”numar1″ placeholder=”Nr. 1:”>
<input type=”number” id=”numar2″ placeholder=”Nr. 2:”>
<button onclick=”calculeaza()”>Calculează</button>

<div id=”rezultat”></div>

<script>
function calculeaza() {
let a = Number(document.getElementById(‘numar1’).value);
let b = Number(document.getElementById(‘numar2’).value);
let mesaj = „”;

if (a === 0 || b === 0) {
mesaj = „<strong>⚠️ Te rugăm să introduci două numere nenule!</strong>”;
} else {
let suma = a + b;
let diferenta = a – b;
let produs = a * b;
let catul = a / b;

mesaj =
„<strong>Suma:</strong> ” + suma + „<br>” +
„<strong>Diferența:</strong> ” + diferenta + „<br>” +
„<strong>Produsul:</strong> ” + produs + „<br>” +
„<strong>Câtul:</strong> ” + catul.toFixed(2);
}

document.getElementById(‘rezultat’).innerHTML = mesaj;
}
</script>

</body>
</html>

 

 

 

📘 Explicații pentru programul: „Citim două numere nenule – operații matematice”

✔️ Scopul: Programul citește două numere de la utilizator, verifică dacă sunt nenule și afișează: suma, diferența, produsul și câtul.

<input type="number" id="numar1"> și id="numar2"

  • Două câmpuri unde utilizatorul poate introduce numere reale sau întregi.
  • Atributele id="numar1" și id="numar2" permit identificarea câmpurilor în JavaScript.

<button onclick="calculeaza()">Calculează</button>

  • Creează un buton care, la apăsare, apelează funcția calculeaza().

🧠 În interiorul funcției calculeaza():

  • let a = Number(document.getElementById('numar1').value);
    → Preia valoarea introdusă în primul câmp și o convertește în număr.
  • let b = Number(document.getElementById('numar2').value);
    → La fel, dar pentru al doilea câmp.
  • if (a === 0 || b === 0)
    → Verifică dacă cel puțin unul dintre numere este 0. Dacă da, se afișează un mesaj de avertizare.
  • În caz contrar, se calculează:
    • suma = a + b
    • diferenta = a - b
    • produs = a * b
    • catul = a / b – se folosește catul.toFixed(2) pentru a afișa doar 2 zecimale.
  • Toate rezultatele sunt afișate în elementul <div id="rezultat"> folosind:
    document.getElementById('rezultat').innerHTML = ...

✔️ Avantajul acestei metode: Nu folosește prompt() sau alert(), iar elevii interacționează direct cu elemente vizuale (input + buton + afișare). Este ideală pentru aplicații moderne și intuitive.