-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
711 lines (683 loc) · 27.6 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
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:400,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/prism.css">
<link rel="stylesheet" href="css/main.css">
<title>JS Guides</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>JS Guides</h1>
<p>Welcome to JS Guides, a small document containing the fundamentals of JavaScript that are <span class="importantKeyword">MUST KNOWS</span> when developing with JavaScript.</p>
<p>JavaScript is like any other coding language when it comes to logic. The thing that stands out with JavaScript, however, is how universal it can be. It has many elements that can be used for front-end web development, app development, server stacks and even game engines.</p>
</div>
<div class="tabs">
<div class="tabBtn active" data-tab-num="1">
Fundamentals
</div>
<div class="tabBtn" data-tab-num="2">
Selectors
</div>
<div class="tabBtn" data-tab-num="3">
Event listeners
</div>
<div class="tabBtn" data-tab-num="4">
Functions
</div>
<div class="tabBtn" data-tab-num="5">
Loops
</div>
<div class="tabBtn" data-tab-num="6">
ES6
</div>
</div>
<div class="contentBox">
<div class="content active" id="1">
<div id="variables">
<h2>Variables</h2>
<p>
A JS variable is a container for a value. It can hold any type of information that can then be used later on in the script.
<br>
When you first use a JS variable, you need to declare it by saying var followed by the the variable name.
<br>
There are a few rules when creating a JS variable.
<br>
It:
<ul>
<li>cannot contain spaces</li>
<li>cannot just be a number</li>
<li>must begin with a letter, an underscore or a dollar sign</li>
<li>is case-sensitive</li>
<li>must not be a reserved word - <a href="https://www.w3schools.com/js/js_reserved.asp" target="_blank">Reserved Words</a></li>
<li>should ideally have a name that describes whatever the variable is holding.</li>
</ul>
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
// Number
var variableNumber = 1;
// String
var variableString = "This is a string";
// Array
var variableArray = ["Item 1", 2, false, "Item 4"];
</code>
</pre>
<br>
<p>
Variables can also hold more complex information like objects and even HTML elements.
</p>
<pre class="codeBlock">
<code class="language-js">
// Object
var variableObject = {
"location": "2 Bunny St, Pipitea, Wellington",
"course": "Web anx UX Design",
"students": 11
};
// HTML element
var variableArray = document.getElementById('contentBox');
</code>
</pre>
</div>
<hr>
<div id="variableStates">
<h2>Variable States</h2>
<p>
Variables at their core have two states, true and false.
<br>
These are determined by the contents of the variable. If the variable contains a value, it is considered true. So if the variable is empty, undefined, null, false or 0, it is then considered false.
</p>
<pre class="codeBlock">
<code class="language-js">
var test1; // false
var test2 = 0; // false
var test3 = "string"; // true
var test4 = 1; // true
var test5 = null; // false
var test6 = true; // true
var test7 = false; // false
</code>
</pre>
<br>
<p>
These states are only used in variable checking based operations and <span class="importantKeyword">CANNOT</span> be used as individual values.
</p>
<pre class="codeBlock">
<code class="language-js">
// This won't trigger, because test1 has a false state
if (test1) {
console.log('Cool!');
}
// This will trigger, because test4 has a true state
if (test4) {
console.log('Cool!');
}
</code>
</pre>
</div>
<hr>
<div id="ifElse">
<h2>If and Else Statements</h2>
<p>
If statements are a way to introduce logic into your code.
<br>
At their core, they are checking to see if the condition is true or false. True will trigger the code inside it, and false will skip it. Unless it has an else statement, in which case it will then run the code inside the else statement.
</p>
<pre class="codeBlock">
<code class="language-js">
if (test4 == 1) {
console.log("test4 is equal to 1");
}
// This will only run if test4 is equal to 1
if (test4 == 1) {
var variableNumber = 2;
} else {
var variableNumber = 6;
}
// if test4 is equal to 1, variableNumber will then be equal to 2
// However, this time if test4 does not equal 1, variableNumber will be set to 6
hr
</code>
</pre>
</div>
<hr>
<div id="conditions">
<h2>Conditions</h2>
<p>
Conditions are checks that return true or false. They are used to check if the values on either side of them match their condition.
<br>
They are mainly used in if statements, as they do not need to be set to a variable to return a value.
</p>
<pre class="codeBlock">
<code class="language-js">
== // Checks if the 2 values have the same value
=== // Checks if 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 equal 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 equal to the value on the right
!= // Checks if the 2 values DO NOT equal each other
!== // Checks if the 2 values DO NOT equal each other AND are not the same data type
</code>
</pre>
</div>
<hr>
<div id="multiLayerConditions">
<h2>Multi-Layer Conditions</h2>
<p>
Multi-layer conditions allow you to have multiple conditions inside the same condition.
<br>
This allows for more advanced checks to happen within a single condition, because more variables can be used.
<br>
These are nestable, so an infinite amount can be used within a 'single' condition.
</p>
<pre class="codeBlock">
<code class="language-js">
&& // Allows the use of 2 different conditions within the same condition
|| // Checks if either of the two conditions is true; if at least one of them is, continue.
// This won't trigger the console log, because the second condition has returned false.
if (("thing" == "thing") && (1 == 2)) {
console.log('Cool!');
}
// This will trigger the console log, because it is only looking for one of the conditions to be true.
if (("thing" == "thing") || (1 == 2)) {
console.log('Cool!');
}
</code>
</pre>
</div>
<hr>
<div id="operators">
<h2>Operators</h2>
<p>
Operators are used to manipulate values.
<br>
They can be used to manipulate variables, or just raw data. Like adding two strings together in a console log, for example.
</p>
<pre class="codeBlock">
<code class="language-js">
= // 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 by each other
% // Gives the remainder value when given 2 NUMBERS
! // Sets the output of the result to the opposite. ONLY USED on true / false results
</code>
</pre>
</div>
</div>
<div class="content" id="2">
<div id="getElementById">
<h2>Get Element By Id</h2>
<p>
The getElementById function does exactly what it says in the title. It gets an HTML element by the id that is passed as a parameter.
<br>
Notice how you don't need to include a # in the parameters. That is because the function is already looking for an ID and nothing else.
<br>
This will only return a single HTML element to then be used or stored in a variable.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
// Selecting the element
document.getElementById('element');
// Storing the element
var elementId = document.getElementById('element');
</code>
</pre>
</div>
<hr>
<div id="getElementsByClassName">
<h2>Get Elements By Class Name</h2>
<p>
Like getElementById, the get<span class="importantKeyword">Elements</span>ByClassName function does exactly what it says in the title. It <span class="importantKeyword">gets</span> all the elements it can find with the passed class name.
<br>
Also like getElementById, it is only looking at the class names. So you don't have to put a full stop (.) in the parameters.
<br>
So while getElementById returns a single HTML element, getElementsByClassName will return an array of elements. Even it it only finds 1 element, it will still be stored in an array format.
<br>
This means that to access the elements in your JS code, you have to loop through the array given to you to select one of the individual elements.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
// Selecting the elements
document.getElementsByClassName('element');
// Storing the element
var elementClass = document.getElementsByClassName('element');
// Getting the HTML elements to use
for (var i = 0; i < elementClass.length; i++;) {
// Now we can use this variable for any edits we want to make to the element
var currentElement = elementClass[i];
}
</code>
</pre>
</div>
<hr>
<div id="querySelector">
<h2>Query Selector</h2>
<p>
The querySelector function is a little different from the other two functions. It can select elements from both id and class. However it can also be used for some more advanced selections of any HTML attributes, including HTML tags themselves.
<br>
Unlike getElementsByClassName, querySelector will always return the first element that matches its parameters. So if you try to select an element by its class name, and there are three elements with the same class name, then it will always return the first one that appears in the HTML code.
<br>
The catch with using querySelector is that it doesn't know what to look for at first. So you have to tell it what type you are trying to select. It basically runs off the same type of selecting process as CSS. So a class query will start with a full stop (.) and an id query will start with a hashtag (#).
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
// Selecting an id element
var queryElementId = document.querySelector('#element');
// Selecting a class element
var queryElementClass = document.querySelector('.element');
// Selecting a HTML tag element
var queryElementClass = document.querySelector('h3');
// Selecting an image element with a certain src
var queryElementImgSrc = document.querySelector('img[src="image/test.png"]');
</code>
</pre>
<br>
<p>
querySelector is very powerful. Basically any type of selection you can do in CSS will work for querySelector.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
// Select anchor element with a certain href
var queryElementAHref = document.querySelector('a[href="page.html"]');
// Select header class with a certain data attribute
var queryElementClassData = document.querySelector('.header[data-number="3"]');
</code>
</pre>
</div>
<hr>
<div id="querySelectorAll">
<h2>Query Selector All</h2>
<p>
The querySelectorAll function takes all of the advanced selection features of querySelector, and combines it with the return array feature of getElementsByClassName.
<br>
This can be very useful if you need to select multiple regular HTML elements (like images that don't all have the same class) and process all of them at the same time.
<br>
Or for example you have a class that changes the colour of some text, but you only want to select all h3 elements with this class and none of the other elements that have the red class.
</p>
<pre class="codeBlock">
<code class="language-js">
// Select all span elements on the page
var queryElementH2 = document.querySelectorAll('span');
// Select all h3 elements on the page
var queryElementH2 = document.querySelectorAll('h3.red');
// Getting the HTML elements to use
for (var i = 0; i < queryElementH2.length; i++;) {
// Now we can use this variable for any edits we want to make to the element
var currentElement = queryElementH2[i];
}
</code>
</pre>
</div>
</div>
<div class="content" id="3">
<div id="addEventListener">
<h2>Add Event Listener</h2>
<p>
The addEventListener function allows you to add a custom event to an element. These events will trigger based off the first parameter given, and call the second parameter which can be a named function or an anonymous function.
<br>
There are a lot of different event types that do different things. The list of them all can be found here <a href="https://www.w3schools.com/jsref/dom_obj_event.asp" target="_blank">https://www.w3schools.com/jsref/dom_obj_event.asp</a>
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
// Select an HTML element
var element = document.getElementById('content');
// Add an event listener structure
element.addEventListener(eventType, function);
</code>
</pre>
<br>
<p>
When assigning a function to the addEventListener, there are two ways to go about it: adding a named function or adding an anonymous function.
<br>
When adding a named function, instead of normally adding in the function name and then the brackets, you only need to add the function name. This is because if you add in the brackets, the function will be called even if the event doesn't trigger.
<br>
The other way is to add an anonymous function. This will allow you to run some code directly inside the event listener. This is also the way that you would use if you needed to pass some parameters through a function.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
// Custom function
function test () {
console.log('This is a console log inside a function');
}
// Select an HTML element
var element = document.getElementById('content');
// Add an event listener to run the function
element.addEventListener('click', test);
// Another custom function
function test2 (message) {
console.log(message);
}
// Select an HTML element
var element2 = document.getElementById('content');
// Add an event listener to run the function
element.addEventListener('click', function(){
test2('This is an anonymous function that is sending information to the test2 function')
});
</code>
</pre>
</div>
<hr>
<div id="click">
<h2>Click</h2>
<p>
The click event will trigger whenever the element is clicked. This can be a button, a span or even a div. However, even though that event may be clickable, it does not change the mouse cursor to the pointer.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
// Add a click event listener
element.addEventListener('click', functionName);
</code>
</pre>
</div>
<hr>
<div id="input">
<h2>Input</h2>
<p>
The input event will trigger whenever an input element has user input. This event is only useful for all the input types and the textarea HTML elements.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
// Add an input event listener
element.addEventListener('input', functionName);
</code>
</pre>
</div>
<hr>
<div id="change">
<h2>Change</h2>
<p>
The change event is very similar to the input type. However, instead of triggering the event when the value is changed, it gets triggered when the value is <span class="importantKeyword">finished</span> being changed (or when the element loses focus)
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
// Add a change event listener
element.addEventListener('change', functionName);
</code>
</pre>
</div>
</div>
<div class="content" id="4">
<div id="functionStructure">
<h2>Function Structure</h2>
<p>
Functions are the main building blocks of almost any coding language. They all pretty much have the same format. Also, they:
<ul>
<li>can be named or anonymous</li>
<li>can have parameters</li>
<li>have their own variable scope</li>
<li>can return a value to be used outside of itself</li>
</ul>
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
// Function structure
function namedFunction (variable1, variable2) {
var newVariable = variable1 + variable2;
return newVariable;
}
</code>
</pre>
</div>
<hr>
<div id="Parameters">
<h2>Parameters</h2>
<p>
The parameters of a function act just like normal variables. What is special about them is that they can only be used inside the function they are made in. Also, they need to be present when calling the function or else they will call an error.
<br>
When making parameters, you don't need to include the var at the start as you do with a normal variable. Doing this will cause an error.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
// Correct
function namedFunction (variable1, variable2) {
var newVariable = variable1 + variable2;
return newVariable;
}
// Incorrect
function namedFunction (var variable1, var variable2) {
var newVariable = variable1 + variable2;
return newVariable;
}
</code>
</pre>
</div>
<hr>
<div id="return">
<h2>Return</h2>
<p>
The return statement allows the function to return a value to the line that called it. It can also be used for stopping a function early.
</p>
<pre class="codeBlock">
<code class="language-js">
// Making the function
function messageFunction (person, message) {
return "Hello " + person + ". " + message;
}
// Storing the function's return value
var result = messageFunction('James', 'How are you doing?');
console.log(result);
// This will output 'Hello James. How are you doing?'
</code>
</pre>
</div>
</div>
<div class="content" id="5">
<div id="loopStructure">
<h2>For Loop Structure</h2>
<p>
The for loop is the simplest way to make a loop in JavaScript. It can be used for many different things, but the most common is for iterating over an array.
<br>
The structure of the for loop is split into 4 parts:
<ul>
<li>The statement</li>
<li>The variable</li>
<li>The condition</li>
<li>What happens after an iteration</li>
</ul>
<br>
All of these parts must be present for the for loop to function.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
// Example array
var arrayName = ['a', 'b', 'c', 'd'];
// For loop example
for (var i = 0; i < arrayName.length; i++) {
console.log(arrayName[i]);
}
</code>
</pre>
</div>
<hr>
<div id="break">
<h2>Break</h2>
<p>
The break statement is used if you need to stop the loop early. It is recommended to put your break inside an if statement so that your loop doesn't just finish after the first iteration.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
// Example array
var arrayName = ['a', 'b', 'c', 'd'];
// For loop example
for (var i = 0; i < arrayName.length; i++) {
if (arrayName[i] == 'c') {
console.log('c is in number ' + i + ' of arrayName');
}
console.log(arrayName[i]);
}
</code>
</pre>
</div>
</div>
<div class="content" id="6">
<div id="newVariables">
<h2>Let and Const</h2>
<p>
ES6 introduces 2 new variable declaration types, let and const. These variable are jut like normal var variables. They can stoe numbers, strings arrays etc, but they also have some extra functionality.
<br>
The let variable is a strict scope variable. And this means for more than just functions. This works for all scope types. Functions, if / else statments, for loops. Basicly if the let variable is in any curly brackets, then it cant go out side of them.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
var varVariable = 'This is a var variable';
let letVariable = 'This is a let variable';
console.log(varVariable); // This would log 'This is a var variable'
console.log(letVariable); // This would log 'This is a let variable'
if (1 == 1) {
var test = "hello";
}
console.log(test); // This will console log 'hello'
if (1 == 1) {
let test2 = "hello";
}
console.log(test2); // This will throw an error as test2 is scoped inside the if statment
for (var i = 0; i < 10; i++) {
console.log('This will log 10 times');
}
console.log(i); // This will log 10
for (let j = 0; j < 10; j++) {
console.log('This will log 10 times');
}
console.log(j); // This will throw an error because j is inside the for loop
</code>
</pre>
<br>
<p>
The const variable acts exactly like the let variable in terms of how strick it is with the scope. However the diference with const is that once the variable is set, it can not be changed.
<br>
If you do try to change a const variable after it has been set, it will throw an error and not run any more javascript.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
const amount = 100;
if (amount == 100) {
const anotherAmount = 200;
}
console.log(anotherAmount); // This will throw an error because anotherAmount can only be used in the if statment
amount = 150; // This will also throw an error because amount has already been defined
</code>
</pre>
</div>
<hr>
<div id="stringConcatenation">
<h2>Back Tick string concatenation</h2>
<p>
ES6 also introduces a new way to add variables to strings. This new way is actually the way that most other languages go about adding variables to strings. though the syntax may be different.
<br>
To do this, we need to use the back tick (``) to make the string (it is the button on the top left of your keyboard next to the number 1 key). You can then write the string as normal inside the back ticks.
<br>
When you need to add a variable, you then need to type ${variableName} inside the string. No need to close the string or add any pluses (+) to join them togeather.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
const carBrand = 'Mazda';
let oldString = 'I saw a blue ' + carBrand + ' today.';
let newString = `I saw a blue ${carbrand} today.`;
</code>
</pre>
</div>
<hr>
<div id="arrowFunctions">
<h2>Arrow Functions</h2>
<p>
Arrow functions are the new way to make functions in ES6. They can be made as named functions, and anonymous functions.
<br>
The main diference with the named arrow function, is that we set it to a const variable. This way we cant accidentally change the variable it is stored in.
<br>
Functions are still called the same way.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
function oldFunction (pram1) {
console.log(pram1);
}
const newFunction = pram1 => {
console.log(pram1);
}
oldFunction('Hello');
newFunction('there');
// If multable parameters are required, just put brackets around them and separate them with commas
// eg const newFunction = (pram1, pram2, pram3, etc) => {
</code>
</pre>
</div>
<hr>
<div id="map">
<h2>Map</h2>
<p>
A map is a new way to do loops in ES6. What is great about the map, is that it doesnt require you to make an i variable. It just naturlaly knows where abouts in the array it is.
<br>
If you do however need the i variable, i can be added as a second argument in the anonymous function.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
let numbersArray = [2, 5, 7, 9];
// Old JavaScript way
for (var i = 0; i < numbersArray.length; i++;) {
console.log(numbersArray[i]);
}
// New ES6 way
numbersArray.map((number)=> {
console.log(number);
});
</code>
</pre>
</div>
<hr>
<div id="objectFeatures">
<h2>New object features</h2>
<p>
ES6 also introduces some a new way to reference object variables. Unlike the other ES6 features that have been mentioned so far, this is more of a quality of life improvement and can simply the coding process.
</p>
<br>
<pre class="codeBlock">
<code class="language-js">
let person = {
name: 'James',
age: 20,
gender: 'male',
phone: 'iPhone 6s'
}
// Old JavaScript way
let name = person.name;
let age = person.age;
let gender = person.gender;
let phone = person.phone;
// New ES6 way
let {name, age, gender, phone} = person;
</code>
</pre>
</div>
</div>
</div>
</div>
<script src="js/prism.js"></script>
<script src="js/main.js"></script>
</body>
</html>