Skip to content

Commit c55430a

Browse files
chrisdavidmillschrisdavidmills
committed
adding basic OOJs examples
1 parent 904f84d commit c55430a

File tree

4 files changed

+208
-0
lines changed

4 files changed

+208
-0
lines changed

‎javascript/oojs/introduction/oojs-class-finished.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Object-oriented JavaScript class example</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+
this.bio = function() {
37+
alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
38+
};
39+
this.greeting = function() {
40+
alert('Hi! I\'m ' + this.name.first + '.');
41+
};
42+
};
43+
44+
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
45+
</script>
46+
</html>

‎javascript/oojs/introduction/oojs-class-further-exercises.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Object-oriented JavaScript class further exercises</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+
this.bio = function() {
37+
// First define a string, and make it equal to the part of
38+
// the bio that we know will always be the same.
39+
var string = this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. ';
40+
// define a variable that will contain the pronoun part of
41+
// the sencond sentence
42+
var pronoun;
43+
44+
// check what the value of gender is, and set pronoun
45+
// to an appropriate value in each case
46+
if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
47+
pronoun = 'He likes ';
48+
} else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
49+
pronoun = 'She likes ';
50+
} else {
51+
pronoun = 'They like ';
52+
}
53+
54+
// add the pronoun string on to the end of the main string
55+
string += pronoun;
56+
57+
// use another conditional to structure the last part of the
58+
// second sentence depending on whether the number of interests
59+
// is 1, 2, or 3
60+
if(this.interests.length === 1) {
61+
string += this.interests[0] + '.';
62+
} else if(this.interests.length === 2) {
63+
string += this.interests[0] + ' and ' + this.interests[1] + '.';
64+
} else {
65+
// if there are more than 2 interests, we loop through them
66+
// all, adding each one to the main string followed by a comma,
67+
// except for the last one, which needs an and & a full stop
68+
for(var i = 0; i < this.interests.length; i++) {
69+
if(i === this.interests.length - 1) {
70+
string += 'and ' + this.interests[i] + '.';
71+
} else {
72+
string += this.interests[i] + ', ';
73+
}
74+
}
75+
}
76+
77+
// finally, with the string built, we alert() it
78+
alert(string);
79+
};
80+
this.greeting = function() {
81+
alert('Hi! I\'m ' + this.name.first + '.');
82+
};
83+
};
84+
85+
var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
86+
</script>
87+
</html>

‎javascript/oojs/introduction/oojs-finished.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Object-oriented JavaScript example</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+
var person = {
29+
name : {
30+
first : 'Bob',
31+
last : 'Smith'
32+
},
33+
age : 32,
34+
gender : 'male',
35+
interests : ['music', 'skiing'],
36+
bio : function() { alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
37+
},
38+
greeting: function() {
39+
alert('Hi! I\'m ' + this.name.first + '.');
40+
}
41+
};
42+
43+
var myDataName = 'height';
44+
var myDataValue = '1.75m';
45+
person[myDataName] = myDataValue;
46+
</script>
47+
</html>

‎javascript/oojs/introduction/oojs.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Object-oriented JavaScript example</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+
</script>
28+
</html>

0 commit comments

Comments
 (0)