Что написать на javascript для тренировки
Задачи по 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 джуну, как и любому начинающему программисту, необходимо оттачивать навыки. Мы составили подборку ресурсов с уймой тестовых заданий.
Есть проблема: новички могут сколь угодно штудировать теорию, но с практикой постоянно какая-то беда. Зачастую просто негде брать задания. В ВУЗе или на курсах преподаватели засыпают домашками, но вот с самостоятельным поиском все не так просто. Приходится либо искать уже решенные или, напротив, нерешаемые задачки на 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 ресурсов для решения задач. Если до сих пор туда не заглянули, самое время ознакомиться 🙂
Надеемся, наша подборка оказалась вам полезной. Если у вас есть на примете сайты, которые не были затронуты в статье, но заслуживают внимания, пожалуйста, укажите их в комментариях.
Вас также могут заинтересовать другие материалы по теме:
Минипроекты 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 ряды таблицы сортировались по значениям этого столбца.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Где можно потренировать навыки JavaScript OOP?
Идея такова: взяться за написание большого/среднего приложения на JS, для того что бы выработать «правильное мышление на JS» и писать высококачественный код без велосипедов, проработать проектирование и реализацию JS приложения. Как известно JS сильно отличается от других языков (наследование на прототипах, своеобразный стиль кода, свои паттерны).
Мне нужно что то на подобие технического задания приложения, в котором будет жёсткий платсдарм для тренировки ООП и сложного AJAX взаимодействия.
Может у кого-либо были проекты на которых удалось хорошо натренировать JS. Не абстрактные примеры из книг, что либо из реального мира. Практическое приложение под реальный проект. Так же было бы хорошо увидеть ссылки на хороший код, читая который можно улучшить свои навыки. Или может быть кто расскажет о своих разработках большого/среднего масштаба.
Какой-то есть опыт с js?
Если его нету. Начните с начал и т.п., иначе изучение чужого кода ничего не даст
OOP в JS нет, в том понимании что вы предлагаете.
Придется постигать дзен JS.
Задать жесткие условия сделать все красиво и с паттернами можно и самому.
Задание тоже.
Возможно, вам подойдет использование фреймворка, ведь знакомство с ними помогает писать код в том же стиле что и сам фремворк.
Изучать их исходники даст примеры использования и хороших практик.
Примеры заданий:
клон Sticky Notes для винды
Рисовалка на canvas
Расширение для браузера, фильтрующее рекламу на странице без использования черных списков. Анализ содержания текста.
«Умный собеседник» с распознаванием речи пользователя через google api
Клиентский агрегатор новостей.
Плеер в связке ВК + last.fm
Шахматы на three.js
Плагин/Модуль для фремворка (в процессе создания проектов, самому захочется добавить функционал)
Может идеи вам и не понравятся.
Есть другой вариант. Ищем интересный таск на freelansim.ru
Делаем, в процессе получаем опыт. PROFIT.
Да. Вопрос в уровне и желании. Я до сих пор до конца не въехал в эту «своеобразность».
Последнюю неделю пытаюсь разобраться в библиотеке KnockoutJS — построение MVVM модели и автоматическая привязка данных к интерфейсу (т.н. observables). Т.е. отслеживание изменений там или там, и соотв. изменение в остальной части приложения (на Хабре были статьи).
У меня есть несколько задач:
1. сделать для knockout новый тип структуры, реализующий подобие коллекций из backbone.js
2. написать расширение базовых классов KO для простого добавления функционала редактирования списка и добавления элементов в коллекцию. Типа навешиваем расширение на тип, и теперь можем реализовать простое редактирование с возможностью отката изменений.
3. на базе этого написать класс небольшого виджета, который мог бы сам на основе модели генерировать форму для структуры данных, точнее коллекции таких записей.
Т.е. хотя бы частично упростить работу с многоуровневой структурой коллекций данных и осуществления связи всего этого с интерфейсом для их редактирования.