JavaScript is one of the most popular skills in today’s job market. It allows you to create both client- and server-side applications quickly and easily. Having a solid understanding of this powerful and versatile language is essential to anyone who uses it.
“Practical JavaScript Programming” does not only focus on best practices, but also introduces the fundamental concepts. This course will take you from JavaScript basics to advanced. You’ll learn about topics like Data Types, Functions, Events, AJAX and more.
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
wilson_su@trend.com.tw
7. JavaScript Restricted Features
7
Security
Submit a form
The History object
The FileUpload object
Window size and position
Modify event properties
Mixed content
Close a window Same-origin policy
9. What JavaScript Can Do Globally
● Scripts can override native prototype and methods
● Different scripts can mess with each other's variables
● Different scripts can redefine each other's functions
● Transmit data anywhere
● Watch keystrokes
● All scripts run with equal authority
9
Vulnerabilities
10. 10
Client Side Web Security Attacks
Vulnerabilities
● Cross-Site Scripting / XSS
● Cross-Site Request Forgery / CSRF
● JSON Hijacking
● Clickjacking
● Likejacking / Social Jacking
JS
13. Cross-Site Request Forgery
13
Vulnerabilities
Bank Let’s Play a Game
http://smart.bank.com http://unsafe.games.com
Popular Games
Play Play Play
Hi, Neo
Account Balance
Transfer 10,000
http://smart.bank.com/transfer?to=12345678&amount=10000
15. JSON Hijacking
15
Vulnerabilities
Bank Let’s Play a Game
http://smart.bank.com http://unsafe.games.com
Hi, Neo <script>
Object.prototype.__defineSetter
__(…);
</script>
<script
src="https://smart.bank.com/dat
a/account"></script>
Nice see you again.
41. Delete of an Unqualified Identifier
41
1. (function nonstrict () {
2. var index;
3. console.log(delete index); // false
4. })();
5.
6. function strict () {
7. 'use strict';
8. var index;
9. console.log(delete index);
10. }
11. // SyntaxError
42. Not Allow to Use with
42
1. (function nonstrict () {
2. var dog = { age: 5 };
3. with (dog) { age = 3; }
4. console.log(dog); // {age: 3}
5. })();
6.
7. function strict () {
8. 'use strict';
9. var dog = { age: 5 };
10. with (dog) { age = 3; }
11. }
12. // SyntaxError
43. The eval() Is Not Allowed to Create Variables in Strict-mode
43
1. (function nonstrict () {
2. eval('var number = 30');
3. console.log(number); // 30
4. })();
5.
6. (function strict () {
7. 'use strict';
8. var bool = eval('var bool = true; bool');
9. eval('var number = 30');
10. console.log(bool); // true
11. console.log(number); // ReferenceError
12. })();
46. A Basic Timing Event
46
1. var timer = setTimeout(function () {
2. console.log('Executed');
3. }, 10 * 1000);
4. /* The clearTimeout() method cancels a timer previously
established by calling setTimeout() */
5. clearTimeout(timer);
47. A Customable Timing Event Function Using setTimeout
47
1. /* Assume time() is a function to get current time. */
2. function timer (fn, delay = 1000, times = 3) {
3. setTimeout(function () {
4. console.log(time());
5. fn();
6. --times && timer(fn, delay, times);
7. }, delay);
8. };
9. timer(function () {
10. /* Something that blocks for 1 minutes */
11. });
12. // '12:00:01' '12:01:02' '12:02:03'
48. A Repeatedly Timing Event
48
1. var timer = setInterval(function () {
2. console.log('Executed');
3. }, 10 * 1000);
4. /* The clearInterval() method cancels a timer previously
established by calling setInterval() */
5. clearInterval(timer);
49. Stacking Calls With setInterval
49
1. setInterval(function () {
2. /* Something that blocks for 1 minutes */
3. }, 1000);
4. /* When code that is being executed blocks the timeout call,
setInterval will still issue more calls to the specified
function. */
53. Singleton Pattern
53
Design Patterns
Static public
method
Private
constructor
A static
member
A class of which only a single instance can exist. Ensure a class only has
one instance, and provide a global point of access to it.
54. An Example Using the Singleton Pattern
54
1. function Router (options) {
2. if (Router.instance) { return Router.instance; }
3. this.options = options;
4. }
5. Router.instance = null;
6. Router.create = function (options) {
7. if (Router.instance) { return Router.instance; }
8. return Router.instance = new Router(options);
9. }
10. var options = {}, router = Router.create(options);
11. console.log(router === Router.instance); // true
12. console.log(router === new Router(options)); // true
57. An Example Using the Factory Pattern
57
1. /* Assume class Line, Bar, and Pie are defined */
2. var types = { line: Line, bar: Bar, pie: Pie };
3. class ChartFactory {
4. static create (options) {
5. var type = options.type;
6. if (!type) { throw Error('Chart type is undefined.'); }
7. var Type = type in types ? types[type] : null;
8. if (!type) { throw Error('Unknown chart type.'); }
9. return new Type(options);
10. }
11. }
12. ChartFactory.create({ type: 'line', data: [50, 80, 60] });
13. ChartFactory.create({ type: 'pie', data: [10, 20, 70] });
59. Dependency Injection
59
Design Patterns
Dependency injection is a technique whereby one object supplies the
dependencies of another object. It is one specific implementation of the
inversion of control technique.
App
A
B
C
D
depends
60. Examples Using the Dependency Injection
60
1. /* Example 1 */
2. function Router () {}
3. function Storage () {}
4. function App () {}
5. new App(new Router(), new Storage());
6.
7. /* Example 2 - Dynamically loads dependencies */
8. function Combobox (input, dropdown) {}
9. var injector = { resolve: function (deps, fn) {} };
10. var dependencies = ['Input', 'Dropdown'];
11. injector.resolve(dependencies, (input, dropdown) => {
12. var combobox = new Combobox(input, dropdown);
13. });
62. Module Pattern
62
Design Patterns
The Module pattern is used to emulate the concept of classes in such a
way that we're able to include both public/private methods and variables
inside a single object, thus shielding particular parts from the global scope.
Router Menu ChartjQuery
63. An Example Using the Module Pattern
63
1. /* Global module */
2. var collection = (function () {
3. 'use strict';
4. var module = {};
5. var items = []; // Private
6. var sort = function () {}; // Private
7. module.name = 'collection'; // Public
8. module.push = function (data) {}; // Public
9. return module;
10. })();
64. An Example Using the Revealing Module Pattern
64
1. /* Global module */
2. var collection = (function () {
3. 'use strict';
4. var name = 'collection';
5. var items = [];
6. function sort () {};
7. function push (data) {};
8. return { name, push };
9. })();
65. AMD / Asynchronous Module Definition
65
1. /* collection.js */
2. define(['./libs/jquery'], function ($) {
3. 'use strict';
4. var name = 'collection';
5. var items = [];
6. function sort () {};
7. function push (data) {};
8. return { name, push };
9. });
66. CommonJS
66
1. 'use strict';
2. var $ = require('jquery');
3. var name = 'collection';
4. var items = [];
5. function sort () {};
6. function push (data) {};
7. module.exports = { name, push };
69. Facade Pattern
69
Design Patterns
A single class that represents an entire subsystem. Provide a unified
interface to a set of interfaces in a system. Facade defines a higher-level
interface that makes the subsystem easier to use.
Facade
Internal A Internal B Internal C
70. An Example Using the Facade Pattern
70
1. function bind (elem, event, listener) {
2. if (elem.addEventListener) {
3. elem.addEventListener(event, listener, false);
4. } else if (elem.attachEvent) {
5. elem.attachEvent('on' + event, listener);
6. } else {
7. elem['on' + event] = listener;
8. }
9. }
10. var button = document.getElementById('save');
11. bind(button, 'click', function () {});
12. bind(button, 'dblclick', function () {});
72. Proxy Pattern
72
Design Patterns
Proxy Real ObjectClient
An object representing another object. Provide a surrogate or placeholder
for another object to control access to it.
73. An Example Using the Proxy Pattern
73
1. class ElementProxy {
2. constructor (selector) {
3. this.selector = selector;
4. this.elem = document.querySelector(selector);
5. }
6. on (event, listener, capture) {
7. this.elem.addEventListener(event, listener, capture);
8. return this;
9. }
10. attr (attr, value) {}
11. }
12. var button = new ElementProxy('button#submit');
13. button.attr('disabled', false).on('click', () => {});