Das erste JavaScript

Das erste JavaScript
Das erste JavaScript
<html>
<head><title>Mein erstes JavaScript</title>
<script type="text/javascript">
<!-alert("Hello World ist doof!");
//-->
</script>
</head>
<body>
</body>
</html>
so sieht's aus
Das erste JavaScript I
Das erste JavaScript
<html>
<head><title>Mein erstes JavaScript</title>
<script type="text/javascript">
<!-alert("'Hello World' ist doof!");
//-->
</script>
</head>
<body>
</body>
</html>
so sieht's aus
Das erste JavaScript II
Das erste JavaScript
Es gibt keine festen Vorschriften dafür, wo im HTML-Dokument ein JavaScript-Bereich
definiert werden muss. Meist steht er im Kopf der HTML-Datei, also zwischen <head>
und </head>, um möglichst sicher zu stellen, dass der Code vom Browser bereits
eingelesen ist und zur Verfügung steht, wenn er ausgeführt werden soll.
JavaScript-Code kann automatisch beim Einlesen der HTML-Datei ausgeführt werden,
wenn JavaScript-Befehle in einem JavaScript-Bereich außerhalb jeder selbst definierten
Funktion stehen.
Zeichenketten (Strings) werden in Anführungszeichen eingeschlossen (einzelne oder
doppelte).
Java Scripts auslagern
JavaScripts in externen Dateien
Auch JavaScript-Dateien können in externe Dateien ausgelagert werden. Dies ist
sinnvoll, wenn die Scripte lang und kompliziert sind oder wenn man das gleiche Script
öfter verwenden will. Für JavaScript-Dateien wird normalerweise die Endung „.js“
gebraucht.
Eine JavaScript-Datei wird mit dem Attribut „src“ im „script“-Element in das HTMLDokument eingebunden.
In einer „.js“-Datei steht ausschließlich JavaScript-Code. HTML-Elemente wie „script“
oder HTML-Kommentare dürfen dort nicht vorkommen.
Java Scripts auslagern - Beispiel
extern.js:
alert("Ich bin Blindtext.\nVon Geburt an.");
externesjs.html
<html>
<head>
<title>JavaScript auslagern</title>
<script type="text/javascript" src = "extern.js"></script>
</head>
<body>
</body>
</html>
so sieht's aus
Java Scripts in HTML-Tags
JavaScript-Anweisungen in HTML-Tags
JavaScript kann auch innerhalb normaler HTML-Tags vorkommen. Das ist dann kein
komplexer Programmcode, sondern in der Regel nur der Aufruf bestimmter Methoden,
Funktionen, Objekte, Eigenschaften.
Für den Aufruf gibt es so genannte Event-Handler. Das sind Attribute in HTML-Tags,
über die sich JavaScripts aktivieren lassen. Für jeden der möglichen Event-Handler ist
festgelegt, in welchen HTML-Tags er vorkommen darf.
Java Scripts in HTML-Tags - Beispiel
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!-function schreib() {
alert("Streng dem definierten Wesen des Blindtextes
folgend, fungiere ich als solcher und gebe mich
unverbindlich inhaltsleer. ...");
}
//-->
</script>
</head>
<body>
<div id = "einDiv" onClick="schreib()">man denkt gar nicht, dass
wenn
man hier clickt, was passiert...
</div>
</body>
</html>
so sieht's aus
Kommentare
Kommentare
In JavaScript-Code kann man ein- und mehrzeilige Kommentare einfügen.
Einzeilige Kommentare beginnen mit „//“:
// Dies ist ein einzeiliger Kommentar
document.write(„der Kommentar endete hier“);
Mehrzeilige Kommentare beginnen mit „/*“ und enden mit „*/“:
document.write(„das ist noch kein Kommentar“);
/*
Der Kommentar beginnt erst hier.....
Hier ist er immer noch.
document.write(„ich mach nichts, weil ich auskommentiert bin“);
Hier ist auch noch Kommentar.
*/
Variablen
Variablen
Variablen sind Speicherbereiche, in denen Daten, die im Laufe von Programmprozeduren
benötigen werden, gespeichert werden. Der Inhalt, der in einer Variablen gespeichert ist,
wird als "Wert" bezeichnet. Der Wert einer Variablen kann jederzeit geändert werden.
Vor der Arbeit mit einer Variablen muss diese zunächst bekanntgemacht („deklariert“)
werden. Dabei erhält die Variable einen Namen, der nur aus Buchstaben, Ziffern und
dem Unterstrich besteht und mit einem Buchstaben beginnt.
Es gibt globale und lokale Variablen. Lokale Variablen werden innerhalb eines Blocks
(z.B. einer Funktion) deklariert und sind nur dort gültig. Sie werden mit dem
Schlüsselwort „var“ deklariert, ansonsten sind sie global. Globale Variablen sind im
gesamten Dokument gültig und stehen jederzeit zur Verfügung.
Variablen - Beispiele
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!-var nachricht = "Gleich passiert nichts....";
aktuellegeschwindikeit = 0;
alert(nachricht);
function speedtest() {
document.write ("aktuelle Geschwindikeit " +
aktuellegeschwindikeit);
alert ("beschleunigen");
aktuellegeschwindikeit = 12;
var ausgabe = " Deine aktuelle Geschwindigkeit ist jetzt " +
aktuellegeschwindikeit;
document.write(ausgabe);
}
//-->
</script>
</head>
<body onLoad="speedtest()">
</body>
</html>
so sieht's aus
Werte
Werte von Variablen
Anders als in den meisten Programmiersprachen definieren sich Variablen in JavaScript
durch den ihnren zugewiesenen Wert.
var zahl;
// Deklaration der Variable
zahl = 20;
// zahl wird Wert 100 zugewiesen -> zahl wird Integer-Variable
zahl = -12.34; // zahl wird Wert -12.34 zugewiesen -> zahl wird Double
zahl = „“;
// zahl wird kein Wert, aber leerer String zugewiesen zahl
// wird String
zahl = „nix“; // zahl wird der Wert „nix“ zugewiesen -> zahl bleibt String
zahl = true; // zahl wird der Wert true zugewiesen -> zahl wird Boolean
Achtung: Dadurch, dass eine Variable durch Zuweisung eines Wertes so einfach den Typ
wechseln kann, passieren häufig Fehler!
Operatoren I
Zuweisungsoperator
Mit dem Zuweisungsoperator „=“ kann einer Variablen ein Wert zugewiesen werden.
Vergleichsoperatoren
Vergleichsoperatoren werden gebraucht, wenn man zwei Werte miteinander vergleichen
will.
<script language="JavaScript" type="text/javascript">
<!-var alter=8;
if (alter > 18) {alert("SIE duerfen das hier sehen!")};
if (alter == 18) {alert("Glück gehabt! SIE dürfen das hier schon
sehn!")};
if (alter <= 17) {alert("SIE duerfen das hier NICHT sehen!")};
// -->
</script>
so sieht's aus
Operatoren II
Berechnungsoperatoren
Berechnungoperatoren werden benutzt, um numerische Berechnungen durchzuführen.
<script language="JavaScript" type="text/javascript">
<!-var tollesSpiel = 17 + 4;
var nichts = 1 – 1;
var bruch = 1 / 11;
var festmahl = 3 * 7;
var derRest = 34 % 10;
// spezielle Notation
tollesSpiel++;
// tollesSpiel = 22;
nichts += 12
// entspr. nichts = nichts + 12 -> nichts = 12
// ...
// -->
</script>
Operatoren III
Logische Operatoren
Logische Operatoren werden benötigt, um komplexere Bedingungen auszudrücken.
<script type="text/javascript">
<!-var PLZ = 70176;
if (PLZ >= 70000 && PLZ <= 70599){
alert (“Du wohnst in
Stuttgart“);}
if (PLZ < 70000 || PLZ > 80000){alert (“Wohnst Du auch wirklich in
BadenWürttemberg?“);}
// -->
</script>
Operator zur Verknüpfung von Zeichenketten.
Mit dem „+“-Operator können Zeichenketten verknüpft werden.
var ort = „draussen am Balkon“;
var ausgabe = “mein kleiner grüner Kaktus steht “
+ ort;
Anwendung - Passwortschutz
Ein einfacher Passwortschutz
<html>
<head>
<title>Einfacher Passwortschutz</title>
<script type="text/javascript">
<!-var passwort = "PaSsWorT";
var eingabe;
eingabe = prompt("Passwort eingeben:", "");
if (eingabe == passwort){
alert ("Passwort korrekt");
// document.location.href = "geheime_seite.html“;
}
if (eingabe != passwort){
alert("Passwort falsch!");
}
//-->
</script>
</head>
<body>
Passwortschutz....
</body>
</html>
Fallunterscheidung
Fallunterscheidung - if/else
Eines der wichtigsten programmiertechnischen Elemente ist die Fallunterscheidung. Die
Syntax der Fallunterscheidung sieht in JavaScript folgendermassen aus.
if (Bedingung){
// Anweisung
}
else if (Bedingung){
// Anweisung
}
else {
// Anweisung
}
Ist die Bedingung erfüllt, wird der erste Anweisungsblock ausgeführt; falls nicht, wird die
zweite Bedingung geprüft und falls diese Bedingung auch nicht erfüllt ist, werden die
Anweisungen im „else“-Zweig ausgeführt. Der „else if“ und der „else“-Teil ist optional.
Die geschweiften Klammern können weggelassen werden, wenn der Anweisungsblock
aus genau einer Anweisung besteht.
Funktionen I
Funktion von Funktionen
Mit Hilfe von Funktionen kann man eigene, in sich abgeschlossene JavaScriptProzeduren programmieren, die dann über den Aufruf der Funktion ausgeführt werden
können. Der Programmierer kann bestimmen, bei welchem Ereignis (zum Beispiel,
wenn der Anwender einen Button anklickt) die Funktion aufgerufen und ihr
Programmcode ausgeführt wird. JavaScript-Code, der nicht innerhalb einer Funktion
steht, wird beim Einlesen der Datei vom WWW-Browser sofort ausgeführt.
Eine Funktion ist ein Anweisungsblock. Eigene Funktionen können innerhalb eines
JavaScript-Bereichs oder in einer separaten JavaScript-Datei definiert werden. An
erlaubten Stellen, z.B. innerhalb der einleitenden HTML-Tags <body...> und <a
href...>, oder in einem Formular-Tag wie <input...>, kann man solche selbst definierte
Funktion dann mit Hilfe eines Event-Handlers aufrufen. Oder eine Funktion wird
innerhalb einer anderen Funktion aufgerufen.
Funktionen II
Funktion - Beispiel
<html>
<head>
<title>Eine Funktion</title>
<script type="text/javascript">
<!-function eineFunktion(){
alert ("eineFunktion wurde aufgerufen");
}
//-->
</script>
</head>
<body>
<a href = "javascript:eineFunktion()">Funktion aufrufen</a>
</body>
</html>
so sieht's aus
Funktionen III
Funktionen definieren und aufrufen
Funktionen werden entweder zentral ium HTML-Dokument oder extern in einer
JavaScript-Datei definiert. Sie werden vom reservierten Wort „function“ eingeleitet,
gefolgt vom Bezeichner der Funktion, dem ein Klammernpaar folgt, in das ggf.
Parameter notiert werden können. Die Anweisungen der Funktion stehen dann in
einem durch geschweifte Klammern eingeschlossenen Block.
function nameDerFunktion(){
// Anweisungen. z. B.
alert(„Alarm“);
}
Anhand des Funktionsbezeichners kann die Funktion nun aufgerufen werden. Man
notiert dazu den Funktionsnamen gefolgt von Klammern und einem Semikolon. Ein
Funktionsaufruf könnte also so aussehen:
nameDerFunktion();
Funktionen IV
Beispiel
<html>
<head>
<title>Einfacher Passwortschutz</title>
<script type="text/javascript">
<!-var passwort = "PaSsWorT";
var eingabe;
function frageNachPasswort(){
eingabe = prompt("Passwort eingeben:", "");
if (eingabe != passwort){
alert("Passwort falsch!");
frageNachPasswort();
}
}
//-->
</script>
</head>
<body onLoad = "frageNachPasswort()">
Passwortschutz....
</body>
</html>
Funktionen IV
Funktionen und Parameter
Oft ist es notwendig, an eine Funktion einen oder mehrere Parameter zur Verarbeitung
zu übergeben. Die Parameter werden dann in die runde Klammer nach dem
Funktionsbezeichner geschrieben.
function quadriere(zahl){
var quadrat = zahl * zahl;
}
Jeder Wert, der an die Funktion übergeben werden soll, muss in den runden Klammern
als Parameter durch Komma getrennt übergeben werden. Im Anweisungsblock der
Funktion kann dann auf diese Variablen zugegriffen werden. Ein Funktionsaufruf ist nur
dann korrekt, wenn er die richtigen Parameter übergibt.
richtig: quadriere(42);
falsch: quadriere(42, 42); quadriere(„zwei“);
Funktionen VI
Funktionen und Rückgabewerte
Funktionen können – z.B. nach der Verarbeitung von Parametern – Werte
zurückgeben. Der zurückzugebende Wert wird mit Hilfe der „return“-Anweisung an die
aufrufende Funktion zurückgegeben.
function quadriere(zahl){
var ergebnis = zahl * zahl;
return ergebnis;
}
Der Aufruf der Funktion könnte dann so aussehen:
resultat = quadriere(12);
alert(quadriere(23));
Schleifen I
Schleifen
Mit Schleifen können Programmieranweisungen so lange wiederholt werden, bis eine
oder mehrere Bedingungen erfüllt sind.
while-Schleife
while (Bedingung){
// Anweisungen
}
Bsp.:
var eingabe = "";
var zaehle = 0;
while (eingabe != "paSsWoRT" && zaehle != 3){
eingabe = prompt("Passwort eingeben");
zaehle++;
}
if (eingabe != "paSsWoRT") alert("Ver***** Dich!");
else alert("willkommen");
Schleifen II
do-while-Schleife
Die do-while Schleife wird vor der Überprüfung auf Bedingungen auf jeden Fall einmal
durchlaufen.
do{
// Anweisungen
}while (Bedingung)
for-Schleife
Bei der for-Schleife wird gleich eine Zählvariable definiert, die die Schleifendurchläufe
zählt und eine Abbruchbedingung festlegt.
for ((Initialisierung); (Bedingung); (Anweisung)){ /* Anweisungen */ }
Bsp.:
for (var i = 0; i < 10 ; i++){
alert (i);
}
Objektorientierung I
Objekte
JavaScript gehört zu den sogenannten objektorientierten Programmiersprachen. Dieses
Konzept wird hier stark vereinfacht erklärt.
In JavaScript ist (mit Ausnahme der Variablen) alles, worauf man zugreift, ein Objekt.
Ein Objekt ist der Versuch, die reale Welt in eine Programmiersprachen-umgebung
abzubilden. Ein Standardbeispiel für Objekte ist etwa ein Auto.
Ein Objekt im allgemeinen, wird durch gewisse Parameter spezifiziert. Bei diesen
unterscheidet man Methoden und Eigenschaften.
Eine Eigenschaft kann als Variable angesehen werden, also als ein Wert, der fest mit
dem Objekt verbunden ist und gelesen und geschrieben (gesetzt) werden kann. Bei
einem Auto ist das beispielsweise die aktuelle Geschwindigkeit oder die aktuelle Menge
Benzin im Tank.
Objektorientierung II
Eine Methode ist eine Funktion, die fest mit dem Objekt verbunden ist. Im Gegensatz
zur Eigenschaft wird hier aber nicht immer ein Wert zurückgegeben. Im Auto-Beispiel
wäre eine mögliche Methode die Methode vollbremsung(), die die (Eigenschaft)
Geschwindigkeit auf 0 setzt.
Methoden werden immer durch nachgestellte Klammern gekennzeichnet; dies soll
verdeutlichen, dass es sich hier nicht um eine Eigenschaft, sondern um einen „echten“
Funktionsaufruf handelt.
Eine Eigenschaft oder Methode wird angesprochen, indem man den Namen des
entsprechenden Objekts nimmt und den Namen der Methode oder Eigenschaft mit
einem Punkt anhängt. Methoden werden dabei immer mit Klammern geschrieben;
sollten keine Parameter übergeben werden, so werden leere Klammern verwendet. Bei
Eigenschaften werden keine Parameter übergeben. Z.B. ist document.write() eine
Methode des document-Objekts.
Objektorientierung III
Eigenschaften ändern – Beispiel
<html>
<head>
<title>Eigenschaft verädern</title>
<script type="text/javascript">
<!-function changeColor(){
document.bgColor = "#000033";
}
//-->
</script>
</head>
<body>
<p>
<a href = "javascript:changeColor()">Farbe
ändern</a>
</p>
</body>
</html>
so sieht's aus
Objektorientierung IV
Methode aufrufen – Beispiel
<html>
<head>
<title>Kleiner</title>
<script type="text/javascript">
<!-function small() {
window.resizeBy(-10,-10);
}
//-->
</script>
</head>
<body>
<a href="javascript:small()">Verkleinern</a>
</body>
</html>
so sieht's aus
Objektorientierung V
Eigene Objekte definieren
function MeinObjekt (parameter) {
var privat = "privat"; // private Eigenschaft
this.oeffentlich = "öffentlich"; // öffentliche Eigenschaft
/* private Methode */
var private_methode = function () {
window.alert('privat');
};
/* privilegierte öffentliche Methode */
this.oeffentliche_methode = function () {
window.alert('öffentlich');
};
}
var objekt = new MeinObjekt();
objekt.oeffentliche_methode();
DHTML
Was ist DHTML?
DHTML ist die Abkürzung für Dynamic Hypertext Markup Language. DHTML ist kein
neuer Sprachstandard, sondern eine Kombination von JavaScript und HTML, die eine
dynamische Änderung bzw. den dynamischen Aufbau eines HTML-Dokuments
ermöglichen.
Beispielchen:
<html>
<head>
<title>DHTML</title>
</head>
<body>
<p id = "DHTML" onClick = "getElementById('DHTML').
firstChild.nodeValue = 'Ooooohhhh. Danke'">Bitte, bitte
click mich! Los click schon!</p>
</body>
</html>
so sieht's aus
Kompatibilität
DHTML - Kompatibilität
Zwar funktioniert DHTML mit Netscape und dem Internet Explorer ab der Version 4,
doch wurde DHTML Hauptschauplatz des Browserkriegs, so dass vollkommene andere
Wege der Implementierung gegangen wurden. Vieles muss für die verschiedenen
Browser getrennt kodiert werden, sofern man für alle Browser schreiben will. Vieles
funktioniert überhaupt nur mit dem einen oder mit dem anderen Browser.
Inzwischen zeichnet sich ein einheitlicher Standard ab, den das W3C durch den
Entwurf des Document Object Model (DOM) eingeführt hat. Im Folgenden soll es
lediglich um diesen Standard und nicht um die älteren Techniken von Microsoft und
Netscape gehen. Wer allerdings Seiten programmieren will, die auf allen Browsern
funktionieren sollen/müssen, kommt um die Kenntnisse in diesem Bereich nicht
herum.
W3C-DOM I
W3C-DOM
Das DOM des W3C ist eine allgemeine Richtlinie für Objektmodelle und legt fest, wie
mittels JavaScript darauf zugegriffen werden soll. Das W3C-DOM bildet aus den
Elementen des HTML-Dokuments eine Baumstruktur. So werden Kindelemente als
Verzweigungen von Elternelementen dargestellt.
Der Zugriff auf die Elemente erfolgt über folgende Anweisungen:
document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
W3C-DOM II
Knoten
Alle Elemente, Attribute und Texte eines HTML-Dokuments werden im W3C-DOM als
Knoten bezeichnet. Es gibt drei verschiedene Knotentypen: Elementknoten,
Attributknoten und Textknoten.
Bsp.: <div id = „division“>Ein Abschnitt</div>
Diese Zeile besteht aus vier Knoten:
Elementknoten: „div“
Attributknoten: „id“
Textknoten des „id“-Attributs: „division“
Textknoten des „div“-Elements: Ein Abschnitt
Browserproblematik
Welches DOM wird unterstützt?
Da die verschiedenen Browser DHTML verschieden unterstützen muss zunächst
abgefragt werden, welches DOM der jeweilige Browser unterstützt.
Das geschieht einfach, indem abgefragt wird, ob bestimmte Ojekte vorhanden sind.
Existiert „document.layers“, handelt es sich um einen Netscape 4 Browser, existiert
„document.all“, ist der Browser ein Internet Explorer, existiert das Objekt
„document.documentElement“, ist der Browser W3C-DOM-Kompatibel.
n4 = document.layers;
ie = document.all;
w3c = document.documentElement;
if (n4) document.write(„NS“);
if (ie) document.write („IE“);
if (w3c) document.write („w3c“);
DHTML – Beispiel I
Ausklappbare Navigationsleiste.
<html>
<head>
<title>Klappnavi</title>
<script type="text/javascript"><!-var n4, ie, w3c;
function init() {
n4 = document.layers;
ie = document.all;
w3c = document.documentElement;
}
function showNav(){
if(ie){
document.all.naviBar.style.visibility = 'visible';
}
else if(w3c){
document.getElementById('naviBar').style.visibility =
'visible';
}
else{
alert('Diese Seite ist mit Ihrem Browser nicht kompatibel');
}
}
DHTML – Beispiel II
function hideNav() {
if(ie) {
document.all.naviBar.style.visibility = 'hidden';
}
else if(w3c) {
document.getElementById('naviBar').style.visibility = 'hidden';
}
else {
alert('Diese Seite ist mit Ihrem Browser nicht kompatibel');
}
} //-->
</script>
<style type="text/css">
<!-body
{ margin-left:40px; }
#leftBorder { background-color:#2277BB;width:25px; height:100%;
position:absolute; left:0px; top:0px; }
#naviBar
{ background-color:#2277BB; width:150px;
height:250px;
position:absolute; left:0px; padding:5px;
visibility:hidden; }
a
{ color:#FFFFFF; } //-->
</style>
</head>
DHTML – Beispiel III
<body onLoad="init()">
<div id="leftBorder" onMouseOver="showNav()" onMouseOut="hideNav()">
</div>
<div id="naviBar" onMouseOver="showNav()" onMouseOut="hideNav()">
<a href="http://www.milka.de/">Milka</a><br>
<a href="http://www.snickers.de/">Snickers</a><br>
<a href="http://www.kinder-schokolade.de/">KinderSchokolade</a><br>
</div>
<h1>Klappnavi</h1>
<p>Wer über die linke Leiste fährt, kann dick werden!</p>
</body>
</html>
so sieht's aus
Event-Handler I
Was sind Event-Handler?
Event-Handler sind ein wichtiges Bindeglied zwischen HTML und JavaScript. EventHandler werden meist in Form von Attributen in HTML-Tags notiert. Da es sich um
Bestandteile handelt, die innerhalb von HTML vorkommen, hat das W3C die EventHandler inzwischen in den HTML-Sprachstandard aufgenommen.
Event-Handler beginnen mit „on“. Z.B. „onClick=“. Hinter dem „=“ wird der Aufruf der
Funktion notiert, die aufgerufen soll, wenn das entsprechende Ereignis eintritt.
Jeder Event-Hanlder steht für ein bestimmtes Anwenderereignis. Z.B. für einen Click,
eine Mausbewegung, ....
Beispiel:
<div onClick=“alert('Fischers Fritz fischt frische Fische')“>Fisch?</div>
Event-Handler II
Event-Handler-Liste
onBlur: Wenn ein Fenster oder Formularfeld den Fokus verliert (nicht mehr im
Vordergrund ist bzw. den Cursor enthält)
onChange: Wenn der Wert eines Formularfelds geändert wird
onClick: Beim Klicken auf einen Link oder auf ein Formularelement
onFocus: Wenn ein Fenster oder Formularfeld den Fokus erhält (Mausklick)
onLoad: Beim Laden eines Dokuments
onMouseover: Wenn mit der Maus über einen Link gefahren wird
onMouseout: Wenn der Link mit der Maus wieder verlassen wird (nach
onMouseover)
onUnload: Beim Verlassen eines Dokuments
Browserunterschiede / Debugging
In den letzten Jahren hat die Vereinheitlichung der JavascriptFunktionalitäten und Funktionsweisen, einen sehr großen Schritt nach vorne
gemacht.
Jedoch gibt es es zwischen den Browsern immer noch funktionale Unterschiede.
Vor allem in alten Versionen des Internet Explorers.
Aus diesem Grund sind Frameworks (Dojo, JQuery, Prototype, Mojo, ...) entstanden,
die diese Unterschiede erkennen und „ausbügeln“.
Darüber hinaus, sind die Javascript-Interpreter unterschiedlich schnell. Besonders
schnell sind Safari und Chrome, während der Internet Explorer besonders langsam ist.
Dies merkt man besonders bei aufwändigen Anwendungen.
Das Finden von Fehlern stellt im Bereich Javascript noch immer eine Herausforderung
da. Durch Browserplugins (Firebug, Venkman, …) sind aber auch hier grosse
Fortschritte erziehlt worden.
AJAX
AJAX-Request unterschiedlich je Browser, daher ist die Benutzung eines
Frameworks zu empfehlen.
Neben XML kann auch Text oder JSON zurück gegeben werden.
Kann auch verwendet werden, ob „nur“ Daten (z.B. ein Formular) zu versenden.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js">
</script>
<script type="text/javascript">
function doAjaxMagic() {
dojo.xhrGet( {
url: "ajax.xml",
handleAs: "xml",
load: function(data) {
alert(data);
});
}
</script>
JSON
= JavaScript Object Notation
Hierbei handelt es sich um eine Kurzschreibweise für Javascript.
In JSON werden die gleichen Daten meist kompakter kodiert als in einer XMLDarstellung, so dass der Nutzdatenanteil höher ist.
Der JSON-Code erscheint dadurch häufig auch besser lesbar.
Die große Stärke von JSON ist die Tatsache, dass es sich bei der Definition
selbst um valides JavaScript handelt. Damit lässt sich eine JSON-Definition in
JavaScript direkt mit der eval()-Funktion in ein JavaScript-Objekt umsetzen.
Es gibt für viel Sprachen Konverter, z.B. für PHP.
{ "Kreditkarte"
"Nummer"
"Inhaber"
"Name"
"Mann"
"Vorlieben"
},
"Deckung"
"Währung"
}
: "Xema",
: "1234-5678-9012-3456",
: {
: "Reich",
: "true",
: [ "Reiten", "Schwimmen", "Lesen" ],
: 2e+6,
: "EURO"

Download Report