Veränderungen durch Benutzeraktionen (Javascript)
Nicht jeder mag gelbe Schrift auf
hellblauem Hintergrund. Deshalb bieten wir folgenden Service:
Wer
die Gestaltung eines Absatzes nicht mag, der klickt einmal darauf und
– die Farben verschwinden.
Wie das geht?
Dem <p>Tag
des Absatzes fügen wir einen Listener ("Zuhörer")
hinzu, der darüber wacht, ob dieses Element angeklickt wird. Sobald
dieses Event (Ereignis) eintritt, löst er eine Aktion
des Browsers aus.
<p
onclick="this.style.color='black';
this.style.backgroundColor='none';">
Hier
steht der Text.
</p>
Achtung: Unterschiedliche Schreibweise bei CSS und Javascript beachten.
Unter CSS haben wir den
Hintergrund mit background-color
beschrieben.
Bei dem jetzt verwendeten Javascript-Befehl
backgroundColor
ist das Minuszeichen verboten, weil es bereits als Rechenzeichen
benutzt wird.
Bei CSS wird ein Doppelpunkt benutzt, bei Javascript ein Gleichheitszeichen.
Hochkommas innerhalb Hochkommas müssen unterschiedlich sein, also ' " " ' oder " ' ' ".
Beispiele: ein Element verändern
bei Anklicken das Format ändern
<p style="color:red;" onClick = "this.style.color='blue';">
rot wird blau
</p>
bei Überfahren Bilder tauschen
<img src="bild.jpg"
onMouseover
= "this.src='bild2.jpg';"
onMouseout="this.src='bild1.jpg';"
/>
bei Anklicken Farbtausch <span onClick = "farbwechsel(this,'red','blue');">...</span>
unter Verwendung eines Javascript-Programms, das im <head></head> angegeben wird
<script type="text/javascript">
function
farbwechsel(element, version1, version2) {
if
(element.style.color == version1) {
element.style.color
= version2;
}
else {
element.style.color
= version1;
}
}
</script>
bei Anklicken nächstes Bild <img src="bild0.jpg" onClick = "naechstesBild(this);" />
unter Verwendung einer Variable und eines Programms
<script type="text/javascript">
nummer
= 0; // die Bilder heissen bild0.jpg, bild1.jpg, ...,
bild7.jpg
function naechtesBild(element)
{
if (nummer<7)
{
nummer++;
}
else {
nummer
= 0;
}
element.src
= 'bild' + nummer + '.jpg';
}
</script>
Beispiele: ein anderes Element verändern
Problem: Wie wird festgelegt, welches andere Objekt verändert werden soll?
ein anderes Element verstecken
Version 1: Das Element über den Index finden
(Das geht bei images und forms)
<p>text</p>
<img
src="bild.png" style="visibility:visible;"
/>
<p>noch mehr text</p>
<button
onclick="document.images[0].style.visibility='hidden';">
Klick
</button>
Version 1: Das Element über seine Id finden
<p id="eins">eins</p>
<p
id="zwei">zwei</p>
<p
id="drei">drei</p>
<p
id="vier">vier</p>
<p id="fuenf">fuenf</p>
<button onclick="document.querySelector('#drei').style.visibility='hidden';">verstecke drei</button>
Version 2: Das Element über den Index finden
Achtung: Der kleinste Index ist 0. Der Index 3 bezieht sich also auf das 4. Element!
<p id="eins">eins</p>
<p
id="zwei">zwei</p>
<p
id="drei">drei</p>
<p
id="vier">vier</p>
<p id="fuenf">fuenf</p>
<button onclick="document.querySelectorAll('p')[3].style.visibility='hidden';">verstecke 3</button>
ein anderes Element verändern (z.B. bei Anklicken eines Bildes einen Text ändern)
<p><img
src="bild.jpg" onClick =
"document.getElementById('info').innerHTML='Danke.'"
></p>
<p
id="info">Klicke auf das Bild.</p>
Aufgabe
Wenn auf ein Bild geklickt (onclick)
wird, soll das Bild um 25% breiter werden.
...
onclick ... this.width=1.25*this.width ...
Wenn auf das Bild doppelgeklickt (ondblclick) wird, soll das Bild um 20 % schmaler werden.
Aufgabe
Wenn die Maus auf einen Paragraphen geführt wird (onmouseover), soll sein Hintergrund "hellblau" erscheinen.
Wenn die Maus den Paragraphen verläßt (ondmouseout), soll der Hintergrund wieder die alte Farbe 'white' annehmen.
Dasselbe mit einen durch <span> und </span> eingeschlossenen Wort.
Ergänzung
Was aber, wenn unbekannt ist, welche
Hintergrundfarbe der Paragraph hatte?
Lösung: Vor dem
Umschalten auf "hellblau" wird der alte Farbwert
gespeichert:
onmouseover="alteFarbe=this.style.backgroundColor;this.style.backgroundColor='red';"
Dieser
Wert wird dann später wieder
abgerufen:
onmouseout="this.style.backgroundColor=alteFarbe;"
Frage: Warum werden bei 'red' Hochkommas gesetzt bei alteFarbe nicht?
Aufgabe
Bei jedem Klick (onclick) auf den Paragraphen soll die Schriftfarbe von „schwarz“ nach „rot“ und zurück wechseln.
<p onclick=“wechsle(this);“>...</p>
Weiter vorne (möglichst im <head>) füge ein:
<script>
function
wechsle(element) {
if (element.style.color ==
“black“) {
element.style.color=“red“;
}
else {
element.style.color=“black“;
}
}
</script>
Erweitere dann das Programm, so dass von schwarz auf rot auf grün usw. gewechselt wird.
Aufgabe (Farbmischer)
a. In einem Textfeld wird der Farbcode in der Form #33AF71 eingegeben. Die Farbe wird dann Hintergrundfarbe des Dokuments.
<input type="text" onchange="document.body.style.background=this.value;">
b. Die Farbe wird mit Hilfe von drei Schiebereglern für rot, grün, gelb eingestellt.
<input
id="red" type="range" min="0"
max="255" value="255" onchange="farbe()">
<input
id="green" type="range" min="0"
max="255" value="255" onchange="farbe()">
<input
id="blue" type="range" min="0"
max="255" value="255"
onchange="farbe()">
<script>
function
farbe() {
red =
document.querySelector('#red').value;
green
= document.querySelector('#green').value;
blue
=
document.querySelector('#blue').value;
document.body.style.background
= 'rgb(' + red + ',' + green + ',' + blue + ')';
}
</script>
Statt im HTML-Code jedem input den Befehl onchange="farbe() hinzuzufügen, kann das nachträglich in Javascript erfolgen. Das hat den Vorteil, dass HTML-Struktur und Javascript-Aktion klar voneinander getrennt sind.
document.querySelectorAll('input[type="range"]').forEach(
el
=> addEventListener('change',farbe)
);