an introduction to javascript: week one
DESCRIPTION
TRANSCRIPT
![Page 1: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/1.jpg)
Introduction to JavaScript #1
@danielknell
![Page 2: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/2.jpg)
Basics
![Page 3: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/3.jpg)
Basics
•Expressions
•Conditionals
•Loops
![Page 4: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/4.jpg)
Expressions
![Page 5: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/5.jpg)
Expressions•Math and Numbers
•Strings and Concatenation
•Special
•Booleans and Comparison
•Functions
•Objects and Arrays
![Page 6: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/6.jpg)
http://artsn.co/js-repl
![Page 7: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/7.jpg)
Numbers and Math
![Page 8: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/8.jpg)
42
![Page 9: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/9.jpg)
42.5
![Page 10: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/10.jpg)
× ÷ + −
![Page 11: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/11.jpg)
Math 4 * 2;4 / 2;4 + 2;4 - 2;100 % 3;99 + (9 / 9);-3;-(3+1);
![Page 12: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/12.jpg)
Mathmagical
![Page 13: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/13.jpg)
Take a 4 digit number
e.g. 1234
![Page 14: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/14.jpg)
Shuffle the digitse.g. 2413
![Page 15: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/15.jpg)
Subtract the smaller from the larger
e.g. 2413 - 1234
![Page 16: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/16.jpg)
Sum the digits of the result
e.g. 566 → 5 + 6 + 6 → 1 + 7 → 8
![Page 17: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/17.jpg)
Sum the digits of the resulte.g. 566 % 8
![Page 18: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/18.jpg)
0
![Page 19: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/19.jpg)
Variables
![Page 20: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/20.jpg)
Variables var x = 5;var y = 99 + (9 / 9);var z = x * y;
![Page 21: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/21.jpg)
More Math var x = 5;x++;x--;
![Page 22: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/22.jpg)
Strings and Concatenation
![Page 23: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/23.jpg)
Strings "hello";'world';"hello" + "world";
![Page 24: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/24.jpg)
Strings "five plus two equals: " + (5 + 2);
![Page 25: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/25.jpg)
Strings var who = 'world';var greeting = "hello" + who;
greeting[0]
![Page 26: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/26.jpg)
Special
![Page 27: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/27.jpg)
null
![Page 28: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/28.jpg)
nullvar x = null;
![Page 29: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/29.jpg)
undefined
![Page 30: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/30.jpg)
undefinedvar x;
![Page 31: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/31.jpg)
Boolean and Comparison
![Page 32: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/32.jpg)
True / False
![Page 33: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/33.jpg)
False-ish0""nullundefined
![Page 34: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/34.jpg)
Boolean Mathtrue && true;false || true;!false;
![Page 35: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/35.jpg)
Comparison1 == "1";1 != "2";2 > "1";1 < "2";2 >= "1";1 <= "2";
1 === 1;1 !== "1";
![Page 36: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/36.jpg)
Functions
![Page 37: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/37.jpg)
Functionsfunction greet(who) { return "hello" + who;}
greet("world");
![Page 38: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/38.jpg)
Functionsvar greet = function(who) { return "hello" + who;}
greet("world");
![Page 39: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/39.jpg)
Arrays and Objects
![Page 40: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/40.jpg)
Arraysvar a = [1, 2, "three"];
a[0]; // 1a[2]; // "three"a.length; // 3a[3]; // undefiend
![Page 41: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/41.jpg)
Arraysvar 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"]
![Page 42: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/42.jpg)
Objectsvar coords = { x: 1, "y": 2 };
coords["x"]; // 1coords.y; // 2coords.z; // undefined
{ var: 1 }{ "var": 1 }
![Page 43: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/43.jpg)
Conditionals
![Page 44: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/44.jpg)
Conditionalshttp://www.flickr.com/photos/blahflowers/4765476166
![Page 45: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/45.jpg)
Conditionals
![Page 46: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/46.jpg)
Conditionals if the light is green cross the roadelse stop
![Page 47: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/47.jpg)
Conditionals if (light === 'green') { crossTheRoad();}else { stop();}
![Page 48: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/48.jpg)
Conditionals switch (light) {case 'blue':case 'green': crossTheRoad(); break;case 'red': stop(); break;default: lookConfused();}
![Page 49: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/49.jpg)
Loops
![Page 50: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/50.jpg)
Loopshttp://www.flickr.com/photos/blahflowers/4765476166
![Page 51: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/51.jpg)
Loops
![Page 52: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/52.jpg)
Loops while light is red waitcross the road
![Page 53: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/53.jpg)
Loops while (light === 'red') { wait();}crossTheRoad();
![Page 54: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/54.jpg)
Loops do { wait();} while (light === 'red');
crossTheRoad();
![Page 55: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/55.jpg)
Loops for (var i = 0; i < 8; i++) { potato(i);}more();
![Page 56: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/56.jpg)
Loops while (light === 'red') { if (axeMurder === true) { break; } wait();}crossTheRoad();
![Page 57: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/57.jpg)
Loops do { wait(); if (light === 'flashing green') { continue; }} while (light === 'red');crossTheRoad();
![Page 58: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/58.jpg)
Combined
![Page 59: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/59.jpg)
Combinedhttp://www.flickr.com/photos/davelevy/7190079438
![Page 60: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/60.jpg)
Combined
![Page 61: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/61.jpg)
Combined while light is not green if light is red wait if light is amber get readyGO GO GO!
![Page 62: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/62.jpg)
Combined while (light != 'green') { switch (light) { case "red": wait(); break; case "amber": getReady(); break; default: lookConfused(); }}goGoGo();
![Page 63: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/63.jpg)
Complex Objects
![Page 64: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/64.jpg)
Complex Objects var person = { name: "bob", greet: function() { return "hi " + this.name + "!"; }}
person.greet();
![Page 65: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/65.jpg)
Complex Objects var person = { name: "bob", greet: function() { return "hi " + this.name + "!"; }}
console.log(person.greet());
![Page 66: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/66.jpg)
Fizz Buzz
![Page 67: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/67.jpg)
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
![Page 68: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/68.jpg)
Fizz Buzz
![Page 69: An Introduction to JavaScript: Week One](https://reader033.vdocuments.mx/reader033/viewer/2022051816/545b2446b1af9fc0638b5f08/html5/thumbnails/69.jpg)
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