Целью данного теста навыков является оценка понимания таких статей, как: Функций — многократное использование блоков кода, Построение своих собственных функций и Возвращаемые значения функции.
Примечание: вы можете проверить решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструменты, такие как CodePen, jsFiddle или Glitch для работы над задачами.
Если у вас возникла проблема, то попросите нас о помощи - см. раздел {{anch("Анализ или дальнейшая помощь")}} внизу этой страницы.
Примечание: В примерах ниже, если в вашем коде есть ошибка, она будет выведена на панель результатов этой страницы, чтобы помочь вам попытаться выяснить ответ (или в JavaScript консоли браузера, в случае загружаемой версии).
Некоторые из вопросов, приведённых ниже, требуют написания кода для управления структурой DOM для их решения - например, создание новых HTML-элементов, установка их текстового содержимого в соответствие с определёнными значениями строк, и вложение их внутри существующих элементов на странице - и все это с помощью JavaScript.
Мы ещё не обучали этому прямо в курсе, но вы увидите некоторые примеры, которые используют данную структуру, и мы хотели бы, чтобы вы провели некоторые исследования в отношении того, какие DOM API вам нужны, чтобы успешно ответить на эти вопросы. Хорошим началом будет наше учебное пособие Управление документами.
Для решения первой задачи вам нужно создать простую функцию — chooseName(), которая выполнит выборку случайного имени из данного массива (names) и выведет его в предоставленный параграф (para). А затем необходимо запустить эту функцию один раз.
Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:
{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions1.html", '100%', 400)}}
Загрузите файл с исходным кодом для этой задачи для работы в собственном редакторе или в онлайн-редакторе.
Для решения второй задачи, связанной с функциями, необходимо создать функцию, которая рисует прямоугольник на заданном элементе <canvas> (исходная переменная canvas, контекст доступен в ctx), основанном на пяти предоставленных входящих значениях:
x — x координата прямоугольника.y — y координата прямоугольника.width — ширина прямоугольника.height — высота прямоугольника.color — цвет прямоугольника.Перед рисованием вам нужно будет очистить содержимое элемента canvas , чтобы при обновлении кода в случае с рабочей версией, вы не получили много прямоугольников, находящихся друг на друге.
Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:
{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions2.html", '100%', 400)}}
Загрузите файл с исходным кодом для этой задачи для работы в собственном редакторе или в онлайн-редакторе.
В этой задаче вы возвращаетесь к проблеме, поставленной в Задаче 1, с целью её улучшения. Мы хотим, чтобы вы сделали три улучшения:
random(), которая принимает в качестве параметров две общие границы, между которыми должно находиться случайное число и возвращает результат.chooseName() таким образом, чтобы она использовала функцию случайных чисел, принимала массив для выбора в качестве параметра (что делает его более гибким) и возвращала результат.para) с помощью свойства textContent. Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:
{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions3.html", '100%', 400)}}
Загрузите файл с исходным кодом для этой задачи для работы в собственном редакторе или в онлайн-редакторе.
Вы можете попрактиковаться на этих примерах в интерактивных редакторах выше.
Если же вы хотите, чтобы вашу работу проанализировали, или у вас проблема и вы хотите попросить о помощи: