javascript-tutorial / en.javascript.info

Modern JavaScript Tutorial

The Modern JavaScript Tutorial

This repository hosts the English content of the Modern JavaScript Tutorial, published at https://javascript.info.

Translations

We'd like to make the tutorial available in many languages. Please help us to translate.

See https://javascript.info/translate for the details.

Contributions

We'd also like to collaborate on the tutorial with other people.

Something's wrong? A topic is missing? Explain it to people, add it as PR 👏

You can edit the text in any editor. The tutorial uses an enhanced "markdown" format, easy to grasp. And if you want to see how it looks on-site, there's a server to run the tutorial locally at https://github.com/javascript-tutorial/server.

The list of contributors is available at https://javascript.info/about#contributors.

Structure

Every chapter, article, or task has its folder.

The folder is named like N-url, where N is a number for the sorting purposes and URL is the URL part with the title of the material.

The type of the material is defined by the file inside the folder:

• index.md stands for a chapter
• article.md stands for an article
• task.md stands for a task (solution must be provided in solution.md file as well)

Each of these files starts from the # Main header.

It's very easy to add something new.

---

♥
Ilya Kantor @iliakan

en.javascript.info's Issues

508 section for event.preventDefault

Without changing what you have, I would put a note about how preventing the default behavior of an anchor or submit button changes its intention and is therefore, no longer semantic and 508 compliant. So, anchors navigate to parts of pages or external pages, buttons perform actions and submit buttons submit forms. If you are doing anything else with these elements you should consider using another element.

New function syntax is actually an example

https://github.com/iliakan/javascript-tutorial-en/blob/master/1-js/06-advanced-functions/07-new-function/article.md

As far as I understand syntax section in this tutorial usually a scheme similar to MDN. (not executable, general Idea). But this chapter uses real-life example as syntax:

let func = new Function('a', 'b', 'return a + b');

Shouldn't it be:

new Function ([arg1[, arg2[, ...argN]],] functionBody)

Optional dark theme

Many users like it, many users need it because of sensitive eyes, bad displays, low light conditions. This is called accessibility.

Also, MDN is white only - so dark theme will be your competitive adventure :)

Keyboard shortcut for back button

For Chrome and FF on Windows:

1. Click a title to go to a section.
2. Hit alt-left arrow to back to the previous page.
3. You end up at the previous chapter instead.

Hitting the back button works, but the keyboard shortcut for the back button does not.

Page tracker is in Russian instead of English

Pretty self explanatory. Happens in every page

consistency in tutorials

the first link i clicked on this tutorial landed me here:

double quotes, single quotes, bracket spacing, no bracket spacing.

If you're trying to teach people to learn a language you need to remain consistent. Possibly eslint your example code to make sure you keep a standard around or people will come out of the tutorial doing the same thing.

In section: "Classes" after subsection: "Getters/setters" in line 5 of code

In the constructor change this._name = name; into this.name = name; or as it is the code will not do what it is intended to do.

The final code should be:

class User {
  constructor(value) {
    // invokes the setter
    this.name = value;
  }

  get name() {
    return this._name;
  }

  set name(value) {
    if (value.length < 4) {
      alert("Name too short.");
      return;
    }
    this._name = value;
  }
}

Suggestion: Add some collaborators for PRs

It's just a suggestion based on what I saw during this month. I saw so many simple PRs which fix a typo waited almost weeks to merge.
I think adding some active collaborators if you're busy most of the time should be a useful thing because most of PRs are just fixing typos. For start I want to be one if you wish.
And I must thank you @iliakan for all your amazing works on this 👍

Event Delegation Counter example

In the event delegation section the counter example second button needs a "data-counter" for it to work.

mentioning strict mode

Function in if

let phrase = "Hello";

if (true) {
  let user = "John";

  function sayHi() {
    alert(`${phrase}, ${user}`);
  }
}

sayHi();

The result is an error.

The function sayHi is declared inside the if, so it only lives inside it. There is no sayHi outside.

When I execute the code I don't get any error unless in strict mode, I think it can be a good idea to remind others that in order to see the error we need to add `'use strict';' at the top of our code

'Edit on Github' in new tab?

More of a suggestion than an issue but wouldn't it be more intuitive to have Github open in a new tab to edit? (I'm talking about the link in the bottom-left corner)

Old javascript.info content

Is it possible to share old javascript info content as I always gone thru that, please.

Redirect www.javascript.info to javascript.info

Simply:

• https://javascript.info - works
• https://www.javascript.info - doesn't work

Invite proofreaders (contributors) to this project

The recent significant increase in this project's popularity and the backlog seem to indicate that this project could use more proofreaders.

_{I'm willing to volunteer. I'm an instructor with a code school and I already have my students using this. So I'd like to help out in a few areas where I can.}

Translate into Japanese

I started to translate this into Japanese.
https://github.com/KenjiI/javascript-tutorial-ja

This issue is for informing about that.
If some rules when I translate this, please let me know!

Are you interested in creating a javascript-tutorial-zh-tw for traditional Chinese?

I'm willing to translate your work into traditional Chinese. Thank you!

More A Question Than An Issue Really - An Observation To Be Correctly - Iliakan, Please Explain

@iliakan thanks for creating this site; it is really helpful to my learning js.

I'm not able to use Disqus comments at javascript.info and so I'm placing here mostly a question (it might turn out into an issue or perhaps a PR if you decide so which I'm not sure how to handle yet; my apologies). I'm really trying to understand the tutorial and 'playing around' with the code to grasp it. So please let me know how you want me to place future questions of this sort on javascript-tutorial-en.

So here is my question:
In the Drag'n'Drop with mouse events section in the very first and in the very last examples the code includes this one:

...
document.body.append(ball);
...

It seems to me that this line is redundant. After all ball is the id to one of the only two div's and so it is already part of the body hence it does not need any further appending. In my editor when I remove the above line i do not observe any difference in drag-n-drop behaviour of the ball. Let me know if I am not understanding anything. Thanks.

Making awesome videos for tutorials

I'm interested in making video tutorials based on each articles in javascript.info
If you don't have a problem with this, I can start making and then put them in article pages for better learning quality and also on YouTube for advertising the javascript.info site itself.
(I can take a test video for you if you wish)

Spelling error

At https://github.com/iliakan/javascript-tutorial-en/blame/master/1-js/02-first-steps/05-types/article.md#L26

"substraction" should read "subtraction."

Portuguese Translation

Opening this issue to inform I'll start translating it to pt-BR.
If someone want to help, PR my repo.

Spanish Translation

I'll start the Spanish translation.

Join me, if you know Spanish 😄 🇪🇸

https://github.com/lmauromb/javascript-tutorial-es

Offering to copyedit entire tutorial

@iliakan thanks for accepting my recent grammar/usage/punctuation pull request. If you'd like, I could review and edit the entire tutorial. With the little time I have available outside of work, I could probably complete the task in about four weeks. I just wanted to check with you to make sure this is something you are looking for, before I commit to the task. I suspect that this is something you'd be open to, considering the header on the tutorial pages explicitly requesting help with editing :)

I am a newbie coder just looking to get involved in a project somehow. As I mentioned in my pull request, my focus would only be grammar, word usage, and punctuation. I wouldn't be editing any sections of code (unless I was very confident an error existed), and I wouldn't seek to edit any of the text's style or meaning.

Let me know what you think. Cheers!

Do not break line on inline code

I think it would be better to keep inline code together:

Will this break something in the tutorial?

.main code {
    white-space: pre;
}

Use blockquotes for quotes, not code blocks

https://github.com/iliakan/javascript-tutorial-en/blob/master/1-js/01-getting-started/1-intro/article.md

The above markdown file uses code blocks for quoting. Instead, it should use > to blockquote.

Bug and a solution to "Mouse events basics" section and "Selectable list" task

Hello Ilaya and thank you very much for you fantastic work on
javascript.info and your positive impact on my learning javascript
and web development. Truly, your site is the very best from what I have seen
till now. My hope is that you will continue with this wonderful project into
the future.
Below I'm suggesting a correction to the task. In Mouse events basics section
and Selectable list task your solution has a bug. The bug: using Ctrl first
select few lines; next release Ctrl and select/unselect one line. Now you
should see what is happening: the lines are not unselected the same way as you
are clicking.
May I suggest this solution, which to my best knowledge is working very well (the head and body are same/unchanged):

  <script>
    ul.onmousedown = function(event)
    {
      return false;
    }
    ul.onclick = function(event)
    {
      if (event.ctrlKey)
      {
        event.target.classList.toggle('selected');
      }
      else
      {
        for (let li of ul.querySelectorAll('li'))
        {
          li.classList.remove('selected');
        }
        event.target.classList.add('selected');
      }
    }
  </script>

PS: I've posted this comment on Disqus site gives me terrible problems e.g. my comments don't show up on javascript.info. Also I cannot follow over people comments on Disqus. I've checked my settings with Disqus, but it's simply not working well. Hence, I'm double posting it this time. Other than that: thank you Ilaya for
javascript.info

PSS: Just to let you know that I've placed earlier 9 comments in Disqus (on javascript.info) but not even one has appeared on Disqus.

line 104

On line 104 is the following: "...don't let the visitor to interact..."

should either be "...don't let the visitor interact..."

or

"don't allow the visitor to interact."

What is the licence of the tutorial?

Hello,

I am considering to translate the tutorial in french, but I can't find a licence file in the main repo.
What is the licence of the tutorial?

Thank you for your work !

Convert the website in pdf

I liked this javascript website very much, but it would be great. If there is a pdf version of it.

Please write to the README/main page: why do we need this project if we already have the MDN?

Minor: includes does not use '==='

This section https://javascript.info/array-methods#indexof-lastindexof-and-includes describes 3 mehtods:

indexOf/lastIndexOf/includes

and tells us that they are using Strict Equality Comparison (===) for searching.

But includes uses SameValueZero. The only difference from (===) – it can find NaN:

const arr = [NaN];
console.log(arr.indexOf(NaN));// -1
console.log(arr.includes(NaN));// true

Maybe you can hide it under a spoiler "Advanced info" or something.

Explain actual use cases for property flags and descriptors

I don't understand if this article was anyway helpful in development. I liked the science behind it and how JS deals with objects, but can you explain to the readers why the article "Property flags and descriptors" is important?

Typo in 5-regular-expressions/15-regexp-infinite-backtracking-problem

In section Backtracking
"Then it tries to apply the start around the parentheses (\d+)*", "start" should be "star".

Translation in french

Hello

I have forked the project
Do you have any suggestions ?

Regards

https://github.com/artydev/javascript-tutorial-fr

Syntax error in an example

Dear Javascript.info team,
Through reading your great tutorial, I have recognized a syntax error on the following page :
https://javascript.info/javascript-specials#operators
Ternary section :
result B has space in between in the first row and the second row you've mentioned the same parameter but without space in between.
Best regards,
Mehyar Sawas

Incorrect Tutorial Information

In https://javascript.info/function-expressions-arrows#function-declaration-in-a-block
Function declared inside if's body block can execute outside without any problems. Only functions declared inside as variables are not visible outside.
Tested on

• Firefox 54.0.1 x64
• Chrome Version 59.0.3071.115 (Official Build) (64-bit)

Other(clearer) test example https://gist.github.com/Vedaz/335fdf79bfbd39ff86922f96152f8e5f

In "smart" tool-tip task (section: "Moving: mouseover/out, mouseenter/leave") remove "#mocha"

In "style.css" remove "#mocha" as in the:

body#mocha {
  margin: 0;
}

to:

body {
  margin: 0;
}

"#mocha" serves no purpose and removing it improves the styling!

Mutating array methods

This summary https://javascript.info/array-methods#summary tells the reader:

Of all these methods only sort, reverse and splice modify the array itself, the other ones only return a value.

But what about push, shift, pop, unshift which also were listed above?

Is it possible to highlight inline code?

I guess it would be easier to read the chapters if the inline code was highlighted, especially for: numbers, booleans, operators and keywords

• It will help distinct inline string from value (and many others potential mistakes):

true "true"

• Remove unnecessary quotes in some places like:

A regular equality check "==" has a problem

• Distinct resembling entities:

false falsy

• Make the entire tutorial more of the same style.

Before:

After:

problem in mobile view

the java script fundamental's items in the desktop view are not exactly the same as the items in the mobile view

Image error on "class patterns"

Hello. I noticed that in the 'class patterns' chapter, there is a small error (if I am following correctly) in an image (link below). On the Rabbit.prototype box it should contain the 'jump' function, which is in the code immediately above the image.

https://github.com/iliakan/javascript-tutorial-en/raw/master/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1.png

Nice work. Cheers.

5-regular-expressions/12-regexp-anchors quotes mismatch.

In the example: let str1 = 'Mary had a little lamb, it's fleece was white as snow';, single quote not escaped in the single quotes string.

Missing Array in data types

Section of data types is missing array

Wrong solution for http://javascript.info/closure#function-in-if

The solution for the task "Function in if" under "closures" chapter is incorrect. It does not give error and alerts "Hello, John".
The explanation with correct solution should explain "hoisting" of function declarations. In the example we are using function declaration for the function "sayHi", which roughly translates to
`let phrase = "Hello";

if (true) {
let user = "John";

var sayHi = function () {
alert(${phrase}, ${user});
}
}

sayHi();`

(This translation is just to explain the code here, I am aware function declaration and expression are different things)
Now since "var" is not bound with block scope of "if", it will be accessible outside and so we get the alert.

You can add this to explain it more clearly
`let phrase = "Hello";

if (true) {
let user = "John";

let sayHi = function () {
alert(${phrase}, ${user});
}
}

sayHi();`

Here we are using "let" and that is bound in the block scope of "if", so it is not accessible outside and will throw a referenceError.

P.S. - I am a fan of content and flow of javascript.info since a long time and you are doing a terrific job. Kudos.

Broken syntax highlight for a task

http://javascript.info/basic-dom-node-properties#tag-in-comment

https://github.com/iliakan/javascript-tutorial-en/blob/master/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md

https://github.com/iliakan/javascript-tutorial-en/blob/master/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md

Suggestion: export as epub/mobi

I think it would be great if the tutorial could be exported in the epub or mobi format through the website. Has there been any attempts or thoughts about doing this earlier?

lint code

Current code examples are inconsistent style-wise (at least in longer & more edited docs). You could manually fix, but might be better for a script to do it?

Maybe https://github.com/Qard/remark-lint-code
If you like stricter StandardJS: https://github.com/zeke/standard-markdown

Missing summary

class-inheritance

language inconsistency

There was language inconsistency in helper-like info, tooltips. they are in I-don't-even know what language it is haha..

I found it on, close button in solution in tasks, and in popup alert like in bootstrap component.

Use code playgrounds

First, thank you for this awesome tutorial.

For Tasks section, how about add online code playground, like jsbin, codepen, jsfidle, plunker etc ?

Sorry, my bad

Suggestion：will there be a part about Node.js ？

Since there is a part about browser , so i was wondering if Node.js will be covered in future . Strongly looking forward for that....