Java-JavaScript基础-第33节-CSDN博客

本文链接：https://blog.csdn.net/zuefeng/article/details/110494619

学习目标：

了解JavaScript的相关概念，明确JavaScript的历史
熟练掌握ECMAScript的基本语法
熟练使用ECMAScript的基本对象

学习内容：

一、JavaScript入门

1、概念：一门客户端脚本语言

运行在客户端浏览器中。每一个浏览器都有JavaScript解析引擎
脚本语言：不需要编译，直接可以被浏览器解析执行

2、功能

增强用户和HTML页面交互
控制HTML元素，让页面有一些动态效果，增强用户体验

3、JavaScript发展史

1992年，Nombase公司开发出第一门客户端脚本语言，专用于表单校验，命名为：C–
后来更名为：ScriptEase
1995年，Netscape（网景）公司，开发了一门客户端脚本语言，命名为：LiveScript，
后来请来SUN公司专家修改，命名为：JavaScript
1996年，微软抄袭JavaScript开发出JScript语言
1997年，ECMA（欧洲计算机制造商协会），ECMAScript，所有客户端脚本语言标准
注意：JavaScript = ECMAScript + JavaScript（BOM+DOM）

二、ECMAScript：客户端脚本语言标准

1、基本语法

与HTML结合方式
- 内部JS：定义<script>标签，标签体内容就是js代码
- 外部JS：定义<script>标签，通过src引入外部js文件
- 注意
  - <script>可以定义在HTML页面的任何地方，但是定义的位置会影响执行顺序
  - <script>可以定义多个
注释
- 单行注释：//注释内容
- 多行注释：/*注释内容*/
数据类型
- 原始数据类型（基本数据类型）
  - number：数字。整数/小数/NaN（not a number：一个不是数字的数字类型）
  - string：字符串。字符/字符串 “abc” ‘a’
  - boolean：true或false
  - null：一个对象为空的占位符
  - undefined：未定义。一个变量没有初始化，默认为undefined
- 引用数据类型（对象）
变量
- 一小块存储数据的内存空间
- Java是强类型语言，JavaScript是弱类型语言
  - 强类型：在开辟变量存储空间时，定义空间将来存储数据的类型，
    只能存储固定类型的数据
  - 弱类型：在开辟变量存储空间时，不定义空间将来存储数据的类型，
    能够存储任意类型的数据
- 语法：var 变量 = 初始化值;
- typeof运算符：获取变量的类型
  - 语法：typeof 变量名;
  - null运算后得到的是object类型
运算符
- 一元运算符：只有一个运算数的运算符
  - ++,–：自增，自减
  - ±（正号，负号）
  - 注意
    - 在JS中，如果运算数不是运算符所要求的类型，那么js引擎会
      自动将运算数进行类型转换
    - 其他类型转number
      - string转number
        按照字面值转换
        如果字面值不是数字，则转为NaN
        NaN与任何数运算都是NaN
      - boolean转number
        true–>1
        false–>0
- 算数运算符
  - +，-，*，/，%
- 赋值运算符
  - =，+=，-=
- 比较运算符
  - >，<，>=，<=，==，===（全等于)
  - 类型相同，直接比较
    - 字符串按照字典顺序比较，按位逐一比较，直到得出大小为止
  - 类型不同，先进行类型转换，再比较
    - ===：在比较之前，先判断类型，如果类型不一致，则直接返回false
    - ==：进行类型转换比较
- 逻辑运算符
  - &&，||，!
  - 其他类型转换boolean
    - number：0或NaN为false，其他为true
    - string：除了空字符串，其它都为true
    - null或undefined：都是false
    - object：都是true
- 三元运算符
  - 表达式? 值1 : 值2;
  - 表达式为true，取值1，否则取值2
流程控制语句
- if…else…
- switch
  - 在java中，可以接收的数据类型：byte int short char 枚举（1.5）字符串（1.7）
  - 在js中，可以接收任意类型数据
- while
- do…while
- for
js特殊语法
- 语句以分号;结尾，如果一行只有一条语句，则可以省略分号（不建议）
- 变量的定义，var可以省略
  - 用var：定义的变量是局部变量
  - 不用var：定义的变量是全局变量（不建议）

2、基本对象

function：函数对象
- 创建
  - 方式1：var 方法名称 = new function(形参列表,方法体);
  - 方式2：function 方法名称(形参列表){方法体}
  - 方式3：var 方法名称 = function(形参列表){方法体}
- 属性
  - length：形参个数
- 特点
  - 方法定义时，形参的类型不用写，返回值类型也不写
  - 方法是一个对象，如果定义名称相同，会覆盖前面的定义结果
  - 在js中，方法的调用只与方法名称有关，与参数列表无关
  - 在方法声明中，有一个隐藏的内置对象（数组），arguments：封装
    所有的实际参数
- 调用
  - 方法名称(实参列表);
Array：数组对象
- 创建
  - var 数组名称 = new Array(元素列表);
  - var 数组名称 = new Array(默认长度);
  - var 数组名称 = [元素列表];
- 方法
  - join：将数组中元素按照指定的分隔符拼接为字符串
  - push：向数组的尾部添加一个或多个元素，返回新的数组长度
- 属性
  - length：数组长度
- 特点
  - js中，数组元素类型是可变的
  - js中，数组的长度是可变的
Date：日期对象
- 创建
  - var 日期名称 = new Date();
- 方法
  - toLocalString()：返回当前Date对象对应的时间本地字符串格式
  - getTime()：获取毫秒值。当前时间到1970年1月1日0点的毫秒值之差
Math：数学对象
- 创建
  - Math对象不需要创建，直接使用 Math.方法名();
- 方法
  - random()：产生0到1之间的随机数含0不含1
  - ceil：对数进行向上舍入
  - floor：对数进行向下舍入
  - round：把数四舍五入最接近的整数
- 属性
  - PI
RegExp：正则表达式对象
- 正则表达式：定义字符串的组成规则
  - 单个字符[]
    - 如 [a] [ab] [a-zA-Z] [0-9_]
    - 特殊符号
      - \d:单个数字字符 [0-9]
      - \w:单个单词字符 [a-zA-Z0-9_]
  - 量词符号
    - ？表示出现0或1次
    - * 表示出现0或多次
    - + 表示出现1或多次
    - {m,n}:表示 m<x<n x(数量)
      - m如果缺省：最多n次
      - n如果缺省：最少m次
  - 开始结束符号
    - ^：开始
    - $：结尾
- 正则对象
  - 创建
    - var 对象名 = new RegExp(“正则表达式”);
    - var 对象名 = /正则表达式/;
  - 方法
    - test(参数); 验证指定的字符串是否符合正则定义的规范
  - 注意：第一种创建方法反斜杠要用2个进行转义
Global
- 特点：全局对象，封装的方法不需要对象就可以直接调用。方法名();
- 方法
  - encodeURI(); url编码
  - decodeURI(); url解码
  - encodeURIComponent(); url编码，编码的字符更多
  - decodeURIComponent(); url解码
  - parseInt(); 将字符串转换成数字
    - 注意判断每一个字符是否是数字，直到不是数字为止
    - 将前面数字转化为number
  - isNaN(); 判断一个值是否是NaN
    - NaN六亲不认，连自己都不认，用符号判断都是false
  - eval(); 将JavaScript字符串作为脚本代码来执行
- url编码
  汉字：%A4%77%BA%9D

学习产出：

1、 JS与HTML结合方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS与HTML结合方式</title>
    <!--外部js-->
    <script src="test.js"></script>
</head>
<body>
    <!--内部js-->
    <script>
        // Hello World! 单行注释
        /**
         * 多行注释
         * hello!!!
         * world!!!
         */
        alert("Hello World!");
    </script>
</body>
</html>

2、JS变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS变量</title>
</head>
<body>

    <script>
        // 定义变量
        var a = 3;
        alert(a);

        a = "Hello World!";
        alert(a);

        // 定义number类型，输出到页面上
        var num1 = 1;
        var num2 = 1.2;
        var num3 = NaN;

        document.write(num1+"<br>");
        document.write(num2+"<br>");
        document.write(num3+"<br>");

        // 定义string类型
        var str1 = "abc";
        var str2 = 'abc';
        document.write(str1+"<br>");
        document.write(str2+"<br>");

        // 定义布尔类型
        var flag = true;
        document.write(flag+"<br>");

        // 定义空，未定义变量
        var obj1 = null;
        var obj2 = undefined;
        var obj3;
        document.write(obj1+"<br>");
        document.write(obj2+"<br>");
        document.write(obj3+"<br>");



    </script>
</body>
</html>

3、 JS变量类型显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS变量类型显示</title>
</head>
<body>

    <script>

        // 定义number类型，输出到页面上
        var num1 = 1;
        var num2 = 1.2;
        var num3 = NaN;

        document.write(num1+"---"+typeof num1+"<br>");
        document.write(num2+"---"+typeof num2+"<br>");
        document.write(num3+"---"+typeof num3+"<br>");

        // 定义string类型
        var str1 = "abc";
        var str2 = 'abc';
        document.write(str1+"---"+typeof str1+"<br>");
        document.write(str2+"---"+typeof str2+"<br>");

        // 定义布尔类型
        var flag = true;
        document.write(flag+"---"+typeof flag+"<br>");

        // 定义空，未定义变量
        var obj1 = null;
        var obj2 = undefined;
        var obj3;
        document.write(obj1+"---"+typeof obj1+"<br>");
        document.write(obj2+"---"+typeof obj2+"<br>");
        document.write(obj3+"---"+typeof obj3+"<br>");

    </script>
</body>
</html>

4、 JS正负号强制类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS正负号强制类型转换</title>
</head>
<body>

    <script>
        var num = -1;
        document.write(num+"<br>");

        var str = "123";
        document.write(+str+"<br>");

        var realstr = "123abc";
        document.write(+realstr+"<br>");

        var flag1 = true;
        document.write(+flag1+"<br>");
        var flag2 = false;
        document.write(+flag2+"<br>");

    </script>
</body>
</html>

5、比较运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比较运算符</title>
</head>
<body>

    <script>

        document.write((1>2)+"<br>");
        document.write(("abc"<"abf")+"<br>");
        document.write(("123"==123)+"<br>");
        document.write(("123"===123)+"<br>");

    </script>
</body>
</html>

6、 Switch语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Switch语句</title>
</head>
<body>

    <script>
        var num;
        switch (num){
            case 1:
                alert("number");
                break;
            case "abc":
                alert("string");
                break;
            case true:
                alert("true");
                break;
            case null:
                alert("null");
                break;
            case undefined:
                alert("undefined");
            break;
        }
    </script>
</body>
</html>

7、99乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        td {
            border:1px solid;
        }
    </style>
</head>
<body>

    <script>
        var i;
        var j;
        document.write("<table align='center'>");
        for (i=1;i<10;i++){
            document.write("<tr>");
            for (j=1;j<i;j++){
                document.write("<td>");
                document.write(i+"*"+j+"="+(i*j)+"&nbsp;");
                document.write("</td>");
            }
            document.write("</tr>")
        }
        document.write("</table>");
    </script>
</body>
</html>

8、 function对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function对象</title>
</head>
<body>

    <script>
        var func1 = function (a,b) {
            alert(a+b);
        };
        func1(1,3);

        function func2(a, b) {
            alert(a+b);
        }
        func2(2,4);

        function func3() {
            var i;
            var sum = 0;
            for (i=0;i<arguments.length;i++){
                sum += arguments[i];
            }
            alert("所有数之和为："+sum)
        }
        func3(1,2,3,4,5,6,7,8,9);

    </script>
</body>
</html>

9、 Array数组对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array数组对象</title>
</head>
<body>

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

        // 数组特点
        arr1[10] = "abc";
        document.write(arr1[10]+"<br>");

        // 数组方法
        var len = arr1.push("ayd172");
        var join = arr1.join("-");
        document.write(arr1+"<br>");
        document.write(len+"<br>");
        document.write(arr1+"<br>");
        document.write(join+"<br>");
    </script>
</body>
</html>

10、 Date日期对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date日期对象</title>
</head>
<body>

    <script>
        // 创建日期
        var date = new Date();
        document.write(date + "<br>");

        // 日期方法
        var time = date.getTime();
        var localeString = date.toLocaleString();
        document.write(time+"<br>");
        document.write(localeString+"<br>");
    </script>
</body>
</html>

11、 Math数学对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Math数学对象</title>
</head>
<body>

    <script>
        // 数学方法
        document.write(Math.PI+"<br>");
        document.write(Math.ceil(3.14)+"<br>");
        document.write(Math.floor(3.14)+"<br>");
        document.write(Math.round(3.14)+"<br>");

        // 取1-100之间的随机整数
        document.write(Math.floor(100*Math.random())+1)
    </script>
</body>
</html>

12、 RegExp正则化表达式对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RegExp正则化表达式对象</title>
</head>
<body>

    <script>
        // 创建正则化对象
        var reg1 = new RegExp("^\\w{4,9}$");
        var reg2 = /^\w{4,9}$/;

        // 测试方法
        var test1 = reg1.test("hello");
        var test2 = reg2.test("helloworld123456");
        document.write(test1+"<br>");
        document.write(test2+"<br>");

    </script>
</body>
</html>

13、 Global对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Global对象</title>
</head>
<body>

    <script>
        // 编码解码方法
        var str = "http://www.baidu.com?wd=汉字";
        var encode = encodeURI(str);
        var decode = decodeURI(encode);
        document.write(encode+"<br>");
        document.write(decode+"<br>");

        var encodecomponent = encodeURIComponent(str);
        var decodecomponent = decodeURIComponent(encodecomponent);
        document.write(encodecomponent+"<br>");
        document.write(decodecomponent+"<br>");

        // 转换成数字方法
        var number = parseInt("123abc");
        document.write(number+1+"<br>");
        var number0 = parseInt("bs123abc");
        document.write(number0+1+"<br>");

        // eval方法
        var str = "alert('Hello World!')";
        eval(str);

    </script>
</body>
</html>