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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Поместите свой код в онлайн-редактор CodePen, jsFiddle или Glitch с возможностью совместного использования. Вы можете написать код самостоятельно или использовать файлы с исходным кодом, ссылки на которые приведены в вышеприведённых разделах.

2. Напишите сообщение с просьбой о проведении анализа и/или помощи в категории MDN Discourse forum Learning category. Ваше сообщение должно включать в себя следующие пункты:

   • Описательный заголовок, например "Анализ для теста навыков: Функции 1".
   • Детали того, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например, если вы застряли и нуждаетесь в помощи, или хотите получить анализ проблемы.
   • Ссылка на пример, который вы хотели бы рассмотреть или с которым вам нужна помощь, в онлайн-редакторе, доступном для совместного использования (как упоминалось в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой, если вы не видите его код.
   • Ссылка на фактическую задачу или страницу рассмотрения проблемы, чтобы мы могли найти вопрос, по которому вам нужна помощь.