m (→Best Practices) |
|||
Line 276: | Line 276: | ||
** Grundlegende Funktionen/Informationen der Webseite sollten auch in Browsern ohne JavaScript (-> [[Barrierefreiheit]]) oder bei bewusst deaktivertem JavaScript (z.B. aus Sicherheitsgründen) erreichbar sein | ** Grundlegende Funktionen/Informationen der Webseite sollten auch in Browsern ohne JavaScript (-> [[Barrierefreiheit]]) oder bei bewusst deaktivertem JavaScript (z.B. aus Sicherheitsgründen) erreichbar sein | ||
** "Add functionality with JavaScript, don’t create too much content" | ** "Add functionality with JavaScript, don’t create too much content" | ||
** Daher auch: vermeide inline Javascript | |||
* Bennene Deine Variablen und Funktionen sinnvoll und treffend | * Bennene Deine Variablen und Funktionen sinnvoll und treffend | ||
** Halte Dich an Bennenungskonventionen (z.B. Klassen beginnen mit Großbuchstaben, Variablen werden klein geschrieben) | ** Halte Dich an Bennenungskonventionen (z.B. Klassen beginnen mit Großbuchstaben, Variablen werden klein geschrieben) |
Revision as of 09:27, 29 November 2011
Hallo Welt
JavaScript ist eine clientseitige Programmiersprache. Der Quellcode wird im Klartext an den Browser übertragen und erst dort (im Browser des Surfers) interpretiert und ausgeführt. Im Gegensatz dazu ist PHP eine serverseitige Programmiersprache.
Eine voll kompatible Variante von JavaScript ist übrigens ActionScript, die Programmiersprache von Adobe Flash. Auch Director, Acrobat-PDFs und viele andere Dokumente und Programme unterstützen JavaScript.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>025_javascript</title>
<script language="javascript" type="text/javascript">
<!--
document.write("<p><i>Hallo Welt!</i></p>");
-->
</script>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
var meinDatum = new Date();
document.write("<p>Da hat um " + meinDatum.getHours() + ":" +
meinDatum.getMinutes() + " Uhr jemand <i>Yippee!</i> gerufen...</p>");
-->
</script>
</body>
</html>
Einbinden von JavaScript in HTML-Dateien
Javascript kann mit den <script></script> Tags eingebunden werden. Üblicherweise geschieht das im Head-Bereich, kann aber prinzipiell auch im Body erscheinen (s.oben).
<!-- 2 Möglichkeiten JavaScripte im Header einzubinden: extern als Verweis -->
<script language="javascript" type="text/javascript" src="026_toggle.js"></script>
<!-- ...und intern -->
<script language="javascript" type="text/javascript"><!--
function showAlert(myMsg) {
// zeige alert
alert(myMsg);
}
--></script>
Der Aufruf des JavaScript Codes passiert in der Regel an der Stelle, die gerade geladen wird. Deshalb findet man auch oft JavaScript Blöcke am Ende des HTML-Dokuments.
Wichtig:
Firefox interpretiert die verkürzte XML-Notation nicht korrekt:
<script type="text/javascript" src="meinScript.js" />
Deshalb sollten externe Scripte immer wie folgt eingebunden werden:
<script type="text/javascript" src="meinScript.js"></script>
Event-Handler
Mit "Event-Handlern" kann man auf Ereignisse und Benutzeraktionen reagieren:
<!-- Funktion definieren -->
<script language="javascript" type="text/javascript"><!--
function showAlert(myMsg) {
// zeige alert
alert(myMsg);
}
--></script>
<p><a href="#" onclick="showAlert('Hallo Welt!');">Rufe JavaScript auf</a></p>
Der Event-Handler im Beispiel ist onclick="function();"
Weitere Event-Handler sind:
- onabort (bei Abbruch)
- onblur (beim Verlassen)
- onchange (bei erfolgter Änderung)
- onclick (beim Anklicken)
- ondblclick (bei doppeltem Anklicken)
- onerror (im Fehlerfall)
- onfocus (beim Aktivieren)
- onkeydown (bei gedrückter Taste)
- onkeypress (bei gedrückt gehaltener Taste)
- onkeyup (bei losgelassener Taste)
- onload (beim Laden einer Datei)
- onmousedown (bei gedrückter Maustaste)
- onmousemove (bei weiterbewegter Maus)
- onmouseout (beim Verlassen des Elements mit der Maus)
- onmouseover (beim Überfahren des Elements mit der Maus)
- onmouseup (bei losgelassener Maustaste)
- onreset (beim Zurücksetzen des Formulars)
- onselect (beim Selektieren von Text)
- onsubmit (beim Absenden des Formulars)
- onunload (beim Verlassen der Datei)
- javascript: (bei Verweisen)
- siehe auch: EventHandler (SelfHTML)
Kommentare
Übersicht Kommentarfunktion in HTML, CSS, JavaScript und PHP:
Sprachen | Syntax |
HTML | <!-- Mehrzeiliger Kommentar --> |
PHP, JavaScript, CSS | /* Mehrzeiliger Kommentar */ |
PHP, JavaScript | // Einzeiliger Kommentar |
PHP | # Einzeiliger Kommentar |
Funktionen
Funktionen sind gruppierte Einheiten, die eine bestimmte Aufgabe haben. Eine Funktion erkennt man an den beiden runden Klammern. Üblicherweise sollten Funktionen durch ein Verb benannt sein. Z.B. doSomething(); oder getItem();.
Das Semikolon schließt einen Ausdruck ab. Zeilensprünge oder Leerzeichen sind unrelevant; der JS Compiler sieht alles als eine "Zeile" an, bis er auf ein Semikolon trifft.
function showAlert(myMsg) {
// zeige alert
alert(myMsg);
// füge "Funktion ausgeführt!" Text der Liste am Ende hinzu
// erstelle ergebnisTag
var myNewListItem = document.createElement("li");
var myText = document.createTextNode("Die Funktion wurde erfolgreich aufgerufen!");
myNewListItem.appendChild(myText);
// finde ergebnisListe und füge neuen ergebnisTag hinzu
var myErgebnisListe = document.getElementById("ergebnisListe");
myErgebnisListe.appendChild(myNewListItem);
}
Der Vollständigkeit halber sei erwähnt, dass Funktionen weitere Funktionen enthalten können.
Variablen
Um eine Variable zu benutzen, muss man:
- Die Variable deklarieren (mit dem Schlüsselwort var): var a;
- Der Variablen einen Wert zuweisen, d.h. sie initiieren: a = 1;
- Die Punkte 1. und 2. können auch zusammengefasst werden: var a = 1;
Typen
Im Gegensatz zu vielen anderen Sprachen, haben Variablen in JavaScript keine explizite Typ-Zuweisung (non-typecasted), d.h. eine Variable kann Werte beliebiger Typen enthalten.
Trotz der nicht-expliziten Typzuweisung, gibt es in Javascript Objekte, die man mit primitiven Type verwechseln könnte: Numbers (int, float, ...), Strings (char, string) und Boolean (bool).
Sichtbar wird dies an folgendem Beispiel:
var a = 5;
var b = 4;
var c = a + b;
// c hat den Wert der Zahl 9
ein anderes Ergebnis, wenn die Zahl 4 mit dem String "5" addiert wird - das "+"-Zeichen ist hier kein Additionszeichen mehr, sondern ein sog. Verkettungsoperator, der zwei Strings zusammensetzt:
a = "5";
b = 4;
c = a + b;
// c ist nun ein String mit dem Wert "54"!
Explizite Typumwandlung
Trotz der nicht expliziten Typen von JavaScript Variablen, lassen sich aber explizite Typumwandlungen (Typecasting) vornehmen.
var a = "5";
typeof a;
// "string"
var b = parseInt(a);
typeof b;
// "number"
Ein weiteres Beispiel.
var a = "5.5";
var b = parseInt(a)
typeof b;
// "number"
// b hat aber den Wert 5 (Ganzzahl)
var c = parseFloat(a);
typeof c;
// "number"
// c hat aber den Wert 5.5 (Kommazahl)
Wie man sehen kann, geben parseInt und parseFloat verschiedene Werte zurück, obwohl der Typ der Rückgabe beide Male ein Objekt der Klasse Number ist.
Eine andere Möglichkeit der Umwandlung von Typen ist das Erstellen eines neuen Objekts der gewünschten Zielklasse.
var a = "5.5";
var b = Number(a);
typeof b;
// "number" (Wert: 5.5)
var c = Boolean(a);
typeof c;
// "boolean" (Wert: true)
var d = String(c);
typeof d;
// "string" (Wert: "true")
Geltungsbereich
Wenn eine Variable in einer Funktion deklariert wird, gilt die Variable nur innerhalb der Funktion.
function foo(){
var n="hallo"
alert(n); //"hallo" erscheint
}
foo();
alert(n); //fehler, n not defined
Um eine Variable auch außerhalb einer Funktion nutzen zu können, sollte sie einfach außerhalb der Funktion deklariert werden.
Wenn einer Variablen ein Wert zugewiesen wird, ohne dass diese Variable vorher mit "var" definiert wurde, wird die Variable automatisch definiert. Das sollte aber vermieden werden, da schnell der Überblick über genutzte Namen der Variablen verliert. Zudem sind diese 'implizit deklarierten' Variablen immer global, d.h. selbst wenn die Variable selber zuerst in einer Funktion genutzt wird, gilt sie im ganzen Script.
Klassen und Objekte
JavaScript ist objektbasierte Programmiersprache (und gehört im weiteren Sinn zu den objektorientierten Programmiersprachen). In JS ist quasi alles ein Objekt bzw. eine Klasse. Der Unterschied zwischen einer Klasse und einem Objekt ist, dass man die Vorlage eines Objektes ("Blueprint") als Klasse bezeichnet. Von einer Klasse können beliebig viele "Instanzen" erstellt werden. Wenn mit dem Schlüsselwort new MyClass() eine Instanz einer Klasse erstellt wurde, spricht man von einem Objekt.
Vereinfacht heißt das: Ein Objekt (also eine Instanz einer Klasse) existiert "lebendig" und veränderbar im Speicher des Rechners, eine Klasse hingegen existiert nicht (im Sinne einer "lebendigen Veränderbarkeit") bzw. nur unveränderlich als Quellcode ("Blueprint"/Vorlage) bzw. Textdatei auf der Festplatte.
Z.B. erstellt man ein neues Objekt myDate aus der Klasse Date so:
var myDate = new Date();
Nun kann man alle Eigenschaften und Methoden (=Funktionen) des Objektes mit Hilfe des "Punktsyntax" oder "Dot-Syntax" benutzen. Z.B.:
Document.print("Es ist " + myDate.getHours() + " Uhr.");
Hinweis: Man kann auch manche Objekte nutzen, ohne sie vorher instanziiert zu haben. Das liegt dann aber meisten daran, dass es bereits eine Instanz davon gibt: siehe Document.print() im Beispiel oben.
Übersicht der in JavaScript enthaltenen Klassen:
Anchor | Applet | Arguments | Array | Attr |
Boolean | Comment | DOMException | DOMImplementation | Date |
Document | DocumentFragment | Element | Error | Event |
Form | Function | Global | History | Image |
Input | Layer | Link | Location | Math |
Navigator | Node | Number | Object | Optioni |
RegExp | Screen | Select | String | Style |
Text | Textarea | Window |
Klassen fangen im Gegensatz zu Variablen üblicherweise mit einem Großbuchstaben an. Vgl. auch CamelCase
Best Practices
JavaScript ist eine komplexe Sprache mit noch komplexeren Möglichkeiten. Für kleine, einfache Aufgaben kann man die Informationen auf dieser Seite bereits gut nutzen. Für umfangreichere Projekte sollte man ein paar wichtige Grundsätze beachten:
- Benutze kein JavaScript für elementare Seitennavigation oder zur Darstellung wichtiger Informationen
- Gültig vor allem bei universell abrufbaren Webseiten; eingeschränkt gültig für sog. "WebApps"
- Grundlegende Funktionen/Informationen der Webseite sollten auch in Browsern ohne JavaScript (-> Barrierefreiheit) oder bei bewusst deaktivertem JavaScript (z.B. aus Sicherheitsgründen) erreichbar sein
- "Add functionality with JavaScript, don’t create too much content"
- Daher auch: vermeide inline Javascript
- Bennene Deine Variablen und Funktionen sinnvoll und treffend
- Halte Dich an Bennenungskonventionen (z.B. Klassen beginnen mit Großbuchstaben, Variablen werden klein geschrieben)
- Vermeide globale Variablen
- Kommentiere Quellcode sinnvoll: so viel wie nötig, so wenig wie möglich
- Gewöhne Dir einen konsistenten Programmierstil an
- Strukturiere Deinen Code modular – eine Funktion pro Aufgabe
- Verbessere Dein Programm progressiv
- Test early, test often
- Erlaube andere Konfigurationen und Übersetzungen
- Optimiere Schleifen
- Optimiere nicht ausschließlich für spezielle Browser
- Erfinde nicht das Rad neu
- Bekämpfe nicht das Framework ("Don't fight the framework")
- Informiere Dich über die "Design Patterns" (Programmierkonzepte) der Programmiersprache
- Komprimiere ("minify") JavaScripts und CSS-Dateien wenn sie in den produktiven Einsatz gehen
- Sei ressourcenschonend
- Beachte die informelle Selbstbestimmung und Datenhoheit Deiner Nutzer
- Stelle Deinen Code unter eine (freie) Lizenz
Einige Punkte dieser Aufzählung basieren auf dem unbedingt lesenwerten Artikel (engl:) JavaScript Best Practices auf dev.opera.com, der viele Punkte detailliert erklärt und konkrete (Code-) Beispiele aufzeigt.
Debugging
Unter Debugging versteht man das Finden von Bugs in der Software. Ohne entsprechende Tools kann das ein nervenaufreibender und langwieriger Prozess sein. Daher gilt:
- Test early & test often!
- Nutzt eine Konsole, die JavaScript Code evaluieren (=ausführen) kann. Siehe z.B. Firebug.
- Firebug und Aptana Studio haben richtige Debugger!
Ein vollwertiger Debugger ist ein wertvolles Entwicklungswerkzeug. Man kann damit "Breakpoints" setzen (üblicherweise rote Punkte in der Linienzeile), dort hält der Code während der Ausführung an; und man kann Schritt für Schritt, Zeile für Zeile weitersteppen. Gleichzeitig werden verschiedene Fenster angezeigt, in denen man die aktuellen Werte lokaler und globaler Variablen beobachten, verfolgen und setzen kann! So etwas ist ungemein hilfreich!
Libraries / Frameworks
Anstatt mit jeder Webseite das Rad neu zu erfinden, gibt es mittlerweile einige Open-Source Frameworks, die recht einfach zu nutzen sind. Großer Vorteil dieser Frameworks ist die Optimierung für problemloses Zusammenspiel mit allen neueren Browsern. Unterschiede der Frameworks finden sich v.a. in variablen Gewichtungen auf Dateigröße und Geschwindigkeitsoptimierungen sowie ideologischer Differenzen (z.B. Syntax, Plugin-Schnittstellen usw.)
Die großen Frameworks sind:
- jQuery (jQuery & jQueryUI)
- MooTools (lightweight)
- Scriptaculous (based on Prototype)
- dojo ToolKit (Grids, Charts, UI Widgets uvm)
- QooXDoo
- YUI - Yahoo User Interface Library
- Google Web Toolkit (shouldn't be embedded from Google Servers)
- jQTouch - Toolkit für iPhone/iPad WebApps
Außerdem gibt es noch einige spezielle Projekte (manche basieren auf Teilpaketen der o.g. Frameworks), die auf bestimmte Aufgaben spezialisiert sind; also in Fällen, in denen ein ganzes Framework ein leichter Overkill wäre:
- Lightbox - Thumbnail Viewer (viele Plugins für CMS-Systeme und Blogs)
- HighSlide - Thumbnail & Inline HTML Viewer
- Box2D - 2D Physics Engine
- ProcessingJS - Processing in JavaScript for HTML5
- PaperJS - Visual Library
Weitere Bibliotheken haben sich für die Entwicklung für mobile Endgeräte etabliert:
- PhoneGap - Plattformübergreifend (Android, iOS, Blackberry...), leider von Adobe gekauft
- AppCelerator von Titanium - Kommerzieller JS Translator
- 18 Frameworks for iOS
- JQueryTouch - für iOS
- iUI für iOS
- SproutCore für iOS
Ressourcen
JavaScript:
- Javascript Grundlagen
- Kursbegleitende Quelldateien 025-028.zip
- SelfHTML JavaScript
- Galileo OpenBook JavaScript (umfangreiche Einführung; etwas veraltet)
- Eloquent Javascript interaktives Tutorial, beschäftigt sich hauptsächlich mit Javascript selbst und wenig mit DOM, also der direkten Veränderung von Websites.
- WikiBooks: JavaScript
- Introduction on Events, mit einfacher Erklärung des Event Objektes und Event-Weiterleitung (Propagation)
Javascript Advanced:
- js Lint ist ein strenger Korrekturleser für JS-Code, der schlechten Stil wie die Nutzung von eval() bemerkt.
- Inheritance in JS und eine einfache Konstruktor-Funktion
- Die genaue Funktionsweise der für objektorientiertes JS essentiellen Prototype-Eigenschaft wird in Prototypes in Javascript und in illumination on JS Prototypes (mit live-code-tests) erklärt.
- Closures sind Variablen, deren Inhalt gelesen werden kann, obwohl die enthaltene Funktion schon zuende ausgeführt ist. Darüber können z.B. private-Werte emuliert werden (oder das Speichermanagement gestört, wenn man es nicht klug anstellt). Closures for Dummies erklärt die Prinzipen, eine alternative Einführung findet sich bei Jibbering.
HTML5 & Canvas:
- siehe auch HTML5: Canvas
- Canvas Tutorial (Drawing with JavaScript & HTML5)
- Interactive Canvas Tutorial
Misc:
- hotscripts.org
- Zen-Coding - Text-Expander for HTML/CSS
- 14 JQuery and CSS Demos I wish I knew before
- Mozilla Developer Network Referenz für Javascript, HTML/5, CSS und mehr
Diese Seite ist Teil der Werkmodule Grundlagen der Webprogrammierung und WebApps - Grundlagen Webprogrammierung von Michael Markert für Interface Design / Fakultät Medien an der Bauhaus-Universität Weimar.