diff --git a/1-js/2-first-steps/6-variable-names/article.md b/1-js/2-first-steps/6-variable-names/article.md index ceb5ab74..202a4f03 100644 --- a/1-js/2-first-steps/6-variable-names/article.md +++ b/1-js/2-first-steps/6-variable-names/article.md @@ -95,7 +95,7 @@ var border_left_width; Есть причина и поважнее. Поскольку именно это имя переменной пришло в голову -- скорее всего, оно больше соответствует хранимым там данным, чем то, которое было мы придумали изначально. Исключения бывают, но в любом случае -- такое несовпадение -- это повод задуматься. -Чтобы удобно переименовывать переменную, нужно использовать [хороший редактор JavaScript](/editors), тогда этот процесс будет очень простым и быстрым. +Чтобы удобно переименовывать переменную, нужно использовать [хороший редактор JavaScript](/editor), тогда этот процесс будет очень простым и быстрым. [smart header="Если коротко..."] Смысл имени переменной -- это "имя на коробке", по которому мы сможем максимально быстро находить нужные нам данные. diff --git a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/sieve.gif b/1-js/4-data-structures/7-array/9-eratosthenes-sieve/sieve.gif new file mode 100644 index 00000000..d1960cef Binary files /dev/null and b/1-js/4-data-structures/7-array/9-eratosthenes-sieve/sieve.gif differ diff --git a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/task.md b/1-js/4-data-structures/7-array/9-eratosthenes-sieve/task.md index fe367dc3..73bc70c1 100644 --- a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/task.md +++ b/1-js/4-data-structures/7-array/9-eratosthenes-sieve/task.md @@ -15,7 +15,7 @@
  • Все оставшиеся незачеркнутыми числа -- простые.
    • -Посмотрите также анимацию алгоритма. +Посмотрите также [анимацию алгоритма](sieve.gif). Реализуйте "Решето Эратосфена" в JavaScript, используя массив. diff --git a/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/task.md b/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/task.md index 4fd21cdf..7d8ff96c 100644 --- a/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/task.md +++ b/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/task.md @@ -22,4 +22,4 @@ coffeeMachine.setOnReady(function() { }); ``` -Исходный код возьмите из решения [предыдущей задачи](/task/setter-onReady). \ No newline at end of file +Исходный код возьмите из решения [предыдущей задачи](/task/setter-onready). \ No newline at end of file diff --git a/10-regular-expressions-javascript/10-regexp-backreferences/article.md b/10-regular-expressions-javascript/10-regexp-backreferences/article.md index f2f69286..bb8e3a82 100644 --- a/10-regular-expressions-javascript/10-regexp-backreferences/article.md +++ b/10-regular-expressions-javascript/10-regexp-backreferences/article.md @@ -10,7 +10,7 @@ var name = "Александр Пушкин"; name = name.replace(/([а-яё]+) ([а-яё]+)/i, "$2, $1"); -alert(name); // Пушкин, Александр +alert( name ); // Пушкин, Александр ``` К скобочной группе можно также обратиться в самом шаблоне. @@ -25,7 +25,7 @@ str = "He said:\"She's the one\"." reg = /['"](.*?)['"]/g -alert( str.match(reg) ) // "She' +alert(str.match(reg)) // "She' ``` Как видно, регэксп нашёл открывающую кавычку ", затем текст, вплоть до новой кавычки ', которая закрывает соответствие. @@ -38,7 +38,7 @@ str = "He said:\"She's the one\"." reg = /(['"])(.*?)\1/g -alert( str.match(reg) ) // "She's the one" +alert(str.match(reg)) // "She's the one" ``` Теперь работает верно! diff --git a/10-regular-expressions-javascript/12-regexp-alternation/article.md b/10-regular-expressions-javascript/12-regexp-alternation/article.md index b9a4cb55..adb1adc9 100644 --- a/10-regular-expressions-javascript/12-regexp-alternation/article.md +++ b/10-regular-expressions-javascript/12-regexp-alternation/article.md @@ -14,7 +14,7 @@ var reg = /html|php|css|java(script)?/gi var str = "Сначала появился HTML, затем CSS, потом JavaScript" -alert( str.match(reg) ) // 'HTML', 'CSS', 'JavaScript' +alert(str.match(reg)) // 'HTML', 'CSS', 'JavaScript' ``` **Альтернация имеет очень низкий приоритет.** diff --git a/10-regular-expressions-javascript/13-regexp-ahchors-and-multiline-mode/article.md b/10-regular-expressions-javascript/13-regexp-ahchors-and-multiline-mode/article.md index 736de5d2..3ac236a6 100644 --- a/10-regular-expressions-javascript/13-regexp-ahchors-and-multiline-mode/article.md +++ b/10-regular-expressions-javascript/13-regexp-ahchors-and-multiline-mode/article.md @@ -16,7 +16,7 @@ ```js //+ run var str = '100500 попугаев съели 500100 бананов!'; -alert( str.match( /\d+/ig ) // 100500, 500100 (все числа) +alert(str.match(/\d+/ig) // 100500, 500100 (все числа) ``` А с кареткой: @@ -24,7 +24,7 @@ alert( str.match( /\d+/ig ) // 100500, 500100 (все числа) ```js //+ run var str = '100500 попугаев съели 500100 бананов!'; -alert( str.match( /^\d+/ig ) // 100500 (только в начале строки)*!* +alert(str.match(/^\d+/ig) // 100500 (только в начале строки)*!* ``` Знак доллара $ используют, чтобы указать, что паттерн должен заканчиваться в конце текста. @@ -34,7 +34,7 @@ alert( str.match( /^\d+/ig ) // 100500 (только в начале строк ```js //+ run var str = '100500 попугаев съели 500100 бананов!'; -alert( str.match( /\d+$/ig ) // null (в начале строки чисел нет)*!* +alert(str.match(/\d+$/ig) // null (в начале строки чисел нет)*!* ``` Якоря используют одновременно, чтобы указать, что паттерн должен охватывать текст с начала и до конца. Обычно это требуется при валидации. @@ -46,7 +46,7 @@ alert( str.match( /\d+$/ig ) // null (в начале строки чисел ```js //+ run var num = "ля-ля 12.34"; -alert( num.match( /\d+\.\d+/ig) ); // 12.34 +alert( num.match(/\d+\.\d+/ig) ); // 12.34 ``` Если мы хотим проверить, что `num` *целиком* соответствует паттерну \d+\.\d+, то укажем якоря по обе стороны от него: @@ -54,9 +54,9 @@ alert( num.match( /\d+\.\d+/ig) ); // 12.34 ```js //+ run var num = "ля-ля 12.34"; -alert( num.match( /^\d+\.\d+$/ig) ); // null, не дробь +alert( num.match(/^\d+\.\d+$/ig) ); // null, не дробь var num = "12.34"; -alert( num.match( /^\d+\.\d+$/ig) ); // 12.34, дробь! +alert( num.match(/^\d+\.\d+$/ig) ); // 12.34, дробь! ``` diff --git a/10-regular-expressions-javascript/14-regexp-multiline-mode/article.md b/10-regular-expressions-javascript/14-regexp-multiline-mode/article.md index d2e147e8..1f0e0d19 100644 --- a/10-regular-expressions-javascript/14-regexp-multiline-mode/article.md +++ b/10-regular-expressions-javascript/14-regexp-multiline-mode/article.md @@ -15,7 +15,7 @@ var str = '1е место: Винни-пух\n' + '2е место: Пятачок\n' + '33е место: Слонопотам'; -alert( str.match(/^\d+/gm ) ); // 1, 2, 33*!* +alert( str.match(/^\d+/gm) ); // 1, 2, 33*!* ``` Обратим внимание -- без флага /m было бы только первое число: @@ -26,7 +26,7 @@ var str = '1е место: Винни-пух\n' + '2е место: Пятачок\n' + '33е место: Слонопотам'; -alert( str.match(/^\d+/g ) ); // 1 +alert( str.match(/^\d+/g) ); // 1 ``` Это потому что в обычном режиме каретка ^ -- это только начало текста. diff --git a/10-regular-expressions-javascript/15-regexp-word-boundary/article.md b/10-regular-expressions-javascript/15-regexp-word-boundary/article.md index 09ddc758..50c64d53 100644 --- a/10-regular-expressions-javascript/15-regexp-word-boundary/article.md +++ b/10-regular-expressions-javascript/15-regexp-word-boundary/article.md @@ -6,7 +6,7 @@ For example, \bdog\b matches a standalone dog matches, because the previous char is a space (non-wordly), and the next position is text end. @@ -16,14 +16,14 @@ If the word is long enough, it may match multiple times: ```js //+ run -showMatch( "Boombaroom", /\w{4}/g) // 'Boom', 'baro' +showMatch("Boombaroom", /\w{4}/g) // 'Boom', 'baro' ``` Appending \b causes \w{4}\b to match only at word end: ```js //+ run -showMatch( "Because life is awesome", /\w{4}\b/g) // 'ause', 'life', 'some' +showMatch("Because life is awesome", /\w{4}\b/g) // 'ause', 'life', 'some' ``` **The word boundary \b like ^ and $ doesn't match a char. It only performs the check.** @@ -32,7 +32,7 @@ Let's add the check from another side, \b\w{4}\b: ```js //+ run -showMatch( "Because life is awesome", /\b\w{4}\b/g) // 'life' +showMatch("Because life is awesome", /\b\w{4}\b/g) // 'life' ``` Now there is only one result life. diff --git a/10-regular-expressions-javascript/2-regexp-methods/article.md b/10-regular-expressions-javascript/2-regexp-methods/article.md index d637ea65..a0c4b801 100644 --- a/10-regular-expressions-javascript/2-regexp-methods/article.md +++ b/10-regular-expressions-javascript/2-regexp-methods/article.md @@ -112,7 +112,7 @@ alert( result.index ); // undefined var str = "Ой-йой-йой"; // результат match не всегда массив! -alert( str.match( /лю/gi ).length ) // ошибка! нет свойства length у null +alert(str.match(/лю/gi).length) // ошибка! нет свойства length у null ``` [/warn] @@ -124,7 +124,7 @@ alert( str.match( /лю/gi ).length ) // ошибка! нет свойства l ```js //+ run -alert( '12-34-56'.split('-') ) // [12, 34, 56] +alert('12-34-56'.split('-')) // [12, 34, 56] ``` Можно передать в него и регулярное выражение, тогда он разобьёт строку по всем совпадениям. @@ -133,7 +133,7 @@ alert( '12-34-56'.split('-') ) // [12, 34, 56] ```js //+ run -alert( '12-34-56'.split(/-/) ) // [12, 34, 56] +alert('12-34-56'.split(/-/)) // [12, 34, 56] ``` ## str.replace(reg, str|func) @@ -145,7 +145,7 @@ alert( '12-34-56'.split(/-/) ) // [12, 34, 56] ```js //+ run // заменить дефис на двоеточие -alert( '12-34-56'.replace("-", ":") ) // 12:34-56 +alert('12-34-56'.replace("-", ":")) // 12:34-56 ``` **При вызове со строкой замены `replace` всегда заменяет только первое совпадение.** @@ -198,7 +198,7 @@ alert( '12-34-56'.replace( *!*/-/g*/!*, ":" ) ) // 12:34:56 //+ run var str = "Василий Пупкин"; -alert( str.replace( /(Василий) (Пупкин)/ ,'$2, $1') ) // Пупкин, Василий +alert(str.replace(/(Василий) (Пупкин)/, '$2, $1')) // Пупкин, Василий ``` Ещё пример, с использованием `$&`: @@ -207,7 +207,7 @@ alert( str.replace( /(Василий) (Пупкин)/ ,'$2, $1') ) // Пупки //+ run var str = "Василий Пупкин"; -alert( str.replace( /Василий Пупкин/ ,'Великий $&!') ) // Великий Василий Пупкин! +alert(str.replace(/Василий Пупкин/, 'Великий $&!')) // Великий Василий Пупкин! ``` **Для ситуаций, который требуют максимально "умной" замены, в качестве второго аргумента предусмотрена функция.** @@ -221,9 +221,9 @@ alert( str.replace( /Василий Пупкин/ ,'Великий $&!') ) // В var i = 0; // заменить каждое вхождение "ой" на результат вызова функции -alert( "ОЙ-Ой-ой".replace( /ой/gi, function() { - return ++i; -}) ); // 1-2-3 +alert("ОЙ-Ой-ой".replace(/ой/gi, function() { + return ++i; +})); // 1-2-3 ``` В примере выше функция просто возвращала числа по очереди, но обычно она основывается на поисковых данных. @@ -245,12 +245,12 @@ alert( "ОЙ-Ой-ой".replace( /ой/gi, function() { //+ run // вывести и заменить все совпадения function replacer(str, offset, s) { - alert("Найдено: " + str + " на позиции: " + offset + " в строке: " + s); + alert( "Найдено: " + str + " на позиции: " + offset + " в строке: " + s ); return str.toLowerCase(); -} +} -var result = "ОЙ-Ой-ой".replace( /ой/gi, replacer); -alert('Результат: ' + result); // Результат: ой-ой-ой +var result = "ОЙ-Ой-ой".replace(/ой/gi, replacer); +alert( 'Результат: ' + result ); // Результат: ой-ой-ой ``` С двумя скобочными выражениями -- аргументов уже 5: @@ -260,8 +260,8 @@ alert('Результат: ' + result); // Результат: ой-ой-ой function replacer(str, name, surname, offset, s) { return surname + ", " + name; } - -alert( str.replace( /(Василий) (Пупкин)/ , replacer) ) // Пупкин, Василий + +alert(str.replace(/(Василий) (Пупкин)/, replacer)) // Пупкин, Василий ``` Функция -- это самый мощный инструмент для замены, какой только может быть. Она владеет всей информацией о совпадении и имеет доступ к замыканию, поэтому может всё. @@ -319,14 +319,14 @@ var str = 'Многое по JavaScript можно найти на сайте ht var regexp = /javascript/ig; -alert("Начальное значение lastIndex: " + regexp.lastIndex); +alert( "Начальное значение lastIndex: " + regexp.lastIndex ); -while( result = regexp.exec(str) ) { - alert('Найдено: ' + result[0] + ' на позиции:' + result.index); - alert('Свойство lastIndex: ' + regexp.lastIndex); +while (result = regexp.exec(str)) { + alert( 'Найдено: ' + result[0] + ' на позиции:' + result.index ); + alert( 'Свойство lastIndex: ' + regexp.lastIndex ); } -alert('Конечное значение lastIndex: ' + regexp.lastIndex); +alert( 'Конечное значение lastIndex: ' + regexp.lastIndex ); ``` Здесь цикл продолжается до тех пор, пока `regexp.exec` не вернёт `null`, что означает "совпадений больше нет". diff --git a/10-regular-expressions-javascript/3-regexp-character-classes/article.md b/10-regular-expressions-javascript/3-regexp-character-classes/article.md index 668cfbe5..2a9e449a 100644 --- a/10-regular-expressions-javascript/3-regexp-character-classes/article.md +++ b/10-regular-expressions-javascript/3-regexp-character-classes/article.md @@ -114,21 +114,21 @@ alert( str.replace(/\D/g, "") ); // 79031234567 ```js //+ run -alert( "1 - 5".match (/\d-\d/) ); // null, нет совпадений! +alert( "1 - 5".match(/\d-\d/) ); // null, нет совпадений! ``` Поправим это, добавив в регэксп пробелы: ```js //+ run -alert( "1 - 5".match (/\d - \d/) ); // работает, пробелы вокруг дефиса +alert( "1 - 5".match(/\d - \d/) ); // работает, пробелы вокруг дефиса ``` В регулярные выражения также не надо вставлять лишние пробелы. Все символы имеют значение: ```js //+ run -alert( "1-5".match( /\d - \d/ ) ); // null, так как в строке 1-5 нет пробелов +alert( "1-5".match(/\d - \d/) ); // null, так как в строке 1-5 нет пробелов ``` ## Класс точка @@ -159,7 +159,7 @@ alert( "CS 4".match(re) ); // найдено "CS 4" (пробел тоже си ```js //+ run -alert( "CS4".match (/CS.4/) ); // нет совпадений, так как для точки нет символа +alert( "CS4".match(/CS.4/) ); // нет совпадений, так как для точки нет символа ``` ## Экранирование специальных символов @@ -180,14 +180,14 @@ alert( "CS4".match (/CS.4/) ); // нет совпадений, так как д ```js //+ run -alert( "Глава 5.1".match( /\d\.\d/ ) ); // 5.1 +alert( "Глава 5.1".match(/\d\.\d/) ); // 5.1 ``` Круглые скобки также являются специальными символами, так что для поиска именно скобки нужно использовать `\(`. Пример ниже ищет строку `"g()"`: ```js //+ run -alert( "function g()".match( /g\(\)/ ) ); // "g()" +alert( "function g()".match(/g\(\)/) ); // "g()" ``` Сам символ слэш `'/'`, хотя и не является специальными символом в регулярных выражениях, но открывает-закрывает регэксп в синтаксисе /...pattern.../, поэтому его тоже нужно экранировать. @@ -196,7 +196,7 @@ alert( "function g()".match( /g\(\)/ ) ); // "g()" ```js //+ run -alert( "/".match( /\// ) ); // '/' +alert( "/".match(/\//) ); // '/' ``` Ну и, наконец, если нам нужно найти сам обратный слэш `\`, то его нужно просто задублировать. @@ -205,7 +205,7 @@ alert( "/".match( /\// ) ); // '/' ```js //+ run -alert( "1\2".match( /\\/ ) ); // '\' +alert( "1\2".match(/\\/) ); // '\' ``` ## Итого diff --git a/10-regular-expressions-javascript/5-regexp-character-sets-and-ranges/article.md b/10-regular-expressions-javascript/5-regexp-character-sets-and-ranges/article.md index 2cc997de..00f2481f 100644 --- a/10-regular-expressions-javascript/5-regexp-character-sets-and-ranges/article.md +++ b/10-regular-expressions-javascript/5-regexp-character-sets-and-ranges/article.md @@ -13,7 +13,7 @@ ```js //+ run // найти [г или т], а затем "оп" -alert( "Гоп-стоп".match( /[гт]оп/gi ) ); // "Гоп", "топ" +alert( "Гоп-стоп".match(/[гт]оп/gi) ); // "Гоп", "топ" ``` Обратим внимание: несмотря на то, что в наборе указано несколько символов, в совпадении должен присутствовать *ровно один* из них. @@ -23,7 +23,7 @@ alert( "Гоп-стоп".match( /[гт]оп/gi ) ); // "Гоп", "топ" ```js //+ run // найти "В", затем [у или а], затем "ля" -alert( "Вуаля".match( /В[уа]ля/ ) ); // совпадений нет +alert( "Вуаля".match(/В[уа]ля/) ); // совпадений нет ``` Поиск подразумевает: @@ -69,7 +69,7 @@ alert( "Exception 0xAF".match(/x[0-9A-F][0-9A-F]/g) ); //+ run var str = "The sun is rising!"; -alert( str.match( /\w+/g ) ); // The, sun, is, rising*!* +alert( str.match(/\w+/g) ); // The, sun, is, rising*!* ``` А если есть слова и на русском? @@ -78,7 +78,7 @@ alert( str.match( /\w+/g ) ); // The, sun, is, rising*!* //+ run var str = "Солнце встаёт!"; -alert( str.match( /\w+/g ) ); // null*!* +alert( str.match(/\w+/g) ); // null*!* ``` Ничего не найдено! Это можно понять, ведь \w -- это именно английская букво-цифра, как можно видеть из аналога [a-zA-Z0-9_]. @@ -91,7 +91,7 @@ alert( str.match( /\w+/g ) ); // null*!* //+ run var str = "Солнце (the sun) встаёт!"; -alert( str.match( /[\wа-я]+/gi ) ); // Солнце, the, sun, вста, т*!* +alert( str.match(/[\wа-я]+/gi) ); // Солнце, the, sun, вста, т*!* ``` ...Присмотритесь внимательно к предыдущему примеру! Вы видите странность? Оно не находит букву ё, более того -- считает её разрывом в слове. Причина -- в кодировке юникод, она подробно раскрыта в главе [](/string). @@ -102,7 +102,7 @@ alert( str.match( /[\wа-я]+/gi ) ); // Солнце, the, sun, вста, т*!* //+ run var str = "Солнце (the sun) встаёт!"; -alert( str.match( /[\wа-яё]+/gi ) ); // Солнце, the, sun, встаёт*!* +alert( str.match(/[\wа-яё]+/gi) ); // Солнце, the, sun, встаёт*!* ``` Теперь всё в порядке. @@ -125,7 +125,7 @@ alert( str.match( /[\wа-яё]+/gi ) ); // Солнце, the, sun, встаёт* ```js //+ run -alert( "alice15@gmail.com".match( /[^\d\sA-Z]/gi ) ); // "@", "." +alert( "alice15@gmail.com".match(/[^\d\sA-Z]/gi) ); // "@", "." ``` ## Не нужно экранирование diff --git a/10-regular-expressions-javascript/7-regexp-quantifiers/1-find-text-manydots/solution.md b/10-regular-expressions-javascript/7-regexp-quantifiers/1-find-text-manydots/solution.md index 350fdc0e..4eb72c42 100644 --- a/10-regular-expressions-javascript/7-regexp-quantifiers/1-find-text-manydots/solution.md +++ b/10-regular-expressions-javascript/7-regexp-quantifiers/1-find-text-manydots/solution.md @@ -4,6 +4,6 @@ ```js //+ run var reg = /\.{3,}/g; -alert("Привет!... Как дела?.....".match(reg)); // ..., ..... +alert( "Привет!... Как дела?.....".match(reg) ); // ..., ..... ``` diff --git a/10-regular-expressions-javascript/7-regexp-quantifiers/1-find-text-manydots/task.md b/10-regular-expressions-javascript/7-regexp-quantifiers/1-find-text-manydots/task.md index 750f6c59..414a49b4 100644 --- a/10-regular-expressions-javascript/7-regexp-quantifiers/1-find-text-manydots/task.md +++ b/10-regular-expressions-javascript/7-regexp-quantifiers/1-find-text-manydots/task.md @@ -9,6 +9,6 @@ ```js var reg = /ваше выражение/g; -alert("Привет!... Как дела?.....".match(reg)); // ..., ..... +alert( "Привет!... Как дела?.....".match(reg) ); // ..., ..... ``` diff --git a/10-regular-expressions-javascript/7-regexp-quantifiers/article.md b/10-regular-expressions-javascript/7-regexp-quantifiers/article.md index ac0b6608..38f2ccf8 100644 --- a/10-regular-expressions-javascript/7-regexp-quantifiers/article.md +++ b/10-regular-expressions-javascript/7-regexp-quantifiers/article.md @@ -20,7 +20,7 @@ ```js //+ run -alert( "Мне 12345 лет".match (/\d{5}/) ); // "12345" +alert( "Мне 12345 лет".match(/\d{5}/) ); // "12345" ``` @@ -29,14 +29,14 @@ alert( "Мне 12345 лет".match (/\d{5}/) ); // "12345" ```js //+ run -alert( "Мне не 12, а 1234 года".match( /\d{3,5}/ ) ); // "1234" +alert( "Мне не 12, а 1234 года".match(/\d{3,5}/) ); // "1234" ``` Последнее значение можно и не указывать. Тогда выражение \d{3,} найдет числа, длиной от трех цифр: ```js //+ run -alert( "Мне не 12, а 345678 лет".match( /\d{3,5}/ ) ); // "345678" +alert( "Мне не 12, а 345678 лет".match(/\d{3,5}/) ); // "345678" ``` @@ -47,7 +47,7 @@ alert( "Мне не 12, а 345678 лет".match( /\d{3,5}/ ) ); // "345678" //+ run var str = "+7(903)-123-45-67"; -alert( str.match( /\d{1,}/g ) ); // 7,903,123,45,67 +alert( str.match(/\d{1,}/g) ); // 7,903,123,45,67 ``` @@ -65,7 +65,7 @@ alert( str.match( /\d{1,}/g ) ); // 7,903,123,45,67 //+ run var str = "+7(903)-123-45-67"; -alert( str.match( /\d+/g ) ); // 7,903,123,45,67 +alert( str.match(/\d+/g) ); // 7,903,123,45,67 ``` @@ -80,7 +80,7 @@ alert( str.match( /\d+/g ) ); // 7,903,123,45,67 //+ run var str = "Можно писать color или colour (британский вариант)"; -alert( str.match( /colou?r/g ) ); // color, colour +alert( str.match(/colou?r/g) ); // color, colour ``` @@ -91,14 +91,14 @@ alert( str.match( /colou?r/g ) ); // color, colour ```js //+ run -alert( "100 10 1".match( /\d0*/g ) ); // 100, 10, 1 +alert( "100 10 1".match(/\d0*/g) ); // 100, 10, 1 ``` Сравните это с `'+'` (один или более): ```js //+ run -alert( "100 10 1".match( /\d0+/g ) ); // 100, 10 +alert( "100 10 1".match(/\d0+/g) ); // 100, 10 ``` @@ -115,7 +115,7 @@ alert( "100 10 1".match( /\d0+/g ) ); // 100, 10 В действии: ```js //+ run -alert( "0 1 12.345 7890".match( /\d+\.\d+/g ) ); // 123.45 +alert( "0 1 12.345 7890".match(/\d+\.\d+/g) ); // 123.45 ``` @@ -124,7 +124,7 @@ alert( "0 1 12.345 7890".match( /\d+\.\d+/g ) ); // 123.45 ```js //+ run -alert( " ... ".match ( /<[a-z]+>/gi ) ); // +alert( " ... ".match(/<[a-z]+>/gi) ); // ``` Это регулярное выражение ищет символ '<', за которым идут одна или более букв английского алфавита, и затем '>'. @@ -135,7 +135,7 @@ alert( " ... ".match ( /<[a-z]+>/gi ) ); // ```js //+ run -alert( "

    Привет!

    ".match( /<[a-z][a-z0-9]*>/gi ) ); //

    +alert( "

    Привет!

    ".match(/<[a-z][a-z0-9]*>/gi) ); //

    ``` @@ -144,7 +144,7 @@ alert( "

    Привет!

    ".match( /<[a-z][a-z0-9]*>/gi ) ); //

    ```js //+ run -alert( "

    Привет!

    ".match( /<\/?[a-z][a-z0-9]*>/gi ) ); //

    ,

    +alert( "

    Привет!

    ".match(/<\/?[a-z][a-z0-9]*>/gi) ); //

    ,

    ``` diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/article.md b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/article.md index 483116d9..e8610df7 100644 --- a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/article.md +++ b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/article.md @@ -152,7 +152,7 @@ alert( str.match(reg) ); // witch, broom ```js //+ run -alert( "123 456".match ( /\d+ \d+?/g) ); // 123 4 +alert( "123 456".match(/\d+ \d+?/g) ); // 123 4 ```
      diff --git a/10-regular-expressions-javascript/9-regexp-groups/article.md b/10-regular-expressions-javascript/9-regexp-groups/article.md index dcfd7072..8e8a9685 100644 --- a/10-regular-expressions-javascript/9-regexp-groups/article.md +++ b/10-regular-expressions-javascript/9-regexp-groups/article.md @@ -4,7 +4,7 @@ У такого выделения есть два эффекта:
        -
      1. Он позволяет выделить часть совпадения в отдельный элемент массива при поиске через [:String#match] или [:RegExp#exec].
        2. +
      2. Он позволяет выделить часть совпадения в отдельный элемент массива при поиске через [String#match](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/match) или [RegExp#exec](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec).
      3. Если поставить квантификатор после скобки, то он применится *ко всей скобке*, а не всего лишь к одному символу.
      @@ -13,7 +13,7 @@ ```js //+ run -alert( 'Gogogo now!'.match( /(go)+/i ); // "Gogogo" +alert( 'Gogogo now!'.match(/(go)+/i ); // "Gogogo" ``` Без скобок, шаблон /go+/ означал бы g, после которого идёт одна или более o, например: goooo. @@ -25,17 +25,17 @@ alert( 'Gogogo now!'.match( /(go)+/i ); // "Gogogo" Для удобства заключим его в скобки: <(.*?)>. Тогда содержимое скобок можно будет получить отдельно. -Используем метод [:String#match]. В результирующем массиве будет сначала всё совпадение, а далее -- скобочные группы, в данном случае -- только одна: +Используем метод [String#match](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/match). В результирующем массиве будет сначала всё совпадение, а далее -- скобочные группы, в данном случае -- только одна: ```js //+ run var str = '

      Привет, мир!

      ' -var reg = /<(.*?)>/ +var reg = /<(.*?)>/ -alert( str.match(reg) ) // массив:

      , h1 +alert(str.match(reg)) // массив:

      , h1 ``` -Для поиска всех совпадений, как мы обсуждали ранее, используется метод [:RegExp#exec]. +Для поиска всех совпадений, как мы обсуждали ранее, используется метод [RegExp#exec](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec). **Скобки могут быть и вложенными. В этом случае нумерация также идёт слева направо.** @@ -49,7 +49,7 @@ var str = ''; reg = /<(([a-z])[a-z0-9]*).*?>/; -alert( str.match(reg) ); // , span, s +alert( str.match(reg) ); // , span, s ``` Вот так выглядят скобочные группы: @@ -65,12 +65,12 @@ alert( str.match(reg) ); // , span, s ```js //+ run -match = 'a'.match( /a(z)?(c)?/ ) +match = 'a'.match(/a(z)?(c)?/) -alert(match.length); // 3 -alert(match[0]); // a -alert(match[1]); // undefined -alert(match[2]); // undefined +alert( match.length ); // 3 +alert( match[0] ); // a +alert( match[1] ); // undefined +alert( match[2] ); // undefined ``` Массив получился длины `3`, но все скобочные группы -- `undefined`. @@ -79,12 +79,12 @@ alert(match[2]); // undefined ```js //+ run -match = 'ack'.match( /a(z)?(c)?/ ) +match = 'ack'.match(/a(z)?(c)?/) -alert(match.length); // 3 -alert(match[0]); // ac, всё совпадение -alert(match[1]); // undefined, для (z)? ничего нет -alert(match[2]); // c +alert( match.length ); // 3 +alert( match[0] ); // ac, всё совпадение +alert( match[1] ); // undefined, для (z)? ничего нет +alert( match[2] ); // c ``` Длина массива результатов по-прежнему `3`. Она постоянна. А вот для скобочной группы (z)? в ней ничего нет. diff --git a/10-regular-expressions-javascript/index.md b/10-regular-expressions-javascript/index.md index 6dc875d7..f96e0193 100644 --- a/10-regular-expressions-javascript/index.md +++ b/10-regular-expressions-javascript/index.md @@ -1,5 +1,3 @@ # Регулярные выражения [в работе] -Регулярные выражения -- мощный способ поиска и замены для строк. - -В JavaScript они поддерживаются в простом варианте, менее мощном, чем в большинстве других языков. Но зато нам будет проще их изучить. +Регулярные выражения -- мощный способ поиска и замены для строк. \ No newline at end of file diff --git a/12-extra/10-cookie/article.md b/12-extra/10-cookie/article.md index 3b232a91..3887263f 100644 --- a/12-extra/10-cookie/article.md +++ b/12-extra/10-cookie/article.md @@ -13,11 +13,11 @@ alert( document.cookie ); ``` -Эта строка состоит из пар `ключ=значение`, которые перечисляются через точку с запятой с пробелом `; `. +Эта строка состоит из пар `ключ=значение`, которые перечисляются через точку с запятой с пробелом `"; "`. -Значит, чтобы прочитать cookie, достаточно разбить строку по `; `, и затем найти нужный ключ. Это можно делать либо через `split` и работу с массивом, либо через регулярное выражение. +Значит, чтобы прочитать cookie, достаточно разбить строку по `"; "`, и затем найти нужный ключ. Это можно делать либо через `split` и работу с массивом, либо через регулярное выражение. -### Функция getCookie(name) +## Функция getCookie(name) Следующая функция `getCookie(name)` возвращает cookie с именем `name`: @@ -63,7 +63,7 @@ document.cookie = "userName=Vasya"; ```js // +1 день от текущего момента var date = new Date; -date.setDate( date.getDate() + 1 ); +date.setDate(date.getDate() + 1); alert( date.toUTCString() ); ``` @@ -78,8 +78,8 @@ alert( date.toUTCString() ); ```js //+ run -var date = new Date( new Date().getTime() + 60*1000 ); -document.cookie="name=value; path=/; expires="+date.toUTCString(); +var date = new Date(new Date().getTime() + 60 * 1000); +document.cookie = "name=value; path=/; expires=" + date.toUTCString(); ``` Чтобы удалить это cookie: @@ -87,12 +87,12 @@ document.cookie="name=value; path=/; expires="+date.toUTCString(); ```js //+ run var date = new Date(0); -document.cookie="name=; path=/; expires="+date.toUTCString(); +document.cookie = "name=; path=/; expires=" + date.toUTCString(); ``` При удалении значение не важно. Можно его не указывать, как сделано в коде выше. -### Функция setCookie(name, value, options) +## Функция setCookie(name, value, options) Если собрать все настройки воедино, вот такая функция ставит куки: @@ -104,23 +104,23 @@ function setCookie(name, value, options) { if (typeof expires == "number" && expires) { var d = new Date(); - d.setTime(d.getTime() + expires*1000); + d.setTime(d.getTime() + expires * 1000); expires = options.expires = d; } - if (expires && expires.toUTCString) { - options.expires = expires.toUTCString(); + if (expires && expires.toUTCString) { + options.expires = expires.toUTCString(); } value = encodeURIComponent(value); var updatedCookie = name + "=" + value; - for(var propName in options) { + for (var propName in options) { updatedCookie += "; " + propName; - var propValue = options[propName]; - if (propValue !== true) { + var propValue = options[propName]; + if (propValue !== true) { updatedCookie += "=" + propValue; - } + } } document.cookie = updatedCookie; @@ -137,7 +137,7 @@ function setCookie(name, value, options) {
      expires
      Время истечения cookie. Интерпретируется по-разному, в зависимости от типа:
      • Число -- количество секунд до истечения. Например, `expires: 3600` -- кука на час.
        • -
      • Объект типа [:Date] -- дата истечения.
        • +
      • Объект типа [Date](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Date) -- дата истечения.
      • Если expires в прошлом, то cookie будет удалено.
      • Если expires отсутствует или `0`, то cookie будет установлено как сессионное и исчезнет при закрытии браузера.
      @@ -149,13 +149,15 @@ function setCookie(name, value, options) {
      -### Функция deleteCookie(name) +## Функция deleteCookie(name) Здесь всё просто -- удаляем вызовом `setCookie` с датой в прошлом. ```js function deleteCookie(name) { - setCookie(name, "", { expires: -1 }) + setCookie(name, "", { + expires: -1 + }) } ``` @@ -241,13 +243,13 @@ function deleteCookie(name) { ```js //+ run if (!navigator.cookieEnabled) { - alert('Включите cookie для комфортной работы с этим сайтом'); + alert( 'Включите cookie для комфортной работы с этим сайтом' ); } ``` ...Конечно, предполагается, что включён JavaScript. Впрочем, посетитель без JS и cookie с большой вероятностью не человек, а бот. -## Cookie.js +## Итого -Файл с функциями для работы с cookie: [cookie.js](/files/tutorial/browser/cookie/cookie.js). \ No newline at end of file +Файл с функциями для работы с cookie: [cookie.js](cookie.js). \ No newline at end of file diff --git a/12-extra/11-intl/1-collate-array-sort/solution.md b/12-extra/11-intl/1-collate-array-sort/solution.md index 6d2a2f49..78c1d455 100644 --- a/12-extra/11-intl/1-collate-array-sort/solution.md +++ b/12-extra/11-intl/1-collate-array-sort/solution.md @@ -11,7 +11,7 @@ animals.sort(function(a, b) { }); */!* -alert(animals); // АИСТ,ёж,енот,ехидна,тигр,ЯК +alert( animals ); // АИСТ,ёж,енот,ехидна,тигр,ЯК ``` А вот, что было бы при обычном вызове `sort()`: diff --git a/12-extra/11-intl/1-collate-array-sort/task.md b/12-extra/11-intl/1-collate-array-sort/task.md index b50404b4..c457627a 100644 --- a/12-extra/11-intl/1-collate-array-sort/task.md +++ b/12-extra/11-intl/1-collate-array-sort/task.md @@ -9,7 +9,7 @@ var animals = ["тигр", "ёж", "енот", "ехидна", "АИСТ", "ЯК // ... ваш код ... -alert(animals); // АИСТ,ёж,енот,ехидна,тигр,ЯК +alert( animals ); // АИСТ,ёж,енот,ехидна,тигр,ЯК ``` В этом примере порядок сортировки не должен зависеть от регистра. diff --git a/12-extra/11-intl/article.md b/12-extra/11-intl/article.md index 7b1bd827..062bed07 100644 --- a/12-extra/11-intl/article.md +++ b/12-extra/11-intl/article.md @@ -77,7 +77,7 @@ ```js // создание -var collator = new Intl.Collator([locales, [options] ]) +var collator = new Intl.Collator([locales, [options]]) ``` Параметры: @@ -131,7 +131,9 @@ alert( collator.compare("ёжик", "яблоко") ); // -1 (ёжик мень var collator = new Intl.Collator(); alert( collator.compare("ЁжиК", "ёжик") ); // 1, разные -var collator = new Intl.Collator(undefined, { sensitivity: "accent" } ); +var collator = new Intl.Collator(undefined, { + sensitivity: "accent" +}); alert( collator.compare("ЁжиК", "ёжик") ); // 0, одинаковые ``` @@ -141,7 +143,7 @@ alert( collator.compare("ЁжиК", "ёжик") ); // 0, одинаковые ```js // создание -var formatter = new Intl.DateFormatter([locales, [options] ]) +var formatter = new Intl.DateFormatter([locales, [options]]) ``` Первый аргумент -- такой же, как и в `Collator`, а в объекте `options` мы можем определить, какие именно части даты показывать (часы, месяц, год...) и в каком формате. @@ -281,13 +283,13 @@ alert( formatter.format(date) ); // 12/31/2014 var date = new Date(2014, 11, 31, 12, 30, 0); var formatter = new Intl.DateTimeFormat("ru", { - weekday: "long", - year: "numeric", + weekday: "long", + year: "numeric", month: "long", - day: "numeric" + day: "numeric" }); -alert( formatter.format(date) ); // среда, 31 декабря 2014 г. +alert( formatter.format(date) ); // среда, 31 декабря 2014 г. ``` Только время: @@ -297,12 +299,12 @@ alert( formatter.format(date) ); // среда, 31 декабря 2014 г. var date = new Date(2014, 11, 31, 12, 30, 0); var formatter = new Intl.DateTimeFormat("ru", { - hour: "numeric" , - minute: "numeric" , - second: "numeric" + hour: "numeric", + minute: "numeric", + second: "numeric" }); -alert( formatter.format(date) ); // 12:30:00 +alert( formatter.format(date) ); // 12:30:00 ``` ## Числа: Intl.NumberFormat @@ -312,7 +314,7 @@ alert( formatter.format(date) ); // 12:30:00 Синтаксис: ```js -var formatter = new Intl.NumberFormat([locales [, options] ]); +var formatter = new Intl.NumberFormat([locales[, options]]); formatter.format(number); // форматирование ``` @@ -398,7 +400,7 @@ formatter.format(number); // форматирование ```js //+ run var formatter = new Intl.NumberFormat("ru"); -alert(formatter.format(1234567890.123)); // 1 234 567 890,123 +alert( formatter.format(1234567890.123) ); // 1 234 567 890,123 ``` С ограничением значимых цифр (важны только первые 3): @@ -408,7 +410,7 @@ alert(formatter.format(1234567890.123)); // 1 234 567 890,123 var formatter = new Intl.NumberFormat("ru", { maximumSignificantDigits: 3 }); -alert(formatter.format(1234567890.123)); // 1 230 000 000 +alert( formatter.format(1234567890.123) ); // 1 230 000 000 ``` C опциями для валюты: @@ -419,7 +421,7 @@ var formatter = new Intl.NumberFormat("ru", { currency: "GBP" }); -alert( formatter.format(1234.5)); // 1 234,5 £ +alert( formatter.format(1234.5) ); // 1 234,5 £ ``` С двумя цифрами после запятой: @@ -431,7 +433,7 @@ var formatter = new Intl.NumberFormat("ru", { minimumFractionDigits: 2 }); -alert( formatter.format(1234.5)); // 1 234,50 £ +alert( formatter.format(1234.5) ); // 1 234,50 £ ``` ## Методы в Date, String, Number @@ -454,7 +456,7 @@ alert( str.localeCompare("яблоко", "ru") ); // -1
      Форматирует дату в соответствии с локалью, например: ```js -//+ run +//+ run no-beautify var date = new Date(2014, 11, 31, 12, 00); alert( date.toLocaleString("ru", { year: 'numeric', month: 'long' }) ); // Декабрь 2014 diff --git a/12-extra/12-regexp-specials/article.md b/12-extra/12-regexp-specials/article.md index 9a0ddd00..50303b3c 100644 --- a/12-extra/12-regexp-specials/article.md +++ b/12-extra/12-regexp-specials/article.md @@ -2,7 +2,7 @@ Регулярные выражения в javascript немного странные. Вроде - перловые, обычные, но с подводными камнями, на которые натыкаются даже опытные javascript-разработчики. -Эта статья ставит целью перечислить неожиданные фишки и особенности [:RegExp] в краткой и понятной форме. +Эта статья ставит целью перечислить неожиданные фишки и особенности `RegExp` в краткой и понятной форме. [cut] @@ -18,12 +18,12 @@ //+ run function bbtagit(text) { text = text.replace(/\[u\](.*?)\[\/u\]/gim, '$1') - + return text } var line = "[u]мой\n текст[/u]" -alert( bbtagit(line) ) +alert(bbtagit(line)) ``` Попробуйте запустить. Заменяет? Как бы не так! @@ -38,12 +38,12 @@ alert( bbtagit(line) ) //+ run function bbtagit(text) { text = text.replace(/\[u\]([\s\S]*)\[\/u\]/gim, '$1') - + return text } var line = "[u]мой\n текст[/u]" -alert( bbtagit(line) ) +alert(bbtagit(line)) ``` ## Жадность @@ -103,7 +103,7 @@ alert(text) //+ run text = ' [b]a [u]b[/u] c [/b] ' -var reg = /\[([bus])\](.*?)\[\//*u*/\1/*/u*/\]/ +var reg = /\[([bus])\](.*?)\[\// * u * /\1/ * /u*/\] / text = text.replace(reg, '<$1>$2') alert(text) ``` @@ -120,7 +120,7 @@ P.S. Понятно, что при таком способе поиска bb-т ### Заменить все -Для замены всех вхождений используется метод [:String#replace|]. +Для замены всех вхождений используется метод [String#replace](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/replace). Он интересен тем, что допускает первый аргумент - регэксп или строку. Если первый аргумент - строка, то будет осуществлен поиск подстроки, без преобразования в регулярное выражение. @@ -134,7 +134,7 @@ alert("2 ++ 1".replace("+", "*")) Как видите, заменился только один плюс, а не оба. -**Чтобы заменить все вхождения, [:String#replace|] обязательно нужно использовать с регулярным выражением.** +**Чтобы заменить все вхождения, [String#replace](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/replace) обязательно нужно использовать с регулярным выражением.** В режиме регулярного выражения плюс придётся экранировать, но зато replace заменит все вхождения (при указании флага g): @@ -152,7 +152,7 @@ alert("2 ++ 1".replace(/\+/g, "*")) Следующий пример произведет операции вычитания: ```js -//+ run +//+ run no-beautify var str = "count 36 - 26, 18 - 9" str = str.replace(/(\d+) - (\d+)/g, function(a,b,c) { return b-c }) alert(str) @@ -161,32 +161,32 @@ alert(str) ### Найти всё В javascript нет одного универсального метода для поиска всех совпадений. -Для поиска без запоминания скобочных групп - можно использовать [:String#match|]: +Для поиска без запоминания скобочных групп - можно использовать [String#match](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/match): ```js //+ run var str = "count 36-26, 18-9" -var re = /(\d+)-(\d+)/g +var re = /(\d+)-(\d+)/g result = str.match(re) -for(var i=0; i'g' у регулярного выражения обязателен), но при этом не запоминает скобочные группы. Эдакий "облегченный вариант". ### Найти всё с учётом скобочных групп -В сколько-нибудь сложных задачах важны не только совпадения, но и скобочные группы. Чтобы их найти, предлагается использовать многократный вызов [:RegExp#exec|]. +В сколько-нибудь сложных задачах важны не только совпадения, но и скобочные группы. Чтобы их найти, предлагается использовать многократный вызов [RegExp#exec](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec). Для этого регулярное выражение должно использовать флаг 'g'. Тогда результат поиска, запомненный в свойстве lastIndex объекта RegExp используется как точка отсчета для следующего поиска: ```js //+ run var str = "count 36-26, 18-9" -var re = /(\d+)-(\d+)/g +var re = /(\d+)-(\d+)/g var res -while ( (res = re.exec(str)) != null) { - alert("Найдено " + res[0] + ": ("+ res[1]+") и ("+res[2]+")") - alert("Дальше ищу с позиции "+re.lastIndex) +while ((res = re.exec(str)) != null) { + alert("Найдено " + res[0] + ": (" + res[1] + ") и (" + res[2] + ")") + alert("Дальше ищу с позиции " + re.lastIndex) } ``` diff --git a/12-extra/3-templates/article.md b/12-extra/3-templates/article.md index 1165be14..e69a0253 100644 --- a/12-extra/3-templates/article.md +++ b/12-extra/3-templates/article.md @@ -16,6 +16,7 @@ Пример: ```html +
      <%-title%>
        @@ -129,6 +130,7 @@ alert( compiled() ); //
        Привет
        Шаблон для меню в Handlerbars, к примеру, будет выглядеть так: ```html +
        {{title}}
          @@ -151,7 +153,7 @@ var compiled = Handlebars.compile(tmpl); var result = compiled({ title: "Сладости", - items: [ "Торт", "Пирожное", "Пончик" ] + items: ["Торт", "Пирожное", "Пончик"] }); ``` @@ -228,7 +230,7 @@ ko.applyBindings(user, document.body); Например: ```html - + ``` @@ -99,9 +99,9 @@ function domRangeCreate() { ```js var rng = document.createRange(); // Установит верхнюю граничную точку по левой границе спана #s1 -rng.setStartBefore( document.getElementById('s1') ); +rng.setStartBefore(document.getElementById('s1')); // Установит нижнюю граничную точку по правой границе спана #s2 -rng.setEndAfter( document.getElementById('s2') ); +rng.setEndAfter(document.getElementById('s2')); ``` @@ -129,32 +129,32 @@ rng.setEndAfter( document.getElementById('s2') );
        ``` @@ -177,19 +177,19 @@ function domRangeHighlight(text) { ``` @@ -239,30 +239,30 @@ function ieTextRangeCreate() {
      ``` @@ -281,6 +281,7 @@ function ieTextRangeHighlight(text) { Эту задачу мы уже решали в самом начале статьи в примере с миксом. Теперь рассмотрим код: ```js +//+ no-beautify function getSelectionText() { var txt = ''; if (txt = window.getSelection) // Не IE, используем метод getSelection @@ -342,21 +343,21 @@ IE предоставляет собственный интерфейс взаи ``` @@ -372,7 +373,7 @@ function clearSelection() { try { // современный объект Selection window.getSelection().removeAllRanges(); - } catch(e) { + } catch (e) { // для IE8- document.selection.empty(); } @@ -393,15 +394,15 @@ function clearSelection() { ```js var range = getRangeObject(); - if(range) { - alert(range); - alert(range.startContainer.nodeValue); - alert(range.startOffset); - alert(range.endOffset); + if (range) { + alert( range ); + alert( range.startContainer.nodeValue ); + alert( range.startOffset ); + alert( range.endOffset ); } else { - alert('Ничего не выделено'); + alert( 'Ничего не выделено' ); + } } -} ``` В действии: diff --git a/2-ui/1-document/1-browser-environment/article.md b/2-ui/1-document/1-browser-environment/article.md index 12515f49..c713e303 100644 --- a/2-ui/1-document/1-browser-environment/article.md +++ b/2-ui/1-document/1-browser-environment/article.md @@ -29,7 +29,7 @@ window.open('http://ya.ru'); ```js //+ run document.body.style.background = 'red'; -alert('Элемент BODY стал красным, а сейчас обратно вернётся'); +alert( 'Элемент BODY стал красным, а сейчас обратно вернётся' ); document.body.style.background = ''; ``` @@ -57,7 +57,7 @@ BOM -- это объекты для работы с чем угодно, кро Пример использования: ```js //+ run -alert(location.href); // выведет текущий адрес +alert( location.href ); // выведет текущий адрес ``` Большинство возможностей BOM стандартизированы в [HTML 5](http://www.w3.org/TR/html5/Overview.html), хотя различные браузеры и предоставляют зачастую что-то своё, в дополнение к стандарту. diff --git a/2-ui/1-document/10-compare-document-position/article.md b/2-ui/1-document/10-compare-document-position/article.md index 4e958160..e8374584 100644 --- a/2-ui/1-document/10-compare-document-position/article.md +++ b/2-ui/1-document/10-compare-document-position/article.md @@ -57,21 +57,21 @@ var result = nodeA.compareDocumentPosition(nodeB); ``` @@ -111,13 +111,13 @@ alert( 20..toString(2) ); ``` @@ -139,18 +139,17 @@ if( body.compareDocumentPosition(li) & 16 ) { ```js // код с http://compatibility.shwups-cms.ch/en/polyfills/?&id=82 -(function(){ +(function() { var el = document.documentElement; - if( !el.compareDocumentPosition && el.sourceIndex !== undefined ){ + if (!el.compareDocumentPosition && el.sourceIndex !== undefined) { - Element.prototype.compareDocumentPosition = function(other){ + Element.prototype.compareDocumentPosition = function(other) { return (this != other && this.contains(other) && 16) + - (this != other && other.contains(this) && 8) + - (this.sourceIndex >= 0 && other.sourceIndex >= 0 ? - (this.sourceIndex < other.sourceIndex && 4) + - (this.sourceIndex > other.sourceIndex && 2) - : 1 - ) + 0; + (this != other && other.contains(this) && 8) + + (this.sourceIndex >= 0 && other.sourceIndex >= 0 ? + (this.sourceIndex < other.sourceIndex && 4) + + (this.sourceIndex > other.sourceIndex && 2) : 1 + ) + 0; } } }()); diff --git a/2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.md b/2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.md index 682e2e1a..d591b6b4 100644 --- a/2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.md +++ b/2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.md @@ -4,7 +4,7 @@ ```html
      - hh:mm:ss + hh:mm:ss
      ``` @@ -15,21 +15,21 @@ ```js function update() { var clock = document.getElementById('clock'); - + *!* var date = new Date(); // (*) */!* var hours = date.getHours(); - if (hours < 10) hours = '0'+hours; + if (hours < 10) hours = '0' + hours; clock.children[0].innerHTML = hours; var minutes = date.getMinutes(); - if (minutes < 10) minutes = '0'+minutes; + if (minutes < 10) minutes = '0' + minutes; clock.children[1].innerHTML = minutes; var seconds = date.getSeconds(); - if (seconds < 10) seconds = '0'+seconds; + if (seconds < 10) seconds = '0' + seconds; clock.children[2].innerHTML = seconds; } ``` @@ -41,9 +41,9 @@ function update() { Функция `clockStart` для запуска часов: ```js -function clockStart() { // запустить часы +function clockStart() { // запустить часы setInterval(update, 1000); - update(); // (*) + update(); // (*) } function clockStop() { diff --git a/2-ui/1-document/11-modifying-document/2-remove-polyfill/solution.md b/2-ui/1-document/11-modifying-document/2-remove-polyfill/solution.md index c4330e37..bd99772f 100644 --- a/2-ui/1-document/11-modifying-document/2-remove-polyfill/solution.md +++ b/2-ui/1-document/11-modifying-document/2-remove-polyfill/solution.md @@ -18,6 +18,6 @@ var elem = document.body.children[0]; - elem.remove(); + elem.remove(); ``` \ No newline at end of file diff --git a/2-ui/1-document/11-modifying-document/2-remove-polyfill/task.md b/2-ui/1-document/11-modifying-document/2-remove-polyfill/task.md index a4c72d87..a212fdc0 100644 --- a/2-ui/1-document/11-modifying-document/2-remove-polyfill/task.md +++ b/2-ui/1-document/11-modifying-document/2-remove-polyfill/task.md @@ -16,12 +16,12 @@
      Элементы DOM
      ``` diff --git a/2-ui/1-document/11-modifying-document/3-insert-after/solution.md b/2-ui/1-document/11-modifying-document/3-insert-after/solution.md index 63e6e886..4436bdcb 100644 --- a/2-ui/1-document/11-modifying-document/3-insert-after/solution.md +++ b/2-ui/1-document/11-modifying-document/3-insert-after/solution.md @@ -9,9 +9,9 @@ function insertAfter(elem, refElem) { var parent = refElem.parentNode; var next = refElem.nextSibling; if (next) { - return parent.insertBefore(elem, next); + return parent.insertBefore(elem, next); } else { - return parent.appendChild(elem); + return parent.appendChild(elem); } } ``` @@ -20,7 +20,7 @@ function insertAfter(elem, refElem) { ```js function insertAfter(elem, refElem) { - return refElem.parentNode.insertBefore(elem, refElem.nextSibling); + return refElem.parentNode.insertBefore(elem, refElem.nextSibling); } ``` diff --git a/2-ui/1-document/11-modifying-document/3-insert-after/task.md b/2-ui/1-document/11-modifying-document/3-insert-after/task.md index 30947467..d5fa5329 100644 --- a/2-ui/1-document/11-modifying-document/3-insert-after/task.md +++ b/2-ui/1-document/11-modifying-document/3-insert-after/task.md @@ -20,8 +20,7 @@ insertAfter(elem, body.firstChild); // <--- должно работать // вставить elem за последним элементом - insertAfter(elem, body.lastChild); // <--- должно работать - + insertAfter(elem, body.lastChild); // <--- должно работать ``` diff --git a/2-ui/1-document/11-modifying-document/4-remove-children/solution.md b/2-ui/1-document/11-modifying-document/4-remove-children/solution.md index 9ea9f63d..3ca743c4 100644 --- a/2-ui/1-document/11-modifying-document/4-remove-children/solution.md +++ b/2-ui/1-document/11-modifying-document/4-remove-children/solution.md @@ -4,7 +4,7 @@ ```js function removeChildren(elem) { - for(var k=0; k - ЭтоВсеЭлементы DOM + Это + Все + Элементы DOM diff --git a/2-ui/1-document/11-modifying-document/5-why-aaa/task.md b/2-ui/1-document/11-modifying-document/5-why-aaa/task.md index 47a76ec2..d0d6d4df 100644 --- a/2-ui/1-document/11-modifying-document/5-why-aaa/task.md +++ b/2-ui/1-document/11-modifying-document/5-why-aaa/task.md @@ -9,17 +9,17 @@ aaa - +
      TestTest
      ``` diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/task.md b/2-ui/1-document/11-modifying-document/7-create-object-tree/task.md index ce416085..25eb80be 100644 --- a/2-ui/1-document/11-modifying-document/7-create-object-tree/task.md +++ b/2-ui/1-document/11-modifying-document/7-create-object-tree/task.md @@ -8,19 +8,19 @@ ```js var data = { - "Рыбы":{ - "Форель":{}, - "Щука":{} + "Рыбы": { + "Форель": {}, + "Щука": {} }, - "Деревья":{ - "Хвойные":{ - "Лиственница":{}, - "Ель":{} + "Деревья": { + "Хвойные": { + "Лиственница": {}, + "Ель": {} }, - "Цветковые":{ - "Берёза":{}, - "Тополь":{} + "Цветковые": { + "Берёза": {}, + "Тополь": {} } } }; diff --git a/2-ui/1-document/11-modifying-document/article.md b/2-ui/1-document/11-modifying-document/article.md index 8c891639..9fe5ea49 100644 --- a/2-ui/1-document/11-modifying-document/article.md +++ b/2-ui/1-document/11-modifying-document/article.md @@ -78,12 +78,10 @@ div.innerHTML = "Ура! Вы прочитали это важ

    ``` @@ -101,7 +99,6 @@ div.innerHTML = "Ура! Вы прочитали это важ
  • 2
    • ``` Обратите внимание на последнюю строку, которая вставляет `div2` после `div`: ```js -div.parentNode.insertBefore( div2, div.nextSibling ); +div.parentNode.insertBefore(div2, div.nextSibling); ```
      @@ -284,6 +283,7 @@ div.parentNode.insertBefore( div2, div.nextSibling ); ```html +

      Сообщение пропадёт через секунду

      @@ -321,12 +321,12 @@ div.parentNode.insertBefore( div2, div.nextSibling ); var div = document.createElement('div'); div.className = "alert alert-success"; document.body.appendChild(div); - + *!* var text = prompt("Введите текст для сообщения", "Жили были и !"); // вставится именно как текст, без HTML-обработки - div.appendChild( document.createTextNode(text) ); + div.appendChild(document.createTextNode(text)); */!* ``` diff --git a/2-ui/1-document/12-multi-insert/article.md b/2-ui/1-document/12-multi-insert/article.md index 53acc250..74e54233 100644 --- a/2-ui/1-document/12-multi-insert/article.md +++ b/2-ui/1-document/12-multi-insert/article.md @@ -14,13 +14,14 @@ ```js var ul = document.createElement('ul'); document.body.appendChild(ul); // сначала в документ -for(...) ul.appendChild(li); // потом узлы +for (...) ul.appendChild(li); // потом узлы ```
    1. Полностью создать список "вне DOM", а потом -- вставить в документ: ```js +//+ no-beautify var ul = document.createElement('ul'); for(...) ul.appendChild(li); // сначала вставить узлы document.body.appendChild(ul); // затем в документ @@ -115,14 +116,14 @@ elem.insertAdjacentHTML(where, html); ``` -Единственный недостаток этого метода -- он не работает в Firefox до версии 8. Но его можно легко добавить, используя [полифилл insertAdjacentHTML для Firefox](insertAdjacentHTML.js). +Единственный недостаток этого метода -- он не работает в Firefox до версии 8. Но его можно легко добавить, используя [полифилл insertAdjacentHTML для Firefox](insertAdjacentFF.js). У этого метода есть "близнецы-братья", которые поддерживаются везде, кроме Firefox, но в него они добавляются тем же полифиллом: @@ -181,7 +182,7 @@ for (цикл по li) { fragment.appendChild(list[i]); // вставить каждый LI в DocumentFragment } -ul.appendChild(fragment); // вместо фрагмента вставятся элементы списка +ul.appendChild(fragment); // вместо фрагмента вставятся элементы списка ``` В современных браузерах эффект от такой оптимизации может быть различным, а на небольших документах иногда и отрицательным. @@ -211,28 +212,30 @@ ul.appendChild(fragment); // вместо фрагмента вставятс ```html + - + // добавить элемент после

      + p.after(document.createElement('hr')) + + ``` diff --git a/2-ui/1-document/13-document-write/article.md b/2-ui/1-document/13-document-write/article.md index 4fe6b849..49f2e34e 100644 --- a/2-ui/1-document/13-document-write/article.md +++ b/2-ui/1-document/13-document-write/article.md @@ -13,11 +13,11 @@ HTML-документ ниже будет содержать `1 2 3`. ```html -1 - -3 + 1 + + 3 ``` @@ -29,14 +29,18 @@ HTML-документ ниже будет содержать `1 2 3`. ```html - + - + Текст внутри TD. - +
      ``` @@ -93,7 +97,7 @@ HTML-документ ниже будет содержать `1 2 3`. var url = 'http://ads.com/buyme?screen=' + screen.width + "x" + screen.height; // загрузить такой скрипт прямо сейчас - document.write(' ``` @@ -103,7 +107,7 @@ HTML-документ ниже будет содержать `1 2 3`. Также используют запись: ```js -document.write('`: обратный слеш `\` обычно используется для вставки спецсимволов типа `\n`, а если такого спецсимвола нет, в данном случае `\/` не является спецсимволом, то будет проигнорирован. Так что получается такой альтернативный способ безопасно вставить строку ``. diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/task.md b/2-ui/1-document/14-styles-and-classes/2-create-notification/task.md index aab40b32..bc89ddcc 100644 --- a/2-ui/1-document/14-styles-and-classes/2-create-notification/task.md +++ b/2-ui/1-document/14-styles-and-classes/2-create-notification/task.md @@ -16,7 +16,7 @@ * @param options.className {string} CSS-класс * @param options.html {string} HTML-текст для показа */ -function showNotification(options) { +function showNotification(options) { // ваш код } ``` diff --git a/2-ui/1-document/14-styles-and-classes/article.md b/2-ui/1-document/14-styles-and-classes/article.md index 5659f895..fb7ce900 100644 --- a/2-ui/1-document/14-styles-and-classes/article.md +++ b/2-ui/1-document/14-styles-and-classes/article.md @@ -21,6 +21,7 @@ **Для свойств, названия которых состоят из нескольких слов, используется вотТакаяЗапись:** ```js +//+ no-beautify background-color => elem.style.backgroundColor z-index => elem.style.zIndex border-left-width => elem.style.borderLeftWidth @@ -73,15 +74,15 @@ setTimeout(function() { ```html - @@ -146,7 +147,7 @@ setTimeout(function() { Вот так `style` уже ничего не увидит: ```html - + @@ -190,14 +191,17 @@ getComputedStyle(element[, pseudo]) ```html + - @@ -264,10 +268,13 @@ function getStyle(elem) { ```html + - ``` diff --git a/2-ui/1-document/15-metrics/2-scrollbar-width/solution.md b/2-ui/1-document/15-metrics/2-scrollbar-width/solution.md index 4dda1121..9f376da1 100644 --- a/2-ui/1-document/15-metrics/2-scrollbar-width/solution.md +++ b/2-ui/1-document/15-metrics/2-scrollbar-width/solution.md @@ -4,9 +4,9 @@ //+ run // создадим элемент с прокруткой var div = document.createElement('div'); - + div.style.overflowY = 'scroll'; -div.style.width = '50px'; +div.style.width = '50px'; div.style.height = '50px'; // при display:none размеры нельзя узнать diff --git a/2-ui/1-document/15-metrics/3-div-placeholder/solution.md b/2-ui/1-document/15-metrics/3-div-placeholder/solution.md index 13b7d7e5..dd09226b 100644 --- a/2-ui/1-document/15-metrics/3-div-placeholder/solution.md +++ b/2-ui/1-document/15-metrics/3-div-placeholder/solution.md @@ -20,9 +20,9 @@ placeHolder.style.height = div.offsetHeight + 'px'; // можно и width, но в этом примере это не обязательно // IE || другой браузер -var computedStyle = div.currentStyle || getComputedStyle(div, ''); +var computedStyle = div.currentStyle || getComputedStyle(div, ''); -placeHolder.style.marginTop = computedStyle.marginTop; // (1) +placeHolder.style.marginTop = computedStyle.marginTop; // (1) placeHolder.style.marginBottom = computedStyle.marginBottom; ``` diff --git a/2-ui/1-document/15-metrics/3-div-placeholder/task.md b/2-ui/1-document/15-metrics/3-div-placeholder/task.md index 130cdb84..3fa0528f 100644 --- a/2-ui/1-document/15-metrics/3-div-placeholder/task.md +++ b/2-ui/1-document/15-metrics/3-div-placeholder/task.md @@ -5,7 +5,7 @@ Посмотрим следующий случай из жизни. Был текст, который, в частности, содержал `div` с зелеными границами: ```html - +       список

      ``` 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 faf8d359..5654e451 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 @@ -19,22 +19,22 @@ ```js //+ run -document.body.myData = { +document.body.myData = { name: 'Петр', familyName: 'Петрович' }; -alert(document.body.myData.name); // Петр +alert( document.body.myData.name ); // Петр ``` Можно добавить и новую функцию: ```js //+ run -document.body.sayHi = function() { - alert(this.nodeName); +document.body.sayHi = function() { + alert( this.nodeName ); } - + document.body.sayHi(); // BODY, выполнилась с правильным this ``` @@ -91,13 +91,13 @@ document.body.sayHi(); // BODY, выполнилась с правильным t @@ -162,7 +162,7 @@ document.body.sayHi(); // BODY, выполнилась с правильным t // работа с checked через атрибут */!* alert( input.getAttribute('checked') ); // пустая строка - input.removeAttribute('checked'); // снять галочку + input.removeAttribute('checked'); // снять галочку *!* // работа с checked через свойство @@ -189,7 +189,7 @@ document.body.sayHi(); // BODY, выполнилась с правильным t *!* input.value = 'new'; // поменяли свойство - alert(input.getAttribute('value')); // 'markup', не изменилось! + alert( input.getAttribute('value') ); // 'markup', не изменилось! */!* @@ -232,10 +232,10 @@ document.body.sayHi(); // BODY, выполнилась с правильным t ``` @@ -269,16 +269,16 @@ document.body.sayHi(); // BODY, выполнилась с правильным t ``` @@ -331,9 +331,11 @@ document.body.sayHi(); // BODY, выполнилась с правильным t .order[order-state="new"] { color: green; } + .order[order-state="pending"] { color: blue; } + .order[order-state="canceled"] { color: red; } @@ -364,7 +366,7 @@ div.setAttribute('order-state', 'canceled'); Для классов -- нужно знать, какой класс у заказа сейчас. И тогда мы можем снять старый класс, и поставить новый: ```js -div.classList.remove('order-state-new'); +div.classList.remove('order-state-new'); div.classList.add('order-state-canceled'); ``` @@ -417,7 +419,7 @@ div.classList.add('order-state-canceled'); Этот атрибут должен прятать элемент, действие весьма простое, для его поддержки в HTML достаточно такого CSS: ```html - +
      FORM -
      DIV -

      P

      -
      +
      DIV +

      P

      +
      ``` @@ -166,7 +169,7 @@ JS-код здесь такой: var elems = document.querySelectorAll('form,div,p'); // на каждый элемент повесить обработчик на стадии перехвата -for(var i=0; iКросс-браузерно остановить всплытие можно так: ```js +//+ no-beautify event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true); ``` diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css index f6e6a0e0..469b5769 100755 --- a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css +++ b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css @@ -26,7 +26,7 @@ p { position: absolute; font-size: 110%; top: 0; - color: red; + color: darkred; right: 10px; display: block; width: 24px; diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css index 0379abe8..6588f729 100755 --- a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css +++ b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css @@ -22,7 +22,7 @@ p { .remove-button { font-size: 110%; - color: red; + color: darkred; right: 10px; width: 24px; height: 24px; diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md index dd6daa3d..2dd5aae6 100644 --- a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md +++ b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md @@ -11,18 +11,20 @@ ```html
        -
      • Млекопетающие -
          -
        • Коровы
          • -
        • Ослы
          • -
        • Собаки
          • -
        • Тигры
          • -
        -
        • +
      • Млекопетающие +
          +
        • Коровы
          • +
        • Ослы
          • +
        • Собаки
          • +
        • Тигры
          • +
        +
      ``` @@ -41,9 +43,9 @@ var treeUl = document.getElementsByTagName('ul')[0]; var treeLis = treeUl.getElementsByTagName('li'); -for(var i=0; i
        -
      • Млекопетающие -
          -
        • Коровы
          • -
        • Ослы
          • -
        • Собаки
          • -
        • Тигры
          • -
        -
        • +
      • Млекопетающие +
          +
        • Коровы
          • +
        • Ослы
          • +
        • Собаки
          • +
        • Тигры
          • +
        +
      ``` @@ -88,10 +92,10 @@ var tree = document.getElementsByTagName('ul')[0]; tree.onclick = function(event) { var target = event.target; - if (target.tagName != 'SPAN') { + if (target.tagName != 'SPAN') { return; // клик был не на заголовке } - + var li = target.parentNode; // получить родительский LI // получить UL с потомками -- это первый UL внутри LI diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/article.md b/2-ui/2-events-and-interfaces/5-event-delegation/article.md index 370fd03c..ef3c45fc 100644 --- a/2-ui/2-events-and-interfaces/5-event-delegation/article.md +++ b/2-ui/2-events-and-interfaces/5-event-delegation/article.md @@ -19,9 +19,9 @@ Bagua Chart: Direction, Element, Color, Meaning - ...Northwest... - ... - ... + ...Northwest... + ... + ... ...еще 2 строки такого же вида... ...еще 2 строки такого же вида... @@ -44,7 +44,7 @@ var selectedTd; *!* table.onclick = function(event) { var target = event.target; // где был клик? - + if (target.tagName != 'TD') return; // не на TD? тогда не интересует highlight(target); // подсветить TD @@ -94,13 +94,13 @@ function highlight(node) { ```js table.onclick = function(event) { var target = event.target; - + // цикл двигается вверх от target к родителям до table - while(target != table) { + while (target != table) { if (target.tagName == 'TD') { - // нашли элемент, который нас интересует! - highlight(target); - return; + // нашли элемент, который нас интересует! + highlight(target); + return; } target = target.parentNode; } @@ -115,7 +115,7 @@ table.onclick = function(event) { Кстати, в проверке `while` можно бы было использовать `this` вместо `table`: ```js -while(target != this) { +while (target != this) { // ... } ``` @@ -128,13 +128,13 @@ while(target != this) { ```js table.onclick = function(event) { var target = event.target; - + var td = event.target.closest('td'); if (!td) return; // клик вне , не интересует // если клик на td, но вне этой таблицы (возможно при вложенных таблицах) // то не интересует - if (!table.contains(td)) return; + if (!table.contains(td)) return; // нашли элемент, который нас интересует! highlight(td); @@ -172,25 +172,31 @@ table.onclick = function(event) { ``` diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/solution.md b/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/solution.md index fcfccc4a..27e91612 100644 --- a/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/solution.md +++ b/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/solution.md @@ -4,7 +4,7 @@ ```js function(event) { - handler() // тело взято из атрибута onclick + handler() // тело взято из атрибута onclick } ``` diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/task.md b/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/task.md index a7a13551..a2ef7979 100644 --- a/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/task.md +++ b/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/task.md @@ -8,7 +8,7 @@ diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.md b/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.md index b653e648..a10433d7 100644 --- a/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.md +++ b/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.md @@ -8,12 +8,12 @@ contents.onclick = function(evt) { var target = evt.target; - function handleLink(href) { - var isLeaving = confirm('Уйти на '+href+'?'); + function handleLink(href) { + var isLeaving = confirm('Уйти на ' + href + '?'); if (!isLeaving) return false; } - - while(target != this) { + + while (target != this) { if (target.nodeName == 'A') { *!* return handleLink(target.getAttribute('href')); // (*) diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.md b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.md index 728e9af9..40f8e09c 100644 --- a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.md +++ b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.md @@ -10,7 +10,7 @@ var largeImg = document.getElementById('largeImg'); document.getElementById('thumbs').onclick = function(e) { var target = e.target; - while(target != this) { + while (target != this) { if (target.nodeName == 'A') { showThumbnail(target.href, target.title); @@ -34,11 +34,11 @@ function showThumbnail(href, title) { ```js var imgs = thumbs.getElementsByTagName('img'); -for(var i=0; i + Нажми здесь или здесь @@ -68,7 +68,7 @@ menu.onclick = function(event) { if (event.target.nodeName != 'A') return; var href = event.target.getAttribute('href'); - alert(href); // может быть подгрузка с сервера, генерация интерфейса и т.п. + alert( href ); // может быть подгрузка с сервера, генерация интерфейса и т.п. *!* return false; // отменить переход по url @@ -127,7 +127,7 @@ menu.onclick = function(event) { element.onclick = function(event) { event = event || window.event; - if (event.preventDefault) { // если метод существует + if (event.preventDefault) { // если метод существует event.preventDefault(); // то вызвать его } else { // иначе вариант IE8-: event.returnValue = false; @@ -138,6 +138,7 @@ element.onclick = function(event) { Можно записать в одну строку: ```js +//+ no-beautify ... event.preventDefault ? event.preventDefault() : (event.returnValue=false); ... diff --git a/2-ui/2-events-and-interfaces/8-dispatch-events/article.md b/2-ui/2-events-and-interfaces/8-dispatch-events/article.md index 9a34c5be..f9b8c5ce 100644 --- a/2-ui/2-events-and-interfaces/8-dispatch-events/article.md +++ b/2-ui/2-events-and-interfaces/8-dispatch-events/article.md @@ -37,7 +37,7 @@ var event = new Event(тип события[, флаги]); При просмотре примера ниже кнопка обработчик `onclick` на кнопке сработает сам по себе, событие генерируется скриптом: ```html - + ``` @@ -318,22 +323,22 @@ event.initEvent("click", true, true); Выглядят они немного страшновато, например (взято из [спецификации](http://www.w3.org/TR/DOM-Level-3-Events/#idl-interface-MouseEvent-initializers)): ```js -void initMouseEvent ( - DOMString typeArg, // тип - boolean bubblesArg, // всплывает? - boolean cancelableArg, // можно отменить? - AbstractView? viewArg, // объект window, null означает текущее окно - long detailArg, // свойство detail и другие... - long screenXArg, - long screenYArg, - long clientXArg, - long clientYArg, - boolean ctrlKeyArg, - boolean altKeyArg, - boolean shiftKeyArg, - boolean metaKeyArg, - unsigned short buttonArg, - EventTarget? relatedTargetArg); +void initMouseEvent( + DOMString typeArg, // тип + boolean bubblesArg, // всплывает? + boolean cancelableArg, // можно отменить? + AbstractView ? viewArg, // объект window, null означает текущее окно + long detailArg, // свойство detail и другие... + long screenXArg, + long screenYArg, + long clientXArg, + long clientYArg, + boolean ctrlKeyArg, + boolean altKeyArg, + boolean shiftKeyArg, + boolean metaKeyArg, + unsigned short buttonArg, + EventTarget ? relatedTargetArg); }; ``` @@ -345,7 +350,7 @@ void initMouseEvent ( ``` diff --git a/2-ui/3-event-details/1-mouse-clicks/article.md b/2-ui/3-event-details/1-mouse-clicks/article.md index af3f0dbc..1478db2c 100644 --- a/2-ui/3-event-details/1-mouse-clicks/article.md +++ b/2-ui/3-event-details/1-mouse-clicks/article.md @@ -77,7 +77,7 @@ Это событие срабатывает при клике правой кнопкой мыши: ```html - +
      Правый клик на этой кнопке выведет "Клик".
      ``` @@ -89,7 +89,7 @@ В примере ниже встроенное меню показано не будет: ```html - + ``` @@ -116,7 +116,7 @@ *!* if (!e.altKey || !e.shiftKey) return; */!* - alert('Ура!'); + alert( 'Ура!' ); } ``` @@ -230,7 +230,7 @@ ```js function fixWhich(e) { if (!e.which && e.button) { // если which нет, но есть button... (IE8-) - if (e.button & 1) e.which = 1; // левая кнопка + if (e.button & 1) e.which = 1; // левая кнопка else if (e.button & 4) e.which = 2; // средняя кнопка else if (e.button & 2) e.which = 3; // правая кнопка } @@ -247,13 +247,13 @@ function fixWhich(e) { ```js function fixPageXY(e) { - if (e.pageX == null && e.clientX != null ) { // если нет pageX.. + if (e.pageX == null && e.clientX != null) { // если нет pageX.. var html = document.documentElement; var body = document.body; e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0); e.pageX -= html.clientLeft || 0; - + e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0); e.pageY -= html.clientTop || 0; } diff --git a/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md b/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md index 219db890..ec5bb970 100644 --- a/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md +++ b/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md @@ -33,14 +33,14 @@ document.addEventListener("DOMContentLoaded", ready); + ``` @@ -69,7 +69,7 @@ document.addEventListener("DOMContentLoaded", ready); ```html - ``` @@ -99,7 +99,7 @@ Firefox/Chrome/Opera автозаполняют формы по `DOMContentLoade @@ -144,9 +144,9 @@ Firefox игнорирует текст, а всегда показывает с ```html ... - + ``` @@ -166,7 +166,7 @@ Firefox игнорирует текст, а всегда показывает с diff --git a/2-ui/3-event-details/11-onload-onerror/3-script-callback/task.md b/2-ui/3-event-details/11-onload-onerror/3-script-callback/task.md index 5e984aab..e20c2320 100644 --- a/2-ui/3-event-details/11-onload-onerror/3-script-callback/task.md +++ b/2-ui/3-event-details/11-onload-onerror/3-script-callback/task.md @@ -11,7 +11,7 @@ ```js // go.js содержит функцию go() addScript("go.js", function() { - go(); + go(); }); ``` diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/task.md b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/task.md index de6c4e6c..f286dfc2 100644 --- a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/task.md +++ b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/task.md @@ -9,6 +9,7 @@ Пример использования: ```js +//+ no-beautify addScripts(["a.js", "b.js", "c.js"], function() { a() }); /* функция a() описана в a.js и использует b.js,c.js */ ``` diff --git a/2-ui/3-event-details/11-onload-onerror/article.md b/2-ui/3-event-details/11-onload-onerror/article.md index 0836272d..03b4bb41 100644 --- a/2-ui/3-event-details/11-onload-onerror/article.md +++ b/2-ui/3-event-details/11-onload-onerror/article.md @@ -39,9 +39,9 @@ document.body.appendChild(script); *!* script.onload = function() { - // после выполнения скрипта становится доступна функция _ - alert(_); // её код -} + // после выполнения скрипта становится доступна функция _ + alert( _ ); // её код + } */!* ``` @@ -65,7 +65,7 @@ document.body.appendChild(script); *!* script.onerror = function() { - alert("Ошибка: " + this.src); + alert( "Ошибка: " + this.src ); }; */!* ``` @@ -89,7 +89,7 @@ script.onerror = function() { Например, рабочий скрипт: ```js -//+ run +//+ run no-beautify var script = document.createElement('script'); script.src = "https://code.jquery.com/jquery.js"; document.documentElement.appendChild(script); @@ -104,7 +104,7 @@ script.onreadystatechange = function() { Скрипт с ошибкой: ```js -//+ run +//+ run no-beautify var script = document.createElement('script'); script.src = "http://ajax.googleapis.com/404.js"; document.documentElement.appendChild(script); @@ -132,7 +132,7 @@ script.onreadystatechange = function() { Пример ниже вызывает `afterLoad` после загрузки скрипта и работает только в IE: ```js -//+ run +//+ run no-beautify var script = document.createElement('script'); script.src = "https://code.jquery.com/jquery.js"; document.documentElement.appendChild(script); @@ -176,7 +176,7 @@ script.src = "https://code.jquery.com/jquery.js"; document.documentElement.appendChild(script); function afterLoad() { - alert("Загрузка завершена: " + typeof(jQuery)); + alert( "Загрузка завершена: " + typeof(jQuery) ); } script.onload = script.onerror = function() { @@ -189,7 +189,9 @@ script.onload = script.onerror = function() { script.onreadystatechange = function() { var self = this; if (this.readyState == "complete" || this.readyState == "loaded") { - setTimeout(function() { self.onload() }, 0);// сохранить "this" для onload + setTimeout(function() { + self.onload() + }, 0); // сохранить "this" для onload } }; ``` @@ -221,6 +223,7 @@ script.onreadystatechange = function() {
      Ставим обработчики на `onload` + `onerror` ```js +//+ no-beautify var img = document.createElement('img'); img.onload = function() { alert("Успех "+this.src }; img.onerror = function() { alert("Ошибка "+this.src }; diff --git a/2-ui/3-event-details/2-unselectable/article.md b/2-ui/3-event-details/2-unselectable/article.md index f037c744..66133de3 100644 --- a/2-ui/3-event-details/2-unselectable/article.md +++ b/2-ui/3-event-details/2-unselectable/article.md @@ -98,11 +98,15 @@ ```html Строка до.. @@ -151,7 +155,7 @@ b {
    2. Отмена действий на `mousedown` и `selectstart`: ```js -elem.onmousedown = elem.onselectstart = function() { +elem.onmousedown = elem.onselectstart = function() { return false; }; ``` @@ -171,7 +175,7 @@ elem.onmousedown = elem.onselectstart = function() { Если уж хочется запретить копирование -- можно использовать событие `oncopy`: ```html - +
      Уважаемый копирователь, почему-то автор хочет заставить вас покопаться в исходном коде этой страницы. diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md index 3bb9a2d8..426d4d7d 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md @@ -24,7 +24,7 @@ tooltip.innerHTML = "Подсказка"; // при "наведении на элемент" показать подсказку new HoverIntent({ - elem: elem, + elem: elem, over: function() { tooltip.style.left = this.getBoundingClientRect().left + 'px'; tooltip.style.top = this.getBoundingClientRect().bottom + 5 + 'px'; diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md index 3dce9eb5..f28d33df 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md @@ -161,12 +161,12 @@ ```js table.onmouseover = function(event) { - var target = event.target; + var target = event.target; target.style.background = 'pink'; }; table.onmouseout = function(event) { - var target = event.target; + var target = event.target; target.style.background = ''; }; ``` diff --git a/2-ui/3-event-details/4-drag-and-drop/article.md b/2-ui/3-event-details/4-drag-and-drop/article.md index 80d22846..60316bcb 100644 --- a/2-ui/3-event-details/4-drag-and-drop/article.md +++ b/2-ui/3-event-details/4-drag-and-drop/article.md @@ -38,19 +38,19 @@ ball.onmousedown = function(e) { // 1. отследить нажатие*!* // подготовить к перемещению // 2. разместить на том же месте, но в абсолютных координатах*!* - ball.style.position = 'absolute'; + ball.style.position = 'absolute'; moveAt(e); // переместим в body, чтобы мяч был точно не внутри position:relative - document.body.appendChild(ball); + document.body.appendChild(ball); ball.style.zIndex = 1000; // показывать мяч над другими элементами - + // передвинуть мяч под координаты курсора // и сдвинуть на половину ширины/высоты для центрирования function moveAt(e) { - ball.style.left = e.pageX - ball.offsetWidth/2 + 'px'; - ball.style.top = e.pageY - ball.offsetHeight/2 + 'px'; - } + ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px'; + ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px'; + } // 3, перемещать по экрану*!* document.onmousemove = function(e) { @@ -78,8 +78,8 @@ ball.onmousedown = function(e) { // 1. отследить нажатие*!* Его нужно отключить: ```js -ball.ondragstart = function() { - return false; +ball.ondragstart = function() { + return false; }; ``` @@ -106,8 +106,8 @@ ball.ondragstart = function() { В примерах выше мяч позиционируется в центре под курсором мыши: ```js -self.style.left = e.pageX - ball.offsetWidth/2 + 'px'; -self.style.top = e.pageY - ball.offsetHeight/2 + 'px'; +self.style.left = e.pageX - ball.offsetWidth / 2 + 'px'; +self.style.top = e.pageY - ball.offsetHeight / 2 + 'px'; ``` Если поставить `left/top` ровно в `pageX/pageY`, то мячик прилипнет верхним-левым углом к курсору мыши. Будет некрасиво. Поэтому мы сдвигаем его на половину высоты/ширины, чтобы был центром под мышью. Уже лучше. diff --git a/2-ui/3-event-details/5-drag-and-drop-objects/article.md b/2-ui/3-event-details/5-drag-and-drop-objects/article.md index e4c236d4..3653dc8e 100644 --- a/2-ui/3-event-details/5-drag-and-drop-objects/article.md +++ b/2-ui/3-event-details/5-drag-and-drop-objects/article.md @@ -60,7 +60,7 @@ Код обработчика `mousedown`: ```js -var dragObject = {}; +var dragObject = {}; document.onmousedown = function(e) { @@ -103,8 +103,8 @@ document.onmousedown = function(e) { document.onmousemove = function(e) { if (!dragObject.elem) return; // элемент не зажат - if ( !dragObject.avatar ) { // элемент нажат, но пока не начали его двигать - ... начать перенос, присвоить dragObject.avatar = переносимый элемент + if (!dragObject.avatar) { // элемент нажат, но пока не начали его двигать + ...начать перенос, присвоить dragObject.avatar = переносимый элемент } ...отобразить перенос элемента... @@ -131,7 +131,7 @@ document.onmousemove = function(e) { ```js // в начале переноса: -if (avatar.parentNode != document.body) { +if (avatar.parentNode != document.body) { document.body.appendChild(avatar); // переместить в BODY, если надо } avatar.style.zIndex = 9999; // сделать, чтобы элемент был над другими @@ -356,6 +356,7 @@ function findDroppable(event) { Для его создания используем не обычный синтаксис `{...}`, а вызов `new function`. Это позволит прямо при создании объявить дополнительные переменные и функции в замыкании, которыми могут пользоваться методы объекта, а также назначить обработчики: ```js +//+ no-beautify var DragManager = new function() { var dragObject = {}; @@ -400,6 +401,7 @@ var DragManager = new function() { С использованием `DragManager` пример, с которого начиналась эта глава -- перенос иконок браузеров в компьютер, реализуется совсем просто: ```js +//+ no-beautify DragManager.onDragEnd = function(dragObject, dropElem) { // скрыть/удалить переносимый объект diff --git a/2-ui/3-event-details/6-mousewheel/article.md b/2-ui/3-event-details/6-mousewheel/article.md index ca3c4331..dbd5cff2 100644 --- a/2-ui/3-event-details/6-mousewheel/article.md +++ b/2-ui/3-event-details/6-mousewheel/article.md @@ -9,7 +9,7 @@ Несмотря на то, что колёсико мыши обычно ассоциируется с прокруткой, это совсем разные вещи.
        -
      • При прокрутке срабатывает событие [onscroll](/event-onscroll) -- рассмотрим его в дальнейшем. Оно произойдёт *при любой прокрутке*, в том числе через клавиатурy, но *только на прокручиваемых элементах*. Например, элемент с `overflow:hidden` в принципе не может сгенерировать `onscroll`.
        • +
      • При прокрутке срабатывает событие [onscroll](/onscroll) -- рассмотрим его в дальнейшем. Оно произойдёт *при любой прокрутке*, в том числе через клавиатурy, но *только на прокручиваемых элементах*. Например, элемент с `overflow:hidden` в принципе не может сгенерировать `onscroll`.
      • А событие `wheel` является чисто "мышиным". Оно генерируется *над любым элементом* при передвижении колеса мыши. При этом не важно, прокручиваемый он или нет. В частности, `overflow:hidden` никак не препятствует обработке колеса мыши.
      @@ -39,16 +39,16 @@ if (elem.addEventListener) { if ('onwheel' in document) { // IE9+, FF17+, Ch31+ - elem.addEventListener ("wheel", onWheel); + elem.addEventListener("wheel", onWheel); } else if ('onmousewheel' in document) { // устаревший вариант события - elem.addEventListener ("mousewheel", onWheel); + elem.addEventListener("mousewheel", onWheel); } else { // Firefox < 17 - elem.addEventListener ("MozMousePixelScroll", onWheel); + elem.addEventListener("MozMousePixelScroll", onWheel); } } else { // IE8- - elem.attachEvent ("onmousewheel", onWheel); + elem.attachEvent("onmousewheel", onWheel); } function onWheel(e) { diff --git a/2-ui/3-event-details/7-fixevent/article.md b/2-ui/3-event-details/7-fixevent/article.md index 62e46576..bc9eaf50 100644 --- a/2-ui/3-event-details/7-fixevent/article.md +++ b/2-ui/3-event-details/7-fixevent/article.md @@ -18,7 +18,7 @@ elem.onclick = function(event) { *!* // если IE8-, то получить объект события window.event и исправить его - event = event || fixEvent.call(this, window.event); + event = event || fixEvent.call(this, window.event); */!* ... } @@ -40,11 +40,11 @@ function fixEvent(e) { e.currentTarget = this; e.target = e.srcElement; - + if (e.type == 'mouseover' || e.type == 'mouseenter') e.relatedTarget = e.fromElement; if (e.type == 'mouseout' || e.type == 'mouseleave') e.relatedTarget = e.toElement; - - if (e.pageX == null && e.clientX != null ) { + + if (e.pageX == null && e.clientX != null) { var html = document.documentElement; var body = document.body; @@ -56,7 +56,7 @@ function fixEvent(e) { } if (!e.which && e.button) { - e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : (e.button & 4 ? 2 : 0) ); + e.which = e.button & 1 ? 1 : (e.button & 2 ? 3 : (e.button & 4 ? 2 : 0)); } return e; diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/solution.md b/2-ui/3-event-details/8-onscroll/2-updown-button/solution.md index ae85065b..8fa8c587 100644 --- a/2-ui/3-event-details/8-onscroll/2-updown-button/solution.md +++ b/2-ui/3-event-details/8-onscroll/2-updown-button/solution.md @@ -47,7 +47,7 @@ window.onscroll = function() { var pageY = window.pageYOffset || document.documentElement.scrollTop; var innerHeight = document.documentElement.clientHeight; - switch(updownElem.className) { + switch (updownElem.className) { case '': if (pageY > innerHeight) { updownElem.className = 'up'; @@ -77,7 +77,7 @@ var pageYLabel = 0; updownElem.onclick = function() { var pageY = window.pageYOffset || document.documentElement.scrollTop; - switch(this.className) { + switch (this.className) { case 'up': pageYLabel = pageY; window.scrollTo(0, 0); diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md index d43306ff..1608bab1 100644 --- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md +++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md @@ -3,7 +3,7 @@ Она должна срабатывать не только при прокрутке, но и при загрузке. Вполне достаточно для этого -- указать ее вызов в скрипте под страницей, вот так: ```js -... страница ... +...страница... function isVisible(elem) { @@ -20,7 +20,7 @@ function isVisible(elem) { *!* -showVisible(); +showVisible(); window.onscroll = showVisible; */!* ``` diff --git a/2-ui/3-event-details/8-onscroll/article.md b/2-ui/3-event-details/8-onscroll/article.md index df24ac01..da325c24 100644 --- a/2-ui/3-event-details/8-onscroll/article.md +++ b/2-ui/3-event-details/8-onscroll/article.md @@ -9,7 +9,7 @@ ```js //+ autorun -window.onscroll = function() { +window.onscroll = function() { var scrolled = window.pageYOffset || document.documentElement.scrollTop; document.getElementById('showScroll').innerHTML = scrolled + 'px'; } diff --git a/2-ui/3-event-details/9-keyboard-events/1-numeric-input/solution.md b/2-ui/3-event-details/9-keyboard-events/1-numeric-input/solution.md index d7de0b52..35f6c937 100644 --- a/2-ui/3-event-details/9-keyboard-events/1-numeric-input/solution.md +++ b/2-ui/3-event-details/9-keyboard-events/1-numeric-input/solution.md @@ -17,8 +17,8 @@ ```js input.onkeypress = function(e) { e = e || event; - - if (e.ctrlKey || e.altKey || e.metaKey) return; + + if (e.ctrlKey || e.altKey || e.metaKey) return; var chr = getChar(e); @@ -26,7 +26,7 @@ input.onkeypress = function(e) { // т.к. например null >= '0' => true // на всякий случай лучше вынести проверку chr == null отдельно if (chr == null) return; - + if (chr < '0' || chr > '9') { return false; } diff --git a/2-ui/3-event-details/9-keyboard-events/2-check-sync-keydown/task.md b/2-ui/3-event-details/9-keyboard-events/2-check-sync-keydown/task.md index d3884444..285e4f92 100644 --- a/2-ui/3-event-details/9-keyboard-events/2-check-sync-keydown/task.md +++ b/2-ui/3-event-details/9-keyboard-events/2-check-sync-keydown/task.md @@ -7,6 +7,7 @@ Например, код ниже выведет `alert` при одновременном нажатии клавиш `"Q"` и `"W"` (в любом регистре, в любой раскладке) ```js +//+ no-beautify runOnKeys( function() { alert("Привет!") }, "Q".charCodeAt(0), diff --git a/2-ui/3-event-details/9-keyboard-events/article.md b/2-ui/3-event-details/9-keyboard-events/article.md index 31ce098a..a0ea7019 100644 --- a/2-ui/3-event-details/9-keyboard-events/article.md +++ b/2-ui/3-event-details/9-keyboard-events/article.md @@ -79,15 +79,15 @@ //+ autorun // event.type должен быть keypress function getChar(event) { - if (event.which == null) { // IE + if (event.which == null) { // IE if (event.keyCode < 32) return null; // спец. символ - return String.fromCharCode(event.keyCode) - } + return String.fromCharCode(event.keyCode) + } - if (event.which!=0 && event.charCode!=0) { // все кроме IE + if (event.which != 0 && event.charCode != 0) { // все кроме IE if (event.which < 32) return null; // спец. символ return String.fromCharCode(event.which); // остальные - } + } return null; // спец. символ } @@ -179,18 +179,18 @@ function getChar(event) { ```html ``` diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md index cdf6dffb..4ec1dec3 100644 --- a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md +++ b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md @@ -12,12 +12,12 @@ // 1) var selectedOption = select.options[select.selectedIndex]; - alert(selectedOption.value); + alert( selectedOption.value ); // 2) var newOption = new Option("Classic", "Классика"); select.appendChild(newOption); - + // 3) newOption.selected = true; diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md index 6ad537e6..82f9280d 100644 --- a/2-ui/4-forms-controls/1-form-elements/article.md +++ b/2-ui/4-forms-controls/1-form-elements/article.md @@ -11,6 +11,7 @@ Например: ```js +//+ no-beautify document.forms.my -- форма с именем 'my' document.forms[0] -- первая форма в документе ``` @@ -24,18 +25,18 @@ document.forms[0] -- первая форма в документе ```html -
      - - -
      +
      + + +
      - + alert( elem.value ); // "один" + ``` @@ -67,24 +68,25 @@ alert(elems[0].value); // 10, первый input ```html -
      -
      fieldset + +
      + fieldset -
      - +
      + - + ``` -Спецификация: [HTML5 Forms](http://www.w3.org/TR/html5/forms.html). +Спецификация: [HTML5 Forms](https://html.spec.whatwg.org/multipage/forms.html). [warn header="Доступ `form.name` тоже работает, но с особенностями"] Получить доступ к элементам формы можно не только через `form.elements[name/index]`, но и проще: `form[index/name]`. @@ -95,19 +97,21 @@ alert( form.elements.set.elements.text ); // INPUT ```html -
      +
      + +
      ``` @@ -138,7 +142,7 @@ alert(elem.form == form); // true ``` -Познакомиться с другими свойствами элементов можно в спецификации [HTML5 Forms](http://www.w3.org/TR/html5/forms.html). +Познакомиться с другими свойствами элементов можно в спецификации [HTML5 Forms](https://html.spec.whatwg.org/multipage/forms.html). ## Элемент label @@ -157,12 +161,20 @@ alert(elem.form == form); // true - - + + - - + +
      + + + +
      + + + +
      ``` @@ -171,7 +183,7 @@ alert(elem.form == form); // true
    3. Завернуть элемент в `label`. В этом случае можно обойтись без дополнительных атрибутов: ```html - + ``` @@ -196,8 +208,8 @@ textarea.value = "Новый текст"; **Текущее "отмеченное" состояние для `checkbox` и `radio` находится в свойстве `checked` (`true/false`).** ```js -if (input.checked) { - alert("Чекбокс выбран"); +if (input.checked) { + alert( "Чекбокс выбран" ); } ``` @@ -242,13 +254,13 @@ for (var i=0; i ``` -Спецификация: HTMLSelectElement. +Спецификация: [the select element](https://html.spec.whatwg.org/multipage/forms.html#the-select-element). [smart header="`new Option`"] -В стандарте [the Option Element](http://dev.w3.org/html5/spec/the-option-element.html#the-option-element) есть любопытный короткий синтаксис для создания элемента с тегом `option`: +В стандарте [the option element](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) есть любопытный короткий синтаксис для создания элемента с тегом `option`: ```js -option = new Option( text, value, defaultSelected, selected); +option = new Option(text, value, defaultSelected, selected); ``` Параметры: @@ -261,7 +273,7 @@ option = new Option( text, value, defaultSelected, selected); Его можно использовать вместо `document.createElement('option')`, например: ```js -var option = new Option("Текст", "value"); +var option = new Option("Текст", "value"); // создаст ``` @@ -275,7 +287,7 @@ var option = new Option("Текст", "value", true, true); [smart header="Дополнительные свойства `option`"] -У элементов `option` также есть особые свойства, которые могут оказаться полезными (см. [The Option Element](http://dev.w3.org/html5/spec/the-option-element.html#the-option-element)): +У элементов `option` также есть особые свойства, которые могут оказаться полезными (см. [the option element](https://html.spec.whatwg.org/multipage/forms.html#the-option-element)):
      `selected`
      diff --git a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.md b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.md index cb0173e2..71bccf8b 100644 --- a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.md +++ b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.md @@ -5,7 +5,8 @@ Так как мы преобразуем `
      ` в `