lehrkraefte:blc:informatik:ffprg1-2021:js:html-manip

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
lehrkraefte:blc:informatik:ffprg1-2021:js:html-manip [2021/05/05 11:33] – Ivo Blöchligerlehrkraefte:blc:informatik:ffprg1-2021:js:html-manip [2021/05/05 17:58] (current) – Ivo Blöchliger
Line 1: Line 1:
 +====== HTML-Manipulation ======
 +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>