js语言基础练习

Posted 2020-09-26 life is tough，so are you

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js语言基础练习相关的知识，希望对你有一定的参考价值。

1.js最初始体验

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--<div onclick="alert(‘我是行内式‘)">你好</div>-->
    <!--<script src="tool.js"></script>-->
    <script type="text/javascript">
        //内嵌式
        alert("我是内嵌式");
        prompt("请输入：");
        confirm("你好吗？");

        //输出语句
        console.log("我是控制台输出");
        console.error("我是错误");//了解
        console.warn("我是警告");//了解

        document.write("<h1>我是h1标签</h1>");//页面输出内容而且识别标签

        /**
         *
         * @param a
         * @param b
         * @returns {number}
         */
       function fn(a,b){
           return 111;
       }


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

2.变量

a）变量命名

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

   var _$1 = 1;
   var 我爱你 = "I love you!"
   var top = 1;
   alert(top);
   alert(我爱你);
   alert(name);
   // alert(break);

    var aaa = 1;

    var bbb;
    bbb = 1;

    var bool;
    bool = true;

   var name = "张三";
   console.log(name);
   name = 18;
   console.log(name);

    var a, b, c;
    var a;b;c;


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

b）变量交换

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

    //需求：交换两个变量
    //步骤：
    //1.把a交换给b
    //2.把b交换给a
//    var a = 1;
//    var b = 2;
//    console.log("a:"+a+"---"+"b:"+b);
//    //1.把a交换给b
//    b = a;
//    //2.把b交换给a
//    a = b;
//    console.log("a:"+a+"---"+"b:"+b);

    //需求：交换两个变量
    //步骤：
    //0.定义一个中间值
    //1.先把a存储进中间值中，把b交换给a
    //2.把中间值交换给b
//    var temp = 0;
//    var a = 1;
//    var b = 2;
//    console.log("a:"+a+"---"+"b:"+b);
//    //1.先把a存储进中间值中，把b交换给a
//    temp = a;
//    a = b;
//    //2.把中间值交换给b
//    b = temp;
//    console.log("a:"+a+"---"+"b:"+b);

//    var a = "aaa";
//    var b = "bbb";
//        console.log("a:"+a+"---"+"b:"+b);
//    var temp = a;
//    a = b;
//    b = temp;
//        console.log("a:"+a+"---"+"b:"+b);



    //难点
    //需求：交换两个变量（数值型）而且不能用中间值。
    //步骤：（求两个数的和，然后减去其中一个交换给另一个）
    //1.求和。
    //2.利用和减去其中一个交换给本身变量
    //3.减去刚才的一个交换给另一个

//    //1.求和。
//    var a = 10;
//    var b = 20;
//    var sum = a + b;
//    console.log("a:"+a+"---"+"b:"+b);
//    //2.利用和减去其中一个交换给本身变量
//    b = sum - b;
//    //3.减去刚才的一个交换给另一个
//    a = sum - b;
//    console.log("a:"+a+"---"+"b:"+b);

    //1.求和。
    var a = 10;
    var b = 20;
    console.log("a:"+a+"---"+"b:"+b);
    a = a + b;
    //2.利用和减去其中一个交换给本身变量
    b = a - b;
    //3.减去刚才的一个交换给另一个
    a = a - b;
    console.log("a:"+a+"---"+"b:"+b);


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

3.数据类型

a）数据类型

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

   var str = "abc";
   var num = 18;
   var bool = true;
   var bbb = null;
   var aaa;

   console.log(typeof str);
   console.log(typeof num);
   console.log(typeof bool);
   console.log(typeof(aaa));
   console.log(typeof(bbb));


    //number
    // 进制转换   值 = 位值*进制的（位置-1）次方+位值*进制的（位置-1）次方+位值*进制的（位置-1）次方+...........
   var num1 = 0.1;
   var num2 = 0.2;
   console.log(num1+num2);
   console.log(0.07*100);

   console.log(Number.MAX_VALUE);
   console.log(Number.MIN_VALUE);

   console.log(1/0);
   console.log(-1/0);

   console.log("aaa"/10);
   console.log(undefined-1 == NaN);

   console.log(isNaN("aaa"));
   console.log(isNaN(123));
   console.log(isNaN(NaN));


    //string
   var str1 = "abc";
   var str2 = ‘cde‘;
   //var str3 = "‘;
   var str4 = ‘asdf"asdf"asdf‘
   var str5 = "afads‘lkfhasld‘fjk";
   var str6 = "adfasdlfjka\"ldskf";
   var str7;
   str7 = "anc";
   str7 = "adfsadfasdf";

   console.log(str4);
   console.log("\n"+str5);
   console.log(str6);
   console.log("我爱你"+str1+"中国");

   //+和加法不一样。对于字符串来说，+是连接符。
   console.log("aaa"+"bbb");
   console.log(111+111+"bbb");


    //boolean
   console.log(true);
   console.log(false);
   var a  = 1;
   if(a){
       alert(a);
   }

    //undefined 和 null
    console.log(undefined == null);
    console.log(undefined === null);
    console.log(undefined+10);
    console.log(null+10);



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

b）数据类型转换

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //转换成字符串
   var bool = true;
   var num = 111;
   var aaa;
   var bbb = null;

   console.log(typeof(bool+""));
   console.log(typeof(num+""));
   console.log(typeof(aaa+""));
   console.log((aaa+""));
   console.log(typeof(bbb+""));

   console.log(typeof(String(bool)));
   console.log(typeof(num.toString()));


    //转换成数字
   var str = "11";
   var bool = true;
   console.log(typeof (str-0));
   console.log(typeof (bool-0));
   console.log(typeof (str*1));
   console.log(typeof (bool*1));
   console.log(typeof (str/1));
   console.log(typeof (bool/1));
   console.log(typeof typeof (bool/1));  //数据类型是用string定义的

   console.log(typeof Number(str));
   console.log(typeof Number(bool));


   var str2 = "12.34abc";
   var str3 = "12.34";
   console.log(parseInt(str2));
   console.log(parseFloat(str2));
   console.log(Number(str3));


    //布尔类型转换
    var date = new Date();    //

    console.log(Boolean(0));
    console.log(Boolean(""));
    console.log(Boolean(null));
    console.log(!!1);
    console.log(!!"abc");
    console.log(!!date);



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

4.操作符优先级

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
   (false || true) && !(false && true);
   true && true
   var bool = ((4 >= 6) || ("人" != "阿凡达")) && !(((12 * 2) == 144) && true);

   console.log(bool);


   var num  = 10;
   // 5 == num / 2 && (2 + 2 * num).toString() === "22"
   // 5 == 5 && "22"==="22"

   if(5 == num / 2 && (2 + 2 * num).toString() === "22") {
       console.log(true);
   }


   var a = 1;
   var b = 2;
   a++;
   var num = ++a + (a++) + a + (++b) + b++;
             //  3 + 3 + 4 + 3 + 3;

   console.log(num);

   var aa  =   0&&1;
   alert(aa)
   var bb =  1&&0;
   alert(bb);
   var cc =  1&&10;
   alert(cc);


    console.log(0||1);
    console.log(1||0);
    console.log(1||5);
    console.log(5||1);

    var a = 1 && 2 && 3;
    console.log(a);
    var b = 0 && 1 && 2;
    console.log(b);
    var c = 1 && 0  && 2;
    console.log(c);

    var a = 0 || 1 || 2;

    var b = 1 || 0 || 3;

    console.log(a),console.log(b);


    var a = 3  &&  0 || 2;
    var b = 3 || 0 &&  2;
    var c= 0 || 2 && 3;
    alert(a),alert(b),alert(c);


var a = 1+1&&3;
var b = 0 && 1+1;
var c = 1 ||  2 && 3-1;
alert(a);alert(b);alert(c);


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

5.if判断

a）

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

    if(true){
        alert(1);
    }

    if(false){
        alert(2);
    }else{
        alert(3);
    }

    if(false){
        alert(4);
    }else if(false){
        alert(5);
    }else if(false){
        alert(6);
    }else if(false){
        alert(7);
    }else if(true){
        alert(8);
    }else if(false){
        alert(9);
    }else{
        alert(10);
    }


    //switch底层用的是===比较
    switch ("111"){
        case 111:
            alert(111);
            break;
        case 222:
            alert(222);
            break;
        case 222:
            alert(333);
            break;
        default :
            alert("都不是！");
    }



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

b）

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

    //需求：输入名人，弹出他所参演的电视剧！
    //步骤：
    //1.页面输出，后台获取。
    //2.判断输出的人物是谁并给出电视剧。
    //3.如果没有这个人，那么弹框警示！
   var str = prompt("请输入一位名人：");

   if(str === "陈道明"){
       alert("陈老师参演过：《康熙王朝》《楚汉传奇》《江山风雨情》...");
   }else if(str === "吕超"){
       alert("吕老师参演过：《雷雨》负责里面的雷雨......");
   }else{
       alert("这货谁，换一个，不认识！");
   }



    //需求：弹框显示今天是星期几。
    //步骤：
    //1.获取当天是星期几。
    //2.判断星期几，弹簧弹窗显示

   var date = new Date();
//    console.log(date.getDay());//礼拜日给我们的值将是0
   var num = date.getDay();

   switch (num){
       case 0:
           alert("星期日");
           break;
       case 1:
           alert("星期一");
           break;
       case 2:
           alert("星期二");
           break;
       case 3:
           alert("星期三");
           break;
       case 4:
           alert("星期四");
           break;
       case 5:
           alert("星期五");
           break;
       case 6:
           alert("星期六");
   }


    //需求：百分制转换成优良中可差。
    //思路1：获取值，然后判断在90-100....80-90...
    //思路2(难点)：获取值，然后除以10取整，==10满分，==9优，==8良，==7中，==6可，其他差！
    //步骤：
    //1.获取值，然后除以10取整。
    //2.判断

    var num = prompt("输入成绩：");
    num = parseInt(num/10);

    switch (num){
        case 10:
            alert("满分");
            break;
        case 9:
            alert("优");
            break;
        case 8:
            alert("良");
            break;
        case 7:
            alert("中");
            break;
        case 6:
            alert("可");
            break;
        default :
            alert("差！！！");
    }


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

6.for循环

a）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var i=1;
    for(;i<=10;i++){
        console.log(i);
//        i++;
    }

   console.log(i);

    // 死循环
   // for(;;){
   //     alert(1);
   // }

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

b）

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

   // 1 打印1到100
  for(var i=1;i<=100;i++){
      console.log(i);
  }

   // 2 打印1到100的和
   //计数器思想
  var sum = 0;
  for(var i=1;i<=100;i++){
//       sum = sum+i;
      sum += i;
  }
  console.log(sum);

    // 3 求1-100之间所有数的和、平均值
   var sum = 0;
   for(var i=1;i<=100;i++){
       sum+=i;
   }
   var avg = sum/(i-1);
   console.log(avg);

   // 4 求1-100之间所有偶数的和、所有奇数的和
    var sumOdd = 0;//奇数和
    var sumEven = 0;//偶数和

    for(var i=1;i<=100;i++){
        //判断如果是奇数加到sumOdd，如果是偶数加到sumEven
        if(i%2 === 1){
            sumOdd += i;
        }else{
            sumEven += i;
        }
    }
    console.log(sumOdd);
    console.log(sumEven);

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

c）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
//        5 本金10000元存入银行，年利率是千分之三，每过1年，将本金和利息相加作为新的本金。计算5年后，获得的本金是多少？
        //需求：本金10000，利率千分之3，求5年本息和。
        //步骤：
        //1：利用for循环，把每年的利息添加到本金中作为第二年的本金
        //2：一共循环五次
       var money = 10000;
       var rote = 0.003;
       for(var i=1;i<=5;i++){
//            money = money+money*rote);
//            money = money*(1+rote);
//            money *= (1+rote);
           money *= 1+rote;
       }
       alert(money);


//        6 有个人想知道，一年之内一对兔子能繁殖多少对？于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对小兔子，而一对兔子从出生后第3个月起每月生一对小兔子。假如一年内没有发生死亡现象，那么，一对兔子一年内（12个月）能繁殖成多少对？
//        兔子的规律为数列，1，1，2，3，5，8，13，21

                   // n1 n2 n3=n1+n2,n4=n2+n3,n5=n4+n3......
        //斐波那契数列：1，1，2，3，5，8，13，21，34，55，89，144...........


        //需求：求斐波那契数列第12项是多少？
        //思路：设置两个变量，分别代表第一个和第二个数值，然后从第三项开始，当前项等于前两项之和。在赋值之前，先把后一项保存起来，赋值完毕在把保存值赋值给第一项。
        //步骤：
        //1.定义两个变量和一个中间值
        //2.然后利用循环交换变量和以及变量
        //3.直接打印n2

        //1.定义两个变量和一个中间值
        var num1 = 1;
        var num2 = 1;
        //2.然后利用循环交换变量和以及变量(循环次数 = 从第三项开始循环，到第12项结束)
        for(var i=3;i<=12;i++){
            var temp = num2;
            num2 = num1+num2;
            num1 = temp;
//            num1 = num2-num1;
        }
        //3.直接打印num2
        alert(num2);

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

d）打印正方形，三角形

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

   document.write("☆")
   document.write("☆")
   document.write("☆<br>")

   document.write("☆")
   document.write("☆")
   document.write("☆<br>")

   document.write("☆")
   document.write("☆")
   document.write("☆")
   document.write("<br>");

    //需求：打印宽9，长9的正方形。
//for(var k=1;k<=9;k++){
    for(var j=1;j<=9;j++){
        for(var i=1;i<=9;i++){
            document.write("☆");
        }
        document.write("<br>");
    }
//    document.write("<br>");
//}


document.write("<br>");

    //需求：打印三角形(外循环控制行，内循环控制列)
    for(var j=1;j<=9;j++){
        for(var i=1;i<=j;i++){
            document.write("☆");
        }
        document.write("<br>");
    }


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

e）打印乘法表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table border="1">
        <tr>
            <td>1*1=1</td>
        </tr>
        <tr>
            <td>1*2=2</td>
            <td>2*2=4</td>
        </tr>
        <tr>
            <td>1*3=3</td>
            <td>2*3=6</td>
            <td>3*3=9</td>
        </tr>
    </table>



<script>

   for(var i=1;i<=9;i++){
       for(var j=1;j<=i;j++){
           document.write(i+"*"+j+"="+i*j+"  ");
       }
       document.write("<br>");
   }

    document.write("<table border=‘1‘>");

    //在这里面利用for循环输出tr和td...

    document.write("</table>");



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

以上是关于js语言基础练习的主要内容，如果未能解决你的问题，请参考以下文章

js语言基础练习---------------函数的基础知识

js基础练习题

AJAX相关JS代码片段和部分浏览器模型

js语言基础练习---------------函数的高级（了解），类和对象（重点）

Python matplotlib 基础练习:画出正弦曲线等

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js