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表单中下拉列表中的一个选项