进入JavaScript的第一课

这篇翻译不完整。请帮忙从英语翻译这篇文章

现在您在学习一些关于JavaScript的理论,以及您可以拿它来做些什么。通过一个完整的练习指导,我们将会带给您一个了解JavaScript基本功能的速成课。在这里您一步接一步地将会建立一个简单的“猜数字”游戏。

前提: 基本的计算机知识,对HTML和CSS初步了解,知道JavaScript是什么。
目标: 拥有一点编写JavaScript的经验,至少会获得关于编写JavaScript时应当涉及到些什么的基本认识。

您不会被要求立即理解所有代码的细节——现在我们只是想把高级概念介绍给您,以及给您一个JavaScript(以及其他编程语言)是如何工作的。在随后的文章中,你将会再次看到这些功能的更多细节。

Note: 你在JavaScript中看到的许多代码特性和其他编程语言类似— 函数、循环,等等。 代码语法看起来不同,但是在概念上是基本类似的。

像程序员一样思考

 学习编程中最困难的事情之一不是你需要学习的语法,而是如何使用它来解决现实世界中的问题。 你需要开始像程序员一样思考 — 这通常涉及到你的程序需要做什么的描述,以及完成这些功能需要写哪些代码, 并且如何使它们协同工作。

这需要努力工作、代码经验以及练习的结合 — 还有一些创造力。写得越多,得到的就越多。我们不会保证让你5分钟内开发出“程序员大脑”, 但是会在这些课程中给你足够的练习。

考虑到这一点, 让我们一起看看本篇文章中我们要做的示例,并且一步步分析该如何完成。

示例 — 猜数字游戏

在本文中,我们将向你展示如何构建出简单的游戏,可以看如下代码:

先去玩一玩 — 再继续前进之前熟悉一下。

让我们想象一下,你的老板给你简要的描述了这个游戏

我想让你创建一个可以猜数字的游戏,它会在1~100以内随机选择一个数, 然后让玩家挑战在10轮以内猜出这个数字,每一轮都要告诉玩家正确或者错误, 如果出错了,则告诉他数字是低了还是高了,并且还要告诉玩家之前猜的数字是什么。 一旦玩家猜测正确,或者他们用完了回合,游戏将结束。 游戏结束后,可以让玩家选择再次开始。

参考上面的简介,我们可以做的第一件事就是尽可能简单的可操作的步骤, 尽可能多的采用程序员思维:

  1. 定义一个1~100内的随机数;
  2. 记录玩家进行到第几轮了,从1开始;
  3. 给玩家提供一个猜数字的方法;
  4. 一旦用户提交了数据,就会被记录在某个地方,可以让用户再次看到之前的猜测;
  5. 下一步,判断一下猜得对不对;
  6. 如果是正确的:
    1. Display congratulations message.
    2. Stop the player from being able to enter more guesses (this would mess the game up).
    3. Display control allowing the player to restart the game.
  7. If it is wrong and the player has turns left:
    1. Tell the player they are wrong.
    2. Allow them to enter another guess.
    3. Increment the turn number by 1.
  8. If it is wrong and the player has no turns left:
    1. Tell the player it is game over.
    2. Stop the player from being able to enter more guesses (this would mess the game up).
    3. Display control allowing the player to restart the game.
  9. Once the game restarts, make sure the game logic and UI are completely reset, then go back to step 1.

Let's now move forward, looking at how we can turn these steps into code, building up the example, and exploring JavaScript features as we go.

初始设置

To begin this tutorial, we'd like you to make a local copy of the number-guessing-game-start.html file (see it live here). Open it in both your text editor and your web browser. At the moment you'll see a simple heading, paragraph of instructions and form for entering a guess, but the form won't currently do anything.

The place where we'll be adding all our code is inside the <script> element at the bottom of the HTML:

<script>

  // Your JavaScript goes here

</script>

添加变量以保存数据

Let's get started. First of all, add the following lines inside your <script> element:

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;

This section of the code sets up the variables we need to store the data our program will use. Variables are basically containers for values (such as numbers, or strings of text). You create a variable with the keyword var followed by a name for your variable. You can then assign a value to your variable with an equals sign (=) followed by the value you want to give it.

In our example:

  • The first variable — randomNumber — is assigned a random number between 1 and 100, calculated using a mathematical algorithm.
  • The next three variables are each made to store a reference to the results paragraphs in our HTML, and are used to insert values into the paragraphs later on in the code:
    <p class="guesses"></p>
    <p class="lastResult"></p>
    <p class="lowOrHi"></p>
  • The next two variables store references to the form text input and submit button and are used to control submitting the guess later on.:
    <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
    <input type="submit" value="Submit guess" class="guessSubmit">
  • Our final two variables store a guess count of 1 (used to keep track of how many guesses the player has had), and a reference to a reset button that doesn't exist yet (but will later).

Note: You'll learn a lot more about variables later on in the course, starting with the next article.

函数

Next, add the following below your previous JavaScript:

function checkGuess() {
  alert('I am a placeholder');
}

Functions are reusable blocks of code that you can write once and run again and again, saving the need to keep repeating code all the time. This is really useful. There are a number of ways to define functions, but for now we'll concentrate on one simple type. Here we have defined a function by using the keyword function, followed by a name, with parentheses put after it. After that we put two curly braces ({ }). Inside the curly braces goes all the code that we want to run whenever we call the function.

The code is run by typing the name of the function followed by the parentheses.

Try saving your code now and refreshing it in the browser.

Go into the developer tools JavaScript console, and enter the following line:

checkGuess();

You should see an alert come up that says "I am a placeholder"; we have defined a function in our code that creates an alert whenever we call it.

Note: You'll learn a lot more about functions later in the course.

操作符

JavaScript operators allow us to perform tests, do maths, join strings together, and other such things.

Let's save our code and refresh the page shown in our browser. Open the developer tools JavaScript console if you haven't got it open already so you can try typing in the examples shown below — type in each one from the "Example" columns exactly as shown, pressing Return/enter after each one, and see what results they return. If you don't have easy access to the browser developer tools, you can always use the simple built in console seen below:

First let's look at arithmetic operators, for example:

操作符 名称 例子
+ 加法 6 + 9
- 减法 20 - 15
* 乘法 3 * 7
/ 除法 10 / 5

You can also use the + operator to join text strings together (called concatention in programming). Try entering the following lines:

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

There are also some shortcut operators available, called augmented assignment operators. For example, if you want to simply add a new text string to an existing one and return the result, you could do this:

name += ' says hello!';

This is equivalent to

name = name + ' says hello!';

When we are running true/false tests (for example inside conditionals — see below), we use comparison operators, for example:

操作符 名称 例子
=== 严格等于 (刚好是一样的吗?) 5 === 2 + 4
!== 不等于 (不是一样的吗?) 'Chris' !== 'Ch' + 'ris'
< 小于 10 < 6
> 大于 10 > 20

条件

Returning to our checkGuess() function, I think it's safe to say that we don't want it to just spit out a placeholder message. We want it to check whether a player's guess is correct or not, and respond appropriately.

At this point, replace your current checkGuess() function with this version instead:

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

This is a lot of code — phew! Let's go through each section and explain what it does.

  • The first line (line 2 above) declares a variable called userGuess and sets its value to the current value entered inside the text field. We also run this value through the built-in Number() method, just to make sure the value is definitely a number.
  • Next, we encounter our first conditional code block (lines 3–5 above). A conditional code block allows you to run code selectively, depending on whether a certain condition is true or not. It looks a bit like a function, but it isn't. The simplest form of conditional block starts with the keyword if, then some parentheses, then some curly braces. Inside the parentheses we include a test. If the test returns true, we run the code inside the curly braces. If not, we don't, and move on to the next bit of code. In this case the test is testing whether the guessCount variable is equal to 1, i.e. whether this is the player's first go or not:
    guessCount === 1
    If it is, we make the guesses paragraph's text content equal to "Previous guesses: ". If not, we don't.
  • Line 6 appends the current userGuess value onto the end of the guesses paragraph, plus a blank space so there will be a space between each guess shown.
  • The next block (lines 8–24 above) does a few checks:
    • The first if(){ } checks whether the user's guess is equal to the randomNumber set at the top of our JavaScript. If it is, the player has guessed correctly and the game is won, so we show the player a congratulations message with a nice green color, clear the contents of the Low/High guess information box, and run a function called setGameOver(), which we'll discuss later.
    • Now we've chained another test onto the end of the last one using an else if(){ } structure. This one checks whether this turn is the user's last turn. If it is, the program does the same thing as in the previous block, except with a game over message instead of a congratulations message.
    • 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.

事件

At this point we have a nicely implemented checkGuess() function, but it won't do anything because we haven't called it yet. Ideally we want to call it when the "Submit guess" button is pressed, and to do this we need to use an event. Events are actions happening in the browser like a button being clicked, or a page loading, or a video playing, which we can run blocks of code in response to. The constructs that listen out for the event happening are called event listeners, and the blocks of code run in response to the event firing are called event handlers.

Add the following line below the closing curly brace of your checkGuess() function:

guessSubmit.addEventListener('click', checkGuess);

Here we are adding an event listener to the guessSubmit button. This is a method that takes two input values (called arguments) — the type of event we are listening out for (in this case click) as a string, and the code we want to run when the event occurs (in this case the checkGuess() function — note that we don't need to specify the parentheses when writing it inside addEventListener()).

Try saving and refreshing your code now, and your example should now work, to a point. The only problem now is that if you guess the correct answer or run out of guesses, the game will break because we've not yet defined the setGameOver() function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.

完成游戏的功能

Let's add that setGameOver() function to the bottom of our code and then walk through it. Add this now, below the rest of your 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);
}
  • The first two lines disable the form text input and button by setting their disabled properties to true. This is necessary, because if we didn't, the user could submit more guesses after the game is over, which would mess things up.
  • The next three lines generate a new <button> element, set its text label to "Start new game", and add it to the bottom of our existing HTML.
  • The final line sets an event listener on our new button so that when it is clicked, a function called resetGame() is run.

Now we need to define this function too! Add the following code, again to the bottom of your 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;
}

This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:

  • Puts the guessCount back down to 1.
  • Clears all the information paragraphs.
  • Removes the reset button from our code.
  • Enables the form elements, and empties and focuses the text field, ready for a new guess to be entered.
  • Removes the background color from the lastResult paragraph.
  • Generates a new random number so that you are not just guessing the same number again!

At this point you should have a fully working (simple) game — congratulations!

All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized this.

循环

One part of the above code that we need to take a more detailed look at is the for loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.

To start with, go to your browser developer tools JavaScript console again, and enter the following:

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

What happened? The numbers 1 to 20 were printed out in your console. This is because of the loop. A for loop takes three input values (arguments):

  1. A starting value: In this case we are starting a count at 1, but this could be any number you like. You can replace i with any name you like too, but i is used as a convention because it's short and easy to remember.
  2. An exit condition: Here we have specified i < 21 — the loop will keep going until i is no longer less than 21. When i reaches 21, the loop with no longer run
  3. An incrementor: We have specified i++, which means "add 1 to i". The loop will run once for every value of i, until i reaches a value of 21 (as discussed above.) In this case, we are simply printing the value of i out to the console on every iteration using console.log().

Now let's look at the loop in our number guessing game — the following can be found inside the resetGame() function:

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

This code creates a variable containing a list of all the paragraphs inside <div class="resultParas"> using the querySelectorAll() method, then it loops through each one, removing the text content of each.

函数的一些事

Let's add one more final improvement before we get to this discussion. Add the following line just below the var resetButton; line near the top of your JavaScript, then save your file:

guessField.focus();

This line uses the focus() method to automatically put the text cursor into the <input> text field as soon as the page loads, meaning that the user can start typing their first guess right away, and doesn't have to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.

Let's analyze what's going on here in a bit more detail. In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.

In this particular case, we first created a guessField variable that stores a reference to the text input form field in our HTML — the following line can be found amongst our variable declarations near the top:

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

To get this reference, we used the querySelector() method of the document object. querySelector() takes one piece of information — a CSS selector that selects the element you want a reference to.

Because guessField now contains a reference to an <input> element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is focus(), so we can now use this line to focus the text input:

guessField.focus();

Variables that don't contain references to form elements won't have focus() available to them. For example, the guesses variable contains a reference to a <p> element, and guessCount contains a number.

和浏览器对象一起玩耍

Let's play with some browser objects a bit.

  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';
    Every element on a page has a style property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.

完成了...

So that's it for building the example — you got to the end, well done! Try your final code out, or play with our finished version here. If you can't get the example to work, check it against the source code.

文档标签和贡献者

 此页面的贡献者: Ende93, ziyunfei, Roy1993sun, ZhongyiChen
 最后编辑者: Ende93,