javascript задачи для практики
Практика JavaScript для новичков
Учебник JavaScript
Практика
Работа с DOM
Практика
Некоторые продвинутые вещи
Рекомендованное ES6
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Регулярки
Разное
Работа с канвасом
Практика
Контекст
Drag-and-Drop
Практика по ООП
Ваша задача: посмотрите, попробуйте повторить.
Практика
Promise ES6
Библиотека jQuery
Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.
Перед решением задач изучите теорию к данному уроку.
Задачи для решения
Даны 3 инпута и кнопка. По нажатию на кнопку получите числа, стоящие в этих инпутах и запишите их сумму в четвертый инпут.
Дан инпут. В него вводится число. По потери фокуса найдите сумму цифр этого числа.
Дан инпут. В него вводятся числа через запятую. По потери фокуса найдите среднее арифметическое этих чисел (сумма делить на количество).
Дан инпут. В него вводится ФИО через пробел. По потери фокуса запишите фамилию, имя и отчество в отдельные инпуты.
Дан инпут. В него вводится ФИО через пробел. ФИО вводится с маленькой буквы. Сделайте так, чтобы по потери фокуса инпутом, введенные фамилия, имя и отчество автоматически стали записанными с большой буквы (в том же инпуте).
Дан инпут. В него вводится текст. По потери фокуса узнайте количество слов в этом тексте.
Дан инпут. В него вводится текст. По потери фокуса узнайте количество символов в самом длинном слове в этом тексте.
Дан инпут. В него вводится дата в формате 31.12.2016. По потери фокуса в этом же инпуте поставьте эту дату в формате 2016-12-31.
Дан инпут. В него вводится год рождения пользователя. По нажатию на кнопку выведите в абзац ниже сколько пользователю лет.
Дан инпут. В него вводится дата в формате 31.12.2016. По потери фокуса узнайте день недели (словом), который приходится на эту дату.
Дан инпут. В него вводится слово. По нажатию на кнопку проверьте то, что это слово читается с начала и с конца одинаково (например, мадам).
Дан инпут. В него вводится число. Проверьте по вводу, что это число содержит внутри себя цифру 3.
Даны N абзацев и кнопка. По нажатию на кнопку запишите в конец каждого абзаца его порядковый номер.
Даны N абзацев с числами. По нажатию на кнопку выведите эти числа в инпут через запятую в порядке возрастания.
Даны ссылки. По загрузке страницы добавьте в конец каждой ссылки ее href в круглых скобках.
Даны ссылки. По загрузке страницы, если ссылка начинается с http://, то добавьте ей в конец стрелку → (делается так: →).
Даны N абзацев с числами. По нажатию на любой абзац запишите в него квадрат числа, которое в нем находится.
Даны картинки. По нажатию на любую картинку увеличьте ее в 2 раза.
Даны N картинок размера 30px. По нажатию на картинку под ними эта картинка появляется размером в 50px.
Дан инпут. Выделите любой текст на странице. По окончанию выделения этот текст должен записаться в этот инпут.
Даны абзацы с числами. По нажатию на кнопку найдите абзац, в котором хранится максимальное число, и сделайте его красного цвета.
Дан инпут. Даны абзацы. Пусть в этот инпут записывается суммарное количество нажатий по этим абзацам.
Дан инпут с числом. Сделайте так, чтобы каждую секунду в нем появлялся квадрат того числа, которое в нем записано.
Дан инпут и кнопка. По нажатию на кнопку сгенерируйте случайную строку из 8-ми символов и запишите в инпут.
Модифицируйте предыдущую задачу так, чтобы был еще один инпут, в котором задается длина случайной строки.
Модифицируйте предыдущую задачу так, чтобы был еще один инпут, в котором задаются символы, из которых формируется эта случайна строка. Символы задаются без всяких разделитетей, в одну строку.
Дан абзац. Сделайте так, чтобы каждую секунду он менял свой цвет с красного на зеленый и наоборот.
Даны инпуты с числами. Произвольное количетсво, пусть три. В первый инпут запишите 1, через секунду во второй инпут запишите 2, еще через секунду в третий инпут 3, потом через секунду в первый инпут запишите 4, во второй 5 и так далее до бесконечности.
Дана ссылка. Дан чекбокс. По нажатию на ссылку меняйте состояние чекбокса с отмеченного на неотмеченное и наоборот.
Даны чекбокс. Дана кнопка. По нажатию на кнопку сделайте все чекбоксы отмеченными.
Спросите у пользователя какой язык (html, css, js, php) он знает с помощью радио кнопочек. Выведите этот язык в абзац.
Спросите у пользователя какие языки (html, css, js, php) он знает с помощью чекбоксов. Выбранные языки должны выводится в абзац ниже через запятую.
Дан инпут. Даны li. В инпут пишется номер. Сделайте так, чтобы по вводу числа, li с заданным номером покрасился в красный цвет.
Дан блок с кнопкой ‘закрыть блок’. По нажатию на эту кнопку блок должен исчезнуть. Кнопка размещается внутри блока и должна исчезнуть вместе с ним. Блоков может быть любое количество, каждый из них закрывает своя кнопка.
В инпут через запятую вводятся страны. По нажатию на кнопку сделайте так, чтобы эти страны записались в ul под инпутом (каждая страна отдельный li).
В инпут вводится страна и нажимается Enter. По нажатию на Enter сделайте так, чтобы введенные страны записывались в абзац под инпутом через запятую. То есть по каждому нажатию Enter в абзац будут добавляться все новые и новые страны.
На странице есть дивы. В них есть текст. Обойдите все дивы и обрежьте тот текст, который в них стоит так, чтобы он стал длиной 10 символов. И добавьте троеточие в конец обрезанного текста
Дана таблица с числами. По нажатию на кнопку найдите ячейку, в которой хранится максимальное число, и сделайте ее фон красным.
Дана таблица с числами. По нажатию на кнопку в инпут под таблицей выведите эти числа через запятую в порядке возрастания.
Дана таблица с числами. По нажатию на кнопку в последний ряд таблицы в каждую ячейку запишите сумму чисел в столбце таблицы, расположенном над определенной ячейкой.
Дана таблица с числами. По нажатию на ячейку она активируется и становится красного цвета. Активировать можно много ячеек. Под таблицей кнопка. По нажатию по этой кнопке в абзац ниже выведите сумма активированных ячеек. Реализуйте кнопку ‘сбросить активированные ячейки’.
Реализуйте раскрывающийся список. По умолчанию есть список стран (ul), по нажатию на страну внутри li со страной появляется список городов.
Сделайте селекты день, мес, год. Сделайте так, чтобы не корректную дату нельзя было выбрать (например, 30 февраля нельзя, а 30 марта можно или 29 февраля можно, но только в високосный год).
Реализуйте генератор таблиц, ширина и высота таблиц задается в двух инпутах (например, таблица 5 на 10 ячеек).
Дан список и кнопка. По нажатию на кнопку посортируйте пункты списка по возрастанию.
Дан ряд ссылок. Сделайте так, чтобы по нажатию на ссылку она становилась с красным фоном. По нажатию на другую ссылку выделение первой ссылки снимается и выделяется та, на которую мы нажали. В абзац ниже пишите текст активной ссылки.
5 типовых задач на собеседованиях по JavaScript: разбор и решения
От переводчика: опубликовали для вас статью Марии Перна (Maria Antonietta Perna), которая рассказывает о типовых задачах по JavaScript, чаще всего предлагаемых соискателям-разработчикам на собеседованиях. Статья будет полезна, в первую очередь, начинающим программистам. Ниже даны примеры решения задач, если вам кажется, что они не слишком хороши, и есть вариант получше — предлагайте альтернативу в комментариях.
Собеседования в технологических компаниях давно стали притчей во языцех. Удивляться этому не приходится — успешное прохождение интервью дает возможность получить хорошую работу. Но это не так просто, поскольку зачастую необходимо решать сложные задачи.
Причем чаще всего большинство этих задач не имеют отношения к работе, которую будет выполнять соискатель, но решать их все равно нужно. Иногда приходится делать это на доске, без сверки с Google или любым другим источником. Да, ситуация постепенно меняется, и в некоторых компаниях от таких собеседований отказываются, но множество работодателей всё еще придерживается этой традиции. Эта статья посвящена разбору типовых JavaScript-задач, которые часто используются в качестве заданий для соискателей.
Напоминаем: для всех читателей «Хабра» — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».
Главное — тщательная подготовка к вашему собеседованию
Да, прежде чем начать разбирать задачи, давайте рассмотрим общие советы по подготовке к интервью.
Главное — готовиться заранее. Проверьте, насколько хорошо вы помните алгоритмы и структуры данных, и подтяните знания в тех областях, которые вам не слишком хорошо знакомы. Есть немало онлайн-платформ, которые помогут подготовиться к прохождению собеседований. Советуем GeeksforGeeks, Pramp, Interviewing.io и CodeSignal.
Стоит научиться проговаривать решение вслух. Желательно рассказывать соискателям о том, что вы делаете, а не просто писать на доске (или же набирать код в компьютере, тоже молча). Таким образом, если в коде вы допустите ошибку, но ход решения будет в общем правильным, можно увеличить свои шансы на успех.
Задачу нужно осмыслить, прежде чем приступить к решению. В некоторых случаях можно поверхностно понять задание и затем пойти по неверному пути. Возможно, стоит задать несколько уточняющих вопросов интервьюеру.
Нужно потренироваться писать код вручную, а не на ПК. Бывает, что на собеседованиях соискателю дают маркер и доску, где нет ни подсказок, ни автоматического форматирования. При поиске решения стоит записать свой код на листе бумаги или прямо на доске. Если держать все в голове, можно забыть что-нибудь важное.
Шаблонные задачи на JavaScript
Вероятно, какие-то из этих задач уже вам уже знакомы. Вы либо проходили собеседования, где нужно было решать что-то подобное, либо практиковались на них во время изучения JavaScript. Ну а теперь пришло время решить их еще раз, причем с подробным объяснением процесса.
Палиндром — слово, предложение или последовательность символов, которая абсолютно одинаково читается как в привычном направлении, так и в обратном. К примеру, “Anna” — это палиндром, а “table” и “John” — нет.
Дана строка; нужно написать функцию, которая позволяет вернуть значение true, если строка является палиндромом, и false — если нет. При этом нужно учитывать пробелы и знаки препинания.
palindrome(‘racecar’) === true
palindrome(‘table’) === false
Основная идея здесь — перевернуть строку в обратном направлении. Если «реверсная» строка полностью идентична исходной, значит, мы получили палиндром и функция должна вернуть значение true. Если же нет — false.
Вот код, который позволяет решить палиндром.
Первый шаг — преобразование символов входной строки в нижний регистр. Это гарантия того, что программа будет сравнивать именно сами символы, а не регистр или еще что-то.
Теперь все, что нужно, — сравнить «обратную» строку с исходной, вернув результат true или false.
Одна из самых популярных на собеседованиях задач.
Требуется написать функцию, выводящую в консоль числа от 1 до n, где n — это целое число, которая функция принимает в качестве параметра, с такими условиями:
Главное здесь — способ поиска кратных чисел с использованием JavaScript. Его можно реализовать при помощи оператора модуля или же остатка — %, который позволяет показать остаток при делении двух чисел. Если остаток 0, это означает, что первое число кратно второму.
Так, если разделить 12 на 5, получаем 2 с остатком 2. Если же разделить 12 на 3, то получаем 4 с остатком 0. В первом случае 12 не кратно 5, во втором — 12 кратно 3.
Оптимальным решением будет следующий код:
Функция выполняет нужные проверки с использованием условных операторов и выдает результат, необходимый пользователю. В задаче стоит уделить внимание порядку операторов if…else: начинать с двойного условия (&&) и заканчивать случаем, когда кратные числа найти не получилось. В результате мы охватываем все варианты.
Так называют слово, которое содержит все буквы другого слова в том же количестве, но ином порядке.
Нужно написать функцию, которая проверяет, являются ли две строки анаграммами, причем регистр букв не имеет значения. Учитываются лишь символы; пробелы или знаки препинания в расчет не берутся.
Здесь важно учитывать, что необходимо проверять каждую букву в двух входных строках и их количество в каждой строке.
Для хранения данных анаграммы стоит выбрать такую структуру, как объектный литерал JavaScript. Ключ в этом случае — символ буквы, значение — количество ее повторений в текущей строке.
Есть и другие условия:
Обратите внимание на использование Object.keys() в сниппете выше. Этот метод возвращает массив, содержащий имена или ключи в таком же порядке, в каком они встречаются в объекте. В этом случае массив будет таким:
Достаточно простая задача, которая часто попадается на собеседованиях.
Нужно написать функцию, принимающую строку в качестве аргумента и возвращающую количество гласных, которые содержатся в строке.
Гласными являются «a», «e», «i», «o», «u».
Вот самый простой вариант:
Есть и более краткое решение проблемы:
Классическая задача, которую можно встретить на собеседованиях самого разного уровня. Стоит напомнить, что последовательность Фибоначчи — это ряд чисел, где каждое последующее является суммой двух предыдущих. Так, первые десять чисел выглядят следующим образом: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.
Нужно написать функцию, которая возвращает n-ную запись в определенной последовательности, причем n — число, которое передается в качестве аргумента функции.
Эта задача включает прохождение по циклу такое количество раз, которое указано в аргументе, с возвратом значения на соответствующей позиции. Этот способ постановки задачи требует использования циклов. Если вместо этого вы используете рекурсию, это может понравиться интервьюеру и дать вам несколько дополнительных очков.
В массиве результатов первые два числа содержатся в ряду, поскольку каждая запись в последовательности состоит из суммы двух предыдущих чисел. В самом начале двух чисел, которые можно взять для получения следующего числа нет, поэтому цикл не может сгенерировать их в автоматическом режиме. Но, как мы знаем, первые два числа — всегда 0 и 1. Поэтому инициализировать массив результатов можно вручную.
Что касается рекурсии, то здесь все проще и сложнее одновременно:
Мы продолжаем вызывать fibonacci(), передавая все меньшие числа в качестве аргументов. Останавливаемся в случае, когда переданный аргумент равен 0 или 1.
Примеры задач по JavaScript для подготовки джуна к собеседованию по фронтенду
Авторизуйтесь
Примеры задач по JavaScript для подготовки джуна к собеседованию по фронтенду
frontend-разработчик в «Тинькофф»
Далеко не секрет, что ключевым фактором успешного прохождения собеседования является подготовка. Чем лучше вы подготовитесь и чем больше задач решите — тем больше шанс не только удачно пройти собеседование, но и получить желаемую позицию.
У меня большой опыт в прохождении и проведении собеседований по JavaScript и решении немалого количества задач. В этом материале я покажу несколько задач, которые чаще всего попадаются на позицию Junior/Middle Frontend. Они не самые простые, поэтому для каждой вы найдете развернутый ответ. Советую сначала попробовать решить самостоятельно, а затем открывать спойлер 🙂
Что выведет console.log в Promise.race?
Ответ: B
Какое значение result?
const result = parseInt(«7*6», 10);
Ответ: C
Только первые числа в строке возвращаются. На основе системы счисления (второй аргумент, чтобы указать, к какому типу чисел мы хотим его анализировать: основание 10, шестнадцатеричное, восьмеричное, двоичное и т.д.), ParseInt проверяет, являются ли символы в строке допустимыми. Как только он встречает символ, который не является допустимым числом в основании, он прекращает синтаксический анализ и игнорирует следующие символы.
* не является допустимым числом. Он только разбирает «7» в десятичную 7. num теперь содержит значение 7.
Является ли функция sum чистой функцией?
Ответ: Б
Чистая функция — это функция, которая всегда возвращает тот же результат, если переданы одинаковые аргументы.
Функция sum всегда возвращает один и тот же результат. Если мы передадим 2 и 3, он всегда вернет 5 без побочных эффектов. Если мы передадим 50 и 100, он всегда вернет 150 и так далее. Это определение чистой функции.
Какое значение будет на выходе?
Ответ: C
Сначала мы вызываем функцию increaseAge и передаем объект client в качестве аргумента. Эта функция увеличивает значение свойства age на 1. client теперь
Какой будет вывод?
Ответ: C
Переменная firstName содержит значение строки, которая не является функцией, поэтому не может вызываться.
Ошибки типа выдаются, когда значение не соответствует ожидаемому типу. JavaScript ожидал, что firstName будет функцией, так как мы пытаемся вызвать ее. Однако это была строка, поэтому выдается ошибка TypeError: name не является функцией!
Функции JavaScript – Задачи и решения
Курс: Основы HTML и CSS
Курс: Разработка на C#
Курс: Python-разработчик с нуля
Осваивайте профессию, начните зарабатывать, а платите через год!
Курсы Python Акция! Бесплатно!
Станьте хакером на Python за 3 дня
Веб-вёрстка. CSS, HTML и JavaScript
Станьте веб-разработчиком с нуля
Функции — ключевая концепция программирования в JavaScript. Важнейшей особенностью JavaScript является его первоклассная поддержка функций (functions as first-class citizen). Любая функция — это объект, и следовательно ею можно манипулировать как объектом и формализовать средствами языка определённую логику поведения и обработки данных.
1. Переверните число задом наперед
Напишите функцию JavaScript, которая переворачивает число.
2. Проверьте, является ли переданная строка палиндромом или нет
3. Функция, которая генерирует все комбинации строки
Ожидаемый результат: d, o, do, g, dg, og, dog.
4. Вернуть переданную строку с буквами в алфавитном порядке
Пример строки: ‘alphabetical’
Ожидаемый результат: ‘aaabcehillpt’
Предположим, что символы пунктуации и цифры не включены в переданную строку.
5. Найти самое длинное слово в строке
6. Подсчитать количество гласных в строке
7. Проверьте, является ли число простым или нет
8. Получить тип данных
Примечание. Существует шесть возможных значений, которые возвращает typeof: объект, логическое значение, функция, число, строка и неопределенное значение.
9. Вернуть единичную матрицу n строк и n столбцов.
10. Найдите второе наименьшее и второе наибольшее числа из массива
11. Найдите идеальное число
Напишите функцию JavaScript, которая определяет, идеально ли число.
12. Найти множители положительного целого числа.
Напишите функцию JavaScript для вычисления множителей положительного целого числа.
13. Преобразование суммы в монеты.
Напишите функцию JavaScript для преобразования суммы в монеты.
Пример функции : amount_coins(96, [25, 10, 5, 2,1])
15. Извлечение уникальных символов из строки
Напишите функцию JavaScript для извлечения уникальных символов из строки.
16. Поиск в массивах JavaScript с помощью двоичного поиска
Напишите функцию для поиска позиции числа в массиве с помощью двоичного поиска.
Примечание. При двоичном поиске выполняется поиск, разбивая массив на все меньшие и меньшие части, пока не будет найдено искомое значение.
17. Найти элементы массива, которые больше указанного числа
Напишите функцию JavaScript, которая возвращает элементы массива, которые больше указанного числа.
18. Cгенерировать строковый идентификатор (строку заданной длины) из случайных символов
Напишите функцию JavaScript, которая генерирует строковый идентификатор (заданной длины) из случайных символов.
Пример списка символов: «ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789»
19. Поделить строку на фрагменты
Напишите функцию JavaScript, чтобы получить все возможные подмножества с комбинациями фиксированной длины (например, 2) в массиве.
Пример массива: [1, 2, 3] и длина подмножества 2. Ожидаемый результат: [[2, 1], [3, 1], [3, 2], [3, 2, 1]]
20. Подсчитать количество вхождений указанной буквы в строке
Напишите функцию JavaScript, которая принимает два аргумента: строку и букву. Функция должна подсчитывать количество вхождений указанной буквы в строке.
21. Найти первый неповторяющийся символ
Напишите функцию JavaScript, чтобы найти первый неповторяющийся символ.
22. Напишите функцию JavaScript для применения алгоритма пузырьковой сортировки.
Напишите функцию JavaScript для применения алгоритма пузырьковой сортировки.
Примечание. Согласно википедии «Алгоритм состоит из повторяющихся проходов по сортируемому массиву. За каждый проход элементы последовательно сравниваются попарно и, если порядок в паре неверный, выполняется обмен элементов. Проходы по массиву повторяются <\displaystyle N-1>N-1 раз или до тех пор, пока на очередном проходе не окажется, что обмены больше не нужны, что означает — массив отсортирован. При каждом проходе алгоритма по внутреннему циклу, очередной наибольший элемент массива ставится на своё место в конце массива рядом с предыдущим «наибольшим элементом», а наименьший элемент перемещается на одну позицию к началу массива («всплывает» до нужной позиции, как пузырёк в воде — отсюда и название алгоритма).»
23. Самое длинное слово из списка
Напишите функцию JavaScript, которая принимает список названий стран в качестве входных данных и возвращает самое длинное название страны в качестве выходных данных.
24. Найти самую длинную подстроку в заданной строке без повторяющихся символов
Напишите функцию JavaScript, чтобы найти самую длинную подстроку в заданной строке без повторяющихся символов.
25. Самый длинный палиндром в заданной строке
Напишите функцию JavaScript, которая возвращает самый длинный палиндром в заданной строке
Палиндром — это слово или фраза, которые одинаково читаются слева направо и справа налево.
26. Передать функцию JavaScript в качестве параметра
Напишите программу JavaScript для передачи «функции JavaScript» в качестве параметра.
27. Получить имя функции
Напишите функцию JavaScript, чтобы получить имя функции.