An Introduction to JavaScript: Week 4

Introduction to JavaScript #4

@danielknell

Friday, 18 October 13

http://artsn.co/js-tpl

Friday, 18 October 13

Recapvar 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

Recapvar el = document.getElementById('output');

el.id;

el.className;

Friday, 18 October 13

Recapvar 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

Recapvar el = document.getElementById('output');

el.addEventListener('click', callback, false); // not IE < 9

el.attachEvent('onclick', callback); // IE < 9

Friday, 18 October 13

Recapvar el = document.getElementById('output');

function callback(e) { alert('hello world');

e.preventDefault(); e.stopPropagation();}

el.addEventListener('click', callback, false);

Friday, 18 October 13

RecapMath.round(0.5); // 1Math.floor(0.9); // 0Math.ceil(0.1); // 1

Math.abs(-1); // 1

Math.sqrt(9); // 3

Math.sin(1); // 0.8414709848078965Math.cos(1); // 0.5403023058681398Math.tan(1); // 1.5574077246549023Math.asin(1); // 1.5707963267948966Math.acos(1); // 0Math.atan(1); // 0.7853981633974483

Math.min(1, 5); // 1Math.max(1, 5); // 5

Math.PI; // 3.141592653589793Math.E; // 2.718281828459045

Friday, 18 October 13

Slide Puzzle

Friday, 18 October 13

Slide Puzzlechild.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

Recursion

Friday, 18 October 13

Recursionfunction counter(count) {

if (count === undefined) { count = 1; } console.log(count); if (count < 10) { counter(count + 1); }}

counter();

Friday, 18 October 13

Recursion

Friday, 18 October 13

Recursionfunction fib(n) {

if (n < 2) { return n; } return fib(n - 1) - fib(n - 2);}

Friday, 18 October 13

Recursion

Friday, 18 October 13

Scope

Friday, 18 October 13

Scopefunction 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

Classes

Friday, 18 October 13

Classesfunction Animal(name, sound) {

this.name = name; this.sound = sound;}

dog = new Animal('fido', 'woof!');

cat = new Animal('puss', 'meow!');

dog.name // fidocat.name // puss

Friday, 18 October 13

Classesfunction 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

Classesfunction Dog(name) {

this.name = name; this.sound = 'woof!';}

Dog.prototype = new Animal(null, null);

dog = new Dog('fido');

Friday, 18 October 13

Classesfunction Dog(name) {

Animal.call(this, name, 'woof!');}

Dog.prototype = new Animal(null, null);

Friday, 18 October 13

Slide Puzzle

Friday, 18 October 13

Thats All Folksemail: [email protected]

twitter: @danielknell

website: http://danielknell.co.uk/

Friday, 18 October 13