renovations

iliakan · iliakan · commit a2dd0148ab28 · 2015-01-29T00:09:23.000+03:00
diff --git a/1-js/1-getting-started/4-devtools/article.md b/1-js/1-getting-started/4-devtools/article.md
@@ -58,6 +58,7 @@
 Если консоль уже была включена ранее, то этот шаг не нужен, но если она серая -- выберите в меню `Консоль` и включите её:
 
 <img src="firefox_console_enable.png">
+
 </li>
 <li>Для того, чтобы Firebug работал без глюков, желательно сначала открыть Firebug, а уже потом -- зайти на страницу.
 
@@ -96,6 +97,7 @@
 Откройте меню, нажав на колесико справа-сверху и выберите `Настройки`.
 
 Затем вкладка `Дополнительно`:
+
 <img src="safari.png">
 
 Отметьте `Показывать меню "Разработка" в строке меню`. Закройте настройки.
diff --git 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
@@ -7,12 +7,14 @@
 
 <input type="button" id="hider" value="Нажмите, чтобы спрятать текст"/>
 
-<div id="hide">Текст</div>
+<div id="text">Текст</div>
 
 <script>
-document.getElementById('hider').onclick = function() {
-	document.getElementById('hide').style.display = 'none';
-}
+  // в этой задаче неважно, как именно прятать элемент
+  // например через style.display:
+  document.getElementById('hider').onclick = function() {
+  	document.getElementById('text').style.display = 'none';
+  }
 </script>
 </body>
 </html>
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
@@ -7,7 +7,7 @@
 
 <input type="button" id="hider" value="Нажмите, чтобы спрятать текст"/>
 
-<div id="hide">Текст</div>
+<div id="text">Текст</div>
 
 <script>
  /* ваш код */
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/task.md
@@ -2,9 +2,9 @@
 
 [importance 5]
 
-Используя JavaScript, сделайте так, чтобы при клике на кнопку исчезал элемент с `id="hide"`. 
+Используя JavaScript, сделайте так, чтобы при клике на кнопку исчезал элемент с `id="text"`. 
 
 Демо:
-[iframe border=1 src="solution"]
+[iframe border=1 src="solution" height=80]
 
 
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/task.md
@@ -4,5 +4,7 @@
 
 Создайте кнопку, при клике на которую, она будет скрывать сама себя.
 
+[online]
 Как эта:
 <input type="button" onclick="this.style.display='none'" value="Нажми, чтобы меня спрятать"/>
+[/online]
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/2.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/2.html
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
@@ -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
@@ -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
@@ -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 .title::before {
+    content: '▶ ';
+    font-size: 80%;
+    color: green;
   }
 
-  .menu-open .title {
-    background: url(http://js.cx/clipart/arrow-down.png) left center no-repeat;
+  .menu.open .title::before {
+    content: '▼ ';
   }
 
-  .menu-open ul {
+  .menu.open ul {
     display: block;
   }
 
@@ -33,7 +36,7 @@
 <body>
 
 <div id="sweeties" class="menu">
-  <span id="sweeties-title" class="title">Сладости (нажми меня)!</span>
+  <span class="title">Сладости (нажми меня)!</span>
   <ul>
     <li>Торт</li>
     <li>Пончик</li>
@@ -43,14 +46,12 @@
 </div>
 
 <script>
-var titleElem = document.getElementById('sweeties-title');
-
-titleElem.onclick = function() {
-  var menu = this.parentNode;
-  menu.classList.toggle('menu-open');
-};
-
+  var menuElem = document.getElementById('sweeties');
+  var titleElem = menuElem.querySelector('.title');
 
+  titleElem.onclick = function() {
+    menuElem.classList.toggle('open');
+  };
 </script>
 
 </body>
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
@@ -5,17 +5,13 @@
 </head>
 <body>
 
-<img src="http://js.cx/clipart/arrow-down.png">
-<img src="http://js.cx/clipart/arrow-right.png">
-
-Сладости (нажми меня)!
+▶ ▼ Сладости (нажми меня)!
 <ul>
   <li>Торт</li>
   <li>Пончик</li>
   <li>Пирожное</li>
 </ul>
 
 
-
 </body>
-</html>
+</html>
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
@@ -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
@@ -1,26 +1,10 @@
-# Алгоритм решения
-
-<ol>
-<li>Разработать структуру HTML/CSS. Позиционировать кнопку внутри сообщения.</li>
-<li>Найти все кнопки</li>
-<li>Присвоить им обработчики</li>
-<li>Обработчик будет ловить событие на кнопке и удалять соответствующий элемент.</li>
 <ol>
+<li>Изменим HTML/CSS, чтобы кнопка была в нужном месте сообщения. Кнопка -- это тег `<button>`, поэтому понадобится несколько стилей.
 
-# Вёрстка
-
-Исправьте HTML/CSS, чтобы кнопка была в нужном месте сообщения. Кнопку лучше сделать как `div`, а картинка --- будет его `background`. Это более правильно, чем `img`, т.к. в данном случае картинка является *оформлением кнопки*, а оформление должно быть в CSS. 
-
-Расположить кнопку справа можно при помощи `position: relative` для `pane`, а для кнопки `position: absolute + right/top`. Так как `position: absolute` вынимает элемент из потока, то кнопка может перекрыть текст заголовка. Чтобы этого не произошло, можно добавить `padding-right` к заголовку.
-
-Потенциальным преимуществом способа с `position` по сравнению с `float` в данном случае является возможность поместить элемент кнопки в HTML *после текста*, а не до него.
-
-# Обработчики
-
-Для того, чтобы получить кнопку из контейнера, можно найти все `IMG` в нём и выбрать из них кнопку по `className`. На каждую кнопку можно повесить обработчик.
-
-# Решение
+Расположить кнопку справа можно при помощи `position:relative` для `pane`, а для кнопки `position:absolute + right/top`. Так как `position:absolute` вынимает элемент из потока, то кнопка может частично оказаться "сверху" текста заголовка, перекрыв его конец. Чтобы этого не произошло, можно добавить `padding-right` к заголовку.
 
-[edit src="solution"]Решение в песочнице[/edit]
+Если использовать `float:right`, то кнопка никогда не перекроет текст. Это, пожалуй хорошо.
 
-Для поиска элементов `span` с нужным классом в нём используется `getElementsByTagName` с фильтрацией. К сожалению, это единственный способ, доступный в IE 6,7. Если же эти браузеры вам не нужны, то гораздо лучше -- искать элементы при помощи `querySelector` или `getElementsByClassName`.
+С другой стороны, потенциальным преимуществом способа с `position` по сравнению с `float` в данном случае является возможность поместить элемент кнопки в HTML *после текста*, а не до него.</li>
+<li>Для того, чтобы получить кнопку из контейнера, используем `querySelectorAll`. На каждую кнопку повесим обработчик, который будет убирать родителя. Найти родителя можно через `parentNode`.</li>
+</ol>
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
@@ -3,26 +3,6 @@
 <head>
     <link rel="stylesheet" href="messages.css">
     <meta charset="utf-8">
-    <style>
-      .pane {
-        position: relative;
-      }
-
-      .remove-button {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        cursor: pointer;
-        display: block;
-        background: url(http://js.cx/clipart/delete.gif) no-repeat;
-        width: 16px;
-        height: 16px;
-      }
-
-      h3 {
-        padding-right: 20px;
-      }
-    </style>
 </head>
 
 <body>
@@ -31,31 +11,30 @@
   <div class="pane">
     <h3>Лошадь</h3>
     <p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
-    <span class="remove-button"></span>
+    <button class="remove-button">[x]</button>
   </div>
   <div class="pane">
     <h3>Осёл</h3>
     <p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
-    <span class="remove-button"></span>
+    <button class="remove-button">[x]</button>
   </div>
   <div class="pane">
     <h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
     <p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
-    <span class="remove-button"></span>
+    <button class="remove-button">[x]</button>
   </div>
 </div>
 
 
 
 <script>
 
-  var spans = document.getElementById('messages-container').getElementsByTagName('span');
+  var buttons = document.querySelectorAll('#messages-container .remove-button');
 
-  for(var i=0; i<spans.length; i++) {
-    var span = spans[i];
-    if (span.className != 'remove-button') continue;
+  for(var i=0; i<buttons.length; i++) {
+    var button = buttons[i];
 
-    span.onclick = function() {
+    button.onclick = function() {
       var el = this.parentNode;
       el.parentNode.removeChild(el);
     };
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/messages.css b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/messages.css
@@ -2,31 +2,35 @@ body {
 	margin: 10px auto;
 	width: 470px;
 }
+
 h3 {
 	margin: 0;
 	padding-bottom: .3em;
 	padding-right: 20px;
 	font-size: 1.1em;
 }
+
 p {
 	margin: 0;
 	padding: 0 0 .5em;
 }
+
 .pane {
 	background: #edf5e1;
 	padding: 10px 20px 10px;
 	border-top: solid 2px #c4df9b;
-    position: relative;
+  position: relative;
 }
 
 .remove-button {
-	position: absolute;
-	top: 10px;
-	right: 10px;
-	cursor: pointer;
-	display: block;
-	background: url(delete.gif) no-repeat;
-	width: 16px;
-	height: 16px;
+  position: absolute;
+  font-size: 110%;
+  top: 0;
+  color: red;
+  right: 10px;
+  display: block;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
 }
-
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/index.html
@@ -7,7 +7,7 @@
 
 <body>
 
-Картинка для кнопки удаления: <img src="http://js.cx/clipart/delete.gif">
+Кнопка для удаления: <button class="remove-button">[x]</button>
 
 <div>
 	<div class="pane">
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/messages.css b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/messages.css
@@ -2,17 +2,30 @@ body {
 	margin: 10px auto;
 	width: 470px;
 }
+
 h3 {
 	margin: 0;
 	padding-bottom: .3em;
 	font-size: 1.1em;
 }
+
 p {
 	margin: 0;
 	padding: 0 0 .5em;
 }
+
 .pane {
 	background: #edf5e1;
 	padding: 10px 20px 10px;
 	border-top: solid 2px #c4df9b;
 }
+
+.remove-button {
+  font-size: 110%;
+  color: red;
+  right: 10px;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+}
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/task.md
@@ -5,8 +5,8 @@
 Есть список сообщений. Добавьте каждому сообщению по кнопке для его скрытия.
 
 Результат:
-[iframe src="solution"]
+[iframe src="solution" height=450]
 
-Как лучше отобразить кнопку справа-сверху: через `position:absolute` или `float`?
+P.S. Как лучше отобразить кнопку справа-сверху: через `position:absolute` или `float:right`? Почему?
 
 
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.md
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html
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
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
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/style.css b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/style.css
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/task.md
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/article.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/article.md

Original file line number	Diff line number	Diff line change
`@@ -9,8 +9,8 @@ function handler() {`
`9`	`9`	`alert("1");`
`10`	`10`	`}`
`11`	`11`
`12`		`-button.addEventListener("click", handler, false);`
`13`		`-button.removeEventListener("click", handler, false);`
	`12`	`+button.addEventListener("click", handler);`
	`13`	`+button.removeEventListener("click", handler);`
`14`	`14`	```
`15`	`15`
`16`	`16`	Обработчик `button.onclick` сработает независимо и в дополнение к назначенному в `addEventListener`.