book

JavaScript : Object-Oriented Programming

by Kumar Chetan Sharma et al

August 2016

Beginner to intermediate

847 pages

17h 28m

English

Packt Publishing

Read now

Unlock full access

What this learning path covers
Downloading the example codeErrataPiracyQuestions

A little bit of history
An overview of JavaScriptCommentsVariablesConstantsNumberStringUndefined valuesBooleansThe instanceof operatorDate objectsThe + operatorThe ++ and -- operatorsBoolean operatorsEqualityStrict equality using ===Weak equality using ==JavaScript typesAutomatic semicolon insertionJavaScript style guideWhitespacesParentheses, line breaks, and bracesQuotesEnd of lines and empty linesType checkingType castingConditional evaluationNamingThe eval() method is evilThe strict modeEnabling the strict mode for an existing code can break itPackage with careVariables must be declared in strict modeThe eval() function is cleaner in strict modeFeatures that are blocked in strict modeRunning JSHint
A function literalA function declaration
Global scopeLocal scopeFunction-level scope versus block-level scopeInline function expressionsBlock scopes
The this parameterInvocation as a functionInvocation as a methodInvocation as a constructorInvocation using apply() and call() methods
Anonymous functions while creating an objectAnonymous functions while creating a listAnonymous functions as a parameter to another functionAnonymous functions in conditional logic
Stylistic considerations
Regular expressions
Alternatives – OR
Understanding objectsBehavior of JavaScript objectsPrototypes
Design patterns
ES6 modules
Model-View-ControllerModelsViewsControllers
Unit testingTest-driven developmentBehavior-driven development
Syntax errorsUsing strictRuntime exceptionsConsole.log and assertsChrome DevTools
Shims or polyfills
Block scopingDefault parametersSpread and restDestructuringObject literalsTemplate literalsMaps and SetsSymbolsIteratorsFor..of loopsArrow functions
DOMAccessing DOM elementsAccessing specific nodes
An asynchronous evented-model in a browser
Creating modules
Installing packages
JavaScript profilingThe CPU profileThe Timeline view
Recognizing objects from nouns
Understanding classes and instances
Understanding the different members of a class
Adding attributes to a classHiding data in Python using prefixesUsing property getters and setters in PythonUsing methods to add behaviors to classes in Python
Adding fields to a classUsing access modifiersUsing property getters and setters in C#Working with auto-implemented propertiesUsing methods to add behaviors to classes in C#
Adding properties to a constructor functionHiding data in JavaScript with local variablesUsing property getters and setters in JavaScriptUsing methods to add behaviors to constructor functions
Using classes to abstract behavior
Creating classes that specialize behavior in PythonUsing simple inheritance in PythonOverriding methods in PythonOverloading operators in PythonUnderstanding polymorphism in Python
Creating classes that specialize behavior in C#Using simple inheritance in C#Overloading and overriding methods in C#Overloading operators in C#Understanding polymorphism in C#
Creating objects that specialize behavior in JavaScriptUsing the prototype-based inheritance in JavaScriptOverriding methods in JavaScriptOverloading operators in JavaScriptUnderstanding polymorphism in JavaScript
Understanding the requirement to work with multiple base classes
Declaring base classes for multiple inheritanceDeclaring classes that override methodsDeclaring a class with multiple base classesWorking with instances of classes that use multiple inheritanceWorking with abstract base classes
Declaring interfacesDeclaring classes that implement interfacesWorking with multiple inheritanceWorking with methods that receive interfaces as arguments
Declaring base constructor functions for compositionDeclaring constructor functions that use compositionWorking with an object composed of many objectsWorking with instances composed of many objects
Understanding parametric polymorphism and duck typing
Declaring a base class that defines the generic behaviorDeclaring subclasses for duck typingDeclaring a class that works with duck typingUsing a generic class for multiple typesWorking with duck typing in mind
Declaring an interface to be used as a constraintDeclaring an abstract base class that implements two interfacesDeclaring subclasses of an abstract base classDeclaring a class that works with a constrained generic typeUsing a generic class for multiple typesDeclaring a class that works with two constrained generic typesUsing a generic class with two generic type parameters
Declaring a constructor function that defines the generic behaviorWorking with the prototype chain and duck typingDeclaring methods that work with duck typingUsing generic methods for multiple objectsWorking with duck typing in mind
Thinking about the best ways to organize code
Working with source files organized in foldersImporting modulesWorking with module hierarchies
Working with foldersUsing namespacesWorking with namespace hierarchies in C#
Working with objects to organize codeDeclaring constructor functions within objectsWorking with nested objects that organize code
Putting together all the pieces of the object-oriented puzzle
A bit of historyBrowser wars and renaissanceThe presentThe future
WebKit's Web InspectorJavaScriptCore on a MacMore consoles
VariablesVariables are case sensitive
Finding out the value type – the typeof operatorNumbersOctal and hexadecimal numbersExponent literalsInfinityNaN
String conversionsSpecial strings
Operator precedenceLazy evaluation
Undefined and null
Adding/updating array elementsDeleting elementsArrays of arrays
The if conditionThe else clause
Checking if a variable existsAlternative if syntax
While loopsDo-while loopsFor loopsFor-in loops
What is a function?Calling a functionParametersPredefined functionsparseInt()parseFloat()isNaN()isFinite()Encode/decode URIseval()A bonus – the alert() function
Variable hoisting
Anonymous functionsCallback functionsCallback examplesImmediate functionsInner (private) functionsFunctions that return functionsFunction, rewrite thyself!
Scope chainBreaking the chain with a closureClosure #1Closure #2A definition and closure #3Closures in a loopGetter/setterIterator
From arrays to objectsElements, properties, methods, and membersHashes and associative arraysAccessing an object's propertiesCalling an object's methodsAltering properties/methodsUsing the this valueConstructor functionsThe global objectThe constructor propertyThe instanceof operatorFunctions that return objectsPassing objectsComparing objectsObjects in the WebKit consoleconsole.log
ObjectArrayA few array methodsFunctionProperties of function objectsPrototypeMethods of function objectsCall and applyThe arguments object revisitedInferring object typesBooleanNumberStringA few methods of string objectsMathDateMethods to work with date objectsCalculating birthdaysRegExpProperties of RegExp objectsMethods of RegExp objectsString methods that accept regular expressions as argumentssearch() and match()replace()Replace callbackssplit()Passing a string when a RegExp is expectedError objects
The prototype propertyAdding methods and properties using the prototype
Own properties versus prototype propertiesOverwriting a prototype's property with an own propertyEnumerating propertiesisPrototypeOf()The secret __proto__ link
Augmenting built-in objects – discussionPrototype gotchas
Prototype chainingPrototype chaining exampleMoving shared properties to the prototype
A temporary constructor – new F()
Mixins
Borrow a constructor and copy its prototype
AnalysisImplementationTesting
Including JavaScript in an HTML page
The window object revisitedwindow.navigatorYour console is a cheat sheetwindow.locationwindow.historywindow.frameswindow.screenwindow.open()/close()window.moveTo() and window.resizeTo()window.alert(), window.prompt(), and window.confirm()window.setTimeout() and window.setInterval()window.document
Core DOM and HTML DOMAccessing DOM nodesThe document nodedocumentElementChild nodesAttributesAccessing the content inside a tagDOM access shortcutsSiblings, body, first, and last childWalk the DOMModifying DOM nodesModifying stylesFun with formsCreating new nodesDOM-only methodcloneNode()insertBefore()Removing nodesHTML-only DOM objectsPrimitive ways to access the documentdocument.write()Cookies, title, referrer, domain
Inline HTML attributesElement PropertiesDOM event listenersCapturing and bubblingStop propagationPrevent default behaviorCross-browser event listenersTypes of events
Sending the requestProcessing the responseCreating XMLHttpRequest objects in IE prior to Version 7A is for AsynchronousX is for XMLAn example
Coding patternsSeparating behaviorContentPresentationBehaviorExample of separating behaviorAsynchronous JavaScript loadingNamespacesAn Object as a namespaceNamespaced constructorsA namespace() methodInit-time branchingLazy definitionConfiguration objectPrivate properties and methodsPrivileged methodsPrivate functions as public methodsImmediate functionsModulesChainingJSON
SingletonSingleton 2Global variableProperty of the ConstructorIn a private propertyFactoryDecoratorDecorating a Christmas treeObserver
Keywords
ObjectMembers of the Object constructorThe Object.prototype membersECMAScript 5 additions to Object
The Array.prototype membersECMAScript 5 additions to Array
The Function.prototype membersECMAScript 5 additions to a function
Members of the Number constructorThe Number.prototype members
Members of the String constructorThe String.prototype membersECMAScript 5 additions to String
Members of the Date constructorThe Date.prototype membersECMAScript 5 additions to Date
Members of the Math object
The RegExp.prototype members
The Error.prototype members
Members of the JSON object

Content preview from JavaScript : Object-Oriented Programming

Propagation

At this point, we should ask an important question—if an element and one of its ancestors have a handler on the same event, which handler will be fired first? Consider the following figure:

For example, we have Element2 as a child of Element1 and both have the onClick handler. When a user clicks on Element2, onClick on both Element2 and Element1 is triggered but the question is which one is triggered first. What should the event order be? Well, the answer, unfortunately, is that it depends entirely on the browser. When browsers first arrived, two opinions emerged, naturally, from Netscape and Microsoft.

Netscape decided that the first ...