The document is a series of slides from an introduction to JavaScript presentation. It recaps concepts like arrays, DOM manipulation, events, math functions, recursion, scope, and classes. It also demonstrates a slide puzzle game built with JavaScript and recursion. The final slide thanks attendees and provides contact information for the presenter.

1. Introduction to
JavaScript #4
@danielknell
Friday, 18 October 13

2. http://artsn.co/js-tpl
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