up

Author: iliakan

2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/solution.md

@@ -0,0 +1,19 @@
+
+
+```html run height=100
+<body>
+
+  <div id="widget" data-widget-name="menu">Выберите жанр</div>
+
+  <script>
+    var div = document.getElementById('widget');
+
+    var widgetName = div.getAttribute('data-widget-name');
+    // или так, кроме IE10-
+    var widgetName = div.dataset.widgetName;
+
+    alert( widgetName ); // "menu"
+  </script>
+</body>
+```
+

2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/solution.view/index.html

@@ -0,0 +1,14 @@
+<!DOCTYLE HTML>
+<html>
+
+<body>
+
+  <div id="widget" data-widget-name="menu">Выберите жанр</div>
+
+  <script>
+    // ваш код
+  </script>
+
+</body>
+
+</html>

2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/task.md

@@ -0,0 +1,25 @@
+importance: 5
+
+---
+
+# Получите пользовательский атрибут
+
+1. Получите `div` в переменную.
+2. Получите значение атрибута `"data-widget-name"` в переменную.
+3. Выведите его.
+
+Документ:
+
+```html
+<body>
+
+  <div id="widget" data-widget-name="menu">Выберите жанр</div>
+
+  <script>
+    /* ... */
+  </script>
+</body>
+```
+
+[edit src="solution" task]
+

2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.md

@@ -0,0 +1,52 @@
+
+Сначала можно найти ссылки, например, при помощи `document.querySelectorAll('a')`, а затем выбрать из них нужные.
+
+Затем определимся -- что использовать для проверки адреса ссылки: свойство `href` или атрибут `getAttribute('href')`?
+
+Различие между ними заключается в том, что свойство будет содержать полный путь ссылки, а атрибут -- значение, указанное в HTML.
+
+Если открыть страницу локально, на диске, то для `<a href="/tutorial">` значения будут такими:
+
+- `a.getAttribute('href') == "/tutorial"`.
+- `a.href == "file:///tutorial"` (возможно, в пути будет также буква диска).
+
+Здесь нужен именно атрибут, хотя бы потому, что в свойстве все ссылки уже с хостом и протоколом, а нам надо понять, был ли протокол в `href` или нет.
+
+Правила определения:
+
+- Ссылки без `href` и без протокола `://` являются заведомо внутренними.
+- Там, где протокол есть -- проверяем, начинается ли адрес с `http://internal.com`.
+
+Итого, код может быть таким:
+```js
+var links = document.querySelectorAll('a');
+
+for (var i = 0; i < links.length; i++) {
+
+  var a = links[i];
+
+  var href = a.getAttribute('href');
+
+  if (!href) continue; // нет атрибута
+
+  if (href.indexOf('://') == -1) continue; // без протокола
+
+  if (href.indexOf('http://internal.com') === 0) continue; // внутренняя
+
+  a.classList.add('external');
+}
+```
+
+...Но, как это часто бывает, знание CSS может упростить задачу. Удобнее и эффективнее здесь -- указать проверки для `href` прямо в CSS-селекторе:
+
+```js
+// ищем все ссылки, у которых в href есть протокол,
+// но адрес начинается не с http://internal.com
+var css = 'a[href*="://"]:not([href^="http://internal.com"])';
+var links = document.querySelectorAll(css);
+
+for (var i = 0; i < links.length; i++) {
+  links[i].classList.add('external');
+}
+```
+

2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.view/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    .external {
+      background-color: yellow;
+    }
+  </style>
+</head>
+
+<body>
+
+
+  <a name="list">список</a>
+  <ul>
+    <li><a href="http://google.com">http://google.com</a></li>
+    <li><a href="/tutorial">/tutorial.html</a></li>
+    <li><a href="local/path">local/path</a></li>
+    <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
+    <li><a href="http://nodejs.org">http://nodejs.org</a></li>
+    <li><a href="http://internal.com/test">http://internal.com/test</a></li>
+  </ul>
+
+
+  <script>
+    var css = 'a[href*="://"]:not([href^="http://internal.com"])';
+    var links = document.querySelectorAll(css);
+
+    for (var i = 0; i < links.length; i++) {
+      links[i].classList.add('external');
+    }
+  </script>
+
+</body>
+
+</html>

2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/task.md

@@ -0,0 +1,32 @@
+importance: 3
+
+---
+
+# Поставьте класс ссылкам
+
+Сделайте желтыми внешние ссылки, добавив им класс `external`.
+
+Все ссылки без `href`, без протокола и начинающиеся с `http://internal.com` считаются внутренними.
+
+```html run
+<style>
+  .external {
+    background-color: yellow
+  }
+</style>
+
+<a name="list">список</a>
+<ul>
+  <li><a href="http://google.com">http://google.com</a></li>
+  <li><a href="/tutorial">/tutorial.html</a></li>
+  <li><a href="local/path">local/path</a></li>
+  <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
+  <li><a href="http://nodejs.org">http://nodejs.org</a></li>
+  <li><a href="http://internal.com/test">http://internal.com/test</a></li>
+</ul>
+```
+
+Результат:
+
+[iframe border=1 height=180 src="solution"]
+