In diesem Teil des Tutorials geht es um das Kern-JavaScript, die Sprache selbst.
Aber wir brauchen eine Arbeitsumgebung, um unsere Skripte auszuführen, und da dieses Buch online ist, ist der Browser eine gute Wahl. Wir beschränken die Anzahl der browserspezifischen Befehle (wie alert ) auf ein Minimum, damit Sie keine Zeit damit verschwenden, wenn Sie sich auf eine andere Umgebung (wie Node.js) konzentrieren möchten. Im nächsten Teil des Tutorials konzentrieren wir uns auf JavaScript im Browser.
Sehen wir uns also zunächst an, wie wir ein Skript an eine Webseite anhängen. Für serverseitige Umgebungen (wie Node.js) können Sie das Skript mit einem Befehl wie "node my.js" ausführen.
JavaScript-Programme können mit dem <script> -Tag fast überall in ein HTML-Dokument eingefügt werden.
Zum Beispiel:
<!DOCTYPE HTML>
<html>
<Körper>
<p>Vor dem Skript...</p>
<Skript>
alarm( 'Hallo Welt!' );
</script>
<p>...Nach dem Skript.</p>
</body>
</html>Sie können das Beispiel ausführen, indem Sie auf die Schaltfläche „Play“ in der rechten oberen Ecke des Felds oben klicken.
Das <script> -Tag enthält JavaScript-Code, der automatisch ausgeführt wird, wenn der Browser das Tag verarbeitet.
Das <script> -Tag verfügt über einige Attribute, die heutzutage selten verwendet werden, aber immer noch in altem Code zu finden sind:
Das type : <script type =…>
Für den alten HTML-Standard HTML4 musste ein Skript den type haben. Normalerweise war es type="text/javascript" . Es ist nicht mehr erforderlich. Außerdem hat der moderne HTML-Standard die Bedeutung dieses Attributs völlig verändert. Jetzt kann es für JavaScript-Module verwendet werden. Aber das ist ein fortgeschrittenes Thema, wir werden in einem anderen Teil des Tutorials über Module sprechen.
Das language : <script language =…>
Dieses Attribut sollte die Sprache des Skripts anzeigen. Dieses Attribut ist nicht mehr sinnvoll, da JavaScript die Standardsprache ist. Es besteht keine Notwendigkeit, es zu verwenden.
Kommentare vor und nach Skripten.
In wirklich alten Büchern und Leitfäden finden Sie möglicherweise Kommentare innerhalb von <script> -Tags, wie zum Beispiel diesen:
<script type="text/javascript"><!--
...
//--></script> Dieser Trick wird in modernem JavaScript nicht verwendet. Diese Kommentare verbergen JavaScript-Code vor alten Browsern, die nicht wussten, wie das <script> -Tag verarbeitet werden soll. Da dieses Problem bei Browsern, die in den letzten 15 Jahren veröffentlicht wurden, nicht auftritt, kann diese Art von Kommentar Ihnen dabei helfen, wirklich alten Code zu identifizieren.
Wenn wir viel JavaScript-Code haben, können wir ihn in eine separate Datei einfügen.
Skriptdateien werden mit dem src Attribut an HTML angehängt:
<script src="/path/to/script.js"></script>
Hier ist /path/to/script.js ein absoluter Pfad zum Skript vom Site-Root. Man kann auch einen relativen Pfad von der aktuellen Seite angeben. Beispielsweise würde src="script.js" genau wie src="./script.js" eine Datei "script.js" im aktuellen Ordner bedeuten.
Wir können auch eine vollständige URL angeben. Zum Beispiel:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
Um mehrere Skripte anzuhängen, verwenden Sie mehrere Tags:
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> …
Bitte beachten Sie:
In der Regel werden nur einfachste Skripte in HTML umgesetzt. Komplexere Dateien befinden sich in separaten Dateien.
Der Vorteil einer separaten Datei besteht darin, dass der Browser sie herunterlädt und in seinem Cache speichert.
Andere Seiten, die auf dasselbe Skript verweisen, nehmen es aus dem Cache, anstatt es herunterzuladen, sodass die Datei tatsächlich nur einmal heruntergeladen wird.
Das reduziert den Traffic und macht die Seiten schneller.
Wenn src gesetzt ist, wird der Skriptinhalt ignoriert.
Ein einzelnes <script> -Tag darf nicht sowohl das src Attribut als auch den Code enthalten.
Das wird nicht funktionieren:
<script src="file.js"> Warnung(1); // Der Inhalt wird ignoriert, da src gesetzt ist </script>
Wir müssen entweder ein externes <script src="…"> oder ein reguläres <script> mit Code wählen.
Das obige Beispiel kann in zwei Skripte aufgeteilt werden, um zu funktionieren:
<script src="file.js"></script> <Skript> Warnung(1); </script>
Wir können ein <script> -Tag verwenden, um JavaScript-Code zu einer Seite hinzuzufügen.
Die type und language sind nicht erforderlich.
Ein Skript in einer externen Datei kann mit <script src="path/to/script.js"></script> eingefügt werden.
Es gibt noch viel mehr über Browser-Skripte und deren Interaktion mit der Webseite zu erfahren. Bedenken Sie jedoch, dass dieser Teil des Tutorials der JavaScript-Sprache gewidmet ist, sodass wir uns nicht mit browserspezifischen Implementierungen davon ablenken sollten. Wir werden den Browser als Möglichkeit zum Ausführen von JavaScript verwenden, was zum Online-Lesen sehr praktisch ist, aber nur eine von vielen.
Wichtigkeit: 5
Erstellen Sie eine Seite, die die Meldung „Ich bin JavaScript!“ anzeigt.
Machen Sie es in einer Sandbox oder auf Ihrer Festplatte, egal, stellen Sie einfach sicher, dass es funktioniert.
Demo in neuem Fenster
<!DOCTYPE html>
<html>
<Körper>
<Skript>
alarm( "Ich bin JavaScript!" );
</script>
</body>
</html>Öffnen Sie die Lösung in einer Sandbox.
Wichtigkeit: 5
Nehmen Sie die Lösung der vorherigen Aufgabe. Zeigen Sie eine Warnung an. Ändern Sie es, indem Sie den Skriptinhalt in eine externe Datei alert.js extrahieren, die sich im selben Ordner befindet.
Öffnen Sie die Seite und stellen Sie sicher, dass die Warnung funktioniert.
Der HTML-Code:
<!DOCTYPE html> <html> <Körper> <script src="alert.js"></script> </body> </html>
Für die Datei alert.js im selben Ordner:
alarm("Ich bin JavaScript!");