ВНИМАНИЕ Вместо задач этого урока вышел отдельный спец курс:
http://theory.phphtml.net/courses/javascript/practice/1/c.html
http://theory.phphtml.net/courses/javascript/practice/1/h.html
Меняйте число в адресе, будете попадать на следующий урок, всего 13 уроков (дз есть не везде).

ПЕРЕД этими уроками посмотрите урок на анонимные функции (он ниже по учебнику).

Задачи для решения

Урок

Реализуйте калькулятор. Должны быть кнопки цифр и операций. По нажатию на кнопку '=' должен посчитаться результат. Совет: используйте фунцию eval.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте игру крестики-нолики. Играет два человека, на одном поле по очереди.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте тест с вопросами. В каждом вопросе есть 5 вариантов ответов (один из них правильный) - это будет 5 радио кнопочек. После того, как человек ответит на все вопросы - покажите ему результат - на какие вопросы он ответил верно, не верно, не дал ответ. Покажите также процент правильно отвеченных вопросов.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Реализуйте тест, в котором показывается один вопрос, 5 чекбоксов для ответа (может быть несколько правильных ответов). Под чекбоксами ссылка 'следующий вопрос'. По нажатию на эту ссылку вместо текущего вопроса показывается следующий. Когда вопросы заканчиваются, в последнем вопросе будет стоять ссылка не 'следующий вопрос', а 'показать результат'.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Реализуйте опрос. В нем будет 5 вариантов ответа - 5 радио радио кнопочек, а также инпут 'свой ответ'. Если в инпуте есть ответ - значения радиокнопочек игнорируются. Реализуйте кнопочку 'пройти опрос заново'. Опрос можно проходить много раз, результаты заносятся в массив и после прохождения опроса показывается процент ответов на каждый вопрос.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте чеклист. Должен быть инпут с добавлением задачи, а над ним - список с задачами. Возле каждой задачи чекбос. Если нажать на чекбокс - задача становится выполненной, перечеркивается и становится серого цвета, чекбокс при этом пропадает. Справа от любой задачи должен быть крестик для удаления этой задачи.

Задачу также можно поредактировать, если сделать двойной клик по ней - в этом случае вместо пункта списка появляется инпут с текстом задачи, можно поредактировать текст задачи, нажать Enter и задача изменится. Инпут при этом исчезнет.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте автодополнение. Суть: дан, к примеру, массив стран. Дан инпут. Когда вы вводите первые буквы страны под инпутом появляется выпадающий список, в котором расположены страны, которые начинаются на те буквы, которые вы ввели. Чем больше букв вы вводите - тем меньше стран в списке. Страну можно выбрать, кликнув по ней мышкой - в этом случае ее название появится в инпуте. Список стран храните в массиве.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Сделайте игру. Суть - дана таблица с числами, распаложенными в случайном порядке в ячейках таблицы. Числа идут по порядку от 1 до N. Все числа разного размера и цвета. Играющему необходимо по порядку кликать по числам - сначала 1, потом 2 и так далее до N. Когда он кликает на правильную ячейку - она активируется и делает красный фон (предыдущие правильные ячейки не снимают выделение). Должен тикать таймер, на игру дается M секунд. Если не успел найти все числа по порядку - проиграл.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте попап. Суть: когда пользователь прокручивает страницу вниз на N пикселей - появляется баннер поверх содержимого. Этот баннер можно закрыть на крестик и он пропадет.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Решите предыдущую задачу, но при условии, что баннер появлятся не по прокрутке, а через N секунд после захода пользователя на страницу.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте календарик сдедующего вида: показаны дни текущего месяца (в ряд), слева стрелка 'предыдущий месяц', справа ссылка 'следующий месяц'. Сверху показан год и месяц, который мы смотрим. Если мы смотрим текущий месяц текущего года - текущий день должен быть как-то выделен.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Реализуйте квадратный календарик (как в винде).

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте органайзер. Он представляет собой календарик, нажимая на даты которого можно увидеть список задач, запланированных на этот день.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте вкладки - нажимая на каждую вкладку мы будем видеть ниже текст, соответствующий этой вкладке.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Реализуйте аккордион (погуглите, что это).

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Дана таблица. В верхнем ряду th. Сделайте так, чтобы по нажатию на определенный th ряды таблицы сортировались по значениям этого столбца.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.