Web前端开发技术第13-17章

崚嶒

已于 2024-06-11 16:07:06 修改

阅读量1.2k

点赞数 2

分类专栏：笔记文章标签： javascript css html

于 2021-06-24 00:32:07 首次发布

本文链接：https://blog.csdn.net/weixin_44729986/article/details/118162816

版权

笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

教材：

Web前端开发技术——HTML5、CSS3、JavaScript（第3版）储久良编著

这是个人的期末复习笔记，纯手动输入，如果有哪里写错了，恳请指点。

第13章 HTML5基础与CSS3应用

13.1 HTML5 概述

13.1.1 HTML5 的八个特性

语义特性
离线与存储特性
设备访问特性
多媒体特性
三维、图形与特效特性
性能与集成特性
连接特性
CSS3特性

13.1.2 HTML5 的优势

摆脱对平台的依赖
实时更新
离线使用
代码更安全
跨平台
可以充分利用Native

13.1.3 HTML5 新增结构元素及页面元素

新增的结构元素	说明
header	页眉，用于引导和导航信息
nav	可作为导航的链接组
section	内容区块，通常由内容及其标题组成
article	一个独立的、完整的内容块
aside	非正文的内容，被删除也不会影响其他内容
footer	页脚

新增的其他元素	说明
video	视频
audio	音频
embed	嵌入其他媒体内容
mark	突出显示或高亮的文字
progress	运行中的进程
time	日期或时间
ruby	注释中文注音或字符
rt	字符的解释或发音
rp	定义不支持ruby元素的浏览器所显示的内容
wbr	软换行
canvas	图形容器，必须用脚本绘制图形
command	命令按钮
details	描述文档或文档某个部分的细节
datalist	选项列表
output	不同类型的输出
source	为媒介元素定义媒介资源
menu	菜单列表

13.1.4 HTML5 废除的元素与属性

太多，不写

13.1.5 浏览器支持与选择

一些低版本的浏览器并不支持HTML5，如IE6~IE8。所有新、旧浏览器，对无法识别的元素均会视作内联（inline）元素来自动处理。目前支持HTML5最好的浏览器是Chrome浏览器。

13.2 HTML5 文档结构

13.2.1 HTML5 页面结构

HTML4.01之前，通常使用DIV+CSS来进行页面布局，采用DIV分割页面，采用CSS定义DIV样式。HTML5中采用页眉、页脚、导航、文章内容等结构元素来进行页面布局，十分方便。

13.2.2 HTML5 新增结构元素

header 标记
定义文档和区域的页眉，通常是一些引导和导航信息，不局限于写在网页头部，也可以写在网页内容里。
nav 标记
代表页面的一个部分，是一个可以作为页面导航的链接组，建议不要在footer元素中使用nav元素，否则易造成页面显示不正确。配置相应的CSS代码可以实现水平导航。
article 标记
特殊的section标记，它比section语义更明确，它代表一个独立的、完整的相关内容块，可独立于页面其他内容使用，例如论坛帖子、博客文章、评论等。一般来说，article有标题部分，通常包含在header内，有时也包含footer。article标记可以嵌套，内存的article对外层的article有隶属关系。
section 标记
定义文档中的节，一般用于成节的内容，用来表示普通的文档内容或应用区块，通常由内容和标题组成。section元素不是一个普通的容器元素，它表示一段专题性的内容，如果描述一件普通的事物，建议使用article来代替section；如果使用section，仍可以使用标题标记；如果一个容器需要定义样式或定义行为，建议使用div元素。
aside 标记
侧栏，也称为旁注，用来说明其所包含的内容与页面主要内容相关，但不是该页面的一部分，例如广告、成组的链接、侧栏等。
footer 标记
定义section或文档的页脚，包含了与页面、文章或部分内容有关的信息，例如文章作者或日期。作为页脚时，一般包含版权、相关文件和链接。它与页眉header用法相同，在一个页面内可以多次使用。

13.3 HTML5 新增页面元素

hgroup 标记
标题组合标记，对网页或区段section的标题标记进行组合。
figure 标记与 figcaption 标记
figure标记用于对元素进行组合，常用于图像与图像描述组合。figcaption（图题）标记用于定义figure元素的标题（caption），可以给一组图像标记定义标题，但figcaption标记不是必需的。如果包含了figcaption元素，那么它必须放在figure元素的第一个或最后一个子元素的位置。
mark 标记与 time 标记
- mark标记用于定义带有记号的文本，在需要突出显示文本时可以使用，此标记对关键字做高亮处理（黄色底色标注）。
- time标记用于定义公历时间（24小时制）或日期，时间和时区偏移是可选的，该标记能够以机器可读的方式对日期和时间进行编码，在浏览器中不会呈现任何特殊效果。两个重要属性：【pubdate属性】指示该标记中的日期或时间是文档的发布日期；【datetime属性】规定日期或时间，否则，按元素的内容给定日期或时间。
details 标记与 summary 标记
- details（细节）标记是一个开关式、交互式控件，用于定义用户可见的或隐藏的需求补充细节，任何形式的内容都可以放在该标记中。该元素的内容对用户是不可见的，除非设置了open属性。
- summary（摘要）标记与details标记配合使用可以为details定义标题，summary元素应该是details元素的第一个子元素，标题是可见的，单击标题时显示details内容。
progress 标记与 meter 标记
- progress（进度）标记用于定义运行中的任务进度（进程），有两个属性：max属性-规定需要完成的值；value属性-规定进程的当前值。
- meter（度量）标记定义已知范围或分数值内的标量测量，也被称为gauge（尺度），如磁盘用量、CPU使用率等。

表：meter标记的属性

属性	值	说明
form	form_id	meter元素所属的表单
high	number	被界定为高值的范围
low	number	被界定为低值的范围
max	number	范围的最大值
min	number	范围的最小值
optimum	number	度量的最优值
value	number	必需，度量的当前值

input 标记与 datalist 标记
- input标记用于搜集用户信息，用法见章节12.3。将input标记的 list 属性与detalist标记的 id 属性设置为相同值，通过datalist标记列出所有合法的输入值列表。
- datalist（选项列表）标记用于定义input标记可能的选项列表，一般与input标记配合使用，主要用来定义input可能的值，提供“自动完成”的功能。datalist标记及其选项不会显示，只有当光标移到input标记域时，才能看到“▼”，单击“▼”弹出下拉列表。

<!--hgroup 标记-->
<hgroup>
	<h1 align="center">JSDoc+规范</h1>
	<h2>介绍</h2>
</hgroup>

<!--figure 标记与 figcaption 标记-->
<figure>
	<p>html5具有语义、离线与存储、设备访问等八个新特性，其对应的logo如图所示：</p>
	<img src="#" width="150px" alt="语义" />
	<img src="#" width="150px" alt="离线与存储" />
	<img src="#" width="150px" alt="设备访问" />
	<figcaption>HTML5新logo</figcaption>
</figure>

<!--mark 标记与 time 标记-->
<p>国际劳动节又称<mark>五一国际劳动节</mark>、<mark>国际示威游行日</mark>，踏实全世界劳动人民共同拥有的节日。<time datetime="1890-05-01">1890-05-01</time>举行了第一个国际劳动节。</p>

<!--details 标记与 summary 标记-->
<details>
	<summary>HTML5是下一代的HTML</summary>
	<h3>什么是HTML5？</h3>
	<p>HTML5将成为HTML、XHTML以及HTML DOM的新标准。</p>
	<p>HTML的上一个版本诞生于1999年，自那以后，Web世界经历了巨变。</p>
	<p>大部分现代浏览器已经具备了某些HTML5支持。</p>
</details>

<!--progress 标记与 meter 标记-->
<p><strong>文件下载进度：</strong><progress value="22" max="100">设置属性</progress></p>
<p><strong>空进度条：</strong><progress >未设置属性</progress></p>
<p><strong>服务器CPU使用情况：</strong><meter value="0.3" high="0.9" optimum="0.5">3/10</meter></p>
<p><strong>内存使用情况：</strong><meter value="0.6" max="1" min="0"  optimum="0.75">60%</meter></p>
<p><mark>注释：</mark>IE9及更早版本不支持progress和meter标记</p>

<!--input 标记与 datalist 标记-->
<input list="course" placeholder="请选择课程" />
<datalist id="course">
	<option value="HTML5移动应用开发">
	<option value=".NET应用开发">
	<option value="JavaEE应用开发">
	<option value="数字媒体技术导论">
	<option value="数据结构教程">
</datalist>

13.4 HTML5 表单

13.4.1 HTML5 新增的表单属性

form标记的新属性
- autocomplete：on｜off，规定类型为text｜search｜url｜tel｜email｜password｜date pickers｜range｜color的input标记是否具有自动完成功能，设置后将会显示历史输入。
- novalidate：true｜false，规定提交表单时不进行验证form或类型为text｜search｜url｜tel｜email｜password｜date pickers｜range｜color的input标记。
input标记的新属性
- autocomplete
- autofocus 自动获得焦点
- form 所属表单
- form overrides 表单重写
- height｜width 只适用于image类型
- list 输入域的datalist
- min｜max｜step 为包含数字或日期的input类型限定约束
- multiple 输入域可选择多个值
- pattern 验证input域的模式
- placeholder 提示性文本
- required 输入域不能为空

13.4.2 HTML5 新增的表单元素

output标记
定义不同类型的输出，有三个属性：for属性描述计算中使用的元素与计算结果之间的关系，其值为每一元素的id；form属性定义输入字段所属的表单；name属性定义对象的唯一名称。
keygen标记
用于提供验证用户的方法。提交表单时生成两个键：私钥（private key）和公钥（public key），私钥存储于客户端，公钥被发送到服务器。此元素不可靠。
datalist标记
规定了input标记可能的选项列表，详情见章节13.3。

13.4.3 HTML5 新增的 input 类型

date pickers 日期选择器
color
tel
email
number 包含数值的输入域
range 包含一定范围内数字值的输入域
search
url 包含URL的输入域

13.5 HTML5 视频与音频

13.5.1 video 标记及属性

支持三个格式：MP4、WebM、Ogg
属性：width｜height｜src｜controls｜autoplay｜loop｜preload｜poster

13.5.2 audio 标记及属性

13.6 CSS3 基础应用

13.6.1 CSS3 新特性

新的CSS属性、CSS特效、CSS动画、元素的变换等

13.6.2 CSS3 浏览器兼容性

常用的浏览器属性前缀
- -webkit-（Safari、Chrome）
- -moz-（Firefox）
- -ms-（IE）
- -o-（Opera）

13.6.3 CSS3 边框

border-image 边框图像
border-radius 圆角边框
box-shadow 边框阴影

13.6.4 CSS3 transform 属性（转换）

所谓转换，就是改变元素形状、尺寸和位置，使其达到另一种效果的过程。

CSS3 2D转换
位移 translate(x,y)
旋转 rotate(deg)
缩放 scale(x,y)
扭曲 skew(deg,deg)
综合转换 matrix(scaleX,skewX,skewY,scaleY,translateX,translateY)
CSS3 3D转换
旋转 rotateX(deg)
旋转 rotateY(deg)

13.6.5 CSS3 transition 属性（过渡）

通过CSS3过渡，可以在不使用Flash动画或JavaScript的情况下，实现元素从一种样式到另一种样式的转变效果。要实现这种效果，需要设置两个因素：一个是指定要添加效果的CSS属性，另一个是持续时间。

transition是复合属性，包含四个过渡属性：
transition:property｜duration｜timing-function｜delay

属性	说明
transition-property	要添加效果的CSS3属性的名称
transition-duration	过渡效果的持续时间，单位是秒或毫秒，默认是0
transition-timing-function	过渡效果的速度曲线，属性值有 linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)
transition-delay	何时开始切换效果，单位是秒或毫秒，默认是0

13.6.6 CSS3 animation 属性（动画）

CSS3动画是指元素从一种样式逐渐变化为另一种样式的效果。通过CSS3的@keyframes规则可以创建动画，在CSS3中规定某项CSS样式，就能创建出当前样式逐渐变为新样式的动画效果。

animation是复合属性：
animation:name｜duration｜timing-function｜delay｜iteration-count｜direction

属性	说明
@keyframes	规定动画
animation	所有动画属性的复合属性，除了play-state属性
animation-name	@keyframes的名称
animation-duration	动画完成一个周期所用的时间，单位是秒或毫秒，默认是0
animation-timing-function	动画的速度曲线，默认是ease，其他属性值与transition-timing-function的值相同
animation-delay	动画何时开始，单位是秒或毫秒，默认是0
animation-iteration-count	动画播放次数，值是1（默认）、infinite
animation-direction	动画是否在下一周期逆向播放，值是normal（默认）、alternate
animation-play-state	动画是否正在播放或暂停，值是running（默认）、paused
animation-fill-mode	动画时间之外的状态，值是none（默认）、forwards、backwards、both

【@keyframes定义】
@keyframes myAnimation{
    from/0% {Properties:Properties value;}
    Percentage {Properties:Properties value;}
    to/100% {Properties:Properties value;}
}
【@keyframes绑定】
将@keyframes绑定到一个CSS选择器，定义至少以下两项CSS3动画属性：动画名称、动画时长。
div{
animation:myAnimation 8s;
}

transition和animation的区别

触发条件。transition通常和hover等事件配合使用，由事件触发。animation则立即播放。
循环性。 animation可以设定循环次数，transition只能播放一次。
精确性。 animation可以设定每一帧的样式和时间，可以设置每一帧需要单独变化的样式属性。tranistion 只能设定头尾，所有样式属性都要一起变化。
与javascript的交互性。animation与js的交互不紧密，tranistion和js的结合更强大。

来源：简书@panw3i

13.6.7 CSS3 多列属性

用于创建多个列来对文本进行布局。

13.6.8 CSS3 文本效果

文本阴影 text-shadow 属性
空白处理 white-space 属性
控制换行 word-wrap 属性
文本溢出 text-overflow 属性

第14章 JavaScript基础

14.1 概述

14.1.1 简介

JavaScript由Netscape公司的Brendan Eich（布兰登·艾奇）于1995年开发设计。JavaScript是一种脚本编程语言，主要运行在客户端，用户访问带有js的网页，网页里的js程序就传给浏览器，由浏览器解释和处理。

JavaScript的特点：
简单性、安全性、动态性、跨平台性

14.1.2 第一个JavaScript程序

js程序不能独立运行，必须依赖于HTML文件，通常将js代码放在script标记内，由浏览器JavaScript脚本引擎来解释运行。script标记可以放在HTML的头部，也可以放在HTML的主体部分，只是装载的时间不同。

<!--第一种写法-->
<script type="text/javascript" src="外部js文件名.js">
	//js语句块;
</script>

<!--第二种写法-->
<script language="javascript" src="外部js文件名.js">
	...
</script>

14.1.3 JavaScript 放置的位置

js代码一般放在页面的头部或主体部分。当页面载入时，会自动执行body部分的JavaScript，而head部分的JavaScript只有被显式调用时才会被执行。

head标记中的脚本
script标记放在head标记中，js代码必须定义成函数形式，并在body标记内调用或通过事件触发。
function myFunction(参数1，参数2，参数3…){
函数体语句;
}

<!--head中的script-->
<script type="text/javascript">
	function message(){
		alert("调用js函数！sum（100，200）="+sum(100,200));}
		function sum(x,y){
	return x+y;}
</script>

<!--body标记中调用js-->
<form>
	<input name="btnCallJS" type="button" onclick="message();" value="计算并显示两个数的和">
</form>

body标记中的脚本
script标记放在body标记中，js代码可以定义成函数形式，在body标记内调用或通过事件触发；也可以在script标记内直接编写脚本语句，在页面载入时同时执行相关代码。
外部js文件中的脚本
将js函数单独写成一个js文件，在script标记中引用，在body标记中调用或通过事件触发。当script标记的src属性中引用了外部js文件时，该script标记中的所有语句将不会被执行。
```
<script type="text/javascript" src="demo.js">
	//引用外部js文件后，此标记内的所有语句都不会被执行
	//因此一般不会在这里添加代码
</script>
```

事件处理代码中的脚本

<form>
	<input type="button" onclick="alert('直接在事件处理代码中加入js代码')" value="直接调用js代码">
</form>

14.2 JavaScript 程序

JavaScript程序由语句、语句块、函数、对象、方法、属性等构成，通过顺序、分支和循环三种基本程序控制结构来进行编程。

语句和语句块
代码
消息对话框：JavaScript中的消息对话框分为告警框、确认框、提示框三种
- 告警框 alert(message);
  用于显示带有一个图标、指定消息、一个“确定”按钮的告警框。
- 确认框 confirm(message);
  用于显示带有一个图标、指定消息、一个“确定”和一个“取消”按钮的对话框。如果用户点击了“确定”按钮，则返回true；如果点击“取消”按钮，则返回false。
- 提示框 prompt("提示消息",默认值);
  用于提示用户在进入页面前输入某个值。如果用户单击了“取消”按钮，则返回null。
```

<script type="text/javascript">
	function show_confirm(){
		var tf=confirm("请选择按钮！");
		if(tf==true){
			alert("您按了确定按钮");
		}
		else{
			alert("您按了取消按钮");
		}
	}
</script>


<script type="text/javascript">
	function show_prompt(){
		var name=prompt("请输入您的姓名","李大为");
		if(name!=null && name!="")  //既不为空，也不为null{
			document.write("您好，"+name+"！");
		}
	}
</script>
```
JavaScript 注释
- //单行注释
- /*
  多行注释
  */

14.3 标识符和变量

命名规范

标识符
1. 必须以英文字母或下划线开头；
2. 必须由英文字母、数字、下划线组成，不能出现空格或制表符；
3. 不能使用JavaScript关键字和保留字；
4. 不能使用JavaScript语言内部的单词，如Infinity、NaN、undefined等；
5. 区分大小写。
关键字
一些被赋予特定意义的单词，不能作为标识符使用。
保留字
一些用于未来扩展时使用的单词，不能作为标识符使用。

JavaScript中的关键字
break	else	if	var
case	finally	return	void
catch	for	switch	while
continue	function	this	with
default	new	throw	delete
in	try	do	instranceof

JavaScript中的保留字
abstract	enum	import	export
int	double	long	short
float	boolean	static	super
char	final	native	synchronized
byte	class	package	throws
const	protected	private	public
transient	debugger	implements	goto
volatile	interface	extends

数据类型：六种，字符型、数值型、布尔型、Null、Undefined、对象。
- String 字符型
  字符型数据又称字符串，需要用单引号或双引号封装起来，在JavaScript中，使用单引号和双引号的效果是一样的。
- Number 数值型
  分为整型、浮点型、内部常量、特殊值。
- Boolean 布尔型
  布尔型可转换为其他类型的数据，如true可转换为整数1，false可转换为整数0，但不能用true表示1或false表示0。
- Null
  空类型，只有一个值为null，表示“无值”。当变量不再使用时，可将它赋为null，以释放存储空间。
- Undefined
  值变量创建之后还没有赋值之前所具有的值，返回值就是undefined。使用未定义的变量也会显示undefined。
  它与null不同之处在于：null值表示已经对变量赋值，只不过赋的值就是null；undefined表示变量不存在或没有赋值。
- Object对象
  对象是属性和方法的集合，对象的属性可以是任何类型的数据，包括数值、字符、布尔型，甚至是另一个对象；方法是一个定义在对象中的函数，用于实现特定功能。

JS 中的内部常量	说明
Math.E	自然数
Math.PI	圆周率
Math.SQRT2	2的平方根
Math.SQRT1_2	1/2的平方根
Math.LN2	2的自然对数
Math.LN10	10的自然对数
Math.LOG2E	以2为底的e的对数
Math.LOG10E	以10为底的e的对数

JS 中的特殊值	说明
Infinity	无穷大
Number.NaN	非数字值
Number.MAX_VALUE	可表示的最大的数
Number.MIN_VALUE	可表示的最小的数
Number.NEGATIVE_INFINITY	负无穷大溢出时返回该值
Number.POSITIVE_INFINITY	正无穷大溢出时返回该值

变量
JavaScript是一种无数据类型的计算机语言，在定义变量时不需要指定变量的数据类型，统一使用var关键字声明，JavaScript会在需要的时候自动对不同数据类型进行转型。
转义字符

转义字符	代表含义
\b	退格符
\f	换页符
\n	换行符
\r	回车符
\t	水平制表符
\′	单引号
\＂	双引号
\\|反斜线
\uhhhh	编码转换

14.4 运算符和表达式

JavaScript运算符主要有算术运算符、关系运算符、逻辑运算符、赋值运算符、自增、自减运算符、条件运算符、逗号运算符和位运算符等；也可以根据操作数个数，将运算符分为一元运算符、二元运算符和三元运算符。

14.4.1 算术运算符和表达式

【加法 (+)】二元运算符
数值 + 数值 = 数值
字符串 + 字符串 = 字符串
字符串 + 数值 = 字符串
【减法 (-)】
- 二元运算符
  数值 - 数值 = 数值
  字符串 - 数值 = 数值（字符串能转换为数值时）
- 一元运算符：取反
【乘法 (* )】二元运算符
数值 * 数值 = 数值
字符串 * 数值 = 数值（字符串能转换为数值时）
字符串 * 数值 = NaN（字符串不能转换为数值时）
【除法 (/)】二元运算符
数值 / 数值 = 数值
字符串 / 数值 = 数值（字符串能转换为数值时）
字符串 / 数值 = NaN（字符串不能转换为数值时）
正数 / 0 = Infinity
负数 / 0 = -Infinity
【模/取余 (%)】
数值 % 数值 = 数值
字符串 % 数值 = 数值（字符串能转换为数值时）
字符串 % 数值 = NaN（字符串不能转换为数值时）
数值 % 0 = NaN
【自增 (++)】一元运算符
增量为1，操作数必须是变量，不能是常量。有两种形式：前置和后置。前置是将运算符放在操作数之前，表示在使用操作数之前先自增1；后置是将运算符放在操作数之后，表示在使用完操作数之后再自增1。
【自减 (–)】一元运算符
减量为1，用法同上

14.4.2 关系运算符和表达式

运算结果返回一个布尔值

【等于 (==)】二元运算符
- 当两个操作数为不同类型时，转换规则如下：
  数字与字符串：字符串→数字
  布尔值：true→1，false→0
  对象与数字或字符串：对象→数字或字符串
- 两个对象、数组或函数的比较不同于字符串、数字和布尔值的比较，只有两个变量引用的是同一个对象、数组或函数时，它们才是相等的；如果两个变量引用的不是同一个对象、数组或函数，即使它们的属性、元素完全相同，它们也是不相等的。
- 特殊值的比较
  NaN与数字或NaN：不等
  两个null：相等
  两个undefined：相等
  null与undefined：相等
【不等于 (!=)】
用法参考上述情况，等于运算符返回false时，不等于运算符返回true；等于运算符返回true时，不等于运算符返回false。
【小于 (<)】
小于运算符存在数据类型转换问题，规则是：
- 比较运算符只能在数字和字符上执行，不是数字和字符类型的数据都会被转换成这两种类型。
- 如果两个操作数都是数字，或者都能被转换为数字，则按照数字大小比较。
- 如果两个操作数都是字符，或者都能被转换为字符串，则按照字母顺序比较。
- 如果一个是字符或者能被转换为字符，另一个是数字或者能被转换为数字，则先将字符转换为数字，再按照数字大小比较。
- 如果操作数中包含无法转换为数字和字符的数据，则比较结果是false。
【大于 (>)】用法同上
【小于等于 (<=)】用法同上
【大于等于 (>=)】用法同上
【全等于 (= = =) 非全等于 (!==)】
全等于号表示若两个数据的值和类型均相等，结果为true；否则为false。
非全等于号表示两个数据的值和类型有一个不等，或两个都不等，结果为true。

14.4.3 逻辑运算符和表达式

逻辑运算的操作数都应该是布尔型或可以转换为布尔型的数据，运算结果返回true或false。

【与 (&&)】二元运算符
有假必假
【或 (||)】二元运算符
有真必真
【非 (!)】一元运算符
取反

14.4.4 赋值运算符和表达式

赋值运算要求左操作数是一个变量、数组元素或对象属性，右操作数是一个任意类型的值，赋值运算符的作用就是将右操作数的值赋给左操作数。

14.4.5 位运算符和表达式

位运算是对二进制表示的整数进行按位操作。如果操作数是十进制或其他进制表示的整数，运算前要先将这些整数转换为32位的二进制数，如果不能转换成二进制数，则位运算结果为NaN。

【按位与 (&)】二元运算符
如果两个操作数对应位置上的数字都是1，运算结果的这一位就为1，否则为0。
【按位或 (|)】二元运算符
如果两个操作数对应位置上的数字都是0，运算结果的这一位就为0，否则为1。
【按位非 (~)】一元运算符
将操作数的每一位取反
【按位异或 (^)】二元运算符
两个操作数逐位进行异或运算，如果两个操作数对应位置上的数字相同，运算结果的这一位为0，否则为1。

14.4.6 条件运算符和表达式

三元运算符
<变量>=<条件表达式>?<真值表达式>:<假值表达式>

14.4.7 其他运算符和表达式

【逗号 (,)】二元运算符
先计算第一个表达式的值，再计算第二个表达式的值，运算结果为第二个表达式的值。
【新建计算第一个对象 (new)】一元运算符
用于创建JavaScript对象实例或数组。
【删除 (delete)】一元运算符
用于删除一个对象的属性或某个数组的元素。
【类型 (typeof)】一元运算符
操作数可以是任意类型，运算结果返回一个表示操作数类型的字符串。

14.5 JavaScript 程序控制结构

顺序结构
分支结构
- if 语句
- if…else 语句
- 多重 if…else 语句
- switch 语句
循环结构
- for 循环
- while 循环
- do…while 循环
- for…in 循环
- 循环嵌套

continue和break的区别

continue结束本次循环，而break结束整个循环过程，不再判断执行循环条件的语句是否成立；
continue只在循环体中使用，即只能在for、while、do…while中使用它，除此之外不能在其他语句中使用continue。

do…while和while的区别

do…while先执行一次循环再判断循环条件是否成立，若成立，就再执行一次循环；
while先判断循环条件是否成立，若成立，才执行循环体。
所以do…while至少执行一次循环，while可能一次也不执行循环。

14.6 JavaScript 函数

JavaScript函数分为系统内部函数、系统对象定义的函数、用户自定义函数。函数只需要定义一次就可以多次使用，从而提高程序代码的复用率，减轻开发人员的负担，降低代码的重复率。
函数需要先定义后调用。

常用系统函数

全局函数

函数	说明
decodeURI()	解码某个编码的uri
decodeURIComponent()	解码一个编码的uri组件
encodeURI()	把字符串编码为uri
encodeURIComponent()	把字符串编码为uri组件
eval(string)	计算js字符串，并把它作为脚本代码执行
escape(string)	对字符串进行编码
unescape(string)	对由escape()编码的字符串进行解码
parseFloat(string)	解析一个字符串并返回一个浮点数
parseInt(string,radix)	解析一个字符串并返回一个整数
getClass()	返回一个JavaObject的JavaClass
isNaN(string)	检查某个值是否是非数
isFinite(string)	检查某个值是否是有穷大的数
Number()	把对象的值转换为数字
String()	把对象的值转换为字符串

常用的对象函数
- toString(radix)
  将Number型数据转换为字符型数据，并返回指定的基数的结果，若省略radix，则使用10代替。
- toFixed(n)
  将浮点数转换为固定小数点位数的数字，n是整数，设置小数的位数，若省略n，则使用0代替。
- 字符串查找和提取的方法
  具体内容请点击跳转
自定义函数
- js函数定义一定要用function关键字，且是完全小写；
- 在调用函数时可以向其传递参数，多个参数之间用逗号隔开，也可以没有参数，但括号不能省略，参数类型不需要指定，不能用var关键字创建参数；
- js区分大小写，必须使用大小写完全相同的函数名来调用函数；
- 无需定义返回值类型。
带参数返回的return语句
函数变量的作用域
- 变量分为局部变量和全局变量。
- 局部变量和全局变量可以重名。
- 在函数体内，局部变量的优先级高于全局变量，即在函数体内，同名的全局变量被隐藏了。

第15章 JavaScript 事件分析

15.1 JavaScript 事件概述

事件是一些可以通过脚本响应的页面动作。

15.1.1 事件类型

鼠标事件：使用鼠标操作HTML元素时触发的事件。
键盘事件：用户在键盘上敲击、输入时触发的事件。
HTML事件：当窗口发生变动或发生特定的客户端/服务器交互时触发的事件。
突变事件：文档对象底层元素发生改变时触发的事件。

15.1.2 事件句柄

事件句柄（又称事件处理函数）是指事件发生时要进行的操作。一个事件对应一个事件句柄。
事件句柄名称与事件属性同名，都作为HTML标记的属性，只是在事件名称前加了on。
<标记事件句柄=“js代码”>…</标记>

<input type="button" value="显示" onclick="show();">

事件类型	事件	事件句柄	说明
键盘事件	KeyDown	onKeyDown	键盘按下
	KeyPress	onKeyPress	键盘按下后又松开
	KeyUp	onKeyUp	键盘松开
鼠标事件	Click	onClick	鼠标单击
	Dbclick	onDbclick	鼠标双击
	MouseDown	onMouseDown	鼠标按钮按下
	MouseMove	onMouseMove	鼠标指针移动
	MouseOut	onMouseOut	鼠标指针移出元素之外
	MouseOver	onMouseOver	鼠标指针悬停于元素上
	MouseUp	onMouseUp	鼠标按钮松开
表单控件事件	Change	onChange	元素改变
	Submit	onSubmit	提交表单
	Reset	onReset	重置表单
	Select	onSelect	选取元素
	Blur	onBlur	元素失去焦点
	Focus	onFocus	元素获得焦点
窗口事件	Load	onLoad	文档载入
窗口事件	UnLoad	onUnload	文档卸载

15.1.3 事件处理

HTML属性的静态指定
在开始标记中设置相关句柄，并绑定事件处理程序。
<标记事件句柄1=“事件处理程序1” [事件句柄2=“事件处理程序2”…]>…</标记>
JavaScript属性的动态绑定
也称分配某一事件，写在js代码部分。在此用法中，事件处理程序必须使用不带函数名的function( ){ }来定义，函数体内可以是字符串形式的代码，也可以是函数。
<事件源对象>.<事件句柄>=function( ) {<事件处理程序>;}
特定对象特定事件的指定
在script标记中编写元素对象的事件处理程序代码，使用for属性指定事件源，event属性指定事件句柄名称。

<!--动态指定-->
Object.οnclick=function() {disp();}	//动态地给对象指派事件，绑定事件处理函数
Object.onclick();	//调用方法

<!--特定对象特定事件的指定-->
<script type="text/javascript" for="window" event="onload">
	alert("网页加载完成！");
</script>

15.1.4 事件处理程序的返回值

JavaScript的事件处理程序一般不需要有返回值，通常使用返回值来判断事件处理程序是否正确进行处理，或者判断是否进行下一步操作。一般返回布尔值true或false。
<标记事件句柄=“return 函数名(参数);”>…</标记>

15.2 表单事件

获得焦点与失去焦点事件
单击表单中的按钮时，该按钮就获得了焦点；单击表单中的其他区域时，该按钮就失去了焦点。
提交及重置事件
改变及选择事件
在表单中，当选择了文本输入框或多行文本输入框内的文字时，会触发select事件；当文本输入框或多行文本输入框失去焦点并更改值时，或当select下拉选项中的一个选项状态改变后，会触发change事件。

15.3 鼠标事件

鼠标单、双击事件
鼠标移动事件

15.4 键盘事件

15.5 窗口事件

窗口事件是指浏览器窗口在加载页面或卸载页面时触发的事件。

第16章 DOM和BOM

16.1 JavaScript常用对象

JavaScript实现由三个部分组成：标准化规范ECMAScript、文档对象模型DOM（Document Object Model）、浏览器对象模型BOM（Browser Object Model）。

JavaScript对象可分为四类：
- 本地对象：独立于宿主环境的ECMAScript实现提供的对象，先定义后实例化才能使用，包括Object、Function、Array、Boolean、Number、Date、RegExp、Error以及各种Error后缀的对象。
- 内置对象：由ECMAScript实现提供的、不依赖于宿主环境的对象，在ECMAScript运行之前就已经创建好的对象就叫内置对象，这意味着不必明确实例化内置对象，因为它也被实例化了。ECMA-262只定义了两个内置对象：Global和Math。
- 宿主对象：指ECMAScript实现的宿主环境提供的对象。所有DOM和BOM对象都是宿主对象。
- 自定义对象：根据程序设计需要，由编程人员自行定义的对象。

16.1.1 Array

数组元素可以是字符串、数值型、布尔值等，也可以不一致。

<!--创建Array对象-->
var stu1=Array();	//数组返回值：返回的数组为空
var stu2=Array(size);	//数组返回值：返回具有size个数、元素为undefined的数组
var stu3=Array(element0,element1,...elementn);

数组元素初始化与修改指定数组元素
如果数组没有初始化（空数组），可以使用循环给数组元素赋值，也可以一一赋值，如stu[i]=表达式，当下标i超出了数组边界，则返回值为undefined。

数组对象的属性和方法
通过length()属性获取数组长度

方法	说明
join(分隔符)	把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔
pop()	删除并返回数组最后一个元素
push(新元素)	在数组末尾添加新元素，返回新的长度
shift()	删除并返回数组第一个元素
unshift(新元素)	在数组开头添加新元素，返回新的长度
sort()	对数组元素排序
reverse()	颠倒数组元素的排序
splice()	删除元素，并添加新元素
slice()	从某个数组返回选定的元素
toString()	把数组转换为字符串，返回结果
toLocaleString()	把数组转换为本地数组，返回结果
concat()	连接两个或以上的数组，返回结果

16.1.2 Date

var today=new Date();
var today=new Date(3000);	//毫秒数
var today=new Date("Apr 15 2016 15:20:00");		//标准时间格式字符串
var today=new Date(2016,3,25,14,42,30);			//年，月，日，时，分，秒，毫秒

16.1.3 日期对象的方法

方法	说明
getDate()	一个月中的某一天(1~31)
getDay()	一周中的某一天(0~6)
getMonth()	月份(0~11)
getFullYear()	4位数字年份
getHours()	小时(0~59)
getMinutes()	分钟(0~59)
getSeconds()	秒(0~59)
getMilliseconds()	毫秒(0~999)
getTime()	1970年1月1日至今的毫秒数

将日期转化为字符串

方法	说明
toString()	把Date对象转换为字符串
toLocaleString()	根据本地时间格式，把Date对象转换为字符串
toLocaleTimeString()	根据本地时间格式，把Date对象的时间部分转换为字符串
toLocaleDateString()	根据本地时间格式，把Date对象的日期部分转换为字符串

16.1.4 Math

var radius=8;
var area=Math.PI*radius*radius;

属性	说明
Math.E	自然对数的底数
Math.LN2	2的自然对数
Math.LN10	10的自然对数
Math.LOG2E	以2为底的e的对数
Math.LOG10E	以10为底的e的对数
Math.PI	圆周率
Math.SQRT1_2	2的平方根的倒数
Math.SQRT2	2的平方根

方法	说明
Math.ceil(x)	上舍入，结果是大于等于x的整数
Math.floor(x)	下舍入，结果是小于等于x的整数
Math.round(x)	四舍五入后最接近的整数
Math.random()	0~1之间的随机数
Math.max(x,y)	最大值
Math.min(x,y)	最小值
Math.sqrt(x)	平方根
Math.exp(x)	e的指数
Math.pow(x,y)	x的y次幂
Math.log(x)	自然对数

16.1.5 Number

将给定的值转换成数字。

var ss=Number(false);			// 0
var ss=Number(true);			// 1
var ss=Number(null);			// 0
var ss=Number(100);				// 100
var ss=Number("5.5");			// 5.5
var ss=Number("56 ");			// 56
var ss=Number(undefined);		// NaN
var ss=Number("5.6.7");			// NaN
var ss=Number(new Object());	// NaN

16.1.6 String

var s1="hello bug!";
var s1=new String("hello bug!");
var s1=String("100");		//字符串100
var s1=String(true);		//字符串true
var s1=String(null);		//字符串null
var s1=String(new Object());	//字符串[object,Object]
var s2=new Array("111","222","333");
alert(String(s2));			//返回值为111,222,333

获取String对象的长度
length属性
连接两个字符串
concat()方法，将传入的字符串连接到目标字符串的末尾，并返回新的字符串
把字符串分割为字符串数组
split()方法，传入分隔符，返回字符串数组
String对象的显示风格方法
字符串的大小写转换
toLowerCase() 转换为小写
toUpperCase() 转换为大写

16.1.7 Boolean

var boolean1=new Boolean(value);	//构造方法
var boolean1=Boolean(value);		//转换函数

var b=Boolean("");				//空字符串转换为false
var b=Boolean("hello");			//非空字符串转换为true
var b=Boolean(50);				//非零数字转换为true
var b=Boolean(0);				//零转换为false
var b=Boolean(null);			//null转换为false
var b=Boolean(NaN);				//非数值型转换为false
var b=Boolean(false);			//false
var b=Boolean(true);			//true
var b=Boolean("true");			//true
var b=Boolean("false");			//true
var b=Boolean(new object());	//对象转换为true

方法	说明
toSource()	返回当前Boolean对象实例创建代码的字符串
toString()	返回当前Boolean对象实例的字符串(“true或"false”)
valueOf()	返回Boolean对象实例的原始Boolean值

16.2 HTML DOM

16.2.1 DOM简介

Document Object Model，document对象是客户端JavaScript最常用的对象之一，在浏览器对象模型中，它位于window对象的下一层级。document对象包含一些简单的属性，提供了浏览器中显示文档的相关信息，如文档的URL、字体颜色、修改日期等；另外，document对象还包含一些引用数组的属性，这些属性可以代表文档中的表单、图像、链接、锚以及applet。document对象还定义了一系列的方法，可以使JavaScript在解析文档时动态地将HTML文本添加到文档中。

16.2.2 DOM节点树

DOM将HTML文档表达为树结构，HTML文档结构好像一棵倒置的树，html标记是树的根节点，head标记、body标记是树的两个子节点，这种描述页面标记关系的树形结构称为DOM节点树。
在这里插入图片描述

16.2.3 DOM节点

HTML文档中的每一个成分都是一个节点。

整个文档是一个文档节点
每个HTML标记是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点

document对象的 documentElement 属性可以获得整个DOM节点树上的任何一个元素；
节点的 firstChild 和 lastChild 属性可以获得它的第一个节点和最后一个节点；
除了根节点，其他节点可以通过 parentNode 属性获得自己的父节点；
一个子节点的前一个节点可以用 previousSibling 属性获取，对应的后一个节点可以用 nextSibling 属性获取；
每个节点都有 nodeType 属性。

表：常用节点类型及说明

节点类型	nodeType值	说明
Element	1	元素节点，HTML元素
Attr	2	属性节点，HTML元素的属性
Text	3	文本节点，文档的文本内容
Comment	8	注释节点，注释内容
Document	9	文档节点，表示当前文档

16.2.4 DOM节点访问

通过getElementById(id)方法访问节点
通过getElementByName(name)方法访问节点
通过getElementByTagName(tagname)方法访问节点
通过form元素访问节点

16.2.5 DOM节点操作

创建和修改节点

方法	说明
createElement(tagname)	创建标记名为tagname的节点
createTextNode(text)	创建包含文本text的文本节点
createDocumentFragment()	创建文档碎片
createAttribute()	创建属性节点
createComment(text)	创建注释节点
removeChild(node)	删除一个名为node的子节点
appendChild(node)	添加一个名为node的子节点
insertBefore(nodeB,nodeA)	在名为nodeA的节点前插入名为nodeB的节点
replaceChild(nodeB,nodeA)	名为nodeB的节点替换名为nodeA的节点
cloneNode(boolean)	克隆一个节点，true表示该节点带文字，false表示该节点不带文字

节点的innerText和innerHTML属性
- innerText属性用于修改起始标记和结束标记之间的文本，例如 oDiv.innerText="中国你好！";
- innerHTML属性可以直接给元素分配HTML字符串，例如 oDiv.innerHTML="< strong> hello world!< /strong>";
- 还可以使用innerText和innerHTML属性获取元素的内容，innerText只返回文本的内容，innerHTML返回所有元素和文本的HTML代码。
获取并设置指定元素属性

方法说明
getAttribute(name) 获取元素指定属性的值，name是属性名
setAttribute(name,value) 设置元素指定属性的值，name是属性名，value是属性值

方法	说明
getAttribute(name)	获取元素指定属性的值，name是属性名
setAttribute(name,value)	设置元素指定属性的值，name是属性名，value是属性值

16.3 BOM

客户端浏览器预定义的对象统称为浏览器对象，它们按照某种层次结构组织起来的模型称为浏览器对象模型（Browser Object Model，BOM）。
在这里插入图片描述

16.3.1 window 对象

window对象位于BOM的顶层，是其他对象的父类。

window对象的方法	说明
alert(message)	告警框
confirm(qustion)	对话框
prompt(“提示信息”,默认值)	确认框
open(url,name,features,replace)	打开新的浏览器窗口或查找窗口
blur()	把键盘焦点从顶层窗口移开
close()	关闭浏览器窗口
focus()	把键盘焦点给予一个窗口
setInterval(code,interval)	按照指定周期来调用函数或计算表达式
setTimeout(code,delay)	在指定的毫秒数后调用函数或计算表达式
clearInterval(intervaID)	取消由setInterval()设置的timeout
clearTimeout(intervalD)	取消由setTimeout()设置的timeout

16.3.2 Navigator 对象

navigator对象用于获取用户浏览器的相关信息，不同浏览器所支持的navigator对象的属性和方法是不同的。

属性	说明
appName	浏览器名称
appVersion	浏览器的平台和版本信息
platform	运行浏览器的操作系统
systemLanguage	操作系统使用的语言
userAgent	由客户机发送服务器的user-agent头部的值
appCodeName	浏览器的代码名

方法	说明
taintEnabled()	是否启用数据污点
javaEnabled()	是否启用java
preference()	查询或设置用户的优先级
savePreference()	保存用户的优先级

16.3.3 Screen 对象

screen对象用于获取用户屏幕设置的相关信息。

方法	说明
availWidth	可用的屏幕宽度
availHeight	可用的屏幕高度
width	屏幕的宽度
height	屏幕的高度

16.3.4 History 对象

history对象表示窗口的浏览历史，是一个数组，其中的元素存储了浏览历史中的URL。

方法	说明
forward()	加载history列表中的下一个URL
back()	加载history列表中的上一个URL
go(number/url)	加载history列表中的某个文档

16.3.5 Location 对象

location对象用于表示浏览器窗口中当前文档的URL。

属性	描述
hash	设置或返回从井号(#)开始的URL
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL
pathname	设置或返回当前URL的路径部分
port	设置或返回当前 URL 的端口号
protocol	设置或返回当前 URL 的协议
search	设置或返回从问号(?)开始的URL(查询部分)

方法	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

location对象和document对象的location属性是不同的

通过设置location对象的属性，可以修改对应的URL部分，一旦location对象的属性发生变化，就相当于生成了一个新的URL，浏览器会尝试打开新的URL。
document对象的location属性是一个只读字符串，不具备location对象的任何特性，所以不能通过修改document对象的location属性实现重新加载页面的功能。

第17章 HTML5高级应用

17.1 HTML5 Web Storage

HTML5提供了两种在客户端存储数据的方法：持久化的数据存储localStorage，会话式的数据存储sessionStorage。

17.1.1 localStorage 对象

localStorage对象存储的数据没有时间限制，所以称为持久化存储，数据存储长期可用。在使用此类对象之前，最好先检查浏览器是否支持。

17.1.2 sessionStorage 对象

sessionStorage对象针对一个session进行数据存储，存储周期短，当用户关闭浏览器后，数据就会被删除。

localStorage对象和sessionStorage对象的方法相同，只是对象名称不同而已。

方法	说明
setItem(key,value)	保存数据
getItem(key)	读取数据
removeItem(key)	删除单个数据
clear()	删除所有数据
key(index)	得到某个索引的key

17.1.3 浏览器端数据库 IndexedDB

IndexedDB是一种轻量级NoSQL（非关系型）数据库，用来持久化大量（250MB）客户端数据。IndexedDB的操作使用js脚本，操作返回均采用异步。而localStorage和sessionStorage对象是采用同步技术实现少量（2.5~10MB）客户端数据存储。

数据库的创建与打开
window.indexedDB.open(DBname,DBversion)
连接到数据库后，request会监听三种状态：
- success（创建或打开数据库成功后绑定到指定函数）
- error（创建或打开数据库失败后绑定到指定函数）
- upgradeneeded（更新数据库后绑定到指定函数）。
创建与删除ObjectStore
ObjectStore（对象仓库，又称对象存储空间）是IndexedDB的基础，IndexedDB使用对象仓库来存储数据。
- 创建ObjectStore
  db.createObjectStore(store_name [keyPath:primaryKey,autoIncrement:true|false])
- 删除ObjectStore
  db.deleteObjectStore(store_name)
- 为ObjectStore创建索引
  store.createIndex(index_name,index_key [unique:true|false])
- 检查ObjectStore是否存在
  db.objectStoreNames.contains(store_name)
使用事务
需要使用事务在对象存储上执行所有读取和写入操作。
- 事务模式
  readonly (默认)
  readwrite
  versionchange
- 创建事务
  var transaction=db.transaction(store_name [transactionmode]);
  var objectStore=transaction.objectStore(store_name);
数据库的增删改查
数据库的增删改查都会触发两个事件，分别是success（检索请求成功）和error（检索请求失败），所以编程时需要为它们指派事件处理函数。
- 存储数据
- 增删改
  增：objectStore.add(object_name);
  删：objectStore.delete(value);
  改：objectStore.put(object_name);
  清：objectStore.clear();

读取数据
objectStore.get(value)
a. 常用方式。分配事件句柄并绑定事件处理函数。
b. 事件监听方式。分配事件句柄并绑定事件处理函数。

<!--常用方式-->
request.onsuccess=function(e){
	var books=e.target.result;
	console.log(bokks.title);
};
request.onerror=function(e){
	console.log("数据读取失败！");
}

<!--事件监听方式-->
request.addEventListener('success',function(event){
	//
},false);
request.addEventListener('error',function(event){
	//
},false);

遍历数据
openCursor()方法，异步执行，有两个事件：success和error，可以为它们指派事件处理函数。
- 非索引查找
  cursor.onsuccess=function(e){};
  cursor.onerror=function(e){};
  continue() 将光标移到下一个数据对象，已到最后一个对象，则光标指向null
  console.dir() 显示一个对象所有的属性和方法
  console.log() 输出在控制台中，方便以后的调试
- IDBKeyRange对象
  浏览器原生的IDBKeyRange对象能够生成指定范围的range对象。
  下限 lowerBound()
  上限 upperBound()
  上下限 bound()
  指定范围中只有一个值 only()
- 按索引查找
  index()方法

17.2 HTML5 Canvas画布

HTML5的canvas标记用于绘制图形，通过脚本JavaScript来完成绘图。canvas标记本身没有绘图能力，所有的绘制工作必须在JavaScript内部完成。canvas脚本作为一个容器，可通过多种方法使用Canvas绘制路径、盒、圆、字符以及添加图像。

17.2.1 canvas 标记

必须设置宽度、高度和id属性。

绘图步骤：

插入canvas标记，并设置width、height和id。
在body标记中插入script标记，在该标记中写入相关js代码。
通过id获取页面上canvas对象。
创建具有绘图功能的环境对象context，参数为2d或3d。
在绘图环境对象内绘图。

<canvas id="aCanvas" width="200" height="100"></canvas>
//js代码
var myCanvas=document.getElementById("aCanvas");	//获取Canvas对象
var conText=myCanvas.getContext("2d");	//获取绘图环境对象
conText.fillStyle="#ff0000";	//设置填充方式
conText.fillRext(10,10,150,75);	//绘制矩形
conText.strokeStyle="#00ff00";	//设置边框样式
conText.lineWidth=8;	//图形边框宽度，不加单位px
conText.strokeRect(0,0,200,100);	//绘制边框
conText.clearRect9(x,y,width,height);	//清除矩形区域

表：颜色、样式和阴影的属性和说明

属性	说明
fillStyle	填充的颜色、渐变或模式
strokeStyle	笔触的颜色、渐变或模式
shadowColor	阴影的颜色
shadowBlur	阴影的模糊级别
shadowOffsetX	阴影与形状的水平距离
shadowOffsetY	阴影与形状的垂直距离

17.2.2 canvas 坐标

canvas画布是一个二维网格，分X轴和Y轴，X轴方向从左向右，Y轴方向从上到下。绘制方法是 fillRect(x,y,width,height) 。canvas绘图环境对象的左上角坐标为 (0,0)。

17.2.3 canvas 路径

使用canvas路径绘图，绘制前需要使用beginPath()方法开始路径，然后形成绘制路径，结束后用closePath()方法关闭路径，最后才开始填充或绘制。

方法	说明
fill()	填充当前绘图(路径)
stroke()	绘制已定义的路径(边框)
beginPath()	开始一条路径
moveTo()	把路径移动到指定的点
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个点，在画布上创建从该点到最后指定点的线条
clip()	从画布剪切任意形状和尺寸的区域
quadraticCurveTo()	创建二次贝塞尔曲线
bezierCurveTo()	创建三次贝塞尔曲线
arc()	创建弧或曲线
arcTo()	创建两切线之间的弧或曲线
isPointInPath()	如果指定的点位于当前路径上，则返回true，否则返回false

<canvas id="aCanvas" width="200" height="100"></canvas>
//js代码
var myCanvas=document.getElementById("aCanvas");	//获取Canvas对象
var conText=myCanvas.getContext("2d");	//获取绘图环境
conText.beginPath();	//开始路径
conText.arc(150,150,100,0,Math.PI*2,true);	//绘制路径
conText.closePath();	//关闭路径
conText.fillStyle="rgba(255,0,0,0.75)";	//设置填充样式
conText.fill();		//填充绘图
conText.strokeStyle="rgba(0,255,0,0.50)";	//设置边框样式
conText.lineWidth=8;//图形边框宽度
conText.stroke();	//绘制边框

17.2.4 canvas 绘制线段

moveTo(x,y)
定义线段起始坐标
lineTo(x,y)
定义线段结束坐标

17.2.5 canvas 绘制文本

fillText(text,x,y)
填充文本
strokeText(text,x,y)
绘制文本轮廓
font
设置字体样式，设置方法与CSS的font属性方法相同
textAlign
文本对齐方式，值为start｜end｜left｜right｜center
textBaseline
文本垂直对齐方式，值为top｜hanging(悬挂，比top略高)｜middle｜alphabetic(默认，普通的字母基线)｜ideographic(表意基线，与bottom效果相同)｜bottom

17.2.6 canvas 渐变

//创建渐变线条
//var grad=context.createLinearGradient(xStart,yStart,xEnd,yEnd);
var grad=context.createLinearGradient(50,280,400,50);
//指定颜色停止，offset为0~1，必须使用两种或两种以上的停止颜色
//grad.addColorStop(offset,color); 
grad.addColorStop(0,"#ff0000");
grad.addColorStop(1,"#00ff00");
context.fillStyle=grad;
context.fillRect(50,280,400,50);

17.2.7 canvas 绘制图像

/*----语法----*/
context.drawImage(image,x,y);  //在(x,y)坐标点绘制图像
context.createPattern(image,type);  //图像平铺
context.clip();  //图像裁剪，只绘制封闭路径区域内的图像，不绘制路径外部图像
var image_data=context.getImageData(sx,sy,sw,sh);  //像素处理
context.drawImage(image,x,y,width,height);  //按指定宽度和高度绘图
context.drawIamge(image,sx,sy,sw,sh,dx,dy,dw,dh);  //选取图像的部分矩形区域进行绘图

/*----案例----*/
conText.beginPath();
conText.arc(150,150,100,0,Math.PI*2,true);	//绘制圆形路径
conText.closePath();
conText.clip();  //从原Image中剪裁出圆形部分图像
conText.drawImage(image,50,380);  //除了剪裁部分，其余不可见

17.3 HTML5拖放

拖放（Drag和Drop）指抓取对象以后拖到另一个位置。拖放是HTML5标准的组成部分，任何元素都能够拖放，只要设置draggable属性为true即可。

设置元素为可拖放
<img id="" src="" draggable="true">

拖放事件

事件	事件属性	说明
dragstart	ondragstart	元素开始拖动时触发
drag	ondrag	元素在拖动过程中持续触发
dragenter	ondragenter	元素进入目标元素时触发，应在目标元素监听该事件
dragleave	ondragleave	元素离开目标元素时触发，应在目标元素监听该事件
dragover	ondragover	元素停留在目标元素之中时触发，应在目标元素监听该事件
drop	ondrop	拖动操作结束，放置元素时触发，监听器负责检索被拖动的数据以及在放置位置插入数据
dragend	ondragend	元素拖动结束时触发

dataTransfer 对象
事件event对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据，可在拖放事件的事件处理程序中访问dataTransfer对象。

dataTransfer 属性	说明	值
dropEffect	拖放的操作类型，决定了浏览器的鼠标形状	copy move link none
effectAllowed	指定允许的操作	copy move link copyLink copyMove linkMove all none uninitialized
files	包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件	–
types	存储在dataTransfer对象的数据的类型	–

dataTransfer 方法	说明
setData(format,data)	存储数据
getData(format)	取出数据
clearData(format)	清除数据，可指定类型清除，也可不指定类型，清除所有数据
setDragImage(imgElement,x,y)	指定拖动过程中显示的图像

拖放操作实现步骤
1. 创建一个可拖放对象
  需要设置该元素的draggable属性为true，同时给该标记的dragstart事件设置一个事件监听器，用于存储拖放数据。
2. 设置放置对象
  放置对象至少要监听两个事件：dragover事件和drop事件。

17.4 HTML5 Web Worker

HTML5提出了Web Worker（工作线程）的概念，并且规范了Web Worker的三大特征：能够长时间运行、理想的启动性能、理想的内存消耗。Web Worker允许开发人员编写出能够长时间运行而不被用户所中断的后台程序，去执行事务或逻辑，并同时保证页面及时响应用户操作。

Web Worker 工作原理
创建Web Worker文件
创建Web Worker对象
终止Web Worker

崚嶒

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发技术第13-17章

语义特性离线与存储特性设备访问特性多媒体特性三维、图形与特效特性性能与集成特性连接特性CSS3特性JavaScript由Netscape公司的Brendan Eich（布兰登·艾奇）于1995年开发设计。JavaScript是一种脚本编程语言，主要运行在客户端，用户访问带有js的网页，网页里的js程序就传给浏览器，由浏览器解释和处理。JavaScript的特点：简单性、安全性、动态性、跨平台性事件是一些可以通过脚本响应的页面动作。
复制链接

扫一扫