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" ); 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] 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!'; diff --git a/1-js/04-object-basics/01-object/article.md b/1-js/04-object-basics/01-object/article.md index 04f4f9e0..2b6382b8 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 @@ -226,7 +224,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 +368,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 +512,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 +539,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 +737,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. 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) 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. 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: diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index e409d882..2266a2de 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -80,8 +80,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: @@ -112,7 +112,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. diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md index 596192a1..0ed407ca 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md +++ b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md @@ -4,7 +4,7 @@ importance: 5 # What's in the nodeType? -What the script shows? +What does the script show? ```html diff --git a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md index 40bea8a0..efe50b48 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md +++ b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md @@ -4,7 +4,7 @@ importance: 3 # Tag in comment -What this code shows? +What does this code show? ```html ``` -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
@@ -311,7 +311,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`. @@ -380,7 +380,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. +- 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. 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`. 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) 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. 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.