JavaScript: Difference between revisions

From Medien Wiki
(links)
 
(50 intermediate revisions by 4 users not shown)
Line 1: Line 1:
== Hallo Welt ==
== Hallo Welt ==
JavaScript heißt eigentlich [http://www.ecma-international.org/memento/TC39.htm ECMA Script] und hat nichts mit JAVA zu tun: Die JavaScript Sprache erhielt ihren Namen lediglich, weil zur Zeit ihrer Einführung in den WebBrowser die Programmiersprache [[JAVA]] sehr populär war und man dachte, das wäre ein Marketing-Vorteil.


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.
Wenn wir von JavaScript sprechen, meinen wir meistens die Implementierung im WebBrowser. Hier ist JavaScript 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 z.B. zu dem serverbasierten [[PHP]])


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.
Aber auch viele andere Programme unterstützen JavaScript oder ECMA-ähnliche Dialekte, so z.B. Actionscript (Flash), Director, Acrobat-PDFs oder sogar Illustrator, um nur einige zu nennen.


<source lang="html4strict" line start="1" highlight="8">
<source lang="html4strict" line start="1" highlight="8">
Line 31: Line 32:
</html>
</html>
</source>
</source>
Javascript benutzt eine Syntax, die C, C++ und Java ähnlich ist: {} umschließen Anweisungsblöcke; Das Semikolon schließt einen Ausdruck ab. Nach einem Zeilenumbruch wird u.U. während der Ausführung automatisch ein Semikolon eingefügt ([http://inimino.org/~inimino/blog/javascript_semicolons Regeln dafür]). Trotzdem sollte man die Semikola nach einem Ausdruck schreiben und sich nicht auf die Automatik verlassen. Leerzeichen sind unrelevant.


== Einbinden von JavaScript in HTML-Dateien ==
== Einbinden von JavaScript in HTML-Dateien ==
Line 49: Line 52:
</source>
</source>


Der Aufruf des JavaScript Codes passiert an der Stelle, die gerade geladen wird. Deshalb findet man auch oft JavaScript Blöcke am Ende des HTML-Dokuments - denn dannn sind schon alle DOM-Elemente des Dokumentes geladen und verfügbar. Für Codewartung und Wiederverwendung ist es aber besser, sich nicht auf die Einbindungsstelle zu verlassen. Stattdessen kann eine Funktion aufgerufen werden wenn das Dokument geladen ist – mittels <source lang="Javascript">document.onload=function(){}  </source>


'''Wichtig''':<br/>
'''Wichtig''':<br/>
Line 54: Line 58:
Deshalb sollten externe Scripte immer wie folgt eingebunden werden: <source lang="HTML4Strict"><script type="text/javascript" src="meinScript.js"></script></source>
Deshalb sollten externe Scripte immer wie folgt eingebunden werden: <source lang="HTML4Strict"><script type="text/javascript" src="meinScript.js"></script></source>


==Auf Elemente zugreifen==
Im Javascript-Code kann auf Elemente im HTML zugegriffen werden:
<source lang="HTML4Strict">
<!-- in der HTML Datei-->
<p id="changeMe">Lorem Ipsum</p>
</source>
<source lang="JavaScript" >
//im Javascript
var domElement = document.getElementById("changeMe");
domElement.style.color = red;
</source>
document.getElementById() holt das Element mit der übergebenen Id (hier:"changeMe"). In dem Beispiel ist das das &#060;p&#062;. In der folgenden Zeile wird dann die Schriftfarbe geändert.
Eine ähnliche Funktion ist document.getElementsByTagName(), diese gibt kein Element direkt zurück, sondern ein Array mit allen Elementen, die dieses Tag haben:
<source lang="JavaScript" >
//färbe alle Absätze rot
var domElement = document.getElementsByTagName('p');
for(var i=0; i<domElement.length; i++){
    domElement[i].style.color = red;
}
</source>
Mit [[HTML5]] wurden auch neue JavaScript Funktionen eingeführt. Eine der interessantesten ist ein komfortabler (aber im Vergleich zu getElementByID etwas langsamerer) Zugriff auf das DOM über die [[jQuery]]-ähnliche Funktion "querySelector()" und "querySelectorAll()" im document-Objekt, die einen CSS-Selektor-String zur Auswahl der Elemente entgegennehmen:
<source lang="JavaScript">
var domElement = document.querySelector("#changeMe");
domElement.style.color = red;
console.log("Alle divs: " + document.querySelectorAll("div") );
</source>
Während querySelector das erste passende Element raussucht und zurückgibt, gibt querySelectorAll alle passenden Elemente in einem Array zurück.
== Event-Handler ==
Mit "Event-Handlern" kann man auf Ereignisse und Benutzeraktionen reagieren.
Die Einfachste Möglichkeit ist den Event-Handler direkt ins HTML einzubinden:
'''HTML und JavaScript:'''
<source lang="HTML4Strict">
<p><a href="#" onclick="alert('Hallo Welt!');">Rufe JavaScript auf</a></p>
</source>
Der Event-Handler im Beispiel ist <tt>onclick="..."</tt>
Besser ist es aber, HTML und Javascript zu trennen, und die Event-Handler im Javscript hinzuzufügen. Dazu holt man sich das Dom-Element, und gibt diesem einen Händler:
'''In HTML:'''
<source lang="HTML5">
<p id="changeMe">Rufe JavaScript auf</p>
</source>
'''In JavaScript:'''
<source lang="JavaScript">
function changeElement(e){
    e.target.style.color="red";
}
// bisherige Variante:
//var domElement = document.getElementById("changeMe");
// besser (moderner und schneller, aber nicht in allen älteren Browsern implementiert)
var domElement = document.querySelector("#changeMe");
domElement.onclick= changeElement;
</source>
document.querySelector benutzt [[CSS]] Syntax, in diesem Beispiel steht die Raute # bei #changeMe für eine ID (id="changeMe").
Es gibt nur drei Selektortypen in CSS:
* HTML-Selectoren (p, div, a usw...) <sup>vordefiniert</sup>
* Klassen (.myStyle, .warning usw...) <sup>freie Benennung</sup>
* IDs (#header, #content, #clickButton, usw...) <sup>freie Benennung</sup>
Es ist wirklich hilfreich, sich in [[CSS]] einzulesen, um damit gut umgehen zu können. Der Vorteil von .querySelector gegenüber .getElementByID ist, dass es bedeutend schneller ist, da nicht das ganze DOM durchsucht werden muss und dass es sehr viel bequemer zu schreiben ist. Außerdem unterstützt .querySelector auch Pseudo-Selektoren und Regular Expressions. .querySelector macht auch den Einsatz von jQuery in 50% aller Fälle überflüssig, da jQuery häufig nur wegen der einfach zu notierenden Syntax <tt>$('#changeMe')</tt> genutzt wird. Das Gleiche erreicht man mit nativem JavaScript mit <tt>document.querySelector('#changeMe')</tt>
=== onClick vs. addEventListener ===
Das Problem mit .onclick (und allen anderen "on..."-Event-Handlern) ist, dass jedes Element nur einen .onclick-Handler haben kann. Besser ist es .addEventListener("click", changeElement, false) zu verwenden, damit können nämlich beliebig viele Event-Callbacks (Funktionen) registriert werden:
<source lang="JavaScript">
domElement.addEventListener("click", changeElement, false)
</source>
Mit addEventListener können einem Element auch mehrer Funktionen für das selbe Event zugeordnet werden:
<source lang="JavaScript">
domElement.addEventListener("click", otherFunction, false)
</source>
Damit würden jetzt bei einem Klick die Funktionen changeElement und otherFunction aufgeführt werden.
===Handler wieder löschen bzw. un-registrieren===
Eventhandler kann man in der .on...-syntax durch überschreiben wieder loswerden. Dabei wird nicht die Funktion gelöscht, sondern die "Verbindung" zwischen Event und Funktion. Dieses Verhalten ist nicht immer erwünscht und löst manchmal auch wichtige bestehende Verbindungen (z.B. in einer verwendeten JavaScript-Library), daher sollte prinzipiell die addEventListener Methode verwendet werden.
<source lang="JavaScript">
domElement.onclick= undefined;
</source>
In der addEventListener-Syntax benutzt man removeEventListener mit den selben Argumenten, die im entsprechenden addEventListener genutzt wurden:
<source lang="JavaScript">
domElement.removeEventListener("click", otherFunction, false)
</source>
===Das Event-Objekt===
Die Event-Handler-Funktion bekommt automatisch als erste Variable ein Event-Objekt übergeben. in der Funktion
<source lang="JavaScript">
function changeElement(e){
    e.target.style.color="red";
}
</source>
ist die Variable "e". Dieses Objekt hat etliche Eigenschaften des Event gespeichert, wie z.B. Position des Mausklicks und das Element auf dem das Event geschah – .target, wie oben genutzt.
'''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: [http://de.selfhtml.org/javascript/sprache/eventhandler.htm EventHandler (SelfHTML)]


{{Template:Webprogramming_Kommentare}}
{{Template:Webprogramming_Kommentare}}
Line 59: Line 188:
== Funktionen ==
== 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. <tt>doSomething();</tt> oder <tt>getItem();</tt>.
Funktionen sind gruppierte Einheiten, die eine bestimmte Aufgabe haben. Ruft man eine Funktion auf, werden die Befehle, aus der sie besteht, ausgeführt. Der Aufruf einer Funktion geschieht durch die runden Klammern: "tuWas'''()'''" führt die Funktion "tuWas" aus.  
 
Üblicherweise sollten Funktionen durch ein Verb benannt sein. Z.B. <tt>calcSquare();</tt> oder <tt>getItem();</tt>.
 
Ein Funktion kann auf verschiedene Weise definiert werden:
<source lang="JavaScript" >
function tuWas(){
    //befehle hier
}
</source>
oder sogenannt "anonym":
<source lang="JavaScript" >
var tuWas = function(){
    //befehle hier
};
</source>
beide haben den selben Effekt und sind nur andere Schreibweisen, beide Funktionen werden durch
<source lang="JavaScript" >
function tuWas();
</source>
ausgeführt.  


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.
Funktionen können aber nicht nur einfach ausgeführt werden: Ihre Ausführung kann beeinflusst werden, indem der Funktion "Parameter" oder synonym "Argumente" übergeben werden. Beim Aufrufen schreibt die Argumente mit Kommanta getrennt zwischen die runden Klammern.


<source lang="JavaScript" line start="15">
<source lang="JavaScript" >
function showAlert(myMsg) {
fragen("Jan","Michael");
// zeige alert
</source>
alert(myMsg);
Bei der Definition der Funktion müssen zwischen die runden Klammern Variablennamen geschrieben werden, die dann die Werte der übergebenen Argumente annehmen. 
<source lang="JavaScript" >
// füge "Funktion ausgeführt!" Text der Liste am Ende hinzu
var fragen = function(fragt, antwortet) {
// erstelle ergebnisTag
    alert(fragt+" sagt: ist heute Webtech?");
var myNewListItem = document.createElement("li");
    alert(antwortet +" sagt: ja!"
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);
}
}
</source>
</source>


Der Vollständigkeit halber sei hier erwähnt, dass Funktionen weitere Funktionen enthalten können; diese bezeichnet man dann als Methoden.
In der Funktion gelten also die Variablen "fragt" und "antwortet". Beim Aufrufen werden die Werte den Variablen zugeordnet, also bei "fragen('Jan','Michael');" bekommt der erste Parameter, "fragt", den Wert "Jan", der zweite Parameter, "antwortet", den Wert "Michael", somit bekommt man bei Ausführen von "fragen('Jan','Michael');" zuerst einen Alert mit dem Text
"Jan sagt: "Ist heute Webtech" und dann einen mit "Michael sagt: ja!"


== Variablen ==
== Variablen ==
Line 87: Line 232:
# Die Punkte 1. und 2. können auch zusammengefasst werden: <tt>var a = 1;</tt>
# Die Punkte 1. und 2. können auch zusammengefasst werden: <tt>var a = 1;</tt>


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. In Javascript gibt es Numbers ([[bool]], [[int]], [[float]], ...), und Strings ([[char]], [[string]]).
===Typen===
Im Gegensatz zu vielen anderen Sprachen, haben Variablen in JavaScript keine explizite Typ-Zuweisung (non-typecasted). Ein Typ ist die "Art" der Daten, die in der Variable gespeichert werden, z.B. Zahlen, Zeichenfolgen ("String") oder RegularExpressions. Bei Javascript muss der Typ nicht angegeben werden (in anderen Sprachen würde man sowas schreiben wie "var '''Number:'''myvar = 10")
 
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:
Sichtbar wird dies an folgendem Beispiel:
Line 104: Line 252:
// c ist nun ein String mit dem Wert "54"!
// c ist nun ein String mit dem Wert "54"!
</source>
</source>
Es ist allerdings keine gute Praxis, den Typ einer Variable zu ändern, da es den Code schlechter lesbar und unverständlich macht. 
====Explizite Typumwandlung====
Trotz der nicht expliziten Typen von JavaScript Variablen, lassen sich aber explizite Typumwandlungen (Typecasting) vornehmen.
<source lang="JavaScript" line hilight="1">
var a = "5";
typeof a;
// "string"
var b = parseInt(a);
typeof b;
// "number"
</source>
Ein weiteres Beispiel.
<source lang="JavaScript" line hilight="1">
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)
</source>
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.
<source lang="JavaScript" line hilight="1">
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")
</source>
===Geltungsbereich===
Wenn eine Variable in einer Funktion deklariert wird, gilt die Variable nur innerhalb der Funktion.
<source lang="JavaScript" line>
function foo(){
var n="hallo"
alert(n); //"hallo" erscheint
}
foo();
alert(n); //fehler, n not defined
</source>
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 ==
== Klassen und Objekte ==


JavaScript ist eine Programmiersprache, die extrem objektorientiert ist. In JS ist quasi alles ein Objekt bzw. eine Klasse. Der einfache Unterschied einer Klasse zu einem Objekt ist, dass man die Vorlage eines Objektes als ''Klasse'' bezeichnet. Wenn mit dem Schlüsselwort <tt>new MyClass()</tt> eine Instanz einer Klasse erstellt wurde, spricht man von einem Objekt.  
JavaScript ist objektbasierte Programmiersprache (und gehört im weiteren Sinn zu den objektorientierten Programmiersprachen). In JS ist quasi alles ein Objekt. Objekte in Javascript sind einfach zusammengehörige Paare von Namen und Daten (Strings, Zahlen, Funktionen, anderen Objekten) Ein Objekt wird durch geschweifte Klammern begonnen und beendet, Bezeichner und Wert werden durch einen ":" getrennt, Bezeichner- und Werpaare werden durch "," getrennt.
<source lang="JavaScript" line>
var objektname = {
  "name" : "Wert als String",
  "nocheiner" : 12344   
}
</source>
 
auf die Werte in dem Objekt wird über die Punkt-Syntax zugegriffen: Zwischen Objektname und Eigenschaftsname wird ein Punkt geschrieben.
<source lang="JavaScript" line>
var einString = objektname.name
</source>


Vereinfacht heißt das: Ein Objekt existiert (im Speicher des Rechners), eine Klasse existiert nicht (bzw. nur virtuell als Quellcode = Textdatei auf der Festplatte).
Schreibt also den Wert "Wert als String" der Eigenschaft "name" des Objekts "objektName" in die Variable "einString".  


Z.B. erstellt man ein neues ''Objekt'' <tt>myDate</tt> aus der ''Klasse'' <tt>Date</tt> so: <source lang="JavaScript">var myDate = new Date();</source>
Wenn eine Eigenschaft des Objektes selber ein Objekt ist kann die Punktsyntx weiter geschachtelt werden:
 
<source lang="JavaScript" line>
meinObjekt.unterObjekt.wertVonUnterObjekt
</source>
 
Das von anderen Sprachen bekannte Konzept einer "Klasse" gitb es in Javascript ''nicht''. 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 <tt>new MyClass()</tt> eine Instanz einer Klasse erstellt wurde, spricht man von einem Objekt.
 
Diese strikte Trennung existiert in Javscript nicht, Objekte werden intern durch Kopien von bestehenden Objekten erzeugt, wobei es Eigenschaften gibt die "geerbt" werden, also Daten und Funktionen, die von allen neuen Objekten gemeinsam genutzt werden. Dies ist aber ein fortgeschrittenes Thema. Zum Einstieg reicht es aus, das neue Kopien meist mit dem Operator "new" erzeugt werden, eine Konvention übernommen aus anderen Programmiersprachen in denen mittels "new" ein neues Objekt aus einer Klasse erstellt wird.
 
Z.B. ein neues ''Objekt'' <tt>myDate</tt> aus dem ''date-Objekt'' <tt>Date</tt> erstellt man so: <source lang="JavaScript">var myDate = new Date();</source>


Nun kann man alle Eigenschaften und Methoden (=Funktionen) des Objektes mit Hilfe des "Punktsyntax" oder "Dot-Syntax" benutzen. Z.B.: <source lang="JavaScript">Document.print("Es ist " + myDate.getHours() + " Uhr.");</source>
Nun kann man alle Eigenschaften und Methoden (=Funktionen) des Objektes mit Hilfe des "Punktsyntax" oder "Dot-Syntax" benutzen. Z.B.: <source lang="JavaScript">Document.print("Es ist " + myDate.getHours() + " Uhr.");</source>
Line 154: Line 379:
|Number
|Number
|Object
|Object
|Optioni
|Option
|-
|-
|RegExp
|RegExp
Line 171: Line 396:


Klassen fangen im Gegensatz zu Variablen üblicherweise mit einem Großbuchstaben an. Vgl. auch [[CamelCase]]
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:) [http://dev.opera.com/articles/view/javascript-best-practices/ JavaScript Best Practices] auf dev.opera.com, der viele Punkte detailliert erklärt und konkrete (Code-) Beispiele aufzeigt.
Zwar nur bedingt für JavaScript gültig, aber trotzdem lehrreich ist in diesem Zusammenhang auch die Seite [http://thc.org/root/phun/unmaintain.html How to Write Unmaintainable Code].


== Debugging ==
== Debugging ==
Line 177: Line 434:
* Test early & test often!
* Test early & test often!
* Nutzt eine Konsole, die JavaScript Code evaluieren (=ausführen) kann. Siehe z.B. [[CSS#Editieren_von_Stylesheets|Firebug]].
* Nutzt eine Konsole, die JavaScript Code evaluieren (=ausführen) kann. Siehe z.B. [[CSS#Editieren_von_Stylesheets|Firebug]].
* [[CSS#Editieren_von_Stylesheets|Firebug und Aptana Studio]] haben richtige Debugger!  
* Firebug und die Web Developer Tools der Webkit-Browser haben richtige Debugger!
* In vielen Browsern ist es möglich, über console.log("ausgabetext hier") Ausgaben in die Konsole zu schreiben.


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!  
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!
So etwas ist ungemein hilfreich!


== Frameworks ==
== 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.)
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.)
Line 195: Line 453:
* Google Web Toolkit ''(shouldn't be embedded from Google Servers)''
* Google Web Toolkit ''(shouldn't be embedded from Google Servers)''


 
Außerdem gibt es noch einige spezielle Projekte (manche basieren auf Teilpaketen der o.g. Frameworks), die auf bestimmte Aufgaben spezialisiert sind:
Außerdem gibt es noch einige kleinere 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)
* Lightbox - Thumbnail Viewer (viele Plugins für [[CMS]]-Systeme und Blogs)
* [http://www.highslide.com HighSlide] - Thumbnail & Inline HTML Viewer
* [http://www.highslide.com HighSlide] - Thumbnail & Inline HTML Viewer
* [http://code.google.com/p/box2dweb/ Box2D] - 2D Physics Engine
* [http://processingjs.org/ ProcessingJS] - [[Processing]] in JavaScript for [[HTML5]]
* [http://www.paperjs.com PaperJS] - Visual Library
* [http://www.dotuscomus.com/pergola/index.html Pergola] - Extensive SVG Library
Weitere Bibliotheken haben sich für die Entwicklung für mobile Endgeräte etabliert:
* [http://www.phonegap.com/ PhoneGap] - Plattformübergreifend (Android, iOS, Blackberry...), leider von [[Adobe]] gekauft
* [http://www.appcelerator.com/products/titanium-mobile-application-development/ AppCelerator von Titanium] - Kommerzieller JS Translator
* [http://iphoneized.com/2009/11/18-mobile-frameworks-development-tools-creating-iphone-apps/ 18 Frameworks for iOS]
* [http://www.jqtouch.com/ JQueryTouch] - für [[iOS]]
* [http://code.google.com/p/iui iUI] für iOS
* [http://www.appleinsider.com/articles/10/04/19/sproutcore_debuts_new_html5_web_development_tools.html SproutCore] für iOS


== Ressourcen ==
== Ressourcen ==
JavaScript:
JavaScript:
* [http://www.feierfeil.at/javascript/index_javascript.htm Javascript Grundlagen]
* [http://web.uni-weimar.de/medien/wiki/index.php5/File:Webgrundlagen_wki_025-028.zip Kursbegleitende Quelldateien 025-028.zip]
* [http://web.uni-weimar.de/medien/wiki/index.php5/File:Webgrundlagen_wki_025-028.zip Kursbegleitende Quelldateien 025-028.zip]
* [http://de.selfhtml.org/javascript/index.htm SelfHTML JavaScript]
* [http://de.selfhtml.org/javascript/index.htm SelfHTML JavaScript]
* [http://openbook.galileocomputing.de/javascript/ Galileo OpenBook JavaScript] (umfangreiche Einführung; etwas veraltet)
* [http://eloquentjavascript.net/contents.html Eloquent Javascript] interaktives Tutorial, beschäftigt sich hauptsächlich mit Javascript selbst und wenig mit DOM, also der direkten Veränderung von Websites.
* [http://eloquentjavascript.net/contents.html Eloquent Javascript] interaktives Tutorial, beschäftigt sich hauptsächlich mit Javascript selbst und wenig mit DOM, also der direkten Veränderung von Websites.
* [http://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Inhalt WikiBooks: JavaScript]
* [http://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Inhalt WikiBooks: JavaScript]
* [http://www.quirksmode.org/js/introevents.html Introduction on Events], mit einfacher Erklärung des Event Objektes und Event-Weiterleitung (Propagation)
Javascript Advanced:
Javascript Advanced:
*[http://www.jslint.com/ js Lint] ist ein strenger Korrekturleser für JS-Code, der schlechten Stil wie die Nutzung von eval() bemerkt.  
*[http://www.jslint.com/ js Lint] ist ein strenger Korrekturleser für JS-Code, der schlechten Stil wie die Nutzung von eval() bemerkt.  
Line 212: Line 482:
*Die genaue Funktionsweise der für objektorientiertes JS essentiellen Prototype-Eigenschaft wird in [http://www.spheredev.org/wiki/Prototypes%5Fin%5FJavaScript Prototypes in Javascript] und in  [http://blog.morrisjohns.com/illumination_on_javascript_prototypes.html illumination on JS Prototypes] (mit live-code-tests) erklärt.
*Die genaue Funktionsweise der für objektorientiertes JS essentiellen Prototype-Eigenschaft wird in [http://www.spheredev.org/wiki/Prototypes%5Fin%5FJavaScript Prototypes in Javascript] und in  [http://blog.morrisjohns.com/illumination_on_javascript_prototypes.html 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). [http://blog.morrisjohns.com/javascript_closures_for_dummies.html Closures for Dummies] erklärt die Prinzipen, eine alternative Einführung findet sich bei [http://www.jibbering.com/faq/faq_notes/closures.html Jibbering].
* 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). [http://blog.morrisjohns.com/javascript_closures_for_dummies.html Closures for Dummies] erklärt die Prinzipen, eine alternative Einführung findet sich bei [http://www.jibbering.com/faq/faq_notes/closures.html Jibbering].
HTML5 & Canvas:
HTML5 & Canvas:
* siehe auch [[HTML#HTML5|HTML5: Canvas]]
* [https://developer.mozilla.org/en/canvas_tutorial Canvas Tutorial] (Drawing with JavaScript & HTML5)
* [https://developer.mozilla.org/en/canvas_tutorial Canvas Tutorial] (Drawing with JavaScript & HTML5)
* [http://billmill.org/static/canvastutorial/index.html Interactive Canvas Tutorial]
* [http://billmill.org/static/canvastutorial/index.html Interactive Canvas Tutorial]
Misc:
Misc:
* [http://www.hotscripts.com/category/javascript/ hotscripts.org]
* [http://www.hotscripts.com/category/javascript/ hotscripts.org]
* [http://code.google.com/p/zen-coding/ Zen-Coding] - Text-Expander for HTML/CSS
* [http://code.google.com/p/zen-coding/ Zen-Coding] - Text-Expander for HTML/CSS
* [http://www.webdeveloperjuice.com/2010/01/14/14-jquery-and-css-demos-i-wish-i-knew-much-before/ 14 JQuery and CSS Demos I wish I knew before]
* [http://www.webdeveloperjuice.com/2010/01/14/14-jquery-and-css-demos-i-wish-i-knew-much-before/ 14 JQuery and CSS Demos I wish I knew before]
* [https://developer.mozilla.org Mozilla Developer Network] Referenz für Javascript, HTML/5, CSS und mehr




Line 229: Line 498:
[[Category:Javascript]]
[[Category:Javascript]]
[[Category:Webdesign]]
[[Category:Webdesign]]
[[Category:Programmiersprachen]]
[[Category:Programmiersprachen]]
[[Category:Javascript]]
[[Category:Javascript]]
[[Category:Webdesign]]
[[Category:Webdesign]]

Latest revision as of 11:56, 27 November 2013

Hallo Welt

JavaScript heißt eigentlich ECMA Script und hat nichts mit JAVA zu tun: Die JavaScript Sprache erhielt ihren Namen lediglich, weil zur Zeit ihrer Einführung in den WebBrowser die Programmiersprache JAVA sehr populär war und man dachte, das wäre ein Marketing-Vorteil.

Wenn wir von JavaScript sprechen, meinen wir meistens die Implementierung im WebBrowser. Hier ist JavaScript 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 z.B. zu dem serverbasierten PHP)

Aber auch viele andere Programme unterstützen JavaScript oder ECMA-ähnliche Dialekte, so z.B. Actionscript (Flash), Director, Acrobat-PDFs oder sogar Illustrator, um nur einige zu nennen. 

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

Javascript benutzt eine Syntax, die C, C++ und Java ähnlich ist: {} umschließen Anweisungsblöcke; Das Semikolon schließt einen Ausdruck ab. Nach einem Zeilenumbruch wird u.U. während der Ausführung automatisch ein Semikolon eingefügt (Regeln dafür). Trotzdem sollte man die Semikola nach einem Ausdruck schreiben und sich nicht auf die Automatik verlassen. Leerzeichen sind unrelevant.

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 an der Stelle, die gerade geladen wird. Deshalb findet man auch oft JavaScript Blöcke am Ende des HTML-Dokuments - denn dannn sind schon alle DOM-Elemente des Dokumentes geladen und verfügbar. Für Codewartung und Wiederverwendung ist es aber besser, sich nicht auf die Einbindungsstelle zu verlassen. Stattdessen kann eine Funktion aufgerufen werden wenn das Dokument geladen ist – mittels 

document.onload=function(){}

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>

Auf Elemente zugreifen

Im Javascript-Code kann auf Elemente im HTML zugegriffen werden: 

<!-- in der HTML Datei-->
<p id="changeMe">Lorem Ipsum</p>
//im Javascript
var domElement = document.getElementById("changeMe");
domElement.style.color = red;

document.getElementById() holt das Element mit der übergebenen Id (hier:"changeMe"). In dem Beispiel ist das das <p>. In der folgenden Zeile wird dann die Schriftfarbe geändert.

Eine ähnliche Funktion ist document.getElementsByTagName(), diese gibt kein Element direkt zurück, sondern ein Array mit allen Elementen, die dieses Tag haben: 

//färbe alle Absätze rot
var domElement = document.getElementsByTagName('p');
for(var i=0; i<domElement.length; i++){
    domElement[i].style.color = red;
}

Mit HTML5 wurden auch neue JavaScript Funktionen eingeführt. Eine der interessantesten ist ein komfortabler (aber im Vergleich zu getElementByID etwas langsamerer) Zugriff auf das DOM über die jQuery-ähnliche Funktion "querySelector()" und "querySelectorAll()" im document-Objekt, die einen CSS-Selektor-String zur Auswahl der Elemente entgegennehmen: 

var domElement = document.querySelector("#changeMe");
domElement.style.color = red;
console.log("Alle divs: " + document.querySelectorAll("div") );

Während querySelector das erste passende Element raussucht und zurückgibt, gibt querySelectorAll alle passenden Elemente in einem Array zurück.

Event-Handler

Mit "Event-Handlern" kann man auf Ereignisse und Benutzeraktionen reagieren. Die Einfachste Möglichkeit ist den Event-Handler direkt ins HTML einzubinden:

HTML und JavaScript: 

<p><a href="#" onclick="alert('Hallo Welt!');">Rufe JavaScript auf</a></p>

Der Event-Handler im Beispiel ist onclick="..."

Besser ist es aber, HTML und Javascript zu trennen, und die Event-Handler im Javscript hinzuzufügen. Dazu holt man sich das Dom-Element, und gibt diesem einen Händler:

In HTML: 

<p id="changeMe">Rufe JavaScript auf</p>

In JavaScript: 

function changeElement(e){
    e.target.style.color="red";
}
// bisherige Variante:
//var domElement = document.getElementById("changeMe");
// besser (moderner und schneller, aber nicht in allen älteren Browsern implementiert)
var domElement = document.querySelector("#changeMe");
domElement.onclick= changeElement;

document.querySelector benutzt CSS Syntax, in diesem Beispiel steht die Raute # bei #changeMe für eine ID (id="changeMe"). Es gibt nur drei Selektortypen in CSS:

  • HTML-Selectoren (p, div, a usw...) vordefiniert
  • Klassen (.myStyle, .warning usw...) freie Benennung
  • IDs (#header, #content, #clickButton, usw...) freie Benennung

Es ist wirklich hilfreich, sich in CSS einzulesen, um damit gut umgehen zu können. Der Vorteil von .querySelector gegenüber .getElementByID ist, dass es bedeutend schneller ist, da nicht das ganze DOM durchsucht werden muss und dass es sehr viel bequemer zu schreiben ist. Außerdem unterstützt .querySelector auch Pseudo-Selektoren und Regular Expressions. .querySelector macht auch den Einsatz von jQuery in 50% aller Fälle überflüssig, da jQuery häufig nur wegen der einfach zu notierenden Syntax $('#changeMe') genutzt wird. Das Gleiche erreicht man mit nativem JavaScript mit document.querySelector('#changeMe')

onClick vs. addEventListener

Das Problem mit .onclick (und allen anderen "on..."-Event-Handlern) ist, dass jedes Element nur einen .onclick-Handler haben kann. Besser ist es .addEventListener("click", changeElement, false) zu verwenden, damit können nämlich beliebig viele Event-Callbacks (Funktionen) registriert werden: 

domElement.addEventListener("click", changeElement, false)

Mit addEventListener können einem Element auch mehrer Funktionen für das selbe Event zugeordnet werden: 

domElement.addEventListener("click", otherFunction, false)

Damit würden jetzt bei einem Klick die Funktionen changeElement und otherFunction aufgeführt werden.

Handler wieder löschen bzw. un-registrieren

Eventhandler kann man in der .on...-syntax durch überschreiben wieder loswerden. Dabei wird nicht die Funktion gelöscht, sondern die "Verbindung" zwischen Event und Funktion. Dieses Verhalten ist nicht immer erwünscht und löst manchmal auch wichtige bestehende Verbindungen (z.B. in einer verwendeten JavaScript-Library), daher sollte prinzipiell die addEventListener Methode verwendet werden. 

domElement.onclick= undefined;

In der addEventListener-Syntax benutzt man removeEventListener mit den selben Argumenten, die im entsprechenden addEventListener genutzt wurden: 

domElement.removeEventListener("click", otherFunction, false)

Das Event-Objekt

Die Event-Handler-Funktion bekommt automatisch als erste Variable ein Event-Objekt übergeben. in der Funktion 

function changeElement(e){
    e.target.style.color="red";
}

ist die Variable "e". Dieses Objekt hat etliche Eigenschaften des Event gespeichert, wie z.B. Position des Mausklicks und das Element auf dem das Event geschah – .target, wie oben genutzt.


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. Ruft man eine Funktion auf, werden die Befehle, aus der sie besteht, ausgeführt. Der Aufruf einer Funktion geschieht durch die runden Klammern: "tuWas()" führt die Funktion "tuWas" aus.

Üblicherweise sollten Funktionen durch ein Verb benannt sein. Z.B. calcSquare(); oder getItem();.

Ein Funktion kann auf verschiedene Weise definiert werden: 

function tuWas(){
    //befehle hier
}

oder sogenannt "anonym": 

var tuWas = function(){
    //befehle hier
};

beide haben den selben Effekt und sind nur andere Schreibweisen, beide Funktionen werden durch 

function tuWas();

ausgeführt.

Funktionen können aber nicht nur einfach ausgeführt werden: Ihre Ausführung kann beeinflusst werden, indem der Funktion "Parameter" oder synonym "Argumente" übergeben werden. Beim Aufrufen schreibt die Argumente mit Kommanta getrennt zwischen die runden Klammern. 

fragen("Jan","Michael");

Bei der Definition der Funktion müssen zwischen die runden Klammern Variablennamen geschrieben werden, die dann die Werte der übergebenen Argumente annehmen. 

var fragen = function(fragt, antwortet) {
    alert(fragt+" sagt: ist heute Webtech?");
    alert(antwortet +" sagt: ja!"
}

In der Funktion gelten also die Variablen "fragt" und "antwortet". Beim Aufrufen werden die Werte den Variablen zugeordnet, also bei "fragen('Jan','Michael');" bekommt der erste Parameter, "fragt", den Wert "Jan", der zweite Parameter, "antwortet", den Wert "Michael", somit bekommt man bei Ausführen von "fragen('Jan','Michael');" zuerst einen Alert mit dem Text "Jan sagt: "Ist heute Webtech" und dann einen mit "Michael sagt: ja!"

Variablen

Um eine Variable zu benutzen, muss man:

  1. Die Variable deklarieren (mit dem Schlüsselwort var): var a;
  2. Der Variablen einen Wert zuweisen, d.h. sie initiieren: a = 1;
  3. 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). Ein Typ ist die "Art" der Daten, die in der Variable gespeichert werden, z.B. Zahlen, Zeichenfolgen ("String") oder RegularExpressions. Bei Javascript muss der Typ nicht angegeben werden (in anderen Sprachen würde man sowas schreiben wie "var Number:myvar = 10")

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

Es ist allerdings keine gute Praxis, den Typ einer Variable zu ändern, da es den Code schlechter lesbar und unverständlich macht.

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. Objekte in Javascript sind einfach zusammengehörige Paare von Namen und Daten (Strings, Zahlen, Funktionen, anderen Objekten) Ein Objekt wird durch geschweifte Klammern begonnen und beendet, Bezeichner und Wert werden durch einen ":" getrennt, Bezeichner- und Werpaare werden durch "," getrennt. 

var objektname = { 
  "name" : "Wert als String",
  "nocheiner" : 12344     
}

auf die Werte in dem Objekt wird über die Punkt-Syntax zugegriffen: Zwischen Objektname und Eigenschaftsname wird ein Punkt geschrieben. 

var einString = objektname.name

Schreibt also den Wert "Wert als String" der Eigenschaft "name" des Objekts "objektName" in die Variable "einString".

Wenn eine Eigenschaft des Objektes selber ein Objekt ist kann die Punktsyntx weiter geschachtelt werden: 

meinObjekt.unterObjekt.wertVonUnterObjekt

Das von anderen Sprachen bekannte Konzept einer "Klasse" gitb es in Javascript nicht. 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.

Diese strikte Trennung existiert in Javscript nicht, Objekte werden intern durch Kopien von bestehenden Objekten erzeugt, wobei es Eigenschaften gibt die "geerbt" werden, also Daten und Funktionen, die von allen neuen Objekten gemeinsam genutzt werden. Dies ist aber ein fortgeschrittenes Thema. Zum Einstieg reicht es aus, das neue Kopien meist mit dem Operator "new" erzeugt werden, eine Konvention übernommen aus anderen Programmiersprachen in denen mittels "new" ein neues Objekt aus einer Klasse erstellt wird.

Z.B. ein neues Objekt myDate aus dem date-Objekt Date erstellt man 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 Option
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.

Zwar nur bedingt für JavaScript gültig, aber trotzdem lehrreich ist in diesem Zusammenhang auch die Seite How to Write Unmaintainable Code.

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 die Web Developer Tools der Webkit-Browser haben richtige Debugger!
  • In vielen Browsern ist es möglich, über console.log("ausgabetext hier") Ausgaben in die Konsole zu schreiben.

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:

Außerdem gibt es noch einige spezielle Projekte (manche basieren auf Teilpaketen der o.g. Frameworks), die auf bestimmte Aufgaben spezialisiert sind:

Weitere Bibliotheken haben sich für die Entwicklung für mobile Endgeräte etabliert:

Ressourcen

JavaScript:

Javascript Advanced:

HTML5 & Canvas:

Misc:



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.

Retrieved from "https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=JavaScript&oldid=62659"