JavaScript初识：给小白的第一堂编程课

如果你点开了这篇文章，说明你对"JavaScript"这个名字感到好奇，但又不知道它到底是什么。别担心，我当初也一样！今天，就用大白话，像聊天一样，把JavaScript（简称JS）彻底搞明白。

一、JavaScript是什么？------ 网站的"魔法师"

想象一下你正在浏览一个网页：

你点击一个按钮，弹出了一个漂亮的登录框。
你在淘宝搜索商品，输入几个字，下面会自动出现相关的搜索建议。
你在看视频，可以点击播放、暂停，或者拖动进度条。

那么问题来了：这些"动起来"、"会变化"的效果是谁做的呢？

答案就是：JavaScript。

可以做一个简单的比喻：

HTML 是网站的骨架和结构。它决定了网页上有什么内容，比如标题、段落、图片、按钮。就像毛坯房的承重墙和格局。
CSS 是网站的衣服和妆容。它负责让网页变漂亮，比如颜色、字体、大小、布局。就像给毛坯房刷漆、铺地板、买家具。
JavaScript 是网站的魔法师和大脑。它负责让网页"活"起来，拥有行为和功能。就像给房子通上电，让你可以开关灯、看电视、用洗衣机。

所以，JavaScript是一门编程语言（是一种脚本语言），被广泛应用于web应用开发，常用来为网页添加动态功能，为用户提供更流程美观的浏览效果。通常，将JavaScript脚本嵌入在HTML中来实现自身的功能；它的主要工作就是在浏览器里让网页和你互动起来。现在，它已经变得无比强大，甚至可以用来开发手机App、桌面应用和游戏，但它的老本行和核心，依然是网页开发。

二、JavaScript能做什么？------ 超能力展示

光说可能有点抽象，来看看JS的具体超能力：

改变页面内容：动态地修改HTML文本、图片或样式。比如，点一下按钮，就把"你好"变成"你好世界！"。
响应用户操作：监听你的点击、鼠标移动、键盘输入等。你每做一个动作，JS都可以做出反应。
验证表单：在你提交注册信息前，JS会先检查你的邮箱格式对不对、密码是不是太简单，不对就立刻提醒你，而不用等到服务器返回错误。
发送网络请求：偷偷地在后台和服务器交换数据。比如，你刷微博时，不断下滑，JS就在不停地帮你加载新的内容，页面却不用刷新。
动画效果：让元素移动、淡入淡出、旋转，做出各种酷炫的动画。

三、第一个JavaScript程序："Hello, World!"

理论说再多，不如亲手试一试。让我们写一个最简单的JS程序。

你需要准备什么？

什么都不用安装！只需要一个浏览器 （比如Chrome、Edge）和一个文本编辑器（电脑自带的记事本、VSCode、Notepad++都行）。

步骤如下：

新建一个文件：打开你的文本编辑器，创建一个新文件。

输入代码：把下面的代码复制进去。

html 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的第一个JS程序</title>
</head>
<body>
    <h1>欢迎来到JavaScript的世界！</h1>
    <!-- 这是一个按钮，onclick是点击时执行的JS代码 -->
    <button onclick="sayHello()">点我试试！</button>

    <!-- 在HTML中引入JavaScript代码 -->
    <script>
        // 这里是JavaScript代码！
        // 我们定义了一个叫 sayHello 的函数
        function sayHello() {
            // 弹出一个对话框，显示"Hello, World!"
            alert('Hello, World!');
        }
    </script>
</body>
</html>

保存文件 ：把文件保存到你的电脑上，名字叫 hello.html（注意后缀是 .html）。
运行：找到这个文件，用浏览器双击打开它。
见证奇迹 ：你会看到一个网页和一个按钮。大胆地点击那个按钮！ 你就会看到一个弹出框写着"Hello, World!"。

恭喜你！你刚刚运行了人生中第一段JavaScript代码！你命令浏览器，在你点击时，执行了一个弹出警告框的操作。