Programare web

O pagină web combină structură, prezentare și comportament. HTML definește conținutul și semnificația elementelor, CSS stabilește aspectul, iar JavaScript poate reacționa la acțiuni și modifica pagina. Un formular cu două numere poate trimite datele către un program sau le poate prelucra în browser, în funcție de arhitectura aplicației.

O pagină web combină trei straturi. HTML definește conținutul și semnificația elementelor, CSS stabilește aspectul, iar JavaScript adaugă comportamentul: reacționează la acțiuni și modifică pagina. HTML nu execută singur un algoritm și nu calculează nimic la apăsarea unui buton. Un formular poate trimite datele către un program de pe server sau le poate prelucra în browser, în funcție de arhitectura aplicației. Într-un proiect web, conținutul, interacțiunea și datele trimise se verifică separat.

Exemplul 1 — structura fără comportament.

<label for="numar">Număr</label>
<input id="numar" type="number">
<button type="button">Calculează</button>

Fragmentul creează un câmp și un buton, dar apăsarea butonului nu calculează încă nimic: trebuie adăugat un comportament. Atributul for leagă eticheta de câmpul cu id corespunzător, astfel că un clic pe etichetă selectează câmpul. Dacă utilizatorul introduce 3, browserul îl afișează în câmp, însă valoarea citită din câmp este textul „3”, iar un program care dorește să calculeze trebuie să o interpreteze ca număr.

Exemplul 2 — HTML, CSS și JavaScript împreună. Pagina citește valoarea din casetă când se apasă butonul și afișează dublul numeric:

<input id="numar" type="number" value="4">
<button id="calculeaza">Calculează</button>
<p id="rezultat"></p>
<style>button { color: blue; }</style>
<script>
document.getElementById("calculeaza").onclick = function () {
  const x = Number(document.getElementById("numar").value);
  document.getElementById("rezultat").textContent = String(2 * x);
};
</script>

La clic, pentru valoarea 4, paragraful afișează 8. Regula CSS colorează textul butonului în albastru. Funcția Number transformă textul „4” în numărul 4; fără ea, "4" * 2 ar produce tot 8 prin conversie automată, dar "4" + 2 ar produce textul „42”.

Exemplul 3 — validarea intrării. Tipul type="number" nu elimină nevoia de validare. Un câmp lăsat gol are valoarea șirul vid, iar Number("") dă 0, deci pagina ar afișa 0 ca rezultat al unei intrări lipsă. Un text care nu este număr dă NaN:

<script>
function dublu(text) {
  if (text.trim() === "") return "Introduceți un număr";
  const x = Number(text);
  if (Number.isNaN(x)) return "Valoare invalidă";
  return String(2 * x);
}
console.log(dublu("4"), dublu(""), dublu("abc"));
</script>

Consola afișează 8 Introduceți un număr Valoare invalidă. Verificările se fac în ordinea: câmp gol, text nenumeric, apoi calculul.

Exemplul 4 — trimiterea datelor către server. Un formular poate fi prelucrat pe server, nu în browser:

<form action="/dublu" method="get">
  <input name="numar" type="number">
  <button type="submit">Trimite</button>
</form>

Dacă utilizatorul scrie 4 și apasă butonul, browserul cere adresa /dublu?numar=4. Numele din atributul name devine numele parametrului, iar valoarea din câmp devine valoarea lui. Metoda get așază datele în adresă, unde se văd și se pot memora ca adresă; metoda post le trimite în corpul cererii. De aceea o parolă nu se trimite prin get. Fără atributul name, câmpul nu ar fi trimis deloc.

Exemplul 5 — o listă de numere într-un singur câmp. Utilizatorul scrie 3,5,2, iar scriptul desparte textul la virgulă și convertește fiecare bucată:

<script>
function suma(text) {
  return text.split(",").map(Number).reduce((a, b) => a + b, 0);
}
console.log(suma("3,5,2"));
</script>

Se afișează 10. Dacă bucățile nu s-ar converti în numere, adunarea ar concatena textele și ar da 0352.

Caz-limită — scriptul rulat înaintea elementului. Browserul citește pagina de sus în jos. Dacă eticheta <script> din exemplul 2 ar fi plasată înaintea elementului cu id="calculeaza", apelul document.getElementById("calculeaza") ar întoarce null, iar atribuirea onclick ar opri scriptul cu o eroare, fiindcă elementul nu există încă. Soluția simplă este să așezi scriptul la sfârșitul corpului paginii, după elementele pe care le folosește. Eroarea apare în consola browserului, de aceea consola este primul loc în care se caută cauza unui buton care nu face nimic.

Greșeli frecvente

• Greșit: HTML execută singur algoritmul de calcul la apăsarea butonului.
  Corect: este necesar cod de comportament.
• Greșit: type="number" elimină orice nevoie de validare a datelor.
  Corect: aplicația trebuie să verifice intrarea relevantă.
• Greșit: CSS descrie structura semantică a formularului.
  Corect: HTML definește elementele, CSS aspectul.

Înainte și după