欢迎使用个人开发的工具小程序 👇👇👇👇👇
什么是 JavaScript？
想象一下，你进入一个餐厅：
- HTML 就像是餐厅的桌椅、菜单和装修 - 决定了网页的结构
- CSS 就像是餐厅的灯光、色彩和布置 - 决定了网页的外观
- JavaScript 就像是餐厅的服务员 - 负责交互和动态功能
简单来说，JavaScript 是让网页"活起来"的编程语言！
开始前的准备
你只需要两样东西：
- 一个文本编辑器（记事本、VS Code 等）
- 一个网页浏览器（Chrome、Firefox 等）
JavaScript 基础语法
1. 变量 - 数据的容器
// 声明变量
let userName = "小明";
const age = 25;
var isOnline = true;
// 使用变量
console.log("你好，" + userName); // 输出：你好，小明
小贴士：
let：可以改变的值const：固定不变的值var：老式声明方式，现在少用
2. 数据类型 - 数据的种类
// 字符串 - 文本
let message = "Hello World!";
// 数字 - 数值
let score = 100;
let price = 99.9;
// 布尔值 - 真假
let isRaining = true;
let isSunny = false;
// 数组 - 数据列表
let fruits = ["苹果", "香蕉", "橙子"];
// 对象 - 键值对
let person = {
name: "李华",
age: 20,
city: "北京"
};
3. 运算符 - 进行计算
// 数学运算
let sum = 10 + 5; // 15
let product = 6 * 7; // 42
// 比较运算
let isEqual = (10 == 10); // true
let isGreater = (8 > 5); // true
// 逻辑运算
let canDrive = (age >= 18) && (hasLicense == true);
让代码做出决策
条件语句
let time = 14; // 下午2点
if (time < 12) {
console.log("早上好！");
} else if (time < 18) {
console.log("下午好！");
} else {
console.log("晚上好！");
}
循环语句
// for 循环 - 当你知道要循环多少次时使用
for (let i = 1; i <= 5; i++) {
console.log("这是第 " + i + " 次循环");
}
// while 循环 - 当不确定循环次数时使用
let count = 1;
while (count <= 3) {
console.log("计数: " + count);
count++;
}
函数 - 可重复使用的代码块
// 定义函数
function sayHello(name) {
return "你好，" + name + "！";
}
// 使用函数
let greeting = sayHello("小红");
console.log(greeting); // 输出：你好，小红！
// 另一个例子：计算面积
function calculateArea(width, height) {
return width * height;
}
let area = calculateArea(5, 3);
console.log("面积是: " + area); // 输出：面积是: 15
与网页交互 - DOM 操作
DOM（文档对象模型）就像是 JavaScript 与 HTML 之间的桥梁。
选择元素
// 通过 ID 选择
let title = document.getElementById("main-title");
// 通过类名选择
let buttons = document.getElementsByClassName("btn");
// 通过标签名选择
let paragraphs = document.getElementsByTagName("p");
修改内容
// 修改文本内容
title.textContent = "新的标题";
// 修改 HTML 内容
title.innerHTML = "<em>斜体标题</em>";
// 修改样式
title.style.color = "blue";
title.style.fontSize = "24px";
实际例子：点击按钮改变文本
HTML：
<h1 id="message">欢迎来到我的网站！</h1>
<button onclick="changeText()">点击我！</button>
JavaScript：
function changeText() {
let messageElement = document.getElementById("message");
messageElement.textContent = "文本已经被改变了！";
messageElement.style.color = "red";
}
事件处理 - 响应用户操作
// 方法1：HTML 中添加事件
// <button onclick="handleClick()">点击</button>
// 方法2：JavaScript 中添加事件
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("按钮被点击了！");
});
// 常见事件类型
element.addEventListener("click", function() {}); // 点击
element.addEventListener("mouseover", function() {}); // 鼠标悬停
element.addEventListener("keydown", function() {}); // 按键按下
完整示例：简易计数器
<!DOCTYPE html>
<html>
<head>
<title>简易计数器</title>
<style>
.counter {
text-align: center;
margin: 50px;
font-size: 24px;
}
button {
padding: 10px 20px;
font-size: 18px;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="counter">
<h1 id="count">0</h1>
<button onclick="increase()">增加</button>
<button onclick="decrease()">减少</button>
<button onclick="reset()">重置</button>
</div>
<script>
let count = 0;
function increase() {
count++;
updateDisplay();
}
function decrease() {
count--;
updateDisplay();
}
function reset() {
count = 0;
updateDisplay();
}
function updateDisplay() {
document.getElementById("count").textContent = count;
}
</script>
</body>
</html>
学习建议
- 多动手实践 - 编程就像学游泳，必须下水练习
- 从简单开始 - 先写小功能，再组合成复杂应用
- 善用开发者工具 - 按 F12 打开，在 Console 中测试代码
- 不要怕犯错 - 错误是最好的老师
- 查阅文档 - MDN Web Docs 是你的好朋友
下一步学习方向
掌握了基础后，你可以继续学习：
- ES6+ 新特性（箭头函数、模板字符串等）
- 异步编程（Promise、async/await）
- 操作数组和对象的现代方法
- 简单的动画效果
- 与后端交互（Fetch API）
记住，编程是一门手艺，需要时间和练习。每天进步一点点，很快你就能创造出令人惊叹的交互式网页！
开始你的 JavaScript 之旅吧，未来的开发者！ 🚀
