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

up

Browse source
This commit is contained in:
Ilya Kantor 2017-03-21 14:41:49 +03:00
parent 4ae129054e
commit ab9ab64bd5
476 changed files with 3370 additions and 532 deletions
Download patch file Download diff file Expand all files Collapse all files

36
2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md Normal file
View file

@ -0,0 +1,36 @@
First, we need to find all external references.
There are two ways.
The first is to find all links using `document.querySelectorAll('a')` and then filter out what we need:
```js
let links = document.querySelectorAll('a');
for (let link of links) {
*!*
let href = link.getAttribute('href');
*/!*
if (!href) continue; // no attribute
if (!href.includes('://')) continue; // no protocol
if (href.startsWith('http://internal.com')) continue; // internal
link.style.color = 'orange';
}
```
Please note: we use `link.getAttribute('href')`. Not `link.href`, because we need the value from HTML.
...Another, simpler way would be to add the checks to CSS selector:
```js
// look for all links that have :// in href
// but href doesn't start with http://internal.com
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);
links.forEach(link => link.style.color = 'orange');
```

23
2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE HTML>
<html>
<body>
<a name="list">The 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>
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);
links.forEach(link => link.style.color = 'orange');
</script>
</body>
</html>

20
2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/source.view/index.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<html>
<body>
<a name="list">The 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>
// ...your code...
</script>
</body>
</html>

35
2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md Normal file
View file

@ -0,0 +1,35 @@
importance: 3
---
# Make external links orange
Make all external links orange by altering their `style` property.
A link is external if:
- It's `href` has `://` in it
- But doesn't start with `http://internal.com`.
Example:
```html run
<a name="list">the 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>
// setting style for a single link
let link = document.querySelector('a');
link.style.color = 'orange';
</script>
```
The result should be:
[iframe border=1 height=180 src="solution"]