├── Complete Source Code ├── Section 10 │ └── 82- Transpiled Languages References.docx ├── Section 11 │ └── 84- ES6 Features Reference.docx ├── Section 2 │ ├── B10-Scope-Chain.zip │ ├── B11-What-About-Asynchronous-Callbacks.zip │ ├── B3-Global-Environment.zip │ ├── B4-Hoisting.zip │ ├── B5-Undefined.zip │ ├── B6-Execution.zip │ └── B9-Variable-Environments.zip ├── Section 3 │ ├── D1-Objects-And-The-Dot.zip │ ├── D11-Automatic-Semicolon-Insertion.zip │ ├── D12-Whitespace.zip │ ├── D14-IIF-Es.zip │ ├── D15-IIF-Es-And-Safe-Code.zip │ ├── D16-Closures.zip │ ├── D16b-Closures-Part-2.zip │ ├── D17-Function-Factories.zip │ ├── D18-Closures-And-Callbacks.zip │ ├── D19-Call-Apply-Bind.zip │ ├── D2-Object-Literals.zip │ ├── D20-Functional-Programming.zip │ ├── D20b-Functional-Programming-Part-2.zip │ ├── D3-Faking-Namespaces.zip │ ├── D4-JSON.zip │ ├── D5-Functions-Are-Objects.zip │ ├── D6-Function-Expressions.zip │ ├── D6b-By-Value-By-Reference.zip │ ├── D7-Object-Functions-And-This.zip │ ├── D7b-Arrays-Collections-Of-Anything.zip │ ├── D8-Arguments.zip │ ├── D9-Function-Overloading.zip │ ├── Equalty-Comparison-And-Sameness.pdf │ └── Operator-Precedence-In-Javascript.pdf ├── Section 4 │ ├── E2-Understanding-The-Prototype.zip │ └── E4-Reflection-And-Extend.zip ├── Section 5 │ ├── 54- Understanting the Prototype.zip │ └── 56- Reflection and Extend.zip ├── Section 6 │ ├── 57- Function Constructors, 'new', and the History of Javascript.zip │ ├── 58- Function Constructors and '.prototype'.zip │ ├── 60- Conceptual Aside (Built-In Function Constructors).zip │ └── 63- Object.create and Pure Prototypal Inheritance.zip ├── Section 7 │ ├── 65- Initialization.zip │ ├── 66- 'tyepof', 'instaceof', and Figuring Out What Something Is.zip │ ├── 67- Strict Mode.zip │ └── 68- Strict Mode Reference.docx ├── Section 8 │ └── 70- Deep Dive into source Code (jQuery Part 1).zip └── Section 9 │ ├── 74- Structuring Safe Code.zip │ ├── 75- Our Object and Its Prototype.zip │ ├── 76- Properties and Chainable Methods.zip │ ├── 77- Adding jQuery Support.zip │ ├── 78- Good Commenting.zip │ └── 79- Let's Use Our Framework.zip ├── Javascript_ understanding the weird parts mirrors.txt ├── README.md ├── RECAP.txt ├── Section 1 └── Intro_1.txt ├── Section 10 └── BONUS Lectures │ └── 1 Typescript, ES6 and Transpiled languages.txt ├── Section 11 └── ECMAScript 6 │ └── 1. ES6.txt ├── Section 2 └── Execution Contexts and Lexical Environments │ ├── 1 Conceptual Aside.txt │ ├── 10 Functions context and variable env.txt │ ├── 11 Scope Chaining.txt │ ├── 12 scope ES6 and let.txt │ ├── 13 Asynchronous callbacks.txt │ ├── 2 Name value pairs and objects.txt │ ├── 3 Global Env and Global scope.txt │ ├── 4 Execution Context Creation and hosting.txt │ ├── 5 Global Env and Global scope.txt │ ├── 6 JS and undefined.txt │ ├── 7 Code Execution.txt │ ├── 8 Single threaded Synchronous execution.txt │ ├── 9 Function invocation and execution stack.txt │ └── Code Samples │ ├── B10_ScopeChain │ ├── Finished │ │ ├── app.js │ │ └── index.html │ └── Starter │ │ ├── app.js │ │ └── index.html │ ├── B11_WhatAboutAsynchronousCallbacks │ ├── app.js │ └── index.html │ ├── B3_GlobalEnvironment │ ├── Finished │ │ ├── app.js │ │ └── index.html │ └── Starter │ │ ├── app.js │ │ └── index.html │ ├── B4_Hoisting │ ├── Finished │ │ ├── app.js │ │ └── index.html │ └── Starter │ │ ├── app.js │ │ └── index.html │ ├── B5_undefined │ ├── Finished │ │ ├── app.js │ │ └── index.html │ └── Starter │ │ ├── app.js │ │ └── index.html │ ├── B6_Execution │ ├── Finished │ │ ├── app.js │ │ └── index.html │ └── Starter │ │ ├── app.js │ │ └── index.html │ └── B9_VariableEnvironments │ ├── Finished │ ├── app.js │ └── index.html │ └── Starter │ ├── app.js │ └── index.html ├── Section 3 └── 2 Types and operators │ ├── 1 Types and JS.txt │ ├── 2 Primitive Types.txt │ ├── 3 Operators.txt │ ├── 4 Operator precedence and associativity.txt │ ├── 5 Coerision.txt │ ├── 6 Comparison Operators.txt │ ├── 7 Existence and Booleans.txt │ ├── 8 Default values.txt │ ├── 9 Frameworks aside.txt │ └── Code Samples │ ├── C8_BooleansExistence │ ├── Finished │ │ ├── app.js │ │ └── index.html │ └── Starter │ │ ├── app.js │ │ └── index.html │ ├── C9_DefaultValues │ ├── Finished │ │ ├── app.js │ │ └── index.html │ └── Starter │ │ ├── app.js │ │ └── index.html │ ├── Equalty-Comparison-And-Sameness.pdf │ └── Operator-Precedence-In-Javascript.pdf ├── Section 4 └── 3 Objects and Functions │ ├── 1 Objects and Functions.txt │ ├── 10 arguments.txt │ ├── 11 Function Overloading.txt │ ├── 12 Syntax Parsers.txt │ ├── 13 Automatic Semicolon insertion.txt │ ├── 14 Whitespace.txt │ ├── 15 Immediately invoked function expressions.txt │ ├── 16 IIFE and safe code.txt │ ├── 17 Understanding Closures.txt │ ├── 18 Understanding Closures part 2 │ ├── 19 Function Factories.txt │ ├── 20 Closures and callbacks.txt │ ├── 21 call apply and bind.txt │ ├── 22 Function Programming.txt │ ├── 3 Faking namespaces.txt │ ├── 4 JSON and Object Literals.txt │ ├── 5 Functions are objects.txt │ ├── 6 Function Expressions.txt │ ├── 7 By value and by reference.txt │ ├── 8 Objects, Functions and this.txt │ ├── 9 Arrays.txt │ ├── Code Samples │ ├── D11_AutomaticSemicolonInsertion │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D12_Whitespace │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D14_IIFEs │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D15_IIFEsAndSafeCode │ │ ├── Finished │ │ │ ├── app.js │ │ │ ├── greet.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ ├── greet.js │ │ │ └── index.html │ ├── D16_Closures │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D16b_ClosuresPart2 │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D17_FunctionFactories │ │ ├── Closures and Factories.png │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D18_ClosuresAndCallbacks │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D19_CallApplyBind │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D1_ObjectsAndTheDot │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D20_FunctionalProgramming │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D20b_FunctionalProgrammingPart2 │ │ ├── Finished │ │ │ ├── app.js │ │ │ ├── index.html │ │ │ └── underscore.js │ │ └── Starter │ │ │ ├── app.js │ │ │ ├── index.html │ │ │ └── underscore.js │ ├── D2_ObjectLiterals │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D3_FakingNamespaces │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D4_JSON │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D5_FunctionsAreObjects │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D6_FunctionExpressions │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D6b_ByValueByReference │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D7_ObjectFunctionsAndThis │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D7b_ArraysCollectionsOfAnything │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── D8_Arguments │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ └── D9_FunctionOverloading │ │ ├── Finished │ │ ├── app.js │ │ └── index.html │ │ └── Starter │ │ ├── app.js │ │ └── index.html │ └── Tryouts │ ├── Objects_and_functions.js │ └── underscore.js ├── Section 5 └── 4 Object-Oriented Javascript and Prototypal Inheritance │ ├── 1 Classical vs prototypical inheritance.txt │ ├── 3 Everything is an object.txt │ ├── 4 Reflection and extend.txt │ ├── Code Samples │ ├── E2_UnderstandingThePrototype │ │ ├── Finished │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Starter │ │ │ ├── app.js │ │ │ └── index.html │ ├── E4_ReflectionAndExtend │ │ ├── Finished │ │ │ ├── app.js │ │ │ ├── index.html │ │ │ └── underscore.js │ │ └── Starter │ │ │ ├── app.js │ │ │ ├── index.html │ │ │ └── underscore.js │ ├── everything_is_an_object.js │ ├── index.html │ └── tryout_proto.js │ ├── Images │ └── Prototypal Chains.png │ └── prototypal.js ├── Section 6 └── Building Objects │ ├── 1 Building Objects.txt │ ├── 2 Function Constructors.txt │ ├── 3 Function Constructors and Prototype.txt │ ├── 4 new and functions.txt │ ├── 5 Built-in function constructors.txt │ ├── 6 Built in function constructors2.txt │ ├── 7 Arrays and for in .txt │ ├── 8 Object create and pure prototypal.txt │ ├── 9 ES6 and classes.txt │ └── Code Samples │ ├── F1_FunctionConstructorsNewHistory │ ├── Finished │ │ ├── app.js │ │ └── index.html │ └── Starter │ │ ├── app.js │ │ └── index.html │ ├── F2_FunctionConstructorsAndPrototype │ ├── Finished │ │ ├── app.js │ │ └── index.html │ └── Starter │ │ ├── app.js │ │ └── index.html │ ├── F4_BuiltInFunctionConstructors │ ├── Finished │ │ ├── app.js │ │ └── index.html │ └── Starter │ │ ├── app.js │ │ └── index.html │ ├── F5_ObjectCreateAndPrototypal │ ├── Finished │ │ ├── app.js │ │ └── index.html │ └── Starter │ │ ├── app.js │ │ └── index.html │ ├── F6_ES6andClasses │ └── ES6_and_classes.js │ └── arrays_and_for_in.js ├── Section 7 └── Odds and Ends │ ├── 1 Initialization.txt │ ├── 2 typeof,instanceof and Figuring out what something really is.txt │ ├── 3 Strict Mode.txt │ └── Code Samples │ ├── H1_Initialization │ ├── Finished │ │ ├── app.js │ │ └── index.html │ └── Starter │ │ ├── app.js │ │ └── index.html │ ├── H2_typeofinstanceof │ ├── app.js │ └── index.html │ └── H3_strictmode │ ├── Finished │ ├── app.js │ └── index.html │ └── Starter │ ├── app.js │ └── index.html ├── Section 8 └── Examining Famous Frameworks and Libraries │ ├── 2 Deep dive into jQuery.txt │ ├── 3 Deep dive into jQuery Part 2.txt │ └── Code Samples │ ├── I2_DeepDiveJQuery │ ├── app.js │ ├── index.html │ └── jquery-1.11.2.js │ └── jquery-1.12.4.js └── Section 9 └── Let's Build a Framework Library ├── 1 Lets build a framework.txt ├── 2 Structuring Safe Code.txt ├── 3 Our object and its prototype.txt └── Code Samples ├── J2_StructuringSafeCode ├── Finished │ ├── Greetr.js │ ├── app.js │ ├── index.html │ └── jquery-1.11.2.js └── Starter │ ├── Greetr.js │ ├── app.js │ ├── index.html │ └── jquery-1.11.2.js ├── J3_OurObjectAndPrototype ├── Finished │ ├── Greetr.js │ ├── app.js │ ├── index.html │ └── jquery-1.11.2.js └── Starter │ ├── Greetr.js │ ├── app.js │ ├── index.html │ └── jquery-1.11.2.js ├── J4_PropertiesAndChainableMethods ├── Finished │ ├── Greetr.js │ ├── app.js │ ├── index.html │ └── jquery-1.11.2.js └── Starter │ ├── Greetr.js │ ├── app.js │ ├── index.html │ └── jquery-1.11.2.js ├── J5_AddingJQuerySupport ├── Finished │ ├── Greetr.js │ ├── app.js │ ├── index.html │ └── jquery-1.11.2.js └── Starter │ ├── Greetr.js │ ├── app.js │ ├── index.html │ └── jquery-1.11.2.js ├── J6_GoodCommenting ├── Greetr.js ├── app.js ├── index.html └── jquery-1.11.2.js └── J7_LetsUseOurFramework ├── Finished ├── Greetr.js ├── app.js ├── index.html └── jquery-1.11.2.js └── Starter ├── Greetr.js ├── app.js ├── index.html └── jquery-1.11.2.js /Complete Source Code/Section 10/82- Transpiled Languages References.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 10/82- Transpiled Languages References.docx -------------------------------------------------------------------------------- /Complete Source Code/Section 11 /84- ES6 Features Reference.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 11 /84- ES6 Features Reference.docx -------------------------------------------------------------------------------- /Complete Source Code/Section 2/B10-Scope-Chain.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 2/B10-Scope-Chain.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 2/B11-What-About-Asynchronous-Callbacks.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 2/B11-What-About-Asynchronous-Callbacks.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 2/B3-Global-Environment.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 2/B3-Global-Environment.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 2/B4-Hoisting.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 2/B4-Hoisting.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 2/B5-Undefined.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 2/B5-Undefined.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 2/B6-Execution.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 2/B6-Execution.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 2/B9-Variable-Environments.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 2/B9-Variable-Environments.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D1-Objects-And-The-Dot.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D1-Objects-And-The-Dot.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D11-Automatic-Semicolon-Insertion.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D11-Automatic-Semicolon-Insertion.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D12-Whitespace.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D12-Whitespace.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D14-IIF-Es.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D14-IIF-Es.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D15-IIF-Es-And-Safe-Code.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D15-IIF-Es-And-Safe-Code.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D16-Closures.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D16-Closures.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D16b-Closures-Part-2.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D16b-Closures-Part-2.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D17-Function-Factories.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D17-Function-Factories.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D18-Closures-And-Callbacks.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D18-Closures-And-Callbacks.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D19-Call-Apply-Bind.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D19-Call-Apply-Bind.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D2-Object-Literals.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D2-Object-Literals.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D20-Functional-Programming.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D20-Functional-Programming.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D20b-Functional-Programming-Part-2.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D20b-Functional-Programming-Part-2.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D3-Faking-Namespaces.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D3-Faking-Namespaces.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D4-JSON.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D4-JSON.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D5-Functions-Are-Objects.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D5-Functions-Are-Objects.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D6-Function-Expressions.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D6-Function-Expressions.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D6b-By-Value-By-Reference.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D6b-By-Value-By-Reference.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D7-Object-Functions-And-This.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D7-Object-Functions-And-This.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D7b-Arrays-Collections-Of-Anything.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D7b-Arrays-Collections-Of-Anything.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D8-Arguments.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D8-Arguments.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/D9-Function-Overloading.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/D9-Function-Overloading.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 3/Equalty-Comparison-And-Sameness.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/Equalty-Comparison-And-Sameness.pdf -------------------------------------------------------------------------------- /Complete Source Code/Section 3/Operator-Precedence-In-Javascript.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 3/Operator-Precedence-In-Javascript.pdf -------------------------------------------------------------------------------- /Complete Source Code/Section 4/E2-Understanding-The-Prototype.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 4/E2-Understanding-The-Prototype.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 4/E4-Reflection-And-Extend.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 4/E4-Reflection-And-Extend.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 5/54- Understanting the Prototype.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 5/54- Understanting the Prototype.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 5/56- Reflection and Extend.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 5/56- Reflection and Extend.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 6/57- Function Constructors, 'new', and the History of Javascript.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 6/57- Function Constructors, 'new', and the History of Javascript.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 6/58- Function Constructors and '.prototype'.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 6/58- Function Constructors and '.prototype'.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 6/60- Conceptual Aside (Built-In Function Constructors).zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 6/60- Conceptual Aside (Built-In Function Constructors).zip -------------------------------------------------------------------------------- /Complete Source Code/Section 6/63- Object.create and Pure Prototypal Inheritance.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 6/63- Object.create and Pure Prototypal Inheritance.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 7/65- Initialization.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 7/65- Initialization.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 7/66- 'tyepof', 'instaceof', and Figuring Out What Something Is.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 7/66- 'tyepof', 'instaceof', and Figuring Out What Something Is.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 7/67- Strict Mode.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 7/67- Strict Mode.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 7/68- Strict Mode Reference.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 7/68- Strict Mode Reference.docx -------------------------------------------------------------------------------- /Complete Source Code/Section 8/70- Deep Dive into source Code (jQuery Part 1).zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 8/70- Deep Dive into source Code (jQuery Part 1).zip -------------------------------------------------------------------------------- /Complete Source Code/Section 9/74- Structuring Safe Code.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 9/74- Structuring Safe Code.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 9/75- Our Object and Its Prototype.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 9/75- Our Object and Its Prototype.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 9/76- Properties and Chainable Methods.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 9/76- Properties and Chainable Methods.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 9/77- Adding jQuery Support.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 9/77- Adding jQuery Support.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 9/78- Good Commenting.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 9/78- Good Commenting.zip -------------------------------------------------------------------------------- /Complete Source Code/Section 9/79- Let's Use Our Framework.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Complete Source Code/Section 9/79- Let's Use Our Framework.zip -------------------------------------------------------------------------------- /Javascript_ understanding the weird parts mirrors.txt: -------------------------------------------------------------------------------- 1 | Javascript: understanding the weird parts 2 | 3 | http://www71.zippyshare.com/v/Pwfxhyam/file.html (Part 1) 4 | http://www31.zippyshare.com/v/8W9tDL4o/file.html (Part 2) 5 | http://www.solidfiles.com/d/bd660a1540/(Part 3) 6 | http://www4.zippyshare.com/v/MOw1k32B/file.html(Part 4) 7 | http://www20.zippyshare.com/v/hs3hHhZn/file.html(Part 5) 8 | 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript: Understanding the weird parts 2 | JS The weird parts Source code 3 | -------------------------------------------------------------------------------- /RECAP.txt: -------------------------------------------------------------------------------- 1 | Objects are a collection of name value pairs 2 | 3 | Hoisitng is setting up memory space for variables and functions. 4 | 5 | variables are initially set to undefined. 6 | 7 | Primitive types: 8 | ================ 9 | 10 | undefined 11 | null 12 | boolean 13 | Number 14 | String 15 | 16 | Operator precedence (priority) 17 | Operator Associativity(order) 18 | Coerision(changing value from one type to to another) 19 | 20 | Objects and Functions 21 | ===================== 22 | 23 | Parameters are set to undefined if no value is specified. 24 | 25 | Object Literal({}) 26 | Primitive(Property) 27 | Object(Property) 28 | Functions(Methods) 29 | 30 | Namespace: container for variables and functions To keep variables and functions with same name separate. 31 | JSON has strict syntax 32 | 33 | JSON.stringify() - convert JS object to JSON 34 | JSON.parse() - convert JSON to JS object 35 | 36 | Functions: 37 | ========== 38 | 39 | In JS, Functions are objects 40 | Can add Primitive, Property and Methods 41 | 42 | Function Expression 43 | Function Statement 44 | 45 | First class functions => In JS, functions are Objects. 46 | Function is a special type of object. 47 | 48 | 49 | Expression => unit of code that results in a value. It doesn't have to save to a variable. 50 | 51 | By Value => By copying the value, into 2 separate spots in memory 52 | By reference => a points to a object. All objects interact by reference. 53 | 54 | Mutate = to change something. 55 | 56 | immutable means it can't be changed. 57 | 58 | All primitives are by value. 59 | 60 | All functions and objects are by reference. 61 | 62 | JS doesn't support function overloading. 63 | 64 | Always put your own semi colon's. 65 | 66 | Add comments to make it more understandable. 67 | 68 | Immediately Invoked Function Expression (IIFE) - run/invoke immediately after creation 69 | 70 | () at end of function creation immediately invokes the function. 71 | 72 | Closures - execution context still have access to its outer variables even after its execution context is over. 73 | 74 | Callback - Function you give to another function to be run, when the other function is finished. 75 | 76 | 77 | call() and apply() - allows to invoke the function and set the this keyword. 78 | bind() - creates acopy of the function and attaches this to it. 79 | 80 | Function currying - creating a copy of the function with default set of Parameters. 81 | 82 | Functional Programming - underscore.js and lodash.js 83 | 84 | Classical Inheritance: similar to the Inheritance in other programming languages. 85 | 86 | Prototypal Inheritance: an object can access the properties and methods of other objects. 87 | 88 | Prototypal chain - access to property and methods down the chain. 89 | 90 | Looks for current object and if it doesn't find it, it looks for the parent class. 91 | 92 | Reflection: An object can look at itself listing and changing it properties and methods. 93 | 94 | using Underscore.js, we use _.extend() to combine all properties and methods of objects into a single object. 95 | 96 | we can use reflection with the extend pattern not just the prototypal pattern. 97 | 98 | JS was built by Brenden Hike. 99 | 100 | When we use 'new' operator, it creates a brand new object and points 'this' to that brand new object. 101 | 102 | If nothing is returned from that function, it returns that empty object. 103 | 104 | Function constructors are just normal functions used to construct objects. 105 | 106 | The 'this' keyword points to a new empty object, and that object is returned from the function automatically. 107 | 108 | Function constructors must start with a capital letter. 109 | 110 | Never use built in function constructors. 111 | 112 | Never use for..in loops for Arrays. 113 | 114 | Polyfill: Code that adds a feature that the JS engine may lack. 115 | 116 | Syntatic Sugar: A different way to type something that doesn't change how it works. 117 | 118 | Odd and Ends: 119 | ============= 120 | 121 | type of number is number 122 | type of string is string 123 | type of object is object. 124 | type of array is object. 125 | Object.prototype.toString.call() - this returns type as array. 126 | type of object created using 'new' keyword is an object. 127 | type of function statement is an object. 128 | type of Function expression is a function. 129 | type of undefined is undefined. 130 | 131 | instance of new object is the parent object. 132 | 133 | Let's Build a framework: 134 | ======================= 135 | 136 | ; before IIFE..another trick 137 | 138 | If another library injected before the script file. 139 | 140 | Your code will just run fine. 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | -------------------------------------------------------------------------------- /Section 1/Intro_1.txt: -------------------------------------------------------------------------------- 1 | Javascript Programming Language: 2 | ------------------------------- 3 | 4 | DON'T IMITATE 5 | 6 | SETUP: 7 | ----- 8 | 9 | Google Chrome and Brackets 10 | 11 | BIG WORD ALERT 12 | -------------- 13 | 14 | Definition and more detail 15 | 16 | Understanding Frameworks and the weird part: 17 | -------------------------------------------- 18 | 19 | Frameworks - jQuery and AngularJS 20 | 21 | Understand JS first and then later all the Frameworks. 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Section 10/BONUS Lectures/1 Typescript, ES6 and Transpiled languages.txt: -------------------------------------------------------------------------------- 1 | Typescript, ES6 and Transpiled languages: 2 | ======================================= 3 | 4 | 5 | Transpile: 6 | 7 | To convert the syntax of one programming language to another 8 | 9 | In this case, langs don't really run everywhere, instead processed by the transpiler to generate JS. -------------------------------------------------------------------------------- /Section 11/ECMAScript 6/1. ES6.txt: -------------------------------------------------------------------------------- 1 | ECMAScript 6: 2 | ============= 3 | 4 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/1 Conceptual Aside.txt: -------------------------------------------------------------------------------- 1 | Conceptual Aside: 2 | ----------------- 3 | 4 | Concept/Idea that is fundamentals of JS 5 | 6 | Syntax Parsers 7 | Execution Contexts 8 | Lexical Environments 9 | 10 | Syntax Parsers: 11 | =============== 12 | 13 | A program that reads our code and determines what it does and if its grammar is valid. 14 | 15 | Compilers and Interpreters 16 | 17 | Translating code syntax and implement in a way the comp understands. 18 | 19 | Engine translates the code to the computer. 20 | 21 | Intermediate program that converts your program into computer understandable form. 22 | 23 | Lexical Environment: 24 | ================== 25 | 26 | Lexical means having to do with words or grammar. 27 | A Lexical environment exists in programming languages in which where you write something is important 28 | Where it is written and what's surrounds it. 29 | 30 | Execution Context: 31 | ================== 32 | 33 | A wrapper to help manage the code that is running. 34 | 35 | Lots of Lexical Environment 36 | 37 | Which one is currently running is mananged by Execution Context. 38 | 39 | Contains things beyond what you're written in your code. 40 | 41 | A section of code that is currently running. 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/10 Functions context and variable env.txt: -------------------------------------------------------------------------------- 1 | Functions, context and variable environments: 2 | ============================================= 3 | 4 | Variable Environments: (where is the variable) 5 | ======================= 6 | 7 | where the variables live and how they relate to each other in memory. 8 | 9 | function b(){ 10 | var myVar; 11 | } 12 | function a(){ 13 | var myVar = 2; 14 | b(); 15 | } 16 | var myVar = 1; 17 | a(); 18 | 19 | Global exection context is created and code executed myVar = 1 20 | a() is invoked during it execution context 21 | myVar is set to 2 22 | b() is invoked 23 | myVar is set to undefined. 24 | 25 | Scopes: 26 | ======= 27 | Each of the myVar has its own execution context. 28 | 29 | 30 | function b(){ 31 | var myVar; 32 | console.log(myVar); 33 | } 34 | function a(){ 35 | var myVar =2; 36 | console.log(myVar); 37 | b(); 38 | } 39 | var myVar = 1; 40 | console.log(myVar); 41 | a(); 42 | console.log(myVar); -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/11 Scope Chaining.txt: -------------------------------------------------------------------------------- 1 | Scope Chaining: 2 | ================= 3 | 4 | function b(){ 5 | console.log(myVar); 6 | } 7 | function a(){ 8 | var myVar = 2; 9 | b(); 10 | } 11 | var myVar = 1; 12 | a(); 13 | 14 | OUTPUT: 1 15 | ====== 16 | 17 | expected output: undefined 18 | 19 | Execution stack: global level as 1 20 | a(): myVar = 2 21 | b() myVar 22 | 23 | * Every execution context has a reference to its outer environment. 24 | 25 | outer execution context of b is global 26 | outer execution context of a is global 27 | 28 | Lexical environment: (outer environment) 29 | ==================== 30 | 31 | b() is sitting lexically on top of global. 32 | 33 | If the execution context can't find the variable, it goes to the global object. 34 | 35 | * scope means where can I access that variable 36 | 37 | * chain means those links that outer env is referenced. 38 | 39 | function a() { 40 | function b() { 41 | console.log(myVar); 42 | } 43 | var myVar = 2; 44 | b(); // reference to outer lexical environment which is a() 45 | } 46 | 47 | var myVar = 1; 48 | a(); 49 | b(); // b is not defined. 50 | 51 | OUTPUT: 2 52 | ======= 53 | 54 | outer lexical environment of b is now a which is physically sitting out. 55 | outer lexical environment of a is now global which is physically sitting out of it. 56 | 57 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/12 scope ES6 and let.txt: -------------------------------------------------------------------------------- 1 | Scope, ES6 and let 2 | ================= 3 | 4 | Scope is where a variable is availabe in your code. 5 | 6 | and if it's truly the same variable or a new copy. 7 | 8 | ECMAScript 6: 9 | ============= 10 | 11 | New way of declaring variables using 'let' 12 | 13 | 'let' allow JS engine to use block scoping. 14 | 15 | if(a > b){ 16 | let c = true; 17 | } 18 | 19 | Not allowed to use it until the line of code is run during execution phase that acutally declares the variable. 20 | 21 | Declared inside a block. 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/13 Asynchronous callbacks.txt: -------------------------------------------------------------------------------- 1 | Asynchronnous Callbacks: 2 | ======================= 3 | 4 | Asynchronnous: 5 | ============== 6 | 7 | * More than one at a time. 8 | 9 | Javascript Engine: 10 | ================== 11 | 12 | Has hooks with: 13 | 14 | * Rendering Engine 15 | * HTTP Request 16 | 17 | DOM Engine 18 | CSS Engine 19 | 20 | Global Execution Context: 21 | 22 | Event Queue: 23 | =========== 24 | 25 | Browser outside the JS engine has an event inside the JS engine to be notified of.. is placed on the queue 26 | Click - 27 | 28 | CODE: 29 | ===== 30 | 31 | function waitThreeSeconds(){ 32 | var ms = 3000 + new Date().getTime(); 33 | while(new Date() < ms){} 34 | console.log('finished function'); 35 | } 36 | function clickHandler(){ 37 | console.log('click event'); 38 | } 39 | document.addEventListener('click',clickHandler); 40 | waitThreeSeconds(); 41 | console.log('finsihed execution'); 42 | 43 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/2 Name value pairs and objects.txt: -------------------------------------------------------------------------------- 1 | Name Value Pairs: 2 | ================ 3 | 4 | A name which maps to a unique value 5 | 6 | name may be defined more than once but can have one value at any given context. 7 | 8 | That values may be more name/value pairs. 9 | 10 | Address = "100 Main st." 11 | 12 | OBJECT: 13 | ======== 14 | 15 | A collection of name/value pairs. 16 | 17 | The simplest definition relating to JS. 18 | 19 | address:{ 20 | street:'abc', 21 | Number:100, 22 | Apartment:{ 23 | Floor:3, 24 | Number:301 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/3 Global Env and Global scope.txt: -------------------------------------------------------------------------------- 1 | Global scope: 2 | ============= 3 | 4 | Execution context(global) 5 | 6 | creates a global object 7 | creates a special variable 'this' 8 | 9 | window object is the default global object of this in browser. 10 | 11 | Global object available to the whole program. 12 | 13 | Global object(window) = this 14 | 15 | Global is not inside a function. 16 | 17 | When the JS engine runs your code : 18 | ================================= 19 | 20 | it creates a global object when not inside a function. 21 | When running your code inside a browser, the global object is this. 22 | Outer environment. 23 | 24 | Finally your code is run. 25 | 26 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/4 Execution Context Creation and hosting.txt: -------------------------------------------------------------------------------- 1 | Creation and Hosting: 2 | --------------------- 3 | 4 | var a = 'hello world'; 5 | function b(){ 6 | console.log(a); 7 | } 8 | b(); 9 | console.log(a); 10 | 11 | Execution context is created in two phases 12 | 13 | Creation Phase: 14 | =============== 15 | 16 | Global Object 17 | this 18 | Outer env 19 | 20 | Recognizes where you have created variables and functions 21 | 22 | Setups memory space for variables and functions 'Hosting' 23 | 24 | Before code begins executed, JS engine sets up memory for variables and functions. 25 | 26 | When code begins to execute, it can be accessed. 27 | 28 | Execution Phase: 29 | ================ 30 | 31 | b(); 32 | console.log(a); // Parser says I DON'T KNOW ITS VALUE!! SETTING IT TO UNDEFINED. 33 | var a = 'Hello World!'; 34 | function b() { 35 | console.log('called b'); 36 | } 37 | 38 | 39 | 40 | 41 | 42 | JS engine doesn't know it value so it defaults to 'undefined' 43 | 44 | All JS variables are initially set to 'undefined' 45 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/5 Global Env and Global scope.txt: -------------------------------------------------------------------------------- 1 | Global scope: 2 | ============= 3 | 4 | Execution context(global) 5 | 6 | creates a global object 7 | creates a special variable 'this' 8 | 9 | window object is the default global object of this in browser. 10 | 11 | Global object available to the whole program. 12 | 13 | Global object(window) = this 14 | 15 | Global is not inside a function. 16 | 17 | When the JS engine runs your code : 18 | ================================= 19 | 20 | it creates a global object when not inside a function. 21 | When running your code inside a browser, the global object is this. 22 | Outer environment. 23 | 24 | Finally your code is run. 25 | 26 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/6 JS and undefined.txt: -------------------------------------------------------------------------------- 1 | JS and undefined: 2 | ================= 3 | 4 | Global object 5 | this 6 | outer env 7 | 8 | Hoisting: 9 | =========== 10 | 11 | Setup variables(undefined by default) and functions setup 12 | 13 | var a; 14 | console.log(a); // undefined 15 | 16 | undefined and not defined are not same. 17 | 18 | undefined is a special value which JS uses internally which means the variable has not been set. 19 | 20 | Execution context saw var a and set it up in memory. 21 | 22 | Never do a = undefined 23 | 24 | Never set a variable to undefined. 25 | 26 | undefined is a special value that a variable receive during the creation phase of execution context. -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/7 Code Execution.txt: -------------------------------------------------------------------------------- 1 | Execution Phase: 2 | ================ 3 | 4 | Global object 5 | this 6 | outer env 7 | 8 | Runs your code: 9 | =============== 10 | 11 | Interpreting it 12 | Compiling it 13 | Parsing it 14 | Executing it 15 | 16 | to something the comp understands. 17 | 18 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/8 Single threaded Synchronous execution.txt: -------------------------------------------------------------------------------- 1 | Conceptual Aside: 2 | 3 | Single threaded synchronous execution: 4 | -------------------------------------- 5 | 6 | Single Threaded: 7 | ================ 8 | 9 | One command is executed at a time. 10 | 11 | under the hood, may be not. 12 | 13 | Synchronous Execution: 14 | ====================== 15 | 16 | And in order.... -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/9 Function invocation and execution stack.txt: -------------------------------------------------------------------------------- 1 | Function execution and the execution stack: 2 | --------------------------------------------- 3 | 4 | Function Invocation: 5 | ==================== 6 | 7 | Invo WhAt?!? 8 | 9 | Running a function. 10 | 11 | In JS, by using a paraenthesis(). 12 | JS to invoke the function. 13 | 14 | 15 | What happens when you invoke a function: 16 | ======================================== 17 | 18 | function b(){ 19 | 20 | } 21 | function a(){ 22 | b(); //Execution context create and execute 23 | } 24 | a(); //Execution context create and executes 25 | 26 | global execution context is created and code is executed. 27 | parser parses the code and compiles and interprets. 28 | 29 | * global object 30 | * this 31 | * outer env 32 | * setup the memory phase for them. 33 | * code executed line by line. 34 | 35 | * A new exection context is created and place of the execution stack. 36 | * One that is on the top is the one currently running. 37 | * any time you invoke a function, a new execution context is created and put on execution stack. 38 | * If it encounters another function inside it, it stops and creates a new execution context on top of it. 39 | 40 | function a(){ 41 | b(); 42 | var c; 43 | } 44 | function b(){ 45 | var d; 46 | } 47 | a(); // invokes function a.. puts it on execution stack 48 | var d; 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B10_ScopeChain/Finished/app.js: -------------------------------------------------------------------------------- 1 | function a() { 2 | 3 | function b() { 4 | console.log(myVar); 5 | } 6 | 7 | b(); 8 | } 9 | 10 | var myVar = 1; 11 | a(); -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B10_ScopeChain/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B10_ScopeChain/Starter/app.js: -------------------------------------------------------------------------------- 1 | function a() { 2 | function b() { 3 | console.log(myVar); 4 | } 5 | var myVar = 2; 6 | b(); 7 | } 8 | 9 | var myVar = 1; 10 | a(); 11 | b(); -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B10_ScopeChain/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B11_WhatAboutAsynchronousCallbacks/app.js: -------------------------------------------------------------------------------- 1 | // long running function 2 | function waitThreeSeconds() { 3 | var ms = 3000 + new Date().getTime(); 4 | while (new Date() < ms){} 5 | console.log('finished function'); 6 | } 7 | 8 | function clickHandler() { 9 | console.log('click event!'); 10 | } 11 | 12 | // listen for the click event 13 | document.addEventListener('click', clickHandler); 14 | 15 | 16 | waitThreeSeconds(); 17 | console.log('finished execution'); -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B11_WhatAboutAsynchronousCallbacks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B3_GlobalEnvironment/Finished/app.js: -------------------------------------------------------------------------------- 1 | var a = 'Hello World!'; 2 | 3 | function b() { 4 | 5 | } -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B3_GlobalEnvironment/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B3_GlobalEnvironment/Starter/app.js: -------------------------------------------------------------------------------- 1 | var a = 'Hello world'; 2 | function b(){ 3 | 4 | } -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B3_GlobalEnvironment/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B4_Hoisting/Finished/app.js: -------------------------------------------------------------------------------- 1 | b(); 2 | console.log(a); 3 | 4 | var a = 'Hello World!'; 5 | 6 | function b() { 7 | console.log('Called b!'); 8 | } -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B4_Hoisting/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B4_Hoisting/Starter/app.js: -------------------------------------------------------------------------------- 1 | b(); 2 | console.log(a); 3 | var a = 'Hello World!'; 4 | function b() { 5 | console.log('called b'); 6 | } 7 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B4_Hoisting/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B5_undefined/Finished/app.js: -------------------------------------------------------------------------------- 1 | var a; 2 | console.log(a); 3 | 4 | 5 | if (a === undefined) { 6 | console.log('a is undefined!'); 7 | } 8 | else { 9 | console.log('a is defined!'); 10 | } -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B5_undefined/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B5_undefined/Starter/app.js: -------------------------------------------------------------------------------- 1 | var a; 2 | console.log(a); 3 | 4 | if(a === undefined){ 5 | console.log('a is undefined'); 6 | }else{ 7 | console.log('a is defined!'); 8 | } 9 | 10 | 11 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B5_undefined/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B6_Execution/Finished/app.js: -------------------------------------------------------------------------------- 1 | function b() { 2 | console.log('Called b!'); 3 | } 4 | 5 | b(); 6 | 7 | console.log(a); 8 | 9 | var a = 'Hello World!'; 10 | 11 | console.log(a); -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B6_Execution/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B6_Execution/Starter/app.js: -------------------------------------------------------------------------------- 1 | function b() { 2 | console.log('Called b!'); 3 | } // creation phase 4 | b(); // execution phase 5 | console.log(a); //execution phase 6 | 7 | var a = 'Hello World!'; // creation phase 8 | console.log(a); //execution phase 9 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B6_Execution/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B9_VariableEnvironments/Finished/app.js: -------------------------------------------------------------------------------- 1 | function b() { 2 | var myVar; 3 | console.log(myVar); 4 | } 5 | 6 | function a() { 7 | var myVar = 2; 8 | console.log(myVar); 9 | b(); 10 | } 11 | 12 | var myVar = 1; 13 | console.log(myVar); 14 | a(); 15 | console.log(myVar); 16 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B9_VariableEnvironments/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B9_VariableEnvironments/Starter/app.js: -------------------------------------------------------------------------------- 1 | function b(){ 2 | var myVar; 3 | console.log(myVar); 4 | } 5 | function a(){ 6 | var myVar =2; 7 | console.log(myVar); 8 | b(); 9 | } 10 | var myVar = 1; 11 | console.log(myVar); 12 | a(); 13 | -------------------------------------------------------------------------------- /Section 2/Execution Contexts and Lexical Environments/Code Samples/B9_VariableEnvironments/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 3/2 Types and operators/1 Types and JS.txt: -------------------------------------------------------------------------------- 1 | DYNAMIC TYPING: 2 | =============== 3 | 4 | We don't tell JS engine what type of data a variable holds. 5 | 6 | Static Typing: 7 | ============== 8 | 9 | You tell compiler the data type of a variable 10 | 11 | var isNew = true; 12 | isNew = 'yup'; 13 | isNew = 1; -------------------------------------------------------------------------------- /Section 3/2 Types and operators/2 Primitive Types.txt: -------------------------------------------------------------------------------- 1 | Primitive types: 2 | ---------------- 3 | 4 | A type of data that represents a single value. 5 | 6 | That is, not a object 7 | 8 | 9 | undefined - represents a lack of existence. Never set a variable to it 10 | null - null represents a lack of existence. 11 | Boolean - true/false 12 | Number - Floating point number 13 | String - A sequence of characters. 14 | Symbol - new in ES6(next version of JS) 15 | -------------------------------------------------------------------------------- /Section 3/2 Types and operators/3 Operators.txt: -------------------------------------------------------------------------------- 1 | Operators: 2 | ========== 3 | 4 | special function that is syntatically written differently 5 | 6 | take 2 parameters and return a result. 7 | 8 | Dynamically typed since we don't know the data type of the variable 9 | -------------------------------------------------------------------------------- /Section 3/2 Types and operators/4 Operator precedence and associativity.txt: -------------------------------------------------------------------------------- 1 | Operator precedence: (priority) 2 | ===================== 3 | 4 | which operator function gets called first where there are more than one. 5 | 6 | Functions are called in order of precedence(HIGHER precedence wins). 7 | 8 | 9 | Associativity: ( order ) 10 | ============= 11 | 12 | Come into play 2 or more operator have the same precedence. 13 | 14 | * Left to right 15 | * Right to left 16 | 17 | what order a operator gets called in. 18 | 19 | var a = 2, b = 3, c = 4; 20 | a=b=c; 21 | a=4 22 | console.log(a) 23 | console.log(b) 24 | console.log(c) -------------------------------------------------------------------------------- /Section 3/2 Types and operators/5 Coerision.txt: -------------------------------------------------------------------------------- 1 | Coerision: 2 | =========== 3 | 4 | converting a value from one type to another. 5 | 6 | happens often in JS because it's dynamically typed. 7 | 8 | 9 | var a = 1 + '2'; 10 | console.log(a); 11 | 12 | OUTPUT: 13 | ======= 14 | 15 | '12' // string -------------------------------------------------------------------------------- /Section 3/2 Types and operators/6 Comparison Operators.txt: -------------------------------------------------------------------------------- 1 | Comparison Operators: 2 | ===================== 3 | console.log(1<2<3); //true 4 | console.log(3<2<1); // true 5 | console.log(false<1); 6 | 7 | 8 | false converted to a number becomes 0 9 | 10 | 11 | false == 0 // true 12 | 13 | null = 0 // false 14 | 15 | null < 1 // true 16 | 3 == 3 //true 17 | "3" == 3 // true 18 | 19 | "" == 0 // true 20 | "" = false // true 21 | 22 | strict equality === 23 | strict inequality !== 24 | 25 | "3" === "3" // true 26 | "3" === 3 // false 27 | 28 | 99% of time use "===" 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Section 3/2 Types and operators/7 Existence and Booleans.txt: -------------------------------------------------------------------------------- 1 | Existence and Booleans: 2 | ======================== 3 | 4 | Boolean(undefined) // false 5 | 6 | Boolean(null) //false 7 | 8 | Boolean("") //false 9 | 10 | var a; 11 | 12 | a = 'hi'; 13 | a = 0; 14 | 15 | if(a || a === 0){ 16 | console.log('a is something!'); 17 | } 18 | -------------------------------------------------------------------------------- /Section 3/2 Types and operators/8 Default values.txt: -------------------------------------------------------------------------------- 1 | Default values: 2 | =============== 3 | 4 | Variable is not set. Value is set to undefined. 5 | 6 | function greet(name){ 7 | name = name || ''; 8 | console.log('Hello' + name); 9 | } 10 | 11 | greet('Tony'); // Hello tony 12 | greet(); // undefined 13 | 14 | null || "hello" 15 | 16 | Hello Tony 17 | Hello "" 18 | 19 | -------------------------------------------------------------------------------- /Section 3/2 Types and operators/9 Frameworks aside.txt: -------------------------------------------------------------------------------- 1 | Frameworks Aside: 2 | ================ 3 | 4 | -------------------------------------------------------------------------------- /Section 3/2 Types and operators/Code Samples/C8_BooleansExistence/Finished/app.js: -------------------------------------------------------------------------------- 1 | var a; 2 | 3 | // goes to internet and looks for a value 4 | 5 | if (a) { 6 | console.log('Something is there.'); 7 | } -------------------------------------------------------------------------------- /Section 3/2 Types and operators/Code Samples/C8_BooleansExistence/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 3/2 Types and operators/Code Samples/C8_BooleansExistence/Starter/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Section 3/2 Types and operators/Code Samples/C8_BooleansExistence/Starter/app.js -------------------------------------------------------------------------------- /Section 3/2 Types and operators/Code Samples/C8_BooleansExistence/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 3/2 Types and operators/Code Samples/C9_DefaultValues/Finished/app.js: -------------------------------------------------------------------------------- 1 | function greet(name) { 2 | name = name || ''; 3 | console.log('Hello ' + name); 4 | } 5 | 6 | greet('Tony'); 7 | greet(); -------------------------------------------------------------------------------- /Section 3/2 Types and operators/Code Samples/C9_DefaultValues/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 3/2 Types and operators/Code Samples/C9_DefaultValues/Starter/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Section 3/2 Types and operators/Code Samples/C9_DefaultValues/Starter/app.js -------------------------------------------------------------------------------- /Section 3/2 Types and operators/Code Samples/C9_DefaultValues/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 3/2 Types and operators/Code Samples/Equalty-Comparison-And-Sameness.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Section 3/2 Types and operators/Code Samples/Equalty-Comparison-And-Sameness.pdf -------------------------------------------------------------------------------- /Section 3/2 Types and operators/Code Samples/Operator-Precedence-In-Javascript.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Section 3/2 Types and operators/Code Samples/Operator-Precedence-In-Javascript.pdf -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/1 Objects and Functions.txt: -------------------------------------------------------------------------------- 1 | Objects and Functions: 2 | ===================== 3 | 4 | They are almost same in JS 5 | 6 | Objects: 7 | ======== 8 | 9 | A collection of name/value pairs which can contain other name/value pairs 10 | 11 | How Object resides in computer Memory: 12 | ======================================== 13 | 14 | Primitive(Property) 15 | Object(Property) 16 | Functions(Methods) 17 | 18 | Sit in Memory. 19 | Have references to address of the Property and methods in the JS. 20 | 21 | Computer Member access operator (. => Left to right associativity) 22 | =============================== 23 | 24 | var person = new Object(); 25 | 26 | person["firstname"] = "Tony"; // object gets a reference to the address of the location in memory. 27 | person["lastname"] = "Alicea"; 28 | 29 | var firstNameProperty = "firstname"; 30 | 31 | console.log(person); // Object 32 | console.log(person[firstNameProperty]); // Tony 33 | 34 | console.log(person.firstname); // Tony 35 | console.log(person.lastname); // Alicea 36 | 37 | person.address = new Object(); 38 | 39 | person.address.street = "111 Main St."; 40 | person.address.city = "New York"; 41 | person.address.state = "NY"; 42 | 43 | console.log(person.address.street); 44 | console.log(person.address.city); 45 | console.log(person["address"]["state"]); 46 | 47 | Always use dot opertor for member access. 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/10 arguments.txt: -------------------------------------------------------------------------------- 1 | Arguments: 2 | ========== 3 | 4 | Execute a function , a new execution context is created 5 | 6 | Variable env 7 | this 8 | outer env 9 | arguments 10 | 11 | arguments hold all those value we pass to those functions. 12 | 13 | Arguments: 14 | ========= 15 | 16 | The params you pass to a function 17 | 18 | JS gives a keyword of the same name which contains them all. 19 | 20 | New version of arguments: 21 | ======================== 22 | // creates a array of parameters 23 | function greet(firstname,lastname,language, ...others){ 24 | 25 | } 26 | 27 | 28 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/11 Function Overloading.txt: -------------------------------------------------------------------------------- 1 | Function Overloading: 2 | ==================== 3 | 4 | Function with same name with different arguments. 5 | 6 | JS doesn't support function overloading. -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/12 Syntax Parsers.txt: -------------------------------------------------------------------------------- 1 | Syntax Parsers: 2 | =============== 3 | 4 | JS engine does syntax parsers. 5 | reads the code and determines what to do. 6 | reads character by character. 7 | If encounters something unsual it throws an error. 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/13 Automatic Semicolon insertion.txt: -------------------------------------------------------------------------------- 1 | auto semicolon insertion 2 | ======================== 3 | 4 | Always avoid it. 5 | Good code always contain manually added semi-colon 6 | Semicolon is optional in core JS. 7 | It knows what the synatx should look like. 8 | Inject auto semicolon for you. 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/14 Whitespace.txt: -------------------------------------------------------------------------------- 1 | Whitespace: 2 | ============ 3 | 4 | invisible characters that create literal 'space' in your code. 5 | 6 | carriage returns,tabs,spaces 7 | 8 | JS syntax parsers is very liberal of whitespace. 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/15 Immediately invoked function expressions.txt: -------------------------------------------------------------------------------- 1 | Immediately Invoked Function expressions: 2 | ========================================== 3 | 4 | Function Statement and Expression needs manual invoking. 5 | 6 | () at end of function immediately invokes the function. 7 | 8 | wrapped all code in a function, created on fly and invoke it immediately. -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/16 IIFE and safe code.txt: -------------------------------------------------------------------------------- 1 | IIFE and safe code: 2 | ================== 3 | 4 | var firstname = 'JOhn'; 5 | (function(name){ 6 | var greeting = 'Hello'; 7 | console.log(greeting + ' ' + name); 8 | }(firstname)); 9 | 10 | Execution stack: 11 | =============== 12 | 13 | code loaded and has global execution context. 14 | Hits IIFE 15 | When hits functions, does creation phase 16 | sees those paraenthesis, new execution context is created. 17 | 18 | 19 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/17 Understanding Closures.txt: -------------------------------------------------------------------------------- 1 | Understanding Closures: 2 | ======================= 3 | 4 | Closures: 5 | ========= 6 | 7 | Under the hood: 8 | 9 | Function is hoisted in global execution context 10 | Invokes greet and new execution context is created 11 | whattosay get params from function 12 | greet execution context is poped off after its execution 13 | But whattosay has hi in memory still. 14 | 15 | execution context is closed in its outer variables. 16 | sayHi('Tony') has access to whattosay hi value. 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/18 Understanding Closures part 2: -------------------------------------------------------------------------------- 1 | Understanding Closures part 2: 2 | ============================== 3 | 4 | Closures are the fundamental concept of Advanced JS Programming. 5 | 6 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/19 Function Factories.txt: -------------------------------------------------------------------------------- 1 | Function Factories: 2 | =================== 3 | 4 | Use Closures to our advantage. 5 | 6 | Taking advantage of closures to make factory functions. 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/20 Closures and callbacks.txt: -------------------------------------------------------------------------------- 1 | Closures and Callbacks: 2 | ====================== 3 | 4 | Callback function: 5 | 6 | * Function you give to another function to be run, when the other function is finished. 7 | * So the function you call, calls back by calling the function you gave when it finishes. 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/21 call apply and bind.txt: -------------------------------------------------------------------------------- 1 | Call, apply, bind: 2 | ================= 3 | 4 | Variable env 5 | this 6 | outer env 7 | 8 | All functions have access to 9 | 10 | call() - // let you control what this means. 11 | apply() // takes this and an array of parameters. 12 | bind() - creates a copy of the function you are calling it on and what ever methods you pass it on. 13 | 14 | 15 | Function currying: 16 | ================== 17 | 18 | creating a copy of function but with some present parameters. 19 | very useful in mathematical situations. 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/22 Function Programming.txt: -------------------------------------------------------------------------------- 1 | Functional Programming: 2 | ======================= 3 | 4 | One of the most important concepts of Advanced JS. 5 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/3 Faking namespaces.txt: -------------------------------------------------------------------------------- 1 | Faking Namespaces: 2 | =================== 3 | 4 | Namespace: 5 | =========== 6 | 7 | Container for variables and functions 8 | 9 | To keep variables and functions with same name separate. 10 | 11 | var greet = 'Hello!'; // 1st page 12 | var greet = 'Hola!'; // 2nd page 13 | 14 | console.log(greet); 15 | 16 | var english = {}; 17 | var spanish = {}; 18 | 19 | //They don't collide each other 20 | english.greet = 'Hello'; 21 | spanish.greet = 'Hola!'; 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/4 JSON and Object Literals.txt: -------------------------------------------------------------------------------- 1 | JSON and Object Literals: 2 | ========================= 3 | 4 | Javascript Object Notation => JSON 5 | 6 | 7 | Mary 8 | true 9 | 10 | 11 | // Loss of bandwidth due to unnecessary data download 12 | 13 | // Valid Object Literal Syntax 14 | { 15 | "firstname":'Mary', 16 | "isAProgrammer":true 17 | } 18 | 19 | name's must be wrapped in quotes ( MUST IN JSON) 20 | 21 | Anything that JSON valid is JS Object valid but not vice versa. 22 | 23 | For converting Object literals to JSON string we use JSON.stringify() 24 | 25 | JSON.parse() takes a JSON string and converts to a JS Object. -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/5 Functions are objects.txt: -------------------------------------------------------------------------------- 1 | Functions are Objects: 2 | ===================== 3 | 4 | First class functions => In JS, functions are Objects. 5 | 6 | First class functions: 7 | ===================== 8 | 9 | Everything you can do with other types you can do with functions. 10 | 11 | Assign them to variables, pass them around, create them on the fly. 12 | 13 | Function is a special type of object. 14 | 15 | Attach properties and method to a function because it is an object. 16 | 17 | Primitive 18 | Object 19 | Function 20 | 21 | Name (can be optional, anonymous) 22 | Code => actual lines of code that you wrote 23 | 24 | During creation phase, the function object was put in memory onto global object 25 | Had a name called greet. 26 | Had a code which contains the function body. -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/6 Function Expressions.txt: -------------------------------------------------------------------------------- 1 | Function statements and Expressions: 2 | ==================================== 3 | 4 | Concept of First class functions 5 | 6 | Usage difference: 7 | ================= 8 | 9 | Expression: 10 | unit of code that results in a value. 11 | It doesn't have to save to a variable. 12 | 13 | var b = if(a === 3){} // not a expression..it is a statement 14 | 15 | Function statements: 16 | -------------------- 17 | 18 | greet(); 19 | 20 | /* Function statement */ 21 | 22 | function greet(){ 23 | console.log('hi'); 24 | } 25 | 26 | /*Function Expression*/ 27 | 28 | var anonymousGreet = function(argument) { 29 | // body... 30 | } 31 | 32 | Puts the object into memory and the variable point the anonymousGreet function to the address of the function. 33 | anonymousGreet(); 34 | 35 | Function expression creates an object on the fly. 36 | 37 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/7 By value and by reference.txt: -------------------------------------------------------------------------------- 1 | By value and by reference: 2 | ========================== 3 | 4 | a has an address value of its primitive type. 5 | b=a (points to new address and a copy is made with same value) 6 | 7 | By Value: 8 | ======== 9 | 10 | By copying the value, into 2 separate spots in memory 11 | 12 | By reference: 13 | ============= 14 | 15 | a points to a object 16 | 17 | if we do b = a, then we do b is reference the object. 18 | 19 | All objects interact by reference. 20 | 21 | 22 | Mutate = to change something. 23 | 24 | immutable means it can't be changed. 25 | 26 | All primitives are by value. 27 | 28 | All functions and objects are by reference. -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/8 Objects, Functions and this.txt: -------------------------------------------------------------------------------- 1 | Objects, Functions and this: 2 | ============================ 3 | 4 | Variable Environment 5 | Outer Environment ( Outer Lexical Environment) 6 | this 7 | 8 | Everytime a function is run, it gives us a variable called this. 9 | this points to a different object. 10 | 11 | 12 | Understanding what is happening under the hood. 13 | 14 | 'this' points to global object. 15 | 16 | if 'this' is used inside a function expression or statement.. it refers to the window object 17 | 18 | if 'this' is used inside a method inside the object, it refers to the object it currently resides in. 19 | 20 | Method of an object points to Object. 21 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/9 Arrays.txt: -------------------------------------------------------------------------------- 1 | Arrays: 2 | ========== 3 | 4 | Collection of anything. 5 | 6 | var arr = [ 7 | 1, 8 | false, 9 | { 10 | name:'Tony', 11 | address:'111 Main St.' 12 | }, 13 | function (name) { 14 | var greeting = "hello"; 15 | console.log(greeting + " " +name); 16 | }, 17 | "hello" 18 | ]; 19 | 20 | console.log(arr); 21 | arr[3](arr[2].name); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D11_AutomaticSemicolonInsertion/Finished/app.js: -------------------------------------------------------------------------------- 1 | function getPerson() { 2 | 3 | return { 4 | firstname: 'Tony' 5 | } 6 | 7 | } 8 | 9 | console.log(getPerson()); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D11_AutomaticSemicolonInsertion/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D11_AutomaticSemicolonInsertion/Starter/app.js: -------------------------------------------------------------------------------- 1 | function getPerson() { 2 | return { // reads char by char then add the semi-colon for us. 3 | firstname:'Tony' 4 | } 5 | } 6 | console.log(getPerson()); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D11_AutomaticSemicolonInsertion/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D12_Whitespace/Finished/app.js: -------------------------------------------------------------------------------- 1 | var 2 | // first name of the person 3 | firstname, 4 | 5 | // last name of the person 6 | lastname, 7 | 8 | // the language 9 | // can be 'en' or 'es' 10 | language; 11 | 12 | var person = { 13 | // the first name 14 | firstname: 'John', 15 | 16 | // the last name 17 | // (always required) 18 | lastname: 'Doe' 19 | } 20 | 21 | console.log(person); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D12_Whitespace/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D12_Whitespace/Starter/app.js: -------------------------------------------------------------------------------- 1 | var 2 | // first name of the person 3 | firstname, 4 | 5 | // last name of the person 6 | lastname, 7 | 8 | // the language 9 | // can be 'en' or 'es' 10 | language; 11 | 12 | var person = { 13 | // the first name 14 | firstname: 'John', 15 | 16 | // the last name 17 | // (always required) 18 | lastname: 'Doe' 19 | } 20 | 21 | 22 | console.log(person); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D12_Whitespace/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D14_IIFEs/Finished/app.js: -------------------------------------------------------------------------------- 1 | // function statement 2 | function greet(name) { 3 | console.log('Hello ' + name); 4 | } 5 | greet('John'); 6 | 7 | // using a function expression 8 | var greetFunc = function(name) { 9 | console.log('Hello ' + name); 10 | }; 11 | greetFunc('John'); 12 | 13 | // using an Immediately Invoked Function Expression (IIFE) 14 | var greeting = function(name) { 15 | 16 | return 'Hello ' + name; 17 | 18 | }('John'); 19 | 20 | console.log(greeting); 21 | 22 | // IIFE 23 | var firstname = 'John'; 24 | 25 | (function(name) { 26 | 27 | var greeting = 'Inside IIFE: Hello'; 28 | console.log(greeting + ' ' + name); 29 | 30 | }(firstname)); // IIFE 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D14_IIFEs/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D14_IIFEs/Starter/app.js: -------------------------------------------------------------------------------- 1 | // function statement 2 | function greet(name) { 3 | console.log('Hello ' + name); 4 | } 5 | greet('John'); 6 | 7 | // using a function expression 8 | var greetFunc = function(name) { 9 | console.log('Hello ' + name); 10 | }; 11 | greetFunc('John'); 12 | 13 | // using an Immediately Invoked Function Expression (IIFE) 14 | var greeting = function(name) { 15 | 16 | return 'Hello ' + name; 17 | 18 | }('John'); // invoke and pass the param immediately after creation 19 | 20 | console.log(greeting); 21 | 22 | //IIFE 23 | 24 | var firstname = 'John'; 25 | //cannot be anonymous..thinks it as function statement 26 | 27 | (function (name) { 28 | var greeting = 'Inside IIFE: Hello'; 29 | console.log(greeting + ' ' + name); 30 | }(firstname)); //IIFE -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D14_IIFEs/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D15_IIFEsAndSafeCode/Finished/app.js: -------------------------------------------------------------------------------- 1 | // IIFE 2 | (function(global, name) { 3 | 4 | var greeting = 'Hello'; 5 | global.greeting = 'Hello'; 6 | console.log(greeting + ' ' + name); 7 | 8 | }(window, 'John')); // IIFE 9 | 10 | console.log(greeting); 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D15_IIFEsAndSafeCode/Finished/greet.js: -------------------------------------------------------------------------------- 1 | var greeting = 'Hola'; -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D15_IIFEsAndSafeCode/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D15_IIFEsAndSafeCode/Starter/app.js: -------------------------------------------------------------------------------- 1 | // IIFE 2 | //var firstname = 'John'; 3 | /* greet.js stacks on top of app.js */ 4 | //var greeting = 'Hola!'; is inside greet.js 5 | (function(global,name) { 6 | 7 | var greeting = 'Hello'; // inside its own execution context..not into global 8 | //console.log(greeting); 9 | global.greeting = 'Hello!'; // changed/mutated the value on the global env 10 | // console.log(greeting + ' ' + name); 11 | }(window,'John')); // IIFE // reference to the global object. 12 | console.log(greeting); 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D15_IIFEsAndSafeCode/Starter/greet.js: -------------------------------------------------------------------------------- 1 | var greeting = 'Hola!'; // set it global env -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D15_IIFEsAndSafeCode/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D16_Closures/Finished/app.js: -------------------------------------------------------------------------------- 1 | function greet(whattosay) { 2 | 3 | return function(name) { 4 | console.log(whattosay + ' ' + name); 5 | } 6 | 7 | } 8 | 9 | var sayHi = greet('Hi'); 10 | sayHi('Tony'); 11 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D16_Closures/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D16_Closures/Starter/app.js: -------------------------------------------------------------------------------- 1 | function greet(whattosay) { 2 | 3 | return function(name) { 4 | console.log(whattosay + ' ' + name); 5 | } 6 | 7 | } 8 | 9 | var sayHi = greet('Hi'); 10 | sayHi('Tony'); 11 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D16_Closures/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D16b_ClosuresPart2/Finished/app.js: -------------------------------------------------------------------------------- 1 | function buildFunctions() { 2 | 3 | var arr = []; 4 | 5 | for (var i = 0; i < 3; i++) { 6 | 7 | arr.push( 8 | function() { 9 | console.log(i); 10 | } 11 | ) 12 | 13 | } 14 | 15 | return arr; 16 | } 17 | 18 | var fs = buildFunctions(); 19 | 20 | fs[0](); 21 | fs[1](); 22 | fs[2](); 23 | 24 | function buildFunctions2() { 25 | 26 | var arr = []; 27 | 28 | for (var i = 0; i < 3; i++) { 29 | arr.push( 30 | (function(j) { 31 | return function() { 32 | console.log(j); 33 | } 34 | }(i)) 35 | ) 36 | 37 | } 38 | 39 | return arr; 40 | } 41 | 42 | var fs2 = buildFunctions2(); 43 | 44 | fs2[0](); 45 | fs2[1](); 46 | fs2[2](); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D16b_ClosuresPart2/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D16b_ClosuresPart2/Starter/app.js: -------------------------------------------------------------------------------- 1 | function buildFunctions() { 2 | var arr = []; 3 | for(var i=0; i<3;i++){ 4 | arr.push( 5 | function(){ 6 | console.log(i); 7 | } 8 | ); 9 | } 10 | return arr; 11 | } 12 | var fs = buildFunctions(); 13 | 14 | fs[0](); 15 | fs[1](); 16 | fs[2](); 17 | /* 18 | Registers the function in global execution context 19 | contains buildFunctions and fs 20 | i, arr[f0,f1,f2] 21 | 22 | i loops through and add 3 function during loop execution. 23 | i incremented to 3 in global env. 24 | buildFunctions execution context is poped of the stack. 25 | 26 | code properties are still in memory. 27 | 28 | fs[0]() runs and creates a new execution context and then references to the outer env and logs i value to 3 29 | Next function also references to the same spot in memory and have all have the same i values. 30 | 31 | 3 children and how old their father is. 32 | */ 33 | 34 | function buildFunctions2() { 35 | var arr = []; 36 | for(var i=0; i<3;i++){ 37 | arr.push( 38 | (function(j){ // IIFE 39 | return function(){ 40 | console.log(i); 41 | } 42 | }(i)) 43 | ); 44 | } 45 | return arr; 46 | } 47 | var fs2 = buildFunctions2(); 48 | 49 | fs2[0](); 50 | fs2[1](); 51 | fs2[2](); 52 | 53 | /* 54 | Pushing the result of the function 55 | When the function is executed its gives us a return function 56 | Then the return function is executed. 57 | j stores value of each i during each execution 58 | */ -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D16b_ClosuresPart2/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D17_FunctionFactories/Closures and Factories.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Section 4/3 Objects and Functions/Code Samples/D17_FunctionFactories/Closures and Factories.png -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D17_FunctionFactories/Finished/app.js: -------------------------------------------------------------------------------- 1 | function makeGreeting(language) { 2 | 3 | return function(firstname, lastname) { 4 | 5 | if (language === 'en') { 6 | console.log('Hello ' + firstname + ' ' + lastname); 7 | } 8 | 9 | if (language === 'es') { 10 | console.log('Hola ' + firstname + ' ' + lastname); 11 | } 12 | 13 | } 14 | 15 | } 16 | 17 | var greetEnglish = makeGreeting('en'); 18 | var greetSpanish = makeGreeting('es'); 19 | 20 | greetEnglish('John', 'Doe'); 21 | greetSpanish('John', 'Doe'); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D17_FunctionFactories/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D17_FunctionFactories/Starter/app.js: -------------------------------------------------------------------------------- 1 | function makeGreeting(language){ 2 | return function(firstname,lastname){ 3 | if(language === 'en'){ 4 | console.log('Hello'+ ' '+ firstname + ' ' +lastname); 5 | } 6 | if(language === 'es'){ 7 | console.log('Hello'+' '+ firstname + ' ' +lastname); 8 | } 9 | } 10 | } 11 | 12 | var greetEnglish = makeGreeting('en'); // own execution context above global 13 | var greetSpanish = makeGreeting('es'); // own execution context above global 14 | 15 | greetEnglish('John', 'Doe'); 16 | greetSpanish('Tony', 'Alicea'); 17 | 18 | /* 19 | Function Factory: 20 | ================ 21 | 22 | Global execution context has greetSpanish, greetEnglish, makeGreeting() 23 | 24 | makeGreeting() has own execution context and has language 'en' 25 | 26 | Return a function that points to en has language is en is still in memory. 27 | 28 | makeGreeting() has own execution context and has language 'en' 29 | 30 | when greetEnglish('John', 'Doe'); is called, again a new execution context is created and language 'en' is referenced to that function. 31 | 32 | This concept is called a closure. 33 | 34 | when greetEnglish('John', 'Doe'); is called, again a new execution context is created and language 'es' in memory is referenced to that function. 35 | 36 | */ -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D17_FunctionFactories/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D18_ClosuresAndCallbacks/Finished/app.js: -------------------------------------------------------------------------------- 1 | function sayHiLater() { 2 | 3 | var greeting = 'Hi!'; 4 | 5 | setTimeout(function() { 6 | 7 | console.log(greeting); 8 | 9 | }, 3000); 10 | 11 | } 12 | 13 | sayHiLater(); 14 | 15 | // jQuery uses function expressions and first-class functions! 16 | //$("button").click(function() { 17 | // 18 | //}); 19 | 20 | function tellMeWhenDone(callback) { 21 | 22 | var a = 1000; // some work 23 | var b = 2000; // some work 24 | 25 | callback(); // the 'callback', it runs the function I give it! 26 | 27 | } 28 | 29 | tellMeWhenDone(function() { 30 | 31 | console.log('I am done!'); 32 | 33 | }); 34 | 35 | tellMeWhenDone(function() { 36 | 37 | console.log('All done...'); 38 | 39 | }); 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D18_ClosuresAndCallbacks/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D18_ClosuresAndCallbacks/Starter/app.js: -------------------------------------------------------------------------------- 1 | function sayHiLater(){ 2 | var greeting = 'Hi'; 3 | /* Wait for 3 secs and after that run it*/ 4 | /*Take this function and done working execute it*/ 5 | /*Callback function*/ 6 | setTimeout(function(){ 7 | console.log(greeting); 8 | },2000); 9 | } 10 | 11 | sayHiLater(); 12 | 13 | /* Function expressions and first class functions */ 14 | /*$("button").click(function(){ 15 | 16 | }); */ 17 | 18 | 19 | function tellMeWhenDone(callback){ 20 | var a = 1000; // some work 21 | var b = 2000; // some work 22 | alert('hello'); 23 | callback(); 24 | } 25 | 26 | tellMeWhenDone(function(){ 27 | alert('Im done!'); 28 | }); 29 | tellMeWhenDone(function(){ 30 | alert('All done!'); 31 | }); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D18_ClosuresAndCallbacks/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D19_CallApplyBind/Finished/app.js: -------------------------------------------------------------------------------- 1 | var person = { 2 | firstname: 'John', 3 | lastname: 'Doe', 4 | getFullName: function() { 5 | 6 | var fullname = this.firstname + ' ' + this.lastname; 7 | return fullname; 8 | 9 | } 10 | } 11 | 12 | var logName = function(lang1, lang2) { 13 | 14 | console.log('Logged: ' + this.getFullName()); 15 | console.log('Arguments: ' + lang1 + ' ' + lang2); 16 | console.log('-----------'); 17 | 18 | } 19 | 20 | var logPersonName = logName.bind(person); 21 | logPersonName('en'); 22 | 23 | logName.call(person, 'en', 'es'); 24 | logName.apply(person, ['en', 'es']); 25 | 26 | (function(lang1, lang2) { 27 | 28 | console.log('Logged: ' + this.getFullName()); 29 | console.log('Arguments: ' + lang1 + ' ' + lang2); 30 | console.log('-----------'); 31 | 32 | }).apply(person, ['es', 'en']); 33 | 34 | // function borrowing 35 | var person2 = { 36 | firstname: 'Jane', 37 | lastname: 'Doe' 38 | } 39 | 40 | console.log(person.getFullName.apply(person2)); 41 | 42 | // function currying 43 | function multiply(a, b) { 44 | return a*b; 45 | } 46 | 47 | var multipleByTwo = multiply.bind(this, 2); 48 | console.log(multipleByTwo(4)); 49 | 50 | var multipleByThree = multiply.bind(this, 3); 51 | console.log(multipleByThree(4)); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D19_CallApplyBind/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D19_CallApplyBind/Starter/app.js: -------------------------------------------------------------------------------- 1 | /* this inside functions point to the object itself */ 2 | 3 | var person = { 4 | firstname:'John', 5 | lastname:'Doe', 6 | getFullname:function(){ 7 | var fullname = this.firstname + this.lastname; 8 | return fullname; 9 | } 10 | }; 11 | 12 | var logName = function (lang1,lang2) { 13 | console.log('Logged '+ this.getFullname()); // error Uncaught TypeError: this.getFullname is not a function 14 | console.log('Arguments ' + lang1 + ' ' + lang2); 15 | console.log('----------'); 16 | } 17 | // .bind(person); 18 | // Function expression 19 | var logPersonName = logName.bind(person); 20 | 21 | //Attach the person object to the logName function by creating a new copy. 22 | 23 | // whatever object we want the 'this' to point to. 24 | 25 | /*creates a copy of the logName function and sets it up to the object. */ 26 | logPersonName('en'); 27 | 28 | /* this here points to global object */ 29 | 30 | logName.call(person,'en','es'); // let you control what this means. 31 | 32 | logName.apply(person,['en','es']); // apply takes array of parameters. 33 | 34 | (function (lang1,lang2) { 35 | console.log('Loggeds '+ this.getFullname()); // error Uncaught TypeError: this.getFullname is not a function 36 | console.log('Arguments ' + lang1 + ' ' + lang2); 37 | console.log('----------'); 38 | }).apply(person,['en','es']); 39 | 40 | 41 | 42 | 43 | // function borrowing 44 | 45 | var person2 = { 46 | firstname:'Tony', 47 | lastname:'Alicea', 48 | }; 49 | 50 | console.log(person.getFullname.apply(person2,['en','es'])); 51 | 52 | // borrowing a function, get a function from person 53 | 54 | //function currying 55 | 56 | function multiply(a,b){ 57 | return a* b; 58 | } 59 | 60 | /* First parameter 'a' is set to 2 */ 61 | var multiplication = multiply.bind(this,2); 62 | 63 | // this becomes the second parameter. 64 | console.log(multiplication(4)); 65 | 66 | /* 67 | bind creates a copy of the function and set the this variable 68 | Setup a permanent value for the first param 69 | while calling it, use that param as second param. 70 | */ 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D19_CallApplyBind/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D1_ObjectsAndTheDot/Finished/app.js: -------------------------------------------------------------------------------- 1 | var person = new Object(); 2 | 3 | person["firstname"] = "Tony"; 4 | person["lastname"] = "Alicea"; 5 | 6 | var firstNameProperty = "firstname"; 7 | 8 | console.log(person); 9 | console.log(person[firstNameProperty]); 10 | 11 | console.log(person.firstname); 12 | console.log(person.lastname); 13 | 14 | person.address = new Object(); 15 | person.address.street = "111 Main St."; 16 | person.address.city = "New York"; 17 | person.address.state = "NY"; 18 | 19 | console.log(person.address.street); 20 | console.log(person.address.city); 21 | console.log(person["address"]["state"]); 22 | 23 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D1_ObjectsAndTheDot/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D1_ObjectsAndTheDot/Starter/app.js: -------------------------------------------------------------------------------- 1 | var person = new Object(); 2 | 3 | person["firstname"] = "Tony"; // object gets a reference to the address of the location in memory. 4 | person["lastname"] = "Alicea"; 5 | 6 | var firstNameProperty = "firstname"; 7 | 8 | console.log(person); // Object 9 | console.log(person[firstNameProperty]); // Tony 10 | 11 | console.log(person.firstname); // Tony 12 | console.log(person.lastname); // Alicea 13 | 14 | person.address = new Object(); 15 | 16 | person.address.street = "111 Main St."; 17 | person.address.city = "New York"; 18 | person.address.state = "NY"; 19 | 20 | console.log(person.address.street); 21 | console.log(person.address.city); 22 | console.log(person["address"]["state"]); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D1_ObjectsAndTheDot/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D20_FunctionalProgramming/Finished/app.js: -------------------------------------------------------------------------------- 1 | function mapForEach(arr, fn) { 2 | 3 | var newArr = []; 4 | for (var i=0; i < arr.length; i++) { 5 | newArr.push( 6 | fn(arr[i]) 7 | ) 8 | }; 9 | 10 | return newArr; 11 | } 12 | 13 | var arr1 = [1,2,3]; 14 | console.log(arr1); 15 | 16 | 17 | var arr2 = mapForEach(arr1, function(item) { 18 | return item * 2; 19 | }); 20 | console.log(arr2); 21 | 22 | 23 | var arr3 = mapForEach(arr1, function(item) { 24 | return item > 2; 25 | }); 26 | console.log(arr3); 27 | 28 | 29 | var checkPastLimit = function(limiter, item) { 30 | return item > limiter; 31 | } 32 | var arr4 = mapForEach(arr1, checkPastLimit.bind(this, 1)); 33 | console.log(arr4); 34 | 35 | 36 | var checkPastLimitSimplified = function(limiter) { 37 | return function(limiter, item) { 38 | return item > limiter; 39 | }.bind(this, limiter); 40 | }; 41 | 42 | var arr5 = mapForEach(arr1, checkPastLimitSimplified(1)); 43 | console.log(arr5); 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D20_FunctionalProgramming/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D20_FunctionalProgramming/Starter/app.js: -------------------------------------------------------------------------------- 1 | /*Functional Programming*/ 2 | 3 | function mapForEach(arr,fn){ 4 | var newArr = []; 5 | for(var i=0;i 2; // 1>2 false 2>2 false 3>2 true 24 | }); 25 | console.log(arr3); 26 | 27 | var checkPastLimit = function(limiter,item){ 28 | //alert(item); 29 | return item > limiter; // 1>1 false 2>1 true 3>1 true 30 | } 31 | 32 | var arr4 = mapForEach(arr,checkPastLimit.bind(this,1)); // 1>1 2>1 3>1 33 | console.log(arr4); 34 | 35 | var checkPastLimitSimplified = function(limiter){ 36 | return function(limiter,item){ 37 | return item > limiter; 38 | }.bind(this,limiter) 39 | } 40 | var arr5 = mapForEach(arr,checkPastLimitSimplified(1)); // 1>1 2>1 3>1 41 | console.log(arr5); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D20_FunctionalProgramming/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D20b_FunctionalProgrammingPart2/Finished/app.js: -------------------------------------------------------------------------------- 1 | function mapForEach(arr, fn) { 2 | 3 | var newArr = []; 4 | for (var i=0; i < arr.length; i++) { 5 | newArr.push( 6 | fn(arr[i]) 7 | ) 8 | }; 9 | 10 | return newArr; 11 | } 12 | 13 | var arr1 = [1,2,3]; 14 | console.log(arr1); 15 | 16 | 17 | var arr2 = mapForEach(arr1, function(item) { 18 | return item * 2; 19 | }); 20 | console.log(arr2); 21 | 22 | 23 | var arr3 = mapForEach(arr1, function(item) { 24 | return item > 2; 25 | }); 26 | console.log(arr3); 27 | 28 | 29 | var checkPastLimit = function(limiter, item) { 30 | return item > limiter; 31 | } 32 | var arr4 = mapForEach(arr1, checkPastLimit.bind(this, 1)); 33 | console.log(arr4); 34 | 35 | 36 | var checkPastLimitSimplified = function(limiter) { 37 | return function(limiter, item) { 38 | return item > limiter; 39 | }.bind(this, limiter); 40 | }; 41 | 42 | var arr5 = mapForEach(arr1, checkPastLimitSimplified(1)); 43 | console.log(arr5); 44 | 45 | 46 | // underscore 47 | var arr6 = _.map(arr1, function(item) { return item * 3 }); 48 | console.log(arr6); 49 | 50 | var arr7 = _.filter([2,3,4,5,6,7], function(item) { return item % 2 === 0; }); 51 | console.log(arr7); 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D20b_FunctionalProgrammingPart2/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D20b_FunctionalProgrammingPart2/Starter/app.js: -------------------------------------------------------------------------------- 1 | function mapForEach(arr, fn) { 2 | 3 | var newArr = []; 4 | for (var i=0; i < arr.length; i++) { 5 | newArr.push( 6 | fn(arr[i]) 7 | ) 8 | }; 9 | 10 | return newArr; 11 | } 12 | 13 | var arr1 = [1,2,3]; 14 | console.log(arr1); 15 | 16 | 17 | var arr2 = mapForEach(arr1, function(item) { 18 | return item * 2; 19 | }); 20 | console.log(arr2); 21 | 22 | 23 | var arr3 = mapForEach(arr1, function(item) { 24 | return item > 2; 25 | }); 26 | console.log(arr3); 27 | 28 | 29 | var checkPastLimit = function(limiter, item) { 30 | return item > limiter; 31 | } 32 | var arr4 = mapForEach(arr1, checkPastLimit.bind(this, 1)); 33 | console.log(arr4); 34 | 35 | 36 | var checkPastLimitSimplified = function(limiter) { 37 | return function(limiter, item) { 38 | return item > limiter; 39 | }.bind(this, limiter); 40 | }; 41 | 42 | var arr5 = mapForEach(arr1, checkPastLimitSimplified(1)); 43 | console.log(arr5); 44 | 45 | var arr6 = _.map(arr1,function(item){return item * 3}); 46 | console.log(arr6); 47 | 48 | var arr7 = _.filter([2,3,4,5,6,7],function(item){return item % 2 === 0}); 49 | console.log(arr7); 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D20b_FunctionalProgrammingPart2/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Underscore exmaple 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D2_ObjectLiterals/Finished/app.js: -------------------------------------------------------------------------------- 1 | var Tony = { 2 | firstname: 'Tony', 3 | lastname: 'Alicea', 4 | address: { 5 | street: '111 Main St.', 6 | city: 'New York', 7 | state: 'NY' 8 | } 9 | }; 10 | 11 | function greet(person) { 12 | console.log('Hi ' + person.firstname); 13 | } 14 | 15 | greet(Tony); 16 | 17 | greet({ 18 | firstname: 'Mary', 19 | lastname: 'Doe' 20 | }); 21 | 22 | Tony.address2 = { 23 | street: '333 Second St.' 24 | } 25 | 26 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D2_ObjectLiterals/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D2_ObjectLiterals/Starter/app.js: -------------------------------------------------------------------------------- 1 | var Tony = { 2 | firstname: 'Tony', 3 | lastname: 'Alicea', 4 | address: { 5 | street: '111 Main St.', 6 | city: 'New York', 7 | state: 'NY' 8 | } 9 | }; // Object Literal 10 | 11 | function greet(person) { // object is passed as an argument 12 | console.log('Hi ' + person.firstname); 13 | } 14 | 15 | greet(Tony); 16 | 17 | greet({ 18 | firstname: 'Mary', 19 | lastname: 'Doe' 20 | }); 21 | 22 | Tony.address2 = { 23 | street: '333 Second St.' 24 | } 25 | 26 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D2_ObjectLiterals/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Object Literals 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D3_FakingNamespaces/Finished/app.js: -------------------------------------------------------------------------------- 1 | var greet = 'Hello!'; 2 | var greet = 'Hola!'; 3 | 4 | console.log(greet); 5 | 6 | var english = { 7 | greetings: { 8 | basic: 'Hello!' 9 | } 10 | }; 11 | 12 | var spanish = {}; 13 | 14 | spanish.greet = 'Hola!'; 15 | 16 | console.log(english); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D3_FakingNamespaces/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D3_FakingNamespaces/Starter/app.js: -------------------------------------------------------------------------------- 1 | var greet = 'Hello!'; // 1st page 2 | var greet = 'Hola!'; // 2nd page 3 | 4 | console.log(greet); 5 | 6 | var english = { 7 | greetings:{ 8 | basic:'Hello' 9 | } 10 | }; 11 | var spanish = {}; 12 | 13 | //They don't collide each other 14 | english.greet = 'Hello'; 15 | spanish.greet = 'Hola!'; 16 | console.log(english); 17 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D3_FakingNamespaces/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D4_JSON/Finished/app.js: -------------------------------------------------------------------------------- 1 | var objectLiteral = { 2 | firstname: 'Mary', 3 | isAProgrammer: true 4 | } 5 | 6 | console.log(JSON.stringify(objectLiteral)); // JSON FORM 7 | 8 | var jsonValue = JSON.parse('{ "firstname": "Mary", "isAProgrammer": true }'); 9 | 10 | console.log(jsonValue); // JS Object Form 11 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D4_JSON/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D4_JSON/Starter/app.js: -------------------------------------------------------------------------------- 1 | var objectLiteral = { 2 | firstname: 'Mary', 3 | isAProgrammer: true 4 | } 5 | 6 | console.log(JSON.stringify(objectLiteral)); 7 | 8 | var jsonValue = JSON.parse('{"firstname":"Mary","isAProgrammer":true}'); 9 | 10 | console.log(jsonValue); 11 | 12 | // Valid Object Literal Syntax 13 | // { 14 | // "firstname":'Mary', 15 | // "isAProgrammer":true 16 | // } -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D4_JSON/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D5_FunctionsAreObjects/Finished/app.js: -------------------------------------------------------------------------------- 1 | function greet() { 2 | console.log('hi'); 3 | } 4 | 5 | greet.language = 'english'; 6 | console.log(greet.language); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D5_FunctionsAreObjects/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D5_FunctionsAreObjects/Starter/app.js: -------------------------------------------------------------------------------- 1 | function greet() { 2 | console.log('hi'); 3 | } 4 | 5 | greet.language = 'hi'; 6 | console.log(greet.language); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D5_FunctionsAreObjects/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D6_FunctionExpressions/Finished/app.js: -------------------------------------------------------------------------------- 1 | greet(); 2 | 3 | function greet() { 4 | console.log('hi'); 5 | } 6 | 7 | var anonymousGreet = function() { 8 | console.log('hi'); 9 | } 10 | 11 | anonymousGreet(); 12 | 13 | function log(a) { 14 | a(); 15 | } 16 | 17 | log(function() { 18 | console.log('hi'); 19 | }); 20 | 21 | 22 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D6_FunctionExpressions/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D6_FunctionExpressions/Starter/app.js: -------------------------------------------------------------------------------- 1 | greet(); 2 | /* Function statement */ 3 | function greet(){ 4 | console.log('hi'); 5 | } 6 | //anonymousGreet(); // results in undefined 7 | 8 | /* Function Expression 9 | can be called only after declaration 10 | */ 11 | 12 | var anonymousGreet = function() { // since the variable is defined after the code is invoked. 13 | console.log('hi'); 14 | } 15 | anonymousGreet(); 16 | /*Puts the object into memory and the variale point the anonymousGreet function to the address of the function.*/ 17 | 18 | function log(a){ 19 | console.log(a); 20 | } 21 | 22 | /*creating object on the fly. First class functions*/ 23 | /*calling log and passing the function */ 24 | /*Passing a function as parameter to other functions */ 25 | log(function(){ 26 | console.log('Hi'); 27 | }); 28 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D6_FunctionExpressions/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D6b_ByValueByReference/Finished/app.js: -------------------------------------------------------------------------------- 1 | // by value (primitives) 2 | var a = 3; 3 | var b; 4 | 5 | b = a; 6 | a = 2; 7 | 8 | console.log(a); 9 | console.log(b); 10 | 11 | // by reference (all objects (including functions)) 12 | var c = { greeting: 'hi' }; 13 | var d; 14 | 15 | d = c; 16 | c.greeting = 'hello'; // mutate 17 | 18 | console.log(c); 19 | console.log(d); 20 | 21 | // by reference (even as parameters) 22 | function changeGreeting(obj) { 23 | obj.greeting = 'Hola'; // mutate 24 | } 25 | 26 | changeGreeting(d); 27 | console.log(c); 28 | console.log(d); 29 | 30 | // equals operator sets up new memory space (new address) 31 | c = { greeting: 'howdy' }; 32 | console.log(c); 33 | console.log(d); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D6b_ByValueByReference/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D6b_ByValueByReference/Starter/app.js: -------------------------------------------------------------------------------- 1 | // By value (primitives) 2 | 3 | var a = 3; 4 | var b; 5 | /* Creates new spot in memory 6 | Copies that value from a to b 7 | a = 3, b = 3 8 | */ 9 | b=a; // by value 10 | a = 2; 11 | console.log(a); //2 12 | console.log(b); //3 13 | 14 | //by reference( all object (including functions)) 15 | 16 | var c = {greeting:'hi'}; 17 | var d; 18 | d = c; 19 | c.greeting = 'hello'; //mutate 20 | console.log(c); 21 | console.log(d); // if c changes d also changes! 22 | /* They point to the same address */ 23 | 24 | /// by reference (even as parameters) 25 | function changeGreeting(obj){ 26 | obj.greeting = 'Hola'; // mutation 27 | } 28 | changeGreeting(d); // d is pass to obj 29 | console.log(c); // Hola 30 | console.log(d); // Hola 31 | 32 | //equals operator sets up new memory space(new address) 33 | c = {greeting:'howdy'}; 34 | console.log(c); // howdy 35 | console.log(d); // hola 36 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D6b_ByValueByReference/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Objects,functions and this 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D7_ObjectFunctionsAndThis/Finished/app.js: -------------------------------------------------------------------------------- 1 | function a() { 2 | console.log(this); 3 | this.newvariable = 'hello'; 4 | } 5 | 6 | var b = function() { 7 | console.log(this); 8 | } 9 | 10 | a(); 11 | 12 | console.log(newvariable); // not good! 13 | 14 | b(); 15 | 16 | var c = { 17 | name: 'The c object', 18 | log: function() { 19 | var self = this; 20 | 21 | self.name = 'Updated c object'; 22 | console.log(self); 23 | 24 | var setname = function(newname) { 25 | self.name = newname; 26 | } 27 | setname('Updated again! The c object'); 28 | console.log(self); 29 | } 30 | }; 31 | 32 | c.log(); 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D7_ObjectFunctionsAndThis/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D7_ObjectFunctionsAndThis/Starter/app.js: -------------------------------------------------------------------------------- 1 | //console.log(this); // in browser this points to window object. 2 | 3 | function a(){ 4 | console.log(this); 5 | this.newvar = 'hello'; // assign newvar to gloal object 6 | 7 | } //a();// this also points to window object 8 | 9 | var b = function(){ 10 | console.log(this); 11 | } 12 | 13 | a(); 14 | console.log(newvar); 15 | b(); 16 | //create a method inside object literal 17 | var c ={ 18 | name:'The c object', 19 | log: function () { 20 | var self = this; // points to the whole object. 21 | self.name = 'update c object'; // mutate or change it 22 | console.log(self); // this here refers to the object that method is sitting inside of. 23 | 24 | var setname = function(newname){ 25 | 26 | self.name = newname; // points to the self in the global object. Looks for the outer env 27 | /*Mutates the global object this.name to param value*/ 28 | }; 29 | setname('updated again'); 30 | console.log(self); 31 | } 32 | }; 33 | c.log(); 34 | 35 | 36 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D7_ObjectFunctionsAndThis/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D7b_ArraysCollectionsOfAnything/Finished/app.js: -------------------------------------------------------------------------------- 1 | var arr = [ 2 | 1, 3 | false, 4 | { 5 | name: 'Tony', 6 | address: '111 Main St.' 7 | }, 8 | function(name) { 9 | var greeting = 'Hello '; 10 | console.log(greeting + name); 11 | }, 12 | "hello" 13 | ]; 14 | 15 | console.log(arr); 16 | arr[3](arr[2].name); 17 | 18 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D7b_ArraysCollectionsOfAnything/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D7b_ArraysCollectionsOfAnything/Starter/app.js: -------------------------------------------------------------------------------- 1 | var arr = [ 2 | 1, 3 | false, 4 | { 5 | name:'Tony', 6 | address:'111 Main St.' 7 | }, 8 | function (name) { 9 | var greeting = "hello"; 10 | console.log(greeting + " " +name); 11 | }, 12 | "hello" 13 | ]; 14 | 15 | console.log(arr); 16 | arr[3](arr[2].name); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D7b_ArraysCollectionsOfAnything/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D8_Arguments/Finished/app.js: -------------------------------------------------------------------------------- 1 | function greet(firstname, lastname, language) { 2 | 3 | language = language || 'en'; 4 | 5 | if (arguments.length === 0) { 6 | console.log('Missing parameters!'); 7 | console.log('-------------'); 8 | return; 9 | } 10 | 11 | console.log(firstname); 12 | console.log(lastname); 13 | console.log(language); 14 | console.log(arguments); 15 | console.log('arg 0: ' + arguments[0]); 16 | console.log('-------------'); 17 | 18 | } 19 | 20 | greet(); 21 | greet('John'); 22 | greet('John', 'Doe'); 23 | greet('John', 'Doe', 'es'); 24 | 25 | // in ES6 I can do: function greet(firstname, ...other) 26 | // and 'other' will be an array that contains the rest of the arguments 27 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D8_Arguments/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D8_Arguments/Starter/app.js: -------------------------------------------------------------------------------- 1 | function greet(firstname,lastname,language) { // setup default parameters using new version of JS 2 | //language = language || 'en'; // older model of assigning values to 3 | if(arguments.length === 0){ 4 | console.log('Missing parameters'); 5 | console.log('============='); 6 | return; 7 | } 8 | console.log(firstname); 9 | console.log(lastname); 10 | console.log(language); 11 | console.log(arguments); // List of all parameters that we passed is logged. 12 | console.log(arguments[0]); 13 | console.log('============='); 14 | } 15 | /* Hoists memmory space for firstname, lastname and language */ 16 | greet(); 17 | greet('Narayanan'); 18 | greet('Narayanan','Ts'); 19 | greet('Narayanan','Ts','English'); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D8_Arguments/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D9_FunctionOverloading/Finished/app.js: -------------------------------------------------------------------------------- 1 | function greet(firstname, lastname, language) { 2 | 3 | language = language || 'en'; 4 | 5 | if (language === 'en') { 6 | console.log('Hello ' + firstname + ' ' + lastname); 7 | } 8 | 9 | if (language === 'es') { 10 | console.log('Hola ' + firstname + ' ' + lastname); 11 | } 12 | 13 | } 14 | 15 | function greetEnglish(firstname, lastname) { 16 | greet(firstname, lastname, 'en'); 17 | } 18 | 19 | function greetSpanish(firstname, lastname) { 20 | greet(firstname, lastname, 'es'); 21 | } 22 | 23 | greetEnglish('John', 'Doe'); 24 | greetSpanish('John', 'Doe'); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D9_FunctionOverloading/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D9_FunctionOverloading/Starter/app.js: -------------------------------------------------------------------------------- 1 | function greet(firstname, lastname, language) { 2 | language = language || 'en'; 3 | if(language === 'en'){ 4 | console.log('Hello ' + firstname+' '+lastname); 5 | } 6 | if(language === 'es'){ 7 | console.log('Hello ' + firstname+' '+lastname); 8 | } 9 | } 10 | 11 | function greetEnglish(firstname,lastname){ 12 | greet(firstname,lastname,'en'); 13 | } 14 | function greetSpanish(firstname,lastname){ 15 | greet(firstname,lastname,'es'); 16 | } 17 | 18 | greetEnglish('John','Doe'); 19 | greetSpanish('John','Doe'); -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Code Samples/D9_FunctionOverloading/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 4/3 Objects and Functions/Tryouts/Objects_and_functions.js: -------------------------------------------------------------------------------- 1 | var person = new Object(); 2 | 3 | person['firstname'] = 'Narayanan'; 4 | person['lastname'] = 'Ts'; 5 | 6 | var firstnameProperty = 'Narayanan'; 7 | 8 | console.log(person); 9 | console.log(person[firstnameProperty]); 10 | -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/1 Classical vs prototypical inheritance.txt: -------------------------------------------------------------------------------- 1 | Classical vs Prototypical inheritance: 2 | ====================================== 3 | 4 | Classical vs Prototypical: 5 | ========================== 6 | 7 | Inheritance: 8 | ============ 9 | 10 | * One object gets access to properties and methods of other objects. 11 | * Different from other programming langauges. 12 | 13 | 14 | Classical Inheritance: 15 | ====================== 16 | 17 | Currently known and best popular. 18 | Verbose. 19 | Generally used across programming languages. 20 | 21 | Prototypical Inheritance: 22 | ======================== 23 | 24 | Very flexible. 25 | Extensible. 26 | easy to understand. 27 | 28 | obj in memory. (accessed using member access operator) 29 | ====================================================== 30 | * properties 31 | * methods 32 | 33 | JS objects add hidden properties and methods. 34 | 35 | All objects and functions have a prototype property. 36 | property is a reference to another object called '__proto__'. 37 | 38 | obj.prop2 39 | 40 | . operator looks for prop2 in obj doesn't find it and look at prototype. 41 | 42 | It finds and returns it. 43 | 44 | Down the prototype chain. 45 | 46 | OBJECTS CAN SHARE PROTOTYPE AMONG THEM. 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/3 Everything is an object.txt: -------------------------------------------------------------------------------- 1 | Everything is an object: 2 | ======================== 3 | 4 | var a= {}; 5 | var b = function(){}; 6 | var c =[]; 7 | 8 | a.__proto__ (toString()) 9 | b.__proto__ (call(),apply(),bind()) 10 | c.__proto__ (pop,push,indexOf) 11 | 12 | -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/4 Reflection and extend.txt: -------------------------------------------------------------------------------- 1 | Reflection and extends: 2 | ===================== 3 | 4 | extends: 5 | ======== 6 | 7 | An object can look at itself listing and changing it properties and methods. -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/Code Samples/E2_UnderstandingThePrototype/Finished/app.js: -------------------------------------------------------------------------------- 1 | var person = { 2 | firstname: 'Default', 3 | lastname: 'Default', 4 | getFullName: function() { 5 | return this.firstname + ' ' + this.lastname; 6 | } 7 | } 8 | 9 | var john = { 10 | firstname: 'John', 11 | lastname: 'Doe' 12 | } 13 | 14 | // don't do this EVER! for demo purposes only!!! 15 | john.__proto__ = person; 16 | console.log(john.getFullName()); 17 | console.log(john.firstname); 18 | 19 | var jane = { 20 | firstname: 'Jane' 21 | } 22 | 23 | jane.__proto__ = person; 24 | console.log(jane.getFullName()); 25 | 26 | person.getFormalFullName = function() { 27 | return this.lastname + ', ' + this.firstname; 28 | } 29 | 30 | console.log(john.getFormalFullName()); 31 | console.log(jane.getFormalFullName()); -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/Code Samples/E2_UnderstandingThePrototype/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/Code Samples/E2_UnderstandingThePrototype/Starter/app.js: -------------------------------------------------------------------------------- 1 | /* Class Object that other objects inherits from */ 2 | 3 | var person = { 4 | firstname: 'Default', 5 | lastname: 'Default', 6 | getFullName: function() { 7 | return this.firstname + ' ' + this.lastname; 8 | } 9 | }; 10 | /* Prototypal Object that inherits from class object */ 11 | var john = { 12 | firstname: 'John', 13 | lastname: 'Doe' // ooks here for getFullName and doesn't find it and goes and gets it from person. 14 | }; 15 | 16 | // don't do this.. demo purposes only. 17 | /*John inherits from person */ 18 | 19 | john.__proto__ = person; 20 | console.log(john.getFullName()); // this here refers to the john object because it's the one called. 21 | console.log(john.firstname); 22 | 23 | /* first looks at john and if it finds it stops */ 24 | 25 | var jane = { 26 | firstname : 'Jane' 27 | }; 28 | 29 | jane.__proto__ = person; // points to the same object in person. 30 | console.log(jane.getFullName()); // when we access getFullName() looks for it in person but lastname is results to Default. 31 | person.getFormalFullName = function(){ 32 | return this.lastname + ' ' + this.firstname; 33 | } 34 | console.log(john.getFormalFullName()); 35 | console.log(jane.getFormalFullName()); -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/Code Samples/E2_UnderstandingThePrototype/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/Code Samples/E4_ReflectionAndExtend/Finished/app.js: -------------------------------------------------------------------------------- 1 | var person = { 2 | firstname: 'Default', 3 | lastname: 'Default', 4 | getFullName: function() { 5 | return this.firstname + ' ' + this.lastname; 6 | } 7 | } 8 | 9 | var john = { 10 | firstname: 'John', 11 | lastname: 'Doe' 12 | } 13 | 14 | // don't do this EVER! for demo purposes only!!! 15 | john.__proto__ = person; 16 | 17 | for (var prop in john) { 18 | if (john.hasOwnProperty(prop)) { 19 | console.log(prop + ': ' + john[prop]); 20 | } 21 | } 22 | 23 | var jane = { 24 | address: '111 Main St.', 25 | getFormalFullName: function() { 26 | return this.lastname + ', ' + this.firstname; 27 | } 28 | } 29 | 30 | var jim = { 31 | getFirstName: function() { 32 | return firstname; 33 | } 34 | } 35 | 36 | _.extend(john, jane, jim); 37 | 38 | console.log(john); 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/Code Samples/E4_ReflectionAndExtend/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/Code Samples/E4_ReflectionAndExtend/Starter/app.js: -------------------------------------------------------------------------------- 1 | var person = { 2 | firstname: 'Naryaanan', 3 | lastname:'Ts', 4 | getFullName: function(){ 5 | var fullname = this.firstname + ' ' + this.lastname; 6 | } 7 | }; 8 | 9 | 10 | var john = { 11 | firstname:'John', 12 | lastname:'Doe' 13 | }; 14 | 15 | john.__proto__ = person; 16 | 17 | for(var prop in john){ 18 | if(john.hasOwnProperty('firstname')){ 19 | //console.log(prop + ':' + john[prop]); 20 | } 21 | } 22 | 23 | var jane = { 24 | address: '111 Main st.', 25 | getFormalFullName:function(){ 26 | return this.lastname + ', ' + this.firstname; 27 | } 28 | }; 29 | 30 | var jim = { 31 | getFirstName: function() { 32 | return firstname; 33 | } 34 | } 35 | 36 | _.extend(john, jane, jim); // combines all properites and methods and add them to john. 37 | 38 | console.log(john); 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/Code Samples/E4_ReflectionAndExtend/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/Code Samples/everything_is_an_object.js: -------------------------------------------------------------------------------- 1 | var a = {}; // All objects have prototype. 2 | var b = function(){}; // bind, call and apply 3 | var c = []; // All arrays have prototype 4 | 5 | /* 6 | Object {} is the bottom of the prototype chain 7 | */ 8 | 9 | a.__proto__ 10 | b.__proto__ // has call() apply() bind() 11 | c.__proto__ // push, indexOf,pop 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/Code Samples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/Code Samples/tryout_proto.js: -------------------------------------------------------------------------------- 1 | var person = { 2 | firstname:'Narayanan', 3 | lastname:'Ts', 4 | getFullName:function(){ 5 | var fullname = this.firstname + ' ' + this.lastname; 6 | return fullname; 7 | } 8 | } 9 | 10 | var john = { 11 | firstname:'John', 12 | lastname:' Doe' 13 | } 14 | 15 | john.__proto__ = person; 16 | 17 | console.log(john.getFullName()); 18 | person.getReverseName = function(){ 19 | var reverse = this.lastname + ' ' + this.firstname; 20 | return reverse; 21 | } 22 | 23 | console.log(john.getReverseName()); 24 | 25 | var jane = { 26 | lastname:'Doe' 27 | } 28 | 29 | jane.__proto__ = person; 30 | 31 | console.log(jane.getReverseName()); -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/Images/Prototypal Chains.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/Images/Prototypal Chains.png -------------------------------------------------------------------------------- /Section 5/4 Object-Oriented Javascript and Prototypal Inheritance/prototypal.js: -------------------------------------------------------------------------------- 1 | var person ={ 2 | firstname:'Naryanana', 3 | lastname:'Ts' 4 | getFullName:function(){ 5 | return function(){ 6 | return this.firstname + ' ' + this.lastname; 7 | } 8 | } 9 | }; 10 | 11 | var john = { 12 | firstname:'John', 13 | lastname: 'Doe' 14 | }; 15 | 16 | // dont do this ever! Demo purposes only. 17 | 18 | john.__proto__ = person; // john inherits from person. 19 | console.log(john.getFullName()); -------------------------------------------------------------------------------- /Section 6/Building Objects/1 Building Objects.txt: -------------------------------------------------------------------------------- 1 | Building Objects: 2 | ================== 3 | 4 | Function constructors, 'new' and the history of JS 5 | ================================================== 6 | 7 | JS was built by Brenden Hike. 8 | 9 | called Javascript to call JAVA developers. 10 | 11 | Netscape. 12 | Microsoft. 13 | Oracle and Sun Microsystems. 14 | ECMAScript. 15 | 16 | var john = new Person(); 17 | 18 | * Java developers used to create objects using the 'new' keyword. 19 | 20 | * Class in java is not an object but defined it. 21 | 22 | * use new to create a new object from that class. 23 | 24 | * Class in Java is not the same as in JS. 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Section 6/Building Objects/2 Function Constructors.txt: -------------------------------------------------------------------------------- 1 | Function constructors: 2 | ====================== 3 | 4 | Right way to create objects in JS. 5 | 6 | 'new' is an operator. 7 | 8 | when we use 'new', immediately an empty object is created and then it invokes the function. 9 | 10 | Here it changes where this variable points to. 11 | 12 | 'this' points to the empty object. 13 | 14 | As long as function doesn't returns that object that was created by the new variable. 15 | 16 | Function constructors are just functions. 17 | 18 | Function constructors are just normal functions used to construct objects. 19 | ========================================================================== 20 | 21 | The 'this' keyword points to a new empty object, and that object is returned from the function automatically. -------------------------------------------------------------------------------- /Section 6/Building Objects/3 Function Constructors and Prototype.txt: -------------------------------------------------------------------------------- 1 | Function Constructors and Prototype: 2 | ================================== 3 | 4 | How to set Prototype for us? 5 | 6 | When we use a Function constructor, it already sets the Prototype for us. 7 | 8 | Functions is a special type of object. 9 | 10 | Name 11 | Code 12 | 13 | * All functions have prototype property. 14 | 15 | * Starts as an empty object. 16 | 17 | * As soon as a new operator is , then it is called. 18 | 19 | * Available inside the function constructor. 20 | 21 | * __proto__ to get access to the prototype 22 | 23 | * prototype property of the function is NOT the prototype of the function. 24 | 25 | * To create a new prototype for every object created using 'new', we use class_name.prototype.method 26 | 27 | * This is shared among all objects. 28 | 29 | * Instead of creating methods inside the function, which is created everytime a new object is created using 'new' operator.. we set those methods in the prototype so that other object created using 'new' can share the same method without creating it again. 30 | 31 | * saves memory space 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Section 6/Building Objects/4 new and functions.txt: -------------------------------------------------------------------------------- 1 | 'new' and functions 2 | -------------------- 3 | 4 | Function constructors must start with a capital letter. 5 | 6 | 7 | -------------------------------------------------------------------------------- /Section 6/Building Objects/5 Built-in function constructors.txt: -------------------------------------------------------------------------------- 1 | Built-in function constructors: 2 | =============================== 3 | 4 | var a = new Number("3"); 5 | 6 | //Number {[[PrimitiveValue]]: 3} 7 | 8 | Number.prototype 9 | 10 | a.toFixed(2) 11 | 12 | var b = new String(); 13 | 14 | b.charAt(2); 15 | 16 | var d = new Date("3/12/2016"); 17 | 18 | equivalent to 19 | 20 | Date.prototype.functions() 21 | -------------------------------------------------------------------------------- /Section 6/Building Objects/6 Built in function constructors2.txt: -------------------------------------------------------------------------------- 1 | Built-in function constructors: Part 2 2 | ====================================== 3 | 4 | Momentjs for math on dates. 5 | 6 | Never use built in function constructors. -------------------------------------------------------------------------------- /Section 6/Building Objects/7 Arrays and for in .txt: -------------------------------------------------------------------------------- 1 | Arrays and for in: 2 | ================== 3 | 4 | using for..in loop in arrays results in getting the index as name in name/value pairs. 5 | 6 | Never use for in for Arrays. -------------------------------------------------------------------------------- /Section 6/Building Objects/8 Object create and pure prototypal.txt: -------------------------------------------------------------------------------- 1 | Object.create and pure prototypal: 2 | ================================== 3 | 4 | JS also uses pure prototypal inheritance. 5 | 6 | Object.create() 7 | 8 | Building the same things differently. 9 | 10 | 11 | If we make a object using Object.create(). 12 | 13 | override properties and methods on those object. 14 | 15 | Base object properties and methods side inside prototype of the derived object. 16 | 17 | 18 | Polyfill: 19 | ========= 20 | 21 | Code that adds a feature that the JS engine may lack. 22 | 23 | Adding new feature that older JS engine may not have. 24 | 25 | Object.create(): 26 | ================ 27 | 28 | create a object and use this object as prototype for other object. 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Section 6/Building Objects/9 ES6 and classes.txt: -------------------------------------------------------------------------------- 1 | ES6 and classes: 2 | ================ 3 | 4 | New concept in ECMAScript 6 has a new concept coming called 'classes'. 5 | 6 | Classes in JS are called 'Syntatic Sugar'. 7 | 8 | Syntatic Sugar: 9 | =============== 10 | 11 | A different way to type something that doesn't change how it works. 12 | 13 | -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F1_FunctionConstructorsNewHistory/Finished/app.js: -------------------------------------------------------------------------------- 1 | function Person(firstname, lastname) { 2 | 3 | console.log(this); 4 | this.firstname = firstname; 5 | this.lastname = lastname; 6 | console.log('This function is invoked.'); 7 | 8 | } 9 | 10 | var john = new Person('John', 'Doe'); 11 | console.log(john); 12 | 13 | var jane = new Person('Jane', 'Doe'); 14 | console.log(jane); -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F1_FunctionConstructorsNewHistory/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F1_FunctionConstructorsNewHistory/Starter/app.js: -------------------------------------------------------------------------------- 1 | function Person(firstname,lastname){ 2 | console.log(this); // empty object initially 3 | this.firstname = firstname; // adding properties = parameters 4 | this.lastname = lastname; // adding properties = parameters 5 | console.log('Invoked!!'); 6 | //return {greeting:'In the way'}; 7 | /*If we don't return anything , we get access to this*/ 8 | } 9 | 10 | var john = new Person('Chris'); 11 | john.lastname = 'Gayle'; 12 | console.log(john); 13 | var jane = new Person('Jane','Doe'); 14 | console.log(jane); -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F1_FunctionConstructorsNewHistory/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F2_FunctionConstructorsAndPrototype/Finished/app.js: -------------------------------------------------------------------------------- 1 | function Person(firstname, lastname) { 2 | 3 | console.log(this); 4 | this.firstname = firstname; 5 | this.lastname = lastname; 6 | console.log('This function is invoked.'); 7 | 8 | } 9 | 10 | Person.prototype.getFullName = function() { 11 | return this.firstname + ' ' + this.lastname; 12 | } 13 | 14 | var john = new Person('John', 'Doe'); 15 | console.log(john); 16 | 17 | var jane = new Person('Jane', 'Doe'); 18 | console.log(jane); 19 | 20 | Person.prototype.getFormalFullName = function() { 21 | return this.lastname + ', ' + this.firstname; 22 | } 23 | 24 | console.log(john.getFormalFullName()); 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F2_FunctionConstructorsAndPrototype/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F2_FunctionConstructorsAndPrototype/Starter/app.js: -------------------------------------------------------------------------------- 1 | function Person(firstname, lastname) { 2 | 3 | console.log(this); 4 | this.firstname = firstname; 5 | this.lastname = lastname; 6 | console.log('This function is invoked.'); 7 | 8 | } 9 | 10 | Person.prototype.getFullName = function() { 11 | return this.firstname + ' ' + this.lastname; 12 | }; 13 | 14 | /* john objects prototype points to Person.prototype as it prototype(__proto_) */ 15 | var john = new Person('John', 'Doe'); 16 | console.log(john); 17 | 18 | /* when we call the new keyword, it creates an empty object 19 | it then sets the prototype of the empty object tot the prototype function you then call. 20 | */ 21 | 22 | var jane = new Person('Jane', 'Doe'); 23 | console.log(jane); 24 | 25 | /* If we use new operator it creates an empty object and points the this keyword points to that keyowrd 26 | 27 | */ 28 | -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F2_FunctionConstructorsAndPrototype/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F4_BuiltInFunctionConstructors/Finished/app.js: -------------------------------------------------------------------------------- 1 | String.prototype.isLengthGreaterThan = function(limit) { 2 | return this.length > limit; 3 | } 4 | 5 | console.log("John".isLengthGreaterThan(3)); 6 | 7 | Number.prototype.isPositive = function() { 8 | return this > 0; 9 | } -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F4_BuiltInFunctionConstructors/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F4_BuiltInFunctionConstructors/Starter/app.js: -------------------------------------------------------------------------------- 1 | String.prototype.isLengthGreaterThan = function(limit){ 2 | return this.length > limit; 3 | } 4 | console.log('John'.isLengthGreaterThan(3)); 5 | 6 | Number.prototype.isPositive = function(){ 7 | return this > 0; 8 | } 9 | var a = new Number(3); 10 | console.log(a.isPositive()); 11 | 12 | var a = 3; // primitive 13 | var b = new Number(3); // object created by function constructor. 14 | console.log(a==b); 15 | console.log(a===b); 16 | 17 | var d = new Date() -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F4_BuiltInFunctionConstructors/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F5_ObjectCreateAndPrototypal/Finished/app.js: -------------------------------------------------------------------------------- 1 | // polyfill 2 | if (!Object.create) { 3 | Object.create = function (o) { 4 | if (arguments.length > 1) { 5 | throw new Error('Object.create implementation' 6 | + ' only accepts the first parameter.'); 7 | } 8 | function F() {} 9 | F.prototype = o; 10 | return new F(); 11 | }; 12 | } 13 | 14 | var person = { 15 | firstname: 'Default', 16 | lastname: 'Default', 17 | greet: function() { 18 | return 'Hi ' + this.firstname; 19 | } 20 | } 21 | 22 | var john = Object.create(person); 23 | john.firstname = 'John'; 24 | john.lastname = 'Doe'; 25 | console.log(john); -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F5_ObjectCreateAndPrototypal/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F5_ObjectCreateAndPrototypal/Starter/app.js: -------------------------------------------------------------------------------- 1 | // polyfill 2 | if (!Object.create) { 3 | Object.create = function (o) { 4 | if (arguments.length > 1) { 5 | throw new Error('Object.create implementation' 6 | + ' only accepts the first parameter.'); 7 | } 8 | function F() {} 9 | F.prototype = o; 10 | return new F(); 11 | }; 12 | } 13 | 14 | var person = { 15 | firstname:'Default', 16 | lastname:'Default', 17 | greet:function(){ 18 | return 'Hi ' + this.firstname; 19 | } 20 | } 21 | 22 | var john = Object.create(person); 23 | john.firstname = "Tony"; 24 | john.lastname = 'Alicea'; 25 | console.log(john.greet()); 26 | 27 | /* Object.create() points to an empty object and its prototype points to whatever you passed into it as param .*/ 28 | 29 | -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F5_ObjectCreateAndPrototypal/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/F6_ES6andClasses/ES6_and_classes.js: -------------------------------------------------------------------------------- 1 | class Person{ 2 | constructor(firstname,lastname){ 3 | this.firstname = firstname; 4 | this.lastname = lastname; 5 | } 6 | 7 | greet(){ 8 | return 'Hi' + firstname; 9 | } 10 | } 11 | /* class is an object */ 12 | 13 | var john = new Person('John','Doe') 14 | 15 | 16 | /* Extends sets the prototype */ 17 | 18 | class InformalPerson extends Person{ 19 | constructor(firstname,lastname){ 20 | super(firstname,lastname); 21 | } 22 | greet(){ 23 | return 'Yo' + firstname; 24 | } 25 | } -------------------------------------------------------------------------------- /Section 6/Building Objects/Code Samples/arrays_and_for_in.js: -------------------------------------------------------------------------------- 1 | 2 | Array.prototype.myCustomFeature = 'Cool!'; 3 | var arr = ['John','Jane','Doe']; 4 | 5 | for(var prop in arr){ 6 | console.log(prop+ ' :' +arr[prop]); 7 | } 8 | 9 | /* 10 | OUTPUT 11 | ====== 12 | 13 | 0 : John 14 | 1 : Jane 15 | 2 : Doe 16 | */ -------------------------------------------------------------------------------- /Section 7/Odds and Ends/1 Initialization.txt: -------------------------------------------------------------------------------- 1 | Initialization: 2 | =============== 3 | 4 | * Array Literals, Object Literals and functions expressions. 5 | * Watch out for correct comma's and semicolon when using Array and object literals. 6 | -------------------------------------------------------------------------------- /Section 7/Odds and Ends/2 typeof,instanceof and Figuring out what something really is.txt: -------------------------------------------------------------------------------- 1 | typeof,instanceof and Figuring out what something really is: 2 | ============================================================= 3 | 4 | Dynamic typing in JS work 5 | 6 | What if we want to know the type of a variable. 7 | 8 | We use typeof, instanceof 9 | 10 | call() - invoke this function but tell what 'this' should point to. 11 | 12 | 13 | 14 | type of number is number 15 | type of string is string 16 | type of object is object. 17 | type of array is object. 18 | Object.prototype.toString.call() - this returns type as array. 19 | type of object created using 'new' keyword is an object. 20 | type of function statement is an object. 21 | type of Function expression is a function. 22 | type of undefined is undefined. 23 | 24 | instance of new object is the parent object. 25 | 26 | -------------------------------------------------------------------------------- /Section 7/Odds and Ends/3 Strict Mode.txt: -------------------------------------------------------------------------------- 1 | Strict Mode: 2 | ============ 3 | 4 | Tell the JS engine to process the code in a stricter way. 5 | 6 | Implement some extra rules when parsing my code. 7 | 8 | Useful for strict code is that. 9 | 10 | Declare a variable before using it. 11 | 12 | Goes inside either top of the file or top of the function. 13 | 14 | If we have lots of JS files and Minify and combine them 15 | 16 | If the first file has 'use strict' then the whole JS file complies to strict mode of execution. 17 | -------------------------------------------------------------------------------- /Section 7/Odds and Ends/Code Samples/H1_Initialization/Finished/app.js: -------------------------------------------------------------------------------- 1 | var people = [ 2 | { 3 | // the 'john' object 4 | firstname: 'John', 5 | lastname: 'Doe', 6 | addresses: [ 7 | '111 Main St.', 8 | '222 Third St.' 9 | ] 10 | }, 11 | { 12 | // the 'jane' object 13 | firstname: 'Jane', 14 | lastname: 'Doe', 15 | addresses: [ 16 | '333 Main St.', 17 | '444 Fifth St.' 18 | ], 19 | greet: function() { 20 | return 'Hello!'; 21 | } 22 | } 23 | ] 24 | 25 | console.log(people); -------------------------------------------------------------------------------- /Section 7/Odds and Ends/Code Samples/H1_Initialization/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 7/Odds and Ends/Code Samples/H1_Initialization/Starter/app.js: -------------------------------------------------------------------------------- 1 | var people = [ 2 | { 3 | //john object 4 | firstname: 'John', 5 | lastname:'Doe', 6 | addresses:[ 7 | '111 Mian st', 8 | '222 Mian st' 9 | ] 10 | }, 11 | { 12 | //jane object. 13 | firstname: 'Jane', 14 | lastname:'Doe', 15 | addresses:[ 16 | '333 Mian st', 17 | '444 Mian st' 18 | ], 19 | greet:function(){ 20 | return 'Hello'; 21 | } 22 | } 23 | 24 | ]; 25 | console.log(people[1].greet()); 26 | -------------------------------------------------------------------------------- /Section 7/Odds and Ends/Code Samples/H1_Initialization/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 7/Odds and Ends/Code Samples/H2_typeofinstanceof/app.js: -------------------------------------------------------------------------------- 1 | var a = 3; 2 | console.log(typeof a); // number (lowercase n which denotes it a number) 3 | 4 | var b = "Hello"; 5 | console.log(typeof b); // string (lowercase n which denotes it a string) 6 | 7 | var c = {}; 8 | console.log(typeof c); // object (lowercase n which denotes it a object) 9 | 10 | var d = []; 11 | console.log(typeof d); // weird! 12 | console.log(Object.prototype.toString.call(d)); 13 | 14 | function Person(name) { 15 | this.name = name; 16 | } 17 | 18 | var e = new Person('Jane'); 19 | console.log(typeof e);// object 20 | console.log(e instanceof Person); 21 | 22 | console.log(typeof undefined); // makes sense 23 | console.log(typeof null); // a bug since, like, forever... 24 | 25 | var z = function() { }; 26 | console.log(typeof z);// 27 | 28 | -------------------------------------------------------------------------------- /Section 7/Odds and Ends/Code Samples/H2_typeofinstanceof/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 7/Odds and Ends/Code Samples/H3_strictmode/Finished/app.js: -------------------------------------------------------------------------------- 1 | function logNewPerson() { 2 | "use strict"; 3 | 4 | var person2; 5 | persom2 = {}; 6 | console.log(persom2); 7 | } 8 | 9 | var person; 10 | persom = {}; 11 | console.log(persom); 12 | logNewPerson(); -------------------------------------------------------------------------------- /Section 7/Odds and Ends/Code Samples/H3_strictmode/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Section 7/Odds and Ends/Code Samples/H3_strictmode/Starter/app.js: -------------------------------------------------------------------------------- 1 | function logNewPerson(){ 2 | 'use strict'; 3 | 4 | var person2; 5 | persom2 ={}; 6 | console.log(persom2); // error thrown here 7 | } 8 | 9 | var person; // window.person 10 | persom = {}; // window.persom 11 | console.log(persom); // error thrown here 12 | logNewPerson(); // no error here -------------------------------------------------------------------------------- /Section 7/Odds and Ends/Code Samples/H3_strictmode/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Section 8/Examining Famous Frameworks and Libraries/2 Deep dive into jQuery.txt: -------------------------------------------------------------------------------- 1 | Deep dive into jQuery: 2 | ====================== 3 | 4 | jQuery deals with cross-browser issue. 5 | 6 | Manipulate the DOM. 7 | 8 | DOM is the lets the browser to look at HTML and decide to rendering it on the screen. 9 | 10 | 11 | jQuery function isn't a function constructor.. It's just a function 12 | 13 | So no need to use new operator. 14 | 15 | Returns an object by calling the function constructor. 16 | 17 | Function that returns a call to a function constructor. 18 | 19 | fn is pointing to the same memory spot of the jQuery prototype. 20 | 21 | -------------------------------------------------------------------------------- /Section 8/Examining Famous Frameworks and Libraries/3 Deep dive into jQuery Part 2.txt: -------------------------------------------------------------------------------- 1 | Deep dive into jQuery Part 2: 2 | ============================= 3 | 4 | Inside jQuery it has a new library called 'Sizzle JS'. 5 | 6 | Immediately invoked Function execution inside IIFE. 7 | 8 | Method Chaining: 9 | ================ 10 | 11 | calling one method after another each one affects the parent. 12 | so obj.method1() and obj.method2() where both methods end up with 'this' variable pointing at he obj. 13 | 14 | -------------------------------------------------------------------------------- /Section 8/Examining Famous Frameworks and Libraries/Code Samples/I2_DeepDiveJQuery/app.js: -------------------------------------------------------------------------------- 1 | var q = $("ul.people li").addClass("newclass").removeClass("people"); 2 | console.log(q); -------------------------------------------------------------------------------- /Section 8/Examining Famous Frameworks and Libraries/Code Samples/I2_DeepDiveJQuery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |

People

8 |
    9 |
  • John Doe
    • 10 |
  • Jane Doe
    • 11 |
  • Jim Doe
    • 12 |
13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/1 Lets build a framework.txt: -------------------------------------------------------------------------------- 1 | Let's build a framework: 2 | ======================== 3 | 4 | 5 | Name: Greeter 6 | 7 | When I am given a 8 | 9 | firstname 10 | lastname 11 | optional language 12 | 13 | It generates a formal and informal greetings. 14 | 15 | Support English and Spanish languages 16 | 17 | Resuable library/framework. 18 | 19 | Easy to type "G$()" structure 20 | 21 | Support jQuery. 22 | -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/2 Structuring Safe Code.txt: -------------------------------------------------------------------------------- 1 | Structuring Safe Code: 2 | ====================== 3 | 4 | Use IIFE to structure Safe code. -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/3 Our object and its prototype.txt: -------------------------------------------------------------------------------- 1 | Our Object and its prototype: 2 | ============================ 3 | 4 | 5 | Setting up the Greetr lib. -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J2_StructuringSafeCode/Finished/Greetr.js: -------------------------------------------------------------------------------- 1 | (function(global, $) { 2 | 3 | 4 | 5 | }(window, jQuery)); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J2_StructuringSafeCode/Finished/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narayanants/javascript-understanding-the-weird-parts/6a342ba2f54e9e61c9e0a19838b53368a45976c9/Section 9/Let's Build a Framework Library/Code Samples/J2_StructuringSafeCode/Finished/app.js -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J2_StructuringSafeCode/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J2_StructuringSafeCode/Starter/Greetr.js: -------------------------------------------------------------------------------- 1 | /* Safe code strucuted */ 2 | 3 | (function(global,$){ 4 | var Greetr = function(firstName,lastName,language){ 5 | return new Greetr.init(firstName,lastName,language); 6 | } 7 | 8 | Greetr.prototype = {}; 9 | 10 | Greetr.init = function(firstName,lastName,language){ 11 | var self = this; 12 | self.firstName = firstName || ''; 13 | self.lastName = lastName || ''; 14 | self.language = language || 'en'; 15 | 16 | } 17 | 18 | Greetr.init.prototype = Greetr.prototype; 19 | global.Greetr = global.G$ = Greetr; 20 | 21 | }(window,jQuery)); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J2_StructuringSafeCode/Starter/app.js: -------------------------------------------------------------------------------- 1 | var g = G$('John','Doe'); 2 | console.log(g); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J2_StructuringSafeCode/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J3_OurObjectAndPrototype/Finished/Greetr.js: -------------------------------------------------------------------------------- 1 | (function(global, $) { 2 | 3 | var Greetr = function(firstName, lastName, language) { 4 | return new Greetr.init(firstName, lastName, language); 5 | } 6 | 7 | Greetr.prototype = {}; 8 | 9 | Greetr.init = function(firstName, lastName, language) { 10 | 11 | var self = this; 12 | self.firstName = firstName || ''; 13 | self.lastName = lastName || ''; 14 | self.language = language || 'en'; 15 | 16 | } 17 | 18 | Greetr.init.prototype = Greetr.prototype; 19 | 20 | global.Greetr = global.G$ = Greetr; 21 | 22 | }(window, jQuery)); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J3_OurObjectAndPrototype/Finished/app.js: -------------------------------------------------------------------------------- 1 | var g = G$('John', 'Doe'); 2 | console.log(g); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J3_OurObjectAndPrototype/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J3_OurObjectAndPrototype/Starter/Greetr.js: -------------------------------------------------------------------------------- 1 | (function(global, $) { 2 | 3 | var Greetr = function(firstname,lastname,language){ 4 | return new Greetr.init(firstname,lastname,language) ; // return results of different function constructor 5 | }; // I don't need set up the object with the new keyword 6 | 7 | Greetr.prototype = {}; 8 | 9 | /* Any methods that we use inside Object returned from Greetr */ 10 | 11 | Greetr.init = function(firstname,lastname,lastname){ 12 | var self = this; 13 | self.firstname = firstname || ''; 14 | self.lastname = lastname || ''; 15 | self.language = language || 'en'; 16 | } 17 | 18 | // All my objects point here 19 | 20 | Greetr.init.prototype = Greetr.prototype; 21 | 22 | global.Greetr = global.G$ = Greetr; // exposing it to the global 23 | 24 | }(window, jQuery)); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J3_OurObjectAndPrototype/Starter/app.js: -------------------------------------------------------------------------------- 1 | var g = G$('John','Doe'); 2 | console.log(g); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J3_OurObjectAndPrototype/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J4_PropertiesAndChainableMethods/Finished/Greetr.js: -------------------------------------------------------------------------------- 1 | (function(global, $) { 2 | 3 | var Greetr = function(firstName, lastName, language) { 4 | return new Greetr.init(firstName, lastName, language); 5 | } 6 | 7 | var supportedLangs = ['en', 'es']; 8 | 9 | var greetings = { 10 | en: 'Hello', 11 | es: 'Hola' 12 | }; 13 | 14 | var formalGreetings = { 15 | en: 'Greetings', 16 | es: 'Saludos' 17 | }; 18 | 19 | var logMessages = { 20 | en: 'Logged in', 21 | es: 'Inició sesión' 22 | }; 23 | 24 | Greetr.prototype = { 25 | 26 | fullName: function() { 27 | return this.firstName + ' ' + this.lastName; 28 | }, 29 | 30 | validate: function() { 31 | if (supportedLangs.indexOf(this.language) === -1) { 32 | throw "Invalid language"; 33 | } 34 | }, 35 | 36 | greeting: function() { 37 | return greetings[this.language] + ' ' + this.firstName + '!'; 38 | }, 39 | 40 | formalGreeting: function() { 41 | return formalGreetings[this.language] + ', ' + this.fullName(); 42 | }, 43 | 44 | greet: function(formal) { 45 | var msg; 46 | 47 | // if undefined or null it will be coerced to 'false' 48 | if (formal) { 49 | msg = this.formalGreeting(); 50 | } 51 | else { 52 | msg = this.greeting(); 53 | } 54 | 55 | if (console) { 56 | console.log(msg); 57 | } 58 | 59 | // 'this' refers to the calling object at execution time 60 | // makes the method chainable 61 | return this; 62 | }, 63 | 64 | log: function() { 65 | if (console) { 66 | console.log(logMessages[this.language] + ': ' + this.fullName()); 67 | } 68 | 69 | return this; 70 | }, 71 | 72 | setLang: function(lang) { 73 | this.language = lang; 74 | 75 | this.validate(); 76 | 77 | return this; 78 | } 79 | 80 | }; 81 | 82 | Greetr.init = function(firstName, lastName, language) { 83 | 84 | var self = this; 85 | self.firstName = firstName || ''; 86 | self.lastName = lastName || ''; 87 | self.language = language || 'en'; 88 | 89 | } 90 | 91 | Greetr.init.prototype = Greetr.prototype; 92 | 93 | global.Greetr = global.G$ = Greetr; 94 | 95 | }(window, jQuery)); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J4_PropertiesAndChainableMethods/Finished/app.js: -------------------------------------------------------------------------------- 1 | var g = G$('John', 'Doe'); 2 | g.greet().setLang('es').greet(true); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J4_PropertiesAndChainableMethods/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J4_PropertiesAndChainableMethods/Starter/Greetr.js: -------------------------------------------------------------------------------- 1 | (function(global, $) { 2 | 3 | var Greetr = function(firstName, lastName, language) { 4 | return new Greetr.init(firstName, lastName, language); 5 | } 6 | 7 | var supportedLangs = ['en', 'es']; 8 | 9 | var greetings = { 10 | en: 'Hello', 11 | es: 'Hola' 12 | }; 13 | 14 | var formalGreetings = { 15 | en: 'Greetings', 16 | es: 'Saludos' 17 | }; 18 | 19 | var logMessages = { 20 | en: 'Logged in', 21 | es: 'Inició sesión' 22 | }; 23 | 24 | Greetr.prototype = { 25 | 26 | fullName: function() { 27 | return this.firstName + ' ' + this.lastName; 28 | }, 29 | 30 | validate: function() { 31 | if (supportedLangs.indexOf(this.language) === -1) { 32 | throw "Invalid language"; 33 | } 34 | }, 35 | 36 | greeting: function() { 37 | return greetings[this.language] + ' ' + this.firstName + '!'; 38 | }, 39 | 40 | formalGreeting: function() { 41 | return formalGreetings[this.language] + ', ' + this.fullName(); 42 | }, 43 | 44 | greet: function(formal) { 45 | var msg; 46 | 47 | // if undefined or null it will be coerced to 'false' 48 | if (formal) { 49 | msg = this.formalGreeting(); 50 | } 51 | else { 52 | msg = this.greeting(); 53 | } 54 | 55 | if (console) { 56 | console.log(msg); 57 | } 58 | 59 | // 'this' refers to the calling object at execution time 60 | // makes the method chainable 61 | return this; 62 | }, 63 | 64 | log: function() { 65 | if (console) { 66 | console.log(logMessages[this.language] + ': ' + this.fullName()); 67 | } 68 | 69 | return this; 70 | }, 71 | 72 | setLang: function(lang) { 73 | this.language = lang; 74 | 75 | this.validate(); 76 | 77 | return this; 78 | } 79 | 80 | }; 81 | 82 | Greetr.init = function(firstName, lastName, language) { 83 | 84 | var self = this; 85 | self.firstName = firstName || ''; 86 | self.lastName = lastName || ''; 87 | self.language = language || 'en'; 88 | 89 | } 90 | 91 | Greetr.init.prototype = Greetr.prototype; 92 | 93 | global.Greetr = global.G$ = Greetr; 94 | 95 | }(window, jQuery)); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J4_PropertiesAndChainableMethods/Starter/app.js: -------------------------------------------------------------------------------- 1 | var g = G$('John', 'Doe'); // points to the Greetr function 2 | 3 | /* Greetr function return new Greetr.init() which build and sets the params 4 | These methods have access to all the properties of the prototype. */ 5 | 6 | g.greet().setLang('fs').greet(true); 7 | console.log(g); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J4_PropertiesAndChainableMethods/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J5_AddingJQuerySupport/Finished/Greetr.js: -------------------------------------------------------------------------------- 1 | (function(global, $) { 2 | 3 | var Greetr = function(firstName, lastName, language) { 4 | return new Greetr.init(firstName, lastName, language); 5 | } 6 | 7 | var supportedLangs = ['en', 'es']; 8 | 9 | var greetings = { 10 | en: 'Hello', 11 | es: 'Hola' 12 | }; 13 | 14 | var formalGreetings = { 15 | en: 'Greetings', 16 | es: 'Saludos' 17 | }; 18 | 19 | var logMessages = { 20 | en: 'Logged in', 21 | es: 'Inició sesión' 22 | }; 23 | 24 | Greetr.prototype = { 25 | 26 | fullName: function() { 27 | return this.firstName + ' ' + this.lastName; 28 | }, 29 | 30 | validate: function() { 31 | if (supportedLangs.indexOf(this.language) === -1) { 32 | throw "Invalid language"; 33 | } 34 | }, 35 | 36 | greeting: function() { 37 | return greetings[this.language] + ' ' + this.firstName + '!'; 38 | }, 39 | 40 | formalGreeting: function() { 41 | return formalGreetings[this.language] + ', ' + this.fullName(); 42 | }, 43 | 44 | greet: function(formal) { 45 | var msg; 46 | 47 | // if undefined or null it will be coerced to 'false' 48 | if (formal) { 49 | msg = this.formalGreeting(); 50 | } 51 | else { 52 | msg = this.greeting(); 53 | } 54 | 55 | if (console) { 56 | console.log(msg); 57 | } 58 | 59 | // 'this' refers to the calling object at execution time 60 | // makes the method chainable 61 | return this; 62 | }, 63 | 64 | log: function() { 65 | if (console) { 66 | console.log(logMessages[this.language] + ': ' + this.fullName()); 67 | } 68 | 69 | return this; 70 | }, 71 | 72 | setLang: function(lang) { 73 | this.language = lang; 74 | 75 | this.validate(); 76 | 77 | return this; 78 | }, 79 | 80 | HTMLGreeting: function(selector, formal) { 81 | if (!$) { 82 | throw 'jQuery not loaded'; 83 | } 84 | 85 | if (!selector) { 86 | throw 'Missing jQuery selector'; 87 | } 88 | 89 | var msg; 90 | if (formal) { 91 | msg = this.formalGreeting(); 92 | } 93 | else { 94 | msg = this.greeting(); 95 | } 96 | 97 | $(selector).html(msg); 98 | 99 | return this; 100 | } 101 | 102 | }; 103 | 104 | Greetr.init = function(firstName, lastName, language) { 105 | 106 | var self = this; 107 | self.firstName = firstName || ''; 108 | self.lastName = lastName || ''; 109 | self.language = language || 'en'; 110 | 111 | } 112 | 113 | Greetr.init.prototype = Greetr.prototype; 114 | 115 | global.Greetr = global.G$ = Greetr; 116 | 117 | }(window, jQuery)); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J5_AddingJQuerySupport/Finished/app.js: -------------------------------------------------------------------------------- 1 | var g = G$('John', 'Doe'); 2 | 3 | g.greet().setLang('es').greet(true).log(); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J5_AddingJQuerySupport/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 11 | 12 |
13 |

14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J5_AddingJQuerySupport/Starter/Greetr.js: -------------------------------------------------------------------------------- 1 | (function(global, $) { 2 | 3 | var Greetr = function(firstName, lastName, language) { 4 | return new Greetr.init(firstName, lastName, language); 5 | } 6 | 7 | var supportedLangs = ['en', 'es']; 8 | 9 | var greetings = { 10 | en: 'Hello', 11 | es: 'Hola' 12 | }; 13 | 14 | var formalGreetings = { 15 | en: 'Greetings', 16 | es: 'Saludos' 17 | }; 18 | 19 | var logMessages = { 20 | en: 'Logged in', 21 | es: 'Inició sesión' 22 | }; 23 | 24 | Greetr.prototype = { 25 | 26 | fullName: function() { 27 | return this.firstName + ' ' + this.lastName; 28 | }, 29 | 30 | validate: function() { 31 | if (supportedLangs.indexOf(this.language) === -1) { 32 | throw "Invalid language"; 33 | } 34 | }, 35 | 36 | greeting: function() { 37 | return greetings[this.language] + ' ' + this.firstName + '!'; 38 | }, 39 | 40 | formalGreeting: function() { 41 | return formalGreetings[this.language] + ', ' + this.fullName(); 42 | }, 43 | 44 | greet: function(formal) { 45 | var msg; 46 | 47 | // if undefined or null it will be coerced to 'false' 48 | if (formal) { 49 | msg = this.formalGreeting(); 50 | } 51 | else { 52 | msg = this.greeting(); 53 | } 54 | 55 | if (console) { 56 | console.log(msg); 57 | } 58 | 59 | // 'this' refers to the calling object at execution time 60 | // makes the method chainable 61 | return this; 62 | }, 63 | 64 | log: function() { 65 | if (console) { 66 | console.log(logMessages[this.language] + ': ' + this.fullName()); 67 | } 68 | 69 | return this; 70 | }, 71 | 72 | setLang: function(lang) { 73 | this.language = lang; 74 | 75 | this.validate(); 76 | 77 | return this; 78 | }, 79 | 80 | HTMLGreeting:function(selector,formal){ 81 | if(!$){ 82 | throw 'jQuery not loaded!'; 83 | } 84 | if(!selector){ 85 | throw 'Missing jQuery selector'; 86 | } 87 | var msg; 88 | if(formal){ 89 | msg = this.formalGreeting(); 90 | } 91 | $(selector).html(msg); 92 | return this; // to make it chainable. 93 | 94 | } 95 | 96 | }; 97 | 98 | Greetr.init = function(firstName, lastName, language) { 99 | 100 | var self = this; 101 | self.firstName = firstName || ''; 102 | self.lastName = lastName || ''; 103 | self.language = language || 'en'; 104 | 105 | } 106 | 107 | Greetr.init.prototype = Greetr.prototype; 108 | 109 | global.Greetr = global.G$ = Greetr; 110 | 111 | }(window, jQuery)); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J5_AddingJQuerySupport/Starter/app.js: -------------------------------------------------------------------------------- 1 | var g = G$('John', 'Doe'); 2 | g.greet().setLang('es').greet(true).log(); 3 | -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J5_AddingJQuerySupport/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 11 | 12 |
13 |

14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J6_GoodCommenting/Greetr.js: -------------------------------------------------------------------------------- 1 | ;(function(global, $) { 2 | 3 | // 'new' an object 4 | var Greetr = function(firstName, lastName, language) { 5 | return new Greetr.init(firstName, lastName, language); 6 | } 7 | 8 | // hidden within the scope of the IIFE and never directly accessible 9 | var supportedLangs = ['en', 'es']; 10 | 11 | // informal greetings 12 | var greetings = { 13 | en: 'Hello', 14 | es: 'Hola' 15 | }; 16 | 17 | // formal greetings 18 | var formalGreetings = { 19 | en: 'Greetings', 20 | es: 'Saludos' 21 | }; 22 | 23 | // logger messages 24 | var logMessages = { 25 | en: 'Logged in', 26 | es: 'Inició sesión' 27 | }; 28 | 29 | // prototype holds methods (to save memory space) 30 | Greetr.prototype = { 31 | 32 | // 'this' refers to the calling object at execution time 33 | fullName: function() { 34 | return this.firstName + ' ' + this.lastName; 35 | }, 36 | 37 | validate: function() { 38 | // check that is a valid language 39 | // references the externally inaccessible 'supportedLangs' within the closure 40 | if (supportedLangs.indexOf(this.language) === -1) { 41 | throw "Invalid language"; 42 | } 43 | }, 44 | 45 | // retrieve messages from object by referring to properties using [] syntax 46 | greeting: function() { 47 | return greetings[this.language] + ' ' + this.firstName + '!'; 48 | }, 49 | 50 | formalGreeting: function() { 51 | return formalGreetings[this.language] + ', ' + this.fullName(); 52 | }, 53 | 54 | // chainable methods return their own containing object 55 | greet: function(formal) { 56 | var msg; 57 | 58 | // if undefined or null it will be coerced to 'false' 59 | if (formal) { 60 | msg = this.formalGreeting(); 61 | } 62 | else { 63 | msg = this.greeting(); 64 | } 65 | 66 | if (console) { 67 | console.log(msg); 68 | } 69 | 70 | // 'this' refers to the calling object at execution time 71 | // makes the method chainable 72 | return this; 73 | }, 74 | 75 | log: function() { 76 | if (console) { 77 | console.log(logMessages[this.language] + ': ' + this.fullName()); 78 | } 79 | 80 | // make chainable 81 | return this; 82 | }, 83 | 84 | setLang: function(lang) { 85 | 86 | // set the language 87 | this.language = lang; 88 | 89 | // validate 90 | this.validate(); 91 | 92 | // make chainable 93 | return this; 94 | }, 95 | 96 | HTMLGreeting: function(selector, formal) { 97 | if (!$) { 98 | throw 'jQuery not loaded'; 99 | } 100 | 101 | if (!selector) { 102 | throw 'Missing jQuery selector'; 103 | } 104 | 105 | // determine the message 106 | var msg; 107 | if (formal) { 108 | msg = this.formalGreeting(); 109 | } 110 | else { 111 | msg = this.greeting(); 112 | } 113 | 114 | // inject the message in the chosen place in the DOM 115 | $(selector).html(msg); 116 | 117 | // make chainable 118 | return this; 119 | } 120 | 121 | }; 122 | 123 | // the actual object is created here, allowing us to 'new' an object without calling 'new' 124 | Greetr.init = function(firstName, lastName, language) { 125 | 126 | var self = this; 127 | self.firstName = firstName || ''; 128 | self.lastName = lastName || ''; 129 | self.language = language || 'en'; 130 | 131 | self.validate(); 132 | 133 | } 134 | 135 | // trick borrowed from jQuery so we don't have to use the 'new' keyword 136 | Greetr.init.prototype = Greetr.prototype; 137 | 138 | // attach our Greetr to the global object, and provide a shorthand '$G' for ease our poor fingers 139 | global.Greetr = global.G$ = Greetr; 140 | 141 | }(window, jQuery)); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J6_GoodCommenting/app.js: -------------------------------------------------------------------------------- 1 | // gets a new object (the architecture allows us to not have to use the 'new' keyword here) 2 | var g = G$('John', 'Doe'); 3 | 4 | // use our chainable methods 5 | g.greet().setLang('es').greet(true).log(); 6 | 7 | // let's use our object on the click of the login button 8 | $('#login').click(function() { 9 | 10 | // create a new 'Greetr' object (let's pretend we know the name from the login) 11 | var loginGrtr = G$('John', 'Doe'); 12 | 13 | // hide the login on the screen 14 | $('#logindiv').hide(); 15 | 16 | // fire off an HTML greeting, passing the '#greeting' as the selector and the chosen language, and log the welcome as well 17 | loginGrtr.setLang($('#lang').val()).HTMLGreeting('#greeting', true).log(); 18 | 19 | }); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J6_GoodCommenting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 11 | 12 |
13 |

14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J7_LetsUseOurFramework/Finished/Greetr.js: -------------------------------------------------------------------------------- 1 | ;(function(global, $) { 2 | 3 | // 'new' an object 4 | var Greetr = function(firstName, lastName, language) { 5 | return new Greetr.init(firstName, lastName, language); 6 | } 7 | 8 | // hidden within the scope of the IIFE and never directly accessible 9 | var supportedLangs = ['en', 'es']; 10 | 11 | // informal greetings 12 | var greetings = { 13 | en: 'Hello', 14 | es: 'Hola' 15 | }; 16 | 17 | // formal greetings 18 | var formalGreetings = { 19 | en: 'Greetings', 20 | es: 'Saludos' 21 | }; 22 | 23 | // logger messages 24 | var logMessages = { 25 | en: 'Logged in', 26 | es: 'Inició sesión' 27 | }; 28 | 29 | // prototype holds methods (to save memory space) 30 | Greetr.prototype = { 31 | 32 | // 'this' refers to the calling object at execution time 33 | fullName: function() { 34 | return this.firstName + ' ' + this.lastName; 35 | }, 36 | 37 | validate: function() { 38 | // check that is a valid language 39 | // references the externally inaccessible 'supportedLangs' within the closure 40 | if (supportedLangs.indexOf(this.language) === -1) { 41 | throw "Invalid language"; 42 | } 43 | }, 44 | 45 | // retrieve messages from object by referring to properties using [] syntax 46 | greeting: function() { 47 | return greetings[this.language] + ' ' + this.firstName + '!'; 48 | }, 49 | 50 | formalGreeting: function() { 51 | return formalGreetings[this.language] + ', ' + this.fullName(); 52 | }, 53 | 54 | // chainable methods return their own containing object 55 | greet: function(formal) { 56 | var msg; 57 | 58 | // if undefined or null it will be coerced to 'false' 59 | if (formal) { 60 | msg = this.formalGreeting(); 61 | } 62 | else { 63 | msg = this.greeting(); 64 | } 65 | 66 | if (console) { 67 | console.log(msg); 68 | } 69 | 70 | // 'this' refers to the calling object at execution time 71 | // makes the method chainable 72 | return this; 73 | }, 74 | 75 | log: function() { 76 | if (console) { 77 | console.log(logMessages[this.language] + ': ' + this.fullName()); 78 | } 79 | 80 | // make chainable 81 | return this; 82 | }, 83 | 84 | setLang: function(lang) { 85 | 86 | // set the language 87 | this.language = lang; 88 | 89 | // validate 90 | this.validate(); 91 | 92 | // make chainable 93 | return this; 94 | }, 95 | 96 | HTMLGreeting: function(selector, formal) { 97 | if (!$) { 98 | throw 'jQuery not loaded'; 99 | } 100 | 101 | if (!selector) { 102 | throw 'Missing jQuery selector'; 103 | } 104 | 105 | // determine the message 106 | var msg; 107 | if (formal) { 108 | msg = this.formalGreeting(); 109 | } 110 | else { 111 | msg = this.greeting(); 112 | } 113 | 114 | // inject the message in the chosen place in the DOM 115 | $(selector).html(msg); 116 | 117 | // make chainable 118 | return this; 119 | } 120 | 121 | }; 122 | 123 | // the actual object is created here, allowing us to 'new' an object without calling 'new' 124 | Greetr.init = function(firstName, lastName, language) { 125 | 126 | var self = this; 127 | self.firstName = firstName || ''; 128 | self.lastName = lastName || ''; 129 | self.language = language || 'en'; 130 | 131 | self.validate(); 132 | 133 | } 134 | 135 | // trick borrowed from jQuery so we don't have to use the 'new' keyword 136 | Greetr.init.prototype = Greetr.prototype; 137 | 138 | // attach our Greetr to the global object, and provide a shorthand '$G' for ease our poor fingers 139 | global.Greetr = global.G$ = Greetr; 140 | 141 | }(window, jQuery)); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J7_LetsUseOurFramework/Finished/app.js: -------------------------------------------------------------------------------- 1 | // gets a new object (the architecture allows us to not have to use the 'new' keyword here) 2 | var g = G$('John', 'Doe'); 3 | 4 | // use our chainable methods 5 | g.greet().setLang('es').greet(true).log(); 6 | 7 | // let's use our object on the click of the login button 8 | $('#login').click(function() { 9 | 10 | // create a new 'Greetr' object (let's pretend we know the name from the login) 11 | var loginGrtr = G$('John', 'Doe'); 12 | 13 | // hide the login on the screen 14 | $('#logindiv').hide(); 15 | 16 | // fire off an HTML greeting, passing the '#greeting' as the selector and the chosen language, and log the welcome as well 17 | loginGrtr.setLang($('#lang').val()).HTMLGreeting('#greeting', true).log(); 18 | 19 | }); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J7_LetsUseOurFramework/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 11 | 12 |
13 |

14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J7_LetsUseOurFramework/Starter/Greetr.js: -------------------------------------------------------------------------------- 1 | ;(function(global, $) { 2 | 3 | // 'new' an object 4 | var Greetr = function(firstName, lastName, language) { 5 | return new Greetr.init(firstName, lastName, language); 6 | } 7 | 8 | // hidden within the scope of the IIFE and never directly accessible 9 | var supportedLangs = ['en', 'es']; 10 | 11 | // informal greetings 12 | var greetings = { 13 | en: 'Hello', 14 | es: 'Hola' 15 | }; 16 | 17 | // formal greetings 18 | var formalGreetings = { 19 | en: 'Greetings', 20 | es: 'Saludos' 21 | }; 22 | 23 | // logger messages 24 | var logMessages = { 25 | en: 'Logged in', 26 | es: 'Inició sesión' 27 | }; 28 | 29 | // prototype holds methods (to save memory space) 30 | Greetr.prototype = { 31 | 32 | // 'this' refers to the calling object at execution time 33 | fullName: function() { 34 | return this.firstName + ' ' + this.lastName; 35 | }, 36 | 37 | validate: function() { 38 | // check that is a valid language 39 | // references the externally inaccessible 'supportedLangs' within the closure 40 | if (supportedLangs.indexOf(this.language) === -1) { 41 | throw "Invalid language"; 42 | } 43 | }, 44 | 45 | // retrieve messages from object by referring to properties using [] syntax 46 | greeting: function() { 47 | return greetings[this.language] + ' ' + this.firstName + '!'; 48 | }, 49 | 50 | formalGreeting: function() { 51 | return formalGreetings[this.language] + ', ' + this.fullName(); 52 | }, 53 | 54 | // chainable methods return their own containing object 55 | greet: function(formal) { 56 | var msg; 57 | 58 | // if undefined or null it will be coerced to 'false' 59 | if (formal) { 60 | msg = this.formalGreeting(); 61 | } 62 | else { 63 | msg = this.greeting(); 64 | } 65 | 66 | if (console) { 67 | console.log(msg); 68 | } 69 | 70 | // 'this' refers to the calling object at execution time 71 | // makes the method chainable 72 | return this; 73 | }, 74 | 75 | log: function() { 76 | if (console) { 77 | console.log(logMessages[this.language] + ': ' + this.fullName()); 78 | } 79 | 80 | // make chainable 81 | return this; 82 | }, 83 | 84 | setLang: function(lang) { 85 | 86 | // set the language 87 | this.language = lang; 88 | 89 | // validate 90 | this.validate(); 91 | 92 | // make chainable 93 | return this; 94 | }, 95 | 96 | HTMLGreeting: function(selector, formal) { 97 | if (!$) { 98 | throw 'jQuery not loaded'; 99 | } 100 | 101 | if (!selector) { 102 | throw 'Missing jQuery selector'; 103 | } 104 | 105 | // determine the message 106 | var msg; 107 | if (formal) { 108 | msg = this.formalGreeting(); 109 | } 110 | else { 111 | msg = this.greeting(); 112 | } 113 | 114 | // inject the message in the chosen place in the DOM 115 | $(selector).html(msg); 116 | 117 | // make chainable 118 | return this; 119 | } 120 | 121 | }; 122 | 123 | // the actual object is created here, allowing us to 'new' an object without calling 'new' 124 | Greetr.init = function(firstName, lastName, language) { 125 | 126 | var self = this; 127 | self.firstName = firstName || ''; 128 | self.lastName = lastName || ''; 129 | self.language = language || 'en'; 130 | 131 | self.validate(); 132 | 133 | } 134 | 135 | // trick borrowed from jQuery so we don't have to use the 'new' keyword 136 | Greetr.init.prototype = Greetr.prototype; 137 | 138 | // attach our Greetr to the global object, and provide a shorthand '$G' for ease our poor fingers 139 | global.Greetr = global.G$ = Greetr; 140 | 141 | }(window, jQuery)); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J7_LetsUseOurFramework/Starter/app.js: -------------------------------------------------------------------------------- 1 | var g = G$('John', 'Doe'); 2 | 3 | g.greet().setLang('es').greet(true).log(); -------------------------------------------------------------------------------- /Section 9/Let's Build a Framework Library/Code Samples/J7_LetsUseOurFramework/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 11 | 12 |
13 |

14 | 15 | 16 | 17 | 18 | --------------------------------------------------------------------------------