SlideShare a Scribd company logo
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

More Related Content

What's hot (20)

ES2015 workflows
ES2015 workflowsES2015 workflows
ES2015 workflows
Jarrod Overson
 
Ruby/Rails
Ruby/RailsRuby/Rails
Ruby/Rails
rstankov
 
Backbone js
Backbone jsBackbone js
Backbone js
rstankov
 
Why ruby
Why rubyWhy ruby
Why ruby
rstankov
 
QA for PHP projects
QA for PHP projectsQA for PHP projects
QA for PHP projects
Michelangelo van Dam
 
Elixir and Dialyzer, Types and Typespecs, using and understanding them
Elixir and Dialyzer, Types and Typespecs, using and understanding themElixir and Dialyzer, Types and Typespecs, using and understanding them
Elixir and Dialyzer, Types and Typespecs, using and understanding them
Dan Janowski
 
You code sucks, let's fix it
You code sucks, let's fix itYou code sucks, let's fix it
You code sucks, let's fix it
Rafael Dohms
 
5 Tips for Better JavaScript
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScript
Todd Anglin
 
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and JasmineRails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Raimonds Simanovskis
 
Essentials and Impactful Features of ES6
Essentials and Impactful Features of ES6Essentials and Impactful Features of ES6
Essentials and Impactful Features of ES6
Riza Fahmi
 
Headless Js Testing
Headless Js TestingHeadless Js Testing
Headless Js Testing
Brian Moschel
 
Advanced javascript
Advanced javascriptAdvanced javascript
Advanced javascript
Doeun KOCH
 
PHPSpec - the only Design Tool you need - 4Developers
PHPSpec - the only Design Tool you need - 4DevelopersPHPSpec - the only Design Tool you need - 4Developers
PHPSpec - the only Design Tool you need - 4Developers
Kacper Gunia
 
“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf
“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf
“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf
Rafael Dohms
 
async/await Revisited
async/await Revisitedasync/await Revisited
async/await Revisited
Riza Fahmi
 
Dollar symbol
Dollar symbolDollar symbol
Dollar symbol
Aaron Huang
 
Bottom Up
Bottom UpBottom Up
Bottom Up
Brian Moschel
 
Rails on Oracle 2011
Rails on Oracle 2011Rails on Oracle 2011
Rails on Oracle 2011
Raimonds Simanovskis
 
Design Patterns in PHP5
Design Patterns in PHP5 Design Patterns in PHP5
Design Patterns in PHP5
Wildan Maulana
 
Class-based views with Django
Class-based views with DjangoClass-based views with Django
Class-based views with Django
Simon Willison
 
Ruby/Rails
Ruby/RailsRuby/Rails
Ruby/Rails
rstankov
 
Backbone js
Backbone jsBackbone js
Backbone js
rstankov
 
Elixir and Dialyzer, Types and Typespecs, using and understanding them
Elixir and Dialyzer, Types and Typespecs, using and understanding themElixir and Dialyzer, Types and Typespecs, using and understanding them
Elixir and Dialyzer, Types and Typespecs, using and understanding them
Dan Janowski
 
You code sucks, let's fix it
You code sucks, let's fix itYou code sucks, let's fix it
You code sucks, let's fix it
Rafael Dohms
 
5 Tips for Better JavaScript
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScript
Todd Anglin
 
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and JasmineRails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Raimonds Simanovskis
 
Essentials and Impactful Features of ES6
Essentials and Impactful Features of ES6Essentials and Impactful Features of ES6
Essentials and Impactful Features of ES6
Riza Fahmi
 
Advanced javascript
Advanced javascriptAdvanced javascript
Advanced javascript
Doeun KOCH
 
PHPSpec - the only Design Tool you need - 4Developers
PHPSpec - the only Design Tool you need - 4DevelopersPHPSpec - the only Design Tool you need - 4Developers
PHPSpec - the only Design Tool you need - 4Developers
Kacper Gunia
 
“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf
“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf
“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf
Rafael Dohms
 
async/await Revisited
async/await Revisitedasync/await Revisited
async/await Revisited
Riza Fahmi
 
Design Patterns in PHP5
Design Patterns in PHP5 Design Patterns in PHP5
Design Patterns in PHP5
Wildan Maulana
 
Class-based views with Django
Class-based views with DjangoClass-based views with Django
Class-based views with Django
Simon Willison
 

Similar to Practical JavaScript Programming - Session 1/8 (20)

introduction to javascript concepts .ppt
introduction to javascript concepts .pptintroduction to javascript concepts .ppt
introduction to javascript concepts .ppt
ansariparveen06
 
gdscWorkShopJavascriptintroductions.pptx
gdscWorkShopJavascriptintroductions.pptxgdscWorkShopJavascriptintroductions.pptx
gdscWorkShopJavascriptintroductions.pptx
sandeshshahapur
 
fundamentals of JavaScript for students.ppt
fundamentals of JavaScript for students.pptfundamentals of JavaScript for students.ppt
fundamentals of JavaScript for students.ppt
dejen6
 
Basics of Javascript
Basics of JavascriptBasics of Javascript
Basics of Javascript
Universe41
 
JavaScript Core
JavaScript CoreJavaScript Core
JavaScript Core
François Sarradin
 
Java Script
Java ScriptJava Script
Java Script
Sarvan15
 
Java Script
Java ScriptJava Script
Java Script
Sarvan15
 
JavaScript ppt for introduction of javascripta
JavaScript ppt for introduction of javascriptaJavaScript ppt for introduction of javascripta
JavaScript ppt for introduction of javascripta
nehatanveer5765
 
Presentation JavaScript Introduction Data Types Variables Control Structure
Presentation JavaScript Introduction  Data Types Variables Control StructurePresentation JavaScript Introduction  Data Types Variables Control Structure
Presentation JavaScript Introduction Data Types Variables Control Structure
SripathiRavi1
 
js.pptx
js.pptxjs.pptx
js.pptx
SuhaibKhan62
 
Javascript
JavascriptJavascript
Javascript
Prashant Kumar
 
JS class slides (2016)
JS class slides (2016)JS class slides (2016)
JS class slides (2016)
Yves-Emmanuel Jutard
 
JavaScript_III.pptx
JavaScript_III.pptxJavaScript_III.pptx
JavaScript_III.pptx
rashmiisrani1
 
Handout - Introduction to Programming
Handout - Introduction to ProgrammingHandout - Introduction to Programming
Handout - Introduction to Programming
Cindy Royal
 
JS Class 2016
JS Class 2016JS Class 2016
JS Class 2016
Yves-Emmanuel Jutard
 
An introduction to javascript
An introduction to javascriptAn introduction to javascript
An introduction to javascript
tonyh1
 
JavaScript for impatient programmers.pdf
JavaScript for impatient programmers.pdfJavaScript for impatient programmers.pdf
JavaScript for impatient programmers.pdf
JoaqunFerrariIlusus
 
Unit 3-Javascript.pptx
Unit 3-Javascript.pptxUnit 3-Javascript.pptx
Unit 3-Javascript.pptx
AmanJha533833
 
JavaScript Lecture notes.pptx
JavaScript Lecture notes.pptxJavaScript Lecture notes.pptx
JavaScript Lecture notes.pptx
NishaRohit6
 
Unit II- Java Script, DOM JQuery (2).pptx
Unit II- Java Script, DOM JQuery (2).pptxUnit II- Java Script, DOM JQuery (2).pptx
Unit II- Java Script, DOM JQuery (2).pptx
SiddheshMhatre21
 
introduction to javascript concepts .ppt
introduction to javascript concepts .pptintroduction to javascript concepts .ppt
introduction to javascript concepts .ppt
ansariparveen06
 
gdscWorkShopJavascriptintroductions.pptx
gdscWorkShopJavascriptintroductions.pptxgdscWorkShopJavascriptintroductions.pptx
gdscWorkShopJavascriptintroductions.pptx
sandeshshahapur
 
fundamentals of JavaScript for students.ppt
fundamentals of JavaScript for students.pptfundamentals of JavaScript for students.ppt
fundamentals of JavaScript for students.ppt
dejen6
 
Basics of Javascript
Basics of JavascriptBasics of Javascript
Basics of Javascript
Universe41
 
Java Script
Java ScriptJava Script
Java Script
Sarvan15
 
Java Script
Java ScriptJava Script
Java Script
Sarvan15
 
JavaScript ppt for introduction of javascripta
JavaScript ppt for introduction of javascriptaJavaScript ppt for introduction of javascripta
JavaScript ppt for introduction of javascripta
nehatanveer5765
 
Presentation JavaScript Introduction Data Types Variables Control Structure
Presentation JavaScript Introduction  Data Types Variables Control StructurePresentation JavaScript Introduction  Data Types Variables Control Structure
Presentation JavaScript Introduction Data Types Variables Control Structure
SripathiRavi1
 
Handout - Introduction to Programming
Handout - Introduction to ProgrammingHandout - Introduction to Programming
Handout - Introduction to Programming
Cindy Royal
 
An introduction to javascript
An introduction to javascriptAn introduction to javascript
An introduction to javascript
tonyh1
 
JavaScript for impatient programmers.pdf
JavaScript for impatient programmers.pdfJavaScript for impatient programmers.pdf
JavaScript for impatient programmers.pdf
JoaqunFerrariIlusus
 
Unit 3-Javascript.pptx
Unit 3-Javascript.pptxUnit 3-Javascript.pptx
Unit 3-Javascript.pptx
AmanJha533833
 
JavaScript Lecture notes.pptx
JavaScript Lecture notes.pptxJavaScript Lecture notes.pptx
JavaScript Lecture notes.pptx
NishaRohit6
 
Unit II- Java Script, DOM JQuery (2).pptx
Unit II- Java Script, DOM JQuery (2).pptxUnit II- Java Script, DOM JQuery (2).pptx
Unit II- Java Script, DOM JQuery (2).pptx
SiddheshMhatre21
 
Ad

More from Wilson Su (8)

Mirage For Beginners
Mirage For BeginnersMirage For Beginners
Mirage For Beginners
Wilson Su
 
NestJS
NestJSNestJS
NestJS
Wilson Su
 
The Jira How-To Guide
The Jira How-To GuideThe Jira How-To Guide
The Jira How-To Guide
Wilson Su
 
The Future of Web Development
The Future of Web DevelopmentThe Future of Web Development
The Future of Web Development
Wilson Su
 
Web Usability
Web UsabilityWeb Usability
Web Usability
Wilson Su
 
Puppeteer - Headless Chrome Node API
Puppeteer - Headless Chrome Node APIPuppeteer - Headless Chrome Node API
Puppeteer - Headless Chrome Node API
Wilson Su
 
Practical JavaScript Programming - Session 3/8
Practical JavaScript Programming - Session 3/8Practical JavaScript Programming - Session 3/8
Practical JavaScript Programming - Session 3/8
Wilson Su
 
Practical JavaScript Programming - Session 2/8
Practical JavaScript Programming - Session 2/8Practical JavaScript Programming - Session 2/8
Practical JavaScript Programming - Session 2/8
Wilson Su
 
Mirage For Beginners
Mirage For BeginnersMirage For Beginners
Mirage For Beginners
Wilson Su
 
The Jira How-To Guide
The Jira How-To GuideThe Jira How-To Guide
The Jira How-To Guide
Wilson Su
 
The Future of Web Development
The Future of Web DevelopmentThe Future of Web Development
The Future of Web Development
Wilson Su
 
Web Usability
Web UsabilityWeb Usability
Web Usability
Wilson Su
 
Puppeteer - Headless Chrome Node API
Puppeteer - Headless Chrome Node APIPuppeteer - Headless Chrome Node API
Puppeteer - Headless Chrome Node API
Wilson Su
 
Practical JavaScript Programming - Session 3/8
Practical JavaScript Programming - Session 3/8Practical JavaScript Programming - Session 3/8
Practical JavaScript Programming - Session 3/8
Wilson Su
 
Practical JavaScript Programming - Session 2/8
Practical JavaScript Programming - Session 2/8Practical JavaScript Programming - Session 2/8
Practical JavaScript Programming - Session 2/8
Wilson Su
 
Ad

Recently uploaded (20)

Software Engineering Project Presentation Tanisha Tasnuva
Software Engineering Project Presentation Tanisha TasnuvaSoftware Engineering Project Presentation Tanisha Tasnuva
Software Engineering Project Presentation Tanisha Tasnuva
tanishatasnuva76
 
Video Games and Artificial-Realities.pptx
Video Games and Artificial-Realities.pptxVideo Games and Artificial-Realities.pptx
Video Games and Artificial-Realities.pptx
HadiBadri1
 
Webinar On Steel Melting IIF of steel for rdso
Webinar  On Steel  Melting IIF of steel for rdsoWebinar  On Steel  Melting IIF of steel for rdso
Webinar On Steel Melting IIF of steel for rdso
KapilParyani3
 
ISO 4020-6.1- Filter Cleanliness Test Rig Catalogue.pdf
ISO 4020-6.1- Filter Cleanliness Test Rig Catalogue.pdfISO 4020-6.1- Filter Cleanliness Test Rig Catalogue.pdf
ISO 4020-6.1- Filter Cleanliness Test Rig Catalogue.pdf
FILTRATION ENGINEERING & CUNSULTANT
 
Enhanced heart disease prediction using SKNDGR ensemble Machine Learning Model
Enhanced heart disease prediction using SKNDGR ensemble Machine Learning ModelEnhanced heart disease prediction using SKNDGR ensemble Machine Learning Model
Enhanced heart disease prediction using SKNDGR ensemble Machine Learning Model
IRJET Journal
 
ENERGY STORING DEVICES-Primary Battery.pdf
ENERGY STORING DEVICES-Primary Battery.pdfENERGY STORING DEVICES-Primary Battery.pdf
ENERGY STORING DEVICES-Primary Battery.pdf
TAMILISAI R
 
May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...
May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...
May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...
sebastianku31
 
Highway Engineering - Pavement materials
Highway Engineering - Pavement materialsHighway Engineering - Pavement materials
Highway Engineering - Pavement materials
AmrutaBhosale9
 
ISO 10121-Flat Sheet Media-Catalouge-Final.pdf
ISO 10121-Flat Sheet Media-Catalouge-Final.pdfISO 10121-Flat Sheet Media-Catalouge-Final.pdf
ISO 10121-Flat Sheet Media-Catalouge-Final.pdf
FILTRATION ENGINEERING & CUNSULTANT
 
What is dbms architecture, components of dbms architecture and types of dbms ...
What is dbms architecture, components of dbms architecture and types of dbms ...What is dbms architecture, components of dbms architecture and types of dbms ...
What is dbms architecture, components of dbms architecture and types of dbms ...
cyhuutjdoazdwrnubt
 
Influence line diagram in a robust model
Influence line diagram in a robust modelInfluence line diagram in a robust model
Influence line diagram in a robust model
ParthaSengupta26
 
Fresh concrete Workability Measurement
Fresh concrete  Workability  MeasurementFresh concrete  Workability  Measurement
Fresh concrete Workability Measurement
SasiVarman5
 
UNIT-1-PPT-Introduction about Power System Operation and Control
UNIT-1-PPT-Introduction about Power System Operation and ControlUNIT-1-PPT-Introduction about Power System Operation and Control
UNIT-1-PPT-Introduction about Power System Operation and Control
Sridhar191373
 
MODULE 4 BUILDING PLANNING AND DESIGN SY BTECH HVAC SYSTEM IN BUILDING
MODULE 4 BUILDING PLANNING AND DESIGN SY BTECH HVAC SYSTEM IN BUILDINGMODULE 4 BUILDING PLANNING AND DESIGN SY BTECH HVAC SYSTEM IN BUILDING
MODULE 4 BUILDING PLANNING AND DESIGN SY BTECH HVAC SYSTEM IN BUILDING
Dr. BASWESHWAR JIRWANKAR
 
All about the Snail Power Catalog Product 2025
All about the Snail Power Catalog  Product 2025All about the Snail Power Catalog  Product 2025
All about the Snail Power Catalog Product 2025
kstgroupvn
 
HVAC Air Filter Equipment-Catalouge-Final.pdf
HVAC Air Filter Equipment-Catalouge-Final.pdfHVAC Air Filter Equipment-Catalouge-Final.pdf
HVAC Air Filter Equipment-Catalouge-Final.pdf
FILTRATION ENGINEERING & CUNSULTANT
 
"The Enigmas of the Riemann Hypothesis" by Julio Chai
"The Enigmas of the Riemann Hypothesis" by Julio Chai"The Enigmas of the Riemann Hypothesis" by Julio Chai
"The Enigmas of the Riemann Hypothesis" by Julio Chai
Julio Chai
 
ISO 4548-9 Oil Filter Anti Drain Catalogue.pdf
ISO 4548-9 Oil Filter Anti Drain Catalogue.pdfISO 4548-9 Oil Filter Anti Drain Catalogue.pdf
ISO 4548-9 Oil Filter Anti Drain Catalogue.pdf
FILTRATION ENGINEERING & CUNSULTANT
 
Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...
Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...
Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...
Mohamed905031
 
Influence line diagram for truss in a robust
Influence line diagram for truss in a robustInfluence line diagram for truss in a robust
Influence line diagram for truss in a robust
ParthaSengupta26
 
Software Engineering Project Presentation Tanisha Tasnuva
Software Engineering Project Presentation Tanisha TasnuvaSoftware Engineering Project Presentation Tanisha Tasnuva
Software Engineering Project Presentation Tanisha Tasnuva
tanishatasnuva76
 
Video Games and Artificial-Realities.pptx
Video Games and Artificial-Realities.pptxVideo Games and Artificial-Realities.pptx
Video Games and Artificial-Realities.pptx
HadiBadri1
 
Webinar On Steel Melting IIF of steel for rdso
Webinar  On Steel  Melting IIF of steel for rdsoWebinar  On Steel  Melting IIF of steel for rdso
Webinar On Steel Melting IIF of steel for rdso
KapilParyani3
 
Enhanced heart disease prediction using SKNDGR ensemble Machine Learning Model
Enhanced heart disease prediction using SKNDGR ensemble Machine Learning ModelEnhanced heart disease prediction using SKNDGR ensemble Machine Learning Model
Enhanced heart disease prediction using SKNDGR ensemble Machine Learning Model
IRJET Journal
 
ENERGY STORING DEVICES-Primary Battery.pdf
ENERGY STORING DEVICES-Primary Battery.pdfENERGY STORING DEVICES-Primary Battery.pdf
ENERGY STORING DEVICES-Primary Battery.pdf
TAMILISAI R
 
May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...
May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...
May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...
sebastianku31
 
Highway Engineering - Pavement materials
Highway Engineering - Pavement materialsHighway Engineering - Pavement materials
Highway Engineering - Pavement materials
AmrutaBhosale9
 
What is dbms architecture, components of dbms architecture and types of dbms ...
What is dbms architecture, components of dbms architecture and types of dbms ...What is dbms architecture, components of dbms architecture and types of dbms ...
What is dbms architecture, components of dbms architecture and types of dbms ...
cyhuutjdoazdwrnubt
 
Influence line diagram in a robust model
Influence line diagram in a robust modelInfluence line diagram in a robust model
Influence line diagram in a robust model
ParthaSengupta26
 
Fresh concrete Workability Measurement
Fresh concrete  Workability  MeasurementFresh concrete  Workability  Measurement
Fresh concrete Workability Measurement
SasiVarman5
 
UNIT-1-PPT-Introduction about Power System Operation and Control
UNIT-1-PPT-Introduction about Power System Operation and ControlUNIT-1-PPT-Introduction about Power System Operation and Control
UNIT-1-PPT-Introduction about Power System Operation and Control
Sridhar191373
 
MODULE 4 BUILDING PLANNING AND DESIGN SY BTECH HVAC SYSTEM IN BUILDING
MODULE 4 BUILDING PLANNING AND DESIGN SY BTECH HVAC SYSTEM IN BUILDINGMODULE 4 BUILDING PLANNING AND DESIGN SY BTECH HVAC SYSTEM IN BUILDING
MODULE 4 BUILDING PLANNING AND DESIGN SY BTECH HVAC SYSTEM IN BUILDING
Dr. BASWESHWAR JIRWANKAR
 
All about the Snail Power Catalog Product 2025
All about the Snail Power Catalog  Product 2025All about the Snail Power Catalog  Product 2025
All about the Snail Power Catalog Product 2025
kstgroupvn
 
"The Enigmas of the Riemann Hypothesis" by Julio Chai
"The Enigmas of the Riemann Hypothesis" by Julio Chai"The Enigmas of the Riemann Hypothesis" by Julio Chai
"The Enigmas of the Riemann Hypothesis" by Julio Chai
Julio Chai
 
Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...
Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...
Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...
Mohamed905031
 
Influence line diagram for truss in a robust
Influence line diagram for truss in a robustInfluence line diagram for truss in a robust
Influence line diagram for truss in a robust
ParthaSengupta26
 

Practical JavaScript Programming - Session 1/8

  • 2. 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. 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 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
  • 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 JavaScript Do? ✓ Visual effects ✓ Simple calculations ✓ User data manipulation ✓ Data validation ✓ Data storage ✓ Dynamicaly change page structure ✓ Get data from server Introductions 10
  • 12. 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
  • 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
  • 19. Put scripts at the bottom of document body. 19
  • 20. 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
  • 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
  • 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
  • 28. Web Browser Engines Browser Compatibility Trident EdgeHTML Gecko Presto WebKit Blink ~2013 KHTML ~2013 28
  • 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 verify that JavaScript works across multiple browsers. 31
  • 33. JavaScript IDEs 33 Development Tools Visual Studio Code Sublime Text /* NOT LIMITED TO THE ABOVE */
  • 34. Debugging JavaScript With Browser DevTools 34 Development Tools Google Chrome Mozilla Firefox /* NOT LIMITED TO THE ABOVE */
  • 35. Debugging JavaScript With Online Code Editor 35 Development Tools JS Bin CodePen /* NOT LIMITED TO THE ABOVE */
  • 39. 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.
  • 40. 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
  • 41. 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
  • 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 Object Function Boolean Number String Date Math RegExp Array Map Set Promise JSON Error SyntaxError ReferenceError ... 44
  • 45. 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
  • 46. 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'
  • 47. Do not use wrapper object! 47
  • 48. 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
  • 50. JavaScript accepts both double 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. 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'
  • 54. 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
  • 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
  • 57. 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
  • 58. Dynamically Typed 58 1. var something = '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-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
  • 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 that a variable is used as a number before adding it to another one. 67
  • 68. 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
  • 70. 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. }
  • 71. 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. }
  • 72. A variable declared outside a function, becomes global. 72
  • 73. 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() {}
  • 74. Global variables can be retrieved without getting them from window object. 74
  • 75. Setting and Getting Global Variables 75 1. window.title = 'JavaScript'; 2. console.log(window.title); // 'JavaScript' 3. console.log(title); // 'JavaScript'
  • 76. 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
  • 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.
  • 79. You can refer to a variable declared later, without getting an exception.This concept is known as hoisting. 79
  • 80. 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'
  • 81. 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'
  • 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 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);
  • 84. 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);
  • 85. 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
  • 86. 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
  • 87. Declare all variables at the beginning of a script. 87
  • 88. 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
  • 90. References ● Introduction to JS ● 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