Простые задачи по JavaScript

В данной статье вы найдете список задач для понимания работы различных конструкций языка JavaScript. Учтите что решение здесь не предусматривается. То есть вы читаете задачу, открываете свой любимый тестовый редактор и браузер, - и решаете ее самостоятельно. И еще - далеко не все задачи вам могут показаться простыми, т.к. чем больше информации вы узнаете, тем шире спектр решаемых задач и применяемых подходов.

Темы задач:

• Объявление переменных. Арифметические операторы
• Условные конструкции if...else, switch ... case, тернарный оператор
• Циклы
• Вложенные циклы
• Массивы
• setTimeout(), setInterval()
• Функции
• Создание html-элементов в JavaScript. Обработка событий
• Генерация случайных чисел

Объявление переменных. Арифметические операторы

Ввод данных с помощью диалогового окна prompt(). Вывод данных в консоль или с помощью диалогового окна alert().

Задача 1. Даны переменные a, b, c, объявленные следующим способом:

Для них выполнены следующие действия:

Измените объявление переменных так, чтобы:

1. переменная a при увеличении на 2 стала равна 36.
2. переменная  b при уменьшении на 5 стала равна 15.
3. переменная c не содержала бы undefined, но была бы равна "Новая строка"

При выводе в консоль должно быть так:

Задача 2. Вы просите пользователя ввести сумму его зарплаты. Затем рассчитываете:

1. Добавку в виде премии в сумме 15% от зарплаты.
2. Налоги в сумме 10% от суммы всех начислений (зарплата + премия).
3. Трату в магазине в сумме 190.
4. Разделяете оставшуюся сумму между пользователем и его "женой"/"мужем".

При решении используйте арифметические операторы присваивания, например, res -=100 или res /=2, где res - это переменная, в которую вы записываете все действия по расчету сумм.

Выводите, сколько осталось в результате всех операций денег у пользователя.

Задача 3. Инкремент и декремент

Как-то погожим деньком
Бубуля спекла пирожков.
Один уволок кот Василий,
Два слопали дед и внук Миша,
Три дали соседке Марине,
Двумя угостили малышек
Алену и Анну, что к парку
Везла тетя Валя в коляске.
Один передали доярке,
Что носит нам сливки на праздник.
Пятью поделились с друзьями
Двенадцатилетней Наташи,
Так сколько ж осталось их с нами,
Коль в печке их было семнадцать?
Ах, да, Маргарита вернула
Один пирожок на тарелку,
Подруга Наташи сказала,
что нужно отдать его белке.
Но белку искать мы не стали,
Пирог этот тоже не съели.
Ну, как, вы уже подсчитали,
То, сколько пирогов уцелели?

Эта задача сформулирована в виде стиха. Но действия вам необходимо будет делать последовательно, отображая каждое из них в консоли с помощью console.log() с поясняющей строкой:

Надеюсь, понятно, с чего начинать вычисления?

Внимание! В том случае, если кому-то достается один пирожок, необходимо использовать декремент или инкремент. И в зависимости от того, как вы проводите вычисления, нужно выбирать его префиксную или постфиксную запись.

Задача 4. Необходимо попросить  пользователя задумать число. Затем он должен  умножить это число  на 2 и прибавить к полученному результату 7. То, что вышло в итоге, нужно ввести в диалоговом окне prompt(). Вы должны выдать пользователю, какое число он задумал.

Процесс общения с пользователем показан на картинках.

Вывод данных с помощью document.write()

Задача 5. Попросите пользователя ввести 3 имени и фамилии, например студентов. Выведите введенные данные в тело документа методом document.write() в виде абзацев и нумерованного списка.

Используйте при выводе информации двойные, одинарные и обратные кавычки.

Должно получится примерно так (шрифт выбираете сами):

Решите задачу с помощью циклов, если уже знаете, что это такое.

Задача 6. Решите простую математическую задачу: 3 человека пошли за покупками. Каждый следующий потратил в 5 раз больше предыдущего. Сколько потратил каждый, если все вместе заплатили 24 грн 80 коп? 186 грн?  319 грн 30 коп?

Запишите решение в виде функции. Вызовите эту функцию с разными параметрами. Выводите информацию в консоль или с помощью document.write().

Попробуйте возвращать из функции объект с 3-мя значениями.

Условные конструкции if...else, switch ... case, тернарный оператор

Операторы сравнения

Задача 1. С помощью метода prompt() получите сначала имя пользователя, затем год его рождения и сохраните в 2 переменные. Вычислите возраст пользователя, и выведите его в абзаце с помощью document.write() в таком формате "Антон: 24".

1а. Добавляем условия в виде if...else/switch..case

Определите остаток от деления количества лет на 10. В зависимости от этого выведите в абзаце "Антон: 21 год" или "Антон: 24 года" или "Антон: 25 лет". Т.е. для всех чисел с 1 в конце должно быть "_1 год", для числ с 2,3,4 в конце - "_3 года", а для всех остальных - "_7 лет". Вы можете использовать для этого условные конструкциии if...else или switch...case.

1b. Тернарный оператор.

Решите эту задачу с помощью тернарного оператора

1с. Использование объекта Date

При расчете возраста используйте объект Date и его метод getFullYear() для получения года в настоящий момент, а не просто число.

Задача 2. Компания по транспортировке мебели заносит любую мебель на 1-й этаж бесплатно, со 2-го по 4-й включительно - по 20грн., с 5-го по 7-й включительно - по 30грн., а с 8-го и выше - по 40грн. Узнайте у пользователя, на какой этаж нужно занести мебель, и рассчитайте стоимость транспортировки.

Это значит, что занос на 4-й этаж будет стоить 60грн, на 7-й - 150 грн, а на 10-й - 270 грн.

Задача 3. Угадай-ка число.

С помощью prompt() предлагаете пользователю ввести число от 1 до 10 включительно и записываете в переменную. Второй переменной присваиваете случайное число в том же диапазоне с помощью Math.random(), округлив его до целочисленного значения.

В случае, если случайное число и число, введенное пользователем совпали, выводите в консоль "Вы счастливчик! Ваше число ...", если не совпали - "Не угадали! Ваше число ..., а выпало число ..." (вместо точек должны быть значения соответствующих переменных.

Задача 4. Чет-нечет. Сумма и произведение чисел.

Пользователь вводит через prompt() четырёхзначное число. Вам нужно вывести в консоль, является ли число четным или нечетным, а также найти произведение его цифр, если число четное, или сумму его цифр, если число нечетное.

Задача 5. На какие цифры делится введенное число

С помощью метода prompt() попросите пользователя ввести число. Обязательно преобразуйте введенное число в числовой формат.

Запрос на ввод числа в Яндекс браузере

Если была введена строка, то выведите сообщение об этом (используйте для проверки функцию isNaN()).

Если было введено число, выведите, на какие цифры оно делится без остатка (от 2 до 10) . Каждое сообщение должно быть на новой строке, но в одном и том же окне alert().

Задача 6. Несколько условий. Лестница if...else

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

• Зарплата до 6000 включительно - 10%;
• Зарплата до 10 000 включительно - 15%;
• Зарплата до 15 000 включительно - 17.5%;
• Зарплата свыше 15 000 - 20%.

Используйте множественные условия для проверки диапазона введенных пользователем данных.

Задача 7. Составные условия.

С помощью диалогового окна confirm() вам нужно будет задать пользователю 3 или 4 вопроса, на основе ответов на которые вы будете предлагать ему определенные книги. Чем больше вопросов, тем больше вариантов ответов надо создавать.

Вопросы предлагаются такие:

1. "Про волшебство должно быть?"
2. "Надо, чтобы было смешно?"
3. "Детективная история нужна?"
4. "Бояться будете?"

Если все ответы на вопросы отрицательные, т.е. возвращается false, то порекомендуйте книгу "Л.Н. Толстой. Война и мир".
В таблице ниже вы найдете рекомендуемые книги при разных ответах на представленные вопросы. Можете поменять по своему выбору.

Циклы

Задача 1. Вывести с помощью цикла 8-10 подобных изображений (цветы, автомобили, футболисты, игрушки, чашки), например, так:

Архив с изображениями цветов вы можете скачать по ссылке. Также вы можете загрузить архив с изображениями машин.

Задача 2. Подсчитайте сумму чисел в диапазоне от 1 до 10 с помощью цикла for, while и do...while.

Подсказка: в результате должно получиться 55.

Задача 3. С помощью метода document.write() вывести друг под другом 5 абзацев от 200 до 600px шириной в виде лесенки с текстом “Абзац .._цифра..”. Ширину нужно указывать при выводе абзаца в теге <p> в атрибуте style="". Цвет фона, рамку и отступы можно указать для класса/тега в css-свойствах.

Внешний вид задания:

Задача 4. С помощью метода document.write() необходимо вывести друг под другом 5 абзацев с текстом “Абзац .._цифра..” и разным цветом фона, который задается с помощью случайных чисел (используйте метод Math.random()) в диапазоне от 0 до 255. Цвет фона можно задать в системе rgb() в атрибуте style в виде style="background-color: rgb(255, 12, 134)".

Остальные css-свойства (шрифт, рамку и отступы) можно указать для класса/тега в css-свойствах.

Внешний вид задания:

Вложенные циклы

Задача 1. Создайте таблицу из 6 строк и 4 столбцов с пронумерованными ячейками в ней.

Задача 2. Выведите методом document.write() или console.log() звездочки от 1 до 7 штук в виде треугольника таким образом:

*
**
***
****
*****
******
*******

Задача 3. Создайте шахматную доску в виде таблицы, в которой чередуются ячейки с белым и черным цветом фона.

Массивы

Задача 1а. Используя метод splice(), замените в массиве, состоящем из нескольких строковых переменных, складывающихся в одно предложение, указанное пользователем слово. Например, у нас есть такой массив:

Вам необходимо спросить у пользователя номер слова, которое нужно удалить, а затем, на какое слово нужно заменить. После этого нужно вывести массив в виде цельной фразы с пробелами, используя метод join(). Например, так:

Примечание: 

1. Когда вы будете предлагать пользователю ввести номер слова от 1 до ..., в конце должна стоять цифра, полученная из свойства length вашего массива.
2. Если пользователь введет меньше 1 или больше длины вашего массива, вы должны выдавать ему предупреждение о том, что такое действие недопустимо, и нужно вводить число в определенном диапазоне.
3. Учтите, что нумерация элементов в массиве начинается с 0, а обычные пользователи считают слова в предложении с 1.

Задача 1b. Из этого же массива удалите предпоследний элемент, заменив его на слово "пень", не используя цифру 3, а отталкиваясь от длины массива, т.е. свойства poem.length.

Задача 2. Создайте массив из 20 случайных чисел в диапазоне от 1 до 100. Выведите в консоль или с помощью document.write():

• все четные числа этого массива
• все числа, которые делятся на 3
• все числа, которые делятся на 5
• все числа, которые делятся на 10

Задача 3. Есть массив студентов. Например, такой:

1. С помощью методов unshift() и  push() добавьте к существующим студентам Березина и Ященко.
2. Затем удалите с помощью splice() Семенова и добавьте вместо него Ковалеву и Горобченко.
3. Добавьте к этому массиву второй массив с помощью метода concat() или spread-оператора. Например, такой:
   
   Второй массив студентов

   JavaScript

   let group2 = ["Филонов", "Изюмов", "Кабанов", "Дюдарев"];

   1	let group2 = ["Филонов", "Изюмов", "Кабанов", "Дюдарев"];

4. Отсортируйте массив по алфавиту.

При каждом из перечисленных действий выводите новый массив с помощью document.write() в виде нумерованного списка. Можете задать ему атрибут start="0", чтобы нумерация начиналась с 0.

setTimeout(), setInterval()

Задача 1. Сделать светофор, который "зажигает" красный, желтый, зеленый цвет попеременно в html-разметке через 1,5 секунды.

Для этого нужно в html-разметке и в css создать 4 класса: .circle, .red, .yellow и .green и один элемент #svetofor, в которых можно использовать такие свойства, как border, box-shadow, background-image  в виде линейного градиента, чтобы сформировать внешний вид такого светофора:

Ниже вы найдете html-разметку и css-правила для такого светофора. Учтите, что в разметке показаны все цвета. В задаче же вам необходимо будет задавать один цвет каждые 1,5 секунды для одного из <div class="circle"></div>. Все остальные будут серого цвета.

Давайте посмотрим на сам светофор:

Для того чтобы менять классы с помощью setInterval() вы можете использовать работу с DOM-элементами и управление стилевыми свойствами элементов или заменять все время "внутренности" <div id="svetofor"> с помощью innerHTML.

Задача 2. Создайте эффект печатной машинки, выводя какую-нибудь заранее заготовленную фразу или попросив пользователя ее ввести. Решите задачу с помощью  setInterval() и setTimeout().

Задача 3. Выведите в тело документа 15 <span>-элементов с классом .circle, например, которые представляют собой круг, через равные промежутки времени (500 - 800ms). Но сначала выводится круг красного, потом желтого, потом зеленого цвета, а затем цвета повторяются: красный, желтый, зеленый.

Задача 4.  Попросите пользователя ввести сумму денег (типа ставка на забег лошади, исход боксерского соревнования и т.д). Сгенерируйте случайное число в диапазоне от -5 до 5. Через 1 секунду выведите пользователю информацию о том, что он “выиграл” или “проиграл” с такой логикой: если случайное число отрицательное или равно 0 - то он "не угадал" со своей ставкой. Если число положительное, то вы умножаете сумму ставки на это число и выводите пользователю, что он выиграл ... гривен. Например, пользователь ввел 1000, выпало число 5 - выиграл 5000.

Функции

Задача 1. Напишите функцию, которая принимает 2 числа и возвращает 1, если первое число больше, чем второе; -1, если первое число меньше, чем второе, и 0, если числа равны.

Попробуйте реализовать эту функцию не только с помощью if...else, но и с помощью тернарного оператора, и в виде стрелочной функции.

Задача 2. Напишите функцию, которая принимает цвет фона, цвет текста, строку с текстом и выводит методом write()абзац с соответствующими стилями. Например, функция myParagraph("red", "white", "Lorem ipsum sit amet") выведет абзац с текстом "Lorem ipsum sit amet" белого цвета на красном фоне.

Задача 3. Напишите функцию, которая принимает 2 параметра: длину и ширину прямоугольника и вычисляет его площадь. Если в функцию передали 1 параметр, то функция вычисляет площадь квадрата.

Подсказка: используйте параметры функции по умолчанию.

Свойство  arguments функции.

Задача 1. Напишите функцию, которая принимает произвольное количество аргументов в виде строк и выводит их через пробел с помощью document.write() в тело html-документа. Например, функция  showWords("I've", "been", "learning", "JavaScript", "for", "a", "month") должна вывести фразу "I've been learning JavaScript for a month".

Задача 2. Напишите функцию, которая принимает произвольное количество аргументов в виде однозначных чисел и возвращает 1 многозначное число. Например, функция с именем complexDigit() при вызове  complexDigit(3,6,7) вернет число 367, а complexDigit(1,9, 4, 8,3) вернет число 19483.

Функции-замыкания

Задача 1. Создайте функцию, которая с помощью document.write() будет добавлять в тело документа абсолютно позиционированную картинку столько раз, сколько пользователь запишет вызовов внутренней возвращаемой функции. Каждый раз изображение должно уменьшаться в ширине на 50-100px (на скриншоте - на 60px) и располагаться по центру предыдущей картинки, создавая эффект глубины.

Для того чтобы назначить координаты left и top для картинки, используйте данные свойства window.innerWidth и window.innerHeight таким образом:

В функцию изначально должны передаваться 2 параметра - это первоначальная ширина и url картинки. В качестве url можете использовать любое изображение с unsplash.com (как подключать фото с unsplash.com).

В примере на скриншоте использована картинка https://source.unsplash.com/NN83EXPgQ5c/600x600.

Во вложенной функции вы меняете текущую ширину картинки на 50-100px.

Создание html-элементов в JavaScript. Обработка событий

Задача 1. На основе задачи с циклами или используя html-разметку, в которой присутствуют 8-10 уменьшенных изображений, создайте при клике на любой из картинок модальное окно с реальным изображением на основе его атрибута src. Запишите нужные стили для слоя типа оверлей и для модального окна. Для центрирования последнего можно воспользоваться свойствами Flexbox-модели.  При клике на фоне или на изображении оно вместе с фоном должно пропадать.

Используйте при решении такие методы для создания html-элементов в JavaScript, как document.createElement(), элемент.appendChild() или элемент.append(), а также new Image().

Задача 2. Для нескольких изображений, которые в атрибуте src имеют изображение с адресом flower1.png, flower2.png, ... flower8.png  сделайте замену на аналогичное изображение при обработке клика на каждом из них, но вида car1.jpg, car2.jpg, ... car8.jpg.

Должно получиться примерно так:

Замена изображений при клике

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

Задача 3. Есть такой же набор изображений, но при клике на каждом из них выполняется замена фото на соседнее, т.е. изображение flower1.png меняется на flower2.png, flower2.png на flower3.png, а последнее flower8.png - на flower1.png. Процесс показан на картинке:

То есть после того, как пользователь сделает клик на каждом, будет смещение цветков на 1 влево:

Задача 4. Опять займемся заменой изображений. Теперь нужно сделать так, чтобы при клике на любом фото вы последовательно меняли его на первого соседа справа, потом на второго соседа справа и т.д. При клике на последнем изображении оно должно замениться на первое. В результате разнообразных кликов вывод картинок может поменяться на произвольный:

Генерация случайных чисел

Задача 1. Необходимо сделать разноцветными 7 абзацев, задавая цвет их фона в системе rgb() с помощью генерации случайных чисел в диапазоне от 0 до 255. При обновлении страницы цвет абзацев должен случайным образом меняться.

Задача 2. Необходимо сгенерировать случайное 4-хзначное число, т.е. число в диапазоне от 1000 до 9999 (или до 10000 не включительно). Это число нужно разбить на части и поместить внутрь 4-х html-элементов с классом .digit, например, так, чтобы в каждом из них в качестве data-атрибута (например, data-digit) была размещена только 1 цифра из 4-х.  Вы можете это сделать с помощью операторов деления и остатка от деления (%) либо с помощью преобразования числа в строку и использования метода split() для строк.

При клике на блок с цифрой необходимо менять значения цифр от 1 до 9, а затем до 0 и проверять, совпало ли текущее значение цифры с атрибутом  data-digit. Если это произошло, то вам необходимо:

1. удалить обработчик события для этого блока с цифрой (способ 1, способ 2);
2. назначить для него другой класс (вы найдете стили для примера после изображения);
3. установить курсор с помощью css-свойства  cursor: not-allowed для этого блока.

Примечание: Изначально внутри каждого блока с цифрой должна находится 1. Поэтому в случае, если случайное число содержит эту цифру, необходимо сразу изменить внешний вид цифрового блока в соответствии с 3 условиями выше.

CSS-стили для примера:

Задача 3. Лото или лотерея. Вам нужно сгенерировать поле из 15 клеток со случайными числами от 1 до 45 включительно. Повторяться они не должны. Вывести  это поле можно в виде таблицы. Затем сгенерировать 5 случайных чисел, которые будут "выигрышными" и неповторяющимися. Если таковые числа есть в сгенерированной таблице, необходимо подсветить их другим цветом фона, который может быть записан в специальном css-классе.

Если выигрышным оказался 1 номер, сообщите человеку, что он выиграл 10 грн, 2 номера - 150грн, 3 номера - 780 грн., 4 номера - 3560 грн. и 5 номеров - 56 000 грн. Цифры могут быть другими (по вашему желанию). Используйте конструкцию switch ... case.

Можно делать все операции с некоторой задержкой, используя метод setTimeout() и запускать "розыгрыш" по клику на кнопку "Старт".

Примечание: вы можете решить эту задачу с помощью методов массива, поместив в один массив сгенерированные числа для поля, а во второй - "выигрышные" числа. А затем сравнить 2 массива на наличие совпадений. Вместо массивов можно использовать коллекцию Set.