-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
2729 lines (2317 loc) · 110 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
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!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>Guide to the JavaScript Language - by Andrew Beattie</title>
<link rel ="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/vs2015.min.css">
<script src="js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<nav id="navbar">
<header><a href="/">JS Reference Index</a></header>
<ul>
<li><a class="nav-link" href="#introduction">Introduction</a></li>
<li><a class="nav-link" href="#js_operators">Operators</a></li>
<li><a class="nav-link" href="#js_variables">Variables</a></li>
<li><a class="nav-link" href="#js_properties_methods">Properties & Methods</a></li>
<li><a class="nav-link" href="#js_compound_assignment">Compound Assignment</a></li>
<li><a class="nav-link" href="#js_concatenation">Concatenation</a></li>
<li><a class="nav-link" href="#js_character_access">Character Access</a></li>
<li><a class="nav-link" href="#js_arrays">Arrays</a></li>
<li><a class="nav-link" href="#js_functions">Functions</a></li>
<li><a class="nav-link" href="#js_conditionals">Conditionals</a></li>
<li><a class="nav-link" href="#js_objects">Objects</a></li>
<li><a class="nav-link" href="#js_loops">Loops</a></li>
<li><a class="nav-link" href="#js_JSON">JSON</a></li>
<li><a class="nav-link" href="#js_variable_scope">Variable Scope</a></li>
<li><a class="nav-link" href="#js_arrow_functions">Arrow Functions</a></li>
<li><a class="nav-link" href="#js_modules">JavaScript Modules</a></li>
<li><a class="nav-link" href="#js_oop">OOP</a></li>
<li><a class="nav-link" href="#js_prototypes">Properties & Prototypes</a></li>
<!--
<li><a class="nav-link" href="#js_arrow_functions">Rest Parameter/Spread Operator</a></li>
<li><a class="nav-link" href="#js_arrow_functions">Destructuring Assignment</a></li>
<li><a class="nav-link" href="#js_arrow_functions">Literals</a></li>
<li><a class="nav-link" href="#js_arrow_functions">Constructor Functions</a></li>
<li><a class="nav-link" href="#js_arrow_functions">JavaScript Promises</a></li>
-->
</ul>
</nav>
<main id="main-doc">
<a href="https://imgbb.com/"><img
src="https://i.ibb.co/31g0JwN/Java-Script-logo.png" alt="Java-Script-logo"
border="0" class="logo"></a>
<h1>Guide to the JavaScript Language</h1>
<p>Author: Andrew Beattie | GutHub Profile: <a
href="https://github.com/andrewjbeattie" target="_blank">andrewjbeattie</a></p>
<p>First Published: July 2020</p>
<p>Made with: HTML5, CSS3 and JavaScript (highlight.js)</p>
<h2>Author's Note</h2>
<p>Early on in my studies to better understand the current technological
trends of the web, I realised that <em>the best way to learn is to
teach others</em>. This documentation (a work in progress) is the resultant application of my study and teaches the <b>JavaScript language</b>. It focuses mainly
on the fundamentals of the language, rather than any specific
standardized ECMA version or platform specific applications. This is because the
fundamentals rarely change and remain the same in every ECMAScript language
standards update. The
JavaScript language here
is approached in a beginner's mindset (my own) that assumes
the reader has no prior experience in Computer Science or Object Orientated
Programming (OOP).
<p>Most of the teaching material has been researched and adpated from a variety
of different sources and I would like to give credit here where
it is due to <em>FreeCodeCamp, JavaScript MDN
Mozilla, Wikipedia, W3 Schools, Dofactory</em> as well as a huge plethora of freely
available mobile apps and websites and highly regarded important book series such as <em>"You Don't Know
JavaScript"</em> (Kyle Simpson) and<em>"JavaScript for impatient programmers"</em> (Dr. Axel Rauschmayer) . It is imperative in your
journey into programming to not rely on any single source for
learning but to delve into all of them until you have a good grasp of the concepts, including and not limited to web and mobile app quizes that test
your understanding of the language as well as being able to apply your
knowledge by writing your own functional code. </p>
<p>All of the examples used in this documentation require the use of the
Developer Tools Console which is found in many popular browsers such as Chrome
and Firefox (Ctrl + Shift + K). Without use of the console the reader will
not be able to go very far in a true understanding of the JavaScript language in an
applied context nor will they be able to test his or her code.
It is highly recommended that readers become familiar with their browser
development tools console before delving any further into this
documentation. To test code examples here we will use the <code class="inline">console.log()</code>
<em>object call expression</em>.</p>
<section class="main-section" id="introduction">
<header>Introduction</header>
<article>
<h2>What is Javascript?</h2>
<p>"JavaScript is a <em><b>high-level</b></em>, <b><em>dynamic</em></b>, <em><b>untyped,</b></em>
<b><em>interpreted</em></b> programming language". (Source: <i>JavaScript:
The Definitive Guide</i>)</p>
<ul>
<li><i><b>High-level:</b></i> is a programming language with strong
abstraction from the details of the computer. In contrast to low-level
programming languages, it may use natural language elements, be easier
to use, or may automate (or even hide entirely) significant areas of
computing systems (e.g. memory management), making the process of
developing a program simpler and more understandable than when using a
lower-level language. The amount of abstraction provided defines how
"high-level" a programming language is.</li>
<li><i><em><b>Dynamic</b><b>:</b></em></i> is a class of high-level
programming languages, which at runtime execute many common programming
behaviours that static programming languages perform during compilation.
These behaviours could include an extension of the program, by adding
new code, by extending objects and definitions, or by modifying the type
system. Dynamic languages are frequently (but not always) referred to as
scripting languages, although that term in its narrowest sense refers to
languages specific to a given run-time environment.</li>
<li><i><b>Untyped: </b></i>languages, also known as loosely typed
languages, are programming languages that do not make you define the
type of a variable. JavaScript is an untyped language. This means that a
JavaScript variable can hold a value of any data type. You don’t have to
tell that a string is a string, nor you can require a function to
accepts an integer as its parameter. This gives JavaScript a lot of
flexibility. Flexibility lets you move faster, change things quickly,
iterate at a faster velocity.</li>
<li><i><b>Interpreted: </b></i>is a language where the standard language
runtime is able to take source code text as input and execute it.
JavaScript is by definition interpreted, even if the spec does not use
the exact word as there is no totally agreed upon definition of
'interpreted' versus 'compiled'. In the classic distinction, compiled
languages produce a stand-alone binary executable, while interpreted
languages requires a deployed runtime to execute the code. Virtual
machines, bytecode and so on blurs the distinction. </li>
</ul>
<p>JavaScript is high-level, often just-in-time compiled, and
multi-paradigm. It has curly-bracket syntax, dynamic typing,
prototype-based object-orientation, and first-class functions. Alongside
HTML and CSS, JavaScript is one of the core technologies of the World
Wide Web. JavaScript enables interactive web pages and is an essential
part of web applications. The vast majority of websites use it for
client-side page behavior, and all major web browsers have a dedicated
JavaScript engine to execute it. </p>
<p> It was introduced in
1995 by Netscape (created in 10 days by Brendan Eich), the company that
created the first browser by the same name. Other browsers followed, and
JavaScript quickly gained acceptance as the de-facto client-side
scripting language on the internet.</p>
<p>Initially in the very early days of the world wide web, many developers felt it was an inferior language because of its
perceived simplicity compared to more established strictly typed and compiled OOP languages such as C,
C#, C++ and even Java. Also, users would frequently disable JavaScript in
their browsers because of security concerns. However, over the last decade,
starting with the introduction of AJAX and the related Web 2.0 transition,
as well as server side JavaScript applications (Node.js) it became clear that JavaScript allows developers to build powerful and
highly responsive web and mobile apps.</p>
<h2>Why learn JavaScript today?</h2>
<p>Today, JavaScript is <i>the</i> language of the Web and according to GitHut
in Q1 20202 is <em><strong>the
most popular programming language in the World</strong></em> (<a
href="https://madnight.github.io/githut/#/pull_requests/2020/1"
target="_blank">View Stats</a>).
JavaScript is used by millions of
websites and mobile apps to dynamically build webpages on the fly (SPA's), add
functionality and responsiveness, enable sites to work offline (PWA's),
communicate with multiple servers through API's, retrieve data (JSON) that is
locally stored in the browser, validate forms and much more. JavaScript engines were originally
used only in web browsers (e.g Google Chrome's V8 engine), but they
are now embedded in many servers, usually via Node.js. They are also
embedded in a variety of applications created with frameworks such as
Electron. Some popular desktop apps programmed almost entirely in JavaScript (Electron JS) include:</p>
<ul>
<li>Skype</li>
<li>WhatsApp</li>
<li>Instagram</li>
<li>Discord</li>
<li>Slack</li>
<li>VS Code</li>
<li>WordPress Desktop</li>
</ul>
<p>In addition many of the most popular front end development libraries and
frameworks are JavaScript based. Some of these popular frameworks in 2020
include:</p>
<ul>
<li>React JS</li>
<li>React Native</li>
<li>Vue JS</li>
<li>Angular</li>
</ul>
<p>One of the hottest most recent web development trends in 2020 includes the development of
static websites and apps with dynamic features following a JAMstack architecture based on
JavaScript, reusable API's and prebuilt markup allowing for extremely fast
apps with dynamic server side functions and features, without the security
and performance weaknesses of
databases and dedicated servers all whilst completely separating development
code from content production. Some of the most popular
SSG (Static Site Generators) in 2020 that are built on a JAMstack
architecture include:</p>
<ul>
<li>Gatsby JS</li>
<li>Next JS</li>
<li>Eleventy</li>
<li>Nuxt JS</li>
</ul>
<p>Many people (myself included) have impatiently tried to dive into these popular
libraries and frameworks, that are JavaScript based and
abstracted to a higher level, without a good grasp of understanding the
fundamentals on which they are built upon and what is often known amongst developers as <em>"Vanilla JavaScript"</em>. Whilst it is certainly possible to build basic apps
in these frameworks by "copypasting" together pieces of someone else's code, it is impossible to go very far without knowing what you are doing and
why you are doing it. As my mother always exclaimed to me: <em><b>Start as you
mean to go on!!!</b></em></p>
<p>So now you know why you should learn JavaScript let's get
started...</p>
<h2>Code</h2>
<p>A program, often referred to as source code or just code, is a set
of special instructions to tell the computer what tasks to perform.
Usually code is saved in a text file, although with JavaScript you can
also type code directly into a developer console in a browser.</p>
<p>The rules for valid format and combinations of instructions is called a
computer language, sometimes referred to as its syntax, much the same as
English tells you how to spell words and how to create valid sentences
using words and punctuation.</p>
<h2>Statements</h2>
<p>In a computer language a <em>statement</em> is <em class="alert"><strong>a group of words, numbers, and operators that
performs a specific task</strong></em>. In JavaScript, a statement might
look as follows:</p>
<pre><code class="javascript">a = b * 2;</code></pre>
<p>The characters a and b are called <em>variables</em> (see “Variables”),
which are like simple boxes you can store any of your stuff in. In
programs, variables hold values (like the number 42) to be used by the
program. Think of them as symbolic placeholders for the values themselves.</p>
<p>By contrast, the 2 is just a value itself, called a <em>literal value</em>,
because it stands alone without being stored in a variable.</p>
<p>The = and * characters are <em>operators</em> (see “Operators”) – they
perform actions with the values and variables such as assignment and
mathematic multiplication.</p>
<p>Most statements in JavaScript conclude with a semicolon (;) at the end.</p>
<p>The statement <code class="inline">a = b * 2;</code> tells the computer, roughly, to
get the current value stored in the variable b, multiply that value by 2,
then store the result back into another variable we call <code class="inline">a</code>.</p>
<p>Programs are just collections of many such statements, which together
describe all the steps that it takes to perform your program’s purpose.
</p>
<h2>Expressions</h2>
<p> Statements are made up of one or more <em>expressions</em>. An
expression is <em class="alert"><strong>any reference to a variable or value, or a set of
variable(s) and value(s) combined with operators</strong></em>.</p>
<p>For example:</p>
<pre><code class="javascript">a = b * 2;</code></pre>
<p>This statement has four expressions in it:</p>
<ul>
<li><code class="inline">2</code> is a <em>literal value expression</em></li>
<li><code class="inline">b</code> is a <em>variable expression</em>, which means to
retrieve its current value</li>
<li><code class="inline">b * 2</code> is an <em>arithmetic expression</em>, which means
to do the multiplication</li>
<li><code class="inline">a = b * 2</code> is an <em>assignment expression</em>, which
means to assign the result of the <code class="inline">b * 2</code> expression to the
variable <code class="inline">a</code></li>
</ul>
<p>A general expression that stands alone is also called an <em>expression
statement</em>, such as the following:</p>
<pre><code class="javascript">b * 2;</code></pre>
<p>This flavor of expression statement is not very common or useful, as
generally it wouldn’t have any effect on the running of the program – it
would retrieve the value of b and multiply it by <code class="inline">2</code>, but then
wouldn’t do anything with that result.</p>
<p>A more common expression statement is a call <i>expression
statement</i> (see “Functions”), as the entire statement is the function
call expression itself:</p>
<pre><code class="javascript">alert( a );</code></pre>
</article>
</section>
<section class="main-section" id="js_operators">
<header>Operators</header>
<article>
<p> Operators are how we perform actions on variables and values. An
operator is a mathematical symbol which produces a result based on two
values (or variables). </p>
<p>There are four categories of operators in JavaScript:
<em><b>arithmetic, comparison, assignment</b></em> <em><b>and
logical.</b></em></p>
<h2>Arithmetic Operators</h2>
<p>In the table below, variable a has a value of 2 before the operation is applied.</p>
<table class="table">
<tbody>
<tr>
<th style="width: 100px; text-align: left;">Operator</th>
<th style="width: 300px; text-align: left;">Operation</th>
<th style="width: 130px; text-align: left;">Expression</th>
<th style="width: 70px; text-align: left;">Result</th>
</tr>
<tr>
<td>+</td>
<td>Add</td>
<td>2 + a</td>
<td>4</td>
</tr>
<tr>
<td>-</td>
<td>Substract</td>
<td>2 - a</td>
<td>0</td>
</tr>
<tr>
<td>*</td>
<td>Multiply</td>
<td>3 * a</td>
<td>6</td>
</tr>
<tr>
<td>/</td>
<td>Divide</td>
<td>3 / a</td>
<td>1.5</td>
</tr>
<tr>
<td>%</td>
<td>Modulus - division remainder</td>
<td>7 % a</td>
<td>1</td>
</tr>
<tr>
<td>++</td>
<td>Increment - increase by 1</td>
<td>a++</td>
<td>3</td>
</tr>
<tr>
<td>--</td>
<td>Decrement - decrease by 1</td>
<td>a--</td>
<td>1</td>
</tr>
</tbody>
</table>
<h3>Addition</h3>
<p>Add two numbers together or combine two strings.</p>
<p><code class="inline">6 + 9; 'Hello ' + 'world!';</code></p>
<pre><code>console.log(6 + 9); // should return 15
console.log('Hello' + 'World'); // should return Hello World</code></pre>
<h3>Subtraction, Multiplication, Division</h3>
<p>These do what you'd expect them to do in basic math.</p>
<p><code class="inline">9 - 3; 8 * 2; 9 / 3;</code></p>
<pre><code>console.log(9 - 3); // Should return 6
console.log(8 * 2); // Should return 16
console.log(9 / 3); // Should return 3</code></pre>
<h3>Modulus/Division Remainder</h3>
<p>You can also use the remainder operator % which returns the division
remainder.</p>
<code class="inline">7 % 2; 6 % 2</code>
<pre><code>console.log(7 % 2); // Should return 1
console.log(6 % 2); //Should return 0 (no remainder)</code></pre>
<p>The remainder operator is often used to check if a number is even or
odd. That's because even numbers are numbers that have a remainder of 0 when
divided by two.</p>
<pre><code>function isEven(x){
return x % 2 === 0;
}
// returns true when x is even:
console.log(isEven(4)); // true
console.log(isEven(5)); // false
console.log(isEven(6)); // true</code></pre>
<pre><code>function isOdd(x){
return x % 2 != 0;
}
// returns true when x is odd:
console.log(isOdd(4)); // false
console.log(isOdd(5)); // true
console.log(isOdd(6)); // false</code></pre>
<h3>Increment & Decrement</h3>
<p>The ++ operator increments a variable value by 1 and the -- decrements a
variable value by 1.</p>
<pre><code>var a = 5;
a++
console.log(a); // Should return 6
a--
console.log(a);
// Should return 5 (reassigned in first instance)</code></pre>
<p>The increment and decrement operator can be used:</p>
<ul>
<li>postfix <code class="inline">x--</code> returns the value before decrementing</li>
<li>prefix <code class="inline">--x</code> returns the value after decrementing</li>
</ul>
<pre><code>var level = 9;
var preLevel = --level
console.log(preLevel); // Should return 8
var levels = 9
var preLevels = levels--
console.log(preLevels); // Should return a 9</code></pre>
<h2>Comparison Operators</h2>
<p>Comparison operators compare the value of two operands. If the comparison is
true, they return true, otherwise false. In the table below the variables are:
<code class="inline">a = 1</code> and <code class="inline">b = 2</code>.</p>
<table class="table">
<tbody>
<tr>
<th style="width: 100px; text-align: left;">Operator</th>
<th style="width: 300px; text-align: left;">Operation</th>
<th style="width: 130px; text-align: left;">Expression</th>
<th style="width: 70px; text-align: left;">Result</th>
</tr>
<tr>
<td>==</td>
<td>Equal to</td>
<td>a == b</td>
<td>false</td>
</tr>
<tr>
<td>!=</td>
<td>Not equal to</td>
<td>a != b</td>
<td>true</td>
</tr>
<tr>
<td><=</td>
<td>Less than equal to</td>
<td>a <= b</td>
<td>true</td>
</tr>
<tr>
<td>>=</td>
<td>Greater than or equal to</td>
<td>a >= b</td>
<td>false</td>
</tr>
<tr>
<td><</td>
<td>Less than</td>
<td>a < b</td>
<td>true</td>
</tr>
<tr>
<td>></td>
<td>Greater than</td>
<td>a > b</td>
<td>false</td>
</tr>
</tbody>
</table>
<h3>Equal to</h3>
<p>This performs a test to see if two values are equal.
It returns a true/false (Boolean) result.</p>
<p><code class="inline">a == b; myVariable == 4;</code></p>
<pre><code>var a = 1;
b = 2;
console.log(a == b); // Should return false</code></pre>
<p>Strict equality (===) is the counterpart to the equality operator (==). However, unlike the equality operator, which attempts to convert both values being compared to a common type, the strict equality operator does not perform a type conversion.</p>
<p>If the values being compared have different types, they are considered
unequal, and the strict equality operator will return false. In this example, 3 is a Number type and '3' is a string type.</p></p>
<pre><code>var nr = 3;
nq = '3';
console.log(nr == nq); // Should return false
console.log(nr === nq); // Should return true</code></pre>
<h3>Not equal to</h3>
<p>When "not" (!) is used alongside the Equality operator (==), the negation operator tests whether two values are not equal. </p>
<code class="inline">let myVariable = 3; myVariable !== 3; </code><br>
<pre><code>var tw = 5;
tr = '5';
console.log(tw != tr); // Should return false
console.log(tw !== tr); // Should return true</code></pre>
<h3>Less than equal to</h3>
<p>The less than or equal to operator <code class="inline"><=</code> compares
the values of two numbers. If the number to the left is less than or equal to
the number to the right, it returns true. If the number on the left is greater
than the number on the right, it returns false. Like the equality operator,
less than or equal to converts data types and therefore is not considered
"strict" equality.</p>
<pre><code>var qu = 7;
qa = '7';
console.log(qu <= qa); // Should return true</code></pre>
<h3>Greater than equal to</h3>
<p>The greater than or equal to operator <code class="inline">>=</code>compares the values of two
numbers. If the number to the left is greater than or equal to the number to the
right, it returns true. Otherwise, it returns false. Like the equality operator,
greater than or equal to operator will convert data types while comparing is not
considered strict equality.</p>
<pre><code>var qu = 7;
qa = '7';
console.log(qu >= qa); // Should return true</code></pre>
<h3>Less than</h3>
<p>The less than operator <code class="inline"><</code> compares the values of
two numbers. If the number to the left is less than the number to the right, it
returns true. Otherwise, it returns false. Like the equality operator, less than
operator converts data types while comparing and is not considered "strict".</p>
<pre><code>console.log(qu < qa); // Should return false</code></pre>
<h3>Greater than</h3>
<p>The greater than operator (>) compares the values of two numbers. If the
number to the left is greater than the number to the right, it returns true.
Otherwise, it returns false. Like the equality operator, greater than operator
will convert data types of values while comparing and is not considered
"strict".</p>
<pre><code>console.log(qu > qa); // Should return false</code></pre>
<h2>Assignment Operators</h2>
<p>In an assignment operation the value of a variable is computed from the
expression that lies to the right of an assignment operator. That value is
assigned to the variable or property that is on the left side of the operator.
In the table below the variables have the following values: </br>
<code class="inline">a = 1, b = 2, and c = 3</code>.</p>
<table class="table">
<tr>
<th style="width:100px;text-align:left;">Operator</th>
<th style="width:300px;text-align:left;">Operation</th>
<th style="width:70px;text-align:left;">Result</th>
</tr>
<tr>
<td>=</td>
<td>a = b + c;</td>
<td>a = 5</td>
</tr>
<tr>
<td>+=</td>
<td>a += b; // equivalent to a = a + b</td>
<td>a = 3</td>
</tr>
<tr>
<td>-=</td>
<td>a -= b; // equivalent to a = a – b</td>
<td>a = -1</td>
</tr>
<tr>
<td>/=</td>
<td>a /= b; // equivalent to a = a / b</td>
<td>a = 0.5</td>
</tr>
<tr>
<td>%=</td>
<td>c %= b; // equivalent to c = c % b</td>
<td>c = 1</td>
</tr>
<tr>
<td>*=</td>
<td>a *= b; // equivalent to a = a * b</td>
<td>a = 2</td>
</tr>
</table>
<pre><code>var a1 = 1;
b1 = 2;
c1 = 3;
console.log(a1 = b1 + c1);
// Should return 5 (a1 = b1 + c1)
var a2 = 1;
b2 = 2;
c2 = 3;
console.log(a2 += b2);
// Should return 3 (a2 = a2 + b2)
var a3 = 1;
b3 = 2;
c3 = 3;
console.log(a3 -= b3);
// Should return -1 (a3 = a3 - b3)
var a4 = 1;
b4 = 2;
c4 = 3;
console.log(a4 /= b4);
// Should return 0.5 (a4 = a4 / b3)
var a5 = 1;
b5 = 2;
c5 = 3;
console.log(c5 %= b5);
// Should return 1 (c5 = c5 % b5)
var a6 = 1;
b6 = 2;
c6 = 3;
console.log(a6 *= b6);
// Should return 2 (a6 = a6 * b6)</code></pre>
<h2>Logical Operators</h2>
<p>JavaScript provides three logical operators:</p>
<ul>
<li><code class="inline">!</code> (Logical NOT)</li>
<li><code class="inline">||</code> (Logical OR)</li>
<li><code class="inline">&&</code> (Logical AND) </li>
</ul>
<p>In the table below the variables have the following values: <code class="inline">a = 1 and b = 2</code>.</p>
<table class="table">
<tr>
<th style="width:80px;text-align:left;">Operator</th>
<th style="width:300px;text-align:left;">Operation</th>
<th style="width:110px;text-align:left;">Expression</th>
<th style="width:110px;text-align:left;">Result</th>
</tr>
<tr>
<td>&&</td>
<td>Logical and. Returns true only if both its first and second operands are evaluated to true.</td>
<td>a < 3 && b > 5 </td>
<td>returns false as b > 5 is false</td>
</tr>
<tr>
<td>||</td>
<td>Logical or. Returns true if one of the two operands are evaluated to true, returns false if both are evaluated to true.</td>
<td>a < 3 || b > 5</td>
<td>returns true as a < 3 is true</td>
</tr>
<tr>
<td>!</td>
<td>Logical not. Unary operator that simply inverts the Boolean value of its operand.</td>
<td>!(b>5)</td>
<td>returns true</td>
</tr>
</table>
<h3>NOT</h3>
<p>The NOT <code class="inline">!</code> operator always returns the logically opposite value of what it
precedes. For "Not", the basic expression is always true, but the
comparison returns false because we negate it.</p>
<pre><code>console.log(!true); // returns false
console.log(!false); // returns true
console.log(Boolean(0)); // returns false
console.log(!Boolean(0)) // returns true</code></pre>
<h3>AND</h3>
<p>The logical AND (<code class="inline">&&</code>) operator
(logical conjunction) for a set of operands is true if and only if all of
its operands are true. It is typically used with Boolean (logical) values.
When it is, it returns a Boolean value. However, the <code class="inline">&&</code>
operator actually returns the value of one of the specified operands, so
if this operator is used with non-Boolean values, it will return a
non-Boolean value.</p>
<p>AND - The result of the <code class="inline">&&</code> operator is
true only if both values are true, otherwise, it is false.</p>
<pre><code>var at = 3;
bt = 6;
day1 = 'Monday';
day2 = 'Tuesday';
mt = 5;
pt = 5;
console.log(at > 0 && bt > 0);
// Should return true
console.log(at > 2 && bt > 7);
// Should return false
console.log(at == bt && day1 == day2);
// Should return false
console.log(mt == pt && at == bt);
// Should return false</code></pre>
<h3>OR</h3>
<p>JavaScript uses the double pipe <code class="inline">||</code> to
represent the logical OR operator. </p>
<p>You can apply the <code class="inline">||</code> operator to two
values of any type. Using the variables declared above:</p>
<pre><code>console.log(at > 2 || mt > 6);
// Should return true
console.log(mt > 6 || bt < 3);
// Should return true
console.log(at !== bt || mt !== pt);
// Should return true</code></pre>
<p>> See these examples above <a href="operators.html" target="_blank">output in console</a> <em>(opens in new window)</em></p>
</article>
</article>
</section>
<section class="main-section" id="js_variables">
<header>Variables</header>
<article>
<p>In programs, variables hold values. Think of them as symbolic placeholders for the values themselves</p>
<h2>Values & Types</h2>
<ul>
<li>When you need to do math, you want a number.</li>
<li>When you need to print a value on the screen, you need a string (one
or more characters, words, sentences).</li>
<li>When you need to make a decision in your program, you need a boolean
(true or false).</li>
</ul>
<p>Values that are included directly in the source code are called <i>literals</i>.
<i>string</i> literals are surrounded by double quotes <code class="inline">"..."</code>
or single quotes (<code class="inline">'...'</code>) – the only difference is stylistic
preference. <i>number</i> and <i>boolean</i> literals are just presented
as is (i.e., <code class="inline">42</code>, <code class="inline">true</code>, etc.).</p>
<p>There are 7 variable types in JavaScript: <em><b>String, Number, Boolean,
Array, Object, null</b></em> and <em><b>undefined</b>.</em></p>
<h2>String</h2>
<p>This is a sequence of text known as a string. To signify that the value
is a string, enclose it in single or double quote marks.</p>
<pre><code>let myVariable = 'Bob';</code></pre>
<h2>Number</h2>
<p>This is a number. Numbers don't have quotes around them. </p>
<pre><code>let myVariable = 28;</code></pre>
<h2>Boolean</h2>
<p>This is a True/False value. The words true and false are special keywords that don't need quote marks. </p>
<pre><code>let myVariable = true;</code></pre>
<h2>Array</h2>
<p>This is a structure that allows you to store multiple values in a single
reference.</p>
<pre><code>let myVariable = [1,'Bob','Steve',10];</code></pre>
<p>Refer to each member of the array like this:</p>
<pre><code class="javascript">myVariable[0], myVariable[1]</code></pre>
<pre><code class="javascript">myVariable[0,1]</code></pre>
<h2>Object</h2>
<p>This can be anything. Everything in JavaScript is an object, and can be stored in a variable.</p>
<pre><code>let myVariable = document.querySelector('h1');</code></pre>
<h2>Null and Undefined</h2>
<p>Both <i>null</i> and <i>undefined</i> can be regarded as a special
value that indicates "no value". </p>
<p>The <i>null</i> is a language keyword (in fact, it is an object) which
is used to indicate the expected lack of value. On the other hand, <i>undefined</i>
is a predefined global variable that has a deeper meaning and is used to
indicate an error-like, unexpected lack of value.</p>
<p>When your function has no return value, it returns undefined. If you
declare a variable and don't initialize it, it returns the undefined
value. If you query a non-existent array element or object property,
again an undefined is returned. Here is an example.</p>
<pre><code>var book;
console.log(book); // => undefined
console.log(typeof book); // => undefined </code></pre>
<p>If you want to indicate the 'lack of value' in your code, you typically use
null rather than undefined.</p>
<pre><code>var book = null;
console.log(book); // => null
console.log(typeof book); // => object
// (although null is not a true object)</code></pre>
<p class="alert"> <em><strong> All of the above 7 types of variables are
objects.</strong></em></p>
<h2>Variable Declaration</h2>
<p>You declare a variable with either:</p>
<p>
- <code class="inline"><b>var</b></code> (old way and less recommended as is legacy and
mostly deprecated)<br>
- <b><code class="inline">let</code> </b>(can be reassigned)<br>
- <b><code class="inline">const</code> </b>(can't be initialised without a
value)</p>
<pre><code>var myVariable = "Hats";
let myVariable = 42;
const myVariable = false;
</code></pre>
<ul>
<li>When you use a variable for the first time in JavaScript, you need to
declare it with either <code class="inline">let</code> or <code class="inline">const</code>.</li>
<li>Use <code class="inline">let</code> for variables that you will need to re-assign
later on (as in change their value)</li>
<li>Use <code class="inline">const</code> for variables that you won't need to re-assign
later on.</li>
<li>Variables declared with <code class="inline">const</code> are <strong>not</strong>
a constant.</li>
<li>Variables declared with <code class="inline">const</code> cannot be re-assigned so
you cannot have the <code class="inline">=</code> next to that variable name after
declaring it.</li>
<li>If you see <code class="inline">var</code>, it's from the old version of JavaScript.
You can convert it to <code class="inline">let</code> (sometimes <code class="inline">const</code>
if the variable is not re-assigned).</li>
</ul>
<h2>Incrementation & Decrementation</h3>
<p>Define a variable "<strong>count</strong>" inside the function <strong>defineVariable</strong>.
Increment it and then return its value.</p>
<pre><code>function defineVariable(){
//define a variable "count" with value 0
let count = 0;
//then increment it
count += 1;
//finally return it
return count;
}</code></pre>
<p>Notice how the variable is reassigned with "<code class="inline">let</code>". If
you use "<code class="inline">const</code>" to define variable the function won't work
because you cannot reassign it (cannot have the = sign next to that
variable after declaring it)</p>
<p>You can easily increment or add one to a variable with the ++ operator.</p>
<pre><code class="javascript">i++;</code></pre>
<p>...is the equivalent of:</p>
<pre><code class="javascript">i = i + 1;</code></pre>
<p>Note: The entire line becomes i++;, eliminating the need for the equal
sign. So instead of writing:</p>
<pre><code>var myVar = 87;
myVar = myVar + 1;</code></pre>
<p>You can write:</p>
<pre><code>var myVar = 87;
myVar++;</code></pre>
<p>For decrementation or decreasing a variable by one you use the -- operator.
<pre><code class="javascript">i--;</code></pre>
<p>...is the equivalent of:</p>
<pre><code class="javascript">i = i - 1;</code></pre>
<p>Note: The entire line becomes i--;, eliminating the need for the equal sign. So instead of writing:</p>
<pre><code>var myVar = 87;
myVar = myVar - 1;</code></pre>
<p>You can write:</p>
<pre><code>var myVar = 87;
myVar--;</code></pre>
<h2>Converting a number variable into a string</h2>
<p>The <code class="inline">toString()</code> method returns a string representing the
specified Number object</p>
<pre><code>var nr = 15
nr.toString();
console.log(nr.toString());
</code></pre>
<pre><code>function convertNumberToString(number){
return number.toString();
}
console.log(convertNumberToString(11));</code></pre>
<h2>Converting a string variable to a number</h2>
<p>The <code class="inline">parseInt()</code> function parses a string argument and returns an integer</p>
<pre><code>function convertToInteger(str) {
return parseInt(str);
}
// should return a number
console.log(convertToInteger("56"));
// should return 56
console.log(convertToInteger("56"));
// should return 77
console.log(convertToInteger("77"));
// should return NaN
console.log(convertToInteger("JamesBond"));
</code></pre>
<p>Note that the <code class="inline">Number</code> in the following in <code
class="inline">Number.parseInt("97")</code> is an <code class="inline">Object</code> in
JavaScript that contains methods related to numbers, and .parseInt() is one of
them. It's a method that you call on Number to convert a string into a
number.</p>
<pre><code>function convertStringToNumber(string){
return Number.parseInt(string);
}
console.log(convertStringToNumber("97"));</code></pre>
<p>> See these examples above <a href="variables.html" target="_blank">output in console</a> <em>(opens in new window)</em></p>
</article>
</section>
<section class="main-section" id="js_properties_methods">
<header>Properties & Methods</header>
<article>
<h3>The difference between properties and methods</h3>
<ul>
<li>Properties: information that an object has.</li>
<li>Methods: what an object can do.</li>
</ul>
<p> You have an instance (object) from a class named Vehicle.</p>
<ul>
<li>The vehicle has: Number Plate, Brand, Model, Color. <strong><i>Those
are properties</i></strong>.</li>
<li>The vehicle can: Turn On, Accelerate, Brake, Horn. <strong><em>Those
are methods</em></strong>.</li>
</ul>
<p> As you can see, Properties represent data about an object.<br>
And Methods represent actions associated with an object.</p>
<p><b>Syntax difference: </b></p>
<ul>
<li><em>Properties</em> Don't have parenthesis - <code class="inline">console.log(s.length);.</code></li>
<li><em>Methods</em> have parenthesis - <code class="inline">console.log(s.toUpperCase()); </code></li>
</ul>
<p><b>Very important: <em><strong><span class="alert">always use parenthesis () at end of calling a method!!!</span></strong></em></b></p>
<p>A method is a function with the difference that the method is called
on something. For example <code class="inline">.toUpperCase()</code> is a
method called on string.</p>
<p>First define the variable "s":</p>
<pre><code>const s = 'Hello World';</code></pre>
<p>Now we can get the property "length" (chars) from the variable "s" set above:</p>
<pre><code class="javascript">console.log(s.length);</code></pre>
<p>Here we change the variable "s" through the method "toUpperCase" to upper case:</p>
<pre><code class="javascript">console.log(s.toUpperCase());</code></pre>
<p>Here we change the variable "s" through the method to "toLowerCase" to lower case:</p>
<pre><code class="javascript">console.log(s.toLowerCase());</code></pre>
<p>Here we use the method "substring" to pull 5 characters out of the string variable "s":</p>
<pre><code class="javascript">console.log(s.substring(0,5));</code></pre>
<p>Here we use the method "substring" to pull 5 characters out of the string
variable "s" and chain another method "toUpperCase" to return it as Upper
case:</p>
<pre><code class="javascript">console.log(s.substring(0,5).toUpperCase());</code></pre>
<p>You can think about this challenge as 3 separate small challenges:</p>
<ol>
<li>Get the first character and uppercase it</li>
<li>Get the rest of the string and lower case it</li>
<li>Merge these 2 strings together (the first character & the rest
of the string)</li>
</ol>
<pre><code>function capitalize(word){
return word[0].toUpperCase() + word.substring(1).toLowerCase();
}
//sample usage
console.log(capitalize("john")); //John
console.log(capitalize("BRAVO")); //Bravo
console.log(capitalize("BLAne")); //Blane
</code></pre>
<pre><code>/* Aim: Create a js function that turns a word into a tautonym
(this term for a word or name made up of two identical parts, such as
so-so, tomtom, bungabunga or Pago Pago, WaggaWagga).*/
function myTautonym(word) {
// repeat the string variable "word" twice and intialise it into a variable called "repeat"
var repeat = word.repeat(2)
// make the first character of string variable "repeat" uppercase
// and the rest of the characters lowercase and return the string
return repeat[0].toUpperCase() + repeat.substring(1).toLowerCase();
}
myTautonym("ta") // Returns "Tata"
myTautonym("Ta") // Returns "Tata"
myTautonym("bunga") // Returns "Bungabunga"
myTautonym("Java") // Returns "Javajava"</code></pre>
<p>> See these examples above <a href="properties-methods.html" target="_blank">output in console</a> <em>(opens in new window)</em></p>
<div class="w3-col l10 m12" id="main">
<h2>String Properties List</h2>
<table class="w3-table-all notranslate">
<tbody>
<tr>
<th style="width: 24%; text-align: left;">Property</th>
<th style="text-align: left;">Description</th>
</tr>
<tr>
<td><a href="https://www.w3schools.com/jsref/jsref_constructor_string.asp">constructor</a></td>
<td>Returns the string's constructor function</td>
</tr>
<tr>
<td><a href="https://www.w3schools.com/jsref/jsref_length_string.asp">length</a></td>
<td>Returns the length of a string</td>
</tr>
<tr>
<td><a href="https://www.w3schools.com/jsref/jsref_prototype_string.asp">prototype</a></td>
<td>Allows you to add properties and methods to an object</td>
</tr>
</tbody>
</table>
<h2>String Methods List</h2>
<table class="w3-table-all notranslate">