JavaScript入门教程-拓冰网站定制

如果说 HTML 是骨架、CSS 是皮肤，那 JavaScript（简称 JS）就是网页的“肌肉和神经”——它让页面能对用户做出反应：点击按钮弹出提示、表单提交前校验、轮播图自动切换，背后都是 JS。本篇带你用最少的概念量把 JS 入门讲透。

一、JavaScript 是什么

JavaScript 是运行在浏览器里的一门脚本语言。它不需要编译，浏览器打开页面时会逐行解释执行。它能做的事很多：操作网页内容、响应用户事件、与服务器通信（Ajax / Fetch）、甚至做简单的数据计算。在 Node.js 出现后，JS 也能跑在服务器端，但前端 90% 的场景还是跑在浏览器里。

<script>
  console.log("你好，拓冰");
</script>

JS 代码通常放在 <script> 标签里，或者写到独立的 .js 文件再用 <script src="js/main.js"></script> 引入。独立文件便于复用与维护，是拓冰推荐的做法。

二、变量与数据类型

变量用来“存东西”。现代 JS 用 let 声明可变变量，用 const 声明不可重新赋值的常量，var 是老写法，新代码尽量别用。

// 数字
let price = 199;
// 字符串
const name = "拓冰网站定制";
// 布尔
let isOpen = true;
// 数组
let tags = ["HTML", "CSS", "JS"];
// 对象
const site = {
  title: "拓冰",
  year: 2026,
  online: true
};

console.log(site.title); // "拓冰"

JS 有 7 种原始类型（number、string、boolean、null、undefined、symbol、bigint）和引用类型（object）。其中 null 表示“故意为空”，undefined 表示“未定义”，新手常把它们搞混。

避坑提醒 永远不要用 == 比较值，它会发生隐式类型转换（"0" == 0 为 true）。请始终用 === 严格比较，能避免 90% 的诡异 bug。

三、函数

函数是把一段逻辑“打包”起来，需要时调用。现代 JS 推荐用“箭头函数”写法，更简洁。

// 普通函数
function calcTotal(price, count) {
  return price * count;
}

// 箭头函数
const greet = (name) => {
  return `你好，${name}`;
};

// 简写（单行可省略 return 与大括号）
const greetShort = name => `你好，${name}`;

console.log(calcTotal(199, 3));   // 597
console.log(greet("拓冰"));        // 你好，拓冰

模板字符串（反引号包裹）里的 ${} 可以直接插入变量，比老式的字符串拼接清晰得多。

四、DOM 操作

DOM（Document Object Model）是浏览器把 HTML 解析后生成的“对象树”。JS 通过 DOM API 就能读取或修改页面上的任何元素。

// 选取元素
const btn = document.querySelector("#submitBtn");
const title = document.querySelector(".page-title");

// 修改文本
title.textContent = "新标题";

// 修改样式
title.style.color = "#2D4A3E";

// 添加 / 移除类
btn.classList.add("loading");
btn.classList.remove("loading");

// 创建并插入新元素
const tip = document.createElement("p");
tip.textContent = "提交成功！";
document.body.appendChild(tip);

DOM 操作是 JS 在前端最日常的工作，拓冰在源码教学里会专门拆一章讲 DOM，详见《JavaScript DOM 操作教程》。

五、事件处理

“事件”是用户与页面交互时触发的信号：点击、输入、滚动、提交等。用 addEventListener 监听事件，是 JS 实现交互的核心。

const form = document.querySelector("#contactForm");

form.addEventListener("submit", function(e) {
  e.preventDefault(); // 阻止默认提交刷新
  const phone = document.querySelector("#phone").value;
  if (phone.length !== 11) {
    alert("请输入 11 位手机号");
    return;
  }
  // 校验通过，提交数据
  console.log("校验通过，准备提交");
});

拓冰提示 e.preventDefault() 能阻止表单默认的“整页刷新”行为，这是实现“无刷新提交”的第一步。后续配合 fetch() 就能做出现代化的异步表单。

掌握以上五块，你已经能写出可交互的表单校验、轮播、选项卡等常见效果。继续深入推荐看《JavaScript DOM 操作教程》，理解事件流与动画。

JavaScript 入门教程

JavaScript 入门教程：让网页真正动起来