JavaScript 从入门到实践：核心知识点与案例解析

第一章 JavaScript 介绍

JavaScript（简称JS）是 Web 前端开发的核心技术之一，具有以下核心特性：

  1. 脚本语言：解释型执行，无需编译，逐行解析运行
  2. 基于对象：可创建和使用对象，能实现封装、模拟继承，但不支持多态
  3. 弱类型：变量类型动态转换，声明后可接收任意类型数据
  4. 事件驱动：无需服务端参与即可直接响应用户操作
  5. 跨平台：依赖浏览器支持，与操作系统无关

什么是 JavaScript

  • 概述：简称 JS，是嵌入在网页中的脚本语言，用于 Web 开发
  • 作用：实现页面交互效果，提升用户体验，让静态页面"动起来"

JavaScript 三大组成部分

组成部分 作用描述
ECMA Script 语法基础，定义脚本语言的核心规范
BOM 浏览器对象模型，用于操作浏览器功能（如地址栏、刷新等）
DOM 文档对象模型，用于操作网页元素（标签、属性、文本内容等）

网页技术分工

技术 核心作用
HTML 构建网页结构，创建基础内容
CSS 美化页面样式，控制元素展示效果
JavaScript 实现交互逻辑，提升页面动态效果和用户体验

第二章 JavaScript 入门

第一个案例：输出 HelloWorld

<!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>
    <!-- JS 代码通常放在 body 底部或 head 中 -->
    <script>
        // 循环输出 5 次信息
        for (let i = 0; i < 5; i++) {
            console.log("Hello World");  // 控制台输出
            // alert("Hello World");     // 弹窗输出（可取消注释测试）
        }
    </script>
</body>
</html>

第三章 JavaScript 引入方式

1. 内部引入

直接在 HTML 页面中嵌入 script 标签编写 JS 代码：

<script>
    // 这里编写 JavaScript 代码
    console.log("这是内部引入的 JS 代码");
</script>

示例：

<!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>
</body>
<script>
    // 内部 JS 代码
    for (let i = 0; i < 3; i++) {
        console.log("内部引入：" + i);
    }
</script>
</html>

2. 外部引入

将 JS 代码单独编写在 .js 文件中，通过 script 标签的 src 属性引入：

<!-- 引入外部 JS 文件 -->
<script src="script.js"></script>

示例：

  1. 创建 script.js 文件：
// script.js 内容
for (let i = 0; i < 3; i++) {
    console.log("外部引入：" + i);
}
  1. 在 HTML 中引入：
<!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>
</body>
<!-- 引入外部 JS 文件 -->
<script src="script.js"></script>
</html>

第四章 JavaScript 输出方式

JavaScript 提供三种常用输出方式，适用场景不同：

输出方式 特点说明
console.log() 控制台输出，用于调试，不影响页面展示
alert() 弹窗输出，会阻塞程序执行，适合简单提示
document.write() 页面直接输出，可解析 HTML 标签

示例：

<!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>
</body>
<script>
    // 控制台输出
    console.log("这是控制台输出");
    
    // 弹窗输出
    alert("这是弹窗输出");
    
    // 页面输出（支持 HTML 解析）
    document.write("<h3>这是页面输出</h3>");
    document.write("<p>使用 document.write() 可以直接写入页面</p>");
</script>
</html>

第五章 JavaScript 基本使用

1. 数据类型

JavaScript 包含 6 种基本数据类型，可通过 typeof 运算符检测：

类型 说明 示例
number 数字类型（整数、小数） 123、3.14
boolean 布尔类型 true、false
string 字符串类型（单引号、双引号、反引号） "hello"、'world'、`js`
object 对象类型（包括数组、null 等） {name: "Tom"}、[1,2,3]
undefined 未定义类型（变量声明未赋值） let a;
function 函数类型 function() {}

示例：

<!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>
</body>
<script>
    // 检测各种数据类型
    console.log("数字类型：", typeof 123);
    console.log("布尔类型：", typeof true);
    console.log("字符串类型：", typeof "hello");
    console.log("对象类型：", typeof {name: "Tom"});
    console.log("数组类型：", typeof [1,2,3]);  // 数组属于 object
    console.log("null 类型：", typeof null);    // null 属于 object
    console.log("undefined 类型：", typeof undefined);
    
    let a;
    console.log("未赋值变量：", typeof a);
    
    console.log("函数类型：", typeof function(){});
</script>
</html>

2. 变量定义

JavaScript 中变量声明有三种方式：

声明方式 特点说明
var 函数作用域，允许重复声明
let 块级作用域，不允许重复声明
const 块级作用域，声明常量，不允许重新赋值

示例：

<!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>
</body>
<script>
    // var 声明（函数作用域）
    var a = 10;
    console.log("var 声明：", a);
    
    // let 声明（块级作用域）
    let b = 20;
    console.log("let 声明：", b);
    
    // const 声明（常量）
    const c = 30;
    console.log("const 声明：", c);
    // c = 40;  // 报错：常量不能重新赋值
</script>
</html>

3. var 与 let 的区别

核心区别在于作用域：

  • var 具有函数作用域，可穿透代码块
  • let 具有块级作用域，仅在代码块内有效

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>var 与 let 区别</title>
</head>
<body>
</body>
<script>
    // var 声明的变量作用域穿透循环
    for (var i = 0; i < 3; i++) {
        var j = 10;  // var 声明，作用域在函数/全局
    }
    console.log("循环外访问 var 声明的 j：", j);  // 输出 10
    
    // let 声明的变量限制在块级作用域
    for (var i = 0; i < 3; i++) {
        let k = 20;  // let 声明，作用域仅限循环内
    }
    // console.log(k);  // 报错：k 未定义
</script>
</html>

4. 常用运算符

（1）算术运算符

+、-、*、/、%（取余）、++（自增）、--（自减）

（2）赋值运算符

=、+=、-=、*=、/=、%=

（3）比较运算符
运算符 说明
== 比较值是否相等
=== 比较值和类型是否都相等
!= 不等于
!== 不全等于
>、<、>=、<= 大小比较

示例：

<!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>
</body>
<script>
    let x = 111;
    let y = "111";
    
    console.log("x == y：", x == y);    // true（仅比较值）
    console.log("x === y：", x === y);  // false（类型不同）
</script>
</html>
（4）逻辑运算符

&&（与）、||（或）、!（非）

（5）三元运算符

格式：条件 ? 表达式1 : 表达式2

示例：

let x = 10;
let y = 20;
console.log(x > y ? "x 大" : "y 大");  // 输出 "y 大"

5. 数组操作

（1）数组定义

JavaScript 数组有四种定义方式：

// 方式1：创建空数组
let arr1 = new Array();

// 方式2：创建指定长度的数组
let arr2 = new Array(3);

// 方式3：通过构造函数初始化元素
let arr3 = new Array(1, 2, 3);

// 方式4：简洁语法（最常用）
let arr4 = [1, 2, 3, 4];

示例：

<!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>
</body>
<script>
    // 数组创建示例
    let arr1 = new Array();
    console.log("arr1 长度：", arr1.length);  // 0
    
    let arr2 = new Array(3);
    console.log("arr2 长度：", arr2.length);  // 3
    
    let arr3 = new Array(1, 2, 3);
    console.log("arr3 内容：", arr3);         // [1, 2, 3]
    
    let arr4 = [10, 20, 30];
    console.log("arr4 第二个元素：", arr4[1]);  // 20
</script>
</html>
（2）数组特点
  1. 可存储不同类型元素（弱类型特性）
  2. 长度动态可变，无需预先定义
  3. 未赋值的索引位置为 undefined

示例：

<!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>
</body>
<script>
    // 存储不同类型元素
    let arr = [1, true, "hello"];
    console.log("混合类型数组：", arr);
    
    // 动态添加元素
    arr[5] = "world";
    console.log("索引5的元素：", arr[5]);  // "world"
    
    // 未赋值索引为 undefined
    console.log("索引3的元素：", arr[3]);  // undefined
    
    // 长度自动更新
    console.log("数组长度：", arr.length);  // 6
</script>
</html>
（3）数组常用方法
方法 说明
concat() 合并数组，返回新数组
reverse() 反转数组，修改原数组
join() 用分隔符拼接数组为字符串
sort() 排序数组，默认按字符串规则排序
pop() 删除最后一个元素，返回被删除元素
push() 向末尾添加元素，返回新长度

示例：

<!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>
</body>
<script>
    let arr1 = [1, 2, 3];
    let arr2 = [4, 5, 6];
    
    // 合并数组
    console.log("合并结果：", arr1.concat(arr2));  // [1,2,3,4,5,6]
    
    // 反转数组
    console.log("反转后：", arr1.reverse());  // [3,2,1]
    
    // 拼接为字符串
    console.log("拼接结果：", arr1.join("-"));  // "3-2-1"
    
    // 排序
    console.log("排序后：", arr1.sort());  // [1,2,3]
    
    // 删除最后一个元素
    console.log("被删除元素：", arr1.pop());  // 3
    console.log("删除后数组：", arr1);  // [1,2]
    
    // 添加元素
    console.log("新长度：", arr2.push(7, 8));  // 4
    console.log("添加后数组：", arr2);  // [4,5,6,7,8]
</script>
</html>
（4）数组遍历
<!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>
</body>
<script>
    let arr = [10, 20, 30, 40];
    
    // 普通 for 循环
    console.log("普通 for 循环：");
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    
    // for...of 循环（增强 for 循环）
    console.log("for...of 循环：");
    for (let item of arr) {
        console.log(item);
    }
</script>
</html>

6. 函数定义与使用

（1）命名函数
function 函数名(参数) {
    // 函数体
    return 返回值;  // 可选
}

特点：

  • 参数无需声明类型
  • 无需声明返回值类型
  • 返回值由 return 决定

示例：

<!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>
</body>
<script>
    // 无参无返回值
    function sayHello() {
        console.log("Hello World!");
    }
    sayHello();
    
    // 有参无返回值
    function sum(a, b) {
        console.log(a + b);
    }
    sum(10, 20);  // 30
    
    // 有返回值
    function multiply(a, b) {
        return a * b;
    }
    console.log(multiply(3, 4));  // 12
</script>
</html>
（2）匿名函数
// 赋值给变量
let 变量名 = function(参数) {
    // 函数体
};

特点：

  • 没有函数名，通常赋值给变量或作为事件处理函数
  • 通过变量名调用

示例：

<!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>
</body>
<script>
    // 匿名函数赋值给变量
    let greet = function(name) {
        return "Hello, " + name;
    };
    
    console.log(greet("Tom"));  // "Hello, Tom"
</script>
</html>
（3）注意：JavaScript 没有重载

函数名相同会覆盖之前的定义，而非重载：

<!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>
</body>
<script>
    function test(a, b) {
        console.log("两个参数的函数");
    }
    
    function test(a, b, c) {  // 覆盖之前的定义
        console.log("三个参数的函数");
    }
    
    test(1, 2);  // 输出 "三个参数的函数"
</script>
</html>

第六章 BOM 对象（浏览器对象模型）

BOM（Browser Object Model）用于操作浏览器功能，常用功能如下：

1. 确认框弹窗

confirm() 方法显示确认对话框，返回布尔值：

<!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>
</body>
<script>
    let result = confirm("确定要删除吗？");
    if (result) {
        console.log("用户点击了确定");
    } else {
        console.log("用户点击了取消");
    }
</script>
</html>

2. 页面跳转

通过 location.href 操作地址栏实现页面跳转：

<!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>
    <button onclick="goToBaidu()">去百度</button>

    <script>
        function goToBaidu() {
            // 跳转到百度首页
            location.href = "https://www.baidu.com";
        }
    </script>
</body>
</html>

第七章 DOM 对象（文档对象模型）

DOM（Document Object Model）用于操作网页元素，核心功能包括：

  • 获取标签对象
  • 操作标签属性
  • 操作标签体内容
  • 添加/删除标签

1. 获取标签对象的方法

方法 说明 返回值
getElementById() 根据 ID 获取元素 单个元素
getElementsByTagName() 根据标签名获取元素 元素集合（伪数组）
getElementsByName() 根据 name 属性获取元素 元素集合
getElementsByClassName() 根据 class 属性获取元素 元素集合
querySelector() 根据 CSS 选择器获取第一个匹配元素 单个元素
querySelectorAll() 根据 CSS 选择器获取所有匹配元素 元素集合

示例：

<!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>
    <div id="box">ID 为 box 的 div</div>
    <p class="text">class 为 text 的 p 标签</p>
    <p class="text">另一个 class 为 text 的 p 标签</p>
    <input type="text" name="username">

    <script>
        // 根据 ID 获取
        let box = document.getElementById("box");
        console.log("通过 ID 获取：", box);
        
        // 根据标签名获取
        let ps = document.getElementsByTagName("p");
        console.log("通过标签名获取：", ps);
        
        // 根据 class 获取
        let texts = document.getElementsByClassName("text");
        console.log("通过 class 获取：", texts);
        
        // 根据 name 获取
        let username = document.getElementsByName("username");
        console.log("通过 name 获取：", username);
        
        // CSS 选择器方式
        let firstText = document.querySelector(".text");
        console.log("querySelector 获取第一个 .text：", firstText);
        
        let allTexts = document.querySelectorAll(".text");
        console.log("querySelectorAll 获取所有 .text：", allTexts);
    </script>
</body>
</html>

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>
    <a href="https://www.baidu.com" id="link">百度一下</a>

    <script>
        let link = document.getElementById("link");
        
        // 获取属性值
        console.log("原始 href：", link.href);
        
        // 设置属性值
        link.href = "https://www.google.com";
        link.target = "_blank";  // 新窗口打开
        console.log("修改后 href：", link.href);
    </script>
</body>
</html>

3. 标签体操作

通过 innerText 和 innerHTML 操作标签体内容：

操作 说明
innerText 操作纯文本，不解析 HTML 标签
innerHTML 操作 HTML 内容，会解析标签

示例：

<!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>
    <div id="container"></div>

    <script>
        let container = document.getElementById("container");
        
        // 使用 innerText 设置纯文本
        container.innerText = "<h3>这是 innerText 设置的内容</h3>";
        
        // 使用 innerHTML 设置 HTML 内容
        setTimeout(() => {  // 延迟 1 秒执行
            container.innerHTML = "<h3>这是 innerHTML 设置的内容</h3>";
        }, 1000);
    </script>
</body>
</html>

4. 标签添加与删除

方法 说明
createElement() 创建新元素
appendChild() 添加子元素到末尾
insertBefore() 在指定元素前插入新元素
replaceChild() 替换子元素
remove() 删除元素自身

示例：

<!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>
    <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>

    <script>
        let list = document.getElementById("list");
        
        // 1. 创建新元素并添加到末尾
        let newItem = document.createElement("li");
        newItem.innerText = "Item 3";
        list.appendChild(newItem);
        
        // 2. 在指定位置插入元素
        let insertItem = document.createElement("li");
        insertItem.innerText = "Inserted Item";
        list.insertBefore(insertItem, list.children[1]);  // 插入到第二个元素前
        
        // 3. 替换元素
        let replaceItem = document.createElement("li");
        replaceItem.innerText = "Replaced Item";
        list.replaceChild(replaceItem, list.children[0]);  // 替换第一个元素
        
        // 4. 删除元素
        setTimeout(() => {  // 延迟 2 秒删除最后一个元素
            list.lastElementChild.remove();
        }, 2000);
    </script>
</body>
</html>

第八章 JavaScript 事件

事件是用户与页面交互的桥梁，通过监听事件可实现动态响应。

1. 事件绑定方式

方式1：标签内直接绑定
<input type="button" onclick="handleClick()" value="点击我">
<script>
    function handleClick() {
        alert("按钮被点击了");
    }
</script>
方式2：DOM 元素绑定
<input type="button" id="btn" value="点击我">
<script>
    document.getElementById("btn").onclick = function() {
        alert("按钮被点击了");
    };
</script>

2. 常用事件类型

（1）鼠标点击事件
  • onclick：单击事件
  • ondblclick：双击事件

示例：

<!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>
    <button id="btn">单击复制 / 双击清空</button>
    <input type="text" id="source" placeholder="输入内容">
    <input type="text" id="target" placeholder="结果">

    <script>
        let btn = document.getElementById("btn");
        let source = document.getElementById("source");
        let target = document.getElementById("target");
        
        // 单击事件：复制内容
        btn.onclick = function() {
            target.value = source.value;
        };
        
        // 双击事件：清空内容
        btn.ondblclick = function() {
            source.value = "";
            target.value = "";
        };
    </script>
</body>
</html>
（2）焦点事件
  • onfocus：获取焦点
  • onblur：失去焦点

示例：

<!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>
    用户名：<input type="text" id="username">
    <span id="tip" style="color: red;"></span>

    <script>
        let username = document.getElementById("username");
        let tip = document.getElementById("tip");
        
        // 获取焦点：清空提示
        username.onfocus = function() {
            tip.innerText = "";
        };
        
        // 失去焦点：验证输入
        username.onblur = function() {
            if (this.value.trim() === "") {
                tip.innerText = "用户名不能为空";
            }
        };
    </script>
</body>
</html>
（3）改变事件

onchange：元素内容改变并失去焦点时触发

<!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>
    <select id="city" onchange="showCity()">
        <option value="">请选择城市</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
    </select>
    <p id="result"></p>

    <script>
        function showCity() {
            let city = document.getElementById("city");
            let result = document.getElementById("result");
            result.innerText = "你选择了：" + city.value;
        }
    </script>
</body>
</html>

总结

本文涵盖了 JavaScript 的核心基础知识，包括：

  • JavaScript 的特性与组成部分
  • 变量、数据类型与运算符
  • 数组与函数的使用
  • BOM 与 DOM 操作
  • 事件处理机制

通过这些知识点的学习和实践，可以实现基本的页面交互效果。JavaScript 作为 Web 前端的核心技术，需要结合实际项目不断练习，才能熟练掌握其用法。

# javascript # 开发语言 # ecmascript # css # css3 # html # 前端
Logo
亚马逊云科技技术品牌专区

更多推荐

cover

WRB1205S-1WR2 与钡特电源 VB1-12S05S 参数规格解析｜ 1W 宽压输入隔离 DC-DC 工业电源模块性能拆解

avatar 亚马逊云科技技术品牌专区

AI 前沿日报 | 2026年7月10日

法国竞争管理局正对英伟达推进反垄断调查，核心指控围绕市场对其 CUDA 平台的高度依赖，以及英伟达对 CoreWeave 等 AI 云计算公司的投资。若落地，法国将成全球首个对英伟达提出反垄断指控的监管机构。Reflect 功能向已开记忆功能的用户开放，可回看过去 1-12 个月的 Claude 使用活动，并按"委派、描述、辨别、审慎"四个维度生成使用总结与改进建议。据 IT之家援引的消息，三星正

avatar 亚马逊云科技技术品牌专区
cover

FPGA 人工智能开发新手入门指南

avatar 亚马逊云科技技术品牌专区