thejsway / thejsway Goto Github PK

View Code? Open in Web Editor NEW

7.9K 7.9K 798.0 26.68 MB

The JavaScript Way book

Home Page: https://thejsway.net

License: Other

CSS 100.00%

book es2015 es6 free javascript learn-to-code

thejsway's Introduction

The JavaScript Way

This repository contains the English source files for The JavaScript Way book.

You may browse its content here, but a nicer alternative is the online version which is free to read.

This book is also available on Leanpub (PDF, EPUB), Amazon (Kindle, paperback) and Educative (interactive course).

Development notes

The online version of the book is powered by Material for Mkdocs. To deploy it locally, clone or download this repository, install poetry then run the following commands in the cloned/downloaded folder:

poetry shell
poetry install
mkdocs serve

By default, the book is deployed at http://localhost:8000 on the local machine.

License

This work is published under a Creative Commons license. All code is licensed under an MIT license. Contributions are most welcome.

thejsway's People

Contributors

Stargazers

Watchers

Forkers

freeslugs newmountain kevokevoh sandybemonkey a-r-o-n kod3r jamais huzidaha opheron twocngdagz willyhakim vermuz fbialek yozhikvtumane erwyn keelybird imranhashim fr3ed0m lumiscript jsc-it trespassers-w xa-bi dermyhughes rainierlouis erohin 4beginner oguching dmoralestech isaclnunes skidmarx brentonstrine bhageena scottyrotten tonidezman alaev saimaung alexoragz srzorro wlmgithub triptych joshmblinds alexcurtin francoabaroa frankpf akirekadu freedomcodes prpgleto ryanlindsey codeguru85 typeshige utahdave k-rhen pineontheway limichelle21 xuchunyang mkelley82 rjm535 danhsh cartertsai sahinyanlik maja-lin firstblade jameslinus rlugojr kalidindis jross111 chrisswk neo112358 yelluw dsignr gauravmehla segmond liuyatao shambolic schober-ch readmenot chrisquinnr schofieldtyler sandhyaagarwal security-prince mani-mishra ganeshk254 kay2dan faizalpribadi elgusto mayk93 samuelfullerthomas raywadi magicknight florianloch adyworks coder-rks versutus ggenya132 csknk hparton albayraktaroglu dancodes risteapaul jarema-antosz

thejsway's Issues

Add "next/previous" links to the bottoms of each section in the book.

This would make it easier to work through the book in order, instead of opening in a new tab or going back and finding the next section.

If you'd like, I could do a PR for this.

broken link chapter 19

The link to the Discover Meteor book is wrong, the correct one starts with http not https. So is as follows: http://www.discovermeteor.com/.

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?

Upper case letter missing -> chapter 20

In the Web clients section there is this text:

Actually, the real client is a software program running on the machine. a well-known type of web client is the...

Since there is a full stop (dot) after the word machine, I think the next word (the article a in this case) should start with an upper case letter.

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.

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?

Are there complete code for exercises?

Error on Chapter 14

// Get all h2 elements into an array const titleElements = document.getElementsByTagName("h2"); console.log(titleElements[0]); // Show the first h2 console.log(titleElements.length); // 2 (total number of h2 elements in the page)

There should be 3 h2 elements. And the corresponding picture14-07 is not correct.

Picture14-01 and picture14-02 lack a few lines of code.

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.

An ambiguity in the chapter05.md

When it's done, update the program so that it shows the square of every number between 0 and 10.

Should it be mentioned that this program will not need parameters/arguments anymore?

Chapter 18 > Animate page elements

You shouldn't use 'left' for moving elements, because it will cause relayout of whole page on every frame. Use 'transform: translate'

Missing "instead" in chapter07.md

In the "Adding an element to an array" section, the sentence:

"To add an element at the beginning of an array, use the unshift() method of push()."

should probably be:

"To add an element at the beginning of an array, use the unshift() method instead of push()."

Chinese version

Can I translated this fantastic book into chinese on github?

chapter07.md: is there a reason why .shift() is not mentioned?

It seems to be a simple and useful method, easier than .splice() for the first element removing, and somehow lacking for complete symmetry with .push(), .unshift() and .pop().

Translation in french

I want to do the translation of the book in french. @bpesquet

Wrong word Chapter 18

In the first paragraph of the "Start an animation" section, there is this sentence:

It grabs the current position of the block's left border than adds the value contained in the movement variable.

I think the there's a typo in the word "than", seems like it is "then" the correct one!

Indonesian version

Hello,
any possibilities whether I can translate it to Indonesian ? thanks

French language in the pictures from chapter11.md

Maybe the screenshots can be taken from a browser with English interface, as well as the screenshots in the chapter02.md.

Syntax error in Character class example/Chapter 9

if (target.health > 0) {
        console.log(`${target.name} has ${target.health} health points left`);
      } else {
        target.health = 0;
        const bonusXP = 10;
        console.log(
          `${this
            .name} eliminated ${target.name} and wins ${bonusXP} experience points`
        );
        this.xp += bonusXP;

In this if statement the line
${this.name} eliminated ${target.name} and wins ${bonusXP} experience points
Should be one line.

Typo in 'Appendices > Environment setup > Install Node.js and npm'

I think node --version is a correct command for node version.

By the way, thank you for your book.

The file images/chapter25-06.png seems to be missing

I was checking the markdown files and it contains a reference here ![Execution result](images/chapter25-06.png)

Seems like a missing file.

Chapter 16 > Reacting to common events > Key presses. Typo in the second paragraph

This paragraph has a typo where "Yhe" should be "The"

The following example shows in the console the character associated to a pressed key. Yhe character info is given by the charCode property of the Event object associated to the event. This property returns a numerical value (called Unicode value) that can be translated to a string value by the String.FromCharCode() method.

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 👍

Chapter 14 ->link broken

In the "Choosing a selection method" section the link in the word slower (https://jsperf.com/getelementsbyclassname-vs-queryselectorall/195), it's down!

An output of a program in the chapter10.md

In this output, the last number for me is 8.6, not 7.071428571428571.

chapter14.md: "wonders" should be "exists".

Chapter 16 -> Event propagation

The stopPropagation()-method should not be included in the first example. Only in the second.

In the first example, all three items are shown in the console, even though e.stopPropagation() is used.

https://github.com/bpesquet/thejsway/blob/master/manuscript/chapter16.md#event-propagation

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; };

You can use the forEach() on NodeList

https://developer.mozilla.org/en-US/docs/Web/API/NodeList
"Although NodeList is not an Array, it is possible to iterate on it using forEach(). Several older browsers have not implemented this method yet."

Add Solutions Repo

Would be useful if there is a solutions repo for the exercises for people who get stuck.

Chap 11: French language screenshots should be in English

This was mentioned in #74. To ensure consistency across the book, program outputs and dialog boxes should be in English.

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)

Plans for content less web-related?

Hi. This has been a great resource so far. Are there any plans of expanding it so it's more about writing JavaScript logic that is not related to a DOM?

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.

Chapter 14 -> missing word

I'm not sure but seems like the word "method" is missing between contains() and "on":

...by calling the contains() on the class list,

The sentence it's in the Classes section.

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.

translation into Chinese

@bpesquet Hello Sir I'd like to participate in the translation of this nice book to Chinese. Any repo or team already built ?

Tks in advance

thepythonway

do u have any plans to write a book about python3 just like thejsway @bpesquet

Machine language != Assembly language

First: thanks for making this book available!

I just came across the following in intro02.md:

The only programming language directly understandable by a computer is machine language, also known as assembly language.

I believe this is incorrect... Machine language and assembly are actually two distinct things. Machine language usually refers to the actual binary format understood by the processor, that is, the set of ones and zeros that you feed into it to make it do stuff. Assembly, on the other hand, is a (barely) human-readable language that translates nearly one-to-one into machine code... but not quite. One substantial difference of assembly is the ability to use abstract labels for jump locations and have the jump address offsets computed automatically (instead of having to compute them manually, and then having to change them all any time you add/remove any code between them): https://stackoverflow.com/a/3551967 . Also, in some cases assembly language include pseudo-ops, which don't always translate to the same machine instruction or which translate to multiple machine instructions: https://stackoverflow.com/a/40784745 .

Hope that helps!

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?

Added PR for chapter 6 - Strings

Salut @bpesquet

I added a PR for chapter 8 - Strings

It is worth noting that once you accept these pull requests, the document becomes a multi-author document

I note that you do not have a copyright notice. Legally copyright notices are no longer required - though many authorities advise including one.

https://en.wikipedia.org/wiki/Copyright_notice#Reasons_to_include_an_optional_copyright_notice

May I suggest adding thee words to the LIVENSE page:

Also in your LICENSE page you include the Creative Commons advisory text before and after the actual license. You might consider deleting the CC comments.

Theo

Jsvay

leave vs let -> Chapter 18

In the "An alternative: CSS animations" section, there is a comment in one of the lines of code that says:

/* Let the block in its final position */

First of all, I should note I'm not a native English speaker. But, I think the word you meant instead of let it is "leave". Let as long as I know, gives the sense (among others) of allowing or making something to happen, and leave is it more similar to putting something in somewhere.

By the way, is it ok to open an issue for each think I notice as I'm advancing in the translation, or do you prefer I collect all of them and open only one issue in each chapter. I do no not want to become anoying!

function instead of functions -> Chapter 18

At the end of the "Stop an animation" section, there is this paragraph:

The cancelAnimationFrame() functions stops the animation and takes the ID of the animation set by a prior call to requestAnimationFrame().

In the previous code to this paragraph the function cancelAnimationFrame() is only used once. So, I think the word function must be singular and not plural! Seems like just a typo!

broken link / Chapter 17

the following text contains a broken link:
For a more general recap on forms, check out this course chapter on OpenClassrooms.

By the way, what should I do with these links in the spanish version? With sources from the MDN or wikipedia I just replace them with their spanish equivalent, but with some other souces there is no spanish version. In a previous chapter I chose another source from the wen on the same topic, but I don't know if this is correct or allowed.

Typo in Chapter 17

The word "offered" is misspelled as 'offedred'

Thanks for this awesome book!

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?

intro01.md - appendix link issue

https://github.com/bpesquet/thejsway/blob/master/manuscript/intro01.md
"Refer to the appendix for details on both"

The appendix link doesn't appear to go to any appendix.
Maybe I'm missing something.

Pull request for chapter on arrays - a sample of suggestions

Salut @bpesquet

Thank you for creating this simple, readable, modern introduction to my favorite language.

I really enjoy that you are living in the present/future and ignoring all the outdated stuff.

Separately, I am making a pull request for some suggestions for your chapter on Arrays.

If you like this effort, then I can keep on working on the other chapters.

Theo

Correct typo in charter 18

Typo:

Section: https://github.com/bpesquet/thejsway/blob/master/manuscript/chapter18.md#kick-off-a-repeated-action

which can bu used to further modify it => which can be used to further modify it

Code:
Section: https://github.com/bpesquet/thejsway/blob/master/manuscript/chapter18.md#animate-page-elements

`// Move the block to the left
const moveBlock = () => {
// Convert the left position of the block (value of the form "XXpx") to a number
const xBlock = parseFloat(getComputedStyle(blockElement ).left);
// Move the block to the right
blockElement .style.left = (xBlock + movement) + "px";
// Have the browser call moveBlock as soon as possible
requestAnimationFrame(moveBlock);
};

const frameElement = document.getElementById("frame");
const blockElement = document.getElementById("block");

// Movement value in pixels
const movement = 7;

// Start the animation
requestAnimationFrame(moveBlock);`

Thanks,
Phuc Thai