Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Javascript - The Good, the Bad and the Ugly

3 119 vues

Publié le

An introduction to Javascript, highlighting some of it's good and bad language design. This talk was part of the webcon 2014.

Publié dans : Technologie

Javascript - The Good, the Bad and the Ugly

  1. 1. Javascript - Javascript - The Good, the Bad and the Ugly
  2. 2. Javascript ● Thorsten Suckow-Homberg Javascript since 1999 Author of conjoon (http://conjoon.com) Trainer and consultant for Javascript and ExtJS Senior Software Developer eyeworkers GmbH, Karlsruhe @thorstensuckow
  3. 3. Javascript What is this talk about? ● Javascript ● History ● The good (a few words) ● The Bad (examples) ● The Ugly (more examples)
  4. 4. Javascript „Sometimes language designers make mistakes.“ - Douglas Crockford http://en.wikipedia.org/wiki/Douglas_Crockford#mediaviewer/File:Douglas_Crockford.jpg
  5. 5. Javascript History http://de.wikipedia.org/wiki/Netscape_Communications#mediaviewer/File:Netscape_Logo.svg http://de.wikipedia.org/wiki/Brendan_Eich#mediaviewer/File:BEich.jpg http://de.wikipedia.org/wiki/AOL#mediaviewer/File:AOL_Logo.jpg ● created by Brendan Eich, 1995 (in 10 days) ● shipped as „Live Script“ with Netscape Navigator 2.0 ● Java Hype to this time: Renamed to JavaScript in NN 2.0B3 ● Microsoft adopts JS and introduces it with IE 3.0 ● Promotes its usage under the term „Dynamic HTML“ ● Standardized as ECMAScript in June 1997
  6. 6. Javascript What is Javascript, anyway? ● dynamic computer programming language ● prototype based scripting ● dynamic typing ● first-class functions ● Supporting: object oriented imperative functional programming style
  7. 7. Javascript Java (Syntax) Scheme (Functions) Self (Prototypal Inheritance) JavaScript Perl (Regular Expressions)
  8. 8. Javascript Teasing the Good and the Bad Good functions loose typing dynamic objects expressive literal object notation Bad programming model based on global variables „Everything is an Object.“ - Javascript http://edndoc.esri.com
  9. 9. Javascript Teasing the Good and the Bad – The Good <script type =“text/javascript“> var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']; function getDayName(dayNum) { return days[dayNum]; } </script>
  10. 10. Javascript Teasing the Good and the Bad – The Good <script type =“text/javascript“> function getDayName(dayNum) { var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']; return days[dayNum]; } </script>
  11. 11. Javascript Teasing the Good and the Bad – The Good <script type =“text/javascript“> var getDayName = function() { var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']; return function(dayNum) { return days[dayNum]; } }(); GetDayName(0); // > 'monday' </script>
  12. 12. Javascript Imperative Approach var otherText = „oh hai!“; var text = „Hello World!“; console.log(otherText); console.log(text); // > Oh hai! // > Hello World! http://www.retro-programming.de
  13. 13. Javascript Functional Approach function otherText() { console.log(„oh hai!“); } function text() { console.log(„Hello World!“); } otherText(); text(); // > Oh hai! // > Hello World! http://www.excel-live.de
  14. 14. Javascript Object Oriented Approach function Bar(text) { console.log(this.text); console.log(text); } Bar.prototype = { text : „oh hai!“ }; var foo = new Bar(„Hello World!“); // > Oh hai! // > Hello World! http://www.teachitza.com/delphi/oop.htm
  15. 15. Javascript … and the DOM, of course. http://www.technologyuk.net/the_internet/web/document_object_model.shtml
  16. 16. Javascript Teasing the Good and the Bad 1 + „foo“ // > 1foo 1 - „foo“ // >
  17. 17. Javascript Teasing the Good and the Bad 1 + „foo“ // > 1foo 1 - „foo“ // > NaN typeof(NaN) //>
  18. 18. Javascript Teasing the Good and the Bad 1 + „foo“ // > 1foo 1 - „foo“ // > NaN typeof(NaN) // > „number“
  19. 19. Javascript Semicolon Insertion
  20. 20. Javascript Semicolons „Humans make mistakes. Let's try to detect omitted semicolons and insert them automatically.“ - Javascript, 1995 console.log(„foo“); console.log(„bar“) console.log(„oh hai!“); ;
  21. 21. Javascript function foo() { return { bar : true }; } var bar = foo(); console.log(bar); // > ? Semicolons ;
  22. 22. Javascript function foo() { return { bar : true }; } var bar = foo(); console.log(bar); // > undefined Semicolons ;
  23. 23. Javascript function foo() { return { bar : true }; } var bar = foo(); console.log(bar); // > undefined Semicolons ; ;
  24. 24. Javascript function foo() { return { bar : true }; } var bar = foo(); console.log(bar); // > undefined Semicolons ; ; ;
  25. 25. Javascript function foo() { return { bar : true }; } var bar = foo(); console.log(bar); // > Object {bar:true} Semicolons ;
  26. 26. Javascript function foo() { var a = 1 b = 2; } foo(); console.log(a); console.log(b); Semicolons ;
  27. 27. Javascript function foo() { var a = 1 b = 2; } foo(); console.log(a); console.log(b); // > Reference Error // > 2 Semicolons ;
  28. 28. Javascript Equality Operators
  29. 29. Javascript 0 == '0' Equality Operators = == === != !==
  30. 30. Javascript 0 == '0' // true 0 === '0' Equality Operators == === != !==
  31. 31. Javascript 0 == '0' // true 0 === '0' // false 0 == '' Equality Operators == === != !==
  32. 32. Javascript 0 == '0' // true 0 === '0' // false 0 == '' // true '' == '0' Equality Operators == === != !==
  33. 33. Javascript 0 == '0' // true 0 === '0' // false 0 == '' // true '' == '0' // false false == 'false' Equality Operators == === != !==
  34. 34. Javascript 0 == '0' // true 0 === '0' // false 0 == '' // true '' == '0' // false false == 'false' // false false == '0' Equality Operators == === != !==
  35. 35. Javascript 0 == '0' // true 0 === '0' // false 0 == '' // true '' == '0' // false false == 'false' // false false == '0' // true Equality Operators == === != !==
  36. 36. Javascript '' == false // true false == '0' // true '' == '0' // ? Equality Operators == === != !==
  37. 37. Javascript '' == false // true false == '0' // true '' == '0' // ? '' => false => '0' '' == '0' // ?!?!? Equality Operators == === != !==
  38. 38. Javascript '' == false // true false == '0' // true '' == '0' // ? '' => false =>'0' '' == '0' // false Equality Operators == === != !==
  39. 39. Javascript Equality Operators == != === !== Expected '===' and instead saw '=='.
  40. 40. Javascript Arrays
  41. 41. foo = [1, 2, 3, 4]; bar = new Array(1, 2, 3, 4); Javascript Arrays var foo = []; var bar = new Array();
  42. 42. foo = [1, 2, 3, 4]; bar = new Array(1, 2, 3, 4); Javascript foo[0] = 1; foo[1] = 2; foo[2] = 3; foo[3] = 4; // > foo.length == 4 Arrays var foo = []; var bar = new Array();
  43. 43. Javascript foo = []; foo[11203] = 1; // > foo.length == ? Arrays var foo = []; var bar = new Array();
  44. 44. Javascript foo = []; foo[11203] = 1; // > foo.length == 11204 Arrays var foo = []; var bar = new Array();
  45. 45. Javascript foo = new Array(1, 2); console.log(foo); // > ? Arrays var foo = []; var bar = new Array();
  46. 46. Javascript foo = new Array(1, 2); console.log(foo); // > [1, 2] Arrays var foo = []; var bar = new Array();
  47. 47. Javascript foo = new Array(1, 2); console.log(foo); // > [1, 2] bar = new Array(2); console.log(bar); // > ? Arrays var foo = []; var bar = new Array();
  48. 48. Javascript foo = new Array(1, 2); console.log(foo); // > [1, 2] bar = new Array(2); console.log(bar); // > [undefined, undefined] Arrays var foo = []; var bar = new Array();
  49. 49. Javascript foo == true // ? Arrays var foo = []; var bar = new Array();
  50. 50. Javascript foo == true // false Arrays var foo = []; var bar = new Array(); var txt = ''; if (foo) { txt = 1; } else { txt = 2; } console.log(txt);
  51. 51. Javascript foo == true // false Arrays var foo = []; var bar = new Array(); var txt = ''; if (foo) { txt = 1; } else { txt = 2; } console.log(txt); // > 1
  52. 52. Javascript Prototyping
  53. 53. Javascript Prototyping var Foo = function() { }; Foo.prototype.i = 0; Foo.prototype.bar = new Array(0, 1); var wobble = new Foo; console.log(wobble.i); // 0 console.log(wobble.bar[0]); // 0 wobble.i = 1; wobble.bar[0] = 2; console.log(wobble.i); // 1 console.log(wobble.bar[0]); // 2 var wibble = new Foo; console.log(wibble.i); console.log(wibble.bar[0]); // > ?
  54. 54. Javascript Prototyping var Foo = function() { }; Foo.prototype.i = 0; Foo.prototype.bar = new Array(0, 1); var wobble = new Foo; console.log(wobble.i); // 0 console.log(wobble.bar[0]); // 0 wobble.i = 1; wobble.bar[0] = 2; console.log(wobble.i); // 1 console.log(wobble.bar[0]); // 2 var wibble = new Foo; console.log(wibble.i, wibble.bar[0]); // > 0, 2
  55. 55. Javascript Prototyping var Foo = function() { }; Foo.prototype.i = 0; Foo.prototype.bar = new Array(0, 1); var wobble = new Foo; console.log(wobble.i); // 0 console.log(wobble.bar[0]); // 0 wobble.i = 1; wobble.bar[0] = 2; console.log(wobble.i); // 1 console.log(wobble.bar[0]); // 2 var wibble = new Foo; console.log(wibble.i, wibble.bar[0]); // > 0, 2 Foo.prototype.bar wibble wobble
  56. 56. Summary: In this episode, Sheldon defines a Function and its prototype. While Leonard invokes the function and creates a new object of it, Howard changes the prototype. In the meantime, Rajesh relies on Howard's previously created object... Penny just leans back and watches as all hell breaks loose... Will they ever figure out what happened? Javascript The BigBang Javascript Theory Season 08 Episode 15: The Viktor Paradoxon Summary: In this episode, Sheldon defines a Function and its prototype. While Leonard invokes the function and creates a new object of it, Howard changes the prototype. In the meantime, Rajesh relies on Howard's previously created object... Penny just leans back and watches as all hell breaks loose... Will they ever figure out what happened?
  57. 57. Javascript Prototyping var Foo = function() { }; Foo.prototype.i = 0; var wobble = new Foo; console.log(wobble.i); Foo.prototype.i = 2; var wibble = new Foo; console.log(wobble.i, wibble.i); // > ? // > ?
  58. 58. Javascript Prototyping var Foo = function() { }; Foo.prototype.i = 0; var wobble = new Foo; console.log(wobble.i); Foo.prototype.i = 2; var wibble = new Foo; console.log(wobble.i, wibble.i); // > 0 // > 2, 2
  59. 59. Javascript WAT?
  60. 60. true false Javascript Prototyping var Foo = function() { }; Foo.prototype.i = 0; var wobble = new Foo; console.log(wobble.i); Foo.prototype.i = 2; var wibble = new Foo; console.log(wobble.i, wibble.i); // > 0 // > 2, 2 wibble.i === undefined Foo.prototype.i === undefined wibble.i true false Object.prototype.i === Foo.prototype.i undefined true false undefined Object.prototype.i
  61. 61. Javascript DOM
  62. 62. Javascript DOM <html> <head></head> <body> <div id="foo"></div> <div id="bar"></div> </body> </html> console.log(foo); // > ?
  63. 63. Javascript DOM console.log(foo); // > <div id=“foo“> <html> <head></head> <body> <div id="foo"></div> <div id="bar"></div> </body> </html>
  64. 64. Javascript DOM console.log(foo); // > <div id=“foo“> foo.innerHTML = 'bar' // > <div id=“foo“>bar</div> <html> <head></head> <body> <div id="foo"></div> <div id="bar"></div> </body> </html>
  65. 65. Javascript DOM console.log(foo); foo.innerHTML = 'bar' var foo = 'bar'; // > ? <html> <head></head> <body> <div id="foo"></div> <div id="bar"></div> </body> </html>
  66. 66. Javascript DOM console.log(foo); foo.innerHTML = 'bar' var foo = 'bar'; // > TypeError: foo is // undefined <html> <head></head> <body> <div id="foo"></div> <div id="bar"></div> </body> </html>
  67. 67. Javascript ● Building Ext JS 5 apps with Sencha Architect ● Testing Ext JS 5 applications with Siesta ● Javascript – The good, the bad and the ugly & Improving Ext JS app performance. ● Optimizing your current Ext JS applications for touch and tablets ● Building Custom UI Components With Ext JS 5 ● Delivering a great user experience with Ext JS 5 ● How to secure your data with Sencha Space 2014/12/02 Karlsruhe, Germany http://senchaday.de
  68. 68. Javascript Thank You!

×