【JavaEE03-前端部分】JavaScript入门：给网页注入灵魂，从基础到实战玩转交互！

✨ 前面我们学了HTML（网页骨架）和CSS（网页妆容），这一篇要讲的JavaScript（简称JS），是给网页注入"灵魂"的语言------有了它，网页不再是静态的图片+文字，而是能响应用户点击、输入、鼠标移动等操作的动态页面！

一、初识JavaScript：网页的"行为指挥官"

1.1 什么是JavaScript？

JS是一门脚本语言，核心作用是实现网页的交互效果：比如点击按钮弹出提示、输入框验证内容、鼠标悬停改变样式、轮播图自动切换......这些都是JS的功劳。

📜 小插曲：JS和Java没关系！

很多新手会误以为JS是Java的"小弟"，其实完全不是------JS是网景公司的布兰登·艾奇只用10天设计出来的（因为赶工期，早期语法有些"不严谨"，但不妨碍它成为前端核心），只是蹭了当时Java的热度改了名字而已。

🧱 HTML/CSS/JS的关系（再强调！）

HTML：网页的骨架（决定有什么内容：按钮、文字、图片）；
CSS：网页的妆容（决定内容长什么样：颜色、大小、位置）；
JS：网页的灵魂（决定内容做什么：点击按钮消失、输入内容验证）。

1.2 JS快速上手：写第一行JS代码

不用复杂环境，直接在HTML里写<script>标签就能运行JS，原创示例（和参考示例不同）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个JS代码</title>
</head>
<body>
  <h3>点击下方按钮，体验JS的交互！</h3>
  <!-- script标签放body底部，确保HTML元素加载完再执行JS -->
  <script>
    // 弹出提示框
    alert("你好，欢迎学习JavaScript！");
    // 控制台打印（开发者工具F12看Console）
    console.log("这行代码在控制台显示～");
  </script>
</body>
</html>

💡 运行后会先弹出提示框，打开F12→Console能看到打印的文字，这是JS最基础的两种输出方式。

1.3 JS的3种引入方式：不同场景选不同

和CSS类似，JS也有3种引入方式，核心是"分离度越高，越易维护"：

引入方式	核心特点	原创示例	适用场景
行内样式	写在HTML标签的事件属性里，只作用于当前标签	`<button onclick="alert('点我啦！')">行内JS按钮</button>`	简单交互（临时用，不推荐大量写）
内部样式	写在`<script>`标签里，作用于当前HTML文件	`<script>let msg = '内部JS'; console.log(msg);</script>`	小demo、课堂演示（代码集中）
外部样式	写在单独的`.js`文件里，用`<script src>`引入	1. 新建`main.js`：`console.log('外部JS');` 2. HTML引入：`<script src="main.js"></script>`	企业开发（HTML和JS完全分离，易维护）

二、JS基础语法：和Java像又不像

JS的基础语法和Java有相似之处，但因为是"动态弱类型"语言，又有很多独特的特点，新手要重点注意这些差异！

2.1 变量：动态弱类型的"数据容器"

变量是存放数据的"盒子"，JS声明变量有3个关键字，核心区别是作用域 和是否可修改：

关键字	核心特点	原创示例
var	早期关键字，作用域是函数级（易出问题，现在少用）	`var age = 18;`
let	ES6新增，作用域是代码块级（推荐用）	`let userName = '小李';`
const	声明常量（一旦赋值不能改）	`const PI = 3.14159;`

✨ 关键特点：动态弱类型

JS的变量不限制数据类型，赋值后还能改类型（和Java的"静态强类型"完全不同）：

javascript 复制代码

// 动态：变量可以存不同类型的值
let a = 10; // 数字
a = 'hello JS'; // 字符串（JS不报错，Java会直接编译失败）
a = true; // 布尔值

// 变量命名规则（记牢！）
let userAge = 20; // ✅ 驼峰命名（推荐）
// let 2name = '小明'; ❌ 数字不能开头
// let user-name = '小红'; ❌ 不能有减号，可用下划线：user_name

2.2 数据类型：原始类型为主

JS的核心数据类型是原始类型（简单数据），还有引用类型（数组、对象等），新手先掌握原始类型：

数据类型	描述	原创示例
number	数字（不分整数/小数）	`let num = 66.6; let intNum = 100;`
string	字符串（单/双引号都行）	`let str1 = 'JS入门'; let str2 = "前端学习";`
boolean	布尔值（true/假false）	`let isLogin = true;`
undefined	变量声明了但没赋值	`let unVal; console.log(unVal); // undefined`
null	表示"空值"（手动赋值）	`let emptyVal = null;`

用typeof函数能检测变量的类型（原创示例）：

javascript 复制代码

let price = 29.9;
console.log(typeof price); // number

let content = '学习JS';
console.log(typeof content); // string

let isOk = false;
console.log(typeof isOk); // boolean

2.3 运算符：和Java相似但有"坑"

JS的运算符大部分和Java一样（+ - * / %、++ --、&& || !等），但有两个坑要重点注意：

1. 字符串拼接（+的特殊用法）

+既可以做加法，也可以做字符串拼接（有字符串参与就是拼接）：

javascript 复制代码

console.log(10 + 20); // 30（加法）
console.log('10' + 20); // '1020'（拼接）
console.log('你好' + 'JS'); // '你好JS'（拼接）

2. == vs ===（最容易踩坑！）

==：只比"值"（会自动转换类型）；
===：比"值+类型"（不转换类型，推荐用）。

原创示例：

javascript 复制代码

let num = 25;
let numStr = '25';

console.log(num == numStr); // true（值相等，类型自动转）
console.log(num === numStr); // false（值相等但类型不同：number vs string）

三、JavaScript对象：数组、函数、自定义对象

JS里"万物皆对象"，数组、函数、字符串都是对象，核心是"属性（特征）+方法（行为）"。

3.1 数组：灵活的"数据集合"

JS的数组超灵活------不要求元素类型一致（和Java的数组完全不同），是存储多个数据的首选。

1. 数组定义（两种方式，推荐字面量）

javascript 复制代码

// 方式1：字面量（常用）
let fruits = ['苹果', '香蕉', true, 10]; // 混合类型，完全允许
// 方式2：new Array()
let nums = new Array(1, 2, 3);

2. 数组操作（读/增/改/删）

javascript 复制代码

let fruits = ['苹果', '香蕉', '橙子'];

// 1. 读：下标从0开始
console.log(fruits[0]); // 苹果

// 2. 增：push（末尾追加）/ 直接给新下标赋值
fruits.push('葡萄'); // 末尾加
fruits[4] = '芒果'; // 下标4新增
console.log(fruits); // ['苹果','香蕉','橙子','葡萄','芒果']

// 3. 改：通过下标重新赋值
fruits[1] = '草莓';
console.log(fruits[1]); // 草莓

// 4. 删：splice(起始下标, 删除个数)
fruits.splice(4, 1); // 删除下标4的芒果
console.log(fruits.length); // 4（数组长度）

❗ 注意事项

下标越界读取：console.log(fruits[10]); // undefined；
不要直接给数组名赋值：fruits = '水果列表'; → 数组直接变成字符串，数据全丢！

3.2 函数：可复用的"代码块"

函数是封装重复代码的容器，定义后可多次调用，核心是"输入（参数）→处理→输出（返回值）"。

1. 函数基本语法

javascript 复制代码

// 定义函数
function calculateSum(a, b) {
  let sum = a + b;
  return sum; // 返回值
}

// 调用函数
let result1 = calculateSum(10, 20);
console.log(result1); // 30
let result2 = calculateSum(5, 8);
console.log(result2); // 13

2. 特殊点：参数个数可以不匹配

JS的函数参数超灵活（但实际开发尽量匹配）：

javascript 复制代码

// 形参2个，实参3个：多余的参数忽略
console.log(calculateSum(1, 2, 3)); // 3

// 形参2个，实参1个：缺少的参数是undefined，结果NaN（非数字）
console.log(calculateSum(1)); // NaN

3. 函数表达式（匿名函数）

把函数赋值给变量，后续通过变量调用（JS特有的灵活写法）：

javascript 复制代码

let multiply = function(...args) {
  // args是参数数组，reduce求和/乘积
  return args.reduce((total, cur) => total * cur, 1);
};

console.log(multiply(2, 3)); // 6
console.log(multiply(2, 3, 4)); // 24

3.3 自定义对象：描述"事物"的特征和行为

比如描述一本书、一部手机，用对象能清晰组织"属性（标题/价格）"和"方法（阅读/打电话）"。

1. 字面量创建（推荐）

javascript 复制代码

// 定义一个"书籍"对象
let book = {
  title: 'JavaScript入门到精通',
  price: 49.9,
  author: '前端小白',
  // 方法：匿名函数
  read: function() {
    console.log(`正在阅读《${this.title}》，作者是${this.author}`);
  }
};

// 访问属性：. 或 []
console.log(book.title); // JavaScript入门到精通
console.log(book['price']); // 49.9

// 调用方法：记得加()
book.read(); // 正在阅读《JavaScript入门到精通》，作者是前端小白

2. 构造函数创建（批量创建同类对象）

适合创建多个相同结构的对象（比如多本书、多个手机）：

javascript 复制代码

// 构造函数（首字母大写，规范）
function Phone(brand, price, color) {
  this.brand = brand; // this代表当前创建的对象
  this.price = price;
  this.color = color;
  this.call = function() {
    console.log(`${this.brand}手机打电话啦！`);
  };
}

// 创建具体对象（必须用new）
let miPhone = new Phone('小米', 1999, '黑色');
let huaweiPhone = new Phone('华为', 3999, '白色');

console.log(miPhone.price); // 1999
huaweiPhone.call(); // 华为手机打电话啦！

四、jQuery：简化JS操作的"神器"

原生JS操作DOM（网页元素）代码繁琐，jQuery封装了JS的核心功能，用更少的代码实现更复杂的交互，是前端开发的"效率神器"。

4.1 什么是jQuery？

jQuery是一个JS框架，核心特点：

代码极简："写得少，做得多"；
兼容多浏览器：不用操心浏览器差异；
专注DOM操作：选元素、改样式、加事件都超简单。

4.2 引入jQuery

先引入jQuery库才能用，推荐用CDN（或下载到本地）：

html 复制代码

<!-- 引入jQuery（CDN方式，bootcdn） -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

4.3 jQuery核心语法

javascript 复制代码

$(selector).action()

$()：jQuery的核心函数，用于选择元素；
selector：选择器（基于CSS选择器，更强大）；
action()：对选中元素的操作（隐藏、显示、改样式等）。

其实就是选中+执行什么操作

具体的语法就是 $(元素).方法(要做的事情)，说白了就是对哪一个做什么事。

🚨 必加：文档就绪函数

确保页面加载完再执行jQuery代码，避免操作未加载的元素：

javascript 复制代码

// 完整写法
$(document).ready(function() {//选中整个文档+执行什么操作
  // jQuery代码写这里
});

// 简化写法（推荐）
$(function() {
  // jQuery代码写这里
});

4.4 jQuery选择器：精准选元素

jQuery选择器基于CSS选择器，新增了一些自定义选择器，核心是"选中才能操作"：

选择器	描述	示例
`$("p")`	选所有p标签	`$("p").hide(); // 隐藏所有p标签`
`$(".box")`	选所有class=box的元素	`$(".box").css("color", "red");`
`$("#title")`	选id=title的元素（唯一）	`$("#title").text("新标题");`
`$(this)`	选当前触发事件的元素	`$("button").click(function(){$(this).hide();});`

4.5 jQuery事件：感知用户操作

事件是用户对页面的操作（点击、双击、鼠标悬停等），jQuery封装了常用事件，语法极简：

事件	描述	示例
click	点击事件	`$("button").click(function(){alert('点击了！');});`
mouseover	鼠标悬停	`$("div").mouseover(function(){$(this).css("background", "pink");});`
change	输入框内容改变	`$("input").change(function(){console.log('内容改了');});`

4.6 jQuery操作元素：增删改查全搞定

1. 获取/设置内容

方法	描述	示例
text()	操作纯文本（不含HTML标签）	`$("#content").text("新的纯文本");`
html()	操作含HTML标签的内容	`$("#content").html("<h4>带标签的内容</h4>");`
val()	操作表单输入框的值	`$("input").val("默认值");`

2. 获取/设置属性

用attr()方法，比如修改链接的href：

javascript 复制代码

// 获取属性
let href = $("a").attr("href");
console.log(href);

// 设置属性
$("a").attr("href", "https://www.baidu.com");

3. 获取/设置CSS样式

用css()方法，支持单个或多个样式：

javascript 复制代码

// 设置单个样式
$("div").css("font-size", "18px");

// 设置多个样式（对象形式）
$("div").css({
  "color": "#4299e1",
  "padding": "10px",
  "border": "1px solid #e5e5e5"
});

4. 添加元素

方法	描述	示例
append()	元素末尾追加	`$("ul").append("<li>新选项</li>");`
prepend()	元素开头追加	`$("ul").prepend("<li>第一个选项</li>");`
before()	元素前面插入	`$("img").before("<p>图片标题</p>");`
after()	元素后面插入	`$("img").after("<p>图片说明</p>");`

5. 删除元素

方法	描述	示例
remove()	删除元素（含子元素）	`$("#box").remove();`
empty()	清空元素的子元素	`$("ul").empty();`

五、综合案例：动手写交互小功能

猜数字游戏 & 留言板核心实现思路

一、猜数字游戏实现思路

核心定位 ：jQuery驱动的单页交互小游戏，核心逻辑为「随机答案生成→用户输入交互→数值对比反馈→游戏状态重置」，全程基于点击事件触发，通过jQuery实时操作DOM更新页面内容。

全局初始化 ：定义2个全局变量，count（猜测次数，初始0）、number（游戏答案，通过Math.random()生成1-100的随机整数），全局变量保证多个按钮能共用数据；
"猜"按钮点击事件 ：
- 猜测次数自增，通过$("#count").text(count)实时更新页面次数；
- 获取输入框值并转数字、去空格，避免无效字符干扰；
- 输入校验：非数字/超出1-100范围则提示，且次数回退，终止后续逻辑；
- 数值对比：将用户输入值与随机答案对比，通过$("#result").text()和css()更新页面提示文字及颜色（猜大/猜小标红/橙，猜对标绿）；
- 猜对后通过prop("disabled", true)禁用"猜"按钮，防止重复猜测；
"重新开始"按钮点击事件 ：
- 重新生成随机数更新游戏答案，重置count为0并更新页面；
- 通过val("")清空输入框、text("")清空结果提示，恢复页面初始状态；
- 启用"猜"按钮，让用户可开始新一局游戏。

二、留言板实现思路

核心定位 ：jQuery快速操作DOM的动态留言案例，核心逻辑为「输入内容获取→非空校验→动态节点构造→页面追加展示→输入框重置」，通过按钮点击触发自定义函数，实现无刷新动态添加页面内容（你的原生JS代码无任何逻辑改动）。

触发执行 ：点击"提交"按钮，触发submit()自定义函数，开始留言提交逻辑；
获取输入内容 ：通过jQueryval()方法，分别获取"谁""对谁""说什么"三个输入框的内容，赋值给对应变量；
非空基础校验 ：判断任意一个输入框内容为空，直接return终止函数，避免生成空留言，保证页面展示的都是有效内容；
动态构造DOM节点 ：通过字符串拼接，按「X对Y说：XXX」的格式，构造包含留言内容的<div>标签字符串，为后续页面展示做准备；
页面追加展示 ：通过jQueryappend()方法，将构造好的标签字符串添加到.container容器末尾，自动解析为DOM元素并展示在页面；
输入框重置 ：再次通过val("")方法清空三个输入框的内容，无需手动删除，优化用户后续输入体验。

5.1 案例1：猜数字游戏

功能：随机生成1-100的数字，用户输入猜测，提示"猜大了/猜小了/猜对了"，统计猜测次数，支持重置。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>猜数字游戏</title>
  <!-- 引入jQuery（建议用CDN，避免本地文件路径问题） -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <style>
    /* 1. 通配符选择器：重置页面默认内外边距，盒模型优化（博客知识点） */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      /* 统一字体，提升美观度 */
      font-family: "Microsoft YaHei", sans-serif;
    }

    /* 2. 页面背景色，让整体不单调 */
    body {
      background-color: #f5f7fa;
      padding-top: 80px;
    }

    /* 3. 游戏容器：居中+卡片样式（博客的margin居中、padding、border、圆角、阴影） */
    .game-container {
      width: 450px;
      margin: 0 auto; /* 水平居中（博客核心技巧） */
      background: #fff;
      padding: 30px;
      border-radius: 12px; /* 圆角边框（博客知识点） */
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* 轻微阴影，立体效果 */
    }

    /* 4. 标题样式：居中+颜色+间距 */
    .game-title {
      text-align: center; /* 文本居中 */
      color: #2d3748;
      margin-bottom: 25px;
      font-size: 24px;
    }

    /* 5. 按钮通用样式（博客的宽高、背景色、边框、圆角） */
    button {
      padding: 8px 16px;
      border: none; /* 去掉默认边框 */
      border-radius: 6px;
      cursor: pointer; /* 鼠标悬停变指针 */
      font-size: 14px;
      transition: background-color 0.2s; /* 过渡效果，hover更丝滑 */
    }

    /* 重置按钮样式：特殊背景色 */
    #reset {
      background-color: #4299e1;
      color: #fff;
      margin-bottom: 20px;
    }

    /* 猜按钮样式 */
    #guess {
      background-color: #48bb78;
      color: #fff;
      margin-left: 10px;
    }

    /* 按钮hover交互（鼠标悬停变色，提升体验） */
    #reset:hover {
      background-color: #3182ce;
    }
    #guess:hover {
      background-color: #38a169;
    }

    /* 6. 输入框样式（博客的边框、内边距、圆角） */
    #guessNum {
      width: 180px;
      height: 34px;
      padding: 0 12px;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      font-size: 14px;
      /* 聚焦时去掉默认轮廓，加自定义边框 */
      outline: none;
    }
    #guessNum:focus {
      border-color: #4299e1; /* 聚焦时边框变主色调 */
    }

    /* 7. 行元素样式：统一间距+字号 */
    .game-row {
      margin-bottom: 18px;
      font-size: 16px;
      color: #4a5568;
    }

    /* 8. 结果/次数数字样式：突出显示 */
    #count, #result {
      font-weight: bold;
      margin-left: 8px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <!-- 修正HTML结构：用div包裹做容器，去掉错误的</html>，统一用<br>换行，增加类名方便样式控制 -->
  <div class="game-container">
    <h2 class="game-title">猜数字游戏（1-100）</h2>
    <button id="reset">重新开始一局游戏</button>
    <div class="game-row">
      <span>请输入要猜的数字:</span>
      <input type="text" id="guessNum" placeholder="请输入1-100的数字">
      <button id="guess">猜</button>
    </div>
    <div class="game-row">
      <span>已经猜的次数：</span><span id="count">0</span>
    </div>
    <div class="game-row">
      <span>结果：</span><span id="result"></span>
    </div>
  </div>

  <script>
    let count = 0;
    // 先生成1-100的随机数字（全局变量）
    let number = Math.floor(Math.random() * 100) + 1;
    console.log("答案：", number); // 控制台打印答案，方便测试

    // 猜按钮点击事件
    $("#guess").click(function(){
      count++;
      // 修复BUG：$("#count") 少了ID选择器#
      $("#count").text(count);
      // 取出输入值并转成数字，同时去除首尾空格
      let getNumber = parseInt($("#guessNum").val().trim());

      // 增加非数字/超出范围判断，提升体验
      if (isNaN(getNumber) || getNumber < 1 || getNumber > 100) {
        $("#result").text("请输入1-100的有效数字！");
        $("#result").css("color", "#e53e3e");
        count--; // 次数回退，无效输入不计入
        $("#count").text(count);
        return;
      }

      // 数值比较
      if (number < getNumber) {
        $("#result").text("猜大了");
        $("#result").css("color", "#e53e3e"); // 红色
      } else if (number > getNumber) {
        $("#result").text("猜小了");
        $("#result").css("color", "#ed8936"); // 橙色
      } else {
        $("#result").text("猜对了！恭喜～");
        $("#result").css("color", "#38a169"); // 绿色
        $("#guess").prop("disabled", true); // 猜对后禁用猜按钮
      }
    });

    // 重置游戏按钮
    $("#reset").click(function(){
      // 修复BUG：去掉let，否则变成局部变量，全局number不变
      number = Math.floor(Math.random() * 100) + 1;
      console.log("新答案：", number);
      count = 0;
      $("#result").text(""); // 清空结果
      $("#count").text(count); // 重置次数
      $("#guessNum").val(""); // 清空输入框
      $("#guess").prop("disabled", false); // 启用猜按钮
    })
  </script>
</body>
</html>

5.2 案例2：简易留言墙

功能：输入留言人、留言内容，点击提交后显示在页面，清空输入框，支持多条留言。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        /* 1. 通配符选择器：重置浏览器默认内外边距，优化盒模型（博客核心知识点）
           box-sizing: border-box：宽高包含内边距和边框，避免布局错乱 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            /* 统一页面字体，提升阅读体验 */
            font-family: "Microsoft YaHei", sans-serif;
        }

        /* 2. 页面背景：浅灰色背景，让主体更突出，避免纯白单调 */
        body {
            background-color: #f5f7fa;
            /* 页面顶部留白，让容器不贴顶 */
            padding-top: 60px;
        }

        /* 3. 主容器：卡片式设计，水平居中（博客块级元素居中技巧） */
        .container {
            width: 380px;
            /* 去掉原固定高度，避免留言过多溢出，由内容自适应高度 */
            /* height: 300px; */
            margin: 0 auto;
            text-align: center;
            /* 卡片白色背景 */
            background-color: #ffffff;
            /* 内边距：让内容和容器边框留空隙（博客padding知识点） */
            padding: 25px 20px;
            /* 圆角边框：弱化直角生硬感（博客border-radius知识点） */
            border-radius: 12px;
            /* 轻微阴影：让卡片有立体效果，层次感更强 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
        }

        /* 4. 副标题样式：灰色提示文字，微调字号和间距 */
        .grey {
            color: #909399;
            font-size: 14px;
            /* 与下方输入区域留间距 */
            margin: 10px 0 20px;
            font-weight: normal;
        }

        /* 5. 输入行容器：flex布局，保证标签和输入框对齐整齐 */
        .container .row {
            width: 100%;
            height: 45px;
            display: flex;
            /* 垂直居中 */
            align-items: center;
            /* 标签和输入框间距固定，比space-between更整齐 */
            justify-content: flex-start;
            /* 行与行之间留间距 */
            margin-bottom: 12px;
        }

        /* 6. 输入行标签：固定宽度，右对齐，避免标签参差不齐 */
        .container .row span {
            width: 70px;
            text-align: right;
            /* 标签与输入框留间距 */
            margin-right: 10px;
            font-size: 16px;
            color: #333333;
        }

        /* 7. 输入框样式：优化边框、圆角、聚焦效果（博客表单样式知识点） */
        .container .row input {
            width: calc(100% - 80px);
            height: 36px;
            /* 浅灰色边框，与卡片风格统一 */
            border: 1px solid #e5e6eb;
            border-radius: 6px;
            /* 输入框内边距，避免文字贴边框 */
            padding: 0 12px;
            font-size: 15px;
            /* 去掉输入框聚焦时的默认蓝色轮廓 */
            outline: none;
        }

        /* 输入框聚焦样式：边框变主色调，有交互反馈 */
        .container .row input:focus {
            border-color: #ff9900;
            /* 聚焦时轻微阴影，强化反馈 */
            box-shadow: 0 0 3px rgba(255, 153, 0, 0.2);
        }

        /* 8. 提交按钮样式：优化hover交互，加过渡动画 */
        #submit {
            width: 100%;
            height: 44px;
            background-color: #ff9900;
            color: white;
            border: none;
            /* 重置原margin，避免间距错乱 */
            margin: 15px 0 20px;
            border-radius: 8px;
            font-size: 18px;
            /* 鼠标悬停变指针，提示可点击 */
            cursor: pointer;
            /* 过渡动画：hover变色更丝滑，无突兀感 */
            transition: background-color 0.2s ease;
        }

        /* 提交按钮hover样式：加深背景色，提升交互体验 */
        #submit:hover {
            background-color: #e68a00;
        }

        /* 9. 留言内容样式：与输入区域区分，单独美化，提升可读性 */
        .container>div:not(.row) {
            /* 留言项内边距 */
            padding: 12px 15px;
            /* 留言项背景色，浅橙色调与按钮呼应 */
            background-color: #fff9f0;
            border-radius: 6px;
            /* 留言项之间留间距 */
            margin-bottom: 10px;
            /* 文字左对齐，比居中更适合阅读 */
            text-align: left;
            font-size: 16px;
            color: #333333;
            /* 轻微边框，区分每个留言项 */
            border: 1px solid #ffe8cc;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>留言板</h1>
        <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
        <div class="row">
            <span>谁:</span> <input type="text" name="" id="from">
        </div>
        <div class="row">
            <span>对谁:</span> <input type="text" name="" id="to">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" name="" id="say">
        </div>
        <input type="button" value="提交" id="submit" onclick="submit()">
    </div>

    <!-- 引入jQuery CDN，无需本地文件，直接使用 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        // 提交留言核心函数（原代码无改动，仅补充注释）
        function submit() {
            //1. 获取三个输入框的留言内容：谁(from)、对谁(to)、说什么(say)
            var from = $('#from').val();
            var to = $('#to').val();
            var say = $('#say').val();

            //2. 非空校验：如果任意一个输入框为空，直接返回不执行后续操作
            if (from == '' || to == '' || say == '') {
                return;
            }
            //3. 构造DOM节点：拼接留言的HTML字符串，定义展示格式
            var html = "<div>" + from + "对" + to + "说:" + say + "</div>";
            //4. 追加节点：把构造好的留言节点添加到.container容器末尾，展示在页面
            $(".container").append(html);

            //5. 清空输入框：提交后重置三个输入框的值，方便下次输入
            $('#from').val("");
            $('#to').val("");
            $('#say').val("");
        }
    </script>
</body>

</html>

总结

JavaScript是网页的"行为层"，核心实现交互，和Java无直接关系，HTML（骨）、CSS（皮）、JS（魂）共同构成完整网页；
JS是动态弱类型语言，变量用let/const（推荐），数据类型以原始类型为主，===比==更严谨；
JS对象包括数组（灵活无类型限制）、函数（可复用代码块）、自定义对象（描述事物特征/行为）；
jQuery是JS框架，核心语法$(selector).action()，简化DOM操作，文档就绪函数$(function(){})是必加项；
前端交互的核心是"事件驱动"，通过监听用户操作（点击、悬停等）执行对应逻辑，实现动态效果。

学会这些，你已经能独立写简单的交互功能了！

【JavaEE03-前端部分】JavaScript入门：给网页注入灵魂，从基础到实战玩转交互！

一、初识JavaScript：网页的"行为指挥官"

1.1 什么是JavaScript？

📜 小插曲：JS和Java没关系！

🧱 HTML/CSS/JS的关系（再强调！）

1.2 JS快速上手：写第一行JS代码

1.3 JS的3种引入方式：不同场景选不同

二、JS基础语法：和Java像又不像

2.1 变量：动态弱类型的"数据容器"

✨ 关键特点：动态弱类型

2.2 数据类型：原始类型为主

2.3 运算符：和Java相似但有"坑"

1. 字符串拼接（+的特殊用法）

2. == vs ===（最容易踩坑！）

三、JavaScript对象：数组、函数、自定义对象

3.1 数组：灵活的"数据集合"

1. 数组定义（两种方式，推荐字面量）

2. 数组操作（读/增/改/删）

❗ 注意事项

3.2 函数：可复用的"代码块"

1. 函数基本语法

2. 特殊点：参数个数可以不匹配

3. 函数表达式（匿名函数）

3.3 自定义对象：描述"事物"的特征和行为

1. 字面量创建（推荐）

2. 构造函数创建（批量创建同类对象）

四、jQuery：简化JS操作的"神器"

4.1 什么是jQuery？

4.2 引入jQuery

4.3 jQuery核心语法

🚨 必加：文档就绪函数

4.4 jQuery选择器：精准选元素

4.5 jQuery事件：感知用户操作

4.6 jQuery操作元素：增删改查全搞定

1. 获取/设置内容

2. 获取/设置属性

3. 获取/设置CSS样式

4. 添加元素

5. 删除元素

五、综合案例：动手写交互小功能

猜数字游戏 & 留言板 核心实现思路

一、猜数字游戏 实现思路

二、留言板 实现思路

5.1 案例1：猜数字游戏

5.2 案例2：简易留言墙

总结

猜数字游戏 & 留言板核心实现思路

一、猜数字游戏实现思路

二、留言板实现思路