Lektion 4: JavaScript und Applets

Lektion 4:
JavaScript und Applets
Helmar Burkhart/
Martin Guggisberg
Dep. Informatik
Universität Basel
Helmar.Burkhart@...
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-1
Kurzprofil JavaScript
• Programmiersprache. Prozeduraler Kern mit C-Syntax.
• Objektbasierte Erweiterungen
• Skriptsprache
• Ereignisorientierte Programmierung
• Einbettung in HTML-Seiten
• Browser Interpretation
• Kern-, Klient- und Server-Aspekte
• Synergien mit Java
• Sprachversion: JavaScript 1.5 (1999)
• JScript, ActionScript, …, ECMAScript
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-2
Wechselwirkungen
Dynamisches HTML (DHTML) ist ein Sammelbegriff für
alle Techniken, die das Aussehen eines HTML-Dokuments
verändern lassen.
JavaScript-Teil
Beispiel:
Erzeugen
eines
HTMLDokuments
zur Laufzeit
© Helmar Burkhart
HTML-Teil
•
Beispiel: Auf
Knopfdruck wird
eine Funktion
aufgerufen, die
ihrerseits das
Erscheinungsbild
des Dokuments
ändert.
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-3
Beispiele
Quelle: Internet & World-Wide Web: How to program.
www.deitel.com.
• Hintergrundfarbe
• Fontänderungen
• Textänderungen
• Zeit
• Dialogabläufe
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-4
Objekte einer HTML-Seite
In einem JavaScript-Browser werden die Elemente einer
Webseite als Objekt aufgefasst. Man kann unterteilen in
• Browser-Objekte
• HTML-Objekte
window
document
location
history
HTML Objekte
© Helmar Burkhart
•
navigator
screen
...
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-5
Das window-Objekt
Jede geladene Seite setzt ein Dialogfenster voraus. Dies ist das globale
Fenster window,das viele Eigenschaften und Methoden besitzt:
– Fensterangaben: outerWidth, outerHeight, innerwidth,
innerHeight.
– Fensterpositionierung: moveTo(x,y). Koordinaten sind die linke
obere Ecke.
– Bildung weiterer Unterfenster: open() und close().
– Dialogfunktionen: prompt(),alert(),confirm().
– Periodische Ereignisse: setTimeOut(), setInterval().
– Statusbalken: status.
var window.open("http://www.selfhtml.org");
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-6
Das document-Objekt
Das document-Objekt repräsentiert die momentan
geladene HTML Seite:
– Titel des Dokuments: title
– Eingabe bzw. Ausgabe eröffnen bzw. schliessen:
open() close()
– Ausgabeanweisung: write() und writeln()
– Farbangaben: bgColor
– Alle HTML-Elemente wie z.B. Bilder und Formulare
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-7
Ereignisorientiertes
Programmieren
Beim ereignisorientierten Programmieren ist der
Programmablauf verteilt:
Benutzereingabe: Taste drücken
Aufruf der Ereignisbehandlung
Ereignisreaktion
© Helmar Burkhart
•
Ereignisbehandler
aktivieren: onClick
Ereignisbehandlung
aufrufen: Fenster
schliessen
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-8
Ereignisse
Ereignis
Beschreibung
onClick
Element gedrückt
Objekte
Button, Checkbox, Radio,
Link
Fokus erhalten
Select, Text, Textarea,
Window
Fokus verloren
Select, Text, Textarea,
Window
Element geändert
Select, Text, Textarea
Element geladen
Image, Window
Maus über Element
Link
Maus weg von Element Link
onFocus
onBlur
onChange
onLoad
onMouseover
onMouseout
Beispiel: Datum per Knopfdruck
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-9
Zeitgesteuerte Ereignisse
• Aufruf einer Aktion nach Ablauf einer Zeit:
<timer> = setTimeout( <aktion>,<zeit> )
clearTimeout( <timer> )
• Setzen einer periodischen Aktion:
<interval> =setInterval( <aktion>,<zeit >)
clearInterval( <interval> )
Beispiel: Uhr
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-10
HTML Objekte einer Webseite
Wichtige Elemente der HTML-Seite sind zugreifbar in
Objekthierarchie:
document
forms[]
images[]
links[]
applets[]
elements[]
Bilder
Dialogelemente
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-11
Formulare (1)
Gegeben sei folgendes Formular:
<form>
Name: <input type="text" size=20>
<input type="button" value="anmelden">
</form>
Die Elemente werden
gemäss ihrem
lexikalischen
Erscheinen in die
Objekthierarchie
eingebettet.
© Helmar Burkhart
•
document
forms[0]
elements[0]
elements[1]
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-12
Formulare (2)
Formular und Formularelemente per explizitem Namen:
<form name="meinFormular">
Name: <input type="text" name="eingabe" size=20>
<input type="button" name="knopf"
value="anmelden"></form>
Die Elemente werden
mit ihrem Namen in
die Hierarchie
eingebettet.
document
meinFormular
eingabe
© Helmar Burkhart
•
knopf
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-13
Zugriff auf Formularelemente
Gemäss den vorigen Definitionen gibt es 2 Möglichkeiten HTML
Elemente von JavaScript aus zu referenzieren:
– anonym: Formularelemente, Bilder, sowie weitere Elemente
(aber nicht Tabellen und Paragraphen) werden in Felder
eingetragen: z.B. bei Formulare
document.forms[0].elements[0].value
+ flexibel
- anfällig gegen Veränderungen im Dokument
– mit explizitem Namen:
document.meinFormular.eingabe.value
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-14
Anonymer Zugriff
function auslesen() {
var res = ""; // leere Zeichenkette
with (document.forms[0])
res+=elements[0].value+"\n"+
elements[1].value;
return res;
}
<form>
Name: <input type="text" size=20>
<input type="button" value="anmelden"
onClick="alert(auslesen())">
</form>
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-15
Zugriff per explizitem Namen
function auslesen() {
var res = ""; // leere Zeichenkette
with (document.meinFormular)
res+=eingabe.value+"\n"+
knopf.value;
return res;
}
<form name="meinFormular">
Name: <input type="text" name="eingabe" size=20>
<input type="button" name="knopf"
value="anmelden"
onClick="alert(auslesen())">
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-16
Zugriff auf Formularelemente (1)
• Eingabefelder (input type="text")
value referenziert Eingabefeld (Zeichenkette).
Kann gelesen und geschrieben werden.
• Schaltfläche (input type="button")
value referenziert Knopfbeschriftung. Nur
Lesezugriff.
• Kontrollkästchen (input type="checkbox")
checked ergibt Booleschen Wert ob angekreuzt
wurde.
• Optionsfeld (input type="radio")
checked liefert Wert von Element i: radioName[i]
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-17
Auslesen Formularelemente (2)
• Auswahldialog (select,option)
selectedIndex referenziert gewählten Fall bei
1-elementiger Auswahl. Sonst in Schleife alle
Attribute selected abfragen.
auswahlName[i].text ergibt Wert der Auswahl i.
• Abschickschaltfläche (submit)
Eine wichtige Anwendung von JavaScript ist das
klientenseitige Überprüfen durch Aufruf von
Prüffunktionen vor dem Abschicken des Formulars.
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-18
Zugriff in der Objekthierarchie
<form name="meinFormular">
Name: <input type="text" name="eingabe“...>
<input type="button" name="knopf" ...></form>
Zueinander parallel liegende Objekte können sich nicht direkt
referenzieren:
Beispiel: onClick("pruefe(eingabe.value) ")
geht nicht innerhalb type=button.
⇒ Entweder voller Pfadname:
meinFormular.eingabe.value
⇒ objektorientiert: this.form.eingabe.value
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-19
Dynamischer Bildwechsel
Durch Zuweisung an die src-Komponente eines Bilds
in document erfolgt ein dynamischer Bildwechsel.
document.images[0].src
Frog1.gif
Frog3.gif
Frog5.gif
Modernes Daumenkino
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-20
Vorausladen mittels Objekt Image
– Das wiederholte Neuladen eines Bilds
insbesondere vom Internet ist langsam.
– Man kann ein Bild in einem Objekt vom Typ
Image aufbereiten und dann nur noch die srcReferenz zuweisen.
bild = new Image();
bild.src= "hb.jpg";
....
document.images[0].src = bild.src;
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-21
Graphische Hyperlinks
<body>
<a href="http://www.altavista.com">AltaVista besuchen</a><br>
<a href="http://www.lycos.de/">Lycos besuchen</a>
<a href="http://www.altavista.com"><img src="xavista1.jpg"
width=186 height=99 border=0 alt="AltaVista besuchen"></a>
<a href="http://www.lycos.de/"><img src="xlycos1.jpg" width=186
height=99 border=0 alt="Lycos besuchen"></a>
AltaVista besuchen
Lycos besuchen
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-22
Was ist ein Applet ?
• Ein Applet ist eine "Mini-Anwendung", die
dynamisch vom Internet geladen werden kann.
• Technisch gesprochen: Applets sind mobiler Code,
der erst auf Anforderung von einem ServerRechner geladen wird und vom javafähigen
Webbrowser auf der Arbeitsstation ausgeführt wird.
• Anwendungen sind eigenständige Programme mit
voller Funktionalität. Werden vom Betriebssystem
aus aufgerufen.
• Applets haben aus sicherheitstechnischen
Aspekten eingeschränkte Funktionalität.
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-23
http://javaalmanac.com/egs/java.applet/pkg.html
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-24
http://java.sun.com/docs/books/tutorial/applet/
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-25
Restriktionen
Aktuelle Browser schränken die Funktionalität des
Browsers in folgenden Punkten ein:
• Ein Applet darf keine Bibliotheken oder Klassen
laden.
• Es darf keine Files vom ausführenden Computer
speichern oder öffnen.
• Es darf keine Netzwerkverbindungen zu Computer
aus dem Applet Host aufbauen.
• Es darf keine Programme auf dem Computer
starten.
• Es kann nicht alle System Eigenschaften lesen.
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-26
Applet
import java.applet.*;
import java.awt.*;
public class BasicApplet extends
Applet {
public void init() {
}
public void start() {
}
public void stop() {
}
public void destroy() {
}
public void paint(Graphics g) {
}
}
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-27
Lebenszyklus eines Applets
Der Lebenszyklus eines Applets umfasst folgende
Phasen:
– Erzeugen
– Initialisieren: init()
beim Laden der Seite
– Starten
start()
beim Sichtbarwerden
– Zeichnen
paint(), update()
– Stoppen
stop()
beim nicht
Sichtbarwerden
– Löschen
destroy()
beim nicht mehr
benötigen
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-28
HTML und Applets
Applets werden von einer HTML Seite aus geladen.
<BODY>
<APPLET CODE="class-file Name"
WIDTH=breite HEIGHT= hoehe>
<APPLET>
Weitere Elemente:
© Helmar Burkhart
•
CODEBASE, ARCHIVE,ALT,
NAME, PARAM,...
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-29
Einfaches Applet
import java.awt.*;
import java.applet.*;
public class Applet1 extends Applet {
public void paint(Graphics g) {
g.drawString("First applet", 10, 10);
g.drawRoundRect(20,20,50,50,10,10);
}
}
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-30
Parameterübergabe
<applet code=AppletClassName width=100 height=100>
<param name=p1 value="some text">
<param name=p2 value="some more text">
</applet>
String parameterName = "p1";
String value = applet.getParameter(parameterName);
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-31
System Properties
Key
Meaning
"file.separator"
File separator (for example, "/")
Java class version number
Java vendor-specific string
Java vendor URL
Java version number
Line separator
Operating system architecture
Operating system name
Path separator (for example, ":")
"java.class.version"
"java.vendor"
"java.vendor.url"
"java.version"
"line.separator"
"os.arch"
"os.name"
"path.separator"
String newline = System.getProperty("line.separator");
http://java.sun.com/docs/books/tutorial/applet/practical/properties.html
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-32
Zugriff auf den Browser
try {
URL url = new URL(getDocumentBase(),
"http://hostname.com/page.html");
applet.getAppletContext().showDocument(url);
}
catch (MalformedURLException e) {
}
applet.showStatus("Your Message Here");
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-33
Audio
public void init() {
// Load audio clip
AudioClip ac = getAudioClip(getDocumentBase(),
”name.au”);
// Play audio clip
ac.play();
// Stop playing audio clip
ac.stop();
// Play audio clip continuously
ac.loop();
}
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-34
Bilder
Image image;
public void init() {
// Load image
image = getImage(getDocumentBase(),
/xxx.gif");
}
public void paint(Graphics g) {
// Draw image
g.drawImage(image, 0, 0, this);
}
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-35
Bilder
m_images = new Image[12];
MediaTracker tracker = new MediaTracker (this);
try
{
for (int i = 0; i <= 11; i++)
{
m_images[i] = getImage (getDocumentBase (),
"img" + i + ".png");
tracker.addImage(m_images[i], i);
}
tracker.waitForAll ();
}
catch (Exception e){}
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-36
Taschenrechner als Applet
public class CalcApplet extends JApplet
implements ActionListener{
public void init(){
contentPane = getContentPane();
....
<HTML>
<HEAD> <TITLE> Taschenrechner</TITLE> </HEAD>
<BODY> <APPLET CODE="CalcApplet.class" WIDTH=300 HEIGHT=200>
</APPLET>
</BODY>
</HTML>
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-37
Applets und
Browserabhängigkeiten
– Da nicht alle Browser immer auf dem
neuesten Stand der Java-Implementierung
sind, kann es Probleme wie etwa bei der
Verwendung von Swing geben. SUN bietet
seit Java 1.3 ein Plugin an.
– appletviewer ist ein Programm, das zur
SDK Umgebung gehört und mit dem
entsprechende Applets getestet werden
können.
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-38
Applet-Beispiele
Applet-Beispiele (teilweise mit Quellcode) finden sich
in der SDK Dokumentation,
sowie auf dem Internet:
• java.sun.com/applets/index.html
• lectureonline.cl.msu.edu/~mmp/applist/applets.htm
• javaboutique.internet.com/
• http://webphysics.davidson.edu/Course_Material/P
y230L/relativity/relativity.htm
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-39
http://www.wackerart.de/fractal.html
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-40
http://www.opensourcephysics.org/
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-41
Sicherheits Warnungen
November 04 - April 05
http://www.securityfocus.com/
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-42
http://www.heise.de/security/news/meldung/53544
© Helmar Burkhart
•
Webtechnologies (CS211) • Lektion 4: JavaScript and Applets
4-43