← 返回上一页

第1章: JavaScript 简介

了解 JavaScript 是什么以及如何使用它

什么是 JavaScript？

JavaScript（简称 JS）是一种轻量级的编程语言，主要用于为网页添加交互功能。

JavaScript 的作用

响应用户操作（点击、输入、滚动等）
动态修改网页内容和样式
验证表单数据
与服务器通信（AJAX）
创建动画和特效
开发完整的 Web 应用

💡 提示： JavaScript 与 Java 是完全不同的编程语言，不要混淆！

JavaScript 的特点

解释型语言：代码逐行执行，无需编译
动态类型：变量类型可以改变
基于原型：面向对象的实现方式
单线程：一次只执行一个任务
事件驱动：响应用户和系统事件

JavaScript 引入方式

1. 内联 JavaScript

直接在 HTML 元素的事件属性中编写。

<button onclick="alert('Hello!')">点击我</button>

缺点：不推荐，难以维护

2. 内部 JavaScript

在 HTML 文档中使用 <script> 标签。

<script>
    console.log('Hello, JavaScript!');
    alert('欢迎学习 JS');
</script>

3. 外部 JavaScript（推荐）

创建独立的 .js 文件，在 HTML 中引入。

<!-- HTML 文件 -->
<script src="script.js"></script>

// script.js 文件
console.log('Hello from external file!');

💡 提示： 通常将 <script> 标签放在 </body> 之前，确保 DOM 加载完成。

第一个 JavaScript 程序

JavaScript 基本语法

📝 标识符命名规则

✅ 合法标识符

userName - 驼峰命名
_count - 下划线开头
$price - 美元符号开头
user2 - 包含数字

❌ 非法标识符

2user - 数字开头
user-name - 包含连字符
let - 保留字
my var - 包含空格

🔤 大小写敏感示例

name

变量1

Name

变量2（不同）

NAME

变量3（不同）

NaMe

变量4（不同）

这四个是完全不同的变量名！

1. 语句和分号

JavaScript 语句以分号结尾（可选但推荐）。

console.log('Hello');
alert('World');

2. 注释

注释用于解释代码，不会被执行。

// 这是单行注释

/*
 * 这是多行注释
 * 可以写多行
 */

console.log('Hello'); // 行尾注释

3. 大小写敏感

JavaScript 区分大小写。

let name = 'Alice';
let Name = 'Bob';    // 这是不同的变量
let NAME = 'Charlie'; // 这也是不同的变量

4. 标识符命名规则

只能包含字母、数字、下划线、美元符号
不能以数字开头
不能使用保留字（如 let、if、for 等）
推荐使用驼峰命名法：myVariableName

// 合法的标识符
let userName = 'Alice';
let _count = 10;
let $price = 99.99;
let user2 = 'Bob';

// 不合法的标识符
let 2user = 'Error';  // 不能以数字开头
let user-name = 'Error'; // 不能包含连字符
let let = 'Error';    // 不能使用保留字

输出方式

📊 四种输出方式对比

console.log()

输出到控制台

✅ 调试首选

✅ 不干扰用户

alert()

弹出警告框

⚠️ 会阻塞页面

⚠️ 仅用于警告

document.write()

写入HTML文档

❌ 不推荐使用

❌ 会覆盖页面

innerHTML

修改元素内容

✅ 推荐使用

✅ 灵活可控

1. console.log()

在浏览器控制台输出信息（开发调试常用）。

console.log('Hello, World!');
console.log(123);
console.log(true);

2. alert()

显示警告对话框。

alert('这是一个警告框');

3. document.write()

直接写入 HTML 文档（不推荐，会覆盖页面）。

document.write('<h1>Hello</h1>');

4. innerHTML

修改 HTML 元素的内容（推荐）。

document.getElementById('demo').innerHTML = 'Hello!';

输出方式演示

点击按钮查看不同的输出方式

开发者工具

浏览器的开发者工具是 JavaScript 开发的重要工具。

打开方式

Chrome/Edge：F12 或 Ctrl+Shift+I（Mac: Cmd+Option+I）
Firefox：F12 或 Ctrl+Shift+K（Mac: Cmd+Option+K）
Safari：Cmd+Option+C

常用面板

Console（控制台）：查看输出、执行 JS 代码、调试
Elements（元素）：查看和修改 HTML/CSS
Sources（源代码）：调试 JavaScript 代码
Network（网络）：查看网络请求

💡 提示： 按 F12 打开开发者工具，在 Console 面板中可以直接输入 JavaScript 代码并执行。

🎯 互动练习：运行你的第一段 JavaScript

在下面的输入框中输入 JavaScript 代码，点击运行：

输出结果：

等待运行...
                

本章小结

JavaScript 是网页编程语言，用于添加交互功能
推荐使用外部 JS 文件，将 <script> 放在 </body> 前
JavaScript 区分大小写，语句以分号结尾
使用 // 或 /* */ 添加注释
console.log() 用于调试输出
使用浏览器开发者工具（F12）进行开发和调试