Warum verwenden wir JavaScript in HTML?-js-Tutorial-php.cn

Warum verwenden wir JavaScript in HTML?

王林

Freigeben： 2023-08-29 10:33:02

nach vorne

1274 Leute haben es durchsucht

为什么我们在 HTML 中使用 JavaScript？

Zuerst werden wir verstehen, was JavaScript ist. Wenn eine Website mehr tut, als nur da zu sein und Ihnen statische Informationen zur Verfügung zu stellen, wie z. B. die Anzeige aktueller Inhaltsaktualisierungen, interaktive Karten, animierte 2D-/3D-Visualisierungen, scrollende Video-Jukeboxen usw., wird mit ziemlicher Sicherheit JavaScript verwendet. Darüber hinaus können Sie Ihrer Website mithilfe von Skripten oder der Programmiersprache JavaScript erweiterte Funktionen hinzufügen. Die ersten beiden Schichten des Kuchens aus Standard-Webtechnologien sind HTML und CSS. Diese Etage ist die dritte Etage.

Ebenen von Webseiten

Die Auszeichnungssprache, die wir zum Strukturieren und Definieren der Bedeutung von Webinhalten verwenden, heißt HTML. Mithilfe von HTML können wir Absätze, Überschriften und Datentabellen definieren sowie Bilder und Videos in Webseiten einbetten.
CSS steht für Cascading Style Sheets und ist eine Sprache für Stilregeln, mit der wir Stile auf HTML-Inhalte anwenden, beispielsweise Hintergrundfarben und Schriftarten festlegen und diese in Spalten organisieren.
JavaScript ist eine Skriptsprache, mit der Sie alles tun können, von der Erstellung dynamisch aktualisierter Materialien bis hin zur Verwaltung von Multimedia- und animierten Grafiken. Mit nur wenigen Zeilen JavaScript-Code können erstaunliche Dinge erreicht werden.

Die Verwendung von JavaScript in der Webentwicklung

JavaScript ist eine Computersprache, die im Web verwendet wird. Mit JavaScript können HTML und CSS aktualisiert und geändert werden. Damit können Daten berechnet, verändert und validiert werden. Benutzer können mithilfe von JavaScript mit Webseiten interagieren. Es gibt wirklich keine Grenzen für die Möglichkeiten, die Sie mit JavaScript erreichen können. Hier sind nur einige Beispiele für die Verwendung auf Webseiten –

Sie können weitere Informationen ein- oder ausblenden, indem Sie auf die Schaltfläche klicken.
Die Farbe der Schaltfläche ändert sich, wenn die Maus darüber bewegt wird.
Auf der Website gibt es ein Bilderkarussell, durch das Sie scrollen können.
Verwenden Sie den Timer oder Countdown auf der Website, um das Foto zu vergrößern oder zu verkleinern,
Spielen Sie Audio- und Videoinhalte auf der Seite ab,
Animieren und Anzeigen mit Hamburger-Dropdowns und mehr.

Der Zweck von JavaScript auf Webseiten

Wenn Sie eine Webseite in Ihren Browser laden (Browser-Registerkarte), führen Sie Code (HTML, CSS und JavaScript) in der Ausführungsumgebung aus. Dies ähnelt einer Fabrik, die Rohstoffe eingibt (Code) und fertige Produkte herstellt (Webseiten).

Über die Document Object Model API wird JavaScript häufig zum Bearbeiten von HTML und CSS verwendet, um die Benutzererfahrung dynamisch zu aktualisieren. Denken Sie daran, dass der Code eines Webdokuments normalerweise in der Reihenfolge geladen und ausgeführt wird, in der er auf der Seite erscheint. Wenn JavaScript vor HTML und CSS geladen und ausgeführt wird, was bedeutet, dass Änderungen vorgenommen werden, können Fehler auftreten.

Wie füge ich einer Seite JavaScript hinzu?

Ähnlich wie CSS auf HTML-Seiten angewendet wird, gilt das Gleiche auch für JavaScript. Allerdings erfordert JavaScript ein HTML-Tag, nämlich <script>. </script>

Im folgenden Beispiel sehen wir, wie Benutzer mithilfe des Skriptelements in einer HTML-Datei JavaScript-Code in das Head-Tag einbetten können.

Beispiel

Wie im Beispiel unten gezeigt, betten wir JavaScript in die HTML-Datei ein, um den HTML-Code zu ändern. Innerhalb des Skript-Tags verwenden wir eine Funktion namens „ParaChange“. Wir erstellen einen „Hier klicken“-Button innerhalb des Body-Tags. Die ParaChange-Funktion wird durch das Click-Ereignis der Schaltfläche aufgerufen. Diese Funktion verwendet document.getElementById() des DOM, um das p-Tag zu manipulieren und die Anweisung zu ändern.

<html>
<head>
   <script>
  
      // inside the head tag is a script tag.
      // The onclick event calls the parachange function
      function ParaChange() {
         document.getElementById("para").innerHTML = "The line has changed.";
      }
   </script>
</head>
<body>
   <h2>Including JavaScript in HTML document in <i>Head tag</i></h2>
   <p id="para">The is a line</p>
   <button type="button" onclick="ParaChange()">Click Here</button>
</body>
</html>

Nach dem Login kopieren

Der Benutzer stellt möglicherweise fest, dass sich die Absatzzeile innerhalb des p-Tags des Klickereignisses aufgrund des Klicks auf die Schaltfläche geändert hat. Dies liegt daran, dass die Funktion „ParaChange“, die im Skript-Tag des Head-Tags geschrieben ist, während dieses Klickereignisses aufgerufen wird.

Auf diese Weise können wir JavaScript in HTML verwenden, um unsere flexiblen und dynamischen Seiten zu erstellen, indem wir komplexe Codes schreiben.

Das obige ist der detaillierte Inhalt vonWarum verwenden wir JavaScript in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!