Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005

Ü bersicht Allgemeines Entwicklungsgeschichte Funktionen Übungsbeispiele

J avascript...was ist das genau? Script-Sprache zur Verwendung innerhalb von HTML- Dokumenten Skriptsprache = Programmiersprache, die nicht direkt vom Prozessor ausgeführt wird, sondern von einem anderen Programm interpretiert wird Interpreter (Browser) JavaScript zur Gestaltung interessanter, interaktiver Seiten

J avascript...was ist das genau? kompakte überschaubare Sprache Voraussetzung für Erstellung: einfacher Text- Editor und ein JavaScript-fähiger Browser Direkte Weitergabe des Quellkodes ohne Umwandlung möglich

G eschichte von Netscape zunächst unter dem Code-Namen mocha, dann unter dem Namen Live-Script entwickelt Orientierung an Programmiersprache Java von Sun Nach Anerkennung als "legitimer" Ableger von Java folgte entgültige Namenswahl: JavaScript

G eschichte Mit Netscape 4.0 folgte JavaScript Version 1.2 Auf Basis von JavaScript 1.0 hat Microsoft ebenfalls einen Interpreter in den Internet Explorer integriert JScript Sprachumfänge sind nicht vollkommen deckungsgleich

F unktionsbeispiele die Überprüfung von Bedingungen (if... else) das Abarbeiten von Schleifen (for... while...) Durchführung von Berechnungen Überprüfung von Formularen vor dem Abschicken dynamisches Ändern von Farben dynamisches Austauschen von eingebundenen Bildern

E inbindung von Javascripts a) Entweder... wird der Quellcode direkt in die Datei eingebettet, in der sich auch der HTML-Code befindet b) Oder... der Quellcode wird in eine eigene Datei verlagert, auf welche von der Webseite verwiesen wird Zur Unterscheidung von Programmskript und Text wird folgendes Element eingefügt:

a) Einfache Modellform... hier steht das JavaScript-Programm... beziehungsweise

M usterwebseite

P osition des Scripts innerhalb des html- Körpers Das Element darf (fast) überall in einer Webseite enthalten sein Aber: es ist sinnvoll, script im Element head unterzubringen Außerdem sagt der Name des Elements noch gar nichts darüber aus, um welche Programmiersprache es sich bei dem Inhalt handelt

P osition des Scripts innerhalb des html- Körpers daher braucht der Browser noch den Hinweis, welche Art von Inhalt er in script vorfindet Hier die Unterscheidung zweier Attribute, language und type. Ersteres wurde von Netscape eingeführt, das zweite ist eine Vorgabe des HTML-Standards, die in der Praxis noch nicht relevant ist, die man aber schon jetzt einhalten kann.

b) Einbettung in eine eigene Datei JavaScript wird hier in Dateien mit der Endung.js gespeichert Um zum Beispiel auf eine Datei library.js zu verweisen, muss folgender Code in den Kopfbereich der Webseite gestellt werden Beispiel.js im Übungsskript

I dealform der Einbettung... der Titel des Dokuments hier steht das JavaScript-Programm hier steht die HTML-Seite...

I dealform der Einbettung Die Position von script im Kopf der Seite bietet sich an, um dort Funktionen, Variablen und weitere Datenstrukturen zu definieren, die zu einem späteren Zeitpunkt verwendet werden Um auf Ereignisse (Cursorbewegung) reagieren zu können, wurden mit JavaScript besondere Attribute für einige HTML-Elemente definiert, die so genannten Event-Handler.

B eispiele für Events onClick Ein Objekt wird angeklickt onFocus Objekt wird aktiviert onLoad Nach Laden eines Objektes onMouseOut Objekt wird von Maus verlassen onMouseOver Objekt wird mit der Maus überfahren onSelect Text wird markiert

Z usammenfassung Javascript- Anweisungen stehen entweder im Element... Oder in besonderen Attributen, den Event-Handlern

A ufgabe 1 Kopiert den ersten und zweiten Quellcode aus der Word-Datei Script1 in Euren Editor und aktualisiert anschließend die Browseransicht!

E inbettung der Scripts in Kommentare Problem: was machen Browser mit JavaScript- Programmen, wenn sie diese nicht lesen können? Wenn der Web-Browser neuer ist, wird er das Element script kennen und den Inhalt einfach übergehen) Eventuell kommt das Programm aber auf die Idee, den Inhalt und die Anweisungen anzuzeigen Um das zu verhindern, muss der Inhalt von script in HTML-Kommentare eingebettet werden:

E inbettung der Scripts in Kommentare <!-- Inhalt vor alten Browsern verstecken... hier steht das JavaScript-Programm... // Ende: Inhalt verstecken --> Erklärungen alles hierzwischen ist für alte Browser unsichtbar //hiermit wird ein JavaScript-Kommentar eingeleitet

E inbettung der Scripts in Kommentare Will man zusätzlich dem User eine Mitteilung machen, dass er mit einem anderem Browser eine JavaScript-Darstellung erhalten hätte, verwendet man das Element noscript Der Inhalt wird nur bei ausgeschalteten Javascript angezeigt

Ü bung 2 Fügt bitte den Skript 3 in den Editor und aktualisiert den Browser

V erwendung des Attributes language Es gibt mittlerweile von JavaScript mehrere Versionen der Browser muss erkennen können, um welche Version es sich handelt wird eine andere Version als 1.0. eingesetzt, sollte dies mit dem Attribut language angezeigt werden:

V erwendung des Attributes language

V ariablen Variablen sind Platzhalter für bestimmte, nicht festgelegte Werte können in JavaScript ohne vorherige Bekanntmachung benutzt werden. Für eine bessere Lesbarkeit eines Programms empfiehlt es sich jedoch, Variablen zu Beginn des Programms oder script-Elements zu deklarieren mit aussagekräftigen Namen zu versehen und mit einem Initialwert zu definieren. Hier einige Variablendefinitionen:

V ariablendefinitionen var kontonummer = 0; var kontoinhaber = ""; var kontostand = 0.0;

V ariablen es können auch "richtige" Werte eingesetzt werden: var iKontonummer = 0; var sKontoinhaber = ""; var fKontostand = 0.0; i für eine Ganzzahl (Integer) s für eine Zeichenkette (String) f für eine Fließkommazahl (float) nur eine Konvention

V ariablen Durch das = -Zeichen wird der Ausdruck rechts vom Gleichzeichen ausgewertet und dem links stehenden Ausdruck zugeordnet

P rogrammsteuerung: If-then-else if (kontostand < 0) { document.writeln("Du bist pleite :-("); } else { if (kontostand == 0) { document.writeln("Du hast kein Geld :-|"); } else { document.writeln("Du bist reich :-)"); } }

P rogrammsteuerung: For-schleife Anweisungsfolge für eine bestimmte Anzahl an Durchläufen wiederholt Zum Beispiel var summe = 0; for (var i=1 ; i<=10 ; i=i+1) { summe = summe + 1; } document.writeln("Ergebnis ist: ",summe);

P rogrammsteuerung: For-schleife Hier werden die Zahlen von 1 bis 10 aufaddiert und das Ergebnis in die Variable summe geschrieben. Die Zählvariable i beginnt bei 1 (i=1), läuft solange i kleiner oder gleich 10 ist (i<=10) und wird bei jedem Durchlauf um 1 erhöht (i=i+1). Anschließend gibt document.writeln das Ergebnis aus

Ü bung 3 Schreibt ein Programm, das die Quadrate der Zahlen von 0 bis 9 auf einer HTML-Seite ausgibt. Tipp: Benutzt eine for-Schleife, die von 0 bis 9 hochzählt, den Zähler quadriert und das Ergebnis mit document.writeln() ausgibt

E rgebnis

L iteratur und Quellen SELFHTML.de Javascript-world.de DeveloperChannel.de Web-toolbox.net