Задания javascript для начинающих

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

• Урок №
  Введение, задач нет
• Урок №
  Работа с регулярными
  выражениями. Глава 1.
• Урок №
  Работа с регулярными
  выражениями. Глава 2.
• Урок №
  Работа с регулярными
  выражениями. Глава 3.
• Урок №
  Работа с регулярными
  выражениям. Глава 4.
• Урок №
  Отличия
  от PHP версии

Разное

Работа с канвасом

• Урок №
  Введение, задач нет
• Урок №
  Основы
  работы с canvas
• Урок №
  Продвинутая
  работа с canvas

Практика

• урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
  Работа с
  AJAX в JavaScript –>
  Работа с
  AJAX + PHP –>

Контекст

• Урок №
  Введение, задач нет
• Урок №
  Продвинутая
  работа с контекстом

Drag-and-Drop

• Урок №
  Введение, задач нет
• Урок №
  Основы
  работы с ООП
• Урок №
  Наследование
  классов в JavaScript
  Продвинутая работа
  с классами на JavaScript –>
• Урок №
  Применение
  ООП при работе с DOM
• Урок №
  Практика
  по ООП в JavaScript
• Тут скоро будут еще уроки
  по функциональному и прототипному
  стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

Данный раздел сайта содержит задачи по JavaScript+jQuery с начального уровня до продвинутого.

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

• Урок №
  Введение, задач нет
• Урок №
  Работа с регулярными
  выражениями. Глава 1.
• Урок №
  Работа с регулярными
  выражениями. Глава 2.
• Урок №
  Работа с регулярными
  выражениями. Глава 3.
• Урок №
  Работа с регулярными
  выражениям. Глава 4.
• Урок №
  Отличия
  от PHP версии

Разное

Работа с канвасом

• Урок №
  Введение, задач нет
• Урок №
  Основы
  работы с canvas
• Урок №
  Продвинутая
  работа с canvas

Практика

• урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
  Работа с
  AJAX в JavaScript –>
  Работа с
  AJAX + PHP –>

Контекст

• Урок №
  Введение, задач нет
• Урок №
  Продвинутая
  работа с контекстом

Drag-and-Drop

• Урок №
  Введение, задач нет
• Урок №
  Основы
  работы с ООП
• Урок №
  Наследование
  классов в JavaScript
  Продвинутая работа
  с классами на JavaScript –>
• Урок №
  Применение
  ООП при работе с DOM
• Урок №
  Практика
  по ООП в JavaScript
• Тут скоро будут еще уроки
  по функциональному и прототипному
  стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

Пару слов о задачнике

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

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

Чтобы посмотреть результат выполнения исходного кода решения задачи во фрейме кодового блока, используйте кнопку ‘Результат’ .

Оглавление задачника

§1.1. Введение в JavaScript

Напоминаю, на локальном сервере у вас должна быть создана папка ‘test’ , в которой и должны располагаться наши тестируемые файлы: html -страницы, css -таблицы, js -файлы, php -файлы, различные служебные файлы и т.д.

1. Создайте простейшую веб-страницу, в теле документа которой будет присутствовать только один абзац с произвольным текстом. При помощи внешнего скрипта в заголовке документа выведите сообщение ‘Всем привет от JavaScript!’ . Далее в теле документа перед абзацем используйте встроенный сценарий и выведите сообщение ‘Я – встроенный сценарий JavaScript!’ . Затем после абзаца при помощи второго внешнего скрипта выведите сообщение ‘Я – второй внешний сценарий JavaScript!’ . Показать решение.

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

Условие задачи №2

3. Создайте простейшую веб-страницу, в теле документа которой будет присутствовать только один абзац с произвольным текстом. В заголовке документа подключите к страничке внешний скрипт, который будет выводить модальное окно с вопросом "Установить синий цвет шрифта?" . При нажатии на кнопку ‘ОК’ должно выводиться сообщение ‘Извините, краски закончились!’ , а при нажатии на кнопку ‘Cancel’ – ‘Ну, и ладненько!’ . Показать решение.

4. Создайте простейшую пустую веб-страницу. В теле документа подключите к страничке внешний скрипт, который будет выводить при помощи метода prompt() модальное окно с заголовком "Введите ваш возраст" . По умолчанию в поле ввода должно присутствовать значение по умолчанию ’25’ . При нажатии на кнопку ‘ОК’ должно выводиться сообщение ‘Спасибо, ваш возраст учтен!’ , а при нажатии на кнопку ‘Cancel’ – ‘Ну, и зря!’ . Показать решение.

5. Среди представленных записей укажите литералы: "53" , 53 , ‘Адын кофе’ , a==5 , "a==5" , b . Показать решение.

6. Перечислите правильно составленные идентификаторы, сопровождая свой выбор пояснениями: f , f2 , d5 , 3d , abc , ABC , $h , h$2 , _h_2 , h_2_ , _$h , 2_h , ruEn , d3.f3 , d3_f3 , d3 f3 , эй_Hey , свободный_дом2 , ухТы. , 3дом_слева , F15 , gggggggggg , d’25’ , s_8 . Показать решение.

7. Составьте имя переменной в ‘верблюжей’ и ‘змеиной’ нотациях, используя фразу ‘show must go on’ . Показать решение.

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

Условие задачи №8

9. Объявите переменную fruits . Отдельной инструкцией присвойте ей значение ‘5 яблок’ . Выведите значение переменной сообщением на экран. Показать решение.

10. Объявите переменную sum . Одной инструкцией объявите две переменных a и b , присвоив им какие-нибудь числа. Присвойте переменной sum сумму переменных a и b . Выведите значение переменной sum на экран. Показать решение.

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

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

На 2016 год есть 3 версии: ES3, ES5 (он же ES Harmony), ES6 (aka ES Next или ES 2015). ES значит «ECMAScript», а название «JavaScript» это защищенная торговая марка и ее нельзя так просто использовать. ES3 это версия которая работает во всех браузерах с 2000 года, включая древний IE6. ES5, ES6 (подробнее на learn.JS) – новые, их уровень поддержки браузерами описан тут:

На 2016 год писать на ES5, а тем более на ES6 рановато, делать это можно, только если ты пишешь какой-то внутренний проект, например, который будет использоваться только внутри компании и у всех пользователей есть современная версия браузера. Некоторые решают эту проблему транспайлером – компилятором, преобразующим ES5/6 код в ES3.

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

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

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

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

Функции — это объекты. У них есть свойства (например length ) и методы (например toSource , apply и call ). Функции можно хранить в переменных, передавать и возвращать из других функций:

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

• Код 1 видит переменные a, b и функцию f2 (и f1 тоже)
• Код 2 видит свои переменные d, e, а также родительские a, b, и f2 (и f1 тоже)
• Код 3 видит переменную f, а также d, e, a, b, f2 (и f1 тоже)

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

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

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

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

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

• создать переменную a и присвоить ей undefined
• выполнить первый console.log
• присвоить a значение 2
• выполнить второй console.log

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

Примитивные значения дублируются при копировании, копирование объектов просто копирует ссылку на один и тот же объект. Примитивные значения — это не-объекты, то есть null , undefined , числа, true / false , строки. Если ты их присваиваешь переменной, передаешь или возвращаешь из функции, создается новая независимая копия значения:

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

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

Во втором случае у нас 2 разных объекта и получается false . <> всегда создает новый объект. По этой причине <> === <> , [] === [] , function()<> === function()<> всегда дают false . И вообще, любое сравнение объекта с [] или <> даст false .

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

Falsy (ложных? лживеньких?) значений ровно 7, их надо знать наизусть: 0 , -0 (да, в программировании есть отрицательный ноль), NaN , null , undefined , ” (пустая строка), false . Все остальные значения truthy, в том числе ‘0’ (строка из символа 0). При преобразовании в логический (булев) тип falsy значения преовращаются в false , а все остальные — в true :

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

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

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

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

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

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

Напиши функцию создания генератора sequence(start, step) . Она при вызове возвращает другую функцию-генератор, которая при каждом вызове дает число на 1 больше, и так до бесконечности. Начальное число, с которого начинать отсчет, и шаг, задается при создании генератора. Шаг можно не указывать, тогда он будет равен одному. Начальное значение по умолчанию равно 0. Генераторов можно создать сколько угодно.

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

Напиши функцию map(fn, array) , которая принимает на вход функцию и массив, и обрабатывает каждый элемент массива этой функцией, возвращая новый массив. Пример:

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

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

Напиши функцию fmap(a, gen) , которая принимает на вход 2 функции, a и gen , где gen — функция-генератор вроде той, что была в первом задании. fmap возвращает новую функцию-генератор, которая при каждом вызове берет следующее значение из gen и пропускает его через функцию a . Пример:

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

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

Подсказка: если непонятно, как сделать функцию, принимающую произвольное число аргументов, то стоит погуглить про псевдопеременную arguments (псевдопеременная значит, что она выглядит как переменная, но формально ей не является). Чтобы понять, как вызвать функцию с заранее неизвестным числом аргументов, можно погуглить Function.prototype.call и Function.prototype.apply . В JS функции – это объекты, и у них есть полезные методы и свойства.

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

Напиши функцию partial(fn, a1, a2, . ) , которая позволяет зафиксировать один или несколько аргументов функции. Пример:

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

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

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

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

Наша функция partial позволяет фиксировать только первые аргументы. Усовершенствуй ее, чтобы зафиксировать можно было любые аргументы, пропущенные аргументы обозначаются с помощью undefined. Обрати внимание, что теперь мы переименовали ее в partialAny , чтобы не путать с предыдущей:

напиши функцию bind , которая позволяет привязать контекст (значение this ) к функции:

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

напиши функцию pluck , которая берет массив объектов и возвращает массив значений определенного поля:

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

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

напиши функцию filter , которая принимает функцию-предикат и массив. Возвращает она массив значений, для которых предикат вернет true.

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

Аналог из lodash: http://lodash.com/docs#filter В новых браузерах у массивов есть метод filter .

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

Кстати, в новых браузерах с поддержкой Javascript ES5 есть метод Object.keys(x) , возвращающий массив ключей у объекта.

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

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

• маленький (50 тугриков, 20 калорий)
• большой (100 тугриков, 40 калорий)

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

• сыром (+ 10 тугриков, + 20 калорий)
• салатом (+ 20 тугриков, + 5 калорий)
• картофелем (+ 15 тугриков, + 10 калорий)

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

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

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

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

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

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

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

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

При неправильном использовании класс сообщает об этом с помощью выброса исключения: (урок на примере PHP: https://gist.github.com/codedokode/65d43ca5ac95c762bc1a , учебник: https://learn.javascript.ru/exception )

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

• класс не взаимодействует с внешним миром. Это не его дело, этим занимается другой код, а класс живет в изоляции от мира
• обязательные параметры (размер и начинка) мы передаем через конструктор, чтобы нельзя было создать объект, не указав их
• необязательные (добавка) добавляем через методы
• имена методов начинаются с глагола и имеют вид «сделайЧтоТо»: calculateCalories() , addTopping()
• типы начинок обозначены "константами" с понятными именами (на самом деле просто свойствами, написанным заглавными буквами, которые мы договорились считать "константами")
• об исключительных ситуациях сообщаем с помощью исключений
• объект создается через конструктор – функцию, которая задает начальные значения полей. Имя конструктора пишется с большой буквы и обычно является существительным: new Hamburger(. )
• "константы" вроде могут иметь значение, являющееся строкой или числом. От смены значения константы ничего не должно меняться (то есть эти значения не должны где-то еще быть записаны). К сожалению, в отличие от других языков (Java, PHP, C#) при опечатке в имени такой "константы" интепретатор JS не укажет на ошибку
• в свойствах объекта гамбургера логично хранить исходные данные (размер, тип начинки), а не вычисленные из них (цена, число калорий и т.д.). Рассчитывать цену и калории логично в тот момент, когда это потребуется, а не заранее.
• в JS нет синтаксиса, чтобы пометить свойство или метод приватным (доступным для использования только внутри класса), потому некоторые разработчики начинают их имена с подчеркивания и договариваются, что извне класса к ним никто не обращается. Вообще, в JS нет нормальных классов, потому многое основано на таких договоренностях.

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

• какие есть сущности, для которых мы сделаем классы? (Гамбургер).
• какие у них есть свойства (размер, начинка, добавки). Цена или калории не являются свойствами так как они вычисляются из других свойств и хранить их не надо.
• что мы хотим от них получить (какие у них должны быть методы). Например, сколько стоит гамбургер?
• как сущности связаны? У нас одна сущность «Гамбургер» и она ни с чем не связана.

Заметь также, что в моем примере класс не взаимодействует с внешним миром. За это отвечает внешний относительно него код. Потому наш класс унивесален: ты можешь использовать его в консоли, выводя данные через console.log , а можешь приделать навороченный HTML-интерфейс с кнопками для запуска на планшете с тачскрином. Именно в таком стиле ты должен писать ООП код.

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

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

• класс = функция-конструктор + прототип
• конструктор = функция с именем с большой буквы
• поле объекта = создается в конструкторе через this.x = 1;
• метод = функция на прототипе
• константа класса = свойство, добавленное к функции-конструктору и написанное большими буквами: Hamburger.SOMETHING = ‘something’;
• статические поля и методы = свойства добавленные к функции: Hamburger.somStaticMethod = function () < .. >;
• private/public = нету, приватные свойства и методы можно обозначать подчеркиванием в начале
• интерфейсы, абстрактные классы и методы = нету
• наследование = в ES5 делается через Object.create , в ES3 через хак с прототипами (описан в learn.javascript.ru)

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

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

ES3, ES5, ES6 – это версии JS. ES3 это версия которая работает во всех браузерах с 2000 года. ES5, 6 – новые, их уровень поддержки описан тут:

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

• электростанции, вырабатывают мощность от 1 до 100 мегаватт
• солнечные панели, генерируют от 1 до 5 мегаватт днем (в зависимости от вида панели, то есть некоторые панели генерируют 1 мегаватт, некоторые 2 и так далее) и 0 ночью
• жилые дома, в них от 1 до 400 квартир, потребляют 4 кВт на квартиру днем и 1 кВт ночью.
• линии электропередач, ведущие в другие города, по ним может подаваться недостающая или отдаваться лишняя энергия. У линий есть свойство «мощность», которая определяет, сколько мегаватт можно передать по ней, а также «цена мегаватта», которое показывает сколько можно получить или придется заплатить за переданный/полученный мегаватт. На разных линиях может быть разная цена.

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

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

array-like — это псевдомассив, то есть объект, у которого есть неотрицательное свойство length и элементы с 0 до length – 1 . Примеры псевдомассивов:

• псевдопеременная arguments
• коллекции, которые возвращают функции работы с DOM, вроде document.images , document.getElementsByTagName(..) , document.body.children

В JS есть оператор typeof , но у него есть подвохи:

• typeof null дает ‘object’
• typeof [] дает ‘object’

Определение массива через [] instanceof Array не сработает, если массив был создан в друго вкладке или фрейме браузера, так как в каждой вкладке свой объект window и свой window.Array .

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

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

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

Если в функцию копирования передан объект Date , надо создавать копию того же типа.

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

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

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

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

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

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

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

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