3.JavaScript

3.JavaScript

js简介

JS代码需要编写到script标签中

控制浏览器弹出一个 警告框

alert("hello");

在页面中输出一个内容

document.write(“”)向body中输出一个内容

document.write("hello")

向控制台输出一个内容

console.log("hello")

js基本语法

编写位置

• JS代码需要编写到

严格区分大小写

JavaScript是严格区分大小写的。

在编写helloworld时，一定注意区分大小写。

注释

单行注释：//

多行注释：/* */

标识符

所谓标识符，就是指变量、函数、属性的名字，或函数的参数。

• 第一个字符必须是一个字母、下划线（_）或一个美元符号（$）。
• 其他字符可以是字母、下划线、美元符号或数字。
• 标识符不能是关键字和保留字符。

变量

变量的作用是给某一个值或对象标注名称。

所有 JavaScript 变量必须以唯一的名称的标识。

这些唯一的名称称为标识符。

标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

构造变量名称（唯一标识符）的通用规则是：

• 名称可包含字母、数字、下划线和美元符号
• 名称必须以字母开头
• 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
• 名称对大小写敏感（y 和 Y 是不同的变量）
• 保留字（比如 JavaScript 的关键词）无法用作变量名称

提示：JavaScript 标识符对大小写敏感。

变量的声明提前

			/*
			 * 变量的声明提前
			 * 	- 使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），
			 * 		但是如果声明变量时不适用var关键字，则变量不会被声明提前
			 * 
			 * 函数的声明提前
			 * 	- 使用函数声明形式创建的函数 function 函数(){}
			 * 		它会在所有的代码执行之前就被创建，所以我们可以在函数声明前来调用函数
			 * 	   使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用	
			 */
			/*console.log("a = "+a);
			
			var a = 123;*/
			
			//fun();
			
			
			//函数声明，会被提前创建
			function fun(){
				console.log("我是一个fun函数");
			}
			
			//函数表达式，不会被提前创建
			var fun2 = function(){
				console.log("我是fun2函数");
			};
			
			fun2();

LET

全局作用域

全局（在函数之外）声明的变量拥有全局作用域。

var carName = "porsche";

// 此处的代码可以使用 carName

function myFunction() {
  // 此处的代码也可以使用 carName
}

全局变量可以在 JavaScript 程序中的任何位置访问。

函数作用域

局部（函数内）声明的变量拥有函数作用域。

// 此处的代码不可以使用 carName

function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}

// 此处的代码不可以使用 carName

局部变量只能在它们被声明的函数内访问。

JavaScript 块作用域

通过 var 关键词声明的变量没有块作用域。

在块 {} 内声明的变量可以从块之外进行访问。

{ 
  var x = 10; 
}
// 此处可以使用 x

可以使用 let 关键词声明拥有块作用域的变量。

在块 {} 内声明的变量无法从块外访问：

{ 
  let x = 10;
}
// 此处不可以使用 x

重新声明变量

使用 var 关键字重新声明变量会带来问题。

在块中重新声明变量也将重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

使用 let 关键字重新声明变量可以解决这个问题。

在块中重新声明变量不会重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

循环作用域

在循环中使用 var：

var i = 7;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10

在循环中使用 let：

let i = 7;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 7

在第一个例子中，在循环中使用的变量使用 var 重新声明了循环之外的变量。

在第二个例子中，在循环中使用的变量使用 let 并没有重新声明循环外的变量。

如果在循环中用 let 声明了变量 i，那么只有在循环内，变量 i 才是可见的。

函数作用域

在函数内声明变量时，使用 var 和 let 很相似。

它们都有函数作用域：

function myFunction() {
  var carName = "porsche";   // 函数作用域
}
function myFunction() {
  let carName = "porsche";   // 函数作用域
}

全局作用域

如果在块外声明声明，那么 var 和 let 也很相似。

它们都拥有全局作用域：

var x = 10;       // 全局作用域
let y = 6;       // 全局作用域

HTML 中的全局变量

使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。

在 HTML 中，全局作用域是 window 对象。

通过 var 关键词定义的全局变量属于 window 对象：

var carName = "porsche";
// 此处的代码可使用 window.carName

通过 let 关键词定义的全局变量不属于 window 对象：

let carName = "porsche";
// 此处的代码不可使用 window.carName

重新声明

允许在程序的任何位置使用 var 重新声明 JavaScript 变量：

var x = 10;

// 现在，x 为 10
 
var x = 6;

// 现在，x 为 6

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的：

var x = 10;       // 允许
let x = 6;       // 不允许

{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的：

let x = 10;       // 允许
let x = 6;       // 不允许

{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}

在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的：

let x = 10;       // 允许
var x = 6;       // 不允许

{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}

在不同的作用域或块中，通过 let 重新声明变量是允许的：

let x = 6;       // 允许

{
  let x = 7;   // 允许
}

{
  let x = 8;   // 允许
}

通过 var 声明的变量会提升到顶端。如果您不了解什么是提升（Hoisting），请学习我们的提升这一章。

您可以在声明变量之前就使用它：

// 在此处，您可以使用 carName
var carName;

通过 let 定义的变量不会被提升到顶端。

在声明 let 变量之前就使用它会导致 ReferenceError。

变量从块的开头一直处于“暂时死区”，直到声明为止：

// 在此处，您不可以使用 carName
let carName;

Const

ES6 引入了两个重要的 JavaScript 新关键词：let 和 const。

通过 const 定义的变量与 let 变量类似，但不能重新赋值：

const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

块作用域

在块作用域内使用 const 声明的变量与 let 变量相似。

在本例中，x 在块中声明，不同于在块之外声明的 x：

var x = 10;
// 此处，x 为 10
{ 
  const x = 6;
  // 此处，x 为 6
}
// 此处，x 为 10

在声明时赋值

JavaScript const 变量必须在声明时赋值：

不正确

const PI;
PI = 3.14159265359;

正确

const PI = 3.14159265359;

不是真正的常数

关键字 const 有一定的误导性。

它没有定义常量值。它定义了对值的常量引用。

因此，我们不能更改常量原始值，但我们可以更改常量对象的属性。

原始值

如果我们将一个原始值赋给常量，我们就不能改变原始值：

const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

常量对象可以更改

您可以更改常量对象的属性：

// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：
car.color = "White";

// 您可以添加属性：
car.owner = "Bill";

常量数组可以更改

您可以更改常量数组的元素：

// 您可以创建常量数组：
const cars = ["Audi", "BMW", "porsche"];

// 您可以更改元素：
cars[0] = "Honda";

// 您可以添加元素：
cars.push("Volvo");

运算符

赋值运算符（=）把值赋给变量。

加法运算符（+）对数字相加：

乘法运算符（*）对数字相乘：

算数运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（余数）
++	递加
–	递减

赋值运算符

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

加法赋值运算符（+=）向变量添加一个值。

字符串运算符

+ 运算符也可用于对字符串进行相加（concatenate，级联）。

x = 7 + 8;
y = "7" + 8;
z = "Hello" + 7;

x、y 和 z 的结果将是：

15
78
Hello7

比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

逻辑运算符

运算符	描述
&&	逻辑与
||	逻辑或
!	逻辑非

类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

位运算符

位运算符处理 32 位数。

该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
|	或	5 | 1	0101 | 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

上例使用 4 位无符号的例子。但是 JavaScript 使用 32 位有符号数。

因此，在 JavaScript 中，~ 5 不会返回 10，而是返回 -6。

~00000000000000000000000000000101 将返回 11111111111111111111111111111010。

数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

拥有动态类型

JavaScript 拥有动态类型。这意味着相同变量可用作不同类型：

var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

Undefined 与 Null 的区别

Undefined 与 null 的值相等，但类型不相等：

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

复杂数据

typeof 运算符可返回以下两种类型之一：

• function
• object

typeof 运算符把对象、数组或 null 返回 object。

typeof 运算符不会把函数返回 object。

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array"，参见下面的注释)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

typeof 运算符把数组返回为 “object”，因为在 JavaScript 中数组即对象。

函数

函数也是一个对象。function

函数中可以封装一些功能，在需要时可以执行这些功能。

函数中可以保存一些代码在需要的时候调用。

使用typeof检查一个函数对象时，会返回function。

可以将封装的代码以字符串的形式传递给构造函数。

var fun = new Function();

封装到函数中的代码不会立即执行。

函数中的代码会在函数调用时执行。

调用函数语法：函数对象（）。

fun()

使用 函数声明 来创建一个函数：

语法：

function 函数名([形参1,形参2…形参N]){

语句…

}

			function fun2(){
				console.log("这是我的第二个函数~~~");
				alert("哈哈哈哈哈");
				document.write("~~~~(>_<)~~~~");
			}
			//console.log(fun2);
			//调用fun2
			//fun2();

			
			/*
			 * 使用 函数表达式 来创建一个函数
			 * var 函数名  = function([形参1,形参2...形参N]){
			 * 	 语句....
			 *  }
			 */

			var fun3 = function(){
				console.log("我是匿名函数中封装的代码");
			};
			
			
			fun3();

函数语法

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

圆括号可包括由逗号分隔的参数：

(参数 1, 参数 2, ...)

由函数执行的代码被放置在花括号中：{}

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

*函数参数（Function parameters）*是在函数定义中所列的名称。

函数参数（Function arguments）是当调用函数时由函数接收的真实的值。

在函数中，参数是局部变量。

在其他编程语言中，函数近似程序（Procedure）或子程序（Subroutine）。

函数调用

函数中的代码将在其他代码调用该函数时执行：

• 当事件发生时（当用户点击按钮时）
• 当 JavaScript 代码调用时
• 自动的（自调用）

您将在本教程中学到更多有关函数调用的知识。

函数的参数

形参和实参。

实参可以是任意的数据类型，也可以是一个对象；

当我们的参数过多时，可以将参数封装到一个对象中，然后通过对象传递。

			function sayHello(o){
				
				//console.log("o = "+o);
				console.log("我是"+o.name+",今年我"+o.age+"岁了,"+"我是一个"+o.gender+"人"+",我住在"+o.address);
			}
			
			//sayHello("猪八戒",28,"高老庄","男");
			//创建一个对象
			var obj = {
				name:"孙悟空",
				age:18,
				address:"花果山",
				gender:"男"
				
			};
			
			//sayHello(obj);

实参可以是一个对象，也可以是一个函数

			function fun(a){
				console.log("a = "+a);
				//a(obj);
			}
			
			//fun(sayHello);
			
			//fun(function(){alert("hello")});

			/*
			 * 定义一个用来求两个数和的函数
			 * 	可以在函数的()中来指定一个或多个形参（形式参数）
			 * 	多个形参之间使用,隔开，声明形参就相当于在函数内部声明了对应的变量
			 * 	但是并不赋值
			 */
			function sum(a,b){
				console.log("a = "+a);
				console.log("b = "+b);
				console.log(a+b);
			}
			
			/*
			 * 在调用函数时，可以在()中指定实参（实际参数）
			 * 	实参将会赋值给函数中对应的形参
			 */
			/*sum(1,2);
			sum(123,456);*/
			
			/*
			 * 调用函数时解析器不会检查实参的类型,
			 * 	所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查
			 * 函数的实参可以是任意的数据类型
			 */
			//sum(123,"hello");
			//sum(true , false);
			
			/*
			 * 调用函数时，解析器也不会检查实参的数量
			 * 	多余实参不会被赋值
			 * 如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined
			 * 
			 */
			//sum(123,456,"hello",true,null);
			sum(123);

函数返回

当 JavaScript 到达 return 语句，函数将停止执行。

如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。

函数通常会计算出返回值。这个返回值会返回给调用者：

计算两个数的乘积，并返回结果：

var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

x 的结果将是：

56

返回值的类型

返回值可以是任意的数据类型，也可以是一个对象，也可以是一个函数。

			function fun2(){
				
				//返回一个对象
				return {name:"沙和尚"};
			}
			
			var a = fun2();
			
			//console.log("a = "+a);
			
			function fun3(){
				//在函数内部再声明一个函数
				function fun4(){
					alert("我是fun4");
				}
				
				//将fun4函数对象作为返回值返回
				return fun4;
			}
			
			a = fun3();
			//console.log(a);
			//a();
			fun3()();

立即执行函数

			//函数对象()
			/*
			 * 立即执行函数
			 * 	函数定义完，立即被调用，这种函数叫做立即执行函数
			 * 	立即执行函数往往只会执行一次
			 */
			/*(function(){
				alert("我是一个匿名函数~~~");
			})();*/
			
			(function(a,b){
				console.log("a = "+a);
				console.log("b = "+b);
		})(123,456);

局部变量

在 JavaScript 函数中声明的变量，会成为函数的局部变量。

局部变量只能在函数内访问。

// 此处的代码不能使用 carName

function myFunction() {
    var carName = "Volvo";
    // 此处的代码可以使用 carName
}

// 此处的代码不能使用 carName

函数的方法

		<script type="text/javascript">
			function fun(a,b) {
				console.log("a = "+a);
				console.log("b = "+b);
				//alert(this);
			}
			
			var obj = {
				name: "obj",
				sayName:function(){
					alert(this.name);
				}
			};

			/*
			 * call()和apply()
			 * 	- 这两个方法都是函数对象的方法，需要通过函数对象来调用
			 * 	- 当对函数调用call()和apply()都会调用函数执行
			 * 	- 在调用call()和apply()可以将一个对象指定为第一个参数
			 * 		此时这个对象将会成为函数执行时的this
			 * 	- call()方法可以将实参在对象之后依次传递
			 * 	- apply()方法需要将实参封装到一个数组中统一传递
			 * 
			 * 	- this的情况：
			 * 		1.以函数形式调用时，this永远都是window
			 * 		2.以方法的形式调用时，this是调用方法的对象
			 * 		3.以构造函数的形式调用时，this是新创建的那个对象
			 * 		4.使用call和apply调用时，this是指定的那个对象
			 */
			
			//fun.call(obj,2,3);
			fun.apply(obj,[2,3]);

			

			var obj2 = {
				name: "obj2"
			};

			/*fun.apply();
			fun.call();
			fun();*/

			//fun.call(obj);
			//fun.apply(obj);

			//fun();
			
			//obj.sayName.apply(obj2);
		</script>

arguments隐含参数

		<script type="text/javascript">
			/*
			 * 在调用函数时，浏览器每次都会传递进两个隐含的参数：
			 * 	1.函数的上下文对象 this
			 * 	2.封装实参的对象 arguments
			 * 		- arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度
			 * 		- 在调用函数时，我们所传递的实参都会在arguments中保存
			 * 		- arguments.length可以用来获取实参的长度
			 * 		- 我们即使不定义形参，也可以通过arguments来使用实参，
			 * 			只不过比较麻烦
			 * 			arguments[0] 表示第一个实参
			 * 			arguments[1] 表示第二个实参 。。。
			 *		- 它里边有一个属性叫做callee，
			 * 			这个属性对应一个函数对象，就是当前正在指向的函数的对象
			 * 		
			 */
			
			function fun(a,b){
				//console.log(arguments instanceof Array);
				//console.log(Array.isArray(arguments));
				//console.log(arguments[1]);
				//console.log(arguments.length);
				console.log(arguments.callee == fun);
			}
			
			fun("hello",true);
			
		</script>

对象

对象属性

（JavaScript 对象中的）名称:值对被称为属性 Object。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

属性	属性值
firstName	Bill
lastName	Gates
age	62
eyeColor	blue

对象的属性值可以是任何的数据类型，也可以是个函数

函数也可以称为对象的属性，如果一个函数作为一个对象的属性保存，那么我们称这个函数时这个对象的方法，调用这个函数就说调用对象的方法（method），但是它只是名称上的区别没有其他的区别。

			/*
			 * 创建一个对象
			 */
			var obj = new Object();
			
			//向对象中添加属性
			obj.name = "孙悟空";
			obj.age = 18;
			
			//对象的属性值可以是任何的数据类型，也可以是个函数
			obj.sayName = function(){
				console.log(obj.name);
			};
			
			function fun(){
				console.log(obj.name);
			};
			
			//console.log(obj.sayName);
			//调方法
			obj.sayName();
			//调函数
			//fun();

			var obj2 = {
				
				name:"猪八戒",
				age:18,
				sayName:function(){
					console.log(obj2.name);
				}
				
			};
			
			obj2.sayName();

枚举对象中的属性

			//使用for ... in 语句
			/*
			 * 语法：
			 * 	for(var 变量 in 对象){
			 * 	
			 *  }
			 * 
			 * for...in语句 对象中有几个属性，循环体就会执行几次
			 * 	每次执行时，会将对象中的一个属性的名字赋值给变量
			 */
			
			for(var n in obj){
				console.log("属性名:"+n);
				
				console.log("属性值:"+obj[n]);
			}

创建对象

构造函数constructor

var obj = new Object();

使用工厂方法创建对象，通过该方法可以大批量的创建对象

			function createPerson(name , age ,gender){
				//创建一个新的对象 
				var obj = new Object();
				//向对象中添加属性
				obj.name = name;
				obj.age = age;
				obj.gender = gender;
				obj.sayName = function(){
					alert(this.name);
				};
				//将新的对象返回
				return obj;
			}

			/*
			 * 用来创建狗的对象
			 */
			function createDog(name , age){
				var obj = new Object();
				obj.name = name;
				obj.age = age;
				obj.sayHello = function(){
					alert("汪汪~~");
				};
				
				return obj;
			}

			var obj2 = createPerson("猪八戒",28,"男");
			var obj3 = createPerson("白骨精",16,"女");
			var obj4 = createPerson("蜘蛛精",18,"女");

使用工厂方法创建的对象，使用的构造函数都是Object

所以创建的对象都是Object这个类型，就导致我们无法区分出多种不同类型的对象

			//创建一个狗的对象
			var dog = createDog("旺财",3);
			
			console.log(dog);
			console.log(obj4);

构造函数

创建一个构造函数，专门用来创建Person对象的

构造函数就是一个普通的函数，创建方式和普通函数没有区别

不同的是构造函数习惯上首字母大写

构造函数和普通函数的区别就是调用方式的不同

普通函数是直接调用，而构造函数需要使用new关键字来调用

构造函数的执行流程：

1.立刻创建一个新的对象

2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象

3.逐行执行函数中的代码

4.将新建的对象作为返回值返回

			function Person(name , age , gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
				this.sayName = function(){
					alert(this.name);
				};
			}
			
			function Dog(){
				
			}

			var per = new Person("孙悟空",18,"男");
			var per2 = new Person("玉兔精",16,"女");
			var per3 = new Person("奔波霸",38,"男");
			
			var dog = new Dog();
			
			/*console.log(per);
			console.log(dog);*/

			/*
			 * 使用instanceof可以检查一个对象是否是一个类的实例
			 * 	语法：
			 * 		对象 instanceof 构造函数
			 * 如果是，则返回true，否则返回false
			 */
			//console.log(per instanceof Person);
			//console.log(dog instanceof Person);
			
			/*
			 * 所有的对象都是Object的后代，
			 * 	所以任何对象和Object左instanceof检查时都会返回true
			 */
			//console.log(dog instanceof Object);

添加对象属性

			//向obj中添加一个name属性
			obj.name = "孙悟空";
			//向obj中添加一个gender属性
			obj.gender = "男";
			//向obj中添加一个age属性
			obj.age = 18;

读取对象属性

console.log(obj.gender);

修改对象属性值

obj.name = "tom";

删除对象属性

delete obj.name;

属性名

对象的属性名不强制要求遵守标识符的规范。

但是我们使用是还是尽量按照标识符的规范去做。

如果要使用特殊的属性名，不能采用.的方式来操作需要使用另一种方式：

​ * 语法：对象[“属性名”] = 属性值

​ * 读取时也需要采用这种方式

​ * 使用[]这种形式去操作属性，更加的灵活，

​ * 在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性

			obj["123"] = 789;
			obj["nihao"] = "你好";
			var n = "nihao";

属性值

JS对象的属性值，可以是任意的数据类型，甚至也可以是一个对象。

			obj.test = true;
			obj.test = null;
			obj.test = undefined;
			
			//创建一个对象
			var obj2 = new Object();
			obj2.name = "猪八戒";
			
			//将obj2设置为obj的属性
			obj.test = obj2;
			
			//console.log(obj.test.name);

原型

prototype

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype

这个属性对应着一个对象，这个对象就是我们所谓的原型对象

如果函数作为普通函数调用prototype没有任何作用

当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，

指向该构造函数的原型对象，我们可以通过__proto__来访问该属性

			function MyClass(){
				
			}
			
			//向MyClass的原型中添加属性a
			MyClass.prototype.a = 123;
			
			//向MyClass的原型中添加一个方法
			MyClass.prototype.sayHello = function(){
				alert("hello");
			};
			
			var mc = new MyClass();
			
			var mc2 = new MyClass();
			
			//console.log(MyClass.prototype);
			//console.log(mc2.__proto__ == MyClass.prototype);
			
			//向mc中添加a属性
			mc.a = "我是mc中的a";
			
			//console.log(mc2.a);
			
			mc.sayHello();

in 运算符

通过该运算符可以检查一个对象中是否含有指定的属性

如果有则返回true，没有则返回false

语法：“属性名” in 对象

console.log("name" in obj);

使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true

​ //console.log(“name” in mc);

可以使用对象的**hasOwnProperty()**来检查对象自身中是否含有该属性

使用该方法只有当对象自身中含有属性时，才会返回true

​ //console.log(mc.hasOwnProperty(“age”));

​ //console.log(mc.hasOwnProperty(“hasOwnProperty”));

tostring

			function Person(name , age , gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
			}
			
			//修改Person原型的toString
			Person.prototype.toString = function(){
				return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
			};
			
			
			//创建一个Person实例
			var per = new Person("孙悟空",18,"男");
			var per2 = new Person("猪八戒",28,"男");
			
			//当我们直接在页面中打印一个对象时，事件上是输出的对象的toString()方法的返回值
			//如果我们希望在输出对象时不输出[object Object]，可以为对象添加一个toString()方法
			//Person[name=孙悟空,age=18,gender=男]
			/*per.toString = function(){
				return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
			};*/
			
			var result = per.toString();
			//console.log("result = " + result);
			//console.log(per.__proto__.__proto__.hasOwnProperty("toString"));
			console.log(per2);
			console.log(per);

基本数据类型和引用数据类型

JS中的变量都是保存到栈内存中的，基本数据类型的值直接在栈内存中存储，值与值之间是独立存在，修改一个变量不会影响其他的变量。

对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响。

			var a = 123;
			var b = a;
			a++;
			
			/*console.log("a = "+a);
			console.log("b = "+b);*/
			
			var obj = new Object();
			obj.name = "孙悟空";
			
			var obj2 = obj;
			
			//修改obj的name属性
			obj.name = "猪八戒";
			
			
			
			/*console.log(obj.name);
			console.log(obj2.name);*/
			
			//设置obj2为null
			obj2 = null;
			
			/*console.log(obj);
			console.log(obj2);*/

当比较两个基本数据类型的值时，就是比较值。

而比较两个引用数据类型时，它是比较的对象的内存地址，如果两个对象是一摸一样的，但是地址不同，它也会返回false。

			var c = 10;
			var d = 10;
			//console.log(c == d);
			
			var obj3 = new Object();
			var obj4 = new Object();
			obj3.name = "沙和尚";
			obj4.name = "沙和尚";
			
			/*console.log(obj3);
			console.log(obj4);*/

			console.log(obj3 == obj4);

对象字面量

使用对象字面量，可以在创建对象时，直接指定对象中的属性

语法：{属性名:属性值,属性名:属性值…}

对象字面量的属性名可以加引号也可以不加，建议不加

如果要使用一些特殊的名字，则必须加引号

属性名和属性值是一组一组的名值对结构，名和值之间使用:连接，多个名值对之间使用,隔开，如果一个属性之后没有其他的属性了，就不要写

Date对象

		<script type="text/javascript">
			
			/*
			 * Date对象
			 * 	- 在JS中使用Date对象来表示一个时间
			 */
			
			//创建一个Date对象
			//如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
			var d = new Date();
			
			//创建一个指定的时间对象
			//需要在构造函数中传递一个表示时间的字符串作为参数
			//日期的格式  月份/日/年 时:分:秒
			var d2 = new Date("2/18/2011 11:10:30");
			
			/*
			 * getDate()
			 * 	- 获取当前日期对象是几日
			 */
			var date = d2.getDate();
			/*
			 * getDay()
			 * 	- 获取当前日期对象时周几
			 * 	- 会返回一个0-6的值
			 * 		0 表示周日
			 * 		1表示周一
			 * 		。。。
			 */
			var day = d2.getDay();
			
			/*
			 * getMonth()
			 * d2 = new Date("12/18/2011 11:10:30");
			 * - 获取当前时间对象的月份
			 * 	- 会返回一个0-11的值
			 * 		0 表示1月
			 * 		1 表示2月
			 * 		11 表示12月
			 */
			var month = d2.getMonth();
			
			/*
			 * getFullYear()
			 * 	- 获取当前日期对象的年份
			 */
			var year = d2.getFullYear();
			
			//console.log(d2);
			//console.log("date = "+date);
			//console.log("day = "+day);
			//console.log("month = "+month);
			//console.log(year);
			
			/*
			 * getTime()
			 * 	- 获取当前日期对象的时间戳
			 * 	- 时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒
			 * 		到当前日期所花费的毫秒数（1秒 = 1000毫秒）
			 * 	- 计算机底层在保存时间时使用都是时间戳
			 */
			
			var time = d2.getTime();
			
			//console.log(time/1000/60/60/24/365);
			
			/*var d3 = new Date("1/1/1970 0:0:0");
			time = d3.getTime();
			console.log(time);*/
			
			//利用时间戳来测试代码的执行的性能
			//获取当前的时间戳
			var start = Date.now();
			
			for(var i=0 ; i<100 ; i++){
				console.log(i);
			}
			
			var end = Date.now();
			
			
			console.log("执行了："+(end - start)+"毫秒");
			
			
		</script>

Math内置对象

		<script type="text/javascript">
			/*
			 * Math
			 * 	- Math和其他的对象不同，它不是一个构造函数，
			 * 		它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法
			 * 	- 比如
			 * 		Math.PI 表示的圆周率
			 */
			
			//console.log(Math.PI);
			
			/*
			 * abs()可以用来计算一个数的绝对值
			 */
			//console.log(Math.abs(-1));
			
			/*
			 * Math.ceil()
			 * 	- 可以对一个数进行向上取整，小数位只有有值就自动进1
			 * Math.floor()
			 * 	- 可以对一个数进行向下取整，小数部分会被舍掉
			 * Math.round()
			 * 	- 可以对一个数进行四舍五入取整
			 */
			//console.log(Math.ceil(1.1));
			//console.log(Math.floor(1.99));
			//console.log(Math.round(1.4));
			
			/*
			 * Math.random()
			 * 	- 可以用来生成一个0-1之间的随机数
			 *  - 生成一个0-10的随机数
			 * 	- 生成一个0-x之间的随机数
			 * 		Math.round(Math.random()*x)
			 * 
			 * 	- 生成一个1-10
			 * 	- 生成一个x-y之间的随机数
			 * 		Math.round(Math.random()*(y-x)+x)
			 */
			/*for(var i=0 ; i<100 ; i++){
				//console.log(Math.round(Math.random()*10));
				//console.log(Math.round(Math.random()*20));
				
				//console.log(Math.round(Math.random()*9)+1);
				//console.log(Math.round(Math.random()*8)+2);
				
				//生成1-6之间的随机数
				console.log(Math.round(Math.random()*5+1));
			}*/
			
			/*
			 * max() 可以获取多个数中的最大值
			 * min() 可以获取多个数中的最小值
			 */
			
			var max = Math.max(10,45,30,100);
			var min = Math.min(10,45,30,100);
			//console.log(min);
			
			/*
			 * Math.pow(x,y)
			 * 	返回x的y次幂
			 */
			
			//console.log(Math.pow(12,3));
			
			/*
			 * Math.sqrt()
			 *  用于对一个数进行开方运算
			 */
			console.log(Math.sqrt(2));
			
		</script>

数组

array

数组也是一个对象

数组是一种特殊的变量，它能够一次存放一个以上的值。

创建数组

使用数组文本是创建 JavaScript 数组最简单的方法。

语法：

var array-name = [item1, item2, ...];

实例

var cars = ["Saab", "Volvo", "BMW"];

使用 JavaScript 关键词 new

var cars = new Array("Saab", "Volvo", "BMW");

访问数组元素

我们通过引用*索引号（下标号）*来引用某个数组元素。

这条语句访问 cars 中的首个元素的值：

var name = cars[0];

这条语句修改 cars 中的首个元素：

cars[0] = "Opel";

实例

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0]; 

改变数组元素

这条语句修改了 cars 中第一个元素的值：

cars[0] = "Opel";

实例

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

访问完整数组

通过 JavaScript，可通过引用数组名来访问完整数组：

如果读取不存在的索引，他不会报错而是返回undefined

实例

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars; 

length 属性

length 属性返回数组的长度（数组元素的数目）。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // fruits 的长度是 4

数组字面量

			//创建一个数组
			//var arr = new Array();
			
			//使用字面量来创建数组
			//语法:[]
			//var arr = [];
			
			//console.log(typeof arr);
			
			//使用字面量创建数组时，可以在创建时就指定数组中的元素
			var arr = [1,2,3,4,5,10];
			
			//console.log(arr[3]);
			
			//使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作文构造函数的参数传递
			//元素之间使用,隔开
			var arr2 = new Array(10,20,30);
			//console.log(arr2);
			
			//创建一个数组数组中只有一个元素10
			arr = [10];
			
			//创建一个长度为10的数组
			arr2 = new Array(10);
			
			//console.log(arr2.length);
			//数组中的元素可以是任意的数据类型
			arr = ["hello",1,true,null,undefined];
			
			//也可以是对象
			var obj = {name:"孙悟空"};
			arr[arr.length] = obj;
			arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];
			
			//也可以是一个函数
			arr = [function(){alert(1)},function(){alert(2)}];
			
			//console.log(arr);
			//arr[0]();
			
			//数组中也可以放数组，如下这种数组我们称为二维数组
			arr = [[1,2,3],[3,4,5],[5,6,7]];
			console.log(arr[1]);

数组方法

Popping

pop() 方法从数组中删除最后一个元素：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

pop() 方法返回“被弹出”的值：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"

Pushing

push() 方法（在数组结尾处）向数组添加一个新的元素：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

push() 方法返回新数组的长度：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  x 的值是 5

位移元素shift

位移与弹出等同，但处理首个元素而不是最后一个。

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

shift() 方法返回被“位移出”的字符串：

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：

unshift() 方法返回新数组的长度。

更改元素

通过使用它们的索引号来访问数组元素：

数组*索引（下标）*以 0 开始。[0] 是第一个数组元素，[1] 是第二个，[2] 是第三个 …

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // 把 fruits 的第一个元素改为 "Kiwi"

length 属性提供了向数组追加新元素的简易方法：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"

删除元素delete

既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

拼接数组splice

splice() 方法可用于向数组添加新项：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组：

通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

第一个参数（0）定义新元素应该被添加（接入）的位置。

第二个参数（1）定义应该删除多个元素。

其余参数被省略。没有新元素将被添加。

			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			
			/*
			 * slice()
			 * 	- 可以用来从数组提取指定元素
			 * 	- 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
			 * 	- 参数：
			 * 		1.截取开始的位置的索引,包含开始索引
			 * 		2.截取结束的位置的索引,不包含结束索引
			 * 			- 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
			 * 		- 索引可以传递一个负值，如果传递一个负值，则从后往前计算
			 * 			-1 倒数第一个
			 * 			-2 倒数第二个
			 */
			
			var result = arr.slice(1,4);
			
			result = arr.slice(3);
			
			result = arr.slice(1,-2);
			
			//console.log(result);

裁剪数组slice

slice() 方法用数组的某个片段切出新数组。

本例从数组元素 1 （“Orange”）开始切出一段数组：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1); 

slice() 方法创建新数组。它不会从源数组中删除任何元素。

slice() 可接受两个参数，比如 (1, 3)。

			/*
			 * splice()
			 * 	- 可以用于删除数组中的指定元素
			 * 	- 使用splice()会影响到原数组，会将指定元素从原数组中删除
			 * 		并将被删除的元素作为返回值返回
			 * 	- 参数：
			 * 		第一个，表示开始位置的索引
			 * 		第二个，表示删除的数量
			 * 		第三个及以后。。
			 * 			可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
			 * 	
			 */
			
			arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			var result = arr.splice(3,0,"牛魔王","铁扇公主","红孩儿");
			
			console.log(arr);
			//console.log(result);

数组的遍历

			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			
			//所谓的遍历数组，就是将数组中所有的元素都取出来
			/*console.log(arr[0]);
			console.log(arr[1]);
			console.log(arr[2]);
			console.log(arr[3]);*/
			
			for(var i=0 ; i<arr.length ; i++){
				console.log(arr[i]);
			}

foreach

			/*
			 * 一般我们都是使用for循环去遍历数组，
			 * 	JS中还为我们提供了一个方法，用来遍历数组
			 * forEach()
			 * 		- 这个方法只支持IE8以上的浏览器
			 * 			IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach
			 * 			还是使用for循环来遍历
			 */
			
			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			
			/*
			 * forEach()方法需要一个函数作为参数
			 * 	- 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
			 * 	- 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
			 * 		以实参的形式传递进来，我们可以来定义形参，来读取这些内容
			 * 	- 浏览器会在回调函数中传递三个参数：
			 * 		第一个参数，就是当前正在遍历的元素
			 * 		第二个参数，就是当前正在遍历的元素的索引
			 * 		第三个参数，就是正在遍历的数组
			 * 		
			 */
			arr.forEach(function(value , index , obj){
				console.log(value);
			});

数组的剩余方法

		<script type="text/javascript">
			
			var arr = ["孙悟空","猪八戒","沙和尚"];
			var arr2 = ["白骨精","玉兔精","蜘蛛精"];
			var arr3 = ["二郎神","太上老君","玉皇大帝"];
			
			/*
			 * concat()可以连接两个或多个数组，并将新的数组返回
			 * 	- 该方法不会对原数组产生影响
			 */
			var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主");
			
			/*
			 * join()
			 * 	- 该方法可以将数组转换为一个字符串
			 * 	- 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
			 * 	- 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
			 * 		如果不指定连接符，则默认使用,作为连接符
			 */
			arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
			
			result = arr.join("@-@");
			/*
			 * reverse()
			 * 	- 该方法用来反转数组（前边的去后边，后边的去前边）
			 * 	- 该方法会直接修改原数组
			 */
			
			arr.reverse();
			
			//console.log(arr);
			
			arr = ["b","d","e","a","c"];
			
			/*
			 * sort()
			 * 	- 可以用来对数组中的元素进行排序
			 * 	- 也会影响原数组，默认会按照Unicode编码进行排序
			 */
			arr.sort();
			//arr.reverse();
			
			/*
			 * 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，
			 * 	所以对数字进排序时，可能会得到错误的结果。
			 * 
			 * 我们可以自己来指定排序的规则
			 * 	我们可以在sort()添加一个回调函数，来指定排序规则，
			 * 		回调函数中需要定义两个形参,
			 * 		浏览器将会分别使用数组中的元素作为实参去调用回调函数
			 * 		使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
			 * 	- 浏览器会根据回调函数的返回值来决定元素的顺序，
			 * 		如果返回一个大于0的值，则元素会交换位置
			 * 		如果返回一个小于0的值，则元素位置不变
			 * 		如果返回一个0，则认为两个元素相等，也不交换位置
			 * 
			 * 	- 如果需要升序排列，则返回 a-b
			 * 		如果需要降序排列，则返回b-a
			 */
			arr = [5,4,2,1,3,6,8,7];
			
			arr.sort(function(a,b){
				
				//前边的大
				/*if(a > b){
					return -1;
				}else if(a < b){
					return 1;
				}else{
					return 0;
				}*/
				
				//升序排列
				//return a - b;
				
				//降序排列
				return b - a;
				
			});
			
			console.log(arr);
			
		</script>

作用域

在 JavaScript 中有两种作用域类型：

• 局部作用域
• 全局作用域

JavaScript 拥有函数作用域：每个函数创建一个新的作用域。

作用域决定了这些变量的可访问性（可见性）。

函数内部定义的变量从函数外部是不可访问的（不可见的）。

局部 JavaScript 变量

在 JavaScript 函数中声明的变量，会成为函数的局部变量。

局部变量的作用域是局部的：只能在函数内部访问它们。

// 此处的代码不能使用 carName 变量

function myFunction() {
    var carName = "porsche";

    // 此处的代码能使用 carName 变量

}

全局 JavaScript 变量

函数之外声明的变量，会成为全局变量。

全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。

var carName = " porsche";


// 此处的代码能够使用 carName 变量

function myFunction() {

    // 此处的代码也能够使用 carName 变量

}

JavaScript 变量

在 JavaScript 中，对象和函数也是变量。

作用域决定了从代码不同部分对变量、对象和函数的可访问性。

自动全局

如果您为尚未声明的变量赋值，此变量会自动成为全局变量。

这段代码将声明一个全局变量 carName，即使在函数内进行了赋值。

myFunction();


// 此处的代码能够使用 carName 变量

function myFunction() {
    carName = "porsche";
}

			/*
			 * 作用域
			 * 	- 作用域指一个变量的作用的范围
			 * 	- 在JS中一共有两种作用域：
			 * 		1.全局作用域
			 * 			- 直接编写在script标签中的JS代码，都在全局作用域
			 * 			- 全局作用域在页面打开时创建，在页面关闭时销毁
			 * 			- 在全局作用域中有一个全局对象window，
			 * 				它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用
			 * 			- 在全局作用域中：
			 * 				创建的变量都会作为window对象的属性保存
			 * 				创建的函数都会作为window对象的方法保存
			 * 			- 全局作用域中的变量都是全局变量，
			 * 				在页面的任意的部分都可以访问的到
			 * 
			 * 		2.函数作用域
			 * 
			 */
			
			var a = 10;
			var b = 20;
			//var c = "hello";
			
			//console.log(window.c);
			
			function fun(){
				console.log("我是fun函数");
			}
			
			//window.fun();
			
			//window.alert("hello");

函数作用域

			/*
			 * 函数作用域	
			 * 	- 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
			 * 	- 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
			 * 	- 在函数作用域中可以访问到全局作用域的变量
			 * 		在全局作用域中无法访问到函数作用域的变量
			 * 	- 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用
			 * 		如果没有则向上一级作用域中寻找，直到找到全局作用域，
			 * 		如果全局作用域中依然没有找到，则会报错ReferenceError
			 * 	- 在函数中要访问全局变量可以使用window对象
			 */
			
			//创建一个变量
			var a = 10;
			
			function fun(){
				
				var a = "我是fun函数中的变量a";
				var b = 20;
				
				//console.log("a = "+a);
				
				function fun2(){
					console.log("a = "+window.a);
				}
				
				fun2();
				
			}
			
			//fun();
			//console.log("b = "+b);



			var c = 33;
			
			/*
			 * 在函数中，不适用var声明的变量都会成为全局变量
			 */
			function fun5(){
				//console.log("c = "+c);
				//c = 10;
				
				//d没有使用var关键字，则会设置为全局变量
				d = 100;
			}
			
			fun5();
			
			//在全局输出c
			//console.log("d = "+d);
			
			var e = 23;
			
			/*
			 * 定义形参就相当于在函数作用域中声明了变量
			 */
			function fun6(e){
				alert(e);
			}
			
			fun6();

this

解析器在调用函数每次都会向函数内部传递进一个隐含的参数

这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的 上下文对象

根据函数的调用方式的不同，this会指向不同的对象

1.以函数的形式调用时，this永远都是window

2.以方法的形式调用时，this就是调用方法的那个对象

			function fun(){
				//console.log("a = "+a+", b = "+b);
				console.log(this.name);
			}
			
			//fun();
			
			//创建一个对象
			var obj = {
				name:"孙悟空",
				sayName:fun
			};
			
			var obj2 = {
				name:"沙和尚",
				sayName:fun
			};
			
			//console.log(obj.sayName == fun);
			var name = "全局的name属性";
			//obj.sayName();
			//以函数形式调用，this是window
			//fun();
			
			//以方法的形式调用，this是调用方法的对象
			//obj.sayName();
			obj2.sayName();

			//创建一个name变量
			var name = "全局";
			
			//创建一个fun()函数
			function fun(){
				console.log(this.name);
			}
			
			//创建两个对象
			var obj = {
					name:"孙悟空",
					sayName:fun
			};
			
			var obj2 = {
					name:"沙和尚",
					sayName:fun
			};
			
			//我们希望调用obj.sayName()时可以输出obj的名字
			//obj.sayName();
			
			obj.sayName();

事件

下面是一些常见的 HTML 事件：

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

JavaScript 能够做什么？

事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：

• 每当页面加载时应该做的事情
• 当页面被关闭时应该做的事情
• 当用户点击按钮时应该被执行的动作
• 当用户输入数据时应该被验证的内容
• 等等

让 JavaScript 处理事件的不同方法有很多：

• HTML 事件属性可执行 JavaScript 代码
• HTML 事件属性能够调用 JavaScript 函数
• 您能够向 HTML 元素分配自己的事件处理函数
• 您能够阻止事件被发送或被处理
• 等等

字符串

内建属性 length 可返回字符串的长度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

特殊字符

由于字符串必须由引号包围，JavaScript 会误解这段字符串：

var y = "中国是瓷器的故乡，因此 china 与"China（中国）"同名。"

该字符串将被切为 “中国是瓷器的故乡，因此 china 与”。

避免此问题的解决方法是，使用 \ 转义字符。

反斜杠转义字符把特殊字符转换为字符串字符：

代码	结果	描述
’	’	单引号
"	"	双引号
\	\	反斜杠

字符串相关方法

		<script type="text/javascript">
			//创建一个字符串
			var str = "Hello Atguigu";
			
			/*
			 * 在底层字符串是以字符数组的形式保存的
			 * ["H","e","l"]
			 */
			
			/*
			 * length属性
			 * 	- 可以用来获取字符串的长度
			 */
			//console.log(str.length);
			//console.log(str[5]);
			
			/*
			 * charAt()
			 * 	- 可以返回字符串中指定位置的字符
			 * 	- 根据索引获取指定的字符	
			 */
			str = "中Hello Atguigu";
			
			var result = str.charAt(6);
			
			/*
			 * charCodeAt()
			 * 	- 获取指定位置字符的字符编码（Unicode编码）
			 */
			
			result = str.charCodeAt(0);
			
			/*
			 * String.formCharCode()
			 * 	- 可以根据字符编码去获取字符
			 */
			result = String.fromCharCode(0x2692);
			
			/*
			 * concat()
			 * 	- 可以用来连接两个或多个字符串
			 * 	- 作用和+一样
			 */
			result = str.concat("你好","再见");
			
			/*
			 * indexof()
			 * 	- 该方法可以检索一个字符串中是否含有指定内容
			 * 	- 如果字符串中含有该内容，则会返回其第一次出现的索引
			 * 		如果没有找到指定的内容，则返回-1
			 * 	- 可以指定一个第二个参数，指定开始查找的位置
			 * 
			 * lastIndexOf();
			 * 	- 该方法的用法和indexOf()一样，
			 * 		不同的是indexOf是从前往后找，
			 * 		而lastIndexOf是从后往前找
			 * 	- 也可以指定开始查找的位置
			 */
			
			str = "hello hatguigu";
			
			result = str.indexOf("h",1);
			
			result = str.lastIndexOf("h",5);
			
			/*
			 * slice()
			 * 	- 可以从字符串中截取指定的内容
			 * 	- 不会影响原字符串，而是将截取到内容返回
			 * 	- 参数：
			 * 		第一个，开始位置的索引（包括开始位置）
			 * 		第二个，结束位置的索引（不包括结束位置）
			 * 			- 如果省略第二个参数，则会截取到后边所有的
			 * 		- 也可以传递一个负数作为参数，负数的话将会从后边计算
			 */
			str = "abcdefghijk";
			
			result = str.slice(1,4);
			result = str.slice(1,-1);
			
			/*
			 * substring()
			 * 	- 可以用来截取一个字符串，可以slice()类似
			 * 	- 参数：
			 * 		- 第一个：开始截取位置的索引（包括开始位置）
			 * 		- 第二个：结束位置的索引（不包括结束位置）
			 * 		- 不同的是这个方法不能接受负值作为参数，
			 * 			如果传递了一个负值，则默认使用0
			 * 		- 而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换
			 */
			
			result = str.substring(0,1);
			
			/*
			 * substr()
			 * 	- 用来截取字符串
			 * 	- 参数：
			 * 		1.截取开始位置的索引
			 * 		2.截取的长度
			 */
			
			str = "abcdefg";
			
			result = str.substr(3,2);
			
			/*
			 * split()
			 * 	- 可以将一个字符串拆分为一个数组
			 * 	- 参数：
			 * 		-需要一个字符串作为参数，将会根据该字符串去拆分数组
			 */
			str = "abcbcdefghij";
			
			result = str.split("d");
			
			/*
			 * 如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素
			 */
			result = str.split("");
			
			//console.log(Array.isArray(result));
			//console.log(result[0]);
			console.log(result);
			
			
			str = "abcdefg";
			
			/*
			 * toUpperCase()
			 * 	- 将一个字符串转换为大写并返回
			 */
			result = str.toUpperCase();
			
			str = "ABCDEFG";
			
			/*
			 * toLowerCase()
			 * 	-将一个字符串转换为小写并返回
			 */
			result = str.toLowerCase();
			
			//console.log(result);
			
			
		</script>

正则表达式

		<script type="text/javascript">
			/*
			 * 正则表达式
			 * 	- admin@atguigu.com
			 *  - admin@.com   adminatguigu.com
			 *  - 邮件的规则：
			 * 		1.前边可以是xxxx乱七八糟
			 * 		2.跟着一个@
			 * 		3.后边可以是xxxx乱七八糟
			 * 		4..com获取其他的乱七八糟
			 * 
			 * 	- 正则表达式用于定义一些字符串的规则，
			 * 		计算机可以根据正则表达式，来检查一个字符串是否符合规则，
			 * 		获取将字符串中符合规则的内容提取出来
			 */
			
			//创建正则表达式的对象
			/*
			 * 语法：
			 * 	var 变量 = new RegExp("正则表达式","匹配模式");
			 *  使用typeof检查正则对象，会返回object
			 * 	var reg = new RegExp("a"); 这个正则表达式可以来检查一个字符串中是否含有a
			 * 在构造函数中可以传递一个匹配模式作为第二个参数，
			 * 		可以是 
			 * 			i 忽略大小写 
			 * 			g 全局匹配模式
			 */
			var reg = new RegExp("ab","i");
			
			var str = "a";
			
			/*
			 * 正则表达式的方法：
			 * 	test()
			 * 	 - 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，
			 * 		如果符合则返回true，否则返回false
			 */
			var result = reg.test(str);
			//console.log(result);
			console.log(reg.test("Ac"));
			
			
			
		</script>

		<script type="text/javascript">
			
			/*
			 * 使用字面量来创建正则表达式
			 * 	语法：var 变量 = /正则表达式/匹配模式
			 * 使用字面量的方式创建更加简单
			 * 	使用构造函数创建更加灵活
			 * 
			 */
			//var reg = new RegExp("a","i");
			
			var reg = /a/i;
			
			//console.log(typeof reg);
			//console.log(reg.test("abc"));
			
			//创建一个正则表达式，检查一个字符串中是否有a或b
			/*
			 * 使用 | 表示或者的意思
			 */
			reg = /a|b|c/;
			
			/*
			 * 创建一个正则表达式检查一个字符串中是否有字母
			 */
			//reg = /a|b|c|d|e|f|g/;
			
			/*
			 * []里的内容也是或的关系
			 * [ab] == a|b
			 * [a-z] 任意小写字母
			 * [A-Z] 任意大写字母
			 * [A-z] 任意字母
			 * [0-9] 任意数字
			 */
			reg = /[A-z]/;
			
			//检查一个字符串中是否含有 abc 或 adc 或 aec
			reg = /a[bde]c/;
			
			/*
			 * [^ ] 除了
			 */
			reg = /[^ab]/;
			
			reg = /[^0-9]/;
			
			console.log(reg.test("12a3456"));
			
		</script>

字符串和正则相关语法

		<script type="text/javascript">
			
			var str = "1a2b3c4d5e6f7";
			/*
			 * split()
			 * 	- 可以将一个字符串拆分为一个数组
			 * 	- 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
			 * 	- 这个方法即使不指定全局匹配，也会全都插分
			 */
			
			/*
			 * 根据任意字母来将字符串拆分
			 */
			var result = str.split(/[A-z]/);
			
			
			//console.log(result);
			
			/*
			 * search()
			 * 	- 可以搜索字符串中是否含有指定内容
			 * 	- 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
			 * 	- 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
			 * 	- serach()只会查找第一个，即使设置全局匹配也没用
			 */
			str = "hello abc hello aec afc";
			/*
			 * 搜索字符串中是否含有abc 或 aec 或 afc
			 */
			result = str.search(/a[bef]c/);
			
			//console.log(result);
			
			
			/*
			 * match()
			 * 	- 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
			 * 	- 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
			 * 		我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
			 * 		可以为一个正则表达式设置多个匹配模式，且顺序无所谓
			 * 	- match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
			 * 
			 * 	
			 */
			str = "1a2a3a4a5e6f7A8B9C";
			
			result = str.match(/[a-z]/ig);
			
			//console.log(result[2]);
			
			/*
			 * replace()
			 * 	- 可以将字符串中指定内容替换为新的内容
			 *  - 参数：
			 * 		1.被替换的内容，可以接受一个正则表达式作为参数
			 * 		2.新的内容
			 *  - 默认只会替换第一个
			 */
			//result = str.replace(/[a-z]/gi , "@_@");
			result = str.replace(/[a-z]/gi , "");
			
			//console.log(result);
			
		</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 创建一个正则表达式检查一个字符串中是否含有aaa
			 */
			
			/*
			 * 量词
			 * 	- 通过量词可以设置一个内容出现的次数
			 * 	- 量词只对它前边的一个内容起作用
			 * 	- {n} 正好出现n次
			 * 	- {m,n} 出现m-n次
			 * 	- {m,} m次以上
			 * 	- + 至少一个，相当于{1,}
			 * 	- * 0个或多个，相当于{0,}
			 * 	- ? 0个或1个，相当于{0,1}
			 */
			var reg = /a{3}/;
			//ababab
			reg = /(ab){3}/;
			
			reg = /b{3}/;
			
			reg = /ab{1,3}c/;
			
			reg = /ab{3,}c/;
			
			reg = /ab+c/;
			
			reg = /ab*c/;
			
			reg = /ab?c/;
			
			// console.log(reg.test("abbc"));
			
			/*
			 * 检查一个字符串中是否以a开头
			 * 	^ 表示开头
			 * 	$ 表示结尾
			 */
			reg = /^a/; //匹配开头的a
			
			reg = /a$/; //匹配结尾的a
			
			//console.log(reg.test("abcabca"));
			
			/*
			 * 如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
			 */
			reg = /^a$/;
			
			//console.log(reg.test("bbca"));
			
			/*
			 * 创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
			 * 
			 * 手机号的规则：
			 * 	1 3 567890123 （11位）
			 * 	
			 * 	1. 以1开头
			 *  2. 第二位3-9任意数字
			 * 	3. 三位以后任意数字9个
			 * 
			 *  ^1   [3-9]  [0-9]{9}$  
			 * 
			 */
			
			var phoneStr = "13067890123";
			
			var phoneReg = /^1[3-9][0-9]{9}$/;
			
			console.log(phoneReg.test(phoneStr));
			
			
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 检查一个字符串中是否含有 .
			 * . 表示任意字符
			 * 在正则表达式中使用\作为转义字符
			 * \. 来表示.
			 * \\  表示\
			 * 
			 * 注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，
			 * 	如果要使用\则需要使用\\来代替
			 */
			var reg = /\./;
			
			reg = /\\/;
			
			reg = new RegExp("\\.");
			reg = new RegExp("\\\\");
			
			/*
			 * \w
			 * 	- 任意字母、数字、_  [A-z0-9_]
			 * \W
			 * 	- 除了字母、数字、_  [^A-z0-9_]
			 * \d
			 * 	- 任意的数字 [0-9]
			 * \D
			 * 	- 除了数字 [^0-9]
			 * \s
			 * 	- 空格
			 * \S
			 * 	- 除了空格
			 * \b
			 * 	- 单词边界
			 * \B
			 * 	- 除了单词边界
			 */
			
			reg = /\w/;
			reg = /\W/;
			
			reg = /\d/;
			reg = /\D/;
			
			reg = /\s/;
			reg = /\S/;
			
			/*
			 * 创建一个正则表达式检查一个字符串中是否含有单词child
			 */
			
			reg = /\bchild\b/;
			
			//console.log(reg.test("hello child "));
			
			//接收一个用户的输入
			//var str = prompt("请输入你的用户名:");
			
			var str = "              he      llo                ";
			
			//去除掉字符串中的前后的空格
			//去除空格就是使用""来替换空格
			console.log(str);
			
			//str = str.replace(/\s/g , "");
			
			//去除开头的空格
			//str = str.replace(/^\s*/, "");
			//去除结尾的空格
			//str = str.replace(/\s*$/, "");
			// /^\s*|\s*$/g 匹配开头和结尾的空格
			str = str.replace(/^\s*|\s*$/g,"");
			
			
			console.log(str);
			
		</script>
	</head>
	<body>
	</body>
</html>

邮件的正则

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 电子邮件
			 * 	hello  .nihao          @     abc  .com.cn
			 * 
			 * 任意字母数字下划线    .任意字母数字下划线  @   任意字母数字     .任意字母（2-5位）   .任意字母（2-5位）
			 * 
			 * \w{3,}  (\.\w+)*  @  [A-z0-9]+  (\.[A-z]{2,5}){1,2}
			 */
			
			var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
			
			var email = "abc.hello@163.com";
			
			console.log(emailReg.test(email));
			
			
		</script>
	</head>
	<body>
	</body>
</html>

包装类

		<script type="text/javascript">
			/*
			 * 基本数据类型
			 * 	String Number Boolean Null Undefined
			 * 引用数据类型
			 * 	Object
			 * 
			 * 在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象
			 * 	String()
			 * 		- 可以将基本数据类型字符串转换为String对象
			 * 	Number()
			 * 		- 可以将基本数据类型的数字转换为Number对象
			 *  Boolean()
			 * 		- 可以将基本数据类型的布尔值转换为Boolean对象
			 * 	但是注意：我们在实际应用中不会使用基本数据类型的对象，
			 * 		如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果
			 */
			
			//创建一个Number类型的对象
			//num = 3;
			var num = new Number(3);
			var num2 = new Number(3);
			var str = new String("hello");
			var str2 = new String("hello");
			var bool = new Boolean(true);
			var bool2 = true;
			
			//向num中添加一个属性
			num.hello = "abcdefg";
			
			//console.log(str === str2);
			
			var b = new Boolean(false);
			
			/*if(b){
				alert("我运行了~~~");
			}*/
			
			/*
			 * 方法和属性之能添加给对象，不能添加给基本数据类型
			 * 	当我们对一些基本数据类型的值去调用属性和方法时，
			 * 		浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法
			 * 		调用完以后，在将其转换为基本数据类型
			 */
			var s = 123;
			
			s = s.toString();
			
			s.hello = "你好";
			
			console.log(s.hello);
			//console.log(typeof s);
			
			
		</script>

DOM文档对象模型

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

• JavaScript 能改变页面中的所有 HTML 元素
• JavaScript 能改变页面中的所有 HTML 属性
• JavaScript 能改变页面中的所有 CSS 样式
• JavaScript 能删除已有的 HTML 元素和属性
• JavaScript 能添加新的 HTML 元素和属性
• JavaScript 能对页面中所有已有的 HTML 事件作出反应
• JavaScript 能在页面中创建新的 HTML 事件

浏览器已经为我们提供文档节点对象，这个对象是window属性

可以在页面中直接使用，文档节点代表的是整个网页

DOM 编程界面

HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。

在 DOM 中，所有 HTML 元素都被定义为对象。

编程界面是每个对象的属性和方法。

属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。

方法是您能够完成的动作（比如添加或删除 HTML 元素）。

getElementById 方法

访问 HTML 元素最常用的方法是使用元素的 id。

在上面的例子中，getElementById 方法使用 id=“demo” 来查找元素。

innerHTML 属性

获取元素内容最简单的方法是使用 innerHTML 属性。

innerHTML 属性可用于获取或替换 HTML 元素的内容。

innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。

事件

点击行为等都是事件，就是浏览器和用户的交互行为

οnclick=“alert(“hello”)”;

可以直接在标签中通过属性来绑定事件

也可以在js中通过函数回调的方式来绑定事件

文档的加载

浏览器加载一个页面时，是按从上到下的顺序执行

读取一行就运行一行，如果将script标签写到页面上边

读取不到页面中的代码

将js代码编写到页面下方就是为了可以在页面加载完毕后再执行js代码

window.onload事件会在页面加载完成后才触发

dom查询

innerHTML 通过这个属性可以获取到元素内部的html代码
getElementsByTagName 这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
childNodes会获取所有节点,根据DOM标签间的空白也会当成文本节点

注意：在IE8以下的浏览器中，不会将空白文本当成子节点

children属性可以获取当前元素的所有子元素

firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）

firstElementChild可以获取当前元素的第一个子元素

firstElementChild不支持IE8以下的浏览器，如需兼容，不建议使用

读取元素的样式

currentStyle

​ * 获取元素的当前显示的样式

​ * 语法：元素.currentStyle.样式名

​ * 它可以用来读取当前元素正在显示的样式

​ * 如果当前元素没有设置该样式，则获取它的默认值

​ *

​ * currentStyle只有IE浏览器支持，其他的浏览器都不支持

getComputedStyle

​ * 在其他浏览器中可以使用

​ * getComputedStyle()这个方法来获取元素当前的样式

​ * 这个方法是window的方法，可以直接使用

​ * 需要两个参数

​ * 第一个：要获取样式的元素

​ * 第二个：可以传递一个伪元素，一般都传null

​ *

​ * 该方法会返回一个对象，对象中封装了当前元素对应的样式

​ * 可以通过对象.样式名来读取样式

​ * 如果获取的样式没有设置，则会获取到真实的值，而不是默认值

​ * 比如：没有设置width，它不会获取到auto，而是一个长度

​ *

​ * 但是该方法不支持IE8及以下的浏览器

​ *

​ * 通过currentStyle和getComputedStyle()读取到的样式都是只读的，

​ * 不能修改，如果要修改必须通过style属性