JavaScript入门①｜三行代码写出第一个交互网页，新手必看！
·
author: 专注前端开发，分享JavaScript干货
title: JavaScript入门①｜三行代码写出第一个交互网页，新手必看！
update: 2026-04-28
tags: JavaScript,前端入门,网页交互,HelloWorld,浏览器
作者：专注前端开发，分享JavaScript干货
更新时间：2026年4月
适合人群：零基础，想学JavaScript的同学
前言：JavaScript能做什么？
打开淘宝看到轮播图在自动切换、点击按钮弹出提示、页面无刷新加载新内容——这些都是JavaScript在背后默默工作。
JavaScript是网页的"大脑"，负责所有交互逻辑。
学会它，你可以：
- 🎨 控制网页内容和样式
- 🎯 响应用户点击、输入等操作
- 🌐 发送网络请求获取数据
- 🎮 开发小游戏、Todo应用、数据看板
门槛极低，一台电脑、一个浏览器就能开始。
一、环境准备：3秒钟完成
完全不需要安装任何东西！用浏览器自带的开发者工具就能写JS。
以Chrome为例：
- 按
F12（或右键 → 检查）打开开发者工具 - 点击顶部
Console（控制台）标签 - 直接输入代码，按回车执行
💡 小提示：按
↑键可以调出上一条历史命令。
二、第一行代码：Hello World
在控制台输入：
console.log("Hello World!");
按回车，屏幕上立刻输出：
Hello World!
恭喜！你已经写出了第一行JavaScript代码。
console.log() 是JavaScript里最常用的"打印"命令，用来向控制台输出信息。
三、三种弹出方式
// 1. 弹出一个提示框
alert("欢迎来到JavaScript的世界！");
// 2. 控制台打印（不阻塞页面）
console.log("控制台消息");
// 3. 弹出一个带输入框的对话框
var name = prompt("你叫什么名字？");
console.log("你好，" + name + "！");
⚠️
alert()会阻塞页面，用户点确定之前无法操作页面，生产环境慎用。
四、在HTML中运行JavaScript
在本地新建一个文件，命名为 index.html，写入以下内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个JS网页</title>
</head>
<body>
<h1 id="title">Hello World!</h1>
<button onclick="changeTitle()">点我换标题</button>
<script>
// 定义一个函数
function changeTitle() {
// 获取页面上的h1元素
var h1 = document.getElementById("title");
// 修改它的文字内容
h1.innerText = "JavaScript太神奇了！";
}
</script>
</body>
</html>
用浏览器打开这个HTML文件，点击按钮，Hello World! 就变成了 JavaScript太神奇了！
这就是JavaScript的核心能力：操作网页内容。
五、知识卡
| 概念 | 说明 |
|---|---|
console.log() |
向控制台打印信息 |
alert() |
弹出警告框（阻塞） |
prompt() |
弹出输入框，返回用户输入 |
<script> |
HTML中嵌入JS代码的标签 |
document.getElementById() |
获取页面元素 |
.innerText |
读取/修改元素的文本内容 |
六、课后作业
- 在控制台打印你的名字和今天日期
- 新建HTML文件，实现：点击按钮修改文字颜色
- 尝试用
prompt()获取用户名并显示在页面上
进阶提示： 把 onclick 换成 onmouseover，试试鼠标悬停的效果。
有问题欢迎评论区留言，大家一起讨论！
标签：JavaScript | 前端入门 | 网页交互 | HelloWorld | 浏览器 | 新手教程
更多推荐
5
0- 0
已为社区贡献68条内容
所有评论(0)