第三阶段-js
一、javascript的简介
1.基于对象和事件驱动的语言,应用与客户端
a.基于对象：
提供好了很多对象,可以直接拿过来使用
b.事情驱动：
html做静态效果,javascript做动态效果
c.客户端:专门指的是浏览器
2.js的特点
a.交互性
信息的动态交互
b.安全性
js不能访问本地磁盘的文件
c.跨平台性
java里面跨平台性,虚拟机,能够支持js的浏览器,都可以运行
d.javascript和java的区别:
java是sun公司,现在是oracle，js网景公司
javascript是基于对象的,jiava是面向对象
java是强类型的语言,js是弱类型的语言
java: int i = 10;
js： var i = 10; var m = "10";
javascript只需要解析就可以执行,而java需要先编译，再执行
3.javascript的组成部分
a.ECMAScript
ECMA:欧洲计算机协会
专门制定的js语法、语句
b.BOM
broswer object model:浏览器对象模型
c.DOM
document object model：文档对象模型
二、js和html的结合方式
第一种:使用一个标签<script type="text/javascript"></script>
第二种：引用外部Js文件<script type="text/javascript" src=".js">
注意：用引入就不要在js标签写代码了
三、js的数据类型
1.java的基本类型
2.定义变量都使用关键字var
3.js的原始类型
a.string: 字符串
b.number: 数字类型
c.Boolean：true和false
d.null: 空
e.undifined: 定义一个变量,没有赋值
4.typeof() 查看当前变量的数据类型
四、js基本语句
1.跟java一样：if、switch、while、for
五、js的运算符
1. js里面不区分整数和小数
var j = 123;
alert(j/1000*1000);
Java里面是0,而js123/1000=0.123*1000=123;
2. 字符串的相加和相减操作
a.如果相加时候,做的字符串拼接
b.如果相减是数字类的字符串类型会进行相减运算，如果是字母其他类型的会提示NaN
3. boolean类型也可以操作
a.如果设置成true,相当于这个值是1
b.如果设置成false,相当于这个值是0
4. ==和===区别
==：比较的只是值
===：比较的是值和类型
5.i++/++i和java里面一样
i++：先执行后+1
++i:先+1后执行
6.引入知识
a.直接向页面输出语句(可以把内容显示在页面上)
document.white("aaaa")
document.white("<hr/>")
b.可以向页面输出变量,固定值和html代码
六、js的数组
1.定义方式（3种）
a.var arr =[1,2,3]; var arr = [1,"d",true];
b.使用内置对象Array对象
var arr = new Array(5);
c.使用内置对象 Array
var arr2 = new Array(3,4,5);
d.可以存放不同的数据类型
七、js的函数
1.第一种方式
a.使用到一个关键字function
function 方式名(参数列表){
方法体；
返回值可又可无
}
2.第二种方式
a.匿名函数
var add = function(参数列表){
方式体和返回值;
}
3.第一种方式(用得少,了解)
a.动态函数
使用到js里面的一个内置对象Function
var add = new Function("参数列表",“方法和返回值“)
八、js的全局变量和局部变量
1.全局变量：在script标签里面定义个变量,这个变量在页面中的js部分都可以使用
2.局部变量: 在方法内部定义个变量,只有内在方法内部可以使用
九、script标签存放的位置
1.建议script标签放到</body>后面
十、js的String对象
1.与HTML相似的使用方法(查看手册)
2.与JAVA相似的使用方法
十一、js的Array对象
1.创建数组
2.属性
3.方法
十二、js的Date对象
1.在Java里面获取当前时间
Date date = new Date()
格式化:toLocaleString()
2.js里面获取当前时间
Var date = new Date();
document.write(date)
//转换格式化
document.write(“<hr/>”)；
document.write(date.toLocaleString());
3.Date使用方法(查看手册)
十三、js的Math对象
1.都是静态方法,使用直接调用Math.方法()
十四、js函数的重载(模拟)
1.重载的定义：方法名相同,参数不同
2.js不存在重载,但通过其他方式重载
3.把传递的参数保存到arguments数字里
十五、js的bom浏览器对象模型
1.navigator:获取浏览器的信息
2.screen:获取屏幕信息
3.location: 请求url地址
a.获取到请求url地址
b.设置url地址
-页面上安置一个按钮，按钮绑定一个事件,点击触发按钮
例：点击跳转页面
<input type=“button” value="tiaozhuan" onclick="herf1()";/>
function herf1(){
location.href = "hello.html";
}
4.history：请求的url的历史记录
a.访问到上一个页面
history.back();
history.go(-1)
b.访问到下一个页面
history.forward();
history.go(1)
5.window(***)
a.window.alert(): 页面弹出一个框,显示内容
简写alert()
b.confirm(): 确认框
var flag = window.confirm("显示内容")
c.prompt(): 输入的对话框
window.prompt("在显示内容","输入框里面的默认值")
window.prompt("please input: ","0")
d.open(): 打开一个新的窗口
open("打开一个新的窗口的url","","窗口的特征")
e.close(): 关闭窗口
f.做定时器
表示每三秒,执行一次alert方法
*setInterval("js代码",毫秒数);
表示在毫秒之后执行,只会执行一次
*setTimeout("js代码",毫秒数)
*clearInterval():清除setInterval
*clearTimeout(): 清除setTimeout
十六、js的dom文档模型对象
1.文档：超文本文档
2.对象：提供属性和方法
3.模型：使用属性和方法操作超文本标记文档
4.解析过程
--document对象：整个文档
--element对象：标签对象
--属性对象
--文本对象
--Node结点对象：是这些对象的父对象
如果找不到想要的方法,Node对象里面找
5.常用的方法
a.write()：
-向页面输出变量
-向页面输出html代码
b.getElementById();
通过id得到的元素
例子：var input1 = document.getElementById("nameid");
alert(input.name);
input1.value = "bbbbbb";
c.getElementsByName();
通过标签的name的属性值得到标签
d.getElementsByTagName("标签名称");
通过标签名称得到元素
e.注意的地方
只有一个标签,这个标签只能使用name获取,使用getElementsByName返回的是一个数组
var inputs2 = document.getElementsByName("name11")[0];
alert(inputs2.value);
十七、元素对象(element对象)
1.要操作element对象,首先必须要获取到element
a.使用document里面相应的方法获取
2.方法
a.获取属性里面的值
getAttribute("属性名称")
var input1 = document.getElementById("inputid");
alert(input1.getAttribute("value"));
b.设置属性的值
input1.setAttribute("class","hahah");
c.删除属性
input1.removeAttribute("name");
！不能删除value
十八、Node对象属性
* nodeName
* nodeType
* nodeValue
* 使用dom解析html,需要html里面的标签,属性和文本都封装成对象
1.标签节对应的值
* nodeName： 大写标签名称
* nodeType: 1
* nodeValue: null
2.属性结点对应的值
* nodeName: 属性名称
* nodeType： 2
* nodeValue：属性的值
3.文本结点对应的值
* nodeName： 属性名称
* nodeType： 3
* nodeValue： 属性的值
十九、Node对象属性之二
1.父节点
a.ul是li的父节点
parentNode
var li1 = document.getElementById("li1");
var ul1 = li1.parentNode;
alert(ul1.id);
2.子节点
a.li是ul的子节点
childNode: 得到所有子节点,但是兼容性很差
firstChild: 获取第一个子节点
lastChild: 获取最后一个字节点
3.同辈结点
a.li直接关系是同辈结点
b.nextSibling:返回一个给定节点的下一个兄弟节点
c.previousSibling:返回一个给定节点的上一个兄弟节点
二十、操作dom树
1.appendChild方法
a.添加子节点到末尾
b.特点:类似剪切粘贴的效果
2.insertBefore(newNode,oldNode)方法
a.在某个节点之前插入一个新的节点
b.两个参数
*要插入的节点
*在谁之前插入
c.插入一个节点,节点不存在,创建
2.1 创建标签
2.2 创建文本
2.3 把文本添加到标签下面
d.例子：
1.获取到lil标签
2.创建li
3.创建文本
4.把文本添加到li下面
5.获取到ul
6.把li添加到ul下面
在<li>貂蝉</li>之前添加<li>詹姆斯</li>
//获取貂蝉标签
var lil3 = document.getElementById("lil3");
//创建li
var lil5 = document.createElement("li");
//创建文本
var text15 = document.createTextNode("詹姆斯");
//文本添加到li下面,appendChild
lil5.appendChild(text15);
//获取到ul
var ul21 = document.getElementById("ulid21");
//在<li>貂蝉</li>之前添加<li>詹姆斯</li>
ul21.insertBefore(lil5,lil3);
e.removeChild方法：删除节点
a.通过父节点删除,不能自己删除自己
1.获取到li24标签
2.获取父节点ul标签
3.通过父节点执行删除
f.replaceChild(newNodem,oldNode):替换节点
a.通过父节点替换,不能自己替换自己
b.步骤
1.获取旧的节点
2.创建标签li
3.创建文本
4.把文本添加到li下面
5.获取父节点ul标签
6.执行替换操作
g.cloneNode(boolean):复制节点
a.操作步骤
1.获取ul
2.执行复制方法cloneNode方法复制true
3.把复制之后的内容放到div里面去
3.1 获取到div
3.2 appendChild方法
二十一、innerHTML属性
1.第一作用：获取文本内容
a. var span1 = document.getElementById("sid");
alert(span1.innerHTML);
2.第二作用:向标签里面设置内容
a.例子：向div里面设置内容
1.获取div
2.设置内容
