![Recap
var data = [[0, 1, 2, 3], [4, 5], [6, 7, 8, 9]]
;
for (var x = 0; x < data.length; ++x) {
for (var y = 0; y < data[x].length; ++y) {
console.log(data[x][y]);
}
}
Friday, 18 October 13](https://image.slidesharecdn.com/introjs-week4-131018094242-phpapp02/85/An-Introduction-to-JavaScript-Week-4-3-320.jpg)
An Introduction to JavaScript: Week 4
- 1. Introduction to JavaScript #4 @danielknell Friday, 18 October 13
- 3. Recap var data = [[0, 1, 2, 3], [4, 5], [6, 7, 8, 9]] ; for (var x = 0; x < data.length; ++x) { for (var y = 0; y < data[x].length; ++y) { console.log(data[x][y]); } } Friday, 18 October 13
- 4. Recap var el = document.getElementById('output'); el.id; el.className; Friday, 18 October 13
- 5. Recap var el = document.getElementById('output'); el.setAttribute('lang', 'en'); el.getAttribute('lang'); // <div id="output" lang="en"></div> el.setAttribute('data-foo', 'foo'); el.getAttribute('data-foo'); // <div id="output" data-foo="foo"></div> Friday, 18 October 13
- 6. Recap var el = document.getElementById('output'); el.addEventListener('click', callback, false); // not IE < 9 el.attachEvent('onclick', callback); // IE < 9 Friday, 18 October 13
- 7. Recap var el = document.getElementById('output'); function callback(e) { alert('hello world'); e.preventDefault(); e.stopPropagation(); } el.addEventListener('click', callback, false); Friday, 18 October 13
- 8. Recap Math.round(0.5); // 1 Math.floor(0.9); // 0 Math.ceil(0.1); // 1 Math.abs(-1); // 1 Math.sqrt(9); // 3 Math.sin(1); Math.cos(1); Math.tan(1); Math.asin(1); Math.acos(1); Math.atan(1); // // // // // // 0.8414709848078965 0.5403023058681398 1.5574077246549023 1.5707963267948966 0 0.7853981633974483 Math.min(1, 5); // 1 Math.max(1, 5); // 5 Math.PI; // 3.141592653589793 Math.E; // 2.718281828459045 Friday, 18 October 13
- 9. Slide Puzzle Friday, 18 October 13
- 10. Slide Puzzle child.addEventListener('click', function(e) { var x = this.getAttribute('data-x') , y = this.getAttribute('data-y') , ok = false ; if (x == pos.x && Math.abs(y - pos.y) == 1) { ok = true; } if (y == pos.y && Math.abs(x - pos.x) == 1) { ok = true; } if (ok) { this.style.left = (pos.x * pieceWidth) + 'px'; this.style.top = (pos.y * pieceHeight) + 'px'; this.setAttribute('data-x', pos.x); this.setAttribute('data-y', pos.y); pos.x = x; pos.y = y; } }); Friday, 18 October 13
- 11. Recursion Friday, 18 October 13
- 12. Recursion function counter(count) { if (count === undefined) { count = 1; } console.log(count); if (count < 10) { counter(count + 1); } } counter(); Friday, 18 October 13
- 13. Recursion Friday, 18 October 13
- 14. Recursion } Friday, 18 October 13 function fib(n) { if (n < 2) { return n; } return fib(n - 1) - fib(n - 2);
- 15. Recursion Friday, 18 October 13
- 16. Scope Friday, 18 October 13
- 17. Scope 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 Friday, 18 October 13
- 18. Classes Friday, 18 October 13
- 19. Classes 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 Friday, 18 October 13
- 20. Classes 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(); Friday, 18 October 13
- 21. Classes function Dog(name) { this.name = name; this.sound = 'woof!'; } Dog.prototype = new Animal(null, null); dog = new Dog('fido'); Friday, 18 October 13
- 22. Classes function Dog(name) { Animal.call(this, name, 'woof!'); } Dog.prototype = new Animal(null, null); Friday, 18 October 13
- 23. Slide Puzzle Friday, 18 October 13
- 24. Thats All Folks email: contact@danielknell.co.uk twitter: @danielknell website: http://danielknell.co.uk/ Friday, 18 October 13