Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

An Introduction to JavaScript: Week 3

537 views

Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

An Introduction to JavaScript: Week 3

  1. 1. Introduction to JavaScript #3 @danielknell Friday, 11 October 13
  2. 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. 3. Recap var children = element.children; var parent = element.parentNode; Friday, 11 October 13
  4. 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. 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. 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. 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. 8. http://artsn.co/js-tpl Friday, 11 October 13
  9. 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. 10. Element Property var el = document.getElementById('output'); el.id; el.className; Friday, 11 October 13
  11. 11. Math is Hard Friday, 11 October 13
  12. 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. 13. 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... Friday, 11 October 13
  14. 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. 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. 16. Slide Puzzle Friday, 11 October 13
  17. 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. 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. 19. Events Friday, 11 October 13
  20. 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. 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. 22. Greeter Friday, 11 October 13
  23. 23. Greeter <div id="output"> <form id="form"> <label for="input">Name</label> <input id="input" type="text"> <button type="submit">Greet</button> </form> </div> Friday, 11 October 13
  24. 24. Moar Math! Friday, 11 October 13
  25. 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. 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. 27. Slide Puzzle Friday, 11 October 13
  28. 28. Thats All Folks email: contact@danielknell.co.uk twitter: @danielknell website: http://danielknell.co.uk/ Friday, 11 October 13

×