一.JavaScript简介
JavaScript是脚本语言,在浏览器端解释并被执行的
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript历史: JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代,用户填写完一个表单点击提交,需要等待几十秒,完了服务器反馈给你说某个地方填错了......在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的Netscape(网景)公司,决定着手开发一种客户端语言,用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发,Netscape与Sun公司成立了一个开发联盟。而此时,Netscape为了搭上媒体热炒Java的顺风车,临时把LiveScript改名为JavaScript,所以从本质上来说JavaScript和Java没什么关系。
JavaScript 1.0获得了巨大的成功,Netscape随后在Netscape Navigator 3(网景浏览器)中发布了JavaScript 1.1。之后作为竞争对手的微软在自家的IE3中加入了名为JScript(名称不同是为了避免侵权)的JavaScript实现。而此时市面上意味着有3个不同的JavaScript版本,IE的JScript、网景的JavaScript和ScriptEase中的CEnvi。当时还没有标准规定JavaScript的语法和特性。随着版本不同暴露的问题日益加剧,JavaScript的规范化最终被提上日程。
1997年,以JavaScript1.1为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA,European Computer Manufactures Association)该协会指定39号技术委员会负责将其进行标准化,TC39来此各大公司以及其他关注脚本语言发展的公司的程序员组成,经过数月的努力完成了ECMA-262——定义了一种名为ECMAScript的新脚本语言的标准。第二年,ISO/IEC(国标标准化组织和国际电工委员会)也采用了ECMAScript作为标准(即ISO/IEC-16262)。
一个完整的javaScript实现由三部分构成:
1.核心(ECMAScript)
2.文档对象模型(DOM)
3.浏览器对象模型(BOM)
JavaScript的主要作用:客户端表单验证 页面动态效果 动态改变页面内容
二.网页中引用javaScript的方式
1.内部方式:<script type="text/javascript"> ......</script>,<script>的位置并不是固定的,可以包含在<head>或<body>中的任何地方
2.外部方式:将JavaScript代码写入一个外部文本中,并命名为.js的后缀,然后把此文件指定给<script >标签中的src属性
<script src=""></script>
三.变量的定义
在javaScript中用var可以定义任何数据类型的变量(弱类型语言),后面定义的变量会覆盖掉前面定义的变量,没有赋值的变量是不能直接使用的(undefined)
四.数据类型
number:无论是整数还是小数
string:无论是字符还是字符串
boolean:true或false
object:对象类型
typeOf(变量名):查看变量的数据类型
两个常用的函数:document.write("输出语句");
提示框:alert("提示框");
五.js中的内置对象
1)String对象
创建对象: var 对象名 = new 对象类型()
对象名.valueOf():默认比较的是内容是否相同
常用的方法:
charAt():查找指定位置的字符
indexOf():返回子字符串在字符串中的索引
split(""):分割字符串;返回的是一个字符串数组
substring(begin,end):截取
fontcolor("red/green"):设置当前字符串对象的字体颜色
2)Number对象
3)Boolean对象
4)Date对象
创建Date对象 var date = new Date();
常用方法:
getFullYear() ; 获取年
getMonth():月份(0~11)
getDate():获取月中的日期
getHours():时
getMinutes()分
getSeconds():秒
设置定时器:
window.setInterval("任务(函数)",时间毫秒值):每经过多少毫秒重复执行这个事务(间隔事件)
window.setTimeout("任务(函数)",时间毫秒值):经过多少毫秒后执行这个事件(超时事件)
消除定时器:
clearInterval(IntervalId):清除和setInterval有关的间隔事件
clearTimeout(TimeoutId):清除和setTimeout有关的超时事件
5)Array对象
var 数组名称(array) = [ , , , , ];
常用的两个方法:
join:将数组中的内容拼接成一个新的字符串
reverse:将数组反转
六.自定义对象
function Person(name,age){
//自定义属性
this.name = name;
this.age = age;
//自定义方法
this.speak = function(参数名){
alert("自定义方法");
}
}
//创建对象
var p = new Person("han",18);
七.js的原型属性:
每一个内置对象(Array,String,Date)都有原型属性(prototype)
给内置对象的原型属性添加一个方法,那么这个方法会自动的添加到对象中
作用:就是给内置对象追加方法
格式:内置对象.prototype.追加的方法名 = function(){.......}
八.事件编程:
1.三要素:
事件源:就是html标签
编写监听器:编写一个监听函数
绑定监听器:根据不同的事件进行绑定: onclick ondbclickonfocus ,onblur….
2.事件编程的分类:
1)和点击相关的:onclick:单机事件 ondbclick:双击事件
2)和焦点相关的:onfocus:获取焦点 onblur:失去焦点
3)和选项改变相关的:onchange:应用下拉菜单 省市区三级联动
4)onload:和页面加载相关的:
一般情况用在父标签(body),当前body里面内容加载完毕后,就会触发onload事件
5)和鼠标相关的事件:鼠标经过:onmouseover 鼠标移出:onmouseout
九.DOM编程:获取标签对象 设置标签对象的属性
获取标签对象三种方式:
1.通过document集合来获取标签对象:
all/links/forms/images
2.通过节点(Node)关系获取标签对象
常用的属性:parentNode:父节点
childNodes:子节点
firstChild:第一个子节点
lastChild:最后一个子节点
nextSibling:下一个兄弟节点
previousSibling:上一个兄弟节点
空格和换行: 节点类型是 3
标签 节点类型是 1
html注释 节点类型是 8
3.document对象的方法获取标签对象
document.getElementById(“id属性值”) ; 通过id属性获取(这种方式作用)
document.getElementsByName(“name属性值”);通过name属性获取
document.getElementsByTagName(“标签名称” ) ;通过标签名称获取(返回的是对象数组)
设置标签对象的属性:1)修改innerHTML属性:用在span,div,select标签中,给标签设置文本的
2)value属性:用在表单中<input type = "text" id = "username" value = "默认值" />
3)src属性:用在img标签中:<img src ="xxx"/>点击切换图片
4)checked属性:选中的状态(默认值:没有选中的话,false,选中了,就是true)
经常会用在多选框中:<input type = "checkbox" value="篮球" checked="checked" />
标签对象的方法:
创建节点对象:
document.createElement(“img”) ;
标签对象.setAttribute(“属性名称”,”属性值”) ;
插入相关的方法
父节点对象.appendChild(标签对象) ; 在末尾追加
在指定标签对象前面插入一个新的标签对象
父节点对象.insertBefore(新标签对象,指定标签对象) ;
删除的方法
body-->通过body节点对象获取最后一个子节点对象lastChild
父节点对象.removeChild(节点对象) ;