diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md index 883533fd55..c2078d5efa 100644 --- a/1-js/01-getting-started/3-code-editors/article.md +++ b/1-js/01-getting-started/3-code-editors/article.md @@ -13,7 +13,7 @@ IDE загружает проект (который может состоять Если вы ещё не выбрали себе IDE, присмотритесь к этим: - [Visual Studio Code](https://code.visualstudio.com/) (кросс-платформенная, бесплатная). -- [WebStorm](https://www.jetbrains.com/webstorm/) (кросс-платформенная, платная). +- [WebStorm](https://www.jetbrains.com/webstorm/) (кросс-платформенная, бесплатная для некоммерческого использования). Для Windows есть ещё Visual Studio (не путать с Visual Studio Code). Visual Studio - это платная мощная среда разработки, которая работает только на Windows. Она хорошо подходит для .NET платформы. У неё есть бесплатная версия, которая называется [Visual Studio Community](https://www.visualstudio.com/vs/community/). 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/03-code-quality/04-ninja-code/article.md b/1-js/03-code-quality/04-ninja-code/article.md index 850b98ef6a..f8c4e5c16a 100644 --- a/1-js/03-code-quality/04-ninja-code/article.md +++ b/1-js/03-code-quality/04-ninja-code/article.md @@ -2,16 +2,16 @@ Предлагаю вашему вниманию советы мастеров древности. -Программисты прошлого использовали их, чтобы заострить разум тех, кто после них будет поддерживать код. +Ниндзя-разработчики прошлого использовали их, чтобы усложнить код и заострить разум тех, кто будет поддерживать его после них. -Гуру разработки при найме старательно ищут их применение в тестовых заданиях. +При найме проверяющие тщательно ищут их применение в коде соискателей. -Новички иногда используют их ещё лучше, чем матёрые ниндзя. +Новички иногда используют их ещё лучше, чем матёрые ниндзя! -Прочитайте их и решите, кто вы: ниндзя, новичок или, может быть, гуру? +Прочитайте их и решите, кто вы: новичок или ниндзя разработки? ```warn header="Осторожно, ирония!" -Многие пытались пройти по пути ниндзя. Мало, кто преуспел. +Многие пытались пройти по пути ниндзя! Мало кто преуспел. ``` ## Краткость – сестра таланта! diff --git a/1-js/05-data-types/10-destructuring-assignment/article.md b/1-js/05-data-types/10-destructuring-assignment/article.md index 9347a286aa..0983421102 100644 --- a/1-js/05-data-types/10-destructuring-assignment/article.md +++ b/1-js/05-data-types/10-destructuring-assignment/article.md @@ -529,7 +529,7 @@ showMenu(options); Полный синтаксис - такой же, как для деструктурирующего присваивания: ```js -function({ +function showMenu({ incomingProperty: varName = defaultValue ... }) diff --git a/1-js/05-data-types/11-date/article.md b/1-js/05-data-types/11-date/article.md index a03c056025..40402e0f92 100644 --- a/1-js/05-data-types/11-date/article.md +++ b/1-js/05-data-types/11-date/article.md @@ -416,7 +416,7 @@ alert(date); - Счёт месяцев начинается с нуля (да, январь -- это нулевой месяц). - Дни недели в `getDay()` также отсчитываются с нуля, что соответствует воскресенью. - Объект `Date` самостоятельно корректируется при введении значений, выходящих за рамки допустимых. Это полезно для сложения/вычитания дней/месяцев/недель. -- Даты можно вычитать, и разность возвращается в миллисекундах. Так происходит, потому что при преобразовании в число объект `Date` становится таймстампом. +- Даты можно вычитать, их разность возвращается в миллисекундах. Так происходит, потому что при преобразовании в число объект `Date` становится таймстампом. - Используйте `Date.now()` для быстрого получения текущего времени в формате таймстампа. Учтите, что, в отличие от некоторых других систем, в JavaScript таймстамп в миллисекундах, а не в секундах. 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/06-advanced-functions/03-closure/article.md b/1-js/06-advanced-functions/03-closure/article.md index 6eb5c21df0..0ba1d8fb1c 100644 --- a/1-js/06-advanced-functions/03-closure/article.md +++ b/1-js/06-advanced-functions/03-closure/article.md @@ -229,7 +229,7 @@ JavaScript-движки также могут оптимизировать ег - Внутреннее лексическое окружение соответствует текущему выполнению `say`. - В нём находится одна переменная `name`, аргумент функции. Мы вызываем `say("John")`, так что значение переменной `name` равно `"John"`. + В нём находится одна переменная `name`, параметр функции. Мы вызываем `say("John")`, так что значение переменной `name` равно `"John"`. - Внешнее лексическое окружение -- это глобальное лексическое окружение. В нём находятся переменная `phrase` и сама функция. diff --git a/1-js/06-advanced-functions/06-function-object/article.md b/1-js/06-advanced-functions/06-function-object/article.md index da4bf78aa3..59b009bf66 100644 --- a/1-js/06-advanced-functions/06-function-object/article.md +++ b/1-js/06-advanced-functions/06-function-object/article.md @@ -91,7 +91,7 @@ alert(f2.length); // 2 alert(many.length); // 2 ``` -Как мы видим, троеточие, обозначающее "остаточные параметры", здесь как бы "не считается" +Как мы видим, троеточие, обозначающее "остаточные параметры", здесь как бы "не считается". Свойство `length` иногда используется для [интроспекций](https://ru.wikipedia.org/wiki/Интроспекция_(программирование)) в функциях, которые работают с другими функциями. 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/10-error-handling/1-try-catch/article.md b/1-js/10-error-handling/1-try-catch/article.md index 51ef7a9be2..5a9e089544 100644 --- a/1-js/10-error-handling/1-try-catch/article.md +++ b/1-js/10-error-handling/1-try-catch/article.md @@ -628,7 +628,7 @@ window.onerror = function(message, url, line, col, error) { Роль глобального обработчика `window.onerror` обычно заключается не в восстановлении выполнения скрипта -- это скорее всего невозможно в случае программной ошибки, а в отправке сообщения об ошибке разработчикам. -Существуют также веб-сервисы, которые предоставляют логирование ошибок для таких случаев, такие как или . +Существуют также веб-сервисы, которые предоставляют логирование ошибок для таких случаев, такие как . Они работают так: diff --git a/1-js/11-async/02-promise-basics/article.md b/1-js/11-async/02-promise-basics/article.md index 30ebe1d90e..a22e4ed6d0 100644 --- a/1-js/11-async/02-promise-basics/article.md +++ b/1-js/11-async/02-promise-basics/article.md @@ -243,7 +243,7 @@ new Promise((resolve, reject) => { 1. Обработчик, вызываемый из `finally`, не имеет аргументов. В `finally` мы не знаем, как был завершён промис. И это нормально, потому что обычно наша задача - выполнить "общие" завершающие процедуры. - Пожалуйста, взгляните на приведенный выше пример: как вы можете видеть, обработчик `finally` не имеет аргументов, а результат promise обрабатывается в следующем обработчике. + Пожалуйста, взгляните на приведенный выше пример: как вы можете видеть, обработчик `finally` не имеет аргументов, а результат промиса обрабатывается в следующем обработчике. 2. Обработчик `finally` "пропускает" результат или ошибку дальше, к последующим обработчикам. diff --git a/1-js/11-async/06-promisify/article.md b/1-js/11-async/06-promisify/article.md index f322ab3f8b..a5481112a7 100644 --- a/1-js/11-async/06-promisify/article.md +++ b/1-js/11-async/06-promisify/article.md @@ -108,7 +108,7 @@ f(...).then(arrayOfResults => ..., err => ...) Также существуют модули с более гибкой промисификацией, например, [es6-promisify](https://github.com/digitaldesignlabs/es6-promisify) или встроенная функция `util.promisify` в Node.js. ```smart -Промисификация - это отличный подход, особенно, если вы будете использовать `async/await` (см. следующую главу), но она не является тотальной заменой любых колбэков. +Промисификация - это отличный подход, особенно, если вы будете использовать `async/await` (см. следующую главу об ) но она не является тотальной заменой любых колбэков. Помните, промис может иметь только один результат, но колбэк технически может вызываться сколько угодно раз. 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 753cdfd6cc..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); // Привет, мир! @@ -273,7 +273,7 @@ try { ```warn header="Ограничения на заголовки" Некоторые заголовки управляются исключительно браузером, например `Referer` или `Host`, а также ряд других. - Полный список [тут](https://www.w3.org/TR/XMLHttpRequest/#the-setrequestheader-method). + Полный список [тут](https://fetch.spec.whatwg.org/#forbidden-request-header). `XMLHttpRequest` не разрешено изменять их ради безопасности пользователей и для обеспечения корректности HTTP-запроса. ``` diff --git a/6-data-storage/02-localstorage/article.md b/6-data-storage/02-localstorage/article.md index 32b6539ca3..7a04604d0b 100644 --- a/6-data-storage/02-localstorage/article.md +++ b/6-data-storage/02-localstorage/article.md @@ -216,7 +216,7 @@ localStorage.setItem('now', Date.now()); **Это позволяет разным окнам одного источника обмениваться сообщениями.** -Современные браузеры также поддерживают [Broadcast channel API](https://developer.mozilla.org/ru/docs/Web/API/Broadcast_Channel_API) специальный API для связи между окнами одного источника, он более полнофункциональный, но менее поддерживаемый. Существуют библиотеки (полифилы), которые эмулируют это API на основе `localStorage` и делают его доступным везде. +Современные браузеры также поддерживают [Broadcast channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API) специальный API для связи между окнами одного источника, он более полнофункциональный, но менее поддерживаемый. Существуют библиотеки (полифилы), которые эмулируют это API на основе `localStorage` и делают его доступным везде. ## Итого diff --git a/7-animation/3-js-animation/article.md b/7-animation/3-js-animation/article.md index 12bee2cc5e..a8afe2c108 100644 --- a/7-animation/3-js-animation/article.md +++ b/7-animation/3-js-animation/article.md @@ -447,7 +447,7 @@ function animate({timing, draw, duration}) { - `timing` -- функция вычисления прогресса анимации. Получается момент времени от 0 до 1, возвращает прогресс анимации, обычно тоже от 0 до 1. - `draw` -- функция отрисовки анимации. -Конечно, мы могли бы улучшить вспомогательную функцию и добавить в неё больше наворотов. Но JavaScript-анимации не каждый день используются, а только когда хотят сделать что-то интересное и необычное. Не стоит усложнять функцию до тех пор пока это вам не понадобились. +Конечно, мы могли бы улучшить вспомогательную функцию и добавить в неё больше наворотов. Но JavaScript-анимации не каждый день используются, а только когда хотят сделать что-то интересное и необычное. Не стоит усложнять функцию до тех пор, пока это вам не понадобилось. JavaScript-анимации могут использовать любые функции расчёта времени. Мы рассмотрели множество примеров и их вариаций, чтобы сделать их ещё более универсальными. В отличие от CSS, мы здесь не ограничены только кривой Безье.

AltStyle によって変換されたページ (->オリジナル) /