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

Winter_world

发布于 2020-09-25 10:24:04

93300

代码可运行

文章被收录于专栏：技术小屋-未分类技术小屋-未分类

运行总次数：0

代码可运行

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>

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/05/19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript