This presentation forms part of a tutorial on learning Javascript foundations. It is an introduction to the basic concepts of object oriented programming and using Javascript objects to organise code.

1. introducing OO
Learning Javascript foundations
John Hunter
19 October 2008

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

3. review

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

5. 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
}

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

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

8. ...now for something
completely different

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

10. 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 (quot;subroutinesquot;).
Each object can be viewed as an independent little
machine with a distinct role or responsibility.
source: wikipedia/Object Orientated

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

12. ...to the code:
the object module

13. var radio = {};
create an object literal

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

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

16. 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

17. 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

18. 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

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

20. lets see some
real code!

21. 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

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

23. Thanks