From f6c2b06d1235f63148b162f2eb3cb35b456dbf69 Mon Sep 17 00:00:00 2001 From: Jeff Chase Date: Tue, 1 Mar 2022 01:55:01 -0500 Subject: [PATCH 01/54] Date task solution: use standard date time string The Date article only explains standard strings for date parsing. Non-standard strings are implementation dependent and should not be used. --- 1-js/05-data-types/11-date/1-new-date/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/11-date/1-new-date/solution.md b/1-js/05-data-types/11-date/1-new-date/solution.md index bed449453..18286c336 100644 --- a/1-js/05-data-types/11-date/1-new-date/solution.md +++ b/1-js/05-data-types/11-date/1-new-date/solution.md @@ -13,6 +13,6 @@ We could also create a date from a string, like this: ```js run //new Date(datastring) -let d2 = new Date("February 20, 2012 03:12:00"); +let d2 = new Date("2012-02-20T03:12"); alert( d2 ); ``` From 1dcf503dce39d01880d96ecdadd8ada69129e00b Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Fri, 6 May 2022 19:49:20 +0600 Subject: [PATCH 02/54] add commas --- 1-js/05-data-types/04-array/article.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md index 95a78f29a..00bc3d601 100644 --- a/1-js/05-data-types/04-array/article.md +++ b/1-js/05-data-types/04-array/article.md @@ -6,7 +6,7 @@ But quite often we find that we need an *ordered collection*, where we have a 1s It is not convenient to use an object here, because it provides no methods to manage the order of elements. We can’t insert a new property “between” the existing ones. Objects are just not meant for such use. -There exists a special data structure named `Array`, to store ordered collections. +There exists a special data structure, named `Array`, to store ordered collections. ## Declaration @@ -136,7 +136,7 @@ A [queue](https://en.wikipedia.org/wiki/Queue_(abstract_data_type)) is one of th Arrays support both operations. -In practice we need it very often. For example, a queue of messages that need to be shown on-screen. +In practice, we need it very often. For example, a queue of messages that need to be shown on-screen. There's another use case for arrays -- the data structure named [stack](https://en.wikipedia.org/wiki/Stack_(abstract_data_type)). @@ -145,7 +145,7 @@ It supports two operations: - `push` adds an element to the end. - `pop` takes an element from the end. -So new elements are added or taken always from the "end". +So new elements are added or taken, always from the "end". A stack is usually illustrated as a pack of cards: new cards are added to the top or taken from the top: @@ -153,9 +153,9 @@ A stack is usually illustrated as a pack of cards: new cards are added to the to For stacks, the latest pushed item is received first, that's also called LIFO (Last-In-First-Out) principle. For queues, we have FIFO (First-In-First-Out). -Arrays in JavaScript can work both as a queue and as a stack. They allow you to add/remove elements both to/from the beginning or the end. +Arrays in JavaScript can work both as a queue and as a stack. They allow you to add/remove elements, both to/from the beginning or the end. -In computer science the data structure that allows this, is called [deque](https://en.wikipedia.org/wiki/Double-ended_queue). +In computer science, the data structure that allows this, is called [deque](https://en.wikipedia.org/wiki/Double-ended_queue). **Methods that work with the end of the array:** @@ -399,7 +399,7 @@ There is one more syntax to create an array: let arr = *!*new Array*/!*("Apple", "Pear", "etc"); ``` -It's rarely used, because square brackets `[]` are shorter. Also there's a tricky feature with it. +It's rarely used, because square brackets `[]` are shorter. Also, there's a tricky feature with it. If `new Array` is called with a single argument which is a number, then it creates an array *without items, but with the given length*. From 88ce8fa79f23dd0192038d9c16c8d8ce706e03df Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Thu, 12 May 2022 18:07:31 +0600 Subject: [PATCH 03/54] =?UTF-8?q?=F0=9F=91=BE=20smth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/05-data-types/04-array/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md index 00bc3d601..ff11ef2c4 100644 --- a/1-js/05-data-types/04-array/article.md +++ b/1-js/05-data-types/04-array/article.md @@ -6,7 +6,7 @@ But quite often we find that we need an *ordered collection*, where we have a 1s It is not convenient to use an object here, because it provides no methods to manage the order of elements. We can’t insert a new property “between” the existing ones. Objects are just not meant for such use. -There exists a special data structure, named `Array`, to store ordered collections. +There exists a special data structure named `Array`, to store ordered collections. ## Declaration @@ -136,7 +136,7 @@ A [queue](https://en.wikipedia.org/wiki/Queue_(abstract_data_type)) is one of th Arrays support both operations. -In practice, we need it very often. For example, a queue of messages that need to be shown on-screen. +In practice we need it very often. For example, a queue of messages that need to be shown on-screen. There's another use case for arrays -- the data structure named [stack](https://en.wikipedia.org/wiki/Stack_(abstract_data_type)). @@ -145,7 +145,7 @@ It supports two operations: - `push` adds an element to the end. - `pop` takes an element from the end. -So new elements are added or taken, always from the "end". +So new elements are added or taken always from the "end". A stack is usually illustrated as a pack of cards: new cards are added to the top or taken from the top: From 98e7e6bf238aee111aa013900db2aee46aa30f4f Mon Sep 17 00:00:00 2001 From: Omer Baddour <36576544+OmerBaddour@users.noreply.github.com> Date: Thu, 12 May 2022 10:47:32 -0400 Subject: [PATCH 04/54] minor fixes --- 1-js/05-data-types/02-number/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md index 0e7c8b6c8..0117c0de7 100644 --- a/1-js/05-data-types/02-number/article.md +++ b/1-js/05-data-types/02-number/article.md @@ -4,7 +4,7 @@ In modern JavaScript, there are two types of numbers: 1. Regular numbers in JavaScript are stored in 64-bit format [IEEE-754](https://en.wikipedia.org/wiki/IEEE_754-2008_revision), also known as "double precision floating point numbers". These are numbers that we're using most of the time, and we'll talk about them in this chapter. -2. BigInt numbers, to represent integers of arbitrary length. They are sometimes needed, because a regular number can't safely exceed 253 or be less than -253. As bigints are used in few special areas, we devote them a special chapter . +2. BigInt numbers represent integers of arbitrary length. They are sometimes needed because a regular number can't safely exceed 253 or be less than -253. As bigints are used in few special areas, we devote them a special chapter . So here we'll talk about regular numbers. Let's expand our knowledge of them. @@ -305,7 +305,7 @@ They belong to the type `number`, but are not "normal" numbers, so there are spe alert( isNaN("str") ); // true ``` - But do we need this function? Can't we just use the comparison `=== NaN`? Sorry, but the answer is no. The value `NaN` is unique in that it does not equal anything, including itself: + But do we need this function? Can't we just use the comparison `=== NaN`? Unfortunately not. The value `NaN` is unique in that it does not equal anything, including itself: ```js run alert( NaN === NaN ); // false @@ -399,7 +399,7 @@ A few examples: alert( Math.random() ); // ... (any random numbers) ``` -`Math.max(a, b, c...)` / `Math.min(a, b, c...)` +`Math.max(a, b, c...)` and `Math.min(a, b, c...)` : Returns the greatest/smallest from the arbitrary number of arguments. ```js run From 576005b3365fe7309eebf1cb0132f510ac86eb81 Mon Sep 17 00:00:00 2001 From: Omer Baddour <36576544+OmerBaddour@users.noreply.github.com> Date: Fri, 13 May 2022 09:28:25 -0400 Subject: [PATCH 05/54] minor fixes --- 1-js/05-data-types/04-array/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md index 7ccf5d4eb..366546103 100644 --- a/1-js/05-data-types/04-array/article.md +++ b/1-js/05-data-types/04-array/article.md @@ -96,7 +96,7 @@ The "trailing comma" style makes it easier to insert/remove items, because all l [recent browser="new"] -Let's say we want a last element of the array. +Let's say we want the last element of the array. Some programming languages allow to use negative indexes for the same purpose, like `fruits[-1]`. @@ -403,7 +403,7 @@ It's rarely used, because square brackets `[]` are shorter. Also there's a trick If `new Array` is called with a single argument which is a number, then it creates an array *without items, but with the given length*. -Let's see how one can shoot themself in the foot: +Let's see how one can shoot themselves in the foot: ```js run let arr = new Array(2); // will it create an array of [2] ? From fb313612a988c390f5ad5286f48200b5cb2165d9 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 13 May 2022 18:05:24 -0300 Subject: [PATCH 06/54] rephrase --- 1-js/05-data-types/04-array/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md index 7ccf5d4eb..821f3182c 100644 --- a/1-js/05-data-types/04-array/article.md +++ b/1-js/05-data-types/04-array/article.md @@ -530,7 +530,7 @@ The call to `new Array(number)` creates an array with the given length, but with Getting the elements: - we can get element by its index, like `arr[0]` -- also we can use `at(i)` method to get negative-index elements, for negative values of `i`, it steps back from the end of the array. In the rest it works same as `arr[i]`, if `i >= 0`. +- also we can use `at(i)` method that allows negative indexes. For negative values of `i`, it steps back from the end of the array. If `i >= 0`, it works same as `arr[i]`. We can use an array as a deque with the following operations: From ad50be199bdb0ac3111f3e0344d523038ea88a30 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sat, 14 May 2022 15:14:26 +0600 Subject: [PATCH 07/54] =?UTF-8?q?=F0=9F=91=BE=20just=20add=20missed=20brea?= =?UTF-8?q?k=20line?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/05-data-types/05-array-methods/article.md | 1 + 1 file changed, 1 insertion(+) diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md index b14e9a0be..e11246e2e 100644 --- a/1-js/05-data-types/05-array-methods/article.md +++ b/1-js/05-data-types/05-array-methods/article.md @@ -389,6 +389,7 @@ Literally, all elements are converted to strings for comparisons. For strings, l To use our own sorting order, we need to supply a function as the argument of `arr.sort()`. The function should compare two arbitrary values and return: + ```js function compare(a, b) { if (a > b) return 1; // if the first value is greater than the second From bb1450055c628869e19a6fcbeaf923487c5f347e Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sat, 14 May 2022 15:26:28 +0600 Subject: [PATCH 08/54] =?UTF-8?q?=E2=9C=85=20fixed=20a=20typo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ref: https://github.com/javascript-tutorial/en.javascript.info/issues/3007 --- 5-network/08-xmlhttprequest/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/08-xmlhttprequest/article.md b/5-network/08-xmlhttprequest/article.md index 7dbc405a0..43d816cab 100644 --- a/5-network/08-xmlhttprequest/article.md +++ b/5-network/08-xmlhttprequest/article.md @@ -2,7 +2,7 @@ `XMLHttpRequest` is a built-in browser object that allows to make HTTP requests in JavaScript. -Despite of having the word "XML" in its name, it can operate on any data, not only in XML format. We can upload/download files, track progress and much more. +Despite having the word "XML" in its name, it can operate on any data, not only in XML format. We can upload/download files, track progress and much more. Right now, there's another, more modern method `fetch`, that somewhat deprecates `XMLHttpRequest`. From a85e802056d9587709f0ecb78da0841fb8321c78 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sat, 14 May 2022 15:37:55 +0600 Subject: [PATCH 09/54] =?UTF-8?q?=F0=9F=91=BE=20remove=20one=20extra=20bre?= =?UTF-8?q?ak=20line?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/05-data-types/05-array-methods/article.md | 1 - 1 file changed, 1 deletion(-) diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md index e11246e2e..673a18950 100644 --- a/1-js/05-data-types/05-array-methods/article.md +++ b/1-js/05-data-types/05-array-methods/article.md @@ -634,7 +634,6 @@ So it's advised to always specify the initial value. The method [arr.reduceRight](mdn:js/Array/reduceRight) does the same, but goes from right to left. - ## Array.isArray Arrays do not form a separate language type. They are based on objects. From 60209e64d9c28620189ed5f473af9c5ce694dd8f Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sat, 14 May 2022 15:41:37 +0600 Subject: [PATCH 10/54] =?UTF-8?q?=F0=9F=91=BE=20just=20add=20another=20one?= =?UTF-8?q?=20missed=20break=20line?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/05-data-types/05-array-methods/article.md | 1 + 1 file changed, 1 insertion(+) diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md index 673a18950..959c59214 100644 --- a/1-js/05-data-types/05-array-methods/article.md +++ b/1-js/05-data-types/05-array-methods/article.md @@ -746,6 +746,7 @@ These methods are the most used ones, they cover 99% of use cases. But there are These methods behave sort of like `||` and `&&` operators: if `fn` returns a truthy value, `arr.some()` immediately returns `true` and stops iterating over the rest of items; if `fn` returns a falsy value, `arr.every()` immediately returns `false` and stops iterating over the rest of items as well. We can use `every` to compare arrays: + ```js run function arraysEqual(arr1, arr2) { return arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]); From 9cceef1a7f709e13add62160aa1cb0fdce71409a Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sun, 15 May 2022 18:35:59 +0600 Subject: [PATCH 11/54] =?UTF-8?q?=F0=9F=91=BE=20smth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 6-data-storage/03-indexeddb/article.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/6-data-storage/03-indexeddb/article.md b/6-data-storage/03-indexeddb/article.md index 546e24907..5389ff84b 100644 --- a/6-data-storage/03-indexeddb/article.md +++ b/6-data-storage/03-indexeddb/article.md @@ -193,13 +193,12 @@ A key must be one of these types - number, date, string, binary, or array. It's ![](indexeddb-structure.svg) - As we'll see very soon, we can provide a key when we add a value to the store, similar to `localStorage`. But when we store objects, IndexedDB allows setting up an object property as the key, which is much more convenient. Or we can auto-generate keys. But we need to create an object store first. - The syntax to create an object store: + ```js db.createObjectStore(name[, keyOptions]); ``` @@ -214,6 +213,7 @@ Please note, the operation is synchronous, no `await` needed. If we don't supply `keyOptions`, then we'll need to provide a key explicitly later, when storing an object. For instance, this object store uses `id` property as the key: + ```js db.createObjectStore('books', {keyPath: 'id'}); ``` @@ -223,6 +223,7 @@ db.createObjectStore('books', {keyPath: 'id'}); That's a technical limitation. Outside of the handler we'll be able to add/remove/update the data, but object stores can only be created/removed/altered during a version update. To perform a database version upgrade, there are two main approaches: + 1. We can implement per-version upgrade functions: from 1 to 2, from 2 to 3, from 3 to 4 etc. Then, in `upgradeneeded` we can compare versions (e.g. old 2, now 4) and run per-version upgrades step by step, for every intermediate version (2 to 3, then 3 to 4). 2. Or we can just examine the database: get a list of existing object stores as `db.objectStoreNames`. That object is a [DOMStringList](https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#domstringlist) that provides `contains(name)` method to check for existance. And then we can do updates depending on what exists and what doesn't. @@ -242,7 +243,6 @@ openRequest.onupgradeneeded = function() { }; ``` - To delete an object store: ```js @@ -256,6 +256,7 @@ The term "transaction" is generic, used in many kinds of databases. A transaction is a group of operations, that should either all succeed or all fail. For instance, when a person buys something, we need to: + 1. Subtract the money from their account. 2. Add the item to their inventory. @@ -614,6 +615,7 @@ The `delete` method looks up values to delete by a query, the call format is sim - **`delete(query)`** -- delete matching values by query. For instance: + ```js // delete the book with id='js' books.delete('js'); @@ -632,6 +634,7 @@ request.onsuccess = function() { ``` To delete everything: + ```js books.clear(); // clear the storage. ``` @@ -651,6 +654,7 @@ Cursors provide the means to work around that. As an object store is sorted internally by key, a cursor walks the store in key order (ascending by default). The syntax: + ```js // like getAll, but with a cursor: let request = store.openCursor(query, [direction]); @@ -748,7 +752,6 @@ try { } catch(err) { console.log('error', err.message); } - ``` So we have all the sweet "plain async code" and "try..catch" stuff. @@ -771,10 +774,8 @@ window.addEventListener('unhandledrejection', event => { ### "Inactive transaction" pitfall - As we already know, a transaction auto-commits as soon as the browser is done with the current code and microtasks. So if we put a *macrotask* like `fetch` in the middle of a transaction, then the transaction won't wait for it to finish. It just auto-commits. So the next request in it would fail. - For a promise wrapper and `async/await` the situation is the same. Here's an example of `fetch` in the middle of the transaction: @@ -793,6 +794,7 @@ await inventory.add({ id: 'js', price: 10, created: new Date() }); // Error The next `inventory.add` after `fetch` `(*)` fails with an "inactive transaction" error, because the transaction is already committed and closed at that time. The workaround is the same as when working with native IndexedDB: either make a new transaction or just split things apart. + 1. Prepare the data and fetch all that's needed first. 2. Then save in the database. From 38f5cad3e1ee32426d77f08f4af1401a4e34bdaf Mon Sep 17 00:00:00 2001 From: Amir Hasanzade Date: Mon, 16 May 2022 03:12:20 -0700 Subject: [PATCH 12/54] Update about.md (change "data" field to "value") The object returned from "await stream.read()" has two fields: "done" and "value", and not the "data" field destructured here. --- 4-binary/03-blob/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md index 41ad4b36e..fc0150577 100644 --- a/4-binary/03-blob/article.md +++ b/4-binary/03-blob/article.md @@ -237,8 +237,8 @@ const readableStream = blob.stream(); const stream = readableStream.getReader(); while (true) { - // for each iteration: data is the next blob fragment - let { done, data } = await stream.read(); + // for each iteration: value is the next blob fragment + let { done, value } = await stream.read(); if (done) { // no more data in the stream console.log('all blob processed.'); @@ -246,7 +246,7 @@ while (true) { } // do something with the data portion we've just read from the blob - console.log(data); + console.log(value); } ``` From 98be74f56a9f7c8715d6fb201c2726104ac2ba3d Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Tue, 17 May 2022 20:17:44 +0600 Subject: [PATCH 13/54] =?UTF-8?q?=E2=9A=A1=20placed=20missed=20break=20lin?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/02-first-steps/04-variables/article.md | 1 + 1 file changed, 1 insertion(+) diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md index 7bce4b9c8..be9930ae7 100644 --- a/1-js/02-first-steps/04-variables/article.md +++ b/1-js/02-first-steps/04-variables/article.md @@ -64,6 +64,7 @@ let message = 'Hello'; ``` Some people also define multiple variables in this multiline style: + ```js no-beautify let user = 'John', age = 25, From 212c5275d413a416101edb4377de929d6dc84d73 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Tue, 17 May 2022 20:24:34 +0600 Subject: [PATCH 14/54] =?UTF-8?q?=E2=9A=A1=20add=20missed=20break=20line?= =?UTF-8?q?=20and=20remove=20extra=20one?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/02-first-steps/04-variables/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md index be9930ae7..55a06f0d8 100644 --- a/1-js/02-first-steps/04-variables/article.md +++ b/1-js/02-first-steps/04-variables/article.md @@ -104,6 +104,7 @@ For instance, the variable `message` can be imagined as a box labeled `"message" We can put any value in the box. We can also change it as many times as we want: + ```js run let message; @@ -261,7 +262,6 @@ myBirthday = '01.01.2001'; // error, can't reassign the constant! When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and clearly communicate that fact to everyone. - ### Uppercase constants There is a widespread practice to use constants as aliases for difficult-to-remember values that are known prior to execution. From 98899d85466209f17fd40ebadeedf3dec1d43173 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Tue, 17 May 2022 20:26:03 +0600 Subject: [PATCH 15/54] =?UTF-8?q?=E2=9A=A1=20add=20missed=20one?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/02-first-steps/04-variables/article.md | 1 + 1 file changed, 1 insertion(+) diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md index 55a06f0d8..4c2d09de3 100644 --- a/1-js/02-first-steps/04-variables/article.md +++ b/1-js/02-first-steps/04-variables/article.md @@ -292,6 +292,7 @@ When should we use capitals for a constant and when should we name it normally? Being a "constant" just means that a variable's value never changes. But there are constants that are known prior to execution (like a hexadecimal value for red) and there are constants that are *calculated* in run-time, during the execution, but do not change after their initial assignment. For instance: + ```js const pageLoadTime = /* time taken by a webpage to load */; ``` From f2a4aff6618f6c1a72533725a3fd7b289649f7a3 Mon Sep 17 00:00:00 2001 From: Gramwise <64377838+super-salad@users.noreply.github.com> Date: Thu, 19 May 2022 09:26:30 -0600 Subject: [PATCH 16/54] Update article.md Make the example a bit more inclusive. --- 1-js/05-data-types/12-json/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/05-data-types/12-json/article.md b/1-js/05-data-types/12-json/article.md index ae5f045af..4da9993f1 100644 --- a/1-js/05-data-types/12-json/article.md +++ b/1-js/05-data-types/12-json/article.md @@ -41,7 +41,7 @@ let student = { age: 30, isAdmin: false, courses: ['html', 'css', 'js'], - wife: null + spouse: null }; *!* @@ -58,7 +58,7 @@ alert(json); "age": 30, "isAdmin": false, "courses": ["html", "css", "js"], - "wife": null + "spouse": null } */ */!* From df1523afa6ca44fc7d2f8a590e1b8978ba1fd077 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sat, 21 May 2022 11:10:30 +0600 Subject: [PATCH 17/54] =?UTF-8?q?=F0=9F=91=BE=20add=20information=20about?= =?UTF-8?q?=20test=20functions=20to=20summary=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/05-data-types/02-number/article.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md index 0e7c8b6c8..10fd44c98 100644 --- a/1-js/05-data-types/02-number/article.md +++ b/1-js/05-data-types/02-number/article.md @@ -429,6 +429,10 @@ For different numeral systems: - `parseInt(str, base)` parses the string `str` into an integer in numeral system with given `base`, `2 ≤ base ≤ 36`. - `num.toString(base)` converts a number to a string in the numeral system with the given `base`. +For regular number tests: +- `isNaN(value)` converts its argument to a number and then tests it for being `NaN` +- `isFinite(value)` converts its argument to a number and returns `true` if it's a regular number, not `NaN/Infinity/-Infinity` + For converting values like `12pt` and `100px` to a number: - Use `parseInt/parseFloat` for the "soft" conversion, which reads a number from a string and then returns the value they could read before the error. From ef5bb390d6d58124135b93d3dc78e804978137bb Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sat, 21 May 2022 11:11:08 +0600 Subject: [PATCH 18/54] =?UTF-8?q?=F0=9F=91=BE=20smth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/05-data-types/02-number/article.md | 1 + 1 file changed, 1 insertion(+) diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md index 10fd44c98..70e798bd9 100644 --- a/1-js/05-data-types/02-number/article.md +++ b/1-js/05-data-types/02-number/article.md @@ -430,6 +430,7 @@ For different numeral systems: - `num.toString(base)` converts a number to a string in the numeral system with the given `base`. For regular number tests: + - `isNaN(value)` converts its argument to a number and then tests it for being `NaN` - `isFinite(value)` converts its argument to a number and returns `true` if it's a regular number, not `NaN/Infinity/-Infinity` From 1dc7900a2deb25408b086292830753162f208d72 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sat, 21 May 2022 11:56:36 +0600 Subject: [PATCH 19/54] =?UTF-8?q?=F0=9F=91=BEsmth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/05-data-types/11-date/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/11-date/article.md b/1-js/05-data-types/11-date/article.md index 8b854c754..2266c0779 100644 --- a/1-js/05-data-types/11-date/article.md +++ b/1-js/05-data-types/11-date/article.md @@ -57,7 +57,7 @@ To create a new `Date` object call `new Date()` with one of the following argume `new Date(year, month, date, hours, minutes, seconds, ms)` : Create the date with the given components in the local time zone. Only the first two arguments are obligatory. - - The `year` should have 4 digits. For compatibility, 2 digits are also accepted and considered `19xx`, e.g. `98` is same as `1998` here, but always using 4 digits is strongly encouraged. + - The `year` should have 4 digits. For compatibility, 2 digits are also accepted and considered `19xx`, e.g. `98` is the same as `1998` here, but always using 4 digits is strongly encouraged. - The `month` count starts with `0` (Jan), up to `11` (Dec). - The `date` parameter is actually the day of month, if absent then `1` is assumed. - If `hours/minutes/seconds/ms` is absent, they are assumed to be equal `0`. From 6d723f444424ac9826b7617c935e09e2b0b66de3 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sun, 22 May 2022 13:16:47 +0600 Subject: [PATCH 20/54] =?UTF-8?q?=F0=9F=91=BE=20update=20`JSdoc`=20github?= =?UTF-8?q?=20link?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/03-code-quality/03-comments/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/03-comments/article.md b/1-js/03-code-quality/03-comments/article.md index 4afa786d6..af3a06c80 100644 --- a/1-js/03-code-quality/03-comments/article.md +++ b/1-js/03-code-quality/03-comments/article.md @@ -143,7 +143,7 @@ Such comments allow us to understand the purpose of the function and use it the By the way, many editors like [WebStorm](https://www.jetbrains.com/webstorm/) can understand them as well and use them to provide autocomplete and some automatic code-checking. -Also, there are tools like [JSDoc 3](https://github.com/jsdoc3/jsdoc) that can generate HTML-documentation from the comments. You can read more information about JSDoc at . +Also, there are tools like [JSDoc 3](https://github.com/jsdoc/jsdoc) that can generate HTML-documentation from the comments. You can read more information about JSDoc at . Why is the task solved this way? : What's written is important. But what's *not* written may be even more important to understand what's going on. Why is the task solved exactly this way? The code gives no answer. From 1c439bf6672f0edf0909f0eb6f0ede4dc3b14de2 Mon Sep 17 00:00:00 2001 From: Nayoung <80025366+Nayoung-Gu@users.noreply.github.com> Date: Sun, 22 May 2022 22:27:11 +0900 Subject: [PATCH 21/54] just add a comma --- 1-js/04-object-basics/04-object-methods/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index 88e8883fd..cea2b6a70 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -90,7 +90,7 @@ user = { As demonstrated, we can omit `"function"` and just write `sayHi()`. -To tell the truth, the notations are not fully identical. There are subtle differences related to object inheritance (to be covered later), but for now they do not matter. In almost all cases the shorter syntax is preferred. +To tell the truth, the notations are not fully identical. There are subtle differences related to object inheritance (to be covered later), but for now they do not matter. In almost all cases, the shorter syntax is preferred. ## "this" in methods From d2e7ac41601121fd0de213f4d8a315b261461c9e Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Mon, 23 May 2022 08:58:20 -0300 Subject: [PATCH 22/54] typo --- 1-js/04-object-basics/03-garbage-collection/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/03-garbage-collection/article.md b/1-js/04-object-basics/03-garbage-collection/article.md index c06bf6da4..20a8a19e3 100644 --- a/1-js/04-object-basics/03-garbage-collection/article.md +++ b/1-js/04-object-basics/03-garbage-collection/article.md @@ -169,7 +169,7 @@ The first step marks the roots: ![](garbage-collection-2.svg) -Then we follow their references are mark referenced objects: +Then we follow their references and mark referenced objects: ![](garbage-collection-3.svg) From 825cf306e7ab1ab7095f6e69e174c2064cd44c9d Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Tue, 24 May 2022 00:26:32 +0600 Subject: [PATCH 23/54] =?UTF-8?q?=F0=9F=91=BEfix=20typo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/05-data-types/04-array/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md index 7ccf5d4eb..d5a8d2272 100644 --- a/1-js/05-data-types/04-array/article.md +++ b/1-js/05-data-types/04-array/article.md @@ -281,7 +281,7 @@ Why is it faster to work with the end of an array than with its beginning? Let's fruits.shift(); // take 1 element from the start ``` -It's not enough to take and remove the element with the number `0`. Other elements need to be renumbered as well. +It's not enough to take and remove the element with the index `0`. Other elements need to be renumbered as well. The `shift` operation must do 3 things: From c7cc166f72ef1bd699d14285c6704b32f7e4d5e6 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Tue, 24 May 2022 02:08:03 +0600 Subject: [PATCH 24/54] =?UTF-8?q?=F0=9F=91=BE=20add=20clarifying=20example?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/05-data-types/05-array-methods/article.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md index b14e9a0be..b3702bf36 100644 --- a/1-js/05-data-types/05-array-methods/article.md +++ b/1-js/05-data-types/05-array-methods/article.md @@ -249,6 +249,10 @@ alert( arr.indexOf(0) ); // 1 alert( arr.indexOf(false) ); // 2 alert( arr.indexOf(null) ); // -1 +let fruits = ['Plum', 'Apple', 'Orange', 'Plum'] +// note that the lastIndexOf method looks for from the end, but index counted from beginning +alert( fruits.lastIndexOf(Plum)) // 3 + alert( arr.includes(1) ); // true ``` From 741db31087484ea6dbcdc97235ef22e423e2bbf5 Mon Sep 17 00:00:00 2001 From: Rahul Shaw Date: Wed, 25 May 2022 14:13:33 +0530 Subject: [PATCH 25/54] Update article.md --- 1-js/06-advanced-functions/03-closure/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/03-closure/article.md b/1-js/06-advanced-functions/03-closure/article.md index 199887063..cb43a7968 100644 --- a/1-js/06-advanced-functions/03-closure/article.md +++ b/1-js/06-advanced-functions/03-closure/article.md @@ -7,7 +7,7 @@ We already know that a function can access variables outside of it ("outer" vari But what happens if outer variables change since a function is created? Will the function get newer values or the old ones? -And what if a function is passed along as a parameter and called from another place of code, will it get access to outer variables at the new place? +And what if a function is passed along as an argument and called from another place of code, will it get access to outer variables at the new place? Let's expand our knowledge to understand these scenarios and more complex ones. From 95163bb1f0c873a66d93a5802bd069417e795e6e Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Fri, 27 May 2022 19:49:47 +0600 Subject: [PATCH 26/54] =?UTF-8?q?=F0=9F=91=BE=20fix=20typo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/05-data-types/04-array/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md index 7ccf5d4eb..d5a8d2272 100644 --- a/1-js/05-data-types/04-array/article.md +++ b/1-js/05-data-types/04-array/article.md @@ -281,7 +281,7 @@ Why is it faster to work with the end of an array than with its beginning? Let's fruits.shift(); // take 1 element from the start ``` -It's not enough to take and remove the element with the number `0`. Other elements need to be renumbered as well. +It's not enough to take and remove the element with the index `0`. Other elements need to be renumbered as well. The `shift` operation must do 3 things: From 293c9b7f4759fc5f9065419d61c58a4e822421ef Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Fri, 27 May 2022 20:07:25 +0600 Subject: [PATCH 27/54] =?UTF-8?q?=F0=9F=91=BE=20smth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/02-first-steps/13-while-for/article.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/1-js/02-first-steps/13-while-for/article.md b/1-js/02-first-steps/13-while-for/article.md index eadbf5322..c44689968 100644 --- a/1-js/02-first-steps/13-while-for/article.md +++ b/1-js/02-first-steps/13-while-for/article.md @@ -162,10 +162,8 @@ for (i = 0; i < 3; i++) { // use an existing variable alert(i); // 3, visible, because declared outside of the loop ``` - ```` - ### Skipping parts Any part of `for` can be skipped. @@ -286,7 +284,6 @@ if (i > 5) { ...and rewrite it using a question mark: - ```js no-beautify (i > 5) ? alert(i) : *!*continue*/!*; // continue isn't allowed here ``` @@ -321,6 +318,7 @@ We need a way to stop the process if the user cancels the input. The ordinary `break` after `input` would only break the inner loop. That's not sufficient -- labels, come to the rescue! A *label* is an identifier with a colon before a loop: + ```js labelName: for (...) { ... @@ -362,6 +360,7 @@ The `continue` directive can also be used with a label. In this case, code execu Labels do not allow us to jump into an arbitrary place in the code. For example, it is impossible to do this: + ```js break label; // jump to the label below (doesn't work) From 15ed0d09533145b5fda50115497b14c224530146 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Fri, 27 May 2022 20:19:36 +0600 Subject: [PATCH 28/54] =?UTF-8?q?=F0=9F=91=BE=20add=20missed=20break=20lin?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/02-first-steps/13-while-for/article.md | 1 + 1 file changed, 1 insertion(+) diff --git a/1-js/02-first-steps/13-while-for/article.md b/1-js/02-first-steps/13-while-for/article.md index c44689968..dcc3b692a 100644 --- a/1-js/02-first-steps/13-while-for/article.md +++ b/1-js/02-first-steps/13-while-for/article.md @@ -340,6 +340,7 @@ The `break ` statement in the loop below breaks out to the label: // do something with the value... } } + alert('Done!'); ``` From 070b77790548934e274070423ba94f7ad0703aa8 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Fri, 27 May 2022 20:25:06 +0600 Subject: [PATCH 29/54] =?UTF-8?q?=F0=9F=91=BE=20smth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/02-first-steps/13-while-for/article.md | 1 + 1 file changed, 1 insertion(+) diff --git a/1-js/02-first-steps/13-while-for/article.md b/1-js/02-first-steps/13-while-for/article.md index dcc3b692a..e1c5ad38b 100644 --- a/1-js/02-first-steps/13-while-for/article.md +++ b/1-js/02-first-steps/13-while-for/article.md @@ -369,6 +369,7 @@ label: for (...) ``` A `break` directive must be inside a code block. Technically, any labelled code block will do, e.g.: + ```js label: { // ... From 7dd8d4cc14f432874599351c7293cb7a170ef358 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Fri, 27 May 2022 20:31:35 +0600 Subject: [PATCH 30/54] =?UTF-8?q?=F0=9F=91=BE=20just=20update=20link?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/05-data-types/12-json/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/12-json/article.md b/1-js/05-data-types/12-json/article.md index ae5f045af..826e0a84c 100644 --- a/1-js/05-data-types/12-json/article.md +++ b/1-js/05-data-types/12-json/article.md @@ -27,7 +27,7 @@ Luckily, there's no need to write the code to handle all this. The task has been ## JSON.stringify -The [JSON](http://en.wikipedia.org/wiki/JSON) (JavaScript Object Notation) is a general format to represent values and objects. It is described as in [RFC 4627](https://tools.ietf.org/html/rfc4627) standard. Initially it was made for JavaScript, but many other languages have libraries to handle it as well. So it's easy to use JSON for data exchange when the client uses JavaScript and the server is written on Ruby/PHP/Java/Whatever. +The [JSON](https://en.wikipedia.org/wiki/JSON) (JavaScript Object Notation) is a general format to represent values and objects. It is described as in [RFC 4627](https://tools.ietf.org/html/rfc4627) standard. Initially it was made for JavaScript, but many other languages have libraries to handle it as well. So it's easy to use JSON for data exchange when the client uses JavaScript and the server is written on Ruby/PHP/Java/Whatever. JavaScript provides methods: From 5f28cbb3c6f43b1c5d8e489fd5b2e806afa7d933 Mon Sep 17 00:00:00 2001 From: Aleksander Prikhozhdenko <18074215+alfemy@users.noreply.github.com> Date: Thu, 2 Jun 2022 10:43:39 +0700 Subject: [PATCH 31/54] Add an absent importance value for a closure task --- 1-js/06-advanced-functions/03-closure/5-function-in-if/task.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/1-js/06-advanced-functions/03-closure/5-function-in-if/task.md b/1-js/06-advanced-functions/03-closure/5-function-in-if/task.md index d02c53b99..4e386eec5 100644 --- a/1-js/06-advanced-functions/03-closure/5-function-in-if/task.md +++ b/1-js/06-advanced-functions/03-closure/5-function-in-if/task.md @@ -1,4 +1,6 @@ +importance: 5 +--- # Function in if Look at the code. What will be the result of the call at the last line? From 41da5cd8df2623e56d414d15c9d01b967ff1d427 Mon Sep 17 00:00:00 2001 From: Jared Date: Sun, 5 Jun 2022 11:21:23 +0800 Subject: [PATCH 32/54] updated solution.md removed redundant spacing --- .../11-logical-operators/3-alert-1-null-2/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md index 5c2455ef4..368b59409 100644 --- a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md +++ b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md @@ -1,6 +1,6 @@ The answer: `null`, because it's the first falsy value from the list. ```js run -alert( 1 && null && 2 ); +alert(1 && null && 2); ``` From 0ece900f50a257a72cf24d1c1b2d3636e9e14b91 Mon Sep 17 00:00:00 2001 From: Fardin <95420562+webFardin@users.noreply.github.com> Date: Mon, 6 Jun 2022 20:08:59 +0430 Subject: [PATCH 33/54] add a method to remove style property I think it's not bad to introduce removeProperty() method :) --- 2-ui/1-document/08-styles-and-classes/article.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/2-ui/1-document/08-styles-and-classes/article.md b/2-ui/1-document/08-styles-and-classes/article.md index 9154d43d6..82f61b24e 100644 --- a/2-ui/1-document/08-styles-and-classes/article.md +++ b/2-ui/1-document/08-styles-and-classes/article.md @@ -128,6 +128,14 @@ setTimeout(() => document.body.style.display = "", 1000); // back to normal If we set `style.display` to an empty string, then the browser applies CSS classes and its built-in styles normally, as if there were no such `style.display` property at all. +Also there is a special method for that, `elem.style.removeProperty('style property')`. So, We can remove a property like this: + +```js run +document.body.style.background = 'red'; //set background to red + +setTimeout(() => document.body.style.removeProperty('background')); // remove background after 1 second +``` + ````smart header="Full rewrite with `style.cssText`" Normally, we use `style.*` to assign individual style properties. We can't set the full style like `div.style="color: red; width: 100px"`, because `div.style` is an object, and it's read-only. From ec84c3f8d8adad98f20b45ff4fb1a02b3722677e Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Wed, 8 Jun 2022 20:55:10 -0300 Subject: [PATCH 34/54] difference, is different --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 6df7af132..cbd473196 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -8,7 +8,7 @@ Create a "throttling" decorator `throttle(f, ms)` -- that returns a wrapper. When it's called multiple times, it passes the call to `f` at maximum once per `ms` milliseconds. -The difference with debounce is that it's completely different decorator: +Compared to the debounce decorator, the behavior is completely different: - `debounce` runs the function once after the "cooldown" period. Good for processing the final result. - `throttle` runs it not more often than given `ms` time. Good for regular updates that shouldn't be very often. From 51c74744f37fbddfaf1882612ef26ddcf11d1932 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Mon, 13 Jun 2022 08:13:38 +0200 Subject: [PATCH 35/54] minor fixes --- 1-js/05-data-types/02-number/article.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md index 0e7c8b6c8..3f95c2eda 100644 --- a/1-js/05-data-types/02-number/article.md +++ b/1-js/05-data-types/02-number/article.md @@ -50,7 +50,7 @@ let mсs = 0.000001; Just like before, using `"e"` can help. If we'd like to avoid writing the zeroes explicitly, we could write the same as: ```js -let mcs = 1e-6; // six zeroes to the left from 1 +let mcs = 1e-6; // five zeroes to the left from 1 ``` If we count the zeroes in `0.000001`, there are 6 of them. So naturally it's `1e-6`. @@ -63,6 +63,9 @@ In other words, a negative number after `"e"` means a division by 1 with the giv // -6 divides by 1 with 6 zeroes 1.23e-6 === 1.23 / 1000000; // 0.00000123 + +// an example with a bigger number +1234e-2 === 1234 / 100; // 12.34, decimal point moves 2 times ``` ### Hex, binary and octal numbers From 7e19bb6b47a58c21af35d30c320fec0aac5ec64c Mon Sep 17 00:00:00 2001 From: Fardin <95420562+webFardin@users.noreply.github.com> Date: Mon, 13 Jun 2022 15:07:13 +0430 Subject: [PATCH 36/54] Fixed setTimeout() issue there wasn't any time for setTimeout Function... --- 2-ui/1-document/08-styles-and-classes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/08-styles-and-classes/article.md b/2-ui/1-document/08-styles-and-classes/article.md index 82f61b24e..644583c34 100644 --- a/2-ui/1-document/08-styles-and-classes/article.md +++ b/2-ui/1-document/08-styles-and-classes/article.md @@ -133,7 +133,7 @@ Also there is a special method for that, `elem.style.removeProperty('style prope ```js run document.body.style.background = 'red'; //set background to red -setTimeout(() => document.body.style.removeProperty('background')); // remove background after 1 second +setTimeout(() => document.body.style.removeProperty('background'), 1000); // remove background after 1 second ``` ````smart header="Full rewrite with `style.cssText`" From bebcbfa13449b0e48369eaa116091ceeb8053226 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Mon, 13 Jun 2022 23:49:14 +0200 Subject: [PATCH 37/54] minor fixes --- 1-js/05-data-types/05-array-methods/article.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md index b3702bf36..985e4c993 100644 --- a/1-js/05-data-types/05-array-methods/article.md +++ b/1-js/05-data-types/05-array-methods/article.md @@ -260,14 +260,15 @@ Note that the methods use `===` comparison. So, if we look for `false`, it finds If we want to check for inclusion, and don't want to know the exact index, then `arr.includes` is preferred. -Also, a very minor difference of `includes` is that it correctly handles `NaN`, unlike `indexOf/lastIndexOf`: +Also, a minor, but noteworthy feature of `includes` is that it correctly handles `NaN`, unlike `indexOf/lastIndexOf`: ```js run const arr = [NaN]; -alert( arr.indexOf(NaN) ); // -1 (should be 0, but === equality doesn't work for NaN) +alert( arr.indexOf(NaN) ); // -1 (should be 0, but equality test === doesn't work for NaN) alert( arr.includes(NaN) );// true (correct) ``` + ### find and findIndex Imagine we have an array of objects. How do we find an object with the specific condition? From c3b904def31c9b7ce3ce956a32e4376edbdd836f Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Tue, 14 Jun 2022 07:30:49 +0200 Subject: [PATCH 38/54] minor fixes --- .../05-data-types/05-array-methods/article.md | 55 ++++++++++++++----- 1 file changed, 42 insertions(+), 13 deletions(-) diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md index 985e4c993..4bc80e3c2 100644 --- a/1-js/05-data-types/05-array-methods/article.md +++ b/1-js/05-data-types/05-array-methods/article.md @@ -234,12 +234,13 @@ Now let's cover methods that search in an array. ### indexOf/lastIndexOf and includes -The methods [arr.indexOf](mdn:js/Array/indexOf), [arr.lastIndexOf](mdn:js/Array/lastIndexOf) and [arr.includes](mdn:js/Array/includes) have the same syntax and do essentially the same as their string counterparts, but operate on items instead of characters: +The methods [arr.indexOf](mdn:js/Array/indexOf) and [arr.includes](mdn:js/Array/includes) have the similar syntax and do essentially the same as their string counterparts, but operate on items instead of characters: - `arr.indexOf(item, from)` -- looks for `item` starting from index `from`, and returns the index where it was found, otherwise `-1`. -- `arr.lastIndexOf(item, from)` -- same, but looks for from right to left. - `arr.includes(item, from)` -- looks for `item` starting from index `from`, returns `true` if found. +Usually these methods are used with only one argument: the `item` to search. By default, the search is from the beginning. + For instance: ```js run @@ -249,27 +250,34 @@ alert( arr.indexOf(0) ); // 1 alert( arr.indexOf(false) ); // 2 alert( arr.indexOf(null) ); // -1 -let fruits = ['Plum', 'Apple', 'Orange', 'Plum'] -// note that the lastIndexOf method looks for from the end, but index counted from beginning -alert( fruits.lastIndexOf(Plum)) // 3 - alert( arr.includes(1) ); // true ``` -Note that the methods use `===` comparison. So, if we look for `false`, it finds exactly `false` and not the zero. +Please note that `indexOf` uses the strict equality `===` for comparison. So, if we look for `false`, it finds exactly `false` and not the zero. + +If we want to check if `item` exists in the array, and don't need the exact index, then `arr.includes` is preferred. + +The method [arr.lastIndexOf](mdn:js/Array/lastIndexOf) is the same as `indexOf`, but looks for from right to left. + +```js run +let fruits = ['Apple', 'Orange', 'Apple'] -If we want to check for inclusion, and don't want to know the exact index, then `arr.includes` is preferred. +alert( arr.indexOf('Apple') ); // 0 (first Apple) +alert( arr.lastIndexOf('Apple') ); // 2 (last Apple) +``` -Also, a minor, but noteworthy feature of `includes` is that it correctly handles `NaN`, unlike `indexOf/lastIndexOf`: +````smart header="The `includes` method handles `NaN` correctly" +A minor, but noteworthy feature of `includes` is that it correctly handles `NaN`, unlike `indexOf`: ```js run const arr = [NaN]; -alert( arr.indexOf(NaN) ); // -1 (should be 0, but equality test === doesn't work for NaN) +alert( arr.indexOf(NaN) ); // -1 (wrong, should be 0) alert( arr.includes(NaN) );// true (correct) ``` +That's because `includes` was added to JavaScript much later and uses the more up to date comparison algorithm internally. +```` - -### find and findIndex +### find and findIndex/findLastIndex Imagine we have an array of objects. How do we find an object with the specific condition? @@ -309,7 +317,28 @@ In real life arrays of objects is a common thing, so the `find` method is very u Note that in the example we provide to `find` the function `item => item.id == 1` with one argument. That's typical, other arguments of this function are rarely used. -The [arr.findIndex](mdn:js/Array/findIndex) method is essentially the same, but it returns the index where the element was found instead of the element itself and `-1` is returned when nothing is found. +The [arr.findIndex](mdn:js/Array/findIndex) method has the same syntax, but returns the index where the element was found instead of the element itself. The value of `-1` is returned if nothing is found. + +The [arr.findLastIndex](mdn:js/Array/findLastIndex) method is like `findIndex`, but searches from right to left, similar to `lastIndexOf`. + +Here's an example: + +```js run +let users = [ + {id: 1, name: "John"}, + {id: 2, name: "Pete"}, + {id: 3, name: "Mary"}, + {id: 4, name: "John"} +]; + +// Find the index of the first John +alert(users.findIndex(user => user.name == 'John')); // 0 + +// Find the index of the last John +alert(users.findLastIndex(user => user.name == 'John')); // 3 +``` + + ### filter From 2e52d0313d4aeef263acaa05b37829d12b6f281a Mon Sep 17 00:00:00 2001 From: "Stanislav (Stanley) Modrak" <44023416+smith558@users.noreply.github.com> Date: Wed, 15 Jun 2022 15:18:01 +0100 Subject: [PATCH 39/54] Fix typo in text --- 1-js/08-prototypes/03-native-prototypes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/08-prototypes/03-native-prototypes/article.md b/1-js/08-prototypes/03-native-prototypes/article.md index 6cf7aebb4..bdfc86dd8 100644 --- a/1-js/08-prototypes/03-native-prototypes/article.md +++ b/1-js/08-prototypes/03-native-prototypes/article.md @@ -2,7 +2,7 @@ The `"prototype"` property is widely used by the core of JavaScript itself. All built-in constructor functions use it. -First we'll see at the details, and then how to use it for adding new capabilities to built-in objects. +First we'll look at the details, and then how to use it for adding new capabilities to built-in objects. ## Object.prototype From acac4dc7f4b47d309a4de46c395bd48bf99f6961 Mon Sep 17 00:00:00 2001 From: Binu kumar <45959932+Binu42@users.noreply.github.com> Date: Thu, 16 Jun 2022 07:02:39 +0530 Subject: [PATCH 40/54] Update article.md --- 1-js/06-advanced-functions/08-settimeout-setinterval/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md index e4203f57e..fa1d98cb9 100644 --- a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md +++ b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md @@ -297,6 +297,6 @@ Please note that all scheduling methods do not *guarantee* the exact delay. For example, the in-browser timer may slow down for a lot of reasons: - The CPU is overloaded. - The browser tab is in the background mode. -- The laptop is on battery. +- The laptop is on battery saving mode. All that may increase the minimal timer resolution (the minimal delay) to 300ms or even 1000ms depending on the browser and OS-level performance settings. From 250f9a38a8c4f1e8245287df0f93afbe8c4cee36 Mon Sep 17 00:00:00 2001 From: "Stanislav (Stanley) Modrak" <44023416+smith558@users.noreply.github.com> Date: Thu, 16 Jun 2022 16:07:52 +0100 Subject: [PATCH 41/54] Clarify confusing point --- 1-js/11-async/01-callbacks/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/11-async/01-callbacks/article.md b/1-js/11-async/01-callbacks/article.md index 5950df051..74cf18451 100644 --- a/1-js/11-async/01-callbacks/article.md +++ b/1-js/11-async/01-callbacks/article.md @@ -102,7 +102,7 @@ function loadScript(src, callback) { *!* loadScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', script => { alert(`Cool, the script ${script.src} is loaded`); - alert( _ ); // function declared in the loaded script + alert( _ ); // _ is a function declared in the loaded script }); */!* ``` From 556bd7ff38a6c4a25df03740fa308b13c87dda6a Mon Sep 17 00:00:00 2001 From: "Stanislav (Stanley) Modrak" <44023416+smith558@users.noreply.github.com> Date: Thu, 16 Jun 2022 17:38:32 +0100 Subject: [PATCH 42/54] Fix grammar and phrasing --- 1-js/11-async/02-promise-basics/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/11-async/02-promise-basics/article.md b/1-js/11-async/02-promise-basics/article.md index f2f533220..b701319f1 100644 --- a/1-js/11-async/02-promise-basics/article.md +++ b/1-js/11-async/02-promise-basics/article.md @@ -237,7 +237,7 @@ new Promise((resolve, reject) => { That said, `finally(f)` isn't exactly an alias of `then(f,f)` though. There are few subtle differences: 1. A `finally` handler has no arguments. In `finally` we don't know whether the promise is successful or not. That's all right, as our task is usually to perform "general" finalizing procedures. -2. A `finally` handler passes through results and errors to the next handler. +2. A `finally` handler "passes" the result or error further to subsequent handlers. For instance, here the result is passed through `finally` to `then`: ```js run From 098f43f7ba836df9a247f8a51764034bee8aa5e6 Mon Sep 17 00:00:00 2001 From: "Stanislav (Stanley) Modrak" <44023416+smith558@users.noreply.github.com> Date: Thu, 16 Jun 2022 18:13:04 +0100 Subject: [PATCH 43/54] Update text --- 1-js/11-async/02-promise-basics/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/11-async/02-promise-basics/article.md b/1-js/11-async/02-promise-basics/article.md index b701319f1..4a3bc6d26 100644 --- a/1-js/11-async/02-promise-basics/article.md +++ b/1-js/11-async/02-promise-basics/article.md @@ -237,7 +237,7 @@ new Promise((resolve, reject) => { That said, `finally(f)` isn't exactly an alias of `then(f,f)` though. There are few subtle differences: 1. A `finally` handler has no arguments. In `finally` we don't know whether the promise is successful or not. That's all right, as our task is usually to perform "general" finalizing procedures. -2. A `finally` handler "passes" the result or error further to subsequent handlers. +2. A `finally` handler "passes through" the result or error to the next handler. For instance, here the result is passed through `finally` to `then`: ```js run From 77d8c7373f31fd10e98f43abd7939366dbeb9cd2 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sat, 18 Jun 2022 22:06:38 +0300 Subject: [PATCH 44/54] closes #3059 --- 1-js/11-async/01-callbacks/article.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/1-js/11-async/01-callbacks/article.md b/1-js/11-async/01-callbacks/article.md index 74cf18451..57115a909 100644 --- a/1-js/11-async/01-callbacks/article.md +++ b/1-js/11-async/01-callbacks/article.md @@ -77,6 +77,8 @@ function loadScript(src, *!*callback*/!*) { } ``` +The `onload` event is described in the article , it basically executes a function after the script is loaded and executed. + Now if we want to call new functions from the script, we should write that in the callback: ```js From 8b295f6a56c6f2882daa5c1ec1b02727d001eef0 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sat, 18 Jun 2022 22:25:42 +0300 Subject: [PATCH 45/54] closes #3062 --- 1-js/11-async/04-promise-error-handling/article.md | 1 + 1 file changed, 1 insertion(+) diff --git a/1-js/11-async/04-promise-error-handling/article.md b/1-js/11-async/04-promise-error-handling/article.md index 9f7159af9..4b778c3f8 100644 --- a/1-js/11-async/04-promise-error-handling/article.md +++ b/1-js/11-async/04-promise-error-handling/article.md @@ -199,6 +199,7 @@ In non-browser environments like Node.js there are other ways to track unhandled ## Summary - `.catch` handles errors in promises of all kinds: be it a `reject()` call, or an error thrown in a handler. +- `.then` also catches errors in the same manner, if given thee second argument (which is the error handler). - We should place `.catch` exactly in places where we want to handle errors and know how to handle them. The handler should analyze errors (custom error classes help) and rethrow unknown ones (maybe they are programming mistakes). - It's ok not to use `.catch` at all, if there's no way to recover from an error. - In any case we should have the `unhandledrejection` event handler (for browsers, and analogs for other environments) to track unhandled errors and inform the user (and probably our server) about them, so that our app never "just dies". From 727786b43ef90a35a837e71c89767aca1b949a55 Mon Sep 17 00:00:00 2001 From: "Stanislav (Stanley) Modrak" <44023416+smith558@users.noreply.github.com> Date: Sat, 18 Jun 2022 22:25:46 +0100 Subject: [PATCH 46/54] Fix typo --- 1-js/11-async/04-promise-error-handling/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/11-async/04-promise-error-handling/article.md b/1-js/11-async/04-promise-error-handling/article.md index 4b778c3f8..c5b4206ab 100644 --- a/1-js/11-async/04-promise-error-handling/article.md +++ b/1-js/11-async/04-promise-error-handling/article.md @@ -199,7 +199,7 @@ In non-browser environments like Node.js there are other ways to track unhandled ## Summary - `.catch` handles errors in promises of all kinds: be it a `reject()` call, or an error thrown in a handler. -- `.then` also catches errors in the same manner, if given thee second argument (which is the error handler). +- `.then` also catches errors in the same manner, if given the second argument (which is the error handler). - We should place `.catch` exactly in places where we want to handle errors and know how to handle them. The handler should analyze errors (custom error classes help) and rethrow unknown ones (maybe they are programming mistakes). - It's ok not to use `.catch` at all, if there's no way to recover from an error. - In any case we should have the `unhandledrejection` event handler (for browsers, and analogs for other environments) to track unhandled errors and inform the user (and probably our server) about them, so that our app never "just dies". From ed4a2125633587b969f124d77acba6a01b8d661d Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sun, 19 Jun 2022 10:14:58 +0300 Subject: [PATCH 47/54] closes #3035 --- .../05-basic-dom-node-properties/article.md | 35 ++++++++++++++---- .../dom-class-hierarchy.svg | 2 +- figures.sketch | Bin 9173583 -> 9175728 bytes 3 files changed, 29 insertions(+), 8 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 b1d6486f4..44733d51a 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 @@ -18,10 +18,31 @@ Here's the picture, explanations to follow: The classes are: -- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- is the root "abstract" class. Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called "events", we'll study them later. -- [Node](http://dom.spec.whatwg.org/#interface-node) -- is also an "abstract" class, serving as a base for DOM nodes. It provides the core tree functionality: `parentNode`, `nextSibling`, `childNodes` and so on (they are getters). Objects of `Node` class are never created. But there are concrete node classes that inherit from it, namely: `Text` for text nodes, `Element` for element nodes and more exotic ones like `Comment` for comment nodes. -- [Element](http://dom.spec.whatwg.org/#interface-element) -- is a base class for DOM elements. It provides element-level navigation like `nextElementSibling`, `children` and searching methods like `getElementsByTagName`, `querySelector`. A browser supports not only HTML, but also XML and SVG. The `Element` class serves as a base for more specific classes: `SVGElement`, `XMLElement` and `HTMLElement`. -- [HTMLElement](https://html.spec.whatwg.org/multipage/dom.html#htmlelement) -- is finally the basic class for all HTML elements. It is inherited by concrete HTML elements: +- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- is the root "abstract" class for everything. + + Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called "events", we'll study them later. + +- [Node](https://dom.spec.whatwg.org/#interface-node) -- is also an "abstract" class, serving as a base for DOM nodes. + + It provides the core tree functionality: `parentNode`, `nextSibling`, `childNodes` and so on (they are getters). Objects of `Node` class are never created. But there are other classes that inherit from it (and so inherit the `Node` functionality). + +- [Document](https://dom.spec.whatwg.org/#interface-document), for historical reasons often inherited by `HTMLDocument` (though the latest spec doesn't dictate it) -- is a document as a whole. + + The `document` global object belongs exactly to this class. It servers as an entry point to the DOM. + +- [CharacterData](https://dom.spec.whatwg.org/#interface-characterdata) -- an "abstract" class, inherited by: + - [Text](https://dom.spec.whatwg.org/#interface-text) -- the class corresponding to a text inside elements, e.g. `Hello` in `

Hello

`. + - [Comment](https://dom.spec.whatwg.org/#interface-comment) -- the class for comments. They are not shown, but each comment becomes a member of DOM. + +- [Element](https://dom.spec.whatwg.org/#interface-element) -- is the base class for DOM elements. + + It provides element-level navigation like `nextElementSibling`, `children` and searching methods like `getElementsByTagName`, `querySelector`. + + A browser supports not only HTML, but also XML and SVG. So the `Element` class serves as a base for more specific classes: `SVGElement`, `XMLElement` (we don't need them here) and `HTMLElement`. + +- Finally, [HTMLElement](https://html.spec.whatwg.org/multipage/dom.html#htmlelement) is the basic class for all HTML elements. We'll work with it most of the time. + + It is inherited by concrete HTML elements: - [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) -- the class for `` elements, - [HTMLBodyElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlbodyelement) -- the class for `` elements, - [HTMLAnchorElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlanchorelement) -- the class for `` elements, @@ -29,7 +50,7 @@ The classes are: There are many other tags with their own classes that may have specific properties and methods, while some elements, such as ``, `
`, `
` do not have any specific properties, so they are instances of `HTMLElement` class. -So, the full set of properties and methods of a given node comes as the result of the inheritance. +So, the full set of properties and methods of a given node comes as the result of the chain of inheritance. For example, let's consider the DOM object for an `` element. It belongs to [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) class. @@ -133,10 +154,10 @@ For instance: