-
Notifications
You must be signed in to change notification settings - Fork 0
/
oldIndex.html
312 lines (292 loc) · 16 KB
/
oldIndex.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Starting with JS</title>
<link rel="stylesheet" href="../../css/style.css">
<link rel="stylesheet" href="../../css/prism.css">
</head>
<body>
<div class="container">
<h1>JavaScript Intro</h1>
<hr>
<div>
<h2>Monday</h2>
<br>
<div id="console">
<h2>Console and Alert</h2>
<p>
Both the console.log() and the alert() function are developer tools to help us with our website development.<br>
Console.log(); will log a message into your browsers console. You can do this with any dataType which we will and have be using.<br>
Look at script.js line 1 for an example.
</p>
<p>
An Alert displays an alert box with a message which we specify. You can only view a string dataType inside of an alert.<br>
alert(); will pause all the javascript and won't continue until the user clicks the ok button.<br>
Look at script.js line 4 for an example.
</p>
<pre class="codeBlock"><code class="language-js">
console.log("This is logging in the console");
alert("This alert will pause everything from running until I am clicked");
</code></pre>
</div>
<hr>
<div id="variables">
<h2>Variables</h2>
<p>
A JS variable are containers for a dataTypes value. They can hold any data Type value which can then be reused later on in the script.<br>
When you first use a JS variable, you are to declare it by using saying var, followed by the the variable name.<br>
There are a few rules when creating a JS variable.<br>
They:
</p>
<ul>
<li>Cannot contain Spaces</li>
<li>They cannot just be a number</li>
<li>Must either begin with a letter, underscore or dollar sign</li>
<li>Variables are case-sensitive</li>
<li>There is a list of words you cannot be used - <a href="https://www.w3schools.com/js/js_reserved.asp" target="_blank">Reserved Words</a></li>
<li>Ideally your nameing should describe whatever variable is holding</li>
</ul>
<br>
<p>Look at script.js line 7 for some more examples.</p>
<pre class="codeBlock"><code class="language-js">
var variableNumber = 1;
var variableString = "This is a string";
var variableArray = ["Item 1", 2, false, "Item 4"];
console.log(variableString);
</code></pre>
</div>
<hr>
<div id="ifElse">
<h2>If and else statments</h2>
<p>
If statments are a way to introduce logic into your code.<br>
They can be used to make conditions in youd code so things can have differnt outcomes based off the variables used.<br>
If statments can be used alone, or with an else statment. This alows the if statment to guarantee a result whether it is true or false.<br>
Look at script.js line 16 for some more examples.
</p>
<pre class="codeBlock"><code class="language-js">
if (variableNumber == 1) {
console.log("variableNumber is equle to 1");
}
// This will only run if variableNumber is equle to 1
if (variableNumber == 1) {
variableNumber = 2;
} else {
variableNumber = 6;
}
// if variableNumber is equle 1, it will then be changed to 2
// However this time if variableNumber does not equle 1, variableNumber will be set to 6;
</code></pre>
</div>
<hr>
<div id="operators">
<h2>Operators</h2>
<p>
There are two types of operators. Setting operators and checking operators.<br>
Setting operators are used for setting / changing information.<br>
And checking operators are used to check 2 variables and will always return true or false.<br>
Look at script.js line 30 for some more examples.
</p>
<pre class="codeBlock"><code class="language-js">
// Setting operators
= // Sets the variable on the left, to a new value on the right
+ // Adds the 2 values on each side to each other
- // Subtracts 2 NUMBER values from each other
/ // Divides 2 NUMBER values from each other
* // Multiplies 2 NUMBER values from each other
% // Gives the left over value when given 2 NUMBERS
// Checking operators
== // Checks if the 2 values have the same value
=== // Checks is the 2 values have the same value AND the same data type
< // Checks if the value on the left is less than the value on the right
<= // Checks if the value on the left is less than or equle to the value on the right
> // Checks if the value on the left is greater than the value on the right
>= // Checks if the value on the left is greater than or equle to the value on the right
!= // Checks if the 2 values DO NOT equle each other
!== // Checks if the 2 values DO NOT equle each other AND are not the same data type
</code></pre>
</div>
<hr>
<div id="parseInt">
<h2>parseInt</h2>
<p>
parseInt is used to turn an alone number in a string variable, into a number variable.<br>
This is useful because the value that we get from a promp is always a string value and if we try to add a number to a string value we get a bigger string, rather than a bigger number.<br>
EXTRA NOTE: parseInt can also be used to round numbers down to the lowest whole number, though it is not recommended<br>
Look at script.js line 48 for some more examples.
</p>
<pre class="codeBlock"><code class="language-js">
var total = "5" + 5;
// total is now equle to "55"
var newNumber = parseInt("5");
total = newNumber + 5;
// total is now equle to 10
</code></pre>
</div>
<hr>
<h2>Tuesday</h2>
<br>
<div id="forLoops">
<h2>For loops</h2>
<p>
JS loops is a way to loop over an array to get or change their values.<br>
The logic for a for loop is contained in the brackets and is made up of a variable being defined, a condition (like an if statment) and a iterator.<br>
Look at script.js line 60 for some more examples.
</p>
<pre class="codeBlock"><code class="language-js">
var days = ["Monday", "Tuesday", "Wednesday"];
for (var i = 0; i < days.length; i++) {
console.log(days[i]);
}
</code></pre>
</div>
<hr>
<div id="dimensionalArray">
<h2>Multi-dimensional arrays</h2>
<p>
Multi-dimensional arrays are storing arrays within arrays.<br>
They can be really useful when needing to store a lsit of infoatmion, where each item on that list also has a list of information.<br>
Look at script.js line 74 for some more examples.
</p>
<pre class="codeBlock"><code class="language-js">
var days = ["Monday", "Tuesday", "Wednesday"];
var tasks = [
["Cooking", "Cleaning"],
["Vacuuming"],
["Working", "Coding", "Writing"]
];
for (var i = 0; i < days.length; i++) {
console.log(days[i])
for (var a = 0; a < tasks[i].length; a++) {
console.log(tasks[i][a]);
}
}
// This would output:
// Monday
// Cooking
// Cleaning
// Tuesday
// Vacuuming
// Wednesday
// Working
// Coding
// Writing
</code></pre>
</div>
<hr>
<div id="functions">
<h2>Functions</h2>
<p>
Functions are used when you have code that gets used multable times.<br>
This is really useful because it means that you don't have to write out the same piece of code multiple times.<br>
Functions can be called by typing the function name with opening and closing brackets<br>
Look at script.js line 99 for some more examples.
</p>
<pre class="codeBlock"><code class="language-js">
function newFunction () {
console.log("Every time this function is called, I get added to the console!");
}
newFunction();
</code></pre>
<br>
<p>
Using the brackets, we can also parse variables into the function to be used.<br>
Doing this, allows us to be able to use the same piece of code for multable use cases<br>
Look at script.js line 107 for some more examples.
</p>
<pre class="codeBlock"><code class="language-js">
function someMath (num1, num2) {
console.log(num1 + num2);
}
someMath(2, 5);
// Would log 7
someMath(6, 11);
// Would log 17
someMath(378, 1911);
// Would log 2289
</code></pre>
<br>
<p>
Functions can also have a return value.<br>
The return does 2 things:
<ul>
<li>Stops the function from running any further when it is reached</li>
<li>Gives back a value if a value is supplied</li>
</ul>
<p>Look at script.js line 121 for some more examples.</p>
</p>
<pre class="codeBlock"><code class="language-js">
function someMoreMath (num1, num2) {
return num1 * num2;
}
console.log(someMoreMath(2, 5));
// Would log 10
console.log(someMoreMath(6, 11));
// Would log 66
console.log(someMoreMath(378, 1911));
// Would log 722358
</code></pre>
</div>
<hr>
<h2>Wednesday</h2>
<br>
<div id="scopes">
<h2>Scopes</h2>
<p>
There are 2 kinds of scopes. Gloabl and local.<br>
The global scope is when a variable or function is declared outside of another function.<br>
Global variables and functions can be used inside any other functions.<br>
And the local scope is when a variable or function is declared inside a funciton. When this happens, that variable or function can only be used inside that function.<br>
Look at script.js line 135 for some more examples.
</p>
<pre class="codeBlock"><code class="language-js">
var globalVariable = "I am a global variable";
function coolFunction () {
console.log(globalVariable);
}
coolFunction();
// This will log I am a global variable
function anotherCoolFunction () {
var localVariable = "I am a local variable";
console.log(localVariable);
}
anotherCoolFunction();
console.log(localVariable);
// This will log I am a local variable first because we are calling the anotherCoolFunction function
// But will then log an error because we are trying to get a variable that can only be used inside the anotherCoolFunction function
</code></pre>
</div>
<hr>
<h2>Friday</h2>
<br>
<div id="objects">
<h2>Objects</h2>
<p>
Objects are like arrays, but you can give the information inside the object a name.<br>
This can be very useful because because you dont have to remember where abouts in the array the value that you want is. You can just call the name.<br>
The other useful thing about objects is that you can put functions inside of them. These are called methods.<br>
Look at script.js line 153 for some more examples.
</p>
<pre class="codeBlock"><code class="language-js">
var person = {
firstName: "Tom",
lastName: "Brown",
age: 23,
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
console.log(person.firstName);
// Will log Tom
console.log(person.fullName());
// Will log Tom Brown
</code></pre>
</div>
</div>
</div>
<script type="text/javascript" src="../../js/prism.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>