-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathpage3.html
261 lines (199 loc) · 8.82 KB
/
page3.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
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!doctype html>
<head>
<title>Curriculum — page 3</title>
<link rel=stylesheet href="fonts.googleapis.com/css-family=Averia+Serif+Libre:300,400">
<link rel=stylesheet href=style.css>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
</head>
<h1>Curriculum: page 3, data</h1>
<p>Inside the computer's world, there is only data. That which is not
data, does not exist. Programs are data. Programs create new data.
It's like some kind of strange, silicon-based cycle of life.</p>
<h2 class=step>Collections</h2>
<h3 class=goal>Goal</h3>
<p>Learn how to group a set of values into a single collection, and
use that collection.</p>
<p>Problem statement: draw a rainbow by drawing seven concentric
circles with the following colors: <em>red, orange, yellow, green,
cyan, purple, white</em>, each smaller than the last.</p>
<h3 class=inst>Instructions</h3>
<p>This is the naive approach:</p>
<pre>function rainbow(x, y) {
color("red");
circle(x, y, 150);
color("orange");
circle(x, y, 145);
color("yellow");
circle(x, y, 140);
color("green");
circle(x, y, 135);
color("cyan");
circle(x, y, 130);
color("purple");
circle(x, y, 125);
color("white");
circle(x, y, 120);
}</pre>
<p>That is not wrong, but it is not right either. It repeats itself a
lot. Here is <a href="sandbox/#rainbow.js" target=_blank>a better version</a>:</p>
<pre>function rainbow(x, y) {
var colors = ["red", "orange", "yellow", "green", "cyan", "purple", "white"];
var count = 0;
while (count < colors.length) {
color(colors[count]);
circle(x, y, 150 - 5 * count);
count = count + 1;
}
}</pre>
<h3 class=ex>Explanation</h3>
<p>The thing with the square brackets (<strong>[</strong>
and <strong>]</strong>) is called an array. An array is a value that
holds other values—in this case, it holds seven strings that name
colors.</p>
<p>The values in an array are called its <em>elements</em>. The elements
in an array are ordered, which means that each element has a position
within the array. Array positions start at zero, so in the above
example, <code>"red"</code> has position zero,
and <code>"white"</code> (the seventh element) has position 6. The
notation <code>colors[1]</code> is used to access the values in an
array—in this case, it'd produce <code>"orange"</code>.</p>
<p>Another new notation, though we've seen it before
in <code>Math.random</code> is the dot in <code>colors.length</code>.
It is used to fetch another kind of sub-value, called property, out of
a value. In the case of <code>Math.random</code>, it is just used for
grouping—a whole bunch of number-related functions are available as
properties of <code>Math</code> (for example <code>Math.round</code>
to round numbers). But in the case of <code>colors.length</code>, it
retrieves a property value that is directly related
to <code>colors</code>: the amount of elements in the array
(seven).</p>
<p>So this typical <code>while</code> loop, using
the <code>count</code> variable to track its progress, goes over the
elements of the array one by one, uses them to set the current color,
and then draws a circle of the right size.</p>
<p>Since this kind of loop is very common (create variable, test it
in <code>while</code> condition, and update it), there is a more
compact way to write it. This program is equivalent to the one
above:</p>
<pre>function rainbow(x, y) {
var colors = ["red", "orange", "yellow", "green", "cyan", "purple", "white"];
for (var count = 0; count < colors.length; count = count + 1) {
color(colors[count]);
circle(x, y, 150 - 5 * count);
}
}</pre>
<p>In a <code>for</code> loop, initializing the loop state, checking
it, and updating it, are all grouped together, to make it easier to
see that they make up a single loop.</p>
<p><strong>Exercise:</strong> Play with the look of the rainbows. E.g. make the
stripes a bit bigger.</p>
<h2 class=step>Named properties</h2>
<h3 class=goal>Goal</h3>
<p>Learn how to create objects, and access their properties.</p>
<h3 class=inst>Instructions</h3>
<p>Open the console again, in case you had closed it.</p>
<p>Create a variable named <code>myObject</code> by entering this in the
console: <code>var myObject = {name: "Larry", score: 100};</code></p>
<p>You can now get the value of the <code>name</code> property of
<code>myObject</code> by entering <code>myObject.name</code> into the
console. You can do the same for the <code>score</code> property by
entering <code>myObject.score</code>.</p>
<p>Next, enter <code>myObject["name"]</code> into the console, and then
<code>myObject["sco" + "re"]</code>.</p>
<p>Give the object another property by entering <code>myObject.color =
"purple"</code>. Then get the value of the newly created <code>color</code>
property by entering <code>myObject.color</code>.</p>
<p>Change the <code>score</code> property by entering
<code>myObject.score = 105</code>. Then check that you successfully changed the
value by entering <code>myObject.score</code>.</p>
<h3 class=ex>Explanation</h3>
<p>Objects are also collections of values. But they require every
value to have a name. Arrays are useful when collecting any number of
values in a homogenous group, whereas objects are more appropriate
when each value has a specific, distinct role. I.e. a big bag of
potatoes is an array, but the parts that make up a car (engine, wheels,
each with their own role) form an object.</p>
<p>The <code>{property1: value1, property2: value2}</code> syntax is
used to create a new object. There are two ways to access the
properties of an object. The <code>object.property</code> way is used
when you know the name of the property in advance.
The <code>object["property"]</code> way allows the property name to be
any expression, and thus is useful when the name needs to be computed
somehow.</p>
<p>Together, objects and arrays provide a way to express a wide
variety of information. For example, a list of players in a game would
typically be an array of objects, where each object represents a
player. If a list of achievements has to be associated with players,
that would be another array inside of each object, and so on.</p>
<p><strong>Exercise:</strong> Figure out a JavaScript representation
for a chess game board. There are multiple good solutions.</p>
<h2 class=step>We've got data</h2>
<h3 class=goal>Goal</h3>
<p>Perform a simple visualization of a dataset.</p>
<h3 class=inst>Instructions</h3>
<p>In our new playground environment, we have a new variable
available, <code>weatherData</code>. This contains an array of three objects
with weather forecast information.</p>
<p>Each object (representing a day) has a <code>date</code>
property containing a string, and <code>temperature</code>
and <code>humidity</code> properties that contain numbers.</p>
<p>This program plots a bar chart showing the temperature at every single
day in the data set.</p>
<pre>var width = 600, height = 400;
var weatherData = [
{
date: "2012-08-21",
temperature: 30,
humidity: 10
},
{
date: "2012-08-22",
temperature: 24,
humidity: 45
},
{
date: "2012-08-23",
temperature: 28,
humidity: 30
}
];
function barChart(x, y, barWidth) {
var gutter = 2,
xPosition = x,
yPosition = y;
var barHeight = -1 * weatherData[0].temperature;
box(xPosition, yPosition, barWidth, barHeight);
barHeight = -1 * weatherData[1].temperature;
xPosition = xPosition + gutter + barWidth;
box(xPosition, yPosition, barWidth, barHeight);
barHeight = -1 * weatherData[2].temperature;
xPosition = xPosition + gutter + barWidth;
box(xPosition, yPosition, barWidth, barHeight);
}
function drawing() {
color("red");
barChart(0, 0, 20);
}</pre>
<p>You can see it in action <a href="sandbox/#weather_report_visualization.js"
target=_blank>here</a>.</p>
<h3 class=ex>Explanation</h3>
<p>In order to be a little disciplined about where we're going to
draw, the program starts by defining the width and the height of the
area it wants to draw in. 600 by 400 units.</p>
<p>The <code>barChart</code> function takes the position and the width
of a bars it should plot as a parameter. It then draws a single bar
using the <code>box</code> function. The height of the bar represents
the temperature taken from the first day using
<code>weatherData[0].temperature</code></p>
<p>Afterwards, the function plots the temperature for second and
the third day in the same way.</p>
<p><strong>Exercise:</strong> Having reference every single day in
the dataset in order to display its temperature is rather silly.
Change the <code>barChart</code> function so that it uses a
<code>while</code> loop to go through the dataset and draw the bar chart
automatically.</p>
<p>In order to test if your function works as expected, add a few more
days to the dataset. You can use data you acquire from
<a href="http://weather.co.uk/" target="_blank">the web</a>.</p>
<h3>And so we reach</h3>
<p><a href="page4.html">→ The last page</a>.</p>