iliakan / javascript-tutorial-ru

[Предыдущая редакция] Современный учебник JavaScript

Предыдущая версия учебника JavaScript

Этот репозиторий содержит предыдущую версию учебника JavaScript с https://learn.javascript.ru.

Новая находится на https://github.com/javascript-tutorial/ru.javascript.info.

javascript-tutorial-ru's Issues

Ошибка в Promise.reject(error)

Ошибка в описании Promise.reject(error)
Аналогично Promise.reject(error) создаёт уже выполнившийся промис, но не с успешным результатом, а с ошибкой error.

Видимо имелось ввиду Аналогично Promise.resolve(value)

https://learn.javascript.ru/promise

[feature][скринкасты] тегирование скринкастов

Теги помогут и описанию скринкаста, и SEO, и в дальнейшем заложат хороший фундамент для поиска

Отступы

http://learn.javascript.ru/closures-usage . Ещё попридираюсь. У вас в коде "объект счётчика + функция" отступы съехали

Возможность сохранять авторизацию в нескольких браузерах

• будет удобно и с мобильным

Строки, slice и substr методы

В статье про строки https://learn.javascript.ru/string
Когда речь идет о различиях между slice и substring, для substring упоминается что

Слишком большие значения усекаются до длины строки

По-моему это предложение лучше вынести в описание самого substring, т.к. оба метода здесь работают одинаково, т.е.
"hello".slice(0, 100) // hello
"hello".substring(0, 100) // hello

Типографика в учебнике

Предлагаю перейти к использованию корректных для русского языка типографических символов, в частности, кавычек-ёлочек и тире.

https://www.artlebedev.ru/kovodstvo/sections/62/

Flash & Java Applet в Интро статье

Читал статью Intro и в ходе чтения у меня сложилось впечатление, будто автор пытается чресчур сильно превознести достоинство данных технологий, не упоминая о таких недостатках как всеобщий отказ браузеров от поддержки Flash и истинного гемороя для пользователя сайта с тем чтобы заставить работать Java апплет в современных баузерах.

Я бы хотел просто услышать ещё чьё-либо мнение по этому поводу, потому как считаю что в данных формулировках у начинающего читателя может сложиться ложное впечатление об этих технологиях.

Кто что думает по этому поводу?

break me;

Что делает код:

break me;

• Ломает интерпретатор javascript
• Выходит из текущего блока цикла цикла switch на метку "me"
• Выдаёт ошибку

---

В этом случае правильным будет 3ий ответ, поскольку label me не определён в коде.

Помогите противостоять хакерам.

Приветствую.
Есть проблема: ранее на сайте была форма заявки, так вот с недавнего времени стали приходить явно спамерские письма.

Читая статью CSRF мне стала понятна теория механизма исполнения запроса (от хакера), а как вот, как реализовать данный пример у себя на сайте, пока что нет ясности.

Как сервер генерит ключ? За это отвечает file.js?

{} + {} выдаёт разные ответы в консолях ff и chromium :)

Смотрю низ http://learn.javascript.ru/object-conversion . Там, где написано "Заметим, для полноты картины, что некоторые тесты знаний в интернет предлагают вопросы типа: {}[0] // чему равно?" и так далее. Так вот, с точки зрения "настоящего Javascript", описано в ECMA spec, и реализованного в браузерах при выполнении ими СКРИПТОВ, вы написали всё верно. Надеюсь, что ваши тесты на http://learn.javascript.ru/quiz тоже правильные. Но вот при запуске этих примеров в консолях браузеров эти самые консоли иногда ведут себя не как "настоящий js", а применяют специальные хаки, чтобы {} в начале строки воспринималось как пустой объект.

В частности, консоль FF (Firefox ESR 52.2.0 на Debian) в ответ на {} + {} выдаёт NaN (первый {} воспринимается как блок кода), как и полагается по ECMA spec, как и написано у вас, и как и реализовано во всех браузерах при обработке скриптов. Но вот консоль Chromium (59.0.3071.86 на Debian) выдаёт "[object Object][object Object]". Node.js v7.10.0 выдаёт почти такой же ответ: '[object Object][object Object]'.

Так вот, хорошо бы тут предупредить об этом читателей. Мол, на консоли браузеров в этом вопросе полагаться нельзя. Как минимум (если хочется воспользоваться консолью) нужно принудить код выполняться как выражение (запихнув в круглые скобки), ну или как statement (запихнув в тело функции)

Неанонимная функция

На http://learn.javascript.ru/array-methods написано: "Для сортировки объявим и передадим в sort анонимную функцию, которая сравнивает объекты по полю age". Но в приведённом коде эта функция неанонимная

[Feature]: Add homeworks page for learners

It will be great to have special page for learners with homework not for evaluation but for learner convenience. Like a tracking what's done,(something like checkboxes) and whats not. Also the learner could add like tag - to learn more - id not deeply understand theme, etc
Pros
all homeworks in one place
Can be tracked by learner
Easy to return to the themes that were missed or wasn't understand

Убрать упоминания о IE10-

Учебник рассчитан на новичков, и исторические справки о совместимости с IE8 лишь создают информационный шум. Давайте заглянем в текущую статистику использования версий браузеров - браузер QQ занимет долю вдвое большую чем IE8. Про несоответствия QQ стандартам тоже будем рассказывать, причем вдвое чаще чем про IE8? :)

Единственное, что можно при необходимости упомянуть - IE11, в мае 2018 года у него доля 4,55%.

Я сомневаюсь, что совершенно зеленый разработчик тут же отправится в бой на госпроект, где чиновник скопипастил ТЗ с другого проекта, а тот - с предыдущего, и таким благополучным образом в требованиях оказался IE8. Шансы такой ситуации ничтожны (для новичка), и с каждым месяцем все меньше.

Итого все упоминания о IE10- не релевантны, предлагаю их убрать. Материал не простой, не надо его усложнять.

Ошибка в уроке Язык JavaScriptМетоды объектов и контекст вызова

http://learn.javascript.ru/call-apply

в блоке "Вызов call/apply с null или undefined"

Оба примера "Современный стандарт" и "без use strict" выводят всегда одинаковые значения null в браузере Google Chrome.

window не выводит.

Глобальный счётчик

http://learn.javascript.ru/closures . Последняя задача, "глобальный счётчик". В решении, видимо, вы хотели показать, что выведут alert'ы. Так что вместо alert( counter() ); // ? и так далее, видимо, должно быть alert( counter() ); // 1

Горизонтальная прокрутка в статье о метриках элементов

В статье https://learn.javascript.ru/metrics автор почему-то исходит из того, что горизонтальной полоски прокрутки не существует в принципе:

На рисунке выше посмотрим вначале на clientHeight, её посчитать проще всего. Прокрутки нет, так что это в точности то, что внутри рамок...

Между тем горизонтальный скроллбар может появиться с тем же успехом, что и вертикальный.

Ошибка в примере урока "Координаты в документе"

Раздел "Получение координат", https://learn.javascript.ru/coordinates-document#getCoords
В коде примера свойства pageYOffset и pageXOffset оказались сами по себе. Перед ними нужно добавить window..

Сейчас:

function getCoords(elem) { // кроме IE8-
  var box = elem.getBoundingClientRect();

  return {
    top: box.top + pageYOffset,
    left: box.left + pageXOffset
  };

}

Нужно:

function getCoords(elem) { // кроме IE8-
  var box = elem.getBoundingClientRect();

  return {
    top: box.top + window.pageYOffset,
    left: box.left + window.pageXOffset
  };

}

Неправильно сделан пример для задачи

https://github.com/iliakan/javascript-tutorial-ru/blob/master/1-js/7-js-misc/3-settimeout-setinterval/8-debounce/task.md тут указано, что первой выполнится f(1) хотя в ответе первой выполняется f(2).

Нерабочая ссылка в уроке "Методы объектов, this"

В последнем разделе указанного урока, "Ссылочный тип", ссылка на, видимо, документацию по Reference Type ведет на мертвый https://people.mozilla.org/.

Что выведет alert?

Что выведет alert?

let  str = "Hello";
str.something = 5;
alert(str.something); // ?

• 5
• undefined
• Будет ошибка

---

На самом деле правильный ответ undefined в Google Chrome.

Проблемы с примером в scope для new Function

Здесь не работает пример с new Function

var a = 1;
function getFunc() {
  var a = 2;
  var func = new Function('', 'alert(a)');
  return func;
}
getFunc()(); // 1, из window

Возвращает a undefined! Все проблемы из-за того, что var a = 1 нет в window! ( подробнее )

Три точки, вместо троеточия

https://learn.javascript.ru/string
В ДЗ "Усечение строки", говориться использовать "три точки", а в тестах проверяется "троеточие", таким образом даже "решение" не проходит "тесты".
Нужно изменить "троеточие" в тестах, на "три точки"
http://plnkr.co/edit/WNlhZdeL7jeeUBRYr7f9?p=preview

Proxy enumerate.

Второй пример должен выводить name, surname по условию задачи. Но выводит все свойства, верно ли это?
https://learn.javascript.ru/proxy#enumerate

Ошибка в примере урока "Объекты и прототипы"

В уроке "Объекты и прототипы", в разделе "Методы объекта" не правильный код геттера:

'use strict';

let name = "Вася", surname = "Петров";
let user = {
    name,
    surname,
    get fullName() {
        return `${name} ${surname}`;  // значения берутся из замыкания, нужно this
    }
};

alert(user.fullName); // Вася Петров
user.name = "123";
user.surname = "456";
alert(user.fullName); // Вася Петров // Не верно (из замыкания)

name и surname в fullName() берутся из замыкания, а не из объекта. Необходим this.

Предложение по исправленнию кода:

    'use strict';
    
    let name = "Вася", surname="Петров";
    let user = {
      name,
      surname,
      get fullName() {
        return `${this.name} ${this.surname}`; // обращение к проперти (*)
      }
    };
    
    alert( user.fullName ); // Вася Петров
    user.name = "123";
    user.surname = "456";
    alert( user.fullName ); // 123 456

Утверждение некорректно

В главе последнее раздела выглядит не совсем корректно.

Ради справедливости заметим, что в точности то же самое происходит в любом другом языке, где используется формат IEEE 754, включая Java, C, PHP, Ruby, Perl.

Причина:

• в процессе изучения материала читатель мог не обратить внимание на немаловажный факт о том, что в JS используется один класс для всех видов чисел.

Поэтому следующий код вводит в заблуждения

alert( 9999999999999999 ); // выведет 10000000000000000

например в Ruby

puts 9999999999999999 # выведет 9999999999999999

В других языках есть различные классы или примитивы для таких чисел ( в JS BigInt появился совсем недавно)

В коде в разделе про d'n'd лишняя скобка

FireBug в прошлом

Статься DevTools

Кажется разработка FireBug прекращена, а весь его основной функционал был вшит в консоль современного FireFox.

Добавить тест к задаче

Мне кажется к задаче следует добавить тест

it("меняет массив, оставляя только значения из диапазона", function() { var arr = [5, 5, 3, 1]; filterRangeInPlace(arr, 1, 4); assert.deepEqual(arr, [3, 1]); });

Иначе принимает как правильное код:
function filterRangeInPlace(arr, a, b){ for (var i = 0; i < arr.length; i++) { var val = arr[i]; if (val < a || val > b) { arr.splice(i, 1); } } }
который идентичен предложенному Вами решению, за исключением строки arr.splice(i, 1); (должно быть arr.splice(i--, 1);)

CSS-X-Fire перехал на github

CSS-X-Fire переехал на github, обновлений нет почти 3 года, есть форк годичной давности, возможно уже не работает в новых версиях

https://github.com/iliakan/javascript-tutorial-ru/blame/master/9-tools/1-tools-browser-extensions/article.md#L51

Незначительные правки по тексту в "try..catch"

В главе Перехват ошибок, "try..catch"
Пользователь "honteello" в комментарии написал:

Поправьте текст: "Как правило, роль window.onerror заключается в том, чтобы не оживить скрипт..." - было бы правильнее "Как правило, роль window.onerror заключается не в том, чтобы оживить скрипт..."

Я с ним согласен, это сбивает при чтении.

Вывести простые числа (часть первая учебника)

На стр 602 не отображается(схема решения и решение)

Методы объектов, this

в разделе "Значение this при вызове без контекста" после строк "При этом this получает значение window, глобального объекта:" расположен код в формате 'use strict', что приводит к выдаче undefined, а не [object Window]
Пожалуйста, исправьте

Текущий день недели

http://learn.javascript.ru/datetime . "которая выводит текущий день недели в коротком формате". Видимо, имелось в виду не текущий день недели, а день недели, соответствующий date

Время в Лондоне

http://learn.javascript.ru/datetime . В Лондоне судя по Википедии есть летнее время, так что getUTCHours необязательно покажет время в Лондоне

Горизонтальный скролл

Добрый день. В Chrome на Macbook Pro 13 на страницах уроков появляется горизонтальный скролл - https://prnt.sc/mlxl4j

В разделе 'Редакторы для кода" предлагается установить расширение Firebug

В разделе 'Редакторы для кода" предлагается установить расширение Firebug. Данное расширение не актуально (см. например https://getfirebug.com/).

Не работает ссылка

Не работает ссылка на перевод спецификации http://es5.javascript.ru/ (в шапке сайта она тоже не работает)

https://github.com/iliakan/javascript-tutorial-ru/blame/master/1-js/1-getting-started/2-pre-coding/article.md#L47

возможно её можно поменять на http://learn.javascript.ru/es-modern

Дополнение про "стрелочные функции"

Отличное дополнение от пользователя Constantine Sharov к уроку Функции

Забыли указать, что стрелочками можно записывать вот так:

let foo = (bar) => (bar += 100, bar -= 200, bar)

в которой return приходится на последнюю запятую.

С виду кажется глупо, но в коллбеках для различных методов подходит идеально. Например,

arr.reduce((p, c) => (p[c] = c + 10, p), {});

вернёт объект, в котором ключи будут называться по именам элементов исходного массива, а равны будут этим элементам + 10. Если записать просто p[c] = c + 10, будет ошибка, так как будет постоянно возвращаться p[c], а не p.

Хоть это и немного ниндзя, но это гораздо элегантнее, чем фигурные скобки с return, что выйдет на несколько строчек.

Ну или ещё пример:

let findIndex;
if (arr.some((x, i) => (findIndex = i, x < 0))) return arr[findIndex];
Если найдётся элемент массива ниже нуля, его индекс запомнится и будет возвращён, так как метод some() один из немногих перебирающих методов массива, имеющий свой "break". В других вариантах (метод find() + findIndex(), или же some() без запоминания индекса) пришлось бы использовать не один цикл, а два.

Также, в стрелочных однострочных функциях очень удобно объявлять переменные вместе с функцией, например, поиск площади треугольника формулой Херона

const heron = (a, b, c, p = (a + b + c) / 2) => Math.sqrt(p * (p - a) * (p - b) * (p - c))

вместо

const heron = (a, b, c) => {
let p = (a + b + c) / 2;
return Math.sqrt(p * (p - a) * (p - b) * (p - c));
}
Предполагается, что будет три аргумента (a, b, c). Полупериметр объявляется 4 аргументом и сразу высчитывается. А с защитой от дурака лучше записывать так:

const heron = (a, b, c, p) => (p = (a + b + c) / 2, Math.sqrt(p * (p - a) * (p - b) * (p - c)))

Ваша sort не рефлексивна

http://learn.javascript.ru/closures-usage . В функцию sort передаётся функция с таким телом: "return a.name > b.name ? 1 : -1". Т. е. она не возвращает ноль на равных аргументах, она не рефлексивна. Так нельзя. ECMA 8.0 говорит, что в такой ситуации результат работы sort неопределён: http://www.ecma-international.org/ecma-262/8.0/index.html#sec-array.prototype.sort . Исправьте это место и все места, где подобное передаётся в sort

Нестандартное свойство innerText

Может пора уже убрать это предупреждение и переписать эту часть немного?
http://learn.javascript.ru/basic-dom-node-properties

Небольшая правка текста.

В главе "Функциональное наследование", раздел "Зачем наследование?". В предложении

Например, большая кнопка – включение, шнур с розеткой нужно воткнуть в питание и т.п.

Корректнее будет использование фразы "шнур со штепсельной вилкой" или просто "шнур с вилкой", вместо "шнур с розеткой".

https://learn.javascript.ru/functional-inheritance#%D0%B7%D0%B0%D1%87%D0%B5%D0%BC-%D0%BD%D0%B0%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5

Массивы, методы

в задаче "Случайный порядок в массиве", имхо, нет смысла передавать в функцию параметры (a, b)

Правки текста в статье про eval

https://learn.javascript.ru/eval
В конце написано "Ещё примеры использования eval вы найдёте далее, в главе Формат JSON, метод toJSON.", но

1. Я там не нахожу там примеров с eval
2. Она идет не "далее"

---

Предлагаю убрать эту строчку, или возможно поменять ссылку, на какую-то другую главу, которая идет далее и в ней есть примеры с eval.

// P.S. Не умею пользоваться pull-requests, поэтому создаю issues =(

Safari on Mac 10.1.2 (12603.3.8) don't work js

Ошибка в описании ответа на задачу

На странице https://learn.javascript.ru/regexp-groups в задаче "Разобрать выражение"
Есть текст:
Итоговый массив будет включать в себя компоненты:
result[0] == "1.2 + 12" (вначале всегда полное совпадение)
result[1] == "1" (первая скобка)
result[2] == "2" (вторая скобка – дробная часть (.\d+)?)
result[3] == "+" (…)
result[4] == "12" (…)
result[5] == undefined (последняя скобка, но у второго числа дробная часть отсутствует)

для result[1] и result[2] неверно указаны совпадения для скобочных групп

Корректировка вёрстки для задачи из главы "Введение в браузерные события"

по поводу задачки из этой главы http://learn.javascript.ru/introduction-browser-events

элементы меню вот ведь у вас свёрстаны правильно с точки зрения семантики через ul и li, но почему-то кликабельный элемнет для разворачивания/сворачивания меню решили делать совсем не по семантике))

это совсем не комильфо ведь с точки зрения вёрстки, семантики, и доступности верстать кликабельные элементы через всякие заведомо некликабельные вроде div, span, p и прочие им подобные, ведь это только приводит к ошибкам, плохой поддержке на разных моб устройствах и лишнему js коду для поддержки этих самых разных моб устройств с touch экранами и тд и тп.

Для кликабельности ведь специально не зря существуют семантически правильные элементы вроде a, button и label, например, которые изначально и созданы для того, что бы по ним можно было легко кликнуть. Они сразу корректно работают на всех устройствах без дополнительных манипуляций будь у них там touch экраны как у большинства мобильников и планшетов, обычные стационарные ПК с мышкой и тд и тп. Ну и с точки зрения доступности, конечно, люди смогут без труда попасть в такую кнопку переключаясь табом по элементам или ещё какими способами. В вашем же случае, фокус пролетит мимо этой кнопки и человек с ограниченными возможностями в неё попросту никогда не попадёт.

Так как многие ученики здесь не особо много имеют навыков вёрстки, и не знают о такого разного рода тонкостях, я думаю будет более полезно давать на 100% семантические правильные примеры в задачах и главах учебника, дабы оградить их от ошибок в будущем)

Тесты на знание

Решил пройти тест. Прошел. Все неверные результаты проверил в консоле.
Встретилась пара тестов, где показало что у меня неверный вариант ответа, а верный: "Выведет ошибку". Я проверил в консоле и у меня не выдало ошибок. Как так?

Тэг applet

Во введении в разделе «Альтернативные браузерные технологии» упоминается тэг applet, но он уже не используется. Возможно, стоит убрать, так как информация утратила актуальность?

Новые темы

Очень хороший учебник! Огромное спасибо автору!
Было бы отлично хотя бы изредка расширять раздел "О всякой всячине", чтобы делать учебник более универсальным и, как следствие, - более популярным.
Вот варианты интересных тем, доступное объяснение которых в интернете не найти (тем более на русском):

1. Все случаи, когда контекст this теряется.
2. Вставка изображения (или текста) в страницу с буфера обмена.
3. Обнаружение контакта элементов при их движении (как "словить" контакт элементов разных размеров с абсолютным позиционированием, когда они перетаскиваются по странице или двигаются автоматически).

Следует ли удалить упоминание FireBug из статей?

Чтобы не вводить людей в заблуждение*, стоит ли удалить упоминания этого аддона для FF из статей?

• Какое-то время назад (в 2017ом) FireBug перестал существовать и стал частью стандартных FireFox'овских девтулзов.

Упоминается в статьях:
https://learn.javascript.ru/devtools
https://learn.javascript.ru/debugging-chrome
https://learn.javascript.ru/ie-http-analyzer
https://learn.javascript.ru/dom-console
https://learn.javascript.ru/tools-browser-extensions