JavaScript DOM 编程艺术(第2版) 第1——4章

2019-09-12 admin

看完前四章后,感觉这个书介绍的很基础,适合那些没接触过JavaScript的人。前两章但凡有点基础,并不是很推荐读,真正的实货从第三章开始,介绍的都是JavaScript的DOM操作。


第1章 JavaScript简史

1.1 JavaScript的起源 JavaScript是一种脚本语言,通常只能通过Web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行。

1.2 DOM DOM是一套对文档的内容进行抽象和概念化的方法。 在现实世界里,人们对所谓的“世界对象模型”都不会陌生。例如,当用“汽车”、“房子”和“树”等名词来称呼日常生活环境里的事物时,我们可以百分之百地肯定对方知道我们说的时什么,这是因为人们对这些名词所代表的东西有着同样的认识。 这个道理对网页也同样适用。JavaScript的早期版本向程序员提供了查询和操控Web文档某些实际内容(主要是图像和表单)的手段。因为JavaScript预先定义了“images”和“forms”等术语。

1.3 浏览器战争 1.3.1 DHTML DHTML是“Dynamic HTML”(动态HTML)的简称。DHTML并不是一项新技术,而是描述HTML、CSS和JavaScript技术组合的术语。DHTMl背后的含义是:

  • 利用HTML把网页标记未各种元素;
  • 利用CSS设置元素样式和它们的显式位置;
  • 利用JavaScript实时地操控页面和改变样式。

第2章 JavaScript语法

2.1 准备工作 用JAvaScript编写的代码必须通过HTML/XHTML文档才能执行,有两种方法可以做到这点:

  • 将JavaScript代码放到文档<head>标签种的<script>标签之间;
  • 把JavaScript代码存为一个扩展名为.js的独立文件。

最好的做法就是把<script>标签放到HTML文档的最后,</body>标签之前,这样能使浏览器更快地加载页面。

2.2 语法 2.2.1 语句 用JavaScript编写的脚本,与其他语言编写出来的脚本一样,都由一系列指令构成,这些指令叫做语句(statement)。只有按照正确的语法编写出来的语句才能得到正确的解释。 语句使构成任何一个脚本的基本单位。

2.2.2 注释 有时你需要在脚本中写一些仅供自己参考或提醒自己的信息,你希望JavaScript解释器能直接忽略这些信息。这类语句就是注释(comment)。

2.2.3 变量 在日常生活中,有些东西是固定不变的,有些东西则会发生变化,人们把那些会发生变化的东西称为“变量”。 把值存入变量的操作称为“赋值”。 注:JavaScript允许程序员直接对变量赋值而无需事先声明。这在许多程序设计语言中是不允许的。有很多语言要求在使用变量之前必须先对它做出“介绍”,也称为声明。 在JavaScript脚本中,如果程序员在对某个变量赋值之前未声明,赋值操作将自动声明该变量。 在JavaScript语言里,变量和其他语法元素的名字都是区分字母大小写的。 JavaScript语法不允许变量名中包含控股个或标点符号(美元符号"$"例外)。 JavaScript变量名允许包含字母、数字、美元符号和下划线(但第一个字符不允许是数字)。

2.2.4 数据类型 有些其他的语言要求在声明变量的同时还必须声明变量的数据类型,这种做法称为类型声明。必须明确类型声明的语言称为强类型语言;JavaScript不需要进行类型声明,因此它是一种弱类型语言。这意味着程序员可以在任何阶段改变变量的数据类型。 1、字符串 字符串由零个或多个字符构成。字符包括(但不限于)字母、数字、标点符号和空格。字符串必须包在引号里,单引号或双引号都可以。 2、数值 如果想要给变量赋一个数值,不用限定它必须是一个整数。JavaScript允许使用带小数点的数值,并且允许任意位小数,这样的数称为浮点数。 3、布尔值 布尔数据只有两个可选值——true或false。

2.2.5 数组 字符串、数值和布尔值都是标量。如果某个变量是标量,它在任意时刻就只能由一个值。如果想用一个变量来存储一组值,就需要使用数组。 数组是指用一个变量表示一个值的集合,集合中的每个值都是这个数组的一个元素。

2.2.6 对象 与数组类似,对象也是使用一个名字表示一组值。对象的每个值都是对象的一个属性。

2.3 操作 算数操作符 加法是一种操作,减法、除法和乘法也是。这些算数操作中的每一种都必须借助于相应的操作符才能完成。

2.4 条件语句 JavaScript使用条件语句来做判断。

2.5 循环语句 循环语句可以反复多次地执行同一段代码。循环语句分为几种不同的类型,但它们的工作原理几乎一样:只要给定条件仍能得到满足,包含在循环语句里的代码就将重复地执行下去:一旦给定条件的求值结果不再是true,循环也就到此为止。

2.7 对象 对象是自包含的数据集合,包含在对象里的数据可以通过两种形式访问——属性和方法:

  • 属性是隶属于某个特定对象的变量;
  • 方法是只有某个特定对象才能调用的函数。

2.7.1 内建对象 你其实已经见过一些内建对象了,数组就是其中一种。当我们使用new关键字去初始化一个数组时,其实是在创建一个Array对象的新实例。

2.7.2 宿主对象 除了内建对象,还可以在JavaScript脚本里使用一些已经预先定义好的其他对象。这些对象不是由JavaScript语言本身而是由它的运行环境提供的。具体到Web应用,这个环境就是浏览器。由浏览器提供的预定义对象被称为宿主对象。 宿主对象包括Form、Image和Element等。另一种宿主对象也能用来获得网页上的任何一个元素的信息,它就是document对象。

第3章 DOM

3.1 文档:DOM中的“D” 如果没有document(文档),DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时,DOM就在幕后悄然而生。它把你编写的网页文档转换为一个文档对象。 在人类语言中,“对象”这个词的含义往往不那么明确,它几乎可以用来称呼任何一种东西。但在程序设计语言中,“对象”这个词的含义非常明确。

3.2 对象:DOM中的“O” JavaScript语言里的对象可以分为三种类型:

  • 用户定义对象:由程序员自行创建的对象;
  • 内建对象:内建在JavaScript语言里的对象,如Array、Math和Date等。
  • 宿主对象:由浏览器提供的对象(最基础的对象就是window对象)。

window对象对应着浏览器窗口本身,这个对象的属性和方法通常统称为BOM(浏览器对象模型)。

3.3 模型:DOM中的“M” DOM中的“M”代表着“Model”(模型)。 DOM代表着加载到浏览器窗口的当前网页。 DOM把文档表示为一棵树,具体地说,是一个家谱树。 家谱树本身是一种模型。家谱树的典型用法是表示一个人类家族的谱系,并使用parent(父)、child(子)、sibling(兄弟)等记号来表明家族成员之间的关系。家谱树可以把一些相当复杂的关系简明地表示出来:一位特定的家族成员既是某些成员的父辈,又是另一位成员的字辈,同时还是另一位成员的兄弟。 <html>标签就是树根,他有两个分支<head>和<body>,它们是兄弟关系,各有各的子元素,所以它们本身又是其他一些元素的父元素…… 与使用“家谱树”这个术语相比,把文档称为“节点树”更准确。

3.4 节点 节点这个词是个网络术语,它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。 在DOM里由许多不同类型的节点,就像原子包含着亚原子微粒那样,也有很多类型的DOM节点包含着其他类型的节点。接下来我们先看看其中的三种:元素节点、文本节点和属性节点。

3.4.1 元素节点 DOM的原子是元素节点。 标签的名字就是元素的名字。文本段落元素的名字是“p”,无序清单元素的名字是“ul”,列表项元素的名字是“li”。 元素可以包含其他的元素。没有被包含在其他元素里的唯一元素是<html>元素,它是我们的节点树的根元素。

3.4.2 文本节点 粗略地说,文本就是一个文本节点。 文本节点总是被包含在元素节点的内部。

3.4.3 属性节点 属性节点用来对元素做出更具体的描述。

<p title="title"> text </p>

title="title"是一个属性节点,属性总是被放在起始标签里,所以属性节点总是被包含在元素节点中。 并非所有的元素都包含着属性,但所有的属性都被元素包含。 text是文本节点。

3.4.6 盘点知识点

  • 一份文档就是一棵节点树;
  • 节点分为不同的类型:元素节点、属性节点和文本节点等;
  • getElementById将返回一个对象,该对象对应着文档里的一个特定的元素节点;
  • getElementByTagName和getElementByClassName将返回一个对象数组,它们分别对应着文档里的一组特定的元素节点;
  • 每个节点都是一个对象。

3.5 获取和设置属性 3.5.1 getAttribute getAttribute是一个函数。它只有一个参数——你打算查询的属性的名字:object.getAttribute(attribute). getAttribute方法不属于document对象,所以不能通过document对象调用。它只能通过元素节点对象调用。

3.5.2 setAttribute 与getAttribute一样,setAttribute也只能用于元素节点:object.setAttribute(attribute, value). setAttribute实际上完成了两项操作:先创建这个属性,然后设置它的值。如果setAttribute用在一个本身就有这个属性的元素节点上,这个属性的值就会被覆盖掉。 细节:通过setAttribute对文档做出修改后,在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是该改变前的属性值,也就是说,setAttribute做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。这正是DOM的真正威力:对页面内容进行刷新却不需要在浏览器里刷新页面。

3.6 小结 本章介绍了DOM提供的五个方法:

  • getElementById
  • getElementsByTagName
  • getElementsByClassName
  • getAttribute
  • setAttribute

这五个方法是将要编写的许多DOM脚本的基石。

第4章 案例研究:JavaScript图片库

1、在一棵节点树上,childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组:element.childNodes。 2、每一个节点都有nodeType属性,这个属性可以让我们知道自己正在与哪一种节点打交道:node.nodeType nodeType属性总共有12种可取值,但其中仅有3种具有实用价值。

  • 元素节点的nodeType属性值是1;
  • 属性节点的nodeType属性值是2;
  • 文本节点的nodeType属性值是3。

3、如果想要改变一个文本节点的值,那就使用DOM提供的modeValue属性,它用来得到(和设置)一个节点的值:node.nodeValue. 注:在用nodeValue属性获取description对象的值时,得到的并不是包含在这个段落里的文本。<p>元素本身的nodeValue属性是一个空值,而你真正需要的是<p>元素所包含的文本的值。包含在<p>元素里的文本是另一种节点,它是<p>元素的第一个子节点。因此,你想要得到的其实是它的第一个子节点的nodeValue属性值(xxx.childNodes[0].nodeValue)。 4、数组元素childNodes[0]有个更直观易读的同义词。无论何时何地,只需要访问childNodes数组的第一个元素,都可以把它写成firstChild:node.firstChild。 DOM还提供了一个与之对应的lastCHild属性:node.lastChild,这代表着childNodes数组的最后一个元素。 4.5 小结 介绍了DOM的几个新属性:

  • childNodes
  • nodeType
  • nodeValue
  • firstChild
  • lastChild

学习重点两个:一是如何利用DOM所提供的方法去编写图片库脚本,二是如何利用事件处理函数把JavaScript代码与网页集成在一起。

[转载]原文链接:https://segmentfault.com/a/1190000020375196

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74987.html

文章标题:JavaScript DOM 编程艺术(第2版) 第1——4章

相关文章
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
回到顶部