Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005

Arbeiten mit Javascript

Eine einführende Vortragsübung

Referentin: Christin Püschel

29. Juni 2005

Übersicht

Allgemeines

Entwicklungsgeschichte

Funktionen

Übungsbeispiele

Javascript...was ist das genau?

Script-Sprache zur Verwendung innerhalb von HTML-Dokumenten

Skriptsprache = Programmiersprache, die nicht direkt vom Prozessor ausgeführt wird, sondern von einem anderen Programm „interpretiert“ wird Interpreter (Browser)

JavaScript zur Gestaltung interessanter, interaktiver Seiten

Javascript...was ist das genau?

kompakte überschaubare Sprache

Voraussetzung für Erstellung: einfacher Text-Editor und ein JavaScript-fähiger Browser

Direkte Weitergabe des Quellkodes ohne Umwandlung möglich

Geschichte

von Netscape zunächst unter dem Code-Namen mocha, dann unter dem Namen Live-Script entwickelt

Orientierung an Programmiersprache Java von Sun

Nach Anerkennung als "legitimer" Ableger von Java folgte entgültige Namenswahl: JavaScript

Geschichte

Mit Netscape 4.0 folgte JavaScript Version 1.2

Auf Basis von JavaScript 1.0 hat Microsoft ebenfalls einen Interpreter in den Internet Explorer integriert JScript

Sprachumfänge sind nicht vollkommen deckungsgleich

Funktionsbeispiele

die Überprüfung von Bedingungen (if ... else)

das Abarbeiten von Schleifen (for ... while ...)

Durchführung von Berechnungen

Überprüfung von Formularen vor dem Abschicken

dynamisches Ändern von Farben

dynamisches Austauschen von eingebundenen Bildern

Einbindung von Javascripts

a) Entweder... wird der Quellcode direkt in die Datei eingebettet, in der sich auch der HTML-Code befindet

b) Oder... der Quellcode wird in eine eigene Datei verlagert, auf welche von der Webseite verwiesen wird

Zur Unterscheidung von Programmskript und Text wird folgendes Element eingefügt:

a) Einfache Modellform

<script> ... hier steht das JavaScript-Programm ...</script>

beziehungsweise

<script type="text/javascript"></script>

Musterwebseite

<html><head> <script type="text/javascript">

</script> </head> <body> </body> </html>

Position des Scripts innerhalb des html-Körpers

Das Element darf (fast) überall in einer Webseite enthalten sein

Aber: es ist sinnvoll, script im Element head unterzubringen

Außerdem sagt der Name des Elements noch gar nichts darüber aus, um welche Programmiersprache es sich bei dem Inhalt handelt

Position des Scripts innerhalb des html-Körpers

daher braucht der Browser noch den Hinweis, welche Art von Inhalt er in script vorfindet

Hier die Unterscheidung zweier Attribute, language und type.

Ersteres wurde von Netscape eingeführt, das zweite ist eine Vorgabe des HTML-Standards, die in der Praxis noch nicht relevant ist, die man aber schon jetzt einhalten kann.

b) Einbettung in eine eigene Datei

JavaScript wird hier in Dateien mit der Endung .js gespeichertUm zum Beispiel auf eine Datei library.js zu verweisen, muss folgender Code in den Kopfbereich der Webseite gestellt werden

<script type="text/javascript" src="library.js"> </script>

Beispiel.js im Übungsskript

Idealform der Einbettung

<html><head> <title>... der Titel des Dokuments ...</title><script language="JavaScript“ type="text/javascript">... hier steht das JavaScript-Programm ...</script> </head> <body> ... hier steht die HTML-Seite ... </body></html>

Idealform der Einbettung

Die Position von script im Kopf der Seite bietet sich an, um dort Funktionen, Variablen und weitere Datenstrukturen zu definieren, die zu einem späteren Zeitpunkt verwendet werden

Um auf Ereignisse (Cursorbewegung) reagieren zu können, wurden mit JavaScript besondere Attribute für einige HTML-Elemente definiert, die so genannten Event-Handler.

Beispiele für Events

onClick Ein Objekt wird angeklickt

onFocus Objekt wird aktiviert

onLoad Nach Laden eines Objektes

onMouseOut Objekt wird von Maus verlassen

onMouseOver Objekt wird mit der Maus überfahren

onSelect Text wird markiert

Zusammenfassung

Javascript- Anweisungen stehen entweder im

Element <script>...</script>

Oder in besonderen Attributen, den

Event-Handlern

Aufgabe 1

Kopiert den ersten und zweiten Quellcode aus der Word-Datei Script1 in Euren Editor und aktualisiert anschließend die Browseransicht!

Einbettung der Scripts in Kommentare

Problem: was machen Browser mit JavaScript-Programmen, wenn sie diese nicht lesen können? Wenn der Web-Browser neuer ist, wird er das Element script kennen und den Inhalt einfach übergehen) Eventuell kommt das Programm aber auf die Idee, den Inhalt und die Anweisungen anzuzeigen Um das zu verhindern, muss der Inhalt von script in HTML-Kommentare eingebettet werden:


<script language="JavaScript" type="text/javascript"> </script>

Erklärungen<!– und --> alles hierzwischen ist für alte Browser unsichtbar//hiermit wird ein JavaScript-Kommentar eingeleitet


Will man zusätzlich dem User eine Mitteilung machen, dass er mit einem anderem Browser eine JavaScript-Darstellung erhalten hätte, verwendet man das Element „noscript“

Der Inhalt wird nur bei ausgeschalteten Javascript angezeigt

Übung 2

Fügt bitte den Skript 3 in den Editor und aktualisiert den Browser

Verwendung des Attributes „language“

Es gibt mittlerweile von JavaScript mehrere Versionen

der Browser muss erkennen können, um welche Version es sich handelt

wird eine andere Version als 1.0. eingesetzt, sollte dies mit dem Attribut language angezeigt werden:

Verwendung des Attributes „language“

<script language="JavaScript1.1">



<script language="JavaScript1.2">



Variablen

Variablen sind Platzhalter für bestimmte, nicht festgelegte Wertekönnen in JavaScript ohne vorherige Bekanntmachung benutzt werden. Für eine bessere Lesbarkeit eines Programms empfiehlt es sich jedoch, Variablen

zu Beginn des Programms oder script-Elements zu deklarieren mit aussagekräftigen Namen zu versehen und mit einem Initialwert zu definieren.Hier einige Variablendefinitionen:

Variablendefinitionen

var kontonummer = 0;

var kontoinhaber = "";

var kontostand = 0.0;

Variablen

es können auch "richtige" Werte eingesetzt werden:var iKontonummer = 0; var sKontoinhaber = "";var fKontostand = 0.0;

i für eine Ganzzahl (Integer)s für eine Zeichenkette (String) f für eine Fließkommazahl (float) nur eine Konvention

Variablen

Durch das „ = “-Zeichen wird der Ausdruck rechts vom Gleichzeichen ausgewertet und dem links stehenden Ausdruck zugeordnet

Programmsteuerung: If-then-else

if (kontostand < 0) { document.writeln("Du bist pleite :-("); } else

{ if (kontostand == 0) { document.writeln("Du hast kein Geld :-|"); } else

{ document.writeln("Du bist reich :-)"); } }

Programmsteuerung: For-schleife

Anweisungsfolge für eine bestimmte Anzahl an Durchläufen wiederholt

Zum Beispiel

var summe = 0;

for (var i=1 ; i<=10 ; i=i+1)

{ summe = summe + 1; } document.writeln("Ergebnis ist: ",summe);

Programmsteuerung: For-schleife

Hier werden die Zahlen von 1 bis 10 aufaddiert und das Ergebnis in die Variable summe geschrieben. Die Zählvariable i beginnt bei 1 (i=1), läuft solange i kleiner oder gleich 10 ist (i<=10) und wird bei jedem Durchlauf um 1 erhöht (i=i+1). Anschließend gibt document.writeln das Ergebnis aus

Übung 3

Schreibt ein Programm, das die Quadrate der Zahlen von 0 bis 9 auf einer HTML-Seite ausgibt.

Tipp: Benutzt eine for-Schleife, die von 0 bis 9 hochzählt, den Zähler quadriert und das Ergebnis mit document.writeln() ausgibt

Ergebnis

<script language="JavaScript" type="text/javascript">  </script>

Literatur und Quellen

SELFHTML.de

Javascript-world.de

DeveloperChannel.de

Web-toolbox.net

Documents

Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005