掌握聚合最新动态了解行业最新趋势

API接口，开发服务，免费咨询服务

行业资讯 / 前端新手超实用教程：如何使用JavaScript和HTML创建随机名言生成器

前端新手超实用教程：如何使用JavaScript和HTML创建随机名言生成器

来源： SDK.cn 类型：技术文章发布：2016-10-21 00:00:00

这篇文章是针对初学者所写的，其目的是帮你学会使用JavaScript制作简单的web应用。它将帮你理解JavaScript和HTML之间的关系与合作方式。

如果你对HTML和JavaScript完全没有任何经验，也不用担心。我将会讲解每一行代码，并且做到尽可能的详细。在读完这篇文章之后，你将会对JavaScript于HTML的关系有一个更深的了解。

我们将会做一个随机名言生成器，每一次点击的时候，它都会在屏幕上随机显示出一个名人名句。要想完成这个项目，你需要下面这三样东西，其实每一个web项目都会使用到它们：

浏览器
文本编辑器
开发web应用的热情

在这篇文章中，我将会使用谷歌的Chrome浏览器、Sublime Text 3编辑器，当然，还有我对编程和传授编程技巧的热情。关于浏览器和编辑器，你喜欢哪个就用哪个，不必和我使用一样的工具。

我们现在就开始吧。

第一步，就是创建一个文件夹，我们将会把所有文件都放在这个文件夹内。在桌面上创建一个新文件夹，将其命名为“名言生成器”。打开Sublime Text，将文件夹拖进去。现在你应该可以在侧边栏看到这个文件夹了。

在桌面上创建空白文件夹

将文件夹拖到Sublime Text中，你可以在侧边栏看到这个文件夹

大多数web项目，都由至少一个HTML、JavaScript和CSS文件组成。我们现在在这个文件夹内创建这些文件。

在Sublime Text中，右键点击“名言生成器”文件夹，然后单击创建新文件。之后底部会弹出一个输入栏，你需要在这里对文件进行命名。输入“index.html”然后回车。这样你就创建好了index.html文件。继续重复这一步两次，创建 javascript.js和style.css文件。需要注意的是，在给文件命名的时候，一定要全部使用小写字母。

文件看上去应该是这样的

在创建完文件之后，我先来写HTML，它将会是整个项目的基石。先来准备HTML文档的基本框架。下图就是还没有写内容的HTML文档。你可以把它想象成HTML文档的骨架，之后我们将会一点点的丰富它。

现在我们来将JavaScript和HTML文档进行连接，这样JavaScript代码就能够配合HTML一起工作了。我们还需要在<title>标签内添加文本，例如<h1>元素、带有“quoteDisplay”这个id的<div>元素，还有一个<button>元素，其onclick属性应该为 “newQuote()”。

详细讲解

如果上图中的HTML让你有点迷惑，不知道每一行代码起到的都是什么作用，那我就在这里给你详细讲解。如果你已经学过基本的HTML，那么这一部分你可以直接跳过。

首先，我们在 <title>标签内添加了“Quote Gen”。这个标签会读取内部的文本，然后将其显示在浏览器的标签上，请看下图：

在这一步中，我们还让HTML文档连接了javascript.js这个文件，方法就是在<body>标签结束之前添加了一个<script>标签：

其次，我们还创建了一个<h1>标签，里面写的内容为“Simple Quote Generator”。这个文本将会显示在页面上：

之后，我们还创建了一个<div>元素，并且给其指定了一个名为“quoteDisplay”的id。<div>元素的作用是区分HTML文档的各个部分，它可以帮助我们组织页面上内容的结构。

id属性的作用，是扮演识别符的角色，让JavaScript能够轻松找到它，并且对其进行操作。在这个例子中，我们要使用JavaScript获取带有“quoteDisplay”这个id的元素，然后将名言放在<div>元素中。

再次之后，我们还需要创建一个<button>元素，并且给其制定一个名为“newQuote()”的onclick属性。<button>元素，顾名思义，就是创建一个按钮，让用户去点击。onclick属性，就是用来设定按钮的函数的，也就是按钮的功能：你点击这个按钮之后，会出现什么效果。

在这个例子中，你每一次点击这个按钮，它就会运行newQuote()函数。不过我们还现在还没有定义newQuote()函数。如果你现在在浏览器中点击这个按钮，它会发挥一个错误提示，因为这个函数还不存在。<button>元素所创建的按钮效果如下图：

最后我们来看一下整体效果，左边是代码，右边是浏览器中的额样子：

写代码之前的构思

终于要开始写JavaScript代码了，在写好JavaScript代码之后，我的这个名言生成器就能正常工作了。

但是在开始写代码之前，我们要先仔细构思一下。没有良好的计划，你是无法写出优秀的代码的。

首先，我们要确定自己想要什么，以及何时需要它。对于这个项目来说，我们需要的就是名言。何时需要它？就是用户每一次点击按钮之后。

现在我们已经解决了第一个问题。还有一个问题：名言是什么？我当然知道它是名人说过的话，我的意思是，站在技术角度上看，它是什么东西？

名言其实就是字符串！

名言就是由字母组成的，一个个字母组成了单词。在编程世界，单词被分类为字符串。也就是说，我们所显示的那些名言，其实就是字符串！

因为我们需要多条名言，每一条都是随机显示的，因此我们最好将这些字符串储存在一个数组中。

数组中的元素，都拥有一个索引号码，在调用元素的时候，我们所依据的就是这个索引号。数组中，第一个元素的索引号为0，后面的依次加1。

因此，要想调用这些名言，我们实际就是在调用索引号。换句话说，每当用户点击按钮的时候，我们就需要让其生成一个随机数字。之后，这个数字就会找到对应的索引号，调用这个索引号后面的名言，然后名言会被放在HTML文档中，显示在浏览器中。

就是这几部，我们就想好了这个随机名言生成器的框架：

名言，就是需要被储存在数组中的多个字符串。

每一次按钮被点击之后，会随机生成一个整数。

这个数字会与索引号相匹配。

在通过索引号取回随机挑选的名言之后，我们需要将其放在HTML文档中。

要开始写代码了！

着急了吧？看了这么半天，一行代码都还没写呢！

不过这就是编程世界。无论你是想把编程作为职业，还是只是作为爱好，在写代码之前，你都需要进行大量的思考。编程不是机械的敲键盘，更多的时候是要不断的思考。

在经过了周密的思考之后，我们可以开始写代码了。从现在开始，我们就要开始在javascript.js文件中进行操作。

首先，在网上收集一些名言警句。

我在网上找到了10条名言，然后将它们复制到一起，中间用逗号隔开。你要确保这些名言用单引号或是双引号括起来，如果你的名言中包含简写撇号、单引号或是双引号，你需要使用反斜杠来escape这些符号，这样JavaScript就知道这些符号是数字的一部分，而不是代码的语法符号。

如下图所示，我定义了一个名为“quotes”的变量，让它等于我在网上找到的那些名言。

现在，我们需要创建之前所提到的newQuote()函数。我们的这个newQuote()，需要生成一个0-9的整数。

首先，我们需要调用Math.floor()函数。这个函数的作用为向下取整。例如，如果我调用Math.floor(5.7)，它会舍去小数点之后的数字，返回一个为5的值。

第二步，我们要把Math.random()作为一个参数pass给Math.floor()。Math.floor()的作用是在0和1之间随机生成一个小数。

假如：

如果我们现在就开始取数，它只能返回0。这是由于Math.random()只能生成0到1之间的小数，例如0.4、0.721、0.98等。而由于我们将Math.random()作为参数，pass给了Math.floor()，而Math.floor()的作用是永远向下取整，因此当他们配合在一起的时候，就只能返回0。