1、JavaScript概述

JavaScript不同于HTML、CSS，其是一种客户端脚本语言，运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎。其是脚本语言，不需要编译，直接可以被浏览器解析执行。

JavaScript可以增强用户和html页面的交互，可以控制html元素，让页面有一些动态的效果，增强用户的体验。

JavaScript发展史：

1992年，Nombase公司开发出全球第一款客户端脚本语言，专门用于表单的校验，命名为：C--，后来更名为ScriptEase；
1995年，Netspace(网景)公司，开发了一门客户端脚本语言：LiveScript；后来请来SUN公司的专家，在LiveScript基础上进行修改，命名为JavaScript；
1996年，微软抄袭了JavaScript抄袭了JScript语言，搭载在自己的IE浏览器上；
1997年，ECMA(欧洲计算机制造商协会)，ECMAScript，成了所有客户端脚本语言的标准。

JavaScript=ECMAScript+JavaScript自己特有的东西（BOM+DOM）；

2、ECMAScript客户端脚本语言标准

2.1、基本语法

与html结合
内部JS：定义一个<script>标签，标签体内容就是js代码
外部JS：定义一个<script>标签，通过src属性引入外部js文件
【注意】：<script>标签可以定义在html的任何外部，但是位置不同会影响执行顺序；另外，可以定义多个。
注释
单行注释：//注释内容
多行注释：/*注释内容*/
数据类型
原始数据类型（基本数据类型）：
number:数字。整数/小数/NaN(不上数字的数字类型)
string:字符串。字符/字符串 “abc” "a" 'abc'
boolean：true 、false
null：一个对象为空的占位符
undefined：未定义，若一个变量没有初始化值，则默认为undefined
引用数据类型：对象
变量
变量：一块存储数据的内存空间。
Java是强类型的语言，JavaScript是弱类型的语言。
强类型：开辟变量存储空间时定义数据类型，只能存储固定类型的数据；弱类型无需指定，可存储任意类型。
语法：var 变量名 = 初始化值；

【举例】：定义不同的数据类型

    <script>
        //定义number类型
        var num =1;
        var num2=1.2;
        var num3=NaN;
        //输出到页面
        document.write(num+"---"+typeof(num) +"<br>");
        document.write(num2+"---"+typeof(num2) +"<br>");
        document.write(num3+"---"+typeof(num3) +"<br>");

        //定义string类型
        var str = '1bc';
        var str2 = "aaa";
        document.write(str+"---"+typeof(str) +"<br>");
        document.write(str2+"---"+typeof(str2) +"<br>");
        //定义boolean类型
        var flag = false;
        document.write(flag+"---"+typeof(flag) +"<br>");
        //定义null
        var obj = null;
        var obj2 = undefined;
        var obj3;
        document.write(obj+"---"+typeof(obj) +"<br>");
        document.write(obj2+"---"+typeof(obj2) +"<br>");
        document.write(obj3+"---"+typeof(obj3) +"<br>");

    </script>

运算符
一元运算符：只有一个运算数的运算符：++ ， -- ，+ ，-，+3
注意：JS中，若运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换。
```
        //string转number，按照字面值转换，若字面值不是数字，则转为NaN
        var b =+"123";
        document.write(b+"---"+typeof(b) +"<br>");
        //boolean转number，true转为1，false转为0
        var flag = +true;
        var flag2 = +false;
        document.write(flag+"---"+typeof(flag) +"<br>");
        document.write(flag2+"---"+typeof(flag2) +"<br>");
```
算数运算符：+，-，*，/
赋值运算符：=，+=，-=
比较运算符：> < >= <= == ===(全等于)
注意：比较类型：类型相同直接比较、类型不同先进行类型转换再比较
字符串：按照字典大小顺序比较，按位逐一比较，直到得出大小为止。
===：全等于，比较前先判断类型，若不一致，直接返回false。
```
        document.write((3>4)+"<br>");  //fasle
        document.write(("abc" < "bcd") + "<br>");//true
        document.write(("123" == 123) + "<br>");//true
        document.write(("123" === 123) + "<br>");//fasle
```
逻辑运算符：&& || |
注意：其他类型转boolean，
number：0或NaN为假，非0为真；
string：除了空字符串("")，其他都为真；
null&undefined：都是false；
对象：所有对象都是true；
三元运算符：?：
特殊语法(了解即可)
1）语句以分号结尾，但是一行只有一行语句时，分号可以省略，但是不建议这么做，不规范；
2）变量的定义可以不使用var关键字，用的话是局部变量，不用的话是全局变量，不建议用，不规范；
流程控制语句：if else、switch、while、do...while、for
注意：在java中，switch语句可以接收的数据类型：byte、int、short、char、枚举、String
在JS中，switch语句可以接收任意类型的数据；

【举例】：练习实现99乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9*9运算表</title>

    <style>
        td{
            border: 1px solid;
        }
    </style>

    <script>
        //2.完成表格嵌套
        document.write("<table align='center'>");
        //1.完成基本的for循环嵌套，展示乘法表
        for(var i=1; i<=9; i++){
            document.write("<tr>");
            for(var j=1;j<=i;j++){
                document.write("<td>");
                document.write(i+"*"+j+"="+(i*j)+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
            }
        }
        document.write("</table>");
    </script>
</head>
<body>

</body>
</html>

2.2、JavaScript对象

JavaScript的基本对象包括：Function、Array、Boolean、Date、Math、Number、String、RegExp、Global。

1、Function：函数（方法）对象
创建：1）var fun = new Function(形参列表，方法体)； //基本不用，不用掌握
2）function 方法名称(形参列表){ 方法体 }

    <script>
        function fun2(a,b) {
            alert(a+b);
        }
        fun2(3,4);
    </script>

3）var 方法名 = function(形参列表){ 方法体 }

        var fun3 = function (a,b) {
            alert(a+b);
        }
        fun3(3,4);

属性：length：代表形参的个数；
特点：1）方法定义时，形参和返回值的类型不用写；
2）方法是一个对象，如果定义名称相同的方法，会覆盖；
3）在JS中，方法的调用只与方法的名称有关，和参数列表无关；
4）在方法声明中隐藏一个内置对象（数组），arguments，封装所有的实际参数；

        function add() {
            var sum =0;
            for(var i=0;i<arguments.length;i++)
                sum +=arguments[i];
            return sum;
        }
        var sum = add(1,2,3,4);
        alert(sum);

2、Array：数组对象

创建：1）var arr = new Array(元素列表)；
2）var arr = new Array(默认长度)；
3）var arr = [元素列表]；

    <script>
        var arr1 = new Array(1,2,3);
        var arr2 = new Array(3);
        var arr3 = [1,2,3];
        var arr4 = new Array();
        document.write(arr1+"<br>");
        document.write(arr2+"<br>");
        document.write(arr3+"<br>");
        document.write(arr4+"<br>");
    </script>

属性： length：代表数组的长度；
方法：1）join(参数) 将数组中的元素按照指定的分隔符拼接为字符串，不传参数，默认为按逗号拼接；
2）push(参数) 向数组的尾部添加一个或更多元素，返回新的长度；
特点：1）JS中数组元素的类型是可变的；
2）JS中数组的长度是可变的；

        var arr = [1,"abc",true];
        document.write(arr+"<br>");
        document.write(arr[0]+"<br>");
        document.write(arr[1]+"<br>");
        document.write(arr[2]+"<br>");
        document.write(arr[3]+"<br>"); //输出为 undefined

3、Date：日期对象

创建：1）var date= new Date()；
方法：1）toLocalString（）;返回当前date对象对应的时间本地字符串格式；
2）getTime(）;返回当前对象描述的时间到1970.1.1零点的毫秒值差，一般用作时间戳；

    <script>
        var date = new Date();
        document.write(date);//Tue May 19 2020 16:09:20 GMT+0800 (中国标准时间)
        document.write(date.toLocaleString());
    </script>

4、Math：数学对象

属性： PI
方法：1）radom(); 返回0-1之间的随机数，含0不含1；
2）cell(); 对数进行向上舍入；
3）floor()；对数进行向下舍入；
4）round()；四舍五入为最接近的整数；
特点：1）JS中Math对象不用创建，直接使用：Math.方法；

【举例】：产生一个1-100的随机整数

    <script>
        document.write(Math.floor(100*Math.random())+1+"<br>");
    </script>

5、RegExp：正则表达式对象

正则表达式是定义字符串的组成规则的：
1）单个字符：[]，如[a] [ab] [a-z] [a-zA-Z0-9]
特殊符号代表特殊含义的单个字符：
\d 单个数字字符 [0-9]
\w 单个单词字符 [a-zA-Z0-9]
2）量词符号：？表示出现0次或1次
* 表示出现0次或多次
+ 表示出现1次或多次
{m,n} 表示m<=数量 <=n，若m缺省，表示最多n次，若n缺省，表示最少m次
3）开始结束符号：^开始、$结束

创建：1）var reg = new RegExp("正则表达式"); 用这种方式需要注意加转义符
2）var reg = /正则表达式/; 一般用这种方式；
方法：1）test(参数），验证指定的字符串是否符号正则定义的规范；

    <script>
        var reg = new RegExp("^\\w{6,12}$");
        var reg2 = /^\w{6,12}$/;
        var name = "zhhhzhzhh";
        var flag = reg2.test(name);
        alert(flag);
    </script>

6、Global对象

特点： 全局对象，其中封装的方法不需要对象就可以直接调用；
方法：1）encodeURI() ，url编码
2）dencodeURI()，url解码
3）encodeURIComponent() ，url编码，编码的字符更多
4）dencodeURIComponent()，url解码，编码的字符更多
5）parseInt()，将字符串转换为数字，逐一判断每一个字符是否是数字，直到不是数字为止，将前面数字部分转为number
6）isNaN()，判断一个值是否是NaN（NaN六亲不认，NaN自己都不认）
7）eval()，将JS字符串，把它作为脚本代码执行

<script>
        //encodeURI  decodeURI encodeURIComponent decodeURIComponent
        var str = "百度一下";
        var encode = encodeURI(str);
        document.write(encode+"<br>");  //%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B
        var s = decodeURI(encode);
        document.write(s+"<br>"); //百度一下

        var str1 = "百度一下";
        var encode1 = encodeURIComponent(str1);
        document.write(encode1+"<br>");  //%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B
        var s1 = decodeURIComponent(encode1);
        document.write(s1+"<br>"); //百度一下
        //parseInt()
        var str2 = "123aa";
        var num = parseInt(str2);
        document.write(num+"<br>");
        //isNaN
        var a = NaN;
        document.write((a==NaN)+"<br>");
        document.write(isNaN(a)+"<br>");
        //eval
        var jscode = "alert(123)";
        eval(jscode);
    </script>

本文为博主原创文章，转载请注明出处，若本文对您有些许帮助，关注/评论/点赞/收藏，就是对我最大的支持，多谢！

JavaWeb——JavaScript精讲之ECMAScript标准（基本语法、JavaScript对象）

1、JavaScript概述

2、ECMAScript客户端脚本语言标准

2.1、基本语法

2.2、JavaScript对象

猜你喜欢