一、概念及使用
简介：JavaScript是一种web脚本编程语言，简称JS；主要用于向HTML页面 中添加交互行为；不需要编译，直接由浏览器解释运行，语法和Java类似。 时） 因此，在语法学习过程中，需注慧与Java对比学习。 注意：JavaScript与Java是两种完全不同的语言（只是语法相似）, 无论在概念还是设计上。
使用方式（3种）：内嵌式、行内式、外链式
实际使用代码：
<!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("你好，world"); //document.write()向网页输出内容
</script>
<br>
<!– 外链式：在HTML文档中任意位置，通过src属性链接外部js脚本
（可以是本地文件，也可以是网络URL） –>
<script src="./1_my.js">
</script>
<h1>阻塞任务完成后才会渲染我….</h1>
</body>
</html>
外链式连接代码：
document.write("外链式引用JS脚本");
// 阻塞函数，用于阻塞指定的毫秒数
function blockForMilliseconds(ms) {
const start = Date.now();
while (Date.now() – start < ms) {
// 空循环体，仅用于阻塞
}
}
console.log('开始阻塞');
blockForMilliseconds(5000); // 阻塞5秒
console.log('阻塞结束');
需要注意的是，链接文本需要“.js”。而上图所设计的阻塞时间可简单理解为网页间隔多久才显示代码的运行
具体运行效果可参考下方演示动画
阻塞演示
二、输出方式
共三种：1、通过浏览器弹出框进行输出 2、直接在网页页面中进行输出 3、通过浏览器控制台进行输出
代码：
<!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>
三、变量和数据类型
代码
<!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>
输出：
此部分代码因使用了网页控制台的输出方式进行编写，所以在查看运行效果的时候，需要参考上一章节（钢铁慈父2）的控制台唤出方式在控制台中查看运行结果。
补充：<br>换行符在其中无法发挥作用，会像文字一样输出呈现
四、运算符
<!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>
console.log(10 + 10); // 20
console.log(100 – 10); // 90
console.log(10 * 2); // 20
console.log(10 / 5); // 2
</script>
<!– 取余运算符 –>
<script>
console.log(13 % 5); // 3
</script>
<!– 自增自减运算符 –>
<!– 自增和自减运算符有一个需要注意的地方，就是放在变量之后，会
先返回变量操作前的值，再进行自增/自减操作；放在变量之前，会
先进行自增/自减操作，再返回变量操作后的值。
即： 后置返回变量原值，再递增/递减；
前置先递增/递减，再返回变量操作后的值。
–>
<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>
// 等同于 x = x + y
var x = 2;
var y = 1;
console.log(x += y); //3
// 等同于 x = x – y
var x = 2;
var y = 1;
console.log(x -= y); //1
// 等同于 x = x * y
var x = 2;
var y = 1;
console.log(x *= y); //2
// 等同于 x = x / y
var x = 2;
var y = 1;
console.log(x /= y); //2
// 等同于 x = x % y
var x = 2;
var y = 1;
console.log(x %= y); //0
</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 (特殊的非数字值)
–>
<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>
</body>
</html>
注意：
1、
== (宽松相等) 与 === (严格相等) 的核心区别
== 运算符：会执行隐式类型转换后再比较值
=== 运算符：不执行任何类型转换
2、
以下值在布尔上下文中会被转换为false，其他所有值都会被转换为true：
false (布尔值false本身)
0 (数字零)
"" (空字符串)
null
undefined
NaN (特殊的非数字值)
3、
NaN的意思是“Not a Number”，即“非数值”或“不是一个数值”，
它用于表示一个本来要返回数值的操作数未返回数值的情况。
NaN通常出现在数学运算中，以下几种情况可能导致NaN的产生：
除以0：在进行除法运算时，如果除数为0，那么结果就无法定义，通常会被设置为NaN。
非法数学运算：当进行一些非法数学运算时，比如对负数进行平方根运算，结果也会被设置为NaN。
数据类型不匹配：在类型转换时，如果类型转换失败或者转换后的结果不是有效数值，结果也会被设置为NaN。
数值溢出：当进行数值计算时，如果计算结果超出了所能表示的范围，结果也会被设置为NaN。
缺失数据：在某些数据分析任务中，如果数据中存在缺失值，那么在进行数据计算时，结果也会被设置为NaN。
运算练习代码：
<!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>
