HTML - FH Kiel

Themen der Veranstaltung
Einführung in das Internet:
• Entwicklung des Internets (LANs, WANs, Internetworking);
• Technische Grundlagen, Standards und Protokolle: IPv4
Internet Adressen, Domain Naming System (DNS);
• Neue Entwicklungen, The Next Generation (IPng): IPv6.
Netwerkdienste:
• Telnet, FTP (File Transfer Protocol);
• E-Mail (MIME: Multipurpose Mail Extension);
• Archie, Gopher, WWW (World Wide Web);
• Browser.
Suche im WWW (World Wide Web):
• Search Engines;
• Advanced Search, Gewichtung der Suchergebnisse.
Programmierung im WWW (World Wide Web):
• Multimedia und die Entwicklung des WWW;
• Hypertext.
Markup-Languages:
• SGML:
Standard Generalized Markup Language;
• HTML:
HyperText Markup Language, HTML 3.2,
HTML Enhancements;
• VRML:
Virtual Reality Modeling Language.
Interfaces:
• CGI:
Common Gateway Interface, CGI-Skripte;
Objektorientierte Sprachen/Programmierung (OOP):
• JAVA, JAVA-SCRIPT, APPLETS;
• Java Virtual Machine, Java Bytecode;
WWW-Grafik:
• Images: GIFs (GIF89a), Transparent and Animated Images,
PNG (Portable Network Graphics);
Datenbanken:
• DBMS (Database Management Systems) im Internet;
• SQL und der ODBC-Standard.
Datensicherheit im WWW:
• Firewalls;
• Data Encryption:
Prof. Dr. Helmut Dispert
IDEA, PGA (Pretty Good Privacy).
Mögliche Netzstrukturen
Masche
Ring
Prof. Dr. Helmut Dispert
Baum
Stern
Bus
Das OSI-Referenzmodell
1983:
ISO: International Standards Organisation
OSI: Open System Interconnection
Zielsetzung:
• Offenes Kommunikationssystem
• Schichtenmodell
7
6
5
4
3
2
1
Application Layer
Presentation Layer
Session Layer
Transport Layer
Network Layer
Data Link Layer
Physical Layer
Anwendungsschicht
Darstellungsschicht
Sitzungsschicht
Transportschicht
Netzschicht
Sicherungsschicht
Bitübertragungsschicht
Sublayers nach IEEE-802 Norm
2
2
1
Prof. Dr. Helmut Dispert
Logical Link Control
Sublayer
Medium Access Control
Sublayer
Physical Layer
LLC
MAC
Das OSI-Referenzmodell
Menschen
Menschen
Telefon
Telefon
Vermittlung
Vermittlung
Kabel
Kommunikationsebenen
Menschen
virtuelle Verbindung
Menschen
Telefon
virtuelle Verbindung
Telefon
Vermittlung
virtuelle Verbindung
Vermittlung
Kabel
Virtuelle Verbindungen
Grundaufgaben der Ebenen:
• Schnittstelle zur benachbarten Ebene,
• Protokollinformation.
Jede Schicht
• realisiert spezifische Aufgaben,
• stellt der darüberliegenden Schicht Dienste zur Verfügung,
• nutzt selbst die Dienste der darunterliegenden Schicht.
Prof. Dr. Helmut Dispert
Das OSI-Referenzmodell
Innerer Aufbau der Schichten
Endsystem 1
Endsystem 2
Ebene N+1
A
B
Instanz der
Ebene N
horizontales Protokoll
A
Instanz der
Ebene N
A
B
B
Ebene N
Ebene N-1
A
B
A: vertikales Protokoll
B: Meldungen und Parameter (primitives)
Prof. Dr. Helmut Dispert
Transportorientierte Schichten
Aufgabe:
Steuerung der transportorientierten Aspekte.
4
3
2
1
Transport Layer
Network Layer
Data Link Layer
Physical Layer
Transportschicht
Netzschicht
Sicherungsschicht
Bitübertragungsschicht
1. Physical Layer - Bitübertragungsschicht
Aufgaben:
• Übertragung digitaler (unstrukturierter) Information über das
physikalische Medium.
Ø Medien:
verdrillte Zweidrahtleitung
Koaxialkabel
Lichtwellenleiter (LWL, Glasfaserkabel)
Richtfunkstrecken / Satellitenfunkstrecken.
Ø Physikalische Parameter:
Signalspannungen, Übertragungsrate.
Ø Mechanische Parameter:
Steckverbindungen.
• Übertragung ohne Absicherung der Daten (kein Protokoll),
diese Aufgabe muß von der nachfolgenden Schicht übernommen
werden.
Beispiele:
• RS-232C (V 24)
• RS-422, 485
• Ethernet
Prof. Dr. Helmut Dispert
Transportorientierte Schichten
2. Data Link Layer - Sicherungsschicht
Aufgaben:
• Absicherung der Datenübertragung.
Ø Synchronisation,
Ø Flußkontrolle, Zugriffsteuerung,
Ø Fehlerbehandlung (Erkennung und Korrektur).
• Adressierung von Nertzwerkknoten.
Framing:
• Die aus der Schicht 1 empfangenen Daten werden zu
Datenrahmen zusammengefaßt (data frames).
• Den Basisdaten (Nutzdaten) wird zusätzliche Steuerinformation
hinzugefügt (Protokollinformation, header),
• Datenrahmen können eine fest vordefinierte Länge (8 bits, 1024
bits, etc.) oder aber in ihrer Länge variabel sein,
• bei variablen Rahmengrößen wird der frame mit einer Start- und
Endemarke versehen (start- and ending delimiter).
Schicht 2
Header
Schicht 3
Daten
Schicht 2
Trailer
Feste Framegröße
Frame
Start
Schicht 2
Header
Schicht 3
Daten
Variable Framegröße
Prof. Dr. Helmut Dispert
Schicht 2
Trailer
Frame
Ende
Transportorientierte Schichten
Fehlererkennung:
• Einsatz einfacher Algorithmen zur Generierung von Prüfsummen
(Paritätsprüfung, CRC),
• Sicherung der Nutzdaten und/oder der Protokollinformation.
Schicht 2
Header
Schicht 3
Daten
Schicht 2 Trailer
+ Prüfsumme
Frame mit Prüfsumme
Fehlererkorrektur:
• Einsatz einfacher Verfahren:
Ø ARQ (automatic repeat request):
Bei Auftreten eines Fehlers wird der Frame erneut vom Sender
angefordert.
• Übermittlung von Zusatzinformationen zur Fehlerkorrektur.
Empfangsbestätigung:
• Empfang eines Frames wird positiv bestätigt,
• negative Bestätigung oder timeout zur Sendewiederholung.
Flußkontrolle/Zugriffsteuerung:
• Zwischenspeicherung von Frames,
• Reihenfolge der Frames.
Adressierung:
• Netzwerknoten werden zur eindeutigen Identifizierung
physikalische Adressen zugewiesen
(MAC-Adressen, media access control):
Schicht 2 Header
Source
Destination
xxx
Schicht 3
Daten
Protokoll-Header der Sicherungsschicht
Prof. Dr. Helmut Dispert
Fehlererkennung und Fehlerkorrektur
Fehlererkennung:
• Paritätsfehler
• Längsbit:
Alle Zeichen werden gruppenweise behandelt. Ein Paritätsbit wird
nicht nur für jedes Zeichen ermittelt, sondern auch für alle
Zeichen an den gleichen Bitpositionen.
• Prüfsummenbildung (checksum*):
Alle Zeichen eines Blockes werden als Integerzahlen aufgefaßt
und aufsummiert; die Summe wird als Prüfsumme mitgesendet,
während der Überlauf vernachlassigt wird. Der Empfänger
wiederholt den Vorgang und vergelicht die ermittelten Werte
(vergl. Paritätsbit).
• Zyklische Redundanzprüfung (CRC, cyclic redundancy check):
CRC setzt keine Zeichenstruktur voraus, sondern kann auch bei
bitsynchroner Übertragung eingesetzt werden. Der Rahmen
(frame) wird als Dualzahl interpretiert, die durch eine Prüfzahl
(Prüfpolynom) dividiert wird. Der bei dieser Division entstehende
Divisionsrest wird zur Fehlererkennung herangezogen.
In der Praxis wird dem abzusichernden Bitstrom eine Prüfsumme
(checksum) hinzugefügt, so daß sich für den Divisionsrest der
Wert "Null" ergibt.
CRC-12
12-Bit-Prüfsumme
1 + z + z 2 + z 3 + z 11 + z 12
CRC-16
16-Bit-Prüfsumme
1 + z 2 + z15 + z16
CRC- CCITT 16-Bit-Prüfsumme
1 + z 5 + z12 + z16
Normierte Polynome für die synchrone Datenübertragung
* Der Begriff "checksum" wird auch bei
anderen Verfahren verwendet.
Prof. Dr. Helmut Dispert
Fehlererkennung und Fehlerkorrektur
Fehlerkorrektur:
• Vorwärtskorrektur:
Das Zeichen wird durch redundante Information ergänzt, so daß
ein Fehler nicht nur erkannt, sondern auch korrigiert werden
kann. Sind Mehrfachfehler möglich, muß diese Redundanz weiter
erhöht werden.
• Rückwärtskorrektur:
Die Rückwärtskorrektur erfordert eine bidirektional Verbindung
(half duplex oder full duplex).
Ø Aktive Rückwärtskorrektur:
Bei fehlerhaftem Empfang fordert der Empfänger eine erneute
Übermittlung des Rahmens an.
Ø Passive Rückwärtskorrektur:
Der Empfänger sendet bei fehlerfreiem Empfang eine Quittung
(Bestätigung) an den Sender. Wird nach einer vorgegebenen
Zeit dieses Quittungssignal nicht empfangen, liegt ein Fehler
vor (timeout). Die Information wird erneut übertragen.
Prof. Dr. Helmut Dispert
Transportorientierte Schichten
3. Network Layer - Vermittlungsschicht
Aufgaben:
• Austausch von Daten über mehrere Transitsysteme und Teilnetze,
Wegwahl (routing),
• verantwortlich für Vermittlung, Aufbau, Erhalt und Abbau von
Verbindungen durch ein Netzwerk.
Datagramm:
Die Daten aus der Schicht 4 werden ebenfalls mit Protokollinformation versehen. Das gesamte Datenpaket wird als Datagramm
bezeichnet:
Schicht 3
Header
Schicht 4
Daten
Datagramm (Datenpaket)
Hauptaufgabe der Vermittlungsschicht ist der Transport von
Datagrammen durch unterschiedliche Netzstrukturen und die
korrekte Zustellung an den Empfänger.
Netzzugangsprotokolle:
• verbindungsorientierte Protokolle (Phasen: Verbindungsaufbau,
Datenübertragung und Verbindungsabbau)
• verbindungslose Protokolle (Transfer einzelner Datenblöcke)
Prof. Dr. Helmut Dispert
Transportorientierte Schichten
Das Protokoll der Schicht 3 stellt Funktionen bereit, um über die
logische Netzwerk- und Knotenadresse die Physikalische MACAdresse zu bestimmen:
Netz 1
Netz 2
Netz 3
Vermittler (router)
Schicht 3 Header
Source
Netz
Destination
Knoten
Netz
Knoten
xxx
Header der Vermittlungsschicht
Beispiel:
• X.25
(CCITT-Standard)
Transportorientierte Schichten
Prof. Dr. Helmut Dispert
Schicht 4
Daten
4. Transport Layer - Transportschicht
Aufgaben:
• Logisches Multiplexing (logische Verbindung),
• Segmentierung der Datagramme,
• Bereitstellen eines verbindungsorientierten Dienstes
(ständige Verbindung aus Benutzersicht),
• Einhaltung der Sequenzreihenfolge (Fragmentierung,
Defragmentierung),
• Unterstützung paralleler Prozesse.
Schicht 4
Header
Schicht 5
Daten
Datenpaket (Segment)
Schicht 4 Header
VerbindungsNr.
Sequenz-Nr.
xxx
Header der Transportschicht
Prof. Dr. Helmut Dispert
Schicht 5
Daten
Anwendungsorientierte Schichten
5. Session Layer - Sitzungsschicht
(Kommunikationsschicht)
Aufgaben:
•
•
•
•
•
•
•
•
•
Aufbau des Kommunikationskontaktes,
Verbindungsaufbau,
Verbindugsabbau,
Wiederherstellung einer Verbindung (recovery),
Dialogsteuerung (simplex, half duplex, full duplex),
Paßwortabfrage,
Festlegung der Prioritäten von Sitzungen, die Ressourcen teilen,
Synchronisation,
Schutz der Sitzung gegen Unbefugte.
Definitionen:
• Protokolle:
Kommunikationssteuerungsprotokolle
• Transaktionen:
Folge logisch zusammengehörender Aktionen,
• Synchronisation: Sichert Ausführung oder Abbruch von
Transaktionen
Prof. Dr. Helmut Dispert
Anwendungsorientierte Schichten
6. Presentation Layer - Darstellungsschicht
Aufgaben:
• Festlegung von Datenstrukturen,
• Formatumwandlung (ASCII-EBCDIC), herstellerabhängige
Formate,
• Datenumwandlung in maschineninterne Formate,
• Datenkompression,
• Datenverschlüsselung,
7. Application Layer - Anwendungsschicht
Aufgaben:
• Benutzerschnittstelle (Anwendung-Benutzer, Menüsystem,
Kommandozeile),
• Schnittstellen für den Anwendungsentwickler (API, application
programming interface),
• Filetransfer (FTP),
• Email-Übermittlung (SMTP),
• Terminal Emulation (Telnet), virtuelles Terminal,
• Remote Job Entry (RJE),
• Remote Procedure Call (RPC),
• verteilte Grafikanwendungen (X Window-System)
• WWW-Browser.
Prof. Dr. Helmut Dispert
Das OSI-Referenzmodell
Schichtabhängige Bezeichnungen für die Datenpakete:
Schicht (Layer)
Bezeichnung
Anwendungsorientierte Schichten
Message
Transportschicht
Segment
Netzwerkschicht
Datagramm
Sicherungsschicht
Frame
Bitübertragungsschicht
(Bits)
Prof. Dr. Helmut Dispert
Kapselung
Application
Layer
AH
Data
Presentation
Layer
PH AH
Data
SH PH AH
Data
TH SH PH AH
Data
Network Layer
NH TH SH PH AH
Data
Data Link Layer
DH NH TH SH PH AH
Data
Session Layer
Transport Layer
Physical Layer
Prof. Dr. Helmut Dispert
Bits
DT
Das OSI-Referenzmodell
7
6
5
4
3
2
1
Application Layer
Presentation Layer
Session Layer
Transport Layer
Network Layer
Data Link Layer
Physical Layer
Anwendungsschicht
Darstellungsschicht
Sitzungsschicht
Transportschicht
Netzschicht
Sicherungsschicht
Bitübertragungsschicht
Sublayers nach IEEE-802 Norm
2
2
1
Prof. Dr. Helmut Dispert
Logical Link Control
Sublayer
Medium Access Control
Sublayer
Physical Layer
LLC
MAC
Repeater im OSI-Modell
7
6
5
4
3
2
1
1
7
6
5
4
3
2
1
Brücke im OSI-Modell
7
6
5
4
3
2
1
Prof. Dr. Helmut Dispert
2
1
7
6
5
4
3
2
1
Router im OSI-Modell
7
6
5
4
3
2
1
3
2
1
7
6
5
4
3
2
1
Gateway im OSI-Modell
7
6
5
4
3
2
1
Prof. Dr. Helmut Dispert
7
6
5
4
3
2
1
7
6
5
4
3
2
1
Adressfilter
Adresse
00005A001013
00005A001056
00005A067023
00001B001056
00005A056923
02608C600564
02608C558935
008048908756
008048555673
0000C0125468
Prof. Dr. Helmut Dispert
Netz
0
0
0
0
0
1
1
1
1
1
OSI-Modell vs. TCP/IP-Schichtenmodell
Anwendungsschicht
Präsentationsschicht
Sitzungsschicht
Transportschicht
Netzschicht
Datenübertragungsschicht
Physikalische Schicht
Applikationsschicht
Applikationsschicht
Transportschicht
Internetschicht
Netzwerkzugriffsschicht
ftp
Transportschicht
telnet
TCP
Internetschicht
rlogin
UDP
IP
Netzwerkzugriffsschicht IEEE 802.3 IEEE 802.5
Ethernet
Token
Ring
X25
SLIP
PPP
SLIP, PPP: Protokolle für serielle Modem-Verbindungen
Prof. Dr. Helmut Dispert
TCP/IP-Übersicht
7
6
5
Anwenderprozeß
Anwenderprozeß
4
TCP
UDP
3
ICMP
2
1
Prof. Dr. Helmut Dispert
IP
Netzkarte
Treiber
ARP
RARP
IP-Adressen
IPv4
Class A:
0 Netzadresse (7)
Class B:
1 0
Class C:
1 1 0
Class D:
1 1 1 0
Reserved:
1 1 1 1
Rechneradresse (24)
Netzadresse (14)
Rechneradresse (16)
Netzadresse (21)
Multicast-Adresse (28)
Netzwerkadresse:
Rechneradresse:
1
Class A/B/C:
netid
hostid
(host identifier)
8/16/24
32
Internetwide netid part
hostid
Internet routing part
Local part
1
Class B:
Rechneradresse (8)
1 0
Prof. Dr. Helmut Dispert
16
netid
32
subnetid
hostid
Adressraum
IPv4
Informationsbreite:
32 bit
IP-Adressen:
232 = 4.294.967.296
"dotted quad" Repräsentation.
z.B.:
149.222.5.11
Netzwerkanteil: 1, 2 oder 3 Bytes
z.B.:
149.222
Hostanteil:
5.11
Prof. Dr. Helmut Dispert
IP-Datagramm
IPv4
Header
Daten
64 kByte
IP-Header
IPv4
4 Byte
Ver
IHL
Dienstart
Gesamtlänge
Kennung
Lebensdauer
NF MF
Protokoll
Prüfsumme des Kopfes
Quelladresse
Zieladresse
Optionen (variabel)
Daten
Prof. Dr. Helmut Dispert
Fragment-Offset
RFC -Request for Comment
RFC Autor
Titel
Jahr
768 Postel, J.
User Datagram Protocol (UDP)
1980
791 Postel, J.
Internet Protocol (IP)
1981
792 Postel, J.
Internet Control Message Protocol (ICMP)
1981
793 Postel, J.
Transmission Control Protocol (TCP)
1981
821 Postel, J.
Simple Mail Transfer Protocol (SMTP)
1982
826 Plummer, D. C.
Ethernet Address Resolution Protocol (ARP)
1982
827 Rosen, E.C.
BBN Exterior Gateway Protocol (EGP)
1982
854 Postel, J., J.K.
Reynolds
Telnet Protocol Specification (TELNET)
1983
903 Finlayson, et al.
A Reverse Address Resolution Protocol (RARP) 1984
959 Postel, J., J.K.
Reynolds
File Transfer Protocol (FTP)
1985
1055 Romkey, J.
Nonstandard for Transmission of IP Datagrams
over Serial Lines: SLIP
1988
1661 Simpson, W.
The Point-to-Point-Protocol (PPP)
1994
Prof. Dr. Helmut Dispert
Zuordnung der IP-Adresse zur MAC-Adresse
IP-Adresse
149.222.51.10
149.222.51.11
149.222.51.12
149.222.51.13
149.222.51.14
149.222.51.15
149.222.51.16
149.222.51.17
149.222.51.18
149.222.51.19
Prof. Dr. Helmut Dispert
(Physikalische)
MAC-Adresse
080009001013
080009001044
00005A001065
00005A001013
AA001108C077
AA0011001013
080009001022
080009002345
006055033442
00000A001712
Adressierung im Netzwerk
7
6
ISO/OSI-Schicht
Application Layer
Presentation Layer
5
4
Session Layer
Transport Layer
3
Network Layer
2
Data Link Layer
1
Physical Layer
Prof. Dr. Helmut Dispert
Funktion
Netzwerkprogramm
Dateninterpretation
Verbindungssteuerung
Datentransfer
von Station zu Station
Festlegung des
Datentransportweges
Datenvorbereitung und
Fehlerkorrektur
Physikalische Verbindung
Adresse
Hostname
Hostname,
Knotenname
Socketadresse
Portadresse
Internet-Adresse
Link-Level-Adresse
kein Adressierschema
Adressbezeichnungen
•
Link-Level-Adresse:
Adresse der LAN-Schnittstellenkarte.
Auch bezeichnet als:
Ethernet-Adresse, LAN-Adresse,
IEEE-802.3-Adresse, Hardware-Adresse oder
Stationsadresse.
•
Internet-Adresse:
Netzwerkadresse eines Knotens.
Auch bezeichnet als:
IP-Adresse.
•
Portadresse:
Adresse innerhalb eines Hosts, wird einem
bestimmnten Dienstprogramm zugeordnet.
Auch bezeichnet als:
TCP-Anschlußnummer, UDP-Anschlußnummer, Port.
•
Socketadresse:
Adresse in Prozessen, die durch InterprozeßKommunikationsprogramme bestimmt werden
(Verbindung von IP-Adresse und Portadresse).
•
Hostname:
Symbolischer Name, einer IP-Adresse zugeordnet.
Auch bezeichnet als:
ARPA-Hostname, NFS-Hostname.
•
Knotenname:
Symbolischer Name zur Definition eines Knotens.
Syntax: Knoten.Domäne.Organisation
Nicht zu verwechseln mit: FQDN (ARPA-Domänenname)
Prof. Dr. Helmut Dispert
Leitwegbestimmung (Routing)
Netz 03
R
R
Netz 01
Netz 04
S
E
Netz 02
Prof. Dr. Helmut Dispert
IP-Adressen
IPv6
1992:
IETF (Internet Engineering Task Force)
Informationsbreite:
IP-Adressen:
128 bit
2128 ≈
3,4*1038
340.282.366.920.938.463.463.374.607.431.768.211.456
Hexadezimale Schreibweise:
8 Worte
z.B.:
1080:BA98:7654:3210:FEDC:0800:200C:417A
↓
Pro Quadratmeter Erdoberfläche:
≈ 6,6*1023 Adressen
Mit Hierarchie:
1.564 ≤ n ≤ 3,9*1018
IPv6-Adressraum = IPv4-Adressraum * 7,9*1028
Prof. Dr. Helmut Dispert
Fragmentation and Reassembly
NSDU: Network service data unit
64k (65.536 octets, bytes)
Maximum packet size:
min:
max:
128 bytes
≥ 8000 bytes
Lösung:
Fragmentierung
Fragmentieren der IP-Datagramme
TCP/IP
Zusammensetzen der IP-Datagramme
Prof. Dr. Helmut Dispert
Domänenhierarchie und FQDN
Root-Domäne
com edu gov net
fh-flensburg
de
fh-kiel
uk
es
fh-luebeck
www
Fully Qualified Domain Name
FQDN
www.fh-kiel.de
Prof. Dr. Helmut Dispert
pt fr
TELNET
Client/Server Interaction
Terminal User
Client Host
User
AP
Server Host
Interactive
Program/Process
Operating System
Operating System
Client
TELNET
Server
TELNET
TCP/IP
TCP/IP
Nachrichten im NVT-Format
Standard format for TELNET protocol communication:
NVT:
Server TELNET:
TELNET protocols:
Prof. Dr. Helmut Dispert
Network Virtual Terminal
pseudo terminal
≡ Präsentationsschicht im OSI
FTP (file transfer protocol)
Client/Server Interaction
Terminal Users
Terminal User
Server
User
AP
File
Server
Operating System
Operating System
Operating System
Client
FTP
Client
FTP
Server
FTP
TCP/IP
TCP/IP
TCP/IP
Nachrichten im NVT-Format
Standard format for FTP protocol communication:
NVT:
Network Virtual Terminal
File Structure:
unstructured, structured,
random access.
8-bit binary, ASCII, EBCDIC,
variable length binary.
Data Types:
Prof. Dr. Helmut Dispert
SMTP (simple mail transfer protocol)
Terminal Users
Terminal Users
Terminal Users
Operating System
Operating System
Operating System
Local Mail System
Local Mail System
Local Mail System
Client
SMTP
Server
SMTP
TCP/IP
Client
SMTP
Server
SMTP
TCP/IP
Internetwork
Prof. Dr. Helmut Dispert
Client
SMTP
Server
SMTP
TCP/IP
Informationsprozess
Informationsproduzent
Informationsübermittlung
Informationsproduzent
Informationsvermittler
Informationskonsument
Informationskanal
Informationsproduzent
Prof. Dr. Helmut Dispert
Client-Server Modell
Information Exchange
Client
Server
Client
Information
Anforderung
(request)
Client
Prof. Dr. Helmut Dispert
Server
Hypermedia
Hypermedia
Hypermedia
Client
Client
internet
communication
information
server
Client
Hypermedia
Prof. Dr. Helmut Dispert
Client
Hypermedia
Klassische Informationsdatenbank
Lokale Datenbank
Konsument
Produzent
Info
Produzent
Produzent
Info
Info
Info
Konsument
Info
Info
Info
Info
Info
Konsument
Datenbank
World Wide Web
Global verteilte Datenbank
Produzent
Info
Info
Konsument
Info
Info
Konsument
Info
Produzent
Info
Produzent
Info
Info
Info
Konsument
Prof. Dr. Helmut Dispert
Vannevar Bush
(1890-1974)
July 1945:
The Atlantic Monthly
As We May Think
Prof. Dr. Helmut Dispert
Tim Berners-Lee
Prof. Dr. Helmut Dispert
Hyper
•
Hypertext
•
Hypermedia
•
Hyperbook
•
Hyperformance
Prof. Dr. Helmut Dispert
"Internet Besitzverhältnisse"
Internet Society
Federal Networking
Council
Board of Trustees
International Architecture
Internet Assigned Numbers
Board (IAB)
Authority (IANA)
World Wide Web
Internet Engineering
Internet Research
Asian Pacific
Reseau IP
Consortium
Task Force (ITEF)
Task Force (IRTF)
NIC (APNIC)
Européen (RIPE)
(Kooperation)
DeNIC
Prof. Dr. Helmut Dispert
InterNIC
Internet
Ad Hoc Comm.
Internet-Anbindung
FTP-Server
telnet
ftp
Internet
Internet-Benutzer
Prof. Dr. Helmut Dispert
Internet-Wähl-Anbindung
FTP-Server
telnet
ftp
Internet
ISP
Internet-Benutzer
Prof. Dr. Helmut Dispert
Internet Service Provider
Internet-Organisationen
Internet Society (ISOC)
Die Dachorganisation des Internet. Die Mitglieder treffen sich einmal
jährlich zur Jahreskonferenz. Zahlreiche Gremien arbeiten der ISOC
zu. Zur Klärung technischer Fragen richtet sie verschiedene Task
Forces ein.
Board of Trustees
Wichtigstes Entscheidungsgremium der Internet Society, bestehend
aus 15 Mitgliedern: USA (9), Europa (3), Mexiko (1), Japan (2).
Internet Architecture Board (IAB)
Die oberste "Expertenrunde" des Internet. Hier fallen die
Entscheidungen über wichtige Internet-Standards, die in den Task
Forces vorbereitet werden.
Internet Engineering Task Force (ITEF)
Die ITEF entwickelt Internet-Standards. Besteht aus diversen
Arbeitsgruppen zu Anwendungen, Management, Routing.
Internet Research Task Force (IRTF)
Zuständig für die zukünftige technologische Entwicklung des
Internet (Internet-Standards).
World-Wide Web Consortium
Zuständig für Standards und Weiterentwicklung im World-Wide Web.
Vorsitzender ist Tim Berbers-Lee.
Federal Networking Council (FNC)
Zuständig für die Vergabe von Domains für
Regierungsorganisationen, Erziehung oder Militär (InternetAdressen mit der Endung "gov", "mil" und "edu").
Prof. Dr. Helmut Dispert
Internet-Organisationen (cont.)
Internet Assigned Numbers Authority (IANA)
Die oberste für die Namensvergabe im Internet zuständige
Organisation. Sie wird beauftragt von der ISOC und dem FNC. Die
IANA weist ihren Unterorganisationen Namensräume zu (z.B. "de"),
die diese eigenverantwortlich verwalten.
Asian Pacific Network Information Center (APNIC)
Verantwortlich für die Vergabe von Internet-Adressen (DomainNames) im asiatischen Raum.
Reseau IP (Européen (RIPE)
Verantwortlich für Internet-Adressen in Europa und den
angrenzenden Regionen (unter anderem Internet-Adressen mit der
Endung "de", "at" oder "fr").
InterNIC
Verantwortlich für die nicht ländergebundenen Domains wie "com",
"net", "org".
Denic
Nationale Organisation in Deutschland. Zuständig für die Vergabe
der deutschen "de"-Domains. Wird beauftragt von RIPE.
Internet Ad Hoc Committee
Erarbeitet derzeit Reformvorschläge zur Neuordnung der
internationalen Top-Level Domains.
Prof. Dr. Helmut Dispert
Hardwareebenen des Internets
Firmennetz
Campus
Ethernet
Router
Router
Router
Prof. Dr. Helmut Dispert
Router
Router
URL - Uniform Resource Locator
Bezeichnung
mailto:
telnet://
ftp://
news://
gopher://
wais://
http://
file://
Dienstart
E-Mail Adressen
Telnet-Dienste
FTP-Dienste
UsenetNews
Gopher-Dienst
WAIS-Datenbanken
WWW-Seiten
Lokale Datei
Top-Level Domänen
Domäne
Verwendung
com
Kommerzielle Organisationen (z.B. Firmen)
edu
Ausbildungseinrichtungen (Universitäten, etc.)
gov
Staatliche Einrichtungen (nicht-militärisch)
mil
Militärische Einrichtungen
org
Andere Organisationen
net
Netzwerk-Ressourcen
de
Deutschland
fr
Frankreich
us
U.S.A.
Prof. Dr. Helmut Dispert
E-Mail (Electronic Mail)
Struktur der E-Mail Adresse:
User_ID@domain_name
@
"at"-Zeichen
(Klammeraffe)
Beispiele:
[email protected]
[email protected]
Nicht am Internet:
z.B.: CompuServe:
[email protected]
Prof. Dr. Helmut Dispert
Aufbau einer E-Mail
Header
Header
Body
Body
Anhang
Header-Information:
Bezeichnung
Information
Received:
Weg der E-Mail
Date:
Datum
From:
Kennzeichen des Absenders
Message-ID:
Identifikation der E-Mail
To:
Empfängeradresse
Reply-To:
Antwortadresse
Subject:
Betreff der E-Mail
CC:
Weitere Empfänger (Carbon Copy)
Prof. Dr. Helmut Dispert
Übertragung von Binärdaten
uuencode:
uudecode:
Kodierung der Binärdaten
Dekodierung der Binärdaten
MIME:
Multi-purpose Internet Mail Extensions
Prof. Dr. Helmut Dispert
Telnet (Terminalemulation)
Aufruf:
telnet remote_rechner
tn3270 remote_IBM
(Großrechner)
Befehlsliste:
Befehl
Beschreibung
close
close current connection
display
display operating parameters
mode
try to enter line-by-line or character-at-a-time mode
open
connect to a site
quit
exit telnet
send
transmit special character ('send ?' for more)
set
set operating parameters ('set ?' for more)
status
print status information
toggle
toggle operating parameters ('toggle ?' for more)
z
suspend telnet
?
print help information
Prof. Dr. Helmut Dispert
FTP (File Transfer Protocol)
Anonymous FTP (anonymes Einloggen)
Aufruf:
ftp remote_rechner
Befehlsliste:
Befehl
Beschreibung
account
Zusätzliche Zugangsinformationen
ascii
Wechsel in ASCII-Modus (Textübertragung)
binary
Wechsel in Binärmodus (Binärdaten-Übertragung)
cd verzeichnis
Wechsel des Arbeitsverzeichnisses (remote)
close
FTP-Sitzung beenden
delete dateiname
Datei löschen (auf entfernten Rechner)
dir datei ziel
Verzeichnisauflistung (auf entfernten Rechner)
get dateiname
Datei von entferntem Rechner holen
hash
Druck von "#" pro Datenblock
help befehl
Hilfe zum Befehl
lcd verzeichnis
Wechsel des Arbeitsverzeichnisses (local)
ls datei ziel
kurze Verzeichnisauflistung (auf entfernten
Rechner)
mget dateiliste
Dateiliste von entferntem Rechner holen
mput dateiliste
Dateiliste auf entferntem Rechner ablegen
open rechnername Mit entferntem Rechner verbinden
put dateiname
Datei auf entferntem Rechner ablegen
prompt
Nachfragen bei Listenübertragung (mget, mput)
pwd
Name des aktuellen Verzeichnisses (remote)
quit
exit FTP
user name
Sende Benutzernamen an entferneten Rechner
(Einloggen)
Themen der Veranstaltung
Prof. Dr. Helmut Dispert
Übersicht über die wichtigsten UNIX-Befehle
Befehl
cat
more
pr
head
tail
lp
ls
cp
cd
mv
rm
mkdir
rmdir
passwd
pwd
ftp
get
put
bye
rlogin
rcp
cc
man
Funktion/Beispiel
Inhalt einer Datei anzeigen (entspricht etwa dem MS-DOS "type").
Beispiel:
cat test1.html
cat test2.html|more (seitenweise Ausgabe)
Inhalt einer Datei seitenweise anzeigen (s.o.).
Inhalt einer Datei formatiert anzeigen.
Ausgabe der ersten 10 Zeilen einer Datei.
Ausgabe der letzten 10 Zeilen einer Datei.
Datei drucken.
Beispiel:
lp test1.html
Inhalt eines Verzeichnisses anzeigen (entspricht etwa dem MS-DOS "dir").
Beispiel:
ls
(Anzeige der sichtbaren Dateien im akutellen
Verzeichnis)
ls -a
user
(Anzeige aller Dateien, auch .-Dateien)
ls -l
(Anzeige sichtbarer Dateien mit Dateigröße)
Dateien kopieren.
Beispiel:
cp datei1.html datei2.html
Verzeichnis wechseln.
Beispiel:
cd user2
(Wechsel in das Unterverzeichnis user2)
cd ..
(Wechsel in das übergeordnete Verzeichnis)
cd /
(Wechsel in das Wurzelverzeichnis)
Dateinamen umbenennen (move).
Beispiel:
mv datei1.html datei2.html
Datei löschen.
Verzeichnis erstellen.
Verzeichnis löschen.
Password ändern.
Aktuelles Verzeichis anzeigen.
File Transfer Protokoll aufrufen.
Beispiel:
ftp hostname
ftp-Befehl! Datei von host kopieren (empfangen).
Beispiel:
get datei1.html (datei1.html von host auf den
lokalen Rechner kopieren)
ftp-Befehl! Datei nach host kopieren (senden).
Beispiel:
put datei1.html (datei1.html von host auf den
lokalen Rechner kopieren)
ftp-Befehl!
ftp verlassen (exit).
Auf Hostrechner einloggen (remote login).
Beispiel:
rlogin hostname
Datei nach oder von Hostrechner kopieren (senden).
Beispiel:
rcp datei1.html hostname:datei2.html
rcp hostname:datei1.html datei2.html
C-Compiler aufrufen
(nach host)
(von host)
Befehlsbeschreibung ausgeben (Manual, Handbuch).
Beispiel:
man ftp
(ftp-Befehlsbeschreibung ausgeben)
Prof. Dr. Helmut Dispert
Übersicht über die wichtigsten HTML-Tags
Tag
<XX>
abhängige
Tags
Bedeutung
Attribute
Tag
</XX>?
<HTML>
leitet HTML-Dokument ein
Ja
<TITLE>
definiert Dokumenten-Titel
Ja
<HEAD>
definiert Dokumenten-Kopf
Ja
<BODY>
leitet Dokumenten-Rumpf ein
Ja
<H1>-<H6>
Überschrift unterschiedlicher Größe
Ja
<STRONG>
Fettschrift, logisches Tag
Ja
<EM>
Kursivschrift, logisches Tag
Ja
<B>
Fettschrift, physikalisches Tag
Ja
<I>
Kursivschrift, logisches Tag
Ja
<P>
beginnt einen neuen Absatz
Ja
<BR>
beginnt eine neue Zeile
<FONT>
ändert die Fontgröße
<CENTER>
zentriert die Ausgabe
Ja
<UL>
ungeordnete (nicht numerierte) Liste
Ja
beginnt neues Listenelement
Ja
geordnete (numerierte) Liste
Ja
beginnt neues Listenelement
Ja
Definitionsliste
Ja
<DT>
zu definierender Begriff
Ja
<DD>
Definition des Begriffes
Ja
<PRE>
vorformatierter Text
Ja
<TABLE>
beginnt eine Tabelle
<LI>
<OL>
<LI>
<DL>
Nein
COLOR, FACE, SIZE
BORDER, CELLSPACING, WIDTH,
CELLPADDING
Ja
Ja
<CAPTION>
Tabellenüberschrift
Ja
<TR>
Zeilenanfang
Ja
<TH>
Tabellenkopfeintrag (Header)
COLSPAN, ROWSPAN, ALIGN,
VALIGN
Ja
<TD>
Tabelleneintrag
COLSPAN, ROWSPAN, ALIGN,
VALIGN
Ja
<IMG>
Grafikeinbindung
SRC, ALT, ALIGN, WIDTH, HEIGHT,
HSPACE, VSPACE, USEMAP
Nein
<APPLET>
APPLET-Einbindung
CODE, CODEBASE, NAME, ALT,
ALIGN, WIDTH, HEIGHT, HSPACE,
VSPACE,
Ja
<EMDED>
Einbindung eines Objektes
SRC, NAME, WIDTH, HEIGHT,
Ja
Parameterübergabe an ein Applet
NNAME, VALUE
Ja
<A>
definieren eines Links bzw. eines
Ankers
NAME, HREF
Ja
<MAP>
defineren einer Koordinatentabelle für
Inline-Grafiken
<PARAM>
<AREA>
<HR>
Prof. Dr. Helmut Dispert
Ja
definiert ein Koordinatenpaar für MAP
SHAPE, COORDS, HREF
Nein
horizontale Linie
ALIGN, NOSHADE, SIZE, WIDTH
Nein
Suchmaschinen in HTML-Dokumenten
Beispiel: "MetaCrawler"
<HTML>
<HEAD>
<TITLE> MetaCrawler</TITLE>
</HEAD>
<BODY>
<FORM ACTION="http://www.MetaCrawler.com/crawler"
METHOD=GET><BR>
<FONT SIZE=+3>
<A HREF="HTTP://WWW.METACRAWLER.COM/">METACRAWLER</A>
<BR><BR>
</FONT>
<TABLE>
<TR><TD>Suche<TD><INPUT TYPE="text"
NAME="general" VALUE=""><BR>
<TR><TD><INPUT TYPE="RADIO"
NAME="method" VALUE="1"><TD>any<BR>
<TR><TD><INPUT TYPE="RADIO"
NAME="method" VALUE="0" checked><TD>all<BR>
<TR><TD><INPUT TYPE="RADIO"
NAME="method" VALUE="2"><TD>as a phrase<BR>
<INPUT TYPE="HIDDEN" NAME="go2net" VALUE="1">
<TR><TD><TD><INPUT TYPE="SUBMIT"
NAME="type" VALUE="Suche">
</TABLE>
</FORM>
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Suchmaschinen
Alta Vista:
http://altavista.digital.com
Lycos:
http://www.lycos.com
HotBot:
http://www.hotbot.com
Excite:
http://www.excite.com
Infoseek:
http://www.infoseek.com
YAHOO:
http://www.yahoo.com
MetaCrawler:
http://www.MetaCrawler.com
Prof. Dr. Helmut Dispert
Suchfunktionen
Simple Query / Advanced Query
Simple Query (einfache Suchfunktionen):
Wort1 Wort 2
Wörter),
Ausdruck (Reihe aufeinander folgender
"Wort1 Wort 2"
Verbundbildung:,
+
Wort muß im Dokument vorhanden sein,
-
Wort darf nicht im Dokument vorhanden sein,
kein Vorsatz:
Wort kann im Dokument vorhanden sein,
*
Platzhalter.
Beispiele:
World Wide Web
"World Wide Web"
+internet "World Wide Web"
-internet "World Wide Web"
Advanced Query (komplexe Suchfunktionen):
AND, OR, NOT
Boolesche Operatoren,
NEAR
Operator.
Kurzform:
AND
→
&
OR
→
|
NOT
→
!
NEAR
→
~
Prof. Dr. Helmut Dispert
Suchfunktionen
Advanced Query
Beispiele:
mann AND frau
mann AND NOT frau
mann OR pape AND kind
mann OR (pape AND kind)
(mann OR pape) AND kind
NOT mann AND frau
(NOT mann) AND frau
NOT (mann AND frau)
mann NEAR frau AND kind
(mann NEAR frau) AND kind
(mann NEAR frau) AND (mann NEAR kind)
NOT mann NEAR frau
NOT (mann NEAR frau)
frau AND NOT (mann NEAR frau)
mann NEAR frau OR kind
(mann NEAR frau) OR kind
mann NEAR (frau OR kind)
(mann NEAR frau) OR (mann NEAR kind)
Prof. Dr. Helmut Dispert
Suchmaschinen
META-Tag
<META NAME="description"
content="Kiel liegt in Schleswig-Holstein">
<META NAME="keywords"
content="Kiel, Fachhochschule,
Elektrotechnik">
Prof. Dr. Helmut Dispert
Zugriff auf das World Wide Web
http-Anfrage
Web-Client
(PC-Benutzer)
Web-Server
Verbindungsaufbau
WWW Multimedia-Daten
Web-Client
Web-Server
Protokoll des World Wide Web
HTTP: HyperText Transport Protocol
Prof. Dr. Helmut Dispert
Sprache des World Wide Web
HTML
HTML: HyperText Markup Language
Character Set:
Version:
ISO-8859-1
HTML 3.2 (Wilbur)
Markup Tags:
•
•
Opening Tag: <X>
Closing Tag: </X>
Dokumentformat:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Ueberschrift</TITLE>
</HEAD>
<BODY>
Welcome to HTML!<BR>
Willkommen im World Wide Web!
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Links between Web documents
Anker
Dokument 2
Dokument 1
Dokument n
URL:
Universal Resource Locator
protocol://machine.name[:port]/directory/document.name
protocol:
machine.name:
port:
directory:
document.name:
http, ftp, gopher, telnet
hostname (z.B. www.fh-kiel.de)
Anschluß (optional):
non-standard TCP/IP port number,
Standard: 80.
Pfadname
Dateiname (optional)
Links im HTML-Dokument:
<A HREF="URL">Verbindungstext</A>
HyperText-Referenz wird vom Browser markiert:
Farbe, Unterstreichung
Prof. Dr. Helmut Dispert
Client-Server Modell
Information Exchange
Client
Server
Client
Information
Anforderung
(request)
Client
Prof. Dr. Helmut Dispert
Server
Hypermedia
Hypermedia
Client
Client
internet communication
information
server
Client
Prof. Dr. Helmut Dispert
Client
Hypertext
Begriffsdefinitionen
URL:
•
•
•
Uniform Resource Locator
Zugriffsmethode
Rechnernamen
Verzeichnis-Pfad
Struktur:
Zugriffsmethode://Rechnername[:Port]/Pfad/Datei
Beispiel: http://www.fh-kiel.de
http: HyperText Transfer Protocol
HTML: HyperText Markup Language
Prof. Dr. Helmut Dispert
Multimedia-Datenformate
MIME-Typ
UNIX-Endung
DOS-Endung
application/postscript
sound/au
sound/wave
sound/midi
image/gif
image/jpeg
image/tiff
text/html
video/mpeg
video/avi
.ps .eps .ai
.au .snd
.wav
.midi
.gif
.jpeg
.tiff
.html
.mpeg
.avi
.ps .eps .ai
.au .snd
.wav
.mid
.gif
.jpg .jpe
.tif
.htm
.mpg .mpe
.avi
Prof. Dr. Helmut Dispert
Frames
Dokument 2
Dokument 1
Dokument 4
Dokument 3
Prof. Dr. Helmut Dispert
World Wide Web
Seitenstruktur / Menustruktur
M
D
D
M
D
D
M
D
M
Zu flache Struktur
M
M
M
M
M
M
D
M
M
D
M
M
D
Zu tiefe Struktur
Prof. Dr. Helmut Dispert
M
D
D
M
World Wide Web
Seitenstruktur / Menustruktur
M
M
M
M
M
M
D
M
M
M
D
M
M
D
M
M
M
M
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
Ausgeglichene Struktur
Prof. Dr. Helmut Dispert
networks
#
#
#
#
#
#
#
#
#
#
#
#
#
@(#)$Header: networks,v 1.7.109.1 91/11/21 12:02:10 kcs Exp $
This file contains information regarding the known networks.
The form for each entry is:
<official network name>
<network number>
<aliases>
For example:
arpanet 10
arpa
See the networks(4) manual page for more information
Note: The entries cannot be preceded by a blank space.
loopback
127
#
# Internet networks
#
arpanet
10
arpa
resolv.conf
domain
nameserver
nameserver
nameserver
E-Technik.FH-Kiel.de
149.222.51.68
# ws_4
149.222.2.100
#m3hub
149.222.50.5
#fbtv1
Prof. Dr. Helmut Dispert
Struktur einer HTML-Seite
(ohne Frames)
<HTML>
<HEAD>
<TITLE> Ueberschrift </TITLE>
</HEAD>
<BODY>
..
.
(Dateirumpf)
</BODY>
</HTML>
Header-Information:
<TITLE>
...
</TITLE>
<BASE
HREF
=
>
Adressenbasis
<BASE
TARGET =
>
Zielfensterbasis
<ISINDEX>
Durchsuchbarkeit
<ISINDEX
PROMPT = >
Durchsuchbarkeit
<META
NAME =
CONTENT =
>
Meta-Information
<META
HTTP-EQUIV =
CONTENT =
>
Meta-Information
<LINK
REL =
HREF =
>
Standardverweise
<LINK
REV =
HREF =
>
Rückverweise
Meta-Information
Prof. Dr. Helmut Dispert
NAME
NAME
NAME
NAME
NAME
NAME
NAME
=
=
=
=
=
=
=
DESCRIPTION
AUTHOR
KEYWORDS
ROBOTS
ROBOTS
ROBOTS
ROBOTS
HTTP-EQUIV = "expires"
HTTP-EQUIV = "refresh"
HTTP-EQUIV = "content-type"
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
=
=
=
=
=
=
=
" ... "
" ... "
" ... "
index
noindex
follow
nofollow
CONTENT = " ... "
CONTENT = " ... " URL = " ... "
CONTENT = " ... "
Beispiele: META-Tag (Suchmaschinen)
<HTML>
<HEAD>
<TITLE>Meta-Information</TITLE>
<META NAME="keywords" CONTENT="Meta, HTML">
<META NAME="description"
CONTENT="Kiel liegt in Schleswig-Holstein">
<META NAME="keywords"
CONTENT="Kiel, Fachhochschule, Elektrotechnik">
<META HTTP-EQUIV="refresh" CONTENT="10; URL=datei.html">
<META HTTP-EQUIV="expires"
CONTENT="Tue, 08 Apr 1997 20:00:00 GMT">
</HEAD>
<BODY>
...
Prof. Dr. Helmut Dispert
Attribute
Vordergrundfarbe (Text):
<BODY TEXT
LINK
VLINK
ALINK
=
=
=
=
"farbe"
"farbe"
"farbe"
"farbe"
[= "#rrggbb"]
>
Hintergrundfarbe:
<BODY BGCOLOR = "farbe" [= "#rrggbb"] >
Hintergrundbild:
<BODY BACKGROUND = "datei.gif" >
Prof. Dr. Helmut Dispert
Farben
Farbe
Hex-Wert
Farbe
Hex-Wert
Aqua
#00FFFF
Navy
#000080
Black
#000000
Olive
#808000
Blue
#0000FF
Purple
#800080
Fuchsia
#FF00FF
Red
#FF0000
Gray
#808080
Teal
#008080
Green
#008000
Silver
#C0C0C0
Lime
#00FF00
White
#FFFFFF
Maroon
#800000
Yellow
#FFFF00
Prof. Dr. Helmut Dispert
Unsortierte Listen <UL> ... >/UL>
<UL>
<LI> Listenelement 1
<LI> Listenelement 2
...
<LI> Listenelement n
</UL>
Ausgabe:
• Listenelement 1
• Listenelement 2
...
• Listenelement n
Sortierte Listen <OL> ... >/OL>
<OL>
<LI> Listenelement 1
<LI> Listenelement 2
...
<LI> Listenelement n
</OL>
Ausgabe:
1. Listenelement 1
2. Listenelement 2
...
n. Listenelement n
Prof. Dr. Helmut Dispert
Tabellen
<TABLE>
<TR> <TH> Kopfzelle </TH> <TH> Kopfzelle </TH> </TR>
<TR> <TD> Datenzelle </TD> <TD> Datenzelle </TD> </TR>
...
<TR> <TD> Datenzelle </TD> <TD> Datenzelle </TD> </TR>
</TABLE>
Attribute
Rahmen
<TABLE
<TABLE
<TABLE
<TABLE
und Abstände:
BORDER
=
CELLPADDING =
CELLSPACING =
WIDTH = "..."
"...">
"...">
"...">
HEIGHT = "...">
Breite und Höhe:
<TH WIDTH = "...">
<TD WIDTH = "...">
<TH HEIGHT = "...">
<TD HEIGHT = "...">
<TH NOWRAP>
<TD NOWRAP>
Ausrichtung:
<TR ALIGN =
<TR VALIGN =
<TH ALIGN =
<TH VALIGN =
<TD ALIGN =
<TD VALIGN =
"...">
"...">
"...">
"...">
"...">
"...">
[Pixel/%]
[Pixel/%]
[Pixel/%]
[Pixel/%]
horizontal
vertikal
horizontal
vertikal
horizontal
vertikal
Verbindung von Zellen:
<TH COLSPAN ="...">
<TH ROWSPAN ="...">
<TD COLSPAN ="...">
<TD ROWSPAN ="...">
Prof. Dr. Helmut Dispert
[Pixel]
[Pixel]
[Pixel]
[Pixel/%]
[left/center/right]
[top/middle/bottom]
[left/center/right]
[top/middle/bottom]
[left/center/right]
[top/middle/bottom]
[Spaltenzahl]
[Zeilenzahl]
[Spaltenzahl]
[Zeilenzahl]
Struktur einer HTML-Seite
(mit Frames)
<HTML>
<HEAD>
<TITLE> Ueberschrift </TITLE>
</HEAD>
<FRAMESET>
<FRAME>
<FRAME>
</FRAMESET>
<BODY>
..
.
Alternativer Text für
Browser ohne Frames
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Struktur einer HTML-Seite
(mit Frames)
<HTML>
<HEAD>
<TITLE> Ueberschrift </TITLE>
</HEAD>
<FRAMESET>
<FRAMESET>
<FRAME>
<FRAME>
</FRAMESET>
<FRAMESET>
<FRAME>
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
<BODY>
..
.
Alternativer Text für
Browser ohne Frames
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Struktur einer HTML-Seite
(mit Frames)
<HTML>
<HEAD>
<TITLE>
</HEAD>
Ueberschrift </TITLE>
<FRAMESET ROWS = "90%,10%">
<FRAMESET COLS = "150,*">
<FRAMESET ROWS = "120,*">
<FRAME>
<FRAME>
</FRAMESET>
<FRAME>
</FRAMESET>
<FRAME>
</FRAMESET>
</HTML>
150
*
120
90%
*
10%
Prof. Dr. Helmut Dispert
Frames
Attribute
Definition der Framesets:
<FRAMESET ROWS = "..." >
<FRAMESET COLS = "..." >
Zeilen [Pixel/%]
Zeilen [Pixel/%]
Definition der Frames:
<FRAME
SRC = "..."
NAME = "..." >
Dateiname
["datei.html"]
Fenstername ["name"]
Eigenschaften der Frames:
<FRAME
<FRAME
<FRAME
<FRAME
SCROLLING = "..." >
NORESIZE >
MARGINWIDTH
= "..." >
MARGINHEIGHT = "..." >
[yes/no/auto]
feste Fenstergröße
[Pixel]
[Pixel]
Eigenschaften der Frames:
<FRAMESET
<FRAMESET
<FRAMESET
<FRAMESET
BORDER = "..."
FRAMEBORDER
=
FRAMESPACING =
BORDERCOLOR
=
>
"..." >
"..." >
"..." >
[Pixel]
[yes/no]
[Pixel]
["farbe"]
Nets.
MS
MS
MS
Definition der Zielfenster (Anker):
<A
HREF = "..."
TARGET = "Fenstername"
TARGET = "_new"
TARGET = "_parent"
TARGET = "_top" >
... Text ... </A>
Prof. Dr. Helmut Dispert
Targetfenster
Neues Fenster
Frameset beenden
Frameset beenden
Frames
Definition der Frames:
<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="ftest.html">
<FRAME SRC="ftest.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="ftest.html">
<FRAME SRC="ftest.html">
<FRAME SRC="ftest.html">
</FRAMESET>
</FRAMESET>
</HTML>
Prof. Dr. Helmut Dispert
Frames (Beispiele)
Definition der Frames:
<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET ROWS="90%,10%">
<FRAMESET COLS="150,*">
<FRAMESET ROWS="120,*">
<FRAME SRC="fhstich5.gif" NAME="Window1_1">
<FRAME SRC="window12.html" NAME="Window1_2">
</FRAMESET>
<FRAME SRC="../fbt_ho_g.htm" NAME="Window2">
</FRAMESET>
<FRAME SRC="window3.html" NAME="Window3">
</FRAMESET>
</HTML>
Framedatei "window12.html"
<HTML>
<FONT SIZE="+2">
<LI><STRONG><A HREF="../gen_data/dekan_g.htm"
TARGET="Window2">Link 1</A></STRONG></LI><BR><BR>
<LI><STRONG><A HREF="../gen_data/acad_c_g.htm"
TARGET="Window2">Link 2</A></STRONG></LI><BR><BR>
<LI><STRONG><A HREF="../gen_data/termin_g.htm "
TARGET="Window2">Link 3</A></STRONG></LI><BR><BR>
<LI><STRONG><A HREF="../gen_data/gen_da_g.htm"
TARGET="Window2">Link 4</A></STRONG></LI><BR><BR>
</FONT>
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Formulare
(Tags)
Tag
<FORM>
Attribut
Beschreibung
ACTION
auszuführendes CGI-Skript
oder Programm
METHOD
Methode der Datenübergabe:
GET:
über QUERY_STRING,
POST: über stdin.
<INPUT>
TYPE
<TEXTAREA>
<SELECT>
<OPTION>
Prof. Dr. Helmut Dispert
Art des Eingabefeldes
Definiert einen Textbereich
ROWS
Höhe des Textbereiches
COLS
Breite des Textbereiches
NAME
Definiert den Variablennamen
NAME
Definiert den Variablennamen
SIZE
Anzahl der angezeigten
Elemente
MULTIPLE
Mehr als ein Element kann
ausgewählt werden
SELECTED
Standardmäßig ausgewähltes
Element (default)
Formulare
(Eingabewerte)
Eingabetyp
Attribut
submit
Beschreibung
"Übergabe"-Schaltfläche
definieren
VALUE
reset
Text auf der Schaltfläche
"Reset"-Schaltfläche definieren
VALUE
image
Text auf der Schaltfläche
Definition einer Abbildung zur
Formularübergabe
SRC
URL des Bildes
NAME
Variablenname
hidden
Definition einer verborgenen
Variablen
NAME
Variablenname
VALUE
Wert von NAME
radio
Definition eines "Radiobuttons"
NAME
Variablenname
VALUE
Wert von NAME
CHECKED
Vorauswahl (default)
checkbox
Definition einer "Checkbox"
NAME
Variablenname
VALUE
Wert von NAME
CHECKED
Vorauswahl (default)
NAME
Variablenname
VALUE
Wert von NAME
SIZE
Zeichenzahl
MAXLENGTH
angezeigte Größe des Textfeldes
text
Prof. Dr. Helmut Dispert
Formulare
<HTML>
<HEAD>
<TITLE>Formulare</TITLE>
</HEAD>
<BODY>
<HR>
<CENTER>
<H2>Beispiel für die Verwendung von Formularen in HTMLDokumenten:</H2>
</CENTER>
<HR>
<BR>
<FORM ACTION="http://www.e-technik.fh-kiel.de/cgi-bin/xpin/xpintest.cgi"
METHOD=POST>
<H3>Bitte geben Sie die geforderten Daten ein:</H3>
<CENTER>
<TABLE>
<TR><TD>Vorname<TD><INPUT NAME="VORNAME"><TD>Hochschule<TD>
<INPUT TYPE="CHECKBOX" NAME="Auswahl" VALUE="FH-KIEL" CHECKED>
FH-Kiel
<INPUT TYPE="CHECKBOX" NAME="Auswahl" VALUE="FH-FLENSBURG">
FH-Flensburg
<INPUT TYPE="CHECKBOX" NAME="Auswahl" VALUE="FH-HEIDE"> FH-Heide
<TR><TD>Nachname<TD>
<INPUT NAME="NACHNAME"><TD>Abschicken<TD>
<INPUT TYPE="SUBMIT" VALUE="Senden">
<TR><TD>Straße<TD><INPUT NAME="STRASSE"><TD><TD ROWSPAN=4>
<INPUT TYPE="IMAGE" NAME="FH_Kiel" SRC="fhbld33p.gif" ALIGN="TOP">
<TR><TD>Stadt<TD><INPUT NAME="STADT">
<TR><TD>Jahr<TD ALIGN="CENTER">
1997<INPUT TYPE="RADIO" NAME="Jahr" VALUE="1997" CHECKED>
1998<INPUT TYPE="RADIO" NAME="Jahr" VALUE="1998">
1999<INPUT TYPE="RADIO" NAME="Jahr" VALUE="1999">
<TR><TD>Passwort<TD><INPUT TYPE="PASSWORD" NAME="Password">
</TABLE>
</CENTER>
</FORM>
<HR>
<A HREF="xpintst_2.html">Nächste Seite</A>
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Formulare
<HTML>
<HEAD>
<TITLE>Formulare</TITLE>
</HEAD>
<BODY>
<HR>
<CENTER>
<H2>Beispiel für die Verwendung von Formularen in HTMLDokumenten:</H2>
</CENTER>
<HR>
<BR>
<CENTER>
<TABLE>
<FORM ACTION="http://www.e-technik.fh-kiel.de/cgi-bin/xpin/xpintest.cgi"
METHOD=POST>
<TR><TD COLSPAN=2>
<H3>Benutzung eines Textfeldes mit Reset:</H3>
<TR><TD COLSPAN=2>
<TEXTAREA NAME="Meinung" COLS=60 ROWS=5 ALIGN=BOTTOM>
Ich benutze diesen Beispieltext!
</TEXTAREA>
<TR><TD>
<INPUT TYPE="RESET" NAME="reset" VALUE="Neuer Text"><TD>
<INPUT TYPE="SUBMIT" VALUE="Senden">
</FORM>
<TR><TD>
<H3>Beispiel einer Menüleiste:</H3>
<FORM ACTION="http://www.e-technik.fh-kiel.de/cgi-bin/xpin/xpintest.cgi"
METHOD=POST>
<SELECT NAME="menue" MULTIPLE>
<OPTION SELECTED VALUE="kiel" MULTIPLE>Kiel</OPTION>
<OPTION MULTIPLE>Hamburg</OPTION>
<OPTION MULTIPLE>Flensburg</OPTION>
<OPTION>Luebeck</OPTION>
<OPTION>Berlin</OPTION>
</SELECT><TD>
<INPUT TYPE="SUBMIT" VALUE="Senden">
</FORM>
</TABLE>
</CENTER>
<HR>
<A HREF="xpintst_3.html">Nächste Seite</A>
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Formulare
<HTML>
<HEAD>
<TITLE>Formulare</TITLE>
</HEAD>
<BODY>
<HR>
<CENTER>
<H2>Beispiel für die Verwendung von Formularen in HTMLDokumenten:</H2>
</CENTER>
<HR>
<BR>
<CENTER>
<TABLE>
<TR><TD COLSPAN=2>
<FORM NAME="Rechner"
ACTION="http://www.e-technik.fh-kiel.de/cgi-bin/xpin/xpintest.cgi"
METHOD=POST>
<H3>Realisierung eines Taschenrechners (onClick, eval):</H3>
<TR><TD>
Eingabe<TD><INPUT TYPE="TEXT" NAME="Eingabe" SIZE=20"><BR>
<TR><TD>
Ausgabe<TD><INPUT TYPE="TEXT" NAME="Ausgabe" SIZE=20">
<TR><TD><TD>
<INPUT TYPE="BUTTON" NAME="calculate" VALUE="Berechnen"
onClick="Rechner.Ausgabe.value=eval(Rechner.Eingabe.value)">
<INPUT TYPE="SUBMIT" VALUE="Senden">
</TABLE>
</CENTER>
</FORM>
<HR>
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Formulare
CGI-Skript
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
int main ()
{
int i;
int length;
char DATA[1000];
char *str_len = getenv("CONTENT_LENGTH");
length = strtod (str_len, NULL);
for (i=0; i<length; i++)
{
scanf("%c", &DATA[i]);
}
printf("Content-type: text/html\n\n");
printf("%s\n", DATA);
return (0);
}
Prof. Dr. Helmut Dispert
Server-Side Includes (SSI)
Hauptdokument:
<HTML>
<HEAD>
<TITLE>Server-Side Includes</TITLE>
</HEAD>
<BODY>
<HR>
<CENTER>
<H2>Beispiele für die Verwendung von <U>Server-Side
Includes (SSI)</U>:</H2>
</CENTER>
<HR>
<H3>
<!--#config timefmt="%r %a %b %e, %Y"-->
<!--#flastmod file="ssitest.shtml"--><BR>
Last modified: <!--#echo var="DATE_GMT"--><BR>
Geändert am: <!--#echo var="DATE_LOCAL"--><BR>
Letzte Änderung: <!--#echo var="LAST_MODIFIED"--><BR>
File Size: <!--#fsize file="ssitest.shtml"--><BR>
<!--#include file="address.html"-->
</H3>
<HR>
</BODY>
</HTML>
Include-Datei:
<ADDRESS>
<BR>
Address:<BR>
Dr. Helmut Dispert<BR>
Fachhochschule Kiel<BR>
Fachbereich Elektrotechnik<BR>
</ADDRESS>
Prof. Dr. Helmut Dispert
Server-Side Includes
Tags
Tag
Attribut
<!-#CONFIG>
Beschreibung
Anpassung von Datum, Zeit und
Fehler
ERRMSG
Fehlermeldung
TIMEFMT
Datum und Zeit
SIZEFMT
Größe
<!-#ECHO>
Wertrückgabe einer Variablen
VAR
<!-#EXEC>
Definition der Variablen
Programm oder Skript
ausführen
CMD
Programm- oder Skriptname
CGI
Programm- oder Skriptname
(eingeschränkt)
<!-#FLASTMOD>
Datum der letzten Änderung
FILE
Dokument
VIRTUAL
Dokument (rel. Root)
<!-#FSIZE>
Dateigröße
FILE
Dokument
VIRTUAL
Dokument (rel. Root)
<!-#INCLUDE>
Prof. Dr. Helmut Dispert
Dateiinhalt einfügen
FILE
Dokument
VIRTUAL
Dokument (rel. Root)
Umgebungsvariablen
Variablenname
AUTH_TYPE
CONTENT_LENGTH
CONTENT_TYPE
DOCUMENT_NAME
DOCUMENT_ROOT
DOCUMENT_URI
DATE_GMT
DATE_LOCAL
GATEWAY_INTERFACE
HTTP_ACCEPT
LAST_MODIFIED
PATH
PATH_INFO
PATH_TRANSLATED
POST
QUERY_STRING
QUERY_STRING_UNESCAPED
REMOTE_ADDR
REMOTE_HOST
REQUEST_METHOD
REMOTE_IDENT
REMOTE USER
SEARCH
SERVER PROTOCOL
SERVER SOFTWARE
SERVER Name
SERVER Port
SERVER Root
SCRIPT_NAME
Prof. Dr. Helmut Dispert
Beschreibung
Formulare
<H2>Beispiel für die Verwendung von Formularen in
HTML-Dokumenten:</H2><BR>
<FORM
ACTION="http://www.e-technik.fh-kiel.de/cgibin/xpin/xpintest.cgi"
METHOD=POST>
<H3>Bitte geben Sie die geforderten Daten ein:</H3>
Vorname
<INPUT NAME="VORNAME">
Hochschule
<INPUT TYPE="CHECKBOX" NAME="Auswahl"
VALUE="FH-KIEL" CHECKED>FH-Kiel
<INPUT TYPE="CHECKBOX" NAME="Auswahl"
VALUE="FH-FLENSBURG">FH-Flensburg
<INPUT TYPE="CHECKBOX" NAME="Auswahl"
VALUE="FH-HEIDE"> FH-Heide
Nachname
<INPUT NAME="NACHNAME">Abschicken
Straße <INPUT NAME="STRASSE">
<INPUT TYPE="SUBMIT" VALUE="Senden">
<INPUT TYPE="IMAGE" NAME="FH_Kiel"
SRC="fhbld33p.gif" ALIGN="TOP">
Stadt
<INPUT NAME="STADT">
Jahr 1997
<INPUT TYPE="RADIO" NAME="Jahr"
VALUE="1997" CHECKED>
1998
<INPUT TYPE="RADIO" NAME="Jahr"
VALUE="1998">
1999
<INPUT TYPE="RADIO" NAME="Jahr"
VALUE="1999">
Passwort
<INPUT TYPE="PASSWORD" NAME="Password">
</FORM>
Prof. Dr. Helmut Dispert
Formulare
<H2>Beispiel für die Verwendung von Formularen in
HTML-Dokumenten:</H2><BR>
<FORM ACTION="http://www.e-technik.fh-kiel.de/cgibin/xpin/xpintest.cgi"
METHOD=POST>
<H3>Benutzung eines Textfeldes mit Reset:</H3>
<TEXTAREA NAME="Meinung" COLS=60 ROWS=5
ALIGN=BOTTOM>
Ich benutze diesen Beispieltext!
</TEXTAREA>
<INPUT TYPE="RESET" NAME="reset" VALUE="Neuer Text">
<INPUT TYPE="SUBMIT" VALUE="Senden">
</FORM>
<H3>Beispiel einer Menüleiste:</H3>
<FORM ACTION="http://www.e-technik.fh-kiel.de/cgibin/xpin/xpintest.cgi"
METHOD=POST>
<SELECT NAME="menue" MULTIPLE>
<OPTION SELECTED VALUE="kiel"
MULTIPLE>Kiel</OPTION>
<OPTION MULTIPLE>Hamburg</OPTION>
<OPTION MULTIPLE>Flensburg</OPTION>
<OPTION>Luebeck</OPTION>
<OPTION>Berlin</OPTION>
</SELECT>
<INPUT TYPE="SUBMIT" VALUE="Senden">
</FORM>
Prof. Dr. Helmut Dispert
Meta-Information
<HTML>
<HEAD>
<TITLE>Meta-Information</TITLE>
<META HTTP-EQUIV="refresh" CONTENT="10; URL=meta2.html">
<META HTTP-EQUIV="expires"
CONTENT="Tue, 08 Apr 1997 20:00:00 GMT">
<META NAME="keywords" CONTENT="Meta, HTML">
</HEAD>
<BODY>
Prof. Dr. Helmut Dispert
Frames
Definition der Frames:
<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="ftest.html">
<FRAME SRC="ftest.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="ftest.html">
<FRAME SRC="ftest.html">
<FRAME SRC="ftest.html">
</FRAMESET>
</FRAMESET>
</HTML>
Prof. Dr. Helmut Dispert
Frames
Definition der Frames:
<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET ROWS="90%,10%">
<FRAMESET COLS="150,*">
<FRAMESET ROWS="120,*">
<FRAME SRC="fhstich5.gif" NAME="Window1_1">
<FRAME SRC="window12.html" NAME="Window1_2">
</FRAMESET>
<FRAME SRC="../fbt_ho_g.htm" NAME="Window2">
</FRAMESET>
<FRAME SRC="window3.html" NAME="Window3">
</FRAMESET>
</HTML>
Framedatei "window12.html"
<HTML>
<FONT SIZE="+2">
<LI><STRONG><A HREF="../gen_data/dekan_g.htm"
TARGET="Window2">Link 1</A></STRONG></LI><BR><BR>
<LI><STRONG><A HREF="../gen_data/acad_c_g.htm"
TARGET="Window2">Link 2</A></STRONG></LI><BR><BR>
<LI><STRONG><A HREF="../gen_data/termin_g.htm "
TARGET="Window2">Link 3</A></STRONG></LI><BR><BR>
<LI><STRONG><A HREF="../gen_data/gen_da_g.htm"
TARGET="Window2">Link 4</A></STRONG></LI><BR><BR>
</FONT>
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Frames
Prof. Dr. Helmut Dispert
Formulare
<HTML>
<HEAD>
<TITLE>Formulare</TITLE>
</HEAD>
<BODY>
<HR>
<CENTER>
<H2>Beispiel für die Verwendung von Formularen in HTMLDokumenten:</H2>
</CENTER>
<HR>
<BR>
<FORM ACTION="http://www.e-technik.fh-kiel.de/cgi-bin/xpin/xpintest.cgi"
METHOD=POST>
<H3>Bitte geben Sie die geforderten Daten ein:</H3>
<CENTER>
<TABLE>
<TR><TD>Vorname<TD><INPUT NAME="VORNAME"><TD>Hochschule<TD>
<INPUT TYPE="CHECKBOX" NAME="Auswahl" VALUE="FH-KIEL" CHECKED>
FH-Kiel
<INPUT TYPE="CHECKBOX" NAME="Auswahl" VALUE="FH-FLENSBURG">
FH-Flensburg
<INPUT TYPE="CHECKBOX" NAME="Auswahl" VALUE="FH-HEIDE"> FH-Heide
<TR><TD>Nachname<TD>
<INPUT NAME="NACHNAME"><TD>Abschicken<TD>
<INPUT TYPE="SUBMIT" VALUE="Senden">
<TR><TD>Straße<TD><INPUT NAME="STRASSE"><TD><TD ROWSPAN=4>
<INPUT TYPE="IMAGE" NAME="FH_Kiel" SRC="fhbld33p.gif" ALIGN="TOP">
<TR><TD>Stadt<TD><INPUT NAME="STADT">
<TR><TD>Jahr<TD ALIGN="CENTER">
1997<INPUT TYPE="RADIO" NAME="Jahr" VALUE="1997" CHECKED>
1998<INPUT TYPE="RADIO" NAME="Jahr" VALUE="1998">
1999<INPUT TYPE="RADIO" NAME="Jahr" VALUE="1999">
<TR><TD>Passwort<TD><INPUT TYPE="PASSWORD" NAME="Password">
</TABLE>
</CENTER>
</FORM>
<HR>
<A HREF="xpintst_2.html">Nächste Seite</A>
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Formulare
<HTML>
<HEAD>
<TITLE>Formulare</TITLE>
</HEAD>
<BODY>
<HR>
<CENTER>
<H2>Beispiel für die Verwendung von Formularen in HTMLDokumenten:</H2>
</CENTER>
<HR>
<BR>
<CENTER>
<TABLE>
<FORM ACTION="http://www.e-technik.fh-kiel.de/cgi-bin/xpin/xpintest.cgi"
METHOD=POST>
<TR><TD COLSPAN=2>
<H3>Benutzung eines Textfeldes mit Reset:</H3>
<TR><TD COLSPAN=2>
<TEXTAREA NAME="Meinung" COLS=60 ROWS=5 ALIGN=BOTTOM>
Ich benutze diesen Beispieltext!
</TEXTAREA>
<TR><TD>
<INPUT TYPE="RESET" NAME="reset" VALUE="Neuer Text"><TD>
<INPUT TYPE="SUBMIT" VALUE="Senden">
</FORM>
<TR><TD>
<H3>Beispiel einer Menüleiste:</H3>
<FORM ACTION="http://www.e-technik.fh-kiel.de/cgi-bin/xpin/xpintest.cgi"
METHOD=POST>
<SELECT NAME="menue" MULTIPLE>
<OPTION SELECTED VALUE="kiel" MULTIPLE>Kiel</OPTION>
<OPTION MULTIPLE>Hamburg</OPTION>
<OPTION MULTIPLE>Flensburg</OPTION>
<OPTION>Luebeck</OPTION>
<OPTION>Berlin</OPTION>
</SELECT><TD>
<INPUT TYPE="SUBMIT" VALUE="Senden">
</FORM>
</TABLE>
</CENTER>
<HR>
<A HREF="xpintst_3.html">Nächste Seite</A>
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Formulare
<HTML>
<HEAD>
<TITLE>Formulare</TITLE>
</HEAD>
<BODY>
<HR>
<CENTER>
<H2>Beispiel für die Verwendung von Formularen in HTMLDokumenten:</H2>
</CENTER>
<HR>
<BR>
<CENTER>
<TABLE>
<TR><TD COLSPAN=2>
<FORM NAME="Rechner"
ACTION="http://www.e-technik.fh-kiel.de/cgi-bin/xpin/xpintest.cgi"
METHOD=POST>
<H3>Realisierung eines Taschenrechners (onClick, eval):</H3>
<TR><TD>
Eingabe<TD><INPUT TYPE="TEXT" NAME="Eingabe" SIZE=20"><BR>
<TR><TD>
Ausgabe<TD><INPUT TYPE="TEXT" NAME="Ausgabe" SIZE=20">
<TR><TD><TD>
<INPUT TYPE="BUTTON" NAME="calculate" VALUE="Berechnen"
onClick="Rechner.Ausgabe.value=eval(Rechner.Eingabe.value)">
<INPUT TYPE="SUBMIT" VALUE="Senden">
</TABLE>
</CENTER>
</FORM>
<HR>
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Formulare
CGI-Skript
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
int main ()
{
int i;
int length;
char DATA[1000];
char *str_len = getenv("CONTENT_LENGTH");
length = strtod (str_len, NULL);
for (i=0; i<length; i++)
{
scanf("%c", &DATA[i]);
}
printf("Content-type: text/html\n\n");
printf("%s\n", DATA);
return (0);
}
Prof. Dr. Helmut Dispert
Dokument vor Informationseingabe:
Dokument nach Informationseingabe:
Prof. Dr. Helmut Dispert
Formulare
CGI-Ausgabe
Eingabe mit "Submit" bestätigt:
VORNAME=Peter&Auswahl=FH-KIEL&Auswahl=FH-HEIDE&
NACHNAME=Mustermann&STRASSE=Sackgasse+1&STADT=33333+Irgendwo&
Jahr=1997&Password=geheim
Eingabe mit "Image-Click" bestätigt:
VORNAME=Peter&Auswahl=FH-KIEL&Auswahl=FH-HEIDE&
NACHNAME=Mustermann&STRASSE=Sackgasse+1&STADT=33333+Irgendwo&
Jahr=1997&Password=geheim&FH_Kiel.x=83&FH_Kiel.y=41
Im zweiten Fall werden zusätzlich die Koordinaten des
aktivierten Bildpunktes ausgegeben (x=83, y=41).
Prof. Dr. Helmut Dispert
Dokument vor Informationseingabe:
Dokument nach Informationseingabe:
Prof. Dr. Helmut Dispert
Formulare
CGI-Ausgabe
Textfeld:
Meinung=Der+Text+wurde+%FCberschrieben.%0D%0AAusserdem%0D%0Awur
den+neue+Zeilen+eingef%FChrt%21%0D%0A++++++
Menüleiste:
menue=Flensburg
Prof. Dr. Helmut Dispert
Formulare
CGI-Ausgabe
Ausgabe nach "Berechnen" und "Senden":
Eingabe=5%2B6*%2810%2F5%29&Ausgabe=17
Prof. Dr. Helmut Dispert
Server-Side Includes
Hauptdokument:
<HTML>
<HEAD>
<TITLE>Server-Side Includes</TITLE>
</HEAD>
<BODY>
<HR>
<CENTER>
<H2>Beispiele für die Verwendung von <U>Server-Side
Includes (SSI)</U>:</H2>
</CENTER>
<HR>
<H3>
<!--#config timefmt="%r %a %b %e, %Y"-->
<!--#flastmod file="ssitest.shtml"--><BR>
Last modified: <!--#echo var="DATE_GMT"--><BR>
Geändert am: <!--#echo var="DATE_LOCAL"--><BR>
Letzte Änderung: <!--#echo var="LAST_MODIFIED"--><BR>
File Size: <!--#fsize file="ssitest.shtml"--><BR>
<!--#include file="address.html"-->
</H3>
<HR>
</BODY>
</HTML>
Include-Datei:
<ADDRESS>
<BR>
Address:<BR>
Dr. Helmut Dispert<BR>
Fachhochschule Kiel<BR>
Fachbereich Elektrotechnik<BR>
</ADDRESS>
Prof. Dr. Helmut Dispert
Server-Side Includes
Ausgabe
Prof. Dr. Helmut Dispert
CGI-Schnittstelle
Common Gateway Interface
INTERNET
CGI
Anwendungen
HTML
Anwendungsprogramme
Browser
Betriebssystem
SQL-DBMS
Client
Webserver
Java-Applikation
(ohne CGI-Schnittstelle)
INTERNET
Java-Applet
Java-
AnwendungsServer
CGI
HTML
Anwendungen
Anwendungsprogramme
Browser
Betriebssystem
Client
Prof. Dr. Helmut Dispert
SQL-DBMS
Webserver
Aufbau von Java-Umgebungen
Compile-time
Environment
Java
Quelle
(.java)
Java
Compiler
Java
Bytecode
(.class)
Runtime Environment
(Java Plattform)
Class Loader
Byte Code Verifier
Java
Interpreter
Just-in-Time
Compiler
Laufzeitsystem
Betriebssystem
Hardware
Prof. Dr. Helmut Dispert
Java Klassen
Bibliotheken
Virtuelle
Java-Maschine
VM
Java
Implementierungsmöglichkeiten
Applets und Anwendungen (Applications)
Java Standard Extension API
Java Standard Ext. Classes
Java Base API
Java
embedded
API
Java Base Classes
Java OS
Java VM
Java VM
Java VM
Adapter
Adapter
Java VM
Adapter
Browser
Adapter
Java
Chip
Java auf
JavaChip
Prof. Dr. Helmut Dispert
BS
BS
BS
Hardware
Hardware
Hardware
Hardware
Java auf
JavaOS
Java in
einem Browser
Java auf
einem
Desktop BS
Java auf
einem
kleinen BS
JavaScript
Prof. Dr. Helmut Dispert
JavaScript-Bereiche in HTML definieren
Beispiel:
<html>
<head>
<title>Test</title>
<script language="JavaScript">
<!-alert("Hallo Welt!");
//-->
</script>
</head>
<body>
</body></html>
Prof. Dr. Helmut Dispert
JavaScript-Elemente in HTML-Tags
Beispiel:
<html>
<head>
<title>JavaScript-Test</title>
<script language="JavaScript">
<!-function Quadrat(Zahl)
{
Ergebnis = Zahl * Zahl;
alert("Das Quadrat von " + Zahl + " = " +
Ergebnis);
}
//-->
</script>
</head>
<body>
<form>
<input type=button
value="Quadrat von 6 errechnen"
onClick="Quadrat(6)">
</form>
</body>
</html>
Prof. Dr. Helmut Dispert
JavaScripts in separaten Dateien
Beispiel: (HTML-Datei)
<html>
<head>
<title>JavaScript-Test</title>
<script language="JavaScript"
src="quadrat.js"
type="text/javascript">
</script>
</head>
<body>
<form>
<input type=button
value="Quadrat von 6 errechnen"
onClick="Quadrat(6)">
</form>
</body>
</html>
Beispiel (separate JavaScript-Datei):
function Quadrat(Zahl)
{
Ergebnis = Zahl * Zahl;
alert("Das Quadrat von " + Zahl +
" = " + Ergebnis);
}
Prof. Dr. Helmut Dispert
JavaScripts in separaten Dateien
Prof. Dr. Helmut Dispert
Anweisungsblöcke
Beispiel 1:
if(Zahl > 1000)
{
Zahl = 0;
Neustart();
}
Beispiel 2:
while(i <= 99)
{
Quadrat(i);
i = i + 1;
}
Beispiel 3:
function SageQuadrat(x)
{
var Ergebnis = x * x;
alert(Ergebnis);
}
Beispiel 4:
function SagEinmaleins(x)
{
var Ergebnis = x * x;
if(Ergebnis > 100)
{
Ergebnis = 0;
Neustart();
}
alert(Ergebnis);
}
Prof. Dr. Helmut Dispert
Selbstvergebene Namen
Beispiel:
<html><head><title>Test</title>
<script language="JavaScript">
<!-function FensterZu(Fensternummer)
{
parent.frames[Fensternummer].close();
}
//-->
</script>
</head><body>
</body></html>
Kommentare in JavaScript
Beispiel:
while(i <= 99)
{
Quadrat = i * i;
i = i + 1;
}
Prof. Dr. Helmut Dispert
/* Quadrat bilden */
/* i inkrementieren*/
Variablen definieren
Beispiel:
<html>
<head>
<title>Sinn des Lebens zum Quadrat</title>
<script language="JavaScript">
<!-var Hinweis = "Quadratzahlen ausgegeben";
alert(Hinweis);
function SchreibeQuadrate()
{
var IMAX = 42;
var i, x;
var Satzteil = "Das Quadrat von ";
for(i=1; i <= IMAX; ++i)
{
x = i * i;
document.write(Satzteil
+ i + " ist " + x + "<br>");
}
}
// -->
</script>
</head>
<body onLoad="SchreibeQuadrate()">
</body>
</html>
Prof. Dr. Helmut Dispert
Werte von Variablen ändern
Beispiel:
<html>
<head>
<title>Sinn des Lebens zum Quadrat</title>
<script language="JavaScript">
<!-function SchreibeQuadrate()
{
var IMAX = 42;
var i, x;
var Satzteil = "Das Quadrat von ";
document.close();
document.open("text/html");
for(i=1; i <= IMAX; ++i)
{
x = i * i;
document.write(Satzteil + i +
" ist " + x + "<br>");
}
}
// -->
</script>
</head>
<body onLoad="SchreibeQuadrate()">
</body>
</html>
Prof. Dr. Helmut Dispert
Vordefinierte JavaScript-Objekte
Beispiel:
<html><head><title>Test</title>
<script language="JavaScript">
<!-function SagDatumUndZeit()
{
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getYear();
var Stunden = Jetzt.getHours();
var Minuten = Jetzt.getMinutes();
var NachVoll =
((Minuten < 10) ? ":0" : ":");
alert("Guten Tag!\nHeute ist der "
+ Tag + "." + Monat + "." + Jahr +
"\nEs ist jetzt "
+ Stunden + NachVoll + Minuten + " Uhr");
}
// -->
</script>
</head>
<body onload="SagDatumUndZeit()">
</body></html>
Prof. Dr. Helmut Dispert
Objekte definieren
Streng objektorientierte Programmierung in JavaScript:
Zwei Schritte:
1. Objekt und Eigenschaften "deklarieren".
2. Instanz dieses Objekts bilden.
Beispiel:
<html>
<head>
<title>Beispiel mit JavaScript</title>
<script language="JavaScript">
<!-function Farbe(Farbwert_R, Farbwert_G,
Farbwert_B)
{
this.Farbwert_R = Farbwert_R;
this.Farbwert_G = Farbwert_G;
this.Farbwert_B = Farbwert_B;
}
function TestObjekt()
{
Test = new Farbe("33","99","C0");
alert("Der Rotwert meiner Farbe ist
Hexadezimal " + Test.Farbwert_R);
}
// -->
</script>
</head>
<body onload="TestObjekt()">
</body>
</html>
Prof. Dr. Helmut Dispert
Objekteigenschaften
Beispiel:
<html>
<head>
<title>Browser des Anwenders auslesen</title>
<script language="JavaScript">
<!-var BrowserName = navigator.appName;
var BrowserVersion = navigator.appVersion;
alert("Sie verwenden also den " + BrowserName
+ " in der Version "
+ BrowserVersion);
// -->
</script>
</head>
<body>
</body>
</html>
Prof. Dr. Helmut Dispert
Objekt-Methoden
Methode:
history.back():
⇒ Rücksprung an eine besuchte URL-Adresse.
Beispiel:
<html>
<head>
<title> Ruecksprung </title>
</head>
<body>
<a href="javascript:history.back();">
Ruecksprung</a>
</body>
</html>
Prof. Dr. Helmut Dispert
Existenz eines Objektes überprüfen
Beispiel:
<html>
<head>
<title>Objekte abfagen</title>
<script language="JavaScript">
<!-if(! document.images)
alert("Image-Objekt nicht bekannt!");
else
alert("Image-Objekt bekannt");
if(document.all)
alert("Microsoft!");
else
alert("Nicht Microsoft!");
// -->
</script>
</head>
<body>
</body>
</html>
Prof. Dr. Helmut Dispert
Mehrere Anweisungen mit einem Objekt ausführen
(with)
Beispiel:
<html>
<head>
<title>Test</title></head>
<body>
<script language="JavaScript">
with(document)
{
open();
write("Diese Seite hat die Hintergrundfarbe
" + bgColor);
close();
}
</script>
</body>
</html>
Bezug auf aktuelles Objekt nehmen
(this)
Beispiel:
<html><head><title>Test</title></head>
<body>
<form name="Eingabe">
<input type=text name="Feld">
<input type=button value="OK"
onClick="alert(this.form.Feld.value)">
</form>
</body>
</html>
Prof. Dr. Helmut Dispert
Funktion definieren
Beispiel:
function PrimzahlCheck(Zahl)
{
var Grenzzahl = Zahl / 2;
var Check = 1;
for(i = 2; i <= Grenzzahl; i++)
if(Zahl % i == 0)
{
alert(Zahl + " ist keine Primzahl,
weil teilbar durch " + i);
Check = 0;
}
if(Check == 1)
alert(Zahl + " ist eine Primzahl!");
}
</script>
Prof. Dr. Helmut Dispert
Funktion aufrufen
Beispiel:
<html>
<head>
<title>Zahl auf Primzahl testen</title>
<script language="JavaScript">
<!-function PrimzahlCheck(Zahl)
{
var Grenzzahl = Zahl / 2;
var Check = 1;
for(i = 2; i <= Grenzzahl; i++)
if(Zahl % i == 0)
{
alert(Zahl + " ist keine Primzahl,
weil teilbar durch " + i);
Check = 0;
}
if(Check == 1)
alert(Zahl + " ist eine Primzahl!");
}
//-->
</script>
</head>
<body>
<form name="ZahlForm">
Geben Sie eine Zahl zum Primzahltest ein:<br>
<input type=text name="Zahl">
<input type=button
value="auf Primzahl testen"
onClick="PrimzahlCheck
(document.ZahlForm.Zahl.value)">
</form>
</body>
</html>
Prof. Dr. Helmut Dispert
Funktion mit Rückgabewert
Beispiel:
<html>
<head>
<title>Bruttobetrag errechnen</title>
<script language="JavaScript">
<!-function BruttoBetrag(Netto, Prozente)
{
var Ergebnis = Netto * (1 + (Prozente / 100));
return Ergebnis;
}
function SchreibeBrutto(Betrag, Prozentsatz)
{
var Wert;
Wert = BruttoBetrag(Betrag, Prozentsatz);
document.BruttoForm.Ergebnisfeld.value = Wert;
}
//-->
</script>
</head>
Prof. Dr. Helmut Dispert
Funktion mit Rückgabewert
continued
<body>
<form name="BruttoForm">
Nettobetrag: <input type=text name="NettoEingabe"><br>
Prozentsatz: <input type=text name="ProzentEingabe"><br>
<p>Kommabetrag mit Punkt eingeben!</p>
<input type=button value="Brutto ermitteln"
onClick="SchreibeBrutto(document.BruttoForm.NettoEingabe.value,
document.BruttoForm.ProzentEingabe.value)">
<p>
Ergebnis: <input type=text name="Ergebnisfeld">
</form>
</body>
</html
Prof. Dr. Helmut Dispert
Vordefinierte JavaScript-Funktionen
Beispiel:
<html>
<head>
<title>Bruttobetrag errechnen</title>
<script language="JavaScript">
<!-function Simple()
{
var Ergebnis = eval("1+1");
alert("1 + 1 = " + Ergebnis);
}
//-->
</script>
</head>
<body>
<a href="javascript:Simple()">
Wieviel ist 1+1?</a>
</body>
</html>
Prof. Dr. Helmut Dispert
Steuerzeichen bei Zeichenketten
Steuerzeichen können in den Variablenwert eingefügt
werden:
Beispiel:
<script language="JavaScript">
<!-var Variable1 = "\nZeilenumbruch";
var Variable2 = "\fWagenrücklauf";
var Variable3 = "\bBackspace";
var Variable4 = "\rDOS-ExtraZeilenumbruch";
var Variable5 = "\tTabulator";
var Variable6 = "\"Anführungszeichen";
// -->
</script>
Notation numerischer Werte
Beispiel:
<script language="JavaScript">
<!-var a = 1E1;
var b = 1.2345E4;
var c = 2e-3;
// -->
</script>
Prof. Dr. Helmut Dispert
Zuweisungsoperator
Beispiel:
<script language="JavaScript">
<!-var X = 42;
// -->
</script>
Vergleichsoperatoren
Beispiel:
<script language="JavaScript">
<!-if(X == 42) return 1;
if(X != 42) return 0;
if(x > 42) return 0;
if(X < 42) return 0;
if(Alter >= 18) alert("Okay!");
if(Alter <= 17) alert("Warnung!");
// -->
</script>
Prof. Dr. Helmut Dispert
Berechnungsoperatoren
Beispiel:
<script language="JavaScript">
<!-var Zwei = 1 + 1;
var GarNix = 1 - 1;
var AuchNix = 81 / 3 - 27;
var WenigerAlsNix = 81 / (3 - 27);
var X = 6 * 7;
var MachtAuchSinn = 84 / 2;
x = Jahr % 4;
if(x == 0)
Schaltjahr = true;
/* Besondere Notationen: */
var Zahl;
Zahl+=3;
Zahl++;
Zahl-=2;
Zahl--;
Zahl*=4;
Zahl/=3;
// -->
</script>
Prof. Dr. Helmut Dispert
Logische Operatoren
Beispiel:
<script language="JavaScript">
<!-if(PLZ >= 80000 && PLZ <= 82000)
alert("Muenchen oder Umgebung!")
if(x > 100 || y == 0)
break;
// -->
</script>
Prof. Dr. Helmut Dispert
JavaScript und Java
JavaScript
Java
Interpreted by client (not
compiled)
Compiled on server before
execution on client
Object-based, Code uses builtin, extensible objects, but no
classes or inheritance
Object-oriented. Applets consist
of object classes with
inheritance
Code integrated with, and
embedded in, HTML
Applets distinct from HTML
(accessed from HTML pages)
Variable data types not declared
(loose typing)
Variable data types must be
declared (strong typing)
Dynamic binding. Object
references checked at run-time
Static binding. Object references
must exist at compile-time
Cannot automatically write to
hard disk
Cannot automatically write to
hard disk
Prof. Dr. Helmut Dispert
JavaScript
Script-Format:
<SCRIPT>
JavaScript statements...
</SCRIPT>
Das LANGUAGE-Attribut (optional)
spezifiziert die scripting language:
<SCRIPT LANGUAGE="JavaScript">
JavaScript statements...
</SCRIPT>
Achtung:
JavaScript ist case sensitive.
Prof. Dr. Helmut Dispert
JavaScript
Beispiel
Beispiel 1: a simple script.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hello net.")
</SCRIPT>
</HEAD>
<BODY>
That's all, folks.
</BODY>
</HTML>
Beispiel 1: Ausgabe
Hello net. That's all folks.
Prof. Dr. Helmut Dispert
Code Hiding
<SCRIPT>
<!-- Begin to hide script contents from old browsers.
.
.
.
// End the hiding here. -->
</SCRIPT>
Prof. Dr. Helmut Dispert
Operator zur Zeichenkettenverknüpfung
Beispiel:
<script language="JavaScript">
<!-var Vorname = "Fritz "
var Zuname = "Mustermann"
var Name = Vorname + Zuname +
", der Autor dieses Dokuments"
// -->
</script>
Operatorenrangfolge
1.Rangstufe:
2.Rangstufe:
3.Rangstufe:
4.Rangstufe:
5.Rangstufe:
6.Rangstufe:
7.Rangstufe:
8.Rangstufe:
9.Rangstufe:
10.Rangstufe:
11.Rangstufe:
12.Rangstufe:
13.Rangstufe:
14.Rangstufe:
15.Rangstufe:
Prof. Dr. Helmut Dispert
, (Aneinanderreihung)
= += -= <<= >>= &= ^= |=
?: ( Entweder-Oder-Bedingung)
||
&&
|
^
&
== !=
< <= > >=
<< >> >>>
+ * / %
! ~ - ++ -() [] . (Klammerung und
Vektoren)
Bedingte Anweisungen "if"
Beispiel:
<html>
<head><title>TestUser</title>
<script language="JavaScript">
<!-var Passwort = "FHKiel";
UserEingabe = window.prompt("Bitte geben
Sie das Passwort ein","");
if(UserEingabe != Passwort)
{
alert("Falsches Passwort!");
history.back();
}
else
document.location.href="geheim.htm";
// -->
</script>
</head>
<body>
</body>
</html>
Prof. Dr. Helmut Dispert
Einfache Entweder-Oder-Abfrage
Beispiel:
<script language="JavaScript">
<!-var x = (Antwort == "42") ? "Ja" : "Nein";
alert("Die Antwort lautet " + x + " !");
// -->
</script>
Prof. Dr. Helmut Dispert
Fallunterscheidung mit "switch"
Beispiel:
<script language="JavaScript">
<!-Eingabe = window.prompt("Zahl eingeben","");
switch(Eingabe)
{
case "1":
alert("Zahl = 1");
break;
case "2":
alert("Zahl = 2");
break;
case "3":
alert("Zahl = 3");
break;
case "4":
alert("Zahl = 4");
break;
default:
alert("Zahl ungueltig");
break;
}
// -->
</script>
Prof. Dr. Helmut Dispert
Schleifen mit "while"
Beispiel:
<html>
<head>
<title>User checken</title>
<script language="JavaScript">
<!-var Passwort = "FHKiel";
var UserEingabe = "";
var Zaehler = 0;
while((UserEingabe != Passwort)
&&(Zaehler <= 3))
{
UserEingabe = window.prompt(Zaehler +
". Versuch: geben Sie das
Passwort ein","");
Zaehler++;
}
if(UserEingabe != Passwort)
history.back();
else
document.location.href="geheim.htm";
// -->
</script>
</head>
<body>
</body>
</html>
Prof. Dr. Helmut Dispert
Schleifen mit "for"
Beispiel:
<html>
<head><title>Test</title>
</head>
<body>
<script language="JavaScript">
<!-for(i = 1; i <= 100; i++)
{
var x = i * i;
document.write("<br>Das Quadrat von "
+ i + " ist " + x);
// -->
</script>
</body>
</html>
Prof. Dr. Helmut Dispert
"for-in"-Schleife
Beispiel:
<script language="JavaScript">
<!-function Objekttest(Objekt, ObjName)
{
var Ergebnis = "";
for (var Eigenschaft in Objekt)
{
Ergebnis += ObjName + "." + Eigenschaft
+ " = " + Objekt[Eigenschaft]
+ "<br>";
}
return Ergebnis;
}
// -->
</script>
Prof. Dr. Helmut Dispert
Schleifen mit "do-while"
Beispiel:
1: (Fußgesteuert)
<script language="JavaScript">
<!-var x = 10;
do
{
document.write("<br>x * x = " + (x * x));
x = x + 1;
}
while(x < 10);
// -->
</script>
<p>
2: (Kopfgesteuert)
<script language="JavaScript">
<!-var x = 10;
while(x < 10)
{
document.write("<br>x * x = " + (x * x));
x = x + 1;
}
// -->
</script>
Prof. Dr. Helmut Dispert
Schleifenkontrolle - break und continue
Beispiel 1:
<script language="JavaScript">
<!-var i = 0;
while (i < 6)
{
if (i == 3) break;
i++;
}
alert("i = " + i);
// -->
</script>
Beispiel 2:
<script language="JavaScript">
<!-var i = 0;
while (i < 6)
{
Ende:
if (i == 3)
{
alert("Ende, i = " + i);
break Ende;
}
i++;
}
// -->
</script>
Prof. Dr. Helmut Dispert
Schleifenkontrolle - break und continue
Beispiel 3:
<script language="JavaScript">
<!-var i = 0, j = 0;
while (i < 6)
{
i++;
if (i == 3) continue;
j++;
}
alert("i = " + i + " und j = " + j);
</script>
Prof. Dr. Helmut Dispert
Event-Handler
OnAbort
OnBlur
OnChange
OnClick
OnDblClick
OnError
OnFocus
OnKeydown
OnKeypress
OnKeyup
OnLoad
OnMousedown
OnMousemove
OnMouseout
OnMouseover
OnMouseUp
OnReset
OnSelect
OnSubmit
OnUnload
javascript:
Prof. Dr. Helmut Dispert
bei Abbruch
beim Verlassen
bei erfolgter Änderung
beim Anklicken
bei doppeltem Anklicken
im Fehlerfall
beim Aktivieren
bei gedrückter Taste
bei erfolgtem Tastendruck
bei losgelassener Taste
beim Laden einer Datei
bei gedrückter Maustaste
bei weiterbewegter Maus
beim Verlassen des Elements mit
der Maus
beim Überfahren des Elements mit
der Maus
bei losgelassener Maustaste
beim Zurücksetzen des Formulars
beim Selektieren von Text
beim Absenden des Formulars
beim Verlassen der Datei
bei Verweisen
onAbort (bei Abbruch)
Nach JavaScript (Netscape) erlaubt in folgendem
HTML-Tag:
<img>
Beispiel:
<html>
<head><title>Test</title>
</head>
<body>
<img src="grafik.jpg" width=400 height=600
alt="Grafik"
onAbort="alert('Laden wurde unterbrochen')">
</body>
</html>
Prof. Dr. Helmut Dispert
onBlur (beim Verlassen)
Nach JavaScript (Netscape) erlaubt erlaubt in
folgenden HTML-Tags:
<body> <frameset> <input> <layer> <select> <textarea>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <area> <button> <input> <label> <select>
<textarea>
Beispiel:
<html>
<head><title>Test</title>
</head>
<body>
<form name="Test">
Name: <input type=text name="Eingabe"
onBlur="TestInhalt(this.value)">
</form>
<script language="JavaScript">
document.Test.Eingabe.focus();
function TestInhalt(Feld)
{
if(Feld == "")
{
alert("Feld muss einen Inhalt haben!");
document.Test.Eingabe.focus();
return false;
}
}
</script>
</body>
</html>
Prof. Dr. Helmut Dispert
onChange (bei erfolgter Änderung)
Nach HTML 4.0 und JavaScript 1.2 (Netscape) erlaubt in
folgenden HTML-Tags:
<input> <select> <textarea>
Beispiel:
<html>
<head><title>Test</title>
</head>
<body>
<form name="Test">
<textarea rows=10 cols=40
onChange="alert(this.value)">
Ihr Kommentar!</textarea>
</body>
</html>
Prof. Dr. Helmut Dispert
onClick (beim Anklicken)
Nach JavaScript (Netscape) erlaubt erlaubt in
folgenden HTML-Tags:
<a> <area> <input> <textarea>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <abbr> <acronym> <address> <area> <b> <big>
<blockquote> <body> <button> <caption> <center>
<cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir>
<div> <dl> <dt> <em> <fieldset> <form>
<h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input>
<ins> <kbd> <label> <legend> <li> <link>
<map> <menu> <noframes> <noscript> <object> <ol>
<optgroup> <option> <p> <pre> <q> <s> <samp>
<select> <small> <span> <strike> <strong> <sub> <sup>
<table> <tbody> <td> <textarea> <tfoot>
<th> <thead> <tr> <tt> <u> <ul> <var>
Beispiel:
<html>
<head><title>Test</title>
</head>
<body>
<form>
<input size=30 name="Ausgabe" readonly><br>
<input type=button value="Letzter Update"
onClick="this.form.Ausgabe.value
=document.lastModified">
</form>
</body>
</html>
Prof. Dr. Helmut Dispert
onDblClick (bei doppeltem Anklicken)
Nach JavaScript (Netscape) erlaubt erlaubt in
folgenden HTML-Tags:
<a> <area> <input> <textarea>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <abbr> <acronym> <address> <area> <b> <big>
<blockquote> <body> <button> <caption> <center>
<cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir>
<div> <dl> <dt> <em> <fieldset> <form>
<h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input>
<ins> <kbd> <label> <legend> <li> <link>
<map> <menu> <noframes> <noscript> <object> <ol>
<optgroup> <option> <p> <pre> <q> <s> <samp>
<select> <small> <span> <strike> <strong> <sub> <sup>
<table> <tbody> <td> <textarea> <tfoot>
<th> <thead> <tr> <tt> <u> <ul> <var>
Beispiel:
<html>
<head><title>Test</title>
</head>
<body>
<form name="Rechnen">
Wert: <input size=10 name="Wert">
<input type=button "value=Doppelklick = * 2"
onDblClick="document.Rechnen.Wert.value
=document.Rechnen.Wert.value*2">
</form>
</body>
</html>
Prof. Dr. Helmut Dispert
onError (im Fehlerfall)
Nach JavaScript erlaubt in folgendem HTML-Tag:
<img>
Beispiel:
<html>
<head><title>Test</title>
</head>
<body>
<img src="bild.gif"
onError="alert('keine Grafik')">
</body>
</html>
Prof. Dr. Helmut Dispert
onFocus (beim Aktivieren)
Nach JavaScript (Netscape) erlaubt erlaubt in
folgenden HTML-Tags:
<body> <frame> <input> <layer> <select> <textarea>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <area> <button> <input> <label> <select>
<textarea>
Beispiel:
<html>
<head><title>Test</title>
</head>
<body>
<form>
<input size=30
onFocus="this.value='Name ?'"><br>
<input size=30
onFocus="this.value='Wohnort ?'"><br>
<input size=30
onFocus="this.value='Alter ?'"><br>
</form>
</body>
</html>
Prof. Dr. Helmut Dispert
onLoad (beim Laden einer Datei)
Nach JavaScript (Netscape) und HTML 4.0 erlaubt
erlaubt in folgenden HTML-Tags:
<frameset> <body>
Beispiel:
<html>
<head><title>Test</title>
<script language="JavaScript">
<!-function NaviFenster()
{
Navigation = window.open("navigat.htm",
"Navigation","height=100,width=300");
Navigation.focus();
}
// -->
</script>
</head>
<body onLoad="NaviFenster()">
</body>
</html>
Prof. Dr. Helmut Dispert
javascript: (bei Verweisen)
Kein Event-Handler im engeren Sinn!
Nach JavaScript (Netscape) erlaubt erlaubt in
folgenden HTML-Tags:
<a> <area>
Beispiel:
<html>
<head><title>Test</title>
</head>
<body>
<a href="javascript:
alert(document.lastModified)">
Letzter Update</a>
</body>
</html>
Prof. Dr. Helmut Dispert
window
Eigenschaften:
closed
defaultStatus
innerHeight
innerWidth
locationbar
menubar
name
outerHeight
outerWidth
pageXOffset
pageYOffset
personalbar
scrollbars
statusbar
status
toolbar
Prof. Dr. Helmut Dispert
geschlossenes Fenster
Normalanzeige in der Statuszeile
Höhe des Anzeigebereichs
Breite des Anzeigebereichs
URL-Adreßzeile
Menüleiste
Fenstername
Höhe des gesamten Fensters
Breite des gesamten Fensters
Fensterstartposition von links
Fensterstartposition von oben
Zeile für Lieblingsadressen
Scroll-Leisten
Statuszeile
Inhalt der Statuszeile
Werkzeugleiste
window
Methoden:
alert
back
blur
captureEvents
clearInterval
clearTimeout
close
confirm
disableExternalCapture
enableExternalCapture
find
focus
forward
handleEvent
home
moveBy
moveTo
open
print
prompt
releaseEvents
resizeBy
resizeTo
routeEvent
scrollBy
scrollTo
setInterval
setTimeout
stop
Prof. Dr. Helmut Dispert
Dialogfenster mit Infos
zurück in History
Fenster verlassen
Ereignisse überwachen
zeitliche Anweisungsfolge abbrechen
Timeout abbrechen
Fenster schließen
Dialogfenster zum Bestätigen
Fremdüberwachung verhindern
Fremdüberwachung erlauben
Text suchen
Fenster aktiv machen
vorwärts in History
Ereignis übergeben
Startseite aufrufen
bewegen mit relativen Angaben
bewegen mit absoluten Angaben
neues Fenster öffnen
ausdrucken
Dialogfenster für Werteingabe
Ereignisse abschließen
Größe verändern mit relativen
Angaben
Größe verändern mit absoluten
Angaben
Event-Handler-Hierarchie durchlaufen
Scrollen um Anzahl Pixel
Scrollen zu Position
zeitlische Anweisungsfolge setzen
Timeout setzen
abbrechen
window
Unterobjekte:
document
event
history
location
window: Allgemeines zur Verwendung
Das Objekt window (Fenster) ist das oberste Objekt in der Objekthierarchie
von
Beispiel:
<html>
<head>
<title>Test</title>
<script language
"JavaScript">
window.defaultStatus
"Meine Homepage";
</script>
</head>
<body>
</body>
</html>
Prof. Dr. Helmut Dispert
open
Beispiel:
<html>
<head>
<title>Test</title>
<script language
"JavaScript">
function NeuFenster()
{
MeinFenster
window.open("datei2.htm", "Zweitfenster", "width
MeinFenster.focus();
}
</script>
</head>
<body>
<a href
</body>
</html>
Prof. Dr. Helmut Dispert
300,height
"javascript:NeuFenster()">Neues Fenster</a>
200,scrollbars");
open() Parameter
dependent
Yes: Fenster wird geschlossen, wenn sein Elternfenster geschlossen wird.
No:
(default) Fenster bleibt erhalten, wenn sein Elternfenster geschlossen wird.
height
hotkeys
No:
Yes: (default) Tastaturbefehle des Browsers in dem Fenster gültig.
Höhe des Anzeigebereichs des neuen Fensters in Pixeln, z.B. innerHeight=200
innerWidth
Locationbar
Yes:
No:
(deafult) Fenster erhält keine Adreßzeile.
Yes: Fenster erhält eine eigene Menüleiste mit Browser Befehlen.
(deafult) Fenster erhält keine Menüleiste.
Anwender kann das Fenster in der Größe nicht verändern.
resizable
Yes:
screenX
Horizontalwert der linken oberen Ecke des neuen Fensters in Pixeln, z.B.
screenY
Vertikalwert der linken oberen Ecke des neuen Fensters in Pixeln, z.B. screenY=30
Yes: Fenster erhält eine eigene Statuszeile.
(default) Fenster erhält keine Statuszeile.
Breite des neuen Fensters in Pixeln, z.B. width=400
closed
Prof. Dr. Helmut Dispert
Beispiel:
<html>
<head><title>Test</title>
<script language="JavaScript">
var InfoWin = window.open("datei2.htm", "Zweitfenster");
function CheckOpen()
{
if(InfoWin.closed == true) alert("Fenster wurde geschlossen");
else alert("Fenster noch offen");
}
</script>
</head>
<body>
<a href="javascript:CheckOpen()">Fenster zu?</a>
</body>
</html>
Prof. Dr. Helmut Dispert
name
Beispiel:
<html>
<head>
<title>Test</title>
<script language="JavaScript">
Fenster = window.open("datei2.htm","KleinesFenster","width=200,height=200");
function Fenstername()
{
alert("Name des kleinen Fensters: " + Fenster.name);
neu = prompt("Vergeben Sie einen neuen Fensternamen","Name");
Fenster.name = neu;
alert("Der Name des Fensters lautet jetzt: " + Fenster.name);
}
</script>
</head>
<body>
<a href="javascript:Fenstername()">Name des Fensters</a>
</body>
</html>
Prof. Dr. Helmut Dispert
status
Beispiel:
</head><body>
<a href="datei.htm" onmouseover="status='Das ist ein Verweis';
</body></html>
alert()
<html>
<head>
</head>
<body>
</body>
</html>
Prof. Dr. Helmut Dispert
Beispiel:
<html>
<head>
<title>Test</title>
</head>
<body>
<a href="javascript:window.back()">Zurück</a>
</body>
home()
<a href="javascript:home()">Home</a>
<a href="javascript:window.forward()">Vor</a>
close()
Prof. Dr. Helmut Dispert
<html>
<head>
<title>Test</title>
<script language="JavaScript">
Info = window.open("datei2.htm", "Zweitfenster");
</script>
</head>
<body>
<form>
<input type=button value="Fenster zu" onClick="Info.close()">
</form>
</body>
</html>
Prof. Dr. Helmut Dispert
confirm()
Beispiel:
<html>
<head>
<title>Test</title>
<script language="JavaScript">
Check = confirm("Wollen Sie diese Seite wirklich sehen?");
if(Check == false) history.back();
</script>
</head>
<body>
</body>
</html>
Prof. Dr. Helmut Dispert
print()
Beispiel:
<html>
<head>
<title>Test</title>
</head>
<body>
<a href="javascript:window.print()">Diese Seite drucken</a>
</body>
</html>
Prof. Dr. Helmut Dispert
setTimeout()
Beispiel:
<html>
<head>
<title>Test</title>
<script language="JavaScript">
function Hinweis()
{
x = confirm("Sie sind jetzt schon 10 Minuten auf dieser Seite. Fortfahren?");
if(x == false) top.close();
}
window.setTimeout("Hinweis()",60000);
</script>
</head>
<body>
<a href="javascript:()">Text?</a>
</body>
</html>
Parameter: Code
Pause
Prof. Dr. Helmut Dispert
= Eine JavaScript-Anweisung, die wiederholt werden soll. Meistens ein Funktionsaufruf.
= Wert in Millisekunden bis zum Ausführen.
frames
Allgemeines zur Verwendung
Eigenschaft:
Length
Unterobjekte:
document
event
history
location
Prof. Dr. Helmut Dispert
Anzahl Frames
length
Beispiel:
<html>
<head>
<title>Test</title>
<script language="JavaScript">
for(i=0; i < parent.frames.length; ++i)
alert(parent.frames[i].name);
</script>
</head>
<body>
</body>
</html>
Prof. Dr. Helmut Dispert
document
Eigenschaften:
alinkColor
Farbe für Verweise beim Anklicken
bgColor
Hintergrundfarbe
charset
verwendeter Zeichensatz
cookie
beim Anwender speicherbare
Zeichenkette
defaultCharset normaler Zeichensatz
fgColor
Farbe für Text
lastModified
letzte Änderung am Dokument
linkColor
Farbe für Verweise
referrer
zuvor besuchte Seite
title
Titel der Datei
URL
URL-Adresse der Datei
VlinkColor
Farbe für Verweise zu besuchten Zielen
Methoden:
captureEvents() Ereignisse überwachen
close()
schließen
getSelection()
selektierter Text
handleEvent()
Ereignisse verarbeiten
open()
Dokument öffnen
releaseEvents()
Ereignisse abschließen
routeEvent()
Event-Handler-Hierarchie durchlaufen
write()
ins Dokumentfenster schreiben
writeln()
zeilenweise schreiben
Prof. Dr. Helmut Dispert
document
Unterobjekte:
all
anchors
applets
areas
embeds
forms
images
layers
links
plugins
Prof. Dr. Helmut Dispert
document: Allgemeines zur Verwendung
Beispiele:
x = document.title;
x = window.document.title;
Zweitfenster = window.open("datei2.htm",
"Fenster");
x = Zweitfenster.document.title;
y = parent.frames[2].document.bgColor;
document.write("Hallo Welt");
window.document.write("Hallo Welt");
Zweitfenster.document.close();
parent.frames[2].document.close();
Prof. Dr. Helmut Dispert
bgColor
Beispiel:
<html>
<head><title>Test</title>
<script language="JavaScript">
var X = new
Array("0","1","2","3","4","5","6","7","8","9",
"A","B","C","D","E","F");
var x1 = 0, x2 = 0;
for(i = 0; i < 255; ++i)
{
document.bgColor = X[x1] + X[x2] + X[x1] +
X[x2] + X[x1] + X[x2];
x2 = x2 + 1;
if(x2 % 16 == 0) { x2 = 0; x1 = x1 + 1; }
}
</script>
</head>
<body>
</body>
</html>
Prof. Dr. Helmut Dispert
Defining and Calling Functions
Beispiel 2: Ein script mit function und Kommentar.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- to hide script contents from old browsers
function square(i)
{
document.write
("The call passed ", i ," to the function.","<BR>")
return i * i
}
document.write
("The function returned ",square(5),".")
// end hiding contents from old browsers
</SCRIPT>
</HEAD>
<BODY>
<BR>
All done.
</BODY>
</HTML>
Beispiel 2: Ausgabe
The call passed 5 to the function.
The function returned 25.
All done.
Prof. Dr. Helmut Dispert
-->
functions
Beispiel 3: Ein script mit zwei functions.
<HTML>
<HEAD>
<SCRIPT>
<!--- hide script from old browsers
function bar()
{
document.write(" <HR ALIGN='left' WIDTH=25%>");
return
}
function output(head, level, string)
{
document.write("<H" + level + ">" + head + "</H"
+ level + "><P>" + string)
}
//* end hiding from old browsers -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
<!--- hide script from old browsers
bar();
output("Fettdruck (hervorgehoben)",3,"Normaldruck.");
bar();
//* end hiding from old browsers -->
</SCRIPT>
<P>
Vielen Dank!
</BODY>
</HTML>
Beispiel 2: Ausgabe
Fettdruck (hervorgehoben)
Normaldruck.
Vielen Dank!
Prof. Dr. Helmut Dispert
Vordefinierte JavaScript-Funktionen
<HTML>
<HEAD>
<TITLE>Bruttobetrag aus Nettobetrag errechnen</TITLE>
<SCRIPT language="JavaSCRIPT">
<!-function Simple()
{
var Ergebnis = eval("1+1");
alert("1 + 1 = " + Ergebnis);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javaSCRIPT:Simple()">Wieviel ist 1+1?</A>
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Vordefinierte JavaScript-Objekte
Rücksprung auf vorherige Seite durchführen:
<HTML>
<HEAD>
<TITLE>Back </TITLE>
</HEAD>
<BODY>
<A href="javascript:history.back();">Go Back</A>
</BODY>
</HTML>
Methode back() des Objekts history wird aufgerufen:
• Object: history
• method: back()
Prof. Dr. Helmut Dispert
Scripting Event Handlers
Syntax:
<TAG eventHandler="JavaScript Code">
Mit:
• TAG: HTML tag
• eventHandler: Name des event handler.
<INPUT TYPE="button" VALUE="Calculate"
onClick="compute(this.form)">
Events apply to HTML tags as follows:
• Focus, Blur, Change events:
text fields, textareas, and selections
• Click events:
buttons, radio buttons, checkboxes, submit buttons,
reset
• buttons, links
• Select events: text fields, textareas
• MouseOver event: links
• this.form
Prof. Dr. Helmut Dispert
Formular und Event Handler
Beispiel 4: script mit form und event handler
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function compute(form)
{
if (confirm("Sind Sie sicher?"))
form.result.value = eval(form.expr.value)
else
alert("Auf Wiedersehen")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
bitte Ausdruck eingeben:<BR>
<INPUT TYPE="text" NAME="expr" SIZE=15 >
<INPUT TYPE="button" VALUE="Berechnen"
ONCLICK="compute(this.form)"><BR><BR>
Result:<BR>
<INPUT TYPE="text" NAME="result" SIZE=15 >
<BR>
</FORM>
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Formular und Event Handler
Beispiel 4: Ausgabe
Prof. Dr. Helmut Dispert
JavaScript
Event-Handler
Event
Occurs when...
Event
Handler
blur
User removes input focus from form element
onBlur
click
User clicks on form element or link
onClick
change
User changes value of text, textarea, or select
element
onChange
focus
User gives form element input focus
onFocus
load
User loads the page in the Navigator
onLoad
mouseover
User moves mouse pointer over a link or
anchor
onMouseOver
select
User selects form element's input field
onSelect
submit
User submits a form
onSubmit
unload
User exits the page
onUnload
Prof. Dr. Helmut Dispert
JavaScript
Event-Handler
Event Handler
Auslösung
onAbort
beim Abbrechen
onBlur
beim Verlassen
onChange
bei geändertem Inhalt
onClick
beim Anklicken
onError
im Fehlerfall
onFocus
beim Positionieren
onLoad
beim Laden
onMouseOut
beim Nicht-mehr-Darüberfahren mit der Maus
onMouseOver
beim Darüberfahren mit der Maus
onReset
beim Löschen von Formulareingaben
onSelect
bei getroffener Auswahl
onSubmit
beim Absenden von Formulardaten
onUnload
beim Verlassen einer Datei
javascript
beim Anklicken eines Verweises
Syntax:
onAbort="..."
javascript:="..."
Prof. Dr. Helmut Dispert
cookie
Beispiel:
<html>
<head>
<title>Test</title>
<script language="JavaScript">
var gespeichert = "nichts gespeichert";
if(document.cookie)
gespeichert = document.cookie;
else
document.cookie = "Zeitstempel=" + document.lastModified;
alert(document.lastModified + " - " + gespeichert);
</script>
</head>
<body>
</body>
</html>
Prof. Dr. Helmut Dispert
fgColor (Textfarbe)
Beispiel:
<html>
<head>
<title>Test</title>
<script language="JavaScript">
if(parent.frames[0].document.fgColor == "000000")
document.fgColor = "FF0000";
</script>
</head>
<body>
</body>
</html>
linkColor (Linkfarbe)
document.linkColor = parent.frames[0].document.linkColor;
vlinkColor (Farbe des besuchten Links)
document.vlinkColor = parent.frames[0].document.vlinkColor;
Prof. Dr. Helmut Dispert
lastModified
Datum und Uhrzeit der letzten Änderung der Datei im internationalen Format (GMT).
Beispiel:
<html>
<head>
<title>Test</title>
</head>
<body>
<script language="JavaScript">
document.write("letzter Update: " + document.lastModified);
</script>
</body>
</html>
Prof. Dr. Helmut Dispert
write()
Gibt Text im Dokument aus. Erwartet eine Zeichenkette oder einen JavaScript-Ausdruck als Parameter.
Beispiel:
<html>
<head>
<title>Test</title>
</head>
<body>
<script language="JavaScript">
Name = prompt("Bitte Deinen Namen angeben:","Name");
document.write("Hallo " + Name);
</script>
</body>
</html>
writeln()
write() mit
Zeilenumbruchzeichen.
document.writeln("erste Zeile");
Prof. Dr. Helmut Dispert
Objektorientierte Programmierung
Java
Prof. Dr. Helmut Dispert
Objektorientierte Programmierung
globale Daten
Datenstrukturen
Funktionen
Funktionen
lokale Daten
Programmierung ohne OOP (C, Pascal)
globale Daten
Funktion A
lokale Daten
Objekt A
Datenstrukturen
Objekt B
Datenstrukturen
Funktion A
Funktion B
Funktion A
Funktion B
Objektdaten
Objektdaten
Objektdaten
Objektdaten
Programmierung in Hybrid OOP (C++)
Objekt A
Datenstrukturen
Objekt B
Datenstrukturen
Methode A
Methode B
Methode A
Methode B
Datenfeld
Datenfeld
Datenfeld
Datenfeld
Programmierung in reiner OOP (Java)
Prof. Dr. Helmut Dispert
Klassenhierarchie
Object
Vehicle
Car
Van
Prof. Dr. Helmut Dispert
Bike
Truck
Building
House
Office
Fundamentale Datentypen in Java
Datentyp
boolean
Bits default
1
false
char
16
0
byte
8
0
short
16
8
int
32
0
long
64
0
float
32
0.0
double
64
0.0
Prof. Dr. Helmut Dispert
Wertebereich
true
false
\u0000
\uFFFF
-128
+127
-32.768
+32.767
-2.147-483.648
+2.147-483.647
-9.223.372.036.854.775.808
+9.223.372.036.854.775.807
+/-3,40282347E+38
+/-1,40239846E-45
+/-1,79769313486231570E+308
+/-4,94065645841246544E-324
"Hello World" - Java-Programm
Quellcode:
public class hallow
{
public static void main (String[] args)
{
System.out.println("Hallo Welt");
}
}
Quelldatei:
hellow.java
Kompilierung:
javac -classpath c:\java\lib\classes.zip hellow.java
Ausführung des Bytecodes:
java hellow
Pfadangabe: z.B. \java\bin\
Prof. Dr. Helmut Dispert
Einfaches Java-Programm
class vardef
{
public static void main (String argv[])
{
int line =0;
int column =1;
int left =2,
top =3;
int width
=5,
height =6;
int steps[] = {91,92,93,94};
int playground[][]
= {
{0,1,0,1},
{1,0,1,0},
{0,1,0,1},
{1,0,1,0},
};
System.out.println(line);
System.out.println(column);
System.out.println(left);
System.out.println(top);
System.out.println(width);
System.out.println(height);
}
}
Prof. Dr. Helmut Dispert
Hypertext-Entwicklung
Vannevar Bush:
1890 - 1974
Juli 1945: "As We May Think"
(The Atlantic Monthly)
Memex, Vocoder.
Theodor (Ted) Holm Nelson:
1965:
1981:
"Hypertext"
"Xanadu" (hypertext database)
Tim Berners-Lee:
1990:
"World Wide Web"
(Proposal for a HyperText Project)
1994:
WWW-Konsortium (W3C)
Prof. Dr. Helmut Dispert
Informationsfluß im World Wide Web (WWW)
Server
T1, E1 Link
Internet Backbone
Browser mit
56k oder ISDN Link
Browser mit typischer
Telefonanbindung
Link
Prof. Dr. Helmut Dispert
Bit rate (Mbps)
T1 (DS1)
1,544
E1
2,048
Statische WWW Dokumente
1. Browser generiert Anforderung
(request)
Server
Browser
2. Server übergibt Dokument
Übergabe eines statischen Dokuments
1. Browser generiert Anforderung
(mouse click)
Server
Browser
4. Server übergibt Dokument
3. Imagemap Programm übergibt
neuen Request an Server
2. Server übergibt request
an imagemap Programm
Imagemap
Programm
Übergabe eines statischen Dokuments
mit Hilfe des Imagemap Prozesses
Prof. Dr. Helmut Dispert
Dynamische WWW Dokumente
1. Browser generiert Anforderung
Server
Browser
5. Server übergibt Dokument
4. Server stellt vollständiges
Dokument zusammen
2. Server liest Dokument (parsing)
und findet "include" Anweisung
include
Include Dokument
Hauptdokument
3. Server greift auf einzufügendes Dokument zu
Server Side Include Mechanismus
Prof. Dr. Helmut Dispert
Dynamische WWW Dokumente
1. Browser generiert Anforderung
Server
Browser
5. Server übergibt Dokument
4. CGI Programm gibt
neues Dokument aus
2. Server liest Dokument (parsing)
und findet "CGI" Anweisung
Disk Files
Datenbank
CGI
Programm
Meßinstrument
3. CGI Programm nutzt externe Hilfsmittel (Ressourcen)
"Common Gateway Interface" (CGI)
Prof. Dr. Helmut Dispert
Datenbanken im WWW
Java Applet
(Application)
Client Machine
JDBC
DBMS Protocol (e.g. ODBC)
DBMS
Database Server (SQL)
"Two-Tier" Modell
SQL:
Structured Query Language
ODBC: Open Database Connectivity
JDBC: Java Database Connectivity
Prof. Dr. Helmut Dispert
Datenbanken im WWW
Java Applet
(Application)
Client Machine (GUI)
HTML Browser
HTTP, RMI, or CORBA calls
Application
Server (Java)
JDBC
Server Machine
(Middle Tier)
DBMS Protocol (e.g. ODBC)
DBMS
Database Server (SQL)
"Three-Tier" Modell
Prof. Dr. Helmut Dispert
Stylesheets
CSS1 - Cascaded Style Sheets (Level 1)
Beispiel:
H2{
font-family: sans-serif;
font-size: 40px;
font-weight: bold;
text-align: right
}
<STYLE TYPE="text/css">
<!-BODY {background: url(ct.gif) white; color:black}
P {background: transparent; color: blue}
.bunt {background: lime; color: red}
-->
</STYLE>
CSS1-Eigenschaften:
Kategorien:
Prof. Dr. Helmut Dispert
'Font'
'Text'
'Farbe
'Hintergrund'
'Box'
'Klassifikation'
CSS1 Attributmenge
font:
font-family:
font-size:
font-weight:
font-style:
font-variant:
line-height:
(serif, sans-serif, cursiv, fantasy, monospace
('xx-small' ... 'xx-large'), 'larger',
'smaller', Prozent, absolute Angabe.
normal, bold (fett), bolder, lighter,
Wert zwischen 100 und 900 (normal = 400).
normal, italic, oblique
normal, small-caps (kapitalisierter Text)
absoluter Wert oder Prozentangabe
Text:
word-spacing:
letter-spacing:
text-align:
vertical-align:
text-decoration:
text-transform:
text-indent:
Größe der Wortzwischenräume;
Wert: 'normal' oder absoluter Wert,
der auf den Standardwert addiert wird.
Größe der Zeichenabstände;
Wert: 'normal' oder absoluter Wert,
der auf den Standardwert addiert wird.
horizontale Ausrichtung:
left, right, center, justify
vertikale Ausrichtung:
top, bottom, baseline, middle, sub, super,
text-top, text-bottom
none, underline, overline, line-through,
blink
capitalize, uppercase, lowercase, none
Einrückung der ersten Zeile eines
Textblocks
(absolute Länge oder Prozentangabe)
Farbe und Hintergrund:
color:
background:
Prof. Dr. Helmut Dispert
Farbe des Textes innerhalb eines Elements.
beschreibt den Hintergrund eines Elements.
(faßt die Attribute background-color,
background-image, background-repeat,
background-attachment sowie backgroundposition zusammen).
Klassen und Bezeichner
Klassen:
weitere Stildefinitionen für HTML-Elemente.
Syntax: Namen, der mit einem Punkt beginnt.
HTML-Code nimmt auf die betreffende Klasse Bezug:
<H1 CLASS=bunt> ...
Klassen lassen sich auch nur für einzelne HTML-Tags definieren:
Beispiel: Klasse, die nur für Absätze gültig sein soll:
P.bunt
ID-Attribut:
Stilvorlage wird ausschließlich an einer Stelle in einem HTMLDokument verwendet.
MyStyleSheet {
margin: 2px;
border: 1px;
}
ID-Attribut im Body sorgt für den Bezug:
<P ID=MyStyleSheet> ...
Prof. Dr. Helmut Dispert
Beispiel: Klasse
<HTML>
<HEAD>
<TITLE>Abstaende frei definieren</TITLE>
<STYLE TYPE="text/css">
.Head1 {
font-family: Arial, Helvetica;
font-weight: bold;
font-size: 20px;
margin-top: 10px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
.Head2 {
font-family: Arial, Helvetica;
font-weight: bold;
font-size: 16px;
margin-top: 10px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
.Text {
font-family: Arial, Helvetica;
font-weight: normal;
font-size: 12px;
margin-top: 3px;
margin-right: 0px;
margin-left: 50px;
margin-bottom: 0px;
}
</STYLE>
</HEAD>
Prof. Dr. Helmut Dispert
Beispiel: Klasse
cont.
<BODY>
<H2>Abstände frei definieren</H2>
<HR>
<P CLASS=Head1>Überschrift 1</P>
<P CLASS=Head2>Unterüberschrift 1.1</P>
<P CLASS=Text>
.
.
.
Fließtext.
.
.
.
</P>
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
Absolute Positionierung
<STYLE TYPE="text/css">
#MyGrafic {
position: absolute;
left: 40px;
top: 40px;
}
</STYLE>
<IMG SRC="Grafic.gif" ID=MyGrafic>
Positioniert Grafik.gif 40 Pixel unterhalb und 40 Pixel rechts
von der linken oberen Ecke der HTML-Seite.
Die frei positionierten HTML-Tags dürfen sich überlappen.
Ein Property namens z-index legt fest, welches Element dabei
welches verdeckt.
<HTML>
<HEAD>
<TITLE>HTML-Elemente absolut positionieren</TITLE>
<STYLE TYPE="text/css">
#pos1 {
position:absolute;
top: 150px;
left: 50px;
z-index: 1;
width: 80px;
}
#pos2 {
position:absolute;
top: 200px;
left: 100px;
z-index: 2;
width: 80px;
color: blue;
}
</STYLE>
Prof. Dr. Helmut Dispert
Absolute Positionierung
<STYLE TYPE="text/css">
#MyGrafic {
position: absolute;
left: 40px;
top: 40px;
}
</STYLE>
<IMG SRC="Grafic.gif" ID=MyGrafic>
<HTML>
<HEAD>
<TITLE>HTML-Elemente absolut positionieren</TITLE>
<STYLE TYPE="text/css">
#pos1 {
position:absolute;
top: 150px;
left: 50px;
z-index: 1;
width: 80px;
}
#pos2 {
position:absolute;
top: 200px;
left: 100px;
z-index: 2;
width: 80px;
color: blue;
}
</STYLE>
Prof. Dr. Helmut Dispert
Absolute Positionierung
cont.
</HEAD>
<BODY>
<H2>HTML-Elemente absolut positionieren</H2>
<DIV ID=pos1>
<IMG SRC="i1.gif">
.
.
Fließtext.
.
.
</DIV>
<DIV ID=pos2>
<IMG SRC="i2.gif">
.
.
Fließtext.
.
.
</DIV>
</BODY>
</HTML>
Prof. Dr. Helmut Dispert
<LINK>
<HEAD>
<LINK REL=stylesheet HREF="housestyle.css">
...
To define a cascade, you simply provide more than one LINK or
STYLE elements, e.g.
<LINK REL=stylesheet HREF="corporate.css">
<LINK REL=stylesheet HREF="techreport.css">
<STYLE TYPE="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
The elements are cascaded in the order they appear in the HEAD.
A cascade can include style sheets applicable to different
media. The user agent is then responsible to filtering out
those style sheets which are inapplicable to the current
situation.
<LINK
<LINK
<LINK
REL=stylesheet
MEDIA=print HREF="corporate-print.css">
REL=stylesheet
MEDIA=screen HREF="corporate-screen.css">
REL=stylesheet HREF="techreport.css">
<STYLE TYPE="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Prof. Dr. Helmut Dispert
<LINK>
<HEAD>
<LINK REL=stylesheet HREF="housestyle.css">
...
<LINK REL=stylesheet HREF="corporate.css">
<LINK REL=stylesheet HREF="techreport.css">
<STYLE TYPE="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
<LINK
<LINK
<LINK
REL=stylesheet
MEDIA=print HREF="corporate-print.css">
REL=stylesheet
MEDIA=screen HREF="corporate-screen.css">
REL=stylesheet HREF="techreport.css">
<STYLE TYPE="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Prof. Dr. Helmut Dispert
SoftQuad’s HoTMetal Pro 4.0
Prof. Dr. Helmut Dispert
Microsoft FrontPage
Prof. Dr. Helmut Dispert
HTML Buddy
Prof. Dr. Helmut Dispert
WebMania
Prof. Dr. Helmut Dispert