【JavaScript】基础学习①（知识点汇总1）

最新推荐文章于 2024-09-22 11:17:00 发布

文思月

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量288

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_44366571/article/details/107858882

版权

JavaScript 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

大家好，我是皮皮猫吖
每文一言：我不是烂泥，我不堕落

本篇文章：

我要开始学习前端知识了！！！

本篇文章是跟随着哔哩哔哩上面的李立新老师的视频做的笔记，关于一些JS的基础知识。

正文如下：

一、五种基本数据类型（一种引用数据类型）
二、数据类型转换
 三、算数运算符
 四、一元运算符
 五、自增和自减
 六、逻辑运算符
 七、关系运算符
 八、相等运算符
 九、三元运算符
 十、代码块
 十一、if语句练习(默认有这方面的知识)
十二、循环语句

一、五种基本数据类型（一种引用数据类型）

1）Number类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Number类型</title>
    <style></style>
    <script type="text/javascript">
        //typeof关键字，负责查看数据类型
        // number：
        // MAX_VALUE、MIN_VALUE、NaN、Infinity经过typeof都是number类型
        //NaN：not a number不是一个数
        //infinity：正无限大 -infinity:负无限大
        //js中进行浮点运算的时候，会出现精度丢失的问题
        //在js中尽量少使用精度高的运算
        var n1 = 123;
        console.log(n1);
        n1 = Number.MAX_VALUE;
        console.log(n1);
        n1 = Number.MIN_VALUE;
        console.log(n1);

        n1 = "abc"*"abc";
        console.log(n1);
        console.log(typeof n1);

        n1 = Number.MAX_VALUE * Number.MAX_VALUE;
        console.log(n1);
        console.log(typeof n1);

        n1 = 0.1 + 0.2;
        console.log(n1);
    </script>
</head>
<body>

</body>
</html>

2）Boolean类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Boolean类型</title>
    <script type="text/javascript">
        /*Boolean：
            true/false(真/假)

         */
        var b1 = true;
        console.log(b1);
        console.log(typeof b1);

        
    </script>
</head>
<body>

</body>
</html>

3）Null和Undefined类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Null和Undefined</title>
    <script type="text/javascript">
        /*
            Null:
                来表示一个空对象，使用typeof 检查null会返回object
            Undefined：
                定义的时候，只有变量名，没有变量值，表示数值未赋值
                使用typeof 检查 会返回Undefined

         */
        var n1 = null;
        console.log(n1);
        console.log(typeof n1);

        var u1;
        console.log(u1);
        console.log(typeof u1);
    </script>
</head>
<body>

</body>
</html>

4）String类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>String类型</title>
    <script type="text/javascript">
        /*
        String类型：
            变量名 = “值”
            变量名 = '值'
         */

        var s1 = "皮皮猫吖";
        console.log(s1);
        console.log(typeof s1);

        var s2 = "皮皮猫吖";
        console.log(s2);
        console.log(typeof s2);
    </script>
</head>
<body>

</body>
</html>

二、数据类型转换

1）转化成String类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制转换</title>
    <script type="text/javascript">
        /*
        将其他的数据类型转换成
        * Number，String，Boolean
        * 1. 其他数据类型转换成String类型：
                1）toString()方法
                    1.带有返回值
                    2.null/Undefined没有toString()方法,使用会报错
                2）String()函数
                    1.带有返回值
                    2.null/Undefined 分别转换成字符串"null"和"Undefined"
        */

        //--------------toString（）测试----------------------
        var n1 = 123;
        var n2 = n1.toString();
        console.log(n1);
        console.log(typeof n1);

        console.log(n2);
        console.log(typeof n2);
        console.log("-------------------------------------------");


        n1 = true;
        n2 = n1.toString();
        console.log(n1);
        console.log(typeof n1);

        console.log(n2);
        console.log(typeof n2);
        console.log("-------------------------------------------");

        n1 = null;
        // n2 = n1.toString();

        n1 = undefined;
        // n2 = n1.toString();


        //--------------String（）函数测试----------------------
        n1 = 123;
        n2 = String(n1);
        console.log(n1);
        console.log(typeof n1);
        console.log(n2);
        console.log(typeof n2);
        console.log("-------------------------------------------");

        n1 = true;
        n2 = String(n1);
        console.log(n1);
        console.log(typeof n1);
        console.log(n2);
        console.log(typeof n2);
        console.log("-------------------------------------------");

        n1 = null;
        n2 = String(n1);
        console.log(n1);
        console.log(typeof n1);
        console.log(n2);
        console.log(typeof n2);
        console.log("-------------------------------------------");

        n1 = undefined;
        n2 = String(n1);
        console.log(n1);
        console.log(typeof n1);
        console.log(n2);
        console.log(typeof n2);
        console.log("-------------------------------------------");

    </script>
</head>
<body>

</body>
</html>

2）转换成Number型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制类型转换成Number</title>
    <script type="text/javascript">
        /*
        *其他数据类型转换成Number：
        *   1）Number（）函数
        *       1. 字符串->Number：
        *           1）当字符串是只含有数字的字符串，可以进行转换
        *           2）当字符串中只要是含非数字字符，就转换为NaN
        *           3）当字符串是空串或者只含有空格的串，转换为0
        *       2. Boolean->Number;
        *           1) true：1
        *              false：0
        *       3. null->number:
        *             返回值：0
        *       4.  Undefined->Number
        *             返回值：NaN
        *   2)ParseInt()函数：（这个函数主要是对字符串进行操作）
        *       1. 字符串->number
        *           1) 当字符串的开头是带有数字的就可以转换（例如：123px）
        *               只提取整数部分，记住：开头必须是数字才可以
        *           2) 补充：如果想要得到浮点数，可以使用parseFloat();
        *       2. 其他类型->Number
        *           默认是先将其他数据类型转换成字符串类型，再转换为Number
        *           此时，都是NaN
        *       3. 此函数，还要一个特殊的作用，可以实现浮点数取整的操作
        * */

        //Number（）实现String型向Number型转换
        var s1 = "123";
        var s2 = Number(s1);
        console.log(s1);
        console.log(typeof s1);
        console.log(s2);
        console.log(typeof s2);
        console.log("--------------------------------------------");

        //Number（）实现String型向Number型转换
        s1 = "abc";
        s2 = Number(s1);
        console.log(s1);
        console.log(typeof s1);
        console.log(s2);
        console.log(typeof s2);
        console.log("--------------------------------------------");

        //Number（）实现String型向Number型转换
        s1 = "";
        s2 = Number(s1);
        console.log(s1);
        console.log(typeof s1);
        console.log(s2);
        console.log(typeof s2);
        console.log("--------------------------------------------");

        //Number（）实现布尔型型向Number型转换
        s1 = true;
        s2 = Number(s1);
        console.log(s1);
        console.log(typeof s1);
        console.log(s2);
        console.log(typeof s2);
        console.log("--------------------------------------------");

        //Number（）实现null型向Number型转换
        s1 = null;
        s2 = Number(s1);
        console.log(s1);
        console.log(typeof s1);
        console.log(s2);
        console.log(typeof s2);
        console.log("--------------------------------------------");

        //Number（）实现undefined型向Number型转换
        s1 = undefined;
        s2 = Number(s1);
        console.log(s1);
        console.log(typeof s1);
        console.log(s2);
        console.log(typeof s2);
        console.log("--------------------------------------------");

        //通过parseInt（），实现String型向Number类型的转换
        s1 = "123px";
        s2 = parseInt(s1);
        console.log(s1);
        console.log(typeof s1);
        console.log(s2);
        console.log(typeof s2);
        console.log("--------------------------------------------");


        s1 = "123.23px";
        s2 = parseFloat(s1);
        console.log(s1);
        console.log(typeof s1);
        console.log(s2);
        console.log(typeof s2);
        console.log("--------------------------------------------");

        //通过parseInt（），实现布尔型，null型，Undefined型向Number类型的转换
        // s1 = null;
        //s1 = true;
        s1 = undefined;
        s2 = parseInt(s1);
        console.log(s1);
        console.log(typeof s1);
        console.log(s2);
        console.log(typeof s2);
        console.log("--------------------------------------------");

        //浮点数取整操作
        s1 = 123.456;
        s2 = parseInt(s1);
        console.log(s1);
        console.log(typeof s1);
        console.log(s2);
        console.log(typeof s2);
        console.log("--------------------------------------------");



    </script>
</head>
<body>

</body>
</html>

注意篇：数字的进制问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进制数字</title>
    <script type="text/javascript">
        //十六进制：0x开头
        //八进制：0开头
        //二进制：0b开头
        //当"070"转成number型时，不同的浏览器会转成不同的number，此时，我们需要设置parseInt(参数1,参数2)
        //  此时我们需要设置参数2，为固定的进制
        var a = 0x20;
        console.log(a);

        a = 030;
        console.log(a);

        a = 0b10;
        console.log(a);

        a="070";
        a = parseInt(a, 10);
        console.log(a);
    </script>
</head>
<body>

</body>
</html>

3）转化为Boolean值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*其他数据类型转换成Boolean
        *   Boolean（）函数
        *       1. Number->Boolean
        *           除了0、NaN其他的Number类型都是true
        *       2. String->boolean
        *           除了空串，其他String数据都是true，空格串是true
        *       3. null->Boolean
        *           false
        *       4. Undefined->Boolean
        *           false
        *       5 对象->Boolean
        *           true
        * */

        //Number转Boolean
        var b1 = 123;
        // b1 = 455;
        // b1 = 0;
        // b1 = NaN;
        // b1 = Infinity;
        var b2 = Boolean(b1);
        console.log(b1);
        console.log(typeof b1);
        console.log(b2);
        console.log(typeof b2);
        console.log("-----------------------------");

        //String转Boolean
        //  b1 = "123";
        //  b1 = "  ";
         b1 = "";
         b2 = Boolean(b1);
        console.log(b1);
        console.log(typeof b1);
        console.log(b2);
        console.log(typeof b2);
        console.log("-----------------------------");

        //null转Boolean
        b1 = null;
        b2 = Boolean(b1);
        console.log(b1);
        console.log(typeof b1);
        console.log(b2);
        console.log(typeof b2);
        console.log("-----------------------------");


        //Undefined转Boolean
        b1 = undefined;
        b2 = Boolean(b1);
        console.log(b1);
        console.log(typeof b1);
        console.log(b2);
        console.log(typeof b2);
        console.log("-----------------------------");

    </script>
</head>
<body>

</body>
</html>

三、算数运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
    <script type="text/javascript">
    /*运算符
    *   运算符不会对操作数产生影响，操作数不发生变化，运算符返回值
    *   typeof:是一个操作符，不会改变原值大小，带有返回值，返回值的类型是String类型
    *
    *       注意：
    *           1. 在进行算术运算的时候，任何类型，都必须转换成Number类型数据进行运算
    *               （字符串的加法运算是一个bug）
    *           2. 任何数和NaN进行算术操作，都是NaN（字符串加法除外）
    *   1）+：
    *       1. 其他类型转换成Number类型，然后再进行算术运算
    *       2. 字符串加法：
    *               1）如果一个加数是字符串，那么这个算术运算进行的是字符串拼串操作，结果是一个字符串
    *               2）任何的数都会先转换成字符串，然后再进行运算
    *   2）-
    *       转换成Number类型进行加法操作
    *   3）*
    *        转换成Number类型进行乘法操作
    *   4）/
    *        转换成Number类型进行除法操作
    *   5）%
    *        转换成Number类型进行取模操作
    *
    *   总结：
    *       通过上面的运算，我们可以得到一个简单的方法，其他类型转换成Number类型：
    *       -、*、/ 可以分别和0、1、1进行相减，相乘，相除，即可得到对应的Number值
    *
    *
    * */
    // 加法例子
    var n1 = 123;
    n1 = 123 + 123;
    // n1 = true + 2;
    // n1 = null + 20;
    // n1 = NaN + 20;
    // n1 = "123" + 1;
    // n1 = "123" + true;
    // n1 = "123" + null;
    // n1 = "123" + NaN;
    n1 = "123" + undefined;
    console.log(n1);
    console.log(typeof n1);

    // 减法例子
    // n1 = 123 - 123;
    // n1 = 123 - true;
    // n1 = 123 - null;
    // n1 = 123 - "12";
    // n1 = 123 - undefined;
    // n1 = true - null;
    n1 = true - undefined;
    console.log(n1);
    console.log(typeof n1);

    // 乘法例子
    // n1 = 123 * 123;
    // n1 = true * null;
    // n1 = true * "123";
    n1 = true * undefined;
    console.log(n1);
    console.log(typeof n1);

    // 除法例子
    // n1 = 123 / 123;
    // n1 = null / true;
    // n1 = true / "123";
    n1 = true / undefined;
    console.log(n1);
    console.log(typeof n1);

    // 取模例子
    // n1 = 123 % 123;
    // n1 = null % true;
    // n1 = true % "123";
    n1 = true % undefined;
    console.log(n1);
    console.log(typeof n1);



    </script>
</head>
<body>

</body>
</html>

四、一元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-一元运算符</title>
    <script type="text/javascript">
        /*一元运算符
        *
        * 1）+
        *       正号，Number数值不变
        * 2）-
        *       负号，Number数值相反
        *
        * 运算方式：当对不是Number的数值使用一元运算符的时候，需要先转换成Number类型的数值，再加上正负号
        * */

        var n1 = 12;
        console.log(n1);

        n1 = +12;
        console.log(n1);

        n1 = -12;
        console.log(n1);

        n1 = -true;
        console.log(n1);//-1

        n1 = -null;
        console.log(n1);

        n1 = -undefined;
        console.log(n1);

        n1 = +"123";
        console.log(n1);

        n1 = 1 + +"99" + 2;
        console.log(n1);


    </script>
</head>
<body>

</body>
</html>

五、自增和自减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自增和自减</title>
    <script type="text/javascript">
        //自增运算符/自减运算符
        /*
        *   自增运算符++，会对原来的变量的数值进行+1操作
        *   自增运算符--，会对原来的变量的数值进行-1操作
        *
        *   a++和++a的值也是不一样的
        *       a++的值是原来的变量的值，未发生+1之前
        *       ++a的值是原来的变量的值+1，在原变量+1之后
        *
        *   a-- 和--a的值也是不一样的
        *       a--的值是原来的变量的值，未发生-1之前
        *       --a的值是原来的变量的值，在原变量-1之后
        *
        * */
        var a = 10;
        a++;
        console.log(a);
        a--;
        console.log(a);

        a = 12;
        console.log(a++);
        console.log(a);

        a = 50;
        console.log(++a);
        console.log(a);

        a = 20;
        a = a++ + ++a + a;
        console.log(a);

        a  = 20;
        a--;
        console.log(a);

        a = 16;
        console.log(a--);
        console.log(--a);
    </script>
</head>
<body>

</body>
</html>

六、逻辑运算符

1）布尔值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算符</title>
    <script type="text/javascript">
        /*
        *逻辑运算符：
        *   ！：非运算符
        *       对数据类型进行逻辑运算
        *       1. 对数据类型（布尔类型的数据）进行取反操作，如果取反的的数据是其他数据类型的话
        *           需要先转化为布尔值，在进行取反操作
        *       2. 其他数据类型转换成布尔类型 ！！其他数据类型
        *   &&：与运算符
        *       对数据类型进行与运算
        *       1. 当运算符两边的数据同时为真才是真，如果，有一个为假，即为假
        *       2. 此与运算是短路“与”运算：
        *           当左边的数据类型为假时，右边的数据类型不再进行判断，该结果为假
        *
        *
        *   ||：或运算符
        *       对数据类型进行或运算
        *       1. 当运算符两边的数据一个为真就是真，如果，两个都为假，才为假
        *       2. 此或运算是短路“或”运算：
        *           当左边的数据类型为真时，右边的数据类型不再进行判断，该结果为真
        *
        * 上述的“与”，“或”运算都是布尔类型的时上述的结论，非布尔型返回的信息不一样
        * */
        var b1 ;
        b1 = !true;
        console.log(b1);
        console.log(typeof b1);
        console.log("----------------------------");

        b1 = !"123";
        console.log(b1);
        console.log(typeof b1);
        console.log("----------------------------");

        b1 = !0;
        console.log(b1);
        console.log(typeof b1);
        console.log("----------------------------");

        b1 = !"";
        console.log(b1);
        console.log(typeof b1);
        console.log("----------------------------");

        b1 = false && console.log("我是真的");
        console.log(b1);
        console.log(typeof b1);
        console.log("----------------------------");

        b1 = true && console.log("我是真的");
        console.log(b1);
        console.log(typeof b1);
        console.log("----------------------------");

        //此处的数据类型是：undefined，应该是console.log()的返回值是undefined的数据类型
        b1 = false || console.log("我是真的");
        console.log(b1);
        console.log(typeof b1);
        console.log("----------------------------");

        b1 = true || console.log("我是真的");
        console.log(b1);
        console.log(typeof b1);
        console.log("----------------------------");


    </script>
</head>
<body>

</body>
</html>

2）非布尔值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算符2</title>
    <script type="text/javascript">
        /*
        *   && || 非布尔值进行运算
        *       非布尔值进行逻辑运算的时候，会先转换成布尔型，进行逻辑运算，但是返回原值
        *   &&
        *       1. 第一个值为true，则必然返回第二个值
        *       2. 第一个值为false，则必然返回第一个值
        *   ||
        *       1. 第一个值为true，则必然返回第一个值
        *       2. 第一个为false，则必然返回第二个值
        * */

        var b1;

        //第一个值为true，返回第二个值
        b1 = 1 && 2;
        console.log(b1);
        console.log(typeof b1);
        console.log("-----------------------------------");

        //第一个值为false，则返回第一个值
        b1 = NaN && 2;
        console.log(b1);
        console.log(typeof b1);
        console.log("-----------------------------------");

        //第一个值为true，返回第一个值
        b1 = "我是皮皮猫吖" || 2;
        console.log(b1);
        console.log(typeof b1);
        console.log("-----------------------------------");

        //第一个值为false，返回第二个值
        b1 = undefined || 123;
        console.log(b1);
        console.log(typeof b1);
        console.log("-----------------------------------");

    </script>
</head>
<body>

</body>
</html>

七、关系运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系运算符</title>
    <script type="text/javascript">
        /*
        *关系运算符：
        *   1）<
        *       对关系运算符两边的数值进行比较，如果左边的值小于右边的值，返回true，否则返回false
        *   2) >
        *        对关系运算符两边的数值进行比较，如果左边的值大于右边的值，返回true，否则返回false
        *   3) >=
        *       对关系运算符两边的数值进行比较，如果左边的值大于等于右边的值，返回true，否则返回false
        *   4) <=
        *       对关系运算符两边的数值进行比较，如果左边的值小于等于右边的值，返回true，否则返回false
        *
        *   上述是Number类型的值进行比较
        *   1）如果是非Number类型的值进行比较，需要先转化成Number类型的数据，再进行比较
        *   2）任意值和NaN作比较，结果都是false
        *   3）两个字符串进行比较，不会转换成Number进行比较，而是根据Unicode的值，进行比较的
        *       需要逐位进行比较，第一位如果相等，对下一位进行比较，直到得到结果
        * */
        var b1 ;
        b1 = 12 > 13;
        console.log(b1);
        console.log(typeof b1);
        console.log("===================");

        b1 = 12 <= 13;
        console.log(b1);
        console.log(typeof b1);
        console.log("===================");

        b1 = 12 >= 11;
        console.log(b1);
        console.log(typeof b1);
        console.log("===================");

        b1 = 12 < 11;
        console.log(b1);
        console.log(typeof b1);
        console.log("===================");

        //和NaN值进行比较，返回false
        b1 = 12 >= "hello";
        console.log(b1);
        console.log(typeof b1);
        console.log("===================");

        //和其他类型值进行比较
        b1 = 12 >= true;
        console.log(b1);
        console.log(typeof b1);
        console.log("===================");

        //和NaN值进行比较，返回false
        b1 = 12 >= undefined;
        console.log(b1);
        console.log(typeof b1);
        console.log("===================");

        //两个字符串进行比较
        b1 = "123" >= "1224";
        console.log(b1);
        console.log(typeof b1);
        console.log("===================");

        b1 = "12334865432365" >= "2";
        console.log(b1);
        console.log(typeof b1);
        console.log("===================");
      
      //js中使用unicode编码：十六进制
      console.log("\u2648");
    </script>
</head>
<body>
  <!--html中使用unicode编码：十进制-->
  <h1>&#9600;</h1>
</body>
</html>

八、相等运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相等运算符</title>、
    <script type="text/javascript">
        /*
        *相等运算符：
        *   1）==：相等
        *       1. 运算符两遍的值进行比较，如果相等返回true，否则返回false
        *       2. 当非Number进行比较时，会转换成Number
        *           （重点：）有一个特例：null == 0 为false
        * 重点：3. 任何值和NaN作比较的都是false
        *           如果判断是否含有NaN，需要使用isNaN（）函数
        *   2）！=：不相等
        *       1. 运算符两边的值进行比较，不相等返回true，否则返回true
        *   3） ===：全等
        *       在进行比较的时候，不能进行Number转换，比如123 和 "123"
        *   4）！==：不全等
        *       在进行比较的时候，不进行Number转换，如果不相等返回true，否则返回false
        * */
        var  b1;
        b1 = 12 == 12;
        console.log(b1);
        console.log("-------------------");

        b1 = 12 == "12";
        console.log(b1);
        console.log("-------------------");

        b1 = null == 0;
        console.log(b1);
        console.log("-------------------");

        b1 = "123" == "1234";
        console.log(b1);
        console.log("-------------------");

        b1 = null == "";
        console.log(b1);
        console.log("-------------------");

        b1 = 2 != '2';
        console.log(b1);
        console.log("-------------------");

        b1 = 0 != "";
        console.log(b1);
        console.log("-------------------");

        b1 = 0 != null;
        console.log(b1);
        console.log("-------------------");

        b1 = NaN == NaN;
        console.log(b1);
        console.log("-------------------");

        b1 = null == undefined;
        console.log(b1);
        console.log("-------------------");

        b1 = 123 === "123";
        console.log(b1);
        console.log("-------------------");

        b1 = 123 !== "123";
        console.log(b1);
        console.log("-------------------");



    </script>
</head>
<body>

</body>
</html>

九、三元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三元运算符</title>
    <script type="text/javascript" >
        /*
        *三元运算符：
        *   布尔值 ? 表达式1 ： 表达式2；
        *       如果布尔值为true，执行表达式1
        *       如果布尔值为false，执行表达式2
        *   如果最前面的是非布尔值，则转换成布尔值在进行判断
        * */
        var a = 133;
        var b = 112;
        a > b ? console.log("a大于b") : console.log("a小于b");

        c = 20;
        var max = a > b ? a: b;
        max = max > c ? max : c;
        console.log("a,b,c中，最大值为："+max);

        "hello" ? console.log("我是非布尔值"):console.log("我是布尔值");
        
    </script>
</head>
<body>

</body>
</html>

十、代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码块</title>
    <script type="text/javascript">
        /*代码块的作用：
        *   只是分组的作用，代码块可以访问代码块中变量的数值
        * */
        {
            var a = 20;
            console.log(a);
        }
        console.log(a);
    </script>
</head>
<body>

</body>
</html>

十一、if语句练习(默认有这方面的知识)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if练习</title>
    <script type="text/javascript">
        /*
         *从键盘输入小明的期末成绩：
         *  成绩100：奖励BM
         *  成绩80-99：奖励笔记本
         *  成绩60-80：奖励参考书
         *  其他，什么都没得
         */

        /*
        *   键盘输入函数：
        *   prompt():可以弹出提示框，该提示框会带有一个文本框，
        *   用户可以在文本框中输入一段内容，一个字符串作为参数
        *   返回值类型是String类型
        * */


        //练习1：
        // var grade = +prompt("请输入你的分数（0~100分）：");
        // console.log(typeof grade);
        // if(grade > 100 || grade < 0 || isNaN(grade)){
        //     alert("请输入正确的分数");
        // }else{
        //     if(grade == 100){
        //         console.log("奖励你一辆BM");
        //     }else if(grade >= 80){
        //         console.log("奖励你一台笔记本");
        //     }else if(grade >= 60){
        //         console.log("奖励你一本参考书");
        //     }else{
        //         console.log("没及格，啥都没有");
        //     }
        // }

        //练习2：
        // var high = prompt("请输入你的身高：");
        // var money = prompt("请输入你的存款：");
        // var beauty = prompt("请输入你的颜值：");
        //
        // if(high >= 180 && money >= 1000 && beauty >= 500){
        //     alert("我一定要嫁给他");
        // }else if(high >= 180 || money >= 1000 || beauty >= 50){
        //     alert("嫁吧，比上不足比下有余");
        // }else{
        //     alert("啥都没有，我不嫁");
        // }

        //练习3：
        var num1 = +prompt("请输入你的第一个变量值：");
        var num2 = +prompt("请输入你的第二个变量值：");
        var num3 = +prompt("请输入你的第三个变量值：");

        // var max = num1 > num2 ? num1 : num2;
        // max = max > num3 ? max : num3;
        // alert("三个变量中的最大值为："+max);
        if(num1 < num2 && num1 < num3){
            if(num2 < num3){
                alert("num1: "+num1+", num2: "+num2+", num3: "+num3);
            }else{
                alert("num1: "+num1+", num3: "+num3+", num2: "+num2);
            }
        }else if(num2 < num1 && num2 < num3){
            if(num1 < num3){
                alert("num2: "+num2+", num1: "+num1+", num3: "+num3);
            }else{
                alert("num2: "+num2+", num3: "+num3+", num1: "+num1);
            }
        }else{
            if(num1 < num2){
                alert("num3: "+num3+", num1: "+num1+", num2: "+num2);
            }else{
                alert("num3: "+num3+", num2: "+num2+", num1: "+num1);
            }
        }


    </script>
</head>
<body>

</body>
</html>

十二、循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环语句</title>
    <script type="text/javascript">
        //限制性循环条件，再执行循环体的内容
    var n = 10;
    while(n--){
        document.write("n : "+n+"<br/>");
    }
    //先执行循环体的内容，再执行循环条件的内容
        // do while至少执行一次
    n = 10;
    do {
        document.write("n : "+n+"<br/>");
    }while (n--);

    </script>
</head>
<body>

</body>
</html>