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