├── 0. Common Practice.js
├── 1. Basics
├── 0. Practice.js
├── 10. Number.js
├── 04. Comments and Statements.js
├── 03. First JavaScript Program.js
├── 01. What is JavaScript.js
├── 02. JS Engine & Version History.js
├── 05. Variable, Declaration & Identifier.js
├── 09. String.js
├── 07. Datatypes.js
├── 06. Let, Var and Const.js
└── 08. Operators.js
├── How it works.jpg
├── .gitignore
├── index.html
├── README.md
└── script.js
/0. Common Practice.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/1. Basics/0. Practice.js:
--------------------------------------------------------------------------------
1 | // test file in basics category
--------------------------------------------------------------------------------
/How it works.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodAffection/JavaScript-Mini-Doc/main/How it works.jpg
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | complete.js
2 | 0. Basics
3 | 2. DOM
4 | 3. Array
5 | 4. Class & OOP
6 | 5. HTTP Request & Async
7 | For Video
8 | Assets
--------------------------------------------------------------------------------
/1. Basics/10. Number.js:
--------------------------------------------------------------------------------
1 | let summary = `
2 | - Number Functions
3 | - Video Tutorial
4 | `;
5 | localStorage.setItem('topicSummary', summary);
6 |
7 |
8 | //#region Theory
9 |
10 | /*
11 | 1. parseFloat
12 | convert the argument to corresponding number type.
13 |
14 | 2. parseInt
15 | convert a string to number type
16 |
17 | 3. toFixed
18 | parse the number using fixed-point notation
19 |
20 | 4. toPrecision
21 | return string representation of number in given precision by means of significant digits.
22 |
23 | 5. toString
24 | convert a number to string type.
25 |
26 | */
27 | //#endregion
28 |
29 | //#region CodeSamples
30 |
31 | //#endregion
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
13 |
14 |
15 |
16 |
17 |
23 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/1. Basics/04. Comments and Statements.js:
--------------------------------------------------------------------------------
1 | let summary = `
2 | - Statements
3 | - Comments in JS
4 | - Video Tutorial
5 | `;
6 | localStorage.setItem('topicSummary', summary);
7 |
8 | /*
9 | ? What is a Statement
10 | Statement in any programming language refers to a complete set of instructions to perform a particular action.
11 |
12 | eg.
13 | print a message to console
14 | > console.log('some message')
15 | show a popup dialog
16 | > alert('content goes here')
17 |
18 | * Semi-colon is optional after each js statement, if you insist on writing multiple
19 | * statements on a single line then semi-colon is a must to separate them each other.
20 |
21 | . Comments
22 | There are 2 types of comments
23 | - single line comment
24 | - multi-line comment
25 | */
26 |
27 | // SINGLE LINE COMMENT, comments goes here. should not exceed more than one line
28 |
29 | /*
30 |
31 | This is a MULTI-LINE COMMENT
32 | starts with '/*'
33 | ends with '*[Forward Slash]'
34 | in between you can have any number of lines of comments.
35 |
36 | */
37 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JavaScript-Mini-Doc
2 |
3 | This is JavaScript Documentation Note in JavaScript itself. :blush:
4 |
5 | *Will be updated when new topic uploaded to CodAffection YouTube Channel*
6 |
7 | JavaScript Playlist : https://bit.ly/3gE5Dmp
8 |
9 | # How it Works
10 |
11 | Requirements
12 | * Visual Studio Code
13 | (You can use other IDEs also, if the IDE have following or similar extensions)
14 | * VS Code Extension : Better Comments
15 | * VS Code Extension : Live Server
16 |
17 |
18 |
19 |
20 |
21 | # Topic Status
22 | Basics
23 | :heavy_check_mark: 01. What is JavaScipt
24 | :heavy_check_mark: 02. JavaScript Engine and Version History
25 | :heavy_check_mark: 03. First JavaScript Program
26 | :heavy_check_mark: 04. Comments and Statments
27 | :heavy_check_mark: 05. Variables, Declaration and Identifiers
28 | :heavy_check_mark: 06. let, var and const
29 | :heavy_check_mark: 07. Datatypes
30 | :heavy_check_mark: 08. Operators
31 | :heavy_check_mark: 09. String
32 | :heavy_check_mark: 10. How to Deal with Numbers
33 | :x: 11. Control Flow Statements
34 | coming soon
--------------------------------------------------------------------------------
/1. Basics/03. First JavaScript Program.js:
--------------------------------------------------------------------------------
1 | let summary = `
2 | - JS Developemnt Environment
3 | - First Program in JS
4 | - Video Tutorial
5 | `;
6 | localStorage.setItem('topicSummary', summary);
7 |
8 | // Prints 'Hello World' to Developer Console of Browser
9 | console.log('Hello World')
10 |
11 | // Prints result of Math Operation 3+5.
12 | console.log(5+3)
13 |
14 |
15 | /*
16 |
17 | * Required Development Environment for JS
18 | - Tools to write js program
19 | any text editor of your choice or an IDE.
20 | From Notepad to IDEs like VS Code, Sublime, Atom etc
21 |
22 | - Run Time Environment
23 | There are many ways to run a js program.
24 | But we'll using a web browser to execute js code.
25 |
26 | - Extension
27 | There are some IDE Extensions helpful for fast and error free coding.
28 |
29 | * Methods to Run JS
30 | 1. Within Developer Console of Web Browser itself
31 | 2. Within HTML web page
32 | 3. Using VS Code Extension : Quokka.js
33 | 4. There are other ways like using node, we've not discussed in this course
34 |
35 | * Semicolon at the end of each JS line/ statement is optional.
36 | */
--------------------------------------------------------------------------------
/1. Basics/01. What is JavaScript.js:
--------------------------------------------------------------------------------
1 | var summary = `
2 | - What is JavaScript ?
3 | - Why you should learn it?
4 | - Video Tutorial
5 | `;
6 | localStorage.setItem('topicSummary', summary);
7 |
8 | /*
9 |
10 | ? What is JavaScript?
11 | -JavaScript is a light-weight, interpreted or just-in-time compiled
12 | programming language with first class functions.
13 |
14 | Not going to make things harder for you by explaing
15 | these language features now, We'll do that later.
16 |
17 | * Brendan Eich invented JS in 1995
18 |
19 | ? Pre Requisite for Learning JS
20 | - basic knowledge in HTML & CSS.
21 |
22 | Previously JavaScript was primarily used to add functionality
23 | and behaviors to your website client-side. Nowadays it is being almost anywhere.
24 |
25 | + Web Design
26 | |-> Along with HTML and CSS
27 | |-> React, Angular, VueJS (clint-side frameworks)
28 |
29 | + Server Side
30 | |-> Nodejs.
31 |
32 | +Mobile Development
33 | |-> React Native, Ionic
34 |
35 | +Desktop App Development
36 | |-> Electron
37 |
38 | +Internet of Things(IoT)
39 | |-> Cylon, Favor
40 |
41 | +Artificial Intelligence
42 | |-> Tensorflow.js
43 |
44 |
45 | * JS Frameworks or libraries are used to build all types of applications - Front-End, Back-End, AI, IoT Mobile & Desktop, That's not the case with HTML and CSS (Primarily used for Web Designing). So nowadays you can't runaway from JS :).
46 |
47 | ? Java vs JavaScript
48 | - JavaScript has no relation with Java.
49 | - It's just the word 'java' in 'javascript'
50 | - It's like car and carpet.
51 |
52 | */
53 |
54 |
--------------------------------------------------------------------------------
/1. Basics/02. JS Engine & Version History.js:
--------------------------------------------------------------------------------
1 | var summary = `
2 | - What is JavaScript Engine?
3 | - JavaScript Version History
4 | - Video Tutorial
5 | `;
6 | localStorage.setItem('topicSummary', summary);
7 |
8 | /*
9 |
10 | ? Do we need to install run-time environment for js
11 | NO, it already comes with web browsers, commonly called as JavaScript Engine.
12 |
13 | The main function of JavaScript Engine is that
14 | it convert our js code to machine readable code (also called as interpretation/ compilation).
15 |
16 | JavaScript Engine is also a software created by web browser's manufacture.
17 | Each Web Browser has named their JS Engine as follows.
18 |
19 | Google Chrome -> v8
20 | Mozilla Firefox -> Spider Monkey
21 | MS Edge -> Chakra
22 |
23 | Since Web Browsers comes with their own js engine.
24 | It is necessary to standardize these js engines.
25 | Then only we'll have same output from these browsers for a given js file.
26 |
27 | * JS Engine is Standardized by ECMA International.
28 | They create standards for technologies in IT industry.
29 | JS Standardization is called as ECMAScript or ECMA 262.
30 |
31 | ECMAScript is often abbreviated as ES.
32 |
33 | ECMAScript contains guidlines for creating JS Engine.
34 | Like language syntax and semantics.
35 |
36 | Other than JavaScript, JScript, ActionScript etc follows ECMAScript Guidlines.
37 | But JavaScript is the most popular implementation of ECMAScript.
38 |
39 |
40 | ! JS Version or JS Engine History
41 | ECMAScript 1(ES1) - 1997
42 | ECMAScript 2(ES2) - 1998
43 | ECMAScript 3(ES3) - 1999
44 | ECMAScript 4(ES4) - Skipped/ Not Released
45 | ECMAScript 5(ES5) - 2009
46 | ECMAScript 2015(ES6) - 1997
47 | ECMAScript 2016 - 2016
48 | ECMAScript 2017 - 2017
49 | .... Upto This Year ...
50 |
51 | */
--------------------------------------------------------------------------------
/1. Basics/05. Variable, Declaration & Identifier.js:
--------------------------------------------------------------------------------
1 | let summary = `
2 | - What is a Variable ?
3 | - Declarations & Identifier
4 | - Rules for Naming Identifiers
5 | - Case Sensitivity in JS
6 | - Video Tutorial
7 | `;
8 | localStorage.setItem('topicSummary', summary);
9 |
10 | //#region Theory
11 | /*
12 | * Variable
13 | It is container that hold information, associated with a name to refer in rest of the code.
14 |
15 | * Declaration & Initialization
16 | The process of creating new variable is called as Declarartion
17 | And Assigning new value to a variable is called Initialization
18 |
19 | * Identifier
20 | It's a sequence of characters in code used to name elements with in our program.
21 | These elements include variables, functions, properties etc.(discuused in future topics)
22 |
23 | * Rules for Naming Identifiers
24 | 1. It can have Unicode letters, Digits (0->9), $, _
25 | 2. Must start with either a Unicode letter or a $ or _
26 | 3. Not allowed to use a js keyword as an identifier
27 |
28 | [Here the Unicode letters means alphabetic letters from languages across the world]
29 | TODO : To know more about Unicode, check out following article
30 | > https://bit.ly/3xXcpsW
31 |
32 | ! JS is case-sensitive
33 | JavaScript treats both uppercase and lowercase letters are treated as distinct.
34 | for more check out the explanation region.
35 |
36 | */
37 | //#endregion
38 |
39 | //#region Explanation
40 |
41 | // Following statement is a declaration statement, it creates a new variable 'amount'
42 | let amount; // Declaration Statement
43 |
44 | // Initialization
45 | amount = 5;
46 |
47 | //It's possible to Declare and Initialize a variable in a single line.
48 | let totalAmount = 10;
49 |
50 | // JS is case-sensitive
51 | let address;
52 | let Address;
53 | // both address and Address are treated as separate variables.
54 | // eventhough they only differ in case
55 |
56 | /*
57 | ? rules for identifiers(variables, function, properties, etc)
58 | - it can have unicode letters,digits(0-9),$,_
59 | - MUST start with lettter, _, $. CAN'T BEGIN with digits(0-9).
60 | - not allowd use reserved keywords like if, let, etc
61 |
62 | Eg for valid identifier
63 | amount, _amount, $amount, amount123
64 |
65 | Eg for invalid identifier
66 | 1amount - starting with digit
67 | #amount - # not allowed anywhere in identifier
68 | let - it's js keyword
69 | */
70 |
71 | //#endregion
--------------------------------------------------------------------------------
/1. Basics/09. String.js:
--------------------------------------------------------------------------------
1 | let summary = `
2 | - String
3 | - Template Strings
4 | - String Interpolation
5 | - Escape Sequence in a String
6 | - String Concatenation
7 | - Find length of a String
8 | - String Primitive vs String Object
9 | - String Operations
10 | - Video Tutorial
11 | `;
12 | localStorage.setItem('topicSummary', summary);
13 |
14 | //! Theory
15 | //#region - Theory
16 | /*
17 | * What is a String.
18 | Sequence of charactors enclosed withing in double("") or single('') quotation.
19 |
20 | 'sample string goes here'
21 | "sample string goes here, with double quotes"
22 |
23 |
24 | ! template strings.
25 | introduce in ES6.
26 | string must be enclosed within backticks(` - backticks).
27 | string literal can spread over multiple lines.
28 | placeholder syntax
29 |
30 | speacial characters : \n \t etc.
31 |
32 | escaping characters with backslash(\) : \' \" \\ etc.
33 |
34 | string properties.
35 | length return no. of characters within the string.
36 |
37 | string operators.
38 | '+' operator can be used for concating strings.
39 |
40 | TODO: String Functions
41 | *1. Functions for Inspection
42 | charAt(index) - returns charactor at a given string
43 | charCodeAt(index) - returns unicode number of the character at given index.
44 | indexOf(sub_string) - returns index of first match for given substing
45 | lastIndexOf(sub_string) - returns index of last match for given substing
46 | startsWith(sub_string) - returns boolean, indicating whether string starts with the sub_string or not.
47 | endsWith(sub_string) - returns boolean, indicating whether string ends with the sub_string or not.
48 | includes(sub_string) - returns boolean, indicating whether the substring is present anywhere in the string.
49 |
50 | *2. Functions for Modification
51 | concat(string1, string2) - return a big string, after concating given strings
52 | repeat(no_of_repeatition) - resulting will the repeatition of original string with given no. of times.
53 | substring & slice (startIndex, endIndex) - returns a substring within given index range, endIdex not included.
54 | splite(splite_by_string) - returns an array, after spliting entire string by given splite_string(eg. white space)
55 | toLowerCase & toUpperCase
56 | trim, trimStart & trimEnd - removes white space from both ends.
57 | */
58 | //#endregion - Theory
59 |
60 | //! Explanation
61 | //#region - Explanation
62 | let fullName = "Ashton Cox",
63 | streetAddress = "25 St. James's Street";
64 | // if apostraphy is part of the string, then wrap the string with "".
65 | // if double quotes is part of the string, then wrap the string with ''.
66 |
67 | // * escape sequence
68 | let address = "14th Floor, Smithson Plaza \n25 St. James's Street \nLondon";
69 | // special characters are used to accomplish certain operations within
70 | // the string itself.
71 |
72 | // * escaping charactors with '\'
73 | console.log('St. James\'s Street')
74 | // print: c:\Program Files;
75 | console.log('c:\\Program Files')
76 |
77 | //TODO : Complete list of Escape Sequences in JavaScript
78 | https://mzl.la/3smujDU
79 |
80 | // ! template string
81 | let address2 = `14th Floor, Smithson Plaza
82 | 25 St. James's Street
83 | London`
84 | console.log(address2);
85 |
86 | let greetings = `Good Morning, ${fullName}!`;
87 | console.log(greetings);
88 | // here ${variable} will be replaced with the variable value.
89 | // this way of generating string is called //* String Interpolation
90 | // and this portion ${variable} is called //* placeholder
91 |
92 | //#endregion - Theory
--------------------------------------------------------------------------------
/1. Basics/07. Datatypes.js:
--------------------------------------------------------------------------------
1 | let summary = `
2 | - Datatypes in JS
3 | - Dynamically typed language
4 | - 'typeof' operator
5 | - Mutable and Immutable
6 | - Video Tutorial
7 | `
8 | localStorage.setItem('topicSummary', summary);
9 |
10 | //#region - Theory
11 | /*
12 | ! DataTypes
13 | * Primitives(* they are their own, they are not derived any other data types)
14 | - Boolean
15 | - null
16 | - undefined
17 | - Number
18 | - BigInt
19 | - String
20 | - Symbol
21 | * Object
22 |
23 | We don't have to specify the datatype while declaring a variable.
24 | hence we could assign any of the above type to a single varible at various stage of the program.
25 | Hence Javascript is called as // * Dynamically typed language.
26 | Which is not possible many programming languages like c, c#, java, etc.
27 |
28 | ! Boolean
29 | Indicates the logic Yes or No.
30 | * true, false
31 |
32 | ! null
33 | * null
34 | meant to denote non-existent or absence of a value.
35 |
36 | ! undefined
37 | * undefined
38 | denotes the variable is declared but not yet initialized.
39 |
40 | ! Number
41 | Numeric values -> integer, floating-point numbers, +Infinity, -Infinity, NaN.
42 | Eg : 54, 5.4.
43 |
44 | Safe Range : -(2^53-1) to 2^53-1.
45 | Beyond safe range, you might loose the precision.
46 |
47 | ! BigInt
48 | used to stores integer numbers greater than Safest integer that Number type can store.
49 | can't store floating point numbers
50 | declaration : use suffix-n or use BigInt function.
51 |
52 | ! String
53 | sequence of characters enclosed within quotes.
54 |
55 | !Symbols
56 | returns uneaque values, which can't be recreated.
57 |
58 | * typeof operator can used to check data type of a value/ variable.
59 | Syntax : typeof [variable_name]; //returns type of the variable.
60 |
61 | * Mutable and Immutable.
62 | Objects are immutable, because we can make modifications within it,
63 | whithout reclaring the object.
64 | That's not the case with primitive datatypes. their value can't be
65 | changed. Hence they are called as Immutable.
66 | for example 5. we can't change anything within 5. like we do
67 | in objects ({...}) like updating values of propeties in it.
68 |
69 | */
70 | //#endregion Theory
71 |
72 | //#region - Explanation
73 |
74 | //TODO 1. boolean
75 | let isActive = true;
76 | let isLoggedIn = false;
77 |
78 | //TODO 2. null
79 | // practical situation where null is more appropriate.
80 | let teamleadId;
81 | // each employee has an id. with this variable we store id of
82 | // his/her team lead.
83 | // if the person is a manager or head of department
84 | // he won't have any teamlead. so that case the value //* null
85 | // is more approapriate.
86 |
87 | //TODO 3. undefined
88 | let x;
89 | console.log(x);
90 | // variable not initialized, so undefined will be printed.
91 |
92 | //TODO 4. Numbers
93 | let a = 47;//integer
94 | a = 3.4;//floating number(contains floating point decimal, numbers with fraction)
95 |
96 | //largest integer number that can be stored in a number type.
97 | console.log(Number.MAX_SAFE_INTEGER)
98 |
99 | //TODO 5. Bigint
100 | //only integers, not floating-point numbers
101 | a = 34n
102 | a = BigInt(34)
103 |
104 | //TODO 6. String
105 | let name = 'Olivia Jhonas';
106 | let gender = 'male';
107 |
108 | //TODO 7. Object
109 | let student ={
110 | admissionNumber : 934875,
111 | name : 'Trevor',
112 | batch : 2022
113 | }
114 |
115 | //TODO 8. Symbol
116 | let symbol1 = Symbol('abc');
117 | let symbol2 = Symbol('abc');
118 | // === compares two variable/ value. true means they are equal, else false.
119 | console.log(symbol1 === symbol2);
120 | // prints false. symbols returns unique values always.
121 |
122 | //#endregion - Explanation
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const storeKey = {
2 | SELECTED_CATEGORY: 'selectedCategory',
3 | SELECTED_TOPIC: 'selectedTopic',
4 | TOPIC_SUMMARY: 'topicSummary',
5 | }
6 |
7 | const basicFiles = [
8 | '0. Practice.js',
9 | '01. What is JavaScript.js',
10 | '02. JS Engine & Version History.js',
11 | '03. First JavaScript Program.js',
12 | '04. Comments and Statements.js',
13 | '05. Variable, Declaration & Identifier',
14 | '06. Let, Var and Const.js',
15 | '07. Datatypes.js',
16 | '08. Operators.js',
17 | '09. String.js',
18 | '10. Number.js',
19 | ]
20 |
21 | const categoryGroup = document.getElementById('categoryGroup');
22 | categoryGroup.addEventListener("change", handleGroupChange);
23 | function handleGroupChange(event) {
24 | const { value } = event.target;
25 | localStorage.setItem(storeKey.SELECTED_CATEGORY, value);
26 | localStorage.setItem(storeKey.SELECTED_TOPIC, '0. Practice.js');
27 | localStorage.setItem(storeKey.TOPIC_SUMMARY, '');
28 | location.reload();
29 | }
30 |
31 | const topicSelect = document.getElementById('topics');
32 | topicSelect.addEventListener("change", handleTopicChange);
33 | function handleTopicChange(event) {
34 | localStorage.setItem(storeKey.SELECTED_TOPIC, event.target.value);
35 | localStorage.setItem(storeKey.TOPIC_SUMMARY, '');
36 | location.reload();
37 | }
38 |
39 | window.addEventListener('load', event => {
40 | configureDefaultStore();
41 | populateGroupAndTopics();
42 | loadScriptFromLocalStorage();
43 | });
44 | function configureDefaultStore() {
45 | if (!localStorage.getItem(storeKey.SELECTED_CATEGORY))
46 | localStorage.setItem(storeKey.SELECTED_CATEGORY, 'Practice');
47 | if (!localStorage.getItem(storeKey.SELECTED_TOPIC))
48 | localStorage.setItem(storeKey.SELECTED_TOPIC, '0. Practice');
49 | if (!localStorage.getItem(storeKey.TOPIC_SUMMARY))
50 | localStorage.setItem(storeKey.TOPIC_SUMMARY, '');
51 | }
52 | function populateGroupAndTopics() {
53 | topicSelect.innerText = null;
54 | let selectedCategory = localStorage.getItem(storeKey.SELECTED_CATEGORY),
55 | selectedTopic = localStorage.getItem(storeKey.SELECTED_TOPIC),
56 | listOfOptions;
57 | document.getElementsByName('category')
58 | .forEach((el, i) => {
59 | if (el.value == selectedCategory)
60 | el.checked = true;
61 | })
62 | switch (selectedCategory) {
63 | case 'Practice':
64 | listOfOptions = [];
65 | break;
66 |
67 | case '1. Basics':
68 | listOfOptions = basicFiles;
69 | break;
70 |
71 | default:
72 | break;
73 | }
74 | if (listOfOptions.length == 0)
75 | document.getElementById('topicFieldset').style.visibility = 'hidden';
76 | else {
77 | listOfOptions.forEach(el => {
78 | topicSelect.innerHTML += getTopicOption(el);
79 | })
80 | topicSelect.value = selectedTopic;
81 | }
82 | }
83 |
84 | function getTopicOption(topic) {
85 | return ``;
86 | }
87 | function loadScriptFromLocalStorage() {
88 | let scriptURL;
89 | if (localStorage.getItem(storeKey.SELECTED_CATEGORY) == "Practice")
90 | scriptURL = '0. Common Practice.js';
91 | else
92 | scriptURL = `./${localStorage.getItem(storeKey.SELECTED_CATEGORY)}/${localStorage.getItem('selectedTopic')}`
93 | let scriptEl = document.createElement('script')
94 | scriptEl.type = 'text/javascript';
95 | scriptEl.src = scriptURL;
96 | scriptEl.async = true;
97 | document.body.appendChild(scriptEl);
98 | scriptEl.addEventListener('load', () => { loadTopicSummary() });
99 | }
100 |
101 | function loadTopicSummary() {
102 | let topicSummary = localStorage.getItem('topicSummary');
103 | if (topicSummary) {
104 | document.getElementById("topicSummary").innerHTML = topicSummary.split('-').join(' - ');
105 |
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/1. Basics/06. Let, Var and Const.js:
--------------------------------------------------------------------------------
1 | let summary = `
2 | - let vs var vs const.
3 | - Scope
4 | - Redeclaration
5 | - Hoisting
6 | - Best practices.
7 | - Video Tutorial
8 | `;
9 | localStorage.setItem('topicSummary', summary);
10 |
11 | //#region Theory
12 | /*
13 |
14 | * let, var, and const
15 | - three keywords used to create js variables.
16 | - all variable declaration startes with any of these keywords.
17 | - var was there in js from beginning,
18 | but both let and const introduced in ES6 or in th year 2015.
19 |
20 | * You could create multiple variable in a statement as follows.
21 | use comma after each variable.
22 | let a=1, b=2, c=3;
23 |
24 | TODO : pre-requisites topics
25 | 1. Block Statement
26 | 2. Function (will be discussed in separate file)
27 | 3. Scope (will be discussed in separate file)
28 | 4. Hoisting (will be discussed in separate file)
29 |
30 | 1. Block Statement
31 | Used to group multiple statements within a pair of curly brackets. eg,
32 | {
33 | statement 1
34 | statement 2
35 | statement 3
36 | }
37 |
38 | Following table shows the summary of comparison with let and var.
39 | here let and const has same behaviour.
40 |
41 |
42 | Var X Let & Const
43 | ------------------------------------------------------
44 | Block Scope NO YES
45 |
46 | Global Scope YES NO
47 |
48 | Create Global
49 | Object Property YES NO
50 |
51 | Can be
52 | Redeclared YES NO
53 |
54 | Hoistable YES NO
55 |
56 | * const keyword
57 | it's variables are known as CONSTANTS.
58 | these variables must be initialised in their declaration statement.
59 | and in rest of the program it's value can't be changed.
60 |
61 |
62 | * *** Best Practice on using let, var and const
63 | Order Priority => const => let => var.
64 | use constants if you know value of the variable is not going to change in rest of the program,
65 | if change of value is necessary go for let
66 | if you have a specific reason to leave the variable in global scope then use var.
67 |
68 | ? why constants comes before let.
69 | eventhough let and const has some behaviour in above comparison table,
70 | like same scope, hoisting behaviour and no-redeclaration.
71 | js engine already knows in advance, that constants are not going to change in rest of the program.
72 | Hence in terms of memory management, the engine only need to take few precautions than changing
73 | let variables.
74 |
75 | ? why var variable has the least priority.
76 | var variables should be avoided wherever possible, because of following reasons.
77 | - it gives top most scope (global scope) to it's variables, so variable reserves the memory
78 | for a long time than it actually needed.
79 | - because of wide availability, you may accidently redeclare or reassign the var variable,
80 | the overriden variable might be from an another library.
81 | - hoisting behaviour of variable creates confusion in developer.like whether it is already
82 | initilised or not.
83 |
84 | */
85 | //#endregion
86 |
87 | //#region Explanation
88 |
89 | //TODO : Program 1 - Compare scopes.
90 | let letOutsideA = 1; //available anywhere in this file
91 | var varOutsideA = 2; //global scope
92 |
93 | //block statement
94 | {
95 | let letBlockA = 1; // only available to this block
96 | var varBlockA = 2; // no block scope, so available in global scope
97 | }
98 |
99 | function sample() {
100 | let letFuncA = 1; // within the function
101 | var varFuncA = 2; // within the function
102 | }
103 |
104 | // TODO : Program 2 - Re-declaration
105 | let reLet = 1;
106 | //let reLet =11; //! Not Possible to redeclare in same scope.
107 | // but possoble in a different scope like block statement or Function.
108 |
109 | var reVar = 2;
110 | var reVar = 22; // Possible redeclare in same scope.
111 |
112 | //TODO : Program 3 - Hoisting
113 | // let not available before its declaration statement
114 | // console.log(hoistLet). //! Not Possible.
115 |
116 | // var variables are hoisted.
117 | // can be accessed before declaration statement.
118 | // before declaration all variables has the value 'undefined'
119 | console.log(hoistVar); // * prints 'undefined'
120 |
121 | let hoistLet = 1;
122 | var hoistVar = 2;
123 |
124 | //#endregion
--------------------------------------------------------------------------------
/1. Basics/08. Operators.js:
--------------------------------------------------------------------------------
1 | let summary = `
2 | - Operator Vs Operand
3 | - Expression Vs Statement
4 | - Operators in JS
5 | - Truthy and Falsy Values
6 | - Operator Precedence and Associativity
7 | - Video Tutorial
8 | `
9 | localStorage.setItem('topicSummary', summary);
10 |
11 | //#region Theory
12 | /*
13 | ? operator and operands
14 | 'OPERATOR' specifies an operation on the data which yields a value.
15 | data on which operator act is called 'OPERAND'.
16 |
17 | TODO : Expression Vs Statement.
18 | Statement is a complete set of instruction to perform a particular action.
19 | like
20 | 1. printing value to dev. console.
21 | > console.log('message');
22 |
23 | 2. declaring or assigning values to variables
24 | > let a=4, b=5, c;
25 | > c=6;
26 |
27 | Expression is a unit of code that can be evaluated to a value.
28 | Eg.
29 |
30 | > let a=5;---> here '5' is an expression, bcz, it's a value;
31 | > let b = a*2; ---> 'a*2' can be evaluated to value, so it's also an expression.
32 | > if(a>6){...} ---> here 'a<6' can be evaluated to a boolean value. so it's an expression.
33 |
34 |
35 |
36 | ! Assignment Arithmetic Logical Comparison
37 | = +, -, *, / AND(&&) Equal(==) X !=
38 | +=, -=, *=, /= %, **, ++, -- OR(||) Strict Equal(===) X !==
39 | x &&= y, x ||= y unary negation(-) NOT(!) Greater than(>), >=
40 | x ??= y unary plus(+) Less than(<), <=
41 |
42 | [See CodeSnippets Region for explanation per operator.]
43 |
44 | Skipped Bitwise operators.(Useful in rare situation where math is included.)
45 |
46 | TODO : Extra Operator - will be explained under other topics.
47 | String Operators(string) + Unary Operator [delete(object),typeof] + Conditional ternary operator(control flow- if) + Relational Operators[in,instanceOf (Object)]
48 |
49 | ? What is falsy and truthy values.
50 | Ans. values false, undefined, null,0, -0, 0n, NaN, '',"" are treated as falsy in boolean context.
51 | so they are called as falsy values. and everything else is truthy.
52 |
53 |
54 | Operators Precedence.
55 | Ref Precedence Table: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
56 |
57 | Precedence determines order of executing operators in an expression.
58 |
59 |
60 | */
61 | //#endregion
62 |
63 | //#region CodeSnippets
64 | let a = 8, b = 3, result = 0;
65 | //standard arithmetic operations
66 | result = a + b;
67 | result = a - b;
68 | result = a * b;
69 | result = a / b;
70 | // modulus operator - returns reminder
71 | result = a % b;
72 | // expenentiation operator - a^b;
73 | result = a ** b;
74 |
75 | // compound assignment operators
76 | // when immediate/ adjacent variables
77 | // on both sides of the equals to operator are same
78 | // js has short-hand operators - compound assignment operators
79 |
80 | a = a + b;
81 | // with compound assignment operator
82 | a += b;
83 | // and for rest of the basic arithmatic operators also.
84 | a -= b;
85 | a *= b;
86 | a /= b;
87 |
88 | // increment and decrement operators
89 | // operators for incrementing or decrementing
90 | // variables by one unit.
91 | a = a + 1;
92 | // is similar to
93 | a++; //post increment
94 |
95 | a = a - 1;
96 | // can be written like this
97 | a--; //post decrement
98 |
99 | // above operators are post increment version
100 | // means if we assign their value to another variable like this
101 | b = a++;
102 | // if a is 1, 1 is returned and assigned to the variable b;
103 | // then increment value of to 2, (same steps for post decrement)
104 |
105 | // the same decrement or decrement can also be done like
106 | ++a; // pre increment
107 | --a; // pre decrement
108 | // operation is same, when these operations result stores into
109 | // a variable the assignment happens after their operation (increment/ decrement).
110 |
111 |
112 | // TODO : Unary Nagation. (-)
113 | // Switch sign of the number. from +ve to -ve and viz.
114 | let i = 5;
115 | console.log(-i); // prints -5;
116 |
117 | //TODO : Unary Plus. (+)
118 | // convert number string to number data type.
119 | let j = '5'; // type of b is string
120 | let c = +b; // type of c becomes number.
121 |
122 | // TODO : Comparison Operators (==,!=, ===, !==)
123 | // Comparison Operators are used in boolean context,
124 | // where js expect either true or false, eg if statement
125 | // normal equals operator ==
126 | console.log(5 == 5);// prints true
127 | console.log(5 == 6);// prints false
128 | console.log('6' == 6);// prints true, doesn't care about datatype
129 | // only compare the value.
130 | // not equal to operator !=, check if they are not equal or not
131 | console.log(5 != 4); // prints true
132 | console.log(5 != 5); // prints false
133 | console.log(5 != '5'); // prints false, doesn't care about datatype
134 |
135 | //strict equals to operator ===
136 | // first of check the datatype and then value in it.
137 | console.log(5 === 5);// prints true
138 | console.log(5 === 6);// prints false
139 | console.log('6' === 6);// prints false, datatype matters
140 | // strict not equal to operator !==, same
141 | console.log(5 !== 4); // prints true
142 | console.log(5 !== 5); // prints false
143 | console.log(5 !== '5'); // prints true, datatype matters
144 |
145 | // TODO : >, >=, <, <=
146 | // greater than operator >
147 | console.log(5 > 3);//prints true
148 | console.log(5 > 7);//prints false
149 | console.log(5 > 5);//* prints false
150 |
151 | // greater than or equal to operator >
152 | console.log(5 >= 3);//prints true
153 | console.log(5 >= 7);//prints false
154 | console.log(5 >= 5);//* prints true
155 |
156 | // less than operator <
157 | console.log(3 < 5);//prints true
158 | console.log(3 < 1);//prints false
159 | console.log(3 < 3);//* prints false
160 |
161 | // less than or equal to operator <
162 | console.log(3 <= 5);//prints true
163 | console.log(3 <= 1);//prints false
164 | console.log(3 <= 3);//* prints true
165 |
166 |
167 | // TODO : Logical Operators.
168 | // Operators AND(&&), OR(||), NOT(!)
169 | // They expect boolean operands.
170 |
171 | // AND &&
172 | // Oprand1 && Operand2
173 | // returns true, only when both operand are true. else false will returned.
174 |
175 | //eg. check given no. is 2 digit
176 | let number1;
177 | if (number1 > 9 && number1 < 100) {
178 | console.log('given no. is a 2 digit number.')
179 | }
180 |
181 |
182 | // OR ||
183 | // Oprand1 || Operand2
184 | // returns true, if any of the operand is true. else false will returned.
185 |
186 | //eg. check today is weekend or not.
187 | let dayOfWeek = 'Mon';
188 | if (dayOfWeek == 'Sun' || dayOfWeek == 'Sat') {
189 | console.log('Weekend');
190 | }
191 |
192 | // NOT !
193 | // just switch the boolean from true to false or false to true.
194 | console.log(!false); // prints true.
195 | console.log(!true); // prints false.
196 |
197 |
198 | // TODO : Compound Assignment - &&=, ||=, ??=
199 |
200 | // &&= Logical And Assignment
201 | // assignment works only when LHS is truthy.
202 | let x = 1;
203 | let y = 0;
204 |
205 | x &&= 2; //x is truthy, so assignment works
206 | y &&= 2; //y is falsy, so no assignment
207 |
208 | // ||= Logical Or Assignment
209 | // assignment works only when LHS is falsy
210 | x ||= 2; //x is truthy, so no assignment
211 | y ||= 2; //y is falsy, so assignment works
212 |
213 | // ??= Nullish Assignment
214 | // assignment works only when LHS is nullish(null or undefined).
215 | let z;
216 | z ??= 5;//assignment works bcz, z is nullish
217 | z = 5;
218 | z ??= 6; // no assignment, bcz, z is not nullish.
219 |
220 | // ^ you might see red squiggly line for above 3 assignment operators(normally indicate program error)
221 | // Here it's not an error, these operators are latest addition to JS, meaning your IDE or Extension are not
222 | // Compactible with latest JS Version.
223 |
224 |
225 | // TODO : Operator Precedence.
226 | let result1 = 3 + 5 * 2;
227 | // if no precedence were assigned.
228 | // and if we execute from left to right.
229 | // it would be evaluated as follows.
230 |
231 | // 8 *2 (first addition)
232 | // 16
233 |
234 | // * But actually it is executed in following order
235 | // 3 + 10 ( first multiplication)
236 | // 13
237 |
238 | // Here multiplication got more precedence than addition.
239 | // you could ref. mdn operator precedence table.
240 |
241 | // if you want to do it like first addition then multiplication
242 | // you can group such operations with a pair of paranthesis
243 | // bcz, grouping has highest precedence than anything else
244 |
245 | let result2 = (3 + 5) * 2;
246 | // now execution order will be, first addition -> multiplication.
247 |
248 |
249 | // in precedence table, there are operators with same precedence in that case
250 | // associativity is mentioned. left-to-right or right-to-left.
251 |
252 | let operand1, operand2;
253 | operand1 = operand2 = 3;
254 | // here same operator (=), came twise, so same precedence
255 | // so look for associativity. for =, it right to left.
256 | // so first operand2 is assigned with 3,
257 | // and then the same 3 is assigned to operand1.
258 |
259 |
260 | //one more eg.
261 | let result3 = 4 + 5 * 2 - 4;
262 | // based on precedence, multiplication happens first
263 | // 4 + 10 -4; // now + and - has some precedence,
264 | // so as per their associativity left to right order execution happens
265 | // 14-4
266 | // 10
267 |
268 | //#endregion
--------------------------------------------------------------------------------
18 |
19 |
20 |
21 | # Topic Status
22 | Basics
23 | :heavy_check_mark: 01. What is JavaScipt
24 | :heavy_check_mark: 02. JavaScript Engine and Version History
25 | :heavy_check_mark: 03. First JavaScript Program
26 | :heavy_check_mark: 04. Comments and Statments
27 | :heavy_check_mark: 05. Variables, Declaration and Identifiers
28 | :heavy_check_mark: 06. let, var and const
29 | :heavy_check_mark: 07. Datatypes
30 | :heavy_check_mark: 08. Operators
31 | :heavy_check_mark: 09. String
32 | :heavy_check_mark: 10. How to Deal with Numbers
33 | :x: 11. Control Flow Statements
34 | coming soon
--------------------------------------------------------------------------------
/1. Basics/03. First JavaScript Program.js:
--------------------------------------------------------------------------------
1 | let summary = `
2 | - JS Developemnt Environment
3 | - First Program in JS
4 | - Video Tutorial
5 | `;
6 | localStorage.setItem('topicSummary', summary);
7 |
8 | // Prints 'Hello World' to Developer Console of Browser
9 | console.log('Hello World')
10 |
11 | // Prints result of Math Operation 3+5.
12 | console.log(5+3)
13 |
14 |
15 | /*
16 |
17 | * Required Development Environment for JS
18 | - Tools to write js program
19 | any text editor of your choice or an IDE.
20 | From Notepad to IDEs like VS Code, Sublime, Atom etc
21 |
22 | - Run Time Environment
23 | There are many ways to run a js program.
24 | But we'll using a web browser to execute js code.
25 |
26 | - Extension
27 | There are some IDE Extensions helpful for fast and error free coding.
28 |
29 | * Methods to Run JS
30 | 1. Within Developer Console of Web Browser itself
31 | 2. Within HTML web page
32 | 3. Using VS Code Extension : Quokka.js
33 | 4. There are other ways like using node, we've not discussed in this course
34 |
35 | * Semicolon at the end of each JS line/ statement is optional.
36 | */
--------------------------------------------------------------------------------
/1. Basics/01. What is JavaScript.js:
--------------------------------------------------------------------------------
1 | var summary = `
2 | - What is JavaScript ?
3 | - Why you should learn it?
4 | - Video Tutorial
5 | `;
6 | localStorage.setItem('topicSummary', summary);
7 |
8 | /*
9 |
10 | ? What is JavaScript?
11 | -JavaScript is a light-weight, interpreted or just-in-time compiled
12 | programming language with first class functions.
13 |
14 | Not going to make things harder for you by explaing
15 | these language features now, We'll do that later.
16 |
17 | * Brendan Eich invented JS in 1995
18 |
19 | ? Pre Requisite for Learning JS
20 | - basic knowledge in HTML & CSS.
21 |
22 | Previously JavaScript was primarily used to add functionality
23 | and behaviors to your website client-side. Nowadays it is being almost anywhere.
24 |
25 | + Web Design
26 | |-> Along with HTML and CSS
27 | |-> React, Angular, VueJS (clint-side frameworks)
28 |
29 | + Server Side
30 | |-> Nodejs.
31 |
32 | +Mobile Development
33 | |-> React Native, Ionic
34 |
35 | +Desktop App Development
36 | |-> Electron
37 |
38 | +Internet of Things(IoT)
39 | |-> Cylon, Favor
40 |
41 | +Artificial Intelligence
42 | |-> Tensorflow.js
43 |
44 |
45 | * JS Frameworks or libraries are used to build all types of applications - Front-End, Back-End, AI, IoT Mobile & Desktop, That's not the case with HTML and CSS (Primarily used for Web Designing). So nowadays you can't runaway from JS :).
46 |
47 | ? Java vs JavaScript
48 | - JavaScript has no relation with Java.
49 | - It's just the word 'java' in 'javascript'
50 | - It's like car and carpet.
51 |
52 | */
53 |
54 |
--------------------------------------------------------------------------------
/1. Basics/02. JS Engine & Version History.js:
--------------------------------------------------------------------------------
1 | var summary = `
2 | - What is JavaScript Engine?
3 | - JavaScript Version History
4 | - Video Tutorial
5 | `;
6 | localStorage.setItem('topicSummary', summary);
7 |
8 | /*
9 |
10 | ? Do we need to install run-time environment for js
11 | NO, it already comes with web browsers, commonly called as JavaScript Engine.
12 |
13 | The main function of JavaScript Engine is that
14 | it convert our js code to machine readable code (also called as interpretation/ compilation).
15 |
16 | JavaScript Engine is also a software created by web browser's manufacture.
17 | Each Web Browser has named their JS Engine as follows.
18 |
19 | Google Chrome -> v8
20 | Mozilla Firefox -> Spider Monkey
21 | MS Edge -> Chakra
22 |
23 | Since Web Browsers comes with their own js engine.
24 | It is necessary to standardize these js engines.
25 | Then only we'll have same output from these browsers for a given js file.
26 |
27 | * JS Engine is Standardized by ECMA International.
28 | They create standards for technologies in IT industry.
29 | JS Standardization is called as ECMAScript or ECMA 262.
30 |
31 | ECMAScript is often abbreviated as ES.
32 |
33 | ECMAScript contains guidlines for creating JS Engine.
34 | Like language syntax and semantics.
35 |
36 | Other than JavaScript, JScript, ActionScript etc follows ECMAScript Guidlines.
37 | But JavaScript is the most popular implementation of ECMAScript.
38 |
39 |
40 | ! JS Version or JS Engine History
41 | ECMAScript 1(ES1) - 1997
42 | ECMAScript 2(ES2) - 1998
43 | ECMAScript 3(ES3) - 1999
44 | ECMAScript 4(ES4) - Skipped/ Not Released
45 | ECMAScript 5(ES5) - 2009
46 | ECMAScript 2015(ES6) - 1997
47 | ECMAScript 2016 - 2016
48 | ECMAScript 2017 - 2017
49 | .... Upto This Year ...
50 |
51 | */
--------------------------------------------------------------------------------
/1. Basics/05. Variable, Declaration & Identifier.js:
--------------------------------------------------------------------------------
1 | let summary = `
2 | - What is a Variable ?
3 | - Declarations & Identifier
4 | - Rules for Naming Identifiers
5 | - Case Sensitivity in JS
6 | - Video Tutorial
7 | `;
8 | localStorage.setItem('topicSummary', summary);
9 |
10 | //#region Theory
11 | /*
12 | * Variable
13 | It is container that hold information, associated with a name to refer in rest of the code.
14 |
15 | * Declaration & Initialization
16 | The process of creating new variable is called as Declarartion
17 | And Assigning new value to a variable is called Initialization
18 |
19 | * Identifier
20 | It's a sequence of characters in code used to name elements with in our program.
21 | These elements include variables, functions, properties etc.(discuused in future topics)
22 |
23 | * Rules for Naming Identifiers
24 | 1. It can have Unicode letters, Digits (0->9), $, _
25 | 2. Must start with either a Unicode letter or a $ or _
26 | 3. Not allowed to use a js keyword as an identifier
27 |
28 | [Here the Unicode letters means alphabetic letters from languages across the world]
29 | TODO : To know more about Unicode, check out following article
30 | > https://bit.ly/3xXcpsW
31 |
32 | ! JS is case-sensitive
33 | JavaScript treats both uppercase and lowercase letters are treated as distinct.
34 | for more check out the explanation region.
35 |
36 | */
37 | //#endregion
38 |
39 | //#region Explanation
40 |
41 | // Following statement is a declaration statement, it creates a new variable 'amount'
42 | let amount; // Declaration Statement
43 |
44 | // Initialization
45 | amount = 5;
46 |
47 | //It's possible to Declare and Initialize a variable in a single line.
48 | let totalAmount = 10;
49 |
50 | // JS is case-sensitive
51 | let address;
52 | let Address;
53 | // both address and Address are treated as separate variables.
54 | // eventhough they only differ in case
55 |
56 | /*
57 | ? rules for identifiers(variables, function, properties, etc)
58 | - it can have unicode letters,digits(0-9),$,_
59 | - MUST start with lettter, _, $. CAN'T BEGIN with digits(0-9).
60 | - not allowd use reserved keywords like if, let, etc
61 |
62 | Eg for valid identifier
63 | amount, _amount, $amount, amount123
64 |
65 | Eg for invalid identifier
66 | 1amount - starting with digit
67 | #amount - # not allowed anywhere in identifier
68 | let - it's js keyword
69 | */
70 |
71 | //#endregion
--------------------------------------------------------------------------------
/1. Basics/09. String.js:
--------------------------------------------------------------------------------
1 | let summary = `
2 | - String
3 | - Template Strings
4 | - String Interpolation
5 | - Escape Sequence in a String
6 | - String Concatenation
7 | - Find length of a String
8 | - String Primitive vs String Object
9 | - String Operations
10 | - Video Tutorial
11 | `;
12 | localStorage.setItem('topicSummary', summary);
13 |
14 | //! Theory
15 | //#region - Theory
16 | /*
17 | * What is a String.
18 | Sequence of charactors enclosed withing in double("") or single('') quotation.
19 |
20 | 'sample string goes here'
21 | "sample string goes here, with double quotes"
22 |
23 |
24 | ! template strings.
25 | introduce in ES6.
26 | string must be enclosed within backticks(` - backticks).
27 | string literal can spread over multiple lines.
28 | placeholder syntax
29 |
30 | speacial characters : \n \t etc.
31 |
32 | escaping characters with backslash(\) : \' \" \\ etc.
33 |
34 | string properties.
35 | length return no. of characters within the string.
36 |
37 | string operators.
38 | '+' operator can be used for concating strings.
39 |
40 | TODO: String Functions
41 | *1. Functions for Inspection
42 | charAt(index) - returns charactor at a given string
43 | charCodeAt(index) - returns unicode number of the character at given index.
44 | indexOf(sub_string) - returns index of first match for given substing
45 | lastIndexOf(sub_string) - returns index of last match for given substing
46 | startsWith(sub_string) - returns boolean, indicating whether string starts with the sub_string or not.
47 | endsWith(sub_string) - returns boolean, indicating whether string ends with the sub_string or not.
48 | includes(sub_string) - returns boolean, indicating whether the substring is present anywhere in the string.
49 |
50 | *2. Functions for Modification
51 | concat(string1, string2) - return a big string, after concating given strings
52 | repeat(no_of_repeatition) - resulting will the repeatition of original string with given no. of times.
53 | substring & slice (startIndex, endIndex) - returns a substring within given index range, endIdex not included.
54 | splite(splite_by_string) - returns an array, after spliting entire string by given splite_string(eg. white space)
55 | toLowerCase & toUpperCase
56 | trim, trimStart & trimEnd - removes white space from both ends.
57 | */
58 | //#endregion - Theory
59 |
60 | //! Explanation
61 | //#region - Explanation
62 | let fullName = "Ashton Cox",
63 | streetAddress = "25 St. James's Street";
64 | // if apostraphy is part of the string, then wrap the string with "".
65 | // if double quotes is part of the string, then wrap the string with ''.
66 |
67 | // * escape sequence
68 | let address = "14th Floor, Smithson Plaza \n25 St. James's Street \nLondon";
69 | // special characters are used to accomplish certain operations within
70 | // the string itself.
71 |
72 | // * escaping charactors with '\'
73 | console.log('St. James\'s Street')
74 | // print: c:\Program Files;
75 | console.log('c:\\Program Files')
76 |
77 | //TODO : Complete list of Escape Sequences in JavaScript
78 | https://mzl.la/3smujDU
79 |
80 | // ! template string
81 | let address2 = `14th Floor, Smithson Plaza
82 | 25 St. James's Street
83 | London`
84 | console.log(address2);
85 |
86 | let greetings = `Good Morning, ${fullName}!`;
87 | console.log(greetings);
88 | // here ${variable} will be replaced with the variable value.
89 | // this way of generating string is called //* String Interpolation
90 | // and this portion ${variable} is called //* placeholder
91 |
92 | //#endregion - Theory
--------------------------------------------------------------------------------
/1. Basics/07. Datatypes.js:
--------------------------------------------------------------------------------
1 | let summary = `
2 | - Datatypes in JS
3 | - Dynamically typed language
4 | - 'typeof' operator
5 | - Mutable and Immutable
6 | - Video Tutorial
7 | `
8 | localStorage.setItem('topicSummary', summary);
9 |
10 | //#region - Theory
11 | /*
12 | ! DataTypes
13 | * Primitives(* they are their own, they are not derived any other data types)
14 | - Boolean
15 | - null
16 | - undefined
17 | - Number
18 | - BigInt
19 | - String
20 | - Symbol
21 | * Object
22 |
23 | We don't have to specify the datatype while declaring a variable.
24 | hence we could assign any of the above type to a single varible at various stage of the program.
25 | Hence Javascript is called as // * Dynamically typed language.
26 | Which is not possible many programming languages like c, c#, java, etc.
27 |
28 | ! Boolean
29 | Indicates the logic Yes or No.
30 | * true, false
31 |
32 | ! null
33 | * null
34 | meant to denote non-existent or absence of a value.
35 |
36 | ! undefined
37 | * undefined
38 | denotes the variable is declared but not yet initialized.
39 |
40 | ! Number
41 | Numeric values -> integer, floating-point numbers, +Infinity, -Infinity, NaN.
42 | Eg : 54, 5.4.
43 |
44 | Safe Range : -(2^53-1) to 2^53-1.
45 | Beyond safe range, you might loose the precision.
46 |
47 | ! BigInt
48 | used to stores integer numbers greater than Safest integer that Number type can store.
49 | can't store floating point numbers
50 | declaration : use suffix-n or use BigInt function.
51 |
52 | ! String
53 | sequence of characters enclosed within quotes.
54 |
55 | !Symbols
56 | returns uneaque values, which can't be recreated.
57 |
58 | * typeof operator can used to check data type of a value/ variable.
59 | Syntax : typeof [variable_name]; //returns type of the variable.
60 |
61 | * Mutable and Immutable.
62 | Objects are immutable, because we can make modifications within it,
63 | whithout reclaring the object.
64 | That's not the case with primitive datatypes. their value can't be
65 | changed. Hence they are called as Immutable.
66 | for example 5. we can't change anything within 5. like we do
67 | in objects ({...}) like updating values of propeties in it.
68 |
69 | */
70 | //#endregion Theory
71 |
72 | //#region - Explanation
73 |
74 | //TODO 1. boolean
75 | let isActive = true;
76 | let isLoggedIn = false;
77 |
78 | //TODO 2. null
79 | // practical situation where null is more appropriate.
80 | let teamleadId;
81 | // each employee has an id. with this variable we store id of
82 | // his/her team lead.
83 | // if the person is a manager or head of department
84 | // he won't have any teamlead. so that case the value //* null
85 | // is more approapriate.
86 |
87 | //TODO 3. undefined
88 | let x;
89 | console.log(x);
90 | // variable not initialized, so undefined will be printed.
91 |
92 | //TODO 4. Numbers
93 | let a = 47;//integer
94 | a = 3.4;//floating number(contains floating point decimal, numbers with fraction)
95 |
96 | //largest integer number that can be stored in a number type.
97 | console.log(Number.MAX_SAFE_INTEGER)
98 |
99 | //TODO 5. Bigint
100 | //only integers, not floating-point numbers
101 | a = 34n
102 | a = BigInt(34)
103 |
104 | //TODO 6. String
105 | let name = 'Olivia Jhonas';
106 | let gender = 'male';
107 |
108 | //TODO 7. Object
109 | let student ={
110 | admissionNumber : 934875,
111 | name : 'Trevor',
112 | batch : 2022
113 | }
114 |
115 | //TODO 8. Symbol
116 | let symbol1 = Symbol('abc');
117 | let symbol2 = Symbol('abc');
118 | // === compares two variable/ value. true means they are equal, else false.
119 | console.log(symbol1 === symbol2);
120 | // prints false. symbols returns unique values always.
121 |
122 | //#endregion - Explanation
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const storeKey = {
2 | SELECTED_CATEGORY: 'selectedCategory',
3 | SELECTED_TOPIC: 'selectedTopic',
4 | TOPIC_SUMMARY: 'topicSummary',
5 | }
6 |
7 | const basicFiles = [
8 | '0. Practice.js',
9 | '01. What is JavaScript.js',
10 | '02. JS Engine & Version History.js',
11 | '03. First JavaScript Program.js',
12 | '04. Comments and Statements.js',
13 | '05. Variable, Declaration & Identifier',
14 | '06. Let, Var and Const.js',
15 | '07. Datatypes.js',
16 | '08. Operators.js',
17 | '09. String.js',
18 | '10. Number.js',
19 | ]
20 |
21 | const categoryGroup = document.getElementById('categoryGroup');
22 | categoryGroup.addEventListener("change", handleGroupChange);
23 | function handleGroupChange(event) {
24 | const { value } = event.target;
25 | localStorage.setItem(storeKey.SELECTED_CATEGORY, value);
26 | localStorage.setItem(storeKey.SELECTED_TOPIC, '0. Practice.js');
27 | localStorage.setItem(storeKey.TOPIC_SUMMARY, '');
28 | location.reload();
29 | }
30 |
31 | const topicSelect = document.getElementById('topics');
32 | topicSelect.addEventListener("change", handleTopicChange);
33 | function handleTopicChange(event) {
34 | localStorage.setItem(storeKey.SELECTED_TOPIC, event.target.value);
35 | localStorage.setItem(storeKey.TOPIC_SUMMARY, '');
36 | location.reload();
37 | }
38 |
39 | window.addEventListener('load', event => {
40 | configureDefaultStore();
41 | populateGroupAndTopics();
42 | loadScriptFromLocalStorage();
43 | });
44 | function configureDefaultStore() {
45 | if (!localStorage.getItem(storeKey.SELECTED_CATEGORY))
46 | localStorage.setItem(storeKey.SELECTED_CATEGORY, 'Practice');
47 | if (!localStorage.getItem(storeKey.SELECTED_TOPIC))
48 | localStorage.setItem(storeKey.SELECTED_TOPIC, '0. Practice');
49 | if (!localStorage.getItem(storeKey.TOPIC_SUMMARY))
50 | localStorage.setItem(storeKey.TOPIC_SUMMARY, '');
51 | }
52 | function populateGroupAndTopics() {
53 | topicSelect.innerText = null;
54 | let selectedCategory = localStorage.getItem(storeKey.SELECTED_CATEGORY),
55 | selectedTopic = localStorage.getItem(storeKey.SELECTED_TOPIC),
56 | listOfOptions;
57 | document.getElementsByName('category')
58 | .forEach((el, i) => {
59 | if (el.value == selectedCategory)
60 | el.checked = true;
61 | })
62 | switch (selectedCategory) {
63 | case 'Practice':
64 | listOfOptions = [];
65 | break;
66 |
67 | case '1. Basics':
68 | listOfOptions = basicFiles;
69 | break;
70 |
71 | default:
72 | break;
73 | }
74 | if (listOfOptions.length == 0)
75 | document.getElementById('topicFieldset').style.visibility = 'hidden';
76 | else {
77 | listOfOptions.forEach(el => {
78 | topicSelect.innerHTML += getTopicOption(el);
79 | })
80 | topicSelect.value = selectedTopic;
81 | }
82 | }
83 |
84 | function getTopicOption(topic) {
85 | return ``;
86 | }
87 | function loadScriptFromLocalStorage() {
88 | let scriptURL;
89 | if (localStorage.getItem(storeKey.SELECTED_CATEGORY) == "Practice")
90 | scriptURL = '0. Common Practice.js';
91 | else
92 | scriptURL = `./${localStorage.getItem(storeKey.SELECTED_CATEGORY)}/${localStorage.getItem('selectedTopic')}`
93 | let scriptEl = document.createElement('script')
94 | scriptEl.type = 'text/javascript';
95 | scriptEl.src = scriptURL;
96 | scriptEl.async = true;
97 | document.body.appendChild(scriptEl);
98 | scriptEl.addEventListener('load', () => { loadTopicSummary() });
99 | }
100 |
101 | function loadTopicSummary() {
102 | let topicSummary = localStorage.getItem('topicSummary');
103 | if (topicSummary) {
104 | document.getElementById("topicSummary").innerHTML = topicSummary.split('-').join('