Cum să utilizați JavaScript în HTML pentru a crea pagini web interactive

HTML, CSS și JavaScript sunt cele trei limbi principale utilizate în dezvoltarea front-end. HTML este un limbaj de marcare, în timp ce CSS este un limbaj de stilare.

JavaScript este un limbaj de programare orientat pe obiecte utilizat în principal în crearea părții client a aplicațiilor web și mobile. Acest limbaj dinamic open-source a devenit unul dintre cele mai utilizate limbaje de programare datorită flexibilității și ușurinței sale de înțelegere.

Cu HTML5 și CSS3, puteți crea site-uri web statice. Cu toate acestea, pentru a adăuga interactivitate la un astfel de site, trebuie să utilizați un limbaj de programare, cum ar fi JavaScript, pe care browserele îl înțeleg.

Acest articol va explica de ce trebuie să utilizați JavaScript cu HTML, diferitele abordări pentru adăugarea codului JavaScript în HTML și cele mai bune practici pentru combinarea celor două limbi.

Cuprins

De ce este crucial să folosiți JavaScript în HTML

Adăugați interactivitate: interactivitatea răspunde la intrările/acțiunile utilizatorului în timp real, fără a reîncărca browserul. De exemplu, puteți avea un contor care crește cu unul de fiecare dată când se face clic pe acesta. Un alt exemplu poate fi un răspuns care le spune utilizatorilor că feedbackul lor a fost trimis de fiecare dată când fac clic pe butonul de trimitere.
Validare la nivelul clientului: puteți utiliza JavaScript pentru a captura datele corecte din formulare. De exemplu, puteți utiliza acest limbaj de programare pentru a valida intrările utilizatorului pe o pagină de înscriere după formatul de e-mail, lungimea parolei și combinația de caractere de utilizat.
Manipulare DOM: JavaScript oferă Document Object Model (DOM), care facilitează modificarea dinamică a conținutului unei pagini web. Cu această tehnologie în vigoare, conținutul unei pagini este actualizat automat pe baza intrărilor utilizatorului, fără a reîncărca pagina web.
Compatibilitate între browsere: JavaScript este compatibil cu toate browserele moderne. Paginile web create folosind HTML, CSS și JavaScript vor funcționa astfel perfect pe diferite browsere.

Ce sunt Stablecoins? Și cum pot eșua

Cerințe preliminare

Înțelegerea de bază a HTML: înțelegeți etichetele HTML de bază, puteți adăuga butoane și puteți crea formulare folosind HTML.
Înțelegerea de bază a CSS: înțelegeți concepte CSS, cum ar fi selectorii de id, clasă și elemente.
Un editor de cod: puteți utiliza un editor de cod, cum ar fi VS Code sau Atom. De asemenea, puteți utiliza un compilator JavaScript online dacă nu doriți să instalați software pe sistemul dvs.

Cum se utilizează JavaScript în HTML

Puteți folosi trei abordări majore pentru a adăuga cod JavaScript în HTML. Explorăm fiecare abordare și unde se potrivește cel mai bine.

#1. Încorporarea codului între eticheta

Această abordare vă permite să aveți coduri JavaScript și HTML în același fișier (fișier HTML). Putem începe prin a crea un folder de proiect unde vom demonstra cum funcționează. Puteți utiliza aceste comenzi pentru a începe;

mkdir javascript-html-playground

cd javascript-html-playground

Creați două fișiere; index.html și style.css

Adăugați acest cod de pornire în fișierul HTML;

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></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">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" />

      </form>

    </div>

  </body>

</html>

Adăugați acest cod de pornire în fișierul dvs. CSS;

.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;

  }

Când pagina web este redată, veți avea așa ceva;

Acum putem adăuga un cod JavaScript simplu care spune „trimis” când faceți clic pe butonul de trimitere. Codul HTML refactorizat cu JavaScript va fi;

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></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">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" onclick="submitted()" />

      </form>

    </div>

    <script>

      function submitted() {

        alert("submitted");

      }

    </script>

  </body>

</html>

Când faceți clic pe butonul de trimitere, veți obține ceva similar cu acesta;

Analiza îmbunătățită explicată în 5 minute sau mai puțin

Pros of embedding JavaScript code between <script> … </script> tags
Fast to implement: Working on the same file can save you time as you can reference your JavaScript code from HTML code from the same file. 
Easy to read code: The presence of <script> tags separates HTML from JavaScript codes, making it easier to read and debug. 
Cons of embedding JavaScript code between <script> … </script> tags
Makes it hard to reuse code: If you have several forms in your app, it means you will create JavaScript code for every form.
Slows performance: Big code blocks on the HTML document can slow loading speeds. 
#2. Inline Code by using JavaScript code directly inside HTML
Instead of enclosing the above JavaScript code in <script> …. </script> tags, you can add it directly to the HTML code. We will use the same HTML code and style sheet (style.css). 
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></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">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" onclick="alert('inline submit')" />

      </form>

    </div>

  </body>

</html>
Când faceți clic pe Trimiteți, va apărea o fereastră mică în browser cu cuvintele „Trimitere în linie”. 
Avantajele adăugării JavaScript ca cod inline

Rapid de implementat: nu trebuie să treceți de la un document la altul pentru a scrie cod HTML și JavaScript. 
Perfect pentru o aplicație mică: dacă aveți o aplicație mică care nu necesită multă interactivitate, JavaScript inline este o alegere perfectă. 

Dezavantajele adăugării JavaScript ca cod inline

Codul nu este reutilizabil: dacă aplicația dvs. are mai multe forme, veți crea cod JavaScript pentru fiecare formular.
Încetinește performanța: blocurile mari de cod de pe documentul HTML pot încetini viteza de încărcare. 
Lizibilitatea codului: pe măsură ce baza de cod continuă să crească, lizibilitatea codului se reduce. 

  Antivirusul tău te spionează cu adevărat?
#3.  Crearea unui fișier JavaScript extern
Pe măsură ce aplicația dvs. crește, veți observa că adăugarea codului JavaScript direct la un fișier HTML nu este o idee bună.  De asemenea, este posibil să aveți pagini web cu viteze scăzute de încărcare atunci când aveți mult cod în fișierul HTML. 
Creați un nou fișier script.js pentru a transporta codul JavaScript. 
Importați fișierul script.js în fișierul HTML;
<head>

   <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>

</head>
Noua pagină HTML actualizată va avea acest cod;
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></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">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" />

      </form>

    </div>

  </body>

</html>
Adăugați acest cod în fișierul script.js;
document.addEventListener("DOMContentLoaded", function() {

    const form = document.querySelector("form");

    form.addEventListener("submit", function(event) {

      event.preventDefault();

      alert("external JS sheet submit");

    });

  });
Acest JavaScript face următoarele;

Avem un ascultător de evenimente care așteaptă să se declanșeze evenimentul DOMContentLoaded. 
O funcție de apel invers este executată după declanșarea evenimentului DOMContentLoaded.
Codul folosește querySelector pentru a alege un formular.
Folosim event.preventDefault() pentru a împiedica DOM-ul să aleagă comportamentul implicit (reîmprospătează pagina sau navighează la o pagină nouă) când este declanșat evenimentul de trimitere. 
Odată declanșat evenimentul de trimitere, este declanșat un mesaj „Trimitere foaie JS externă”. 


JavaScript în HTML: Cele mai bune practici

Reduceți dimensiunea fișierelor: cu cât dimensiunea fișierului este mai mare, cu atât este nevoie de mai mult timp pentru a se încărca în browser.  Minimizarea elimină toate caracterele nedorite din codul sursă fără a modifica sensul sau performanța acestuia.  Puteți folosi instrumente precum Yahoo YUI Compressor și HTMLMinifier pentru a crea o bază de cod compactă. 
Păstrați codul organizat: acest lucru vă va face ușor de citit și întreținut.  Puteți folosi extensii precum Prettier pentru a vă organiza codul. 
Utilizați biblioteci externe: dacă o bibliotecă poate îndeplini o anumită sarcină pentru aplicația dvs., nu este nevoie să scrieți codul de la zero.  Cu toate acestea, evitați utilizarea mai multor biblioteci care ating aceleași obiective în același proiect. 
Optimizați plasarea JavaScript: dacă intenționați să adăugați cod JavaScript în fișierul dvs. HTML, asigurați-vă că acesta vine după codul HTML.  Plasați JavaScript între etichetele

De ce este crucial să folosiți JavaScript în HTML

Cerințe preliminare

Cum se utilizează JavaScript în HTML

#1. Încorporarea codului între eticheta și

Pros of embedding JavaScript code between <script> … </script> tags

Cons of embedding JavaScript code between <script> … </script> tags

#2. Inline Code by using JavaScript code directly inside HTML

Avantajele adăugării JavaScript ca cod inline

Dezavantajele adăugării JavaScript ca cod inline

#3. Crearea unui fișier JavaScript extern

JavaScript în HTML: Cele mai bune practici

#1. Încorporarea codului între eticheta