这篇文章主要是面向 JavaScript 初学者的,帮助大家理解如何使用 JavaScript 和 HTML 来创建简单的 Web 应用。

如果你对 JavaScript 和 HTML 完全没有任何经验,也不用担心,我会尽可能详细地讲解每一行代码。在读完这篇文章之后,你将会对 JavaScript 与 HTML 有更深的理解。

我们会创建一个随机名言生成器,每一次点击的时候,它都会在屏幕上随机显示一句名言。这个项目需要以下三点准备,当然啦,其实每一个 Web 项目都需要这三点:

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

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

我们开始吧

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

image-14
在桌面上创建空白文件夹
image-17
将文件夹拖到 Sublime Text 中,你可以在侧边栏看到这个文件夹

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

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

image-18
文件看上去应该是这样的

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

image-19

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

image-20

详细讲解

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

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

image-21

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

image-22

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

image-23

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

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

image-24

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

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

image-25

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

image-26

思考逻辑

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

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

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

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

名言其实就是字符串!

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

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

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

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

就是这几步,我们就想好了这个随机名言生成器的框架:名言,就是需要被储存在数组中的多个字符串。

按钮每一次被点击之后,会随机生成一个整数,这个数字会与索引号相匹配。在通过索引号取到随机挑选的名言之后,我们需要将其放在 HTML 文档中。

开始写代码啦

着急了吧?看了这么半天,一行代码都还没写呢!

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

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

首先,在网上搜集一些名言警句。我在网上找到了 10 条名言,将它们复制到一起,中间用逗号隔开。用单引号或是双引号把这些名言括起来。如果你的名言中包含单引号或是双引号,你需要使用反斜杠,这样 JavaScript 就知道这些符号是名言的一部分,而不是代码的语法符号。

如下图所示,我定义了一个名为 “quotes” 的变量,把我在网上找到的那些名言赋值给它。

image-27

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

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

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

image-28

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

这么做有什么意义?要想创建数组索引号码,我们需要的是整数,而且它必须是一个随机出现的整数。因此我们需要 Math.random() 来生成一个随机数。要想避免永远返回 0 的情况,我们只需要让 Math.floor() 生成的随机数再乘以一个整数,例如 20。

请看下图:

image-29

Math.random() 先随机生成一个小数,然后这个小数再乘以 20,最后通过 Math.floor() 来向下取整。

这样一来,我们最终得到的数字,就都是 1-19 之间的整数。我可以使用这些数字来对应名言数组的索引号。但是需要注意的是,所生成的数字,必须是在索引号的范围之内,否则就会出错。

例如:

image-30


我们只有 10 句名言,它们的索引号在 0-9 之间。因此,我们需要让Math.random() 乘以名言的数量,而不是之前的 20。这样一来,我们就可以保证生成的随机数字在 0-9 之内。如下图:

image-31

为什么不直接乘以 10?如果你之后再添加名言呢?每添加一条,都要手动改变一次数字吗?

现在,我们需要找到一个方法,使用 randomNumber 生成的值来取回相对应的名言,然后将其放在 HTML 文档中,在浏览器中显示出来。

image-32

将名言放在 HTML 文档中的 quoteDisplay 元素内。

还记得我们之前用 HTML 的 id 属性来允许 JavaScript 获取并操作 HTML 元素吗?这里我们就用上它了:

image-33

使用 document.getElementById(),我们可以让 JavaScript 在 HTML 中查到之前的那个 id。我们还要将 quoteDisplay 作为具体参数,来取回带有 “quoteDisplay” 这个 id 的 HTML 元素。

现在,我们需要使用 .innerHTML 这个方法,将取回的名言作为值,添加到 HTML 中的 quoteDisplay 元素中:

image-34

我们让 innerHTML 等于带有 randomNumber 变量的名言数组,现在 newQuote() 这个函数就写好了!

你的 javascript.js 文件看上去应该类似这样:

image-35

做到这一步,随机名言生成器就做好了,恭喜!

现在你要做的,就是在浏览器中打开这个项目,看看它是否能正常工作。将 index.html 拖到浏览器中,用鼠标点击那个按钮,它应该就会随机显示名言了。

如果你乐意尝试的话,还可以添加更多名言。

具体效果:

image-36

项目源代码:

image-37

下面要做什么

你可能会觉得这个随机名言生成器不太好看,没错,看上去是有点“朴素”,所以你可以给它添加更多的功能或是样式。

在文章的开头,我还让你创建了一个 style.css 文件,还记得吗?你可以在这个文件里使用 CSS 来美化这个页面。

Happy coding!

原文链接:https://www.freecodecamp.org/news/creating-a-bare-bones-quote-generator-with-javascript-and-html-for-absolute-beginners-5264e1725f08/,作者:Sophanarith Sok,译者:鲁行云