diff --git a/1-js/01-getting-started/4-devtools/article.md b/1-js/01-getting-started/4-devtools/article.md index 495dcfe2a2..1d52219ffc 100644 --- a/1-js/01-getting-started/4-devtools/article.md +++ b/1-js/01-getting-started/4-devtools/article.md @@ -22,7 +22,7 @@ Chrome и Firefox снискали любовь подавляющего бол Она выглядит приблизительно следующим образом: -![chrome](chrome.png) +![](chrome.webp) Точный внешний вид инструментов разработки зависит от используемой версии Chrome. Время от времени некоторые детали изменяются, но в целом внешний вид остаётся примерно похожим на предыдущие версии. @@ -52,7 +52,7 @@ Safari (браузер для Mac, не поддерживается в сист Откройте Настройки (Preferences) и перейдите к панели "Продвинутые" (Advanced). В самом низу вы найдёте чекбокс: -![safari](safari.png) +![](safari.png) Теперь консоль можно активировать нажатием клавиш `key:Cmd+Opt+C`. Также обратите внимание на новый элемент меню "Разработка" ("Develop"). В нем содержится большое количество команд и настроек. diff --git a/1-js/01-getting-started/4-devtools/chrome.png b/1-js/01-getting-started/4-devtools/chrome.png deleted file mode 100644 index b73056bcce..0000000000 Binary files a/1-js/01-getting-started/4-devtools/chrome.png and /dev/null differ diff --git a/1-js/01-getting-started/4-devtools/chrome.webp b/1-js/01-getting-started/4-devtools/chrome.webp new file mode 100644 index 0000000000..bdf067079e Binary files /dev/null and b/1-js/01-getting-started/4-devtools/chrome.webp differ diff --git a/1-js/01-getting-started/4-devtools/chrome@2x.png b/1-js/01-getting-started/4-devtools/chrome@2x.png deleted file mode 100644 index 2b63f5695b..0000000000 Binary files a/1-js/01-getting-started/4-devtools/chrome@2x.png and /dev/null differ diff --git a/1-js/01-getting-started/4-devtools/safari.png b/1-js/01-getting-started/4-devtools/safari.png index 64c7a3f6ca..4538827eb0 100644 Binary files a/1-js/01-getting-started/4-devtools/safari.png and b/1-js/01-getting-started/4-devtools/safari.png differ diff --git a/1-js/01-getting-started/4-devtools/safari@2x.png b/1-js/01-getting-started/4-devtools/safari@2x.png deleted file mode 100644 index 1c3611f50a..0000000000 Binary files a/1-js/01-getting-started/4-devtools/safari@2x.png and /dev/null differ diff --git a/1-js/02-first-steps/17-arrow-functions-basics/article.md b/1-js/02-first-steps/17-arrow-functions-basics/article.md index c41aa01f4d..25bc971ce9 100644 --- a/1-js/02-first-steps/17-arrow-functions-basics/article.md +++ b/1-js/02-first-steps/17-arrow-functions-basics/article.md @@ -41,7 +41,7 @@ alert( sum(1, 2) ); // 3 ```js run *!* let double = n => n * 2; - // примерно тоже что и: let double = function(n) { return n * 2 } + // примерно то же, что и: let double = function(n) { return n * 2 } */!* alert( double(3) ); // 6 diff --git a/1-js/06-advanced-functions/01-recursion/article.md b/1-js/06-advanced-functions/01-recursion/article.md index 61efd49707..4a8d323447 100644 --- a/1-js/06-advanced-functions/01-recursion/article.md +++ b/1-js/06-advanced-functions/01-recursion/article.md @@ -402,9 +402,9 @@ alert(sumSalaries(company)); // 6700 Это снова рекурсивное определение. -Для лучшего понимания мы рассмотрим ещё одну рекурсивную структуру под названием "связанный список", которая в некоторых случаях может использоваться в качестве альтернативы массиву. +Для лучшего понимания мы рассмотрим ещё одну рекурсивную структуру под названием "связный список", которая в некоторых случаях может использоваться в качестве альтернативы массиву. -### Связанный список +### Связный список Представьте себе, что мы хотим хранить упорядоченный список объектов. @@ -418,11 +418,11 @@ let arr = [obj1, obj2, obj3]; Единственные структурные изменения, не требующие массовой переиндексации - это изменения, которые выполняются с конца массива: `arr.push/pop`. Таким образом, массив может быть довольно медленным для больших очередей, когда нам приходится работать с его началом. -Или же, если нам действительно нужны быстрые вставка/удаление, мы можем выбрать другую структуру данных, называемую [связанный список](https://ru.wikipedia.org/wiki/Связный_список). +Или же, если нам действительно нужны быстрые вставка/удаление, мы можем выбрать другую структуру данных, называемую [связный список](https://ru.wikipedia.org/wiki/Связный_список). -Элемент *связанного списка* определяется рекурсивно как объект с: +Элемент *связного списка* определяется рекурсивно как объект с: - `value`, -- `next` - свойство, ссылающееся на следующий *элемент связанного списка* или `null`, если это последний элемент. +- `next` - свойство, ссылающееся на следующий *элемент связного списка* или `null`, если это последний элемент. Пример: @@ -444,7 +444,7 @@ let list = { Графическое представление списка: -![связанный список](linked-list.svg) +![связный список](linked-list.svg) Альтернативный код для создания: @@ -465,7 +465,7 @@ let secondList = list.next.next; list.next.next = null; ``` -![разделение связанного списка](linked-list-split.svg) +![разделение связного списка](linked-list-split.svg) Для объединения: @@ -490,7 +490,7 @@ list = { value: "new item", next: list }; */!* ``` -![связанный список](linked-list-0.svg) +![связный список](linked-list-0.svg) Чтобы удалить элемент из середины списка, нужно изменить значение `next` предыдущего элемента: @@ -498,7 +498,7 @@ list = { value: "new item", next: list }; list.next = list.next.next; ``` -![связанный список](linked-list-remove-1.svg) +![связный список](linked-list-remove-1.svg) `list.next` перепрыгнуло с `1` на значение `2`. Значение `1` теперь исключено из цепочки. Если оно не хранится где-нибудь ещё, оно будет автоматически удалено из памяти. @@ -525,7 +525,7 @@ list.next = list.next.next; - [Рекурсивно определяемая](https://en.wikipedia.org/wiki/Recursive_data_type) структура данных - это структура данных, которая может быть определена с использованием самой себя. - Например, связанный список может быть определён как структура данных, состоящая из объекта, содержащего ссылку на список (или null). + Например, связный список может быть определён как структура данных, состоящая из объекта, содержащего ссылку на список (или null). ```js list = { value, next -> list } diff --git a/1-js/07-object-properties/01-property-descriptors/article.md b/1-js/07-object-properties/01-property-descriptors/article.md index 17df28d1b8..40dbc8f601 100644 --- a/1-js/07-object-properties/01-property-descriptors/article.md +++ b/1-js/07-object-properties/01-property-descriptors/article.md @@ -262,8 +262,10 @@ delete user.name; Object.defineProperty(user, "name", { value: "Pete" }); ``` -```smart header="Ошибки отображаются только в строгом режиме" -В нестрогом режиме мы не увидим никаких ошибок при записи в свойства "только для чтения" и т.п. Эти операции всё равно не будут выполнены успешно. Действия, нарушающие ограничения флагов, в нестрогом режиме просто молча игнорируются. +```smart header="Единственное возможное изменение атрибута: writable true -> false" +Есть небольшое исключение, касающееся изменения флагов. + +Мы можем изменить `writable: true` на `false` для неконфигурируемого свойства, тем самым предотвратив изменение его значения (чтобы добавить ещё один уровень защиты). Однако не наоборот. ``` ## Метод Object.defineProperties diff --git a/1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md b/1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md index 235b4d11ab..7e9fc4a414 100644 --- a/1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md +++ b/1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md @@ -17,7 +17,7 @@ Rabbit.prototype.sayHi = function() { let rabbit = new Rabbit("Rabbit"); ``` -Все эти вызовы делают одно и тоже или нет? +Все эти вызовы делают одно и то же или нет? ```js rabbit.sayHi(); diff --git a/1-js/09-classes/03-static-properties-methods/article.md b/1-js/09-classes/03-static-properties-methods/article.md index 38394aa8e8..68b7ce6395 100644 --- a/1-js/09-classes/03-static-properties-methods/article.md +++ b/1-js/09-classes/03-static-properties-methods/article.md @@ -122,8 +122,6 @@ article.createTodays(); /// Error: article.createTodays is not a function ## Статические свойства -[recent browser=Chrome] - Статические свойства также возможны, они выглядят как свойства класса, но с `static` в начале: ```js run diff --git a/1-js/99-js-misc/09-weakref-finalizationregistry/article.md b/1-js/99-js-misc/09-weakref-finalizationregistry/article.md index f3dccb56c4..6a7d9ba40f 100644 --- a/1-js/99-js-misc/09-weakref-finalizationregistry/article.md +++ b/1-js/99-js-misc/09-weakref-finalizationregistry/article.md @@ -116,7 +116,7 @@ if (ref) { ## Варианты использования WeakRef `WeakRef` обычно используется для создания кешей или -[ассоциативных массивов](https://ru.wikipedia.org/wiki/Ассоциативный_массив), в которых хранятся ресурсоёмкие объекты. Это позволяет избежать предотвращение удаления этих объектов сборщиком мусора только на основе их присутствия в кеше или ассоциативном массиве. +[ассоциативных массивов](https://ru.wikipedia.org/wiki/Ассоциативный_массив), в которых хранятся ресурсоёмкие объекты. Это позволяет избежать предотвращения удаления этих объектов сборщиком мусора только на основе их присутствия в кеше или ассоциативном массиве. Один из основных примеров - это ситуация, когда у нас есть большое количество объектов бинарных изображений (например, представленных в виде `ArrayBuffer` или `Blob`), и мы хотим связать имя или путь с каждым изображением. Существующие структуры данных не совсем подходят для этих целей: diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index a4a1144587..a461966b8b 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -96,7 +96,7 @@ BOM является частью общей [спецификации HTML](htt Говоря о стандартах, у нас есть: Спецификация DOM -: описывает структуру документа, манипуляции с контентом и события, подробнее на . +: Описывает структуру документа, манипуляции с контентом и события, подробнее на . Спецификация CSSOM : Описывает файлы стилей, правила написания стилей и манипуляций с ними, а также то, как это всё связано со страницей, подробнее на . diff --git a/20-css-for-js/10-box-sizing/article.md b/20-css-for-js/10-box-sizing/article.md index ece76c0026..2db3edf632 100755 --- a/20-css-for-js/10-box-sizing/article.md +++ b/20-css-for-js/10-box-sizing/article.md @@ -5,7 +5,7 @@ ## Значения box-sizing `content-box` -: Это значение по умолчанию. В этом случае свойства `width/height` обозначают то, что находится *внутри `padding`*. +: Это значение по умолчанию. В этом случае свойства `width/height` обозначают то, что находится *внутри* `padding`. `border-box` : Значения `width/height` задают высоту/ширину *всего элемента*. @@ -68,7 +68,7 @@ div { Как сделать, чтобы элементы растянулись чётко по ширине `FORM`? Попробуйте добиться этого самостоятельно, перед тем как читать дальше. -### Попытка width:100% +### Попытка width: 100% Первое, что приходит в голову -- поставить всем элементам `INPUT` ширину `width: 100%`. diff --git a/20-css-for-js/17-css-sprite/article.md b/20-css-for-js/17-css-sprite/article.md index 09abaaf5c8..766e484467 100755 --- a/20-css-for-js/17-css-sprite/article.md +++ b/20-css-for-js/17-css-sprite/article.md @@ -40,7 +40,7 @@ CSS-спрайт -- способ объединить много изображ ## Шаг 1. Использовать background -Первый шаг к объединению изображений в "спрайт" -- показывать их через `background`., а не через тег `IMG`. +Первый шаг к объединению изображений в "спрайт" -- показывать их через `background`, а не через тег `IMG`. В данном случае он уже сделан. Стиль для дерева: diff --git a/20-css-for-js/2-css-units/article.md b/20-css-for-js/2-css-units/article.md index ac4f921ddf..deca094f39 100644 --- a/20-css-for-js/2-css-units/article.md +++ b/20-css-for-js/2-css-units/article.md @@ -55,7 +55,7 @@ ``` -`24` пикселей -- и в Африке `24` пикселей, поэтому размер шрифта в `
` одинаков. +`24` пикселя -- и в Африке `24` пикселя, поэтому размер шрифта в `
` одинаков. А вот аналогичный пример с `em` вместо `px`: @@ -66,7 +66,7 @@
``` -Так как значение в `em` высчитывается относительно *текущего шрифта*, то вложенная строка в `1.5` раза больше, чем первая. +Так как значение в `em` высчитывается относительно *текущего шрифта*, то текст во вложенном `
` в `1.5` раза крупнее, чем в родительском. Выходит, размеры, заданные в `em`, будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно. @@ -160,7 +160,7 @@
  • от жизни
      -
    • собачей
    • +
    • собачьей
@@ -196,7 +196,7 @@
  • от жизни
      -
    • собачей
    • +
    • собачьей
@@ -245,7 +245,7 @@
  • от жизни
      -
    • собачей
    • +
    • собачьей
@@ -262,7 +262,7 @@ let html = document.documentElement; up.onclick = function() { // при помощи JS увеличить размер шрифта html на 2px - html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px'; + html.style.fontSize = parseInt(getComputedStyle(html).fontSize) + 2 + 'px'; }; ``` @@ -273,7 +273,7 @@ up.onclick = function() { Единица `rem` не поддерживается в IE8-. -## Относительно экрана: vw, vh, vmin, vmax +## Относительно окна браузера: vw, vh, vmin, vmax Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта [CSS Values and Units 3](https://drafts.csswg.org/css-values-3/): @@ -297,8 +297,8 @@ up.onclick = function() { Мы рассмотрели единицы измерения: - `px` -- абсолютные пиксели, к которым привязаны и потому не нужны `mm`, `cm`, `pt` и `pc`. Используется для максимально конкретного и точного задания размеров. -- `em` -- задаёт размер относительно шрифта родителя, можно относительно конкретных символов: `"x"`(`ex`) и `"0"`(`ch`), используется там, где нужно упростить масштабирование компоненты. +- `em` -- задаёт размер относительно шрифта родителя, можно относительно конкретных символов: `"x"`(`ex`) и `"0"`(`ch`), используется там, где нужно упростить масштабирование компонента. - `rem` -- задаёт размер относительно шрифта ``, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в `rem`, а JS меняет шрифт у ``. - `%` -- относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты. -- `vw`, `vh`, `vmin`, `vmax` -- относительно размера экрана. +- `vw`, `vh`, `vmin`, `vmax` -- относительно размеров окна браузера. diff --git a/3-frames-and-windows/06-clickjacking/article.md b/3-frames-and-windows/06-clickjacking/article.md index 9eeb9a9323..1fcfd7117e 100644 --- a/3-frames-and-windows/06-clickjacking/article.md +++ b/3-frames-and-windows/06-clickjacking/article.md @@ -62,7 +62,7 @@ iframe { /* ифрейм с сайта-жертвы */ ```smart header="Clickjacking-атака для кликов мыши, а не для клавиатуры" Эта атака срабатывает только на действия мыши (или аналогичные, вроде нажатия пальцем на мобильном устройстве). -Клавиатурный ввод гораздо сложнее перенаправить. Технически, если у нас есть текстовое поле для взлома, мы можем расположить ифрейм таким образом, чтобы текстовые поля перекрывали друг друга. Тогда посетитель при попытке сфокусироваться на текстовом поле, которое он видит на странице, фактически будет фокусироваться на текстовом поле внутри ифрейм. +Клавиатурный ввод гораздо сложнее перенаправить. Технически, если у нас есть текстовое поле для взлома, мы можем расположить ифрейм таким образом, чтобы текстовые поля перекрывали друг друга. Тогда посетитель при попытке сфокусироваться на текстовом поле, которое он видит на странице, фактически будет фокусироваться на текстовом поле внутри ифрейма. Но есть одна проблема. Всё, что посетитель печатает, будет скрыто, потому что ифрейм не виден. @@ -87,9 +87,9 @@ if (top != window) { ### Блокировка top-навигации -Мы можем заблокировать переход, вызванный сменой `top.location` в обработчике события beforeunload. +Мы можем заблокировать переход, вызванный изменением `top.location`, в обработчике события beforeunload. -Внешняя страница (принадлежащая хакеру) устанавливает обработчик на это событие, отменяющий его, например, такой: +Внешняя страница (принадлежащая хакеру) устанавливает на это событие обработчик, отменяющий действие браузера по умолчанию, например: ```js window.onbeforeunload = function() { @@ -97,7 +97,7 @@ window.onbeforeunload = function() { }; ``` -Когда iframe пытается изменить `top.location`, посетитель увидит сообщение с вопросом действительно ли он хочет покинуть эту страницу. В большинстве случаев посетитель ответит отрицательно, поскольку он не знает об ифрейме: всё, что он видит - это верхнюю страницу, которую нет причин покидать. Поэтому `top.location` не изменится! +Тогда при попытке ифрейма изменить `top.location` посетитель увидит сообщение с вопросом, действительно ли он хочет покинуть эту страницу. В большинстве случаев посетитель ответит отрицательно, поскольку он не знает об ифрейме: всё, что он видит - это верхнюю страницу, которую нет причин покидать. Поэтому `top.location` не изменится! В действии: diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md index eaf65164cf..b806c80ff3 100644 --- a/4-binary/03-blob/article.md +++ b/4-binary/03-blob/article.md @@ -203,7 +203,7 @@ canvas.toBlob(function(blob) { let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png')); ``` -Для создания скриншота страницы мы можем использовать такую библиотеку, как . Всё, что она делает, это просто проходит страницу и отрисовывает её в ``. После этого мы может получить Blob одним из вышеуказанных способов. +Для создания скриншота страницы мы можем использовать такую библиотеку, как . Всё, что она делает, это просто проходит страницу и отрисовывает её в ``. После этого мы можем получить Blob одним из вышеуказанных способов. ## Из Blob в ArrayBuffer diff --git a/5-network/08-xmlhttprequest/article.md b/5-network/08-xmlhttprequest/article.md index a6f1441b06..28a9c8d9fb 100644 --- a/5-network/08-xmlhttprequest/article.md +++ b/5-network/08-xmlhttprequest/article.md @@ -171,7 +171,7 @@ xhr.responseType = 'json'; xhr.send(); -// тело ответа {"сообщение": "Привет, мир!"} +// тело ответа {"message": "Привет, мир!"} xhr.onload = function() { let responseObj = xhr.response; alert(responseObj.message); // Привет, мир!