This page has been robot translated, sorry for typos if any. Original content here.

Teil 1: Erste Schritte

Was ist JavaScript?

JavaScript ist ein neu entwickeltes Scripting-Tool von Netscape. Mit JavaScript können Sie einfach interaktive Webseiten erstellen. In diesem Tutorial erfahren Sie, was Sie mit JavaScript tun können und noch mehr - sehen Sie, wie es gemacht wird.

JavaScript ist überhaupt kein Java!

Viele Leute glauben, dass JavaScript das gleiche wie Java ist, nur weil diese Sprachen ähnliche Namen haben. In der Klasse selbst ist das nicht so. Ich glaube, dass es jetzt unnötig sein wird, Ihnen alle Unterschiede zwischen diesen Sprachen zu veranschaulichen - also denken Sie daran, dass JavaScript nicht Java ist.
Weitere Informationen zu diesem Thema finden Sie in der auf der Netscape-Website veröffentlichten Einführung Lächeln glücklich

Starten von JavaScript

Was muss ich tun, um in JavaScript geschriebene Skripte auszuführen? Sie benötigen einen Browser, der talentiert ist, um mit JavaScript zu arbeiten - zum Beispiel Netscape Navigator (seit Version 2.0) oder Microsoft Internet Explorer (MSIE - seit Version 3.0). Da diese beiden Browser weit verbreitet sind, konnten viele Leute mit in JavaScript geschriebenen Skripten arbeiten. Zweifellos ist dies ein bedeutendes Argument dafür, die JavaScript-Sprache als Mittel zur Verbesserung Ihrer Webseiten zu wählen.
Bevor Sie diesen Leitfaden lesen, sollten Sie sich natürlich mit den Grundlagen einer anderen Sprache - HTML - vertraut machen. In diesem Fall werden Sie vielleicht feststellen, dass viele gute Werkzeuge für den Dialog nur mit HTML-Befehlen erstellt werden können. Um weitere Informationen über die HTML-Sprache zu erhalten, empfiehlt es sich, auf dem Yahoo-Suchserver nach dem Schlüsselwort "html" zu suchen.

Platzieren von JavaScript auf einer HTML-Seite

Der JavaScript-Skriptcode wird direkt auf der HTML-Seite platziert. Um zu sehen, wie das gemacht wird, schauen wir uns das folgende einfache Beispiel an:
<html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> document.write("А это JavaScript!") </script><br>Опять акт HTML. </body></html> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> document.write("А это JavaScript!") </script><br>Опять акт HTML. </body></html> In der Hauptansicht wird eine normale HTML-Datei angezeigt. Die einzige Neuerung hier ist das System:
<script language="JavaScript"> document.write("А это JavaScript!") </script> Dies ist ein echter JavaScript-Code. Um zu sehen, wie dieses Skript funktioniert, schreiben Sie dieses Beispiel als normale HTML-Datei und laden Sie es in einen Browser, der JavaScript unterstützt.
Und das ist das Ergebnis der Ausführung dieser Datei (wenn Sie einen Browser mit JavaScript-Unterstützung verwenden, dann haben Sie 3 Zeilen):

Dies ist ein normales HTML-Dokument.

Wieder der Akt von HTML.

Ich muss zugeben, dass dieses Skript nicht so nützlich ist - das Gleiche könnte auch einfacher in einer "reinen" HTML-Sprache geschrieben werden. Ich wollte dir nur ein Tag-Tag <script> zeigen. Alles, was zwischen den <script> -Tags </ script> steht, wird auch als JavaScript-Code interpretiert. Hier sehen Sie ähnlich das Muster der Verwendung der Anweisung document.write () - einer der wichtigsten Befehle, die bei der Programmierung in JavaScript verwendet werden. Der Befehl document.write () wird verwendet, zu welcher Zeit es notwendig ist, etwas in den aktuellen Akt zu schreiben (in diesem Fall ist dies unser HTML-Dokument). Unser kleines JavaScript-Programm in einem HTML-Dokument lautet "This is JavaScript!" .

Browser ohne JavaScript-Unterstützung

Und wie sieht unsere Seite aus, wenn der Browser JavaScript nicht wahrnimmt? Browser, die keine JavaScript-Unterstützung haben, kennen das <script> -Tag auch nicht. Sie ignorieren es und drucken auch alle nachfolgenden Codes als Klartext. Mit anderen Worten, der Leser wird sehen, wie der in unserem Programm angegebene JavaScript-Code direkt in der Mitte des HTML-Dokuments in Klartext geschrieben wird. Das ist natürlich nicht in unsere Pläne eingegangen. Bei diesem Adventure gibt es ein spezielles Tool, um den Quellcode des Skripts vor älteren Versionen von Browsern zu verbergen - dazu verwenden wir ein Kommentar-Tag aus HTML - <! - -> . Als Ergebnis wird die neu erstellte Variante unseres Quellcodes wie folgt aussehen: <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> In diesem Fall beginnt der Browser ohne JavaScript-Unterstützung zu drucken: Это обычный HTML документ. Опять акт HTML. Это обычный HTML документ. Опять акт HTML. Und ohne ein HTML-Kommentar-Tag würde ein Browser ohne JavaScript-Unterstützung drucken: Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Bitte beachten Sie, dass Sie den JavaScript-Quellcode nicht vollständig ausblenden können. Was wir hier tun, hat das Ziel, den Ausdruck des Skript-Codes in alten Browsern zu verhindern - aber in jedem Fall wird der Leser in der Lage sein, diesen Code über den Menüpunkt "Dokumentenquelle anzeigen" zu sehen. Es gibt keine ähnliche Möglichkeit, etwas vor der Anzeige in Ihrem Quellcode zu verbergen (und zu sehen, wie dieser oder jener Trick ausgeführt wird).

Ereignisse

Events Event-Handler sind ein sehr wichtiger Teil der JavaScript-Programmierung. Ereignisse werden zum einen durch die eine oder andere Aktion des Benutzers ausgelöst. Wenn es auf eine Schaltfläche klickt, tritt das Ereignis "Click" auf . Wenn der Mauszeiger einen Hypertext-Link kreuzt, tritt das MouseOver- Ereignis auf . Es gibt verschiedene Arten von Ereignissen.
Wir können unser JavaScript-Programm zwingen, auf einige von ihnen zu reagieren. Zusätzlich kann dies mit Hilfe von speziellen Programmen für das Beenden von Events geschehen. Als Ergebnis des Klickens auf die Schaltfläche kann ein Popup-Fenster erstellt werden. Dies bedeutet, dass die Erstellung des Fensters eine Reaktion auf das Click- Ereignis sein muss. Der Event-Handler, den wir in diesem Fall verwenden müssen, heißt onClick . Außerdem teilt es dem Computer mit, was zu tun ist, wenn das Ereignis eintritt. Der folgende Code stellt ein einfaches Beispiel des onClick- Ereignisvervollständigungsprogramms dar: <form><input type="button" value="Click me" onClick="alert('Yo')"></form>

Dieses Beispiel enthält einige neue Funktionen - betrachten Sie sie in der richtigen Reihenfolge. Sie können hier beobachten, dass wir ein Formular mit einem Knopf erstellen (wie das funktioniert - das Problem der HTML-Sprache, so dass wir es hier nicht berücksichtigen). Die erste neue Funktion ist onClick = "alert ('Yo')" im <input> -Tag. Wie bereits erwähnt, bestimmt diese Eigenschaft, was passiert, wenn die Schaltfläche gedrückt wird. Wenn also das Click- Ereignis gehört, wird der Computer gezwungen, einen Alert- Anruf ("Yo") auszuführen. Dies ist auch ein Beispielcode in JavaScript (Beachten Sie, dass wir in diesem Fall nicht einmal das <script> -Tag verwenden).
Die Funktion alert () ermöglicht das Erstellen von Dropdown-Boxen. Wenn Sie es aufrufen, müssen Sie eine Zeichenfolge in Klammern angeben. In unserem Fall ist das "Yo" . Darüber hinaus wird der Text eines Tages erscheinen, der in der Dropdown-Box angezeigt wird. Zu diesem Zeitpunkt erstellt unser Skript zu dem Zeitpunkt, an dem der Leser zu dem Zeitpunkt, zu dem die Schaltfläche angeklickt wird, ein Fenster mit dem Text "Yo" .
Einige Verwirrung kann durch eine andere Besonderheit dieses Beispiels verursacht werden: Im Befehl document.write () verwendeten wir doppelte Anführungszeichen ("), nur alert () - Systeme sind nur einzelne.) Warum? In den meisten Fällen können Sie beide Arten von Anführungszeichen verwenden. wir haben onClick = "alert ('Yo')" geschrieben - das heißt, wir haben auch doppelte Anführungszeichen verwendet, auch einfache Anführungszeichen. Wir würden onClick schreiben = "alert (" Yo ")" , der Computer konnte unser nicht verstehen Skript, da unklar wird, zu welchem ​​der Elemente des Systems die Relation der Funktion gehört onClick-Ereignisse nur, zu denen Sie nicht, so müssen Sie auch beide Arten von Anführungszeichen in diesem Fall verschachteln. Es kennt nicht die Bedeutung der Reihenfolge, in der Sie die Anführungszeichen verwendet - zuerst double, nur dann single, oder umgekehrt. Das heißt, Sie können einfach schreiben auch onClick = 'alert ("Yo")' .

Sie können im Skript viele verschiedene Arten von Ereignisbeendigungen verwenden. Informationen über einige von ihnen erhalten wir in dieser Beschreibung, aber nicht alle. Sehen Sie sich daher das entsprechende Verzeichnis an, wenn Sie wissen möchten, welche Event-Handler noch existieren.

Wenn Sie den Netscape Navigator-Browser verwenden, enthält das Dropdown-Feld den Text, der an die JavaScript-Warnfunktion übergeben wurde . Eine solche Einschränkung wird aus Sicherheitsgründen überlagert. Sie können das gleiche Dropdown-Feld auch mit der prompt () -Methode erstellen. In diesem Fall beginnt das Fenster jedoch, den vom Leser eingegebenen Text zu reproduzieren. Daher kann ein Skript, das von einem Angreifer geschrieben wurde, die Form einer Systemnachricht annehmen und den Leser auffordern, ein Kennwort einzugeben. Und wenn der Text in die Dropdown-Box passt, wird dem Leser mitgeteilt, dass dieses Fenster von einem Webbrowser erstellt wurde, aber nicht von Ihrem Betriebssystem. Da diese Einschränkung aus Sicherheitsgründen besteht, können Sie die angezeigte Nachricht nicht einfach übernehmen.

Funktionen

In den meisten unserer JavaScript-Programme werden wir Funktionen verwenden. Deshalb muss ich jetzt über dieses wichtige Element der Sprache sprechen.
In den meisten Fällen sind Funktionen nur ein Mittel, um mehrere Befehle miteinander zu verknüpfen. Lassen Sie uns zum Beispiel ein Skript schreiben, das einen bestimmten Text dreimal hintereinander druckt. Für die Quelle nehmen wir einen einfachen Ansatz: <html><script language="JavaScript"><!-- hide document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); // --></script></html> <html><script language="JavaScript"><!-- hide document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); // --></script></html> <html><script language="JavaScript"><!-- hide document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); // --></script></html> Und so ein Skript schreibt den folgenden Text Доброе дело пожаловать на мою страницу! Это JavaScript! Доброе дело пожаловать на мою страницу! Это JavaScript! drei Mal. Wenn Sie sich den Quellcode des Skripts ansehen, können Sie sehen, dass ein bestimmter Anteil seines Codes dreimal wiederholt wurde, um das gewünschte Ergebnis zu erhalten. Ist es effektiv? Nein, wir können das gleiche Problem noch besser lösen. Wie wäre es mit diesem Skript zur Lösung des gleichen Problems?: <html><script language="JavaScript"><!-- hide function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // --></script></html> <html><script language="JavaScript"><!-- hide function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // --></script></html> <html><script language="JavaScript"><!-- hide function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // --></script></html> In diesem Skript haben wir eine Funktion definiert, die aus den folgenden Zeilen besteht: function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } Alle Skriptbefehle in geschweiften Klammern - {} - gehören zur Funktion myFunction () . Dies bedeutet, dass beide document.write () - Befehle jetzt miteinander verknüpft sind und auch ausgeführt werden können, wenn die angegebene Funktion aufgerufen wird. Darüber hinaus hat unser Beispiel drei Aufrufe dieser Funktion - Sie können sehen, dass wir die myFunction () -Zeile dreimal nach der Definition der Funktion selbst geschrieben haben. Das heißt, sobald sie auch drei Anrufe gemacht haben. Dies bedeutet wiederum, dass der Inhalt dieser Funktion (die in geschweiften Klammern angegebenen Befehle) dreimal ausgeführt wurden.
Da dies ein recht einfaches Beispiel für die Verwendung der Funktion ist, könnten Sie ein Problem haben, warum genau diese Funktionen in JavaScript so wichtig sind. Nach dem Lesen dieser Beschreibung werden Sie zweifellos ihre Nützlichkeit verstehen. Es ist die Fähigkeit, Variablen beim Aufruf einer Funktion zu übergeben, die unseren Skripten echte Flexibilität verleiht - was es ist, werden wir später sehen.

Funktionen können in ähnlicher Weise in Verbindung mit Ereignisbeendigungsverfahren verwendet werden. Betrachten Sie das folgende Beispiel: <html><head><script language="JavaScript"><!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> <html><head><script language="JavaScript"><!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> <html><head><script language="JavaScript"><!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> Hier können Sie dieses Beispiel testen:

Hier wird beim Drücken der Taste die Funktion calculation () aufgerufen. Wie Sie sehen können, führt diese Funktion einige Berechnungen durch und verwendet dabei die Variablen x , y, auch result . Wir können eine Variable mit dem Schlüsselwort var definieren. Variablen können verwendet werden, um verschiedene Mengen zu speichern - Zahlen, Textzeilen usw. Also die Skriptzeile var result = x + y; teilt dem Browser mit, dass es notwendig ist, die Ergebnisvariable zu erstellen und dort auch das Ergebnis der arithmetischen Operation x + y (dh 5 + 12) zu setzen. Danach wird die Menge 17 in das variable Ergebnis gebracht . In diesem Fall bewirkt der Befehl alert (result) dasselbe wie alert (17) . Mit anderen Worten, wir erhalten eine Drop-Down-Box, in der die Menge 17 geschrieben wird.