Hallo Welt! Ihre ersten JavaScript -Programme

Der erste Schritt zum Lernen von JavaScript -Programmierungen: Beginnen Sie mit "Hallo, Welt!"

Programmiersprache lernen und "Hallo, Welt!" Dies ist ein einfaches Programm, das den Ausdruck "Hallo, Welt!" Zur Konsole ausgibt und den Beginn Ihrer Programmierreise markiert. Wir werden dieser Tradition folgen und dieses Programm in JavaScript schreiben. Es wird eine einfache Aussage sein, die "Hallo, Welt!" Zur Konsole druckt.

Sie müssen Ihre häufig verwendete Konsole öffnen (Knoten -Repl, Browserkonsole oder ES6 -Konsole auf Webseiten). Sobald die Konsole geöffnet ist, geben Sie einfach den folgenden Code ein:

console.log('Hello, World!');

und drücken Sie Eingeben . Wenn alles gut geht, sollten Sie die Ausgabe "Hallo, Welt!"

Herzlichen Glückwunsch, Sie haben gerade Ihr erstes JavaScript -Programm geschrieben! Es mag trivial erscheinen, aber wie ein weiser Mann sagte, beginnt jeder Meister der Programmierung mit einer Codezeile (oder ähnlichem).

JavaScript -Anwendung in Browser

JavaScript ist eine interpretierte Sprache, in der eine Hostumgebung ausgeführt werden muss. Aufgrund seines Ursprungs wird JavaScript hauptsächlich in Browsern ausgeführt, kann aber auch in anderen Umgebungen ausgeführt werden. Der Knoten kann auch verwendet werden, um JavaScript auf dem Server auszuführen. Die häufigste Verwendung von JavaScript besteht jedoch immer noch darin, Webseiten interaktiv zu gestalten. Bevor wir fortfahren, sollten wir die Komposition der Webseite verstehen.

dreischichtige Struktur der Webseiten

Fast alle Webseiten bestehen aus drei Schlüsselelementen - HTML, CSS und JavaScript. HTML wird verwendet, um den Inhalt zu markieren.

Jede Schicht basiert auf dem Fundament der vorherigen Schicht. Eine Webseite funktioniert nur auf die HTML -Ebene. Tatsächlich entfernen viele Websites die CSS -Ebene am "nackten Tag". Websites, die nur HTML-Ebenen verwenden, werden in ihrer reinsten Form vorgestellt, die sehr altmodisch aussieht, aber dennoch voll funktionsfähig sein sollte.

Hierarchische Trennung

halten

Die Trennung des Fokus jeder Schicht, so dass jede Schicht nur für eine Sache verantwortlich ist, wird allgemein als bewährte Verfahren angesehen. Wenn Sie sie zusammenstellen, wird der gesamte Code in einer Datei gemischt, was zu "Etikettsuppe" oder "Code -Pasta" führt. Früher war dies die Standardmethode, um eine Website zu erstellen, und es gibt immer noch viele solche Beispiele online.

nicht-invasives JavaScript

Wenn JavaScript ursprünglich verwendet wurde, wurde es so konzipiert, dass es direkt in den HTML -Code eingefügt werden soll, wie im folgenden Beispiel gezeigt, eine Nachricht angezeigt wird, wenn eine Schaltfläche klickt:

<button id='button' href='#' onclick='alert("Hello World")'>Click Me</button>

Dies macht es schwierig zu erkennen, was los ist, da JavaScript -Code mit HTML gemischt wird. Dies bedeutet auch, dass der Code eng mit HTML gekoppelt ist, sodass Änderungen an HTML Änderungen am JavaScript -Code erfordern, um Bruch zu verhindern.

JavaScript -Code kann vom Rest von HTML getrennt werden, indem er in sein eigenes Tag platziert wird. Der folgende Code erzielt das gleiche Ergebnis wie oben:

console.log('Hello, World!');

Dies ist besser, da sich der gesamte JavaScript -Code an einem Ort zwischen zwei Skript -Tags befindet, anstatt sich mit HTML -Tags zu mischen.

Wir können einen Schritt weiter gehen und den JavaScript -Code von HTML und CSS vollständig trennen und in eine eigene Datei einfügen. Dies kann durch die Verwendung des SRC -Attributs im Skript -Tag erfolgen, um die zu verknüpfte Datei anzugeben:

<button id='button' href='#' onclick='alert("Hello World")'>Click Me</button>

Geben Sie den JavaScript -Code dann in eine Datei mit dem Namen main.js in demselben Verzeichnis wie das HTML -Dokument ein. Das Konzept der vollständigen Trennung von JavaScript-Code ist eines der Kernprinzipien des nicht-invasiven JavaScript.

In ähnlicher Weise sollten CSS in separate Dateien platziert werden, sodass der einzige Code auf der Webseite der tatsächliche HTML und ein Link zu den CSS- und JavaScript -Dateien ist. Dies wird oft als bewährte Verfahren und der Ansatz angesehen, der in diesem Buch übernommen wird.

selbstschließende Tag

Wenn Sie XML oder XHTML verwendet haben, haben Sie möglicherweise solche selbstbekannten Tags begegnet:

<button id='button'>Click Me</button>
<🎜>

Dies ist in HTML5 unnötig, aber es funktioniert immer noch.

elegante Herabstufung und progressive Verbesserung

elegantes Downgrade ist der Prozess des Erstellens einer Website, auf der sie in modernen Browsern mit JavaScript am besten funktioniert, aber dennoch mit angemessenen Standards in älteren Browsern oder wenn JavaScript oder einige seiner Funktionen nicht verfügbar sind. Ein Beispiel hierfür sind die Programme für HD -Sendungen (HD) - sie funktionieren am besten für HD -Fernseher, aber immer noch auf Standard -Fernseher. Diese Programme können sogar auf Schwarz -Weiß -Fernseher laufen.

Progressive Verbesserung ist der Prozess des Erstellens einer Webseite von Grund auf mit einem grundlegenden Funktionsniveau und fügen Sie dann zusätzliche Verbesserungen hinzu, wenn der Browser verfügbar ist. Wenn Sie dem dreischichtigen Prinzip folgen, verbessert die JavaScript-Ebene die Webseiten, anstatt ein integrales Element der Seite zu werden, dann sollte sich dies natürlich anfühlen. Ein Beispiel könnte ein Telefonunternehmen sein, das grundlegende Telefonanrufe anbietet. Wenn Ihr Telefon dies jedoch unterstützt, gibt es zusätzliche Dienste wie Anrufbearbeitung und Anrufnummer.

Wenn Sie JavaScript zu einer Webseite hinzufügen, sollten Sie immer den Ansatz berücksichtigen, den Sie wählen möchten. Versuchen Sie, mit vielen erstaunlichen Effekten zu beginnen, die Grenzen zu überschreiten und dann sicherzustellen, dass die Erfahrung für diejenigen, die möglicherweise nicht die neuesten und besten Browser haben, elegant herabgestuft werden? Oder möchten Sie zunächst eine funktionale Website erstellen, die auf den meisten Browsern ausgeführt wird, und dann JavaScript verwenden, um die Erfahrung zu verbessern? Die beiden Methoden sind ähnlich, aber die Feinheiten variieren.

Ihr zweites JavaScript -Programm

Wir werden dieses Kapitel mit einem zweiten JavaScript -Programm beenden, das im Browser ausgeführt wird. Dieses Beispiel ist komplexer als das vorherige mit vielen Konzepten, die in späteren Kapiteln ausführlicher eingeführt werden. Machen Sie sich also keine Sorgen, wenn Sie zu diesem Zeitpunkt nicht alles wissen! Ziel ist es, Ihnen die Fähigkeiten von JavaScript zu zeigen und einige wichtige Konzepte einzuführen, die in den kommenden Kapiteln eingeführt werden.

Wir werden die zuvor erwähnte Praxis des nicht-invasiven JavaScript befolgen und unseren JavaScript-Code in eine separate Datei einfügen. Erstellen Sie zuerst einen Ordner namens Rainbow. Erstellen Sie in diesem Ordner eine Datei namens Rainbow.html und eine andere Datei mit dem Namen main.js.

Beginnen wir mit HTML. Öffnen Sie Rainbow.html und geben Sie den folgenden Code ein:

console.log('Hello, World!');

(Der Rest des Inhalts ähnelt dem Originaltext, außer dass die Sprache angepasst und einige Absätze zusammengeführt werden, wodurch die ursprüngliche Bedeutung unverändert bleibt.)

zerstören Sie das Netzwerk nicht

Ein wichtiges Konzept in der JavaScript -Sprachentwicklung ist, dass es rückwärtskompatibel sein muss. Das heißt, der gesamte alte Code muss auf die gleiche Weise funktionieren, wenn sie von der Engine interpretiert werden, die die neue Spezifikation ausführt (es ist so, als würde PlayStation 4 noch in der Lage sein, Spiele zu führen, die für PlayStation 1, 2 und 3 erstellt wurden). Dies soll verhindern, dass JavaScript "das Web brechen", indem große Änderungen vorgenommen werden, die verhindern, dass alte Code auf einigen Websites wie erwartet in modernen Browsern ausgeführt wird.

Daher können neue Versionen von JavaScript keine Dinge tun, die in früheren Versionen von Sprachen unmöglich sind. Alles, was geändert wird, ist die Darstellung, die eine bestimmte Funktion implementiert, um das Schreiben zu erleichtern. Dies nennt man Syntax Sugar , da das Schreiben vorhandener Code -Snippets auf eine prägnantere und prägnantere Weise ermöglicht.

Die Tatsache, dass alle Versionen von JavaScript rückwärts kompatibel sind, bedeutet, dass wir den Übersetzer verwenden können, um unseren Code aus einer Version von JavaScript in eine andere zu konvertieren. Sie können beispielsweise Code mit der neuesten JavaScript -Version schreiben und in Version 5 -Code übersetzen, die in fast jedem Browser ausgeführt wird.

Es gibt jedes Jahr eine neue ECMascript -Version, was bedeutet, dass Browser bei der Implementierung der neuesten Funktionen möglicherweise immer etwas zurückbleiben (sie tun dies schneller, aber die meisten Browser dauern immer noch zwei Jahre, bis das ES6 -Modul nur sein kann unterstützt). Dies bedeutet, dass Sie, wenn Sie die neueste Codierungstechnologie verwenden möchten, möglicherweise einen Übersetzer (z. B. Babel) erhalten.

FAQ (FAQ) über Ihr erstes JavaScript -Programm

(Dieser Teil des Inhalts ähnelt dem Originaltext, aber die Sprache wurde angepasst, um ihn reibungsloser und natürlicher zu machen.)

Das obige ist der detaillierte Inhalt vonHallo Welt! Ihre ersten JavaScript -Programme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!