Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni...
-
Upload
eberhart-gesser -
Category
Documents
-
view
108 -
download
2
Transcript of Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni...
![Page 1: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/1.jpg)
Arbeiten mit Javascript
Eine einführende Vortragsübung
Referentin: Christin Püschel
29. Juni 2005
![Page 2: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/2.jpg)
Übersicht
Allgemeines
Entwicklungsgeschichte
Funktionen
Übungsbeispiele
![Page 3: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/3.jpg)
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
![Page 4: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/4.jpg)
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
![Page 5: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/5.jpg)
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
![Page 6: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/6.jpg)
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
![Page 7: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/7.jpg)
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
![Page 8: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/8.jpg)
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:
![Page 9: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/9.jpg)
a) Einfache Modellform
<script> ... hier steht das JavaScript-Programm ...</script>
beziehungsweise
<script type="text/javascript"></script>
![Page 10: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/10.jpg)
Musterwebseite
<html><head> <script type="text/javascript">
</script> </head> <body> </body> </html>
![Page 11: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/11.jpg)
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
![Page 12: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/12.jpg)
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.
![Page 13: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/13.jpg)
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
![Page 14: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/14.jpg)
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>
![Page 15: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/15.jpg)
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.
![Page 16: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/16.jpg)
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
![Page 17: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/17.jpg)
Zusammenfassung
Javascript- Anweisungen stehen entweder im
Element <script>...</script>
Oder in besonderen Attributen, den
Event-Handlern
![Page 18: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/18.jpg)
Aufgabe 1
Kopiert den ersten und zweiten Quellcode aus der Word-Datei Script1 in Euren Editor und aktualisiert anschließend die Browseransicht!
![Page 19: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/19.jpg)
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:
![Page 20: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/20.jpg)
Einbettung der Scripts in Kommentare
<script language="JavaScript" type="text/javascript"> <!-- Inhalt vor alten Browsern verstecken ... hier steht das JavaScript-Programm ... // Ende: Inhalt verstecken --></script>
Erklärungen<!– und --> alles hierzwischen ist für alte Browser unsichtbar//hiermit wird ein JavaScript-Kommentar eingeleitet
![Page 21: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/21.jpg)
Einbettung der Scripts in Kommentare
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
![Page 22: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/22.jpg)
Übung 2
Fügt bitte den Skript 3 in den Editor und aktualisiert den Browser
![Page 23: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/23.jpg)
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:
![Page 24: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/24.jpg)
Verwendung des Attributes „language“
<script language="JavaScript1.1">
<!-- JavaScript 1.1 -->
<script language="JavaScript1.2">
<!-- JavaScript 1.2 -->
![Page 25: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/25.jpg)
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:
![Page 26: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/26.jpg)
Variablendefinitionen
var kontonummer = 0;
var kontoinhaber = "";
var kontostand = 0.0;
![Page 27: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/27.jpg)
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
![Page 28: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/28.jpg)
Variablen
Durch das „ = “-Zeichen wird der Ausdruck rechts vom Gleichzeichen ausgewertet und dem links stehenden Ausdruck zugeordnet
![Page 29: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/29.jpg)
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 :-)"); } }
![Page 30: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/30.jpg)
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);
![Page 31: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/31.jpg)
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
![Page 32: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/32.jpg)
Ü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
![Page 33: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/33.jpg)
Ergebnis
<script language="JavaScript" type="text/javascript"> <!-- Inhalt vor alten Browsern verstecken document.writeln("Ausgabe der Quadratzahlen von 0 bis 9:"); for (var i=0; i<10; i=i+1) { document.writeln("Quadrat von ",i," ist: ",i*i); } // Ende: Inhalt verstecken --> </script>
![Page 34: Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005.](https://reader035.fdokument.com/reader035/viewer/2022062623/55204d7149795902118c3bef/html5/thumbnails/34.jpg)
Literatur und Quellen
SELFHTML.de
Javascript-world.de
DeveloperChannel.de
Web-toolbox.net