Meldungs-Fenster mit Javascript

Meldungs-Fenster mit Javascript

Zielgruppe sind wenig erfahrene StudentInnen und Informatik-Amateure

Grundkenntnisse der Informatik und von HTML werden vorausgesetzt.



Demo-Programm: Meldungs-Fenster


Mit dem Programm wird ein kleines Meldungs-Fenster angezeigt.
Es gibt mehrere Möglichkeiten, um ein Javascript-Programm interaktiv zu starten, z.B. mit einem HTML-HyperLink oder mit einem HTML-Button:  

Experiment


Nach diesem Modell kann man auch jedes andere Javascript-Programm auf eigene Webseiten übertragen.



HTML-Quelltext der Datei webseite.html
Diese Elemente sind (zumindest in ähnlicher Form) in jeder Webseite enthalten.
<!DOCTYPE HTML>
<html>
<head>
<title>Webseite</title>
</head>
<body>
<h1>Webseite</h1>
</body>
</html>



Quelltext eines (vorläufig) leeren HTML <script>-Elements:
<script type="text/javascript">
</script>



Quelltext der Javascript-Funktion hallo()
function hallo() {
alert('Hier ist Javascript !');
}



Quelltext eines HTML <button>-Elements
<button onclick="hallo()"> Hallo </button>


Quelltext einer Demo-Webseite mit Javascript-Programm und Bedienungs-Button:
<!DOCTYPE HTML>
<html>
<head>
<title>Webseite</title>
<script type="text/javascript">
function hallo() {
alert('Hier ist Javascript !');
}
</script>
</head>
<body>
<h1>Webseite</h1>
Klick auf <button onclick="hallo()">Hallo</button>
</body>
</html>



Javascript


• Jedes gängige Browser-Programm enthält einen Javascript-Interpreter-Teil und kann daher Javascript-Programme ohne die IUnstallation irgendwelcher AddIns ausführen.

• Daher kann man Webseiten besonders gut mit Javascript-Programmen ergänzen:
Typische Anwendungen sind 'Dynamische' Elemente zur interaktiven Bedienung und zur Animation.


Nachteile


Debuggen von Javascript


Man muss daher mit Fehlern rechnen und die Arbeit so optimieren, dass man diese rasch findet und behebt. Dazu verwendet man Debug-Methoden.


Dieses Beispiel berechnet die Summe aller ganzen Zahlen von 1 bis 5:
function sum_alert() {
var i=0; var sum=0;
alert("Anfangswert\nsum=" + sum);
for(i=1; i<=5; i++) {
alert("Vor Summierung\ni=" + i + ', sum=' + sum);
sum += i;
alert("Nach Summierung\ni=" + i + ', sum=' + sum);
}
alert("Ergebnis\nsum=" + sum);
}

Mit Klick auf den Button oder auf diesen Link wird das Programm ausgeführt.

Mit der Vorgabe von i<=5 werden insgesamt 12 Alarm-Fenster angezeigt.

Nachteil: Mühsam und zeitraubend, wenig übersichtlich.


Das gleiche Beispiel zum Debuggen mit der Konsole:
function sum_console() {
var i=0; var sum=0;
console.log('Anfangswert: sum=' + sum);
for(i=1;i<=5;i++) {
console.log('Vor Summierung: i=' + i + ', sum=' + sum);
sum += i;
console.log('Nach Summierung: i=' + i + ', sum=' + sum);
}
console.log('Ergebnis: sum=' + sum);
alert("Ergebnis\nsum=" + sum);
}

Mit Klick auf den Button oder auf diesen Link wird das Programm ausgeführt.

Sie müssen die Web-Konsole öffnen, um den Debug-Text anzuzeigen. Zur Sicherheit wird (nur) das Ergebnis auch mit alert() angezeigt.

Vergessen sie nicht, nach dem Debuggen alle Debug-Anweisungen zu entfernen oder mit vorangestellten Kommentar-Zeichen abzuschalten:
// console.log('Abgeschaltet');



Einige Browser bieten spezifische Konsolen-Methoden, die nur mit dem jeweiligen Browser funktionieren. Davon wird abgeraten: Die hier vorgestellte Methode log() funktioniert mit allen gängigen Browsern.