Download as PDF, PPTX
![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](https://image.slidesharecdn.com/introjs-week3-131011064217-phpapp01/75/An-Introduction-to-JavaScript-Week-3-7-2048.jpg)
![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](https://image.slidesharecdn.com/introjs-week3-131011064217-phpapp01/75/An-Introduction-to-JavaScript-Week-3-9-2048.jpg)
An Introduction to JavaScript: Week 3
- 1. Introduction to JavaScript #3 @danielknell Friday,11 October 13
- 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
- 8.
- 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
- 11. Math is Hard Friday,11 October 13
- 12. 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; } Friday, 11 October 13
- 13. Math is Hard varx , 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... Friday, 11 October 13
- 14. 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'; Friday, 11 October 13
- 15. Element Attribute var 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> Friday, 11 October 13
- 16. Slide Puzzle Friday, 11October 13
- 17. 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... Friday, 11 October 13
- 18. 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'; Friday, 11 October 13
- 19.
- 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
- 22.
- 23. Greeter <div id="output"> <form id="form"> <labelfor="input">Name</label> <input id="input" type="text"> <button type="submit">Greet</button> </form> </div> Friday, 11 October 13
- 24. Moar Math! Friday, 11October 13
- 25. 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 Friday, 11 October 13
- 26. 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; } Friday, 11 October 13
- 27. Slide Puzzle Friday, 11October 13
- 28. Thats All Folks email:contact@danielknell.co.uk twitter: @danielknell website: http://danielknell.co.uk/ Friday, 11 October 13