Object-Oriented Design

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

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.

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

numberOfSharescostOfTransaction

unspentdollarAmt

commissionsharePurchasePrice

Quiz

questionsnextQuestion

Question

typeanswers

questionTextnextAnswer

Answer

answerTextcorrectOrIncorrect1 (0, n) 1 (0, n)

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”

transaction.dollarAmt.toFixed(2)

document.getElementById(“quizText”)

quizText.split(“\n”)

Take some object and apply some function to it.

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”

Quiz

questionsnextQuestion

Question

typeanswers

questionTextnextAnswer

Answer

answerTextcorrectOrIncorrect1 (0, n) 1 (0, n)

Universal Modeling Language (UML) Conceptual Class Diagram

toHTML(): Stringscore(): Number addAnswer(answer)

toHTML(): String

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:

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.

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?

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

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())

function QuestionAddAnswer(answer){

this.answers[this.answers.length]=answer;answer.id="A"+this.answers.length;

}

function QuestionToHTML(q){

var text = "";

text += "<h3>Question "+(q+1)+"</h3><p>"+this.questionText+"</p>";text += "<ul style=\"list-style-type:none;\">";for(a=0; a<this.answers.length; a++) {

text += this.answerToHTML(a);}text += "</ul>";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]);…

}

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:

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.

function QuestionToHTML(q){

var text = "";

text += "<h3>Question "+(q+1)+"</h3><p>"+this.questionText+"</p>";text += "<ul style=\"list-style-type:none;\">";for(a=0; a<this.answers.length; a++) {

text += this.answerToHTML(a);}text += "</ul>";return text;

}

function MultipleChoiceAnswerToHTML(a){

var answer=this.answers[a];

return "<li id=\""+this.id+answer.id+"Line\"><input type=\"radio\" name=\"“+this.id+"\" id=\""+this.id+answer.id+"\" /> "+answer.answerText+" <span id=\""+this.id+answer.id+"Answer\"></span></li>";

}

function MultipleChoiceQuestion(questionText){

Question.call(this, questionText); …this.answerToHTML=MultipleChoiceAnswerToHTML;…

}

function QuestionToHTML(q){

var text = "";

text += "<h3>Question "+(q+1)+"</h3><p>"+this.questionText+"</p>";text += "<ul style=\"list-style-type:none;\">";for(a=0; a<this.answers.length; a++) {

text += this.answerToHTML(a);}text += "</ul>";return text;

}

function CheckAllAnswerToHTML(a){

var answer=this.answers[a];

return "<li id=\""+this.id+answer.id+"Line\"><input type=\"checkbox\" id=\""+this.id+answer.id+"\" /> "+answer.answerText+" <span id=\""+this.id+answer.id+"Answer\"></span></li>";

}

function CheckAllQuestion(questionText, feedbackText){

Question.call(this, questionText); …this.answerToHTML=CheckAllAnswerToHTML;…

}

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

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.

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

Quiz

questions

Question

answersquestionText

Answer

answerTextcorrectOrIncorrect

id1 (0, n) 1 (0, n)

Universal Modeling Language (UML) Conceptual Class Diagram

addQuestion(question)toHTML(): Stringscore(): Number

addAnswer(answer)toHTML(): String

MultipleChoiceQuestion

id

score(): NumberanswerToHTML(a): String

TrueFalseQuestion CheckAllQuestion UnknownQuestion

id

score(): NumberanswerToHTML(a): String

idfeedbackText

score(): NumberanswerToHTML(a): String

toHTML(): String

id

score(): NumberanswerToHTML(a): String

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

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()

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?: