Javascript foundations: Introducing OO

  • 638 views
Uploaded on

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.

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
638
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
1
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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