JavaScript : Object-Oriented Programming

Table of Contents

Javascript: Object Oriented Programming

Javascript: Object Oriented Programming

Credits

Preface

What this learning path covers

What you need for this learning path

Who this learning path is for

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

I. Module 1

1. JavaScript Primer

A little bit of history

How to use this book

Hello World

An overview of JavaScript

Comments

Variables

Constants

Number

String

Undefined values

Booleans

The instanceof operator

Date objects

The + operator

The ++ and -- operators

Boolean operators

Equality

Strict equality using ===

Weak equality using ==

JavaScript types

Automatic semicolon insertion

JavaScript style guide

Whitespaces

Parentheses, line breaks, and braces

Quotes

End of lines and empty lines

Type checking

Type casting

Conditional evaluation

Naming

The eval() method is evil

The strict mode

Enabling the strict mode for an existing code can break it

Package with care

Variables must be declared in strict mode

The eval() function is cleaner in strict mode

Features that are blocked in strict mode

Running JSHint

Summary

2. Functions, Closures, and Modules

A function literal

A function declaration

Functions as data

Scoping

Global scope

Local scope

Function-level scope versus block-level scope

Inline function expressions

Block scopes

Function declarations versus function expressions

The arguments parameter

The this parameter

Invocation as a function

Invocation as a method

Invocation as a constructor

Invocation using apply() and call() methods

Anonymous functions

Anonymous functions while creating an object

Anonymous functions while creating a list

Anonymous functions as a parameter to another function

Anonymous functions in conditional logic

Closures

Timers and callbacks

Private variables

Loops and closures

Modules

Stylistic considerations

Summary

3. Data Structures and Manipulation

Regular expressions

Exact match

Match from a class of characters

Repeated occurrences

Alternatives – OR

Beginning and end

Backreferences

Greedy and lazy quantifiers

Arrays

Maps

Sets

A matter of style

Summary

4. Object-Oriented JavaScript

Understanding objects

Behavior of JavaScript objects

Prototypes

Instance properties versus prototype properties

Inheritance

Getters and setters

Summary

5. JavaScript Patterns

Design patterns

The namespace pattern

The module pattern

ES6 modules

The factory pattern

The mixin pattern

The decorator pattern

The observer pattern

JavaScript Model-View-* patterns

Model-View-Controller

Models

Views

Controllers

The Model-View-Presenter pattern

Model-View-ViewModel

Summary

6. Testing and Debugging

Unit testing

Test-driven development

Behavior-driven development

JavaScript debugging

Syntax errors

Using strict

Runtime exceptions

Console.log and asserts

Chrome DevTools

Summary

7. ECMAScript 6

Shims or polyfills

Transpilers

ES6 syntax changes

Block scoping

Default parameters

Spread and rest

Destructuring

Object literals

Template literals

Maps and Sets

Symbols

Iterators

For..of loops

Arrow functions

Summary

8. DOM Manipulation and Events

DOM

Accessing DOM elements

Accessing specific nodes

Chaining

Traversal and manipulation

Working with browser events

Propagation

jQuery event handling and propagation

Event delegation

The event object

Summary

9. Server-Side JavaScript

An asynchronous evented-model in a browser

Callbacks

Timers

EventEmitters

Modules

Creating modules

npm

Installing packages

JavaScript performance

JavaScript profiling

The CPU profile

The Timeline view

Summary

II. Module 2

1. Objects Everywhere

Recognizing objects from nouns

Generating blueprints for objects

Recognizing attributes/fields

Recognizing actions from verbs – methods

Organizing the blueprints – classes

Object-oriented approaches in Python, JavaScript, and C#

Summary

2. Classes and Instances

Understanding classes and instances

Understanding constructors and destructors

Declaring classes in Python

Customizing constructors in Python

Customizing destructors in Python

Creating instances of classes in Python

Declaring classes in C#

Customizing constructors in C#

Customizing destructors in C#

Creating instances of classes in C#

Understanding that functions are objects in JavaScript

Working with constructor functions in JavaScript

Creating instances in JavaScript

Summary

3. Encapsulation of Data

Understanding the different members of a class

Protecting and hiding data

Working with properties

Understanding the difference between mutability and immutability

Encapsulating data in Python

Adding attributes to a class

Hiding data in Python using prefixes

Using property getters and setters in Python

Using methods to add behaviors to classes in Python

Encapsulating data in C#

Adding fields to a class

Using access modifiers

Using property getters and setters in C#

Working with auto-implemented properties

Using methods to add behaviors to classes in C#

Encapsulating data in JavaScript

Adding properties to a constructor function

Hiding data in JavaScript with local variables

Using property getters and setters in JavaScript

Using methods to add behaviors to constructor functions

Summary

4. Inheritance and Specialization

Using classes to abstract behavior

Understanding inheritance

Understanding method overloading and overriding

Understanding operator overloading

Taking advantage of polymorphism

Working with simple inheritance in Python

Creating classes that specialize behavior in Python

Using simple inheritance in Python

Overriding methods in Python

Overloading operators in Python

Understanding polymorphism in Python

Working with simple inheritance in C#

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#

Working with the prototype-based inheritance in JavaScript

Creating objects that specialize behavior in JavaScript

Using the prototype-based inheritance in JavaScript

Overriding methods in JavaScript

Overloading operators in JavaScript

Understanding polymorphism in JavaScript

Summary

5. Interfaces, Multiple Inheritance, and Composition

Understanding the requirement to work with multiple base classes

Working with multiple inheritance in Python

Declaring base classes for multiple inheritance

Declaring classes that override methods

Declaring a class with multiple base classes

Working with instances of classes that use multiple inheritance

Working with abstract base classes

Interfaces and multiple inheritance in C#

Declaring interfaces

Declaring classes that implement interfaces

Working with multiple inheritance

Working with methods that receive interfaces as arguments

Working with composition in JavaScript

Declaring base constructor functions for composition

Declaring constructor functions that use composition

Working with an object composed of many objects

Working with instances composed of many objects

Summary

6. Duck Typing and Generics

Understanding parametric polymorphism and duck typing

Working with duck typing in Python

Declaring a base class that defines the generic behavior

Declaring subclasses for duck typing

Declaring a class that works with duck typing

Using a generic class for multiple types

Working with duck typing in mind

Working with generics in C#

Declaring an interface to be used as a constraint

Declaring an abstract base class that implements two interfaces

Declaring subclasses of an abstract base class

Declaring a class that works with a constrained generic type

Using a generic class for multiple types

Declaring a class that works with two constrained generic types

Using a generic class with two generic type parameters

Working with duck typing in JavaScript

Declaring a constructor function that defines the generic behavior

Working with the prototype chain and duck typing

Declaring methods that work with duck typing

Using generic methods for multiple objects

Working with duck typing in mind

Summary

7. Organization of Object-Oriented Code

Thinking about the best ways to organize code

Organizing object-oriented code in Python

Working with source files organized in folders

Importing modules

Working with module hierarchies

Organizing object-oriented code in C#

Working with folders

Using namespaces

Working with namespace hierarchies in C#

Organizing object-oriented code in JavaScript

Working with objects to organize code

Declaring constructor functions within objects

Working with nested objects that organize code

Summary

8. Taking Full Advantage of Object-Oriented Programming

Putting together all the pieces of the object-oriented puzzle

Refactoring existing code in Python

Refactoring existing code in C#

Refactoring existing code in JavaScript

Summary

III. Module 3

1. Object-oriented JavaScript

A bit of history

Browser wars and renaissance

The present

The future

ECMAScript 5

Object-oriented programming

Setting up your training environment

WebKit's Web Inspector

JavaScriptCore on a Mac

More consoles

Summary

2. Primitive Data Types, Arrays, Loops, and Conditions

Variables

Variables are case sensitive

Operators

Primitive data types

Finding out the value type – the typeof operator

Numbers

Octal and hexadecimal numbers

Exponent literals

Infinity

NaN

Strings

String conversions

Special strings

Booleans

Logical operators

Operator precedence

Lazy evaluation

Comparison

Undefined and null

Primitive data types recap

Arrays

Adding/updating array elements

Deleting elements

Arrays of arrays

Conditions and loops

The if condition

The else clause

Code blocks

Checking if a variable exists

Alternative if syntax

Switch

Loops

While loops

Do-while loops

For loops

For-in loops

Comments

Summary

Exercises

3. Functions

What is a function?

Calling a function

Parameters

Predefined functions

parseInt()

parseFloat()

isNaN()

isFinite()

Encode/decode URIs

eval()

A bonus – the alert() function

Scope of variables

Variable hoisting

Functions are data

Anonymous functions

Callback functions

Callback examples

Immediate functions

Inner (private) functions

Functions that return functions

Function, rewrite thyself!

Closures

Scope chain

Breaking the chain with a closure

Closure #1

Closure #2

A definition and closure #3

Closures in a loop

Getter/setter

Iterator

Summary

Exercises

4. Objects

From arrays to objects

Elements, properties, methods, and members

Hashes and associative arrays

Accessing an object's properties

Calling an object's methods

Altering properties/methods

Using the this value

Constructor functions

The global object

The constructor property

The instanceof operator

Functions that return objects

Passing objects

Comparing objects

Objects in the WebKit console

console.log

Built-in objects

Object

Array

A few array methods

Function

Properties of function objects

Prototype

Methods of function objects

Call and apply

The arguments object revisited

Inferring object types

Boolean

Number

String

A few methods of string objects

Math

Date

Methods to work with date objects

Calculating birthdays

RegExp

Properties of RegExp objects

Methods of RegExp objects

String methods that accept regular expressions as arguments

search() and match()

replace()

Replace callbacks

split()

Passing a string when a RegExp is expected

Error objects

Summary

Exercises

5. Prototype

The prototype property

Adding methods and properties using the prototype

Using the prototype's methods and properties

Own properties versus prototype properties

Overwriting a prototype's property with an own property

Enumerating properties

isPrototypeOf()

The secret __proto__ link

Augmenting built-in objects

Augmenting built-in objects – discussion

Prototype gotchas

Summary

Exercises

6. Inheritance

Prototype chaining

Prototype chaining example

Moving shared properties to the prototype

Inheriting the prototype only

A temporary constructor – new F()

Uber – access to the parent from a child object

Isolating the inheritance part into a function

Copying properties

Heads-up when copying by reference

Objects inherit from objects

Deep copy

object()

Using a mix of prototypal inheritance and copying properties

Multiple inheritance

Mixins

Parasitic inheritance

Borrowing a constructor

Borrow a constructor and copy its prototype

Summary

Case study – drawing shapes

Analysis

Implementation

Testing

Exercises

7. The Browser Environment

Including JavaScript in an HTML page

BOM and DOM – an overview

BOM

The window object revisited

window.navigator

Your console is a cheat sheet

window.location

window.history

window.frames

window.screen

window.open()/close()

window.moveTo() and window.resizeTo()

window.alert(), window.prompt(), and window.confirm()

window.setTimeout() and window.setInterval()

window.document

DOM

Core DOM and HTML DOM

Accessing DOM nodes

The document node

documentElement

Child nodes

Attributes

Accessing the content inside a tag

DOM access shortcuts

Siblings, body, first, and last child

Walk the DOM

Modifying DOM nodes

Modifying styles

Fun with forms

Creating new nodes

DOM-only method

cloneNode()

insertBefore()

Removing nodes

HTML-only DOM objects

Primitive ways to access the document

document.write()

Cookies, title, referrer, domain

Events