From b67faa62292e71be3d447f5a2f14edf1404de500 Mon Sep 17 00:00:00 2001 From: Brent Guffens Date: Mon, 5 Feb 2018 12:59:34 +0100 Subject: [PATCH 01/19] Small language improvements --- 2-ui/1-document/01-browser-environment/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 0917fca9..520d0502 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -82,8 +82,8 @@ Browser Object Model (BOM) are additional objects provided by the browser (host For instance: -- [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differ between Windows/Linux/Mac etc). -- [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one. +- The [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differ between Windows/Linux/Mac etc). +- The [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one. Here's how we can use the `location` object: @@ -114,7 +114,7 @@ CSSOM specification : Describes stylesheets and style rules, manipulations with them and their binding to documents, see . HTML specification -: Describes HTML language (tags etc.) and also BOM (browser object model) -- various browser functions: `setTimeout`, `alert`, `location` and so on, see . It takes DOM specification and extends it with many additional properties and methods. +: Describes the HTML language (e.g. tags) and also the BOM (browser object model) -- various browser functions: `setTimeout`, `alert`, `location` and so on, see . It takes the DOM specification and extends it with many additional properties and methods. Now we'll get down to learning DOM, because the document plays the central role in the UI, and working with it is very complex. From 1f3b7cdffa2ca2ccc8856aa5c23b3309a150f438 Mon Sep 17 00:00:00 2001 From: Brent Guffens Date: Mon, 5 Feb 2018 16:55:51 +0100 Subject: [PATCH 02/19] Small readability and language improvements --- .../05-basic-dom-node-properties/article.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md index 2783c3a8..9520fce6 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/article.md +++ b/2-ui/1-document/05-basic-dom-node-properties/article.md @@ -78,7 +78,7 @@ Try it on `document.body`. ``` ````smart header="IDL in the spec" -In the specification classes are described using not JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand. +In the specification, classes are described not using JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand. In IDL all properties are prepended with their types. For instance, `DOMString`, `boolean` and so on. @@ -165,11 +165,11 @@ Sure, the difference is reflected in their names, but is indeed a bit subtle. - The `tagName` property exists only for `Element` nodes. - The `nodeName` is defined for any `Node`: - for elements it means the same as `tagName`. - - for other node types (text, comment etc) it has a string with the node type. + - for other node types (text, comment, etc.) it has a string with the node type. In other words, `tagName` is only supported by element nodes (as it originates from `Element` class), while `nodeName` can say something about other node types. -For instance let's compare `tagName` and `nodeName` for the `document` and a comment node: +For instance, let's compare `tagName` and `nodeName` for the `document` and a comment node: ```html run @@ -177,7 +177,7 @@ For instance let's compare `tagName` and `nodeName` for the `document` and a com ``` -There are other examples. The `style` attribute is a string, but `style` property is an object: +There are other examples. The `style` attribute is a string, but the `style` property is an object: ```html run
Hello
@@ -313,7 +313,7 @@ But there may be a possible problem with custom attributes. What if we use a non To avoid conflicts, there exist [data-*](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes) attributes. -**All attributes starting with "data-" are reserved for programmers' use. They are available in `dataset` property.** +**All attributes starting with "data-" are reserved for programmers' use. They are available in the `dataset` property.** For instance, if an `elem` has an attribute named `"data-about"`, it's available as `elem.dataset.about`. @@ -382,7 +382,7 @@ Methods to work with attributes are: - `elem.removeAttribute(name)` -- to remove the attribute. - `elem.attributes` is a collection of all attributes. -For most needs DOM properties can serve us well. We should refer to attributes only when DOM properties do not suit us, when we need exactly attributes, for instance: +For most needs, DOM properties can serve us well. We should refer to attributes only when DOM properties do not suit us, when we need exactly attributes, for instance: - We need a non-standard attribute. But if it starts with `data-`, then we should use `dataset`. - We want to read the value "as written" in HTML. The value of the DOM property may be different, for instance `href` property is always a full URL, and we may want to get the "original" value. From e83b8d0b41ed8931023135e4f642762194b05e8a Mon Sep 17 00:00:00 2001 From: Brent Guffens Date: Tue, 6 Feb 2018 09:55:22 +0100 Subject: [PATCH 07/19] Update article.md --- 2-ui/1-document/06-dom-attributes-and-properties/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/06-dom-attributes-and-properties/article.md b/2-ui/1-document/06-dom-attributes-and-properties/article.md index b69c86e8..6aad6e01 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/article.md +++ b/2-ui/1-document/06-dom-attributes-and-properties/article.md @@ -385,4 +385,4 @@ Methods to work with attributes are: For most needs, DOM properties can serve us well. We should refer to attributes only when DOM properties do not suit us, when we need exactly attributes, for instance: - We need a non-standard attribute. But if it starts with `data-`, then we should use `dataset`. -- We want to read the value "as written" in HTML. The value of the DOM property may be different, for instance `href` property is always a full URL, and we may want to get the "original" value. +- We want to read the value "as written" in HTML. The value of the DOM property may be different, for instance the `href` property is always a full URL, and we may want to get the "original" value. From 3334ce274eb1c13fd1c462b14620528d2d2a7761 Mon Sep 17 00:00:00 2001 From: Lakindu Akash Date: Mon, 5 Mar 2018 01:41:28 +0530 Subject: [PATCH 08/19] update code snippet that was marked as text. --- 1-js/04-object-basics/01-object/article.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/1-js/04-object-basics/01-object/article.md b/1-js/04-object-basics/01-object/article.md index 04f4f9e0..c103b862 100644 --- a/1-js/04-object-basics/01-object/article.md +++ b/1-js/04-object-basics/01-object/article.md @@ -83,7 +83,6 @@ let user = { ![](object-user-props.png) -````smart header="Trailing comma" The last property in the list may end with a comma: ```js let user = { @@ -92,7 +91,6 @@ let user = { } ``` That is called a "trailing" or "hanging" comma. Makes it easier to add/remove/move around properties, because all lines become alike. -```` ## Square brackets From 82a34d231f00da77a5b6ef73f1b07578ef051634 Mon Sep 17 00:00:00 2001 From: Brent Guffens Date: Mon, 5 Mar 2018 10:18:48 +0100 Subject: [PATCH 09/19] Small typo --- .../03-which-handlers-run/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md index 2355e535..d569f0e4 100644 --- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md @@ -13,4 +13,4 @@ button.addEventListener("click", handler); button.removeEventListener("click", handler); ``` -The handler `button.onclick` works independantly and in addition to `addEventListener`. +The handler `button.onclick` works independently and in addition to `addEventListener`. From 980dee303c77df0d70a5f6f907ea3cc461c0330b Mon Sep 17 00:00:00 2001 From: yanxun827 Date: Sat, 10 Mar 2018 18:49:13 +0000 Subject: [PATCH 10/19] Correct number of points --- 3-animation/1-bezier-curve/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/3-animation/1-bezier-curve/article.md b/3-animation/1-bezier-curve/article.md index 0d416257..8d52115e 100644 --- a/3-animation/1-bezier-curve/article.md +++ b/3-animation/1-bezier-curve/article.md @@ -26,7 +26,7 @@ If you look closely at these curves, you can immediately notice: 1. **Points are not always on curve.** That's perfectly normal, later we'll see how the curve is built. 2. **The curve order equals the number of points minus one**. -For two points we have a linear curve (that's a straight line), for three points -- quadratic curve (parabolic), for three points -- cubic curve. +For two points we have a linear curve (that's a straight line), for three points -- quadratic curve (parabolic), for four points -- cubic curve. 3. **A curve is always inside the [convex hull](https://en.wikipedia.org/wiki/Convex_hull) of control points:** ![](bezier4-e.png) ![](bezier3-e.png) From c360e9d5f9745a6bb59a5ff290bd68916115ddc5 Mon Sep 17 00:00:00 2001 From: snakecase <4579891+snakecase@users.noreply.github.com> Date: Sun, 11 Mar 2018 09:46:38 +0500 Subject: [PATCH 11/19] Fix incomplete variable in if...else example It is in section "Multiple '?'". --- 1-js/02-first-steps/10-ifelse/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md index eda17355..b3ab5997 100644 --- a/1-js/02-first-steps/10-ifelse/article.md +++ b/1-js/02-first-steps/10-ifelse/article.md @@ -188,7 +188,7 @@ The same logic using `if..else`: ```js if (age < 3) { message = 'Hi, baby!'; -} else if (a < 18) { +} else if (age < 18) { message = 'Hello!'; } else if (age < 100) { message = 'Greetings!'; From 6410140c37103f17ae4f119b5dfd3cfe754ef07e Mon Sep 17 00:00:00 2001 From: snakecase <4579891+snakecase@users.noreply.github.com> Date: Sun, 11 Mar 2018 10:44:54 +0500 Subject: [PATCH 12/19] Fix check for an empty input or ESC key press According to the task both of these should give an alert('Canceled'). Previous solution implied that both empty input and ESC key return null, but in Chrome 64.0.3282.186 an empty input returns '' instead of null. So we are adding an additional check. --- 1-js/02-first-steps/10-ifelse/4-check-login/solution.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/02-first-steps/10-ifelse/4-check-login/solution.md b/1-js/02-first-steps/10-ifelse/4-check-login/solution.md index cfe52074..b535650e 100644 --- a/1-js/02-first-steps/10-ifelse/4-check-login/solution.md +++ b/1-js/02-first-steps/10-ifelse/4-check-login/solution.md @@ -9,13 +9,13 @@ if (userName == 'Admin') { if (pass == 'TheMaster') { alert( 'Welcome!' ); - } else if (pass == null) { + } else if (pass == '' || pass == null) { alert( 'Canceled.' ); } else { alert( 'Wrong password' ); } -} else if (userName == null) { +} else if (userName == '' || userName == null) { alert( 'Canceled' ); } else { alert( "I don't know you" ); From a5e649d966f38f9225f38e1f921f79802a1bcd18 Mon Sep 17 00:00:00 2001 From: snakecase <4579891+snakecase@users.noreply.github.com> Date: Sun, 11 Mar 2018 11:00:24 +0500 Subject: [PATCH 13/19] Add a hint for empty input and pressing ESC during prompts Added this hint because it's not obvious for newcomers and because the task requires to check prompt for two different values to give alert('Canceled'). --- 1-js/02-first-steps/10-ifelse/4-check-login/task.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/1-js/02-first-steps/10-ifelse/4-check-login/task.md b/1-js/02-first-steps/10-ifelse/4-check-login/task.md index 4b371a1d..1d12cb09 100644 --- a/1-js/02-first-steps/10-ifelse/4-check-login/task.md +++ b/1-js/02-first-steps/10-ifelse/4-check-login/task.md @@ -20,4 +20,6 @@ The schema: Please use nested `if` blocks. Mind the overall readability of the code. +Hint: passing an empty input to a prompt returns an empty string `''`. Pressing `key:ESC` during a prompt returns `null`. + [demo] From 99bd54e62c412fd800983e34e07f4b8992ee5640 Mon Sep 17 00:00:00 2001 From: Felix Linker Date: Mon, 12 Mar 2018 14:31:14 +0100 Subject: [PATCH 14/19] Trivial typo-fix --- 6-async/03-promise-chaining/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/6-async/03-promise-chaining/article.md b/6-async/03-promise-chaining/article.md index 53e0bf4f..3df3b0da 100644 --- a/6-async/03-promise-chaining/article.md +++ b/6-async/03-promise-chaining/article.md @@ -140,7 +140,7 @@ new Promise(function(resolve, reject) { Here the first `.then` shows `1` returns `new Promise(…)` in the line `(*)`. After one second it resolves, and the result (the argument of `resolve`, here it's `result*2`) is passed on to handler of the second `.then` in the line `(**)`. It shows `2` and does the same thing. -So the output is again 1 -> 2 > 4, but now with 1 second delay between `alert` calls. +So the output is again 1 -> 2 -> 4, but now with 1 second delay between `alert` calls. Returning promises allows us to build chains of asynchronous actions. From c67ed3ea06d0cbc15ade8c9dd91fc8770adaa934 Mon Sep 17 00:00:00 2001 From: Andrew Date: Wed, 14 Mar 2018 14:35:32 +0200 Subject: [PATCH 15/19] Fix typo --- 1-js/08-error-handling/1-try-catch/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/08-error-handling/1-try-catch/article.md b/1-js/08-error-handling/1-try-catch/article.md index 19a1424a..689fc51e 100644 --- a/1-js/08-error-handling/1-try-catch/article.md +++ b/1-js/08-error-handling/1-try-catch/article.md @@ -295,7 +295,7 @@ try { As we can see, that's a `SyntaxError`. -And in our case, the absense of `name` could be treated as a syntax error also, assuming that users must have a `name`. +And in our case, the absence of `name` could be treated as a syntax error also, assuming that users must have a `name`. So let's throw it: From f2f34a8fd68055850155b1921fe3667ed0ad885a Mon Sep 17 00:00:00 2001 From: Iveren Favour Shaguy Date: Mon, 19 Mar 2018 13:40:59 +0100 Subject: [PATCH 16/19] Change tomateos to tomatoes on line 141 --- 1-js/05-data-types/07-map-set-weakmap-weakset/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/article.md b/1-js/05-data-types/07-map-set-weakmap-weakset/article.md index 36c8462a..0175243f 100644 --- a/1-js/05-data-types/07-map-set-weakmap-weakset/article.md +++ b/1-js/05-data-types/07-map-set-weakmap-weakset/article.md @@ -138,7 +138,7 @@ let recipeMap = new Map([ // iterate over keys (vegetables) for (let vegetable of recipeMap.keys()) { - alert(vegetable); // cucumber, tomateos, onion + alert(vegetable); // cucumber, tomatoes, onion } // iterate over values (amounts) From 0ad1b338aa3b7baf82be0f98cc1dd59716e6bf3d Mon Sep 17 00:00:00 2001 From: Martin Elstner Date: Mon, 26 Mar 2018 08:07:39 +0200 Subject: [PATCH 17/19] German translation started --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 48b2c0c6..6494e18e 100755 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ Published: In progress: - Chinese: the ongoing translation at [https://github.com/iliakan/javascript-tutorial-cn](https://github.com/iliakan/javascript-tutorial-cn), go ahead and join if you know Chinese. - Spanish: https://github.com/lmauromb/javascript-tutorial-es +- German: https://github.com/MartinEls/javascript-tutorial-de If you'd like to translate it into your language then fork the English tutorial and go ahead. I can publish the translation with your credits on a domain like fr.javascript.info or you can do it on your domain. From 7e183f85b18e58802a81c73a162f40e72b063c22 Mon Sep 17 00:00:00 2001 From: Sunil B N Date: Mon, 26 Mar 2018 23:13:55 +0530 Subject: [PATCH 18/19] Modified outputs in advanced programming and OOP chapters --- 1-js/06-advanced-functions/11-currying-partials/article.md | 2 +- .../02-property-accessors/article.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/06-advanced-functions/11-currying-partials/article.md b/1-js/06-advanced-functions/11-currying-partials/article.md index 717dccf4..e866f38a 100644 --- a/1-js/06-advanced-functions/11-currying-partials/article.md +++ b/1-js/06-advanced-functions/11-currying-partials/article.md @@ -95,7 +95,7 @@ user.sayNow = partial(user.say, new Date().getHours() + ':' + new Date().getMinu user.sayNow("Hello"); // Something like: -// [10:00] Hello, John! +// [10:00] John: Hello! ``` The result of `partial(func[, arg1, arg2...])` call is a wrapper `(*)` that calls `func` with: diff --git a/1-js/07-object-oriented-programming/02-property-accessors/article.md b/1-js/07-object-oriented-programming/02-property-accessors/article.md index db49450a..fa4d2216 100644 --- a/1-js/07-object-oriented-programming/02-property-accessors/article.md +++ b/1-js/07-object-oriented-programming/02-property-accessors/article.md @@ -128,7 +128,7 @@ Object.defineProperty(user, 'fullName', { alert(user.fullName); // John Smith -for(let key in user) alert(key); +for(let key in user) alert(key); // name, surname ``` Please note once again that a property can be either an accessor or a data property, not both. From 0a5d71de0c2c744298bb4d0b8aa79ec5c4db474e Mon Sep 17 00:00:00 2001 From: MargaritD Date: Sat, 31 Mar 2018 08:00:33 -0400 Subject: [PATCH 19/19] Update article.md --- 1-js/04-object-basics/01-object/article.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/1-js/04-object-basics/01-object/article.md b/1-js/04-object-basics/01-object/article.md index 04f4f9e0..f0841fa2 100644 --- a/1-js/04-object-basics/01-object/article.md +++ b/1-js/04-object-basics/01-object/article.md @@ -226,7 +226,7 @@ That can become a source of bugs and even vulnerabilies if we intent to store ar In that case the visitor may choose "__proto__" as the key, and the assignment logic will be ruined (as shown above). -There exist a way to make objects treat `__proto__` as a regular property, we'll cover it later, but first we need to know more about objects to understand it. +There is a way to make objects treat `__proto__` as a regular property, which we'll cover later, but first we need to know more about objects. There's also another data structure [Map](info:map-set-weakmap-weakset), that we'll learn in the chapter , which supports arbitrary keys. ```` @@ -370,7 +370,7 @@ Also, we could use another variable name here instead of `key`. For instance, `" ### Ordered like an object -Are objects ordered? In other words, if we loop over an object, do we get all properties in the same order that they are added in it? Can we rely on it? +Are objects ordered? In other words, if we loop over an object, do we get all properties in the same order they were added? Can we rely on this? The short answer is: "ordered in a special fashion": integer properties are sorted, others appear in creation order. The details follow. @@ -514,7 +514,7 @@ admin.name = 'Pete'; // changed by the "admin" reference alert(*!*user.name*/!*); // 'Pete', changes are seen from the "user" reference ``` -The example above demonstrates that there is only one object. Like if we had a cabinet with two keys and used one of them (`admin`) to get into it. Then, if we later use the other key (`user`) we would see changes. +The example above demonstrates that there is only one object. As if we had a cabinet with two keys and used one of them (`admin`) to get into it. Then, if we later use the other key (`user`) we would see changes. ### Comparison by reference @@ -541,7 +541,7 @@ let b = {}; // two independent objects alert( a == b ); // false ``` -For comparisons like `obj1 > obj2` or for a comparison against a primitive `obj == 5`, objects are converted to primitives. We'll study how object conversions work very soon, but to say the truth, such comparisons are necessary very rarely and usually are a result of a coding mistake. +For comparisons like `obj1 > obj2` or for a comparison against a primitive `obj == 5`, objects are converted to primitives. We'll study how object conversions work very soon, but to tell the truth, such comparisons are necessary very rarely and usually are a result of a coding mistake. ### Const object @@ -739,4 +739,4 @@ There are many other kinds of objects in JavaScript: They have their special features that we'll study later. Sometimes people say something like "Array type" or "Date type", but formally they are not types of their own, but belong to a single "object" data type. And they extend it in various ways. -Objects in JavaScript are very powerful. Here we've just scratched the surface of the topic that is really huge. We'll be closely working with objects and learning more about them in further parts of the tutorial. +Objects in JavaScript are very powerful. Here we've just scratched the surface of a topic that is really huge. We'll be closely working with objects and learning more about them in further parts of the tutorial.