В этом испытании вам будет нужно, используя знания, полученные в статьях этого модуля, применить их для создания забавного приложения, создающего случайные глупые истории. Удачно повеселиться!
| Требования: | Перед началом выполнения этого испытания вам следует проработать все статьи в этом модуле. |
|---|---|
| Задача: | Протестировать понимание основ языка JavaScript, таких как переменные, числа, операторы, строки и массивы. |
Для начала испытания вам следует:
index.html в новой папке где-то на вашем компьютере. Там же будет храниться и CSS документ нужный для стилизации.Замечание: Так же вы можете использовать такие сайты как JSBin или Thimble для выполнения вашего испытания. Вы можете вставить HTML, CSS и JavaScript в один из этих онлайн редакторов. Если онлайн редактор, который вы используете, не имеет отдельного окна для JavaScript - не стесняйтесь вставить все скрипты в <script> элемент внутри HTML страницы.
Вам предоставили некоторый необработанный HTML/CSS, несколько текстовых строк и функций JavaScript; вам необходимо написать необходимый JavaScript-код, чтобы превратить это в рабочую программу, которая выполняет следующие действия:
Следующий скриншот показывает пример того, что должна выводить законченная программа:
Чтобы вы больше поняли идею опробуйте готовый пример (не заглядывая в исходный код!)
Следующие разделы описывают, что вам нужно будет сделать.
Начальная подготовка:
main.js в той же папке, что и index.html.main.js. Разместите его прямо перед закрывающимся </body> тегом.Задайте переменные и функции:
main.js. Это даст вам три переменные, ссылающиеся на текстовое поле "Enter custom name" (customName), кнопку "Generate random story" (randomize), и элемент снизу HTML страницы, куда будет помещена сама история {{htmlelement("p")}} (story), соответственно. Также у вас должна быть функцияrandomValueFromArray(), которая принимает массив и случайным образом возвращает оттуда один из элементов.main.js:
storyText.insertX.insertY.insertZ.Создание обработчика событий и неполной функции:
main.js. Это:
randomize, Так что, когда кнопка будет нажата - функция result() запустится.result(). В течении оставшейся части испытания вам предстоит, заполняя строчки внутри этой функции, завершить её и заставить работать должным образом.Завершение функции result():
newStory и установите её значение равным storyText. Это необходимо, чтобы мы могли создавать новую случайную историю каждый раз, когда нажимается кнопка, и функция запускается. Если бы мы внесли изменения непосредственно в storyText, мы могли бы генерировать новую историю только один раз.xItem, yItem и zItem, и сделайте их равными результату вызова randomValueFromArray() на трёх ваших массивах (результат в каждом случае будет случайным элементом из каждого массива, на который он вызывается). Например, вы можете вызвать функцию и получить её, чтобы вернуть одну случайную строку из insertX, записав randomValueFromArray (insertX).newStory - :insertx:, :inserty : и :insertz: - со строками, хранящимися в xItem, yItem и zItem. Здесь вам поможет определённый строковый метод - в каждом случае сделать вызов метода равным newStory, при этом каждый раз, когда он вызывается, newStory делается равным самому себе, но с выполненными заменами. Поэтому каждый раз, когда нажимается кнопка, эти заполнители заменяются случайной строкой. Подсказка: рассматриваемый метод заменяет только первый экземпляр найденной подстроки, поэтому вам, возможно, придётся сделать один из вызовов дважды.if добавьте другой метод замены строки, чтобы заменить имя «Боб», найденное в строке newStory, с помощью переменной name. В этом блоке мы говорим: «Если значение введено в текстовый ввод customName, замените Боба в истории этим пользовательским именем».if мы проверяем, была ли выбрана радиокнопка uk. Если это так, мы хотим преобразовать значения веса и температуры в историю из фунтов и Фаренгейта в метры и по Цельсию. Что вам нужно сделать, так это:
weight переменную, замените 300 на расчёт, который преобразует 300 фунтов в стоуны. Добавьте 'stone' в конце результата общего вызова Math.round().temperature переменную, замените 94 на расчёт, который преобразует 94 градуса по Фаренгейту в по Цельсию. Добавьте 'centigrade' в конце результата общего вызова Math.round().temperature и«300 pounds» на содержимое weight переменной.textContent переменной story (которая ссылается на абзац) равным newStory.document.querySelector('html').style.backgroundColor = 'red';
Если вы хотите, чтобы ваша работа была оценена, или застряли и хотите обратиться за помощью:
{{PreviousMenu("Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}