Computer AG Schiller-Gymnasium Witten Thomas Schmidt Oktober 2008 2008/2009.

Computer AG

Schiller-Gymnasium

Witten

Thomas SchmidtOktober 2008

2008/2009

Ziele der Computer-AG

• HTML lernen

• JavaScript lernen

• Eigene Web-Seiten erstellen

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

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>

HTML - Bilder

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

Literaturhinweis

http://de.selfhtml.org/

Styles

HTML - Styles

• Schriften

• Farben

• Optische Gestaltung

• Positionierung

Styles dienen der optischen Gestaltung von Seiten

Styles haben keinen Einfluss auf Inhalte und Funktionen!

HTML - Styles - Hintergrundfarbe

HTML - Styles - Schriftfamilien

HTML - Styles - Schriftgrößen

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:

HTML - Styles - Hintergrundbilder

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.

HTML - Styles - Verläufe

Ein Verlauf ist ein Bild, das nur ein Pixel hoch oder breit ist.

</body>

HTML - Styles - Explizites Positionieren

<body>

</div>

</body>

HTML - Styles - Verschachteltes Positionieren

<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>

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

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 - 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

<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

<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

<tr style="font-weight:bold"> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr>

<table>

HTML - Tabellen - Innenabstand

<table>

HTML - Tabellen - Zellenabstand

<table>

cellspacing=0

HTML - Tabellen - Zellenabstand

<table>

cellspacing=0 cellspacing=10

HTML - Tabellen - Größe und Ausrichtung

<table>

HTML - Tabellen - Prozentuale Größe

<table>

HTML - Tabellen - Zellengröße

<tr style="font-weight:bold"> <td style="width:50%">Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr>

<table>

HTML - Tabellen - Leere Zellen

<tr> <td>Schmidt</td> <td>Thomas</td> <td> </td> <td>58452 Witten</td> </tr>

<table>

HTML - Tabellen - Alternierende Farben

<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>

.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>

</html>

HTML - Frames - Horizontale Teilung

<html> <head> <title>Frames</title> </head>

</html>

HTML - Frames - Vertikale und horizontale Teilung

HTML - Frames - Zielangabe bei Links

Link Link

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

<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: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"

<option> Bankeinzug </option> <option> Rechnung </option> <option> Kreditkarte </option> <option> Nachname </option>

</select>

HTML - Formulare - Comboboxen

<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>

Das Programm selbst steht im <head>

JavaScript-Befehl: alert

Javascript - Hintergrundfarben setzen

function machrot() { rect.style.backgroundColor = "red"; }

function machgelb() { rect.style.backgroundColor = "yellow"; }

</script>

Javascript - Funktionen mit Parametern

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

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

Javascript - Bildgrößenänderung bei onmouseover

Javascript - Zentrierte Bildgrößenänderung

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

Die Anordnung erfolgt anhand der ID

Die Anordnung erfolgt beim Laden der Seite

Die Anordnung erfolgt mittels der 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

setbild bekommt einen zweiten Parameter

true = aufblasenfalse = normal darstellen

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

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

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 ...

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

</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

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

{ alert ("Zelle " + this.id + " wurde angeklickt"); }

Wir implementieren eine einfache Funktion cellClicked

this ist das angeklickte HTML-Objekt

Javascript - Minesweeper - Funktion 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

Computer AG Schiller-Gymnasium Witten Thomas Schmidt Oktober 2008 2008/2009.

Documents

Transcript of Computer AG Schiller-Gymnasium Witten Thomas Schmidt Oktober 2008 2008/2009.

© 2006 Pflege Deine Nächsten wie Dich selbst 29. April 2008 Prof. Ch. Bienstein Institut für Pflegewissenschaft Private Universität Witten/Herdecke gGmbH.

Witten Morse

Schiller - Colorado

Schiller - Augsburger Allgemeine

Miloszewski Dawid, Schiller Claus, Schiller Bernd, Stix Daniel, Wallner Raphael present:

Schiller y Verdi

Kanalbaumaßnahme in der Annenstraße - Witten

Archive · 2008. 8. 29. · Aberichwillnächstensuntereuchtretenundfürchterliche Musterunghalten. (Schiller,«Räuber»II.3.) Ach,armerYorik! (Shakespeare,«Hamlet»V.1.) Ach ...

Stadl Witten, 58449 Witten 2 Stadt Witten Ennepe-Ruhr ... · 2017/2018, Während wir im letzten Jahr rd. 240 T € Überschuss ausweisen konnten, liegt das Jahresergebnis 2018 bet

Anreizsystem für die Wahrnehmung der Vorsorgeuntersuchungen bei Kindern Witten-Herdecke, den 07.September 2008 Jutta Falkenstein, Caroline Kohlmey, Anja.

Werk Oberbaustoﬀe Witten - DB Netze

Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.

as unsste - witten-transparent.de

Fotos von Florian Haberey Die Ruhr bei Witten Winterliche Ruhr bei Witten.

Diplomarbeit · 2008-08-20 · Diplomarbeit Friedrich-Schiller-Universit˜at Jena Physikalisch-Astronomische Fakult˜at Institut fur Photonische Technologien e.V., Jena˜ Abteilung

Friedrich von schiller

Schiller Brand Audit

Beratung - Witten

MITTEILUNGEN ZUR STÄDTEPARTNERSCHAFT WITTEN - · PDF file1 MITTEILUNGEN ZUR STÄDTEPARTNERSCHAFT WITTEN - KURSK Freundeskreis Witten - Kursk e.V. Infoblatt Nr. 19 März 2014 Pelmeni

Friedrich-Schiller-Schule LEIPZIG anders.denkend.humanistisch Ideen I Schiller modern Blockmodell II Schiller gemeinsam Profilierungsmodul III Schiller.