javascript сайт для практики
Подборка лучших ресурсов для обучения JavaScript.
Наткнулся тут на сайте proglib.io на очень интересную подборку ресурсов для всех желающих начать изучать JavaScript. Лично для меня, тема крайне актуальная, потому не смог удержаться и решил разместить данный текст у себя (разумеется со ссылкой на первоисточник), чтобы не плодить и без того огромную коллекцию закладок в моём браузере Safari.
Погружение в язык
Без глубокого понимания концепций языка программист не может профессионально развиваться. У JavaScript джуна впереди увлекательная дорога, полная загадок и открытий. Выбирайте ваш любимый способ обучения и начинайте погружение!
Видео-уроки по ES6
Современные JavaScript Junior, возможно, никогда не сталкивались с цепочками прототипов и асинхронными «велосипедами». Сейчас на фронтенде правит бал стандарт ES6. Смотрите один из самых лучших курсов в рунете от CodeDojo:
Основы
Про то, что происходит под капотом, тоже нельзя забывать. Разобраться с конструкторами и прототипами поможет видеокурс freeCodeCamp и этот плейлист loftblog:
JavaScript был рожден, чтобы манипулировать веб-страницами. Это по-прежнему одна из основных задач языка. Лекция Дмитрия Лаврика окончательно прояснит все моменты работы с объектной моделью документа:
Книги
Держите лучшие в мире книги для JavaScript Junior, если вы еще не успели изучить их от корки до корки:
Онлайн-учебники
90% русскоязычных джуниоров учат JavaScript по учебнику Ильи Кантора. А вот еще один отличный ресурс с классической структурой «от простого к сложному».
Полезные статьи
Листание популярных интернет-сайтов IT-тематики – важная часть образования JavaScript Junior. Чтение статей помогает:
Документация
Последнее прибежище разработчика – документация языка. Вам придется обращаться к ней не раз, поэтому будьте знакомы, Mozilla Developer Network. А здесь вы можете узнать немного о темной стороне спецификации.
Инструменты и инфраструктура
Для эффективной и быстрой разработки важно обустроить удобную рабочую среду. Все современные проекты используют сборщики и системы контроля версий. JavaScript Junior должен в этом разбираться.
Node и сборщики файлов
Великолепный скринкаст Ильи Кантора введет вас в курс дела и поможет освоиться с платформой Node.js:
После этого можно переходить к изучению сборщиков: Gulp или Webpack на том же канале.
А вот несколько полезных статей для начала:
Git – самая популярная система контроля версий, она используется во многих проектах, поэтому JavaScript Junior должен в ней разбираться. Основные сведения можно почерпнуть из книги Pro Git или видео-курса по основам Git. А эта замечательная интерактивная игра поможет разобраться с моделями ветвления.
Шпаргалки по командам сэкономят ваше время:
Отладка кода
Отладка – неотъемлемая часть программирования. Главный помощник JavaScript джуниора – консоль разработчика Google Chrome. Чем быстрее вы с ней подружитесь, тем эффективнее будет ваша работа. В помощь вам короткое, но очень информативное видео от школы Hillel:
Фреймворки
Многие компании создают свои продукты на базе современных JavaScript-фреймворков, которые позволяют с легкостью делать очень сложные вещи. Их изучение не только станет огромным плюсом в вашем резюме, но и позволит лучше понять механизмы работы и возможности языка.
React
Освоить основы самого популярного JS-фреймворка поможет этот учебник. В нем понятно разобраны все базовые вопросы, начиная с JSX-синтаксиса и заканчивая моделью Redux.
Еще пара статей по Redux с примерами:
Разобравшись, начинайте экспериментировать. Напишите собственный чат или попробуйте осилить вот этот мастер-класс по созданию бухгалтерского приложения:
Angular
Еще один популярный фреймворк, с которым может встретиться JavaScript Junior. Не путайте AngularJS (он уже устарел) и просто Angular. Проект активно развивается, выходят новые версии. Чтобы не потеряться в них, держите постоянно обновляющийся учебник. А если вы знаете английский, то обязательно посмотрите скринкаст по Angular 6. В качестве шпаргалки вполне подойдет этот конспект по Angular 5.
Священная война фреймворков в самом разгаре. Если вы еще не сделали свой выбор, возможно эта статья поможет Angular vs. React: что лучше для веб-разработки?
Vue.js
Практика для JavaScript Junior
Самое сложное для джуниора – превратить теоретические знания в практические умения. Вот несколько материалов вам в помощь:
А лучше всего создайте свою игру. Это полезно и интересно.
Прежде чем бросаться с головой в обучение, посмотрите это коротенькое видео об ошибках, которые совершают джуниоры:
Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.
Комментариев: 1
Отличная подборка. Для начинающих то, что надо. Не нужно искать самому разные статьи и программы, все на месте. Спасибо.
Где 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.
Перед решением задач изучите теорию к данному уроку.
Задачи для решения
Даны 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 ячеек).
Дан список и кнопка. По нажатию на кнопку посортируйте пункты списка по возрастанию.
Дан ряд ссылок. Сделайте так, чтобы по нажатию на ссылку она становилась с красным фоном. По нажатию на другую ссылку выделение первой ссылки снимается и выделяется та, на которую мы нажали. В абзац ниже пишите текст активной ссылки.
Задания по JS для прокачки
На основные знания
Базовые
Массивы
Объекты
У нас есть объект, в котором хранятся зарплаты нашей команды:
Напишите код для суммирования всех зарплат и сохраните результат в переменной sum. Должно получиться 390.
Если объект salaries пуст, то результат должен быть 0.
Создайте функцию multiplyNumeric(obj), которая умножает все числовые свойства объекта obj на 2.
Обратите внимание, что multiplyNumeric не нужно ничего возвращать. Следует напрямую изменять объект.
P.S. Используйте typeof для проверки, что значение свойства числовое.
Работа c DOM
Регулярные выражения
Ассинхронность
Полноценные приложения
Релизовать TODO-лист. Пример работы тут
Описание: Создаем пустое поле и кнопку для добавления в TODO лист. При нажатии на кнопку добавлем новый элемент задания в общий массив дел. Все задания выводится списком, каждое задание можно перечеркнуть как выполненое или полностью удалить (можно две кнопки вывести)
После того как сделаем функционал как в примере, добавьте возможность массовых действий (добавляем чекбокс рядом с каждым заданием) и если хоть один элемент выбран, то появляется две кнопки: «Сделать выполненным» и «удалить». Соответсвенно мы можем выбрать как один, так и много чекбоксов и все отмеченные удалить или сделать выполненными.
Далее добавить кнопку «Выбрать все», при клике на нее мы проставлем на все элементы, что они выбраны
Слайдер
Реализовать полноценный слайдер. Использовать классы для разработки. Слайдер создается следующим кодом:
Задание на джуна
Необходимо разработать приложение с использованием классов для отображения таблицы с данными.
Функционал
Для демонстрации работы компонента необходимо сделать простую HTML страницу. Пользователю предлагается выбрать набор данных: маленький или большой. При выборе набора данных он загружается с сервера и по данным строится таблица.
Формат данных от сервера
Сервер возвращает JSON-массив данных. Пример данных:
Замечания
Схема визуального представления данных
Минипроекты 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 ряды таблицы сортировались по значениям этого столбца.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.