kurse:ef05a-2021:js:htmlmanip

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
kurse:ef05a-2021:js:htmlmanip [2022/02/16 07:48] – [Aufgaben] Ivo Blöchligerkurse:ef05a-2021:js:htmlmanip [2022/02/16 08:17] (current) – [Aufgaben] Ivo Blöchliger
Line 1: Line 1:
 +====== 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 =====
 +
 +<code html>
 +<!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>
 +</code>
 +
 +<code javascript dom-manip.js>
 +// Globale Variable :-(
 +counter = 0;
 +
 +function losgehts() {
 +        counter+=1;
 +        document.getElementById("counter").innerHTML = counter;
 +        document.getElementById("seitentitel").innerHTML = "Viel besserer Titel!";
 +}
 +
 +</code>
 +
 +===== DOM-Manip ohne globale Variablen und nötiger User-Interaktion =====
 +
 +<code html>
 +<!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>
 +</code>
 +
 +<code javascript 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;
 +                }
 +        });
 +
 +});
 +</code>
 +
 +====== 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 mit ''element.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/
 +<WRAP todo>
 +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:
 +    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
 +    * https://stackoverflow.com/questions/17047497/difference-between-change-and-input-event-for-an-input-element
 +  * Berechnung des BMI aus Grösse und Körpergewicht.
 +  * Berechnung des eigenen Alters in Tagen, siehe dazu auch folgende Seiten
 +    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
 +    * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
 +  * Weitere, eigene Ideen.
 +</WRAP>
 +
 +
 +
 +
 +