3. Unterrichtsblock

JavaScript Logo

Kursinhalte

Variablen

Variablen sind Container zum Speichern von Daten bzw. Werten.

Es gibt 4 Möglichkeiten, eine JavaScript-Variable zu deklarieren:

  • Verwendung von var
  • Verwendung von let
  • Verwendung von const
  • Nichts verwenden (globale Variable)

let Variablen in Kürze:

  • Das Schlüsselwort let wurde in ES6 (2015) eingeführt.
  • Mit let definierte Variablen können nicht neu deklariert werden.
  • Mit let definierte Variablen müssen vor der Verwendung deklariert werden.
  • Mit let definierte Variablen haben einen Blockbereich.

const Variablen in Kürze:

  • Das Schlüsselwort const wurde in ES6 (2015) eingeführt.
  • Mit const definierte Variablen können nicht neu deklariert werden.
  • Mit const definierte Variablen können nicht neu zugewiesen werden.
  • Mit const definierte Variablen haben einen Blockbereich.
  • Konstanten JavaScript-Variablen muss ein Wert zugewiesen werden, wenn sie deklariert werden.

In folgendem Beispiel werden Variablen auf verschiedene Arten deklariert:

Beispiel:

<!DOCTYPE html>
<html>
<body>

<p id="demo0"></p>
<p id="demo1"></p>
<p id="demo2"></p>

<script>

// Verwendung von var
var a = 5;
var b = 6;
var c = a + b;
document.getElementById("demo0").innerHTML =
"Der Wert von c ist: " + c;

// Verwendung von let
let d = 3;
let e = 3;
let f = d + e;
document.getElementById("demo1").innerHTML =
"Der Wert von f ist: " + f;

// Verwendung undeklarierter Variablen 
g = 4;
h = 5;
i = g + h;
document.getElementById("demo2").innerHTML =
"Der Wert von i ist: " + i;

</script>

</body>
</html>

Beispiel zur Übung und Ausführung im Code Editor

<!DOCTYPE html>
<html>
<body>

<!-- HINWEIS:
     Um das Script zu testen, kannst Du den Code Editor auf dieser Seite verwenden.
     Hierfür kopierst Du HTML und JavaScript in die dafür vorgesehenen Fenster.
-->

<p id="demo0"></p>
<p id="demo1"></p>
<p id="demo2"></p>

<button type="button" onclick="document.getElementById('demo0').innerHTML =
'Der Wert von c ist: ' + c">Klick mich, um c auszuführen</button> <br>

<button type="button" onclick="document.getElementById('demo1').innerHTML =
'Der Wert von f ist: ' + f">Klick mich, um f auszuführen</button><br>

<button type="button" onclick="document.getElementById('demo2').innerHTML =
'Der Wert von i ist: ' + i">Klick mich, um i auszuführen</button>

<script>

// Zur Ausführung im Code Editor nur das JavaScript ohne den <script> Tag kopieren.

// Verwendung von var
var a = 5;
var b = 6;
var c = a + b;

// Verwendung von let
{
  let d = 3;
  let e = 3;
  let f = d + e;
}

// Verwendung undeklarierter Variablen 
g = 4;
h = 5;
i = g + h;

</script>

</body>
</html>

Aufgabe

Bringe o.g. Script im Code Editor zum Laufen.

  • Versuche dabei den Variablen verschiedene Werte zuzuweisen.
  • Probiere auch verschiedene Variablentypen aus (var, let, const)
  • Versuche das Script ohne Block bei let auszuführen

Wann verwendet man var?

Deklarieren Sie JavaScript-Variablen immer mit var, let oder const. Das Schlüsselwort var wird von 1995 bis 2015 im gesamten JavaScript-Code verwendet. Die Schlüsselwörter let und const wurden 2015 zu JavaScript hinzugefügt. Wenn Sie möchten, dass Ihr Code in älteren Browsern ausgeführt wird, müssen Sie var verwenden.

Wann verwendet man const und let verwenden?

  • Wenn Sie glauben, dass sich der Wert der Variablen ändern kann, verwenden Sie let
  • Wenn ein Wert konstant bleiben soll: verwenden Sie const
// Beispielrechnung mit const und let
const preis1 = 5;
const preis2 = 6;
let summe = preis1 + preis2;
document.getElementById("demo").innerHTML =
"Die Endsumme ist: " + summe;

JavaScript-Identifikatoren

Alle JavaScript-Variablen müssen mit eindeutigen Namen identifiziert werden. Diese eindeutigen Namen werden „Identifikatoren“ genannt. Identifikatoren können Kurznamen (wie x und y) oder aussagekräftigere Namen (alter, augenFarbe, endBetrag) sein. Die allgemeinen Regeln für den Aufbau von Namen für Variablen (eindeutige Identifikatoren) sind:

  • Namen können Buchstaben, Ziffern, Unterstriche und Dollarzeichen enthalten.
  • Namen müssen mit einem Buchstaben beginnen.
  • Namen können auch mit $ und _ beginnen (wir werden es in diesem Unterrichtsblock jedoch nicht verwenden).
  • Bei Namen wird zwischen Groß- und Kleinschreibung unterschieden (y und Y sind unterschiedliche Variablen).
  • Reservierte Wörter (wie JavaScript-Schlüsselwörter) können nicht als Namen verwendet werden. (z.B. document, innerHTML etc.)

Notiz: Bei JavaScript-Identifikatoren wird zwischen Groß- und Kleinschreibung unterschieden.

JavaScript-Datentypen

JavaScript-Variablen können Zahlen wie 100 oder Textwerte wie „Thomas Müller“ enthalten. In der Programmierung werden Textwerte als Zeichenfolgen (sog. „Strings“) bezeichnet. JavaScript kann viele Arten von Daten verarbeiten, aber denken Sie zunächst nur an Zahlen und Zeichenfolgen. Strings werden in doppelte oder einfache Anführungszeichen geschrieben. Zahlen werden ohne Anführungszeichen geschrieben. Wenn Sie eine Zahl in Anführungszeichen setzen, wird sie als Textzeichenfolge behandelt.

Beispiel:

<!DOCTYPE html>
<html>
<body>

<p id="demo3"></p>

<script>
// Strings werden in Anführungszeichen gesetzt.
// Zahlen werden ohne Anführungszeichen gesetzt.

const pi = 3.14;
let person = "Thomas Müller";
let antwort = 'Ja, bin ich!';

document.getElementById("demo3").innerHTML =
pi + "<br>" + person + "<br>" + antwort;
</script>

</body>
</html>

Aufgabe

Bringe o.g. Script im Code Editor zum Laufen. Die Ausführung soll durch Klick auf einen Button ausgelöst werden.
Hinweis: Gänsefüßchen

Deklaration von Variablen

// Das Erstellen einer Variable nennt man in JavaScript "deklarieren"
var autoMarke; 

// oder
let autoMarke; 

// oder 
const autoMarke;


// Nach der Deklaration sind die Variablen ohne Wert und werden als "undefined" gewertet.
// Der Variable muss mit dem "=" Istgleichzeichen noch ein Wert zugewiesen werden
autoMarke = "Volvo";


// Man kann einer Varaiablen auch gleich während der Deklaration einen Wert zuweisen
var autoMarke = "Volvo";


// Man kann mehrere Variablen auch innerhalb einer Aussage deklarieren
let person = "Thomas Müller", autoMarke = "Volvo", preis = 200;

// Dies geht auch in mehreren Zeilen, wichtig ist nur das Semikolon zum Schluss
let person = "Thomas Müller",
autoMarke = "Volvo",
preis = 200;


// "var" Variablen können auch schon Werte zugewiesen bekommen, bevor sie deklariert wurden.
autoMarke = "Volvo";
var autoMarke;

// das geht auch bei "const" Variablen
autoMarke = "Volvo";
const autoMarke;

// bei "let" Variablen geht dies nicht
autoMarke = "Volvo";
let autoMarke; // Dies würde zu einem Fehler führen.

Umdeklarieren von Variablen

Variablen mit dem Schlüsselwort var können jederzeit umdeklariert werden. Die Variablen const und let können nicht umdeklariert werden. 

// "var" Variablen können neu bzw. umdeklariert werden
var autoMarke = "Volvo";
var autoMarke;
autoMarke = "BMW";


// "let" oder "const" Variablen können NICHT umdeklariert werden
let autoMarke = "Volvo";
let autoMarke; //Dies wird nicht funktionieren

Blockbereiche (Block Scope)

Seit 2015 existieren auch die Schlüsselwörter let und const in JavaScript. Mit „Block Scope“ können durch geschweifte Klammern sogenannte Blöcke geschaffen werden, welche einen separaten Code ausführen. Grundsätzlich gilt für Blöcke:

  • Variablen, die innerhalb von Blöcken deklariert werden, können nicht außerhalb der Blöcke verwendet werden
  • Dies erlaubt eine Neudeklaration der Variablen außerhalb des Blocks
  • Um Fehler zu vermeiden, müssen let und const in Blöcken ausgeführt werden.
// Einsatz von Blöcken (Block Scope)

{
  let x = 2;
}
// x kann NICHT hier verwendet werden 

{
  var x = 2;
}
// x KANN hier verwendet werden 

/* Das erneute Deklarieren einer Variablen mit dem Schlüsselwort 
var kann zu Problemen führen.
Durch die Neudeklaration einer Variablen innerhalb eines Blocks 
wird auch die Variable außerhalb des Blocks neu deklariert:
*/

var x = 10;
// Hier ist x 10

{
var x = 2;
// Hier ist x 2
}

// Hier ist x auch 2 


/* Anders als "var" Variablen, können "let" und "const" Variablen 
innerhalb von geschweiften Blöcken andere Werte 
zugewiesen bekommen.
*/

let x = 10;
// Hier ist x 10

{
let x = 2;
// Hier ist x 2
}

// Hier ist x 10 
// SELBES GILT FÜR "const" Variablen


/*
Weitere Beispiele
*/

var x = 2;   // Erlaubt
let x = 3;   // Nicht erlaubt

{
let x = 2;   // Erlaubt
let x = 3;   // Nicht erlaubt
}

{
let x = 2;   // Erlaubt
var x = 3;   // Nicht erlaubt
}

{
let x = 4;   // Erlaubt
}

{
let x = 5;    // Erlaubt
} 

// SELBES GILT FÜR "const" Variablen

Konstanten

Konstanten werden nur deklariert, wenn ein Wert nicht verändert werden soll.

Grundsätze:

  • Das Schlüsselwort const wurde in ES6 (2015) eingeführt.
  • Mit const definierte Variablen können nicht neu deklariert werden.
  • Mit const definierte Variablen können nicht neu zugewiesen werden.
  • Mit const definierte Variablen haben einen Blockbereich.
  • Konstanten JavaScript-Variablen muss ein Wert zugewiesen werden, wenn sie deklariert werden.
// Deklaration von const

const PI = 3.14159265359; // korrekt

const PI;
PI = 3.14159265359; // falsch

Wann sollte const verwendet werden?

Bei der Deklaration von:

  • Einer neuen Array (deutsch „Reihe“ – bedeutet eine Reihe an Werten)
  • Einem neuen Object
  • Einer neuen Function
  • Einer neuen RegExp

Das Schlüsselwort const ist etwas irreführend

Es definiert keinen konstanten Wert. Es definiert eine konstante Referenz auf einen Wert. Aus diesem Grund kann man NICHT:

  • Einer Konstanten einen neuen Wert zuweisen
  • Einer Konstanten ein neues Array (Reihe) zuweisen
  • Einer Konstanten ein neues Objekt zuweisen

Aber man kann:

  • Die Elemente des Arrays ändern
  • Die Eigenschaften des Objekts ändern

Codebeispiele

/* ARRAY
   Verwendung von const in Arrays
   Sie können die Elemente eins konstanten Arrays ändern
*/

// Erstellung eines konstanten Arrays:
const autos = ["Saab", "Volvo", "BMW"];

// Man kann ein Element ändern:
autos[0] = "Toyota";

// Man kann Elemente hinzufügen:
autos.push("Audi");


// Man kann das Array jedoch NICHT neu zuweisen
const autos = ["Saab", "Volvo", "BMW"];

autos = ["Toyota", "Volvo", "Audi"];    // FEHLER


/* OBJEKTE
   Verwendung von const in Objekten
   Sie können die Eigenschaften eines konstanten Objekts ändern
*/

// Erstellung eines konstanten Objekts:
const auto = {
  typ:"Fiat", 
  modell:"500", 
  farbe:"weiß"
}

// Man kann eine Objekteigenschaft ändern:
auto.farbe = "rot";

// Man kann eine Eigschaft hinzufügen:
auto.besitzer = "Müller"; 


// Aber man kann das Objekt NICHT neu zuweisen:
const auto = {typ:"Fiat", modell:"500", farbe:"weiß"};

auto = {typ:"Volvo", modell:"EX60", farbe:"rot"};    // FEHLER

Operatoren

Operatoren werden in JavaScript verwendet, um Berechnungen auszuführen, Verkettungen zu erstellen, Vergleiche auszuführen und hauchen diversen Funktionen Leben ein. Grundsätzlich unterscheidet man in JavaScript zwischen folgenden Arten an Operatoren:

Weiterführende Informationen: https://www.w3schools.com/js/js_operators.asp

Grundsätzliches

Ein Operator hat immer mindestens zwei Operanden

// Beispiel Zuweisungsoperator (=)

var x = 5;         // Weist x den Wert 5 zu
var y = 2;         // Weist y den Wert 2 zu
var z = x + y;     // Weist z den Wert 7 zu (5 + 2)    // Beispiel Additions-Opertor (+)
var m = x * y;     // Weist m den Wert 10 zu (5 * 2)   // Beispiel Multiplikations-Opertor (*)

// Operand, Operator, Operand, Operator, Operand
var z = x + y;

Arithmetische Operatoren

Arithmetische Operatoren werden verwendet, um mit Zahlen zu rechnen:

OperatorBeschreibung
+Addition
–Subtraktion
*Multiplikation
**Potenzierung (seit ES2016)
/Division
%Restwert einer Division
++Erhöhen (inkrementieren)
—Verringern (dekrementieren)
// ADDITION
var x = 5;
var y = 2;
var z = x + y;

// SUBTRAKTION
var x = 5;
var y = 2;
var z = x - y;

// MULTIPLIKATION
var x = 5;
var y = 2;
var z = x * y;

// DIVISION
var x = 5;
var y = 2;
var z = x / y;

// RESTWERT
var x = 5;
var y = 2;
var z = x % y;

// ERHÖHEN (inkrementieren)
let x = 5;
x++;
let z = x; 

// VERRINGERN (dekrementieren)
let x = 5;
x--;
let z = x;

Aufgabe

Probiere alle o.g. Operatoren im Code Editor aus. Die Ergebnisse der Rechnungen sollen immer nach Klick auf einen Schalter erscheinen.

Zuweisungsoperatoren

Zuweisungsoperatoren weisen Variablen Werte zu.

Der Zuweisungsoperator in JavaScript ist das Gleichheitszeichen (=) Ein „Zuweisungs“-Operator ist kein „Gleich“-Operator. Das ist anders als in der Algebra.
Folgendes ergibt in der Algebra keinen Sinn: x = x + 5
In JavaScript macht es jedoch durchaus Sinn: Es weist x den Wert von x + 5 zu. (Es berechnet den Wert von x + 5 und trägt das Ergebnis in x ein. Der Wert von x wird um 5 erhöht.)

Aufgabe

Bringe x = x + 5 im Code Editor zum Laufen. Beim Klick auf einen Button soll das Script ausgeführt werden.

Notiz: Der „gleich“-Operator wird in JavaScript wie == geschrieben.

OperatorBeispielBedeutung
=x = yx = y
+=x += yx = x + y
-=x -= yx = x – y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y
**=x **= yx = x ** y
// ADDITION
var x = 10;
x += 5; 
// Ergebnis = 15

var text1 = "Thomas";
var text2 = "Müller";
var text3 = text1 + " " + text2;
// Ergebnis = Thomas Müller

var text1 = "Was für ein ";
text1 += "schöner Tag"; 
// Ergebnis = Was für ein schöner Tag

var x = 5 + 5;
var y = "5" + 5;
var z = "Hallo" + 5;
/* Ergebnisse
10
55
Hallo5
*/

Aufgaben

Aufgabe 1: Verwende den einfachen Zuweisungsoperator (=)

Definiere zwei Variablen zahlA und zahlB. Weisen Sie der Variablen zahlA den Wert 10 zu und der Variablen zahlB den Wert von zahlA. Gib den Wert von zahlB mit console.log() aus.

Aufgabe 2: Verwende den Additionszuweisungsoperator (+=)

Erstelle eine Variable summe mit dem Startwert 5. Addiere 10 zu summe hinzu, indem du den +=-Operator verwendest und gib das Ergebnis in der Konsole aus.

Aufgabe 3: Verwende den Subtraktionszuweisungsoperator (-=)

Definiere eine Variable differenz mit dem Wert 20. Subtrahiere 4 von differenz mit dem -=-Operator und gib das Ergebnis aus.

Aufgabe 4: Verwende den Multiplikationszuweisungsoperator (*=)

Erstelle eine Variable produkt mit dem Wert 3. Multipliziere produkt mit 7, indem du den *=-Operator verwendest, und gib das Ergebnis in der Konsole aus.

Aufgabe 5: Verwende den Divisionszuweisungsoperator (/=)

Erstelle eine Variable quotient mit dem Wert 50. Teile quotient durch 5 mithilfe des /=-Operators und gib das Ergebnis aus.

Vergleichsoperatoren

Mit Vergleichsoperatoren können Werte verglichen werden. Dies wird vor allem für Funktionen benötigt.

OperatorBeschreibung
==ist gleich
===gleicher Wert oder gleicher Typ
!=ist nicht gleich
!==ungleicher Wert oder ungleicher Typ
>größer als
<kleiner als
>=größer als oder gleich
<=kleiner als oder gleich
?tenärer Operator (Einfache wenn / dann Bedingungen)

Beispiele

// Für folgende Beispiele wird angenommen, dass x = 5 ist

// == ist gleich
x == 8     // Ausgabe = false
x == 5     // Ausgabe = true
x == "5"   // Ausgabe = true

// === gleicher Wert oder gleicher Typ
x === 5    // Ausgabe = true
x === "5"  // Ausgabe = false

// != ist nicht gleich
x != 8     // Ausgabe = true

// !== ungleicher Wert oder ungleicher Typ
x !== 5    // Ausgabe = false
x !== "5"  // Ausgabe = true
x !== 8    // Ausgabe = true

// > größer als
x > 8      // Ausgabe = false

// < kleiner als
x < 8      // Ausgabe = true

// >= größer als oder gleich
x >= 8     // Ausgabe = false

// <= kleiner als oder gleich
x <= 8     // Ausgabe = true

Aufgabe

Aufgabe 1: Verwende den Vergleichsoperator (==)

Definiere zwei Variablen zahl1 und zahl2, setze zahl1 auf 15 und zahl2 auf ’15‘. Überprüfe, ob beide Variablen gleich sind, und speichere das Ergebnis in der Variable sindGleich. Gib sindGleich aus.

Aufgabe 2: Verwende den strikten Vergleichsoperator (===)

Verwende die gleichen Variablen zahl1 und zahl2. Überprüfe, ob beide Variablen gleichen Wert und gleichen Typ haben, und speichere das Ergebnis in der Variable sindStriktGleich. Gib sindStriktGleich aus.

Aufgabe 3: Verwende den Ungleichheitsoperator (!=)

Erstelle zwei Variablen wert1 mit dem Wert 10 und wert2 mit dem Wert 20. Überprüfe mit !=, ob die beiden Werte ungleich sind, und speichere das Ergebnis in der Variable sindUngleich. Gib sindUngleich aus.

Aufgabe 4: Verwende den strikt Ungleichheitsoperator (!==)

Definiere zwei Variablen text1 mit dem Wert „Hallo“ und text2 mit dem Wert „hallo“. Benutze den !==-Operator, um zu prüfen, ob die beiden Variablen ungleichen Wert oder ungleichen Typ haben, und speichere das Ergebnis in sindStriktUngleich. Gib sindStriktUngleich aus.

Aufgabe 5: Verwende die Operatoren > und <

Erstelle eine Variable alterAlex mit dem Wert 30 und alterBen mit dem Wert 25. Prüfe, ob alterAlex größer als alterBen ist, und speichere das Ergebnis in istÄlter. Gib istÄlter aus.

Aufgabe 6: Verwende die Operatoren >= und <=

Setze alterCarl auf 30 und alterDaniel auf 30. Prüfe, ob alterCarl größer oder gleich alterDaniel ist, und speichere das Ergebnis in istGleichOderÄlter. Gib istGleichOderÄlter aus.

Aufgabe 7: Verwende den ternären Operator (?)

Setze die Variable punktestand auf 85. Verwende den ternären Operator, um zu bestimmen, ob punktestand größer oder gleich 50 ist. Wenn ja, speichere „Bestanden“ in der Variable ergebnis, sonst „Nicht bestanden“. Gib ergebnis aus.

Logische Operatoren

OperatorBeschreibungBeispiel
&&logisches und(x < 10 && y > 1) is true
||logisches oder(x == 5 || y == 5) is false
!logisches nicht!(x == y) is true
<!DOCTYPE html>
<html>
<body>

<!-- LOGISCHES UND 
     Der Operator && gibt "wahr" zurück, wenn beide Ausdrücke wahr sind, andernfalls gibt er "falsch" zurück.
-->
<h4>Beispiel logisches UND</h4>
<p id="demo8"></p>

<script>
var x = 6;
var y = 3;

document.getElementById("demo8").innerHTML = 
(x < 10 && y > 1) + "<br>" + 
(x < 10 && y < 1);
</script>


<!-- LOGISCHES ODER 
     Das logische oder || gibt "true" zurück, wenn einer oder beide Ausdrücke wahr sind, ansonsten "false".
-->
<h4>Beispiel logisches ODER</h4>
<p id="demo7"></p>

<script>
var x = 6;
var y = 3;

document.getElementById("demo7").innerHTML = 
(x == 5 || y == 5) + "<br>" + 
(x == 6 || y == 0) + "<br>" + 
(x == 0 || y == 3) + "<br>" + 
(x == 6 || y == 3);
</script>


<!-- LOGISCHES NICHT 
     Der NCIHT-Operator (!) gibt "wahr" für falsche Aussagen und "falsch" für wahre Aussagen zurück.
-->
<h4>Beispiel logisches NICHT</h4>
<p id="demo9"></p>

<script>
var x = 6;
var y = 3;

document.getElementById("demo9").innerHTML = 
!(x === y) + "<br>" + 
!(x > y);
</script>


</body>
</html>

Aufgabe

Aufgabe 1: Verwende den logischen UND-Operator (&&)

Definiere zwei boolesche Variablen istSonntag und istUrlaubstag. Setze istSonntag auf true und istUrlaubstag auf false. Verwende den &&-Operator, um zu prüfen, ob beide Wahrheitswerte true sind, und speichere das Ergebnis in der Variable freierTag. Gib freierTag mit console.log() aus.

Aufgabe 2: Verwende den logischen ODER-Operator (||)

Definiere zwei boolesche Variablen istGeöffnet und istMitglied. Setze istGeöffnet auf false und istMitglied auf true. Verwende den ||-Operator, um zu prüfen, ob mindestens einer der Wahrheitswerte true ist, und speichere das Ergebnis in der Variable kannEintreten. Gib kannEintreten aus.

Aufgabe 3: Verwende den logischen Nicht-Operator (!)

Definiere eine boolesche Variable istSchlechtWetter, die auf true gesetzt ist. Verwende den !-Operator, um den Wahrheitswert zu invertieren, und speichere das Ergebnis in der Variable istGutesWetter. Gib istGutesWetter aus, um das Ergebnis zu sehen.

Aufgabe 4: Kombiniere logische Operatoren

Definiere istWochenende und hatFreizeit als true und false. Verwende eine Kombination von && und ||, um zu prüfen, ob es entweder Wochenende ist oder ob man Freizeit hat, und speichere das Ergebnis in der Variable kannEntspannen. Gib das Ergebnis aus.

Aufgabe 5: Nutze alle drei logische Operatoren

Definiere drei Variablen hatHausaufgaben, istFertig (um zu prüfen, ob die Arbeit gemacht ist), und istMüde. Setze hatHausaufgaben auf true, istFertig auf false und istMüde auf false. Verwende die logischen Operatoren !, &&, und ||, um zu ermitteln, ob man Fernsehen kann, und speichere das Ergebnis in der Variable kannFernsehen. Gib kannFernsehen aus.

Einfache Übungsaufgaben mit Scratch

https://scratch.mit.edu/projects/editor

Scratch ist eine visuelle Programmiersprache, die besonders für Anfänger und junge Lernende entwickelt wurde. Während Scratch nicht explizit alle Operatoren wie in Text-basierten Sprachen zur Verfügung stellt, kann man durch kreative Blockkombinationen ähnliche Logiken abbilden. Hier sind 20 Aufgaben, die auf Scratch zugeschnitten sind, um Konzepte von Vergleichsoperatoren, Zuweisungsoperatoren und logischen Operatoren zu vermitteln:

Vergleichsoperatoren Aufgaben

  1. Gleichheitsprüfung
    • Erstelle ein Programm, in dem eine Figur zwei Zahlen abfragt und überprüft, ob sie gleich sind. Wenn sie gleich sind, sagt die Figur „Die Zahlen sind gleich“ und sonst „Die Zahlen sind ungleich“.
  2. Strenge Gleichheit
    • Implementiere eine Vergleichsprüfung für zwei Texteingaben und lasse die Figur sagen, ob sie exakt gleich sind (Groß-und-Kleinschreibung beachten).
  3. Ungleichprüfung
    • Programmieren Sie die Figur so, dass sie fragt: „Ist Zahl A ungleich Zahl B?“ und danach die Antwort „Ja“ oder „Nein“ ausgibt, basierend auf der Eingabe der Benutzer.
  4. Größer als
    • Lass eine Spielfigur zwei Zahlen abfragen und sagen, welche größer ist. Gestalte die Ausgabe entsprechend den Eingaben.
  5. Kleiner als oder gleich
    • Erstelle ein Programm, bei dem das Sprite prüft, ob eine Eingabezahl kleiner oder gleich einer festgelegten Zahl ist und das Ergebnis anzeigt.
  6. Wahrheitswerteingabe
    • Lass die Figur zwei Wahrheitswerte (Ja/Nein-Fragen) eingeben und überprüfen, ob die Werte gleich sind.
  7. Mindestalter
    • Schreibe ein Programm, das das Alter des Nutzers abfragt und prüft, ob es größer oder gleich 18 ist, um „Volljährig“ oder „Nicht volljährig“ zu melden.

Zuweisungsoperatoren Aufgaben

  1. Zählschleife
    • Erstelle eine Variable ‚Zähler‘. Starte sie bei 0 und lasse sie bis 10 zählen, indem du bei jedem Schleifendurchlauf 1 hinzufügst.
  2. Subtraktion
    • Implementiere eine Animation, bei der sich eine Figur über den Bildschirm bewegt, indem du die X-Position jedes Mal um 5 verringerst, bis sie außerhalb des sichtbaren Bereichs ist.
  3. Multiplikation in Schleife
    • Setze eine Variable Produkt auf 1 und verdopple sie in jeder Schleife, bis der Wert größer als 50 ist. Zeige den Endwert an.
  4. Division
    • Teile eine Startzahl schrittweise durch 2, bis das Ergebnis kleiner als 1 ist, und zeige jede Teilung an.
  5. Modulus
    • Implementiere eine simple Spielaufgabe, bei der der Spieler ein Ereignis auslöst, wenn die Zeit in Sekunden durch 7 teilbar ist.

Logische Operatoren Aufgaben

Erstelle ein Spiel mit erweiterten Bedingungen: „Ich gehe wieder“, wenn sowohl „schönes Wetter“ und „Freizeit“ und nicht „schon gearbeitet“ war, ansonsten „bleibe ich“. Nutze !, &&, und ||, um diese Bedingung zu prüfen.

  1. UND-Bedingung
    Erstelle ein Programm mit zwei Schaltern. Die Figur soll sagen: „Beide sind an“, nur wenn beide Schalter eingeschaltet sind.
  2. ODER-Bedingung
    Verwende eine Szene mit zwei Türen. Die Figur sucht nach einem Ausgang und die Nachricht „Ausgang gefunden“, erscheint, wenn eine der beiden Türen offen ist.
  3. NICHT-Bedingung
    Lass eine Flagge umgedreht erscheinen, wenn das sichtbare Herz unsichtbar ist (Ein-/Ausblenden der Sichtbarkeit basierend auf dem Niemals-Operator).
  4. Aufleuchten bei Eingabe
    Erstelle ein „Anzeigensystem“, das aufleuchtet (z.B. durch das Ändern der Kostümfarbe der Figur), wenn mindestens einer von zwei möglichen Eingabewerten „OK“ ist.
  5. Bedingte Kombination
    Verwende eine Kombination aus UND, ODER, und NICHT, um zu bestimmen, wann eine Figur in einem Labyrinth „Punkte erhält“ und zeige die Anzahl der verdienten Punkte.
  6. Zahlspiel
    Lass den Benutzer zwei Zahlen wählen. Die Spielfigur sagt „Richtige Wahl“, wenn eine Zahl größer als 10 und die andere ist kleiner als 5 mit logischen Verknüpfungen für die Prüfung.
  7. Alarmsystem
    Implementiere ein Alarmsystem mit zwei Bedingungen, z.B. ob ein Raum dunkel und/oder die Tür geöffnet ist. Lassen Sie die Alarmleuchte basierend auf geschickter Logik angehen.
  8. Würde-ich-wieder-gehen
    Erstelle ein Spiel mit erweiterten Bedingungen: „Ich gehe wieder“, wenn sowohl „schönes Wetter“ und „Freizeit“ und nicht „schon gearbeitet“ war, ansonsten „bleibe ich“. Nutze !, &&, und ||, um diese Bedingung zu prüfen.