JavaScript: Difference between revisions

Line 31:

</html>

</source>

Javascript benutzt eine Syntax, die C, C++ und Java ähnlich ist: {} umschließen Anweisungsblöcke; Das Semikolon schließt einen Ausdruck ab. Nach einem Zeilenumbruch wird u.U. während der Ausführung automatisch ein Semikolon eingefügt ([http://inimino.org/~inimino/blog/javascript_semicolons Regeln dafür]). Trotzdem sollte man die Semikola nach einem Ausdruck schreiben und sich nicht auf die Automatik verlassen. Leerzeichen sind unrelevant.

== Einbinden von JavaScript in HTML-Dateien ==

Line 54:

Line 56:

Firefox interpretiert die verkürzte XML-Notation nicht korrekt: <source lang="HTML4Strict"><script type="text/javascript" src="meinScript.js" /></source><br/>

Deshalb sollten externe Scripte immer wie folgt eingebunden werden: <source lang="HTML4Strict"><script type="text/javascript" src="meinScript.js"></script></source>

==Auf Elemente zugreifen==

Im Javascript-Code kann auf Elemente im HTML zugegriffen werden:

<p id="changeMe">Lorem Ipsum</p>

</source>

//im Javascript

var domElement = document.getElementById("changeMe");

domElement.style.color = red;

</source>

document.getElementById() holt das Element mit der übergebenen Id (hier:"changeMe"). In dem Beispiel ist das das <p>. In der folgenden Zeile wird dann die Schriftfarbe geändert.

Eine ähnliche Funktion ist document.getElementsByTagName(), diese gibt kein Element direkt zurück sondern ein Array mit allen Elementen die dieses Tag haben.

== Event-Handler ==

Line 71:

Line 89:

Der Event-Handler im Beispiel ist <tt>onclick="function();"</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:

function changeElement(e){

e.target.style.color="red";

}

var domElement = document.getElementById("changeMe");

domElement.onclick= changeElement;

</source>

statt .onclick kann auch .addEventListener("click", changeElement, false) benutzt werden, eine Form die mehr Kontrolle bietet:

domElement.addEventListener("click", changeElement, false)

</source>

'''Weitere Event-Handler sind:'''

Line 101:

Line 136:

Funktionen sind gruppierte Einheiten, die eine bestimmte Aufgabe haben. Eine Funktion erkennt man an den beiden runden Klammern. Üblicherweise sollten Funktionen durch ein Verb benannt sein. Z.B. <tt>doSomething();</tt> oder <tt>getItem();</tt>.

~~Das Semikolon schließt einen Ausdruck ab. Zeilensprünge oder Leerzeichen sind unrelevant; der JS Compiler sieht alles als eine "Zeile" an, bis er auf ein Semikolon trifft.~~

@@ Line 31: / Line 31: @@
 </html>
 </source>
+Javascript benutzt eine Syntax, die C, C++ und Java ähnlich ist: {} umschließen Anweisungsblöcke; Das Semikolon schließt einen Ausdruck ab. Nach einem Zeilenumbruch wird u.U. während der Ausführung automatisch ein Semikolon eingefügt ([http://inimino.org/~inimino/blog/javascript_semicolons Regeln dafür]). Trotzdem sollte man die Semikola nach einem Ausdruck schreiben und sich nicht auf die Automatik verlassen. Leerzeichen sind unrelevant.
 == Einbinden von JavaScript in HTML-Dateien ==
@@ Line 54: / Line 56: @@
 Firefox interpretiert die verkürzte XML-Notation nicht korrekt: <source lang="HTML4Strict"><script type="text/javascript" src="meinScript.js" /></source><br/>
 Deshalb sollten externe Scripte immer wie folgt eingebunden werden: <source lang="HTML4Strict"><script type="text/javascript" src="meinScript.js"></script></source>
+==Auf Elemente zugreifen==
+Im Javascript-Code kann auf Elemente im HTML zugegriffen werden:
+<source lang="HTML4Strict" start="9">
+<!-- in der HTML Datei-->
+<p id="changeMe">Lorem Ipsum</p>
+</source>
+<source lang="JavaScript" line start="15">
+//im Javascript
+var domElement = document.getElementById("changeMe");
+domElement.style.color = red;
+</source>
+document.getElementById() holt das Element mit der übergebenen Id (hier:"changeMe"). In dem Beispiel ist das das <p>. In der folgenden Zeile wird dann die Schriftfarbe geändert.
+Eine ähnliche Funktion ist document.getElementsByTagName(), diese gibt kein Element direkt zurück sondern ein Array mit allen Elementen die dieses Tag haben.
 == Event-Handler ==
@@ Line 71: / Line 89: @@
 Der Event-Handler im Beispiel ist <tt>onclick="function();"</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:
+<source lang="JavaScript" line start="15">
+function changeElement(e){
+e.target.style.color="red";
+}
+var domElement = document.getElementById("changeMe");
+domElement.onclick= changeElement;
+</source>
+statt .onclick kann auch .addEventListener("click", changeElement, false) benutzt werden, eine Form die mehr Kontrolle bietet:
+<source lang="JavaScript" line start="15">
+domElement.addEventListener("click", changeElement, false)
+</source>
 '''Weitere Event-Handler sind:'''
@@ Line 101: / Line 136: @@
 Funktionen sind gruppierte Einheiten, die eine bestimmte Aufgabe haben. Eine Funktion erkennt man an den beiden runden Klammern. Üblicherweise sollten Funktionen durch ein Verb benannt sein. Z.B. <tt>doSomething();</tt> oder <tt>getItem();</tt>.
-Das Semikolon schließt einen Ausdruck ab. Zeilensprünge oder Leerzeichen sind unrelevant; der JS Compiler sieht alles als eine "Zeile" an, bis er auf ein Semikolon trifft.
 <source lang="JavaScript" line start="15">