9.JavaScript

9.1概述

JavaScript是一种基于对象和事件驱动的解释性脚本语言，具有与Java和C语言类似的语法

-一种网页编程技术，用来向HTML页面添加交互行为 

-直接嵌入HTML页面

由浏览器解释执行代码，不进行预编译

9.2JavaScript特点

可以使用任何文本编辑工具编写

由浏览器内置的JavaScript引擎执行代码

-解释执行：事先不编译，逐句执行

-基于对象：内置大量线程对象

适宜：

-客户端数据计算

-客户端表单合法性验证

-浏览器事件的触发

-网页特殊显示效果制作

-服务器的异步数据提交

文件调用方式

-代码位于单独的  .js文件 html页面引用js文件

注释 单行//  多行/* */

语句大小写敏感 使用分号或者换行结束 由表达式 关键字 运算符组成

9.3基础语法

数据类型 

运算符 语句类似java

9.4对象

对象是JavaScript中最重要的元素，JavaScript包含多种对象

对象由属性和方法封装而成

属性的使用 -使用   .运算符

对象的方法的引用 -ObjectName.method（）

9.4.1内置对象

简单数据对象 String Number Boolean

组合对象 Array Math Date

高级对象 Function RegExp

9.4.2window对象

window表示浏览器窗口 

-所有JavaScript全局对象、函数以及变量均自动成为window对象的成员

-document：窗口中显示的HTML文档对象

-history：浏览过窗口的历史记录对象

-location：窗口文件地址对象

-name：窗口名称

-opener：打开当前窗口的window对象

常用方法

-alert(),confirm(),prompt():对话框

-close(),open():关闭、打开窗口

-focus(),blur():窗口获得焦点或者失去焦点

-moveBy()moveTo():移动窗口

-resizeBy(),resizeTo():调整窗口大小

-scrollBy(),scrollTo():滚动窗口中网页的内容

定时器多用于网页动态是在、制作倒计时、跑马灯效果等

周期性时钟 Interval

一次性定时器 Timeout

9.4.3document对象

每个载入浏览器的HTML文档都会成为document对象

通过使用document对象，可以从脚本中对HTML页面中的所有元素进行访问

-document对象是Window对象的一部分，可通过window.document属性对其进行访问

BOM:浏览器对象模型，用来访问和操纵浏览器窗口，使JavaScript有能力与浏览器"对话"

-通过使用BOM，可移动窗口，更改状态栏文本，执行其它不与页面内容发生直接联系的操作

-没有相关标准，但被广泛支持

DOM:文档对象模型，用来操作文档

-定义了访问和操纵HTML文档的标准方法

-应用程序通过对DOM树的操作，来实现对HTML文档数据的操作

树根为document对象 通过document对象，来操作整个节点树

通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML

9.5DOM操作

9.5.1节点信息 

nodeName:节点名称   

-元素节点和属性节点：标签或属性名称

-文本节点：永远是#text

-文档节点：永远是#document

nodeType：节点类型

-返回数值

元素节点：返回1；属性节点：返回2；文本节点：返回3；注释节点：返回8,；文档节点：返回9

节点.nodeName 节点.nodeType   

.innerText .innerHTML

getAttribute()：根据属性名称获取属性的值      setAttribute() removeAttribute()

9.5.2元素节点的样式

style属性 className属性

9.5.3document DOM操作

如果需要操作HTML元素，必须首先找到该元素

查询节点 

-通过id查询 

方法：document.getElementById（）如果id值错误，则返回null

-通过层次（节点关系） 查询

parentNode,firstChild 和lastChild 遵循文档的上下层次结构，查找多个节点

childNodes 遵循文档的上下层次结构，查找多个节点

previousSibling 前一个同级节点

nextsibling 后一个同级节点

 -通过标签名称查询

getElementsByTagName():根据指定的标签名称返回所有的元素，若标签名称错误，则返回长度为0的节点列表

{index}定位具体的元素

 -通过name属性查询

getElementsByName():根据标签的name属性的值进行查询

创建新节点 

document.createElement(elementName)

添加新节点

parentNode.appendChild(newNode) 

parentNode.insertBefore(newNode,refNode)

删除节点

node.removeChild(childNode)

childNode.parentNode.removeChild(childNode)

9.5.4HTML DOM对象

HTML DOM定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法

HTML标签对象化 -将网页中的每个元素都看作一个对象

标准DOM与HTML DOM 

标准DOM提供了统一的操作接口

createElement appendChild setAttribute removeAttribute nodeName

HTML DOM提供了封装好的各种对象

Image Select Option

Select对象代表HTML表单中的一个下拉列表 

<select>标签即表示一个Select对象 

option对象代表HTML表单中下拉列表中的一个选项