forked from OpenTechSchool/js-beginners-day1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
page1.html
231 lines (160 loc) · 8.44 KB
/
page1.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
<!doctype html>
<head>
<title>Curriculum — page 1</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 1, the basics</h1>
<p>We'll learn to use the browser's JavaScript console, and do some
fundamental programming.</p>
<h2 class=step>Open the console</h2>
<h3 class=goal>Goal</h3>
<p>Access your browser's JavaScript console.</p>
<h3 class=inst>Instructions</h3>
<p>In Chrome, press Ctrl+Shift+J on Windows or Linux, press
Command+Option+J on OS X. (Hold down the first two keys, then press J.
On German keyboards, Ctrl is labeled Strg.)</p>
<p>You can also go to the wrench menu in the upper right corner of
your window, and select <code>Tools</code> ▸ <code>JavaScript
Console</code>.</p>
<p>The console window should appear at the bottom of your browser window.</p>
<p>Resize it by dragging its top border.</p>
<p>Click through the icons along the top, and enjoy the awesomely
complicated-looking graphs and tech-garble. This
is <strong>your</strong> command center now.</p>
<h3 class=ex>Explanation</h3>
<p>The console is a powerful, convenient interface to the innards of a
web page. It allows you to step through the atoms from which a page is
built (the 'Elements' tab), to see which files it is composed of, to
diagnose problems, and, most importantly for us, to play with the
JavaScript environment in the current page.</p>
<p>Don't feel obliged to understand any of its functionality right
now. Most of it, we will not need for this course, and the part that
you need will be explained as we go on.</p>
<h2 class=step>Enter your first code</h2>
<h3 class=goal>Goal</h3>
<p>Actually type in some JavaScript, and see it run.</p>
<h3 class=inst>Instructions</h3>
<p>Go to the 'Console' (rightmost) tab in the browser console.</p>
<p>Type random junk next to the <strong>></strong> sign and press enter.</p>
<p>Now type <code>1 + 1</code> and press enter.</p>
<p>Next, type <code>alert("This computer does what [name] tells it to
do")</code>. Mind the double quotes and parentheses. Substitute your
name for <code>[name]</code>.</p>
<h3 class=ex>Explanation</h3>
<p>This part is the essence of the JavaScript console: you get to type
in a one-line program, and the browser will run it for you, and tell
you what the result was. If you write something that is not a valid
program, it will try to tell you what went wrong.</p>
<p>The first program, <code>1 + 1</code>, won't look too foreign. You
should read it as a series of commands to the computer: <em>give me
the number one, now give me another one, now add them both
together</em>. I.e. JavaScript programs do not refer to abstract
concepts (addition of one and one), but to a series of very pedestrian
steps that the computer is instructed to take.</p>
<p>The second program (<code>alert(…)</code>) is a function call.
Functions are operations that can be invoked. The function available
under the name <code>alert</code> is an operation for showing a little
dialog window on the screen. The parentheses are the notation for
invoking a function, and the values in between them are given to the
function as further info. In this case, it told the <code>alert</code>
function which text to display.</p>
<h2 class=step>Understand expressions</h2>
<h3 class=goal>Goal</h3>
<p>Understand the most basic elements that programs are composed of.</p>
<h3 class=inst>Instructions</h3>
<p>Combine the two programs from the previous step: <code>alert(1 + 1)</code>.</p>
<p>Enter <code>1 + 1 * 10</code> and then <code>(1 + 1) * 10</code>.
Note the different results.</p>
<p>Enter <code>"hey" + "ho"</code>.</p>
<h3 class=ex>Explanation</h3>
<p>The kind of program fragment we have been writing so far is called
an <em>expression</em>. Expressions are like Lego blocks, in that you
can combine them into bigger, more interesting expressions. For
example <code>alert(1 + 1)</code> combines a call
to <code>alert</code> with the computation of <code>1 + 1</code>, and
does what you'd expect: show the number two in a dialog.</p>
<p>When combining expressions by using things like <code>+</code>
and <code>*</code> (<em>operators</em>), the meaning is not always
entirely obvious. The <code>*</code> operator, used for
multiplication, is applied before the <code>+</code> operator.
Parentheses are used to explicitly indicate how the expressions are
grouped.</p>
<p>Every expression has a <em>value</em>. The most basic expressions
are numbers (<code>1</code>) and strings (<code>"hey"</code>). They
simply describe a value directly. Strings are used to represent text,
and numbers to represent numeric values. These are two
different <em>types</em> of values. We'll see a few more types
later.</p>
<p>When <code>+</code> is applied to number values, it means addition.
When it is applied to string values, it glues the text in the strings
together, producing a new string value.</p>
<h2 class=step>Variables</h2>
<h3 class=goal>Goal</h3>
<p>Understand how to store values and refer to them by name.
Understand what statements are.</p>
<h3 class=inst>Instructions</h3>
<p>Enter the following lines at the console:</p>
<pre>var myvalue = 32 * 32;
alert(myvalue);
myvalue = 10;
alert(myvalue);</pre>
<h3 class=ex>Explanation</h3>
<p>The above program introduces two new concepts: the semicolons, and
the use of <code>var</code>.</p>
<p>The first is the easiest to explain. A program is a series
of <em>statements</em>. An expression with a semicolon after it is a
statement. There are other kinds of statements. The statements in a
program are, as you'd expect, executed from top to bottom.</p>
<p>One special form of statement is a variable declaration. This
introduces a name and associates a value with it. Afterwards, the name
(<code>myvalue</code>, in this case) can be used as an expression that
refers to the current value of the variable by that name.</p>
<p>A variable's value is not constant over the execution of a program.
The <code>=</code> operator can be used at any time to give it a new
value, as in the third line of the example.</p>
<h2 class=step>A web page</h2>
<h3 class=goal>Goal</h3>
<p>See how JavaScript programs operate in the context of web
pages.</p>
<h3 class=inst>Instructions</h3>
<p>Open the <a href="sandbox/#basic.html" target="_blank">example</a>
page.</p>
<p>You will see the source for a very simple HTML page below, with the
actual page shown above it. Read the source.</p>
<p>Try changing something, and clicking the 'Render' button above the
source code. Open the JavaScript console in the new tab.</p>
<h3 class=ex>Explanation</h3>
<p>What the sandbox page (which is itself a web page written in
JavaScript) allows us to do is to write and try out web pages.<p>
<p>Pieces of JavaScript can be embedded in HTML documents with
the <code><script></code> tag. In this case, there is a tiny
program embedded that just defines a variable
called <code>myMessage</code> and calls the <code>console.log</code>
function on it.</p>
<p>When entering expressions directly into the console, the result
will be displayed automatically. This does not happen for programs
running as part of a web page. When you want to explicitly show
something in the console, use the <code>console.log</code>
function.</p>
<p>If you want to inspect the environment of a page shown in the
sandbox, you have to take an extra step. If you open a console on that
tab, and you type <code>myMessage</code> into it, it won't find that
variable. This is because the console is connected to the sandbox page
itself, not the page shown inside of it. At the bottom of the console,
there is a control that says <code><top frame></code>. Click on
this and select the other option to connect the console to the actual
page we wrote.</p>
<p>The button in the example page has a snippet of JavaScript
associated with it through an <code>onclick</code> attribute.
Attributes are <code>name="value"</code> pairs that are specified in
HTML tags. Because the button and the <code>myMessage</code> variable
live on the same page, the <code>onclick</code> program
(<code>alert(myMessage);</code>) can refer to it.
The <code>myvalue</code> variable we defined earlier (on this tab)
is <em>not</em> available on the other tab. Each page is its own
little world, with its own set of variables.</p>
<h2>And now</h2>
<p>Things are about to get a lot more interactive.</p>
<p><a href="page2.html">→ Continue with the second page</a>.</p>