JavaWeb之javaScript

JavaScript

JavaScript

js简介

• js是基于对象和事件驱动语言(脚本)
• 基于对象，提供了很多对象，可以直接使用
• 事件驱动，动作触发时，要执行的功能，可以理解为“监听器”
• js特性
• 交互性，数据信息的交互
• 安全性，js本身是不能访问客户端本地磁盘的
• 跨平台，通过浏览器实现跨平台

JavaScript结构

• ECMAScript
• ECMA：欧洲计算机协会
• script
• BOM
• browser object model
• 浏览器对象模型
• DOM
• document object model
• 文档对象模型

js的使用

• JavaScript与HTML结合使用
• 使用方式
• 使用script标签

• 导入script文件

• 如果在script标签中导入js文件，就不能在此标签中写js代码
• js的原始类型
• string
• 字符串
• var str = "hello"
• number
• 数值
• var shu = 10
• var xiaoshu = 3.14
• boolean
• 布尔
• var bool = true
• null
• 作用在对象身上
• var date = new Date()
• undifined
• 未知的数值
• 在js中，没有数据类型匹配，在js中定义变量或对象时，统一使用var
• typeof工具方法，查看当前变量是什么类型的

js语句

• if
• switch
• for
• while
• do...while

js运算符

• 大部分和Java一样 ~（-……-）||~
• 与Java不同的地方
• 整数区别：Java整数有取整现象，但是js中不存在(js没有数据类型)
• 字符串区别：在Java中使用字符串‘+’操作，字符串连接，js一样。但是在使用‘-’运算符时，Java会报错，js：NaN(表示不是一个数字)
• 布尔区别：在js中true可以理解成一切非零值，false理解成零值，但是在Java中不可以，Java是强类型语言，类型不同不能比较
• ‘==’和‘===’的区别，在js中‘===’需要判断类型是否相同，类型相同后继续比较数值是否相等，而Java中，根本就没有三个等号啊，秋梨膏

js中的数组

• Java中的数组 int[] arr = new int[10]
• js中的数组 var arr=[10,"hello",3.14]        var arr = new Array(3,4,5)
• 常用方法
• join(String)：将数组中的每个元素与指定参数相连接，形成一个字符串
• push()：将指定参数数据添加到数组的尾部
• pop()：将数组的最后尾部数据弹出
• reverse()：将数组的数据翻转

js中的函数

• 在定义函数的时候需要使用关键字
• function函数名称(参数列表){函数体;返回值;}
• 参数列表中的每个形参是不需要指定var

js中的String对象

• js中的字符串与Java中的String类相似
• bold：设置字符串加粗
• fontcolor：设置字符串颜色
• link：设置字符串链接
• forsize：设置字符串大小
• sub：设置字符串下角标
• sup：设置字符串上角标
• 等等

• 字符串常用操作方法
• 大部分和Java相差不大
• charAt()：查找字符
• indexOf()：查找索引
• split()：截取
• length()：长度
• concat()：连接
• replace()：替换

时间

• Date表示时间
• 也需要new Date()
• toLocaleString()转换成本地时间
• getFullYear()：获取年
• getMonth()+1：获取月份 -- 默认是0-11
• getDate()：获取日
• getHours()：获取时
• getMinutes()：获取分
• getSeconds()：获取秒
• getDay()：获取星期 0-6（0指星期日）
• getTime()：获取时间戳

js中的全局函数

• eval(String)：可以将String参数以js的方式进行解析
• encodeURL(String)：对字符串进行编码
• decodeURL(String)：对编码进行转换成字符串
• isNaN()：判断是否为一个数字
• parelnt()类型转换

js中的BOM

• 什么是BOM
• browser object model 浏览器对象模型
• 常用操作
• navigator：获取客户端浏览器相关信息
• screen:获取客户端用于显示的信息，常用的是获取屏幕的分辨率
• location：控制浏览器的URL地址栏，可以使用href属性设置页面动态地址
• history：访问浏览器的历史记录(只限于当次使用'后退、前进、刷新')
• 前置history.back();history.go(-1);(可以理解为前进)， 后置history.forward();history.go(1);(可以理解为后退)
• window
• 由与window对象是js核心对象，在访问window对象下的方法时，不需要window调用
• confirm()：确认框 -- 返回值Boolean参数String
• alert()：弹窗
• var url = prompt("提示信息"，"默认值") -- 返回值是获取输入框中的数据
• open( URL , "保留参数，一般给空" , "(宽，高)" ，"Boolean 也可不给")
• close()：关闭窗口
• opener.close()：关闭关联/弹出窗口
• close方法兼容性比较差
• 定时器
• setInterval(Striing，int，第三个用的少，可以不写 ) -- 循环定时器
• setTime -- 只执行一次

js中的DOM

• js中的DOM对象主要针对于页面文档
• 当页面被加载时，浏览器会将页面中的标签，生成节点对象，多个嵌套标签构成"文档树"(DOM树)
• 整个文档对象称为：document
• 元素对象：Element(又称为"标签对象")
• 属性对象(id、class等等)
• 文本对象
• 节点对象：Node -- 是所有对象的父类
• 常用方法
• wrile() -- 向页面输出数据，在输出数据时，可以输出常量/变量的数据，同时也可以在数据中体现出html标签
• getElement(标签的id) -- 通过标签id获取标签对象
• getElementsByName(标签的name属性) -- 根据标签的名称获取标签对象 返回值：标签对象数组
• getElementsByTagName(标签名称) -- 根据标签的名称获取标签对象 返回值：标签对象数组
• 节点操作
• 可以使用DOM对象来对整个文档进行操作
• 创建节点对象
• document.createElement("标签名") -- 属性对象
• document.createTextNode("数据") -- 文本对象
• 将对象添加
• 父节点.appendChild(新节点)
• 操作对象常用方法
• createElement(标签名称) -- 创建标签对象节点
• createTextNode(文本数据) -- 创建文本对象节点

• 元素对象
• DOM树中，每一个标签所对应的节点对象被称为"元素对象"
• 常用方法
• getAttribute("属性对象名称" -- 获得属性对象的值)
• setAttribute("属性对象名称","值") -- 可以根据属性对象名修改其值
• removeAttribute("属性对象名称" -- 根据属性对象名称删除属性对象)
• 获取子标签
• childNodes() -- 获取整个DOM树下所有的子标签
可以使用此方法获取子节点，但是兼容性不是很好
• 可以使用getElementsByTagName()方法来实现此功能

• Node操作
• 在操作节点时不知道是属于哪种类型的节点时，可以使用Node节点来进行存储
• Node对象结构
• nodeName
• nodeType
• nodeValue
• 三种情况
• 标签节点
• nodeType -- 对应值：1(代表标签对象)
• nodeName -- 标签名称(全大写形式存储)
• nodeValue -- null
• 属性节点
• nodeType -- 对应值：2(代表属性对象)
• nodeName -- 属性名称
• nodeValue -- 属性值
• 文本节点
• nodeType -- 对应值：3(代表文本对象)
• nodeName -- #text
• nodeValue --文本内容
• Node节点操作
• 在DOM树结构中，可以通过制定的接地那对象获取相应结构
• 父节点 ：parentNode()
• 子节点：firstChild()、lastChild()
• 兄弟节点、同级节点
• 下一个节点：nextSibing
• 上一个节点：previousSibing
• 注意：在ul和li结构中不能加载文本，所以在两个节点中中间提供一个文本节点
• 添加一个子节点：appendChild()
• 插入节点：insertBefore(newNode,oldNode)
• 在指定节点之前，插入一个新节点，参数一新节点，参数二现有节点
• 移除指定节点：remove()
• 移除指定的子节点，移除节点时，不能自己移除自己的节点
• 替换节点：replaceChild(newNode,oldNode)
• 替换指定的节点，参数一新节点，参数二要被替换的节点
• 克隆(复制节点)节点：cloneNode(Boolean)
• 克隆、复制一个节点，参数为Boolean，true表示克隆
• var clone_ul = ul.cloneNode(true);
• getAttributeNode() -- 获取属性节点方法
• 操作文本的方法
• innerHTML
• 可以解析HTML
• innerText
• 可以解析不能解析HTML