LSoM Slides - Decks by Sebastian Tramp

Clientseitige
Skriptprogrammierung
Norman Heino / Sebastian Tramp
Überblick
• JavaScript
• Document Object Model (DOM)
• Ajax
• jQuery
2
Vorteile
• Entlastung des Servers
• Formularfehler können vor dem
Senden bemerkt werden
• Einfacher Dokumentzugriff über DOM
3
Nachteile
• Client potentiell unsicher
• Moglichkeit von XSS-Attacken
• Benutzer kann Skripte
kompromittieren
4
JavaScript
Geschichte von JavaScript
• 1995 – Netscape Navigator 2.0 mit
• Mocha/LiveScript
• 1995 – Umbenennung in JavaScript
• 1998 – Standardisierung (ECMA-262)
• 2000 – ECMA-262 3 Edition
rd
6
JavaScript – Einsatzgebiete
• DOM-Skripte, Browserskripte
• Ajax
• Datenbanken (MongoDB)
• Serverprogrammierung (Node.js)
• Lingua franca des Webs
7
JavaScript – Eigenschaften
• dynamisch typisiert
• objektbasiert
• keine Klassen
• funktional
• prototypische Vererbung
8
JavaScript & HTML
• Skripte müssen in HTML eingebettet
oder eingebunden werden
<script
<script type="text/javascript">
type="text/javascript">
/*
/* JavaScript-Code
JavaScript-Code */
*/
</script>
</script>
<script
<script type="text/javascript"
type="text/javascript" src="/script.js"></script>
src="/script.js"></script>
9
JavaScript – Kommentare
• einzeilig
//
// Dies
Dies ist
ist ein
ein einzeiliger
einzeiliger Kommentar
Kommentar
• mehrzeilig
/*
/* Dies
Dies ist
ist ein
ein Kommentar,
Kommentar, der
der über
über
mehrere
mehrere Zeilen
Zeilen geht
geht */
*/
10
JavaScript – Beispiele
//
// Variablen
Variablen
var
var anzahl
anzahl == 5,
5, text
text == 'Hallo
'Hallo Welt';
Welt';
//
// Funktion
Funktion
function
function hallo(name)
hallo(name) {{
alert('Hallo,
alert('Hallo, '' ++ name);
name);
}}
//
// Array
Array
var
var array
array == [1,
[1, 2,
2, 3,
3, 4,
4, 5,
5, 6];
6];
//
// Objekt
Objekt
var
var objekt
objekt == {{
name:
name: 'Norman
'Norman Heino',
Heino',
email:
email: '[email protected]'
'[email protected]'
}}
//
// Objektzugriff
Objektzugriff
alert(objekt.name);
alert(objekt.name);
alert(objekt['email']);
alert(objekt['email']);
11
JavaScript – Beispiele (2)
//
// Schleife
Schleife für
für Arrays
Arrays
for
for (var
(var ii == 0;
0; ii << array.length;
array.length; i++)
i++) {{
alert(Math.pow(2,
alert(Math.pow(2, array[i]));
array[i]));
}}
//
// Schleife
Schleife für
für
for
for (var
(var key
key in
in
alert(key
alert(key ++
}}
Objekte
Objekte
object)
object) {{
':
': '' ++ object[key]);
object[key]);
//
// Schleifen
Schleifen für
für Boole'sche
Boole'sche Bedingung
Bedingung
while
while (/*
(/* Bedingung
Bedingung */)
*/) {{
/*
/* Anweisungen
Anweisungen */
*/
};
};
do
do {{
/*
/* Anweisungen
Anweisungen */
*/
}} while
while (/*
(/* Bedingung
Bedingung */);
*/);
12
JavaScript – Eigenschaften (2)
• Variablen sind nicht typisiert (nur
Werte)
• Funktionen können in Variablen
gespeichert und als Parameter
übergeben werden
• Objektattribute können beliebige
Werte besitzen (auch Funktionen)
13
JavaScript + HTML (2)
• Verbindung zwischen HTML und
JavaScript über Ereignisse (events)
• HTML-Elemente können mit
Ereignishandlern assoziiert werden
<script
<script type="text/javascript">
type="text/javascript">
function
function sagHallo()
sagHallo() {{
alert('Hallo');
alert('Hallo');
}}
</script>
</script>
<button
<button onclick="sagHallo()">Hallo</button>
onclick="sagHallo()">Hallo</button>
14
JavaScript – Sprachobjekte
• String – Zeichenketten
• Number – Zahlen (Ganz- und Dezimal-)
• RegExp – Reguläre Ausrücke
• Array – Felder
• Math – Mathematikfunktionen
• Date – Datumsfunktionen
http://de.selfhtml.org/javascript/objekte/index.htm
15
JavaScript – Beispiele (String)
var
var text
text == 'Dies
'Dies ist
ist ein
ein Text,
Text, den
den wir
wir gleich
gleich durchsuchen
durchsuchen werden.';
werden.';
var
var
var
var
position1
position1 == text.search('gleich');
text.search('gleich');
position2
position2 == text.search('später');
text.search('später');
alert(position1);
alert(position1);
alert(position2);
alert(position2);
//
//
//
//
27
27
-1
-1
alert(text.substr(0,
alert(text.substr(0, 8));
8));
alert(text.substring(13,
alert(text.substring(13, 23));
23));
//
//
//
//
'Dies
'Dies ist'
ist'
'Text,
'Text, den'
den'
//
// Text
Text an
an Zeichen
Zeichen auftrennen
auftrennen
alert('Text
alert('Text enthält
enthält '' ++ (split(',').length
(split(',').length -- 1)
1) ++ '' Kommata.');
Kommata.');
http://de.selfhtml.org/javascript/objekte/string.htm
16
JavaScript – Beispiele (Array)
var
var array
array == ['ist',
['ist', 'ein'];
'ein'];
array.push('Array');
array.push('Array');
array.unshift('Dies');
array.unshift('Dies');
//
//
//
//
['ist',
['ist', 'ein',
'ein', 'Array']
'Array']
['Dies',
['Dies', 'ist',
'ist', 'ein',
'ein', 'Array'];
'Array'];
var
var join
join == array.join('
array.join(' ');
');
alert(join);
alert(join); //
// 'Dies
'Dies ist
ist ein
ein Array'
Array'
http://de.selfhtml.org/javascript/objekte/array.htm
17
JavaScript – Beispiele (Math)
var
var
var
var
zahl1
zahl1
zahl2
zahl2
==
==
1.23456;
1.23456;
5;
5;
alert(Math.max(zahl1,
alert(Math.max(zahl1, zahl2));
zahl2));
alert(Math.min(zahl1,
alert(Math.min(zahl1, zahl2));
zahl2));
alert(Math.round(zahl1));
alert(Math.round(zahl1));
//
//
//
//
//
//
55
1.23456
1.23456
11
alert(Math.random());
alert(Math.random()); //
// "zufällige"
"zufällige" Zahl
Zahl zwischen
zwischen 00 und
und 11
http://de.selfhtml.org/javascript/objekte/math.htm
18
JavaScript – Beispiele (Date)
var
var jetzt
jetzt == new
new Date();
Date();
alert(jetzt.getFullYear());
alert(jetzt.getFullYear());
alert(jetzt.getMonth());
alert(jetzt.getMonth());
alert(jetzt.getDate());
alert(jetzt.getDate());
alert(jetzt.getDay());
alert(jetzt.getDay());
//
//
//
//
//
//
//
//
2010
2010
12
12
10
10
55
http://de.selfhtml.org/javascript/objekte/date.htm
19
JavaScript – Browserobjekte
• window – Fensterobjekt (globales
Objekt)
• document – Document (HTML-Seite)
• forms – Formulare
• plugins – installierte Plugins (z. B.
Flash)
20
DOM – Document
Object Model
DOM – Geschichte
• 1997 – DHTML erlaubt Änderungen an
HTML-Dokument (browserspezifisch!)
• 1998 – DOM Level 1
• 2000 – DOM Level 2 (getElementById,
events)
• 2004 – DOM Level 3 (XPath)
22
DOM – Einführung
• API (application programming
interface)
• Zugriff auf Elemente von HTML- und
XML-Dokumenten über Baumstruktur
• Definiert Methoden für Elementzugriff
23
DOM – Beispiel
<table id="person_table">
<thead>
<tr>
<th>Vorname</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="first">
<td>Donald</td>
<td>Duck</td>
</tr>
</tbody>
</table>
http://de.wikipedia.org/wiki/Document_Object_Model
24
DOM – Traversierung
25
DOM – Knotenarten
• Dokument
• Dokumentfragment
• Elementknoten
• Attributknoten
• Textknoten (Inhalt v. Element- oder
Attributknoten)
26
DOM – Nachteile
• gesamtes Dokument muss im Speicher
gehalten werden
• Zugriff über CSS-Klasse nicht möglich
‣ Durch Frameworks (jQuery) verbessert
27
Ajax
Ajax – Begriff
• ursprünglich: AJAX – Asynchronous
JavaScript and XML
• heute: Ajax – asynchrones Nachladen
von Daten in versch. Formaten (JSON,
HTML, Text, XML, ...)
‣ Verändern der Webseite (DOM) mit
neuen Daten vom Webserver ohne
diese neu zu laden
29
30
Ajax – Architektur
31
Ajax – Architektur
32
Ajax – Architektur
33
Ajax – Technologien
• JavaScript
‧ eventgesteuerte Anfragegenerierung
• DOM
‧ dynamisches Verändern der Seite
• XMLHTTPRequest (XHR)
‧
34
Browser-Objekt für asynchrone
Anfragen
Ajax – Vorteile
• Benutzer
‧
‧ plattformunabhängig
‧ schnellere Antwortzeiten
Webanwendungen nähern sich Desktop
an
• Entwickler
‧ geringerer Ressourcenverbrauch
‧ einfachere Modularisierung
35
Ajax – Nachteile
•
•
36
Benutzer
‧ Browser-History funktioniert nicht
Deep-Links (wird z.Z. Durch fragment
‧ keine
identifier umgangen, was aber dreckig ist)
‧ Internetverbindung muss bestehen
Entwickler
‧ Unterschiede zwischen Browsern
Programmiersprachen
‧ unterschiedliche
zwischen Client und Server
Ajax – Frameworks
• Probleme bei Ajax-Entwicklung:
‧
viele
Komponenten
‧
browserspezifische Unterschiede
• Frameworks:
‧
vereinfachen
Zugriff
auf
XHR
‧
abstrahieren Browserunterschiede
37
jQuery
jQuery – Funktionalität
• Selektor-API (CSS3)
• DOM-Manipulation
• Normalisiertes Event-System
• Hilfsfunktionen
• Ajax
• Effekte, Animationen
• Erweiterbar über Plug-in-System
39
jQuery – Paradigmata
• ein jQuery-Objekt (jQuery oder $)
• Selektoren geben wieder jQuery-
Objekt zurück, das alle gefundenen
DOM-Elemente "enthält" – Chaining
• Kann mit weiteren Selektoren
verfeinert werden oder mittels Aktion
verändert werden
40
jQuery – Selektoren
• Alles – $('*')
• Tag – $('p')
• ID – $('#eine-id')
• Klasse – $('.eine-klasse')
• Attribute – $('[name]'),
$('[name="wert"]'),
$('[name!="wert"]')
41
jQuery – Traversierung
• .parent() – Elternknoten
• .parents() – Vorgänger
• .closest() – erster Vorgänger der auf
Selektor passt
• .children() – Kinder
• .next(), .nextAll(), .prev(),
.prevAll(), .siblings()
– Geschwister
http://api.jquery.com/category/traversing/
42
jQuery – Manipulation
• .addClass(), .removeClass() – CSS-Klassen
hinzufügen/entfernen
• .append(), .prepend() – Elemente/HTML
davor/danach einfügen
• .height(), .width() – Höhe/Breite
auslesen/setzen
• .html(), .text(), .val() – Elemente, Textinhalt,
value-Attribut auslesen/setzen
43
jQuery – Vorgehen
•
Event: $(document).ready(function () {/* ... */}) –
ausgeführt sobald Dokument vollständig
geladen
•
Innerhalb dann:
‧ Elemente selektieren
‐
‐
‐
44
für Events registrieren
Plug-ins benutzen
Events starten
jQuery – Beispiele
//
// Selektoren
Selektoren
$('#person_table').parent('div').hide();
$('#person_table').parent('div').hide();
//
// Manipulation
Manipulation
$('#person_table').find('tr.first').append(
$('#person_table').find('tr.first').append(
'<a
'<a class="my_button">Button</a>');
class="my_button">Button</a>');
//
// CSS-Eigenschaften
CSS-Eigenschaften ändern
ändern
$('#my_button').css('font-color',
$('#my_button').css('font-color', 'red');
'red');
//
// Events
Events
$('#my_button').click(function
$('#my_button').click(function ()
() {{
//
// $(this)
$(this) ist
ist der
der geklickte
geklickte Button
Button
alert('Schaltfläche
alert('Schaltfläche wurde
wurde geklickt');
geklickt');
});
});
//
// Inhalt
Inhalt per
per Ajax
Ajax laden
laden
$('#update-element').load('http://example.com/getData');
$('#update-element').load('http://example.com/getData');
45
jQuery – Ajax
//
// Ajax
Ajax mit
mit Callback
Callback
$.get(url,
$.get(url, parameter,
parameter, function
function (data)
(data) {{
/*
/* data
data verarbeiten
verarbeiten */
*/
});
});
//
// Ajax
Ajax mit
mit Callback
Callback und
und JSON-Daten
JSON-Daten
$.getJSON(url,
$.getJSON(url, parameter,
parameter, function
function (data)
(data) {{
/*
/* data
data verarbeiten
verarbeiten */
*/
});
});
http://api.jquery.com/jQuery.get/
46