学习Web开发
学习Web开发
阅读(1.7k) 书签 赞(0) 我要纠错

进入JavaScript的第一课

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

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

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

像程序员一样思考

在编程中学习的最困难的事情之一不是你需要学习的语法，而是如何应用它来解决现实世界的问题。 你需要像一个程序员一样开始思考 - 这通常涉及到对程序需要做什么的描述，以及如何实现这些东西需要什么代码特性，以及如何使它们一起工作。

这需要努力工作，编程语法的经验和实践的混合，以及一点创造力。 你编写的代码越多，你就越好。 我们不能保证你将在5分钟内开发"程序员大脑"，但我们将给你很多机会像整个课程中的程序员一样练习思维。

考虑到这一点，让我们看看我们将在本文中构建的示例，并查看将其分解为有形任务的一般过程。

示例 - 猜数字游戏

在本文中，我们将向您展示如何构建简单的游戏，您可以在下面看到:

有一个去玩它 - 熟悉游戏之前，你继续前进。

让我们想象你的老板给你以下简要介绍创造这个游戏:

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

看看这个简介，我们可以做的第一件事是开始把它分解成简单的可操作的任务，尽可能多的程序员的心态:

  1. 生成1到100之间的随机数。
  2. 记录球员所在的转弯数。在1开始。
  3.  为玩家提供一种猜测数字的方法。
  4.  一旦提交了猜测，首先将它记录在某处，以便用户可以看到他们先前的猜测。
  5. 接下来，检查它是否是正确的数字。
  6. 如果是正确的:
    1.  显示祝贺消息。
    2. 阻止玩家输入更多的猜测(这会使游戏混乱)。
    3. 显示控制允许玩家重新开始游戏。
  7. 如果它错了，并且玩家已经左转:
    1. 告诉玩家他们错了。
    2. 允许他们输入另一个猜测。
    3. 将圈数增加1。
  8. 如果它是错误的，并且玩家没有左转:
    1. 告诉玩家它是游戏结束。
    2. 阻止玩家输入更多的猜测(这会使游戏混乱)。
    3. 显示控制允许玩家重新开始游戏。
  9.    一旦游戏重新启动，请确保游戏逻辑和用户界面完全重置，然后返回步骤1。

让我们继续前进，看看我们如何将这些步骤转换为代码，构建示例，以及探索JavaScript功能。

初始设置

要开始本教程，我们希望您制作本地副本 number-guessing-game-start.html  文件  (see it live here). 在文本编辑器和Web浏览器中打开它。 此时，您将看到一个简单的标题，用于输入猜测的说明和形式段，但表单目前不会执行任何操作。

我们将添加所有代码的地方放在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以及变量的名称创建一个变量。 然后，您可以使用等号(=)和您要赋予的值为变量赋值。

在我们的示例中:

  • 第一个变量 - 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');
}
函数是可重复使用的代码块，您可以一次编写一次，并一次又一次运行，从而节省了始终保持重复代码的需要。 这真的很有用。 有许多方法来定义函数，但现在我们将集中在一个简单的类型。 这里我们使用关键字function定义了一个函数，后面跟着一个名字，后面加了括号。 之后，我们放两个大括号({})。 在大括号里面，所有我们想要运行的代码，当我们调用该函数。

该代码通过键入函数的名称后跟括号运行。

请尝试立即保存您的代码，然后在浏览器中刷新。
 

进入  developer tools JavaScript console, 并输入以下代码:

checkGuess();

你应该看到一个警报，说"我是一个占位符"; 我们在我们的代码中定义了一个函数，在我们调用它时创建一个警报。

Note: 在课程后面你会学到更多关于函数的知识。

操作员

JavaScript运算符允许我们执行测试，做数学，连接字符串在一起，和其他这样的事情。

让我们保存我们的代码并刷新浏览器中显示的页面。 打开 developer tools JavaScript console 如果你还没有打开已经打开，所以你可以尝试键入下面所示的示例 - 从"示例"列中输入完全如图所示，在每一个之后按Return / Enter，并查看他们返回的结果。 如果您无法轻松访问浏览器开发人员工具，则可以随时使用下面所示的简单内置控制台:

首先让我们来看看算术运算符，例如:

操作员 名称 例子
+ 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()函数，但它不会做任何事情，因为我们还没有调用它。 理想情况下，我们希望在按下"提交猜测"按钮时调用它，为此，我们需要使用事件。 事件是浏览器中发生的操作，例如点击按钮，加载页面或播放视频，我们可以运行代码块来响应。 侦听事件发生的构造称为事件侦听器，并且响应于事件触发而运行的代码块被称为事件处理器。

在checkGuess()函数的结束大括号下面添加以下代码:

guessSubmit.addEventListener('click', checkGuess);

这里我们为guessSubmit按钮添加了一个监听事件。这个方法 包含两个可输入值(参数)，监听事件的类型(在本例中为"点击")，和当事件发生时我们想要执行的代码(在本例中为checkGuess()函数)——注意，当函数作为事件监听方法的参数时，函数名后不应带括号。

尝试保存和刷新您的代码现在，您的示例应该现在工作，一点。 现在唯一的问题是，如果你猜到正确的答案或运行猜测，游戏将打破，因为我们还没有定义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。 这是必要的，因为如果我们没有，用户可以提交更多的猜测，在游戏结束后，这会搞砸了。
  • 接下来的三行创建了一个新的button元素，设置它的文本信息为"开始新游戏"，并把它添加到我们文档的底部。
  • 最后一行在我们的新按钮上设置一个事件监听器，当它被点击时，一个名为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段中删除背景颜色。
  • 生成一个新的随机数，这样你不只是猜到相同的数字！

在这一点上，你应该有一个完全工作(简单)的游戏 。

我们现在在本文中仍然要做的是谈论一些其他重要的代码功能，你已经看到，虽然你可能没有意识到这一点。

循环

上面代码的一部分，我们需要更详细地看一下 for 循环。 循环在编程中是一个非常重要的概念，它允许你一直重复运行一段代码，直到满足某个条件。

首先，请再次转到 浏览器开发工具 JavaScript 控制台然后输入以下内容:

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

发生了什么？ 数字1到20在控制台中打印出来。 这是因为循环。 for循环需要三个输入值(参数):

  1. 起始值:在这种情况下，我们开始计数为1，但这可以是任何你喜欢的数字。 你可以用任何你喜欢的名字替换我，但我用作一个约定，因为它很短，很容易记住。
  2. 退出条件:这里我们指定i小于21 - 循环将继续，直到i不再小于21.当i达到21时，循环不再运行 。
  3. 增量:我们定义了i++,意思是向i加1。i值的每次变动都会引发循环的执行，直到i值等于21(就像上边讨论的那样)。在本例中，我们通过console.log()方法简单地在控制台打印出每次迭代时变量i的值。

现在让我们看看我们的猜测游戏循环 - 以下可以在resetGame()函数中找到:

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

此代码在＜div class="resultparas">内使用queryselectorall()方法创建一个变量包含一个列表中的所有段落，然后依次通过每个段落，删除每个段落的文本内容。

函数的一些事

让我们再来一次最后的改进，然后再讨论。 在var resetButton下面添加以下行: 行靠近JavaScript的顶部，然后保存您的文件:

guessField.focus();

这一行使用focus() 方法立即自动地放置文本光标在输入框内，当页面加载完成时，意味着用户可以马上开始他们的第一次游戏，而不需要去点击输入框。 这只是一个小的附加，但它提高了可用性 —— 给用户提供了可视化的线索去告诉他们该怎么开始这个游戏。

让我们分析一下在这里有更多的细节。在JavaScript中，一切都是一个对象。对象是存储在单个分组中的相关功能的集合。你可以创建自己的对象，但这是相当先进的，我们不会覆盖它，直到很晚以后的课程。现在，我们将简要讨论您的浏览器包含的内置对象，它允许您做许多有用的事情。

在这种特殊情况下，我们首先创建了一个guessField变量，用于存储对HTML中的文本输入表单字段的引用 - 在顶部附近的变量声明中可以找到以下行:

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

我们使用了document对象的querySelector()方法来获得此引用。querySelector() 需要一条信息 — — 用该元素的 CSS 选择器选择你想要的引用的元素。

因为 guessField 现在包含对 <input>的元素的引用，它现在将访问数量的属性 (存储于内部对象的其中一些不会更改其值的基础变量) 和方法 (存储在对象内部的基础函数)。一种方法可用来输入元素是 focus ()，所以我们现在可以使用这条线集中文本输入︰

guessField.focus();

不包含对表单元素引用的变量不会有 focus () 方法可供它们执行。例如，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在元素上动态设置新的CSS样式。

完成了...

所以这是为了建立这个例子— 你得到了结束，做得好！ 尝试你的最终代码，或者看看我们的版本.如果你不能让示例工作，请检查它 source code.

以上内容是否对您有帮助：
← 什么是JavaScript？
什么地方出了错？ →
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号