JS -----> JavaScript:实现页面上的动态效果
一.JS的理论知识
1.JS的历史及ECMAScript
ECMAScript 一个标准 Es5/Es6
node,js 跑在服务器端的JS
2.JS的三大部分
(1)基础语法 (2)操作浏览器对象 BOM (3)操作文档上的标签 DOM
3.JS的引入方式
(1)script标签内写代码 (head和body都可以写)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv-"content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<script>
console.log(123)
</script>
</head>
<body>
<script>
console.log(456)
</script>
</body>
</html>
(2)额外引入JS文件
html文件代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv-"content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<script src="JS.js"></script>
<script>
console.log(123)
</script>
</head>
JS文件代码:
console.log("刘某某");
4.JS的语言规范
(1)// 单行注释
(2)/* 多行注释 */
(3)IS中要以分号(;)为结束符 每个语句后面都要加
5.JS的语言基础
(1)变量声明
①JS的变量名可以使用_,数字,字母,$组成,不能以数字开头
②声明变量使用 var 变量名; 的格式来命名
例如:
var a="alex"
注意:变量名是区分大小写的
推荐使用驼峰式命名规则
保留字不能做变量名
补充:ES6新增了let命令,用于声明变量,用法类似于var,但是所声明的变量只在let命令所在的代码块内有效
例如:
for (let i=0;i<arr.length;i++)
ES6新增const用来声明常量,一旦声明,其值不能改变
二.JS的数据类型
var x; x是ungefined类型
var x = "alex";
var x = 123;
1.数值 Number
var a = 123;
var b = 12.34;
var c = 123e5; ====>12300000
var d = 123e-5; ====>0.00123
NAN:表示不是一个数字 (Not A Number)
常用方法:
parseInt("123"); ====>123
parseInt(12.24); =====>12
parseInt("aaa"); =====>NaN
parseFloat("123.456"); ====>123.456
2.字符串 String
var a = "hello";
var b = "world";
var c = a+b; consold.log(c) ====>"helloworld"
常用方法:
方法 |
使用方法 |
.length |
返回长度 |
.trim() |
移除空白 |
.trimLeft() |
移除左边的空白 |
.trimRight() |
移除右边的空白 |
.charAt(n) |
返回第几个字符 |
.concat(value,.....) |
拼接 |
.indexof(substring,start) |
子序列位置 |
.substring(from,to) |
根据索引获取子序列 |
.slice(start,end) |
切片 |
.toLowerCase() |
小写 |
.toUpperCase() |
大写 |
.split(delimiter,limit) |
分割 |
(1)substring(from,to) 如果后面的数小于前面的数,就翻转过来进行获取
var a = " Hello World ";
a.substring(5,2); ====> Hel
(2)slice(start,end) 顾头不顾尾(和python的切片用法一样)
var a = " Hello World ";
a.slice(5,-2); =====> lo Wor
如果切片的值大于字符串的长度,就返回空字符串;如果是列表的话,就返回空列表
(3)indexof(字符串,开始位置) 如果找不到就返回-1
var x = "abcb";
var y = "b";
x.indexof(y); ====> 1
x.indexof(y,2); ====> 3
(4)split(要以什么切割,返回的个数)
var a = " Hello";
a.split(" ",2); ====>["","Hello"]
a.split("",4); ====>[" "," ","H","e"]
反引号和格式化 (反引号可以写多行文本)
var name = "alex";
var age = 45;
var s = '我叫${name}'; =====> 我叫alex
3.布尔值 Boolean
var a = true;
var b = false;
""(空字符串) 0 null undefined NaN 都是false
null的值表示空,一般在需要指定或清空一个变量时才会使用,var name = null;
undefined表示当声明一个变量但未初始化,该变量的默认值是undefined (函数无明确的返回值时,返回的是undefined)
null表示变量的值是空 undefined表示只声明了变量,但还没有赋值
4.对象 Object
(1)允许自定义对象
(2)数组作用:使用单独的变量名来存储一系列的值
var a = [123,"ABC"] console.log(a[1]) ====>"ABC"
常用方法:
方法 |
使用方法 |
.length |
数组的大小 |
.push(元素) |
尾部追加元素 |
.pop() |
获取尾部的元素 |
.unshift(元素) |
头部插入元素 |
.shift() |
头部移除元素 |
.slice(start,end) |
切片 |
.reverse() |
反转 |
.join(seq) |
将数组元素连接成字符串 |
.concat(value,......) |
连接数组 |
.sort() |
排序(默认按ASCii码排) |
.forEach() |
将数组的每个元素传递给回调函数 |
.splice() |
删除元素,并向数组添加新元素 |
.map() |
返回一个数组元素调用函数处理后的值的新数组 |
(1)reverse() 数组的反转,直接操作原来的数组
var a = [11,22,33,44]
a.reverse() ====>[44,33,22,11]
(2)sort() 排序 默认按照ASCII码进行排序
var a = [11,2,3,1,4]
a.sort() ====> [1,11,2,3,4]
正常排序的代码
function sortNumber(a,b){
return a-b
}
var arrl = [11,2,3,1,4]
arrl.sort(sortNumber)
(3)splic(index,howmany,item1,item2,.....) 删除元素,并在删除元素的位置上添加元素
var a = [11,22,33,44]
a.splic(1,1,"aaa,"bbb") ====> 返回的是删除的元素 22
console.log(a) =====> [11,"aaa","bbb",33,44]
5.类型查询
typeof是一个一元运算符
typeof "abc" ====>atring
typeof null ====> object
typeof NaN =====> number
typeof 123 =====>number
typeof undefined =====>undefined
typeof true ======> boolean
6.运算符
(1)算数运算符: + - * / %(取余) ++(加1) --(减1)
(2)比较运算符:> >= < <= != == === !==
==:弱等于 会将两个数类型转换成一致,才进行判断
===:强等于 既判断数值相不相等,还会判断类型相不相等
!=:弱不等于 判断两个数值相不相等,类型不相等也会转换成一致的进行比较
!==:强不等于 既判断数值相不相等,还会判断类型相不相等
(3)逻辑运算符:&&(and) ||(or) !(not)
(4)赋值运算符:= += -= *= /=
7.流程控制
if-else:
var a = 10;
if (a>5){
console.log("true");
}else{
console.log("false");
}
if-else if-else: else if(相当于python中的elif)
var a =10;
if (a>5){
console.log("a>5");
}else if(a<5){
console.log("a<5");
}else{
console.log("a=5");
}
switch: case子句中通常都会加break语句,否则程序会继续执行后续的case中的语句
var day = new Date().getDate();
switch (day){
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("Friday");
}
for循环
例子1:循环0-9
for (var i = 0; i < 10;i++){
console.log(i);
}
例子2:循环列表
var a = [11,22,33,44]
for (var i = 0; i < a.length;i++){
console.log(a[i]);
}
while循环
var a = 0;
while (a<10){
console.log(a);
a++;
}
三元云算法
var a = 1;
var b = 2;
var c = a > b ? a : b;
python中的三元运算:
a = 1
b = 2
c = a if a>b else b
三.函数
1.函数的定义
(1)普通的函数:
<script>
function f(){
console.log("Hello World");
}
f()
</script>
(2)带参数的函数:
<script>
function f(a,b){
console.log(arguments); //内置的arguments的对象 可以拿到所有元素,通过索引值进行操作
console.log(arguments.length); //拿到元素的长度
console.log(a,b);
}
f(45,23)
</script>
(3)带返回值IDE函数:
<script>
function sum(a,b){
return a+b;
}
console.log(sum(4,5));
</script>
(4)匿名函数: 潜入别的方法中使用
<script>
var a = function(a,b){
return a + b;
};
console.log(a(4,3));
</script>
(5)自执行函数(立即执行函数):变量的私有化,不会影响全局,这个函数执行完之后就立即销毁,不会像其它函数一样可以继续调用
<script>
(function(a,b){
return a+b;
})(1,2);
</script>
window就是一个全局(窗口)
2.匿名函数
(1)forEach (function (传递的元素参数,索引,元素所属的数组对象))
<script>
var a = [11,22,33,44,55];
a.forEach(function (i,a) {
console.log(i,a);
})
</script>
(2)map (function(传递元素参数,索引,元素所属的数组对象))
<script>
var a =[11,22,33,44,55];
a.map(function (i) {
console.log(i+1);
});
</script>
函数的个别问题:
(1)函数不传参,返回NaN
<script>
function f(a,b) {
console.log(a+b);
}
f()
</script>
(2)不管写多少个返回值,默认返回最后一个,如果要返回多个值,要将其放在数组或对象中
<script>
function bar(){
return 10,20,30
}
console.log(bar())
</script>
(3)传多个参数,从头开始数,只用需要的几个
<script>
function foo(a,b){
return a+b
}
console.log(foo(10,20,300));
</script>
(4)内置的arguments对象
<script>
function mysum(a,b){
var ret = 0;
for (var i = 0;i<arguments.length;i++){
ret += arguments[i];
}
console.log(ret);
}
mysum(10,20,30);
</script>
console.log(arguments) ====>打印出来的是一个列表,里面是穿的参数
3.箭头函数 (=>) 在ES6中使用 箭头函数是匿名函数的简写,箭头函数的this是固定
<script>
var a = [11,22,33,44,55];
a.forEach((i)=>{
console.log(i);
})
</script>
循环打印出a里面的内容
4.函数的全局变量和局部变量
在函数内部可以调用函数外部的变量,但是在函数外部不能找函数内部的变量
例子一
function f(){ var x1 = 100;} x1 会报错,因为外不能调用函数内部的变量
例子二
var x2 = 100; function f2(){ console.log(x2);} 打印出来是100 因为内部可以调用函数外部的变量
5.词法分析
在函数调用的前一瞬间,会先形成一个激活对象AO,并会分析一下3个方面:
(1)函数参数:如果有,则将此参数赋值给AO,且值为undefined;如果没有,则不做任何操作
(2)函数局部变量:如果AO上有同名的值,则不作任何操作;如果没有,则将此变量赋值给AO,并且值为undefined
(3)函数声明:如果AO上有,则会将AO上的对象覆盖;如果没有,则不作任何操作
函数内部无论是使用参数还是使用局部变量都到AO上找
例子1:
var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
}
foo();
在调用函数的前一瞬间,对整个函数进行词法分析:
(1)首先该函数没有参数,没有函数声明,但是有局部变量,但是此时没有与AO同名的值,所以AO.age = undefined,此时词法分析结束
(2)第一个console.log(age)去AO里面找值,此时AO.age = undefined;所以打印出来的是undefined
(3)执行到var age = 22;的时候,将age =22的值赋值给AO.age,所以打印出来的是22
例子2:
var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
function age(){
console.log("呵呵");
}
console.log(age);
}
foo(); // 执行后的结果是？
在调用函数的前一瞬间,进行词法分析
(1)首先该函数没有参数,有函数的局部变量,但是没有与AO同名的值,此时AO.age = unndefined;
(2)该函数中有函数声明,会将AO上的对象给覆盖,所以AO.age = 那个函数声明,此时词法分析结束
(3)执行第一个console.log(age);的时候去AO里面找,所以打印出来的是函数声明
(4)执行到var age = 22;的时候,将22赋值给AO.age,所以打印出来的是22
(5)执行到最后一个console.log(age)的时候,去AO里面找,此时AO.age = 22,所以打印出来的也是22
6.内置对象和方法
JS中所有事物都是对象:字符串,数字,数组等都是对象
(1)自定义对象
JS的对象的本质上是键值对的集合(Hash结构),但是只能用字符串作为键
①自定义对象的两种方式: a["name"] a.name
方式一:
<script>
var a = {"name":"alex","age":18};
console.log(a.name);
console.log(a.age);
</script>
方式二:
<script>
var person = new Object();
person.name = "alex";
person.age = 18;
</script>
遍历对象中的内容
<script>
var a = {"name":"alex","age":18};
for (var i in a){
console.log(i,a[i]);
}
</script>
②创建对象
<script>
var person = new Object();
person.name = "alex";
person.age = 18;
</script>
7.继承
(1)父类的构造方法
var Person = function(dream){
this.dream = dream;
};
(2)父类方法
Person.prototype.makeDream = function(){
console.log("做白日梦");
};
(3)子类构造方法
var Yellow = function(dream){
Person.call(this,dream)
};
(4)继承父类方法
Yellow.prototype = Object.create(Person.prototype);
(5)修复constructor
Yellow.prototype.constructor = Yellow;
(6)子类方法(自己独有的)
Yellow.prototype.sing = function(){
console.log("龙的传人")
};
(7)实例化对象,调用方法
var p1 = new Person("咸鱼翻身");
console.log(p1.dream);
p1.makeDream();
var p2 = new Yellow("没有蛀牙");
console.log(p2.dream);
p2.makeDream();
p2.sing();
8.Date对象
(1)不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
(2)参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
(3)参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
(4)参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒并不直接显示
Date对象的方法:
var d = new Date(); //getDate() 获取日 //getDay () 获取星期 //getMonth () 获取月（0-11） //getFullYear () 获取完整年份 //getYear () 获取年 //getHours () 获取小时 //getMinutes () 获取分钟 //getSeconds () 获取秒 //getMilliseconds () 获取毫秒 //getTime () 返回累计毫秒数(从1970/1/1午夜)
9.Json对象
var str1 = '{"name":"alex";"age":18}'
var obj1 = {"name":"alex","age":18}
JSON字符串转换成对象 反序列化
var obj = JSON.parse(str1);
JSON对象转换成字符串 序列化
var str = JSON.stringify(obj1);
10.RegExp对象
(1)两种创建正则表达式的方式 d需要在浏览器里面转义:\d
第一种:
<script>
var r = new RegExp('^1[3-9][0-9]{9}$');
console.log(r.test("18812341234"));
</script>
第二种:
<script>
console.log(/^1[3-9][0-9]{9}$/.test("18812341234"));
</script>
三个注意事项:
①test()不传值相当于传了一个undefined,undefined会被当成字符串形式的"undefined"来处理
②正则表达式中间不要加空格
③注意全局匹配模式g的lastIndex属性
例子一:
<script>
var r = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}$');
console.log(r.test("yingying")); true
console.log(r.test()); true
console.log(r.test(undefined)); true
console.log(r.test("undefined")); true
var r1 = new RegExp('^[0-9]$');
console.log(r1.test()); false
console.log(r1.test(undefined)); false
console.log(r1.test("undefined")); false
</script>
例子二: i是忽略大小写的匹配模式 g表示全局匹配模式
<script>
var s = "ying YING";
console.log(s.replace("i","哈哈"));
console.log(s.replace(/i/,"嘿嘿"));
console.log(s.replace(/y/i,"呵呵"));
console.log(s.replace(/Y/i,"啦啦"));
console.log(s.replace(/y/gi,"哼哼"));
</script>
例子三:正则表达式加上g就会记录一个lastIndex属性,用来记录下一次从哪里开始匹配
<script>
var r = /alex/g;
console.log(r.test("alex")); true
console.log(r.test("alex")); false
console.log(r.test("alex")); true
console.log(r.lastIndex); 4
console.log(r.test("alex")); false
console.log(r.lastIndex); 0
</script>
11.Math对象
abs(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) 返回角的正切。
例子:任意随机小数
<script>
function myRandom(a,b){
return Math.random()*(b-a)+a
}console.log(myRandom(4,7))
</script>