第三阶段-js 第三阶段-js

一、javascript的简介 1.基于对象和事件驱动的语言,应用与客户端
a.基于对象：
提供好了很多对象,可以直接拿过来使用
b.事情驱动：
html做静态效果,javascript做动态效果
c.客户端:专门指的是浏览器

2.js的特点
a.交互性
信息的动态交互
b.安全性
js不能访问本地磁盘的文件
c.跨平台性
java里面跨平台性,虚拟机,能够支持js的浏览器,都可以运行
【第三阶段-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的结合方式第一种:使用一个标签
第二种：引用外部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("")
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
vararr2 = 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标签放到后面

十、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(“”)；
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地址
-页面上安置一个按钮，按钮绑定一个事件,点击触发按钮
例：点击跳转页面

function herf1(){
location.href = "https://www.it610.com/article/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 = "https://www.it610.com/article/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下面
在

貂蝉

之前添加

詹姆斯

//获取貂蝉标签
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");
//在

貂蝉

之前添加

詹姆斯

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.设置内容