diff --git a/1-js/2-first-steps/2-external-script/3-async-defer-inline-first/solution.md b/1-js/2-first-steps/2-external-script/3-async-defer-inline-first/solution.md deleted file mode 100644 index fcb85c01..00000000 --- a/1-js/2-first-steps/2-external-script/3-async-defer-inline-first/solution.md +++ /dev/null @@ -1,17 +0,0 @@ -**Первым выполнится обычный скрипт.** - -Заметим, что атрибуты `defer` и `async` на обычном скрипте будут проигнорированы. То есть, он работает так же, как и без них: - -```html - -``` - -Далее, обычно скрипты с `async/defer` не тормозят обработку страницы. То есть, браузер начнёт их загружать, а сам пойдёт дальше показывать страницу и выполнять скрипты. - -То есть, обычный скрипт в этом случае, очевидно, выполнится первым. - -...Но более того, даже если скрипты `small.js` и `big.js` не нужно загружать, а браузер берёт их из кеша, то он всё равно устроен так, что выполнит их после основных скриптов страницы. - -Таким образом, первым всегда будет обычный скрипт, а вот относительный порядок `small.js` и `big.js` здесь не регламентирован. diff --git a/1-js/2-first-steps/2-external-script/3-async-defer-inline-first/task.md b/1-js/2-first-steps/2-external-script/3-async-defer-inline-first/task.md deleted file mode 100644 index 612fbbae..00000000 --- a/1-js/2-first-steps/2-external-script/3-async-defer-inline-first/task.md +++ /dev/null @@ -1,17 +0,0 @@ -# Что выполнится первым из скриптов? - -[importance 4] - -В этой странице есть три скрипта. - -Какой выполнится первым? - -```html - - - - -``` - diff --git a/1-js/2-first-steps/2-external-script/article.md b/1-js/2-first-steps/2-external-script/article.md index c228bfe8..bda4bc7c 100644 --- a/1-js/2-first-steps/2-external-script/article.md +++ b/1-js/2-first-steps/2-external-script/article.md @@ -32,7 +32,6 @@ Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего [кеша](http://ru.wikipedia.org/wiki/%D0%9A%D1%8D%D1%88). Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера. - [/smart] @@ -61,7 +60,9 @@ ## Асинхронные скрипты: defer/async -Обычно тег ` +*/!* + + + Этот текст не будет показан, пока браузер не выполнит big.js. + + +``` + +И здесь вопрос -- действительно ли мы этого хотим? То есть, действительно ли оставшуюся часть страницы нельзя показывать до загрузки скрипта? + +Есть ситуации, когда мы не только НЕ хотим такой задержки, но она даже опасна. + +Например, если мы подключаем внешний скрипт, который показывает рекламу или вставляет счётчик посещений, а затем идёт наша страница. Конечно, неправильно, что пока счётчик или реклама не подгрузятся -- оставшаяся часть страницы не показывается. Счётчик посещений не должен никак задерживать отображение страницы сайта. Реклама тоже не должна тормозить сайт и нарушать его функционал. + +А что, если сервер, с которого загружается внешний скрипт, перегружен? Посетитель в этом случае может ждать очень долго! Вот пример, с подобным скриптом (стоит искусственная задержка загрузки): ```html -

Начало страницы...

+

Важная информация не покажется, пока не загрузится скрипт.

...Важная информация!

``` -В примере выше важная информация не покажется, пока не загрузится внешний скрипт. Но действительно ли он так важен, что мы хотим заставить посетителя ждать? Если это реклама или счётчик посещаемости, то вряд ли. +Что делать? -Можно поставить все подобные скрипты в конец страницы -- это уменьшит проблему, но не избавит от неё полностью, поскольку скриптов может быть несколько, и если какой-то один скрипт тормозит или завис, то последующие будут его ждать. +Можно поставить все подобные скрипты в конец страницы -- это уменьшит проблему, но не избавит от неё полностью, если скриптов несколько. Допустим, в конце страницы 3 скрипта, и первый из них тормозит -- получается, другие два его будут ждать -- тоже нехорошо. -Кроме того, когда скрипты в конце страницы -- то они начнут грузиться только тогда, когда вся страница загрузится. А это не всегда правильно, например счётчик посещений наиболее точно сработает, если загрузить его пораньше. +Кроме того, браузер дойдёт до скриптов, расположенных в конце страницы, начнут грузиться только тогда, когда вся страница загрузится. А это не всегда правильно, например счётчик посещений наиболее точно сработает, если загрузить его пораньше. + +Поэтому "расположить скрипты внизу" -- не лучший выход. Кардинально решить эту проблему помогут атрибуты `async` или `defer`:
Атрибут `async`
Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении ` ``` -Атрибут `defer` используют в тех случаях, когда второй скрипт `2.js` зависит от первого `1.js`, к примеру -- использует что-то, описанное первым скриптом. +Поэтому атрибут `defer` используют в тех случаях, когда второй скрипт `2.js` зависит от первого `1.js`, к примеру -- использует что-то, описанное первым скриптом. +Второе отличие -- скрипт с `defer` сработает, когда весь HTML-документ будет обработан браузером. + +Например, если документ достаточно большой... +```html + + + +Много много много букв +``` + +...То скрипт `async.js` выполнится, как только загрузится -- возможно, до того, как ведь документ готов. А `defer.js` подождёт готовности всего документа. + +Это бывает удобно, когда мы в скрипте хотим работать с документом, и должны быть уверены, что он полностью получен.
@@ -158,7 +195,7 @@ ```html -

Начало страницы...

+

Важная информация теперь не ждёт, пока загрузится скрипт...

@@ -173,12 +210,38 @@ Перед вставкой внешнего тега ``
  • Специальные атрибуты `async` и `defer` используются для того, чтобы пока грузится внешний скрипт -- браузер показал остальную (следующую за ним) часть страницы. Без них этого не происходит.
    • -
  • Разница между `async` и `defer`: атрибут `defer` сохраняет относительную последовательность скриптов, а `async` -- нет.
    • +
  • Разница между `async` и `defer`: атрибут `defer` сохраняет относительную последовательность скриптов, а `async` -- нет. Кроме того, `defer` всегда ждёт, пока весь HTML-документ будет готов, а `async` -- нет.
    • Очень важно не только читать учебник, но делать что-то самостоятельно. diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/solution.js b/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/solution.js deleted file mode 100644 index 6ddbd94a..00000000 --- a/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/solution.js +++ /dev/null @@ -1,11 +0,0 @@ -function pow(x, n) { - if (n < 0) return NaN; - if (Math.round(n) != n) return NaN; - if (n == 0 && x == 0) return NaN; - - var result = 1; - for (var i = 0; i < n; i++) { - result *= x; - } - return result; -} \ No newline at end of file diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/source.js b/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/source.js deleted file mode 100644 index 7a67dac5..00000000 --- a/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/source.js +++ /dev/null @@ -1,10 +0,0 @@ -function pow(x, n) { - if (n < 0) return NaN; - if (Math.round(n) != n) return NaN; - - var result = 1; - for (var i = 0; i < n; i++) { - result *= x; - } - return result; -} \ No newline at end of file diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/solution.md b/1-js/3-writing-js/4-testing/2-pow-test-0/solution.md index c60ffdfc..39eae1e7 100644 --- a/1-js/3-writing-js/4-testing/2-pow-test-0/solution.md +++ b/1-js/3-writing-js/4-testing/2-pow-test-0/solution.md @@ -32,7 +32,7 @@ describe("любое число, кроме нуля, в степени 0 рав //+ no-beautify ... it("ноль в нулевой степени даёт NaN", function() { - assert( isNaN(pow(0,0), "0 в степени 0 не NaN"); + assert( isNaN(pow(0, 0)), "0 в степени 0 не NaN"); }); ... ``` diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/solution.view/index.html b/1-js/3-writing-js/4-testing/2-pow-test-0/solution.view/index.html new file mode 100644 index 00000000..eb1aedbf --- /dev/null +++ b/1-js/3-writing-js/4-testing/2-pow-test-0/solution.view/index.html @@ -0,0 +1,27 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/test.js b/1-js/3-writing-js/4-testing/2-pow-test-0/solution.view/test.js similarity index 100% rename from 1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/test.js rename to 1-js/3-writing-js/4-testing/2-pow-test-0/solution.view/test.js diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/source.view/index.html b/1-js/3-writing-js/4-testing/2-pow-test-0/source.view/index.html new file mode 100644 index 00000000..7cc184b0 --- /dev/null +++ b/1-js/3-writing-js/4-testing/2-pow-test-0/source.view/index.html @@ -0,0 +1,26 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/source.view/test.js b/1-js/3-writing-js/4-testing/2-pow-test-0/source.view/test.js new file mode 100644 index 00000000..61453678 --- /dev/null +++ b/1-js/3-writing-js/4-testing/2-pow-test-0/source.view/test.js @@ -0,0 +1,26 @@ +describe("pow", function() { + + describe("возводит x в степень n", function() { + + function makeTest(x) { + var expected = x * x * x; + it("при возведении " + x + " в степень 3 результат: " + expected, function() { + assert.equal(pow(x, 3), expected); + }); + } + + for (var x = 1; x <= 5; x++) { + makeTest(x); + } + + }); + + it("при возведении в отрицательную степень результат NaN", function() { + assert(isNaN(pow(2, -1)), "pow(2, -1) не NaN"); + }); + + it("при возведении в дробную степень результат NaN", function() { + assert(isNaN(pow(2, 1.5)), "pow(2, -1.5) не NaN"); + }); + +}); \ No newline at end of file diff --git a/1-js/6-objects-more/2-object-conversion/article.md b/1-js/6-objects-more/2-object-conversion/article.md index 8c12d23f..e473266b 100644 --- a/1-js/6-objects-more/2-object-conversion/article.md +++ b/1-js/6-objects-more/2-object-conversion/article.md @@ -187,19 +187,19 @@ alert( a - b ); // "1" - "2" = -1 Бинарный оператор плюс `+` обычно использует числовое преобразование и метод `valueOf`. Как мы уже знаем, если подходящего `valueOf` нет (а его нет у большинства объектов), то используется `toString`, так что в итоге преобразование происходит к строке. Но если есть `valueOf`, то используется `valueOf`. Выше в примере как раз `a + b` это демонстрируют. -У объектов `Date` есть и `valueOf` и `toString`. Но оператор `+` для `Date` использует именно `toString` (хотя должен бы `valueOf`). +У объектов `Date` есть и `valueOf` -- возвращает количество миллисекунд, и `toString` -- возвращает строку с датой. + +...Но оператор `+` для `Date` использует именно `toString` (хотя должен бы `valueOf`). Это и есть исключение: ```js //+ run -// бинарный плюс, строчное преобразование +// бинарный плюс для даты toString, для остальных объектов valueOf alert( new Date + "" ); // "строка даты" - -// унарный плюс, как и - * /, приводит к числу -alert( +new Date ); // число миллисекунд ``` -Других подобных исключений нет. + +Других подобных исключений нет. [/warn] [warn header="Как испугать Java-разработчика"] diff --git a/2-ui/1-document/11-modifying-document/article.md b/2-ui/1-document/11-modifying-document/article.md index d870161f..e964dd1b 100644 --- a/2-ui/1-document/11-modifying-document/article.md +++ b/2-ui/1-document/11-modifying-document/article.md @@ -272,11 +272,11 @@ div.parentNode.insertBefore(div2, div.nextSibling);
    `parentElem.removeChild(elem)`
    Удаляет `elem` из списка детей `parentElem`.
    -
    `parentElem.replaceChild(elem, currentElem)`
    -
    Среди детей `parentElem` заменяет `currentElem` на `elem`.
    +
    `parentElem.replaceChild(newElem, elem)`
    +
    Среди детей `parentElem` удаляет `elem` и вставляет на его место `newElem`.
    -Оба этих метода возвращают удаленный узел. Если нужно, его можно вставить в другое место DOM тут же или в будущем. +Оба этих метода возвращают удаленный узел, то есть `elem`. Если нужно, его можно вставить в другое место DOM тут же или в будущем. [smart] Если вы хотите *переместить* элемент на новое место -- не нужно его удалять со старого. @@ -399,13 +399,11 @@ div.parentNode.insertBefore(div2, div.nextSibling);
  • `parent.appendChild(elem)`
  • `parent.insertBefore(elem, nextSibling)`
  • `parent.removeChild(elem)`
    • -
  • `parent.replaceChild(elem, currentElem)`
    • +
  • `parent.replaceChild(newElem, elem)`
    • Все эти методы возвращают `elem`. -**Запомнить порядок аргументов очень просто: вставляемый или удаляемый элемент -- всегда первый.** - Методы для изменения DOM также описаны в спецификации DOM Level 1. diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md index 4c57d3e0..57920ac6 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -77,6 +77,7 @@ // показать ошибку this.classList.add("error"); *!* + //... и вернуть фокус обратно age.focus(); */!* } else { @@ -86,10 +87,14 @@ ``` -Если в примере выше ввести что-то нецифровое в поле "возраст", и потом попытаться табом или мышкой перейти на другой ``, то обработчик `onblur` вернёт фокус обратно. +Этот пример работает во всех браузерах, кроме Firefox ([ошибка](https://bugzilla.mozilla.org/show_bug.cgi?id=53579)). + + +Если ввести что-то нецифровое в поле "возраст", и потом попытаться табом или мышкой перейти на другой ``, то обработчик `onblur` вернёт фокус обратно. Обратим внимание -- если из `onblur` сделать `event.preventDefault()`, то такого же эффекта не будет, потому что `onblur` срабатывает уже *после* того, как элемент потерял фокус. + ## HTML5 и CSS3 вместо focus/blur Прежде чем переходить к более сложным примерам, использующим JavaScript, мы рассмотрим три примера, когда его использовать не надо, а достаточно современного HTML/CSS. @@ -157,10 +162,14 @@ color: red; font-style: italic; } +.my*!*::-ms-input-placeholder*/!* { + color: red; + font-style: italic; +} -Стилизуется везде, кроме IE +Стилизованный плейсхолдер ``` ## Разрешаем фокус на любом элементе: tabindex diff --git a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.md b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.md index eeda701c..e69de29b 100644 --- a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.md +++ b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.md @@ -1 +0,0 @@ -[edit src="solution"]Открыть решение в песочнице[/edit] \ No newline at end of file diff --git a/2-ui/4-forms-controls/4-forms-submit/article.md b/2-ui/4-forms-controls/4-forms-submit/article.md index fb9dcc6e..ab90e212 100644 --- a/2-ui/4-forms-controls/4-forms-submit/article.md +++ b/2-ui/4-forms-controls/4-forms-submit/article.md @@ -23,8 +23,6 @@ Первый: Enter в текстовом поле
    Второй: Нажать на "Отправить": - - ``` Ожидаемое поведение: diff --git a/3-webcomponents/2-webcomponent-core/article.md b/3-webcomponents/2-webcomponent-core/article.md index 4c350277..956aaff7 100644 --- a/3-webcomponents/2-webcomponent-core/article.md +++ b/3-webcomponents/2-webcomponent-core/article.md @@ -1,4 +1,4 @@ -# Свои элементы: Custom Elements +# Пользовательские элементы: Custom Elements Платформа "веб-компоненты" включает в себя несколько стандартов [Web Components](http://www.w3.org/standards/techs/components#w3c_all), которые находятся в разработке. @@ -6,9 +6,9 @@ [cut] ## Зачем Custom Elements? -Критично настроенный читатель скажет: "Зачем ещё стандарт для создания своих элементов? Я могу создать любой элемент и прямо сейчас! В любом из современных браузеров можно писать любой HTML, используя свои теги: ``. Или создавать элементы из JavaScript при помощи `document.createElement('mytag')`. В чём же разница?" +Критично настроенный читатель скажет: "Зачем ещё стандарт для своих типов элементов? Я могу создать любой элемент и прямо сейчас! В любом из современных браузеров можно писать любой HTML, используя свои теги: ``. Или создавать элементы из JavaScript при помощи `document.createElement('mytag')`." -Она в том, что обычно элемент с нестандартным названием (например ``) воспринимается браузером, как нечто неопределённо-непонятное. Ему соответствует класс [HTMLUnknownElement](http://www.w3.org/TR/html5/dom.html#htmlunknownelement), и у него нет каких-либо особых методов. +Однако, по умолчанию элемент с нестандартным названием (например ``) воспринимается браузером, как нечто неопределённо-непонятное. Ему соответствует класс [HTMLUnknownElement](http://www.w3.org/TR/html5/dom.html#htmlunknownelement), и у него нет каких-либо особых методов. **Стандарт Custom Elements позволяет описывать для новых элементов свои свойства, методы, объявлять свой DOM, подобие конструктора и многое другое.** diff --git a/4-ajax/10-ajax-jsonp/article.md b/4-ajax/10-ajax-jsonp/article.md index 5615ca61..48dd2b9a 100644 --- a/4-ajax/10-ajax-jsonp/article.md +++ b/4-ajax/10-ajax-jsonp/article.md @@ -60,7 +60,7 @@ var user = {name: "Вася", age: 25 }; addScript('user?id=123&*!*callback=onUserData*/!*'); ``` -
  • Cервер кодирует данные в JSON и оборачивает их в функцию, название которой получает из параметра `callback`: +
  • Cервер кодирует данные в JSON и оборачивает их в вызов функции, название которой получает из параметра `callback`: ```js // ответ сервера diff --git a/4-ajax/2-ajax-nodejs/article.md b/4-ajax/2-ajax-nodejs/article.md index 47e0e87b..d96a194a 100644 --- a/4-ajax/2-ajax-nodejs/article.md +++ b/4-ajax/2-ajax-nodejs/article.md @@ -126,8 +126,7 @@ res.writeHead(200, { Вот пример демо, можете попробовать нажать на кнопку -- она работает. - -[iframe src="example" border="1" zip] +[iframe src="example" border="1" height=80 zip samedomain] Если хотите посмотреть пример поближе и поиграть с ним -- скачайте полный код, он будет работать и на вашем Node.JS. diff --git a/4-ajax/2-ajax-nodejs/example/index.js b/4-ajax/2-ajax-nodejs/example/server.js similarity index 100% rename from 4-ajax/2-ajax-nodejs/example/index.js rename to 4-ajax/2-ajax-nodejs/example/server.js diff --git a/README.md b/README.md index 917a4a3c..da5570ce 100755 --- a/README.md +++ b/README.md @@ -31,6 +31,4 @@ Ресурсы и примеры, необходимые для статьи, раздела или задачи, находятся в её директории. На них можно ссылаться из материала. -Все исправления и замечания посмотрю и учту. - -Thank you for editing :) \ No newline at end of file +Все исправления и замечания, оформленные в виде Pull Request, будут учтены. \ No newline at end of file