Js的例子

--------Js的引入-----------

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 方式一: 在script标签内部书写JS代码 -->
    <script>
        console.log("引入JS的方式一!!");
        //alert("引入JS的方式一!!");
        document.write("引入JS的方式一!!!<br/>");
    </script>
    <!-- 方式二: 通过script标签引入外部的JS文件 -->
    <script src="demo.js"></script>
</head>
<body>
    <hr/>
    <!-- 方式三: 直接在标签上书写JS代码 -->
    <button onclick="console.log('引入JS的方式三...')">
        别点我!
    </button>
    <input ondblclick="console.log('引入JS的方式三===')" 
        type="button" value="也别点我!"/>
    <hr/>
</body>
</html>

--------Js的语句-----------

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        /* 案例1:if分支案例: 接收用户输入的成绩,
            判断成绩所属的等级
            80~100(包括80,也包括100) 优秀
            60~80(包括60,但不包括80) 中等
            0~60(包括0,但不包括60) 不及格
            其他值 输入有误
            prompt()函数返回值是一个字符串
                "abc" --自动转数值--> NaN
                "89" --自动转数值--> 89
                "" --自动转数值--> 0
         */
        
        var score = prompt("请输入您的成绩:", 0);
        if(score>=80 && score <= 100){
            document.write("您的成绩属于: 优秀!");
        }else if(score>=60 && score < 80){
            document.write("您的成绩属于: 中等!");
        }else if(score>= 0 && score < 60){
            document.write("您的成绩属于: 不及格!");
        }else{
            document.write("您的输入有误,请重新输入!");
        } 
        
        /* 案例2:switch语句案例—实现一个简易的计算器:
         可以接收用户输入的两个数值和一个运算符(+、-、*、/),
         根据运算符号的不同,对两个数值执行不同的运算。*/
        //1.接收用户输入的两个数值和一个运算符
        
        var str = prompt("请输入数值1,运算符,数值2,中间用逗号分隔: ");
        var arr = str.split(","); //"100,+,50" --> ["100","+","50"]
        var n1 = arr[0] - 0;
        var opt = arr[1];
        var n2 = arr[2] - 0;
        
        if(n1<n2){
            var tmp = n1;
            n1 = n2;
            n2 = tmp;
        }
        
        //2.根据用户的输入,执行不同的运算
        switch( opt ){ //判断opt是"+、-、*、/"中的哪一个运算符
            case "+": 
                document.write("两个数值的和为: "+ (n1+n2) );
                break;
            case "-":
                document.write("两个数值的差为: "+ (n1-n2) );
                break;
            case "*":
                document.write("两个数值的乘积为: "+ (n1*n2) );
                break;
            case "/":
                document.write("两个数值的商为: "+ (n1/n2) );
                break;
            default: 
                document.write( "您的输入有误,请重新输入!" );
        }

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

--------Js的数组--------

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        //1)声明一个空数组(长度是零)
        var arr1 = [];
        var arr3 = new Array();
        //2)声明一个具有初始值的数组
        var arr2 = [88,"hello js", false, new Date()];
        var arr4 = new Array(88,"hello js", false, new Date());
        console.log( arr2 )
        console.log( arr4 )
        
        //3)JS中的数组可以存放不同类型的元素
        //4)JS中数组的长度可以被任意改变
        var arr5 = [];
        console.log( "数组长度为: "+ arr5.length ); //0
        arr5.length = 10;
        console.log( "数组长度为: "+ arr5.length ); //10
        arr5[19] = "abc";
        console.log( "数组长度为: "+ arr5.length ); //20
    </script>
</head>
<body>
        
</body>
</html>

-------Js的数组--------

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        //1)声明一个fn1函数
        function fn1(name, age){
            console.log("fn1函数执行了...");
            console.log(name+", "+age);
        }
        fn1("刘沛霞", 35);
        
        //2)声明一个fn2函数
        var fn2 = function(name, addr){
            console.log("fn2函数执行了...");
            console.log(name+", "+addr);
        }
        fn2("马云", "杭州");
        
        //3)如果函数只需要执行一次,可以声明一个匿名函数
        (function(name,age){
            console.log("匿名函数执行了...");
            console.log(name+", "+age);
        })("刘德华", 20);
            
    </script>
</head>
<body>
</body>
</html>

 

posted @ 2020-11-13 19:47  Liang-shi  阅读(197)  评论(0编辑  收藏  举报