....
....
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.
==== Bemerkungen und Tipps ====
* 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"
==== JavaScript Basics ====
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);
==== Beispiele für JS ====
=== Eingabe / Input ===
// 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 ===
Die Zahl:
// kann in JS über id direkte auf Element zugreifen:
spanNr.textContent = 41;
++++Alternative Methode|
Alternativ kann man mit `document.getElementById()` auf ein Element zugreifen, dieses in einer Variable speichern und über diese dann den Wert ändern.
Vorteil: Code etwas einfacher nachvollziehbar, gerade wenn länger ist.
Nachteil: mehr Code
++++
==== Auftrag: Dies und das ====
**Idee:** Einfache Website mit JavaScript programmieren, die einige kleine (mehr oder weniger) nützliche Tools beinhaltet:
{{ :gf_informatik:web_sca:diesunddas_1.png?300 |}}
{{ :gf_informatik:web_sca:diesunddas_2.png?300 |}}
**Vorgehen:**
1. **Zusammen "Schnapps-Bier-Sirup"** programmieren.
1. Selber einige der restlichen Tool programmieren. Tipps:
1. Siehe Tutorial oben und Tipps unten.
1. Recherchiere selbst im Internet
1. verwende AI (auf sinnvolle Art und Weise)
1. Website mit CSS **stylen**
1. eigene Idee(n) einbauen
++++Tipps Clicker|
* Erstelle im JavaScript-Code eine Variable, z.B. `counter`, die zählt, wie oft man bereits geklickt hat.
* Erstelle im HTML einen Button.
* Über den Even `onclick` (ganz ähnlich wie `onchange` beim SBS) wird beim Klicken auf den Button ...
* ... eine Funktion im JavaScript-Code aufgerufen, die die Variable `counter` um $1$ erhöht.
* Vergesse auch nicht, den `counter` anzuzeigen.
++++
++++Tipps No Click no Fun|
* Für die Wahrscheinlichkeit: mit `Math.random()` erzeugst du Zufallszahlen zwischen $0$ und $1$, z.B. $0.4159567158853703$. Wenn diese Zahl unter einem gewissen Wert ist, z.B. $0.1$ (also $10%$), wird counter zurückgesetzt.
++++
++++Tipps Würfel|
* Mit `Math.floor(Math.random() * 6) + 1;` erzeugst du eine zufällige natürliche Zahl im Bereich von $1$ bis und mit $6$.
* Für Anzeige des Würfels: verwende HTML-Element **canvas**. Recherchiere online.
++++
++++Tipps Buchstabenzähler|
* Verwende ein Textfeld (textarea)
++++
===== Lösungen LP =====
Dies und das
Dies und das
Schnaps-Bier-Sirup
Du darst trinken:
Clicker
Clicker Count: 0
No Click not Fun!
Ziel: Counter so hoch bringen wie möglich. Aber Achtung: bei jedem Klick besteht die (relativ kleine) Wahrscheinlichkeit, dass der Counter zurückgesetzt wird! Mögliches Spiel: Wer erreicht den höchsten Wert in einer Minute?
Clicker Count: 0
Würfel
Dice:
Buchstabenzähler
Buchstabenzähler: 0
Vergangene Tage
Anzahl vergangene Tage: 0
// SCHNAPS-BIER-SIRUP
function handleKeyPressSBS(event) {
let inpAge = document.getElementById("inputAge");
let drink = document.getElementById('spanDrink');
let age = inpAge.value;
if (age >= 18) {
drink.textContent = "Schnaps!";
} else if (age >= 16) {
drink.textContent = "Bier!";
} else {
drink.textContent = "Sirup!";
}
}
// CLICKER
let count = 0;
function handleBtnClicker(event) {
count += 1;
let spanClick = document.getElementById("spanClicker");
spanClick.textContent = count;
}
let funCount = 0;
const funProb = 0.1;
function handleBtnFunClicker(event) {
funCount = funCount + 1;
const randFloat = Math.random();
if(randFloat < funProb){
funCount = 0;
}
spanFunClicker.textContent = funCount;
}
// DICE
const l = 200;
const diceImages = [
[[0.5*l, 0.5*l]],
[[0.25*l, 0.25*l],[0.75*l, 0.75*l]],
[[0.25*l, 0.25*l],[0.5*l, 0.5*l],[0.75*l, 0.75*l]],
[[0.25*l, 0.25*l],[0.75*l, 0.75*l],[0.75*l, 0.25*l],[0.25*l, 0.75*l]],
[[0.25*l, 0.25*l],[0.75*l, 0.75*l],[0.75*l, 0.25*l],[0.25*l, 0.75*l],[0.5*l, 0.5*l]],
[[0.25*l, 0.25*l],[0.25*l, 0.5*l],[0.25*l, 0.75*l],[0.75*l, 0.25*l],[0.75*l, 0.5*l],[0.75*l, 0.75*l]],
]
function handleBtnDice(event){
let randomInt = Math.floor(Math.random() * 6) + 1;
spanDice.textContent = randomInt;
// draw dice
const ctx = canvasDice.getContext('2d');
canvasDice.width = l;
canvasDice.height = l;
ctx.clearRect(0, 0, canvasDice.width, canvasDice.height); // Clear the canvas
// Draw the dice outline
ctx.strokeStyle = 'black';
// ctx.lineWidth = 5;
const diceImage = diceImages[randomInt-1];
diceImage.forEach(point => {
ctx.beginPath();
ctx.arc(point[0],point[1], 20, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke(); // Outline the circle
ctx.closePath();
});
}
// CHAR COUNTER
function handleInputTextArea(event) {
let txtArea = document.getElementById("txtArea");
let spanBuchstaben = document.getElementById("spanBuchstabenCounter");
spanBuchstaben.textContent = txtArea.value.length;
}
// DATE
function handleDateSelected(event) {
const inpDate = document.getElementById('inputDate');
const dateSelected = inpDate.value;
// get date of today
const today = new Date();
const year = today.getFullYear(); // Get the current year (e.g., 2023)
const month = today.getMonth() + 1; // Get the current month (January is 0)
const day = today.getDate(); // Get the current day of the month
const dateToday = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`; // Format the date (e.g., YYYY-MM-DD)
// create date objects
const start = new Date(dateSelected);
const end = new Date(dateToday);
// determine difference
const deltaMs = end - start;
const deltaDays = Math.floor(deltaMs / (1000 * 60 * 60 * 24));
const passedDays = document.getElementById('spanPassedDays');
passedDays.textContent = deltaDays;
}
body {
font-family: sans-serif;
background-color: cornsilk;
}
h1,
h2 {
background-color:aliceblue;
padding: 10px;
border: solid black 3px;
border-radius: 5px;
}
canvas {
background-color: aliceblue;
width: 100;
height: 100;
border: black solid 3px;
border-radius: 8px;
}
button,
input,
textarea {
background-color: aliceblue;
border: solid black 1px;
border-radius: 5px;
padding: 5px;
}
++++