Vorlesung Informatik 1

Transcrição

Vorlesung Informatik 1
Hochschule Esslingen
Studiengang Wirtschaftsinformatik
Exkurs: Webpages
Dr. rer. nat. Andreas Rau
http://www.hs-esslingen.de/~rau
[email protected]
© Andreas Rau, 15.10.10
D:\home\ar\fhte\vorlesungen\informatik1\folien\informatik1-theorie-webpages.odp
#1
Hintergrund
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.
#2
Einordnung von Webtechnologien
Netzwerk
Server
Client
Webserver zur Auslieferung von Webseiten
Datenspeicherung als Datei oder Datenbank
Seiten statisch oder dynamisch generiert
PHP, JSP+Servlets, ASP, CGI für Funktionen
Datentransfer über verschiedene Protokolle
TCP/IP mit Transportsicherung aber ohne Zustand
Webbrowser zur Anzeige von Webseiten
Keine Datenspeicherung (außer Cookies)
HTML, XML, XSLT zur Seitenbeschreibung
JavaScript und Applets für Funktionen
#3
HTML
Hypertext Markup Language
#4
Protokolle und Dateitypen
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.mpg
jdbc://www.mydomain.de/database1
svn://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!
#5
HTML(1)
Ziel und Einordnung von HTML
HTML
ist
keine
Programmiersprache
im
engeren
Beschreibungssprache (Markup Language) für (Web)seiten.
Sinn
sondern
eine
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.
#6
HTML(2)
Aufbau von HTML
HTML 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>
#7
HTML(3)
Anwendung von HTML
Bei der Anwendung von Markup-Sprachen wie HTML unterscheidet man zwischen sog.
prozeduralem Markup und semantischem Markup:
Prozedurales Markup
Direkte Beschreibung der Formatierung
Beispiel: <Fett an>Text der fett sein soll<Fett aus>
Semantisches Markup
Beschreibung der Bedeutung und Formatierung gemäß separater Beschreibung
Beispiel: <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.
#8
HTML(4)
Vergleich von HTML und Java
HTML hat viele Eigenschaften einer Programmiersprache wie Java, die einen Einstieg in
die Welt der "Programmierung" mit Hilfe von HTML sinnvoll machen.
Syntax
Sowohl 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).
Verschachtelung
Sowohl in HTML als auch in Java kommen verschachtelte Strukturen vor. Der Umgang
damit kann in HTML spielerisch geübt werden.
Layouts und GUIs
Das 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.
#9
HTML(5)
Konkrete HTML Tags
Das genaue Format der Tags ist wie folgt (man beachte den "/" im Ende-Tag)
Begin-Tag:
End-Tag:
<TAG-NAME PARAM1="VALUE" PARAM2="VALUE>
</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.
#10
HTML(6)
Beispiele für "gute" Tags zur logischen Beschreibung des Seiteninhalts
Überschriften
Absätze
Hervorhebungen
Tabellen
Bilder
Listen
Anker
Hyperlink
<H1>Text</H1> ... <H6>Text</H6>
<P>Text</P>
<EM>Text</EM>, <STRONG>Text</STRONG>
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TH>Text</TH>
<TD>Text</TD>
</TR>
...weitere Zeilen
</TABLE>
<IMG SRC="Bild.gif" ALT="Beschreibung">
<UL>
<LI>Text
...weitere Elemente
</UL>
<A NAME="LABEL"></A>
<A HREF="URL#LABEL" TARGET="Fenstername">Text</A>
#11
HTML(7)
Beispiele für "schlechte" Tags zur Formatierung des Seiteninhalts
Fettdruck (bold)
Kursiv (italic)
Unterstrichen
Schriftart
Ausrichtung
Zeilenumbruch
<B>Text</B>
<I>Text</I>
<U>Text</U>
<FONT>Text</FONT>
<DIV ALIGN="MIDDLE">Text</DIV>
<BR>
Detaillierte Informationen zu HTML und den einzelnen Tags finden sich im
Internet unter http://www.w3.org/markup und http://selfhtml.teamone.de
#12
Pfade (absolut vs relativ)
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 Welt
Frage: „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.jpg
Links von index.html aus (absolut / relativ):
http://www.hs-esslingen.de/~user/bild1.jpg
../bild1.jpg
http://www.hs-esslingen.de/~user/images/bild2.jpg
../images/bild2.jpg
http://www.hs-esslingen.de/~user/uebungen/bild3.jpg bild3.jpg
Innerhalb 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).
#13
CSS
Cascading Style Sheets
#14
Cascading Style Sheets (CSS)
Ziel und Einordnung von Stylesheets
Mit 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-Typs
h1 { background-color: #ff0000 } wirkt auf <h1>Text</h1>
Eine genauere Klassifizierung ist über das HTML Attribut class möglich
p.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 also
TagName[#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).
#15
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.
#16
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
#17
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>
p-Style
</head>
<body>
<p style="font-weight: normal">Schwarzer 12pt Normaltext auf rotem Grund</p>
</body>
</html>
Default-Style Style-Attribut
body-Style (Erbschaft)
#18
Farbcodes in HTML bzw. CSS
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:
</body>
</html>
#800080">   </span>
#800000">   </span>
#804000">   </span>
#808000">   </span>
#408000">   </span>
#008000">   </span>
#008040">   </span>
#008080">   </span>
#004080">   </span>
#000080">   </span>
#19
Cascading Stylesheets (CSS) - Einordnung
Bestandteile einer Webseite
Style
CSS, HTML / "schlechte Tags"
Struktur
HTML / "gute" Tags
Text
ASCii / normaler Text
Meta-Meta-Ebene
Beschreibung des Aussehens für Elemente der Meta-Ebene
Meta-Ebene
Beschreibung der Struktur der Inhaltsebene
Inhaltsebene
Beschreibung des Inhalts der Seite
#20
Cascading Style Sheets (CSS) - Priorisierung
Important User Style
Lokale Regeln mit !IMPORTANT
Style Attribute
Definition via <... style=""> an einem Tag
Internes Stylesheet
Sonderwünsche des Anwenders
Übersteuerung jeglicher Formatierungen
Kleine Ausnahmen
Beschreibung der Struktur der Inhaltsebene
Grosse Ausnahmen
Definition via <style> innerhalb der webseite Abweichende/zusätzliche Formatierung auf besonderen Seiten
Externes Stylesheet
Definition in Datei, Einbindung via <link>
Default User Style
Lokale Regeln ohne !IMPORTANT
Default Browser Style
Browserkonfiguration
Corporate Identity
Einheitliches Aussehen für alle Seiten einer Domäne
Vorschlag des Anwenders
Nur für Seiten ohne eigene Vorgaben
Historisches Aussehen
Große Schriftarten, Wenig Farbe
#21
Cascading Style Sheets (CSS) - Anwendung
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;
}
#22
Javascript
(hat nix mit Java zu tun!!!)
#23
JavaScript
Ziel und Einordnung von JavaScript
Obwohl 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.
#24
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.
#25
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">
<!-Scriptbefehle
// -->
</script>
HTML Kommentar, nötig damit in alten Browsern
ohne Script-Unterstützung der Programmcode
nicht als Text auf der Webseite erscheint.
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()">
Weitere Event-Handler sind in SelfHTML unter
Javascript/DOM..Sprachelement..EventHandler
aufgelistet und mit Beispiel erklärt.
#26
JavaScript
Die Interpretation von Webseiten bzw. des enthaltenen Javascript-Codes erfolgt von oben
nach unten (wie das folgende Beispiel zeigt).
<html>
<body>
Schritt 1
alert( "Schritt 1");
</script>
Schritt 2
</script>
Schritt 3
</script>
</body>
</html>
#27
JavaScript
Variablen in JavaScript sind untypisiert, d.h. arbeiten mit verschiedenen Arten von Werten
var value;
value = 1; // eine Zahl
value = "Eins"; // eine Buchstabenfolge
Ergebnis und Parameter von Funktionen in JavaScript sind ebenfalls nicht typisiert
function 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 4
value = "Eins" + "Zwei" + "Drei"; // ergibt "EinsZweiDrei"
Mit Hilfe der oben definierten Funktion läßt sich das übrigends auch so schreiben
value = addiere(2, 2); // Berechnung mit a=2, b=2
value = 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.
#28
Beispiele
Eine einfache HTML Datei mit einem echten Klassiker ;-)
<html>
<body>
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...
#29
Beispiele
Die folgende Datei betreibt, äh, „Kundenbindung“
<html>
<body>
Sie sehen gerade
document.writeln( document.location);
</script>
<a href="javascript:springe( 'http://www.spiegel.de')">Springen</a>
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!
#30
Beispiele
Die folgende Datei enthält eine Berechnung (Notepad + Browser = Taschenrechner!)
<html>
<body>
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...
#31
Beispiele
Die folgende Datei verknüpft einige Zeichen(ketten)
<html>
<body>
var a = "1"; // 1
var b = '2'; // 2
var 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 ;-) ?
#32
Beispiele
Die folgende Datei betreibt etwas Logik
<html>
<body>
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...
#33
JavaScript
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 Fahrzeug
Eine 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>); // eindeutig
var elements = document.getElementsByName( <Name>); // mehrdeutig
#34
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>
#35
Seiten als Baumstruktur (Beispiel)
html
body
head
title
h1
p
„Beispielseite“
„Titel“
„Bla Bla ...“
ul
li
li
li
„Punkt 1“
„Punkt 2“
„Punkt 3“
#36
Beispiele
In der folgenden Datei treibt man es ziemlich bunt ;-)
<html>
div#text {
background-color: blue;
}
</style>
<body>
<div id="text">
Das ist ein Beispieltext
</div>
<a href="javascript:rot()">rot</a>
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!
#37
Beispiele
In der folgenden Datei macht man große Sprünge...
<html>
div#text {
position: absolute;
bottom: 0px;
}
</style>
<body>
<div id="text">
Das ist ein Beispieltext
</div>
<a href="javascript:anheben()">anheben</a>
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...
#38
Beispiele
In der folgenden Datei gibt es eine grosse (auf)klappe
<html>
<body>
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>
</div>
</body>
</html>
Dynamische Menüs sind also gar nicht so schwierig...
Frage: Wie erreicht man, dass das Element bei erneutem Anklicken wieder zuklappt?
#39
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>
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>
#40
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>
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>
#41
Einschub: DocTypes
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.
#42
SVG
Scalable Vector Graphics
#43
Skalierbare Vektorgrafiken (SVG)
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.
#44
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.
X
Y
Nachfolgend noch ein Beispiel, Details in der Wikipedia unter "SVG" bzw. auf selfsvg.info
#45
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"/>
<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>
#46
Angezeigte Grafik (Maßstab 1:1 aus dem Firefox)
x-Achse
y-Achse
PS: Wenn Sie anderer Meinung sind, können Sie ja
die Beispieldatei entsprechend abändern...
#47
Eine (etwas schräge) Anwendung von SVG als Funktionsplotter
=D$2-RUNDEN(B5*D$1;0)
50
=RUNDEN(A5*C$1;0)+C$2
0
50 Multiplikator
300 Offset
=SIN(A5)
X
Y=F(X)
Xscaled
Yscaled
0
0,25
0,5
0,75
1
1,25
1,5
1,75
2
2,25
2,5
2,75
3
3,25
3,5
3,75
4
4,25
4,5
4,75
5
5,25
5,5
5,75
6
6,25
0
0,25
0,48
0,68
0,84
0,95
1
0,98
0,91
0,78
0,6
0,38
0,14
-0,11
-0,35
-0,57
-0,76
-0,89
-0,98
-1
-0,96
-0,86
-0,71
-0,51
-0,28
-0,03
0
13
25
38
50
63
75
88
100
113
125
138
150
163
175
188
200
213
225
238
250
263
275
288
300
313
300
288
276
266
258
253
250
251
255
261
270
281
293
305
318
329
338
345
349
350
348
343
335
325
314
302
="<line x1="""&C5&""" y1="""&D5&""" x2="""&C6&""" y2="""&D6&""" style=""stroke: black""/>"
SVG Kommando
#48
<?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
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
<line
x1="0" y1="300" x2="13" y2="288" style="stroke: black"/>
</svg>
#49
Ausblick
Wo das herkommt ist noch mehr
#50
Ausblick
Die 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äuft
sondern 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!)
#51

Vorlesung Informatik 1

Transcrição

Documentos relacionados

Vorlesung Informatik 1

JavaScript leicht gemacht

Sekundenzeiger Stiluhr

Skoda Fabia 1.2 TSI Ambition Green tec Ambition

Die helle Freude

Wie man gesperrte Stylespuren öffnet

exclusive eye on style

Besprechung der neuen Snowboards für Winter 2013/14

Idézzük fel újra az elfelejtett régi ízeket

the new black - Oktober Promotion

Limitiertes Sondermodell