Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:js [2025-11-01 11:00] – [Eingabe / Input] hof
+++ gf_informatik:web:js [2025-11-01 11:03] (aktuell) – [JavaScript Basics] hof
@@ Zeile 46: / Zeile 46: @@
 while (i < 10) {
     console.log(i)
+    i = i + 1
 }
@@ Zeile 102: / Zeile 103: @@
 <code javascript>
 // kann in JS über id direkte auf Element zugreifen:
-spanNr.textContent = 41;
+spanNr.textContent = 41
 </code>
@@ Zeile 149: / Zeile 150: @@
 ++++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$.
+   * 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.
@@ Zeile 208: / Zeile 209: @@
 // SCHNAPS-BIER-SIRUP
 function handleKeyPressSBS(event) {
-    let inpAge = document.getElementById("inputAge");
+    let inpAge = document.getElementById("inputAge")
-    let drink = document.getElementById('spanDrink');
+    let drink = document.getElementById('spanDrink')
-    let age = inpAge.value;
+    let age = inpAge.value
     if (age >= 18) {
-        drink.textContent = "Schnaps!";
+        drink.textContent = "Schnaps!"
     } else if (age >= 16) {
-        drink.textContent = "Bier!";
+        drink.textContent = "Bier!"
     } else {
-        drink.textContent = "Sirup!";
+        drink.textContent = "Sirup!"
     }
 }
 // CLICKER
-let count = 0;
+let count = 0
 function handleBtnClicker(event) {
-    count += 1;
+    count += 1
-    let spanClick = document.getElementById("spanClicker");
+    let spanClick = document.getElementById("spanClicker")
-    spanClick.textContent = count;
+    spanClick.textContent = count
 }
-let funCount = 0;
+let funCount = 0
-const funProb = 0.1;
+const funProb = 0.1
 function handleBtnFunClicker(event) {
-    funCount = funCount + 1;
+    funCount = funCount + 1
-    const randFloat = Math.random();
+    const randFloat = Math.random()
     if(randFloat < funProb){
-        funCount = 0;
+        funCount = 0
     }
-    spanFunClicker.textContent = funCount;
+    spanFunClicker.textContent = funCount
 }
 // DICE
-const l = 200;
+const l = 200
 const diceImages = [
     [[0.5*l, 0.5*l]],
@@ Zeile 254: / Zeile 255: @@
 ]
-function handleBtnDice(event){
+function handleBtnDice(event) {
-    let randomInt = Math.floor(Math.random() * 6) + 1;
+    let randomInt = Math.floor(Math.random() * 6) + 1
-    spanDice.textContent = randomInt;
+    spanDice.textContent = randomInt
     // draw dice
-    const ctx = canvasDice.getContext('2d');
+    const ctx = canvasDice.getContext('2d')
-    canvasDice.width = l;
+    canvasDice.width = l
-    canvasDice.height = l;
+    canvasDice.height = l
-    ctx.clearRect(0, 0, canvasDice.width, canvasDice.height); // Clear the canvas
+    ctx.clearRect(0, 0, canvasDice.width, canvasDice.height) // Clear the canvas
     // Draw the dice outline
-    ctx.strokeStyle = 'black';
+    ctx.strokeStyle = 'black'
-    // ctx.lineWidth = 5;
+    // ctx.lineWidth = 5
-    const diceImage = diceImages[randomInt-1];
+    const diceImage = diceImages[randomInt-1]
     diceImage.forEach(point => {
-        ctx.beginPath();
+        ctx.beginPath()
-        ctx.arc(point[0],point[1], 20, 0, 2 * Math.PI);
+        ctx.arc(point[0],point[1], 20, 0, 2 * Math.PI)
-        ctx.fill();
+        ctx.fill()
-        ctx.stroke(); // Outline the circle
+        ctx.stroke() // Outline the circle
-        ctx.closePath();
+        ctx.closePath()
-    });
+    })
 }
 // CHAR COUNTER
 function handleInputTextArea(event) {
-    let txtArea = document.getElementById("txtArea");
+    let txtArea = document.getElementById("txtArea")
-    let spanBuchstaben = document.getElementById("spanBuchstabenCounter");
+    let spanBuchstaben = document.getElementById("spanBuchstabenCounter")
-    spanBuchstaben.textContent = txtArea.value.length;
+    spanBuchstaben.textContent = txtArea.value.length
 }
 // DATE
 function handleDateSelected(event) {
-    const inpDate = document.getElementById('inputDate');
+    const inpDate = document.getElementById('inputDate')
-    const dateSelected = inpDate.value;
+    const dateSelected = inpDate.value
     // get date of today
-    const today = new Date();
+    const today = new Date()
-    const year = today.getFullYear();  // Get the current year (e.g., 2023)
+    const year = today.getFullYear()  // Get the current year (e.g., 2023)
-    const month = today.getMonth() + 1;  // Get the current month (January is 0)
+    const month = today.getMonth() + 1  // Get the current month (January is 0)
-    const day = today.getDate();  // Get the current day of the month
+    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)
+    // 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 start = new Date(dateSelected)
-    const end = new Date(dateToday);
+    const end = new Date(dateToday)
     // determine difference
-    const deltaMs = end - start;
+    const deltaMs = end - start
-    const deltaDays = Math.floor(deltaMs / (1000 * 60 * 60 * 24));
+    const deltaDays = Math.floor(deltaMs / (1000 * 60 * 60 * 24))
-    const passedDays = document.getElementById('spanPassedDays');
+    const passedDays = document.getElementById('spanPassedDays')
-    passedDays.textContent = deltaDays;
+    passedDays.textContent = deltaDays
 }
 </code>