JavaScript笔记.doc

一、前言1二、JavaScript的程序控制结构和对象21、for循环语句：22、while循环：23、do-while循环：24、JavaScript函数：25、在JavaScript中基于对象的编程：36、内置的JavaScript对象：37、处理对象的内置方法：38、用户自定义对象：49、使用IE的Scriptlet:4三、Form元素：文本框和按钮51、文本框：52、按钮：53、文本区：64、口令密码：65、确认按钮和重置按钮：66、文件控件：77、隐藏控件：78、单选钮(事件onBlur、onClick、onFocus)：79、复选框(onBlur、onClick、onFocus)：710、将复选框和单选钮组合起来：711、使用elements数组812、选择框(事件：onBluron、onChange、Focus)：9四、鼠标和键盘事件101、window.event的属性(比如window.event.x)：102、鼠标按下与鼠标释放事件(onMouseDown、onMouseUp)103、预览页面(onMouseOver)：114、图像切换(onMouseOver、onMouseOut)115、接收键盘输入(keyPress事件)：126、用鼠标点亮文本12五、处理图像与动画131、图片数组：132、IE中的结构化图形控件143、Web页面中定位图像154、图像映像155、隔5ms自动换一幅图片，156、用IE的DirectAnimation（DAViewerControl控件）：16六、Document对象161、对象：162、document对象的属性：16七、Window对象181、window对象：182、window.open()方法：用来打开一个新窗口183、警告框：alert();194、确认框：confirm()195、提示框：prompt(“”,”)206、对话框：showModalDialog()20八、浏览器、地址和历史对象211、IE的”浏览器对象”属性：navigator.appName212、使用地址对象：location.href223、历史对象：224、从URL串中获取信息：225、图像映像前的确认消息：236、使用cookie:237、改变状态栏文本:23九、将javascript和java连接起来241、在javascript中调用java中的方法：242、从javascript向java传递参数：通过set()方法传递参数243、从java中获取返回值：通过get()方法244、直接在javascript中使用java语句：经试验失败，提示“java未定义”。255、从java访问javascript资源和方法：略25十、插入件252一、前言1、 JavaScript语句可以在语句结束时加“；”也可以不加“；”2、 3、 javascript可以和html控件协同工作：如下程序可以在按下按钮时使img1.gif换成img2.giffunction ChangeImage()document.form1.img1.src=”gif/image2.gif”;/表单属性即使在表单中没有写，也可以直接使用4、 JavaScript代码可以放在之间，可以预执行，也可以放在之间。5、 JavaScript变量可以用var num;声明，也可以不声明直接使用。不过当你没有定义就使用一个变量时，JavaScript将该变量定义为全局变量。6、 JavaScript是弱变量类型，可以 var date=31; Date=”Today is the 31st”;7、 可以用document.writeln()直接将变量内容显示到html页面上。var number=4;document.writeln(“The number is”+number+”.”);document.writeln(“are you seen?”);使两行文字作为一个段落显示，不会与html中其它语句混在一起。且使两行文字自动分行，若不用两行文字显示在同一行上。二、JavaScript的程序控制结构和对象1、for循环语句：同java一样，只是应注意可以用更强大的方法来控制循环用break来中止一个循环。例如：for(var num=0;num50)break;break退出当前循环，也可以用break label;退出多重循环。(var可使num作为局部变量存在)2、while循环：while(var num!=id)document.writeln(“the number is not”+num+”.”);num+;可以在document.writeln()中输出任何html标识。3、do-while循环：如果将要测试的表达式依赖于循环体中语句的执行结果，这种方法非常有用。4、JavaScript函数：function adder(argument1,argument2)statements;return num;在实际调用函数时，你可以向函数传递比在函数定义时的参数数目更少的参数；也可以传递比其定义时更多的参数，为了读取这样的参数，可以使用arguments数组，adder.arguments0表示对第一个参数的引用。5、在JavaScript中基于对象的编程：对象的方法：document.writeln(“sdf”);对象的属性：document.form1.img1.src=”gif/image2.gif”;/img的属性src6、内置的JavaScript对象：l String对象的方法：anchor big blink bold charAt eval fixed fontcolor fontsize indexOf italics lastIndexOf small split strike substring sub sup toLowerCase toUpperCase toString valueOfvar str=”Here is some text”;document.writeln(“This String is :”+str.bold()+”is”+str.length+”characters long.”);这里使用了String对象的bold()方法和length属性。l Array对象的方法：concat join reverse sort toString valueOfvar mes=new Array();mes0=”hello”;mes1=”from”;mes2=”JavaScript”;for(var num=0;num3;num+)document.write(“mesnum”);7、处理对象的内置方法：l 用for-in语句在一个对象或数组上建立循环：for(variable in object|array) statement ，可以更容易地对对象和数组进行操作。例如要显示document对象的所有元素：for(var elm in document)document.writeln(elm+”=”+documentelm);l with语句：如果你想使用某个对象的许多属性，可以考虑用with语句，在with代码块内可以不引用该对象而直接引用其属性和方法。下例用fgColor而不用document.fgColorwith(document)document.writeln(“The document foreground color is “”+fgColor+”.”); document.writeln(“The document background color is “”+bgColor+”.”);8、用户自定义对象：function text(textString)this.textString=textString;this.display=display;function display()document.writeln(“The text is :”+this.textString);theText=new text(“Custom objects.”);theText.display();textString是对象属性，display()是对象方法，new text(“Custom objects.”)是实例化对象。本例中实例化时并不打印，调用方法时才打印。现在常用的是直接在一个方法中调用另一个方法：function text(textString)this.textString=textString;display();function display()document.writeln(“The text is :”+this.textString);text(“Custom objects.”);9、使用IE的Scriptlet:IE支持标识，其典型的用法是用于ActiveX控件；不过使用IE4.0可以在脚本中使用标识来创建对象。l 首先在s.htm中创建对象脚本，为保证属性和方法是公用的，必须在名字前加public_ 。public_textString=; /属性function public_get_textString()return textStringl 然后在a.htm中放入标识Scriptlet1.textString=Hello from scriptlets/给对象的属性赋值document.writeln(Scriptlet1.textString);这种类型的对象与脚本语言对象不同，它是HTML对象，需指定新对象的高度和宽度。三、Form元素：文本框和按钮1、文本框：1) 默认size=20；2) 文本框中预先显示的内容放在value中3) 控制：onFocus=this.blur()4) 方法：Blur、select、focusinput type=”text” name=”username” size=15 maxlength=30 value=2、按钮：1) 改变背景颜色：script language=”javascript”function changcolor()document.bgColor=”ff0000”;因为在IE4.0中的所有HTML标识都是处于激活状态的，所以可以在脚本中改变其属性并立即看到其效果。2) 点击按钮时将文本框的size属性从20变到40，并改变其中的文字：function resizetextbox()document.form1.textbox.size=40;document.form1.textbox.value=”尺寸已改变”;3) 方法：Blur、Click、focus3、文本区：这些文字显示在文本框中function display()document.form1.content.value=”这是改变后的文字”;事件：onBlur、onChange、onFocus、onSelect4、口令密码：本例可把密码在另一个文本框中显示出来：function showpass()document.form1.seehere.value=document.form1.password.value;方法： onBlur、onFocus5、确认按钮和重置按钮：form提供将信息送回给Web服务器的功能，action值为表单处理文件，这样服务器上的CGI程序都能知道到哪里去找该用户意见卡，onsubmit可在发送表单前在客户端用javascript先验证表单是否符合要求。在form中，submit和reset按钮是自动激活的，如果点击submit，将自动调用javascript来检查form，如果检查通过将发送该form。6、文件控件：该控件可将用户所选的文件整个地上载文件名：方法：onBlur、onChange、onFocus7、隐藏控件：隐藏控件仅仅是存贮数据的一个地方，比如可以将id作为表单的一部分(隐藏控件)上传，以便在处理文件中能够request到id值，从而进行数据库查询。Hidden控件不支持方法和事件处理。input type=hidden name=”userid” value=8、单选钮(事件onBlur、onClick、onFocus)：男女1) 一组单选钮的name名称必须一样，但事件可以不同。2) value值可取成与显示值一样，这样可以直接request到value值即为显示值；但request时必须进行汉字格式转换8859-1。3)判断单选钮是否选中中if(!form1.acceptadvice0.checked)alert(“”);9、复选框(onBlur、onClick、onFocus)：报纸杂志书籍与单选钮不同的是name名称不同。事件也可以不同。10、将复选框和单选钮组合起来：比如左边为单选钮，右边为复选框，按某一个单选钮时，会自动选择复选框的某一组合比如有几种不同的油炸面包圈-普通、巧克力、果冻、奶油、草莓；相应的复选框有普通、表面洒沫、糖沫、结霜、填充(每一项50美分)。普通巧克力果冻奶油草莓 普通 表面洒沫 糖沫 结霜 填充/可以清除页面元素的左对齐或右对齐的作用/计算复选框的价钱function radio1()clearCheckBoxes();setCheckBox(1);calculateCost();同样radio2()setCheckBox(4); radio33,5 radio42,3,5 radio54,5function check()calculateCost();function clearCheckBoxes()document.form1.check1.checked=false;document.form1.check2.checked=false; 同样check3,check4,check5设为falsefunction setCheckBox(n)switch(n)case 1:document.form1.check1.checked=true;break;case2:document.form2.check2.checked=true;break;同样有case3,case4,case5function calculateCost()var cost=0;if(document.form1.check1.checked)cost=cost+0.50;同样有check2,check3,check4,check5document.form1.TextBox.value=”总价格为：$”+cost;11、使用elements数组在Web页面中的控件自动是elements数组中的一部分。这样我们可以在elements数组上建立一个循环来处理那些元素。因为我们先加入了五个单选按钮，所以它们存放在document.form1.elements04中，复选框存放在document.form1.elements59中。因此上述代码可以简化为：function clearCheckBoxes()for(var i=0;i=4;i+)document.form1.elementsi+5.checked=false;/i+5因为是复选框function setCheckBox(n)document.form1.elementsn+4.checked=true;function calculateCosr()var cost=0;for(var m=0;m=4;m+)if(document.form1.elementsm+5.checked)/IE中的属性即使在表单中没有写，也可以直接用cost=cost+0.50;12、选择框(事件：onBluron、onChange、Focus)： 受理处 综合处 督查处1) 如果没有value则默认为0,1,2,，取value值与显示值一样，可以简化后台处理。2) Multiple使用户可以同时选择多项。3) 选择控件有一个内部数组option存放着所有选项；选择控件的length属性存放着选项总数。因此也可以建立一个循环：function ok()for(var m=0;mlength;m+)if(document.form1.dept.optionsm.selected) 四、鼠标和键盘事件1、window.event的属性(比如window.event.x)：altKeyAlt键按下时为真ctrlKeyCtrl键按下时为真shiftKeyShift键按下时为真button如果鼠标按下，哪一个键被按下cancelBubble该事件是否应沿事件层次向上移clientX相对用户区域的X坐标clientY相对用户区域的Y坐标keyCode按键的代码offsetX相对容器的X坐标offsetY相对容器的Y坐标reason数据传输的部署returnValue事件返回值screenX相对实际屏幕的X坐标screenY相对实际屏幕的Y坐标fromElement被移动的元素srcElement产生该事件的元素srcFilter如果有filterChange事件发生，则过滤事件toElement正在向其移动的那个元素type以字符串形式返回事件类型x该事件在页面中的X坐标y该事件在页面中的Y坐标2、鼠标按下与鼠标释放事件(onMouseDown、onMouseUp)/onMouseDown为鼠标按下事件，onMouseUp为鼠标释放事件document.onMouseDown=downdocument.onMouseUp=upfunction down()if(navigator.appName=”Microsoft Internet Explorer”)/为”Netscape”则Netscape浏览器if(window.event.shiftKey&window.event.ctrlKey)/若shift和ctrl同时按下document.form1.textbox.value=”shift和ctrl同时按下，坐标：”+window.event.x+”,”+window.event.y;return;function up()/与down()一样3、预览页面(onMouseOver)：当鼠标移动到页面中的一个超链接上时，在图片区显示所链接页面的一幅小图像以供预览链接1链接2链接3function link1()document.form1.preview.src=”gif/image1.gif”;function link2()document.form1.preview.src=”gif/image2.gif”;4、图像切换(onMouseOver、onMouseOut)当鼠标移至该图像上时将该图像切换成新的一幅(或显示一幅更大、更完整的图像)，鼠标移开时最初的图像双恢复回来。function imgover()document.form1.img1.src=”gif/image2.gif”function imgout()document.form1.img1.src=”gif/image1.gif”5、接收键盘输入(keyPress事件)：IE中将输入焦点不放在文本框中，敲击键盘，文本框中可以显示敲击的内容document.onKeyPress=keyPress;var str=”;function key()if(navigator.appName=”Microsoft Internet Explorer”)str+=String.fromCharCode(window.event.keyCode);document.form1.keycontent.value=str; if(window.event.keyCode=27) /Esc的ASCII码为27window.close();1) 通过使用IE中String类的fromCharCode()方法，可以将键盘代码转换成字符串。2) 实现用户按下Esc键关闭窗口：6、用鼠标点亮文本当鼠标放到超链接上时，文字明亮且字体变大，鼠标移开恢复正常:链接function link()link1.style.color=”red”;link1.style.fontSize=36 function out()link1.style.color=”black”;link1.style.fontSize=16五、处理图像与动画1、图片数组：下面的例子，显示10个图片，当点击按钮时，向某一随机图片更换另一幅随机图片1) image对象：可将独立的图像作为对象来处理；image对象的属性有：border,complete,height,hspace,lowsrc,name,prototype,src,vspace,widthimage对象的事件有：onAbort,onError,onLoad我们在这里使用了image的src属性；并创建了image对象数组，命名为imageArray：2) images数组，它存放Web页面中的所有图像。这里我们使用images数组实现将图像放入到Web页面中的元素中：var imageArray=new Array(5);imageArray0=new Image(50,50);imageArray0.src=images/mk_1.gif;imageArray1=new Image(50,50);imageArray1.src=images/mk_2.gif;imageArray2=new Image(50,50);imageArray2.src=images/mk_3.gif;imageArray3=new Image(50,50);imageArray3.src=images/mk_4.gif;imageArray4=new Image(50,50);imageArray4.src=images/mk_5.gif;function newimage()document.imagesMath.round(9.5*Math.random().src=imageArrayMath.round(4.5*Math.random().src;2、IE中的结构化图形控件1) 实际上是ActiveX控件,需用标识创建，classid是固定的，windows用其在注册表中来跟踪该控件2) 为了使用属性，需在中放入一个标识，我们给每个元素命名为line0001,line0002,必须是4位数字，且从0001开始，如果顺序错了控件将不工作3) 用setLineColor()设置画笔颜色；用setFillColor()设置填充颜色4) 用setFillStyle(1)设置填充样式，即用单色填充5) 用Rect()画矩形，包括原点，宽和高，旋转角度(逆时针)6) 用pie()画扇形，包括原点，包含扇形的椭圆的宽和高，起始和终止角度，旋转角度 /用红色在外围画线 /用绿色填充 /用蓝色填充 /用青色填充7) 结构化图形控件的事件：onClick，ondblclick(双击)，onMouseDown，onMouseMove，onMouseOut，onMouseOver，onMouseUp3、Web页面中定位图像这里我们用的style属性来定位(用绝对位置)，此外还可实现鼠标拖动图像。4、图像映像5、隔5ms自动换一幅图片，按停止按钮可中止动画(也可放10个图片，每隔5ms自动取图片库中的随机图片更换随机位置的图片)延迟500ms可用setTimeout(expression,msec)函数实现var imageArray=new Array(5);imageArray0=new Image(50,50);imageArray0.src=images/mk_1.gif;imageArray1=new Image(50,50);imageArray1.src=images/mk_2.gif;imageArray2=new Image(50,50);imageArray2.src=images/mk_3.gif;imageArray3=new Image(50,50);imageArray3.src=images/mk_4.gif;imageArray4=new Image(50,50);imageArray4.src=images/mk_5.gif;interval=setTimeout(animate(),5);function animate()document.images0.src=imageArrayMath.round(4.5*Math.random().src;interval=setTimeout(animate(),500);6、用IE的DirectAnimation（DAViewerControl控件）：（IE的DirectAnimation多媒体控件包括DAViewerControl控件、Path控件、Sequencer控件、Sprite控件及结构化图形控件。）六、Document对象1、对象：最顶端的是window对象(代表浏览器本身)，下面是IE4.0中的对象层次的一部分：windowdocument,location,frames,history,navigator,event,visuallinks,anchors,images,forms,applets,embeds,plugins,frames,scripts,all,selection,body,anchor,applet, form ,area,image,link,pluginelements,button,checkbox,fileUpload,