JavaScript [KSR Wiki]

Die weltweit am meisten verwendete Programmiersprache ist JavaScript, die Sprache, mit denen man Webseiten programmieren kann.

Erstelle ein File script.js (js für JavaScript) im gleichen Ordner wie das index.html File. Binde das JS-File nun im HTML ein, in dem du in dessen head die folgende Zeile hinzufügst:

<html>
<head>
    ....
    <script src="script.js"></script>
</head>
<body>
    ....
</body>
</html>

Alle Sprachelemente wie Variablen, Schleifen, Verzweigungen und Funktionen gibt es auch in JavaScript - der Syntax (die Sprachregeln) sind nur etwas anders. Im folgenden Codeblock werden für alle kurze Beispiele gemacht.

Alle Codezeilen müssen mit Semikolon enden.
Anstelle von Einrückungen wie in Python arbeitet man mit geschweiften Klammern {...}, um Codeblöcke zu kennzeichnen.
Verwende AutoComplete in VSCode: Um z.B. eine for-Schleife zu programmieren, tippe for, wähle dann „$\square$ for“ aus und drücke Enter und schon hast du das Grundgerüst für eine for-Schleife.
Verwende ChatGPT o.ä.
Konsole im Browser: Im JS-Code kannst du mit console.log(...) dort etwas ausgeben. Auch Fehler werden dort angezeigt. Die Browser-Konsole öffnet man wie folgt: Rechte Maustaste und …
- Chrome: „Untersuchen“ → „Konsole“
- Safari (Mac): „Element-Informationen“ → „Konsole“

Hier werden die wichtigsten Sprachelemente von JavaScript ganz kurz erklärt:

// IN KONSOLE AUSGEBEN (quasi das print() von JavaScript)
console.log(42);
 
// VARIABLEN & KONSTANTEN
let x = 42; // Variablen benötigen let
const y = 43; // Konstanten sind wie Variablen, ausser dass sie sich nicht verändern lassen.
// im Zweifelsfall: einfach let verwenden
 
// WHILE-SCHLEIFE
let i = 0;
while (i < 10) {
    console.log(i);
}
 
// FOR-SCHLEIFE
for (let i = 0; i < 10; i++) {
    console.log(i);
}
 
// VERZWEIGUNG
x = 42;
if (x > 0) {
    console.log("Zahl positiv");
} else if (x == 0) {
    console.log("Zahl Null");
} else {
    console.log("Zahl negativ");
}
 
// FUNKTION
function mySquare(x) { // Deklaration der Funktion
    return x*x;
}
 
let sq = mySquare(5); // Funktionsaufruf
console.log(sq);

Eingabe / Input

<input type="number" id="inputNumber" placeholder="Gib eine Zahl ein" onchange="handleKeyPress(event)">
// gibt andere types: wie text, date, password
// onchange="handleKeyPress(event)": JS-Funktion handleKeyPress wird aufgerufen, sobald Enter gedrückt wird
// alternativen zu onchange:
   // oninput: Aufruf sobald Input geändert
   // onkeydown, onkeyup
   // on...

function handleKeyPress(event) {
    let inputNr = document.getElementById("inputNumber"); // identifiziert HTML-Element über dessen ID
    console.log(inputNr.value); // und gibt dessen Wert aus
}

HTML-Element mit JS ändern

<p>Die Zahl: <span id="spanNr"></span></p>

// kann in JS über id direkte auf Element zugreifen:
spanNr.textContent = 41;

Alternative Methode

Idee: Einfache Website mit JavaScript programmieren, die einige kleine (mehr oder weniger) nützliche Tools beinhaltet:

Vorgehen:

Zusammen „Schnapps-Bier-Sirup“ programmieren.
Selber einige der restlichen Tool programmieren. Tipps:
1. Siehe Tutorial oben und Tipps unten.
2. Recherchiere selbst im Internet
3. verwende AI (auf sinnvolle Art und Weise)
Website mit CSS stylen
eigene Idee(n) einbauen

Tipps Clicker

Tipps No Click no Fun

Tipps Würfel

Tipps Buchstabenzähler

JavaScript

JS einbinden

Bemerkungen und Tipps

JavaScript Basics

Beispiele für JS

Eingabe / Input

HTML-Element mit JS ändern

Auftrag: Dies und das

Lösungen LP