[TOC]
1. js的声明和引入
- 在head标签中使用script标签声明js代码域
- 在head标签中使用script标签引入外部声明好的js文件
<!DOCTYPE html>
<html>
<head>
<title>js引入</title>
<script type="text/javascript">
// js代码域
</script>
<script src="js文件的相对路径" type="text/javascript" charset="utf-8"></script>
<!-- 不能二合一 -->
</head>
<body>
</body>
</html>
2. js的变量
2.1 变量的声明
在js中变量的声明只有关键字var，声明的变量可以接收任意类型的数据
js为什么是弱类型语言
js运行在客户端，浏览器上，使用弱类型可以节省客户端在存储上的效率提升
2.2 变量的使用
- 命名和java一样，见名知意
- 变量名严格区分大小写
- 可以省略结束符
; - 可以有同名变量，但新值会覆盖旧值
2.3 数据的类型
js中变量没有类型，但数据是有类型的，常见的有：
- number:数字类型
- string:字符串类型
- boolean:布尔类型
- object:对象类型
查看某个变量存储的数据类型，使用关键字typeof
2.4 特殊的数据值
- undefined:在变量未赋值的情况下，默认是undefined
- NaN:在使用number()强转时，如果传入的不是一个数据，返回NaN（Not a Number）,并且NaN是number类型的
- null:空，是object类型的
3. 变量运算
3.1 基本运算
- 数值运算：+,-,*,/,%,++,--
- 链接符运算：+
- 逻辑运算：==,!=,>,<,>=,<=,&&,||,&,|,!
3.2 特殊运算
3.2.1 等值符：==
先判断类型，如果类型不一致，使用number()强转后再比较内容，内容一致则true,不一致false
如果类型一致，直接比较内容。内容一致true,内容不一致false
3.2.2 等同符：===
先判断类型，类型不一致直接false,类型一致再比较内容，内容一致则true,内容不一致false
4. 逻辑控制语句
和java一致，只不过在声明变量时，记得用var声明
5. 函数的声明和使用
5.1 函数的声明
声明一：
function 函数名（形参1，形参2...）{执行体}
声明二：
var 变量名 = new Function("形参1"，"形参2"..."执行体");
从这种方式可以看出，在js中函数也是对象
声明三：
var 变量名 = function(形参1，形参2...){执行体}
5.2 函数的参数
js中实参的传递个数可以和形参个数不匹配，这样不会报错，但是会根据顺序赋值
局部变量；在函数内部和形参声明的变量，在函数内有效
全局变量：在全局区声明的变量(即声明的js代码区)
5.3 函数的返回值
在js中如果有返回值，直接返回；没有返回值，则默认返回undefined
5.4 函数的执行符
函数的执行符就是()
5.5 函数作为参数传递
因为函数在js中也是对象，而对象是可以作为实参传递的，所以在js中函数也可以作为参数传递
注意：如果传递时，没有使用执行符()，则函数作为对象使用，如果使用了执行符，则这个函数对象参数要作为函数执行
6. 数组
6.1 数组的声明
// 数组的声明
// 1.声明空数组
var arr1 = new Array();
// 2.声明指定长度的数组
var arr2 = new Array(5);
// 3.声明带有指定初始元素的数组
var arr3 = new Array(1,2,3,4,5);
// 4.直接声明
var arr4 = [1,2,3,4,5,6];
6.2 数组的使用
- js的数组在使用的时候可以不用指定长度，即数组的长度不是固定的；
- js的数组可以储存任意类型的数据；
- 利用数组的角标进行赋值和取值；
- 数组在进行赋值时，即使角标不是连续的，也不会报错，会自动用空补齐；在取值时，如果使用一个没有内容的角标，打印undefined
6.3 数组的length属性
获取数组的长度：数组名.length;
操作数组的长度：数组名.length = 新长度;
注意：如果长度减小，自动从后进行缩减；如果长度增加，则自动用空补齐
6.4 数组的遍历
方式一：使用for循环
方式二：使用for-in循环；注意：这种方式每次得到的是角标，不是元素
function testFor(){
var arr = [1,"a", "b", 123];
for (var i = 0; i < arr.length; i++) {
alert(arr[i]);
}
}
function testfor2(){
var arr = [1,"a", "b", 123];
for(var i in arr){
alert(arr[i]);
}
}
6.5 数组的常用方法
6.5.1 concat方法
使用concat方法链接数组
var a = [1,2,3,4];
var b = ["雾霾", "冬至", "饺子"];
var c = "javascript";
//使用concat方法链接数组
var d = a.concat(b,c);
6.5.2 pop方法
使用pop方法移除数组的最后一个元素
var a = [1,2,3,4];
alert("移除的元素是：" + a.pop());
alert("移除后的数组是：" + a);
6.5.3 push方法
在数组后边添加一个元素
var a =[1,2,3,4];
alert("使用push方法添加后的数组长度：" + a.push("饺子"));
alert("新数组的内容：" + a);
6.5.4 shift方法
在数组首位删除一个元素
var a = [1,2,3,4];
alert("使用shift方法移除的第一个元素是：" + a.shift());
alert("移除第一个元素后的数组是：" + a);
6.5.5 unShift方法
在数组首位添加元素
var a = [1,2,3,4];
alert("使用unShift方法在数组首位添加元素" + a.unShift("冬至"));
alert("添加后的数组内容为：" + a);
7. 常用对象和方法
7.1 String
- substr(start,length)：从指定位置开始截取指定长度的字符串
- substring(start,end)：从指定的开始位置和结束位置截取指定的字符串，左闭右开
- split():按照指定的符号截取字符串
7.2 Date
- getYear():获取的是从1900年距今的年数
- getFullYear():获取的是当前年份
- getMonth():获取的是月份，但是需要+1
- getDay():获取的是星期数，星期日是0
- getDate():获取当前日。比如21号
- getHours():获取当前小时
- getMinutes():获取当前小时
- getSeconds():获取秒数
7.3 Math
使用Math的方法，当作java中的静态方法，直接Math.方法()就可以使用
- ceil(number):向上取整
- floor(number):向下取整
- random():0~1中的随机数字，左闭右开
- round():四舍五入
7.4 Global
注意：使用的时候不用new,也不用使用类名，直接使用方法即可
- eval():将字符串转换为可以执行的js代码
- parSeInt():截取字符串开头的整数
- parseFloat():截取字符串开头的小数
- isNaN():查看是否是NaN
8. 自定义类和对象
8.1 自定义类
function 类名(形参1,形参2...){
this.形参1 = 形参1;
this.形参2 = 形参2;
this.形参名 = 值;
...
this.函数名 = function(形参1,形参2...){
执行体
}
}
特点：
- js的类在传参的时候可以不传完，也可以不传
- js的类创建的对象是可扩充的对象，也就是除了类本身的拥有的属性和方法以外，对象还可以自定义属性和方法。
- 可以使用prototype关键字变相的实现继承：
类名1.prototype = new 类名2();
这样实现后，类1的对象就可以调用类2中的属性和方法，看起来特别像类1继承了类2，但其实是通过类2的实例化对象来实现的调用。
8.2 自定义对象
创建自定义对象：
var 对象名 = new Object();
var 对象名 = {};
对象名.属性1 = 值1;
对象名.属性2 = 值2;
对象名.属性3 = 值3;
对象名.方法名 = function(){
执行体
}
9. 事件机制
满足一定条件会触发的某类事件的发生
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
function testOnclick(){
alert("测试一下单击");
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="testOnclick();" >
</body>
</html>
常见事件
- onclick:单击事件
- ondblclick:双击事件
- onmouseout:鼠标移出事件
- onmouseover:鼠标悬停事件
- onkeydown:键盘下压事件
- onkeyup:键盘弹起事件
- onblur:失去焦点事件
- onfocus:获取焦点事件
网友评论