The JavaScript Way book

Last update: Dec 30, 2022

Overview

The JavaScript Way

A gentle introduction to an essential language.

Overview

This book aims to be a useful companion for anyone wishing to (re)discover the many facets of JavaScript. Numerous brain cycles were spent to make it:

Beginner-friendly yet comprehensive. From the very basics of programming up to front-end and back-end web development, a lot of topics are covered in a simple and accessible way. No prior knowledge needed!
Standards-aligned. The book is entirely written using the recent ES2015 syntax, giving you future-proof knowledge. From start to finish, it enforces good programming habits, embraces the ubiquitous JavaScript tools ESLint and Prettier and closely follows the popular AirBnb Style Guide.
Hands-on. No real learning happens without practicing! Each chapter is accompanied by a series of exercises to put your newly acquired skills into action. A three-part project will guide you in the creation of a social news web application (see it in action).
Easy to follow. Code along directly in your browser or build an efficient JavaScript development environment on your local machine.

Publishing

This repository contains the book manuscript files, free to read for everyone. Your contributions are most welcome.

You can also download the entire book as a PDF file.

For a better reading experience, this content is also available:

As a multi-format, DRM-free eBook on Leanpub.
As a DRM-free Kindle or paperback book on Amazon.
As an interactive online course on Educative.

Supporting this work

A lot of time and energy went into this content. If you find it useful and want to support this effort, here's what you can do:

Buy it under one of the available formats (see above). Any financial contribution would be much appreciated.
Rate it or leave a review on Goodreads or Amazon.
Spread the word about it.

Thanks in advance for your support!

For your convenience, source code for exercises and final project is available.

Introduction
Part I: Learn to code programs
Part II: Create interactive web pages
Part III: Build web applications
Conclusion
- Summary and perspectives
- Acknowledgements
Appendices
- Style guide

Comments

Use the right typography trouhout the book

https://webdesignledger.com/common-typography-mistakes-apostrophes-versus-quotation-marks/

Maybe not high priority but i wanted to point this out. The book has some quirks regarding typography. We could start to get this right.

opened by bigfatbird 6
Console output of strings can be confusing for beginners

In the chapter01.md, there are screenshots of some console outputs, They show strings in quotes, but console.log() produces string output without quotes (at least in the last Chrome, Firefox, and Node.js). Could it cause some confusing for beginners?

opened by vsemozhetbyt 6
Is this book "The JavaScript Way" is available for free ?

But I see here need to pay -> Also, I see there some content in repo and also read your article on medium but still not clear. So would you like clear.

opened by jitendra3109 4
An ambiguity in the chapter04.md

Improve the program so that it also shows odd numbers. Improve it again so that the initial number is given by the user.

This program must show exactly 10 numbers including the first one, not 11 numbers!

If the initial number is given by the user, could this program show less than 10 numbers?

opened by vsemozhetbyt 4
chapter 22 > weather

Hello, on the Key-based authentication chapter, the API access key is not free anymore. I made an account and when I went to the weather API for developers sublink found this:

To improve our services and enhance our relationship with our users, we will no longer provide free weather API keys as part of our program. If you have been directed to download our Weather Underground free API key by a third party provider, please contact your vendor for resolution.

P.s thank you for the great book 👍

opened by AlexOros 3

ch18 animation error

When I ran the code in thejsway/chapter18.md at master · bpesquet/thejsway, I got the error "block not defined" from const blockWidth = parseFloat(getComputedStyle(block).width);. So I replaced the block with blockElement, but there is another error "ch18-2.html:9 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. at moveBlock (ch18-2.html:9)". I ran this program in Chrome, and the source code is

<head>
    <script>
      const moveBlock = () => {
        const xBlock = parseFloat(getComputedStyle(blockElement).left)
        const xMax = parseFloat(getComputedStyle(frame).width)
        if (xBlock + blockWidth <= xMax) {
          blockElement.style.left = (xBlock + movement) + 'px'
          animationId = requestAnimationFrame(moveBlock)
        } else {
          cancelAnimationFrame(animationId)
        }
      }

      const frameElement = document.getElementById("frame")
      const blockElement = document.getElementById("block")
      const blockWidth = parseFloat(getComputedStyle(blockElement).width)
      const movement = 7

      let animation = requestAnimationFrame(moveBlock)
    </script>
    <link href="ch18-2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="frame">
  <div id="block"></div>
</div>
</body>

Where have I done wrong?

opened by liangpeili 3

chapter02.md: some vagueness
For number variables, the operators += and ++ can increment (increase by 1) their value.

+= can increase more than by 1 (a += 2).

You can also increase or decrease a value of a number with += and ++.

Should the -= and -- be mentioned to match "decrease"?

In JavaScript and many other programming languages, a code block is a portion of a program delimited by a pair of opening and closing braces. By default, a JavaScript program forms one block of code.

let nb1 = 0; { nb1 = 1; // OK : nb1 is declared in the parent block const nb2 = 0; } console.log(nb1); // OK : nb1 is declared in the current block console.log(nb2); // Error! nb2 is not visible here

Maybe it is worth to be noted that a file can produce a code block (scope) without braces (otherwise "parent block" can be confusing for beginners here).

I may be wrong, but nb abbreviation is not common for "number" in English (compare: https://fr.wikipedia.org/wiki/NB vs https://en.wikipedia.org/wiki/NB). Maybe num is more usual (if you decide to replace, do not forget places like this)
opened by vsemozhetbyt 3
Chapter 06 - arrays named "values"

In the "Sum of values" and "Array maximum" problems at the end of Chapter 6, students are asked to:

Write a program that creates the following array, (...) const values = [3, 11, 7, 2, 9, 10];

Following these instructions will lead to problems when attempting to do anything with the array, as values is interpreted as the Object.values() method.

const myArray = [1, 2, 3] myArray.forEach(element => console.log(element)) // behaves as expected

const values = [1, 2, 3] values.forEach(element => console.log(element)) //TypeError: values.forEach is not a function

Naming the array something else like "numbers" might avoid some confusion.

opened by Christina-Milner 2
Contributing Additional Exercises
I have a number of exercises that I have been using for years that I would also like to integrate or reference at appropriate points in the book. What is the best way to do this? I see two ways:

Add them to the book itself

Add them as separate repos and refer to them in book

Given the growing popularity of the book, I propose exercise contributions be kept in their own repos, maintained by their own contributors, and that some way to reference these additional exercises be added to the book itself in order to inform readers that they exist, perhaps in a special Forward. This way the book itself will not be overwhelmed with exercises and readers can identify their preferred set of exercises based on their interests and needs.
opened by rwxrob 2
Add bracket notation section and debit user story to bank model

This will add a section on accessing object properties using bracket notation. It follows the section on dot notation and has a summary at the end to explain the differences. Also, I added a debit method user story for the bank model problem at the end of the chapter.

opened by mtrivera 2
chapter17 event word

In this part of chapter 17.

You can event cancel the request to the server by calling the preventDefault() method on the Event object associated to the event.

Is this 'event' here should be replaced by 'even' instead?

opened by liangpeili 2
chapter10.md: some missing lines of codes

At the "Splitting the program into functions", the particular code is written as: // Get movies by Christopher Nolan const nolanMovies = () => { for (const movie of movieList) { if (movie.director === "Christopher Nolan") { nolanMovieList.push(movie); } } };

Where it should be: // Get movies by Christopher Nolan const nolanMovies = () => { const nolanMovieList = []; for (const movie of movieList) { if (movie.director === "Christopher Nolan") { nolanMovieList.push(movie); } } return nolanMovieList; };
enhancement help wanted

opened by Jemaz 7

Releases(v1.2)

v1.2(Jan 4, 2023)
Content checkup (environment setup, TL;DR paragraphs, remaining issues, ESLint configuration, etc)

Online version and separate book manuscript repository

Better looking PDF, ebook and paperback outputs (book format, color printing, image sizes, etc)

Cover change

Source code(tar.gz)
Source code(zip)
v1.1(May 5, 2020)

Source code(tar.gz)
Source code(zip)

The JavaScript Way book

Related tags

Overview

The JavaScript Way

Overview

Publishing

Supporting this work

Table of contents

Comments

Releases(v1.2)

v1.2(Jan 4, 2023)

v1.1(May 5, 2020)

Owner

The JavaScript Way

Awesome-book is an online library website where a user can store a collection of books. Different book can be added and removed. Built with JavaScript using Dom

A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

:books: The definitive guide to TypeScript and possibly the best TypeScript book :book:. Free and Open Source 🌹

The Bookstore is a website that allows the user to :display a list of books , Add a book and remove a selected book.

BookStore is a website that allows a given user to view a list of books, to add a new book and remove a given book.

This is an app that displays a list of books, allow users add a book and remove a selected book.

The Bookstore is a website where the user can display a list of books, add a book by providing a title, an author, and selecting from the categories, and remove a selected book.

Awesome Books project : An online Book Library. Storing book information using local storage and displaying it as a list on HTML page

The JavaScript Way book

Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.

🎨 Beautify your github profile with this amazing tool, creating the readme your way in a simple and fast way 🚀 The best profile readme generator you will find ⚡

A book series on JavaScript. @YDKJS on twitter.

Awesome book website, small online library to store books when added to the list we have implemented this using a plaint JavaScript!

Awesome Books. In this project, I built a basic website that allows users to add/remove books from a book list. This project is build with JavaScript.

Since Polisens web queueing solution for getting a passport sucks, and it is more or less impossible to book a time, I wrote this small javascript. What it does is that it automates the searching for a bookable time. In the file you just change the constants to your information and away you go. :)

This is a project that allows users to add/remove book from a list. we accomplish this by usig javascript oject.

An free e-book entirely about JavaScript objects

Awesome book with ES6, this project is build using HTML,CSS, JavaScript ES6 the project allows you to add books and save them with the author , for another time checks

This project is created to store the name of the book and the name of its author, build with JavaScript.