-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1.html
169 lines (157 loc) · 6.69 KB
/
1.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Advanced Web Dev</title>
<meta name="author" content="Eric Moynihan" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="reveal/css/reset.css" />
<link rel="stylesheet" href="reveal/css/reveal.css" />
<link rel="stylesheet" href="reveal/css/theme/black.css" id="theme" />
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="reveal/lib/css/monokai.css" />
<!-- Printing and PDF exports -->
<script>
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = window.location.search.match(/print-pdf/gi)
? "reveal/css/print/pdf.css"
: "reveal/css/print/paper.css";
document.getElementsByTagName("head")[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<img src="https://cdn-assets-cloud.frontify.com/local/frontify/h_lNxVXLqrDqb2kyrixW3lMmUl7n-aBRzJUzyvzD7_9FpVMt61zcnJ81BDOqdkOndY8i0eAwn6Wh0ML1aAgbhjOhufnBG8Tz7OVGBhGqrknPlL9fOTjbQj2eRqycd0zF?width=2400" style="border: 0; background: transparent; width: 35%;" />
<h1>Advanced Web Development</h1>
<p><b>Week 1</b>: Introduction to Node.js</p>
<p>By <a href="https://github.com/ericm">Eric Moynihan</a></p>
</section>
<section style="text-align: left;">
<h1>Requirements</h1>
<p>Windows, Mac or Linux</p>
<a href="https://code.visualstudio.com/">Visual Studio Code</a>
<a href="https://nodejs.org/en/download/">Node.JS (incl. NPM)</a>
</section>
<section style="text-align: left;">
<h1>What is <b>Node.js</b>?</h1>
<p>Node.js runs <i>JavaScript</i> on a server. This differs it from normal JavaScript since it was originally designed to run inside a <i>Web Browser</i>.</p>
</section>
<section style="text-align: left;">
<h1>Installing on Windows</h1>
<p>Installing on Windows is simple. Just go to their website and download the installer. Just make sure the option's ticked to add it to your PATH.</p>
</section>
<section style="text-align: left;">
<h1>Running Node</h1>
<p>So as long as node is added to your PATH, you should be able to do the following:</p>
<ol>
<li>Press Windows Key + R</li>
<li>Type cmd into the input box</li>
<li>In the black command prompt, type 'node -v'</li>
<li>If it prints v11.x.x then node is installed correctly</li>
</ol>
</section>
<section style="text-align: left;">
<h1>Example node.js script</h1>
<p>So you can code in Node.js as if you were just typing normal JavaScript.</p>
<ol>
<li>Open the File Explorer</li>
<li>Open Documents</li>
<li>Right Click, then select New > Folder</li>
<li>Name the folder node_example</li>
</ol>
</section>
<section style="text-align: left;">
<ol start="5">
<li>Now open Visual Studio Code</li>
<li>In vscode, click on File > Open and open node_example</li>
<li>Now create a new file and call it example.js and open the file</li>
<img src="https://code.visualstudio.com/assets/docs/nodejs/nodejs/toolbar-new-file.png" />
<li>Now we can start coding!</li>
</ol>
</section>
<section style="text-align: left;">
<h1>Features</h1>
<p>When logging through console, it will output to the terminal you launch the script in.</p>
<pre><code class="hljs">
console.log("Hello World");
</code></pre>
<p>The language is fundamentally the same as the JS you use in a browser.</p>
<p>Just remember that it uses a more modern *flavour* of js called ES6.</p>
</section>
<section style="text-align: left;">
<h1>Features of ES6</h1>
<p>ES6 brings with it extra features for basic things like for loops. See the example below and figure out what is does:</p>
<pre><code class="hljs">
// Old JS
var arr = ["A", "B", "C"];
for (var i in arr) {
console.log(arr[i]);
}
// ES6
let arr = ["A", "B", "C"];
for (let a of arr) {
console.log(a);
}
</code></pre>
</section>
<section style="text-align: left;">
<h1>Modules</h1>
<p>Node.JS can separate your code into unique 'modules'. Modules can be imported by passing their name as a string to the built in function <code>require()</code>.</p>
<p>A module can be one of the following:</p>
<ul>
<li>A folder with a <code class="highlighter-rouge">package.json</code> file containing a <code class="highlighter-rouge">"main"</code> field.</li>
<li>A folder with an <code class="highlighter-rouge">index.js</code> file in it.</li>
<li>A JavaScript file.</li>
</ul>
</section>
<section>
<h1>Next Week</h1>
<p>We will cover <code>package.json</code>, NPM and Express.js</p>
</section>
</div>
</div>
<script src="reveal/js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
transition: "slide", // none/fade/slide/convex/concave/zoom
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{
src: "reveal/plugin/markdown/marked.js",
condition: function() {
return !!document.querySelector("[data-markdown]");
}
},
{
src: "reveal/plugin/markdown/markdown.js",
condition: function() {
return !!document.querySelector("[data-markdown]");
}
},
{ src: "reveal/plugin/highlight/highlight.js", async: true },
{ src: "reveal/plugin/search/search.js", async: true },
{ src: "reveal/plugin/zoom-js/zoom.js", async: true },
{ src: "reveal/plugin/notes/notes.js", async: true }
]
});
</script>
</body>
</html>