Embed Size (px)
Citation preview
JavaScript packt aus: "Alle haben mich falsch verstanden!"
Javascript - Inhalt
● Geschichte
● Sprache
● Grundlagen
● JSON/AJAX
● Objektorientierung
● Dialekte/Einsatz/Verwendung
● Demos
Javascript - Warum?
„Statistisch gesehen ist ECMAScript die erfolgreichste Scriptsprache der Welt: Auf Milliarden Rechnern ist ein
Browser mit JavaScript-Interpreter installiert. Dieser Erfolg beruht ironischerweise nicht auf den Fähigkeiten von JavaScript. JavaScript ist eine mächtige Sprache, die
weitestgehend unzugänglich und unliebsam blieb.“
http://molily.de/js/standards.html
Javascript – Geschichte
● Mocha -> LiveScript -> JavaScript
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● Mocha -> LiveScript -> JavaScript
● Netscape 2.0
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● Mocha -> LiveScript -> JavaScript
● Netscape 2.0
● Brendan Eich
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● JavaScript 1.1 -> Bilder
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● JavaScript 1.1 -> Bilder
● IE 3 -> JScript
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● JavaScript 1.1 -> Bilder
● IE 3 -> JScript
● ECMA
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● JavaScript 1.1 -> Bilder
● IE 3 -> JScript
● ECMA
● Netscape Enterprise Server 2.0
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Sprache
● C-Syntax
● dynamische Typen
● objektorientiert
● keine Klassen!
● Prototypen
● prozedural/funktional
● host environment
Javascript – Browser-side
http://ejohn.org/files/perf-stack.png
Javascript – Hello World
<script type="text/javascript"> alert("Hello World!"); </script>
Javascript – Datentypen
● string
● number
● boolean
● undefined
● object (null)
● function
Javascript – Werte/Variablen
● keine Typisierung
function mySum() {
var n1 = parseFloat(document.txtN1.value);var n2 = parseFloat(document.txtN2.value);
var sum = n1 + n2;document.txtSum.value = sum;
}
Javascript – Werte/Variablen
● DOM<html> <head> <title>sum</title> <script type="text/javascript">
[...] </script> </head> <body> 1. number = <input type="text" name="txtN1"></input><br/> 2. number = <input type="text" name="txtN2"></input><br/> <input type="button" name="btnSum" value="calc" onclick="mySum()"></input><br/> sum = <input type="text" name="txtSum"></input> </body></html>
Javascript – Werte/Variablen
● Array
var a1 = new Array();
var a2 = new Array(1, 2, 3);var a3 = [1, 2, 3];
var a4 = {b: 1, c: 2, d: 3};a4.c = 4;a4['c'] = 5;
Javascript – Werte/Variablen
● typeof
var n = 4;var nType = typeof n; // numbervar nTypeType = typeof nType; // string
Javascript – Operatoren
● C-Syntax
● ===, !== Typgleichheit
● delete
● in
● instanceof
● new
● typeof
● void
Javascript – Core
● String, Number, Date
● Math, RegExp
● Events
Javascript – Risiken
● Sicherheitsl ckenü
● schlechter Stil
● Pop-ups
● Gr sse ndernö ä
● verschleiern von Inhalten
Javascript – Geschichte
● ECMA-262
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● ECMA-262
● XSL
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● ECMA-262
● XSL
● XML-Parser
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● Netscape -> Mozilla
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● Netscape -> Mozilla
● JavaScript 1.4 <-> ECMAScript-262
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● Netscape -> Mozilla
● JavaScript 1.4 <-> ECMAScript-262
● kein Browser mit JS 1.4
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● Netscape -> Mozilla
● JavaScript 1.4 <-> ECMAScript-262
● kein Browser mit JS 1.4
● IE -> 'AJAX'
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● Netscape -> Mozilla
● JavaScript 1.4 <-> ECMAScript-262
● kein Browser mit JS 1.4
● IE -> 'AJAX'
● W3C -> DOM
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – AJAX
● Asynchronus JavaScript and XML
● XMLHttpRequest
Javascript – AJAX
http://de.wikipedia.org/wiki/Ajax_(Programmierung)
Javascript – Geschichte
● ECMAScript-262 3nd
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● ECMAScript-262 3nd
● JSON
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● ECMAScript-262 3nd
● JSON
● RegEx
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – JSON
● Austauschformat
● einfach zu parsen
● menschenlesbar
● leichtgewichtig
● object, array
● value, string, number
Javascript – JSON
{"name": "John Smith",
"age": 25, "address": { "streetAddress": "21 2nd Street", "city": "New York", }, "phoneNumber": [ { "type": "home", "number": "212 555-1234" }, { "type": "fax", "number": "646 555-4567" } ] }
Javascript – JSON
● Alternative zu XML
● AJAX
● viele Implementierungen
Javascript – JSON
ASP, ActionScript, C, C++, C#, ColdFusion, Delphi, E, Erlang, Fantom, Go, Haskell, haXe, Java, Lasso, Lisp, Common Lisp, LotusScript, Lua, Objective C, Objective CAML, OpenLaszlo, Perl, PHP, Pike, PL/SQL, pljson, Prolog, Python, Qt, R, REALbasic, Rebol, RPG, Ruby, Squeak, Tcl, Visual Basic, Visual FoxPro
Javascript – Geschichte
● IE 5.5 -> Marktanteile
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● IE 5.5 -> Marktanteile
● Netscape 6 -> Fehler
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● Mozilla 1.0
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● Mozilla 1.0
● Opera 6.0
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● „A new Approach to Web Applications“ -> AJAX
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● „A new Approach to Web Applications“ -> AJAX
● Frameworks (Prototype, jQuery)
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● „A new Approach to Web Applications“ -> AJAX
● Frameworks (Prototype, jQuery)
● W3C draft -> AJAX
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● HTML5
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Geschichte
● HTML5
● ECMAScritp Harmony
1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
Javascript – Sprache
● objektorientiert, aber keine Klassen?
Javascript – Sprache
● objektorientiert, aber keine Klassen?
● Prototypen / Properties
Javascript – Properties
● Objekte haben Felder
var v = new Object();
v.test = 'hello';
v['test'] = 'hello again';
Javascript – Properties
● 'built-in' Felder
var v = new Object();
v.constructor;
v.prototype;
Javascript – Constructor
● Definiton ber Funktion ü
function Foo(x) {
this.x = x;this.y = x+5;
}
var f = new Foo(); // new Foo
Javascript – Prototypes
● prototype chain
Object.prototype.inObj = 1;
function A() { this.inA = 2; }A.prototype.inAProto = 3; function B() { this.inB = 4; }B.prototype = new A;B.prototype.inBProto = 5; var x = new B;
● x● inB: 4
● B.prototype● inA: 2● inBProto: 5
● A.prototype● InAProto: 3
● Object.prototype● inObj: 1
Javascript – Prototypes
http://mckoss.com/jscript/object.htm
Javascript – Prototypes
● methods
function Foo(x) { this.x = x; }
Foo.prototype.bar = function(y){
this.x += y;}
var f = new Foo(7);f.bar(7); // f.x == 14
Javascript – Prototypes
● Polymorphism
function A() { this.x = 1; }A.prototype.doIt = function() { this.x += 2; } function B() { this.x = 4; }B.prototype.doIt = function() { this.x += 8; } var v = new B;x.doIt(); // x.x == 12
Javascript – Prototypes
● private members
function Foo() {
var x = 5;this.getX = function () { return x; }this.setX = function (newX) { x = newX; }
}
Javascript – Dialekte
● jeder: mehrere Implementierungen?
● JavaScript
● Jscript (.NET)
● ECMAScript
● ActionScript
● QtScript
● Objective-J
Javascript – Engines
● SpiderMonkey -> C
● Rhino -> Java
● TraceMonkey
● V8 -> C++
● KJS
● SquirrelFish
● Tamarin -> C++
Javascript – Server-side
● Scripting f r Anwendungenü
● Client-Anwendungen
● Server-Anwendungen
● Systemsprache/Programmiersprache
Javascript – Adobe
● Flash -> ActionScript
● Adobe CS -> Erweiterungen
● Acrobat/Adobe Reader
Javascript – Adobe
● Beispiel: PDF-Seiten rotieren
nStart = 0 // first page to rotatenEnd = this.numPages - 1; // last page to rotatenRotate = 90 // allowed rotations: 0, 90, 180, 270
try { if (this.numPages > 0) { this.setPageRotations(nStart,nEnd,nRotate) }} catch(e){app.alert("Processing error: "+e)}
Javascript – mehr Scripting
● Qt
● ActiveScripting
● OpenOffice
● Sphere/Unity/DX Studio
● Wikipedia
● Eclipse
Javascript – Anwendungen
● Widgets/Gadgets
● Adobe Integrated Runtime
● Mozilla Platform
● Rhino
Javascript – Widgets
<widget debug="on"> <script> var words = ["hi", "there", "you", "guys"]; var i = 0;
var doc = XMLDOM.parse( filesystem.readFile( "vitality.xml" ) ); t = doc.getElementById( "text" );
function setMyDockInfo() { t.setAttribute( "data", words[i++] ); if ( i > (words.length-1) ) i = 0;
widget.setDockItem( doc ); } </script> <timer interval="10.0" ticking="true" onTimerFired="setMyDockInfo();"/> <action trigger="onLoad"> setMyDockInfo(); </action></widget>
Javascript – Anwendungen
● NodeJS
● CouchDB
Javascript – CouchDB
● View (by LastName/FirstName)
function(doc) { if (doc.Type == "customer") { emit(doc.LastName, {FirstName: doc.FirstName, Address: doc.Address}); emit(doc.FirstName, {LastName: doc.LastName, Address: doc.Address}); }}
Javascript – Systemsprache
● JavaScript OSA
● KDE/GNOME
● webOS
● (Atomic OS) ;-)
Javascript – webOS
● appinfo.json
{"title": "Hello, world!","version": "0.0.1","type": "web","main": "index.html","id": "org.webosinternals.evanpro.app.helloworld","icon": "icon.png","vendor": "Evan Coury","vendorurl": "http://www.evan.pro/","visible": true,"removable": true
}
Javascript – Webframeworks
● jQuery
● DOM Manipulation
● MooTools
● Drag&Drop, Sliding, Morphing
● Prototype
● DOM Manipulation, AJAX
Javascript – Webframeworks
● Script.aculo.us
● basiert auf Prototype
● visuelle Effekte
● Dojo
● viele Funktionen
● Effekte, AJAX, Drag&Drop, Uhr/Kalender, Editoren
Javascript – Demos
DEMOS / FRAGEN ?
