Handbuch Webdesign: Javascript
Aus Wikibooks
[Bearbeiten] Javascript
Inhaltsverzeichnis |
 |
Dieses Buch oder diese Seite wurde zur Löschung vorgeschlagen
Dieses Buch oder diese Seite erfüllt nach Ansicht des Antragstellers die Qualitätskriterien der Wikibooks nicht – das Buch beziehungsweise die Seite sollte daher verbessert werden (am besten von Ihnen, dem Autor, oder von anderen Benutzern, die hier helfen möchten). Geschieht dies nicht, wird das Buch, beziehungsweise die Seite nach Ablauf einer Frist von zwei Wochen gelöscht. Auf der unten angegebenen Seite kann gegen die Löschung Einspruch erhoben werden. |
Diskussion über den Löschantrag
Hier der Grund, warum diese Seite konkret nicht den Qualitätsanforderungen entspricht: Extrem nachlässig erstellter Text und zahllose kleinere bis schwere inhaltliche Mängel, die seit längerem keine Verbesserung finden.
Es scheint mir kaum jemandem zuzumuten, diesen Text, der offensichtlich höchst nachlässig und oberflächlich erstellt wurde, zu verbessern, bis dieser ein Niveau erreicht hat, das es dem Autor, einem EDV-Dozenten erlaubte, diesen Text in seinen Seminaren ohne Peinlichkeit zu benutzen.
 |
Dieser Teil des Handbuch Webdesign entspricht noch nicht den definierten Zielen und Qualitäts-Standards. Er sollte überarbeitet werden. Der Inhalt und der Stil sind viel zu sehr auf ProgrammiererInnen ausgerichtet. Es fehlen motivierende Beispiele. Es fehlen Anwendungsbeispiele für Skripts, die mehr darstellen als sinnfreie Fragemente. Der Text enthält zahlreiche kleinere Detailfehler: Besonders störend, die toten Links auf erläuternde Bilder. |
[Bearbeiten] Einleitung
Mit Javscript haben Sie schon gearbeitet – wahrscheinlich ohne es zu bemerken: Wenn Sie ein Rollover-Bild in Dreamweaver erstellen siehe Kapitel 4, dann baut Dreamweaver dafür ein paar Zeilen Javscript in Ihre Webseite ein.
Javascript ist eine Programmiersprache im Web-Browser, mit der man Webseiten interaktiver gestalten kann: der Browser reagiert dann nicht nur auf Klicks auf Links und Formular-Eingaben, sondern z.B. auf das Bewegen der Maus über ein Bild, wie beim Rollover.
Javascript ist eine richtige Programmiersprache – mit Variablen, Schleifen, Verzweigungen – und damit schwerer zu erlernen als HTML oder CSS. Glücklicherweise kann man schon mit wenigen Zeilen Javascript gute Effekte erzielen. Und man kann relativ einfach erlernen fertige Javascript-Programme in die eigenen Webseite einzubauen.
[Bearbeiten] die Programmiersprache
JavaScript ist eine Sprache, die 1995 bei Netscape erfunden[1] und in den Browser Netcape 2.0 eingebaut wurde. Andere Browserhersteller haben sich angeschlossen, heute (2004/05) funktioniert Javascript u.a. in Mozilla, Netscape, Firefox, Internet Explorer, Opera,
[Bearbeiten] Der <script>-Tag im Body
Javascript-Programme können direkt in die Webseite mit dem <script>-Tag eingebettet werden. Das Programm wird dann beim Aufbau der Seite ausgeführt:
<h1>Selbstzerstörung</h1> <script> for (i=10; i > 0; i--) { document.write("<br>in " + i + " Millisekunden"); } </script> <p><strong>Peng!</strong>
Erklärung: Nach der Überschrift "Selbstzerstörung" werden vom Javascript-Programm 10 Zeilen HTML-Code erzeugt, die vom Browser wie ganz normaler HTML-Code dargestellt wird. Danach wird der Absatz mit Peng! angezeigt.
[Bearbeiten] die onEvent - Attribute
Meist werden Javascript-Programme aber so geschrieben, dass sie nicht gleich beim Laden der Seite starten, sondern erst wenn gewisse Ereignisse (Events) eintreten. Bei manchen HTML-Tags gibt es Attribute die mit on beginnen (onClick, onSubmit, onLoad,...), als Wert enthalten diese Attribute das Javascript-Programm das ausgeführt werden soll.
<h1>Selbstzerstörung</h1>
<form>
<input type="button" value="Selbstzerstörung"
onClick="alert('peng')">
</form>
Ein ganz normales Formular mit einem Knopf wird angezeigt. Erst wenn der Knopf gedrückt wird, wird das Event "onClick" ausgelöst, und damit das Javasprogramm gestartet. Das Javaprogramm erzeugt ein Popup-Fenster mit dem Text "peng"
Ein paar typische Events mit Ihren HTML-Tags:
| <body onLoad="..."> | Das Programm wird ausgeführt, nachdem die ganze Seite geladen + fertig dargestellt ist |
| <form onSubmit="..."> | Das Programm wird ausgeführt wenn der Einsende-Knopf des Formulars betätigt wird, aber bevor die Daten wirklich gesendet werden ? das Programm kann die Daten prüfen, und dann entscheiden ob sie gesendet werden. |
|
<input onChange=".."> |
Das Programm wird ausgeführt wenn der Inhalt des Eingabefeldes verändert wurde |
|
<a href="..." |
Das Programm wird ausgeführt wenn die Maus über den Link bewegt wird (Gegenteil: onMouseOut) |
[Bearbeiten] Der <script>-Tag im Head
Es ist üblich, im Head-Bereich des Dokuments Funktionen (das sind kleine, wieder verwertbare Proramm-Teile) zu definieren, die später verwendet werden:
<head>
<script language="javascript">
function zeige(t) {
t = "!!!" + t + "!!!";
alert(t);
}
</script>
</head>
<body>
<h1>Selbstzerstörung</h1>
<form>
<input type="button" value="Selbstzerstörung" onClick="zeige('peng')">
</form>
Die Funktion zeige wird duch das Javascript-Programm im <head> definiert, aber noch nicht ausgeführt. Erst durch den Aufruf der Funktion im onClick-Event des Buttons wird die Funktion gestartet.
[Bearbeiten] Was kann ein Javascript-Programm
Ein Javascript-Programm kann nur Elemente der Webseite und des Webbrowser kontrollieren, sonst nichts. Typische Anwendungen sind:
- Rollover-Bilder – Wenn die Maus über ein Bild bewegt wird, wird dieses Bild durch ein Neues ersetzt.
- Anzeige (und scrollen) von Text in der Statusleiste des Browsers
- Öffnen von neuen Browserfenstern mit definierter Größe und Position am Bildschirm
- Automatisches Ausfüllen von Web-Formularen, z.B. bei Eingabe der Stückzahl wird der Gesamtpreis (= Preis mal Stückzahl) automatisch berechnet und angezeigt.
- Ebene (<div> mit absoluter Position) unsichtbar oder sichtbar machen.
- Prüfen auf Plugin, falls das Plugin vorhanden ist wird auf eine neue Webseite weitergeleitet.
- Bei Frame-Seiten: Austausch der Dokumente in mehreren Frames (z.B. Inhalt und Navigation mit nur einem Click austauschen)
[Bearbeiten] Probleme mit Javascript
Das Programmieren von Javascript ist sehr schwierig. Nicht weil die Programmiersprache schwierig wäre, sondern weil die verschiedenen Browserhersteller absichtlich unterschiedliche Javascript-Varianten in Ihre Browser einbauen. Ein Beispiel: um die Breite des Browser-Fensters auszumessen gibt es mehrere Varianten:
|
funktioniert in Netscape und Mozilla |
x = window.innerWidth; |
|
funktioniert in Internet Explorer |
x = document.body.clientWidth; |
In diversen Foren und auf verschiedenen Webseiten werden fertige Javascript-Programme angeboten. Dabei findet man immer wieder veraltete Javascript-Programme, die in den neuesten Browser-Versionen nicht mehr funktionieren. Deswegen ist es wichtig auf das Erstellungsdatum zu achten.
[Bearbeiten] Die Standardisierung von Javascript
Die Syntax, also die allgemeine Schreibweise der Sprache, wurde als ECMASkript ( Fehler! Verweisquelle konnte nicht gefunden werden.) von der "e;European Computer Manufacturers Association"e; standardisiert. Das allein reichte aber nicht aus, um die Unterschiede zwischen den Browsern zu beseitigen.
Schließlich befasste sich das World Wide Web Konsortium mit dem Problem. Die Lösung des Konsortiums, deren Version 1.0 am 1. Oktober 1998 eine offizielle W3C-Empfehlung (recommendation) wurde, ist das Document Object Model (DOM), ein Modell wie die Elemente jeder beliebigen Webseite (jedes Dokuments) von einer objektorientierten Skriptsprache aus manipuliert werden können. Das DOM fasst ein HTML- oder XML-Dokument als Baum auf. Für das Dokument in Listing 3 ergibt das einen Baum wie den links gezeigten.
Das DOM einer Webseite kann man sich als Baum vorstellen, so ähnlich wie die Ordnerstruktur im Dateisystem. So sind in Beispiel der markierte <li>-Tag innerhalb des <ol>-Tags, der <li>-Tag enthält wiederum einen <a>-Tag.
<html> <body> <p>Navigation</p> <h1>Überschrift</h1> <div class="intro"> <h2>Dies und Das</h2> <ol> <li><a id="erster" href="#bla">erster Link</a></li> <li><a href="#bla">zweiter Link</a></li> <li><a href="#bla">dritter Link</a></li> <li><a href="#bla">vierter Link</a></li> . . . </ol> </div>
Mit diesem Modell kann man nun in einem Javascript-Programm die Webseite viel tief greifender manipulieren als mit "klassischem" Javascript. Mögliche Befehle wären:
- Mache ein beliebiges Element des DOM unsichtbar (z.B. die ganze Liste)
- Ändere den Style eines beliebigen Elements (z.B. die Schriftart der Überschrift)
- Füge neue Elemente ein (z.B. drei zusätzliche Listenpunkte nach dem ersten Listenpunkte einfügen)
Methoden für das DOM
Mit dem DOM wurden diverse Zugriffs-Methoden definiert, zum Beispiel document.getElementById() zum Auswählen eines HTML-Tags mit einer Bestimmten ID. Listing 4 zeigt ein Fragment eines Javascript-Programmes, das das Dokument aus Listing 3 modifiziert.
document.getElementById("erster").href = "http://multimediaart.at";
Doch selbst bei Verwendung des DOM gibt es immer noch kleine Unterschiede zwischen den Browsern. Eine gute Informationsquelle dazu ist quirksmode.org[2] von Peter-Paul. Er hat auf dieser Site eine Liste von Beispiel-Skripts veröffentlicht, und dazu jeweils die Kompatibilität von 6 verschiedenen Browsern getestet. Abbildung 97 Zeigt ein Beispiel.
Durch die Einführung des DOM hat sich die Situation langsam verbessert. Als genug von den ?alten Browsern? ausgetauscht waren konnte man den neuen Standard auch benutzen.
Für Javascript+DOM war ca. 2005 dieser kritische Level an Verbreitung erreicht. Seitdem gibt es ímmer mehr Webapplikationen die Javascript und die DOM konsequent einsetzten. In Kombination mit dem XMLHTTPRequestObject, das das asynchrone Nachladen von Daten ermöglicht, konnte so eine neue Qualität von Interaktion erreicht werden. Ein Beispiel für diese Art von Interaktivität ist das in Abbildung 98 gezeigt Autocomplete-Eingabefeld.
In diesem Beispiel hat die Leserin erst einen Buchstaben in das Eingabefeld eingetippt: "e;a"e;. Diese Eingabe wurde über das XMLHTTRequestObject an ein serverseitiges Skript gesandt, dass eine Datenbankabfrage durchführt. Das serverseitige Skript liefert als Output ein kleines HTML-Fragment mit einer Liste von Namen:
<ul> <li>ameier</li> <li>amüller</li> <li>ahuber</li> <li>achovski-grauhuber</li> </ul>
Dieses HTML-Fragment wird vom Javascript-Programm im Client mittels DOM in die Webseite eingefügt. Durch ein Stylesheet erscheint die HTML-Liste nicht als Liste sondern wie in der Abbildung gezeigt. Im Februar 2005 verwendete Jesse James Garrett für diese Kombination zum ersten Mal die Abkürzung AJAX[3] . Seither entstanden eine Reihe von Javascript-Libraries, die das Entwickeln von AJAX-Applikationen wesentlich beschleunigen. Für alle serverseitigen Programiersprachen (Perl, Java, PHP, Ruby) gibt es ebenfalls Frameworks, Klassen, Libraries, die das serverseitige Erzeugen von Javascript unterstützen. Ob sich hier ein Framework durchsetzt, oder ob die Vielzahl von Angeboten auf Dauer im Einsatz bleibt ist derzeit (Herbst 2006) noch nicht absehbar.
Wenn die Situation so unangenehm bis unübersichtlich ist, warum wird Javascript und AJAX dann überhaupt verwendet? Die Antwort ist ganz einfach: weil es keine Alternative gibt. Javascript ist die einzige clientseitige Programmiersprache, die in den meisten Browsern eingebettet ist. Keine andere Sprache hat eine so weite Verbreitung. Bevor Sie aber ein Programm mit Javascript/AJAX schreiben, sollten Sie immer erst recherchieren, ob es nicht für Ihre Problemstellung bereits eine fertige Lösung oder ein gutes Framework gibt. Ein funktionierendes, bereits getestetes Javascriptprogramm an Ihre Bedürfnisse anzupassen oder auf mit einem umfangreichen Framework ein Problem zu lösen ist immer weniger Arbeit (und braucht weniger Nerven) als "von Grund auf" zu programmieren – egal wie gut Sie programmieren können.
[Bearbeiten] Quellen
- ↑ http://wp.netscape.com/comprod/columns/techvision/innovators_be.html
- ↑ http://quirksmode.org
- ↑ http://www.adaptivepath.com/publications/essays/archives/000385.php
