方君の小窝
方君
2020-08-24

js基础

# javascript（js）

# 1.js是什么：

# **定义：**JavaScript（script--》脚本）是基于对象，基于事件驱动，可跨平台的弱类型脚本语言

1.脚本语言--》不需要预编译，程序执行过程中逐行解释（传统语言需要进行编译，脚本语言不需要编译）
2.基于对象--》js中一切皆对象，它可以创建并使用自定义对象，也可以使用浏览器等媒介提供的现有对象（js也可以说是面向对象的，因为可以实现面向对象的四个基本要求）
3.事件驱动--》监听事件的发生，直接作出响应（捕捉用户行为，或程序执行过程对象属性的改变）
4.弱类型--》无需声明变量的类型，在赋值时自动判断类型（不同类型进行运算时，自动隐式转换）
5.跨平台--》仅需要浏览器即可，不依赖操作系统


ps:
1.编译：译，翻译的含义，指将程序代码翻译成计算机语言（人看不懂的那种01格式）
2.面向对象（Oop）的四个基本要求（抽象，封装，继承，多态）
3.事件--》比如鼠标的移动，点击等等
4.隐式转换，例如字符串类型与数字类型用+链接时，数字类型隐式转换成字符串类型
1
2
3
4
5
6
7
8
9
10
11
12

与java的关系：javascript和java的关系--》没有关系，但JS的结构设计上借鉴了很多JAVA的内容

# js简史：

1995， Netscape(网景)    LiveScript 
    js创始人--》布兰登·艾奇（Brendan Eich，1961年～）
    目的： 表单验证 ------为了减轻服务器的负担

1997，  ECMA(欧洲计算机制造商协会，统一计算机相关标准的标准制定组织) 
	js的第一个标准： ECMA-	262（规范javascript语言----》ECMAscript）
	
发布年--》版本号
2011 --》es5.1
2015 --》es6   es6内容非常丰富,此后每年更新一个版本（内容相对少很多，但专业性更强）
2016 --》es7  （ecma2016）
2017 --》es8  （ecma2017）
2018 --》es9
2019 --》es10

浏览器  \Chrome谷歌\Firefox火狐\Safari苹果\。。

html5------》组成部分全部介绍完毕 ***

1.html      (超文本标记语言，描述网页)    --》稳定版本html5,最高版本html5
2.css       (层叠样式表，定义页面元素样式) --》稳定版本css2.1,最高版本css3
3.javascript(↑↑↑)                     --》稳定版本es5,最高版本es10

js组成：
1.ECMAScript==》     基础语法，对象
2.DOM文档对象模型==》  处理网页内容的方法
3.BOM浏览器对象模型==》与浏览器交互的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

​

# 2.js能干什么:

  1. 动态创建网页内容（改变网页内容）

  2. 对用户操作进行相应（监听用户操作）

  3. 制作网页特效（菜单栏，选项卡，弹出窗，轮播，等等一切动态）

    。。。。。。等等等等网页全部功能实现

# 3.js怎么用:

# 1.引入JS

<!-- ！！！新的标签 -->
<script></script>
<!-- 1 可以放在任意一对标签内部（title与它自身除外）-->

<!-- 2 可以内部引入，也可以外部引入-->

<!-- 内部-->
<script>
//js代码
</script>

<!-- 外部-->
<script src="js文件路径"></script>

<!-- ！！！注意，当同时使用外部引入与内部引入时，内部引入代码无效！-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 2.注释

//  注释是帮助你的同事还有你自己,看懂你写的这块功能的手段! 
//  单行注释
/*
	多行注释
*/
1
2
3
4
5
6

# 3.输出

//1 document.write() 在html网页内打印结果,可以解析标签

document.write("hello world");
document.write("<h1>hello world</h1>");
//2 alert()          弹出对话框,弹出后网页会被暂停(阻塞代码执行)

alert("hello world");
document.write("hello world");
//3 console.log()    在控制台内,打印结果(能够显示数据类型,方便调试)

console.log(123);   
//ps: 用分号将语句分隔开,不仅增强代码可读性,且如果将多行代码放在一行书写,必须使用分号分割!!!
1
2
3
4
5
6
7
8
9
10
11
12

# 4.数据类型

/**********************************************
5种基本类型和引用类型
基本类型:
    1.字符型(string)
    写法:将字符用双引号或者单引号括起来 ""或者'',又可称之为字符串   例如"hello world"
    2.数值型(number)
    写法:数字类型可以直接书写               例如 123456
    3.布尔型(boolean)
	写法:布尔类型只有两个,true 和 false   对与错的意思
	4.null
	含义:空
	5.undefined
	含义:未定义

引用类型(对象):
	6.对象(object)
注意!所有编程符号,要使用英文符号!!   注意观察英文与中文符号区别,坚决杜绝符号错误!
*/

/**********************************************
检测数据类型的方式:
1. console.log("string");       输出颜色不同(这个方式不提倡!!)

2. typeof
	写法:typeof 要检验数据类型的数据(中间有个空格!!)
	需要与输出连用才能看到结果
	console.log(typeof "string");
	
	这里有个历史遗留bug --> typeof底层实现时,将null解释成object了(实际上当初设计js这门语言的时候,因为核心思想是一切皆为对象,所以底层代码中的32位0 表示object,但是后来考虑到null也表示空,就把32位0也给了null)
	像这样的设计缺陷,还有===全等号(null==undefined值相等,null===undefined类型不等)
	
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 5.变量

//变量是什么?
//存储数据的容器
//本质上是存储在内存中的数据(不同数据类型的数据)



//1.写法!
    var a = "hello world";
    var b=1,c=2;
    var d;
    
/*2.分析!!
	1.var 是关键字!用于显示定义,如果不使用var关键字,就是隐式定义(隐式定义是错误写法!不要使用!)
	var 变量名 = 数据;
	
	2.一个变量的声明(定义)分为两个部分
	=号左面是变量的名称
	=号右面是存放在左侧变量中的数据
	
	3.声明多个变量,可以用逗号分隔
	
	4.允许声明后不赋值
	
	ps:	=号 叫赋值,读作将数据赋值给变量;

*/
/*3.命名规则,与规范!!!

	规则:
	1.由字母,数字,下划线,$符组成(下划线,$符 也不推荐)  (你可以用中文,但是别用,谢谢(*^▽^*))
	2.不能用数字开头!
	3.对大小写敏感(y与Y是不同的变量)
	4.不能起关键字与保留字为变量名!(因为他有自己的作用,如果不小心写了关键字,编辑器会给个颜色提示你.保留字部分提示,部分不提示)
	
	规范:
	1.小驼峰:第一个单词首字母小写,后面的单词首字母大写
		zhaoDongFang
	2.大驼峰:第一个单词首字母大写,后面的单词首字母小写
		ZhaoDongFang
    3.匈牙利:首字母表示变量存储内容
    	sZhaodongfang="东方"     nAge=18

*/
//4.变量的使用(也可以叫调用变量)
	console.log("东方");    //东方
	
	//在需要使用的时候,填写定义好的变量名
	var sDongfang="东方";
	console.log(sDongfang);  //东方
	
	//虽然变量中存储的是字符串,但是使用的时候也不需要给变量添加引号!


/*
	ps:还记得null跟undefined的区别吗?
	如果定义变量的时候没有赋值,输出这个变量将得到什么呢?

*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# 关键字

break do instanceof typeof
case else new var
catch finally return void
continue for switch while
debugger* function this with
default if throw delete
in try

# 保留字

未来可能作为，标识符存在。

abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
debugger implements protected volatile
double import public

# 6.运算符和表达式

/*
	运算符:用于执行运算的符号(值与值,变量与变量,值与变量都可以  因为变量存储的就是值)
	表达式:由运算元(值,变量)与运算符组成,返回运算结果的语法结构
	
	注意!!!表达式返回结果,可以直接使用(console.log(表达式)输出),也可以赋值给变量,将结果存储!!!
	*/
1
2
3
4
5
6

# 1.算术运算符

/*****************************************************************
	算术运算符(7个)
	//定义:计算数据
        双目运算符:加+    减-    乘*    除(保留整数)/    余数(取模)%  
        单目运算符:累加++  累减--  (10进制,以1为单位进行,且必须为对变量进行操作!!)

	//写法:
	*/
		console.log(1+1);//2
		console.log(1+"1");//11
		console.log(1+true);//2
		console.log(1+false);//1
		console.log(1+undefined);//NaN
		console.log(1+null)//1
	/*	
	//分析:当不同类型进行算术运算时,产生什么效果呢?
		1.两侧都是数值类型,正常
		2.任何值与字符类型做加法运算,其他类型都会隐式自动转换成字符串,并拼接在一起(+运算符用于字符串拼接)******(重点难点!)
		3.当字符串内仅有数字时,可以做减法,乘法,除法(字符串隐式转换成数字类型)
		4.布尔类型参与运算,true隐式自动转换成1 ,false转换成0(字符串无法隐式转换布尔类型)
		5.任何值与undefined做运算结果都等于NaN(与字符串做加法运算除外)
		6.任何值与null做运算,null隐式自动转换成0(与字符串做加法运算除外)
		
	ps1:单目双目含义,双目指需要两个值,单目只需要一个值	
	ps2:NaN :not a number不是一个数   NaN==NaN   //false  一个自己也不跟自己相等的值
    ps3:注意()的使用!与数学计算相同
    ps4:累加,累减在变量前后有不同吗?
    */
    	var i=0,j=0;
    	j=i++;
    	console.log(i);//0
    	i=0,j=0;
    	j=++i;
    	console.log(i);//1
    	//符号在前,先计算后赋值.符号在后,先赋值后计算
	/*
    	
    思考题:1	 10+"10"-10//？？
          2    var i=0;
    	 	   console.log(i++);???		  

*****************************************************************/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 2.赋值运算符

/*****************************************************************
	赋值运算符(6个)
	//定义:将右侧的值赋给左侧的变量
        赋值  =
        复合赋值  +=  -=  *=  /*  %=        //不能在中间加空格!!

	//写法: 
	*/
		var i = 10;
		    i += 1;   //等价于   i=i+1;或者 ++i
	/*	    
	//分析:
		1.将右侧的数据,赋值给左侧变量.所以!记住左侧一定为变量!!
		2.不能在声明的时候使用复合赋值(报错)
	思考题:
		var i,j=0;
		console.log(i+=10)//?????
		console.log(j+=10)//?????

*****************************************************************/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 3.关系运算符

/*****************************************************************
	关系运算符(8个)
	//定义:执行比较运算,返回一个布尔类型值
		等于==  不等于!=  全等于(先判断类型,在判断值)===  不全等!== 
        大于>  大于等于>=  小于<  小于等于<=
	
	//写法:
	*/
		console.log(6>5);//true
		console.log(5<6);//false
		console.log(22>9);//true
		console.log(22>"9");//false
		console.log(22>"a");//false
		console.log(22<"a");//false
		console.log(22=="a");//false
		console.log(null==undefined);//true
		console.log(null===undefined);//false
		console.log(1>false);//true
		console.log(0<true);//true
		console.log("0"<true);//true
		console.log("a">true);//false
	/*	
	//分析:
		1.两侧都为数字类型,比较后得到一个布尔值
		2.两侧都为字符类型,比较的是字符的ASCII码值 (从左到右,依次比较,出结果立即停止判断)
		3.一侧为数字,一侧为字符,将字符隐式转换成数字类型进行比较(字符数据内必须存储数字)
		4.一侧为数字,一侧为字符,当字符类型值内部不为数字,则返回false表示比较不了(无论大于小于还是等于都返回false)
		5.null与undefined只能互相比较,否则都返回false
			null==undefined//true
			null===undefined//false
		6.布尔类型:
			true隐式转换成1参与比较,false隐式转换成0参与比较
			字符类型与布尔类型比较时,字符类型要隐式转换成数字类型,如果不是数字字符,返回false表示比较不了
        
    ps: ASCII码值是美国发明计算机时存储自然文字符号时分配的符号
    	常用的数字0-9,0对应ASCII码48
    	字母a,对应97
    	大写字母A,对应65

*****************************************************************/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

ASCII

# 4.逻辑运算符

/*****************************************************************
	逻辑运算符(3个)
	//定义:比较布尔类型值,并返回一个布尔类型值,所以也叫布尔运算符
	
        与(and,并且,双目)&&     或(or,或者,双目)||    非(not,除非,单目)!
        图例:名称(英文,词义,单双目)

        使用逻辑运算符时,数据类型隐式转换成布尔类型:
        string-->如果是空字符串就是false,不为空都是true
        number-->如果是0或者NaN就转换成false,其他都为true
        null,undefined-->false
        boolearn-->不用转了兄弟...
        object-->true

	//写法:
	*/
		//布尔值比较
		console.log(true && true)//true
		console.log(true && false)//false
		console.log(false && false)//false
		
		console.log(true || true)//true
		console.log(true || false)//true
		console.log(false || false)//false
		
		console.log(!true)//false
		console.log(!false)//true
	
		//隐式转换后判断    逻辑与&&
		console.log(1&&1)//1
		console.log(0&&1)//0
		
		console.log("0"&&1)//1
		console.log(1&&"0")//"0"
		
		console.log(0&&true)//0
		console.log("0"&&true)//true
		console.log(false&&"0")//false
		console.log("a"&&0)//0
		
		//隐式转换后判断    逻辑或||
		console.log(1||0)//1
		console.log(0||0)//0
		console.log(0||1)//1
		
		console.log(1||0)//1
		console.log("1"||0)//"1"
		console.log(true||0)//true
		
		console.log(0||0)//0
		console.log(0||false)//false
		console.log(0||"")//""
	/*
	//分析:
		布尔值比较:
			1.逻辑与两侧布尔值都为真返回真.任何一侧或者两侧为假,则返回假
				&&记:都是真的才是真的
			2.逻辑或两侧布尔值都为假返回假.任何一侧或者两侧为真,都返回真
				||记:有一个是真就是真的
			3.逻辑非,你是真的,就变为假的;你是假的,就变为真的
				 !记:返回与值相反的结果
				 
		隐式转换后比较:
			逻辑与:
				1.第一个值为假:当第一个值已经为假了,没有必要再看第二个值了!所以如果当第一个值为假,就直接把它返回
				2.当第一个值为真时,逻辑与的返回值只跟第二个值有关(因为此时第二个值是真,就是真;第二个值是假就是假),所以直接将第二个值返回!
				
			逻辑或:
				1.第一个值为真:当第一个值已经为真了,没有必要看第二个值了!所以当第一个值为真,就直接把它返回
				2.当第一个值为假时,逻辑或返回的值只跟第二个值有关(因为此时第二个值是真,就是真;第二个值是假就是假),所以直接将第二个值返回!!
				
		ps:因为如上所示情况形如电流短路,所以逻辑运算也可称之为短路运算,逻辑运算符也可称之为短路运算符

*****************************************************************/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

# 5.条件运算符

/*****************************************************************
	条件(三元,三目)运算符
	//定义:js唯一的使用三个运算元的运算符,作为if语句的简短形式使用
	
	//写法:
	*/
        //nowColor当前颜色,changeColor改变后颜色
        var nowColor="white",changeColor;
        //想改白色字
        changeColor = (nowColor=="white")?nowColor:"white";
        console.log(color);//white
        //想改黑色字
        changeColor = (nowColor=="black")?nowColor:"black";
        console.log(color);//black
    /*
    //分析:
		1.运算符由一个?符(问号)与一个:符(冒号)组成,两个符号将表达式分为三个部分
		2.第一个部分(?前)是一个布尔值(或者可以返回布尔值的表达式)
		  第二个部分(?后:前)是一个值,当第一个部分为真,此值被返回,作为这个三目运算的结果
		  第三个部分(:后)是一个值,当第一个部分为假,此值被返回,作为这个三目运算的结果
*****************************************************************/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 运算符优先级!

运算符 描述
() 表达式分组
++ -- ! 一元运算符 (2个算术运算符,1个逻辑运算符组成)
* / % 乘法、除法、取模
+ - + 加法、减法、字符串连接
< <= > >= 小于、小于等于、大于、大于等于
== != === !== 等于、不等于、全等、非全等
&& 逻辑与
|| 逻辑或
?: 条件
= += -= *= /= %/ 赋值、复合赋值
, 逗号

整理:

​ 1.同级别从左到右

​ 2.括号>单目>算术>关系>逻辑>条件>赋值

# 7.类型转换

# 1.自动类型转换(隐式转换)

/*
	1.进行运算时(+除外),数字字符串(字符串内只含有数字)会自动转换成数字
	2.进行运算时,任意数据与字符串做+运算,自动转换成字符串,后拼接
	3.进行运算时,null自动转换成0,undefined自动转换成NaN
*/
1
2
3
4
5

# 2.强制类型转换


//1强制转换成字符串
	//写法:
        console.log(String(123))//"123";
	//分析:
		/*
			将需要转换为字符串的值,放到String()方法的括号中
		*/
//2强制转化成数字
	//写法:
        //转换成整数
        console.log(parseInt("123a"));//123
        console.log(parseInt("a123"));//NaN
        console.log(parseInt("123.3"));//123
        console.log(parseInt(true));//NaN
        console.log(parseInt(null));//NaN
        console.log(parseInt(undefined));//NaN
        //转换成分数
        console.log(parseFloat("123.33a"));//123.33
        console.log(parseFloat("a123.33"));//NaN
        console.log(parseFloat("123.3a3"));//123.3
        console.log(parseFloat(true));//NaN
        console.log(parseFloat(null));//NaN
        console.log(parseFloat(undefined));//NaN
	//分析:
		/*
			1.布尔类型,和null,undefined类型转换成数字类型都变为NaN
		*/
	

	3.Number()
	4.Boolean()
	5.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
编辑
#基础
ajax

ajax →

最近更新
01
vue自定义指令&生命周期
 08-24
02
ajax
 08-24
03
promise
 08-24
更多文章>
Theme by Vdoing | Copyright © 2019-2020