《JavaScript和jQuery实战手册(原书第2版)》——2.9节教程:编写使用数组的页面

简介: 本节书摘来自华章社区《JavaScript和jQuery实战手册(原书第2版)》一书中的第2章,第2.9节教程:编写使用数组的页面,作者:David Sawyer McFarland,更多章节内容可以访问云栖社区“华章社区”公众号查看

2.9 教程:编写使用数组的页面
本书的很多脚本中用到了数组,但是,要快速体验一下创建和使用数组,请阅读这个简短的教程。
注意: 参见本书1.3节的“注意”部分中关于如何下载教程文件的说明。

  1. 在文本编辑器中打开chapter02目录下的arrays.html文件。
    我们从直接创建包含4个字符串的一个数组开始。和前面的教程一样,这个文件还在头部和正文区域包含了< script>标签。
  2. 在第一组< script>标签中输入如下粗体所示代码:
<script>
    var authors = [ 'Ernest Hemingway',
            'Charlotte Bronte',
            'Dante Alighieri',
            'Emily Dickinson'
        ];
    </script>

这段代码包含一条JavaScript语句,但是,它分为5行。要创建这条语句,输入第一行var authors = [ 'Ernest Hemingway',按下回车键,然后按下空格键直到对齐到'的下方(大约16个空格),然后输入'Charlotte Bronte',。
注意: 大多数HTML编辑器针对HTML和JavaScript代码使用Courier或Courier New这样的等宽字体。在等宽字体中,每个字符和其他字符都具有同样的宽度,因此,很容易对齐各列(就像本例中的所有作者名)。如果你的文本编辑器没有使用Courier或类似字体,可能无法把名字很好地排列对齐。
2.8.1节介绍过,当你创建拥有很多元素的数组时,如果将它分为数行,可以使代码更容易阅读。直到第5行末尾才有一个分号,由此可以看出这是一条语句。
这行代码创建了一个名为authors的数组,并且把4个作者的名字(4个字符串值)存储到数组中。接下来将访问该数组的一个元素。

  1. 找到第二对< script>标签,然后添加粗体所示代码:
<script>
    document.write('<p>The first author is <strong>');
    document.write(authors[0] + '</strong></p>');
    </script>

第一行开始了一个新的段落,其中有一些文本以及一个开始标签,这只是普通的HTML。下一行显示了存储在authors数组的第一项中的值,并且显示了结束标签

,以创建一个完整的HTML段落。要访问数组中的第一项,可以使用0而不是1作为索引:authors[0]。
此时,保存文件并在Web浏览器中预览是个好主意。你应该看到屏幕上显示了“The first author is Ernest Hemingway”。如果没有看到,那么在步骤2或步骤3创建数组的时候可能有输入错误。
注意: 别忘了使用1.6节所介绍的浏览器错误控制台来帮助找到任何JavaScript错误的源头。
  1. 回到文本编辑器,然后把如下粗体所示的两行代码加入脚本中:
    document.write('<p>The last author is <strong>');
    document.write(authors[4] + '</strong></p>');

除了显示不同的数组项目,这个步骤确实和前面的相同。保存页面并在浏览器中预览。将会看到“undefined”而不是一个作者的名字(如图2-6所示)。不要担心,这是故意的。别忘了,数组的索引值是从0开始的,因此,最后一项实际上是数组中项目的总数减去1。在这个例子中,authors数组中存储了4个字符串,因此,最后一项实际上应该使用authors[3]来访问。
注意: 如果试图使用不存在的一个索引值来读取一项,将会得到JavaScript的“undefined”值。这意味着,该索引位置没有存储值。
有一种简单的方法可以获取数组中的最后一项,而不管数组中存储了多少项。

  1. 回到文本编辑器并编辑刚刚输入的代码。删除4,并在其位置添加粗体所示的代码:
    document.write('<p>The last author is <strong>');
    document.write(authors[authors.length-1] + '</strong></p>');

还记得吧,2.8.3节介绍过,数组的length属性存储了数组中项目的数目。因此,authors数组中项目的总数可以通过authors.length这段代码获取。此时,在这段脚本中,结果是4。
知道了数组中最后一项的索引值总是数组中项目的总数减去1,就可以通过从总数中减去1来获得最后一项的索引值:authors.length-1。在访问一个数组的最后一项的时候,可以把这个简短的表达式作为索引值提供,即authors[authors.length-1]。
最后,在数组的开始再添加一个项目。

  1. 在步骤5中添加的代码之后添加另外一行代码:
    authors.unshift('Stan Lee');

2.8.3节介绍过,unshift()方法在数组的开始处添加一个或多个项目。在执行这段代码后,author数组现在将是 ['Stan Lee', 'Ernest Hemingway',‘Charlotte Bronte’,‘Dante Alighieri’,‘Emily Dickinson’]。
最后,我们在页面显示新添加的项。

  1. 再添加3行代码(如下粗体所示),以便最终的代码如下所示:
    document.write('<p>The first author is <strong>');
    document.write(authors[0] + '</strong></p>');
    document.write('<p>The last author is <strong>');
    document.write(authors[authors.length-1] + '</strong></p>');
    authors.unshift('Stan Lee');
    document.write('<p>I almost forgot <strong>');
    document.write(authors[0]);
    document.write('</strong></p>');

保存文件并在Web浏览器中预览。将会看到如图2-7所示的内容。如果没有看到这些内容,别忘了Web浏览器的错误控制台可以帮助你找到错误(参见1.6节)。

相关文章
|
2月前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
98 2
|
5月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
227 19
|
12月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
262 1
|
8月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
7038 23
|
9月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
353 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
10月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
458 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
9月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
260 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
10月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
270 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
8月前
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
12月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
448 2
2024年5月node.js安装(winmac系统)保姆级教程