renovvations

This commit is contained in:
Ilya Kantor 2015-01-25 18:32:03 +03:00
parent a7c6244292
commit c326ee9cb9
17 changed files with 13 additions and 32 deletions

View file

@ -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, именно поэтому они могут выполнять скрипты на странице.

View file

@ -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]
## Добавление множества узлов ## Добавление множества узлов

View file

@ -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`.

View file

@ -28,5 +28,4 @@ alert( bench(runGet, 10000) ); // вывести время 1000*runGet
Более правильный тест -- это не только запустить поиск, но и получить все элементы, как это делается в реальной жизни. Более правильный тест -- это не только запустить поиск, но и получить все элементы, как это делается в реальной жизни.
[edit src="solution"]Полное решение[/edit]

View file

@ -71,4 +71,3 @@ CSS для меню:
Теперь сделайте JavaScript. Теперь сделайте JavaScript.
[edit src="solution"]Полное решение в песочнице[/edit]

View file

@ -1,4 +1,3 @@
# HTML/CSS
Лента изображений должна быть оформлена как список, согласно принципам семантической вёрстки. Лента изображений должна быть оформлена как список, согласно принципам семантической вёрстки.
Нужно стилизовать его так, чтобы он был длинной лентой, из которой внешний `DIV` вырезает нужную часть для просмотра: Нужно стилизовать его так, чтобы он был длинной лентой, из которой внешний `DIV` вырезает нужную часть для просмотра:
@ -23,5 +22,4 @@
Реализуйте эту структуру, и к ней прикручивайте обработчики, которые меняют `ul.style.marginLeft`. Реализуйте эту структуру, и к ней прикручивайте обработчики, которые меняют `ul.style.marginLeft`.
# Полное решение

View file

@ -106,4 +106,3 @@ tree.onclick = function(event) {
Выделение узлов жирным при наведении делается при помощи CSS-селектора `:hover`. Выделение узлов жирным при наведении делается при помощи CSS-селектора `:hover`.
[edit src="solution"]Полное решение[/edit]

View file

@ -26,4 +26,3 @@ contents.onclick = function(evt) {
В строке `(*)` используется атрибут, а не свойство `href`, чтобы показать в `confirm` именно то, что написано в HTML-атрибуте, так как свойство может отличаться, оно обязано содержать полный валидный адрес. В строке `(*)` используется атрибут, а не свойство `href`, чтобы показать в `confirm` именно то, что написано в HTML-атрибуте, так как свойство может отличаться, оно обязано содержать полный валидный адрес.
[edit src="solution"]Полное решение[/edit].

View file

@ -54,4 +54,3 @@ for(var i=0; i<imgs.length; i++) {
Для списка картинок используется `DIV`. С точки зрения семантики более верный вариант -- список `UL/LI`. Для списка картинок используется `DIV`. С точки зрения семантики более верный вариант -- список `UL/LI`.
[edit src="solution"]Полное решение[/edit]

View file

@ -42,6 +42,5 @@
# Полное решение # Полное решение
[edit src="solution"]Полное решение[/edit]
Это горизонтальный Drag'n'Drop, ограниченный по ширине. Его особенность -- в `position:relative` у переносимого элемента, т.е. координата ставится не абсолютная, а относительно родителя. Это горизонтальный Drag'n'Drop, ограниченный по ширине. Его особенность -- в `position:relative` у переносимого элемента, т.е. координата ставится не абсолютная, а относительно родителя.

View file

@ -49,4 +49,3 @@ function resetInput(input) {
Теперь, если понадобится изменить значение плейсхолдера -- это достаточно сделать в HTML, и не надо трогать JavaScript-код. Теперь, если понадобится изменить значение плейсхолдера -- это достаточно сделать в HTML, и не надо трогать JavaScript-код.
[edit src="solution"]Полное решение[/edit]

View file

@ -94,6 +94,5 @@ function cancel() {
} }
``` ```
[edit src="solution"]Полное решение[/edit] Чтобы проверить полное решение, сфокусируйтесь на правом iframe, пожалуйста.
Чтобы проверить его, сфокусируйтесь на правом iframe, пожалуйста.

View file

@ -78,6 +78,3 @@ elemCoords.top - tooltipElem.outerHeight() - 10
<li>Элемент с подсказкой *позиционируется* при показе, а не при создании? Ведь элемент, на котором стоит подсказка, может менять своё положение.</li> <li>Элемент с подсказкой *позиционируется* при показе, а не при создании? Ведь элемент, на котором стоит подсказка, может менять своё положение.</li>
</ul> </ul>
# Код решения
[edit src="solution"]Полное решение в песочнице[/edit]

View file

@ -1,4 +1,3 @@
# Сопоставление значения и слайдера
Как сопоставить позицию слайдера и значение? Как сопоставить позицию слайдера и значение?
@ -24,5 +23,4 @@ pixelsPerValue = (sliderElem.clientWidth-thumbElem.clientWidth) / max;
value = Math.round( newLeft / pixelsPerValue); value = Math.round( newLeft / pixelsPerValue);
``` ```
# Полное решение

View file

@ -96,4 +96,3 @@ HTML-структура:
Если хочется сделать красивее для двух строк, то можно использовать другой способ центрирования.</li> Если хочется сделать красивее для двух строк, то можно использовать другой способ центрирования.</li>
</ul> </ul>
[edit src="solution"]Полное решение[/edit]

View file

@ -25,4 +25,3 @@ img.onclick = function() {
} }
``` ```
[edit src="solution"]Полное решение[/edit]

View file

@ -33,5 +33,3 @@ img.onclick = function() {
*/!* */!*
} }
``` ```
[edit src="solution"]Полное решение[/edit]