【Java EE】Day09 JavaScript基础、ECMAScript语法、Java对象

一、简介

1、概念

客户端脚本语言
- 脚本语言：无需编译，直接被解析执行　　
运行在：客户端浏览器，每个浏览器都有解析引擎
功能：
- 用户与页面交互
- 控制html元素
- 使页面产生动态效果

2、发展史

1992：C--
1995：Netscape开发LiveScript，SUN修改为JavaScript
1996：微软开发JScript　　　　
1997：ECMA（欧洲计算机制造商协会）制定了标准：ECMAScript就是所有客户端脚本语言的标准　　　　
JavaScript=ECMAScript+JavaScript特有（BOM和DOM两类对象）

二、JavaScript语法（ECMAScript）

1、基本语法

与html结合
- 内部js：<script>，标签体内容就是js代码
- 外部js：定义<script>，通过src属性引入外部的js文件
- 可以定义多个<script>，但不同位置影响执行顺序
注释：同Java

2、数据类型

原始数据类型和引用数据类型（类似Java）
原始数据类型
- number：整数、小数、NAN（not a number）
- string：字符串
- boolean：true
- undefined：变量未被初始化
引用数据类型：对象
- null：对象为空的占位符，通过设置null清空对象

3、变量：存储数据的内存空间

与强类型对比
- 强类型：开辟存储空间时，定义存储的数据类型，只能存放固定类型
- 弱类型：不定义存储数据类型，可以存放任意类型
var 变量名 = 初始化值；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
    <script>
        //定义变量
        /*var a=3;
        alert(a);
        a="abc";
        alert(a);*/
        //定义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 = "abc";
        var str2 = 'edf';
        document.write(str+"---"+typeof (str)+"<br>");
        document.write(str2+"---"+typeof (str2)+"<br>");
        //定义boolean类型
        var flag = true;
        document.write(flag+"---"+typeof (flag)+"<br>");
        //定义 null
        var obj = null;
        var obj2= undefined;
        var obj3;
        //默认就是undefined
        document.write(obj+"---"+typeof (obj)+"<br>");
        document.write(obj2+"---"+typeof (obj2)+"<br>");
        document.write(obj3+"---"+typeof (obj3)+"<br>");
    </script>
</head>
<body>

</body>
</html>

4、运算符

一元：++/--
- js会自动转换
  - string转number：不是数字转为NaN
  - boolean转number：true转为1，false转为0
二元：
- 算数
- 赋值：+=
- 比较：
  - 全等于===：先比较类型，再比较内容
- 逻辑
  - 其它类型转boolean
    - number：0/NaN为false
    - string：""为false
    - null&undefined：false
    - 对象：true
三元：条件表达式

5、特殊语法

语句以分号结尾，最后一行可以省略
变量可以选择是（局部变量）否（全局变量）使用var定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊语法</title>
    <script>
        //1.语句以分号结尾，如果一行只有一条语句，则可以省略（不建议）
        var a=3
        alert(a+"<br>")
        /*
            2.变量的定义使用var关键字，也可以不使用【作用范围不同】
                用：定义的变量是局部变量
                不用：定义的变量是全局变量
        * */
        function fun(){
            var b=4;
            alert(b);
        }
        alert(b);//访问不了
        function fun1(){
            c=4;
        }
        alert(c+"<br>")//可以访问
        //推荐
        var d
        function fun2(){
            d=10
        }
        alert(d)
    </script>
</head>
<body>

</body>
</html>

6、练习：打印九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        td{
            border:1px solid;
        }
    </style>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <script>
        document.write("<table border='0' align='center'>");
       //1.完成基本的for循环嵌套，展示乘法表
        for(var i = 1; i<=9;i++){
            document.write("<tr>");
            for (var j =1;j<=i;j++){
                document.write("<td>");
                //输出1*1=1
                document.write(i+"*"+j+"="+(i*j)+"&nbsp;&nbsp;&nbsp;")
                document.write("</td>");
            }
            /*//输出换行
            document.write("<br>");*/
            document.write("</tr>");
        }
        //2.表格结束
        document.write("</table>");

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

三、JavaScript对象

1、基本对象

Function对象：函数对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Function对象</title>
    <script>
        /*
            Function：函数（方法）对象【在java中，对象属于函数或方法的一部分，在js中，方法就是对象】
                1、创建
                    1. var fun = new Function(形参列表,方法体)；//知道就行
                    2.function 方法名称（形式参数列表）｛
                        方法体；
                    ｝
                    3. var 方法名 = function(形参列表)｛
                        方法体；
                    ｝
                2、方法
                3、属性
                    length：代表形参的个数
                4、特点
                    1.方法定义时写，形参的类型var不用写，返回值类型也不用写
                    2.方法是一个对象，如果定义名称相同的方法，会覆盖
                    3.在js中，方法的调用只与方法名称有关，和参数列表无关
                    4.在方法声明中，有一个隐藏的内置对象（数组），该对象叫arguments，封装了所有对象的参数
                5、调用
                    方法名称（实参列表）
        * */
        //1.创建方式1
        var fun1 = new Function("a","b","c","alert(a)");
        //调用方法
        //fun1(3,4);
        //alert(fun1.length);
        //2.创建方式2
       function fun2(a ,b){
            alert(a + b);
        }
        //alert(fun2.length);
        //调用方法
        //fun2(3,4);
        //3.创建方式3
        var fun3 = function (a ,b) {
            alert(a + b);
        }
        //覆盖fun2的声明
        /*fun2 = function (a , b) {
            alert(a - b);
        }*/
        function fun2(a ,b){
            alert(a);
            alert(b);
        }
        //方法调用
        //fun2(1 ,2);
        //只写第一个参数
        //fun2(1);
        //一个参数也不写
        //fun2();//undefined
        //传3个参数
        //fun2(1 ,2 ,3);
        //alert(fun3.length);
        //fun3(3,4);
        /*
            求两个数的和
        * */
        function add(a , b) {
            return a + b;
        }
        //var sum = add(1 , 2);
        //alert(sum);
        /*
            求任意个数的和
        * */
        function add() {
            var sum = 0;
            for (var i = 0; i< arguments.length ; i++){
                sum+=arguments[i];
            }
            alert(sum);
        }
        add(1,3 ,2,4);
    </script>
</head>
<body>
</body>
</html>

Array：数组对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array对象</title>
    <script>
        /*
            Array对象
                1、创建
                    1.var arr = new Array(元素列表)；
                    2.var arr = new Array(默认长度)；
                    3.var arr=[元素列表]；
                2、方法
                    join(参数) 把数组中的所有元素按照指定拼接符放入一个字符串。
                    push()    向数组的末尾添加一个或更多元素，并返回新的长度。
                3、属性
                    length：数组长度
                4、特点
                    1.JS中，数组元素的类型是可变的
                    2.JS中，数组的长度是可变的
        * */
        //1.创建方式1
        /*var arr1 = new Array(1, 2 ,3);
        var arr2 = new Array(5);//只有一个数字，代表长度
        var arr3 = [1,2,3,4];
        var arr4 = new Array();
        document.write(arr1+"<br>");
        document.write(arr2+"<br>");
        document.write(arr3+"<br>");
        document.write(arr4+"<br>");*/
        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
        //document.write(arr[10]+"<br>");
        arr[10] = "呵呵";
        arr.push(11);
        document.write(arr[10]+"<br>");
        document.write(arr+"<br>");//9876543是undefined，直接遍历啥也没有
        document.write(arr.length+"<br>");
        document.write(arr.join("-")+"<br>");
    </script>
</head>
<body>
</body>
</html>

Boolean
Date

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date日期对象</title>
    <script>
       /*
       Date日期对象
            1、创建
                var date = new Date();
            2、方法
                toLocaleString()：根据本地时间格式，把 Date 对象转换为字符串。
                                  返回当前date对象对应的时间本地字符串格式
                getTime()    返回 1970 年 1 月 1 日至今的毫秒数，返回当前日期对象描述的时间和1970年1月1日零点的毫秒值差
       * */
       var date = new Date();
       document.write(date+"<br>");
       document.write(date.toLocaleString()+"<br>");
       document.write(date.getTime()+"<br>");
    </script>
</head>
<body>
</body>
</html>

Math

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

                1、创建
                    特点：该对象不用创建，直接使用，如Math.方法名()
                2、方法
                    random()    返回 0 ~ 1 之间的随机数。【含0不含1】
                    ceil(x)    对数进行上舍入。
                    floor(x)    对数进行下舍入。
                    round(x)    把数四舍五入为最接近的整数。
                3、属性：
                    PI    返回圆周率（约等于3.14159）
        * */
        document.write(Math.PI+"<br>");
        document.write(Math.random()+"<br>");
        document.write(Math.round(3.15)+"<br>");
        document.write(Math.ceil(3.15)+"<br>");
        document.write(Math.floor(3.15)+"<br>");
        /*
            练习：取1-100之间的随机整数
                1、Math.random()产生随机数，范围[0,1)
                2、将此随机数乘以100.范围为[0,100)
                3、舍弃小数部分（向下取整）floor，变为了[0,99]的整数
                4、整体+1，变成了[1,100]
        * */
        var random =  Math.floor(Math.random()*100)+ 1;
        document.write(random+"<br>");

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

Number：包装对象
String：包装对象
RegExp：正则表达式对象，字符串的组成规则
- 单个字符[0-9] / \d，[a-zA-Z0-9] / \w
- 量词符号：　? * + {m,n}，m n可以缺省　
- 开始结束：^ $
- 正则对象：
  - 创建
    - var reg = new RegExp("正则表达式");
    - var reg = /正则表达式/;
  - 方法：test(参数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RegExp正则对象</title>
    <script>
        /*
            RegExp正则对象
                1、创建
                    1.var  reg = new RegExp("正则表达式");
                    2.var reg = /正则表达式/;
                2、方法
                    1.test(参数)：验证指定的字符串是否符合正则定义的规范
        * */
        //1.
        var  reg = new RegExp("\\w{6,12}");//转义字符
        //2.
        var  reg1 = /^\w{6,12}$/;//表示以单词字符开头，以单词字符结尾
        //alert(reg);
        //alert(reg1);
        //验证
        var username = "zhangsanzhangsan";
        var flag = reg1.test(username);
        alert(flag)
    </script>
</head>
<body>
</body>
</html>

Global：
- 全局对象，位于Function下
- 可以实现编解码和类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Global对象</title>
    <script>
        /*
        Global对象
            1.特点：是一个全局对象，这个Global中封装的方法，不需要对象就可以直接调用。 方法名();
            2.方法
                encodeURI()    把字符串编码为 URI。URI编码
                decodeURI()    解码某个编码的 URI。URI解码

                encodeURIComponent()    把字符串编码为 URI 组件。URI编码
                decodeURIComponent()    解码一个编码的 URI 组件。URI解码【编码解码的字符更多】

                parseInt()    解析一个字符串并返回一个整数。【将字符串转为数字，功能更强大】
                    逐一判断每一个字符是否是数字，直到不是数字位置，将前边数字部分转为number
                isNaN()    检查某个值是否是数字
                    NaN六亲不认：连自己都不认。NaN参与的==比较，全部为false
                eval()    计算 JavaScript 字符串，并把它作为脚本代码来执行【将字符串转换为脚本执行】
            3.URL编码
                传智播客：word=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
        * */
        var str = "http://www.baidu.com?word=传智播客";
        var encode = encodeURI(str);
        document.write(encode+"<br>");
        var s = decodeURI(encode);
        document.write(s+"<br>");
        var str1 = "http://www.baidu.com?word=传智播客";
        var encode1 = encodeURIComponent(str1);
        document.write(encode1+"<br>");
        var s1 = decodeURIComponent(encode1);
        document.write(s1+"<br>");
        var str = "a123abc";//转为NaN
        var number = parseInt(str);
        //document.write(number+1+"<br>");
        var a = "abc";
        document.write(a == NaN+"<br>");
        document.write(NaN == NaN+"<br>");
        document.write(isNaN(a)+"<br>");
        var jscode = "alert(123)";
        alert(jscode);
        eval(jscode);
    </script>
</head>
<body>
</body>
</html>

posted @ 2021-06-12 10:36 哥们要飞阅读(59) 评论(0) 编辑收藏举报

刷新页面返回顶部

哥们要飞的blog

Nice to meet you!

【Java EE】Day09 JavaScript基础、ECMAScript语法、Java对象

公告