This document provides a recap and introduction to various JavaScript concepts including selecting elements, manipulating the DOM, events, and math functions. It discusses getting and setting element properties, creating and appending elements, using styles, and basic animation. Examples are provided for selecting elements, traversing the DOM tree, adding and removing elements, and handling click events.
2. 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
Friday, 11 October 13
3. Recap
var children = element.children;
var parent = element.parentNode;
Friday, 11 October 13
4. 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';
Friday, 11 October 13
5. 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);
}
Friday, 11 October 13
6. 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
Friday, 11 October 13
7. 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';
}
}
Friday, 11 October 13
9. 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]);
}
}
Friday, 11 October 13
10. Element Property
var el = document.getElementById('output');
el.id;
el.className;
Friday, 11 October 13
20. Events
var el = document.getElementById('output');
el.addEventListener('click', callback, false); // not IE < 9
el.attachEvent('onclick', callback); // IE < 9
Friday, 11 October 13
21. Events
var el = document.getElementById('output');
function callback(e) {
alert('hello world');
e.preventDefault();
}
el.addEventListener('click', callback, false);
Friday, 11 October 13