1 javascript的简介
是基于对象和事件驱动的语言,应用于客户端
基于对象:提供了好多对象,可以直接拿过来使用
事件驱动:html做网站静态效果,javascript动态效果
客户端:专门指浏览器
js的特点
(1)交互性 信息的动态交互
(2)安全性 js不能访问本地磁盘的文件
(3)跨平台性 只要能够js的浏览器,都可以运行
javascript和java的区别
(1 )java是sun公司,现在oracle,js是网景公司
(2)javascript 是基于对象的,java是面向对象的
(3)java是强类型的语言,JavaScript是弱类型语言
(4)JavaScript只需解析就可以执行,java得先编译成字节码文件,在执行
JavaScript的组成
三部分组成
1 ECMAScript ECMA:欧洲计算机协会
2 BOM broswerobject model 浏览器对象模型
3 DOM document object model 文档对象模型
2 JavaScript和html结合方式(两种)
1 使用标签<scripttype="text/javascript"> ja代码;</script>
2 使用script标签 引入一个外部的js文件
创建一个js文件,写js代码
<script type="text/javascript" src="地址"></xcript>
使用第二种方式的时候,就不要在script标签里面写js代码了,不会执行
3 JavaScript的原始类型和声明变量
定义变量 都是用关键字 var
js的原始类型(五个)
string:字符串
number:数字类型
boolean:true和false
null:var date = new Date(); 获取对象的引用,null表示对象引用为空,所有对象的引用也是object
undifined定义一个变量没有赋值 var aa;
typeof(变量名称) 可以查看数据的类型
4 js的语句
js里面的这些语句
if判断语句
switch语句 支持所有的数据类型
循环语句 for whiledo-while
5 js的运算符
js里面不区分整数和小数
var str="456"alert(str-1) 相加与java相同,想减进行减法运算
提示NaN:表示不是一个数字
boolean 类型也可以操作 true相当于1 false相当于0
== 和 ===区别
做判断
==比较的只是值
===比较的是值和类型
引入知识
直接向页面输出的语句(可以把内容显示在页面上)
docment.write(内容); 可以写<br/><hr/>
可以向页面输出固定变量值,还可以输出html代码
document.write里面是双引号,如设置标签的属性需要使用单引号
7 js的数组
定义方式(三种)
第一种:var arr = [1,2,3]
第二种:使用内置对象Array var arr1 = new Array(5) //定义一个数组,数组的长度是5arr1[0]=1 .....
第三种,使用内置对象Array var arr2 = new Array(1,2,3);//定义一个数组,数组元素是12 3
数组有一个属性length 数组的长度数组的长度是可变的,可以存放不同类型的数据
8 js的函数
在js里面定义方法(三种方式) 函数的参数列表里面需要写var 直接写参数名称
第一种方式:
使用一个关键字funtion
funtion方法名(参数){
方法体
返回值可有可无(根据实际需要)
}
例:funtion test(){
Alert(“qqqq”);
}
test();
有参数:funtion add1(a,b){
varsum = a+b;
returnsum;
}
第二种方式
匿名函数:funtion(参数列表){}
var add2=funtionadd1(a,b){
varsum = a+b;
returnsum;
}
调用add2(1,2)
第三种方式(用的少)
使用js里面的一个内置对象 Funtion
Varadd=new Funtion(“参数列表”,”方法体和返回值”)
9js的全局变量和局部变量
全局变量:在script标签里面定义一个变量,这个变量在页面js部分都可以使用,方法内外部,另外的script标签都可以使用
局部变量:在方法内部定义一个变量,只能在方法内部使用,如果在方法外部调用会出未定义的错误
Ie自带调试工具,F12
10script标签的位置存放
建议把script标签放在</body>后面
如果有这样的一个需求:
在js里面需要获取到input里面的值,如果把script标签放到head
里面会出现问题
Html解析时从上到下解析的,script标签放到的是head里面,直接
在里面取input里面的值,因为页面还没有解析到input那一行,所以取不到。
11js的重载 方法名相同,参数不同
js的重载是否存在?不存在,可以通过别的方式模拟存在(arguments)
调用最后一个方法
会把传递的参数保留在arguments数组里
12总结
1什么是JavaScript基于对象和事件驱动的语言,应用于客户端
2特点:交互性,安全性,跨平台性
3JavaScript和java的区别
4组成 ECMAScriptbom dom
5Js和html的结合方式(两种)1<sctipt type=”text/javascript”></script>
2<script type=”text/javascript” src=”js路径”></script>
6js的数据类型
五种原始类型 stringnumber Boolean null undefined
定义变量使用 var
7js的语句 if switch for while do-while
8js的运算符
字符串的操作 相加:连接 相减:执行相减运算
Boolean类型相加 true:1 false:0
==和===区别 ==:判断数值 ===:判断数据类型和数值
9js的数组
三种定义方式
vararr = [1,2,”3”];
vararr1=new Array(9);
vararr2 = new Array(1,2,3);
属性 length:数组的长度
10js的函数
funtionadd(a,b){方法体和返回值;}
varadd1=function(m,n){方法体和返回值;}
varadd2 = new Function(“a,b”,”方法体和返回值”)
11js的全局变量和局部变量
全局变量:在页面中任何js的部分,都可以使用
局部变量:方法体内部定义一个变量,这个变量只能在方法内部使用
12script标签改革位置
13js的重载
13 js的string对象
创建String对象
var str = “abc”;
方法和属性(文档)
属性:length
方法
1 和html相关的方法
bold() 加粗
fontcolor(color) 设置字符串的颜色
fontsize(); 设置字体的大小
link(url) 将字符串显示成超链接 str.link("hello.html")
sub() sup() 上标和下标
2 与java相似的方法
concat() 连接字符串
charAt() 返回指定位置的字符串
indexOf() 返回字符串位置
split() 切分字符串,成数组
replace() 替换字符串 传递两个参数 第一个参数是原始字符 第二个为要替换的字符
substr() 两个参数, 表示从第几位开始向后数几位截取
substring() 同java一样,从第几位开始到第几位结束,但不包括最后一位。
14 js的Array对象
创建数组
var arr = [1,2,3];
var arr2 = new Array(3);//长度为3
var arr3 = new Array(1,2,3); //数组的元素是1,2,3
属性 length
方法 concat() 数组的连接
join() 根据指定的字符分割数组
push(元素) 想数组末尾添加元素,返回数组的新的长度。如果添加的是一个数组,这个时候把数组当做一个整体字符串添加进去
pop() 删除最后一个元素,返回最后一个元素
reverse() 颠倒数组中元素的顺序
15 js的Data对象
js里面获取当前时间
var data = new Data();
方法
toLocalString() 转成习惯的格式
getFullYear() 获取当前的年(四位数字)
getMonth()+1 获取当前的月 ,因为返回的是0-11月
getDay() 获取当前的星期 返回[0-6] 把星期日作为第一天,星期日返回的是0
getData() 得到当前的天 [1-31]
getHours() 获取当前的小时
getMinutes() 得到当前的分钟
getSeconds() 得到当前的秒
getTime() 返回的是1970 0101 至今的毫秒数
应用场景:使用毫秒数处理缓存的效果(没有缓存)http://www.baidu.com?毫秒数
16 js的Math对象
数学的运算 里面都是静态方法,使用时可以直接Math.方法();
ceil(x) 向上舍入
floor(x) 向下舍入
round(x) 四舍五入
random() ;得到随机数(伪随机数)
得到0-9的随机数 Math.floor(Math.random()*10)
pow(x,y) x的y次幂
属性 PI 圆周率
17 js的全局函数
由于不属于任何一个对象,直接写名称使用
eval(); 执行js代码(如果字符串是一个js代码,可以直接执行)
var str = "alert(1234);" eval(str);
encodeURI() 和 decodeURI() 对字符串进行编码与解码
encodeURICompanent() 和 decodeURIComponent() 对字符串进行解码与编码(与上面长度不同)
isNaN(); 判断当前字符串是否为数字 是数字为false 不是数字为true
parseInt() 类型转换,解析一个字符串并返回一个整数
18 js的bom对象
bom: broswer object model: 浏览器对象模型
属性:
navigator 获取客户机的信息 navigator.appName
screen 获取屏幕的信息
location 请求的URL地址 属性href :获取到请求的url地址location.href,设置url地址 location.href = "地址"
history 请求的url的历史记录
到访问的上一个页面 history.back(); 或者history.go(-1)
到访问的下一个页面history.forward(); 或者history.go(1)
window(重点)
窗口对象 顶层对象 (所有的bom对象都是在window里面操作的)
属性:opener获取创建这个窗口的窗口的引用
方法:
window.alert() window可以不写
confirm(message); 确认框 有返回值 true false
prompt(); 输入对话框 可传两个参数 提示内容与默认值 window.prompt("请输入内容","0")
open(“打开新的窗口的地址”,"","窗口特征,比如宽度,高度") 打开一个新的窗口
close() 关闭窗口(浏览器兼容性较差)
做定时器
setInterval("js代码","时间"); 1秒=1000毫秒 例 window.setInterval("alert('123');","3000") 每三秒调用一次
setTimeout("js代码","时间") 在毫秒数之后执行,但是执行一次
clearInterval(setInterval的返回值) 清除setInterval设置的定时器
clearTimeout(setTimeout的返回值); 清除clearSetTimeout
19 js的dom对象 文档对象模型
文档:超文本标记文档
对象:属性和方法
模型:操作使用属性和方法操作超文本标记型文档
可以使用js里面的dom里面提供的对象,使用对象的属性和方法,对标记型文档进行操作
想要对标记型文档进行操作,首先需要对标记型文档里面所有内容封装成对象
需要把html里面的标签,属性,文本内容都封装成对象
document对象:整个html文档
element对象:标签对象
属性对象:
文本对象:
Node节点对象:是这些对象的父对象,如果其他对象找不到方法,到这个对象里找
解析过程:
根据html的层级结构,在内存中分配一个树形结构,需要把html中的每部分封装成对象
DHTML :是很多技术的简称 html css dom JavaScript
20 document对象 表示整个文档
常用方法
write()方法:
1 向页面输出变量
2 向页面输出html代码
getElementById(); 通过id得到元素(标签) 进而可以得到该标签的其他属性以及给属性赋值
getElementsByName(); 通过name属性得到对象的集合(数组),之后可以通过数组循环得到集合中每一个对象
传递的参数是标签里面name的值
getElementsByTagName("标签名称") 返回的也是一个集合(数组)
注意:只有一个标签,这个标签只能使用name/Tag获取到,如果只有一个元素,这个时候不需要遍历,只需要加一个下标就可以 例:var a = getElementsByName("name")[0];
21 案例:在末尾添加节点
第一步:获取到标签
第二步 :创建li标签 document.createElement(“标签名称”)
第三步:创建文本 document.createTextNode("文本内容")
第四步:把文本添加到li下面 使用appendChild方法
第五步:把li添加到ul末尾 使用appendChild方法
22 元素对象(element对象)
要操作element对象,首先必须获取到element
使用document里面相应的方法获取
方法
获取属性里面的值 getAttribute("属性")
设置属性的值 setAttribute("属性","值")
删除属性 removeAttribute("属性") 不能删除value
想要获取标签下面的子标签
使用属性childNodes,但是这个属性兼容性很差
获得子标签的唯一有效办法,使用getElementsByTagName方法
23 Node对象属性一
nodeName
nodeType
nodeValue
使用dom解析html时候,需要html里面对的标签,属性和文本都封装成对象
标签节点对应的值
nodeType 1
nodeName:大写标签名称 比如SPAN
nodeValue:null
属性节点对应的值
nodeType 2
nodeName 属性名称
nodeValue 属性的值
文本节点对应的值
nodeType 3
nodeName: #text
nodeValue: 文本内容
24 Node对象属性二
<ul>
<li>qqqq</li>
<li>www</li>
</ul>
父节点ul是li的父节点 parentNode
子节点
li是ul的子节点
childNodes:得到所有子节点,但是兼容性很差
firstChild 获取第一个子节点
lasrChild 获取最后一个子节点
同辈节点
li直接关系是同辈节点
nextSibling:返回一个给定节点的下一个兄弟节点
previousSibling 返回一个给定节点的上一个兄弟节点
25 操作DOM树
appendChild方法
添加子节点到末尾 特点:类似于剪切黏贴的效果
insertBefore(newNode,oldNode) 方法 (父节点调用此方法)
在某个节点之前插入一个新的节点
removeChild() 删除节点 通过父节点删除
replaceChild(newNode,oldNode) 替换节点 通过父节点替换
cloneNode(blooean) 复制节点 返回一个复制后的节点(副本)
26 innerHTML属性
这个属性不是dom的组成部分,但是大多数浏览器都支持这个属性
第一个作用获取文本内容
向标签里面设置内容(可以是html代码)
27 案例 省市联动
创建一个页面,有两个下拉选择框
在第一个下拉框里面有一个时间,改变事件onchange事件,方法add1(this.value);表示当前改变的option里面的value值
创建一个二维数组 存储数据
每个数组中第一个元素是国家名称,后面的元素是国家里的城市
1 遍历二维数组
2 得到一个数组,国家与其城市的对应关系
3 拿到数组中的第一个值和传递过来的值做比较
4 如果相同,获取到第一个值后面的元素
5 得到city的select
6 添加过去 appendChild方法
创建option(三步)1 创建标签 2创建文本 添加
注意:由于每次都想要city里面添加option,每次添加之前,判断一下city里面是否有option,如果有删除