傻瓜故事生成器

在本評估中，您將需要運用本模組文章中學習到的知識，建立一個有趣的應用程式，生成隨機的傻瓜故事。玩得開心！

先決條件 在嘗試進行此評估之前，您應該已經完成了本模組中的所有文章。
目標 測試對 JavaScript 基礎知識的理解，例如變數、數字、運算子、字串和陣列。

起點

要開始此評估，您應該

  • 前往 獲取示例的 HTML 檔案，將其儲存到計算機上某個新目錄中的本地副本，並將其命名為 index.html，並從本地開始評估。其中還包含用於設定示例樣式的 CSS。
  • 前往 包含原始文字的頁面，並在瀏覽器中的另一個標籤頁中將其開啟。您稍後會需要它。

或者，您可以使用線上編輯器，例如 CodePen、JSFiddle 或 Glitch。您可以將 HTML、CSS 和 JavaScript 貼上到這些線上編輯器之一中。如果所使用的線上編輯器沒有單獨的 JavaScript 面板，請隨時將其內聯到 HTML 頁面中的 <script> 元素中。

注意：如果您遇到困難，可以透過我們的 溝通渠道之一與我們聯絡。

專案簡介

我們為您提供了一些原始 HTML/CSS 和一些文字字串和 JavaScript 函式；您需要編寫必要的 JavaScript 程式碼，將其轉換為一個可執行的程式，該程式執行以下操作

  • 按下“生成隨機故事”按鈕時生成一個傻瓜故事。
  • 僅當在按下生成按鈕之前在“輸入自定義名稱”文字欄位中輸入了自定義名稱時，才將故事中的預設名稱“Bob”替換為自定義名稱。
  • 如果在按下生成按鈕之前選中了英國單選按鈕，則將故事中的預設美國重量和溫度數量和單位轉換為英國等效單位。
  • 每次按下按鈕時生成一個新的隨機傻瓜故事。

以下螢幕截圖顯示了完成的程式應輸出的示例

The silly story generator app consists of a text field, two radio buttons, and a button to generate a random story.

為了讓您更好地瞭解，請檢視完成的示例（不要偷看原始碼！)

完成步驟

以下部分描述了您需要執行的操作。

基本設定

  1. 建立一個名為 main.js 的新檔案，與您的 index.html 檔案位於同一目錄中。
  2. 透過將 <script> 元素插入到 HTML 中並引用 main.js，將外部 JavaScript 檔案應用於您的 HTML。將其放在結束 </body> 標記之前。

初始變數和函式

  1. 在原始文字檔案中，複製“1. 完成變數和函式定義”標題下方的所有程式碼，並將其貼上到 main.js 檔案的頂部。這為您提供了三個變數，分別儲存對“輸入自定義名稱”文字欄位 (customName)、“生成隨機故事”按鈕 (randomize) 和 HTML 正文底部故事將被複制到的 <p> 元素 (story) 的引用。此外，您還有一個名為 randomValueFromArray() 的函式，該函式接收一個數組，並隨機返回陣列中儲存的其中一個專案。
  2. 現在檢視原始文字檔案的第二部分 - “2. 原始文字字串”。它包含用作程式輸入的文字字串。我們希望您將這些包含在 main.js 中的變數內。
    1. 將第一個長文字字串儲存在一個名為 storyText 的變數中。
    2. 將第一組三個字串儲存在一個名為 insertX 的陣列中。
    3. 將第二組三個字串儲存在一個名為 insertY 的陣列中。
    4. 將第三組三個字串儲存在一個名為 insertZ 的陣列中。

放置事件處理程式和不完整的函式

  1. 現在返回到原始文字檔案。
  2. 複製“3. 事件偵聽器和部分函式定義”標題下方的程式碼，並將其貼上到 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 字串中找到的名稱“Bob”替換為 name 變數。在此塊中，我們說“如果在 customName 文字輸入中輸入了值，則將故事中的 Bob 替換為該自定義名稱。”
  5. 在第二個 if 塊內，我們正在檢查是否選擇了 uk 單選按鈕。如果是，我們希望將故事中的重量和溫度值從磅和華氏度轉換為英石和攝氏度。您需要做的是：
    1. 查詢將磅轉換為英石和華氏度轉換為攝氏度的公式。
    2. 在定義 weight 變數的行中，將 300 替換為將 300 磅轉換為英石的計算結果。將 ' stone' 連線到整體 Math.round() 呼叫的結果的末尾。
    3. 在定義 temperature 變數的行中，將 94 替換為將 94 華氏度轉換為攝氏度的計算結果。將 ' centigrade' 連線到整體 Math.round() 呼叫的結果的末尾。
    4. 在兩個變數定義的下方，再新增兩行字串替換行，將“94 fahrenheit”替換為 temperature 變數的內容，並將“300 pounds”替換為 weight 變數的內容。
  6. 最後，在函式的倒數第二行，使 story 變數（引用該段落）的 textContent 屬性等於 newStory。

提示和技巧

  • 您無需以任何方式編輯 HTML，只需將 JavaScript 應用於您的 HTML 即可。
  • 如果您不確定 JavaScript 是否已正確應用於您的 HTML，請嘗試暫時從 JavaScript 檔案中刪除所有其他內容，新增一段您知道會產生明顯效果的簡單 JavaScript 程式碼，然後儲存並重新整理。例如，以下程式碼將 <html> 元素的背景設定為紅色 - 因此如果 JavaScript 應用正確，則整個瀏覽器視窗都將變為紅色
    js
    document.querySelector("html").style.backgroundColor = "red";
  • Math.round() 是一個內建的 JavaScript 方法，它將計算結果四捨五入到最接近的整數。
  • 需要替換三個字串例項。您可以多次重複 replace() 方法，也可以使用 replaceAll()。請記住，字串是不可變的！