DAY54-前端入门-javascript基础

一、javascript

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

二、三种存在位置

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

<body id="body" onload="body.style.backgroundColor='red'">
    
</body>

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

使用场景:某页面的特有逻辑,可以书写该该页面的script标签内

<body id="body">
    <script type="text/javascript">
		body.style.backgroundColor='orange'
	</script>
</body>

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

使用场景:适用于团队开发,js代码具有复用性

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

01.html文件
<script type="text/javascript" src="./js/01.js"></script>

总结

三种方式不存在优先级，谁在逻辑下方，谁起作用。

如果外联内部有内联，那么内联会被自动屏蔽

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

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

四、JS语法规范

注释

// 单行注释
/* 
多行注释
*/

以分号作为语句结尾（允许省略）

五、变量的定义

1、ES5定义变量

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

六、三种弹出框

alert：普通弹出框
confirm：确认框 true | false
prompt：输入框确定为输入值, 取消为null

七、四种调试方式

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;
	var b = true;

	var c = String(a);
	console.log(c, typeof c); // '10', string
	c = String(b);
	console.log(c, typeof c); // 'true', string

	c = a.toString();
	console.log(c, typeof c); // '10', string
	c = b.toString();
	console.log(c, typeof c); // 'true', string

布尔|字符串转换为数字

	var aa = true;
	var bb = '10';

	var cc = Number(aa);
	console.log(cc, typeof cc); // 1 number
	cc = Number(bb);
	console.log(cc, typeof cc); // 10 number

	cc = + aa;
	console.log(cc, typeof cc); // 1 number
	cc = + bb;
	console.log(cc, typeof cc); // 10 number

	// 针对字符串
	cc = parseFloat('3.14.15.16abc');
	console.log(cc, typeof cc); // 3.14
	cc = parseInt('10.35abc');  // 10
	console.log(cc, typeof cc);

字符串|数字转换为布尔

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

自动转换

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

特殊产物

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

九、运算符

1、算数运算符

前提：n = 5

运算符	描述	例子	x结果	n结果
+	加法	x=n+2	7	5
-	减法	x=n-2	3	5
*	乘法	x=n*2	10	5
/	除法	x=n/2	2.5	5
%	取模(余数)	x=n/2	1	5
++	自增	x=++n	6	6
++	自增	x=n++	5	6
--	自减	x=--n	4	4
--	自减	x=n--	5	4

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、三目运算符

// 结果 = 条件表达式 ? 结果1 : 结果2;

// eg:
var tq = prompt("天气(晴|雨)")
var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
console.log(res);

6、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'