-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathJavaScript Notes.txt
146 lines (107 loc) · 5.79 KB
/
JavaScript Notes.txt
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
script tag must be loaded in last, as it won't recognize the body tag, if defined earlier than it.
*************************************************************************
==> WHAT IS JAVASCRIPT???
- It is a single-threaded language. (can do one task at a time)
- It is a non-blocking language (doesnot make other operations wait, if one operation is taking time for execution such as in setTimeout).
- It is a asynchronous concurrent language (can see non- blocking behaviour of JS).
- JS runtime can do only one operation at a time. (Browser, APIs are not a part of runtime hence we are able to perform multiple operations with the assistance of APIs and browser support)
- It has a call stack, event loop, and a callback queue+ other APIs.
- V8 is JS runtime which has call stack and a heap.
- The heap is used for memory allocation and stack holds the execution context.
- DOM, setTimeout XML Http Request doesnot exist in V8 source code.
- Task Queue --> As JS can execute one task at a time, the rest tasks are queued waiting to be executed.
- Call Stack --> the order in which operations are executed. All the operations to be executed are stored in a stack, and follows the stack behaviour for e.g.
greeting=()=>{
hello=()=>{
}
}
stack order--> greeting(), hello();
hello() will be executed first and leaves the stack, then greeting() will starts to execute.
- Event Loop -->
JS has a runtime model based on event loops, which is responsible for the execution of code, collecting and processing events, and executing sub-tasks.
pushes the operations from task queue to the call stack.
setTimeout (fun, 0) --> when set timeout is run with 0 parameter, it means that the task should be delayed until other tasks are completed.
*************************************************************************
Javascript is a dynamically types language. We do not have to tell the datatype of a variable.
for e.g. if we are working in python while initializing the variable we have to define its datatype. Whereas, in JS there is no such thing.
e.g. fullName= "Abiha"
fullName= 25
console.log(fullName)
output---> 25 (dynamic nature allows string and int to be stores in a single variable)
LET, CONST AND VAR:
var: variable can be re declared & updated. A global scope variable. (not recommended)(creates confusion and errors, as it allows
redefining the variable which is not a recommended way such as: var age= 29; var age= 58;)
let: variable can not be re declared but can be updated. A block scope variable. (e.g. let age= 29, age= 18) (value is updated in the
same variable but the variable is not declared again)
const: variable can not be re declared or updated. A block scope variable.
*************************************************************************
DATATYPES (TWO TYPES)
PRIMITIVE (7)
number
float
string
boolean
null //object (absence of an object)
BigInt
Symbol
NON- PRIMITIVE (OBJECTS)
Arrays
Functions
HOW ARE WE ABLE TO MODIFY NAME or AGE OF Students when the object is declared as const????????
Since Student is an obj we can change the values for its keys, as for displaying error here compiler
needs to reference the memory address.
That is why we are able to change the values of const objects, but not const variables.
*************************************************************************
LOOPS & STRINGS
TEMPLATE LITERALS
just a string with back ticks. Helps in string interpolation.
used to evaluate and embed expressions dynamically in template literals.
const name = 'John Doe'; const age = 20; // Using template literals for string interpolation
console. log(`My name is ${name} and I'm ${age} years old.
*************************************************************************
ARRAYS
DIFF BTW FOREACH() AND MAP
FOREACH---> doesnot return an array
MAP---> returns an array
FOREACH
let arr = [1, 2, 3];
arr.forEach((val) => {
console.log(val + 1);
});
MAP
let output = arr.map((val) => val + 1);
console.log(output);
*************************************************************************
FUNCTIONS AND METHODS
DIFFERENCE
Functions are not defined for specific datatype and are generalized. Whereas,
methods are datatype specific. for e.g. toUpperCase() is a method which will only operate on string datatype.
*************************************************************************
WHY SHOULD WE WRITE JS IN SEPARATE FILE?
improve readibility
improve modularity
helps in browser caching
==> WINDOW OBJECT
represents an open window in a browser.
global object that contains methods and properties.
automatically created by browser.
browser object (not JS object)
all code renders in window object.
==> DOCUMENT OBJECT MODEL
-poory html page ko JS object bna ky document ka part bnana is DOM.
-when web page is loaded, the browser creates a DOM of the page.
-to access the HTML elements in JS
-the HTML elements are converted to objects in JS which are called as document avaible in out window object. window.document
window--> document (model of HTML code) ---> DOM ---> tree like structure --> individual elements boxes are called nodes (objects)
==> BROWSER OBJECT MODEL
- It provides additional objects provided by hosted environment (such as: browser)
- Function like alert, prompt are a part of BOM.
*************************************************************************
EVENTS
The change in state of an object is called event.
Events are fired to notify code of interesting changes that may impact code execution.
INLINE EVENT HANDLING
HTML ky through events define krna
if we have handeled events using inline and JS methods both. The priority will be given to the JS Event Handling.
*************************************************************************
CLASSES AND OBJECTS