vorlesung informatik 1 - hochschule esslingenrau/vorlesungen/informatik1/folien/... ·...

© Andreas Rau, 15.10.10 D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-webpages.odp #1

Vorlesung Informatik 1Hochschule Esslingen

Studiengang Wirtschaftsinformatik

Exkurs: WebpagesDr. rer. nat. Andreas Rau

http://www.hs-esslingen.de/[email protected]

http://www.hs-esslingen.de/~rau

mailto:[email protected]


Eine wesentliche Voraussetzung zum Erlernen einer Programmiersprache ist viel Übung. Dafür braucht man Zeit, Wissen und Motivation.

Zeit kann/muss man sich nehmen. Wissen ist jedoch am Anfang noch wenig vorhanden, und da man mit dem wenigen Wissen auch nur wenig anfangen kann ist auch die Motivation eher gering.

Die Erstellung von Webseiten ermöglicht über die Themen Markup, Styling und Scripting einen schnellen und unkomplizierten Einstieg in die Welt der Programmierung und erlaubt gleichzeitig die sofortige Anwendung für kleine Projekte die einen sofortigen Nutzen und damit Spass und Motivation bringen, z.B. eine eigene Homepage.

Gleichzeitig werden viele Themen gestreift, die im weiteren Verlauf der Vorlesung noch vertieft werden, z.B. Struktur von Daten und Layouts, Trennung von Inhalt und Darstellung, Variablen, Funktionen, ... Auch der Umgang mit (englischsprachigen) Hilfeseiten und anderen Online Resourcen kann damit frühzeitig geübt werden.

Hintergrund


Einordnung von Webtechnologien

Server

Client

Webserver zur Auslieferung von WebseitenDatenspeicherung als Datei oder DatenbankSeiten statisch oder dynamisch generiertPHP, JSP+Servlets, ASP, CGI für Funktionen

Webbrowser zur Anzeige von WebseitenKeine Datenspeicherung (außer Cookies)HTML, XML, XSLT zur SeitenbeschreibungJavaScript und Applets für Funktionen

Net

zwer

k

Datentransfer über verschiedene ProtokolleTCP/IP mit Transportsicherung aber ohne Zustand


HTMLHypertext Markup Language


Im Internet gibt es nicht nur Webseiten! Der Zugriff auf beliebige Ressourcen im Internet erfolgt allgemein mit Hilfe von sog. URLs (Uniform Resource Locator).

Aufbau einer URL:<protocol>://<server>/<resource-path>

Dabei ist <protocol> zu verstehen als ein Dienst und legt u.a. die Kodierung von Anfrage an einen solchen fest. Hinter <server> verbirgt sich meist schlicht die IP-Adresse eines Rechners und <resource-path> ist im einfachsten Fall tatsächlich ein (relativer) Pfad zu einer Datei unterhalb eines speziellen Verzeichnisses des entsprechenden Dienstes.

Beispiele:http://www.hs-esslingen.de/~rau/index.html

ftp://ftp.mydomain.de/video.mpgjdbc://www.mydomain.de/database1svn://www.myproject.de/repository

Darüberhinaus werden ähnlich wie unter Windows verschiedene Dateitypen unterschieden. Dies geschieht aber nicht über Dateiendungen sondern sog. Mime-Types (die sich jedoch wieder Dateiendungen zuordnen lassen, Beispiel .jpg => image/jpeg). Dies ist u.a. deshalb nötig, weil ein <resource-path> u.U. gar keine Dateiendung hat!

Protokolle und Dateitypen


Ziel und Einordnung von HTMLHTML ist keine Programmiersprache im engeren Sinn sondern eine Beschreibungssprache (Markup Language) für (Web)seiten.

HTML = Hypertext Markup Language

Ziel von HTML ist also nicht die Beschreibung eines Ablaufs wie bei einer "echten" Programmiersprache, sondern die Beschreibung der Struktur einer Webseite. Dazu wird der eigentliche Inhalt dieser Seite durch Markierungen (Tags) ergänzt bzw. annotiert. Da die Markierungen nicht die eigentliche Information sondern eine einer Beschreibung der eigentlichen Information darstellen, werden Sie als Meta-Information bezeichnet.

Sachverhalt–(Beschreibung)-->Information--(Beschreibung)-->Meta-Information

Derartige Meta-Informationen werden auch in vielen anderen Bereichen der Informatik verwendet, z.B. zur Beschreibung von Datenstrukturen (Datenmodelle in UML) oder von Klassen und Objekten (Reflection in Java).

HTML basiert auf der allgemeineren Sprache SGML und wird zusammen mit anderen Web-Sprachen wie CSS, XML und XSLT vom W3C standardisiert und weiterentwickelt.

HTML(1)


Aufbau von HTMLHTML besteht im wesentlichen aus zwei Bestandteilen: Tags und Attributen. Diese sind immer nach dem gleichen Schema aufgebaut.

<TagName AttributeName="AttributeValue">

Obwohl keine Programmiersprache ist HTML dennoch eine "Computersprache" und schreibt daher eine strikte Syntax vor. Ihr einheitlicher Aufbau vereinfacht sowohl die Anwendung als auch die maschinelle Verarbeitung der Sprache.

Tags treten (bis auf wenige Ausnahmen) stets in Paaren auf: Es gibt ein öffnendes und ein schließendes Tag, z.B. <Fett an> und <Fett aus>. Außerdem ist es möglich, Tags zu verschachteln.

<Fett an>fett<Kursiv an>fett und kursiv<Kursiv aus><Fett aus>

HTML(2)


Anwendung von HTMLBei der Anwendung von Markup-Sprachen wie HTML unterscheidet man zwischen sog. prozeduralem Markup und semantischem Markup:

Prozedurales MarkupDirekte Beschreibung der FormatierungBeispiel: <Fett an>Text der fett sein soll<Fett aus>

Semantisches MarkupBeschreibung der Bedeutung und Formatierung gemäß separater BeschreibungBeispiel: <Wichtig an>Wichtiger Text<Wichtig aus>, Wichtig { Fett }

Über das Für und Wieder dieser beiden Vorgehensweisen werden im Internet regelrechte Glaubenskriege geführt. Letztendlich hat sich jedoch das semantische Markup als flexiblere Lösung durchgesetzt, ist jedoch nicht immer vollständig durchzuhalten.

Der Vorteil von semantischem Markup liegt daran, dass man zunächst die Struktur eines Dokuments beschreiben und dieses dann auf verschiedenen Ausgabegeräten (User Agents) und in unterschiedlichen Formen darstellen kann (z.B. für Behinderte). In der Praxis erfolgt die Beschreibung der Strukur in HTML und die des Formats mit CSS.

HTML(3)


Vergleich von HTML und JavaHTML hat viele Eigenschaften einer Programmiersprache wie Java, die einen Einstieg in die Welt der "Programmierung" mit Hilfe von HTML sinnvoll machen.

SyntaxSowohl HTML als auch Java haben eine definierte Syntax. Jedoch wird der Frust bei Verletzung der Syntax dadurch gemildert, dass die meisten Browser sehr tolerant sind und immer "irgendwas" anzeigen (fehlende Beschreibung vs. fehlende Anweisung).

VerschachtelungSowohl in HTML als auch in Java kommen verschachtelte Strukturen vor. Der Umgang damit kann in HTML spielerisch geübt werden.

Layouts und GUIsDas Layout einer Seite hat viele Eigenschaften einer grafischen Oberfläche. Layout mit Tabellen (obwohl verpönt) ist vergleichbar zu LayoutManagern in Java (z.B. GridLayout).

Die Anwendung von HTML führt schnell zu Ergebnissen(=Erfolgserlebnissen) und ermöglicht so "lernen mit Spaß". Daneben gibt es aber auch tatsächliche Berührungspunkte der beiden Sprachen: JavaDoc Kommentare (später) erlauben HTML und es ist möglich Java-Programme als sog. Applets in Webseiten einzubinden.

HTML(4)


HTML(5)

Konkrete HTML TagsDas genaue Format der Tags ist wie folgt (man beachte den "/" im Ende-Tag)

Begin-Tag: <TAG-NAME PARAM1="VALUE" PARAM2="VALUE>End-Tag: </TAG-NAME>

Der Rahmen eines HTML Dokuments wird durch die folgenden Tags gebildet:

<HTML><HEAD><TITLE>Der Seitentitel für Kopfzeile des Browsers</TITLE></HEAD><BODY>Der eigentliche Inhalt der Seite für das Browserfenster.</BODY></HTML>

Hier gibt es zu jedem Begin-Tag ein End-Tag! Im Bereich des <HEAD> Tags können noch weitere Meta-Informationen wie Stichworte für Suchmaschinen oder Verweise auf Stylesheets stehen.


Beispiele für "gute" Tags zur logischen Beschreibung des Seiteninhalts

Überschriften <H1>Text</H1> ... <H6>Text</H6>Absätze <P>Text</P>Hervorhebungen <EM>Text</EM>, <STRONG>Text</STRONG>Tabellen <TABLE BORDER="1" WIDTH="100%">

<TR><TH>Text</TH><TD>Text</TD>

</TR>...weitere Zeilen

</TABLE>Bilder <IMG SRC="Bild.gif" ALT="Beschreibung">Listen <UL>

<LI>Text...weitere Elemente

</UL>Anker <A NAME="LABEL"></A>Hyperlink <A HREF="URL#LABEL" TARGET="Fenstername">Text</A>

HTML(6)


Beispiele für "schlechte" Tags zur Formatierung des Seiteninhalts

Fettdruck (bold) <B>Text</B>Kursiv (italic) <I>Text</I>Unterstrichen <U>Text</U>Schriftart <FONT>Text</FONT>Ausrichtung <DIV ALIGN="MIDDLE">Text</DIV>Zeilenumbruch <BR>

Detaillierte Informationen zu HTML und den einzelnen Tags finden sich im Internet unter http://www.w3.org/markup und http://selfhtml.teamone.de

HTML(7)

http://www.w3.org/markup

http://selfhtml.teamone.de/


Bei Hyperlinks (<A>-Tag) bzw. Bildern (<IMG>-Tag) muss der Ort für das Zieldokument bzw. die Bilddatei angegeben werden. Dies ist entweder absolut (gilt immer) oder relativ zum Ort des aktuellen Dokuments (gilt nur ab hier) möglich.

Beispiel aus der realen WeltFrage: „Wo wohnt Herr Maier?“Absoluter Pfad: "Erde, Deutschland, 75312 Musterstadt, Hauptstraße 3, 2. Stock, links"Relativer Pfad: "Dieser Straße folgen, an der ersten Ampel links, ..."

Beispiel mit Dateien anhand folgender Struktur:~user/.public_html/welcome.html /bild1.jpg /images/bild2.jpg /uebungen/index.html /bild3.jpgLinks von index.html aus (absolut / relativ):http://www.hs-esslingen.de/~user/bild1.jpg ../bild1.jpghttp://www.hs-esslingen.de/~user/images/bild2.jpg ../images/bild2.jpghttp://www.hs-esslingen.de/~user/uebungen/bild3.jpg bild3.jpgInnerhalb eines Projekts sind relative Links sind kürzer und nicht vom Speicherort sondern nur von der Struktur des Projekts abhängig, d.h. sie funktionieren auf der lokalen Festplatte ebenso wie auf einem beliebigen Webserver (sind also zu bevorzugen).

Pfade (absolut vs relativ)


CSSCascading Style Sheets


Ziel und Einordnung von StylesheetsMit Stylesheets ist es möglich, den Inhalt eines Dokuments von seiner Formatierung zu trennen. Dazu können jedem Tag verschiedene Stil-Attribute zugeordnet werden. Dieses Prinzip wird uns später unter dem Namen Model-View-Controller wieder begegnen.

Die einfachste Form der Zuordnung erfolgt anhand des Tag-Typsh1 { background-color: #ff0000 } wirkt auf <h1>Text</h1>

Eine genauere Klassifizierung ist über das HTML Attribut class möglichp.abstract { text-style: italic } wirkt auf <p class="abstract">Text</p>

Schließlich können einzelne Elemente über das HTML Attribut id referenziert werden div#header { border: 1 solid black } wirkt auf <div id="header">Text</div>

Die allgemeine Form einer simplen Styledefinition lautet alsoTagName[#ID][.ClassName] { PropertyName: PropertyValue }

oder etwas allgemeiner

Pattern { PropertyName: PropertyValue }

Dabei steht Pattern für ein Muster das auf ein oder mehrere Tags passt (oder auch nicht).

Cascading Style Sheets (CSS)


Komplexere Styledefinitionen beziehen sich auf mehrere Tags, enthalten mehrere Eigenschaften oder nutzen die Schränken die betroffenen Tags durch Beschreibung der Verschachtelung weiter ein (Kaskadierung, daher Cascading Style Sheets)

Mehrere Tags, z.B. alle Überschriften in blau (Textfarbe)h1, h2, h3 { color: #0000ff;}

Mehrere Eigenschaften, z.B. Absätze in Arial 12 (Schriftart und Größe)p { font-family: Arial; font-size: 12pt;}

Angabe der Verschachtelung, z.B. alle Links in numerierten Listen fett (Schriftgewicht)ol li a { font-weight: bold;}

Diese Möglichkeiten tragen zu Reduzierung von Schreibarbeit und Redundanz und erlauben gleichzeitig eine noch spezifischere Beschreibung der Darstellung.


Die Verbindung zwischen HTML-Tags und Styledefinitionen kann entweder über ein externes Stylesheet geschehen (gut für einheitliches Aussehen einer ganzen Website) oder direkt im HTML Dokument geschehen (in Ausnahmefällen). Das folgende Beispiel illustriert alle diese Möglichkeiten.

<HTML><HEAD><LINK REL="stylesheet" TYPE="text/css" HREF="style.css" TITLE="default"><STYLE TYPE="text/css">P { text-align: right; background-color: #0000ff } </STYLE></HEAD><BODY STYLE="background-color: #ff0000"> <P>Das ist ein rechtsbündiger Absatz mit blauem Hintergrund</BODY></HTML>

Genaue Informationen zu den einzelnen Eigenschaften finden sich beim W3C unter http://www.w3.org/style/css bzw. (wieder) bei http://selfhtml.teamone.de. Einen Eindruck von der Mächtigkeit von CSS vermittelt die Seite http://www.csszengarden.com


http://www.w3.org/style/css

http://selfhtml.teamone.de/

http://www.csszengarden.com/


Bei der Anwendung eines Stylesheets werden die Styledefinitionen wie folgt kombiniert:

● Alle Styledefinition die ein Tag betreffen werden zusammengefasst● Treten dabei Wiedersprüche auf gilt die Angabe mit dem spezifischeren Muster● Spezifischer ist (a) näher am Tag (b) parent tag (c) tag.id d) tag.class e) nur tag

Eigenschaften eines Tags, für die im Stylesheet keine explizite Angabe vorhanden ist, werden entweder von umgebenden Tags geerbt oder durch die Default Werte des Browsers festgelegt.

Beispiel<html><head><style type="text/css">body { background-color: red; }p { font-size: 12pt; font-weight: bold; }</style></head><body><p style="font-weight: normal">Schwarzer 12pt Normaltext auf rotem Grund</p></body></html>


Default-Style body-Style (Erbschaft)Style-Attribut

p-Style


Farben werden in HTML und CSS durch Codes angegeben, welche die Anteile für die Grundfarben ROT, GRÜN und BLAU (RGB) angeben (additive Farbmischung). Dabei stehen je 2 Ziffern für jede Farbe; gezählt wird jeweils 0, 1, 2, ..., 9, a, b, c, d, e, f.

<html><body><span style="background-color: #800080"> </span><span style="background-color: #800000"> </span><span style="background-color: #804000"> </span><span style="background-color: #808000"> </span><span style="background-color: #408000"> </span><span style="background-color: #008000"> </span><span style="background-color: #008040"> </span><span style="background-color: #008080"> </span><span style="background-color: #004080"> </span><span style="background-color: #000080"> </span></body></html>

Farbcodes in HTML bzw. CSS


Cascading Stylesheets (CSS) - Einordnung

TextASCii / normaler Text

StrukturHTML / "gute" Tags

StyleCSS, HTML / "schlechte Tags"

InhaltsebeneBeschreibung des Inhalts der Seite

Meta-EbeneBeschreibung der Struktur der Inhaltsebene

Meta-Meta-EbeneBeschreibung des Aussehens für Elemente der Meta-Ebene

Bestandteile einer Webseite


Cascading Style Sheets (CSS) - Priorisierung

Default Browser StyleBrowserkonfiguration

Externes StylesheetDefinition in Datei, Einbindung via <link>

Internes StylesheetDefinition via <style> innerhalb der webseite

Historisches AussehenGroße Schriftarten, Wenig Farbe

Vorschlag des AnwendersNur für Seiten ohne eigene Vorgaben

Corporate IdentityEinheitliches Aussehen für alle Seiten einer Domäne

Style AttributeDefinition via <... style=""> an einem Tag

Important User StyleLokale Regeln mit !IMPORTANT

Default User StyleLokale Regeln ohne !IMPORTANT

Grosse AusnahmenAbweichende/zusätzliche Formatierung auf besonderen Seiten

Kleine AusnahmenBeschreibung der Struktur der Inhaltsebene

Sonderwünsche des AnwendersÜbersteuerung jeglicher Formatierungen


Stylesheets sind nicht nur hilfreich bei der Gestaltung von Webseiten. Sie können auch verwendet werden, um Webseiten durch den Anwender anzupassen. Zu diesem Zweck erlauben alle modernen Browser die Definition von sog. Custom-Stylesheets (Firefox mit der Erweiterung „stylish“ sogar spezifisch pro Website). In diesen Stylesheets kann mit Hilfe von !IMPORTANT-Regeln der Stil der Webseite überschrieben werden, z.B. um die Lesbarkeit zu verbessern oder Werbung auszublenden ;-)

Beispiel:

Datei: custom.css

/* alle bilder ausblenden */img { display: none !important;}

/* werbung auf heise.de ausblenden */div.bcadv { display: none !important;}

Cascading Style Sheets (CSS) - Anwendung


Javascript(hat nix mit Java zu tun!!!)


Ziel und Einordnung von JavaScriptObwohl es der Name vermuten ließe hat JavaScript nichts aber auch gar nichts mit Java zu tun! Obwohl es Ähnlichkeiten zwischen beiden Sprachen gibt, z.B. bei der Schreibweise von Kontrollstrukturen, unterscheiden sie sich in vielen elementaren Aspekten wie der Typisierung oder dem Objektmodell und haben sich historisch unabhängig voneinander entwickelt: Javascript bei der Firma Netscape, Java bei Sun Microsystems (Javasoft). Während Java mittlerweile bald in Version 6.0 vorliegt wurde die Sprache JavaScript zwischenzeitlich unter dem Namen ECMA Script standardisiert.

Einsatzbereich für Javascript ist die "Anreicherung von Webseiten", z.B. mit Prüfungen für Formulareingaben oder einfachen Animationen. Letztere Anwendung wird auch mit dem Stichwort dynamisches HTML (kurz DHTML) bezeichnet. Damit gemeint ist die Veränderung von Darstellung und ggf. auch Inhalt einer Webseite durch den eingebetteten JavaScript Code. Man kann jedoch auch komplexe Applikationen mit Hilfe von JavaScript entwickeln.

Was die praktische Programmierung mit JavaScript etwas erschwert ist die Tatsache, daß (1) JavaScript in mehreren Versionen existiert, (2) verschiedene Browserhersteller den Zugriff auf die Seitenelemente unterschiedlich implementiert haben und (3) Debugging nur eingeschränkt möglich ist.

JavaScript


Mit JavaScript kann man● Funktionen im Webbrowser ausführen (auf dem Client)● Auf Elemente einer Webseite zugreifen bzw. diese verändern● Neue Browserfenster und Hinweisfenster öffnen

Mit JavaScript kann man nicht● Funktionen im Webserver (auf dem Server) ausführen● Daten auf dem Webserver speichern● Auf die Festplatte des Rechners zugreifen● Andere Applikationen starten

Grund für diese Einschränkungen ist, dass (fremder und potentiell bösartiger) JavaScript Code erst auf dem lokalen Rechner ausgeführt wird und dieser geschützt werden soll.

Zur Ausführung von Funktionen und Datenspeicherung auf einem Server sind serverseitige Technologien wie CGI, PHP, ASP, JSP notwendig. Hosting Angebote die diese Funktionalität beinhalten sind i.d.R. teuerer als reines HTML Hosting da mehr Rechenleistung und Speicherplatz verbraucht wird.

JavaScript

Die Einbettung von JavaScript in eine Webseite kann wie bei Stylesheets entweder direkt oder indirekt erfolgen. Letzteres ist empfehlenswert zur Auslagerung oder Wiederverwendung von umfangreichen Funktionen.

Direkte Einbettung (an beliebiger Stelle)<script type="text/javascript"></script>

Indirekte Einbettung (im Kopfteil der HTML Seite)<script type="text/javascript" src="myscript.js"></script>

Außerdem können Javascript Anweisungen direkt in Links oder als sog. EventHandler (Ereignisbehandler) verwendet werden

<a href="javascript:myTriggerFunction()"></a>

<body onLoad="myLoadFunction()"><div onClick="myClickFunction()">

JavaScript

HTML Kommentar, nötig damit in alten Browsernohne Script-Unterstützung der Programmcodenicht als Text auf der Webseite erscheint.

Weitere Event-Handler sind in SelfHTML unterJavascript/DOM..Sprachelement..EventHandleraufgelistet und mit Beispiel erklärt.


Die Interpretation von Webseiten bzw. des enthaltenen Javascript-Codes erfolgt von oben nach unten (wie das folgende Beispiel zeigt).

<html><body>Schritt 1<script type="text/javascript">alert( "Schritt 1");</script>Schritt 2<script type="text/javascript">alert( "Schritt 2");</script>Schritt 3<script type="text/javascript">alert( "Schritt 3");</script></body></html>

JavaScript


Variablen in JavaScript sind untypisiert, d.h. arbeiten mit verschiedenen Arten von Wertenvar value;value = 1; // eine Zahlvalue = "Eins"; // eine BuchstabenfolgeErgebnis und Parameter von Funktionen in JavaScript sind ebenfalls nicht typisiertfunction addieren(a, b) { // Platzhalter für zwei Werte return a+b; // Berechnung mit Platzhaltern & Rückgabe}Die meisten Operatoren in JavaScript verhalten sich je nach Wert "wie man es erwartet"value = 2 + 2; // ergibt 4value = "Eins" + "Zwei" + "Drei"; // ergibt "EinsZweiDrei"Mit Hilfe der oben definierten Funktion läßt sich das übrigends auch so schreibenvalue = addiere(2, 2); // Berechnung mit a=2, b=2value = addiere("Eins", "Zwei"); // Berechnung mit a="Eins", b="Zwei"JavaScript Code kann theoretisch überall in einer Webseite stehen, üblich ist jedoch die Definition im Header. Anweisungen, die außerhalb von Funktionen stehen, werden sofort beim Überlesen ausgeführt, können aber nur auf bereits gelesene Teile zugreifen.

JavaScript


Eine einfache HTML Datei mit einem echten Klassiker ;-)

<html><body><script type="text/javascript">document.writeln( "Hello, World!");</script></body></html>

Die Anweisung

document.writeln( "Hello, World!");

schreibt das Ergebnis direkt nach dem </script>-Tag in die Seite. Es wird auch genauso angezeigt (wenn Javascript an ist, sonst sieht man nix). Betrachtet man jedoch den Quellcode im Browser, sieht man wieder nur das Skript (it's magic!). Für Firefox gibt es ein Plugin (savegenpage) mit dem man sich den generierten Quelltext anschauen kann...

Beispiele


Die folgende Datei betreibt, äh, „Kundenbindung“

<html><body>Sie sehen gerade <script type="text/javascript">document.writeln( document.location);</script><a href="javascript:springe( 'http://www.spiegel.de')">Springen</a><script type="text/javascript">function springe( url) { alert( "Jetzt geht's zu " + url); // Standard: Hinweisfenster if ( confirm( "Wollen Sie wirklich hier weg?")) { // Standard: Rückfrage document.location = url; } else { alert( "Eine gute Entscheidung!"); }}</script></body></html>

Man kann also offenbar auf die aktuelle Datei/Seite lesend und schreibend zugreifen, und den einen oder anderen Standard-Dialog gibt es auch. Wie praktisch!

Beispiele


Die folgende Datei enthält eine Berechnung (Notepad + Browser = Taschenrechner!)

<html><body><script type="text/javascript">var a = 10;var b = 3;document.writeln( a + b); // neben + gibt es gibt auch noch - * /</script></body></html>

Versuchen sie mal die anderen Operatoren im Kommentar (wofür stehen denn die wohl?). Langweilig, das kennen wir ja schon aus der Schulmathematik!

Aber wie sieht's denn mit dem Operator % aus? Was macht der? Einfach mal probieren...

Beispiele


Die folgende Datei verknüpft einige Zeichen(ketten)

<html><body><script type="text/javascript">var a = "1"; // 1var b = '2'; // 2var c = 'Drei';document.writeln( a+b+c); // (a+b)+c</script></body></html>

Versuchen Sie doch mal, bei den Zahlen die Anführungszeichen zu entfernen oder die „Berechnung“ (das Plus macht ja offensichtlich was anderes...) unterschiedlich zu klammern. Wie deuten Sie die Ergebnisse?

Ist das nicht alles sehr wundersam? Oder wunderbar ;-) ?

Beispiele


Die folgende Datei betreibt etwas Logik

<html><body><script type="text/javascript">var a = 5;var b = 10;document.writeln( a<b); // neben < gibt es auch noch > == != >= <= </script></body></html>

Die Operanden „<“ und „>“ sind ja klar, und „<=“ bzw. „>=“ wohl den Unzulänglichkeiten der Anzeige zuzuschreiben. Aber „==“ ist ja wohl doppelt gemoppelt – oder gibt's da einen Grund? Der Operator „!=“ ist dann was? Da kommt man um ein Experiment nicht rum...

Beispiele


Es ist möglich, mit JavaScript auf die (sichtbaren) Elemente einer HTML Seite zuzugreifen und diese zu manipulieren. Die Seite wird dabei als Sammlung von Elementen betrachtet, die gemäß einer vorgegebenen (Baum)Struktur angeordnet sind. Diese Baumstruktur nennt man DOM (Document Object Model).

Solche einfachen Baumstrukturen sind sehr praktisch und finden sich an vielen Stellen in der Informatik. Sie werden uns unter anderem bei der Vererbung von Eigenschaften zwischen Klassen und beim Aufbau von grafischen Benutzeroberflächen wieder begegnen. Im ersten Fall spricht man von einer logisch-inhaltlichen Vererbungsbeziehung (ist-ein), im zweiten Fall von einer physikalischen Kompositionsbeziehung (besteht aus).

Beispiel:Ein Auto ist-ein FahrzeugEine Webseite besteht aus Head und Body, Body aus Überschriften und Absätzen, ...

Neben der Navigation durch die Baumstruktur ist auch ein direkter Zugriff auf Elemente über deren Namen bzw. ID möglich. Dazu gibt es in Javascript zwei Funktionen

var element = document.getElementById( <ID>); // eindeutigvar elements = document.getElementsByName( <Name>); // mehrdeutig

JavaScript


Seiten als Baumstruktur (Beispiel)

<html> <head> <title>Beispielseite</title> </head> <body> <h1>Titel</h1> <p>bla bla bla bla bla <ul> <li>Punkt 1 <li>Punkt 2 <li>Punkt 3 </ul> </body></html>


Seiten als Baumstruktur (Beispiel)

html

head body

title

„Beispielseite“

h1 p ul

li li li„Titel“

„Punkt 2“ „Punkt 3“„Punkt 1“

„Bla Bla ...“


In der folgenden Datei treibt man es ziemlich bunt ;-)

<html><style type="text/css">div#text { background-color: blue;} </style><body><div id="text">Das ist ein Beispieltext</div><a href="javascript:rot()">rot</a><script type="text/javascript">function rot() { var element = document.getElementById( "text"); element.style.backgroundColor = "red";}</script></body></html>

Die Variable element repräsentiert also einen Teil der Seite der (Stil-)Eigenschaften besitzt, die man per Zuweisung manipulieren kann – mit sofortiger Wirkung!

Beispiele


In der folgenden Datei macht man große Sprünge...

<html><style type="text/css">div#text { position: absolute; bottom: 0px;} </style><body><div id="text">Das ist ein Beispieltext</div><a href="javascript:anheben()">anheben</a><script type="text/javascript">function anheben() { var element = document.getElementById( "text"); element.style.bottom = "100px"; }</script></body></html>

Naja, wenn es mit einer Eigenschaft geht, dann wohl auch mit den anderen...

Beispiele


In der folgenden Datei gibt es eine grosse (auf)klappe

<html><body><script type="text/javascript">function aufklappen( id) { var element = document.getElementById( id); element.style.display = "block";}</script><a href="javascript:aufklappen( 'haupt')">Haupt</a><div id="haupt" style="display: none"><a href="">Unter 1</a><a href="">Unter 2</a><a href="">Unter 3</a></div></body></html>

Dynamische Menüs sind also gar nicht so schwierig...

Frage: Wie erreicht man, dass das Element bei erneutem Anklicken wieder zuklappt?

Beispiele


Inhalte von HTML Formularen werden i.d.R. auf dem Server ausgewertet, man kann aber (zunächst) auch mit Javascript arbeiten (z.B. um Eingaben zu prüfen).

<html><body><form action="javascript:act()"><input id="feld1" name="vorname" value=""></input><input type="submit" value="weiter"></input><div id="text"></div><script type="text/javascript">function act() { var feld = document.getElementById( "feld1"); var name = feld.value; var text = document.getElementById( "text"); text.innerHTML = "Diese Seite ist " + name + " gewidmet";}</script></form></body></html>

Beispiele


Zum Abschluss noch ein praktisches Beispiel zum interaktiven Rechnen.

<html><body><form action="javascript:act()"><input id="feld1" name="wert1" value=""></input><input id="feld2" name="wert2" value=""></input><input type="submit" value="weiter"></input><div id="text"></div><script type="text/javascript">function act() { var feld1 = document.getElementById( "feld1"); var feld2 = document.getElementById( "feld2"); var wert1 = feld1.value; var wert2 = feld2.value; var ergebnis = parseInt(wert1)+parseInt(wert2); // parseInt=Text deuten var text = document.getElementById( "text"); text.innerHTML = "Das Ergbnis ist " + ergebnis;}</script></form></body></html>

Beispiele


Betrachtet man den Quellcode von HTML-Seiten aus einem Editor oder im Web, sieht man vor dem Tag <html> oftmals eine kryptische Zeile wie z.B.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Dabei handelt es sich um eine sog. Dokumenttyp-Deklaration. Diese dient dazu, dem Browser anzuzeigen, nach welchen Regeln ein Dokument interpretiert werden soll. Die Endung ".html" bzw. das Tag <html> reichen dafür nicht aus, da im Laufe der Weiterentwicklung von HTML verschiedene „Geschmacksrichtungen“ definiert wurden die durch sog. Dokumenttyp-Definitionen (DTD) beschrieben werden. Moderne Browser enthalten einen sog. DOCTYPE-Switch, um zwischen diese jeweils richtig anzuzeigen.

In der Datei "loose.dtd" wird also definiert, welche Elemente ein Dokument dieses Typs enthalten darf, welche Elemente verschachtelt werden dürfen, welche Attribute zu einem Element gehören und ob deren Angabe Pflicht ist oder freiwillig usw.

Dieser Aufwand erscheint zunächst übertrieben ist aber notwendig, um den Aufbau der Sprache eindeutig festzulegen, und bildet die Grundlage für die allgemeine Verwendbarkeit der dadurch gebildeten Dokumente.

Einschub: DocTypes


SVGScalable Vector Graphics


Vektorgrafiken sind nicht aus Pixeln sondern aus geometrischen Elementen zusammengesetzt. Daher werden Sie beim Vergrößern auch nicht pixelig. Es gibt sowohl für Pixelgrafiken als auch für Vektorgrafiken verschiedene Formate und zug. Programme (Open-Source: GIMP und Inkscape, Kommerziell: Photoshop und Corel Draw).

Die Beschreibung einer SVG geschieht mit Hilfe von Zeichenbefehlen die, richtig, in spitzen Klammern geschrieben werden – Spitze, was man damit alles machen kann ;-)

Beim Lesen der Datei werden die Befehle der Reihe nach vom Browser(pluggin) abgearbeitet. Daher können Elemente, die später gezeichnet werden vorher gezeichnete Elemente verdecken (Reihenfolge ergibt z-Koordinate). Größere Bilder werden aus diesen primitiven Elementen zusammengesetzt. Da sich die Primitive leicht skalieren lassen, gilt dasselbe auch für das resultierende Gesamtbild.

SVG war gedacht, um im Web Grafiken leicht und in hoher Qualität anzeigen und ggf. auch animieren(!) zu können. Leider hält sich die Unterstützung durch aktuelle Browser immer noch sehr in Grenzen (Firefox ja, IE nur mit Plugin). Hintergrund ist die hohe Verbreitung konkurrierender Technologien wie JavaFX, Silverlight und v.a. Adobe Flash.

Skalierbare Vektorgrafiken (SVG)


Das Koordinatensystem für x und y steht auf dem Kopf: Der Ursprung ist oben links statt unten links wie in Mathe. Vermutlich wegen dem Zeilenstrahl in der guten alten Bildröhre.

Nachfolgend noch ein Beispiel, Details in der Wikipedia unter "SVG" bzw. auf selfsvg.info


Y

X

Beispieldatei "beispiel.svg"<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full" width="300%" height="300%"> 

<text x="30" y="50" style="font-size: 24pt">Spitze Klammern finde ich...</text>

<circle cx="50" cy="100" r="20" style="stroke: black; stroke-width: 3; fill: red"/><text x="100" y="110" style="font-size: 24pt; font-weight: bold; stroke: black; fill: red">doof</text>

<circle cx="50" cy="150" r="20" style="stroke: black; stroke-width: 3; fill: yellow"/><text x="100" y="160" style="font-size: 24pt; font-weight: bold; stroke: black; fill: yellow">naja</text>

<circle cx="50" cy="200" r="20" style="stroke: black; stroke-width: 3; fill: green"/><text x="100" y="210" style="font-size: 24pt; font-weight: bold; stroke: black; fill: green">cool</text>

<line x1="30" y1="180" x2="70" y2="220" style="stroke: black"/> <line x1="30" y1="220" x2="70" y2="180" style="stroke: black"/>

<rect x="250" y="80" width="90" height="90" style="fill: red; opacity: 0.5"/><rect x="300" y="130" width="90" height="90" style="fill: blue; opacity: 0.5"/>

</svg>



Angezeigte Grafik (Maßstab 1:1 aus dem Firefox)

PS: Wenn Sie anderer Meinung sind, können Sie ja die Beispieldatei entsprechend abändern...

y-Achse

x-Achse


50 50 Multiplikator0 300 Offset

X Y=F(X) SVG Kommando0 0 0 300

0,25 0,25 13 288 <line x1="0" y1="300" x2="13" y2="288" style="stroke: black"/>0,5 0,48 25 276 <line x1="13" y1="288" x2="25" y2="276" style="stroke: black"/>

0,75 0,68 38 266 <line x1="25" y1="276" x2="38" y2="266" style="stroke: black"/>1 0,84 50 258 <line x1="38" y1="266" x2="50" y2="258" style="stroke: black"/>

1,25 0,95 63 253 <line x1="50" y1="258" x2="63" y2="253" style="stroke: black"/>1,5 1 75 250 <line x1="63" y1="253" x2="75" y2="250" style="stroke: black"/>


2,25 0,78 113 261 <line x1="100" y1="255" x2="113" y2="261" style="stroke: black"/>2,5 0,6 125 270 <line x1="113" y1="261" x2="125" y2="270" style="stroke: black"/>


3,25 -0,11 163 305 <line x1="150" y1="293" x2="163" y2="305" style="stroke: black"/>3,5 -0,35 175 318 <line x1="163" y1="305" x2="175" y2="318" style="stroke: black"/>

3,75 -0,57 188 329 <line x1="175" y1="318" x2="188" y2="329" style="stroke: black"/>4 -0,76 200 338 <line x1="188" y1="329" x2="200" y2="338" style="stroke: black"/>


4,75 -1 238 350 <line x1="225" y1="349" x2="238" y2="350" style="stroke: black"/>5 -0,96 250 348 <line x1="238" y1="350" x2="250" y2="348" style="stroke: black"/>


5,75 -0,51 288 325 <line x1="275" y1="335" x2="288" y2="325" style="stroke: black"/>6 -0,28 300 314 <line x1="288" y1="325" x2="300" y2="314" style="stroke: black"/>

6,25 -0,03 313 302 <line x1="300" y1="314" x2="313" y2="302" style="stroke: black"/>

Xscaled Yscaled

Skalierbare Vektorgrafiken (SVG)Eine (etwas schräge) Anwendung von SVG als Funktionsplotter

=SIN(A5)

=RUNDEN(A5*C$1;0)+C$2=D$2-RUNDEN(B5*D$1;0)

="<line x1="""&C5&""" y1="""&D5&""" x2="""&C6&""" y2="""&D6&""" style=""stroke: black""/>"


Skalierbare Vektorgrafiken (SVG)<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full" width="300%" height="300%"> <line x1="0" y1="300" x2="13" y2="288" style="stroke: black"/><line x1="13" y1="288" x2="25" y2="276" style="stroke: black"/><line x1="25" y1="276" x2="38" y2="266" style="stroke: black"/><line x1="38" y1="266" x2="50" y2="258" style="stroke: black"/><line x1="50" y1="258" x2="63" y2="253" style="stroke: black"/><line x1="63" y1="253" x2="75" y2="250" style="stroke: black"/><line x1="75" y1="250" x2="88" y2="251" style="stroke: black"/><line x1="88" y1="251" x2="100" y2="255" style="stroke: black"/><line x1="100" y1="255" x2="113" y2="261" style="stroke: black"/><line x1="113" y1="261" x2="125" y2="270" style="stroke: black"/><line x1="125" y1="270" x2="138" y2="281" style="stroke: black"/><line x1="138" y1="281" x2="150" y2="293" style="stroke: black"/><line x1="150" y1="293" x2="163" y2="305" style="stroke: black"/><line x1="163" y1="305" x2="175" y2="318" style="stroke: black"/><line x1="175" y1="318" x2="188" y2="329" style="stroke: black"/><line x1="188" y1="329" x2="200" y2="338" style="stroke: black"/><line x1="200" y1="338" x2="213" y2="345" style="stroke: black"/><line x1="213" y1="345" x2="225" y2="349" style="stroke: black"/><line x1="225" y1="349" x2="238" y2="350" style="stroke: black"/><line x1="238" y1="350" x2="250" y2="348" style="stroke: black"/><line x1="250" y1="348" x2="263" y2="343" style="stroke: black"/><line x1="263" y1="343" x2="275" y2="335" style="stroke: black"/><line x1="275" y1="335" x2="288" y2="325" style="stroke: black"/><line x1="288" y1="325" x2="300" y2="314" style="stroke: black"/><line x1="300" y1="314" x2="313" y2="302" style="stroke: black"/></svg>


AusblickWo das herkommt ist noch mehr


AusblickDie bis hier angesprochenen Technologien beinhalten eine Vielfalt von Konzepten, die uns in der einen oder anderen Form später wieder begegnen werden. Sie bieten darüber hinaus ein weites Feld von Möglichkeiten für weitere Experimente – zumindest bis zu dem Zeitpunkt, bis die Java Programmierung in Fahrt kommt.

Obwohl nicht im engeren Sinne prüfungsrelevant, ist der bisher behandelte Stoff als Einladung zum Experimentieren und spielerischen Lernen zu verstehen. Arbeiten Sie mit den vorgestellten Elementen, entwickeln Sie weitere Ideen und nutzen Sie die Ressourcen im Internet, z.B. bei http://www.w3schools.com/, um mehr herauszufinden.

Geben Sie sich nicht schon zufrieden, wenn es läuftsondern erst, wenn Sie verstanden haben warum!

Die Zeit, die Sie am Anfang investieren um die Grundkonzepte zu verstehen zahlt sich langfristig doppelt aus (Think: intellektueller Zinseszins-Effekt!)

http://www.w3schools.com/

vorlesung informatik 1 - hochschule esslingenrau/vorlesungen/informatik1/folien/... ·...

Documents