In Entwicklung | Letztes Updateated: 23. März 2023

Cloudways bietet verwaltetes Cloud-Hosting für Unternehmen jeder Größe zum Hosten einer Website oder komplexer Webanwendungen.

So verwenden Sie JavaScript in HTML für Create Interaktive Webseiten

By Titus Kamunya

Verwenden Sie JavaScript in HTML für Create-Interaktive-Webseiten-1

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.

With HTML5 and CSS3, you can create static websites. However, to add interactivity to such a site, you must use a programming language such as JavaScript that the browsers understand.

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.

Warum es wichtig ist, JavaScript in HTML zu verwenden

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: You can use JavaScript to capture the correct data on forms. For instance, you can use this programming language to validate user inputs on a sign-up page by the email format, the password length, and the combination of characters to use.
DOM-Manipulation: JavaScript offers the Document Object Model (DOM), which makes it easy to change the contents of a web page dynamically. With this technology in place, the contents of a page are updated automatischally based on the user inputs without reloading the web page.
Cross-Browser-Kompatibilität: JavaScript is compatible with all modern browsers. Web pages created using HTML, CSS, and JavaScript will thus work perfectly on different browsers.

Voraussetzungen:

Grundverständnis von HTML: Sie verstehen grundlegende HTML-Tags, can add buttons and create forms using HTML.
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.

Verwendung von 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

This approach lets you have JavaScript and HTML codes in the same file (HTML file). We can start by creating a project folder where we will demonstrate how it works. You can use these commands to get started;

mkdir javascript-html-playground

cd javascript-html-playground

Create two files; index.html and 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: The presence of <script> 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: If you have several forms in your app, it means you will create JavaScript code for every form.
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>

When you click submit, a small window on your browser with the words „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: If your app has several forms, you will create JavaScript code for every form.
Verlangsamt die Leistung: Große Codeblöcke im HTML-Dokument können die Ladegeschwindigkeit verlangsamen.
Lesbarkeit des Codes: As the codebase continues to grow, code readability reduces.

# 3. Erstellen einer externen JavaScript-Datei

As your application grows, you will note that adding JavaScript code directly to an HTML file is not a good idea. You are also likely to have web pages with low loading speeds when you have a lot of code on your HTML file.

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

The new updated HTML page will have this code;

<!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() obenrevent the DOM from picking the default behavior (refresh the page or navigate to a new page) when the submit event is triggered.
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 without changing its meaning or performance. You can use tools like Yahoo YUI Compressor and HTMLMinifier to create a compact codebase.
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

You can now comfortably use JavaScript with HTML to create interactive web pages. The approach you will use to merge the two technologies will depend on the nature of the web app you are creating. For instance, you can use inline code when creating a small app. On the other hand, a big app needs an external JavaScript file which you will import into your HTML file.

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

Veröffentlicht in