HTML - Fachhochschule Kiel

Transcription

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
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
Logical Link Control
Sublayer
Medium Access Control
Sublayer
Physical Layer
LLC
MAC
Menschen
Menschen
Telefon
Telefon
Vermittlung
Vermittlung
Kabel
Kommunikationsebenen
Menschen
virtuelle Verbindung
Menschen
Telefon
Telefon
Vermittlung
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.
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)
Transportorientierte Schichten
Aufgabe:
Steuerung der transportorientierten Aspekte.
4
3
2
1
Transport Layer
Network Layer
Data Link Layer
Physical Layer
Transportschicht
Netzschicht
Sicherungsschicht
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
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
Schicht 2
Trailer
Frame
Ende
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
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.
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.
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)
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)
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
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
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.
Schichtabhängige Bezeichnungen für die Datenpakete:
Schicht (Layer)
Bezeichnung
Message
Transportschicht
Segment
Netzwerkschicht
Datagramm
Sicherungsschicht
Frame
(Bits)
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
Bits
DT
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
Sublayers nach IEEE-802 Norm
2
2
1
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
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
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
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
TCP/IP-Übersicht
7
6
5
Anwenderprozeß
Anwenderprozeß
4
TCP
UDP
3
ICMP
2
1
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
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
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
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
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
(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
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.
IP-Adresse.
•
Portadresse:
Adresse innerhalb eines Hosts, wird einem
bestimmnten Dienstprogramm zugeordnet.
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.
ARPA-Hostname, NFS-Hostname.
•
Knotenname:
Symbolischer Name zur Definition eines Knotens.
Syntax: Knoten.Domäne.Organisation
Nicht zu verwechseln mit: FQDN (ARPA-Domänenname)
Leitwegbestimmung (Routing)
Netz 03
R
R
Netz 01
Netz 04
S
E
Netz 02
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
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
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
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:
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:
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
Client
SMTP
Server
SMTP
TCP/IP
Informationsprozess
Informationsproduzent
Informationsübermittlung
Informationsvermittler
Informationskonsument
Informationskanal
Client-Server Modell
Information Exchange
Client
Server
Client
Information
Anforderung
(request)
Client
Server
Hypermedia
Hypermedia
Hypermedia
Client
Client
internet
communication
information
server
Client
Hypermedia
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
Vannevar Bush
(1890-1974)
July 1945:
The Atlantic Monthly
As We May Think
Tim Berners-Lee
Hyper
•
Hypertext
•
Hypermedia
•
Hyperbook
•
Hyperformance
"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
InterNIC
Internet
Ad Hoc Comm.
Internet-Anbindung
FTP-Server
telnet
ftp
Internet
Internet-Benutzer
Internet-Wähl-Anbindung
FTP-Server
telnet
ftp
Internet
ISP
Internet-Benutzer
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").
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.
Hardwareebenen des Internets
Firmennetz
Campus
Ethernet
Router
Router
Router
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.
E-Mail (Electronic Mail)
Struktur der E-Mail Adresse:
User_ID@domain_name
@
"at"-Zeichen
(Klammeraffe)
Beispiele:
helmut.dispert@fh-Kiel.de
president@whitehouse.gov
Nicht am Internet:
z.B.: CompuServe:
Zahl1.Zahl2@compuserve.com
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)
Übertragung von Binärdaten
uuencode:
uudecode:
Kodierung der Binärdaten
Dekodierung der Binärdaten
MIME:
Multi-purpose Internet Mail Extensions
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
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
Ü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)
Ü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>
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>
NAME="method" VALUE="0" checked><TD>all<BR>
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>
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
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
→
~
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)
Suchmaschinen
META-Tag
<META NAME="description"
content="Kiel liegt in Schleswig-Holstein">
<META NAME="keywords"
content="Kiel, Fachhochschule,
Elektrotechnik">
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
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>
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
Client-Server Modell
Information Exchange
Client
Server
Client
Information
Anforderung
(request)
Client
Server
Hypermedia
Hypermedia
Client
Client
internet communication
information
server
Client
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
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
Frames
Dokument 2
Dokument 1
Dokument 4
Dokument 3
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
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
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
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
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>
...
Attribute
Vordergrundfarbe (Text):
<BODY TEXT
LINK
VLINK
ALINK
=
=
=
=
"farbe"
"farbe"
"farbe"
"farbe"
[= "#rrggbb"]
>
Hintergrundfarbe:
<BODY BGCOLOR = "farbe" [= "#rrggbb"] >
Hintergrundbild:
<BODY BACKGROUND = "datei.gif" >
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
Unsortierte Listen <UL> ... >/UL>
<UL>
<LI> Listenelement 1
...
<LI> Listenelement n
</UL>
Ausgabe:
• Listenelement 1
• Listenelement 2
...
• Listenelement n
Sortierte Listen <OL> ... >/OL>
<OL>
...
<LI> Listenelement n
</OL>
Ausgabe:
1. Listenelement 1
2. Listenelement 2
...
n. Listenelement n
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 ="...">
[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]
(mit Frames)
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
<FRAME>
<FRAME>
</FRAMESET>
<BODY>
..
.
Alternativer Text für
Browser ohne Frames
</BODY>
</HTML>
(mit Frames)
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
<FRAMESET>
<FRAME>
<FRAME>
</FRAMESET>
<FRAMESET>
<FRAME>
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
<BODY>
..
.
Alternativer Text für
Browser ohne Frames
</BODY>
</HTML>
(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%
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>
Targetfenster
Neues Fenster
Frameset beenden
Frameset beenden
Frames
<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="ftest.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
</FRAMESET>
</FRAMESET>
</HTML>
Frames (Beispiele)
<HTML>
<HEAD>
</HEAD>
<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"
<LI><STRONG><A HREF="../gen_data/termin_g.htm "
<LI><STRONG><A HREF="../gen_data/gen_da_g.htm"
</FONT>
</BODY>
</HTML>
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>
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
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">
<TR><TD>Passwort<TD><INPUT TYPE="PASSWORD" NAME="Password">
</TABLE>
</CENTER>
</FORM>
<HR>
<A HREF="xpintst_2.html">Nächste Seite</A>
</BODY>
</HTML>
Formulare
<HTML>
<HEAD>
</HEAD>
<BODY>
<HR>
<CENTER>
</CENTER>
<HR>
<BR>
<CENTER>
<TABLE>
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>
</FORM>
<TR><TD>
<H3>Beispiel einer Menüleiste:</H3>
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>
</FORM>
</TABLE>
</CENTER>
<HR>
</BODY>
</HTML>
Formulare
<HTML>
<HEAD>
</HEAD>
<BODY>
<HR>
<CENTER>
</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)">
</TABLE>
</CENTER>
</FORM>
<HR>
</BODY>
</HTML>
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);
}
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>

<BR>
Last modified: <BR>
Geändert am: <BR>
Letzte Änderung: <BR>
File Size: <BR>

</H3>
<HR>
</BODY>
</HTML>
Include-Datei:
<ADDRESS>
<BR>
Address:<BR>
Dr. Helmut Dispert<BR>
Fachhochschule Kiel<BR>
Fachbereich Elektrotechnik<BR>
</ADDRESS>
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
<!-#INCLUDE>
Dateiinhalt einfügen
FILE
Dokument
VIRTUAL
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
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>
Vorname
<INPUT NAME="VORNAME">
Hochschule
<INPUT TYPE="CHECKBOX" NAME="Auswahl"
VALUE="FH-KIEL" CHECKED>FH-Kiel
VALUE="FH-FLENSBURG">FH-Flensburg
VALUE="FH-HEIDE"> FH-Heide
Nachname
<INPUT NAME="NACHNAME">Abschicken
Straße <INPUT NAME="STRASSE">
<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
VALUE="1998">
1999
VALUE="1999">
Passwort
<INPUT TYPE="PASSWORD" NAME="Password">
</FORM>
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>
<TEXTAREA NAME="Meinung" COLS=60 ROWS=5
ALIGN=BOTTOM>
</TEXTAREA>
<INPUT TYPE="RESET" NAME="reset" VALUE="Neuer Text">
</FORM>
<FORM ACTION="http://www.e-technik.fh-kiel.de/cgibin/xpin/xpintest.cgi"
METHOD=POST>
<OPTION SELECTED VALUE="kiel"
MULTIPLE>Kiel</OPTION>
</SELECT>
</FORM>
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>
Frames
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="50%,50%">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
</FRAMESET>
</FRAMESET>
</HTML>
Frames
<HTML>
<HEAD>
</HEAD>
<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"
<LI><STRONG><A HREF="../gen_data/acad_c_g.htm"
<LI><STRONG><A HREF="../gen_data/termin_g.htm "
<LI><STRONG><A HREF="../gen_data/gen_da_g.htm"
</FONT>
</BODY>
</HTML>
Frames
Formulare
<HTML>
<HEAD>
</HEAD>
<BODY>
<HR>
<CENTER>
</CENTER>
<HR>
<BR>
METHOD=POST>
<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>
<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>
<TR><TD>Passwort<TD><INPUT TYPE="PASSWORD" NAME="Password">
</TABLE>
</CENTER>
</FORM>
<HR>
</BODY>
</HTML>
Formulare
<HTML>
<HEAD>
</HEAD>
<BODY>
<HR>
<CENTER>
</CENTER>
<HR>
<BR>
<CENTER>
<TABLE>
METHOD=POST>
<TR><TD COLSPAN=2>
<TR><TD COLSPAN=2>
<TEXTAREA NAME="Meinung" COLS=60 ROWS=5 ALIGN=BOTTOM>
</TEXTAREA>
<TR><TD>
<INPUT TYPE="RESET" NAME="reset" VALUE="Neuer Text"><TD>
</FORM>
<TR><TD>
METHOD=POST>
<OPTION SELECTED VALUE="kiel" MULTIPLE>Kiel</OPTION>
</SELECT><TD>
</FORM>
</TABLE>
</CENTER>
<HR>
</BODY>
</HTML>
Formulare
<HTML>
<HEAD>
</HEAD>
<BODY>
<HR>
<CENTER>
</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)">
</TABLE>
</CENTER>
</FORM>
<HR>
</BODY>
</HTML>
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);
}
Dokument vor Informationseingabe:
Dokument nach Informationseingabe:
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).
Dokument vor Informationseingabe:
Dokument nach Informationseingabe:
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
Formulare
CGI-Ausgabe
Ausgabe nach "Berechnen" und "Senden":
Eingabe=5%2B6*%2810%2F5%29&Ausgabe=17
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>

<BR>
Last modified: <BR>
Geändert am: <BR>
Letzte Änderung: <BR>
File Size: <BR>

</H3>
<HR>
</BODY>
</HTML>
Include-Datei:
<ADDRESS>
<BR>
Address:<BR>
Dr. Helmut Dispert<BR>
Fachhochschule Kiel<BR>
Fachbereich Elektrotechnik<BR>
</ADDRESS>
Ausgabe
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
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
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
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
JavaScript-Bereiche in HTML definieren
Beispiel:
<html>
<head>
<title>Test</title>
<script language="JavaScript">
<!-alert("Hallo Welt!");
//-->
</script>
</head>
<body>
</body></html>
JavaScript-Elemente in HTML-Tags
Beispiel:
<html>
<head>
<title>JavaScript-Test</title>
<!-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>
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);
}
JavaScripts in separaten Dateien
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);
}
Selbstvergebene Namen
Beispiel:
<html><head><title>Test</title>
<!-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;
}
/* Quadrat bilden */
/* i inkrementieren*/
Variablen definieren
Beispiel:
<html>
<head>
<title>Sinn des Lebens zum Quadrat</title>
<!-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>
Werte von Variablen ändern
Beispiel:
<html>
<head>
<title>Sinn des Lebens zum Quadrat</title>
<!-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>
Vordefinierte JavaScript-Objekte
Beispiel:
<html><head><title>Test</title>
<!-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>
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>
<!-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>
Objekteigenschaften
Beispiel:
<html>
<head>
<title>Browser des Anwenders auslesen</title>
<!-var BrowserName = navigator.appName;
var BrowserVersion = navigator.appVersion;
alert("Sie verwenden also den " + BrowserName
+ " in der Version "
+ BrowserVersion);
// -->
</script>
</head>
<body>
</body>
</html>
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>
Existenz eines Objektes überprüfen
Beispiel:
<html>
<head>
<title>Objekte abfagen</title>
<!-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>
Mehrere Anweisungen mit einem Objekt ausführen
(with)
Beispiel:
<html>
<head>
<title>Test</title></head>
<body>
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>
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>
Funktion aufrufen
Beispiel:
<html>
<head>
<title>Zahl auf Primzahl testen</title>
<!-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>
Funktion mit Rückgabewert
Beispiel:
<html>
<head>
<title>Bruttobetrag errechnen</title>
<!-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>
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
Vordefinierte JavaScript-Funktionen
Beispiel:
<html>
<head>
<title>Bruttobetrag errechnen</title>
<!-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>
Steuerzeichen bei Zeichenketten
Steuerzeichen können in den Variablenwert eingefügt
werden:
Beispiel:
<!-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:
<!-var a = 1E1;
var b = 1.2345E4;
var c = 2e-3;
// -->
</script>
Zuweisungsoperator
Beispiel:
<!-var X = 42;
// -->
</script>
Vergleichsoperatoren
Beispiel:
<!-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>
Berechnungsoperatoren
Beispiel:
<!-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>
Logische Operatoren
Beispiel:
<!-if(PLZ >= 80000 && PLZ <= 82000)
alert("Muenchen oder Umgebung!")
if(x > 100 || y == 0)
break;
// -->
</script>
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
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.
JavaScript
Beispiel
Beispiel 1: a simple script.
<HTML>
<HEAD>
document.write("Hello net.")
</SCRIPT>
</HEAD>
<BODY>
That's all, folks.
</BODY>
</HTML>
Beispiel 1: Ausgabe
Hello net. That's all folks.
Code Hiding
<SCRIPT>

</SCRIPT>
Operator zur Zeichenkettenverknüpfung
Beispiel:
<!-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:
, (Aneinanderreihung)
= += -= <<= >>= &= ^= |=
?: ( Entweder-Oder-Bedingung)
||
&&
|
^
&
== !=
< <= > >=
<< >> >>>
+ * / %
! ~ - ++ -() [] . (Klammerung und
Vektoren)
Bedingte Anweisungen "if"
Beispiel:
<html>
<head><title>TestUser</title>
<!-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>
Einfache Entweder-Oder-Abfrage
Beispiel:
<!-var x = (Antwort == "42") ? "Ja" : "Nein";
alert("Die Antwort lautet " + x + " !");
// -->
</script>
Fallunterscheidung mit "switch"
Beispiel:
<!-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>
Schleifen mit "while"
Beispiel:
<html>
<head>
<title>User checken</title>
<!-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>
Schleifen mit "for"
Beispiel:
<html>
<head><title>Test</title>
</head>
<body>
<!-for(i = 1; i <= 100; i++)
{
var x = i * i;
document.write("<br>Das Quadrat von "
+ i + " ist " + x);
// -->
</script>
</body>
</html>
"for-in"-Schleife
Beispiel:
<!-function Objekttest(Objekt, ObjName)
{
var Ergebnis = "";
for (var Eigenschaft in Objekt)
{
Ergebnis += ObjName + "." + Eigenschaft
+ " = " + Objekt[Eigenschaft]
+ "<br>";
}
return Ergebnis;
}
// -->
</script>
Schleifen mit "do-while"
Beispiel:
1: (Fußgesteuert)
<!-var x = 10;
do
{
document.write("<br>x * x = " + (x * x));
x = x + 1;
}
while(x < 10);
// -->
</script>
<p>
2: (Kopfgesteuert)
<!-var x = 10;
while(x < 10)
{
document.write("<br>x * x = " + (x * x));
x = x + 1;
}
// -->
</script>
Schleifenkontrolle - break und continue
Beispiel 1:
<!-var i = 0;
while (i < 6)
{
if (i == 3) break;
i++;
}
alert("i = " + i);
// -->
</script>
Beispiel 2:
<!-var i = 0;
while (i < 6)
{
Ende:
if (i == 3)
{
alert("Ende, i = " + i);
break Ende;
}
i++;
}
// -->
</script>
Schleifenkontrolle - break und continue
Beispiel 3:
<!-var i = 0, j = 0;
while (i < 6)
{
i++;
if (i == 3) continue;
j++;
}
alert("i = " + i + " und j = " + j);
</script>
Event-Handler
OnAbort
OnBlur
OnChange
OnClick
OnDblClick
OnError
OnFocus
OnKeydown
OnKeypress
OnKeyup
OnLoad
OnMousedown
OnMousemove
OnMouseout
OnMouseover
OnMouseUp
OnReset
OnSelect
OnSubmit
OnUnload
javascript:
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>
<body>
<img src="grafik.jpg" width=400 height=600
alt="Grafik"
onAbort="alert('Laden wurde unterbrochen')">
</body>
</html>
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>
<body>
<form name="Test">
Name: <input type=text name="Eingabe"
onBlur="TestInhalt(this.value)">
</form>
document.Test.Eingabe.focus();
function TestInhalt(Feld)
{
if(Feld == "")
{
alert("Feld muss einen Inhalt haben!");
document.Test.Eingabe.focus();
return false;
}
}
</script>
</body>
</html>
onChange (bei erfolgter Änderung)
Nach HTML 4.0 und JavaScript 1.2 (Netscape) erlaubt in
<input> <select> <textarea>
Beispiel:
<html>
</head>
<body>
<form name="Test">
<textarea rows=10 cols=40
onChange="alert(this.value)">
Ihr Kommentar!</textarea>
</body>
</html>
onClick (beim Anklicken)
<a> <area> <input> <textarea>
<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>
<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>
onDblClick (bei doppeltem Anklicken)
<a> <area> <input> <textarea>
<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>
<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>
onError (im Fehlerfall)
Nach JavaScript erlaubt in folgendem HTML-Tag:
<img>
Beispiel:
<html>
</head>
<body>
<img src="bild.gif"
onError="alert('keine Grafik')">
</body>
</html>
onFocus (beim Aktivieren)
<body> <frame> <input> <layer> <select> <textarea>
<a> <area> <button> <input> <label> <select>
<textarea>
Beispiel:
<html>
</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>
onLoad (beim Laden einer Datei)
Nach JavaScript (Netscape) und HTML 4.0 erlaubt
erlaubt in folgenden HTML-Tags:
<frameset> <body>
Beispiel:
<html>
<!-function NaviFenster()
{
Navigation = window.open("navigat.htm",
"Navigation","height=100,width=300");
Navigation.focus();
}
// -->
</script>
</head>
<body onLoad="NaviFenster()">
</body>
</html>
javascript: (bei Verweisen)
Kein Event-Handler im engeren Sinn!
<a> <area>
Beispiel:
<html>
</head>
<body>
<a href="javascript:
alert(document.lastModified)">
Letzter Update</a>
</body>
</html>
window
Eigenschaften:
closed
defaultStatus
innerHeight
innerWidth
locationbar
menubar
name
outerHeight
outerWidth
pageXOffset
pageYOffset
personalbar
scrollbars
statusbar
status
toolbar
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
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>
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>
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
Beispiel:
<html>
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>
name
Beispiel:
<html>
<head>
<title>Test</title>
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>
status
Beispiel:
</head><body>
<a href="datei.htm" onmouseover="status='Das ist ein Verweis';
</body></html>
alert()
<html>
<head>
</head>
<body>
</body>
</html>
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()
<html>
<head>
<title>Test</title>
Info = window.open("datei2.htm", "Zweitfenster");
</script>
</head>
<body>
<form>
<input type=button value="Fenster zu" onClick="Info.close()">
</form>
</body>
</html>
confirm()
Beispiel:
<html>
<head>
<title>Test</title>
Check = confirm("Wollen Sie diese Seite wirklich sehen?");
if(Check == false) history.back();
</script>
</head>
<body>
</body>
</html>
print()
Beispiel:
<html>
<head>
<title>Test</title>
</head>
<body>
<a href="javascript:window.print()">Diese Seite drucken</a>
</body>
</html>
setTimeout()
Beispiel:
<html>
<head>
<title>Test</title>
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
= 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
Anzahl Frames
length
Beispiel:
<html>
<head>
<title>Test</title>
for(i=0; i < parent.frames.length; ++i)
alert(parent.frames[i].name);
</script>
</head>
<body>
</body>
</html>
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
document
Unterobjekte:
all
anchors
applets
areas
embeds
forms
images
layers
links
plugins
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();
bgColor
Beispiel:
<html>
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>
Defining and Calling Functions
Beispiel 2: Ein script mit function und Kommentar.
<HTML>
<HEAD>

functions
Beispiel 3: Ein script mit zwei functions.
<HTML>
<HEAD>
<SCRIPT>

</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>

</SCRIPT>
<P>
Vielen Dank!
</BODY>
</HTML>
Beispiel 2: Ausgabe
Fettdruck (hervorgehoben)
Normaldruck.
Vielen Dank!
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>
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()
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
Formular und Event Handler
Beispiel 4: script mit form und event handler
<HTML>
<HEAD>
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>
Formular und Event Handler
Beispiel 4: Ausgabe
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
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:="..."
cookie
Beispiel:
<html>
<head>
<title>Test</title>
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>
fgColor (Textfarbe)
Beispiel:
<html>
<head>
<title>Test</title>
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;
lastModified
Datum und Uhrzeit der letzten Änderung der Datei im internationalen Format (GMT).
Beispiel:
<html>
<head>
<title>Test</title>
</head>
<body>
document.write("letzter Update: " + document.lastModified);
</script>
</body>
</html>
write()
Gibt Text im Dokument aus. Erwartet eine Zeichenkette oder einen JavaScript-Ausdruck als Parameter.
Beispiel:
<html>
<head>
<title>Test</title>
</head>
<body>
Name = prompt("Bitte Deinen Namen angeben:","Name");
document.write("Hallo " + Name);
</script>
</body>
</html>
writeln()
write() mit
Zeilenumbruchzeichen.
document.writeln("erste Zeile");
Objektorientierte Programmierung
Java
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)
Klassenhierarchie
Object
Vehicle
Car
Van
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
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\
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);
}
}
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)
Informationsfluß im World Wide Web (WWW)
Server
T1, E1 Link
Internet Backbone
Browser mit
56k oder ISDN Link
Browser mit typischer
Telefonanbindung
Link
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
(mouse click)
Server
Browser
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
Dynamische WWW Dokumente
Server
Browser
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
Dynamische WWW Dokumente
Server
Browser
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)
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
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
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:
'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:
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> ...
Beispiel: Klasse
<HTML>
<HEAD>
<TITLE>Abstaende frei definieren</TITLE>
.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-weight: bold;
font-size: 16px;
margin-top: 10px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
.Text {
font-weight: normal;
font-size: 12px;
margin-top: 3px;
margin-right: 0px;
margin-left: 50px;
margin-bottom: 0px;
}
</STYLE>
</HEAD>
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>
Absolute Positionierung
#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>
#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>
#MyGrafic {
position: absolute;
left: 40px;
top: 40px;
}
</STYLE>
<IMG SRC="Grafic.gif" ID=MyGrafic>
<HTML>
<HEAD>
<TITLE>HTML-Elemente absolut positionieren</TITLE>
#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>
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>
<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">
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>
<LINK>
<HEAD>
<LINK REL=stylesheet HREF="housestyle.css">
...
<LINK REL=stylesheet HREF="corporate.css">
<LINK REL=stylesheet HREF="techreport.css">
</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>
SoftQuad’s HoTMetal Pro 4.0
Microsoft FrontPage
HTML Buddy
WebMania

HTML - Fachhochschule Kiel

Transcription

Similar documents

JavaScript - Prof. Dr. Helmut Dispert

Bedienungsanleitung

windows 95 - Detlev Dalitz

Javascript

BALTIC LOGISTICS CONFERENCE

FAQ zu VR-Protect

1 x 1 der Kartenspiele

1 iAwake Technologies Wissenschaft Trifft Stille

MS-DOS Programmierhandbuch

baltic logistics conference

HTML Formulare / CGI / JavaScript / Perl

Qualifizierung und Personaleinsatz in der IT

beediennuungsanleituung deutssch

What`s new

Bedienungsanleitung

PDF

Mamba_Black_Handbuch 2009 200609

Einführung in die Programmierung mit Python und gtk

ballett dortmund Sponsoringkonzept 07/08

Beruhigungsmittel Pflanzliche und synthetische