Минипроекты JavaScript для новичков. Задачи для javascript начинающих
Минипроекты JavaScript для новичков | Трепачёв Дмитрий
Перед решением задач изучите теорию к данному уроку.
ВНИМАНИЕ Вместо задач этого урока вышел отдельный спец курс:http://theory.phphtml.net/courses/javascript/practice/1/c.htmlhttp://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 ряды таблицы сортировались по значениям этого столбца.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Задачи по nodejs для начинающих — Всё о web
Это самые простейшие задачи, для тех, кто только начинает изучать javascript, а именно nodejs. Для их решения Вам потребуется знать: как работать с переменными, if else условия, циклы for, получение аргументов командной строки: process.argv, преобразование строки в число: parseInt и вывод строки в консоль: console.log.
Задачи
1. Вывести в консоль строчку «Hello world»
2. Вывести в консоль «Hello world» 150 раз
3. Вывести в консоль все чётные числа от 2 до 20
4. Получить в скрипте аргумент(process.argv) перемножить его на 2 и вывести в консоль результат, в виде:
nodejs script.js 5 результат: 10
nodejs script.js 5 результат: 10 |
5. Получить аргумет. Если он больше 0- вывести в консоль «Hello», если меньше — «olleH»:
nodejs script.js 1 Hello nodejs script.js 1 olleH
nodejs script.js 1 Hello nodejs script.js 1 olleH |
6. То же самое, что и в № 4, но если аргумент = 0, вывести в консоль «Zero»
nodejs script.js 1 Hello nodejs script.js 1 olleH nodejs script.js 0 Zero
nodejs script.js 1 Hello nodejs script.js 1 olleH nodejs script.js 0 Zero |
7. Калькулятор light. Получить 2 аргумента, перемножить их и вывести результат в консоль:
nodejs script.js 2 3 Result: 6
nodejs script.js 2 3 Result: 6 |
8. Калькулятор advanced. Получить 3 аргумента: 1 первый аргумент- 1 число, 2ой аргумент- мат. операция, 3ий аргумент — второе число. Выполнить математическую операцию переданную во 2ом аргументе и вывести в консоль результат:
nodejs script.js 2 "*" 3 Result: 6 nodejs script.js 2 "-" 3 Result: -1 nodejs script.js 2 "+" 3 Result: 5 nodejs script.js 2 "/" 3 Result: 0.6666666
nodejs script.js 2 "*" 3 Result: 6 nodejs script.js 2 "-" 3 Result: -1 nodejs script.js 2 "+" 3 Result: 5 nodejs script.js 2 "/" 3 Result: 0.6666666 |
.Для примера достаточно реализовать операции сложения, вычитания, умножения и деления. Обратите внимание, что мат. символы заключены в кавычки, это необходимо, чтобы они правильно передались в скрипт.
9. Вывести в консоль букву Z нарисованную звёздочками. Размер 5Х5 символов:
10. То же самое что и в п.9 но размер буквы передаётся в 1 аргументе:
nodejs script.js 5 ***** * * * ***** nodejs script.js 3 *** * ***
nodejs script.js 5 ***** * * * ***** nodejs script.js 3 *** * *** |
При этом если аргумент меньше 3, или больше 10, вывести в консоль сообщение об ошибке:
nodejs script.js 1 Error, argument should be between 3 and 10 nodejs script.js 11 Error, argument should be between 3 and 10
nodejs script.js 1 Error, argument should be between 3 and 10 nodejs script.js 11 Error, argument should be between 3 and 10 |
Поделиться "Задачи по nodejs для начинающих"
Рекомендуем
- Сравнение скорости работы nodejs, php, python, lua, luajit часть 2, string replaceВ этот раз посмотрим стандартную во всех языках функцию замены подстроки в строке. В php это str_replace, в javaScript str.replace, в python str.replace, и в lua str:gsub. Почему […]
- Сравнение скорости работы nodejs, php, python, lua, luajit, наполнение массиваА захотелось мне протестировать, на сколько отличается скорость работы этих языков программирования. В их чистом виде, по самой простейшей задаче. Для этого создал новую, чистую виртуалку, […]
- Задачи и вопросы по Javascript используемые на интервью часть 2Это вторая часть задач по javascript, но теперь это взгляд со стороны работодателя. Это вопросы которые задаю я при собеседовании на позицию javascript developer. Я постарался перечислить […]
- Express API сервер Часть 3, process managerСейчас у нас есть практически готовый проект. Мы принимаем запросы, отправляем ответы, есть немного тестов и вроде всё ок. Но в продакшен нам ещё рано. Давайте создадим гипотетическую […]
allwebstuff.info
Программирование на языке JavaScript: программы, задачи по JavaScript и их решения
Привет, студенты :)
Этот пост не несет какой-либо полезной информации, он, в основном, нужен для внутренней перелинковки, которая не помешает моему блогу, и описания задач.
Задания, описанные в данном посте, давались мне институте, некоторые из которых я смог решить, другие - почти смог. Решения каждой задачи буду выкладывать в отдельные посты с соответствующими названиями. Ну и постараюсь как можно делать разбор функции и алгоритмов.
Вот список заданий, на которые у меня есть решения (решения буду выкладывать постепенно):
- Дано натуральное число (более четырех знаков):– найти произведение цифр числа, меньших 7;– верно ли, что в числе нет цифры А? (Решение)
- Дано натуральное число (более четырех знаков):– найти произведение нечетных цифр числа;– верно ли, что в числе нет цифр, кратных 3? (Решение)
- Найти все натуральные числа из промежутка от 1 до 200, у которых сумма цифр равна S. (Решение)
- Найти произведение нечетных делителей числа 54, кратных 3. (Решение)
- Дан одномерный массив целых чисел, состоящий из 9 элементов. Требуется:– найти сумму элементов, имеющих нечетные индексы, и количество элементов, значения которых меньше числа b и при этом кратны 5;– умножить все элементы, кратные 3, на третий элемент массива, кроме него самого (в случае, если он кратен числу 3). (Решение)
- Дан двумерный массив A размером 4 x 5 , заполненный целыми числами. Требуется сформировать одномерный массив B, каждый элемент которого равен количеству отрицательных элементов меньших 5 по модулю, соответствующего столбца массива A.
- Вывести различные символы двух строк (т.е. такие, какие есть только в одном из них). (Решение)
- Дана строка с текстом, заканчивающимся точкой. Требуется:– заменить во всех словах первую букву заглавной.
Надеюсь, вам чем-то помогут мои посты по программированию на JavaScript. Подписывайтесь на Твиттер блога, чтобы следить за выходом новых статей, и не забывайте ставить лайки.
P.S. Задания и решения будут появляться как только я разберусь с бардаком на своей флешке. Быть может в свободное время порешаю парочку задач и список пополнится.
myblogy.ru
