Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Object-Oriented JavaScript
  • Toc
  • feedback
Object-Oriented JavaScript

Object-Oriented JavaScript

By : Antani, Stoyan Stefanov
4.5 (6)
close
Object-Oriented JavaScript

Object-Oriented JavaScript

4.5 (6)
By: Antani, Stoyan Stefanov

Overview of this book

JavaScript is an object-oriented programming language that is used for website development. Web pages developed today currently follow a paradigm that has three clearly distinguishable parts: content (HTML), presentation (CSS), and behavior (JavaScript). JavaScript is one important pillar in this paradigm, and is responsible for the running of the web pages. This book will take your JavaScript skills to a new level of sophistication and get you prepared for your journey through professional web development. Updated for ES6, this book covers everything you will need to unleash the power of object-oriented programming in JavaScript while building professional web applications. The book begins with the basics of object-oriented programming in JavaScript and then gradually progresses to cover functions, objects, and prototypes, and how these concepts can be used to make your programs cleaner, more maintainable, faster, and compatible with other programs/libraries. By the end of the book, you will have learned how to incorporate object-oriented programming in your web development workflow to build professional JavaScript applications.
Table of Contents (19 chapters)
close
close
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Object-Oriented JavaScript
1. Object-Oriented JavaScript
A bit of history
ECMAScript 5
ECMAScript 6
Object-oriented programming
OOP summary
Setting up your training environment
Summary
2
2. Primitive Data Types, Arrays, Loops, and Conditions
2. Primitive Data Types, Arrays, Loops, and Conditions
Variables
Operators
Primitive data types
Primitive data types recap
Arrays
Conditions and loops
Comments
Exercises
Summary
3
3. Functions
3. Functions
What is a function?
Default parameters
Rest parameters
Spread operators
Scope of variables
Block scope
Functions are data
Closures
IIFE versus blocks
Arrow functions
Exercises
Summary
4
4. Objects
4. Objects
From arrays to objects
Object properties and attributes
ES6 object methods
Destructuring
Built-in objects
ES6 array methods
Lexical this in arrow functions
Exercises
Summary
5
5. ES6 Iterators and Generators
5. ES6 Iterators and Generators
For...of loop
Iterators and iterables
Generators
Collections
Summary
6
6. Prototype
6. Prototype
The prototype property
Using the prototype's methods and properties
Augmenting built-in objects
Exercises
Summary
7
7. Inheritance
7. Inheritance
Prototype chaining
Inheriting the prototype only
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
Using object() method
Using a mix of prototypal inheritance and copying properties
Multiple inheritance
Parasitic inheritance
Borrowing a constructor
Case study - drawing shapes
Exercises
Summary
8
8. Classes and Modules
8. Classes and Modules
Defining classes
Subclassing
Modules
Summary
9
9. Promises and Proxies
9. Promises and Proxies
Asynchronous programming model
JavaScript call stack
Promises
Summary
10
10. The Browser Environment
10. The Browser Environment
Including JavaScript in an HTML page
BOM and DOM - an overview
BOM
DOM
Events
XMLHttpRequest
Exercises
Summary
11
11. Coding and Design Patterns
11. Coding and Design Patterns
Coding patterns
Design patterns
Summary
12
12. Testing and Debugging
12. Testing and Debugging
Unit testing
JavaScript debugging
Summary
13
13. Reactive Programming and React
chevron up
13. Reactive Programming and React
Reactive programming
React
Virtual DOM
Installing and running react
Summary
14
A. Reserved Words
A. Reserved Words
Keywords
ES6 reserved words
Previously reserved words
15
B. Built-in Functions
B. Built-in Functions
16
C. Built-in Objects
C. Built-in Objects
Object
ES6 addition to objects
Array
Function
Boolean
Number
String
Date
Math
RegExp
Error objects
JSON
17
D. Regular Expressions
D. Regular Expressions
18
E. Answers to Exercise Questions
E. Answers to Exercise Questions
Chapter 2, Primitive Data Types, Arrays, Loops, and Conditions
Chapter 3, Functions
Chapter 4, Objects
Chapter 5, Prototype
Chapter 6, Inheritance
Chapter 7, The Browser Environment

Virtual DOM

Let's take a moment to understand what is a Virtual DOM. We discussed DOM (document object model), a tree structure of HTML element on a web page. DOM is de facto, and the primary rendering mechanism of the web. The DOM APIs, such as getElementById(), allow traversing and modification of the elements in the DOM tree. DOM is a tree and this structure works pretty well with traversal and updating of elements. However, both the traversing and updating of DOM is not very quick. For a large page, the DOM tree can be pretty big. When you want a complex UI that has bunch of user interactions, updating DOM elements can be tedious and slow. We have tried jQuery and other libraries to reduce the tedious syntax for frequent DOM modifications, but DOM as a structure itself is quite limited.

What if we don't have to traverse the DOM over and over again to modify elements? What if you just declare how a component should look like and let someone handle the logic of how to render...

End of Section 4
Next Section
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete