JS基础

最新推荐文章于 2022-11-02 12:49:00 发布

Wood_Ren

最新推荐文章于 2022-11-02 12:49:00 发布

阅读量205

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Wood_Ren/article/details/85076192

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JS基础

一、JavaScript语言介绍

1、概念

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

2、组成

ES语法：ECMAScript、主要版本ES5和ES6
DOM：文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展标志语言的标准编程接口。
BOM：浏览器对象模型（Browser Object Model），提供了独立与内容的、可以与浏览器窗口进行互动的对象结构；且有多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

二、3种存在位置

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

① 行间式代码块书写在一个个事件名全局属性中，没有script这样的一个全局属性
② 在某一个标签的某一个时间属性值中，出现的this代表该标签
③ 该标签对象this可以访问该标签的任意全局属性（eg：style），然后再间接访问具体需要操作的对象（eg：style.color）

<div id="body" onmouseover="this.style.color = 'red'" onmouseleave="this.style,color = 'blue'">这是一个拥有行间式js的div</div>

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

① 可以通过标签的 id(唯一标识),在 js代码块中访问到该标签(js的选择器)
② js代码块中语法采用的是小驼峰命名法,属性的值都是用字符串形式赋值
③ 在js任意地方，均有this对象，this对象不指向任意标签时，指向的是window对象

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

内联式js出现的位置

1. 依赖性js库 ====> 出现在head的最后
2. 功能性js脚本 ====> 出现在body标签后面，body和html之间的位置

3、外联式

① 通过script标签的src属性链接外部js文件
② 使用外联的script（拥有src属性）标签，会屏蔽掉标签内部的js代码块
③ js属于解释性语言,所有加载顺序会影响执行结果 ==> 内联式的 script 标签出现的位置

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

body.style.fontSize = "50px";

三、JS语法规范

1. 注释 
// 单行注释
/*
多行注释
*/
2. 语法
① 以分号(;)标识语句的结束
② 以作用域({})标识附属关系
③ 定义变量 
	声明关键词 变量名 = 变量值

四、变量的定义

1、ES5定义变量

var num = 10;  // 无块级作用域变量
num = 10；  // 全局变量
console.log(num);  
/* 注：变量在未定义赋值之前也可以取使用，值为undefined
定义变量：在程序运行过程中，值可以发生改变的量 */

2、ES6定义变量

let num = 10;  // 局部变量
const NUM = 10;  // 常量
// NUM是标准常量语法，为只读的值，不允许修改

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：普通弹出框

alert("")

prompt: 输出框

var info = prompt("请输入内容：")

confirm: 确认框

var res = confirm("")

六、四种调试方式

alert()
Console.log()
Document.write()
debug断点 | 浏览器断点调试

七、数据类型

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)
// 属于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)
// 属于Object类型

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)
// 属于Object类型

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)
// 属于Object类型

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  // 6
"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
    var a = 10, b = 20;
    var res = a < b ? a : b;  // 取小值
    console.log(res);
    res = a < b ? b : a;  // 取大值
    console.log(res);

    // 类似于if...esle...
    a < b ? console.log("表达式结果为true") : console.log("表达式结果为false")

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'

Wood_Ren

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础

JS基础一、JavaScript语言介绍1、概念浏览器脚本语言可以编写运行在浏览器上的代码程序属于解释型、弱语言类型编程语言2、组成ES语法：ECMAScript、主要版本ES5和ES6DOM：文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展标志语言的标准编程接口。BOM：浏览器对象模型（Browser Object Model），提...
复制链接

扫一扫

专栏目录