文章目录
JavaScript基础快速学习
第一章:JavaScript快速入门
1.1 如何写一段js代码,并执行
JS的使用方式一共有三种
- 将js代码写在HTML行内
- 将js代码写在script标签中
- 将外部Js文件引入后执行
注意:使用外部引用的方式加载js代码时,script标签内不需要再写代码,写了虽不报错也不会运行
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 将js代码写在HTML行内 -->
<input type="button" value="按钮" onclick="alert(123)"></input>
<!-- 将js代码写在script标签中 -->
<!-- <script >
alert(345)
</script> -->
<!-- 将外部js文件引入后执行 -->
<!-- 注意: -->
<script src="./1.js"></script>
</body>
</html>
1.js
aler(567)
1.2 声明变量和赋值
<script>
//声明一个变量
var aa;
//给变量赋值
aa = 18;
//声明一个变量并为其赋值
var age = 20;
//一次性声明多个变量并赋值
var h1 = 12, h2 = 13, h3 = 15;
</script>
1.3 变量命名规则
变量的命名
- 变量的名字必须是数字、字母、下划线_、和 $ 组成
- 变量的名字不能以数字开头
- 变量的名字不能是关键字,如for while if
- 建议 变量名必须有意义
- js中变量是区分大小写的
- 命名尽量使用驼峰规则
1.3.1 练习:将两个变量的值交换
<script>
// 将两个变量的值交换
var a = 1;
var b = 2;
var c = a;
a = b;
b = c;
alert("a="+a);
alert("b="+b);
</script>
第二章 数据类型简介
- 简单数据类型
- 数值Number
- 字符串String
- 布尔Bolean
- undefined
- null
- 复杂数据类型
- 对象Object
2.1 简单数据类型
2.1.1 typeof获取变量的类型
typeof
var age = 18;
console.log(typeof age); //'Number'
2.1.2 数值和字符串
- 数值Number
var num = 12;
var num2 = 1.4;
- String
<script>
//这里的李四不是字符串
// var str1 = 李四;
//使用单/双引号的才是字符串
// var str = '李四';
// var str = '123';
</script>
2.1.2.1 转义字符
<script>
//如果在字符串中要使用引号,需加转义字符
var str1 = '你好,我是\'Alex\'';
var str2 = '你好,我是"Alex"';
var str3 = '你好,我是\"Alex\"\'程序员\' ';
var str4 = '您好,我是\\ \"Alex\" \'程序员\'';
alert(str1);
alert(str2);
alert(str3);
alert(str4);
</script>
2.1.2.2 加号"+"的使用
- +号既可以作为数学运算符,也可以作为字符串拼接符
- 从前往后进行运算,如果两个变量都是数值那么加号作为数学运算符
- 直到遇到一个字符串,此后所有的加号都作为字符串拼接符
<script>
var s1 = '123';//字符串类型
console.log(s1.length);
var s2 = '456';//字符串类型
var s3 = s1 + s2;//此时是字符串拼接
console.log(s3);
var s4 = 1;//数值类型
console.log(s4+s3);//此时还是进行字符串拼接
var s5 = 2;//数值类型
console.log(s5+s4+s3);//此时s4和s5进行数学运算,之后和s3进行字符串拼接
console.log(s3+s4+s5);//此时由于第一个s3是字符串,后面都是字符串拼接
</script>
2.1.3 其他数据类型
2.1.3.1 Boolean类型
- Boolean字面量: true和false,区分大小写
- 计算机内部存储: 0为false, 1为true
2.1.3.2 Undefined和Null
- undefined表示一个声明了但没有赋值的变量,变量只声明默认值是undefined
- null表示一个空变量,变量的值如果想为null,必须手动设置。
后面高级课程详细讲解
2.2 复杂数据类型
2.2.1 Object
后面高级课程详细讲解
2.3 代码注释
- //单行注释
- /多行注释/
2.4 数据类型转换
2.4.1 其他数据类型转为字符串
- 利用toString()
- 利用String(n)
- 利用字符串拼接
var n = 5;
var b = true;
console.log(typeof n);//number
console.log(typeof b)//boolean
console.log(typeof n.toString());//string
console.log(typeof b.toString());//string
console.log(typeof String(n));//string
console.log(typeof String(b));//string
console.log(typeof (''+n));//string
console.log(typeof (''+b));//string
2.4.2 其他数据类型转换为数值类型
- 利用Number(n);
- 利用parseInt(n);
- 利用parseFloat(n);
var a = '1';
a = Number(a);
console.log(typeof a);//number
var b = Number('c');//NaN,表示无法转换
var c = Number(null);// 0 Number()方法可以将null转为0
var d = Number(undefined); //NaN
console.log(b,c,d);
var e = parseInt('2');// 2
var f = parseInt('k23');//NaN
var g = parseInt(null);//NaN
var h = parseInt(undefined);//Nan
console.log(e,f,g,h);
var i = parseFloat('1.25df');// 1.25,前面认识的会转换,不认识的不转换
var j = parseFloat('1.2.3.4.5.6');// 1.2 同上
var k = parseFloat('hs123');// NaN,一开始就不认识,所以不转换
var l = parseFloat(null);// NaN
var m = parseFloat(undefined);// NaN
console.log(i,j,k,l,m);
注:只有Number()方法可以将null转换为0
2.4.3 其他数据类型转换为布尔类型
- 利用Boolean(n);
var a = Boolean(0);//false
var b = Boolean(1);//true
var b2 = Boolean(12);//true
var c = Boolean('0');//true
var d = Boolean('2');//true
var e = Boolean('');//false
var f = Boolean(null);//false
var g = Boolean(undefined);//false
console.log(a,b,b2,c,d,e,f,g);
说明:
- 数值转boolean, 0为false,非0为true
- 字符串转boolean, 字符串有内容为true, ‘’ 为false
- null和undefined转boolean都为false
第三章 JavaScript操作符与运算符
表达式:值和操作符,运算会有个结果;
比如: var str = s1 + s2;
整体是一个表达式,s1和s2是子表达式
3.1 算术运算符(+ - * / %)
+ - * / %
3.2 一元运算符(++,–)
一个值进行自身的运算
和java一样:
- 操作符在变量前面,先进行自身运算,再进行其他运算。
- 操作符在后面,先进行其他运算,再进行自身运算。
var a = 1;
var b = ++a + a++;
console.log(b);// 4
console.log(a);//3
var c = 1;
var d = c++ + ++c;
console.log(d);//4
console.log(c);//3
var e = 1;
var f = ++e + ++e;
console.log(f); //5
console.log(e); //3
3.3 逻辑运算符
- && 逻辑与运算符,参与运算的数据必须同时为真,结果为真
- || 逻辑或运算符,参与运算的数据只要有一个为真,结果为真
- ! 逻辑非运算符,获取相反的结果
var a = 1;//非0逻辑判断为true
var b = 0;//0的逻辑判断为false
console.log(a && b);//两个同时都为真才为真,否则为假。所以这个是假,但这里打印的是0
console.log(a || b);//只要有一个为真则为真,所以这里打印的是1
注意:
- 运算符优先级:先运算&&后运算||
- 在js中,逻辑运算结果是 决定整个表达式的子表达式的结果
var a = 1;
var b = 2;
var c = 0;
console.log(a || c && b);// 1, 先运算&&, 然后子表达式a起决定性作用
3.4 比较运算符
>, <, >=, <=, ==(等于), !=(不等), ===(全等于), !==(不全等)
- 他们比较后结果都是false或true
var a = '2';
var b = 2;
console.log(a == b);//true
console.log(a === b);//false
- 因为js是一种弱类型的语言,变量的数据类型存在自动转换,
- 使用==时,只比较值,不比较数据类型,结果为true
- 使用===时,时全等比较,即比较值也会比较类型,结果为false
3.5 赋值运算符
=, +=, -=, *=, /=, %=
a = a + 4;
a+=4;
b= a - 4;
b-=4
3.6 运算符的优先级
运算优先级从上往下
- () 优先级最高,所以如果想优先执行,可以将该表达式放入()中
- 一元运算符 ++ – !(逻辑非也算作一元)
- 算数运算符 + - * / % (先乘除取余,后加减)
- 关系运算符 > < >= <=
- 相等运算符 == === != !==
- 逻辑运算符 先&& 后||
- 赋值运算 =
var s = 4>=6 || '人' !='哈哈' && !(12*2+3 == 122) && true;
console.log(s); //true
var n = 10;
var f = 5 == n / 2 && (2+2*n);
//化简后其实为 true && 22; 结果为22的表达式起到决定性作用
console.log(f); //22
第四章 流程控制-JavaScript语句
程序的三种结构:
- 顺序结构: 默认从上到下执行代码
- 分支结构:根据不同的条件情况进行判断,执行对应代码
- 循环结构:重复执行一段代码
代码的执行流程分为顺序,分支和循环三种结构, 顺序结构是默认的, 分支结构主要有if-else和switch-case两种,循环结构有while, do-while, 和for三种。continue和break是跳出循环。
4.1 分支结构
4.1.1 if判断
//if(判断条件)
if(condition1){
//条件成立代码执行
code1;
}else if(condition2){
//if else if结构,前面哪一个条件先成立则执行哪一个的代码
//如果有代码执行,那么后面的条件不管是否成立都不执行代码
code2;
}else if(condition3){
code3;
}else if(condition4){
code4;
}else{//如果前面的所有条件都不成立,就执行else的代码
code5;
}
例:判断是否是闰年
//闰年:能被4整除,但是不能被100整除。或能被400整除的年份
var n = 2019;
if(n%4==0){
if(n%100!=0){
console.log(n+"年是闰年");
}else if(n%400==0){
console.log(n+'年是闰年');
}
}else{
console.log(n+"年是平年");
}
4.1.2 switch-case的用法
switch(value){
case value1:
code1;
break;
case value2:
code2;
break;
default:
code3;
break;
}
例:评级
var level = "B";
switch(level){
case 'A':
console.log('90分以上');
break;
case 'B':
console.log('80-90分');
break;
case 'C':
console.log('70-80分');
break;
default:
console.log('太差了');
break;
}
4.2 循环结构
4.2.1 while循环
- 如果条件成立,代码会一直循环执行。
- 每次执行代码前都会对条件重新判断,直到条件不成立。
var i = 0;
while(i<10){
console.log(i);
i++;
}
例:请计算1-100之间所有数字的和
var i = 1;
var sum = 0;
while(i<=100){
sum+=i;
i++
}
console.log(sum);
例:请计算100以内的7的倍数有哪些
var i = 1;
while(i<=100){
if(i%7==0){
console.log(i);
}
i++;
}
例:请打印100以内所有偶数的和
var i = 1;
var sum = 0;
while(i<=100){
if(i%2==0){
sum+=i;
}
i++;
}
console.log(sum);
4.2.2 do-while循环
- 先执行一次代码,然后再进行条件判断
- 如果条件成立,代码继续执行,如果条件不成立代码不执行。
do{
code1;
}while(condition);
4.2.3 for循环
for(初始表达式; 判断表达式; 自增自减运算){
code;
}
例:打印1~100所有数的和
var sum = 0;
for(var i=0; i<=100; i++){
sum+=i;
}
console.log(sum);
例:计算1~100之间所有偶数的和
var sum = 0;
for(var i=0; i<=100; i++){
if(i%2==0){
sum+=i;
}
}
console.log(sum);
例:在浏览器控制台打印1010的’'号图样
var s = '';
for(var i = 1; i <= 10; i++){
for(var j = 1; j<=10; j++){
s+='* '
}
s+='\n'
}
console.log(s);
例:for循环打印三角形
var s = '';
for(var i = 1; i <= 10; i++){
for(var j = 1; j<=i; j++){
s+='* '
}
s+='\n'
}
console.log(s);
例:for循环打印反三角形
var s = '';
for(var i = 10; i > 0; i--){
for(var j = i; j > 0; j--){
s+= '* ';
}
s+='\n';
}
console.log(s);
var s = '';
for(var i = 0; i <= 10; i++){
for(var j = i; j <= 10; j++){
s+= '* ';
}
s+='\n';
}
console.log(s);
例:for循环打印九九乘法表
var s = '';
for(var i = 1; i < 10; i++){
for(var j = 1; j<=i; j++){
s+= j + 'x' + i + '=' + i*j + ' '
}
s+='\n'
}
console.log(s);
4.2.4 continue 和 break
break: 立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号)
continue: 立即跳出当前循环,继续下一次循环(跳到++的地方)
例:计算100以内 不能被7整除的所有数的和(要求使用continue)
var sum = 0;
for(var i = 1; i<=100; i++){
if(i % 7 == 0){
continue;
}else{
sum+=i;
}
}
console.log(sum);
例:打印200-300之间第一个能被7整除的数字(使用break)
for(var i = 200; i <= 300; i++){
if(i % 7 == 0){
console.log(i);
break;
}
}
第五章 JavaScript数组
5.1 数组的基本概念
所谓数组,就是多个元素(通常是同一类型)按一定顺序放到一个集合当中,那么这个集合我们就称之为数组。
JavaScript数组里面可以存放任何类型的元素,混合的也行,而且数组里面可以有数组
5.1.1 声明数组的方式
5.1.1.1 字面量方式创建数组
var a = [];//空数组
var b = [1,2,3];
var c = ['a','b','c'];
console.log(a);
5.1.1.2 构造函数方式创建数组
var d = new Array();
var e = new Array(1,2,3,'a','b','c');
conslole.log(d);
5.1.2 数组长度的获取方式
var a = [1,2,3];
var l = a.length;
5.1.3多维数组
数组里面又有数组的情况,我们将这个数组称为多维数组、二维数组。
var a = [1,2,3,'a','b','c'];
var b = ['d','e','f',a];
var c = ['g','h',4,5,6,b]
console.log(c);
5.2 获取数组元素
5.2.1 通过下标获取元素
var a = ['red','blue','yellow'];
console.log(a[2]);
5.2.2 通过下标获取多维数组的元素
var b = ['路飞','娜美',['巴基','小丑',['乔巴','索隆']]];
console.log(b[2][2][1]);//索隆
5.3 循环遍历数组元素
for 循环遍历
var a = ['我','是','A','l','e','x'];
for(var i = 0; i<a.length; i++){
console.log(a[i]);
}
例:将数组中的元素相加
var a = [12,8,7,4,5,3,9,6];
var sum = 0;
for(var i = 0; i<a.length; i++){
sum+=a[i];
}
console.log(sum);
例:打印出数组中最大的元素
var arr = [12,26,1,7,8,4];
var max = 0;
for(var i = 0; i<arr.length; i++){
if(max<arr[i]){
max = arr[i];
}
}
console.log(max);
例:打印出数组中所有的偶数
var arr = [12,26,1,7,8,4];
for(var i = 0; i<arr.length;i++){
if(arr[i]%2==0){
console.log(arr[i]);
}
}
例:将数组中所有的元素以|为分割组成一个字符串
var arr = [12,26,1,7,8,4];
var s = '';
for(var i = 0; i<arr.length; i++){
s+=arr[i]+'|';
}
console.log(s);
for…in 循环遍历
var arr = [1,2,3,4,5,6,7,8,9];
for(var k in arr){
console.log(arr[k]);
}
第六章 JavaScript函数
把一段相对独立的具有特定功能的代码块封装()起来,形成一个独立实体,就是函数,起个名字(函数名),在后续开发中可以反复调用。
函数的作用就是封装一段代码,将来可以重复使用
6.1 函数的声明和调用
函数的声明方式
关键字声明
function 函数名 (){
}
表达式声明
var f = function(){
}
//变量f就相当于函数名
注意:
- 函数声明后,里面的代码不会自动执行的
- 函数中的代码想要执行,必须调用这个函数(函数只要不调用,代码一定不执行)
函数的调用方式
函数名();
var f1 = function(){
console.log(哈哈);
}
//函数的调用
f1();
f1();
- 函数调用几次,里面代码就会执行几次。
6.2 形参与实参
- 形参是形式参数,是在函数声明的时候写的,多个形参使用","隔开,形参的值是不固定的,仅仅是一个占位,等待实参传入,与实参实际传入的值要一一对应。
- 实参是在函数调用的时候,实际传入函数的值。传入后,在函数中使用形参获取具体的值。
形参
在函数声明的时候,使用形参
function f(形参1, 形参2, 形参3, ...){//这里一般写的是变量名
函数体;
}
实参
在函数调用的时候,使用实参。
f(实参1, 实参2, 实参3, ...);
例子:
function f(k){//形参
var sum = 0;
for(var i = 0; i<=k; i++){
sum+=i;
}
console.log(sum);
}
f(60);//实参
f(10);
6.3 函数的返回值
function f(形参1,形参2){
代码;
return 返回值;
}
//这时候调用的时候需要接收返回值
var re = f(实参1,实参2);
例:
function f(a,b){
var c = a -b;
//return c;
}
var c = f(10,6);
console.log(c);
注意:
- 如果函数中没有return,那么函数调用之后接收到的返回值是undefined
- 函数中return之后,不管有什么代码,均不执行。
6.4 匿名函数与自调用函数
匿名函数
函数本身是没有名字的。
表达式声明的函数
其实表达式声明方式创建的函数就是匿名函数
var fun = function(){
代码;
}
//然后通过变量名进行调用
fun();
立即执行函数(自调用匿名函数)
(function(){
alert(123);
})();
自调用函数的作用:
-
- 防止全局变量的污染
-
- 封装一个局部作用域
6.5 函数当作值(函数也是一种数据类型)
数据类型中有一种数据是对象,而函数和数组就是属于对象类型。
回调(函数当作函数的参数传入)
function f1(s){
s();//执行形参s
}
function f2(){
console.log(222);
}
f1(f2);
如上,f2函数会被当作值,传入f1函数内。
这个就是回调,后面会继续学习。
闭包(函数当作函数的返回值传出)
不是所有函数当作值传出都是闭包,后面课程会详细讲解
function f1(){
var a = 10;
var f2 = function( ){
alert(2)
}
return f2;//当作返回值传出
}
var k = f1();
k();//执行的是f2
第七章 作用域与JS代码的运行
作用域: 变量可以起作用的范围和区域
7.1 全局变量和局部变量*
- 全局变量与全局作用域
在任何地方都可以访问到的变量就是全局变量,全局变量所在的区域就是全局作用域。
- 局部变量
只在固定的代码片段内可以访问到的遍历,最常见的例如函数的内部,就是局部变量,局部变量所在的区域就是局部作用域。
不使用var声明的变量是全局变量,不推荐使用
变量退出作用域后会销毁,全局变量在关闭网页或者浏览器时才会销毁
<script>
var a = 1;
//函数里面就是局部作用域,函数外面就是全局作用域
function f1(){
var a = 2;
}
</script>
例:
<script>
var a = 1;
var f = function(){
var a = 2;
}
f();
console.log(a);//结果是1
</script>
7.2 变量提升及代码执行阶段
JS代码运行分为两个阶段
-
- 解析(编译)阶段: 语法检查,将所有的变量、函数等等进行声明。
-
- 运行阶段: 变量的赋值,代码流程的执行
例子
console.log(a);
var a = 2;
我们知道js代码是由上向下执行,上面这段代码执行结果是undefined,因为变量的声明在下面
但是如果直接不写变量的声明,那么这段代码执行会报错
所以虽然变量声明写在代码执行的下面会导致执行结果为undefined,但是var a = 2 写和不写,还是有很大区别的,这个就是变量提升
其实上面那段代码编译和执行情况实际上如下:
var a;
console.log(a);
a = 2;
在代码执行之前,已经在编译阶段进行了声明,所以结果才会是undefined。
- 练习1
var a = 12;
function abc(){
alert(a);
var a = 10;
}
abc();
执行结果是undefined, 首先alert(a)中的a应是局部变量,和函数外面的a没有关系,但是var a = 10在下面,由于代码提升,局部变量a只被声明但是还没有赋值,因此结果是undefined。
- 练习2
console.log(a)
function a(){
console.log('aaaaaa');
}
var a = 1;
console.log(a);
执行结果如下
ƒ a(){
console.log('aaaaaa');
}
1
注意:如果变量和函数重名,那么声明阶段,函数声明会替换变量声明
7.3 作用域及作用域链
只有函数可以制造作用域,那么只要是代码,就至少有一个作用域(全局作用域)。
凡是代码里有函数,那么这个函数就构成另一个作用域。
如果函数中还有函数,那么这个作用域中就又可以诞生一个作用域。
将这样的所有作用域列出来,可以有一个结构:函数内指向函数外的链式结构。就称作作用域链。
- 例:
var a = 3;
function f1(){
//var a = 4;
function f2(){
//var a = 5;
function f3(){
//var a = 6;
console.log(a);
}
f3();
}
f2();
}
f1();
- 注意:
当函数中使用某个变量时,优先在自己的作用域中查找,如果找不到就向上一层(函数)作用域,如果还找不到,继续往上一层查找,直到全局作用域。如果还找不到,直接报错。这就是作用域链。
第八章 JavaScript对象
8.1 对象的概述
生活中的对象
万物皆对象
现实生活中万物皆对象,对象是一个具体的事物,一个具体的事物就会有行为和特征。
举例:一部车,一个手机
车是一类事物,门口停着的那辆车才是对象
特征:红色,四个轮子
行为:驾驶、刹车
JavaScript中对象
JavaScript中的对象其实就是生活中对象的一个抽象
JavaScript的对象是无序属性的集合。
其属性可以包含基本值,对象,数组或函数。
对象就是一组没有顺序的值的集合。
我们可以把JavaScript中的对象想象成键值对,其中值可以是数据和函数。
对象的行为和特征:
特征—属性
行为—方法
事物的特征在对象中用属性来表示。
事物的行为在对象中用方法来表示。
8.2 对象的声明及使用
对象的声明
字面量 声明对象
var obj1 = {};
//对象里面的所有的东西都是键值成对存在
var obj2 = {age:12, length:190, name:'Alex', fly:function(){}}
- 对象里面的所有数据都是键值成对存在
- 通常来时,值是函数则称为方法,其他类型的值都是属性。
实例化方式(内置构造函数) 声明对象
var obj = new Object();
实例化自定义构造函数方式 声明对象
function fun(){
}
var f = new fun();
对象的使用
获取对象的属性或方法
对象.属性名;
var obj = {
name:'Alex',
age:12,
length:190,
fly:function(){
console.log('飞');
}
}
console.log(obj.age);
obj.fly();
8.3 this的指向
- 方法中的this指的就是这个方法所在的对象、
var obj1 = {
name:'Alex',
age:12,
length:190,
showAge:function(){
var a = this.age;
console.log(a);
}
}
obj1.showAge();
- 普通的函数中也有this, this指向全局对象Window(当前运行的大环境)
function f(){
console.log(this);
}
f();//undefined
总结:
- this永远指向一个对象
- this运行在哪个对象下,就指向那个对象。
例:
function fun(){
var k = '89';
console.log(this.k);
}
var o1 = {
name: 'o1',
k: '123',
f:fun
}
var o2 = {
name:'o2',
k: '456',
f:fun
}
o1.f();//123
o2.f();//456
为什么fun函数中var k = ‘89’没有被打印出来?
o1.f();执行时,fun函数在o1对象下运行,所以this指向的是o1, 而o1.k是’123’,所以打印123.
同理,o2.f();执行时,fun函数在o2对象下运行,所以this指向的是o2, 而o2.k是’456’,所以打印456.
this运行在哪个对象下,就指向那个对象
只需要弄清楚,函数到底是被谁调用了
例2:
var o1 = {
age: 18,
f:function(){
console.log(this.age);
}
}
var o2 = {
age: 16,
f:o1.f,
}
o2.f();
执行结果是16,为什么?
虽然这个函数是o1下的函数,但是它是通过o2进行调用的,o1.f已经作为属性传给o2,所以o2.f()中的this应当是运行在o2环境下的。
8.4 对象的遍历和删除
for in 循环遍历对象
- 语法:
for(键 in 对象)
for…in 循环不仅可以遍历数组,还可以循环遍历对象。
例:
var obj = {
name: '路飞',
age: 15,
gender: '男'
}
for(var k in obj){
console.log(obj[k]);
}
delete 删除对象属性
- 语法
delete 对象.属性
- 例
var obj = {
name: '路飞',
age: 15,
gender: '男'
}
console.log(obj);
delete obj.age;
console.log(obj);
8.5 包装对象
JavaScript中数据类型有6中,其中有3种是原始数据类型, 数值,字符串 和 布尔 类型。
原始数据类型在一定的条件下可以自动转为对象,这就是包装对象。
var num = new Number(123);
console.log(typeof num);//object
原始值可以自动当作对象来使用,可以调用各种属性及方法。
如果包装对象使用完成,会自动立即销毁。
比如声明一个字符串后就可以直接使用它的属性
var a = `123`;
console.log(a.length);
这个属性并不是在包装对象身上,而是在原型身上。他们是类似继承关系。
8.6 标准库对象(内置对象)
Math数学对象
属性 | 描述 |
---|---|
E | 返回算术常量 e,即自然对数的底数(约等于2.718) |
LN2 | 返回 2 的自然对数(约等于0.693) |
LN10 | 返回 10 的自然对数(约等于2.302) |
LOG2E | 返回以 2 为底的 e 的对数(约等于 1.414) |
LOG10E | 返回以 10 为底的 e 的对数(约等于0.434) |
PI | 返回圆周率(约等于3.14159) |
SQRT1_2 | 返回返回 2 的平方根的倒数(约等于 0.707) |
SQRT2 | 返回 2 的平方根(约等于 1.414) |
方法 | 描述 |
---|---|
abs(x) | 返回数的绝对值 |
acos(x) | 返回数的反余弦值 |
asin(x) | 返回数的反正弦值 |
atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值 |
atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间) |
ceil(x) | 对数进行上舍入 |
cos(x) | 返回数的余弦 |
exp(x) | 返回 e 的指数 |
floor(x) | 对数进行下舍入 |
log(x) | 返回数的自然对数(底为e) |
max(x,y) | 返回 x 和 y 中的最高值 |
min(x,y) | 返回 x 和 y 中的最低值 |
pow(x,y) | 返回 x 的 y 次幂 |
random() | 返回 [ 0 ~ 1 ) 之间的随机数 |
round(x) | 把数四舍五入为最接近的整数 |
sin(x) | 返回数的正弦 |
sqrt(x) | 返回数的平方根 |
tan(x) | 返回角的正切 |
toSource() | 返回该对象的源代码 |
valueOf() | 返回 Math 对象的原始值 |
//取绝对值
var n = -2;
console.log(Math.abs(n));
//取默认[0,1)之间的随机数
var r = Math.random();
console.log(r);
//规定范围的随机数公式: Math.random()*(上限-下限)+下限;
//取规定范围的随机整数,取[11-32)范围内的随机整数
var f = Math.floor(Math.random()*(32-11)+11);
console.log(f);
- 取绝对值 Math.abs();
- 取默认[0,1)之间的随机数 Math.random();
- 取[min,max)之间的随机数 Math.randowm()*(max-min)+min;
- 向下取整 Math.floor();
Date 日期对象
- 获取事件对象
var myDate=new Date();
注释:Date 对象会自动把当前日期和时间保存为其初始值。
- Date对象属性
属性 | 描述 |
---|---|
constructor | 返回对创建此对象的 Date 函数的引用 |
prototype | 使您有能力向对象添加属性和方法 |
- Date对象方法
方法 | 描述 |
---|---|
Date() | 返回当日的日期和时间 |
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31) |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6) |
getMonth() | 从 Date 对象返回月份 (0 ~ 11) |
getFullYear() | 从 Date 对象以四位数字返回年份 |
getYear() | 请使用 getFullYear() 方法代替 |
getHours() | 返回 Date 对象的小时 (0 ~ 23) |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59) |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59) |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999) |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数 |
getTimezoneOffset() | 返回本地时间与格林威治标准时间 (GMT) 的分钟差 |
getUTCDate() | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31) |
getUTCDay() | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6) |
getUTCMonth() | 根据世界时从 Date 对象返回月份 (0 ~ 11) |
getUTCFullYear() | 根据世界时从 Date 对象返回四位数的年份 |
getUTCHours() | 根据世界时返回 Date 对象的小时 (0 ~ 23) |
getUTCMinutes() | 根据世界时返回 Date 对象的分钟 (0 ~ 59) |
getUTCSeconds() | 根据世界时返回 Date 对象的秒钟 (0 ~ 59) |
getUTCMilliseconds() | 根据世界时返回 Date 对象的毫秒(0 ~ 999) |
parse() | 返回1970年1月1日午夜到指定日期(字符串)的毫秒数 |
setDate() | 设置 Date 对象中月的某一天 (1 ~ 31) |
setMonth() | 设置 Date 对象中月份 (0 ~ 11) |
setFullYear() | 设置 Date 对象中的年份(四位数字) |
setYear() | 请使用 setFullYear() 方法代替 |
setHours() | 设置 Date 对象中的小时 (0 ~ 23) |
setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59) |
setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59) |
setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999) |
setTime() | 以毫秒设置 Date 对象 |
setUTCDate() | 根据世界时设置 Date 对象中月份的一天 (1 ~ 31) |
setUTCMonth() | 根据世界时设置 Date 对象中的月份 (0 ~ 11) |
setUTCFullYear() | 根据世界时设置 Date 对象中的年份(四位数字) |
setUTCHours() | 根据世界时设置 Date 对象中的小时 (0 ~ 23) |
setUTCMinutes() | 根据世界时设置 Date 对象中的分钟 (0 ~ 59) |
setUTCSeconds() | 根据世界时设置 Date 对象中的秒钟 (0 ~ 59) |
setUTCMilliseconds() | 根据世界时设置 Date 对象中的毫秒 (0 ~ 999) |
toSource() | 返回该对象的源代码 |
toString() | 把 Date 对象转换为字符串 |
toTimeString() | 把 Date 对象的时间部分转换为字符串 |
toDateString() | 把 Date 对象的日期部分转换为字符串 |
toGMTString() | 请使用 toUTCString() 方法代替 |
toUTCString() | 根据世界时,把 Date 对象转换为字符串 |
toLocaleString() | 根据本地时间格式,把 Date 对象转换为字符串 |
toLocaleTimeString() | 根据本地时间格式,把 Date 对象的时间部分转换为字符串 |
toLocaleDateString() | 根据本地时间格式,把 Date 对象的日期部分转换为字符串 |
UTC() | 根据世界时返回 1997 年 1 月 1 日 到指定日期的毫秒数 |
valueOf() | 返回 Date 对象的原始值 |
//获取事件对象
//默认当前时间为初始设置
var myDate = new Date();
console.log(myDate);
var now = Date.now();//可以直接获取当前时间戳
console.log(now);
console.log(myDate.getHours());//获取小时
console.log(myDate.getDate());//获取日
console.log(myDate.getFullYear());//获取年
console.log(myDate.getMoth()+1);//获取月
注意:
- JS中获取的时间是计算机本地时间
- JS中月份的数字是从0开始的
Array 数组对象
- 创建 Array 对象的语法:
new Array();
new Array(size);
参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。new Array(element0, element0, ..., elementn);
参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时,新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。
- 返回值
- 返回新创建并被初始化了的数组。
- 如果调用构造函数 Array() 时没有使用参数,那么返回的数组为空,length 字段为 0。
- 当调用构造函数时只传递给它一个数字参数,该构造函数将返回具有指定个数、元素为 undefined 的数组。
- 当其他参数调用 Array() 时,该构造函数将用参数指定的值初始化数组。
- 当把构造函数作为函数调用,不使用 new 运算符时,它的行为与使用 new 运算符调用它时的行为完全一样。
属性 | 描述 |
---|---|
constructor | 返回对创建此对象的数组函数的引用 |
index | |
input | |
length | 设置或返回数组中元素的数目 |
prototype | 使您有能力向对象添加属性和方法。 |
方法 | 描述 |
---|---|
concat() | 连接两个或更多的数组,并返回结果 |
join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔 |
pop() | 删除并返回数组的最后一个元素 |
push() | 向数组的末尾添加一个或更多元素,并返回新的长度 |
reverse() | 颠倒数组中元素的顺序 |
shift() | 删除并返回数组的第一个元素 |
slice() | 从某个已有的数组返回选定的元素,返回的是新数组,是原数组的浅拷贝,不改变原数组 |
sort() | 对数组的元素进行排序 |
splice() | 删除元素,并向数组添加新元素 |
toSource() | 返回该对象的源代码 |
toString() | 把数组转换为字符串,并返回结果 |
toLocaleString() | 把数组转换为本地数组,并返回结果 |
unshift() | 向数组的开头添加一个或更多元素,并返回新的长度 |
valueOf() | 返回数组对象的原始值 |
var arr = [1,2,3,4,5];
//在末位添加元素
arr.push(10);
console.log(arr);
//删除末位元素
arr.pop();
console.log(arr);
//选取规定范围元素,返回新数组
console.log(arr.slice(2,4));
console.log(arr);
//合并两个或多个数组
var arr2 = ['A','l','e','x','p'];
var newArr = arr.concat(arr2);
console.log(newArr);
//将数组中的元素使用指定分隔符隔开,返回一个字符串,如果只有一个元素,不会添加分隔符。
var str = arr2.join('-');
console.log(str);
String 字符串对象
创建 String 对象的语法:
new String(s);
String(s);
-
参数
- 参数 s 是要存储在 String 对象中或转换成原始字符串的值。
-
返回值
- 当 String() 和运算符 new 一起作为构造函数使用时,它返回一个新创建的 String 对象,存放的是字符串 s 或 s 的字符串表示。
- 当不用 new 运算符调用 String() 时,它只把 s 转换成原始的字符串,并返回转换后的值。
-
String 对象属性
属性 | 描述 |
---|---|
constructor | 对创建该对象的函数的引用 |
length | 字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
String 对象方法
FF: Firefox, IE: Internet Explorer
方法 | 描述 |
---|---|
anchor() | 创建 HTML 锚 |
big() | 用大号字体显示字符串 |
blink() | 显示闪动字符串 |
bold() | 使用粗体显示字符串 |
charAt() | 返回在指定位置的字符 |
charCodeAt() | 返回在指定的位置的字符的 Unicode 编码 |
concat() | 连接字符串 |
fixed() | 以打字机文本显示字符串 |
fontcolor() | 用指定的颜色来显示字符串 |
fontsize() | 使用指定的尺寸来显示字符串 |
fromCharCode() | 从字符编码创建一个字符串 |
indexOf() | 检索字符串 |
italics() | 使用斜体显示字符串 |
lastIndexOf() | 从后向前搜索字符串 |
link() | 将字符串显示为链接 |
localeCompare() | 用本地特定的顺序来比较两个字符串 |
match() | 找到一个或多个正在表达式的匹配 |
replace() | 替换与正则表达式匹配的子串,返回新字符串,原字符串不会改变 |
search() | 检索与正则表达式相匹配的值 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分 |
small() | 使用小字号来显示字符串 |
split() | 把字符串分割为字符串数组 |
strike() | 使用删除线来显示字符串 |
sub() | 把字符串显示为下标 |
substr() | 从起始索引号提取字符串中指定数目的字符,方法返回一个字符串中,从指定位置开始到指定字符数的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
sup() | 把字符串显示为上标 |
toLocaleLowerCase() | 把字符串转换为小写 |
toLocaleUpperCase() | 把字符串转换为大写 |
toLowerCase() | 把字符串转换为小写 |
toUpperCase() | 把字符串转换为大写 |
toSource() | 代表对象的源代码 |
toString() | 返回字符串 |
valueOf() | 返回某个字符串对象的原始值 |
//打印字符串长度(元素个数)
var str = 'JavaScript';
console.log(str.length);
//打印某字符串在该字符串中第一次出现的位置(下标从0开始)
var n = str.indexOf('s');
console.log(n);
//截取一个字符串中,从指定位置开始到指定字符数的字符
var s1 = str.substr(2,5);
console.log(s1);
//全部转为小写
var s2 = str.toLowerCase();
console.log(s2);
//全部转为大写
var s3 = str.toUpperCase();
console.log(s3);
//将Java替换为Type,replace返回的是新字符串,原字符串不会改变
var s4 = str.replace('Java','Type');
console.log(s4);
第九章 其他知识点
9.1 JavaScript 消息框
可以在 JavaScript 中创建三种消息框:
- 警告框
alert
- 确认框
confirm
- 提示框
prompt
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作。
警告框中的字符串可以通过+'\n'+
的方式进行折行
语法:
alert("文本")
例:
<html>
<head>
</head>
<body>
<input type="button" onclick="dis_alert()" value="展示警告框">
</body>
<script type="text/javascript">
function dis_alert(){
alert(
"警告" + '\n' + "我是警告框"
)
}
</script>
</html>
确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
语法:
confirm("文本")
例:
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("是否确认?");
if (r==true)
{
alert("您已确认!");
}
else
{
alert("您已取消!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="展示确认框" />
</body>
</html>
提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
语法:
prompt("文本","默认值")
例:
<html>
<head>
</head>
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("请输入您的名字","Alex")
if (name!=null && name!="")
{
document.write("你好!" + name + " 今天过得怎么样?")
}
}
</script>
<body>
<input type="button" onclick="disp_prompt()" value="显示提示框" />
</body>
</html>
9.2 JavaScript事件
事件是可以被 JavaScript 侦测到的行为。
- 事件
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
事件举例:
- 鼠标点击
- 页面或图像载入
- 鼠标悬浮于页面的某个热点之上
- 在表单中选取输入框
- 确认表单
- 键盘按键
注意:事件通常与函数配合使用,当事件发生时函数才会执行。
JavaScript 事件参考手册
事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。
事件句柄
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。
属性 | 当以下情况发生时,出现此事件 |
---|---|
onabort | 图像加载被中断 |
onblur | 元素失去焦点 |
onchange | 用户改变域的内容 |
onclick | 鼠标点击某个对象 |
ondblclick | 鼠标双击某个对象 |
onerror | 当加载文档或图像时发生某个错误 |
onfocus | 元素获得焦点 |
onkeydown | 某个键盘的键被按下 |
onkeypress | 某个键盘的键被按下或按住 |
onkeyup | 某个键盘的键被松开 |
onload | 某个页面或图像被完成加载 |
onmousedown | 某个鼠标按键被按下 |
onmousemove | 鼠标被移动 |
onmouseout | 鼠标从某元素移开 |
onmouseover | 鼠标被移到某元素之上 |
onmouseup | 某个鼠标按键被松开 |
onreset | 重置按钮被点击 |
onresize | 窗口或框架被调整尺寸 |
onselect | 文本被选定 |
onsubmit | 提交按钮被点击 |
onunload | 用户退出页面 |
onload 和 onUnload
当用户进入或离开页面时就会触发 onload 和 onUnload 事件。
onload 事件常用来检测访问者的浏览器类型和版本,然后根据这些信息载入特定版本的网页。
onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如,当某用户第一次进入页面时,你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时,你可以使用另一个消息框来和这个用户打招呼:“Welcome John Doe!”。
onFocus, onBlur 和 onChange
onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。
下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容,checkEmail() 函数就会被调用。
<input type="text" size="30" id="email" onchange="checkEmail()">
onSubmit
onSubmit 用于在提交表单之前验证所有的表单域。
下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时,checkForm() 函数就会被调用。假若域的值无效,此次提交就会被取消。
checkForm() 函数的返回值是 true 或者 false。如果返回值为true,则提交表单,反之取消提交。
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
onMouseOver 和 onMouseOut
onMouseOver 和 onMouseOut 用来创建“动态的”按钮。
下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时,就会弹出一个警告框:
<a href="http://www.w3school.com.cn"
onmouseover="alert('An onMouseOver event');return false">
<img src="w3school.gif" width="100" height="30">
</a>