1. Introduction to
JavaScript #1
@danielknell

2. Basics

3. Basics
•Expressions
•Conditionals
•Loops

4. Expressions

5. Expressions
•Math and Numbers
•Strings and Concatenation
•Special
•Booleans and Comparison
•Functions
•Objects and Arrays

6. http://artsn.co/js-repl

7. Numbers and Math

8. 42

9. 42.5

10. × ÷ + −

11. Math
4 * 2;
4 / 2;
4 + 2;
4 - 2;
100 % 3;
99 + (9 / 9);
-3;
-(3+1);

12. Mathmagical

13. Take a 4 digit
number
e.g. 1234

14. Shuffle the digits
e.g. 2413

15. Subtract the smaller
from the larger
e.g. 2413 - 1234

16. Sum the digits of the
result
e.g. 566 → 5 + 6 + 6 → 1 + 7 → 8

17. Sum the digits of the
result
e.g. 566 % 8

18. 0

19. Variables

20. Variables
var x = 5;
var y = 99 + (9 / 9);
var z = x * y;

21. More Math
var x = 5;
x++;
x--;

22. Strings and
Concatenation

23. Strings
"hello";
'world';
"hello" + "world";

24. Strings
"five plus two equals: " + (5 + 2);

25. Strings
var who = 'world';
var greeting = "hello" + who;
greeting[0]

26. Special

27. null

28. null
var x = null;

29. undefined

30. undefined
var x;

31. Boolean and
Comparison

32. True / False

33. False-ish
0
""
null
undefined

34. Boolean Math
true && true;
false || true;
!false;

35. Comparison
1 == "1";
1 != "2";
2 > "1";
1 < "2";
2 >= "1";
1 <= "2";
1 === 1;
1 !== "1";

36. Functions

37. Functions
function greet(who) {
return "hello" + who;
}
greet("world");

38. Functions
var greet = function(who) {
return "hello" + who;
}
greet("world");

39. Arrays and Objects

40. Arrays
var a = [1, 2, "three"];
a[0]; // 1
a[2]; // "three"
a.length; // 3
a[3]; // undefiend

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. Objects
var coords = { x: 1, "y": 2 };
coords["x"]; // 1
coords.y; // 2
coords.z; // undefined
{ var: 1 }
{ "var": 1 }

43. Conditionals

44. Conditionals
http://www.flickr.com/photos/blahflowers/4765476166

45. Conditionals

46. Conditionals
if the light is green
cross the road
else
stop

47. Conditionals
if (light === 'green') {
crossTheRoad();
}
else {
stop();
}

48. Conditionals
switch (light) {
case 'blue':
case 'green':
crossTheRoad();
break;
case 'red':
stop();
break;
default:
lookConfused();
}

49. Loops

50. Loops
http://www.flickr.com/photos/blahflowers/4765476166

51. Loops

52. Loops
while light is red
wait
cross the road

53. Loops
while (light === 'red') {
wait();
}
crossTheRoad();

54. Loops
do {
wait();
} while (light === 'red');
crossTheRoad();

55. Loops
for (var i = 0; i < 8; i++) {
potato(i);
}
more();

56. Loops
while (light === 'red') {
if (axeMurder === true) {
break;
}
wait();
}
crossTheRoad();

57. Loops
do {
wait();
if (light === 'flashing green') {
continue;
}
} while (light === 'red');
crossTheRoad();

58. Combined

59. Combined
http://www.flickr.com/photos/davelevy/7190079438

60. Combined

61. Combined
while light is not green
if light is red
wait
if light is amber
get ready
GO GO GO!

62. Combined
while (light != 'green') {
switch (light) {
case "red":
wait();
break;
case "amber":
getReady();
break;
default:
lookConfused();
}
}
goGoGo();

63. Complex Objects

64. Complex Objects
var person = {
name: "bob"
, greet: function() {
return "hi " + this.name + "!";
}
}
person.greet();

65. Complex Objects
var person = {
name: "bob"
, greet: function() {
return "hi " + this.name + "!";
}
}
console.log(person.greet());

66. Fizz Buzz

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. Fizz Buzz

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. Thats All Folks
email: contact@danielknell.co.uk
twitter: @danielknell
website: http://danielknell.co.uk/