Javascript I
Werbung
Basics
Sprachkonstrukte I
Javascript I
Jan Backhaus
9.6.2005 / Vorlesung Web-Engineering
Jan Backhaus
Javascript I
Basics
Sprachkonstrukte I
Gliederung
1
Basics
Entwicklung und Geschichte
Überblick
Einbettung in HTML
2
Sprachkonstrukte I
Allgemeines
Werte und Variablen
Kontrollstrukturen
Jan Backhaus
Javascript I
Basics
Sprachkonstrukte I
Entwicklung und Geschichte
Überblick
Einbettung in HTML
Entwicklungsgeschichte
Netscape entwickelte 1995 die erste Version LiveScript
als Scriptsprache für ihren Browser
Umbenennung zu JavaScript aus Marketinggründen
Microsoft entwickelt halb-kompatibles JScript (1996)
ECMA und Netscape entwickeln gemeinsam den Standard
ECMAScript (kompatibel zu JavaScript)
W3C gibt mit DOM ein Framework vor - JavaScript1.5 setzt
dieses um (Ab IE 5.x und Netscape 6.x)
Jan Backhaus
Javascript I
Basics
Sprachkonstrukte I
Entwicklung und Geschichte
Überblick
Einbettung in HTML
Überblick
Objektorientiere clientseitige Scriptsprache in Anlehnung
zu Java
Überwindet statische Strukturen des WWW
wird zur Anwendung (DHTML)
) Website
Starke Verbreitung im WWW
Sicherheit wird durch Sandbox-Modell des Interpreters
gewährleistet.
Jan Backhaus
Javascript I
Basics
Sprachkonstrukte I
Entwicklung und Geschichte
Überblick
Einbettung in HTML
In der HTML Datei
index1.htm
Wird beim Laden der
Datei beim erreichen
des jeweiligen Codes
ausgeführt
Jede Stelle ist möglich.
Empfehlung: <head>
Kommentarzeichen
drumherum?
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!-alert("Hallo Welt!");
//-->
</script>
</head>
<body>
</body>
</html>
Jan Backhaus
Javascript I
Basics
Sprachkonstrukte I
Entwicklung und Geschichte
Überblick
Einbettung in HTML
In HTML-Tags
Aufruf durch Event-Handler
Nur für kurzen Code geeignet
Aufruf selbstgeschriebener Funktionen
index2.htm
<input type="button" name="frage" value="Weiter?"
onClick="alert(’Okay!’)">
<a href="javascript:alert(’Geht!’)">
Geht das auch mit hyperlinks? </a>
Jan Backhaus
Javascript I
Basics
Sprachkonstrukte I
Entwicklung und Geschichte
Überblick
Einbettung in HTML
Externe Datei
index3.htm
Dateiendung .js
Reine ASCII-Datei die
nur JavaScript Code
enthält
<script src="answer.js"
type="text/javascript">
</script>
Alles was zwischen den
script-Tags steht wird
ignoriert
answer.js
Bei MIME Problemen
var i = 2;
mit dem Webserver u.u : i = -i + ++i + ++i *
++i + ++i + ++i + ++i;
application/x-javascript
document.write("Ergebnis " + i);
Jan Backhaus
Javascript I
Basics
Sprachkonstrukte I
Allgemeines
Werte und Variablen
Kontrollstrukturen
Sprachbeschreibung
JavaScript ist engverwandt mit Java (aber nicht identisch)
Die Syntax von Java ist von C(++) abgeleitet
) Das erlernen von JavaScript ist für C-Programmierer eine
einfache Transferleistung
Dieser Vortrag behandelt nur unbekannte/ungewohnte
Konstrukte ausführlich
Jan Backhaus
Javascript I
Basics
Sprachkonstrukte I
Allgemeines
Werte und Variablen
Kontrollstrukturen
Hinweise
Jeder Browser ist anders
! Testen des Scripts
Muss es wirklich dynamisch sein (nicht jeder aktiviert
JavaScript)
Nicht alles was getan werden kann, sollte auch unbedingt
getan werden. Beispiele:
x
x
x
x
window.resize()
window.open()
document.onmousedown()
alert()
Solche Konstruktionen sind oft unhöflich
Eine Ausnahme ist mein Vortrag ;-)
Jan Backhaus
Javascript I
Basics
Sprachkonstrukte I
Allgemeines
Werte und Variablen
Kontrollstrukturen
Variablendeklarationen
Variablentypen werden automatisch bestimmt
JavaScript ist nicht streng typisiert
Variablendeklaration kann an beliebiger Stelle im Code
erfolgen
Variablen gelten per default nur im aktuellen Block
(Funktion, Schleife usw.)
Benennungsregeln wie in Java / C
Alle Bezeichner in JavaScript sind Case-Sensitive
) Vorsicht vor Schreibfehlern
Jan Backhaus
Javascript I
Basics
Sprachkonstrukte I
Allgemeines
Werte und Variablen
Kontrollstrukturen
Beispiele
Variablendeklaration
var
var
var
var
var
var
i;
x,y;
zahl = 2;
zahlstring = "40";
ergebnis = zahl + parseInt(zahlstring);
text="Antwort auf die Frage ";
text+= "nach dem Leben dem Universum ";
text+= "und dem ganzen Rest: ";
text+= ergebnis;
Numerisch
String
! String : Automatisch
! Numerisch : parseInt / parseFloat
Jan Backhaus
Javascript I
Basics
Sprachkonstrukte I
Allgemeines
Werte und Variablen
Kontrollstrukturen
Kontrollstrukturen
Es existieren die bekannten Kontrollstrukturen
if-else
case-switch
while-do / do-while
for
Sie verhalten sich so, wie aus Java / C bekannt
Jan Backhaus
Javascript I
Basics
Sprachkonstrukte I
Allgemeines
Werte und Variablen
Kontrollstrukturen
Bedingte Ausführung
Beispiel für if-Struktur
var passwort = "geheim";
var eingabe = window.prompt("Bitte geben Sie "
+ "das Passwort ein", "");
if (eingabe != passwort) {
alert("Falsch!");
} else
document.location.href = "richtig.htm";
Der Konditionaloperator (a?b:c) existiert auch
Anmerkungen zu case-switch
Nur Vergleich (==) möglich
Statement muss mit break abgeschlossen werden
Erst ab Java 1.2 (Fehlermeldung bei älteren Browsern)
Jan Backhaus
Javascript I
Basics
Sprachkonstrukte I
Allgemeines
Werte und Variablen
Kontrollstrukturen
Bedingte Ausführung
Beispiel für for-Schleife
var x,y,i;
document.write(’<table border="1"><tr>’);
document.write(’<td>Wert<\/td>’);
document.write(’<td>Wert<sup>2<\/sup><\/td>’);
for (i=1; i <= 10; ++i) {
x = i * i;
y = i * i * i;
document.write("<tr><td>" + i + "<\/td>");
document.write("<td>" + x + "<\/td><\/tr>");
}
document.write("<\/table>");
Jan Backhaus
Javascript I
Basics
Sprachkonstrukte I
Allgemeines
Werte und Variablen
Kontrollstrukturen
Fertig
Danke für die Aufmerksamkeit
Jan Backhaus
Javascript I
