Web前后端开发-JavaScript 入门教程

在前两篇教程中，我们学习了用 HTML 定义页面结构、用 CSS 控制页面样式，做出了排版美观的静态网页。但静态页面只能展示内容，无法响应用户操作、实现动态效果。想要让页面「动起来」、拥有交互能力，就需要前端三剑客的第三位 ------JavaScript。本文从基础概念讲起，详细讲解 JavaScript 的定义、与 Java 的核心区别、三种代码引入方式以及标签位置的最佳实践，每个知识点都配套可直接运行的演示代码。

一、JavaScript 概述

1. 什么是 JavaScript

JavaScript（简称 JS）是一种轻量级、解释型的脚本编程语言，是 Web 前端开发的核心语言之一，主要用于实现网页的交互逻辑和动态效果。

核心特点

解释型语言：不需要提前编译，由浏览器的 JS 引擎逐行解析执行，写完刷新页面就能看到效果
弱类型语言：变量不需要声明固定的数据类型，同一个变量可以赋值不同类型的值
事件驱动：可以响应用户的点击、鼠标移动、键盘输入、表单提交等操作，触发对应逻辑
跨平台：只要有浏览器的环境就能运行，不受操作系统限制
基于原型的面向对象：和传统类式面向对象不同，通过原型链实现继承和扩展，语法更灵活

JavaScript 的三大组成部分

ECMAScript（ES）：JavaScript 的语法核心，规定了变量、数据类型、运算符、函数、对象等基础语法规范，由 ECMA 国际组织制定标准
DOM（文档对象模型）：提供操作网页元素的 API，可以获取、修改、删除、添加 HTML 标签和内容
BOM（浏览器对象模型）：提供操作浏览器窗口的 API，比如弹窗、跳转页面、获取地址栏、操作浏览历史

JavaScript 能做什么

网页动态效果：轮播图、下拉菜单、选项卡、过渡动画
用户交互：按钮点击反馈、表单验证、鼠标悬停效果
数据交互：通过 Ajax 和后端服务器通信，实现页面局部刷新
后端开发：基于 Node.js 运行环境，可以开发服务端程序
移动端开发：小程序、React Native、UniApp 等跨端应用开发
游戏开发：结合 Canvas 实现网页小游戏

2. JavaScript 与 Java 的区别

很多初学者会误以为 JavaScript 是 Java 的脚本版本，其实两者除了名字里都有「Java」，几乎是完全不同的两门语言，核心区别如下：

对比维度	Java	JavaScript
诞生与归属	由 Sun 公司（现 Oracle）开发，强面向对象语言	由 Netscape 公司开发，最初叫 LiveScript，后改名 JavaScript，语法由 ECMA 组织标准化
语言类型	编译型强类型静态语言，必须先编译成字节码再运行	解释型弱类型动态语言，由引擎逐行解析执行
运行环境	需要 Java 虚拟机（JVM）才能运行，跨平台依赖 JVM	运行在浏览器的 JS 引擎中，也可通过 Node.js 在服务端运行
类型系统	强类型，变量必须声明数据类型，编译时就检查类型	弱类型，变量无需声明类型，运行时自动做类型转换
面向对象	基于类的面向对象，严格的封装、继承、多态	基于原型的面向对象，同时支持函数式编程风格
主要用途	后端服务开发、安卓 APP、桌面软件、大数据	前端网页交互、Node.js 后端、小程序、跨端应用
入门门槛	语法严谨结构复杂，入门门槛稍高	语法灵活上手快，写完立刻能看到效果

简单总结：Java 和 JavaScript 的关系，就像雷锋和雷峰塔的关系 ------ 名字相似，实则毫无关系，是两门完全独立的编程语言，应用场景和技术体系也差异巨大。

二、JavaScript 的使用

想要在网页中运行 JavaScript 代码，有三种引入方式，分别适用于不同场景，思路和 CSS 的三种引入方式非常相似。

1. 网页中插入 JavaScript 的方法

a. 内嵌方式（行内式）

直接把 JS 代码写在 HTML 标签的事件属性 中，比如点击事件onclick、鼠标移入事件onmouseover等，只对当前这一个标签生效。

语法

复制代码

<标签 事件名="JavaScript代码">

演示代码

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内嵌方式演示</title>
</head>
<body>
    <!-- 点击按钮弹出提示框 -->
    <button οnclick="alert('点击了按钮！')">点我弹出提示</button>

    <!-- 鼠标移入改变文字颜色，移出恢复 -->
    <p οnmοuseοver="this.style.color='red'" οnmοuseοut="this.style.color='black'">
        鼠标移到我上面，文字会变红
    </p>
</body>
</html>

特点说明

优点：写法直接，针对单个元素绑定事件，适合快速测试
缺点：结构（HTML）和行为（JS）高度耦合，代码无法复用，维护成本高
适用场景：临时测试、单个元素简单交互，正式项目不推荐大量使用

b. 内部方式（页面内嵌脚本）

将 JS 代码写在页面的 <script> 标签内部，代码只对当前 HTML 页面生效。

语法

复制代码

<script>
    // JavaScript代码写在这里
    alert("页面加载时执行");
</script>

演示代码

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内部方式演示</title>
    <script>
        // 页面解析到script标签就会执行
        console.log("这是控制台输出的内容，按F12打开开发者工具查看");
        
        // 定义一个可复用的函数
        function showMsg() {
            alert("内部脚本定义的函数被调用了");
        }
    </script>
</head>
<body>
    <button οnclick="showMsg()">点击调用函数</button>
</body>
</html>

特点说明

优点：结构和行为初步分离，页面内可以复用函数，适合单页面小功能
缺点：只能在当前页面使用，多页面无法复用代码
适用场景：单页面演示、教学案例、小型页面功能

c. 外部引入（外链式）

将 JavaScript 代码单独写在后缀为 .js 的文件中，在 HTML 页面通过 <script> 标签的 src 属性引入，是正式项目的标准写法。

语法

新建 demo.js 文件，直接写入 JS 代码（不需要写 script 标签）：

复制代码

// demo.js 外部文件
console.log("外部JS文件加载成功");

function outerHello() {
    alert("你好，这是外部脚本的方法");
}

HTML 页面通过 src 引入：

复制代码

<script src="demo.js"></script>

完整演示代码

第一步：在同级目录创建 demo.js 文件

复制代码

// demo.js
function outerFunc() {
    alert("这是外部JS文件里的函数");
}

console.log("外部脚本加载完成");

第二步：HTML 页面引入

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部引入演示</title>
</head>
<body>
    <button οnclick="outerFunc()">点击调用外部函数</button>

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

特点说明

优点：结构与行为完全分离，多页面可以复用同一个 JS 文件，便于统一维护和版本管理
缺点：需要额外发起网络请求加载 JS 文件
适用场景：正式项目、多页面网站、中大型前端工程

注意：使用src外部引入的 <script> 标签内部，不要再写 JS 代码，写了也不会执行。

2. script 标签的位置

位置 1：放在 `<head>` 标签内

JS 代码会在页面 DOM 渲染之前加载执行。

复制代码

<head>
    <script src="demo.js"></script>
</head>

存在的问题

如果 JS 代码体积大、加载慢，会阻塞页面渲染，用户长时间看到空白页面
如果 JS 代码里操作 DOM 元素（比如获取按钮、修改文字），会执行失败，因为此时页面元素还没加载出来

错误示例演示

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>head里的script</title>
    <script>
        // 这里获取不到按钮，因为DOM还没渲染
        var btn = document.getElementById("btn");
        console.log(btn); // 输出 null，获取失败
    </script>
</head>
<body>
    <button id="btn">按钮</button>
</body>
</html>

位置 2：放在 `</body>` 结束标签之前（推荐）

页面所有 DOM 元素渲染完成后，再执行 JS 代码，是前端开发的标准最佳实践。

复制代码

<body>
    <!-- 页面所有内容 -->
    
    <!-- 放在body最后 -->
    <script src="demo.js"></script>
</body>

优势

页面先渲染显示内容，用户不会看到空白页，体验更好
JS 执行时 DOM 已经全部加载完成，可以正常获取和操作页面元素
不会阻塞页面内容的展示

正确示例演示

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>body底部的script</title>
</head>
<body>
    <button id="btn">按钮</button>

    <!-- 放在body最后，能正常获取元素 -->
    <script>
        var btn = document.getElementById("btn");
        console.log(btn); // 成功获取到按钮元素
        btn.onclick = function() {
            alert("点击成功");
        }
    </script>
</body>
</html>

补充：异步加载属性

如果业务需要必须把 script 放在 head 里，可以通过两个属性改变加载行为：

defer：延迟执行，JS 文件异步下载，等页面 DOM 加载完成后再执行，多个带 defer 的脚本会按顺序执行
async：异步执行，JS 文件异步下载，下载完立刻执行，不保证执行顺序

复制代码

<!-- 延迟执行，页面加载完再执行 -->
<script src="demo.js" defer></script>

<!-- 异步下载，下载完立即执行 -->
<script src="demo.js" async></script>

总结

本文讲解了 JavaScript 入门的基础概念和使用方式：

JavaScript 是解释型弱类型脚本语言，由 ECMAScript、DOM、BOM 三部分组成，负责网页的交互和动态效果
JavaScript 和 Java 是两门完全不同的语言，仅名字相似，技术体系和应用场景差异巨大
代码有三种引入方式：内嵌方式适合临时测试，内部方式适合单页面开发，外部引入是正式项目的标准写法
script 标签推荐放在</body>结束之前，确保 DOM 加载完成再执行 JS，避免获取元素失败和页面阻塞

Web前后端开发-JavaScript 入门教程

一、JavaScript 概述

1. 什么是 JavaScript

核心特点

JavaScript 的三大组成部分

JavaScript 能做什么

2. JavaScript 与 Java 的区别

二、JavaScript 的使用

1. 网页中插入 JavaScript 的方法

a. 内嵌方式（行内式）

语法

演示代码

特点说明

b. 内部方式（页面内嵌脚本）

语法

演示代码

特点说明

c. 外部引入（外链式）

语法

完整演示代码

特点说明

2. script 标签的位置

位置 1：放在 <head> 标签内

存在的问题

错误示例演示

位置 2：放在 </body> 结束标签之前（推荐）

优势

正确示例演示

补充：异步加载属性

总结

位置 1：放在 `<head>` 标签内

位置 2：放在 `</body>` 结束标签之前（推荐）