JavaScript: Difference between revisions

← Older edit

JavaScript (view source)

Revision as of 11:56, 27 November 2013

2,327 bytes added , 27 November 2013

m

→‎Auf Elemente zugreifen

Mm

emailconfirmed, nsInternRO, nsInternRW, Administrators

3,356

edits

@@ Line 1: / Line 1: @@
 == 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]])
-Auch Director, Acrobat-PDFs und viele andere Dokumente und Programme unterstützen JavaScript.
+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">
@@ Line 81: / Line 82: @@
 </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 Auswahl der Elemente entgegennehmen:
+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">
 var domElement = document.querySelector("#changeMe");
@@ Line 93: / Line 94: @@
 Mit "Event-Handlern" kann man auf Ereignisse und Benutzeraktionen reagieren.
 Die Einfachste Möglichkeit ist den Event-Handler direkt ins HTML einzubinden:
+'''HTML und JavaScript:'''
 <source lang="HTML4Strict">
 <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>
-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 Handler:
+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">
 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;
 </source>
-statt .onclick kann auch .addEventListener("click", changeElement, false) benutzt werden, eine Form, die mehr Kontrolle bietet:
+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">
 domElement.addEventListener("click", changeElement, false)
@@ Line 117: / Line 140: @@
 ===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">
@@ Line 179: / Line 202: @@
 var tuWas = function(){
      //befehle hier
-}
+};
 </source>
 beide haben den selben Effekt und sind nur andere Schreibweisen, beide Funktionen werden durch
@@ Line 187: / Line 210: @@
 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  mit Kommanta getrennt zwischen die runden Klammern.
+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" >