Hvordan bruke JavaScript i HTML for å lage interaktive nettsider

0 Shares

HTML, CSS og JavaScript er de tre hovedspråkene som brukes i frontend-utvikling. HTML er et markup-språk, mens CSS er et styling-språk.

JavaScript er et objektorientert programmeringsspråk som for det meste brukes til å lage klientsiden til nett- og mobilapplikasjoner. Dette dynamiske språket med åpen kildekode har blitt et av de mest brukte programmeringsspråkene på grunn av dets fleksibilitet og enkle forståelse.

Med HTML5 og CSS3 kan du lage statiske nettsteder. Men for å legge til interaktivitet på et slikt nettsted, må du bruke et programmeringsspråk som JavaScript som nettleserne forstår.

Denne artikkelen vil forklare hvorfor du trenger å bruke JavaScript med HTML, de forskjellige tilnærmingene til å legge til JavaScript-kode i HTML, og de beste fremgangsmåtene for å kombinere de to språkene.

Innholdsfortegnelse

Hvorfor det er avgjørende å bruke JavaScript i HTML

Legg til interaktivitet: Interaktivitet svarer på brukerinndata/handlinger i sanntid uten å laste nettleseren på nytt. Du kan for eksempel ha en teller som øker med én hver gang den klikkes. Et annet eksempel kan være et svar som forteller brukerne at deres tilbakemelding har blitt sendt hver gang de klikker på send-knappen.
Validering på klientsiden: Du kan bruke JavaScript til å fange opp riktige data på skjemaer. Du kan for eksempel bruke dette programmeringsspråket til å validere brukerinndata på en registreringsside ved hjelp av e-postformatet, passordlengden og kombinasjonen av tegn som skal brukes.
DOM-manipulering: JavaScript tilbyr Document Object Model (DOM), som gjør det enkelt å endre innholdet på en nettside dynamisk. Med denne teknologien på plass, oppdateres innholdet på en side automatisk basert på brukerinndata uten å laste inn nettsiden på nytt.
Kompatibilitet på tvers av nettlesere: JavaScript er kompatibel med alle moderne nettlesere. Nettsider laget med HTML, CSS og JavaScript vil dermed fungere perfekt på forskjellige nettlesere.

Er Whitepages Premium gratis?

Forutsetninger

Grunnleggende forståelse av HTML: Du forstår grunnleggende HTML-tagger, kan legge til knapper og lage skjemaer ved hjelp av HTML.
Grunnleggende forståelse av CSS: Du forstår CSS-konsepter som id, klasse og elementvelgere.
En kodeeditor: Du kan bruke en kodeeditor som VS Code eller Atom. Du kan også bruke en online JavaScript-kompilator hvis du ikke vil installere programvare på systemet ditt.

Hvordan bruke JavaScript i HTML

Du kan bruke tre hovedmetoder for å legge til JavaScript-kode i HTML. Vi utforsker hver tilnærming og hvor den passer best.

#1. Innebyggingskode mellom tag

Denne tilnærmingen lar deg ha JavaScript- og HTML-koder i samme fil (HTML-fil). Vi kan starte med å lage en prosjektmappe der vi skal demonstrere hvordan det fungerer. Du kan bruke disse kommandoene for å komme i gang;

mkdir javascript-html-playground

cd javascript-html-playground

Lag to filer; index.html og style.css

Legg til denne startkoden i HTML-filen;

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

Legg til denne startkoden i CSS-filen din;

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

  }

Når nettsiden er gjengitt, vil du ha noe sånt som dette;

Lær koding på en morsom måte på disse 7 plattformene

Vi kan nå legge til en enkel JavaScript-kode som sier «innsendt» når du klikker på send-knappen. Den refaktorerte HTML-koden med JavaScript vil være;

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

Når du klikker på send inn-knappen får du opp noe som ligner på dette;

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>
Når du klikker på send inn, vises et lite vindu i nettleseren din med ordene "inline submit". 
Fordeler med å legge til JavaScript som innebygd kode

Rask å implementere: Du trenger ikke å skifte fra ett dokument til et annet for å skrive HTML- og JavaScript-kode. 
Perfekt for en liten app: Hvis du har en liten app som ikke krever mye interaktivitet, er inline JavaScript et perfekt valg. 

  5 Native AWS-tjenester som kan bygge ende-til-ende serverløs plattform
Ulemper med å legge til JavaScript som innebygd kode

Koden kan ikke gjenbrukes: Hvis appen din har flere skjemaer, vil du opprette JavaScript-kode for hvert skjema.
Senker ytelsen: Store kodeblokker på HTML-dokumentet kan redusere innlastingshastigheten. 
Kodelesbarhet: Ettersom kodebasen fortsetter å vokse, reduseres kodelesbarheten. 

#3.  Opprette en ekstern JavaScript-fil
Etter hvert som applikasjonen din vokser, vil du merke at det ikke er en god idé å legge til JavaScript-kode direkte i en HTML-fil.  Det er også sannsynlig at du har nettsider med lav lastehastighet når du har mye kode på HTML-filen din. 
Opprett en ny fil script.js for å bære JavaScript-koden din. 
Importer script.js-filen til HTML-filen;
<head>

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

</head>
Den nye oppdaterte HTML-siden vil ha denne koden;
<!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>
Legg til denne koden i script.js-filen;
document.addEventListener("DOMContentLoaded", function() {

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

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

      event.preventDefault();

      alert("external JS sheet submit");

    });

  });
Dette JavaScript gjør følgende;

Vi har en hendelseslytter som venter på at DOMContentLoaded-hendelsen skal utløses. 
En tilbakeringingsfunksjon utføres etter at DOMContentLoaded-hendelsen utløses.
Koden bruker querySelector til å velge et skjema.
Vi bruker event.preventDefault() for å forhindre at DOM velger standardoppførselen (oppdater siden eller naviger til en ny side) når innsendingshendelsen utløses. 
En melding "ekstern JS-ark innsending" utløses når innsendingshendelsen er utløst. 


JavaScript i HTML: Beste praksis

Reduser filstørrelser: Jo større filstørrelsen er, jo mer tid tar det å laste inn i nettleseren.  Minifisering fjerner alle uønskede tegn i kildekoden uten å endre betydningen eller ytelsen.  Du kan bruke verktøy som Yahoo YUI Compressor og HTMLMinifier for å lage en kompakt kodebase. 
Hold koden din organisert: Dette vil gjøre det enkelt å lese og vedlikeholde.  Du kan bruke utvidelser som Prettier for å organisere koden din. 
Bruk eksterne biblioteker: Hvis et bibliotek kan utføre en bestemt oppgave for appen din, er det ikke nødvendig å skrive koden fra bunnen av.  Unngå imidlertid å bruke flere biblioteker som oppnår de samme målene på samme prosjekt. 
Optimaliser JavaScript-plassering: Hvis du har tenkt å legge til JavaScript-kode i HTML-filen, sørg for at den kommer etter HTML-koden.  Plasser JavaScript-en mellom

Hvorfor det er avgjørende å bruke JavaScript i HTML

Forutsetninger

Hvordan bruke JavaScript i HTML

#1. Innebyggingskode mellom og tag

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

Fordeler med å legge til JavaScript som innebygd kode

Ulemper med å legge til JavaScript som innebygd kode

#3. Opprette en ekstern JavaScript-fil

JavaScript i HTML: Beste praksis

#1. Innebyggingskode mellom tag