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

Teil 1: Erste Schritte

Was ist Javascript?

JavaScript ist eine neu entwickelte Sprache für das Scripting, die von Netscape entwickelt wurde. Mit JavaScript können Sie einfach interaktive Webseiten erstellen. In diesem Handbuch erfahren Sie, was mit JavaScript getan werden kann und noch mehr - sehen Sie, wie es gemacht wird.

JavaScript ist nicht Java!

Viele Leute glauben, dass JavaScript dasselbe ist wie Java, nur weil diese Sprachen ähnliche Namen haben. In der Praxis ist dies nicht der Fall. Ich denke, dass es jetzt unnötig wird, Ihnen alle Unterschiede zwischen diesen Sprachen zu veranschaulichen - 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

Laufendes Javascript

Was muss getan werden, um in JavaScript geschriebene Skripte auszuführen? Sie benötigen einen talentierten Browser, um mit JavaScript zu arbeiten - zum Beispiel Netscape Navigator (ab Version 2.0) oder Microsoft Internet Explorer (MSIE - ab 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 können Sie feststellen, dass viele gute Dialogmittel nur mit den Befehlen HTML erstellt werden können. Um mehr über HTML zu erfahren, 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> Auf einen Blick schlägt das Beispiel eine reguläre HTML-Datei vor. Die einzige Neuerung hier ist das System:
<script language="JavaScript"> document.write("А это JavaScript!") </script> Dies ist echter JavaScript-Code. Um zu sehen, wie dieses Skript funktioniert, schreiben Sie dieses Beispiel als reguläre HTML-Datei und laden Sie es auch in einen Browser, der die JavaScript-Sprache unterstützt.
Und das ist das Ergebnis der Ausführung dieser Datei (wenn Sie einen Browser verwenden, der JavaScript-Unterstützung hat, erhalten Sie 3 Zeilen):

Dies ist ein normales HTML-Dokument.

Wieder der HTML-Akt.

Ich muss zugeben, dass dieses Skript in keiner Weise so nützlich ist - das gleiche könnte auch einfacher in reinem HTML geschrieben werden. Ich wollte Ihnen nur das Tag-Tag <script> zeigen. Alles zwischen <script> -Tags </ script> wird auch als JavaScript-Code interpretiert. Hier sehen Sie ein Muster, wie Sie die Anweisung document.write () verwenden , einen der wichtigsten Befehle, die in der JavaScript-Programmierung 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 schreibt den Ausdruck "Und das ist JavaScript!" .

Nicht-Javascript-Browser

Und wie sieht unsere Seite aus, wenn der Browser JavaScript nicht akzeptiert? 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 JavaScript-Code in unserem Programm in Klartext in der Mitte des HTML-Dokuments geschrieben wird. Natürlich ging das nicht in unsere Absichten ein. Bei diesem Abenteuer gibt es ein spezielles Werkzeug, um den Quellcode des Skripts vor den alten Browserversionen zu verbergen - wir werden für dieses Kommentar ein Tag aus dem HTML verwenden - <! - -> . Als Ergebnis wird die neue 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 wird der Browser ohne JavaScript-Unterstützung gedruckt: Это обычный HTML документ. Опять акт HTML. Это обычный HTML документ. Опять акт HTML. Ohne das 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, ist das Ziel, den Ausdruck des Skriptcodes auf älteren Browsern zu verhindern - aber nicht weniger als ein Leser kann diesen Code über den Menüpunkt 'Dokumentquelle anzeigen' 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 für die Programmierung in der JavaScript-Sprache. Ereignisse werden in erster Linie durch irgendwelche Aktionen des Benutzers ausgelöst. Wenn er auf eine Schaltfläche klickt, tritt das Ereignis "Click" auf . Wenn der Mauszeiger einen Hypertext-Link überquert, wird das MouseOver- Ereignis ausgelöst . Es gibt verschiedene Arten von Ereignissen.
Wir können unser JavaScript-Programm auf einige davon reagieren lassen. Zusätzlich kann dies mit speziellen Eventdekorationsprogrammen erfolgen. Durch Klicken auf eine Schaltfläche kann ein Popup-Fenster erstellt werden. Dies bedeutet, dass die Erstellung des Fensters eine Antwort auf das Klickereignis sein sollte. Ein Event-Handler-Programm, das wir in diesem Fall verwenden sollten, heißt onClick . Außerdem teilt es dem Computer mit, was zu tun ist, wenn dieses Ereignis eintritt. Der folgende Code stellt ein einfaches Beispiel des onClick- Ereignisprogramms dar: <form><input type="button" value="Click me" onClick="alert('Yo')"></form>

Dieses Beispiel verfügt über einige neue Funktionen - berücksichtigen Sie sie im Zeitplan. Sie können hier beobachten, dass wir mit einem Knopf ein Formular erstellen (wie ein HTML-Problem zu behandeln ist, so dass wir es hier nicht berücksichtigen). Die erste neue Funktion ist onClick = "alert ('Yo')" im <input> -Tag. Wie wir bereits gesagt haben, bestimmt diese Eigenschaft, was zu welchem ​​Zeitpunkt der Knopf gedrückt wird. Wenn das Click- Ereignis die Räumlichkeiten besitzt, ist der Computer gezwungen, einen Alert- Anruf ("Yo") zu tätigen. Dies ist auch ein Beispiel JavaScript-Code (Beachten Sie, dass wir in diesem Fall nicht einmal das <script> -Tag verwenden).
Die alert () -Funktion ermöglicht es Ihnen, Drop-Down-Fenster zu erstellen. Wenn Sie es aufrufen, müssen Sie eine Zeichenfolge in Klammern angeben. In unserem Fall ist das "Yo" . Darüber hinaus wird es der Text sein, der in der Dropdown-Liste angezeigt wird. So, zu welcher Zeit der Leser zu welcher Zeit auf den Knopf klickt, erzeugt unser Skript ein Fenster, das den Text "Yo" enthält .
Ein weiteres Merkmal dieses Beispiels kann zu einiger Verwirrung führen: Im Befehl document.write () verwendeten wir doppelte Anführungszeichen ("), nur in alert () -Systemen - nur einfache Anführungszeichen. Warum? In den meisten Fällen können Sie beide Arten von Anführungszeichen verwenden. Trotzdem Wir haben das letzte Beispiel onClick = "alert ('Yo')" geschrieben - das heißt, wir haben auch doppelte und einfache Anführungszeichen verwendet. Wenn wir onClick = "alert (" Yo ")" geschrieben haben , konnte der Computer unsere nicht verstehen Skript, da es unklar ist, auf welches der Elemente des Systems die Beziehung zwischen Es gibt keine onClick-Ereignisse, für die nur - daher sind Sie auch in diesem Fall gezwungen, beide Arten von Anführungszeichen zu verschachteln.Es hat keine Bedeutung in welcher Reihenfolge Sie Anführungszeichen verwendet haben - zuerst double, dann single oder umgekehrt. auch onClick = 'alert ("Yo")' .

Sie können im Skript viele verschiedene Arten von Ereignisdekorationsfunktionen verwenden. Informationen über einige von ihnen erhalten wir in dieser Beschreibung, aber nicht über alle. Bitte kontaktieren Sie daher das entsprechende Nachschlagewerk, 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 . Diese Einschränkung wird aus Sicherheitsgründen auferlegt. Sie können das gleiche Popup-Fenster auch mit der prompt () -Methode erstellen. In diesem Fall beginnt das Fenster jedoch mit der Wiedergabe des vom Leser eingegebenen Textes. Daher kann ein Skript, das von einem Angreifer geschrieben wurde, die Form einer Systemnachricht annehmen und den Leser auch bitten, ein bestimmtes Passwort einzugeben. Und wenn der Text in das Popup-Fenster passt, wird dem Leser klar, dass dieses Fenster von einem Webbrowser erstellt wurde, nicht jedoch von Ihrem Betriebssystem. Da diese Einschränkung aus Sicherheitsgründen besteht, können Sie die angezeigte Nachricht nicht löschen.

Funktionen

In den meisten unserer JavaScript-Programme werden wir Funktionen verwenden. Deshalb muss ich jetzt über dieses wichtige Element der Sprache berichten.
In den meisten Fällen sind Funktionen nur ein Mittel, um mehrere Befehle miteinander zu verknüpfen. Lassen Sie uns für das Beispiel ein Skript schreiben, das einen Text dreimal hintereinander druckt. Betrachten Sie für die Quelle den 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 solch ein Skript schreibt den folgenden Text Доброе дело пожаловать на мою страницу! Это JavaScript! Доброе дело пожаловать на мою страницу! Это JavaScript! drei Mal. Wenn Sie sich den Quellcode des Skripts ansehen, können Sie sehen, dass eine bestimmte Menge seines Codes dreimal wiederholt wurde, um das gewünschte Ergebnis zu erhalten. Ist es wirklich effektiv? Nein, wir können das gleiche Problem noch besser lösen. Wie wäre es mit einem solchen 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 nun miteinander verknüpft sind und auch ausgeführt werden können, wenn die angegebene Funktion aufgerufen wird. Darüber hinaus enthält unser Beispiel drei Aufrufe dieser Funktion. Sie sehen, dass wir die Zeichenfolge myFunction () dreimal nach der Definition der Funktion selbst geschrieben haben. So wurden einmal drei Anrufe getätigt. Dies bedeutet wiederum, dass der Inhalt dieser Funktion (die in geschweiften Klammern angegebenen Befehle) dreimal ausgeführt wurden.
Da dies ein ziemlich einfältiges Beispiel für die Verwendung einer Funktion ist, könnten Sie ein Problem haben, warum die eigentlichen Funktionen selbst in JavaScript so wichtig sind. Nachdem Sie diese Beschreibung gelesen haben, werden Sie zweifellos ihre Vorteile verstehen. Es ist die Fähigkeit, Variablen zu übertragen, wenn eine Funktion aufgerufen wird, was unseren Skripten echte Flexibilität verleiht - was wir sind, werden wir später sehen.

Funktionen können in ähnlicher Weise in Verbindung mit Ereignisbeendigungen 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 durch Drücken der Taste die Funktion Berechnung aufgerufen () . Wie Sie sehen können, führt diese Funktion einige Berechnungen mit den Variablen x , y und result durch . Wir können eine Variable mit dem Schlüsselwort var definieren. Variablen können verwendet werden, um verschiedene Werte zu speichern - Zahlen, Textzeilen usw. Also die Skriptzeile var result = x + y; Weist den Browser an, dass es notwendig ist, die Ergebnisvariable zu erstellen, um dort auch das Ergebnis der x + y- Rechenoperation (d. H. 5 + 12) zu platzieren. Danach wird die Zahl 17 in die Ergebnisvariable gestellt . In diesem Fall bewirkt der Befehl alert (result) dasselbe wie alert (17) . Mit anderen Worten, wir erhalten eine Drop-Down-Box, in der die Nummer 17 geschrieben wird.