• Назад
• Обзор: Первые шаги в JavaScript

В этом испытании вам будет нужно, используя знания, полученные в статьях этого модуля, применить их для создания забавного приложения, создающего случайные глупые истории. Удачно повеселиться!

Начальная точка

Для начала испытания вам следует:

• Перейти ископировать файл HTML как пример, сохранив его локальную копию какindex.html в новой папке где-то на вашем компьютере. Там же будет храниться и CSS документ нужный для стилизации.
• Перейти настраницу, содержащую исходный текст, и оставить её открытой в отдельной вкладке браузера. Она вам понадобится позже.

Краткое описание проекта

Вам предоставили некоторый необработанный HTML/CSS, несколько текстовых строк и функций JavaScript; вам необходимо написать необходимый JavaScript-код, чтобы превратить это в рабочую программу, которая выполняет следующие действия:

• Создаёт глупую историю по нажатию на кнопку "Generate random story".
• Заменяет стандартное имя "Bob" в истории на своё имя, только если оно введено в поле "Enter custom name" перед тем, как нажата создающая кнопка.
• Конвертирует изначальные US величины веса и температуры в соответствующие для UK, если выбран соответствующий переключатель.
• Будет создавать другую глупую историю если нажать на кнопку снова (и снова... )

Следующий скриншот показывает пример того, что должна выводить законченная программа:

Чтобы вы больше поняли идеюопробуйте готовый пример (не заглядывая в исходный код!)

Шаги к цели

Следующие разделы описывают, что вам нужно будет сделать.

Начальная подготовка:

1. Создайте новый файл под названиемmain.js в той же папке, что иindex.html.
2. Подключите данный JavaScript документ в ваш HTML файл с помощью<script> элемента привязкиmain.js. Разместите его прямо перед закрывающимся</body> тегом.

Задайте переменные и функции:

1. В исходном текстовом документе скопируйте весь код под заголовком "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" и вставьте в начало файлаmain.js. Это даст вам три переменные, ссылающиеся на текстовое поле "Enter custom name" (customName), кнопку "Generate random story" (randomize), и элемент снизу HTML страницы, куда будет помещена сама история<p> (story), соответственно. Также у вас должна быть функцияrandomValueFromArray(), которая принимает массив и случайным образом возвращает оттуда один из элементов.
2. Теперь взгляните на второй параграф исходного документа — "2. RAW TEXT STRINGS". Он содержит строки текста, которые будут использоваться как входные данные вашей программы. Вам следует поместить их внутрь переменных в файлеmain.js:
   1. Сохраните первую большую строку текста в переменнуюstoryText.
   2. Сохраните первый блок из трёх строк как массив, назвав егоinsertX.
   3. Сохраните второй блок из трёх строк как массив, назвав егоinsertY.
   4. Сохраните третий блок из трёх строк как массив, назвав егоinsertZ.

Создание обработчика событий и неполной функции:

1. Теперь возвращаемся к исходному текстовому файлу.
2. Скопируйте код под заголовком "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" и вставьте его в конец файлаmain.js. Это:
   • Добавит обработчик события кликанья в переменнуюrandomize, Так что, когда кнопка будет нажата - функцияresult() запустится.
   • Добавляет в код частично завершённую функциюresult(). В течении оставшейся части испытания вам предстоит, заполняя строчки внутри этой функции, завершить её и заставить работать должным образом.

Завершение функцииresult():

1. Создайте новую переменнуюnewStory и установите её значение равнымstoryText. Это необходимо, чтобы мы могли создавать новую случайную историю каждый раз, когда нажимается кнопка, и функция запускается. Если бы мы внесли изменения непосредственно вstoryText, мы могли бы генерировать новую историю только один раз.

2. Создайте три новые переменные, называемыеxItem,yItem иzItem, и сделайте их равными результату вызоваrandomValueFromArray() на трёх ваших массивах (результат в каждом случае будет случайным элементом из каждого массива, на который он вызывается). Например, вы можете вызвать функцию и получить её, чтобы вернуть одну случайную строку изinsertX, записавrandomValueFromArray (insertX).

3. Затем мы хотим заменить три заполнителя строкиnewStory -:insertx:,:inserty : и:insertz: - со строками, хранящимися вxItem,yItem иzItem. Здесь вам поможет определённый строковый метод - в каждом случае сделать вызов метода равнымnewStory, при этом каждый раз, когда он вызывается,newStory делается равным самому себе, но с выполненными заменами. Поэтому каждый раз, когда нажимается кнопка, эти заполнители заменяются случайной строкой. Подсказка: рассматриваемый метод заменяет только первый экземпляр найденной подстроки, поэтому вам, возможно, придётся сделать один из вызовов дважды.

4. Внутри первого блокаif добавьте другой метод замены строки, чтобы заменить имя «Боб», найденное в строкеnewStory, с помощью переменнойname. В этом блоке мы говорим: «Если значение введено в текстовый вводcustomName, замените Боба в истории этим пользовательским именем».

5. Внутри второго блокаif мы проверяем, была ли выбрана радиокнопкаuk. Если это так, мы хотим преобразовать значения веса и температуры в историю из фунтов и Фаренгейта в метры и по Цельсию. Что вам нужно сделать, так это:

   1. Посмотрите формулу преобразования фунтов в стоуны и Фаренгейта в по Цельсию.
   2. Внутри линии, которая определяетweight переменную, замените 300 на расчёт, который преобразует 300 фунтов в стоуны. Добавьте'stone' в конце результата общего вызоваMath.round().
   3. Внутри линии, определяющейtemperature переменную, замените 94 на расчёт, который преобразует 94 градуса по Фаренгейту в по Цельсию. Добавьте'centigrade' в конце результата общего вызоваMath.round().
   4. Просто под двумя определениями переменных добавьте ещё две строки замены строк, которые заменяют «94 farenheit» на содержимое переменнойtemperature и«300 pounds» на содержимоеweight переменной.

6. Наконец, в предпоследней строке функции сделайте свойствоtextContent переменнойstory (которая ссылается на абзац) равнымnewStory.

Советы и подсказки

• Вам не нужно каким-либо образом редактировать HTML, кроме как применять JavaScript к вашему HTML.

• Если вы не уверены, правильно ли применяется JavaScript для вашего HTML-кода, попробуйте временно удалить все остальное из файла JavaScript, добавив в него простой кусочек JavaScript, который, как вы знаете, создаст очевидный эффект, а затем сохраните и обновите. Следующий, например, делает фон элемента<html> красного цвета - поэтому все окно браузера должно быть красным, если JavaScript применяется правильно:

  js

  document.querySelector("html").style.backgroundColor = "red";

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

Оценка и помощь

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

1. Разместите свою работу в онлайн-редакторе, таком какCodePen,jsFiddle илиGlitch.
2. Напишите сообщение с просьбой об оценке и / или помощи на форумеMDN Discourse. Добавьте тег «learning» к своему сообщению, чтобы мы могли легче его найти. Ваш пост должен включать:
   • Описательное название, такое как «Требуется оценка для генератора глупых историй».
   • Подробная информация о том, что вы хотели бы, чтобы мы делали, например, что вы уже пробовали, если вы застряли и нуждаетесь в помощи.
   • Ссылка на пример, который вы хотите оценить или нуждаетесь в помощи, в онлайн-редакторе. Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.
   • Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вы хотите помочь.

• Назад
• Обзор: Первые шаги в JavaScript