-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
115 lines (97 loc) · 5.23 KB
/
Copy pathindex.html
File metadata and controls
115 lines (97 loc) · 5.23 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Learning JavaScript: Start Here</title>
<link href="assets/style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<h1>Learning JavaScript</h1>
<h2>test-first teaching for core JavaScript</h2>
</div>
<div class="nav">
<h2><a href="index.html">learning-javascript</a></h2>
<b>Labs:</b>
<ul>
<li><a href="00_hello/index.html">00 Hello</a></li>
<li><a href="01_math/index.html">01 Math</a></li>
<li><a href="02_control_flow/index.html">02 Control Flow</a></li>
<li><a href="03_loops/index.html">03 Loops & Recursion</a></li>
<li><a href="04_objects/index.html">04 Objects</a></li>
<li><a href="05_references/index.html">05 Object References</a></li>
<li><a href="06_array_transform/index.html">06 Array Transform</a></li>
<li><a href="07_array_mutation/index.html">07 Array Mutation</a></li>
<li><a href="08_strings/index.html">08 Strings</a></li>
<li><a href="09_regex/index.html">09 Regex</a></li>
<li><a href="10_higher_order/index.html">10 Higher-Order Functions</a></li>
<li><a href="11_scope/index.html">11 Scope</a></li>
<li><a href="12_gotchas/index.html">12 Gotchas</a></li>
<li><a href="13_dates/index.html">13 Dates</a></li>
<li><a href="14_timers/index.html">14 Timers</a></li>
<li><a href="15_promises/index.html">15 Promises</a></li>
<li><a href="16_fetching/index.html">16 Fetching Data</a></li>
<li><a href="17_testing/index.html">17 Writing Tests</a></li>
</ul>
</div>
<h1 style="margin-left:20em;">Start Here</h1>
<div class="content">
<h2>Learn JavaScript, test-first</h2>
<p>This course teaches core JavaScript the way TDD works in the real world:
a test tells you exactly what the code should do, you run it, watch it fail,
then write just enough code to make it pass.</p>
<p>Each lab is a folder with three things:</p>
<ul>
<li>an <code>index.html</code> (the page you're reading) with instructions,</li>
<li>a <code>*.test.js</code> file — the tests you must satisfy,</li>
<li>a source <code>.js</code> file with function stubs for you to fill in.</li>
</ul>
<h2>Setup</h2>
<pre><code>cd learning-javascript
npm install
</code></pre>
<h2>Run the tests</h2>
<p>Run everything in watch mode (re-runs on every save):</p>
<pre><code>npm test
</code></pre>
<p>Run a single lab:</p>
<pre><code>npx vitest 00_hello
</code></pre>
<p>Run once and exit (no watch):</p>
<pre><code>npm run test:run
</code></pre>
<h2>The workflow</h2>
<ol>
<li>Open a lab, read its instructions.</li>
<li>Open the lab's source <code>.js</code> file (e.g. <code>00_hello/hello.js</code>).</li>
<li>Run the tests and <strong>watch them fail</strong>. Read the failure — it's telling you what's wrong.</li>
<li>Write the smallest code that makes the next failing test pass.</li>
<li>Repeat until the whole lab is green, then move to the next lab.</li>
</ol>
<h2>Course outline</h2>
<ol start="0">
<li><strong>Hello</strong> — function syntax, arguments, return values.</li>
<li><strong>Math</strong> — arithmetic, operator precedence, division, modulo.</li>
<li><strong>Control Flow</strong> — <code>if/else</code>, ternary, <code>switch</code>, truthiness.</li>
<li><strong>Loops & Recursion</strong> — <code>for</code>, <code>while</code>, recursion.</li>
<li><strong>Objects</strong> — building objects, iterating keys and values.</li>
<li><strong>Object References</strong> — sharing vs copying, accidental mutation.</li>
<li><strong>Array Transform</strong> — <code>map</code>, <code>filter</code>, <code>forEach</code>, <code>reduce</code>.</li>
<li><strong>Array Mutation</strong> — <code>sort</code> vs <code>toSorted</code>, <code>push</code>, <code>pop</code>, <code>splice</code>, <code>slice</code>.</li>
<li><strong>Strings</strong> — <code>split</code>, <code>join</code>, slicing, case.</li>
<li><strong>Regex</strong> — matching, capturing, replacing.</li>
<li><strong>Higher-Order Functions</strong> — functions that take/return functions, closures.</li>
<li><strong>Scope</strong> — function vs block scope, <code>var/let/const</code>, closures in loops.</li>
<li><strong>Gotchas</strong> — <code>==</code> vs <code>===</code>, number + string, <code>NaN</code>, mutation.</li>
<li><strong>Dates</strong> — the <code>Date</code> object, differences, formatting.</li>
<li><strong>Timers</strong> — <code>setTimeout</code>, <code>setInterval</code>.</li>
<li><strong>Promises</strong> — async/await, throwing/rejecting, <code>Promise.all</code>/<code>race</code>/<code>allSettled</code>.</li>
<li><strong>Fetching Data</strong> — <code>fetch</code>, JSON, transforming / filtering / paginating API data.</li>
<li><strong>Writing Tests</strong> — you write the tests <em>and</em> the code: matchers, edge cases, Arrange-Act-Assert.</li>
</ol>
<p>Start with <a href="00_hello/index.html">00 Hello</a>.</p>
</div>
<div class="footer">Learning JavaScript · write code, make the tests pass</div>
</body>
</html>