DOM-Manipulationen
DOM steht für Document Object Model und erlaubt es, jedes Element auf einer HTML-Seite direkt anzusprechen, auszulesen und zu manipulieren. Es ist auch möglich neue Elemente einzufügen oder bestehende zu entfernen.
Damit eine Manipulation möglich ist, muss allerdings sichergestellt werden, dass die Seite vollständig geladen, bevor der eigene Code ausgeführt wird. Ansonsten existieren die gewünschten HTML noch gar nicht. Das ist z.B. gesichert, wenn der Benutzer erst die Ausführung vom Code anstösst, indem er z.B. auf einen Knopf drückt.
DOM-Manip nach User-Interaktion, globale Variablen
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM-Manipulations in JavaScript</title> <script src="dom-manip.js"></script> </head> <body> <h1 id="seitentitel">Lahmer Titel</h1> <button onclick="losgehts()">Code starten!</button> <p>Der Code wurde <span id="counter">0</span> mal gestartet.</p> </body> </html>
- dom-manip.js
// Globale Variable :-( counter = 0; function losgehts() { counter+=1; document.getElementById("counter").innerHTML = counter; document.getElementById("seitentitel").innerHTML = "Viel besserer Titel!"; }
DOM-Manip ohne globale Variablen und nötiger User-Interaktion
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM-Manipulations in JavaScript</title> <script src="dom-manip.js"></script> </head> <body> <h1 id="seitentitel">Lahmer Titel</h1> <button id="knopf">Code starten!</button> <p>Der Code wurde <span id="counter">0</span> mal gestartet.</p> </body> </html>
- dom-manip.js
// Funktion ausführen, wenn alles geladen ist window.addEventListener('load', function(event) { // lokale Variable, verfügbar in inneren Funktionen let counter = 0; // Damit sich der Code ein bisschen einfacher liest let counterSpan = document.getElementById("counter"); let seitenTitel = document.getElementById("seitentitel"); let knopf = document.getElementById("knopf"); setTimeout(function() { seitenTitel.innerHTML = "Viel besserer Titel!"; }, 1000); // Nach einer Sekunde den Titel ändern // onlick-Event auf dem Knopf registrieren knopf.addEventListener('click', function(event) { if (counter==0) { console.log("Funktionsaufruf im Kontext von:"); console.log(this); console.log("Folgender Event:"); console.log(event); } if (counter<3) { counter++; counterSpan.innerHTML = counter; } else { seitenTitel.innerHTML = "Jetzt reichts aber!"; knopf.disabled = true; } }); });
Aufgaben
Ziel ist es, alle Umrechnungstools auf einer Seite platzieren zu können. Dazu soll Ihre Seite folgenden Konventionen genügen:
- Der nötige HTML-Code wird von Ihrem JavaScript-Code dem Element
<div id='umrechnungen'>hinten angefügt.- Ihr ganzer HTML-Code wird in ein eigenes
div-Element gesetzt. - Die Elemente sollen dabei mit z.B.
document.createElement('h2')erzeugt werden und dann mitelement.appendChild(child)angefügt werden.
- Sämtlicher Code ist im Callback für wenn die Seite geladen ist.
- Ein eventuelles CSS wird dynamisch eingebunden.
- CallBacks werden direkt beim Erzeugen der einzelnen Elemente eingetragen.
- Beispielseite: https://fginfo.ksbg.ch/~ivo/js/12-umrechnungen/
Programmieren Sie eine Webseite, die eine Um- oder Berechnung anbietet. Z.B.
- Umrechnung von $^\circ$C nach $^\circ$F (und/oder umgekehrt). Siehe dazu auch:
- Berechnung des BMI aus Grösse und Körpergewicht.
- Berechnung des eigenen Alters in Tagen, siehe dazu auch folgende Seiten
- Weitere, eigene Ideen.