JS组成:
ECMAScript (js语法规范 ECMAScript5 => ECMAScript6)
BOM (Browser Object Model) 浏览器对象模型 => 提供了操作浏览器的接口和方法 => 页面跳转 控制窗口历史记录(页面前进和后退) 设备相关的信息
DOM (Document Object Model) 文档对象模型 => 提供了操作文档(页面)的接口和方法 => 获取元素 操作元素(操作元素改变元素的内容/样式/绑定事件 和 元素的增删改查)
1. JS组成
ECMAScript5.0 => ES5
BOM
DOM
2. JS三种引入方式
a. 内部JS 在页面中创建script标签, 标签内用于书写JS代码(语法) => 注意: 现
阶段script一般习惯放在body中所有元素的最后方 或者 放在body标签的后方(浏览器
容错机制)
b. 外部JS => 通过给script标签,绑定src属性载入外部JS
注意:
script标签载入外部JS时,标签对内不能写js代码 => 没有效果,不执行
c. 内联JS(了解即可 不建议使用)
JS常见语法:
1. JS注释
a. 对JS代码进行解析说明
b. 如果想让某些JS代码不执行 => 注释掉(被注释的内容不会执行)
(1) 单行注释 => 仅注释一行
ctrl + /
// 注释的内容
(2) 多行注释 => 批量注释一段代码
alt + shift + a
/*
多行注释
*/
JS三个打印方法:
(1) console.log() 在控制台输出一个或多个内容(多个用逗号分
隔)
优点: 向控制台输出文本或html结构(字符串)
缺点: 输入位置不可控
说明
JS方法: 完成某个特定功能的工具
JS变量: JS中单词都需要有一定的含义
(1) 官方规定: console(控制台) document(文档)
(2) 用户自定义: x = 1
JS中如果想输入一段文本, 文本需要用引号包裹 ("" '');
他说:"那女孩靠的太近了";
报错:
Uncaught ReferenceError: hello is not defined => hello没有定义
(2) document.write() 在文档写入一段文本(一段,多段)
优点: 向页面输出文本或html结构(字符串)
缺点: 输入位置不可控
(3) alert() 弹出框(在页面弹出一段内容)
优点: 方便调试,可以弹出内容
缺点: 影响后续代码执行(要点确定)
JS基本数据类型 => 组成JS语法的基本数据,不需要声明可以直接使用
string 字符串(文本)
number 数字类型
boolean 布尔值(对错,是非)
null 空值
undefined 未定义
array 数组(一组数据, 一般存一组相同类型的数据,存不同类型也可以)
object 对一个或一类事物特征和行为的描述
typeof 方法/关键字(官方整理)
数组也是一个特殊的对象, 数组是对象的子集
判断数据类型的方法:
typeof xxxx(数据) => 返回数据类型的结果(字符串)
注意:
null 在js语法中表示空值,但是它也是一个特殊的对象
直接使用js基本数据 => 字面量/直接量
变量 => 常用于在JS中存储数据 (存储数据的容器 -> 存的是什么数据,取出来的就是什么数据)
// 如何声明变量?
// 声明变量需要借助关键词 var 变量名
// (1) 先声明变量,在赋值
// (2) 声明的同时赋值
// (3) 一次性声明多个变量 (多个变量之间用逗号分隔)
// 注意:
// (1) 一般情况下,变量需要先声明,才能使用
// (2) 如果只声明变量, 不赋值 默认返回undefined
变量的命名规范:
// 1. 用英文 不要用中文
// 2. 由数字 字母 _ $ 组成,但是不能以数字开头,不能包含中文 空格 和 特殊字符(+ - * / % ^)
// 3. 严格区分大小写 (a和A是两个不同的变量)
// 4. 命名方法 => 下划线命名法 驼峰式命名法 大驼峰式命名法
5.不能使用关键字和保留字
// 关键字: 在JS语法中有特殊含义的字符 (JS语法专用)
// 保留字: 尽管保留字在这门语言中还没有任何特定的用途。但它们有可能在将来被用作关键字
Math中的相关方法:
// Math.random() 随机数
// Math.ceil() 向上取值
// Math.floor() 向下取值
// Math.round() 四舍五入
// Math.min() 取最小值(可以接收一个或多个参数,返回最小值 => 多个数据之间用逗号分隔)
// Math.max() 取最大值(可以接收一个或多个参数,返回最大值 => 多个数据之间用逗号分隔)
// Math.pow(m,n) 取m的n次方 m^n
// Math.abs() 取绝对值 |m| => 整数的绝对值还是整数,负数的绝对值是它的相反数(正数)
// Math.PI π(圆周率)
算术运算符
// 优先级: * / % 大于 + -
关系运算符 (条件运算符 => 布尔值)
// 优先级: > >= <
// 数值相等比较
// = 赋值 (如: a = 1)
// == 相等 只比较数值,不比较类型(数值相同即可)
// != 不相等
// === 全等(恒等) 既比较数值,又比价类型(数值和类型均相同才可以)
// !== 不全等(不恒等)
逻辑运算符 (条件运算符(多条件))
// &&(且) ||(或) !(非)
// 优先级: ! && ||
&&(且) => 多条件并列 // 规律: 同真为真 遇假为假 => 条件全都成立才成立,有一个不成立后面就没有必要看了(假的)
||(或) => 多条件满足任意一个 // 规律: 同假为假 遇真为真 => 条件全都不满足为假,任意一个满足则为真,后面也没有必要看了
!(非) => 颠倒是非 / 条件反转 => 取反
赋值运算符
// = += -= *= /= %= ++ --
// += -= *= /= %= => 自增/减/乘/除/余 任意值
// a++ a-- 自增/减 1
// 优先级 ++ -- 大于 = += -= *= /= %=
a++ 和 ++a 的区别 (1) 默认情况下 a++ 和 ++a 都表示自增a, 对于a来说,最终都会自增1 (2) 在自增过程中出现其他操作 (赋值/函数调用等) a++ 会先赋值(先处理其他操作),再自增 ++a 会先自增, 在赋值(赋值的是自增后的结果)
运算符的优先级:
// () [] . 大于 ! ++ -- typeof 大于 算术运算符 大于 关系运算符 大于 逻辑运算符(!比较特殊) 大于 赋值运算符 ( ++ -- 比较特殊)
数组:
一组数据, 一般存一组相同类型的数据,存不同类型也可以) (1) 对应下标取值 (2) length属性表长度, 数组中数据的个数
对象
=> 对一个或一类事物特征和行为的描述 // (1) 对象的数据一般有键值对(key:value)组成 => 键名(属性名=>描述(字符串)),键值(属性值 => 描述对应的值(任意类型)) // (2) 对象中的属性排名不分先后 // (3) 对象中键名是字符串类型,其引号可以省略(规范)