JavaScript i HTML: Lag interaktive nettsider nå!

by
Tweet
Share
Share
Pin
0 Shares

HTML, CSS og JavaScript utgjør de tre fundamentale teknologiene for frontend-utvikling. HTML er et strukturspråk, mens CSS definerer stil og presentasjon.

JavaScript, et objektorientert programmeringsspråk, er hovedsakelig brukt til å utvikle interaktivitet på klientsiden for nett- og mobilapplikasjoner. Dette fleksible og lettfattelige dynamiske språket med åpen kildekode har etablert seg som et av de mest populære programmeringsspråkene.

Med HTML5 og CSS3 kan man skape statiske nettsider. Imidlertid kreves det et programmeringsspråk som JavaScript, som nettlesere forstår, for å implementere interaktivitet på slike sider.

Denne artikkelen vil belyse hvorfor bruk av JavaScript i HTML er essensielt, utforske ulike metoder for å integrere JavaScript-kode i HTML, og presentere beste praksis for samspillet mellom disse to språkene.

Betydningen av å bruke JavaScript i HTML

  • Økt interaktivitet: Interaktivitet muliggjør sanntidstilbakemeldinger på brukerhandlinger uten at siden lastes på nytt. Et eksempel er en teller som øker for hvert klikk, eller en bekreftelsesmelding som vises etter at et skjema er sendt.
  • Klient-side validering: JavaScript kan benyttes for å validere data i skjemaer direkte i nettleseren. For eksempel kan det brukes til å sjekke e-postformat, passordlengde og kombinasjon av tegn i registreringsskjemaer.
  • DOM-manipulasjon: JavaScripts Document Object Model (DOM) forenkler dynamisk endring av nettsideinnhold. Dette gjør det mulig å oppdatere innholdet basert på brukerinput uten å laste siden på nytt.
  • Nettleserkompatibilitet: JavaScript er kompatibelt med alle moderne nettlesere. Dette sikrer at nettsider bygget med HTML, CSS og JavaScript fungerer problemfritt på tvers av ulike nettlesere.

Forutsetninger

  • Grunnleggende HTML-forståelse: Kjennskap til HTML-tagger, knapper og skjemaer.
  • Grunnleggende CSS-forståelse: Forståelse av CSS-konsepter som id, klasse og elementvelgere.
  • En kodeeditor: En editor som VS Code eller Atom, eventuelt en online JavaScript-kompilator.

Slik implementerer du JavaScript i HTML

Det finnes hovedsakelig tre metoder for å integrere JavaScript-kode i HTML. Vi skal nå se nærmere på hver tilnærming, og når de er mest hensiktsmessige.

#1. Innebygging av kode mellom <script> og </script> tag

Denne metoden lar deg ha JavaScript- og HTML-kode i samme fil (HTML-filen). For å illustrere dette, oppretter vi først en prosjektmappe. Du kan bruke disse kommandoene for å starte:

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="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 gjengis, vil du se et skjema.

Vi kan nå inkludere en enkel JavaScript-kode som viser «innsendt» når du klikker på send-knappen. Den oppdaterte HTML-koden med JavaScript ser slik ut:

<!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>
        <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, vises en meldingsboks.

Fordeler med å bygge inn JavaScript-kode mellom <script> … </script> tagger

  • Rask implementering: Arbeid med HTML og JavaScript i samme fil forenkler referanser og sparer tid.
  • Lettlest kode: <script>-taggene skiller HTML- og JavaScript-kode, noe som øker lesbarheten og forenkler feilsøking.

Ulemper med å bygge inn JavaScript-kode mellom <script> … </script> tagger

  • Begrenset kodebruk: Ved flere skjemaer må JavaScript-kode opprettes for hvert enkelt skjema.
  • Redusert ytelse: Store kodeblokker i HTML-dokumentet kan redusere innlastingshastigheten.

#2. Inline kode ved å bruke JavaScript direkte i HTML

I stedet for å plassere JavaScript-koden i <script> …. </script> tagger, kan den integreres direkte i HTML-koden. Vi bruker samme HTML-kode og stilark (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>
        <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 en meldingsboks med teksten «inline submit».

Fordeler med å legge til JavaScript som inline-kode

  • Rask implementering: Krever ikke bytting mellom filer for å skrive HTML og JavaScript.
  • Egnet for små applikasjoner: Ideelt for mindre applikasjoner med begrenset interaktivitet.

Ulemper med å legge til JavaScript som inline-kode

  • Manglende gjenbruk: JavaScript-kode må opprettes for hvert enkelt skjema i applikasjoner med flere skjemaer.
  • Redusert ytelse: Store mengder kode i HTML-dokumentet kan forsinke innlastingstiden.
  • Dårlig lesbarhet: Kodebasen blir raskt vanskeligere å lese og vedlikeholde når applikasjonen vokser.

#3. Opprette en ekstern JavaScript-fil

Når applikasjonen din vokser, vil det bli mer hensiktsmessig å flytte JavaScript-koden ut av HTML-filen. Å ha for mye kode i HTML-filen kan også føre til lengre innlastningstid.

Opprett en ny fil, script.js, for å lagre JavaScript-koden din.

Importer script.js-filen til HTML-filen:

<head>
    <script src="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="style.css" type="text/css" />
    <script src="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");
    });
  });

Denne JavaScript-koden utfører følgende:

  • Den legger til 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 å hente skjemaet.
  • event.preventDefault() forhindrer standardoppførselen (som å laste siden på nytt eller navigere til en annen side) når innsendingshendelsen utløses.
  • En melding «ekstern JS-ark innsending» vises når skjemaet sendes inn.

JavaScript i HTML: Anbefalte fremgangsmåter

  • Reduser filstørrelser: Mindre filstørrelser gir raskere innlasting. Minifisering fjerner unødvendige tegn fra koden uten å påvirke funksjonaliteten. Verktøy som Yahoo YUI Compressor og HTMLMinifier kan brukes for å redusere filstørrelsen.
  • Hold koden organisert: Organisert kode er enklere å lese og vedlikeholde. Utvidelser som Prettier kan brukes for å automatisere organiseringen.
  • Bruk eksterne biblioteker: Gjenbruk av kode fra biblioteker kan spare tid. Det er viktig å unngå å inkludere flere biblioteker som utfører samme oppgave.
  • Optimaliser JavaScript-plassering: JavaScript-kode innebygd i HTML bør plasseres etter HTML-koden. Plasser scriptet mellom <script>-tagger rett før avsluttende </body>-tag. Dette sørger for at HTML-innhold som tekst, bilder og tabeller lastes inn før JavaScript, noe som forbedrer innlastingshastigheten.

Oppsummering

Du har nå en god forståelse av hvordan du kan integrere JavaScript med HTML for å lage interaktive nettsider. Valg av tilnærming avhenger av prosjektets størrelse og kompleksitet. Inline-kode kan være tilstrekkelig for små applikasjoner, mens større applikasjoner vil ha nytte av en ekstern JavaScript-fil.

Utforsk JavaScript-tabellbiblioteker for å forbedre funksjonaliteten til dine nettsider.