JavaScript基础

1、 简介

• JavaScript包括三部分：ECMAScript、DOM、BOM

• JavaScript特点：解释型语言、类似于C和Java的语法结构、动态语言、基于原型的面向对象

2、数据类型

• 变量用var定义

• JavaScript共6种数据类型：
  ①基本数据类型：字符串型（String）、数值型（Number）、布尔型（Boolean）、Null、Undifined
  ②其他类型都称为Object

• 使用var声明变量但未对其进行初始化的变量值为Undifined。Undifined值由null值衍生出来，所以比较Undifined和null是否相等时返回true。

• typeof运算符：用来检查一个变量的数据类型。如：typeof 123;
  对没有初始化和没有声明的变量都会返回undefined。typeof检查null会返回一个Object。

3、运算符

• 算术运算符
  逻辑运算符：与（&&）、或（||）、非（！）
  赋值运算符
  关系运算符：<、>、<=、>=
  相等：==
  全等：===（判断两个值时不会自动类型转换）
  三元运算符

4、语句

• 代码块：{}
• 条件语句：if…else、switch…case
• 循环语句：while、do…while、for
• label：使用label语句在代码中添加标签，以便将来使用。

5、对象

• 对象是一种复合值，它将很多值聚合在一起，可以通过名字访问这些值。
  对象也可以看做是属性的无序集合，每个属性都是一个名/值对。
  对象除了可以创建自有属性，还可以通过从一个名为原型的对象那里继承属性。

• Object类型，JavaScript中的引用数据类型。除了字符串、数字、null、true、false和undefined之外，JavaScript中的值都是对象。
  创建对象两种方式、两种访问方式：

	var person = new Object();
	person.name = "孙悟空";
	person.age = 18;

	var person = {
			name = "孙悟空",
			age = 18
			};

• 数组也是对象的一种。
  var arr = [1,3,4];
var arr = new Array(数组长度);
var arr = new Array('123','34');

• 在JavaScript中函数也是一个对象。声明函数需要function关键字。
  声明：var sun = function(a,b){return a+b;}
  调用：var result = sum(1,3);
  值传递

  • 函数内部两个特殊对象：
    ①arguments：该对象实际上是一个数组，用来保存函数的参数。同时该对象还有一个属性callee来表示当前函数。
    ②this引用

• 函数也是一个对象，可以作为参数传递给另一个函数，函数作为参数时不加()。

• 函数对象的方法：每个函数都有两个方法call()和apply()。call()和apply()可以指定一个函数的运行环境对象，就是设置函数执行时的this值。

• 属性：在对象中保存的数据或者说是变量，成为一个对象的属性。每个对象都有一个constructor属性，它引用了当前对象的构造函数。

• instanceof运算符：用于检查一个对象的具体类型。

• 引用类型：Object、Arrary、Date、Function

• 闭包（closure）：当前作用域总是能访问外部作用于中的变量。因为函数是JS中喂养拥有自身作用域的结构，因此闭包的创建依赖于函数。也可以理解为相关的局部变量在函数调用结束后将会继续存在。

• 基本包装类型：Boolean、Number、String
  使用方法和普通对象一样。

6、原型

• 原型实际上指在构造函数中存在着一个名为原型的（prototype）对象，这个对象中保存着一些属性，凡是通过该构造函数创建的对象都可以访问存在于原型中的属性。
  最典型的原型属性就是toString()函数，实际上我们的对象中并没有定义这个函数，到却可以调用，那是因为这个函数存在于Object对应的原型中。
• 设置原型：原型是一个对象，可以通过构造函数获取原型对象，可以添加删除修改原型中的属性，也可以修改原型对象的引用。
  原型属性只存在于函数对象中，其他对象没有原型属性。
  每一个对象都有原型，包括原型对象也有原型。特殊的是Object的原型对象没有原型。

7、DOM

• DOM，全称Document Object Model，文档对象模型。
  文档：整个HTML网页文档
  对象：将网页中的每一部分都转换成了一个对象
  模型：使用模型来表示对象之间的关系，方便获取对象
• 节点：构成HTML文档最基本的单元。
  ①文档节点（document）：整个HTML文档，网页中的所有节点都是它的子节点。
  document对象作为windows对象的属性存在，不可以直接使用。
  通过该对象可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。
  ②元素节点（element）：HTML中的各类标签，可以通过document方法获取元素节点。如：document.getElementById();
  ③文本节点（text）：HTML标签中的文本内容。获取文本节点时，一般要先获取元素节点，再通过元素节点获取文本节点。如：元素节点.firstChild;获取元素节点中的第一个子节点，一般为文本节点。
  ④属性节点（attr）：元素的属性，即标签中的一个个属性。属性节点并非元素节点的子节点，而是元素节点的一部分。如：元素节点.getAttributeNode("属性名");
• 获取元素节点：通过document对象调用
  getElementById()：通过id属性获取一个元素节点对象
  getElementsByTagName()：通过标签名获取一组元素节点对象
  getElementsByName()：通过name属性获取一组元素节点对象
• 获取元素节点的子节点：通过具体的元素节点调用
  getElementsByTagName()：方法，返回当前节点的指定标签后代节点
  childNodes：属性，标识当前节点的所有子节点
  firstChild：属性，表示当前节点的第一个子节点
  lastChild：属性，标识当前节点的最后一个子节点
• 获取父节点和兄弟节点：通过具体的节点调用
  parentNode：属性，表示当前节点的父节点
  previousSibling：属性，表示当前节点的前一个兄弟节点
  nextSiling：属性，表示当前节点的后一个兄弟节点
• 元素节点的属性
  获取：元素对象.属性名 例：element.value、element.id、element.className
  设置：元素对象.属性名 = 新的值 例：element.value = "hello"
• 其他属性
  nodeValue：文本节点可以通过nodeValue属性获取和设置文本节点内容
  innerHTML：元素节点通过该属性获取和设置标签内部的HTML代码
• 使用css选择器进行查询
  querySelector()和 querySelectorAll()两个方法都是用document对象来调用，方法使用相同，都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。
  querySelector()：只返回找到的第一个元素
  querySelectorAll()：返回所有符合条件的元素
• 节点的修改：主要指对元素节点的操作
  创建节点：document.createElement(标签名)
  删除节点：父节点.removeChild(子节点)
  替换节点：父节点.replaceChild(新节点,旧节点)
  插入节点：父节点.appendChild(子节点)、父节点.insertBefore(新节点,旧节点)

8、事件

• 事件：文档或者浏览器窗口欧发生的一些特定的交互瞬间。JavaScript与HTML之间的交互是通过时间实现的。

• 为一个元素绑定事件处理程序的两种方法：

  • 通过HTML元素指定时间属性来绑定（不推荐使用）
    <button onclick = "alart('hello'); alart('world')">按钮</button>
  • 通过DOM对象指定的属性来绑定

  	var btn = document.getElementById('btn');
  	btn.onclick = function(){
  		alart("hello");
  	};
  

  • 设置事件监听器：前边两种方式只能绑定一个程序，而不能为一个事件绑定多个程序
    元素对象.addEventListener()需要设置两个参数：事件响应字符串、响应函数
    btn.addEventListener('click', fuction(){alart("hello");} );
    使用removeEventListener()和detachEvent()移除事件。

• 事件处理中的this：在事件处理程序内的this所引用的对象即是设定了该事件处理程序的元素。

• 事件对象：在DOM对象上的某个事件被触发时，会产生一个事件对象event，这个对象中包含着所有事件有关的信息，包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
  DOM标准的浏览器会将一个event对象传入到实践的处理程序当中。无论事件处理程序是什么都会传入一个event对象。
  event对象包含与创建它的特定事件有关的属性和方法。
  获取event对象方式，例：btn.onclick = function(event){alert(event.type);};

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

• 事件的触发：事件的发生主要是由用户操作引起的。当指定事件被触发时，浏览器就会调用对应的函数去响应时间，一般情况下事件每触发一次，函数就会执行一次。

• 事件的传播：网页中标签之间存在嵌套关系
  事件的处理分为捕获阶段、目标阶段、事件冒泡三个阶段。
  捕获阶段：这一阶段会从window对象开始向下一直遍历到目标对象，如果发现有对象绑定了响应事件则做出相应的处理。
  目标阶段：这一阶段已经遍历结束，则会执行目标对象上绑定的响应函数。
  冒泡阶段：这一阶段事件的传播方式和捕获阶段正好相反，会从事件目标一直向上便利，直至window对象结束，这是对象上绑定的响应函数也会执行。

• 取消事件传播
  可以使用event对象的两个方法完成：stopPropagation()、stopImmediatePropagation()
  取消默认行为：preventDefault()

9、BOM

• BOM（浏览器对象模型）提供了很多对象，用于访问浏览器的功能，这些与任何网页内容无关.
  BOM将浏览器中的各个部分转换成了一个一个的对象，我们通过修改这些对象的属性，调用它们的方法，从而控制浏览器的各种行为。
• window对象是BOM的核心，它代表一个浏览器的实例。
  在浏览器中我们可以通过window对象来访问操作浏览器，同时window也是作为全局变量存在的。
  全局作用域：window作为浏览器中的全局对象，因此所有在全局中声明的变量、对象、函数都会变成window对象的属性和方法。
• 窗口大小
  网页窗口大小：innerWidth、innerHeigth
  浏览器本身的尺寸：outerWidth、outerHeigth
• 打开窗口：使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。
  该方法需要4个参数：需要加载的URL地址、窗口的目标、一个特性的字符串、是否创建新的历史记录
• 超时调用：setTimeout()，超过一定时间以后执行指定函数，需要两个参数（要执行的内容、超过的时间）
  取消超时调用：clearTimeout()
  超时调用都是在全局作用域中执行的。
• 间歇调用：setInterval()，每隔一段时间执行指定代码，需要两个参数（要执行的代码、间隔的时间）
  取消间隔调用：clearInterval()
• 系统对话框：浏览器通过alert()、confirm()、prompt()方法调用系统对话框向用户显示消息。它们的外观由操作系统及浏览器设置决定，而不由css决定。
  显示系统对话框会导致程序终止，当关闭对话框会恢复执行。
  • alert()方法接受一个字符串并显示给用户。调用 alert()方法会向用户显示一个包含一个确认按钮的对话框。
  • confirm()方法与alert()方法相似，只不过confirm()方法弹出的对话框有一个确认和取消按钮。这个函数的执行会返回一个布尔值true或false。
  • prompt()会弹出一个带输入框的提示框，并可以将用户输入的内容返回。它需要两个值作为参数：显示的提示文字、文本框中的默认值。
• location对象：提供了当前窗口中加载的文档有关信息，还提供了一些导航功能。
  • href属性：可以获取或修改当前页面的完整的URL地址，使浏览器跳转到指定页面。
  • assign()方法：所用和href属性一样，使浏览器跳转页面，新地址错误参数传递到assign()方法中。
  • replace()方法：功能一样，只不过replace()方法跳转地址不会提现到历史记录中。
  • reload()方法：用于强制刷新当前页面。
• navigator对象：包含浏览器版本、浏览器所支持的插件、浏览器所使用的语言等哥终于浏览器相关的信息。可以用navigator的userAgent属性检查用户浏览器版本。
• screen对象：基本上只用来表示客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。
• history对象：保存着用户上网的历史记录，从窗口被打开的那一刻算起。
  • go()方法： 使用go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。
  • back()方法：向后跳转。
  • forward()方法：向前跳转。