Kommunikationsnetze
Gliederung 1. Scriptsprachen vs. echte Programmiersparachen 2. Einbettung 3. Sprachelemente 4. Objekte in Javascript 5. Browsermodell 6. Ereignisse Literatur: W. Dehnhardt, Scriptsprachen für dynamische Webauftritte. Hanser-Verlag 2001. http://www.wsite.de; http://selfhtml.teamone.de/javascript/index.htm Gliederung
1. Scriptsprachen vs. echte Programmiersprachen Script ( Drehbuch ) bedeutet: Befehle werden zu einem Batch (Stapel) zusammengefasst. Erweiterung der Batch-Dateien um Sprachelemente führt zu OS-spezifischen Scriptsprachen: Bourne-, Korn- und C-Shell (Unix) DOS-Batches, Windows-Shell (Microsoft) Moderne Scriptsprachen (PERL, Javascript, VBScript) leben in einem vordefinierten Umfeld Browser oder Server Spezialisierte Befehle für Standardaufgaben in diesem Umfeld: Z.B. Pop-up-Fenster mit alert() Z.B. Zugriff auf Search-Part der URL mit dem Objekt location.search 1. Scriptsprachen vs. echte Programmiersprachen
Scriptsprache (Javascript, PERL, VBScript, ) interpretiert An spezielles Umfeld angepasst Typfreiheit oder schwache Typisierung Einbettung in Beschreibungssprachen Programmiersprache (c/c++, Java, Pascal, ) (überwiegend) kompiliert Keine Anpassung Starke Typisierung -- 1. Scriptsprachen vs. echte Programmiersprachen
Fähigkeiten von JavaScript JavaScript kann I/O über HTML-Formulare oder Browserfenster Steuerung des Aufbaus von HTML-Dokumenten Animationen mit CSS oder Layern (Netscape) Öffnen weiterer Browserfenster Periodische Ereignisse auslösen (animierte GIFs) JavaScript kann/hat nicht eigene I/O eigene Grafik Netzwerkfähigkeit beschränkt auf URLs den Code von Webdokumenten lesen 1. Scriptsprachen vs. echte Programmiersprachen
2. Einbettung Sprache JavaScript VBScript Perl PHP Clientseite <SCRIPT Language=JavaScript> Code document.write( HTML ); <SCRIPT Language=VBScript> Code document.write( HTML ); Serverseite <%@Language=JavaScript%>..<% Code %> response.write( HTML ); <%@Language=VBScript%>..<% Code %> response.write( HTML ); print HTML-Code ; <?php Code?> echo HTML ; 2. Einbettung
<!--./grundlagen/einbettungen.html --> <SCRIPT Language=JavaScript> breite = 35; function f(text) { document.writeln(text); } <FORM> <INPUT Type=text Size=&{breite};><BR> <INPUT Type=button onclick="confirm('ok drücken!')" Value=&{s=0; for(i=1; i<=5000; i++) s+=i;};> </FORM> <HR Align=left Width=&{10*breite;};> <A Href="javascript:alert('Hallo!')">Sag Hallo</A> Markup Entity Attribut Entity Entity URL 2. Einbettung
2. Einbettung
SCRIPT-Markup JavaScript-Programmblock wird von <SCRIPT Language=JavaScript Versionsnummer> umschlossen. Mehrere solcher Programmblöcke werden nacheinander abgearbeitet, in der Reihenfolge ihrer Einbettung. Z.B. kann im zweiten Block auf die Variablen des ersten zugegriffen werden, aber nicht umgekehrt. <!-- BSPL. Dehnhardt --> <SCRIPT Language=JavaScript> text="hello World!"; <H1> <SCRIPT Language=JavaScript> document.writeln(text); </H1> 2. Einbettung
SCRIPT-Markup JavaScript-Programmblock wird von <SCRIPT Language=JavaScript Versionsnummer> umschlossen. Mehrere solcher Programmblöcke werden nacheinander abgearbeitet, in der Reihenfolge ihrer Einbettung. Z.B. kann im zweiten Block auf die Variablen des ersten zugegriffen werden, aber nicht umgekehrt. <!-- BSPL. Dehnhardt --> <SCRIPT Language=JavaScript> text="hello World!"; <H1> <SCRIPT Language=JavaScript> document.writeln(text); </H1> 2. Einbettung
Entities JavaScript Entities werden als HTML-Sonderzeichen in das HTML-Dokument eingebettet: &{JavaScript-Code};. Sie können als Attributwerte fast überall im HTML-Dokument vorkommen. <!-- BSPL. Dehnhardt --> <FORM> <INPUT Type=text Value=&{summe=0; for (i=1; i<=125; i++) summe+=i};> </FORM> <HR Width=&{summe=0; for (i=1; i<=30; i++) summe+=i};> 2. Einbettung
Attribute Clientseitige dynamische Webseiten können nur erzeugt werden, wenn der Browser auf Ereignisse (Mausklick, Mausbewegung, Eingabe in Formular) reagieren kann. Ereignisse werden in JavaScript durch Eventhandler abgefangen. Eventhandler werden in HTML als spezielle JavaScript-Attribute modelliert: onclick, onfocus, onsubmit, onmousemove,. <!-- BSPL. Dehnhardt --> <FORM Name=meinformular> <INPUT Type=button onclick= alert( Hello World ); > </FORM> 2. Einbettung
3. Sprachelemente An C/C++ angelehnt Elementare Regeln Groß- und Kleinschreibung wird unterschieden Leeräume (Leerzeichen, Absatz, Tabulatoren) werden ignoriert Begrenzer ist das Semikolon ; Kommentare mit // oder /* */ Konstanten sind z.b. 21.5 oder Hello World Bezeichner für Variablen müssen ASCII, das 1. Zeichen alphanumerisch oder _ oder $ sein. Reservierte Wörter (z.b. while) werden vom Standard festgelegt 3. Sprachelemente
Datentypen Elementare Datentypen: Zahlen Strings Wahrheitswerte Verbundtypen Array; Beispiel array_a = [1.2, JavaScript 1.3, true, false, 5999] Objekt (assoziatives Array); Beispiel kreis = {xwert: 25, ywert: 15, radius: 400} Funktionen Typbestimmung einer Variablen mit typeof variablenname Initialisierung kann implizit oder explizit erfolgen 3. Sprachelemente
Schleifen for (init; test; update) anweisung for (i=1; i<=30; i++) summe+=i for (variable in object) anweisung kreis = {xwert: 25, ywert: 15, radius: 400}; for (key in kreis) document.write( <BR> + key + : + kreis[key]); Ausgabe: xwert: 25 ywert: 15 radius: 400 while (bedingung) anweisung do anweisung while (bedingung) break und continue break: beendet die Schleife continue: setzt die Schleife fort 3. Sprachelemente
Bedingte Programmausführung if (bedingung) anweisung if (bedingung) anweisung1 else anweisung2 if (bedingung) anweisung1 elseif anweisung2 switch (ausdruck) { case 1: fall1; case 2: fall2; case 3: fall3 } bedingung? truewert : falsewert var tmp = a == undefined? 0 : a; 3. Sprachelemente
Funktionen Zusammenfassung von wiederkehrenden Programmteilen Übergabe der Parameter als Kopie ( Call by Value ) <! Dehnhardt./grundlagen/funktionsummmiere.html --> <SCRIPT Language=JavaScript> function summiere(a, b, c) { var tmp = a == undefined? 0 : a; tmp += b == undefined? 0 : b; tmp += c == undefined? 0 : c; return tmp; } document.write("<br>" + summiere()); document.write("<br>" + summiere(11)); document.write("<br>" + summiere(11, 3)); document.write("<br>" + summiere(11, 3, 6)); 3. Sprachelemente
Funktionen Übergabe auch mittels des Objekts arguments[] möglich <! Dehnhardt./grundlagen/funktionsumme.html --> <SCRIPT Language=JavaScript> function summe() { var tmp = 0; for (var i = 0; i < arguments.length; i++) tmp += arguments[i]; return tmp; } document.write("<br>" + summiere(11, 3, 6)); Rekursion möglich Funktionen können überall definiert werden 3. Sprachelemente
Strings Skriptsprachen haben üblicherweise viele eingebaute Funktionen, um Strings zu manipulieren Strings in JavaScript sind Objekte der Klasse String und werden mit deren Methoden manipuliert: Hello World!.length ergibt 12 Zeichen Hello World!.charAt(1) ergibt e Hello.concat( World! ) ergibt Hello World! Hello World!.indexOf( el ) ergibt 1 Hello World!.split( Wo ) ergibt Hello World! [1]= Hello Hello World! [2]= rld! 3. Sprachelemente
Arrays Auf Arrays kann mittels eines Elementindex oder assoziativ zugegriffen werden ar = new array(0, eins, {zwei: 2}, location.href} url = ar[3]; //url enthält jetzt die URL der Seite ar[1] = 1143; // eins wird mit 1143 überschrieben wert = ar[2][ zwei ]; // wert <- 2 n = 4; ar[n]= Hello ; ar[n+1]= World! ; ar[ hello ]= World! ; document.write( Hello + ar[ hello ]); [1, Hello ].concat(5, 11) ergibt [1, Hello, 5, 11] 3. Sprachelemente
4. Objekte in JavaScript Javascript ist eine eingeschränkt objektorientierte Sprache Objekte existieren Es gibt keine Klassen, sondern Prototyp-Objekte Objekte sind assoziative Arrays (Anlehnung an PERL) Eigenschaften von Objekten können über Objekt.Eigenschaft oder über Objekt["Eigenschaft"] angesprochen werden. Methoden sind Funktionen, die als Element dieses assoziativen Arrays definiert werden: Objekt["Methode"] = function(){ } Um mit WWW-Dokumenten umgehen zu können, gibt es gemäß dem Document Object Model (DOM) viele vordefinierte Objekte (vgl. nächsten Abschnitt) 4. Objekte in JavaScript
<!-- Dehnhardt./grundlagen/objekteigenbau.html --> <SCRIPT Language=JavaScript> kreis = {x:0, y:0, radius:1, PI:Math.PI} kreis["umfang"] = function() { return 2 * kreis["pi"] * kreis["radius"]; }; kreis["flaeche"] = function() { return kreis["pi"] * kreis["radius"] * kreis.radius; } document.write("<pre>"); kreis.radius = 1.0/kreis.PI; document.writeln("radius " + kreis.radius); document.writeln("umfang " + kreis.umfang()); document.writeln("umfang " + kreis["umfang"]()); document.writeln("fläche " + kreis.flaeche()); 4. Objekte in JavaScript
Will man mehrere Objekte instanzieren, so muss man das Objekt zunächst als Funktion beschreiben, und dann mit new konstruieren: <!-- Dehnhardt./grundlagen/klassekreis.html --> <SCRIPT Language=JavaScript> function Kreis (radius) { var PI = 3.14159; this.radius = radius; this.flaeche = function () { return PI * this.radius * this.radius;} this.umfang = function () { return 2 * PI * this.radius;} } k = new Kreis(4.00); document.writeln(k.radius); // -> 4 document.writeln(k.flaeche()); // -> 50.26544 document.writeln(k.umfang()); // -> 25.13272 4. Objekte in JavaScript
Vererbung (aus Dehnhardt./grundlagen/vererbung.html): <SCRIPT language=javascript> function Figur() { Figur.prototype.PI = 3.14159; Figur.prototype.name = function() { return "Figur"; };} function Kreis (radius) { this.radius = radius;} Kreis.prototype = new Figur(); // Figur erben Kreis.prototype.flaeche = function () { return this.pi*this.radius*this.radius;} Kreis.prototype.umfang = function () { return 2*this.PI*this.radius;} k = new Kreis(4.00); document.writeln(k.radius); // -> 4.0 document.writeln(k.umfang()); // -> 25.13272 document.writeln(k.name()); // -> Figur document.writeln(k.pi); // -> 3.14159 4. Objekte in JavaScript
5. Browsermodell Javascript manipuliert seine/ihre Umgebung mit Hilfe von vordefinierten Objekten Das rechte Bild zeigt den Anfang dieser Objekthierarchie Objektreferenzen: Selfhtml Unterschiede bei NS und IE W3C standardisiert DOM Quelle: www20.pair.com/doozer/guides/ javascript/js_014.html 5. Browsermodell
Window: das aktuellefenster parent: das übergeordnete Fenster eines Frameset; muss ein Frameset sein top: die Wurzel des Fensterbaumes eines Frameset; bei nur einem Frame das Fenster selbst self: identisch mit window frames[i]: i-ter Frame eines Frameset 5. Browsermodell
history: die Browser-Historie der zuvor besuchten Seiten (wichtig für Forward/Back) location: die URL, ggf. einschließlich des Query-Strings document: das HTML-Dokument title: Titel des Dokuments anchors[i]: i-ter Anker forms[i]: i-tes Formular links[i]: i-ter Hyperlink 5. Browsermodell
Beispiel window-methoden: alert(), confirm(), prompt() <!--./objekte/box.html --> <SCRIPT Language=JavaScript> alert("alarmfenster"); l = confirm("bestätigungsfenster"); document.writeln(l); x = prompt("eingabefenster", "Nein"); document.writeln(x); 5. Browsermodell
Beispiel window-methoden: open(), close() <!-- Dehnhardt./objekte/open.html --> <FORM> <INPUT Type=button Value="Öffne Fenster" onclick=tuwas()> </FORM> <SCRIPT Language=JavaScript> function tuwas() { var att = "resizable=yes,width=300,height=200"; var x = window.open(null, null, att); // leeres Fenster öffnen x.document.open(); x.document.write("<h4 Align=center>Titel</H4>\n"); x.document.write("<form><input Type=button Value=CloseIT"); x.document.write( " onclick=window.close()></form>\n"); x.document.close();} 5. Browsermodell
Beispiel window-methoden: setinterval() <!-- Dehnhardt./objekte/ticktack12.html --> <FORM><INPUT Type=text Name=aus Value=tack></FORM> <SCRIPT Language=JavaScript> setinterval("tac();", 1000); function tac() { var t = document.forms[0].aus; t.value = t.value.indexof("tack") > -1? "tick" : "tack"; } 5. Browsermodell
Beispiel Frames: setinterval() <!-- Dehnhardt./frames/zwei.html --> <FRAMESET Cols="250,*" Border=4> <FRAME Name=links Src=zwei-l.html> <FRAME Name=rechts Src=leer.html> </FRAMESET> <!-- Dehnhardt./frames/leer.html --> <BODY Bgcolor=white> 5. Browsermodell
Beispiel Frames <!-- Dehnhardt./frames/zwei-l.html --> <FORM> <INPUT Type=text Name=end Value=1> <INPUT Type=text Name=tor Value=1> <INPUT Type=button Name=los Value=Loos! onclick=rechne(this)> </FORM><PRE> <SCRIPT Language=JavaScript> function rechne(t) { var a = parsefloat(t.form.end.value) var b = parsefloat(t.form.tor.value); with (parent.rechts.document) { open(); writeln("a = " + a + "<BR>b = " + b); writeln("<br>summe = " + (a + b)); close();} } 5. Browsermodell
Beispiel Formulare <!-- Dehnhardt./objekte/eins.html --><PRE> <FORM Name=meinformular Method=GET Action=eins.html> <INPUT Type=button Name=meinknopf Value=Knopf> <INPUT Type=text Name=meintext Value=42> <SELECT Name=meinewahl><OPTION>eins <OPTION>zwei</SELECT> <INPUT Type=submit Name=submit Value=Los> </FORM> <SCRIPT Language=JavaScript> document.meinformular.onsubmit = function() { return confirm("wirklich losschicken?"); } 5. Browsermodell
Beispiel Animationen <!-- Dehnhardt./objekte/images.html --> <IMG Name=bild Src=bilder/T0.gif> <SCRIPT Language=JavaScript> max = 18; i = 0; pause = 200; setinterval("bewege()", pause); function bewege() { i = ++i < max? i : 0; document.bild.src = "bilder\/t"+ i+ ".gif"; // bilder/ti.gif } 5. Browsermodell
Beispiel "Hello World!"-Mauszeiger <!-- Dehnhardt./ stile/helloworld.html --> <STYLE TYPE="text/css">.stil { position:absolute; font-size:24pt; color:blue; } </STYLE> <DIV ID="hello" CLASS="stil" >Hello World!</DIV> <SCRIPT LANGUAGE="javascript"> var nav = navigator.appname.indexof("netscape")!= -1; if(nav) document.captureevents(event.mousemove); document.onmousemove = maus; function maus(e) { if (nav) { document.hello.left = e.pagex; // Navigator document.hello.top = e.pagey; } else { hello.style.left = event.clientx; // Internet Explorer hello.style.top = event.clienty; } } 5. Browsermodell
6. Ereignisse Event-Handler sind Bindeglied zwischen HTML und Javascript Sie werden als Attribute in HTML- Tags notiert Zu jedem Tag ist angegeben, welche Event-Handler dort vorkommen dürfen. 6. Ereignisse
Beispiel: onblur() <html><head><title>test</title> </head><body> <form name="test" action=""> Name: <input type="text" name="eingabe" onblur="checkinhalt(this.value)"><br> Name oder nichts eingeben und dann woanders hinklicken! </form> <script type="text/javascript"> document.test.eingabe.focus(); function CheckInhalt(Feld){ if(feld == "") { alert("namensfeld muss einen Inhalt haben!"); document.test.eingabe.focus(); return false;}} </script> </body></html> 6. Ereignisse