jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-02-08 10:03:24 +03:00
parent e1d099ae97
commit 53d9080aad
50 changed files with 653 additions and 471 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,56 @@
Сначала можно найти ссылки, например, при помощи `document.querySelectorAll('a')`, а затем выбрать из них нужные.
Затем определимся -- что использовать для проверки адреса ссылки: свойство `href` или атрибут `getAttribute('href')`?
Различие между ними заключается в том, что свойство будет содержать полный путь ссылки, а атрибут -- значение, указанное в HTML.
Если открыть страницу локально, на диске, то для `<a href="/tutorial">` значения будут такими:
<ul>
<li>`a.getAttribute('href') == "/tutorial"`.</li>
<li>`a.href == "file:///tutorial"` (возможно, в пути будет также буква диска).</li>
</ul>
Здесь нужен именно атрибут, хотя бы потому, что в свойстве все ссылки уже с хостом и протоколом, а нам надо понять, был ли протокол в `href` или нет.
Правила определения:
<ul>
<li>Cсылки без `href` и без протокола `://` являются заведомо внутренними.</li>
<li>Там, где протокол есть -- проверяем, начинается ли адрес с `http://internal.com`.</li>
</ul>
Итого, код может быть таким:
```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');
}
```

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

@ -0,0 +1,36 @@
<!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>

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

@ -0,0 +1,29 @@
# Поставьте класс ссылкам
[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"]