-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathadvanced-functions.html
More file actions
305 lines (180 loc) · 9.46 KB
/
Copy pathadvanced-functions.html
File metadata and controls
305 lines (180 loc) · 9.46 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Advanced functions </title>
</head>
<body>
<!-- .addEventListener():
it let us run some code when we interact with selected html elements, it works just like "onclick".
But we access the html element from javascript using DOM inorder to easy reading, and then we use ".addEventListner()" to run some codes when any event happens.
-->
<button onclick="">Click</button> <!-- we can replace this code with below one. -->
<button class="js-button">Click</button> <!-- now we gonna access this in scripts using DOM and add an event listener -->
<script>
/* here we select the element and saved it to the variable. so we can use it later multiple times.
".addEventListener()" goes with 2 parameters, first one is the event and second one is the function which will run when the given event happens. */
const buttonElement = document.querySelector('.js-button');
const eventListener = () => {
console.log('thats good! ')
}
/* you can also create the function as regularly you do, and call the function in ".addEventListener()", that will work too.
function eventListener() {
console.log('thats good! ')
}
but to call this function inside ".addEventListener()", you've to create a function first and the call the "eventListener()" inside it. like below eg:
buttonElement.addEventListener('click', () => {
eventListener();
});
*/
buttonElement.addEventListener('click', () => {
console.log('wonderful !')
});
/* it let us add multiple event listeners or multiple ".addEventListener()" for the same event and for the same element. eg: */
buttonElement.addEventListener('click', () => {
eventListener();
}
);
/* we can also remove a event listener using ".removeEventListener()", it also goes with 2 parameters. first one is event we want to remove and second one is the function we want to remove, it is necessary to reference the function we wanna remove coz there'll be multiple event listener for one event, so we've to reference the function too for specific removing.
on the function parameter part you cant just copy paste the function, you've to reference the exact same function, for that you can save the function inside a variable or initialise the variable and call it inside.
*/
// buttonElement.removeEventListener('event', eventListener());
/*
the best practice is to use ".addEventListener()" instead of "onclick" coz in ".addEventListener()" :
1) we can add multiple event listener to the same event and same element.
2) we can remove any event listener.
*/
greeting();
function greeting()
{
console.log('hello');
}
/* Functions are also considered as a value. so just like saving a value to a variable we can save a function to a variable*/
const function1 = function greeting(){
console.log('hello2');
};
console.log(function1);
console.log(typeof function1);
/* now we can call the function inside the variable using the variable name */
function1();
/* so now we can use the variable name instead of function name, so we can remove the function name inside the variable, and a function without a name is called Anonymous function. */
const function2 = function (){
console.log('hello3');
};
function2();
/* now we can also pass a function into another function as parameter, just like we pass a nbr. The function we pass as the parameter is called Callback function or Callback. */
function run(param) {
param();
}
run( function(){ // Callback function.
console.log('hello4');
} );
// this built-in function allow us to run a function in the future. Basically it creates a delay before running a function.
// it takes 2 parameters, first one is the function we want to run in the future, and the second one is the delay time in millieseconds(1000ms = 1s)
setTimeout();
setTimeout(function() {
console.log('timeout');
}, 3000);
// this also an built-in function which also allow us to run a function in the future, but it will keep running after the delay. eg: if we set an function and 3s delay, the function will keep running after every 3s. And just like "setTimeout()" this has also 2 parameters, function and time.
setInterval(function() {
console.log('interval');
}, 3000);
// "setTimeout()" & "setInterval()" are Asynchronous, which means the compiler don't wait to finish the timer so that line of code can execute, the timer will run on the background and the compiler will go to the next line of code, and the compiler will deal with the line of code which have timer when the timer finishes. Defualtly we run code as synchronous(wait for the line of code to be executed inorder to go to the next line), which is line by line execution. Only some functions like above are Asynchronous.
// instead of using for or while loop to loop through an array we can use "forEach()" method for easy coding. This is the preffered way.
// "forEach()" loop through each value and we can pass a function as parameter for a certain action for each value. And we can get the current value and it's index by using the parameters of the passed function.
[
'make dinner',
'wash dishes',
'watch youtube'
].forEach( function(value, index) {
console.log(index);
console.log(value);
});
/*
continue:
there's no "continue" statement in "forEach()", so this how we do it. it works just like "continue".
in here we want to skip the 'wash dishes', and we used "return" statement to jump out of the passed function early and goes to next iteration.
[
'make dinner',
'wash dishes',
'watch youtube'
].forEach( function(value, index) {
if(value === 'wash dishes') {
return;
}
console.log(index);
console.log(value);
});
*/
/*
Arrow function :
Arrow function is a another way to create a function, it works mostly like a regular function. The differences is we use an arrow "=>" instead of the keyword "function" and it have some shortcuts to reduce the code.
* if the function have only one parameter, then we can avoid the brackets. (fig 0.1)
* if the function have only one line of code, then we can avoid the curly brackets and we can get rid off the "return" statement in below eg (fig 0.2)
const regularFunction = function(param, param2)
{
console.log('jello');
return 5;
};
const arrowFunction = (param, param2) => {
console.log('hello');
return 5;
};
arrowFunction();
const oneParam = param => { fig 0.1
console.log(param +1);
};
oneParam(2);
const oneLine = () => return 2 + 3; fig 0.2
*/
// so when we pass a function into another function, it is recommended to use arrow function for easy reading. eg:
[
'make dinner',
'wash dishes',
'watch youtube'
].forEach( (value, index) => {
if(value === 'wash dishes') {
return;
}
console.log(index);
console.log(value);
});
/*
.filter() :
it's an another method for an array to loop through it just like ".forEach()", but this time we can use this method to filter things out.
In below eg we are filtering negative values and printing out the positive values only.
How does this works ?
well, ".filter()" creates a new array and if the given condition for filtering inside the inner function returns true then it'll put the current value to the new array, if it returns false then it won't put the value to the new array.
And it'll automatically print out the array or return the filtered array.
difference b/w ".forEach()" and ".filter()":
".forEach()" don't create and return an array automatically, we've to manually code it.
but in ".filter()" it creates and return an array automatically, we just have to give the condition for filtering.
*/
console.log([1, -2, 3].filter( (value, index) => {
/*if(value >= 0) {
return true;
}
else {
return false;
}*/
return value >= 0; // this is a shortcut, it checks the condition first and it returns the corresponding boolean value and filtering works according to it.
}));
/*
.map():
it's an another method for an array to loop through it just like ".forEach()" & ".filter()", but this time we can use it to transform an original array to another array based on the return value.
In below eg we are transforming the original array to it's doubled values array.
How does this works ?
well, ".map()" creates a new array and whatever we return will be added to the new array.
In here we are returning the values itself by multiplying by 2.
*/
console.log([1, -2, 3].map( (value, index) => {
return value *2;
}));
// shortcuted version of the above code:
console.log([1, -2, 3].map( value => value *2));
// only one parameter, so we avoided brackets there.
// only one line of code, so we avoided curly bracket and return.
</script>
</body>
</html>