Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
Nächste Überarbeitung		 Vorherige Überarbeitung
gf_informatik:web:js [2025-11-01 10:54] – [JS einbinden] hofgf_informatik:web:js [2025-11-01 11:03] (aktuell) – [JavaScript Basics] hof
Zeile 22: Zeile 22:
 ==== Bemerkungen und Tipps ==== ==== 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.    * 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 **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.ä.    * 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 ...+   * **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"      * Chrome: "Untersuchen" -> "Konsole"
      * Safari (Mac): "Element-Informationen" -> "Konsole"      * Safari (Mac): "Element-Informationen" -> "Konsole"
Zeile 36: Zeile 35:
 <code javascript> <code javascript>
 // IN KONSOLE AUSGEBEN (quasi das print() von JavaScript) // IN KONSOLE AUSGEBEN (quasi das print() von JavaScript)
-console.log(42);+console.log(42)
  
 // VARIABLEN & KONSTANTEN // VARIABLEN & KONSTANTEN
-let x = 42; // Variablen benötigen let +let x = 42 // Variablen benötigen let 
-const y = 43; // Konstanten sind wie Variablen, ausser dass sie sich nicht verändern lassen.+const y = 43 // Konstanten sind wie Variablen, ausser dass sie sich nicht verändern lassen.
 // im Zweifelsfall: einfach let verwenden // im Zweifelsfall: einfach let verwenden
  
 // WHILE-SCHLEIFE // WHILE-SCHLEIFE
-let i = 0;+let i = 0
 while (i < 10) { while (i < 10) {
-    console.log(i);+    console.log(i) 
 +    i = i + 1
 } }
  
 // FOR-SCHLEIFE // FOR-SCHLEIFE
 for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
-    console.log(i);+    console.log(i)
 } }
  
 // VERZWEIGUNG // VERZWEIGUNG
-x = 42;+x = 42
 if (x > 0) { if (x > 0) {
-    console.log("Zahl positiv");+    console.log("Zahl positiv")
 } else if (x == 0) { } else if (x == 0) {
-    console.log("Zahl Null");+    console.log("Zahl Null")
 } else { } else {
-    console.log("Zahl negativ");+    console.log("Zahl negativ")
 } }
  
 // FUNKTION // FUNKTION
 function mySquare(x) { // Deklaration der Funktion function mySquare(x) { // Deklaration der Funktion
-    return x*x;+    return x*x
 } }
  
-let sq = mySquare(5); // Funktionsaufruf +let sq = mySquare(5) // Funktionsaufruf 
-console.log(sq);+console.log(sq)
  
 </code> </code>
Zeile 90: Zeile 90:
 <code javascript> <code javascript>
 function handleKeyPress(event) { function handleKeyPress(event) {
-    let inputNr = document.getElementById("inputNumber"); // identifiziert HTML-Element über dessen ID +    let inputNr = document.getElementById("inputNumber") // identifiziert HTML-Element über dessen ID 
-    console.log(inputNr.value); // und gibt dessen Wert aus+    console.log(inputNr.value) // und gibt dessen Wert aus
 } }
 </code> </code>
Zeile 103: Zeile 103:
 <code javascript> <code javascript>
 // kann in JS über id direkte auf Element zugreifen: // kann in JS über id direkte auf Element zugreifen:
-spanNr.textContent = 41;+spanNr.textContent = 41
 </code> </code>
  
Zeile 150: Zeile 150:
 ++++Tipps Würfel| ++++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.    * Für Anzeige des Würfels: verwende HTML-Element **canvas**. Recherchiere online.
  
Zeile 209: Zeile 209:
 // SCHNAPS-BIER-SIRUP // SCHNAPS-BIER-SIRUP
 function handleKeyPressSBS(event) { 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) {     if (age >= 18) {
-        drink.textContent = "Schnaps!";+        drink.textContent = "Schnaps!"
     } else if (age >= 16) {     } else if (age >= 16) {
-        drink.textContent = "Bier!";+        drink.textContent = "Bier!"
     } else {     } else {
-        drink.textContent = "Sirup!";+        drink.textContent = "Sirup!"
     }     }
 } }
  
 // CLICKER // CLICKER
-let count = 0;+let count = 0
  
 function handleBtnClicker(event) { 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) { function handleBtnFunClicker(event) {
-    funCount = funCount + 1; +    funCount = funCount + 1 
-    const randFloat = Math.random();+    const randFloat = Math.random()
     if(randFloat < funProb){     if(randFloat < funProb){
-        funCount = 0;+        funCount = 0
     }     }
-    spanFunClicker.textContent = funCount;+    spanFunClicker.textContent = funCount
 } }
  
 // DICE // DICE
-const l = 200;+const l = 200
 const diceImages = [ const diceImages = [
     [[0.5*l, 0.5*l]],     [[0.5*l, 0.5*l]],
Zeile 255: 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     // 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     // 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 => {     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 // CHAR COUNTER
 function handleInputTextArea(event) { 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 // DATE
 function handleDateSelected(event) { 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     // 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     // 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     // 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> </code>
  • gf_informatik/web/js.1761994473.txt.gz
  • Zuletzt geändert: 2025-11-01 10:54
  • von hof