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/4-forms-controls/1-form-elements/1-add-select-option/solution.md
View file

@ -12,12 +12,12 @@
// 1)
var selectedOption = select.options[select.selectedIndex];
alert(selectedOption.value);
alert( selectedOption.value );
// 2)
var newOption = new Option("Classic", "Классика");
select.appendChild(newOption);
// 3)
newOption.selected = true;
</script>

90
2-ui/4-forms-controls/1-form-elements/article.md
View file

@ -11,6 +11,7 @@
Например:
```js
//+ no-beautify
document.forms.my -- форма с именем 'my'
document.forms[0] -- первая форма в документе
```
@ -24,18 +25,18 @@ document.forms[0] -- первая форма в документе
```html
<!--+ run height=40 -->
<body>
<form name="my">
<input name="one" value="1">
<input name="two" value="2">
</form>
<form name="my">
<input name="one" value="1">
<input name="two" value="2">
</form>
<script>
var form = document.forms.my; // можно document.forms[0]
<script>
var form = document.forms.my; // можно document.forms[0]
var elem = form.elements.one; // можно form.elements[0]
var elem = form.elements.one; // можно form.elements[0]
alert(elem.value); // "один"
</script>
alert( elem.value ); // "один"
</script>
</body>
```
@ -67,24 +68,25 @@ alert(elems[0].value); // 10, первый input
```html
<!--+ run height=80 -->
<body>
<form>
<fieldset name="set"><legend>fieldset</legend>
<form>
<fieldset name="set">
<legend>fieldset</legend>
<input name="text" type="text">
</fieldset>
</form>
</fieldset>
</form>
<script>
var form = document.forms[0];
<script>
var form = document.forms[0];
alert( form.elements.text ); // INPUT
alert( form.elements.text ); // INPUT
*!*
alert( form.elements.set.elements.text ); // INPUT
alert( form.elements.set.elements.text ); // INPUT
*/!*
</script>
</script>
</body>
```
Спецификация: [HTML5 Forms](http://www.w3.org/TR/html5/forms.html).
Спецификация: [HTML5 Forms](https://html.spec.whatwg.org/multipage/forms.html).
[warn header="Доступ `form.name` тоже работает, но с особенностями"]
Получить доступ к элементам формы можно не только через `form.elements[name/index]`, но и проще: `form[index/name]`.
@ -95,19 +97,21 @@ alert( form.elements.set.elements.text ); // INPUT
```html
<!--+ run height=40 -->
<form name="myform"> <input name="text"> </form>
<form name="myform">
<input name="text">
</form>
<script>
var form = document.forms.myform;
var form = document.forms.myform;
alert(form.elements.text == form.text); // true, это тот самый INPUT
alert( form.elements.text == form.text ); // true, это тот самый INPUT
form.text.name = "new-name"; // меняем name ему
form.text.name = "new-name"; // меняем name ему
// нет больше элемента с таким именем
alert(form.elements.text); // undefined
// нет больше элемента с таким именем
alert( form.elements.text ); // undefined
alert(form.text); // INPUT (а должно быть undefined!)
alert( form.text ); // INPUT (а должно быть undefined!)
</script>
```
@ -138,7 +142,7 @@ alert(elem.form == form); // true
</body>
```
Познакомиться с другими свойствами элементов можно в спецификации [HTML5 Forms](http://www.w3.org/TR/html5/forms.html).
Познакомиться с другими свойствами элементов можно в спецификации [HTML5 Forms](https://html.spec.whatwg.org/multipage/forms.html).
## Элемент label
@ -157,12 +161,20 @@ alert(elem.form == form); // true
<!--+ autorun -->
<table>
<tr>
<td><label for="agree">Согласен с правилами</label></td>
<td><input id="agree" type="checkbox"></td>
<td>
<label for="agree">Согласен с правилами</label>
</td>
<td>
<input id="agree" type="checkbox">
</td>
</tr>
<tr>
<td><label for="not-a-robot">Я не робот</label></td>
<td><input id="not-a-robot" type="checkbox"></td>
<td>
<label for="not-a-robot">Я не робот</label>
</td>
<td>
<input id="not-a-robot" type="checkbox">
</td>
</tr>
</table>
```
@ -171,7 +183,7 @@ alert(elem.form == form); // true
<li>Завернуть элемент в `label`. В этом случае можно обойтись без дополнительных атрибутов:
```html
<!--+ autorun -->
<!--+ autorun no-beautify -->
<label>Кликни меня <input type="checkbox"></label>
```
@ -196,8 +208,8 @@ textarea.value = "Новый текст";
**Текущее "отмеченное" состояние для `checkbox` и `radio` находится в свойстве `checked` (`true/false`).**
```js
if (input.checked) {
alert("Чекбокс выбран");
if (input.checked) {
alert( "Чекбокс выбран" );
}
```
@ -242,13 +254,13 @@ for (var i=0; i<select.options.length; i++) {
</script>
```
Спецификация: <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980">HTMLSelectElement</a>.
Спецификация: [the select element](https://html.spec.whatwg.org/multipage/forms.html#the-select-element).
[smart header="`new Option`"]
В стандарте [the Option Element](http://dev.w3.org/html5/spec/the-option-element.html#the-option-element) есть любопытный короткий синтаксис для создания элемента с тегом `option`:
В стандарте [the option element](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) есть любопытный короткий синтаксис для создания элемента с тегом `option`:
```js
option = new Option( text, value, defaultSelected, selected);
option = new Option(text, value, defaultSelected, selected);
```
Параметры:
@ -261,7 +273,7 @@ option = new Option( text, value, defaultSelected, selected);
Его можно использовать вместо `document.createElement('option')`, например:
```js
var option = new Option("Текст", "value");
var option = new Option("Текст", "value");
// создаст <option value="value">Текст</option>
```
@ -275,7 +287,7 @@ var option = new Option("Текст", "value", true, true);
[smart header="Дополнительные свойства `option`"]
У элементов `option` также есть особые свойства, которые могут оказаться полезными (см. [The Option Element](http://dev.w3.org/html5/spec/the-option-element.html#the-option-element)):
У элементов `option` также есть особые свойства, которые могут оказаться полезными (см. [the option element](https://html.spec.whatwg.org/multipage/forms.html#the-option-element)):
<dl>
<dt>`selected`</dt>

34
2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.md
View file

@ -5,7 +5,8 @@
Так как мы преобразуем `<div>` в `<textarea>` и обратно, нам нужно сделать их практически одинаковыми с виду:
```css
#view, #area {
#view,
#area {
height: 150px;
width: 400px;
font-family: arial;
@ -18,10 +19,11 @@
Для того, чтобы сделать размер `#area` таким же, как и `#view`, добавим поля(padding):
```css
#view {
#view {
/* padding + border = 3px */
padding: 2px;
border:1px solid black;
padding: 2px;
border: 1px solid black;
}
```
@ -29,16 +31,16 @@ CSS для `#area` заменяет поля границами:
```css
#area {
border: 3px groove blue;
border: 3px groove blue;
padding: 0px;
display:none;
display: none;
}
```
По умолчанию, текстовое поле скрыто. Кстати, этот код убирает дополнительную рамку в ряде браузеров, которая появляется вокруг поля, когда на него попадает фокус:
```css
/*+ no-beautify */
#area:focus {
outline: none; /* убирает рамку при фокусе */
}
@ -77,21 +79,21 @@ document.onkeydown = function(e) {
```js
function edit() {
view.style.display = 'none';
area.value = view.innerHTML;
area.style.display = 'block';
area.focus();
view.style.display = 'none';
area.value = view.innerHTML;
area.style.display = 'block';
area.focus();
}
function save() {
area.style.display = 'none';
view.innerHTML = area.value;
view.style.display = 'block';
area.style.display = 'none';
view.innerHTML = area.value;
view.style.display = 'block';
}
function cancel() {
area.style.display = 'none';
view.style.display = 'block';
area.style.display = 'none';
view.style.display = 'block';
}
```

18
2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.md
View file

@ -46,8 +46,8 @@ document.onkeypress = function(e) {
Например, когда пользователь открыл страницу, мы не знаем, включен ли [key CapsLock]. Затем, мы получаем событие `keydown` для [key CapsLock]. Но мы все равно не знаем его состояния, был ли [key CapsLock] *выключен* или, наоборот, включен.
```js
if (navigator.platform.substr(0,3) != 'Mac') { // событие для CapsLock глючит под Mac
document.onkeydown = function(e) {
if (navigator.platform.substr(0, 3) != 'Mac') { // событие для CapsLock глючит под Mac
document.onkeydown = function(e) {
if (e.keyCode == 20 && capsLockEnabled !== null) {
capsLockEnabled = !capsLockEnabled;
}
@ -73,18 +73,18 @@ if (navigator.platform.substr(0,3) != 'Mac') { // событие для CapsLock
Код проверки поля:
```html
<input type="text" onkeyup="checkCapsWarning(event)" onfocus="checkCapsWarning(event)" onblur="removeCapsWarning()"/>
<input type="text" onkeyup="checkCapsWarning(event)" onfocus="checkCapsWarning(event)" onblur="removeCapsWarning()" />
<div style="display:none;color:red" id="caps">Внимание: нажат CapsLock!</div>
<script>
function checkCapsWarning() {
document.getElementById('caps').style.display = capsLockEnabled ? 'block' : 'none';
}
function checkCapsWarning() {
document.getElementById('caps').style.display = capsLockEnabled ? 'block' : 'none';
}
function removeCapsWarning() {
document.getElementById('caps').style.display = 'none';
}
function removeCapsWarning() {
document.getElementById('caps').style.display = 'none';
}
</script>
```

76
2-ui/4-forms-controls/2-focus-blur/article.md
View file

@ -57,23 +57,32 @@
```html
<!--+ run autorun height=80 -->
<style> .error { background: red; } </style>
<style>
.error {
background: red;
}
</style>
<div>Возраст: <input type="text" id="age"></div>
<div>Имя: <input type="text"></div>
<div>Возраст:
<input type="text" id="age">
</div>
<div>Имя:
<input type="text">
</div>
<script>
age.onblur = function() {
if (isNaN(this.value)) { // введено не число
// показать ошибку
this.classList.add("error");
age.focus();*!*
} else {
this.classList.remove("error");
}
};
age.onblur = function() {
if (isNaN(this.value)) { // введено не число
// показать ошибку
this.classList.add("error");
*!*
age.focus();
*/!*
} else {
this.classList.remove("error");
}
};
</script>
```
@ -117,7 +126,7 @@ age.onblur = function() {
```html
<input type="text" name="search">
<script>
<script>
document.getElementsByName('search')[0].focus();
</script>
```
@ -175,7 +184,7 @@ age.onblur = function() {
В примере ниже есть список элементов. Кликните на любой из них и нажмите "tab".
```html
<!--+ autorun -->
<!--+ autorun no-beautify -->
Кликните на первый элемент списка и нажмите Tab. Внимание! Дальнейшие нажатия Tab могут вывести за границы iframe'а с примером.
<ul>
<li tabindex="1">Один</li>
@ -225,7 +234,11 @@ age.onblur = function() {
<input type="text" name="surname" value="Ваша фамилия">
</form>
<style> .focused { outline: 1px solid red; } </style>
<style>
.focused {
outline: 1px solid red;
}
</style>
<script>
*!*
@ -262,22 +275,29 @@ age.onblur = function() {
<input type="text" name="surname" value="Ваша фамилия">
</form>
<style>
.focused { outline: 1px solid red; }
.focused {
outline: 1px solid red;
}
</style>
<script>
function onFormFocus() { this.className = 'focused'; }
function onFormBlur() { this.className = ''; }
function onFormFocus() {
this.className = 'focused';
}
var form = document.forms.form;
function onFormBlur() {
this.className = '';
}
if (form.addEventListener) {
form.addEventListener('focus', onFormFocus, true);
form.addEventListener('blur', onFormBlur, true);
} else { // IE8-
form.onfocusin = onFormFocus;
form.onfocusout = onFormBlur;
}
var form = document.forms.form;
if (form.addEventListener) {
form.addEventListener('focus', onFormFocus, true);
form.addEventListener('blur', onFormBlur, true);
} else { // IE8-
form.onfocusin = onFormFocus;
form.onfocusout = onFormBlur;
}
</script>
```

91
2-ui/4-forms-controls/3-events-change/article.md
View file

@ -36,11 +36,11 @@
<!--+ autorun height=40 -->
<input type="text"> oninput: <span id="result"></span>
<script>
var input = document.body.children[0];
var input = document.body.children[0];
input.oninput = function() {
document.getElementById('result').innerHTML = input.value;
};
input.oninput = function() {
document.getElementById('result').innerHTML = input.value;
};
</script>
```
@ -58,24 +58,24 @@ input.oninput = function() {
<!--+ autorun height=40 -->
<input type="checkbox"> Чекбокс с "onchange", работающим везде одинаково
<script>
var checkbox = document.body.children[0];
var checkbox = document.body.children[0];
if("onpropertychange" in checkbox) {
// старый IE
if ("onpropertychange" in checkbox) {
// старый IE
*!*
checkbox.onpropertychange = function() {
// проверим имя изменённого свойства
if (event.propertyName == "checked") {
alert(checkbox.checked);
}
};
checkbox.onpropertychange = function() {
// проверим имя изменённого свойства
if (event.propertyName == "checked") {
alert( checkbox.checked );
}
};
*/!*
} else {
// остальные браузеры
checkbox.onchange = function() {
alert(checkbox.checked);
};
}
} else {
// остальные браузеры
checkbox.onchange = function() {
alert( checkbox.checked );
};
}
</script>
```
@ -127,18 +127,17 @@ if("onpropertychange" in checkbox) {
<!--+ autorun run height=60 -->
<input type="text" id="sms"> символов: <span id="result"></span>
<script>
function showCount() {
result.innerHTML = sms.value.length;
}
function showCount() {
result.innerHTML = sms.value.length;
}
sms.onkeyup = sms.oninput = showCount;
sms.onpropertychange = function() {
if (event.propertyName == "value") showCount();
}
sms.oncut = function() {
setTimeout(showCount, 0); // на момент oncut значение еще старое
};
sms.onkeyup = sms.oninput = showCount;
sms.onpropertychange = function() {
if (event.propertyName == "value") showCount();
}
sms.oncut = function() {
setTimeout(showCount, 0); // на момент oncut значение еще старое
};
</script>
```
@ -153,26 +152,26 @@ sms.oncut = function() {
<input type="text" id="sms"> символов: <span id="result"></span>
<script>
var timerId;
var timerId;
sms.onfocus = function() {
sms.onfocus = function() {
var lastValue = sms.value;
timerId = setInterval(function() {
if (sms.value != lastValue) {
showCount();
lastValue = sms.value;
}
}, 20);
};
var lastValue = sms.value;
timerId = setInterval(function() {
if (sms.value != lastValue) {
showCount();
lastValue = sms.value;
}
}, 20);
};
sms.onblur = function() {
clearInterval(timerId);
};
sms.onblur = function() {
clearInterval(timerId);
};
function showCount() {
result.innerHTML = sms.value.length;
}
function showCount() {
result.innerHTML = sms.value.length;
}
</script>
```

2
2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
View file

@ -22,7 +22,7 @@
```js
showPrompt("Введите что-нибудь<br>... умное :)", function(value) {
alert(value);
alert( value );
});
```

2
2-ui/4-forms-controls/4-forms-submit/article.md
View file

@ -18,7 +18,7 @@
Например, в таком HTML оба способа выведут `alert`, форма не будет отправлена:
```html
<!--+ autorun height=80 -->
<!--+ autorun height=80 no-beautify -->
<form onsubmit="alert('submit!');return false">
Первый: Enter в текстовом поле <input type="text" value="Текст"><br>
Второй: Нажать на "Отправить": <input type="submit" value="Отправить">