当前位置：首页 > article >正文

JavaScript 入门指南：从零开始学前端开发

article 2025/2/12 12:38:55

前言

JavaScript 是前端开发的三大核心技术之一（另外两个是 HTML 和 CSS）。它可以让你创建动态、交互性强的网页。无论你是编程小白，还是有一定基础的学习者，这篇文章都会带你从零开始，轻松掌握 JavaScript 的基础知识和实战技巧！

1. 什么是 JavaScript？

JavaScript 是一种运行在浏览器中的编程语言，主要用于让网页“动”起来。比如：

点击按钮时弹出提示框。
检查用户输入的密码是否符合要求。
实现网页上的动画效果。

JavaScript 可以直接写在 HTML 文件中，也可以单独保存为 .js 文件。

2. JavaScript 的基础语法

（1）如何写 JavaScript 代码？

在 HTML 文件中，用 <script> 标签包裹 JavaScript 代码：

<script>
    alert("你好，JavaScript！"); // 弹出一个提示框
</script>

（2）变量

变量是用来存储数据的“容器”。比如：

javascript

let name = "小明"; // 存储一个名字
let age = 10;      // 存储年龄

let 是声明变量的关键字。
name 是变量名。
"小明" 是变量的值。

（3）输出内容

用 console.log() 将内容输出到浏览器的控制台（按 F12 打开）：

console.log("我的名字是：" + name);

（4）函数

函数是一段可以重复使用的代码。比如：

function sayHello() {
    alert("你好！");
}

function 是定义函数的关键字。
sayHello 是函数名。
调用函数时，写 sayHello();。

3. JavaScript 的实战小例子

（1）点击按钮弹出提示框

html

<button οnclick="sayHello()">点击我</button>
<script>
    function sayHello() {
        alert("你好！");
    }
</script>

onclick 是按钮的点击事件，点击按钮时会执行 sayHello() 函数。

（2）检查用户输入

html

<input type="text" id="nameInput" placeholder="请输入你的名字">
<button οnclick="checkName()">提交</button>
<script>
    function checkName() {
        let name = document.getElementById("nameInput").value; // 获取输入框的值
        if (name === "") {
            alert("名字不能为空！");
        } else {
            alert("你好，" + name + "！");
        }
    }
</script>

document.getElementById("nameInput") 获取输入框元素。
.value 获取输入框的值。
if 用于判断条件是否成立。

（3）改变网页内容

html

<p id="demo">这是一个段落。</p>
<button οnclick="changeText()">改变文字</button>
<script>
    function changeText() {
        document.getElementById("demo").innerHTML = "文字被改变了！";
    }
</script>