Javascript I

Einführung in JavaScript I
Musikwissenschaftliches
Institut Hamburg
WS 2005/06
Klaus Frieler
JavaScript I
Einführung





JavaScript wurde 1995 von Netscape als Scriptsprache
eingeführt. (ECMA-Script)
Zur Zeit gültige Version 1.5 mit DOM 1.0, nicht alle
Browser unterstützen immer alles!
Hat nichts zu tun mit Java!
Ist gedacht als Skriptsprache für Browser zur
Unterstützung/als Ergänzung von HTML
Aus Sicherheitsgründen eingeschränkte Funktionalität,
vor allem keine Dateioperationen
JavaScript I
Features






Syntaktisch sehr ähnlich zu Java, C, C++
Nicht streng typisiert.
Prozedural, schwach objektorientiert.
Zahlreiche vordefinierte Funktionalität
Interpretersprache: Der Browser ist der Interpreter
Lebt vor allem und gerne in HTML-Seiten
JavaScript I
HTML




Um JavaScript programmieren zu können muss man
ein paar Grundlagen von HTML beherrschen
HTML: HyperTextMarkupLanguage
Keine Programmiersprache sondern
Dokumentenauszeichnungssprache mit HyperText
(„Links“) funktionalität
Basis des WWW, erfunden von Tim Berne am CERN,
basierend auf SGML
(StandardGeneralizedMarkupLanguage)
JavaScript I
HTML


Heutige Webseiten bestehen aus HTML, dass durch
JavaScript und CSS erweitert wird.
Grundelemente von HTML sind die Tags, d.h.
Schlüsselworte in spitzen Klammern:
<table></table>


Es gibt Start- und Endtags. Prinzipiell muss jedes
Starttag durch ein Endtag begleitet sein, in Praxi nicht
der Fall. Formal geht dies auch immer durch <tag/>
Jeder Tag kann durch Attribute näher erläutert
werden, z.B.
<a href="http://www.mu-on.org" target="_blank">Link</a>
JavaScript I
HTML – Seitenaufbau
Eine HTML Seite hat folgenden Aufbau
<html>
<head>

</head>
<body>

<!– So macht man übrigens Kommentare -->
</body>
</html>
JavaScript I
CSS




CSS = Cascading Style Sheets
Spache zur Definition von Darstelllungformaten
Z.B. Schriftgröße und - farbe, Positionierung,
Hintergrundfarben etc.
Formate können zentral oder lokal im „style“-Attribut
definiert werden. Z.B.:
<div style="color:#ffffff; text-align:center;">
Hallo Welt
</div>
JavaScript I
Einbinden von JavaScript in HTML



Kann prinzipiell überall in der Datei zwischen den
<html>-Tags stehen
Browser bearbeitet JavaScript in der Reihenfolge
seines „Erscheinens“
JavaScript muss umgeben sein von
<script type="text/javascript">
alert("Dies ist ein Beispiel-Javascript");
</script>

Externes JavaScript-Dateien fügt man ein durch
<script type="text/javascript"
src="myScript.js"></script>
JavaScript I
Einbinden von JavaScript - Beispiel
<html>
<head>
<script type="text/javascript">
alert("Dies ist Javascript");
</script>
</head>
<body>
<!– So macht man übrigens dumme Kommentare -->
</body>
</html>
JavaScript I
Javascript – Elemente






Variablen (var)
Logische und arithmetische Operatoren (+,,*,/,<,>,==, !, %, ++, --, &&,…)
Verzweigungen (if - else)
Schleifen (for, while)
Unterprogramme, Funktionen (function)
Kommentare (//bla, /*blabla*/)
JavaScript I
Javascript – Aufbau




Ein JavaScript besteht aus einer Folge von
Anweisungen die der Browser nacheinander ausführt.
Ausnahme: Anweisungen in Funktionen, sie werden
erst bei Funktionsaufruf ausgeführt
Anweisungen werden durch ein Semikolon
beendet/getrennt.
Anweisungen können zwischen geschweiften
Klammern zu Anweisungsblöcken zusammengefasst
werden. (Dann kein Semikolon)
JavaScript I
Javascript – Anweisungen

Eine Anweisung kann sein:
 Zuweisung zu einer Variablen
var text = "Dies ist eine Anweisung";
var zahl = 5;

Aufruf einer Funktion
alert(text);

Ausführung einer Operation (mit Zuweisung)
quadratzahl = zahl * zahl;
quadratzahl += 7 * 7;
JavaScript I
Javascript – Anweisungen

Eine Anweisung kann sein:
 Eine Verzweigung
if(zahl < 5) zahl = 5;
else zahl += 1;

Eine Schleife (hier mit Anweisungsblock)
for(var i = 0; i<=10; +i){
zahl += i;
zahl = zahl * zahl;
}
JavaScript I
Javascript – Variablen


Variablen sind Namen für Speicherplätze
Lokale und globale Variablen.





Eine lokale Variable gilt nur innerhalb von der Funktionen in der
sie definiert wird.
Globale Variablen gelten überall.
Schlüsselwort für lokale Variablen: var
Wird das Schüsselwort weggelassen ist die Variable
automatisch global. (Achtung Falle.)
Deklaration auch mehrere auf einmal und mit
Initialisierung:
var myVar1 = "moin", my_var2 = 0;
JavaScript I
Javascript – Variablennamen

Variablennamen können freivergeben werden mit
folgenden Einschränkungen:





sie dürfen keine Leerzeichen enthalten
sie dürfen nur aus Buchstaben und Ziffern und dem Unterstrich
"_" bestehen - das erste Zeichen muss ein Buchstabe sein; es
sind Groß- und Kleinbuchstaben erlaubt. Groß- und
Kleinschreibung werden unterschieden!
sie dürfen keine deutschen Umlaute oder scharfes S enthalten
sie dürfen nicht mit einem reservierten Wort identisch sein.
Beispiele:


Gültig: Hallo, moin, klaus1, klaus_und_klaus
Ungültig: 1Hallo, mo?in, klÄuß, klaus und klaus
JavaScript I
Namensvergabe
Gute Variablennamen sind essentiell für Lesbar- und
Verständlichkeit des Codes.
Fastregel: Lieber zu ausführlich als zu kurz. Desto
wichtiger desto sprechender.
Ich bevorzuge folgende Konevention:



1.
Wie bei Java. Zusammengesetzte Namen: Erster Buchstabe
klein, Anfänge neuer Worte groß: function
myFunction(){}
2.
Alles in English.
Schleifenvariablen i,j,k…
Koordinaten x,y,z,w,h …
3.
4.
JavaScript I
Operationen und Datentypen

JavaScript ist nur lose typisiert, d.h. eine Variable kann
jeden beliebigen Wert annehmen:








Boolean: true, false
Ganz oder Gleitkommazahl : 5, 16384, 5.6, 7e12
Zeichenkette (String): "Code"
Funktion
Objekt: document, window
Undefined
JavaScript nimmt Umwandlungen wenn möglich
automatisch vor. (via Strings)
Allerdings lassen unterschidelich Typen
unterschiedliche Operationen zu
JavaScript I
Operationen und Datentypen

Werte können durch Operationen zu neuen
Werte verknüpft werden.
1.
2.
3.
4.
5.
Mathematische Operatoren: +,-,*,/,%, ++, -, +=, -=
Vergleichsoperatoren: <, >, ==, !=, <=, >=
Logische Operatoren: &&, ||, !
Bit-Operatoren: <<, >>, &, |, ^, ~
Stringverknüpfung: +
JavaScript I
Operationen und Datentypen

Mathematische Operatoren (ergeben Zahlen):


Addition/Subtraktion: +,-,
Multiplikation, Division, Modulo: *,/,%
Es gilt Punktrechnung vor Strichrechnung:
a = (1+2*3%4)/2-3 = (1+6%4)/2–3 = (1+2)/2–3 =
3/2-3 = 1.5–2 = -0.5
b = 1 + 2 * (3 % 4)/(2-3) = 1+2*3/(-1)= 1+6/(-1)
= 1-6 = -5


In/Dekrement: a++;  a=a+1; a--;  a=a-1;
Operator+Zuweisung: a+=b;  a=a+b; a-=b; 
a=a-b; a*=b;  a=a*b, a/=b;  a=a/b
JavaScript I
Operationen und Datentypen

Vergleichsoperatoren ergeben logische
(boolsche) Werte




== gleich (3==3 ist true)
!= ungleich (3!=3 ist false)
<,<= kleiner, kleiner-gleich (3<4 ist true)
>,>= größer, größer-gleich (3>4 ist false)
JavaScript I
Operationen und Datentypen

Logische Operatoren (ergeben boolsche Werte)



!:Not-Operator
(!true = false)
&&:And-Operator
(true && false = false )
||:Or-Operator
(true || false = true)
JavaScript I
Operationen und Datentypen
Bit-Operatoren (ergeben Zahlen), wirken auf die
einzelnen Bits einer Zahl
 << Links-Shift: Schiebt alle Bits eine Stelle nach Links,
entspricht Multiplikation mit 2
 >> Links-Shift: Schiebt alle Bits eine Stelle nach
Rechts, entspricht Ganzzahl-Division durch 2
 & Bit-And: Verknüpft alle Bits stellenweise mit „And“




| Bit-Or: Verknüpft alle Bits stellenweise mit „Or“
^ Bit-Xor: Verknüpft alle Bits stellenweise mit „Xor“
~ Bit-Not: Invertiert stellenweise alle Bits
JavaScript I
Operationen und Datentypen

Stringverknüfung mit +:
Hängt zwei Strings aneinander.
 Z.B.
a = "moin";
b = "moin";
c = a + b  c == "moinmoin„


Weitere Stringoperationen mit vordefinierten
Funktionen (vgl. JavaScript II-III)
JavaScript I
Programmierpraxis

Was braucht man zur JavaScriptProgrammierung?
1.
2.
Einen Browser mit aktiviertem JavaScript,
vorzugsweise Firefox.
Einen ASCII-Editor um HTML-Seiten mit JavaScript
zu erstellen. Vorzugsweise komfortbale
Texteditoren wie Ultraedit oder Emacs.
Notepad/SimpleText/Kwrite reicht auch aus.
Textverarbeitungsprogramme gehen nicht , Word
ist GANZ schlecht (hierfür und sowieso). Alternativ
spezielle HTML-Editoren (z.B. Homesite). Guter
freier HTML-Editor ist NVU, den es für alle
Betriebssysteme gibt.
JavaScript I
Programmierpraxis



HTML-Datei erzeugen (mit Endung .htm oder .html,
speichern) und im Browser anschauen (z.B. per
Drag-und-Drop reinziehen oder Doppelklick auf die
Datei)
A-und-O der Programmierung: Testen und
Debuggen (entwanzen), d.h. das Ausmerzen von
Fehlern.
Skriptsprachen prinzipiell schlechter zu Debuggen.

JavaScript I
Programmierpraxis - Debuggen




Debuggen von Javascript ist manchmal mühselig, denn
viele Browser gehen stillschweigend über Fehler
hinweg, es passiert nur nichts…
IE zeigt Fehler in einer Box, oft nur mangelnd
aussagekräftig.
Firefox bietet JavaScript-Konsole (unter Extras) mit
brauchbaren Angaben. U.a. Art und Typ des Fehlers
und Zeile im Quelltext, wo der Fehler aufgetreten ist.
Alternativ kann man Testausgaben einbauen um sich
z.B . Variablenzwischenwerte anzuschauen.
JavaScript I
Programmierpraxis - Debuggen





Testausgaben mit Javascript nicht komfortabel.
Eine Möglichkeit: alert(text); bringt eine Box hoch mit
dem Wert von „text“ als Inhalt. (Problematisch in
Schleifen, aber einfach)
Andere Möglichkeit: document.write(text), schreibt aber
unkontrolliert im HTML rum.
Most fancy: Man definiert ein Bereich für Testausgaben
und ändert den Inhalt über die Eigenschaft „innerHTML“
Wir werden die RMA „JS-DIE“ benutzen…
JavaScript I
Programmierpraxis – RMA JS-IDE






Herunterladen der JS-DIE (JavaScript Integrated
Development Environment):
http://www.mu-on.org/RMA/js-ide.zip
Projektverzeichnis anlegen und JS-IDE dahin
entpacken.
js-ide.html im Browser öffnen.
Beispiele und Aufgaben studieren.
Aufgaben1-3.html im Editor öffnen und bearbeiten.
Fertige HTML-Dateien an mich schicken…