韩顺平JS笔记完整版 - 图文

JS笔记

Javascript的基本介绍

? JS是用于WEB开发的脚本语言： ? 脚本语言是什么：

? 脚本语言往往不能独立使用，它和HTML/JSP/PHP/ASP.NET配合使用 ? 脚本语言也有自己的变量，函数，控制语句（顺序，分支，循环）

? 脚本语言实际上是解释性语言（即在执行时直接对源码进行执行），编译性语言效率会更高一些

? Java程序.java→.class→jvm ,js→浏览器（js引擎来解释执行） ? Js主要在客户端（浏览器）执行

因为js是由浏览器来执行的，因此这里有个问题，不同类型的浏览器可能对js的支持不一样。

? 开发工具的选择：记事本 myeclipse

案例：1

需求：打开网页后，显示hello ！

?

问题：

? js的位置可以随意放

? js必须使用

? 在一个html文件中（JSP/PHP/ASP.NET）可以出现多对（script）片段，浏览器会按照

先后顺序依次执行

案例2:

? 如何定义变量： ? 如何运算：

Js的变量类型是怎样决定的

1) Js是弱数据类型语言，即：在定义变量时候，统一使用var表示，甚至可以去掉

var这个关键字

2) Js中的变量的数据是由js引擎决定的 var name=”shunping”; //name是字符串 var kk=2 //kk是数字

name=234; //这时name自动变成数 ? Js的命名规范（函数/变量）：

?

1) 2) 3) 4) 5) 6) ?

使用大小写字母，数字，$可以命名 不能以数字打头

不能使用js保留字和关键字（即java里的关键字） 区分

单行注释大小写：// 多行注释：/*…….*/

Js的数据类型： 基本数据类型3种

1数值类型

特殊数值：1)NaN 不是数字 var a=”abc”

window.alert(parseInt(a));

2） Infinity 无穷大

window.alert(6/0);

3)isNaN() 如果是数字的话返回false 4)isFinite() 如果是无穷大返回false 2.字符串类型

可以用双引号 也可以用单引号 ，单个字符也可以看成字符串，有特殊字符用\\转义 window.alert(\输出asada”r 3.布尔类型 true false

通过typeof可以看到变量的具体数据类型

举例：

?

?

复合数据类型 ? 数组 ? 对象 特殊数据类型

? Null 即：var a=null ? Undefine

即：如下代码

?

Js定义变量，初始化，赋值 1)定义变量： 即var a

2)初始化： 即在定义变量时就给值

3)赋值： 即：比如你先定义一个变量 var tt ，然后再给值：tt=780； ? js数据类型转换：

1)自动转换

例子：var a=123; //a是数值 a=”hello” //a的类型是string 2)强制转换

例子：字符串转换成数字 var a=\” ;

a=parseInt(a); //使用系统函数强制转换

var b=90 ; //b是number b=b+””, //b就是string

? 运算符

+ — * / %

%(取摸：即两个数相除的余数) 强调：取模主要用于整数之间取模

例子：编写一个程序，判断两个数是否能够整除

?

++， 运算符

a++ --> a=a+1 b-- = b=b-1

++a 表示先把自己加1再赋值 --a 表示先把自己减1再赋值

例子：

var a=56;

var b=++a;

window.alert(b); b=57 window.alert(a); a=57

?

--运算符

var a=56;

var b=--a;

window.alert(b); b=55 window.alert(a); a=55

window.prompt(); prompt() 方法用于显示可提示用户进行输入的对话框。 document.write() :向浏览器输出内容

var num1=window.prompt(\请输入一个数\输入1.1 var num2=window.prompt(\请再输入一个数\输入1.1 document.writeln(\这两个数的和是\//此时都当成字符串考虑，输出1.11.1

document.writeln(\这两个数的和是\//此时输出2.2

这个案例中不写parseFloat也是可以的 逻辑运算符： （1） 与&&

If（逻辑表达式1&&逻辑表达式2）{}

如果 逻辑表达式1为true 则JS引擎会继续执行逻辑表达式2 如果 逻辑表达式1为false则不会执行逻辑表达式2 （2） 或 ||

在JS中，||究竟返回什么值，这是一个非常重要的知识点

结论：将返回第一个不为false的值（对象亦可），或者是返回最后一个值（如果全部都是false的话）,返回的结果不一定是布尔值 案例1： var a=true; var b=false;

window.alert(a||b);

输出true 案例2： var a=4; var b=90; var c=a||b;

window.alert(c); 输出：4 案例3： var a=0; var b=90; var c=a||b;

window.alert(c); 输出：90 案例4： var a=0; var b=\var d=false; var c=a||b||d; window.alert(c);

输出：false 如果是var c=a||d||b;返回空串 案例5： var a=0; var b=\var c=false;

var d=new Object(); var k=a||b||c||d; window.alert(k); 输出类型是object

（3）非！

特别说明：在逻辑运算中：0，””，false，null，undefined，NaN均表示false 除了这些均表示真的。 var a=0; if(!a){

window.alert(“OK”); }

输出OK

JS的位运算和移位运算，规范和java一致 var a=4>>2; 结果是1 var a=-4>>2; 结果是-1 JS的控制语句： 1） 顺序控制

对变成而言，不控制其流程就是顺序执行。

2） 分支控制

2.1单分支 If(条件表达式){ 语句；

}

2.2 双分支 If(条件表达式){ }else{ }

2.3多分支

If(条件表达式1){

}else if。。。（条件表达式2）{ }else{//else可有可无 }

案例：如果是男同志，上男厕所，女同志上女厕所，否则不上厕所 var sex= window.prompt(\请输入性别\if(sex==\男\

window.alert(\上男厕所\}else if(sex==\女\

window.alert(\上女厕所\}else{

window.alert(\不上厕所\}

注意：JS中字符串比较也要用==

一旦找到了一个满足条件的入口，执行完毕后，就直接结束整个多分支 switch语句： 基本语法： switch(表达式){ //执行语句； case 常量1：

break； //跳出整个switch 。。。。。 default: 语句； break; }

结论：1）JS的switch语句的常量数据类型可以是JS支持的任何类型（对象和数组除外）。

2） case后面的值数据类型可以是任意的。 3） break作用是跳出整个switch 4） 如果没有匹配的则执行default

for循环 while循环 do while循环

案例：求1！+2！+3！+…….+n!

var n=window.prompt(\请输入一个数\sum=0; temp=1;

for(var i=1;i<=n;i++){ for(var j=1;j<=i;j++){ temp=temp*j; }

sum=sum+temp; temp=1; }

document.writeln(sum);

在ie8中，我们可以通过工具来对JS代码进行调试，尤其页面比较复杂的情况下非常有用。

在ie8中，通过开发人员工具，就可以进行JS的调试工作。

案例：打印出半个金字塔，整个金字塔，空心金字塔，菱形，空心菱形的代码见字塔.html文件

函数的学习：

函数的基本概念：为完成某一个功能的代码（语句，指令）集合 基本语法：

function 函数名（参数列表）{ 语句；//函数（方法）主体 return 返回值； }

说明：

1.参数列表：表示函数的输入 特别强调：参数名前不要带var 2.函数主体：表示为了实现某一功能代码块 3．函数可以有返回值也可以没有 入门案例：

把上面的函数单独提出，然后在需要的地方引入 案例：

function.html文件

function.js文件 //自定义函数

function jiSuan(num1,num2,operator){ var res=0;

if(operator==\res=num1+num2; }

else if(operator==\res=num1-num2; }

else if(operator==\res=num1*num2; } else{

res=num1/num2; }

return res; }

对中文进行编码escape 把编码再转换成中文unescape

window.moveTo(200,200);//指定窗口的位置 window.resizeTo(300,400);//重置窗口的大小

案例一： Js文件：

function test(val){

window.alert(\你得输入是\return 90; }

html调用：

test(\传统的调用方式 //window.alert(test);//把函数全部打出来 var myvar=test;

window.alert(myvar); myvar(\中国北京\输出：

函数的调用方式

1.普通调用

函数名（实际参数）；

2.通过指向函数的变量去调用 var myvar=函数名; myvar（实际参数）

3.关于接收函数返回值得讨论 var myvar=test(\输出abc

window.alert(myvar); //输出90，如果函数没有返回值则返回undefined，如果有返回值，则返回什么就是什么

递归：

Js文件：

调用：abc（5）； 输出：3 3 4

特别强调：JS的函数天然支持可变参数,函数不可以重名 案例：

//编写一个函数，可以接收任意多个数，并计算他们的和 function abc2(){

//在JS中有一个 arguments可以访问所有传入的值 //window.alert(arguments.length);//得到参数的个数 //遍历所有的参数 var sum=0;

for(var i=0;i

window.alert(sum); }

调用：abc2(12,12,12,12); 结果是48

abc2(); 结果是0

数组：

数组，这种数据类型（引用类型/复杂类型/复合类型），数组的基本概念：用于存放一组数据。

特别强调：JS中的数组，可以存放各种数据类型（数值/字符串…） 快速入门案例：

var weights=[3,5,1,3.4,2,50]; var allweights=0; //数组的遍历

for(var i=0;i

document.writeln(\总体重是\var avgweight=allweights/weights.length; //如果你想知道数据类型是什么

//window.alert(avgweight.constructor); //window.alert( typeof avgweight);

document.writeln(\平均体重是\保留两位小数 数组的细节 基本语法：

var 数组名=[元素值，元素值…] 元素的值可以是任意类型 var an=[1.23,”hello”,true,2];

数组在内存中的存在形式：

内存数据调用案例：

输出：900

内存数据分析:

JS中的数组是引用传递 案例

输出：35 90 900

内存数据调用分析：

JS的数组可以动态增长

思考2，动态增长的 输出56 数组的长度变为3

数组的引用 基本用法：

数组的名称[下标];

比如：var a=[23,”hello”,4.5] 我们访问a[2]则输出4.5

如果我们访问a[3]则输出undefined 结论：不能访问不存在的元素 数组的下标是从0开始编号的

对字符串进行分割，形成一个字符串数组 用split函数 var str=\姜爽 hello world\str=str.split(\

//拆分字符串，可以得到一个数组，取前两个元素，以空格进行分割，如果没有参数2，则全部输出

for(var i=0;i

输出：abc 姜爽 了解：

输出： 0=45 1=90 2=0

gg=9000

a[1][1] 4.5

二维数组的遍历：

输出：shunping 123 4.5 a b c

优化排序：

优化的好处：如果是有序的，无须再次排列

输出：找到 下标为4

数组转置：

输出：

JS面向（基于）对象编程

1. 澄清概念

JS中基于对象等同于面向对象

JS中没有class，但是有新的名字叫做原型对象，因此类等同于原型对象 2. 为什么需要面向对象

入门案例：

/*张老太太养了两只猫猫：一只名字叫小白，今年3岁，白色。 还有一只叫小花，今年10岁，花色。请编写一个程序，当用户 输入小猫的名字时，就显示该猫的名字，年龄，颜色。如果用 户输入的小猫名字错误，则显示张老太太没有这只猫。 */

//这里就是一个Cat类 function Cat(){ }

var cat1=new Cat();//这时cat1就是一个对象 cat1.name=\小白\cat1.age=3;

cat1.color=\白色\

//从上面的代码我们可以看出

//1.JS中的对象的属性可以动态的添加 //2.属性没有限制

window.alert(cat1.name);输出小白

类（原型对象）和对象的区别和联系 1） 类是抽象的概念，代表一类事物 2） 对象是具体的，代表一类实体

3） 对象是以类（原型对象）为模板创建起来的

创建对象的方式有5种

1） 工厂方法—使用new Object创建对象并添加相关属性 2） 使用构造函数来定义类（原型对象） 3） 使用prototype

4） 构造函数及原型混合方式 5） 动态原型方式

方法选择：使用构造函数来定义类（原型对象），然后再创建实例

基本语法：

function 类名/原型对象名(){ }

创建对象：var 对象名=new 类名(); 在对象中我们特别说明： 1） JS中一切都是对象

function Person(){}

window.alert(Person.constructor); var a=new Person();

window.alert(a.constructor);//对象实例的构造函数 window.alert(typeof a);//a的类型是什么 var b=123;

window.alert(b.constructor); 输出：

如何判断一个对象实例是不是某个类型 方法1：

if(a instanceof Person){

window.alert(\是Person\}

方法2：

if(a.constructor==Person){ window.alert(\是Person\}

补充说明：带var和不带var的区别 var abc=89;//全局变量 function test(){ abc=900; }

test();

window.alert(abc); //输出900，var abc=900;则输出89

访问对象的属性的方法：2种 1） 普通方式：对象名.属性名 2） 动态访问：对象名[“属性名”] 案例：

1.function Person(){} var p1=new Person(); p1.name=\姜爽\

window.alert(p1.name); var val=\

window.alert(p1[\window.alert(p1[val]);

对象的引用问题说明： 2.function Person(){} var a=new Person(); a.age=10;

a.name=\小明\var b=a;

b.name=\小白\

window.alert(b.age+\名字\名字\输出：10名字小白名字小白 对象回收的机制： GC

JS引擎（浏览器的部分）有一张表

堆地址 引用的次数

0x1234 2 b=null 1

a=null ->0

JS提供一种方式主动释放内存

delete a.age;//用于删除属性 指向同一个地方，一个删了b就访问不到了 这样就会立即释放对象的属性空间

this讲解： 问题的提出：

function Person(){}; var p1=new Person(); p1.name = \老韩\p1.age = 30;

window.alert(p1.name+\var p2 = new Person(); window.alert(p2.name);

这里我们可以看到 window.alert(p2.name)会输出 undefined

在实际编程中,我们可能有这样的需求,当我们创建一个对象后,就希望该对象自动的拥有某些属性

[比如:当我们创建一个Person对象后,就希望该对象自动拥有name和age属性,这又怎么办?

使用this 来解决 function Person(){ this.name=\ this.age=30; }

var p1 = new Person(); var p2 = new Person();

window.alert(p1.name+\

◇可能有人会这样去思考问题 //***有些同学可能会这么想: function Person(){

var name=\如果这样去使用name这个属性是私有的 var age=30;

this.name2=\表示name2这个属性是公开的 }

var p1=new Person();

window.alert(p1.name+\错误

这样使用会报 undefined，私有的外部访问不到

function Person(){

var name=\私有的,只能在内部使用 var age=30;//私有的,只能在内部使用

this.name2=\表示name2这个属性是公开的

this.show=function (){//函数 这就是Person类里面的一个公开的方法 window.alert(\}

function show2(){//这就是Person类里面的一个私有的方法,只能在类内部使用, //如要一定要使用,只能通过公开方法(特权方法)来调用私有方法来实现 window.alert(\ } }

var p1=new Person(); p1.show();

//p1.show2();//这里会报错

//window.alert(p1.name+\错误的

记住一句话:

哪个对象实例调用this所有的函数,那么this就代表哪个对象实例 function test1(){ alert(this.v); }

var v=90;

window.test1();//等价于test1() window调用test1()，所以this就代表window 输出90

this注意事项:

this不能放在类的外部使用,否则调用就变成window调用了

对象---成员函数（方法）

比如我们希望对象不但有属性，还需要他有行为，行为在程序中要靠函数来体现。 function Person(name,age){

//使用传递的实际参数去初始化属性 this.name=name; this.age=age;

//输出自己的名字,这里this.show就是一个公开的函数，函数名字是show this.show=function(){

document.write(\名字\}

//添加计算函数，可以计算从1+....+100的结果 this.jisuan=function(n){ var res=0;

for(var i=1;i<=n;i++){ res+=i; }

return res; } }

var p1=new Person(\宋江\p1.show();

document.write(\

输出：名字宋江

5050

给一个对象添加(指定)函数的几种方式

1. 通用常用方式:上面的函数，知道这种通用的方式即可 2.方式二: function Person(){ this.name=\ this.age=30; }

function show1(){

window.alert(\}

var p2 = new Person();

p2.abc=show1;//记住不要加括号

p2.abc(); //输出helloabc window.alert（p2.abc）；会把函数打出来 3.方式三: function Person(){ this.name=\ this.age=30; }

var p3 = new Person(); p3.show=function show2(){

window.alert(\}

p3.show(); //输出helloabc

题1.

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

function show1(){

window.alert(\

//是window调用的name就是window的name }

var p2 = new Person(); p2.show=show1;

show1();//注意思考会输出什么?提示谁调用它.this就代表谁 答案:name:空白(undefined) 题2.

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

var name=\

function show1(){

window.alert(\}

var p2 = new Person(); p2.show=show1; show1();

答案:name:abc2 4.方式四: 前几种方法有一个问题，那就是以上对象独占函数代码，这样如果对象过多，则会影响效率，js设计者，给我们提供了别一个方法，原型法：这样多个对象可以共享函数代码，代码如下：

function Dog(){ }

//使用prototype去绑定一个函数给shout Dog.prototype.shout=function(){ window.alert('小狗'); }

var dog1=new Dog(); dog1.shout();

var dog2 = new Dog(); dog2.shout();//ok

window.alert(dog1.shout==dog2.shout);//返回true，说明是共享的函数 //扩展

var dog3 = new Dog(); var dog4 = new Dog(); var dog5 = dog4;

window.alert(dog3==dog4);// false 不是同一个对象 window.alert(dog4==dog5);// true

对代码原理说明图：

补讲 == 号的作用

1. 当 == 的两边 都是字符串的时候，则比较内容 相等否。 2. 如 == 的两边 都是数字的时候，则数的大小是否相等。

3. 如 == 的两边 是对象或对象中的函数属性，则比较地址是否相等。

加深对类和对象的认识

如何给类添加方法（如何给某类型的所有对象添加方法） 案例1：

//初步体验Object类,通过Object直接创建对象 var p1 = new Object(); p1.name = \

window.alert(p1.name);

window.alert(p1.constructor);

案例2：

var i = new Number(10); //我们可以给类添加方法.

Number.prototype.add=function(a){ return this+a; }

window.alert(i.add(10).add(30)); var b= 90;

window.alert(b.add(40)); //输出50 130

请思考给js的Array对象扩展一个find(val)方法,当一个Array对象调用该方法时候,如果能找到val则返回其下标,否则返回-1; 案例：

//体验一下Array

var arr1=new Array(); arr1[0]=\arr1[1]=\arr1[2]=\//遍历数组

for(var i=0;i

//使用Array提供的方法来颠倒数据 arr1.reverse();

document.write(\for(var i=0;i

输出：s1 s2 s3

s3 s2 s1

//现在我们一起看看如何给所有Array对象添加一个方法find(val) Array.prototype.find=function(val){ //开始遍历数组this

for(var i=0;i

}

return -1; }

document.write(\下标是\输出：下标1

闭包

这个知识点，在讲到封装的时候再说！

成员函数的细节

1成员函数的参数可以是多个

function 函数名（参数......）{ }

2成员函数可以返回值,也可以没有,但是有的话,最多只有一个 function 函数名(参数列表){ 语句;//函数主体 return 返回值; }

3.js中不支持函数的重载,具体案例

function test(a,b){

window.alert(\}

function test(a){ window.alert(a); }

function test(a,b){

window.alert(a+\}

test(23); //输出23 undefined

window.test(3,\输出3 hello

结论:1.js在调用一个函数的时候,是根据函数名来调用的,如果有多个函数名相同,则

认最后那一个函数.

2.直接定义一个函数或者变量,实际上这些函数和变量就是全局函数和全局变量

(本质上他们是属于window对象的)

◆ 面向对象综合案例

游戏的分析:

1. 看看如何通过按钮来控制mario的位置 2. 设计相关的对象(Mario x, y......)

基本代码给大家:

要求:1. mario碰到边界给一个提示 2. mario 可以去找另外一个物体

构造函数：

基本用法

function 类名（参数列表）{ 属性=参数值； }

案例：

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

//创建Person对象的时候，就可以直接给名字,年龄 var p1=new Person(\顺平\

特别说明：在给一个对象初始化一个属性值的时候，也可以指定函数属性 案例：

function jisuan(num1,num2,oper){ if(oper==\

return num1+num2; }

else if(oper==\return num1-num2; }

else if(oper==\return num1*num2; } else{

return num1/num2; } }

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

var p1=new Person(\

window.alert(p1.myfun(89,90,\输出179

创建对象的另一种形式：

如果一个对象比较简单，我们可以直接创建。可以指定普通属性和函数属性。 var dog={name:\小狗\age:8,

fun1:function(){window.alert(\fun2:function(){window.alert(\};

window.alert(dog.name+dog.age); window.alert(dog.constructor); dog.fun1(); dog.fun2();

有时我们会看到这样一种调用方法：函数名.call（对象实例） 这样调用,该函数的this就是这个对象实例。 小案例：

var dog={name:\function test(){

window.alert(this.name); }

test.call(dog);//==dog.test; 输出：hello

for ..in的用法

var dog={name:\小明\//循环列出 dog对象的所有属性和方法 对象名[\属性名\for(var key in dog){

window.alert(key+\属性 dog[key]属性值 }

//遍历window对象的所有属性 for(var key in window){

document.write(key+\}

JS面向对象编程的三大特性

1封装

js提供有以下几种控制方法和属性的访问权限: 1)公开级别:对外公开

2)私有级别:类本身可以访问,不对外公开 案例：

function Person(name,age,sal){ this.name=name;//公开的属性 var age=age;//私有的属性 var sal=sal;//私有的属性

//在类中如何定义公开方法（特权方法），私有方法（内部方法） //如果我们希望操作私有的属性则可用公开方法去实现 this.show=function(){

window.alert(age+\}

//私有方法,可以访问对象的属性 function show2(){

window.alert(age+sal); } }

var p1=new Person(\

p1.show();//这个可以成功//不能在类的外部去访问私有的方法 p1.show2();//不能在类的外部去访问私有的方法 特别强调：

我们前面学习的通过prototype给所有的对象添加方法，但是这种方式不能去访问类的私有变量和方法。 function Person(){

this.name=\var age=90;

this.abc=function(){ window.alert(\}

function abc2(){ window.alert(\} }

Person.prototype.fun1=function(){ window.alert(this.name);//ok //window.alert(age);//no ok //abc2();//no ok this.abc();//ok }

var p1=new Person(); p1.fun1();

2.继承

1）为什么需要继承

//解决代码冗余问题-->继承

//抽象出一个学生类，即把中学生和小学生的共性拿出来 function Stu(name,age){ this.name=name; this.age=age;

this.show=function(){

window.alert(this.name+\} }

function MidStu(name,age){ this.stu=Stu;

this.stu(name,age);

//JS中实际上是通过对象冒充来实现继承，这句话不可少，因为JS是动态语言，如果不执行，则不能实现继承效果 }

function Pupil(name,age){ this.stu=Stu;

this.stu(name,age); }

var midStu=new MidStu(\顺平\midStu.show(); 特别说明：

通过对象冒充，JS可以实现多重继承的效果，用的少. JS的函数重载和重写的问题

重载：JS中不支持重载，即不可以通过参数的个数或者是类型来决定调用哪个函数，但是因为JS天然的支持可变参数的，所以，它可以是看成天然支持重载。 function abc(){

if(arguments.length==…){

}else{ }

重写：子类可以重新写函数来覆盖父类的某个方法 父类：

function Stu(name,age){ this.name=name; this.age=age;

this.show=function(){

window.alert(this.name+\}

子类：

function MidStu(name,age){ this.stu=Stu;

this.stu(name,age);//JS中实际上是通过对象冒充来实现继承，这句话不可少 //MidStu可以覆盖Stu父类的show方法 this.show=function(){ window.alert(\} }

var midStu=new MidStu(\顺平\midStu.show(); //这里调用的是子方法

多态的例子： function Master(){

this.feed=function(animal,food){

window.alert(\主人给\喂\} }

function Food(name){ this.name=name; }

function Fish(name){ this.fish=Food; this.fish(name); }

function Bone(name){ this.bone=Food; this.bone(name); }

function Animal(name){ this.name=name; }

function Cat(name){ this.cat=Animal; this.cat(name); }

function Dog(name){

this.dog=Animal; this.dog(name); }

var master = new Master(); var cat=new Cat(\小猫\var fish=new Fish(\鱼\master.feed(cat,fish); 输出：主人给小猫喂鱼

补讲闭包： 解释：

1） 闭包和垃圾回收gc是相关联的

2） 闭包实际上是在涉及到一个对象的成员属性何时被gc处理的问题 3） 怎样才能对对象的属性形成一个闭包

案例：

//闭包closure function A(){ var i=0;

function b(){

window.alert(i++); }

return b; }

//A();//此时内存中有i的空间就被回收了

var c=A();//这种用法gc不会把i当成垃圾处理 c();//0

c();//0从而证明i被闭包了

JS内部类

JS中本身提供了一些可以直接使用的类，这些类就是内部类。 主要有：

Object Array Border String Date Number Math RegExp Boolean

内部类的分类

从使用的方式看：分为静态类和动态类 静态类的使用：类名.属性/方法 比如：Math

动态类的使用：var 对象=new 动态类（） 对象属性或方法 案例：

//Math(静态类)

window.alert(Math.abs(-12)); //显示当前的时间(动态类) var date=new Date();

window.alert(date.toLocaleString());

Math

看看几个常用的方法 alert(Math.ceil(4.5));//5 alert(Math.floor(4.5));//4 alert(Math.round(4.77));//5

alert(Math.random());//0到1之间的随机小数

Date类

var date=new Date();

window.alert(date.toLocaleString()); //window.alert(date.getYear()); String类

String是一个动态类，常用案例举例 var str=\alert(str.length);//11

var str2=\

var arr=str2.split(\如果(\就是一个一个的分 alert(arr);

var str3=\

alert(str3.substr(1,3));//bcd alert(str3.substring(1,3));//bc

var str4=\

alert(str4.charAt(3));//d

var str5=\alert(str5.indexOf(\

//返回某个指定的字符串值在字符串中首次出现的位置。1:从下标为1的开始找

Array类 是一个动态类 常用的方法

var myarr=new Array(); //动态的添加数据 myarr[0]=\myarr[1]=90;

alert(myarr.length+\myarr.pop();//出栈

alert(myarr.length+\myarr.push(\

alert(myarr.length+\

var myarr2=new Array(2); alert(myarr2.length);//2 myarr2[0]=\myarr2[1]=90; myarr2[2]=90;

alert(myarr2+\不报错，正常sp 90 90 3 //myarr2[81]=90;//不要跳过下标放值 myarr2[\

alert(myarr2[\

Boolean 是动态类

Number类 var a=890.678; a=a.toFixed(2);

alert(a);//890.68 四舍五入保留两位小数

var b=10;

//把10 的二进制显示出来

alert(b.toString(2));//1010 toString(8)8进制

JS事件驱动编程 JS中的事件主要分为4种： 1） 鼠标事件

click dblclick mousedown mouseout mouseover mouseup mousemove

2） 键盘事件

keydown keypress keyup

3） HTML事件

window的onload unload error abort 文本框的select change

4） 其他事件

页面中有些特殊对象运行过程中产生的事件 快速入门案例 案例1：

监听鼠标点击事件，并能够显示鼠标点击的位置x,y function test1(e){

window.alert(\}

点击浏览器之后，显示坐标

案例2：点击按钮，图片变成红色，黑色

1） 方法：JS访问内部css

//js如何访问css属性，来改变外观 function test3(e){

var pic=document.getElementById(\if(e.value==\红色\

pic.style.backgroundColor=\}

else if(e.value==\黑色\

pic.style.backgroundColor=\} }

2） 方法：JS访问外部css

event2.css文件：

.style{ border:1;

background-color:red; width:300px; height:300px; }

event2.html文件：

function test3(e){

//取连接的第一个css文件的内容用0

var ocssRules=document.styleSheets[0].rules; //从ocssRules取出你希望的样式

var style=ocssRules[0];//这里面的0表示event2.css文件中第一个规则 if(e.value==\黑色\

style.style.backgroundColor=\}

else if(e.value==\红色\

style.style.backgroundColor=\} }

一个事件可以被多个函数监听 function test(e){ window.alert(\}

function test1(e){

window.alert(\}

window有3个事件 onload:页面打开

onbeforeunload:关闭页面之前 onunload关闭页面

Dom编程 为什么要学习dom编程：

1）Dom编程 重要的作用是可以让用户对网页元素进行交互操作。 2）Dom编程 用来做一些网页游戏 3) Dom编程也是ajax的重要基础

从dom编程的角度就会把该html文档当成dom树

bom

bom(browser object model)浏览器对象模型

因为做浏览器的厂家很多W3C就定义一个做浏览器的规范 bom和dom关系密切

本文来源：https://www.bwwdw.com/article/itdg.html