JavaScript简介
*基于对象和事件驱动的脚本语言，应用于客户端
-基于对象：
**提供好了可以直接拿过来使用的很多对象
-事件驱动：
**html做网站静态效果；JavaScript动态效果
-客户端：转职浏览器
*js的特点
（1）交互性——信息的动态交互
（2）安全性——js不能访问本地的磁盘文件
（3）跨平台性——java的跨平台靠虚拟机；JavaScript靠浏览器
*JavaScript与Java的区别
（1）Java是sun公司，现在是Oracle；js是网景公司
（2）JavaScript是基于对象的，Java是面向对象的
（3）java是强类型的语言，js是弱类型的语言
（4）java需要先编译成字节码文件
*JavaScript的三部分
（1）ECMAScript——ECMA：欧洲计算机协会，指定js语法语句
（2）BOM——browser object model:浏览器对象模型
（3）DOM——document object model:文档对象模型
js和html的两种结合方式
第一种——使用标签<script type="text/javascript">js代码</script>
第二种——使用script标签引入一个外部js文件<script type="text/javascript" scr="js文件位置">这里写代码没
用 不执行
js的原始类型和声明变量
定义变量：都是用关键字var
**js的原始类型（五种）
-string：字符串 var str="abc";
-number：数字类型 var num=123;
-boolean：true或false var flag=true;
-null：表示对象引用为空，所有对象的引用也是object
-undefined：定义一个变量，没有复制
**typeof();查看当前变量类型
js的语句
*if判断语句：与java相同,
*swith语句：java从jdk1.7开始支持string；JavaScript都支持
*循环语句（for while do-while）for(var mm=0;mm<5;mm++);
*自增自减：与java一样
*运算符：
**js里面不区分整数和小数 123/1000*1000 是123，而不是java里的0
**var str="456"; str+1 是"4561" str-1 shi "455"
***相加做的是字符串相加；详见做的是减法
**Boolean参与加减法运算：true是1，false是0
*==与===区别：===带数据类型比较
*输出语句：document.wirte();
*js的数组：
***var arr=[1,"2",true];
***使用内置对象Array对象：var arr1 = new Array(5);arr1[0]="1";
***var arr2=new Array(3,4,5);
js的函数
定义方法（三种）：
**第一种 function 方法名(参数列表){
方法体;
返回值（可有可无）；
}
**第二种 匿名函数
function(){
方法体和返回值
}
var add3=function(m,n){alter(m+n);} add3(5,6);
**第三种 动态函数
使用js内置function对象
var add=new Function("参数列表","方法体跟返回值");
var add4=new Function("x,y","var sum;sum=x+y;return sum;");alter(add4);
js的全局变量与局部变量
**全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
-在方法外部使用，在内部使用，在另一个script标签内使用
**局部变量：在方法内部定义，在方法内部有效
script的位置
建议放在body后面
js的重载问题
没有重载
小练习代码
js的String对象
**创建String对象
***var str="abc";
**方法和属性
***属性 length，字符串长度
***方法
（1）与html相关的方法
-bold()，加粗
-fontcolor(color)，设置颜色
-fontsize(x)，设置字体大小。x为1-7
-link(url)，将字符串显示成超链接
-sub()，下标
-sup()，上标
（2）与java相似的方法
-concat(str)，连接字符串，str为第二个字符串
-charAt(x)，返回指定位置的字符，x从0开始，越界返回空
-indexOf(str)，返回字符位置，不存在返回-1
-split(char)，分割字符串成数组,char为原字符串中的分隔符，返回值为数组
-replace(str1,str2)，替换字符串，将str1替换为str2
-substr(a,b)，从a开始向后截取b位
-substring(a,b)，截取[a,b)从a到b截取
js的Array对象
**创建数组的三种方法
-var arr1=[1,2,3];
-var arr2=new Array(3);//长度为3
-var arr3=new Array(1,2,3);
**属性
-length 长度
**方法
js的Date对象
**var date =new Date();
方法
toLocaleString() 转换成本地时间格式（跟java一样）
getFulYear() 得到四位年份
getMonth() 得到0-11
getDay()得到一周中的哪天 返回值0-6 周日是0
getDate()得到当前的天 1-31
getHours()得到当前的小时
getMinutes()分钟
getSeconds()秒
getTime()返回19700101至今的毫秒数 应用场景:使用毫秒数处理缓存的效果
js的Math对象
*数学里的运算
**里面全是静态方法 通过Math.方法()直接使用
Math.floor((Math.random()*10) -0~9的随机数
js的全局函数
*由于不属于任何一个对象，直接写名称使用
**eval();执行内容为js代码的字符串
**isNaN(); 是数字返回false
js的函数重载
**重载：方法名相同 参数不同
**js不存在重载，会调用最后一个方法，可以通过其他方式模拟重载
**js会把传递的参数保存到arguments里
function add1(){
if(arguements.length == 2){
return arguements[0]+arguements[1];
}else if(arguements.length == 3){
return arguements[0]+arguements[1]+arguements[2];
}else if(arguements.length == 4){
return arguements[0]+arguements[1]+arguements[2]+arguements[3];
}
}
js的bom对象
**bom:broswer object model浏览器对象模型
**有哪些对象？
***navigator:获取客户机的信息（浏览器信息）
***screen:获取屏幕的信息
***locatoion:请求url地址
-href属性
location.href
-设置url地址
--<input type="button" value="tiaozhuan" onclick="href1()"/>
function href1(){
location.href="hello.html";
}
***history:请求url的历史记录（）
-到访问的上一个页面
history.back();
history.go(-1);
-到访问的下一个页面
history.forword();
history.go(1);
***window（重点）
*窗口对象
*顶层对象（所有的bom对象都是再window里面操作的 --window.location.href）
**方法
-window.alter();提示框
-window.confirm("内容");确认框,确定返回true
-prompt(text,default);输入对话框
-open(URL,name,窗口特征,replace);打开一个新的窗口
-close();关闭窗口
-做定时器
*setInterval("js代码",毫秒数);每设置时间执行一次案例：显示当前时间
*setTimeout("js代码",毫秒数);在毫秒数之后执行一次
**clearInterval();清楚setInterval设置的定时器
var id1=setInterval("alter("123");",3000);
function clear2(){
clearInterval(id1);
}
**clearTimeout();清除setTimeout设置的定时器
js的dom对象
*dom：document object model：文档对象模型
**文档：标记型文档（html xml）
**对象：提供属性和方法
**模型：使用属性和方法操作超文本标记型文档
***可以使用js里面的dom提供的对象，使用这些对象的属性和方法对标记型文档进行操作
***想要对标记行文档进行操作，首先需要对标记行文档里面的所有内容封装成对象
---需要把html里面的标签，属性，文档内容都封装成对象
***如何使用dom分析html
根据html的层级结构，在内存中分配一个属性结构，需要把html中的每部分封装成对象
-document对象:整个文档
-element对象：标签对象
-属性对象
-文本对象
--node节点对象：这个对象是这些对象的父对象
***如果在对象里面找不到想要的方法，这个时候就到Node对象里面去找
*DHTML：是很多技术的简称
**html：封装数据
**css：使用属性和属性值设置样式
**dom：操作html文档（标记型文档）
**javascript：专门指的是js的语法语句（ECMAScript）
document对象
*表示整个的文档
**常用方法
***write()方法：向页面输出变量，html代码
***getElementById(id); 通过id得到元素（标签）的到id值的对象，返回一个object。
***getElementsByname(name);通过name得到对象集合（数组）
***getElementsByTagName(TagName);通过标签名字得到对象集合
注意只有一个元素返回的时候?????
元素对象(Element对象)
**要操作元素对象，首先必须要获取到element
-使用document方法获取
**方法
***获取属性里面的值(getElementById)
getAttribute("属性名称");
***设置属性里面的值
setAttribute("class","123456");
***删除属性
removerAttribute("class");//不能删除value
***想要获取标签下面的子标签
属性childNodes的兼容性很差（回车空格之类的）
获得标签下面子标签的唯一有效方法，使用getElementsByTagName();方法
Node对象
*nodeName
*nodeType
*nodeValue
*使用dom解析html时候，需要html的标签属性文本封装成对象
*标签节点对应的值
nodeType:1
nodeName:大写标签名称
nodeValue:null
*属性节点对应的值
nodeType:2
nodeName:属性名称
nodeValue:null属性的值
*文本节点对应的值
nodeType:3
nodeName:#text
nodeValue:文本内容
*父节点 parentNode
*子节点 childNodes:得到所有子节点 firstChild,lastChild
*同辈节点 nextSibling 下一个
previousSibling 上一个
****dom树操作***
**appendChild方法
-添加子节点到末尾
-类似与剪切黏贴的效果
**insertBefore(newNode,oldNode)方法
-在某个节点之前插入一个新的节点
-参数（要插入节点，在谁之前插入）
-创建节点(创建标签，创建文本，添加)
**removeChild(要删除的对象)删除节点
**replaceChild(newNode,oldNode)替换节点
**cloneNode(boolean)复制节点，参数表示是否复制子节点
**innerHTML属性
-它不是dom的组成部分，但是大多数浏览器都支持
*第一个作用：获取文本内容
document.getElementById(“sid”).innerHTML;
*第一个作用：向标签里设置内容
document.getElementById(“sid”).innerHTML=“123456789”;
扫一扫
3569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
