1 JS概述
1.1什么是JS
全称: JavaScript, 简称JS.
JS是一门基于对象和事件驱动的脚本语言, 专门为网页交互而设计, 主要应用在客户端.
(1) 基于对象
JS不是一门面向对象的语言, 因为不具备面向对象语言的特征(没有类的概念, 有没有编译的过程等.), 但是JS中是有对象的. 只能称之为是基于对象.
(2) 事件驱动
JS是通过事件触发来驱动函数执行, 从而实现特定的功能
(3) 脚本语言
在网络前端开发环境下, 能够嵌入在浏览器中运行的一段小程序.
1.2JS的特点
1.直接解释执行, 不需要编译
2.基于对象
3.弱类型
1.3JS的优点
1.交互性
2.安全性
3.跨平台性
1.4JS的历史
略
1.5在HTML中引入JS
1.5.1直接在HTML中书写JS代码
1.5.2在HTML引入外部的JS文件
2JS基础语法
2.1JS注释
1.单行注释: //注释内容
2.多行注释: /* 注释内容… */
2.2数据类型
2.2.1基本数据类型
1.数值类型(number)
在JS中, 数值类型底层就只有一种, 就是浮点型(float). 在需要时, JS中的数值会在浮点型和整型之间自动的进行转换.
例如: 2.4+3.6=6; //结果是6, 不是6.0
常见的常量:
Infinity: 正无穷大
-Infinity: 负无穷大
NaN(not a number): 非数字, 这个值比较特殊, 它和任何数值都不相等, 包括它自己. 这也就意味着, 如果要判断一个值是否是非数字, 不可以用 x == NaN进行判断, 而是使用 isNaN(x) 函数进行判断. 如果是非数字, 就会返回true.
2.字符串类型(string)
在JS中, 字符串类型是基本数据类型的一种, 字符串常量可以用单引号或者双引号引起来.
var str1 = “hello js…”;
var str2 = ‘hello js…’;
3.布尔类型(boolean)
布尔类型和Java中的大致相同, 值分为true和false.
4.undefined(未定义)
undefined的值只有一个, 就是undefined. 表示变量未定义(未初始化值).
比如: var str; //此时访问str, str的值就是undefined.
5.null(空)
null的值也只有一个, 就是null. 表示空值.
常被用来作为函数的返回值, 表示该函数返回的是一个空的对象.
2.2.2复杂数据类型
复杂数据类型主要指对象. 对象分为普通对象、数组和函数。即在JS中函数和数组也属于对象。
2.2.3数据类型的自动转换.
1.js中的数据类型在需要时会自动的进行类型转换, 转换时遵循如下规则:
(1)数值类型:
转字符串类型, 直接转成对应值的字符串, 3 --> “3”
转布尔类型, 0和NaN转成false, 其他数值转成true
在需要时, 会自动转成对应的包装对象 100 --> new Number(100)
(2)字符串:
空字符串(""): 转数值为0, 转布尔值为false
非空纯数值字符串(“123”): 转数值为对应的数值, 转布尔值为true
非空非数值字符串(“abc”): 转数值为NaN, 转布尔值为true
在需要时, 会自动转成对应的包装对象. “aaa” --> new String(“aaa”)
(3)布尔类型:
true: 转数值为 1, 转字符串为"true"
false: 转数值为 0, 转字符串为"false"
在需要时, 会自动转成对应的包装对象. true --> new Boolean(true)
(4)undefined
转数值为NaN, 转字符串为"undefined", 转布尔值为false, 转对象会抛出异常!
(5)null
转数值为 0, 转字符串为"null", 转布尔值为false, 转对象会抛出异常!
2.常见错误
(1)undefined和null类型不能转成对象, 否则会抛出异常!
2.3变量的定义和运算符
2.3.1变量的定义
在JS中是通过var关键字来定义变量. 变量不区分类型, 所以JS是一门弱类型的语言.
比如: 声明一个字符串: var str = ”hello js…”;
声明一个数值: var num = 100;
2.3.2运算符
JS中的运算符和Java中的大致相同
算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=，===，!==，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，||
前置逻辑运算符: ! (not)
三元运算符: ? :
其他运算符: typeof, delete
1.== 和 === 的区别?
(1) 如果要判断的两个值是同一种类型, == 和 === 没有区别, 直接判断两个值是否相等.
例如: 123 == (100+23);//true 123 === (100+23);//true
(2) 如果要判断的两个值不是同一种类型, == 会先将两个值转成同一种类型, 再进行比较其是否相等.
例如: “123” == (100+23);//true
(3) 如果要判断的两个值不是同一种类型, === 会直接返回false.
例如: “123” === (100+23);//false
2.typeof: 返回变量或表达式的数据类型
3.delete: 删除数组中的元素或者是对象上的属性或方法
2.4语句
JS中的语句和Java中的大致相同.
2.4.1条件语句 if…else
示例:
2.4.2switch语句
示例:
2.4.3循环语句
while循环语句
for循环语句
示例:
2.5数组
2.5.1创建数组的方式
1.通过Array构造函数声明数组
var arr1 = new Array();//声明一个空数组
var arr2 = new Array(“hello”, 100, true);//声明一个具有初始值的数组
2.通过数组直接量声明数组
var arr1 = [];//声明一个空数组.
var arr2 = [“hello”, 100, true];//声明一个具有初始值的数组
2.5.2JS数组的细节
1.JS数组中可以存放任意类型的元素
var arr1 = [“hello”, 123, true];
2.JS数组的长度是可以被任意改变的.
var arr2 = [“hello”, 123, true];
alert(arr2.length);//数组长度为3
arr2.length = 10;//数组长度为10
arr2[99] = “a”;//数组长度为100
3.如果访问数组中一个没有元素的位置, 该位置处的值为undefined.
var arr3 = [“hello”, 123, true];
alert(arr3[9]);//undefined
2.5.3数组对象上常用方法
1.length属性 : 返回数组的长度, 也可以通过修改该属性的值来修改数组的长度
2.push方法: 往数组的末尾追加元素. 返回新数组的长度
var arr4 = [“hello”, 123, true];
alert(arr4.push(“last”));//返回新数组的长度
alert(arr4);
3.pop方法: 删除数组的最后一个元素并返回该元素.
var arr5 = [“hello”, 123, true];
alert(arr5.pop());//true
alert(arr5);//“hello”, 123
- unshift方法: 往数组的最开始处插入元素, 并返回新数组的长度
var arr6 = [“hello”, 123, true];
alert(arr6.unshift(“abc”));//4
alert(arr6);
5.shift方法: 删除数组的第一个元素并返回该元素
var arr7 = [“hello”, 123, true];
alert(arr7.shift());
alert(arr7);
2.6函数
2.6.1通过function关键字声明函数
函数声明:
function 函数名([参数1,参数2,…]){
函数体…
}
调用函数: 函数名(参数列表);
示例:
function fn1(name, nickname){
alert(name+" : "+nickname)
}
fn1(“韩少云”, “少云”);
2.6.2通过函数直接量声明函数
函数声明:
var 函数名 = function([参数1,参数2,…]){
函数体…
}
调用函数: 函数名(参数列表);
示例:
var fn2 = function(name, age){
alert(name+" : "+age);
}
fn2(“陈子枢”, 18);
函数的细节:
2.7对象
2.7.1JS的内置对象
1.RegExp正则对象
(1)声明正则表达式对象
var reg1 = new RegExp(“正则表达式” [, “标识符”]);
var reg2 = /“正则表达式”/[“标识符”];
(2)示例:
2.String对象
(1)声明String对象
var str1 = new String(“hello js…”);//str1的类型是object
var str2 = “hello js…”;//str2的类型是string, 但是会在需要时自动转成对象.
(2)常用的方法:
charAt()方法: 返回指定位置处的字符.
indexOf()方法: 返回字符串中第一次出现子字符串的位置.
lastIndexOf()方法: 返回字符串中最后一次出现子字符串的位置.
match()方法: 根据正则表达式到字符串中进行匹配, 返回所有符合的子字符串组成的数组.
search()方法: 根据正则表达式到字符串中进行匹配, 返回子字符串第一次出现的位置. 如果检索不到返回-1 示例:
replace()方法: 根据正则表达式到字符串中进行匹配, 匹配的结果可以使用其他字符串进行替换,默认只替换第一个 示例:
slice(start [, end])方法: 从start开始, 到end结束(如果没有end就截取到最后)截取字符串, 不包括end.
substr(start [, length])方法: 从start开始, 截取的长度为length(如果没有length就截取到最后), 来截取字符串.
3.Array对象(略)
4.Date对象
(1)创建日期对象
var date1 = new Date();//表示当前时间
var date2 = new Date(1000*3600);//1970-1-1 9:0:0
var date3 = new Date(2017,11,28);//月份从零开始
常用方法:
getFullYear();获取日期对象中的年份
getMonth();获取日期对象中的月份,月份是从零开始.
getDate();获取日期对象中的哪一天.
getDay();获取星期几.
5.Math对象
Math.PI : 圆周率
Math.ceil(); 向上取整
Math.round(); 四舍五入
Math.floor(); 向下取整
Math.random(); 返回0~1之间的伪随机数
6.Global对象
parseInt():将传入的值转为整数
parseFloat():将传入的值转为浮点数
isNaN(): 判断传入的值是否为非数字, 如果是则返回true
示例:
2.7.2自定义对象
1.自定义对象方式一:
function Person(){}
var p1 = new Person();
//为p1对象添加两个属性
p1.name = “尼古拉斯赵四”;
p1.age = 38;
//为p1对象添加一个函数
p1.run = function(){
alert(this.name+" : "
+p1.age+"…running…");
}
//访问p1上的属性和方法
alert(p1.name);
alert(p1.age);
p1.run();
2.自定义对象方式二:
var p2 = {
“name”: “张飞”,
“age”: 18,
“addr”: “阉人张飞”,
“run”: function(){
alert(this.name+" : "
+this.age+"…running…");
}
};
alert(p2.name);
alert(p2.age);
alert(p2.addr);
p2.run();
方式二中对象的格式为key:value形式, key只能是字符串, 最好用双引号引起来, value可以是任意的类型, 比如: 数值, 字符串, 布尔值, 函数, 数组, 对象等…