Bureaucrats, emailconfirmed
1,221
edits
no edit summary
(Pergola) |
No edit summary |
||
| Line 31: | Line 31: | ||
</html> | </html> | ||
</source> | </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 == | == 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/> | 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> | 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 == | == Event-Handler == | ||
| Line 71: | Line 89: | ||
Der Event-Handler im Beispiel ist <tt>onclick="function();"</tt> | 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:''' | '''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>. | 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>. | ||
<source lang="JavaScript" line start="15"> | <source lang="JavaScript" line start="15"> | ||