Thanks to visit codestin.com
Credit goes to www.slideshare.net

Practical JavaScript Programming
Session 1
Wilson Su
Outline
2
Practical JavaScript Programming
Chapter 1.
● Introductions
● Placing JavaScripts
● JavaScript Output
● Browser Compatibility
● Development Tools
Getting Started
Chapter 2.
Variables
● Variable Declarations
● Data Types
● Literals
● Data Type Conversion
● Scoping
● Variable Hoisting
3
Wilson Su
Front-end Developer, HIE
● 6 years in web design
● Specialize in JavaScript /
CSS / HTML / OOP / Git
● Familiar with PHP / Design
Pattern
● Interested in UI & Ix Design
wilson_su@trend.com.tw
4
Q1. Is there anyone who does not have any
programming experience?
Q2. Is there anyone who has experience with
programming in JavaScript?
Q3. Is there anyone who has experience with
programming in JavaScript for more than 3 years?
Quick Survey
Practical JavaScript Programming
Chapter 1.
Getting Started
5
Introductions
6
JavaScript ≠ Java
7
Java ⇏ JavaScript
8
What Is JavaScript?
● JavaScript is abbreviated as "JS".
● It is a dynamic, untyped, interpreted, cross-platform, object-oriented
language.
● It is standardized in the ECMAScript language specification.
● It is most commonly used as part of web browsers.
● It also being used in server-side programming.
● JavaScript (Client) = ECMAscript + DOM + BOM
Introductions
9
What Can JavaScript Do?
✓ Visual effects
✓ Simple calculations
✓ User data manipulation
✓ Data validation
✓ Data storage
✓ Dynamicaly change page structure
✓ Get data from server
Introductions
10
11
Vue.js React
Bootstrap
GRUNT
Keywords And Reserved Words
Introductions
arguments await break case catch class const continue
debugger default delete do else enum eval export extends
false finally for function let if implements import in
Infinity instanceof interface NaN new null package private
protected public return static super switch this throw true
try typeof undefined var void while with yield
12
Placing JavaScripts
13
The Inline <script> in <head>
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script>
5. alert('Hello World!');
6. </script>
7. </head>
8. <body>
9. </body>
10. </html>
14
The Inline <script> in <body>
15
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <script>
7. alert('Hello World!');
8. </script>
9. </body>
10. </html>
External <script> Files
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script src="app.js">
5. /* A <script> element with src attribute,
6. the codes between the script tag are ignored */
7. alert('Hello World!');
8. </script>
9. </head>
10. <body>
11. <script src="app.js" type="text/javascript"></script>
12. </body>
13. </html>
16
The <noscript> Tag
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <noscript>
7. Your browser does not support JavaScript!
8. </noscript>
9. </body>
10. </html>
17
Make JavaScript external.
18
Put scripts at the bottom of
document body.
19
Put Scripts At The Bottom Of Document Body
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <form>
7. Account: <input type="text">
8. Password: <input type="password">
9. </form>
10. <script src="app.js"></script>
11. </body>
12. </html>
20
JavaScript Output
21
JavaScript Display Possibilities
22
1. Element.innerHTML();
2. Node.textContent();
3. document.write();
4. document.writeln();
5. window.alert();
6. console.log();
The Inline <script> in <head>
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script>
5. alert('Hello World!');
6. </script>
7. </head>
8. <body>
9. </body>
10. </html>
23
24
window.alert('Hello World!');
The Inline <script> in <body>
1.<!DOCTYPE html>
2.<html>
3.<head>
4.</head>
5.<body>
6. <script>
7. document.write('Hello World!');
8. </script>
9.</body>
10.</html>
25
26
document.write('Hello World!');
Browser Compatibility
27
Web Browser Engines
Browser Compatibility
Trident EdgeHTML Gecko Presto
WebKit Blink
~2013
KHTML
~2013
28
V8 JavaScriptCoreChakraSpiderMonkey
JavaScript Engines
29
Browser Compatibility
JavaScript Differences
30
1. document.body.style.styleFloat; // IE10
2. document.body.style.cssFloat; // Chrome
3.
4. target.fireEvent('onclick'); // IE10
5. target.dispatchEvent(new Event('click')); // Chrome
6.
7. // console.table is not supported in IE
8. console.table([{ id: 1 }, { id: 2 }]); // Chrome
9.
10. // Most ES6 features are not supported in IE11
11. // Most ES6 features are supported in Chrome
12. class Food {}
Test and verify that JavaScript
works across multiple browsers.
31
Development Tools
32
JavaScript IDEs
33
Development Tools
Visual Studio Code Sublime Text
/* NOT LIMITED TO THE ABOVE */
Debugging JavaScript With Browser DevTools
34
Development Tools
Google Chrome Mozilla Firefox
/* NOT LIMITED TO THE ABOVE */
Debugging JavaScript With Online Code Editor
35
Development Tools
JS Bin CodePen
/* NOT LIMITED TO THE ABOVE */
Questions?
36
Chapter 2.
Variables
37
Variable Declarations
38
Declarations
39
Variable Declarations
var Declares a variable, optionally initializing
it to a value.
let Declares a block-scoped, local variable,
optionally initializing it to a value.
const Declares a block-scoped, read-only named
constant.
JavaScript Identifiers
40
– can contain letters, digits, underscores, and dollar signs
– must begin with a letter
– can also begin with $ and _
– are case sensitive
– cannot use reserved words
Variable Declarations
Variable Declarations
1. var color = 'red';
2. var cat, dog, sheep;
3. var _id = 100, $last = true, lastName = 'Wang';
4. var fruit = 80,
5. vegetable = 40,
6. bread = 50;
7.
8. let bag = 'plastic';
9.
10. const TYPE_CARD = 'CARD';
41
Data Types
42
Primitive Data Types
1. var title = 'FED'; // string
2. var salary = 22000; // number
3. var children = false; // boolean
4. var car = undefined; // undefined
5. var house = null; // null
43
/* THE ABOVE CONTENT IS PURELY FICTIONAL */
Built-in Objects
Data Types
Object Function
Boolean Number String
Date Math RegExp
Array Map Set
Promise JSON
Error SyntaxError ReferenceError
...
44
Comparison of Primitive Type / String Object
1.// Primitive Type
2.var str1 = 'hello';
3.var str2 = 'hello';
4.console.log(str2 === str2); // ?
5.
6.// String Object
7.var str3 = new String('hello');
8.var str4 = new String('hello');
9.console.log(str3 === str4); // ?
45
1.// Primitive Type
2.var str1 = 'hello';
3.var str2 = 'hello';
4.console.log(str2 === str2); // true
5.
6.// String Object
7.var str3 = new String('hello');
8.var str4 = new String('hello');
9.console.log(str3 === str4); // ?
1.// Primitive Type
2.var str1 = 'hello';
3.var str2 = 'hello';
4.console.log(str2 === str2); // true
5.
6.// String Object
7.var str3 = new String('hello');
8.var str4 = new String('hello');
9.console.log(str3 === str4); // false
Setting And Getting Primitive Type / String Object
46
1. console.log('hello'); // hello
2. console.log(new String('hello'));
3. // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o", length: 5}
4.
5. var pet = 'dog';
6. console.log(pet[0]); // 'd'
7.
8. pet[0] = 'f';
9. console.log(pet[0]); // ?
1. console.log('hello'); // 'hello'
2. console.log(new String('hello'));
3. // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o", length: 5}
4.
5. var pet = 'dog';
6. console.log(pet[0]); // 'd'
7.
8. pet[0] = 'f';
9. console.log(pet[0]); // 'd'
Do not use wrapper object!
47
Unset Variables
48
1. var drink = 'coke';
2. console.log(drink); // 'coke'
3.
4. drink = undefined;
5. console.log(drink); // undefined
6.
7. drink = null;
8. console.log(drink); // null
Literals
49
JavaScript accepts both double
and single quotes.
50
String Literals
51
1. console.log('car'); // 'car'
2. console.log("building"); // 'building'
3. console.log('251'); // '©'
4. console.log('xA9'); // '©'
5. console.log('u00A9'); // '©'
6. console.log('u{2F804}'); // '你'
Multiline Strings
52
1. console.log('Hello 
2. World!'); // 'Hello World!'
3.
4. console.log('line one n another line');
5. // line one
6. another line
7.
8. console.log('line one
9. another line'); // ?
1. console.log('Hello 
2. World!'); // 'Hello World!'
3.
4. console.log('line one n another line');
5. // 'line one
6. another line'
7.
8. console.log('line one
9. another line'); // SyntaxError
String Interpolation
53
1. var price = 999;
2. var book = `The book costs ${price} dollars.`;
3. console.log(book); // 'The book costs 999 dollars.'
4.
5. var cat = 'Apple';
6. var dog = 'Pen';
7. var pets = `I have a cat, ${cat}.
8. I have a dog, ${dog}.
9. Ummm, ${cat}-${dog}`;
10. console.log(pets); // 'I have a cat, Apple.
11. I have a dog, Pen.
12. Ummm, Apple-Pen'
Integers And Floating-point Literals
54
1. console.log(1000); // 1000
2. console.log(.75); // 0.75
3. console.log(0xff); // 255
4. console.log(011); // 9
5. console.log(0b11); // 3
6. console.log(1.2e3); // 1200
7. console.log(2E-3); // 0.002
Floating-point Calculations
55
1. console.log(0.1 + 0.1); // 0.2
2. console.log(0.1 + 0.2); // ?
3. console.log(0.4 - 0.1); // ?
4. console.log(0.1 * 3); // ?
5. console.log(0.9 / 3); // ?
6. console.log(0.1 + 0.2 + 0.3); // ?
7. console.log(0.3 + 0.2 + 0.1); // ?
1. console.log(0.1 + 0.1); // 0.2
2. console.log(0.1 + 0.2); // 0.30000000000000004
3. console.log(0.4 - 0.1); // ?
4. console.log(0.1 * 3); // ?
5. console.log(0.9 / 3); // ?
6. console.log(0.1 + 0.2 + 0.3); // ?
7. console.log(0.3 + 0.2 + 0.1); // ?
1. console.log(0.1 + 0.1); // 0.2
2. console.log(0.1 + 0.2); // 0
3. console.log(0.4 - 0.1); // 0.30000000000000004
4. console.log(0.1 * 3); // ?
5. console.log(0.9 / 3); // ?
6. console.log(0.1 + 0.2 + 0.3); // ?
7. console.log(0.3 + 0.2 + 0.1); // ?
1. console.log(0.1 + 0.1); // 0.2
2. console.log(0.1 + 0.2); // 0.30000000000000004
3. console.log(0.4 - 0.1); // 0.30000000000000004
4. console.log(0.1 * 3); // 0.30000000000000004
5. console.log(0.9 / 3); // ?
6. console.log(0.1 + 0.2 + 0.3); // ?
7. console.log(0.3 + 0.2 + 0.1); // ?
1. console.log(0.1 + 0.1); // 0.2
2. console.log(0.1 + 0.2); // 0.30000000000000004
3. console.log(0.4 - 0.1); // 0.30000000000000004
4. console.log(0.1 * 3); // 0.30000000000000004
5. console.log(0.9 / 3); // 0.3
6. console.log(0.1 + 0.2 + 0.3); // ?
7. console.log(0.3 + 0.2 + 0.1); // ?
1. console.log(0.1 + 0.1); // 0.2
2. console.log(0.1 + 0.2); // 0.30000000000000004
3. console.log(0.4 - 0.1); // 0.30000000000000004
4. console.log(0.1 * 3); // 0.30000000000000004
5. console.log(0.9 / 3); // 0.3
6. console.log(0.1 + 0.2 + 0.3); // 0.6000000000000001
7. console.log(0.3 + 0.2 + 0.1); // ?
1. console.log(0.1 + 0.1); // 0.2
2. console.log(0.1 + 0.2); // 0.30000000000000004
3. console.log(0.4 - 0.1); // 0.30000000000000004
4. console.log(0.1 * 3); // 0.30000000000000004
5. console.log(0.9 / 3); // 0.3
6. console.log(0.1 + 0.2 + 0.3); // 0.6000000000000001
7. console.log(0.3 + 0.2 + 0.1); // 0.6
Data Type Conversion
56
You don't have to specify the
datatype of a variable when you
declare it, and data types are
converted automatically as
needed during script execution.
57
Dynamically Typed
58
1. var something = 'Dog';
2. something = 12;
3. something = true;
Converting To Strings
59
1. String(10); // '10'
2. String(10 + 20); // '30'
3.
4. (10).toString(); // '10'
5. (10 + 20).toString(); // '30'
6.
7. String(true); // ?
8. String(false); // ?
1. String(10); // '10'
2. String(10 + 20); // '30'
3.
4. (10).toString(); // '10'
5. (10 + 20).toString(); // '30'
6.
7. String(true); // 'true'
8. String(false); // 'false'
Converting To Strings
60
1. String(null); // 'null'
2. String(undefined); // 'undefined'
3. String(NaN); // 'NaN'
4. String(Infinity); // 'Infinity'
5.
6. String([]); // ?
7. String([100]); // ?
8. String([100, 200]); // ?
9. String({}); // '[object Object]'
10. String(function () {}); // 'function () {}'
1. String(null); // 'null'
2. String(undefined); // 'undefined'
3. String(NaN); // 'NaN'
4. String(Infinity); // 'Infinity'
5.
6. String([]); // ''
7. String([100]); // ?
8. String([100, 200]); // ?
9. String({}); // '[object Object]'
10. String(function () {}); // 'function () {}'
1. String(null); // 'null'
2. String(undefined); // 'undefined'
3. String(NaN); // 'NaN'
4. String(Infinity); // 'Infinity'
5.
6. String([]); // ''
7. String([100]); // '100'
8. String([100, 200]); // ?
9. String({}); // '[object Object]'
10. String(function () {}); // 'function () {}'
1. String(null); // 'null'
2. String(undefined); // 'undefined'
3. String(NaN); // 'NaN'
4. String(Infinity); // 'Infinity'
5.
6. String([]); // ''
7. String([100]); // '100'
8. String([100, 200]); // '100,200'
9. String({}); // '[object Object]'
10. String(function () {}); // 'function () {}'
Converting To Numbers
61
1. Number('3.14'); // 3.14
2. Number(''); // 0
3. Number(' '); // ?
4. Number('11 22'); // ?
5.
6. Number(true); // ?
7. Number(false); // ?
8. Number(null); // ?
9. Number(undefined); // NaN
1. Number('3.14'); // 3.14
2. Number(''); // 0
3. Number(' '); // 0
4. Number('11 22'); // ?
5.
6. Number(true); // ?
7. Number(false); // ?
8. Number(null); // ?
9. Number(undefined); // NaN
1. Number('3.14'); // 3.14
2. Number(''); // 0
3. Number(' '); // 0
4. Number('11 22'); // NaN
5.
6. Number(true); // ?
7. Number(false); // ?
8. Number(null); // ?
9. Number(undefined); // NaN
1. Number('3.14'); // 3.14
2. Number(''); // 0
3. Number(' '); // 0
4. Number('11 22'); // NaN
5.
6. Number(true); // 1
7. Number(false); // 0
8. Number(null); // ?
9. Number(undefined); // NaN
1. Number('3.14'); // 3.14
2. Number(''); // 0
3. Number(' '); // 0
4. Number('11 22'); // NaN
5.
6. Number(true); // 1
7. Number(false); // 0
8. Number(null); // 0
9. Number(undefined); // NaN
Converting To Numbers
62
1. Number([]); // 0
2. Number([100]); // 100
3. Number([100, 200]); // NaN
4. Number({}); // NaN
5. Number(function () {}); // NaN
6.
7. parseFloat('3.14'); // 3.14
8. parseFloat('11.11 22.22'); // 11.11
9.
10. parseInt('1234.567'); // 1234
11. parseInt('11 22'); // 11
Converting To Booleans
63
1. Boolean(1); // true
2. Boolean(0); // false
3. Boolean(-1); // ?
4.
5. Boolean(''); // false
6. Boolean(' '); // ?
7. Boolean('1'); // true
8. Boolean('0'); // ?
9. Boolean('true'); // true
10. Boolean('false'); // true
1. Boolean(1); // true
2. Boolean(0); // false
3. Boolean(-1); // true
4.
5. Boolean(''); // false
6. Boolean(' '); // ?
7. Boolean('1'); // true
8. Boolean('0'); // ?
9. Boolean('true'); // true
10. Boolean('false'); // true
1. Boolean(1); // true
2. Boolean(0); // false
3. Boolean(-1); // true
4.
5. Boolean(''); // false
6. Boolean(' '); // true
7. Boolean('1'); // true
8. Boolean('0'); // ?
9. Boolean('true'); // true
10. Boolean('false'); // true
1. Boolean(1); // true
2. Boolean(0); // false
3. Boolean(-1); // true
4.
5. Boolean(''); // false
6. Boolean(' '); // true
7. Boolean('1'); // true
8. Boolean('0'); // true
9. Boolean('true'); // true
10. Boolean('false'); // true
Converting To Booleans
64
1. Boolean(null); // false
2. Boolean(undefined); // false
3. Boolean(NaN); // false
4. Boolean(Infinity); // true
5.
6. Boolean([]); // true
7. Boolean({}); // true
8. Boolean(function () {}); // true
Implicit Coercions
65
1. 'Fifty-eight is ' + 88; // 'Fifty-eight is 88'
2. 17 + ' is seventeen'; // '17 is seventeen'
3. +'10'; // ?
4. -'20'; // -20
5. '30' + 5; // '305'
6. 6 + 7 + '400'; // ?
7. 8 + true; // ?
8. 1 + undefined; // NaN
9. 2 + null; // ?
10. 3 + NaN; // NaN
11. 4 + Infinity; // Infinity
1. 'Fifty-eight is ' + 88; // 'Fifty-eight is 88'
2. 17 + ' is seventeen'; // '17 is seventeen'
3. +'10'; // 10
4. -'20'; // -20
5. '30' + 5; // '305'
6. 6 + 7 + '400'; // ?
7. 8 + true; // ?
8. 1 + undefined; // NaN
9. 2 + null; // ?
10. 3 + NaN; // NaN
11. 4 + Infinity; // Infinity
1. 'Fifty-eight is ' + 88; // 'Fifty-eight is 88'
2. 17 + ' is seventeen'; // '17 is seventeen'
3. +'10'; // 10
4. -'20'; // -20
5. '30' + 5; // '305'
6. 6 + 7 + '400'; // '13400'
7. 8 + true; // ?
8. 1 + undefined; // NaN
9. 2 + null; // ?
10. 3 + NaN; // NaN
11. 4 + Infinity; // Infinity
1. 'Fifty-eight is ' + 88; // 'Fifty-eight is 88'
2. 17 + ' is seventeen'; // '17 is seventeen'
3. +'10'; // 10
4. -'20'; // -20
5. '30' + 5; // '305'
6. 6 + 7 + '400'; // '13400'
7. 8 + true; // 9
8. 1 + undefined; // NaN
9. 2 + null; // ?
10. 3 + NaN; // NaN
11. 4 + Infinity; // Infinity
1. 'Fifty-eight is ' + 88; // 'Fifty-eight is 88'
2. 17 + ' is seventeen'; // '17 is seventeen'
3. +'10'; // 10
4. -'20'; // -20
5. '30' + 5; // '305'
6. 6 + 7 + '400'; // '13400'
7. 8 + true; // 9
8. 1 + undefined; // NaN
9. 2 + null; // 2
10. 3 + NaN; // NaN
11. 4 + Infinity; // Infinity
Implicit Coercions
66
1. '55' - 5; // 50
2. '65' - '10'; // 55
3. '8' * 8; // 64
4. '9' * '9'; // 81
5. '49' / 7; // 7
Make sure that a variable is
used as a number before adding
it to another one.
67
Coerce Conversion Between Primitives and Objects
68
1. var learn = 'Learning ';
2. var language = 'JavaScript';
3. var title = learn.concat(language);
4. console.log(title); // 'Learning JavaScript'
5. console.log(title === 'Learning JavaScript'); // true
6.
7. title = title.replace('JavaScript', 'JS');
8. console.log(title); // 'Learning JS'
9. console.log(title === 'Learning JS'); // true
Scoping
69
Function Scoping
70
1. function dinner () {
2. var food = 'noodle';
3.
4. if (true) {
5. var food = 'hamburger';
6. var drink = 'tea';
7. console.log(food); // 'hamburger'
8. }
9.
10. console.log(food); // 'hamburger'
11. console.log(drink); // ?
12. }
1. function dinner () {
2. var food = 'noodle';
3.
4. if (true) {
5. var food = 'hamburger';
6. var drink = 'tea';
7. console.log(food); // 'hamburger'
8. }
9.
10. console.log(food); // 'hamburger'
11. console.log(drink); // 'tea'
12. }
Block Scoping
71
1. function launch () {
2. let food = 'noodle';
3.
4. if (true) {
5. let food = 'hamburger';
6. let drink = 'tea';
7. console.log(food); // 'hamburger'
8. }
9.
10. console.log(food); // 'noodle'
11. console.log(drink); // ?
12. }
1. function launch () {
2. let food = 'noodle';
3.
4. if (true) {
5. let food = 'hamburger';
6. let drink = 'tea';
7. console.log(food); // 'hamburger'
8. }
9.
10. console.log(food); // 'noodle'
11. console.log(drink); // ReferenceError
12. }
A variable declared outside a
function, becomes global.
72
Global Variables
73
1. var title = 'JavaScript';
2. console.log(title); // 'JavaScript';
3. console.log(window.title); // 'JavaScript';
4.
5. function log () {}
6. console.log(log); // function log() {}
7. console.log(window.log); // function log() {}
Global variables can be
retrieved without getting them
from window object.
74
Setting and Getting Global Variables
75
1. window.title = 'JavaScript';
2. console.log(window.title); // 'JavaScript'
3. console.log(title); // 'JavaScript'
Local Variables
76
1. let title = 'JavaScript';
2. console.log(title); // 'JavaScript'
3. console.log(window.title); // ?
1. let title = 'JavaScript';
2. console.log(title); // 'JavaScript'
3. console.log(window.title); // undefined
Lifetime of Variables
Scoping
77
● The lifetime of a variable starts when it is declared.
● Local variables are deleted when the function is completed.
● Global variables are deleted when you close the browser window.
Variable Hoisting
78
You can refer to a variable
declared later, without getting
an exception.This concept is
known as hoisting.
79
Variable Hoisting
80
1. var drink = 'coffee';
2.
3. console.log(drink); // 'coffee'
4. console.log(food); // ?
5.
6. var food = 'pizza';
7.
8. console.log(drink); // 'coffee'
9. console.log(food); // 'pizza'
1. var drink = 'coffee';
2.
3. console.log(drink); // 'coffee'
4. console.log(food); // undefined
5.
6. var food = 'pizza';
7.
8. console.log(drink); // 'coffee'
9. console.log(food); // 'pizza'
Re-Declaring Variables
81
1. var food = 'shusi';
2. console.log(food); // 'shusi'
3.
4. var food;
5. console.log(food); // ?
1. var food = 'shusi';
2. console.log(food); // 'shusi'
3.
4. var food;
5. console.log(food); // 'shusi'
Misuse Hoisted Variable
82
1. function isWinner (player, others) {
2. var highest = 0;
3.
4. for (var i = 0, len = others.length; i < len; ++i) {
5. var player = others[i];
6.
7. if (player.score > highest) {
8. highest = player.score;
9. }
10. }
11.
12. return player.score > highest;
13. }
Syntax Error With let
83
1. let title;
2. let title; // ?
3.
4. function triple (number) {
5. let number; // ?
6. return number * 3;
7. }
8.
9. triple(100);
1. let title;
2. let title; // SyntaxError
3.
4. function triple (number) {
5. let number; // SyntaxError
6. return number * 3;
7. }
8.
9. triple(100);
Reference Error With let
84
1. function sum (value1, value2) {
2. console.log(total); // ?
3. let total = value1 + value2;
4. }
5.
6. sum(100, 200);
1. function sum (value1, value2) {
2. console.log(total); // ReferenceError
3. let total = value1 + value2;
4. }
5.
6. sum(100, 200);
Variable Lifecycle Using var Statement
Variable Declarations
Declaration phase
Initialization phase
Assignment phase
85
drink === undefined
drink === 'coffee'
Initialized state
Assigned state
drink = 'coffee'
var drink = undefined
Variable Lifecycle Using let Statement
Variable Declarations
Declaration phase
Initialization phase
Assignment phase
86
drink === undefined
drink === 'coffee'
Initialized state
Assigned state
drink = 'coffee'
Uninitialized state
let drink = undefined
Accessing drink throws ReferenceError
Declare all variables at the
beginning of a script.
87
Always code as if the guy who
ends up maintaining your code
will be a violent psychopath
who knows where you live.
- Martin Golding
88
Questions?
89
References
● Introduction to JS
● JavaScript - Wikipedia
● JavaScript Fundamentals | Microsoft Docs
● JavaScript Guide - JavaScript | MDN
● JavaScript Tutorial | W3Schools
Practical JavaScript Programming
90
Reference Books
● JavaScript: The Good Parts
● Effective JavaScript
91
Practical JavaScript Programming

Practical JavaScript Programming - Session 1/8

  • 1.
  • 2.
    Outline 2 Practical JavaScript Programming Chapter1. ● Introductions ● Placing JavaScripts ● JavaScript Output ● Browser Compatibility ● Development Tools Getting Started Chapter 2. Variables ● Variable Declarations ● Data Types ● Literals ● Data Type Conversion ● Scoping ● Variable Hoisting
  • 3.
    3 Wilson Su Front-end Developer,HIE ● 6 years in web design ● Specialize in JavaScript / CSS / HTML / OOP / Git ● Familiar with PHP / Design Pattern ● Interested in UI & Ix Design [email protected]
  • 4.
    4 Q1. Is thereanyone who does not have any programming experience? Q2. Is there anyone who has experience with programming in JavaScript? Q3. Is there anyone who has experience with programming in JavaScript for more than 3 years? Quick Survey Practical JavaScript Programming
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
    What Is JavaScript? ●JavaScript is abbreviated as "JS". ● It is a dynamic, untyped, interpreted, cross-platform, object-oriented language. ● It is standardized in the ECMAScript language specification. ● It is most commonly used as part of web browsers. ● It also being used in server-side programming. ● JavaScript (Client) = ECMAscript + DOM + BOM Introductions 9
  • 10.
    What Can JavaScriptDo? ✓ Visual effects ✓ Simple calculations ✓ User data manipulation ✓ Data validation ✓ Data storage ✓ Dynamicaly change page structure ✓ Get data from server Introductions 10
  • 11.
  • 12.
    Keywords And ReservedWords Introductions arguments await break case catch class const continue debugger default delete do else enum eval export extends false finally for function let if implements import in Infinity instanceof interface NaN new null package private protected public return static super switch this throw true try typeof undefined var void while with yield 12
  • 13.
  • 14.
    The Inline <script>in <head> 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <script> 5. alert('Hello World!'); 6. </script> 7. </head> 8. <body> 9. </body> 10. </html> 14
  • 15.
    The Inline <script>in <body> 15 1. <!DOCTYPE html> 2. <html> 3. <head> 4. </head> 5. <body> 6. <script> 7. alert('Hello World!'); 8. </script> 9. </body> 10. </html>
  • 16.
    External <script> Files 1.<!DOCTYPE html> 2. <html> 3. <head> 4. <script src="app.js"> 5. /* A <script> element with src attribute, 6. the codes between the script tag are ignored */ 7. alert('Hello World!'); 8. </script> 9. </head> 10. <body> 11. <script src="app.js" type="text/javascript"></script> 12. </body> 13. </html> 16
  • 17.
    The <noscript> Tag 1.<!DOCTYPE html> 2. <html> 3. <head> 4. </head> 5. <body> 6. <noscript> 7. Your browser does not support JavaScript! 8. </noscript> 9. </body> 10. </html> 17
  • 18.
  • 19.
    Put scripts atthe bottom of document body. 19
  • 20.
    Put Scripts AtThe Bottom Of Document Body 1. <!DOCTYPE html> 2. <html> 3. <head> 4. </head> 5. <body> 6. <form> 7. Account: <input type="text"> 8. Password: <input type="password"> 9. </form> 10. <script src="app.js"></script> 11. </body> 12. </html> 20
  • 21.
  • 22.
    JavaScript Display Possibilities 22 1.Element.innerHTML(); 2. Node.textContent(); 3. document.write(); 4. document.writeln(); 5. window.alert(); 6. console.log();
  • 23.
    The Inline <script>in <head> 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <script> 5. alert('Hello World!'); 6. </script> 7. </head> 8. <body> 9. </body> 10. </html> 23
  • 24.
  • 25.
    The Inline <script>in <body> 1.<!DOCTYPE html> 2.<html> 3.<head> 4.</head> 5.<body> 6. <script> 7. document.write('Hello World!'); 8. </script> 9.</body> 10.</html> 25
  • 26.
  • 27.
  • 28.
    Web Browser Engines BrowserCompatibility Trident EdgeHTML Gecko Presto WebKit Blink ~2013 KHTML ~2013 28
  • 29.
  • 30.
    JavaScript Differences 30 1. document.body.style.styleFloat;// IE10 2. document.body.style.cssFloat; // Chrome 3. 4. target.fireEvent('onclick'); // IE10 5. target.dispatchEvent(new Event('click')); // Chrome 6. 7. // console.table is not supported in IE 8. console.table([{ id: 1 }, { id: 2 }]); // Chrome 9. 10. // Most ES6 features are not supported in IE11 11. // Most ES6 features are supported in Chrome 12. class Food {}
  • 31.
    Test and verifythat JavaScript works across multiple browsers. 31
  • 32.
  • 33.
    JavaScript IDEs 33 Development Tools VisualStudio Code Sublime Text /* NOT LIMITED TO THE ABOVE */
  • 34.
    Debugging JavaScript WithBrowser DevTools 34 Development Tools Google Chrome Mozilla Firefox /* NOT LIMITED TO THE ABOVE */
  • 35.
    Debugging JavaScript WithOnline Code Editor 35 Development Tools JS Bin CodePen /* NOT LIMITED TO THE ABOVE */
  • 36.
  • 37.
  • 38.
  • 39.
    Declarations 39 Variable Declarations var Declaresa variable, optionally initializing it to a value. let Declares a block-scoped, local variable, optionally initializing it to a value. const Declares a block-scoped, read-only named constant.
  • 40.
    JavaScript Identifiers 40 – cancontain letters, digits, underscores, and dollar signs – must begin with a letter – can also begin with $ and _ – are case sensitive – cannot use reserved words Variable Declarations
  • 41.
    Variable Declarations 1. varcolor = 'red'; 2. var cat, dog, sheep; 3. var _id = 100, $last = true, lastName = 'Wang'; 4. var fruit = 80, 5. vegetable = 40, 6. bread = 50; 7. 8. let bag = 'plastic'; 9. 10. const TYPE_CARD = 'CARD'; 41
  • 42.
  • 43.
    Primitive Data Types 1.var title = 'FED'; // string 2. var salary = 22000; // number 3. var children = false; // boolean 4. var car = undefined; // undefined 5. var house = null; // null 43 /* THE ABOVE CONTENT IS PURELY FICTIONAL */
  • 44.
    Built-in Objects Data Types ObjectFunction Boolean Number String Date Math RegExp Array Map Set Promise JSON Error SyntaxError ReferenceError ... 44
  • 45.
    Comparison of PrimitiveType / String Object 1.// Primitive Type 2.var str1 = 'hello'; 3.var str2 = 'hello'; 4.console.log(str2 === str2); // ? 5. 6.// String Object 7.var str3 = new String('hello'); 8.var str4 = new String('hello'); 9.console.log(str3 === str4); // ? 45 1.// Primitive Type 2.var str1 = 'hello'; 3.var str2 = 'hello'; 4.console.log(str2 === str2); // true 5. 6.// String Object 7.var str3 = new String('hello'); 8.var str4 = new String('hello'); 9.console.log(str3 === str4); // ? 1.// Primitive Type 2.var str1 = 'hello'; 3.var str2 = 'hello'; 4.console.log(str2 === str2); // true 5. 6.// String Object 7.var str3 = new String('hello'); 8.var str4 = new String('hello'); 9.console.log(str3 === str4); // false
  • 46.
    Setting And GettingPrimitive Type / String Object 46 1. console.log('hello'); // hello 2. console.log(new String('hello')); 3. // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o", length: 5} 4. 5. var pet = 'dog'; 6. console.log(pet[0]); // 'd' 7. 8. pet[0] = 'f'; 9. console.log(pet[0]); // ? 1. console.log('hello'); // 'hello' 2. console.log(new String('hello')); 3. // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o", length: 5} 4. 5. var pet = 'dog'; 6. console.log(pet[0]); // 'd' 7. 8. pet[0] = 'f'; 9. console.log(pet[0]); // 'd'
  • 47.
    Do not usewrapper object! 47
  • 48.
    Unset Variables 48 1. vardrink = 'coke'; 2. console.log(drink); // 'coke' 3. 4. drink = undefined; 5. console.log(drink); // undefined 6. 7. drink = null; 8. console.log(drink); // null
  • 49.
  • 50.
    JavaScript accepts bothdouble and single quotes. 50
  • 51.
    String Literals 51 1. console.log('car');// 'car' 2. console.log("building"); // 'building' 3. console.log('251'); // '©' 4. console.log('xA9'); // '©' 5. console.log('u00A9'); // '©' 6. console.log('u{2F804}'); // '你'
  • 52.
    Multiline Strings 52 1. console.log('Hello 2. World!'); // 'Hello World!' 3. 4. console.log('line one n another line'); 5. // line one 6. another line 7. 8. console.log('line one 9. another line'); // ? 1. console.log('Hello 2. World!'); // 'Hello World!' 3. 4. console.log('line one n another line'); 5. // 'line one 6. another line' 7. 8. console.log('line one 9. another line'); // SyntaxError
  • 53.
    String Interpolation 53 1. varprice = 999; 2. var book = `The book costs ${price} dollars.`; 3. console.log(book); // 'The book costs 999 dollars.' 4. 5. var cat = 'Apple'; 6. var dog = 'Pen'; 7. var pets = `I have a cat, ${cat}. 8. I have a dog, ${dog}. 9. Ummm, ${cat}-${dog}`; 10. console.log(pets); // 'I have a cat, Apple. 11. I have a dog, Pen. 12. Ummm, Apple-Pen'
  • 54.
    Integers And Floating-pointLiterals 54 1. console.log(1000); // 1000 2. console.log(.75); // 0.75 3. console.log(0xff); // 255 4. console.log(011); // 9 5. console.log(0b11); // 3 6. console.log(1.2e3); // 1200 7. console.log(2E-3); // 0.002
  • 55.
    Floating-point Calculations 55 1. console.log(0.1+ 0.1); // 0.2 2. console.log(0.1 + 0.2); // ? 3. console.log(0.4 - 0.1); // ? 4. console.log(0.1 * 3); // ? 5. console.log(0.9 / 3); // ? 6. console.log(0.1 + 0.2 + 0.3); // ? 7. console.log(0.3 + 0.2 + 0.1); // ? 1. console.log(0.1 + 0.1); // 0.2 2. console.log(0.1 + 0.2); // 0.30000000000000004 3. console.log(0.4 - 0.1); // ? 4. console.log(0.1 * 3); // ? 5. console.log(0.9 / 3); // ? 6. console.log(0.1 + 0.2 + 0.3); // ? 7. console.log(0.3 + 0.2 + 0.1); // ? 1. console.log(0.1 + 0.1); // 0.2 2. console.log(0.1 + 0.2); // 0 3. console.log(0.4 - 0.1); // 0.30000000000000004 4. console.log(0.1 * 3); // ? 5. console.log(0.9 / 3); // ? 6. console.log(0.1 + 0.2 + 0.3); // ? 7. console.log(0.3 + 0.2 + 0.1); // ? 1. console.log(0.1 + 0.1); // 0.2 2. console.log(0.1 + 0.2); // 0.30000000000000004 3. console.log(0.4 - 0.1); // 0.30000000000000004 4. console.log(0.1 * 3); // 0.30000000000000004 5. console.log(0.9 / 3); // ? 6. console.log(0.1 + 0.2 + 0.3); // ? 7. console.log(0.3 + 0.2 + 0.1); // ? 1. console.log(0.1 + 0.1); // 0.2 2. console.log(0.1 + 0.2); // 0.30000000000000004 3. console.log(0.4 - 0.1); // 0.30000000000000004 4. console.log(0.1 * 3); // 0.30000000000000004 5. console.log(0.9 / 3); // 0.3 6. console.log(0.1 + 0.2 + 0.3); // ? 7. console.log(0.3 + 0.2 + 0.1); // ? 1. console.log(0.1 + 0.1); // 0.2 2. console.log(0.1 + 0.2); // 0.30000000000000004 3. console.log(0.4 - 0.1); // 0.30000000000000004 4. console.log(0.1 * 3); // 0.30000000000000004 5. console.log(0.9 / 3); // 0.3 6. console.log(0.1 + 0.2 + 0.3); // 0.6000000000000001 7. console.log(0.3 + 0.2 + 0.1); // ? 1. console.log(0.1 + 0.1); // 0.2 2. console.log(0.1 + 0.2); // 0.30000000000000004 3. console.log(0.4 - 0.1); // 0.30000000000000004 4. console.log(0.1 * 3); // 0.30000000000000004 5. console.log(0.9 / 3); // 0.3 6. console.log(0.1 + 0.2 + 0.3); // 0.6000000000000001 7. console.log(0.3 + 0.2 + 0.1); // 0.6
  • 56.
  • 57.
    You don't haveto specify the datatype of a variable when you declare it, and data types are converted automatically as needed during script execution. 57
  • 58.
    Dynamically Typed 58 1. varsomething = 'Dog'; 2. something = 12; 3. something = true;
  • 59.
    Converting To Strings 59 1.String(10); // '10' 2. String(10 + 20); // '30' 3. 4. (10).toString(); // '10' 5. (10 + 20).toString(); // '30' 6. 7. String(true); // ? 8. String(false); // ? 1. String(10); // '10' 2. String(10 + 20); // '30' 3. 4. (10).toString(); // '10' 5. (10 + 20).toString(); // '30' 6. 7. String(true); // 'true' 8. String(false); // 'false'
  • 60.
    Converting To Strings 60 1.String(null); // 'null' 2. String(undefined); // 'undefined' 3. String(NaN); // 'NaN' 4. String(Infinity); // 'Infinity' 5. 6. String([]); // ? 7. String([100]); // ? 8. String([100, 200]); // ? 9. String({}); // '[object Object]' 10. String(function () {}); // 'function () {}' 1. String(null); // 'null' 2. String(undefined); // 'undefined' 3. String(NaN); // 'NaN' 4. String(Infinity); // 'Infinity' 5. 6. String([]); // '' 7. String([100]); // ? 8. String([100, 200]); // ? 9. String({}); // '[object Object]' 10. String(function () {}); // 'function () {}' 1. String(null); // 'null' 2. String(undefined); // 'undefined' 3. String(NaN); // 'NaN' 4. String(Infinity); // 'Infinity' 5. 6. String([]); // '' 7. String([100]); // '100' 8. String([100, 200]); // ? 9. String({}); // '[object Object]' 10. String(function () {}); // 'function () {}' 1. String(null); // 'null' 2. String(undefined); // 'undefined' 3. String(NaN); // 'NaN' 4. String(Infinity); // 'Infinity' 5. 6. String([]); // '' 7. String([100]); // '100' 8. String([100, 200]); // '100,200' 9. String({}); // '[object Object]' 10. String(function () {}); // 'function () {}'
  • 61.
    Converting To Numbers 61 1.Number('3.14'); // 3.14 2. Number(''); // 0 3. Number(' '); // ? 4. Number('11 22'); // ? 5. 6. Number(true); // ? 7. Number(false); // ? 8. Number(null); // ? 9. Number(undefined); // NaN 1. Number('3.14'); // 3.14 2. Number(''); // 0 3. Number(' '); // 0 4. Number('11 22'); // ? 5. 6. Number(true); // ? 7. Number(false); // ? 8. Number(null); // ? 9. Number(undefined); // NaN 1. Number('3.14'); // 3.14 2. Number(''); // 0 3. Number(' '); // 0 4. Number('11 22'); // NaN 5. 6. Number(true); // ? 7. Number(false); // ? 8. Number(null); // ? 9. Number(undefined); // NaN 1. Number('3.14'); // 3.14 2. Number(''); // 0 3. Number(' '); // 0 4. Number('11 22'); // NaN 5. 6. Number(true); // 1 7. Number(false); // 0 8. Number(null); // ? 9. Number(undefined); // NaN 1. Number('3.14'); // 3.14 2. Number(''); // 0 3. Number(' '); // 0 4. Number('11 22'); // NaN 5. 6. Number(true); // 1 7. Number(false); // 0 8. Number(null); // 0 9. Number(undefined); // NaN
  • 62.
    Converting To Numbers 62 1.Number([]); // 0 2. Number([100]); // 100 3. Number([100, 200]); // NaN 4. Number({}); // NaN 5. Number(function () {}); // NaN 6. 7. parseFloat('3.14'); // 3.14 8. parseFloat('11.11 22.22'); // 11.11 9. 10. parseInt('1234.567'); // 1234 11. parseInt('11 22'); // 11
  • 63.
    Converting To Booleans 63 1.Boolean(1); // true 2. Boolean(0); // false 3. Boolean(-1); // ? 4. 5. Boolean(''); // false 6. Boolean(' '); // ? 7. Boolean('1'); // true 8. Boolean('0'); // ? 9. Boolean('true'); // true 10. Boolean('false'); // true 1. Boolean(1); // true 2. Boolean(0); // false 3. Boolean(-1); // true 4. 5. Boolean(''); // false 6. Boolean(' '); // ? 7. Boolean('1'); // true 8. Boolean('0'); // ? 9. Boolean('true'); // true 10. Boolean('false'); // true 1. Boolean(1); // true 2. Boolean(0); // false 3. Boolean(-1); // true 4. 5. Boolean(''); // false 6. Boolean(' '); // true 7. Boolean('1'); // true 8. Boolean('0'); // ? 9. Boolean('true'); // true 10. Boolean('false'); // true 1. Boolean(1); // true 2. Boolean(0); // false 3. Boolean(-1); // true 4. 5. Boolean(''); // false 6. Boolean(' '); // true 7. Boolean('1'); // true 8. Boolean('0'); // true 9. Boolean('true'); // true 10. Boolean('false'); // true
  • 64.
    Converting To Booleans 64 1.Boolean(null); // false 2. Boolean(undefined); // false 3. Boolean(NaN); // false 4. Boolean(Infinity); // true 5. 6. Boolean([]); // true 7. Boolean({}); // true 8. Boolean(function () {}); // true
  • 65.
    Implicit Coercions 65 1. 'Fifty-eightis ' + 88; // 'Fifty-eight is 88' 2. 17 + ' is seventeen'; // '17 is seventeen' 3. +'10'; // ? 4. -'20'; // -20 5. '30' + 5; // '305' 6. 6 + 7 + '400'; // ? 7. 8 + true; // ? 8. 1 + undefined; // NaN 9. 2 + null; // ? 10. 3 + NaN; // NaN 11. 4 + Infinity; // Infinity 1. 'Fifty-eight is ' + 88; // 'Fifty-eight is 88' 2. 17 + ' is seventeen'; // '17 is seventeen' 3. +'10'; // 10 4. -'20'; // -20 5. '30' + 5; // '305' 6. 6 + 7 + '400'; // ? 7. 8 + true; // ? 8. 1 + undefined; // NaN 9. 2 + null; // ? 10. 3 + NaN; // NaN 11. 4 + Infinity; // Infinity 1. 'Fifty-eight is ' + 88; // 'Fifty-eight is 88' 2. 17 + ' is seventeen'; // '17 is seventeen' 3. +'10'; // 10 4. -'20'; // -20 5. '30' + 5; // '305' 6. 6 + 7 + '400'; // '13400' 7. 8 + true; // ? 8. 1 + undefined; // NaN 9. 2 + null; // ? 10. 3 + NaN; // NaN 11. 4 + Infinity; // Infinity 1. 'Fifty-eight is ' + 88; // 'Fifty-eight is 88' 2. 17 + ' is seventeen'; // '17 is seventeen' 3. +'10'; // 10 4. -'20'; // -20 5. '30' + 5; // '305' 6. 6 + 7 + '400'; // '13400' 7. 8 + true; // 9 8. 1 + undefined; // NaN 9. 2 + null; // ? 10. 3 + NaN; // NaN 11. 4 + Infinity; // Infinity 1. 'Fifty-eight is ' + 88; // 'Fifty-eight is 88' 2. 17 + ' is seventeen'; // '17 is seventeen' 3. +'10'; // 10 4. -'20'; // -20 5. '30' + 5; // '305' 6. 6 + 7 + '400'; // '13400' 7. 8 + true; // 9 8. 1 + undefined; // NaN 9. 2 + null; // 2 10. 3 + NaN; // NaN 11. 4 + Infinity; // Infinity
  • 66.
    Implicit Coercions 66 1. '55'- 5; // 50 2. '65' - '10'; // 55 3. '8' * 8; // 64 4. '9' * '9'; // 81 5. '49' / 7; // 7
  • 67.
    Make sure thata variable is used as a number before adding it to another one. 67
  • 68.
    Coerce Conversion BetweenPrimitives and Objects 68 1. var learn = 'Learning '; 2. var language = 'JavaScript'; 3. var title = learn.concat(language); 4. console.log(title); // 'Learning JavaScript' 5. console.log(title === 'Learning JavaScript'); // true 6. 7. title = title.replace('JavaScript', 'JS'); 8. console.log(title); // 'Learning JS' 9. console.log(title === 'Learning JS'); // true
  • 69.
  • 70.
    Function Scoping 70 1. functiondinner () { 2. var food = 'noodle'; 3. 4. if (true) { 5. var food = 'hamburger'; 6. var drink = 'tea'; 7. console.log(food); // 'hamburger' 8. } 9. 10. console.log(food); // 'hamburger' 11. console.log(drink); // ? 12. } 1. function dinner () { 2. var food = 'noodle'; 3. 4. if (true) { 5. var food = 'hamburger'; 6. var drink = 'tea'; 7. console.log(food); // 'hamburger' 8. } 9. 10. console.log(food); // 'hamburger' 11. console.log(drink); // 'tea' 12. }
  • 71.
    Block Scoping 71 1. functionlaunch () { 2. let food = 'noodle'; 3. 4. if (true) { 5. let food = 'hamburger'; 6. let drink = 'tea'; 7. console.log(food); // 'hamburger' 8. } 9. 10. console.log(food); // 'noodle' 11. console.log(drink); // ? 12. } 1. function launch () { 2. let food = 'noodle'; 3. 4. if (true) { 5. let food = 'hamburger'; 6. let drink = 'tea'; 7. console.log(food); // 'hamburger' 8. } 9. 10. console.log(food); // 'noodle' 11. console.log(drink); // ReferenceError 12. }
  • 72.
    A variable declaredoutside a function, becomes global. 72
  • 73.
    Global Variables 73 1. vartitle = 'JavaScript'; 2. console.log(title); // 'JavaScript'; 3. console.log(window.title); // 'JavaScript'; 4. 5. function log () {} 6. console.log(log); // function log() {} 7. console.log(window.log); // function log() {}
  • 74.
    Global variables canbe retrieved without getting them from window object. 74
  • 75.
    Setting and GettingGlobal Variables 75 1. window.title = 'JavaScript'; 2. console.log(window.title); // 'JavaScript' 3. console.log(title); // 'JavaScript'
  • 76.
    Local Variables 76 1. lettitle = 'JavaScript'; 2. console.log(title); // 'JavaScript' 3. console.log(window.title); // ? 1. let title = 'JavaScript'; 2. console.log(title); // 'JavaScript' 3. console.log(window.title); // undefined
  • 77.
    Lifetime of Variables Scoping 77 ●The lifetime of a variable starts when it is declared. ● Local variables are deleted when the function is completed. ● Global variables are deleted when you close the browser window.
  • 78.
  • 79.
    You can referto a variable declared later, without getting an exception.This concept is known as hoisting. 79
  • 80.
    Variable Hoisting 80 1. vardrink = 'coffee'; 2. 3. console.log(drink); // 'coffee' 4. console.log(food); // ? 5. 6. var food = 'pizza'; 7. 8. console.log(drink); // 'coffee' 9. console.log(food); // 'pizza' 1. var drink = 'coffee'; 2. 3. console.log(drink); // 'coffee' 4. console.log(food); // undefined 5. 6. var food = 'pizza'; 7. 8. console.log(drink); // 'coffee' 9. console.log(food); // 'pizza'
  • 81.
    Re-Declaring Variables 81 1. varfood = 'shusi'; 2. console.log(food); // 'shusi' 3. 4. var food; 5. console.log(food); // ? 1. var food = 'shusi'; 2. console.log(food); // 'shusi' 3. 4. var food; 5. console.log(food); // 'shusi'
  • 82.
    Misuse Hoisted Variable 82 1.function isWinner (player, others) { 2. var highest = 0; 3. 4. for (var i = 0, len = others.length; i < len; ++i) { 5. var player = others[i]; 6. 7. if (player.score > highest) { 8. highest = player.score; 9. } 10. } 11. 12. return player.score > highest; 13. }
  • 83.
    Syntax Error Withlet 83 1. let title; 2. let title; // ? 3. 4. function triple (number) { 5. let number; // ? 6. return number * 3; 7. } 8. 9. triple(100); 1. let title; 2. let title; // SyntaxError 3. 4. function triple (number) { 5. let number; // SyntaxError 6. return number * 3; 7. } 8. 9. triple(100);
  • 84.
    Reference Error Withlet 84 1. function sum (value1, value2) { 2. console.log(total); // ? 3. let total = value1 + value2; 4. } 5. 6. sum(100, 200); 1. function sum (value1, value2) { 2. console.log(total); // ReferenceError 3. let total = value1 + value2; 4. } 5. 6. sum(100, 200);
  • 85.
    Variable Lifecycle Usingvar Statement Variable Declarations Declaration phase Initialization phase Assignment phase 85 drink === undefined drink === 'coffee' Initialized state Assigned state drink = 'coffee' var drink = undefined
  • 86.
    Variable Lifecycle Usinglet Statement Variable Declarations Declaration phase Initialization phase Assignment phase 86 drink === undefined drink === 'coffee' Initialized state Assigned state drink = 'coffee' Uninitialized state let drink = undefined Accessing drink throws ReferenceError
  • 87.
    Declare all variablesat the beginning of a script. 87
  • 88.
    Always code asif the guy who ends up maintaining your code will be a violent psychopath who knows where you live. - Martin Golding 88
  • 89.
  • 90.
    References ● Introduction toJS ● JavaScript - Wikipedia ● JavaScript Fundamentals | Microsoft Docs ● JavaScript Guide - JavaScript | MDN ● JavaScript Tutorial | W3Schools Practical JavaScript Programming 90
  • 91.
    Reference Books ● JavaScript:The Good Parts ● Effective JavaScript 91 Practical JavaScript Programming