BSI: Erste Schritte mit JavaScript

Basissysteme der Informationsverarbeitung 1 - BSI 1
BSI: Erste Schritte mit JavaScript

BSI: Erste Schritte mit JavaScript

Kölsch of the Week!

Inhaltsangabe:

Allgemeines zu JavaScript
JavaScript in HTML: Ein erstes Beispiel
alert();
confirm(); und if ... else
Event-Handler
Funktionen

Allgemeines zu JavaScript

Ziel des Einsatzes von JavaScript ist es, mit dem User in Form von Dialogen, die in HTML eingebettet sind, in Kontakt zu treten. Dazu bedarf es einer zusätzlichen Sprache, die in Form von kleinen Programmen eine dynamische Komponente in das statische Gerüst von HTML einbaut. So ist es möglich, dass persönliche Vorgaben oder Anpassungen des Users berücksichtigt werden können. Es müssen (kleine) Programme, die Scripts, verfasst werden, diese werden in den HTML-Code eingebunden und auf dem Server gespeichert. Bei Anforderung der Webseite wird der Script-Code genau wie der HTML-Code zunächst uninterpretiert an den Client übertragen. Der Browser des Benutzers interpretiert anschließend beides und führt die Programme aus. JavaScript ist damit eine "clientseitige" Scriptsprache. Die Scripts werden durch den Browser des Benutzers interpretiert und ausgeführt. Es wurde speziell zur Webseitenoptimierung entwickelt.

Das Besondere an JavaScript ist die Plattformunabhängigkeit. Es wird lediglich ein Browser benötigt, der die Scripts interpretieren kann, was bei allen aktuellen Browsern der Fall ist. Aufgrund dieser Browserabhängigkeit ist JavaScript allerdings auf den Einsatz für das Internet beschränkt. Browserabhängigkeit meint in diesem Kontext nicht die Abhängigkeit von einem bestimmten Browser, sondern die Tatsache, dass zur Interpretation eines Javascripts ein Browser benötigt wird. Die unterschiedlichen Browseranwendungen reagieren leider auf gleiche Scripte nicht immer gleich... Besonders hinzuweisen ist auf den Unterschied von JavaScript und Java. Dies wird hier im Allgemeinen erörtert.

Ressourcen zum Thema

Ein etwas älteres, aber vollständig kostenloses <openbook> von Galileo Computing finden Sie im folgenden ZIP-Archiv: JavaScript lernen

Die Einführung der w3schools finden Sie hier.

Zum Seitenanfang

JavaScript in HTML: Ein erstes Beispiel

Kommentieren in JavaScript

Kommentare in JavaScript helfen, sich schnell wieder zu Recht zu finden, wenn man das Programm vor einiger Zeit geschrieben hat und wenn mehrere Personen am Quellcode arbeiten. Teilweise sitzt man Jahre später vor einem Stück Quellcode und wundert sich, dass es bisher funktioniert hat und kann kaum glauben, dass es von einem selber programmiert wurde. Und dann ist jeder über kurze erklärende Kommentare mehr als glücklich. Bei der Korrektur von Hausaufgaben können sie dem Korrektor auch sehr hilfreich sein ...

Besonders beim Erlernen sollten vor bestimmte Zeilen oder Befehle Kommentare hinzugefügt werden, um einen besseren Überblick zu bekommen, wozu der Befehl da ist, eventuell auch um zu wissen, wer den Befehl hinzugefügt hat. (Gruppenarbeiten)

Das <script>-Element

Ein JavaScript kann direkt in den HTML-Quellcode geschrieben werden. Um ein solches Script durch den Browser ausführen zu lassen, wird zunächst ein neues HTML-Element benötigt:

<script type="text/javascript">
// hier steht bald unser JavaScript Code
</script>

Das type-Attribut wird benötigt, da es neben JavaScript noch andere Scriptsprachen gibt, die von Browsern unterstützt werden.

Das <noscript>-Element

Über das <noscript>-Element können User älterer Browser (oder solcher, die JavaScript deaktiviert haben) darauf hingewiesen werden, dass zur korrekten Darstellung der Daten oder zur vollen Nutzung der Funktionalität einer Seite die Aktivierung von JavaScript notwendig ist. Die Verwendung wird nur im ersten Beispiel einmal vorgestellt und dann der Übersicht wegen weggelassen, grundsätzlich sollte jedoch nicht auf das Tag verzichtet werden.

<script>
document.write("Hello World!")
</script>
<noscript>
Your browser does not support JavaScript!
</noscript>

Beispiel 1

<!DOCTYPE html> 
<html>
<head> 
<title>Titel der Seite</title>
</head> 

<body> 
<script type="text/javascript"> // hier steht bald unser JavaScript Code </script>
<noscript> Your browser does not support JavaScript! </noscript>
 </body> 
</html>

Zum Seitenanfang

alert();

Die Funktion alert(); löst einen Hinweis-Dialog aus. Der Inhalt der Klammer wird in diesem Dialog ausgegeben. Im Rahmen dieses Beispiels kann man sehr gut beobachten, in welcher Reihenfolge der Browser den Inhalt der HTML-Seite ausgibt: In der Reihenfolge, wie er tatsächlich im Quellcode steht. Da das Script-Tag auf dieser Sitzungsseite direkt am Anfang steht, wird der alert(); zuerst ausgeführt. Erst, wenn der Dialog durch das Bestätigen beendet wurde, wird der Rest der Seite (z.B. diese Erklärung) aufgebaut.

...
<body>
<header>Die Überschrift erscheint vor dem Alert</header>
<script type="text/javascript">
alert("Dies ist ein spannender Hinweis!");
</script>
<p>Erst nach dem Hinweis wird der Text sichtbar.</p>
...
</body>
</html>

Zum Seitenanfang

confirm(); und if ... else

confirm(); Im Rahmen dieses Beispiels muss zunächst ein Konstrukt aus der Programmierung eingeführt werden. Die Bedingte Anweisung (if ... else).

<script type="text/javascript">
if (confirm("Wollen Sie JavaScript lernen?"))
{ document.write("Gute Entscheidung");}

else {document.write("<font color='red'>Schade..</font> Hoffentlich ändern Sie ihre Meinung!");
}
</script>

In diesem Beispiel wird innerhalb der Klammern hinter dem Schlüsselwort if geprüft, ob eine Bedingung erfüllt ist oder nicht. Bestätigt der Benutzer den Dialog mit "ok" (engl.: confirm), wird der Teil des JavaScript-Codes ausgeführt, der sich innerhalb der geschweiften Klammern nach dem if() befindet. Wählt der Benutzer im Dialog "Abbrechen", so wird der Teil des Scrips ausgeführt, der sich hinter dem "else" (dt.: andernfalls) Block befindet.

Zum Seitenanfang

prompt(); mit document.bgColor,

Die Funktion „prompt();“ öffnet ein Dialogfenster mit einem Eingabefeld, einem OK-Button und einem Abbrechen-Button. Der Anwender kann in dem Eingabefeld etwas (im Beispiel eine gültige Hintergrundfarbe) eingeben. Die Methode prompt() gibt diesen eingegebenen Wert zurück, welcher dann in die Variable bgColor des document-Objekts geschrieben wird.

...
 <script type="text/javascript">
document.bgColor=prompt("Geben Sie bitte eine Hintergrundfarbe an!");
 </script>
</body>
...

Zum Seitenanfang

Event-Handler

Event-Handler sind ein wichtiges Bindeglied zwischen (X)HTML und JavaScript. Sie werden meist in Form von Attributen in HTML-Tags notiert. Da es sich um Bestandteile handelt, die innerhalb von HTML vorkommen, hat das W3-Konsortium die Event-Handler in den HTML-Sprachstandard mit aufgenommen. Hier erfahren Sie mehr darüber. Event-Handler erkennt man pragmatisch daran, dass sie immer mit "on" beginnen. Drei erste Beispiele sind: - onclick: Beim Klick auf das Element (in der Regel ein Link) wird etwas (z.B. eine JavaScript-Funktion) ausgelöst. - onload: Beim Öffnen einer Datei (z.B. der HTML-Datei) wird etwas ausgelöst. - onmouseover: Beim Überfahren des Elements mit der Maus wird etwas ausgeführt. Hinweise Abhängig von einem bestimmten Ereignis (Klick, Mausbewegung etc.) wird bei allen Event-Handlern eine Anweisung ausgeführt! Event-Handler gehören zu den so genannten Universal-Attributen und können in verschiedenen HTML-Elementen verwendet werden. Eine exakte Beschreibung dazu ist hier zu finden.

Beispiel 1

...
<body>
Wenn Sie
<a href="http://www.wikipedia.de" onclick="alert('Wollen Sie wirklich zur Wikipedia wechseln?')">hier</a>
klicken, gelangen Sie nach einem weiteren Dialog zur Wikipedia!
</body>
</html>

Beispiel 2

<!DOCTYPE html>
<html>
<head>
<title>Titel der Seite</title>

<script type="text/javascript">
function quadrat( zahl ){
if(zahl<1000){
var square=zahl*zahl;
alert("Das Quadrat der von Ihnen gewaehlten Zahl ("+zahl+") ist "+square+"!");
}

else{
alert("Die von Ihnen gewaehlte Zahl war zu gross!");
}
}

function eingabe(){
var meineZahl = prompt("Geben Sie eine Zahl ein!");
quadrat(meineZahl);
}
</script>
</head>

<body>
<form action="#">
<input type="button" value="Click me!" onclick="eingabe()">
</form>
</body>
</html>

Von "onClick" zu "onclick"

In Zeiten von HTML4 wurde das "c" in onclick der Lesbarkeit halber groß geschrieben (onClick = CamelCase oder Höckerschreibweise). Seit XHTML dürfen Elementnamen wie auch Attributnamen allerdings keine Großbuchstaben mehr enthalten.

Wie in fast allen Programmiersprachen sollte bei JavaScript die korrekte Schachtelung von Annotationszeichen beachtet werden.

Würde man im obigen Beispiel folgendes schreiben: onclick="alert("Wollen Sie...?")"
könnte das vom Browser missverstanden werden: Ende des Attributs bereits nach alert(.

Zum Seitenanfang

Funktionen

Eine Funktion in JavaScript ist ein immer wieder verwendbarer Code-Block, der nur ausgeführt wird, wenn ein bestimmtes Ereignis (Event) eintritt oder wenn die Funktion explizit aufgerufen wurde. Funktionen können sowohl im <head> als auch im <body> Bereich eines Dokumentes definiert werden. Allerdings es ist sehr sinnvoll und massiv empfehlenswert, Funktionen grundsätzlich im <head>-Bereich zu definieren, damit sicher gestellt ist, dass der Browser sie geladen hat, bevor sie aufgerufen werden. Nachfolgend finden Sie diverse Beispiele mit Erläuterung.

Um den Browser also davon abzuhalten, ein Script sofort beim Laden einer Seite aufzurufen, kann dieses in eine Funktion (function) geschrieben werden. Diese Funktion ist dann von überall innerhalb des <body> Bereich der HTML-Seite aufrufbar und wird erst dann ausgeführt.

Beispiel 1: Einfache Funktion

<head>
    <meta charset="UTF-8">
    <title>Beispiel 1</title>
    <script type="text/javascript">

        var zahl1 = 3;
        var zahl2 = 4;
        var ergebnis;

        ergebnis = zahl1 + zahl2;

        alert(ergebnis);

    </script>
</head>

Beispiel 2: Funktion mit Userinput

<head>
    <meta charset="UTF-8">
    <title>Beispiel 2</title>
    <script type="text/javascript">

        var zahl1 = parseInt(prompt("Bitte geben Sie die erste Zahl ein!"));
        var zahl2 = parseInt(prompt("Bitte geben Sie die zweite Zahl ein!"));
        var ergebnis;

        ergebnis = zahl1 + zahl2;

        alert(ergebnis);

    </script>
</head>

Beispiel 3: Funktion mit Eventhandler

    <head>
        <meta charset="UTF-8">
        <title>Beispiel 3</title>
        <script type="text/javascript">

            function rechne() {
                var zahl1 = parseInt(prompt("Bitte geben Sie die erste Zahl ein!"));
                var zahl2 = parseInt(prompt("Bitte geben Sie die zweite Zahl ein!"));
                var ergebnis;

                ergebnis = zahl1 + zahl2;

                alert(ergebnis);
            }

        </script>
    </head>
    <body>
        <img alt="ein Bild" src="https://www.fibonicci.com/de/wp-content/uploads/2015/01/46085.png" onclick="rechne()">
    </body>

Zum Nachlesen auf w3schools ("Home" bis "Data Types").

Hier geht's zu den Exercises auf W3schools: JS Variables und JS Operators

Zum Seitenanfang