├── .gitignore ├── Labs ├── Building Custom JavaScript Objects │ ├── Begin │ │ └── index.html │ └── End │ │ └── index.html ├── Getting Started with JavaScript │ ├── Begin │ │ ├── index.html │ │ └── script.js │ └── End │ │ ├── index.html │ │ └── script.js ├── JavaScript and Geolocation │ ├── Begin │ │ ├── index.html │ │ ├── package.json │ │ └── server.js │ └── End │ │ ├── index.html │ │ ├── package.json │ │ └── server.js ├── JavaScript and LocalStorage │ ├── Begin │ │ └── index.html │ └── End │ │ └── index.html ├── JavaScript and the DOM │ ├── Begin │ │ └── .gitkeep │ └── End │ │ └── index.html ├── Understanding Closures │ ├── Begin │ │ ├── closures.js │ │ ├── index.html │ │ └── simpleClosure.html │ └── End │ │ ├── closures.js │ │ ├── index.html │ │ └── simpleClosure.html ├── Using Data Binding and Templates │ ├── Begin │ │ ├── data.json.txt │ │ ├── index.html │ │ ├── js │ │ │ ├── ajaxService.js │ │ │ ├── capitalizer.js │ │ │ ├── handlebars.js │ │ │ ├── q.js │ │ │ └── tableHelper.js │ │ ├── package.json │ │ ├── server.js │ │ └── styles │ │ │ └── styles.css │ └── End │ │ ├── data.json.txt │ │ ├── index.html │ │ ├── js │ │ ├── ajaxService.js │ │ ├── capitalizer.js │ │ ├── handlebars.js │ │ ├── handlebarsHelper.js │ │ ├── q.js │ │ └── tableHelper.js │ │ ├── package.json │ │ ├── server.js │ │ └── styles │ │ └── styles.css ├── Using the Prototype Pattern │ ├── Begin │ │ ├── car.js │ │ └── index.html │ └── End │ │ ├── car.js │ │ ├── index.html │ │ └── tests.html ├── Using the Revealing Module Pattern │ ├── Begin │ │ ├── car.js │ │ ├── index.html │ │ └── tests.html │ └── End │ │ ├── car.js │ │ ├── index.html │ │ └── tests.html ├── Using the Revealing Prototype Pattern │ ├── Begin │ │ ├── car.js │ │ ├── index.html │ │ └── tests.html │ └── End │ │ ├── car.js │ │ ├── index.html │ │ └── tests.html ├── Working with ES2015 │ ├── Begin │ │ ├── .babelrc │ │ ├── gulpfile.js │ │ ├── index.html │ │ ├── js │ │ │ ├── autos.js │ │ │ ├── compiled │ │ │ │ ├── babel │ │ │ │ │ └── .gitkeep │ │ │ │ └── traceur │ │ │ │ │ └── .gitkeep │ │ │ └── libs │ │ │ │ └── traceur.js │ │ └── package.json │ └── End │ │ ├── .babelrc │ │ ├── gulpfile.js │ │ ├── index.html │ │ ├── js │ │ ├── autos.js │ │ ├── compiled │ │ │ └── babel │ │ │ │ ├── .gitkeep │ │ │ │ └── autos.js │ │ └── libs │ │ │ └── traceur.js │ │ ├── package-lock.json │ │ └── package.json └── Working with Functions │ ├── Begin │ ├── data.json.txt │ ├── index.html │ ├── js │ │ ├── ajaxService.js │ │ ├── capitalizer.js │ │ ├── q.js │ │ └── tableHelper.js │ ├── package.json │ ├── server.js │ └── styles │ │ └── styles.css │ └── End │ ├── data.json.txt │ ├── index.html │ ├── js │ ├── ajaxService.js │ ├── capitalizer.js │ ├── q.js │ └── tableHelper.js │ ├── package.json │ ├── server.js │ └── styles │ └── styles.css ├── Mastering JavaScript ├── .babelrc ├── gulpfile.js ├── index.html ├── js │ ├── ace │ │ ├── ace.js │ │ ├── ext-beautify.js │ │ ├── ext-chromevox.js │ │ ├── ext-elastic_tabstops_lite.js │ │ ├── ext-emmet.js │ │ ├── ext-error_marker.js │ │ ├── ext-keybinding_menu.js │ │ ├── ext-language_tools.js │ │ ├── ext-linking.js │ │ ├── ext-modelist.js │ │ ├── ext-old_ie.js │ │ ├── ext-searchbox.js │ │ ├── ext-settings_menu.js │ │ ├── ext-spellcheck.js │ │ ├── ext-split.js │ │ ├── ext-static_highlight.js │ │ ├── ext-statusbar.js │ │ ├── ext-textarea.js │ │ ├── ext-themelist.js │ │ ├── ext-whitespace.js │ │ ├── keybinding-emacs.js │ │ ├── keybinding-vim.js │ │ ├── mode-abap.js │ │ ├── mode-actionscript.js │ │ ├── mode-ada.js │ │ ├── mode-apache_conf.js │ │ ├── mode-applescript.js │ │ ├── mode-asciidoc.js │ │ ├── mode-assembly_x86.js │ │ ├── mode-autohotkey.js │ │ ├── mode-batchfile.js │ │ ├── mode-c9search.js │ │ ├── mode-c_cpp.js │ │ ├── mode-cirru.js │ │ ├── mode-clojure.js │ │ ├── mode-cobol.js │ │ ├── mode-coffee.js │ │ ├── mode-coldfusion.js │ │ ├── mode-csharp.js │ │ ├── mode-css.js │ │ ├── mode-curly.js │ │ ├── mode-d.js │ │ ├── mode-dart.js │ │ ├── mode-diff.js │ │ ├── mode-django.js │ │ ├── mode-dockerfile.js │ │ ├── mode-dot.js │ │ ├── mode-eiffel.js │ │ ├── mode-ejs.js │ │ ├── mode-erlang.js │ │ ├── mode-forth.js │ │ ├── mode-ftl.js │ │ ├── mode-gcode.js │ │ ├── mode-gherkin.js │ │ ├── mode-gitignore.js │ │ ├── mode-glsl.js │ │ ├── mode-golang.js │ │ ├── mode-groovy.js │ │ ├── mode-haml.js │ │ ├── mode-handlebars.js │ │ ├── mode-haskell.js │ │ ├── mode-haxe.js │ │ ├── mode-html.js │ │ ├── mode-html_ruby.js │ │ ├── mode-ini.js │ │ ├── mode-io.js │ │ ├── mode-jack.js │ │ ├── mode-jade.js │ │ ├── mode-java.js │ │ ├── mode-javascript.js │ │ ├── mode-json.js │ │ ├── mode-jsoniq.js │ │ ├── mode-jsp.js │ │ ├── mode-jsx.js │ │ ├── mode-julia.js │ │ ├── mode-latex.js │ │ ├── mode-less.js │ │ ├── mode-liquid.js │ │ ├── mode-lisp.js │ │ ├── mode-livescript.js │ │ ├── mode-logiql.js │ │ ├── mode-lsl.js │ │ ├── mode-lua.js │ │ ├── mode-luapage.js │ │ ├── mode-lucene.js │ │ ├── mode-makefile.js │ │ ├── mode-markdown.js │ │ ├── mode-matlab.js │ │ ├── mode-mel.js │ │ ├── mode-mushcode.js │ │ ├── mode-mysql.js │ │ ├── mode-nix.js │ │ ├── mode-objectivec.js │ │ ├── mode-ocaml.js │ │ ├── mode-pascal.js │ │ ├── mode-perl.js │ │ ├── mode-pgsql.js │ │ ├── mode-php.js │ │ ├── mode-plain_text.js │ │ ├── mode-powershell.js │ │ ├── mode-praat.js │ │ ├── mode-prolog.js │ │ ├── mode-properties.js │ │ ├── mode-protobuf.js │ │ ├── mode-python.js │ │ ├── mode-r.js │ │ ├── mode-rdoc.js │ │ ├── mode-rhtml.js │ │ ├── mode-ruby.js │ │ ├── mode-rust.js │ │ ├── mode-sass.js │ │ ├── mode-scad.js │ │ ├── mode-scala.js │ │ ├── mode-scheme.js │ │ ├── mode-scss.js │ │ ├── mode-sh.js │ │ ├── mode-sjs.js │ │ ├── mode-smarty.js │ │ ├── mode-snippets.js │ │ ├── mode-soy_template.js │ │ ├── mode-space.js │ │ ├── mode-sql.js │ │ ├── mode-stylus.js │ │ ├── mode-svg.js │ │ ├── mode-tcl.js │ │ ├── mode-tex.js │ │ ├── mode-text.js │ │ ├── mode-textile.js │ │ ├── mode-toml.js │ │ ├── mode-twig.js │ │ ├── mode-typescript.js │ │ ├── mode-vala.js │ │ ├── mode-vbscript.js │ │ ├── mode-velocity.js │ │ ├── mode-verilog.js │ │ ├── mode-vhdl.js │ │ ├── mode-xml.js │ │ ├── mode-xquery.js │ │ ├── mode-yaml.js │ │ ├── snippets │ │ │ ├── abap.js │ │ │ ├── actionscript.js │ │ │ ├── ada.js │ │ │ ├── apache_conf.js │ │ │ ├── applescript.js │ │ │ ├── asciidoc.js │ │ │ ├── assembly_x86.js │ │ │ ├── autohotkey.js │ │ │ ├── batchfile.js │ │ │ ├── c9search.js │ │ │ ├── c_cpp.js │ │ │ ├── cirru.js │ │ │ ├── clojure.js │ │ │ ├── cobol.js │ │ │ ├── coffee.js │ │ │ ├── coldfusion.js │ │ │ ├── csharp.js │ │ │ ├── css.js │ │ │ ├── curly.js │ │ │ ├── d.js │ │ │ ├── dart.js │ │ │ ├── diff.js │ │ │ ├── django.js │ │ │ ├── dockerfile.js │ │ │ ├── dot.js │ │ │ ├── eiffel.js │ │ │ ├── ejs.js │ │ │ ├── erlang.js │ │ │ ├── forth.js │ │ │ ├── ftl.js │ │ │ ├── gcode.js │ │ │ ├── gherkin.js │ │ │ ├── gitignore.js │ │ │ ├── glsl.js │ │ │ ├── golang.js │ │ │ ├── groovy.js │ │ │ ├── haml.js │ │ │ ├── handlebars.js │ │ │ ├── haskell.js │ │ │ ├── haxe.js │ │ │ ├── html.js │ │ │ ├── html_ruby.js │ │ │ ├── ini.js │ │ │ ├── io.js │ │ │ ├── jack.js │ │ │ ├── jade.js │ │ │ ├── java.js │ │ │ ├── javascript.js │ │ │ ├── json.js │ │ │ ├── jsoniq.js │ │ │ ├── jsp.js │ │ │ ├── jsx.js │ │ │ ├── julia.js │ │ │ ├── latex.js │ │ │ ├── less.js │ │ │ ├── liquid.js │ │ │ ├── lisp.js │ │ │ ├── livescript.js │ │ │ ├── logiql.js │ │ │ ├── lsl.js │ │ │ ├── lua.js │ │ │ ├── luapage.js │ │ │ ├── lucene.js │ │ │ ├── makefile.js │ │ │ ├── markdown.js │ │ │ ├── matlab.js │ │ │ ├── mel.js │ │ │ ├── mushcode.js │ │ │ ├── mysql.js │ │ │ ├── nix.js │ │ │ ├── objectivec.js │ │ │ ├── ocaml.js │ │ │ ├── pascal.js │ │ │ ├── perl.js │ │ │ ├── pgsql.js │ │ │ ├── php.js │ │ │ ├── plain_text.js │ │ │ ├── powershell.js │ │ │ ├── praat.js │ │ │ ├── prolog.js │ │ │ ├── properties.js │ │ │ ├── protobuf.js │ │ │ ├── python.js │ │ │ ├── r.js │ │ │ ├── rdoc.js │ │ │ ├── rhtml.js │ │ │ ├── ruby.js │ │ │ ├── rust.js │ │ │ ├── sass.js │ │ │ ├── scad.js │ │ │ ├── scala.js │ │ │ ├── scheme.js │ │ │ ├── scss.js │ │ │ ├── sh.js │ │ │ ├── sjs.js │ │ │ ├── smarty.js │ │ │ ├── snippets.js │ │ │ ├── soy_template.js │ │ │ ├── space.js │ │ │ ├── sql.js │ │ │ ├── stylus.js │ │ │ ├── svg.js │ │ │ ├── tcl.js │ │ │ ├── tex.js │ │ │ ├── text.js │ │ │ ├── textile.js │ │ │ ├── toml.js │ │ │ ├── twig.js │ │ │ ├── typescript.js │ │ │ ├── vala.js │ │ │ ├── vbscript.js │ │ │ ├── velocity.js │ │ │ ├── verilog.js │ │ │ ├── vhdl.js │ │ │ ├── xml.js │ │ │ ├── xquery.js │ │ │ └── yaml.js │ │ ├── theme-ambiance.js │ │ ├── theme-chaos.js │ │ ├── theme-chrome.js │ │ ├── theme-clouds.js │ │ ├── theme-clouds_midnight.js │ │ ├── theme-cobalt.js │ │ ├── theme-crimson_editor.js │ │ ├── theme-dawn.js │ │ ├── theme-dreamweaver.js │ │ ├── theme-eclipse.js │ │ ├── theme-github.js │ │ ├── theme-idle_fingers.js │ │ ├── theme-katzenmilch.js │ │ ├── theme-kr.js │ │ ├── theme-kr_theme.js │ │ ├── theme-kuroir.js │ │ ├── theme-merbivore.js │ │ ├── theme-merbivore_soft.js │ │ ├── theme-mono_industrial.js │ │ ├── theme-monokai.js │ │ ├── theme-pastel_on_dark.js │ │ ├── theme-solarized_dark.js │ │ ├── theme-solarized_light.js │ │ ├── theme-terminal.js │ │ ├── theme-textmate.js │ │ ├── theme-tomorrow.js │ │ ├── theme-tomorrow_night.js │ │ ├── theme-tomorrow_night_blue.js │ │ ├── theme-tomorrow_night_bright.js │ │ ├── theme-tomorrow_night_eighties.js │ │ ├── theme-twilight.js │ │ ├── theme-vibrant_ink.js │ │ ├── theme-visualstudio.js │ │ ├── theme-xcode.js │ │ ├── worker-coffee.js │ │ ├── worker-css.js │ │ ├── worker-html.js │ │ ├── worker-javascript.js │ │ ├── worker-json.js │ │ ├── worker-lua.js │ │ ├── worker-php.js │ │ └── worker-xquery.js │ ├── compiled │ │ ├── babel │ │ │ ├── arrowFunctions.js │ │ │ ├── arrowFunctions.js.map │ │ │ ├── classes.js │ │ │ ├── classes.js.map │ │ │ ├── destructuring.js │ │ │ ├── destructuring.js.map │ │ │ ├── loggerLoader.js │ │ │ ├── loggerLoader.js.map │ │ │ ├── maps.js │ │ │ ├── maps.js.map │ │ │ ├── modules-classes.js │ │ │ ├── modules-classes.js.map │ │ │ ├── parameters.js │ │ │ ├── parameters.js.map │ │ │ ├── scopeAndLet.js │ │ │ ├── scopeAndLet.js.map │ │ │ ├── sets.js │ │ │ ├── sets.js.map │ │ │ ├── templateStrings.js │ │ │ ├── templateStrings.js.map │ │ │ ├── weakmap-weakset.js │ │ │ └── weakmap-weakset.js.map │ │ └── typescript │ │ │ ├── calculator.js │ │ │ ├── calculatorJQuery.js │ │ │ ├── classExtension.js │ │ │ ├── definingClasses.js │ │ │ └── interfaces.js │ ├── dist │ │ └── scripts.min.js │ ├── editor.js │ ├── iframe.html │ ├── libs │ │ ├── angular.min.js │ │ ├── bootstrap.min.js │ │ ├── handlebars-v2.0.0.js │ │ ├── jquery-2.1.1.min.js │ │ ├── knockoutjs.js │ │ ├── q.js │ │ ├── traceur-bootstrap.js │ │ └── traceur.js │ └── samples.js ├── package-lock.json ├── package.json ├── readme.txt ├── samples │ ├── dataBindingAndTemplates │ │ ├── angularJS │ │ │ ├── basics.css │ │ │ ├── basics.html │ │ │ ├── basics.js │ │ │ ├── table.css │ │ │ ├── table.html │ │ │ └── table.js │ │ ├── handlebars │ │ │ ├── basics.css │ │ │ ├── basics.html │ │ │ ├── basics.js │ │ │ ├── table.css │ │ │ ├── table.html │ │ │ └── table.js │ │ ├── knockoutJS │ │ │ ├── basics.css │ │ │ ├── basics.html │ │ │ ├── basics.js │ │ │ ├── table.css │ │ │ ├── table.html │ │ │ └── table.js │ │ ├── manipulatingTheDOM.html │ │ └── manipulatingTheDOM.js │ ├── es2015 │ │ ├── Working with ES2015 Modules │ │ │ ├── .gitignore │ │ │ ├── config.js │ │ │ ├── dist │ │ │ │ ├── auto.js │ │ │ │ ├── car.js │ │ │ │ ├── main.js │ │ │ │ └── truck.js │ │ │ ├── gulpfile.js │ │ │ ├── index.html │ │ │ ├── js │ │ │ │ ├── auto.js │ │ │ │ ├── car.js │ │ │ │ ├── main.js │ │ │ │ └── truck.js │ │ │ ├── jsconfig.json │ │ │ ├── npm-debug.log │ │ │ ├── package.json │ │ │ ├── readme.md │ │ │ └── typings │ │ │ │ └── node │ │ │ │ └── node.d.ts │ │ ├── arrowFunctions.html │ │ ├── arrowFunctions.js │ │ ├── classes.html │ │ ├── classes.js │ │ ├── destructuring.html │ │ ├── destructuring.js │ │ ├── loggerLoader.js │ │ ├── maps.html │ │ ├── maps.js │ │ ├── modules-classes.html │ │ ├── modules-classes.js │ │ ├── parameters.html │ │ ├── parameters.js │ │ ├── scopeAndLet.html │ │ ├── scopeAndLet.js │ │ ├── sets.html │ │ ├── sets.js │ │ ├── templateStrings.html │ │ ├── templateStrings.js │ │ ├── traceurCompileOnTheFly.html │ │ ├── weakmap-weakset.html │ │ └── weakmap-weakset.js │ ├── functionTechniques │ │ ├── arrayFunctions.html │ │ ├── arrayFunctions.js │ │ ├── bind-calculator.html │ │ ├── bind-calculator.js │ │ ├── call-apply.html │ │ ├── call-apply.js │ │ ├── call-tableHelper.html │ │ ├── call-tableHelper.js │ │ ├── capturingThis-tableHelper.html │ │ ├── capturingThis-tableHelper.js │ │ ├── customers.txt │ │ ├── iife.html │ │ ├── iife.js │ │ ├── promises-callbacks.html │ │ ├── promises-callbacks.js │ │ ├── promisesAndQ.html │ │ ├── promisesAndQ.js │ │ └── tableStyles.css │ ├── jsCanvasDemos │ │ ├── Images │ │ │ ├── drawImageAPI.png │ │ │ └── super-mario-bros-3.png │ │ ├── Textor │ │ │ ├── Textor.html │ │ │ ├── javascript.js │ │ │ └── texteditor.js │ │ ├── canvasFundamentals.html │ │ ├── canvasSimpleAnimation.html │ │ ├── chart.html │ │ ├── chart.js │ │ └── web.config │ ├── jsDOM │ │ ├── domManipulation.html │ │ ├── domManipulation.js │ │ ├── events.html │ │ ├── events.js │ │ ├── manipulatingCSS.css │ │ ├── manipulatingCSS.html │ │ └── manipulatingCSS.js │ ├── jsGeolocation │ │ ├── geolocationDemo.html │ │ ├── geolocationDemo.js │ │ ├── geolocationWithMap.html │ │ ├── geolocationWithMap.js │ │ ├── simpleGeolocation.html │ │ └── simpleGeolocation.js │ ├── jsLocalStorage │ │ ├── Images │ │ │ └── chalkboard.jpg │ │ ├── LocalStorage.html │ │ ├── LocalStorageWithExpandos.html │ │ ├── ScribbleStorage.html │ │ └── Scripts │ │ │ └── jquery.js │ ├── jsObjects │ │ ├── constructors.html │ │ ├── constructors.js │ │ ├── constructorsAndInstanceOf.html │ │ ├── constructorsAndInstanceOf.js │ │ ├── factories.html │ │ ├── factories.js │ │ ├── functionsAreObjects.html │ │ ├── functionsAreObjects.js │ │ ├── hoisting.html │ │ ├── hoisting.js │ │ ├── inheritance-classical-functionBase.html │ │ ├── inheritance-classical-functionBase.js │ │ ├── inheritance-overriding.html │ │ ├── inheritance-overriding.js │ │ ├── inheritance-prototypal-objectBase.html │ │ ├── inheritance-prototypal-objectBase.js │ │ ├── inheritance-prototypesAndProperties.html │ │ ├── inheritance-prototypesAndProperties.js │ │ ├── properties.html │ │ ├── properties.js │ │ ├── staticVariables.html │ │ └── staticVariables.js │ ├── jsPatterns │ │ ├── closure.html │ │ ├── closure.js │ │ ├── functions.html │ │ ├── functions.js │ │ ├── prototypePattern.html │ │ ├── prototypePattern.js │ │ ├── revealingModulePattern.html │ │ ├── revealingModulePattern.js │ │ ├── revealingPrototypePattern.html │ │ ├── revealingPrototypePattern.js │ │ └── styles.css │ ├── jsPrimer │ │ ├── conditionals.html │ │ ├── conditionals.js │ │ ├── functions.html │ │ ├── functions.js │ │ ├── loops.html │ │ ├── loops.js │ │ ├── objectsAndObjectLiterals.html │ │ ├── objectsAndObjectLiterals.js │ │ ├── useStrict.html │ │ ├── useStrict.js │ │ ├── usingTypeOf.html │ │ ├── usingTypeOf.js │ │ ├── variablesAndTypes.html │ │ └── variablesAndTypes.js │ └── typescript │ │ ├── calculator.css │ │ ├── calculator.html │ │ ├── calculator.ts │ │ ├── calculatorJQuery.html │ │ ├── calculatorJQuery.ts │ │ ├── classExtension.html │ │ ├── classExtension.ts │ │ ├── definingClasses.html │ │ ├── definingClasses.ts │ │ ├── interfaces.html │ │ ├── interfaces.ts │ │ └── jquery.d.ts ├── server.js └── styles │ ├── boostrap.min.css │ ├── iframe.css │ └── styles.css └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | bin 2 | obj 3 | *.suo 4 | packages 5 | *.mdf 6 | *.ldf 7 | node_modules 8 | -------------------------------------------------------------------------------- /Labs/Building Custom JavaScript Objects/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Building Custom JavaScript Objects 5 | 6 | 7 |

Automobiles

8 | 9 |
10 | 11 | 15 | 16 | -------------------------------------------------------------------------------- /Labs/Getting Started with JavaScript/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Getting Started with JavaScript

5 | Right-click and select "Inspect" in Chrome to see the console output. 6 | 7 | 8 | -------------------------------------------------------------------------------- /Labs/Getting Started with JavaScript/Begin/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DanWahlin/MasteringJavaScriptCourseCode/f1943ad51260d83f8cec70367fd321bf277fdc52/Labs/Getting Started with JavaScript/Begin/script.js -------------------------------------------------------------------------------- /Labs/Getting Started with JavaScript/End/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Getting Started with JavaScript

5 | Right-click and select "Inspect" in Chrome to see the console output. 6 | 7 | 8 | -------------------------------------------------------------------------------- /Labs/Getting Started with JavaScript/End/script.js: -------------------------------------------------------------------------------- 1 | //Working with variables 2 | var name = 'Jane Doe', 3 | age = 57, 4 | isRegistered = true, 5 | pets = [ 'Fido', 'Fluffy', 'Peppy']; 6 | 7 | //Logging variables 8 | console.log(name); 9 | console.log(age); 10 | console.log(isRegistered); 11 | console.log(pets); 12 | console.log('Logging Pets using a for loop (except Peppy)') 13 | for (var i=0;i < pets.length;i++) { 14 | if (pets[i] !== 'Peppy') { 15 | console.log(pets[i]); 16 | } 17 | } 18 | console.log(''); 19 | //Working with functions 20 | function add(x,y) { 21 | console.log('Add Result: ' + (x + y)); 22 | } 23 | 24 | add(40,56); 25 | console.log(''); 26 | 27 | //Functions as an Object 28 | function Person(name, age, isRegistered) { 29 | this.name = name; 30 | this.age = age; 31 | this.isRegistered = isRegistered; 32 | } 33 | 34 | var person = new Person('John Doe', 26, false); 35 | console.log('Person (function/object): ' + person.name + ' ' + person.age + ' ' + person.isRegistered); 36 | console.log(''); 37 | 38 | //Working with Object Literals 39 | var customer = { 40 | name: 'Tina Thomas', 41 | age: 35, 42 | isRegistered: true 43 | }; 44 | 45 | console.log('Customer (object literal): ' + customer.name + ' ' + customer.age + ' ' + customer.isRegistered); 46 | 47 | 48 | -------------------------------------------------------------------------------- /Labs/JavaScript and Geolocation/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Geolocation Lab 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Labs/JavaScript and Geolocation/Begin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jsdemos", 3 | "version": "1.0.0", 4 | "description": "Used for JavaScript Demos", 5 | "author": "Dan Wahlin", 6 | "scripts": { 7 | "stop": "node server.js" 8 | }, 9 | "dependencies": { 10 | "express": "^4.14.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Labs/JavaScript and Geolocation/Begin/server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | app.use(express.static(__dirname)); 5 | 6 | app.listen(8080); 7 | console.log('Listening on port 8080'); -------------------------------------------------------------------------------- /Labs/JavaScript and Geolocation/End/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jsdemos", 3 | "version": "1.0.0", 4 | "description": "Used for JavaScript Demos", 5 | "author": "Dan Wahlin", 6 | "scripts": { 7 | "stop": "node server.js" 8 | }, 9 | "dependencies": { 10 | "express": "^4.14.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Labs/JavaScript and Geolocation/End/server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | app.use(express.static(__dirname)); 5 | 6 | app.listen(8080); 7 | console.log('Listening on port 8080'); -------------------------------------------------------------------------------- /Labs/JavaScript and LocalStorage/Begin/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Using Local Storage 5 | 6 | 7 | 8 |

Preferences

9 |
10 | Favorite City: 11 |
12 | Favorite Color: 13 | 20 |
21 |    22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Labs/JavaScript and the DOM/Begin/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DanWahlin/MasteringJavaScriptCourseCode/f1943ad51260d83f8cec70367fd321bf277fdc52/Labs/JavaScript and the DOM/Begin/.gitkeep -------------------------------------------------------------------------------- /Labs/Understanding Closures/Begin/closures.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DanWahlin/MasteringJavaScriptCourseCode/f1943ad51260d83f8cec70367fd321bf277fdc52/Labs/Understanding Closures/Begin/closures.js -------------------------------------------------------------------------------- /Labs/Understanding Closures/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
This is the container
6 |
7 | Border Size 1 8 | Border Size 6 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Labs/Understanding Closures/Begin/simpleClosure.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Using Functions 5 | 9 | 10 | 11 |
12 |

Using a closure

13 | Note that the date variable milliseconds shown 14 | is the same across calls to the myClosure() function in the code. 15 | This is due to a "closure" being created that keeps the variable alive 16 | across function calls. 17 |
18 |
19 |
20 |
21 | 22 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Labs/Understanding Closures/End/closures.js: -------------------------------------------------------------------------------- 1 | function borderChanger(id, size) { 2 | return function() { 3 | document.getElementById(id).style.border = size + 'px solid black'; 4 | }; 5 | } 6 | 7 | var divId = 'container'; 8 | var size1 = borderChanger(divId, 1); 9 | var size6 = borderChanger(divId, 6); 10 | 11 | document.getElementById('size-1').onclick = size1; 12 | document.getElementById('size-6').onclick = size6; -------------------------------------------------------------------------------- /Labs/Understanding Closures/End/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
This is the container
6 |
7 | Border Size 1 8 | Border Size 6 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Labs/Understanding Closures/End/simpleClosure.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Using Functions 5 | 9 | 10 | 11 |
12 |

Using a Closure

13 | Note that the date variable milliseconds shown 14 | is the same across calls to the myClosure() function in the code. 15 | This is due to a "closure" being created that keeps the variable alive 16 | across function calls. 17 |
18 |
19 |
20 |
21 | 22 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/Begin/data.json.txt: -------------------------------------------------------------------------------- 1 | [ 2 | { "firstName": "jane", "lastName": "doe", "city": "phoenix" }, 3 | { "firstName": "john", "lastName": "doe", "city": "phoenix" }, 4 | { "firstName": "michelle", "lastName": "thompson", "city": "seattle" }, 5 | { "firstName": "jose", "lastName": "rodriguez", "city": "california" }, 6 | { "firstName": "tina", "lastName": "smith", "city": "san francisco" } 7 | ] -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Working with Functions 5 | 6 | 7 | 8 |

Customer Data

9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/Begin/js/ajaxService.js: -------------------------------------------------------------------------------- 1 | var ajaxService = function() { 2 | 3 | this.getJSON = function(url) { 4 | var xhr = new XMLHttpRequest(); 5 | xhr.open("GET", url, true); 6 | xhr.setRequestHeader("Accept", "application/json"); 7 | 8 | var deferred = Q.defer(); 9 | 10 | xhr.onload = function (e) { 11 | if (xhr.readyState === 4) { 12 | if (xhr.status === 200) { 13 | var data = (xhr.responseText) ? JSON.parse(xhr.responseText) : null; 14 | deferred.resolve(data); 15 | } else { 16 | deferred.reject(xhr); 17 | } 18 | } 19 | }; 20 | 21 | xhr.onerror = function (e) { 22 | console.error(xhr.statusText); 23 | }; 24 | 25 | xhr.send(); 26 | return deferred.promise; 27 | }; 28 | 29 | return this; 30 | 31 | }(); 32 | 33 | -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/Begin/js/capitalizer.js: -------------------------------------------------------------------------------- 1 | var capitalizer = function() { 2 | 3 | this.capitalize = function(value) { 4 | var upper = value.split(' ').map(function(str) { 5 | return str.charAt(0).toUpperCase() + str.slice(1); 6 | }); 7 | return upper.join(' '); 8 | } 9 | 10 | return this; 11 | 12 | }(); 13 | 14 | -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/Begin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "Used for JavaScript Demos", 5 | "author": "Dan Wahlin", 6 | "dependencies": { 7 | "express": "^4.14.0" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/Begin/server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | app.use(express.static(__dirname)); 5 | 6 | app.listen(9000); 7 | console.log('Listening on port 9000'); -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/Begin/styles/styles.css: -------------------------------------------------------------------------------- 1 | table { width: 400px;} 2 | th { text-align:left;} 3 | tbody > tr:nth-child(odd) { background: #efefef; } 4 | .rowCount { margin-top: 10px; } 5 | .highlight { color: green; font-weight:bold;} -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/End/data.json.txt: -------------------------------------------------------------------------------- 1 | [ 2 | { "firstName": "jane", "lastName": "doe", "city": "phoenix" }, 3 | { "firstName": "john", "lastName": "doe", "city": "phoenix" }, 4 | { "firstName": "michelle", "lastName": "thompson", "city": "seattle" }, 5 | { "firstName": "jose", "lastName": "rodriguez", "city": "california" }, 6 | { "firstName": "tina", "lastName": "smith", "city": "san francisco" } 7 | ] -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/End/js/ajaxService.js: -------------------------------------------------------------------------------- 1 | var ajaxService = function() { 2 | 3 | this.getJSON = function(url) { 4 | var xhr = new XMLHttpRequest(); 5 | xhr.open("GET", url, true); 6 | xhr.setRequestHeader("Accept", "application/json"); 7 | 8 | var deferred = Q.defer(); 9 | 10 | xhr.onload = function (e) { 11 | if (xhr.readyState === 4) { 12 | if (xhr.status === 200) { 13 | var data = (xhr.responseText) ? JSON.parse(xhr.responseText) : null; 14 | deferred.resolve(data); 15 | } else { 16 | deferred.reject(xhr); 17 | } 18 | } 19 | }; 20 | 21 | xhr.onerror = function (e) { 22 | console.error(xhr.statusText); 23 | }; 24 | 25 | xhr.send(); 26 | return deferred.promise; 27 | }; 28 | 29 | return this; 30 | 31 | }(); 32 | 33 | -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/End/js/capitalizer.js: -------------------------------------------------------------------------------- 1 | var capitalizer = function() { 2 | 3 | this.capitalize = function(value) { 4 | var upper = value.split(' ').map(function(str) { 5 | return str.charAt(0).toUpperCase() + str.slice(1); 6 | }); 7 | return upper.join(' '); 8 | } 9 | 10 | return this; 11 | 12 | }(); 13 | 14 | -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/End/js/handlebarsHelper.js: -------------------------------------------------------------------------------- 1 | Handlebars.registerHelper("highlightCity", function (city) { 2 | var highlightedCities = ['Phoenix', 'Seattle', 'Orlando']; 3 | return (highlightedCities.indexOf(city) > -1) ? 'highlight' : ''; 4 | }); 5 | -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/End/js/tableHelper.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var TableHelper = function (settings) { 4 | this.data = settings.data; 5 | this.containerId = settings.containerId; 6 | this.templateId = settings.templateId; 7 | 8 | this.render = function () { 9 | if (this.data) { 10 | //Handlebars code goes here 11 | var source = document.getElementById(this.templateId).innerHTML; 12 | var template = Handlebars.compile(source); 13 | document.getElementById(this.containerId).innerHTML = template(this.data); 14 | } 15 | }; 16 | 17 | }; 18 | 19 | -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/End/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "Used for JavaScript Demos", 5 | "author": "Dan Wahlin", 6 | "dependencies": { 7 | "express": "^4.14.0" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/End/server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | app.use(express.static(__dirname)); 5 | 6 | app.listen(9000); 7 | console.log('Listening on port 9000'); -------------------------------------------------------------------------------- /Labs/Using Data Binding and Templates/End/styles/styles.css: -------------------------------------------------------------------------------- 1 | table { width: 400px;} 2 | th { text-align:left;} 3 | tbody > tr:nth-child(odd) { background: #efefef; } 4 | .rowCount { margin-top: 10px; } 5 | .highlight { color: green; font-weight:bold;} -------------------------------------------------------------------------------- /Labs/Using the Prototype Pattern/Begin/car.js: -------------------------------------------------------------------------------- 1 | var miles = 0; 2 | var basePrice = 30000; 3 | 4 | function start() { 5 | miles += 100; 6 | return 'Car Started'; 7 | } 8 | 9 | function stop() { 10 | return 'Car Stopped'; 11 | } 12 | 13 | function getPricing() { 14 | var tax = basePrice * .08; 15 | var totalPrice = ((basePrice - miles) + tax).toFixed(2); 16 | 17 | //Create an object literal so multiple values can be returned 18 | //using a single object 19 | var total = { 20 | tax: tax, 21 | basePrice: basePrice, 22 | totalPrice: totalPrice 23 | }; 24 | return total; 25 | } 26 | 27 | function getMiles() { 28 | return miles; 29 | } -------------------------------------------------------------------------------- /Labs/Using the Prototype Pattern/Begin/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 |
6 | 7 |
8 |

Car Details

9 | Car Miles: 10 |
11 | Car Price: 12 |
13 | Car Tax: 14 |
15 | Car Total: 16 |
17 | 18 | 19 | 20 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Labs/Using the Prototype Pattern/End/car.js: -------------------------------------------------------------------------------- 1 | var Car = function () { 2 | this.miles = 0; 3 | this.basePrice = 30000; 4 | }; 5 | 6 | Car.prototype = { 7 | 8 | start: function () { 9 | this.miles += 100; 10 | return 'Car Started'; 11 | }, 12 | 13 | stop: function () { 14 | return 'Car Stopped'; 15 | }, 16 | 17 | getPricing: function () { 18 | var tax = this.basePrice * .08; 19 | var totalPrice = ((this.basePrice - this.miles) + tax).toFixed(2); 20 | 21 | //Create an object literal so multiple values can be returned 22 | //using a single object 23 | var total = { 24 | tax: tax, 25 | basePrice: this.basePrice, 26 | totalPrice: totalPrice 27 | }; 28 | return total; 29 | }, 30 | 31 | getMiles: function () { 32 | return this.miles; 33 | } 34 | }; -------------------------------------------------------------------------------- /Labs/Using the Prototype Pattern/End/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 |
6 | 7 |
8 |

Car Details

9 | Car Miles: 10 |
11 | Car Price: 12 |
13 | Car Tax: 14 |
15 | Car Total: 16 |
17 | 18 | 19 | 20 | 21 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Labs/Using the Prototype Pattern/End/tests.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 7 | 8 |
9 | 10 | 11 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Labs/Using the Revealing Module Pattern/Begin/car.js: -------------------------------------------------------------------------------- 1 | var miles = 0; 2 | var basePrice = 30000; 3 | 4 | function start() { 5 | miles += 100; 6 | return 'Car Started'; 7 | } 8 | 9 | function stop() { 10 | return 'Car Stopped'; 11 | } 12 | 13 | function getPricing() { 14 | var tax = basePrice * .08; 15 | var totalPrice = ((basePrice - miles) + tax).toFixed(2); 16 | 17 | //Create an object literal so multiple values can be returned 18 | //using a single object 19 | var total = { 20 | tax: tax, 21 | basePrice: basePrice, 22 | totalPrice: totalPrice 23 | }; 24 | return total; 25 | } 26 | 27 | function getMiles() { 28 | return miles; 29 | } -------------------------------------------------------------------------------- /Labs/Using the Revealing Module Pattern/Begin/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 |
6 | 7 |
8 |

Car Details

9 | Car Miles: 10 |
11 | Car Price: 12 |
13 | Car Tax: 14 |
15 | Car Total: 16 |
17 | 18 | 19 | 20 | 21 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Labs/Using the Revealing Module Pattern/Begin/tests.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 7 | 8 |
9 | 10 | 11 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Labs/Using the Revealing Module Pattern/End/car.js: -------------------------------------------------------------------------------- 1 | var Car = function () { 2 | var miles = 0, 3 | basePrice = 30000, 4 | 5 | start = function () { 6 | miles += 100; 7 | return 'Car Started'; 8 | }, 9 | 10 | stop = function () { 11 | return 'Car Stopped'; 12 | }, 13 | 14 | getPricing = function () { 15 | var tax = basePrice * .08; 16 | var totalPrice = ((basePrice - miles) + tax).toFixed(2); 17 | 18 | //Create an object literal so multiple values can be returned 19 | //using a single object 20 | var total = { 21 | tax: tax, 22 | basePrice: basePrice, 23 | totalPrice: totalPrice 24 | }; 25 | return total; 26 | }, 27 | 28 | getMiles = function () { 29 | return miles; 30 | }; 31 | 32 | return { 33 | start: start, 34 | stop: stop, 35 | getPricing: getPricing, 36 | getMiles: getMiles 37 | }; 38 | }; -------------------------------------------------------------------------------- /Labs/Using the Revealing Module Pattern/End/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 |
5 | 6 |
7 |

Car Details

8 | Car Miles: 9 |
10 | Car Price: 11 |
12 | Car Tax: 13 |
14 | Car Total: 15 |
16 | 17 | 18 | 19 | 20 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /Labs/Using the Revealing Module Pattern/End/tests.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 7 | 8 |
9 | 10 | 11 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Labs/Using the Revealing Prototype Pattern/Begin/car.js: -------------------------------------------------------------------------------- 1 | var miles = 0; 2 | var basePrice = 30000; 3 | 4 | function start() { 5 | miles += 100; 6 | return 'Car Started'; 7 | } 8 | 9 | function stop() { 10 | return 'Car Stopped'; 11 | } 12 | 13 | function getPricing() { 14 | var tax = basePrice * .08; 15 | var totalPrice = ((basePrice - miles) + tax).toFixed(2); 16 | 17 | //Create an object literal so multiple values can be returned 18 | //using a single object 19 | var total = { 20 | tax: tax, 21 | basePrice: basePrice, 22 | totalPrice: totalPrice 23 | }; 24 | return total; 25 | } 26 | 27 | function getMiles() { 28 | return miles; 29 | } -------------------------------------------------------------------------------- /Labs/Using the Revealing Prototype Pattern/Begin/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 |
6 | 7 |
8 |

Car Details

9 | Car Miles: 10 |
11 | Car Price: 12 |
13 | Car Tax: 14 |
15 | Car Total: 16 |
17 | 18 | 19 | 20 | 21 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Labs/Using the Revealing Prototype Pattern/Begin/tests.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 7 | 8 |
9 | 10 | 11 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Labs/Using the Revealing Prototype Pattern/End/car.js: -------------------------------------------------------------------------------- 1 | var Car = function () { 2 | this.miles = 0; 3 | this.basePrice = 30000; 4 | }; 5 | 6 | Car.prototype = function() { 7 | 8 | var start = function () { 9 | this.miles += 100; 10 | return 'Car Started'; 11 | }, 12 | 13 | stop = function () { 14 | return 'Car Stopped'; 15 | }, 16 | 17 | getPricing = function () { 18 | var tax = this.basePrice * .08; 19 | var totalPrice = ((this.basePrice - this.miles) + tax).toFixed(2); 20 | 21 | //Create an object literal so multiple values can be returned 22 | //using a single object 23 | var total = { 24 | tax: tax, 25 | basePrice: this.basePrice, 26 | totalPrice: totalPrice 27 | }; 28 | return total; 29 | }, 30 | 31 | getMiles = function () { 32 | return this.miles; 33 | }; 34 | 35 | return { 36 | start: start, 37 | stop: stop, 38 | getPricing: getPricing, 39 | getMiles: getMiles 40 | } 41 | }(); -------------------------------------------------------------------------------- /Labs/Using the Revealing Prototype Pattern/End/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 |
6 | 7 |
8 |

Car Details

9 | Car Miles: 10 |
11 | Car Price: 12 |
13 | Car Tax: 14 |
15 | Car Total: 16 |
17 | 18 | 19 | 20 | 21 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Labs/Using the Revealing Prototype Pattern/End/tests.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 7 | 8 |
9 | 10 | 11 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Labs/Working with ES2015/Begin/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } -------------------------------------------------------------------------------- /Labs/Working with ES2015/Begin/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | babel = require('gulp-babel'), 3 | es2015Path = 'js/*.js', 4 | compilePath = 'js/compiled'; 5 | 6 | 7 | 8 | 9 | 10 | 11 | gulp.task('watch', function() { 12 | gulp.watch(es2015Path, gulp.series('babel')); 13 | }); 14 | 15 | gulp.task('default', gulp.series('babel', 'watch')); 16 | -------------------------------------------------------------------------------- /Labs/Working with ES2015/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Building Custom ES2015 JavaScript Objects 5 | 6 | 7 |

Automobiles

8 | 9 |
10 | 11 | 12 | 13 | 17 | 18 | -------------------------------------------------------------------------------- /Labs/Working with ES2015/Begin/js/autos.js: -------------------------------------------------------------------------------- 1 | var Auto = function() {} 2 | 3 | Auto.prototype.getTotal = function(taxRate) { 4 | return this.price + (this.price * taxRate); 5 | } 6 | 7 | Auto.prototype.getDetails = function() { 8 | return this.year + ' ' + this.make + ' ' + this.model; 9 | } 10 | 11 | var Car = function(data) { 12 | this.make = data.make; 13 | this.model = data.model; 14 | this.year = data.year; 15 | this.price = data.price; 16 | this.isElectric = data.isElectric; 17 | this.isHatchback = data.isHatchback; 18 | }; 19 | 20 | Car.prototype = Object.create(Auto.prototype); 21 | 22 | Car.prototype.getDetails = function () { 23 | var details = Auto.prototype.getDetails.call(this); 24 | return details + ' Electric: ' + this.isElectric + 25 | ' Hatchback: ' + this.isHatchback; 26 | }; 27 | 28 | var Truck = function(data) { 29 | this.make = data.make; 30 | this.model = data.model; 31 | this.year = data.year; 32 | this.price = data.price; 33 | this.is4by4 = data.is4by4; 34 | }; 35 | 36 | Truck.prototype = Object.create(Auto.prototype); 37 | 38 | Truck.prototype.getDetails = function () { 39 | var details = Auto.prototype.getDetails.call(this); 40 | return details + ' 4X4: ' + this.is4by4; 41 | }; 42 | -------------------------------------------------------------------------------- /Labs/Working with ES2015/Begin/js/compiled/babel/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DanWahlin/MasteringJavaScriptCourseCode/f1943ad51260d83f8cec70367fd321bf277fdc52/Labs/Working with ES2015/Begin/js/compiled/babel/.gitkeep -------------------------------------------------------------------------------- /Labs/Working with ES2015/Begin/js/compiled/traceur/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DanWahlin/MasteringJavaScriptCourseCode/f1943ad51260d83f8cec70367fd321bf277fdc52/Labs/Working with ES2015/Begin/js/compiled/traceur/.gitkeep -------------------------------------------------------------------------------- /Labs/Working with ES2015/Begin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jsdemos", 3 | "version": "1.0.0", 4 | "description": "Used for JavaScript Demos", 5 | "author": "Dan Wahlin", 6 | "dependencies": { 7 | "express": "^4.14.0" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.2.2", 11 | "@babel/preset-env": "^7.2.3", 12 | "gulp": "^4.0.0", 13 | "gulp-babel": "^8.0.0", 14 | "gulp-sourcemaps": "^2.6.4" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Labs/Working with ES2015/End/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } -------------------------------------------------------------------------------- /Labs/Working with ES2015/End/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | babel = require('gulp-babel'), 3 | es2015Path = 'js/*.js', 4 | compilePath = 'js/compiled'; 5 | 6 | gulp.task('babel', function () { 7 | return gulp.src([es2015Path]) 8 | .pipe(babel({ 9 | presets: ['@babel/env'] 10 | })) 11 | .pipe(gulp.dest(compilePath + '/babel')); 12 | }); 13 | 14 | gulp.task('watch', function() { 15 | gulp.watch(es2015Path, gulp.series('babel')); 16 | }); 17 | 18 | gulp.task('default', gulp.series('babel', 'watch')); 19 | -------------------------------------------------------------------------------- /Labs/Working with ES2015/End/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Building Custom ES2015 JavaScript Objects 5 | 6 | 7 |

Automobiles

8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Labs/Working with ES2015/End/js/autos.js: -------------------------------------------------------------------------------- 1 | class Auto { 2 | 3 | constructor(data) { 4 | this.make = data.make; 5 | this.model = data.model; 6 | this.year = data.year; 7 | this.price = data.price; 8 | } 9 | 10 | getTotal(taxRate) { 11 | return this.price + (this.price * taxRate); 12 | } 13 | 14 | getDetails() { 15 | return this.year + ' ' + this.make + ' ' + this.model; 16 | } 17 | 18 | } 19 | 20 | class Car extends Auto { 21 | 22 | constructor(data) { 23 | super(data); 24 | this.isElectric = data.isElectric; 25 | this.isHatchback = data.isHatchback; 26 | } 27 | 28 | getDetails() { 29 | var details = super.getDetails(); 30 | return details + ' Electric: ' + this.isElectric + 31 | ' Hatchback: ' + this.isHatchback; 32 | } 33 | } 34 | 35 | 36 | class Truck extends Auto { 37 | 38 | constructor(data) { 39 | super(data); 40 | this.is4by4 = data.is4by4; 41 | } 42 | 43 | getDetails() { 44 | var details = super.getDetails(); 45 | return details + ' 4X4: ' + this.is4by4; 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /Labs/Working with ES2015/End/js/compiled/babel/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DanWahlin/MasteringJavaScriptCourseCode/f1943ad51260d83f8cec70367fd321bf277fdc52/Labs/Working with ES2015/End/js/compiled/babel/.gitkeep -------------------------------------------------------------------------------- /Labs/Working with ES2015/End/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jsdemos", 3 | "version": "1.0.0", 4 | "description": "Used for JavaScript Demos", 5 | "author": "Dan Wahlin", 6 | "dependencies": { 7 | "express": "^4.14.0" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.2.2", 11 | "@babel/preset-env": "^7.2.3", 12 | "gulp": "^4.0.0", 13 | "gulp-babel": "^8.0.0", 14 | "gulp-sourcemaps": "^2.6.4" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Labs/Working with Functions/Begin/data.json.txt: -------------------------------------------------------------------------------- 1 | [ 2 | { "firstName": "jane", "lastName": "doe", "city": "phoenix" }, 3 | { "firstName": "john", "lastName": "doe", "city": "phoenix" }, 4 | { "firstName": "michelle", "lastName": "thompson", "city": "seattle" }, 5 | { "firstName": "jose", "lastName": "rodriguez", "city": "california" }, 6 | { "firstName": "tina", "lastName": "smith", "city": "san francisco" } 7 | ] -------------------------------------------------------------------------------- /Labs/Working with Functions/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Working with Functions 5 | 6 | 7 | 8 |

Customer Data

9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Labs/Working with Functions/Begin/js/ajaxService.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Labs/Working with Functions/Begin/js/capitalizer.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Labs/Working with Functions/Begin/js/tableHelper.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var TableHelper = function (settings) { 4 | this.data = settings.data; 5 | this.columnMap = settings.columnMap; 6 | this.containerId = settings.containerId; 7 | var table = '', 8 | endTable = '
'; 9 | 10 | this.render = function () { 11 | if (this.data && this.data.length) { 12 | //Change caller to TableHelper instance 13 | 14 | } 15 | }; 16 | 17 | var renderHeader = function (renderThead) { 18 | var tr = ''; 19 | for (var prop in this.data[0]) { 20 | tr += '' + getColumnName.call(this, prop) + ''; 21 | } 22 | tr += ''; 23 | if (renderThead) tr = '' + tr + ''; 24 | return tr; 25 | }, 26 | 27 | renderRows = function (renderTbody) { 28 | var rows = ''; 29 | for (var i = 0, len = this.data.length; i < len; i++) { 30 | rows += ''; 31 | var row = this.data[i]; 32 | for (var prop in row) { 33 | rows += '' + row[prop] + ''; 34 | } 35 | rows += ''; 36 | } 37 | if (renderTbody) rows = '' + rows + ''; 38 | return rows; 39 | }, 40 | 41 | renderTable = function () { 42 | var container = document.getElementById(this.containerId); 43 | if (container) { 44 | table += '
' + this.data.length + ' rows
'; 45 | container.innerHTML = table; 46 | } 47 | }, 48 | 49 | //Add getColumnName() here 50 | 51 | 52 | 53 | }; 54 | 55 | -------------------------------------------------------------------------------- /Labs/Working with Functions/Begin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Server", 3 | "version": "1.0.0", 4 | "description": "Used for JavaScript Demos", 5 | "author": "Dan Wahlin", 6 | "engines": { 7 | "node": ">=0.10.28" 8 | }, 9 | "dependencies": { 10 | "express": "^4.9.6" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Labs/Working with Functions/Begin/server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | app.use(express.static(__dirname)); 5 | 6 | app.listen(9000); 7 | console.log('Listening on port 9000'); -------------------------------------------------------------------------------- /Labs/Working with Functions/Begin/styles/styles.css: -------------------------------------------------------------------------------- 1 | table { width: 400px;} 2 | th { text-align:left;} 3 | tbody > tr:nth-child(odd) { background: #efefef; } 4 | .rowCount { margin-top: 10px; } -------------------------------------------------------------------------------- /Labs/Working with Functions/End/data.json.txt: -------------------------------------------------------------------------------- 1 | [ 2 | { "firstName": "jane", "lastName": "doe", "city": "phoenix" }, 3 | { "firstName": "john", "lastName": "doe", "city": "phoenix" }, 4 | { "firstName": "michelle", "lastName": "thompson", "city": "seattle" }, 5 | { "firstName": "jose", "lastName": "rodriguez", "city": "california" }, 6 | { "firstName": "tina", "lastName": "smith", "city": "san francisco" } 7 | ] -------------------------------------------------------------------------------- /Labs/Working with Functions/End/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Working with Functions 5 | 6 | 7 | 8 |

Customer Data

9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Labs/Working with Functions/End/js/ajaxService.js: -------------------------------------------------------------------------------- 1 | var ajaxService = function() { 2 | 3 | this.getJSON = function(url) { 4 | var xhr = new XMLHttpRequest(); 5 | xhr.open("GET", url, true); 6 | xhr.setRequestHeader("Accept", "application/json"); 7 | 8 | var deferred = Q.defer(); 9 | 10 | xhr.onload = function (e) { 11 | if (xhr.readyState === 4) { 12 | if (xhr.status === 200) { 13 | var data = (xhr.responseText) ? JSON.parse(xhr.responseText) : null; 14 | deferred.resolve(data); 15 | } else { 16 | deferred.reject(xhr); 17 | } 18 | } 19 | }; 20 | 21 | xhr.onerror = function (e) { 22 | console.error(xhr.statusText); 23 | }; 24 | 25 | xhr.send(); 26 | return deferred.promise; 27 | }; 28 | 29 | return this; 30 | 31 | }(); 32 | 33 | -------------------------------------------------------------------------------- /Labs/Working with Functions/End/js/capitalizer.js: -------------------------------------------------------------------------------- 1 | var capitalizer = function() { 2 | 3 | this.capitalize = function(value) { 4 | var upper = value.split(' ').map(function(str) { 5 | return str.charAt(0).toUpperCase() + str.slice(1); 6 | }); 7 | return upper.join(' '); 8 | } 9 | 10 | return this; 11 | 12 | }(); 13 | 14 | -------------------------------------------------------------------------------- /Labs/Working with Functions/End/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Server", 3 | "version": "1.0.0", 4 | "description": "Used for JavaScript Demos", 5 | "author": "Dan Wahlin", 6 | "engines": { 7 | "node": ">=0.10.28" 8 | }, 9 | "dependencies": { 10 | "express": "^4.9.6" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Labs/Working with Functions/End/server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | app.use(express.static(__dirname)); 5 | 6 | app.listen(9000); 7 | console.log('Listening on port 9000'); -------------------------------------------------------------------------------- /Labs/Working with Functions/End/styles/styles.css: -------------------------------------------------------------------------------- 1 | table { width: 400px;} 2 | th { text-align:left;} 3 | tbody > tr:nth-child(odd) { background: #efefef; } 4 | .rowCount { margin-top: 10px; } -------------------------------------------------------------------------------- /Mastering JavaScript/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } -------------------------------------------------------------------------------- /Mastering JavaScript/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | sourcemaps = require('gulp-sourcemaps'), 3 | babel = require('gulp-babel'), 4 | ts = require('gulp-typescript'), 5 | uglify = require('gulp-uglify'), 6 | concat = require('gulp-concat'), 7 | plumber = require('gulp-plumber'), 8 | es2015Path = 'samples/es6/*.js', 9 | tsPath = 'samples/typescript/*.ts', 10 | compilePath = 'js/compiled', 11 | dist = 'js/dist'; 12 | 13 | gulp.task('compressScripts', function () { 14 | gulp.src([ 15 | compilePath + '/babel/*.js' 16 | ]) 17 | .pipe(plumber()) 18 | .pipe(concat('scripts.min.js')) 19 | .pipe(uglify()) 20 | .pipe(gulp.dest(dist)); 21 | }); 22 | 23 | gulp.task('babel', function () { 24 | return gulp.src([es2015Path]) 25 | .pipe(plumber()) 26 | .pipe(sourcemaps.init()) 27 | .pipe(babel({ 28 | presets: ['@babel/env'] 29 | })) 30 | .pipe(sourcemaps.write('.')) 31 | .pipe(gulp.dest(compilePath + '/babel')); 32 | }); 33 | 34 | gulp.task('typescript', function () { 35 | var tsResult = gulp.src(tsPath) 36 | .pipe(ts({ 37 | target: 'ES5', 38 | declarationFiles: false, 39 | noResolve: true 40 | })); 41 | 42 | tsResult.dts.pipe(gulp.dest(compilePath + '/tsdefinitions')); 43 | return tsResult.js.pipe(gulp.dest(compilePath + '/typescript')); 44 | }); 45 | 46 | gulp.task('watch', function() { 47 | 48 | gulp.watch([es2015Path,tsPath], gulp.series('babel', 'typescript')); 49 | 50 | }); 51 | 52 | gulp.task('default', gulp.series('babel', 'typescript', 'watch', 'compressScripts')); 53 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/ext-error_marker.js: -------------------------------------------------------------------------------- 1 | 2 | ; 3 | (function() { 4 | window.require(["ace/ext/error_marker"], function() {}); 5 | })(); 6 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/ext-linking.js: -------------------------------------------------------------------------------- 1 | define("ace/ext/linking",["require","exports","module","ace/editor","ace/config"], function(require, exports, module) { 2 | 3 | var Editor = require("ace/editor").Editor; 4 | 5 | require("../config").defineOptions(Editor.prototype, "editor", { 6 | enableLinking: { 7 | set: function(val) { 8 | if (val) { 9 | this.on("click", onClick); 10 | this.on("mousemove", onMouseMove); 11 | } else { 12 | this.off("click", onClick); 13 | this.off("mousemove", onMouseMove); 14 | } 15 | }, 16 | value: false 17 | } 18 | }) 19 | 20 | function onMouseMove(e) { 21 | var editor = e.editor; 22 | var ctrl = e.getAccelKey(); 23 | 24 | if (ctrl) { 25 | var editor = e.editor; 26 | var docPos = e.getDocumentPosition(); 27 | var session = editor.session; 28 | var token = session.getTokenAt(docPos.row, docPos.column); 29 | 30 | editor._emit("linkHover", {position: docPos, token: token}); 31 | } 32 | } 33 | 34 | function onClick(e) { 35 | var ctrl = e.getAccelKey(); 36 | var button = e.getButton(); 37 | 38 | if (button == 0 && ctrl) { 39 | var editor = e.editor; 40 | var docPos = e.getDocumentPosition(); 41 | var session = editor.session; 42 | var token = session.getTokenAt(docPos.row, docPos.column); 43 | 44 | editor._emit("linkClick", {position: docPos, token: token}); 45 | } 46 | } 47 | 48 | }); 49 | ; 50 | (function() { 51 | window.require(["ace/ext/linking"], function() {}); 52 | })(); 53 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/mode-gitignore.js: -------------------------------------------------------------------------------- 1 | define("ace/mode/gitignore_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | var oop = require("../lib/oop"); 5 | var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules; 6 | 7 | var GitignoreHighlightRules = function() { 8 | this.$rules = { 9 | "start" : [ 10 | { 11 | token : "comment", 12 | regex : /^\s*#.*$/ 13 | }, { 14 | token : "keyword", // negated patterns 15 | regex : /^\s*!.*$/ 16 | } 17 | ] 18 | }; 19 | 20 | this.normalizeRules(); 21 | }; 22 | 23 | GitignoreHighlightRules.metaData = { 24 | fileTypes: ['gitignore'], 25 | name: 'Gitignore' 26 | }; 27 | 28 | oop.inherits(GitignoreHighlightRules, TextHighlightRules); 29 | 30 | exports.GitignoreHighlightRules = GitignoreHighlightRules; 31 | }); 32 | 33 | define("ace/mode/gitignore",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/gitignore_highlight_rules"], function(require, exports, module) { 34 | "use strict"; 35 | 36 | var oop = require("../lib/oop"); 37 | var TextMode = require("./text").Mode; 38 | var GitignoreHighlightRules = require("./gitignore_highlight_rules").GitignoreHighlightRules; 39 | 40 | var Mode = function() { 41 | this.HighlightRules = GitignoreHighlightRules; 42 | }; 43 | oop.inherits(Mode, TextMode); 44 | 45 | (function() { 46 | this.$id = "ace/mode/gitignore"; 47 | }).call(Mode.prototype); 48 | 49 | exports.Mode = Mode; 50 | }); 51 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/mode-plain_text.js: -------------------------------------------------------------------------------- 1 | define("ace/mode/plain_text",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/text_highlight_rules","ace/mode/behaviour"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | var oop = require("../lib/oop"); 5 | var TextMode = require("./text").Mode; 6 | var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules; 7 | var Behaviour = require("./behaviour").Behaviour; 8 | 9 | var Mode = function() { 10 | this.HighlightRules = TextHighlightRules; 11 | this.$behaviour = new Behaviour(); 12 | }; 13 | 14 | oop.inherits(Mode, TextMode); 15 | 16 | (function() { 17 | this.type = "text"; 18 | this.getNextLineIndent = function(state, line, tab) { 19 | return ''; 20 | }; 21 | this.$id = "ace/mode/plain_text"; 22 | }).call(Mode.prototype); 23 | 24 | exports.Mode = Mode; 25 | }); 26 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/mode-text.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/abap.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/abap",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "abap"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/ada.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/ada",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "ada"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/apache_conf.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/apache_conf",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "apache_conf"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/applescript.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/applescript",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "applescript"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/asciidoc.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/asciidoc",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "asciidoc"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/assembly_x86.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/assembly_x86",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "assembly_x86"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/autohotkey.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/autohotkey",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "autohotkey"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/batchfile.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/batchfile",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "batchfile"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/c9search.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/c9search",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "c9search"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/cirru.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/cirru",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "cirru"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/cobol.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/cobol",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "cobol"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/coldfusion.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/coldfusion",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "coldfusion"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/csharp.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/csharp",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "csharp"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/curly.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/curly",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "curly"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/d.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/d",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "d"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/diff.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/diff",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText = "# DEP-3 (http://dep.debian.net/deps/dep3/) style patch header\n\ 5 | snippet header DEP-3 style header\n\ 6 | Description: ${1}\n\ 7 | Origin: ${2:vendor|upstream|other}, ${3:url of the original patch}\n\ 8 | Bug: ${4:url in upstream bugtracker}\n\ 9 | Forwarded: ${5:no|not-needed|url}\n\ 10 | Author: ${6:`g:snips_author`}\n\ 11 | Reviewed-by: ${7:name and email}\n\ 12 | Last-Update: ${8:`strftime(\"%Y-%m-%d\")`}\n\ 13 | Applied-Upstream: ${9:upstream version|url|commit}\n\ 14 | \n\ 15 | "; 16 | exports.scope = "diff"; 17 | 18 | }); 19 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/dockerfile.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/dockerfile",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "dockerfile"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/dot.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/dot",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "dot"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/eiffel.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/eiffel",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "eiffel"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/ejs.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/ejs",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "ejs"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/forth.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/forth",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "forth"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/ftl.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/ftl",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "ftl"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/gcode.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/gcode",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "gcode"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/gherkin.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/gherkin",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "gherkin"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/gitignore.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/gitignore",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "gitignore"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/glsl.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/glsl",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "glsl"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/golang.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/golang",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "golang"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/groovy.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/groovy",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "groovy"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/haml.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/haml",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText = "snippet t\n\ 5 | %table\n\ 6 | %tr\n\ 7 | %th\n\ 8 | ${1:headers}\n\ 9 | %tr\n\ 10 | %td\n\ 11 | ${2:headers}\n\ 12 | snippet ul\n\ 13 | %ul\n\ 14 | %li\n\ 15 | ${1:item}\n\ 16 | %li\n\ 17 | snippet =rp\n\ 18 | = render :partial => '${1:partial}'\n\ 19 | snippet =rpl\n\ 20 | = render :partial => '${1:partial}', :locals => {}\n\ 21 | snippet =rpc\n\ 22 | = render :partial => '${1:partial}', :collection => @$1\n\ 23 | \n\ 24 | "; 25 | exports.scope = "haml"; 26 | 27 | }); 28 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/handlebars.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/handlebars",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "handlebars"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/haxe.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/haxe",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "haxe"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/html_ruby.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/html_ruby",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "html_ruby"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/ini.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/ini",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "ini"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/jack.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/jack",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "jack"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/jade.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/jade",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "jade"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/json.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/json",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "json"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/jsx.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/jsx",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "jsx"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/julia.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/julia",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "julia"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/latex.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/latex",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "latex"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/less.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/less",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "less"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/liquid.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/liquid",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "liquid"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/lisp.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/lisp",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "lisp"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/livescript.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/livescript",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "livescript"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/logiql.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/logiql",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "logiql"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/lua.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/lua",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText = "snippet #!\n\ 5 | #!/usr/bin/env lua\n\ 6 | $1\n\ 7 | snippet local\n\ 8 | local ${1:x} = ${2:1}\n\ 9 | snippet fun\n\ 10 | function ${1:fname}(${2:...})\n\ 11 | ${3:-- body}\n\ 12 | end\n\ 13 | snippet for\n\ 14 | for ${1:i}=${2:1},${3:10} do\n\ 15 | ${4:print(i)}\n\ 16 | end\n\ 17 | snippet forp\n\ 18 | for ${1:i},${2:v} in pairs(${3:table_name}) do\n\ 19 | ${4:-- body}\n\ 20 | end\n\ 21 | snippet fori\n\ 22 | for ${1:i},${2:v} in ipairs(${3:table_name}) do\n\ 23 | ${4:-- body}\n\ 24 | end\n\ 25 | "; 26 | exports.scope = "lua"; 27 | 28 | }); 29 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/luapage.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/luapage",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "luapage"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/lucene.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/lucene",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "lucene"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/makefile.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/makefile",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText = "snippet ifeq\n\ 5 | ifeq (${1:cond0},${2:cond1})\n\ 6 | ${3:code}\n\ 7 | endif\n\ 8 | "; 9 | exports.scope = "makefile"; 10 | 11 | }); 12 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/matlab.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/matlab",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "matlab"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/mel.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/mel",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "mel"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/mushcode.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/mushcode",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "mushcode"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/mysql.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/mysql",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "mysql"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/nix.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/nix",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "nix"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/objectivec.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/objectivec",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "objectivec"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/ocaml.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/ocaml",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "ocaml"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/pascal.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/pascal",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "pascal"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/pgsql.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/pgsql",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "pgsql"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/plain_text.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/plain_text",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "plain_text"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/powershell.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/powershell",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "powershell"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/praat.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/praat",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "praat"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/prolog.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/prolog",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "prolog"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/properties.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/properties",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "properties"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/protobuf.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/protobuf",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText = ""; 5 | exports.scope = "protobuf"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/rdoc.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/rdoc",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "rdoc"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/rhtml.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/rhtml",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "rhtml"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/rust.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/rust",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "rust"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/sass.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/sass",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "sass"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/scad.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/scad",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "scad"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/scala.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/scala",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "scala"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/scheme.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/scheme",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "scheme"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/scss.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/scss",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "scss"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/sjs.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/sjs",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "sjs"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/smarty.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/smarty",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "smarty"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/snippets.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/snippets",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText = "# snippets for making snippets :)\n\ 5 | snippet snip\n\ 6 | snippet ${1:trigger}\n\ 7 | ${2}\n\ 8 | snippet msnip\n\ 9 | snippet ${1:trigger} ${2:description}\n\ 10 | ${3}\n\ 11 | snippet v\n\ 12 | {VISUAL}\n\ 13 | "; 14 | exports.scope = "snippets"; 15 | 16 | }); 17 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/soy_template.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/soy_template",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "soy_template"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/space.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/space",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "space"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/sql.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/sql",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText = "snippet tbl\n\ 5 | create table ${1:table} (\n\ 6 | ${2:columns}\n\ 7 | );\n\ 8 | snippet col\n\ 9 | ${1:name} ${2:type} ${3:default ''} ${4:not null}\n\ 10 | snippet ccol\n\ 11 | ${1:name} varchar2(${2:size}) ${3:default ''} ${4:not null}\n\ 12 | snippet ncol\n\ 13 | ${1:name} number ${3:default 0} ${4:not null}\n\ 14 | snippet dcol\n\ 15 | ${1:name} date ${3:default sysdate} ${4:not null}\n\ 16 | snippet ind\n\ 17 | create index ${3:$1_$2} on ${1:table}(${2:column});\n\ 18 | snippet uind\n\ 19 | create unique index ${1:name} on ${2:table}(${3:column});\n\ 20 | snippet tblcom\n\ 21 | comment on table ${1:table} is '${2:comment}';\n\ 22 | snippet colcom\n\ 23 | comment on column ${1:table}.${2:column} is '${3:comment}';\n\ 24 | snippet addcol\n\ 25 | alter table ${1:table} add (${2:column} ${3:type});\n\ 26 | snippet seq\n\ 27 | create sequence ${1:name} start with ${2:1} increment by ${3:1} minvalue ${4:1};\n\ 28 | snippet s*\n\ 29 | select * from ${1:table}\n\ 30 | "; 31 | exports.scope = "sql"; 32 | 33 | }); 34 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/stylus.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/stylus",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "stylus"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/svg.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/svg",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "svg"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/text.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/text",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "text"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/textile.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/textile",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText = "# Jekyll post header\n\ 5 | snippet header\n\ 6 | ---\n\ 7 | title: ${1:title}\n\ 8 | layout: post\n\ 9 | date: ${2:date} ${3:hour:minute:second} -05:00\n\ 10 | ---\n\ 11 | \n\ 12 | # Image\n\ 13 | snippet img\n\ 14 | !${1:url}(${2:title}):${3:link}!\n\ 15 | \n\ 16 | # Table\n\ 17 | snippet |\n\ 18 | |${1}|${2}\n\ 19 | \n\ 20 | # Link\n\ 21 | snippet link\n\ 22 | \"${1:link text}\":${2:url}\n\ 23 | \n\ 24 | # Acronym\n\ 25 | snippet (\n\ 26 | (${1:Expand acronym})${2}\n\ 27 | \n\ 28 | # Footnote\n\ 29 | snippet fn\n\ 30 | [${1:ref number}] ${3}\n\ 31 | \n\ 32 | fn$1. ${2:footnote}\n\ 33 | \n\ 34 | "; 35 | exports.scope = "textile"; 36 | 37 | }); 38 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/toml.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/toml",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "toml"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/twig.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/twig",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "twig"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/typescript.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/typescript",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "typescript"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/vbscript.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/vbscript",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "vbscript"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/velocity.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/velocity",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText = "# macro\n\ 5 | snippet #macro\n\ 6 | #macro ( ${1:macroName} ${2:\\$var1, [\\$var2, ...]} )\n\ 7 | ${3:## macro code}\n\ 8 | #end\n\ 9 | # foreach\n\ 10 | snippet #foreach\n\ 11 | #foreach ( ${1:\\$item} in ${2:\\$collection} )\n\ 12 | ${3:## foreach code}\n\ 13 | #end\n\ 14 | # if\n\ 15 | snippet #if\n\ 16 | #if ( ${1:true} )\n\ 17 | ${0}\n\ 18 | #end\n\ 19 | # if ... else\n\ 20 | snippet #ife\n\ 21 | #if ( ${1:true} )\n\ 22 | ${2}\n\ 23 | #else\n\ 24 | ${0}\n\ 25 | #end\n\ 26 | #import\n\ 27 | snippet #import\n\ 28 | #import ( \"${1:path/to/velocity/format}\" )\n\ 29 | # set\n\ 30 | snippet #set\n\ 31 | #set ( $${1:var} = ${0} )\n\ 32 | "; 33 | exports.scope = "velocity"; 34 | exports.includeScopes = ["html", "javascript", "css"]; 35 | 36 | }); 37 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/verilog.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/verilog",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "verilog"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/vhdl.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/vhdl",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "vhdl"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/xml.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/xml",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "xml"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/ace/snippets/yaml.js: -------------------------------------------------------------------------------- 1 | define("ace/snippets/yaml",["require","exports","module"], function(require, exports, module) { 2 | "use strict"; 3 | 4 | exports.snippetText =undefined; 5 | exports.scope = "yaml"; 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/compiled/babel/arrowFunctions.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["arrowFunctions.js"],"names":[],"mappings":";;;;;;AAAA,IAAI,WAAW,SAAX,QAAW;AAAA,WAAO,QAAQ,GAAR,CAAY,GAAZ,CAAP;AAAA,CAAf,C;;AAEA,SAAS,8BAAT;;;AAGA,SAAS,GAAT,GAAe;AACX,QAAI,OAAO,IAAX;AACA,SAAK,MAAL,GAAc,CAAd;;AAEA,SAAK,OAAL,GAAe,YAAW;AACtB,mBAAW,YAAW;AAClB,oBAAQ,GAAR,CAAY,KAAK,MAAL,EAAZ;AACH,SAFD,EAEG,IAFH;AAGH,KAJD;AAKH;;;;IAGK,Y;AAEF,4BAAc;AAAA;;AACV,aAAK,MAAL,GAAc,CAAd;AACH;;;;kCAES;AAAA;;AACN,uBAAW,YAAM;AACb,wBAAQ,GAAR,CAAY,MAAK,MAAL,EAAZ;AACH,aAFD,EAEG,IAFH;AAGH;;;;;;AAGL,IAAI,IAAI,IAAI,GAAJ,EAAR;AACA,EAAE,OAAF;AACA,IAAI,SAAS,IAAI,YAAJ,EAAb;AACA,OAAO,OAAP","file":"arrowFunctions.js","sourcesContent":["var myLogger = msg => console.log(msg); //Creates an anonymous function\r\n\r\nmyLogger('Testing out arrow functions!');\r\n\r\n//Working with \"this\" the \"old\" way\r\nfunction Car() {\r\n var self = this;\r\n this._seats = 4; \r\n\r\n this.timeout = function() {\r\n setTimeout(function() {\r\n console.log(self._seats++);\r\n }, 1000);\r\n }\r\n}\r\n\r\n//Working with this using arrow functions\r\nclass CarWithArrow {\r\n\r\n constructor() {\r\n this._seats = 6;\r\n }\r\n\r\n timeout() {\r\n setTimeout(() => {\r\n console.log(this._seats++);\r\n }, 1000);\r\n }\r\n}\r\n\r\nvar c = new Car();\r\nc.timeout();\r\nvar cArrow = new CarWithArrow();\r\ncArrow.timeout();"],"sourceRoot":"/source/"} -------------------------------------------------------------------------------- /Mastering JavaScript/js/compiled/babel/classes.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["classes.js"],"names":[],"mappings":";;;;;;;;;;;;IAAM,O;AACF,uBAAc;AAAA;;AACV,aAAK,OAAL,GAAe,MAAf;AACH;;;;4BAEG,G,EAAK;AACL,oBAAQ,GAAR,CAAY,KAAK,OAAL,GAAe,IAAf,GAAsB,GAAlC;AACH;;;;;;IAGC,M;;;AAEF,oBAAY,OAAZ,EAAqB;AAAA;;AAAA,yFACX,OADW;AAEpB;;;;kCAES,G,EAAK;AACX,kFAAU,MAAM,MAAhB;AACH;;;;EARgB,O","file":"classes.js","sourcesContent":["class BaseLog {\r\n constructor() {\r\n this.logName = 'Log1';\r\n }\r\n\r\n log(msg) {\r\n console.log(this.logName + ': ' + msg);\r\n }\r\n}\r\n\r\nclass Logger extends BaseLog {\r\n\r\n constructor(logName) {\r\n super(logName);\r\n }\r\n\r\n writeLine(msg) {\r\n super.log(msg + '\\r\\n');\r\n }\r\n}\r\n"],"sourceRoot":"/source/"} -------------------------------------------------------------------------------- /Mastering JavaScript/js/compiled/babel/loggerLoader.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var logger = new Logger('MyLog'); 4 | logger.writeLine('Logging via ES6 classes!'); 5 | //# sourceMappingURL=loggerLoader.js.map 6 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/compiled/babel/loggerLoader.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["loggerLoader.js"],"names":[],"mappings":";;AAAA,IAAI,SAAS,IAAI,MAAJ,CAAW,OAAX,CAAb;AACA,OAAO,SAAP,CAAiB,0BAAjB","file":"loggerLoader.js","sourcesContent":["var logger = new Logger('MyLog');\r\nlogger.writeLine('Logging via ES6 classes!');"],"sourceRoot":"/source/"} -------------------------------------------------------------------------------- /Mastering JavaScript/js/compiled/babel/parameters.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["parameters.js"],"names":[],"mappings":";;;;;;IAAM,G;;;;;;;sCAEY;AACV,mBAAO,IAAI,IAAJ,GAAW,WAAX,EAAP;AACH;;;;;;qCAG2F;AAAA,gBAAjF,IAAiF,yDAA1E,SAA0E;AAAA,gBAA/D,KAA+D,yDAAvD,UAAuD;AAAA,gBAA3C,IAA2C,yDAApC,KAAK,WAAL,EAAoC;;AACxF,oBAAQ,GAAR,CAAY,OAAO,GAAP,GAAa,KAAb,GAAqB,GAArB,GAA2B,IAAvC;;AADwF,8CAAb,WAAa;AAAb,2BAAa;AAAA;;AAExF,gBAAI,WAAJ,EAAiB;AACb,qBAAK,IAAI,IAAI,CAAb,EAAgB,IAAI,YAAY,MAAhC,EAAwC,GAAxC,EAA6C;AACzC,4BAAQ,GAAR,CAAY,OAAO,YAAY,CAAZ,CAAnB;AACH;AACJ;AACJ;;;;;;AAKL,IAAI,MAAM,IAAI,GAAJ,EAAV;;AAEA,IAAI,UAAJ,CAAe,QAAf,EAAyB,QAAzB;AACA,IAAI,UAAJ;;;AAGA,IAAI,UAAJ,CAAe,QAAf,EAAyB,QAAzB,EAAmC,IAAnC,EAAyC,SAAzC,EAAoD,KAApD,EAA2D,QAA3D","file":"parameters.js","sourcesContent":["class Car {\r\n\r\n currentYear() {\r\n return new Date().getFullYear();\r\n }\r\n \r\n //The year parameter is a \"default parameter\"\r\n setDetails(make = 'No Make', model = 'No Model', year = this.currentYear(), ...accessories) {\r\n console.log(make + ' ' + model + ' ' + year); \r\n if (accessories) {\r\n for (var i = 0; i < accessories.length; i++) {\r\n console.log('\\n' + accessories[i]);\r\n }\r\n }\r\n }\r\n\r\n}\r\n\r\n\r\nvar car = new Car();\r\n//Testing default parameters\r\ncar.setDetails('Toyota', 'Tundra');\r\ncar.setDetails();\r\n\r\n//Testing rest parameters\r\ncar.setDetails('Toyota', 'Tundra', 2015, 'sunroof', '4X4', '4-door');\r\n"],"sourceRoot":"/source/"} -------------------------------------------------------------------------------- /Mastering JavaScript/js/compiled/babel/scopeAndLet.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var age = 55; 4 | 5 | for (var _i = 0; _i < 5; _i++) { 6 | age += 5; 7 | } 8 | 9 | try { 10 | console.log(i); 11 | } catch (e) { 12 | console.log('i is out of scope due to using let!'); 13 | } 14 | //# sourceMappingURL=scopeAndLet.js.map 15 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/compiled/babel/scopeAndLet.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["scopeAndLet.js"],"names":[],"mappings":";;AAAA,IAAI,MAAM,EAAV;;AAEA,KAAK,IAAI,KAAI,CAAb,EAAgB,KAAI,CAApB,EAAuB,IAAvB,EAA4B;AACxB,WAAO,CAAP;AACH;;AAED,IAAI;AACA,YAAQ,GAAR,CAAY,CAAZ;AACH,CAFD,CAEE,OAAO,CAAP,EAAU;AACR,YAAQ,GAAR,CAAY,qCAAZ;AACH","file":"scopeAndLet.js","sourcesContent":["var age = 55;\r\n\r\nfor (let i = 0; i < 5; i++) {\r\n age += 5;\r\n}\r\n\r\ntry {\r\n console.log(i);\r\n} catch (e) {\r\n console.log('i is out of scope due to using let!');\r\n}"],"sourceRoot":"/source/"} -------------------------------------------------------------------------------- /Mastering JavaScript/js/compiled/babel/templateStrings.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["templateStrings.js"],"names":[],"mappings":";;;;;;;;;;IAAa,G,WAAA,G;AACT,iBAAY,IAAZ,EAAkB,KAAlB,EAAyB,MAAzB,EAAiC,KAAjC,EAAwC;AAAA;;AACpC,aAAK,KAAL,GAAa,IAAb;AACA,aAAK,MAAL,GAAc,KAAd;AACA,aAAK,OAAL,GAAe,MAAf;AACA,aAAK,MAAL,GAAc,KAAd;AACA,aAAK,QAAL,GAAgB,GAAhB;AACH;;;;gCAcO;;AAEJ,mBAAU,KAAK,IAAf,SAAuB,KAAK,KAA5B,kCACU,KAAK,MADf;AAEH;;;mCAEU;AACP,wCAA0B,KAAK,MAAL,GAAc,KAAK,QAApB,GACjB,KAAK,MADb;AAEH;;;4BArBU;AACP,mBAAO,KAAK,KAAZ;AACH;;;4BAEW;AACR,mBAAO,KAAK,MAAZ;AACH;;;4BAEY;AACT,mBAAO,KAAK,OAAZ;AACH","file":"templateStrings.js","sourcesContent":["export class Car {\r\n constructor(make, model, engine, price) {\r\n this._make = make;\r\n this._model = model;\r\n this._engine = engine;\r\n this._price = price;\r\n this._taxRate = .08;\r\n }\r\n\r\n get make() {\r\n return this._make;\r\n }\r\n\r\n get model() {\r\n return this._model;\r\n }\r\n\r\n get engine() {\r\n return this._engine;\r\n }\r\n \r\n start() {\r\n //Use a template string\r\n return `${this.make} ${this.model} with a \r\n ${this.engine} engine is started!`;\r\n }\r\n\r\n getTotal() {\r\n return `Total cost is: ${(this._price * this._taxRate) + \r\n this._price}`;\r\n }\r\n}\r\n\r\n"],"sourceRoot":"/source/"} -------------------------------------------------------------------------------- /Mastering JavaScript/js/compiled/babel/weakmap-weakset.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | //Using WeakSet 4 | var weakset = new WeakSet(); 5 | //No size, entries, or values 6 | //can't use forEach (not enumerable), can't mix types 7 | var person1 = { name: 'Fred' }, 8 | person2 = { name: 'Michelle' }; 9 | 10 | weakset.add(person1); 11 | weakset.add(person2); 12 | 13 | if (weakset.has(person1)) console.log('Found person!'); 14 | weakset.delete(person2); //Delete single item 15 | 16 | //Using WeakMap 17 | var weakmap = new WeakMap(); 18 | //No size, entries, or values 19 | //can't use forEach (not enumerable), key must be an object 20 | var person1 = { name: 'Fred' }, 21 | person2 = { name: 'Michelle' }, 22 | key1 = { key: '123' }, 23 | key2 = { key: '321' }; 24 | 25 | weakmap.set(key1, person1); 26 | weakmap.set(key2, person2); 27 | 28 | var person = weakmap.get(key2); 29 | console.log('Map has person key 321: ' + person.name); 30 | 31 | if (weakmap.has(key1)) console.log('Found person!'); 32 | weakmap.delete(key2); //Delete single item 33 | //# sourceMappingURL=weakmap-weakset.js.map 34 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/compiled/babel/weakmap-weakset.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["weakmap-weakset.js"],"names":[],"mappings":";;;AACA,IAAI,UAAU,IAAI,OAAJ,EAAd;;;AAGA,IAAI,UAAU,EAAE,MAAM,MAAR,EAAd;IACI,UAAU,EAAE,MAAM,UAAR,EADd;;AAGA,QAAQ,GAAR,CAAY,OAAZ;AACA,QAAQ,GAAR,CAAY,OAAZ;;AAEA,IAAI,QAAQ,GAAR,CAAY,OAAZ,CAAJ,EAA0B,QAAQ,GAAR,CAAY,eAAZ;AAC1B,QAAQ,MAAR,CAAe,OAAf,E;;;AAIA,IAAI,UAAU,IAAI,OAAJ,EAAd;;;AAGA,IAAI,UAAU,EAAE,MAAM,MAAR,EAAd;IACI,UAAU,EAAE,MAAM,UAAR,EADd;IAEI,OAAO,EAAC,KAAK,KAAN,EAFX;IAGI,OAAO,EAAC,KAAK,KAAN,EAHX;;AAKA,QAAQ,GAAR,CAAY,IAAZ,EAAkB,OAAlB;AACA,QAAQ,GAAR,CAAY,IAAZ,EAAkB,OAAlB;;AAEA,IAAI,SAAS,QAAQ,GAAR,CAAY,IAAZ,CAAb;AACA,QAAQ,GAAR,CAAY,6BAA6B,OAAO,IAAhD;;AAEA,IAAI,QAAQ,GAAR,CAAY,IAAZ,CAAJ,EAAuB,QAAQ,GAAR,CAAY,eAAZ;AACvB,QAAQ,MAAR,CAAe,IAAf,E","file":"weakmap-weakset.js","sourcesContent":["//Using WeakSet\r\nvar weakset = new WeakSet();\r\n//No size, entries, or values\r\n//can't use forEach (not enumerable), can't mix types\r\nvar person1 = { name: 'Fred' },\r\n person2 = { name: 'Michelle' };\r\n\r\nweakset.add(person1);\r\nweakset.add(person2);\r\n\r\nif (weakset.has(person1)) console.log('Found person!');\r\nweakset.delete(person2); //Delete single item\r\n\r\n\r\n//Using WeakMap\r\nvar weakmap = new WeakMap();\r\n//No size, entries, or values\r\n//can't use forEach (not enumerable), key must be an object\r\nvar person1 = { name: 'Fred' },\r\n person2 = { name: 'Michelle' },\r\n key1 = {key: '123'},\r\n key2 = {key: '321'};\r\n\r\nweakmap.set(key1, person1);\r\nweakmap.set(key2, person2);\r\n\r\nvar person = weakmap.get(key2);\r\nconsole.log('Map has person key 321: ' + person.name);\r\n\r\nif (weakmap.has(key1)) console.log('Found person!');\r\nweakmap.delete(key2); //Delete single item\r\n\r\n"],"sourceRoot":"/source/"} -------------------------------------------------------------------------------- /Mastering JavaScript/js/compiled/typescript/calculator.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | var calc = new Calculator('X', 'Y', 'Output'); 3 | }; 4 | var Calculator = /** @class */ (function () { 5 | function Calculator(xId, yId, outputId) { 6 | this.x = document.getElementById(xId); 7 | this.y = document.getElementById(yId); 8 | this.output = document.getElementById(outputId); 9 | this.wireEvents(); 10 | } 11 | Calculator.prototype.wireEvents = function () { 12 | var _this = this; 13 | document.getElementById('Add').addEventListener('click', function (event) { 14 | _this.output.innerHTML = _this.add(parseInt(_this.x.value), parseInt(_this.y.value)).toString(); 15 | }); 16 | document.getElementById('Subtract').addEventListener('click', function (event) { 17 | _this.output.innerHTML = _this.subtract(parseInt(_this.x.value), parseInt(_this.y.value)).toString(); 18 | }); 19 | }; 20 | Calculator.prototype.add = function (x, y) { 21 | return x + y; 22 | }; 23 | Calculator.prototype.subtract = function (x, y) { 24 | return x - y; 25 | }; 26 | return Calculator; 27 | }()); 28 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/compiled/typescript/calculatorJQuery.js: -------------------------------------------------------------------------------- 1 | /// 2 | $(document).ready(function () { 3 | var calc = new CalculatorjQuery('X', 'Y', 'Output'); 4 | }); 5 | var CalculatorjQuery = /** @class */ (function () { 6 | function CalculatorjQuery(xId, yId, outputId) { 7 | this.x = $('#' + xId); 8 | this.y = $('#' + yId); 9 | this.output = $('#' + outputId); 10 | this.wireEvents(); 11 | } 12 | CalculatorjQuery.prototype.wireEvents = function () { 13 | var _this = this; 14 | $('#Add').click(function (event) { 15 | _this.output.html(_this.add(parseInt(_this.x.val()), parseInt(_this.y.val())).toString()); 16 | }); 17 | $('#Subtract').click(function (event) { 18 | _this.output.html(_this.subtract(parseInt(_this.x.val()), parseInt(_this.y.val())).toString()); 19 | }); 20 | }; 21 | CalculatorjQuery.prototype.add = function (x, y) { 22 | return x + y; 23 | }; 24 | CalculatorjQuery.prototype.subtract = function (x, y) { 25 | return x - y; 26 | }; 27 | return CalculatorjQuery; 28 | }()); 29 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/compiled/typescript/definingClasses.js: -------------------------------------------------------------------------------- 1 | var DefiningClasses; 2 | (function (DefiningClasses) { 3 | var Engine = /** @class */ (function () { 4 | function Engine(horsePower, engineType) { 5 | this.horsePower = horsePower; 6 | this.engineType = engineType; 7 | } 8 | return Engine; 9 | }()); 10 | var Car = /** @class */ (function () { 11 | function Car(engine) { 12 | this.engine = engine; 13 | } 14 | Object.defineProperty(Car.prototype, "engine", { 15 | get: function () { 16 | return this._engine; 17 | }, 18 | set: function (value) { 19 | if (value == undefined) 20 | throw 'Please supply an engine'; 21 | this._engine = value; 22 | }, 23 | enumerable: true, 24 | configurable: true 25 | }); 26 | Car.prototype.start = function () { 27 | alert('Car engine started ' + this._engine.engineType); 28 | }; 29 | return Car; 30 | }()); 31 | window.onload = function () { 32 | var engine = new Engine(300, 'V8'); 33 | var car = new Car(engine); 34 | alert(car.engine.engineType); 35 | car.start(); 36 | }; 37 | })(DefiningClasses || (DefiningClasses = {})); 38 | -------------------------------------------------------------------------------- /Mastering JavaScript/js/libs/traceur-bootstrap.js: -------------------------------------------------------------------------------- 1 | // Copyright 2011 Traceur Authors. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | new traceur.WebPageTranscoder(document.location.href).run(); -------------------------------------------------------------------------------- /Mastering JavaScript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jsdemos", 3 | "version": "1.0.0", 4 | "description": "Used for JavaScript Demos", 5 | "author": "Dan Wahlin", 6 | "scripts": { 7 | "start": "node server.js" 8 | }, 9 | "dependencies": { 10 | "express": "^4.16.4" 11 | }, 12 | "devDependencies": { 13 | "@babel/core": "^7.2.2", 14 | "@babel/preset-env": "^7.2.3", 15 | "gulp": "^4.0.0", 16 | "gulp-babel": "^8.0.0", 17 | "gulp-concat": "^2.6.1", 18 | "gulp-plumber": "^1.2.1", 19 | "gulp-sourcemaps": "^2.6.4", 20 | "gulp-typescript": "^5.0.0", 21 | "gulp-uglify": "^3.0.1", 22 | "typescript": "^3.3.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Mastering JavaScript/readme.txt: -------------------------------------------------------------------------------- 1 | Go to this directory in a command prompt. 2 | 3 | Run "npm install" to install the necessary Node.js modules. 4 | 5 | Run "npm start" to start the server. 6 | 7 | Navigate to http://localhost:8000 in the browser to view the demo page. -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/angularJS/basics.css: -------------------------------------------------------------------------------- 1 | .highlight { font-weight: bold;color: green;} 2 | 3 | [ng-cloak],[data-ng-cloak],.ng-cloak {display:none !important;} 4 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/angularJS/basics.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | AngularJS Hello World Example 5 | 6 | 7 | 8 |

AngularJS Hello World Example

9 |
10 | Name: 11 |
12 | City: 13 |

14 | Name Output: {{vm.customer.name }} 15 |
16 | City Output: {{ vm.customer.city }} 17 |
18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/angularJS/basics.js: -------------------------------------------------------------------------------- 1 | var app = angular.module('customersApp', []); 2 | 3 | app.controller('CustomersController', function () { 4 | 5 | this.customer = { name: 'John', city: 'Dallas' }; 6 | 7 | }); 8 | 9 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/angularJS/table.css: -------------------------------------------------------------------------------- 1 | [ng-cloak], [data-ng-cloak], .ng-cloak { 2 | display: none !important; 3 | } 4 | 5 | table { 6 | width: 300px; 7 | } 8 | 9 | .sale { font-weight: bold;color: green;} 10 | .nosale { color: black;} -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/angularJS/table.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Rendering a Table with AngularJS 5 | 6 | 7 | 8 |

Rendering a Table with AngularJS

9 |

Products

10 |
11 | 12 | 13 | 14 | 15 | 16 |
{{ item.title }}{{ item.price }}
17 |
18 | Total: 19 | {{ vm.total }} 20 |
21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/angularJS/table.js: -------------------------------------------------------------------------------- 1 | var app = angular.module('productsApp', []); 2 | 3 | app.controller('ProductsController', function () { 4 | 5 | var vm = this; 6 | 7 | vm.total = 0; 8 | vm.items = [ 9 | { title: 'Game', price: 59.99, sale: true }, 10 | { title: 'Movie Ticket', price: 9.99, sale: false } 11 | ]; 12 | 13 | function init() { 14 | var total = 0; 15 | for (var i = 0, len = vm.items.length; i < len; i++) { 16 | total += vm.items[i].price; 17 | } 18 | vm.total = total; 19 | } 20 | 21 | init(); 22 | 23 | }); 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/handlebars/basics.css: -------------------------------------------------------------------------------- 1 | .highlight { font-weight: bold;color: green;} 2 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/handlebars/basics.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Handlebars Hello World Example 5 | 6 | 7 | 8 |

Handlebars Hello World Example

9 | 10 |
11 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/handlebars/basics.js: -------------------------------------------------------------------------------- 1 | Handlebars.registerHelper("highlightCity", function (city) { 2 | var highlightedCities = ['Dallas', 'Seattle','Orlando']; 3 | return (highlightedCities.indexOf(city) > -1) ? 'highlight' : ''; 4 | }); 5 | 6 | var data = { name: 'John', city: 'Dallas' }; 7 | 8 | var renderer = function (data) { 9 | var source = document.getElementById('personTemplate').innerHTML; 10 | var template = Handlebars.compile(source); 11 | document.getElementById('container').innerHTML = template(data); 12 | }(data); 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/handlebars/table.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 300px; 3 | } 4 | .sale { font-weight: bold;color: green;} 5 | .nosale { color: black;} -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/handlebars/table.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Rendering a Table with Handlebars 5 | 6 | 7 | 8 |

Rendering a Table with Handlebars

9 |

Products

10 |
11 | 12 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/handlebars/table.js: -------------------------------------------------------------------------------- 1 | Handlebars.registerHelper("getSaleCSSClass", function (sale) { 2 | return (sale) ? 'sale' : 'nosale'; 3 | }); 4 | 5 | var ViewModel = function (items) { 6 | 7 | render = function () { 8 | var total = 0; 9 | for (var i = 0, len = items.length; i < len; i++) { 10 | total += items[i].price; 11 | } 12 | 13 | var data = { total: total, items: items }; 14 | 15 | var source = document.getElementById('tableTemplate').innerHTML; 16 | var template = Handlebars.compile(source); 17 | document.getElementById('container').innerHTML = template(data); 18 | 19 | }; 20 | 21 | return { 22 | render: render 23 | } 24 | }; 25 | 26 | var items = [ 27 | { title: 'Game', price: 59.99, sale: true }, 28 | { title: 'Movie Ticket', price: 9.99, sale: false } 29 | ]; 30 | var vm = new ViewModel(items); 31 | vm.render(); 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/knockoutJS/basics.css: -------------------------------------------------------------------------------- 1 | .highlight { font-weight: bold;color: green;} 2 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/knockoutJS/basics.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Knockout Hello World Example 5 | 6 | 7 | 8 |

Knockout Hello World Example

9 |
10 | Name: 11 |
12 | City: 13 |

14 | Name Output: 15 |
16 | City Output: 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/knockoutJS/basics.js: -------------------------------------------------------------------------------- 1 | var helloWorldViewModel = { 2 | name: ko.observable("Seth"), 3 | city: ko.observable("Chandler") 4 | }; 5 | ko.applyBindings(helloWorldViewModel); -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/knockoutJS/table.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 300px; 3 | } 4 | .sale { font-weight: bold;color: green;} 5 | .nosale { color: black;} -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/knockoutJS/table.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Rendering a Table with KnockoutJS 5 | 6 | 7 | 8 |

Rendering a Table with KnockoutJS

9 |

Products

10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | Total: 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/knockoutJS/table.js: -------------------------------------------------------------------------------- 1 | var ProductsViewModel = function (items) { 2 | var vm = this; 3 | vm.items = ko.observableArray(items); 4 | vm.total = ko.observable(); 5 | 6 | vm.getSaleClass = function (sale) { 7 | return (sale) ? 'sale' : 'nosale'; 8 | } 9 | 10 | vm.init = function () { 11 | //Update total property 12 | var total = 0; 13 | for (var i = 0, len=vm.items().length; i < len; i++) { 14 | total += vm.items()[i].price; 15 | } 16 | vm.total(total); 17 | } 18 | }; 19 | 20 | var items = [ 21 | { title: 'Game', price: 59.99, sale: true }, 22 | { title: 'Movie Ticket', price: 9.99, sale: false } 23 | ]; 24 | var viewModel = new ProductsViewModel(items); 25 | viewModel.init(); 26 | ko.applyBindings(viewModel); 27 | 28 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/manipulatingTheDOM.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Manipulating the DOM with JavaScript 5 | 8 | 9 | 10 |

Manipulating the DOM with JavaScript

11 |

Purchases

12 |
13 |
14 | Total: 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/dataBindingAndTemplates/manipulatingTheDOM.js: -------------------------------------------------------------------------------- 1 | var items = [ 2 | { title: 'Game', price: 59.99 }, 3 | { title: 'Movie Ticket', price: 9.99 } 4 | ]; 5 | var total = 0, html = ''; 6 | for (var i = 0, len=items.length; i < len; i++) { 7 | var item = items[i]; 8 | html += '' + 9 | ''; 10 | total += item.price; 11 | } 12 | html += '
' + item.title + '' + item.price + '
'; 13 | 14 | document.getElementById('purchases').innerHTML = html; 15 | document.getElementById('total').innerHTML = total; 16 | 17 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/Working with ES2015 Modules/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /jspm_packages -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/Working with ES2015 Modules/config.js: -------------------------------------------------------------------------------- 1 | System.config({ 2 | "baseURL": "/dist", 3 | "transpiler": "babel", 4 | "babelOptions": { 5 | "optional": [ 6 | "runtime" 7 | ] 8 | }, 9 | "paths": { 10 | "*": "*.js" 11 | }, 12 | "defaultJSExtensions": true 13 | }); -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/Working with ES2015 Modules/dist/auto.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 8 | 9 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 10 | 11 | var Auto = (function () { 12 | function Auto(data) { 13 | _classCallCheck(this, Auto); 14 | 15 | this.make = data.make; 16 | this.model = data.model; 17 | this.year = data.year; 18 | this.price = data.price; 19 | } 20 | 21 | _createClass(Auto, [{ 22 | key: "getTotal", 23 | value: function getTotal(taxRate) { 24 | return this.price + this.price * taxRate; 25 | } 26 | }, { 27 | key: "getDetails", 28 | value: function getDetails() { 29 | return this.year + " " + this.make + " " + this.model; 30 | } 31 | }]); 32 | 33 | return Auto; 34 | })(); 35 | 36 | exports.Auto = Auto; -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/Working with ES2015 Modules/dist/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _car = require('car'); 4 | 5 | var _truck = require('truck'); 6 | 7 | var car = new _car.Car({ 8 | price: 30000, make: 'Chevy', model: 'Malibu', 9 | year: 2014, isElectric: false, isHatchback: false 10 | }); 11 | 12 | var truck = new _truck.Truck({ 13 | price: 40000, make: 'Ford', model: 'F150', 14 | year: 2014, is4by4: true 15 | }); 16 | 17 | var output = document.getElementById('output'); 18 | output.innerHTML += '\n\t
' + car.getDetails() + '\n
Car total: ' + car.getTotal(.08) + '\n\t

\n\t' + truck.getDetails() + '\n\t
Truck total: ' + truck.getTotal(.08) + '\n\t'; -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/Working with ES2015 Modules/gulpfile.js: -------------------------------------------------------------------------------- 1 | var babel = require('gulp-babel'); 2 | var browserSync = require('browser-sync'); 3 | var gulp = require('gulp'); 4 | var es6Path = 'js/*.js'; 5 | var compilePath = 'dist'; 6 | var superstatic = require( 'superstatic' ); 7 | 8 | gulp.task('babel', function () { 9 | gulp.src([es6Path]) 10 | .pipe(babel()) 11 | .pipe(gulp.dest(compilePath)); 12 | }); 13 | 14 | gulp.task('watch', function() { 15 | gulp.watch(es6Path, ['babel']); 16 | }); 17 | 18 | gulp.task('serve', ['watch'], function() { 19 | process.stdout.write('Starting browserSync and superstatic...\n'); 20 | browserSync({ 21 | port: 3000, 22 | files: ['index.html', '**/*.js'], 23 | injectChanges: true, 24 | logFileChanges: false, 25 | logLevel: 'silent', 26 | logPrefix: 'es6-modules-starter', 27 | notify: true, 28 | reloadDelay: 0, 29 | server: { 30 | baseDir: '.', 31 | middleware: superstatic({ debug: false}) 32 | } 33 | }); 34 | }); 35 | 36 | gulp.task('default', ['babel', 'watch']); 37 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/Working with ES2015 Modules/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ES6 JavaScript with Modules Using System.js 5 | 6 | 7 |

Automobiles

8 | 9 |
10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/Working with ES2015 Modules/js/auto.js: -------------------------------------------------------------------------------- 1 | export class Auto { 2 | constructor(data) { 3 | this.make = data.make; 4 | this.model = data.model; 5 | this.year = data.year; 6 | this.price = data.price; 7 | } 8 | 9 | getTotal(taxRate) { 10 | return this.price + (this.price * taxRate); 11 | } 12 | 13 | getDetails() { 14 | return `${this.year} ${this.make} ${this.model}`; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/Working with ES2015 Modules/js/car.js: -------------------------------------------------------------------------------- 1 | import {Auto} from 'auto'; 2 | 3 | export class Car extends Auto { 4 | constructor(data) { 5 | super(data); 6 | this.isElectric = data.isElectric; 7 | this.isHatchback = data.isHatchback; 8 | } 9 | 10 | getDetails() { 11 | return `${super.getDetails()} Electric: ${this.isElectric} Hatchback: ${this.isHatchback}`; 12 | } 13 | } -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/Working with ES2015 Modules/js/main.js: -------------------------------------------------------------------------------- 1 | import {Car} from 'car'; 2 | import {Truck} from 'truck'; 3 | 4 | let car = new Car({ 5 | price: 30000, make: 'Chevy', model: 'Malibu', 6 | year: 2014, isElectric: false, isHatchback: false 7 | }); 8 | 9 | let truck = new Truck({ 10 | price: 40000, make: 'Ford', model: 'F150', 11 | year: 2014, is4by4: true 12 | }); 13 | 14 | var output = document.getElementById('output'); 15 | output.innerHTML += ` 16 |
${car.getDetails() } 17 |
Car total: ${car.getTotal(.08) } 18 |

19 | ${truck.getDetails() } 20 |
Truck total: ${truck.getTotal(.08) } 21 | `; 22 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/Working with ES2015 Modules/js/truck.js: -------------------------------------------------------------------------------- 1 | import {Auto} from 'auto'; 2 | 3 | export class Truck extends Auto { 4 | constructor(data) { 5 | super(data); 6 | this.is4by4 = data.is4by4; 7 | } 8 | 9 | getDetails() { 10 | return `${super.getDetails()} 4x4: ${this.is4by4}`; 11 | } 12 | } -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/Working with ES2015 Modules/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES6" 4 | } 5 | } -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/Working with ES2015 Modules/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ES6", 3 | "version": "1.0.0", 4 | "description": "ES6 SystemJS and Modules", 5 | "contributors": [ 6 | { 7 | "name": "John Papa" 8 | }, 9 | { 10 | "name": "Dan Wahlin" 11 | } 12 | ], 13 | "scripts": { 14 | "start": "gulp serve", 15 | "postinstall": "" 16 | }, 17 | "dependencies": { 18 | "systemjs": "^0.18.4" 19 | }, 20 | "devDependencies": { 21 | "browser-sync": "^2.8.2", 22 | "gulp": "^3.8.8", 23 | "gulp-babel": "^5.1.0", 24 | "superstatic": "^1.2.3" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/arrowFunctions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Arrow Functions 5 | 6 | 7 |

Arrow Functions

8 | Press ctrl/cmd-shift-i and view the debugging console for output. 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/arrowFunctions.js: -------------------------------------------------------------------------------- 1 | var myLogger = msg => console.log(msg); //Creates an anonymous function 2 | 3 | myLogger('Testing out arrow functions!'); 4 | 5 | //Working with "this" the "old" way 6 | function Car() { 7 | var self = this; 8 | this._seats = 4; 9 | 10 | this.timeout = function() { 11 | setTimeout(function() { 12 | console.log(self._seats++); 13 | }, 1000); 14 | } 15 | } 16 | 17 | //Working with this using arrow functions 18 | class CarWithArrow { 19 | 20 | constructor() { 21 | this._seats = 6; 22 | } 23 | 24 | timeout() { 25 | setTimeout(() => { 26 | console.log(this._seats++); 27 | }, 1000); 28 | } 29 | } 30 | 31 | var c = new Car(); 32 | c.timeout(); 33 | var cArrow = new CarWithArrow(); 34 | cArrow.timeout(); -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/classes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Classes and Inheritance 5 | 6 | 7 |

Classes and Inheritance

8 | Press ctrl/cmd-shift-i and view the debugging console for output. 9 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/classes.js: -------------------------------------------------------------------------------- 1 | class BaseLog { 2 | constructor() { 3 | this.logName = 'Log1'; 4 | } 5 | 6 | log(msg) { 7 | console.log(this.logName + ': ' + msg); 8 | } 9 | } 10 | 11 | class Logger extends BaseLog { 12 | 13 | constructor(logName) { 14 | super(logName); 15 | } 16 | 17 | writeLine(msg) { 18 | super.log(msg + '\r\n'); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/destructuring.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Destructuring 5 | 6 | 7 |

Destructuring

8 | Press ctrl/cmd-shift-i and view the debugging console for output. 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/destructuring.js: -------------------------------------------------------------------------------- 1 | //Old Way 2 | var values = [9.99, .50]; 3 | var oldTotal = values[0], 4 | oldTax = values[1]; 5 | 6 | //New Way (Destructuring) 7 | var [total, tax] = [9.99, .50]; 8 | var {total2, tax2} = {total:9.99, tax:.50}; 9 | 10 | console.log('Destructuring an array.'); 11 | console.log('Total: ' + total + ' Tax: ' + tax); 12 | 13 | console.log('\nDestructuring an object literal.'); 14 | console.log('Total2: ' + total2 + ' Tax2: ' + tax2); 15 | 16 | var colors = ['red', 'yellow', 'green'], 17 | redOld = colors[0], 18 | yellowOld = colors[1], 19 | greenOld = colors[2]; 20 | 21 | var [red, yellow, green] = ['red', 'yellow', 'green']; 22 | console.log(`Destructuring colors: ${red} ${yellow} ${green}`); 23 | 24 | var [red2, , green2] = ['red', 'yellow', 'green']; 25 | console.log(`Destructuring with an ignore: ${red2} ${green2}`); 26 | 27 | console.log('\n'); 28 | //Iteration and destructuring 29 | var pets = [ 30 | { 31 | name: "Fido", 32 | type: 'Dog', 33 | treats: { 34 | treat1: "Chewie", 35 | treat2: "Chicken" 36 | }, 37 | age: 10 38 | }, 39 | { 40 | name: "Maestro", 41 | type: 'Dog', 42 | treats: { 43 | treat1: "Chew Stick", 44 | treat2: "Turkey Chew" 45 | }, 46 | age: 5 47 | } 48 | ]; 49 | 50 | //Here's the destructuring breakdown: 51 | //name maps to an n variable 52 | //type maps to a t variables 53 | //treats maps treat 1 to t1 and treat2 to t2 54 | for (var {name: n, type: t, treats: { treat1: t1, treat2: t2 } } of pets) { 55 | console.log(`${n} is a ${t} who likes ${t1} and ${t2} treats`); 56 | } -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/loggerLoader.js: -------------------------------------------------------------------------------- 1 | var logger = new Logger('MyLog'); 2 | logger.writeLine('Logging via ES6 classes!'); -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/maps.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Using Maps 5 | 6 | 7 |

Using Maps

8 | Press ctrl/cmd-shift-i and view the debugging console for output. 9 |

10 | Maps provide a way to store a collection of unique key/value pairs. 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/modules-classes.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Modules and Classes 5 | 11 | 12 | 13 |

Modules and Classes

14 |

Car output

15 |
16 | 17 | 18 | 19 | 22 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/modules-classes.js: -------------------------------------------------------------------------------- 1 | class Auto { 2 | constructor(make, model, engine) { 3 | this._make = make; 4 | this._model = model; 5 | this._engine = engine; 6 | } 7 | 8 | get make() { 9 | return this._make; 10 | } 11 | 12 | set make(val) { 13 | this._make = val; 14 | } 15 | 16 | get model() { 17 | return this._model; 18 | } 19 | 20 | set model(val) { 21 | this._model = val; 22 | } 23 | 24 | get engine() { 25 | return this._engine; 26 | } 27 | 28 | set engine(val) { 29 | this._engine = val; 30 | } 31 | } 32 | 33 | export class Car extends Auto { 34 | 35 | constructor(make, model, engine, isElectric) { 36 | super(make, model, engine); 37 | this._isElectric = isElectric; 38 | } 39 | 40 | get isElectric() { 41 | return this._isElectric; 42 | } 43 | 44 | start() { 45 | //Use a template string 46 | if (this._isElectric) { 47 | return this.make + ' ' + this.model + ' with a ' + this.engine + ' (electric) engine is started!'; 48 | } 49 | return this.make + ' ' + this.model + ' with a ' + this.engine + ' engine is started!'; 50 | } 51 | } -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/parameters.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ES6 Parameters 5 | 6 | 7 |

ES6 Parameters

8 | Press ctrl/cmd-shift-i and view the debugging console for output. 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/parameters.js: -------------------------------------------------------------------------------- 1 | class Car { 2 | 3 | currentYear() { 4 | return new Date().getFullYear(); 5 | } 6 | 7 | //The year parameter is a "default parameter" 8 | setDetails(make = 'No Make', model = 'No Model', year = this.currentYear(), ...accessories) { 9 | console.log(make + ' ' + model + ' ' + year); 10 | if (accessories) { 11 | for (var i = 0; i < accessories.length; i++) { 12 | console.log('\n' + accessories[i]); 13 | } 14 | } 15 | } 16 | 17 | } 18 | 19 | 20 | var car = new Car(); 21 | //Testing default parameters 22 | car.setDetails('Toyota', 'Tundra'); 23 | car.setDetails(); 24 | 25 | //Testing rest parameters 26 | car.setDetails('Toyota', 'Tundra', 2015, 'sunroof', '4X4', '4-door'); 27 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/scopeAndLet.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Scope and Let 5 | 6 | 7 |

Scope and Let

8 | Press ctrl/cmd-shift-i and view the debugging console for output. 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/scopeAndLet.js: -------------------------------------------------------------------------------- 1 | var age = 55; 2 | 3 | for (let i = 0; i < 5; i++) { 4 | age += 5; 5 | } 6 | 7 | try { 8 | console.log(i); 9 | } catch (e) { 10 | console.log('i is out of scope due to using let!'); 11 | } -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/sets.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Using Sets 5 | 6 | 7 |

Using Sets

8 | Press ctrl/cmd-shift-i and view the debugging console for output. 9 |

10 | Sets provide a way to store a set of items that are all unique. 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/templateStrings.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Template Strings 5 | 11 | 12 | 13 |

Template Strings

14 |

Car output

15 |
16 | 17 | 18 | 19 | 22 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/templateStrings.js: -------------------------------------------------------------------------------- 1 | export class Car { 2 | constructor(make, model, engine, price) { 3 | this._make = make; 4 | this._model = model; 5 | this._engine = engine; 6 | this._price = price; 7 | this._taxRate = .08; 8 | } 9 | 10 | get make() { 11 | return this._make; 12 | } 13 | 14 | get model() { 15 | return this._model; 16 | } 17 | 18 | get engine() { 19 | return this._engine; 20 | } 21 | 22 | start() { 23 | //Use a template string 24 | return `${this.make} ${this.model} with a 25 | ${this.engine} engine is started!`; 26 | } 27 | 28 | getTotal() { 29 | return `Total cost is: ${(this._price * this._taxRate) + 30 | this._price}`; 31 | } 32 | } 33 | 34 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/traceurCompileOnTheFly.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Dynamic ES6 Code Compilation in the Browser with Traceur 5 | 6 | 7 |

Dynamic ES6 Code Compilation in the Browser with Traceur

8 |

Output from Logger Class:

9 |
10 | 11 | 12 | 13 | 16 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/weakmap-weakset.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WeakMap and WeakSet 5 | 6 | 7 |

WeakMap and WeakSet

8 | Press ctrl/cmd-shift-i and view the debugging console for output. 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/es2015/weakmap-weakset.js: -------------------------------------------------------------------------------- 1 | //Using WeakSet 2 | var weakset = new WeakSet(); 3 | //No size, entries, or values 4 | //can't use forEach (not enumerable), can't mix types 5 | var person1 = { name: 'Fred' }, 6 | person2 = { name: 'Michelle' }; 7 | 8 | weakset.add(person1); 9 | weakset.add(person2); 10 | 11 | if (weakset.has(person1)) console.log('Found person!'); 12 | weakset.delete(person2); //Delete single item 13 | 14 | 15 | //Using WeakMap 16 | var weakmap = new WeakMap(); 17 | //No size, entries, or values 18 | //can't use forEach (not enumerable), key must be an object 19 | var person1 = { name: 'Fred' }, 20 | person2 = { name: 'Michelle' }, 21 | key1 = {key: '123'}, 22 | key2 = {key: '321'}; 23 | 24 | weakmap.set(key1, person1); 25 | weakmap.set(key2, person2); 26 | 27 | var person = weakmap.get(key2); 28 | console.log('Map has person key 321: ' + person.name); 29 | 30 | if (weakmap.has(key1)) console.log('Found person!'); 31 | weakmap.delete(key2); //Delete single item 32 | 33 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/arrayFunctions.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Using Array Functions 5 | 11 | 12 | 13 |

Using Array Functions

14 | View the results in the debugging console (ctrl/cmd+shift+i) 15 |

16 | This example demonstrates how various array functions can be used. 17 |

18 |

Array Functions Output:

19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/bind-calculator.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Using Bind 5 | 8 | 9 | 10 |

Using Bind

11 | View the results in the debugging console (ctrl/cmd+shift+i) 12 |

13 | This example demonstrates how bind() can be used to set the 14 | context of "this" when a function is called. 15 |

16 | Value 1: 17 |
18 | Value 2: 19 |

20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/bind-calculator.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var Calculator = function () { 3 | this.value1 = 0; 4 | this.value2 = 0; 5 | this.output = ''; 6 | }; 7 | 8 | Calculator.prototype.init = function () { 9 | var buttons = document.getElementsByTagName('button'); 10 | for (var i = 0, len = buttons.length; i < len; i++) { 11 | //Ensure that button represents Calculator 12 | buttons[i].addEventListener('click', this.checkOperator.bind(this)); 13 | } 14 | this.value1 = document.getElementById('value1'); 15 | this.value2 = document.getElementById('value2'); 16 | this.output = document.getElementById('output'); 17 | }; 18 | 19 | Calculator.prototype.checkOperator = function (e) { 20 | //"this" will normally be the button that triggered the event 21 | //Because bind was used "this" represents the Calculator object though 22 | this.calculate(e.target.innerHTML); 23 | }; 24 | 25 | Calculator.prototype.calculate = function (operator) { 26 | var val1 = parseInt(this.value1.value), 27 | val2 = parseInt(this.value2.value); 28 | switch (operator) { 29 | case '+': 30 | this.updateUI(val1 + val2); 31 | break; 32 | case '-': 33 | this.updateUI(val1 - val2); 34 | break; 35 | case '*': 36 | this.updateUI(val1 * val2); 37 | break; 38 | case '/': 39 | if (val2 == 0) return; 40 | this.updateUI(val1 / val2); 41 | break; 42 | } 43 | }; 44 | 45 | Calculator.prototype.updateUI = function (total) { 46 | this.output.innerHTML = total; 47 | }; 48 | 49 | var calculator = new Calculator(); 50 | calculator.init(); -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/call-apply.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Using call() and apply() 5 | 11 | 12 | 13 |

Using call() and apply()

14 | View the results in the debugging console (ctrl/cmd+shift+i) 15 |

16 | This example demonstrates how to get started using the call() and apply() methods to 17 | change the context of "this". 18 |

19 |

TauntMachine Output:

20 |
21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/call-apply.js: -------------------------------------------------------------------------------- 1 | var giants = { 2 | name: 'New York Giants', 3 | play: function () { 4 | log('We are the ' + this.name); 5 | } 6 | } 7 | 8 | var packers = Object.create(giants); 9 | packers.name = 'Green Bay Packers'; 10 | 11 | console.clear(); 12 | console.log('Calling giants.play'); 13 | giants.play() //"this" is giants 14 | 15 | console.log('Calling packers.play'); 16 | packers.play() //"this" is packers 17 | 18 | 19 | //Using call(), apply(), and bind() 20 | 21 | var cardinals = { 22 | name: 'Arizona Cardinals', 23 | message: 'Smash!' 24 | }; 25 | 26 | var seahawks = { 27 | name: 'Seattle Seahawks', 28 | message: 'Crush!' 29 | } 30 | 31 | var TauntMachine = function () { 32 | this.taunt = function (foe) { 33 | var msg = 'We will ' + this.message + ' the ' + foe.name + 34 | ', we are the ' + this.name; 35 | log(msg); 36 | }; 37 | }; 38 | 39 | var tauntMachine = new TauntMachine(); 40 | console.log('What is wrong here?'); 41 | tauntMachine.taunt(seahawks, cardinals.message); 42 | 43 | console.log('\nUsing call() to set "cardinals" as "this" and pass '+ 44 | 'the seahawks object to taunt()'); 45 | 46 | tauntMachine.taunt.call(cardinals, seahawks); 47 | 48 | console.log('\nUsing apply() to set "seahawks" as "this" and pass ' + 49 | 'the cardinals object to taunt()'); 50 | tauntMachine.taunt.apply(seahawks, [cardinals]); 51 | 52 | console.log('\nBinding cardinals to tauntMachine.taunt using bind()'); 53 | 54 | var cardinalsTaunt = tauntMachine.taunt.bind(cardinals); 55 | cardinalsTaunt(seahawks); 56 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/call-tableHelper.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Using call() 5 | 6 | 7 | 8 |

Using call()

9 | View the results in the debugging console (ctrl/cmd+shift+i) 10 |

11 | This example demonstrates how the call() function can be used. 12 |

13 |
14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/capturingThis-tableHelper.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Using call() 5 | 6 | 7 | 8 |

Using call()

9 | View the results in the debugging console (ctrl/cmd+shift+i) 10 |

11 | This example demonstrates how to capture "this" to use in functions. 12 |

13 |
14 | 15 | 16 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/customers.txt: -------------------------------------------------------------------------------- 1 | [ 2 | { "firstName": "Jane", "lastName": "Doe", "city": "Phoenix" }, 3 | { "firstName": "John", "lastName": "Doe", "city": "Phoenix" }, 4 | { "firstName": "Michelle", "lastName": "Thompson", "city": "Seattle" }, 5 | { "firstName": "Jose", "lastName": "Rodriguez", "city": "California" }, 6 | { "firstName": "Tina", "lastName": "Smith", "city": "New York City" } 7 | ] -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/iife.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Immediately Invoked Function Expression (IIFE) 5 | 6 | 7 |

Immediately Invoked Function Expression (IIFE)

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 |

10 | This example demonstrates how to use the Immediately Invoked Function Expression (IIFE) technique. 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/iife.js: -------------------------------------------------------------------------------- 1 | var customersService = function () { 2 | 3 | this.showMessage = function () { 4 | alert('Hello from an IIFE'); 5 | }; 6 | 7 | return this; 8 | 9 | }(); 10 | 11 | customersService.showMessage(); 12 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/promises-callbacks.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Promises vs. Callbacks 5 | 6 | 7 | 8 |

Promises vs. Callbacks

9 | View the results in the debugging console (ctrl/cmd+shift+i) 10 |

11 | This example demonstrates how callbacks and promises can be used to handle asynchronous operations. 12 |

13 |

Getting Data via a Callback

14 |
15 |

16 |

Getting Data via a Promise

17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/promises-callbacks.js: -------------------------------------------------------------------------------- 1 | var customersService = function ($) { 2 | 3 | //Return a promise 4 | this.getCustomersWithPromise = function () { 5 | return $.getJSON('customers.txt'); 6 | }; 7 | 8 | //Handle the callback 9 | this.getCustomersWithCallback = function (callback) { 10 | $.getJSON('customers.txt').then(function (data) { 11 | callback(data); 12 | }); 13 | }; 14 | 15 | return this; 16 | 17 | }(jQuery); //IIFE 18 | 19 | //Get data via a callback 20 | customersService.getCustomersWithCallback(function (data) { 21 | //Promise resolved (no easy way to deal with an error though) 22 | var table = new TableHelper({ 23 | data: data, 24 | containerId: 'tableContainerCallback' 25 | }); 26 | table.render(); 27 | }); 28 | 29 | //Get data via a promise 30 | customersService.getCustomersWithPromise() 31 | .then(function (data) { 32 | //Promise resolved 33 | var table = new TableHelper({ 34 | data: data, 35 | containerId: 'tableContainerPromise' 36 | }); 37 | table.render(); 38 | }, function (xhr, status, err) { //Handle error easily 39 | alert(err.message); 40 | }); 41 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/promisesAndQ.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Promises vs. Callbacks 5 | 6 | 7 | 8 |

Promises vs. Callbacks

9 | View the results in the debugging console (ctrl/cmd+shift+i) 10 |

11 | This example demonstrates how promises can be created and resolved using the Q library. 12 |

13 |

Getting Data via a Q Promise

14 |
Loading Data...
15 | 16 | 17 | 18 | 19 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/promisesAndQ.js: -------------------------------------------------------------------------------- 1 | var customersService = function () { 2 | 3 | var data = [ 4 | { "firstName": "Jane", "lastName": "Doe", "city": "Phoenix" }, 5 | { "firstName": "John", "lastName": "Doe", "city": "Phoenix" }, 6 | { "firstName": "Michelle", "lastName": "Thompson", "city": "Seattle" }, 7 | { "firstName": "Jose", "lastName": "Rodriguez", "city": "California" }, 8 | { "firstName": "Tina", "lastName": "Smith", "city": "New York City" } 9 | ]; 10 | 11 | //Create a deferred object and return a promise. Once data is available resolve the promise 12 | this.getCustomers = function () { 13 | 14 | var deferred = Q.defer(); //Create deferred object 15 | 16 | //Simulate delay 17 | window.setTimeout(function () { 18 | deferred.resolve(data); //Resolve the promise 19 | }, 2000); 20 | 21 | return deferred.promise; //Return the promise 22 | }; 23 | 24 | return this; 25 | 26 | }(); //IIFE 27 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/functionTechniques/tableStyles.css: -------------------------------------------------------------------------------- 1 | table { width: 400px;} 2 | th { text-align:left;} 3 | tbody > tr:nth-child(odd) { background: #efefef; } 4 | .rowCount { margin-top: 10px; } -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsCanvasDemos/Images/drawImageAPI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DanWahlin/MasteringJavaScriptCourseCode/f1943ad51260d83f8cec70367fd321bf277fdc52/Mastering JavaScript/samples/jsCanvasDemos/Images/drawImageAPI.png -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsCanvasDemos/Images/super-mario-bros-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DanWahlin/MasteringJavaScriptCourseCode/f1943ad51260d83f8cec70367fd321bf277fdc52/Mastering JavaScript/samples/jsCanvasDemos/Images/super-mario-bros-3.png -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsCanvasDemos/web.config: -------------------------------------------------------------------------------- 1 |  2 | 3 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsDOM/domManipulation.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | DOM Manipulation 5 | 6 | 7 |

DOM Manipulation

8 |

Click Me

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsDOM/domManipulation.js: -------------------------------------------------------------------------------- 1 | var container = document.getElementById('container'); 2 | container.addEventListener('click', function () { 3 | this.innerHTML = 'Clicked Me!!!'; 4 | }); 5 | 6 | 7 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsDOM/events.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Handling Events 5 | 6 | 7 |

Handling Events

8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsDOM/events.js: -------------------------------------------------------------------------------- 1 | function addNumbers() { 2 | var x = parseInt(document.getElementById("x").value); 3 | var y = parseInt(document.getElementById("y").value); 4 | alert(x + y); 5 | } 6 | 7 | var submit2 = document.getElementById('submit2'); 8 | submit2.addEventListener('click', addNumbers); 9 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsDOM/manipulatingCSS.css: -------------------------------------------------------------------------------- 1 | .block { 2 | background-color: yellow; 3 | } 4 | 5 | .hover { 6 | cursor: pointer; 7 | } 8 | 9 | 10 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsDOM/manipulatingCSS.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Manipulating CSS 5 | 6 | 7 | 8 |

Manipulating CSS

9 |

Click Me to Change CSS Styles

10 |

Click Me to Change CSS Class

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsDOM/manipulatingCSS.js: -------------------------------------------------------------------------------- 1 | var container = document.getElementById('container'), 2 | container2 = document.getElementById('container2'); 3 | 4 | container.addEventListener('click', function () { 5 | this.style.backgroundColor = 'navy'; 6 | this.style.color = 'white'; 7 | }); 8 | 9 | container2.addEventListener('click', function (e) { 10 | if (this.className.indexOf('block') > -1) { 11 | this.className = this.className.replace(/(?:^|\s)block(?!\S)/g, ''); 12 | this.innerHTML = "Click Me to Change CSS Class"; 13 | } 14 | else { 15 | //Preserve any existing classes 16 | this.className += ' block'; 17 | this.innerHTML = "Click Me Again to Change Back!"; 18 | } 19 | }); 20 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsGeolocation/geolocationDemo.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Geolocation Demo 5 | 6 | 7 | Longitude: 8 |
9 | Latitude: 10 |
11 | Altitude: 12 |
13 | Speed 14 |
15 | Accuracy (in meters): 16 |

17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsGeolocation/geolocationDemo.js: -------------------------------------------------------------------------------- 1 | function geolocate() { 2 | if (navigator.geolocation) { 3 | navigator.geolocation.getCurrentPosition(getCurrentPositionCallback, errorCallback, 4 | {maximumAge:60000}); 5 | } 6 | else { 7 | alert('Your browser doesn\'t support geolocation'); 8 | } 9 | } 10 | 11 | function errorCallback(error) { 12 | switch (error.code) { 13 | case error.PERMISSION_DENIED: alert("User did not share geolocation info"); 14 | break; 15 | 16 | case error.POSITION_UNAVAILABLE: alert("Could not detect current position"); 17 | break; 18 | 19 | case error.TIMEOUT: alert("Timed out"); 20 | break; 21 | 22 | default: alert(error.message); 23 | break; 24 | } 25 | } 26 | 27 | function getCurrentPositionCallback(position) { 28 | var coords = position.coords; 29 | updatePosition('long', coords.longitude); 30 | updatePosition('lat', coords.latitude); 31 | updatePosition('altitude', coords.altitude); 32 | updatePosition('speed', coords.speed); 33 | updatePosition('accuracy', coords.accuracy); 34 | } 35 | 36 | function updatePosition(id, val) { 37 | document.getElementById(id).innerHTML = val; 38 | } -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsGeolocation/geolocationWithMap.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Geolocation Demo 5 | 6 | 7 | Longitude: 8 |
9 | Latitude: 10 |
11 | Altitude: 12 |
13 | Speed 14 |
15 | Accuracy (in meters): 16 |

17 | 18 |

19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsGeolocation/simpleGeolocation.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Geolocation Demo 6 | 7 | 8 | Longitude: 9 |
10 | Latitude: 11 |

12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsGeolocation/simpleGeolocation.js: -------------------------------------------------------------------------------- 1 | function geolocate() { 2 | if (navigator.geolocation) { 3 | navigator.geolocation.getCurrentPosition(getCurrentPositionCallback); 4 | } 5 | else { 6 | alert('Your browser doesn\'t support geolocation'); 7 | } 8 | } 9 | 10 | function getCurrentPositionCallback(position) { 11 | document.getElementById('long').innerHTML = position.coords.longitude; 12 | document.getElementById('lat').innerHTML = position.coords.latitude; 13 | } -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsLocalStorage/Images/chalkboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DanWahlin/MasteringJavaScriptCourseCode/f1943ad51260d83f8cec70367fd321bf277fdc52/Mastering JavaScript/samples/jsLocalStorage/Images/chalkboard.jpg -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/constructors.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | JavaScript Constructors 5 | 6 | 7 |

JavaScript Contructors

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 |

10 | This example demonstrates how functions can be used 11 | as "constructors" by using the "new" keyword. 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/constructors.js: -------------------------------------------------------------------------------- 1 | //Constructor 2 | function Customer(firstName, lastName, city) { 3 | this.firstName = firstName; 4 | this.lastName = lastName; 5 | this.city = city; 6 | } 7 | 8 | //Using the constructor to create an object instance 9 | var john = new Customer('John', 'Doe', 'Seattle'); 10 | 11 | console.log('Invoked Customer constructor and passed (\'John\', \'Doe\', \'Seattle\')'); 12 | console.log('john is instanceof Customer: ' + (john instanceof Customer)); //true 13 | console.log(john); 14 | 15 | var michelle = new Customer('Michelle', 'Seattle'); 16 | 17 | console.log('Invoked Customer constructor and passed ' + 18 | '(\'michelle\',\'Seattle\') - anything wrong?'); 19 | console.log(michelle); 20 | 21 | //Constructor (passing object literal) 22 | function Customer2(info) { 23 | this.firstName = info.firstName; 24 | this.lastName = info.lastName; 25 | this.city = info.city; 26 | } 27 | 28 | //Using the constructor to create an object instance 29 | var tina = new Customer2({ firstName: 'Tina', lastName: 'Doe', city: 'Seattle' }); 30 | 31 | console.log('\nInvoked Customer2 constructor and passed ' + 32 | '({firstName:\'Tina\', lastName:\'Doe\', city:\'Seattle\'})'); 33 | console.log(tina); 34 | 35 | //Skipping some values 36 | var steve = new Customer2({ firstName: 'Steve', city: 'Seattle' }); 37 | console.log('\nInvoked Customer2 constructor and passed ' + 38 | '{ firstName: \'Steve\', city: \'Seattle\' }'); 39 | console.log(steve); 40 | 41 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/constructorsAndInstanceOf.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Constructors with instanceof 5 | 6 | 7 |

Constructors with instanceof

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 |

10 | This example demonstrates how constructors that are called as 11 | regular functions can pollute the global scope (add global 12 | variables on to the window object) and how to fix that with an 13 | instanceof check. 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/constructorsAndInstanceOf.js: -------------------------------------------------------------------------------- 1 | //Normal Constructor 2 | function Customer(name) { 3 | this.name = name; 4 | } 5 | 6 | //Using the constructor to create an object instance 7 | Customer('John'); 8 | 9 | console.log('Calling Customer as function so "this" will be window.'); 10 | console.log('window.name: ' + window.name); 11 | 12 | //Constructor that requires "new" 13 | function Person(name) { 14 | //Check if "this" is an InstanceOfCustomer object 15 | if (!(this instanceof Person)) { 16 | return new Person(name); 17 | } 18 | //"this" will be a Person now 19 | this.fullname = name; 20 | } 21 | 22 | Person('John'); 23 | 24 | console.log('\n'); 25 | console.log('Calling Person that has an instanceof check so "this" will be Person object'); 26 | console.log('window.fullname: ' + window.fullname); 27 | 28 | 29 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/factories.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | JavaScript Factories 5 | 6 | 7 |

JavaScript Factories

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 |

10 | This example demonstrates how to create a factory that can be 11 | used to create other objects. The target object can't be instantiated 12 | directly and the developer must go through the factory method. 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/factories.js: -------------------------------------------------------------------------------- 1 | //Note that caller won't be acessible when using 'use strict' 2 | var person = function () { 3 | if (person.caller != personFactory.create) { 4 | throw new Error('There is no public constructor for person.'); 5 | } 6 | }; 7 | 8 | person.base = { 9 | firstName: '', 10 | lastName: '', 11 | type: 'Customer', 12 | getFullName: function () { 13 | return this.firstName + ' ' + this.lastName; 14 | } 15 | }; 16 | 17 | var personFactory = { 18 | create: function (type, firstName, lastName) { 19 | var per = Object.create(person.base); 20 | per.firstName = firstName; 21 | per.lastName = lastName; 22 | if (type === 'Manager') { 23 | var mgr = Object.create(per); 24 | mgr.type = 'Manager'; 25 | mgr.employees = 50; 26 | return mgr; 27 | } 28 | return per; 29 | } 30 | }; 31 | 32 | //Use the personFactory to create an instance 33 | var p = personFactory.create('Customer', 'John', 'Doe'); 34 | console.log('Person type: ' + p.type); 35 | console.log('Person name: ' + p.getFullName()); 36 | 37 | //This will fail – have to go through factory 38 | try { 39 | var p2 = new person(); 40 | } 41 | catch (e) { 42 | console.log('Unable to create an instance of person using "new". p2 = ' + p2); 43 | console.log(e.message); 44 | } 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/functionsAreObjects.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Functions are Objects 5 | 6 | 7 |

Functions are Objects

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 |

10 | This example demonstrates how functions can be used as 11 | "constructors" via the "new" keyword. 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/functionsAreObjects.js: -------------------------------------------------------------------------------- 1 | //Functions as objects 2 | function Person(firstName, lastName) { 3 | this.firstName = firstName; 4 | this.lastName = lastName; 5 | } 6 | 7 | var Customer = function (firstName, lastName) { 8 | this.firstName = firstName; 9 | this.lastName = lastName; 10 | }; 11 | 12 | var client = { 13 | firstName: 'John', 14 | lastName: 'Doe', 15 | concat: function () { 16 | return this.firstName + ' ' + this.lastName; 17 | } 18 | }; 19 | 20 | console.log('Person is a ' + typeof Person); 21 | console.log('Customer is a ' + typeof Customer); 22 | console.log('client.concat is a ' + typeof client.concat); 23 | 24 | var person = new Person('Tina', 'Smith'); 25 | var customer = new Customer('John', 'Doe'); 26 | 27 | console.log('New person is a ' + typeof person); 28 | console.log('New customer is a ' + typeof customer); 29 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/hoisting.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | JavaScript Hoisting 5 | 6 | 7 |

JavaScript Hoisting

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 |

10 | This example demonstrates how functions can be called before they are defined (a process called "hoisting"). 11 | It's recommended that you define functions before they are used even though hoisting fixes things. 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/hoisting.js: -------------------------------------------------------------------------------- 1 | var name = getName('Jesse', 'James'); 2 | console.log('JavaScript hoisting in action: ' + name); 3 | 4 | //Function will be moved to the top automatically 5 | function getName(firstName, lastName) { 6 | return firstName + ' ' + lastName; 7 | } 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/inheritance-classical-functionBase.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Classical Inheritance: Function Base 5 | 6 | 7 |

Classical Inheritance: Function Base

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 |

10 | This example demonstrates the typical way to implement classical inheritance with a 11 | function as the base object. 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/inheritance-classical-functionBase.js: -------------------------------------------------------------------------------- 1 | function Person() { 2 | this.name = 'Person Name'; 3 | } 4 | 5 | Person.prototype.addOrder = function (order) { 6 | console.log('Added order: ' + order); 7 | }; 8 | 9 | function Customer(name) { 10 | this.name = name; 11 | } 12 | 13 | Customer.prototype = Object.create(Person.prototype); 14 | Customer.prototype.constructor = Customer; 15 | 16 | console.log('Creating Customer object which "derives" from Person'); 17 | var cust = new Customer('Customer Name'); 18 | 19 | cust.addOrder('Order 1'); 20 | console.log('Customer name is: ' + cust.name); 21 | 22 | 23 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/inheritance-overriding.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Overriding Functions 5 | 6 | 7 |

Overriding Functions

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 |

10 | This example demonstrates how functions can be overridden using prototypal inheritance techniques. 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/inheritance-overriding.js: -------------------------------------------------------------------------------- 1 | function Person() { 2 | this.name = 'Person Name'; 3 | } 4 | 5 | Person.prototype.addOrder = function (order) { 6 | console.log('Added order: ' + order + ' for ' + this.name); 7 | }; 8 | 9 | function Customer(name) { 10 | this.name = name; 11 | } 12 | 13 | Customer.prototype = Object.create(Person.prototype); 14 | Customer.prototype.constructor = Customer; //Optional here 15 | //Override addOrder 16 | Customer.prototype.addOrder = function (order) { 17 | //What's wrong with this (hint: look at the name that is written out...'undefined') 18 | //We'll learn how to fix this in a later chapter when we discuss call() 19 | Person.prototype.addOrder('Special Order ' + order); 20 | } 21 | 22 | console.log('Creating Customer object which "derives" from Person'); 23 | var cust = new Customer('Customer Name'); 24 | cust.addOrder('Order 1'); 25 | console.log('Customer name is: ' + cust.name); 26 | 27 | 28 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/inheritance-prototypal-objectBase.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Prototypal Inheritance: Object Base 5 | 6 | 7 |

Prototypal Inheritance: Object Base

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 |

10 | This example demonstrates the typical way to implement prototypal inheritance with an 11 | object literal as the base object. 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/inheritance-prototypal-objectBase.js: -------------------------------------------------------------------------------- 1 | var person = { 2 | name: 'Person Name', 3 | addOrder: function (order) { 4 | console.log('Added order: ' + order); 5 | } 6 | }; 7 | 8 | function Customer(name) { 9 | this.name = name; 10 | } 11 | 12 | Customer.prototype = Object.create(person); 13 | 14 | console.log('Creating Customer object which "derives" from person object literal'); 15 | var cust = new Customer('Customer Name'); 16 | 17 | cust.addOrder('Order 1'); 18 | console.log('Customer name is: ' + cust.name); 19 | 20 | 21 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/inheritance-prototypesAndProperties.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Properties on Prototypes 5 | 6 | 7 |

Properties on Prototypes

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 |

10 | This example demonstrates the effect of putting a property in a prototype. A Person prototype 11 | defines an orderCount property that is updated each time an addOrder() function is called: 12 |

13 |
14 |         Person.prototype.addOrder = function (order) {
15 |             console.log('Added order: ' + order);
16 |             Person.prototype.orderCount++;
17 |         };
18 |         Person.prototype.orderCount = 0;
19 |     
20 |

21 | This can be useful when you want property data to be shared across a hierarchy but 22 | it's important to understand how prototypes work especially if properties are ever added 23 | onto a prototype. A child object that "inherits" from Person will also pick up any changes to the 24 | orderCount property unless the child defines it's own property. This can lead to unwanted side-effects. 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/inheritance-prototypesAndProperties.js: -------------------------------------------------------------------------------- 1 | function Person() { 2 | this.name = 'Person Name'; 3 | } 4 | 5 | Person.prototype.addOrder = function (order) { 6 | console.log('Added order: ' + order); 7 | Person.prototype.orderCount++; 8 | }; 9 | 10 | Person.prototype.orderCount = 0; 11 | 12 | function Customer(name) { 13 | this.name = name; 14 | } 15 | Customer.prototype = Object.create(Person.prototype); 16 | 17 | function PremiumCustomer(name) { } 18 | PremiumCustomer.prototype = Object.create(Customer.prototype); 19 | 20 | var cust = new Customer('Customer Name'); 21 | cust.addOrder('Order 1'); 22 | cust.addOrder('Order 2'); 23 | cust.addOrder('Order 3'); 24 | console.log('Customer order count is: ' + cust.orderCount); 25 | 26 | var premium = new PremiumCustomer('Premium Name'); 27 | console.log('No premium orders were placed but the order count has changed:'); 28 | console.log('Premium order count is: ' + premium.orderCount); 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/properties.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | JavaScript Properties 5 | 6 | 7 |

JavaScript Properties

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 |

10 | This example shows different techniques that can be used to 11 | create properties. 12 |

13 | Properties can be defined in multiple ways: 14 |

15 |
16 |     var person = {
17 |         firstName: 'John',
18 |         lastName: 'Doe'
19 |     }
20 |     person.age = 24;
21 |     person['street'] = '123 Main St.';
22 |     Object.defineProperty(Object.prototype, 
23 |                           'loginAttempts',
24 |                           { enumerable: false, value: 0});
25 | 
26 |

27 | By using defineProperty() you have more control over how 28 | properties can be used. The following example shows how 29 | to disable writes: 30 |
31 |     Object.defineProperty(obj, 'myProp', {
32 |     value: 15,
33 |     writable: false
34 | });
35 | 
36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/staticVariables.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Static Variables 5 | 6 | 7 |

Static Variables

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 |

10 | Although JavaScript doesn't inherently support the concept of "static" members this demo 11 | will show how you can simulate a static. 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsObjects/staticVariables.js: -------------------------------------------------------------------------------- 1 | function Person() { } 2 | Person.age = 50; 3 | 4 | console.log('Person age is a static value: ' + Person.age); 5 | 6 | var john = new Person(); 7 | console.log('Trying to call static age variable ' + 8 | 'through an instance. Value is: ' + john.age); 9 | 10 | //Another technique that uses closures (covered later in the course) 11 | var staticId = (function () { 12 | var id = 0; // This is the private persistent value 13 | // The outer function returns a nested function that has access 14 | // to the persistent value. It is this nested function we're storing 15 | // in the variable id above. 16 | return function () { return id++; }; // Return and increment 17 | })(); // Invoke the outer function after defining it - returns the nested function 18 | 19 | staticId(); // 0 20 | staticId(); // 1 21 | staticId(); // 2 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPatterns/closure.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Using Functions 5 | 6 | 7 | 8 |
9 |

A simple demo of using a closure

10 | Note that the date variable milliseconds shown 11 | is the same across calls to the myClosure() function in the code. 12 | This is due to a "closure" being created that keeps the variable alive 13 | across function calls. 14 |
15 |
16 |
17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPatterns/closure.js: -------------------------------------------------------------------------------- 1 | //standard function - not a closure 2 | function myNonClosure() { 3 | //variable will not be stored in a closure between calls 4 | //to the myNonClosure function 5 | var date = new Date(); 6 | return date.getMilliseconds(); 7 | } 8 | 9 | //closure example 10 | function myClosure() { 11 | //date will be stored in the closure 12 | //due to the function referencing it 13 | var date = new Date(); 14 | 15 | return function () { 16 | var otherDate = new Date(); 17 | return "Closure variable value for milliseconds: " + 18 | date.getMilliseconds() + 19 | "
Non closure variable value for milliseconds: " + 20 | otherDate.getMilliseconds() + 21 | ""; 22 | }; 23 | } 24 | 25 | var myClosure2 = function () { 26 | var date = new Date(), 27 | myNestedFunc = function () { 28 | return "Closure for myNestedFunc: " + date.getMilliseconds(); 29 | }; 30 | return { 31 | myNestedFunc: myNestedFunc 32 | }; 33 | }(); 34 | 35 | //Using a closure 36 | var output = document.getElementById('Output'), 37 | closure = myClosure(); 38 | output.innerHTML = closure(); 39 | output.innerHTML += '

' + myClosure2.myNestedFunc(); 40 | setTimeout(function () { 41 | output.innerHTML += '

' + closure(); 42 | output.innerHTML += '

' + myClosure2.myNestedFunc(); 43 | }, 1500); -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPrimer/conditionals.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Conditionals 5 | 6 | 7 |

Conditionals

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPrimer/conditionals.js: -------------------------------------------------------------------------------- 1 | //== vs. === 2 | var x = 1; 3 | var y = '1'; 4 | 5 | console.log('x == y: ' + (x == y)); //true 6 | console.log('x === y: ' + (x === y)); //false 7 | 8 | var age = 50; 9 | console.log('age = 50'); 10 | 11 | //Check if age is "truth-y" 12 | if (age) { 13 | console.log('age is truth-y'); 14 | } 15 | 16 | var age = 50; 17 | 18 | if (age > 10 && age <= 50) { 19 | console.log('age is greater than 10 and less than or equal to 50'); 20 | } 21 | else if (age > 50) { 22 | console.log('age is greater than 50'); 23 | } 24 | else { 25 | console.log('age is less than 10'); 26 | } 27 | 28 | //shortcut conditional operator 29 | var output = (age == 50) ? 'age is 50' : 'age is not 50'; 30 | console.log('Shortcut conditional says: ' + output); 31 | 32 | var name = 'Fred'; 33 | console.log('name = "Fred"'); 34 | 35 | switch (name) { 36 | case 'Tim': 37 | console.log('case name = Tim hit'); 38 | break; 39 | case 'Tina': 40 | console.log('case name = Tina hit'); 41 | break; 42 | case 'Fred': 43 | console.log('case name = Fred hit'); 44 | break; 45 | default: 46 | console.log('name is ' + name); 47 | break; 48 | } 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPrimer/functions.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Using Functions 5 | 6 | 7 |

Using Functions

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPrimer/functions.js: -------------------------------------------------------------------------------- 1 | function add(x, y) { 2 | console.log(x + ' + ' + y + ' = ' + (x + y)); 3 | } 4 | 5 | function subtract(x, y) { 6 | console.log(x + ' - ' + y + ' = ' + (x - y)); 7 | } 8 | 9 | function multiply(x, y) { 10 | console.log(x + ' * ' + y + ' = ' + (x * y)); 11 | } 12 | 13 | function divide(x, y) { 14 | console.log(x + ' / ' + y + ' = ' + (x / y)); 15 | } 16 | 17 | add(2, 2); 18 | subtract(2, 2); 19 | multiply(3, 3); 20 | divide(3, 3); 21 | 22 | //Functions as objects 23 | function Person(firstName, lastName) { 24 | this.firstName = firstName; 25 | this.lastName = lastName; 26 | } 27 | 28 | var person = new Person('John', 'Doe'); 29 | console.log(person.firstName + ' ' + person.lastName); 30 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPrimer/loops.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Loops 5 | 6 | 7 |

Loops

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPrimer/loops.js: -------------------------------------------------------------------------------- 1 | console.log('\nUsing a for loop'); 2 | 3 | var records = ['One', 'Two', 'Three']; 4 | 5 | for (var i = 0; i < records.length; i++) { 6 | console.log('On record: ' + records[i]); 7 | } 8 | 9 | console.log('\nUsing a for...in loop'); 10 | var counter = 0; 11 | while (counter < records.length) { 12 | console.log('while loop found: ' + records[counter]); 13 | counter++; 14 | } 15 | 16 | 17 | var customer = { 18 | name: 'John Doe', 19 | age: 50 20 | }; 21 | 22 | console.log('\nUsing a for...in loop'); 23 | for (var key in customer) { 24 | console.log('Found property: ' + key + ' = ' + customer[key]); 25 | } -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPrimer/objectsAndObjectLiterals.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Objects and Object Literals 5 | 6 | 7 |

Objects and Object Literals

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPrimer/objectsAndObjectLiterals.js: -------------------------------------------------------------------------------- 1 | //Object 2 | var Customer = function () { }; 3 | 4 | var cust = new Customer(); 5 | cust.firstName = 'John'; 6 | cust.lastName = 'Doe'; 7 | 8 | //Object Literal 9 | var customer = { 10 | firstName: 'Jane', 11 | lastName: 'Doe' 12 | }; 13 | 14 | console.log('Customer Object: ' + cust.firstName + ' ' + cust.lastName); 15 | console.log('Customer Object Literal: ' + customer.firstName + ' ' + customer.lastName); -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPrimer/useStrict.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | What is 'use strict'? 5 | 6 | 7 |

What is 'use strict'?

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 |

10 | The 'use strict' option is in ECMASCript 5 and does the following: 11 | 17 | Note that this example generates a lot of errors (on purpose) to show 'use strict' in action. 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPrimer/usingTypeOf.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Using the typeof Operator 5 | 6 | 7 |

Using the typeof Operator

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPrimer/usingTypeOf.js: -------------------------------------------------------------------------------- 1 | var Customer = function () { }; 2 | var cust = new Customer(); 3 | cust.firstName = 'John'; 4 | cust.lastName = 'Doe'; 5 | 6 | //Object Literal 7 | var customer = { 8 | firstName: 'Jane', 9 | lastName: 'Doe' 10 | }; 11 | 12 | var pets = new Array('Fido', 'Maestro'); //Array 13 | var colors = ['Blue', 'Red', 'Yellow']; //Array 14 | 15 | //Using typeof 16 | console.log(typeof 4.5); 17 | // → number 18 | console.log(typeof 'Fred'); 19 | // → string 20 | console.log(typeof true); 21 | // → boolean 22 | console.log(typeof cust); 23 | // → object 24 | console.log(typeof customer); 25 | // → object 26 | console.log(typeof pets); 27 | // → object 28 | console.log(typeof colors); 29 | // → object -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPrimer/variablesAndTypes.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Variables and Types 5 | 6 | 7 |

Variables and Types

8 | View the results in the debugging console (ctrl/cmd+shift+i) 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/jsPrimer/variablesAndTypes.js: -------------------------------------------------------------------------------- 1 | //Primary Types 2 | var age = 50; //number 3 | var total = 49.99; //number 4 | var fullName = 'John Doe'; //string 5 | var isRegistered = true; //boolean 6 | 7 | //Composite Types 8 | var pets = new Array('Fido', 'Maestro'); //Array 9 | var colors = ['Blue', 'Red', 'Yellow']; //Array 10 | 11 | //Special Types 12 | var street; //undefined 13 | var address = null; //null 14 | 15 | console.log('Age: ' + age); 16 | console.log('total: ' + total); 17 | console.log('fullName: ' + fullName); 18 | console.log('isRegistered: ' + isRegistered); 19 | console.log('pets: ' + pets.length + ' pets named ' + pets); 20 | console.log('colors: ' + colors.length + ' colors named ' + colors); 21 | console.log('street: ' + street); 22 | console.log('address: ' + address); -------------------------------------------------------------------------------- /Mastering JavaScript/samples/typescript/calculator.css: -------------------------------------------------------------------------------- 1 | body { 2 | } 3 | 4 | input { 5 | width: 30px; 6 | } 7 | 8 | button { 9 | width:60px; 10 | } 11 | 12 | .Calculator 13 | { 14 | width:200px; 15 | } 16 | 17 | #Output { 18 | font-weight:bold; 19 | font-size:16pt; 20 | } 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/typescript/calculator.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Using TypeScript 5 | 6 | 7 | 8 | 9 |

TypeScript Calculator

10 |
11 |
12 | X:   13 | Y: 14 |
15 |
16 |
17 |    18 | 19 |
20 |
21 |
22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/typescript/calculator.ts: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | var calc = new Calculator('X','Y','Output'); 3 | }; 4 | 5 | class Calculator { 6 | private x : HTMLInputElement; 7 | private y : HTMLInputElement; 8 | private output : HTMLSpanElement; 9 | 10 | constructor(xId: string, yId: string, outputId: string) { 11 | this.x = document.getElementById(xId); 12 | this.y = document.getElementById(yId); 13 | this.output = document.getElementById(outputId); 14 | this.wireEvents(); 15 | } 16 | 17 | wireEvents() { 18 | document.getElementById('Add').addEventListener('click', 19 | event => { 20 | this.output.innerHTML = this.add(parseInt(this.x.value), parseInt(this.y.value)).toString() 21 | }); 22 | document.getElementById('Subtract').addEventListener('click', 23 | event => { 24 | this.output.innerHTML = this.subtract(parseInt(this.x.value), parseInt(this.y.value)).toString() 25 | }); 26 | } 27 | 28 | add(x: number, y : number) { 29 | return x + y; 30 | } 31 | 32 | subtract(x : number, y: number) { 33 | return x - y; 34 | } 35 | } 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/typescript/calculatorJQuery.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Using TypeScript 5 | 6 | 7 | 8 | 9 | 10 |

TypeScript Calculator

11 |
12 |
13 | X:   14 | Y: 15 |
16 |
17 |
18 |    19 | 20 |
21 |
22 |
23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/typescript/calculatorJQuery.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | $(document).ready(function () { 4 | var calc = new CalculatorjQuery('X','Y','Output'); 5 | }); 6 | 7 | class CalculatorjQuery { 8 | private x : JQuery; 9 | private y : JQuery; 10 | private output : JQuery; 11 | 12 | constructor(xId: string, yId: string, outputId: string) { 13 | this.x = $('#' + xId); 14 | this.y = $('#' + yId); 15 | this.output = $('#' + outputId); 16 | this.wireEvents(); 17 | } 18 | 19 | private wireEvents() { 20 | $('#Add').click(event => { 21 | this.output.html(this.add(parseInt(this.x.val()), parseInt(this.y.val())).toString()); 22 | }); 23 | $('#Subtract').click(event => { 24 | this.output.html(this.subtract(parseInt(this.x.val()), parseInt(this.y.val())).toString()); 25 | }); 26 | } 27 | 28 | add(x: number, y : number) { 29 | return x + y; 30 | } 31 | 32 | subtract(x : number, y: number) { 33 | return x - y; 34 | } 35 | } 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/typescript/classExtension.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | TypeScript HTML App 7 | 8 | 9 | 10 |

Autos

11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/typescript/definingClasses.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | TypeScript HTML App 6 | 7 | 8 | 9 |

TypeScript HTML App

10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/typescript/definingClasses.ts: -------------------------------------------------------------------------------- 1 | module DefiningClasses { 2 | class Engine { 3 | constructor(public horsePower: number, public engineType: string) { } 4 | } 5 | 6 | class Car { 7 | private _engine: Engine; 8 | 9 | constructor(engine: Engine) { 10 | this.engine = engine; 11 | } 12 | 13 | get engine(): Engine { 14 | return this._engine; 15 | } 16 | 17 | set engine(value: Engine) { 18 | if (value == undefined) throw 'Please supply an engine'; 19 | this._engine = value; 20 | } 21 | 22 | start(): void { 23 | alert('Car engine started ' + this._engine.engineType); 24 | } 25 | } 26 | 27 | window.onload = function () { 28 | var engine = new Engine(300, 'V8'); 29 | var car = new Car(engine); 30 | alert(car.engine.engineType); 31 | car.start(); 32 | }; 33 | } 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Mastering JavaScript/samples/typescript/interfaces.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Using Interfaces 6 | 7 | 8 | 9 |

Using Interfaces

10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /Mastering JavaScript/server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | app.use(express.static(__dirname)); 5 | 6 | app.listen(8000); 7 | console.log('Listening on port 8000'); -------------------------------------------------------------------------------- /Mastering JavaScript/styles/iframe.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Mastering JavaScript Course Code 2 | ========== 3 | 4 | This code is used in the Mastering JavaScript class offered by Wahlin Consulting (https://codewithdan.com/products/mastering-javascript). Contact us if you'd like to run the class at your company. 5 | --------------------------------------------------------------------------------