javaWeb-day03--javascript基础

最新推荐文章于 2024-10-30 19:10:39 发布

grilla1024

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量157

点赞数

分类专栏： javaWeb 文章标签： js javascript java

本文链接：https://blog.csdn.net/xingxing_LM/article/details/112969132

版权

javaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.JS与HTML的结合方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    外部结合-->
    <script src="js/a.js"></script>
</head>
<body>
<!--内部结合-->
<script>
    alert("奥力给的猛");
</script>
</body>
</html>

a.js
alert("12345");

2.JS变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script>
    //定义变量 弱类型 可以给变脸赋值其他类型的数据
    // var a =1;
    // alert(a);
    //
    // a="aabb";
    // alert(a);

    //typeof(变量名)  可以查看变量类型
    //number String boolean null undefin

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

    // 定义String类型
    var str1= "abc";
    var str2= "qwe";
    var str3= "asd";
    document.write(str1+"---"+typeof(str1)+"<br>");
    document.write(str2+"---"+typeof(str2)+"<br>");
    document.write(str3+"---"+typeof(str3)+"<br>");

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

    //定义null undefined
    var obj1 = null;
    var obj2 = undefined;
    var obj;
    document.write(obj1+"---"+typeof(obj1)+"<br>");
    document.write(obj2+"---"+typeof(obj2)+"<br>");
    document.write(obj+"---"+typeof(obj)+"<br>");
</script>

</head>
<body>

</body>
</html>

3.JS一元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        //num++  先赋值再运算+1
        var num = 3;
        var a = num++;
        document.write(a+"<br>");
        document.write(num);
        document.write("<br>")

        //在前边加+自动转换类型   string转number按照字面转，如果不是数字转换类型为不是数字的数字NaN
        var b =+"1234"
        document.write(typeof(b)+"-----"+b+"<br>");
        var aa = +"abc"
        document.write(typeof (aa)+"-----"+aa+"<br>");

        //true 1   false 0
        var flag = +true;
        var fla = +false;
        document.write(typeof (flag)+"-----"+flag+"<br>");
        document.write(typeof(fla)+"-----"+fla+"<br>");
    </script>
</head>
<body>

</body>
</html>

4.算数运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var a = 2;
        var b = 3;
        document.write(a+b+"<br>");
        document.write(a-b+"<br>");
        document.write(a*b+"<br>");
        document.write(a/b+"<br>");
        document.write(a%b+"<br>");
    </script>
</head>
<body>

</body>
</html>

5.比较运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //如果类型相同直接比较，字母按照字典顺序进行比较。
        // 类型不同转换成相同的类型在比较
        //===全等于 先比较类型，如果类型不同则直接false
        document.write((3>4)+"<br>");
        document.write(("abc">"aab")+"<br>");
        document.write(("123"<222)+"<br>");
        document.write(("123"===123)+"<br>");
    </script>
</head>
<body>

</body>
</html>

6.逻辑运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        * 逻辑运算符
        * && 与
        * || 或
        * ！ 非
        * 其他类型转boolean  在前边加  ！！
        * number 0或NaN为假，其他为真
        * string 除了空字符转，其他都为真
        * null&undefind都是 false
        * 所有对象都是true
         */

        //number
        var num = 3;
        var num1 = 0;
        var num2 = NaN;

        document.write(!!num+"<br>");
        document.write(!!num1+"<br>");
        document.write(!!num2+"<br>");
        document.write("-----------------------"+"<br>");
        //string 转boolean
        var str = "";
        var str1 = "avc";

        document.write(!!str+"<br>");
        document.write(!!str1+"<br>");

        document.write("-----------------------"+"<br>");

        //null&undefind
        var s = null;
        var ss;

        document.write(!!s+"<br>");
        document.write(!!ss+"<br>");
        document.write("-----------------------"+"<br>");

        //对象
        var date = new Date();
        document.write(!!date+"<br>");

    </script>
</head>
<body>

</body>
</html>

7.三元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //三元运算符，a > b,如果为真那么就取第一个值，否则取第二个值
        var a = 3;
        var b = 4;
        document.write(a>b?3:5);
    </script>
</head>
<body>

</body>
</html>

8.JS特殊语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        //1.语句以；结尾，如果一行只有一条语句；可以省略不写（不建议）
        //2.变量使用var关键字，也可以不用
        //用：定义的是局部变量
        //不用：定义的是全局变量（不建议）

        function fun(){
            b=4;
        }
        fun();
        alert(b);
    </script>
</head>
<body>

</body>
</html>

9.流程控制语句—switch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var a = 1;
        switch (a){
            case 1:
                alert("number");
                break;
            case a:
                alert("string");
                break;
            case null:
                alert("null");
                break;
            case undefined:
                alert("undefind");
        }
    </script>
</head>
<body>

</body>
</html>

10.流程控制语句—while

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var sum = 0;
        var num = 1;
        while(num<=100){
            sum+=num;
            num++;
        }
        alert(sum);
    </script>
</head>
<body>

</body>
</html>

11.流程控制语句—for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var sum = 0;
        for (var i=1;i<=100;i++){
            sum+=i;
        }
        alert(sum);
    </script>
</head>
<body>

</body>
</html>

12.输出乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
            border: 1px solid;
        }
    </style>
    <script>
        document.write("<table align='center'>")
        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;");
                document.write("</td>")
            }
            document.write("</tr>")
            document.write("<br>")
        }
    </script>
</head>
<body>

</body>
</html>

13.对象—function

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function对象</title>
    <script>
        /*
        * 1.创建
        * function 方法名（参数）{方法体}、
        *var fun = function（参数）{方法体}
        * 2.属性
        * length代表形参的个数
        * 3.特点
        * 1.方法的定义，形参的类型不用写，方法的返回类型也不用写
        * 2.方法是一个对象，如果定义名称相同的方法会覆盖
        * 3.方法的调用只和方法名有关，和参数个数没有关系
        * 4.在方法声明的方法体中隐藏了一个内置对象arguments，是一个数组，封装了所有实际参数的值
        *
        * */

        function fun1(a,b) {
            alert(a+b);
        }
        fun1(1,2);
        document.write(fun1.length);

        var fun2 = function (a,b){
            alert(a+b);
        }
        fun2(2,4);

        function add() {
            var sum=0;
            for (var i=0;i<arguments.length;i++){
                sum +=arguments[i];
            }
            alert(sum);
        }
        add(2,3,4,5);
    </script>
</head>
<body>

</body>
</html>

14.对象—Array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array对象</title>
    <script>
        /*
        * arr数组对象：
        * 1.创建
        * var arr1=new Array（元素列表）
        * var arr1 = new Array（数组默认长度）
        * var arr1 = [数组元素]
        * 2.方法
        * join（参数）：将数组中的元素按照指定的分割符拼接成字符串
        * push（）：向数组末尾添加新的元素，并返回数组的长度
        * 3.属性
        * length:数组的长度
        * 4.特点
        * 数组的元素类型可以变
        * 数组的长度可以变
        * */

        var arr1 = new Array(1,2,3);
        var arr2 = new Array(6);
        var arr3 = [4,5,6,"奥力给"];
        document.write(arr1+"<br>");
        document.write(arr2+"<br>");
        document.write(arr3+"<br>");

        document.write(arr1.join("。")+"<br>");
        arr1.push(19);
        document.write(arr1+"<br>");

    </script>
</head>
<body>

</body>
</html>

15.对象—Data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data对象</title>
    <script>
        /*
        1.创建
        var data = new Data();

        2.方法
        toLocaleString（）：返回当前data对象对应的时间本地字符串格式
        getTime():获取毫秒值，返回当前日期到1970年1月1日0点的毫秒值差
        */
        var data = new Date();
        document.write(data+"<br>");
        document.write(data.toLocaleString()+"<br>");
        document.write(data.getTime()+"<br>");
    </script>
</head>
<body>

</body>
</html>

16.对象—Math

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Math对象</title>
    <script>
        /*
        Math：数学
        1.创建
        math对象不用创建，直接使用   Math.方法名（）
        2.方法
        rondom（） ： 返回0-1之间的任意数  含0不含1 [0,1)
        ceil（）   ： 对数进行上舍入
        floor（）  ：对数进行下舍入
        round（）  ：把数四舍五入最近的整数
        */
        document.write(Math.PI+"<br>");
        document.write(Math.random()+"<br>");
        document.write(Math.ceil(3.14)+"<br>");
        document.write(Math.floor(3.14)+"<br>");
        document.write(Math.round(3.14)+"<br>");

        //获取1-100 之间的数
        var num = Math.floor(Math.random()*100)+1;
        document.write(num);
    </script>
</head>
<body>

</body>
</html>

17.对象—正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script>
        /*
        1.定义字符串的组成规则
            \d:单个数字字符[0-9]
            \w:单个单词字符[a-z A-Z 0-9]
        2.量词符号
            ?:0或1次
            *:0次或多次
            +:1次或多次
            {m,n}  m<=x<=n
            {,n}   最多n次
            {m,}   最少n次

        3.创建对象
            1.var reg = new RegExp("正则表达式");
              var reg = /正则表达式/;

            2.方法
                test(参数)：验证字符串是否符合正则定义的规范
         */
        var reg = new RegExp("^\\w{6,12}$");
        var reg2 = /^\w{6,12}$/; //常用
        var reg3 = /^\d{6,12}$/; //常用id

        var username = "zhangsan";
        var id= "123456";
        var b1 = reg2.test(username);
        var b2 = reg3.test(id);
        alert(b1);
        alert(b2);

    </script>
</head>
<body>

</body>
</html>

18.对象—Global

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Global对象</title>
    <script>
        /*
        1.全局对象，GLlobal封装的方法不需要对象直接可以调用  方法名（）；
        2.方法：
        encodeURI(); url编码
        decodeURI(); url解码

        encodeURIComponent(); url编码,编码的字符更多
        decodeURIComponent(); url解码

        parseInt（）  将字符串转换为数字
           逐一判断每一个字符是否为数字，直到不是数字为止，如果前边为数字则转换部分为number
        isNaN（）：判断一个值是否为NaN

        eval（）  字符串作为脚本代码来执行

         */


        var str = "奥力给的猛";
        var encode =encodeURI(str);
        document.write(encode+"<br>");
        var decode = decodeURI(encode);
        document.write(decode+"<br>");

        var str1 = "34531";
        var number = parseInt(str1);
        document.write(number+"<br>")

        var a = NaN;
        document.write(isNaN(a)+"<br>");

        var js = "alert(123)";
        eval(js);
    </script>
</head>
<body>

</body>
</html>