computer ag schiller-gymnasium witten thomas schmidt oktober 2008 2008/2009
TRANSCRIPT
Computer AG
Schiller-Gymnasium
Witten
Thomas SchmidtOktober 2008
2008/2009
Ziele der Computer-AG
• HTML lernen
• JavaScript lernen
• Eigene Web-Seiten erstellen
HTML
Was ist HTML
HTML ist eine Sprache zur Formulierung von Dokumenten
•wird für die Gestaltung von Web-Seiten verwendet
Statische Formatierung Dynamische Formatierung
•beherrscht statische und dynamische Formatierungen
•wurde bereits vor dem Internet erfunden
Werkzeuge zur Erstellung von HTML-Seiten
• Zeileneditoren Editor von Windows
HTML-Kit
• HTML Editoren HTML-Kit
• Anwendungen mit einer grafischen Oberfläche Frontpage Word
Wie kann man HTML-Seiten herstellen
HTML - Grundlagen - Zeilendatei
Eine HTML-Datei besteht aus einzelnen Textzeilen
Zeile 1Zeile 2...Zeile ...
HTML - Grundlagen - Tags
HTML-Dateien werden mittels sogenannter „Tags“ formuliert
• Ein Tag besteht aus Buchstaben und ist in spitze Klammern eingeschlossen: <title>
• Zu fast allen Tags gibt es einen Anti-Tag der Form: </title>
• Informationen werden in Tag-Paare eingeklammert: <title> Ich bin ein Titel </title>
HTML - Grundlagen - <html>
Jede HTML-Seite ist in das Tag-Paar <html> ... </html> eingefasst
<html> hier stehen alle Informationen der Seite...</html>
HTML - Grundlagen - <body> und <head>
Jede Seite verfügt mindestens über die Tags <head> und <body>
<html> <head> ... Kopfinformation ... </head> <body> ... Seiteninformation ... </body></html>
HTML - Grundlagen - Dateiumbruch
Zeilenumbrüche haben keine Bedeutung – sie dienen nur der Lesbarkeit
<html><head>...</head><body>...</body></html>
<html> <head> ... </head> <body> ... </body></html>
ist gleichbedeutend mit
<html> <head> <title>Meine erste Seite</title> </head> <body> <h1>Überschrift</h1> Hier sehen wir den Text der ersten Webseite. </body></html>
Beispiel
TitelÜberschrift
Textkörper
<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
<body> <h1>Zutaten für Zabajone</h1> <ul> <li>Marsala (Italienischer Süßwein)</li> <li>Eier</li> <li>Zucker</li> </ul> </body>
HTML - Listen
<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
<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
<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
Styles
HTML - Styles
• Schriften
• Farben
• Optische Gestaltung
• Positionierung
Styles dienen der optischen Gestaltung von Seiten
Styles haben keinen Einfluss auf Inhalte und Funktionen!
<body style="background-color:yellow"> ... </body>
HTML - Styles - Hintergrundfarbe
<body style="font-family:arial"> ... </body>
HTML - Styles - Schriftfamilien
<body style="font-family:arial; font-size:30px"> ... </body>
HTML - Styles - Schriftgrößen
<body style="font-family:arial; color:blue"> ... </body>
HTML - Styles - Schriftfarbe
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">
<body style="font-family:arial; color:white; background-image:url(moehre.jpg)"> ... </body>
HTML - Styles - Hintergrundbilder
<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.
<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.
<body> <div style="position:absolute; left:50px; top:70px; height:120px; width:400px; background-color:yellow;"> </div>
</body>
HTML - Styles - Explizites Positionieren
<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
<body style="font-family:arial; font-size:16"> <div style="position:absolute; left:30px; top:30px; height:190px; width:300px; background-color:yellow;">
<div style="font-size:18">Der Ring des Polykrates</div> <br> <div>Er stand auf seines Daches Zinnen<br>und schaute mit vergnügten Sinnen<br>auf das beherrschte Samos hin.</div> <br> <div>Dies alles ist mir untertänig<br>begann er zu Ägyptens König.<br>Gestehe, dass ich glücklich bin.</div>
</div> </body>
HTML - Styles - Positionieren mit Text
<div style="position:absolute; left:20; top:10; height:180; width:300; background-color:yellow; padding: 10px;>
....
</div>
HTML - Styles - Innenabstand
<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
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
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
HTML - Style-Klassen
Wenn man ein Design mehrfach benötigt,kann man verschiedene Styles zu einer Klasse gruppieren.
Beispiel
Klasse
Hintergrundfarbe Schriftart Innenabstand Rand
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>
Deklaration
<body> <div class="box" style="left:20; top:10; height:180; width:300;"> </div> <div class="box" style="left:370; top:10; height:180; width:300;"> </div></body>
Verwendung
HTML - Style-Klassen - Deklarieren
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 Klassen werden zwischen <style> ... </style> abgelegt
Die Syntax ist: .klassenname {style1; style2; ...}
<head> <style type="text/css"> .mybody {font-family:arial; color:darkblue; 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> <p> Hinter eines Baumes Rinde<br>sitzt die Made mit dem Kinde.<br> Sie ist Witwe denn der Gatte,<br>den sie hatte,<br>fiel vom Blatte. </p> </div>
... Hier kommt noch der zweite Kasten ...</body>
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
Die Deklaration von Styles kann auch in einer separaten Datei erfolgen
Worin liegt der Nutzen von Style-Klassen-Dateien
Style-Klassen
HTML
<head> <link rel=stylesheet type="text/css" href="computerag.css"></head>
HTML - Style-Klassen- Dateien - Aufbau
.mybody {font-family:arial; color:darkblue; 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;}
Klassendatei computerag.css
HTMLLinks
<body style="font-family:arial; font-size:18; background-color: #99ccff">
<h1>Meine ersten Links</h1>
<a href="http://www.schiller-witten.de">Schiller-Gymnasium</a><br> <a href="http://www.ruhr-gymnasium.de">Ruhr-Gymnasium</a><br> <a href="http://www.vfl-bochum.de">VfL Bochum</a><br> <a href="ersteseite.html">Meine erste Seite</a><br> </body>
HTML - Links
HTML - Links - Ziele
Das Ziel eines Links kann sein
Seite im Web http://www.computer-ag.info
Datei seite.html
Dateiim Unterordner ordner/seite.html
HTMLTabellen
<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
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>
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>
HTML - Tabellen - Zellenabstand
<table border="1" cellpadding="6" cellspacing= "0">
<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
HTML - Tabellen - Zellenabstand
<table border="1" cellpadding="6" cellspacing= "10">
<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
HTML - Tabellen - Größe und Ausrichtung
<table border="1" cellpadding="6" cellspacing="0" 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>
HTML - Tabellen - Prozentuale Größe
<table border="1" cellpadding="6" cellspacing="0" 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>
HTML - Tabellen - Zellengröße
<table border="1" cellpadding="6" cellspacing="0" style="width:100%">
<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>
HTML - Tabellen - Leere Zellen
<table border="1" cellpadding="6" cellspacing="0" style="width:80%">
<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> </td> <td>58452 Witten</td> </tr>
<table>
HTML - Tabellen - Alternierende Farben
<table class="table" border="1" cellpadding="6" cellspacing="0">
<tr class="tb-head"> <td>Datum</td> <td>Zeit</td> <td style="width:300px">Termin</td> </tr>
<tr class="tb-gerade"> <td>08.04.2008</td> <td>20:00</td> <td>Geburtstagsfeier Karl-Heinz</td> </tr>
<tr class="tb-ungerade"> <td>09.04.2008</td> <td>09:00</td> <td>Mails beantworten</td> </tr>
<tr class="tb-gerade"> <td>11.04.2008</td> <td>20:00</td> <td>Sportschau gucken</td> </tr>
<tr class="tb-ungerade"> <td>13.04.2008</td> <td>13:00</td> <td>Computer-AG</td> </tr></table>
<style type="text/css">
.table {font-size:14} .tb-head {background-color: #bbccff; font-weight:bold} .tb-gerade {background-color: #ffff80} .tb-ungerade {background-color: #ffffe0}
</style>
Klassen
HTML - Strukturieren von Seiten mit Tabellen
HTMLFrames
HTML - Frames - Grundlagen
Kopfbereich
Restbereich
Menübereich
Info-Bereich
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="frame-info.html" scrolling= "auto" frameborder="0"/> </frameset>
</html>
HTML - Frames - Horizontale Teilung
<html> <head> <title>Frames</title> </head>
<frameset cols="216px,*" frameborder="0" border="0" framespacing="0"> <frame name="menu" src="frame-menu.html" scrolling="no" frameborder="0"/> <frame name="info" src="frame-info.html" scrolling= "auto" frameborder="0"/> </frameset>
</html>
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>
HTML - Frames - Zielangabe bei Links
Link Link
<a href="mein-link.html" target= "info"> Link </a>
HTML - Frames - Nutzen
Frames werden in der Hauptsache für Menüs benutzt
Frames: Worin liegt der Nutzen
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
HTMLFormulare
HTML - Formulare - Eigenschaften
• Formulare sind interaktiv
• Formulare bestehen aus mehreren Eingabeelementen
<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
<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
<input type="checkbox" name="kleingedrucktes"/>Ich habe das Kleingedruckte gelesen
HTML - Formulare - Checkboxen
<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"
<select name="art" size="1">
<option> Bankeinzug </option> <option> Rechnung </option> <option> Kreditkarte </option> <option> Nachname </option>
</select>
HTML - Formulare - Comboboxen
<select name="art" size= "4">
<option> Bankeinzug </option> <option> Rechnung </option> <option> Kreditkarte </option> <option> Nachname </option>
</select>
HTML - Formulare - Listboxen
• 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
JavaScript
Javascript
• JavaScript ist eine Programmiersprache
• Hat nichts mit der Sprache Java zu tun
• Skriptsprachen dienen zur Steuerung von Anwendungen
Javascript - Ein erstes Beispiel
Beispiel
<button onclick="myprog()">Fenster anzeigen</button>
Ereignis, das das Programm startet
<script language="javascript"> function myprog() { alert ("Ich bin ein Text"); }
</script>
Das Programm selbst steht im <head>
JavaScript-Befehl: alert
Javascript - Hintergrundfarben setzen
<script language="javascript">
function machrot() { rect.style.backgroundColor = "red"; }
function machgelb() { rect.style.backgroundColor = "yellow"; }
</script>
<div id="rect" style="position:absolute; left:20; top:20;height:100px; width:245px;background-color:white"></div>
<button onclick="machrot()"> Mach rot </button>
<button onclick="machgelb()"> Mach gelb </button>
Javascript - Funktionen mit Parametern
<div id="rect" style="position:absolute; left:20; top:20;height:100px; width:245px;background-color:white"></div>
<button onclick="machbunt ('red')"> Mach rot </button>
<button onclick="machbunt ('yellow')">Mach gelb</button>
function machbunt (farbe) { rect.style.backgroundColor = farbe; }
Die Funktion erhält einen Parameter
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
<div id="rect" onmouseover="machbunt ('red')" onmouseout="machbunt ('yellow')"></div>
Javascript - Event - onmouseover
Durch onmouseover ändert sich die Farbe wenn man das Element mit der Maus betritt.Aber die Farbe bleibt, wenn man es wieder verlässt.
Durch onmouseout kann man die Farbe wieder entfernen, wenn man das Element wieder verlässt.
Javascript - Bildwechsel bei onmouseover
<img id="bild" src="moehre.jpg" onmouseover=" bild.src='apfel.jpg' " onmouseout=" bild.src='moehre.jpg' ">
Javascript - Bildgrößenänderung bei onmouseover
<img id="bild" src="moehre.jpg" style="position:absolute; left:100; top:100; width:100„ onmouseover = "bild.style.width=222" onmouseout = "bild.style.width=100">
Javascript - Zentrierte Bildgrößenänderung
<img id="bild1" src="moehre.jpg" style="position:absolute; left:50; top:100; height:150; width:100" onmouseover = "bild1.style.width=150; bild1.style.height=225; bild1.style.left=25; bild1.style.top=75" onmouseout = "bild1.style.width=100; bild1.style.height=150; bild1.style.left=50; bild1.style.top=100">
<img id="bild2" src="moehre.jpg" style="position:absolute; left:170; top:100; height:150; width:100" onmouseover = "bild2.style.width=150; bild2.style.height=225; bild2.style.left=145; bild2.style.top=75" onmouseout = "bild2.style.width=100; bild2.style.height=150; bild2.style.left=170; bild2.style.top=100">
Javascript - Berechnete Bildanordnung
Wir schreiben eine Funktion setbild
Wie kann man das Anordnen von Bildern vereinfachen?
• Berechnet die Position der Bilder• Bläst die Bilder beim Überstreichen mit der Maus auf • Hebt die Bilder in den Vordergrund
Javascript - Berechnete Bildanordnung - Funktion setbild
<img id="0" src="moehre.jpg" onload="setbild (this);">
<img id="1" src="apfel.jpg" onload="setbild (this);">
<img id="2" src="eis.jpg" onload="setbild (this);">
Die Anordnung erfolgt anhand der ID
Die Anordnung erfolgt beim Laden der Seite
Die Anordnung erfolgt mittels der Funktion setbild
Javascript - Berechnete Bildanordnung - Funktion setbild
// Diese Funktion platziert das Bild, das als objekt übergeben wird anhand seiner id// Das Bild mit der ID=0 wird als erstes angeordnet// Das Bild mit der ID=1 rechts daneben, u.s.w.
function setbild (o) { // Festlegen der Design-Parameter width = 100; height = 150; abstand = 20; lrand = 50; orand = 100;
// Hole die nummer des bildes als zahl nr = parseInt (o.id);
// Ermittele den linken Rand (den leiten wir aus der Bildnummer ab) x = nr * (width + abstand) + lrand;
// Ermittele den oberen Rand (das ist leicht - der ist immer gleich y = orand;
// Bildposition und Bildgröße werden in das Bildobjekt gesetzt o.style.width = width; o.style.height = height; o.style.left = x; o.style.top = y; o.style.position = "absolute"; }
Javascript - Berechnete Bildanordnung - Bild aufblasen
<img id="0" src="moehre.jpg" onload="setbild (this, false)" onmouseover="setbild (this, true)" onmouseout="setbild (this, false)">
<img id="1" src="apfel.jpg" onload="setbild (this, false)" onmouseover="setbild (this, true)" onmouseout="setbild (this, false)">
<img id="2" src="eis.jpg" onload="setbild (this, false)" onmouseover="setbild (this, true)" onmouseout="setbild (this, false)">
setbild bekommt einen zweiten Parameter
true = aufblasenfalse = normal darstellen
Javascript - Berechnete Bildanordnung - Funktion setbild
function setbild (o, big){.....
// Wenn das Bild groß sein soll, blasen wir es auf
if (big)
{
width = 150; // Breite wird 150 statt 100
height = 225; // Höhe wird 225 statt 150
x = x - 25; // x-position um 25 (das ist die Hälfte der Verbreiterung) nach links
y = y - 37; // y-position um 25 (das ist die Hälfte der Erhöhung) nach oben
}
}
Javascript - Bild in den Vordergrund heben
// Normalerweisesetzen wir den z-index auf 1zindex = 1;
// Wenn das Bild groß sein soll, setzen wir den z-index auf 2
if (big)
{
.....
zindex = 2;
}
// Beim setzen der Bildposition wird dann auch der z-index gesetzt
o.style-zIndex = zindex;
Javascript - Bildanordnung in mehreren Zeilen
bilderProZeile = 4;
Neue Variable bilderProZeile
spalte = nr % bilderProZeile; // % bedeutet: Rest beim Teilen durch
zeile = (nr - spalte) / bilderProZeile; // (nr – spalte) ist immer durch bilderProZeile teilbar
Ausrechnen der Zeile und Spalte
Javascript - Bildanordnung in mehreren Zeilen
spalte = nr % 4;
zeile = (nr - spalte) / 4;
Beispiel für 4 Bilder pro Zeile
nr spalte nr - spalte zeile
0 0 0 0
1 1 0 0
2 2 0 0
3 3 0 0
4 0 4 1
5 1 4 1
6 2 4 1
7 3 4 1
0 1 2 3
Zeile 0
4 5 6 7Zeile 1
Javascript - Berechnete Bildanordnung - Funktion setbild
function setbild (o) { // Festlegen der Design-Parameter width = 100; height = 150; abstand = 20; lrand = 50; orand = 100; bilderProZeile = 4
// Hole die nummer des bildes als zahl nr = parseInt (o.id);
// Ermittele Zeile und Spalte des Bildes (Zählung ab 0) spalte = nr % bilderProZeile; zeile = (nr - spalte) / bilderProZeile;
// Ermittele den linken Rand (den leiten wir aus der Bildspalte ab) x = spalte * (width + abstand) + lrand;
// Ermittele den oberen Rand (den leiten wir aus der Bildzeile ab) y = zeile * (height + abstand) + orand;
// Bildposition und Bildgröße werden in das Bildobjekt gesetzt o.style.width = width; o.style.height = height; ... }
Neue Variable bilderProzeile
zeile und spalte berechnen
spalte statt nr für die x-Position
y-Position aus Zeile berechnen
Javascript - Hintergrundbild mit Größenanpassung
<body onresize="sizebgr()" onload="sizebgr()" style="font-family:arial">
Javascript - Hintergrundbildanpassung - Funktion sizebgr
function sizebgr () { bgrimg.style.left = 0; bgrimg.style.top = 0; bgrimg.style.height = document.body.clientHeight; bgrimg.style.width = document.body.clientWidth; bgrimg.style.position = "absolute"; }
Höhe und Breite des Browserfensters
Achtung wenn man ein fensterfüllendes Bild verwendet:
• Man muss alles andere explizit anordnen• Der Browser platziert sonst alles unterhalb des Bildes (und das ist immer außerhalb)
Javascript - Timer - Beispiel: Laufendes Bild
Javascript verfügt über sogenannte Timer (Zeitgeber)
• Ein Timer ruft eine vorgegebene Funktion in festen Zeitabständen auf
• Ein Timer läuft, solange die Seite vom Browser angezeigt wird
• Ein Timer kann vorzeitig durch Aufruf einer Funktion wieder beendet werden• Jeder Timer hat eine ID um ihn anzusprechen
Javascript - Timer - Funktion setInterval
Jetzt brauchen wir nur noch die Funktion moveimage schreiben ...
<body onload="startmove()">
Nach dem Laden der Seite wird die Funktion startmove aufgerufen – diese startet den Timer
function startmove () { setInterval ("moveimage()", 300); }
Die Funktion startmove startet lediglich den Timer
Alle 300 Millisekunden
Wird die Funktion moveimage aufgerufen
Javascript - Timer - Funktion moveimage
// Anlegen einer global gültigen Variablen count und vorbesetzen derselben mit dem Wert 0var count = 0;
// Die Funktion moveimage positioniert das Bild in Abhängigkeit des Zählers count// und erhöht den Zähler bei jedem Aufruf um einsfunction moveimage () { // Positioniere das Bild in Abhängigkeit des Zählers count bild.style.position = "absolute"; bild.style.left = count * 50; bild.style.top = 100; bild.style.height = 150; bild.style.width = 100;
// Erhöhe den Zähler count um eins count++; }
Die Funktion moveimage bewegt das Bild
X-Position setzen auf: 0, 50, 100, 150, etc
Ist gleichbedeutend mit: count = count + 1
Javascript - Timer - Funktion moveimage
function moveimage () { …
// Erhöhe den Zähler count um eins count++;
// Wenn der Zähler den Wert 10 erreicht, setze ihn zurück auf 0 if (count >= 10) count = 0; }
Jetzt verhindern wir noch, dass das Bild rechts herausläuft
Ob das wohl auch mit zwei Timern funktionier?
MinesweeperWir programmieren ein Spiel
Javascript - Minesweeper
• Darstellung in HTML
• Interne Logik
Was müssen wir programmieren?
Javascript - Minesweeper - Spielfeld-Darstellung in HTML
Die Darstellung in HTML besteht aus einzelnen Zellen
• Dimension (hier: 10x10)• Zellgröße• Farben (Hintergrund, Ränder)
Ein <div> ... </div> für das gesamte Spielfeld
Je ein <div> ... </div> für jede einzelne Zelle
Parameter
Javascript - Minesweeper - Zellendefinition
<body style="background-color:lightblue; font-family:arial">
<div id="spielfeld" style="position:absolute; left:20; top:40;">
<div id="0,0" class="cell" style="left: 0; top: 0" onclick="leftClick (this)"></div> <div id="0,1" class="cell" style="left:30; top: 0" onclick="leftClick (this)"></div> <div id="0,2" class="cell" style="left:60; top: 0" onclick="leftClick (this)"></div> <div id="0,3" class="cell" style="left:90; top: 0" onclick="leftClick (this)"></div> <div id="1,0" class="cell" style="left: 0; top:30" onclick="leftClick (this)"></div> <div id="1,1" class="cell" style="left:30; top:30" onclick="leftClick (this)"></div> <div id="1,2" class="cell" style="left:60; top:30" onclick="leftClick (this)"></div> <div id="1,3" class="cell" style="left:90; top:30" onclick="leftClick (this)"></div> <div id="2,0" class="cell" style="left: 0; top:60" onclick="leftClick (this)"></div> <div id="2,1" class="cell" style="left:30; top:60" onclick="leftClick (this)"></div> <div id="2,2" class="cell" style="left:60; top:60" onclick="leftClick (this)"></div> <div id="2,3" class="cell" style="left:90; top:60" onclick="leftClick (this)"></div> <div id="3,0" class="cell" style="left: 0; top:90" onclick="leftClick (this)"></div> <div id="3,1" class="cell" style="left:30; top:90" onclick="leftClick (this)"></div> <div id="3,2" class="cell" style="left:60; top:90" onclick="leftClick (this)"></div> <div id="3,3" class="cell" style="left:90; top:90" onclick="leftClick (this)"></div>
</div>
</body>
Hier werden die Zellen für ein 4x4 Feld definiert
Javascript - Minesweeper - Dynamische Zellen
Die Methode ist ungeeignet für größere Spielfelder
Lösung:
• <div> erzeugen
• Eigenschaften festlegen (Farbe, Rand, Größe)
• Position berechnen
Die <div> Elemente für jede einzelne Zellewerden dynamisch in JavaScript erzeugt
In einer Schleife
• An die HTML-Seite anhängen
Javascript - Minesweeper - Schleifen
for (line=0; line<4; line++) { Alles was hier steht wird 4 mal ausgeführt. Beim ersten Mal hat line den Wert 0 Beim zweiten Mal hat line den Wert 1 Beim letzten Mal hat line den Wert 3 }
Wir benötigen dazu sogenannte Schleifen
for (line=0; line<10; line++) { alert ("Zeile: " + line); }
Beispiel
line ist die sogenannte Schleifenvariable
Javascript - Minesweeper - Geschachtelte Schleifen
for (line=0; line<4; line++) { for (col=0; col<4; col++) { Alles was hier steht wird 16 mal ausgeführt. Beim 1. Mal ist: line=0 und col=0 Beim 2. Mal ist: line=0 und col=1 Beim 3. Mal ist: line=0 und col=2 Beim 4. Mal ist: line=0 und col=3
Beim 5. Mal ist: line=1 und col=0 Beim 6. Mal ist: line=1 und col=1 Beim 7. Mal ist: line=1 und col=2 Beim 8. Mal ist: line=1 und col=3
Beim letzten Mal ist: line=3 und col=3 } }
Schleifen kann man auch schachteln
for (line=0; line<4; line++) for (col=0; col<4; col++) alert ("Zeile: " + line + " " + "Spalte: " + col);
Beispiel
Javascript - Minesweeper - Funktion createCells
Javascript - Minesweeper - Funktion createCells
function createCells()
{ // Eine doppelt geschachtelte Schleife über alle Zeilen und Spalten for (line=0; line<dim; ++line) for (col=0; col<dim; ++col) { // Erzeuge die Zelle als HTML Objekt vom Typ <div> cell = document.createElement ("div");
// Setze die ID der Zelle in de Form: "zeile,spalte" cell.id = line + "," + col;
// Setze alle Style-Eigenschaften cell.style.borderWidth = "1"; // Randstärke cell.style.borderColor = "black"; // Randfarbe cell.style.borderStyle = "solid"; // Randtyp cell.style.backgroundColor = "lightyellow"; // Hintergrundfarbe cell.style.left = col * cellSize; // x-Position cell.style.top = line * cellSize; // y-Position cell.style.height = cellSize; // Zell-Höhe cell.style.width = cellSize; // Zell-Breite cell.style.position = "absolute"; // Positionierungsart
// Füge Zelle zum <div> mit der ID spielfeld hinzu spielfeld.appendChild (cell); } }
Javascript - Minesweeper - Browsererkennung
Manchmal muss man browserabhängig programmieren
function isExplorer() {
return navigator.userAgent.search ("MSIE") != -1; }
Die Funktion isExplorer () liefert true, wenn der Browser ein Internet Explorer ist
if (isExplorer()) { cell.style.height = cellSize + 1; cell.style.width = cellSize + 1; }
Wir erweitern unsere Funktion createCells für den Internet Explorer
Javascript - Minesweeper - Klicken in eine Zelle
function createCells()
{ … // Setze eine Funktion die beim Klicken auf die Zelle aufgerufen wird cell.onclick = cellClicked; … }
Wir rufen beim Klicken in eine Zelle eine Funktion auf
function cellClicked()
{ … hier kommt unsere eigene Funktion hin … }
Javascript - Minesweeper - Funktion cellClicked
function cellClicked()
{ alert ("Zelle " + this.id + " wurde angeklickt"); }
Wir implementieren eine einfache Funktion cellClicked
this ist das angeklickte HTML-Objekt
Javascript - Minesweeper - Funktion cellClicked
function cellClicked()
{ this.style.backgroundColor = "red"; }
Oder wir färben beim Klicken die Zelle rot
Javascript - Minesweeper
Die Darstellung in HTML ist fertig
Jetzt programmieren wird die Logik
Ende