....
....
Alle Python-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 ====
* 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.ä.
* **Ausgabe:** Statt `print` in Python gibt in JS die Funktion `console.log(...)` Werte auf der Konsole aus. 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)
i = i + 1
}
// 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
// Format the date (e.g., YYYY-MM-DD)
const dateToday = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`
// 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;
}
++++