注：本文部分内容参考与《JavaScript程序设计第3版》、W3School中JavaScript参考手册
JavaScript介绍
-
-
JavaScript脚本语言：
-
JavaScript是一种轻量级的编程语言
-
JavaScript是可插入的HTML页面的编程代码
-
JavaScript插入HTML页面后，可由所有浏览器执行
-
JavaScript实现
-
JavaScript用法：
-
HTML中的脚本必须位于
<script></script>标签之间 -
脚本可被放置在HTML页面的
<body>和<head>部分中
-
-
JavaScript标签：
-
在HTML中插入JavaScript，使用
<script>标签 -
在
<script></script>之间书写代码
-
-
JavaScript使用限制
-
在HTML中，不限制脚本数量
-
通常会把脚本放置于
<head>标签中，以不干扰页面内容
-
JavaScript输出
-
JavaScript通常用来操作HTML
-
文档输出：document.write("<p>this is my first JavaScript</p>");
JavaScript语法
-
JavaScript语句：向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
-
分号：语句的分割是分号（；）。！！注意：分号是可选项，有时候看到不以分号隔开的。
-
JavaScript代码：按照编写顺序依次执行
-
标识符：JavaScript标识符必须以字母、下划线或美元符号开始，JavaScript关键字
-
JavaScript对大小写敏感
-
空格：JavaScript会忽略多余的空格
-
代码换行：不能在单词间换行
-
保留字：很多
JavaScript注释
单行注释：// 多行注释/**/
JavaScript变量
使用 var 关键字定义变量
JavaScript数据类型
typeof操作符，返回变量的类型。
-
Undefined:只有一个值，即特殊的Undefined。使用var声明变量但未对其加以初始化时
var message;
alter(message==undefined);//true -
Null:是第二个只有一个值的数据类型，这个特殊之就是Null。从逻辑角度看，null值表示一个空对象指针。
var car=null;
alter(typeof car);//object -
Boolean：只有两个字面值true和false。区分大小写。
-
Number：
-
浮点数值：就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。
-
数值范围: 最小值Number_MIN_VALUE对应转化为-Infinity（负无穷）。最大值同理
-
NaN: 即非数值（not a number）是一个特殊的值。
-
数值转换：有三个函数可以把非数值转换为数值：Number()、parseInt()、parseFloat()
-
-
String: 用于表示由零或多个16位Unicode字符组成的字符序列，字符串。可以有单双引号表示
-
Object：ECMAScript中的对象起始就是一组数据和功能的j集合。可通过new 操作符创建对象。
JavaScript操作符
-
一元操作符：递增和递减++ --，一元加减+ -表正负
-
位操作符: 按位非NOT（~）、按位与AND（&）、按位或OR（|）、按位异或XOR(^)
左移(<<)、有符号右移(>>)、有符号右移>>>
-
布尔操作符：逻辑非NOT（！）、逻辑与AND（&&）、逻辑或OR（||）
-
乘性操作符： 乘法（*）、除法（/）、求模（%）
-
加性操作符： 加法操作符（+）、减法操作符（-）
-
关系操作符：小于（<）、大于（>）、小于等于（>=）、大于等于（>=）
-
相等操作符: 相等（==）、不相等（！=）、全等（===）、不全等（！==）
-
条件操纵符：三元运算符 ？：
-
赋值操作符： 赋值操作符 = 、*=、 /=、 %= 、 += 、 - =等
-
逗号操作符：可声明多个变量，赋值有多个时返回最后一项
JavaScript语句
-
if语句
-
do-while语句
-
while语句
-
for语句
-
for-in语句
-
label语句
-
break语句和continue语句
-
with语句：作用是将代码的作用域设置到一个特定的对象中。
-
switch语句
JavaScript函数
基本语法如下：
function functionName(arg1,arg2
注：在定义时不必指定是否返回值。位于return后的任何代码都不会执行。
参数在内部用一个数组表示，ECMAJavascript函数的参数不介意传递进来多少个参数，也不在乎其数据类型。
-
理解参数：在函数体内部可通过arguments对象来访问这个参数组。
-
没有重载：后定义的函数覆盖先定义的同名函数。
JavaScript事件
什么是事件？事件可以被JavaScript侦测到的行为
主要事件：事件名均小写，为美观采用驼峰规则，函数名采用驼峰规则
| 事件 | 描述 |
|---|---|
| onClick | 单击事件 |
| onMouseOver | 鼠标经过事件 |
| onMouseOut | 鼠标移出事件 |
| onChange | 文本内容改变事件 |
| onSelect | 文本框选中事件 |
| onFocus | 光标聚集事件 |
| onBlur | 失去焦点事件 |
| onLoad | 网页加载事件 |
| onUnload | 关闭网页使事件 |
DOM简介
HTML DOM：当网页被加载时，浏览器就会创建页面的文档对象模型（document object model）
-
JavaScript能够改变页面中的所有HTML元素
-
JavaScript能够改变页面中的所有HTML属性
-
JavaScript能够改变页面中的所有CSS样式
-
JavaScript能够对页面中的所有事件做出反应
DOM操作HTML
-
改变HTML输出流：注意绝对不要在文档加载完成之后使用document.write()。这会覆盖文档
-
寻找元素：通过id或标签名找到元素。document.getElementById、document.getElementByTagName()
-
改变HTML内容：使用属性 innerHTML=" ",例：document.getElementById("pid").innerHTML=" "
-
改变HTML属性：使用属性attribute=" "，例：document.getElementById("aid").href=" "
常用方法详解：
| 方法 | 描述 |
|---|---|
| getElementsByName() | 通过name属性获取name，返回一个数组 |
| getElementByTagName() | 通过标签名获取元素 |
| getAttribute() | 获取元素属性 |
| setAttribute() | 设置元素属性 |
| childNodes() | 访问子节点 |
| parentNode() | 访问父节点 |
| createElement() | 创建元素节点 |
| createTextNode() | 创建文本节点 |
| insertBefore() | 插入节点 |
| removeChild() | 删除节点 |
| offsetHeight() | 网页尺寸（不包含滚动条） |
| scrollHeight() | 网页尺寸（包含滚动条） |
DOM操作CSS
通过DOM对象改变CSS：语法 document.getElementById(id).style.property=new style
DOMEventListener
-
addEventListener()方法：用于向指定元素添加事件句柄
-
removeEventListener()方法：移出方法添加的事件句柄
JS事件详解
事件流：
-
事件流：描述的是在页面中接受事件的顺序
-
事件冒泡：由最具体的元素接受，然后逐级向上传播至最不具体的元素的节点（文档）
-
事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收的事件。
事件处理：
-
HTML事件处理：直接添加到HTML结构中
-
DOM０级事件处理：把一个函数赋值给一个事件处理程序属性（缺点：多个事件会覆盖）
-
DOM２级事件处理：addEventListener("事件名"，"事件处理函数"，"布尔值")
removeEventListener()；true：事件冒泡----false：事件捕获 -
IE事件处理程序：attachEvent、detachEvent
事件对象:
-
事件对象：在触发DOM事件d的时候都会产生一个对象
-
事件对象event：
-
type属性:获取事件类型
-
target属性：获取事件目标
-
stopPropagation()方法:阻止事件传播（冒泡）
-
preventDefault()方法：阻止事件默认行为
-
W3School据JavaScript参考手册
JavaScript对象
-
String字符串对象：length属性，indexOf(),match(),replace(),toUpperCase(),toLowerCase(),split()
-
Date日期对象：可获取当前日期，getFullYear(),getTime(),setFullYear(),getDay(),setTime()
-
Array数组对象：concat(),sort(),push(),reverse()
-
Math对象：round(),random(),max(),min(),abs()
-
Boolean对象：toString(),valueOf()
-
Number对象：toString(),valueOf()
-
RegExp对象：详参手册
-
Functions对象：number(),isNaN(),parseInt(),parseFloat(),String(),encodeURI()
-
Events对象: 常用属性：onblur，onchange，onclick，onfocus，onkeydown，onload，onselect等
Browser对象
-
Window对象
Window对象是BOM的核心，window对象是指当前的浏览器窗口
所有的JavaScript全局对象、函数以及变量均自动生成为window对象的成员
全局变量是window对象的属性，全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一
window.innerHeright：浏览器窗口的内部高度 window.innerWidth：浏览器窗口的内部宽度
window.open()、window.close()、setInterval()、setTimeout()、alert()、scrollTo()
-
Navigator对象
window.navigator对象包含有关浏览器的信息
属性：appName返回浏览器名称、appVersion返回浏览器的平台和版本信息、cookieEnabled是否启用
方法：javaEnabled()规定浏览器是否启用Java
-
Screen对象
window.screen对象包含有关客户端显示屏幕的信息
属性：availWidth、availHeight、width、height
-
History对象
window.history对象包含浏览器的历史（url）的集合
length属性：返回URL数量、back()后退、forward()前进、go()例go(-2)，相当于单击两次后退
-
Location对象
window.location对象包含有关当前URL的信息
属性：host、hostname、href、pathname、port、protocol、search
方法：assign()加载新的文档、reload()重新加载当前文档、replace()用新的文档替换当前的文档
HTML DOM对象
DOM节点
在HTML DOM中，每个部分都是节点：
文档本身是文档节点
所有HTML元素是元素节点
所有HTML属性是属性节点
HTML元素内的文本是文本节点
注释是注释节点
-
DOM Document对象
每个载入浏览器的HTML文档都会成为document对象
document对象使我们可以从脚本中对HTML页面中所有元素进行访问
属性：body、cookie、domain、lastModified、title、URL
方法：close()、open()、getElementById()、getElementsByTagName、write()
-
DOM Element对象
在HTML DOM中，Element对象表示HTML元素。
Element对象可以拥有的类型为元素节点、文本节点、注释节点的子节点
NodeList对象表示节点列表，比如HTML元素的子节点集合
DOM Element常用属性和方法
可用于所有HTML元素上：
| 常用属性/方法 | 描述 |
|---|---|
| element.attributes | 返回元素属性的NameNodeMap |
| element.className | 设置或返回元素的class属性 |
| element.clientHeight | 返回元素的可见区域高度 |
| element.offsetHeight | 返回元素的高度 |
| element.innerHTML | 设置或返回元素的内容 |
| element.style | 设置或返回元素的style属性 |
| element.toString() | 把元素转换为字符串 |
| element.appendChild() | 向元素添加子节点，作为最后一个子节点 |
| element.getELementByTagName() | 返回拥有指定标签名的所有子元素的集合 |
| element.removeChild() | 从元素中移出子节点 |
| element.removeAttribute() | 从元素中移出属性 |
| element.setAttribute() | 把指定属性设置或更改为指定值 |
| nodelist.item() | 返回NodeList中位于指定下标的节点 |
| nodelist.length | 返回NodeList中的节点数 |
区别：clientHeight与offsetHeight
在CSS盒子模型中，外边距margin，边框border，内边距padding，内容content
height属性为内容的高度，即content.height
clientHeight为盒子内部的可视区域高度，内容+上下内边距，即content.height+padding*2
offsetHeight为盒子的高度，内容+上下内边距+上下边框，即content.height+padding *2+border *2
区别：document.body与document.documentElement
document.body返回的是DOM（文档对象模型）中的body节点，即<body>
document.documentElement返回的是DOM中的html节点，即<html>
-
DOM Attribute对象
在HTML DOM中，Attribute对象表示HTML属性。
HTML属性始终属于HTML元素
属性：例attr.X----->name、value、length等
DOM 4 警告！
在W3C DOM Core中，Attr(attribute)对象从Node对象继承所有属性和方法。
但是！在DOM 4 中，Attr对象不再从Node继承。
为了保证未来的代码安全，应避免在属性对象上使用节点对象属性和方法。
-
DOM Event对象
Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
Event Handlers事件句柄
HTML 4.0 的新特性之一是能够使HTML事件触发浏览器的行为，比如当用户点击某个HTML元素启动一段JavaScript。下面是一个属性列表，可将之插入HTML标签定义事件的行为。注：常用且同类属性只列一个
| 属性 | 此事件发生在何时 |
|---|---|
| onblur | 元素失去焦点 |
| onchange | 域的内容被改变 |
| onclick | 当用户点击某个对象时调用的事件句柄 |
| onerror | 在加载文档或图像错误时发生 |
| onfocus | 元素获得焦点 |
| onload | 一张页面或一幅图像完成加载时 |
| onmousedown | 鼠标按键被按下 |
| onselect | 文本被选中 |
| onsubmit | 确认按钮被点击 |
标准Event属性
下面列出了2级DOM事件标准定义的属性。---还有鼠标/键盘属性，详参手册。
| 属性 | 描述 |
|---|---|
| target | 返回触发此事件的元素（事件的目标节点） |
| currentTarget | 返回其事件监听器触发该事件的元素 |
| type | 返回当前Event对象表示的事件的名称 |
标准Event方法
下面列出了2级DOM事件标准定义的方法。IE的事件模型不支持这些方法。
| 方法 | 描述 |
|---|---|
| initEvent() | 初始化新创建的Event对象的属性 |
| preventDefault() | 通知浏览器不要执行与事件关联的默认动作 |
| stopPropagation() | 不再派发事件，阻止事件冒泡 |
JS面向对象
认识面向对象
-
一切事物皆对象
-
对象具有封装和继承性
-
信息隐藏
基本面向对象
函数构造器构造对象