JavaScript

Vieles aus folgendem Buch übernommen:\

Titel: Das Einsteigerseminar JavaScript\
Author: Michael Seeboerger-Weichselbaum\
Verlag: bhv\
ISBN: 3-8266-7200-3\
Webseite zum Buch: http://www.seebi.de/\

\ == Programmcode Beispiel ==\ \

 <html>\
   <head>\
     <title>Testpage</title>\
     <script type = "text/javascript">\
       //Javascript Code mit Definitionen\
         function () {\
         } // end function ()\
     </script>\
   </head>\
   !**  Ab hier kann man den Code verwenden **\
   <body onload = "function ()">\
       !**  Die folgenden Funktionen sind inline JS-Eventhandler **\
       <a href = "http://www.java.com" \
          onMouseOver = "window.status = 'Javaseite'; return true" \
          onMouseOut = "window.status = ' '; return = true">\
          <img src = "bild.gif">\
       </a>\
   </body>\
 </html>\

\ \ Möchte man das Script in eine Datei auslagern, so muss nur das script Tag erweitert werden:
\ \ <script type = "text/javascript" src="datei.js">\\ \ == Sprachelemete ==\ === Kommentare ===\

// -> Einzeilig\
/* */ -> Mehrzeilig\

\ === Schlüsselwörter ===\ \ Bedingungen:\

if (Vergleich) {} // Abfrage\
else {} // Wenn nicht if, dann...\
switch (x) case 1: // Verzweigt an Hand der Bedingungsvariable.
\ break; // Abbruch, wenn Bedingung erfüllt. Sonst geht die Prüfung weiter. So kann man auch auf Bereiche prüfen
\ default: // Wenn keine erfüllt, kann auch default eingebaut werden.\

\ Schleifen:\

while (Bedingung) {} // Solange die Bedingung stimmt, wird ausgeführt\
for (Start;Ende;Schritt) // Solange die Endbedingung nicht erreicht ist, wird die Zählvariable um die Schrittweite angepasst\
break; // Schleife verlassen\
continue; // Schleife mit dem nächsten Durchgang fortsetzen\

\ Definitionen:\

function () // Funktion definieren\
var x = ... // Variable definieren\

\ sonstige reservierte Wörter:\

do // do-while Schleife\
false und true\
in // in for Schleife verwendet\
new // neues Objekt\
return // Rückgabewert\
this // aktuelles Objekt\

\ noch nicht verwendete, doch reservierte Wörter (Evtl. in neueren Versionen schon verwendet):\

abstract, boolean, byte, Catch, char, class, const, Default, delete, debugger, enum, Double\
export, extends, final, Finally, float, goto, implements, Import, instanceof, int, interface, Label\
long, native, null, Package, private, protected, public, Short, static, super, synchronized, Throw\
throws, transient, try, Typeof, void, with\

\ === Vergleichsoperatoren ===\ AND und OR sind nicht erlaubt.\

< <= und > => Für grösser und kleiner Vergleiche\
== != gleich und ungleich\
&& || UND und ODER\

\ === Eventhandler ===\ Eventhandler werden in html-tags integriert und reagieren auf Ereignisse. Die Schreibweise ist egal.\

onBlur // Element (z.B. Eingabefeld) verliert den Focus\
onClick // Beim Klicken mit der linken Maustaste\
onFocus // Element bekommt den Focus\
onLoad // Beim Laden des Elementes\
onMouseOut // Beim verlassen des Bereiches durch die Maus\
onMouseOver // Wenn sich die Maus im "TAG"-Bereich befindet\

\ Gesamthaft gibt es zur Zeit fast 30 Eventhandler (JS 1.5).\ \ == Objektbaum ==\ Folgende Objekte stehen zur Verfügung:\ \

 window    -> document -> Image               // Bilder bearbeiten\
                       -> Form   -> elements  // Formular "manipulieren"\
                       -> Link                // \
                       -> Anchor\
           -> Location                        // aktuelle Webadresse\
           -> History                         // besuchte Seiten\

 navigator -> Plugin                          // Browser und verwendete Plugins\

 screen                                       // Bildschirmauflösung\

 Math                                         // Mathematische Funktionen\

 Date                                         // Datum und Uhrzeit\

 String                                       // Strings manipulieren\

\ \ == window ==\ Stellt das Browserfenster dar. Wichtigstes Unterelement ist document, welches die Webseite enthält.\ \ Methoden:\

win = window.open("", "Titel", width = "x", height = "y", resizable = "yes"); // Webseite öffnen. Ohne resiz. hat das Fenster eine fixe Grösse.\
window.alert("Alarmmeldung"); // Meldungen mit Ok.\
var = window.confirm("Bestätigung"); // Ok und Abbruch. var ist TRUE bei Ok.\
var = window.prompt("Frage"); // Ok und Abbruch. var enthält den Text der Abfragebox.\
window.close() // Schliesst das Fenster\
win.setTimeout("window.close", 5000); // Timeout von 5000 Milisekunden abwarten, dann die Funktion (Fenster schliessen) ausführen.\

\ Eigenschaften:\

window.status("Ausgabe"); // Statusleiste\

\ === document ===\ Will man ein DOM-Element manipulieren, so geschieht dies über dieses Unterobjekt. Die direkte Ausgabe auf die Seite ist eher selten. \ Meist wird dann das gewünschte Element über seine ID angesprochen oder man benennt das Objekt wie etwa ein Formular (<form>) oder einen Abschnitt (<p>) direkt.\ \ Methoden:\

window.document.bgColor = "#007F7F"; // Hintergrundfarbe setzen\
window.document.fgColor = "#FFFF00"; // Vordergrundfarbe setzen\
window.document.open("text/html"); // Das Fenster als html definieren\
window.document.write("<h1>Dies ist ein Test</h1>"); // Text an das aufgerufene Objekt übergeben\

\ ==== form (Formular auswerten) ====\ Das Formular ist "eine Hülle", welche die relevanten Elemente umfasst. Man kann es entweder direkt über den DOM mit seiner Position, mit der erstellten ID oder über den vergebenen Name ansprechen. Es ist zu beachten, dass hierbei weder der Name noch die ID doppelt vorkommen darf.\ \ \

 function check() {\
   var laenge, eingabe;\
   eingabe = window.document.Formular.Feld1.value;\
   laenge = eingabe.length;\
   // Test des Inhalts und was auch immer\
 } // end function check\

 <form name = "Formular">\
   <input name = "Feld1">\
   <input type = "Button" value = "Absenden" onclick = "return check()">\
 </form>\

\ \ Der return hier ist wichtig. Liefert die Funktion TRUE zurück (Standard), so wird das Formular abgeschickt. Liefert sie FALSE, so muss nochmals geprüft werden. Im Fehlerfall muss die Prüffunktion daher FALSE zurückliefern.\ \ Da die Elemente in der Reihenfolge ihres Auftretens angesprochen werden, hätte man dieses Formular auch über\

 window.document.forms[0]\

ansprechen können.\ \ Wichtige Methoden:\

..formularname.submit() // Sendet das Formular ab\
..formularname.reset() // Setzt das Formular zurück\

\ Wichtige Eigenschaften:\

..formularname.action // Enthält den Inhalt von action im Form-Tag\
..formularname.length // Enthält die Anzahl Elemente des Formulars\

\ ==== select (Auswahlliste in Formular auswerten) ====\ Die Auswahlliste ist eigentlich nur ein Teil eines Forms. Da sie aber häufig auftritt und die saubere Verarbeitung nicht einfach ist, folgt hier ein Beispiel mit Auswertung einer Liste, welche dann die entsprechende Datei zum download zur Verfügung stellt.\ \ \

 function auswahl() {\
   var index = window.document.Formular.SelectFeld.selectedIndex; // Holt den Index des select\
   var datei = window.document.Formular.SelectFeld.options[index].value; // Holt den Namen aus dem Index heraus\
   location.href=datei; // Die Datei zum download anbieten -> Bei html oder text würde auf die neue Seite gewechselt\
 } // end function auswahl\

 <form name = "Formular">\
   <select name = "SelectFeld">\
     <option selected = "selected" value = 'file1.zip'>File 1</option>\
     <option value = 'file2.zip'>File 2</option>\
   </select>\
   <input type = "Button" value = "Download" onClick = "auswahl()">\
 </form>\

\ \ ==== elements (Formular auswerten) ====\ Wie unter Form erklärt, kann man die Elemente mit ihrem Namen oder ihrer ID ansprechen. Verwendet man den DOM, so spricht man die Elemente über ihre Arrynummer an\

 window.document.forms[0].elements[0]\

Die einzelnen Elemente kann man über die Eigenschaft length von Form durchzählen. Auch hier darf bei Verwendung des Namens oder der ID kein Feld doppelt vergeben sein.\ \ Wichtige Methoden:\

..formularname.elementname.focus() // Setzt den Fokus auf das betreffende Feld\
..formularname.elementname.select() // Markiert das betreffende Feld\

\ Wichtige Eigenschaften:\

..formularname.elementname.value // Liest den Inhalt des Feldes aus. Dieser kann darüber auch gesetzt werden.\
..formularname.elementname.type // Enthält den Typ des entsprechenden Feldes (Input, Submit, usw.)\

\ ==== images (Bilder) ====\ Die Bilder werden entweder über ihren Namen oder über den Index in der Reihenfolge angesprochen:\ window.document.images[0].src = "bild1.jpeg"; // src ist die source.\ \ Wichtige Eigenschaften:\

..images[0].border // Nur lesbar. Prüft, ob die Grafik einen Rand hat\
..images[0].heigth // Nur lesbar. Höhe der Grafik\
..images[0].width // Nur lesbar. Breite der Grafik\

\ \ === Location ===\ Ort der Webseite. Kann etwa für Umleitungen verwendet werden. Auch Dateidownloads sind möglich.\ \ Eigenschaften:\

location.href = "neu.html" // Neue Seite im Browser öffnen\
location.href = "neu.zip" // Datei wird zum Download angeboten\

\ \ === History ===\ Webseitenverlauf.\ \ Methoden:\

history.back() // Eine Seite zurück\
history.forward() // Eine Seite vor\
history.go(Nummer) // Geht zur gewünschten Position. -1 = 1 Seite zurück und 1 = 1 Seite vor. Man kann auch einen Teil der gewünschten URL übergeben und der Browser versucht dann, zu dieser Seite zu gehen.\

\ == navigator und screen ==\ Möglichst nicht verwenden, da Browserweichen out sind und Bildschirmauflösungen für eine fliessende Darstellung unrelevant sind. Daher die Eigenschaften mehr aus historischen Gründen.\ \ navigator:\

var = navigator.appName; // Browsername wie IE5, Opera10 usw. Kann über den UserAgent-Switcher angepasst werden\
var = navigator.appCodeName; // Codenamen des Browsers\
var = navigator.appVersion; // Browserversion\
var = navigator.language; // Sprache des Browsers\
var = navigator.platform; // Betriebssystem\
var = navigator.userAgent; // Zeile, welche der eingestellte UserAgent liefert.\

\ Das Unterobjekt plugins könnte zum prüfen auf ein gewünschtes Plugin wie etwa Flash usw. verwendet werden, doch dies will man ja nicht fördern.\ \ screen:\

var = screen.height // Bildschirmhöhe\
var = screen.width // Bildschirmbreite\
var = screen.pixelDepth // Pixeltiefe in Bit (8, 16, 24, 32)\
var = screen.colorDepth // Farbtiefe -> Wenn gleich wie Pixeltiefe, dann falsch (2 hoch Pixeltiefe) -> Math.pow(2, screen.PixelDepth)\
var = screen.availHeight // verfügbare Bildschirmhöhe\
var = screen.availWidth // verfügbare Bildschirmbreite\

\ == Math, Date und String ==\ Wichtige Methoden und Eigenschaften der Objekte.\ \ Math:\

y = Math.E // Eulersche Zahl = 2.718...\
y = Math.floor(Zahl) // Rundung auf nächsttiefere Zahl\
y = Math.PI; // Wert von pi = 3.14...\
y = Math.pow(Zahl, Potenz) // Potenzierung der gewünschten Zahl -> 2, 32 -> 2hoch32 sind etwa 16Millionen\
y = Math.round(Zahl) // Rundung auf nächsthöhere Zahl (oder mathematisch?)\
y = Math.sin(Winkel); // Sinus des Winkels. Entsprechend cos, tan\
y = Math.sqrt(Zahl); // Quadratwurzel\

\ String (1. Buchstabe beginnt an Position 0.):\

y = x.charAT(Stelle); // Liefert das Zeichen, welches an der gesuchten Stelle steht. Meist für Vergleiche (if (x.charAT(0) == 3))... -> Siehe Standardfunktionen\
y = eval(String1 Rechenoperation String2) // Es wird mathematisch gerechnet, ohne dass die Strings vorher umgewandelt hätten werden müssen. Vorsicht bei Divisionen, damit es kein Div by Zero gibt.\
y = x.indexOF("Vergleichsstring") // Wird der Vergleichsstring im String gefunden, ist die Antwort grösser als -1\
y = x.parseFloat(String); // Versucht, den String in eine Gleitkommazahl umzuwandeln.\
y = x.parseInt(String); // Versucht, den String in eine ganze Zahl umzuwandeln.\
y = x.slice(Start); // Schneidet von Start bis zum Ende heraus.\
y = x.String(Objekt); // Wandelt das Objekt in einen String. Funktioniert es nicht, gibt es einen leeren String.\
y = x.substr(Anfang, Länge); // Ab Anfang ausschneiden, bis Länge erreicht.\
y = x.substring(Anfang, Ende); // Es werden die Buchstaben der Position Anfang bis Ende ausgeschnitten. \
y = x.toUpperCase(String); // Alles in Grossbuchstaben. In Kleinbuchstaben vice versa.\

\ Date:\ Zuerst muss ein Objekt erstellt werden, welches dann die konkreten Daten enthält:\ var Datum = Date();\

jahr = Datum.getFullYear();\
monat = Datum.getMonth() + 1;\
tag = Datum.getDate();\

Die Zeit wird über getHours(), getMinutes() und getSeconds ermittelt.\ Möchte man von UTC ausgehen, so erhalten die Funktionen einfach noch ein UTC vorne: getUTCFullYear()\ \ == Funktionen ==\ Werden direkt über die Eventhandler aufgerufen:\ \ \

 <head>\
   <script language = "javascript">\
     function test() {\
       // Hier kommt nun die Funktion\
     } // end function test\
   </script>\
 </head>\

 <body onload = "test()">\
 </body>\

\ \ Wichtig ist, dass Funktionen mit Buchstaben beginnen müssen und sonst nur noch Zahlen und den Unterstrich enthalten dürfen. Es sind keine Sonderzeichen oder reservierten Wörter erlaubt.\ Gross- und Kleinschreibung wird beachtet.\ \ === Parameterübergabe ===\ Die Parameter werden einfach in der Klammer mitgegeben und in der Funktion direkt ausgewertet ohne Variablendefinition.\ \ \ function test(parameter) {...} // end function test()\ \ test(parameter);\\ \ === Standardfunktionen ===\

zahl = parsFloat(Text); // Versucht, den Text in eine Float Zahl umzuwandeln. Enthält sie Text, ergibt es 0.\
charAt(Zeichen); // Wandelt die Variable Z in einen Char um.\
if (erlaubteZeichen.indexOf(TestZeichen) == -1); // Wenn die Variable nicht im String erlaubteZeichen auftaucht, wird -1 zurückgeliefert. Der String kann alle möglichen Zeichen enthalten auf die man prüfen will.\
x.setTimeout('function()', 1000) // Das Objekt x ruft nach 1000 Milisekunden die gewünschte Funktion auf. x kann zum Beispiel window sein. Wenn man nun <body onLoad="window.setTimeout('umleiten()', 5000)"> einsetzt, wird die Funktion nach 5 Sek. aufgerufen.\

\ === Nützliche Funktionen ===\ ==== Eingabe auf erlaubte Zeichen prüfen ====\ \ function check_Eingabe () {\

var zeichen = "0123456789", zähler, eingabe, länge; // Erlaubte Zeichen definieren und Hilfsvariablen zur Auswertung. \
                                                    // Der Funktion könnte das Feld natürlich auch direkt übergeben werden.\
Eingabe = window.document.forms[0].elements[0].value; // Element, welches ausgewertet wird\
länge = Eingabe.length;\
for (zähler = 0; zähler=länge; zähler++) {\
 if (zeichen.indexOf(Eingabe.charAt(zähler))==-1) { // Vergleichen, ob das Zeichen an der Stringstelle von Eingabe nicht \
                                                    // im String zeichen vorkommt\
  alert ("Nur Ziffern sind erlaubt");\
  window.document.forms[0].elements[0].value=""; // Wert zurücksetzen -> Kann man auch unterlassen\
  window.document.forms[0].elements[0].focus(); // Focus aufs Feld mit dem Fehler\
  return false; // Wenn man den Test beim absenden macht, verhindert das false das absenden. True ist Standard, wenn alles i.O.\
 } // end if\
} // end for\

} // end function eingabe()\\ \ == Wichtige allgemeine Eigenschaften ==\ Folgende Eigenschaften werden von mehreren Objekten zur Verfügung gestellt und verwendet:\ \ === length ===\ Enthält die Länge einer Variable oder die Anzahl Elemente eines Arrays.\ a = window.document.length; // Anzahl Zeichen einer Webseite\ \ === value ===\ Wert, welcher in ein Objekt geschrieben wird.\ document.Formularname.Feldname.value = String;\ \ == Fehlerbehandlung (try-catch-finally) ==\

\
try {\
  // Anweisungsblock, welcher Fehler machen könnte\
}\
catch(error) {\
  // Ausführung, wenn der Fehler auftrat\
}\
finally {\
  // Immer ausführen, egal ob Fehler oder nicht\
} \

\

Die Anweisung im try kann beliebig sein (Stream öffnen, testen der Benutzereingabe usw.). Tritt ein Fehler auf, welcher einen Programmfehler mit Abbruch generieren würde, so wird er an den catch-Block weiter geleitet. Dort kann man dann eine Ausgabe machen, was schief lief. Über finally kann man dann wieder bei Bedarf einen neuen Versuch anbieten oder über eine Variable entsprechend handeln.\ \ == Webseiten mit freien Javascripts ==\

Javapool\
Bodo

JavaScript

Navigationsmenü

Suche