Practical JavaScript Programming - Session 5/8

Practical JavaScript Programming
Session 5
Wilson Su

2
https://www.slideshare.net/sweekson/

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

Outline
4
Chapter 9.
● Form Elements
● Form Events
● Access Form Data
● Validations
● Custom Components
Forms
Chapter 10.
AJAX
● What’s AJAX?
● Handle Request
● Security
● Practices
● Promise
● Server-sent Events
● WebSocket

HTML Form Elements
7
1. <input type="text" value="initial value"/>
2. <input type="password"/>
3. <input type="checkbox" value="abc" checked/>
4. <input type="radio" value="xyz" checked/>
5. <input type="file" multiple/>
6. <input type="hidden"/>
7. <select multiple>
8. <option value="1">1</option>
9. <option value="2" selected>2</option>
11. </select>
12. <textarea cols="30" rows="5">initial value</textarea>

HTML Buttons
8
1. <input type="button" value="Action"/>
2. <input type="submit" value="Submit"/>
3. <input type="reset" value="Reset"/>
4. <button type="button">Action</button>
5. <button type="submit">Submit</button>
6. <button type="reset">Reset</button>

HTML <form> Element With GET Method
9
1. <form action="/search" method="get">
2. <input name="query" type="text" value="keywords"/>
3. <button type="submit">Search</button>
4. </form>
5.

HTML <form> Element With POST Method
10
1. <form action="/login" method="post">
2. <label for="user">Username:</label>
3. <input id="user" name="user" type="text" value="guest"/>
4. <label for="pass">Password:</label>
5. <input id="pass" name="pass" type="password" value="12345"/>
6. <button type="submit">Sign In</button>
7. </form>
8.

Compare GET VS. POST
11
Form Elements
GET POST
Requests data from a specified
resource
Submits data to be processed
to a specified resource
Can be bookmarked Cannot be bookmarkedBookmarked
Can be cached Not cachedCached
Data is visible to everyone in the URL Data is not displayed in the URLVisibility
Harmless Data will be re-submittedBACK button / Reload
The length of a URL is limited No restrictionsMax URL length

Event Delegator
13
1. function delegator (elem) {
2. return function (type, selectors, fn, capture) {
3. function matches (target) {
4. return selectors.some(v => target.matches(v));
5. }
6. function listener (e) {
7. matches(e.target) && fn.call(e.target, e);
8. }
9. selectors = selectors.split(/,s*/g);
10. elem.addEventListener(type, listener, capture);
11. return listener;
12. };
13. }

HTML <input> Events
14
1. var query = document.querySelector('input#query');
2. var logger = function (e) { console.log(e.type); }
3. query.addEventListener('focus', logger);
4. query.addEventListener('input', logger);
5. query.addEventListener('blur', logger);
6. query.addEventListener('change', logger);
7. query.addEventListener('keydown', logger);
8. query.addEventListener('keypress', logger);
9. query.addEventListener('keyup', logger);
10. /* When the input has focus, and user typed one letter */
11. // 'focus', 'keydown', 'keypress', 'input', 'keyup'
12. /* When the input has lost focus */
13. // 'change', 'blur'

Focus Events
15
1. <input id="name" type="text"/>
2. <script>
3. var name = document.querySelector('#name');
4. name.addEventListener('focus', (e) => console.log(e.type));
5. name.addEventListener('blur', (e) => console.log(e.type));
6. name.addEventListener('focusin', (e) => console.log(e.type));
7. name.addEventListener('focusout', (e) => console.log(e.type));
8. /* When the input has focus */
9. // 'focus', 'focusin'
10. /* When the input has lost focus */
11. // 'blur', 'focusout'
12. </script>

The input focus and blur event
does not bubble.
16

The focus and blur Event Does Not Bubble
17
1. <form id="edit"><input id="address" type="text"/></form>
2. <script>
3. var edit = document.querySelector('#edit');
4. var name = document.querySelector('#address');
5. var onFocus = function (e) {
6. console.log(e.currentTarget.tagName, e.type);
7. };
8. edit.addEventListener('focus', onFocus);
9. edit.addEventListener('blur', onFocus);
10. name.addEventListener('focus', onFocus);
11. name.addEventListener('blur', onFocus);
12. // 'INPUT' 'focus', 'INPUT' 'blur'
13. </script>

Selecting Text on Focus
18
1. <input type="text" value="Hello"/>
2. <textarea cols="30" rows="5">Aloha</textarea>
3. <script>
4. var body = document.body;
5. var selectors = 'input[type="text"], textarea';
6. var onFocus = function (e) { e.target.select(); };
7. delegator(body)('focusin', selectors, onFocus);
8. delegator(body)('focus', selectors, onFocus, true);
9. </script>

Filtering a List Using input Event
19
1. <input id="filter" type="text"/>
2. <div id="output"></div>
3. <script>
4. var filter = document.querySelector('#filter');
5. var output = document.querySelector('#output');
6. var items = ['JS', 'JAVA', 'PHP', 'NODEJS'];
7. filter.addEventListener('input', function (e) {
8. output.textContent = items.filter(item => {
9. return item.indexOf(e.target.value) > -1;
10. });
11. });
12. </script>

HTML Form submit and reset Events
20
1. <form id="atm" action="/transfer">
2. <input id="pass" type="password"/>
3. <button type="submit">Enter</button>
4. <button type="reset">Clear</button>
5. </form>
6. <script>
7. var atm = document.querySelector('#atm');
8. var logger = function (e) { console.log(e.type); };
9. atm.addEventListener('submit', logger);
10. atm.addEventListener('reset', logger);
11. // 'reset', 'submit'
12. </script>

Assigning Default Values
22
1. <form action="/order" method="post">
2. Amount: <input id="amount" type="text"/>
3. <input id="dm" type="checkbox"/> Send me DM
4. <button type="submit">Save</button>
5. <button type="reset">Reset</button>
6. </form>
7. <script>
8. document.querySelector('#amount').value = 0;
9. document.querySelector('#dm').checked = true;
10. /* The input.value will be reset to empty after the Reset
button has been clicked. Use input.defaultValue to assign a
default value. Use input.defaultChecked for checkbox and radio
*/
11. </script>

Getting and Setting Values of Input Text and Textarea
23
1. <input id="name" type="text" value="Ben"/>
2. <textarea id="intro" cols="10" rows="5">Ben is a RD</textarea>
3. <script>
4. var name = document.querySelector('#name');
5. var intro = document.querySelector('#intro');
6. console.log(name.value); // 'Ben'
7. console.log(intro.value); // 'Ben is a RD'
8. name.value = 'Vicky';
9. intro.value = 'Vicky is a VD';
10. </script>

Getting Values of Checked Checkboxes
24
1. <input name="order" id="1" type="checkbox" value="50" checked>
2. <label for="1">French fries</label>
3. <input name="order" id="2" type="checkbox" value="30" checked>
4. <label for="2">Sprite</label>
5. <script>
6. var selector = '[name="order"]:checked';
7. var selected = document.querySelectorAll(selector);
8. var values = [...selected].map(elem => elem.value);
9. var total = values.reduce((a, b) => +a + +b);
10. console.log(total); // 80
11. </script>

Setting checked to a Checkbox
25
1. <input id="enabled" type="checkbox" checked/>
2. <script>
3. var enabled = document.querySelector('#enabled');
4. console.log(enabled.value); // 'on'
5. console.log(enabled.hasAttribute('checked')); // true
6. console.log(enabled.checked); // true
7.
8. enabled.checked = false;
9. console.log(enabled.hasAttribute('checked')); // true
10. console.log(enabled.getAttribute('checked')); // ''
11. </script>

Getting and Setting Value of Radio Button Group
26
1. <form name="profile">
2. <input name="gender" type="radio" value="M" checked/> Male
3. <input name="gender" type="radio" value="F"/> Female
4. </form>
5. <script>
6. var selector = '[name="gender"]:checked';
7. var selected = document.querySelector(selector);
8. console.log(selected.value); // 'M'
9. console.log(document.forms.profile.gender.value); // 'M'
10. document.forms.profile.gender.value = 'F';
11. </script>

Getting Selected Value of a Select
27
1. <select id="lang">
2. <option value="en-US">English</option>
3. <option value="zh-TW" selected>繁體中文</option>
4. </select>
5. <script>
6. var lang = document.querySelector('#lang');
7. var options = lang.options;
8. console.log(lang.value); // 'zh-TW'
9. console.log(lang.selectedIndex); // 1
10. console.log(options[lang.selectedIndex].text); // '繁體中文'
11. lang.value = 'en-US';
12. console.log(options[1].selected); // false
13. </script>

Getting Selected Values of a Multiple Select
28
1. <select id="beverage" multiple>
2. <option value="tea" selected>Tea</option>
3. <option value="soda">Soda</option>
4. <option value="coffee" selected>Coffee</option>
5. </select>
6. <script>
7. var beverage = document.querySelector('#beverage');
8. var options = drink.options;
9. var selected = [...options].filter(o => o.selected);
10. var values = selected.map(o => o.value);
11. console.log(values); // (2) ['tea', 'coffee']
12. </script>

Serializing Form Data - Snippet 1/2
29
1. <form id="edit">
2. <input type="text" name="text" value="1"/>
3. <input type="checkbox" name="checkbox" value="2" checked/>
4. <input type="checkbox" name="checkbox" value="3" checked/>
5. <input type="radio" name="radio" value="4"/>
6. <input type="radio" name="radio" value="5" checked/>
7. <select name="select">
9. <option value="7" selected>7</option>
10. </select>
11. <textarea name="textarea" cols="30" rows="5">8</textarea>
12. <button type="submit">Submit</button>
13. </form>

Serializing Form Data - Snippet 2/2
30
1. function serialize (form) {
2. var key, val, output = [...form.elements].map(elem => {
3. key = elem.name, val = elem.value;
4. if (elem.type === 'checkbox' || elem.type === 'radio') {
5. val = elem.checked ? val : null;
6. }
7. if (!key || val === null) { return false; }
8. return `${key}=${val}`;
9. });
10. return output.filter(v => v).join('&');
11. }
12. console.log(serialize(document.querySelector('#edit')));
13. // 'text=1&checkbox=2&checkbox=3&radio=5&select=7&textarea=8'

Disable browser default
validations.
32

HTML <form> novalidate Attribute
33
1. <form action="/login" method="post" novalidate>
2. Username: <input name="user" type="text" required/>
3. Password: <input name="pass" type="password" required/>
5. </form>

Checking Required Fields
34
1. <form id="login" action="/login" method="post" novalidate>
2. Username: <input name="user" type="text" required/>
3. Password: <input name="pass" type="password" required/>
5. </form>
6. <script>
7. var login = document.querySelector('#login'), required;
8. login.addEventListener('submit', function (e) {
9. required = document.querySelectorAll(':required');
10. if ([...required].filter(el => !el.value).length) {
11. e.preventDefault();
12. }
13. });
14. </script>

Preventing User From Typing Non-numeric Values
35
1. <input id="phone" type="text"/>
2. <script>
3. var phone = document.querySelector('#phone');
4. phone.addEventListener('keypress', function (e) {
5. if (e.key && !/^[0-9]+$/.test(e.key)) {
7. }
8. });
9. </script>

Preventing Form Submission Using onsubmit Attribute
36
1. <form action="/login" onsubmit="return onSignin(event);">
2. Username: <input id="user" type="text"/>
3. Password: <input id="pass" type="password"/>
5. </form>
6. <script>
7. var user = document.querySelector('#user');
8. var pass = document.querySelector('#pass');
9. function onSignin (e) {
10. return !!user.value && !!pass.value;
11. }
12. </script>

Preventing Form Submission Using Event Handler
37
1. <form id="login" action="/login">
2. Username: <input id="user" type="text"/>
3. Password: <input id="pass" type="password"/>
5. </form>
6. <script>
7. var login = document.querySelector('#login');
8. var user = document.querySelector('#user');
9. var pass = document.querySelector('#pass');
10. login.addEventListener('submit', function onSignin (e) {
11. (!user.value || !pass.value) && e.preventDefault();
12. });
13. </script>

Combo Box
39
Custom Components
A combo box allows the user to type in a
single-line input to limit the search, and select
an item from a list of matched options.
Combo box interaction specs ( incomplete ) :
● Click the caret button to open options
● Type keywords to filter options
● Arrow buttons to highlight an option
● Press enter to set value with the
highlighted option
● Click cancel button to clear search

40
Date Picker
The date picker contains the date input field
and the calendar view. Users can either use
the input field to type a date or by selecting a
date in the calendar.
Date picker interaction specs ( incomplete ) :
● Focus input to open a canlendar
● Press keyboard arrows to switch year,
month, and date
● Click arrows to switch months
● Click a date to set value
Custom Components

AJAX
43
● AJAX is an acronym for Asynchronous
JavaScript and XML
● It is a web technique that allows for more
interactivity by making web pages that
fetch data in the background and alter
themselves without reloading the entire
page.
● A user can continue to use the
application while the client program
requests information from the server in
the background.
What’s AJAX?

A Traditional Web Application
44
What’s AJAX?
Client Server
User Interface Web Server
Data Beckend
HTTP Request
HTML + CSS + JS

An AJAX Web Application
45
What’s AJAX?
User Interface Web Server
Data BeckendAJAX Engine
Client Server
HTTP Request
JS Call Data
Data
(XML / TEXT / HTML / JSON)

Making an AJAX Request
47
1. var xhr = new XMLHttpRequest();
2. xhr.onreadystatechange = function () {
3. if (xhr.readyState === xhr.DONE && xhr.status === 200) {
4. console.log(xhr.responseText);
5. // <button id="{{id}}" type="button">{{action}}</button>
6. }
7. };
8. xhr.open('get', '/templates/button.html', true);
9. xhr.send();

Making a Synchronous Request
48
2. xhr.open('GET', '/data/cars.json', false);
3. xhr.send();
5. // '["audi","benz","bmw"]'

Synchronous XMLHttpRequest
makes the JavaScript stop
executing until the server
response is ready. If the server
is busy or slow, the application
will hang or stop.
49

Wrapping XMLHttpRequest
50
1. function request (method, url, callback) {
4. if (xhr.readyState === xhr.DONE && xhr.status === 200) {
5. callback instanceof Function && callback(this);
6. }
7. };
8. xhr.open(method, url, true);
9. return xhr;
10. }
11. /* Usage */
12. // request('get', '/data/cars.json', (xhr) => { … }).send();

Handling the Server Response
51
1. request('get', '/data/numbers.json', function (xhr) {
2. console.log(xhr.status); // 200
3. console.log(xhr.statusText); // 'OK'
4. console.log(xhr.responseText); // '[100,200,300]'
5. console.log(xhr.getResponseHeader('Content-type'));
6. // 'application/json'
7. })
8. .send();

Working with XML Data
52
1. /* Given a XML file 'food.xml' as follows:
2. <?xml version="1.0" encoding="UTF-8"?>
3. <root><food>Pizza</food><food>Bread</food></root>
4. */
5. request('get', '/data/food.xml', function (xhr) {
6. var nodes = xhr.responseXML.getElementsByTagName('food');
7. var data = [...nodes].map(node => node.textContent);
8. console.log(data); // (2) ['Pizza', 'Bread']
9. })
10. .send();

Using POST Method in XMLHTTPRequest
53
1. var item = 'item=iphone';
2. var amount = 'amount=99';
3. var params = [item, amount].join('&');
4. var contentType = 'application/x-www-form-urlencoded';
5. var xhr = request('post', '/order', function (xhr) {
7. // '{"data":{"item":"iphone","amount":"99"}}'
8. });
9. xhr.setRequestHeader('Content-type', contentType);
10. xhr.send(params);

Encoding a URI Component
54
1. var hello = '你好';
2. var param = 'text=' + encodeURIComponent(hello);
3. var url = '/echo?' + param;
4. request('get', url, function (xhr) {
5. console.log(xhr.responseText); // '你好'
6. })
7. .send();

Uploading a File
55
1. <input id="file" type="file"/>
2. <script>
3. var file = document.querySelector('#file').files[0];
4. var data = new FormData();
5. var xhr = request('post', '/upload');
6. data.append('target', 'images');
7. data.append('file', file, 'sky.jpg');
8. xhr.send(data);
9. </script>

Monitoring Progress of a File Upload
56
1. var file = document.querySelector('#file').files[0];
3. var xhr = request('post', '/upload');
4. data.append('file', file);
5. xhr.upload.addEventListener('progress', function (e) {
6. if (e.lengthComputable) {
7. console.log(Math.floor(e.loaded / e.total * 100));
8. }
9. });
10. xhr.send(data);

AJAX requests
are forbidden by default
by the same-origin policy.
58

URL Outcome Reason
http://www.abc.com/about/contact.html Success Same protocol, host and port
http://www.abc.com/service/training.html Success Same protocol, host and port
https://www.abc.com/member/login.html Failure Different protocol
http://www.abc.com:8080/partners.html Failure Different port
http://abc.com/blog/tags.html Failure Different host
Same-origin Policy
59
The same-origin policy restricts how a document or script loaded from one
origin can interact with a resource from another origin.
The following table gives examples of origin comparisons to the URL
http://www.abc.com/about/index.html:
Security

Cross-Origin Resource Sharing
CORS is a system, consisting of transmitting HTTP headers, that
determines whether to block or fulfill requests for restricted resources on a
web page from another domain outside the domain from which the
resource originated.
To allow any resource to access your resource, you can specify:
Access-Control-Allow-Origin: *
To allow https://www.abc.com to access your resource, you can specify:
Access-Control-Allow-Origin: https://www.abc.com
60
Security

JSON with Padding
61
JSONP is used to request data from a server residing in a different domain
than the client.
JSONP
Client
Server
<script>function fn (data) { … }</script>
<script src="https://api.su.com/users/9?callback=fn"></script>
response.setHeader('Content-type', 'text/javascript');
response.send('fn({ "id": 9, "name": "Kyle" })');

Polling
63
1. function Polling (options) {
2. this.url = options.url;
3. this.method = options.method || 'get';
4. this.callback = options.callback || (() => {});
5. this.delay = options.delay || 1000;
6. this.start();
7. }
8. Polling.prototype.start = function () {
9. setTimeout(() => {
10. request(this.method, this.url, this.callback).send();
11. this.start();
12. }, this.delay);
13. };

Checking Username Availability
64
1. var account = document.querySelector('input#account');
2. var defer = function (fn) {
3. var timer;
4. return function (e) {
5. if (timer) { clearTimeout(timer); }
6. timer = setTimeout(() => fn.call(e.target, e), 300);
7. };
8. };
9. account.addEventListener('input', defer(function (e) {
10. request('get', '/api/users/check', () => {});
11. }));

You don’t need AJAX to
download a file.
65

Downloading a File
66
1. var url = 'https://locate/to/file';
2. /* Solution 1 */
3. location.assign(url);
4.
5. /* Solution 2 */
6. window.open(url, '_blank');
7.
8. /* Solution 3 (Better) */
9. var iframe = document.createElement('iframe');
10. iframe.style.display = 'none';
11. iframe.src = url;
12. document.appendChild(iframe);

Disable action buttons while
requesting to prevent user from
re-submitting the form.
67

Disabling Submit Button When Request Is In-progress
68
1. var profile = document.querySelector('form#profile');
2. var save = document.querySelector('[type="submit"]#save');
3. profile.addEventListener('submit', function (e) {
5. request('post', 'submit', function (xhr) {
6. save.disabled = false;
7. }).send();
8. save.disabled = true;
9. });

Callback Hell
69
1. /* Suppose url1, url2, url3, and success are defined */
2. request('get', url1, function (xhr) {
5. success();
6. });
7. });
8. });

Using Named Functions
70
2. function doReq1 () {
3. request('get', url1, function () { doReq2(); });
4. }
6. request('get', url2, function () { doReq3(); });
7. }
9. request('get', url3, function () { success(); });
10. }
11. doReq1();

What’s a Promise?
72
A Promise is an object representing the eventual completion or failure of
an asynchronous operation. – MDN
Promise
Promise
.then(onFulfilled)
.catch(onRejected)
Promise …
pending
resolved
rejected
pending
return

Creating a Promise
73
1. new Promise(function (resolve, reject) {
2. setTimeout(() => resolve('Success!'), 1000);
3. })
4. .then(function (message) {
5. console.log(message); // 'Success!'
6. return { message };
7. })
8. .then(function (data) {
9. console.log(data); // {message: 'Success!'}
10. })
11. .catch(function (error) {
12. console.log(error);
13. });

Chaining after a catch
74
1. new Promise((resolve, reject) => {
2. console.log('initialized');
3. resolve();
4. })
5. .then(() => {
6. throw new Error('something failed');
7. console.log('success');
8. })
9. .catch((error) => console.log('failure'))
10. .then(() => console.log('Whatever happened before'));
11. // 'initialized', 'failure', 'Whatever happened before'

Wrapping AJAX Request with Promise
75
1. function ajax (method, url, data) {
2. return new Promise(function (resolve, reject) {
5. if (xhr.readyState === xhr.DONE) {
6. if (xhr.status === 200) {
7. resolve(JSON.parse(xhr.responseText));
8. } else { reject(xhr.responseText); }
9. }
10. };
11. xhr.open(method, url, true);
12. xhr.send(data);
13. });
14. }

Making a Request With the Enhanced Request Function
76
1. ajax('post', '/api/order', { item: 'ipad', amount: 99 })
2. .then(function (data) {
3. console.log(data);
4. })
6. console.error(error);
7. });

Chaining Requests with Promises
77
2. function doReq1 () { return ajax('get', url1); }
5. doReq1().then(doReq2).then(doReq3).then(success);

The Promise.all() Method
78
1. Promise.all([
2. ajax('get', '/data/hosts.json'),
3. ajax('get', '/data/users.json')
4. ])
5. .then(function ([hosts, users]) {
6. console.log(hosts);
7. console.log(users);
8. })
10. console.error(error);
11. });

The fetch API
79
2. data.append('action', 'cancel');
3.
4. fetch('/orders/1', { method: 'POST', body: data })
5. .then(function (response) {
6. // response.ok bool
7. // response.status number
8. // response.headers Headers
9. // response.json() Promise
10. })
11. .catch(function (error) {});

Server-sent Events
81
SSE is a technology where a browser receives automatic updates from a
server via HTTP connection. – Wiki
Request
Response
Request
Response
Handshake
Acknowledgement
Server push
Server push
CLIENT SERVER
Polling
CLIENT SERVER
Server-sent Event
VS.

Receiving Server-Sent Event Notifications
82
1. var es = new EventSource('http://localhost/stream');
2.
3. es.addEventListener('open', function (e) { … });
4. es.addEventListener('error', function (e) { … });
5. es.addEventListener('message', function (e) {
6. console.log(JSON.parse(e.data));
7. });
8. es.addEventListener('custom-event', function (e) {
10. });

WebSocket is a computer communications protocol, providing full-duplex
communication channels over a single TCP connection. – Wiki
What Is WebSocket?
84
WebSocket
Request
Response
Request
Response
Handshake
Acknowledgement
Bi-directional
messages
Connection end
CLIENT SERVER
HTTP
CLIENT SERVER
WebSocket
VS.
Connection lifecycle Connection lifecycle

Creating a WebSocket Object
85
1. var ws = new WebSocket('wss://localhost');
2.
3. ws.addEventListener('open', function (e) { … });
4. ws.addEventListener('error', function (e) { … });
5. ws.addEventListener('message', function (e) {
7. // { success: true, action: 'echo', data: 'Bye' }
8. ws.close();
9. };
10. ws.send(JSON.stringify({ action: 'echo', data: 'Bye' }));

Reference
86
● Ajax (programming) - Wikipedia
● CORS - Glossary | MDN
● Cross-origin resource sharing - Wikipedia
● GET vs POST - Difference and Comparison | Diffen
● JavaScript | MDN
● JSONP - Wikipedia

Reference
● Same-origin policy - Wikipedia
● Same-origin policy - Web security | MDN
● Server-sent events - Wikipedia
● WebSocket - Wikipedia
87

Practical JavaScript Programming - Session 5/8

More Related Content

What's hot (20)

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

More from Wilson Su (7)

Recently uploaded (20)

Practical JavaScript Programming - Session 5/8