Tictactoe: b - Webseiten-Elemente mit JavaScript manipulieren: Unterschied zwischen den Versionen

Aus MINT.lentner.net
Zur Navigation springen Zur Suche springen
 
(10 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 4: Zeile 4:
 
*>>> online Testen: [http://www.lepirate-rosenheim.de/privat/tictactoe/tictactoe2.html http://www.lepirate-rosenheim.de/privat/tictactoe/tictactoe2.html]<br>'''
 
*>>> online Testen: [http://www.lepirate-rosenheim.de/privat/tictactoe/tictactoe2.html http://www.lepirate-rosenheim.de/privat/tictactoe/tictactoe2.html]<br>'''
  
−
Der Code erzeugt eine Site, die ein Tic-Tac-Toe-Spielfeld anzeigt. Mithilfe einer Tabelle und dem img-Tag werden die Bilder der Spieler angezeigt (Bot oder Schoko).
+
Wir stellen hier 2 Möglichkeiten vor, das Aussehen einer Website "von außen" zu verändern:
−
 
+
# durch den EventHandler '''On Click''' in '''Zeile 6'''
−
===Drumherum===
+
# durch eine Benutzerintervention auf einen '''Button''' in '''Zeile 10 und 11'''
−
Zeile 1 - 3 sowie 10 - 11 enthalten eine Kommentar bzw. definieren einen html-Bereich und einen body. Beides kann man auch weglassen, falls die Abgrenzung zu anderen Objekten nicht nötig ist.
+
===Interventionen===
−
 
+
# Bei jedem angezeigten Bild einer Website wird ein neues '''Objekt document.images[n]''' mit fortlaufender Nummer n angelegt, auf das man unter diesem Namen zugreifen kann. Das erste solche angelegte Objekt ist '''document.images[0]'''. Für das Objekt document.images[0] wird die JS-Funktion '''schoko()''' hinterlegt, die aufgerufen wird, wenn über dem Objekt document.images[0] das Click-Ereignis eintritt. '''schoko()''' ändert die Bildquelle von document.images[0].
−
===h2-Tag===
+
# Auch bei den beiden Button-Objekten in den Zeilen 10 und 11 werden JS-Funktionen hinterlegt. Im Click-Falle werden die beiden anderen Funktionen aufgerufen und das Bild gelöscht bzw. der Bot angezeigt.
−
... Erzeugt die Überschrift. Das Attribut '''id''' vereinbart einen internen Namen, mithilfe dessen später darauf zurückgegriffen werden kann.
 
−
 
 
−
===Der table-Tag===
 
−
... definiert eine Tabelle</br>
 
−
... '''tr''' eine neue Zeile (table-row)<br>
 
−
... '''td''' eine neue Zelle (table-data)<br>
 
−
 
 
−
===Der img-Tag===
 
−
... definiert ein Bild. Das Attribut '''src''' (Source) spezifiziert den Dateinamen, dessen Ziel im selben Ordner liegen muss, wie die Site.
 
−
 
 
 
==Aufgaben==
 
==Aufgaben==
−
Variiere das Design des Spiels durch eigene Bilder, Farben und Texte.
 

Aktuelle Version vom 11. November 2023, 14:25 Uhr

Ttt source2.png

Wir stellen hier 2 Möglichkeiten vor, das Aussehen einer Website "von außen" zu verändern:

  1. durch den EventHandler On Click in Zeile 6
  2. durch eine Benutzerintervention auf einen Button in Zeile 10 und 11

Interventionen

  1. Bei jedem angezeigten Bild einer Website wird ein neues Objekt document.images[n] mit fortlaufender Nummer n angelegt, auf das man unter diesem Namen zugreifen kann. Das erste solche angelegte Objekt ist document.images[0]. Für das Objekt document.images[0] wird die JS-Funktion schoko() hinterlegt, die aufgerufen wird, wenn über dem Objekt document.images[0] das Click-Ereignis eintritt. schoko() ändert die Bildquelle von document.images[0].
  2. Auch bei den beiden Button-Objekten in den Zeilen 10 und 11 werden JS-Funktionen hinterlegt. Im Click-Falle werden die beiden anderen Funktionen aufgerufen und das Bild gelöscht bzw. der Bot angezeigt.

Aufgaben

Abgerufen von „http://mint.lentner.net/index.php?title=Tictactoe:_b_-_Webseiten-Elemente_mit_JavaScript_manipulieren&oldid=6932“