Проверь свои навыки: Функции

Целью данного теста навыков является оценка понимания таких статей, как: Функций — многократное использование блоков кода, Построение своих собственных функций и Возвращаемые значения функции.

Примечание: Вы можете проверить решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструменты, такие как CodePen, jsFiddle или Glitch для работы над задачами.

Если у вас возникла проблема, то попросите нас о помощи - см. раздел Анализ или дальнейшая помощь внизу этой страницы.

Примечание: В примерах ниже, если в вашем коде есть ошибка, она будет выведена на панель результатов этой страницы, чтобы помочь вам попытаться выяснить ответ (или в JavaScript консоли браузера, в случае загружаемой версии).

Управление структурой DOM: рекомендуется

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

Мы еще не обучали этому прямо в курсе, но вы увидите некоторые примеры, которые используют данную структуру, и мы хотели бы, чтобы вы провели некоторые исследования в отношении того, какие DOM API вам нужны, чтобы успешно ответить на эти вопросы. Хорошим началом будет наше учебное пособие Управление документами.

Функции 1

Для решения первой задачи вам нужно создать простую функцию — chooseName(), которая выполнит выборку случайного имени из данного массива (names) и выведет его в предоставленный параграф (para). А затем необходимо запустить эту функцию один раз.

Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:

Загрузите файл с исходным кодом для этой задачи для работы в собственном редакторе или в онлайн-редакторе.

Функции 2

Для решения второй задачи, связанной с функциями, необходимо создать функцию, которая рисует прямоугольник на заданном элементе <canvas> (исходная переменная canvas, контекст доступен в ctx), основанном на пяти предоставленных входящих значениях:

  • x — x координата прямоугольника.
  • y — y координата прямоугольника.
  • width — ширина прямоугольника.
  • height — высота прямоугольника.
  • color — цвет прямоугольника.

Перед рисованием вам нужно будет очистить содержимое элемента canvas , чтобы при обновлении кода в случае с рабочей версией, вы не получили много прямоугольников, находящихся друг на друге.

Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:

Загрузите файл с исходным кодом для этой задачи для работы в собственном редакторе или в онлайн-редакторе.

Функции 3

В этой задаче вы возвращаетесь к проблеме, поставленной в Задаче 1, с целью ее улучшения. Мы хотим, чтобы вы сделали три улучшения:

  1. Выполните рефакторинг (реорганизацию) кода, который отвечает за генерацию случайного числа в отдельную функцию random(), которая принимает в качестве параметров две общие границы, между которыми должно находиться случайное число и возвращает результат.
  2. Обновите функцию chooseName() таким образом, чтобы она использовала функцию случайных чисел, принимала массив для выбора в качестве параметра (что делает его более гибким) и возвращала результат.
  3. Вывести возвращаемый результат в параграф (para) с помощью свойства textContent

Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:

Загрузите файл с исходным кодом для этой задачи для работы в собственном редакторе или в онлайн-редакторе.

Анализ или дальнейшая помощь

Вы можете попрактиковаться на этих примерах в интерактивных редакторах выше.

Если же вы хотите, чтобы вашу работу проанализировали, или у вас проблема и вы хотите попросить о помощи:

  1. Поместите свой код в онлайн-редактор CodePen, jsFiddle или Glitch с возможностью совместного использования. Вы можете написать код самостоятельно или использовать файлы с исходным кодом, ссылки на которые приведены в вышеприведенных разделах.
  2. Напишите сообщение с просьбой о проведении анализа и/или помощи в категории MDN Discourse forum Learning category. Ваше сообщение должно включать в себя следующие пункты:
    • Описательный заголовок, например "Анализ для теста навыков: Функции 1".
    • Детали того, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например, если вы застряли и нуждаетесь в помощи, или хотите получить анализ проблемы.
    • Ссылка на пример, который вы хотели бы рассмотреть или с которым вам нужна помощь, в онлайн-редакторе, доступном для совместного использования (как упоминалось в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой, если вы не видите его код.
    • Ссылка на фактическую задачу или страницу рассмотрения проблемы, чтобы мы могли найти вопрос, по которому вам нужна помощь.