-
Notifications
You must be signed in to change notification settings - Fork 1
/
Week5-Functions.html
executable file
·198 lines (160 loc) · 4.81 KB
/
Week5-Functions.html
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html>
<head>
<title>Week 5: FUNCTIONS!</title>
</head>
<body>
<p>What is your favourite fruit?</p>
<input id="myInput" type="text">
<button onclick="faveFruit()">Answer</button>
<p id="answer"></p>
</body>
<script>
// Ctrl+/ or Command+/ to comment out code in Atom
// Ctrl+Shift+J (on Windows) or Ctrl+Option+J (on Mac) opens the developer console on Chrome
// https://www.w3schools.com/ is a good reference
/*/ Last week's Homework /*/
var taro_milk = {
"name": "taro milk",
"price": 5.5,
"available": true
}
var bbt_menu = [
{
"name": "taro milk",
"price": 5.5
},
{
"name": "earl grey",
"price": 5
},
{
"name": "brown sugar",
"price": 6
},
{
"name": "wintermelon",
"price": 5.5
},
{
"name": "cacao barry",
"price": 5
}
]
var brunch_menu = {
breakfast: {
name: "breakfast special",
price: 10
},
coffee: {
name: "black coffee",
price: 2.5
},
sandwich: {
name: "club sandwich",
price: 5
},
cookie: {
name: "chocolate chip cookie",
price: 3
},
cake: {
name: "cheesecake",
price: 5.5
}
}
// 1. Add the property of sweetness (less sweet) to each bubble tea on the menu.
for (bbt of bbt_menu) {
bbt.sweetness = "less sweet"
}
for (item in bbt_menu) {
bbt_menu[item].sweetness = "less sweet"
}
// 2. Add an item with a name and price to the brunch menu.
brunch_menu.tea = {
name: "chai tea",
price: 4
}
// 1. Try using Object.keys and Object.values on an array. What happens?
"Answer: Object.keys returns the index numbers: 0, 1, 2 etc. Object.values returns the actual values in the array."
// 2. Try using for..in instead of for..of on the coffee or milk arrays. What happens?
"Answer: the numerical indexes are printed instead of the values in the arrays."
// 3. Fill in the blank: In JS, everything is __ _______.
"Answer: an object! You should now see that an array is a special kind of object."
"Recall that for any object we can access values with object['keyname']. In arrays the keyname happens to be a number."
// Even a string can be accessed like an object (like an array with numerical indexes):
"string"[0] //s
"string".length //6
/*/ Introducing the Javascript function /*/
// Some super basic functions
function squareNum(num) {
return num * num
}
function multiplyTwoNum(num1,num2) {
document.write("Math is hard.")
return num1 * num2
}
// What does this function do?
function printKeys(obj) {
theseKeys = Object.keys(obj)
for (key of theseKeys) {
console.log(key)
}
}
// Variables declared within a JavaScript function, become LOCAL to the function. Local variables can only be accessed from within the function.
// Objects can include functions!
// While object data are called properties, object functions are called methods.
// Here we add a method to the taro_milk object:
taro_milk.information = function() {
return this.name + " costs $" + this.price
}
// What is "this"? In an object method, the "this" keyword refers to the current object.
// Add a function to each object in the bbt_menu array that reads out price
for (bbt of bbt_menu) {
bbt.information = function() {
return this.name + " costs $" + this.price +" and is "+ this.sweetness
}
}
bbt.information() // don't do this because it uses the last value of bbt.
bbt_menu[0].information() // first item in array.
// Can you now print out each drink's information from the menu?
for (bbt of bbt_menu){
console.log(bbt.information())
}
// Can we add a method to each item in our brunch_menu that gives the name and price?
for (item in brunch_menu) {
brunch_menu[item].information = function() {
return this.name + " costs $" + this.price
} // what is this?
}
// This is brunch_menu[item] (parent object of function)
/*/ Next week we will begin using the jsPsych library to make experiments. /*/
/*/ Bonus: the switch statement in JS can replace multiple if statements. /*/
function faveFruit() {
var text = "" // empty text
var fruit = document.getElementById("myInput").value // get input from user
fruit = fruit.toLowerCase() // convert to lowercase
// use switch to describe different cases
switch(fruit) {
case "peach":
text = "Peaches are my favorite too!"
break
case "cherry":
text = "Cherries are delicious!"
break
case "orange":
case "grapefruit":
text = "Literally the WORST fruit ever."
break
case "apple":
case "banana":
case "pear":
text = "Basic, but good."
break
default:
text = "I'm not too sure about that one..."
}
document.getElementById("answer").innerHTML = text // replace the answer text in our HTML
}
</script>
</html>