diff options
Diffstat (limited to 'files/zh-tw/learn/javascript/first_steps/a_first_splash')
| -rw-r--r-- | files/zh-tw/learn/javascript/first_steps/a_first_splash/index.html | 706 |
1 files changed, 706 insertions, 0 deletions
diff --git a/files/zh-tw/learn/javascript/first_steps/a_first_splash/index.html b/files/zh-tw/learn/javascript/first_steps/a_first_splash/index.html new file mode 100644 index 0000000000..38c7e4a4c4 --- /dev/null +++ b/files/zh-tw/learn/javascript/first_steps/a_first_splash/index.html @@ -0,0 +1,706 @@ +--- +title: 初次接觸Javascript +slug: Learn/JavaScript/First_steps/A_first_splash +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">目前你已經學會了一些JavaScript的理論，以及你能用它做些什麼。我們現在要透過一個完整的實際範例給你一個JavaScript基本功能的速成班。你將能一步一步地做出一個簡單的"猜數字"遊戲</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">先備知識:</th> + <td>基礎的電腦知識 , 有基礎的 HTML 跟 CSS 知識 ,<br> + 還有知道 JavaScript 是甚麼 .</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>獲得第一次寫 JavaScript 的經驗 ,<br> + 還有知道最基礎的 JavaScript 程式該怎麼寫 .</td> + </tr> + </tbody> +</table> + +<p>並不會要求你馬上就能仔細地了解所有程式碼 — 目前我們只是想介紹一些概觀，並向你介紹一些關於JavaScript(以及其他程式語言)如何運作的知識。在接下來的章節你將會更仔細地瞭解這些功能！</p> + +<div class="note"> +<p>Note: 你會在 JavaScript 看到許多跟其他程式語言一樣的特徵 — functions , loops 之類的 ，雖然程式語法看起來有差 ，但概念大部分都差不多 .</p> +</div> + +<h2 id="像程式工程師一樣思考">像程式工程師一樣思考</h2> + +<p>寫程式中最困難的事情之一，不是您需要學習的語法，而是如何應用它來解決現實世界中的問題。 您需要開始像個程式設計師一樣思考 — 這通常與檢視程式目標的說明有關，並確定實現這些功能所需的程式碼，以及如何使它們協同工作。</p> + +<p>這需要辛勤工作，程式語法經驗和練習 — 以及一點創造力。 你寫了越多程式碼，你就會越熟練。 我們不能保證你會在5分鐘內開發出“程式設計師的大腦”，但我們會給你很多機會在整個課程中練習"像程式設計師一樣思考"。</p> + +<p>考慮到這一點，讓我們看一下我們將在本文中構建的範例，並審視將其分解為具體任務的大致流程。</p> + +<h2 id="範例_—_猜數字遊戲">範例 — 猜數字遊戲</h2> + +<p>在本文中，我們將向您展示如何構建您可以在下面看到的簡單遊戲：</p> + +<div class="hidden"> +<h6 id="Top_hidden_code">Top hidden code</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>Number guessing game</title> + <style> + html { + font-family: sans-serif; + } + + body { + width: 50%; + max-width: 800px; + min-width: 480px; + margin: 0 auto; + } + + .lastResult { + color: white; + padding: 3px; + } + </style> +</head> + +<body> + + <h1>Number guessing game</h1> + <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p> + <div class="form"> <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Submit guess" class="guessSubmit"> </div> + <div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> + </div> + +<script> + // Your JavaScript goes here + let randomNumber = Math.floor(Math.random() * 100) + 1; + const guesses = document.querySelector('.guesses'); + const lastResult = document.querySelector('.lastResult'); + const lowOrHi = document.querySelector('.lowOrHi'); + const guessSubmit = document.querySelector('.guessSubmit'); + const guessField = document.querySelector('.guessField'); + let guessCount = 1; + let resetButton; + + function checkGuess() { + let userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = 'Previous guesses: '; + } + + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'Congratulations! You got it right!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!GAME OVER!!!'; + lowOrHi.textContent = ''; + setGameOver(); + } else { + lastResult.textContent = 'Wrong!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent='Last guess was too low!' ; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = 'Last guess was too high!'; + } + } + + guessCount++; + guessField.value = ''; + } + + guessSubmit.addEventListener('click', checkGuess); + + function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement('button'); + resetButton.textContent = 'Start new game'; + document.body.appendChild(resetButton); + resetButton.addEventListener('click', resetGame); + } + + function resetGame() { + guessCount = 1; + const resetParas = document.querySelectorAll('.resultParas p'); + for(let i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent=''; + } + + resetButton.parentNode.removeChild(resetButton); + guessField.disabled = false; + guessSubmit.disabled = false; + guessField.value=''; + guessField.focus(); + lastResult.style.backgroundColor='white'; + randomNumber=Math.floor(Math.random() * 100) + 1; + } +</script> + +</body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>好好玩一下遊戲再繼續吧 —— 在繼續前先與這個遊戲熟悉起來。</p> + +<p>讓我們假設你的老闆給了你以下關於創建這個遊戲的簡介：</p> + +<blockquote> +<p>我要你幫我做一個很簡單的猜數字遊戲 .<br> + 玩家要在 10 回合內猜中一個1到100之間的隨機數字 ,<br> + 每回合結束時都要告訴玩家他們猜對還是猜錯 ,<br> + 然後要是他們猜錯 , 要告訴他們數字猜的太小還是太大 ,<br> + 這個遊戲會在玩家猜對 , 或是猜超過 10 次時結束 ,<br> + 且遊戲結束時 , 要提供一個選項讓玩家可以再玩一次 .</p> +</blockquote> + +<p>當看到上面的介紹後，我們可以做的第一件事就是開始拆解，盡可能的像個程式設計師，將它拆解為簡單可執行的任務：</p> + +<ol> + <li>產生一個1到100間的隨機數字。</li> + <li>從一開始，紀錄玩家目前回合數。</li> + <li>提供玩家猜數字的方向(太大還是太小)。</li> + <li>當玩家送出第一個猜測後，將猜測記錄下來，讓玩家可以看到他們之前的猜測。</li> + <li>接著檢查數字是否猜中。</li> + <li>如果數字猜對： + <ol> + <li>顯示恭喜訊息。</li> + <li>使玩家不能再輸入更多猜測(避免把遊戲玩壞)。</li> + <li>顯示控制鈕讓玩家可以重新開始遊戲。</li> + </ol> + </li> + <li>如果數字猜錯而且玩家有剩餘回合數： + <ol> + <li>告訴玩家他猜錯了。</li> + <li>讓玩家輸入其他的猜測</li> + <li>回合數增加1。</li> + </ol> + </li> + <li>如果數字猜錯而且玩家沒有剩餘回合數： + <ol> + <li>告訴玩家遊戲結束。</li> + <li>使玩家不能再輸入更多猜測(避免把遊戲玩壞)。</li> + <li>顯示控制鈕讓玩家可以重新開始遊戲。</li> + </ol> + </li> + <li>當遊戲重新開始，確保遊戲邏輯和畫面(UI，使用這介面)全面重設，然後回到第一步。</li> +</ol> + +<p>現在，讓我們繼續向前，一路上我們檢視如何將這些步驟轉化為程式碼、建構出上面的範例與探索JavaScript的功能。</p> + +<h3 id="初步設定">初步設定</h3> + +<p>在課程開始前，我們希望你可以複製一份<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a>到自己的電腦中(<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">see it live here</a>)。用瀏覽器與文字編輯器將檔案打開時，你會看到簡單的標題、說明段落還有輸入猜測的表單，然而表單目前還不會做任何事情。</p> + +<p>所有的程式碼都會放入置於HTML底部的{{htmlelement("script")}}元素裡：</p> + +<pre class="brush: html notranslate"><script> + + // Your JavaScript goes here + +</script> +</pre> + +<h3 id="加入變數儲存我們的資料">加入變數儲存我們的資料</h3> + +<p>我們一起開始吧。首先，在你的{{htmlelement("script")}} 元素裡加入以下幾行：</p> + +<pre class="brush: js notranslate">let randomNumber = Math.floor(Math.random() * 100) + 1; + +const guesses = document.querySelector('.guesses'); +const lastResult = document.querySelector('.lastResult'); +const lowOrHi = document.querySelector('.lowOrHi'); + +const guessSubmit = document.querySelector('.guessSubmit'); +const guessField = document.querySelector('.guessField'); + +let guessCount = 1; +let resetButton;</pre> + +<p>這一區塊的程式碼設定我們的程式中用來儲存資料的變數。簡單的來說，「變數」是「值」的容器(值可以是數字、一串文字或是其他東西)。你可以用「關鍵字」(keyword) <code>let</code>(或是<code>var</code>)後面加上變數的名字來建立變數(在<a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">之後的文章</a>你會看到兩者的差別)。利用關鍵字 <code>const</code> 建立常數，常數(Constant)是用來儲存你不會更改的值。我們用常數儲存使用者介面的參照，使用者介面中的文字可能會改變，但是參照所指的HTML元素的不會改變。</p> + +<p>藉由等於符號(<code>=</code>)後面加上一個值，你可以指定變數或是常數的值。</p> + +<p>在我們的範例中：</p> + +<ul> + <li>第一個變數 — <code>randomNumber</code> — 被指定成一個由數學運算的1到100間的隨機數字</li> + <li>接著的三個常數，分別儲存HTML中結果段落的參照，在後面的程式碼中，參照被用來插入一些數值 (注意他們都位於一個{{htmlelement("div")}}元素裡，後者在之後我們重置遊戲時會被用來選取所有三個{{htmlelement("p")}}元素)： + <pre class="brush: html notranslate"><div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> +</div> +</pre> + </li> + <li>接著的兩個常數，分別儲存表單中的文字輸入和送出按鈕，之後會用來控制送出玩家猜測的數字。 + <pre class="brush: html notranslate"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> +<input type="submit" value="Submit guess" class="guessSubmit"></pre> + </li> + <li>最後兩個變數，一個儲存回合數1，另一個儲存指向重新開始按鈕的參照 (按鈕現在還不存在，之後會加上的)。</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: 從<a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">下一篇文章</a>開始，你會學到更多有關變數的事。</p> +</div> + +<h3 id="函式">函式</h3> + +<p>下一步，將下面這段添加到之前寫的那段程式碼：</p> + +<pre class="brush: js notranslate">function checkGuess() { + alert('I am a placeholder'); +}</pre> + +<p>函式是一段可重複利用的程式碼塊。建立一個函式便可以反複運行並避免撰寫重複的程式碼。定義函式有很多方法，在此我們先專注在一種簡單的方式。這裡我們以關鍵字 <code>function</code> 、自訂的函式名、一對括號以及一對花括號（<code>{ }</code>）建立函式。花括號中的程式碼便是我們調用函式時所要實際執行的程式碼。</p> + +<p>輸入函式名稱與括號便可以執行函式。</p> + +<p>讓我們來試試吧。儲存你的程式碼並重新整理瀏覽器畫面。進入 <a href="/zh-TW/docs/Learn/Common_questions/What_are_browser_developer_tools">開發者工具 JavaScript console</a>, 並輸入下面這行：</p> + +<pre class="brush: js notranslate">checkGuess();</pre> + +<p> 當按下 <kbd>Return</kbd>/<kbd>Enter</kbd> 時，你會看到一個警告跳窗顯示「I am a placeholder」。我們已經在程式中定義好一個函式，只要我們調用這個函式，函式便會彈出一個警告視窗。</p> + +<div class="note"> +<p><strong>Note</strong>: 你會在後續的課程中學習到更多關於函式的事。</p> +</div> + +<h3 id="運算子">運算子</h3> + +<p>JavaScript 運算子可以讓我們執行比較、數學運算、連接字符串等。</p> + +<p>儲存我們的程式碼並重整頁面，開啟 <a href="/zh-TW/docs/Learn/Common_questions/What_are_browser_developer_tools">開發者工具 JavaScript console</a> 。接下來你可以試著輸入以下的範例 —— 輸入跟每個「範例」欄位中一樣的內容，每輸入一個就按下<kbd>Return</kbd> / <kbd>Enter</kbd>， 接著看看回傳的結果。</p> + +<p>如果你不能快速打開瀏覽器開發工具， 你可以使用内嵌的應用程式中輸入以下範例：</p> + +<div class="hidden"> +<h6 id="Hidden_code">Hidden code</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>JavaScript console</title> + <style> + * { + box-sizing: border-box; + } + + html { + background-color: #0C323D; + color: #809089; + font-family: monospace; + } + + body { + max-width: 700px; + } + + p { + margin: 0; + width: 1%; + padding: 0 1%; + font-size: 16px; + line-height: 1.5; + float: left; + } + + .input p { + margin-right: 1%; + } + + .output p { + width: 100%; + } + + .input input { + width: 96%; + float: left; + border: none; + font-size: 16px; + line-height: 1.5; + font-family: monospace; + padding: 0; + background: #0C323D; + color: #809089; + } + + div { + clear: both; + } + + </style> + </head> + <body> + + + </body> + + <script> + var geval = eval; + + function createInput() { + var inputDiv = document.createElement('div'); + var inputPara = document.createElement('p'); + var inputForm = document.createElement('input'); + + inputDiv.setAttribute('class','input'); + inputPara.textContent = '>'; + inputDiv.appendChild(inputPara); + inputDiv.appendChild(inputForm); + document.body.appendChild(inputDiv); + inputDiv.focus(); + + if(document.querySelectorAll('div').length > 1) { + inputForm.focus(); + } + + inputForm.addEventListener('change', executeCode); + } + + function executeCode(e) { + try { + var result = geval(e.target.value); + } catch(e) { + var result = 'error — ' + e.message; + } + + var outputDiv = document.createElement('div'); + var outputPara = document.createElement('p'); + + outputDiv.setAttribute('class','output'); + outputPara.textContent = 'Result: ' + result; + outputDiv.appendChild(outputPara); + document.body.appendChild(outputDiv); + + e.target.disabled = true; + e.target.parentNode.style.opacity = '0.5'; + + createInput() + } + + createInput(); + + </script> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>首先讓我們看看以下的算數運算子：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">運算子</th> + <th scope="col">名稱</th> + <th scope="col">範例</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>加法</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>減法</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>乘法</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>除法</td> + <td><code>10 / 5</code></td> + </tr> + </tbody> +</table> + +<p>你也可以使用 <code>+</code> 來連接字串 (在程式設計中，這稱爲<strong>連接</strong>)。試著輸入以下幾行程式，每次一行：</p> + +<pre class="brush: js notranslate">var name = 'Bingo'; +name; +var hello = ' says hello!'; +hello; +var greeting = name + hello; +greeting;</pre> + +<p>你也可以使用一些捷徑，這些被稱爲增量賦值運算子。如果你只是簡單想將兩個字串加在一起，你可以這樣做：</p> + +<pre class="brush: js notranslate">name += ' says hello!';</pre> + +<p>相當於</p> + +<pre class="brush: js notranslate">name = name + ' says hello!';</pre> + +<p>當我們進行真假值測試時 (例如{{anch("條件", "下面")}})，我們可以使用比較運算子，如：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">運算子</th> + <th scope="col">名稱</th> + <th scope="col">範例</th> + </tr> + <tr> + <td><code>===</code></td> + <td>嚴格等於 (是否完全一樣?)</td> + <td><code>5 === 2 + 4</code></td> + </tr> + <tr> + <td><code>!==</code></td> + <td>不等於 (是否不一樣?)</td> + <td><code>'Chris' !== 'Ch' + 'ris'</code></td> + </tr> + <tr> + <td><code><</code></td> + <td>小於</td> + <td><code>10 < 6</code></td> + </tr> + <tr> + <td><code>></code></td> + <td>大於</td> + <td><code>10 > 20</code></td> + </tr> + </thead> +</table> + +<h3 id="條件">條件</h3> + +<p>回到 <code>checkGuess()</code> 函式，我們希望的結果當然不只是彈出簡單訊息而已。我們更想要知道這個函式將如何檢查玩家的猜測是否準確，並回傳正確的結果。</p> + +<p>所以現在將 <code>checkGuess()</code> 函式替換成下面這個版本：</p> + +<pre class="brush: js notranslate">function checkGuess() { + var userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = 'Previous guesses: '; + } + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'Congratulations! You got it right!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!GAME OVER!!!'; + setGameOver(); + } else { + lastResult.textContent = 'Wrong!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent = 'Last guess was too low!'; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = 'Last guess was too high!'; + } + } + + guessCount++; + guessField.value = ''; + guessField.focus(); +}</pre> + +<p>哇，突然出現了很多程式碼！我們來完整地看一遍這些程式並介紹它們是如何運行的。</p> + +<ul> + <li>第一行（上面的第2行）宣告一個名為 <code>userGuess</code> 的變數，並將其值設置為在表單中文字輸入格內的當前值。我們還通過內建的 <code>Number()</code> 方法運行此值，以確保該值絕對是一個數字。</li> + <li>接下來，我們遇到第一個條件程式碼區塊（上面的第3-5行）。條件程式碼區塊允許您能基於某個條件是否為真來選擇性地執行程式碼。它看起來有點像函式，但其實並非如此。最簡單的條件區塊格式從 <code>if</code> 關鍵字開始，然後是一些括號，然後是一些花括號。在括號內包含一個比較測試。如果括號內的比較測試回傳 <code>true</code>，花括號內的程式碼則會被執行；否則不會執行，而會繼續執行接下來的程式碼。在這個情況下，我們的比較測試是檢查 <code>guessCount</code> 變數是否等於 <code>1</code>（即，這是否為玩家的第一次嘗試）： + <pre class="notranslate"><code>guessCount === 1</code></pre> + 如果是，我們將 <code>guesses</code> 段落的文字內容設為 “Previous guesses: ”。</li> + <li>第6行將當前 <code>userGuess</code> 的值附加到 <code>guesses</code> 段落的尾端，並加上一個空格，讓顯示的每次猜測紀錄之間都有一個空格。</li> + <li>下一個條件區塊（上面第8-24行）做了一些檢查： + <ul> + <li>第一個 <code>if(){ }</code> 檢查用戶的猜測是否等於<code>我們</code>JavaScript頂部設置的 <code>randomNumber</code>。如果是，代表玩家猜對了，贏了遊戲，所以我們向玩家顯示一個漂亮的綠色祝賀訊息，清除 <code>lowOrHigh</code> 段落的內容，並運行一個叫做 <code>setGameOver()</code> 的函式，這個函式我們稍後再討論。</li> + <li>現在我們使用 <code>else if(){ }</code> 區塊將另一個測試連接到上一個測試的後面。這個測試檢查本次猜測是否為玩家的最後一次猜測機會。如果是，則執行與上一個條件區塊相同的操作，只是這次是遊戲結束訊息，漂亮的綠色祝賀訊息。</li> + <li>連接到此條件區塊後面的最後一個區塊（<code>else { }</code>）只會在其他兩個測試都沒有返回 <code>true</code> 時執行（即，玩家沒有猜對，但他們還有更多的猜測機會）。在這種情況下，我們告訴他們猜錯了，然後我們執行另一個條件測試以檢查猜測是高於還是低於正確答案 <code>randomNumber</code>，並顯示進一步的訊息來告訴他們要猜得更高或更低。</li> + </ul> + </li> + <li>函式中的最後三行（上面的第26-28行）讓玩家可以提交下一個猜測。我們將<code>guessCount</code>變數加1，來增加玩家已使用的猜測次數（<code>++</code>是遞增操作 - 遞增1），並將表單中文字輸入格內的文字清空並給予其焦點（顯示文字輸入游標），準備好讓玩家輸入下一個猜測。</li> +</ul> + +<h3 id="事件">事件</h3> + +<p>現在我們有了一個很好的 <code>checkGuess()</code> 函式，但它並不會做任何事情，因為我們還沒有呼叫它。我們想在按下 “Submit guess” 按鈕時呼叫它，為此，我們需要使用<strong>事件</strong>。事件是在瀏覽器中發生的操作，例如單擊按鈕，加載頁面或播放影片，以讓我們可以在這些操作發生時執行程式碼。偵聽事件發生的構造稱為<strong>事件偵聽器</strong>，偵聽事件而觸發執行的程式碼稱為<strong>事件處理器</strong>。</p> + +<p>在 <code>checkGuess()</code> 函式下面添加下行（不是指函式內部的後面，而是函式外）：</p> + +<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre> + +<p>這裡我們為 <code>guessSubmit</code> 按鈕添加一個事件偵聽器。這是一個函式，它接受兩個輸入值（稱為<em>參數</em>） - 我們正在監聽的事件類型字串（本例中的 <code>click</code>），以及我們想要在事件發生時運行的程式碼（在這種情況下是<code>checkGuess()</code>函式） — 請注意，在編寫 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API/EventTarget/addEventListener" title="EventTarget.addEventListener() 方法能將指定的事件監聽器註冊到 EventTarget 實作物件上。EventTarget 可能是 Document 中的 Element 物件、Document 物件本身、Window 物件，或是其它支援事件的物件（如：XMLHttpRequest）。"><code>addEventListener()</code></a> 內部時我們不需要為函式加上括號。</p> + +<p>現在保存並重整頁面，現在你的範例應該可以正常執行了。現在唯一的問題是，如果你猜對了正確的答案或用完了猜測機會，那麼遊戲就會出錯，因為我們還沒有定義 <code>setGameOver()</code> — 遊戲結束後應該執行的函式。現在讓我們加上缺少的程式碼並完成範例功能。</p> + +<h3 id="完成遊戲功能">完成遊戲功能</h3> + +<p>讓我們加入 <code>setGameOver()</code> 這個函式到我們程式碼的底部並演練它。 現在，在你的 JavaScript 尾端加上這些：</p> + +<pre class="brush: js notranslate">function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement('button'); + resetButton.textContent = 'Start new game'; + document.body.appendChild(resetButton); + resetButton.addEventListener('click', resetGame); +}</pre> + +<ul> + <li>函數中的前兩行透過將表單的文字輸入和按鈕的 <code>disabled</code> 屬性設為 <code>true</code> 來將兩者無效化。這很重要，因為如果沒有這麼做，使用者可能會在遊戲結束後繼續送出更多猜測值，這也許會把東西弄得一團糟。</li> + <li>接下來的三行會生成一個新的 {{htmlelement("button")}} 元素，將它的文字標籤設為「Start new game」後，添加到我們的HTML的最尾端。</li> + <li>最後一行則會在我們的新按鈕上設置一個事件偵聽器，來讓使用者按下按鈕時執行一個叫 <code>resetGame()</code> 的函數。</li> +</ul> + +<p>現在讓我們來定義 <code>resetGame()</code>！再次將下面這些程式碼加進你的 JavaScript 的最下方。</p> + +<pre class="brush: js notranslate">function resetGame() { + guessCount = 1; + + var resetParas = document.querySelectorAll('.resultParas p'); + for (var i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; + } + + resetButton.parentNode.removeChild(resetButton); + + guessField.disabled = false; + guessSubmit.disabled = false; + guessField.value = ''; + guessField.focus(); + + lastResult.style.backgroundColor = 'white'; + + randomNumber = Math.floor(Math.random() * 100) + 1; +}</pre> + +<p>這段相對較常的程式碼會完全將所有東西重置到遊戲的初始狀態，讓玩家可以再玩一次。這段程式碼做了下面這些事：</p> + +<ul> + <li>將 <code>guessCount</code> 設回 1。</li> + <li>清除所有訊息段落。</li> + <li>將重置按鈕移除。</li> + <li>將表單元素有效化，清空文字輸入並給予其焦點，準備好讓玩家能夠進行新一輪的猜測。</li> + <li><code>將lastResult</code> 段落的背景顏色設回白色。</li> + <li>生成一個新的隨機數值，才不會讓玩家又猜一次重複的答案！</li> +</ul> + +<p><strong>現在，你應該有了一個完整且能正常執行的簡單遊戲了 — 恭喜你啦！</strong></p> + +<p>接下來這篇文章的工作只剩下來談談其他幾個很重要的程式功能，你應該已經看過了，只是還沒察覺罷了。</p> + +<h3 id="迴圈">迴圈</h3> + +<p>上面的程式碼中，一個我們需要仔細看看的部份是 <a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/for">for</a> 迴圈。迴圈在程式設計中是一個非常重要的內容，可以讓你在滿足條件前反覆執行同一段程式碼。</p> + +<p>開始吧，打開你的 <a href="/zh-TW/docs/Learn/Common_questions/What_are_browser_developer_tools">開發者工具 JavaScript console</a>，然後輸入下面這行：</p> + +<pre class="brush: js notranslate">for (var i = 1 ; i < 21 ; i++) { console.log(i) }</pre> + +<p>看見了嗎？在你的主控台內印出了數字 1到 20。這就是迴圈的效果。一個 for 迴圈需要三個參數：</p> + +<ol> + <li><strong>起始動作：</strong>這個例子中我們從 1 開始累加，這個起始數值可以是任何你想要的值。你也可以不要使用 <code>i</code> 這個變數名稱，但習慣上我們會使用 <code>i</code> ，因為它簡單好記。 </li> + <li><strong>離開條件：</strong>這裡我們指定了 <code>i < 21</code> — 這個迴圈會一直執行直到 <code>i</code> 不再小於 21。當 <code>i</code> 達到 21，這個迴圈就會停止執行。</li> + <li><strong>增加動作：</strong>我們指定了 <code>i++</code>，「將 <code>i</code> 的值加 1」。這個迴圈會對每個 <code>i</code> 的值執行一次，直到 <code>i</code> 達到 21（如上一條所述）。這個例子中，我們簡單的透過 {{domxref("Console.log", "console.log()")}} 將每次迴圈中 <code>i</code> 的值輸出到主控台中。</li> +</ol> + +<p>現在我們來看看在猜謎遊戲中的迴圈 — 這可以在 <code>resetGame()</code> 函式中找到：</p> + +<pre class="brush: js notranslate">var resetParas = document.querySelectorAll('.resultParas p'); +for (var i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; +}</pre> + +<p>這段程式碼透過呼叫 {{domxref("Document.querySelectorAll", "querySelectorAll()")}} 創建一個變數並存著一個在 <code><div class="resultParas"></code> 中的所有段落清單，然後使用迴圈來遍歷每個段落元素，並移除其內容。</p> + +<h3 id="稍微討論一下物件">稍微討論一下物件</h3> + +<p>在開始討論這個段落的話題前，先來做點小小修改。在你的 JavaScript 接近頂部的 <code>var resetButton</code> 下一行加上：</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>，然後存檔。</p> + +<p>這一行呼叫了 {{domxref("HTMLElement.focus", "focus()")}} 方法來在頁面讀取時，將輸入游標自動放進 {{htmlelement("input")}} 文字欄裡面，這意味著使用者在開啟頁面後就可以直接使用鍵盤來在文字欄內輸入文字，而不用先點選文字欄。這只是個小修改，可是大大的提升了使用體驗，也給了使用者清楚的提示 — 提示他們要做些什麼來遊玩這個遊戲。</p> + +<p>讓我們來分析一下究竟發生了什麼事。在JavaScript中，所有東西都是一個<strong>物件</strong>。物件是一個集合，由許多相關的功能打包成一體。你可以創建一個你自己的物件，不過這比較進階，我們現在並不會涵蓋這個內容，這些會在課程的後期提到。現在，我們只會簡要的提到一些你的瀏覽器內建的物件，他們能夠讓你做到許多有用的事。</p> + +<p>在這個例子中，我們首先創建了一個 <code>guessField</code> 變數，儲存著一個指向HTML表單中文字輸入欄的參照 — 這可以在我們定義變數的區塊中找到：</p> + +<pre class="brush: js notranslate">var guessField = document.querySelector('.guessField');</pre> + +<p>我們使用了 {{domxref("document.querySelector", "querySelector()")}} 來取得這個參照，前者是 {{domxref("document")}} 物件的方法。<code>querySelector()</code> 接受一個參數 — 一個 <a href="/zh-TW/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS 選擇器</a>， 會回傳你想要的元素參照。</p> + +<p>因為現在 <code>guessField</code> 中存著一個指向 {{htmlelement("input")}} 元素的參照，它現在可以存取這個元素的屬性（基本上就是存在物件中的變數，其中有一些可能會是常數）和方法（基本上就是存在物件中的函式）了。文字輸入欄的其中一個方法便是 <code>focus()</code>，我們便可以透過呼叫這個方法來給予其焦點：</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>沒有存著表單元素參照的變數就不會有 <code>focus()</code> 方法能使用。<br> + 例如存著一個 {{htmlelement("p")}} 元素的 <code>guesses</code> 和存著一個數值的 <code>guessCount</code>。</p> + +<h3 id="來玩玩瀏覽器物件">來玩玩瀏覽器物件</h3> + +<p>讓我們來稍微玩一點瀏覽器內建的物件吧。</p> + +<ol> + <li>首先在瀏覽器中開啟你的程式。</li> + <li>接下來，打開你的<a href="/zh-TW/docs/Learn/Common_questions/What_are_browser_developer_tools">開發者工具 JavaScript console</a>。</li> + <li>輸入 <code>guessField</code>，可以看到主控台顯示這個變數儲存著一個 {{htmlelement("input")}} 元素。你還可以發現主控台會自動幫你完成已存在的物件名稱！</li> + <li>接下來輸入： + <pre class="brush: js notranslate">guessField.value = 'Hello';</pre> + <code>value</code> 屬性儲存著現在文字輸入欄內的內容參照。現在按下 <kbd>Enter</kbd>，看看文字欄內的內容是不是變了？</li> + <li>試著輸入 <code>guesses</code> 然後按下 <kbd>Enter</kbd>，主控台會顯示這個變數儲存著一個 {{htmlelement("p")}} 元素。</li> + <li>現在輸入： + <pre class="brush: js notranslate">guesses.value</pre> + 瀏覽器會回傳 <code>undefined</code>，因為 <code>value</code> 不存在在段落元素裡面。</li> + <li>要更改段落元素中的文字，你需要的是 {{domxref("Node.textContent", "textContent")}} 屬性。試試這個： + <pre class="brush: js notranslate">guesses.textContent = 'Where is my paragraph?';</pre> + </li> + <li>現在來做些好玩的事。一行一行輸入並 <kbd>Enter</kbd>： + <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow'; +guesses.style.fontSize = '200%'; +guesses.style.padding = '10px'; +guesses.style.boxShadow = '3px 3px 6px black';</pre> + 每個在頁面上的元素都有一個 <code>style</code> 屬性，其本身又是另一個物件，包含著許多該元素的行內 CSS 屬性。這讓我們能透過 JavaScript 來動態的為元素設置 CSS 屬性。</li> +</ol> + +<h2 id="差不多就到這了">差不多就到這了</h2> + +<p>這就是我們的範例 — 你順利地來到結尾了，做得不錯！試試你的最終成品，或試試<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">我們的版本</a>。如果你仍然有困難沒有解決，再看看<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">我們的原始碼</a>。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="在這個學習模組中">在這個學習模組中</h2> + +<ul> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript">什麼是 JavaScript?</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/A_first_splash">和 JavaScript 的第一次接觸</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/What_went_wrong">什麼出錯了？ JavaScript 的疑難排解（除錯）</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Variables">儲存你需要的資訊 — 變數</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Math">JavaScript 的基本運算— 數字 與 運算子</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Strings">處理文字 — JavaScript 的字串</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Useful_string_methods">有用的字串方法</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Arrays">陣列</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Silly_story_generator">附錄：笑話產生器</a></li> +</ul> |