JavaScript in HTML einbinden
Die Einbindung der JavaScript-Anweisungen erfolgt durch das HTML-Element <script>.
Einbinden mit <script>
Externe Dateien werden in HTML eingebunden, indem innerhalb des <script>-Elements das Attribut mit dem Pfad zur JavaScript-Datei angegeben wird.
<body>
<script src="Pfad zur JavaScript-Datei"></script>
</body>
Es können aber auch JavaScript-Anweisungen direkt innerhalb des <script>-Elements eingegeben werden, ohne externe Dateien einzubinden oder Attribute zu setzen.
<body>
<script>
alert('Mein erstes JavaScript');
</script>
</body>
Diese Vorgehensweise hat aber mehr Nachteile als Vorteile, allein schon wenn es um die Aktualisierung der Webanwendung geht, daher verwenden wir die Einbindung mit dem Verweis auf die externe Datei.
<noscript>
Während der Teil vom <script>-Element nur ausgeführt wird, wenn JavaScript aktiv ist, so wird der Teil innerhalb des <noscript>-Elements nur ausgeführt, wenn JavaScript im Browser deaktiviert ist oder nicht unterstützt wird.
<body>
<noscript>
JavaScript ist nicht verfügbar
</noscript>
</body>
Um das ganze Mal zu testen, ersetzen wir das <script>-Element mit dem <noscript>-Element in der HTML-Datei und deaktivieren JavaScript im Webbrowser (bei Chrome (Version 85) unter Einstellungen Datenschutz und Sicherheit Website-Einstellungen JavaScript).
So können wir den Benutzer darauf aufmerksam machen, dass JavaScript keinen dynamischen Einfluss auf die Seite hat. Standardmäßig ist JavaScript im Browser bereits aktiviert und diese Einstellung benötigen wir logischerweise auch beim Arbeiten mit JavaScript. JavaScript kann zwar ziemlich viel, aber es kann sich nicht selbst aktivieren, daher sollte die Seite so gebaut werden, dass sie auch ohne JavaScript brauchbar ist.
<script> richtig positionieren
Die richtige Platzierung des <script>-Elements in HTML ist wichtig!
Der Browser lädt nicht nur die HTML-Datei, sondern auch die eingebundenen CSS-Anweisungen und die JavaScript-Dateien.
Je nach ausführender Hardware werden die Dateien, Bilder usw. parallel heruntergeladen.
Wenn der Browser während des Downloads auf JavaScript-Dateien trifft, dann stoppt er den Download der anderen Elemente und beginnt damit, den Code zu interpretieren.
Erst wenn der gesamte JavaScript-Code ausgeführt wurde, wird mit der Verarbeitung der HTML-Datei fortgesetzt.
Wenn an dieser Stelle noch nicht der gesamte HTML-Code heruntergeladen wurde, kann es dazu führen, dass JavaScript auf Elemente greifen möchte, die noch gar nicht vorhanden sind.
Es kommt zu Fehlern, die ganz einfach vermieden werden können, indem man den JavaScript-Code erst unmittelbar vor dem </body> Tag setzt.
Dadurch wird sichergestellt, dass der gesamte HTML-Code vom Browser ausgewertet wurde und erst danach begonnen wird, die JavaScript-Dateien zu verarbeiten.
Attribut
Es gibt noch eine andere einfache Möglichkeit zuerst den HTML-Code ausführen zu lassen und erst danach mit JavaScript zu beginnen, und zwar werden wir dem <body>-Element noch ein Attribut mit auf dem Weg geben.
<body onload="zeigeText()">
...
</body>
Das Attribut "onload" sorgt dafür, dass der JavaScript-Teil erst ausgeführt wird, wenn alle Bestandteile der HTML-Datei mit den dazugehörigen Ressourcen, also zum Beispiel die CSS-Anweisungen fertig geladen sind.
Eventlistener
Es ist auch denkbar, einen Eventlistener einzusetzen:
document.addEventlistener("DOMContentLoaded", zeigeText);
Dieser Code sorgt dafür, dass die Funktion "zeigeText" erst ausgeführt wird, wenn die HTML-Datei mit allen zugehörigen Ressourcen und Dateien wie Bilder und Co. vollständig geladen sind.
Weiter mit Variablen