Задачи на javascript – Существует ли хороший сборник задач по javascript, чтобы прокачаться? — Хабр Q&A

Где JavaScript джуну получать тестовые задания для практики?

JavaScript джуну, как и любому начинающему программисту, необходимо оттачивать навыки. Мы составили подборку ресурсов с уймой тестовых заданий.

Есть проблема: новички могут сколь угодно штудировать теорию, но с практикой постоянно какая-то беда. Зачастую просто негде брать задания. В ВУЗе или на курсах преподаватели засыпают домашками, но вот с самостоятельным поиском все не так просто. Приходится либо искать уже решенные или, напротив, нерешаемые задачки на Stack Overflow, либо придумывать самому.

Наша подборка поможет в этом плане JavaScript джуну, ведь здесь мы собрали ресурсы с готовыми задачами для практики.

Это задание позволит ближе познакомиться с redirect после dispatch. Задача состоит в том, чтобы создать приложение, способное показывать ряд страниц, таких как главная, страница авторизации, новости и профиль, недоступный без авторизации. Также заданы дополнительные условия вроде ссылок в шапке, вывода ошибок и деталей оформления.

Автор обеспечил подробный разбор первого ТЗ.

Второе задание из этой серии. Его цель состоит в том, чтобы определить уровень знаний Redux/React/React-Router. Работа с асинхронными запросами, взаимодействие клиента и сервера.

Расписан внешний вид приложения, бэкэнд и другие моменты.

Базис? Да. Но нужно ведь существующему или будущему JavaScript джуну как-то начинать свой путь в веб-разработке. Есть как элементарные задачи, так и посложнее. Отличная возможность "набить руку". К заданиям также прилагаются решения, так что если не хотите сразу уже увидеть результат, не спешите опускать взгляд ниже условия.

Данный ресурс также ориентирован на новичков. Те, кто предпочитает скучному текстовому формату визуальный ряд, попали по адресу. Все очень удобно и предоставлено в формате видео. Если хотите параллельно с основным обучением получать другие задания и оттачивать свои навыки, этот сайт подойдет как нельзя лучше.

А вот это будет посложнее, поскольку рассчитано на Middle. Тем не менее, можете испытать свои силы. На сайте вакансии от компании CSSSR приведено 3 небольших кейса, сделав которые, можете смело называть себя продвинутым джуном или мидлом. В качестве инструментов для работы используются CodePen, JSFiddle и Plunker.

Именно так называется тема на одном из форумов. Здесь пользователи делятся не только задачами, но и мнениями по поводу оных. Можно найти и баяны, и что-нибудь новое, пополнив арсенал своих умений. Единственное "но" - оживить беседу уже не получится, так как тема довольно старая, и вряд ли кто-то ответит на возникший вопрос.

Еще одна неплохая находка на GitHub. Здесь можно не только попрактиковаться, но и узнать кое-что интересное. В начале материала предоставлена ссылка на современный учебник Javascript, который поможет новичку разобраться во всех нюансах и заодно подготовиться к приведенным задачам.

Без них тоже не обошлось, ведь это альфа и омега любого собеседования. Часто тесты построены таким образом, что для ответа нужно написать хоть небольшую, но программку. Так что по сути это все те же задачи, но с меньшим количеством требований и условий.

Хорошие ответы можно найти под этим вопросом. Не забывайте, что мы уже успели собрать немало ресурсов для практики в таких статьях, как 27 сайтов с задачками для оттачивания навыков программирования, а также Спортивное программирование и 5 ресурсов для решения задач. Если до сих пор туда не заглянули, самое время ознакомиться 🙂

Еще один хороший способ откапывать задания - экспериментировать. Например, попробуйте написать приложение погоды или клон Трелло на JavaScript. Наблюдайте за сторонними проектами и старайтесь реализовывать понравившиеся детали: вот лучшая практика.

Надеемся, наша подборка оказалась вам полезной. Если у вас есть на примете сайты, которые не были затронуты в статье, но заслуживают внимания, пожалуйста, укажите их в комментариях.

Задачи по javascript - htmllab

Задачи по javascript - htmllab
  1. Задания по JavaScript посвящены первому знакомству со скриптовым языком программирования. Охватываются понятия базовых типов данных в языке, операторы, выражения, работа с переменными JS и их типами, а также тривиальные типы. Читать далее

  2. JavaScript циклы и управляющие конструкции предлагается изучать при помощи задач содержащих вопросы охватывающие работу с операторами if, switch, for, while. Операторы условного выбора (IF называют оператором ветвления),
    циклические операторы
    . do/while и for/in. Читать далее

  3. Создание функции в JavaScript помогает познакомится с удобным механизмом, облегчающим написание и использование кода. В JavaScript функции занимают особую роль, являются типом данных. Можно выполнить задачи по JavaScript базового уровня на функциях. Читать далее

  4. Задачи на работу с объектами важны для глубинного понимания языка программирования. JavaScript является объектно-ориентированным языком разработки, потому важно научиться решать задачи используя механизм объектов, массивов и функций. Читать далее

  5. JavaScript конструкторы, прототипное наследование, методы встроенных объектов — темы, которые требуются при устройстве на работу или свободной практике. При первом знакомстве с JS, если раньше не занимались программированием, на выполнение задач в JavaScript связанных с объектами придется затратить больше времени. Читать далее

  6. Задачи на регулярные выражения важны в работе программиста. Регулярные выражения — язык для построения шаблонов поиска и осуществления манипуляций с строками в тексте. Позволяет выполнять проверку строк на соответствие правилам шаблона, разбивать строки… Читать далее

  1. Задачи на работу с формами используются для закрепления материала на курсе JavaScript Расширенный Читать далее

  2. Задачи по объектной модели документа постоянно применяются JavaScript-разработчикамиЧитать далее

Задачи на работу с canvas на JavaScript

Перед решением задач изучите теорию к данному уроку.

Задачи для решения

Ответы на задачи смотрите в исходном коде страниц по ссылкам.

На линии

Нарисуйте на канвасе такую же фигуру, как показано в образце:

Вы можете открыть этот пример в отдельной вкладке браузера.

Нарисуйте на канвасе такую же фигуру, как показано в образце:

Вы можете открыть этот пример в отдельной вкладке браузера.

Нарисуйте на канвасе такую же фигуру, как показано в образце:

Вы можете открыть этот пример в отдельной вкладке браузера.

Нарисуйте на канвасе такую же фигуру, как показано в образце:

Вы можете открыть этот пример в отдельной вкладке браузера.

Нарисуйте на канвасе такую же фигуру, как показано в образце:

Вы можете открыть этот пример в отдельной вкладке браузера.

Нарисуйте на канвасе такую же фигуру, как показано в образце:

Вы можете открыть этот пример в отдельной вкладке браузера.

Используя методы moveTo и lineTo для рисования контура и метод fill для его заливки, нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

Используя методы moveTo и lineTo для рисования контура и метод fill для его заливки, нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

На фигуры

Для решения задач данного блока используйте следующие методы: fillRect, strokeRect, clearRect.

Используя метод fillRect, нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

Используя метод strokeRect, нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

Используя методы fillRect и clearRect, нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

На фигуры

Для решения задач данного блока используйте следующие методы: rect, stroke, fill.

Используя метод rect, нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

Используя метод rect, нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

На окружности

Для решения задач данного блока используйте следующие методы: arc.

Используя метод arc, нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

Используя метод arc, нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

Используя метод arc, нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

Используя метод arc, нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

Используя метод arc, нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

Используя метод arc, нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

На смену цвета

Для решения задач данного блока используйте следующие свойства: fillStyle, strokeStyle.

Используя цикл нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

Используя цикл нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

Используя цикл нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

Используя цикл нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

На циклы

Используя цикл нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

Используя цикл нарисуйте на канвасе следующую фигуру:

Вы можете открыть этот пример в отдельной вкладке браузера.

Задания по JavaScript - htmllab

Рыбы-бабочки

Задания по JavaScript посвящены первому знакомству со скриптовым языком программирования. Охватываются понятия базовых типов данных в языке, операторы, выражения, работа с переменными JS и их типами, а также тривиальные типы. Некоторые из задач помечены звездочкой, это означает, что их решение при первом знакомстве с языком может показаться трудным. Рекомендуется выполнить все задачи до перехода к задачам по управляющим конструкциям.

Задания по JavaScript

  1. Определите переменные str, num
    , flag и txt со значениями «Привет», 123, true, «true». При помощи оператора определения типа убедитесь, что переменных принадлежат типам: string, number, boolean.
  2. Создайте переменные a1, a2, a3, a4, a5. При помощи математических операторов (сложение, вычитание и т.д.) найдите значения выражений:
    5 + 3,
    5 - 3,
    5 * 3,
    5 / 3,
    поместив результат каждого выражения в соответствующую переменную. Например, let a1 = 5 + 3.
  3. Создайте переменные a6, a7, a8, a9, a10. Поместите в них результат выражений:
    5 % 3,
    3 % 5,
    5 + '3',
    '5' - 3,
    75 + 'кг'
    .
  4. Напишите скрипт, который находит площадь прямоугольника высота 23см. (в числовую переменную height), шириной 10см (в числовую переменную width), значение площади должно хранится в числовой переменной s.
  5. Напиши скрипт, который находит объем цилиндра высотой 10м (переменная heightC) и диаметром основания 4м (dC), результат поместите в переменную
    v
    .
  6. У прямоугольного треугольника две стороны n (со значением 3) и m (со значением 4). Найдите гипотенузу k по теореме Пифагора (нужно использовать функцию Math.pow(число, степень) или оператор возведения в степень ** ).
  7. (*) Найди двенадцатый элемент (let nFib = 12, el12;) последовательности Леонардо Пизанского (нужно использовать функцию Math.pow(число, степень)). Не забудьте округлить полученное число до целого — Math.round(число).
  8. (*) Даны размер ипотечного кредита (S — 2 млн.руб), процентная ставка (p  — 10%), кол-во лет (years — 5). Найти переплату по кредиту, значение переплаты должно содержаться в переменной perepl.

Если описанных заданий оказалось мало, можно смело брать учебник по математике, алгебре или геометрии, физике и пробовать реализовать скрипты, решающие задачи школьной программы.

Самый частый вопрос на курсах по JavaScript: «Как научиться решать задачи?». Ответ прост: надо как можно больше практиковаться. Следующий вопрос связан с первым: «Как практиковаться? Когда вы рассказываете, по отдельности темы понятны, а когда надо решать свою задачу — загвоздка». Рассказываю. Сначала надо разобраться с базовой работой в языке. Задать побольше вопросов по занятию преподавателю курса, решить как можно больше задач с занятия и тех, что описаны здесь.

Практика подсказывает, что те, кто целеустремленно выполняет эти две рекомендации — достигает успехов в программировании на JavaScript!

Посмотреть другие задания по JavaScript

Запись опубликована в рубрике Курсы JavaScript. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *