An Introduction to JavaScript: Week 3

Introduction to JavaScript #3

@danielknell

Friday, 11 October 13

Recapvar 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


Recapvar 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';


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


Recapvar 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


Recapvar 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 Loopsvar 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 Propertyvar el = document.getElementById('output');

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 Hardvar 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 Attributevar 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>


Slide Puzzle


Slide Puzzlevar 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


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

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

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


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

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

e.preventDefault();}

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


Greeter


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


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


Slide Puzzle


Thats All Folksemail: [email protected]

twitter: @danielknell

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


Technology

An Introduction to JavaScript: Week 3