This document introduces JavaScript basics including expressions, conditionals, loops, functions, and objects. It covers numeric and string expressions, comparison operators, if/else statements, while and for loops. Functions are defined using both the function keyword and as variable assignments. Arrays can store multiple data types and values can be accessed or modified using indexes and length. Objects store key-value pairs and values can be accessed using dot notation or brackets.

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/