Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.
-
Upload
elisa-dustman -
Category
Documents
-
view
106 -
download
1
Transcript of Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.
![Page 1: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/1.jpg)
Computer AG
Schiller-Gymnasium
Witten
Thomas SchmidtJanuar 2008
![Page 2: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/2.jpg)
Ziele der Computer-AG
• HTTP
• HTML
• JavaScript
• PHP
![Page 3: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/3.jpg)
HTTP
![Page 4: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/4.jpg)
HTTP-Server
z.B: Apache,
z.B. Internet Information Server
HTML-Dateien
www.schiller-witten.de
HTTP - Browser und Server
http:
Protokoll
//www.schiller-witten.de
Server
/index.html
Datei
Hallo WeltIch bin eine Web-Seite
![Page 5: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/5.jpg)
Zum Erlernen vom HTML arbeiten wir zunächst ohne HTTP Server
Lokale Festplatte
HTML-Dateien
C:\
meine-html-dateien
Arbeiten ohne HTTP-Server
file:/// c:/meine-html-dateien/ index.html
Hallo WeltIch bin eine Web-Seite von der lokalen Platte
![Page 6: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/6.jpg)
HTTP - Zusammenfassung
• HTTP ist ein Protokoll, mit dem HTML-Dateien im Internet transportiert werden
• Zunächst arbeiten wir ohne HTTP auf der lokalen Platte
• Später - im Zusammenhang mit PHP - kommen wir auf HTTP zurück
![Page 7: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/7.jpg)
HTML
![Page 8: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/8.jpg)
HTML - Grundlagen - Kennung
• Eine HTML-Datei beginnt immer mit einer HTML-Kennung
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
![Page 9: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/9.jpg)
HTML - Grundlagen - Tags
• Eine HTML-Datei beginnt immer mit einer HTML-Kennung
• Alle Informationen werden in Form sogenannter „Tags“ abgelegt
<tag> ... </tag>
![Page 10: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/10.jpg)
HTML - Grundlagen - <html>
• Eine HTML-Datei beginnt immer mit einer HTML-Kennung
• Alle Informationen werden in Form sogenannter „Tags“ abgelegt
• Die gesamte HTML-Seite ist in das Tag-Paar <html> ... </html> eingefasst
<html> hier stehen alle Informationen der Seite...</html>
![Page 11: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/11.jpg)
HTML - Grundlagen - <body> und <head>
• Eine HTML-Datei beginnt immer mit einer HTML-Kennung
• Alle Informationen werden in Form sogenannter „Tags“ abgelegt
• Die gesamte HTML-Seite ist in das Tag-Paar <html> ... </html> eingefasst
• Jede Seite verfügt mindestens über die Tags <head> und <body>
<html> <head> ... Kopfinformation ... </head> <body> ... Seiteninformation ... </body></html>
![Page 12: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/12.jpg)
HTML - Grundlagen - Dateiumbruch
• Eine HTML-Datei beginnt immer mit einer HTML-Kennung
• Alle Informationen werden in Form sogenannter „Tags“ abgelegt
• Die gesamte HTML-Seite ist in das Tag-Paar <html> ... </html> eingefasst
• Jede Seite verfügt mindestens über die Tags <head> und <body>
• Zeilen haben keine Bedeutung – sie dienen nur der Lesbarkeit
<html><head>...</head><body>...</body></html>
ist gleichbedeutend mit
<html> <head> ... </head> <body> ... </body></html>
![Page 13: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/13.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>Meine erste Seite</title> </head> <body> <h1>Überschrift</h1> Hier sehen wir den Text der ersten Webseite. </body></html>
Beispiel
![Page 14: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/14.jpg)
Werkzeuge zur Erstellung von HTML-Seiten
• Zeileneditoren
• Anwendungen mit einer grafischen Oberfläche
• HTML Editoren
HTML-Kit
![Page 15: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/15.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Meine erste Seite</title> </head> <body> <h1>Überschrift</h1> Hier sehen wir den Text der ersten Webseite. </body></html>
Beispiel: Meine erste Seite
![Page 16: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/16.jpg)
<body>
<h1>Bellum civile (Julius Caesar)</h1> <p> Anno 50, Pompeius ei pro consule exeunti ut Romam rediret et copias dimitteret imperavit. Senatus praeterea ei consulatum secundum in absentia petere interdixit. </p>
<p>Caesar cognovit se accusatum iri si Romam sine immunitate consulari aut viribus legionum rediisset. Senatum prohibuit quin pararet, fines Italiae per Rubiconem 10 Ianuarii anno 49 traiciendo, dicens alea iacta est.</p>
</body>
HTML - Absätze
![Page 17: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/17.jpg)
<body> <h1>Zutaten für Zabajone</h1> <ul> <li>Marsala (Italienischer Süßwein)</li> <li>Eier</li> <li>Zucker</li> </ul> </body>
HTML - Listen
![Page 18: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/18.jpg)
<body> <h1>Hervorhebungen im Text</h1> <ul> <li>Dieser Text ist <u>unterstrichen</u></li> <li>Dieser Text ist <b>fett</b></li> <li>Dieser Text ist <i>kursiv</i></li> <li>Dieser Text ist <i><u><b>alles</b></u></i></li> </ul> </body>
HTML - Hervorhebungen
![Page 19: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/19.jpg)
<body> <h1>Bilder anzeigen</h1> <p> Außer Text kann ein Browser natürlich auch Bilder anzeigen. Bilder sind rechteckige Gebilde, die sich beim Formatieren wie große Buchstaben verhalten. Folgendes Bild zeigt eine Möhre: </p>
<img src=“moehre.jpg“> </body>
HTML - Bilder
![Page 20: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/20.jpg)
<body> <img src="moehre.jpg"> <img src="moehre.jpg" title="Ich bin ein Tooltip"> <img src="moehre.jpg" title="Ich bin ein Tooltip" alt="Zeig mich wenn kein Bild da ist"> </body>
HTML - Tags mit Attributen
• Nahezu alle <Tags> können Attribute haben
• Attribute haben immer die Form: Name="Text "
• Mehrere Attribute trennt man durch Leerzeichen oder White-Space-Zeichen
• Fehlerhafte Attribute werden ignoriert
• Attribute die auf mehrere Tags anwendbar sind, heißen Universalattribute
![Page 22: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/22.jpg)
Styles
![Page 23: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/23.jpg)
HTML - Styles
• Schriften
• Farben
• Optische Gestaltung
• Positionierung
Styles dienen der optischen Gestaltung von Seiten
Styles haben keinen Einfluss auf Inhalte und Funktionen!
![Page 24: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/24.jpg)
<body style="background-color:yellow"> ... </body>
HTML - Styles - Hintergrundfarbe
![Page 25: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/25.jpg)
<body style="font-family:arial"> ... </body>
HTML - Styles - Schriftfamilien
![Page 26: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/26.jpg)
<body style="font-family:arial; font-size:30px"> ... </body>
HTML - Styles - Schriftgrößen
![Page 27: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/27.jpg)
<body style="font-family:arial; color:blue"> ... </body>
HTML - Styles - Schriftfarbe
![Page 28: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/28.jpg)
HTML - Styles - Syntax
• Styles werden als Attribut <tag style="...... "> formuliert
• Jeder einzelne Style hat die Form: typ:wert
• Mehrere Styles werden durch Semikola getrennt
Beispiel:
<body style="font-family:arial; color:blue">
![Page 29: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/29.jpg)
<body style="font-family: arial; color: white; background-image: url(moehre.jpg)"> ... </body>
HTML - Styles - Hintergrundbilder
![Page 30: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/30.jpg)
<body style="background-image: url(moehre.jpg); background-repeat: repeat-x"> ... </body>
HTML - Styles - Bildwiederholung
repeat in beiden Richtungen wiederholen (Voreinstellung).repeat-x nur "eine Zeile lang" waagerecht wiederholen.repeat-y nur "eine Spalte lang" senkrecht wiederholen.no-repeat nicht wiederholen, nur als Einzelbild anzeigen.
![Page 31: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/31.jpg)
<body style="background-image: url(verlauf.gif); background-repeat: repeat-y"> ... </body>
HTML - Styles - Verläufe
Ein Verlauf ist ein Bild, das nur ein Pixel hoch oder breit ist.
![Page 32: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/32.jpg)
<body> <div style="position: absolute; left: 50px; top: 70px; height: 120px; width: 400px; background-color: yellow;"> </div>
</body>
HTML - Styles - Explizites Positionieren
![Page 33: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/33.jpg)
<body>
<div style="position: absolute; left: 50px; top: 70px; height: 120px; width: 400px; background-color: yellow;">
<div style="position:absolute; left: 20px; top: 20px; height: 30px; width: 200px; background-color: red;"> </div>
</div>
</body>
HTML - Styles - Verschachteltes Positionieren
![Page 34: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/34.jpg)
<div style="position:absolute; left:20; top:10; height:180; width:300; background-color:yellow; padding: 10px;>
....
</div>
HTML - Styles - Innenabstand
![Page 35: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/35.jpg)
<div style="position:absolute; left:20; top:10; height:180; width:300; background-color:yellow; padding:10px; border-style: solid; border-width: 1px; border-color: green"> ....
</div>
HTML - Styles - Rahmen
![Page 36: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/36.jpg)
HTML - Styles - Unterschiede in den Browsern
Internet Explorer: Innenabstand und Rahmen liegen innerhalb des durch height und width definierten Rechtecks.
Die Darstellung von Innenabstand und Rahmen ist abhängig vom Browser
Mozilla Firefox: Innenabstand und Rahmen werden zu height und width dazuaddiert.
Firefox verhält sich konform zum Standard
![Page 37: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/37.jpg)
HTML - Styles - Überblick
• Schriften
• Hintergründe
• Innenabstände
• Rahmen
• Positionen
• Gestaltungen (z.B. Aufzählungszeichen)
Überblick über alle Gestaltungsmöglichkeiten mit Styles
Literatur über Styles: http://de.selfhtml.org/navigation/css.htm
![Page 38: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/38.jpg)
HTML - Style-Klassen
Wenn man ein Design mehrfach benötigt,kann man verschiedene Styles zu einer Klasse gruppieren.
Beispiel
Klasse
Hintergrundfarbe Schriftart Innenabstand Rand
![Page 39: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/39.jpg)
HTML - Style-Klassen - Definieren
Style-Klassen werden im <head> Tag defniert
<head> <style type="text/css"> .mybody {font-family:arial; font-color:black; font-size:16; background-color:lightyellow} </style></head>
Alle Definitionen werden zwischen <style> ... </style> abgelegt
Die Syntax ist: .klassenname {style1; style2; ...}
![Page 40: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/40.jpg)
HTML - Style-Klassen - Definition und Verwendung
<head> <style type="text/css"> .box {background-color:yellow; position:absolute; padding:10px; border-style:solid; border-width:1; border-color:green} </style></head>
Definition
<body> <div class="box" style="left:20; top:10; height:180; width:300;"> </div></body>
Verwendung
![Page 41: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/41.jpg)
<head> <style type="text/css"> .mybody {font-family:arial; font-color:black; font-size:16; background-color:lightyellow} .kasten {background-color:yellow; position:absolute; padding:10px; border-style:solid; border-width:1; border-color:green} .header {font-size:20;} </style></head>
HTML - Style-Klassen - Vererbung
<body class="mybody"> <div class="kasten" style="left:20; top:10; height:180; width:300;"> <div class="header">Die Made</div> Hinter eines Baumes Rinde<br>sitzt die Made mit dem Kinde.<br>Sie ist Wittwe denn der Gatte,<br>den sie hatte, </div><div class="kasten" style="left:340; top:10; height:180; width:300;"> <div class="header">Die Made (Fortsetzung)</div> fiel vom Blatte.<br>Diente so, auf diese Weise<br>einer Ameise als Speise </div></body>
![Page 42: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/42.jpg)
HTML - Style-Klassen-Dateien
Wenn man Style-Klassen immer wieder benötigt,können diese in separaten Dateien verwaltet werden
Datei: mystyles.css.mybody {font-family:arial; font-color:black; font-size:16; background-color:lightyellow}.kasten {background-color:yellow; position:absolute; padding:10px; border-style:solid; border-width:1; border-color:green}.header {font-size:20;}
<head> <link rel="stylesheet" type="text/css" href= "mystyles.css"></head>
Verwendung der Klassendatei
![Page 43: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/43.jpg)
HTML - Style-Klassen-Dateien - Nutzen
• Das komplette Design eines Web-Auftritts ist zentral definiert
• Das Design kann variiert werden, ohne Inhalte zu verändern
• Das Design kann auf einem ganz anderen Server liegen
• Designs können mehrfach verwendet werden
Worin liegt der Nutzen von Style-Klassen-Dateien
![Page 44: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/44.jpg)
HTMLLinks
![Page 45: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/45.jpg)
<body style="background-color: #99ccff">
<h1>Nützliche Links</h1>
<ul> <li><a href="http://www.schiller-witten.de">Schiller-Gymnasium</a></li> <li><a href="http://www.ruhr-gymnasium.de">Ruhr-Gymnasium</a></li> <li><a href="http://www.vfl-bochum.de">VfL Bochum</a></li> </ul>
</body>
HTML - Links
![Page 46: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/46.jpg)
<body style="background-color: #99ccff">
<a href="http://www.google.de"> <button>Geh zu Google</button> </a> </body>
HTML - Link als Button
![Page 47: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/47.jpg)
<body style="background-color: #99ccff">
<a href="http://www.google.de" style="text-decoration:none"> <button style="height:40px; width:200px">Geh zu Google</button> </a>
</body>
HTML - Link als Button mit Style
![Page 48: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/48.jpg)
HTMLTabellen
![Page 49: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/49.jpg)
<table border=1>
<tr> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr>
<tr> <td>Schmidt</td> <td>Thomas</td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr>
<table>
HTML - Tabellen
![Page 50: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/50.jpg)
HTML - Tabellen - Titelzeile
<table border=1>
<tr style="font-weight:bold"> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr>
<tr> <td>Schmidt</td> <td>Thomas</td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr>
<table>
![Page 51: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/51.jpg)
HTML - Tabellen - Innenabstand
<table border="1" cellpadding="6">
<tr style="font-weight:bold"> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr>
<tr> <td>Schmidt</td> <td>Thomas</td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr>
<table>
![Page 52: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/52.jpg)
HTML - Tabellen - Größe und Ausrichtung
<table border="1" cellpadding="6" style="width:700px" align="center">
<tr style="font-weight:bold"> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr>
<tr> <td>Schmidt</td> <td>Thomas</td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr>
<table>
![Page 53: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/53.jpg)
HTML - Tabellen - Prozentuale Größe
<table border="1" cellpadding="6" style="width:80%" align="center">
<tr style="font-weight:bold"> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr>
<tr> <td>Schmidt</td> <td>Thomas</td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr>
<table>
![Page 54: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/54.jpg)
HTML - Tabellen - Zellengröße
<table border="1" cellpadding="6" style="width:100%" align="center">
<tr style="font-weight:bold"> <td style="width:50%">Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr>
<tr> <td>Schmidt</td> <td>Thomas</td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr>
<table>
![Page 55: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/55.jpg)
HTML - Tabellen - Zellenabstand
<table border="1" cellpadding="6" cellspacing= "0" style="width:100%" align="center">
<tr style="font-weight:bold"> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr>
<tr> <td>Schmidt</td> <td>Thomas</td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr>
<table>
cellspacing=0 cellspacing=10
![Page 56: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/56.jpg)
<table border="1" cellpadding="6" style="width:80%" align="center">
<tr style="font-weight:bold"> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr>
<tr> <td>Schmidt</td> <td> </td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr>
<table>
HTML - Tabellen - Leere Zellen
![Page 57: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/57.jpg)
HTML - Tabellen - Übung
Wie programmiert man folgende alternierende Liste?
Tip: Style-Klassen verwenden
![Page 58: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/58.jpg)
HTML - Strukturieren von Seiten mit Tabellen
![Page 59: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/59.jpg)
HTMLFrames
![Page 60: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/60.jpg)
HTML - Frames - Grundlagen
Kopfbereich
Restbereich
Menübereich
Info-Bereich
![Page 61: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/61.jpg)
HTML - Frames - Vertikale Teilung
<html> <head> <title>Frames</title> </head>
<frameset rows="100px,*" frameborder="0" border="0" framespacing="0"> <frame name="head" src="frame-head.html" scrolling="no" frameborder="0"/> <frame name="info" src="head.html" scrolling="no" frameborder="0"/> </frameset>
</html>
![Page 62: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/62.jpg)
HTML - Frames - Vertikale und horizontale Teilung
<frameset rows="100px,*" frameborder="0" border="0" framespacing="0"> <frame name="head" src="frame-head.html" scrolling="no" frameborder="0" >
<frameset cols="218,*" border="0" framespacing="0" rows="*" frameborder="0"> <frame name="menu" src="frame-menu.html" scrolling="no" frameborder="0" /> <frame name="info" src="frame-info.html" scrolling="yes" frameborder="0" /> </frameset></frameset>
![Page 63: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/63.jpg)
HTML - Frames - Zielangabe bei Links
<a href="mein-link.html" target= "info"> Link </a>
Link
![Page 64: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/64.jpg)
HTML - Frames - Alternative für Browser ohne Frames
<html> <head> ... </head>
<frameset> ... </frameset>
<noframes> <body bgcolor="white"> </body> </noframes>
</html>
![Page 65: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/65.jpg)
HTML - Frames - Nutzen
• Seiten mit einem Corporate Design
• Seiten mit Menüführung
Frames: Worin liegt der Nutzen
![Page 66: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/66.jpg)
HTML - Frames - Programmier-Tips
• Jeder Frame ist eine eigenständige HTML-Seite
• Quelltextanzeige zeigt aktuellen Frame
• Bei Links muss der Ziel-Frame definiert werden
Frames: Wichtig beim Programmieren
![Page 67: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/67.jpg)
HTMLFormulare
![Page 68: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/68.jpg)
HTML - Formulare - Eigenschaften
• Formulare sind interaktiv
• Formulare bestehen aus mehreren Eingabeelementen
![Page 69: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/69.jpg)
<form>
... Formularbestandteile ...
</form>
HTML - Formulare
<form> ... </form> erzeugt eine Struktur – ist aber nicht sichtbar
![Page 70: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/70.jpg)
<form> <div>Name</div> <input type="text" name="name" size="15" > </input>
<div>Vorname</div> <input type="text" name="vorname" size="15" />
</form>
HTML - Formulare - Eingabefelder
Die Längenangabe erfolgt in Zeichen
![Page 71: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/71.jpg)
<div style="position:absolute; left:30px; top:20px"> Name<br> <input type="text" name="name" size="15" /></div>
<div style="position:absolute; left:160px; top:20px"> Vorname<br> <input type="text" name="vorname" size="15" /></div>
HTML - Formulare - Eingabefelder mit expliziter Position
![Page 72: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/72.jpg)
<input type="checkbox" name="kleingedrucktes"/>Ich habe das Kleingedruckte gelesen
HTML - Formulare - Checkboxen
![Page 73: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/73.jpg)
<input type="radio" name="geschlecht" value="m"/>männlich<br>
<input type="radio" name="geschlecht" value="w"/>weiblich<br>
HTML - Formulare - Radiobuttons
• Radiobuttons werden über den Namen assoziiert und gruppiert• Die Zuordnung eines Wertes erfolgt über das Attribut: value="Wert"
![Page 74: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/74.jpg)
<input type="password" name= "kennwort" size="15" />
HTML - Formulare - Eingabefelder für Kennwörter
![Page 75: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/75.jpg)
<select name="art" size="1" style="left:130px; top:20px; width:200">
<option> Bankeinzug </option> <option> Rechnung </option> <option> Kreditkarte </option> <option> Nachname </option>
</select>
HTML - Formulare - Comboboxen
![Page 76: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/76.jpg)
<select name="art" size="1" style="left:130px; top:20px; width:200">
<option value="bank"> Bankeinzug </option> <option value="invoice"> Rechnung </option> <option value="creditcard"> Kreditkarte </option> <option value="cash"> Nachname </option>
</select>
HTML - Formulare - Comboboxen mit Werten
![Page 77: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/77.jpg)
<select name="art" size= "4" style="left:130px; top:20px; width:200">
<option value="bank"> Bankeinzug </option> <option value="invoice"> Rechnung </option> <option value="creditcard"> Kreditkarte </option> <option value="cash"> Nachname </option>
</select>
HTML - Formulare - Listboxen
![Page 78: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/78.jpg)
• Eingabefelder: <input type="text" name="name" value="Thomas" />
• Checkboxen: <input type="checkbox" name="kleingedrucktes" checked />
• Radiobuttons: <input type="radio" checked />
• Comboboxen: <option selected> Kreditkarte </option>
HTML - Formulare - Vorbesetzungen
![Page 79: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/79.jpg)
HTML - Formulare - Übung
• Als Vorlage kann form-exercise-template.html verwendet werden ...
![Page 80: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/80.jpg)
HTML - Formulare - Eingabeelemente
• Eingabefelder
• Checkboxen
• Radiobuttons
• Comboboxen
• Listboxen
Eingabeelemente
![Page 81: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/81.jpg)
HTML - Formulare - Aktionselemente
• Buttons
• Abschicken
• Zurücksetzen
Aktionselemente
![Page 82: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/82.jpg)
JavaScript
![Page 83: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/83.jpg)
Javascript
• JavaScript ist eine Programmiersprache
• Java ist eine irreführende Namenskomponente
• Skriptsprachen dienen zur Steuerung von Anwendungen
![Page 84: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/84.jpg)
<button style="height:100; width:200; font-size:20" onclick=" alert('hoho') "> Start</button>
Javascript - Aufruf
![Page 85: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/85.jpg)
<button style="height:100; width:200; font-size:20" onclick=" meinscript() "> Start</button>
Javascript - Funktionen
function meinscript() { alert ("hoho"); }
<head> <script language="javascript">
</script>
</head>
![Page 86: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/86.jpg)
Javascript - Funktionen
• Funktionsdefinitionfunction () { ..... Programmschritte ..... }
• Funktionsaufruffunction ();
• Jedes Statement endet mit einem Semikolonalert (“hallo“);
Funktionen
![Page 87: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/87.jpg)
Javascript - Variablen
• Zuweisungzahl = 3;text = “ich bin ein text“;Die Zuweisung eines Wertes auf eine existente Variable überschreibt diese
Variablen
• Automatische DeklarationDie Zuweisung eines Werts auf eine nicht existente Variable legt diese an
• Variablen erhalten implizit einen TypDer Typ hängt vom zugewiesenen Wert ab
• Deklarationvar zahl;var zahl = 3;var text = “ich bin ein text“;
![Page 88: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/88.jpg)
Javascript - Datentypen und Klassen
Datentypen und Klassen
• Eine Variable ist entweder ein einfacher Datentyp
Ganzzahl zahl = 345
Gleitkommazahl pi = 3.14159265
Text “ich bin ein text“
• Oder ein strukturiertes Objekt – eine sogenannte KlasseKlassen bestehen aus verschiedenen Komponenten (member)
Jedes member ist selbst wieder eine Variable
Die member werden durch klassenname.member angesprochen
![Page 89: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/89.jpg)
Javascript - Beispiel für eine Klasse
Klasse: person
person.name = “schmidt“;
person.vorname = “thomas“;
person.alter = 53;
person.geschlecht = “m“;
person.groesse = 185;
person.gewicht = 98.5;
Klassen können auch Funktionen haben
var gewicht = person.berechneIdealGewicht ();
![Page 90: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/90.jpg)
Javascript - Klasse - element
Klasse: element (Element der HTML-Seite)element.value = “anzeigetext“
element.style
style ist selbst wieder ein strukturiertes Objekt
Klasse: stylestyle.left
style.top
style.backgroundColor
Jede style-Eigenschaft wird durch ein eigenes member abgebildet
![Page 91: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/91.jpg)
Javascript - Klasse - Verschachtelte Klassen
Verschachtelte Klassen element.style.backgroundColor = “yellow“
element.style.left = 100
element.style.top = 20
![Page 92: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/92.jpg)
<button class="button" style="height:100; width:200" onclick=" paintrect() "> Start</button>
Javascript - HTML-Elemente modifizieren
function paintrect() { element = document.getElementById ("rect"); element.style.backgroundColor = "red"; }
![Page 93: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/93.jpg)
Javascript Zusammenfassung
• Die Klasse die das HTML-Element rect abbildet wird ermitteltund der Variablen element zugewiesen
• Es wird eine Variable element angelegt
Was passiert hier?
element = document.getElementById ("rect"); element.style.backgroundColor = "red";
• element.style.backgroundColor wird eine neue Farbe zugewiesen
![Page 94: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/94.jpg)
<button class="button" style="left: 20; top:20" onclick="paintrect ('red') "> Mach rot </button><button class="button" style="left:240; top:20" onclick="paintrect ('yellow')"> Mach gelb </button>
Javascript - Funktionen mit Parametern
function paintrect (farbe) { element = document.getElementById ("rect"); element.style.backgroundColor = farbe; }
![Page 95: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/95.jpg)
Javascript - Übung: HTML-Elemente verschieben
function moverect (top) { ... Hier bitte eigenen Code erfinden ... }
• Als Vorlage kann js-exercize-move.html verwendet werden ...
![Page 96: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/96.jpg)
<button class="button" style="left: 20; top: 20" onclick="moverect (20) "> Oben </button><button class="button" style="left: 20; top:130" onclick="moverect (130)"> Unten </button>
Javascript - Lösung: HTML-Elemente verschieben
function moverect (top) { element = document.getElementById ("rect"); element.style.top = top; }
![Page 97: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/97.jpg)
Javascript - Zusammenfassung
• Definieren von Funktionen in <head>
• Aufrufen von Funktionen
• Funktionen mit Parametern
• Aufrufen von JavaScript bei dem Event: onclick
Was können wir bereits
![Page 98: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/98.jpg)
Javascript - Events
• onclick• onmouseover• onmouseout • onfocus• onblur• onchange• onload• onunload
Welche Events gibt es noch?
![Page 99: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/99.jpg)
<div id="rect" onmouseover="paintrect ('red')" onmouseout="paintrect ('yellow')"></div>
Javascript - Event - onmouseover
![Page 100: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/100.jpg)
<button class="button" style="height:100; width:200" onclick= "outputText()"> Gib einen Text aus...</button>
Javascript - Textausgabe in einem DIV
function outputText () { var element = document.getElementById ("rect"); result = "Ich bin eine Textzeile."; element.innerHTML = result; }
![Page 101: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/101.jpg)
Javascript - Mehrzeilige Textausgabe
function createOutput () { var element = document.getElementById ("rect"); result = "Ich bin eine Textzeile."; result = result + "<br>Ich bin auch eine Textzeile." result += "<br><i>Ich bin die dritte Zeile, aber kursiv.</i>" element.innerHTML = result; }
![Page 102: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/102.jpg)
<div id="rect" onmouseover="paintrect ('red')" onmouseout="paintrect ('yellow')"></div>
Javascript - Event - onmouseover
![Page 103: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/103.jpg)
Javascript - Ausgabe von Text
Ausgabe von Text in ein Rechteck
![Page 104: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/104.jpg)
<button class="button" style="height:100; width:200" onclick= "outputText()"> Gib einen Text aus...</button>
Javascript - Textausgabe in einem DIV
function createOutput () { var element = document.getElementById ("rect"); var result = "Ich bin eine Textzeile."; element.innerHTML = result; }
![Page 105: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/105.jpg)
Javascript - Operator +
Der Operator +
Addiert Zahlen var a = 3 + 5;
Addiert Zahlvariablen var a = 3; var b = 5; var c = a + b;
Verkettet Zeichenketten var a = “Ich bin ein text“ + “Ich auch“;
![Page 106: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/106.jpg)
Javascript - Operator +=
Der Operator +=
Der Ausdruck var zahl = 3; zahl += 5;
Ist eine Abkürzung für var zahl = 3; zahl = zahl + 5;
Anhängen von Zeichenketten var text = “Ich bin ein Text“; text += “Ich werde angehängt“;
![Page 107: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/107.jpg)
Javascript - Mehrzeilige Textausgabe
function createOutput () { var element = document.getElementById ("rect"); var result = "Ich bin eine Textzeile."; result += "<br>Ich bin auch eine Textzeile." result += "<br><i>Ich bin die dritte Zeile, aber kursiv.</i>" element.innerHTML = result; }
![Page 108: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/108.jpg)
Javascript - while-Schleifen
Schleifen mit while
Ohne Schleifevar text = ““text += “Ich bin eine Zeile<br>“;text += “Ich bin eine Zeile<br>“;text += “Ich bin eine Zeile<br>“;
Mit Schleifevar text = ““;var count = 3;
while (count > 0) { text += “Ich bin eine Zeile<br>“; count = count – 1; }
Beide Segmente erzeugen einen dreizeiligen Text
Bedingung
![Page 109: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/109.jpg)
Javascript - Bedingungen und Boolsche Werte
Bedingungen und Boolsche Werte
• Ein boolscher Wert ist entweder true oder false
• Eine Bedingung ist immer ein boolscher Wert
zahl < 3zahl <= 3zahl == 3zahl >= 3zahl > 3zahl != 3
• Insbesondere alle Vergleiche ergeben boolsche Werte
![Page 110: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/110.jpg)
Javascript - for-Schleifen
Schleifen mit for
for-Schleifevar text = ““;var zahl;
for (zahl=1; zahl <= 3; zahl++) { text += “Ich bin eine Zeile<br>“; }
zahl++ ist eine Abkürzung für zahl = zahl + 1
Bedingungwhile-Schleifevar text = ““;var count = 3;
while (count > 0) { text += “Ich bin eine Zeile<br>“; count = count – 1; }
Zählen
![Page 111: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/111.jpg)
Javascript - Schleifenvariable
Schleifenvariable
var text = ““;var zahl;
for (zahl=1; zahl <= 3; zahl++) { text += “Ich bin die Zeile Nummer “ + zahl + “<br>“; }
Die Schleifenvariable wird auch Schleifenindex genannt
![Page 112: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/112.jpg)
Javascript - Anwendung einer for-Schleife
function createOutput () { var text = ““; var zahl;
for (zahl=1; zahl <= 20; zahl++) text += “Ich bin die Zeile Nummer “ + zahl + “<br>“;
var element = document.getElementById ("rect"); element.innerHTML = result; }
Rollbalkenstyle=“overflow:scroll“
Wenn die Schleife nur eine Zeile umfasst,Kann man { } weglassen
![Page 113: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/113.jpg)
Javascript - Arithmetische Operatoren
Arithmetische Operatoren
Addieren wert = 3 + 5;
Subtrahieren wert = 3 - 5;
Multiplizieren wert = 3 * 5;
Dividieren wert = 3 / 5;
Rest beim Teilen wert = 32 % 5;Inkrementieren wert = wert++;
Dekrementieren wert = wert--;
![Page 114: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/114.jpg)
Javascript - Quadratzahlen
function squareNumbers () { result = "<h3>Quadratzahlen von 1 bis 10</h3>"; var zahl;
for (zahl = 1; i <= 10; i++) result += zahl + "<sup>2</sup> = " + zahl*zahl + "<br>";
var element = document.getElementById ("rect"); element.innerHTML = result; }
![Page 115: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/115.jpg)
Javascript - if-Klausel
Die if-Klausel
if (betrag > 1000) { alert (“Die Summe ist zu hoch“); }
• Bedingte Ausführung von Programmschritten
Bedingung
Wenn die if-Klausel nur eine Zeile umfasst,Kann man { } weglassen
![Page 116: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/116.jpg)
Javascript - Vielfache einer Zahl
function multiples (teiler) { result = "<h3>Vielfache von " + teiler + " zwischen 1 und 30</h3>"; for (zahl=1; zahl<=30; zahl++) if (zahl % teiler == 0) result += zahl + "<br>";
element = document.getElementById ("rect"); element.innerHTML = result; }
![Page 117: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/117.jpg)
Javascript - Vielfache (Lösung mit Funktion)
for (zahl=1; zahl<=30; zahl++) if (istTeilbar (zahl, teiler)) result += zahl + "<br>";
Abfrage mittels einer Funktion
for (zahl=1; zahl<=30; zahl++) if (zahl % teiler == 0) result += zahl + "<br>";
Abfrage direkt
Function istTeilbar (zahl, teiler) { if (zahl % teiler == 0) return true; return false; }
Funktion, die true oder false zurückliefert
![Page 118: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/118.jpg)
Javascript - Übungsaufgabe: Primzahlen
for (zahl=1; zahl<=30; zahl++) if (istPrim (zahl)) result += zahl + "<br>";
Abfrage mittels einer Funktion
Function istPrim (zahl) { ... return true oder false; }
Funktion, die true oder false zurückliefert
![Page 119: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/119.jpg)
Javascript - Übungsaufgabe: Primzahlen - Lösung
for (zahl=1; zahl<=30; zahl++) if (istPrim (zahl)) result += zahl + "<br>";
Abfrage mittels einer Funktionfunction istPrim(zahl) { for (k=2; k<zahl; ++k) if (zahl % k == 0) return false; return true; }
Funktion, die true oder false zurückliefert
![Page 120: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/120.jpg)
Javascript - Dynamisches Erzeugen von HTML
<div id="rect" class= "rect" style="left:20; top:20; height:400px; width:600px; background-color:white;">
<div class="rect" style="left: 10; top:10; height: 90; width:90;"></div> <div class="rect" style="left: 110; top:10; height: 90; width:90;"></div> <div class="rect" style="left: 210; top:10; height: 90; width:90;"></div> <div class="rect" style="left: 310; top:10; height: 90; width:90;"></div> <div class="rect" style="left: 410; top:10; height: 90; width:90;"></div>
</div>
Variante 1: Rechtecke statisch als HTML-Code
![Page 121: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/121.jpg)
Javascript - Dynamisches Erzeugen von HTML
function ErzeugeQuadrate() { result = ""; result += "<div class='rect' style='left: 10; top:10; height:90; width:90;'></div>"; result += "<div class='rect' style='left:110; top:10; height:90; width:90;'></div>"; result += "<div class='rect' style='left:210; top:10; height:90; width:90;'></div>"; result += "<div class='rect' style='left:310; top:10; height:90; width:90;'></div>"; result += "<div class='rect' style='left:410; top:10; height:90; width:90;'></div>";
var element = document.getElementById ("rect"); element.innerHTML = result; }
Variante 2: Erzeugen der Rechtecke mit JavaScript
![Page 122: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/122.jpg)
Javascript - Taschenrechner - Motivation
• Anzeigeregister
• Ziffer-Tasten
• Operator-Tasten
• Gleich-Taste
Welche Elemente hat ein Taschenrechner
![Page 123: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/123.jpg)
Javascript - Taschenrechner - Programmierung
Wir beginnen mit der Programmierung
.register { font-family:arial; font-color:black; font-size:20; background-color:lightgray; position:absolute; }
Style für Anzeigeregister
.button { font-family:arial; font-color:black; font-size:20; background-color:lightgray; position:absolute; }
Style für Buttons
![Page 124: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/124.jpg)
Javascript - Taschenrechner - Übung
Übung 1: Gestaltung des Rechners
js-calc-exercise-hoch.html
js-calc-exercise-quer.html
![Page 125: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/125.jpg)
Javascript - Taschenrechner - Entwicklungsschritte
• Anordnung der Bedienelemente• Design der Bedienelemente• Logik der Zifferntasten• Logik der Operationstasten (+, -, x, :)• Logik der Taste =• Logik der Tasten mit direkter Wirkung (C, CE, +/-)
Entwicklungsschritte
Wir setzen auf dem Template js-calc-workshop.html auf
![Page 126: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/126.jpg)
Javascript - Taschenrechner - Ziffern
Wir aktivieren die Ziffer-Tasten
onclick = "Ziffer(1)";
Die Ziffer-Buttons erhalten einen onclick-Event.Dieser ruft eine Funktion Ziffer auf
function Ziffer(z) { // HTML-Objekt des Eingaberegisters beschaffen var element = document.getElementById ("register"); // An das Eingaberegister die Ziffer anhängen element.value += z; }
Die Funktion Ziffer hängt die übergebene Ziffer an das Anzeigeregister an
![Page 127: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/127.jpg)
Javascript - Taschenrechner - Leeren der Anzeige
Nach bestimmten Operationen wird das Anzeige-Register
bei der Eingabe einer Ziffer zunächst gelöscht
• Nach jedem Drücken einer Rechenoperation (+, -, *, /)
• Nach jeder Berechnung (wenn = gedrückt wurde)
![Page 128: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/128.jpg)
Javascript - Taschenrechner - Leeren der Anzeige
Wir führen eine Variable anzeigeLeeren ein
• true : die Anzeige wird bei der Eingabe einer Ziffer geleert • false: die Ziffer wird an die Anzeige angehängt
Die Variable ist global
Sie kann überall gesetzt werden
Sie „lebt“ solange, wie die Webseite existiert
![Page 129: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/129.jpg)
Javascript - Taschenrechner - Leeren der Anzeige
function Ziffer(z) { // HTML-Objekt des Eingaberegisters beschaffen var element = document.getElementById ("register"); if (anzeigeLeeren) { Element.value = ""; anzeigeLeeren = false; // zurücksetzen – sonst wird die Anzeige immer leer gemacht }
// An das Eingaberegister die Ziffer anhängen element.value += z; }
Erweiterung der Funktion Ziffer
var anzeigeLeeren = true; // Initial ist die Variable mit true vorbesetzt
Deklaration der Variablen
![Page 130: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/130.jpg)
Javascript - Taschenrechner - Funktion: LeseAnzeige
Wir erstellen eine Hilfsfunktion zum Lesen des Anzeigeregisters
function LeseAnzeige ()
{ // Lese Anzeige-Register als Text var text = document.getElementById ("register").value;
// Wandle den Text in eine Zahl um und liefere diese als Ergebnis return eval (text); }
Der Wert wird als Zahl zurückgeliefert
![Page 131: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/131.jpg)
Javascript - Taschenrechner - Funktion: SetzeAnzeige
Wir erstellen eine Hilfsfunktion zum Setzen des Anzeigeregisters
function SetzeAnzeige (wert)
{ // Wandele den übergebenen Wert in eine Zeichenfolge um var text = wert.toString();
// Schreibe die Zeichenfolge in das Anzeigeregister document.getElementById ("register").value = text; }
Der Wert wird als Zahl übergeben
![Page 132: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/132.jpg)
Javascript - Taschenrechner - Operationen
Wir aktivieren die Operations-Tasten (+, -, x, :)
onclick = "Operation (‘+‘)"
• Die Operations-Buttons erhalten einen onclick-Event.
• Dieser ruft eine Funktion Operation auf
• Die Operation wird als Parameter übergeben
![Page 133: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/133.jpg)
Javascript - Taschenrechner - Funktion: Operation
function Operation (typ) { // Anzeigeregister in Speicher übernehmen speicher = LeseAnzeige(); // Setze Schalter, dass das Anzeige-Register bei der nächsten Zifferneingabe geleert wird anzeigeLeeren = true;
// Operation merken, um diese dann beim Drücken der Taste ‘=‘ auszurechnen operation = typ; }
Die Funktion Operation merkt sich die Art der Rechnung, führt sie aber noch nicht aus
Die Funktion Operation
speicher und operation sind globale Variablen
![Page 134: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/134.jpg)
Javascript - Taschenrechner - Ergebnis berechnen
Berechnen des Ergebnisses (Taste ‘=‘)
onclick = "Gleich()"
Der Button = erhält einen onclick-Event der eine Funktion Gleich aufruft
Die Funktion Gleich
• Liest den Wert aus dem Anzeigeregister
• Wendet die Operation auf speicher und anzeige an
• Schreibt das Ergebnis zurück in Anzeige-Register
![Page 135: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/135.jpg)
Javascript - Taschenrechner - Funktion: Gleich
function Gleich () { // Hole den Wert, der augenblicklich im Anzeige-Register steht (als Zahlenwert) var anzeige = LeseAnzeige();
// Lege eine variable für das Ergebnis an var ergebnis = anzeige;
// Führe die Operation aus und lege das Ergebnis auf der Variablen "ergebnis" ab. if (operation == "+") ergebnis = speicher + anzeige; if (operation == "-") ergebnis = speicher - anzeige; if (operation == "*") ergebnis = speicher * anzeige; if (operation == "/") ergebnis = speicher / anzeige;
// Schreibe das Ergebnis in das Anzeige-Register SetzeAnzeige (ergebnis);
// Speicher leeren und Operation neutralisieren speicher = 0; operation = "";
// Setze Schalter, dass Anzeige-Register bei der nächsten Zifferneingabe geleert wird anzeigeLeeren = true; }
![Page 136: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/136.jpg)
Javascript - Taschenrechner - Taste CE
function ClearDisplay () { // Setze eine „0“ ins Anzeigeregister document.getElementById ("register").value = "0";
// Setze Schalter, dass die Anzeige bei der nächsten Zifferneingabe geleert wird anzeigeLeeren = true; }
Die Funktion ClearDisplay
Die Taste CE löscht das Anzeigereigster
onclick = "ClearDisplay()"
Der Button CE erhält einen onclick-Event der eine Funktion ClearDisplay aufruft
![Page 137: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/137.jpg)
Javascript - Taschenrechner - Taste C
function Clear () { // Lösche Anzeigeregister ClearDisplay ();
// Lösche Speicher speicher = 0; }
Die Funktion Clear
Die Taste C löscht Anzeigereigster und Speicher
onclick = "Clear()"
Der Button C erhält einen onclick-Event der eine Funktion Clear aufruft
![Page 138: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/138.jpg)
Javascript - Taschenrechner - Taste +/-
function PlusMinus () { // Schreibe den negativen Wert der Anzeige in die Anzeige SetzeAnzeige (-LeseAnzeige());
// Setze Schalter, dass die Anzeige bei der nächsten Zifferneingabe geleert wird anzeigeLeeren = true; }
Die Funktion PlusMinus
Die Taste +/- wirkt nur auf das Anzeigeregister
onclick = "PlusMinus()"
Der Button +/- erhält einen onclick-Event der eine Funktion PlusMinus aufruft
![Page 139: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/139.jpg)
Javascript - Taschenrechner - Basisversion ist fertig
Die Basisversion des Rechners ist fertig
• Zifferneingabe• Grundrechenarten• C und CE• Vorzeichenwechsel +/-
![Page 140: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/140.jpg)
Javascript - Taschenrechner - Ausbaustufe Mathematik
Ausbaustufe Mathematik
• Quadratwurzel• Winkelfunktionen• Exponentialfunktion• Logarithmus• Umkehrfunktion• PI
![Page 141: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/141.jpg)
Javascript - Taschenrechner - Anzeigeregister-Funktionen
Mathematische Funktionen wirken nur auf das Anzeigeregister
wert = LeseAnzeige();wert = TuWas (wert);SetzeAnzeige (wert);
SetzeAnzeige ( TuWas ( LeseAnzeige() );
Oder auch kurz
![Page 142: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/142.jpg)
Javascript - Taschenrechner - Bibliothek „Math“
Matchematisch Bibliothek „Math“
Math.sin (y) Sinus
Math.cos (y) Cosinus
Math.tan (y) Tangens
Math.sqrt (y) Wurzel (square root)
Math.exp (y) Exponentialfunktion (ex)
Math.log (y) Natürlicher Logarithmus
![Page 143: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/143.jpg)
Javascript - Taschenrechner - Wurzel
Beispiel: Quadratwurzel
function Quadratwurzel () { // Schreibe die Wurzel der Anzeige in die Anzeige SetzeAnzeige (Math.sqrt (LeseAnzeige());
// Setze Schalter, dass die Anzeige bei der nächsten Zifferneingabe geleert wird anzeigeLeeren = true; }
Beispiel: Wurzel
onclick = "Quadratwurzel()"
Der Button sqrt erhält einen onclick-Event der eine Funktion Quadratwurzel aufruft
![Page 144: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/144.jpg)
Javascript - Taschenrechner - Schleifarbeiten
Schleifarbeiten
• Dezimalkomma statt Dezimalpunkt
![Page 145: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/145.jpg)
Javascript - Taschenrechner - Dezimalkomma statt Punkt
Dezimalkomma statt Dezimalpunkt
In der Funktion SetzeAnzeige wird der Punkt in ein Komma umgewandelt
function SetzeAnzeige (wert)
{ // Wandele den übergebenen Wert in eine Zeichenfolge um var text = wert.toString();
// Ersetze Punkte durch Kommata (hoffen wir, dass es nur einer ist) text = text.replace ("\." , ",");
// Schreibe die Zeichenfolge in das Anzeigeregister document.getElementById ("register").value = text; }
![Page 146: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/146.jpg)
Javascript - Taschenrechner - Dezimalkomma statt Punkt
Dezimalkomma statt Dezimalpunkt
In der Funktion LeseAnzeige wird das Komma in einen Punkt zurückgewandelt
function LeseAnzeige ()
{ // Lese Anzeige-Register als Text var text = document.getElementById ("register").value;
// Ersetze , durch . text = text.replace ("," , ".");
// Wandle den Text in eine Zahl um und liefere diese als Ergebnis return eval (text); }
![Page 147: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/147.jpg)
Javascript - Taschenrechner - Dezimalkomma statt Punkt
Dezimalkomma statt Dezimalpunkt
Der Button wird durch ersetzt
onclick = "Ziffer (',')";
Es wird ein Komma statt eines Punktes eingefügt
![Page 148: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/148.jpg)
Javascript - Taschenrechner - Schleifarbeiten
Schleifarbeiten
• Dezimalkomma statt Dezimalpunkt
• Prüfen der Eingabe auf korrekte Zahlen• Division durch Null ablehnen
![Page 149: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/149.jpg)
Javascript - Taschenrechner - Der Rechner ist fertig
Der Rechner ist fertig
![Page 150: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/150.jpg)
Kleiner Ausblick
• Styles
• JavaScript
• HTML Web-Seiten
Was können wir bereits
![Page 151: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/151.jpg)
Was kann man damit anfangen
• Interaktive Prozesse
• Gestaltung beliebiger statischer Web-Seiten
Was kann man damit anfangen
Was nicht?
• Speichern und Wiederverwenden von Informationen
![Page 152: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/152.jpg)
PHP
![Page 153: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/153.jpg)
www.meinserver.de
http://192.168.0.1
Browser
http://192.168.0.1/Index.html
Browser
http://192.168.0.1/Index.php
Browser
PHP - Dynamik ohne PHP
HTTP-Server
(Apache, IIS)
HTML Seite mit oder ohne JavaScript
Jegliche Dynamik passiert hier
![Page 154: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/154.jpg)
192.168.0.1
HTTP-Server
(Apache, IIS)
PHP Script
Erzeugte HTML-Seite PHP Interpreter
macht aus PHP-Code HTML
CGI
PHP - Dynamische Seiten mit PHP
Browser
Browser
Browser
http://192.168.0.1/Index.phpindex.php
Dateien
Zugriff auf Speichermedien
Datenbank
![Page 155: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/155.jpg)
PHP - Steckbrief
• Ist eine Skriptsprache, die HTML erzeugt
• Wird über das Common Gateway Interface (CGI) aufgerufen
• Kann auf das Dateisystem des Servers zugreifen
• Kann auf Datenbanken zugreifen (z.B. MySQL)
PHP
![Page 156: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/156.jpg)
PHP - Einrichten
• Einrichten eines HTTP-Servers (Apache)
• Einrichten des PHP-Interpreters
• XAMPP
Einrichten eines Servers für PHP
X = Cross PlattformA = ApacheM= MySQL (Datenbank)P = PHPP = Pearl
![Page 157: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/157.jpg)
192.168.0.1
PHP - Konfigurieren des Apache
Browser
http://192.168.0.1/Index.phpdatei-a.php
Z:\
Computer AG
php
datei-a.php
datei-b.php
datei-c.php
Festplatte des ServersHTTP-Server Apache
Konfigurationsdatei: httpd.conf
DocumentRoot: Z:/Computer AG/php
![Page 158: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/158.jpg)
PHP - Funktionsprinzip
PHP-Datei PHP Interpreter HTML
Der PHP-Interpreter erzeugt HTML aus PHP
![Page 159: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/159.jpg)
PHP - Eine statische HTML-Seite
PHP reicht reines HTML einfach durch
<html> <head> <title>Meine erste PHP-Seite</title> </head> <body> <h1>Meine erste PHP-Seite</h1> </body></html>
HTML-Seite ohne PHP
first.php
![Page 160: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/160.jpg)
<html> <head> <title>Meine erste PHP-Seite</title> </head> <body> <? .... PHP Code .... ?> </body>
</html>
PHP - Einbetten von PHP-Code
PHP wird in <? .... ?> eingeklammert und in HTML eingebettet
![Page 161: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/161.jpg)
PHP - Der Befehl: echo
Der Befehl: echo "..." erzeugt HTML
<html> <head> <title>Meine erste PHP-Seite</title> </head> <body> <? echo "<h1>Mein erster PHP-Befehl</h1>" ?> </body>
</html> echo.php
![Page 162: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/162.jpg)
PHP - Mischen von PHP und HTML
HTML und PHP können beliebig gemischt sein
<body>
<h1>Ich bin eine statische Überschrift</h1>
<? echo "<h1>Ich bin mit PHP erzeugt</h1>" ?>
<h1>Ich bin wieder eine statische Überschrift</h1> <? echo "<h1>Ich bin wieder mit PHP erzeugt</h1>" ?>
<h1>Zum Schluss noch eine statische Überschrift</h1>
</body>mix.php
![Page 163: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/163.jpg)
PHP - Der Befehl: phpinfo()
Die Funktion phpinfo() erzeugt Info-HTML-Code
<body>
<? phpinfo (); ?>
</body>phpinfo.php
![Page 164: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/164.jpg)
PHP - Eigene Funktionen
Und dann in <body> aufgerufen<body>
<h1>Funktionen</h1>
<? myfunc(); myfunc(); myfunc(); ?>
</body>
Eigene Funktionen werden im <head> definiert<head>
<? function myfunc (); { echo "Hallo Welt <br>" ; } ?>
</head>functions.php
![Page 165: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/165.jpg)
PHP - Übung: Tabelle
Funktion tabellenzeile function tabellenzeile(); { echo '<tr class="trow">'; echo '<td> Schmidt </td>'; echo '<td> Thomas </td>'; echo '<td> Auf der Marta 1 </td>'; echo '<td> 58452 </td>'; echo '<td> Witten </td>'; echo '<td> 0172-9849129 </td>'; echo '</tr>'; }
Funktionsaufruf
tabellenzeile(); tabellenzeile(); tabellenzeile(); tabellenzeile(); tabellenzeile();
.../php/meinname/table.php
![Page 166: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/166.jpg)
PHP - Alternierende Tabelle
Zwei Styles definieren - einen für gerade Zeilen und einen für ungerade Zeilen
<style type="text/css"> .trow-even {background-color: lightyellow} .trow-odd {background-color: yellow} </style>
![Page 167: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/167.jpg)
PHP - Alternierende Tabelle
Funktion tabellenzeile erweitern
function tabellenzeile(); {
// Globale Variable anlegen, auf der man sich merkt, ob die Zeile gerade oder ungerade ist global $geradezeile;
// Wenn es eine gerade Zeile ist, erzeugen wir eine tabellenzeile mit dem style "trow-even" // Sonst erzeugen wir eine Tabellenzeile mit dem style "trow-odd" if ($geradezeile) echo '<tr class="trow-even">'; else echo '<tr class="trow-odd">';
// Aus gerade wird ungerade - aus ungerade wird gerade $geradezeile = !$geradezeile;
...... }
![Page 168: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/168.jpg)
PHP - Variablen in PHP
• Beginnen immer mit dem $-Zeichen
• Haben keinen Datentyp
Variablen in PHP
• Sind global, wenn Sie außerhalb einer Funktion angelegt werden
• Werden in Funktionen mit dem Schlüsselwort global deklariert
Globale Variablen
![Page 169: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/169.jpg)
PHP - Tabelle mit Daten
Die Aufrufe von tabellenzeile übergeben die Daten
tabellenzeile ("Schmidt" , "Thomas" , "Auf der Marta 1" , "58452", "Witten" , "0172-9849129"); tabellenzeile ("Meier" , "Hugo" , "Im Westenfeld 13" , "44789", "Bochum" , "0234-123456" ); tabellenzeile ("Mustermann" , "Erwin" , "Planck Platz 1" , "10000", "Berlin" , "030-12345678"); tabellenzeile ("Zdebel" , "Thomas" , "Am Stadion 12" , "44799", "Bochum" , "0234-9988776"); tabellenzeile ("Datenschutz" , "Hans" , "Lange Leitung 23" , "22333", "Münster" , "0251-121212");
table-with-data.php
![Page 170: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/170.jpg)
PHP - Tabelle mit echten Daten
Funktion tabellenzeile erhält Parameter
function tabellenzeile($name, $vorname, $strasse, $plz, $ort, $telefon); { ...... echo "<td> $name </td>"; echo "<td> $vorname </td>"; echo "<td> $strasse </td>"; echo "<td> $plz </td>"; echo "<td> $ort </td>"; echo "<td> $telefon </td>"; ...... }
table-with-data.php
![Page 171: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/171.jpg)
PHP - Eine „echte“ Anwendung
Wie kann man die Tabellenanzeige real nutzen?
Frage ?
Daten aus einem wirklichen Datenbestand anzeigen
Antwort !
Was braucht man dazu ?
Zugriff auf eine Datenbank
![Page 172: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/172.jpg)
Datenbanken
Kleiner Exkurs
![Page 173: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/173.jpg)
Datenbanken - Tabellen
Daten in Datenbanken werden in Tabellen gespeichert
Name Vorname Strasse Ort
Schmidt Thomas Auf der Marta 1 Witten
Mustermann Hans Testweg 1 Beispielstadt
Tabelle
Feste Zahl benannter Spalten(werden beim Anlegen der Datenbank festgelegt)
beliebig viele
Datensätze
![Page 174: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/174.jpg)
Datenbanken - Struktur
Eine Datenbank besteht aus einer oder mehreren Tabellen
Name Vorname Strasse OrtSchmidt Thomas Auf der Marta 1 WittenMustermann Hans Testweg 1 Beispielstadt
Personen
Benutzer PasswortSchmidt ThomasMustermann Hans
ZugängeName Branche UmsatzMicrosoft Software Sehr VielMustermann Hardware Normal
Firmen
Datenbank
![Page 175: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/175.jpg)
Datenbanken - Abfragen
Datenbank-Abfragen erfolgen mittels eines SQL-Befehls
SELECT name,vorname FROM adressen
Name Vorname Strasse Ort
Schmidt Thomas Auf der Marta 1 Witten
Mustermann Hans Testweg 1 Beispielstadt
Schmidt Karl Klausweg 13 Wurstdorf
Müller Karsten Karlstraße 24 Meierstadt
Tabelle: adressen
Name Vorname
Schmidt Thomas
Mustermann Hans
Schmidt Karl
Müller Karsten
Ergebnismenge
![Page 176: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/176.jpg)
Datenbanken - Abfragen - WHERE
Mit der WHERE-Klausel filtert man Datensätze heraus
SELECT name,vorname FROM adressen WHERE name=‘schmidt‘
Name Vorname Strasse Ort
Schmidt Thomas Auf der Marta 1 Witten
Mustermann Hans Testweg 1 Beispielstadt
Schmidt Karl Klausweg 13 Wurstdorf
Müller Karsten Karlstraße 24 Meierstadt
Tabelle adressen
Name Vorname
Schmidt Thomas
Schmidt Karl
Ergebnismenge
Ohne WHERE-Klausel werden immer alle Sätze abgefragt
![Page 177: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/177.jpg)
Datenbanken - Abfragen - ORDER BY
Mit der ORDER BY-Klausel sortiert man die Ergebnismenge
SELECT name,vorname FROM adressen WHERE name=‘schmidt‘ ORDER BY vorname
Name Vorname Strasse Ort
Schmidt Thomas Auf der Marta 1 Witten
Mustermann Hans Testweg 1 Beispielstadt
Schmidt Karl Klausweg 13 Wurstdorf
Müller Karsten Karlstraße 24 Meierstadt
Tabelle adressen
Name Vorname
Schmidt Karl
Schmidt Thomas
Ergebnismenge
![Page 178: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/178.jpg)
Datenbanken - Abfragen - Ergebnismenge
• ist wiederum eine Tabelle
• besteht aus einer oder mehreren Zeilen (Rows)
• wird auch RowSet genannt
Die Ergebnismenge einer Datenbankabfrage
![Page 179: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/179.jpg)
Datenbanken - Auswahl eines Datenbanksystems
• Microsoft SQL Server
• Oracle
• MySQL
Auswahl eines Datenbanksystems
![Page 180: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/180.jpg)
Datenbanken - Die Datenbank MySQL
• ohne Lizenzgebühren frei benutzbar
• optimal in PHP integriert
• wird mit XAMPP installiert
• verfügt über eine WEB-Schnittstelle fürs Design
Die Datenbank MySQL
![Page 181: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/181.jpg)
Datenbanken - Wir richten eine Beispieldatenbank ein
computerag
Name Vorname Strasse PlzSchmidt Thomas Auf der Marta 1 58452Mustermann Hans Testweg 1 11223
adressenOrtWittenBeispielstadt
Telefon0172-98491290234-112233
index.php > MyPhpAdmin
![Page 182: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/182.jpg)
PHP
zurück zu
![Page 183: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/183.jpg)
PHP - Übung: Zugriff auf Datenbank
Übungsvorlage: .../php/meinname/adressen.php
<? // Der folgende PHP-Code erzeugt HTML-Tabellenzeilen // aus der Datenbank-Tabelle 'adressen' in der Datenbank 'computerag'?>
Den nachfolgenden Code wollen wir nun gemeinsam entwickeln
Zeile 70
![Page 184: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/184.jpg)
PHP - Anmelden beim MySQL-Datenbanksystem
Anmelden beim MySQL-Datenbanksystem
// Stelle eine Verbindung zum MYSQL-Datenbanksystem her// Das Datenbanksystem ist auf dem Rechner 'localhost' // Der Benutzername ist 'root'// Der Benutzer 'root' hat kein Passwort
$dbconnect = mysql_connect ('localhost', 'root');
// Prüfen, ob die Verbindung hergestellt wurde// Im Fehlerfall eine Meldung ausgeben und abbrechen
if ($dbconnect == false) exit ("Verbindung zur Datenbank auf Rechner 'localhost' kann nicht hergestellt werden.");
![Page 185: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/185.jpg)
PHP - Auswählen einer Datenbank
Auswählen der Datenbank computerag
// Selektiere die Datenbank 'computerag' als diejenige, mit der ab jetzt gearbeitet werden soll
$selected = mysql_select_db ('computerag', $dbconnect);
// Prüfe, ob das Selektieren geklappt hat// Im Fehlerfall eine Meldung ausgeben und abbrechen
if ($selected == false) exit ("Kann die Datenbank 'computerag' nicht selektieren.");
![Page 186: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/186.jpg)
PHP - Datensätze abfragen
Abfragen aller Datensätze aus der Tabelle adressen
// Die Datenbankabfrage wird formuliert und auf der Variablen $sql gespeichert$sql = "SELECT name,vorname,strasse,plz,ort,telefon FROM adressen ORDER BY name";
// Ausführen der Datenbankabfrage$rowset = mysql_query ($sql, $dbconnect);
// Prüfe, ob die Abfrage geklappt hat// Im Fehlerfall eine Meldung ausgeben und abbrechen if ($rowset == false) exit ("Die Datenbankabfrage ist fehlgeschlagen" . mysql_error());
SELECT name,vorname,strasse,plz,ort,telefon FROM adressen ORDER BY name
Auf der Variaben $rowset ist die gesamte Ergebnismenge abgelegt
![Page 187: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/187.jpg)
PHP - Ergebnismenge (Row Set) verarbeiten
Verarbeiten aller Datensätze der Ergebnismenge (RowSet)
// So wird die jeweils nächste Zeile aus der Ergebnismenge geholt$row = mysql_fetch_row ($rowset)
// Schleife über alle Datensätze der Ergebnismenge// Für jeden Datensatz wird die Funktion tabellenzeile aufgerufen.
while ($row = mysql_fetch_row ($rowset)) tabellenzeile ($row);
![Page 188: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/188.jpg)
PHP - Modifizieren der Funktion tabellenzelie
Modifizieren der Funktion tabellenzeile
Die Funktion erhält als Parameter den Datensatz
Funktion tabellenzeile
function tabellenzeile ($row) { .....
echo '<td> $row [0] </td>'; // row [0] repräsentiert das erste Feld des Datensatzes echo '<td> $row [1] </td>'; // row [1] repräsentiert das zweite Feld des Datensatzes echo '<td> $row [2] </td>'; // row [2] repräsentiert das dritte Feld des Datensatzes echo '<td> $row [3] </td>'; echo '<td> $row [4] </td>'; echo '<td> $row [5] </td>';
.... }
![Page 189: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/189.jpg)
PHP - Zugriff auf die Datenbank ist fertig
![Page 190: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/190.jpg)
PHP - Filter für Datensatzabfrage
Abfragen aller Datensätze mit einem bestimmten Namen
// Erzeugen einer Variablen mit dem Suchnamen$filter = "Schmidt";
// Erzeugen der fertigen Datenbankanfrage$sql = "SELECT name,vorname,strasse,plz,ort,telefon FROM adressen WHERE name=$filter ORDER BY name";
SELECT ... FROM adressen WHERE name='schmidt' ORDER BY name
![Page 191: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/191.jpg)
PHP - Übergeben des Filters in der URL
Filter in der URL als Parameter übergeben
// Erzeugen einer Variablen mit dem Suchnamen aus dem URL-Parameter name$filter = $_REQUEST ['name'];
www.computer-ag.info?name=schmidt
Zugriff auf die URL-Parameter
![Page 192: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/192.jpg)
PHP - Wahlweise mit oder ohne Filter
Filter nur anwenden, falls vorhanden
// Lese Filter aus der URL$filter = $_REQUEST['name'];
// Erzeuge WHERE-Klausel nur, wenn ein Filter da istif (empty($filter)) $select = "SELECT ... FROM adressen ORDER BY name,vorname";else $select = "SELECT ... FROM adressen WHERE name='$filter' ORDER BY name,vorname";
![Page 193: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/193.jpg)
PHP - Übung: Namensabfrage mittels Formular
Übungsvorlage: .../php/meinname/adressen-abfrage.php
Wir entwickeln zunächst den HTML-Code für das Formular• Beschriftung• Eingabefeld für den Namen• Absende-Button• Absende-Information
![Page 194: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/194.jpg)
PHP - Formular für Namensfilter
<body>
<h1>Adressenabfrage</h1>
<form action="adressen-abfrage.php" method="get"> Name: <input type="text" name="name" value=""> <button type="submit"> Absenden </button> <input type="hidden" name="submitted" value="yes"> </form>
192.168.0.1/adressen-abfrage.php?name=schmidt&submitted=yes
Beim Absenden des Formulars wird folgende URL erzeugt
Man beachte: Die Seite ruft sich selbst wieder auf
![Page 195: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/195.jpg)
PHP - Unterscheiden zwischen Erstaufruf und Folgeaufruf
<? // Wenn diese Seite das erste mal aufgerufen wird, sind wir hier fertig. $submitted = $_REQUEST['submitted']; if (empty ($submitted)) exit(); ?>
Unterscheidung durch Prüfen ob das Feld submitted leer ist
adressen-abfrage.php adressen-abfrage.php?name=abc&submitted=yes
Erstaufruf
Verstecktes Feld submitted ist leer
Folgeaufruf
Verstecktes Feld submitted ist yes
![Page 196: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/196.jpg)
PHP - Beim Folgeaufruf Tabelle erzeugen
Die Funktion namenstabelle ist vorgegeben
Sie erzeugt die Überschrift: Liste aller Personen mit dem Namen abc
Sie erzeugt die HTML-Tabelle mit den Daten aus der Datenbank
<? // Wenn diese Seite das erste mal aufgerufen wird, sind wir hier fertig. if (empty ($_REQUEST['submitted'])) exit();
// Auswerten der in der URL übergebenen variablen $name = $_REQUEST['name']; // Namenstabelle erzeugen namenstabelle ($name); ?>
PHP Code
![Page 197: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/197.jpg)
PHP - Filter erweitern auf Vorgabe des Namensanfangs
Abfrage auf genauen Namen schmidt
SELECT ... FROM adressen WHERE name='schmidt'
Abfrage auf Namen, die mit sch beginnen
SELECT ... FROM adressen WHERE name LIKE 'sch%'
![Page 198: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/198.jpg)
PHP - Eintragen von Datensätzen
Übungsvorlage: .../php/meinname/adressen-eintragen.php
![Page 199: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/199.jpg)
PHP - Das Formular
<form action="adressen-eintragen.php" method="get">
<div class="box" style="left:30; top:60; height:140; width:430; background-color:#ffff66">
<div class="prompt" style="left: 10; top:23; width:100">Name, Vorname</div> <div class="prompt" style="left: 10; top:48; width:100">Straße</div> <div class="prompt" style="left: 10; top:73; width:100">Plz, Ort</div> <div class="prompt" style="left: 10; top:98; width:100">Telefon</div>
<input class="edit" type="text" name="name" style="left:108; top:20; width:150"> <input class="edit" type="text" name="vorname" style="left:260; top:20; width:150"> <input class="edit" type="text" name="strasse" style="left:108; top:45; width:302"> <input class="edit" type="text" name="plz" style="left:108; top:70; width:50 "> <input class="edit" type="text" name="ort" style="left:160; top:70; width:250"> <input class="edit" type="text" name="telefon" style="left:108; top:95; width:302">
</div> <button type="submit"> Datensatz eintragen </button> <input type="hidden" name="submitted" value="yes">
</form>
Das Formular ist fertig vorgegeben
![Page 200: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/200.jpg)
PHP - Code zum Eintragen des Datensatzes
if (empty ($submitted)) exit();
Im Fall des Erstaufrufs sind wir dann auch schon fertig
$name = $_REQUEST ['name']; $vorname = $_REQUEST ['vorname']; $strasse = $_REQUEST ['strasse']; $plz = $_REQUEST ['plz']; $ort = $_REQUEST ['ort']; $telefon = $_REQUEST ['telefon']; $submitted = $_REQUEST ['submitted'];
Als erstes werden all übergebenen URL-Variablen gespeichert
![Page 201: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/201.jpg)
PHP - Verbindung zur Datenbank herstellen
// Stelle eine Verbindung zu MYSQL auf dem Rechner 'localhost' als Benutzer 'root' her $dbconnect = mysql_connect ('localhost', 'root'); if ($dbconnect == false) fehler ("Verbindung zur Datenbank kann nicht hergestellt werden.");
// Selektiere die Datenbank 'computerag' als diejenige, mit der jetzt gearbeitet werden soll $selected = mysql_select_db ('computerag', $dbconnect); if ($selected == false) fehler ("Kann die Datenbank 'computerag' nicht selektieren");
Verbindung zu MySQL herstellen und Datenbank 'computerag' selektieren
![Page 202: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/202.jpg)
PHP - SQL-Befehl zum Eintragen eines Datensatzes
INSERT INTO adressen (name, vorname) VALUES ('Schmidt', 'Thomas')
SQL-Befehl
// Verfassen des SQL-Befehls, welcher den Datensatz einträgt $sql = "INSERT INTO adressen (name,vorname,strasse,plz,ort,telefon) VALUES ('$name', '$vorname', '$strasse', '$plz', '$ort', '$telefon')";
// Ausführen des SQL-Befehls $result = mysql_query ($sql, $dbconnect); if ($result == false) fehler ("Das Eintragen ist fehlgeschlagen. " . mysql_error());
Umsetzung in PHP
![Page 203: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/203.jpg)
PHP - Prüfung auf unsinnige Eingaben
Prüfungen finden vor dem Eintragen statt
// Prüfen, dass der Name nicht leer ist if (empty ($name)) fehler ("Der Name darf nicht leer sein");
// Prüfen, dass der Vorname nicht leer ist if (empty ($vorname)) fehler ("Der Vorname darf nicht leer sein");
![Page 204: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/204.jpg)
PHP - Absicherung durch Login
![Page 205: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/205.jpg)
PHP - Login-Erweiterung für das Formular
<div class="box" style="left:460; top:60; height:140; width:240; background-color:#ff6666">
<div class="prompt" style="left: 10; top:23; width:100">Login</div> <div class="prompt" style="left: 10; top:48; width:100">Passwort</div>
<input class="edit" type="text" name="login" style="left:75; top:20; width:150"> <input class="edit" type="password" name="pw" style="left:75; top:45; width:150">
</div>
Das Formular wird um einen Login-Block erweitert
$login = $_REQUEST ['login']; $pw = $_REQUEST ['pw'];
Die Auswertung der URL-Variablen wird entsprechend erweitert
![Page 206: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/206.jpg)
PHP - Prüfung des Logins vor dem Eintragen
Login mittels der Funktion CheckLogin prüfen
if (CheckLogin ($dbconnect, $login, $pw) == false) fehler ("Login unbekannt oder Passwort falsch");
Die Funktion CheckLogin stützt sich auf die Datenbanktabelle users
login password
thomas kristall
lennart lennart
simon simon
olli olli
jonas jonas
burcu burcu
Bitte in der Tabelle users jetzt die Logins und Passwörter eintragen
![Page 207: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/207.jpg)
PHP - Die Funktion CheckLogin
// Die Funktion liefert true, wenn der übergebene login existiert und das Passwort zum login passt.// In allen anderen Fällen liefert die Funktion false
function CheckLogin ($dbconnect, $login, $pw) { // Selektiere das Passwort zum Login aus der Tabelle 'users‚ $select = "SELECT password FROM users WHERE login='$login' ";
// Ausführen der Datenbankabfrage. // Im Fehlerfall login verweigern $result = mysql_query ($select, $dbconnect); if ($result == false) return false;
// Lese passwort des users, falls der user existiert. // Wenn der user nicht existiert, login verweigern $row = mysql_fetch_row ($result); if ($row == false) return false;
// Vergleiche passwort des users mit dem übergebenen passwort. // Falls keine Übereinstimmung, login verweigern if ($row[0] != $pw) return false;
// Der Benutzer existiert und hat das angegebene Passwort return true; }
![Page 208: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/208.jpg)
PHP - Entkoppeln der Benutzer
• Jeder Benutzer kann Adressen eintragen
• Es wird gespeichert wer welche Adresse eingetragen hat
• Jeder Benutzer kann nur seine eigenen Einträge sehen
Benutzerentkopplung
![Page 209: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/209.jpg)
PHP - Login zusammen mit der Adresse speichern
INSERT INTO adressen (name, vorname, strasse, plz, ort, telefon, login) VALUES ('$name', '$vorname', '$strasse', '$plz', '$ort', '$telefon', '$login')
Beim Eintragen des Datensatzes das Feld login auch eintragen
Erweitern der Tabelle adressen um die Spalte loginName Vorname Strasse PlzSchmidt Thomas Auf der Marta 1 58452Mustermann Hans Testweg 1 11223
OrtWittenBeispielstadt
Telefon0172-98491290234-112233
logintsburcu
// Eigentlich kein Fehler, hier wird die Funktion fehler missbraucht ... fehler ("Der Datensatz wurde erfolgreich eingetragen");
Eine Erfolgsmeldung gibt beim Anwender ein gutes Gefühl
![Page 210: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/210.jpg)
PHP - Login bei der Abfrage
![Page 211: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/211.jpg)
PHP - Login bei der Abfrage - Codeerweiterung
<div class="box" style="left:10px; top:60px; height:85px; width:240px; background-color:#ffff99">
<div class="prompt" style="left: 10px; top:23px; width:100px">Name</div> <input class="edit" type="text" name="name" style="left:55; top:20; width:150px"> <button type="submit" style="position:absolute; left:55px; top:47px; width:150px"> Absenden </button> <input type="hidden" name="submitted" value="yes">
</div>
<div class="box" style="left:250px; top:60px; height:85px; width:240px; background-color:#bbffbb">
<div class="prompt" style="left: 10; top:23; width:100">Login</div> <div class="prompt" style="left: 10; top:48; width:100">Passwort</div> <input class="edit" type="text" name="login" style="left:75; top:20; width:150"> <input class="edit" type="password" name="pw" style="left:75; top:45; width:150">
</div>
Login Felder hinzufügen und schöne Maske basteln
Neue Styles hinzufügen
.mybody {font-family: arial; color:#333333; background-color: #ffffee; font-size: 12} .box {position:absolute; border:none} .prompt {position:absolute; text-align:left} .edit {position:absolute; border-style:inset}
![Page 212: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/212.jpg)
PHP - Login bei der Abfrage - Codeerweiterung
// Stelle eine Verbindung zum MYSQL-Datenbanksystem auf dem Rechner 'localhost' als Benutzer 'root' her $dbconnect = mysql_connect ('localhost', 'root');if ($dbconnect == false) exit ("Verbindung zur Datenbank kann nicht hergestellt werden.");
// Selektiere die Datenbank 'computerag' als diejenige, mit der jetzt gearbeitet werden soll$selected = mysql_select_db ('computerag', $dbconnect);if ($selected == false) exit ("Kann die Datenbank 'computerag' nicht selektieren");
// Check if the login is correctif (CheckLogin ($dbconnect, $login, $pw) == false) exit ("Login fehlgeschlagen");
Aufrufen der Funktion CheckLogin
Hinzufügen der Funktion CheckLogin
Diese übernehmen wir aus der Datei adressen-eintragen.php
Der <body> bekommt einen Style
<body class="mybody">
![Page 213: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/213.jpg)
PHP - Login bei der Abfrage - Nur eigene Adressen anzeigen
Erweitern der Datenbankabfrage
WHERE name LIKE '$filter%'
Bisherige WHERE-Klausel in der Abfrage
Hinzufügen der Abfrage auf den Benutzernamen
WHERE name LIKE '$filter%' AND login= '$login'
![Page 214: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/214.jpg)
PHP - Nur eigene Adressen anzeigen - Code
if (empty($filter)) $select = "SELECT name, vorname, strasse, plz, ort, telefon FROM adressen WHERE login='$login' ORDER BY name, vorname";
else $select = "SELECT name, vorname, strasse, plz, ort, telefon FROM adressen WHERE login='$login' AND name LIKE '$filter%' ORDER BY name, vorname";
Die fertige Abfrage sieht dann so aus
![Page 215: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/215.jpg)
PHP - Login bei der Abfrage - Ausprobieren
Ausprobieren ... Fertig !!
![Page 216: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/216.jpg)
PHP - Hochladen auf die Webseite
• Datenbank-Login an das Zielsystem anpassen
• Hochladen der PHP-Dateien
• Einen Link Abfrage und Eintragen anlegen
Hochladen der PHP-Dateien
![Page 217: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/217.jpg)
PHP - Hochladen - Datenbank-Login anpassen
$dbconnect = mysql_connect ('localhost', 'root');
Bisheriger Login (Datenbank auf dem lokalen Server)
$dbconnect = mysql_connect ('localhost', 'computerag', 'passwort')
Neuer Login (Datenbank auf dem WEB-Server)
![Page 218: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/218.jpg)
PHP - Hochladen - Link anlegen
![Page 219: Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.](https://reader036.fdocument.pub/reader036/viewer/2022070310/55204d7149795902118c3b60/html5/thumbnails/219.jpg)
Ende