So verknüpfen Sie JavaScript mit HTML
JavaScript ist eine sehr beliebte Skriptsprache, die sowohl auf der clientseitigen als auch auf der server Seite verwendet wird. JavaScript ist für unsere Webseiten erforderlich, da unsere Webseite interaktiv macht.
Es gibt drei grundlegende Anforderungen, um ein Front-End-Entwickler zu werden:
- Html,
- CSS,
- JavaScript
HTML wird für Hypertext -Markup -Sprache verkürzt, die unsere Webseite strukturiert, und CSS verleiht unseren Seiten Stile. Schließlich macht JavaScript, wie bereits erwähnt. JavaScript hilft auch bei der Veränderung von HTML und CSS.
Jetzt stellt sich eine Frage, wie wir JavaScript mit HTML verknüpfen/verbinden können. In diesem Artikel werden wir heute fast alle Möglichkeiten untersuchen, wie wir JavaScript mit HTML verknüpfen können.
Was ist ein Skript -Tag?
Bevor Sie sich mit der Lösung des Verknüpfung von JavaScript mit HTML befassen, schauen wir uns das Skript -Tag an.
Der Das Tag wird verwendet, um die Client-Seite-Skripte einzubetten, die JavaScript sind. Dieses Tag enthält entweder Skriptelemente oder Verweise auf eine andere Skriptdatei mit dem SRC -Attribut.
Syntax
Dies ist ein Skript -Tag mit einem SRC -Attribut, in dem wir einen Dateinamen angeben können, den wir verweisen möchten.
Verwenden Sie JavaScript in der HTML -Datei
Wir können JavaScript mit HTML verknüpfen, indem wir den gesamten JavaScript -Code in der HTML -Datei hinzufügen. Wir erreichen dies mit dem zuvor erklärten Skript -Tag, das zuvor erklärt wurde. Wir können das Etikett entweder in den Kopf des HTML oder am Ende des Körpers legen. Es liegt total an uns, wo wir es ausdrücken wollen und wann JavaScript geladen werden soll. Programmierer rufen normalerweise das Skript -Tag auf, wenn sie Inhalte generieren oder Aktionen anwenden möchten. Wenn Sie sich den folgenden Code ansehen, ist es eine gute Praxis, JavaScript nach dem HTML -Körper zu laden.
Schauen wir uns ein Beispiel an:
Beispiel
In diesem Beispiel haben wir zuerst eine Schaltfläche in HTML erstellt. Wir setzen ein Ereignis auf Klicken. Immer wenn ein Benutzer auf diese Schaltfläche klickt, die myfunc () Funktion wird aktiviert. Danach setzen wir eine Schild. Der gesamte JavaScript -Code ging hierher. Wir setzen eine Funktion mit dem Namen myfunc (), wo wir eine Warnung zeigten.
Glückwunsch! Wir haben JavaScript erfolgreich mit HTML verknüpft, indem wir den JavaScript -Code in das Skript -Tag hinzufügen.
Diese Methode ist gut für kleine Webseiten oder eine Webseite. Da Ihre Web -App jedoch größer wird, wird der Skriptcode auch größer und es wird wirklich schwer zu handhaben und zu lesen. Die Lösung besteht darin, JavaScript in eine dedizierte separate JavaScript -Datei zu schreiben und die Referenz der JavaScript -Datei in der HTML -Datei anzugeben.
Verwenden von JavaScript in einer externen Datei
Die Verwendung einer externen Datei für größere Skripte ist von Vorteil, da wir unseren Code sowohl in verschiedene JavaScript -Seiten als auch in verschiedenen Dateien teilen können. Es wird erreicht, indem auf den Namen JavaScript -Dateinamen im Attribut „SRC“ des Skript -Tags in der HTML -Datei verwiesen wird.
Lassen Sie uns das vorherige Beispiel ein wenig ändern. Der Code bleibt gleich. Wir werden eine andere JavaScript -Datei mit dem Namen von „Code erstellen.JS ”. Wir werden den gesamten JavaScript -Code in den Code einfügen.JS ”-Datei und den Code angeben.JS ”Referenz in der HTML -Datei.
Zum Beispiel
Wir haben auf das “verwiesenCode.JSDatei mit dem SRC -Attribut von Schild.
Jetzt die Code.JS Datei:
Funktion myfunc ()ALERT ("Du hast mich geklickt");
Das Ergebnis ist das gleiche wie das vorherige Beispiel i-e.
Externe JavaScript -Dateivorteile
Lassen Sie uns einige der Vorteile formell angeben, nachdem wir die externe JavaScript -Datei besprochen haben:
- Es trennt unseren HTML -Code und unseren JavaScript -Code
- Der JavaScript -Code wird sowohl lesbar als auch aufrechterhalten.
- Ein weiterer Vorteil ist, dass zwischengespeicherte JavaScript -Dateien beim Laden der Seite mit dem Laden von Seite wirken.
JavaScript -Selektoren
In den vorherigen Beispielen haben wir die Hilfe eines Ereignisses genommen. Nehmen wir an, wir möchten kein Ereignis hinzufügen und möchten ein Element aus der HTML -Datei auswählen. JavaScript hilft uns, verschiedene Optionen dafür bereitzustellen, die als JavaScript -Selektoren bezeichnet werden.
JavaScript -Selektoren Die Hauptfunktion besteht darin, ein HTML -Element auszuwählen und unterschiedliche Aktionen nach unseren Anforderungen auszuführen. JavaScript bietet dafür unterschiedliche Optionen. Eine davon ist die ID.
Wir können einem Element ein ID -Attribut in HTML geben und dann in JavaScript darauf zugreifen. Wir greifen in JavaScript zu, von:
dokumentieren.getElementById ("idname");ID ist eindeutig und für nur ein Element verwendet.
JavaScript gibt uns auch die Möglichkeit, ein Element mit einem Klassenattribut auszuwählen. Wir können den Klassennamen für verschiedene Elemente verwenden. Die Syntax ist:
dokumentieren.QuerySelector (".Klassenname");Eine weitere Option, die JavaScript uns gibt. Syntax zum Zugriff auf Tagennamen:
dokumentieren.GetElementsByTagName ("P");
Beispiel:
Html
JavaScript
const btn = dokument.GetElementById ("Btn");Btn.AddEventListener ("Click", function ()
ALERT ("Du hast mich geklickt");
)
In diesem Beispiel haben wir auf das Schaltflächenelement mit getElementById () zugegriffen. Danach setzen wir ein Ereignis ein, das wenn ein Benutzer auf die Schaltfläche klickt, sollte eine Warnung angezeigt werden.
Wir können die gleiche Ausgabe erzielen, wenn wir verwenden:
const btn = dokument.QuerySelector ("BTN");Es sollte beachtet werden, dass wir das Klassenattribut im Schaltflächenelement festlegen müssen.
Abschluss
Durch das Verknüpfen von JS mit HTML ist Ihre Website dynamisch und interaktiv. In diesem Beitrag haben wir Ihnen beigebracht, wie Sie JavaScript mit HTML verknüpfen können. Wir haben die beiden Hauptmethoden besprochen, um diese Aufgabe zu erreichen.
Das erste war, JavaScript in der HTML -Datei zu verwenden. Die zweite war, JavaScript außerhalb der HTML -Datei mit einer JavaScript -Datei zu verwenden. Um ein Front-End-Entwickler zu sein, ist es erforderlich, sowohl in HTML als auch in JavaScript zu arbeiten, und dieser Artikel hat Ihnen gezeigt, wie Sie beide verknüpfen können.