Upcoming SlideShare
×

# An Introduction to JavaScript: Week One

330
-1

Published on

1 Like
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

Views
Total Views
330
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
14
0
Likes
1
Embeds 0
No embeds

No notes for slide

### An Introduction to JavaScript: Week One

1. 1. Introduction to JavaScript #1 @danielknell
2. 2. Basics
3. 3. Basics •Expressions •Conditionals •Loops
4. 4. Expressions
5. 5. Expressions •Math and Numbers •Strings and Concatenation •Special •Booleans and Comparison •Functions •Objects and Arrays
6. 6. http://artsn.co/js-repl
7. 7. Numbers and Math
8. 8. 42
9. 9. 42.5
10. 10. × ÷ + −
11. 11. Math 4 * 2; 4 / 2; 4 + 2; 4 - 2; 100 % 3; 99 + (9 / 9); -3; -(3+1);
12. 12. Mathmagical
13. 13. Take a 4 digit number e.g. 1234
14. 14. Shufﬂe the digits e.g. 2413
15. 15. Subtract the smaller from the larger e.g. 2413 - 1234
16. 16. Sum the digits of the result e.g. 566 → 5 + 6 + 6 → 1 + 7 → 8
17. 17. Sum the digits of the result e.g. 566 % 8
18. 18. 0
19. 19. Variables
20. 20. Variables var x = 5; var y = 99 + (9 / 9); var z = x * y;
21. 21. More Math var x = 5; x++; x--;
22. 22. Strings and Concatenation
23. 23. Strings "hello"; 'world'; "hello" + "world";
24. 24. Strings "five plus two equals: " + (5 + 2);
25. 25. Strings var who = 'world'; var greeting = "hello" + who; greeting[0]
26. 26. Special
27. 27. null
28. 28. null var x = null;
29. 29. undeﬁned
30. 30. undeﬁned var x;
31. 31. Boolean and Comparison
32. 32. True / False
33. 33. False-ish 0 "" null undefined
34. 34. Boolean Math true && true; false || true; !false;
35. 35. Comparison 1 == "1"; 1 != "2"; 2 > "1"; 1 < "2"; 2 >= "1"; 1 <= "2"; 1 === 1; 1 !== "1";
36. 36. Functions
37. 37. Functions function greet(who) { return "hello" + who; } greet("world");
38. 38. Functions var greet = function(who) { return "hello" + who; } greet("world");
39. 39. Arrays and Objects
40. 40. Arrays var a = [1, 2, "three"]; a[0]; // 1 a[2]; // "three" a.length; // 3 a[3]; // undefiend
41. 41. Arrays 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"]
42. 42. Objects var coords = { x: 1, "y": 2 }; coords["x"]; // 1 coords.y; // 2 coords.z; // undefined { var: 1 } { "var": 1 }
43. 43. Conditionals
44. 44. Conditionals http://www.ﬂickr.com/photos/blahﬂowers/4765476166
45. 45. Conditionals
46. 46. Conditionals if the light is green cross the road else stop
47. 47. Conditionals if (light === 'green') { crossTheRoad(); } else { stop(); }
48. 48. Conditionals switch (light) { case 'blue': case 'green': crossTheRoad(); break; case 'red': stop(); break; default: lookConfused(); }
49. 49. Loops
50. 50. Loops http://www.ﬂickr.com/photos/blahﬂowers/4765476166
51. 51. Loops
52. 52. Loops while light is red wait cross the road
53. 53. Loops while (light === 'red') { wait(); } crossTheRoad();
54. 54. Loops do { wait(); } while (light === 'red'); crossTheRoad();
55. 55. Loops for (var i = 0; i < 8; i++) { potato(i); } more();
56. 56. Loops while (light === 'red') { if (axeMurder === true) { break; } wait(); } crossTheRoad();
57. 57. Loops do { wait(); if (light === 'flashing green') { continue; } } while (light === 'red'); crossTheRoad();
58. 58. Combined
59. 59. Combined http://www.ﬂickr.com/photos/davelevy/7190079438
60. 60. Combined
61. 61. Combined while light is not green if light is red wait if light is amber get ready GO GO GO!
62. 62. Combined while (light != 'green') { switch (light) { case "red": wait(); break; case "amber": getReady(); break; default: lookConfused(); } } goGoGo();
63. 63. Complex Objects
64. 64. Complex Objects var person = { name: "bob" , greet: function() { return "hi " + this.name + "!"; } } person.greet();
65. 65. Complex Objects var person = { name: "bob" , greet: function() { return "hi " + this.name + "!"; } } console.log(person.greet());
66. 66. Fizz Buzz
67. 67. Fizz Buzz •Count to 100 printing each number •For numbers divisible by 3 print “Fizz” instead •For numbers divisible by 5 print “Buzz” instead •For numbers divisible by 3 and 5 print “FizzBuzz” instead
68. 68. Fizz Buzz
69. 69. Fizz Buzz •Count to 100 printing each number •For numbers divisible by 3 print “Fizz” instead •For numbers divisible by 5 print “Buzz” instead •For numbers divisible by 3 and 5 print “FizzBuzz” instead
70. 70. Thats All Folks email: contact@danielknell.co.uk twitter: @danielknell website: http://danielknell.co.uk/
1. #### A particular slide catching your eye?

Clipping is a handy way to collect important slides you want to go back to later.