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 9b12cb36..d7292f0e 100644 --- a/2-ui/3-event-details/11-onload-onerror/article.md +++ b/2-ui/3-event-details/11-onload-onerror/article.md @@ -20,28 +20,27 @@ var script = document.createElement('script'); script.src = "my.js"; -document.documentElement.appendChild(script); +document.body.appendChild(script); ``` -...Но, как подгрузки выполнить функцию из этого скрипта? Конечно, можно вызвать её в самом скрипте, но если скрипт -- это универсальная библиотека, то это было бы неправильно. +...Но как после подгрузки выполнить функцию, которая объявлена в этом скрипте? Для этого нужно отловить момент окончания загрузки и выполнения тега ` ``` -В действии: +[online] +В действии: +[/online] +## Невосместимости [#keyboard-events-order] -## Особенности клавиш и ОС [#keyboard-events-order] +Некоторые несовместимости в порядке срабатывания клавиатурных событий (когда что) ещё существуют. -События `keydown/keyup` возникают всегда. А `keypress` -- по-разному. - -Есть три основных категории клавиш, работа с которыми отличается. - -Перечислим их в таблице, обращая основное внимание на особенности работы с ними. +Стоит иметь в виду три основных категории клавиш, работа с которыми отличается. - - - + + - - + - + - -
КатегорияПримеры События Описание
Печатные клавиши[key S] [key 1] [key ,]Печатные клавиши [key S] [key 1] [key ,] `keydown` `keypress` `keyup` Нажатие вызывает `keydown` и `keypress`. Когда клавишу отпускают, срабатывает `keyup`. -Исключение -- CapsLock под MacOS, он глючит неимоверно: +Исключение -- CapsLock под MacOS, с ним есть проблемы:
  • В Safari/Chrome/Opera: при включении только `keydown`, при отключении только `keyup`.
  • В Firefox: при включении и отключении только `keydown`.
-Попробуйте на тестовом стенде. -
Специальные клавиши[key Alt] [key Esc] [key ⇧]Специальные клавиши [key Alt] [key Esc] [key ⇧] `keydown` `keyup` Нажатие вызывает `keydown`. Когда клавишу отпускают, срабатывает `keyup`. -Некоторые браузеры могут дополнительно генерировать и `keypress`, например IE для [key Esc]. Попробуйте нажать [key Esc] на тестовом стенде в разных браузерах -- и увидите: в IE `keypress` есть, а в остальных -- нет. +Некоторые браузеры могут дополнительно генерировать и `keypress`, например IE для [key Esc]. На практике это не доставляет проблем, так как для специальных клавиш мы всегда используем `keydown/keyup`. -
Сочетания с печатной клавишей - + Сочетания с печатной клавишей [key Alt+E] [key Ctrl+У] [key Cmd+1] - `keydown` `keypress?` @@ -283,11 +263,18 @@ document.getElementById('my').onkeypress = function(e) { Браузеры под Windows -- не генерируют `keypress`, браузеры под MacOS -- генерируют. -Кроме того, если сочетание вызвало браузерное действие или диалог ("Сохранить файл", "Открыть" и т.п., ряд диалогов можно отменить при `keydown`), то `keypress/keyup` может не быть. +Кроме того, если сочетание вызвало браузерное действие или диалог ("Сохранить файл", "Открыть" и т.п., ряд диалогов можно отменить при `keydown`), то может быть только `keydown`.
+Общий вывод можно сделать такой: + + ## Автоповтор При долгом нажатии клавиши возникает *автоповтор*. По стандарту, должны генерироваться многократные события `keydown (+keypress)`, и вдобавок стоять свойство [repeat=true](http://www.w3.org/TR/DOM-Level-3-Events/#events-KeyboardEvent-repeat) у объекта события. @@ -316,23 +303,27 @@ keyup keyup ``` -...А Chrome под MacOS не генерирует `keypress`. В общем, "зоопарк". Полагаться можно только на `keydown` при каждом автонажатии и `keyup` по отпусканию клавиши. +...А Chrome под MacOS не генерирует `keypress`. В общем, "зоопарк". -## Итого, рецепты +Полагаться можно только на `keydown` при каждом автонажатии и `keyup` по отпусканию клавиши. -Если обобщить данные из этой таблицы и статьи, то можно сделать ряд выводов: +## Итого + +Ряд рецептов по итогу этой главы:
    -
  1. Для реализации горячих клавиш, включая сочетания -- используем `keydown`.
    2. -
  2. Если нужен именно символ -- используем `keypress`. При этом функция `getChar` позволит получить символ и отфильтровать лишние срабатывания.
    3. +
  3. Для реализации горячих клавиш, включая сочетания -- используем `keydown`. Скан-код будет в `keyCode`, почти все скан-коды кросс-браузерны, кроме нескольких пунктуационных, перечисленных в таблице выше.
    4. +
  4. Если нужен именно символ -- используем `keypress`. При этом функция `getChar` позволит получить символ и отфильтровать лишние срабатывания. Гарантированно получать символ можно только при нажатии обычных клавиш, если речь о сочетаниях с модификаторами, то `keypress` не всегда генерируется.
  5. Ловля CapsLock глючит под MacOS. Её можно организовать при помощи проверки `navigator.userAgent` и `navigator.platform`, а лучше вообще не трогать эту клавишу.
-Для работы с вводом в формы, существуют [события для форм](/events-change), которые мы разберём позже. Их можно использовать как отдельно от событий клавиатуры, так и вместе с ними. +Распространённая ошибка -- использовать события клавиатуры для работы с полями ввода в формах. + +Это нежелательно. События клавиатуры предназначены именно для работы с клавиатурой. Да, их можно использовать для проверки ввода в ``, но будут недочёты. Например, текст может быть вставлен мышкой, при помощи правого клика и меню, без единого нажатия клавиши. И как нам помогут события клавиатуры? + +Некоторые мобильные устройства также не генерируют `keypress/keydown`, а сразу вставляют текст в поле. Обработать ввод на них при помощи клавиатурных событий нельзя. + +Далее мы разберём [события для элементов форм](/events-change), которые позволяют работать с вводом в формы правильно. + +Их можно использовать как отдельно от событий клавиатуры, так и вместе с ними. -[head] - -[/head] \ No newline at end of file diff --git a/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/index.html b/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/index.html index cca17c41..2d6a0bfc 100755 --- a/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/index.html +++ b/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/index.html @@ -6,7 +6,6 @@ -
Предотвратить действие по умолчанию для:       @@ -16,10 +15,11 @@

Сфокусируйтесь на поле и нажмите какую-нибудь клавишу.

- + + + +
- - diff --git a/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/script.js b/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/script.js index 80a22e7e..0dd0952d 100755 --- a/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/script.js +++ b/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/script.js @@ -1,12 +1,12 @@ kinput.onkeydown = kinput.onkeyup = kinput.onkeypress = handle; +var lastTime = Date.now(); + function handle(e) { if (form.elements[e.type + 'Ignore'].checked) return; - var evt = e.type - while (evt.length < 10) evt += ' ' - text.value += evt + + var text = event.type + ' keyCode=' + e.keyCode + ' which=' + e.which + ' charCode=' + e.charCode + @@ -15,8 +15,14 @@ function handle(e) { (e.ctrlKey ? ' +ctrl' : '') + (e.altKey ? ' +alt' : '') + (e.metaKey ? ' +meta' : '') + "\n"; - - + + if (area.value && Date.now() - lastTime > 250) { + area.value += new Array(81).join('-') + '\n'; + } + lastTime = Date.now(); + + area.value += text; + if (form.elements[e.type + 'Stop'].checked) { e.preventDefault(); } diff --git a/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/style.css b/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/style.css index 3dda314c..bd409020 100755 --- a/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/style.css +++ b/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/style.css @@ -1,20 +1,18 @@ -form { - border:solid gray 1px; - margin:10px; - padding:10px; -} #kinput { - font-size:150%; - width:600px; + font-size: 150%; + width: 600px; } -#text { - width:600px; - border:1px solid black; + +#area { + width: 600px; + height: 250px; + border: 1px solid black; display: block; } + form label { display: inline; } diff --git a/2-ui/3-event-details/9-onscroll/1-avatar-above-scroll/solution.md b/2-ui/3-event-details/9-onscroll/1-avatar-above-scroll/solution.md deleted file mode 100644 index e69de29b..00000000 diff --git a/2-ui/3-event-details/9-onscroll/1-avatar-above-scroll/solution.view/index.html b/2-ui/3-event-details/9-onscroll/1-avatar-above-scroll/solution.view/index.html deleted file mode 100644 index f230bdb6..00000000 --- a/2-ui/3-event-details/9-onscroll/1-avatar-above-scroll/solution.view/index.html +++ /dev/null @@ -1,109 +0,0 @@ - - - - - - - - -
Шапка
- -
-
-

Персонажи:

- -
-
-
-
- -

Винни-Пух

- -
- -
Кадр из мультфильма
-
- -

Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.

- -

В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.

- -

Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни), содержавшейся в 1920-х в Лондонском зоопарке.

- -

Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую надпись.

- -

«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь в 1954; между этими датами — ряд трагических событий германской истории.

- - -

Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2]. -Алан Милн, Кристофер Робин и Винни-Пух. Фотография из Британской национальной портретной галереи

- -

Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].

- -

Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных — опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5], возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.

-
-
- - - - - diff --git a/2-ui/3-event-details/9-onscroll/1-avatar-above-scroll/source.view/index.html b/2-ui/3-event-details/9-onscroll/1-avatar-above-scroll/source.view/index.html deleted file mode 100644 index 72e7dfa0..00000000 --- a/2-ui/3-event-details/9-onscroll/1-avatar-above-scroll/source.view/index.html +++ /dev/null @@ -1,91 +0,0 @@ - - - - - - - - -
Шапка
- -
-
-

Персонажи:

- -
-
-
-
- -

Винни-Пух

- -
- -
Кадр из мультфильма
-
- -

Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.

- -

В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.

- -

Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни), содержавшейся в 1920-х в Лондонском зоопарке.

- -

Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую надпись.

- -

«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь в 1954; между этими датами — ряд трагических событий германской истории.

- - -

Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2]. -Алан Милн, Кристофер Робин и Винни-Пух. Фотография из Британской национальной портретной галереи

- -

Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].

- -

Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных — опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5], возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.

-
-
- - - - diff --git a/2-ui/3-event-details/9-onscroll/1-avatar-above-scroll/task.md b/2-ui/3-event-details/9-onscroll/1-avatar-above-scroll/task.md deleted file mode 100644 index 38f1b6e0..00000000 --- a/2-ui/3-event-details/9-onscroll/1-avatar-above-scroll/task.md +++ /dev/null @@ -1,12 +0,0 @@ -# Аватар наверху при прокрутке - -[importance 5] - -Сделайте так, чтобы при прокрутке ниже элемента `#avatar` (картинка с Винни-Пухом) -- он продолжал показываться в левом-верхнем углу. - -При прокрутке вверх -- должен возвращаться на обычное место. - -Прокрутите вниз, чтобы увидеть: -[iframe src="solution" height=300 link border="1"] - -[edit task src="source"/] diff --git a/2-ui/3-event-details/9-onscroll/2-updown-button/solution.md b/2-ui/3-event-details/9-onscroll/2-updown-button/solution.md deleted file mode 100644 index ae85065b..00000000 --- a/2-ui/3-event-details/9-onscroll/2-updown-button/solution.md +++ /dev/null @@ -1,94 +0,0 @@ -Добавим в документ `DIV` с кнопкой: - -```html -
-``` - -Сама кнопка должна иметь `position:fixed`. - -```css -#updown { - position: fixed; - top: 30px; - left: 10px; - cursor: pointer; -} -``` - -Кнопка является CSS-спрайтом, поэтому мы дополнительно добавляем ей размер и два состояния: - -```css -#updown { - height: 9px; - width: 14px; - position: fixed; - top: 30px; - left: 10px; - cursor: pointer; -} - -#updown.up { - background: url(...updown.gif) left top; -} - -#updown.down { - background: url(...updown.gif) left -9px; -} -``` - -Для решения необходимо аккуратно разобрать все возможные состояния кнопки и указать, что делать при каждом. - -Состояние -- это просто класс элемента: `up/down` или пустая строка, если кнопка не видна. - -При прокрутке состояния меняются следующим образом: - -```js -window.onscroll = function() { - var pageY = window.pageYOffset || document.documentElement.scrollTop; - var innerHeight = document.documentElement.clientHeight; - - switch(updownElem.className) { - case '': - if (pageY > innerHeight) { - updownElem.className = 'up'; - } - break; - - case 'up': - if (pageY < innerHeight) { - updownElem.className = ''; - } - break; - - case 'down': - if (pageY > innerHeight) { - updownElem.className = 'up'; - } - break; - } -} -``` - -При клике: - -```js -var pageYLabel = 0; - -updownElem.onclick = function() { - var pageY = window.pageYOffset || document.documentElement.scrollTop; - - switch(this.className) { - case 'up': - pageYLabel = pageY; - window.scrollTo(0, 0); - this.className = 'down'; - break; - - case 'down': - window.scrollTo(0, pageYLabel); - this.className = 'up'; - } - -} -``` - diff --git a/2-ui/3-event-details/9-onscroll/2-updown-button/solution.view/index.html b/2-ui/3-event-details/9-onscroll/2-updown-button/solution.view/index.html deleted file mode 100644 index a668298a..00000000 --- a/2-ui/3-event-details/9-onscroll/2-updown-button/solution.view/index.html +++ /dev/null @@ -1,97 +0,0 @@ - - - - - - - - -
- -
- -
- - - - diff --git a/2-ui/3-event-details/9-onscroll/2-updown-button/source.view/index.html b/2-ui/3-event-details/9-onscroll/2-updown-button/source.view/index.html deleted file mode 100644 index 1823d5a9..00000000 --- a/2-ui/3-event-details/9-onscroll/2-updown-button/source.view/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - - - -
- -
- - - - diff --git a/2-ui/3-event-details/9-onscroll/2-updown-button/task.md b/2-ui/3-event-details/9-onscroll/2-updown-button/task.md deleted file mode 100644 index 1607f812..00000000 --- a/2-ui/3-event-details/9-onscroll/2-updown-button/task.md +++ /dev/null @@ -1,21 +0,0 @@ -# Кнопка вверх-вниз - -[importance 3] - -Создайте кнопку навигации, которая помогает при прокрутке страницы. - -Работать должна следующим образом: - -Должен получиться удобный навигационный помощник. - -Посмотрите, как оно должно работать, в ифрейме ниже. Прокрутите ифрейм, навигационная стрелка появится слева. - -[iframe border="1" height="200" link src="solution"] - -В исходный документ включена кнопка. - - diff --git a/2-ui/3-event-details/9-onscroll/3-load-visible-img/solution.md b/2-ui/3-event-details/9-onscroll/3-load-visible-img/solution.md deleted file mode 100644 index d43306ff..00000000 --- a/2-ui/3-event-details/9-onscroll/3-load-visible-img/solution.md +++ /dev/null @@ -1,36 +0,0 @@ -Функция должна по текущей прокрутке определять, какие изображения видимы, и загружать их. - -Она должна срабатывать не только при прокрутке, но и при загрузке. Вполне достаточно для этого -- указать ее вызов в скрипте под страницей, вот так: - -```js -... страница ... - -function isVisible(elem) { - - var coords = elem.getBoundingClientRect(); - - var windowHeight = document.documentElement.clientHeight; - - // верхняя граница elem в пределах видимости ИЛИ нижняя граница видима - var topVisible = coords.top > 0 && coords.top < windowHeight; - var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0; - - return topVisible || bottomVisible; -} - - -*!* -showVisible(); -window.onscroll = showVisible; -*/!* -``` - -При запуске функция ищет все видимые картинки с `realsrc` и перемещает значение `realsrc` в `src`. Обратите внимание, т.к. атрибут `realsrc` нестандартный, то для доступа к нему мы используем `get/setAttribute`. А `src` -- стандартный, поэтому можно обратиться по DOM-свойству. - -**Функция проверки видимости `isVisible(elem)` получает координаты текущей видимой области и сравнивает их с элементом.** - -Для видимости достаточно, чтобы координаты верхней(или нижней) границы элемента находились между границами видимой области. - -В решении также указан вариант с `isVisible`, который расширяет область видимости на +-1 страницу (высота страницы -- `document.documentElement.clientHeight`). - -[edit src="solution"]Открыть полное решение в песочнице[/edit] \ No newline at end of file diff --git a/2-ui/3-event-details/9-onscroll/3-load-visible-img/solution.view/index.html b/2-ui/3-event-details/9-onscroll/3-load-visible-img/solution.view/index.html deleted file mode 100644 index 877d48a3..00000000 --- a/2-ui/3-event-details/9-onscroll/3-load-visible-img/solution.view/index.html +++ /dev/null @@ -1,159 +0,0 @@ - - - - - - - - -

Тексты и картинки взяты с сайта http://etoday.ru.

- -

Все изображения с realsrc загружаются, когда становятся видимыми.

- - -
-
Космопорт Америка \ Architecture
- -Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также обеспечена взлетно-посадочная полоса длиной в три километра. - -
- -
-
- -
-
Рокер и супермодель в Vogue Russia \ Celebrities
- -Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной. -
- - -
-
- -
-
Старость - не радость в Vogue Italia \ Fashion Photo
- -Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf), Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad). -
- - -
-
- -
-
"Вышитый рентген" Matthew Cox \ Art
- -Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе. Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели. - -Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации. -
-
- -
-
Подарочный каталог Apple 1983 \ Creative
- -Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно! -Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации. -
-
- -
-
Винтажные открытки к празднику Halloween \ Illustrations
- -Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г. - -
-
- -
-
Фотограф Emily Lee \ Photography
- -Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе. - -
-
- -
-
Иконы моды в Fashimals \ Creative
- -Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег. - -
-
- - - - - - - diff --git a/2-ui/3-event-details/9-onscroll/3-load-visible-img/source.view/index.html b/2-ui/3-event-details/9-onscroll/3-load-visible-img/source.view/index.html deleted file mode 100644 index 0359f69c..00000000 --- a/2-ui/3-event-details/9-onscroll/3-load-visible-img/source.view/index.html +++ /dev/null @@ -1,101 +0,0 @@ - - - - - - - - -

Тексты и картинки взяты с сайта http://etoday.ru.

- -

Все изображения с realsrc загружаются, когда становятся видимыми.

- - -
-
Космопорт Америка \ Architecture
- -Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также обеспечена взлетно-посадочная полоса длиной в три километра. - -
- -
-
- -
-
Рокер и супермодель в Vogue Russia \ Celebrities
- -Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной. -
- - -
-
- -
-
Старость - не радость в Vogue Italia \ Fashion Photo
- -Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf), Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad). -
- - -
-
- -
-
"Вышитый рентген" Matthew Cox \ Art
- -Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе. Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели. - -Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации. -
-
- -
-
Подарочный каталог Apple 1983 \ Creative
- -Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно! -Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации. -
-
- -
-
Винтажные открытки к празднику Halloween \ Illustrations
- -Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г. - -
-
- -
-
Фотограф Emily Lee \ Photography
- -Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе. - -
-
- -
-
Иконы моды в Fashimals \ Creative
- -Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег. - -
-
- - - - - - diff --git a/2-ui/3-event-details/9-onscroll/3-load-visible-img/task.md b/2-ui/3-event-details/9-onscroll/3-load-visible-img/task.md deleted file mode 100644 index c809ec00..00000000 --- a/2-ui/3-event-details/9-onscroll/3-load-visible-img/task.md +++ /dev/null @@ -1,49 +0,0 @@ -# Загрузка видимых изображений - -[importance 4] - -Задача, которая описана ниже, демонстрирует результативный метод оптимизации страницы. - -С целью экономии трафика и более быстрой загрузки страницы изображения на ней заменяются на "макеты". - -Вместо такого изображения: - -```html - -``` - - - - -Стоит вот такое: - -```html - -``` - - - -То есть настоящий URL находится в атрибуте `realsrc` (название атрибута можно выбрать любое). А в `src` поставлен серый GIF размера 1x1, и так как `width/height` правильные, то он растягивается, так что вместо изображения виден серый прямоугольник. - -При этом, чтобы браузер загрузил изображение, нужно заменить значение `src` на то, которое находится в `realsrc`. - -**Если страница большая, то замена больших изображений на такие макеты существенно убыстряет полную загрузку страницы.** Это особенно заметно в случае, когда на странице много анонсов новостей с картинками или изображений товаров, из которых многие находятся за пределами прокрутки. - - Кроме того, для мобильных устройств JavaScript может подставлять URL уменьшенного варианта картинки. - -**Напишите код, который при прокрутке окна загружает ставшие видимыми изображения.** То есть, как только изображение попало в видимую часть документа -- в `src` нужно прописать правильный URL из `realsrc`. - -Работать должно так: открыть работающую страницу в новом окне. - - - -**Дополнительно: расширьте код, чтобы загружались изображения не только видимые сейчас, но и на страницу вперед и назад от текущего места.** - - - - -P.S. Страница прокручивается только вверх или вниз, горизонтальной прокрутки нет. \ No newline at end of file diff --git a/2-ui/3-event-details/9-onscroll/article.md b/2-ui/3-event-details/9-onscroll/article.md deleted file mode 100644 index ad575bc5..00000000 --- a/2-ui/3-event-details/9-onscroll/article.md +++ /dev/null @@ -1,31 +0,0 @@ -# Прокрутка: событие scroll - -Событие `onscroll` происходит, когда элемент прокручивается. - -В отличие от события `onwheel` (колесико мыши), его могут генерировать только прокручиваемые элементы или окно `window`. Но зато оно генерируется всегда, при любой прокрутке, не обязательно "мышиной". - -[cut] -Например, следующая функция при прокрутке окна выдает количество прокрученных пикселей: - -```js -//+ autorun -window.onscroll = function() { - var scrolled = window.pageYOffset || document.documentElement.scrollTop; - document.getElementById('showScroll').innerHTML = scrolled + 'px'; -} -``` - -В действии: -Текущая прокрутка = прокрутите окно - -Каких-либо особенностей события здесь нет, разве что для его использования нужно отлично представлять, как получить текущее значение прокрутки или прокрутить документ. Об этом мы говорили ранее, в главе [](/metrics). - -Событие `onscroll` используется достаточно часто для: - - -Вашему вниманию предлагаются несколько задач, которые вы можете решить сами или посмотреть использование `onscroll` на их примере. - -