1. Object-Oriented Design Excerpted from Number 2130: “Imaginary Christmases”, from http://www.questionablecontent.net/. Used with permission of the artist, Jeph Jacques.http://www.questionablecontent.net/

2. What will we learn? What are objects? What are object classes? How to implement objects correctly. How to draw UML Class diagrams Some prinicples of Object-Oriented Design.

3. transaction.numberOfShares = Math.floor((transaction.dollarAmt - transaction.commission) / transaction.sharePurchasePrice); transaction.costOfTransaction = (transaction.numberOfShares * transaction.sharePurchasePrice) + transaction.commission; transaction.unspent = transaction.dollarAmt - transaction.costOfTransaction; Transaction numberOfShares costOfTransaction unspent dollarAmt commission sharePurchasePrice Quiz questions nextQuestion Question type answers questionText nextAnswer Answer answerText correctOrIncorrect 1(0, n)1

4. Objects have: Types (Transaction, Quiz, Question, Answer) Also known as “Class” or “Object Class” Properties (transaction.numberOfShares, question.questionText) Also known as “attributes”, “members”, “member variables”

5. transaction.dollarAmt.toFixed(2) document.getElementById(“quizText”) quizText.split(“\n”) Take some object and apply some function to it.

6. Objects have: Types (Transaction, Quiz, Question, Answer) Also known as “Class” or “Object Class” Properties (transaction.numberOfShares, question.questionText) Also known as “attributes”, “members”, “member variables” Member functions (text.split(separator), document.getElementById(id)) Also known as “methods”

7. Quiz questions nextQuestion Question type answers questionText nextAnswer Answer answerText correctOrIncorrect 1(0, n)1 Universal Modeling Language (UML) Conceptual Class Diagram toHTML(): String score(): Number addAnswer(answer) toHTML(): String

8. transaction.dollarAmt.toFixed(2) document.getElementById(“quizText”) quizText.split(“\n”) Take some object and apply some function to it. function mySplit(text, separator) { var lines=new Array(); var pos; do { pos=text.search(separator); if(pos>-1) { lines[lines.length]=text.substr(0, pos); text=text.substr(pos+1); } } while(pos>-1); lines[lines.length]=text; return(lines); } Would quizText.mySplit(“\n”) work? If I defined a function “mySplit” like this:

9. quizText.mySplit(“\n”) doesn’t work: mySplit is expecting two parameters quizText.mySplit is undefined OK, so set quizText.mySplit = mySplit; OK, so change the function definiton: function mySplit(separator) { var lines=new Array(); var pos; do { pos=text.search(separator); if(pos>-1) { lines[lines.length]=text.substr(0, pos); text=text.substr(pos+1); } } while(pos>-1); lines[lines.length]=text; return(lines); } Oops, now “text” is undefined. Introducing the “this” variable.

10. function mySplit(separator) { var lines=new Array(); var text=this; var pos; do { pos=text.search(separator); if(pos>-1) { lines[lines.length]=text.substr(0, pos); text=text.substr(pos+1); } } while(pos>-1); lines[lines.length]=text; return(lines); } function someFunction() { var text=“To be or not to be, that is the question.”; var lines; text.mySplit=mySplit; lines=text.mySplit(“ “); … some other code … } Where do we set our methods?

11. function Question(questionText) { var question=new Object(); question.questionText=questionText; question.answers=new Array(); return(question); } function someFunction() { var question; … question = Question(lineFields[2]); … } function Question(questionText) { this.questionText=questionText; this.answers=new Array(); } function someFunction() { var question; … question = new Question(lineFields[2]); … } Wrong Right

12. Objects have: Types (Transaction, Quiz, Question, Answer) Also known as “Class” or “Object Class” Properties (transaction.numberOfShares, question.questionText) Also known as “attributes”, “members”, “member variables” Member functions (text.split(separator), document.getElementById(id)) Also known as “methods” Constructors (Quiz(), Question(), MultipleChoiceQuestion(), Answer())

13. function QuestionAddAnswer(answer) { this.answers[this.answers.length]=answer; answer.id="A"+this.answers.length; } function QuestionToHTML(q) { var text = ""; text += " Question "+(q+1)+" "+this.questionText+" "; text += " "; for(a=0; a<this.answers.length; a++) { text += this.answerToHTML(a); } text += " "; return text; } function Question(questionText) { this.questionText=questionText; this.answers=new Array(); this.addAnswer=QuestionAddAnswer; this.toHTML=QuestionToHTML; } function someFunction() { var question; … question = new Question(lineFields[2]); … }

14. Objects have: Types (Transaction, Quiz, Question, Answer) Also known as “Classes” or “Object Classes” Properties (transaction.numberOfShares, question.questionText) Also known as “attributes”, “members”, “member variables” Member functions (text.split(separator), document.getElementById(id)) Also known as “methods” Constructors (Quiz(), Question(), MultipleChoiceQuestion(), Answer()) Instances (new Quiz(), new Question(), new Array(), new Object()) You “instantiate” an object class to create a new object, or “instance” Object classes have:

15. One of the main principles of OOP: “Encapsulation” Object classes are little “bundles” of properties and methods This make object classes cohesive, allowing easy reuse An object class “encapsulates” its properties and methods Meaning 1: Object classes can “hide” their implementations Meaning 2: Implementations can change without changing all the code that uses them This is like plugging in a different keyboard in your computer The Question class we just looked at encapsulates its functionality in the first sense.

16. function QuestionToHTML(q) { var text = ""; text += " Question "+(q+1)+" "+this.questionText+" "; text += " "; for(a=0; a<this.answers.length; a++) { text += this.answerToHTML(a); } text += " "; return text; } function MultipleChoiceAnswerToHTML(a) { var answer=this.answers[a]; return " <input type=\"radio\" name=\"“ +this.id+"\" id=\""+this.id+answer.id+"\" /> "+answer.answerText +" "; } function MultipleChoiceQuestion(questionText) { Question.call(this, questionText); … this.answerToHTML=MultipleChoiceAnswerToHTML; … }

17. function QuestionToHTML(q) { var text = ""; text += " Question "+(q+1)+" "+this.questionText+" "; text += " "; for(a=0; a<this.answers.length; a++) { text += this.answerToHTML(a); } text += " "; return text; } function CheckAllAnswerToHTML(a) { var answer=this.answers[a]; return " <input type=\"checkbox\" id=\"" +this.id+answer.id+"\" /> "+answer.answerText +" "; } function CheckAllQuestion(questionText, feedbackText) { Question.call(this, questionText); … this.answerToHTML=CheckAllAnswerToHTML; … }

18. MultipleChoiceQuestions and CheckAllQuestions are both types of Questions They both have all the properties and methods of the Question class They also have custom methods for displaying their answers

19. Objects have: Types (Transaction, Quiz, Question, Answer) Also known as “Classes” or “Object Classes” Properties (transaction.numberOfShares, question.questionText) Also known as “attributes”, “members”, “member variables” Member functions (text.split(separator), document.getElementById(id)) Also known as “methods” Constructors (Quiz(), Question(), MultipleChoiceQuestion(), Answer()) Instances (new Quiz(), new Question(), new Array(), new Object()) You “instantiate” an object class to create a new object, or “instance” Object classes have: Children (MultipleChoiceQuestion, TrueFalseQuestion) Also known as sub-classes Parents (Question, Object) Also known as parent classes, super-classes, or base classes.

20. MultipleChoiceQuestions and CheckAllQuestions are both types of Questions They both have all the properties and methods of the Question class They also have custom methods for displaying their answers Inheritance: the child class “inherits” properties and methods from the parent class. The parent holds more general properties and methods common to child classes The child class holds more specific properties shared only by itself and its children

21. Quiz questions Question answers questionText Answer answerText correctOrIncorrect id 1(0, n)1 Universal Modeling Language (UML) Conceptual Class Diagram addQuestion(question) toHTML(): String score(): Number addAnswer(answer) toHTML(): String MultipleChoiceQuestion id score(): Number answerToHTML(a): String TrueFalseQuestionCheckAllQuestionUnknownQuestion id score(): Number answerToHTML(a): String id feedbackText score(): Number answerToHTML(a): String toHTML(): String id score(): Number answerToHTML(a): String

22. MultipleChoiceQuestions and CheckAllQuestions are both types of Questions They both have all the properties and methods of the Question class They also have custom methods for displaying their answers When the toHTML method of Questions is being run, it just calls answerToHTML MultipleChoiceAnswerToHTML is run for MultipleChoiceQuestions CheckAllAnswerToHTML is run for CheckAllQuestions The toHTML method of Questions doesn’t have to know anything about this When I add a new question type, I don’t have to change toHTML at all. I only have to define an answerToHTML method in the constructor for my new type. Inheritance: the child class “inherits” properties and methods from the parent class. The parent holds more general properties and methods common to child classes The child class holds more specific properties shared only by itself and its children Polymorphism (greek for “many shapes”): different classes present the same interface Homomorphism (greek for “same shapes”): the same interface looks the same

23. Question MultipleChoiceQuestion TrueFalseQuestion CheckAllQuestion UnknownQuestion From the inside, everything has a different shape: Polymorphism Interface score() toHTML() answerToHTML() answers questionText From the outside, everything has the same shape: Homomorphism quiz.score() quiz.toHTML()

24. Objects have classes, properties, methods, constructors. Object classes have instances, sub-classes, super-classes. First main principle of OOP: “Encapsulation” Second main principle of OOP: “Inheritance” Third main principle of OOP: “Polymorphism” What have we learned: How to write methods using “this” The right way to write constructors using “this” and “new” How to draw UML Class diagrams Complicated technical details about implementing data-hiding encapsulation More technical details about implementing inheritance What’s left?: