Js Base

JavaScript 基础快速入门

了解 JavaScript 基础知识，掌握如何在网页中使用 JS，实现简单交互。

🎯 引言

刚开始接触前端开发时，JavaScript 是必不可少的一门语言。它不仅让静态的 HTML 页面变得生动，还能与用户互动，增强网页功能。这篇文章会带你认识 JavaScript，理解它在网页中的地位和作用，教你如何使用浏览器控制台输出内容，并写出你的第一个 JS 程序“你好，世界”。如果你是前端初学者，或者对 JavaScript 感兴趣，这篇文章会是很好的入门指导。

🌟 什么是 JavaScript？

JavaScript，简称 JS，是一种广泛应用于网页开发的脚本语言。它最初诞生是为了给网页添加动态效果，让网页更具交互性。和 HTML、CSS 不同，JavaScript 是一门编程语言，可以控制网页中的元素，实现按钮点击响应、数据验证、动画效果等功能。

简单来说，HTML 负责网页结构，CSS 控制样式布局，而 JavaScript 则让网页“动”起来。它可以操纵网页元素，处理用户事件，甚至实现复杂的逻辑和数据交互。

🧩 JS 和 HTML、CSS 的关系

在前端三剑客中：

HTML（HyperText Markup Language）负责网页的内容和结构，比如段落、标题、图片等元素。
CSS（Cascading Style Sheets）用于美化网页，通过设置颜色、字体、布局等让页面更美观。
JavaScript 则赋予网页行为，添加交互逻辑，比如点击按钮弹窗、动态加载数据等。

可以把网页想象成一辆车：

HTML 是车架，决定车的形状和结构；
CSS 是车身的油漆和装饰，决定车的外观；
JavaScript 是发动机，使车能够跑起来，实现各种动作。

三者缺一不可，协作完成现代网页的丰富体验。

💻 网页运行 JS 的方式

网页中可以通过几种方式运行 JavaScript 代码：

内联脚本：直接把 JS 代码写在 HTML 文件的 <script> 标签内。

<script>
    alert('Hello, JS!');
</script>

外部脚本文件：把 JS 代码写在独立的 .js 文件中，通过 <script src="app.js"></script> 引入。这种方式更便于维护和管理代码。
浏览器控制台：现代浏览器都内置了开发者工具，可以实时输入 JS 代码并执行，方便调试和测试。

当浏览器加载网页时，会解析 HTML 结构，遇到 <script> 标签时就会执行其中的 JavaScript 代码。

🖥️ 使用浏览器控制台输出 console.log

调试 JavaScript 代码最常用的工具就是浏览器的控制台（Console）。控制台可以输出信息，帮助我们了解程序运行状态。

打开浏览器控制台的方法（以 Chrome 为例）：

Windows / Linux：按 Ctrl + Shift + J
Mac：按 Cmd + Option + J

打开后在“Console”标签中，可以输入 JavaScript 代码并回车执行。

例如：

console.log('Hello, console!');

这行代码会在控制台输出字符串“Hello, console!”。console.log 是 JS 中最常用的调试方法，可以输出变量值、程序信息，方便排查问题。

✍️ 写一个“你好，世界”

“你好，世界”是程序员入门时最经典的示范程序。它简单直观，让我们确认环境配置正确，理解 JS 的基本写法。

把以下代码复制到一个 HTML 文件中，保存为 hello.html，然后用浏览器打开：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>你好，世界</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                padding: 20px;
            }
            #message {
                font-size: 24px;
                color: #333;
            }
        </style>
    </head>
    <body>
        <div id="message"></div>

        <script>
            // 将文本写入页面中的 message 元素
            var element = document.getElementById('message');
            element.innerHTML = '你好，世界！';
            console.log('页面已成功显示“你好，世界！”');
        </script>
    </body>
</html>

打开后，你会看到网页中显示“你好，世界！”，同时打开控制台，会输出一条信息，说明脚本运行成功。

🧾 小节总结

JavaScript 是用于网页交互的编程语言，让网页更灵活和动态。
它和 HTML、CSS 配合使用，分别负责网页结构、样式和行为。
JS 可以内嵌在 HTML 文件中，也可以写在独立文件中引入。
浏览器控制台是学习和调试 JS 代码的好帮手。
用 JS 操作网页元素，可以实现动态内容显示，比如写一个简单的“你好，世界”程序。

❓ 知识问答（Q&A）

Q：JavaScript 是什么？

A：JavaScript 是一门用来给网页添加交互和动态效果的脚本语言。

Q：JS 和 HTML、CSS 有什么区别？

A：HTML 负责网页结构，CSS 控制样式，而 JS 负责网页行为和逻辑。

Q：如何在浏览器控制台输出信息？

A：使用 console.log(内容)，内容会显示在浏览器的控制台面板。

🧪 小练习

练习 1：修改网页背景色

尝试使用 JavaScript 改变网页的背景颜色为浅蓝色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>背景色变换</title>
    </head>
    <body>
        <script>
            // 这里写代码改变背景色
            document.body.style.backgroundColor = '#a0c8f0';
        </script>
    </body>
</html>

练习 2：点击按钮显示提示

写一个按钮，点击后弹出“你点击了按钮！”的提示框。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>按钮提示</title>
    </head>
    <body>
        <button id="btn">点我</button>

        <script>
            var button = document.getElementById('btn');
            button.onclick = function () {
                alert('你点击了按钮！');
            };
        </script>
    </body>
</html>

🎉 恭喜你已经掌握 JavaScript 的基础知识，了解了它和 HTML、CSS 的关系，学会了使用浏览器控制台输出内容，以及写出你的第一个 JS 程序“你好，世界”。继续加油，前端之路越走越精彩！

接下来对你进行考核

所有考核题目都是由博主亲自编写，考核内容来源于本门课程。

搞懂变量与数据类型

详细讲解 JavaScript 中变量和数据类型的基础知识及使用方法。