Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Требования: Перед началом выполнения этого испытания вам следует проработать все статьи в этом модуле.
Задача: Протестировать понимание основ языка JavaScript, таких как переменные, числа, операторы, строки и массивы.

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

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

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

Замечание:  Так же вы можете использовать сайты как  JSBin или Thimble для выполнения вашего испытания. Вы можете вставить HTML, CSS и JavaScript в один из этих онлайн редакторов. Если онлайн редактор, который вы используете, не имеет отдельного окна для JavaScript - не стесняйтесь вставить все скрипты в <script> элемент внутри  HTML страницы.

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

Вам предоставили некоторый необработанный 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(). В течении оставшейся части испытания вам предстоит, заполняя строчки внутри этой функции, .

Completing the result() function:

  1. Create a new variable called newStory, and set it's value to equal storyText. This is needed so we can create a new random story each time the button is pressed and the function is run. If we made changes directly to storyText, we'd only be able to generate a new story once.
  2. Create three new variables called xItem, yItem, and zItem, and make them equal to the result of calling randomValueFromArray() on your three arrays (the result in each case will be a random item out of each array it is called on). For example you can call the function and get it to return one random string out of insertX by writing randomValueFromArray(insertX).
  3. Next we want to replace the three placeholders in the newStory string — :insertx:, :inserty:, and :insertz: — with the strings stored in xItem, yItem, and zItem. There is a particular string method that will help you here — in each case, make the call to the method equal to newStory, so each time it is called, newStory is made equal to itself, but with substitutions made. So each time the button is pressed, these placeholders are each replaced with a random silly string. As a further hint, the method in question only replaces the first instance of the substring it finds, so you might need to make one of the calls twice.
  4. Inside the first if block, add another string replacement method call to replace the name 'Bob' found in the newStory string with the name variable. In this block we are saying "If a value has been entered into the customName text input, replace Bob in the story with that custom name."
  5. Inside the second if block, we are checking to see if the uk radio button has been selected. If so, we want to convert the weight and temperature values in the story from pounds and farenheit into stones and centigrade. What you need to do is as follows:
    1. Look up the formulae for converting pounds to stone, and farenheit to centigrade.
    2. Inside the line that defines the weight variable, replace 300 with a calculation that converts 300 pounds into stones. Concatenate ' stone' onto the end of the result of the overall Math.round() call.
    3. Inside the line that defines the temperature variable, replace 94 with a calculation that converts 94 farenheit into centigrade. Concatenate ' centigrade' onto the end of the result of the overall Math.round() call.
    4. Just under the two variable definitions, add two more string replacement lines that replace '94 farenheit' with the contents of the temperature variable, and '300 pounds' with the contents of the weight variable.
  6. Finally, in the second-to-last line of the function, make the textContent property of the story variable (which references the paragraph) equal to newStory.

Hints and tips

  • You don't need to edit the HTML in any way, except to apply the JavaScript to your HTML.
  • If you are unsure whether the JavaScript is applied to your HTML properly, try removing everything else from the JavaScript file temporarily, adding in a simple bit of JavaScript that you know will create an obvious effect, then saving and refreshing. The following for example turns the background of the <html> element red — so the entire browser window should go red if the JavaScript is applied properly:
    document.querySelector('html').style.backgroundColor = 'red';
  • Math.round() is a built-in JavaScript method that simply rounds the result of a calculation to the nearest whole number.

Assessment

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the Learning Area Discourse thread, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

Метки документа и участники

 Внесли вклад в эту страницу: epidersis, DonVeds
 Обновлялась последний раз: epidersis,