js
一、js简介
-
什么是js
JS:全拼JavaScript。是web开发中不可缺少的脚本语言,不需要编译就能运行(解释型语言)。这“寄生”在HTML体内,随网络传输到客户端,在浏览器内存里运行。
-
js的作用
实现页面动态效果
- 可以操作浏览器
- 可以操作网页
- JS的组成
netscape livescript 网景浏览器 Firefox JScript IE ECMA
- ECMAScript:基本语法规范
- BOM: Browser Object Model,浏览器对象模型。js代码操作bom对象的属性和方法,可以操作浏览器了
- DOM:Document Object Model,文档对象模型。js代码操作dom对象的属性和方法,可以操作网页了
- 在HTML里引入JS
4.1 内部js
<script>
alert();
</script>
4.2 外部js
<script src="js/my.js"></script>
4.3 注意:
- 一个script标签作用应该是单一的:
- 不能既引入外部js、又在标签体里写内部js
- js代码在HTML里任何位置都可以运行,但原则是:
- js越晚加载越好,建议写在body结束标签之前
二、JS基本语法
- 基本语法
1.1 变量定义
- js里所有变量定义都使用:var
- js是弱类型语言:定义变量之前,不需要声明变量类型
- js是动态类型语言:变量的类型不固定,值是什么类型,变量就是什么类型
1.2 数据类型
- 基本数据类型
- number:数字类型
- boolean:布尔类型
- string:字符串类型
- undefined:未定义类型,只有一个值:undefined
- object:对象类型
- js里提供了9个内置对象(下节详细说)
- 使用关键字:new 创建对象。比如:var date = new Date();
1.3 运算符
js的运算符和Java非常相似,也有:+, -, *, /, +=, -=, *=, /=, =, !=, &&, ||, !, >, >=, <, <=, ==。而且用法也基本一样。
不同的有:
- == 和===:
- ==:只比较值。只要值一样,就是true
- ===:(全等)比较值和类型。只有值和类型都一样,才是true
- ±*/:
- +:和Java的是一样的。如果有字符串的+,是字符串的拼接
- -*/:如果有字符串,js会转换成数字之后再运算
- 如果转换数字失败,结果是NaN (Not a Number)
- 如果除法时,除以0,结果是Infinity(表示数字无穷大)
1.4 流程控制语句
js的流程控制语句和Java非常相似,也有:if, else, else if, for, switch, while,…。而且用法也一样.
不同的有:
- if判断:
- 判断条件可以是任何类型的数据
- false, 0, “”, null, undefined 是false;其它都是true
- 函数(重点)
2.1 命名函数/普通函数
-
定义
function 函数名(形参1, 形参2,…){
//函数体的代码
return 结果;
} -
调用
var result = 函数名(实参1,实参2,…)
2.2 匿名函数
没有名称的函数,叫匿名函数
-
把匿名函数赋值给一个变量,通过变量名调用函数
var fn = function(a, b){
return a+b;
}var result = fn(1, 2);
-
把匿名函数作为另外一个函数的实参传递进去
//让浏览器每间隔2秒,执行一次函数:弹窗一次
setInterval(function(){
alert();
}, 2000);
2.3 js的函数没有重载
- js函数没有重载
- 通过函数隐含变量arguments得到所有实参数组
- 事件(重点)
3.1 事件相关的概念
- 事件源:被监听的对象。一般是标签或者是js对象
- 事件(监听器):被监听的对象上发生的动作或者状态变化
- 响应行为:监听到事件源上动作/状态,要执行的代码。要编写的代码
比如:页面上一个按钮,按钮上边发生一件事:被点击了, 弹出一个窗口
事件源是按钮, 事件是能够监听单击动作的一个监听器, 响应行为是弹窗
3.2 js提供的常见事件
事件(监听器) 事件描述
onclick 监听用户在某标签上单击的动作
ondblclick 监听用户在某标签上双击的动作
onsubmit 监听用户在某表单上提交表单的动作
onchange 监听用户在某表单项上更改表单项的值 的动作,通常用于监听下拉框被改变的动作
onload 监听浏览器把页面加载完成 的状态变化
onfocus 监听用户把光标点进了某标签
onblur 监听用户把光标移走了
3.3 js注册/绑定事件到事件源
监听器事件,必须要绑定到事件源上,才能够监听到事件源上发生的动作或者状态变化。
-
普通函数方式
三、操作浏览器:JS的bom对象
- bom对象简介
BOM:Browser Object Model,浏览器对象模型。js提供的一些对象,可以调用这些对象的方法和属性,来操作浏览器,完成js的第一大功能。
- window:浏览器窗口封装成的对象
- location:浏览器地址信息封装成的对象:页面跳转
- history:浏览器历史记录对象:历史记录切换
- navigator:浏览器信息对象:可以获取浏览器内核、版本等信息
- screen:浏览器屏幕显示信息对象:浏览器的位置大小等
- bom对象的使用
2.1 window对象
2.1.1 让浏览器弹窗
- 普通弹窗:alert(string)
- 没有返回值
- 确认弹窗:confim(string)
- 确定返回true;取消返回false
- 输入弹窗:prompt(string)
- 确定返回输入的内容;取消返回null
2.1.2 让浏览器开启定时器
- 执行多次的定时器
- 开启定时器:
var timer = setInterval(函数对象, 间隔毫秒值)
让浏览器,每间隔指定的毫秒值,执行一次函数对象的内容 - 取消定时器:
clearInterval(timer);
- 开启定时器:
- 执行一次的定时器(延时器)
- 开启定时器:
var timer = setTimeout(函数对象, 延迟毫秒值)
让浏览器,延迟指定毫秒值之后,执行函数的内容 - 取消定时器:
clearTimeout(timer);
- 开启定时器:
2.1.3 提供了一些全局函数
- parseInt(string):转换成整数
- parseFloat(string):转换成小数
- eval(string):把字符串作为js代码执行一次
2.2 location对象(重点)
- 获取当前网址:var url = location.href;
- 设置当前网址(网页跳转):location.href = “http://www.baidu.com”
- 在新窗口打开页面:window.open(“http://www.baidu.com”)
- 刷新当前页:location.reload()
2.3 history对象(了解)
- 前进一步:history.forward()
- 后退一步:history.back()
- 切换n步:history.go(n)
- n:如果为正整数,表示前进n步
- n:如果是负整数,表示后退n步
四、操作网页:JS的dom对象
-
dom对象简介
-
dom对象操作网页
2.1 操作标签
2.1.1 获取标签(重点)
- 根据id获取一个:document.getElementById("id值 ")
- 根据name获取一批:document.getElementsByName(“name属性值”)
- 根据标签名称获取一批:document.getElementsByTagName(“标签名称”)
- 根据类名获取一批:document.getElementsByClassName(“类名”)
注意:
getElementsByxxx()类的方法
document对象可以使用:表示从整个网页里查找
Element对象也可以使用:表示从某个标签里查找
2.1.2 创建标签
var item = document.createElement(“标签名称”);
注意:创建出来的标签,不会直接显示到页面上。要想显示,就必须要插入到dom树上
2.1.3 插入标签
父标签对象.appendChild(子标签对象)
2.1.4 删除标签
标签对象.remove()
2.1.5 操作标签体(重点)
- 获取标签体:var html = 标签对象.innerHTML;
- 设置标签体:标签对象.innerHTML = “
HTML代码会生效
”
设置标签体,是覆盖式设置。
2.2 操作属性(重点)
2.2.1 获取属性
- var value = 标签对象.属性名
- var value = 标签对象.getAttribute(“属性名”)
2.2.2 设置属性
- 标签对象.属性名 = 值
- 标签对象.setAttribute(“属性名”, 属性值)
2.2.3 删除属性
- 标签对象.removeAttribute(“属性名”)
注意:
通过.属性名的方式操作属性,应用更简单更普遍
如果.属性名的方式不能操作,就使用Attribute相关的方法进行操作
1. 属性名是关键字的属性,.属性名方式不能操作
2. 自定义的属性,.属性名的方式不能操作
五、JS的引用数据类型(内置类)
- 引用数据类型简介
js里总共有9个引用数据类型
名称 介绍
Array 数组
Boolean boolean的包装类
Date 日期
Math 数学工具
Number number的包装类
String string的包装类
RegExp 正则表达式
Functions 全局函数
Events 事件
- 引用数据类型的使用
2.1 Array数组
-
创建数组对象
var arr1 = new Array();//创建长度为0的空数组
var arr2 = new Array(3);//创建长度为3的空数组
var arr3 = new Array(“a”, “b”);//创建数组,并初始化元素var arr = []; var arr = ["a","b"];
-
常用属性
- length:
- 获取数组的长度:var len = arr.length;
- 设置数组的长度:arr.length = 5;
- 如果是扩容了,那么新扩容的元素的值是undefined
- 如果是收缩了,是截取前n个
- length:
-
常用方法:
- cancat():把多个数组合并成一个
var arr = arr1.concat(arr2, arr3); - join():把数组里的元素拼接成字符串,按照指定的分隔符进行分隔
var str = arr.join(","); - reverse():把数组里的元素顺序进行反转
注意:方法直接在原数组里颠倒顺序,没有返回值
arr.reverse(); - sort():数组里的元素进行排序。
注意:
默认是以字符的ASCII进行排序的
方法直接在原数组里排序,没有返回值
arr.sort();
- cancat():把多个数组合并成一个
2.2 Date日期
- 创建日期对象
var date = new Date();//当前日期当前时间
var date = new Date(y,M,d);//创建指定日期的时间。y:年; M:月,从0开始;d:日
var date = new Date(y,M,d,H,m,s);//创建指定日期指定时间。H:时;m:分;s:秒 - 常用方法:
- toLocaleString():转换成本地日期格式的字符串
- getTime():获取毫秒值
- setTime(ms):以毫秒值设置一个日期对象
2.3 Math数学工具
- 不需要创建对象,直接使用其属性和方法
- 常用的属性和方法:
var v = Math.PI;//3.14xxx 获取圆周率
v = Math.abs(-3);//3 求绝对值
v = Math.ceil(3.00000000001);//4 向上取整
v = Math.floor(3.999999); //3 向下取整
v = Math.round(3.49); //3 四舍五入
v = Math.random();//随机数:[0, 1)
v = Math.random() * 10 + 90;//90~100的随机数
2.4 RegExp正则表达式
- 创建正则表达式对象
var reg = new RegExp(“正则表达式字符串”);
var reg = /正则表达式/; - 常用的方法
- test(string):校验字符串的格式是否匹配正则表达式
- 返回值:boolean。校验通过是true;否则 是false
- test(string):校验字符串的格式是否匹配正则表达式