An Introduction to JavaScript: Week 3

Introduction to
JavaScript #3
@danielknell
Friday, 11 October 13

Recap
var element = document.getElementById('puzzle');
var elements = document.getElementsByTagName('div');
var elements = document.getElementsByClassName('submit'); // not IE < 9
var element = document.querySelector('#reload .submit'); // not IE < 8
var elements = document.querySelectorAll('#reload .submit'); // not IE < 8
element.getElementById('child');
element.getElementsByTagName('span');
element.getElementsByClassName('foo');
element.querySelector('#reload .submit'); // not IE < 8
element.querySelectorAll('#reload .submit'); // not IE < 8a

Recap
var children = element.children;
var parent = element.parentNode;

Recap
var parent = document.getElementById('foobar');
var element = document.createElement('div');
parent.appendChild(element);
parent.insertBefore(element, someOtherElement);
parent.removeChild(element);
element.parentNode.removeChild(element);
element.textContent = 'hello world';

Recap
var ol = document.createElement('ol')
, el
;
document.getElementById('output').appendChild(ol);
for (var i = 1; i <= 100; ++i) {
el = document.createElement('li');
if (i % 3 === 0 && i % 5 === 0) {
el.textContent = 'FizzBuzz';
}
else if (i % 3 === 0) {
el.textContent = 'Fizz';
}
else if (i % 5 === 0) {
el.textContent = 'Buzz';
}
else {
el.textContent = i;
}
ol.appendChild(el);
}

Recap
var el = document.getElementById('output');
el.style.backgroundImage = "url('bg.jpg')";
el.style.fontWeight = ‘bold’;
el.style.color = ‘red’;
window.getComputedStyle(el).backgroundImage; // not IE <
9
el.currentStyle.backgroundImage; // IE < 9

Recap
var items = ol.children
;
for (var i = 0; i < items.length; ++i) {
el = items[i];
if (
el.textContent === 'FizzBuzz' ||
el.textContent === 'Fizz' ||
el.textContent === 'Buzz'
) {
el.style.fontWeight = 'bold';
}
if (i % 2 === 0) {
el.style.color = 'red';
}
}

http://artsn.co/js-tpl

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

Element Property
el.id;
el.className;

Math is Hard

Math is Hard
.item {
display: block;
position: absolute;
line-height: 40px;
text-align: center;
}
#output {
position: relative;
overflow: hidden;
border: 1px solid #000;
margin: 20px auto;
}

Math is Hard
var x
, y
, i = 0
, pieceWidth = 40
, pieceHeight = 40
, el = document.getElementById('output')
, size = 11
;
for (x = 0; x < size; x++) {
for (y = 0; y < size; y++) {
child = document.createElement('div');
child.style.width = pieceWidth + 'px';
child.style.height = pieceHeight + 'px';
child.style.left = (x * pieceWidth) + 'px';
child.style.top = (y * pieceHeight) + 'px';
child.className = 'item'
// to be continued...

Math is Hard
if (x === 0 || y === 0) {
child.style.backgroundColor = '#eee';
}
if (x === 0 && y === 0) {
child.innerHTML = '+'
}
else {
child.textContent = x + y;
}
el.appendChild(child);
i++;
}
}
el.style.width = pieceWidth * size + 'px';
el.style.height = pieceHeight * size + 'px';

Element Attribute
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>

Slide Puzzle

Slide Puzzle
var x
, y
, i = 0
, bgX
, bgY
, size = 5
, pieceWidth = Math.floor(612 / size)
, pieceHeight = Math.floor(612 / size)
, el = document.getElementById('output')
;
for (x = 0; x < size; x++) {
for (y = 0; y < size; y++) {
if (x == size - 1 && y == size - 1) {
continue;
}
bgX = pieceWidth * x;
bgY = pieceHeight * y;
child = document.createElement('div');
// to be continued...

Slide Puzzle
child.style.backgroundPosition = "-" + bgX + 'px -' + bgY
+ 'px';
child.style.width = pieceWidth + 'px';
child.style.height = pieceHeight + 'px';
child.style.left = (x * pieceWidth) + 'px';
child.style.top = (y * pieceHeight) + 'px';
child.className = 'piece'
child.setAttribute('data-x', x);
child.setAttribute('data-y', y);
el.appendChild(child);
}
}
el.style.width = pieceWidth * size + 'px';
el.style.height = pieceHeight * size + 'px';

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

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

Greeter
<div id="output">
<form id="form">
<label for="input">Name</label>
<input id="input" type="text">
<button type="submit">Greet</button>
</form>
</div>

Moar Math!

Moar Math!
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); // 0.8414709848078965
Math.cos(1); // 0.5403023058681398
Math.tan(1); // 1.5574077246549023
Math.asin(1); // 1.5707963267948966
Math.acos(1); // 0
Math.atan(1); // 0.7853981633974483
Math.min(1, 5); // 1
Math.max(1, 5); // 5
Math.PI; // 3.141592653589793
Math.E; // 2.718281828459045

Slide Puzzle
.piece {
background-image: url('../img/image.jpg');
display: block;
position: absolute;
transition: top 1s, left 1s;
}
#output {
position: relative;
overflow: hidden;
border: 1px solid #000;
margin: 20px auto;
}

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

An Introduction to JavaScript: Week 3

Recommended

More Related Content

What's hot (7)

Viewers also liked (20)

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

More from Event Handler (8)

Recently uploaded (20)

An Introduction to JavaScript: Week 3