-
Notifications
You must be signed in to change notification settings - Fork 0
/
jascri.html
3669 lines (3630 loc) · 139 KB
/
jascri.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>
<!-- ad sense tag-->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1733919132650092"
crossorigin="anonymous"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FBJL1SB5QM"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-FBJL1SB5QM');
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="Coding-nation">
<meta name="description"
content="CodingNation is a comprehensive code tutorial website, providing beginner to advanced coding tutorials, coding exercises, and coding challenges to help you learn to code and build your skills.">
<meta name="keywords"
content="Coding-nation, CodeNation, HTML tutorials, python tutorials, css tutorials, c tutorials,React js tutorials, javascript tutorials,java tutorials, php tutorials, code editor, online code editor, Codebot,chatbot,quizzes">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta name="author" content="coding-nation.com">
<title>JAVASCRIPT Course | coding-nation</title>
<link rel="icon" type="image/png" sizes="32x32" href="../images/favicon.png">
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet" />
<link rel="stylesheet" href="../Styles/Notes.css" />
<script>
function changeTitle(newTitle) {
document.title = newTitle;
}
</script>
</head>
<body>
<!--for whole page-->
<div class="contain">
<!--navigation bar-->
<header class="fixed-navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="../index.html">CodingNation</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto" id="navbarNavLinks">
<li class="nav-item">
<a class="nav-link" href="../index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">Courses</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../Python.html">Python</a>
</li>
<li>
<a class="dropdown-item" href="../React.html">React JS</a>
</li>
<li>
<a class="dropdown-item" href="../html.html">HTML</a>
</li>
<li><a class="dropdown-item" href="../css.html">CSS</a></li>
<li>
<a class="dropdown-item" href="../jascri.html">JavaScript</a>
</li>
<li><a class="dropdown-item" href="../cpro.html">C</a></li>
<li>
<a class="dropdown-item" href="../java.html">Java</a>
</li>
<li><a class="dropdown-item" href="../php.html">PHP</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Practice</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../HTMLQuiz.html" target="_blank">HTML
Quiz</a>
</li>
<li>
<a class="dropdown-item" href="../CSSQuiz.html" target="_blank">CSS
Quiz</a>
</li>
<li>
<a class="dropdown-item" href="../JSQuiz.html" target="_blank">JavaScript
Quiz</a>
</li>
<li>
<a class="dropdown-item" href="../CQuiz.html" target="_blank">C Quiz</a>
</li>
<li>
<a class="dropdown-item" href="../JAVAQuiz.html" target="_blank">Java
Quiz</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown">Exercises</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../HTMLExer.html" target="_blank">HTML Exercise</a>
</li>
<li>
<a class="dropdown-item" href="../CSSExer.html" target="_blank">CSS Exercise</a>
</li>
<li>
<a class="dropdown-item" href="../JsExer.html" target="_blank">JavaScript
Exercise</a>
</li>
<li>
<a class="dropdown-item" href="../CExer.html" target="_blank">C Exercise</a>
</li>
<li>
<a class="dropdown-item" href="../JAVAExer.html" target="_blank">Java Exercise</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="../codebot.html" target="_blank">CodeBot</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../Editor.html" target="_blank">Editor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.html">About</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--sidebar-->
<button class="topics" onclick="toggleSidebar()">Topics▼</button>
<aside class="fixed-sidebar" id="myNav">
<div class="menu">
<h2>Introduction</h2>
<button class="single" id="JSIntroduction" data-index="0"
onclick="changeTitle('JS Introduction | CodingNation')">
JS Introduction
</button>
<button class="single" id="JSExecution" data-index="1" onclick="changeTitle('JS Execution | CodingNation')">
JS Execution
</button>
<button class="single" id="NodejsInstallation" data-index="2"
onclick="changeTitle('Node.js Installation | CodingNation')">
Node.js Installation
</button>
<h2>JAVASCRIPT VARIABLES</h2>
<button class="single" id="WhatareVariables" data-index="3"
onclick="changeTitle('What are Variables? | CodingNation')">
What are Variables?
</button>
<button class="single" id="VariableNamingRules" data-index="4"
onclick="changeTitle('Variable Naming Rules | CodingNation')">
Variable Naming Rules
</button>
<button class="single" id="VarvsLetvsConst" data-index="5"
onclick="changeTitle('var vs let vs const | CodingNation')">
var vs let vs const
</button>
<button class="single" id="PrimitivesandObjects" data-index="6"
onclick="changeTitle('Primitives and Objects | CodingNation')">
Primitives and Objects
</button>
<button class="single" id="OperatorsandExpressions" data-index="7"
onclick="changeTitle('perators and Expressions | CodingNation')">
Operators & Expressions
</button>
<h2>JAVASCRIPT BASICS</h2>
<button class="single" id="IfelseConditions" data-index="8"
onclick="changeTitle('If else conditionals | CodingNation')">
If else conditions
</button>
<button class="single" id="Ifelseladder" data-index="9" onclick="changeTitle('If else ladder | CodingNation')">
If else ladder
</button>
<button class="single" id="Switchcase" data-index="10" onclick="changeTitle('Switch case | CodingNation')">
Switch case
</button>
<button class="single" id="TernaryOperator" data-index="11"
onclick="changeTitle('Ternary Operator | CodingNation')">
Ternary Operator
</button>
<button class="single" id="ForLoops" data-index="12" onclick="changeTitle('For Loops | CodingNation')">
For Loops
</button>
<button class="single" id="WhileLoops" data-index="13" onclick="changeTitle('While Loop | CodingNation')">
While Loop
</button>
<button class="single" id="Functions" data-index="14" onclick="changeTitle('Functions | CodingNation')">
Functions
</button>
<h2>JAVASCRIPT OBJECTS</h2>
<button class="single" id="Strings" data-index="15" onclick="changeTitle('Strings | CodingNation')">
Strings
</button>
<button class="single" id="ArraysandArrayMethods" data-index="16"
onclick="changeTitle('Arrays and Array Methods | CodingNation')">
Arrays and Array Methods
</button>
<button class="single" id="LoopswithArrays" data-index="17"
onclick="changeTitle('Loops With Arrays | CodingNation')">
Loops With Arrays
</button>
<button class="single" id="MapFilterandReduce" data-index="18"
onclick="changeTitle('Map, Filter and Reduce | CodingNation')">
Map, Filter and Reduce
</button>
<button class="single" id="Date" data-index="19" onclick="changeTitle('Date | CodingNation')">
Date
</button>
<button class="single" id="Math" data-index="20" onclick="changeTitle('Math | CodingNation')">
Math
</button>
<button class="single" id="Numbers" data-index="21" onclick="changeTitle('Numbers | CodingNation')">
Numbers
</button>
<button class="single" id="Boolean" data-index="22" onclick="changeTitle('Boolean | CodingNation')">
Boolean
</button>
<h2>DOM & BOM</h2>
<button class="single" id="WindowObject" data-index="23" onclick="changeTitle('Window Object | CodingNation')">
Window Object
</button>
<button class="single" id="HistoryObject" data-index="24"
onclick="changeTitle('History Object | CodingNation')">
History Object
</button>
<button class="single" id="Navigatorobject" data-index="25"
onclick="changeTitle('Navigator Object | CodingNation')">
Navigator Object
</button>
<button class="single" id="ScreenObject'
data-index=" 26" onclick="changeTitle('Screen Object | CodingNation')">
Screen Object
</button>
<button class="single" id="DocumentObject" data-index="27"
onclick="changeTitle('Document Object | CodingNation')">
Document Object
</button>
<button class="single" id="getElementbyId" data-index="28"
onclick="changeTitle('getElementbyId | CodingNation')">
getElementbyId
</button>
<button class="single" id="getElementsbyClassName" data-index="29"
onclick="changeTitle('getElementsByClassName | CodingNation')">
getElementsByClassName
</button>
<button class="single" id="getElementsByName" data-index="30"
onclick="changeTitle('getElementsByName | CodingNation')">
getElementsByName
</button>
<button class="single" id="getElementsByTagName" data-index="31"
onclick="changeTitle('getElementsByTagName | CodingNation')">
getElementsByTagName
</button>
<button class="single" id="innerHTML" data-index="32" onclick="changeTitle('innerHTML | CodingNation')">
innerHTML
</button>
<button class="single" id="outerHTML" data-index="33" onclick="changeTitle('outerHTML | CodingNation')">
outerHTML
</button>
<h2>OOPs</h2>
<button class="single" id="Class" data-index="34" onclick="changeTitle('Class | CodingNation')">
Class
</button>
<button class="single" id="Objects" data-index="35" onclick="changeTitle('Objects | CodingNation')">
Objects
</button>
<button class="single" id="Constructor" data-index="36"
onclick="changeTitle('Constructor | CodingNation')">Constructor
</button>
<button class="single" id="StaticMethod" data-index="37" onclick="changeTitle('Static Method | CodingNation')">
Static Method
</button>
<button class="single" id="Encapsulation" data-index="38" onclick="changeTitle('Encapsulation | CodingNation')">
Encapsulation
</button>
<button class="single" id="Inheritance" data-index="39" onclick="changeTitle('Inheritance | CodingNation')">
Inheritance
</button>
<button class="single" id="Polymorphism" data-index="40" onclick="changeTitle('Polymorphism | CodingNation')">
Polymorphism
</button>
<button class="single" id="Abstraction" data-index="41" onclick="changeTitle('Abstraction | CodingNation')">
Abstraction
</button>
</div>
</aside>
<!--for content side-->
<main class="main-content">
<div class="content">
<!--previous and next buttons-->
<button id="previous">Previous</button>
<button id="next">Next</button>
<!--Notes-->
<div class="notes" id="div1 ">
<h2>JS Introduction</h2>
<br /><br />
<h3>What is Programming?</h3>
<p>
It is a way to talk to computers. A language like Hindi, English,
or Bengali can be used to talk to a human but for computers, we
need straightforward instructions.
<br />
Programming is the act of constructing a program, a set of precise
instructions telling a computer what to do.
<br />
Programming is the process of designing, writing, testing,
debugging, and maintaining the source code of computer programs.
It involves the use of programming languages and various tools to
create software programs that can be run on a computer or other
devices.
</p>
<br /><br />
<h3>What is ECMAScript?</h3>
<br />
<p>ECMAScript is a standard on which JavaScript is based!</p>
<br />
<p>
It was created to ensure that different documents on JavaScript
are talking about the same language.
</p>
<br /><br />
<h3>ECMAScript Versions:</h3>
<p>Beginning in 1997, JavaScript has evolved into many versions.</p>
<li>ECMAScript1 or ES1 was first released in 1997.</li>
<li>
ECMAScript 2015 also known as ES6 was released in 2015 and a major
revision to JavaScript was made.
</li>
<li>
The latest version of JavaScript will be ECMaScript2022 (ES13) in
2022.
</li>
<br />
<h3>What is JavaScript?</h3>
<br />
<li>JavaScript is a lightweight, OOP language.</li>
<li>It is a scripting language for web pages.</li>
<li>
It is used to add interactivity and dynamic effects to web pages.
</li>
<li>“.js” is the extension.</li>
<li>Nowadays used in server-side development.</li>
<li>JS Frontend Frameworks: React, Angular, Vue.</li>
<li>JS Backend Frameworks: Express, Node.</li>
<p>In this tutorial, we will learn JavaScript in depth</p>
</div>
<div class="notes" id="div2" style="display: none">
<h2>JS Execution</h2>
<br /><br />
<h3>Do we need to install Javascript?</h3>
<br />
<p>The answer is NO.</p>
<p>
JavaScript is present everywhere in browsers, on your phone, etc.
</p>
<br /><br />
<h3>How to execute JavaScript?</h3>
<br />
<p>
JavaScript can be executed right inside one’s browser. You can
open the JS console and start writing JS there.
<br />
Another way to execute JS is a runtime like Node.js which can be
installed and used to run JavaScript code.
<br />
Yet another way to execute JavaScript is by inserting it inside
the <script> tag of an HTML document.
</p>
<br />
<h3>What is JavaScript?</h3>
<br />
<p>
JavaScript is a programming language that is commonly used in web
development. It is a client-side language, which means that it is
executed by the user's web browser rather than the web server.
This allows JavaScript to interact with the user and create
dynamic, interactive web pages.
</p>
<p>
JavaScript is often used in combination with HTML and CSS to
create web pages that are more interactive and engaging. It can be
used to create all sorts of effects, such as drop-down menus,
image sliders, and pop-up windows.
</p>
<br />
<h3>Getting Started with JavaScript</h3>
<br />
<p>
To start using JavaScript, you'll need a text editor and a web
browser. There are many text editors available, such as Sublime
Text, Atom, and Visual Studio Code, which are all popular choices
among developers.
</p>
<br />
<p>
Once you have a text editor set up, you can start writing
JavaScript code. To do this, you'll need to create a new file with
a .js extension and then type your code into the file. You can
then save the file and open it in your web browser to see the
results.
</p>
<br /><br />
</div>
<div class="notes" id="div3" style="display: none">
<h2>Node.js Installation</h2>
<br />
<h3>Node.js Installation</h3>
<br />
<p>
Node.js is an open-source, cross-platform JavaScript runtime
environment that executes JavaScript code outside of a web
browser. It is commonly used for building server-side
applications, command-line tools, and other types of scalable
network programs.
<br />
To install Node.js, you can follow these steps:
</p>
<br />
<li>
Download the installer: Go to the official Node.js websitea
<a href="https://nodejs.org/en/" target="_blank">(https://nodejs.org/)</a>
and click the "Download" button to download the latest version of
the Node.js installer.
</li>
<li>
Run the installer: Double-click the downloaded installer file to
start the installation process. Follow the prompts to complete the
installation.
</li>
<li>
Verify the installation: To verify that Node.js has been installed
successfully, open a terminal or command prompt and type the
following command:
</li>
<br />
<p>Run the following command:</p>
<br />
<pre class="highlight">
<Code class="language-js">
node -v
</Code>
</Pre>
<br />
<br />
<p>
This should output the version number of Node.js that you have
installed.
</p>
<p>
That's it! You should now have Node.js installed on your system
and be able to run JavaScript code using the "node" command.
</p>
<p>I hope this helps. Let me know if you have any questions.</p>
<br />
<h3>Script using Node.js</h3>
<br />
<p>
To run JavaScript with Visual Studio Code (VS Code), you will need
to follow these steps:
</p>
<br />
<li>
Install VS Code: If you don't already have it, you can download
and install VS Code from the official website
<a href="https://code.visualstudio.com/" target="_blank">(https://code.visualstudio.com/)</a>.
</li>
<li>
Create a new JavaScript file: Open VS Code and create a new file
with a .js extension. You can do this by going to File > New File
or by using the shortcut Ctrl + N.
</li>
<li>
Write your JavaScript code: Type your JavaScript code into the
file and save it.
</li>
<li>
Open the Command Palette: You can open the Command Palette by
pressing Ctrl + Shift + P or by going to View > Command Palette.
</li>
<li>
Run the JavaScript file: In the Command Palette, type "Run
JavaScript" and select "Run JavaScript file in the terminal" from
the list of options. This will open a terminal window and run your
JavaScript file.
</li>
<li>
View the output: The output of your JavaScript code will be
displayed in the terminal window.
</li>
<br />
<p>
Alternatively, you can also run JavaScript code directly in the
terminal by using a command-line interpreter such as Node.js. To
do this, you will need to install Node.js and then run your
JavaScript file using the "node" command, followed by the name of
the file. For example:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
node myfile.js
</Code>
</Pre>
<br />
<br />
</div>
<div class="notes" id="div4" style="display: none">
<h2>What are Variables?</h2>
<br />
<p>
In JavaScript, variables are used to store data. They are an
essential part of any programming language, as they allow you to
store, retrieve, and manipulate data in your programs.
</p>
<br />
<p>
There are a few different ways to declare variables in JavaScript,
each with its own syntax and rules. In this blog post, we'll take
a look at the different types of variables available in JavaScript
and how to use them.
</p>
<br />
<h3>Declaring Variables</h3>
<br />
<p>
To declare a variable in JavaScript, you use the "var" keyword
followed by the name of the variable. For example:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
var x;
</Code>
</Pre>
<br />
<br />
<p>
This declares a variable called "x" but does not assign any value
to it. You can also assign a value to a variable when you declare
it, like this:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
var x = 10;
</Code>
</Pre>
<br />
<br />
<p>
In JavaScript, you can also use the "let" and "const" keywords to
declare variables. The "let" keyword is used to declare a variable
that can be reassigned later, while the "const" keyword is used to
declare a variable that cannot be reassigned. For example:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
let y = 20;
const z = 30;
</Code>
</Pre>
<br />
<br />
<p>
In this example, "y" is a variable that can be reassigned, while
"z" is a constant that cannot be reassigned.
</p>
<br />
<h3>Data Types</h3>
<br />
<p>
In JavaScript, there are several data types that you can use to
store different types of data. Some common data types include:
</p>
<br />
<li>Numbers (e.g. 10, 3.14)</li>
<li>Strings (e.g. "hello", 'world')</li>
<li>Booleans (e.g. true, false)</li>
<li>Arrays (e.g. [1, 2, 3])</li>
<li>Objects (e.g. { name: "John", age: 30 })</li>
<br />
</div>
<div class="notes" id="div5" style="display: none">
<h3>Variable Naming Rules</h3>
<br />
<p>
JavaScript is a dynamically-typed language, which means that you
don't have to specify the data type of a variable when you declare
it. The data type of a variable is determined by the value that is
assigned to it. For example:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
var x = 10; // x is a number
var y = "hello"; // y is a string
var z = [1, 2, 3]; // z is an array
</Code>
</Pre>
<br />
<br />
<h3>Variable Naming Rules</h3>
<br />
<p>
There are a few rules that you need to follow when naming
variables in JavaScript:
</p>
<br />
<li>
Variable names can only contain letters, digits, underscores, and
dollar signs.
</li>
<li>Variable names cannot start with a digit.</li>
<li>Variable names are case-sensitive.</li>
<br />
<p>
It is also a good practice to use descriptive and meaningful names
for your variables, as this makes your code easier to read and
understand.
</p>
<br />
<h3>Using Variables</h3>
<br />
<p>
Once you have declared a variable, you can use it to store and
retrieve data in your program. For example:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
var x = 10;
console.log(x); // prints 10
x = "hello";
console.log(x); // prints "hello"
</Code>
</Pre>
<br />
<br />
<p>
You can also perform various operations on variables, such as
mathematical calculations, string concatenation, and more. For
example:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
var x = 10;
var y = 20;
var z = x + y; // z is 30
var str1 = "hello";
var str2 = "world";
var str3 = str1 + " " + str2; // str3 is "hello world"
</Code>
</Pre>
<br />
<br />
</div>
<div class="notes" id="div6" style="display: none">
<h2>var vs let vs const</h2>
<br />
<p>
In JavaScript, there are three ways to declare variables: var,
let, and const. Each of these keywords has its own rules and uses,
and it is important to understand the differences between them in
order to write effective and maintainable code.
</p>
<br />
<h3>var</h3>
<br />
<p>
The "var" keyword is used to declare variables in JavaScript. It
was introduced in the early days of the language and was the only
way to declare variables for a long time. However, the "var"
keyword has some limitations and has been largely replaced by the
"let" and "const" keywords in modern JavaScript.
</p>
<br />
<p>
One of the main issues with "var" is that it is function-scoped,
rather than block-scoped. This means that variables declared with
"var" are accessible within the entire function in which they are
declared, rather than just within the block of code in which they
appear. This can lead to unexpected behavior and can make it
difficult to reason about the scope of variables in your code.
</p>
<br />
<h3>let</h3>
<br />
<p>
The "let" keyword was introduced in ECMAScript 6 (also known as
ES6) and is used to declare variables that can be reassigned
later. "let" variables are block-scoped, which means that they are
only accessible within the block of code in which they are
declared. This makes them more predictable and easier to reason
about than "var" variables.
<br />
For example:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
if (x > 10) {
let y = 20;
console.log(y); // 20
}
console.log(y); // ReferenceError: y is not defined
</Code>
</Pre>
<br />
<br />
<p>
In this example, the "y" variable is declared with the "let"
keyword and is only accessible within the block of the if
statement. If you try to access it outside of the block, you will
get a "ReferenceError" because "y" is not defined in that scope.
</p>
<br />
<h3>const</h3>
<br />
<p>
The "const" keyword was also introduced in ES6 and is used to
declare variables that cannot be reassigned later. "const"
variables are also block-scoped and behave similarly to "let"
variables in that respect. However, the main difference is that
"const" variables must be initialized with a value when they are
declared and cannot be reassigned later.
<br />
For example:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
const PI = 3.14;
PI = 3.14159; // TypeError: Assignment to constant variable.
</Code>
</Pre>
<br />
<br />
<p>
In this example, the "PI" variable is declared with the "const"
keyword and is assigned the value of 3.14. If you try to reassign
a new value to "PI," you will get a "TypeError" because "PI" is a
constant variable and cannot be changed.
</p>
<br />
<h3>Conclusion</h3>
<br />
<p>
In summary, "var" is an old way of declaring variables that is
function-scoped and can be reassigned. "let" is a newer way of
declaring variables that is block-scoped and can be reassigned.
"const" is a newer way of declaring variables that is block-scoped
and cannot be reassigned. In modern JavaScript, it is generally
recommended to use "let" and "const" instead of "var," as they
provide better scoping and make it easier to write maintainable
code.
</p>
<br />
</div>
<div class="notes" id="div7" style="display: none">
<h2>Primitives and Objects</h2>
<br />
<p>
In JavaScript, there are two main types of data: primitives and
objects.
</p>
<br />
<h3>Primitives</h3>
<br />
<p>
Primitives are the simplest and most basic data types in
JavaScript. They include:
</p>
<br />
<li>Numbers (e.g. 10, 3.14)</li>
<li>Strings (e.g. "hello", 'world')</li>
<li>Booleans (e.g. true, false)</li>
<li>Null (a special value that represents an absence of value)</li>
<li>
Undefined (a special value that represents an uninitialized
variable)
</li>
<br />
<p>
Primitives are immutable, which means that once they are created,
they cannot be changed. For example:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
let x = 10;
x = 20; // x is now 20
</Code>
</Pre>
<br />
<br />
<p>
In this example, the value of "x" is changed from 10 to 20.
However, this does not change the value of the primitive itself,
but rather creates a new primitive with the value of 20.
</p>
<br />
<h3>Objects</h3>
<br />
<p>
Objects are more complex data types in JavaScript and are used to
represent real-world objects or abstract concepts. They are
composed of key-value pairs, where the keys are strings and the
values can be any data type (including primitives and other
objects).
<br />
Objects are mutable, which means that they can be changed after
they are created. For example:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
let obj = { name: "John", age: 30 };
obj.age = 31; // the age property of obj is now 31
</Code>
</Pre>
<br />
<br />
<p>
In this example, the "age" property of the "obj" object is changed
from 30 to 31. This changes the value of the object itself, rather
than creating a new object.
</p>
<br />
<p>
There are several other data types in JavaScript that are
classified as objects, including arrays, functions, and dates.
These data types behave similarly to objects in that they are
mutable and can be modified after they are created.
</p>
<br />
<h3>Conclusion</h3>
<br />
<p>
In summary, primitives are the simplest data types in JavaScript
and are immutable. Objects are more complex data types that are
used to represent real-world objects or abstract concepts and are
mutable. It is important to understand the differences between
these two types of data in order to write effective and
maintainable code in JavaScript.
</p>
<br />
</div>
<div class="notes" id="div8" style="display: none">
<h3>Operators and Expressions</h3>
<br />
<p>
Operators in JavaScript are symbols that perform specific
operations on one or more operands (values or variables). For
example, the addition operator (+) adds two operands together and
the assignment operator (=) assigns a value to a variable.
<br />
There are several types of operators in JavaScript, including:
</p>
<br />
<li>Arithmetic operators (e.g. +, -, *, /, %)</li>
<li>Comparison operators (e.g. >, <,>=, <=,==, !=)</li>
<li>Logical operators (e.g. &&, ||, !)</li>
<li>Assignment operators (e.g. =, +=, -=, *=, /=)</li>
<li>Conditional (ternary) operator (e.g. ?:)</li>
<br />
<p>
Expressions are combinations of values, variables, and operators
that produce a result. For example:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
let x = 10;
let y = 20;
let z = x + y; // z is 30
</Code>
</Pre>
<br />
<br />
<p>
In this example, the expression "x + y" is evaluated to 30 and
assigned to the "z" variable.
<br />
Operator precedence determines the order in which operators are
applied when an expression has multiple operators. For example:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
let x = 10 + 5 * 3; // x is 25
</Code>
</Pre>
<br />
<br />
<p>
In this example, the multiplication operator (*) has a higher
precedence than the addition operator (+), so the multiplication
is performed before the addition. As a result, the expression is
evaluated as 10 + (5 * 3) = 25.
<br />
You can use parentheses to specify the order of operations in an
expression. For example:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
let x = (10 + 5) * 3; // x is 45
</Code>
</Pre>
<br />
<br />
<p>
In this example, the parentheses indicate that the addition should
be performed before the multiplication. As a result, the
expression is evaluated as (10 + 5) * 3 = 45.
</p>
<br />
<h3>Conclusion</h3>
<br />
<p>
In summary, operators are symbols that perform specific operations
on one or more operands, and expressions are combinations of
values, variables, and operators that produce a result. Operator
precedence determines the order in which operators are applied in
an expression, and parentheses can be used to specify the order of
operations. Understanding how to use operators and expressions is
an important part of programming in JavaScript.
</p>
<br />
</div>
<div class="notes" id="div9" style="display: none">
<h3>If else conditionals</h3>
<br />
<p>
The "if" statement in JavaScript is used to execute a block of
code if a certain condition is met. The "else" clause is used to
execute a block of code if the condition is not met.
<br />
Here is the basic syntax for an "if" statement:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
if (condition) {
// code to be executed if condition is true
}
</Code>
</Pre>
<br />
<br />
<p>
Here is the syntax for an "if" statement with an "else" clause:
</p>
<br />
<pre class="highlight">
<Code class="language-js">
if (condition) {
// code to be executed if condition is true
} else {
// code to be executed if condition is false
}
</Code>
</Pre>
<br />
<br />
<p>
The condition is a boolean expression that evaluates to either
true or false. If the condition is true, the code in the "if"
block is executed. If the condition is false, the code in the