Book Image

Learn ECMAScript - Second Edition

By : MEHUL MOHAN, Narayan Prusty
Book Image

Learn ECMAScript - Second Edition

By: MEHUL MOHAN, Narayan Prusty

Overview of this book

Learn ECMAScript explores implementation of the latest ECMAScript features to add to your developer toolbox, helping you to progress to an advanced level. Learn to add 1 to a variable andsafely access shared memory data within multiple threads to avoid race conditions. You’ll start the book by building on your existing knowledge of JavaScript, covering performing arithmetic operations, using arrow functions and dealing with closures. Next, you will grasp the most commonly used ECMAScript skills such as reflection, proxies, and classes. Furthermore, you’ll learn modularizing the JS code base, implementing JS on the web and how the modern HTML5 + JS APIs provide power to developers on the web. Finally, you will learn the deeper parts of the language, which include making JavaScript multithreaded with dedicated and shared web workers, memory management, shared memory, and atomics. It doesn’t end here; this book is 100% compatible with ES.Next. By the end of this book, you'll have fully mastered all the features of ECMAScript!
Table of Contents (18 chapters)
Title Page

Modern JavaScript browser APIs

HTML5 brought a lot of support for some awesome and cool APIs in JavaScript, right from the start. Although some APIs were released with HTML5 itself (such as the Canvas API), some were added later (such as the Fetch API).

Let's see some of these APIs and how to use them with some code examples.

Page Visibility API - is the user still on the page?

The Page Visibility API allows developers to run specific code whenever the page user is on goes in focus or out of foucs. Imagine you run a game-hosting site and want to pause the game whenever the user loses focus on your tab. This is the way to go!

function pageChanged() {
  if (document.hidden) {
    console.log('User is on some other tab/out of focus') // line #1
  } else {
    console.log('Hurray! User returned') // line #2

document.addEventListener("visibilitychange", pageChanged);

We're adding an event listener to the document; it fires whenever the page is changed. Sure, the pageChanged function gets an...