JAVASCRIPT

1
JAVASCRIPT

• Seminar Internettechnologie
  
• Prof.Dr.Lutz
  Wegner
• Elena
  Levtchenko
• 18.
  November 2004

2
JavaScript

• ...JavaScript rankt sich wie eine Kletterpflanze
  am Baum der HTML-Objekte empor, unfähig, eine
  andere Richtung einzuschlagen, aber perfekt an
  der Wirt angepasst. Mit JavaScript baut man keine
  Gebilde, man dichtet die letzten Fugen ab, die
  HTML offen lassen musste...
• Stephan Mintert

3
Übersicht 1/3

• 1. Einführung
• Entwicklung des WWW
• 2. Was ist JavaScript ?
• Entstehung der JavaScript
• Client- und serverseitiges JavaScript
• 3. Was ist JavaScript nicht?
• Ein Vergleich mit Java
• 4. Was kann JavaScript?
• Anwendungsgebiete

4
Übersicht 2/3

• 5. Was kann JavaScript nicht?
• 6. JavaScript Werkzeug
• Software und Vorkenntnisse
• JavaScript bereiche
• Allgemeine Regeln
• Kommentare
• Variablen und Werte
• Reservierte Wörter
• Objekte, Eigenschaften und Methoden
• Funktionen
• Operatoren
• Bedingte Anweisungen
• Schleifen
• Event-Handler

5
Übersicht 3/3

• 7. Anwendungsbeispiele
• 8. Literatur und Links.

6
EinführungEntstehung des WWW

• Tim Berners-Lee (1955)
• Der "Gutenberg" des Cyberspace
• Vernetzter Datenaustausch
• Entstehung des World Wide Web (WWW) 1990

7
Einführung Entstehung des WWW

• Von Berners-Lee entwickelte Web Technologien
• Client-Server,
• Kommunikation durch HTTP(HyperText Transfer
  Protocol)
• URI (Uniform Resource Identifier)
• Auszeichnungssprache Hyper Text Markup Language
  (HTML)
• ersten Web-Server
• gt Grafische Web-Browser notwendig

8
Einführung Erster graphischer Browser

• Marc Andreessen (1971)
• Entwicklung Mosaic Browser
• Grafische Benutzeroberfläche
• Nur Textauszeichnung
• kommerzielles Produkt
• Gründung der Firma Netscape
• 90 Marktanteil in den Jahren 1995 und 1996
• Aktuelle Version Netscape 7.2

9
Einführung Microsoft holt nach

• 1995 Web-Browser Microsoft Internet Explorer
• Verbreitung des IE mit eigenem Betriebssystem
  Windows 95 ff
• Aktuelle Version Internet Explorer 6.0

10
Einführung HTML-Seiten bis Mitte 90er Jahre

• durch Bilder angereicherte Textdokumente
• geringe Komplexität
• Textformatierung
• Textpositionierung
• statische Inhalte
• CGI-Techniken führen zu Serverüberlastung
  
• gt Serverentlastung und Dynamisierung der
  Websites auf der Clientseite notwendig.

11
Was ist JavaScript ?Entstehung der JavaScript

• Sept. 1995 LiveScript von Netscape (Brendan
  Eich)
• (Netscape Navigator 2.0)
• Dec. 1995 Javascript 1.0 von Netscape (und Sun)
• Syntax angelegt an Java
• Skriptsprache
• keine vollständige Sprache, integriert in
  Anwendung
• Javascript server-seitig
• Javascript browser-seitig
• Standardisierung unter dem Namen ECMAScript
  (1996)
• Versionen 1.0 1.5
• Aktuelle Version 2.0

12
Was ist JavaScript?Microsoft holt nach

• Der MS Internet Explorer interpretiert zwar
  JavaScript, daneben aber auch die
  Microsoft-eigene Sprachvariante JScript
• um sich aus den Lizenzvorgaben von Netscape
  herauszuwinden
• um JavaScript selbständig erweitern zu können.

13
Was ist JavaScript ?JavaScript- und
Browserversionen
NN Version MSIE Version
2 JavaScript 1.0 2 -------------
3 JavaScript 1.1 3 JScript 1 (JavaScript 1.0)
4.0-4.5 JavaScript 1.2 4 JScript 2 (JavaScript 1.2) ESMA 262-Konform
Ab 4.06 JavaScript 1.3 ESMA 262-Konform
5 Jscript 5 (JavaScript 1.3)
6 JavaScript 1.5 DOM
7 JavaScript 2.0 (ISO 10262) 6
14
Was ist JavaScript ?Serverseite

• Code eingebettet in HTML-Datei auf WebServer
  ltSERVERgt
• ...
• Javascript-Code
• ...
• lt/SERVERgt
• Übersetzung in Byte-Code notwendig
• Webserver führt Skriptteil aus und generiert
  Ausgabe
• Anwendungen server-seitig
• Mögliche Anwendung Datenbankanbindung
• Javascript server-seitig konnte sich nicht
  durchsetzen
• Nicht volle Funktionalität, wie z.B. Java (JSP,
  Servlets), Microsoft Active Server Pages (ASP)

15
Was ist JavaScript ?Clientseite

• Code eingebettet in HTML-Datei
• Code in externer Datei
• Browser interpretiert Javascript-Code
• Viele Javascript Objekte auf Client-Seite
• ltscript type"text/javascript"gt
• lt!
• ...
• Javascript-Code
• ...
• //--gt
• lt/scriptgt

16
Was ist JavaScript nicht? Ein Vergleich mit Java
Java JavaScript
Hersteller Sun Netscape
Compiler ja nein
Dateiextension .java/.class .js
Klassendefinition/ Vererbung ja(objektorientiert) nein(objektbasiert)
Klassenbibliothek ja nein
Objektmodell platformunabhängig browserabhängig
Datei ist Auf dem Server Direkt mit HTML-Datei kombiniert
Variablentypisierung strong typing loose typing
17
Was kann JavaScript ?Anwendungsgebiete

• Allgemeine Objektmanipulation
• Zugriff auf jedes HTML-Objekt möglich
• Zugriff auf Nicht-HTML-Objekte (Teile des
  Browsers)
• Dokument kann mit Funktion document.write()
  geschrieben werden
• Browserspezifische Programmierung
• Zugriff auf Browsereigenschaften mit
  Javascript-Objekt navigator
• Abfrage von Browsertyp, -version
• Anzeigen browseroptimierter Seiten
• Sessionmanagement
• Speicherung von Sessioninformationen in Cookies
  (document.cookie)
• Abfrage der Cookies
• Beispiel Online-Shop mit Warenkorb

18
Was kann JavaScript ?Anwendungsgebiete

• Personalisierung von Seiten
• Erstellen und Abfragen von Cookies
  (document.cookie)
• Benutzerverhalten ausspionieren
• Individuell angepasste Seiten für den Benutzer
• Beispiel Eingabe Benutzername und Passwort
• Ereignisbehandlung
• Objekt event ermöglicht Zugriff auf Ereignisse
• Reagierung auf Benutzeraktionen (z.B. Maus,
  Tastatur)
• Interaktion mit dem Benutzer
• Beispiel Buttons wechseln Farbe

19
Was kann JavaScript ?Anwendungsgebiete

• Fenstermanagement
• Objekt window repräsentiert Browserfenster
• Öffnen, Schließen, Positionieren von Fenstern
• Abfrage von verfügbare Bildschirmbreite und höhe
  mit Objekt screen
• Javascript-Objekt window wird häufig missbraucht
• Mathematische Berechnungen
• Verwendung von Grundrechenarten
• Objekt Math stellt weitere Rechenoperationen zur
  Verfügung
• Beispiel Währung- oder Maßeinheitenumrechner
• Formularabfrage
• Prüfen von Formulareingaben

20
Was kann JavaScript ?Beispiel Formularabfrage

• function checkFormular()
• if(document.Formular.User.value "")
• alert("Bitte Ihren Namen eingeben!")
• document.Formular.User.focus()
• return false
• if(document.Formular.Ort.value "")
• alert("Bitte Ihren Wohnort eingeben!")
• document.Formular.Ort.focus()
• return false
• if(document.Formular.Mail.value "")
• alert("Bitte Ihre E-Mail-Adresse
  eingeben!")
• document.Formular.Mail.focus()
• return false
• if(document.Formular.Mail.value.indexOf('_at_')
  -1)
• alert(Dies ist keine E-Mail-Adresse!")
• document.Formular.Mail.focus()

21
Was kann JavaScript ?Beispiel Formularabfrage
Beispiel Formularabfrage

• ...
• if(document.Formular.Alter.value "")
• alert("Bitte Ihr Alter eingeben!")
• document.Formular.Alter.focus()
• return false
• var checkVariable 1
• for(i0iltdocument.Formular.Alter.value.length
  i)
• if(document.Formular.Alter.value.charAt(i)
  lt "0"
• document.Formular.Alter.value.charAt(i
  ) gt "9")
• checkVariable -1
• if(checkVariable -1)
• alert("Altersangabe keine Zahl!")
• document.Formular.Alter.focus()
• return false
• return true

22
Was kann JavaScript nicht?

• Wenn Daten auf dem Web-Server verarbeitet werden
  müssen, stößt JavaScript auf ihre Grenzen und
  kann nur unterstützend eingesetzt werden.
• Foren,
• Besucherzähler,
• Gästebücher,
• Datenbankanbindungen
• sind mit JavaScript nicht realisierbar.
• Realisierung durch z.B. ASP, JSP, Servlets, PHP,
  CGIs.

23
Was kann JavaScript nicht?

• kein Lesen/Schreiben lokaler Dateien (mit
  Ausnahme von Cosokies)
• kein Netzzugriff, außer URL-Download
• kein Multithreading

24
JavaScript WerkzeugSoftware und Vorkenntnisse

• Netscape Navigator ab Version 2.0
• Text- oder HTML-Editor (Eclypse, UltraEdit,
  HomeSite, ...)
• HTML-Kenntnisse

25
JavaScript WerkzeugJavaScript -Programm

• Kontrollierte Anordnung von Anweisungen
• ltscript language"JavaScript"gt
• lt!-- vor alten Browsern verstecken
• Anweisung 1
• Anweisung 2
• ......
• Anweisung n
• // Skript Ende --gt
• lt/scriptgt

26
JavaScript WerkzeugHTML Noscript Anweisung

• ltbodygt
• ltnoscriptgt
• lth4gt
• Ihr Browser unterstützt kein
• JavaScript oder JavaScript ist
• deaktiviert.
• lt/h4gt
• lt/noscriptgt
• lt/bodygt

27
JavaScript WerkzeugJavaScript -Bereiche

• HTML Aufbau Grundgerüst
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
  4.01//EN" "http//www.w3.org/TR/html4/strict.dtd"gt
  
• lthtmlgt
• ltheadgt
• lttitlegt
• Titel der Webseite
• lt/titlegt
• lt/headgt
• ltbodygt
• ...
• lt/bodygt
• lt/htmlgt

• zwischen ltheadgt und lt/headgt
• innerhalb von ltbodygt...lt/bodygt
• innerhalb herkömmlicher HTML-Tags
• in separaten Dateien (.js)

28
JavaScript WerkzeugAllgemeiner Hinweis

• JavaScript unterscheidet bei Namen von
  Variablen, Funktionen, Objekten und reservierten
  Wörtern zwischen Groß- und Kleinschreibung.
  Variable aBc ist nicht identisch mit AbC.

29
JavaScript WerkzeugKommentare

• Kommentare erleichtern die Lesbarkeit der
  Programme
• Kommentare werden vom JavaScript-Interpreter des
  WWW-Browsers ignoriert.
• Einzeilige Kommentare
• // das ist ein 1-zeiliger Kommentar
• mehrzeilige Kommentare
• / dieser Kommentar erstreckt sich
• über mehrere Zeilen /

30
JavaScript WerkzeugVariablen und Werte

• Variablen dienen zur Speicherung von Daten
• Variablen haben Namen und Wert
• Unterscheidung zwischen lokalen und globalen
  Variablen
• Der Wert wird durch Initialisierung oder als
  Ergebnis einer Operation bestimmt
• Variablennamen bestehen aus Buchstaben, Ziffern
  und dem _ (Unterstrich)
• als erstes Zeichen muss ein Buchstabe sein

31
JavaScript WerkzeugVariablen und Werte

• in Funktionendefinitionen kann man globale oder
  lokaleVariablen verwenden
• Globale Variablen sind außerhalb der
  Funktionsdefinition bekanntx12
• Lokale Variable sind nur innerhalb einer Funktion
  bekanntvar x12

32
JavaScript WerkzeugVariablen und Werte

• Beispiele
• var i 1
• x 2.71
• y x1
• Name Lena"
• name window.prompt ("Geben Sie bitte Ihren
  Namen ein!")
• Alter window.prompt ("Geben Sie bitte Ihr Alter
  ein!")

33
JavaScript WerkzeugReservierte Wörter

• Schlüsselwörter mit bestimmter Bedeutung
• nicht als Variablen- oder Funktionsnamen
  verwenden

break Als Anweisung Abbruch in Schleifen
catch dient zur Fehlerbehandlung
continue Fortsetzung in Schleifen
false Rückgabewert von Funktionen
function Für Funktionen
return Für Rückgabewerte
34
JavaScript WerkzeugVordefinierte Objekte

• sind in JavaScript fest eingebaut (String, Math,
  Date etc.)
• außerdem gibt es Objekte, die innerhalb eines
  HTML Dokumentes zur Verfügung stehen (window,
  location, document, history etc.)
• haben Eigenschaften und oft objektgebundene
  Funktionen (Methoden).

35
JavaScript WerkzeugVordefinierte Objekte

• Alle Objekte eines HTML-Dokuments sind
  hierarchisch geordnet

window
location
history
document
images
links
forms
anchors
...
...
elements0
elements1
elements...
36
JavaScript WerkzeugEigenschaften von Objekten
Beispiel FarbWahl

• Eigenschaften von Objekten kann man innerhalb
  Ihres JavaScript-Codes jederzeit auslesen, und in
  vielen Fällen kann man die Werte von
  Eigenschaften auch ändern.

37
JavaScript Werkzeug Methoden des Objektes Date
Beispiel Date

• Verwendung des Date-Objektes
• ltscript type"text/javascript"gt
• lt!--
• var Jetzt new Date()
• var Tag Jetzt.getDate()
• var Monat Jetzt.getMonth() 1
• var Jahr Jetzt.getYear()
• var Stunden Jetzt.getHours()
• var Minuten Jetzt.getMinutes()
• var NachVoll ((Minuten lt 10) ? "0"
  "")
• document.write("lth2gtGuten Tag!lt\/h2gtltbgtHeute
  ist der "
• Tag "." Monat "." Jahr ". Es ist
  jetzt "
• Stunden NachVoll Minuten "
  Uhrlt\/bgt")
• //--gt
• lt/scriptgt

38
JavaScript Werkzeug Eigene Objekte

• Man kann auch eigene Objekte definieren
• Konstruktor-Funktion für den Objekttyp Buch
• function Buch(pTitel, pVerlag, pSeiten)
• this.Titel pTitel
• this.Verlag pVerlag
• this.Seiten pSeiten
• Eine Instanz dieses Objekts definieren
• dasBuch new Buch("JavaScript Workshop",
• "Addison-Wesley", 300)

39
JavaScript Werkzeug Eigene Objekte
Beispiel EigenesObjekt

• ltscript language"JavaScript" type"text/javascrip
  t"gt
• lt!--
• document.writeln('Das Buch "'dasBuch.Titel'"')
• document.writeln(' von "'dasBuch.Verlag'" hat
  ca. ')
• document.writeln(dasBuch.Seiten' Seiten.')
• // --gt
• lt/scriptgt

40
JavaScript Werkzeug Funktionen

• In JavaScript gibt es vordefinierte Funktionen
  und man kann auch eigene Funktionen definieren.
• Eine Funktion ist ein Anweisungsblock.
• JavaScript-Code, der nicht innerhalb einer
  Funktion steht, wird beim Einlesen der Datei vom
  WWW-Browser sofort ausgeführt

41
JavaScript Werkzeug Eigene Funktionen

• Eigene Funktionen kann man
• innerhalb eines JavaScript-Bereichs oder
• in separaten JavaScript - Dateien definieren
• Sie bestimmen,
• bei welchem Ereignis, mit Hilfe eines
  Event-Handlers oder
• innerhalb einer anderen Funktion die Funktion
  aufgerufen und ihr Programmcode ausgeführt wird.

42
JavaScript Werkzeug Aufbau eigener Funktionen

• function myName(param_0,param_1...,param_N)
  
• var variablenliste
• anweisungen
• return rückgabewert
• __________________________________________________
  
• function checkPasswdEmpty ()
• var formObj document.forms0
• if (formObj.passwd.length 0)
• alert(Bitte geben Sie ein Passwort ein)
• return false
• else
• return true

43
JavaScript Werkzeug Vordefinierte Funktionen

• Das sind Funktionen, die bereits in JavaScript
  integriert sind.
• Solche Funktionen kann man jederzeit aufrufen,
  ohne sie selbst zu definieren
• Vordefinierte JavaScript-Funktionen können
• objektabhängig (z.B. Methoden des Objektes Date)
• objektunabhängig
• sein.

44
JavaScript Werkzeug Vordefinierte
objektunabhängige Funktion eval
Beispiel eval

• ltFORM action""gt
• ltINPUT size"30" name"Eingabe"gt
• ltINPUT
• onclick"alert(eval(this.form.Eingabe.value))
  "
• type"button"
• value"Berechnen"gt
• lt/FORMgt

45
JavaScript - Werkzeug Rechenoperatoren
Rechenart Zeichen
Addition
Subtraktion -
Multiplikation
Division /
Modulo (Divisionsrest)
46
JavaScript - Werkzeug Zuweisungsoperatoren
Zeichen Beispiel Bedeutung
x 5 x x 5
- x - 5 x x 5
x 5 x x 5
/ x / 5 x x / 5
x 5 x x 5
47
JavaScript - Werkzeug Vergleichsoperatoren
Operator Bedeutung
gleich
! ungleich
lt kleiner
gt größer
lt kleiner oder gleich
gt größer oder gleich
48
JavaScript - Werkzeug  Bedingte Anweisungen
Beispiel Passwort

• Wenn Sie feiner differenzieren wollen
• Mit if und else können Sie genau zwei Fälle
  unterscheiden
• die Fallunterscheidung mit switch (seit der
  Sprachversion 1.2 )

49
JavaScript - Werkzeug  Bedingte Anweisungen

• lthtmlgtltheadgtlttitlegtTestlt/titlegt
• ltscript type"text/javascript"gt
• lt!--
• function Geheim()
• var Passwort student"
• var Eingabe window.prompt("Bitte geben Sie das
  Passwort ein","")
• if(Eingabe ! Passwort)
• alert("Falsches Passwort!")
• Geheim()
• else
• document.location.href"geheim.htm"
• // --gt
• lt/scriptgt
• lt/headgt
• ltbody onload"Geheim()"gt
• lth1gtHier kommen Sie nur mit Passwort rein
  -)lt/h1gt
• lt/bodygt

50
JavaScript - Werkzeug  Schleifen

• Mit Hilfe von while-Schleifen können Sie
  Programmanweisungen solange wiederholen, wie die
  Bedingung, die in der Schleife formuliert wird,
  erfüllt ist
• Die Schleifenbedingung einer for-Schleife sieht
  von vorneherein einen Zähler und eine
  Abbruchbedingung vor.
• bei der do-while-Schleife zuerst der Code
  ausgeführt und erst danach die Schleifenbedingung
  überprüft wird.
• Kontrolle innerhalb von Schleifen - break und
  continue

51
JavaScript - Werkzeug  Event-Handler
Beispiel onClick

• wichtige Schnittstelle zwischen HTML und
  JavaScript
• Ermöglichen auf bestimmte Anwenderereignisse zu
  reagieren
• z.B. onClick für das Ereignis "Anwender hat mit
  der Maus geklickt
• Syntax OnEvent "Funktionsaufruf()"

52
JavaScript - Werkzeug  Event-Handler

• Beispiel (onClick)
• lthtmlgt
• ltheadgt
• lttitlegt
• Event-Handler Beispiel
• lt/titlegt
• lt/headgt
• ltbodygt
• ltformgt
• ltinput type"button"
• value"Drück mich bitte!"
• onClick"
• var jaconfirm('Lächele doch
  mal!')
• if (ja true)
• alert('Schönes
  Lächeln!\n\n\t-)')
• else
• alert('...selber
  schuld\n\n\t-(')"gt
• lt/formgt
• lt/bodygt

53
JavaScript - Werkzeug  Event-Handler

• Liste der Event-Handler und der Objekte, mit
  denen sie verknüpft werden
• onAbort (bei Abbruch image)
• onBlur (beim Verlassen select, text, textarea,
  window)
• onChange (bei erfolgter Änderung select, text,
  textarea)
• onClick (beim Anklicken button, checkbox, radio,
  link, submit, reset)
• onError (im Fehlerfall image, window)
• onFocus (beim Aktivieren select, text, textarea,
  window)
• onKeydown (bei gedrückter Taste)
• onKeypress (bei gedrückt gehaltener Taste)
• onKeyup (bei losgelassener Taste)

54
JavaScript - Werkzeug  Event-Handler

• Liste der Event-Handler
• onLoad (beim Laden image, window)
• onMousedown (bei gedrückter Maustaste)
• onMousemove (bei weiterbewegter Maus)
• onMouseout (beim Verlassen des Elements mit der
  Maus)
• onMouseover (beim Überfahren des Elements mit der
  Maus)
• onMouseup (bei losgelassener Maustaste)
• onReset (beim Zurücksetzen des Formulars)
• onSelect (beim Selektieren von Text)
• onSubmit (beim Absenden des Formulars)
• onUnload (beim Verlassen der Datei)

55
JavaScriptAnwendungsbeispiele

• AnimationsFilter Von MSIE
• Format C
• AnalogUhr
• Schneeflocken
• Kalender
• MausFolger
• Popup
• Schiffe_versenken_mit_JS

56
Literatur und Links

• Stefan Mintert JavaScript Addison-Wesley Verlag
• und
• 22 Bücher im Bibliothekbestand Uni Kassel
• Links
• http//www.w3.org/DOM/
• http//www.mozilla.org/js/language/js20/
• http//www.teamone.de/selfhtml
• http//www.werle.com/tipps/js/js1.htm
• http//skripte.rabich.de/index.html
• http//www.mywebaid.de/index.shtml
• http//javascript-workshop.de/buch/
• http//www.mintert.com/javascript/de.comp.lang.jav
  ascript.html
• http//http//www.jswelt.de/index.php?opencatJava
  Scripts