A JavaScript használata HTML-ben interaktív weboldalak létrehozásához

A HTML, a CSS és a JavaScript a három fő nyelv a front-end fejlesztésben. A HTML egy jelölőnyelv, míg a CSS egy stílusnyelv.

A JavaScript egy objektum-orientált programozási nyelv, amelyet leginkább webes és mobilalkalmazások kliensoldalának létrehozására használnak. Ez a nyílt forráskódú dinamikus nyelv az egyik leggyakrabban használt programozási nyelvvé vált rugalmasságának és könnyű megértésének köszönhetően.

A HTML5 és CSS3 segítségével statikus webhelyeket hozhat létre. Ahhoz azonban, hogy interaktivitást adjon egy ilyen webhelyhez, olyan programozási nyelvet kell használnia, mint például a JavaScript, amelyet a böngészők megértenek.

Ez a cikk elmagyarázza, miért kell a JavaScriptet HTML-lel használni, a JavaScript-kód HTML-hez való hozzáadásának különböző módjait, valamint a két nyelv kombinálásának bevált módszereit.

Tartalomjegyzék

Miért fontos a JavaScript használata HTML-ben?

Interaktivitás hozzáadása: Az interaktivitás a böngésző újratöltése nélkül, valós időben reagál a felhasználói bemenetekre/műveletekre. Például rendelkezhet egy számlálóval, amely minden kattintáskor eggyel nő. Egy másik példa lehet egy válasz, amely azt mondja a felhasználóknak, hogy visszajelzésüket minden alkalommal elküldték, amikor a küldés gombra kattintanak.
Kliensoldali érvényesítés: A JavaScript segítségével rögzítheti a megfelelő adatokat az űrlapokon. Ezzel a programozási nyelvvel például ellenőrizheti a felhasználói beviteleket a regisztrációs oldalon az e-mail formátum, a jelszó hossza és a használandó karakterek kombinációja alapján.
DOM-manipuláció: A JavaScript a dokumentumobjektum-modellt (DOM) kínálja, amely megkönnyíti a weboldal tartalmának dinamikus megváltoztatását. Ezzel a technológiával az oldal tartalma automatikusan frissül a felhasználói bevitelek alapján, a weboldal újratöltése nélkül.
Böngészők közötti kompatibilitás: A JavaScript minden modern böngészővel kompatibilis. A HTML, CSS és JavaScript használatával létrehozott weboldalak így tökéletesen működnek különböző böngészőkön.

A Kodi Fusion Repository 10 legjobb alternatívája

Előfeltételek

A HTML alapvető ismerete: Megérti az alapvető HTML-címkéket, tud gombokat hozzáadni és űrlapokat létrehozni HTML használatával.
A CSS alapvető ismerete: Megérti a CSS-fogalmakat, például az azonosítót, az osztályt és az elemválasztókat.
Kódszerkesztő: Használhat olyan kódszerkesztőt, mint a VS Code vagy az Atom. Használhat online JavaScript-fordítót is, ha nem szeretne szoftvert telepíteni a rendszerére.

A JavaScript használata HTML-ben

Három fő megközelítést használhat JavaScript kód hozzáadásához a HTML-hez. Minden megközelítést megvizsgálunk, és azt, hogy hol a legmegfelelőbb.

#1. Kód beágyazása a címke közé

Ez a megközelítés lehetővé teszi, hogy JavaScript- és HTML-kódok legyenek ugyanabban a fájlban (HTML-fájlban). Kezdhetjük egy projektmappa létrehozásával, ahol bemutatjuk, hogyan működik. A kezdéshez használhatja ezeket a parancsokat;

mkdir javascript-html-playground

cd javascript-html-playground

Hozzon létre két fájlt; index.html és style.css

Adja hozzá ezt az indítókódot a HTML-fájlhoz;

<!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>

Adja hozzá ezt az indítókódot a CSS-fájlhoz;

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

  }

A weboldal megjelenítése után valami ehhez hasonló lesz;

Mostantól hozzáadhatunk egy egyszerű JavaScript-kódot, amely a „beküldve” feliratot jelzi, amikor a küldés gombra kattint. Az újrafaktorált HTML kód JavaScripttel lesz;

<!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>

Ha rákattint a küldés gombra, valami ehhez hasonlót fog kapni;

Véletlenszerű számok generálása a Google Táblázatokban

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>
Ha rákattint az elküldésre, megjelenik egy kis ablak a böngészőjében a „beküldés” felirattal. 
A JavaScript soron belüli kódként való hozzáadásának előnyei

Gyorsan megvalósítható: Nem kell egyik dokumentumról a másikra váltania HTML- és JavaScript-kód írásához. 
Tökéletes kis alkalmazásokhoz: Ha olyan kis alkalmazásod van, amely nem igényel sok interaktivitást, a beépített JavaScript tökéletes választás. 

  Hogyan kerüljük el a csalást a metaverzumban
A JavaScript soron belüli kódként való hozzáadásának hátrányai

A kód nem használható fel újra: Ha alkalmazásának több űrlapja van, akkor minden űrlaphoz JavaScript-kódot kell létrehoznia.
Lassítja a teljesítményt: A HTML-dokumentum nagy kódblokkjai lelassíthatják a betöltési sebességet. 
Kód olvashatósága: Ahogy a kódbázis folyamatosan növekszik, a kód olvashatósága csökken. 

#3.  Külső JavaScript fájl létrehozása
Ahogy az alkalmazása növekszik, észre fogja venni, hogy nem jó ötlet közvetlenül JavaScript-kódot hozzáadni egy HTML-fájlhoz.  Valószínűleg alacsony betöltési sebességű weboldalai is lesznek, ha sok kód van a HTML-fájlban. 
Hozzon létre egy új script.js fájlt a JavaScript-kód hordozásához. 
Importálja a script.js fájlt a HTML-fájlba;
<head>

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

</head>
Az új frissített HTML oldalon ez a kód lesz;
<!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>
Adja hozzá ezt a kódot a script.js fájlhoz;
document.addEventListener("DOMContentLoaded", function() {

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

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

      event.preventDefault();

      alert("external JS sheet submit");

    });

  });
Ez a JavaScript a következőket teszi;

Van egy eseményfigyelőnk, amely a DOMContentLoaded esemény aktiválására vár. 
A DOMContentLoaded esemény elindítása után egy visszahívási funkció kerül végrehajtásra.
A kód a querySelector segítségével választ ki egy űrlapot.
Az event.preventDefault() segítségével megakadályozzuk, hogy a DOM az alapértelmezett viselkedést válassza (frissítse az oldalt vagy navigáljon egy új oldalra), amikor a küldési esemény aktiválódik. 
A „külső JS-lap elküldése” üzenet aktiválódik, amint a küldési esemény elindult. 


JavaScript HTML-ben: legjobb gyakorlatok

Fájlméretek csökkentése: Minél nagyobb a fájlméret, annál több időt vesz igénybe a böngészőben való betöltése.  A kicsinyítés eltávolítja az összes nem kívánt karaktert a forráskódból anélkül, hogy megváltoztatná annak jelentését vagy teljesítményét.  Kompakt kódbázis létrehozásához használhat olyan eszközöket, mint a Yahoo YUI Compressor és a HTMLMinifier. 
Tartsa rendszerezett kódját: így könnyen olvasható és karbantartható.  A kód rendszerezéséhez használhat olyan bővítményeket, mint a Prettier. 
Külső könyvtárak használata: Ha egy könyvtár el tud végezni egy bizonyos feladatot az alkalmazáshoz, akkor nem kell a kódot a semmiből megírni.  Ne használjon azonban több olyan könyvtárat, amelyek ugyanazokat a célokat érik el ugyanabban a projektben. 
JavaScript-elhelyezés optimalizálása: Ha JavaScript-kódot kíván hozzáadni HTML-fájljához, győződjön meg arról, hogy az a HTML-kód után kerüljön.  A  címke bezárása előtt helyezze el a JavaScriptet a

Miért fontos a JavaScript használata HTML-ben?

Előfeltételek

A JavaScript használata HTML-ben

#1. Kód beágyazása a és címke közé

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

A JavaScript soron belüli kódként való hozzáadásának előnyei

A JavaScript soron belüli kódként való hozzáadásának hátrányai

#3. Külső JavaScript fájl létrehozása

JavaScript HTML-ben: legjobb gyakorlatok

#1. Kód beágyazása a címke közé