Notes/Rapid JavaScript Training at master · chaoobject001/Notes · GitHub

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

{Module 1: Introduction}
Introduction
  professional who wants to learn JS rapidly & directly
  anyone with foundamental already
  course in Q & A format
  Q & A:
    var totla = 5.1 + 3.3;
    console.log(total);
    Q: what shows in console?
    A: 8.39999...

  Module 2: JS Basics
  Module 3: Variables, Type and Scope
  Module 4: Operators
  Module 5: Arrays and Reference Types
  Module 6: Objects, JSON and Prototypes
  Module 7: Functions
  Module 8: Browser Object Model (BOM) & Document Object Model (DOM)
  Module 9: Event Handler
  Module 10: Built-in Objects and Functions
  Module 11: Miscellaneous Topics & Tools

Experimenting with JavaScript on the Web
  Best way to learn is to create many, many example programs
  Two eay ways to write JS on Web
  1. jsfiddle.NET
  2. plnkr.co

{Module 2: JavaScript Basics}
Introduction
  Module Overview
    script tag: <script>
      HTML5 tag that let us include JS within web Pages
    Variables and Types
    Functions
    Conditionals
    Loops
    JS Usage: comments, end of line character, semicolon and other Topics

JavaScript in Web Pages
  <script>:
    embeded JS within web page or point to JS file
    any code embeded within a script tage in HTML will execute immedately

  src attribute (on script tage): specify which JS file to load
  defer attribute delays the loading of a file
  <no script>: contains markup to display when JS is turned off or browser cannot display JS

  Q & A:
    <script> tage can be placed and executed in both <head> and <body> section of a web page

  Q & A:
    reference external JS file with page
    File: js/app.js
      console.log("in app.js");
    File: index.html
      <body>
        <script src="js/app.js"></script>
      </body>

  Q&A:
    Using <script> tag with src attribute, only JS code in referenced file will be executed.
    Code within <script> tag will be ignored

Variables
  Fundamentals & how it is used
  undefined (keyword) as its own data type
  Primitive Types
  Object and function Types

  variable as string (in double quote), int
  var orderId = "ORD-9001";
  orderId = 1201;

  variable (var) in JavaScript is dynamically typed & the type is definite
  However, type can be changed thoughout execution

  undefined:
    When a variable is not initialized, it is always set to "undefined" -> typeof "undefined"

  'use strict'; // enter strict mode - JavaScript will not create global variable implicitly when var is not used
  orderId = 9001;
  console.log(orderId);
    VM103:2 Uncaught ReferenceError: orderId is not defined
      at <anonymous>:2:9

  var orderId = 9001;
  console.log(typeof orderId);
  output: number

  number is one of the primitive datatype with JavaScript
  both integer and floating point number are specified by the type "number"

  var orderId = "ORD-9001";
  console.log(typeof orderId);
  output: string

  string is another primitive datatype

  var isActive = true;
  console.log(typeof isActive);
  output: boolean

  boolean is another primitive datatype

  JSON object and array are both typeof "object"
    var order = {
    orderId: 9001,
    isActive: true
    };
    console.log(typeof order);
    output: object

  null is of type "object"
  var order = null;
  console.log(typeof order);
  output: object

  function cancelOrder(orderId) {};
  console.log(typeof cancelOrder);
  output: function

  function is another primitive datatype

Function Fundamentals
  Declaring Functions

  Arguments

  Return Values

  Function Declaration v.s. Function Expressions

if and switch Statements

while and do...while Statements

for and for...in

JavaScript Usage Features

Summary

3
Variables, Types, and Scope

Introduction

Hoisting

Numberm

Strings

Boolean Values

undefined and null

Global Scope

Function Scope

Block Scope

Summary

4
Operators

Introduction

Addition

Subtraction

Multiplication, Division, Modulus

Unary Operators

Bitwise Operators

Boolean Operators

Equality Operators

Relational Operators

Miscellaneous Operators

Summary

5
Arrays and Reference Types

Introduction

Understanding Reference Types

Reference Type Examples

Array Fundamentals

Array Features

Date Fundamentals

Regular Expressions

Summary

6
Objects, JSON, and Prototypes

Introduction

Simple Objects and JSON

Understanding Prototypes

Working with Prototypes

Object.create() and Prototypes

Object.defineProperty()

Miscellaneous Object Functions

Summary

7
Functions

Introduction

Naming Function Expressions

Constructor Functions

The this Keyword

Calling Functions

Closures

IIFEs

Recursion

Summary

8
Programming the BOM and DOM

Introduction

Theindow Object and Timers

System Dialogs

The location Object

Document Basics

Query Selectors

Summary

9
Event Handlers

Introduction
 4
Events

The Event Object

Handling Events

Event Listeners

Event Bubbling

Summary

10
Built-in Objects and Functions

Introduction

Global Functions

The Math Object

The String Object

Arguments

Summary

11
Miscellaneous JavaScript Topics

Introduction

Error Handling Using try, catch, finally

Promises and Observables

Strict Mode

JSLint and JSHint

Modular JavaScript

Summary