Die Programmiersprache JavaScript - Keepcoding
Werbung
Die Programmiersprache JavaScript
Diese Kurzzusammenfassung bietet keinesfalls einen vollständigen Überblick über JavaScript, sondern nur eine
stichwortartige Zusammentragung von den wichtigsten Befehlen und syntaktischen Elementen von JavaScript. Es gibt
keine eine Garantie auf Korrektheit oder Vollständigkeit. Grundlagenkenntnisse der Programmierung werden
vorausgesetzt. Weitere Informationen zu JS – unter anderem auch sehr gute Tutorials – gibt es in den am Ende dieses
Dokuments aufgelisteten Homepages.
Hinweis: Fett markierte Ausdrücke stellen Schlüsselwörter resp. vordefinierte Funktionen oder Objekte dar.
Grundlegendes
JavaScript ist eine clientseitige objektorientierte Skriptsprache, die hauptsächlich dazu verwendet wird, htmlSeiten interaktiv zu machen. Trotz des ähnlichen Namens hat JavaScript bis auf ein paar syntaktische und
stilistische Dinge nicht viel mit Java gemeinsam. JavaScript ist also eine komplett selbstständige Sprache.
Häufige Einsatzgebiete von JavaScript: Aufbau und Style (Formatierungen) der Seite anpassen, dynamische
Elemente integrieren (etwa eine Uhr), auf Eingaben seitens des Benutzers reagieren, Formulare überprüfen und
Navigationselemente für die Website erstellen.
JS wird Zeile für Zeile interpretiert, so wie eine html-Seite vom Browser geladen wird; deshalb sollten Variablenund Funktionsdeklarationen resp. -Definitionen im <head>-Tag untergebracht werden.
Es gibt grundsätzlich drei Möglichkeiten, JavaScript in ein html-Dokument zu integrieren:
1. JS-Code innerhalb eines <script>-Tags irgendwo im Dokument oder im <head>-Tag:
<script type="text/javascript">
document.write('Hello World');
</script>
2. Über den Event Handler:
<input type="button" value="test" onclick="myFunc('test')" />
3.
Der Event-Handler ermöglicht es, gewisse Funktionen erst dann aufzurufen, wenn der Benutzer eine Aktion
ausführt (etwa ein Mausklick).
Über gelinkte Skripts (Die Funktionen werden in einer externen Datei definiert):
<script type="text/javascript" src="js/test.js"></script>
Vorteil: Damit kann von mehreren html-Seiten aus auf die Funktionen zugegriffen werden, ohne dass man
den Code jedesmal neu schreiben muss. Ausserdem kann der Browser js-Files cachen (muss den Code nicht
jedes Mal neu laden) und sie bieten mehr Übersicht, da der Code vom Inhalt getrennt wird!
Syntax: JavaScript ist case sensitive. Befehle werden mit einem Semikolon abgeschlossen, Kommentare mit //
oder /* */ eingeleitet.
Variablen müssen nicht explizit deklariert werden (var x = 5 bedeutet dasselbe wie x = 5).
Verkürzte Operatoren sind erlaubt, ebenso alle üblichen mathematischen Operatoren.
Der Operator === meint identisch (exakt gleich), d.h. Wert und Typ stimmen überein.
Der +-Operator kann zur Konkatenation von Strings verwendet werden.
Wird eine Zahl zu einem String addiert (oder umgekehrt), ist das Ergebnis immer ein String sein.
Variable eines bestimmten Datentyps erstellen:
var test = new Boolean();
Arrays definieren:
var farben = new Array("rot", "grün", "blau");
var farben = new Array();
farben[0] = "rot";
// mehrere Varianten sind möglich
Funktionen definieren:
function myFunc(param1) { return "hello world"; }
Befehle
Kontrollstrukturen:
if, else, else if, switch case default, while, do while, for, for in (alle Elemente eines Arrays
durchgehen), continue, break
Nachrichten:
Die Programmiersprache JavaScript | 1
alert('Hello World');
if (confirm("Continue?")) { … }
prompt("Enter your name", "Max Muster");
// eine Info-Message-Box
// eine Frage-Message-Box
// Benutzereingabe-Message-Box
Textausgabe:
document.write('Hello World');
Methoden von Variablen:
var txt = "Hello World";
txt.length;
txt.toUpperCase();
// Länge des Strings
// in Grossbuchstaben konvertieren
Datums- und Zeitfunktionen (Auswahl):
var txt = new Date();
txt.getTime();
txt.toUTCString();
txt.setFullYear(2008, 3, 18);
txt.getDay();
// Datumsvariable erstellen
// Millisekunden seit 1970
// konvertiert txt in die UTC-Zeit
// setzt das Datum
// Wochentag als String
Code automatisch immer wieder ausführen lassen:
id = setTimeout("test()", 500ms);
setInterval("test()", 200);
clearTimeout(id);
// alle 500ms test() aufrufen
// Intervall neu setzen
// Timer mit der ID “id” löschen
Arrays:
test.sort();
test.join(".");
test.concat(test2);
// sortiert das Array test
// verbindet Arrayelemente zu einem String
// verbindet die beiden Arrays
Es sind einige mathematische Konstanten vordefiniert, z.B.:
Math.PI
Math.round(value);
Math.random();
// Zufallszahl zwischen 0 und 1
Regular expressions (RegEx):
var patt1 = new RegExp("t", "g");
if (patt1.test("test"))
{ alert(patt1.exec("test")); }
patt1.compile("d");
// g für global
// Suchergebnis ausgeben
// RegEx anpassen
Hinweis: Wenn ‚t‘ nicht gefunden wird, liefert patt1.exec() null zurück.
Objekt definieren:
personObj = new Object();
personObj.firstname = "Max";
personObj.lastname = "Muster";
personObj.age = 50;
function person(firstname, lastname, age)
{
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
}
var test = new person("max", "muster", 32);
// Objekt erzeugen
Event-Handler (Auswahl):
onsubmit
onclick
onload
unload
onfocus
onchange
onmouseover
onmouseout
onDblClick
// Konstruktor
// vor dem Absenden eines Formulars
// beim Klick auf einen Button
// beim Laden der Seite
// beim schliessen der Seite
// Formularfeld hat Fokus erhalten)
// wenn Eingabe geändert hat
// wenn der Mauscursor über einem Element ist
// wenn der Mauscursor ein Element verlässt
// wenn ein Doppelklick ausgeführt wurde
Weitere Events für das <head>-Tag:
document.onmousedown
document.onkeydown
location.pathname
// wenn eine Maustaste gedrückt wurde
// wenn eine Taste gedrückt wurde
// Pfad und Name der Datei
Die Programmiersprache JavaScript | 2
Vordefinierte (Standard-)Objekte:
Window
Navigator
Screen
Location
History
Document
// html DOM-Objekt
Error Handling:
try
{
// code to be tested
throw "Err1";
// Fehlermeldung manuell auslösen
} catch(err)
{
if(err == "Err1")
…;
else
alert("There was an error.\n\nDescription: " + err.description);
}
Tipps und Hinweise
onsubmit meint dasselbe wie onSubmit (ausnahmsweise nicht case sensitive)
Escape-Sequenzen:
Browser, die Javascript nicht unterstützen, zeigen den Quellcode einfach als Inhalt an. Um dies zu vermeiden,
sollte der JavaScript-Code in HTML-Kommentartags gesetzt werden: <!-- your code //-->
Die beiden Slashes vor der schliessenden Klammer sorgen dafür, dass JavaScript seinerseits den Befehl --> als
Kommentar betrachtet.
\t \" \n \r
&amp; &lt;
\\
\&
\'
// oder die Zeichencodes verwenden
Zeilenumbrüche werden vom Interpreter automatisch in ein Semikolon umgewandelt, d.h. ein Semikolon ist nicht
unbedingt notwendig.
Ein String kann durch einen Backslash und ein Return unterbrochen und auf der nächsten Zeile fortgesetzt
werden.
Eine einzeilige if-Anweisung muss nicht explizit mit Klammern als Block markiert werden.
Die Fehlerbehandlung mittels try und catch ist wichtig, da der User sonst eine evtl. unverständliche
Fehlermeldung in Form einer Alert-Box zu sehen bekommt, was ihn vermutlich dazu veranlassen wird, die Page zu
verlassen.
DHTML ist eine Kombination aus html, css und JavaScript, um dynamische Websites zu erstellen. DHTML setzt ein
„well formed“ html-Dokument voraus und auch die Doctype-Definition darf nicht fehlen. Die html-Seiten können
unter folgendem Link validiert (auf Wohlgeformtheit überprüft) werden: http://validator.w3.org/
Document Object Model (DOM): Plattform- und sprachunabhängiges Interface für Zugriff und Änderung von
Inhalt, Struktur und Formatierung eines Dokuments.
Active Server Pages (ASP): ASP ist eine von Microsoft entwickelte Skriptsprache, die aber im Gegensatz zu
JavaScript auf dem Server ausgeführt wird.
Quellen und weiterführende Literatur
http://www.w3schools.com/JS/default.asp
http://www.echoecho.com/javascript.htm
http://www.onlinetutorials.de/jsc-index.htm
http://www.selfhtml.org
http://validator.w3.org/
Version 1.0, 2009-04-22
© 2009 by Reto Da Forno | www.kcdev.ch.vu
Die Programmiersprache JavaScript | 3