mNo edit summary |
|||
| Line 1: | Line 1: | ||
== Hallo Welt == | == Hallo Welt == | ||
JavaScript ist eine clientseitige Programmiersprache. Der Quellcode wird im Klartext an den Browser übertragen und erst dort (im Browser des Surfers) interpretiert und ausgeführt. Im Gegensatz | JavaScript ist eine clientseitige Programmiersprache. Der Quellcode wird im Klartext an den Browser übertragen und erst dort (im Browser des Surfers) interpretiert und ausgeführt. (Im Gegensatz z.B. zu dem serverbasierten [[PHP]]) | ||
Auch Director, Acrobat-PDFs und viele andere Dokumente und Programme unterstützen JavaScript. | Auch Director, Acrobat-PDFs und viele andere Dokumente und Programme unterstützen JavaScript. | ||
| Line 81: | Line 81: | ||
</source> | </source> | ||
Mit [[HTML5]] wurden auch neue JavaScript Funktionen eingeführt. Eine der interessantesten ist ein schnellerer Zugriff auf das DOM über die [[jQuery]]-ähnliche Funktion "querySelector()" und "querySelectorAll()" im document-Objekt, die einen CSS-Selektor-String zur | Mit [[HTML5]] wurden auch neue JavaScript Funktionen eingeführt. Eine der interessantesten ist ein schnellerer Zugriff auf das DOM über die [[jQuery]]-ähnliche Funktion "querySelector()" und "querySelectorAll()" im document-Objekt, die einen CSS-Selektor-String zur Auswahl der Elemente entgegennehmen: | ||
<source lang="JavaScript"> | <source lang="JavaScript"> | ||
var domElement = document.querySelector("#changeMe"); | var domElement = document.querySelector("#changeMe"); | ||
| Line 165: | Line 165: | ||
== Funktionen == | == Funktionen == | ||
Funktionen sind gruppierte Einheiten, die eine bestimmte Aufgabe haben. Ruft man eine Funktion auf, werden die Befehle aus der sie besteht ausgeführt. Der Aufruf einer Funktion geschieht durch die runden Klammern: "tuWas()" führt die Funktion "tuWas" aus. | Funktionen sind gruppierte Einheiten, die eine bestimmte Aufgabe haben. Ruft man eine Funktion auf, werden die Befehle, aus der sie besteht, ausgeführt. Der Aufruf einer Funktion geschieht durch die runden Klammern: "tuWas'''()'''" führt die Funktion "tuWas" aus. | ||
Üblicherweise sollten Funktionen durch ein Verb benannt sein. Z.B. <tt> | Üblicherweise sollten Funktionen durch ein Verb benannt sein. Z.B. <tt>calcSquare();</tt> oder <tt>getItem();</tt>. | ||
Ein Funktion kann auf verschiedene Weise definiert werden: | Ein Funktion kann auf verschiedene Weise definiert werden: | ||
| Line 187: | Line 187: | ||
ausgeführt. | ausgeführt. | ||
Funktionen können aber nicht nur einfach ausgeführt werden: Ihre | Funktionen können aber nicht nur einfach ausgeführt werden: Ihre Ausführung kann beeinflusst werden, indem der Funktion "Parameter" oder synonym "Argumente" übergeben werden. Beim Aufrufen schreibt die Argumente mit Kommanta getrennt zwischen die runden Klammern. | ||
<source lang="JavaScript" > | <source lang="JavaScript" > | ||
fragen("Jan","Michael"); | fragen("Jan","Michael"); | ||
</source> | </source> | ||
Bei der Definition der Funktion müssen zwischen die runden Klammern Variablennamen geschrieben werden, die dann die Werte der übergebenen | Bei der Definition der Funktion müssen zwischen die runden Klammern Variablennamen geschrieben werden, die dann die Werte der übergebenen Argumente annehmen. | ||
<source lang="JavaScript" > | <source lang="JavaScript" > | ||
var fragen = function(fragt, antwortet){ | var fragen = function(fragt, antwortet){ | ||
| Line 200: | Line 200: | ||
</source> | </source> | ||
In der Funktion gelten also die Variablen "fragt" und "antwortet". Beim Aufrufen werden die Werte den Variablen zugeordnet, also bei "fragen( | In der Funktion gelten also die Variablen "fragt" und "antwortet". Beim Aufrufen werden die Werte den Variablen zugeordnet, also bei "fragen('Jan','Michael');" bekommt der erste Parameter, "fragt", den Wert "Jan", der zweite Parameter, "antwortet", den Wert "Michael", somit bekommt man bei Ausführen von "fragen('Jan','Michael');" zuerst einen Alert mit dem Text | ||
"Jan sagt: "Ist heute Webtech" und dann einen mit "Michael sagt: ja!" | |||
== Variablen == | == Variablen == | ||
| Line 228: | Line 210: | ||
===Typen=== | ===Typen=== | ||
Im Gegensatz zu vielen anderen Sprachen, haben Variablen in JavaScript keine explizite Typ-Zuweisung (non-typecasted), | Im Gegensatz zu vielen anderen Sprachen, haben Variablen in JavaScript keine explizite Typ-Zuweisung (non-typecasted). Ein Typ ist die "Art" der Daten, die in der Variable gespeichert werden, z.B. Zahlen, Zeichenfolgen ("String") oder RegularExpressions. Bei Javascript muss der Typ nicht angegeben werden (in anderen Sprachen würde man sowas schreiben wie "var '''Number:'''myvar = 10") | ||
Trotz der nicht-expliziten Typzuweisung, gibt es in Javascript Objekte, die man mit primitiven Type verwechseln könnte: Numbers ([[int]], [[float]], ...), Strings ([[char]], [[string]]) und Boolean ([[bool]]). | Trotz der nicht-expliziten Typzuweisung, gibt es in Javascript Objekte, die man mit primitiven Type verwechseln könnte: Numbers ([[int]], [[float]], ...), Strings ([[char]], [[string]]) und Boolean ([[bool]]). | ||
| Line 247: | Line 229: | ||
// c ist nun ein String mit dem Wert "54"! | // c ist nun ein String mit dem Wert "54"! | ||
</source> | </source> | ||
Es ist allerdings keine gute Praxis, den Typ einer Variable zu ändern, da es den Code schlechter lesbar und unverständlich macht. | |||
====Explizite Typumwandlung==== | ====Explizite Typumwandlung==== | ||
Trotz der nicht expliziten Typen von JavaScript Variablen, lassen sich aber explizite Typumwandlungen (Typecasting) vornehmen. | Trotz der nicht expliziten Typen von JavaScript Variablen, lassen sich aber explizite Typumwandlungen (Typecasting) vornehmen. | ||
| Line 302: | Line 287: | ||
== Klassen und Objekte == | == Klassen und Objekte == | ||
JavaScript ist objektbasierte Programmiersprache (und gehört im weiteren Sinn zu den objektorientierten Programmiersprachen). In JS ist quasi alles ein Objekt | JavaScript ist objektbasierte Programmiersprache (und gehört im weiteren Sinn zu den objektorientierten Programmiersprachen). In JS ist quasi alles ein Objekt. Objekte in Javascript sind einfach zusammengehörige paare | ||
Das von anderen Sprachen bekannte Konzept einer "Klasse" gitb es in Javascript ''nicht''. Der Unterschied zwischen einer Klasse und einem Objekt ist, dass man die Vorlage eines Objektes ("Blueprint") als ''Klasse'' bezeichnet. Von einer Klasse können beliebig viele "Instanzen" erstellt werden. Wenn mit dem Schlüsselwort <tt>new MyClass()</tt> eine Instanz einer Klasse erstellt wurde, spricht man von einem Objekt. | |||
Diese strikte trennung existiert in Javscript nicht, Objekte werden intern durch kopien von bestehenden Objekten erzeugt, wobei es Eigenschaften gibt die "geerbt" werden, also Daten und Funktionen, die von allen neuen Objekten gemeinsam genutzt werden. Dies ist aber ein fortgeschrittenes Thema. Zum Einstieg reicht es aus, das neue Kopien meist mit dem Operator "new" erzeugt werden, eine Konvention übernommen aus anderen Programmiersprachen in denen mittels "new" ein neues Objekt aus einer Klasse erstellt wird. | |||
Z.B. | Z.B. ein neues ''Objekt'' <tt>myDate</tt> aus dem ''date-Objekt'' <tt>Date</tt> erstellt man so: <source lang="JavaScript">var myDate = new Date();</source> | ||
Nun kann man alle Eigenschaften und Methoden (=Funktionen) des Objektes mit Hilfe des "Punktsyntax" oder "Dot-Syntax" benutzen. Z.B.: <source lang="JavaScript">Document.print("Es ist " + myDate.getHours() + " Uhr.");</source> | Nun kann man alle Eigenschaften und Methoden (=Funktionen) des Objektes mit Hilfe des "Punktsyntax" oder "Dot-Syntax" benutzen. Z.B.: <source lang="JavaScript">Document.print("Es ist " + myDate.getHours() + " Uhr.");</source> | ||