Programmieren lernen

Programmieren ist groß in Mode (neue Lehrpläne…) und Verlage verdienen sich eine goldene Nase damit. Welche Programmiersprache? - ein Religionskrieg! Zukunftsicher und nützlich ist sicher die Programmierung von HTML5-Webseiten. Auf heutigen Computern reicht das Betriebssystem, um das Erstellen von einfachen Webseiten zu erlernen. Für Webseiten verwendet man HTML (Inhalt), CSS (Darstellung) und JavaScript (Interaktion, Berechnungen). Ich arbeite zwar mit Windows, achte aber auf Plattformunabhängigkeit. Diese kurze JavaScript-Einführung ist für den Einsatz in der Schule gedacht. Sie besteht aus einer einzigen Datei und ist auch im Offline-Modus einsatzbereit.

💡 Seite als speichern mit Ctrl+P (Windows) resp. ⌘+P (Mac)

Symbol		Bedeutung
💡		Tipp, Erklärung
👓		Zusatzinformation
✍		Aufgabe für Lernende
⚠️		Achtung, Vorsicht!
Links		WikipediA, selfHTML, w3schools, YouTube, JS Hero, MediaEvent, Bigler

Suchmaschinen wie Qwant und Google zeigen oft nur Werbung und Resultate auf Englisch.
Ich empfehle deshalb besonders selfHTML. Auch YouTube ist eine große Hilfe!

⚠️ Progammieren ist komplex – gründliche Vorbereitung unerlässlich!

Es gibt keine dummen Fragen – dumm ist nur, nicht zu fragen: Nutze die Links auf dieser Seite!

⇒ Die «seltsamen» Seitenumbrüche in der -Datei erleichtern das Kopieren der Programmierbeispiele.

1. Das HTML-Grundgerüst

Kopiere das Grundgerüst in eine neue Datei im Editor und speichere es unter dem Namen lernen.html auf dem Desktop (Schreibtisch):
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Lernen</title> </head> <body> <h1>Test</h1> <p>Hallo Welt</p> </body> </html>
↑ HTML Grundgerüst 📋 kopieren.

Nun öffnest du lernen.html auch mit dem Browser und ordnest die zwei Fenster nebeneinander an (Editor = Code Time, Browser = Runtime). Nach einer Änderung im Editor, speichere mit Ctrl+S und aktualisiere im Browser mit F5, so wird dein Resultat sichtbar.

💡	Tags sind wie Klammern: <h1>Titeltext</h1>.
💡	Der sichtbare Teil der Seite befindet sich zwischen den beiden <body>…</body>-Tags.
💡	Für eine neue Zeile verwendest du <br>
👓	Moderne HTML5-Seiten beginnen immer mit <!DOCTYPE html>. Innerhalb von <head> ist der Meta-Tag <meta charset="UTF-8"> wichtig für die Zeichenkodierung (z.B. äöü). Der Meta-Tag <meta name="viewport" content="width=device-width"> ist wichtig für die korrekte Skalierung auf Mobilgeräten.
💡	So erzeugt man einen Link: <a href="https://www.qwant.com/" target="_blank">Qwant</a>
👓	Bilder einbinden: <img src="pix/hund.jpg" alt="Bello!"> Für die Bildquelle scr sind zurzeit folgende Formate zulässig: JPG, PNG, WebP und GIF (veraltet). Wichtig: Verwende ausschließlich folgende Zeichen für Dateinamen a..z, 0..9, – und _ (keine Großbuchstaben, keine Sonderzeichen, keine Leerzeichen!)
✍	Mache dich mit den HTML-Tags vertraut und passe die Seite deinen Wünschen an. Titel → <h1> und Absatz → <p>. Vergiss nicht, deine Seite zu speichern und den Browser-Inhalt zu aktualisieren!
✍	Ergänze die Seite mit deinen Lieblings-Links!
✍	Mit der Anweisung <h1 style="color:red;"> kannst du die Schriftfarbe des Titels setzen. Experimentiere weiter…
✍	Im Browser Musik hören? HTML5 Webradio 📋 kopieren ↑
✍	Symbole und Emojis? Kein Problem: Jedes Zeichen hat seinen Code und kann als Entity geschrieben werden: ❤ ⇒ ❤
✍	YouTube-Videos einbetten geht so: YouTube einbetten 📋 kopieren ↑

2. CSS: Farbe & Form

Wir wollen die Seite auch gestalten. Dazu verwenden wir CSS (Cascading Style Sheets). In einer HTML-Datei befinden sich die Stilangaben innerhalb der <style>-Tags. Die zu gestaltenden Elemente werden über Selektoren angesprochen.

Kopiere das CSS-Grundgerüst in eine neue Datei im Editor und speichere es unter dem Namen lernen2.html auf dem Desktop (Schreibtisch):
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Lernen 2</title> <style> body{ background-color : cyan; /* hellblauer Hintergrund */ } h1{ color : red; background-color : yellow; font-family : sans-serif; padding : 8px; } a:link,a:visited {color:#00a; text-decoration:none;} a:focus,a:hover,a:active{color:#fff; background-color:#008;} </style> </head> <body> <h1>Ich lerne CSS</h1> <p>Hallo CSS-Welt</p> <a href="https://www.qwant.com/" target="_blank">Qwant</a> </body> </html>
↑ CSS-Grundgerüst 📋 kopieren.

💡	Beachte die {…} und die ; (Fehler sind schwer zu finden!)
💡	Für Farben kann man auch Hex-Werte benutzen. Orange schreibt man z.B. so #ffa500;
✍	Stelle dir deine eigenen RGB-Farbenℬ zusammen!
💡	Die Anzeige der Links wird über a:link gesteuert.
✍	Kommentiere deinen Code: /* Kommentar */
✍	Schlage bei SelfHTML (CSS) nach.
✍	Experimentiere weiter und suche Hilfe im Web!
💡	Mit dem ID-Selektor #bild7{…} kann man bestimmte Elemente ansprechen. Diese benötigen eine eindeutige ID in ihrem Tag: <img id="bild7" … >
💡	Mehrfach auftretende Elemente erhalten eine Klasse: .klein{…}. Sie benötigen eine Klasse in ihrem Tag: <p class="klein" … > Kleiner Text… </p>
👓	In größeren Projekten lagert man die CSS-Informationen in eine separate Datei style.css aus und bindet sie im HTML-Kopf ein: <style src="css/style.css" />

3. JavaScript: Eingabe & Ausgabe

Mit der Programmiersprache JavaScript erwacht eine Webseite zum Leben. JavaScript orientiert sich stark an der Sprache C.

Kopiere das JavaScript-Grundgerüst in eine neue Datei im Editor und speichere es unter dem Namen lernen3.html auf dem Desktop (Schreibtisch):
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lernen 3</title> </head> <body> <h1>Ich lerne JavaScript</h1> <script> var name=prompt("Wie heisst du?","Name"); alert("Willkommen "+name); </script> </body> </html>
↑ JavaScript-Grundgerüst 📋 kopieren.

💡	Das eigentliche Programm befindet sich zwischen den <script>…</script>-Tags. Befehlszeilen enden mit einem ; (Strichpunkt).
👓	Mit name=prompt(Frage,Vorgabe) wird der Variable name die Benutzereingabe zugewiesen.
👓	Die Methode alert(Meldung) gibt den Text in einem Dialogfenster aus.
👓	JavaScript ist case sensitive (Name ≠ name).
✍	Ergänze das Programm mit Fragen nach Alter, Hobby usw.
💡	Mit \n erzeugst du einen Zeilenumbruch in prompt und alert. Beispiel: alert("Hallo "+name+"!\nDein Hobby ist "+hobby);

Eleganter gehen Eingaben via Formular <form> :
<!DOCTYPE html> <html lang="de-CH"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script> function formatCH(x) {return x.toLocaleString("de-CH");} function rechne(n){ document.getElementById("resultat").innerHTML="Du bist rund "+formatCH(n*365)+" Tage alt. "+ "Also<br>"+formatCH(n*365*24)+" Stunden oder<br>"+ formatCH(n*365*24*60)+" Minuten oder<br>"+formatCH(n*365*24*3600)+" Sekunden!"; } </script> </head><body> <h1>Altersberechnung</h1> <form onsubmit="rechne(this.zahl.value);return false;"> <label for="zahl">Dein Alter in Jahren: </label> <input type="number" id="zahl" value=16 min=1 max=120 autofocus> <button type="submit">Rechne!</button> </form> <p id="resultat"></p> </body></html>
↑ Formular-Beispiel 📋 kopieren.

4. JavaScript: Wenn, dann, sonst…

Eine Bedingte Anweisung ist ein Programmabschnitt, der nur unter einer bestimmten Bedingung ausgeführt wird. In JavaScript schreiben wir:
if (Bedingung) {Anweisungen;}
Auch Wenn, dann, sonst ist möglich:
if (Bedingung) {WahrAnweisung;} else {FalschAnweisung;}

Kopiere das Beispiel in eine neue Datei im Editor und speichere es unter dem Namen lernen4.html auf dem Desktop:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lernen 4</title> <script> function geheim(){ var pwd, text; pwd=prompt("Dein Kennwort?"); if (pwd=="5es4m") { alert("Kennwort richtig.\nTrete ein!"); text=""; document.getElementById("meldung").innerHTML+=text; } else { alert("Kennwort falsch!"); } } </script> </head> <body> <h1>Geheimnis</h1> <button onclick="geheim()">Eingang</button> <p id="meldung"></p> </body> </html>
↑ 📋 kopieren.

💡	Die Funktion geheim() wird durch den HTML-Knopf <button> aufgerufen. Das Schlüsselwort onclick ist ein Event (Ereignis).
💡	Gleich = ist nicht gleich == ! Das Zeichen = ist eine Zuweisung und == ist ein Vergleichsoperator. So vergleicht man in JavaScript: == → ist gleich != → ist nicht gleich > → ist größer >= → ist größer od. gleich < → ist kleiner <= → ist kleiner od. gleich
💡	Man kann auch mehrere if-Bedingungen verknüpfen: if (note>=4 && note<5) { alert("Genügend."); } Die Logischen Operatoren sind: && (und), \|\| (oder).
👓	Diese einfache Kennwort-Abfrage ist nicht sicher, aber die Wenn, Dann, Sonst-Logik ist wie bei professionellen Anwendungen!
✍	Schreibe ein Quiz! Reagiere mit if () {} else {} auf die Antworten der User.
✍	Passe die Variable text deinen Wünschen an. Die Anweisung document.getElementById("meldung").innerHTML+=text; schreibt diesen Text in den Absatz <p id="meldung"></p>. Du kannst also auf die Anweisung alert("Kennwort richtig.\nTrete ein!"); verzichten! Verwende dies für die Antworten in deinem Quiz!
⚠️	Benutze die Debugger-Console des Browsers `F12`. Hier werden JavaScript-Fehler mit Zeilen- & Spaltenangaben angezeigt.
✍	⚡ Schreibe ein Zahlenspiel! Die Grundlagen dazu findest du hier: Zahlenspiele. Beim Ausprobieren und Anpassen des Quellcodes kannst du viel lernen! Zwar funktioniert das Spiel, aber es ist nicht fehlerfrei: Verschönere und verbessere es!
✍	Viele Tipps, einen praktischen Editor und ein weiteres Zahlenraten findest du in diesem JavaScript-Kurs.

5. JavaScript: Zählen und rechnen!

Zum einfachen Zählen verwenden wir Zählschleifen (en: loops) mit for.

Kopiere das Beispiel in eine neue Datei im Editor und speichere es unter dem Namen lernen5.html auf dem Desktop:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lernen 5</title> <script> function quadratZahlen(){ var text=""; for (var i=1; i<21; i++) { text+=i+" × "+i+" = "+i*i+"<br>"; } document.getElementById("zeig").innerHTML=text; } </script> </head> <body> <h1>Zählen und Rechnen</h1> <button onclick="quadratZahlen()">Quadratzahlen</button> <pre id="zeig"></pre>  </body> </html>
↑ 📋 kopieren.

💡	Die Funktion quadratZahlen() wird durch den HTML-Knopf <button> aufgerufen.
💡	Die Schleife for (var i=1; i<21; i++) {} zählt die Laufvariable i von 1 bis 10 hoch.
💡	text ist eine Variable des Typs String. Sie wird schrittweise mit dem auszugebenden Text gefüllt.
💡	Die Anweisung document.getElementById("zeig").innerHTML = text; weist dann den text dem Absatz <pre id="zeig"></pre> zu (jetzt noch leer!).
💡	<!-- Textausgabe --> ist ein Kommentar. Kommentare sind wichtig, um sich auch später im Code zurechtzufinden.
⚠️	Debugger `F12` einschalten! Besondere Vorsicht mit den Argumenten des for-Befehls: Bei einem logischen Fehler kann es vorkommen, dass sich der Browser aufhängt!
✍	Füge eine Funktion für die Neunerreihe hinzu: function reihe9() und erstelle den dazu gehörenden HTML-Befehlsknopf Neunerreihe.
✍	Schreibe eine Funktion für beliebige Reihen: function reihe(zahl) und erstelle die dazu gehörenden HTML-Befehlsknöpfe <button onclick="reihe(7)">7er Reihe</button> …
✍	Wie wäre es mit einer function für Quadratwurzeln (en: Square Root)? Die JavaScript-Methode Math.sqrt() kann das: Math.sqrt(2) ergibt z.B. 1.4142135623730951.
👓️	Es gibt noch weitere Schleifenarten…
👓️	Lass dich mathematisch inspirieren: Teilbarkeit mit JavaScript ℬ!
👓️	Benutze einen Validator für deinen Code: W3C^® oder Validator.nu. So ist garantiert, dass dein Code auf allen Systemen fehlerfrei läuft.

6. JavaScript: Interaktion

Der Tag <input> dient der Interaktion. Man kann damit Zahlen, Wörter (Strings = Zeichenketten) und vieles mehr erfragen. Das Beispiel lernen6.html ist ein Zentimeter ↔ Inch Umrechner. Ein Wert wird abgefragt und auf Tastendruck (onkeyup) in das jeweils andere Maß verwandelt:

Kopiere das Beispiel in eine neue Datei im Editor und speichere es unter dem Namen lernen6.html auf dem Desktop:
<!DOCTYPE html> <html lang="de-CH"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lernen 6</title> <style> body{ background-color : #eff; font-family : sans-serif; } label{ display : inline-block; /* Breite */ width : 8em; margin-top : 1em; } input[type="number"]{ width : 10em; font-family : monospace; font-size : 1.15em; background-color : #ffe; } fieldset{ width : 22em; background-color : #eee; } </style> <script> var faktor=2.54; function cm2in(cm){ document.getElementById("zoll").value=cm/faktor; } function zoll2cm(inch){ document.getElementById("cm").value=inch*faktor; } </script> </head> <body> <h1>Zentimeter &LeftRightArrow; Zoll</h1> <fieldset> <legend>Längenmaße umrechnen</legend> <label for="cm">Zentimeter:</label> <input type="number" name="cm" id="cm" placeholder="cm eingeben" onkeyup="cm2in(this.value)" autofocus step="any"> cm<br> <label for="zoll">Zoll (US):</label> <input type="number" name="zoll" id="zoll" placeholder="Zoll eingeben" onkeyup="zoll2cm(this.value)" step="any"> in </fieldset> </body> </html>
↑ 📋 kopieren.

💡	Die Interaktion mit dem User findet zwischen den beiden <fieldset>-Tags statt.
💡	Mit <input type="number" … onkeyup="cm2in(this.value)" … > erfolgt die Abfrage. Die Funktion cm2in(this.value) übernimmt den Wert der Eingabe als Parameter zur Umrechnung.
💡	Der lange CSS-<style>-Teil enthält em, eine relative Größenangabe.
✍	⚡ Schreibe selbst weitere Umrechner für km↔mi, oder °C↔°F oder …
✍	Vereine mehrere Umrechner auf einer Seite: Vorsicht mit den id-Attributen!
✍	Wie wäre es mit einem Umrechner für Jahre↔Sekunden?
👓️	Es gibt noch weitere Input- Typen…
👓️	Überprüfe deinen Code: W3C^®-Validator.

Praktische JS-Funktionen

Aktuelles Datum ermitteln

// aktuelles Datum ermitteln
function aktuellesDatum() {
  var jetzt = new Date();
  return jetzt.toLocaleString(navigator.language,
                              {weekday:"long", year:"numeric", month:"long", day:"numeric"});
}

↑ 📋 kopieren.

Text in die Zwischenablage kopieren

// Text in die Zwischenablage kopieren
function copyToClipboard(text) {
  var ta = document.createElement("textarea");
  ta.textContent = text; ta.style.position = "fixed";
  document.body.appendChild(ta); ta.select();
  try {document.execCommand("copy");}
  catch {console.warn("Zwischenablage verweigert.");return false;}
  finally {document.body.removeChild(ta);}
}

↑ 📋 kopieren.

Element kurze Zeit aufleuchten lassen

// Element kurze Zeit aufleuchten lassen
function flashBackGround(el) {
  if (el!=null) {
    var style=el.style;el.style.backgroundColor="#aaffaa";
    setTimeout(function(){el.style=style;}, 555); // 555 Millisekunden
  }
}

↑ 📋 kopieren.

Zahl formatieren

// Zahl im CH-Format ausgeben (12345.6789 → 12'345.6789)
function zahlCH(x) {
  return x.toLocaleString("de-CH",{maximumFractionDigits:10});
}

↑ 📋 kopieren.

Tastatur: Hotkeys programmieren

// Hotkeys erstellen
document.onkeydown=function(e) { 
  if (e.altKey && e.code=="KeyT") {          // [Alt] + [T]
    e.preventDefault(); machEtwas();
  } else if (e.shiftKey && e.code=="F2") {   // [Shift] + [F2]
    e.preventDefault(); machSonstWas();
  }
}

↑ 📋 kopieren.

7. JavaScript: Zeichnen auf Canvas

Man kann externe Bilder mit <img src="https://www.qwant.com/favicon.png" alt="Qwant"> einbinden, aber es geht aucu anders: In lernen7.html zeichnen wir selber!

Kopiere das Beispiel in eine neue Datei im Editor und speichere es unter dem Namen lernen7.html auf dem Desktop:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lernen 7</title> <script> function zeichneCH() { var canvas = document.getElementById("papier"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; // rot ctx.fillRect(0, 0, 300, 300); ctx.fillStyle = "#FFFFFF"; // weiß ctx.fillRect(120, 50, 60, 200); // vertikal ctx.fillRect(50, 120, 200, 60); // horizontal } document.addEventListener("DOMContentLoaded",function(event){ zeichneCH(); }); </script> </head><body> <h1>Canvas Demo</h1> <canvas id="papier" width="300" height="300" style="border:1px solid #000000;"></canvas> </body> </html>
↑ 📋 kopieren.

💡	document.addEventListener("DOMContentLoaded" … «hört» auf den Browser: Sobald das DOM geladen ist, wird zeichne(ch) ausgeführt.
💡	<canvas> ist unsere Leinwand, sie hat die id papier. Über diesen Selektor kann sie angeprochen werden.
💡	Unser Zeichenstift in ctx=canvas.getContext("2d"); hat viele Fähigkeiten.
✍	Zeichne weitere Flaggen (Frankreich, Deutschland usw.). Beachte die Proportionen und Farben!
✍	Kombiniere deine Flaggen auf einer Seite (mehrere <canvas> erforderlich).
👓️	Unsere Flaggen sind hochwertige Vektorgrafiken, sie passen ihre Auflösung dem Ausgabemedium an!
👓️	Mit svg kann man SVG-Vektorgrafiken einbinden. Ein ausgezeichnetes, freies Vektorgrafik-Programm ist InkScape. Alternativen sind folgende Online SVG-Editoren: Editor 1, Editor 2 oder Editor 3. Hier findest du die jetzt gültige SVG-Sprachdefinition (Englisch).
✍	Bette eine <svg>-Zeichnung in deine Seite ein: <svg width="300" height="200" viewbox="0 0 3 2"> <desc>Drapeau de la France</desc> <rect x="0" y="0" width="1" height="2" fill="#002654" /> <rect x="1" y="0" width="1" height="2" fill="white" /> <rect x="2" y="0" width="1" height="2" fill="#CE1126" /> </svg> ↑ 📋 kopieren.
✍	Erstelle eigene <svg>-Zeichnungen zum Einbetten!

8. Wie weiter?

Mach es wie die Großen! Studiere mit Ctrl+U (Mac: ⌘+U) den Quellcode interessanter Websites! Vermeide die «bequemen» Frameworks (Bibliotheken), sie blähen deine Seiten auf und machen dich abhängig.

Moderne Seiten sind responsive (Smartphone, Tablet, PC usw.) – sie müssen auf allen Geräten funktionieren.

Oft gebraucht – schwierig zu merken:

📋

Weitere, interessante Themen:

Math.function		Das JS-Objekt Math hat viele Methoden und Eigenschaften
str.regexp		String.replace() Regular Expressions (Zeichen ersetzen)
Array		Arrays (Daten-Sammlungen → Datenbanken)
Web Speech API		Das Web Speech-API ermöglicht die Sprachsynthese.
CSS-Generator		Generator für einfache responsive Menüs: CSSmenu.zip . Beispiel: css.zip oder einfache Version ohne Menü cssr.zip

9. Links

Link	Beschreibung	Tastenkürzel
HTML-Grundgerüst	in die Zwischenablage kopieren 📋	`Ctrl` + `⇑` + `←`
selfHTML	Wiki, Grundlagen, Tutorials	`Alt` + `S`
MediaEvent	Professionelles Design, Tutorials	`Alt` + `M`
w3schools	Umfangreiche Grundlagen, Tutorials	`Alt` + `W`
vscode.dev	Visual Studio Code (Editor im Browser)	`Alt` + `L`
HTMLCodes.ws	Alphabetische HTML-Übersicht	`Alt` + `C`
JavaScript Hero	Online JavaScript üben	`Alt` + `H`
YouTube	JavaScript-Tutorials suchen	`Alt` + `Y`
RGB/A-Farbenmixer	RGB/α-Farbwerte codieren ✚	`Alt` + `R`
Google-Farbenmixer	RGB-Farbwerte codieren (intuitiv)	`Alt` + `G`
Qwant-Suche	Qwant: Suche HTML / CSS / JavaScript	`Alt` + `Q`
Zeichentabellen	Symbole & Sonderzeichen codieren ✚	`Alt` + `A`
keycode.info	JavaScript KeyCodes	`Alt` + `K`
KeybSG	Tastatur der Schweiz ✚	`Alt` + `T`
getEmojis 😂	Emojis suchen & codieren	`Alt` + `E`
Das Curry-Buch	Unterhaltsamer Einstieg in die JS-Programmierung
HTML image map creator	Erstellen von MAPs (verweissensitive Grafiken)
DOM mit JavaScript	HTML-DOM mit reinem JavaScript steuern
Validator	HTML-Seiten überprüfen	`Alt` + `V`

Programmieren lernen

Eine kurze Einführung
in HTML, CSS und JavaScript
für den Unterricht

Programmieren lernen

►︎ Vorwort für Lehrkräfte

1. Das HTML-Grundgerüst

2. CSS: Farbe & Form

3. JavaScript: Eingabe & Ausgabe

4. JavaScript: Wenn, dann, sonst…

5. JavaScript: Zählen und rechnen!

6. JavaScript: Interaktion

Praktische JS-Funktionen

Aktuelles Datum ermitteln

Text in die Zwischenablage kopieren

Element kurze Zeit aufleuchten lassen

Zahl formatieren

Tastatur: Hotkeys programmieren

7. JavaScript: Zeichnen auf Canvas

8. Wie weiter?

Oft gebraucht – schwierig zu merken:

Weitere, interessante Themen:

9. Links

Programmieren lernen

Eine kurze Einführungin HTML, CSS und JavaScriptfür den Unterricht

Programmieren lernen

►︎ Vorwort für Lehrkräfte

1. Das HTML-Grundgerüst

2. CSS: Farbe & Form

3. JavaScript: Eingabe & Ausgabe

4. JavaScript: Wenn, dann, sonst…

5. JavaScript: Zählen und rechnen!

6. JavaScript: Interaktion

Praktische JS-Funktionen

Aktuelles Datum ermitteln

Text in die Zwischenablage kopieren

Element kurze Zeit aufleuchten lassen

Zahl formatieren

Tastatur: Hotkeys programmieren

7. JavaScript: Zeichnen auf Canvas

8. Wie weiter?

Oft gebraucht – schwierig zu merken:

Weitere, interessante Themen:

9. Links

Eine kurze Einführung
in HTML, CSS und JavaScript
für den Unterricht