path: root/files/zh-tw/learn/javascript/first_steps/silly_story_generator/index.html

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

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

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

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">事先具備:</th>
   <td>進行此測驗之前你應先完成此區塊的所有內容</td>
  </tr>
  <tr>
   <th scope="row">目標:</th>
   <td>測試對於JavaScript基礎的理解程度, 例如 變數, 數字, 運算子, 字串 以及陣列.</td>
  </tr>
 </tbody>
</table>

<h2 id="前置作業">前置作業</h2>

<p>在開始本測驗前，你應該:</p>

<ul>
 <li>開啟右方網頁： <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">grab the HTML file</a> ，將HTML範本儲存到您的本地電腦的新資料夾中，並命名為<code>index.html</code> 。範本也包含相應的CSS檔案。</li>
 <li>開啟右方網頁： <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">page containing the raw text</a> ，並保持網頁開啟在瀏覽器的另一分頁上，以便稍後使用。</li>
</ul>

<div class="note">
<p><strong>備註</strong>: 除了將檔案下載到自己的電腦中，您也能使用線上編輯程式的網頁，像是： <a class="external external-icon" href="http://jsbin.com/">JSBin</a> 或者<a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> 來完成評估測驗。您可以將 HTML, CSS 以及 JavaScript 貼到前述的線上編輯器中。如果您使用的線上編輯器沒有獨立給 JavaScript 的編輯區，您也能透過<code>&lt;script&gt;</code>直接將JS語法放到 HTML檔案中。</p>
</div>

<h2 id="任務簡介">任務簡介</h2>

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

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

<p>以下截圖為完成品的範例：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13667/assessment-1.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>

<p>點擊右方連結可以參考與測試完成品： <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">have a look at the finished example</a> （請不要偷看原始碼喔！）</p>

<h2 id="任務開始">任務開始</h2>

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

<p>基本設定：</p>

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

<p>初始化變數與函數：</p>

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

<p>放置事件監聽器與未完善的函數：</p>

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

<p>完善 <code>result()</code> 函數：</p>

<ol>
 <li>創造一個新變數稱為：<code>newStory</code>，讓這個變數的值等於<code>storyText</code>；我們需要這個變數以便每次產生故事按鈕被點擊時，函數都能再次運作並產生新故事，如果我們只在<code>storyText</code>之上做改變，我們只能產生一次新故事。</li>
 <li>額外增加三個變數：<code>xItem</code>、<code>yItem</code> 與 <code>zItem</code>，並使這三個變數等於函數<code>randomValueFromArray()</code>中三個陣列的結果(每次會從各陣列中隨機挑出一項)。舉例，你能透過寫<code>randomValueFromArray(insertX)</code>來從<code>insertX</code>得到任一隨機字串。</li>
 <li>接著我們需要將<code>newStory</code>中三個placeholders字串 <code>:insertx:</code>、<code>:inserty:</code>跟 <code>:insertz:</code>換成<code>xItem</code>、<code>yItem</code>、 <code>zItem</code>。有些字串方法在這裡特別有用，請讓字串方法的返回值等於 <code>newStory</code> ，所以之後每次 <code>newStory</code> 被呼叫時，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.</li>
 <li>Inside the first <code>if</code> block, add another string replacement method call to replace the name 'Bob' found in the <code>newStory</code> string with the <code>name</code> variable. In this block we are saying "If a value has been entered into the <code>customName</code> text input, replace Bob in the story with that custom name."</li>
 <li>Inside the second <code>if</code> block, we are checking to see if the <code>uk</code> 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:
  <ol>
   <li>Look up the formulae for converting pounds to stone, and Fahrenheit to centigrade.</li>
   <li>Inside the line that defines the <code>weight</code> variable, replace 300 with a calculation that converts 300 pounds into stones. Concatenate <code>' stone'</code> onto the end of the result of the overall <code>Math.round()</code> call.</li>
   <li>Inside the line that defines the <code>temperature</code> variable, replace 94 with a calculation that converts 94 Fahrenheit into centigrade. Concatenate <code>' centigrade'</code> onto the end of the result of the overall <code>Math.round()</code> call.</li>
   <li>Just under the two variable definitions, add two more string replacement lines that replace '94 farenheit' with the contents of the <code>temperature</code> variable, and '300 pounds' with the contents of the <code>weight</code> variable.</li>
  </ol>
 </li>
 <li>Finally, in the second-to-last line of the function, make the <code>textContent</code> property of the <code>story</code> variable (which references the paragraph) equal to <code>newStory</code>.</li>
</ol>

<h2 id="Hints_and_tips">Hints and tips</h2>

<ul>
 <li>You don't need to edit the HTML in any way, except to apply the JavaScript to your HTML.</li>
 <li>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:
  <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'red';</pre>
 </li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> is a built-in JavaScript method that simply rounds the result of a calculation to the nearest whole number.</li>
 <li>There are three instances of strings that need to be replaced. You may repeat the <code>replace()</code> method multiple times, or you can use regular expressions. For instance, <code>var text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');</code> will replace all instances of 'love' to 'like'. Remember, Strings are immutable!</li>
</ul>

<h2 id="測驗一下">測驗一下</h2>

<p>如果您將這個測驗視為正規課程的一部分，建議將成果提供您的老師或指導者以利幫助您達到最好的學習效益。如果您是自學者，您可以輕鬆的透過右方網頁 <a href="https://discourse.mozilla.org/t/silly-story-generator-assessment/24686">discussion thread for this exercise</a> 得到建議，或者在<a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>上的 <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC 頻道。提醒您：第一次嘗試這個測驗時，作弊可不會得到任何收穫喔！</p>

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



<h2 id="相關學習模組">相關學習模組</h2>

<ul>
 <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript">什麼是 JavaScript?</a></li>
 <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/A_first_splash">和 JavaScript 的第一次接觸</a></li>
 <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/What_went_wrong">什麼出錯了？ JavaScript 的疑難排解（除錯）</a></li>
 <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/Variables">儲存你需要的資訊 — 變數</a></li>
 <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/Math">JavaScript 的基本運算— 數字 與 運算子</a></li>
 <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/Strings">處理文字 — JavaScript 的字串</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a> <a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/Useful_string_methods">有用的字串方法</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a> <a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/Arrays">陣列</a></li>
 <li><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/Silly_story_generator">傻故事產生器</a></li>
</ul>