-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjavascript.html
480 lines (447 loc) · 17.7 KB
/
javascript.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
<!doctype html>
<html lang="en">
<head>
<title>JavaScript Level II</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="javascript.css" rel="stylesheet">
<script src="javascript.js"></script>
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<pre>
JavaScript Review
-----------------
<code>
function display(message) {
document.write(message);
}
</code>
<button onclick="display('Hello World!')">Click Me!!!</button>
</pre>
<hr>
<pre>
Activator function
-----------------
<code>
function greeting (){
display("Hello World!");
}
</code>
A function that doesnt have parameters
its only purpose is to call a function with parameters
<button onclick="greeting()">Activate Me!!!</button>
Activator Function:EXPERIMENT
activator ();
What do you observe?
1. Send a value to an activator function.
2. Add a parameter to an activator function.
<code>
function activatorTest(){
display("Experimenting with an activator function.");
}
function activatorTest(myParameter){
display(myParameter);
}
</code>
What do you observe about sending values to activator functions?
• A value can be sent to functions without parameters.
• Add a parameter to the function to access the value.
<button onclick="activatorTest('Hello World!')">Activator Test</button>
</pre>
<hr>
<pre>
Callback function
-----------------
<code>
function myFunction(callbackFunction){
callbackFunction();
}
function activator(){
myFunction(greeting);
}
activator();
</code>
A function that is passed as a parameter.
A function can be passed to another function.
The function can run that function.
<button onclick="activator()">Activate Me!!!</button>
</pre>
<hr>
<pre>
setTimeout
-----------------
<code>
function delayedGreeting(){
setTimeout(greeting, 5000);
}
</code>
A function that calls a function after a specified time.
It accepts a function and a delay time in milliseconds.
<button onclick="delayedGreeting()">Delayed Greeting</button>
</pre>
<hr>
<pre>
Asynchronous
-----------------
<code>
function asynchronous() {
setTimeout(greeting, 5000);
display("Waiting for the greeting...");
}
</code>
Able to run other code while waiting for some code to respond.
Like multitasking.
Other code runs immediately after <code>setTimeout</code>.
The <code>greeting</code> function runs after other code.
<button onclick="asynchronous()">Delayed Greeting</button>
</pre>
<hr>
<pre>
Server Simulation
-----------------
A server takes time to respond.
Use asynchronous code to simulate it.
<form onsubmit="submitForm(event)">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br>
<input type="submit">
</form>
<code>
function submitForm(event) {
const inputs = event.target;
const emailInput = inputs[0];
const email = emailInput.value;
document.write("Submitting form for" + email + "...");
setTimeout(serverResponse, 5000);
}
function serverResponse() {
display("Form was successfully processed.");
}
</code>
</pre>
<hr>
<pre>
JSON stringify
-----------------
<code>
function displayObject(){
const myCar = {
color: "red",
year: 2024
};
const result = JSON.stringify(myCar);
display(result);
}
</code>
Generates a string from an object.
Needs to store the result.
STEPS:
1. stringify the object
2. store the result
3. display the result.
JSON = JavaScript Object Notation
Servers communicate with stringified objects.
• The syntax we use to represents objects
• Curly braces represent an object
• Properties are separated by a comma
• Properties are in quotes
• Values are set with a colon
<button onclick="displayObject()">Display object</button>
</pre>
<hr>
<pre>
JavaScript Class
-----------------
<code>
class MyCar {
color="red";
year=2024;
}
</code>
A JS class is like a template.
It predefines an object without creating it.
Usually created towards the top of a JS file
Class syntax
1. Keyword <code>class</code>
2. Class name, usually in PascalCase
NOTE: PascalCase is like camelCase, but starts with a capital letter
3. Curly braces
4. Assign properties their values
- Use equal signs for JS classes and semi-colons for JS objects
</pre>
<br>
<pre>
JS Class vs Object
-----------------
<code>
class MyCar {
color = "red";
year = 2024;
}
const myCar = {
color: "red",
year: 2024,
}
debugger;
display(MyCar)
display(myCar)
</code>
What do you observe about JavaScript classes and objects?
• Directly displaying a class shows its code.
• In developer tools, a class has a name and length.
• The JavaScript class is different from a JavaScript object.
• The syntax of a class is different than an object.
<button onclick="classVsObject()">Class vs Object</button>
</pre>
<br>
<pre>
Create a new object from a class
---------------------------------
<code>
const myCar = new MyCar();
const myCar2 = new MyCar();
const myCar3 = new MyCar();
myCar2.color = "white";
myCar3.year = 2025;
function newObject() {
const myCar = new MyCar();
const myCar2 = new MyCar();
const myCar3 = new MyCar();
display(JSON.strigify (myCar));
display(JSON.strigify (myCar2));
display(JSON.strigify (myCar3));
}
</code>
Constructs an object from a class.
Creates a predefined object.
What do you observe about constructing multiple objects from a class?
• The objects start with the properties and values defined by the class.
• The objects are independent.
• The values of their properties can be changed individually.
Syntax:
1. Keyword <code>new</code>
2. Name of the class with parentheses after it. (looks like a function)
3. Store the value.
- The value is an object created from the class.
<button onclick="newObject()">Create object from class</button>
</pre>
<hr>
<pre>
Function in a function (nested function)
----------------------------------------
<code>
function outerFunction() {
const message = "Hello world!";
innerFunction();
function innerFunction() {
display(message);
}
}
</code>
Functions can be defined in other functions
The inner function has access to variables in the outer function.
The inner function only runs when it is activated.
<button onclick="outerFunction()">Nested Function</button>
</pre>
<br>
<pre>
Promise
-----------------
const results = new Promise(myFunction);
To communicate with a server using JavaScript, next you should know what a JavaScript Promise is.
<code>
const promise = new Promise(myFunction);
</code>
A special class that runs a callback function.
The object indicates the status of the callback function.
A promise is not asynchronous, It immediately runs the callback function.
Status shows pending even after myFunction has finished.
Promise status
---------------
The status must be manually changed.
The callback function must indicate when it has finished.
Steps To Create a Promise:
--------------------------
1. Create <code>myFunction</code> that displays something.
2. Create the function <code>makePromise</code>
3. Add a promise that runs <code>myFunction</code>.
4. Display something after the promise.
5. Activate <code>makePromise</code> with a button.
<button onclick="makePromise()">Make a Promise</button>
What do you observe about the promise?
• It's not asynchronous. It immediately runs myFunction
• Status shows pending even after my Function has finished.
Promise callback function
--------------------------
<code>
function myFunction(callbackFunction) {
display(callbackFunction);
}
</code>
The Promise passes a value to myFunction.
1. Let <code>myFunction</code> accept a parameter.
2. Display the value.
What do we observe?
The promise sends a callback function to the <code>myFunction</code>.
That callback function to <code>myFunction</code> indicates that the promise is fulfilled.
That callbackFunction is known as the <code>resolve</code> function.
</pre>
<br>
<pre>
Resolve function
---------------
<code>
function myFunction (resolve) {
resolve();
}
</code>
The value provided by Promise is known as a resolve function.
Activating the resolve function changes the status to fulfilled.
//Why should a function indicate when it's done?
• A Promise is meant to be used by asynchronous code.
• The asynchronous code is supposed to use <code>resolve</code> to indicates when it's done.
<code>
function serverResponse(resolve) {
display("Form was successfully processed.");
resolve();
}
function myFunction(resolve) {
setTimeout (serverResponse,5000);
resolve();
}
</code>
What do you observe when moving the resolve function?
• Promise shows pending while server is responding
• Error with the resolve function -- undefined.
</pre>
<br>
<pre>
Promise Function
-----------------
<code>
function myFunction(resolve) {
setTimeout(serverResponse2, 5000);
display("Inside my myFunction");
function serverResponse2() {
display("Form was successfully processed.");
resolve();
}
}
</code>
Use an inner function to give access to the resolve function
What do you observe about <code>serverResponse</code> as an inner function?
• It has access to resolved
• Promise is pending before the server response
• Promise should resolve after the server response
• No access to the promise after the server response
</pre>
<br>
<pre>
<code>then</code>Function
--------------------------
<code>
promise.then(getMessage);
function getMessage(resolveValue) {
display(resolveValue);
;
}
</code>
Use <code>then</code> to access the promise after the server response
The <code>then</code> function runs the callback function when the promise is resolved (fulfilled)
The callback function has access to the resolve value
Steps:
1. Create the function getMessage
2. Let then call getMessage
3. Add a parameter to getMessage and display it
4. Send a value to resolve ()
</pre>
<pre>
Resolve Value
---------------
<code>
resolve("The promise is fulfilled.");
</code>
The resolve function is a callback function.
The resolve value gets passed to the function that is given to the Promise.
It indicates that the promise is fulfilled.
The resolve function is meant to be used by asynchronous code.
The resolve value gets passed to the callback of the <code>then</code> function.
What do you observe about using then and sending a value through resolve?
• The promise supposedly gets fulfilled
• A promise value is accessible
</pre>
<br>
<pre>
Promise Best Practices
--------------------------
<code>
const promise = makeRequest("https://myServer.com")
function makeRequest("https://myServer.com") {
const promise = new Promise(getServerResponse);
return promise;
}
</code>
A promise is usually the return value of a function.
Communication with a server is called a request.
Server communication is established with a URL.
</pre>
<br>
<pre>
Method
-------
<code>
promise.then(getMessage);
or
document.write("Hello World!");
</code>
A method is a function that's part of an object.
</pre>
<br>
<pre>
Handler
--------
<code>
onclick=""
onsubmit="submitForm(event)"
</code>
A handler is a function that runs in response to an event.
Another example is <code>onclick</code> which can run a function in response to an event.
Example events:
1. When a form is submitted
2. When a button is clicked
</pre>
<br>
Handler Naming Convention
--------------------------
<code>
onsubmit="handleSubmit(event)"
onclick="handleClick(event)"
</code>
A handler function usually starts with <code>handle</code>
<br>
<pre>
Server Simulation w/ Promise
---------------------------------
<form onsubmit="handleSubmit(event)">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br>
<input type="submit">
</form>
</pre>
<hr>
<pre>
JSON parse
---------------
<code>
const response = JSON.parse(resolveValue);
</code>
Analyze the data and convert it to a usable format.
<code>JSON.parse</code> converts a string into an actual object.
</pre>
</main>
<footer></footer>
</body>
</html>