Practical JavaScript Programming - Session 1/8

Practical JavaScript Programming
Session 1
Wilson Su

Outline
2
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

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

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>
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 */
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

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 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>
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!');

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

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

Debugging JavaScript With Online Code Editor
35
Development Tools
JS Bin CodePen

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

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

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';
4.console.log(str2 === str2); // ?
5.
6.// String Object
7.var str3 = new String('hello');
45
1.// Primitive Type
4.console.log(str2 === str2); // true
5.
6.// String Object
1.// Primitive Type
4.console.log(str2 === str2); // true
5.
6.// String Object
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';
7.
8. pet[0] = 'f';

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

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

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 () {}'
5.
6. String([]); // ''
7. String([100]); // ?
8. String([100, 200]); // ?
5.
6. String([]); // ''
7. String([100]); // '100'
8. String([100, 200]); // ?
5.
6. String([]); // ''
7. String([100]); // '100'
8. String([100, 200]); // '100,200'

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.
1. Number('3.14'); // 3.14
2. Number(''); // 0
3. Number(' '); // 0
4. Number('11 22'); // NaN
5.
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
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

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
3. Boolean(-1); // true
4.
6. Boolean(' '); // ?
8. Boolean('0'); // ?
4.
6. Boolean(' '); // true
8. Boolean('0'); // ?
4.
6. Boolean(' '); // 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
3. +'10'; // 10
4. -'20'; // -20
5. '30' + 5; // '305'
6. 6 + 7 + '400'; // ?
7. 8 + true; // ?
9. 2 + null; // ?
10. 3 + NaN; // NaN
3. +'10'; // 10
4. -'20'; // -20
5. '30' + 5; // '305'
6. 6 + 7 + '400'; // '13400'
7. 8 + true; // ?
9. 2 + null; // ?
10. 3 + NaN; // NaN
3. +'10'; // 10
4. -'20'; // -20
5. '30' + 5; // '305'
6. 6 + 7 + '400'; // '13400'
7. 8 + true; // 9
9. 2 + null; // ?
10. 3 + NaN; // NaN
3. +'10'; // 10
4. -'20'; // -20
5. '30' + 5; // '305'
6. 6 + 7 + '400'; // '13400'
7. 8 + true; // 9
9. 2 + null; // 2
10. 3 + NaN; // NaN

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

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.
11. console.log(drink); // ?
12. }
1. function dinner () {
2. var food = 'noodle';
3.
4. if (true) {
5. var food = 'hamburger';
6. var drink = 'tea';
8. }
9.
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';
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';
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';
3. console.log(window.title); // ?
1. let 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.

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.
9. console.log(food); // 'pizza'
1. var drink = 'coffee';
2.
4. console.log(food); // undefined
5.
6. var food = 'pizza';
7.
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';
3.
4. var food;

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
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
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

References
● Introduction to JS
● JavaScript - Wikipedia
● JavaScript Fundamentals | Microsoft Docs
● JavaScript Guide - JavaScript | MDN
● JavaScript Tutorial | W3Schools
90

Reference Books
● JavaScript: The Good Parts
● Effective JavaScript
91

Practical JavaScript Programming - Session 1/8

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Practical JavaScript Programming - Session 1/8

Ähnlich wie Practical JavaScript Programming - Session 1/8 (20)

Mehr von Wilson Su

Mehr von Wilson Su (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Practical JavaScript Programming - Session 1/8