JavaScript packt aus: "Alle haben mich falsch verstanden!"

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 einBrowser 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 – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● Mocha -> LiveScript -> JavaScript

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● Mocha -> LiveScript -> JavaScript ● Netscape 2.0

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● Mocha -> LiveScript -> JavaScript ● Netscape 2.0 ● Brendan Eich

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● JavaScript 1.1 -> Bilder

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● JavaScript 1.1 -> Bilder ● IE 3 -> JScript

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● JavaScript 1.1 -> Bilder ● IE 3 -> JScript ● ECMA

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● JavaScript 1.1 -> Bilder ● IE 3 -> JScript ● ECMA ● Netscape Enterprise Server 2.0

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 Typisierungfunction 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 ● Arrayvar 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 ● typeofvar 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 – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● ECMA-262

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● ECMA-262 ● XSL

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● ECMA-262 ● XSL ● XML-Parser

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● PDF

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● PDF ● Netscape -> Mozilla

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● PDF ● Netscape -> Mozilla ● JavaScript 1.4 <-> ECMAScript-262

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● PDF ● Netscape -> Mozilla ● JavaScript 1.4 <-> ECMAScript-262 ● kein Browser mit JS 1.4

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● PDF ● Netscape -> Mozilla ● JavaScript 1.4 <-> ECMAScript-262 ● kein Browser mit JS 1.4 ● IE -> AJAX

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● PDF ● Netscape -> Mozilla ● JavaScript 1.4 <-> ECMAScript-262 ● kein Browser mit JS 1.4 ● IE -> AJAX ● W3C -> DOM

Javascript – AJAX ● Asynchronus JavaScript and XML ● XMLHttpRequest

Javascript – AJAX http://de.wikipedia.org/wiki/Ajax_(Programmierung)

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● ECMAScript-262 3nd

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● ECMAScript-262 3nd ● JSON

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● ECMAScript-262 3nd ● JSON ● RegEx

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 – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● IE 5.5 -> Marktanteile

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● IE 5.5 -> Marktanteile ● Netscape 6 -> Fehler

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● Mozilla 1.0

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● Mozilla 1.0 ● Opera 6.0

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● „A new Approach to Web Applications“ -> AJAX

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● „A new Approach to Web Applications“ -> AJAX ● Frameworks (Prototype, jQuery)

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● „A new Approach to Web Applications“ -> AJAX ● Frameworks (Prototype, jQuery) ● W3C draft -> AJAX

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● HTML5

Javascript – Geschichte1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010 ● HTML5 ● ECMAScritp Harmony

Javascript – Sprache ● objektorientiert, aber keine Klassen?

Javascript – Sprache ● objektorientiert, aber keine Klassen? ● Prototypen / Properties

Javascript – Properties ● Objekte haben Feldervar v = new Object();v.test = hello;v[test] = hello again;

Javascript – Properties ● built-in Feldervar v = new Object();v.constructor;v.prototype;

Javascript – Constructor ● Definiton über Funktionfunction Foo(x){ this.x = x; this.y = x+5;}var f = new Foo(); // new Foo

Javascript – Prototypes ● prototype chainObject.prototype.inObj = 1; ● x inB: 4 ●function A() { this.inA = 2; } ● B.prototypeA.prototype.inAProto = 3; ● inA: 2 ● inBProto: 5function B() { this.inB = 4; } ● A.prototypeB.prototype = new A; ● InAProto: 3B.prototype.inBProto = 5; ● Object.prototype ● inObj: 1var x = new B;

Javascript – Prototypes http://mckoss.com/jscript/object.htm

Javascript – Prototypes ● methodsfunction 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 ● Polymorphismfunction 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 membersfunction 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 rotierennStart = 0 // first page to rotatenEnd = this.numPages - 1; // last page to rotatenRotate = 90 // allowed rotations: 0, 90, 180, 270try { 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 ● Google

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 ?

JavaScript packt aus: "Alle haben mich falsch verstanden!"

by fg.informatik Universität Basel

Accessibility

Categories

Upload Details

Usage Rights

Statistics

JavaScript packt aus: "Alle haben mich falsch verstanden!" Presentation Transcript