An Introduction to JavaScript: Week One

Introduction to JavaScript #1

@danielknell

Basics

Basics

•Expressions

•Conditionals

•Loops

Expressions

Expressions•Math and Numbers

•Strings and Concatenation

•Special

•Booleans and Comparison

•Functions

•Objects and Arrays

http://artsn.co/js-repl

Numbers and Math

42

42.5

× ÷ + −

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

Mathmagical

Take a 4 digit number

e.g. 1234

Shuffle the digitse.g. 2413

Subtract the smaller from the larger

e.g. 2413 - 1234

Sum the digits of the result

e.g. 566 → 5 + 6 + 6 → 1 + 7 → 8

Sum the digits of the resulte.g. 566 % 8

0

Variables

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

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

Strings and Concatenation

Strings "hello";'world';"hello" + "world";

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

Strings var who = 'world';var greeting = "hello" + who;

greeting[0]

Special

null

nullvar x = null;

undefined

undefinedvar x;

Boolean and Comparison

True / False

False-ish0""nullundefined

Boolean Mathtrue && true;false || true;!false;

Comparison1 == "1";1 != "2";2 > "1";1 < "2";2 >= "1";1 <= "2";

1 === 1;1 !== "1";

Functions

Functionsfunction greet(who) { return "hello" + who;}

greet("world");

Functionsvar greet = function(who) { return "hello" + who;}

greet("world");

Arrays and Objects

Arraysvar a = [1, 2, "three"];

a[0]; // 1a[2]; // "three"a.length; // 3a[3]; // undefiend

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"]

Objectsvar coords = { x: 1, "y": 2 };

coords["x"]; // 1coords.y; // 2coords.z; // undefined

{ var: 1 }{ "var": 1 }

Conditionals

Conditionalshttp://www.flickr.com/photos/blahflowers/4765476166

Conditionals

Conditionals if the light is green cross the roadelse stop

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

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

Loops

Loopshttp://www.flickr.com/photos/blahflowers/4765476166

Loops

Loops while light is red waitcross the road

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

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

crossTheRoad();

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

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

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

Combined

Combinedhttp://www.flickr.com/photos/davelevy/7190079438

Combined

Combined while light is not green if light is red wait if light is amber get readyGO GO GO!

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

Complex Objects

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

person.greet();

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

console.log(person.greet());

Fizz Buzz

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

Fizz Buzz

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

Thats All Folksemail: contact@danielknell.co.uk

twitter: @danielknell

website: http://danielknell.co.uk/