JS 第一天

JS第一天

目录：

1. JS语言介绍
2. 三种存在位置
3. 解释性语言特性决定JS代码位置
4. 变量的定义
5. 三种弹出框
6. 四种调试方式
7. 数据类型
8. 运算符

---

一、JS语言介绍

1、概念

• 浏览器脚本语言
• 可以编写运行在浏览器上的代码程序
• 属于解释性、弱语言类型编程语言

2、组成

• ES语法：ECMAScript、主要版本ES5和ES6

• DOM：文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。

• BOM：浏览器对象模型(Browser Object Model)，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构；且由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

---

二、三种存在位置

HTML代码示例：

JS代码示例：

body.style.backgroundColor='pink'

1、行间式：存在于行间事件中

2、内联式：存在于页面script标签中

3、外联式：存在于外部JS文件，通过script标签src属性链接

index.js文件
body.style.backgroundColor='#0ff'

index.html文件

---

三、解释性语言特性决定JS代码位置

HTML代码示例：

    
    
    
    
    

    






    
    

    
    
    
123
    
    

• 出现在head标签底部：依赖型JS库
• 出现在body标签底部：功能型JS脚本

---

四、变量的定义

HTML代码示例：

    
    


    变量的定义

1、ES5定义变量

var num = 10;  // 无块级作用域变量
num = 10;  // 全局变量

2、ES6定义变量

let num = 10;  // 局部变量
const NUM = 10;  // 常量

3、变量(标识符)的命名规范

• 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
• 区分大小写
• 不能出现关键字及保留字

abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

---

五、三种弹出框

HTML代码示例：

    
    


    三种弹出框

• alert：普通弹出框
• confirm：确认框
• prompt：输入框

---

六、四种调试方式

HTML代码示例：

    
    


    四种调试方式

• alert()
• console.log()
• document.write()
• 浏览器断点调试

---

七、数据类型

代码示例：

    
    


    数据类型

1、值类型

• number：数字类型

var a = 10;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'number')

• string：字符串类型

var a = '10';
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'string')

• boolean：布尔类型

var a = true;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'boolean')

• undefined：未定义类型

var a = undefined;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'undefined')
console.log(a == undefined)

2、引用类型

• function：函数类型

var a = function(){};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'function')

• object：对象类型

var a = {};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)

3、具体的对象类型

• null：空对象

var a = null;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a == null)

• Array：数组对象

var a = new Array(1, 2, 3, 4, 5);
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Array)

• Date：时间对象

var a = new Date();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Date)

• RegExp：正则对象

var a = new RegExp();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof RegExp)

4、类型转换

• 数字|布尔 转换为 字符串

var a = 10 or true

String(a)

a.toString()

• 布尔|字符串 转换为 数字

var a = true or '10'

Number(a)

+ a

parseFloat()
parseInt()

• 字符串|数字 转换为 布尔

var a = 10 or '10'
Boolean(a)

• 自动转换

5 + null  // 5
"5" + null  // "5null"
"5" + 1  // "51"
"5" - 1  // 4

• 特殊产物

// NaN: 非数字类型
// 不与任何数相等，包含自己
// 利用isNaN()进行判断

数据类型转换代码示例：

    
    


    类型转换

---

八、运算符

代码示例：

    
    


    运算符

1、算数运算符

前提：n = 5

算术运算符.jpg

2、赋值运算符

前提：x=5，y=5

运算符	例子	等同于	运算结果
=	x=y		5
+=	x+=y	x=x+y	10
-=	x-=y	x=x-y	0
*=	x*=y	x=x*y	25
/=	x/=y	x=x/y	1
%=	x%=y	x=x%y	0

3、比较运算符

前提：x=5

运算符	描述	比较	结果
==	等于	x=="5"	true
===	绝对等于	x==="5"	false
!=	不等于	x!="5"	fales
!==	不绝对等于	x!=="5"	true
>	大于	x>5	false
<	小于	x<5	false
>=	大于等于	x>=5	true
<=	小于等于	x<=5	true

4、逻辑运算符

前提：n=5

运算符	描述	例子	结果
&&	与	x=n>10&&++n	x=false,n=5（短路）
||	或	x=n<10||n--	x=true,n=5（短路）
!	非	x=!n	x=false,x=5

5、ES6语法解构赋值

• 数组的解构赋值

let [a, b, c] = [1, 2, 3]
// a=1,b=2,c=3
let [a, ...b] = [1, 2, 3]
// a=1,b=[2,3]

• 对象的解构赋值

let {key: a} = {key: 10}
// a=10

• 字符串解构赋值

let [a,b,c] = 'xyz'
// a='x',b='y',c='z'