Kurzeinführung JavaScript, DOM und Canvas

Kurzeinführung
JavaScript, DOM und Canvas
Mediendesign
1
Was ist HTML5 ?
 HTML5 wird zunächst von der WHATWG, einer Gruppe von Browserherstellern,
entwickelt
 ab 2006 wieder beim W3C
 HTML5 basiert auf verschiedenen Standards
 XHTML
 CSS3
 JavaScript
browserinterne Programmiersprache
 DOM: Document Object Model
Repräsentation des XHTML Dokuments im Browser
Mediendesign
2
JavaScript
 JavaScipt ist eine imperative (objektorientierte) Programmiersprache
 Schlüsselwörte, Variablen, Prozeduren, Kontrollstrukturen,
Schleifen
 dynamische, schwache Typisierung
 Skriptsprache
 Standardisiert als ECMA-Script
 Syntaktisch orientiert sie sich an C
 damit leicht zu erlernen, auch für Java-Anfänger
Mediendesign
3
Laufzeitumgebung
 JavaScript wird interpretiert, also nicht compiliert
 Das Programm wird syntaktisch analysiert (geparst), in eine interne
Repräsentation überführt und dann direkt ausgewertet (evaluiert)
 Der Interpreter ist in den Browser eingebettet
 Sandbox
 Ein JavaScript-Programm wird also durch eine HTML5-Seite „geladen“
Mediendesign
4
Einbindung in XHTML
[http://www.webdesign-referenz.de/html_javascript.shtml#4.5.2]
Mediendesign
5
Einbindung in XHTML
Mediendesign
6
Dynamische Erzeugung von XHTML
 Über JavaScript kann das geladene Dokument dynamisch
verändert werden
document.write("Hallo User!");
document.write(321);
document.write("Verwendung eines HTML-Tags:
<br><br><br>");
Mediendesign
7
Variablen
 Variablen sollten deklariert und initialisiert werden
 Sie können beliebige Werte aus dem Wertebereich tragen
var meine_variable = "text ";
document.write(meine_variable);
meine_variable = "anderer Text ";
document.write(meine_variable);
Mediendesign
8
Ausdrücke und Kontrollstrukturen
 Bei der Auswertung von Bedingungen verhält sich JavaScript wie
C
 jeder von 0 verschiedene Wert wird als true interpretiert
if ("abc"){
// wird ausgeführt
}
if (1){
}
// wird ausgeführt
var a = "abc";
if (a){
// wird ausgeführt
}
Mediendesign
9
Funktionen
 Funktionen werden deklariert
 Formale Parameter müssen benannt werden, jedoch nicht
notwendigerweise eine Typdeklaration aufweisen
 Der Rückgabetyp wird nicht festgelegt
document.write(multipliziere(1,2,3));
function multipliziere(z1, z2, z3) {
return z1*z2*z3;
}
Mediendesign
10
Einschub: DOM-Document Object Model
Mediendesign
11
DOM: Document Object Model
 Das DOM (Document Object Model) definiert Schnittstelle,
welche den Zugriff auf Elemente und Attribute eines HTML-/XMLDokumentes ermöglicht.
 DOM Level 0 – DOM Level 3
 unabhängig von der Programmiersprache
 realisiert in nahezu allen modernen Programmiersprachen
Java, C#, Perl, Python, Ruby und
JavaScript
Mediendesign
12
Beispiel: Baumrepräsentation
Mediendesign
13
DOM-Inspector
 Der DOM-Inspector ist eine
Erweiterung des Firefox, der es
ermöglicht, den DOM-Tree der
geladenen Seite zu visualisieren
und zu inspizieren.
Mediendesign
14
Und weiter mit JavaScript
Mediendesign
15
Zugriff über das DOM
 JavaScript hat das DOM-API implementiert
 Erlaubt so den Zugriff auf Teile des Dokuments, z.B. mit
 document.getElementById(id)
 document.getElementsByName(name)
 document.getElementsByTagName(tagname)
[http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name]
Mediendesign
16
Beispiel: Zugriff per DOM
[http://www.webdesign-referenz.de/examples/77.html]
Mediendesign
17
Canvas
 <canvas>
 Ist ein 2D-Element, das vollständig über JavaScript kontrolliert
wird
 Es kann für die Visualisierung von Graphen, Spielen,
Präsentationen genutzt werden.
 Durch die Steuerung mit JavaScript wird es möglich, die
Interaktion genauer zu kontrollieren
Mediendesign
18
Canvas - API
 Eine unvollständige Liste der CanvasFunktionen.
 moveTo(x, y)
 lineTo(x, y)
 stroke()
 lineWidth
 lineCap
 strokeRect(x, y, width, height)
 lineJoin
 fillRect(x, y, width, height)
 scale(x, y)
 beginPath()
 rotate(a)
 closePath()
 save()
 restore()
●
●
arc(x, y, radius, startAngle, endAngle,
anticlockwise)
 translate(x, y)
 transform(m11, m12, m21, m22, dx, dy)
 setTransform(m11, m12, m21, m22, dx, dy)
fill()
Mediendesign
19
Canvas - Beispiele
 Beispiele:
 http://www.craftymind.com/factory/html5video/CanvasVideo.html
 http://9elements.com/io/projects/html5/canvas/
 http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas
 http://www.w3schools.com/html5/html5_reference.asp
Mediendesign
20