Lektion 4: JavaScript und Applets

Transcrição

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
•
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.
4-3
Beispiele
Quelle: Internet & World-Wide Web: How to program.
www.deitel.com.
• Hintergrundfarbe
• Fontänderungen
• Textänderungen
• Zeit
• Dialogabläufe
© Helmar Burkhart
•
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
...
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
•
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
•
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
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
•
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
•
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
•
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]
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
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
•
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
•
4-15
Zugriff per explizitem Namen
function auslesen() {
var res = ""; // leere Zeichenkette
with (document.meinFormular)
res+=eingabe.value+"\n"+
knopf.value;
return res;
}
Name: <input type="text" name="eingabe" size=20>
<input type="button" name="knopf"
value="anmelden"
onClick="alert(auslesen())">
© Helmar Burkhart
•
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
•
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
•
4-18
Zugriff in der Objekthierarchie
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
•
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
•
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
•
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
•
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
•
4-23
http://javaalmanac.com/egs/java.applet/pkg.html
© Helmar Burkhart
•
4-24
http://java.sun.com/docs/books/tutorial/applet/
© Helmar Burkhart
•
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
•
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
•
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
•
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,...
4-29
Einfaches Applet
import java.awt.*;
import java.applet.*;
public class Applet1 extends Applet {
g.drawString("First applet", 10, 10);
g.drawRoundRect(20,20,50,50,10,10);
}
}
© Helmar Burkhart
•
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
•
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
•
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
•
4-33
Audio
// 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
•
4-34
Bilder
Image image;
// Load image
image = getImage(getDocumentBase(),
/xxx.gif");
}
// Draw image
g.drawImage(image, 0, 0, this);
}
© Helmar Burkhart
•
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
•
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
•
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
•
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
•
4-39
http://www.wackerart.de/fractal.html
© Helmar Burkhart
•
4-40
http://www.opensourcephysics.org/
© Helmar Burkhart
•
4-41
Sicherheits Warnungen
November 04 - April 05
http://www.securityfocus.com/
© Helmar Burkhart
•
4-42
http://www.heise.de/security/news/meldung/53544
© Helmar Burkhart
•
4-43

Lektion 4: JavaScript und Applets

Transcrição

Documentos relacionados

AB Passions- und Osterbild

Im Auftrag der Bundesrepublik Deutschland

Untitled - Klett Verlag

Pressemitteilung 16. März 2007 Übersetzer auf der Leipziger

IRION Sax Schule gesamt

Profil - Diplom-Informatiker Frank Seitz

Babygalerie

Hinweis zur JRE von SUN

Infoblatt zum SKN-Junghundekurs - Kynologischer Verein Frauenfeld

JavaScript Die ersten Schritte