Skip to content

Commit f8a6263

Browse files
chrisdavidmillschrisdavidmills
committed
adding inheritance examples
1 parent c55430a commit f8a6263

File tree

4 files changed

+438
-0
lines changed

4 files changed

+438
-0
lines changed

‎javascript/oojs/advanced/oojs-class-inheritance-finished.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Object-oriented JavaScript inheritance</title>
6+
</head>
7+
8+
<body>
9+
<div>
10+
<label for="jscode">Enter code:</label>
11+
<input type="text" id="jscode">
12+
<button>Submit code</button>
13+
</div>
14+
15+
<p></p>
16+
</body>
17+
18+
<script>
19+
var input = document.querySelector('input');
20+
var btn = document.querySelector('button');
21+
var para = document.querySelector('p');
22+
23+
btn.onclick = function() {
24+
var code = input.value;
25+
para.textContent = eval(code);
26+
}
27+
28+
function Person(first, last, age, gender, interests) {
29+
this.name = {
30+
first,
31+
last
32+
};
33+
this.age = age;
34+
this.gender = gender;
35+
this.interests = interests;
36+
};
37+
38+
Person.prototype.bio = function() {
39+
// First define a string, and make it equal to the part of
40+
// the bio that we know will always be the same.
41+
var string = this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. ';
42+
// define a variable that will contain the pronoun part of
43+
// the sencond sentence
44+
var pronoun;
45+
46+
// check what the value of gender is, and set pronoun
47+
// to an appropriate value in each case
48+
if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
49+
pronoun = 'He likes ';
50+
} else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
51+
pronoun = 'She likes ';
52+
} else {
53+
pronoun = 'They like ';
54+
}
55+
56+
// add the pronoun string on to the end of the main string
57+
string += pronoun;
58+
59+
// use another conditional to structure the last part of the
60+
// second sentence depending on whether the number of interests
61+
// is 1, 2, or 3
62+
if(this.interests.length === 1) {
63+
string += this.interests[0] + '.';
64+
} else if(this.interests.length === 2) {
65+
string += this.interests[0] + ' and ' + this.interests[1] + '.';
66+
} else {
67+
// if there are more than 2 interests, we loop through them
68+
// all, adding each one to the main string followed by a comma,
69+
// except for the last one, which needs an and & a full stop
70+
for(var i = 0; i < this.interests.length; i++) {
71+
if(i === this.interests.length - 1) {
72+
string += 'and ' + this.interests[i] + '.';
73+
} else {
74+
string += this.interests[i] + ', ';
75+
}
76+
}
77+
}
78+
79+
// finally, with the string built, we alert() it
80+
alert(string);
81+
};
82+
83+
Person.prototype.greeting = function() {
84+
alert('Hi! I\'m ' + this.name.first + '.');
85+
};
86+
87+
Person.prototype.farewell = function() {
88+
alert(this.name.first + ' has left the building. Bye for now!');
89+
}
90+
91+
var person1 = new Person('Tammi', 'Smith', 17, 'female', ['music', 'skiing', 'kickboxing']);
92+
93+
function Teacher(first, last, age, gender, interests, subject) {
94+
Person.call(this, first, last, age, gender, interests);
95+
96+
this.subject = subject;
97+
}
98+
99+
Teacher.prototype = Object.create(Person.prototype);
100+
Teacher.prototype.constructor = Teacher;
101+
102+
Teacher.prototype.greeting = function() {
103+
var prefix;
104+
105+
if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
106+
prefix = 'Mr.';
107+
} else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
108+
prefix = 'Mrs.';
109+
} else {
110+
prefix = 'Mx.';
111+
}
112+
113+
alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
114+
};
115+
116+
var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
117+
</script>
118+
</html>

‎javascript/oojs/advanced/oojs-class-inheritance-start.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Object-oriented JavaScript inheritance</title>
6+
</head>
7+
8+
<body>
9+
<div>
10+
<label for="jscode">Enter code:</label>
11+
<input type="text" id="jscode">
12+
<button>Submit code</button>
13+
</div>
14+
15+
<p></p>
16+
</body>
17+
18+
<script>
19+
var input = document.querySelector('input');
20+
var btn = document.querySelector('button');
21+
var para = document.querySelector('p');
22+
23+
btn.onclick = function() {
24+
var code = input.value;
25+
para.textContent = eval(code);
26+
}
27+
28+
function Person(first, last, age, gender, interests) {
29+
this.name = {
30+
first,
31+
last
32+
};
33+
this.age = age;
34+
this.gender = gender;
35+
this.interests = interests;
36+
};
37+
38+
Person.prototype.bio = function() {
39+
// First define a string, and make it equal to the part of
40+
// the bio that we know will always be the same.
41+
var string = this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. ';
42+
// define a variable that will contain the pronoun part of
43+
// the sencond sentence
44+
var pronoun;
45+
46+
// check what the value of gender is, and set pronoun
47+
// to an appropriate value in each case
48+
if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
49+
pronoun = 'He likes ';
50+
} else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
51+
pronoun = 'She likes ';
52+
} else {
53+
pronoun = 'They like ';
54+
}
55+
56+
// add the pronoun string on to the end of the main string
57+
string += pronoun;
58+
59+
// use another conditional to structure the last part of the
60+
// second sentence depending on whether the number of interests
61+
// is 1, 2, or 3
62+
if(this.interests.length === 1) {
63+
string += this.interests[0] + '.';
64+
} else if(this.interests.length === 2) {
65+
string += this.interests[0] + ' and ' + this.interests[1] + '.';
66+
} else {
67+
// if there are more than 2 interests, we loop through them
68+
// all, adding each one to the main string followed by a comma,
69+
// except for the last one, which needs an and & a full stop
70+
for(var i = 0; i < this.interests.length; i++) {
71+
if(i === this.interests.length - 1) {
72+
string += 'and ' + this.interests[i] + '.';
73+
} else {
74+
string += this.interests[i] + ', ';
75+
}
76+
}
77+
}
78+
79+
// finally, with the string built, we alert() it
80+
alert(string);
81+
};
82+
83+
Person.prototype.greeting = function() {
84+
alert('Hi! I\'m ' + this.name.first + '.');
85+
};
86+
87+
Person.prototype.farewell = function() {
88+
alert(this.name.first + ' has left the building. Bye for now!');
89+
}
90+
91+
var person1 = new Person('Tammi', 'Smith', 17, 'female', ['music', 'skiing', 'kickboxing']);
92+
93+
</script>
94+
</html>

‎javascript/oojs/advanced/oojs-class-inheritance-student.html‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Object-oriented JavaScript inheritance</title>
6+
</head>
7+
8+
<body>
9+
<div>
10+
<label for="jscode">Enter code:</label>
11+
<input type="text" id="jscode">
12+
<button>Submit code</button>
13+
</div>
14+
15+
<p></p>
16+
</body>
17+
18+
<script>
19+
var input = document.querySelector('input');
20+
var btn = document.querySelector('button');
21+
var para = document.querySelector('p');
22+
23+
btn.onclick = function() {
24+
var code = input.value;
25+
para.textContent = eval(code);
26+
}
27+
28+
function Person(first, last, age, gender, interests) {
29+
this.name = {
30+
first,
31+
last
32+
};
33+
this.age = age;
34+
this.gender = gender;
35+
this.interests = interests;
36+
};
37+
38+
Person.prototype.bio = function() {
39+
// First define a string, and make it equal to the part of
40+
// the bio that we know will always be the same.
41+
var string = this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. ';
42+
// define a variable that will contain the pronoun part of
43+
// the sencond sentence
44+
var pronoun;
45+
46+
// check what the value of gender is, and set pronoun
47+
// to an appropriate value in each case
48+
if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
49+
pronoun = 'He likes ';
50+
} else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
51+
pronoun = 'She likes ';
52+
} else {
53+
pronoun = 'They like ';
54+
}
55+
56+
// add the pronoun string on to the end of the main string
57+
string += pronoun;
58+
59+
// use another conditional to structure the last part of the
60+
// second sentence depending on whether the number of interests
61+
// is 1, 2, or 3
62+
if(this.interests.length === 1) {
63+
string += this.interests[0] + '.';
64+
} else if(this.interests.length === 2) {
65+
string += this.interests[0] + ' and ' + this.interests[1] + '.';
66+
} else {
67+
// if there are more than 2 interests, we loop through them
68+
// all, adding each one to the main string followed by a comma,
69+
// except for the last one, which needs an and & a full stop
70+
for(var i = 0; i < this.interests.length; i++) {
71+
if(i === this.interests.length - 1) {
72+
string += 'and ' + this.interests[i] + '.';
73+
} else {
74+
string += this.interests[i] + ', ';
75+
}
76+
}
77+
}
78+
79+
// finally, with the string built, we alert() it
80+
alert(string);
81+
};
82+
83+
Person.prototype.greeting = function() {
84+
alert('Hi! I\'m ' + this.name.first + '.');
85+
};
86+
87+
Person.prototype.farewell = function() {
88+
alert(this.name.first + ' has left the building. Bye for now!');
89+
}
90+
91+
var person1 = new Person('Tammi', 'Smith', 17, 'female', ['music', 'skiing', 'kickboxing']);
92+
93+
function Teacher(first, last, age, gender, interests, subject) {
94+
Person.call(this, first, last, age, gender, interests);
95+
96+
this.subject = subject;
97+
}
98+
99+
Teacher.prototype = Object.create(Person.prototype);
100+
Teacher.prototype.constructor = Teacher;
101+
102+
Teacher.prototype.greeting = function() {
103+
var prefix;
104+
105+
if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
106+
prefix = 'Mr.';
107+
} else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
108+
prefix = 'Mrs.';
109+
} else {
110+
prefix = 'Mx.';
111+
}
112+
113+
alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
114+
};
115+
116+
var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
117+
118+
119+
// Student class!
120+
121+
function Student(first, last, age, gender, interests) {
122+
Person.call(this, first, last, age, gender, interests);
123+
}
124+
125+
Student.prototype = Object.create(Person.prototype);
126+
Student.prototype.constructor = Student;
127+
128+
Student.prototype.greeting = function() {
129+
130+
alert('Yo! I\'m ' + this.name.first + '.');
131+
};
132+
133+
var student1 = new Student('Liz', 'Sheppard', 17, 'female', ['ninjitsu', 'air cadets']);
134+
</script>
135+
</html>

0 commit comments

Comments
 (0)