Dezvoltarea front-end se bazează pe trei tehnologii fundamentale: HTML, CSS și JavaScript. HTML este un limbaj de marcare care structurează conținutul web, în timp ce CSS se ocupă de stilizarea acestui conținut, definind aspectul vizual al paginii.
JavaScript, un limbaj de programare orientat pe obiecte, este esențial pentru a crea interactivitate în aplicațiile web și mobile. Fiind un limbaj dinamic și open-source, a câștigat popularitate datorită adaptabilității și ușurinței sale de înțelegere.
Cu ajutorul HTML5 și CSS3, se pot construi site-uri web statice. Însă, pentru a dinamiza aceste site-uri și a le oferi o interacțiune îmbunătățită, este necesar un limbaj de programare, cum ar fi JavaScript, pe care browserele îl pot interpreta.
Acest articol își propune să exploreze importanța utilizării JavaScript împreună cu HTML, modalitățile prin care se poate integra cod JavaScript într-un document HTML, și cele mai eficiente practici pentru a combina aceste două tehnologii.
De ce este indispensabilă folosirea JavaScript în HTML?
- Interacțiune sporită: JavaScript permite ca elementele de pe o pagină web să răspundă la acțiunile utilizatorilor în timp real, fără a fi nevoie de reîncărcarea completă a paginii. Un exemplu ar fi un contor care se actualizează la fiecare clic sau un mesaj care confirmă trimiterea unui formular.
- Validare directă: JavaScript poate fi folosit pentru a valida informațiile introduse în formulare chiar în browserul utilizatorului. Se pot verifica, de exemplu, formatul unui e-mail, lungimea unei parole sau combinația de caractere utilizată.
- Manipularea DOM-ului: Modelul Obiect al Documentului (DOM) oferit de JavaScript permite modificarea dinamică a structurii și conținutului unei pagini web. Acesta este un instrument puternic pentru a actualiza paginile în timp real, în funcție de interacțiunile utilizatorului.
- Compatibilitate extinsă: JavaScript este compatibil cu toate browserele moderne. Astfel, paginile create cu HTML, CSS și JavaScript vor funcționa corect pe diverse platforme și browsere.
Cerințe preliminare
- Cunoștințe de bază HTML: Familiaritate cu etichetele HTML fundamentale, cum ar fi adăugarea de butoane și crearea de formulare.
- Cunoștințe de bază CSS: Înțelegerea conceptelor CSS, inclusiv a selectorilor de ID, clasă și element.
- Un editor de cod: Un editor precum VS Code sau Atom este recomandat, dar se poate folosi și un compilator JavaScript online pentru a evita instalarea de software pe sistem.
Metode de integrare a JavaScript în HTML
Există trei moduri principale de a adăuga cod JavaScript într-un document HTML. Vom analiza fiecare abordare, identificând cele mai potrivite situații pentru utilizarea lor.
#1. Includerea codului între etichetele <script> și </script>
Această metodă presupune scrierea codului JavaScript direct în fișierul HTML. Pentru a demonstra cum funcționează, vom crea un director de proiect, folosind următoarele comenzi:
mkdir javascript-html-playground cd javascript-html-playground
În acest director, vom crea două fișiere: `index.html` și `style.css`.
În fișierul HTML, vom adăuga următorul cod de bază:
<html>
<head>
<meta charset="utf-8" />
<title>Exemplu Formular</title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Nume:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Mesaj:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Trimite" />
</form>
</div>
</body>
</html>
În fișierul CSS, vom adăuga codul de stilizare:
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
display: block;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 8px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 5px 10px;
border: none;
border-radius: 2.5px;
font-size: 8px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
Astfel, vom obține o pagină web cu un formular simplu.
Acum, vom introduce un cod JavaScript simplu care afișează un mesaj de confirmare la trimiterea formularului. Codul HTML, actualizat cu JavaScript, va fi:
<html>
<head>
<meta charset="utf-8" />
<title>Exemplu Formular cu JS</title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Nume:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Mesaj:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Trimite" onclick="submitted()" />
</form>
</div>
<script>
function submitted() {
alert("Formularul a fost trimis!");
}
</script>
</body>
</html>
Acum, când se apasă butonul de trimitere, se va afișa o alertă.
Avantajele includerii codului JavaScript între etichetele <script> și </script>
- Implementare rapidă: Codul JavaScript este ușor de accesat din același fișier HTML, ceea ce poate reduce timpul de dezvoltare.
- Lizibilitate îmbunătățită: Etichetele <script> facilitează separarea codului HTML de cel JavaScript, ceea ce ajută la citirea și depanarea codului.
Dezavantajele includerii codului JavaScript între etichetele <script> și </script>
- Dificultăți în reutilizarea codului: Dacă aplicația web are mai multe formulare, va fi necesar cod JavaScript separat pentru fiecare dintre ele.
- Performanță redusă: Blocurile mari de cod JavaScript din documentul HTML pot încetini încărcarea paginii.
#2. Cod inline, prin adăugarea codului JavaScript direct în HTML
În loc să înconjurăm codul JavaScript cu etichetele <script> și </script>, putem introduce direct codul în HTML. Vom folosi același fișier HTML și același CSS (style.css).
<html>
<head>
<meta charset="utf-8" />
<title>Exemplu Formular Inline JS</title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Nume:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Mesaj:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Trimite" onclick="alert('Trimitere inline')" />
</form>
</div>
</body>
</html>
La apăsarea butonului „Trimite”, va apărea o alertă cu textul „Trimitere inline”.
Avantajele codului JavaScript inline
- Dezvoltare rapidă: Nu mai este necesar să alternăm între mai multe fișiere.
- Ideal pentru aplicații mici: Această abordare funcționează bine pentru aplicații simple care nu necesită o interacțiune complexă.
Dezavantajele codului JavaScript inline
- Cod nereutilizabil: Codul JavaScript trebuie creat separat pentru fiecare formular.
- Performanță mai slabă: Blocurile mari de cod inline pot reduce viteza de încărcare a paginii.
- Lizibilitate redusă: Pe măsură ce proiectul crește, codul devine tot mai dificil de citit.
#3. Crearea unui fișier JavaScript extern
Pe măsură ce aplicația web se extinde, codul JavaScript inclus direct în HTML nu mai este cea mai bună soluție. De asemenea, un volum mare de cod în HTML poate duce la timpi de încărcare mai mari.
Pentru a remedia această problemă, putem crea un fișier separat, `script.js`, pentru a găzdui codul JavaScript.
Acest fișier se va importa în documentul HTML, după cum urmează:
<head> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head>
Pagina HTML actualizată va arăta astfel:
<html>
<head>
<meta charset="utf-8" />
<title>Exemplu Formular JS Extern</title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
<script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>
</head>
<body>
<div class="form-container">
<form>
<label for="name">Nume:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Mesaj:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Trimite" />
</form>
</div>
</body>
</html>
În fișierul `script.js`, vom adăuga următorul cod:
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("Formular trimis din fișier JS extern");
});
});
Acest cod JavaScript face următoarele:
- Un „ascultător de evenimente” așteaptă apariția evenimentului `DOMContentLoaded`.
- Funcția „callback” este executată după ce evenimentul `DOMContentLoaded` are loc.
- Codul selectează formularul cu ajutorul `querySelector`.
- Metoda `event.preventDefault()` este folosită pentru a bloca acțiunea implicită a formularului (reîncărcarea paginii sau navigarea către o altă pagină).
- Odată ce evenimentul „submit” este declanșat, se va afișa un mesaj.
Cele mai bune practici pentru utilizarea JavaScript în HTML
- Reducerea dimensiunii fișierelor: Un fișier mai mic se încarcă mai repede în browser. Minimizarea codului (eliminarea spațiilor, comentariilor și a altor caractere neesențiale) poate fi realizată cu ajutorul instrumentelor precum Yahoo YUI Compressor sau HTMLMinifier.
- Organizarea codului: Un cod bine structurat este mai ușor de citit și de întreținut. Extensii precum Prettier pot ajuta la organizarea codului.
- Utilizarea bibliotecilor externe: Dacă o bibliotecă poate realiza o anumită funcție pentru aplicația web, nu este necesar să scriem codul de la zero. Însă, este important să se evite folosirea mai multor biblioteci care fac același lucru.
- Optimizarea plasării JavaScript: Dacă codul JavaScript este inclus direct în fișierul HTML, asigurați-vă că acesta apare după codul HTML, ideal între etichetele <script>, chiar înainte de eticheta </body>. Acest lucru asigură că HTML, imaginile și celelalte elemente sunt încărcate primele, îmbunătățind performanța paginii.
Concluzie
JavaScript este un instrument puternic pentru a dinamiza și a oferi interactivitate paginilor web. Alegerea metodei de integrare a JavaScript (inline, intern sau extern) depinde de natura aplicației. Pentru proiecte mici, codul inline poate fi suficient. Însă, pentru aplicații web mai mari, este preferată utilizarea fișierelor JavaScript externe. Acest lucru ajută la o mai bună organizare a codului, la o performanță sporită și la o întreținere mai ușoară a aplicației.
Explorați, de asemenea, diverse biblioteci JavaScript pentru tabele și componente vizuale, care pot îmbunătăți experiența utilizatorilor.