12. Recap
if (light === 'green') {
crossTheRoad();
}
else if (light === 'red') {
stop();
}
else {
lookConfused();
}
Friday, 4 October 13
13. Recap
switch (light) {
case 'blue':
case 'green':
crossTheRoad();
break;
case 'red':
stop();
break;
default:
lookConfused();
}
Friday, 4 October 13
14. Recap
var x = 1;
// this does not work
switch (x) {
case x > 1:
console.log('A');
break;
case x === 1:
console.log('B');
break;
}
Friday, 4 October 13
29. Finding Elements
var element = document.getElementById('puzzle');
var elements = document.getElementsByTagName('div');
var elements = document.getElementsByClassName('submit'); // not IE < 9
element.getElementById('child');
element.getElementsByTagName('span');
element.getElementsByClassName('foo');
Friday, 4 October 13
30. Finding Elements
#foobar
<div id="foobar"></div>
.foobar
<div class="foobar"></div>
div
<div></div>
div#foobar
<div id="foobar"></div> <p id="foobar"></p>
div.foobar
<div class="foobar"></div> <p class="foobar"></p>
div .foobar
<div id="baz"><p id="foobar"></p></div><div id="foobar"></div>
Friday, 4 October 13
31. Finding Elements
var element = document.querySelector('#reload .submit'); // not IE < 8
var elements = document.querySelectorAll('#reload .submit'); // not IE < 8
element.querySelector('#reload .submit'); // not IE < 8
element.querySelectorAll('#reload .submit'); // not IE < 8
Friday, 4 October 13
34. Creating Elements
var parent = document.getElementById('foobar');
var element = document.createElement('div');
parent.appendChild(element);
parent.insertBefore(element, someOtherElement);
parent.removeChild(element);
element.parentNode.removeChild(element);
Friday, 4 October 13
35. Changing Elements
var el = document.getElementById('output');
el.textContent = 'hello world';
Friday, 4 October 13
37. Fizz Buzz DOM
•Create a new <ol> element
•Append in the output div
•Create a new <li> element
•Set the contents to the line from fizzbuzz
•Append it to the <ol>
•Create more <li> elements
Friday, 4 October 13
38. Fizz Buzz DOM
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);
}
Friday, 4 October 13
39. Element Style
var el = document.getElementById('output');
// <div id="output" style="background-image: url('bg.jpg')"></div>
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
Friday, 4 October 13
41. “Pretty” Fizz Buzz
•Loop over the list elements in a new
loop
•Set all elements containing the text
Fizz, Buzz, and FizzBuzz to bold
•Make all odd lines red
Friday, 4 October 13
42. “Pretty” Fizz Buzz
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';
}
}
Friday, 4 October 13
43. Thats All Folks
email: contact@danielknell.co.uk
twitter: @danielknell
website: http://danielknell.co.uk/
Friday, 4 October 13