HTML, CSS en JavaScript zijn de drie belangrijkste talen die worden gebruikt bij front-end ontwikkeling. HTML is een opmaaktaal, terwijl CSS een stijltaal is.
JavaScript is een objectgeoriënteerde programmeertaal die meestal wordt gebruikt bij het maken van de clientzijde van web- en mobiele applicaties. Deze open-source dynamische taal is een van de meest gebruikte programmeertalen geworden vanwege de flexibiliteit en het gemak van begrip.
Met HTML5 en CSS3 kun je statische websites maken. Om interactiviteit aan een dergelijke site toe te voegen, moet u echter een programmeertaal zoals JavaScript gebruiken die de browsers begrijpen.
In dit artikel wordt uitgelegd waarom u JavaScript met HTML moet gebruiken, de verschillende benaderingen voor het toevoegen van JavaScript-code aan HTML en de best practices voor het combineren van de twee talen.
Waarom het cruciaal is om JavaScript in HTML te gebruiken
- Interactiviteit toevoegen: Interactiviteit reageert in realtime op gebruikersinvoer/acties zonder de browser opnieuw te laden. U kunt bijvoorbeeld een teller hebben die met één toeneemt telkens wanneer erop wordt geklikt. Een ander voorbeeld kan een reactie zijn die gebruikers vertelt dat hun feedback is verzonden telkens wanneer ze op de verzendknop klikken.
- Validatie aan clientzijde: u kunt JavaScript gebruiken om de juiste gegevens op formulieren vast te leggen. U kunt deze programmeertaal bijvoorbeeld gebruiken om gebruikersinvoer op een aanmeldingspagina te valideren op basis van het e-mailformaat, de wachtwoordlengte en de combinatie van te gebruiken tekens.
- DOM-manipulatie: JavaScript biedt het Document Object Model (DOM), waarmee de inhoud van een webpagina eenvoudig dynamisch kan worden gewijzigd. Met deze technologie wordt de inhoud van een pagina automatisch bijgewerkt op basis van de invoer van de gebruiker zonder de webpagina opnieuw te laden.
- Cross-browser compatibiliteit: JavaScript is compatibel met alle moderne browsers. Webpagina’s die zijn gemaakt met HTML, CSS en JavaScript werken dus perfect in verschillende browsers.
Vereisten
- Basiskennis van HTML: U begrijpt basis HTML-tags, kunt knoppen toevoegen en formulieren maken met behulp van HTML.
- Basiskennis van CSS: u begrijpt CSS-concepten zoals id-, klasse- en elementkiezers.
- Een code-editor: u kunt een code-editor gebruiken, zoals VS Code of Atom. U kunt ook een online JavaScript-compiler gebruiken als u geen software op uw systeem wilt installeren.
Hoe JavaScript in HTML te gebruiken
U kunt drie belangrijke benaderingen gebruiken om JavaScript-code aan HTML toe te voegen. We onderzoeken elke aanpak en waar die het beste past.
#1. Code insluiten tussen tag
Met deze aanpak kunt u JavaScript- en HTML-codes in hetzelfde bestand (HTML-bestand) hebben. We kunnen beginnen met het maken van een projectmap waarin we laten zien hoe het werkt. U kunt deze opdrachten gebruiken om aan de slag te gaan;
mkdir javascript-html-playground cd javascript-html-playground
Maak twee bestanden; index.html en stijl.css
Voeg deze startercode toe aan het HTML-bestand;
<!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>
Voeg deze startercode toe aan je CSS-bestand;
.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;
}
Wanneer de webpagina wordt weergegeven, heb je zoiets;
We kunnen nu een eenvoudige JavaScript-code toevoegen die zegt “ingediend” wanneer u op de verzendknop klikt. De herwerkte HTML-code met JavaScript zal zijn;
<!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>
Wanneer u op de verzendknop klikt, krijgt u iets vergelijkbaars;
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>
Wanneer u op verzenden klikt, verschijnt er een klein venster in uw browser met de woorden "inline verzenden".
Voordelen van het toevoegen van JavaScript als inline code
- Snel te implementeren: u hoeft niet van het ene document naar het andere te gaan om HTML- en JavaScript-code te schrijven.
- Perfect voor een kleine app: Als je een kleine app hebt die niet veel interactiviteit vereist, is inline JavaScript een perfecte keuze.
Nadelen van het toevoegen van JavaScript als inline code
- De code is niet herbruikbaar: als uw app meerdere formulieren heeft, maakt u JavaScript-code voor elk formulier.
- Vertraagt de prestaties: grote codeblokken in het HTML-document kunnen de laadsnelheid vertragen.
- Codeleesbaarheid: Naarmate de codebase blijft groeien, neemt de leesbaarheid van de code af.
#3. Een extern JavaScript-bestand maken
Naarmate uw toepassing groeit, zult u merken dat het geen goed idee is om JavaScript-code rechtstreeks aan een HTML-bestand toe te voegen. Je hebt waarschijnlijk ook webpagina's met lage laadsnelheden als je veel code op je HTML-bestand hebt staan.
Maak een nieuw bestand script.js om uw JavaScript-code in op te nemen.
Importeer het bestand script.js in het HTML-bestand;
<head> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head>
De nieuwe bijgewerkte HTML-pagina zal deze code hebben;
<!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>
Voeg deze code toe aan het bestand script.js;
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("external JS sheet submit");
});
});
Dit JavaScript doet het volgende;
- We hebben een gebeurtenislistener die wacht tot de DOMContentLoaded-gebeurtenis wordt geactiveerd.
- Een callback-functie wordt uitgevoerd nadat de gebeurtenis DOMContentLoaded is geactiveerd.
- De code gebruikt querySelector om een formulier te kiezen.
- We gebruiken event.preventDefault() om te voorkomen dat de DOM het standaardgedrag kiest (pagina vernieuwen of naar een nieuwe pagina navigeren) wanneer de gebeurtenis Submit wordt geactiveerd.
- Een bericht "externe JS-bladverzending" wordt geactiveerd zodra de gebeurtenis Verzenden is gestart.
JavaScript in HTML: praktische tips
- Bestandsgrootte verkleinen: hoe groter de bestandsgrootte, hoe meer tijd het kost om in de browser te laden. Minificeren verwijdert alle ongewenste tekens in de broncode zonder de betekenis of prestaties ervan te veranderen. U kunt tools zoals Yahoo YUI Compressor en HTMLMinifier gebruiken om een compacte codebase te maken.
- Houd uw code georganiseerd: dit maakt uw code gemakkelijk te lezen en te onderhouden. U kunt extensies zoals Prettier gebruiken om uw code te ordenen.
- Gebruik externe bibliotheken: als een bibliotheek een bepaalde taak voor uw app kan uitvoeren, hoeft u de code niet helemaal opnieuw te schrijven. Vermijd echter het gebruik van meerdere bibliotheken die dezelfde doelen bereiken in hetzelfde project.
- Optimaliseer JavaScript-plaatsing: als u van plan bent JavaScript-code aan uw HTML-bestand toe te voegen, zorg er dan voor dat deze na de HTML-code komt. Plaats de JavaScript tussen