JavaScirpt(JS)——js介绍及ECMAScript

时间 2019-11-16

原文原文链接

1、JavaScript历史发展

　　JavaScript语言的历史：http://javascript.ruanyifeng.com/introduction/history.htmljavascript

　　1994年12月，Navigator发布了1.0版，市场份额一举超过90%。Netscape 公司很快发现，Navigator浏览器须要一种能够嵌入网页的脚本语言，用来控制浏览器行为。当时，网速很慢并且上网费很贵，有些操做不宜在服务器端完成。好比，若是用户忘记填写“用户名”，就点了“发送”按钮，到服务器再发现这一点就有点太晚了，最好能在用户发出数据以前，就告诉用户“请填写用户名”。这就须要在网页中嵌入小程序，让浏览器检查每一栏是否都填写了。html

　　1995年，Netscape公司雇佣了程序员Brendan Eich开发这种网页脚本语言。Brendan Eich有很强的函数式编程背景，但愿以Scheme语言（函数式语言鼻祖LISP语言的一种方言）为蓝本，实现这种新语言。为了保持简单，这种脚本语言缺乏一些关键的功能，好比块级做用域、模块、子类型（subtyping）等等，可是能够利用现有功能找出解决办法。前端

　　最初名字叫作 Mocha，1995年9月改成LiveScript。12月，Netscape公司与Sun公司（Java语言的发明者和全部者）达成协议，后者容许将这种语言叫作JavaScript。这样一来，Netscape公司能够借助Java语言的声势。java

　　1996年8月，微软模仿JavaScript开发了一种相近的语言，取名为JScript。威胁浏览器脚本语言的主导权python

　　1996年11月，Netscape公司决定将JavaScript提交给国际标准化组织ECMA（European Computer Manufacturers Association），但愿JavaScript可以成为国际标准。程序员

　　1997年7月，ECMA组织发布262号标准文件（ECMA-262）的初版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。es6

　　ECMAScript只用来标准化JavaScript这种语言的基本语法结构，与部署环境相关的标准都由其余标准规定，好比DOM的标准就是由W3C组织（World Wide Web Consortium）制定的。web

2、js的引入方式和输出

一、javascript有三种引入方式

　　1.行内引入面试

　　<开始标签 on+事件类型=“js代码”></结束标签>正则表达式

　　行内引入方式必须结合事件来使用，可是内部js和外部js能够不结合事件。

<body>  
    <input type="button" onclick="alert('行内引入')" value="button" name="button">  
    <button onclick="alert(123)">点击我</button>  
</body>

　　2.内部引入

　　在head或body中，定义script标签，而后在script标签里面写js代码。

<!--内部式 建议
引入的时候要在body以后，咱们要等待全部的dom元素加载完成以后再去执行相应的js操做-->
<script type="text/javascript">
    function clickhandler() {
        // 弹出警告框
        /* 丹参滴丸无
            阿达 阿达
        */
        alert(1);
    }
</script>

　　3.外部引入

　　定义外部js文件(.js结尾的文件)。

<head>
    <!--外链式-->
    <script src="1.js"></script>
</head>

　　注意：

　　1. script标签通常定义在head或body中。

　　2. Script标签要单独使用，要么引入外部js，要么定义内部js，不要混搭；使用外部的JS文件，它具备维护性高、可缓存(加载一次，无需加载)、方便将来扩展、复用性高等特色。新建外部的js文件1.js文件。

alert("外部引入")

二、javascript输出方式

//document.write()向文档内输入内容，不会覆盖原文档的内容
document.write('<span class="span1">233<span>')
//console控制台 输出【开发者工具】
console.log('星儿今天很漂亮！')   //向控制台抛出一个信息
console.error('错误了')   //向控制台抛出一个异常
console.dir(window)    //console.dir()输入一个对象的所有属性
console.clear()     //清除
每一个能独立完成一个功能的代码以分号结束，这就是一个代码块

alert()  //弹出一个带有一条指定信息的消息
innerHTML/innerText   //获取或者向指定元素内添加内容
innerHTML   //获取元素内全部的内容（包括元素），还能够解析内容的样式
innerText    //获取元素内的文本内容

3、变量

一、JS中变量的含义

　　程序运行过程当中它的值是容许改变的量。与它对应的就是常量：即在程序运行过程当中它的值是不容许改变的量。

　　变量是用来储存信息的容器，因为JS是松散数据类型，因此变量中能够放置任何的数据类型。

　　js是跟python同样一样是弱类型的语言，python中定义变量没有关键字： str = ‘alex’；可是在js中定义变量使用关键字：var str = ‘alex’；

注意：

　　（1）声明建立变量使用var关键字，“var a;”此时这个变量中什么都没有，获取变量中返回值时，返回值为udefined。

　　（2）“=”在js中是赋值的意义将等号右边的值赋值给等号左边的变量。“+=”在js中是保留原来的值上累加。

　　（3）一次声明多个变量：每一个变量用逗号隔开，通常会相同数据类型使用一个声明　　　　　

var a = [], fn = function(){}, num=5

二、JS变量的声明

　　1.先声明后定义

// js中代码的执行顺序：自上往下
// 声明
var dog;
alert(dog)  //undefined 未定义
// 定义
dog = "小黄";
alert(dog)

　　2.声明马上定义

var dog_2 = '小红';
console.log(dog_2); //小红

三、JS变量名规范

严格区分大小写
命名时名称能够出现字母、数字、下划线、$ ,可是不能数字开头，也不能纯数字，不能包含关键字和保留字。
```
关键字：var number等

除了关键字 top name 也尽可能不使用。
```
推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其他的单词首字母写
```
//建议使用驼峰标识来对变量进行命名
var myHousePrice = "$1234";
```
匈牙利命名：就是根据数据类型单词的的首字符做为前缀

关键字：

保留字：

4、数据类型

　　js中有两种数据类型：基本数据类型和引用数据类型

　　基本数据类型指的是简单的数据段，包含数字number、字符串string、布尔、null、undefined。

　　引用数据类型指的是有多个值构成的对象，包含对象数据类型（数组array、对象object、正则REGEXP）和函数数据类型（function）。

　　当咱们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值仍是引用类型值。

五种基本数据类型以下所示：

一、数字（number）

// 1.数字类型
var a = 123;
console.log(a)
// typeof 检查当前变量是什么数据类型
console.log(typeof a)

//特例
var e1 = 5/8;
console.log(typeof e1)
console.log(e1)// Infinity无限大. number类型

二、字符串（string）

// 2.字符串类型
var str = "123";
console.log(str)
console.log(typeof(str))

三、布尔（boolean）

// 3.boolean类型
var b1 = true;
var b2 = false;
console.log(b1)
console.log(typeof b1)

四、空值Null

// 4.null
var c1 = null;  //空对象,object类型
console.log(c1)
console.log(typeof c1)

五、空值Undefine

// 5.undefined
var d1;
console.log(d1)
console.log(typeof d1)

　　五种数据类型代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本数据类型</title>
</head>
<body>
    <script type="text/javascript">
        // js中有两种数据类型：基本数据类型和引用数据类型
        // 基本数据类型：number  string boolean null undefined
        // 1.数字类型
        var a = 123;
        console.log(a)
        // typeof 检查当前变量是什么数据类型
        console.log(typeof a)

        //特例
        var e1 = 5/8;
        console.log(e1)// Infinity无限大. number类型
        console.log(typeof e1)

        // 2.字符串类型
        var str = "123";
        console.log(str)
        console.log(typeof(str))

        // 3.boolean类型
        var b1 = true;
        var b2 = false;
        console.log(b1)
        console.log(typeof b1)

        // 4.null
        var c1 = null;  //空对象,object类型
        console.log(c1)
        console.log(typeof c1)

        // 5.undefined
        var d1;
        console.log(d1)
        console.log(typeof d1)
    </script>
</body>
</html>

基本数据类型代码示例

　　执行后在浏览器控制台查看输出：

引用数据类型以下所示：

一、Function

二、Object

三、Array

四、String

五、Date

5、运算符

　　js中的运算符跟python中的运算符有点相似，但也有不一样。所谓运算,在数学上，是一种行为，经过已知量的可能的组合，得到新的量。

一、赋值运算符

　　赋值运算符有=,+=,-=,*=,/=,%=这几种。

var money = prompt("请输入金额....");
var saveMoney = money * (1+0.02);
console.log(saveMoney);  // 打开页面输入100，控制台输出102

二、算数运算符

　　算数运算符最经常使用的是+，-，*，/，%取余。

var a = 10;
var b = 4;
var sum = a + b;
var min = a - b;

// + - * /除  %取余
var div = a/b;
console.log(div);

var lef = a%b;
console.log(lef);

　　此外还有复合运算符、自增（++）自减（--）。

//复合运算符
var c = 7, d = 8;
// d = c + d;
d += c;  //d = 15
console.log(d);

//自增  自减
//d++是先赋值后++：现将d的值赋值给c1，而后再让d加上1对d赋值
var c1 = d++;  // c1=15 d=16
console.log(c1);
console.log(d);

//++d：先相加后赋值
var c2 = ++d;  // c2=17 d=17
console.log(c2);
console.log(d);

三、比较运算符

　　比较运算符主要有>,<,>=,<=,==(等于),===(全等),!=,!==(不等同于，值和类型有一个不相同)

// 比较运算符  >,<,>=,<=,==,===全等
console.log(5>6);  // 输出false

// 隐式转换==比较的是值的大小，===是类型和值的比较
console.log("5"==5);   // 输出true
console.log("5"===5);  // 输出false

四、逻辑运算符

// 逻辑运算符
// &&(and)都真才为真
console.log(true&&true);    // 输出true
console.log(true&&false);   // 输出false
console.log(false&&false);    // 输出false

// ||(or)有真就真
console.log(true||false);   // 输出true
console.log(false||false);  // 输出false

五、字符串处理

　　字符串拼接+字符串运算特殊状况。python中有拼接字符串中更简便的办法，其实在js中也有，你们能够百度引擎搜索es6模板字符串。（扩展）

// 字符串运算
var firstName = "欣";
var lastName = "Li";

// 字符串拼接
var fullName = firstName + " " +lastName;
console.log(fullName);

var name = "伊拉克";
var amy = "美军";
var str = "2003年3月20日，" + name + "战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，" + amy + "又一次取得的大规模压倒性军事胜利";
var fullStr = str;
console.log(fullStr);

// 不能对字符串进行加运算
var a1 = "1";
var a2 = "2";
console.log(a1+a2);   // 输出"12"
console.log(typeof(a1+a2));  // string
console.log(parseInt(a1+a2));  // 转化为12（int）
// 除了加法外，浏览器会自动把字符串转化为数字进行运算
console.log(a1*a2);   // 输出2
console.log(typeof(a1*a2));   // number

console.log(a1-a2);   // 输出-1
console.log(typeof(a1-a2));   // number

　　特殊的NaN:

// NaN即not a number，但倒是number类型
var b1 = "one";
var b2 = "two";
console.log(b1*b2);   // 输出NaN
console.log(typeof(b1*b2));   // number

6、数据类型转换

一、将数值类型转换成字符串类型

// 1.将数字类型转换成字符串类型
var n1 = 123;
var n2 = '';

//隐式转换
var n3 = n1 + n2;
console.log(n3);  // 输出：123
console.log(typeof n3);  //string
//对比
var n4 = '123';
var n5 = n1+n4;
console.log(n5);  //输出：123123
console.log(typeof n5);  //string

// 强制类型转换 String()方法
var str1 = String(n1);
console.log(typeof str1);   // string

// toString()方法
var num = 234;
console.log(num.toString());

二、将字符串类型转换成数值类型

//2.将字符串类型转换成数字类型
var stringNum = '789';
var num2 = Number(stringNum);
console.log(num2);
var stringNum2 = '789.123sdawfwwa9';

// parseInt() 能够解析一个字符串而且返回一个整数
console.log(parseInt(stringNum));
//parseFloat()
console.log(parseFloat(stringNum2));  //789.123

三、任何数据类型均可以转换为boolean类型

//3.将各类数据类型转换为布尔类型
// 在咱们js中全部的数据类型均可以转换为boolean
var b1 = '123';
console.log(Boolean(b1));  // true
// 非0真1
var b2 = 1;
var b3 = 0;
var b4 = -123;
console.log(Boolean(b2));  //true
console.log(Boolean(b3));  //false
console.log(Boolean(b4));  //true
//无限大
var b5 = Infinity;
console.log(Boolean(b5));  //true
//NaN
var b6 = NaN;
console.log(Boolean(b6));  //false
//undefined
var b7;
console.log(Boolean(b7));  //false
//null
var b8 = null;
console.log(Boolean(b8));  //false

7、流程控制

一、if，if-else，if-else if-else

// if语句 若是() .....
var ji = 10;
if(ji>=20){
    console.log("大吉大利，今晚吃鸡")  //command +'+'|'-' 能够控制控制台放大缩小
}else{
    console.log('很遗憾，继续努力')
}

　　if...else...伪代码：

if (true) {
    //执行操做
}else if(true){
    //知足条件执行
}else if(true){
    //知足条件执行
}else{
    //知足条件执行
}

　　注意：浏览器解析代码的顺序是——从上往下执行，从左往右。

二、逻辑与&& 、逻辑或||

// 考试系统录入
var math = 90;
var english = 85;
var sum= 485;

// 1.模拟 总分>400而且数学成绩>89分，被清华大学录入
// 逻辑与&& 两个条件都成立的状况下才成立
if (sum>400 && math>90) {
    alert("被清华大学录取")
}else{
    alert('高考失利，继续努力')
}
// 2.模拟 总分>400或者你的英语成绩>85，被复旦大学录取
// 逻辑或  只要有一个条件成立，就成立
if (sum>400 || english>85) {
    alert("被复旦大学录取")
}else{
    alert("高考又失利，继续努力")
}

// if条件内还容许计算
if ((sum>500) || (math + english)>170) {
    alert(211)
}

三、switch　　

　　case表示一个条件：知足这个条件就会走进来遇到break跳出。break终止循环。若是某个条件中不写 break，那么直到该程序遇到下一个break中止。

// switch 开关
var gameScore = 'best';
// case表示一个条件
switch(gameScore){
    case 'good':
        console.log('玩得很好');
        break;  // 表示退出

    case 'better':
        console.log("玩得牛逼了啊");
        break;

    case 'best':
        console.log('恭喜你，吃鸡成功');
        break;

    default:
        console.log('很遗憾');

}

四、while循环

　　循环三个步骤：1.初始化循环变量 2.判断循环条件 3.更新循环变量　　

var i = 1;
while(i<=9){
    console.log(i)
    i++
}

// 练习：将1-100之间全部3的倍数输出出来
var n = 1;
while (n<=100) {
    if (n % 3 == 0){
        console.log(n);
    }
    n++;
}

五、do_while循环

// 循环三个步骤：1.初始化循环变量  2.判断循环条件  3.更新循环变量
// 无论有没有知足while中的条件,do里面的代码都会走一次
var i = 3;      // 初始化循环变量
do {
    console.log(i);
    i++;        // 更新循环条件
}while (i<3);   // 判断循环条件

六、for循环

// 1.初始化  2.循环条件  3.更新循环变量
for(var i = 1; i<=10; i++) {
    console.log(i)
}

　　课堂练习：打印1-100偶数、打印1-100之间数之和。

//练习1： 1-100之间全部的偶数
for (var i =1; i<=100; i++) {
    if (i%2==0) {
        //偶数
        console.log(i)
    }
}

//练习2：计算1-100之间全部数的和
var sum = 0;
for(var j=1; j<=100; j++) {
    sum = sum + j;
}
console.log(sum);

//练习3：利用document.write('*')画出长方形
//双重for循环
for (var i=1;i<=3;i++) {   // 表示行
    for(var j=1;j<=6;j++) {
        document.write('* ');
    }
    document.write('<br>');  // 换行
}

课堂练习

　　做业：打印直角三角形、打印等边三角形。

//做业：使用*打印直角三角形  6行
// *
// * *
// * * *
// * * * *
// * * * * *
// * * * * * *
for (var i=1;i<=6;i++) {
    for (var j=1;j<=i;j++){
        document.write('* ')
    }
    document.write('<br>')
}

//做业：使用*打印等边三角形
//      *
//     ***
//    *****
//   *******
//  *********
// ***********
for (var i=1;i<=6;i++) {   //行数
    //控制空格数
    for(var s=i;s<=6-1;s++) {
        document.write('&nbsp;');
    }
    for(var j=1;j<=2*i-1;j++) {
        document.write('*');
    }
    document.write('<br>')
}

课堂做业

8、经常使用内置对象——数组

　　所谓内置对象就是ECMAScript提供出来的一些对象，咱们知道对象都是有相应的属性和方法，其实这里不少的js对象跟python的不少语法相似。

　　数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操做。JavaScript 数组的长度和元素类型都是非固定的。

一、数组的建立方式

字面量方式建立（推荐你们使用这种方式，简单粗暴）

var colors =['red','green','yellow'];
console.log(colors);    // 输出：Array(3)  控制台另外一种展示方式：(3) ["red", "green", "yellow"]

// 空数组
var emptyArray = [];

使用构造函数（后面会讲）的方式建立使用new关键词对构造函数进行建立对象

var colors2 = new Array();  // 建立了一个空数组

var colors3 = new Array('white','red','orange');
console.log(colors3);   // (3) ["white", "red", "orange"]

二、数组的赋值

// 数组赋值
var arr = [];
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿';
console.log(arr);  // (3) ["white", "red", "orange"]
// 经过下标取到相应的值
console.log(arr[2]);   // 嘿嘿嘿
console.log(arr.length);  // 3

// 数组遍历
for(var i=0;i<arr.length;i++) {
    console.log(arr[i]);
}

三、数组经常使用方法

// 1.数组的合并  concat()
var north = ['北京','山东','天津'];
var south = ['东莞','深圳','上海'];

var newArr = north.concat(south);
console.log(newArr);    // (6) ["北京", "山东", "天津", "东莞", "深圳", "上海"]

// 2.将数组转换成字符串
var score = [98,78,76,100,0];

// toString() 直接转换为字符串  每一个元素之间使用逗号隔开
var str = score.toString();
console.log(str);   // 98,78,76,100,0

// join()方法，将数组中的元素使用指定的字符串连接起来，它会造成一个新的字符串
var str2 = score.join('|');
console.log(str2);   // 98|78|76|100|0

// 3.查找下标
// indexOf()  正向查找
var index = score.indexOf(78);
console.log(index);   // 输出：1,说明数组是从0开始
// 若是查找的值再也不数组中则返回-1
var indexNull = score.indexOf(101);
console.log(indexNull);   // -1

// lastindex() s 反向查找
var lastIndex = score.lastIndexOf(78);
console.log(lastIndex);    // 1  (依然是1，依然是从0开始)

// 4.数组的排序
var names = ['alex','xiaoma','tanhuang','angel'];

// 反转数组
var reverseNames = names.reverse();
console.log(reverseNames); // (4) ["angel", "tanhuang", "xiaoma", "alex"]
console.log(names);   // (4) ["angel", "tanhuang", "xiaoma", "alex"]

// sort():按照26个英文字母排序数组
var enames = names.sort();
console.log(enames);   // (4) ["alex", "angel", "tanhuang", "xiaoma"]

// 5.移除元素和添加元素
// shift()移除数组中第一个元素 ,返回的结果是移除的第一个元素，原来数组的第一个元素已被移除
var firstName = names.shift();
console.log(firstName);   // alex
console.log(enames);    // (3) ["angel", "tanhuang", "xiaoma"]

// unshift() 想数组的开头添加一个或多个元素，并返回新的长度。
var lastname = names.unshift();  // 添加为空，可是names中原本就有三个元素
console.log(lastname);   // 3
var lastname = names.unshift("shanshan");
console.log(lastname);   // 4  返回的是新的长度

// push()  pop()
// push()  向数组的末尾添加一个或多个元素，并返回新的长度
var newNames = names.push('老村长', '嘿嘿嘿');
console.log(newNames);   // 6
console.log(names);     // (6) ["shanshan", "angel", "tanhuang", "xiaoma", "老村长", "嘿嘿嘿"]

// pop()  删除数组的最后一个元素
var a = names.pop()  // a 是被删除的元素（注意：不是索引了）
console.log(a)       // 嘿嘿嘿
console.log(names)   // (5) ["shanshan", "angel", "tanhuang", "xiaoma", "老村长"]

// 练习，把下面的字符串反转
// length 是一个属性，惟一的一个，获取数组的长度，能够结合for循环遍历操做
var str = 'hello luffy';
console.log(str.split('').reverse().join(''))  // yfful olleh

　　关于前端的各类语法、方法能够查看MDN网站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

9、经常使用内置对象——String、Number、Date和Math

一、字符串String

　　String 对象用于处理文本（字符串）。

// String 字符串对象
var str = "hello alex";
console.log(str.length);  // 输出：10 （5+1+4）

　　JavaScript String对象方法：http://www.w3school.com.cn/jsref/jsref_obj_string.asp

// 转换为大写
var bigStr = str.toUpperCase();
console.log(bigStr);     // HELLO ALEX
// 转换为小写
console.log(bigStr.toLowerCase());   // hello alex

// split()第一个参数是以什么样的字符串进行切割；第二个参数是返回的数组的最大长度
var newArr = str.split(' ',1);
console.log(newArr);  // ["hello"]
var newArr2 = str.split('',3);
console.log(newArr2);  // (3) ["h", "e", "l"]

// substring 左闭右开，会返回一个新的字符串
var a = str.substring(2,6);
console.log(a);    // llo

　　注意：JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。

二、Number对象

　　Number 对象是原始数值的包装对象。

// toString()将number类型转换成字符串类型
var num = 132.32;
var numStr = num.toString();
console.log(typeof numStr);   // string

// toFixed()四舍五入
var num2 = 33.31331341;
var newNum = num2.toFixed(2);
console.log(newNum);  // 33.31

　　Number其余对象介绍：http://www.w3school.com.cn/jsref/jsref_obj_number.asp

三、Date日期对象

　　Date 对象用于处理日期和时间。能够经过 new 关键词来定义 Date 对象。Date 对象自动使用当前的日期和时间做为其初始值。

// 建立日期对象
var myDate=new Date();

// 获取一个月中的某一天
console.log(myDate.getDate());   // 7 (今天是6月7日)
console.log(Date());    // Thu Jun 07 2018 11:58:22 GMT+0800 (CST)
// 获取一年中的某一个月 从 Date 对象返回月份 (0 ~ 11)
// 注意：表示月份的参数介于 0 到 11 W3C Javascript 最新Chm格式手册.chm之间。也就是说，若是但愿把月设置为 6 月，则参数应该是 5。
console.log(myDate.getMonth()+1); // 6

// getDay()  从 Date 对象返回一周中的某一天 (0 ~ 6)
console.log(myDate.getDay());  // 4 (今天是周四)
// 注意：星期一是"1"；星期天是"0"。

四、Math对象的使用

　　Math（算数）对象的做用是：执行常见的算数任务。

　　使用Math的属性和方法的语法：

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);

　　注意：Math 对象并不像 Date 和 String 那样是对象的类，所以没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需建立它，经过把 Math 做为对象使用就能够调用其全部属性和方法。

var x = 1.234;
// 天花板函数  返回值大于等于 x，而且与它最接近的整数
var a = Math.ceil(x);
console.log(a);   // 2

// 地板函数， 返回值小于等于 x，且与 x 最接近的整数
var b = Math.floor(x);
console.log(b);   // 1

// 求 两个数的最大值和最小值
console.log(Math.max(2,5));  // 5
console.log(Math.min(3,7));  // 3

// 常用的random 方法可返回介于 0 ~ 1 之间的一个随机数
var ran = Math.random();
console.log(ran);  // 返回值包含0，可是不包含1

// 100-200之间的随机数
var c = Math.random()*100 + 100;
console.log(c)   // 137.9650704173937(随机)

// min - max 之间的随机数公式：
// min + Math.random()*(max-min)
// 5-15
var d = 5+Math.random()*(15-5);

10、函数

　　函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

　　回顾Python中函数的建立：

/*
py中函数的声明：
def add():
    pass
py中函数的调用：
    add()
*/

一、js中函数调用形式

// 1.js中函数的声明  记得：有函数的声明，就必定有调用
function add() {
    // 执行的一些操做
    alert();
}
// 2.js中函数的调用
add();

　　另一种声明函数的方式：

var add = function(){
    alert('函数被调用了')；
}
add()

二、声明函数的时候带参数　　

// 2、声明函数的时候带参数
function add2(a,b) {
    alert(a+b);
}

add2(3,4);

三、声明函数的时候带有参数且有返回值

// 3、声明函数的时候带有参数，且有返回值
function add3(x,y) {
    return x+y;
}

var sum = add3(3,5);  // 声明变量接收返回值
alert(sum);

11、对象

一、使用Object或对象字面量建立对象

　　JS中最基本建立对象的方式：

var student = new Object();
student.name = "easy";
student.age = "20";

　　这样，一个student对象就建立完毕，拥有2个属性name以及age，分别赋值为"easy"和20。

　　上面这种方法有一种封装性不良的感受，字面量方式建立对象以下：

// 字面量方式建立  (推荐使用这种方式  简单直观)
// key:value 字典的方式存储
var stu = {
    name:'alex',
    age:22,
    fav:'鸡汤'
}
console.log(stu);    // {name: "alex", age: 22, fav: "鸡汤"}
console.log(window);  // window经过构造函数实现  Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

　　会发现一个十分尖锐的问题：当咱们要建立同类的student1，student2，…，studentn时，咱们不得不将以上的代码重复n次....

// 点语法：包括get方法和set方法
var n = stu.name;
console.log(n);     // alex

stu.age = 34;
console.log(stu.age);  // 34

二、工厂模式建立对象

　　JS中没有类的概念，那么咱们不妨就使用一种函数将以上对象建立过程封装起来以便于重复调用，同时能够给出特定接口来初始化对象。

function createStudent(name, age) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  return obj;
}

var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);

三、构造函数模式建立对象

　　Object() 构造函数，首字母大写，碰到构造函数，要想建立对象，须要用new。

var obj = new Object();
obj.name = 'xiaomage';
console.log(obj);    // {name: "xiaomage"}

　　在建立原生数组Array类型对象时也使用过其构造函数：

var arr = new Array(10);  //构造一个初始长度为10的数组对象

　　在进行自定义构造函数建立对象以前，咱们首先了解一下构造函数和普通函数有什么区别：

　　（1）实际上并不存在建立构造函数的特殊语法，其与普通函数惟一的区别在于调用方法。对于任意函数，使用new操做符调用，那么它就是构造函数；不使用new操做符调用，那么它就是普通函数。

　　（2）按照惯例，咱们约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分两者。例如上面的new Array()，new Object()。

　　（3）使用new操做符调用构造函数时，会经历 1)建立一个新对象；2)将构造函数做用域赋给新对象（使this指向该新对象）；3)执行构造函数代码；4)返回新对象；4个阶段。

//------------------构造函数---------------------------
// 1.函数名首字母要大写
// 2.构造函数不须要return
// 3.为对象添加成员变量：this  (相似python中self)
var Stu = function () {
    this.name = '武大';
    this.age = 110;
    this.fav = function () {
        console.log('泡妹子')
    }
}

// 建立这个对象
var s = new Stu();
console.log(s);    // Stu {name: "武大", age: 110, fav: ƒ}

var s1 = new Stu();
console.log(s1);
// 弊端：每次new一个新对象，里面的成员变量和方法都同样。

　　构造函数的方式有两种：

// 推荐使用的构造函数的方式一：
function Animal() {
    this.name = 'jingjing';
    this.age = 12;
    this.fav = function () {
        console.log(this.age)
    }
}
var a = new Animal();
a.fav();   // 输出：12

// 另外一种写法，方式二：
function Animal2() {
    this.name = "jingjing";
    this.age = 12;
}
Animal2.prototype.showname = function () {
    alert(this.name);
}
// 能够在外部任意添加新的方法,不用把全部的方法写在函数中
Animal2.prototype.showage = function () {
    alert(this.age);
}
var b = new Animal2()
b.showname()

四、原型模式建立对象　

　　原型链甚至原型继承，是整个JS中最难的一部分也是最很差理解的一部分，在这里因为咱们课程定位的缘由，若是对js有兴趣的同窗，能够去查阅一下相关JS原型的一些知识点。更加有助于你之后前端JS的面试。

function Student() {
    this.name = 'easy';
    this.age = 20;
}


Student.prototype.alertName = function(){
                                alert(this.name);
                              };

var stu1 = new Student();
var stu2 = new Student();

stu1.alertName();  //easy
stu2.alertName();  //easy

alert(stu1.alertName == stu2.alertName);  //true 两者共享同一函数

12、定时器

　　在js中的定时器分两种：一、setTimeout() 二、setInterval()

一、setInterval()

　　在指定时间为周期循环执行。

// 实时刷新时间单位为毫秒
var n = 0;
var time = null;   // 空对象
time = setInterval(function () {
    n++;
    console.log(n);
}, 1000);

二、setTimeout()

　　只在指定时间后执行一次。　　

setTimeout(function () {
    console.log(time);   // 1
    clearInterval(time);   // 结束定时器
}, 5000);


//定时器 异步运行  
function hello(){  
alert("hello");  
}  
//使用方法名字执行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  
window.clearTimeout(t1);//去掉定时器

十3、正则表达式

　　正则：对象RegExp；正则表达式：检索字符串，用来规定文本搜索的内容。

一、建立正则表达式

//1. 构造函数建立  new RegExp("检测文本","修饰符")
//参数1  正则表达式（不能有空格）
//参数2  匹配模式：经常使用g（全局匹配；找到全部匹配，而不是第一个匹配后中止）和i（忽略大小写吧）
var str = 'luffy 2018';
var reg1 = new RegExp('l','ig');
console.log(reg1);   // 输出：/l/gi

//2. 字面量方式建立
var reg2 = /y/ig;    // 检测字符y，不区分大小写，全局匹配

二、正则对象提供的检索方式

//正则对象提供的检索方式
//1.test() 检测字符串中是否包含定义字符模式，返回布尔
//要检索的字符在字符串str中 返回true
// console.log(reg2.test(str));  // true

//2.exec()方法就是用来检索字符串中正则表达式的匹配
// 若是匹配到了就返回一个存放有结果的数组，若是没有匹配到就返回一个null
console.log(reg2.lastIndex);  // 0 保存一次匹配时开始的下标
console.log(reg2.exec(str));  // ["y", index: 4, input: "luffy 2018", groups: undefined]
console.log(reg2.lastIndex);  // 5

三、经常使用的方法

//match  字符串.match(正则)
var str = "hello world";
var reg3 = /o/g;
// 使用正则表达式模式对字符串执行查找，并将包含查找的结果做为数组返回
console.log(str.match(reg3));    // (2) ["o", "o"]

//replace替换： str.replace(被替换的，替换的)
console.log(str.replace(reg3,'*'));   // hell* w*rld

//search()  查询字符串在字符中出现的位置 下标
console.log(str.search(reg3));  // 4

//split()  以匹配的规则分割
console.log(str.split(reg3));  // (3) ["hell", " w", "rd"]

十4、正则表达式——元字符

　　元字符（Metacharacter）是拥有特殊含义的字符　　

一、单个字符和数字

//1   . 匹配除换行符(\n)之外的任意字符
var str = "luffyCity 2018";
var reg = /./g;
console.log(reg.exec(str));  // ["l", index: 0, input: "luffyCity 2018", groups: undefined]

// \.表示转义匹配.
var str = "www.baidu.com";
var reg = /www\......\.com/g;   //若是想不让字符有其余意义  转义\
console.log(reg.exec(str));  // ["www.baidu.com", index: 0, input: "www.baidu.com", groups: undefined]

//2.[]  匹配[]里面的任意一个字符
var str1 = "4awebadsads";
var reg1 = /[a-zA-Z0-9]/g; // 匹配字母仍是数字
console.log(reg1.exec(str1));  // ["4", index: 0, input: "4awebadsads", groups: undefined]

var str2 = "1s334";
var reg2 = /[0-9][0-9][0-9]/g;  // 匹配多个字符
console.log(reg2.exec(str2));  // ["334", index: 2, input: "1s334", groups: undefined]

//3.[^] 全部不在这个范围内的字符
var str3 = "abd123";
var reg3 = /[^a-z][^A-Z]/g;  //匹配除小写字母之外的任意字符
console.log(reg3.exec(str3));  //["12", index: 3, input: "abd123", groups: undefined]

//4.\d：匹配数字   对立  \D：匹配非数字
var str4 = "web";
var reg4 = /\d/g;   //匹配数字
var reg5 = /\D/g;   //非数字
console.log(reg4.exec(str4));  //null
console.log(reg5.exec(str4));  //w

//5.\w：匹配数字、字母、下划线   \W：匹配除数字、字母、下划线之外的任意字符
var reg6 = /\w/g;  //匹配数字 字母  下划线_
var reg7 = /\W/g;  //匹配除数字 字母  下划线之外的任意字符
console.log(reg6.exec(str4));   //w
console.log(reg7.exec(str4));   //null

//6.\s:匹配空格    trim():去除字符串空白
var str5 = " luffy";
var reg8 = /\s/g; //空格
var reg9 = /\S/g; //非空白字符
console.log(reg8.exec(str5));   //" "
console.log(reg9.exec(str5));   //l

//7.锚字符  ^以什么开头     $以什么结尾
var str6 = "www.luffy.com";
var reg10 = /^www/g;  // ^字符
console.log(reg10.exec(str6));  // www

var reg11 = /www\......\.com$/g;   //字符$
console.log(reg11.exec(str6));  // www.luffy.com

var reg12 = /www\...\.com$/g;
console.log(reg12.exec(str6));  // null

二、重复的字符

//1. ?  匹配前面的字符0个或一个 ，
var strs = "123webr44546ere";
var reg12 = /[0-9]?/g;
console.log(reg12.exec(strs));   // '1'

//2. *  匹配0个或任意多个字符    尽量多的匹配
var reg13 = /[a-z]*/g; //匹配小写字母，0个或多个
console.log(reg13.exec(strs));  // ""   匹配了0个小写字符

//3. + 至少匹配一次
var reg14 = /\d+/g; // 匹配数字
console.log(reg14.exec(strs));  // "123"

//4. {10}：匹配连续的10个字符
var stra = "11274567800";
// 以1开头后面连续匹配9个数字结尾
var rega = /^1\d{10}$/g; //以1开头，匹配连续的十个数字
console.log(rega.exec(stra));  // "11274567800"

//5. {min,max} 最少min个最多max个
var strb = "edg";
// 以大小写英文字母结尾开头而且最少2个最多3个字母结尾
var regb = /^[a-zA-z]{2,3}$/g;
console.log(regb.exec(strb));  // "edg"

//6. |：竖线  或者
var strc = "www.google"; //baidu  google   ujiuye
var regc = /www.baidu|google|ujiuye/g;
console.log(regc.exec(strc));  // "google"

//7. ()：分组
var strc1 = "www.google"; //baidu  google   ujiuye
var regc1 = /(baidu)|(google)|(ujiuye)/g;
console.log(regc1.exec(strc1));
/*
(4) ["google", undefined, "google", undefined, index: 4, input: "www.google", groups: undefined]
0:"google"  匹配对的字符串
1:undefined  匹配不到
2:"google"
3:undefined
groups:undefined
index:4
input:"www.google"
*/

//获取匹配的字符串
console.log(RegExp.$1);
console.log(RegExp.$2);  // google
console.log(RegExp.$3);

var str = "helloworld";
var reg = /(hello)(world)/g;
console.log(reg.exec(str));  // (3) ["helloworld", "hello", "world", index: 0, input: "helloworld", groups: undefined]
console.log(RegExp.$1);  // hello
// 将分组好的匹配，调换顺序
console.log(str.replace(reg,"$2 $1"));   // world hello

三、正则表达式的相关应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则练习</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function () {
            // 1.检索字符串中是否不包含字母
            var str = '12';
            var reg1 = /[^a-zA-Z]/g;
            if (reg1.test(str)) {
                console.log('不包含');  // 输出的是： 不包含
            } else {
                console.log('包含');
            }

            // 2.去除字符串收尾空格
            var str2 = "       hello world     ";
            // 开头的空格
            var reg = /^\s+/ig;
            var str3 = str2.replace(reg, "");
            var reg2 = /\s+$/ig;
            var str4 = str3.replace(reg2, "");
            console.log("|" + str4 + "|");   // |hello world|

            var oBtn = document.getElementById('btn');

            // 3.检查用户帐号
            function checkUser(str) {
                var re = /^[a-zA-Z]\w{3,15}$/;
                if (re.test(str)) {
                    console.log("正确");
                } else {
                    console.log("错误");
                }
            }
            checkUser("alex_hah");  // 调用  输出：正确

            // 4.手机号码
            // 验证规则：11位数字，以1开头
            function checkMobile(str) {
                var re = /^1\d{10}$/;
                if (re.test(str)) {
                    console.log("正确");
                } else {
                    console.log("错误");
                }
            }
            checkMobile('13800138000');  // 调用  输出：正确
            checkMobile('139888888889');   // 错误示范  输出：错误

            // 5.电话号码
            /*
            验证规则：区号+号码，区号以0开头，3位或4位
                     号码由7位或8位数字组成
                     区号和号码之间能够无链接符，也能够"-"链接
             */
            function checkPhone(str) {
                var re = /^0\d{2,3}-?\d{7,8}$/;
                if (re.test(str)) {
                    console.log("正确");
                } else {
                    console.log("错误");
                }
            }
            checkPhone("095-5777777"); // 调用

            // 6.邮箱
            /*
            验证规则：姑且把邮箱地址分红"第一部分@第二部分"这样
            第一部分：由字母、数字、下划线、短线"-"、点号"."组成
            第二部分：为一个域名，域名由字母、数字、短线"-"、域名后缀组成
            而域名后缀通常为.xxx或.xxx.xx，一区的域名后缀通常为2-4位，如cn，com
             */
            function checkEmail(str) {
                var re = /^(w-*\.*) + @(\w-?)+(\.\w{2,}) + $/
                if (re.test(str)) {
                    console.log("正确");
                } else {
                    console.log("错误");
                }
            }
            checkEmail("alex@cnblogs.cn"); // 调用
        }
    </script>
</body>
</html>

检索字符串、检查字符串、手机、邮箱地址等

思惟导图：https://www.processon.com/view/link/5add4ef9e4b04691064d5e37

1. JavaScript ECMAScript版本介绍
2. ECMAScript 6 let 命令介绍
3. 详细介绍ECMAScript基础
4. JavaScript快速入门-ECMAScript对象介绍
5. [ECMAScript系列] : JavaScript基本介绍
6. js之ECMAscript
7. js--EcmaScript(一)
8. js介绍
9. 14、JS介绍
10. js 介绍
更多相关文章...
• 网站主机介绍 - 网站主机教程
• Spring目录结构和基础JAR包介绍 - Spring教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• Flink 数据传输及反压详解