JavaScript und Mashup-Programmierung

Jakob Voss JavaScript und Mashup-Programmierung Digitale Bibliothek Digitale Bibliothek WS 2007/2008 Fachhochschule Hannover Informationsmanagement (BA) 15. Oktober 2007 Sofern nicht weiter angegeben freigegeben von Jakob Voss unter der Creative Commons Attribution-Share Alike 3.0 Unported Lizenz.

Inhalt Hintergrund – JavaScript – Beispiele – J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Webseiten Statische Webseite Dynamische Webseite Client fragt Server Client fragt Server – – Server gibt Datei Server (Variante A) – – kramt in seinen Daten Client zeigt Datei an – – baut und gibt Datei – Client (Variante B) – kramt und baut Datei – während der Anzeige – J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Clientseitig Dynamik Seiteninhalte ändern – Auf Benutzerverhalten reagieren – Ggf. rückfragen an Server (AJAX u.Ä.) – Webseiten => Webanwendungen – J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

JavaScript Ist eine schreckliche Skriptsprache – Inzwischen Standard (ECMAscript) – In vielen Bereichen eingesetzt – In dynamischen Webseiten (Browser) – Für Plugins – Firefox Browser Plugins – Apple Dashboard Widgets – Windows Vista Sidebar Gadgets – Zum Skripten (u.A. Adobe PDF) – J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Unverzichtbare Helfer Firefox-Plugins – Firebug – Web Developer Toolbar – SelfHTML – HTML – CSS – JavaScript/DOM – J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

JavaScript-Spracheigenschaften Imperativ – var x = 3; x = x + 2; alert(quot;x : quot; + x); Objektorientiert – window.location.reload(); Dynamisch – obj = eval( mycode ); var add = function(x, y) { return x+y; } J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Datentypen Number 23; 0x17; 3.14 ... – String quot;halloquot;; 'geht's?' – Boolean true || false – Object – Function function add(a,b){return a+b;} – Array [quot;nullquot;,quot;einsquot;,quot;zweiquot;]; – Undefined undefined – J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Arrays var a = [ 'x', 'y', 'z' ]; – a[0], a[1], a[2] – a[23] = quot;halloquot;; – a.length – a.push, a.push, a.shift, a.unshift – J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Operatoren Wie in Java – +, -, *, /, % – =, +=, ... – x++, ++x, x--, --x – &&, || – Vergleiche – <, >, <=, >= – ==, != – ===, !== – J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Objekte Eigenschaften: quot;hi!quot;.length – Methoden: quot;hi!quot;.replace(quot;!quot;,quot;?quot;) – Zugriff – person.name = quot;Fritzchenquot;; – person.[quot;namequot;] = quot;Fritzchenquot;; – document.getElementById(quot;navquot;). appendChild( document.createTextNode(quot;!quot;) ); J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Objekte erzeugen var x = Object(...); – var person = { – quot;namequot; : quot;Fritzchenquot;, quot;alterquot; : 4 }; function Person(name, alter) { – this.name = name; this.alter = alter; } var fritz = new Person(quot;fritzquot;,23); J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Bedingte Ausführung if ( person.name == quot;Fritzchenquot;) { // ... } else if ( person.name == quot;Fritzquot;) { // .. } if (person.name == quot;Fritzquot; || person.name == quot;Fritzchenquot;) { ... } if ( typeof x == quot;objectquot; && x.length ) { ... } J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Schleifen while( i>0 ) { i--; } – for(var i=0; i<a.length; i++) { – s += a[i]; } for (var m in obj) { – s += m * „: “ + obj[m] + „n“; } J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

DOM Browser-Umgebung als Objekte – Jedes HTML-Element ein Objekt – Aktuelles HTML-Dokument: document – Zahlreiche Eigenschaften und Methoden – firstChild, lastChild – getAttribute, setAttribute, – appendChild, removeChild ... J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Beispiel: Menu ein/ausblenden Was ein/ausblenden? – Eindeutig identifizierbar mit id-Attribut – document.getElementById( ... ) Wie ein/ausblenden? – .style.display = 'none'; – .style.display = ''; Wann ein/ausblenden? – onmouseover = quot;...quot; – onmouseout = quot;...quot; J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Beispiel: Menu ein/ausblenden <html><head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <style type=quot;text/cssquot;> .menu { background: #AAAAAA; } .menu-inhalt { background: #DDDDDD; } </style> </head><body> <div class=quot;menuquot; style=quot;float:right; width:25em;quot;> Wollt ihr die Wahrheit hör'n? <div class=quot;menu-inhaltquot;> Die Wahrheit ist irgendwo da draußen. <br> Wahrheit ist die Erfindung eines Lügners. </div> </div> </body></html> J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Beispiel: Menu ein/ausblenden <html><head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <style type=quot;text/cssquot;> .menu { background: #AAAAAA; } .menu-inhalt { background: #DDDDDD; } </style> </head><body> <div class=quot;menuquot; style=quot;float:right; width:25em;quot; onmouseover=quot;document.getElementById('m1').style.display='';quot; onmouseout=quot;document.getElementById('m1').style.display= 'none';quot; > Wollt ihr die Wahrheit hör'n? <div class=quot;menu-inhaltquot; id=quot;m1quot; style=quot;display:none;quot;> Die Wahrheit ist irgendwo da draußen. <br> Wahrheit ist die Erfindung eines Lügners. </div> </div> </body></html> J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

JavaScript und Sicherheit Phising, Cookie- und Passwortklau – Sandbox-Prinzip – Keine lokalen Dateien – Cross-Domain-Barriere – Benutzerbestätigungen – J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

JavaScript Libraries Werkzeugkasten aus vorgegefertigten Objekten – und Methoden (API) (+) Unabhängigkeit von internen Details – (‒) Abhängigkeit von der Library – Einbindung mittels <script> von fremden (!) oder – eigenem Server Applikationsbezogen oder Allgemein – J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Beispiel: Google Maps API <html> <head> <script src=quot;http://maps.google.com/maps?file=api&v=2quot; type=quot;text/javascriptquot;></script> <script> function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById(quot;mapquot;)); map.setCenter(new GLatLng(52.32061,9.819271), 15); map.addOverlay(new GMarker(new GLatLng(52.32,9.82))); } } </script> </head> <body onload=quot;load()quot; onunload=quot;GUnload()quot;> schau: <div id=quot;mapquot; style=quot;width: 500px; height: 300pxquot;></div> </body> </html> J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Beispiel: jQuery Superfunktion jQuery() oder $() – $(quot;#nquot;).css(quot;border: 1px solid redquot;); – $(quot;aquot;).addClass(quot;linkquot;); – $(quot;#nquot;).html(quot;<p>...</p>quot;); – $(quot;.linkquot;).hide – ... – J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Beispiel: jQuery Aktion nach dem Laden der Seite: – function nadannlos() { ... } – $(document).ready(nadannlos) – Nachladen von Inhalten mit AJAX – $(...).load(URL) – $().get / post / getJSON / – getScript(url, callback) J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

Inhalt dazuladen AJAX oder vergleichbare Alternative – Daten holen, verarbeiten, anzeigen – Mashup: Inhalte von mehreren Quellen – Widgets: Kleine (Teil-)programme, die sich – in andere Anwendungen einbinden lassen J a kob Vos s : Le h rve ra ns ta ltung Digitale Bibliothe k (WS 2007/ 2008) F HH Ha nnove r, F a c h b e re ic h Inform a tions ma na g e me nt, S tudie ng a ng Inform a tio ns m a na g e me nt

JavaScript und Mashup-Programmierung

by Jakob . on Oct 16, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 5

Statistics

JavaScript und Mashup-Programmierung — Presentation Transcript