快速熟悉JavaScript

js和java没有任何关系，不要混淆二者
js是一种脚本语言，主要用于向HTML页面（网页）添加交互行为
js分为三部分 ECMAScript 、 BOM 、 DOM
- ECMAScript描述了一些内容
  - 语法
  - 变量和数据类型
  - 运算符
  - 逻辑控制语句
  - 关键字、保留字
  - 对象
- BOM 浏览器对象模型，提供了与浏览器窗口进行交互的对象
- DOM 文档对象模型，用来访问和操纵HTML文档
DOM是BOM的子对象
使用js有三种方式内部js 外部js 直接在HTML中
- 内部js

2.外部js

3.直接在HTML中

2.js的基本语法

2.1 变量的声明

三个关键字 var 、let 、const

var a=5;
let b=5;
const c=5;

三个关键字的区别

2.2数据类型

可以用 typeof(变量名) 查看变量类型

2.2.1 基本数据类型

undefined (未定义类型)
null (空类型)
number（数值类型）
bollean （布尔类型）

2.2.2 复杂数据类型

object （对象）
string （字符串类型）

2.3对象的属性和方法

2.3.1属性

属性是对象的键值对，键（属性名）为字符串或 Symbol，值为任意类型（原始值、对象、函数等）

javascript 复制代码

let person = {
  name: '小明',      // 字符串属性
  age: 18,           // 数值属性
  address: {         // 嵌套对象属性
    city: '北京'
  }
};

2.3.2访问方式

点语法 ：object.property（适用于普通属性名）。
方括号语法 ：object["property"]（适用于含空格、连字符的属性名或动态属性）

javascript 复制代码

console.log(person.name);         // "小明"
console.log(person["age"]);       // 18
console.log(person.address.city); // "北京"

2.4.3动态操作

添加属性 ：通过赋值直接添加新属性。
javascript 复制代码
```
person.gender = '男'; // 添加 gender 属性
```
删除属性 ：使用 delete 操作符，仅能删除自有属性（非继承属性）

javascript 复制代码

delete person.age; // 删除 age 属性

2.4.4方法

方法是值为函数的属性，用于描述对象的行为

javascript 复制代码

let calculator = {
  add: function(a, b) {
    return a + b;
  },
  multiply(a, b) { // ES6 简写语法
    return a * b;
  }
};
console.log(calculator.add(2, 3)); // 5

2.4字符串的常用属性和方法

2.5数组常用的对象和方法

2.5运算符

|-------|----------------------------------|
| 类别 | 运算符号 |
| 算术运算符 | +、-、*、/、%、++、-- |
| 比较运算符 | >、< 、>= 、<= 、== 、!= 、===、!== |
| 逻辑运算符 | && 、|| 、！ |
| 赋值运算符 | =、+=、-= |

2.6逻辑控制语句

条件结构 if结构 switch结构
循环结构 for 、for..in 、while、do...while
中断循环 break 、continue

2.7函数

2.7.1 系统函数

parseInt 、parseFloat 、isNAN

2.7.2 自定义函数

函数声明

javascript 复制代码

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

函数表达式

javascript 复制代码

const multiply = function(a, b) {
    return a * b;
};

箭头函数
javascript 复制代码
```
const square = x => x * x;
```

2.8页面中的事件

3.BOM的常用对象和方法

3.1浏览器对象

3.1.1常用属性

|----------|---------------|
| 名称 | 说明 |
| history | 有关用户访问过的url信息 |
| location | 有关当前url的信息 |

3.1.2常用方法

3.2 history对象

3.3 location对象

属性

方法

3.4 document对象

属性

方法

|--------------------------------|----------------------------------------|----------------------------------------------|
| 方法 | 语法示例 | 描述 |
| getElementById() | document.getElementById('id') | 通过元素 ID 获取单个元素，ID 唯一。 |
| getElementsByTagName() | document.getElementsByTagName('div') | 通过标签名获取元素集合（如所有 <div>） |
| getElementsByClassName() | document.getElementsByClassName('cls') | 通过类名获取元素集合，支持多类名（空格分隔） |
| getElementsByName() | document.getElementsByName('name') | 通过 name 属性获取元素集合（常用于表单元素） |
| querySelector() | document.querySelector('.class') | 通过 CSS 选择器获取第一个匹配元素（如 .class、#id 或复合选择器） |
| querySelectorAll() | document.querySelectorAll('p.cls') | 通过 CSS 选择器获取所有匹配元素的静态列表。 |

3.5内置对象

内置对象有Array 、String 、Math 、Date

tips: Math对象是js的一个全局对象，不需要示例