задания для практики 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 даёт полтора года опыта для вашего резюме. Обучайтесь на практических заданиях, по-настоящему освойте фулстек-разработку и станьте ближе к профессии мечты.

Источник

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.

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Источник

Задания по 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 ресурсов для решения задач. Если до сих пор туда не заглянули, самое время ознакомиться 🙂

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

Вас также могут заинтересовать другие материалы по теме:

Источник

codedokode / js-task-1.md

Простые задачи на яваскрипт

Сразу расскажу про несколько особенностей яваскрипта, о которых может быть не написано (или мало написано) в учебниках, но которые стоит понимать:

И еще: язык Ява (Java) не имеет никакого отношения к яваскрипту, похожи в них только название и часть синтаксиса.

В новом Javascript есть строгий режим:

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

Функции и замыкания

Функция при создании привязывается к набору переменных родительской функции и потому видит ее переменные:

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

Внешняя функция не видит переменных внутренней. Код, находящийся вне функций, в глобальном контексте, не видит внутренние (локальные) переменные.

Порядок создания переменных

Локальные переменные (объявленные через var) создаются при входе в функцию, до выполнения ее кода. При этом им изначально присваивается undefined:

Этот код выполняется так:

Копирование по значению и по ссылке

Объекты (а это в том числе массивы (Array), функции (Function), регулярки (RegExp), даты (Date)) копируются и передаются в/из функции по ссылке:

Объекты (а значит и массивы, и функции, так как они тоже ими являются) сравниваются по идентичности, то есть тому, что это ссылки на один и тот же объект:

Ложные и правдивые значения

У примитивных значений (примитивные = не-объекты, то есть числа, строки, true / false / null / undefined ) нет свойств и методов (они есть только у объектов). При попытке обратиться к свойствам/методам примитивов происходит боксинг: яваскрипт создает временный объект из примитива и обращается к нему (сам примитив остается неизменным). Для чисел создается объект «класса» Number, для true / false Boolean, для строк — String (вот мы и узнали, зачем были нужны эти встроенные классы). Для null и undefined выдается ошибка. То есть код

Превращается внутри в:

Потому присвоить свойство примитиву можно, но оно не сохранится — ведь оно создалось на временном объекте.

Это легко объяснить, если записать что происходит с учетом боксинга:

Боксинг сделан для того, чтобы с примитивами можно было работать как с объектами, например, вызывая у них методы. Само разделение на примитивы и объекты сделано из-за соображений производительности: если бы числа и строки были настоящими объектами, все работало бы медленнее. Если тебе понадобится (100% что не понадобится), ты можешь сделать боксинг и анбоксинг вручную:

Проверялка для первых 10 задачек от @dkab: http://dkab.github.io/jasmine-tests/ (робот не совершенен и может ошибаться. Если ты думаешь, что он не прав, напиши на codedokode@gmail.com и не забудь приложить свою программу — мы разберемся и вправим ему мозги).

Также, нужна функция take(gen, x) которая вызвает функцию gen заданное число ( x ) раз и возвращает массив с результатами вызовов. Она нам пригодится для отладки:

Обрати внимание: функция не должна изменять переданный ей массив:

Это аналог array_map из PHP.

А, еще, сделай тогда, чтобы в качестве gen можно было указать функцию с аргументами, и при вызове

Частичное применение (partial application)

Есть функция с аргументами:

Мы можем с помощью partial сделать из нее функцию с меньшим числом аргументов, заранее задав значения для нескольких из них, например:

будет равносилен вызову:

Кстати, имеющийся в новых версиях JS метод bind() тоже может делать частичное применение: http://frontender.info/partial-application-in-javascript-using-bind/ Но ты должен обойтись без его использования, и написать свой велосипед.

В библиотеках тоже есть такой метод: http://lodash.com/docs#bind

Такая функция была в lodash: http://lodash.com/docs#pluck но теперь вместо нее советуют использовать map: https://lodash.com/docs/4.15.0#map

Функция не должна изменять исходный массив.

Функция не должна изменять исходный массив:

Напиши функцию, считающую число свойств в объекте:

Можешь взять оттуда первые 5-10 городов и перенести в код. Города в списке могут идти в произвольном порядке. Напиши программу, которая отберет и выведет N самых населенных городов по убыванию числа жителей.

Некая сеть фастфудов предлагает несколько видов гамбургеров:

Гамбургер может быть с одним из нескольких видов начинок (обязательно):

Дополнительно, гамбургер можно посыпать приправой (+ 15 тугриков, 0 калорий) и полить майонезом (+ 20 тугриков, + 5 калорий). Напиши программу, расчиытвающую стоимость и калорийность гамбургера. Используй ООП подход (подсказка: нужен класс Гамбургер, константы, методы для выбора опций и рассчета нужных величин).

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

Написанный класс должен соответствовать следующему jsDoc описанию (то есть содержать указанные методы, которые принимают и возвращают данные указанного типа и выбрасывают исключения указанного типа. Комментарии ниже можно скопировать в свой код):

Комментарии. Эта задача вызывает много непонимания, потому внимательно прочти эти комментарии перед решением.

Почему? Потому что каждый должен заниматься своим делом, класс должен только обсчитывать гамбургер, а вводом-выводом пусть занимаются другие. Иначе мы получим кашу, где разные функции смешаны вместе.

Типы начинок, размеры надо сделать константами. Никаких магических строк не должно быть.

Переданную информацию о параметрах гамбургера класс хранит внутри в своих полях. Вот как может выглядеть использование этого класса:

Обрати внимание в коде выше на такие моменты:

В дополнение, вот еще инструкция, как решать задачи на ООП. Когда ты решаешь задачу на ООП, ты должен ответить на вопросы:

Если ты знаешь ООП в каком-то другом языке (например PHP, Java, Python), вот список соответствий между другими языками и JS:

В ES5 константы можно реализовывать через свойства только для чтения. В ES6 добавлен синтаксис для классов (с константами), но для начала научись делать все по старинке, на ES3, так как такой код встретится в 99% библиотек. Вот новый синтаксис: http://frontender.info/es6-classes-final/

Обрати внимание, что в ES6 добавлен лишь синтаксис, и в итоге создается та же самая имитация класса через прототипы. Потому сначала ты должен научиться создавать их вручную, а потом только переходить на удобный синтаксис.

13. В одном городе есть электрическая сеть. К ней могут быть подключены:

Дан список всех элементов электросети. Напиши программу, рассчитывющую, сколько электричества необходимо закупить (или можно продать) днем и ночью для обеспечения баланса и сколько это будет стоить (или принесет прибыли). Используй продвинутый ООП подход для решения задачи.

14. напиши функцию, определяющую тип переменной. Результат должен быть одной из строк: ‘undefined’, ‘boolean’ (для true/false), ‘null’, ‘number’, ‘string’, ‘function’, ‘array’, ‘array-like’, ‘object’

Обычно для решения этой задачи используется хак с Object.prototype.toString.call(. ) : https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/toString#Example:_Using_toString_to_detect_object_type (обрати внимание: JS позволяет с помощью call() и apply() вызвать метод на произольном объекте, передав в качестве this что угодно).

15. Напиши функцию неглубокого копирования объектов и массивов.

По умолчанию, как ты наверно, знаешь, при копировании объектов или массивов (которые являются объекты) мы копируем лишь ссылку на тот же самый объект:

Функция неглубокого копирования должна создавать новый массив/объект, и копировать в него элементы из старого. При этом сами элементы копируются по ссылке:

В библиотеке lodash для неглубокого копирования есть функция clone: http://lodash.com/docs#clone

16. Напиши функцию глубокого копирования объектов и массивов. Она должна делать не только копию переданного объекта/массива, но и копии вложенных них объектов/массивов. Также, копироваться должны объекты встроенного в JS конструктора Date

Решать можешь потом, так как сейчас не факт что ты сможешь их решить. Правильные ответы можно увидеть например в коде библиотеки lodash:

DOM, который построил Джек

Дальше идут задания на работу с DOM и событиями. DOM = Document Object Model — это набор объектов, которые соответствуют содержимому HTML-страницы, и позволяют взаимодействовать с и изменять содержимое страницы в браузере. Обычно каждому тегу на странице соответствует отдельный узел дерева DOM. Узлы образуют дерево, и для каждого узла можно получить родительский узел, список узлов-детей, соседние узлы.

CSSOM = CSS Object Model — это свойства и методы этих объектов, которые позволяют изменять CSS-стили элементов, а также получать информацию об их размерах и положении.

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

Теория для изучения (читать можно параллельно с решением задач):

Источник