Вы здесь: Главная » JavaScript » Простые задачи по JavaScript

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

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

Темы задач:

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

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

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

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

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

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

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

Задача 1

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

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

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

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

Задача 2

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

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

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

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

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

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

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

Задача Задумай число

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

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

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

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

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

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

if...else в JavaScript

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

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

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

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

Указываем, сколько лет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()).

Not a Number - Не число

Если было введено число, выведите, на какие цифры оно делится без остатка (от 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, то порекомендуйте книгу "Л.Н. Толстой. Война и мир".
В таблице ниже вы найдете рекомендуемые книги при разных ответах на представленные вопросы. Можете поменять по своему выбору.

Книга/Вопросы"Про волшебство должно быть?""Надо, чтобы было смешно?""Детективная история нужна?""Бояться будете?"
Л.Н. Толстой. Война и мир
Джоан Роулинг.Гарри Поттер
Братья Стругацкие. Понедельник начинается в субботу.
Агата Кристи. Вечеринка в Хэллоуин.
Джонатан Страуд. Кричащая лестница.
Диана Маш. Заноза для драконьего военачальника
Кирилл Круганский. Смешно или страшно.
Стивен Кинг. Мизери.
Эдгар По. Очень страшные истории.
А. Маринина. Безупречная репутация

Цикл while

Циклы

Задача 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(). Например, так:

Использование метода splice() для массиваПримечание: 

  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-оператора. Например, такой:
  4. Отсортируйте массив по алфавиту.

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

setInterval

setTimeout(), setInterval()

светофор на html и cssЗадача 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). Но сначала выводится круг красного, потом желтого, потом зеленого цвета, а затем цвета поторяются: красный, желтый, зеленый.

setInterval circles

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

Задача на setTimeout

Функции

Задача 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.

Автор: Админ

2 комментария

  1. Не могу решить 3 задачу, не получается. Дайте решение :'(

    • Можно уточнить, задача №3 из какого блока?
      Если это "задача 3. Инкремент и декремент", то начинать надо с того, что пирогов было 17.
      Объявляете переменную, например, let pies=17;, а затем используете декремент (pies--;) или операторы арифметического присваивания (pies-=2;), чтобы получить в одной и той же переменной разные числа.

      В конце следует учесть, что "Маргарита вернула один пирожок на тарелку", то есть нужно будет написать pies++;
      В итоге пирожков должно остаться 4 штуки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *