Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
1
Kapitel 20:
Internet & WWW
Einführung in die InformatikWintersemester 2007/08
Prof. Bernhard Jung
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Übersicht
Aufbau und Dienste des InternetsEinführung in HTMLFortgeschrittene Themen: CSS und dynamische Web-SeitenGenerierung dynamischer Web-Seiten (mit Python)
Verarbeitung von Web-Formular-EingabenZugriff auf Datenbankinhalte
LiteraturGumm & Sommer. Einführung in die Informatik. Oldenbourg. 2004.Herold, Lurz, Wohlrab: Grundlagen der Informatik. 2006.
Online-Tutorials zu HTMLhttp://de.selfhtml.org/http://www.w3schools.com/tags/default.asp
Web-Server u. Datenbank Softwarehttp://www.apachefriends.org
2
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Was ist das Internet?
Das Internet besteht auseiner Vielzahl von Computern
die direkt oder indirekt miteinander verbunden sinddie dasselbe Übertragungsprotokoll verwenden (TCP/IP)auf denen Dienste angeboten und genutzt werden
Einer Vielzahl von Benutzern, die von ihrem beruflichen oder privaten Computerarbeitsplatz aus direkten Zugriff auf dieselben Dienste habeneiner Vielzahl weiterer Netze, die über Kommunikationscomputer (gateways) erreichbar sind
Nach: G. Schneider. Eine Einführung in das Internet. Informatik Spektrum, 18. 1995.
Bild: Database Management with Web Site Development Applications, Greg RiccardiAddison Wesley Publishing Company, 2003
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Statistik: Internet-Nutzer
Ingesamt über 1,4 Milliarden Nutzer (Stand November 2007)http://www.internetworldstats.com/
3
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Der Aufbau des Internets
dezentrale Struktur
Kommunikation durch Übertragungsprotokoll TCP/IPAufteilung der zu übermittelnden Daten in Pakete einheitlicher GrößePakete können auf verschiedenen Wegen (und zu verschiedenen Zeiten!) ihr Ziel erreichenJedes Paket enthält Kopfdaten über Absender- und ZielcomputerSpezielle Wegplanungscomputer in den Netzknoten ("Router") wählen die Teilstrecken der einzelnen Pakete aus Im Zielcomputer werden Pakete in der richtigen Reihenfolge zusammengesetzt (verloren gegangene Pakete werden neu angefordert)
Vorteile von TCP/IP (gegenüber durchgehender Leitung zw. Sender u. Empfänger wie z.B. Telefon):
Ausfall von Übertragungsstrecken kann kompensiert werdenGemeinsame Nutzung der Leitung durch viele Computersysteme möglich
Anbindung von Computernetzen, die nicht TCP/IP verwenden über Gateways
Bild: howstuffworks.com
siehe auch: http://computer.howstuffworks.com/internet-infrastructure.htm
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Die Adressierung im Internet
Jedes Computersystem im Internet besitzt eindeutige IP-AdresseIP-Adresse besteht aus 4 Bytes
Schreibweise dezimal (0…255), durch Punkte getrenntz.B. alle Rechner der TU Freiberg mit IP-Adressen der Form 139.20.x.x
Zusätzlich (besser merkbare) symbolische Domain-Namenz.B. www.informatik.tu-freiberg.de.de ist ein Beispiel für Top-Level Domain
DNS = Domain Name SystemAbbildung der symbolischen Namen auf IP-Adressen über spezielle Nameserver
4
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Dienste im Internet
wichtigste DiensteE-MailNewsgroupsChat / Instant messagingDateien übertragen im Internet (ftp, sftp, ..)Fernbenutzung von Computersystemen (telnet, ssh)Internet-TelefonieWWW
Dienste benutzen i.a. eigene, auf TCP/IP aufsetzende Protokolle (z.B. http, smtp, VoIP…)
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
TCP/IP-Protokollstapel
Gliederung der Kommunikationsaufgaben in Netzwerken in vier funktionale Schichten: Anwendungsschicht (application layer)
Die Anwendungsschicht umfasst alle Protokolle, die mit Anwendungsprogrammen zusammenarbeiten und die Netzwerkinfrastruktur für den Austausch anwendungsspezifischer Daten nutzen.
Transportschicht (transport layer)stellt eine Ende-zu-Ende-Verbindung her
Vermittlungsschicht (internet layer)Aufgabe dieser Schicht ist es, zu einem empfangenen Paket das nächste Zwischenziel zu ermitteln und das Paket dorthin weiterzuleiten
Netzzugangsschicht (network access)als Platzhalter für verschiedene Techniken zur Datenübertragung von Punkt zu Punkt zu verstehenkann die Host-an-Netz-Schicht durch Protokolle wie Ethernet, FDDI, PPP (Punkt-zu-Punkt-Verbindung) oder 802.11 (WLAN) ausgefüllt werden
BeispieleTCP/IP-Schicht
Ethernet, Token Ring, FDDI
Netzzugangsschicht
IPv4, IPv6Vermittlungsschicht
TCP, UDPTransportschicht
HTTP, FTP, SMTP, POP3
Anwendungsschicht
5
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
WWW
World Wide Web: Hypertextbasiertes, hypermediales, verteiltes Informationssystem im Internet
"multimedialer Teil des Internets"Protokoll: HTTP (HyperText Transfer Protokoll)Komponenten: Web-Server und Web-ClientsArbeitsweise: Server verwalten Hypertext- / Hypermedia-Dokumente mit Texten, multimedialen Objekten und Verweisen auf andere Dokumente unter eindeutigen Adressen.Clients können mit Browsern Dokumente anzeigen, aktivieren und Verweise verfolgen
...FDDIToken
RingTokenBusEthernetNetz-Zugang
IP (IPv4, IPv6)Internet
TCPTransport
HTTPAnwendung
HTTP im TCP/IP-Protokollstapel
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
WWW
Web-BrowserFormatierung und Anzeige von Web-(HTML-) SeitenAnfrage von Web-Seiten bei Web-Server (request)z.B. Internet Explorer, Mozilla Firefox, Opera, …
Web ServerSendet Web-Seiten an Browser (response)Web Server Software z.B. Apache, Microsoft IIS
Kommunikation zwischen Web-Browser und Server mittels HTTP (hypertext transfer protocol; baut auf TCP/IP auf)
http://www.web4data.com/index.html
www.web4data.com
<html><head>... </html>
Files
<html><head>... </html>
/index.html
WebServer
WebBrowser
Request frombrowser forWeb page
HTMLdocument onits way to the
browser
HTMLdocument
stored in a file
FileName
Servername
Bild: Database Management with Web Site Development Applications, Greg RiccardiAddison Wesley Publishing Company, 2003
6
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Statistik: Web Server Software
Marktanteile Web-Server Software, August 1995 - Dezember 2007 Bild: http://news.netcraft.com/archives/web_server_survey.html
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
HTML - Einführung
HyperText Markup LanguageSprache zur Beschreibung von Struktur- und Layout-Aspekten digitaler Dokumente (dargestellt durch 'Browser')Mechanismen zur Verweis auf andere digitale Dokumente (HTML-Seiten, Bilder, Video, Audio) mittels Hyperlinks
Hintergrund zu HTMLentwickelt in 1980er Jahre von Tim Berners-Lee am CERN1993: erster grafischer Web-Browser (genannt "Mosaic")HTML ist ein internationaler Standard des World Wide Web Consortiums (W3C)Aktuelle Version of HTML http://www.w3.org/TR/html
derzeit aktuell: XHTML 1.0 (Reformulierung von HMTL 4 in XML)
W3C-Standards können gebührenfrei benutzt werden Designziel von HTML: lesbar für Computer und Menschen
Sir Tim Berners-LeeBild: Wikipedia
7
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Beispiel: Eine einfache HTML-Seite
Text-Datei 'Seite_01.html'dargestellt in Microsoft-Editor
Dieselbe Datei dargestellt imFirefox Web-Browser
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Erklärung des Beispiels
<html><head><title>Meine kleine Web-Seite</title>
</head><body><h1>Diese Web-Seite ist sehr kurz</h1><p>Aber <i>immerhin</i> gibt es einen<a href="http://www.google.de">Link zu Google</a> </p></body></html>
8
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Struktur von HTML-Dokumenten
HTML-Dokumente werden aufgebaut mittels Elementen ("Tags"), Attributen und Verschachtelung
Element mit Text: <tagname attr=“value” >text</tagname><title>Meine kleine Web-Seite</title><a href="http://www.tu-freiberg.de">TU Bergakademie Freiberg</a>
Element ohne Text: <tagname attr=“value” /><img src="unilogo.gif" alt="TU Bergakademie Freiberg “/>
Verschachtelte Elemente: <tag1><tag2></tag2><tag3></tag3></tag1>Öffnende und schließende Elemente <tag1> … </tag1> Nicht weiter verschachtelbare Elemente können gleichzeitig geöffnet und geschlossen werden, z.B. <br/>, <p/>Schließende Elemente (früher) nicht immer verlangt: <tag1><tag2></tag1>
i.a. (noch) toleriert von BrowsernVerwendung schließender Elemente ist immer möglich und guter Stil
Aktuelle Spezifikation (XHTML) erfordert Schließen aller Elemente
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Einfache HTML Tags
Überschriften unterschiedlicher Größe<h1>This is an h1 header</h1><h2>This is an h2 header</h2><h3>This is an h3 header</h3><h4>This is an h4 header</h4><h5>This is an h5 header</h5><h6>This is an h6 header</h6>Text-Formatierung<center>This text is centered</center><b>This is bold</b><br/><i>This is italic</i>Horizontale Trennlinie (Ruler)<hr> or <hr/>Zeilenumbrüche (Line Breaks)<br> or <br/>
basic.html
9
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Weitere HTML Elemente
<img src="silly.gif" height=100 width=100 >
Image
<a href="http://www.no.org/andy"> Andy's Home page</a>
Hyperlink /Anchor tag
<ul>
<li>alpha</li><li>beta</li><li>charlie</li>
</ul>
UnorderedList
<ol><li>alpha</li><li>beta</li><li>charlie</li>
</ol>
OrderedList
more.html
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Tabellen in HTML<html><body>
<table border = 1><tr><th></th><th>Essen 1</th> <th>Essen 2</th> <th>Essen 3</th> <th>Essen 4</th>
</tr>
<tr><th>Montag</th><td>Schnitzel</td><td>Lammsteak</td><td>Huhn</td><td>Pizza</td>
</tr>
<tr><th>Dienstag</th><td>Geschnetzeltes</td><td>Hacksteak</td><td>Klops</td><td>Scholle</td>
</tr></table>
</body></html>
• <table>• definiert Tabelle
• <tr>• definiert Tabellenzeile
• <th>• definiert Tabellenkopf (in fett)
• <td>• definiert Tabellenzelle
10
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Hyperlinks & URLs (Uniform Resource Locators)
Verweis auf andere digitale Objekte (HTML-Dokumente, Video-, Audio-, Bilddateien, …) anchor tag <a href=url> hyperlink text </a>
Absoluter URL href=“http://www.no.org/ia/somepage.html“
Relativer URL beginnend mit /href="/someotherpage.html"verweist auf Dokument relativ zu Wurzelverzeichnis des Web-Serversvollständiger URL entsteht durch Präfixe für Protokoll (http) und Web-Server (www.no.org)
http://www.no.org/someotherpage.html
Relativer URL nicht beginnend mit /href="someotherpage.html"verweist auf Dokument relativ zum Verzeichnis der aktuellen Seitevollständiger URL entsteht durch Anfügen des relativen URLs an Basis-URL
z.B. Hyperlink erscheint in Web-Seite im Verzeichnis data des Servers www.no.org:http://www.no.org/data/someotherpage.html
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Auswahl von HTML-Elementen
Bild<img>
List item<li>
Geordnete (nummerierte) Liste<ol>
Ungeordnete Liste<ul>
Tabellenzelle (table data)<td>
Tabellenzeile (table row)<tr>
Tabelle<table>
Hyperlink (anchor)<a>
Horizontale Trennlinie (horizontal rule)<hr> oder <hr/>
Zeilenumbruch (line break) <br> oder <br/>
Paragraph<p> oder <p/>
Überschriften 1. bis 6. Ordnung<h1> bis <h6>
Körper des HTML-Dokuments<body>
HTML-Dokument<html>
BeschreibungHTML-Element
Bem: XHTML definiert über 80 Elemente
11
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Innovation
Time "Person of the Year 2006"
Internetnutzer
"Yes, you. You control the Information Age. Welcome to your world."
"creators and consumers of user-generated content are transforming art and politics and commerce"
"Web 2.0"Begriff eingeführt 2005
"What is Web 2.0" von Tim O’Reillyhttp://www.oreilly.de/artikel/web20.html
Bereitstellung von Medieninhalten durch "normale" Internetnutzerz.B. blogs, youtube, flickr, myspace, …siehe: http://de.wikipedia.org/wiki/Web_2.0
www.time.com
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Cascading Style Sheets (CSS)
HTML enthält Elemente zur Definition des Inhalts und des Layouts von Web-SeitenCSS ist Sprache zur Definition von Formateigenschaften einzelner HTML-ElementeVerwendung von CSS unterstützt Trennung von Inhalt und Layout von Web-Seiten (Web-Site Editoren vs. Designer)Vereinfachte Umstellung des Designs von Web-Sites
<h2 align="center"><font color="red" size="+4"face="Times New Roman, serif"><em>Verwendung von CSS</em></font></h2>
HTML-Layout ohne CSS
<h2>Verwendung von CSS</h2>
HTML-Layout mit CSS
h2 {text-align: center;color: red;font: italic large "Times New Roman", serif;}
CSS Layout Definition (eingebettet oder extern)
12
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Mächtigkeit von CSS
http://www.csszengarden.com/alle Seiten verwenden identischen HTML-Code (Inhalt)aber unterschiedliche CSS-Definitionen
Gleiches HTML
CSS Stylesheet 2
CSS Stylesheet 1
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Dynamische Web-Seiten
Wozu?Verarbeitung von BenutzereingabenAnbindung von Datenbanken statische HTML-Seiten nicht genug; benötigt wird Programmausführung
Programmausführung auf dem Server (server side scripting)oft benutzte Programmiersprachen z.B. PHP, Java, PythonEinbettung der Programm-Skripte in HTML-Seiten oder Ausführung von CGI (Common Gateway Interface) Skripten, die HTML-Seiten erzeugen
Programmausführung beim Client (client side scripting)Laden von Programmen vom Server und Ausführung beim Clientz.Tl. als Sicherheitsrisiko betrachtetz.B. Javascriptz.B. Java Applets
13
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Architektur statischer Web-Seiten
HTML-Seiten im Datei-System des Web-Servers gespeichert
http://www.web4data.com/index.html
www.web4data.com
<html><head>... </html>
Files
<html><head>... </html>
/index.html
WebServer
WebBrowser
Request frombrowser forWeb page
HTMLdocument onits way to the
browser
HTMLdocument
stored in a file
FileName
Servername
Bild: Database Management with Web Site Development Applications, Greg RiccardiAddison Wesley Publishing Company, 2003
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Dynamische Web-Seiten
Eingabe-Formulare
Inhalte z.Tl. ausDatenbankgeneriert
14
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Architektur dynamischer Web-Seiten
Formulareingaben in Web-Browser triggern Ausführung von Anwendungsprogrammen (z.B. geschrieben in Python) auf Server:
Verarbeitung von Benutzer-EingabenZugriff auf Datenbank-Inhalte
Ausgabe der Anwendungsprogramme ist HTML-Code
Bild: Database Management with Web Site Development Applications, Greg RiccardiAddison Wesley Publishing Company, 2003
Web browser
Files
Browser computer Web server computer
Httpserver
2. Browsercollects data andsends request toWeb server
4. Applicationprocessor fetchesprogram from file
1: Userenters dataand clicks abutton
7. Browser formatsHTML document anddisplays it.
WebApplicationprocessor
6. Application programprocesses data andgenerates new HTMLdocument
3. Web serversends request toWeb applicationprocessor
Applicationprogram
5. Application programbegins execution andreads user data
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Generierung dynamischer Web-Seiten
Wozu?Verarbeitung von BenutzereingabenAnbindung von Datenbanken
Programmausführung auf dem Server (server side scripting)oft benutzte Programmiersprachen z.B. PHP, Perl, Java, (Python)Einbettung der Programm-Skripte in HTML-Seiten, oderrAusführung von CGI (Common Gateway Interface)-Skripten, die HTML-Seiten erzeugen
Im folgenden:Server Side Scripting mit Python "Python Server Pages (PSP)"
Einbettung von Python-Code in HTML-Seitenähnlich zu Java Server Pages (JSP), Microsoft Active Server Pages (ASP), PHP
CGI-SkriptBenutzte Umgebung: Xampp von www.apachefriends.org
Apache Web Server, MySQL Datenbank, PSPalles Open Source
15
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Generierung dynamischer Web-Seiten (1)HTML-Seite mit Login-Formular
<html><head><link href="design.css"
rel="stylesheet" type="text/css"><body>
<h1>Login-Formular</h1><hr>
<form action="process.psp" method="POST" >Eingabe Name: <input type="text" name="username" /> Eingabe Passwort: <input type="password" name="passwd" /> <input type="submit" value="login" />
</form><p/>Hinweis: Passwort ist "TU-BAF"
</body></html>
Formular mit benanntenEingabefeldern, Name 'process.php' der Datei, die Eingabedaten verarbeiten soll
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Generierung dynamischer Web-Seiten (2)Python-Server Page zur Verarbeitung der Login-Eingaben
<html><head><link href="design.css" rel="stylesheet" type="text/css">
<body><h1>Login-Verarbeitung</h1><hr><p/><%if form['passwd'] == 'TU-BAF':
print >> req, 'Willkommen, ', form['username']print >> req, ', dein Passwort war richtig'
else:print >> req, 'Login fehlgeschlagen', '<p/>'print >> req, 'Hinweis: Passwort ist "TU-BAF"'
%><hr/></body></html>
Eingebettetes Python Skript
Einbettung in HTML-Code mittels <% …%>
Zugriff auf Formulardaten über Namen der Eingabefelder
Ausgaben mittels print >> reqin zurückgeliefertes HTML (req ist in PSP vordefinierte Variable, 'Request-Handler')
process.psp
16
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Generierung dynamischer Web-Seiten (3)Zugriff auf Datenbanken mit Python
SchritteVerbindung zu Datenbank aufbauenSQL-Anfrage an Datenbank-Server schickenVerarbeitung der zurück gelieferten Ergebnistabelle
Dazu: Import und Verwendung von Funktionen des Moduls MySQLdb
Web server computer
Application Program
Database Server Computer
Database Server
ConnectionObject Database
SQL Query
Result ofQuery
SQL Statements
Results
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Generierung dynamischer Web-Seiten (4)Python-Server Page mit Zugriff auf Datenbank
<h1> Unsere Universität</h1>(demonstriert Datenbank-Zugriff mit Python Server Pages)<p/><hr><h3>Unsere Studenten</h3><%import MySQLdb
db = MySQLdb.connect(host="localhost", user="user1", passwd="", db="universitaet")
cursor = db.cursor()cursor.execute("SELECT name FROM studentORDER BY name")result = cursor.fetchall()
for record in result:print >> req, record[0]print >> req, '<br/>'
%>db.psp
17
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Generierung dynamischer Web-Seiten: CGI-Skripte
CGI-SkriptProgramm auf Web-Server, das u.a. HTML-Dokumente generieren kannlänger bestehende Variante, Webseiten dynamisch bzw. interaktiv zu machen, die erstmals 1993 angedacht wurde.Skript oft in Perl, aber beliebige Programmiersprachen möglichCGI = Common Gateway Interface
Aufruf wie "normales" HTML-Dokument über URLz.B. http//www.example.net/cgi-bin/test.pyKonvention: CGI-Skripte im Verzeichnis "cgi-bin" auf Web-Servererste Ausgabezeile sollte Type des Dokuments angeben (HTTP-Header), z.B.: Content-type: text/html
Diskussion+ einfache Technologie, viele Programmiersprachen möglich- wenig effizient, da für jeden Aufruf ein neuer Prozess gestartet werden mussheute weniger gebräuchlich
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Generierung dynamischer Web-Seiten: CGI-Skripte
#!C:\python25\python.exeprint "Content-type: text/html\n"
from time import localtimez = localtime()
print "<html><head></head><body>"print "<h1>Die aktuelle Zeit</h1>" print "Es ist", z[3], "Uhr und", z[4], "Minuten"
print "</body></html>"
Ausführung in IDLE Aufruf über Web-Server
time.py
18
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Javascript
objektbasierte Skriptspracheüberwiegend eingesetzt in Web-Browsern
JavaScript-Code wird vom Web-Server an Browser geschickt …… und im Browser ausgeführt"client side scripting"mittlerweile auch verwendet in interaktive PDF-Dokumenten
Typische Anwendungen von JavaScriptPlausibilitätsprüfung von Formulareingaben vor dem Absenden Rollover-Grafiken, die beim Überfahren mit der Maus wechseln Banner oder Laufschriften dynamische Manipulation von Webseiten Senden und Empfangen von Daten, ohne dass der Browser die Seite neu laden muss (z.B. automatisches Nachladen von Kartenausschnitten in Google Maps)
weitere Informationen http://de.selfhtml.org/javascript/ , http://de.wikipedia.org/wiki/Javascript
Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg
Überprüfung von Formulareingaben mit JavaScript<html><head><link href="design.css" rel="stylesheet" type="text/css"><script type="text/javascript">function chkFormular () {if (document.userdata.username.value == "") {
alert("Bitte Ihren Namen eingeben!");document.userdata.username.focus();return false;
}if (document.userdata.age.value == "") {
alert("Bitte Ihr Alter eingeben!");document.userdata.age.focus();return false;
}for (i = 0; i < document.userdata.age.value.length; ++i)if (document.userdata.age.value.charAt(i) < "0" ||
document.userdata.age.value.charAt(i) > "9") {alert("Altersangabe keine Zahl!");document.userdata.age.focus();return false;
}}</script></head>
<body><h1>Bitte Daten eingeben</h1><hr><form name="userdata" action="process2.psp"
method="GET" onsubmit="return chkFormular()"><pre>Eingabe Name: <input type="text" name="username" /> Eingabe Alter: <input type="text" name="age" />
<input type="submit" value="abschicken" /></pre></form></body></html>
Feld darf nicht leer sein
Altersangabe muss aus Ziffern bestehen