javascript задачи для тренировки
JavaScript Упражнения
Вы можете проверить свои навыки JavaScript с помощью упражнений Schoolsw3.
Упражнения
Мы собрали множество упражнений на JavaScript (с ответами) для каждой главы JavaScript.
Попробуйте решить упражнение, отредактировав код, или поcмотреть ответ, чтобы увидеть, что вы сделали не так.
Посмотрите свой счет
Вы получите 1 балл за каждый правильный ответ. Ваш счет и общий счет всегда будут отображаться.
Начать упражнения JavaScript
Если вы не знаете JavaScript, предлагаем вам прочитать Учебник JavaScript с нуля.
Онлайн сертификация Schoolsw3
Идеальное решение для профессионалов, которым необходимо совмещать работу, семью и карьеру.
Уже выдано более 25 000 сертификатов!
HTML Сертификат документирует ваши знания HTML.
CSS Сертификат документирует ваши знания современного CSS.
JavaScript Сертификат документирует ваши знания JavaScript и HTML DOM.
Python Сертификат документирует ваши знания Python.
jQuery Сертификат документирует ваши знания jQuery.
SQL Сертификат документирует ваши знания SQL.
PHP Сертификат документирует ваши знания PHP и MySQL.
XML Сертификат документирует ваши знания XML, XML DOM и XSLT.
Bootstrap Сертификат документирует ваши знания the Bootstrap framework.
Упражнения
Тесты
КАК СДЕЛАТЬ
ПОДЕЛИТЬСЯ
СЕРТИФИКАТЫ
Сообщить об ошибке
Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь, присылайте нам электронное письмо:
Ваше предложение:
Спасибо, за вашу помощь!
Ваше сообщение было отправлено в SchoolsW3.
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Задачи по JavaScript для начинающих от Tproger и GeekBrains
Авторизуйтесь
Задачи по JavaScript для начинающих от Tproger и GeekBrains
Вместе с факультетом Веб-разработки GeekUniversity собрали для вас несколько простых задач по JavaScript для обучения и тренировки, а также пару теоретических вопросов. Задачи расположены в порядке возрастания сложности.
Обратите внимание, что у любой задачи по программированию может быть несколько способов решения. Чтобы посмотреть добавленный нами вариант решения, кликните по соответствующей кнопке.
Задача 1
Напишите однострочное решение, которое вычисляет сумму квадратных корней для всех чётных чисел целочисленного массива.
Метод reduceRight() применяет функцию к аккумулятору и каждому значению массива (справа налево), сводя его к одному значению. А метод reduce() выполняет функцию callback один раз для каждого элемента, присутствующего в массиве, за исключением пустот, принимая четыре аргумента:
Задача 2
Напишите функцию, которая пишет в консоль число в заданном диапазоне, в случае, если оно успешно делится или не делится с остатком или без остатка в зависимости от параметров.
Задача 3
Опишите структуры данных для фермы животных и напишите функцию, которая делает подсчёт всех возрастов животных и выводит общий возраст для всей фермы.
Задача 4
Перепишите функцию clone таким образом, чтобы она была способна клонировать переданный как параметр объект.
Deep copy (глубокое копирование)
Experimental deep copy (экспериментальное глубокое копирование)
Как пишут на Stack Overflow, HTML-стандарт включает в себя алгоритм структурированного клонирования, который может создавать глубокие копии объектов. Он всё ещё ограничен встроенными типами, но в дополнение к тем типам, что поддерживаются в JSON, поддерживает Dates, RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, Sparse Arrays, Typed Arrays и, вероятно, больше в будущем. Решает также проблемы цикличных и рекурсивных структур, которые ломают JSON.
Shallow copy (поверхностное копирование)
Клонирование вложенных свойств по ссылке пропускается, нужно быть осторожным в использовании.
Задача 5
Как пишут на MDN web docs, инструкция метки (label) используется вместе с break или continue для альтернативного выхода из цикла. Метка добавляется перед блочным выражением в качестве ссылки, которая может быть использована в дальнейшем.
Задача 6
Яблоко стоит 1.15, апельсин стоит 2.30. Сколько они стоят вместе – чему равна сумма 1.15 + 2.30 с точки зрения JavaScript?
Число хранится в памяти в бинарной форме, как последовательность бит – единиц и нулей. Но дроби, такие как 1.15, 2.30, которые выглядят довольно просто в десятичной системе счисления, на самом деле являются бесконечной дробью в двоичной форме. Это объяснение взято с сайта Современный учебник JavaScript, там же можно подробно почитать про числа в языке.
Задача 7
Хотите вырасти от новичка до профессионала? Факультет Веб-разработки GeekUniversity даёт полтора года опыта для вашего резюме. Обучайтесь на практических заданиях, по-настоящему освойте фулстек-разработку и станьте ближе к профессии мечты.
Где JavaScript джуну получать тестовые задания для практики?
JavaScript джуну, как и любому начинающему программисту, необходимо оттачивать навыки. Мы составили подборку ресурсов с уймой тестовых заданий.
Есть проблема: новички могут сколь угодно штудировать теорию, но с практикой постоянно какая-то беда. Зачастую просто негде брать задания. В ВУЗе или на курсах преподаватели засыпают домашками, но вот с самостоятельным поиском все не так просто. Приходится либо искать уже решенные или, напротив, нерешаемые задачки на Stack Overflow, либо придумывать самому.
Наша подборка поможет в этом плане JavaScript джуну, ведь здесь мы собрали ресурсы с готовыми задачами для практики.
Проверяем начальные знания React, Redux, React-Router + разбор
Автор обеспечил подробный разбор первого ТЗ.
Усложнение задачи с добавлением Redux Async Actions
Второе задание из этой серии. Его цель состоит в том, чтобы определить уровень знаний Redux/React/React-Router. Работа с асинхронными запросами, взаимодействие клиента и сервера.
Расписан внешний вид приложения, бэкэнд и другие моменты.
Задачи на основы языка JavaScript
Базис? Да. Но нужно ведь существующему или будущему JavaScript джуну как-то начинать свой путь в веб-разработке. Есть как элементарные задачи, так и посложнее. Отличная возможность «набить руку». К заданиям также прилагаются решения, так что если не хотите сразу уже увидеть результат, не спешите опускать взгляд ниже условия.
Задачи по JavaScript
Данный ресурс также ориентирован на новичков. Те, кто предпочитает скучному текстовому формату визуальный ряд, попали по адресу. Все очень удобно и предоставлено в формате видео. Если хотите параллельно с основным обучением получать другие задания и оттачивать свои навыки, этот сайт подойдет как нельзя лучше.
Middle JavaScript Developer
А вот это будет посложнее, поскольку рассчитано на Middle. Тем не менее, можете испытать свои силы. На сайте вакансии от компании CSSSR приведено 3 небольших кейса, сделав которые, можете смело называть себя продвинутым джуном или мидлом. В качестве инструментов для работы используются CodePen, JSFiddle и Plunker.
«Тут собираем годные задачи»
Простые задачи на яваскрипт
Еще одна неплохая находка на GitHub. Здесь можно не только попрактиковаться, но и узнать кое-что интересное. В начале материала предоставлена ссылка на современный учебник Javascript, который поможет новичку разобраться во всех нюансах и заодно подготовиться к приведенным задачам.
Тесты
Без них тоже не обошлось, ведь это альфа и омега любого собеседования. Часто тесты построены таким образом, что для ответа нужно написать хоть небольшую, но программку. Так что по сути это все те же задачи, но с меньшим количеством требований и условий.
Сборная солянка
Хорошие ответы можно найти под этим вопросом. Не забывайте, что мы уже успели собрать немало ресурсов для практики в таких статьях, как 27 сайтов с задачками для оттачивания навыков программирования, а также Спортивное программирование и 5 ресурсов для решения задач. Если до сих пор туда не заглянули, самое время ознакомиться 🙂
Надеемся, наша подборка оказалась вам полезной. Если у вас есть на примете сайты, которые не были затронуты в статье, но заслуживают внимания, пожалуйста, укажите их в комментариях.
Вас также могут заинтересовать другие материалы по теме:
Задания по JS для прокачки
На основные знания
Базовые
Массивы
Объекты
У нас есть объект, в котором хранятся зарплаты нашей команды:
Напишите код для суммирования всех зарплат и сохраните результат в переменной sum. Должно получиться 390.
Если объект salaries пуст, то результат должен быть 0.
Создайте функцию multiplyNumeric(obj), которая умножает все числовые свойства объекта obj на 2.
Обратите внимание, что multiplyNumeric не нужно ничего возвращать. Следует напрямую изменять объект.
P.S. Используйте typeof для проверки, что значение свойства числовое.
Работа c DOM
Регулярные выражения
Ассинхронность
Полноценные приложения
Релизовать TODO-лист. Пример работы тут
Описание: Создаем пустое поле и кнопку для добавления в TODO лист. При нажатии на кнопку добавлем новый элемент задания в общий массив дел. Все задания выводится списком, каждое задание можно перечеркнуть как выполненое или полностью удалить (можно две кнопки вывести)
После того как сделаем функционал как в примере, добавьте возможность массовых действий (добавляем чекбокс рядом с каждым заданием) и если хоть один элемент выбран, то появляется две кнопки: «Сделать выполненным» и «удалить». Соответсвенно мы можем выбрать как один, так и много чекбоксов и все отмеченные удалить или сделать выполненными.
Далее добавить кнопку «Выбрать все», при клике на нее мы проставлем на все элементы, что они выбраны
Слайдер
Реализовать полноценный слайдер. Использовать классы для разработки. Слайдер создается следующим кодом:
Задание на джуна
Необходимо разработать приложение с использованием классов для отображения таблицы с данными.
Функционал
Для демонстрации работы компонента необходимо сделать простую HTML страницу. Пользователю предлагается выбрать набор данных: маленький или большой. При выборе набора данных он загружается с сервера и по данным строится таблица.
Формат данных от сервера
Сервер возвращает JSON-массив данных. Пример данных:
Замечания
Схема визуального представления данных
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.