lehrkraefte:blc:informatik:efi-2023:js

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:efi-2023:js [2024/04/25 09:07] – Ivo Blöchligerlehrkraefte:blc:informatik:efi-2023:js [2024/04/25 10:00] (current) – Ivo Blöchliger
Line 1: Line 1:
 +  * HTML
 +  * CSS (Cascade Style Sheet)
 +  * JS (JavaScript)
  
 +  * Browser loop -> Video
 +
 +In VSCode die Extension «Live Server» installieren.
 +
 +[[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:ffprg1-2024:htmlinteraction|erste HTML interaktion]]
 +
 +
 +[[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:ffprg1-2024:cheat-sheet|Cheat-Sheet]]
 +
 +
 +====== Temperatur-Rechner ======
 +
 +<code html>
 +   Grad Celsius <input type="number" id="grad"><br>
 +   Grad Fahrenheit <input type="number" id="fahrenheit"><br>
 +
 +</code>
 +
 +<code javascript>
 +window.addEventListener('load',function() {
 +    let grad = this.document.getElementById('grad');
 +    let fahrenheit = this.document.getElementById('fahrenheit');
 +
 +    function c2f() {
 +        let f = Number(grad.value)*1.8+32;
 +        fahrenheit.value=f;
 +        console.log(`Die Umrechnung gibt ${f}`);
 +    }
 +
 +    grad.addEventListener('input', c2f);
 +
 +    function f2c() {
 +        let c = (Number(fahrenheit.value)-32)/1.8;
 +        grad.value=c;
 +        console.log(`Die Umrechnung gibt ${c}`);
 +    }
 +    fahrenheit.addEventListener('input', f2c);
 +
 +});
 +</code>