mNo edit summary |
(added: eloquent javascript) |
||
| Line 35: | Line 35: | ||
Javascript kann mit den | Javascript kann mit den | ||
<nowiki><script></script></nowiki> | |||
<nowiki><script></script></nowiki> Tags eingebunden werden. Üblicherweise geschieht das im Head-Bereich, kann aber prinzipiell auch im Body erscheinen (s.oben). | |||
<source lang="HTML4Strict" start="9"> | <source lang="HTML4Strict" start="9"> | ||
| Line 187: | Line 190: | ||
* [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] | * [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 der 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://jquery.com/ JQuery] - Lightweight & powerful JavaScript Framework | * [http://jquery.com/ JQuery] - Lightweight & powerful JavaScript Framework | ||
| Line 197: | Line 201: | ||
{{Template:Webprogramming}} | {{Template:Webprogramming}} | ||
[[Category:Programmiersprachen]] | |||
[[Category:Javascript]] | |||
[[Category:Webdesign]] | |||
[[Category:Programmiersprachen]] | |||
[[Category:Javascript]] | |||
[[Category:Webdesign]] | |||
Revision as of 20:20, 16 April 2010
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>
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>
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 hier erwähnt, dass Funktionen weitere Funktionen enthalten können; diese bezeichnet man dann als Methoden.
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;
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).
Sichtbar wird dies an folgendem Beispiel:
var a = 5;
var b = 4;
var c = a + b;
// c hat den Wert der Zahl 9ein 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"!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 new MyClass() eine Instanz einer Klasse erstellt wurde, spricht man von einem Objekt.
Vereinfacht heißt das: Ein Objekt existiert (im Speicher des Rechners), eine Klasse existiert nicht (bzw. nur virtuell als Quellcode = 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
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!
Ressourcen
- 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 der Javascript selbst und wenig mit DOM, also der direkten Veränderung von Websites.
- WikiBooks: JavaScript
- JQuery - Lightweight & powerful JavaScript Framework
- script.aculo.us - The Web 2.0 JavaScript Framework
- hotscripts.org
- Zen-Coding - Text-Expander for HTML/CSS
- 14 JQuery and CSS Demos I wish I knew before
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.