十天javascript笔记狗日的电影

jsjs技术用在什么地方对用户输入校验(,数字,一句话；js可以对网页的元素进行编程控制.buttoninputimage,实现动态效果举例说明<metahttp-equiv="content-type"content="text/html;charset=utf-<scriptlanguage="javascript"type="text/javascript">functiontest(){}<inputtype="button"js①js是一种语句，不能独立运行,它往往和配合别的语言使用,比如②js有自己的函数(系统函数,自定义函数),变量,有编程的控制语句(顺序,分支,循环),但是相对说,它的语范不是特别严格.③jsjs->直接被执行(js引擎[内嵌到浏览器])④js⑤js是用于bs开发js是客户端技术，它运行在客户端的浏览器livescriptnetscape和sun合作)->javascriptjavajavascript没有任何关系]jscript是微软的产品，但是它和javascript语范一致.请注意:因为浏览器的差异，可能有这样问题，在ie中运行正常的js，在中运行不正常.[ok浏览器兼容.]题的简单方法是:尽量使用js通用的函数js如何理解js是驱动的语 我们的js<metahttp-equiv="content-type"content="text/html;charset=utf-<script//跳出框php调用某个方法是对象名->方//js 对象名.方//window是js语句的dom对象,<script//跳出框php调用某个方法是对象名->方//js 对象名.方//window是js语句的dom对象,总结1.jshtml/php页面的任何地方，js码是从上到下依次执行.嵌入一段js码是<scriptlanguage=”javascipt”//js对o,world程序改进，改为一个简单加法运算<metahttp-equiv="content-type"content="text/html;charset=utf-<script//跳出框php调用某个方法是对象名->方//js 对象名.方//windowjs语句的dom对象,无需创建，可以直接使//如何在js中定义变量varnum1=4;//我定义了一个变量名字叫num1,同时赋值4varnum2=78;我定义了一个变量num1,同时赋值78varres=num1+num2;js的变量类型是由js引擎决定，如果要查看某个变量的类型，则可以使typeof运算//js变量的类型是由js引擎来决定的.varname="shun";//可以通过typeofwindow.alert("name的类型是"+typeof //可以通过typeofwindow.alert("name的类型是typeofjs①变量/函数取名不要使用js同时变量名不要用数字开头②jsvara=90;var//windowwindow.如果你不，定义了两个同名的变量，则后面的覆盖的前面的变量js的注释单行用//多行用 jsjs基本数据类型[1.整数2.实数3.bool 4.字串]复合数据类型[1.数组 特殊数据类型[1.null2.<scripttype="text/javascript">varn1=0x8a;var varn3=1234;NaN=notanumber 如果提示错误说明，你的js代码中把一个变量错误的当做Infinity=var//parseInt()函数是js的全局函数，可以直接使varr=7/0;在js中提供了两个函数来判断是不是一个 和isNaN(判断是不是一个数 //正则表达varalert("不是数alert("是数}js中表示有如下false,0, ,undefined、var}

varobj1=获取对象;alert(“对象创建失败}字符串的基本用法varvar如果我们希望在字符串中有包含特殊字符，比如’”\,用于转义的还有字符串中的特殊字符，需要以反斜杠（\）后跟一个普通字符来表示，例如：\r\n、\t、\b、\'、\"、jsjs①null②undefinedjs ?如果我把123当做字符串案例如下:让用户输入两个数，并计算和.varnum1=mpt("请输入一个数");varnum2=mpt("请输第二个数var .字符串拼接+varnum3=123;varstr="o"+num3;js+、-、*/、%注意我们的js17.varnum1=7;varvarres=num1/num2;//alert(res);//17位.如果你要到第二位.//把res当做一个字符串，看找到小数点在第几位.varindex=res.indexOf(".");Number我们为了更好的管理jsjs<scriptsrc=”js文件路径4.++和–varvarb=a++;//b=a;a=a+1;如果是varb=++a;《==》[a=a+1;varb=a;]varb=a++;<==> varb=a;a=a+1;>=<=>< == !=&& !varval=1&&1为真2为真，结果为真说明:如果第一个表达式为假，第二个表达式就不执行.[考点varnum1=6;varif(num1>num2&&}varres=1||12为真，结果为真1为真，第二个表达式就不执行!varres=!表达式||vara=0||0||"a"||0; js的位运算和移位运算->&按位与(1,|按位或(1^按位异或(1,0,varres=4&5;4补码:>><<>>>无符号右移运算.5的补码-55原码->5的反码->5js单分支(双分支(if..}else}else}case常量/变量:语句}if(条件表达式//}var//提示,}if(条件表达式//如果真}else//如果假}var}

.write("对自己行为负责.write("放过你if(条件表达式}elseif(}elseif(条件表达式}}说明:1.elseif可以有多个else语句可有可无var}elseif(age>10&&.write("送入少管所}else}

.write("下次注意多分支的case常量/case常量/defulat//}注意swtich相当灵活stringnumber,boolane对象..case后面可以是常量，可以是变量如果case后没有break,case块，时，就会一直执行，直到碰到一个breakswitchdefual语句可以放在swith会执行default,直到碰到一个breakswitch执行完毕.switchifelseif的区别.如果是针对几个固定条件的判断，则使用switch,如果范围的判断，我们使用ifelseif:a表示星期一，b表示星期二… switch语句完成//string,number,boolean,对象//varstr=1;//true->1 (1,2-//varobj=new//varvararr1=newArray("1","2");vararr2=arr1;casecasefalse:}

.write("星期一，猴子穿新衣.write("星期二，猴子当小二.write("猴子休息js//}////}////}while(循环条件需求:(为什么需要循环语句->①forfor(初始化;条件判断;控制变量变化//for循环语句}☞1.初始化条件可以放在for代码前(i>10&&i<50for循环体.编写一个程序,可以打 “你好，我是!”。请大家想想怎么做代码for(var}while循环控制//}快速案例我们用while来实现输出10句var}

.write("do..while循环控制//语句}while(循环条件说明:1.语句部分可以是多条循环条件可以是一个组合条件比如:i>10&&快速把上面的要求用do...while循环一把我们现在实际运用一下for 提示：如果将来难题思路简化:<metahttp-equiv="content-type"<script// 1->一个 2->2个 1- (1- 空格 2- (2- 空格 总层数-当前层数=3- 3- (3- 空格 总层数-当前层数=3-第一层输出 中间层:只输出两边的*,空间输出空 思 最后一层输出输出//nvarfor(var//for(vark=1;k<=n-}for(varj=1;j<=(i-if(i==1||i==n){//中间层if(j==1||j==(i-}}}

}上课课堂练习

do..while来改写接收一个整数，可以输出对应的菱形.,jsie中如何调试js,ie8调式步骤①先打开开发人员工具->②下断点–④f10->跳过一个函数继续执行(相当于把一个函数当做一个语句执行)通过逐行调试，我们可以看到局部变量变化情况注意:最原始的方法,通过window.alert(信息 .write(“信息如何处理js的js代码发生错误，如何定位其错误呢window.alert()使用firebug[cy--5,,再输入一个运算符(+,-,*,/)，得到结果<metahttp-equiv="content-type"content="text/html;charset=utf-<scriptvarnum1=mpt("请输入一个数");varnum2=mpt("2个数//把num1,num2转成floatvarres=0;case"+":case"-case"*":case"/":}如果我们在a.html,b.html,c.html我们都需要做这个计算用代码来实现，上面的分析写一个js文件,在需要的地方引入js文件即可.比如在a.html中使用<scripttype=”text/javascriptsrc=”js文件路径代码funs.jsfunctionjiSuan(num1,num2,oper){//把num1,num2转成floatvarres=0;case"+":case"-case"*":case"/":}//return语句表示返回?返回给哪个!(谁调用就返回给谁)returnres;}<metahttp-equiv="content-type"content="text/html;charset=utf-<!--js文件<scripttype="text/javascript"<scriptvarnum1=mpt("请输入一个数");varnum2=mpt("2个数js①基本用法是function函数名(参数列表////return}说明函数的规范问题,可以用字母开头,不要用数字开头.可以包括字母/数参数列表可以多个(js支持可变参数return语句可以有，也可以没有.最多只能有一个系统函数(js语句本身提供(参数值通过函数名调用)functiontest(val){}var变量=函数名;functionreturn}//下面的话，相当于把test的函数指针，赋给了my这个变量//因此my也执行testvarmy=test;varres=my(67,90);特别说明如果一个函数没有返回值，但是你却使用，则会提示js的函数调用过基本调用原则functionabc(num1){abc(--}.wri}33 分析图是函数调用使用递归的方法来计算functiontest1(n){varfor(vari=1;i<=n;i++){}}functiontest2(n){returnreturntest2(n-}}使用递归的方法计算f(n)=2*f(n-1)+3 ,已知f(1)=1;编写一个函数，接收n,计算其值functionfun1(n){returnreturn2*fun1(n-}}js③js代码functionvarfor(var}return}//test4函数可以计算我给出的数的结果和(但是我给的参数个数(在同一个页面js函数是不能有重复名字,同时我们也知道js函数不支持函数的重载.js的数组的介绍问题

6只乌龟，它们的体重分别是3.4kg,2kg,50kg。请问这六只乌龟的总体重是少 平均体重是多少?请你用现在掌握的技术编一个程序解varweight1=3;varvartotal=weight1+weight2+...+weight6;varaverage=total/6;我们需要这样一种数据类型,它可以帮助我们管理一组数据.->数组快速的案例:用数组的方法来完成养乌龟的问题<metahttp-equiv="content-type"content="text/html;charset=utf-<script//创建一个数var//说明，数组的下标是从//通过对象名.constructor可以显示该对象的构造方法是什么vartotal_weight=0;for(var} 总体重是 平均体1vararr=[元素1,元素 其实也可以这样创建空数组var2.vararr=new②如何数组的数指定某个元数组名[下标号],0开始编号for(vari=0;i<数组数组}for(varkeyin数组){}如果下标越界会怎样?报undefine☞jsvar说明js的数组可以动态增长③数组在内存中怎样存在php程序中，通过一个函数传递数组，是值传递，还是传递?js代码中，通过一个函数传递数组，是传function//val[0]第一个元素.for(var}输出是画图说明通过下面的代码，我们来说明js的数组是怎样存在内存的:functiontest2(val){//val[0]第一个元素.}arr=[1,2,3];【1for(var}分析图① 属性可以返回该数组的大小(遍历split函数，可以拆分字符串.varstr="abcoboy";vararr=str.split(".write(arr+数组小结②数组大小不必事先指定,③数组名可以理解为指向数组首地址的0开始编号的jsvararr1=[1如果我们的元素又是一个数组，则这个一维数组就成了二维数组vararr=[[1,4,90],[4,'for(varvar//对elefor(var}}②二维数组的理解和指定某个变测试题00000001000203000000//varfor(varvarsize=arr2[i].length;for(varj=0;j<size;j++){}}vararr=newArray();思考题请编写一个函数，可以接收一个数组，然后要求把这个二维数组转置function}js我们这里只介绍一下冒泡排序法:[php的排序章节]代码<metahttp-equiv="content-type"content="text/html;charset=utf-<scriptvararr=[0,-1,90,-varfor(vari=0;i<arr.length-{//for(varj=0;j<arr.length-1-}}}//jsvararr=[3,5,90,12,-23];varflag=false;for(varif(arr[i]==.write(””+i);}}}

.write(”一个都没有找到面试题:一定掌握//二分查找[递归//二分查找要保证我们的数组是一个有序的//////.则说明我们应当该数组的右边[后边]//②你要查询的数比中间的数小.则说明我们应当该数组的左边[前边]//③你要查询的数等于中间的数,varfunction.write("查询没有结果}//代码//var}elseif(arr[midIndex]>findVal){.write("找到下标是}}js中我们可以认为这个叫法一致jsjs是一种支持面向对象编程的语句,它有继承，封装，多态的特点==面向对象类==张老太养了两只猫猫:一只名字叫,今年3岁,白色还有一只叫,今年10岁,花色。请编写一个程序，颜色。如果用户输入的小猫名错误，则显示张老太没（js<metahttp-equiv="content-type"content="text/html;charset=utf-<scriptfunctionCat(){}//[js对象的属性可以动态增加]varcat1=newCat/cat1就是一个对象实例="";////varcat1=newCat当做类（原型对象使用//Cat对象名[’属性名js中自定义类(原型对象)varobj=newObject();obj.show=functionfunction类名/函数名(){}varp=new类名/函数名函数名通过prototype动态的添加方法和属性prototypejsvari=0;function}varp1=new();instanceof,//(原型对象)if(p1instanceofDog){window.alert("p1Dog一个对象实例}js的对象在内存中是怎样存在vara=new();varb=a;代码说明js的对象回收机制在js中一张对象对用表GC如何去判断某个对象是对象当对象的地址被的次数，变成0,则gc就会认为该对象是，就会回收js中还提供了一种主动销毁对象属性的方法delete对象名.属性名; //不要这样delete对象;①提出问题可以这样做function//下面这句话表示，每创建一个实例,实例就会自动有一个属}如果你希望name是创建对象实例的时候指定，可以通过参数传入: //下面这句话表示，每创建一 实例,实例就会自动有一个属}使用的时候$p4=new(“顺平②深入认识this//functionvarname="abc私有的，只能在varage=900;//私有的，只能在//如何理解:说有一个属性show因为前面有//show属性是公开.该属性是指向一个函数地址属性//show去调用该函数.}}varp1=new//window.alert(p1.age);//错误this的再认识<metahttp-equiv="content-type"content="text/html;charset=utf-<scriptfunctiontest1(){}vartest1();//<==>this只能在类定义的//说明thisfunctionDog(){}vardog1=newwindow.alert();//报空,因为这样使用，相当于去window对象的name属性，但是你没有写.☞补充讲解一个var的知识点:(还有说vart=90;function}说明:var,如果你其他函数中，使用变量是，前面var,则表示要使用全局变量.varjs第法：动态的给某个对象指定函function}//第法,动态添function.write("我是}//varp1=new("大黄p1.fun1=speak;相当于动态的给p1对象分配一个fun1属性(函数);你可以理解，fun1是speak函数别名speak();第法还有一种体现形//varp1=new("大黄",90);p1.fun1=functionspeak(){.write("我是};//相当于动态的给p1对象分配一个fun1属性(函数第二种方法:让所有的对象实例都有某个成员函function(name,age){this.speak=function}}varp1=new("小孩",9);varp2=new("大明",30);☞关于给对象指定成员函数说明如果添加的内部函数,该函数也称为函数,所谓指的是可以对象的functionvarsalary=salary;//}varp1=new("",34,1000);functionshowInfo(){.write(+this.age+salary);//salary}this.属性=funciton代码functionvarsalary=900;this.fun1=function}}}function .write("o,资源打开"++"}}varp1=new();小结:通过代码我们可以看出.私有函数可以被该类的其它方法(公开)调用，同时私有函数可以去该对象的公开或者私有的属性.functionDog(){ this.shout=function.write("小狗汪汪叫}Dtotype.shout=function.write("小狗叫}vardog1=newDog();对我们原型法的一个实际运用请思考给js的Array对象扩展一个find(val)Array对象调用该方法的时候，如果能找到val则返回其下标，否则返回-1//for(vari=0;i<this.length;i++){returni;}}return-}vararr=[4,590,-自定类的工厂方法(了解即可js代码时，当你需要一个对象时,newObject来创建一个对varobj=newObject();obj.show=functionval){}Number类vari=90;varjs的闭js1.js的变量作用域<metahttp-equiv="content-type"content="text/html;charset=utf-<scriptvara=90;定义一个全局变量functiontest(){a=123;//使用外层的a} vara=90;定义一个全局变量functiontest(){vara=123;//} a=90;没有var就会试着去找(a)afunctiontest(){a=123;//没有var,就会试着去找(父函数/a)a}functionvara=700;functiontest2(){a=890;//vara,a,}return}varvar1=test1();varfunctiontest(){}☞①jsvar,,如果该变量是直接写在页面，则我们认为是全局变量，否则是局部变量如果没有带var关键字,js引擎会这样处理:首先到父函数去找有没有该变量，如果有，则使function//varn=999;//局部变量③上面的代码说明，如果在一个函数中，直接使用n=900;相当于创建了一个全局变量js中如何解决从外部内部函数的局部变量->闭functionvarn=90;//}alert(n)//错误functiontest1(){varn=90;//test1函数的内部函数,可以varfuncitontest2(){}//把内部函数test2return}varres=test1();//调用test1test2函数这时res就是test1内部函数test2别名闭包:你可以这样理解:test2()把局部变量保存在内存中，不让回收机制，将其回收js在不同文件中，可以有相同的函数名在不同父函数(类),functiontest(){}functinofunctionsay}}functiontest3(){functionsayo(){}}functiontest(){}①设计计算机类,要求如下属性：品牌,颜色,cpu型号,内存容量,硬盘大小,价格,方法:打开,关闭,休眠,<metahttp-equiv="content-type"content="text/html;charset=utf-<script/*设计计算机类,要求如下属性：品牌,颜色,cpu型号,内存容量,硬盘大小,价格,方法:打开,关闭,休眠,创建一个计算机对象，调用打开，关闭方法*functionComputer(){this.open=function.write("计算机打开}this.close=function.write("关闭计算机}this.sleep=function.write("休眠 }}varcomputer=new②用面向对象的思想，编写小游戏js对于比较简单的对象，我们也可以这样定vardog={name:"vardog1={name:'',say在某些情况下，我们需要去改变某个函数的this指向，我们可以通过call/apply基本用法函数名.call(对象);//这时函数的thisforin的另外用法var///*for(varkeyindog){//windowfor(varkeyin}可以通过delete对象名.属 来手动的删除某个属性值js1.js中实现封装主要有两种封装(公开，私有)class(name,sal){=name;公开varsal=sal;//私有this.showInfo=function公开”+}showInfo2(){//把函数.}}通过原型法分配的函数是所有对象共享的通过原型法分配的属性是独立.(如果你不修改属性，他们是共享functionDog(){}}//Dtotype.shout=function(){}vardog1=newvardog2=new}请大家看一个题function}//varp1=new p1.say();[错误//}.prototype.函数=function称为后置绑定js看一段代码->问题是什么<metahttp-equiv="content-type"content="text/html;charset=utf-<script// functionMidStu(name,age){}}}//functionPupil(name,age){}}//代码的复用性不高////1.把子类中共有的属性和方法抽取出，定义一个父类StufunctionStu(name,age){}}//2.functionthis.stu=Stu;这里相当于把Stu构造函数(类)赋值给我们的属性//调用this.stuthis.stu(name,age这个表示初始化MidStu,相当于执行Stu(name,age),这//可以写MidStu自己的方法.}}functionPupil(name,age){////可以写Pupil自己的方法.}}//varmidstu=newMidStu(" varpupil=newPupil(" ②通过call或者apply<metahttp-equiv="content-type"content="text/html;charset=utf-<script// functionMidStu(name,age){}}}//functionPupil(name,age){}}//代码的复用性不高////1.把子类中共有的属性和方法抽取出，定义一个父类StufunctionStu(name,age){}}functionMidStu(name,age){//这里这样理解:通过call修改了Stu构造函数的this指向//如果用apply实现，则可//Stu.apply(this,[name,age说明传入的参数是组方//可以写MidStu自己的方法.}}functionStu.call(this,name,age);//Pupil对象实例,Stu的构造函数会被执行,当执行后，我们Pupil对象就获取从Stu封装的属性和方法//可以写Pupil自己的方法.}}//varmidstu=newMidStu(" varpupil=newPupil(" jsjs对象可以通过对象冒充，实现多重继Object类是所有js类的基js①jsjs<metahttp-equiv="content-type"content="text/html;charset=utf-<script//*****************说明js不支持重载/*functionthis.test1=function(a,b){}this.test1=function(a){window.alert('function(a)');}}varp1=new//js中不支持重载.//js怎么实现重载.function(){this.test1=function(){}elseif(arguments.length==2){}elseif(arguments.length==3){}}}}functionshow3(a,b,c){}}varp1=new//js中不支持重载.当子类有一个方法和父类一样,functionStu(){}}//function}}varmidstu=newMidStu();☞多态的基本概⑤所谓多态，我们可以简单的理解就是一个类型(对象/变量)在不同情况⑥js本身是无态,js天生就支持多态js的多态的一个案例<script//function(){this.test1=function(){window.alert("test1");}}functionCat(){}}var //防止var //防止v被猫类替代后，v代制回收//vif(v window.alert("23v变量是人类

这个类 回收}v=newCat();if(vinstanceofwindow.alert("30v变量是猫类}//在这里，v是猫类，而同时，其以前代表的人类被回收机制给收走了。如果要让其恢复，只要按上面的红色加背景varp=vjs<scriptMasterfunctionMaster(name){//方法[给动物喂食物}window.alert("给"++"喂}functionFood(name){}//functionFish(name){}//functionBone(name){}functionPeach(name){}//functionAnimal(name){}//functionCat(name){}//functionDog(name){}//functionMonkey(name){}varcat=newCat("大花猫");varfish=newFish("黄花鱼vardog=newDog("大花狗");varbone=newBone("猪骨头");//varmaster=newMaster("韩顺平");//varmonkey=newMonkey("金丝猴");varpeach=newPeach("仙桃");总结：多态有利于代码的和扩展，这里我们可以考虑，如果食物加入桃子，动物加入猴子，可以看到，Masterfeed函数不需要的变化。js概述：js的设计者，为了让我们开发方便，事先提供了一下内部类(Array,Number,String,Date,Math),js可不是再次说明：jsjs安装使用内部类的属性和方法的不同，我们主要分成两种Array,Stringvararr=new //varMath.random//php::静态方法名Number<scriptvarnum=newMathMath是静态类，提供了常用的数学函数和常数,我这给大家介绍几个最常用的函数，其它的请大家参考javascript帮助文档。 求x,y中较大的数 求x,y中较小的数 对x进行四舍五入 0116位小数位的数字（0<scriptvar//ceil //floor Date getDate()从Date对象返回一个月中的某一天 getMonth()从Date对象返回月份 从Date对象返回年 从Date对象返回小时数getMinutes()从Date对象返回分钟getSeconds()从Date对象返回秒数<script//varmydate=newDate();window.alert(mydate.toLocaleString());//jsdomString 提取取从start下标开始的指定数目的字符 属性, js中所有内部对象的成员方法,作用是将对象中的数据转成某个格式<scriptvartxt="h韩llo中国// var //substri(start,length)从startlenght个字符, var//stringObject.substring(start,stop)从start开始取，取到stop-//var//charAt(index)//var//?varfile_path="c:/abc/abc/helo/顺平//var会遇到问题，是因为你基础没有扎实ArrayArrayArray对象可以轻松的创建数组， 连接两个或的数组，并返回结果 <script//vararr=new//静态设置数//动态的添 for(var//如何删除数组的某个元//2个元素->//arr.splice(1,11表示删除第几个元素,11//修改第二个"顺平"->"//把一个新的数据 "，添加到第1元素后 //遍历for(varkeyinarr){}window<scripttype="text/javascript">for(varkeyinwindow)这里我们需要注意splice(),根据传入用的挺多.[大战]//**********对象数组的使用function} var var varp3=new vararr=newArray();//for(varkeyinvarp=arr[key];结果显示是：vararr=newArray();functionfor(varvarname=mpt("请输入的名字");varage=mpt("请输入的");varp=new("","");}}for(varkeyinarr){var}☞js基本数据类型numberbooleanstring是按照值传递数组和对象是传递.案例如下 php比较一下:传递数组的时候有一点区别php默认是值传递,对象是传递.Boolean类Number案例请输出23的二进制字符串和16进制的字符计算7/3的结果，并保留到小数点后两位(四舍五入<script案例23167/3的结果，并保留到小数点后两位(四舍五入varn1=23;//<==>varn1=newvarn=7/3;系统函说js①自定义函数(程序员自己根据编程的需要写的函数[对象的成员函数，普通⑧系统函数(全局函数),可以自己使用 functionvarname=encodeURI("韩顺平abcd");}//js去请求一个php从案例演示我们看到,js提交数据时，如果浏览器版本低，就可能出现乱eval该函数可以把一个字符串当做来执行.当根据输入的情况显示相应内容时候，可以用eval函数。 functionwindow.alert("test1函数}function}varval=mpt("请输入值");varstr=input+"('"+val+"')";URL：UniformResourceLocator，统一资源定位符；URI：UniversalResourceIdentifier，通用资源标识符。URI含义更广泛，URLURI的一个部分，通常指URI=URL 通过超<ajsjs概述概述js元素进行某个操作时，会产生一 , 会驱动某些函数来处理,原理图Js最好是看手册，但是参考手册js里面的属性并不能进一步点进去深入了解。所以我们要通过domevent进行了解。该方法里面的属性可以点击后进快速案例<script//处理函functiontest1(event){}<inputtype="button"value="tesing"这里我们有几个新的名词，需要理解源:就是产生的地方(html元素):点击/鼠标移动/键按下..对象:当某个发生时，可能会产生一个 该的信息(比如点击的x,y.keycode),传递给 处理程序:响应用户的快速<html><scripttype="text/javascript">functionshow_coords(event){x=event.X; alert(event+"Xcoords:"+x+",Ycoords:"+}<!--body元素响应onmousedown--<body<p>Clickinthe.Analertboxwillalertthexandycoordinatesofthemouseonkeydownonkeyup知道用户按下什么键<html><scriptfunctionshowkey(event){}elseif(event.keyCode==66){}}<!--body元素响应onmousedown--<body③html④其它functionvardiv1= //通过js获取div}else//通过js获取div}}functionsayo(){window.alert("red按钮被按下");}<divid="div1"style="width:400px;height:300px;background-<inputtype="button"value="red"onclick="mychange(this),say<inputtype="button"value="black"不同的浏览器种类不一样如何区分当前浏览器的内核是什么?(区分出ie6/7/8/ <scriptlanguage="javascript">{//Mozilla,Safari,IE7,IE8 //Mozilla,Safari,alert('Mozilla,Safari');}{

{}

alert('IE7}案例：防止用户通过点击鼠标右键菜单拷贝网页<scriptfunctionreturnfalse;}functionreturnfalse;}<!--body元素响应onmousedown--<bodyoncontext="returntest()"onselectstart="return我的内容!⑦domJavascript网页特效实例精粹韩老师没有发给我，记得找他要⑧domjs(1)贪吃蛇(2)推箱子(3)大战,这些都需呀用的dom编程当我们学习完这一dom编程,也是我们学习ajax技术的基础,所以须掌握好dom编程。前(html+css+js[dom编程 |⑨domdom的来源<scripttype="text/javascript">dom前面,js把浏览器,网页文档和网页文档中的html元素都用相应的内置对象看文档来表示，这些对象与对象间的层次关系构成dom针对网页(html,jsp,php,)的dom就是htmldom。我们这讲的就是htmldom这里有几个特别重要的概念要给大家说清楚①上面说的内置对象就是dom对象,准确的说是htmldomhtmldom编程，所以我提到的dom编程htmldomhtmldom③domhtmldom树(对照乌龟抓鸡来的代码来说明dom编程.(首先要画出htmldom图[参看资料文件夹，已经画好])④dom编程的就是各个dom对象,下一章节会详细讲解htmldomhtmldomhtmldomdom树在内存中有层级关系，通过操作dom树，就可以改变html页面的显示效果htmldom的角度看，每个html文件的元素都会被当做Node节点对象来看待,就可以使用它的方法,htmldom说，因为元素本身可能就是img/button/form同时可以看成ButtonImgForm内置对象html id='myimg'src="a.jpg"var .gexml<stuvarmystu=.gemystuNode dom编程的实例(乌龟游戏在5-3中,有详解。)js面向对象的方式来编写.w上课后练习:对乌龟游戏添加新的功能③当乌龟碰到边界时，不能再④让鸡可以自由的移⑤可以通过上下左右的按钮控制乌龟移 乌龟上下左右移动的时候可以换成相应的bom的全称是浏览器对象模型(bowserobjectmodel).,它规定所有的浏览器在 bom规范,这样才能正常浏览网页.dom和bombom一个性，dom就是具体的.(dom对象、属性、方法bom包 浏览器所有对dom(objectmodel)主要是bom(对象的扩展dom在进行domhtmlNode节点(对象),你如果要看具体信息，到xmldom的Node章节查看.window对象常用的函数和属性⑨varres=window.confirm("确认安装该软件吗?");}setInterval("函数名()",调用该函数的间隔时间)和当前时间是,<!--读10秒自动停止,并弹出一句话"o.wrold"--<span<scriptvarvarmyspan= functionabc(){varmytime=new //对象.innterText表示在该对象对应的中间放入文}}//var<imgid="boy"src="1.png"<inputtype="button"value="加速<inputtype="button"value="<inputtype="button"value="停止" <inputtype="button"value="开始" <scriptvarboy=.geementById("boy");varimg_no=0;functionvarno=((img_no++)%8);}function}vartime1=""; case开始case停止}}课堂练习时，请大家把小孩的加速和做了⑪setTimeout/function}//⑫moveTomoveByresizeTo<scripttype="text/javascript">functionabc(){}⑬open<scriptfunction认//第三个参数可以指定新窗口的样式}<inputonclick="testtype="button"value="开新窗口关于两个html页面相互通信的案例opener属性子窗口父窗口信息A页面：<scripttype="text/javascript">varnewwindow="";functiontest(){//open}function//var .ge 实际上b.html}<inputonclick="testtype="button"value="开新窗口<inputtype="text"id="myinfo"<inputtype="button"onclick="test2value="发送给子窗口B页<scripttype="text/javascript">functionsend(){varchlid_text=.ge//opener}<h1>我是b.html页面<inputtype="text"<inputtype="text"<inputtype="button"value="送给父窗口history对history对象记录用户的urlgobackforward案例<scripttype="text/javascript">functionmyback(){}<inputtype="button"onclick="mybackvalue="location对location对象包含当前url⑭reload重新加载本页面(刷新本页面function ajax}⑮href通过该属性可以指定载入新的页面window.location.href="url"//url可以本，也可以另一个<a<formaction=""http<scripttype="text/javascript">for(varkeyinnavigator){}screen1024×768时，给出提示，请写出该程序<scriptif}Event对象给某个html元素(控件),绑定的三种方<inputtype="button"onclick="函数vlaue="xx值<scripttype="text/javascript">functiontest1(){//这句话的意思就是把but2的onclick和test2//.ge}functionreturn.ge}function}<inputtype="button"id="but1"onclick="test1value="测试<inputtype="button"id="but2"value="⑦通过attachEvent和detachEvent方法来绑定和解除绑<inputtype="button" value="投一票<script//第一个参数是functionvote(){}如何数秒varfunctioni--mybut.value=""+i;}}var<inputtype="button"id="mybut"disabled="true"value="js中对象的获取(IE和火狐不一样在iefunctiontest(){//通过window.event.属性}functiontest2(event){}function}<body<inputtype="button"value="测试<inputtype="button"value="2特别说明一下:我们的表单除了常规提交方式，还可以通过jsEvent<scripttype="text/javascript">functiontest(){}<divonmousemove="test();"style="width:400px;height:300px;border:1pxsolid<spanevent的一个案例请输入一个六位数<inputtype="text"id="pageNow"onkeydown="return<script<!-varfunctionreturnfalse;}alert('0');return}}//如果我们记不住0->489->57,我们可以这样做 returnfalse;}}//--对象最重要的三个方法ementById[html jsp](id,) 通过htmlgeementsByTagName通过html的名返回对象集<script//通过idfunctionvar //window.alert(a1.id+""+a1.href+"a1.innerText="连接到"; }//通过name来获取.function//var //for(var////window.alert(i+""+hobbies[i].checked);window.alert("你的是}}}//通过functionvarinputs=.ge }<aid="a1" ">连接到<aid="a1" ">连接到<aid="a3" ">连接到<inputtype="button"value="测试请选择你的<inputtype="checkbox"name="hobbyvalue="旅游"><inputtype="checkbox"name="hobbyvalue="音乐"><inputtype="checkbox"name="hobbyvalue="体育"><inputtype="checkbox"name="hobby"value=""><inputtype="button"value="看看你的"<inputtype="button"value="通过tagname来获取元素"我们综合运用一下前面学习到的各种知createElement()appendChild()方法向已存在的节点添加子节点（发射）removeChild()方法删除指定的节点。（）parentNode属性可返回某节点的父节点。<scriptfunction//1创建a元素createElment(名varmyhref= .createElement("aaa>myhref.innerText="sina"; }function varnode= }<inputtype="button"value="创建一个a"<inputtype="button"value="删除a"<!--引入 idclass[dom如何去操作一个外表css!补讲]--keycode编码！<scripttype="text/javascript">functiontest(){}<inputtype="button"onkeydown="test()"思路很重响应用户按j让乌龟 函数fire内容多2.1我认 就是一个/也可以认为是一个div让飞一用了一个this.move_bullet,产生移动的效果.提示:window.alert("body的宽="+.body.Width);<script//var//数varbullet_imgs=newArray();varbullet_img_speed=2;varisStart=false;this.y-//同时修改乌龟的top值//dom//1先得到这个乌 varwugui_div= //判断乌龟是否和公鸡碰撞}}}}//window.alert("xy"+this.x//window.alert("xy"+cock.x}//同时修改乌龟的top值//dom//1先得到这个乌 varwugui_div= } varbullet_img= //设置bullet_img的//把这颗新放入数组中,进行管间

//setInteval应该这样去掉window.setInteval("对象名函数名//如果数组中有，就不要在调 }//让移//遍历数组.看看每颗是否已经到到边界,如果到了边界，//for(var//stop定时器}//这里要求//修改bullet_img的left即 //遍历数组,让每颗移for(var//var

//遍历数组.看看每颗是否已经到到边界,如果到了边界 //32//同时从 dom树种删}}functionCock(x,y){this.speed=1;//一定一个像素setInterval(定时器}vartortoise=new varcock=newCock(200,200);functionmove(obj){case"向上走":case"向右走":}}functionmove2(event){case65:tortoise.move_left();//case68:casecase//响应用户按jcase//发送的行为封装到fire}}<body<tableid="mytable"<td><inputtype="button"value="向上走" <td><inputtype="button"value="向左走<td><inputtype="button"value="向右走onclick="move(this<td><inputtype="button"value="向下走 <!--div<div style="position:absolute<imgsrc="1.bmp"border="1"alt=""<divid="cock"<imgsrc="2.bmp"border="1"alt=""考虑加入如 公鸡，公鸡[做成效果可以向上下左右都可以发送domNode节点属性和方法(加强篇)(取到父节点、兄弟节点、子节点等)<metahttp-equiv="content-type"content="text/html;charset=utf-<table<td><inputtype="button"value="向上走onclick="move(this<td><inputtype="button"value="向左走onclick="move(this<td><inputtype="button"value="向右走onclick="move(this<td><inputtype="button"value="向下走onclick="move(this<div style="position:absolute<imgsrc="1.bmp"border="1"alt=""<divid="cock"<imgsrc="2.bmp"border="1"alt=""<inputtype="button"value="tesing"<inputtype="button"value="tesing2"<scripttype="text/javascript">functiontest(){//varwugui=.gevarvarwindow.alert("下一个兄弟类型"+wugui_next_borther.nodeType);window.alert(""+wugui_next_borther.nodeName);varwindow.alert("前一个兄弟类型"+wugui_pre_borther.nodeType);window.alert(""+wugui_pre_borther.nodeName);//varwindow.alert("window.alert("}function}bodybody对象是对象的一个成员属性,通过.body来使用body对象，要求文档的主体创建后才能使用,body体还没有创建就去Body常用属性： 删除元geementsByTagName()通过html元素名称,得到对象数组. 某个元素间的html代码 onbeforeunload文档关闭前触该对象是对象的属性.<metahttp-equiv="content-type"content="text/html;charset=utf-<inputtype="button"value="tesing"<span<scriptfunction '>连接 myspan.innerHTML="<a '>连接 }Body案例：设置固定边栏<scriptid=EventHandlersJS<!-functionwindow_onscroll()//让这个超 和left和滚动条，保持一个关 }function_onselectstart()returnfalse;//返回false,这样就可以用户选网页中的文本中//你也可以在bodyonselectstart="returnfalse;"}//--<scriptlanguage=javascriptfor=<!-//bodyonselectstart='returnfalse'return//--<bodyonscroll="returnwindow_onscroll()"这个文本域足够大一层的东西。比如说的，它的价值就在于用新颖，深刻，抽象的表现手法将的诠释的淋淋尽致，把的发人深省剖析开来给人看，这的笔触描绘出来，用其和力诠释着价值的内在一层的东西。比如说的，它的价值就在于用新颖，深刻，抽象的表现手法将的诠释的淋淋尽致，把的发人深省剖析开来给人看，这一层的东西。比如说的，它的价值就在于用新颖，深刻，抽象的表现手法将的诠释的淋淋尽致，把的发人深省剖析开来给人看，这一层的东西。比如说的，它的价值就在于用新颖，深刻，抽象的表现手法将的诠释的淋淋尽致，把一层的东西。比如说的，它的价值就在于用新颖，深刻，抽象的表现手法将的诠释的淋淋尽致，把的发人深省剖析开来给人看，这一层的东西。比如说的，它的价值就在于用新颖，深刻，抽象的表现手法将的诠释的淋淋尽致，把的发人深省剖析开来给人看，这 id=myHref absolute;TOP:50px;word-break:keep-all"><imgsrc="ad.bmp"案例：在网页中飘动，碰到网页边沿改变漂移方<html<bodystyle="BACKGROUND-IMAGE:<scriptlanguage="javascript"<!-//向xvar//向yvarvarposX=0;//div的xvarposY=0;//div的yfunctionmove(){//让div2*divX//让div2*divX//posX表示div div}//posY Height碰到最 }}//--<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"<scriptlanguage="javascript">varx=0,y=0,x1=0,y1=0;varmoveable=false;varindex=//functionstartDrag(obj,evt){e=evt?evt:window.event; if(true)if(!window.captureEvents){}else}varwinobj.parentNode;//取得父窗体(父窗体就是该div得上一级win.style.zIndex=++index;//设置父窗体的Zx= X;//Xy= Y;//取得当前鼠标的Yx1=parseInt(win.style.left将父窗体的距浏览器左边界的距离转换为y1=parseInt(win.style.top将父窗体的距浏览器上边界的距离转换为moveable=//}functiondrag(obj,evt)e=evt?evt:window.event;if(moveable){varwin=obj.parentNode;win.style.left=x1+e.X-win.style.top=y1+e.Y-}}//functionstopDrag(obj){if(moveable){if(!window.captureEvents){}else}moveable=}}<divstyle="position:absolute;width:200px;height:200px;background-color:#99CCFF;z-index:200;top:100px;left:154px;"><divid="title"onMouseDown="startDrag(this,event)"onMouseMove="drag(this,event)"onMouseUp="stopDrag(this)"style="width:200px;height:20px;background-color:#330033;top:0px;left:z-index:200;position:absolute;font-size:9pt;color:#FFFFFF;padding-top:5px;padding-left:5px;">浮动窗口</div>实例。stylehtml元素,html元素而言的,也就是说,我们可以通过.geementById(“id”).perty=“值”,来控制网页web版大战<scriptfunction}function}function}functionHero(x,y){this.direct=0;//01->2->3->}}}}}varhero=newHero(100,250); casehero.move_left();//自己向case68:casecase//jcase//发送的行为封装到fire}}<!--区--<body Css复习主要是看这个很全面晚上让自己的可以发送碰到边界，就显示敌人的(3个)当自己发射的敌人后，敌人就style然后在html通过style对象，我们可以去控制某个html元素的外观.disy和visiability区这个属性都可以用于设置某个区域或者控件显示不显示,disy设置none;它visiability这个属性设置成hidden就不显示,但是它不让这个空间style对象的案例<spanid="myspan" onclick="test(thisstyle="border3pxsolidred;cursor:hand;">+</span>我的家庭<ulid="myul"style="dis<li><li><script<!-function//}}//--style的小案例-<inputtype="checkbox"onclick="shop(this,10price="10"name="fruitsvalue="苹果">苹果10<br/><inputtype="checkbox"onclick="shop(this,20price="20"name="fruitsvalue="西瓜">西瓜20<br/><inputtype="checkbox"onclick="shop(this,30price="30"name="fruitsvalue="香蕉">香蕉30<br/><inputtype="checkbox"onclick="shop(this,40price="40"name="fruitsvalue="葡萄">葡萄40<br/><inputtype="checkbox"onclick="shop(this,50price="50"name="fruitsvalue="桃">桃50<br/><span<script<!-varfunction//遍历整个复选框，看看谁被选中 varfrutis=.geementsByName("fruits");for(vari=0;i<frutis.length;i++){ window.alert(frutis[i].value+"被选中"+"该价格是}}//,然后是决定对allPrice进行}}//--forms对象集合和form对象这里我们说明formform对象名.某控件名<formaction="a.php"u:<inputtype="text"name="username"value="o"/><br/>p:<inputtype="password"name="password"value="xxx"/><br/><input