• Save
Javascript foundations: Introducing OO
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Javascript foundations: Introducing OO

  • 1,863 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
1,863
On Slideshare
1,808
From Embeds
55
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
1
Likes
5

Embeds 55

http://www.genes.com 34
http://www.slideshare.net 15
http://forum.fcicafe.com 4
http://idev.techpool 2

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