Cum să folosești JavaScript cu HTML pentru a crea pagini dinamice?

JavaScript și HTML sunt două dintre cele mai importante tehnologii utilizate în dezvoltarea web-ului. În timp ce HTML este limbajul de marcare care structurează conținutul unei pagini web, JavaScript adaugă interactivitate și funcționalități dinamice. Dacă ești începător sau chiar un dezvoltator experimentat, probabil te-ai întrebat cum să folosești JavaScript împreună cu HTML pentru a construi aplicații web mai complexe și interactive. Ei bine, acest articol îți va arăta pașii și exemplele necesare pentru a integra JavaScript cu HTML.

În acest ghid, vei învăța cum să folosești JavaScript în documentele tale HTML, printr-o serie de exemple simple și aplicații practice. Vom explora cum să încorporezi scripturi JavaScript într-o pagină HTML, cum să manipulezi DOM-ul (Document Object Model) și cum să creezi funcționalități de bază, cum ar fi validarea formularelor, gestionarea evenimentelor și multe altele.

Ce este JavaScript și cum funcționează cu HTML?

JavaScript este un limbaj de programare folosit pentru a crea pagini web interactive. Acesta poate fi utilizat pentru a adăuga funcționalități dinamice, cum ar fi animații, validări de formular, interacțiuni cu utilizatorul și multe altele. Pe de altă parte, HTML (HyperText Markup Language) este utilizat pentru a structura și a reda conținutul paginii web. Împreună, JavaScript și HTML sunt esențiale pentru crearea de experiențe web interactive și moderne.

În mod fundamental, HTML structurează pagina web, iar JavaScript adaugă comportamente dinamice. JavaScript poate interacționa cu HTML printr-un obiect numit DOM (Document Object Model), care reprezintă structura paginii web sub forma unui arbore de elemente. Acesta permite JavaScript-ului să acceseze și să modifice conținutul paginii, să adauge evenimente și să actualizeze în timp real anumite secțiuni ale paginii.

Cum să integrezi JavaScript într-o pagină HTML?

Există mai multe moduri de a integra JavaScript într-o pagină HTML. Cel mai simplu mod este să adaugi scriptul direct în interiorul documentului HTML, fie în secțiunea ``, fie înainte de închiderea etichetei ``. Vom explora ambele metode în continuare:

1. Integrarea JavaScript în secțiunea ``

Poți adăuga scriptul JavaScript în secțiunea `` a documentului HTML, însă acest lucru nu este recomandat pentru scripturi care trebuie să manipuleze DOM-ul, deoarece scriptul va fi încărcat înainte ca toate elementele HTML să fie disponibile. Totuși, pentru scripturi care nu depind de DOM, această metodă poate fi utilă. Iată un exemplu de bază:

    
    
    
    


    Click pe mine

În acest exemplu, atunci când utilizatorul apasă pe butonul din pagină, se va afișa un mesaj de alertă. Funcția `salut()` este definită în secțiunea `` și este apelată de evenimentul `onclick` al butonului.

2. Integrarea JavaScript înainte de închiderea tagului ``

Este recomandat să adaugi scripturile JavaScript înainte de închiderea tagului ``. Acest lucru asigură că toate elementele HTML au fost încărcate înainte ca scriptul să înceapă să ruleze, ceea ce poate preveni erori legate de manipularea DOM-ului. Iată un exemplu:

    
    
    


    Click pe mine

    

În acest exemplu, scriptul JavaScript se află la finalul documentului HTML. Folosim metoda `getElementById` pentru a selecta butonul și pentru a îi adăuga un eveniment de tip `onclick`. Când butonul este apăsat, se va afișa un mesaj de alertă.

Manipularea DOM-ului cu JavaScript

Unul dintre cele mai puternice aspecte ale JavaScript-ului este capacitatea sa de a manipula DOM-ul. DOM-ul reprezintă structura internă a unei pagini HTML, iar JavaScript îți permite să adaugi, să modifici sau să elimini elemente din această structură. Iată un exemplu simplu de manipulare a DOM-ului:

    
    
    


    
Bine ai venit!
    Schimbă titlul

    

În acest exemplu, când utilizatorul apasă pe butonul "Schimbă titlul", funcția `schimbaTitlu()` va modifica textul din elementul `

` cu id-ul `titlu`. Astfel, utilizatorul va vedea noul text pe pagină fără a fi nevoie să reîncarce pagina.

Evenimente JavaScript și interacțiunea cu utilizatorul

JavaScript permite gestionarea evenimentelor utilizatorului, precum clicuri, mișcări ale mouse-ului, tastări, și altele. Aceste evenimente pot fi utilizate pentru a adăuga interactivitate aplicațiilor web. De exemplu, poți adăuga un eveniment pentru a schimba culoarea unui buton când utilizatorul trece mouse-ul peste el:

    
    
    


    Pasează mouse-ul aici

    

În acest exemplu, folosim evenimentele `onmouseover` și `onmouseout` pentru a schimba culoarea de fundal a butonului atunci când utilizatorul trece cu mouse-ul peste el și pentru a-l restabili la culoarea inițială când mouse-ul părăsește butonul.

Concluzie

În acest articol, am învățat cum să folosești JavaScript cu HTML pentru a crea pagini web interactive și dinamice. Am explora diferite moduri de a integra JavaScript într-o pagină HTML, precum și cum să manipulezi DOM-ul și să gestionezi evenimentele utilizatorului. Aceste cunoștințe sunt esențiale pentru dezvoltarea de aplicații web moderne, iar cu puțină practică, vei putea crea site-uri web mai interesante și interactive.