introducing OO
Learning Javascript foundations
John Hunter
19 October 2008

what’s OO?
Object-oriented programming
(OOP) is a programming paradigm
that uses objects and their interactions
to design applications
source: wikipedia/Object Orientated

review

types
type examples
String ' Apples' \"42\"
primitive type
Number 42 3.12 -9
Boolean true false
Object { x: 100, y: 200 }
reference type
Array [' Apples', 42, 3.12]
Function function () { ... }

functions are like other types - we can
assign them to variables
function showMessage (msg) {
declare a named function
console.log(msg);
}
var showMessage = function (msg) {
declare a variable and assign it
console.log(msg);
an anonymous function
}

function showMessage (msg) {
console.log(msg);
}
showMessage('Goodbye');
create a reference to the
var showAnother = showMessage;
original function
showAnother('Hello');
Goodbye
Hello

showMessage Function
showAnother
call the
same
function
showAnother('Hello');
showMessage('Goodbye');

...now for something
completely different

by Roadsidepictures http://www.techlib.com/electronics/crystal.html
good bad

Object-oriented programming may be seen as a
collection of cooperating objects, as opposed to a
traditional view in which a program may be seen
as a group of tasks to compute (\"subroutines\").
Each object can be viewed as an independent little
machine with a distinct role or responsibility.
source: wikipedia/Object Orientated

radio
1.
volume
frequency
changeVolume ()
2.
changeTuner ()
1. properties - hold the state of an object
2. methods - provide the object with behaviour

...to the code:
the object module

var radio = {};
create an object literal

var radio = {
volume: 0,
frequency: 88.0
};
add properties which will store the object state

var radio = {
volume: 0,
frequency: 88.0,
changeVolume: function (direction) {},
changeTuner: function (direction) {}
};
add methods which will give the object behaviour

var radio = {
volume: 0,
frequency: 88.0,
changeVolume: function (direction) {
if (direction === 'up') this.volume += 1;
else this.volume -= 1;
},
changeTuner: function (direction) {
if (direction === 'up') this.frequency += 4;
else this.frequency -= 4;
}
};
code the functionality that gives methods their behaviour

adjust the volume...
radio.changeVolume('up'); // volume is 1
radio.changeVolume('up'); // volume is 2
radio.changeVolume('up'); // volume is 3
radio.changeVolume('down'); // volume is 2

tune in...
radio. changeTuner('up'); // frequency is 92.0 Mhz
radio. changeTuner('up'); // frequency is 96.0 Mhz
radio. changeTuner('up'); // frequency is 100.0 Mhz
radio. changeTuner('up'); // frequency is 104.0 Mhz
radio. changeTuner('up'); // frequency is 108.0 Mhz
radio. changeTuner('down'); // frequency is 104.0 Mhz

radio
volume
frequency
changeVolume ()
changeTuner ()
models the real world object
encapsulates code in a single object

lets see some
real code!

Review
functions, like objects, are a data type
OO approach:
- objects have roles and interact
- objects model the real world and are self-contained
object module:
- an object literal containing properies and functions
- allows you to structure code on object-oriented principles

homework!
r own
you
Build
radio
sistor
tran ome
s
arts
p
ed!!
clud
in

Thanks