Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


Präsentation zum Thema: "JAVASCRIPT Seminar Internettechnologie Prof.Dr.Lutz Wegner Elena Levtchenko 18. November 2004."—  Präsentation transkript:

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 Übersicht2/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 Übersicht3/3 7. Anwendungsbeispiele 8. Literatur und Links.

6 Einführung Entstehung 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 =>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 =>Serverentlastung und Dynamisierung der Websites auf der Clientseite notwendig.

11 Was ist JavaScript ? Entstehung der JavaScript Sept LiveScript von Netscape (Brendan Eich) (Netscape Navigator 2.0) Dec 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 VersionMSIE Version 2 JavaScript JavaScript 1.1 3JScript 1 (JavaScript 1.0) JavaScript 1.2 4JScript 2 (JavaScript 1.2) ESMA 262-Konform Ab 4.06 JavaScript 1.3 ESMA 262-Konform 5Jscript 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... Javascript-Code... Ü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

16 Was ist JavaScript nicht? Ein Vergleich mit Java JavaJavaScript Hersteller SunNetscape Compiler janein Dateiextension.java/.class.js Klassendefinition/ Vererbung ja (objektorientiert) nein (objektbasiert) Klassenbibliothek janein Objektmodellplatformunabhängigbrowserabhängig Datei istAuf dem Server Direkt mit HTML- Datei kombiniert Variablentypisierungstrong typingloose 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 -Adresse eingeben!"); document.Formular.Mail.focus(); return false; } == -1) { alert(Dies ist keine -Adresse!"); document.Formular.Mail.focus(); return false; }...

21 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 "9") checkVariable = -1; if(checkVariable == -1) { alert("Altersangabe keine Zahl!"); document.Formular.Alter.focus(); return false; } return true; } Beispiel: Formularabfrage

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 – Werkzeug Software und Vorkenntnisse Netscape Navigator ab Version 2.0 Text- oder HTML-Editor (Eclypse, UltraEdit, HomeSite+,...) HTML-Kenntnisse

25 JavaScript – Werkzeug JavaScript -Programm Kontrollierte Anordnung von Anweisungen:

26 JavaScript – Werkzeug HTML – Noscript Anweisung Ihr Browser unterstützt kein JavaScript oder JavaScript ist deaktiviert.

27 JavaScript – Werkzeug JavaScript -Bereiche HTML Aufbau: Grundgerüst Titel der Webseite... zwischen und innerhalb von... innerhalb herkömmlicher HTML-Tags in separaten Dateien (.js)

28 JavaScript – Werkzeug Allgemeiner 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 – Werkzeug Kommentare 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 – Werkzeug Variablen 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 – Werkzeug Variablen 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 ;

32 JavaScript – Werkzeug Variablen und Werte Beispiele var 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!");

33 JavaScript – Werkzeug Reservierte 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 – Werkzeug Vordefinierte 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 – Werkzeug Vordefinierte Objekte Alle Objekte eines HTML-Dokuments sind hierarchisch geordnet window locationhistorydocument images[]links[]forms[]anchors[]... elements[0] elements[1]elements[...]

36 JavaScript – Werkzeug Eigenschaften 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

37 JavaScript – Werkzeug Methoden des Objektes Date Verwendung des Date-Objektes : Beispiel: Date

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

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.forms[0]; 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

45 JavaScript - Werkzeug Rechenoperatoren RechenartZeichen Addition+ Subtraktion- Multiplikation* Division/ Modulo (Divisionsrest)%

46 JavaScript - Werkzeug Zuweisungsoperatoren ZeichenBeispielBedeutung +=x += 5x = x + 5 -=x -= 5x = x – 5 *=x *= 5x = x * 5 /=x /= 5x = x / 5 %=x %= 5x = x % 5

47 JavaScript - Werkzeug Vergleichsoperatoren OperatorBedeutung ==gleich !=ungleich größer <=kleiner oder gleich >=größer oder gleich

48 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

49 JavaScript - Werkzeug Bedingte Anweisungen Test Hier kommen Sie nur mit Passwort rein ;-)

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 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

52 JavaScript - Werkzeug Event-Handler Beispiel (onClick): Event-Handler Beispiel

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 JavaScript Anwendungsbeispiele 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:


Herunterladen ppt "JAVASCRIPT Seminar Internettechnologie Prof.Dr.Lutz Wegner Elena Levtchenko 18. November 2004."

Ähnliche Präsentationen


Google-Anzeigen