JavaScript 教程（2026 超详版）

JavaScript 是什么？

JavaScript，就是我们通常所说的 “JS” 。这是一种嵌入到 HTML 页面中的编程语言，由浏览器一边解释一边执行。

JavaScript

我们都知道，前端最核心的 3 个技术是 HTML、CSS 和 JavaScript。其中 3 者之间的区别如下。

HTML：用于控制网页的结构。
CSS：用于控制网页的外观。
JavaScript：用于控制网页的行为。

单纯只有 HTML 和 CSS 的页面一般只供用户浏览，而 JavaScript 的出现，使得用户可以与页面进行交互（如定义各种鼠标效果），让网页实现更多绚丽的效果。

就拿咱们的绿叶网来说，下拉菜单、搜索功能、切换皮肤等地方都用到了 JavaScript。HTML 和 CSS 只是描述性的语言，单纯使用这两个没办法做出那些特效，而必须使用编程的方式来实现，也就是使用 JavaScript。

JavaScript 与 Java 的关系

很多初学的小伙伴看到 JavaScript 和 Java，自然而然就会问这两个究竟有什么关系。其实，它们也是有一毛钱关系的，并不能说完全没有关系。

JavaScript 最初的确是受 Java 启发而开始设计的，而且设计的目的之一就是 “看上去像 Java”，因此语法上有不少类似之处，JavaScript 很多名称和命名规则也借自 Java。但是实际上，JavaScript 主要设计原则源自 Self 和 Scheme。
JavaScript 和 Java 虽然名字相似，但是本质上是不同的：JavaScript 往往都是在网页中使用，而 Java 却可以在软件、网页、手机 App 等各个领域中使用。

JavaScript 能干什么？

我们今天使用的几乎所有的计算设备都使用了 JavaScript，包括 iPhone、Android、Windows、Mac OS、Linux 和智能电视等。JavaScript 主要应用于以下方面。

前端开发。
后端开发（Node.js）。
移动开发（如 React Native）。
游戏开发（页游）。
数据可视化（如 Echarts）。

JavaScript 的应用场景

JavaScript 有什么特点？

JavaScript 是世界上最流行的脚本语言，它广泛用于构建网站和 Web 应用程序，并具有以下的特点。

全栈开发：既可以用于前端开发，也可以用于后端开发。
简单易用：不需要环境设置，代码不需要编译即可执行。
面向对象：支持面向对象编程（OOP），具有类、对象、继承等常见的面向对象特性。
跨平台：可以在不同平台完美运行。
安全性：它不允许访问客户端的文件，也不允许操作服务器数据。

JavaScript 的特点

JavaScript 示例

下面我们来看一个简单的例子，让小伙伴们感性认识 JavaScript 是怎样的一个东西。

示例：一个简单的 JavaScript 例子

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button id="btn">欢迎</button>

    <script>
        // 获取元素
        const oBtn = document.getElementById("btn");
        
        // 绑定点击事件
        oBtn.addEventListener("click", function() {
            alert("欢迎来到绿叶网！");
        });
    </script>
</body>
</html>

页面效果如下图 1 所示。当我们点击【欢迎】按钮后，会弹出一个对话框，如下图 2 所示。

JavaScript 示例效果1

JavaScript 示例效果2

JavaScript 参考手册

除了 JavaScript 教程之外，我们还为小伙伴提供 JavaScript 超详细的参考手册，包括：