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

minor renovations, beautify round 2 (final)

Browse source
This commit is contained in:
Ilya Kantor 2015-03-12 10:26:02 +03:00
parent fad6615c42
commit 8410ce6421
212 changed files with 1981 additions and 1717 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,12 +8,12 @@
<script>
var div = document.getElementById('widget');
var widgetName = div.getAttribute('data-widget-name');
// или так, кроме IE10-
var widgetName = div.dataset.widgetName;
alert( widgetName ); // "menu"
alert( widgetName ); // "menu"
</script>
</body>
```

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

@ -13,9 +13,11 @@
```html
<body>
<div id="widget" data-widget-name="menu">Выберите жанр</div>
<div id="widget" data-widget-name="menu">Выберите жанр</div>
<script>/* ... */</script>
<script>
/* ... */
</script>
</body>
```

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

@ -23,19 +23,19 @@
```js
var links = document.querySelectorAll('a');
for(var i=0; i<links.length; i++) {
for (var i = 0; i < links.length; i++) {
var a = links[i];
var a = links[i];
var href = a.getAttribute('href');
var href = a.getAttribute('href');
if (!href) continue; // нет атрибута
if (!href) continue; // нет атрибута
if (href.indexOf('://') == -1) continue; // без протокола
if (href.indexOf('://') == -1) continue; // без протокола
if (href.indexOf('http://internal.com') === 0) continue; // внутренняя
if (href.indexOf('http://internal.com') === 0) continue; // внутренняя
a.classList.add('external');
a.classList.add('external');
}
```
@ -47,7 +47,7 @@ for(var i=0; i<links.length; i++) {
var css = 'a[href*="://"]:not([href^="http://internal.com"])';
var links = document.querySelectorAll(css);
for(var i=0; i<links.length; i++) {
for (var i = 0; i < links.length; i++) {
links[i].classList.add('external');
}
```

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

@ -9,17 +9,19 @@
```html
<!--+ run -->
<style>
.external { background-color: yellow }
.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>
<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>
```

54
2-ui/1-document/9-attributes-and-custom-properties/article.md
View file

@ -19,22 +19,22 @@
```js
//+ run
document.body.myData = {
document.body.myData = {
name: 'Петр',
familyName: 'Петрович'
};
alert(document.body.myData.name); // Петр
alert( document.body.myData.name ); // Петр
```
Можно добавить и новую функцию:
```js
//+ run
document.body.sayHi = function() {
alert(this.nodeName);
document.body.sayHi = function() {
alert( this.nodeName );
}
document.body.sayHi(); // BODY, выполнилась с правильным this
```
@ -91,13 +91,13 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
<script>
alert( elem.getAttribute('About') ); // (1) 'Elephant', атрибут получен
elem.setAttribute('Test', 123); // (2) атрибут Test установлен
alert( document.body.innerHTML ); // (3) в HTML видны все атрибуты!
var attrs = elem.attributes; // (4) можно получить коллекцию атрибутов
for (var i=0; i<attrs.length; i++) {
alert(attrs[i].name + " = " + attrs[i].value);
elem.setAttribute('Test', 123); // (2) атрибут Test установлен
alert( document.body.innerHTML ); // (3) в HTML видны все атрибуты!
var attrs = elem.attributes; // (4) можно получить коллекцию атрибутов
for (var i = 0; i < attrs.length; i++) {
alert( attrs[i].name + " = " + attrs[i].value );
}
</script>
</body>
@ -162,7 +162,7 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
// работа с checked через атрибут
*/!*
alert( input.getAttribute('checked') ); // пустая строка
input.removeAttribute('checked'); // снять галочку
input.removeAttribute('checked'); // снять галочку
*!*
// работа с checked через свойство
@ -189,7 +189,7 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
*!*
input.value = 'new'; // поменяли свойство
alert(input.getAttribute('value')); // 'markup', не изменилось!
alert( input.getAttribute('value') ); // 'markup', не изменилось!
*/!*
</script>
</body>
@ -232,10 +232,10 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
<body class="main page">
<script>
// прочитать класс элемента
alert( document.body.className ); // main page
alert( document.body.className ); // main page
// поменять класс элемента
document.body.className="class1 class2";
document.body.className = "class1 class2";
</script>
</body>
```
@ -269,16 +269,16 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
<script>
var classList = document.body.classList;
classList.remove('page'); // удалить класс
classList.add('post'); // добавить класс
classList.remove('page'); // удалить класс
classList.add('post'); // добавить класс
for(var i=0; i<classList.length; i++) { // перечислить классы
alert(classList[i]); // main, затем post
}
for (var i = 0; i < classList.length; i++) { // перечислить классы
alert( classList[i] ); // main, затем post
}
alert( classList.contains('post') ); // проверить наличие класса
alert( classList.contains('post') ); // проверить наличие класса
alert( document.body.className ); // main post, тоже работает
alert( document.body.className ); // main post, тоже работает
</script>
</body>
```
@ -331,9 +331,11 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
.order[order-state="new"] {
color: green;
}
.order[order-state="pending"] {
color: blue;
}
.order[order-state="canceled"] {
color: red;
}
@ -364,7 +366,7 @@ div.setAttribute('order-state', 'canceled');
Для классов -- нужно знать, какой класс у заказа сейчас. И тогда мы можем снять старый класс, и поставить новый:
```js
div.classList.remove('order-state-new');
div.classList.remove('order-state-new');
div.classList.add('order-state-canceled');
```
@ -417,7 +419,7 @@ div.classList.add('order-state-canceled');
Этот атрибут должен прятать элемент, действие весьма простое, для его поддержки в HTML достаточно такого CSS:
```html
<!--+ run height="80" -->
<!--+ run height="80" no-beautify -->
<style>
*!*
[hidden] { display: none }
@ -441,7 +443,7 @@ div.classList.add('order-state-canceled');
```html
<!--+ run height="80" -->
<!--+ run height="80" no-beautify -->
<style>
*!*
[hidden] { display: none }
@ -485,7 +487,7 @@ div.classList.add('order-state-canceled');
//+ run
document.body.setAttribute('my', 123);
alert( document.body.my ); // 123 в IE8-
alert( document.body.my ); // 123 в IE8-
```
При этом даже тип данных не меняется. Атрибут не становится строкой, как ему положено.