Download - JAVASCRIPT Seminar Internettechnologie Prof.Dr.Lutz Wegner Elena Levtchenko 18. November 2004
JAVASCRIPT
Seminar Internettechnologie
Prof.Dr.Lutz Wegner
Elena Levtchenko
18. November 2004
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
Übersicht 1/3
1. EinführungEntwicklung 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
Übersicht 2/35. Was kann JavaScript nicht?6. JavaScript –Werkzeug
Software und VorkenntnisseJavaScript –bereicheAllgemeine RegelnKommentareVariablen und WerteReservierte WörterObjekte, Eigenschaften und MethodenFunktionenOperatorenBedingte Anweisungen SchleifenEvent-Handler
Übersicht 3/3
7. Anwendungsbeispiele
8. Literatur und Links.
EinführungEntstehung des WWW
Tim Berners-Lee (1955)
Der "Gutenberg" des Cyberspace
Vernetzter Datenaustausch
Entstehung des World
Wide Web (WWW)
1990
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
=> Grafische Web-Browser notwendig
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
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
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
=> Serverentlastung und Dynamisierung der Websites auf der Clientseite notwendig.
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
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.
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.3ESMA 262-Konform
5 Jscript 5(JavaScript 1.3)
6 JavaScript 1.5
DOM
7 JavaScript 2.0 (ISO 10262)
6
Was ist JavaScript ?Serverseite
Code eingebettet in HTML-Datei auf WebServer <SERVER>
... Javascript-Code ...</SERVER>
Ü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)
Was ist JavaScript ?Clientseite
Code eingebettet in HTML-Datei
Code in externer Datei
Browser interpretiert Javascript-Code
Viele Javascript Objekte auf Client-Seite
<script type="text/javascript"> <!––
... Javascript-Code ... //--> </script>
Was ist JavaScript nicht? Ein Vergleich mit Java
Java JavaScript Hersteller Sun NetscapeCompiler ja neinDateiextension .java/.class .jsKlassendefinition/
Vererbungja(objektorientiert) nein(objektbasiert)
Klassenbibliothek ja neinObjektmodell platformunabhängig browserabhängig
Datei ist Auf dem Server
Direkt mit HTML-Datei kombiniert
Variablentypisierung „strong typing“ „loose typing“
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
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
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
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('@') == -1) { alert(„Dies ist keine E-Mail-Adresse!"); document.Formular.Mail.focus(); return false; } ...
Was kann JavaScript ?Beispiel: Formularabfrage
... if(document.Formular.Alter.value == "") { alert("Bitte Ihr Alter eingeben!"); document.Formular.Alter.focus(); return false; } var checkVariable = 1; for(i=0;i<document.Formular.Alter.value.length;++i) if(document.Formular.Alter.value.charAt(i) < "0" || document.Formular.Alter.value.charAt(i) > "9") checkVariable = -1; if(checkVariable == -1) { alert("Altersangabe keine Zahl!"); document.Formular.Alter.focus(); return false; } return true;}
Beispiel: Formularabfrage
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.
Was kann JavaScript nicht?
kein Lesen/Schreiben lokaler Dateien (mit Ausnahme von Cosokies)
kein Netzzugriff, außer URL-Download kein Multithreading
JavaScript – WerkzeugSoftware und Vorkenntnisse
Netscape Navigator ab Version 2.0 Text- oder HTML-Editor (Eclypse,
UltraEdit, HomeSite+, ...) HTML-Kenntnisse
JavaScript – WerkzeugJavaScript -Programm
Kontrollierte Anordnung von Anweisungen:
<script language="JavaScript">
<!-- vor alten Browsern verstecken
Anweisung 1;
Anweisung 2;
......
Anweisung n;
// Skript Ende -->
</script>
JavaScript – WerkzeugHTML – Noscript Anweisung
<body>
<noscript>
<h4>
Ihr Browser unterstützt kein
JavaScript oder JavaScript ist
deaktiviert.
</h4>
</noscript>
</body>
JavaScript – WerkzeugJavaScript -Bereiche
HTML Aufbau: Grundgerüst <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head> <title>
Titel der Webseite </title>
</head> <body>
... </body> </html>
zwischen <head> und </head>
innerhalb von <body>...</body>
innerhalb herkömmlicher HTML-Tags
in separaten Dateien (.js)
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.
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 */
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
JavaScript – WerkzeugVariablen und Werte
in Funktionendefinitionen kann man globale oder lokaleVariablen verwenden
Globale Variablen sind außerhalb der Funktionsdefinition bekannt:x=12;
Lokale Variable sind nur innerhalb einer Funktion bekannt:var x=12;
JavaScript – WerkzeugVariablen und Werte
Beispielevar i = 1;
x = 2.71;
y = x–1;
Name = „Lena";
name = window.prompt ("Geben Sie bitte Ihren Namen ein!");
Alter = window.prompt ("Geben Sie bitte Ihr Alter ein!");
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
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).
JavaScript – WerkzeugVordefinierte Objekte
Alle Objekte eines HTML-Dokuments sind hierarchisch geordnet
window
location history document
images[] links[] forms[] anchors[] ... ...
elements[0] elements[1] elements[...]
JavaScript – WerkzeugEigenschaften von Objekten
Eigenschaften von Objekten kann man innerhalb Ihres JavaScript-Codes jederzeit auslesen, und in vielen Fällen kann man die Werte von Eigenschaften auch ändern.
Beispiel: FarbWahl
JavaScript – Werkzeug Methoden des Objektes Date
Verwendung des Date-Objektes:
<script type="text/javascript"><!-- 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 < 10) ? ":0" : ":"); document.write("<h2>Guten Tag!<\/h2><b>Heute ist der " + Tag + "." + Monat + "." + Jahr + ". Es ist jetzt " + Stunden + NachVoll + Minuten + " Uhr<\/b>");//--></script>
Beispiel: Date
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);
JavaScript – Werkzeug Eigene Objekte
<script language="JavaScript" type="text/javascript">
<!--
document.writeln('Das Buch "'+dasBuch.Titel+'"');
document.writeln(' von "'+dasBuch.Verlag+'" hat ca. ');
document.writeln(dasBuch.Seiten+' Seiten.');
// -->
</script>
Beispiel: EigenesObjekt
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
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.
JavaScript – Werkzeug Aufbau eigener Funktionen
function myName([param_0][,param_1][...,param_N]){ [var variablenliste] anweisungen [return rückgabewert]}__________________________________________________function checkPasswdEmpty () {
var formObj = document.forms[0];if (formObj.passwd.length == 0) {
alert(„Bitte geben Sie ein Passwort ein“);return false;
} else {return true;
}}
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.
JavaScript – Werkzeug Vordefinierte objektunabhängige Funktion eval
<FORM action="">
<INPUT size="30" name="Eingabe">
<INPUT
onclick="alert(eval(this.form.Eingabe.value))"
type="button"
value="Berechnen">
</FORM>
Beispiel: eval
JavaScript - Werkzeug
Rechenoperatoren
Rechenart Zeichen
Addition +
Subtraktion -
Multiplikation *
Division /
Modulo (Divisionsrest) %
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
JavaScript - Werkzeug
Vergleichsoperatoren
Operator Bedeutung
== gleich
!= ungleich
< kleiner
> größer
<= kleiner oder gleich
>= größer oder gleich
JavaScript - Werkzeug
Bedingte Anweisungen
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 )
Beispiel: Passwort
JavaScript - Werkzeug
Bedingte Anweisungen
<html><head><title>Test</title><script type="text/javascript"><!--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";}// --></script></head><body onload="Geheim()"><h1>Hier kommen Sie nur mit Passwort rein ;-)</h1></body></html>
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
JavaScript - Werkzeug
Event-Handler
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()"
Beispiel: onClick
JavaScript - Werkzeug
Event-Handler
Beispiel (onClick):<html> <head> <title> Event-Handler Beispiel </title> </head> <body> <form> <input type="button" value="Drück mich bitte!" onClick=" var ja=confirm('Lächele doch mal!'); if (ja == true) alert('Schönes Lächeln!\n\n\t:-)'); else alert('...selber schuld\n\n\t:-(')"> </form> </body></html>
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)
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)
JavaScriptAnwendungsbeispiele
AnimationsFilter Von MSIE Format C: AnalogUhr Schneeflocken Kalender MausFolger Popup Schiffe_versenken_mit_JS
Literatur und LinksStefan Mintert „JavaScript“ Addison-Wesley Verlag
und22 Bücher im Bibliothekbestand Uni Kassel
Links:http://www.w3.org/DOM/http://www.mozilla.org/js/language/js20/ http://www.teamone.de/selfhtmlhttp://www.werle.com/tipps/js/js1.htmhttp://skripte.rabich.de/index.htmlhttp://www.mywebaid.de/index.shtmlhttp://javascript-workshop.de/buch/http://www.mintert.com/javascript/de.comp.lang.javascript.htmlhttp://http://www.jswelt.de/index.php?opencat=JavaScripts