一：JavaScript概述

avaScript（简称 JS）是世界上最流行的编程语言之一，也是Web 开发的核心语言（与 HTML、CSS 并称前端三剑客）。它是一种轻量级、解释型、动态类型的脚本语言，专为网页交互而生，如今已能覆盖全栈开发。

二：JS的使用方法

js的使用方法有以下3种引入方式：

①行内式：将 JS 代码直接写在 HTML 标签的事件属性中。

<input type="button" value="点击登录" onclick="alert('登录失败');" />

②内嵌式：在 HTML 文档中使用 <script> 标签包裹 JS 代码。

<!-- 内嵌式示例 -->
<script>
    document.write("你好，云中医计算机学院"); 
</script>

③外链式：将 JS 代码单独抽离为 .js 文件，再通过 <script src="xxx.js"></script> 引入。

// my.js 文件中的代码
document.write("外链式引用JS脚本");

三：js的输出方式

1. 浏览器弹窗输出（alert）：通过浏览器弹出警告框来显示信息；

2. 页面文档输出（document.write）：直接将内容写入 HTML 文档并显示在网页上；

3. 控制台输出（console.log）：将信息输出到浏览器的开发者工具控制台。

四：逻辑运算符

逻辑运算符是构建程序逻辑判断的基石，它允许我们组合多个条件，从而决定代码的执行路径（即“分支”）。在JavaScript中，if/else 语句的灵魂往往就是由这些运算符驱动的。以下为您详细解析三种核心逻辑运算符及其背后的隐式转换规则。

Ⅰ：运算符的作用是将右侧的值强制转换为布尔值，并将其“取反”。

核心规则

undefined	0
false	NaN
null	"" (空字符串)

注意

6个值在布尔上下文中被视为 Falsy（假值），! 作用于它们会得到 true；除此之外的所有值（如非零数字、非空字符串、对象等）都被视为 Truthy（真值），! 作用于它们会得到 false。

console.log(!undefined); 
console.log(!null);      
console.log(!0);         
console.log(!NaN);      
console.log(!""); 
      
console.log(!888);              
console.log(!"you are my fistlove"); 

Ⅱ：逻辑与 &&

&& 运算符用于判断多个条件是否同时成立。

核心规则：

• 全真为真：只有当所有操作数都为 true 时，结果才为 true。

• 一假即假：只要有一个操作数为 false，结果立即为 false（短路求值）。

  console.log(10 < 20 && 10 > 5); 
  console.log(10 > 20 && 10 > 5); 

  Ⅲ：逻辑或 ||

|| 运算符用于判断多个条件中是否至少有一个成立。

• 核心规则：

• 一真即真：只要有一个操作数为 true，结果立即为 true（短路求值）。

• 全假为假：只有当所有操作数都为 false 时，结果才为 false。

  console.log(10 < 20 || 10 > 5);  
  console.log(10 > 20 || 10 > 5);
  console.log(10 > 20 || 10 < 5);

  五：实战案列：求 JS 计算圆的周长与面积

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS运算符实战：计算圆的周长与面积</title>
</head>
<body>
    <script>
 
        var r = 15;
      
        var cir = 2 * Math.PI * r; 
 
     
        var area = Math.PI * r * r;
 
        document.write("已知圆的半径为: " + r + "<br>");
        document.write("则圆的周长为: " + cir.toFixed(2) + "<br>");
        document.write("则圆的面积为: " + area.toFixed(2));
    </script>
</body>
</html>

运行效果图：

恭喜你，读到这里，你已经成功解锁了 JavaScript 的新手村成就！欢迎大家动手一起去练习圆周率代码。下次见！