JavaScript学习之旅

JavaScript

JS用法

• HTML 中的 Javascript 脚本代码必须位于 标签之间。
• Javascript 脚本代码可被放置在 HTML 页面的 和 部分中。

JS输出

• 如果想从JavaScript访问某个元素，可以使用document.getElementById(id)方法。并且要使用id属性来标识html元素，使用innerHTML来获取或插入元素内容。

JS变量

var声明变量的特点：

• 变量可以重复声明（覆盖原变量）
• 变量未赋值时，默认值为undefined
• var声明的变量会提升（Hoisting），但不会初始化
• 一条语句中声明的多个变量不可以同时赋同一个值

JS数据类型

**值类型(基本类型)**：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

JS变量提升

声明提升：函数声明和变量声明总是会被解释器悄悄地被提升到方法体的最顶部。

DOM

在JavaScript中，DOM和BOM是两个核心概念，它们构成了前端开发的基石。虽然经常一起出现，但它们的职责、对象结构和应用场景完全不同。

• DOM管页面内容（HTML/CSS）。它是W3C标准，跨浏览器通用。
• BOM管浏览器窗口（地址栏、历史记录、屏幕尺寸等）。它没有统一标准，依赖浏览器厂商实现（但主流浏览器高度一致）。

常用API示例：

// 1. 获取元素
const box = document.getElementById('box');
const items = document.querySelectorAll('.item');

// 2. 修改内容
box.innerHTML = '<h1>Hello DOM</h1>';
box.textContent = '纯文本内容';

// 3. 修改样式
box.style.color = 'red';
box.classList.add('active');

// 4. 创建并添加节点
const newLi = document.createElement('li');
newLi.textContent = '新列表项';
document.querySelector('ul').appendChild(newLi);

// 5. 事件监听
box.addEventListener('click', () => {
  console.log('盒子被点击了');
});

注意：DOM操作通常比较消耗性能（会触发重排Reflow和重绘Repaint），在现代开发中（如React/Vue），我们通常通过“数据驱动”来间接操作DOM，而不是直接频繁操作。

常用代码示例：

// 1. 窗口操作
window.alert('你好！');
window.resizeTo(800, 600); // 调整窗口大小
console.log(window.innerWidth); // 获取视口宽度

// 2. 地址栏操作 (Location)
console.log(location.href); // 获取完整 URL
location.href = 'https://www.google.com'; // 跳转页面
location.reload(); // 刷新页面
location.search; // 获取 ?id=123 部分

// 3. 历史记录 (History) - 单页应用(SPA)路由的基础
history.back(); // 后退
history.pushState({page: 2}, '', '/page2'); // 压入新历史，不刷新页面

// 4. 定时器 (属于 window)
const timer = setTimeout(() => {
  console.log('3秒后执行');
}, 3000);

// 5. 省略 window (习惯写法)
// 以下两行等价，通常省略 window
alert('Hi'); 
window.alert('Hi');

document.querySelector('div');
window.document.querySelector('div');