JavaScript in HTML gebruiken om interactieve webpagina's te maken

Gebruik-JavaScript-in-HTML om interactieve webpagina's te maken-1

HTML, CSS en JavaScript zijn de drie belangrijkste talen voor front-endontwikkeling. HTML is een opmaaktaal, terwijl CSS een opmaaktaal is.

JavaScript is een objectgeoriënteerde programmeertaal die vooral wordt gebruikt om de clientzijde van web- en mobiele applicaties te maken. Deze open-source dynamische taal is uitgegroeid tot een van de meest gebruikte programmeertalen dankzij de flexibiliteit en het gebruiksgemak.

Met HTML5 en CSS3 kun je statische websites maken. Maar om interactiviteit aan zo'n site toe te voegen, moet je een programmeertaal zoals JavaScript gebruiken die de browsers begrijpen.

In dit artikel wordt uitgelegd waarom je JavaScript met HTML moet gebruiken, wat de verschillende manieren zijn om JavaScript-code aan HTML toe te voegen en wat de beste manier is om de twee talen te combineren.

Waarom het cruciaal is om JavaScript in HTML te gebruiken

JavaScript-in-HTML om interactieve webpagina's te maken

Interactiviteit toevoegen: Interactiviteit is in realtime reageren op gebruikersinvoer/acties zonder de browser opnieuw te laden. Je kunt bijvoorbeeld een teller hebben die elke keer dat erop wordt geklikt met één stijgt. Een ander voorbeeld kan een reactie zijn die gebruikers vertelt dat hun feedback telkens is verzonden als ze op de verzendknop klikken.
Validatie aan de klantzijde: Je kunt JavaScript gebruiken om de juiste gegevens op formulieren vast te leggen. Je kunt deze programmeertaal bijvoorbeeld gebruiken om gebruikersinvoer op een aanmeldingspagina te valideren aan de hand van het e-mailformaat, de lengte van het wachtwoord en de te gebruiken combinatie van tekens.
DOM-bewerking: 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.
Browseroverschrijdende 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: Je begrijpt de basis HTML-tagskunt knoppen toevoegen en formulieren maken met HTML.
Basiskennis van CSS: Je begrijpt CSS-concepten zoals id, class en element selectors.
Een code-editor: Je kunt een code-editor gebruiken zoals VS Code of Atom. Je kunt ook een online JavaScript-compiler gebruiken als je geen software op je systeem wilt installeren.

JavaScript gebruiken in HTML

Je kunt drie belangrijke benaderingen gebruiken om JavaScript-code toe te voegen aan HTML. We bekijken elke aanpak en waar deze het beste past.

#1. Code insluiten tussen tags

Met deze aanpak kun je JavaScript- en HTML-codes in hetzelfde bestand (HTML-bestand) plaatsen. We kunnen beginnen met het maken van een projectmap waarin we demonstreren hoe het werkt. Je kunt deze commando's gebruiken om te beginnen;

mkdir javascript-html-playground

cd javascript-html-playground

Maak twee bestanden; index.html en style.css

Voeg deze startcode toe aan het HTML-bestand;

<!DOCTYPE html>

<html>

 <head>

 <meta charset="utf-8" />

 <title></title>

 <link rel="stylesheet" href="style.css" type="text/css" />

 </head>

 <body>

 <div class="form-container">

 <form action="">

 <label for="name">Naam:</label>

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

 <br />

 <label for="email">E-mail:</label>

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

 <br />

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

 <textarea

 id="message"

 name="message"

 rows="5"

 cols="30"

 required

></textarea>

 <br />

 <input type="submit" value="Stuur  in" />

 <input type="hidden" name="trp-form-language" value="nl"/></form>

 </div>

 </body>

</html&gt>

Voeg deze startcode 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 gerenderd, ziet het er ongeveer zo uit;

We kunnen nu een eenvoudige JavaScript-code toevoegen die "ingediend" zegt wanneer je op de verzendknop klikt. De gerefactureerde HTML-code met JavaScript wordt;

<!DOCTYPE html>

<html>

 <head>

 <meta charset="utf-8" />

 <title></title>

 <link rel="stylesheet" href="style.css" type="text/css" />

 </head>

 <body>

 <div class="form-container">

 <form action="">

 <label for="name">Naam:</label>

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

 <br />

 <label for="email">E-mail:</label>

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

 <br />

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

 <textarea

 id="message"

 name="message"

 rows="5"

 cols="30"

 required

></textarea>

 <br />

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

 <input type="hidden" name="trp-form-language" value="nl"/></form>

 </div>

 <script>

 function submitted() {

 alert("submitted");

 }

 </script>

 </body>

</html&gt>

Als je op de verzendknop klikt, krijg je iets wat hierop lijkt;

Voordelen van het insluiten van JavaScript-code tussen -tags

Snel te implementeren: Werken aan hetzelfde bestand kan je tijd besparen omdat je kunt verwijzen naar je JavaScript-code vanuit HTML-code in hetzelfde bestand.
Gemakkelijk te lezen code: De aanwezigheid van -tags scheidt HTML van JavaScript-codes, waardoor deze gemakkelijker te lezen en te debuggen zijn.

Nadelen van het invoegen van JavaScript-code tussen -tags

Maakt het moeilijk om code te hergebruiken: Als je meerdere formulieren in je app hebt, betekent dit dat je JavaScript-code voor elk formulier moet maken.
Vertraagt de prestaties: Grote codeblokken in het HTML-document kunnen laadsnelheden vertragen.

#2. Inline code door JavaScript-code rechtstreeks in HTML te gebruiken

In plaats van de bovenstaande JavaScript-code in te sluiten in -tags, kun je deze rechtstreeks aan de HTML-code toevoegen. We gebruiken dezelfde HTML-code en stijlblad (style.css).

<!DOCTYPE html>

<html>

 <head>

 <meta charset="utf-8" />

 <title></title>

 <link rel="stylesheet" href="style.css" type="text/css" />

 </head>

 <body>

 <div class="form-container">

 <form action="">

 <label for="name">Naam:</label>

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

 <br />

 <label for="email">E-mail:</label>

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

 <br />

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

 <textarea

 id="message"

 name="message"

 rows="5"

 cols="30"

 required

></textarea>

 <br />

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

 <input type="hidden" name="trp-form-language" value="nl"/></form>

 </div>

 </body>

</html&gt>

Als je op submit klikt, verschijnt er een klein venster in je browser met de tekst "inline indienen"..

Voordelen van het toevoegen van JavaScript als inline code

Snel te implementeren: Je 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 je app meerdere formulieren heeft, maak je JavaScript-code voor elk formulier.
Vertraagt de prestaties: Grote codeblokken in het HTML-document kunnen laadsnelheden vertragen.
Leesbaarheid van de code: Naarmate de codebase blijft groeien, neemt de leesbaarheid van de code af.

#3. Een extern JavaScript-bestand maken

Naarmate je applicatie groeit, zul je merken dat het geen goed idee is om JavaScript-code rechtstreeks aan een HTML-bestand toe te voegen. Je hebt ook kans op webpagina's met lage laadsnelheden als je veel code in je HTML-bestand hebt staan.

Maak een nieuw bestand script.js om je JavaScript-code in op te slaan.

Importeer het script.js bestand in het HTML bestand;

<head>

 <script src="script.js"></script>

</head&gt

De nieuwe bijgewerkte HTML-pagina zal deze code hebben;

<!DOCTYPE html>

<html>

 <head>

 <meta charset="utf-8" />

 <title></title>

 <link rel="stylesheet" href="style.css" type="text/css" />

 <script src="script.js"></script>

 </head>

 <body>

 <div class="form-container">

 <form action="">

 <label for="name">Naam:</label>

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

 <br />

 <label for="email">E-mail:</label>

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

 <br />

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

 <textarea

 id="message"

 name="message"

 rows="5"

 cols="30"

 required

></textarea>

 <br />

 <input type="submit" value="Stuur  in" />

 <input type="hidden" name="trp-form-language" value="nl"/></form>

 </div>

 </body>

</html&gt>

Voeg deze code toe aan het Bestscript.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 event listener die wacht tot het DOMContentLoaded evenement afgaat.
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 (de pagina verversen of naar een nieuwe pagina navigeren) wanneer de submit-event wordt geactiveerd.
Er wordt een bericht "extern JS-blad verzenden" (externe JS-blad verzenden) ) weergegeven zodra de submit-event is geactiveerd.

JavaScript in HTML: Beste praktijken

Minimaliseer bestandsgroottes: Hoe groter het bestand, hoe meer tijd het kost om te laden in de browser. Door te minimaliseren verwijder je alle ongewenste tekens in de broncode zonder de betekenis of prestaties te veranderen. Je kunt tools als Yahoo YUI Compressor en HTMLMinifier gebruiken om een compacte codebase te maken.
Houd je code georganiseerd: Dit maakt je code makkelijk te lezen en te onderhouden. Je kunt extensies zoals Mooier gebruiken om uw code te organiseren.
Gebruik externe bibliotheken: Als een bibliotheek een bepaalde taak voor je app kan uitvoeren, hoef je de code niet helemaal opnieuw te schrijven. Vermijd echter het gebruik van meerdere bibliotheken die dezelfde doelen bereiken op hetzelfde project.
JavaScript-plaatsing optimaliseren: Als je van plan bent JavaScript-code toe te voegen aan je HTML-bestand, zorg er dan voor dat deze na de HTML-code komt. Plaats het JavaScript tussen <script>-tags voordat je de </body>-tag sluit. Dit zorgt ervoor dat HTML-inhoud zoals tekst, afbeeldingen en tabellen eerst worden geladen voordat JavaScript wordt geladen, waardoor de laadsnelheid wordt verbeterd.</script>

Inpakken

Je kunt nu eenvoudig JavaScript met HTML gebruiken om interactieve webpagina's te maken. De aanpak die je gebruikt om de twee technologieën samen te voegen, hangt af van de aard van de webapp die je maakt. Je kunt bijvoorbeeld inline code gebruiken als je een kleine app maakt. Een grote app heeft echter een extern JavaScript-bestand nodig dat je importeert in je HTML-bestand.

Bekijk JavaScript-tabelbibliotheken die je vandaag kunt gebruiken.

Titus Kamunya

Auteur