思维导图

 

 

 

 

 

 

 

JavaScript

 

1、JavaScript概念： 

 

JavaScript一种弱类型（两种不同的数据类型操作，存在隐式数据类型转换）、基于对象的语言（大部分对象已经被创建好了，不用创建类；），相对随便的客户端脚本语言 。

它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，它的主要目的是验证发往服务端之前的数据、增加Web互动、加强用户体验；

与CSS一样嵌套在HTML代码标签里面，在html代码执行时，随之执行， 为HTML代码增加动态效果。

 

2、JavaScript组成：

 

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

核心（ECMAScript）:ECMAScript是为JavaScript设定的语法标准并且规定JavaScript不依赖依赖任何浏览器！

• 简单地说，ECMAScript 描述了以下内容：

  • 语法 
  • 类型 
  • 语句 
  • 关键字 
  • 保留字 
  • 运算符 
  • 对象 (封装 继承 多态) 基于对象的语言.使用对象. 

• 文档对象模型（DOM） Document object model (整合js，css，html)：HTML DOM 定义了JavaScript访问和操作 HTML 文档的API标准
• 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）:
       BOM（Browser Object Model）即浏览器对象模型。
       BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
       由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
       BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
       BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

 　　

 

 

 

 

 

 

 

 

 

3、JavaScript和HTML、CSS的关系

HTML 定义了网页的内容(裸体的人)

CSS 描述了网页的布局（给裸体的人穿上衣服）

JavaScript 定义网页的行为、执行流程，JavaScript全部被浏览器解释执行；（给穿上衣服的人动作）

 

 ECMAScript基础篇

 

1、JavaScript的引入方式

1.1 直接编写

在html代码的head标签中定义

    
              
      
       aa
      

 

1.2、导入文件（注意JavaScript要和HTML在同一个目录）

    
              
              
          
          　　
      
       aa
      

 

注意：通过script标签 src引入外部js文件之后，script标签里面的js代码，将无法执行；

 

2.JavaScript的变量：

 语法规范：

2.1、每行结束可以不加分号. 没有分号会以换行符作为每行的结束。

2.2、 多行注释（ /* */ ）单行注释（//）

2.3、JavaScricpt使用{}来封装代码块，Python通过缩进 4个空格 来封装代码块；

2.4、JavaScricpt流程控制语句，使用()，来封装表达式，Python通过 空格;

 

变量：

变量是在程序运行过程中，用来保存临时数据的容器，当程序运行结束，变量也随之在内存中消失。可以把程序中的变量想象成生活中的碗、盘子。

1、声明变量时不用声明变量类型. 全都使用var关键字;

2、 一行可以声明多个变量.并且可以是不同类型。

3、 (了解) 声明变量时 可以不用var. 如果不用var 那么它是全局变量。

    
              
      
       aa
      

 

 

 

 

3、JavaScript数据类型  

 

JavaScript数据类型大体分为2类

1、基本数据类型存在栈；

2、引用的数据类型放在堆里面，赋值时值为引用；

 

 

数字类型(Number)：分为整数、浮点数

简介最基本的数据类型不区分整型数值和浮点型数值所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式能表示的最大值是±1.7976931348623157 x 10308 能表示的最小值是±5 x 10 -324

 NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据。

NaN 和任何值做比较都是false, 除非 值！=NaN。

 

整数：           在JavaScript中10进制的整数由数字的序列组成           精确表达的范围是
-9007199254740992 (-253) 到 9007199254740992 (253)           超出范围的整数，精确度将受影响  浮点数：           使用小数点记录数据           例如：3.4，5.6           使用指数记录数据           例如：4.3e23 = 4.3 x 1023  16进制和8进制数的表达           16进制数据前面加上0x，八进制前面加0           16进制数是由0-9,A-F等16个字符组成           8进制数由0-7等8个数字组成           16进制和8进制与2进制的换算

 

 字符串(String)

简介是由Unicode字符、数字、标点符号组成的序列字符串常量首尾由单引号或双引号括起JavaScript中没有字符类型常用特殊字符在字符串中的表达字符串中部分特殊字符必须加上右划线\常用的转义字符 \n:换行  \':单引号   \":双引号  \\:右划线

 

 

布尔型(Boolean)

简介Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0布尔值也可以看作on/off、yes/no、1/0对应true/falseBoolean值主要用于JavaScript的控制语句，例如    if (x==1){    y=y+1;    }else    {    y=y-1;    }

 

Null 和 Undefined

Undefined:当声明的变量，但没有赋值时，例如：var a ;该变量a的默认值是 undefined。

Null:当变量确实被赋值，但是值不属于JavaScript任何数据类型时；

1 Undefined 类型2 Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。3 当函数无明确返回值时，返回的也是值 "undefined";4 Null 类型5 另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。6 尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。7 var person=new Person()8 var person=null

 

引用数据类型---对象(列表、字典)

1.创建object

数据类型转换

JavaScript属于松散类型的程序语言变量在声明的时候并不需要指定数据类型变量只有在赋值的时候才会确定数据类型表达式中包含不同类型数据则在计算过程中会强制进行类别转换数字 + 字符串：数字转换为字符串数字 + 布尔值：true转换为1，false转换为0字符串 + 布尔值：布尔值转换为字符串true或false

强制类型转换函数

函数parseInt：   强制转换成整数   例如parseInt("6.12")=6  ; parseInt(“12a")=12 ; parseInt(“a12")=NaN  ;parseInt(“1a2")=1函数parseFloat： 强制转换成浮点数  parseFloat("6.12")=6.12函数eval：       将字符串强制转换为表达式并返回结果 eval("1+1")=2 ; eval("1<2")=true

类型查询函数(typeof)

函数typeof ：查询数值当前类型
 (string / number / boolean / object )例如typeof("test"+3)      "string"例如typeof(null)          "object "例如typeof(true+1)        "number"例如typeof(true-false)    "number"

 

对象和基本数据类型的区别

a.引用数据类型（列表、字典、函数）对比时对比的是引用，而基本数据类型（字符型、数字、布尔）对比的是值；

//基本类型 变量var a=100;var b=100 ;//alert(a==b);//alert(a==b) 结果：True 注意：基本类型的比较是值的比较：//object数据类型var obj={'name':'zhanggen'};var obj1={'name':'zhanggen'};alert(obj==obj1) //结果：False注意：引用类型的比较是引用的比较

 

b.引用数据类型（列表、字典、函数）可变，而基本数据类型（字符型、数字、布尔）不可变；

c.基本类型的变量是存放在栈区的（栈区指内存里的栈内存）引用的数据类型放在堆里面

 

 

 

 

 

4、运算符

 

算数运算符

加(＋)、 减(－)、 乘(*) 、除(/) 、余数(% ) 加、减、乘、除、余数和数学中的运算方法一样 例如：9/2=4.5，4*5=20，9%2=1

-除了可以表示减号还可以表示负号 例如：x=-y

+除了可以表示加法运算还可以用于字符串的连接 例如："abc"+"def"="abcdef"

 

递增(＋＋) 、递减(－－)

i++先引用再赋值

++i先赋值再引用

var i=1; console.log(i++);1 （先引用 还没有赋值计算所以i++还是1） console.log(++i);2

（先赋值计算 再引用 i++是2 ）

console.log(i--);1 console.log(--i);0

逻辑运算符

等于 ( == ) 、不等于( != ) 、 大于( > ) 、 小于( < ) 
大于等于(>=) 、小于等于(<=)、完全等于（===）

与 (&&) 、或(||) 、非(!)

&& 1 = 1 1 || 1 = 1

&& 0 = 0 1 || 0 = 1

&& 0 = 0 0 || 0 = 0

!0=1

!1=0

完全等于===，由于Java script是若类型语言，在做比较时会隐式转换数据类型（除了完全等于===）

 

 

逻辑 AND 运算符(&&) and两个值 必须两个人都同意才是true（两个人决定结果）

逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。

如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：

• 如果某个运算数是 null，返回 null。 
• 如果某个运算数是 NaN，返回 NaN。 
• 如果某个运算数是 undefined，返回undefined。 

逻辑 OR 运算符(||)：or两个值  其中一个是true就是真(一个人决定结果)

与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值

 

 

比较运算符：

 

两个字符串做比较：比较字符串开头字母在ASSIC码表里对应的数字。

var bResult = "Blue" < "alpha";

alert(bResult); 

//输出 true　

 

在上面的例子中，字符串 "Blue" 小于 "alpha"，因为字母 B 的字符代码是 66，字母 a 的字符代码是 97。　

 

数字和字符串做比较，把字符串隐式转换成数字；

var 

bResult = 

"25" 

< 

"3"

;

alert(bResult); 

//输出 "true"

上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串，所以比较的是它们的字符代码（"2" 的字符代码是 50，"3" 的字符代码是 51)。

 

 

var bResult = "25" < 3;

alert(bResult); 

//输出 "false"

这里，字符串 "25" 将被转换成数字 25，然后与数字 3 进行比较，结果不出所料。

 

总结：

比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.

比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.

如果是===完全等于比较，不会隐式转换数据类型；

 

 

 

 

5、JavaScript的流程控制语句

 

 

 

任何语言编写的程序 在执行时 流程都分为以下3种状况：

1.顺序执行（正常流程）

2.if elif ....else语句(选择分支执行)

3.for while 循环语句（重复执行）

 

 

说明:Java Script的流程控制语句的语法，不同于Python流程控制语句

 

 

Python使用   空格封装条件表达式，使用换行符合缩进4个空格来封装代码块；

if  1==1;

　　print(1)

 

JavaScript使用 ()封装条件表达式，使用{}来封装代码块；

if ((x==6) || (x==0)) 　　{
       console.log("今天是周末") } else {console.log("今天是工作日")}

 

 

 

 

 

 

 

 

 

if 控制语句：

var x= (new Date()).getDay();//获取今天的星期值，0为星期天var y;if ( (x==6) || (x==0) ) {y="周末";}else{y="工作日";}alert(y);//等价于y="工作日";if ( (x==6) || (x==0) ) {y="周末";}

if语句嵌套格式if (表达式1) {    语句1;}else if (表达式2){    语句2;}else if (表达式3){    语句3;} else{    语句4;}

 

 

switch  选择控制语句

 等同于Python的多分支判断； if... elif... elif.....elif.....else,但switch比else if结构更加简洁清晰，使程序可读性更强,效率更高。

 

 

switch基本格式switch (表达式) {    case 值1:语句1;break;    case 值2:语句2;break;    case 值3:语句3;break;    default:语句4;}

switch(x){case 1:y="星期一";    break;case 2:y="星期二";    break;case 3:y="星期三";    break;case 4:y="星期四";    break;case 5:y="星期五";    break;case 6:y="星期六";    break;case 7:y="星期日";    break;default: y="未定义";}

 

for  循环控制语句

for循环基本格式for (初始化;条件;增量){    语句1;    ...}功能说明实现条件循环，当条件成立时，执行语句1，否则跳出循环体

for (var i=1;i<=7;i++){    document.write("
      
       hello ");    document.write("
       
");}----------------------------------------------    var arr=[1,"hello",true]//var dic={"1":"111"}    for (var i in arr){        console.log(i)        console.log(arr[i])    }
      

 

while  循环控制语句

var i=1;while (i<=7) {    document.write("
      
       hello ");    document.write("
       
");    i++;}//循环输出H1到H7的字体大小
      

 

 

7、异常处理

try {    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行}catch (e) {    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。    //e是一个局部变量，用来指向Error对象或者其他抛出的对象}finally {     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。}

 

 

 

 

 

 

 

 

JavaScript的对象

 

 

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，在JavaScript程序大多数功能都是基于对象实现的。

 

 

JavaScript对象分类：

1、ECMAScript （标准内置对象）

 

2、BOM对象（浏览器对象）

3、DOM对象（HTML文档对象）

 

 

 

ECMAScript 内置对象

 

Array ,String , Date, Math, Boolean, Number  Function, Global, Error, RegExp , Object

 

 

 

1、String对象

 

字符串对象的2种创建方式：

 

 ① 变量 = “字符串”

 ② 字串对象名称 = new String (字符串)

 

 

字符串对象的属性和方法

 

1、console.log(s1.length)

统计字符串对象的长度

 

2、console.log(s1.toLowerCase()) 

字符串全部转为小写

 

3、console.log(s1.toUpperCase())

字符串全部转大写

 

4、s1.trim()

去除字符串两端的空格

 

------------------------------------字符串的查询方法

 

5、console.log(s1.charAt(3))

按索引数字查找 字符串元素，查找不到返回-1。

 

6、console.log(s1.indexOf('h'))

按字符串元素，查找索引值，查找不到返回-1。

 

7、console.log(s1.match('h'))

match返回匹配字符串的数组，如果没有匹配则返回null

 

8、console.log(s1.search('h'))

search返回匹配字符串的首字符位置索引值

 

 －－－－子字符串处理方法

 

9、x.substr(start, length)

start表示开始位置，length表示截取长度

 

10、x.substring(start, end)

end是结束位置

 

11、console.log(s1.slice(0,5))

切片操作(1-2)   字符串

 

 

12、console.log(s1.replace('Z','z'))

字符串替换

 

13、console.log(s1.concat('liujuan') )

字符串拼接

 

 

2、Array对象

 

1、创建数组的3种方式

 

1  2  3  4     
        5      6     14 15 16 17 18 

 

2、数组对象的属性和方法

join方法： 把数组拼接成字符串

1 x.concat(value,...)    －－－－ 2                    var a = [1,2,3];3                   var b=a.concat(4,5) ;4                   alert(a.toString());  //返回结果为1,2,3            5                   alert(b.toString());  //返回结果为1,2,3,4,5

 

concat方法：把两个数组合并为1个

1 x.concat(value,...)    －－－－ 2                    var a = [1,2,3];3                   var b=a.concat(4,5) ;4                   alert(a.toString());  //返回结果为1,2,3            5                   alert(b.toString());  //返回结果为1,2,3,4,5

 

 

数组排序-reverse sort：

 

切记：不管是Python还是JavaScript的reverse/sort方法的返回值都是None，并会直接改变原来的序列；

l=[10,2,3,4,5] l.sort() #直接改变l列表的排序 print(l) #返回结果[2, 3, 4, 5, 10] ------------------------------------

l=[10,2,3,4,5] l.reverse() print(l)

数组的reverse方法 翻转就是单纯的反转，不会排序后再反转， 

数组的 sort方法 排序规则 是按首个字符的ASSCI码，对应数组排序；

//x.reverse()//x.sort()var arr1=[32, 12, 111, 444];//var arr1=["a","d","f","c"];arr1.reverse(); //颠倒数组元素alert(arr1.toString());//结果为444,111,12,32arr1.sort();    //排序数组元素alert(arr1.toString());//结果为111,12,32,444//------------------------------arr=[1,5,2,100];//arr.sort();//alert(arr);//如果就想按着数字比较呢?function intSort(a,b){    if (a>b){        return 1;//-1    }    else if(a

 

数组切片操作 ：

删除：slice(开始的索引值, 结束的索引值）

插入：slice(开始的索引值, 0,插入值,....）

 

//x.slice(start, end)////使用注解////x代表数组对象//start表示开始位置索引//end是结束位置下一数组元素索引编号//第一个数组元素索引为0//start、end可为负数，-1代表最后一个数组元素//end省略则相当于从start位置截取以后所有数组元素var arr1=['a','b','c','d','e','f','g','h'];var arr2=arr1.slice(2,4);var arr3=arr1.slice(4);var arr4=arr1.slice(2,-1);alert(arr2.toString());//结果为"c,d" alert(arr3.toString());//结果为"e,f,g,h"alert(arr4.toString());//结果为"c,d,e,f,g"

 

删除子数组：

//x. splice(start, deleteCount, value, ...)//使用注解//x代表数组对象//splice的主要用途是对数组指定位置进行删除和插入//start表示开始位置索引//deleteCount删除数组元素的个数//value表示在删除位置插入的数组元素//value参数可以省略               var a = [1,2,3,4,5,6,7,8];a.splice(1,2);alert(a.toString());//a变为 [1,4,5,6,7,8]a.splice(1,1);alert(a.toString());//a变为[1,5,6,7,8]a.splice(1,0,2,3);alert(a.toString());//a变为[1,2,3,5,6,7,8]

 

数组的push和pop： 栈操作： 顺序后进先出，插入到最后位置；

//push pop这两个方法模拟的是一个栈操作//x.push(value, ...)  压栈//x.pop()             弹栈      //使用注解////x代表数组对象//value可以为字符串、数字、数组等任何值//push是将value值添加到数组x的结尾//pop是将数组x的最后一个元素删除var arr1=[1,2,3];arr1.push(4,5);alert(arr1);//结果为"1,2,3,4,5"arr1.push([6,7]);alert(arr1)//结果为"1,2,3,4,5,6,7"arr1.pop();alert(arr1);//结果为"1,2,3,4,5"

 

数组的unshift 和shift：栈操作：顺序后进先出 ，插入到开始位置；

//x.unshift(value,...)//x.shift()//使用注解//x代表数组对象//value可以为字符串、数字、数组等任何值//unshift是将value值插入到数组x的开始//shift是将数组x的第一个元素删除var arr1=[1,2,3];arr1.unshift(4,5);alert(arr1);  //结果为"4,5,1,2,3"arr1. unshift([6,7]);alert(arr1);  //结果为"6,7,4,5,1,2,3"arr1.shift();alert(arr1);  //结果为"4,5,1,2,3"

 

总结js的数组特性：

js中数组的特性

java中数组的特性, 规定是什么类型的数组,就只能装什么类型.只有一种类型.

js中的数组特性1: js中的数组可以装任意类型,没有任何限制.

js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长。

js中的数组特性3：可以超出数组的长度， 取索引值；

 

 

 

3、Date对象

创建Date对象

//方法1：不指定参数var nowd1=new Date();alert(nowd1.toLocaleString( ));//方法2：参数为日期字符串var nowd2=new Date("2004/3/20 11:12");alert(nowd2.toLocaleString( ));var nowd3=new Date("04/03/20 11:12");alert(nowd3.toLocaleString( ));//方法3：参数为毫秒数var nowd3=new Date(5000);alert(nowd3.toLocaleString( ));alert(nowd3.toUTCString());//方法4：参数为年月日小时分钟秒毫秒var nowd4=new Date(2004,2,20,11,12,0,300);alert(nowd4.toLocaleString( ));//毫秒并不直接显示

 

Date对象的方法—获取日期和时间

 

获取日期和时间getDate()                 获取日getDay ()                 获取星期getMonth ()               获取月（0-11）getFullYear ()            获取完整年份getYear ()                获取年getHours ()               获取小时getMinutes ()             获取分钟getSeconds ()             获取秒getMilliseconds ()        获取毫秒getTime ()                返回累计毫秒数(从1970/1/1午夜)

 

Date对象的方法—设置日期和时间

1 //设置日期和时间 2 //setDate(day_of_month)       设置日 3 //setMonth (month)                 设置月 4 //setFullYear (year)               设置年 5 //setHours (hour)         设置小时 6 //setMinutes (minute)     设置分钟 7 //setSeconds (second)     设置秒 8 //setMillliseconds (ms)       设置毫秒(0-999) 9 //setTime (allms)     设置累计毫秒(从1970/1/1午夜)10     11 var x=new Date();12 x.setFullYear (1997);    //设置年199713 x.setMonth(7);        //设置月714 x.setDate(1);        //设置日115 x.setHours(5);        //设置小时516 x.setMinutes(12);    //设置分钟1217 x.setSeconds(54);    //设置秒5418 x.setMilliseconds(230);        //设置毫秒23019 document.write(x.toLocaleString( )+"
");20 //返回1997年8月1日5点12分54秒21 22 x.setTime(870409430000); //设置累计毫秒数23 document.write(x.toLocaleString( )+"
");24 //返回1997年8月1日12点23分50秒

 

Date对象的方法—日期和时间的转换

日期和时间的转换:getTimezoneOffset():8个时区×15度×4分/度=480;返回本地时间与GMT的时间差，以分钟为单位toUTCString()返回国际标准时间字符串toLocalString()返回本地格式时间字符串Date.parse(x)返回累计毫秒数(从1970/1/1午夜到本地时间)Date.UTC(x)返回累计毫秒数(从1970/1/1午夜到国际时间)

 

 

4、Math对象

//该对象中的属性方法 和数学有关.   abs(x)    返回数的绝对值。exp(x)    返回 e 的指数。floor(x)对数进行下舍入。log(x)    返回数的自然对数（底为e）。max(x,y)    返回 x 和 y 中的最高值。min(x,y)    返回 x 和 y 中的最低值。pow(x,y)    返回 x 的 y 次幂。random()    返回 0 ~ 1 之间的随机数。round(x)    把数四舍五入为最接近的整数。sin(x)    返回数的正弦。sqrt(x)    返回数的平方根。tan(x)    返回角的正切。//方法练习:        //alert(Math.random()); // 获得随机数 0~1 不包括1.        //alert(Math.round(1.5)); // 四舍五入        //练习：获取1-100的随机整数，包括1和100             //var num=Math.random();             //num=num*10;             //num=Math.round(num);             //alert(num)        //============max  min=========================        /* alert(Math.max(1,2));// 2        alert(Math.min(1,2));// 1 */        //-------------pow--------------------------------        alert(Math.pow(2,4));// pow 计算参数1 的参数2 次方.

 

 

5、Function 对象(重点)

 

 1、函数的定义

 function 函数名 (参数) {


　　  函数体;

   

return 

返回值;

}

 

 2、函数的属性：

console.log(zhanggen.length) 查看函数的参数的个数

 

3、Function 的调用：

Python里的函数需先定义再执行，JS里的函数可以在定义代码的前面调用；因为Python和JS的加载顺序不同，Python顺序执行，JS是先加载函数。

 

4、函数的内置对象arguments：

JS的函数可以接收无数个参数；

在JS函数里面可以通过arguments对象，收集这个函数所有的参数。

 

5、匿名函数 lambda x,y:x+y

匿名函数的调用：

（lambda x,y:x+y）（1+1）

为什么会有lambda函数？

因为每定义一个函数就会开辟一块内存空间来存放函数执行的代码，并引用函数名，解释器无法回收这块内存，为了节省内存，所以出现了lambada函数；

 

 

 

BOM对象:

browser object module 浏览器对象模块

1、Window 对象方法

window是全局变量，所以window对象下面的方法可以直接调用：

alert() 显示带有一段消息和一个确认按钮的警告框。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

prompt() 显示可提示用户输入的对话框。

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。

//var res=window.confirm('确定要删除吗？');//setTimeout("window.open('http://www.baidu.com','_self')",3000);//在当前窗口open一个新页面//setTimeout("window.open('www.baidu.com','_paren')",3000);//在父级窗口open一个新页面//setTimeout("window.open('www.baidu.com','_top')",3000);//在顶级窗口open一个新页面window.open('http://www.baidu.com','new_window','width=200,height=200') //设置打开窗口的大小

close() 关闭浏览器窗口。

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

clearInterval() 取消由 setInterval() 设置的 timeout。

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

scrollTo() 把内容滚动到指定的坐标.

location:提供当前窗口加载的信息

//alert(window.location.hash);//返回url中的hash//alert(window.location.port);//当前访问端口号//alert(window.location.search)//当前url携带的参数//alert(window.location.pathname)//当前访问的url地址//window.location.assign('http://www.baidu.com');//window.location.href='http://www.baidu.com'//网页跳转alert(navigator.userAgent) //获取当前用户使用的浏览器

 

 

2、方法使用

1.1、alert confirm prompt以及open函数

 

var id=setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

clearInterval(id)      取消由 setInterval() 设置。

 

1.2、setInterval，clearInterval

输出框内显示时间案例：

    
               
        end

 

 

DOM对象：

什么是HTML  DOM？

HTML  Document Object Model（文档对象模型）

HTML DOM 定义了访问和操作HTML文档的标准方法

HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)

 

DOM树

 

 

 

DOM树中对象可以分为4类：

1、docucment对象（  完整的HTML页面）

2、标签对象（html中的标签）

3、文本对象（标签里内容）

4、属性对象（标签中定义的属性）

 

DOM操作HTML标签和用户交互；

1、节点查找(访问HTML标签)

1.1直接查找html标签的方式：返回一个数组对象，里面包含查找到的标签；

 

document.getElementById(“idname”)         通过html标签里的元素查找到标签；

document.getElementsByTagName(“tagname”)    通过html标签的标签名字查找到标签；

document.getElementsByName(“name”)        通过html标签里定义的属性，查找到标签；

 

document.getElementsByClassName(“name”)     通过html标签里定义的类名，查找到标签；

 

 

1.2导航节点属性（间接查找）

parentElement           // 父节点标签元素 children                // 所有子标签 firstElementChild       // 第一个子标签元素 lastElementChild        // 最后一个子标签元素 nextElementtSibling     // 下一个兄弟标签元素 previousElementSibling  // 上一个兄弟标签元素

2、节点操作（操作HTML标签）

1、创建节点：通过JS创建HTML标签，使用document对象的createElement方法创建标签对象；

例：var  tag=document.createElement(“input")

            tag.setAttribute('type','text');

 

2、添加节点：通过JS把创建好的HTML标签，查找到父标签----->使用父标签对象的appendChild方法

3、删除节点：通过JS把创建好的HTML标签，查找到父标签----->使用父标签对象的removeChild()方法删除子节点； 

4、替换节点：通过JS把创建好的HTML标签，查找到父标签----->使用父标签对象的replaceChild(新标签，旧标签 )方法 替换父标签下面的子标签

 

 

节点属性操作：

1、获取文本节点的值：innerText    innerHTML 

 

2、attribute操作（HTML标签内 的ID、class等属性。。。。注意不能设置标签的CSS样式）

elementNode.setAttribute(name,value)         elementNode.getAttribute(name)        简写方式设置标签属性：<-------------->elementNode.value(DHTML)     elementNode.removeAttribute(“属性名”);

3、value获取当前选中的value值  （仅限于 select 标签和 input标签使用 value属性）

        1.input   

        2.select （selectedIndex）

        3.textarea  

 select标签 清空所以包含的option的方法：  ele2.options.length=0

 

4、innerHTML 给节点添加html代码：

        该方法不是w3c的标准，但是主流浏览器支持    

        tag.innerHTML = “<p>要显示内容</p>”;

5、关于class的操作：

1 2 3

elementNode.className elementNode.classList.add elementNode.classList.remove

 6、通过DOM改变HTML标签的css样式：

 

 

 

DOM Event(事件)

onclick        当用户点击某个对象时调用的事件句柄。ondblclick     当用户双击某个对象时调用的事件句柄。onfocus        元素获得焦点。               练习：输入框onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.onkeypress     某个键盘按键被按下并松开。onkeyup        某个键盘按键被松开。 onload         一张页面或一幅图像完成加载。 onmousedown    鼠标按钮被按下。onmousemove    鼠标被移动。onmouseout     鼠标从某元素移开。onmouseover    鼠标移到某元素之上。onmouseleave   鼠标从元素离开onselect       文本被选中。onsubmit       确认按钮被点击

绑定事件方式：

绑定方式1 在html标签里绑定事件，执行函数里的参数写(this)；

 

绑定方式2 标签对象.事件=function(){}；

    
         
ppppp
p11111
clik

 

事件介绍

1、onload：

onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

 

2、onsubmit：

当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

 

3、Event 对象：

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.

比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；

 

4、事件传播：

 

5、onselect：

 

 6、onchange:onchange事件：内容被改变时，触发该事件，例如select标签，选择之后触发

 

 　　　　　　　　　　JavaScript的作用域

1.谁可以开辟本地作用域？

JavaScript的全局作用域是Window，而且是JS里面最大的对象，声明在全局作用域中的所有变量都是window的属性；

JavaScript的函数、object类型都可以开辟自己的本地作用域；

 

2.本地作用域---->全局作用域经历了什么？

JavaScript调用变量的顺序是：本地----》外部---》全局----》undefined

如果变量声明在局部作用域，调用该变量时会先从本作用域开始调用，本地作用域没有，再去本地作用域的外部作用域，直到全局作用域；

如果全局作用域也没有查询到就显示undefined；

 

3.JavaScript的自执行函数中this，是什么鬼？

Window对象

(function () {        alert(this); //window对象           })()

 

4.如何在本地作用域 引用到 外部作用域中的 this？

如想要在本地作用域引用外部作用域中的this，可以在外部作用域把this赋值给其他变量；本地作用域调用直接去按顺序查找到外部作用域；

userinfo = {        name: 'zhanggen',        age: 18,        show: function () {    //userinfo  是1个字典对象        alert(this.age);  //this是userinfo对象            var that = this;            //自执行函数开始            (function () {                alert(this); //在自执行函数中，this还代表window对象                alert(that);  // 如想要在本地作用域引用外部作用域中的this，可以在外部作用域把this赋值给其他变量；本地作用域调用直接去按顺序查找；       that 还是userinfo对象            })()          //自执行函数结束        }    };    userinfo.show()    //如果函数 被对象.函数执行，那么函数中的this代指该对象本身    //如果在自执行函数中  this代指 window 对象;    //this可以被赋值，由于this 被赋值为 that,那么即使在自执行函数中也是 userinfo对象

 

 

 

 

 

 

 

 

 　　　　　　　　　　JavaScript的面向对象与原型

 前言：

ECMAScript和python、Java等语言有相同之处：支持两种开发模式：1.函数式编程（面向过程） 2.面向对象编程

有所不同得是ECMAScript中没有clas类的概念，它的面向对象是借助原型的方式实现的；

下面开始详细 介绍 ECMAScript  为了面向对象，采取了那些N种方式。（只有1个核心，使js 可以拥有面向对象的3大特征：封装、继承、多态）;

 

 

 

 

 

new Object()

 

总结：缺陷1：重复实例化造成大量重复、冗余代码。

 

工厂函数模式

创建1个集中实例化的函数，专门用来创建对象；

// 工厂函数0function create_object0(user,age) {    var obj=new Object();  //每次调用工厂函数创建1个对象；    obj.user=user;         //为这个对象添加属性    obj.age=age;           //为这个对象添加方法    obj.run=function () { //最后返回这个对象        return this.user+this.age+'运行中'    };    return obj}//工厂函数1function create_object1(user,age) {    var obj=new Object();  //每次调用工厂函数创建1个对象；    obj.user=user;         //为这个对象添加属性    obj.age=age;           //为这个对象添加方法    obj.run=function () { //最后返回这个对象        return this.user+this.age+'运行中'    };    return obj}//工厂函数2function create_object2(user,age) {    var obj=new Object();  //每次调用工厂函数创建1个对象；    obj.user=user;         //为这个对象添加属性    obj.age=age;           //为这个对象添加方法    obj.run=function () { //最后返回这个对象        return this.user+this.age+'运行中'    };    return obj}var obj0=create_object0('liufengyi',30);   //工厂函数0创建了 实例0var obj1=create_object1('gaofei',31);      // 工厂函数1创建了 实例1var obj2=create_object2('zhujingshan',32);   //工厂函数2创建了  实例2alert(obj0.run());alert(obj1.run()) ;alert(obj2.run()) ;alert(typeof obj0); //object类型alert(typeof obj1); //object类型alert(typeof obj2)  //object类型//使用工厂函数创建出来的实例都属于object类型，如果有多个工厂函数，根本无法区分是那个实例，是哪个工厂函数创建出来的！// （众多娃，不知爹是谁的问题？）

 

优势：解决了重复实例化的问题；

 

缺陷：使用工厂函数创建出来的实例都属于object类型，如果有多个工厂函数，根本无法区分是哪个实例是由哪个工厂函数创建出来的！

众多娃，不知爹是谁？总多爹，不知道娃是谁？这是母系社会？

 

 

构造函数

构造函数式JavaScript专门用来构造对象的，构造函数不仅解决了重复实例化的问题，还解决了对象和创建对象函数的关系识别问题

是工厂函数的改良版；

 

0.构造函数使用规范

a.构造函数也是函数，但是函数名的第1个字母必须大写

b.实例化时 使用 new 构造函数名(参数0，参数1 ) var obj0=new Person('xx',538);

 

1.构造函数和工厂函数的区别？

a.无需return object

b.构造函数没有使用 new Object关键字来实例化对象；（它后台会自动new Object）

c.this相当于self =对象

d.构造函数不需要返回对象（后台自动返回！）

e.构造函数和普通函数调用的方式不同，构造函数 必须使用new运算符 /  冒充调用Person.call(obj4,'朱允炆',250)

 

2.构造函数对比工厂函数的优势

0.解决了重复实例化的问题

1.无需return object

2.解决了对象和创建对象函数的关系识别问题

 

//     --------------------构造函数--------------------------------------//构造函数式JavaScript专门用来构造对象的，是工厂函数的改良版！function Person(user,age) {    this.user=user;              //添加属性    this.age=age;                //添加属性    this.run=function () {      //添加方法        return this.user+this.age+'运行中'    };}function Animals(user,age) {    this.user=user;              //添加属性    this.age=age;                //添加属性    this.run=function () {      //添加方法        return this.user+this.age+'运行中'    };}var obj0=new Person('朱标',538); //实例化出个对象0var obj1=new Person('朱樉',535);//实例化出个对象1var obj2=new Person('朱棡',532);//实例化出个对象2var obj3=new Animals('朱棣',529);//实例化出个对象3var obj4=new Object();Person.call(obj4,'朱允炆',250); //以对象冒充的方式，实例化出对象4alert(obj4.run());alert(obj0.run());alert(obj1.run());alert(obj2.run());alert(obj3.run());alert(obj0 instanceof Person );alert(obj1 instanceof Person );alert(obj2 instanceof Person );alert(obj3 instanceof Person ); //false 对象和对象创建者 的关系可分辨；// <<-----------构造函数和工厂函数的区别-------->>// 0.无需return object// 1.构造函数没有使用 new Object关键字来实例化对象；（它后台会自动new Object）// 2.this相当于self =对象// 3.构造函数不需要返回对象（后台自动返回！）// 4.构造函数和普通函数调用的方式不同，构造函数  必须使用new运算符来调用！// <<-----------构造函数对比工厂函数的优势-------->>// 0.解决了重复实例化的问题// 1.无需return object// 2.解决了对象和创建对象函数的关系识别问题// <<-----------------构造函数使用规范---------->>// 0.构造函数也是函数，但是函数名的第1个字母必须大写// 1.实例化时 使用 new 构造函数名(参数0，参数1 )   var obj0=new Person('朱标',538);

 

 原型实现JavaScript面向对象（封装+多态）

构造函数虽然解决了工厂函数无法解决解决的问题，但是无法实现同1构造函数构造出得实例， 共享属性、方法；所以JavaScript要实现真正的面向对象，必须借助原型；

                 

 

1、构造函数+原型实现JavaScript面向对象

 

// 原型方法function Person () {}  //构造函数体内什么都没有Person.prototype.name1='A';         //添加原型属性Person.prototype.age=18;             //添加原型属性Person.prototype.run=function () {  //添加原型方法    return this.name1+this.age+'运行中！'};var obj0=new Person();               //如果是实例属性、方法不同的实例各自的属性、方法都是不一致！(不共享)/*//alert(obj0.__proto__);     //__proto__这个属性是1个指针，指向prototype原型对象中共享属性！//alert(obj0.constructor);  // constructor 查看对象的构造函数！//alert(Person.prototype.isPrototypeOf(obj0) );//判断实例 和原型 是否有指向关系？*/obj0.age=19;     //添加实例属性alert(obj0.age); //如果调用实例的属性，先去实例属性中查找，然后再去实例的原型属性里查找；（顺序）

 

obj0.name2='C';                      //设置私有属性alert(obj0.hasOwnProperty('C')); //hasOwnProperty判断实例是否拥有私有属性 ？alert('age'in obj0 );                //in 判断 实例属性、原型属性中是否存在该属性？

 

obj0.gender1='male';             // 添加实例属性//delete obj0.gender1;            //删除实例属性delete Person.prototype.name1;   //删除原型中共享属性Person.prototype.name1='B';      //重写覆盖原型中共享属性alert(obj0.name1);

 

2.字面量 + 原型实现JavaScript面向对象

为了让属性和方法更好得封装，JavaScript支持使用字面量的方式实现面向对象；

// <-----------------------------------使用原型字面量的方式 创建原型对象 --------->function Person() {}//使用字面量的方式，创建对象；Person.prototype={    constructor:Person,    nickname:'牛魔王',    age:1000,    run:function () {        return this.nickname+this.age+'运行中！'    }};/*// 使用字面量方式,重写了原型对象，不会保留原型对象任何数据；Person.prototype={age:1200};*/var n1= new Person();alert(n1.run());alert(n1.constructor)

 

利用原型对JavaScript 内置数据类型做功能扩展

//利用原型对JavaScript 内置数据类型的功能扩展alert(String.prototype.format); //查看字符串对象 是否拥有 format方法？//使用原型 给字符串类，增加format共享方法；String.prototype.format = function () {        var args = arguments;        return this.replace(/\{(\d+)\}/g, function (s, i) {            return args[i];        });    };

 

3.原型+构造函数实现面向对象的 缺点

无法动态传参，实现面向对象的多态性；

//原型+构造函数实现面向对象的 缺点 function Person() {}Person.prototype={     constructor:Person,     name:'A',     age:100,     run:function () {         return this.name+this.age+'运行中！'     } }; var obj0=new Person(); alert(obj0.run()); var obj1=new Person(); //无法动态传参，实现面向对象 多态性；alert(obj1.run())

 

4.组合构造函数+原型模式实现JavaScript面向对象

function  Perosn(name,age) {  //私有属性和方法使用 构造函数；        this.name=name;        this.age=age;    }    Perosn.prototype={  //公共属性和方法 使用原型        constructor:Perosn,        env:"earth",        run:function () {            return this.name + this.age        }    };    var peron1=new Perosn('小明',18);    alert(peron1.env);    alert(peron1.name);    var peron2=new Perosn('小刚',28);    var peron3=new Perosn('小虎',38);    alert(peron3.env);    alert(peron3.name);

 

5.动态原型模式

更好得把，原型和构造函数封装粘合在一起！

function Person(name, age) {  //私有属性和方法使用 构造函数；        this.name = name;        this.age = age;        //原型的初始化，只有初始化1次就可以了，没有必要每次构造对象都要初始化； 公共属性和方法 使用原型        if (typeof  this.run != 'function') {            Person.prototype.env = "earth";            Person.prototype.run = function () {                return this.name + this.age + '正在' + this.env + '跑步中！'            }        }    }    var p1 = new Person('小马', 18);    var p2 = new Person('小杨', 28);    alert(p1.run());    alert(p2.run());

 

JavaScript 原型链（实现继承）

// JavaScript 原型链实现继承！function Biology() {    this.cells=function() {        return '细胞'    }}function Animal() {    this.breathing=function() {        return '呼吸'    }}function Person() {    this.walk=function() {        return '走路'    }}Animal.prototype=new  Biology(); //动物继承生物类Person.prototype=new  Animal(); //人类继承了动物类，此时人拥有了 生物类和 动物类的所有特征！var p1= new Person();alert(p1.cells());alert(p1.breathing());alert(p1.walk());

 

由于原型链继承无法动态传参，实现面向对象的多态性， 所以使用 原型链+对象冒充的方式实现继承；

//使用对象冒充 + 原型链  继承function Animal (username,age) {    this.username=username;    this.age=age;}Animal.prototype.sex=function () {    return this.username+this.age+'运行中'};function Person(name1,age) {    Animal.call(this,name1,age)  //对象冒充只能继承 私有属性无法 继承公共属性}Person.prototype=new Animal(); //原型链继承(共享属性和方法 )var p1= new Person('小红',19);var a1=new Animal('小狗',2);alert(p1.sex());alert(a1.sex())