JavaScript [KSR Wiki]

Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
===== JavaScript =====

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

==== JS einbinden ====

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:
<code html>
<html>
<head>
    ....
    <script src="script.js"></script>
</head>
<body>
    ....
</body>
</html>
</code>

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:

<code javascript>
// 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);

</code>

==== Beispiele für JS ====

=== Eingabe / Input ===

<code html>
<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...
</code>

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

=== HTML-Element mit JS ändern ===

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

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

++++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 =====