An Introduction to JavaScript: Week 5

396 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
396
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

An Introduction to JavaScript: Week 5

  1. 1. Introduction to JavaScript #5 @danielknell Wednesday, 23 October 13
  2. 2. http://artsn.co/js-tpl Wednesday, 23 October 13
  3. 3. Recap function counter(count) { if (count === undefined) { count = 1; } console.log(count); if (count < 10) { counter(count + 1); } } counter(); Wednesday, 23 October 13
  4. 4. Recap function fib(n) { if (n < 2) { return n; } return fib(n - 1) - fib(n - 2); } Wednesday, 23 October 13
  5. 5. Recap function greeter(greeting) { var count = 0 ; function greet(name) { count++; } } console.log(greeting + ' ' + name + '! (#' + count + ')'); return greet; hi = greeter('Hi'); hi('Bob'); // Hi Bob (#1) hi('Fred'); // Hi Fred (#2) count // undefined Wednesday, 23 October 13
  6. 6. Recap function Animal(name, sound) { this.name = name; this.sound = sound; } dog = new Animal('fido', 'woof!'); cat = new Animal('puss', 'meow!'); dog.name // fido cat.name // puss Wednesday, 23 October 13
  7. 7. Recap function Animal(name, sound) { this.name = name; this.sound = sound; } Animal.prototype.greet = function() { console.log(this.sound); } dog = new Animal('fido', 'woof!'); cat = new Animal('puss', 'meow!'); dog.greet(); cat.greet(); Wednesday, 23 October 13
  8. 8. Recap function Dog(name) { this.name = name; this.sound = 'woof!'; } Dog.prototype = new Animal(null, null); dog = new Dog('fido'); Wednesday, 23 October 13
  9. 9. Recap function Dog(name) { Animal.call(this, name, 'woof!'); } Dog.prototype = new Animal(null, null); Wednesday, 23 October 13
  10. 10. Refactoring Wednesday, 23 October 13
  11. 11. Refactoring var el; el = document.getElementById('foo'); el.style.color = 'red'; el = document.getElementById('bar'); el.style.color = 'red'; el = document.getElementById('baz'); el.style.color = 'red'; Wednesday, 23 October 13
  12. 12. Refactoring function makeRed(id) { var el = document.getElementById('foo'); el.style.color = 'red'; } makeRed('foo'); makeRed('bar'); makeRed('baz'); Wednesday, 23 October 13
  13. 13. Slide Puzzle Wednesday, 23 October 13
  14. 14. JSON { "name": "Daniel Knell" , "website": "http://danielknell.co.uk/" } Wednesday, 23 October 13
  15. 15. JSONP myCallback({ "name": "Daniel Knell" , "website": "http://danielknell.co.uk/" }) Wednesday, 23 October 13
  16. 16. JSONP <script> function myCallback(data) { console.log(data.name); console.log(data.website); } </script> <script src="http://api.example.com/user? callback=myCallback"></script> Wednesday, 23 October 13
  17. 17. Slide Puzzle Wednesday, 23 October 13
  18. 18. Thats All Folks email: contact@danielknell.co.uk twitter: @danielknell website: http://danielknell.co.uk/ Wednesday, 23 October 13

×