Volksbildungswerk Klarenthal e.V.

Kurs 87/Frühjahr 2002:
Workshop: Wir entwickeln den Internet-Auftritt klarenthal.org weiter!
- Webseitenerstellung II -

Zusammenfassung Doppelstunde 3 (11.3.2002)

[zurück] Vorherige Doppelstunde  Index Nächste Doppelstunde [weiter]


  1. Java Script - Event-Handler, Basics
    JavaScript (JS) ist eine objektoriente Scriptsprache, die von Netscape entwickelt wurde, um anspruchsvollere Aufgaben (kleine Programme) direkt im Browser auf dem PC des Webseiten-Besuchers auszuführen. JS wird nicht kompiliert, sondern direkt im Browser interpretiert. JS ist somit Teil einer .html-Datei, entweder direkt im Quelltext einer Seite oder als externe Datei.
    Wie üblich, ist die Umsetzung dieser Scriptsprache in Microsoft- und nicht-Netscape-Browsern nicht identisch. Auch hier gilt: mit unterschiedlichen Browsern vor dem Einsatz auf Ihrer Website testen!
    Bitte berücksichtigen Sie auch, daß JS aus Sicherheitsgründen in den Browsern abgestellt werden kann - weisen Sie also daraufhin, wenn für Ihre Webseiten JS benötigt wird!
    Sie können JS z.B. verwenden für
    • Animationen
    • Frameoperationen
    • Eingabeprüfung bei Formularen
    • benutzergesteuertes (dynamisches ?) Seitenlayout
    • Texte neu aufbauen
    • Taschenrechner, Kalender, Spiele

    Sie brauchen das Rad nicht neu zu erfinden. Zahlreiche fertige Scripte finden Sie unter http://www.javascriptsource.com (in Englisch).
    Ein gutes deutschsprachiges Tutorial findet sich unter http://www.selfhtml.de/js-tut/

    Ein JS Bestandteil in einer HTML-Datei aber auch in einer externen Datei (Endung: .js) wird mit dem Tag
    <SCRIPT language="JavaScript" type="text/javascript">
    eingeleitet. Das eigentliche Script wird in Kommentarzeilen <!-- bzw. //--> eingeschlossen. Eine externe Datei wird mit dem Zusatz src="datei.js" eingeleitet.

    JS kann zusammen mit den EventHandlern sinnvoll in vielen Tags eingesetzt werden. Typische EventHandler sind
    • onMouseOver, onMouseOut
    • onLoad
    • onClick
    • onReset
    • onSubmit

    Die Basis zum Verständnis von JS ist das Eingehen auf die Objektorientierte Grundlage. Dabei unterscheidet man
    • Objekte wie Fenster, das Dokument selbst, ein Formular, die Browser-History oder das Datum
      (window, document, form, navigator, location, date, history, ...)
    • Eigenschaften (Properties) wie Status oder Name der Applikation (appName)
    • Methoden/Funktionen wie focus(), javaEnabled(), back(), getDate(), getHours(), ...
      Mit diesen werden Objekte verändert oder abgefragt.
    Hierbei wird streng hierarchisch vorangegangen, vom allgemeinen Objekt zur speziellen Eigenschaft oder Methode. Die unterschiedlichen Bestandteile werden durch einen Punkt (.) getrennt, z.B. document.formular.feld.value.length stellt die Länge des Wertes eines Feldes in einem Formular im aktuellen Dokument zur Verfügung.

    Einfache Beispiele:

    Laden onLoad

    <body onload= "window.status='Dieser Text erscheint in der Status-Zeile des Browsers auf der Seite ' + window.location + '.';return true">
    Beim Laden der Seite wird die Status-Zeile geändert.

    Events

    Im Folgenden werden onClick, onMouseOver und onMouseOut benutzt. Achten Sie auf die Status-Zeile!

       (ersetzt die BACK Taste Ihres Browsers!) linker Pfeil rechter Pfeil

    <center><br>
    <form><input type="button" value="zurück" onclick="history.back()"></form>
    <a href="" onclick="return false;" onmouseover="window.status='Das ist ein linker Pfeil';return true"
        onmouseout="window.status='Da ist kein Pfeil';return true">
    <img src="left.gif" width="20" height="22" border="0" alt="linker Pfeil"></a>
    <a href="" onclick="return false;" onmouseover="window.status='Das ist ein rechter Pfeil';return true"
        onmouseout="window.status='Da ist kein Pfeil';return true">
    <img src="right.gif" width="20" height="22" border="0" alt="rechter Pfeil"></a><br>
    <br></center>
    

    PC-Infos anzeigen

    Hier einige Infos zu Ihrem PC, ausgelesen vom Browser:

    <script type="text/javascript" language="JavasScript">
    <!--
    document.write('Sie benutzen den Browser ' + navigator.appName + ', Version: ' + navigator.appVersion +
    ' auf einem ' + navigator.platform + ' System, um die Seite ' + window.location + ' anzuschauen.<br>');
    if (navigator.cookieEnabled == true)
       document.write('Sie haben Cookies erlaubt.<br>');
    else if(navigator.cookieEnabled == false)
       document.write('Wieso erlauben Sie keine Cookies ???<br>');
         else
         document.write('Dieser Browser verrät den Cookie-Status SO nicht!<br>');
    
    if (navigator.javaEnabled() == true)
       document.write('Auf Ihrem PC ist Java verfügbar.');
    else if(navigator.javaEnabled() == false)
       document.write('Sie haben kein Java auf Ihrem PC! Behindert Sie das beim Surfen ?');
         else
         document.write('Dieser Browser verrät den Java-Status SO nicht!');
    //-->
    </script>
    
    
    Diese und weitere einfache Beispiele finden Sie in dieser Datei.

    Kommentarzeilen (vor allem in einer zentralen Script-Datei) werden mit /* eingeleitet und mit */ abgeschlossen werden.
    Beispiel:/* Check der Eingabefelder */

    Der HTMLEditor Phase 52 verfügt über einen Tab Java, der sowohl EventsHandler einfügen kann, aber auch Kommandostrukturen bereitstellt.

    SelfHTML verfügt über eine ausführliche JavaScript-Objektreferenz und einige Beispiele. Allerdings sollten Sie sich dann schon etwas näher mit JS beschäftigt haben, z.B. durch diesen Kurs! Bitte beachten Sie die Browserabhängigkeiten!
[zurück] Vorherige Doppelstunde  Index Nächste Doppelstunde [weiter]

© 2002 Andreas Schmidt