Differences

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

--- lehrkraefte:blc:informatik:ffprg1-2021:js:html-manip [2021/05/03 21:01]
Ivo Blöchliger created
+++ lehrkraefte:blc:informatik:ffprg1-2021:js:html-manip [2021/05/05 19:58] (current)
Ivo Blöchliger
@@ Line 2: / Line 2: @@
 Typischerweise werden die von JavaScript manipulierten HTML-Element mit einer ID versehen und darüber angesprochen.
+Im HTML:
+<code html>
+<div id="humpfdidumpf">Bla bla</div>
+</code>
+In JavaScript:
+<code javascript>
+let res = "";
+for (let i=1; i<21; i++) {
+  res+=`<p>${i}&${i}=${i*i}`;
+}
+// Resultat auf HTML-Seite ausgeben.
+document.getElementById("humpfdidumpf").innerHTML = res;
+</code>
+Mehr zu [[https://www.w3schools.com/jsref/met_document_getelementbyid.asp|document.getElementById()]].
+Es gibt weitere Methoden, Elemente auf einer Seite ausfindig zu machen, die aber für unsere Zwecke wohl noch nicht wichtig sind.
+  * [[https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp|getElementsByClassName()]] (gibt ein Array zurück, möglicherweise leer)
+  * [[https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp|getElementsByTagName()]] (gibt ein Array zurück, möglicherweise leer)
+  * [[https://www.w3schools.com/jsref/met_document_queryselector.asp|querySelector()]] und [[https://www.w3schools.com/jsref/met_document_queryselectorall.asp|querySelectorAll()]]
+<WRAP todo>
+Programmieren Sie ein Seite, die anzeigt, wie oft ein Knopf gedrückt wurde.
+</WRAP>
+<WRAP todo>
+Programmieren Sie eine Seite, die zwei Knöpfe hat, womit sich die Hintergrundfarbe der Seite ändern lässt.
+Hier erfahren Sie, wie der Stil eines HTML-Elements dynamisch geändert werden kann: https://www.w3schools.com/jsref/prop_html_style.asp
+</WRAP>