1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
---
title: 'Проверь свои навыки: Функции'
slug: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions'
tags:
- JavaScript
- Изучение
- Новичок
- Функции
translation_of: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions'
---
<div>{{learnsidebar}}</div>
<p>Целью данного теста навыков является оценка понимания таких статей, как: <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Функций — многократное использование блоков кода</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Построение своих собственных функций</a> и <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Возвращаемые значения функции</a>.</p>
<div class="blockIndicator note">
<p>Примечание: вы можете проверить решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструменты, такие как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a> для работы над задачами.<br>
<br>
Если у вас возникла проблема, то попросите нас о помощи - см. раздел {{anch("Анализ или дальнейшая помощь")}} внизу этой страницы.</p>
</div>
<div class="blockIndicator note">
<p>Примечание: В примерах ниже, если в вашем коде есть ошибка, она будет выведена на панель результатов этой страницы, чтобы помочь вам попытаться выяснить ответ (или в JavaScript консоли браузера, в случае загружаемой версии).</p>
</div>
<h2 id="Управление_структурой_DOM_рекомендуется">Управление структурой DOM: рекомендуется</h2>
<p>Некоторые из вопросов, приведённых ниже, требуют написания кода для управления структурой <a href="/en-US/docs/Glossary/DOM">DOM</a> для их решения - например, создание новых HTML-элементов, установка их текстового содержимого в соответствие с определёнными значениями строк, и вложение их внутри существующих элементов на странице - и все это с помощью JavaScript.</p>
<p>Мы ещё не обучали этому прямо в курсе, но вы увидите некоторые примеры, которые используют данную структуру, и мы хотели бы, чтобы вы провели некоторые исследования в отношении того, какие DOM API вам нужны, чтобы успешно ответить на эти вопросы. Хорошим началом будет наше учебное пособие <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Управление документами</a>.</p>
<h2 id="Функции_1">Функции 1</h2>
<p>Для решения первой задачи вам нужно создать простую функцию — <code>chooseName()</code>, которая выполнит выборку случайного имени из данного массива (<code>names</code>) и выведет его в предоставленный параграф (<code>para</code>). А затем необходимо запустить эту функцию один раз.</p>
<p>Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:</p>
<p>{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions1.html", '100%', 400)}}</p>
<div class="blockIndicator note">
<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions1-download.html">Загрузите файл с исходным кодом для этой задачи</a> для работы в собственном редакторе или в онлайн-редакторе.</p>
</div>
<h2 id="Функции_2">Функции 2</h2>
<p>Для решения второй задачи, связанной с функциями, необходимо создать функцию, которая рисует прямоугольник на заданном элементе <code><canvas></code> (исходная переменная <code>canvas</code>, контекст доступен в <code>ctx</code>), основанном на пяти предоставленных входящих значениях:</p>
<ul>
<li><code>x</code> — x координата прямоугольника.</li>
<li><code>y</code> — y координата прямоугольника.</li>
<li><code>width</code> — ширина прямоугольника.</li>
<li><code>height</code> — высота прямоугольника.</li>
<li><code>color</code> — цвет прямоугольника.</li>
</ul>
<p>Перед рисованием вам нужно будет очистить содержимое элемента canvas , чтобы при обновлении кода в случае с рабочей версией, вы не получили много прямоугольников, находящихся друг на друге.</p>
<p>Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:</p>
<p>{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions2.html", '100%', 400)}}</p>
<div class="blockIndicator note">
<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions2-download.html">Загрузите файл с исходным кодом для этой задачи</a> для работы в собственном редакторе или в онлайн-редакторе.</p>
</div>
<h2 id="Функции_3">Функции 3</h2>
<p>В этой задаче вы возвращаетесь к проблеме, поставленной в Задаче 1, с целью её улучшения. Мы хотим, чтобы вы сделали три улучшения:</p>
<ol>
<li>Выполните рефакторинг (реорганизацию) кода, который отвечает за генерацию случайного числа в отдельную функцию <code>random()</code>, которая принимает в качестве параметров две общие границы, между которыми должно находиться случайное число и возвращает результат.</li>
<li>Обновите функцию <code>chooseName()</code> таким образом, чтобы она использовала функцию случайных чисел, принимала массив для выбора в качестве параметра (что делает его более гибким) и возвращала результат.</li>
<li>Вывести возвращаемый результат в параграф (<code>para</code>) с помощью свойства <code>textContent</code>. </li>
</ol>
<p>Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:</p>
<p>{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions3.html", '100%', 400)}}</p>
<div class="blockIndicator note">
<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions3-download.html">Загрузите файл с исходным кодом для этой задачи</a> для работы в собственном редакторе или в онлайн-редакторе.</p>
</div>
<h2 id="Анализ_или_дальнейшая_помощь">Анализ или дальнейшая помощь</h2>
<p>Вы можете попрактиковаться на этих примерах в интерактивных редакторах выше.</p>
<p>Если же вы хотите, чтобы вашу работу проанализировали, или у вас проблема и вы хотите попросить о помощи:</p>
<ol>
<li>Поместите свой код в онлайн-редактор <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a> с возможностью совместного использования. Вы можете написать код самостоятельно или использовать файлы с исходным кодом, ссылки на которые приведены в вышеприведённых разделах.</li>
<li>Напишите сообщение с просьбой о проведении анализа и/или помощи в категории <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Ваше сообщение должно включать в себя следующие пункты:
<ul>
<li>Описательный заголовок, например "Анализ для теста навыков: Функции 1".</li>
<li>Детали того, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например, если вы застряли и нуждаетесь в помощи, или хотите получить анализ проблемы.</li>
<li>Ссылка на пример, который вы хотели бы рассмотреть или с которым вам нужна помощь, в онлайн-редакторе, доступном для совместного использования (как упоминалось в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой, если вы не видите его код.</li>
<li>Ссылка на фактическую задачу или страницу рассмотрения проблемы, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li>
</ul>
</li>
</ol>
|
