-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.html
86 lines (66 loc) · 3.31 KB
/
index.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
<!doctype html>
<head>
<title>Curriculum — JS for absolute beginners</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: first day</h1>
<p><strong>Warning:</strong> This curriculum is not being maintained any more.
You should use <a href="http://opentechschool.github.io/js-beginners-1/">js-beginners-1</a>
which is a bit shorter and easier.</p>
<p><a href="index_de.html">Auf Deutsch »</a></p>
<p>On the first day, our goal is to learn enough JavaScript to be
dangerous, and to get a good feel for the natural habitat (web,
browser, HTML) of JavaScript programs.</p>
<h2>Tools</h2>
<p>We will be using the Google Chrome browser as our development
environment for the course, because of the excellent developer tools
it provides. If you have a strong, passionate affinity for some other
browser (please let it not be Internet Explorer), you are also free to
try and use that—most modern browsers have decent developer tools—but
the text on these pages will describe the Chrome functionality.</p>
<p>If you don't already have Chrome installed, get it here:</p>
<ul>
<li><a href="https://www.google.com/intl/en/chrome/browser/" target=_blank>English</a></li>
<li><a href="https://www.google.com/chrome/?hl=de" target=_blank>Deutsch</a></li>
</ul>
<p>Beyond a browser, no desktop software will be necessary. We will be
writing and trying out JavaScript programs directly inside of the
browser.</p>
<h2>Process</h2>
<p>Over the course of the day, we will write a simple game. The first
few hours will be spent working with depressingly trivial pieces of
programs, in order to get a feel for the language. Despair not, for
these are simply a gateway to bigger, greater things.</p>
<p>This document will provide you with step-by-step guidance for
exploring the browser and its JavaScript environment, and for writing
your first few programs.</p>
<p>Each step will be marked with a goal (why are we doing this), a
precise, dry, guideline on what to do, and an explanation of how and
why the thing you are doing works. For example:</p>
<div class=box>
<h2 class=step>Example step</h2>
<h3 class=goal>Goal</h3>
<p>See what a step looks like.</p>
<h3 class=inst>Instructions</h3>
<p>Read this text carefully.</p>
<h3 class=ex>Explanation</h3>
<p>The goal always comes first. Without a goal, there is no action.
The instructions are written in a way that is unambiguous and plain,
but don't provide background. They are followed by an explanation
that, hopefully, makes it clear how and why they work.</p>
</div>
<h2>Resources</h2>
<p>It is a good idea to keep
this <a href="http://marijnhaverbeke.nl/js-cheatsheet.html"
target=_blank>cheat sheet</a> open in a tab in your browser, and use
it to look up the precise notation for something whenever you forget.
Don't worry about it looking like gibberish for now. It is only
intended to look up things <em>after</em> they have been explained by
the course material.</p>
<p>Our coaches are also always happy to answer questions. If at any
point you feel confused or stuck, get our attention, and we will do
our very best to un-confuse you.</p>
<h2>Let's go</h2>
<p><a href="page1.html">→ To the first page</a>.</p>