From 0eec1aaccb74e1679d98d541e225a64e58e16794 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Mon, 16 Feb 2015 10:39:40 +0300 Subject: [PATCH] renovations --- .../4-testing/2-pow-test-0/task.md | 2 +- .../11-array-unique/_js.view/solution.js | 2 +- .../8-array-methods/article.md | 4 +- .../1-global-object/article.md | 4 +- .../1-object-methods/article.md | 2 +- .../article.md | 2 +- .../7-default-browser-action/article.md | 4 +- .../solution.view/index.html | 2 +- .../solution.view/index.html | 2 +- .../solution.view/index.html | 2 +- .../solution.view/index.html | 2 +- 2-ui/3-event-details/6-mousewheel/article.md | 2 +- .../6-mousewheel/wheel.view/index.html | 5 +- .../solution.view/index.html | 2 - .../1-calculate-capitalization/solution.md | 2 +- .../solution.view/index.html | 2 +- .../3-events-change/article.md | 51 +++++++++++-------- .../4-forms-submit/article.md | 12 ++--- 3-more/10-ajax/14-ajax-iframe-xdomain/name.js | 2 +- .../14-ajax-iframe-xdomain/name/name.js | 2 +- 3-more/11-css-for-js/18-css-format/article.md | 2 +- .../8-range-textrange-selection/article.md | 14 ++--- .../domRangeCreate.view/index.html | 2 +- .../domRangeHighlight.view/index.html | 2 +- .../7-frames-and-windows/4-iframes/article.md | 4 +- 25 files changed, 68 insertions(+), 64 deletions(-) diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/task.md b/1-js/3-writing-js/4-testing/2-pow-test-0/task.md index 44063c17..28291a3a 100644 --- a/1-js/3-writing-js/4-testing/2-pow-test-0/task.md +++ b/1-js/3-writing-js/4-testing/2-pow-test-0/task.md @@ -2,6 +2,6 @@ [importance 5] -Добавьте к [предыдущей задаче](/task/pow-nan-spec) тесты, которые будет проверять, что любое число, кроме нуля, в нулевой степени равно `1`, а ноль в нулевой степени даёт `NaN` (это математически корректно, результат 00 не определён). +Добавьте к [предыдущей задаче](/task/pow-nan-spec) тесты, которые будут проверять, что любое число, кроме нуля, в нулевой степени равно `1`, а ноль в нулевой степени даёт `NaN` (это математически корректно, результат 00 не определён). При необходимости, исправьте реализацию, чтобы тесты проходили без ошибок. \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/11-array-unique/_js.view/solution.js b/1-js/4-data-structures/8-array-methods/11-array-unique/_js.view/solution.js index a4f7cdce..13258c32 100644 --- a/1-js/4-data-structures/8-array-methods/11-array-unique/_js.view/solution.js +++ b/1-js/4-data-structures/8-array-methods/11-array-unique/_js.view/solution.js @@ -6,5 +6,5 @@ function unique(arr) { obj[str] = true; // запомнить строку в виде свойства объекта } - return Object.keys(obj); // или собрать ключи перебором для IE<9 + return Object.keys(obj); // или собрать ключи перебором для IE8- } \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/article.md b/1-js/4-data-structures/8-array-methods/article.md index e25dbda7..e8b879a0 100644 --- a/1-js/4-data-structures/8-array-methods/article.md +++ b/1-js/4-data-structures/8-array-methods/article.md @@ -367,7 +367,7 @@ alert(newArr); // 1,2,3,4,5 ## indexOf/lastIndexOf -Эти методы не поддерживаются в IE<9. Для их поддержки подключите библиотеку [ES5-shim](https://github.com/kriskowal/es5-shim). +Эти методы не поддерживаются в IE8-. Для их поддержки подключите библиотеку [ES5-shim](https://github.com/kriskowal/es5-shim). Метод ["arr.indexOf(searchElement[, fromIndex])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf) возвращает номер элемента `searchElement` в массиве `arr` или `-1`, если его нет. @@ -446,7 +446,7 @@ alert(keys); // name, age
  • `sort` -- для сортировки массива. Если не передать функцию сравнения -- сортирует элементы как строки.
  • `reverse` -- меняет порядок элементов на обратный.
  • `concat` -- объединяет массивы.
    • -
  • `indexOf/lastIndexOf` -- возвращают позицию элемента в массиве (не поддерживается в IE<9).
    • +
  • `indexOf/lastIndexOf` -- возвращают позицию элемента в массиве (не поддерживается в IE8-).
    • Изученных нами методов достаточно в 95% случаях, но существуют и другие. Для знакомства с ними рекомендуется заглянуть в справочник Array и [Array в Mozilla Developer Network](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array). \ No newline at end of file diff --git a/1-js/5-functions-closures/1-global-object/article.md b/1-js/5-functions-closures/1-global-object/article.md index 2bd3ad40..83c3f44e 100644 --- a/1-js/5-functions-closures/1-global-object/article.md +++ b/1-js/5-functions-closures/1-global-object/article.md @@ -190,7 +190,7 @@ var i = 5;
    ...
    ``` @@ -200,7 +200,7 @@ var i = 5; Это была реклама того, что надо везде ставить `var`. -
  • Ошибка при рекурсии через функцию-свойство `window`. Следующий код "умрет" в IE<9: +
  • Ошибка при рекурсии через функцию-свойство `window`. Следующий код "умрет" в IE8-: ```html diff --git a/1-js/6-objects-more/1-object-methods/article.md b/1-js/6-objects-more/1-object-methods/article.md index 17316f35..dfe915eb 100644 --- a/1-js/6-objects-more/1-object-methods/article.md +++ b/1-js/6-objects-more/1-object-methods/article.md @@ -121,7 +121,7 @@ user.sayHi(); // Василий ## Подробнее про this -Любая функция может иметь в себе `this`. Совершенно неважно, объявлена она в объекте или вне него. +Любая функция может иметь в себе `this`. Совершенно неважно, объявлена ли она в объекте или отдельно от него. Значение `this` называется *контекстом вызова* и будет определено в момент вызова функции. diff --git a/2-ui/1-document/9-attributes-and-custom-properties/article.md b/2-ui/1-document/9-attributes-and-custom-properties/article.md index 62900197..1ead670a 100644 --- a/2-ui/1-document/9-attributes-and-custom-properties/article.md +++ b/2-ui/1-document/9-attributes-and-custom-properties/article.md @@ -484,7 +484,7 @@ div.classList.add('order-state-canceled'); //+ run document.body.setAttribute('my', 123); -alert( document.body.my ); // 123 в IE<9 +alert( document.body.my ); // 123 в IE8- ``` При этом даже тип данных не меняется. Атрибут не становится строкой, как ему положено. diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/article.md b/2-ui/2-events-and-interfaces/7-default-browser-action/article.md index 712f9d32..41079161 100644 --- a/2-ui/2-events-and-interfaces/7-default-browser-action/article.md +++ b/2-ui/2-events-and-interfaces/7-default-browser-action/article.md @@ -129,7 +129,7 @@ element.onclick = function(event) { if (event.preventDefault) { // если метод существует event.preventDefault(); // то вызвать его - } else { // иначе вариант IE<9: + } else { // иначе вариант IE8-: event.returnValue = false; } } @@ -147,7 +147,7 @@ event.preventDefault ? event.preventDefault() : (event.returnValue=false); diff --git a/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.view/index.html b/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.view/index.html index b93cee98..8555a47f 100755 --- a/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.view/index.html +++ b/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.view/index.html @@ -17,7 +17,7 @@ for (var i = 0; i < sources.length; i++) { var img = document.createElement('img'); - // сначала onload/onerror, затем src - важно для IE<9 + // сначала onload/onerror, затем src - важно для IE8- img.onload = img.onerror = onLoad; img.src = sources[i]; } diff --git a/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/index.html b/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/index.html index f7994a00..4b9a79d2 100755 --- a/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/index.html +++ b/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/index.html @@ -23,7 +23,7 @@ script.onload = onload; // все браузеры, IE с версии 9 - script.onreadystatechange = function () { // IE<9 + script.onreadystatechange = function () { // IE8- if (this.readyState == 'loaded' || this.readyState == 'complete') { setTimeout(onload, 0); } diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/index.html b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/index.html index 6b75f501..0d04f90d 100755 --- a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/index.html +++ b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/index.html @@ -33,7 +33,7 @@ onload(i); }; - script.onreadystatechange = function() { // IE<9 + script.onreadystatechange = function() { // IE8- if (this.readyState == 'loaded' || this.readyState == 'complete') { setTimeout(this.onload, 0); // возможны повторные вызовы onload } diff --git a/2-ui/3-event-details/6-mousewheel/1-scale-with-mouse-wheel/solution.view/index.html b/2-ui/3-event-details/6-mousewheel/1-scale-with-mouse-wheel/solution.view/index.html index cc0973ff..3d8e0677 100644 --- a/2-ui/3-event-details/6-mousewheel/1-scale-with-mouse-wheel/solution.view/index.html +++ b/2-ui/3-event-details/6-mousewheel/1-scale-with-mouse-wheel/solution.view/index.html @@ -21,7 +21,7 @@ function addOnWheel(elem, handler) { // 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим elem.addEventListener ("MozMousePixelScroll", handler); } - } else { // IE<9 + } else { // IE8- text.attachEvent ("onmousewheel", handler); } } diff --git a/2-ui/3-event-details/6-mousewheel/article.md b/2-ui/3-event-details/6-mousewheel/article.md index 5b5454fd..ca3c4331 100644 --- a/2-ui/3-event-details/6-mousewheel/article.md +++ b/2-ui/3-event-details/6-mousewheel/article.md @@ -47,7 +47,7 @@ if (elem.addEventListener) { // Firefox < 17 elem.addEventListener ("MozMousePixelScroll", onWheel); } -} else { // IE<9 +} else { // IE8- elem.attachEvent ("onmousewheel", onWheel); } diff --git a/2-ui/3-event-details/6-mousewheel/wheel.view/index.html b/2-ui/3-event-details/6-mousewheel/wheel.view/index.html index 6974c280..244d840e 100644 --- a/2-ui/3-event-details/6-mousewheel/wheel.view/index.html +++ b/2-ui/3-event-details/6-mousewheel/wheel.view/index.html @@ -31,14 +31,15 @@ if (elem.addEventListener) { // устаревший вариант события elem.addEventListener ("mousewheel", onWheel); } else { - // 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим + // Firefox < 17 elem.addEventListener ("MozMousePixelScroll", onWheel); } -} else { // IE<9 +} else { // IE8- elem.attachEvent ("onmousewheel", onWheel); } +// Это решение предусматривает поддержку IE8- function onWheel(e) { e = e || window.event; diff --git a/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.view/index.html index 154ca08a..8c75f4c1 100755 --- a/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.view/index.html +++ b/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.view/index.html @@ -37,8 +37,6 @@ function getChar(event) { if (navigator.platform.substr(0,3) != 'Mac') { // событие для CapsLock глючит под Mac document.onkeydown = function(e) { - e = e || event; - if (e.keyCode == 20 && capsLockEnabled !== null) { capsLockEnabled = !capsLockEnabled; } diff --git a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.md b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.md index 83b1a298..83dff893 100644 --- a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.md +++ b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.md @@ -5,7 +5,7 @@ Отслеживаем события изменения для перевычисления результатов: diff --git a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.view/index.html b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.view/index.html index e014fedd..aa60fae9 100755 --- a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.view/index.html +++ b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.view/index.html @@ -102,7 +102,7 @@ moneyElem.onkeyup = calculate; // любые действия, кроме IE. В IE9 также работает, кроме удаления moneyElem.oninput = calculate; -moneyElem.onpropertychange = function() { // для IE<9 изменение значения, кроме удаления +moneyElem.onpropertychange = function() { // для IE8- изменение значения, кроме удаления event.propertyName == "value" && calculate(); } diff --git a/2-ui/4-forms-controls/3-events-change/article.md b/2-ui/4-forms-controls/3-events-change/article.md index 7b181559..72cc1474 100644 --- a/2-ui/4-forms-controls/3-events-change/article.md +++ b/2-ui/4-forms-controls/3-events-change/article.md @@ -1,4 +1,4 @@ -# Изменение: change, input, propertychange +# Изменение: change, input, cut, copy, paste На элементах формы происходят события клавиатуры и мыши, но есть и несколько других, особенных событий. @@ -24,9 +24,33 @@ Для того, чтобы видеть изменения `checkbox/radio` тут же -- в IE8- нужно повесить обработчик на событие `click` (оно произойдет и при изменении значения с клавиатуры) или воспользоваться событием `propertychange`, описанным далее. [/warn] -## Событие propertychange +## Событие input -Это событие происходит только в старых IE, до версии 11, при любом изменении свойства. Оно позволяет отлавливать изменение тут же и используется, преимущественно, для исправления ошибок в старых IE. +Событие `input` срабатывает *тут же* при изменении значения текстового элемента и поддерживается всеми браузерами, кроме IE8-. + +В IE9 оно поддерживается частично, а именно -- *не возникает при удалении символов* (как и `onpropertychange`). + +Пример использования (не работает в IE8-): + +```html + + oninput: + +``` + +В современных браузерах `oninput` -- самое главное событие для работы с элементом формы. Именно его, а не `keydown/keypress` следует использовать. + +Если бы ещё не проблемы со старыми IE... Впрочем, их можно решить при помощи события `propertychange`. + +## IE10-, событие propertychange + +Это событие происходит только в IE10-, при любом изменении свойства. Оно позволяет отлавливать изменение тут же. Оно нестандартное, и его основная область использования -- исправление недочётов обработки событий в старых IE. Если поставить его на `checkbox` в IE8-, то получится "правильное" событие `change`: @@ -55,27 +79,10 @@ if("onpropertychange" in checkbox) { ``` -Это событие также срабатывает при изменении значения текстового элемента, но в IE9 у него ошибка: оно не срабатывает при удалении символов. +Это событие также срабатывает при изменении значения текстового элемента. Поэтому его можно использовать в старых IE вместо `oninput`. -## Событие input +К сожалению, в IE9 у него недочёт: оно не срабатывает при удалении символов. Поэтому сочетания `onpropertychange` + `oninput` недостаточно, чтобы поймать любое изменение поля в старых IE. Далее мы рассмотрим пример, как это можно сделать иначе. -Событие `input` срабатывает *тут же* при изменении значения текстового элемента и поддерживается всеми браузерами, кроме IE8-. - -В IE9 оно поддерживается частично, а именно -- *не возникает при удалении символов* (как и `onpropertychange`). - -Пример использования (не работает в IE8-): - -```html - - oninput: - -``` ## События cut, copy, paste 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 05055b4e..d44af389 100644 --- a/2-ui/4-forms-controls/4-forms-submit/article.md +++ b/2-ui/4-forms-controls/4-forms-submit/article.md @@ -2,7 +2,7 @@ Событие `submit` возникает при отправке формы. Наиболее частое его применение -- это *валидация* (проверка) формы перед отправкой. -Метод `submit` позволяет инициировать отправку формы из JavaScript, без участия пользователя. Далее мы рассмотрим их важные детали использования. +Метод `submit` позволяет инициировать отправку формы из JavaScript, без участия пользователя. Далее мы рассмотрим детали их использования. [cut] ## Событие submit @@ -15,9 +15,7 @@ Какой бы способ ни выбрал посетитель -- будет сгенерировано событие `submit`. Обработчик в нём может проверить данные и, если они неверны, то вывести ошибку и сделать `event.preventDefault()` -- тогда форма не отправится на сервер. -Посмотрим это на живом примере. - -Оба способа выдадут сообщение, форма не будет отправлена: +Например, в таком HTML оба способа выведут `alert`, форма не будет отправлена: ```html @@ -37,7 +35,7 @@ [smart header="Взаимосвязь событий `submit` и `click`"] -**При отправке формы путём нажатия Enter на текстовом поле, на элементе `` везде, кроме IE<9, генерируется событие `click`.** +При отправке формы путём нажатия Enter на текстовом поле, на элементе `` везде, кроме IE8-, генерируется событие `click`. Это довольно забавно, учитывая что клика-то и не было. @@ -51,8 +49,8 @@ [/smart] -[warn header="В IE<9 событие `submit` не всплывает"] -В IE<9 событие `submit` не всплывает. Впрочем, если вешать обработчик `submit` на сам элемент формы, без использования делегирования, то это не создаёт проблем. +[warn header="В IE8- событие `submit` не всплывает"] +В IE8- событие `submit` не всплывает. Впрочем, если вешать обработчик `submit` на сам элемент формы, без использования делегирования, то это не создаёт проблем.
    • [/warn] diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name.js b/3-more/10-ajax/14-ajax-iframe-xdomain/name.js index 1221f9f9..15a49d63 100755 --- a/3-more/10-ajax/14-ajax-iframe-xdomain/name.js +++ b/3-more/10-ajax/14-ajax-iframe-xdomain/name.js @@ -25,7 +25,7 @@ function iframePost(url, data, onSuccess, onError) { onSuccess( eval('(' + newName +')') ); }; - // для IE<9 нужно использовать attachEvent вместо iframe.onload + // для IE8- нужно использовать attachEvent вместо iframe.onload if (iframe.attachEvent && !iframe.addEventListener) { iframe.attachEvent("onload", iframe.onload); iframe.onload = null; diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name/name.js b/3-more/10-ajax/14-ajax-iframe-xdomain/name/name.js index 1221f9f9..15a49d63 100755 --- a/3-more/10-ajax/14-ajax-iframe-xdomain/name/name.js +++ b/3-more/10-ajax/14-ajax-iframe-xdomain/name/name.js @@ -25,7 +25,7 @@ function iframePost(url, data, onSuccess, onError) { onSuccess( eval('(' + newName +')') ); }; - // для IE<9 нужно использовать attachEvent вместо iframe.onload + // для IE8- нужно использовать attachEvent вместо iframe.onload if (iframe.attachEvent && !iframe.addEventListener) { iframe.attachEvent("onload", iframe.onload); iframe.onload = null; diff --git a/3-more/11-css-for-js/18-css-format/article.md b/3-more/11-css-for-js/18-css-format/article.md index 947ef731..1926f119 100644 --- a/3-more/11-css-for-js/18-css-format/article.md +++ b/3-more/11-css-for-js/18-css-format/article.md @@ -139,7 +139,7 @@ box-shadow:0 0 100px 20px #000; -CSS-препроцессоры, такие как [SASS](http://sass-lang.com/), [LESS](http://lesscss.org/), [Stylus](http://learnboost.github.com/stylus/), [Prefix-free](http://leaverou.github.com/prefixfree/) делает написание CSS сильно удобнее.. +CSS-препроцессоры, такие как [SASS](http://sass-lang.com/), [LESS](http://lesscss.org/), [Stylus](http://learnboost.github.com/stylus/), [Autoprefixer](https://github.com/postcss/autoprefixer) делают написание CSS сильно удобнее.. Выберите один из них и используйте. Единственно, они добавляют дополнительную предобработку CSS, которую нужно учесть, и желательно, на сервере. diff --git a/3-more/6-extra/8-range-textrange-selection/article.md b/3-more/6-extra/8-range-textrange-selection/article.md index 7def6fc7..f0a9f898 100644 --- a/3-more/6-extra/8-range-textrange-selection/article.md +++ b/3-more/6-extra/8-range-textrange-selection/article.md @@ -15,7 +15,7 @@ Но такие области можно создавать не только с помощью пользовательского выделения, но и из JavaScript-сценария, выполняя с ними определенные манипуляции. Однако, написать простой иллюстрирующий код сразу не выйдет, т.к. есть одно НО -- Internet Explorer до версии 9. В Microsoft создали собственную реализацию -- [объект TextRange](http://msdn.microsoft.com/en-us/library/ms535872.aspx). Разбёрем каждую реализацию по-отдельности. -### DOM-реализация Range (кроме IE<9) +### DOM-реализация Range (кроме IE8-) `Range` состоит из двух граничных точек (boundary-points), соответствующих началу и концу области. Позиция любой граничной точки определяется в документе с помощью двух свойств: узел (node) и смещение (offset). @@ -64,7 +64,7 @@ function domRangeCreate() { // Теперь мы можем вернуть текст, который содержится в полученной области return rng.toString(); } else { - return 'Вероятно, у вас IE<9, смотрите реализацию TextRange ниже'; + return 'Вероятно, у вас IE8-, смотрите реализацию TextRange ниже'; } } @@ -147,7 +147,7 @@ function domRangeHighlight(text) { // Обернем наш Range в спан rng.surroundContents( highlightDiv ); } else { - alert('Вероятно, у вас IE<9, смотрите реализацию TextRange ниже'); + alert('Вероятно, у вас IE8-, смотрите реализацию TextRange ниже'); } } else { alert('Совпадений не найдено'); @@ -290,7 +290,7 @@ function getSelectionText() { } ``` -Все браузеры, кроме IE<9 поддерживают метод `window.getSelection()`, который возвращает объект, схожий с рассмотренным ранее `Range`. У этого объекта есть точка начала выделения (anchor) и фокусная точка окончания (focus). Точки могут совпадать. Рассмотрим свойства и методы объекта `Selection`: +Все браузеры, кроме IE8- поддерживают метод `window.getSelection()`, который возвращает объект, схожий с рассмотренным ранее `Range`. У этого объекта есть точка начала выделения (anchor) и фокусная точка окончания (focus). Точки могут совпадать. Рассмотрим свойства и методы объекта `Selection`: