韩顺平JS笔记全.doc

韩顺平JS第二讲 因为js是由浏览器来执行的，因此这里有个问题，不同类型的浏览器可能对js的支持不一样。 Js的变量类型是怎样决定的var tt; /未给值Var b=90 ; /b是numberb=b+”, /b就是string 运算符 -运算符 Var a=56; Var b=-a; /b=-a等同于a=a-1;b=a b=a-等同于b=a; a=a-1; Window.alert(b); Window.alert(a);错误案例：更正：输出： lmyfuns.js代码：调用myfuns.jsl案例一：Js文件：调用：案例2：Js文件：调用：abc（5）；输出：3 3 4lJs文件：调用： 数组在内存中的存在形式：内存数据调用案例：输出：900内存数据分析:l输出：35 90 900内存数据调用分析：l输出： hello world abc 顺平输出： h e l l o w o r l d a b c 顺 平输出： hello world 输出：0=451=902=0gg=9000 二维数组的遍历： 输出：shunping 123 4.5a b c 优化排序： 输出：l 输出：找到 下标为4 数组转置：输出：JS笔记Javascript的基本介绍 JS是用于WEB开发的脚本语言： 脚本语言是什么： 脚本语言往往不能独立使用，它和HTML/JSP/PHP/ASP.NET配合使用 脚本语言也有自己的变量，函数，控制语句（顺序，分支，循环） 脚本语言实际上是解释性语言（即在执行时直接对源码进行执行），编译性语言效率会更高一些 Java程序.java.classjvm ,js浏览器（js引擎来解释执行） Js主要在客户端（浏览器）执行因为js是由浏览器来执行的，因此这里有个问题，不同类型的浏览器可能对js的支持不一样。 开发工具的选择：记事本 myeclipsefunction test()window.alert(hello world!); New Document 案例：1需求：打开网页后，显示hello ！ window.alert(hello);问题： js的位置可以随意放 js必须使用 代码 在一个html文件中（JSP/PHP/ASP.NET）可以出现多对（script）片段，浏览器会按照先后顺序依次执行案例2: 如何定义变量： 如何运算： New Document /js中变量的定义（js中变量用var表示，无论什么类型）var num1=1;var num2=60;var result=num1+num2;window.alert(结果是+result); /alert函数 window.alert表示弹出一个对话框 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() 如果是数字的话返回false4)isFinite() 如果是无穷大返回false2.字符串类型可以用双引号 也可以用单引号 ，单个字符也可以看成字符串，有特殊字符用转义 window.alert(asadar); 输出asada”r3.布尔类型true false通过typeof可以看到变量的具体数据类型举例：var num1=123;var num2=abcd;window.alert(num1是+typeof num1);window.alert(num2是+typeof num2);var num1=false /体现js是动态语言：即数据类型可以任意变化 window.alert(num1是+typeof num1); /体现js是动态语言 复合数据类型 数组 对象 特殊数据类型 Null 即：var a=null Undefine即：如下代码 window.alert(tt ); /直接报错：未定义 var tt; /不报错 未给值 输出Undefine Js定义变量，初始化，赋值1)定义变量： 即var a2)初始化： 即在定义变量时就给值3)赋值： 即：比如你先定义一个变量 var tt ，然后再给值：tt=780； js数据类型转换：1)自动转换例子：var a=123; /a是数值 a=”hello” /a的类型是string2)强制转换例子：字符串转换成数字var a=123” ;a=parseInt(a); /使用系统函数强制转换var b=90 ; /b是numberb=b+”, /b就是string 运算符+ * / %(取摸：即两个数相除的余数) 强调：取模主要用于整数之间取模例子：编写一个程序，判断两个数是否能够整除var a=90;var b=8;if(a%b=0) window.alert(能整除);elsewindow.alert(不能整除); +， 运算符a+ - a=a+1b- = b=b-1 +a 表示先把自己加1再赋值-a 表示先把自己减1再赋值例子：var a=56;var b=+a;window.alert(b); b=57window.alert(a); a=57 -运算符var a=56;var b=-a;window.alert(b); b=55window.alert(a); a=55mpt(); prompt() 方法用于显示可提示用户进行输入的对话框。document.write() :向浏览器输出内容var num1=mpt(请输入一个数); /输入1.1var num2=mpt(请再输入一个数); /输入1.1document.writeln(这两个数的和是+(num1+num2);/此时都当成字符串考虑，输出1.11.1document.writeln(这两个数的和是+(parseFloat(num1)+parseFloat(num2); /此时输出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”);输出OKJS的位运算和移位运算，规范和java一致var a=42; 结果是1var a=-42; 结果是-1JS的控制语句：1） 顺序控制对变成而言，不控制其流程就是顺序执行。2） 分支控制2.1单分支If(条件表达式)语句；2.2 双分支If(条件表达式)else2.3多分支If(条件表达式1)else if。（条件表达式2）else/else可有可无案例：如果是男同志，上男厕所，女同志上女厕所，否则不上厕所var sex= mpt(请输入性别);if(sex=男)window.alert(上男厕所);else if(sex=女)window.alert(上女厕所);elsewindow.alert(不上厕所);注意：JS中字符串比较也要用=一旦找到了一个满足条件的入口，执行完毕后，就直接结束整个多分支 switch语句：基本语法：switch(表达式)/执行语句；case 常量1：break； /跳出整个switch。default:语句；break;结论：1）JS的switch语句的常量数据类型可以是JS支持的任何类型（对象和数组除外）。2） case后面的值数据类型可以是任意的。3） break作用是跳出整个switch4） 如果没有匹配的则执行defaultfor循环while循环do while循环案例：求1！+2！+3！+.+n!var n=mpt(请输入一个数);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文件var n=mpt()/实在想不出，就用笨法一个一个打印，先出效果 /打印菱形的上半部分 for(var i=1;i=n;i+) for(var k=1;k=n-i;k+) document.writeln( ); for(var j=1;j=2*i-1;j+) document.writeln(*); document.writeln(); 函数的学习：函数的基本概念：为完成某一个功能的代码（语句，指令）集合基本语法：Function 函数名（参数列表）语句；/函数（方法）主体return 返回值；说明：1.参数列表：表示函数的输入 特别强调：参数名前不要带var2.函数主体：表示为了实现某一功能代码块3函数可以有返回值也可以没有入门案例：把上面的函数单独提出，然后在需要的地方引入案例：function.html文件/引入函数的JS文件 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;elseres=num1/num2;return res;对中文进行编码escape 把编码再转换成中文unescape window.moveTo(200,200);/指定窗口的位置window.resizeTo(300,400);/重置窗口的大小案例一：Js文件：function test(val)window.alert(你得输入是+val); return 90;html调用：test(hello,world); /传统的调用方式 /window.alert(test);/把函数全部打出来 var myvar=test;window.alert(myvar);myvar(中国北京);输出：函数的调用方式1.普通调用函数名（实际参数）；2.通过指向函数的变量去调用var myvar=函数名;rmyvar（实际参数）3.关于接收函数返回值得讨论var myvar=test(abc); /输出abcwindow.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;iarguments.length;i+)sum=argumentsi+sum;window.alert(sum);调用：abc2(12,12,12,12); 结果是48abc2(); 结果是0数组：数组，这种数据类型（引用类型/复杂类型/复合类型），数组的基本概念：用于存放一组数据。特别强调：JS中的数组，可以存放各种数据类型（数值/字符串）快速入门案例：var weights=3,5,1,3.4,2,50;var allweights=0;/数组的遍历for(var i=0;iweights.length;i+)allweights+=weightsi;document.writeln(总体重是+allweights);var avgweight=allweights/weights.length;/如果你想知道数据类型是什么/window.alert(avgweight.constructor);/window.alert( typeof avgweight);document.writeln(平均体重是+avgweight.toFixed(2);/保留两位小数数组的细节基本语法：var 数组名=元素值，元素值元素的值可以是任意类型var an=1.23,”hello”,true,2;数组在内存中的存在形式：内存数据调用案例：输出：900内存数据分析:JS中的数组是引用传递案例输出：35 90 900内存数据调用分析：JS的数组可以动态增长思考2，动态增长的 输出56 数组的长度变为3数组的引用基本用法：数组的名称下标;比如：var a=23,”hello”,4.5我们访问a2则输出4.5如果我们访问a3则输出undefined结论：不能访问不存在的元素数组的下标是从0开始编号的对字符串进行分割，形成一个字符串数组 用split函数var str=abc 姜爽 hello world;str=str.split( ,2);/拆分字符串，可以得到一个数组，取前两个元素，以空格进行分割，如果没有参数2，则全部输出for(var i=0;istr.length;i+)document.writeln(stri+ );输出：abc 姜爽了解：输出：0=451=902=0gg=9000a11 4.5二维数组的遍历：输出：shunping 123 4.5 a b c优化排序：优化的好处：如果是有序的，无须再次排列输出：找到 下标为4数组转置：第19/34页窗体顶端窗体底端输出：JS面向（基于）对象编程1. 澄清概念JS中基于对象等同于面向对象JS中没有class，但是有新的名字叫做原型对象，因此类等同于原型对象2. 为什么需要面向对象入门案例：/*张老太太养了两只猫猫：一只名字叫小白，今年3岁，白色。还有一只叫小花，今年10岁，花色。请编写一个程序，当用户输入小猫的名字时，就显示该猫的名字，年龄，颜色。如果用户输入的小猫名字错误，则显示张老太太没有这只猫。*/这里就是一个Cat类function Cat()var cat1=new Cat();/这时cat1就是一个对象=小白;cat1.age=3;cat1.color=白色;/从上面的代码我们可以看出/1.JS中的对象的属性可以动态的添加/2.属性没有限制window.alert();输出小白类（原型对象）和对象的区别和联系1） 类是抽象的概念，代表一类事物2） 对象是具体的，代表一类实体3） 对象是以类（原型对象）为模板创建起来的创建对象的方式有5种1） 工厂方法使用new Object创建对象并添加相关属性2） 使用构造函数来定义类（原型对象）3） 使用prototype4） 构造函数及原型混合方式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(a是Person);方法2：if(a.constructor=Person)window.alert(a是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();=姜爽;window.alert();var val=na+me;window.alert(p1name);window.alert(p1val);对象的引用问题说明：2.function Person()var a=new Person();a.age=10;=小明;var b=a;=小白;window.alert(b.age+名字++名字+);输出：10名字小白名字小白对象回收的机制：GCJS引擎（浏览器的部分）有一张表JS提供一种方式主动释放内存delete a.age;/用于删除属性 指向同一个地方，一个删了b就访问不到了 这样就会立即释放对象的属性空间this讲解：问题的提出：function Person();var p1=new Person(); = 老韩;p1.age = 30;window.alert(+ +p1.age);var p2 = new Person();window.alert();这里我们可以看到 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;/如果这样去使用name这个属性是私有的var age=30;2=abc2;/2 表示name2这个属性是公开的var p1=new Person();window.alert(+ +p1.age);/错误这样使用会报 undefined，私有的外部访问不到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就代表哪个对象实例function test1()alert(this.v);var v=90;window.test1();/等价于test1() window调用test1()，所以this就代表window 输出90this注意事项:this不能放在类的外部使用,否则调用就变成window调用了对象-成员函数（方法）比如我们希望对象不但有属性，还需要他有行为，行为在程序中要靠函数来体现。 function Person(name,age)/使用传递的实际参数去初始化属性=name;this.age=age;/输出自己的名字,这里this.show就是一个公开的函数，函数名字是showthis.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(宋江,90);p1.show();document.write(+p1.jisuan(100);输出：名字宋江5050给一个对象添加(指定)函数的几种方式:上面的函数，知道这种通用的方式即可=abc;this.age=30;function show1()window.alert(hello+);var p2 = new Person();p2.abc=show1;/记住不要加括号输出helloabc window.alert（p2.abc）；会把函数打出来=abc;this.age=30;var p3 = new Person();p3.show=function show2()window.alert(hello+);p3.show(); /输出helloabc题1.function Person()=abc;this.age=30;function show1()window.alert(name:+);/是window调用的name就是window的namevar 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();答案:name:abc2前几种方法有一个问题，那就是以上对象独占函数代码，这样如果对象过多，则会影响效率，js设计者，给我们提供了别一个方法，原型法：这样多个对象可以共享函数代码，代码如下：function Dog()/使用prototype去绑定一个函数给shoutDtotype.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. 如 = 的两边 是对象或对象中的函数属性，则比较地址是否相等。加深对类和对象的认识如何给类添加方法（如何给某类型的所有对象添加方法）案例1：/初步体验Object类,通过Object直接创建对象var p1 = new Object(); = abc;window.alert();window.alert(p1.constructor);案例2：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); /输出50 130请思考给js的Array对象扩展一个find(val)方法,当一个Array对象调用该方法时候,如果能找到val则返回其下标,否则返回-1;案例：/体验一下Arrayvar arr1=new Array();arr10=s1;arr11=s2;arr12=s3;/遍历数组for(var i=0;iarr1.length;i+)document.write(arr1i+ );/使用Array提供的方法来颠倒数据arr1.reverse();document.write();for(var i=0;iarr1.length;i+)document.write(arr1i+ );输出：s1 s2 s3s3 s2 s1/现在我们一起看看如何给所有Array对象添加一个方法find(val)Atotype.find=function(val)/开始遍历数组thisfor(var i=0;ithis.length;i+)if(thisi=val)return i;return -1;document.write(下标是+ arr1.find(s2) + );输出：下标1闭包这个知识点，在讲到封装的时候再说！成员函数的细节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); /输出23 undefinedwindow.test(3,hello);/输出3 hello结论:1.js在调用一个函数的时候,是根据函数名来调用的,如果有多个函数名相同,则认最后那一个函数.2.直接定义一个函数或者变量,实际上这些函数和变量就是全局函数和全局变量(本质上他们是属于window对象的) 面向对象综合案例游戏的分析:1. 看看如何通过按钮来控制mario的位置2. 设计相关的对象(Mario x, y.)基本代码给大家:要求:1. mario碰到边界给一个提示2. mario 可以去找另外一个物体构造函数：基本用法function 类名（参数列表）属性=参数值；案例：function Person(name,age)=name;this.age=age;/创建Person对象的时候，就可以直接给名字,年龄var p1=new Person(顺平,12);特别说明：在给一个对象初始化一个属性值的时候，也可以指定函数属性 案例：function jisuan(num1,num2,oper)if(oper=+)return num1+num2;else if(oper=-)return num1-num2;else if(oper=*)return num1*num2;elsereturn num1/num2;function Person(name,age,fun)=name;this.age=age;this.myfun=fun;var p1=new Person(abc,9,jisuan);window.alert(p1.myfun(89,90,+); /输出179创建对象的另一种形式：如果一个对象比较简单，我们可以直接创建。可以指定普通属性和函数属性。 var dog=name:小狗,age:8,fun1:function()window.alert(hello);,fun2:function()window.alert(world);window.alert(+dog.age);window.alert(dog.constructor);dog.fun1();dog.fun2();有时我们会看到这样一种调用方法：函数名.call（对象实例） 这样调用,该函数的this就是这个对象实例。小案例：var dog=name:hello;function test()window.alert();test.call(dog);/=dog.test; 输出：hellofor .in的用法var dog=name:小明,fun1:function()window.alert(hello);/循环列出 dog对象的所有属性和方法 对象名属性名for(var key in dog)window.alert(key+:+dogkey); / key属性 dogkey属性值/遍历window对象的所有属性for(var key in window)document.write(key+:+windowkey+);JS面向对象编程的三大特性1封装js提供有以下几种控制方法和属性的访问权限:1)公开级别:对外公开2)私有级别:类本身可以访问,不对外公开案例：function Person(name,age,sal)=name;/公开的属性var age=age;/私有的属性var sal=sal;/私有的属性/在类中如何定义公开方法（特权方法）