-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
364 lines (360 loc) · 16.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/a11y-dark.min.css" integrity="sha512-Vj6gPCk8EZlqnoveEyuGyYaWZ1+jyjMPg8g4shwyyNlRQl6d3L9At02ZHQr5K6s5duZl/+YKMnM3/8pDhoUphg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./css/style.css">
<title>JavaScript Assignments</title>
</head>
<body>
<main>
<div class="container">
<h1>JavaScript Questions</h1>
<!-- Questions and Answers HTML DOM-->
<div class="dropboxes">
<h2>HTML DOM</h2>
<!-- Question 1 -->
<div class="dropbox">
<div class="dropbox__closed">
<h4 class="dropbox__title">1. What are nodes in the DOM?</h4>
<div class="dropbox__icon">
<img src="./images/icon-chevron-down.svg" alt="icon">
</div>
</div>
<div class="dropbox__description">
<p>
The DOM (Document Object Model) is a tree like representation of the HTML elements.
The nodes in the DOM are the tags, texts, attributes. Eg: <br>
If we have the following HTML code:
<pre>
<code class="language-html">
<body>
<p>This is a paragraph.</p>
<div>This is a div element.</div>
<h1>This is a heading.</h1>
</body>
</code>
</pre>
Then the dom nodes are the body, p, div and h1. Also the texts are the text nodes in the DOM
</p>
</div>
</div>
<!-- Question 2 -->
<div class="dropbox">
<div class="dropbox__closed">
<h4 class="dropbox__title">2. Extract the text label of a button.</h4>
<div class="dropbox__icon">
<img src="./images/icon-chevron-down.svg" alt="icon">
</div>
</div>
<div class="dropbox__description">
<pre>
<code class="language-javascript">
const btn = document.querySelector('button')
document.write(btn.textContent)
</code>
</pre>
</div>
</div>
<!-- Question 3 -->
<div class="dropbox">
<div class="dropbox__closed">
<h4 class="dropbox__title">3. Create an element in DOM.</h4>
<div class="dropbox__icon">
<img src="./images/icon-chevron-down.svg" alt="icon">
</div>
</div>
<div class="dropbox__description">
<pre>
<code class="language-javascript">const ul = document.createElement('ul')</code>
</pre>
</div>
</div>
<!-- Question 4 -->
<div class="dropbox">
<div class="dropbox__closed">
<h4 class="dropbox__title">4. Create a new child element in DOM.</h4>
<div class="dropbox__icon">
<img src="./images/icon-chevron-down.svg" alt="icon">
</div>
</div>
<div class="dropbox__description">
<pre>
<code class="language-javascript">
for(let i = 1; i <= 10; i++){
let list = document.createElement('li')
let text = document.createTextNode(`This is a list item ${i}`)
list.appendChild(text)
ul.appendChild(list)
}
</code>
</pre>
</div>
</div>
<!-- Question 5 -->
<div class="dropbox">
<div class="dropbox__closed">
<h4 class="dropbox__title">5. Replace the child element with new child element.</h4>
<div class="dropbox__icon">
<img src="./images/icon-chevron-down.svg" alt="icon">
</div>
</div>
<div class="dropbox__description">
<pre>
<code class="language-javascript">
let list = document.createElement('li')
let text = document.createTextNode(`This is a list item 100`)
list.appendChild(text)
const replace = ul.lastElementChild
// This replaces the last item in the list
ul.replaceChild(list, replace)
</code>
</pre>
</div>
</div>
<!-- Question 6 -->
<div class="dropbox">
<div class="dropbox__closed">
<h4 class="dropbox__title">6. Select an element by element ID.</h4>
<div class="dropbox__icon">
<img src="./images/icon-chevron-down.svg" alt="icon">
</div>
</div>
<div class="dropbox__description">
<pre>
<code class="language-javascript">const p = document.getElementById('content')</code>
</pre>
</div>
</div>
<!-- Question 7 -->
<div class="dropbox">
<div class="dropbox__closed">
<h4 class="dropbox__title">7. Select an element by element Name.</h4>
<div class="dropbox__icon">
<img src="./images/icon-chevron-down.svg" alt="icon">
</div>
</div>
<div class="dropbox__description">
<pre>
<code class="language-javascript">const inputBar = document.getElementsByName('name')</code>
</pre>
</div>
</div>
<!-- Quetsion 8 -->
<div class="dropbox">
<div class="dropbox__closed">
<h4 class="dropbox__title">8. Select an elements with tag name using query selector function</h4>
<div class="dropbox__icon">
<img src="./images/icon-chevron-down.svg" alt="icon">
</div>
</div>
<div class="dropbox__description">
<pre>
<code class="language-javascript">const paragraphs = document.querySelectorAll('p')</code>
</pre>
</div>
</div>
</div>
<!-- Questions and Answers ES6 -->
<div class="dropboxes">
<h2>ES6 Functions</h2>
<!-- Question 1 -->
<div class="dropbox">
<div class="dropbox__closed">
<h4 class="dropbox__title">1. What does "ES" mean in JS?</h4>
<div class="dropbox__icon">
<img src="./images/icon-chevron-down.svg" alt="icon">
</div>
</div>
<div class="dropbox__description">
<p>
In JavaScript ES means ECMAScript which is the standard on which JavaScript is based.
It is a scripting language specification developed and maintained by Ecma International, a standards organization.
It defines the syntax, semantics, and behavior of the JavaScript programming language. Some of the versions of ECMAScript are ES5, ES6 etc.
</p>
</div>
</div>
<!-- Question 2 -->
<div class="dropbox">
<div class="dropbox__closed">
<h4 class="dropbox__title">2. Difference between Regular function and arrow functions</h4>
<div class="dropbox__icon">
<img src="./images/icon-chevron-down.svg" alt="icon">
</div>
</div>
<div class="dropbox__description">
<p>
The differences between regular functions and ES6 functions are as follows:
</p>
<table class="table">
<tr>
<td>S.N</td>
<td>Regular Functions</td>
<td>ES6 Functions</td>
</tr>
<tr>
<td>1.</td>
<td>The regular function can be invoked with the new keyword.</td>
<td>The arrow function i.e. the ES6 function cannot be invoked using the new keyword.</td>
</tr>
<tr>
<td>2.</td>
<td>They have this keyword, i.e. the this keyword points towards its own attributes in case of regular functions.</td>
<td>They have not this keyword binded, if we use this keyword in arrow functions, it returns closest non arrow function.</td>
</tr>
<tr>
<td>3.</td>
<td>The regular function has arguments object, i.e. if we don't know the number of arguments we can find it by using argument object.</td>
<td>The arrow function does not have argumnet object binded to it.</td>
</tr>
<tr>
<td>4.</td>
<td>Syntax:
<pre>
<code class="language-javascript">
function regularSum(a, b){
return a + b;
}
console.log(regularSum(9,6));
</code>
</pre>
</td>
<td>Syntax:
<pre>
<code class="language-javascript">
const esSum = (a, b) => a + b
console.log(esSum(9,6));
</code>
</pre>
</td>
</tr>
</table>
</div>
</div>
<!-- Question 3 -->
<div class="dropbox">
<div class="dropbox__closed">
<h4 class="dropbox__title">3. Examples of Regular function and ES6 functions?</h4>
<div class="dropbox__icon">
<img src="./images/icon-chevron-down.svg" alt="icon">
</div>
</div>
<div class="dropbox__description">
<p>ES6 Function (Arrow Function)</p>
<pre>
<code class="language-javascript">
const esSum = (a, b) => a + b
console.log(esSum(9,6));
</code>
</pre>
<p>Regular Function</p>
<pre>
<code class="language-javascript">
function regularSum(a, b){
return a + b;
}
console.log(regularSum(9,6));
</code>
</pre>
</div>
</div>
<!-- Promise Example -->
<div class="dropbox">
<div class="dropbox__closed">
<h4 class="dropbox__title">Promise Example</h4>
<div class="dropbox__icon">
<img src="./images/icon-chevron-down.svg" alt="icon">
</div>
</div>
<div class="dropbox__description">
<pre>
<code class="language-javascript">
/**
* This function returns a promise.
* A promise is basically like a realy life promise,
* either it gets fulfilled (resolved) or
* the promise is not fullfilled(rejected).
* This function takes name as a parameter and checks if the
* argument passed is 'ram', if the argument is ram the promise gets resolved
* else it gets rejected.
*
* I have put a settimeout to simulate that the time delays.
*
* For example: when fetching the data form api we may or may not get the data.
* so if we get the data in return the promise is resolved and we get the data or
* else we do not get the data and the promise is rejected.
*/
const displayRam = (name) => {
return new Promise((resolve, reject) => {
if(name.toLowerCase() === 'ram'){
setTimeout(() => {
resolve({username: "Ram", age: 20, email: '[email protected]'})
}, 2000)
}else{
reject({message: "The name passed is invalid"})
}
})
}
/***
* In this function call the .then method is used to tell what to do after
* the promise is resolved. If the argument passed is 'ram' then the promise
* is resolved and the data is logged to the console, if the argument is
* something else the promise is rejected and it goes to the .catch block
* and prints out the error.
*/
displayRam('ram')
.then(data => console.log(data))
.catch(err => console.log(err))
</code>
</pre>
</div>
</div>
<!-- Async and Await Example -->
<div class="dropbox">
<div class="dropbox__closed">
<h4 class="dropbox__title">Async and Await Example</h4>
<div class="dropbox__icon">
<img src="./images/icon-chevron-down.svg" alt="icon">
</div>
</div>
<div class="dropbox__description">
<pre>
<code class="language-javascript">
/**
* This is an asynchronous function.
* A async function always returns a promise.
*
* So, in this function we use the promise we created
* in the promiseExample, since the promise can resolve or get rejected,
* we do not know when we will get the data so we add async to tell javascript
* that do something only after you have got the data till then do something else.
*
* Async and await came into existence to avoid much promise chaining and callback hell.
*
* In this function the function is called then the promise displayRam is called,
* It waits till it gets the return and then logs the data.
*
* If the argument is different then it logs an error in the console.
*/
const callingFunction = async () => {
const data = await displayRam('ram')
console.log("Data: ", data);
}
callingFunction()
</code>
</pre>
</div>
</div>
</div>
</div>
</main>
<!-- highlight.js for code highlighting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js" integrity="sha512-rdhY3cbXURo13l/WU9VlaRyaIYeJ/KBakckXIvJNAQde8DgpOmE+eZf7ha4vdqVjTtwQt69bD2wH2LXob/LB7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>hljs.highlightAll();</script>
<!-- javascript -->
<script src="./js/index.js"></script>
<script src="./js/promiseExample.js"></script>
<script src="./js/asyncExample.js"></script>
</body>
</html>