進入JavaScript的第一課

2018-05-15 17:26 更新
前提: 基本的計算機知識，對HTML和CSS初步了解，知道JavaScript是什么。
目標: 擁有一點編寫JavaScript的經驗，至少會獲得關于編寫JavaScript時應當涉及到些什么的基本認識。

您不會被要求立即理解所有代碼的細節(jié)——現在我們只是想把高級概念介紹給您，以及給您一個JavaScript(以及其他編程語言)是如何工作的。在隨后的文章中，你將會再次看到這些功能的更多細節(jié)。

Note: 你在JavaScript中看到的許多代碼特性和其他編程語言類似— 函數、循環(huán)，等等。 代碼語法看起來不同，但是在概念上是基本類似的。

像程序員一樣思考

在編程中學習的最困難的事情之一不是你需要學習的語法，而是如何應用它來解決現實世界的問題。 你需要像一個程序員一樣開始思考 - 這通常涉及到對程序需要做什么的描述，以及如何實現這些東西需要什么代碼特性，以及如何使它們一起工作。

這需要努力工作，編程語法的經驗和實踐的混合，以及一點創(chuàng)造力。 你編寫的代碼越多，你就越好。 我們不能保證你將在5分鐘內開發(fā)"程序員大腦"，但我們將給你很多機會像整個課程中的程序員一樣練習思維。

考慮到這一點，讓我們看看我們將在本文中構建的示例，并查看將其分解為有形任務的一般過程。

示例 - 猜數字游戲

在本文中，我們將向您展示如何構建簡單的游戲，您可以在下面看到:

有一個去玩它 - 熟悉游戲之前，你繼續(xù)前進。

讓我們想象你的老板給你以下簡要介紹創(chuàng)造這個游戲:

我想讓你創(chuàng)建一個可以猜數字的游戲，它會在1~100以內隨機選擇一個數, 然后讓玩家挑戰(zhàn)在10輪以內猜出這個數字，每一輪都要告訴玩家正確或者錯誤， 如果出錯了，則告訴他數字是低了還是高了，并且還要告訴玩家之前猜的數字是什么。 一旦玩家猜測正確，或者他們用完了回合，游戲將結束。 游戲結束后，可以讓玩家選擇再次開始。

看看這個簡介，我們可以做的第一件事是開始把它分解成簡單的可操作的任務，盡可能多的程序員的心態(tài):

  1. 生成1到100之間的隨機數。
  2. 記錄球員所在的轉彎數。在1開始。
  3. ?為玩家提供一種猜測數字的方法。
  4. ?一旦提交了猜測，首先將它記錄在某處，以便用戶可以看到他們先前的猜測。
  5. 接下來，檢查它是否是正確的數字。
  6. 如果是正確的:
    1. ?顯示祝賀消息。
    2. 阻止玩家輸入更多的猜測(這會使游戲混亂)。
    3. 顯示控制允許玩家重新開始游戲。
  7. 如果它錯了，并且玩家已經左轉:
    1. 告訴玩家他們錯了。
    2. 允許他們輸入另一個猜測。
    3. 將圈數增加1。
  8. 如果它是錯誤的，并且玩家沒有左轉:
    1. 告訴玩家它是游戲結束。
    2. 阻止玩家輸入更多的猜測(這會使游戲混亂)。
    3. 顯示控制允許玩家重新開始游戲。
  9. ???一旦游戲重新啟動，請確保游戲邏輯和用戶界面完全重置，然后返回步驟1。

讓我們繼續(xù)前進，看看我們如何將這些步驟轉換為代碼，構建示例，以及探索JavaScript功能。

初始設置

要開始本教程，我們希望您制作本地副本 number-guessing-game-start.html? 文件? (see it live here). 在文本編輯器和Web瀏覽器中打開它。 此時，您將看到一個簡單的標題，用于輸入猜測的說明和形式段，但表單目前不會執(zhí)行任何操作。

我們將添加所有代碼的地方放在HTML底部的("script")元素中:

<script>

  // Your JavaScript goes here

</script>

添加變量以保存數據

讓我們開始吧。 首先，在("script")元素中添加以下行:

var randomNumber = Math.floor(Math.random() * 100) + 1;

var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');

var guessSubmit = document.querySelector('.guessSubmit');
var guessField = document.querySelector('.guessField');

var guessCount = 1;
var resetButton;

這部分代碼設置了我們需要存儲我們的程序將使用的數據的變量。 變量基本上是值的容器(例如數字或文本字符串)。 您可以使用關鍵字var以及變量的名稱創(chuàng)建一個變量。 然后，您可以使用等號(=)和您要賦予的值為變量賦值。

在我們的示例中:

  • 第一個變量 - randomNumber - 被分配一個1到100之間的隨機數，使用數學算法計算。
  • 接下來的三個變量都用于存儲對HTML中的結果段落的引用，并用于在代碼的后面段落中插入值:
  • <p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
  • 接下來的兩個變量存儲對表單文本輸入和提交按鈕的引用，并用于控制以后提交猜測: 
    <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
<input type="submit" value="Submit guess" class="guessSubmit">
  • 我們的最后兩個變量存儲一個猜測計數1(用于跟蹤玩家有多少猜測)，以及一個不存在的引用(但稍后會有)。

Note: 稍后在課程中，您將學到更多關于變量的信息 , starting with the next article.

功能

接下來，在您之前的JavaScript中添加以下內容:

function checkGuess() {
  alert('I am a placeholder');
}
函數是可重復使用的代碼塊，您可以一次編寫一次，并一次又一次運行，從而節(jié)省了始終保持重復代碼的需要。 這真的很有用。 有許多方法來定義函數，但現在我們將集中在一個簡單的類型。 這里我們使用關鍵字function定義了一個函數，后面跟著一個名字，后面加了括號。 之后，我們放兩個大括號({})。 在大括號里面，所有我們想要運行的代碼，當我們調用該函數。

該代碼通過鍵入函數的名稱后跟括號運行。

請嘗試立即保存您的代碼，然后在瀏覽器中刷新。
?

進入 ?developer tools JavaScript console, 并輸入以下代碼:

checkGuess();

你應該看到一個警報，說"我是一個占位符"; 我們在我們的代碼中定義了一個函數，在我們調用它時創(chuàng)建一個警報。

Note: 在課程后面你會學到更多關于函數的知識。

操作員

JavaScript運算符允許我們執(zhí)行測試，做數學，連接字符串在一起，和其他這樣的事情。

讓我們保存我們的代碼并刷新瀏覽器中顯示的頁面。 打開 developer tools JavaScript console 如果你還沒有打開已經打開，所以你可以嘗試鍵入下面所示的示例 - 從"示例"列中輸入完全如圖所示，在每一個之后按Return / Enter，并查看他們返回的結果。 如果您無法輕松訪問瀏覽器開發(fā)人員工具，則可以隨時使用下面所示的簡單內置控制臺:

首先讓我們來看看算術運算符，例如:

操作員 名稱 例子
+ Addition 6 + 9
- Subtraction 20 - 15
* Multiplication 3 * 7
/ Division 10 / 5

您也可以使用+運算符將文本字符串連接在一起(在編程中稱為連接)。 嘗試輸入以下行:

var name = 'Bingo';
name;
var hello = ' says hello!';
hello;
var greeting = name + hello;
greeting;

還有一些快捷操作符可用，稱為增強賦值操作符。 例如，如果你想簡單地添加一個新的文本字符串到一個現有的并返回結果，你可以這樣做:

name += ' says hello!';

這相當于

name = name + ' says hello!';

當我們運行true / false測試(例如在條件語句 - 見下面)，我們使用比較運算符，例如:

操作員 名稱 例子
=== 嚴格的平等(是完全一樣嗎？) 5 === 2 + 4
!== 不平等(是不是相同？) 'Chris' !== 'Ch' + 'ris'
< 少于 10 < 6
> 比...更棒 10 > 20

條件

回到我們的checkGuess()函數，我認為可以說，我們不希望它只是吐出一個占位符消息。 我們希望它能夠檢查玩家的猜測是否正確，并做出適當的反應。

此時，將您當前的checkGuess()函數替換為此版本:

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();
}

這是很多代碼 - phew！ 讓我們通過每個部分，并解釋它做什么。

  • 第一行(上面的第2行)聲明一個名為userGuess的變量，并將其值設置為在文本字段中輸入的當前值。 我們還通過內置的Number()方法運行這個值，只是為了確保該值絕對是一個數字。
  • 接下來，我們遇到我們的第一個條件代碼塊(上面的第3-5行)。 條件代碼塊允許您根據某個條件是否為真選擇性地運行代碼。 它看起來有點像一個函數，但它不是。 條件塊的最簡單形式是從關鍵字if開始，然后是一些括號，然后是一些花括號。 在括號內，我們包括一個測試。 如果測試返回true，我們在花括號中運行代碼。 如果沒有，我們不會，并且移動到下一位代碼。 在這種情況下，測試是測試guessCount變量是否等于1，即是否這是玩家的第一次去:
  • guessCount === 1
    如果是, 我們讓 guesses 段落的文本內容等于"Previous guesses: "。如果不是，就算了。
  • 第6行將當前userGuess值附加到猜測段落的末尾，加上一個空格，因此在每個猜測之間將有一個空格。
  • 下一個塊(上面的第8-24行)做幾個檢查:
    • 第一個if(){ } 檢查用戶的猜測是否等于randomNumber在 JavaScript 頂端設置的值。如果是，則玩家猜對了，游戲勝利，那么，我們向玩家顯示一個漂亮的綠色的祝賀信息，清除低/高猜測信息框的內容，并運行一個函數調用setgameover()方法。
    • Now we've chained another test onto the end of the last one using an else if(){ } structure.它會檢查這個回合是否是用戶最后一個回合。如果是，程序回合前面一樣，除了把祝賀信息換成一個game over信息。
    • The final block chained onto the end of this code (the else { }) contains code that is only run if neither of the other two tests returns true (i.e. the player didn't guess right, but they have more guesses left). In this case we tell them they are wrong, then we perform another conditional test to check whether the guess was higher or lower than the answer, displaying a further message as appropriate to tell them higher or lower.
  • The last three lines in the function (line 26–28 above) get us ready for the next guess to be submitted. We add 1 to the guessCount variable so the player uses up their turn (++ is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered.

事件

在這一點上，我們有一個很好的實現checkGuess()函數，但它不會做任何事情，因為我們還沒有調用它。 理想情況下，我們希望在按下"提交猜測"按鈕時調用它，為此，我們需要使用事件。 事件是瀏覽器中發(fā)生的操作，例如點擊按鈕，加載頁面或播放視頻，我們可以運行代碼塊來響應。 偵聽事件發(fā)生的構造稱為事件偵聽器，并且響應于事件觸發(fā)而運行的代碼塊被稱為事件處理器。

在checkGuess()函數的結束大括號下面添加以下代碼:

guessSubmit.addEventListener('click', checkGuess);

這里我們?yōu)間uessSubmit按鈕添加了一個監(jiān)聽事件。這個方法 包含兩個可輸入值(參數)，監(jiān)聽事件的類型(在本例中為"點擊")，和當事件發(fā)生時我們想要執(zhí)行的代碼(在本例中為checkGuess()函數)——注意，當函數作為事件監(jiān)聽方法的參數時，函數名后不應帶括號。

嘗試保存和刷新您的代碼現在，您的示例應該現在工作，一點。 現在唯一的問題是，如果你猜到正確的答案或運行猜測，游戲將打破，因為我們還沒有定義setGameOver()函數，應該在游戲結束后運行。 讓我們現在添加我們缺少的代碼，并完成示例功能。

完成游戲的功能

讓我們將setGameOver()函數添加到我們的代碼底部，然后遍歷它。 現在添加，在其余的JavaScript下面:

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);
}
  • 前兩行禁用表單文本輸入和按鈕，方法是將其禁用屬性設置為true。 這是必要的，因為如果我們沒有，用戶可以提交更多的猜測，在游戲結束后，這會搞砸了。
  • 接下來的三行創(chuàng)建了一個新的button元素，設置它的文本信息為"開始新游戲"，并把它添加到我們文檔的底部。
  • 最后一行在我們的新按鈕上設置一個事件監(jiān)聽器，當它被點擊時，一個名為resetGame()的函數被運行。

現在我們需要定義這個函數了！ 將以下代碼添加到JavaScript的底部:

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;
}

這個相當長的代碼塊完全重置了一切:

  • 將guessCount恢復為1。
  • 清除所有信息段落。
  • 從我們的代碼中刪除重置按鈕。
  • 啟用表單元素，并清空和聚焦文本字段，準備輸入新的猜測。
  • 從lastResult段中刪除背景顏色。
  • 生成一個新的隨機數，這樣你不只是猜到相同的數字！

在這一點上，你應該有一個完全工作(簡單)的游戲 。

我們現在在本文中仍然要做的是談論一些其他重要的代碼功能，你已經看到，雖然你可能沒有意識到這一點。

循環(huán)

上面代碼的一部分，我們需要更詳細地看一下 for 循環(huán)。 循環(huán)在編程中是一個非常重要的概念，它允許你一直重復運行一段代碼，直到滿足某個條件。

首先，請再次轉到 瀏覽器開發(fā)工具 JavaScript 控制臺然后輸入以下內容:

for (var i = 1 ; i < 21 ; i++) { console.log(i) }

發(fā)生了什么？ 數字1到20在控制臺中打印出來。 這是因為循環(huán)。 for循環(huán)需要三個輸入值(參數):

  1. 起始值:在這種情況下，我們開始計數為1，但這可以是任何你喜歡的數字。 你可以用任何你喜歡的名字替換我，但我用作一個約定，因為它很短，很容易記住。
  2. 退出條件:這里我們指定i小于21 - 循環(huán)將繼續(xù)，直到i不再小于21.當i達到21時，循環(huán)不再運行 。
  3. 增量:我們定義了i++,意思是向i加1。i值的每次變動都會引發(fā)循環(huán)的執(zhí)行，直到i值等于21(就像上邊討論的那樣)。在本例中，我們通過console.log()方法簡單地在控制臺打印出每次迭代時變量i的值。

現在讓我們看看我們的猜測游戲循環(huán) - 以下可以在resetGame()函數中找到:

var resetParas = document.querySelectorAll('.resultParas p');
for (var i = 0 ; i < resetParas.length ; i++) {
  resetParas[i].textContent = '';
}

此代碼在＜div class="resultparas">內使用queryselectorall()方法創(chuàng)建一個變量包含一個列表中的所有段落，然后依次通過每個段落，刪除每個段落的文本內容。

函數的一些事

讓我們再來一次最后的改進，然后再討論。 在var resetButton下面添加以下行: 行靠近JavaScript的頂部，然后保存您的文件:

guessField.focus();

這一行使用focus() 方法立即自動地放置文本光標在輸入框內，當頁面加載完成時，意味著用戶可以馬上開始他們的第一次游戲，而不需要去點擊輸入框。 這只是一個小的附加，但它提高了可用性 ——?給用戶提供了可視化的線索去告訴他們該怎么開始這個游戲。

讓我們分析一下在這里有更多的細節(jié)。在JavaScript中，一切都是一個對象。對象是存儲在單個分組中的相關功能的集合。你可以創(chuàng)建自己的對象，但這是相當先進的，我們不會覆蓋它，直到很晚以后的課程。現在，我們將簡要討論您的瀏覽器包含的內置對象，它允許您做許多有用的事情。

在這種特殊情況下，我們首先創(chuàng)建了一個guessField變量，用于存儲對HTML中的文本輸入表單字段的引用 - 在頂部附近的變量聲明中可以找到以下行:

var guessField = document.querySelector('.guessField');

我們使用了document對象的querySelector()方法來獲得此引用。querySelector()?需要一條信息?— — 用該元素的?CSS?選擇器選擇你想要的引用的元素。

因為?guessField?現在包含對?<input>的元素的引用，它現在將訪問數量的屬性?(存儲于內部對象的其中一些不會更改其值的基礎變量)?和方法?(存儲在對象內部的基礎函數)。一種方法可用來輸入元素是?focus ()，所以我們現在可以使用這條線集中文本輸入︰

guessField.focus();

不包含對表單元素引用的變量不會有?focus () 方法可供它們執(zhí)行。例如，guesses變量包含對?<p>元素的引用和?guessCount?包含了一個數字。

使用瀏覽器對象

讓我們使用一些瀏覽器對象。

  1. First of all open your program up in a browser.
  2. Next, open your browser developer tools, and make sure the JavaScript console tab is open.
  3. Type in guessField and the console will show you that the variable contains an <input> element. You'll also notice that the console autocompletes object names that exist inside the execution environment, including your variables!
  4. Now type in the following: 
    guessField.value = 'Hello';
    The value property represents the current value entered into the text field. You'll see that by entering this command, we've changed what that is!
  5. Now try typing in guesses and pressing return. The console will show you that the variable contains a <p> element.
  6. Now try entering the following line: 
    guesses.value
    The browser will return undefined, because value doesn't exist on paragraphs.
  7. To change the text inside a paragraph, you need the textContent property instead. Try this: 
    guesses.textContent = 'Where is my paragraph?';
  8. Now for some fun stuff. Try entering the below lines, one by one: 
    guesses.style.backgroundColor = 'yellow';
guesses.style.fontSize = '200%';
guesses.style.padding = '10px';
guesses.style.boxShadow = '3px 3px 6px black';
  9. 頁面上的每個元素都有一個style屬性，它本身包含一個對象，其屬性包含應用于該元素的所有內聯CSS樣式。 這允許我們使用JavaScript在元素上動態(tài)設置新的CSS樣式。

完成了...

所以這是為了建立這個例子— 你得到了結束，做得好！ 嘗試你的最終代碼，或者看看我們的版本.如果你不能讓示例工作，請檢查它 source code.

以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號