JS

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>

posted @ 2018-09-04 17:38 Sunny_l 阅读(146) 评论(0) 编辑收藏举报

刷新页面返回顶部

愿她成长

JS

JS -----> JavaScript:实现页面上的动态效果

一.JS的理论知识

1.JS的历史及ECMAScript

2.JS的三大部分

3.JS的引入方式

(1)script标签内写代码 (head和body都可以写)

(2)额外引入JS文件

html文件代码:

JS文件代码:

4.JS的语言规范

5.JS的语言基础

二.JS的数据类型

1.数值 Number

常用方法:

2.字符串 String

常用方法:

方法

使用方法

.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) 如果后面的数小于前面的数,就翻转过来进行获取

(2)slice(start,end) 顾头不顾尾(和python的切片用法一样)

(3)indexof(字符串,开始位置) 如果找不到就返回-1

(4)split(要以什么切割,返回的个数)

反引号和格式化 (反引号可以写多行文本)

3.布尔值 Boolean

null的值表示空,一般在需要指定或清空一个变量时才会使用,var name = null;

undefined表示当声明一个变量但未初始化,该变量的默认值是undefined (函数无明确的返回值时,返回的是undefined)

null表示变量的值是空 undefined表示只声明了变量,但还没有赋值

4.对象 Object

常用方法:

方法

使用方法

.length

数组的大小

.push(元素)

尾部追加元素

.pop()

获取尾部的元素

.unshift(元素)

头部插入元素

.shift()

头部移除元素

.slice(start,end)

切片

.reverse()

反转

.join(seq)

将数组元素连接成字符串

.concat(value,......)

连接数组

.sort()

排序(默认按ASCii码排)

.forEach()

将数组的每个元素传递给回调函数

.splice()

常用方法:　　　

(2)sort() 排序默认按照ASCII码进行排序

(1)算数运算符: +　　-　　*　　/　　%(取余)　　++(加1)　　--(减1)

(2)比较运算符:>　　>=　　<　　<=　　!=　　==　　===　　!==

(3)逻辑运算符:&&(and)　　||(or)　　!(not)

(4)赋值运算符:=　　+=　　-=　　*=　　/=

3.箭头函数 (=>) 在ES6中使用箭头函数是匿名函数的简写,箭头函数的this是固定

JSON字符串转换成对象反序列化

JSON对象转换成字符串序列化