12.1.5 Globale und lokale Variablen

Bezug zum Kerncurriculum:
Ich kann zwischen lokalen und globalen Variablen unterscheiden.

5.1 Gültigkeitsbereich von Variablen

Im folgenden Programmbeispiel werden zwei Variablen festgelegt. Die 'variableA' außerhalb der for-to-Schleife und die 'variableB' innerhalb der for-to-Schleife:

let variableA = 10;

for (let i = 1; i < 11; i++) {
  let variableB = 0;
  variableB = variableB + 1;
  variableA = variableA + 1;
  console.log({variableA:variableA, variableB:variableB});
}

Starten Sie das Programm, indem Sie auf folgenden Link klicken: Variablen-Scope 01.

Wenn man unten auf die Zeile "CONSOLE" klickt, werden die Werte der Variablen 'variableA' und 'variableB' ausgegeben:

Der Wert von 'variableA' ändert sich, wenn die Schleife zehnmal durchlaufen wird, nicht aber der Wert von 'variableB'.

Erklärung:

'variableA' wird außerhalb der Schleife definiert. Zu Beginn hat 'variableA' den Wert 10 und dieser wird bei jedem Schleifendurchlauf um 1 größer. 'variableA' ist eine globale Variable, denn man kann sie überall im Programm verwenden.
'variableB' wird innerhalb der Schleife definiert und auf 0 gesetzt. Danach wird der Wert um 1 vergrößert. Sobald die Schleife erneut durchlaufen wird, setzt man den Wert von 'variableB' wieder auf 0. 'variableB' ist eine lokale Variable, denn man kann sie nur in der Schleife verwenden.

Das Programm kennt die lokale Variable 'variableB' außerhalb der Schleife nicht. Das kann man prüfen, indem eine weitere Anweisung console.log({variableA:variableA, variableB:variableB}); außerhalb der Schleife in das Programm eingefügt wird:

let variableA = 10;

for (let i = 1; i < 11; i++) {
  let variableB = 0;
  variableB = variableB + 1;
  variableA = variableA + 1;
  console.log({variableA:variableA, variableB:variableB});
}

console.log({variableA:variableA, variableB:variableB});

Starten Sie das Programm, indem Sie auf folgenden Link klicken: Variablen-Scope 02.

Wenn man unten auf die Zeile "CONSOLE" klickt, sieht man, dass eine Fehlermeldung ausgegeben wird, denn 'variableB' ist außerhalb der Schleife nicht definiert.

5.2 Programm debuggen

Folgendes Programm erzeugt einen Fehler. Um den Fehler zu finden, soll das Programm mit Hilfe des Debuggers Schritt für Schritt durchlaufen werden. Dazu setzt man an die Stelle, an welcher das Programm stoppen soll das Wort "debugger" in den Quellcode:

let variableA = 10;

debugger

for (let i = 1; i < 11; i++) {
  let variableB = 0;
  variableB = variableB + 1;
  variableA = variableA + 1;
}

variableA = variableA + variableB;

Starten Sie das Programm, indem Sie auf folgenden Link klicken: Variablen-Scope 03.

Drücken Sie im p5.js-Flems-Editor die Taste F12.
Drücken Sie dann die Taste F5 oder klicken Sie auf das Symbol für 'Seite aktualisieren'.

Die Programmausführung stoppt in der Zeile, in welcher das Wort 'debugger' steht:

Klicken Sie auf das Symbol für 'Step', um das Programm Schritt für Schritt auszuführen:

Um eine Variable zu beobachten, markiert man mit der Maus den Namen der Variablen, klickt auf die Markierung mit der rechten Maustaste und dann auf 'Add selected text to watches' oder man klickt rechts im Fenster 'Watch' auf das Symbol '+' und tippt den Name der Variablen ein.

Im Block 'Scope' werden automatisch alle selbst angelegten Variablen angezeigt. Dabei wird angegeben, ob man auf die Variable nur im aktuellen Block (lokale Variable) oder im gesamten Script (globale Variable) zugreifen kann:

Anmerkung: In Javascript sollte eine Variable mit dem Schlüsselwort 'let' definiert werden, da dieses streng zwischen lokalen und globalen Variablen unterscheidet. Das alte Schlüsselwort 'var', mit welchem auch Variablen definiert werden können, sollte nicht mehr verwendet werden, da der Gültigkeitsbereich (Scope) besonders für Anfänger schwer zu durchschauen ist.

Aufgabe

Finden Sie im letzten Programm mit Hilfe des Debuggers den Fehler und verändern Sie das Programm so, dass die Summe von 'variableA' und 'variableB' außerhalb der Schleife berechnet werden kann.

5.3 Übung: Otto oder Fritz

Aufgabe
Lösungsvorschlag

Mit folgendem Programm kann Otto oder Fritz begrüßt werden, je nachdem, welcher Name in der Variablen 'name' steht. Aber beim Programmablauf wird ein Fehler ausgegeben:

let name = "Otto";

function setup() {    
  createCanvas(300, 300);
  background(240);
  if (name === "Otto") {
     let hallo = "Hallo Otto!";
  } else {
     let hallo = "Hallo Fritz!";
  }
  strokeWeight(0);
  fill(0);
  textSize(30);
  text(hallo, 20, 40);
}

new p5();

Starten Sie das Programm und korrigieren Sie den Fehler, so dass entweder Otto oder Fritz begrüßt wird: Hallo Otto

Die Variable 'hallo' wird im if-Block definiert und ist dort eine lokale Variable. Deswegen kann man auf 'hallo' außerhalb des if-Blocks nicht zugreifen und es wird eine Fehlermeldung ausgegeben.

Damit man 'hallo' sowohl im if-Block, als auch außerhalb des if-Blocks nutzen kann, muss 'hallo' als globale Variable festgelegt werden. Das macht man, indem man am Anfang des Programms mit let hallo = ''; die Variable 'hallo' definiert und das Schlüsselwort 'let' vor 'hallo' im if-Block entfernt. Damit hat man aus der lokalen Variable 'hallo' eine globale Variable gemacht.

let name = "Otto";
let hallo = '';

function setup() {    
  createCanvas(300, 300);
  background(240);
  if (name === "Otto") {
     hallo = "Hallo Otto!";
  } else {
     hallo = "Hallo Fritz!";
  }
  strokeWeight(0);
  fill(0);
  textSize(30);
  text(hallo, 20, 40);
}

new p5();

5.4 Übung: Rechteck und Ellipse

Aufgabe
Lösungsvorschlag

Mit folgendem Programm wird mit Hilfe der Variablen 'zeit' entweder ein Halbkreis oder ein Rechteck ausgegeben:

let zeit = 2;

function setup() {
  createCanvas(400, 400);
  strokeWeight(0);
}

function draw() {
  background(220);
  if (frameCount%120 > 60) {
    let zeit = PI;
    fill('red');
    arc(width/2, height/2, 100, 100, 0, zeit);
  }
  else {
    fill('green');
    rect(width/zeit+50, height/zeit, -100, -50);
  }
}

new p5();

Starten Sie das Programm und analysieren Sie den Algorithmus, so dass Sie diesen erklären können: Rechteck oder Ellipse

let zeit = 2;

function setup() {
  createCanvas(400, 400);
  strokeWeight(0);
}

function draw() {
  background(220);
  if (frameCount%120 > 60) {
    let zeit = PI;
    fill('red');
    arc(width/2, height/2, 100, 100, 0, zeit);
  }
  else {
    fill('green');
    rect(width/zeit+50, height/zeit, -100, -50);
  }
}

new p5();

die Variable 'zeit' wird als globale Variable mit dem Wert 2 definiert.
im ersten if-Block wird mit 'let zeit = PI;' eine lokale Variable ebenfalls mit dem Namen 'zeit' festgelegt. Die lokale Variable überschreibt im if-Block die globale Variable, so dass in diesem Block 'zeit' den Wert 'PI' hat. Der Kreisbogen wird als Halbkreis mit der Bogenlänge 'PI' gezeichnet.
im zweiten if-Block wird keine lokale Variable definiert, so dass in der Anweisung 'rect' der Wert 2 aus der globalen Variabeln 'zeit' genommen wird.

5.5 Übung: lokale und globale Variable

Denken Sie sich ein kleines Programm aus, mit welchem der Unterschied zwischen lokalen und globalen Variablen eindrucksvoll demonstriert wird.