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

1,829 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,829
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. JavaScript packt aus: "Alle haben mich falsch verstanden!"
  2. 2. Javascript - Inhalt ● Geschichte ● Sprache ● Grundlagen ● JSON/AJAX ● Objektorientierung ● Dialekte/Einsatz/Verwendung ● Demos
  3. 3. 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
  4. 4. Javascript – Geschichte ● Mocha -> LiveScript -> JavaScript 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  5. 5. Javascript – Geschichte ● Mocha -> LiveScript -> JavaScript ● Netscape 2.0 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  6. 6. 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
  7. 7. Javascript – Geschichte ● JavaScript 1.1 -> Bilder 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. Javascript – Sprache ● C-Syntax ● dynamische Typen ● objektorientiert ● keine Klassen! ● Prototypen ● prozedural/funktional ● host environment
  12. 12. Javascript – Browser-side http://ejohn.org/files/perf-stack.png
  13. 13. Javascript – Hello World <script type="text/javascript"> alert("Hello World!"); </script>
  14. 14. Javascript – Datentypen ● string ● number ● boolean ● undefined ● object (null) ● function
  15. 15. 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; }
  16. 16. 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>
  17. 17. 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;
  18. 18. Javascript – Werte/Variablen ● typeof var n = 4; var nType = typeof n; // number var nTypeType = typeof nType; // string
  19. 19. Javascript – Operatoren ● C-Syntax ● ===, !== Typgleichheit ● delete ● in ● instanceof ● new ● typeof ● void
  20. 20. Javascript – Core ● String, Number, Date ● Math, RegExp ● Events
  21. 21. Javascript – Risiken ● Sicherheitsl ckenü ● schlechter Stil ● Pop-ups ● Gr sse ndernö ä ● verschleiern von Inhalten
  22. 22. Javascript – Geschichte ● ECMA-262 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  23. 23. Javascript – Geschichte ● ECMA-262 ● XSL 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  24. 24. Javascript – Geschichte ● ECMA-262 ● XSL ● XML-Parser 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  25. 25. Javascript – Geschichte ● PDF 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  26. 26. Javascript – Geschichte ● PDF ● Netscape -> Mozilla 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  27. 27. Javascript – Geschichte ● PDF ● Netscape -> Mozilla ● JavaScript 1.4 <-> ECMAScript-262 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  28. 28. Javascript – Geschichte ● PDF ● 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
  29. 29. Javascript – Geschichte ● PDF ● 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
  30. 30. Javascript – Geschichte ● PDF ● 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
  31. 31. Javascript – AJAX ● Asynchronus JavaScript and XML ● XMLHttpRequest
  32. 32. Javascript – AJAX http://de.wikipedia.org/wiki/Ajax_(Programmierung)
  33. 33. Javascript – Geschichte ● ECMAScript-262 3nd 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  34. 34. Javascript – Geschichte ● ECMAScript-262 3nd ● JSON 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  35. 35. Javascript – Geschichte ● ECMAScript-262 3nd ● JSON ● RegEx 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  36. 36. Javascript – JSON ● Austauschformat ● einfach zu parsen ● menschenlesbar ● leichtgewichtig ● object, array ● value, string, number
  37. 37. 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" } ] }
  38. 38. Javascript – JSON ● Alternative zu XML ● AJAX ● viele Implementierungen
  39. 39. 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
  40. 40. Javascript – Geschichte ● IE 5.5 -> Marktanteile 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  41. 41. 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
  42. 42. Javascript – Geschichte ● Mozilla 1.0 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  43. 43. Javascript – Geschichte ● Mozilla 1.0 ● Opera 6.0 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. Javascript – Geschichte ● HTML5 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  48. 48. Javascript – Geschichte ● HTML5 ● ECMAScritp Harmony 1995 – 1996 – 1997 – 1998 – 1999 – 2000 – 2001 – 2002 – 2003 – 2004 - 2005 – 2006 – 2007 – 2008 – 2009 – 2010
  49. 49. Javascript – Sprache ● objektorientiert, aber keine Klassen?
  50. 50. Javascript – Sprache ● objektorientiert, aber keine Klassen? ● Prototypen / Properties
  51. 51. Javascript – Properties ● Objekte haben Felder var v = new Object(); v.test = 'hello'; v['test'] = 'hello again';
  52. 52. Javascript – Properties ● 'built-in' Felder var v = new Object(); v.constructor; v.prototype;
  53. 53. Javascript – Constructor ● Definiton ber Funktionü function Foo(x) { this.x = x; this.y = x+5; } var f = new Foo(); // new Foo
  54. 54. 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
  55. 55. Javascript – Prototypes http://mckoss.com/jscript/object.htm
  56. 56. 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
  57. 57. 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
  58. 58. Javascript – Prototypes ● private members function Foo() { var x = 5; this.getX = function () { return x; } this.setX = function (newX) { x = newX; } }
  59. 59. Javascript – Dialekte ● jeder: mehrere Implementierungen? ● JavaScript ● Jscript (.NET) ● ECMAScript ● ActionScript ● QtScript ● Objective-J
  60. 60. Javascript – Engines ● SpiderMonkey -> C ● Rhino -> Java ● TraceMonkey ● V8 -> C++ ● KJS ● SquirrelFish ● Tamarin -> C++
  61. 61. Javascript – Server-side ● Scripting f r Anwendungenü ● Client-Anwendungen ● Server-Anwendungen ● Systemsprache/Programmiersprache
  62. 62. Javascript – Adobe ● Flash -> ActionScript ● Adobe CS -> Erweiterungen ● Acrobat/Adobe Reader
  63. 63. Javascript – Adobe ● Beispiel: PDF-Seiten rotieren nStart = 0 // first page to rotate nEnd = this.numPages - 1; // last page to rotate nRotate = 90 // allowed rotations: 0, 90, 180, 270 try { if (this.numPages > 0) { this.setPageRotations(nStart,nEnd,nRotate) } } catch(e) { app.alert("Processing error: "+e) }
  64. 64. Javascript – mehr Scripting ● Qt ● ActiveScripting ● OpenOffice ● Sphere/Unity/DX Studio ● Wikipedia ● Eclipse
  65. 65. Javascript – Anwendungen ● Widgets/Gadgets ● Adobe Integrated Runtime ● Mozilla Platform ● Rhino ● Google
  66. 66. 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>
  67. 67. Javascript – Anwendungen ● NodeJS ● CouchDB
  68. 68. 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}); } }
  69. 69. Javascript – Systemsprache ● JavaScript OSA ● KDE/GNOME ● webOS ● (Atomic OS) ;-)
  70. 70. 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 }
  71. 71. Javascript – Webframeworks ● jQuery ● DOM Manipulation ● MooTools ● Drag&Drop, Sliding, Morphing ● Prototype ● DOM Manipulation, AJAX
  72. 72. Javascript – Webframeworks ● Script.aculo.us ● basiert auf Prototype ● visuelle Effekte ● Dojo ● viele Funktionen ● Effekte, AJAX, Drag&Drop, Uhr/Kalender, Editoren
  73. 73. Javascript – Demos DEMOS / FRAGEN ?

×