【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽

1,287 views
1,148 views

Published on

面向Java程序员的JavaScript教程

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

No Downloads
Views
Total views
1,287
On SlideShare
0
From Embeds
0
Number of Embeds
75
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
































































  • 【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽

    1. 1. Java & Script
    2. 2. JavaScript Java
    3. 3. , Java JavaScript , Java JavaScript
    4. 4. Java + Script = Groovy || JRuby || Scala
    5. 5. Java + Script |!=| JavaScript
    6. 6. JavaScript is
    7. 7. JavaScript is JavaScript
    8. 8. +
    9. 9. Code: new Boolean(true) == true new Boolean(true) === false
    10. 10. Code: var a = “”; if (a) { alert(a); }
    11. 11. • new Boolean(true) true • == === • if (a) a
    12. 12. • • •
    13. 13. •5 null undefined
    14. 14. • 20 • true • ”hello, world!” • [12, 30, true, “hello”] • {name: “qingyu”, id: 17300}
    15. 15. • == === • === == • ECMA
    16. 16. Tips • • === ==
    17. 17. Code: var price = 100; function doSomething() { var doublePrice = price * 2; var price = 200; var halfPrice = price / 2; alert(doublePrice); alert(halfPrice); } doSomething(); alert(price);
    18. 18. Code: var color = “red”; if (true) { var color = “blue”; alert(color); } alert(color);
    19. 19. • var doublePrice = price * 2 var halfPrice = price / 2 price • color
    20. 20. • •
    21. 21. • var var •
    22. 22.
    23. 23. Tips •
    24. 24. Code: var a = 0 && true; var b = true && 2; var c = 0 || 3; var cfg = {maxHeight: 200}; var d = cfg.height || cfg.maxHeight;
    25. 25. Code: // 0 var check = function(obj) { return !!(obj || obj === 0); };
    26. 26. • && || • && || • !!a a
    27. 27. Tips • || • !!
    28. 28. Code: (function() { //code here })();
    29. 29. var fn = function() { //code here }; fn();
    30. 30. var fn = function() { //code here }; fn();
    31. 31. var fn = function() { //code here }; fn();
    32. 32. (function() { //code here }) ();
    33. 33. Code: var createComparisonFunction = function(propertyName) { return function(object1, object2) { var value1 = object1[propertyName], value2 = object2[propertyName]; if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } }; } var fn = createComparisonFunction(‘id’);
    34. 34. • • •
    35. 35.
    36. 36. Tips •
    37. 37. Code: var sum = function() { var result = 0; for(var i = 0, len = arguments.length; i < len; I++) { result += arguments[i]; } return result; }; var total = sum(10, 20, 30);
    38. 38. Code: function factorial(num) { if (num <= 1) { return 1; } else { return num * arguments.callee(num - 1); } }
    39. 39. Code: function sum(num1, num2) { return num1 + num2; } function callSum1(num1, num2) { return sum.apply(this, [num1, num2]); } function callSum2(num1, num2) { return sum.call(this, num1, num2); }
    40. 40. • Function • • arguments • apply call
    41. 41. Code: window.color = “red”; var obj = {color: “blue”}; function sayColor() { alert(this.color); } sayColor(); obj.sayColor = sayColor; obj.sayColor();
    42. 42. Code: var Dog = function(msg) { this.msg = msg; this.shout = function() { alert(this.msg); }; this.waitAndShout = function() { setTimeout(function() { alert(this.msg) }, 5000); }; };
    43. 43. this • Java • this • this window this
    44. 44. Code: var Person = function(name) { this.name = name; this.sayName = function() { alert(this.name); }; }; var person1 = new Person(“Jack”); person1.sayName();
    45. 45. Code: var Person = function() {}; Person.prototype.name = “Jack”; Person. prototype.sayName = function() { alert(this.name); }; var person1 = new Person(); person1.sayName();
    46. 46. • •
    47. 47. Tips • Peron Person.prototype
    48. 48. Code: function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function() { return this.property; }; function SubType() { this.subProperty = false; } SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function() { return this. subProperty; };
    49. 49. Code: var instance = new SubType(); alert(instance.getSuperValue()); alert(instance.getSubValue()); alert(instance instanceof Object); alert(instance instanceof SuperType); alert(instance instanceof SubType);
    50. 50. • 1. ; 2. SubType.prototype; 3. SuperType.prototype;
    51. 51. • • • •
    52. 52. YUI
    53. 53. Thanks

    ×