JavaScript整体笔记简要版

@[TOC]JavaScript整体笔记简要版

简介

这是关于JavaScript的笔记，可以作为自己学习js过程的复习和巩固的文章，文章中多的是关于一些js知识的概要，比较少的案例，不适合做入门的学习，适合作为一个复习的概要，通过这些知识点区理清学习js的思路。

1.基本语法

1.1 编写位置

1. 将js代码编写到网页的标签中
2. 编写到一个js文件中，然后通过引入

//第一个js案例
//hello world是学习一门语言的开始案例，代表着我们编写的程序是一个生命，这一刻它已经诞生了
<script>
        console.log("Hello world!");//在控制台的输出的语句
</srript>

1.2 js是严格区分大小写的

JavaScript是严格区分大小写的，对于变量a 和 A 会被解析为不同的变量，在编写的时候一定要区分大小写。

1.3标识符及命名规则

含义：指的是变量、函数、属性的名称，或者函数的参数
规则：

1. 第一个字符必须是字母、下划线或者一个美元符号（$）;
2. 其他的字符可以是字母、下划线、美元符好或者数字;
3. 按照惯例，标识符命名一般采用的是驼峰命名法;
4. 不能是JavaScript中已经使用的关键字和保留字（这里就展示关键字和保留字了，编辑器一般会有提示）。

1.4 变量的定义及声明

作用：给我们创建的值或者对象一个名称，便于我们在后面的代码中反复使用
语法：（使用var关键字生命一个变量，同时也可以使用"=" 对变量进行赋值）

var a ;//申明了一个a变量
var b = 1 ;
/*申明了一个b，赋值为 1，在后面的使用b的时候，
该值就会自动替换为 1 进行计算。*/

1.5 数据类型

作用：上面的学习如何生命一个变量，就必须知道变量的数据类型，便于我们进行相应的操作，如对一个数字类型的变量，可以进行加减乘除等的数学运算。

js中有5种基本数据类型

1 字符串类型（String）

作用：用于表示一个字符序列，即字符串，js中用 单引号（’）或者（"）括起来
包含着一些转义字符

转义字符	含义
\n	换行
\t	制表
\b	空格
\r	回车
\	斜杠
’	单引号
"	双引号

其他类型的可以使用方法：toString()、Sting()、字符串拼接的方式来转换成字符串类型

2 数值型（Number）

• 作用：用于表示整数和浮点数（一般是10进制的整数和浮点数）
• 范围： ± 1.7976931348623157e+308 （一般是够用的，超过了这个范围就会返回± Infinity）
• NaN:（含义：Not a Number）是一个特殊的数值，在js单重可以对数值进行数学运算，没有结果返回时就有NaN。
• 数值转化：可以使用Number()、parseInt()和parseFloat()三个方法把字符串等转换为数值类型

3 布尔型（Boolean）

别称：逻辑值类型和真假值类型
取值：true（真） 或 false（假）
转化：通过Boolean()函数来转为布尔类型

4 null型（Null）

• 含义：表示一个空的对象
• 取值（只有一个）：null
• typeof检查null的时候会返回一个Object
• 注意：如果是将undefined和null进行是否相等的比较化返回的true

5 undefined型（Undefinded）

• 含义：使用var生命变量但为将其初始化的时候，这个变量的值就是undefined
• 取值（只有一个）：undefined
• 注意：typeof对没有声明或没有初始化的变量都会放回undefined。
  上面之外的基本数据类型之外，其他的都为Object，因此可以说JavaScript中有六种数据类型

typeof运算符：可以用于检查一个变量的数据类型

typeof操作的数据类型	结果
typeof 数值	number
typeof 字符串	string
typeof 布尔型	boolean
typeof undefined	undefined
typeof null	Object

1.6 运算符

JavaScript中定义了一系列对数据进行运算的运算符
分类

1.6.1 算数运算符

作用：进行加减乘除等数学运算的运算符

运算符	说明
+	加法
-	减法
*	乘法
/	除法
%	取模
++a	前置：使用前先+1
a++	后置：使用后再+1
- -a	前置，使用前先-1
a- -	后置，使用后再-1

1.6.2 逻辑运算符

主要有三个： ! （非）、&&（与）、|| （或）。

运算符	说明	短路规格
!	逻辑非（NOT）	无
&&	逻辑与（AND）	左边的条件为false，立刻停止，不继续对后面的进行判断
II	逻辑或（OR）	左边的条件true，立刻停止，不继续对后面的进行判断

1.6.3 关系运算符

作用	符号
大小比较	小于（<） 、大于（>） 、小于等于（<=）和大于等于（>=）
相等比较	==（判断两个值是否相等），!=（表示两个值是否不相等）， ===（判断两个值是否相等）

1.6.4 三元运算符（条件运算符）

语法：判断条件? 取值1 : 取值2;

//三元运算符的使用
var a=1,b =2 ;
var max = a>b? a: b;
//这里相当于
if(a>b){
	max =a ;
}else{
	max = b;
}

1.6.4 运算符的优先级

1. . 、[]、 new
2. （）
3. ++、–
4. ！、~、+（单目）、-（单目）、typeof、 void、delete
5. +（双目）、-（双目）
6. <<、>>、>:>>
7. < 、< =、>、>=
8. == 、!= 、===
9. &
10. ^
11. |
12. &&
13. ||
14. ?:
15. =、+=、-=、*=、/=、%=、<<=、>>=、>>>=、 &=、 ^= 、|=
16. ，

1.7 语句

程序相当于文章，之前的部分相当单词的学习，最多可以把var a =1 ；这样的当成一个语句，这个语句还是只说了一半，为了让我们的“文章”富有逻辑，就必须学习语句，语句是“文章”中的基本单位，只有一句句从头读到尾，才能明白一篇“文章”的内容。

1.7.1 条件语句

• 作用：条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句

• if…else语句

//形式1
if(条件表达式){
	语句...
}
//形式2
if(条件表达式){
	语句...
}else{
	语句...
}
//形式3
if(条件表达式){
	语句...
}else if{
	语句...
}else{
	语句1...
}

• switch…case语句
  作用：switch语句更适用于多条分支使用同一条语句的情况。

switch(语句){  
	case  表达式1: 语句...;
	break;
	case  表达式2:  语句...;
	break;     
	default:  语句...;
}

1.7.2 循环语句

作用：满足所给的条件将会一直执行循环体内的语句

1. while语句（while循环）
   语法：

//条件为true的时候就执行。
while(条件表达式){  
	 语句...    
}

2. do…while语句
   语法：

//先执行循环体的内容，再进行条件判断语句，true的时候退出
do{ 
	语句...   
}while(条件表达式）;

3. for循环
   语法

for(初始化表达式 ; 条件表达式 ;  更新表达式){   
	语句...
}

1.7.3 break 和continue语句

作用：break 和 continue 语句用于在循环中精确地控制代码的执行。
使用的位置：只在循环和switch语句中使用。

• break 在循环和switch语句中使用
• continue 在循环语句中使用

2.对象

2.1 对象的相关概念

• 含义：Object类型，是JavaScript中的引用数据类型，是基本类型和其它对象的复合类型。
• 对象也可以看做是属性的无序集合，每个属性都是一个名/值对
  创建方式

//创建对象的方式
//方式1：
var person1 = new Object();
person.name = "库隐";
person.age = 18;//永远年轻

var person2 = {
	name:"库库",
	age:19
}

对象属性值的访问

//形式1：对象.属性名
person.name;
//形式2：对象['属性名']
person2['name']

构造函数

• 含义：用于构造对象的函数
• 创建对象、修改属性值、删除属性：

/*语法：function 构造函数名(形参1,...,形参n){
	语句...
}
*/

function Person(name ,age){
	this.name = name ;
	this.age = age;
}

//修改属性值：
//语法：对象名.属性名  = 新属性值 ;
person1.name = "大牛";

//删除属性
//语法：delete 对象.属性名
delete person1.age ;

其实面向对象是JavaScript的一个重点，这里讲太详细的话，不够篇幅。

2.2数组Array

• 作用：用于表达有顺序关系的值的集合的语言结构， 数组也是对象的一种。
• 创建方式

//语法：使用var 数组名=[数组元素,...，数组元素n];
var array1=[];
var array2 = [1,2,3];
var array3 = new Array();
var array4 = new Array(1,2,3);

• 使用数组中的元素

//语法：数组名[索引]
var a = array1[0];//将array1中的第一个元素赋值给变量a

2.3函数

• 含义：函数是由一连串的子程序（语句的集合）所组成的，可以被外部程序调用。向函数传递参数之后，会执行函数体中的语句，函数可以返回一定的值。
  注意：在js中函数的一个对象。

函数的声明与调用：

• js中所有参数的传递都是按值传递的

//语法
/*
方式1：
function 函数名 (形参1,...,形参n){  
return 返回值;  
}
*/

function add( a ,b){
	return a + b ;
}

var result1 = add(1,2);

/*
方式2：
var 变量名 = function (形参1,...,形参n){  
return 返回值;  
}
*/
var sum = function (a , b){  
return a + b;  
}

//调用
var result2 = sum(1,2);

函数的内部属性：arguments 和 this

• 该对对象实际上是一个数组，用于保存函数的参数，同时还有一个属性callee来保存单签函数
• this 引用的是一个对象，会根据代码的上下文语境自动改变其引用对象

函数的调用方式	this引用的对象
构造函数	所生成的对象
调用对象的方法	当前对象
apply或call调用	参数指定的对象
其他方式	全局对象（window）

3.DOM

含义：DOM是Document Object Model的缩写，即文档对象模型。

• 文档（Document）：表示这个HTML网页文档（浏览器帮我们创建了一个document对象，可以直接使用）。
• 对象（Object）：可以将对象 中的每一个部分和结点转化为一个对象，便于我们对该节点的内容进行获取和设置。
• 模型（Model）：表示对象之间的关系，这样可以更加方便地获取到需要的对象。
  作用：js可以通过DOM来对HTML文档进行操作，这样就可以根据需要去操作web页面

3.1 Node(节点)

3.1.1 分类

• Document（整个HTML文档））：文档节点。
• Element（HTML标签）：元素节点，div 、span、a标签等。
• Attr(标签属性)：属性节点，id属性、class属性等。
• Text（文本）：文本节点 ，标签体之间的文本内容。

3.2 获取节点

3.2.1获取元素节点

通过document对象调用

• getElementById(“id名称”)：通过唯一的id属性获取一个元素节点对象
• getElementsByTagName(“标签名”):获取一组元素对象节点
• getElementsByName(“name名称”)：通过name属性来获取一组元素对象节点

3.2.2获取元素节点

• getElementsByTagName():返回当前节点制定标签名后代节点
• childNodes:属性,表示单签节点的所有子节点
• firstChild:属性，表示当前节点的第一个子节点
• lastChild：属性，表示当前节点的最后一个节点

3.2.3获取父节点和兄弟节点

• parentNode：属性，获取该节点的父节点
• previousSibling：属性，获取前一个兄弟节点
• nextSibling：属性，表示单签节点的后一个兄弟节点

3.3 获取和设置节点的属性

获取：元素对象.属性名

• element.value
• element.id
• element.className

设置：元素对象.属性名 = 新属性值

• element.value = “新文本内容”;
• element.id = “i001”;
• element.className = “newClass”;

其他属性

• nodeValue：文本节点可以通过nodeValue属性获取和设置文本节点的内容
• innerHTML：元素节点通过该属性获取和设置标签内部的html代码

使用CSS选择器查询（使用document对象调用）

• querySelector()：查询获取第一个
• querySelectorAll()：查询所有的

节点修改

• 创建：document.createElement(标签名)
• 删除：父节点.removeChild(子节点)

插入

• 形式1：父节点.appendChild(子节点)
• 形式2：父节点.insertBefore(新节点 , 旧节点)

4 事件

作用：通过事件绑定相应的函数，可以使用户和浏览器进行交互

4.1绑定事件

• 通过HTML元素来绑定事件

 <button onclick="alert('hello');alert('world')"> 按钮</button>

• 通过dom对象来绑定事件（推荐）

var btn = document.getElementById("btn");
btn.onclick = alert("我被点击了");

• 通过设置事件监听器来绑定事件（一个事件可以绑定多个处理函数）：

//语法：元素对象.addEventListener();
btn.addEventListener('click' , function(){alert("hello");});

事件中的this

• 设定了该事件处理程序的元素，即该事件所属的节点元素

4.2 事件对象

• 在事件触发的时候，会产生一个事件对象，这个对象包含着所有事件相关的信息；包含导致事件的元素、事件的类型以及其他特定事件相关的信息。
• DOM标准的浏览器会将一个event对象传入到事件的处理程序当中。无论事件处理程序是什么都会传入一个event对象
• 可以通过传入参数event获取

Event对象的同一属性/方法

属性/方法	类型	读写	说明
bubbles	Boolean	只读	事件是否冒泡
cancelable	Boolean	只读	是否可以取消事件的默认行为
currentTarget	Element	只读	当前正在处理的事件元素
defaultPrevented	Boolean	只读	是否调用了preventDefault()
detail	Number	只读	与事件相关的细节信息
eventPhase	Number	只读	阶段：1.捕获、2.目标 、3.冒泡
preventDefault()	Function	只读	取消事件的默认行为
stopimmediatePropagation()	Function	只读	取消事件的进一步捕获或冒泡
stopPropagation	function	只读	取消事件的进一步捕获或冒泡
target	Element	只读	事件的目标
trusted	Boolean	只读	是否是浏览器内置事件
type	String	只读	被触发的事件类型

IE中的事件对象(兼容性问题)

• 要访问 IE 中的 event 对象有几种不同的方式，取决于指定事件处理程序的方法
• 在IE中event对象作为window对象的属性存在的，可以使用window.event来获取event对象
• 在使用attachEvent()的情况下，也会在处理程序中传递一个event对象，也可以按照前边的方式使用

属性 /方法	类型	读/写	说明
cancelBubble	Boolean	读/写	是否取消冒泡
returnValue	Boolean	读/写	是否执行默认行为
srcElement	Element	只读	事件目标
type	String	只读	被触发的事件类型

4.3 事件触发

事件的发生主要是用户操作引起的

• 比如用户移动鼠标，单击了按钮、超链接等

4.4 事件的传播

事件的处理机制分为捕获阶段、目标阶段、事件冒泡这三个阶段。

1.捕获截断阶段

• 这一阶段会从window对象开始向下一直遍历到目标对象，如果发现有对象绑定了响应事件则做相应的处理
• 特点：由上自下

2.目标阶段

• 执行目标对象上绑定的响应函数

3.事件冒泡阶段

• 事件的传播方式和捕获阶段正好相反，会从事件目标一直向上遍历，直至window对象结束，这时对象上绑定的响应函数也会执行。
• 取消事件的传播

//使用event对象的方法
//方式1
event.stopPropagation();
//方式2
event.stopImmediatePropagation()

• 取消默认行为

//使用 preventDefault()来取消默认行为
event. preventDefault();

5 BOM

• 作用:提供了很多对象，用于访问浏览器的功能，与任何网页内容无关，BOM将浏览器中的各部分转化成了一个个的对象。

window对象

• 1.BOM的核心，是一个浏览器的实例。
• 2.作用域：全局，代表你可以任何位置中使用该对象，而你在全局作用域值生命的变量、对象、都会变成window对象的属性和方法

属性：

• 窗口大小（提供四个属性来确定窗口的大小）
• a.网页窗口的大小: innerWidth 和 innerHeight
• b. 浏览器本身的尺寸:outerWidth 和 outerHeight
  window.open()：方法
• 作用：使用window.open(),方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口
• 参数：(需要加载的url地址， 窗口的目标，一个特性的字符串，是否创建新的历史记录)

setTimeout()：方法

• 超过一定时间以后执行指定函数
• 参数：（要执行的内容，超过的时间）

clearTimeout():方法，取消超时调用

• 超时调用都是在全局作用域中执行的。

setInterval()：方法，每隔一段时间执行指定代码

• 参数：（要执行的代码，间隔的时间）
  clearInterval()：方法；取消间隔调用。

系统对话框

• alert() 、 confirm() 和 prompt() 方法可以调用系统对话框向用户显示消息。
• 备注：它们的外观由操作系统及（或）浏览器设置决定，而不是由 CSS 决定

location对象

• 含义：location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能
• href属性：href属性可以获取或修改当前页面的完整的URL地址，使浏览器跳转到指定页面。
• assign() 方法：所用和href一样，使浏览器跳转页面，新地址错误参数传递到assign ()方法中。
• replace() 方法：功能一样，只不过使用replace方法跳转地址不会体现到历史记录中 。
• reload() 方法 ：用于强制刷新当前页面。

navigator对象

• avigator 对象包含了浏览器的版本、浏览器所支持的插件、浏览器所使用的语言等各种与浏览器相关的信息。
• 有时会使用navigator的userAgent属性来检查用户浏览器的版本。

screen对象：

• screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。