View
108
Download
2
Category
Preview:
Citation preview
Arbeiten mit Javascript
Eine einführende Vortragsübung
Referentin: Christin Püschel
29. Juni 2005
Übersicht
Allgemeines
Entwicklungsgeschichte
Funktionen
Übungsbeispiele
Javascript...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
Javascript...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
Geschichte
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
Geschichte
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
Funktionsbeispiele
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
Einbindung 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
<script> ... hier steht das JavaScript-Programm ...</script>
beziehungsweise
<script type="text/javascript"></script>
Musterwebseite
<html><head> <script type="text/javascript">
</script> </head> <body> </body> </html>
Position 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
Position 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 gespeichertUm zum Beispiel auf eine Datei library.js zu verweisen, muss folgender Code in den Kopfbereich der Webseite gestellt werden
<script type="text/javascript" src="library.js"> </script>
Beispiel.js im Übungsskript
Idealform der Einbettung
<html><head> <title>... der Titel des Dokuments ...</title><script language="JavaScript“ type="text/javascript">... hier steht das JavaScript-Programm ...</script> </head> <body> ... hier steht die HTML-Seite ... </body></html>
Idealform 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.
Beispiele 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
Zusammenfassung
Javascript- Anweisungen stehen entweder im
Element <script>...</script>
Oder in besonderen Attributen, den
Event-Handlern
Aufgabe 1
Kopiert den ersten und zweiten Quellcode aus der Word-Datei Script1 in Euren Editor und aktualisiert anschließend die Browseransicht!
Einbettung 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:
Einbettung der Scripts in Kommentare
<script language="JavaScript" type="text/javascript"> <!-- Inhalt vor alten Browsern verstecken ... hier steht das JavaScript-Programm ... // Ende: Inhalt verstecken --></script>
Erklärungen<!– und --> alles hierzwischen ist für alte Browser unsichtbar//hiermit wird ein JavaScript-Kommentar eingeleitet
Einbettung 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
Verwendung 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:
Verwendung des Attributes „language“
<script language="JavaScript1.1">
<!-- JavaScript 1.1 -->
<script language="JavaScript1.2">
<!-- JavaScript 1.2 -->
Variablen
Variablen sind Platzhalter für bestimmte, nicht festgelegte Wertekö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:
Variablendefinitionen
var kontonummer = 0;
var kontoinhaber = "";
var kontostand = 0.0;
Variablen
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
Variablen
Durch das „ = “-Zeichen wird der Ausdruck rechts vom Gleichzeichen ausgewertet und dem links stehenden Ausdruck zugeordnet
Programmsteuerung: 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 :-)"); } }
Programmsteuerung: 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);
Programmsteuerung: 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
Ergebnis
<script language="JavaScript" type="text/javascript"> <!-- Inhalt vor alten Browsern verstecken document.writeln("Ausgabe der Quadratzahlen von 0 bis 9:"); for (var i=0; i<10; i=i+1) { document.writeln("Quadrat von ",i," ist: ",i*i); } // Ende: Inhalt verstecken --> </script>
Literatur und Quellen
SELFHTML.de
Javascript-world.de
DeveloperChannel.de
Web-toolbox.net
Recommended