So verwenden Sie JavaScript in HTML, um interaktive Webseiten zu erstellen

HTML, CSS und JavaScript sind die drei Hauptsprachen, die in der Frontend-Entwicklung verwendet werden. HTML ist eine Auszeichnungssprache, während CSS eine Stilsprache ist.

JavaScript ist eine objektorientierte Programmiersprache, die hauptsächlich zum Erstellen der Clientseite von Web- und Mobilanwendungen verwendet wird. Diese dynamische Open-Source-Sprache ist zu einer der am häufigsten verwendeten geworden Programmiersprachen aufgrund seiner Flexibilität und Verständlichkeit.

Mit HTML5 und CSS3 können Sie statische Websites erstellen. Um einer solchen Site jedoch Interaktivität hinzuzufügen, müssen Sie eine Programmiersprache wie JavaScript verwenden, die die Browser verstehen.

Dieser Artikel erklärt, warum Sie JavaScript mit HTML verwenden müssen, die verschiedenen Ansätze zum Hinzufügen von JavaScript-Code HTML, und bewährte Verfahren zum Kombinieren der beiden Sprachen.

Why it is crucial to use JavaScript in HTML

JavaScript-in-HTML-zum-Erstellen-interaktiver-Webseiten

Fügen Sie Interaktivität hinzu: Interaktivität reagiert auf Benutzereingaben/-aktionen in Echtzeit, ohne den Browser neu zu laden. Beispielsweise können Sie einen Zähler haben, der sich bei jedem Klicken um eins erhöht. Ein weiteres Beispiel kann eine Antwort sein, die Benutzern mitteilt, dass ihr Feedback jedes Mal gesendet wurde, wenn sie auf die Schaltfläche „Senden“ klicken.
Clientseitige Validierung: Sie können JavaScript verwenden, um die korrekten Daten in Formularen zu erfassen. Sie können diese Programmiersprache beispielsweise verwenden, um Benutzereingaben auf einer Anmeldeseite anhand des E-Mail-Formats, der Passwortlänge und der zu verwendenden Zeichenkombination zu validieren.
DOM-Manipulation: JavaScript bietet das Document Object Model (DOM), das es einfach macht, den Inhalt einer Webseite dynamisch zu ändern. Mit dieser Technologie werden die Inhalte einer Seite basierend auf den Benutzereingaben automatisch aktualisiert, ohne die Webseite neu zu laden.
Cross-Browser-Kompatibilität: JavaScript ist mit allen modernen Browsern kompatibel. Webseiten, die mit HTML, CSS und JavaScript erstellt wurden, funktionieren daher perfekt auf verschiedenen Browsern.

Voraussetzungen:

Grundverständnis von HTML: Sie verstehen grundlegende HTML-Tags, kann Schaltflächen hinzufügen und Formulare mit HTML erstellen.
Grundverständnis von CSS: Sie verstehen CSS-Konzepte wie ID, Klasse und Elementselektoren.
Ein Code-Editor: Sie können eine Code-Editor wie VS Code oder Atom. Sie können auch eine verwenden Online-JavaScript-Compiler wenn Sie keine Software auf Ihrem System installieren möchten.

How to use JavaScript in HTML

Sie können drei Hauptansätze verwenden, um JavaScript-Code zu HTML hinzuzufügen. Wir prüfen jeden Ansatz und wo er am besten passt.

# 1. Einbettungscode zwischen and Schild

Mit diesem Ansatz können Sie JavaScript- und HTML-Codes in derselben Datei (HTML-Datei) haben. Wir können damit beginnen, einen Projektordner zu erstellen, in dem wir zeigen, wie es funktioniert. Sie können diese Befehle verwenden, um loszulegen;

mkdir javascript-html-playground

cd javascript-html-playground

Erstellen Sie zwei Dateien; index.html und style.css

Fügen Sie diesen Startcode der HTML-Datei hinzu;

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

Fügen Sie diesen Startcode Ihrer CSS-Datei hinzu;

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

  }

Wenn die Webseite gerendert wird, werden Sie so etwas haben;

Wir können jetzt einen einfachen JavaScript-Code hinzufügen, der „abgesendet“ sagt, wenn Sie auf die Schaltfläche „Senden“ klicken. Der umgestaltete HTML-Code mit JavaScript wird sein;

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

Wenn Sie auf die Schaltfläche „Senden“ klicken, erhalten Sie etwas Ähnliches;

Vorteile der Einbettung von JavaScript-Code zwischen … Stichworte

Schnell umsetzbar: Das Arbeiten an derselben Datei kann Ihnen Zeit sparen, da Sie Ihren JavaScript-Code vom HTML-Code derselben Datei referenzieren können.
Einfach zu lesender Code: Das Vorhandensein von tags separates HTML from JavaScript codes, making it easier to read and debug.

Nachteile der Einbettung von JavaScript-Code zwischen … Stichworte

Erschwert die Wiederverwendung von Code: Wenn Sie mehrere Formulare in Ihrer App haben, bedeutet dies, dass Sie JavaScript-Code für jedes Formular erstellen.
Verlangsamt die Leistung: Große Codeblöcke im HTML-Dokument können die Ladegeschwindigkeit verlangsamen.

# 2. Inline-Code durch Verwendung von JavaScript-Code direkt in HTML

Anstatt den obigen JavaScript-Code einzuschließen …. -Tags können Sie es direkt zum HTML-Code hinzufügen. Wir verwenden denselben HTML-Code und dasselbe Stylesheet (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>

Wenn Sie auf Senden klicken, erscheint ein kleines Fenster in Ihrem Browser mit den Worten „Inline-Übermittlung“ erscheint.

Vorteile des Hinzufügens von JavaScript als Inline-Code

Schnell umsetzbar: Sie müssen nicht von einem Dokument zum anderen wechseln, um HTML- und JavaScript-Code zu schreiben.
Perfekt für eine kleine App: Wenn Sie eine kleine App haben, die nicht viel Interaktivität erfordert, ist Inline-JavaScript die perfekte Wahl.

Nachteile des Hinzufügens von JavaScript als Inline-Code

Der Code ist nicht wiederverwendbar: Wenn Ihre App mehrere Formulare hat, erstellen Sie JavaScript-Code für jedes Formular.
Verlangsamt die Leistung: Große Codeblöcke im HTML-Dokument können die Ladegeschwindigkeit verlangsamen.
Lesbarkeit des Codes: Da die Codebasis weiter wächst, nimmt die Lesbarkeit des Codes ab.

# 3. Erstellen einer externen JavaScript-Datei

Wenn Ihre Anwendung wächst, werden Sie feststellen, dass das direkte Hinzufügen von JavaScript-Code zu einer HTML-Datei keine gute Idee ist. Sie haben wahrscheinlich auch Webseiten mit niedriger Ladegeschwindigkeit, wenn Sie viel Code in Ihrer HTML-Datei haben.

Erstellen Sie eine neue Datei script.js um Ihren JavaScript-Code zu tragen.

Importieren Sie die script.js-Datei in die HTML-Datei;

<head>

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

</head>

Die neue aktualisierte HTML-Seite wird diesen Code haben;

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

Fügen Sie diesen Code hinzu script.js Datei;

document.addEventListener("DOMContentLoaded", function() {

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

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

      event.preventDefault();

      alert("external JS sheet submit");

    });

  });

Dieses JavaScript macht Folgendes;

Wir haben einen Ereignis-Listener, der auf die wartet DOMContentLoaded Ereignis zu feuern.
Nach dem wird eine Callback-Funktion ausgeführt DOMContentLoaded Ereignis wird ausgelöst.
Der Code verwendet querySelector, um ein Formular auszuwählen.
Wir nutzen die event.preventDefault() um zu verhindern, dass das DOM das Standardverhalten auswählt (Seite aktualisieren oder zu einer neuen Seite navigieren), wenn das Submit-Ereignis ausgelöst wird.
Eine Nachricht „Externes JS-Blatt übermitteln“ wird ausgelöst, sobald das Submit-Ereignis ausgelöst wird.

JavaScript in HTML: Best Practices

Dateigrößen minimieren: Je größer die Dateigröße, desto länger dauert das Laden im Browser. Durch das Minimieren werden alle unerwünschten Zeichen in der entfernt Quellcode ohne seine Bedeutung oder Leistung zu ändern. Sie können Tools wie Yahoo YUI Compressor und HTMLMinifier verwenden, um eine kompakte Codebasis zu erstellen.
Halten Sie Ihren Code organisiert: Dies erleichtert das Lesen und die Wartung. Sie können Erweiterungen wie verwenden Schöner um Ihren Code zu organisieren.
Verwenden Sie externe Bibliotheken: Wenn eine Bibliothek eine bestimmte Aufgabe für Ihre App ausführen kann, muss der Code nicht von Grund auf neu geschrieben werden. Vermeiden Sie jedoch die Verwendung mehrerer Bibliotheken, die dieselben Ziele für dasselbe Projekt erreichen.
JavaScript-Platzierung optimieren: Wenn Sie beabsichtigen, JavaScript-Code zu Ihrer HTML-Datei hinzuzufügen, stellen Sie sicher, dass er nach dem HTML-Code kommt. Platzieren Sie das JavaScript dazwischen tags before closing the tag. This ensures that HTML content such as text, images, and table load first before JavaScript, improving loading speed.

Fazit

Sie können nun bequem JavaScript mit HTML verwenden, um interaktive Webseiten zu erstellen. Der Ansatz, den Sie zum Zusammenführen der beiden Technologien verwenden, hängt von der Art der Web-App ab, die Sie erstellen. Beispielsweise können Sie beim Erstellen einer kleinen App Inline-Code verwenden. Andererseits benötigt eine große App eine externe JavaScript-Datei, die Sie in Ihre HTML-Datei importieren.

Zur kasse JavaScript-Tabellenbibliotheken die Sie heute verwenden können.