einführung in javascript i musikwissenschaftliches institut hamburg ws 2005/06 klaus frieler
TRANSCRIPT
![Page 1: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/1.jpg)
Einführung in JavaScript I
MusikwissenschaftlichesInstitut Hamburg
WS 2005/06Klaus Frieler
![Page 2: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/2.jpg)
JavaScript IEinfü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
![Page 3: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/3.jpg)
JavaScript IFeatures
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
![Page 4: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/4.jpg)
JavaScript IHTML
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)
![Page 5: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/5.jpg)
JavaScript IHTML
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>
![Page 6: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/6.jpg)
JavaScript IHTML – Seitenaufbau
Eine HTML Seite hat folgenden Aufbau<html>
<head>
<!--Hier z.B. JavaScript, CSS-, Metaangaben, Seitentitel-->
</head>
<body>
<!--Hier die tollen Inhalte-->
<!– So macht man übrigens Kommentare -->
</body>
</html>
![Page 7: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/7.jpg)
JavaScript ICSS
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>
![Page 8: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/8.jpg)
JavaScript IEinbinden 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>
![Page 9: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/9.jpg)
JavaScript IEinbinden von JavaScript - Beispiel
<html>
<head>
<script type="text/javascript">
alert("Dies ist Javascript");
</script>
</head>
<body>
<!– So macht man übrigens dumme Kommentare -->
</body>
</html>
![Page 10: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/10.jpg)
JavaScript IJavascript – Elemente
Variablen (var) Logische und arithmetische Operatoren
(+,-,*,/,<,>,==, !, %, ++, --, &&,…) Verzweigungen (if - else) Schleifen (for, while) Unterprogramme, Funktionen (function) Kommentare (//bla, /*blabla*/)
![Page 11: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/11.jpg)
JavaScript IJavascript – 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)
![Page 12: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/12.jpg)
JavaScript IJavascript – Anweisungen
Eine Anweisung kann sein: Zuweisung zu einer Variablenvar text = "Dies ist eine Anweisung";
var zahl = 5;
Aufruf einer Funktionalert(text);
Ausführung einer Operation (mit Zuweisung)quadratzahl = zahl * zahl;
quadratzahl += 7 * 7;
![Page 13: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/13.jpg)
JavaScript IJavascript – Anweisungen
Eine Anweisung kann sein: Eine Verzweigungif(zahl < 5) zahl = 5;
else zahl += 1;
Eine Schleife (hier mit Anweisungsblock)for(var i = 0; i<=10; +i){
zahl += i;
zahl = zahl * zahl;
}
![Page 14: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/14.jpg)
JavaScript IJavascript – 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;
![Page 15: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/15.jpg)
JavaScript IJavascript – 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
![Page 16: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/16.jpg)
JavaScript INamensvergabe
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.
3. Schleifenvariablen i,j,k…
4. Koordinaten x,y,z,w,h …
![Page 17: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/17.jpg)
JavaScript IOperationen 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
![Page 18: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/18.jpg)
JavaScript IOperationen und Datentypen
Werte können durch Operationen zu neuen Werte verknüpft werden.
1. Mathematische Operatoren: +,-,*,/,%, ++, --, +=, -=
2. Vergleichsoperatoren: <, >, ==, !=, <=, >=
3. Logische Operatoren: &&, ||, !
4. Bit-Operatoren: <<, >>, &, |, ^, ~
5. Stringverknüpfung: +
![Page 19: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/19.jpg)
JavaScript IOperationen 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
![Page 20: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/20.jpg)
JavaScript IOperationen 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)
![Page 21: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/21.jpg)
JavaScript IOperationen und Datentypen
Logische Operatoren (ergeben boolsche Werte) !:Not-Operator
(!true = false) &&:And-Operator
(true && false = false ) ||:Or-Operator
(true || false = true)
![Page 22: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/22.jpg)
JavaScript IOperationen 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
![Page 23: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/23.jpg)
JavaScript IOperationen 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)
![Page 24: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/24.jpg)
JavaScript IProgrammierpraxis
Was braucht man zur JavaScript-Programmierung?
1. Einen Browser mit aktiviertem JavaScript, vorzugsweise Firefox.
2. 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.
![Page 25: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/25.jpg)
JavaScript IProgrammierpraxis
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.
![Page 26: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/26.jpg)
JavaScript IProgrammierpraxis - 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.
![Page 27: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/27.jpg)
JavaScript IProgrammierpraxis - 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…
![Page 28: Einführung in JavaScript I Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler](https://reader036.vdocuments.mx/reader036/viewer/2022062404/55204d6249795902118b76c6/html5/thumbnails/28.jpg)
JavaScript IProgrammierpraxis – 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…