Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
lehrkraefte:blc:informatik:ffprg1-2024:raster-basics [2024/04/17 21:03] Ivo Blöchliger [Die Raster-Klasse] |
lehrkraefte:blc:informatik:ffprg1-2024:raster-basics [2024/04/26 13:23] Ivo Blöchliger [Bilder speichern und laden] |
||
---|---|---|---|
Line 36: | Line 36: | ||
+ | ===== Einbinden von Knöpfen ===== | ||
+ | In HTML, den Knopf mit einer ID versehen: | ||
+ | <code html> | ||
+ | <button id=" | ||
+ | </ | ||
+ | In JavaScript, den Knopf via ID auslesen und mit einem eventListener versehen: | ||
+ | <code javascript> | ||
+ | let startKnopf = this.document.getElementById(' | ||
+ | startKnopf.addEventListener(' | ||
+ | console.log(" | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Bilder speichern und laden ===== | ||
+ | |||
+ | HTML-Knopf | ||
+ | <code html> | ||
+ | <button id=" | ||
+ | <input type=" | ||
+ | <button id=" | ||
+ | </ | ||
+ | |||
+ | JavaScript: | ||
+ | <code javascript> | ||
+ | let speichernKnopf = this.document.getElementById(' | ||
+ | speichernKnopf.addEventListener(' | ||
+ | |||
+ | function speichern() { | ||
+ | let bild = ""; | ||
+ | for (let y=0; y< | ||
+ | for (let x=0; x< | ||
+ | let wert = meinRaster.getValue(x, | ||
+ | bild += String(wert); | ||
+ | } | ||
+ | } | ||
+ | console.log(bild); | ||
+ | document.getElementById(' | ||
+ | } | ||
+ | | ||
+ | | ||
+ | let ladenKnopf = this.document.getElementById(' | ||
+ | ladenKnopf.addEventListener(' | ||
+ | |||
+ | function laden() { | ||
+ | let bild = document.getElementById(' | ||
+ | console.log(bild); | ||
+ | for (let i=0; i< | ||
+ | let wert = Number(bild[i]); | ||
+ | let x = i % meinRaster.width; | ||
+ | let y = Math.floor(i/ | ||
+ | meinRaster.setValue(x, | ||
+ | } | ||
+ | } | ||
+ | </ | ||