JavaScript Kontrollausgaben mit Firebug

Wenn wir nun unseren Firebug zur Kontrolle einsetzen möchten, können wir eine Kontrollausgabe erzeugen mit:

console.log('Hallo')

Wird nun Firebug im Browser Firefox aufgerufen, erscheint im Reiter Console unsere Ausgabe „Hallo“

Das gleiche können wir auch mit Variablen machen.

<script>
function ausgabe(vorname) {
    alert('JavaScript-Tutorial für ' + vorname  + 
           ' - jetzt JavaScript lernen');
}
var name = 'Sonja';
ausgabe(name);
console.log(name)
</script>

In der Ausgabe in der Firebug-Console sehen wir nun „Sonja“.

Es können auch Text und Variablen gemischt werden.

<script>
function ausgabe(vorname) {
    alert('JavaScript-Tutorial für ' + vorname  + 
           ' - jetzt JavaScript lernen');
}
var name = 'Sonja';
ausgabe(name);
console.log('Inhalt der Variable außerhalb der Funktion:'+ name)
</script>

Entsprechend sehen wir in der Firebug-Console nun als Ausgabe:

Aufgabe Variablenausgabe mit Firebug-Console

Lassen Sie sich den Wert der Variable name und zusätzlich den Wert der Variable vorname innerhalb der Funktion in der Firebug-Console ausgeben!

Lösung zur Aufgabe:

<script>function ausgabe(vorname) {
    alert('JavaScript-Tutorial für '+ vorname  +'- jetzt JavaScript lernen');
    console.log('Inhalt der Variable innerhalb der Funktion:' + name)
}
var name = 'Sonja';
ausgabe(name);
console.log('Inhalt der Variable außerhalb der Funktion:' + name)
</script>

Es sollte eine Fehlermeldung erscheinen. Warum ist das so? Die Variable name existiert innerhalb der Funktion nicht, da diese außerhalb der Funktion als normale Variable gesetzt wurde.

Interessant wird es nun, wenn wir in der Funktion Berechnungen etc. mit einem Inhalt anstellen und dieses Ergebnis dann außerhalb benötigen. Dazu können wir Inhalte wieder aus einer Funktion herausgeben.

In unserem Beispiel lassen wir nun den Inhalt der in der Funktion erzeugen Variablen vorname aus der Funktion herausgeben. Dazu gibt es den Befehl return(..);

<script>
function ausgabe(vorname) {
  alert('JavaScript-Tutorial für '+ vorname +' - jetzt JavaScript lernen');
  return(vorname);
}

Allerdings muss zur Nutzung der Variablen nun der Funktionsaufruf ergänzt werden, damit der zurückgelieferte Inhalt (es wird nicht die Variable zurückgeliefert, sondern nur der Inhalt) zur gewünschten Variablen außerhalb wird:

var name = 'Sonja';
var vorname = ausgabe(name);
console.log('Inhalt der Variable außerhalb der Funktion:' + name)
console.log('Inhalt der Variable vorname außerhalb der Funktion:'+vorname)
</script>