Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: gh-pages
Fetching contributors…

Cannot retrieve contributors at this time

262 lines (199 sloc) 9.049 kB
<!doctype html>
<head>
<title>Curriculum — page 3</title>
<link rel=stylesheet href="http://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 final page of the day</a>.</p>
Jump to Line
Something went wrong with that request. Please try again.