renovvations
This commit is contained in:
parent
a7c6244292
commit
c326ee9cb9
17 changed files with 13 additions and 32 deletions
|
@ -22,14 +22,14 @@
|
||||||
JavaScript может выполняться не только в браузере, а где угодно, нужна лишь специальная программа -- [интерпретатор](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D1%80%D0%B5%D1%82%D0%B0%D1%82%D0%BE%D1%80). Процесс выполнения скрипта называют "интерпретацией".
|
JavaScript может выполняться не только в браузере, а где угодно, нужна лишь специальная программа -- [интерпретатор](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D1%80%D0%B5%D1%82%D0%B0%D1%82%D0%BE%D1%80). Процесс выполнения скрипта называют "интерпретацией".
|
||||||
|
|
||||||
[smart header="Компиляция и интерпретация, для программистов"]
|
[smart header="Компиляция и интерпретация, для программистов"]
|
||||||
Строго говоря, для выполнения программ существуют "компиляторы" и "интерпретаторы".
|
Для выполнения произвольных программ, не существуют два способа: "компиляция" и "интерпретация".
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>*Компиляторы* преобразуют программу в машинный код. Этот машинный код затем распространяется и запускается.</li>
|
<li>*Компиляция* -- это когда исходный код программы, при помощи специального инструмента, другой программы, которая называется "компилятор", преобразуется в другой язык, как правило -- в машинный код. Этот машинный код затем распространяется и запускается. При этом исходный код программы остаётся у разработчика.</li>
|
||||||
<li>*Интерпретаторы*, в частности, встроенный JS-интерпретатор браузера -- получают программу в виде исходного кода. При этом распространяется именно сам исходный код (скрипт).</li>
|
<li>*Интерпретаторы*, в частности, встроенный JS-интерпретатор браузера -- получают программу в виде исходного кода и выполняют "как есть". При этом распространяется именно сам исходный код (скрипт).</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
Современные интерпретаторы перед выполнением преобразуют JavaScript в машинный код или близко к нему, а уже затем выполняют. Поэтому JavaScript в них работает очень быстро.
|
Современные интерпретаторы перед выполнением преобразуют JavaScript в машинный код или близко к нему, оптимизируют, а уже затем выполняют. И даже во время выполнения стараются оптимизировать. Поэтому JavaScript работает очень быстро.
|
||||||
[/smart]
|
[/smart]
|
||||||
|
|
||||||
Во все основные браузеры встроен интерпретатор JavaScript, именно поэтому они могут выполнять скрипты на странице.
|
Во все основные браузеры встроен интерпретатор JavaScript, именно поэтому они могут выполнять скрипты на странице.
|
||||||
|
|
|
@ -54,7 +54,7 @@ document.body.appendChild(ul); // затем в документ
|
||||||
|
|
||||||
<table id="bench-table"></table>
|
<table id="bench-table"></table>
|
||||||
|
|
||||||
Код для тестов находится в файле [](insert-bench.js).
|
Код для тестов находится в файле [insert-bench.js](insert-bench.js).
|
||||||
|
|
||||||
[/online]
|
[/online]
|
||||||
## Добавление множества узлов
|
## Добавление множества узлов
|
||||||
|
|
|
@ -2,11 +2,11 @@
|
||||||
|
|
||||||
Эта глава -- о свойствах стиля, получении о них информации и изменении при помощи JavaScript.
|
Эта глава -- о свойствах стиля, получении о них информации и изменении при помощи JavaScript.
|
||||||
|
|
||||||
Перед прочтением убедитесь, что хорошо знакомы с <a href="http://www.w3.org/TR/CSS2/box.html">блочной моделью CSS</a> и понимаете, что такое `padding`, `margin`, `border`.
|
Перед прочтением убедитесь, что хорошо знакомы с [блочной моделью CSS](http://www.w3.org/TR/CSS2/box.html) и понимаете, что такое `padding`, `margin`, `border`.
|
||||||
|
|
||||||
[cut]
|
[cut]
|
||||||
|
|
||||||
## Объект стилей style
|
## Стили элемента: свойство style
|
||||||
|
|
||||||
Объект `element.style` дает доступ к стилю элемента на чтение и запись.
|
Объект `element.style` дает доступ к стилю элемента на чтение и запись.
|
||||||
|
|
||||||
|
@ -97,7 +97,7 @@ setTimeout(function() {
|
||||||
[/warn]
|
[/warn]
|
||||||
|
|
||||||
|
|
||||||
## Строка стилей style.cssText
|
### Строка стилей style.cssText
|
||||||
|
|
||||||
Свойство `style` является специальным объектом, ему нельзя присваивать строку.
|
Свойство `style` является специальным объектом, ему нельзя присваивать строку.
|
||||||
|
|
||||||
|
@ -135,7 +135,7 @@ setTimeout(function() {
|
||||||
|
|
||||||
Свойство `style.cssText` используют, например, для новосозданных элементов, когда старых стилей точно нет.
|
Свойство `style.cssText` используют, например, для новосозданных элементов, когда старых стилей точно нет.
|
||||||
|
|
||||||
## Чтение стиля из style
|
### Чтение стиля из style
|
||||||
|
|
||||||
Записать в стиль очень просто. А как прочитать?
|
Записать в стиль очень просто. А как прочитать?
|
||||||
|
|
||||||
|
@ -162,7 +162,7 @@ setTimeout(function() {
|
||||||
</body>
|
</body>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Стиль из getComputedStyle
|
## Полный стиль из getComputedStyle
|
||||||
|
|
||||||
Итак, свойство `style` дает доступ только к той информации, которая хранится в `elem.style`.
|
Итак, свойство `style` дает доступ только к той информации, которая хранится в `elem.style`.
|
||||||
|
|
||||||
|
|
|
@ -28,5 +28,4 @@ alert( bench(runGet, 10000) ); // вывести время 1000*runGet
|
||||||
|
|
||||||
Более правильный тест -- это не только запустить поиск, но и получить все элементы, как это делается в реальной жизни.
|
Более правильный тест -- это не только запустить поиск, но и получить все элементы, как это делается в реальной жизни.
|
||||||
|
|
||||||
[edit src="solution"]Полное решение[/edit]
|
|
||||||
|
|
||||||
|
|
|
@ -71,4 +71,3 @@ CSS для меню:
|
||||||
|
|
||||||
Теперь сделайте JavaScript.
|
Теперь сделайте JavaScript.
|
||||||
|
|
||||||
[edit src="solution"]Полное решение в песочнице[/edit]
|
|
|
@ -1,4 +1,3 @@
|
||||||
# HTML/CSS
|
|
||||||
Лента изображений должна быть оформлена как список, согласно принципам семантической вёрстки.
|
Лента изображений должна быть оформлена как список, согласно принципам семантической вёрстки.
|
||||||
|
|
||||||
Нужно стилизовать его так, чтобы он был длинной лентой, из которой внешний `DIV` вырезает нужную часть для просмотра:
|
Нужно стилизовать его так, чтобы он был длинной лентой, из которой внешний `DIV` вырезает нужную часть для просмотра:
|
||||||
|
@ -23,5 +22,4 @@
|
||||||
|
|
||||||
Реализуйте эту структуру, и к ней прикручивайте обработчики, которые меняют `ul.style.marginLeft`.
|
Реализуйте эту структуру, и к ней прикручивайте обработчики, которые меняют `ul.style.marginLeft`.
|
||||||
|
|
||||||
# Полное решение
|
|
||||||
|
|
||||||
|
|
|
@ -106,4 +106,3 @@ tree.onclick = function(event) {
|
||||||
|
|
||||||
Выделение узлов жирным при наведении делается при помощи CSS-селектора `:hover`.
|
Выделение узлов жирным при наведении делается при помощи CSS-селектора `:hover`.
|
||||||
|
|
||||||
[edit src="solution"]Полное решение[/edit]
|
|
|
@ -26,4 +26,3 @@ contents.onclick = function(evt) {
|
||||||
|
|
||||||
В строке `(*)` используется атрибут, а не свойство `href`, чтобы показать в `confirm` именно то, что написано в HTML-атрибуте, так как свойство может отличаться, оно обязано содержать полный валидный адрес.
|
В строке `(*)` используется атрибут, а не свойство `href`, чтобы показать в `confirm` именно то, что написано в HTML-атрибуте, так как свойство может отличаться, оно обязано содержать полный валидный адрес.
|
||||||
|
|
||||||
[edit src="solution"]Полное решение[/edit].
|
|
||||||
|
|
|
@ -54,4 +54,3 @@ for(var i=0; i<imgs.length; i++) {
|
||||||
|
|
||||||
Для списка картинок используется `DIV`. С точки зрения семантики более верный вариант -- список `UL/LI`.
|
Для списка картинок используется `DIV`. С точки зрения семантики более верный вариант -- список `UL/LI`.
|
||||||
|
|
||||||
[edit src="solution"]Полное решение[/edit]
|
|
|
@ -42,6 +42,5 @@
|
||||||
|
|
||||||
# Полное решение
|
# Полное решение
|
||||||
|
|
||||||
[edit src="solution"]Полное решение[/edit]
|
|
||||||
|
|
||||||
Это горизонтальный Drag'n'Drop, ограниченный по ширине. Его особенность -- в `position:relative` у переносимого элемента, т.е. координата ставится не абсолютная, а относительно родителя.
|
Это горизонтальный Drag'n'Drop, ограниченный по ширине. Его особенность -- в `position:relative` у переносимого элемента, т.е. координата ставится не абсолютная, а относительно родителя.
|
|
@ -49,4 +49,3 @@ function resetInput(input) {
|
||||||
|
|
||||||
Теперь, если понадобится изменить значение плейсхолдера -- это достаточно сделать в HTML, и не надо трогать JavaScript-код.
|
Теперь, если понадобится изменить значение плейсхолдера -- это достаточно сделать в HTML, и не надо трогать JavaScript-код.
|
||||||
|
|
||||||
[edit src="solution"]Полное решение[/edit]
|
|
|
@ -94,6 +94,5 @@ function cancel() {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
[edit src="solution"]Полное решение[/edit]
|
Чтобы проверить полное решение, сфокусируйтесь на правом iframe, пожалуйста.
|
||||||
|
|
||||||
Чтобы проверить его, сфокусируйтесь на правом iframe, пожалуйста.
|
|
|
@ -78,6 +78,3 @@ elemCoords.top - tooltipElem.outerHeight() - 10
|
||||||
<li>Элемент с подсказкой *позиционируется* при показе, а не при создании? Ведь элемент, на котором стоит подсказка, может менять своё положение.</li>
|
<li>Элемент с подсказкой *позиционируется* при показе, а не при создании? Ведь элемент, на котором стоит подсказка, может менять своё положение.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
# Код решения
|
|
||||||
|
|
||||||
[edit src="solution"]Полное решение в песочнице[/edit]
|
|
|
@ -1,4 +1,3 @@
|
||||||
# Сопоставление значения и слайдера
|
|
||||||
|
|
||||||
Как сопоставить позицию слайдера и значение?
|
Как сопоставить позицию слайдера и значение?
|
||||||
|
|
||||||
|
@ -24,5 +23,4 @@ pixelsPerValue = (sliderElem.clientWidth-thumbElem.clientWidth) / max;
|
||||||
value = Math.round( newLeft / pixelsPerValue);
|
value = Math.round( newLeft / pixelsPerValue);
|
||||||
```
|
```
|
||||||
|
|
||||||
# Полное решение
|
|
||||||
|
|
||||||
|
|
|
@ -96,4 +96,3 @@ HTML-структура:
|
||||||
Если хочется сделать красивее для двух строк, то можно использовать другой способ центрирования.</li>
|
Если хочется сделать красивее для двух строк, то можно использовать другой способ центрирования.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
[edit src="solution"]Полное решение[/edit]
|
|
|
@ -25,4 +25,3 @@ img.onclick = function() {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
[edit src="solution"]Полное решение[/edit]
|
|
|
@ -33,5 +33,3 @@ img.onclick = function() {
|
||||||
*/!*
|
*/!*
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
[edit src="solution"]Полное решение[/edit]
|
|
Loading…
Add table
Add a link
Reference in a new issue