An Introduction to JavaScript: Week One

Introduction to
JavaScript #1
@danielknell

Basics
•Expressions
•Conditionals
•Loops

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

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

Take a 4 digit
number
e.g. 1234

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
result
e.g. 566 % 8

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

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

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

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

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

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

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

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

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

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

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

Objects
var coords = { x: 1, "y": 2 };
coords["x"]; // 1
coords.y; // 2
coords.z; // undefined
{ var: 1 }
{ "var": 1 }

Conditionals
http://www.ﬂickr.com/photos/blahﬂowers/4765476166

Conditionals
if the light is green
cross the road
else
stop

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

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

Loops
http://www.ﬂickr.com/photos/blahﬂowers/4765476166

Loops
while light is red
wait
cross 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
http://www.ﬂickr.com/photos/davelevy/7190079438

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

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

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
•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
•Count to 100 printing
each number
•For numbers divisible by
3 print “Fizz” instead
5 print “Buzz” instead
3 and 5 print
“FizzBuzz” instead

Thats All Folks
email: contact@danielknell.co.uk
twitter: @danielknell
website: http://danielknell.co.uk/

An Introduction to JavaScript: Week One

More Related Content

Viewers also liked

Similar to An Introduction to JavaScript: Week One

More from Event Handler

Recently uploaded

An Introduction to JavaScript: Week One