98年世界杯主题曲_世界杯决赛前瞻 - jisdx.com

JavaScript 初体验 上一页 概述：创建 JavaScript 代码块 下一页

现在，你已经学到了一些 JavaScript 的理论知识，以及用 JavaScript 能够做些什么。下面我们会提供一个创建简单的 Javascript 程序的实践的教程——循序渐进地构建一个简易版“猜数字”游戏。

前提：

计算机基础知识，初步理解 HTML 和 CSS，了解 JavaScript。

目标：

获得编写 JavaScript 的初步经验，初步了解编写 JavaScript 时会涉及哪些内容。

我们并不要求你立刻完整理解所有代码：你不需要借此学会 JavaScript，甚至不需要理解我们要求你编写的全部代码。当前只是概括地介绍一些抽象的概念，让你了解 JavaScript 的特性是如何协同工作的，以及获得编写 JavaScript 的一些感受。所有具体特性将在后续文章中详细介绍，如果你没有很快地全部理解它们，请不要担心！

备注：

可以看到，JavaScript 中许多代码特性和其他编程语言是一致的（函数、循环，等等）。尽管代码语法不尽相同，但概念基本类似。

像程序员一样思考学习编程，语法本身并不难，真正困难的是如何应用它来解决现实世界的问题。你要开始像程序员那样思考。一般来讲，这种思考包括了解你程序运行的目的，为达到该目的应选定的代码类型，以及如何使这些代码协同运行。

为达成这一点，我们需要努力编程，获取语法经验，注重实践，再加一点创造力，几项缺一不可。代码写的越多，就会完成得越优秀。虽然我们不能保证你在 5 分钟内拥有“程序员大脑”，但是整个课程中你将得到大量机会来训练程序员思维。

请牢记这一点，然后开始观察本文的示例，体会一下将其分解为可操作任务的大体过程。

示例——猜数字游戏本文将向你演示如何构建下面的小游戏：

先玩上几盘，在继续之前先熟悉一下这个游戏。

假设你的老板给你布置了以下游戏设计任务要求：

我想让你开发一个猜数字游戏。游戏应随机选择一个 1 到 100 之间的自然数，然后邀请玩家在 10 轮以内猜出这个数字。每轮后都应告知玩家的答案正确与否，如果出错了，则告诉他数字是低了还是高了。并且应显示出玩家前一轮所猜的数字。一旦玩家猜对，或者用尽所有机会，游戏将结束。游戏结束后，可以让玩家选择重新开始。

看到这个要求，首先我们要做的是将其分解成简单的可操作的任务，尽可能从程序员的思维去思考：

随机生成一个 1 到 100 之间的自然数。

记录玩家当前的轮数。从 1 开始。

为玩家提供一种猜测数字的方法。

一旦有结果提交，先将其记录下来，以便用户可以看到他们先前的猜测。

然后检查它是否正确。

如果正确：

显示祝贺消息。

阻止玩家继续猜测（这会使游戏混乱）。

显示控件允许玩家重新开始游戏。

如果出错，并且玩家有剩余轮次：

告诉玩家他们错了。

允许他们输入另一个猜测。

轮数加 1。

如果出错，并且玩家没有剩余轮次：

告诉玩家游戏结束。

阻止玩家继续猜测（这会使游戏混乱）。

显示控件允许玩家重新开始游戏。

一旦游戏重启，确保游戏的逻辑和 UI 完全重置，然后返回步骤 1。

让我们继续，看看我们如何将这些步骤转换为代码，构建这个示例，从而探索 JavaScript 的特性。

初始设置本教程开始前，请将 number-guessing-game-start.html 文件（查看在线演示）保存下来。同时在文本编辑器和 Web 浏览器中将其打开，可以看到一个简单的标题、一段游戏说明和一个用于输入猜测的表单，此时表单不会执行任何操作。

我们将在 HTML 底部的

添加变量以保存数据让我们开始吧。首先，在