入门

本章将介绍 JavaScript 的基本使用方法，包括如何在 HTML 中引入 JavaScript、基本语法规则、以及常用的输出方法。

引入 JavaScript

在 HTML 中使用 JavaScript 有三种方式：

1. 内联脚本

直接在 HTML 文件中使用 <script> 标签编写 JavaScript 代码：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内联脚本示例</title>
    <!-- 可以放在 head 中 -->
    <script>
        // 这里的代码会在页面加载时执行
        console.log('head 中的脚本执行了');
    </script>
</head>
<body>
    <h1>内联脚本示例</h1>
    
    <!-- 也可以放在 body 中（推荐放在 body 结束标签之前） -->
    <script>
        // 这里的代码会在解析到这里时执行
        console.log('body 中的脚本执行了');
        
        // 可以操作页面元素
        alert('页面加载完成！');
    </script>
</body>
</html>

2. 外部脚本文件

将 JavaScript 代码写在独立的 .js 文件中，然后在 HTML 中引用：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部脚本示例</title>
    
    <!-- 引入外部 JavaScript 文件 -->
    <!-- src 属性指定脚本文件的路径 -->
    <script src="js/main.js"></script>
    
    <!-- 可以引入多个脚本文件 -->
    <script src="js/utils.js"></script>
</head>
<body>
    <h1>外部脚本示例</h1>
    
    <!-- 推荐将脚本放在 body 结束标签之前 -->
    <!-- 这样可以确保页面内容先加载 -->
    <script src="js/app.js"></script>
</body>
</html>

javascript

// js/main.js 文件内容
console.log('main.js 加载完成');

// js/utils.js 文件内容
function formatDate(date) {
    // 格式化日期的函数
    return date.toLocaleDateString('zh-CN');
}

// js/app.js 文件内容
console.log('app.js 加载完成');
console.log('今天是：' + formatDate(new Date()));

3. 行内脚本（不推荐）

直接在 HTML 元素的事件属性中编写 JavaScript 代码：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>行内脚本示例</title>
</head>
<body>
    <!-- 行内脚本：直接在事件属性中写代码 -->
    <!-- 不推荐使用，因为难以维护 -->
    <button onclick="alert('你点击了按钮！')">点击我</button>
    
    <input type="text" onfocus="this.style.backgroundColor='#ffffcc'" 
           onblur="this.style.backgroundColor='#ffffff'">
</body>
</html>

script 标签的位置

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>脚本位置示例</title>
    
    <!-- 放在 head 中：脚本会在页面渲染前执行 -->
    <!-- 如果脚本操作 DOM，可能会出错 -->
    <script>
        // 此时 DOM 还没有加载
        // document.getElementById('myDiv') 会返回 null
        console.log('head 脚本执行');
    </script>
    
    <!-- 使用 defer 属性：脚本会延迟到 DOM 加载完成后执行 -->
    <script defer src="script-defer.js"></script>
    
    <!-- 使用 async 属性：脚本异步加载，加载完成后立即执行 -->
    <script async src="script-async.js"></script>
</head>
<body>
    <div id="myDiv">内容</div>
    
    <!-- 推荐位置：放在 body 结束标签之前 -->
    <!-- 此时 DOM 已经加载完成 -->
    <script>
        // 可以安全地操作 DOM
        var div = document.getElementById('myDiv');
        console.log(div);  // 正确获取到元素
    </script>
</body>
</html>

defer 和 async 的区别

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>defer 与 async 示例</title>
</head>
<body>
    <!--
        普通脚本：<script src="a.js"></script>
        - 立即下载并执行
        - 阻塞页面渲染
        - 执行顺序：按照在文档中的顺序
        
        defer 延迟脚本：<script defer src="b.js"></script>
        - 异步下载，不阻塞页面
        - 等待 DOM 解析完成后执行
        - 执行顺序：按照在文档中的顺序
        - 适合：需要操作 DOM 的脚本
        
        async 异步脚本：<script async src="c.js"></script>
        - 异步下载，不阻塞页面
        - 下载完成后立即执行
        - 执行顺序：不保证顺序，谁先下载完谁先执行
        - 适合：独立的第三方脚本（如统计代码）
    -->
    
    <script>
        console.log('1. 内联脚本');
    </script>
    <script defer src="defer-script.js"></script>
    <script async src="async-script.js"></script>
    <script>
        console.log('2. 内联脚本');
    </script>
</body>
</html>

基本语法

语句

JavaScript 代码由语句组成，每条语句执行一个操作：

javascript

// 语句以分号结尾（分号可以省略，但不推荐）
var name = '张三';  // 声明变量并赋值
console.log(name);  // 输出变量值

// 多条语句可以写在一行（不推荐）
var a = 1; var b = 2; console.log(a + b);

// 推荐每条语句单独一行
var x = 10;
var y = 20;
var sum = x + y;
console.log(sum);

注释

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

javascript

// 这是单行注释
// 注释用于解释代码的作用

/*
 * 这是多行注释
 * 可以跨越多行
 * 用于详细说明
 */

/**
 * 这是文档注释
 * 通常用于函数说明
 * @param {string} name - 用户名
 * @returns {string} 问候语
 */
function greet(name) {
    return '你好，' + name + '！';
}

// 快捷键：
// 单行注释：Ctrl + /
// 多行注释：Ctrl + Shift + /

标识符

标识符是变量、函数、属性等的名称：

javascript

// 标识符命名规则：
// 1. 可以包含字母、数字、下划线(_)、美元符号($)
// 2. 必须以字母、下划线或美元符号开头
// 3. 不能使用保留字（关键字）

// 合法的标识符
var userName = '张三';      // 字母开头
var _count = 10;           // 下划线开头
var $element = document.body;  // 美元符号开头
var user2 = '李四';        // 包含数字（不能开头）

// 不合法的标识符
// var 2user = '王五';      // 错误：数字开头
// var user-name = '赵六';  // 错误：包含连字符
// var var = 'test';        // 错误：使用保留字

// 命名规范（推荐）
// 1. 变量和函数：使用驼峰命名法（camelCase）
var firstName = '张';
var lastName = '三';
function getUserName() {
    return firstName + lastName;
}

// 2. 常量：使用全大写字母和下划线
var MAX_SIZE = 100;
var PI = 3.14159;

// 3. 类名：使用帕斯卡命名法（PascalCase）
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 4. 私有属性：以下划线开头
var _privateVar = '私有变量';

保留字

JavaScript 保留了一些关键字，不能用作标识符：

javascript

// JavaScript 保留字（不能用作变量名）
// break, case, catch, continue, debugger, default, delete
// do, else, finally, for, function, if, in, instanceof
// new, return, switch, this, throw, try, typeof, var
// void, while, with, class, const, enum, export, extends
// import, super, implements, interface, let, package, private
// protected, public, static, yield

// 未来可能成为保留字
// await, async

大小写敏感

JavaScript 区分大小写：

javascript

// 以下是完全不同的变量
var name = '张三';
var Name = '李四';
var NAME = '王五';
var nAmE = '赵六';

console.log(name);  // 输出：张三
console.log(Name);  // 输出：李四
console.log(NAME);  // 输出：王五

// 关键字和函数名也要注意大小写
var obj = null;  // 正确
// var obj = Null;  // 错误：Null 未定义
// var obj = NULL;  // 错误：NULL 未定义

输出方法

JavaScript 提供了多种输出信息的方式：

console.log()

在浏览器控制台输出信息，是最常用的调试方法：

javascript

// 基本输出
console.log('Hello, World!');  // 输出字符串
console.log(123);               // 输出数字
console.log(true);              // 输出布尔值

// 输出变量
var name = '张三';
var age = 25;
console.log(name);              // 输出：张三
console.log('姓名：' + name);   // 字符串拼接
console.log('姓名：', name, '年龄：', age);  // 多个参数

// 格式化输出
console.log('姓名：%s，年龄：%d', name, age);  // 输出：姓名：张三，年龄：25

// 输出对象
var person = {
    name: '张三',
    age: 25,
    city: '北京'
};
console.log(person);            // 输出整个对象
console.table(person);          // 以表格形式输出

// 输出数组
var colors = ['红', '绿', '蓝'];
console.log(colors);            // 输出数组
console.table(colors);          // 表格形式

// 其他 console 方法
console.info('信息');           // 信息（通常与 log 相同）
console.warn('警告');           // 警告（黄色）
console.error('错误');          // 错误（红色）

// 分组输出
console.group('用户信息');
console.log('姓名：张三');
console.log('年龄：25');
console.groupEnd();

// 计时
console.time('循环耗时');
for (var i = 0; i < 1000000; i++) {
    // 空循环
}
console.timeEnd('循环耗时');  // 输出执行时间

alert()

弹出警告对话框：

javascript

// 弹出警告框
alert('这是一个警告框！');

// 弹出变量的值
var message = '操作成功！';
alert(message);

// 弹出计算结果
alert('1 + 2 = ' + (1 + 2));

// 注意：alert() 会阻塞代码执行，直到用户点击确定
alert('第一条消息');
alert('第二条消息');  // 只有点击第一条后才会显示

confirm()

弹出确认对话框，返回布尔值：

javascript

// 确认对话框
// 点击"确定"返回 true，点击"取消"返回 false
var result = confirm('确定要删除吗？');

if (result) {
    console.log('用户点击了确定');
    // 执行删除操作
} else {
    console.log('用户点击了取消');
    // 取消删除
}

// 实际应用示例
function deleteItem(id) {
    if (confirm('确定要删除这条记录吗？此操作不可恢复！')) {
        // 用户确认删除
        console.log('删除 ID 为 ' + id + ' 的记录');
        // 执行删除逻辑...
    } else {
        // 用户取消删除
        console.log('取消删除');
    }
}

deleteItem(1001);

prompt()

弹出输入对话框，返回用户输入的字符串：

javascript

// 输入对话框
// 第一个参数是提示文字，第二个参数是默认值（可选）
var name = prompt('请输入您的姓名：');
console.log('您输入的姓名是：' + name);

// 带默认值的输入框
var age = prompt('请输入您的年龄：', '18');
console.log('您输入的年龄是：' + age);

// 用户点击"取消"返回 null
var input = prompt('请输入内容：');
if (input === null) {
    console.log('用户点击了取消');
} else if (input === '') {
    console.log('用户没有输入任何内容');
} else {
    console.log('用户输入了：' + input);
}

// 实际应用示例：简单的计算器
function simpleCalculator() {
    var num1 = prompt('请输入第一个数字：');
    var operator = prompt('请输入运算符（+、-、*、/）：');
    var num2 = prompt('请输入第二个数字：');
    
    // 转换为数字
    num1 = Number(num1);
    num2 = Number(num2);
    
    var result;
    switch (operator) {
        case '+':
            result = num1 + num2;
            break;
        case '-':
            result = num1 - num2;
            break;
        case '*':
            result = num1 * num2;
            break;
        case '/':
            result = num1 / num2;
            break;
        default:
            alert('不支持的运算符');
            return;
    }
    
    alert('计算结果：' + result);
}

document.write()

向文档写入内容（不推荐使用）：

javascript

// 在页面中写入内容
document.write('<h1>Hello, World!</h1>');
document.write('<p>这是通过 JavaScript 写入的内容</p>');

// 写入变量的值
var name = '张三';
document.write('<p>欢迎您，' + name + '</p>');

// 注意：
// 1. 如果在页面加载完成后调用 document.write()，会覆盖整个页面
// 2. 不推荐在实际开发中使用
// 3. 通常只用于测试或特殊情况

// 页面加载完成后调用会覆盖页面
window.onload = function() {
    // 这会清空整个页面，只显示写入的内容
    // document.write('页面已加载完成');
};

代码规范

良好的代码规范可以提高代码的可读性和可维护性：

javascript

// 1. 使用分号结束语句（虽然可以省略，但推荐使用）
var name = '张三';
function greet() {
    return 'Hello';
}

// 2. 使用空格和缩进
function calculate(a, b) {
    // 使用 4 个空格或 1 个 tab 缩进
    if (a > b) {
        return a - b;
    } else {
        return b - a;
    }
}

// 3. 运算符两边加空格
var sum = 1 + 2;
var isGreater = a > b;

// 4. 逗号后面加空格
var colors = ['红', '绿', '蓝'];
var person = { name: '张三', age: 25 };

// 5. 花括号风格
// 推荐使用 K&R 风格（左花括号不换行）
if (true) {
    console.log('true');
} else {
    console.log('false');
}

// 6. 函数命名要有意义
// 不好的命名
function a() {
    return 'Hello';
}

// 好的命名
function getGreeting() {
    return 'Hello';
}

// 7. 避免全局变量
// 不好的做法
var globalVar = '全局变量';

// 更好的做法：使用对象封装
var MyApp = {
    name: '我的应用',
    version: '1.0.0',
    init: function() {
        console.log('应用初始化');
    }
};

// 8. 使用严格模式
'use strict';  // 放在文件或函数开头
// 严格模式可以帮助发现潜在错误

小结

本章学习了 JavaScript 的基础知识：

引入方式：内联脚本、外部脚本、行内脚本
script 标签位置：head 中、body 中，defer 和 async 属性
基本语法：语句、注释、标识符、保留字、大小写敏感
输出方法：console.log()、alert()、confirm()、prompt()、document.write()
代码规范：分号、缩进、命名规范等

下一章我们将学习变量与数据类型，了解如何声明变量和 JavaScript 的数据类型。

入门 ​

引入 JavaScript ​

1. 内联脚本 ​

2. 外部脚本文件 ​

3. 行内脚本（不推荐） ​

script 标签的位置 ​

defer 和 async 的区别 ​

基本语法 ​

语句 ​

注释 ​

标识符 ​

保留字 ​

大小写敏感 ​

输出方法 ​

console.log() ​

alert() ​

confirm() ​

prompt() ​

document.write() ​

代码规范 ​

小结 ​

入门

引入 JavaScript

1. 内联脚本

2. 外部脚本文件

3. 行内脚本（不推荐）

script 标签的位置

defer 和 async 的区别

基本语法

语句

注释

标识符

保留字

大小写敏感

输出方法

console.log()

alert()

confirm()

prompt()

document.write()

代码规范

小结