一、JavaScript 基础

1.1 什么是 JavaScript？

JavaScript 是世界上最流行的编程语言之一，是一种运行在客户端的脚本语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持多种编程范式。JavaScript 主要用来给 HTML 增加动态功能，使网页具有交互性。

1.2 JavaScript 的特点

• 简单易用：可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序
• 解释型语言：逐行执行、无需编译为机器码
• 基于对象：内置大量现成对象，编写少量程序可以完成目标
• 事件驱动：通过事件响应用户操作
• 跨平台：几乎所有的现代浏览器都支持 JavaScript

1.3 JavaScript 的组成部分

JavaScript 由三部分组成：

• ECMAScript：JavaScript 的语法标准（变量、表达式、运算符、函数、if 语句、for 语句等）
• DOM（文档对象模型）：操作网页上的元素的 API（如让盒子移动、变色、轮播图等）
• BOM（浏览器对象模型）：操作浏览器部分功能的 API（如弹出框、控制浏览器跳转、获取分辨率等）

1.4 JavaScript 引入方式

内嵌式

<script type="text/javascript">
  alert('hello, world');
</script>

外链式

<script src="script.js"></script>

最佳实践：将 script 标签放在 </body> 前，避免阻塞页面渲染

注意：

• 外链式时，script 标签内的代码不会执行
• 一个 HTML 页面可以引入多个 JS 文件
• 引入外部文件时，src 属性是必须的

二、JavaScript 基础语法

2.1 变量与数据类型

变量声明

// 声明变量
var age;

// 声明变量并赋值
var age = 18;

// 同时声明多个变量
var age = 18, address = '火影村', salary = 15000;

变量命名规范：

• 由字母、数字、下划线(_)和美元符号($)组成
• 严格区分大小写
• 不能以数字开头
• 不能是关键字、保留字
• 遵循驼峰命名法（首字母小写，后续单词首字母大写）

基本数据类型：

类型	说明	默认值
Number	数字型，包含整型值和浮点型值	0
String	字符串类型	""
Boolean	布尔值类型（true/false）	false
Undefined	未定义的值	undefined
Null	空值	null

类型判断：

var num = 18;
console.log(typeof num); // "number"

var str = "hello";
console.log(typeof str); // "string"

var flag = true;
console.log(typeof flag); // "boolean"

var un;
console.log(typeof un); // "undefined"

var n = null;
console.log(typeof n); // "object" (特殊)

2.2 运算符

算术运算符

console.log(1 + 1); // 2
console.log(1 - 1); // 0
console.log(2 * 2); // 4
console.log(6 / 3); // 2
console.log(5 % 2); // 1 (取余)

递增递减运算符

var num = 1;
console.log(num++); // 1 (先返回值，再+1)
console.log(++num); // 3 (先+1，再返回值)

比较运算符

console.log(1 == '1'); // true (值相等)
console.log(1 === '1'); // false (值和类型都相等)
console.log(1 != '2'); // true
console.log(1 !== '1'); // true

逻辑运算符

// 逻辑与 (&&)
console.log(123 && 456); // 456
console.log(0 && 456); // 0

// 逻辑或 (||)
console.log(123 || 456); // 123
console.log(0 || 456); // 456

// 逻辑非 (!)
console.log(!true); // false
console.log(!!'hello'); // true (转换为布尔值)

赋值运算符

var num = 10;
num += 5; // 等同于 num = num + 5
num -= 3; // 等同于 num = num - 3
num *= 2; // 等同于 num = num * 2

2.3 流程控制语句

条件语句

// if 语句
var age = 18;
if (age >= 18) {
  console.log('成年人');
} else {
  console.log('未成年人');
}

// switch 语句
var day = 2;
switch (day) {
  case 1:
    console.log('星期一');
    break;
  case 2:
    console.log('星期二');
    break;
  default:
    console.log('其他');
}

循环语句

// for 循环
for (var i = 0; i < 5; i++) {
  console.log(i);
}

// while 循环
var i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

// do-while 循环
var i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

break 和 continue

// break 用于立即退出循环
for (var i = 0; i < 5; i++) {
  if (i === 3) break;
  console.log(i); // 0, 1, 2
}

// continue 用于跳过当前迭代
for (var i = 0; i < 5; i++) {
  if (i === 3) continue;
  console.log(i); // 0, 1, 2, 4
}

三、JavaScript 核心概念

3.1 函数

函数声明

// 声明函数
function sayHello() {
  console.log('Hello, world!');
}

// 调用函数
sayHello();

带参数的函数

// 带参数的函数声明
function eat(fruit, vegetable) {
  console.log('我爱吃' + fruit + '和' + vegetable);
}

// 带参数的函数调用
eat('苹果', '西红柿'); // 输出: 我爱吃苹果和西红柿

函数返回值

function sum(a, b) {
  return a + b;
}

var result = sum(10, 20);
console.log(result); // 30

函数表达式

// 函数表达式
var sayHi = function() {
  console.log('Hi!');
};

// 调用函数
sayHi();

arguments 对象

function sumAll() {
  var total = 0;
  for (var i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sumAll(1, 2, 3, 4)); // 10

3.2 作用域

全局作用域

• 在全局作用域下声明的变量叫做全局变量
• 全局变量在代码的任何位置都可以使用
• 浏览器关闭时才会被销毁

局部作用域

• 在局部作用域下声明的变量叫做局部变量
• 局部变量只能在该函数内部使用
• 函数执行结束后会被销毁

作用域链

• 内部函数可以访问外部函数的变量
• 采取就近原则查找变量的值

var num = 10; // 全局变量

function fn() {
  var num = 20; // 局部变量
  
  function fun() {
    console.log(num); // 20 (就近原则)
  }
  
  fun();
}

fn();

3.3 预解析

JavaScript 执行分为两步：预解析和代码执行。

变量预解析（变量提升）

• 变量的声明会被提升到当前作用域的最前面
• 变量的赋值不会提升

console.log(num); // undefined
var num = 10;

// 相当于执行了以下代码
var num; // 变量声明提升
console.log(num);
num = 10; // 变量赋值不提升

函数预解析（函数提升）

• 函数的声明会被提升到当前作用域的最前面
• 但不会调用函数

fn(); // 可以调用
function fn() {
  console.log('11');
}

注意： 函数表达式不会被提升

fn(); // 报错，fn is not a function
var fn = function() {
  console.log('11');
};

四、JavaScript 对象与数据结构

4.1 对象

创建对象

// 字面量方式
var person = {
  name: '张三',
  age: 18,
  sayHi: function() {
    console.log('大家好！');
  }
};

// 调用属性和方法
console.log(person.name); // '张三'
console.log(person['age']); // 18
person.sayHi(); // 大家好！

构造函数创建对象

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log('大家好，我是' + this.name);
  };
}

var p1 = new Person('李四', 20);
p1.sayHi(); // 大家好，我是李四

遍历对象属性

for (var key in person) {
  console.log(key + ': ' + person[key]);
}
// name: 张三
// age: 18
// sayHi: function() { ... }

4.2 数组

创建数组

// 字面量方式
var colors = ['red', 'green', 'blue'];

// 构造函数方式
var numbers = new Array(1, 2, 3);

数组常用方法

var arr = ['red', 'green', 'blue'];

// 获取数组长度
console.log(arr.length); // 3

// 通过索引访问元素
console.log(arr[0]); // 'red'

// 添加元素
arr.push('yellow'); // 末尾添加
arr.unshift('purple'); // 开头添加

// 删除元素
arr.pop(); // 删除末尾元素
arr.shift(); // 删除开头元素

// 截取数组
var newArr = arr.slice(1, 3); // 从索引1开始，到索引3(不包括)

// 遍历数组
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// forEach 遍历
arr.forEach(function(item, index) {
  console.log(index + ': ' + item);
});

4.3 字符串

字符串基本操作

var str = 'hello, world';

// 获取字符串长度
console.log(str.length); // 12

// 大小写转换
console.log(str.toUpperCase()); // 'HELLO, WORLD'
console.log(str.toLowerCase()); // 'hello, world'

// 去除空白
var spaceStr = '  hello  ';
console.log(spaceStr.trim()); // 'hello'

// 获取单个字符
console.log(str.charAt(1)); // 'e'
console.log(str[1]); // 'e'

// 截取字符串
console.log(str.slice(0, 5)); // 'hello'
console.log(str.substring(0, 5)); // 'hello'
console.log(str.substr(0, 5)); // 'hello'

// 查找字符串
console.log(str.indexOf('world')); // 7
console.log(str.includes('world')); // true

// 替换字符串
console.log(str.replace('world', 'JavaScript')); // 'hello, JavaScript'

// 字符串拼接
console.log('Hello' + ' ' + 'World'); // 'Hello World'
console.log('I am ' + 18 + ' years old'); // 'I am 18 years old'

4.4 日期

创建日期对象

// 当前时间
var now = new Date();

// 指定时间
var date1 = new Date("2023/02/14 09:00:00");
var date2 = new Date(2023, 1, 14); // 注意：月份从0开始，1表示2月

获取日期信息

var date = new Date();

console.log(date.getFullYear()); // 年份
console.log(date.getMonth() + 1); // 月份（注意+1）
console.log(date.getDate()); // 日期
console.log(date.getDay()); // 星期（0-6，0表示周日）
console.log(date.getHours()); // 小时
console.log(date.getMinutes()); // 分钟
console.log(date.getSeconds()); // 秒

五、JavaScript 与浏览器交互

5.1 DOM 操作

获取元素

// 通过ID获取
var header = document.getElementById('header');

// 通过类名获取
var items = document.getElementsByClassName('item');

// 通过标签名获取
var divs = document.getElementsByTagName('div');

// 通过选择器获取（推荐）
var firstItem = document.querySelector('.item');
var allItems = document.querySelectorAll('.item');

修改元素内容

var element = document.getElementById('content');

// 修改文本内容
element.textContent = '新的文本内容';

// 修改HTML内容
element.innerHTML = '<strong>新的HTML内容</strong>';

修改元素样式

var box = document.getElementById('box');

// 修改单个样式
box.style.color = 'red';
box.style.fontSize = '16px';

// 修改多个样式（推荐使用类）
box.className = 'active highlight';

事件处理

var button = document.getElementById('myButton');

// 添加点击事件
button.addEventListener('click', function() {
  console.log('按钮被点击了');
});

// 阻止默认行为
var link = document.getElementById('myLink');
link.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止链接跳转
  console.log('链接被点击，但没有跳转');
});

5.2 BOM 操作

窗口操作

// 弹出警告框
alert('这是一个警告');

// 确认框
var isConfirmed = confirm('确定要删除吗？');
if (isConfirmed) {
  console.log('用户点击了确定');
}

// 输入框
var name = prompt('请输入您的名字', '张三');
console.log('用户输入的名字：', name);

// 页面跳转
location.href = 'https://example.com';

// 刷新页面
location.reload();

// 延迟执行
setTimeout(function() {
  console.log('2秒后执行');
}, 2000);

// 定时执行
var intervalId = setInterval(function() {
  console.log('每1秒执行一次');
}, 1000);

// 停止定时器
clearInterval(intervalId);

浏览器信息

// 获取浏览器信息
console.log(navigator.userAgent);

// 获取屏幕尺寸
console.log(screen.width);
console.log(screen.height);

// 获取当前URL
console.log(location.href);

六、调试与最佳实践

6.1 调试技巧

控制台输出

console.log('普通日志');
console.info('信息日志');
console.warn('警告日志');
console.error('错误日志');

// 格式化输出
console.log('姓名：%s, 年龄：%d', '张三', 18);

// 分组输出
console.group('用户信息');
console.log('姓名：张三');
console.log('年龄：18');
console.groupEnd();

断点调试

1. 浏览器中按 F12 打开开发者工具
2. 选择 Sources 标签
3. 找到需要调试的文件
4. 在程序的某一行点击设置断点
5. 刷新页面，程序会在断点处暂停
6. 使用 Watch 监视变量值
7. 使用 F11 单步执行代码

6.2 常见错误与解决

类型转换问题

// 错误：字符串拼接
console.log('10' + 5); // '105' (不是15)

// 解决：转换为数字
console.log(Number('10') + 5); // 15
console.log(parseInt('10') + 5); // 15
console.log(parseFloat('10.5') + 5); // 15.5

作用域问题

// 错误：变量提升导致的问题
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出5次5
  }, 100);
}

// 解决：使用let
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出0,1,2,3,4
  }, 100);
}

6.3 代码规范

• 使用 let 和 const 代替 var（ES6+）
• 函数命名使用驼峰式（首字母小写）
• 变量命名有意义
• 保持一致的缩进（推荐2或4个空格）
• 为代码添加必要的注释
• 避免全局变量污染

// 推荐
function calculateTotal(items) {
  let total = 0;
  
  for (let i = 0; i < items.length; i++) {
    total += items[i].price * items[i].quantity;
  }
  
  return total;
}

// 不推荐
function calc(t) {
  var s = 0;
  for (var i = 0; i < t.length; i++) {
    s += t[i].p * t[i].q;
  }
  return s;
}