diff --git a/1-js/1-getting-started/4-devtools/article.md b/1-js/1-getting-started/4-devtools/article.md index 7d9df72c..72d49185 100644 --- a/1-js/1-getting-started/4-devtools/article.md +++ b/1-js/1-getting-started/4-devtools/article.md @@ -58,6 +58,7 @@ Если консоль уже была включена ранее, то этот шаг не нужен, но если она серая -- выберите в меню `Консоль` и включите её: +
  • Для того, чтобы Firebug работал без глюков, желательно сначала открыть Firebug, а уже потом -- зайти на страницу. @@ -96,6 +97,7 @@ Откройте меню, нажав на колесико справа-сверху и выберите `Настройки`. Затем вкладка `Дополнительно`: + Отметьте `Показывать меню "Разработка" в строке меню`. Закройте настройки. diff --git a/2-ui/1-document/19-dom-cheatsheet/article.md b/2-ui/1-document/19-dom-cheatsheet/article.md index c893a1a8..05f7d5f5 100644 --- a/2-ui/1-document/19-dom-cheatsheet/article.md +++ b/2-ui/1-document/19-dom-cheatsheet/article.md @@ -1,8 +1,8 @@ -# Итого: DOM-шпаргалка +# Итого -В этой статье перечислены основные свойства и методы DOM, которые мы изучили. +В этой главе кратко перечислены основные свойства и методы DOM, которые мы изучили. -Используйте её, чтобы быстро подглядеть то, что изучали ранее. +Используйте её, чтобы получить быстрый итоговый обзор того, что изучали ранее. [cut] diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.view/index.html index 4f218abe..f3cd221f 100755 --- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.view/index.html +++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.view/index.html @@ -7,12 +7,14 @@ -
    Текст
    +
    Текст
    diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/source.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/source.view/index.html index 97a6221e..2ed0953e 100755 --- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/source.view/index.html +++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/source.view/index.html @@ -7,7 +7,7 @@ -
    Текст
    +
    Текст
    - - - - - diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/solution.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/solution.md index 7e8e00fa..71a45995 100644 --- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/solution.md +++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/solution.md @@ -9,8 +9,8 @@ function handler() { alert("1"); } -button.addEventListener("click", handler, false); -button.removeEventListener("click", handler, false); +button.addEventListener("click", handler); +button.removeEventListener("click", handler); ``` Обработчик `button.onclick` сработает независимо и в дополнение к назначенному в `addEventListener`. diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/task.md index ebe89653..f6974d8a 100644 --- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/task.md +++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/task.md @@ -9,9 +9,9 @@ Что будет выведено при клике после выполнения кода? ```js -button.addEventListener("click", function() { alert("1"); }, false); +button.addEventListener("click", function() { alert("1"); }); -button.removeEventListener("click", function() { alert("1"); }, false); +button.removeEventListener("click", function() { alert("1"); }); button.onclick = function() { alert(2); }; ``` diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.view/index.html index 6c707e44..f9a4399c 100755 --- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.view/index.html +++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.view/index.html @@ -13,18 +13,21 @@ } .menu .title { - padding-left: 16px; font-size: 18px; cursor: pointer; - - background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat; } - .menu-open .title { - background: url(http://js.cx/clipart/arrow-down.png) left center no-repeat; + .menu .title::before { + content: '▶ '; + font-size: 80%; + color: green; } - .menu-open ul { + .menu.open .title::before { + content: '▼ '; + } + + .menu.open ul { display: block; } @@ -33,7 +36,7 @@ diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/source.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/source.view/index.html index d8b1bc96..9aebcbfb 100755 --- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/source.view/index.html +++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/source.view/index.html @@ -5,10 +5,7 @@ - - - -Сладости (нажми меня)! +▶ ▼ Сладости (нажми меня)! - - + \ No newline at end of file diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/task.md index b27d9630..7d87d886 100644 --- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/task.md +++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/task.md @@ -6,5 +6,5 @@ [iframe border=1 height=100 src="solution"] -HTML/CSS исходного документа, возможно, понадобится изменить. +P.S. HTML/CSS исходного документа понадобится изменить. diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.md index acead631..4b1699b6 100644 --- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.md +++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.md @@ -1,26 +1,10 @@ -# Алгоритм решения - -
      -
    1. Разработать структуру HTML/CSS. Позиционировать кнопку внутри сообщения.
      2. -
    2. Найти все кнопки
      3. -
    3. Присвоить им обработчики
      4. -
    4. Обработчик будет ловить событие на кнопке и удалять соответствующий элемент.
        5. +
      1. Изменим HTML/CSS, чтобы кнопка была в нужном месте сообщения. Кнопка -- это тег `
        2. +
      2. Для того, чтобы получить кнопку из контейнера, используем `querySelectorAll`. На каждую кнопку повесим обработчик, который будет убирать родителя. Найти родителя можно через `parentNode`.
        3. +
      diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/index.html index 6fe31c05..0dc0abe4 100755 --- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/index.html +++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/index.html @@ -3,26 +3,6 @@ - @@ -31,17 +11,17 @@

      Лошадь

      Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.

      - +

      Осёл

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

      - +

      Корова, а также пара слов о диком быке, о волах и о тёлках.

      Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.

      - +
      @@ -49,13 +29,12 @@ diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css index d430e776..67e58d74 100755 --- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css +++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css @@ -1,5 +1,5 @@ body { - padding: 10px + padding: 10px; } .carousel { @@ -10,43 +10,57 @@ body { border-radius: 15px; background: #eee; } + .carousel img { width: 130px; height: 130px; - display: block; /* если не поставить block, в ряде браузеров будет inline -> лишнее пространтсво вокруг элементов */ -} -.carousel .arrow { - position: absolute; - top: 57px; - padding: 3px 8px 8px 9px; - background: #ddd; - border-radius: 15px; - font-size: 24px; - color: #444; - text-decoration: none; + /* по умолчанию inline, в ряде браузеров это даст лишнее пространство вокруг элементов */ + display: block; } -.carousel .arrow:hover { - background: #ccc; +.arrow { + position: absolute; + top: 60px; + padding: 0; + background: #ddd; + border-radius: 15px; + border: 1px solid gray; + font-size: 24px; + line-height: 24px; + color: #444; + display: block; } -.carousel .left-arrow { + +.arrow:focus { + outline: none; +} + +.arrow:hover { + background: #ccc; + cursor: pointer; +} +.prev { left: 7px; } -.carousel .right-arrow { +.next { right: 7px; } + .gallery { width: 390px; overflow: hidden; } + .gallery ul { height: 130px; width: 9999px; margin: 0; padding: 0; list-style: none; + transition: margin-left 250ms; } -.gallery ul li { - float: left; +.gallery li { + display: inline-block; } + diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html index 31a895a4..44352c3d 100755 --- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html +++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html @@ -1,22 +1,28 @@ + -
    -**Так как свойство, в итоге, одно, то назначить более одного обработчика так нельзя.** +**Так как DOM-свойство `onclick`, в итоге, одно, то назначить более одного обработчика так нельзя.** В примере ниже назначение через JavaScript перезапишет обработчик из атрибута: @@ -152,7 +160,7 @@ button.onclick = function() { @@ -170,7 +178,7 @@ elem.onclick = sayThanks; Если обработчик надоел -- его всегда можно убрать назначением `elem.onclick = null`. -### Доступ к элементу через this +## Доступ к элементу через this Внутри обработчика события `this` ссылается на текущий элемент, то есть на тот, на котором он сработал. @@ -182,11 +190,11 @@ elem.onclick = sayThanks; ``` -В действии: - +[online] +В действии: +[/online] - -### Частые ошибки +## Частые ошибки Если вы только начинаете работать с событиями -- обратите внимание на следующие особенности. @@ -206,7 +214,7 @@ button.onclick = sayThanks; ``` -Это различие просто объяснить. При создании обработчика браузером по разметке, он автоматически создает функцию из его содержимого. Поэтому последний пример -- фактически то же самое, что: +Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создает функцию из его содержимого. Поэтому последний пример -- фактически то же самое, что: ```js button.onclick = function() { @@ -219,9 +227,7 @@ button.onclick = function() {
    Используйте именно функции, а не строки.
    -Назначение обработчика строкой `elem.onclick = 'alert(1)'` будет работать, но не рекомендуется, могут быть проблемы при сжатии JavaScript. - -Передавать код в виде строки по меньшей мере странно в языке, который поддерживает Function Expressions, оно здесь доступно только по соображениям совместимости с древними временами. +Назначение обработчика строкой `elem.onclick = "alert(1)"` можно иногда увидеть в древнем коде. Это будет работать, но не рекомендуется, могут быть проблемы при сжатии JavaScript Да и вообще, передавать код в виде строки по меньшей мере странно в языке, который поддерживает Function Expressions. Это возможно лишь по соображениям совместимости, не делайте так.
    Не используйте `setAttribute`.
    @@ -235,14 +241,12 @@ document.body.setAttribute('onclick', function() { alert(1) }); ```
    -
    Регистр свойства имеет значение.
    -
    Свойство называется `onclick`, а не `ONCLICK`.
    +
    Регистр DOM-свойства имеет значение.
    +
    При назначении через DOM нужно использовать свойство `onclick`, а не `ONCLICK`.
    - - -## Специальные методы +## Недостаток назначения через свойство Фундаментальный недостаток описанных выше способов назначения обработчика -- невозможность повесить *несколько* обработчиков на одно событие. @@ -256,16 +260,16 @@ input.onclick = function() { alert(1); } input.onclick = function() { alert(2); } // заменит предыдущий обработчик ``` -Разработчики стандартов достаточно давно это поняли и предложили альтернативный способ назначения обработчиков при помощи специальных методов, который свободен от указанного недостатка. +Разработчики стандартов достаточно давно это поняли и предложили альтернативный способ назначения обработчиков при помощи специальных методов, которые свободны от указанного недостатка. -### addEventListener и removeEventListener +## addEventListener и removeEventListener Методы `addEventListener` и `removeEventListener` являются современным способом назначить или удалить обработчик, и при этом позволяют использовать сколько угодно любых обработчиков. Назначение обработчика осуществляется вызовом `addEventListener` с тремя аргументами: ```js -element.addEventListener( event, handler, phase ); +element.addEventListener( event, handler[, phase]); ```
    @@ -274,27 +278,28 @@ element.addEventListener( event, handler, phase );
    `handler`
    Ссылка на функцию, которую надо поставить обработчиком.
    `phase`
    -
    Фаза, на которой обработчик должен сработать. Этот аргумент мы рассмотрим далее в учебнике. Пока что будем использовать значение `phase = false`, которое нужно в 99% случаев.
    +
    Необязательный аргумент, "фаза", на которой обработчик должен сработать. Этот аргумент редко нужен, мы его рассмотрим позже.
    Удаление обработчика осуществляется вызовом `removeEventListener`: ```js -element.removeEventListener( event, handler, phase ); +// передать те же аргументы, что были у addEventListener +element.removeEventListener( event, handler[, phase]); ``` -[warn header="Удаление требует ту же функцию"] +[warn header="Удаление требует именно ту же функцию"] Для удаления нужно передать именно ту функцию-обработчик которая была назначена. Вот так `removeEventListener` не сработает: ```js -input.addEventListener( "click" , function() {alert('Спасибо!')}, false); +elem.addEventListener( "click" , function() {alert('Спасибо!')}); // .... -input.removeEventListener( "click", function() {alert('Спасибо!')}, false); +elem.removeEventListener( "click", function() {alert('Спасибо!')}); ``` -Это не одна и та же функция, а две независимо созданные (с одинаковым кодом, но это не важно). +В `removeEventListener` передана не та же функция, а другая, с одинаковым кодом, но это не важно. Вот так правильно: @@ -303,14 +308,15 @@ function handler() { alert('Спасибо!'); } -input.addEventListener( "click" , handler, false); +input.addEventListener( "click", handler); // .... -input.removeEventListener( "click", handler, false); +input.removeEventListener( "click", handler); ``` +Обратим внимание -- если функцию не сохранить где-либо, а просто передать в `addEventListener`, как в предыдущем коде, то потом получить её обратно, чтобы снять обработчик, будет невозможно. Нет метода, который позволяет считать обработчики событий, назанченные через `addEventListener`. [/warn] -**Использование `addEventListener` позволяет добавлять несколько обработчиков на одно событие одного элемента:** +Метод `addEventListener` позволяет добавлять несколько обработчиков на одно событие одного элемента, например: ```html @@ -327,28 +333,28 @@ input.removeEventListener( "click", handler, false); *!* elem.onclick = function() { alert("Привет"); }; - elem.addEventListener("click", handler1, false); // Спасибо! - elem.addEventListener("click", handler2, false); // Спасибо ещё раз! + elem.addEventListener("click", handler1); // Спасибо! + elem.addEventListener("click", handler2); // Спасибо ещё раз! */!* ``` -Как видно из примера выше, можно одновременно назначать обработчики и через `onсвойство` (только один) и через `addEventListener`. Однако, во избежание путаницы обычно рекомендуется выбрать один способ. +Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через `addEventListener`. Однако, во избежание путаницы, рекомендуется выбрать один способ. -[warn header="`addEventListener` работает всегда, а `onсвойство` -- нет"] -У специальных методов есть ещё одно перимущество перед "старой школой". +[warn header="`addEventListener` работает всегда, а DOM-свойство -- нет"] +У специальных методов есть ещё одно перимущество перед DOM-свойствами. -Есть некоторые события, которые нельзя назначить через `onсвойство`, но можно через `addEventListener`. +Есть некоторые события, которые нельзя назначить через DOM-свойство, но можно через `addEventListener`. Например, таково событие `transitionend`, то есть окончание CSS-анимации. В большинстве браузеров оно требует назначения через `addEventListener`. -При нажатии на кнопку в примере ниже сработает второй обработчик, но не первый. +Вы можете проверить это, запустив код в примере ниже. Как правило, сработает лишь второй обработчик, но не первый. ```html - +