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 для новичков
Учебник 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 ячеек).
Дан список и кнопка. По нажатию на кнопку посортируйте пункты списка по возрастанию.
Дан ряд ссылок. Сделайте так, чтобы по нажатию на ссылку она становилась с красным фоном. По нажатию на другую ссылку выделение первой ссылки снимается и выделяется та, на которую мы нажали. В абзац ниже пишите текст активной ссылки.
Минипроекты 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 Практика
Избегайте глобальных переменных
Сведите к минимуму использование глобальных переменных.
Сюда входят все типы данных, объекты и функции.
Глобальные переменные и функции могут быть перезаписаны другими скриптами.
Вместо этого используйте локальные переменные и узнайте, как использовать закрытие.
Всегда объявлять локальные переменные
Все переменные, используемые в функции, должны быть объявлены как локальные переменные.
Локальные переменные должны быть объявлены с var ключевым словом или let ключевым словом, иначе они станут глобальными переменными.
Строгий режим не допускает необъявленных переменных.
Объявления сверху
// Объявление в начале
var firstName, lastName, price, discount, fullPrice;
// Использовать позже
firstName = «John»;
lastName = «Doe»;
price = 19.90;
discount = 0.10;
Это также касается переменных цикла:
// Объявление в начале
var i;
// Использовать позже
for (i = 0; i
Инициализировать переменные
Инициализация переменных дает представление о предполагаемом использовании (и предполагаемом типе данных).
Никогда не объявляйте числовые, строковые или логические объекты
Всегда обрабатывайте числа, строки или логические значения как примитивные значения. Не как объекты.
Объявление этих типов как объектов снижает скорость выполнения и вызывает неприятные побочные эффекты:
Пример
Пример
Не использовать new Object()
Пример
Остерегайтесь автоматического преобразования типов
Помните, что числа могут быть случайно преобразованы в строки или NaN (не число).
JavaScript слабо типизирован. Переменная может содержать разные типы данных, а переменная может изменять свой тип данных:
Пример
При выполнении математических операций JavaScript может преобразовывать числа в строки:
Пример
Вычитание строки из строки не приводит к ошибке, но возвращает NaN (не число):
Пример
Используйте === сравнение
Оператор == сравнения всегда преобразуется (в соответствующие типы) перед сравнением.
Оператор === заставляет сравнивать значения и тип:
Пример
0 == «»; // true
1 == «1»; // true
1 == true; // true
0 === «»; // false
1 === «1»; // false
1 === true; // false
Использовать значения параметров по умолчанию
Пример
ECMAScript 2015 позволяет использовать параметры по умолчанию в определении функции:
Узнайте больше о параметрах и аргументах Параметры функции.
Завершите свои переключатели настройками по умолчанию
Пример
Избегайте использования eval()
Функция eval() используется для запуска текст в качестве кода. Практически во всех случаях нет необходимости использовать его.
Поскольку он позволяет запускать произвольный код, он также представляет проблему безопасности.
Где 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 ресурсов для решения задач. Если до сих пор туда не заглянули, самое время ознакомиться 🙂
Надеемся, наша подборка оказалась вам полезной. Если у вас есть на примете сайты, которые не были затронуты в статье, но заслуживают внимания, пожалуйста, укажите их в комментариях.