![Page 1: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/1.jpg)
ECMAScriptJussiPohjolainen
1
![Page 2: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/2.jpg)
RecommendedReading
• Recommendedreading• JavaScript:TheGoodPartsbyDouglasCrockford• JavaScript:TheDefiniteGuidebyDavidFlanagan• JavaScriptPatterns:Stoyan Stefanov
• AndGoogle..
2
![Page 3: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/3.jpg)
JavaScripttoday
• EcmaScript isstandardizedsubsetofJavaScript• JavaScriptiskeylanguagetoimplementwebapplications• Possiblecandidateforcross-platformmobiledevelopment
• React,Cordova/Phonegap,Ionic• Serversidedevelopment• Replacing/ComplementingXMLfordatatransfer(REST+JSON)
3
![Page 4: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/4.jpg)
RiseoftheResponsiveSinglePageApp
Image:http://johnpolacek.github.io/scrolldeck.js/decks/responsive/4
![Page 5: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/5.jpg)
Responsive
• Unifiedacrossexperiences• Canbeembeddedasmobileapp• Betterdeploymentand&maintanence• Mobileusersneedtogetaccesstoeverything
Image:http://coenraets.org/blog/wp-content/uploads/2011/10/directory11.png 5
![Page 6: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/6.jpg)
Single-pageApplications(SPA)
• Webappthatfitsonasinglewebpage• FluidUX,likedesktopapp• ExampleslikeGmail,Googlemaps
• Htmlpagecontainsmini-views (HTMLFragments) thatcanbeloadedinthebackground• Noreloadingofthepage,betterUX• Requireshandlingofbrowserhistory,navigationandbookmarks
6
![Page 7: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/7.jpg)
RiseoftheRESTandJSON
• RESTisaonewayofcommunicatingbetweencomputersovertheinternet• DatacanbesendviaXMLorJSONusingHTTP• HTTPGET
• http://something/employee/1• Result
• {id: 1, name: "jack"}• IfbothfrontendandbackendisJS,objectsendingandparsingextremelyeasy
7
![Page 8: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/8.jpg)
RiseoftheJSBackend:NodeJS
• OpensourceJSruntimeenvironment• UsesV8(Chrome)JSengine
• AdditionalmodulesontopofJStoprovidefunctionality• Webserver,systemi/o,networking,...
• Lotofthirdpartymodulesavailable
8
![Page 9: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/9.jpg)
Native iOS App
iOS WebView
index.htmlapp.js
angularjs.jsionic.jscordova.js
stylesheet.css
Native Android App
Android WebView
index.htmlapp.js
angularjs.jsionic.jscordova.js
stylesheet.css
UsingCordovait'spossibletoaccessmobiledevicenativefeatures
WebServerNode.js+Express+Mongo
app.jspackage.json
modules/express/modules/mongodb/
MongoDB
[{name: 'jack'}, {name: 'tina'}, {..}, {..}]
HTTP GET (ajax) Request: http://server.com/employees/1
HTTP Responsecontent-type: application/json {name: 'jack'}
FrontendIonic+Cordova+AngularJS
BackendNode.JS+Express+Mongo
HTTP POST Request: http://server.com/employees/{name: 'amanda'}
HTTP Responsecontent-type: text/plainhttp://server.com/employees/3
CommunicationRESTandJSON
9
![Page 10: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/10.jpg)
Frontend
10
![Page 11: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/11.jpg)
JavaScript,LiveScript,JScript,ECMAScript?
• JavaScript• DevelopedbyNetscape• OriginallyJavaScript,thenLiveScriptandthenbacktoJavaScript.
• JScript• MicrosoftmadetheirownversionoftheJavaScript
• Leadtocompatibilityproblems• =>ECMAScript,efforttostandardizedifferentversionsoftheJ(ava)Script
11
![Page 12: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/12.jpg)
ECMAScript
• ECMAScript isascriptinglanguage,standardizedbyEcmaInternational• InBrowsers,ECMAScript iscommonlycalledJavaScript
• JavaScript=Native(EcmaScript)+Hostobjects(browser)
• Java/ECMAscript isnowdays heavilyusedwhencreatingweb/mobileandevenDesktop- apps
12
![Page 13: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/13.jpg)
LearningPathforFront-end
CoreEcmaScript
BrowserHostObjectsJavaScriptinFront-end
HTML5
CSSStatic
Web-pages
JavaScriptFrameworks:React,AngularJS,...
13
![Page 14: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/14.jpg)
EcmaScriptVersions
Year Edition Naming
1997 1 ..
1998 2 ..
1999 3 Regex,betterstringhandling,try/catch,...
Abandoned 4 ..
2009 5 strictmode,gettersandsetters,JSON..
2015 6 ES2015 classes, modules,arrowfunctions,collections...
2016 7 ES2016 Math.pow =>**,array.prototype.includes
2017 8 ES2017 await/async
14
![Page 15: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/15.jpg)
FromJScripttoTypeScript
• TypeScript isasuperset ofEcmaScriptdevelopedbyMicrosoft• Ithastypes!
• WhenEcmaScript6th Editionwasworkingprogress,typescriptgavealreadyclasses,modules,arrowfunctionsyntax.• Nowthatthe6th Ed.isreadytheadditionalbenefitusingTypeScriptistypes(andotherslikeinterfaces,generics...)• TypeScriptiscompiledtoEcmaScriptusingcompiler• It'sfirstclasslanguageinMicrosoftVisualStudioandinframeworkslikeAngular2.0
15
![Page 16: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/16.jpg)
typescript.ts
> cat typescript.ts
var variable : string = "typescript";
console.log(variable);
> tsc typescript.ts
> cat typescript.js
var variable = "typescript";
console.log(variable);
Noticethatcompilercompilestypescripttojavascriptanditlosesthestringtypebecausethatisnotpartofjs!
16
![Page 17: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/17.jpg)
BenefitofusingCompiler
> cat typescript.ts
var variable : string = "typescript";
variable = 8;
console.log(variable);
> tsc typescript.ts
typescript.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
17
![Page 18: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/18.jpg)
ToolsforLearningEcmaScript
18
![Page 19: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/19.jpg)
ChooseaCode-Editor/IDE
• AtombyGitHub• Customizablefreeeditor• Built-inpackagemanagerforinstallingnewpackages• Worksacrossoperatingsystems:OSX,LinuxorWindows
• VisualStudioCodebyMicrosoft• InadditiontoAtom...• Hasbuilt-insupport forJavaScript,TypeScriptandNode.js• Alsoextensiblebyplug-ins• GoesbeyondsyntaxhighlightingandprovidesautocompletewithIntelliSenseanddebugger
• WebStormbyJetBrains• FullIDE• Supportfor:Angular,React,Ionic,Cordova,ReactNative,Electron,Node.js..• Debugger,Unittesting
19
![Page 20: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/20.jpg)
ChooseRuntimeEnvironment
• Forgetthebrowserfornow!• EcmaScriptisastandardandtherearemultipleimplementationsforruntimeenvironment;JavaScriptEngines• Canbetraditionalinterpreterorutilizejust-intimecompilationtobytecode
• Differentenginesavailable• V8byGoogle,powersChrome• NitrobyApple,powersSafari• ChakrabyMicrosoft,powersEdge• SpiderMonkey by MozillaFoundation,powersFirefox
• Rhino(JavaImplementation)managedbyMozillaFoundation• ...
20
![Page 21: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/21.jpg)
RuntimeEnvironment:Node.js
• EasiestwaytouseV8JSEngineistoinstallNode.js• https://nodejs.org/en/
• Node.jsisbuiltontopofV8 andis"the"technologytousewhencreatingbackendapplicationusingJS• Alsoprovidespackageecosystem,npm(nodepackagemanager),thatcanbeusedtomanagejs-libraries
• npmisheavilyusedwhencreatingJavaScriptappstoday
• Node.js supportforES2015is99%->GoodJSenvironmentforlearningEcmaScript• http://node.green/
21
![Page 22: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/22.jpg)
HelloWorld
22
![Page 23: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/23.jpg)
23
![Page 24: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/24.jpg)
24
![Page 25: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/25.jpg)
VisualStudioCode- tips
• InstallCodeRunner- extensionforeasierrunningofnode(andother)apps• Debugging Nodeappsissupportedbydefault!• InstallNode.jsextensionpack
• ESLint• npm• JavaScriptSnippets• ...
25
![Page 26: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/26.jpg)
Lab
26
![Page 27: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/27.jpg)
npmpackagemanager
• Node.jscontainsanpm thatcanbeusedtoinstallvariousextensionsandpackages• Youcaninstallpackages
• local(specifictoyourapp)• ./node_modules
• global(canbeusedeverywhere)• /usr/local/lib/node_modules
• Whencreatinganodeproject,usuallyyouwillhaveafilepackage.jsondescribingtheprojectandit'sdependencies
27
![Page 28: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/28.jpg)
Packages
28
![Page 29: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/29.jpg)
Tryingtousepackage
29
![Page 30: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/30.jpg)
npm init
Createspackage.json
withinformationaboutourproject
30
![Page 31: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/31.jpg)
npm install project-name-generator --save
Now dirfordownloadedpackages
31
![Page 32: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/32.jpg)
catpackage.json
package.jsonisupdated
32
![Page 33: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/33.jpg)
cdnode_modules
Theproject-name-generatordependsonotherpackagewhichisdownloadedalso!
33
![Page 34: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/34.jpg)
catproject-name-generator/package.json
34
![Page 35: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/35.jpg)
nodemyapp.js
35
![Page 36: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/36.jpg)
ESLint
• ESLintislintingutility(codequality)toolforJavaScript• Toinstall
• npm install --save-dev eslint• ESLintrequiresaconfigurationfile• Tocreateone,use
• ./node_modules/eslint/bin/eslint.js --init• Youcananswertoquestionsaboutstyleguideortakepopularstyleguides
36
![Page 37: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/37.jpg)
AnsweringtoStyleGuideQuestions
37
![Page 38: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/38.jpg)
RunningESLint
Addno-console:offtoinitfile
38
![Page 39: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/39.jpg)
module.exports = {"env": {
"es6": true,"node": true
},"extends": "eslint:recommended","parserOptions": {
"sourceType": "module"},"rules": {
"no-console": "off","indent": [
"error",4
],"linebreak-style": [
"error","unix"
],"quotes": [
"error","double"
],"semi": [
"error","always"
]}
};
Addno-console:offtoinitfile
Lotofruleshttps://eslint.org/docs/rules/
39
![Page 40: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/40.jpg)
VSCodehasalsoESLintpluginfor
integratinglintingincodeeditor
40
![Page 41: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/41.jpg)
DifferentStyleGuides
• AirBnb• Google• "Standard"Style• Crockford'sCodingStandardsforJavaScript• NodeJSStyleGuide
41
![Page 42: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/42.jpg)
HolyWaraboutStyles:Indentation
https://hackernoon.com/what-javascript-code-style-is-the-most-popular-5a3f5bec1f6f 42
![Page 43: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/43.jpg)
HolyWaraboutStyles:Linttool?
https://hackernoon.com/what-javascript-code-style-is-the-most-popular-5a3f5bec1f6f 43
![Page 44: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/44.jpg)
ESLint:ChoosingStyleGuide
44
![Page 45: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/45.jpg)
StandardRules
• 2spacesforindentation• Singlequotesforstring• Nounusedvariables• Nosemicolons• ...• https://standardjs.com/
45
![Page 46: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/46.jpg)
Lab
46
![Page 47: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/47.jpg)
QuickintrotoECMAScript
47
![Page 48: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/48.jpg)
References
• EcmaScript5.1LanguageSpesification• http://www.ecma-international.org/ecma-262/5.1/
• EcmaScript6LanguageSpesification(June2015)• http://www.ecma-international.org/ecma-262/6.0/index.html
• ReallygoodJavaScriptReferencefromMozilla• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
• W3SchoolshavelotofJSstufftoobutremember• http://meta.stackoverflow.com/questions/280478/why-not-w3schools-com
48
![Page 49: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/49.jpg)
GrammarandTypes
49
![Page 50: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/50.jpg)
ECMAScriptBasics
• BorrowsmostofthesyntaxfromJavabutinfluencesfromotherlanguagesalso• JavaandJavaScriptaretotallydifferentasatechnology!
• ECMAScriptiscase-sensitive• Instructionsarecalledstatements andareseparatedtypically usingsemicolon (;)• StandardJavaScriptLinteravoidssemicolonusage
50
![Page 51: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/51.jpg)
Aboutsemicolons
• Youcanwrite• console.log("hello");• console.log("world");
• Or• console.log("hello")• console.log("world")
51
![Page 52: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/52.jpg)
Comments
//Oneline
/*multi-line*/
/*Nonested/*comments*/allowed*/
52
![Page 53: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/53.jpg)
Variables
• Todeclareavariableusekeywordvarorlet• var x = 99;
• Variablenaminghassomerules• muststartwithaletter,underscore(_),dollarsign
• A-Zisdifferentfroma-z(casesensitive)• Afterthefirstletter,digitscanbeused(0-9)
53
![Page 54: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/54.jpg)
VariableScope
• Globalvariable• Declarevariableoutsideoffunction,availableeverywhere
• Localvariable• Declarevariableinsideoffunction,availableinthatfunction
• BeforeES2015,noblockstatement!
54
![Page 55: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/55.jpg)
var globalVariable = 1;
function doIt() {
var functionVariable = 4;
if(true) {
var anotherFunctionVariable = 5;
}
console.log(functionVariable); // 4
console.log(anotherFunctionVariable); // 5
}
if(true) {
var anotherGlobalVariable = 3;
}
console.log(globalVariable); // 1
console.log(anotherGlobalVariable); // 3
doIt(); // 4
// 5
Itisglobal!
Functionscope!
55
![Page 56: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/56.jpg)
VariableHoisting
Thiscodeisthesame...var globalVariable = "Hello";
function doIt() {
console.log(globalVariable);
if(true) {
var globalVariable = "World";
}
}
doIt();
console.log(globalVariable);
...thanthisvar globalVariable = "Hello";
function doIt() {
var globalVariable;
console.log(globalVariable);
if(true) {
globalVariable = "World";
}
}
doIt();
console.log(globalVariable);
Itishoisted!
56
![Page 57: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/57.jpg)
VariableHoisting
function doIt() {
console.log(myVar); // undefined
if(true) {
var myVar = "Hello World";
}
}
doIt();
57
![Page 58: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/58.jpg)
ES2015VariableHoisting:let
function doIt() {
console.log(myVar); // myVar is not defined!
if(true) {
let myVar = "Hello World";
}
}
doIt();
Itisnothoisted!
58
![Page 59: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/59.jpg)
WordAboutES2015
• WhendevelopingtobackendusingNode.jsdevelopercanchoosetheversionofNode.jsandusefreelymostofES2015features• Onthefront-endthingsgetcomplicatedsinceusermayhavewhateverbrowser andthosemaynotsupportES2015• ES2015canbecompiledtoolderES!
59
![Page 60: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/60.jpg)
ES2015:const
• Constantcannotbechangedthroughassignment• constvariablesarenothoisted
const PI = 3.14;
PI = 99;
console.log(PI);
60
![Page 61: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/61.jpg)
ES2015->ES5
Object.defineProperty(typeof global === "object" ? global: window, "PI", {
value: 3.141593,
enumerable: true,
writable: false,
configurable: false
})
console.log(PI);
61
![Page 62: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/62.jpg)
DataTypes:Primitivetypes(6)
Type Possiblevalues
boolean true orfalsenull null
undefined undefined
number 41, 3.444
string "Hello World"
symbol uniqueandimmutableinstances(ES2015)
Allotherareobjects!
62
![Page 63: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/63.jpg)
var booleanValue = true;
var stringValue = "some text";
var undefinedValue;
var numberValue = 4;
var nullValue = null;
// boolean
console.log(typeof booleanValue)
// string
console.log(typeof stringValue)
// undefined
console.log(typeof undefinedValue)
// number
console.log(typeof numberValue)
// object
console.log(typeof nullValue)
// false
console.log(null instanceof Object)
Languagedesignerror!
63
![Page 64: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/64.jpg)
PrimitivetypesvsObjecttypes
• Let'slookatobjectslateronmorecarefully• ObjectinESisjustavariablecontainingproperties:
• var myObject = {"name": "Jack"};• console.log(myObject.name);
• Objectsarepassedbyreference• Primitivetypesarepassedbyvalue
64
![Page 65: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/65.jpg)
String
• Stringliteralcontainscharactersenclosedby""or''var x = "Hello World";
• InES2015alsopossibilitytousetemplateliterals:`var mystring = `Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer quis ante at
urna commodo dapibus. Aenean blandit, neque eget pellentesque
viverra, arcu nulla volutpat justo, ut congue est odio id justo.`
• ThereisstringprimitivetypeandStringobject!• ESwillmakeautomaticcastingbetweenthesetwo,soitispossibletoaccessallthemethodsprovidedbytheString:• console.log( x.charAt(0) );
65
![Page 66: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/66.jpg)
DataTypeConversion
5 + null // returns 5 because null is converted to 0
"5" + null // returns "5null" because null is converted to "null"
"5" + 1 // returns "51" because 1 is converted to "1"
"5" - 1 // returns 4 because "5" is converted to 5
66
![Page 67: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/67.jpg)
AboutNumbers
• Number(value),convertsentirestring• var i = Number("12");
• parseInt(value[, radix]), convertsstartofthestring• var i = parseInt("12px”, 10);• Radix?
• 10=>integernumber,8=>octalnumber,16=>hexadecimal
• NaN (Not a Number),checkusingisNaN(variable)• Resultoferroneousoperations
67
![Page 68: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/68.jpg)
IndexedCollection:Arrays
• Arraysareobjectsbutinadditiontheyhavemoremethodsandauto-incrementkey-values• var stuff = ["a", "b", "c"]
• Thekeysarenow0,1and2• Thelengthofthearrayis3andit'slinkedtonumericalproperties
68
![Page 69: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/69.jpg)
Input&Output– Depends!
• InBrowsers• Input:HTMLFormsorwindow.prompt("", "");• Output:DOMmanipulation,document.write("") orwindow.alert("");
• InV8/NodeJSorRhino/Spidermonkey• OutputtoCLI:print("..");• InputfromCLI:Isnotthateasy...
• Debugging• console.log("");
69
![Page 70: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/70.jpg)
Lab
70
![Page 71: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/71.jpg)
ControlFlow,LoopsandIteration
71
![Page 72: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/72.jpg)
ConditionalStatements
if (condition_1) {
statement_1;
} else if (condition_2) {
statement_2;
} else if (condition_n) {
statement_n;
} else {
statement_last;
}
72
![Page 73: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/73.jpg)
FalseValues
let array = [false, undefined, null, 0, NaN, ""];
for(let i=0; i<array.length; i++) {
if(array[i]) {
console.log("true");
} else {
console.log("false");
}
}
73
![Page 74: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/74.jpg)
Comparison:trueorfalse?
let x = new Boolean(false);
if(x) {
console.log("true");
} else {
console.log("false");
}
74
![Page 75: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/75.jpg)
Comparison:trueorfalse?
let x = new Boolean(false);
if(x == false) {
console.log("true");
} else {
console.log("false");
}
75
![Page 76: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/76.jpg)
Equality
• Strictequality• ===
• Looseequality• ==
• ES2015• Object.is
76
![Page 77: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/77.jpg)
77
![Page 78: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/78.jpg)
Testing
console.log(Object.is(0, -0)); // false
console.log(0 === -0); // true
console.log(Object.is(-0, -0)); // true
console.log(Object.is(NaN, NaN)); // true
console.log(NaN === NaN); // false
78
![Page 79: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/79.jpg)
Testing:NaN// cast String -> Number
let variable = Number("hello world");
if(variable == NaN) { // false
console.log("0) It was not a number")
}
if(variable === NaN) { // false
console.log("1) It was not a number")
}
if(Object.is(variable, NaN)) { // true
console.log("2) It was not a number");
}
if(isNaN(variable)) { // true
console.log("3) It was not a number");
}
79
![Page 80: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/80.jpg)
switchcase
switch (expression) {
case label_1:
statements_1
[break;]
case label_2:
statements_2
[break;]
...
default:
statements_def
[break;]
}
80
![Page 81: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/81.jpg)
while
let i=0;
while(i < 10) {
console.log(i);
i = i + 1;
}
81
![Page 82: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/82.jpg)
do-while
let i=0;
do {
console.log(i);
i = i + 1;
} while(i < 10);
82
![Page 83: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/83.jpg)
for
for(let i = 0; i < 10; i = i + 1) {
console.log(i);
}
83
![Page 84: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/84.jpg)
for...of– forarrays
let array = ["jack", "tina"];
// Traditional forfor(let i = 0; i < array.length; i++) {
console.log(array[i]);}
// for - offor(let item of array) {
console.log(item);}
84
![Page 85: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/85.jpg)
for...of– forarrays
let array = ["jack", "tina"];
// 0 => "jack", 1 => "tina", "key" => "value"
array["key"] = "value";
// for - of
for(let item of array) {
console.log(item); // ??
}
85
![Page 86: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/86.jpg)
for...in– forobjects
let array = ["jack", "tina"];
// 0 => "jack", 1 => "tina", "key" => "value"
array["key"] = "value";
// for - in
for(let item in array) {
console.log(item); // ??
}
86
![Page 87: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/87.jpg)
for...in– forobjects
let object = {"key1": "value1", "key2": "value2"};
for(let key in object) {
console.log(key);
console.log(object[key])
}
87
![Page 88: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/88.jpg)
NumbersandText
88
![Page 89: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/89.jpg)
Aboutnumbers
• Allnumbersaredouble-precision64-bit• Largestsafeinteger:9007199254740991
• Safe?Youcandocalculationsanddisplaynumberscorrectly
• Nospecifictypeforintegers• Alsosymbolicvalues
• +Infinity, -Infinity, NaN
let largeNumber = Math.pow(2, 53) - 1;
console.log(largeNumber == Number.MAX_SAFE_INTEGER); // true
console.log(largeNumber + 1 == largeNumber + 2); // true
89
![Page 90: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/90.jpg)
Number// Largest integer valueconsole.log(Number.MAX_SAFE_INTEGER);
// Largest floating point valueconsole.log(Number.MAX_VALUE);
// Smallest floating point valueconsole.log(Number.MIN_VALUE);
// Same valuesconsole.log(Number.POSITIVE_INFINITY) console.log(+Infinity);console.log(Infinity);
// Same valuesconsole.log(Number.NEGATIVE_INFINITY)console.log(-Infinity);
// Same valuesconsole.log(Number.NaN);console.log(NaN);
90
![Page 91: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/91.jpg)
Number
Number.parseFloat(..)
Number.parseInt(..)
Number.isFinite(..)
Number.isInteger(..)
Number.isNaN(..)
Number.isSafeInteger(..)
91
![Page 92: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/92.jpg)
Math
Math.PI
Math.abs(..)
Math.min(..)
Math.max(..)
Math.random()
Math.round(..)
Math.sqrt(..)
...
92
![Page 93: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/93.jpg)
Stringobjects
• EcmaScripthasStringprimitivetypeandobject• Primitivetypeiscastedtoobjectwhenneeded
• Useprimitivetype!
• Stringobjecthasvarietymethodsthatyoucanuse
let s = new String('foo');
console.log(s); // [String: 'foo']
console.log(typeof s); // object
93
![Page 94: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/94.jpg)
SomeStringmethods
• charAt• startsWith• endsWith• split• slice• substring• match• replace
• toLowerCase• toUpperCase• trim
94
![Page 95: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/95.jpg)
Date,TimeandNumberformatting
• Intlnamespacehaslanguagesensitivedate,timeandnumberformatting• Forformattingdatesandtime
• Intl.DateTimeFormat• Forformattingnumbers
• Intl.NumberFormat• NotethatNode.jsisbundledonlywithEnglish!
var date = new Date();
var dateTimeFormatter = newIntl.DateTimeFormat('fi-FI');
console.log(dateTimeFormatter.format(date));
95
![Page 96: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/96.jpg)
Lab
96
![Page 97: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/97.jpg)
IndexedCollectionsArrays...
97
![Page 98: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/98.jpg)
CreatinganArray
// These all are equal...
let arr1 = new Array("hello", "world");
let arr2 = Array("hello", "world");
// But this is usually preferred:
let arr3 = ["hello", "world"];
98
![Page 99: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/99.jpg)
CreatinganArraywithgivensize
const ARRAY_LENGTH = 10;
let arr1 = new Array(ARRAY_LENGTH);
// OR
let arr2 = [];
arr2.length = ARRAY_LENGTH;
99
![Page 100: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/100.jpg)
var stuff = ["a", "b", "c"]
console.log(stuff[0]); // a
console.log(stuff[1]); // b
console.log(stuff[2]); // c
console.log(stuff.length); // 3
// Array's length and numerical properties are connected
stuff.push("d")
console.log(stuff.length); // 4
stuff["key"] = "value";
console.log(stuff); // [ 'a', 'b', 'c', 'd', key: 'value' ]
console.log(stuff.length); // 4!
delete stuff["key"];
console.log(stuff); // [ 'a', 'b', 'c', 'd' ]
stuff[4] = "e";
console.log(stuff); // [ 'a', 'b', 'c', 'd', 'e' ]
console.log(stuff.length); // 5
stuff = ["a", "b", "c"];
stuff[9] = "e";
console.log(stuff); // [ 'a', 'b', 'c', , , , , , , 'e' ]
console.log(stuff.length); // 10
100
![Page 101: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/101.jpg)
.length
• lengthwillreturnlastelementindex+1• Itispossibletochangelengthatruntime• Ifgivingshorterlength,thearrayistruncated(removesitems)
101
![Page 102: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/102.jpg)
IteratingoverArrays
1. Traditionalfor2. for of
3. forEach
4. for in (DON'T)
102
![Page 103: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/103.jpg)
forEach(EcmaScript5th Edition)
let colors = ['red', 'green', 'blue'];
colors.forEach(function(color) {
console.log(color);
});
103
![Page 104: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/104.jpg)
ArrayMethods
• concat()• join()• push()• pop()• shift()• unshift()• slice()• splice()
• reverse()• sort()• indexOf()• forEach()• map()• filter()• every()• some()• reduce()
104
![Page 105: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/105.jpg)
everyandsome- example
let arr = ["apple", "banana", "carrot", "apple"];
// Checks all the values, if one of them does not// match with given condition, return value is false.let returnValue1 = arr.every(function (value, index, array) {
return value.length > 1; }
); console.log(returnValue1); // true
// Checks all the values, if one of them matches with// given condition, return value is true.let returnValue2 = arr.some(function (value, index, array) {
return value === "apple"; }
);
console.log(returnValue2); // true
105
![Page 106: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/106.jpg)
KeyedCollections:MapandSet
106
![Page 107: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/107.jpg)
Map
• Mapobjectisasimplekey/valuemapcollection• Youcaniterateitemsininsertionorder• Keyscanbewhatevervalue• Sizeiseasilyavailable
107
![Page 108: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/108.jpg)
Examplevar animals = new Map();
animals.set('dog', 'woof');
animals.set('cat', 'meow');
console.log(animals.size); // 2
animals.delete('dog');
console.log(animals.has('dog')) // false
for (var [key, value] of animals) {
console.log(key + ' goes ' + value);
}
animals.clear();
console.log(animals.size);
108
![Page 109: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/109.jpg)
Set
• Uniquevalues• Insertionorderisprovided
var mySet = new Set();
mySet.add(1);
mySet.add(1);
mySet.add(2);
// 1 2
for (let item of mySet) {
console.log(item);
}
// casting
let array = Array.from(mySet);
console.log(array);
109
![Page 110: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/110.jpg)
Lab
110
![Page 111: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/111.jpg)
Functions
111
![Page 112: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/112.jpg)
Functions
• FundamentalbuildingblockinEcmaScript• Setofstatementsthatperformsataskorcalculatesavalue• Functionsareobjects!
112
![Page 113: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/113.jpg)
SimpleFunction
function doIt() {
console.log("Hello World");
}
doIt();
113
![Page 114: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/114.jpg)
PassingArgument
function doIt(value) {
console.log(value);
}
doIt("Hello World");
114
![Page 115: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/115.jpg)
Passingargumentsandreturningvalue
function doIt(a, b) {
return a + b;
}
console.log( doIt(5,5) );
115
![Page 116: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/116.jpg)
PredefinedArgument
function multiply(a, b = 1) {
return a * b;
}
console.log(multiply(5));
116
![Page 117: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/117.jpg)
Functionsareobjects
function doIt1(a, b) {
return a + b;
}
console.log( doIt1(5,5) );
// The same than
var doIt2 = new Function("a","b", "return a+b;");
console.log ( doIt2(5,5) );
117
![Page 118: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/118.jpg)
Andbecausetheyareobjects...
let functionObject = new Function("a","b", "return a+b;");
let anotherObject = functionObject;
console.log ( functionObject(5,5) );
console.log ( anotherObject(5,5) );
118
![Page 119: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/119.jpg)
PassingFunctionObjects
function divide(a, b, success, error) {if(b === 0) {
error("Cannot divide with zero");} else {
let result = a / b;success(result);
}}
function onSuccess(result) {console.log(result);
}
function onError(message) {console.log(message);
}
divide(5, 0, onSuccess, onError);
119
![Page 120: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/120.jpg)
arguments
function doIt() {
for(let item of arguments) {
console.log(item)
}
}
doIt("a");
doIt("a", "b");
doIt("a", "b", "c");
Predefinedpropertyoffunctions.Youcanfetchallthe
argumentsfromthearray
120
![Page 121: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/121.jpg)
FunctionScoping:Works!
greeting("hello world");
function greeting(msg) {
console.log(msg);
}
121
![Page 122: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/122.jpg)
FunctionScoping:DoesnotWork!
greeting("hello world");
var greeting = function (msg) {
console.log(msg);
}
variablegreetingishoistedandthe
valueisundefined
122
![Page 123: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/123.jpg)
AnonymousFunction
greeting("hello world");
var greeting = function (msg) {
console.log(msg);
}
Anonymousfunction
declaration
123
![Page 124: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/124.jpg)
Rememberthis?
function divide(a, b, success, error) {if(b === 0) {
error("Cannot divide with zero");} else {
let result = a / b;success(result);
}}
function onSuccess(result) {console.log(result);
}
function onError(message) {console.log(message);
}
divide(5, 0, onSuccess, onError);
124
![Page 125: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/125.jpg)
Rememberthis?
function divide(a, b, success, error) {if(b === 0) {
error("Cannot divide with zero");} else {
let result = a / b;success(result);
}}
function onSuccess(result) {console.log(result);
}
function onError(message) {console.log(message);
}
divide(5, 0, onSuccess, onError);
Insteadofpassingnamedfunctionswecoulduseanonymous
functions
125
![Page 126: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/126.jpg)
Anonymousfunctions
function divide(a, b, success, error) {
if(b === 0) {
error("Cannot divide with zero");
} else {
let result = a / b;
success(result);
}
}
divide(5, 0, function(result) {
console.log(result);
}, function(message) {
console.log(message);
});
Passinganonymousfunctions
126
![Page 127: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/127.jpg)
Pattern:AvoidGlobals
(function() {
var thisIsNotGlobalVariable = "hello";
console.log(thisIsNotGlobalVariable);
})()
127
![Page 128: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/128.jpg)
ES2015:ArrowSyntax
function divide(a, b, success, error) {
if(b === 0) {
error("Cannot divide with zero");
} else {
let result = a / b;
success(result);
}
}
divide(5, 0, result => console.log(result),
message => console.log(message));
Passinganonymousfunctionsusingthearrowsyntax:simplersyntaxandlexicalthis
- keyword
128
![Page 129: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/129.jpg)
Lab
129
![Page 130: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/130.jpg)
FunctionthatreturnsaFunction
function doIt() {function hello() {
console.log("Hello World");}
return hello;}
var func = doIt();func();
130
![Page 131: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/131.jpg)
function doIt(condition) {
let myFunc;
if(condition) {
myFunc = function() {
console.log("Hello");
}
} else {
myFunc = function() {
console.log("World");
}
}
return myFunc;
}
doIt(true)();
doIt(false)();
131
![Page 132: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/132.jpg)
Closures
function outer() {let x = 20;function inner() {
console.log(x);
}return inner;
}
var innerFunction = outer();// is x still in memory?innerFunction();
Yes!Whenreturninginnerfunctionthatusesouterfunctionsvariables,thosevariablesarestoredin
memory.
132
![Page 133: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/133.jpg)
Pattern:Privatemembervariables
function createObject() {let privateName = "Jack";let object = {
getName: function() {return privateName;
},setName: function(name) {
privateName = name;}
}return object;
}
var person = createObject();console.log(person.getName());person.setName("Tina");console.log(person.getName());
133
![Page 134: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/134.jpg)
Lab
134
![Page 135: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/135.jpg)
Objects
135
![Page 136: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/136.jpg)
Objects
• Objectiscollectionofproperties• propertyisaassociationbetweenkeyandvalue• valuecanbeforexampleafunction->alsocalledmethod
• Objects,likefunctionsareafundamentalpartofEcmaScript• Thekeysmustbestring,ifnumbersused,itwillmakeatypecast
• Sokeyscanbewhateveriftheycanbeconvertedintoastring
136
![Page 137: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/137.jpg)
ObjectCreation
• Objectinitializer• let o = {};
• UsingObjectconstructor• let o = new Object();
• UsingCustomconstructor• let o = new Car();
• Object.create (usedininheritance)• let dog = Object.create(animal);
137
![Page 138: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/138.jpg)
ObjectInitializer
// Object initializer syntax {}
let object = { key: "value",
"hello": "world",
2: "another" };
console.log(object.key);
console.log(object["key"]);
console.log(object.hello);
console.log(object["2"]);
Alsopossibletoaccessusing[]syntax
Insomecases[]syntaxismandatory..ifkeyisnot
avalidjsidentifier138
![Page 139: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/139.jpg)
ObjectConstructor
let object = new Object();
object.key = "value";
object.hello = "world";
object["2"] = "another";
Possibilitytoaddpropertiesinruntime
139
![Page 140: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/140.jpg)
Dynamickey
let random = Math.random() * 100;
let object = {};
object.mykey = "value1"; // {mykey: "value1"}
object.random = "value2"; // {mykey: "value1", random: "value2"}
object[random] = "value3"; // {mykey: "value1", random: "value2", 46.123: "value3"}
Mustusebracketsfordynamickey!
140
![Page 141: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/141.jpg)
EcmaScript5:Preventextensions,Seal,Freeze
Add Delete Modify
Object.preventExtensions NO YES YES
Object.seal NO NO YES
Object.freeze NO NO NO
141
![Page 142: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/142.jpg)
PreventExtensions
var obj1 = {id: 1};
Object.preventExtensions(obj1);
obj1.name = "Jack";
obj1.id = 3;
delete obj1["id"]; Failssilentlyunlessinstrictmode
142
![Page 143: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/143.jpg)
Seal
var obj = {id: 1};
Object.seal(obj);
obj2.name = "Jussi";
obj2.id = 4;
delete obj2["id"];
143
![Page 144: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/144.jpg)
Freeze
var obj = {id: 1};
Object.freeze(obj);
obj.name = "Jussi";
obj.id = 4;
delete obj["id"];
144
![Page 145: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/145.jpg)
EcmaScript5:Object.defineProperty
var obj = {};
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
});
console.log( obj.name );
145
![Page 146: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/146.jpg)
Examplevar obj = {};
Object.defineProperty( obj, "name", {
value: "jeppe",
writable: false, // property cannot be changed
enumerable: false, // will NOT be iterated in for in
configurable: true // can be deleted
});
obj.name = "tina";
console.log(obj.name);
for(var key in obj) {
console.log(key);
}
Cannotchange
Nothinginhere146
![Page 147: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/147.jpg)
ConstructorFunction
function Person(name) {
this.name = name;
}
var tina = new Person("Tina");
console.log(tina.name);
Writethefunctionnamewithcapital(convention)
Usenew– keywordtocreateobject
this referstotina
147
![Page 148: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/148.jpg)
Whathappenshere?
function Person(name) {
this.name = name;
}
var tina = Person("Tina");
console.log(name)
Forgottousethenewword!
148
![Page 149: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/149.jpg)
Pattern:Preventingmisuse
function Person(name) {
if(!(this instanceof Person)) {
throw new TypeError("Cannot call a constructor function without new.");
}
this.name = name;
}
var tina = Person("Tina");
Typecheckingofthis
ifnewismissing,throwerror
149
![Page 150: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/150.jpg)
EcmaScript2015:Class
class Circle {constructor (radius) {
this.radius = radius;}
getArea() {return Math.PI * this.radius * this.radius;
}}
var c = new Circle(5);console.log(c.getArea());
150
![Page 151: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/151.jpg)
EcmaScript2015:Class
class Circle {constructor (radius) {
this.radius = radius;}
getArea() {return Math.PI * this.radius * this.radius;
}}
var c = new Circle(5);
console.log(c.getArea());
Hasprebuiltsupportforcheckingifnewkeywordis
usedornot.Ifnewkeywordismissing,this
willfail!
151
![Page 152: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/152.jpg)
Valuecanbeanything,likefunctions
let MyMath = {abs: function (value) {
if (value < 0) {return value * -1;
} else {return value;
}}
};
console.log ( MyMath.abs(-7) );
152
![Page 153: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/153.jpg)
UsageofArrowFunctionandTernaryOperationlet MyMath = {
abs: (value) => value < 0 ? value * -1 : value
};
console.log ( MyMath.abs(-7) );
153
![Page 154: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/154.jpg)
Enumerating:for...in
var object = {key1: "value1", key2: "value2"};
for (var key in object) {
console.log(key + " = " + object[key]);
}
154
![Page 155: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/155.jpg)
Lab
155
![Page 156: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/156.jpg)
Keywordthis
156
![Page 157: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/157.jpg)
Keywordthis
• Node.jsisalittlebitdifferenttoEcmaScriptwhenitcomestothekeywordthis• Whenusingthisinbrowsers,youwilldifferentresultsthaninNode• OnemajordifferenceisthatNodeusesmoduleswhereonefileisonescope. Inbrowsers,thereisonescope• Fornowlet'sseehowkeywordthis behavesinbrowsers
157
![Page 158: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/158.jpg)
Keywordthis inbrowsers
console.log(this === window);
console.log(doIt() == window);
function doIt() {
return this;
}
Botharetrue
Infunctionsandinglobal,thisreferstoaglobalmainobjectwhichiswindow
158
![Page 159: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/159.jpg)
GlobalvariablesinBrowsers
this.variable = "Hello";console.log(window.variable);
doIt();console.log(window.name);console.log(name);
function doIt() {this.name = "Jack";
}
Youdonothavetowritethemainobject!It'sglobalvariable!
159
![Page 160: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/160.jpg)
Bindingandkeywordthis
160
![Page 161: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/161.jpg)
Thisshouldwork...
function Circle(radius) {this.radius = radius;this.getArea = function() {
return Math.PI * this.radius * this.radius;}
} var c = new Circle(5);console.log(c.getArea());
Wheninvokingthemethod,keywordthis is"replaced"withc - object
161
![Page 162: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/162.jpg)
Wehaveaproblem
function Circle(radius) {this.radius = radius;this.getArea = function() {
return Math.PI * this.radius * this.radius;}
}
var c = new Circle(5);var theFunctionObject = c.getArea;console.log(theFunctionObject());
NothisdoesNOTrefertoc– anymore...itwillnot
work
162
![Page 163: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/163.jpg)
Function:bind
function Circle(radius) {
this.radius = radius;
this.getArea = function() {
return Math.PI * this.radius * this.radius;
} } var c = new Circle(5);
var theFunctionObject = c.getArea;
var newBindedFunctionObject = theFunctionObject.bind(c);
console.log(newBindedFunctionObject());
Createcopyofthatfunctionwherethisrefers
toc
163
![Page 164: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/164.jpg)
Example
var obj = {url: "./test.html",fetchUrl: function() {
fetchIt(this.url, whenReady);}
};
function whenReady(content) {console.log("Fetched from " + this.url);console.log("With content of " + content);
}
function fetchIt(myurl, onSuccess) {// Fetching from myurl the content, when ready invoke// the onSuccessonSuccess("<html>...</html>");
}
obj.fetchUrl();
this?NOTworking!
164
![Page 165: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/165.jpg)
Thesamebutnowusingofanonymousfunctionsvar obj = {
url: "./test.html",fetchUrl: function() {
fetchIt(this.url, function(content) {console.log("Fetched from " + this.url);console.log("With content of " + content);
});}
};
function fetchIt(myurl, onSuccess) {// Fetching from myurl the content, when ready invoke// the onSuccessonSuccess("<html>...</html>");
}
obj.fetchUrl();
this?NOTworking!
165
![Page 166: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/166.jpg)
Binding
var obj = {url: "./test.html",fetchUrl: function() {
fetchIt(this.url, (function(content) {console.log("Fetched from " + this.url);console.log("With content of " + content);
}).bind(this));}
};
function fetchIt(myurl, onSuccess) {// Fetching from myurl the content, when ready invoke// the onSuccessonSuccess("<html>...</html>");
}
obj.fetchUrl();
Sendacopyofthatfunction!
166
![Page 167: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/167.jpg)
Pattern:UsingClosure
var obj = {url: "./test.html",fetchUrl: function() {
var _this = this;fetchIt(this.url, function(content) {
console.log("Fetched from " + _this.url);console.log("With content of " + content);
});}
};
function fetchIt(myurl, onSuccess) {// Fetching from myurl the content, when ready invoke// the onSuccessonSuccess("<html>...</html>");
}
obj.fetchUrl();
Itworks!
167
![Page 168: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/168.jpg)
NoneedforPatternswhenusingArrowSyntaxvar obj = {
url: "./test.html",fetchUrl: function() {
fetchIt(this.url, (content) => {console.log("Fetched from " + this.url);console.log("With content of " + content);
});}
};
function fetchIt(myurl, onSuccess) {// Fetching from myurl the content, when ready invoke// the onSuccessonSuccess("<html>...</html>");
}
obj.fetchUrl();
Itworks!Lexicalthis
168
![Page 169: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/169.jpg)
Lab
169
![Page 170: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/170.jpg)
EcmaScript5:Strictmode
170
![Page 171: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/171.jpg)
AboutStrictMode
• IntroducedinEcmaScript5,strictmodemakeschangesinnormalEcmaScriptsemantics• Differences
1. Strictmodecanrunfasterinidenticalcodethanwithoutstrict2. Silenterrors->Throwerrors(willfail)3. Prohibetssomesyntax
• Enableglobally orinfunction• Useit!
171
![Page 172: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/172.jpg)
Silenterror
Infinity = 9;
NaN = 12;
console.log(Infinity);
console.log(NaN);Willfailbutit
issilent
172
![Page 173: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/173.jpg)
Silenterror
var obj1 = {id: 1};
Object.preventExtensions(obj1);
obj1.name = "Jack";Willfailbutit
issilent
173
![Page 174: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/174.jpg)
Global:Usestrict
"use strict";
var obj1 = {id: 1};
Object.preventExtensions(obj1);
obj1.name = "Jack";
TypeError:Can'taddpropertyname,objectisnotextensible
Enablestrictmode.It'sjustastring!
174
![Page 175: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/175.jpg)
Infunctions:usestrict
function doIt() {
"use strict";
console.log("This is under strict mode");
}
Nowonlythisfunctionusesstrictmode
175
![Page 176: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/176.jpg)
Enablingstrict
"use strict";
var obj1 = {id: 1};
Object.preventExtensions(obj1);
obj1.name = "Jack";
176
![Page 177: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/177.jpg)
Variablewithoutvar
function doIt() {
variable = 4;
}
doIt();
console.log(variable);
Forgotthevarwordhere...itcreatesaglobal
variable!Confusing
177
![Page 178: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/178.jpg)
Instrictmode,youhavetousethevar
"use strict";
function doIt() {
variable = 4;
}
doIt();
console.log(variable);
variableisnotdefined!
178
![Page 179: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/179.jpg)
RegularExpressions
179
![Page 180: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/180.jpg)
Regex
• RegularExpressions(Regex)arepatternsusedtomatchcharactercombinationsinstrings• InEcmaScript,regexareobjectsofRegExp
• var re = new RegExp('ab+c');• Alsoregexliteralavailable
• var re = /ab+c/
180
![Page 181: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/181.jpg)
RegexLiteral:LoadedwhenScriptisloaded
var variable = "ab+c";
var regex1 = /variable/;
var regex2 = /ab+c/
console.log(regex1.test("variable"));
console.log(regex2.test("abbc"));
Botharetrue!Youcannothavedynamiccontentinregexliteral
181
![Page 182: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/182.jpg)
SimpleRegex
var regex = /hello/;
console.log(regex.test("hello world")); // true
console.log(regex.test("world hello world")); // true
console.log(regex.test("world helxlo world")); // false
182
![Page 183: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/183.jpg)
Begin(^)andEnd($)
var regex1 = /^hello/;
var regex2 = /hello$/;
var regex3 = /^hello$/;
console.log(regex1.test("hello world")); // true
console.log(regex2.test("world hello")); // true
console.log(regex3.test("hello")); // true
console.log(regex3.test("hellohello")); // false
183
![Page 184: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/184.jpg)
Amount:+,*,?,{}var regex1 = /^(hello)+$/; // [1,n]var regex2 = /^(hello)*$/; // [0,n]var regex3 = /^(hello)?$/; // [0,1]var regex4 = /^(hello){0,3}$/; // [0,3]
console.log(regex1.test("")); // falseconsole.log(regex1.test("hello")); // trueconsole.log(regex1.test("hellohello")); // true
console.log(regex2.test("")); // trueconsole.log(regex2.test("hello")); // trueconsole.log(regex2.test("hellohello")); // true
console.log(regex3.test("")); // trueconsole.log(regex3.test("hello")); // trueconsole.log(regex3.test("hellohello")); // false
console.log(regex4.test("")); // trueconsole.log(regex4.test("hello")); // trueconsole.log(regex4.test("hellohello")); // true
184
![Page 185: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/185.jpg)
OtherSpecialCharacters
Character Meaning
. Anycharacter,forexample/.n/matchesanandon
\. equals todot
x|y Or,forexample /black|white/matcheseitherblackorwhite
[xyz] or [a-z] Character set
[^abc] Negatedcharacterset,cannotbeaborc.
\d [0-9]
\D [^0-9]
\s Whitespace, space,tab...
\S Nonwhitespace
\w [a-zA-Z0-9_]
\W [^a-zA-Z0-9_]185
![Page 186: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/186.jpg)
WorkingwithRegex
Method Meaning
exec ARegExpmethodthatreturnsarrayofinformationaboutthematch
test ARegExpmethodthatreturnstrueorfalse
match AStringmethodthatreturnsarrayofinformation aboutthematch
search AStringmethodthatreturnsindex ofthematch
replace AStringmethodthatexercutesasearchandreplacesthematchedsubstring
split AStringmethodthatbreaksastringintoanarrayofsubstrings
186
![Page 187: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/187.jpg)
RegExpexecvstest
var regex = /hello/; // [1,n]
// [ 'hello', index: 8, input: 'testing hello does it work?' ]
console.log( regex.exec("testing hello does it work?") );
// null
console.log( regex.exec("mickeymouse") );
// false
console.log( regex.test("mickeymouse") );
// true
console.log( regex.test("hello") );
187
![Page 188: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/188.jpg)
Stringmatch,search,replace,splitvar regex = /hello/;
var mj = "testing hello does it work?";
// [ 'hello', index: 8, input: 'testing hello does it work?' ]
console.log( mj.match(regex) );
// 8
console.log( mj.search(regex) );
// testing world does it work?
console.log( mj.replace(regex, "world") );
// [ 'testing ', ' does it work?' ]
console.log( mj.split(regex) );
188
![Page 189: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/189.jpg)
ExampleofFlags
var regex1 = /hello/i;
var regex2 = new RegExp("hello", "i");
console.log( regex1.test("HelLo") );
console.log( regex2.test("HelLo") );
189
![Page 190: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/190.jpg)
Lab
190
![Page 191: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/191.jpg)
InheritanceinEcmaScript
191
![Page 192: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/192.jpg)
AboutInheritance
• Codereuseisimportant• Inheritancecanhelp
• JavaScriptdoesnothaveclasses,sonospecialkeywordforextending• ThiscanbeveryconfusingforJava/C#developers• Objectsinheritobjects
• WellECMAScript6hasclasses.Butintheendit'sjustsyntacticsugarwhereunderneathobjectinheritesanotherobject
192
![Page 193: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/193.jpg)
ObjectextendsObject
• InEcmaScriptobjectextendsotherobject• Everyobjecthasspecial__proto__ propertythatlinkstoobjectthatitinherites
193
![Page 194: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/194.jpg)
(Bad)exampleof__proto__
var parent = {method1: function() { console.log("A"); }
}
var child = {__proto__: parent,method2: function() { console.log("B"); }
}
child.method1(); // Achild.method2(); // B
childextendsparent
194
![Page 195: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/195.jpg)
__proto__
• __proto__ isdepricated,non-standard andshouldnotbeused!• Togettheparent,use
• Object.getPrototypeOf(child)• Tosettheparent,use(OnlyinEcmaScript2015!)
• Object.setPrototypeOf(child, parent)
195
![Page 196: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/196.jpg)
Testingvar parent = {
method1: function() { console.log("A"); }
}
var child = {
method2: function() { console.log("B"); }
};
Object.setPrototypeOf(child, parent);
console.log(Object.getPrototypeOf(child) == parent); // true
child.method1(); // A
child.method2(); // B
196
![Page 197: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/197.jpg)
Object.setPrototypeOf(child, parent)
• TheObject.setPrototypeOf alterstheobject's__proto__ andthiscanbeveryslowoperation• AlsoObject.setPrototypeOf isEcmaScript2015feature,soitwon'tworkforexampleinolderbrowsers
• Insteadofalteringobject's__proto__,createnewobjectwithdesiredparentusingObject.create(obj, parent) • SupportedfromEcmaScript5th edition->
197
![Page 198: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/198.jpg)
Object.create(obj)
var parent = {method1: function() { console.log("A"); }
}
var child = Object.create(parent);child.method2 = function() { console.log("B"); }
console.log(Object.getPrototypeOf(child) == parent); // true
child.method1(); // Achild.method2(); // A
Nownewobjectiscreatedwhichparentis
parent
198
![Page 199: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/199.jpg)
WorkingwithConstructors
• Whenwriting• function Animal() { }
• Twoobjectsarecreated!• 1)Animal• 2)Animal.prototype
• Thesetwoobjectsarelinkedtogether!
199
![Page 200: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/200.jpg)
Example
function Animal() {
}
console.log(Animal instanceof Function); // true
console.log(Animal.prototype instanceof Object); // true
console.log(Animal.prototype.constructor == Animal) // true
Animal(Function– Object)
X
prototype
constructor
200
![Page 201: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/201.jpg)
Constructorfunctionandnew
• Constructorfunctionisusedwithnew– keyword• var spot = new Animal();
• Bydefaultthespot inheritesAnimal.prototype!
Animal(Function– Object)
AnimalParent
prototype constructor
spot
__proto__
Parentobject!
201
![Page 202: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/202.jpg)
Testing
function Animal() { }
var spot = new Animal();
console.log(spot.__proto__ == Animal.prototype);
console.log(Object.getPrototypeOf(spot) == Animal.prototype);
Non-standardway
spot extendsAnimal.prototype
202
![Page 203: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/203.jpg)
203
![Page 204: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/204.jpg)
Example
function Animal() { }
var animal1 = new Animal();var animal2 = new Animal();
var animal3 = new Animal();
Animal.prototype.name = "Jack";
console.log(animal1.name); // "Jack"console.log(animal2.name); // "Jack"console.log(animal3.name); // "Jack"
animal1,animal2 andanimal3 extend
Animal.prototype
204
![Page 205: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/205.jpg)
function Animal() {}
function Dog() {}
var spot = new Dog();
Object.setPrototypeOf(Dog.prototype, Animal.prototype);
console.log(Dog.prototype.__proto__ == Animal.prototype);
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(spot.__proto__.__proto__ == Animal.prototype); console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name); // "jack"
EcmaScript2015Feature,canbeslow.NowDog.prototype extendsAnimal.prototype.spotextends
Dog.prototype
true
true
205
![Page 206: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/206.jpg)
Animal.prototype
Dog.prototype
spot1
animal1
spot2 spot3
animal2
206
![Page 207: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/207.jpg)
function Animal() {}
function Dog() {}
var spot = new Dog();
Object.setPrototypeOf(Dog.prototype, Animal.prototype);
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name); // "jack"
UseObject.create(..) instead
207
![Page 208: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/208.jpg)
function Animal() {}
function Dog() {}
var spot = new Dog();
Dog.prototype = Object.create(Animal.prototype);
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name);
Createsanewobject!Wehaveaproblem...
undefined
208
![Page 209: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/209.jpg)
function Animal() {}
function Dog() {}
var spot = new Dog();
Dog.prototype = Object.create(Animal.prototype);
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name);
DogParent
spot
__proto__NowspotextendsDogParentwhichisaccessedbyDog.prototype
Dog
prototype
209
![Page 210: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/210.jpg)
function Animal() {}
function Dog() {}
var spot = new Dog();
Dog.prototype = Object.create(Animal.prototype);
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name);
Thiscreatesanewobject!
210
![Page 211: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/211.jpg)
function Animal() {}
function Dog() {}
var spot = new Dog();
let newObject = Object.create(Animal.prototype);
Dog.prototype = newObject;
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name); // "jack"
ThenewObject hereisthenewobjectcreated!
211
![Page 212: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/212.jpg)
function Animal() {}
function Dog() {}
var spot = new Dog();
let newObject = Object.create(Animal.prototype);
Dog.prototype = newObject;
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name); // "jack"
DogParent
spot
__proto__
Dog
prototype
newObject
__proto__
Animal.prototype
212
![Page 213: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/213.jpg)
function Animal() {}
function Dog() {}
var spot = new Dog();
let newObject = Object.create(Animal.prototype);
Dog.prototype = newObject;
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name); // "jack"
DogParent
spot
__proto__
Dog
prototype
newObject
__proto__
Animal.prototype
213
![Page 214: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/214.jpg)
function Animal() {}
function Dog() {}
var spot = new Dog();
let newObject = Object.create(Animal.prototype);
Dog.prototype = newObject;
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name); // "jack"
DogParent
spot
__proto__
Dog
prototype
newObject
__proto__
Animal.prototype
Dog.prototype=>newObjectnewObject.__proto__=>Animal.prototype
=true!
214
![Page 215: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/215.jpg)
function Animal() {}
function Dog() {}
var spot = new Dog();
let newObject = Object.create(Animal.prototype);
Dog.prototype = newObject;
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name); // "jack"
DogParent
spot
__proto__
Dog
prototype
newObject
__proto__
Animal.prototypespot__proto=>DogParent
false!
215
![Page 216: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/216.jpg)
Let'schangeorderfunction Animal() {}
function Dog() {}
let newObject = Object.create(Animal.prototype);
Dog.prototype = newObject;
var spot = new Dog();
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name); // "jack"
Let'screatefirstthenewObjectandthencreatethespot!
216
![Page 217: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/217.jpg)
function Animal() {}
function Dog() {}
let newObject = Object.create(Animal.prototype);
Dog.prototype = newObject;
var spot = new Dog();
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name); // "jack"
DogParentDog
prototype
217
![Page 218: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/218.jpg)
function Animal() {}
function Dog() {}
let newObject = Object.create(Animal.prototype);
Dog.prototype = newObject;
var spot = new Dog();
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name); // "jack"
DogParentDog
prototype
newObject
__proto__
Animal.prototype
218
![Page 219: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/219.jpg)
function Animal() {}
function Dog() {}
let newObject = Object.create(Animal.prototype);
Dog.prototype = newObject;
var spot = new Dog();
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name); // "jack"
DogParent(garbagecollectorwilldeletethis)
Dog
prototype
newObject
__proto__
Animal.prototype
219
![Page 220: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/220.jpg)
function Animal() {}
function Dog() {}
let newObject = Object.create(Animal.prototype);
Dog.prototype = newObject;
var spot = new Dog();
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name); // "jack"
Dog
prototype
newObject
__proto__
Animal.prototypeBydefaultspotwillextend
Dog.prototypewhichisnowthenewObject
spot
__proto__
220
![Page 221: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/221.jpg)
function Animal() {}
function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
var spot = new Dog();
console.log(Object.getPrototypeOf(Dog.prototype) == Animal.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(spot)) == Animal.prototype);
Animal.prototype.name = "jack";
console.log(spot.name); // "jack"
Dog
prototype
NewDogParent
__proto__
Animal.prototype
spot
__proto__
WedonotneedthenewObjectpointer
221
![Page 222: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/222.jpg)
Object.create(..)- recap
function Animal() {}
function Dog() {}
// EcmaScript 5
// Create new object that extends Animal.prototype
Dog.prototype = Object.create(Animal.prototype);
// Now spot -> Dog.prototype -> Animal.prototype
var spot = new Dog();
console.log(spot.__proto__ == Dog.prototype); // true
console.log(spot.__proto__.__proto__ == Animal.prototype); // true
222
![Page 223: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/223.jpg)
Animal.prototype
Dog.prototype
spot1
animal1
spot2 spot3
animal2
223
![Page 224: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/224.jpg)
Wearenotdoneyet...
224
![Page 225: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/225.jpg)
Constructors
function Dog() {}
var spot = new Dog();
console.log(spot.constructor == Dog);
Dog
prototype
DogParent
constructor
spot
__proto__
Youcanaskfromanobjectwhatisit'sconstructor.Theconstructorpropertyisbuiltintheparent
object
Twoobjectsarecreated!TheDogParentobjecthasaconstructor
property!
225
![Page 226: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/226.jpg)
Constructors
function Animal() {}
function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
var spot = new Dog();
console.log(spot.constructor == Dog);
Createsanewobjectwhich__proto__pointstoAnimal.protototype.The
newobjectdoesnothaveconstructorproperty!
226
![Page 227: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/227.jpg)
Dog
prototype
(thenewobject)
__proto__
spot
__proto__
Animal
prototype
AnimalParent
constructor
console.log(spot.constructor);
Constructorpropertyisnotfoundinspot.Itwilltrytofinditinthenewobject.It'snotthereeither!ThenitwillfetchitfromtheXandendresultisthatspotiscreatedfromAnimal!
227
![Page 228: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/228.jpg)
Dog
prototype
(thenewobject)
__proto__constructor
spot
__proto__
Animal
prototype
AnimalParent
constructor
Dog.prototype.constructor = Dog;
Let'saddthis!
228
![Page 229: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/229.jpg)
Done!
function Animal() {}
function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
var spot = new Dog();
229
![Page 230: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/230.jpg)
InvokingBaseConstructor
230
![Page 231: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/231.jpg)
Function.call- method
function Dog(name) {this.name = name;
}
let spot = new Dog("Spot");console.log(spot.name);
let obj = {};Dog.call(obj, "Vilma");console.log(obj.name);
Youcaninvokethefunctionanddefinewhatthismeansin
runtime
thisnowreferstospot-object
231
![Page 232: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/232.jpg)
WhenusingConstructor- functionsfunction Shape(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
}
function Circle(x, y, color, radius) {
Shape.call(this, x, y, color);
this.radius = radius;
}
let circle = new Circle(0, 0, "red", 5);
console.log(circle.color);
232
![Page 233: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/233.jpg)
EcmaScript2015:Classes
233
![Page 234: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/234.jpg)
class Shape {constructor(x, y, color) {
this.x = x;this.y = y;this.color = color;
}}
class Rectangle extends Shape {constructor (x, y, color, width, height) {
super(x, y, color);this.width = width;this.height = height;
}}class Circle extends Shape {
constructor (x, y, color, radius) {super(x, y, color);this.radius = radius;
}}
let circle = new Circle(0,0,"red",5);console.log(circle);
Alotnicersyntaxforcreatinginheritance!
234
![Page 235: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/235.jpg)
class Shape {constructor(x, y, color) {
this.x = x;this.y = y;this.color = color;
}}
class Rectangle extends Shape {constructor (x, y, color, width, height) {
super(x, y, color);this.width = width;this.height = height;
}}class Circle extends Shape {
constructor (x, y, color, radius) {super(x, y, color);this.radius = radius;
}}
Shape.prototype.hello = "world";
let circle = new Circle(0,0,"red",5);
console.log(circle.hello);
Butitissyntacticalsugar!!
235
![Page 236: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/236.jpg)
Let'scompilethissyntaxtoolder
EcmaScriptà (OhDear....)
236
![Page 237: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/237.jpg)
React- Example
• ReactisaJavaScriptframeworkforbuildingUIinfront-end• ItisdevelopedbyFacebookandverypopular
• YoucreateUIcomponentsintheframework• UsesEcmaScript2015andJSX
• CompiledtoolderEcmaScriptusingBabelsoitworksonbrowsers
class Welcome extends React.Component {
render() {
return <h1>Hello World</h1>;
}
}
237
![Page 238: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/238.jpg)
EcmaScript2015(6th edition)
238
![Page 239: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/239.jpg)
NewFeatures
• ArrowFunctions• Parametervalues• Objectproperties• Modules• Classes• Somenewbuiltmethods
239
![Page 240: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/240.jpg)
ArrowFunctionslet array = [0,1,2,3,4];
array.forEach(doIt);
function doIt(value) {
console.log(value);
}
array.forEach(function(value) {
console.log(value);
});
array.forEach((value) => {
console.log(value);
});
array.forEach((value) => console.log(value) );
240
![Page 241: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/241.jpg)
Lexicalthis
var object = {array: [0,1,2,3,4],doIt: function() {
this.array.forEach(function(value) {this.array.push(value);
});}
}
object.doIt();
Cannotreadproperty'push'ofundefined
241
![Page 242: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/242.jpg)
Lexicalthis
var object = {
array: [0,1,2,3,4],
doIt: function() {
var _this = this;
this.array.forEach(function(value) {
_this.array.push(value);
});
}
}
object.doIt();
Itworkswhenusingclosure
242
![Page 243: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/243.jpg)
Lexicalthis
var object = {array: [0,1,2,3,4],doIt: function() {
this.array.forEach((value) => {this.array.push(value);
});}
}
object.doIt();
Works!
243
![Page 244: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/244.jpg)
DefaultParametervalues
function printIt(text, amount = 1) {
for(let i = 0; i < amount; i++) {
console.log(text);
}
}
printIt("text");
printIt("text", 7);
244
![Page 245: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/245.jpg)
VariadicParameterValues
function printIt(amount, ...text) {for(let i = 0; i < amount; i++) {
for(let j = 0; j < text.length; j++) {console.log(text[i]);
}}
}
printIt(1, "text");printIt(2, "hello", "world");
245
![Page 246: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/246.jpg)
SpreadOperator
var array1 = [ "hello", "world" ];
var array2 = [ 1, ...array1 ];
// [ 1, 'hello', 'world' ]
console.log(array2);
246
![Page 247: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/247.jpg)
InterpolationofString
var message = "hello";
var html = `
<div>
<p>${message}</p>
</div>
`;
console.log(html);
247
![Page 248: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/248.jpg)
ObjectProperties
let x = 0;
let y = 1;
let obj = { x, y };
console.log(obj.x);
console.log(obj.y);
248
![Page 249: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/249.jpg)
Modules
249
![Page 250: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/250.jpg)
AboutModules
• ModulesSystems1. AMDSpecification(RequireJS)2. CommonJSModules(NodeJS)3. ES2015officialmodule
• InEcmaScript2105forthefirsttimeit'sbuiltintolanguage.Supportisweak.• It'spossibletocompileES6ModulestoAMDorCommonJS• NodewillsupportES2015modulesintheupcomingversions• Angular2FrameworkusesES2015modules
250
![Page 251: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/251.jpg)
ES2015Modules
251
![Page 252: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/252.jpg)
Babel
• SinceES2015modulesupportisweak,installBabeltranspiler• TranspilerwillcompilenewES2015featurestoolderESthatyoucanuseinNodeJSorBrowsers• Toinstallglobally
• npm install -g babel-cli
252
![Page 253: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/253.jpg)
EcmaScript2015:app.js
import { generateRandom, sum } from 'utility';
console.log(generateRandom()); // logs a random number
console.log(sum(1, 2)); // 3
253
![Page 254: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/254.jpg)
EcmaScript2015:utility.js
function generateRandom() {
return Math.random();
}
function sum(a, b) {
return a + b;
}
export { generateRandom, sum }
254
![Page 255: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/255.jpg)
CommonJS
255
![Page 256: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/256.jpg)
CommonJS
• CommonJSisaprojectwiththegoalofspecifyingecosystemforJSoutsideofBrowser• WasstartedbyMozillaengineer,initalnameServerJS
• CommonJSdescribedalotofspecifications,includingmodules• ThismodulespecificationisimplementedinNodeJS• require toincludemodules• exports tomakethingsavailable
256
![Page 257: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/257.jpg)
app.js
// import { generateRandom, sum } from 'utility';
require("./utility.js");
console.log(generateRandom()); // logs a random number
console.log(sum(1, 2)); // 3
257
![Page 258: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/258.jpg)
utility.js
generateRandom = function() {
return Math.random();
}
sum = function (a, b) {
return a + b; }
258
![Page 259: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/259.jpg)
ExampleModule:randomModule.js
'use strict';
/*** Returns random integer number between [min, max].
* @param {number} min* @param {number} max* @return {number}*/
module.exports = function(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;
};
UsesJSdoc
259
![Page 260: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/260.jpg)
ExampleModule
'use strict';
var random = require("./randomModule");
console.log(random(1,10));
260
![Page 261: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/261.jpg)
ExportingObject
'use strict';
var MyMath = {
random: function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
abs: function(value) {
return (value < 0) ? value * -1: value;
}
};
module.exports = MyMath;
261
![Page 262: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/262.jpg)
ImportingObject
'use strict';
var MyMath = require("./mathModule");
console.log(MyMath.random(1,10));
console.log(MyMath.abs(-7));
262
![Page 263: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/263.jpg)
exportsvsmodule.export
'use strict';
module.exports.variable1 = "hello";
exports.variable2 = "world";
thesepointtothesameobject
263
![Page 264: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/264.jpg)
exportsvsmodule.exports
'use strict';
var module = { exports: {} };
var exports = module.exports;
module.exports.variable1 = "hello";
exports.variable2 = "world";
return module.exports;
Itwillalwaysreturn
module.exports
264
![Page 265: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/265.jpg)
WhatHappens?
'use strict';
var user = {name: "Jack"};
module.exports = user;
exports.variable = "hello";
var object = require("./randomModule");
console.log(object.name);
console.log(object.variable);
265
![Page 266: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/266.jpg)
NowTwoDifferentObjects!
module.exports
exports
{name: "jack"}
{variable: "hello"}
266
![Page 267: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/267.jpg)
ExceptionHandling
267
![Page 268: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/268.jpg)
Examplefunction divide(a, b) {
if(!(typeof a == 'number' && typeof b == 'number')) {
throw "You must give number variables";
} else {
return a / b;
}
}
try {
console.log( divide(1, 5) );
console.log( divide("do", "this?") );
} catch(e) {
console.log(e);
}
268
![Page 269: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/269.jpg)
function MustBeNumbersException(message) {
this.message = message;
this.name = "MustBeNumbersException";
}
function divide(a, b) {
if(!(typeof a == 'number' && typeof b == 'number')) {
throw new MustBeNumbersException("You must give number variables");
} else {
return a / b;
}
}
try {
console.log( divide("does not work", 0) );
} catch(e) {
console.log(e.name);
console.log(e.message);
}
Betterversion,ourown
exceptionobject
269
![Page 270: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/270.jpg)
function MustBeNumbersException(message) {this.message = message;this.name = "MustBeNumbersException";
}
function ZeroDivisionException(message) {this.message = message;this.name = "ZeroDivisionException";
}
function divide(a, b) {if(!(typeof a == 'number' && typeof b == 'number')) {
throw new MustBeNumbersException("You must give number variables");} else if(b == 0) {
throw new ZeroDivisionException("Cannot divide with 0");} else {
return a / b;}
}
try {console.log( divide(1, 0) );
} catch(e) {console.log(e.name);console.log(e.message);
}
Bothoftheexceptionsgo
here
270
![Page 271: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/271.jpg)
function MustBeNumbersException(message) {this.message = message;this.name = "MustBeNumbersException";
}
function ZeroDivisionException(message) {this.message = message;this.name = "ZeroDivisionException";
}
function divide(a, b) {if(!(typeof a == 'number' && typeof b == 'number')) {
throw new MustBeNumbersException("You must give number variables");} else if(b == 0) {
throw new ZeroDivisionException("Cannot divide with 0");} else {
return a / b;}
}
try {console.log( divide(1, "k") );
} catch(e) {if (e instanceof MustBeNumbersException) {
console.log("annapa numeroita.");} else if (e instanceof ZeroDivisionException) {
console.log("ei nollalla saa jakaa.");}
}
Checkingwhatexceptionwas
thrown
271
![Page 272: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/272.jpg)
UnitTesting
272
![Page 273: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/273.jpg)
UnitTestingFrameworks
• Mocha• Jasmine• Should• NodeUnit• jsUnit
273
![Page 274: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/274.jpg)
Mocha
• Installglobally• npm install –globally mocha
• Createtest/test.js• Youcanruntests
• mocha test/test.js• Orifyoumodifypackage.json
• npm test
274
![Page 275: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/275.jpg)
MyMathmodule
'use strict';
var MyMath = {
abs: function(value) {
return (value < 0) ? value * -1: value;
},
max: function(number1, number2) {
return (number1 < number2) ? number2: number1;
}
};
module.exports = MyMath;
275
![Page 276: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/276.jpg)
test/test.jsvar assert = require('assert');var MyMath = require("../mathmodule");
describe('MyMath', function() {describe('#abs(number)', function() {
it('It should return positive values when given negative values.', function() {assert.equal(1, MyMath.abs(-1));assert.equal(2, MyMath.abs(-2));assert.equal(3, MyMath.abs(-3));
});it('It should return positive values when given positive values.', function() {
assert.equal(1, MyMath.abs(1));assert.equal(2, MyMath.abs(2));assert.equal(3, MyMath.abs(3));
});
});describe('#max(number1, number2)', function() {
it('should return number1 if number1 > number2', function() {assert.equal(2, MyMath.max(2, 1));assert.equal(3, MyMath.max(3, 1));assert.equal(4, MyMath.max(4, 1));
});});
});
276
![Page 277: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/277.jpg)
Exceptions
describe('ExceptionTest', function() {describe('#divide(number, number)', function() {
it('Exception tests', function() {assert.throws(() => { divide(2,0) }, ZeroDivisionException);assert.throws(() => { divide("k","h") }, MustBeNumbersException);
});});
});
277
![Page 278: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/278.jpg)
TDD
• Designthetestsfirst!• Afterthisimplementthemodule!
278
![Page 279: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/279.jpg)
AsyncandPromises
279
![Page 280: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/280.jpg)
AboutPromises
• Promisesanalternativetocallbacksdeliveringresultofanasynccomputation• PromisesarepartofEcmaScript2015
• Previouslyyoucouldusethemasadditionallibrary• https://promisesaplus.com/
280
![Page 281: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/281.jpg)
Typicalasyncfunctionwithcallback
asyncFunction(arg1, arg2,
result => {
console.log(result);
});
281
![Page 282: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/282.jpg)
Problemswithcallbacks
• Whenasyncdone,doanotherasyncmethod(chaining)->usingcallbackscanbemessy• Whatisasyncfails?Ifyouhavechainedasyncmethodsandoneofthemfails?
• Itisnotstandard,everyonecanhavetheyownversionofdoingcallbacks
282
![Page 283: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/283.jpg)
UsingPromisesfunction promiseFunction(resolve, reject) {
// time consuming async stuffif(true) {
resolve("OK!");} else {
reject("Failed!");}
}
function onSuccess(msg) {console.log(msg);
}
function onError(msg) {console.log(msg);
}
let promise = new Promise(promiseFunction);promise.then(onSuccess, onError);promise.then(onSuccess).catch(onError);
Youcandobothhere
283
![Page 284: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/284.jpg)
Node.JScallbacks
const fs = require('fs');
fs.readFile('mytest.json',function (error, text) {
if (error) {console.error('Error while reading config file');
} else {try {
const obj = JSON.parse(text);console.log(JSON.stringify(obj));
} catch (e) {console.error('Invalid JSON in file');
}}
});
FileI/Omodule
284
![Page 285: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/285.jpg)
Node.JSpromise
const util = require('util');const fs = require('fs');
const promiseReadFile = util.promisify(fs.readFile);
promiseReadFile('mytest.json').then(function (text) { //
const obj = JSON.parse(text);console.log(JSON.stringify(obj));
}).catch(function (error) { //
// File read error or JSON SyntaxErrorconsole.error('An error occurred', error);
});
util.promisifyisNode8feature
285
![Page 286: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/286.jpg)
SimpleExample
function doSomeTimeConsumingStuff() {
function asyncOperation(resolve, reject) {
setTimeout(() => resolve("Done"), 1000);
}
return new Promise(asyncOperation);
}
doSomeTimeConsumingStuff().then(result => console.log('Result: ' + result));
286
![Page 287: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/287.jpg)
function promiseFunction(resolve, reject) {// time consuming async stuffif(true) {
resolve(4);} else {
reject("First promise failed!");}
}
function onSuccess(result) {let p = new Promise((resolve, reject) => {
// time consuming async stuffif(true) {
resolve(result + 4);} else {
reject("Second promise failed");}
} );return p;
}
function onError(msg) {console.log(msg);
}
let promise = new Promise(promiseFunction);promise.then(onSuccess).then((result) => console.log("sum = " + result)).catch(onError);
Returnspromise
Chainingwiththen
Canhandlebotherrors!
287
![Page 288: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/288.jpg)
async
async function doIt() {let sum = 0;for(let i=0; i<10; i++) {
console.log(i);sum = sum + i;
}return sum;
}
doIt().then((result) => console.log("result = " + result));
Wheninvokingasyncfunction,endresultis
promise!
288
![Page 289: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/289.jpg)
EcmaScript2017:async
async function doIt() {let sum = 0;for(let i=0; i<10; i++) {
console.log(i);
sum = sum + i;}return sum;
}
doIt().then((result) => console.log(result));doIt().then((result) => console.log(result));
ThedoIt– methodisrunparallel
289
![Page 290: ecmascript all current · app.js angularjs.js ionic.js cordova.js stylesheet.css Native Android App Android WebView index.html app.js angularjs.js ionic.js cordova.js stylesheet.css](https://reader033.vdocuments.net/reader033/viewer/2022050210/5f5cb77c5c560620f054bf9c/html5/thumbnails/290.jpg)
EcmaScript2017:awaitfunction fetchNumber() {
function asyncOperation(resolve, reject) {
let n = Math.round(Math.random() * 10); setTimeout(() => resolve(n), 1000);
}return new Promise(asyncOperation);
}
async function doIt1() {let a = await fetchNumber();console.log(a);let b = await fetchNumber();console.log(b);
let sum = a + b;return sum;
}
doIt1().then((result) => console.log(result));
Let'swaituntilwegetthenumber
290