Introduction to JavaScript: Week Two

1,273 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,273
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to JavaScript: Week Two

  1. 1. Introduction to JavaScript #2 @danielknell Friday, 4 October 13
  2. 2. Recap 4 * 2; 4 / 2; 4 + 2; 4 - 2; 100 % 3; 99 + (9 / 9); -3; -(3+1); Friday, 4 October 13
  3. 3. Recap var x = 5; var y = 99 + (9 / 9); var z = x * y; x++; x--; Friday, 4 October 13
  4. 4. Recap "hello"; 'world'; "hello" + "world"; "five plus two equals: " + (5 + 2); var who = 'world'; var greeting = "hello" + who; greeting[0] Friday, 4 October 13
  5. 5. Recap var x = null; var y; y === undefined Friday, 4 October 13
  6. 6. Recap true && true; false || true; !false; falsy: 0 "" null undefined Friday, 4 October 13
  7. 7. Recap 1 == "1"; 1 != "2"; 2 > "1"; 1 < "2"; 2 >= "1"; 1 <= "2"; 1 === 1; 1 !== "1"; Friday, 4 October 13
  8. 8. Recap var greet = function(who) { return "hello" + who; } function greet(who) { return "hello" + who; } greet("world"); Friday, 4 October 13
  9. 9. Recap var a = [1, 2, "three"]; a[0]; // 1 a[2]; // "three" a.length; // 3 a[3]; // undefiend Friday, 4 October 13
  10. 10. Recap var a = [1, 2, "three"]; a.push("four"); a; // [1, 2, "three", "four"] var last = a.pop(); a; [1, 2, "three"] last; // "four" var first = a.shift(); a; [2, "three"] first; // 1 a.unshift("one"); a; ["one", 2, "three"] Friday, 4 October 13
  11. 11. Recap var coords = { x: 1, "y": 2 }; coords["x"]; // 1 coords.y; // 2 coords.z; // undefined { var: 1 } { "var": 1 } Friday, 4 October 13
  12. 12. Recap if (light === 'green') { crossTheRoad(); } else if (light === 'red') { stop(); } else { lookConfused(); } Friday, 4 October 13
  13. 13. Recap switch (light) { case 'blue': case 'green': crossTheRoad(); break; case 'red': stop(); break; default: lookConfused(); } Friday, 4 October 13
  14. 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
  15. 15. Recap while (light === 'red') { wait(); } crossTheRoad(); Friday, 4 October 13
  16. 16. Recap do { wait(); } while (light === 'red'); crossTheRoad(); Friday, 4 October 13
  17. 17. Recap for (var i = 0; i < 8; i++) { potato(i); } more(); Friday, 4 October 13
  18. 18. Recap while (light === 'red') { if (axeMurder === true) { break; } wait(); } crossTheRoad(); Friday, 4 October 13
  19. 19. Recap do { wait(); if (light === 'flashing green') { continue; } } while (light === 'red'); crossTheRoad(); Friday, 4 October 13
  20. 20. Recap var person = { name: "bob" , greet: function() { return "hi " + this.name + "!"; } } person.greet(); Friday, 4 October 13
  21. 21. Recap if (something) { } else { } something(); Friday, 4 October 13
  22. 22. Recap for (var i = 1; i <= 100; ++i) { if (i % 3 === 0 && i % 5 === 0) { console.log('FizzBuzz'); } else if (i % 3 === 0) { console.log('Fizz'); } else if (i % 5 === 0) { console.log('Buzz'); } else { console.log(i); } } Friday, 4 October 13
  23. 23. http://artsn.co/js-tpl Friday, 4 October 13
  24. 24. DOM Friday, 4 October 13
  25. 25. Sorry Friday, 4 October 13
  26. 26. Really, really sorry Friday, 4 October 13
  27. 27. DOM <!DOCTYPE html> <html lang="en"> <head> <title>Hello World</title> <link rel="stylesheet" href="assets/css/main.css"> </head> <body> <div id="output"></div> <form id="reload"> <button class="submit” type="submit">Random</button> </form> <script src="assets/js/main.js"></script> </body> </html> Friday, 4 October 13
  28. 28. DOM Friday, 4 October 13
  29. 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. 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. 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
  32. 32. Traversing Elements var children = element.children; var parent = element.parentNode; Friday, 4 October 13
  33. 33. Traversing Elements Friday, 4 October 13
  34. 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. 35. Changing Elements var el = document.getElementById('output'); el.textContent = 'hello world'; Friday, 4 October 13
  36. 36. Fizz Buzz DOM Friday, 4 October 13
  37. 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. 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. 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
  40. 40. “Pretty” Fizz Buzz Friday, 4 October 13
  41. 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. 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. 43. Thats All Folks email: contact@danielknell.co.uk twitter: @danielknell website: http://danielknell.co.uk/ Friday, 4 October 13

×