JavaScript——从语法基础到综合项目构建-CSDN博客

一、JavaScript知识体系全景

1. 核心语法基础

// 变量声明与作用域
let count = 0;            // 块级作用域
const PI = 3.1415;        // 常量

// 数据类型与转换
typeof "Hello"           // "string"
Number("123")            // 123
Boolean("")              // false

// 流程控制
const score = 85;
if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {
  console.log("合格");
} else {
  console.log("不合格");
}

2. 函数与对象系统

// 函数定义与调用
function calculateArea(radius) {
  return Math.PI * radius ** 2;
}

// 对象与原型
const user = {
  name: "Alice",
  greet() {
    return `Hello, ${this.name}!`;
  }
};

// 内置对象
const now = new Date();
const regex = /[A-Z]/g;  // 正则表达式

二、BOM编程：浏览器交互核心

1. Window对象操作

// 弹窗控制
window.open("popup.html", "_blank", "width=400,height=300");

// 定时任务
let timer = setInterval(() => {
  console.log("每秒执行");
}, 1000);

// 清除定时器
clearInterval(timer);

2. 页面导航与历史记录

<!-- 页面跳转 -->
<button onclick="location.href='home.html'">返回首页</button>

<!-- 历史操作 -->
<a href="javascript:history.back()">上一页</a>
运行 HTML

三、DOM编程：动态页面构建

1. 元素访问与操作

// 获取元素
const header = document.getElementById("header");
const inputs = document.getElementsByTagName("input");

// 动态样式修改
header.style.color = "#4a90e2";
header.classList.add("active");

// 节点管理
const newDiv = document.createElement("div");
document.body.appendChild(newDiv);

2. 实战：树形菜单实现

<ul class="menu">
  <li onclick="toggleSubmenu('sub1')">前端技术
    <ul id="sub1" class="submenu">
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>
运行 HTML

function toggleSubmenu(id) {
  const submenu = document.getElementById(id);
  submenu.style.display = submenu.style.display === "block" ? "none" : "block";
}

四、表单验证与用户体验

1. 正则表达式验证

// 邮箱验证
function validateEmail(email) {
  return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
}

// 密码强度检测
const password = "Passw0rd!";
let strength = 0;
if (/[A-Z]/.test(password)) strength++;
if (/[0-9]/.test(password)) strength++;

2. 实时反馈优化

input.addEventListener("input", (e) => {
  const errorDiv = e.target.nextElementSibling;
  errorDiv.textContent = validateInput(e.target.value);
});

五、综合实战：购物车系统开发

1. 自动金额计算

function updateTotal() {
  const rows = document.querySelectorAll("#cart tr");
  let total = 0;
  
  rows.forEach(row => {
    const price = parseFloat(row.querySelector(".price").textContent);
    const quantity = parseInt(row.querySelector(".quantity input").value);
    total += price * quantity;
  });
  
  document.getElementById("total").textContent = total.toFixed(2);
}

2. 全选功能实现

document.getElementById("selectAll").addEventListener("change", (e) => {
  const checkboxes = document.querySelectorAll(".item-checkbox");
  checkboxes.forEach(checkbox => checkbox.checked = e.target.checked);
});

3. 动态删除商品

function deleteItem(button) {
  const row = button.closest("tr");
  row.parentNode.removeChild(row);
  updateTotal();
}

六、性能优化与最佳实践

DOM操作优化：

// 使用文档片段批量插入
const fragment = document.createDocumentFragment();
for (let i=0; i<100; i++) {
  const div = document.createElement("div");
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

事件委托：

document.querySelector(".menu").addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    toggleSubmenu(e.target.dataset.submenu);
  }
});

模块化开发：

// 使用ES6模块
import Cart from "./cart.js";
const myCart = new Cart();

七、常见问题解答

Q1：如何实现页面加载弹窗？

window.onload = () => {
  window.open("ad.html", "", "width=500,height=300");
};

Q2：动态修改CSS样式的三种方式？

直接修改style属性
切换class类名
使用CSSStyleSheetAPI

Q3：如何检测浏览器兼容性？

// 检测fetch API支持
if (window.fetch) {
  // 使用现代API
} else {
  // 降级方案
}

延伸学习方向

前端框架：React/Vue中的状态管理
服务端开发：Node.js与Express框架
数据可视化：D3.js与Canvas
性能监控：Lighthouse与Chrome DevTools

资源推荐

MDN JavaScript文档

《JavaScript高级程序设计》

freeCodeCamp实战项目库