00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02
-
Upload
er-sikha-rani-sharma -
Category
Documents
-
view
226 -
download
7
description
Transcript of 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02
![Page 1: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/1.jpg)
Advanced JavaScript
Jussi Pohjolainen
![Page 2: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/2.jpg)
Agenda • Short Recap of JS • About EcmaScript 5 • JavaScript Best Prac>ces and Pa?erns • JavaScript Object Oriented Programming • HTML5 and JavaScript • JS – libraries – JQuery, YUI Library -‐> AngularJS
• Asynchronous Module Defini>on (AMD) • Designing JS Libraries • Tes>ng & Op>mizing
![Page 3: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/3.jpg)
Recommended Reading
• Recommended reading – JavaScript: The Good Parts by Douglas Crockford – JavaScript: The Definite Guide by David Flanagan – JavaScript Pa?erns: Stoyan Stefanov
• And Google.. • Lot of good presenta>ons – http://yuilibrary.com/theater/
![Page 4: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/4.jpg)
Rise of the Responsive Single Page App
Image: h?p://johnpolacek.github.io/scrolldeck.js/decks/responsive/
![Page 5: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/5.jpg)
Single-‐page Applica>ons (SPA)
• Web app that fits on a single web page – Fluid UX, like desktop app – Examples like Gmail, Google maps
• Html page contains mini-‐views (HTML Fragments) that can be loaded in the background
• No reloading of the page, be5er UX • Requires handling of browser history, naviga<on and bookmarks
![Page 6: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/6.jpg)
JavaScript
• SPAs are implemented using JavaScript and HTML
• ECMAScript is a scrip>ng language, standardized by Ecma Interna>onal
• In Browsers, ECMAScript is commonly called JavaScript – JavaScript = Na<ve (EcmaScript) + Host objects (browser)
![Page 7: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/7.jpg)
Not just Web!
• Mobile Applica>ons • Windows 8/10 apps • Desktop widgets • Server side JS
![Page 8: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/8.jpg)
<!DOCTYPE html> <html> <head> <title> Title </title> <meta charset="UTF-8" /> </head> <body> <script> document.write("hello world!"); </script> <script src="somefile.js"></script> </body> </html>
![Page 9: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/9.jpg)
PROGRAMMING WITH JS
![Page 10: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/10.jpg)
Basic Types
• JavaScript is loosely typed language! • Seven data types – Boolean – null – Undefined – Number
• 64 bit floa>ng point, also available Number.MAX_VALUE, Number.MIN_VALUE
– String – Object
![Page 11: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/11.jpg)
About Numbers • Number(value), converts en>re string
– var i = Number("12"); • parseInt(value[, radix]), converts start of the string – var i = parseInt("12px", 10); – Radix?
• 10 => integer number, 8 => octal number, 16 => hexadecimal • While this parameter is op>onal, always specify it to eliminate reader confusion and to guarantee predictable behavior. Different implementa<ons produce different results when a radix is not specified.
• NaN (Not a Number) – Result of erroneous opera>ons
![Page 12: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/12.jpg)
var integer1 = Number("12"); var integer2 = parseInt("12", 10); print(integer1 + integer2); // 24 var a = parseInt("12foobar", 10); print(a); // 12 var b = parseInt(" 12 ", 10); print(b); // 12 var c = parseInt("foobar12", 10); print(c); // Don't do this if(c == NaN) { print("A) It's Nan!"); } if(isNaN(c)) { print("B) It's NaN!"); }
![Page 13: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/13.jpg)
Math Object
• All proper>es and methods are "sta>c", just like in Java – abs – acos – atan – … – sin – sqrt
• var value = Math.sqrt(4);
![Page 14: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/14.jpg)
Strings • Sequences of 0 – n of 16-‐bit chars • Example
var s1 = "Hello"; var s2 = "Hello"; if(s1 === s2) { print("the same!"); } print(s1.length); print("hello" + 12); print(12 + "hello"); print("hello".toUpperCase());
![Page 15: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/15.jpg)
True or false? var myArray1 = [false, null, undefined, "", 0, NaN]; // EcmaScript 5 feature! // Iterate the array myArray1.forEach(function(entry) { if(entry) { print(entry); // Here? } });
![Page 16: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/16.jpg)
True or false? var myArray1 = ["false", "0", "undefined", "NaN"];
// EcmaScript 5 feature!
// Iterate the array
myArray1.forEach(function(entry)
{
if(entry)
{
print(entry);
}
});
![Page 17: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/17.jpg)
True or false? var value = 0;
if(value = 0)
{
print("A");
}
if(value == 0)
{
print("B");
}
if("0" == 0)
{
print("C");
}
if("0" === 0)
{
print("D");
}
![Page 18: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/18.jpg)
Statements
• Same than in other languages – If – Switch/case – While – Do/while – For – Break – Con>nue – Return – Try/throw/catch
![Page 19: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/19.jpg)
Rhino (JavaScript Engine)
• Open Source JS Engine developed in Java – Mozilla Founda>on
• No built in support for web browser objects • Has Rhino shell for running JS in command line • Is bundled in Java SE 6 • Supports EcmaScript 5
![Page 20: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/20.jpg)
EXERCISE 1
![Page 21: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/21.jpg)
ABOUT ECMASCRIPT 5
![Page 22: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/22.jpg)
EcmaScript
• Ecma Standard is based on JavaScript (Netscape) and JScript (Microsom)
• Development of the standard started in 1996 • First edi>on 1997 • Support – http://kangax.github.com/es5-compat-table/
• Newest version: EcmaScript 5.1 – http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
![Page 23: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/23.jpg)
Recap: object types
• Na>ve (Core Javascript) – ECMAScript standard: Array, Date..
• Host – The host environment, for example browser: window, DOM objects
![Page 24: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/24.jpg)
EcmaScript
• Goal – Fix “bad” parts of JS while maintaining compa>ble with EcmaScript 5
• Introduces Strict mode – Removes features from the language! Raises errors that were okay in non strict mode
– Backward compa>ble – Add “use strict”, in func>on or global scope
• EcmaScript supports non-‐strict mode, but it’s depricated!
![Page 25: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/25.jpg)
Strict “mode”
• Detec>on of bad/dangerous programming prac>ces – with() statement prevented – Assignment to non-‐declared variables prevented (i = 3)
– Eval is prohibited – Lot of other issues..
• See ES5 specifica>on page 235
![Page 26: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/26.jpg)
Enable strict mode > cat strictmode.js
// This is just a string, backward compatible!
"use strict";
i = 0;
> rhino strictmode.js
js: uncaught JavaScript runtime exception: ReferenceError: Assignment to undefined "i" in strict mode
![Page 27: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/27.jpg)
Global and local // GLOBAL, everything is strict: "use strict"; //.. strict program // LOCAL, function is strict function foo() { "use strict"; //.. strict function }
![Page 28: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/28.jpg)
Other Main Changes
• Na>ve JSON object added – For parsing/stringifying JSON
• Changes to Array object, nine new methods – indexOf, lastIndexOf, every, some, forEach, map, filter, reduce, reduceRight
• Changes to Object – Can define ge?ers and se?ers – Objects can be sealed (no new proper>es can be added) and frozen (values cannot be changed)
![Page 29: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/29.jpg)
JSON and Weather Underground myObject = JSON.parse(httpObj.responseText);
city = myObject.location.city;
now = myObject.forecast.txt_forecast.forecastday[0].fcttext_metric;
icon = myObject.forecast.txt_forecast.forecastday[0].icon_url;
![Page 30: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/30.jpg)
forEach var arr = ["apple", "banana", "carrot", "apple"];
print(arr.indexOf("apple")); // 0
print(arr.indexOf("daikon")); // -1
print(arr.lastIndexOf("apple")); // 3
arr.forEach(function (entry)
{
print(entry)
}
);
![Page 31: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/31.jpg)
every and some // Checks all the values, if one of them does not // match with given condition, return value is false. var returnValue = arr.every(function (value, index, array) { return value.length > 1; } ); print(returnValue); // true // Checks all the values, if one of them matches with // given condition, return value is true. var returnValue = arr.some(function (value, index, array) { return value === "apple"; } ); print(returnValue); // true
![Page 32: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/32.jpg)
map and filter // Adds Hello to the end of the array values var newArray = arr.map(function (value, index, array) { return value + " Hello"; }); newArray.forEach(function (entry) { print(entry) } ); // Keep only Apples. var newArray2 = arr.filter(function (value, index, array) { return value === "apple"; }); newArray2.forEach(function (entry) { print(entry) } );
![Page 33: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/33.jpg)
reduce var value = [10, 20, 30, 40, 50].reduce(function (previousValue, currentValue, index, array) {
print("previousValue = " + previousValue);
print("currentValue = " + currentValue);
return previousValue + currentValue;
}, 0);
print("result = " + value);
/*
previousValue = 0
currentValue = 10
previousValue = 10
currentValue = 20
previousValue = 30
currentValue = 30
previousValue = 60
currentValue = 40
previousValue = 100
currentValue = 50
result = 150
*/
![Page 34: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/34.jpg)
reduceRight var value = [10, 20, 30, 40, 50].reduceRight(function (previousValue, currentValue, index, array) {
print("previousValue = " + previousValue);
print("currentValue = " + currentValue);
return previousValue + currentValue;
}, 0);
print("result = " + value);
/*
previousValue = 0
currentValue = 50
previousValue = 50
currentValue = 40
previousValue = 90
currentValue = 30
previousValue = 120
currentValue = 20
previousValue = 140
currentValue = 10
result = 150
*/
![Page 35: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/35.jpg)
Prevent Extensions "use strict"; var obj = {}; obj.name = "John"; print(obj.name); // "John" print(Object.isExtensible(obj)); // true Object.preventExtensions(obj); // Should be exception in strict mode obj.url = "http://www.something.com"; print(Object.isExtensible(obj));
![Page 36: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/36.jpg)
Proper>es and Descriptors
• It’s possible to define proper>es for object – Property descriptor • Value • Get and Set methods • Writable • Enumerable • Configurable
![Page 37: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/37.jpg)
Example var obj = {};
obj.name = "something";
Object.defineProperty( obj, "name", {
value: "something", // Notice: you cannot have value and get + set
get: someFunction,
set: someOtherFunction,
writable: false, // property cannot be changed
enumerable: true, // will be iterated in for in
configurable: true // can be deleted
});
print( obj.name )
![Page 38: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/38.jpg)
Sealing and Frozing
• Sealing prevents other code from dele>ng or adding descriptors – Object.seal(obj) – Object.isSealed(obj)
• Frozing is almost iden>cal to sealing, but addi>on of making the proper>es uneditable – Object.freeze(obj) – Object.isFrozen(obj)
![Page 39: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/39.jpg)
EcmaScript 5 -‐ Overview
• Strict Mode • JSON parsing now standard • New Array methods • New Object methods
![Page 40: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/40.jpg)
EXERCISE 2
![Page 41: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/41.jpg)
JS BEST PRACTISES AND PATTERNS
![Page 42: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/42.jpg)
Tools
• IDEs – Visual Studio, Aptana, Webstorm, IxEdit … – Or just text editor
• JS Engines: V8, Rhino .. • Quality: JSLint • Lot of frameworks available!
![Page 43: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/43.jpg)
JS and OO
• JavaScript supports object-‐oriented language! • Only five primi>ve types: number, string, boolean, null, undefined – Object wrappers for number, string and boolean available
• Object is just a collec>on of named proper>es, a list of key-‐value pairs – Some of the proper>es can be func>ons!
• No classes! Let’s look at OO later in more carefully.
![Page 44: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/44.jpg)
JS and Command Line
• It’s possible to run your js apps in command line.
• Several JS engines – SpiderMonkey (c++) or Rhino (java) (Firefox) – SquirrelFish (Apple’s Webkit) – V8 (Google Chrome)
• It’s possible to install these as command line apps, although the process can be li?le difficult
![Page 45: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/45.jpg)
Rhino (JavaScript Engine)
• Open Source JS Engine developed in Java – Mozilla Founda>on
• No built in support for web browser objects • Has Rhino shell for running JS in command line • Is bundled in Java SE 6 – In Java 8 a new JS engine called Nashorn
![Page 46: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/46.jpg)
![Page 47: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/47.jpg)
V8
• Open source JS engine developed by Google • Compiles JS to na>ve code • Wri?en in C++, runs on Windows, OS X and Linux
• Can be used in browser and standalone engine
• You need to build the V8 – h?p://code.google.com/p/v8/ – h?ps://developers.google.com/v8/build
![Page 48: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/48.jpg)
V8 running on Mac OS X
![Page 49: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/49.jpg)
Any problems in the code? function sum (a, b) { s = a + b; return s; } x = sum(5,5); // Rhino's way to print to console print (x);
![Page 50: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/50.jpg)
JSLint • JSLint is JS code quality tool made by Douglas Crockford – h?p://jslint.com
• Inspects and warns about poten>al problems • “Will hurt your feelings” • Excepts that your code is in “strict mode” • Can be used via website or command line (installa>on required)
• Command line tool (Java wrapper for JSLint) – h?p://code.google.com/p/jslint4java/
![Page 51: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/51.jpg)
![Page 52: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/52.jpg)
JSLint in Command Line
• JSLint4java – Java wrapper for the JSLint – h?p://code.google.com/p/jslint4java/
• To use it: – java -‐jar jslint4java-‐2.0.3.jar applica>on.js
![Page 53: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/53.jpg)
![Page 54: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/54.jpg)
Amer some modifica>ons function sum(a, b) { "use strict"; var s = a + b; return s; } var x = sum(5, 5); // Rhino's way to print to console print(x);
![Page 55: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/55.jpg)
![Page 56: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/56.jpg)
![Page 57: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/57.jpg)
![Page 58: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/58.jpg)
![Page 59: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/59.jpg)
Prin>ng to Console
• Debugging in Browsers: use console – object • Firefox – Firebug extension
• Safari – Enable developer mode
• How? – console.log(“Hello World!”);
![Page 60: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/60.jpg)
![Page 61: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/61.jpg)
Global Variables
• Every JS environment has a global object • Every global variable becomes a property of the global object – In browser environment: window is the global object itself
![Page 62: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/62.jpg)
Declaring Global variable // global object, window, will get a new property! variable = "hi there!"; console.log(variable); // And different ways to access the variable console.log(window.variable); console.log(window.variable); console.log(window["variable"]); console.log(this.variable); console.log(window);
![Page 63: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/63.jpg)
Window proper>es
![Page 64: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/64.jpg)
Problems
• Global variables shared among all the code • What if you use some third party JavaScript Library like JQuery or Modernizr? Name collision!
• Avoid Globals!
![Page 65: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/65.jpg)
Problem 1 function something() {
// window object now has variable property!
variable = "hi there!";
}
something();
// prints "hi there!"
console.log(variable);
![Page 66: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/66.jpg)
Problem 2 function something() {
// window object now has z property!
var x = z = "hello";
}
something();
// prints "hello"
console.log(z);
![Page 67: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/67.jpg)
Difference when using var var x = 20; y = 21;
console.log(window.x); // 20 console.log(window.y); // 21
delete x; // does not delete anything
delete y; // removes the y from window
console.log(window.x); // 20 console.log(window.y); // undefined
![Page 68: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/68.jpg)
Using var
• Use always var! • In strict mode, assignments to undeclared variables will throw an error!
![Page 69: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/69.jpg)
Func>ons and Variable Declaring var x = 10; function test() { console.log(x); // outputs what? if(true) { var x = 5; } } test();
![Page 70: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/70.jpg)
What really happens var x = 10; function test() { var x; console.log(x); // outputs “undefined” if(true) { x = 5; } } test();
![Page 71: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/71.jpg)
Variable Hois>ng
• When you declare a variable inside a func>on, it acts like it was declared at the top of the func>on!
• Declare always your variables at the top!
![Page 72: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/72.jpg)
Single Var Pa?ern function test() { var a = 1, b = 2, …; // rest of the function } test();
![Page 73: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/73.jpg)
FD, FE, NFE
• It gets harder when a variable is – Func>on declara>on (FD) – Func>on expression (FE)
• Rules – Func<on declara<on is not hoisted – Func<on expression is hoisted
![Page 74: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/74.jpg)
Func>on Declara>on: this works!
function testC()
{
print(foo());
function foo()
{
return 5;
}
}
<=>
function testD()
{
function foo()
{
return 5;
}
print(foo());
}
![Page 75: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/75.jpg)
Func>on Expression: this does not work!
function testA()
{
print(foo());
var foo = function()
{
return 5;
}
}
<=>
function testB()
{
var foo;
print(foo());
foo = function()
{
return 5;
}
}
![Page 76: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/76.jpg)
Named Func>on Expression
// Named function expression for recursion or debugging
var somethingFoo = function somethingBar()
{
print("do something");
// Recursion, does not end well here.
somethingBar();
}
somethingFoo();
// this does not work
somethingBar();
![Page 77: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/77.jpg)
Func>ons in if-‐statements
• In strict mode code, func:ons can only be declared at top level or immediately within another func:on.
• So what happens in non-‐strict mode?
![Page 78: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/78.jpg)
Func>ons in if-‐statements
function init()
{
if(true)
{
function foo() { return 1; }
}
else
{
function foo() { return 2; }
}
return foo();
}
print(init()); // 1 or 2?
![Page 79: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/79.jpg)
Use this!
function init2()
{
var foo;
if(true)
{
foo = function() { return 1; }
}
else
{
foo = function() { return 2; }
}
return foo();
}
print(init2());
![Page 80: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/80.jpg)
For loops for(var i = 0; i < somearray.length; i++) {
doSomething();
}
<=>
var max = somearray.length;_for(var i = 0; i < max; i++) {
doSomething()
}
![Page 81: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/81.jpg)
Comparison
false == 0 => true
“” == 0 => true
Use
false === 0 => false
“” === 0 => false
![Page 82: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/82.jpg)
eval()
• eval() func>on takes JS (string) and executes it.
• Security issues: don’t use it! • To parse JSON objects, use JSON.parse();
![Page 83: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/83.jpg)
with // Instead of doing this, you could… myobj.prop.subprop.subsubprop.a = true; myobj.prop.subprop.subsubprop.b = false; // .. Use shortcut using with.. But DON’T! with(myobj.prop.subprop.subsubprop) { a = true; b = true; } // It’s confusing, just use var s = myobj.prop.subprop.subsubprop; s.a = true; s.b = true;
![Page 84: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/84.jpg)
Constructors function Person(name) {
this.name = name;
}
// Should be used
var jaska = new Person("Jaska");
// Don't! Now this is bound to global object
var jeppe = Person("Jeppe");
![Page 85: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/85.jpg)
Be?er version function Person(name) {
// If this refers not to Person (for example global object)
if(!(this instanceof Person))
{
// Let's then use the new word
return new Person(name);
}
else
{
this.name = name;
}
}
// Now both work
var vilma = new Person("Vilma");
var jaska = Person(”Jaska");
![Page 86: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/86.jpg)
Code Style
• Indenta>on: 4 spaces (default for JSLint) • Use always curly braces • Naming conven>ons: – Use capital le?er in constructor func>ons: – var jack = new Person();
![Page 87: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/87.jpg)
Documen>ng your code
• It’s possible to generate documenta>on from your comments (like Javadoc in Java)
• Free tools like – JSDoc3 • h?p://usejsdoc.org/about-‐gezng-‐started.html
![Page 88: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/88.jpg)
Minimizing your code
• The Closure Compiler is a tool for making JavaScript download and run faster
• Google Closure Compiler – h?ps://developers.google.com/closure/compiler/
• Can be user by command line or web – h?p://closure-‐compiler.appspot.com/home
![Page 89: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/89.jpg)
![Page 90: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/90.jpg)
EXERCISE 3
![Page 91: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/91.jpg)
HTML5 AND JS
![Page 92: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/92.jpg)
HTML5
• Fimh version of HTML standard by W3C • S>ll under development but lot of browsers support the proposal of the standard
• Simple markup that can be wri?en either in HTML or XHTML syntax
• Poten>al candidate for cross plahorm mobile apps • Mostly about seman<cs, most of the cool parts are implemented using JavaScript
• JS APIs are not part of HTML5, developed separately
![Page 93: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/93.jpg)
New Syntax
• <video> • <audio> • <canvas> • <section>, <article>, <header>, <nav>
![Page 94: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/94.jpg)
New JS APIs • Web Storage
– The ability to store data locally in browser – Session storage and local storage
• Geoloca<on API – Fetching GPS loca>on
• File API – Reading local files – See: h?p://www.html5rocks.com/en/tutorials/file/dndfiles/ or – h?ps://developer.mozilla.org/en-‐US/docs/Using_files_from_web_applica>ons
• Web Workers – Asynchronous methods
• Web Sockets – Connec>ng in real>me between client and server. Mul>player games, chat, real>me
upda>ng. Needs server support – h?p://www.developerfusion.com/ar>cle/143158/an-‐introduc>on-‐to-‐websockets/
• Canvas
![Page 95: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/95.jpg)
Geoloca>on API
• Geoloca>on API Specifica>on – h?p://dev.w3.org/geo/api/spec-‐source.html
• To detect the loca>on of the client • In mobile: GPS, in desktop IP-‐address or Wi-‐Fi loca>on
![Page 96: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/96.jpg)
function setText(val, e) { document.getElementById(e).value = val; } function insertText(val, e) { document.getElementById(e).value += val; } var nav = null; function requestPosition() { if (nav == null) { nav = window.navigator; } if (nav != null) { var geoloc = nav.geolocation; if (geoloc != null) { geoloc.getCurrentPosition(successCallback); } else { alert("geolocation not supported"); } } else { alert("Navigator not found"); } } function successCallback(position) { alert("" + position.coords.latitude + ", " + position.coords.longitude); }
![Page 97: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/97.jpg)
Showing Map on Google API
• h?p://maps.googleapis.com/maps/api/sta>cmap?center=<la>tude>,<longitude>&zoom=10&size=200x200&maptype=roadmap
• See: – h?ps://developers.google.com/maps/documenta>on/sta>cmaps/
![Page 98: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/98.jpg)
Wunderground + Geoloca>on + Google sta>c map
• Wunderground provides JSON API for weather informa>on
• Get loca>on of the browser and AJAX request to wunderground
• Amer receiving the result, parse it and show results in html.
• Problem: AJAX does not work cross site.. You can implement middleware (PHP)
![Page 99: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/99.jpg)
Mobile App (iPhone)
Web app!
![Page 100: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/100.jpg)
Mobile App (iPhone)
![Page 101: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/101.jpg)
Canvas
• “The canvas element a resolu:on-‐dependent bitmap canvas, which can be used for dynamically rendering of images such as game graphics, graphs, or other images”
• Image is drawn in JavaScript using typical vector graphics drawing primi>ves – drawImage(), lineTo(), arcTo(), bezierCurveTo(), fillRect(), scale(), rotate(), translate(), createLinearGradient(), shadowBlur(), …
![Page 102: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/102.jpg)
Simple Drawing using Canvas and JS
<canvas id="mycanvas" width="200" height="200">
</canvas>
<script>
var canvas= document.getElementById('mycanvas');
var context = canvas.getContext('2d');
context.fillRect(60,30,80,120);
</script>
![Page 103: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/103.jpg)
Possibili>es • Simple shapes (Rectangles) • Complex shapes (Paths) • Lines • Shadows • Text • Images • Pixel manipula>on • Colors and styles • Composi>ng • Transforma>ons • Canvas state
![Page 104: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/104.jpg)
Implemen>ng a Game
![Page 105: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/105.jpg)
main function main() { createCanvas(); // Original position reset(); // Millisecs elapsed since 1970. then = Date.now(); loadImages(); setEventListeners(); //The setInterval() method calls a function or evaluates an expression at //specified intervals (in milliseconds). setInterval(gameLoop, 1); } window.onload=function(){ main(); }
![Page 106: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/106.jpg)
Game Objects and Global Variables var keysDown = {}; var bgImage = null; var canvas = null; var ctx = null; var then; var monstersCaught = 0; // Game objects var hero = {
speed: 256, x: 0, y: 0, myImage: null
}; var monster = {
x: 0, y: 0, myImage: null
};
![Page 107: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/107.jpg)
Game Loop function gameLoop () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
};
![Page 108: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/108.jpg)
Create Canvas function createCanvas() { // Create canvas element canvas = document.createElement("canvas"); // Get the canvas object that you can use to draw ctx = canvas.getContext("2d"); // Set size for the canvas object canvas.width = 512; canvas.height = 480; document.getElementById("here").appendChild(canvas); }
![Page 109: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/109.jpg)
Star>ng point function reset() {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// Throw the monster somewhere on the screen randomly
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};
![Page 110: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/110.jpg)
Load Image function loadImage(imageSrc) {
var image = new Image();
image.src = imageSrc;
return image;
}
function loadImages() {
hero.myImage = loadImage("lib/hero.png");
monster.myImage = loadImage("lib/monster.png");
bgImage = loadImage("lib/background.jpg");
}
![Page 111: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/111.jpg)
Key Listeners function setEventListeners() {
// If keydown, then add the key to the array and set it true
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
// If keyup, remove it from the array
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
}
![Page 112: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/112.jpg)
Update function update (modifier) {
if (38 in keysDown) { // Player holding up hero.y -= hero.speed * modifier; } if (40 in keysDown) { // Player holding down hero.y += hero.speed * modifier; } if (37 in keysDown) { // Player holding left hero.x -= hero.speed * modifier; } if (39 in keysDown) { // Player holding right hero.x += hero.speed * modifier; }
// Are they touching? if ( hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32) && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32) ) { ++monstersCaught; reset(); }
};
![Page 113: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/113.jpg)
Render function render() {
ctx.drawImage(bgImage, 0, 0);
ctx.drawImage(hero.myImage, hero.x, hero.y);
ctx.drawImage(monster.myImage, monster.x, monster.y);
// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "12px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("FB Monsters caught: " + monstersCaught, 20, 20);
};
![Page 114: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/114.jpg)
EXERCISE 4
![Page 115: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/115.jpg)
JS AND OO
![Page 116: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/116.jpg)
About Objects
• Everything (except basic types) are objects – Including func>ons and arrays
• Object contains proper>es and methods – Collec>on of name-‐value pairs – Names are strings, values can be anything – Proper>es and methods can be added at run>me
• Objects can inherit other objects
![Page 117: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/117.jpg)
Object Literal var mystring = "hello!";
var myarray = ["element1", "element2"];
var circle1 = {radius: 9, getArea : someFunction };
var circle2 = {
radius: 9,
getRadius: function() {
return this.radius;
}
}
![Page 118: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/118.jpg)
No Classes!
• One of the simplest way to create object – var obj = new Object(); – obj.x = 10; – obj.y = 12; – obj.method = function() { … }
• This adds dynamically two proper>es to the obj – object!
• Object is built – in data type
![Page 119: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/119.jpg)
“Class”
• To define a class, define a func>on function Foo() {
this.x = 1; this.y = 1;
}
• var obj = new Foo(); • Internally a Object is created
![Page 120: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/120.jpg)
Example function Circle(radius) {
this.radius = radius; this.getArea = function() {
return (this.radius * this.radius) * Math.PI; };
}
var myobj = new Circle(5); document.write(myobj.getArea());
![Page 121: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/121.jpg)
About Namespaces
• Avoid pollu>ng global scope – Use namespaces! – Helps avoid clashes between your code and third-‐party libraries
• Namespaces don’t have dedicated syntax built into the language
• It’s possible to get same benefits by crea>ng single global object and add all other objects and func>ons to this object
![Page 122: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/122.jpg)
Example about Namespaces "use strict"; // If first operand is truthy, then the result is // first operand, else the result is second operand // By convention namespaces are written in capitals var MYSPACE = MYSPACE || {}; MYSPACE.Dog = function (name) { this.name = name; this.getName = function () { return name; }; }; var spot = new MYSPACE.Dog("Spot"); print(spot.getName());
![Page 123: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/123.jpg)
Arrays
• Arrays in JS are dynamic, content can be added and removed
• Arrays are also objects (Array “class” inherit Object) – concat(), join(), pop(), push(), slice(), sort(), splice()
![Page 124: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/124.jpg)
Example "use strict"; var array1 = []; // or new Array() var array2 = ['a', 'b', 'c']; print(array2.length); delete array2[1]; for(var i = 0; i<array2.length; i++) { print(array2[i]); }
![Page 125: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/125.jpg)
Func>ons • Every func>on in JS is Func>on object – Can be passed as arguments – Can store name / value pairs – Can be anonymous or named
• Usage (Don’t use this, it’s not efficient) – var myfunction = new Function("a","b", "return a+b;");
– print(myfunction(3,3)); • Only func>ons have scope, regular {blocks) don’t • Inner func>on can have access to outer func>on’s proper>es and parameters
![Page 126: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/126.jpg)
Func>on Arguments
• The arguments object is a local object available within all func>ons
• Each func>on has access to special parameter called arguments – Contains the func<on arguments
• It’s an array like object (but not an array) – Only arguments.length available
![Page 127: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/127.jpg)
Example "use strict"; function myConcat(separator) { var result = ""; // iterate through non-separator arguments for (var i = 1; i < arguments.length; i++) { result += arguments[i] + separator; } return result; } // returns "red, orange, blue, " print(myConcat(", ", "red", "orange", "blue")); // returns "elephant; giraffe; lion; cheetah; " print(myConcat("; ", "elephant", "giraffe", "lion", "cheetah")); // returns "sage. basil. oregano. pepper. parsley. " print(myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"));
![Page 128: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/128.jpg)
Func>onal Scoping "use strict"; function init() { // local variable name var name = "Hello World"; // inner function function displayName() { // uses outer functions variable print(name); } displayName(); } init();
![Page 129: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/129.jpg)
Returning a Inner Func>on "use strict";
function makeFunc() { var name = "Hello World"; function displayName() { print(name);
}
return displayName; }
// Is “Hello World” printed?
var myFunc = makeFunc(); myFunc();
![Page 130: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/130.jpg)
About Closures
• myFunc is a closure • Special kind of object that combines – A func>on – Environment in which func>on was created • Environment consists of any local variables that were in-‐scope at the >me closure was created • myFunc is a closure that has displayName and name
![Page 131: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/131.jpg)
Private members with Closures "use strict"; function getPerson(name) { var privateMember = "hello world!", obj; obj = { shout: function () { print(name + " shouts " + privateMember); }, say: function () { print(name + " say " + privateMember); } }; return obj; }; var person = getPerson("Jack"); // Does not work! print(person.privateMember); person.shout(); person.say();
![Page 132: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/132.jpg)
Private methods with Closures "use strict"; var person = (function(name) { var privateMember = "hello world!", obj; obj = { setName: function(myName) { name = myName; }, shout: function () { print(name + " shouts " + privateMember); }, say: function () { print(name + " say " + privateMember); } }; return obj; })(); person.setName("Jack"); person.shout(); person.say();
![Page 133: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/133.jpg)
this function foo() {
// adds prop to global object
this.prop = 12;
}
var obj = {
method: function() {
// goes to obj
this.prop = 12;
}
};
obj.method();
function Dog(name) {
// Refers to object being created!
this.name = name;
this.sayHello = function() {
print(this.name + " says hello!");
};
}
var dog = new Dog("Spot");
dog.sayHello();
![Page 134: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/134.jpg)
EXERCISE 5
![Page 135: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/135.jpg)
INHERITANCE
![Page 136: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/136.jpg)
About Inheritance
• Code reuse is important – Inheritance can help
• JavaScript does not have classes, so no special keyword for extending – This can be very confusing for Java/C# developers – Objects inherit objects
![Page 137: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/137.jpg)
Understanding JS Inheritance
• JS is not class based, it’s prototype-‐based! • Object inherit from another object • JS contains syntax and features that make it seem class based
![Page 138: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/138.jpg)
Understanding Prototypes
• Prototype is an object from which other objects inherit proper>es
• Any object can be a prototype • Every object has internal __proto__ property
![Page 139: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/139.jpg)
Example var parent = {
method1: function() { print("A"); }
}
var child = {
__proto__: parent,
method2: function() { print("B"); }
}
// If method1 is not found in child, look it from
// prototype!
child.method1(); // A
child.method2(); // B
![Page 140: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/140.jpg)
__proto__
• __proto__ is depricated and should not be used (but it works)
• To get the prototype, use – Object.getPrototypeOf(object) • It’s read only!
• How to set? – Proposal: Object.setPrototypeOf(obj, prototype)
• Not possible to change the __proto__ ..!
![Page 141: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/141.jpg)
Func>on Object
• When wri>ng – function Animal() { }
• Lot of things happens! – Two objects created: • 1) Animal • 2) Animal.prototype
– Animal.prototype has a property constructor, that points to Animal
![Page 142: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/142.jpg)
Func>on Object // This is just a function. Dog is Function object! function Dog (name) { this.name = (name); } var spot = new Dog("Spot"); // true print(spot instanceof Object); // true print(Dog instanceof Function); // true print(Dog instanceof Object);
![Page 143: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/143.jpg)
Func>on Object function sum1(a, b) {
return a + b;
}
// =>
var sum2 = new Function("a","b", "return a+b;");
print(sum1(2,2)); // 4
print(sum2(2,2)); // 4
print(sum2.length); // number of args = 2
print(sum2.toString());
![Page 144: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/144.jpg)
The “new” Operator
function Person() {
this.name = “Jack”;
}
// Normal function call
Person();
// Object creation
var p = new Person();
![Page 145: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/145.jpg)
![Page 146: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/146.jpg)
Example function Cat() { } // c.__proto__ points to Cat.prototype! var c = new Cat(); // true print(c.__proto__ === Cat.prototype); // c inherites Cat.prototype! Cat.prototype.age = 12; // 12! print(c.age);
![Page 147: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/147.jpg)
Example function Cat() { this.name = "Jack"; } var c = new Cat(); // true print(c.__proto__ === Cat.prototype); // c inherites Cat.prototype! Let's add stuff. Cat.prototype.age = 12; Cat.prototype.saySomething = function() { print(this.name + ": hello!"); } // 12! print(c.age); // "Jack: hello!" c.saySomething();
![Page 148: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/148.jpg)
/** PERSON **/
function Person() { }
var jack = new Person();
// jack inherites Person.prototype!
print(jack.__proto__ === Person.prototype);
Person.prototype.age = 18;
print(jack.age); // 18;
//** STUDENT **/
function Student() { }
// Let's now change the prototype of Student.
// Now Student.prototype points to Person.
var temp = new Person();
Student.prototype = temp;
var tina = new Student();
// tina inherites Student.prototype.. which is now temp!
print(tina.__proto__ === Student.prototype); // true
print(tina.__proto__ === temp); // true
// Now tina inherites Student.prototype, which is
// Person object, which inherites the Person.prototype..
print(tina.age); // 18!
![Page 149: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/149.jpg)
Example /** Person **/ function Person() { this.name = "Jack"; } // Adding functionality to the prototype.. Person.prototype.say = function() { print(this.name + ”: hello!"); } /** Student **/ function Student() { } // Inheritance Student.prototype = new Person(); /** Test **/ var student = new Student(); student.say(); // Jack: Hello
Person.prototype
say()
new Person()
name = “Jack”
__proto__
![Page 150: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/150.jpg)
Example /** Person **/ function Person() { this.name = "Jack"; } // Adding functionality to the prototype.. What is this?? Person.prototype.say = function() { print(this.name + ”: hello!"); } /** Student **/ function Student() { } // Inheritance Student.prototype = new Person(); /** Test **/ var student = new Student(); student.say(); // Jack: Hello
Person.prototype
say()
new Person()
name = “Jack”
__proto__
new Student()
__proto__
![Page 151: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/151.jpg)
Func>on Object
• Every func>on in JS is a Func>on object • When – var spot = new Dog(“spot”);
• Then spot’s __proto__ points to Dog.prototype!
• If a property cannot be found in an object, it is searched for in that object's prototype.
![Page 152: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/152.jpg)
Example // here's the constructor: function Point() { } var a = new Point(); print (a.x); // undefined // set up the prototype object to have some values: Point.prototype = { x: 10, y: 20 }; // or you could do this: Point.prototype.z = 30; // make a new Point object // (a object gets an implicit reference to Point.prototype object) var a = new Point(); // Since a does not hold a property, let's look it from Point.prototype print (a.x);
![Page 153: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/153.jpg)
Example // here's the constructor: function Point() { this.x = 10; this.y = 20; } // set up the prototype object to have some values: Point.prototype.z = 40; // make a new Point object // (a object gets an implicit reference to Point.prototype object) var a = new Point(); // Since a does not hold a property, let's look it from Point.prototype print (a.z);
![Page 154: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/154.jpg)
//** POINT ** function Point() { } // set up the prototype object to have some values: Point.prototype = { x: 10, y: 20 }; /** PIXEL **/ function Pixel() { } Pixel.prototype = new Point(); Pixel.prototype.color = "red"; // make a new Point object // (a object gets an implicit reference to Point.prototype object) var a = new Pixel(); var b = new Pixel(); a.color = "blue"; // Since a does not hold a property, let's look it from Point.prototype print (a.color); print (b.color);
![Page 155: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/155.jpg)
About constructors
• Prototype proper>es of Func>ons have a constructor property: – var dog = new Dog(); – dog.constructor == Dog; // TRUE
• This will break when doing inheritance!
![Page 156: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/156.jpg)
/** Person **/ function Person() { } Person.prototype.name = "Jack"; /** Student **/ function Student() { this.id = "12345"; } // Inheritance Student.prototype = new Person(); Student.prototype.id = "12345"; /** Test **/ var student = new Student(); student.age = 22; print(student.age) print(student.name); print(student.id); var person = new Person(); print(person.constructor === Person); // TRUE var student = new Student(); print(student.constructor === Student); // FALSE
![Page 157: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/157.jpg)
/** Person **/
function Person() {
}
Person.prototype.name = "Jack";
/** Student **/
function Student() {
this.id = "12345";
}
// Inheritance
Student.prototype = new Person();
Student.prototype.id = "12345";
// FIX
Student.prototype.constructor = Student;
/** Test **/
var student = new Student();
student.age = 22;
print(student.age)
print(student.name);
print(student.id);
var person = new Person();
print(person.constructor === Person); // TRUE
var student = new Student();
print(student.constructor === Student); // FALSE
![Page 158: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/158.jpg)
Inheritance: Prototypal
• In EcmaScript 5 a protypal inheritance pa?ern is part of the language – var child = Object.create(parent);
• The create-‐func>on function create(o) { function F() {} f.prototype = o; return new F(); }
![Page 159: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/159.jpg)
Example function Point(x,y) { this.x = x; this.y = y; } var pixel = Object.create(new Point(12,0)); pixel.color = "red"; print(pixel.x); print(pixel.color);
![Page 160: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/160.jpg)
EXERCISE 6
![Page 161: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/161.jpg)
JS LIBRARIES
![Page 162: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/162.jpg)
Intro
• Number of open source JS libraries – Assist frequent JS programming tasks – Hide browser differences
• Lot of possibili>es – Google Web Toolkit – JQuery – AngularJS – YUI3 (not developed anymore) – Modernizr – …
![Page 163: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/163.jpg)
h?p://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
![Page 164: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/164.jpg)
JQuery
• Mo>va>on – Simple things may require lot of coding – Common browsers are different and implementa>on varies
• Solu>on, use a framework – jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, anima>ng, and Ajax interac>ons for rapid web development.
![Page 165: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/165.jpg)
How?
• Download JQuery file (h?p://jquery.com/) – h?p://code.jquery.com/jquery-‐1.8.3.min.js
• Make your (x)html page and reference to the file in script block
• Make your code and use JQuery func>ons!
![Page 166: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/166.jpg)
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
// When document is ready to be manipulated
jQuery(document).ready( pageReadyToBeManipulated );
function pageReadyToBeManipulated() {
// If link is clicked
jQuery("a").click( linkClick );
}
function linkClick(event) {
alert("Thanks for visiting!");
// Prevent the default action
event.preventDefault();
}
//]]>
</script>
![Page 167: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/167.jpg)
Some Basic Syntax
• JQuery can be used in two ways: – JQuery() – Or – $()
• $ is an alias to JQuery()! $ more commonly used
![Page 168: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/168.jpg)
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
// When document is ready to be manipulated
$(document).ready( pageReadyToBeManipulated );
function pageReadyToBeManipulated() {
// If link is clicked
$("a").click( linkClick );
}
function linkClick(event) {
alert("Thanks for visiting!");
// Prevent the default action
event.preventDefault();
}
//]]>
</script>
![Page 169: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/169.jpg)
// USING ANONYMOUS FUNCTIONS
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
event.preventDefault();
});
});
//]]>
</script>
![Page 170: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/170.jpg)
// EVEN SHORTER SYNTAX, FORGET THE DOCUMENT PARAMETER
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$().ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
event.preventDefault();
});
});
//]]>
</script>
![Page 171: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/171.jpg)
Ge?ers in the Tradi>onal Way
• getElementsById
• getElementsByTagName
• getAttribute
![Page 172: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/172.jpg)
JQuery and Selectors
• Select all h1 elements – $(“h1”)
• Select the first one – $(“h1”)[0]
• Add contents – $(“????”)[0].innerHTML = “hello!”;
• Lot of different selectors – h?p://api.jquery.com/category/selectors/
![Page 173: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/173.jpg)
Crea>ng Elements in Tradi>onal Way
• createElement • createTextNode • setAttribute • appendChild • removeChild
![Page 174: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/174.jpg)
JQuery Insert $().ready(function(){
$("a").click(function(event){
// Insert the new element after element with id here
$("<p>New Element</p>").insertAfter("#here");
event.preventDefault();
});
});
![Page 175: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/175.jpg)
Manipula>on Func>ons
• .addClass() • .amer() • .append() • .css() • … • See: h?p://api.jquery.com/category/manipula>on/
![Page 176: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/176.jpg)
EXERCISE 7
![Page 177: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/177.jpg)
ANGULARJS
![Page 178: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/178.jpg)
Angular JS • Single Page App Framework for JavaScript • Implements client-‐side Model-‐View-‐Whatever pa?ern – Some call it MVC, some MVVM, it does not ma?er: – Separa<on of presenta>on from business logic and presenta<on state
• No direct DOM manipula>on, less code • Support for all major browsers • Supported by Google • Large and fast growing community
![Page 179: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/179.jpg)
First Example – Template <!DOCTYPE html>
<html ng-app>
<head>
<title>
Title
</title>
<meta charset="UTF-8" />
<style media="screen"></style>
<script src="angular.min.js"></script>
</head>
<body>
<!-- initialize the app -->
<div>
<!-- store the value of input field into a variable name -->
<p>Name: <input type="text" ng-model="name"></p>
<!-- display the variable name inside (innerHTML) of p -->
<p ng-bind="name"></p>
</div>
</body>
</html>
Download this file from: https://angularjs.org/
Direc>ve
Direc>ve
Template
![Page 180: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/180.jpg)
Basic Concepts
• 1) Templates – HTML with addi>onal markup, direc>ves, expressions, filters ...
• 2) Direc<ves – Extend HTML using ng-app, ng-bind, ng-model
• 3) Filters – Filter the output: filter, orderBy, uppercase
• 4) Data Binding – Bind model to view using expressions {{ }}
![Page 181: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/181.jpg)
Lot of Built in Direc>ves
• ngApp • ngClick • ngController • ngModel • ngRepeat • ngSubmit
• ngDblClick • ngMouseEnter • ngMouseMove • ngMouseLeave • ngKeyDown • ngForm
![Page 182: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/182.jpg)
2) Expressions
• Angular expressions are JavaScript-‐like code snippets that are usually placed in bindings – {{ expression }}.
• Valid Expressions – {{ 1 + 2 }} – {{ a + b }} – {{ items[index] }}
• Control flow (loops, if) are not supported! • You can use filters to format or filter data
![Page 183: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/183.jpg)
Example <!DOCTYPE html>
<html ng-app>
<head>
<title>Title</title>
<meta charset="UTF-8" />
<style media="screen"></style>
<script src="../angular.min.js"></script>
</head>
<body>
<div>
<p>Number 1: <input type="number" ng-model="number1"></p>
<p>Number 2: <input type="number" ng-model="number2"></p>
<!-- expression -->
<p>{{ number1 + number2 }}</p>
</div>
</body>
</html>
Direc>ve Direc>ve
Expression
![Page 184: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/184.jpg)
ng-‐init and ng-‐repeat direc>ves
<html data-ng-app=""> <head> <title>Title</title> <meta charset="UTF-8" /> <script src="../angular.min.js" type="text/javascript"> </script> </head> <body> <div data-ng-init="names = ['Jack', 'John', 'Tina']"> <h1>Cool loop!</h1> <ul> <li data-ng-repeat="name in names">{{ name }}</li> </ul> </div> </body> </html>
![Page 185: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/185.jpg)
3) Filter
• With filter, you can format or filter the output • Formanng – currency, number, date, lowercase, uppercase
• Filtering – filter, limitTo
• Other – orderBy, json
![Page 186: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/186.jpg)
Using Filters -‐ Example <!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Title</title>
<meta charset="UTF-8">
<script src="../angular.min.js" type="text/javascript">
</script>
</head>
<body>
<div data-ng-init="customers = [{name:'jack'}, {name:'tina'}]">
<h1>Cool loop!</h1>
<ul>
<li data-ng-repeat="customer in customers | orderBy:'name'">
{{ customer.name | uppercase }}</li>
</ul>
</div>
</body>
</html>
Filter
Filter
![Page 187: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/187.jpg)
Using Filters -‐ Example <!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Title</title>
<meta charset="UTF-8">
<script src="../angular.min.js" type="text/javascript">
</script>
</head>
<body>
<div data-ng-init=
"customers = [{name:'jack'}, {name:'tina'}, {name:'john'}, {name:'donald'}]">
<h1>Customers</h1>
<ul>
<li data-ng-repeat="customer in customers | orderBy:'name' | filter:'john'">{{
customer.name | uppercase }}</li>
</ul>
</div>
</body>
</html>
![Page 188: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/188.jpg)
Using Filters – User Input Filters the Data <!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Title</title>
<meta charset="UTF-8">
<script src="../angular.min.js" type="text/javascript">
</script>
</head>
<body>
<div data-ng-init=
"customers = [{name:'jack'}, {name:'tina'}, {name:'john'}, {name:'donald'}]">
<h1>Customers</h1>
<input type="text" data-ng-model="userInput" />
<ul>
<li data-ng-repeat="customer in customers | orderBy:'name' | filter:userInput">{{
customer.name | uppercase }}</li>
</ul>
</div>
</body>
</html>
![Page 189: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/189.jpg)
EXERCISE 8 + 9
![Page 190: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/190.jpg)
VIEWS, CONTROLLERS, SCOPE
![Page 191: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/191.jpg)
Model – View -‐ Controllers
• Controllers provide the logic behind your app. – So use controller when you need logic behind your UI
• Use ng-‐controller to define the controller • Controller is a JavaScript Object, created by standard JS object constructor
![Page 192: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/192.jpg)
View, Controller and Scope
View (html fragment)
Controller (view agnos>c!)
$scope
$scope is an object that can be used to communicate between
View and Controller
Model
![Page 193: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/193.jpg)
controller.js
// Angular will inject the $scope object, you don't have to
// worry about it! By using $scope, you can send data to
// view (html fragment)
function NumberCtrl ($scope) {
// $scope is bound to view, so communication
// to view is done using the $scope
$scope.number = 1;
$scope.showNumber = function showNumber() {
window.alert( "your number = " + $scope.number );
};
}
Warning, this will not work from AngularJS 1.3. We will see later on how this is done using module
![Page 194: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/194.jpg)
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Title</title>
<meta charset="UTF-8" />
<style media="screen"></style>
<script src="../angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div>
<div data-ng-controller="NumberCtrl">
<p>Number: <input type="number" ng-model="number"></p>
<p>Number = {{ number }}</p>
<button ng-click="showNumber()">Show Number</button>
</div>
</div>
</body>
</html>
Define the Controller implemented in controller.js
Access $scope.number Access $scope.showNumber()
![Page 195: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/195.jpg)
When to use Controllers
• Use controllers – set up the ini>al state of $scope object – add behavior to the $scope object
• Do not – Manipulate DOM (use data-‐binding, direc<ves) – Format input (use form controls) – Filter output (use filters) – Share code or state (use services)
![Page 196: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/196.jpg)
MODULES, ROUTES, SERVICES
![Page 197: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/197.jpg)
Modules
• Module is an reusable container for different features of your app – Controllers, services, filters, direc>ves...
• All app controllers should belong to a module! – More readability, global namespace clean
• Modules can be loaded in any order • We can build our own filters and direc<ves!
![Page 198: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/198.jpg)
Example: Own Filter // declare a module
var myAppModule = angular.module('myApp', []);
// configure the module.
// in this example we will create a greeting filter
myAppModule.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
};
});
![Page 199: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/199.jpg)
HTML using the Filter
// We will use module myApp
<div ng-app="myApp"> <div> {{ 'World' | greet }}
</div> </div>
![Page 200: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/200.jpg)
angular.module
• The angular.module is a global place for crea>ng, registering and retrieving Angular modules
• Crea>ng a new module – var myModule = angular.module('myMod', []);
• The second argument ([]) defines dependent modules – which modules should be loaded first before this
![Page 201: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/201.jpg)
Template for Controllers // Create new module 'myApp' using angular.module method.
// The module is not dependent on any other module
var myModule = angular.module('myModule', []);
myModule.controller('MyCtrl', function ($scope) { // Your controller code here!
});
![Page 202: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/202.jpg)
Crea>ng a Controller in Module var myModule = angular.module('myModule',
[]);
myModule.controller('MyCtrl', function ($scope) {
var model = { "firstname": "Jack",
"lastname": "Smith" };
$scope.model = model;
$scope.click = function() {
alert($scope.model.firstname);
};
});
![Page 203: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/203.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8" />
<style media="screen"></style>
<script src="../angular.min.js"></script>
<script src="mymodule.js"></script>
</head>
<body>
<div ng-app="myModule"
<div ng-controller="MyCtrl">
<p>Firstname: <input type="text" ng-model="model.firstname"></p>
<p>Lastname: <input type="text" ng-model="model.lastname"></p>
<p>{{model.firstname + " " + model.lastname}}</p>
<button ng-click="click()">Show First name</button>
</div>
</div>
</body>
</html>
This is now the model object from MyCtrl. Model object is shared with view
and controller
![Page 204: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/204.jpg)
EXERCISE 10 -‐ 11
![Page 205: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/205.jpg)
AMD
![Page 206: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/206.jpg)
AMD • JavaScript does not have "classes" or "packages" or "import" • Asynchronous Module Defini<on (AMD) is a JS specifica>on
that defines API for defining code in modules – Load smaller JS files, only when needed – Allow developers define dependencies – Encapsula>on
• Specifica>on is implemented by RequireJS and ScriptManJS • Specifica>on:
– https://github.com/amdjs/amdjs-api/blob/master/AMD.md • Different JS libraries support AMD spec
– RequireJS, curl, lsjs and Dojo
![Page 207: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/207.jpg)
Problem
• Gezng mul>ple files onto a page is to include script tags <script src="file1.js"></script>
<script src="file2.js"></script>
<script src="file3.js"></script>
• All is loaded to global namespace • Some scripts depend each other -‐> order is important.
• Download >me!
![Page 208: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/208.jpg)
Defining Modules
• Use define func>on of RequireJS • Each module in separate file (.js) – File name will be a module ID.
• Modules are dependent on others – Module declares a list of other modules for dependency
– No more includes in right order, modules interact with each other without global namespace
• Module is defined as "factory" – Can be object or func>on that returns a value
![Page 209: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/209.jpg)
Defining and using Modules
Different modules // modules/number.js
define('numberModule', 7);
// modules/album.js
define('album', {
title: 'Haavemaa',
artist: 'Tauski Peltonen',
year: 1997
});
// modules/counter.js
define('counter', function() {
var counter = 0;
return {
increment: function() {
counter++;
},
getValue: function() {
return counter;
}
};
});
Using module require(['album'], function(album) {
console.log(album.title);
});
![Page 210: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/210.jpg)
RequireJS: How to Use?
1. Download file script for Browser or Command line – http://requirejs.org/docs/start.html#get
2. Add RequireJS to your web page (if using browser) <script data-main="scripts/main" src="scripts/require.js">
</script>
3. Use predefined directory structure
![Page 211: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/211.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8" />
<style media="screen"></style>
<!--
Define single entry-point to your app.
data-main attribute tells require.js to load
scripts/main.js after require.js loads.
js is appended by default main -> main.js
www/index.html
scripts/require.js
main.js
modules/module1.js
module2.js
-->
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
<body>
</body>
</html>
![Page 212: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/212.jpg)
main.js
// Load modules and use them
// require() function has two arguments
// 1) array of dependencies
// 2) callback function to execute once all the dependencies have loaded.
// function arguments are the specified dependencies!
require(['modules/number', 'modules/counter', 'modules/album'], function(number, counter, album){
// do something with the loaded modules
console.log(number)
console.log(album.title)
counter.increment();
counter.increment();
console.log(counter.getValue())
});
![Page 213: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/213.jpg)
main.js
// Load modules and use them
// require() function has two arguments
// 1) array of dependencies
// 2) callback function to execute once all the dependencies have loaded.
// function arguments are the specified dependencies!
require(['modules/module1', 'modules/module2'], function(Module1, Module2){
// do something with the loaded modules
var module1 = new Module1();
var module2 = new Module2();
console.log(module1.getName())
console.log(module2.getName())
});
![Page 214: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/214.jpg)
modules/module1+2.js
module1.js define([], function () {
function returnedModule() {
var name = 'Module 1';
this.getName = function () {
return name;
}
};
return returnedModule;
});
module2.js define(['modules/module1'], function (Module1) {
var module1 = new Module1()
function returnedModule() {
var name = 'Module 2: ';
this.getName = function () {
return name + module1.getName();
}
};
return returnedModule;
});
![Page 215: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/215.jpg)
JQuery and RequireJS
• JQuery is AMD compa>ble • Download jquery – file and name it as "jquery.js"
• Amer this you can use it like any other module!
![Page 216: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/216.jpg)
JQuery and RequireJS require(['jquery'], function(jquery){
// do something with the loaded modules
jquery( "#myform" ).submit(function( event ) {
...
event.preventDefault();
});
});
![Page 217: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/217.jpg)
EXERCISE 12
![Page 218: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/218.jpg)
LIBRARY DESIGN
![Page 219: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/219.jpg)
Designing Libraries
• Designing JS libraries are hard – Dynamic nature of the language – Difficult to keep things truly private / sandboxed
• Let’s look at some general principals about designing libraries
• When possible, see how exis>ng libraries have done things..
![Page 220: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/220.jpg)
API Design
• Consistent – Easy to learn when each module have a similar API
• Clean • Well documented • Consider plugin architecture
![Page 221: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/221.jpg)
Sandbox pa?ern
![Page 222: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/222.jpg)
Anonymous Closures
• Create anonymous func>on and execute it immediately
(function () {
// ... all vars and functions are in this
// scope only
// still maintains access to all globals
}());
![Page 223: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/223.jpg)
Defining Modules
• Closures provide handy way of keeping module code sandboxed – Less pollu>on to global namespace – Avoid modules breaking each other – Modules can access globals
• In-‐depth tutorial – h?p://www.adequatelygood.com/2010/3/JavaScript-‐Module-‐Pa?ern-‐In-‐Depth
![Page 224: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/224.jpg)
Defining Modules var MODULE1 = function() {
// Place module implementation here.
// All vars and functions declared here are private to
// this scope.
// Can access globals if needed.
}();
![Page 225: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/225.jpg)
var MODULE1 = function() { // Private stuff (notice the single var pattern) var privateVar1 = "", privateVar2 = "moi", privateFunc1 = function() { /* ... */ }, privateFunc2 = function() { /* ... */ }; function privateFunc3() { /* ... */ } // Public stuff exported as part of an object. Due to the // closure, the public functions can access all the private // vars and functions as well. return { foo: function() { return "Hello World"; }, bar: function() { privateVar1 = "Hello!" }, publicVar1: "", publicVar2: 12 } }(); console.log(MODULE1.foo()); // “Hello World” console.log(MODULE1.publicVar2); // 12 console.log(MODULE1.privateVar1); undefined
![Page 226: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/226.jpg)
About Globals // - Code should not rely on certain global objects to
// be available...
// - Local variables are more efficient
// - Shorter lookup paths for objects
// - Can be minified to reduce file size
var MODULE2 = function(globalWindowObject, documentObject) {
var width = globalWindowObject.innerWidth;
return { prop: width };
}(this, this.document);
console.log(MODULE2.prop);
![Page 227: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/227.jpg)
UNIT TESTING
![Page 228: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/228.jpg)
Test-‐driven development
• Each new feature begins with wri<ng a test! – Test will fail since the produc>on code does not exist yet
• Write the code • Run automated tests to see if if test cases pass
• Automated tests? – We need a framework…
![Page 229: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/229.jpg)
JS Unit Tes>ng Frameworks
• Lot of op>ons – JSUnit, YUI Test, QUnit, Google Closure Tools
![Page 230: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/230.jpg)
QUnit
• QUnit is a JS unit tes>ng framework • Can be used in client and also in server (Node.js) • Was originally developed as part of JQuery – Extracted its own project and became known as "QUnit"
• How? – Download qunit.js and qunit.css – Write a simple HTML page to run the tests – Write the tests
![Page 231: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/231.jpg)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="qunit-1.18.0.css">
<script src="qunit-1.18.0.js"></script>
</head>
<body>
<div id="qunit"></div>
<script type="text/javascript">
function calculate(a, b) {
return a + b;
}
QUnit.test( "calculate test", function(assert) {
assert.ok( calculate(5,5) === 10, "Ok!" );
assert.ok( calculate(5,0) === 5, "Ok!" );
assert.ok( calculate(-5,5) === 0, "OK!" );
});
</script>
</body>
</html>
![Page 232: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/232.jpg)
Three Asser>ons
• Basic – ok( boolean [, message]);
• If actual == expected – equal( actual, expected [, message]);
• if actual === expected – deepEqual( actual, expected [, message));
• Other – http://qunitjs.com/cookbook/#automating-unit-testing
![Page 233: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/233.jpg)
EXERCISE 13
![Page 234: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/234.jpg)
JAVASCRIPT OPTIMIZING
![Page 235: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/235.jpg)
Brief look of Op>mizing
• Script deployment • Code op>miza>on – Loops, strings, DOM access and data access
• Mul>threading with Web Workers • Performance tools
![Page 236: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/236.jpg)
Script Deployment
• Group to have as few files as possible! – Loading one file is much be?er than ten files, HTTP overhead!
• Can be done at build >me or at run >me • Run >me grouping – src=“h?p://site.com/combine?foo.js&bar.js”
![Page 237: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/237.jpg)
Script Deployment
• Minify or gzip your scripts (for example: closure compiler) – Reduces the size – Code gets obfuscated – Some older browsers do not support gzipped files
![Page 238: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/238.jpg)
Code Op>miza>on
• Do not op<mize your code! – Unreadable code – Concentrate on maintainable
• If you have to op<mize – Concentrate code that executed most omen
• Check string and DOM opera<ons – These are slow in JS!
![Page 239: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/239.jpg)
Data and Property Access
• Data and property access may be expensive – document.getElementById(“a”).appendChild(child1); – document.getElementById(“a”).appendChild(child2);
• Cache frequently used objects – var x = document.getElementById(“a”); – x.appendChild(child1); – x.appendChild(child2);
![Page 240: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/240.jpg)
Strings
• Avoid – mystring += “first” + “second” – Creates temporary string in memory
• Use – mystring += “first”; – mystring += “second”;
• Or use Array.join() – myArray = [“first”, “second”]; – var str = myArray.join();
![Page 241: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/241.jpg)
Loops
• Don’t use for-‐in in arrays, requires addi>onal property lookups
• Cache variables! var len = myarray.length; var element = document.getElementById(“id”); for(var i = 0; i<len; i++) {
// Use element
}
![Page 242: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/242.jpg)
Web Workers • Web worker is a JS way of doing things in background. W3C recommenda:on. – “API that allows Web applica>on authors to spawn background workers running scripts in parallel to their main page.”
– Web worker spec is separate spec from HTML5 • Bring mul>threading to your app
– Heavy calcula>ons or long-‐running tasks in the background – Keep UI responsive
• No need to use Web Workers in AJAX (mul>-‐threading on by default)
• Cannot manipulate UI (DOM)!
![Page 243: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/243.jpg)
<!DOCTYPE HTML> <html> <head> <title>Big for loop</title> <script> function sayHello(){ var worker = new Worker('worker.js'); worker.onmessage = function (event) { alert("Completed " + event.data + " iterations" ); }; worker.postMessage(50000); } </script> </head> <body> <input type="button" onclick="sayHello();" value="Say Hello"/> </body> </html>
![Page 244: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/244.jpg)
onmessage = function(event) {
var number = event.data;
for (var i = 0; i <= number; i += 1){
var j = i;
}
postMessage(j);
}
![Page 245: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/245.jpg)
Check Web Worker support
if (typeof(Worker)!=="undefined”) {
}
![Page 246: 00 Advanced Intro to Js All Recovered 141201020204 Conversion Gate02](https://reader034.fdocuments.us/reader034/viewer/2022042615/563db990550346aa9a9e7d9b/html5/thumbnails/246.jpg)
EXERCISE 14