emailconfirmed, nsInternRO, nsInternRW, Administrators
3,356
edits
mNo edit summary |
|||
(7 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
== Hallo Welt == | == Hallo Welt == | ||
JavaScript heißt eigentlich [http://www.ecma-international.org/memento/TC39.htm ECMA Script] und hat nichts mit JAVA zu tun: Die JavaScript Sprache erhielt ihren Namen lediglich, weil zur Zeit ihrer Einführung in den WebBrowser die Programmiersprache [[JAVA]] sehr populär war und man dachte, das wäre ein Marketing-Vorteil. | |||
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]]) | Wenn wir von JavaScript sprechen, meinen wir meistens die Implementierung im WebBrowser. Hier ist JavaScript 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]]) | ||
Aber auch viele andere Programme unterstützen JavaScript oder ECMA-ähnliche Dialekte, so z.B. Actionscript (Flash), Director, Acrobat-PDFs oder sogar Illustrator, um nur einige zu nennen. | |||
<source lang="html4strict" line start="1" highlight="8"> | <source lang="html4strict" line start="1" highlight="8"> | ||
Line 81: | Line 82: | ||
</source> | </source> | ||
Mit [[HTML5]] wurden auch neue JavaScript Funktionen eingeführt. Eine der interessantesten ist ein | Mit [[HTML5]] wurden auch neue JavaScript Funktionen eingeführt. Eine der interessantesten ist ein komfortabler (aber im Vergleich zu getElementByID etwas langsamerer) 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 93: | Line 94: | ||
Mit "Event-Handlern" kann man auf Ereignisse und Benutzeraktionen reagieren. | Mit "Event-Handlern" kann man auf Ereignisse und Benutzeraktionen reagieren. | ||
Die Einfachste Möglichkeit ist den Event-Handler direkt ins HTML einzubinden: | Die Einfachste Möglichkeit ist den Event-Handler direkt ins HTML einzubinden: | ||
'''HTML und JavaScript:''' | |||
<source lang="HTML4Strict"> | <source lang="HTML4Strict"> | ||
<p><a href="#" onclick="alert('Hallo Welt!');">Rufe JavaScript auf</a></p> | <p><a href="#" onclick="alert('Hallo Welt!');">Rufe JavaScript auf</a></p> | ||
Line 98: | Line 101: | ||
Der Event-Handler im Beispiel ist <tt>onclick="..."</tt> | Der Event-Handler im Beispiel ist <tt>onclick="..."</tt> | ||
Besser ist es aber, HTML und Javascript zu trennen, und die Event-Handler im Javscript hinzuzufügen. Dazu holt man sich das Dom-Element, und gibt diesem einen | Besser ist es aber, HTML und Javascript zu trennen, und die Event-Handler im Javscript hinzuzufügen. Dazu holt man sich das Dom-Element, und gibt diesem einen Händler: | ||
'''In HTML:''' | |||
<source lang="HTML5"> | |||
<p id="changeMe">Rufe JavaScript auf</p> | |||
</source> | |||
'''In JavaScript:''' | |||
<source lang="JavaScript"> | <source lang="JavaScript"> | ||
function changeElement(e){ | function changeElement(e){ | ||
e.target.style.color="red"; | e.target.style.color="red"; | ||
} | } | ||
var domElement = document.getElementById("changeMe"); | // bisherige Variante: | ||
//var domElement = document.getElementById("changeMe"); | |||
// besser (moderner und schneller, aber nicht in allen älteren Browsern implementiert) | |||
var domElement = document.querySelector("#changeMe"); | |||
domElement.onclick= changeElement; | domElement.onclick= changeElement; | ||
</source> | </source> | ||
document.querySelector benutzt [[CSS]] Syntax, in diesem Beispiel steht die Raute # bei #changeMe für eine ID (id="changeMe"). | |||
Es gibt nur drei Selektortypen in CSS: | |||
* HTML-Selectoren (p, div, a usw...) <sup>vordefiniert</sup> | |||
* Klassen (.myStyle, .warning usw...) <sup>freie Benennung</sup> | |||
* IDs (#header, #content, #clickButton, usw...) <sup>freie Benennung</sup> | |||
Es ist wirklich hilfreich, sich in [[CSS]] einzulesen, um damit gut umgehen zu können. Der Vorteil von .querySelector gegenüber .getElementByID ist, dass es bedeutend schneller ist, da nicht das ganze DOM durchsucht werden muss und dass es sehr viel bequemer zu schreiben ist. Außerdem unterstützt .querySelector auch Pseudo-Selektoren und Regular Expressions. .querySelector macht auch den Einsatz von jQuery in 50% aller Fälle überflüssig, da jQuery häufig nur wegen der einfach zu notierenden Syntax <tt>$('#changeMe')</tt> genutzt wird. Das Gleiche erreicht man mit nativem JavaScript mit <tt>document.querySelector('#changeMe')</tt> | |||
=== onClick vs. addEventListener === | |||
Das Problem mit .onclick (und allen anderen "on..."-Event-Handlern) ist, dass jedes Element nur einen .onclick-Handler haben kann. Besser ist es .addEventListener("click", changeElement, false) zu verwenden, damit können nämlich beliebig viele Event-Callbacks (Funktionen) registriert werden: | |||
<source lang="JavaScript"> | <source lang="JavaScript"> | ||
domElement.addEventListener("click", changeElement, false) | domElement.addEventListener("click", changeElement, false) | ||
Line 117: | Line 140: | ||
===Handler wieder löschen bzw. un-registrieren=== | ===Handler wieder löschen bzw. un-registrieren=== | ||
Eventhandler kann man in der .on...-syntax durch überschreiben wieder loswerden. Dabei wird nicht die Funktion gelöscht, sondern die "Verbindung" zwischen Event und Funktion. | Eventhandler kann man in der .on...-syntax durch überschreiben wieder loswerden. Dabei wird nicht die Funktion gelöscht, sondern die "Verbindung" zwischen Event und Funktion. Dieses Verhalten ist nicht immer erwünscht und löst manchmal auch wichtige bestehende Verbindungen (z.B. in einer verwendeten JavaScript-Library), daher sollte prinzipiell die addEventListener Methode verwendet werden. | ||
<source lang="JavaScript"> | <source lang="JavaScript"> | ||
Line 131: | Line 154: | ||
<source lang="JavaScript"> | <source lang="JavaScript"> | ||
function changeElement(e){ | function changeElement(e){ | ||
e.target.style.color="red"; | e.target.style.color="red"; | ||
} | } | ||
</source> | </source> | ||
Line 172: | Line 195: | ||
<source lang="JavaScript" > | <source lang="JavaScript" > | ||
function tuWas(){ | function tuWas(){ | ||
//befehle hier | //befehle hier | ||
} | } | ||
</source> | </source> | ||
Line 178: | Line 201: | ||
<source lang="JavaScript" > | <source lang="JavaScript" > | ||
var tuWas = function(){ | var tuWas = function(){ | ||
//befehle hier | //befehle hier | ||
} | }; | ||
</source> | </source> | ||
beide haben den selben Effekt und sind nur andere Schreibweisen, beide Funktionen werden durch | beide haben den selben Effekt und sind nur andere Schreibweisen, beide Funktionen werden durch | ||
Line 187: | Line 210: | ||
ausgeführt. | ausgeführt. | ||
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 | 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" > | ||
Line 194: | Line 217: | ||
Bei der Definition der Funktion müssen zwischen die runden Klammern Variablennamen geschrieben werden, die dann die Werte der übergebenen Argumente annehmen. | 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) { | ||
alert(fragt+" sagt: ist heute Webtech?"); | alert(fragt+" sagt: ist heute Webtech?"); | ||
alert(antwortet +" sagt: ja!" | alert(antwortet +" sagt: ja!" | ||
} | } | ||
</source> | </source> | ||
Line 287: | Line 310: | ||
== 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. Objekte in Javascript sind einfach zusammengehörige | 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 von Namen und Daten (Strings, Zahlen, Funktionen, anderen Objekten) Ein Objekt wird durch geschweifte Klammern begonnen und beendet, Bezeichner und Wert werden durch einen ":" getrennt, Bezeichner- und Werpaare werden durch "," getrennt. | ||
<source lang="JavaScript" line> | |||
var objektname = { | |||
"name" : "Wert als String", | |||
"nocheiner" : 12344 | |||
} | |||
</source> | |||
auf die Werte in dem Objekt wird über die Punkt-Syntax zugegriffen: Zwischen Objektname und Eigenschaftsname wird ein Punkt geschrieben. | |||
<source lang="JavaScript" line> | |||
var einString = objektname.name | |||
</source> | |||
Schreibt also den Wert "Wert als String" der Eigenschaft "name" des Objekts "objektName" in die Variable "einString". | |||
Wenn eine Eigenschaft des Objektes selber ein Objekt ist kann die Punktsyntx weiter geschachtelt werden: | |||
<source lang="JavaScript" line> | |||
meinObjekt.unterObjekt.wertVonUnterObjekt | |||
</source> | |||
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. | 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 | 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. ein neues ''Objekt'' <tt>myDate</tt> aus dem ''date-Objekt'' <tt>Date</tt> erstellt man so: <source lang="JavaScript">var myDate = new Date();</source> | 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> | ||
Line 432: | Line 474: | ||
* [http://web.uni-weimar.de/medien/wiki/index.php5/File:Webgrundlagen_wki_025-028.zip Kursbegleitende Quelldateien 025-028.zip] | * [http://web.uni-weimar.de/medien/wiki/index.php5/File:Webgrundlagen_wki_025-028.zip Kursbegleitende Quelldateien 025-028.zip] | ||
* [http://de.selfhtml.org/javascript/index.htm SelfHTML JavaScript] | * [http://de.selfhtml.org/javascript/index.htm SelfHTML JavaScript] | ||
* [http://eloquentjavascript.net/contents.html Eloquent Javascript] interaktives Tutorial, beschäftigt sich hauptsächlich mit Javascript selbst und wenig mit DOM, also der direkten Veränderung von Websites. | * [http://eloquentjavascript.net/contents.html Eloquent Javascript] interaktives Tutorial, beschäftigt sich hauptsächlich mit Javascript selbst und wenig mit DOM, also der direkten Veränderung von Websites. | ||
* [http://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Inhalt WikiBooks: JavaScript] | * [http://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Inhalt WikiBooks: JavaScript] |