第1课：初识JavaScript——让你的网页“动”起来！

最新推荐文章于 2025-05-12 17:30:24 发布

前端Hardy

最新推荐文章于 2025-05-12 17:30:24 发布

阅读量613

点赞数 18

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_52814911/article/details/147414702

版权

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

欢迎来到「JavaScript 魔法学院」第 1 课！今天我们将揭开 JavaScript（简称 JS）的神秘面纱，只需 3 分钟，你就能写出第一个脚本，让网页“活”起来！

一、什么是 JavaScript？

1. JavaScript 简介

JavaScript：1995 年由 Brendan Eich 用 10 天设计，现已成为全球使用最广的编程语言。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript：网页的“魔法师”，负责让静态页面动起来（比如弹窗、轮播图）。
JavaScript：直接运行在浏览器，无需安装环境、支持事件响应（点击、滑动等）、能与 HTML/CSS 无缝协作。

2. JavaScript 能做什么？

基础玩法：表单验证、动态修改页面内容
高阶操作：开发 Web 应用（如 Gmail）、游戏、甚至服务端（Node.js）

二、开发环境搭建：2 分钟搞定！

1. 浏览器控制台（零配置）

打开 Chrome 浏览器，按 F12 或右键选择检查
切换到 Console 标签，输入代码直接运行！

console.log("Hello，我是控制台！");

2. VS Code（推荐编辑器）

下载安装：官网下载 VS Code
新建文件：创建 index.html，输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello JS!</title>
</head>
<body>
    <script>
        alert("Hello JS!");
    </script>
</body>
</html>

运行：右键用浏览器打开文件，看到弹窗即成功！

三、JavaScript 输出

JavaScript 可以通过不同的方式来输出数据：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./hello.js"></script>
    <title>Hello JS!</title>
</head>

<body>
    <div id="content"></div>
    <script>
        // 使用 window.alert() 弹出警告框。
        alert("Hello JS!");
        // 使用 document.write() 方法将内容写到 HTML 文档中。
        document.write("<h1>我是JS-document.write创造的文字！</h1>");
        // 使用 innerHTML 写入到 HTML 元素。
        document.getElementById("content").innerHTML = "<h1 style='color: blue;'>我是JS-innerHTML创造的文字！</h1>";
        // 使用 console.log() 写入到浏览器的控制台。
        a = 1;
        b = 2;
        c = a + b;
        console.log('c:', c);
    </script>
</body>

</html>

使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

使用 console.log() 写入到浏览器的控制台。

四、第一个脚本：Hello World！

1. 代码实战

在 VS Code 中创建 hello.js 文件，写入：

console.log("第一个脚本：Hello World！");

将 hello.js 文件引入到 index.html 页面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./hello.js"></script>
    <title>Hello JS!</title>
</head>
<body>
    <script>
        alert("Hello JS!");
    </script>
</body>
</html>