JavaScript+快速学习，简单好用~

JS的讲解与应用

简介：JavaScript是一种web脚本编程语言，简称JS；主要用于向HTML页面中添加交互行为；不需要编译，直接由浏览器解释运行，语法和Java类似。因此，在语法学习过程中，需注意与Java对比学习。注意：JavaScript 与Java是两种完全不同的语言（只是语法相似），无论在概念还是设计上。所谓"脚本语言"，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的"脚本"。

先来讲讲JS的使用方式，在body中，行内式：直接在HTML标签内添加js脚本，一般用于监听事件（非常不推荐，了解即可）；内嵌式：在HTML文档中任意位置内嵌js脚本；其中在script里面写入document.write()向网页输出内容，其代码如下所示：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的使用方式及执行顺序</title>
</head>
<body>
    <!-- 行内式：直接在HTML标签内添加js脚本，一般用于监听事件（非常不推荐，了解即可） -->
    <input type="submit" value="登录" onclick="javascript:alert('登录失败');"/>
    <br>
    <!-- 内嵌式：在HTML文档中任意位置内嵌js脚本 -->
    <script> 
        document.write("你好，云中医计算机学院"); //document.write()向网页输出内容
    </script>
    <br>
    <!-- 外链式：在HTML文档中任意位置，通过src属性链接外部js脚本 
         （可以是本地文件，也可以是网络URL） -->
    <script src="./1_my.js">
    </script>

    <h1>阻塞任务完成后才会渲染我....</h1>   

</body>
</html>

外链式：在HTML文档中任意位置，通过src属性链接外部js脚本（可以是本地文件，也可以是网络URL），其代码如下所示：

document.write("外链式引用JS脚本");

// 阻塞函数，用于阻塞指定的毫秒数
function blockForMilliseconds(ms) {
    const start = Date.now();
    while (Date.now() - start < ms) {
        // 空循环体，仅用于阻塞
    }
}
 
console.log('开始阻塞');
blockForMilliseconds(5000); // 阻塞5秒
console.log('阻塞结束');

这样做出来的网页图片如下图所示：

其次是JS的输出方式，document.write("第二种：直接在网页页面中进行输出")，这个方式在现代Web前端开发中已经不推荐使用，因为它会覆盖整个页面的内容；alert("第一种：通过浏览器弹出框进行输出")，这个方式代码调试时，偶尔能用一下；console.log("第三种：通过浏览器控制台进行输出！此方法最常用！"，这个方式主要用于代码的调试，强烈推荐这种方式，其网页页面如下图所示：

点击确定后则会出现以下网页页面：

图中代码如下图所示：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的输出方式</title>
</head>
<body>
    <!-- 在现代Web前端开发中已经不推荐使用，因为它会覆盖整个页面的内容 -->
    <script> 
        document.write("第二种：直接在网页页面中进行输出"); 
    </script>
    <!-- -->
    <script> 
        alert("第一种：通过浏览器弹出框进行输出"); 
    </script>
    <!-- 主要用于代码的调试，强烈推荐这种方式 -->
    <script> 
        console.log("第三种：通过浏览器控制台进行输出！此方法最常用！"); 
    </script>
</body>
</html>

如果直接写第二种的话，则会直接出现其内容，不会通过浏览器控制台进行输出，呈现的页面如下图所示：

然后就是JS的变量和数据类型，在script中，我们写入其不同的字符串之后，其网页中会自动为我们识别其数据类型：var str="Good morning!"; console.log(str + " -> 数据类型："+ typeof str + "<br>")。

对象 object （对象类型下的数组，注意：没有独立的数组类型）：var persons=new Array("Tom","Jack","Kate");console.log(persons + " -> 数据类型："+ typeof persons + "<br>")。

特殊情况：尽管 null 是一个表示空值的特殊关键字，但 typeof null 会返回 "object"。这是一个著名的 JavaScript 特性，虽然有些令人困惑，但已经存在了很长时间（知道一下就行，不必理会）

其代码如下图所示：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的变量和数据类型</title>
</head>
<body>

    <script> 


        //字符串 string
        var str="Good morning!"; 
        console.log(str + " -> 数据类型："+ typeof str + "<br>"); 
        //双引号包含带单引号的字符串 string
        var str2="This is 'Tom'"; 
        console.log(str2 + " -> 数据类型："+ typeof str2 + "<br>");
        //单引号包含带双引号的字符串 string
        var str3='This is "Tom"';
        console.log(str3 + " -> 数据类型："+ typeof str3 + "<br>");
        // 数字 number
        var x1=65.30;
        console.log(x1 + " -> 数据类型："+ typeof x1 + "<br>");
        // 数字 number
        var x2=65;
        console.log(x2 + " -> 数据类型："+ typeof x2 + "<br>");
        // 数字 number
        var y=117e3;
        console.log(y + " -> 数据类型："+ typeof y + "<br>");
        // 数字 number
        var z=117e-3;
        console.log(z + " -> 数据类型："+ typeof z + "<br>");
        // 布尔值 boolean
        var x=true;
        console.log(x + " -> 数据类型："+ typeof x + "<br>");
        // 对象 object   （对象类型下的数组，注意：没有独立的数组类型）
        var persons=new Array("Tom","Jack","Kate");
        console.log(persons + " -> 数据类型："+ typeof persons + "<br>");
        // 未定义类型 undefined
        var person1;
        console.log(person1 + " -> 数据类型："+ typeof person1 + "<br>");

        // 特殊情况：尽管 null 是一个表示空值的特殊关键字，但 typeof null 会返回 "object"。
        // 这是一个著名的 JavaScript 特性，虽然有些令人困惑，但已经存在了很长时间（知道一下就行，不必理会）
        var person2=null;
        console.log(person2 + " -> 数据类型："+ typeof person2 + "<br>");
    </script>

</body>
</html>

最后就是JS的运算符练习，我们先来了解一下各种运算符，加减乘除运算符为"+"，"-"，"*"，"/"这几个算数运算符，还有取余为"%"这个算数运算符等等。

自增自减运算符

自增和自减运算符有一个需要注意的地方，就是放在变量之后，会

先返回变量操作前的值，再进行自增/自减操作；放在变量之前，会

先进行自增/自减操作，再返回变量操作后的值。

即： 后置返回变量原值，再递增/递减；

前置先递增/递减，再返回变量操作后的值。

  <script> 
        var a = 1;
        var b = 1;
        console.log(++a);  // 2
        console.log(--b);  // 0
    </script>

    <script> 
        var x = 1;
        var y = 1;
        // 放在变量后
        console.log(x++);  // 1  即返回： x
        console.log(x);    // 2 
        // 放在变量前
        console.log(++y);  // 2  即返回： y+1
    </script>

比较运算符

(宽松相等) 与 (严格相等) 的核心区别

运算符‌：会执行隐式类型转换后再比较值

‌ 运算符‌：不执行任何类型转换

    <script>
        var num1 =  10 ;
        var num2 =  10 ;
        var num3 = "10";
        console.log(num1 == num2);       // true
        console.log(num1 === num2);      // true
        console.log(num1 == num3);      // 返回true，因为字符串"10"会被转换为数字10
        console.log(num1 === num3);      // 返回false，因为类型不同（数字 vs 字符串）
     </script>

取反运算符

以下值在布尔上下文中会被转换为false，其他所有值都会被转换为true：

false (布尔值false本身)

0 (数字零)

"" (空字符串)

null

undefined

NaN (特殊的非数字值)

NaN的意思是"Not a Number"，即"非数值"或"不是一个数值"，它用于表示一个本来要返回数值的操作数未返回数值的情况。

NaN通常出现在数学运算中，以下几种情况可能导致NaN的产生：

// 除以0：在进行除法运算时，如果除数为0，那么结果就无法定义，通常会被设置为NaN。

// 非法数学运算：当进行一些非法数学运算时，比如对负数进行平方根运算，结果也会被设置为NaN。

// 数据类型不匹配：在类型转换时，如果类型转换失败或者转换后的结果不是有效数值，结果也会被设置为NaN。

// 数值溢出：当进行数值计算时，如果计算结果超出了所能表示的范围，结果也会被设置为NaN。

// 缺失数据：在某些数据分析任务中，如果数据中存在缺失值，那么在进行数据计算时，结果也会被设置为NaN。

 <script>
        console.log(!undefined);         // true  undefined在布尔上下文中被视为false
        console.log(!null);              // true  null在布尔上下文中也被视为false
        console.log(!0);                 // true  数字0在布尔上下文中被视为false
        // NaN的意思是"Not a Number"，即"非数值"或"不是一个数值"，
        // 它用于表示一个本来要返回数值的操作数未返回数值的情况。
        // NaN通常出现在数学运算中，以下几种情况可能导致NaN的产生：
        // 除以0：在进行除法运算时，如果除数为0，那么结果就无法定义，通常会被设置为NaN。
        // 非法数学运算：当进行一些非法数学运算时，比如对负数进行平方根运算，结果也会被设置为NaN。
        // 数据类型不匹配：在类型转换时，如果类型转换失败或者转换后的结果不是有效数值，结果也会被设置为NaN。
        // 数值溢出：当进行数值计算时，如果计算结果超出了所能表示的范围，结果也会被设置为NaN。
        // 缺失数据：在某些数据分析任务中，如果数据中存在缺失值，那么在进行数据计算时，结果也会被设置为NaN。
        console.log(!NaN);               // true
        console.log(!"");                // true
        console.log(!888);               // false
        console.log(!'you are my baby'); // false
     </script>

【超级重点】且运算符（&&），参与"且运算"的项，必须同时为真才返回真，否则返回假

  <script>
        console.log(10 < 20 && 10 > 5);   // true
        console.log(10 > 20 && 10 > 5);   // false
    </script>

【超级重点】或运算符（||），参与"或运算"的项，有一个为真即返回真，否则返回假

 <script>
        console.log(10 < 20 || 10 > 5);   // true
        console.log(10 > 20 || 10 > 5);   // true
        console.log(10 > 20 || 10 < 5);   // false
    </script>

了解完这些之后我们就可以做一下其相关练习了，先定义圆的半径变量，输出圆的半径， 已知圆周率为3.14。

问题：1. 求圆形的周长； 2. 求圆形的面积

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单数学运算</title>
</head>
<body>
    <script>
        var r = 10.0;            //定义圆的半径变量
        document.write("已知圆的半径为:" + r + "<br>");   //输出圆的半径
        
        // 已知圆周率为3.14
        // 1. 求圆形的周长
        // 2. 求圆形的面积


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

要求出以上问题，首先，先定义圆的半径变量和圆的周长变量 (Math是 JavaScript 的原生对象，提供各种数学功能)var area = Math.PI*r*r；然后再定义圆的面积变量，最后用document.write输出圆的周长、半径和面积就可以求出来了，其代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var r = 10.0;            //定义圆的半径变量
        var cir = 2*Math.PI*r; //定义圆的周长变量 (Math是 JavaScript 的原生对象，提供各种数学功能)
        var area = Math.PI*r*r;//定义圆的面积变量
        document.write("已知圆的半径为:" + r + "<br>");   //输出圆的半径
        document.write("则圆的周长为:" + cir + "<br>"); //输出圆的周长
        document.write("则圆的面积为:" + area);         //输出圆的面积
    </script>
</body>
</html>

求出来的结果如下图所示：

最后的最后，这就是我们今天所讲解的JavaScript啦，它会有技巧的帮助我们解决繁琐的运算哟，大家快去试一试吧。