--- title: 傻故事產生器 slug: Learn/JavaScript/First_steps/Silly_story_generator tags: - JavaScript - 初學者 - 字串 - 測試 - 變數 - 運算子 - 陣列 translation_of: Learn/JavaScript/First_steps/Silly_story_generator ---

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

在本次評估中，您被賦予的任務內容將與本單元學習到的知識息息相關，並將其應用於創建一個能隨機生成傻故事的有趣應用程式。祝玩的開心！

事先具備:	進行此測驗之前你應先完成此區塊的所有內容
目標:	測試對於JavaScript基礎的理解程度, 例如變數, 數字, 運算子, 字串以及陣列.

前置作業

在開始本測驗前，你應該:

開啟右方網頁： grab the HTML file ，將HTML範本儲存到您的本地電腦的新資料夾中，並命名為index.html 。範本也包含相應的CSS檔案。
開啟右方網頁： page containing the raw text ，並保持網頁開啟在瀏覽器的另一分頁上，以便稍後使用。

備註: 除了將檔案下載到自己的電腦中，您也能使用線上編輯程式的網頁，像是： JSBin 或者Thimble 來完成評估測驗。您可以將 HTML, CSS 以及 JavaScript 貼到前述的線上編輯器中。如果您使用的線上編輯器沒有獨立給 JavaScript 的編輯區，您也能透過<script>直接將JS語法放到 HTML檔案中。

任務簡介

透過前述網頁您已經得到初版HTML/CSS 與一些JavaScript 字串、函數；您需要再寫一些必要的JavaScript語法來將這些檔案轉變為可運作的程式，任務如下：

當 "Generate random story" (產生隨機故事)的按鈕被點擊，請產出一則傻故事
若在點擊產生故事按鈕前將自定義名字輸入於輸入框"Enter custom name" (譯：輸入自定義名字），則將故事中預設的名字 "Bob" 代換為自定義名字
若在點擊產生故事按鈕前，也點擊UK的單選按鈕，則將預設的美制重量、溫度單位轉換為英制單位
每點擊一次產生故事的按鈕，即產生新一則隨機傻故事（不限次數）

以下截圖為完成品的範例：

點擊右方連結可以參考與測試完成品： have a look at the finished example （請不要偷看原始碼喔！）

任務開始

以下清楚地描述了完成任務需要哪些動作。

基本設定：

在有index.html的資料夾中建立一個新檔案稱之為 main.js
請在index.html中引用第一點建立的外部JavaScript 檔案，引用方法是在</body> tag 前插入一組 {{htmlelement("script")}}元素，並在opening tag上加入src=" main.js"

初始化變數與函數：

在原始文件檔中(raw text file)，請複製標題1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" 以下到第2點前的所有程式碼，並貼到main.js中。這給你三個變數來標記：文字輸入框 "Enter custom name" (輸入自定義名字) ，變數為 (customName) 與按鈕 "Generate random story"(產生隨機故事) ，變數為 (randomize), 以及HTML中接近body底部的 {{htmlelement("p")}} 元素，故事將會被複製進第三個變數(story)中。此外您還會得到一個函數稱為： randomValueFromArray() ，從命名中可以得知這是一個陣列，它會隨機提供一則儲存其中的故事。
接著讓我們查看原始文件檔中(raw text file)的第2點： "2. RAW TEXT STRINGS"。其包含的這些字串在程式運行時會被放進來，請幫忙在main.js中將這些字串分別存進對應的變數裡：
1. 將第一行超級長的字串存進變數 storyText中。
2. 將第一組三個字串存進一陣列，並命名為insertX。
3. 將第二組三個字串存進一陣列，並命名為insertY.
4. 將第三組三個字串存進一陣列，並命名為insertZ.

放置事件監聽器與未完善的函數：

再度回到原始文件檔中(raw text file)
複製第3標題，"3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" 以下的內容，並貼到 main.js 檔案中的最下方，這包含：
- 給變數randomize增加一個點擊事件監聽器(clickevent listener) ，所以當產生故事的按鈕被點擊，result()函數會運行。
- 增加一個部分完成的函數 result() ，完成測驗您需要完善這個函數。

完善 result() 函數：

創造一個新變數稱為：newStory，讓這個變數的值等於storyText；我們需要這個變數以便每次產生故事按鈕被點擊時，函數都能再次運作並產生新故事，如果我們只在storyText之上做改變，我們只能產生一次新故事。
額外增加三個變數：xItem、yItem 與 zItem，並使這三個變數等於函數randomValueFromArray()中三個陣列的結果(每次會從各陣列中隨機挑出一項)。舉例，你能透過寫randomValueFromArray(insertX)來從insertX得到任一隨機字串。
接著我們需要將newStory中三個placeholders字串 :insertx:、:inserty:跟 :insertz:換成xItem、yItem、 zItem。有些字串方法在這裡特別有用，請讓字串方法的返回值等於 newStory ，所以之後每次 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.
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."
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 Fahrenheit into stones and centigrade. What you need to do is as follows:
1. Look up the formulae for converting pounds to stone, and Fahrenheit 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 Fahrenheit 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.
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 {{htmlelement("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.
There are three instances of strings that need to be replaced. You may repeat the replace() method multiple times, or you can use regular expressions. For instance, var text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like'); will replace all instances of 'love' to 'like'. Remember, Strings are immutable!

測驗一下