learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html at main · mdn/learning-area · GitHub

Name: learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html at main · mdn/learning-area · GitHub
Rating: 4.9 (2351 reviews)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<htmllang="en-US">
<head>
<metacharset="utf-8">
<metaname="viewport" content="width=device-width">
<title>Object-oriented JavaScript inheritance</title>
</head>

<body>
<div>
<labelfor="jscode">Enter code:</label>
<inputtype="text" id="jscode">
<button>Submit code</button>
</div>

<p></p>
</body>

<script>
constinput=document.querySelector('input');
constbtn=document.querySelector('button');
constpara=document.querySelector('p');

btn.onclick=function(){
constcode=input.value;
para.textContent=eval(code);
}

functionPerson(first,last,age,gender,interests){
this.name={
 first,
 last
};
this.age=age;
this.gender=gender;
this.interests=interests;
};

Person.prototype.bio=function(){
// First define a string, and make it equal to the part of
// the bio that we know will always be the same.
letstring=this.name.first+' '+this.name.last+' is '+this.age+' years old. ';
// define a variable that will contain the pronoun part of
// the second sentence
letpronoun;

// check what the value of gender is, and set pronoun
// to an appropriate value in each case
if(this.gender==='male'||this.gender==='Male'||this.gender==='m'||this.gender==='M'){
pronoun='He likes ';
}elseif(this.gender==='female'||this.gender==='Female'||this.gender==='f'||this.gender==='F'){
pronoun='She likes ';
}else{
pronoun='They like ';
}

// add the pronoun string on to the end of the main string
string+=pronoun;

// use another conditional to structure the last part of the
// second sentence depending on whether the number of interests
// is 1, 2, or 3
if(this.interests.length===1){
string+=this.interests[0]+'.';
}elseif(this.interests.length===2){
string+=this.interests[0]+' and '+this.interests[1]+'.';
}else{
// if there are more than 2 interests, we loop through them
// all, adding each one to the main string followed by a comma,
// except for the last one, which needs an and & a full stop
for(leti=0;i<this.interests.length;i++){
if(i===this.interests.length-1){
string+='and '+this.interests[i]+'.';
}else{
string+=this.interests[i]+', ';
}
}
}

// finally, with the string built, we alert() it
alert(string);
};

Person.prototype.greeting=function(){
alert('Hi! I\'m '+this.name.first+'.');
};

Person.prototype.farewell=function(){
alert(this.name.first+' has left the building. Bye for now!');
}

letperson1=newPerson('Tammi','Smith',17,'female',['music','skiing','kickboxing']);

functionTeacher(first,last,age,gender,interests,subject){
Person.call(this,first,last,age,gender,interests);

this.subject=subject;
}

Teacher.prototype=Object.create(Person.prototype);
Object.defineProperty(Teacher.prototype,'constructor',{
value: Teacher,
enumerable: false,// so that it does not appear in 'for in' loop
writable: true
});

Teacher.prototype.greeting=function(){
letprefix;

if(this.gender==='male'||this.gender==='Male'||this.gender==='m'||this.gender==='M'){
prefix='Mr.';
}elseif(this.gender==='female'||this.gender==='Female'||this.gender==='f'||this.gender==='F'){
prefix='Mrs.';
}else{
prefix='Mx.';
}

alert('Hello. My name is '+prefix+' '+this.name.last+', and I teach '+this.subject+'.');
};

letteacher1=newTeacher('Dave','Griffiths',31,'male',['football','cookery'],'mathematics');
</script>
</html>