new version

This commit is contained in:
Ilya Kantor 2014-12-22 13:55:31 +03:00
parent 82bc6ea984
commit a45c3fa386
94 changed files with 54 additions and 94 deletions

View file

@ -91,7 +91,7 @@ alert('Мир');
```
[smart header="Используйте горячие клавиши!"]
В большинстве редакторов комментарий можно поставить горячей клавишей, обычно это <code class="key">Ctrl</code> + <code class="key">/</code> для однострочных и что-то вроде <code class="key">Ctrl</code> + <code class="key">Shift</code> + <code class="key">/</code> -- для многострочных комментариев (нужно выделить блок и нажать сочетание клавиш). Детали смотрите в руководстве по редактору.
В большинстве редакторов комментарий можно поставить горячей клавишей, обычно это [key Ctrl+/] для однострочных и что-то вроде [key Ctrl+Shift+/] -- для многострочных комментариев (нужно выделить блок и нажать сочетание клавиш). Детали смотрите в руководстве по редактору.
[/smart]
[warn header="Вложенные комментарии не поддерживаются!"]

View file

@ -6,6 +6,6 @@
Задача: переписать часы на прототипах. Приватные свойства и методы сделать защищёнными.
[edit src="source" task/]
P.S. Часики тикают в браузерной консоли (надо открыть её, чтобы увидеть).

View file

@ -4,7 +4,7 @@
Есть реализация часиков на прототипах. Создайте класс, расширяющий её, добавляющий поддержку параметра `precision`, который будет задавать частоту тика в `setInterval`. Значение по умолчанию: `1000`.
[edit src="source" task/]
<ul>
<li>Для этого класс `Clock` надо унаследовать. Пишите ваш новый код в файле `extended-clock.js`.</li>

View file

@ -6,5 +6,5 @@
[iframe src="solution"]
[edit src="source" task/]

View file

@ -47,6 +47,6 @@ createTree(container, data); // создаёт
Если получится -- сделайте оба.
[edit src="source" task/]
P.S. Желательно, чтобы в дереве не было лишних элементов, в частности -- пустых `<ul></ul>` на нижнем уровне.

View file

@ -16,4 +16,4 @@
P.S. Достаточно сгенерировать календарь, кликабельным его делать не нужно.
[edit src="source" task/]

View file

@ -6,4 +6,3 @@
[iframe src="solution"]
[edit src="source" task/]

View file

@ -30,4 +30,4 @@
**Проверьте себя: вспомните, что означает каждое свойство. В чём состоит эффект его появления здесь?**
[edit src="source" task/]

View file

@ -1 +0,0 @@
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -37,5 +37,5 @@ showNotification({
Элемент уведомления должен иметь CSS-класс `notification`, к которому добавляется класс из `options.className`, если есть. Исходный документ содержит готовые стили.
[edit src="source" task/]

View file

@ -44,7 +44,7 @@ div.style.right = div.style.top = 0;
[iframe height=140 src="solution"]
[edit src="source" task/]

View file

@ -16,6 +16,6 @@
<li>Обратите внимание: мяч должен быть строго по центру! Независимо от местоположения поля и ширины его рамки.</li>
</ul>
[edit src="source" task/]
P.S. Да, это можно сделать при помощи чистого CSS, но задача именно на JavaScript. Далее будет развитие темы и более сложные ситуации, когда JavaScript будет уже точно необходим.

View file

@ -9,7 +9,7 @@
Исходный документ (`DIV` -- красный):
[iframe height=220 src="source"]
[edit src="source" task/]
Расширить нужно точно по ширине, чтобы красный `DIV` не вылез за границы `BODY`.

View file

@ -22,4 +22,3 @@
P.S. Код не должен быть как-то привязан к конкретным размерам элемента, стилям, наличию или отсутствию рамки.
[edit src="source" task/]

View file

@ -1 +0,0 @@
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -10,4 +10,4 @@
[iframe src="solution" height="450" border="1" link]
[edit src="source" task/]

View file

@ -1 +0,0 @@
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -1 +0,0 @@
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -13,4 +13,4 @@ td.style.backgroundColor = 'red';
Должно получиться так:
[iframe src="solution"]
[edit src="source" task/]

View file

@ -6,6 +6,6 @@
Напишите код, который измеряет разницу между ними.
[edit src="source" task/]
*P.S. В задаче есть подвох, все не так просто. Если разница больше 10 раз -- вы решили ее неверно. Тогда подумайте, почему такое может быть.*

View file

@ -7,4 +7,4 @@
Демо:
[iframe border=1 src="solution"]
[edit src="source" task/]

View file

@ -8,4 +8,3 @@
HTML/CSS исходного документа, возможно, понадобится изменить.
[edit src="source" task/]

View file

@ -9,4 +9,4 @@
Как лучше отобразить кнопку справа-сверху: через `position:absolute` или `float`?
[edit src="source" task/]

View file

@ -25,4 +25,3 @@
# Полное решение
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -10,4 +10,3 @@
В этой задаче разработка HTML/CSS-структуры составляет 90% решения.
[edit src="source" task/]

View file

@ -21,6 +21,6 @@
<li>Вам пригодятся свойства `event.clientX/event.clientY`</li>
</ul>
[edit src="source" task/]
P.S. Центрировать мяч можно и при помощи CSS, но JavaScript в перспективе позволит делать это гибче и определять позицию более динамически.

View file

@ -1,3 +1,2 @@
Поставьте обработчик `click` на контейнере. Он должен проверять, произошел ли клик на кнопке удаления (`target`), и если да, то удалять соответствующий ей `DIV`.
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -9,4 +9,3 @@
В результате, должно работать вот так(кликните на крестик):
[iframe src="solution" height=500]
[edit src="source" task/]

View file

@ -16,4 +16,3 @@
P.S. При необходимости HTML/CSS дерева можно изменить.
[edit src="source" task/]

View file

@ -13,7 +13,7 @@
<li>Код не должен меняться при увеличении количества столбцов или строк.</li>
</ul>
[edit src="source" task/]
P.S. Обратите внимание, тип столбца задан атрибутом у заголовка. Это необходимо, ведь числа сортируются иначе чем строки. Соответственно, код это может использовать.

View file

@ -14,5 +14,5 @@
<li>Содержимое может содержать вложенные теги, *в том числе внутри ссылок*, например, `<a href=".."><i>...</i></a>`.</li>
</ul>
[edit src="source" task/]

View file

@ -10,7 +10,7 @@
Для обработки событий используйте делегирование, т.е. не более одного обработчика.
[edit src="source" task/]
P.S. Обратите внимание -- клик может быть как на маленьком изображении `IMG`, так и на `A` вне него. При этом `event.target` будет, соответственно, либо `IMG`, либо `A`.

View file

@ -14,7 +14,7 @@
Демо:
[iframe border="1" src="solution"]
[edit src="source" task/]
P.S. В этой задаче можно считать, что в элементах списка может быть только текст, без вложенных тегов.
P.P.S. Обработка одновременного нажатия <code class="key">Ctrl</code>(<code class="key">Cmd</code>) и <code class="key">Shift</code> может быть любой.

View file

@ -26,4 +26,3 @@ var isClickOnTitle = (elem == span);
# Решение
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -32,6 +32,6 @@
Исходный документ содержит кликабельное дерево.
[edit src="source" task/]
P.S. Задача -- скорее на сообразительность, однако подход может быть полезен в реальной жизни.

View file

@ -6,4 +6,3 @@
# Решение
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -15,4 +15,3 @@
Исходный документ содержит разметку текста и ссылки на изображения.
[edit src="source" task/]

View file

@ -6,4 +6,3 @@
# Решение
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -16,7 +16,7 @@ addScripts(["1.jpg", "2.jpg", "3.jpg"], callback);
В исходном документе содержатся ссылки на картинки, а также код для проверки, действительно ли изображения загрузились. Он должен выводить "0", затем "300".
[edit src="source" task/]

View file

@ -16,4 +16,3 @@ s.parentNode.insertBefore(script, s); // перед ним и вставим
# Решение
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -17,4 +17,3 @@ addScript("go.js", function() {
Ошибки загрузки обрабатывать не нужно.
[edit src="source" task/]

View file

@ -6,4 +6,3 @@
# Решение
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -19,5 +19,5 @@ addScripts(["a.js", "b.js", "c.js"], function() { a() });
Исходный содержит скрипты `a.js`, `b.js`, `c.js`:
[edit src="source" task/]

View file

@ -23,4 +23,4 @@
Исходный документ содержит вспомогательные функции [](#getPageScroll) и [](#getCoords).
Вы также можете использовать как заготовку решение задачи [](/task/behavior-tooltip).
[edit src="source" task/]

View file

@ -25,4 +25,3 @@
<li>Редактор прокручивает только мышкой или жестами (на мобильных устройствах), прокрутку клавиатурой здесь рассматривать не нужно (хотя это и возможно).</li>
</ul>
[edit src="source" task/]

View file

@ -9,7 +9,7 @@
Позже к этому слайдеру можно будет добавить дополнительные функции по чтению/установке значения.
[edit src="source" task/] ([getCoords](#getCoords) -- в lib.js).
([getCoords](#getCoords) -- в lib.js).
Важно:
<ul>

View file

@ -1 +0,0 @@
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -8,6 +8,6 @@
[demo src="solution"]
[edit src="source" task/]
P.S. Для вашего удобства добавлены функции `getCoords` -- для координат и `getDocumentScroll` -- для получения границ видимой области и прокрутки в документе.

View file

@ -8,6 +8,6 @@
В поле должны нормально работать специальные клавиши [key Delete]/[key Backspace] и сочетания c [key Ctrl]/[key Alt]/[key Cmd].
[edit src="source" task/]
P.S. Конечно, при помощи альтернативных способов ввода (например, вставки мышью), посетитель всё же может ввести что угодно.

View file

@ -18,4 +18,4 @@
В исходный документ включена кнопка.
[edit src="source" task/]

View file

@ -43,7 +43,7 @@
**Дополнительно: расширьте код, чтобы загружались изображения не только видимые сейчас, но и на страницу вперед и назад от текущего места.**
[edit src="source" task/]
P.S. Страница прокручивается только вверх или вниз, горизонтальной прокрутки нет.

View file

@ -15,4 +15,4 @@
[iframe src="solution" height=40]
[edit src="source" task/]

View file

@ -74,4 +74,3 @@ function getCoords(elem) {
Учтите при решении, что мышонок изначально находится где-то в глубине документа, в `DIV'е` с `position:relative`.
[edit src="source" task/]

View file

@ -9,5 +9,5 @@
[demo src="solution"].
[edit src="source" task/]

View file

@ -5,4 +5,3 @@
<li>По `keydown` отслеживаем нажатие с `keyCode = 13` ([key Enter]) с `shiftKey` и трансформируем ячейку обратно.</li>
</ol>
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -15,4 +15,3 @@
[iframe src="solution"]
[edit src="source" task/]

View file

@ -6,6 +6,6 @@
[iframe src="solution" height=90]
[edit src="source" task/]
При клике плейсхолдер просто исчезает и дальше не показывается.

View file

@ -8,4 +8,3 @@
[iframe height=80 src="solution"]
[edit src="source" task/]

View file

@ -15,6 +15,6 @@
<li>Изменения в форме отражаются в результатах сразу.</li>
</ul>
[edit src="source" task/]

View file

@ -31,4 +31,4 @@ showPrompt("Введите что-нибудь<br>... умное :)", function(v
Исходный HTML/CSS для формы с готовым fixed-позиционированием:
[edit src="source" task/]

View file

@ -13,5 +13,5 @@
Ошибка должна сопровождаться сообщением у поля. Например:
[iframe height=280 src="solution"]
[edit src="source" task/]

View file

@ -1 +0,0 @@
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -22,4 +22,3 @@ clock.stop(); // стоп
Пример результата:
[iframe src="solution" border=1]
[edit src="source" task/]

View file

@ -22,4 +22,4 @@
Результат:
[iframe src="solution" height=60 border=1]
[edit src="source" task/]

View file

@ -1 +0,0 @@
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -1,3 +1,2 @@
Для показа голосов также добавлены семантические классы `.positive/.negative` в `style.css`.
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -1 +0,0 @@
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -1 +1 @@
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -20,5 +20,5 @@ var users = [
[iframe src="solution"]
[edit src="source" task/]

View file

@ -6,4 +6,4 @@
Побочный эффект -- к закрытию и раскрытию (лишнему) элемента управления при таких "ненамеренных" потерях фокуса. Поэтому был выбран `onclick`.
Решение: [edit src="solution"]Открыть в песочнице[/edit]
Решение:

View file

@ -17,4 +17,4 @@
В примере выше два селекта, чтобы можно было проверить процесс открытия-закрытия.
[edit src="source" task/]

View file

@ -27,6 +27,6 @@ new Tooltip({
<li>Объект подсказки не должен иметь публичных методов, только приватные.</li>
</ul>
[edit src="source" task/]
P.S. Подсказки, если их мало, можно реализовать и при помощи CSS. Но JS-подход более универсален и не зависит от вёрстки, в частности, он может проверять, не вылезает ли подсказка за экран.

View file

@ -31,4 +31,4 @@ new Tooltip({
<li>Объект подсказки не должен иметь публичных методов, только приватные.</li>
</ul>
[edit src="source" task/]

View file

@ -26,4 +26,3 @@ $(resizeMe).on("resize", function(e) {
В исходном документе есть ссылка на <a href="http://js.cx/clipart/handle-se.png">картинку handle-se.png</a> для правого-нижнего угла.
[edit src="source" task/]

View file

@ -14,7 +14,7 @@
# Решение
[edit src="solution"]Открыть в песочнице[/edit]
Обратите внимание: обработчики `mousemove/mouseup` ставятся на `document`, не на элемент.

View file

@ -27,5 +27,5 @@ $(croppable).on("crop", function(e) {
<li>Область не может вылезать за пределы изображения.</li>
</ul>
[edit src="source" task/]

View file

@ -1 +0,0 @@
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -23,4 +23,3 @@ $(menu).on("select", function(e) {
В исходном документе находится DOM-структура и стили для меню.
[edit src="source" task/]

View file

@ -8,4 +8,3 @@
# Решение
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -23,4 +23,3 @@ new DraggableWindow({
<li>Для задания DOM-структуры окна используйте шаблон. Может быть создано несколько окон.</li>
</ul>
[edit src="source" task/]

View file

@ -42,6 +42,6 @@ $(datePicker).on("select", function(e) {
Пример в действии:
[iframe border=1 src="solution"]
[edit src="source" task/]
**В решении используйте готовый компонент -- календарь из задачи [](/task/calendar).**

View file

@ -8,7 +8,7 @@
В дальнейшем мы сможем при помощи JavaScript сделать, чтобы текст при клике пропадал. Получится красивая подсказка.
[edit src="source" task/]
P.S. Обратите внимание: `type="password"`! То есть, просто `value` использовать нельзя, будут звёздочки. Кроме того, подсказка, которую вы реализуете, может быть как угодно стилизована.

View file

@ -35,4 +35,3 @@ body {
Результат:
[iframe src="solution" border=1 link]
[edit src="source" task/]

View file

@ -35,4 +35,3 @@ body {
Результат:
[iframe src="solution" border=1 link]
[edit src="source" task/]

View file

@ -14,6 +14,6 @@
<li>Курсор при наведении на стрелку или элемент списка становится стрелкой `pointer`.</li>
</ul>
[edit src="source" task/]
P.S. Без использования таблиц.

View file

@ -12,6 +12,6 @@
Браузеры: все основные, IE8+. Должно работать при прокрутке окна (проверьте).
[edit src="source" task/]

View file

@ -9,4 +9,3 @@
# Решение
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -18,6 +18,6 @@
Браузеры: все основные, IE8+.
[edit src="source" task/]

View file

@ -9,4 +9,4 @@
В процессе анимации пусть повторные клики на изображение игнорируются.
[edit src="source" task/]

View file

@ -7,4 +7,4 @@
В исходный документ включена функция [](#animate) и набор `delta`-функций.
[edit src="source" task/]

View file

@ -8,4 +8,4 @@
Напишите код, который будет анимировать мяч. Дистанция вправо составляет `100px`.
В исходный документ включена функция [](#animate) и набор `delta`-функций.
[edit src="source" task/]

View file

@ -9,4 +9,4 @@
Для анимации использовать CSS, по окончании вывести "ок".
[edit src="source" task/]

View file

@ -1 +0,0 @@
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -4,4 +4,3 @@
Перепишите делегирование на jQuery.
[edit src="source" task/]