-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathone.html
More file actions
233 lines (233 loc) · 12.5 KB
/
one.html
File metadata and controls
233 lines (233 loc) · 12.5 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
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
232
233
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Intro to Javascript</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="welcome-msg">
<header>
<div class="logo"><a href="index.html"><img class="img-responsive" src="img/geekwise_owl.png" alt="geekwise owl logo"></a></div>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav nav-pills navbar-nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Days <span class="caret"></span></a>
<ul class="dropdown-menu">
<li role="presentation"><a href="one.html">dayOne</a></li>
<li role="presentation"><a href="two.html">dayTwo</a></li>
<li role="presentation"><a href="three.html">dayThree</a></li>
<li role="presentation"><a href="four.html">dayFour</a></li>
<li role="presentation"><a href="five.html">dayFive</a></li>
<li role="presentation"><a href="six.html">daySix</a></li>
<li role="presentation"><a href="seven.html">daySeven</a></li>
<li role="presentation"><a href="eight.html">dayEight</a></li>
<li role="presentation"><a href="nine.html">dayNine</a></li>
<li role="presentation"><a href="ten.html">dayTen</a></li>
<li role="presentation"><a href="eleven.html">dayEleven</a></li>
<li role="presentation"><a href="final.html">finalProject</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h2>What to expect?</h2>
</div>
</div>
<div class="row section">
<aside class="col-sm-3">
<h2>Class Structure</h2>
</aside>
<main class="col-sm-9">
<p>The <a href="https://www.geekwiseacademy.com" class="text-bold">Geekwise Academy</a> theory of education is hands-on and experience-driven. Because of this philosophy, classes will be:</p>
<ul class="points">
<li>Concerned with letting you learn by writing code</li>
<li>Student-driven</li>
<li>Highly applicable to real-world work</li>
<li>Concerned as much with form as function (learn it the right way first)</li>
<li>Basically, JS gives you....
<div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://www.youtube.com/embed/e_DqV1xdf-Y?ecver=2" width="640" height="360" frameborder="0" gesture="media" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe></div>
</li>
</ul>
</main>
</div>
<div class="row section">
<aside class="col-sm-3">
<h2>Tools</h2>
</aside>
<main class="col-sm-9">
<p>In order to succeed in this class, you will <b>need</b>:</p>
<ul class="points">
<li>Atom IDE</li>
<li>The Atom packages Emmet, atom-live-server, open-in-browser, & Platformio IDE Terminal</li>
<li>Google Chrome</li>
<li>Git (Git Bash for Windows users)</li>
<li>Slack; add yourself to the js1 channel</li>
<li>A <em>serious</em> desire to learn</li>
</ul>
</main>
</div>
<div class="row section">
<aside class="col-sm-3">
<h2>Resources</h2>
</aside>
<main class="col-sm-9">
<p>You are expected to read up on the provided resources from Mozilla Developer Network (MDN) after each class. There are several resources to help you learn JavaScript</p>
<ul class="points">
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction">Mozilla Developer Network (MDN)</a></li>
<li><a href="https://www.w3schools.com/js/default.asp">W3Schools</a></li>
<li><a href="https://jsbin.com/?html,output">JSBin</a></li>
<li><a href="https://www.google.com">Google</a></li>
</ul>
</main>
</div>
<div class="row section">
<aside class="col-sm-3">
<h2>Let's Try It!</h2>
</aside>
<main class="col-sm-9">
<p>Create a project in your <em>projects</em> folder and set up the basics:</p>
<ul>
<li>index.html file in your root directory</li>
<li>css and js folders</li>
<li>css/styles.css</li>
<li>js/scripts.js</li>
<li>All should be linked appropriately</li>
</ul>
<p>Create a repository on GitHub for this folder, link the two, and add me as a collaborator. I will go over this once in class for those of you who don't know Git workflow yet.</p>
<p>From now on, you should use branches from this repository for your in-class work. So day 1 will have its own branch, day two will have a separate branch and so on. It's your responsibility to keep these branches separate and to add, commit, and push daily.</p>
</main>
</div>
<div class="row section">
<aside class="col-sm-3">
<h2>JavaScript</h2>
</aside>
<main class="col-sm-9">
<p>JavaScript (<b><em>not</em></b> Java) is the browser's native language. It is:</p>
<ul class="points">
<li>Developed by Brendan Eich (Netscape fame) in 10 days (1995)</li>
<li>An answer to the server-side rendering of websites that was the only way of making dynamic websites at the time</li>
<li>Loosely typed</li>
<li>DOM manipulator</li>
<li>Object Oriented Scripting Language (not markup)</li>
<li>Essential for modern, dynamic websites</li>
</ul>
<b id="my-id">Some basic guidelines for using JavaScript:</b>
<ul class="bulleted-points">
<li>3 ways to use JS in your code:
<ol>
<li><b>Inline</b> (not recommended)</li>
<pre>
<code><p onclick="confirm('You sure, doe?')">Confirm Your Choice</p></code>
</pre>
<li><b>Internal</b> (sometimes appropriate)</li>
<pre>
<code><script>var elementToManipulate = document.getElementById('my-id');</script></code>
</pre>
<li><b>External</b> (preferred method of including JS)</li>
<pre>
<code><script src="js/scripts.js"></script></code>
</pre>
</ol>
</li>
</ul>
</main>
</div>
<div class="row section">
<aside class="col-sm-3">
<h2>The console: our all-in-one environment</h2>
</aside>
<main class="col-sm-9">
<p>The console can be found in your inspector (right-click --> Inspect Element --> click on console. It is useful for:</p>
<ul class="points">
<li>Debugging JS code</li>
<li>Playing with JS</li>
<li>Manipulating elements on the website you're on</li>
</ul>
</main>
</div>
<div class="row section">
<aside class="col-sm-3">
<h2>Conventions</h2>
</aside>
<main class="col-sm-9">
<ul class="dashed-list">
<li>camelCasing for variable names</li>
<ul>
<li><em>Not</em> LikeThis</li>
<li><em>Not</em> likethis</li>
<li><em>Not</em> like-This</li>
</ul>
<li>Variable names should make sense (think of classes and ids in CSS.)</li>
<li>Comments are written like so:</li>
<pre>
<code>//I am a comment. I am unseen...</code>
</pre>
<pre>
<code>/* I am a multi-line comment. I am unseen...
on multiple lines!!!
*/</code>
</pre>
<li>Scoped indenting (we'll get there, just remember this is important)</li>
<pre>
<code>var myFunction = function(argument) {
console.log(this);
}
</code>
</pre>
<li>JS statements are terminated with a semicolon</li>
<pre><code>console.log("things aint cool")<span class="highlight-circle">;</span></code></pre>
</ul>
</main>
</div>
<div class="row section">
<aside class="col-sm-3">
<h2>ES5 or ES6 or...?</h2>
</aside>
<main class="col-sm-9">
<p>Like most scripting languages, JavaScript has been through many versions/releases. Unlike most scripting languages, with JS versions things are complicated.</p>
<ul class="points">
<li>ES5(fully supported)</li>
<li>ES6(mostly supported, looking at you IE)/ES2015</li>
<li>ECMAScript(standardized, fully accepted version of JS)</li>
<li>ES7(proposed/experimental. Think Bootstrap v4)</li>
</ul>
</main>
</div>
<div class="row section take-home">
<aside class="col-sm-3">
<h2>Take Home</h2>
</aside>
<main class="col-sm-9">
<p>Each class will include a take home assignment. I expect every take home to be accessible to me via GitHub (add me as a collaborator.)</p>
<ol class="points">
<li>Read up on the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction">basics of JavaScript</a>.</li>
<li>Create a new branch off of your day1 branch called takehome. On that branch, write some JavaScript that logs a message to the console describing what you want to get out of this class and your favorite hobby.</li>
<li>Add, commit, and push your code to your takehome branch.</li>
<li>If you haven't already, add me to your repository as a collaborator and let me know you're done with the take home on Slack.</li>
</ol>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>