Java Script Workshop

2,827 views

Published on

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

No Downloads
Views
Total views
2,827
On SlideShare
0
From Embeds
0
Number of Embeds
86
Actions
Shares
0
Downloads
126
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Java Script Workshop

  1. 1. JavaScript WebDU 2009 · Dmitry Baranovskiy
  2. 2. E very object (including host objects) must implement the e)) and ((Class)) propertie s and the ((Get)), ((Put)), ((Prototyp t)), ((HasProperty)), ((Dele te)), and ((DefaultValue)) ((CanPu . (Note, however, that the ((D efaultValue)) method may, methods exception.) The value for some objects , simply throw a TypeError Prototype)) property must be either an object or null, and of the (( Prototype)) chain must have finite length (that is, starting every (( y object, recursively access ing the ((Prototype)) property from an entually lead to a null val ue). Whether or not a native must ev an have a host object as its ((Prototype)) depends on the object c implementation. The value of the ((Class)) property is defined by this specification for every kind of built-i n object. The value of the ((Class)) prop erty of a host object may be any value , even a value used by
  3. 3. E very object (including host objects) must implement the e)) and ((Class)) propertie s and the ((Get)), ((Put)), ((Prototyp t)), ((HasProperty)), ((Dele te)), and ((DefaultValue)) ((CanPu . (Note, however, that the ((D efaultValue)) method may, methods exception.) The value for some objects , simply throw a TypeError Prototype)) property must be either an object or null, and of the (( Prototype)) chain must have finite length (that is, starting every (( from an must ev It is a bit “cryptic” y object, recursively access entually lead to a null val ing the ((Prototype)) property ue). Whether or not a native an have a host object as its ((Prototype)) depends on the object c implementation. The value of the ((Class)) property is defined by this specification for every kind of built-i n object. The value of the ((Class)) prop erty of a host object may be any value , even a value used by
  4. 4. “ECMAScript does not contain proper classes such as those in C++, Smalltalk, or Java, but rather, supports constructors which create objects by executing code that allocates storage for the objects and initialises all or part of them by assigning initial values to their properties.” ECMAScript Specification
  5. 5. Basic Types
  6. 6. Undefined Null Boolean Number String Object
  7. 7. typeof
  8. 8. typeof Undefined quot;undefinedquot; Null quot;objectquot; Number quot;numberquot; Boolean quot;booleanquot; String quot;stringquot; Object quot;objectquot;
  9. 9. to Number Undefined NaN Null 0 Number — Boolean false ! 0, true ! 1 String parsing Object .valueOf()
  10. 10. to Boolean Undefined !quot;#$% Null !quot;#$% Number &'())(*+*,(-(.+/01(2(3451 Boolean 6 String 77(-(.+/01(2(3451 Object 89:%
  11. 11. to String Undefined quot;undefinedquot; Null quot;nullquot; Number quot;5quot; Boolean quot;falsequot; || quot;truequot; String — Object .toString()
  12. 12. to Object Undefined exception! Null exception! Number new Number(v) Boolean new Boolean(v) String new String(v) Object Object
  13. 13. On the fly
  14. 14. 5 + 4 + quot;pxquot; quot;$quot; + 1 + 2 quot;4quot; / quot;2quot; quot;$quot; + 1 - 2 quot;webduquot;.length typeof 5 typeof quot;5quot; typeof {property: value} typeof null typeof undefined typeof [1, 2, 3] typeof (4 - quot;pxquot;)
  15. 15. 5 + 4 + quot;pxquot; quot;9pxquot; quot;$quot; + 1 + 2 quot;$12quot; quot;4quot; / quot;2quot; 2 quot;$quot; + 1 - 2 NaN quot;webduquot;.length 5 typeof 5 quot;numberquot; typeof quot;5quot; quot;stringquot; typeof {property: value} quot;objectquot; typeof null quot;objectquot; typeof undefined quot;undefinedquot; typeof [1, 2, 3] quot;objectquot; typeof (4 - quot;pxquot;) quot;numberquot;
  16. 16. Object Properties
  17. 17. ReadOnly DontEnum DontDelete Internal
  18. 18. for in
  19. 19. var a = { x: 12, y: 23, r: 10, draw: function () {/*...*/} }; for (var property in a) { alert(quot;a.quot; + property + quot; = quot; + a[property]); }
  20. 20. var a = { x: 12, y: 23, r: 10, draw: function () {/*...*/} }; for (var property in a) { alert(quot;a.quot; + property + quot; = quot; + a[property]); }
  21. 21. Function Array Date RegExp
  22. 22. Function
  23. 23. var y = 1; function x() { var y = 2; return ++y; } var z = function () { return ++y; };
  24. 24. function x() { var y = 2; return function () { return ++y; }; } var a = x(); a(); a();
  25. 25. arguments
  26. 26. function add(a, b) { return a + b; } add(4, 5); // = 9 add(4, 5, 6, 7, 8, 9) // = 39 function add() { var sum = 0; for (var i = 0, ii = arguments.length; i < ii; i++) { sum +=+ arguments[i]; } return sum; }
  27. 27. Scope & “this”
  28. 28. function is(it) { alert(this + quot; is quot; + it); } is(quot;globalquot;); is.call(5, quot;numberquot;); is.apply(quot;Aquot;, [quot;stringquot;]); alert.is = is; alert.is(quot;functionquot;);
  29. 29. Variable declaration
  30. 30. alert(b); 1 b = 1; alert(a); 2 var a = 1; (function () { 3 var x = 1; })(); alert(x); (function () { 4 y = 1; })(); alert(y);
  31. 31. Function declaration
  32. 32. function x(a) { 1 return a && x(--a); } var x = function (a) { 2 return a && x(--a); }; setTimeout(function (a) { 3 return a && arguments.callee(--a); }, 1000); var x = function y(a) { 4 return a && y(--a); }; setTimeout(function y(a) { 5 return a && y(--a); }, 1000);
  33. 33. Arrays declaration
  34. 34. var a = new Array(); var a = new Array(3); var a = []; var a = [undefined, undefined, undefined]; var a = [1, 2, 3, 4];
  35. 35. Object declaration (JSON)
  36. 36. var a = new Object(); var a = {}; var a = {x: 10, y: 15}; var a = { x: 10, name: quot;objectquot;, quot;font-stylequot;: quot;italicquot;, getHeight: function () {/*...*/}, points: [1, 2, 3], child: {x: 10, y: 15} };
  37. 37. OOP
  38. 38. “Object Owns Prototype”
  39. 39. var mouse = { 1 name: quot;Mikequot;, voice: function () { alert(quot;Squik!quot;); } }; var o = new Object(); 2 o.name = quot;Mikequot;; o.voice = function () { alert(quot;Squik!quot;); }; var O = function () { 3 this.name = quot;Mikequot;; this.voice = function () { alert(quot;Squik!quot;); }; }; var o = new O(); var O = function () {}; 4 O.prototype.name = quot;Mikequot;; O.prototype.voice = function () { alert(quot;Squik!quot;); }; var o = new O();
  40. 40. Inheritance
  41. 41. Inheritance
  42. 42. Delegation
  43. 43. Classic Model Class Object Class Object Object Object
  44. 44. Prototypal Model Object Object Object Object
  45. 45. Object Object
  46. 46. // Sharing function Parent(value) { this.value = value; } Parent.prototype.getValue = function () { return this.value; }; function A(value) { this.value = value + 1; } A.prototype = new Parent(); function B(value) { this.value = value * 2; } B.prototype = new Parent(); alert((new A(5)).getValue()); // 6 alert((new B(5)).getValue()); // 10
  47. 47. // Sharing function A(value) { this.value = value + 1; } function B(value) { this.value = value * 2; } A.prototype.getValue = B.prototype.getValue = function () { return this.value; }; alert((new A(5)).getValue()); // 6 alert((new B(5)).getValue()); // 10
  48. 48. Array
  49. 49. Date
  50. 50. RegExp
  51. 51. Thank You

×