JavaScript

Aus m-wiki
Zur Navigation springen Zur Suche springen

Einführung

Vieles aus folgendem Buch übernommen:

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

Auf Grund der Trennung von Javascript zur Verhaltenssteuerung der Webseite und der Darstellung durch HTML sollte man die häufig eingesetzten direkten Aufrufe im HTML mit <button onclick()> vermeiden und dies über einen Eventhandler direkt im eingebunden Skript erledigen.

Programmcode mit HTML

Auch wenn JS theoretisch nicht auf HTML begrenzt ist, wird es doch meistens dort verwendet und daher wird auch hier darauf eingegangen.

HTML mit JS

Dieses Beispiel zeigt ein schlechtes Beispiel, bei welchem JS und HTML bunt gemischt sind. Auf selfhtml wird aufgezeigt, wieso man dies sauber trennen soll. 


 <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>

HTML mit ausgelagertem JS

Möchte man das Script in eine Datei auslagern, so muss nur das script Tag erweitert werden:
<script type = "text/javascript" src="datei.js"> Ab HTML5 ist auch die Angabe von type nicht mehr notwendig. language hingegen ist "deprecated" und soll daher nicht mehr eingesetzt werden.

HTML: 


 <html>
  <head>
   <title>Testpage</title>
  </head>
  <body>
     <a href = "http://www.java.com">
      <img id = "test" src = "bild.gif">
     </a>
     <script src="datei.js">
  </body>
 </html>

JavaScript: 


 function status(state) {
 if (state) { window.status = 'Javaseite'; }
 else { window.status = ' '; }
}
 var test = document.getElementById('test');
 test.addEventListener ('hover', status, true);
 test.addEventListener ('loose', status, false);

Laden von Javascript in HTML

Damit JS sauber verwendet werden kann, muss zum Zeitpunkt des Ausführens das oder die Elemente, auf die JS zugreifen soll, im Browser geladen sein. Man kann daher nicht einfach das Skript im Header einbinden und auf Elemente zugreifen, welche erst später geparst werden, ohne entsprechend Massnahmen zu treffen. Aus diesem Grund werden folgende Vorgehensweisen empfohlen:

Einbindung Vorteile Nachteile Beispiel
Erst ganz am Ende des Dokuments Der Dokumentbaum steht mit allen Elementen direkt zur Verfügung. Ist es ein grosses Skript, so sieht der Anwender zwar die Seite, doch er kann sie nicht verwenden, da im Hintergrud noch das JS geladen und analysiert werden muss, bevor es verwendet werden kann. </body><script src="datei.js"></html>
Im <head>-Teil Der Browser kann die Datei aufbereiten und einbinden und nachher mit dem parsen weiter fahren und muss dies nicht am Schluss noch erledigen. Man muss die Eventhandler explizit mit dem "Ladevorgang beendet"-Ereignis verknüpfen, damit das Skript sauber eingebunden werden kann. HTML: <head><script src="datei.js"></head>
JS: document.body.addEventListener("load",test);
Im <head>-Teil mit dem Argment dever Der Browser kann im Hintergrund die Datei aufbereiten und einbinden, bis er die Seite fertig aufgebaut hat. Ein entsprechend aufbereitetes Skript wird nach dem Parsen des DOM, und vor dem Auslösen des DOMContentLoaded Events ausgeführt. Mehrere defer-Scripte werden in der Reihenfolge ausgeführt, in der sie im HTML angetroffen werden. Man muss die Eventhandler explizit mit dem "Ladevorgang beendet"-Ereignis verknüpfen, damit das Skript sauber eingebunden werden kann. <head><script src="datei.js" dever></head>
Im <head>-Teil mit dem Argment async Der Browser kann im Hintergrund die Datei aufbereiten und einbinden, bis er die Seite fertig aufgebaut hat. Man kann nicht wissen, wann genau der Browser das Skript lädt, analysiert und es zur Verfügung stellt. Um Elemente sauber zu initialisieren muss daher nach dem Beispiel von selfhtml vorgegangen werden, welches die möglichen Zustände beim Ausführen berücksichtigt. <head><script src="datei.js" async></head>

Möchte man nachlesen, wie der Browser vorgeht, so zeigt es der entsprechende Artikel im selfhtml.

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

Für die Zukunft reservierte Wörte

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. Der gesamte Baum kann im selfhtml mit allen Methoden nachgeschaut werden. 


 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

Zugriff auf Knoten

Sämtliche Knoten können über das Nodes-Objekt erreicht werden.

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. Wenn man unterschiedliche Bildschirme ansprechen möchte, so wird dies über @media im CSS-Teil der Webseite geregelt. Unter selfhtml wird gezeigt, wie HTML, CSS und JS ineinandergreifen.

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 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

Will man die Bildschirmbreite an php übergeben, damit etwa die Vorschaubilder abhängig der Bildschirmbreite ausgegeben werden, so ist dies möglich: 


  echo("<script language='javascript'>\n");
  echo("location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"."&width=\" + screen.width + \"&height=\" + screen.height;\n");
  echo ("</script>\n");
  exit();

Anschliessend stehen die Werte als GET-Parameter zur Auswertung in PHP zur Verfügung.

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: 

 <code>
  <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

Abgerufen von „https://dict.ch/mediawiki/index.php?title=JavaScript&oldid=4730“