Teil 1: Erste Schritte

Was ist JavaScript

JavaScript - neu Stimmen Skripte zu erstellen, entwickelt von Netscape. mit JavaScript Sie leicht interaktive Web-Seite erstellen können. In diesem Handbuch werden Sie sehen, was mit Hilfe der JavaScript getan werden kann und noch mehr - zu sehen , wie es gemacht wird .

JavaScript - ist nicht Java!

Viele Menschen glauben, dass JavaScript - es ist die gleiche Sache wie auch die Java, aber nur, weil diese Sprachen haben ähnliche Namen. In der Tat ist die Besetzung nicht. Ich denke, dass jetzt überflüssig wäre Sie alle Unterschiede zwischen den beiden Sprachen zu veranschaulichen - so erinnere mich nur genau das, was die JavaScript - es ist nicht Java.
Weitere Informationen zu den betroffenen Thema finden Sie in der Einführung einer Veröffentlichung auf der Netscape-Website Lächeln glücklich

Run JavaScript

Was Sie brauchen, Skripte in JavaScript geschrieben laufen zu tun? Sie werden einen Browser benötigen mit dem talentierten JavaScript zu arbeiten - wie Netscape Navigator (ab Version 2.0) oder Microsoft Internet Explorer (MSIE - seit Version 3.0). Da diese beiden Browsern weit verbreitet sind, waren viele Menschen in der Lage mit Skripten in JavaScript geschrieben zu arbeiten. Zweifellos ist dies ein wesentliches Argument bei der Bereitstellung von Wahl JavaScript, um als Mittel, um Ihre Web-Seiten zu verbessern.
HTML - Natürlich, bevor Sie dieses Handbuch lesen, sollten Sie die Grundlagen einer Sprache lernen. In diesem Fall können Sie, dass viele gute Wege des Dialogs finden nur die HTML-Befehle nur mit erstellt werden. Weitere Informationen über die HTML-Sprache, ist es am besten, eine Suche nach dem Begriff 'html' in der Suchmaschine Yahoo zu initiieren.

Platzieren auf JavaScript HTML-Seite

JavaScript-Script-Code razmeschetsya direkt auf der HTML-Seite. Um zu sehen, wie dies geschehen ist, lassen Sie uns das einfältige Beispiel folgen:
<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> > document.write ( " <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> document.write("А это JavaScript!") </script><br>Опять акт HTML. </body></html> <br> <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 der Probe eine normale HTML - Datei vermuten lässt. Die einzige Neuheit hier - das System:
<script language="JavaScript"> document.write("А это JavaScript!") </script> document.write ( " <script language="JavaScript"> document.write("А это JavaScript!") </script> Dieser JavaScript - Code ist wahr. Zu beobachten, wie dieses Skript funktioniert, schreiben Sie dieses Muster als eine normale HTML-Datei und laden Sie sie an den Browser, der die Unterstützung der JavaScript-Sprache hat.
Und das ist das Ergebnis dieser Datei (wenn Sie einen Browser verwenden, der JavaScript-Unterstützung hat, dann werden Sie 3 Zeilen sein):

Dies ist eine normale HTML - Dokument.

Auch hier ist der Akt der HTML.

Ich muss zugeben, dass dieses Skript nicht so nützlich ist - das gleiche wie mehr als nur würde man eine "reine" Sprache HTML verlassen. Ich wollte nur zeigen Sie nur Tag-Tag <script>. Alles, was zwischen den Tags <script> steht und </ script> wird als Code in JavaScript interpretiert. Hier sehen Sie eine Probe von ähnlichen Anweisungen unter Verwendung von document.write () - eine der wichtigsten Befehle in der Programmiersprache JavaScript verwendet. Document.write () Befehl an verwendet wird , zu welchem Zeitpunkt Sie etwas in der aktuellen Handlung schreiben müssen (in diesem Fall, das ist unser HTML-Dokument). Also unser kleines JavaScript-Programm in HTML-Dokument, um die Worte zu kritzeln "Das JavaScript!" .

Browser ohne JavaScript - Unterstützung

Und wie wird unsere Seite aussehen, wenn der Browser JavaScript nicht akzeptieren? Browser, hat keine JavaScript-Unterstützung, "weiß nicht", wie das Tag <script>. Sie ignorieren sie und drucken alle Codes im Klartext hinter ihm stand. Mit anderen Worten, wird der Leser sehen, wie JavaScript-Code in unserem Programm wird im Klartext direkt in der Mitte des HTML-Dokument eingegeben werden. Natürlich kommt es nicht in unserem Plan. Dieses Abenteuer hat ein spezielles Tool den Quellcode des Skripts von älteren Browsern zu verstecken - wir werden für diesen Kommentar - Tag von HTML verwenden - <! - ->. Als Ergebnis wird die neu Variation 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> ist <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> > <! - hide von alten Browsern document.write ( " <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> / script> <br> <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 zu drucken: Это обычный HTML документ. Опять акт HTML. - Это обычный HTML документ. Опять акт HTML. Это обычный HTML документ. Опять акт HTML. Ohne die HTML-Kommentar - Tag - Browser , ohne JavaScript - Unterstützung veröffentlicht werden: Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. - Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Bitte beachten Sie, dass Sie einfach nicht vollständig die JavaScript-Quellcode zu verstecken. Was wir hier tun, hat es die Liste von Script-Code in alten Browsern zu verhindern - aber es hat zumindest kann der Leser diesen Code mit Hilfe des Elements "Dokument anzeigen Quelle" Menü. Es gibt keine ähnliche Art und Weise etwas zu verbergen aus dem Quellcode sehen (und zu sehen, wie er einen anderen Trick gemacht).

Geschehen

Events und Event-Handler sind sehr wichtiger Bestandteil der Programmierung in JavaScript. Veranstaltungen, der erste Weg, durch den Benutzer oder andere Aktionen ausgelöst. Wenn er auf eine Schaltfläche klickt, stammt Ereignis "Klick". Wenn der Mauszeiger jede Hypertext - Link Kreuze - Stiele Mouseover - Ereignis. Es gibt verschiedene Arten von Ereignissen.
Wir können unsere JavaScript-Programm die Antwort auf einige von ihnen zu machen. Darüber hinaus kann dies durch spezielle Programmereignis beendet erfolgen. Zum Beispiel kann ein Popup-Fenster als Folge der Klick auf die Schaltfläche erstellt werden. Dies bedeutet , dass die Schaffung des Fensters eine Reaktion auf ein Ereignis Lauge sein sollte - Click. Programm - ein Event - Handler, die wir in diesem Fall verwendet werden soll, wird onClick genannt. Darüber hinaus teilt es dem Computer, was geschieht, wenn dieses Ereignis zu tun. Das folgende Codebeispiel ist naiver Schlichtprogramm Ereignisse die OnClick: <form><input type="button" value="Click me" onClick="alert('Yo')"></form> , <form><input type="button" value="Click me" onClick="alert('Yo')"></form>

Dieses Modell verfügt über einige neue Features - Blick auf ihre Routine. Sie können dann feststellen, dass wir ein Formular mit einer Schaltfläche erstellen (als Akt - das Problem der HTML, so halten dies in irgendeiner Weise dann werden wir nicht). Die erste neue Funktion - onClick = "alert ( 'Yo ')" im Tag <input>. Wie wir gesagt haben, bestimmt dieser Eigenschaft, was zu welchem ​​Zeitpunkt geschieht, wenn die Taste gedrückt wird. Wenn also der Raum Ereignis Click hat, wird der Computer gezwungen , einen Anruf alert ( 'Yo') zu machen. Es hat auch Beispielcode in JavaScript (Beachten Sie, dass wir in diesem Fall nicht einmal die <script> Tag verwendet haben).
Alert () Funktion können Sie ein Dropdown-Feld zu erstellen. Wenn Sie es nennen müssen Sie einige Klammern Linie. In diesem Fall 'Yo'. Darüber hinaus wird es wie einmal der Text sein, der in der Dropdown-Feld angezeigt. Also, was Zeit zu welcher Zeit der Leser auf die Schaltfläche klickt, erstellt das Skript ein Fenster mit dem Text 'Yo' enthält.
Einige Verwirrung kann ein weiteres Merkmal der Probe führen: dem Team die document.write (), die wir verwenden doppelte Anführungszeichen ( "), nur das System aufmerksam zu machen () - nur einzelne Warum In den meisten Fällen Sie beide Arten von Anführungszeichen verwenden können, doch in.?. Finishing Probe schrieben wir onClick = "alert ( 'Yo' )" - das heißt, wir haben als Doppel verwendet, und einfache Anführungszeichen Wenn wir onClick = "alert (" Yo "schrieb )", ist der Computer nicht in der Lage , dies zu verstehen. Skript, so ist klar, welches Element des Systems ein Verhältnis der Funktion beendet onClick-Ereignis, genau das - es gibt keinen Grund, sind Sie auch in diesem Fall verpflichtet, beide Arten von Anführungszeichen im Besitz Angelegenheit nicht zu wechseln, was Routine Sie Zitate verwendet - .. erste Doppel, nur dann einzelne oder umgekehrt. Das heißt, Sie können nur als onClick = schreiben "alert (" Yo " )."

Sie können das Skript in vielen verschiedenen Arten von Veranstaltungen Finishing-Funktionen verwenden. Weitere Informationen über einige von ihnen bekommen wir in dieser Beschreibung, aber nicht auf alle. Deshalb finden Sie in das entsprechende Verzeichnis, wenn Sie wissen wollen, welche Event-Handler noch da sind.

Also, wenn Sie mit Netscape Navigator - Browser, enthält das Popup - Fenster Text, der an die JavaScript - Funktion Alarm übergeben wurde. Eine solche Beschränkung ist aus Sicherheitsgründen verhängt. Das gleiche kann erstellen auch die Eingabeaufforderung () -Methode im Dropdown-Feld verwendet wird. Doch in diesem Fall wird reproduzieren die Box den Text durch das Lesegerät eingegeben. Und weil das Skript von einem Angreifer geschrieben wurde, kann die Form einer Systemmeldung übernehmen und den Leser bitten, ein Passwort einzugeben. Und wenn der Text in der Dropdown-Fenster passt, so wird der Leser zu verstehen gegeben, dass das Fenster durch Web-Browser erstellt wurde, aber nicht von Ihrem Betriebssystem. Darüber hinaus, da diese Einschränkung aus Gründen der Sicherheit auferlegt wird, kann man einfach nicht nehmen, wie nur die Nachricht zu löschen, das erscheint.

Funktionen

Die meisten unserer Programme in der Sprache verwenden wir JavaScript-Funktionen. Deshalb, auch jetzt muss ich über dieses wichtige Element der Sprache zu sprechen.
In den meisten Fällen sind die Funktionen nur ein Mittel, mehrere Befehle miteinander zu verknüpfen. Lassen Sie uns, zu probieren, ein Skript zu schreiben, die einen bestimmten Text ausgibt, dreimal hintereinander. Um die Quelle ungekünstelt Ansatz untersuchen: <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> <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> Und das Skript den folgenden Text schreiben Доброе дело пожаловать на мою страницу! Это JavaScript! Доброе дело пожаловать на мою страницу! Это JavaScript! drei Mal. Wenn Sie sich den Quellcode des Skripts suchen, kann es gesehen werden, dass das gewünschte Ergebnis ein bestimmter Prozentsatz seines Codes zu erhalten, wurde dreimal wiederholt. Ist es effektiv? Nein, können wir das gleiche Problem noch besser zu lösen. Wie wäre es dieses Skript das gleiche Problem zu lösen: <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> / html> In diesem Skript definieren wir eine Funktion, bestehend aus den folgenden Strings: 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 , die innerhalb der geschweiften Klammern sind - {} - zum myFunction () Funktion gehören. Dies bedeutet, dass beide Teams document.write () nun auch miteinander verbunden ausgeführt werden kann, wenn diese Funktion aufrufen. Darüber hinaus haben in der Tat unsere Probe drei Anrufe diese Funktion - Sie können sehen , dass wir myFunction () Zeile dreimal wieder , nachdem sie gegeben , eine Definition der Funktion selbst schreiben. Das estkak einmal machte auch drei Anrufe. Wiederum bedeutet dies, dass die Inhalte der Funktionen (Befehle in geschweiften Klammern) wurden in dreifacher Ausführung durchgeführt.
Da es ganz ungekünstelt Verwendung Beispielfunktion ist, dann könnte man ein Problem sein, aber warum genau diese Funktionen sind so wichtig, in JavaScript. Nach dem Lesen dieser Beschreibung werden Sie sicherlich verstehen, auch zu ihren Gunsten. Die Möglichkeit der Übertragung der Variablen in einem Funktionsaufruf gibt unseren Skripten echte Flexibilität - was es ist, werden wir später sehen.

Ähnliche Funktionen können in Verbindung mit Verfahren Ereignis beendet werden. Betrachten Sie das nachfolgende 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> </ head> <body> <form> <input type = "button" value = "Berechnen" onClick = "Berechnung ()"> </ form> </ body> </ <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 das dieses Beispiel zu testen:

Hier wird , wenn Sie auf den Button ruft die Berechnung () Funktion. Wie Sie sehen können, führt diese Funktion einige Berechnungen, die Variablen X, y und Ergebnis. Die Variable können wir mit dem Schlüsselwort var bestimmen. Zahlen, Strings von Text und etc. - Variablen können unterschiedliche Werte zu speichern, verwendet werden, So ist die Linie Skript var result = x + y; Es teilt dem Browser mit, dass Sie auch eine Variable Ergebnis auf das Ergebnis der arithmetischen Operation x + y setzen erstellen müssen (dh 5 + 12). Danach wird die Zahl 17 in der variablen Ergebnis angeordnet werden. In diesem Fall Alarmbefehl (Ergebnis) macht das Gleiche wie auch Alarm (17). Mit anderen Worten, bekommen wir ein Popup-Fenster, in dem die Zahl 17 geschrieben wird.