What they don't tell you about JavaScript

277 views
204 views

Published on

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

No Downloads
Views
Total views
277
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

What they don't tell you about JavaScript

  1. 1. /** * southWest * Gets the southwestern quadrant of the tree * return {Quadtree} **/ Quadtree.prototype.southWest = function() { return new Quadtree( new space2d.Point( this._origin.x, Math.floor(this._size.y / 2) ), new space2d.Point( Math.floor(this._size.x / 2), this._size.y ), this ); }; /** * southEast * Gets the southeastern quadrant of the tree * return {Quadtree} **/ Quadtree.prototype.southEast = function() { return new Quadtree( new space2d.Point( Math.floor(this._size.x / 2), Math.floor(this._size.y / 2) ), new space2d.Point( this._size.x, this._size.y ), this ); }; JavaScript What they don’t tell you about Raphael Cruzeiro http://raphaelcruzeiro.com @rcdeveloper Wednesday, July 10, 13
  2. 2. What does JavaScript have in common with Java? Wednesday, July 10, 13
  3. 3. What does JavaScript have in common with Java? The first four letters of its name. Wednesday, July 10, 13
  4. 4. It actually has a lot more in common with Python and other dynamic and functional languages Wednesday, July 10, 13
  5. 5. Originally named LiveScript Wednesday, July 10, 13
  6. 6. It was created by Netscape to enhance web pages. Wednesday, July 10, 13
  7. 7. It is used today not only in the browser but also to create desktop widgets and server-side code. Wednesday, July 10, 13
  8. 8. Formalized in ECMAScript. Wednesday, July 10, 13
  9. 9. “The problem with JavaScript is that nobody tries to learn it before writing applications with it.” - Douglas Crockford Wednesday, July 10, 13
  10. 10. JavaScript makes it easy to write terrible code. Wednesday, July 10, 13
  11. 11. var currentId; var lastViewPort; var precision = Math.pow(10, 4); var maxPointNumber = 100; var circleOverlays = []; function didViewPortChange() { var minLat = lastViewPort.getSouthWest().lat() - (lastViewPort.getNorthEast().lat() - lastViewPort.getSouthWest().lat()); var minLng = lastViewPort.getSouthWest().lng() - (lastViewPort.getNorthEast().lng() - lastViewPort.getSouthWest().lng()); var maxLat = lastViewPort.getNorthEast().lat() + (lastViewPort.getNorthEast().lat() - lastViewPort.getSouthWest().lat()); var maxLng = lastViewPort.getNorthEast().lng() + (lastViewPort.getNorthEast().lng() - lastViewPort.getSouthWest().lng()); if ($.fn.jqMap.getMap().getBounds().getNorthEast().lat() > maxLat || $.fn.jqMap.getMap().getBounds().getNorthEast().lng() > maxLng || $.fn.jqMap.getMap().getBounds().getSouthWest().lat() < minLat || $.fn.jqMap.getMap().getBounds().getSouthWest().lng() < minLng) { return true; } else { return false; } } Really bad code: Wednesday, July 10, 13
  12. 12. var currentId; var lastViewPort; var precision = Math.pow(10, 4); var maxPointNumber = 100; var circleOverlays = []; function didViewPortChange() { var minLat = lastViewPort.getSouthWest().lat() - (lastViewPort.getNorthEast().lat() - lastViewPort.getSouthWest().lat()); var minLng = lastViewPort.getSouthWest().lng() - (lastViewPort.getNorthEast().lng() - lastViewPort.getSouthWest().lng()); var maxLat = lastViewPort.getNorthEast().lat() + (lastViewPort.getNorthEast().lat() - lastViewPort.getSouthWest().lat()); var maxLng = lastViewPort.getNorthEast().lng() + (lastViewPort.getNorthEast().lng() - lastViewPort.getSouthWest().lng()); if ($.fn.jqMap.getMap().getBounds().getNorthEast().lat() > maxLat || $.fn.jqMap.getMap().getBounds().getNorthEast().lng() > maxLng || $.fn.jqMap.getMap().getBounds().getSouthWest().lat() < minLat || $.fn.jqMap.getMap().getBounds().getSouthWest().lng() < minLng) { return true; } else { return false; } } Really bad code: GUILTY Wednesday, July 10, 13
  13. 13. Global scope polluting Wednesday, July 10, 13
  14. 14. var something = 4; Wednesday, July 10, 13
  15. 15. When declaring variables on the global scope you make your code more susceptible to name clashes. Wednesday, July 10, 13
  16. 16. In JavaScript a function delimits the scope of variables Wednesday, July 10, 13
  17. 17. var something = 4; function foo () { somethingElse = something + 4; return somethingElse; }; foo(); Accidental use of global variables Wednesday, July 10, 13
  18. 18. Dangers of Hoisting Wednesday, July 10, 13
  19. 19. var something = 4; var somethingElse = 7; function foo () { console.log(something); console.log(somethingElse); var something = “This is confusing.”; console.log(something); }; foo(); Wednesday, July 10, 13
  20. 20. var something = 4; var somethingElse = 7; function foo () { console.log(something); console.log(somethingElse); var something = “This is confusing.”; console.log(something); }; foo(); Outputs: undefined 7 This is confusing. Wednesday, July 10, 13
  21. 21. Objects with no classes Wednesday, July 10, 13
  22. 22. Pretty much everything is an object in JavaScript Wednesday, July 10, 13
  23. 23. With a few exceptions: •Number •String •Boolean •null •undefined Wednesday, July 10, 13
  24. 24. A side-note about Numbers: •There is only one type for representing all numbers. •It is represented in memory as a 64-bit floating point •IEEE-754 > 0.1 + 0.2 0.30000000000000004 Wednesday, July 10, 13
  25. 25. Creating an object: var obj = new Object(); // Or via the object literal var obj = {}; Wednesday, July 10, 13
  26. 26. Adding attributes: var obj = {}; obj.a = 15; obj.bark = function() { return “Woof!”; }; Wednesday, July 10, 13
  27. 27. Adding attributes: var obj = { a: 15, bark: function() { return “Woof!”; } }; Wednesday, July 10, 13
  28. 28. Constructors: function Point(x, y) { this.x = x; this.y = y; } var point = new Point(60, 578); Wednesday, July 10, 13
  29. 29. If you forget the new: var point = Point(60, 578); point == undefined x and y are now variables on the global scope Wednesday, July 10, 13
  30. 30. Ensuring that the constructor can work with or without newWednesday, July 10, 13
  31. 31. Constructors: function Point(x, y) { if (!(this instanceof Point)) { return new Point(x, y); } this.x = x; this.y = y; } Wednesday, July 10, 13
  32. 32. Modularizing code with closures Wednesday, July 10, 13
  33. 33. (function() { /* Everything that is declared here is local to this closure only */ })(); Wednesday, July 10, 13
  34. 34. You can use closures to emulate namespaces: var space = (function(){ var Point = function(x, y) { if (!(this instanceof Point)) { return new Point(x, y); } this.x = x; this.y = y; }; return { Point: Point }; })(); Wednesday, July 10, 13
  35. 35. You can use closures to emulate namespaces: var pt = new space.Point(60, 568); Wednesday, July 10, 13
  36. 36. That’s it at least for now... Wednesday, July 10, 13

×