An Introduction to JavaScript: Week 4

Introduction to
JavaScript #4
@danielknell

Friday, 18 October 13

http://artsn.co/js-tpl


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]);
}
}


Recap
var el = document.getElementById('output');
el.id;
el.className;


Recap
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>


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


Recap
function callback(e) {
alert('hello world');
e.preventDefault();
e.stopPropagation();
}
el.addEventListener('click', callback, false);


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


Slide Puzzle


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;
}
});


Recursion


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


Recursion

}


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

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


Classes


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


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();


Classes
function Dog(name) {
this.name = name;
this.sound = 'woof!';
}
Dog.prototype = new Animal(null, null);
dog = new Dog('fido');


Classes
function Dog(name) {
Animal.call(this, name, 'woof!');
}
Dog.prototype = new Animal(null, null);


Thats All Folks
email: contact@danielknell.co.uk
twitter: @danielknell
website: http://danielknell.co.uk/


An Introduction to JavaScript: Week 4

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to An Introduction to JavaScript: Week 4 (20)

More from Event Handler (8)

Recently uploaded (20)

An Introduction to JavaScript: Week 4