-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
338 lines (267 loc) · 9.03 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
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
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
<!DOCTYPE html>
<html>
<head>
<title>HTML and JavaScript - HSLearnToHack</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
.red { color: red; }
i.image img.image {
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<textarea id="source">
class: center, middle
# Welcome to HSLearnToHack!
We hope you're excited!
Cause if you're not...
you will be!
.image[![HSLTH Logo](logo.png)]
---
## Introduction
(Insert information about who we are, why we're doing this, and other stuff)
---
## Let's look at the big picture of this project
* What will you be making?
* Snake (best game ever!)
* What will you learn?
* Basics of HTML to create webpages
* JavaScript to create the actual game
---
class: center, middle
# Let's talk about HTML
The backbone of websites!
---
## What is HTML?
* HyperText Markup Language
* Markup language - a way of annotating a document so that it is distinguishable from text
(eg. marking up paper documents)
* Most recent version is HTML5
Main goal was to add support for multimedia (more efficient YouTube videos!)
---
## Fundamental HTML syntax for structuring a page
* What is syntax? - a set of rules for the ordering of words to make them meaningful
>`<!DOCTYPE html>` - Tells your browser what type of file to expect
>`<html>` - Marks the start of the HTML
>`<head>` - Starts the header of the document
>`<title>YOUR TITLE</title>` - Sets the title (displayed in browser)
>`<body>` - Marks the beginning of the body of the document
---
## Try this example in a text editor!
```
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body> - Starts the body
<h1>Heading 1</h1> - Sets a heading of type 1 (largest)
<p>This is a paragraph</p> - Sets paragraph text
</body> - Ends the body
</html> - Marks the end of the HTML
```
---
## Test it out!
* Save the file to an easy-to-access location with the extension `html`
(eg. `MyPage.html`)
* Open it in your favorite browser, either by double-clicking on the file or using `File -> Open` from inside the browser
* See the result of your work!
---
## Making a form
* Why do we need a form for a Snake game?
* Let's go through the code, line by line
>`<form id="selection">`
Marks the start of the form, with the ID attribute "selection"
>`<input type="radio" id="easy" name="selection">Easy`
Creates a radio button, with the given ID/name that is labeled "Easy"
>`<input type="radio" id="intermediate" name="selection" checked>Intermediate`
Another radio button for "Intermediate", checked by default
>`<input type="radio" id="difficult" name="selection">Difficult`
One last button for a "Difficult" setting
>`</form>`
Marks the end of the form
---
## The form code
```
<form id="selection">
<input type="radio" id="easy" name="selection">Easy
<input type="radio" id="intermediate" name="selection" checked>
Intermediate
<input type="radio" id="difficult" name="selection">Difficult
</form>
```
---
## The `<canvas>` tag
* To draw the snake game in the page, we will need to use a `<canvas>` tag
* The `<canvas>` tag is a container, or placeholder, for graphics that are drawn using your JavaScript code
* An example is as follows:
```
<canvas id="gameboard" style="border:1px solid #000000;">
</canvas>
```
* This will be explained further when we work on the project!
---
## JavaScript in HTML
* We can fit JavaScript code in an HTML file using the `<script>` tag
* The `<script>` tag is used to denote client-side (runs in your browser) JavaScript
* We can type the JavaScript code within the `<script>` tags, as below:
```
<script>
YOUR JAVASCRIPT HERE
</script>
```
* However, let's make a new file that will hold our Snake code, called `snake.js`
* Now, link it into your existing HTML file to keep things neat and tidy, as below:
```
<script type="text/javascript" src="snake.js">
</script>
```
---
class: center, middle
# Learning JavaScript
This is where things get fun!
---
## What is JavaScript?
* The most popular programming language on the web!
* Used to change what displays on a website by modifying content
* Can also add functionality such as validating data (eg. email input), etc.
* Essentially, it serves to add behaviors to a website
---
## Comparison operators
* Comparison and logical operators return (are evaluated to) values of either true or false (Boolean)
* For example, the equality operator `==` returns `true` if you type `5 == 4+1`
* *Think about it:* Is this statement true or false?
>`(true == false)`
---
## Comparison operators
* Comparison and logical operators return (are evaluated to) values of either true or false (Boolean)
* For example, the equality operator `==` returns `true` if you type `5 == 4+1`
* *Think about it:* Is this statement true or false?
>`(true == false)`
>It is .red[false]!
* Try more examples with this operator at the JavaScript tutorial site!
---
## Comparison operators (cont.)
* Not equal to `!=`
* Greater than `>`
* Greater than or equal to `>=`
* Less than `<`
* Less than or equal to `<=`
---
## Logical operators
* Can be used to combine other conditional statements (such as those we just learned)
* For example, what if you want to do something only if two different equality operators both evaluate to true?
* Use the `and` operator `&&`
>Returns `true` if both sides are true
* Statements can be enclosed in parentheses to maintain order of operations
* *Think about it:* Is this statement true or false?
>`((5 == 4 + 1) && (8 == 8))`
---
## Logical operators
* Can be used to combine other conditional statements (such as those we just learned)
* For example, what if you want to do something only if two different equality operators both evaluate to true?
* Use the `and` operator `&&`
>Returns `true` if both sides are true
* Statements can be enclosed in parentheses to maintain order of operations
* *Think about it:* Is this statement true or false?
>`((5 == 4 + 1) && (8 == 8))`
>It is .red[true]!
---
## Logical operators (cont.)
* *Think about it:* Is this statement true or false?
>`((8 == 8) && (5 == 6 - 2))`
---
## Logical operators (cont.)
* *Think about it:* Is this statement true or false?
>`((8 == 8) && (5 == 6 - 2))`
>It is .red[true]!
* Or operator `||`
>Evalutes to true if one or both of the statements are true
* Not operator `!`
>Takes one statement as input, evalutes to true if the statement is not true, or false
---
## Conditional statements
* How do we use Boolean statements to change what happens in our code?
* *Think about it:* Why is this important?
---
## Conditional statements
* How do we use Boolean statements to change what happens in our code?
* *Think about it:* Why is this important?
* We can control what parts of our code run based on true/false values using `if/else` statements
* Keep in mind:* The `alert()` function displays a popup box with the provided message
* Let's go over the following code
```
if (hour < 12) {
alert("Good morning!");
}
else if (hour < 18) {
alert("Good afaternon!");
}
else {
alert("Good night!");
}
```
---
## Variables
* A variable is a way to refer to a value, similar to variables in math
* Here is an example of creating a variable, named `x`:
>`var x;`
* Let's set the value of `x` to 5:
>`x = 5`
* We can alternatively make a variable and set it to a value in one step:
>`var y = 7`
* Now when you access the variable `y`, you will be accessing the value `7`
>`alert(y);`
* This code results in a popup box (using the `alert()` function) with 7 as the message
---
## Variables (cont.)
* You can also create a variable using the value of another variable
* *Think about it:* What is the variable `y` equal to after these two lines are executed?
>`var x = 5;`
>`var y = x + x;`
---
## Variables (cont.)
* You can also create a variable using the value of another variable
* *Think about it:* What is the variable `y` equal to after these two lines are executed?
>`var x = 5;`
>`var y = x + x;`
>`y` is now equal to .red[10]!
---
## Arrays
* An array allows for the grouping of multiple variables with indexes
* Each element in an array can be accessed by a unique index
* Let's create an array with four integers
>`var numbers = [3, 1, 2];`
---
## Review
* What is the output of this code?
```
var a;
if (5 == 3 + 2)
a = 3;
else
a = 6;
var y = a * 3;
if ((y > x) && (a < 4))
y = 10;
alert(y);
```
</textarea>
<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>