韩顺平javascript笔记(全套).doc

韩顺平2011javascript笔记（全）JavaScript1. javascript基本介绍：(1) javascript是实现网页动态效果的基石，在web的开发中扮演重要的角色，被广泛的应用到各个领域：网页游戏地图搜索股市信息查询web聊天(2) 在web开发中，js是必不可少的技术，同时js也是ajax/jquery/extjs等框架的基础。(3) javascript是一种广泛用于客户端WEB开发的脚本语言，常用来给HTML网页添加动态的功能，比如响应用户的各种操作。2. 脚本语言：(1) 脚本语言往往不能独立使用(单独使用没有什么意义)，它一般与html/asp/jsp/php(2) 脚本语言有自己的变量，函数，控制语句。(3) 脚本语言是一种解释性语言。3. JS一般在客户端的浏览器执行。但也可以对服务器进行编程(非常少)4. JavaScript简介JavaScript是一种解释型的语言。Javascript并不是java的一种java脚本语言，除了名字都带有java这个此外，两者并没有任何关系。Javascript的第一个版本出现在Netscape Navigator2浏览器中。人们最初给javascript起的名字是LiveScript。然而由于，当时java技术的正是如日中天，netscape公司给livescript改名为javascript，以便是人们更加注意javascript。随着javascript的发展，微软公司决定在IE浏览器中加入微软的品牌的javascript，即Jscript。脚本语言不仅只有javascript的一种，还有其他的脚本语言，如VBscript和perl语言(1) 标记：第一个简单的javascript程序在网页中添加标签中添加javascript代码，在之间的代码块，不是用于显示html元素，而是需要浏览器进行处理的脚本代码，在标记和对应的标记之间包围的代码块，称为脚本块。标记可以放在html页面的头部，即之间。标记具有一些属性，其中最重要的属性就是type属性。前面提到了javascript并不是唯一可用的脚本语言，可以的脚本语言需要按不同的方式进行处理。我们需要浏览器，在当前的页面中我们所使用的是何种脚本语言。document.bgColor=red;Example 1.1 hello worlddocument.write(hello world);您的浏览器不支持javascript，请检查浏览器的版本或者安全设置，谢谢*是一种防御性编码，如果用户的浏览器不支持javascript或者是设置过高的安全级别，那么就会显示出相应的提示洗洗，避免了在用户不知情下停止运行或者的都错误结果。* (2) 在javascript中用分号表示一个语句的结束(3) Javascript是弱类型语言。什么叫做弱类型语言。在强类型语言中，使用变量之前，必须先声明变量的类型，才能使用。而javascript则不需要这样使用。5. 案例1：你的第一个程序，javascript高手都是从这里开始的，这个程序完成一个非常简单功能，在网页中弹出一个对话框，显示“hello world！”第一个javascript程序window.alert(hello world);(1) js的位置：js的位置可以随意，但是一般用在标签(2) js必须用js代码如果没有使用包含起来的话，则浏览器则会视为普通文本6. 案例2：对前面的程序，改成一个简单加法运算程序第一个javascript程序/*js中的变量定义，变量都用var表示，不管实际类型怎样*/var num1=456;var num2=226;var result=num1+num2;window.alert(结果是+result);u js的变量的类型是怎样决定？(1) js的数据类型是弱数据类型语言。即在定义变量的时候，统一使用var表示，甚至可以去掉var关键字(2) js中的数据类型是有js引擎来决定的。数据类型可以变化的。var name=”shopping”;/js引擎知道name是字符串name=22;/这时name自动变成了数varkk=2;/kk是整数vary y; /y是undefined类型7. javascript中的标识符标识符指的是javascript中定义的符号，例如，变量名，函数名，数组名等。标识符可以有任意顺序的大小小字母、数字，下划线和美元符号（$）组成，但是标识符不能以数字开头，不能是javascript的保留关键字。8. javascript是严格区分大小写的。javascript中每条语句用分号“;”结束。9. 注释：单行注释/ 多行注释 /* */10. javascript的基本语法-数据类型： 基本数据类型：通过typeof关键字，可以看到数据的类型(1) Number(数值类型) 整型常量（10进制8进制16进制）16进制以0x或者是0X开头，例如：0x83;8进制必须以0开头： 实型常量12.32 193.98 5E7等 特殊数值：NaN(not is a number)、Infinity、isNaN()、isFinite()(2) Boolean(布尔类型)true和false(3) String 字符串“this is a book” 复合数据类型： 特殊数据类型：(1) undefine的例子：var a;window.alert(a的数据类型+typeof a);(2) null的例子：var a=null;window.alert(a的数据类型+typeof a);11. javascript的基本语法-定义变量、初始化、赋值：(1) 定义变量：var a;(2) 初始化变量：在定义变量的时候，就赋值：var a=45;(3) 给变量赋值：先定义变量：varnum;再赋值：num=3312. javascript的基本语法-数据类型转换：(1) 自动转换：javascript的数据类型是动态的请看一个案例：/ num先定义成Number数据类型varnum=22;num=hello word;window.alert(num的数据类型+typeofnum);(2) 强制转换：请看案例：如何将字符串转换成数字/ num先定义成String数据类型var s=123;varnum=parseInt(s);window.alert(typeofnum);13. javascript中的运算符和java中的一样的,但是有几个注意点：(1) 案例一：b先转成9，在比较var a=9;var b=9if(a=b)window.alert(“ok”);elsewindow.alert(“faile”);(2) 在逻辑运算中，0、“”、false、null、undefined、NaN均表示falsevar a=0;if(a)window.alert(“ok”);elsewindow.alert(“faile”);14. 函数：为完成某一个功能的代码的集合。函数定义： function 函数名(参数列表)语句;/函数(方法)主体return 返回值;函数名位于关键字function之后，为了让代码易于理解，函数名应具有一定的意义。注意点：函数没有返回值类型。形参数不写具体的类型。15. eval()可以将一个字符串当成一个脚本运行例如：varstr=”window.alert(“ok”)”;eval(str);16. escape()可以将中文或日文转为ascii码：unescape()反之。一般这个函数相互配合，防止在浏览器中出现乱码：varstr=”江西”;var str2=escape(str);/转回来var str3=unescape(str2);17. 数组：(1) 为什么需要数组？将一组数据放在一起，组成集合。它由一对方括号包围，数组的每个元素用逗号分隔，数组元素可以是任意类型的数据(2) 创建数组：var数组名=元素值，元素值，例如：var a=“shopping”,123,1.1,4.5,true(3) 二维数组：var a=1,2,3,“hello”,”world”,”jiangxi”=Js面向（基于）对象编程一、 澄清概念js中 基于对象= js面向对象js中没有类class,但是它取了一个新的名字叫 原型对象 ，因此，类=原型对象二、 为什么需要对象问题提出：/*张老太养了两只猫：一只名字叫小白，今年3岁，白色，还有一只叫小花，今年10岁，花色。请编写一个程序，当用户输入小猫的名字时，就显示该猫的名字，年龄，颜色。如果用户输入小猫的名字错误时，则显示张老太没有这只猫猫。*/传统方法比较麻烦cat1_name=小白;var cat1_age=3;var cat1_color=白色;/解决办法,把猫的属性集中,创建一种新的数据类(原型对象/类)/用面向对象的方法来解决上面的问题/这里就是一个类cat类function cat()/如果这样用/cat()/函数var cat1 = new cat()/类/这时cat1就是一个对象(实例)=小白;cat1.age=3;cat1.color=白色;/从上面的代码我们可以看出/1.js中的对象的属性可以动态添加/2.属性没有限制window.alert(+cat1.age+cat1.color+cat.hobby);三、 类(原型对象)和对象的区别和联系(1) 类是抽象的,概念,代表类事物(2) 对象是具体的,体表一个实体(3) 对象是以类(原型对象)为模板创建起来的实体四、 创建对象的方式有五种(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);/a 对象实例的构造函数window.alert(typeof a);/a 的类型是什么var b=123;window.alert(b.constructor);window.alert(typeof b);var c=123;window.alert(c.constructor);window.alert(typeof c);/思考:如何判断一个对象实例是不是Person类型?if(a instanceof Person)window.alert(a 是 Person1);if(a.constructor=Person)window.alert(a 是 Person2); 五、 补充说明(全局变量与局部变量的区别)/全局变量var abc=89;function test()/在函数里,如果不带var,则表示使用全局的abc变量/如果带var,则表示在test()中,定义了一个新的abc变量(局部变量)abc=900;test();window.alert(abc);访问对象的属性有两种方法:(1) 普通方式对象名.属性名(2) 动态访问对象名“属性名”function person()var p1= new person();=阿华;window.alert();/普通方式window.alert(p1name);var val=na+me;window.alert(p1val);/动态方式对象引用问题的说明(图)js还提供一种方式,主动释放对象内存delete 对象名.属性、;/这样就会立即释放 对象的这个属性的空间六、 this问题的提出:function Person();var p1=new Person(); = 老韩;p1.age = 30;window.alert(+ +p1.age);var p2 = new Person();window.alert();/这里会输出什么呢?(undefine);这里我们可以看到 window.alert()会输出 undefined在实际编程中,我们可能有这样的需求,当我们创建一个对象后,就希望该对象自动的拥有某些属性比如:当我们创建一个Person对象后,就希望该对象自动拥有name和age属性,这又怎么办?使用this 来解决function Person()=abc;this.age=30;var p1 = new Person();var p2 = new Person();window.alert(+ +);可能有人会这样去思考问题/*有些同学可能会这么想:function Person()var name=abc;/私有的,只能在内部使用var age=30;/私有的,只能在内部使用2=abc2;/2 表示name2这个属性是公开的this.show=function ()/函数 这就是Person类里面的一个公开的方法window.alert(name+name+age+age);function show2()/这就是Person类里面的一个私有的方法,只能在类内部使用,/如要一定要使用,只能通过公开方法(特权方法)来调用私有方法来实现window.alert(show2()+name+age+age);var p1=new Person();p1.show();/p1.show2();/这里会报错/window.alert(+ +p1.age);/错误的记住一句话:哪个对象实例调用this所有的函数,那么this就代表哪个对象实例This注意事项: This不能放在类的外部使用,否则调用就变成window调用了对象-成员函数给一个对象添加(指定)函数的几种方式1.通用常用方式:function Person()=abc;this.age=30;this.show=function ()window.alert(name:++ +age:+this.age);var p1 = new Person();p1.show();2.方式二:function Person()=abc;this.age=30;function show1()window.alert(name:++ +age:+this.age);window.alert(show1);/这个解释下面的p2.show=show2的疑惑.这个输出的是上面/的函数代码.(构造函数)var p2 = new Person();p2.show=show1;/记住不要加括号p2.show();3.方式三:function Person()=abc;this.age=30;var p3 = new Person();p3.show=function show2()window.alert(name:++ +age:+this.age);p3.show();加强思考题看它们会输出什么?题1.function Person()=abc;this.age=30;function show1()window.alert(name:+);var p2 = new Person();p2.show=show1;show1();/注意思考会输出什么?提示谁调用它.this就代表谁答案:name:空白(undefined)题2.function Person()=abc;this.age=30;Var name=abc2;function show1()window.alert(name:+);var p2 = new Person();p2.show=show1;show1();答案:nane:abc24.方式四:前几种方法有一个问题，那就是以上对象独占函数代码，这样如果对象过多，则会影响效率，js设计者，给我们提供了别一个方法，原型法：这样多个对象可以共享函数代码，代码如下：function dog()/使用prototype去绑定一个函数给totype.shout=function()window.alert(小狗);var dog1=new dog();dog1.shout();var dog2 = new dog();dog2.shout();/okwindow.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. 如 = 的两边 是对象或对象中的函数属性，则比较地址是否相等。六、加深对类和对象的认识如何给类添加方法（如何给某类型的所有对象添加方法）/创建Person实例/*function Person()var P1=new Person();P1.name = sp;window.alert(P1.name);*/初步体验Object类,通过Object直接创建对象/Object超类/*var P1 = new Object();P1.name = abc;window.alert(P1.name);window.alert(P1.constructor);*/*var i = new Number(10);/我们可以给类添加方法.Ntotype.add=function(a)return this+a;window.alert(i.add(10).add(30);var b= 90;window.alert(b.add(40);*/*请思考给js的Array对象扩展一个find(val)方法,当一个Array对象调用该方法时候,如果能找到val则返回其下标,否则返回-1;*/体验一下array;var arr = new Array(3)arr0 = Georgearr1 = Johnarr2 = Thomas/遍历该数组for(var i=0;iarr.length;i+)document.write(name:+arri+ );document.write();/使用array的方法,我们颠倒顺序arr.reverse();for(var i=0;iarr.length;i+)document.write(name:+arri+ );/现在我们一起看看如何给所有array对象添加一个方法find(val);Atotype.find=function(val)/遍历数组 thisfor(var i=0;ithis.length;i+)if(val=thisi)return i;return -1;document.write(下标为+arr.find(Thomas);document.write(下标为+arr.find(jime); 闭包这个知识点，在讲到封装的时候再说！ 成员函数的细节1. 成员函数的参数可以是多个Function 函数名（参数.）2. 成员函数可以返回值,也可以没有,但是有的话,最多只有一个Function 函数名(参数列表)语句;/函数主体return 返回值;3. js中不支持函数的重载,具体案例function test(a,b)window.alert(hello);function test(a)window.alert(a);function test(a,b)window.alert(a+b);/test(23);window.test(3,hello);结论:1.js在调用一个函数的时候,是根据函数名来调用的,如果有多个函数名相同,则认最后那一个函数. 2.直接定义一个函数或者变量,实际上这些函数和变量就是全局函数和全局变量(本质上他们是属于window对象的) 面向对象综合案例游戏的分析:1. 看看如何通过按钮来控制mario的位置2. 设计相关的对象(Mario x, y.)基本代码给大家:要求:1. mario碰到边界给一个提示 2. mario 可以去找另外一个物体u Js的内部类Javascript中本身有提供一些,可以直接使用的类, 这种类就是内部类, 主要有:Object/Array/Math/Boolean/String/RegExp/Date/Numberu 内部类的分类从使用的方式看，分为静态类和动态类静态类 使用 类名. 属性/方法比如:Math.abs(-11)动态类 使用 var 对象=new 动态类() 对象. 属性/方法 比如: /显示当前的日期 var nowDate=new Date(); window.alert(nowDate.toLocaleDateString();u Math类几个常用的方法:/*alert(Math.ceil(4.5); / 5alert(Math.floor(4.5); / 4alert(Math.round(4.77); / 5/返回1到100的随机数alert(Math.round(Math.random()*100);u Date类u String类u Array类常用方法:myArrl.pop()/出栈myArrl.push()/入栈。Array类没有下标越界问题 Boolean类 Number类1. 题答案： var b=23; b.toString(2);/ b.toString(16); js系统函数-*-最后总结：内部类和系统函数多查查javascript参考手册 js的事件驱动程序1.原理2. 入门案例Js中事件主要分成4种案例1，监听鼠标点击事件，并能够显示鼠标点击的x , y一个事件可以被多个函数监听 如下：div1Window有三个事件onload 页面一打开onbeforeunload 关闭页面前onunload 关闭页面后oncontextmenu 不使用右键onselectstart 不允许选中拷贝 Javascript-dom编程 Dom开山篇1. Dom编程 重要的作用是可以让用户对网页元素进行交互操作。2. Dom编程 用来做一些网页游戏3. Dom编程也是ajax的重要基础Dom的原理图：如何把html文档，映射成dom树：案例：乌龟抓鸡。从dom编程的角度，就会把该html文档，当做dom树 如下图： bom-Born(BrowserObjectModel)浏览器对象模型因为做浏览器的厂家很多，W3C定义了一个做浏览器的规范，规定： Window 对象1. confirm():2. setInterval() :该函数可以根据指定的时间，循环的执行某个函数，或者表达式。题一、 要求：每隔一秒钟弹出 hel