new version
This commit is contained in:
parent
82bc6ea984
commit
a45c3fa386
94 changed files with 54 additions and 94 deletions
|
@ -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="Вложенные комментарии не поддерживаются!"]
|
||||
|
|
|
@ -6,6 +6,6 @@
|
|||
|
||||
Задача: переписать часы на прототипах. Приватные свойства и методы сделать защищёнными.
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
P.S. Часики тикают в браузерной консоли (надо открыть её, чтобы увидеть).
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
Есть реализация часиков на прототипах. Создайте класс, расширяющий её, добавляющий поддержку параметра `precision`, который будет задавать частоту тика в `setInterval`. Значение по умолчанию: `1000`.
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
<ul>
|
||||
<li>Для этого класс `Clock` надо унаследовать. Пишите ваш новый код в файле `extended-clock.js`.</li>
|
||||
|
|
|
@ -6,5 +6,5 @@
|
|||
|
||||
[iframe src="solution"]
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
|
|
|
@ -47,6 +47,6 @@ createTree(container, data); // создаёт
|
|||
|
||||
Если получится -- сделайте оба.
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
P.S. Желательно, чтобы в дереве не было лишних элементов, в частности -- пустых `<ul></ul>` на нижнем уровне.
|
|
@ -16,4 +16,4 @@
|
|||
|
||||
P.S. Достаточно сгенерировать календарь, кликабельным его делать не нужно.
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -6,4 +6,3 @@
|
|||
|
||||
[iframe src="solution"]
|
||||
|
||||
[edit src="source" task/]
|
|
@ -30,4 +30,4 @@
|
|||
|
||||
**Проверьте себя: вспомните, что означает каждое свойство. В чём состоит эффект его появления здесь?**
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -37,5 +37,5 @@ showNotification({
|
|||
|
||||
Элемент уведомления должен иметь CSS-класс `notification`, к которому добавляется класс из `options.className`, если есть. Исходный документ содержит готовые стили.
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
|
|
|
@ -44,7 +44,7 @@ div.style.right = div.style.top = 0;
|
|||
|
||||
[iframe height=140 src="solution"]
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -16,6 +16,6 @@
|
|||
<li>Обратите внимание: мяч должен быть строго по центру! Независимо от местоположения поля и ширины его рамки.</li>
|
||||
</ul>
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
P.S. Да, это можно сделать при помощи чистого CSS, но задача именно на JavaScript. Далее будет развитие темы и более сложные ситуации, когда JavaScript будет уже точно необходим.
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
Исходный документ (`DIV` -- красный):
|
||||
[iframe height=220 src="source"]
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
Расширить нужно точно по ширине, чтобы красный `DIV` не вылез за границы `BODY`.
|
||||
|
||||
|
|
|
@ -22,4 +22,3 @@
|
|||
|
||||
P.S. Код не должен быть как-то привязан к конкретным размерам элемента, стилям, наличию или отсутствию рамки.
|
||||
|
||||
[edit src="source" task/]
|
|
@ -1 +0,0 @@
|
|||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -10,4 +10,4 @@
|
|||
|
||||
[iframe src="solution" height="450" border="1" link]
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -1 +0,0 @@
|
|||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -13,4 +13,4 @@ td.style.backgroundColor = 'red';
|
|||
Должно получиться так:
|
||||
[iframe src="solution"]
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -6,6 +6,6 @@
|
|||
|
||||
Напишите код, который измеряет разницу между ними.
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
*P.S. В задаче есть подвох, все не так просто. Если разница больше 10 раз -- вы решили ее неверно. Тогда подумайте, почему такое может быть.*
|
||||
|
|
|
@ -7,4 +7,4 @@
|
|||
Демо:
|
||||
[iframe border=1 src="solution"]
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -8,4 +8,3 @@
|
|||
|
||||
HTML/CSS исходного документа, возможно, понадобится изменить.
|
||||
|
||||
[edit src="source" task/]
|
|
@ -9,4 +9,4 @@
|
|||
|
||||
Как лучше отобразить кнопку справа-сверху: через `position:absolute` или `float`?
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -25,4 +25,3 @@
|
|||
|
||||
# Полное решение
|
||||
|
||||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -10,4 +10,3 @@
|
|||
|
||||
В этой задаче разработка HTML/CSS-структуры составляет 90% решения.
|
||||
|
||||
[edit src="source" task/]
|
|
@ -21,6 +21,6 @@
|
|||
<li>Вам пригодятся свойства `event.clientX/event.clientY`</li>
|
||||
</ul>
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
P.S. Центрировать мяч можно и при помощи CSS, но JavaScript в перспективе позволит делать это гибче и определять позицию более динамически.
|
|
@ -1,3 +1,2 @@
|
|||
Поставьте обработчик `click` на контейнере. Он должен проверять, произошел ли клик на кнопке удаления (`target`), и если да, то удалять соответствующий ей `DIV`.
|
||||
|
||||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -9,4 +9,3 @@
|
|||
В результате, должно работать вот так(кликните на крестик):
|
||||
[iframe src="solution" height=500]
|
||||
|
||||
[edit src="source" task/]
|
|
@ -16,4 +16,3 @@
|
|||
|
||||
P.S. При необходимости HTML/CSS дерева можно изменить.
|
||||
|
||||
[edit src="source" task/]
|
|
@ -13,7 +13,7 @@
|
|||
<li>Код не должен меняться при увеличении количества столбцов или строк.</li>
|
||||
</ul>
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
P.S. Обратите внимание, тип столбца задан атрибутом у заголовка. Это необходимо, ведь числа сортируются иначе чем строки. Соответственно, код это может использовать.
|
||||
|
||||
|
|
|
@ -14,5 +14,5 @@
|
|||
<li>Содержимое может содержать вложенные теги, *в том числе внутри ссылок*, например, `<a href=".."><i>...</i></a>`.</li>
|
||||
</ul>
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
Для обработки событий используйте делегирование, т.е. не более одного обработчика.
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
P.S. Обратите внимание -- клик может быть как на маленьком изображении `IMG`, так и на `A` вне него. При этом `event.target` будет, соответственно, либо `IMG`, либо `A`.
|
||||
|
||||
|
|
|
@ -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> может быть любой.
|
|
@ -26,4 +26,3 @@ var isClickOnTitle = (elem == span);
|
|||
|
||||
# Решение
|
||||
|
||||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -32,6 +32,6 @@
|
|||
|
||||
Исходный документ содержит кликабельное дерево.
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
P.S. Задача -- скорее на сообразительность, однако подход может быть полезен в реальной жизни.
|
||||
|
|
|
@ -6,4 +6,3 @@
|
|||
|
||||
# Решение
|
||||
|
||||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -15,4 +15,3 @@
|
|||
|
||||
Исходный документ содержит разметку текста и ссылки на изображения.
|
||||
|
||||
[edit src="source" task/]
|
|
@ -6,4 +6,3 @@
|
|||
|
||||
# Решение
|
||||
|
||||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -16,7 +16,7 @@ addScripts(["1.jpg", "2.jpg", "3.jpg"], callback);
|
|||
|
||||
В исходном документе содержатся ссылки на картинки, а также код для проверки, действительно ли изображения загрузились. Он должен выводить "0", затем "300".
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -16,4 +16,3 @@ s.parentNode.insertBefore(script, s); // перед ним и вставим
|
|||
|
||||
# Решение
|
||||
|
||||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -17,4 +17,3 @@ addScript("go.js", function() {
|
|||
|
||||
Ошибки загрузки обрабатывать не нужно.
|
||||
|
||||
[edit src="source" task/]
|
|
@ -6,4 +6,3 @@
|
|||
|
||||
# Решение
|
||||
|
||||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -19,5 +19,5 @@ addScripts(["a.js", "b.js", "c.js"], function() { a() });
|
|||
|
||||
Исходный содержит скрипты `a.js`, `b.js`, `c.js`:
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
|
|
|
@ -23,4 +23,4 @@
|
|||
Исходный документ содержит вспомогательные функции [](#getPageScroll) и [](#getCoords).
|
||||
Вы также можете использовать как заготовку решение задачи [](/task/behavior-tooltip).
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -25,4 +25,3 @@
|
|||
<li>Редактор прокручивает только мышкой или жестами (на мобильных устройствах), прокрутку клавиатурой здесь рассматривать не нужно (хотя это и возможно).</li>
|
||||
</ul>
|
||||
|
||||
[edit src="source" task/]
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
Позже к этому слайдеру можно будет добавить дополнительные функции по чтению/установке значения.
|
||||
|
||||
[edit src="source" task/] ([getCoords](#getCoords) -- в lib.js).
|
||||
([getCoords](#getCoords) -- в lib.js).
|
||||
|
||||
Важно:
|
||||
<ul>
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -8,6 +8,6 @@
|
|||
|
||||
[demo src="solution"]
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
P.S. Для вашего удобства добавлены функции `getCoords` -- для координат и `getDocumentScroll` -- для получения границ видимой области и прокрутки в документе.
|
|
@ -8,6 +8,6 @@
|
|||
|
||||
В поле должны нормально работать специальные клавиши [key Delete]/[key Backspace] и сочетания c [key Ctrl]/[key Alt]/[key Cmd].
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
P.S. Конечно, при помощи альтернативных способов ввода (например, вставки мышью), посетитель всё же может ввести что угодно.
|
|
@ -18,4 +18,4 @@
|
|||
|
||||
В исходный документ включена кнопка.
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
|
||||
**Дополнительно: расширьте код, чтобы загружались изображения не только видимые сейчас, но и на страницу вперед и назад от текущего места.**
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
|
||||
P.S. Страница прокручивается только вверх или вниз, горизонтальной прокрутки нет.
|
|
@ -15,4 +15,4 @@
|
|||
|
||||
[iframe src="solution" height=40]
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -74,4 +74,3 @@ function getCoords(elem) {
|
|||
|
||||
Учтите при решении, что мышонок изначально находится где-то в глубине документа, в `DIV'е` с `position:relative`.
|
||||
|
||||
[edit src="source" task/]
|
|
@ -9,5 +9,5 @@
|
|||
|
||||
[demo src="solution"].
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
|
|
|
@ -5,4 +5,3 @@
|
|||
<li>По `keydown` отслеживаем нажатие с `keyCode = 13` ([key Enter]) с `shiftKey` и трансформируем ячейку обратно.</li>
|
||||
</ol>
|
||||
|
||||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -15,4 +15,3 @@
|
|||
|
||||
[iframe src="solution"]
|
||||
|
||||
[edit src="source" task/]
|
|
@ -6,6 +6,6 @@
|
|||
|
||||
[iframe src="solution" height=90]
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
При клике плейсхолдер просто исчезает и дальше не показывается.
|
|
@ -8,4 +8,3 @@
|
|||
|
||||
[iframe height=80 src="solution"]
|
||||
|
||||
[edit src="source" task/]
|
|
@ -15,6 +15,6 @@
|
|||
<li>Изменения в форме отражаются в результатах сразу.</li>
|
||||
</ul>
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -31,4 +31,4 @@ showPrompt("Введите что-нибудь<br>... умное :)", function(v
|
|||
|
||||
Исходный HTML/CSS для формы с готовым fixed-позиционированием:
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -13,5 +13,5 @@
|
|||
Ошибка должна сопровождаться сообщением у поля. Например:
|
||||
[iframe height=280 src="solution"]
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -22,4 +22,3 @@ clock.stop(); // стоп
|
|||
Пример результата:
|
||||
[iframe src="solution" border=1]
|
||||
|
||||
[edit src="source" task/]
|
|
@ -22,4 +22,4 @@
|
|||
Результат:
|
||||
[iframe src="solution" height=60 border=1]
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -1,3 +1,2 @@
|
|||
Для показа голосов также добавлены семантические классы `.positive/.negative` в `style.css`.
|
||||
|
||||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -1 +0,0 @@
|
|||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -1 +1 @@
|
|||
[edit src="solution"]Открыть в песочнице[/edit]
|
||||
|
||||
|
|
|
@ -20,5 +20,5 @@ var users = [
|
|||
|
||||
[iframe src="solution"]
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
|
|
|
@ -6,4 +6,4 @@
|
|||
|
||||
Побочный эффект -- к закрытию и раскрытию (лишнему) элемента управления при таких "ненамеренных" потерях фокуса. Поэтому был выбран `onclick`.
|
||||
|
||||
Решение: [edit src="solution"]Открыть в песочнице[/edit]
|
||||
Решение:
|
|
@ -17,4 +17,4 @@
|
|||
|
||||
В примере выше два селекта, чтобы можно было проверить процесс открытия-закрытия.
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -27,6 +27,6 @@ new Tooltip({
|
|||
<li>Объект подсказки не должен иметь публичных методов, только приватные.</li>
|
||||
</ul>
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
P.S. Подсказки, если их мало, можно реализовать и при помощи CSS. Но JS-подход более универсален и не зависит от вёрстки, в частности, он может проверять, не вылезает ли подсказка за экран.
|
|
@ -31,4 +31,4 @@ new Tooltip({
|
|||
<li>Объект подсказки не должен иметь публичных методов, только приватные.</li>
|
||||
</ul>
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -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/]
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
# Решение
|
||||
|
||||
[edit src="solution"]Открыть в песочнице[/edit]
|
||||
|
||||
|
||||
Обратите внимание: обработчики `mousemove/mouseup` ставятся на `document`, не на элемент.
|
||||
|
||||
|
|
|
@ -27,5 +27,5 @@ $(croppable).on("crop", function(e) {
|
|||
<li>Область не может вылезать за пределы изображения.</li>
|
||||
</ul>
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -23,4 +23,3 @@ $(menu).on("select", function(e) {
|
|||
|
||||
В исходном документе находится DOM-структура и стили для меню.
|
||||
|
||||
[edit src="source" task/]
|
|
@ -8,4 +8,3 @@
|
|||
|
||||
# Решение
|
||||
|
||||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -23,4 +23,3 @@ new DraggableWindow({
|
|||
<li>Для задания DOM-структуры окна используйте шаблон. Может быть создано несколько окон.</li>
|
||||
</ul>
|
||||
|
||||
[edit src="source" task/]
|
|
@ -42,6 +42,6 @@ $(datePicker).on("select", function(e) {
|
|||
Пример в действии:
|
||||
[iframe border=1 src="solution"]
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
**В решении используйте готовый компонент -- календарь из задачи [](/task/calendar).**
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
В дальнейшем мы сможем при помощи JavaScript сделать, чтобы текст при клике пропадал. Получится красивая подсказка.
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
P.S. Обратите внимание: `type="password"`! То есть, просто `value` использовать нельзя, будут звёздочки. Кроме того, подсказка, которую вы реализуете, может быть как угодно стилизована.
|
||||
|
||||
|
|
|
@ -35,4 +35,3 @@ body {
|
|||
Результат:
|
||||
[iframe src="solution" border=1 link]
|
||||
|
||||
[edit src="source" task/]
|
|
@ -35,4 +35,3 @@ body {
|
|||
Результат:
|
||||
[iframe src="solution" border=1 link]
|
||||
|
||||
[edit src="source" task/]
|
|
@ -14,6 +14,6 @@
|
|||
<li>Курсор при наведении на стрелку или элемент списка становится стрелкой `pointer`.</li>
|
||||
</ul>
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
P.S. Без использования таблиц.
|
|
@ -12,6 +12,6 @@
|
|||
|
||||
Браузеры: все основные, IE8+. Должно работать при прокрутке окна (проверьте).
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -9,4 +9,3 @@
|
|||
|
||||
# Решение
|
||||
|
||||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -18,6 +18,6 @@
|
|||
|
||||
Браузеры: все основные, IE8+.
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -9,4 +9,4 @@
|
|||
|
||||
В процессе анимации пусть повторные клики на изображение игнорируются.
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -7,4 +7,4 @@
|
|||
|
||||
В исходный документ включена функция [](#animate) и набор `delta`-функций.
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -8,4 +8,4 @@
|
|||
Напишите код, который будет анимировать мяч. Дистанция вправо составляет `100px`.
|
||||
|
||||
В исходный документ включена функция [](#animate) и набор `delta`-функций.
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -9,4 +9,4 @@
|
|||
|
||||
Для анимации использовать CSS, по окончании вывести "ок".
|
||||
|
||||
[edit src="source" task/]
|
||||
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
[edit src="solution"]Открыть в песочнице[/edit]
|
|
@ -4,4 +4,3 @@
|
|||
|
||||
Перепишите делегирование на jQuery.
|
||||
|
||||
[edit src="source" task/]
|
Loading…
Add table
Add a link
Reference in a new issue