| Javascript ist eine moderne, aber sehr einfach anwendbare Programmiersprache für Webseiten. | Auf dieser Seite werden einige typische Anwendungen von Javascript Live demonstriert. |
 Javascript
|
ECMAScript für HTML und XML |
| HTML-Links | Start von Javascript-Funktionen mit Hyperlinks |
| document.write | Javascript schreibt HTML-Quelltext |
| CSS | Layout und Formatierung mit Javascript programmieren |
| DOM | Voller Javascript-Zugriff auf alle Elemente |
| ECMASCRIPT | Javascript in XML-Dokumenten |
| Bibliotheken | Wiederverwendbare Javascript-Programme |
Start von Javascript-Funktionen mit HTML-Links |
|
|
●
Javascript-Blöcke befinden sich innerhalb von
<script></script>-Elementen. Sie können sich an jeder beliebigen
Stelle im Quelltext einer Webseite befinden. ● Im Normalfall erstellt man ein Javascript-Element im <head> einer Webseite und sammelt dort alle Javascript-Elemente. Damit wird gewährleistet, dass alle Javascript-Variablen und -Funktionen bereits bekannt sind, wenn der Aufbau der Webseite mit <body> beginnt. |
Webseite mit Javascript:
<html>
<head> ...
<script type="text/javascript">
</head>... </script> <body> ... </body> </html> |
Beispiel:● Diese Javascript-Funktion finden sie im <head> dieser Webseite. (Jeder Browser bietet die Möglichkeit, den Quelltext von Webseiten anzuzeigen, meist im Menü 'Ansicht' und bei Rechtsklick in die Webseite.)● Eine Javascript-Funktion ist ein kleines Programm, welches nur auf Aunweisung ausgeführt wird. Das Programm besteht in diesem Falle aus einer Zeile: alert öffnet ein kleines Alarm-Fenter und zeigt den Text an. ● Innerhalb des <script>-Blocks können sie beliebige weitere Javascript-Programme erstellen. |
<script type="text/javascript">
function test() {
alert("Hier ist Javascript"):
}
</script>
|
|
Start von Javascript-Funktionen: Dafür gibt es mehrere Möglichkeiten. ● Die einfachste ist das Anklicken eines <a>-Hyperlinks im <body> der Webseite. Ein derartiger Link beginnt mit 'javascript:' und führt nicht auf eine andere Webseite, sondern startet das angegebene Javascript-Programm. ● Alternativ können sie das HTML-Element <button> verwenden. ● Klicken sie auf das Wort 'Test' oder auf diesen |
Manueller Start durch Klick auf Hyperlink oder Button: |
Javascript schreibt HTML-Quelltext |
|
|
Mit Javascript können sie 'Dynamische Webseiten' erstellen.
Solche Webseiten enthalten veränderliche Elemente. ● Ein Beispiel ist die aktuelle Uhrzeit (ihres eigenen PC). Die Anweisung Date().toLocaleString() erzeugt den Text mit der aktuellen Zeit, die Anweisung document.write schreibt diesen Text 'in die Webseite'. ● Dieses kleine Programm steht nicht im <head> der Webseite, sondern im <body> genau an jener Stelle, wo der Text erscheinen soll. ● Das Programm wird beim Laden der Webseite einmalig und automatisch ausgeführt. |
HTML-Beispiel:
Die aktuelle Uhrzeit ist
<script type="text/javascript"> document.write(new Date().toLocaleString());
</script>
|
|
Live-Javascript: Rechts die Wirkung des vorgestellten Programms - Wenn sie diese Seite nochmals laden, wird erneut die Zeit ihres PC bei Ausführung des Programms angezeigt, d.h. beim Laden der Webseite. |
Die aktuelle Uhrzeit ist
|
|
Mit der Javascript-Anweisung document.write lassen sich beliebige
Texte direkt in jede Webseite schreiben. Dieser Text kann HTML-Elemente (hier
rot) ebenso umfassen wie Daten (Text), z.B.
document.write("Das ist ein <b>fett</b>
gedrucktes Wort<br>");
|
In der Praxis verwendet man diese Methode natürlich nicht für gleichbleibende HTML-Elemente wie im Beispiel links , sondern nur dort, wo die Webseite je nach Programm unterschiedliche Elemente enthalten soll. |
Javascript und CSS |
|||||||||||||
|
Cascading StyleSheets (CSS) ist die
Standard-Methode zur Formatierung von HTML- und XML-Dokumenten.
Javascript hat vollen Zugriff auf die Formatierung aller Elemente von Webseiten. ♦ Details dazu im CSS-Kapitel. |
|
||||||||||||
|
Dieser Demo-Text wird nach ihren Angaben Live formatiert.
Klicken sie dazu in die Zellen der 'Befehls-Matrix'.
Alle Änderungen werden mit kleinen Javascript-Programmen und CSS-Technik durchgeführt. |
|||||||||||||
Javascript und DOM |
|
|
●
Das Document Object Model (DOM) ist ein
'Hierarchischer Baum' von Elementen, der jeder Webseite und jedem XML-Dokument zugrunde liegt. ● Jedes Element und alle Daten einer Webseite (oder eines beliebigen XML-Dokuments) haben ihren genau definierten Platz im DOM-Baum des Dokuments, z.B. die Überschrift dieser Webseite, dieser Absatz, seine linke und rechte Spalte, ebenso der Text, den sie gerade lesen.
●
Javascript hat vollen Zugriff auf alle Elemente, d.h. man kann damit neue Elemente erzeugen,
vorhandene verändern oder löschen, usw.
Live-Demo für Elemente in diesem Absatz: |
●
Mit Javascript erstellte Live-Änderungen am DOM einer Webseite finden
sie nicht im HTML-Quelltext, sie werden nur auf der
Live-Webseite ausgeführt. ● Die Ausführung erfordert fortgeschrittene Javascript-Kenntnisse, deshalb wird der Quelltext der verwendeten Programme hier nicht angeführt. ● Bei Interesse finden sie die Javascript-Funktionen im Quelltext dieser Webseite. ♦ Details dazu im DOM-Kapitel. |
ECMAScript in XML-Dokumenten |
|
|
Javascript kann unter der Bezeichnung ecmascript in jedem XML-Dokument
verwendet werden. XML ist eine ganze Familie
von Dokumenten, welche Programme und Daten enthalten können.
Bekannte Mitglieder sind z.B. XHTML
(Webseiten sehr ähnlich HTML) oder SVG
(Objektgrafik). XML ist wesentlich 'strenger' mit den Syntax-(Grammatik)-Regeln. Daher ist es notwendig, den Javascript-Quelltext mit der CDATA-Anweisung (Beispiel rechts) aus dem XML-Quelltext auszunehmen. Die Punkte deuten Javascript-Quelltext an, der genauso erstellt wird wie in HTML-Dokumenten. |
XHTML:
<script type="text/ecmascript">
<![CDATA[ . . . ]]> </script> |
| Ein besonderer Vorteil von Javascript ist die Möglichkeit, beliebige XML-Dokumente nach den gleichen Regeln und mit den gleichen Mewthoden zu steuern wie HTML. So kann z.B. jede SVG-Grafik mit Javascript gestaltet oder animiert werden. | |
Javascript-Bibliotheken |
|
|
●
Normalerweise ist die Reichweite von Javascript-Blöcken auf ein Dokument
(z.B. eine Webseite) beschränkt. ● Javascript-Quelltext lässt sich jedoch in eigene Bibliotheks-Dateien *.js auslagern. Solche Bibliotheken können von jeder Webseite 'geladen' werden, wo sie verwendet werden sollen. Die darin enthaltenen Javascript-Programme und Daten werden nur einmalig zentral angelegt und können dann auf vielen Webseiten verwendet werden. ● Das Web von PS-Trainer macht ausgiebig von dieser Möglichkeit Gebrauch. Auf den einzelnen Webseiten befinden sich nur mehr individuelle Javascript-Programme. ● Eine Javascript-Bibliothek enthält nur Javascript-Quelltext als 'reinen Text' (ASCII-Code), d.h. keine HTML-Elemente wie <script></script>. |
Beispiel für eine Javascript-Bibliothek "demo.js": ● Das Beispiel definiert die globale Variable my_browser und die Funktion write_browser. Beide können auf jeder Webseite verwendet werden, wenn diese Bibliotheks-Datei geladen ist.
var my_browser = navigator.userAgent;
function write_browser() { document.write("Browser = "+my_browser);
}
|
|
Einbindung einer Javascript-Bibliothek: ● Das Beispiel rechts zeigt, wie eine Javascript-Bibliothek (hier 'demo.js') in den <head></head> einer Webseite eingebunden wird. ● Die Verarbeitung mehrerer <script>-Elemente erfolgt nach der Reihenfolge im HTML-Quelltext. Daher folgen die individuellen Javascript-Programme jeder einzelnen Webseite erst nach der Einbindung der Bibliotheken: So besteht die Möglichkeit, allgemeine Programme (aus der Bibliothek) nachträglich lokal zu modifizieren. |
HTML:
<head>
...
<script type="text/javascript" src="demo.js"></script>
<script> // lokale Javascript-Programme
</script></head> |
Anwendung:Die Variablen und Funktionen der Bibliothek werden genauso verwendet wie lokale Variablen und Funktionen. Rechts ein HTML-Beispiel: Funktion write_browser gibt ihren Text genau dort aus, wo sie im <body> der Webseite verwendet wird. |
HTML:
<script type="text/javascript">
write_browser();
</script>
|
|
Rechts die Live-Demonstration der Funktion write_browser. Der Text wird einmalig beim Laden der Seite erstellt, ändert sich jedoch je nach dem von ihnen verwendeten Browser. |
|
