adminvista.com

Hur man använder JavaScript i HTML för att skapa interaktiva webbsidor

By rik

De tre grundläggande byggstenarna för webbutveckling på klientsidan är HTML, CSS och JavaScript. HTML fungerar som ett märkspråk, medan CSS ansvarar för stil och layout.

JavaScript, ett objektorienterat programmeringsspråk, används främst för att skapa interaktiva webbplatser och mobilapplikationer. Tack vare dess anpassningsbarhet och användarvänlighet har detta öppna källkods-språk blivit ett av de mest använda programmeringsspråken.

Med HTML5 och CSS3 kan man skapa statiska webbplatser. Men för att lägga till dynamiska element som interaktivitet, krävs ett programmeringsspråk som webbläsare kan tolka – och här kommer JavaScript in i bilden.

Denna artikel belyser varför JavaScript är oumbärligt i kombination med HTML, de olika sätten att implementera JavaScript-kod i HTML, samt bästa praxis för att använda dessa två teknologier tillsammans.

Varför JavaScript är Viktigt i HTML

  • Skapa Interaktivitet: Interaktivitet ger svar på användarens åtgärder i realtid, utan att webbsidan behöver laddas om. Ett exempel är en räknare som ökar varje gång du klickar på den. Ett annat är ett bekräftelsemeddelande som visas efter att användaren har skickat in ett formulär.
  • Klient-sidans Validering: JavaScript kan användas för att kontrollera och säkerställa att användarinformation är korrekt innan den skickas till servern. Detta kan till exempel inkludera formatkontroller av e-postadresser, lösenordslängd eller kombination av tecken på en registreringssida.
  • DOM-manipulation: JavaScript erbjuder Document Object Model (DOM), vilket gör det möjligt att dynamiskt ändra innehållet på en webbsida. Med denna teknik kan innehållet uppdateras automatiskt som svar på användarens handlingar, utan att sidan behöver laddas om.
  • Webbläsarkompatibilitet: JavaScript är kompatibelt med alla moderna webbläsare, vilket säkerställer att webbsidor skapade med HTML, CSS och JavaScript fungerar bra oavsett vilken webbläsare användaren använder.

Förutsättningar

  • Grundläggande HTML: Du behöver en förståelse för grundläggande HTML-taggar och hur man skapar knappar och formulär.
  • Grundläggande CSS: Du bör ha kunskap om CSS-koncept som id, klass och elementselektorer.
  • En kodredigerare: Använd en textredigerare som VS Code eller Atom. Du kan också använda en online JavaScript-kompilator om du inte vill installera programvara på din dator.

Metoder för att Använda JavaScript i HTML

Det finns tre huvudsakliga metoder för att integrera JavaScript-kod i HTML. Vi kommer att utforska varje metod och dess lämplighet.

#1. Inbäddning av Kod Mellan <script> och </script> Taggar

Med denna metod kan du ha både JavaScript- och HTML-kod i samma fil. Låt oss börja med att skapa en projektmapp för att visa hur det fungerar. Du kan använda följande kommandon för att sätta igång:

mkdir javascript-html-playground
cd javascript-html-playground

Skapa nu två filer: index.html och style.css.

Lägg till följande startkod i din HTML-fil:

<!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">Namn:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">E-post:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Meddelande:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Skicka" />
      </form>
    </div>
  </body>
</html>

Och lägg till denna grundläggande CSS-kod i din style.css-fil:

.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 du öppnar webbsidan i din webbläsare kommer den att se ut ungefär såhär:

Låt oss nu lägga till enkel JavaScript-kod som visar meddelandet ”Skickat!” när användaren klickar på ”Skicka”-knappen. Den omarbetade HTML-koden med JavaScript blir då:

<!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">Namn:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">E-post:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Meddelande:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Skicka" onclick="submitted()" />
      </form>
    </div>
    <script>
      function submitted() {
        alert("Skickat!");
      }
    </script>
  </body>
</html>

Efter att du klickat på ”Skicka”-knappen visas nu ett meddelande:



Fördelar med att bädda in JavaScript mellan <script> … </script> taggar


    

  • Snabb Implementering: Arbetet i samma fil kan spara tid då du enkelt kan referera till JavaScript-koden direkt från HTML-koden i samma fil.
    • 

  • Lättläst Kod: Användningen av <script>-taggar separerar HTML och JavaScript-koden, vilket gör det enklare att läsa och felsöka.
    • 



Nackdelar med att bädda in JavaScript mellan <script> … </script> taggar


    

  • Svårt att återanvända kod: Om din applikation har flera formulär, måste du skapa JavaScript-kod för varje enskilt formulär.
    • 

  • Sämre prestanda: Stora kodblock i HTML-dokumentet kan sänka laddningstiderna.
    • 



#2. Inline Kod genom att använda JavaScript-kod direkt i HTML


Istället för att inkludera JavaScript-koden mellan <script> … </script>-taggar, kan den läggas direkt i HTML-koden. Vi använder samma HTML-kod och CSS-fil (style.css) som i föregående exempel.


<!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">Namn:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">E-post:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Meddelande:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Skicka" onclick="alert('Inline Skickat!')" />
      </form>
    </div>
  </body>
</html>



När du nu klickar på ”Skicka” visas en liten ruta med texten ”Inline Skickat!” i din webbläsare.


Fördelar med att lägga till JavaScript som inline-kod


    

  • Snabb Implementering: Du behöver inte byta mellan olika dokument för att skriva HTML- och JavaScript-kod.
    • 

  • Lämplig för Mindre Applikationer: Inline JavaScript passar bra för små applikationer som inte kräver mycket interaktivitet.
    • 



Nackdelar med att lägga till JavaScript som inline-kod


    

  • Ej Återanvändbar Kod: Om din applikation har flera formulär, måste du skapa JavaScript-kod för varje formulär.
    • 

  • Sämre Prestanda: Stora kodblock i HTML-dokumentet kan sänka laddningstiderna.
    • 

  • Minskad Läsbarhet: Med tiden blir koden svårare att läsa och underhålla när kodbasen växer.
    • 



#3. Skapa en Extern JavaScript-Fil


När din applikation blir större kommer du förmodligen att märka att det inte är optimalt att lägga JavaScript-koden direkt i HTML-filen. Dessutom kommer du att uppleva sämre laddningstider om det finns mycket kod i din HTML-fil.


Skapa därför en ny fil som heter script.js, och placera din JavaScript-kod där.


Importera nu script.js-filen till din HTML-fil:


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



Den nya, uppdaterade HTML-sidan har då följande kod:


<!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">Namn:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">E-post:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Meddelande:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Skicka" />
      </form>
    </div>
  </body>
</html>



Lägg till följande JavaScript-kod i script.js-filen:


document.addEventListener("DOMContentLoaded", function() {
    const form = document.querySelector("form");
    form.addEventListener("submit", function(event) {
      event.preventDefault();
      alert("Extern JS-fil skickad!");
    });
  });



Denna JavaScript-kod gör följande:


    

  • En event listener väntar på att DOMContentLoaded-eventet ska triggas.
    • 

  • En callback-funktion körs när DOMContentLoaded-eventet har triggats.
    • 

  • Koden använder querySelector för att välja formuläret.
    • 

  • event.preventDefault() används för att hindra DOM:en från att använda standardbeteendet (uppdatera sidan eller navigera till en ny sida) när submit-eventet triggas.
    • 

  • Ett meddelande, ”Extern JS-fil skickad!”, visas när submit-eventet triggas.
    • 





JavaScript i HTML: Bästa Praxisen


    

  • Minifiera filstorlekar: Ju större filstorlek, desto längre tid tar det för webbläsaren att ladda sidan. Minifiering tar bort onödiga tecken i källkoden utan att ändra dess funktion eller prestanda. Du kan använda verktyg som Yahoo YUI Compressor och HTMLMinifier för att skapa en mer kompakt kodbas.
    • 

  • Håll Koden Välorganiserad: Detta gör koden lättare att läsa och underhålla. Du kan använda tillägg som Prettier för att formatera din kod.
    • 

  • Använd Externa Bibliotek: Om ett bibliotek kan lösa en specifik uppgift för din app, behöver du inte skriva koden från grunden. Undvik dock att använda flera bibliotek som uppnår samma mål i samma projekt.
    • 

  • Optimera JavaScript-placering: Om du väljer att lägga till JavaScript-kod direkt i HTML-filen, se till att koden placeras efter HTML-koden. Lägg JavaScript mellan <script>-taggar innan du stänger <body>-taggen. Detta säkerställer att HTML-innehållet som text, bilder och tabeller laddas först, innan JavaScript-koden, vilket förbättrar laddningstiderna.
    • 



Sammanfattning


Nu har du grunderna för hur du kan använda JavaScript tillsammans med HTML för att skapa interaktiva webbsidor. Vilken metod du väljer beror på vilken typ av webbapplikation du skapar. Inline-kod passar bra för mindre appar, medan större appar har nytta av en extern JavaScript-fil.
  


Utforska gärna JavaScript-bibliotek för tabellhantering som kan förenkla ditt arbete ytterligare.






		


			



















12 bästa globala lönelösningar för dina internationella distansanställda









Microsoft Loop for Collaboration och Adobes AI-verktyg för redigering