Задачи по 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 даёт полтора года опыта для вашего резюме. Обучайтесь на практических заданиях, по-настоящему освойте фулстек-разработку и станьте ближе к профессии мечты.
Что написать для тренировки на js с нуля?
На сегодняшний день уже умею верстать адаптивно, использую БЭМ и препроцессор, разбираюсь со сборкой. Но хочется углубиться в JS 🙂
Всем спасибо за ответы!
Простой 1 комментарий
Из того, что часто может пригодится в вебе
+ можешь поискать топ сайтов и попробовать повторить интересные штуки из них
+ jQuery
+ фрейморки, например Vue
+ node js
Создай json файл и от него генерируй какое-нибудь симпатичное ленивое дерево. К примеру в начале у тебя грузится дерево из 3-х групп. По нажатию на группу происходит загрузка данных. В этот момент ты делаешь анимацию этого действия. Получив данные дорисовываешь дерево новыми данными. В качестве api можешь взять json-server https://github.com/typicode/json-server
1. Напишите игру «крестики-нолики».
2. Напишите игру «Арканоид».
3. Напишите игру «Сокобан».
Бонус (как обычно, но для ценителей жанра): тут
Command and Conquer is the grand-daddy of all Real Time Strategy games and is probably the game that made the genre popular.
Минипроекты JavaScript для новичков
Учебник JavaScript
Практика
Работа с DOM
Практика
Некоторые продвинутые вещи
Рекомендованное ES6
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Регулярки
Разное
Работа с канвасом
Практика
Контекст
Drag-and-Drop
Практика по ООП
Ваша задача: посмотрите, попробуйте повторить.
Практика
Promise ES6
Библиотека jQuery
Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.
Перед решением задач изучите теорию к данному уроку.
ВНИМАНИЕ Вместо задач этого урока вышел отдельный спец курс:
http://theory.phphtml.net/courses/javascript/practice/1/c.html
http://theory.phphtml.net/courses/javascript/practice/1/h.html
Меняйте число в адресе, будете попадать на следующий урок, всего 13 уроков (дз есть не везде).
ПЕРЕД этими уроками посмотрите урок на анонимные функции (он ниже по учебнику).
Задачи для решения
Реализуйте калькулятор. Должны быть кнопки цифр и операций. По нажатию на кнопку ‘=’ должен посчитаться результат. Совет: используйте фунцию eval.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Реализуйте игру крестики-нолики. Играет два человека, на одном поле по очереди.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Реализуйте тест, в котором показывается один вопрос, 5 чекбоксов для ответа (может быть несколько правильных ответов). Под чекбоксами ссылка ‘следующий вопрос’. По нажатию на эту ссылку вместо текущего вопроса показывается следующий. Когда вопросы заканчиваются, в последнем вопросе будет стоять ссылка не ‘следующий вопрос’, а ‘показать результат’.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Решите предыдущую задачу, но при условии, что баннер появлятся не по прокрутке, а через N секунд после захода пользователя на страницу.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Реализуйте квадратный календарик (как в винде).
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Реализуйте органайзер. Он представляет собой календарик, нажимая на даты которого можно увидеть список задач, запланированных на этот день.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Реализуйте аккордион (погуглите, что это).
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Дана таблица. В верхнем ряду th. Сделайте так, чтобы по нажатию на определенный th ряды таблицы сортировались по значениям этого столбца.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Задания по JS для прокачки
На основные знания
Базовые
Массивы
Объекты
У нас есть объект, в котором хранятся зарплаты нашей команды:
Напишите код для суммирования всех зарплат и сохраните результат в переменной sum. Должно получиться 390.
Если объект salaries пуст, то результат должен быть 0.
Создайте функцию multiplyNumeric(obj), которая умножает все числовые свойства объекта obj на 2.
Обратите внимание, что multiplyNumeric не нужно ничего возвращать. Следует напрямую изменять объект.
P.S. Используйте typeof для проверки, что значение свойства числовое.
Работа c DOM
Регулярные выражения
Ассинхронность
Полноценные приложения
Релизовать TODO-лист. Пример работы тут
Описание: Создаем пустое поле и кнопку для добавления в TODO лист. При нажатии на кнопку добавлем новый элемент задания в общий массив дел. Все задания выводится списком, каждое задание можно перечеркнуть как выполненое или полностью удалить (можно две кнопки вывести)
После того как сделаем функционал как в примере, добавьте возможность массовых действий (добавляем чекбокс рядом с каждым заданием) и если хоть один элемент выбран, то появляется две кнопки: «Сделать выполненным» и «удалить». Соответсвенно мы можем выбрать как один, так и много чекбоксов и все отмеченные удалить или сделать выполненными.
Далее добавить кнопку «Выбрать все», при клике на нее мы проставлем на все элементы, что они выбраны
Слайдер
Реализовать полноценный слайдер. Использовать классы для разработки. Слайдер создается следующим кодом:
Задание на джуна
Необходимо разработать приложение с использованием классов для отображения таблицы с данными.
Функционал
Для демонстрации работы компонента необходимо сделать простую HTML страницу. Пользователю предлагается выбрать набор данных: маленький или большой. При выборе набора данных он загружается с сервера и по данным строится таблица.
Формат данных от сервера
Сервер возвращает JSON-массив данных. Пример данных:
Замечания
Схема визуального представления данных
Где 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 ресурсов для решения задач. Если до сих пор туда не заглянули, самое время ознакомиться 🙂
Надеемся, наша подборка оказалась вам полезной. Если у вас есть на примете сайты, которые не были затронуты в статье, но заслуживают внимания, пожалуйста, укажите их в комментариях.
