东软内部培训教程JavaScript_开发工具

PPT 内容

1. Beyond TechnologyJavaScript(Ver1.0) 演讲人：丁海波
2. 目的与目标能够熟练的使用JavaScript语言对页面中的元素进行动态操作，对Form中的控件可以进行合法性，有效性校验等等。
3. 课程概述本课程主要是介绍JavaScript语言的语法，如何使用JavaScript对页面中的元素进行动态操作和对页面中可输入，可选择的控件进行校验等。
4. 第一章: JavaScript简介第二章: JavaScript基本语法第三掌 JavaScript对象第四章在浏览器中使用
5. 第一章: JavaScript简介
6. JavaScript 历史JavaScript是由Netscape公司开发的一种脚本语言，结构简单，使用方便，对用户自身知识水平的要求并不高，易学易懂。 Netscape将这种脚本语言命名为LiveScript，它的整个语法以Java为基础，但比Java要简单，同时，由于它是一种脚本语言，所以无需编译，可由浏览器直接解释运行，而不象Java那样需要经过编译。 Netscape见LiveScript大有发展前途，而SUN也觉得可以利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript，造就了这个强力的WEB页开发工具。
7. JavaScript的特点1.JavaScript是一种脚本语言语法和规则没有可编译的编程语言那样严格和复杂，主要用于格式化文本和使用以编程语言编写的已编译好的组件。 2.JavaScript是基于对象的语言面向对象程序设计力图将程序设计为一些可以完成不同功能的独立部分(即对象)的组合体。基于对象的语言本身已具有创建完成的对象。例如，“日期”对象。 3.JavaScript是事件驱动的语言当你在Web主页中进行某种操作时，就产生了一个“事件”。事件几乎可以是任何事情:敲击一个按钮、拖动鼠标等均可视为事件。JavaScript是事件驱动的，当事件发生时，它可对之作出响应。具体如何响应某个事件取决于你的事件响应处理程序。
8. JavaScript的特点4.JavaScript是安全的语言 JavaScript被设计为通过浏览器来处理并显示信息，但它不能修改其它文件中的内容。也就是说，它不能将数据存储在Web服务器或用户的计算机上，更不能对用户文件进行修改或删除操作。 5.JavaScript是平台无关的语言对于一般的计算机程序，它们的运行与平台有关。例如，除非你使用一个仿真器来模拟Windows环境，否则不可能在Macintosh上运行一个Windows应用程序。JavaScript则并不依赖于具体的计算机平台（虽然有一些限制），它只与解释它的浏览器有关。不论你使用Macintosh还是Windows，或是UNIX版本的NetscapeNavigator，JavaScript都可正常运行。
9. JavaScript的功能JavaScript的功能总体可以归结为两类：　1、交互性　　使用JavaScript可以大大加强WEB页的交互性，如轻松的在你的WEB页中加入按钮，显示带有控制的文本，建立交互式表格等。　2、动态性　　JavaScript可以使WEB页上显示的文本信息动起来或是加入一些动画，从而使你的WEB页看上去活泼诱人。
10. JavaScript与Java语言的比较 JavaScript不是Java 　　Java是由Sun公司开发,与平台无关的、面向对象的程序设计语言，它与JavaScript基于对象的结构相反。Java可以用来设计独立的应用程序，也可以用来创建一种称为Applets的小应用程序。经过编译后，Applets成为一种平台无关的字节代码，这种Applets可以运行在任何平台上，只要该平台具备能够操作Applets的Java虚拟机即可。
11. JavaScript与Java语言的比较 JavaScript与Java之间其它的一些主要区别　１、Java程序被编译成为字节代码文件；JavaScript则是将字符正文传递给客户方并由客户方解释执行。　２、JavaScript是基于对象的，它自身具有已创建完毕的对象；而Java则是面向对象的，对象必须从类中创建。　３、JavaScript的代码以字符的形式嵌入在HTML文档中；Javaapplets则是由文档引用，其代码以字节代码的形式保存在另一个独立的文件中。
12. JavaScript与Java语言的比较 JavaScript与Java之间其它的一些主要区别　４、在HTML文档中，用标识 //可以包含事件响应代码等
17. JavaScript包含文件你可以将JavaScript文件在HTML文件外面存放！把你的零碎们放到一起，起个名字，再给它个js的文件尾。非常重要：js文件里不能有或其它注释。例如：把pku.js文件链接到HTML文件中的句型如下：
28. prototype 属性返回对象类型原型的引用。引用方式： objectName.prototype objectName 参数是对象的名称。
29. JavaScript的对象: Array 属性：length，它指明了数组的长度。方法： join() 将数组值连接变为一个字符串； reverse()将数组值倒序； sort() 将对数组值进行排序; AAA=new Array(3); AAA[0]="B"; AAA[1]="A"; AAA[2]="C"; document.write(AAA.length+"
"); document.write(AAA.join()+"
"); document.write(AAA.reverse().join()+"
"); document.write(AAA.sort().join())+"
";
30. JavaScript的对象:String 属性：length属性表明字符串长度。方法字符串的转换； toUpperCase()将字符串所有字符转为大写； toLowerCase()将字符串所有字符转为小写； toString()将非字符串对象显示转化为字符串。字符串的处理； substring()将括号中参数所指的字符串片段返回； charAt()返回括号中指定位置字符串的内容； split()根据指定的分隔符把一个字符串划分为一个字符串数组。如:newstring = astring.substring(index1,index2); // 返回一个位置在 index1和index2-1之间的字符串，特别是如果 index2 < index1，子串返回 index2和index1-1之间的部分!
31. JavaScript的对象:Date 属性：无方法： a、设定日期 setDate(),setMonth(),setYear()； setTime()设定时间1970.1.1开始用毫秒数来计时； b、日期格式转换 .Date.UTC()返回一个通用时间，距1970年1月1日午夜的毫秒。 c、获取日期 .Date.getDate(), .Date.getMonth(), .Date.getYear(), .Date.parse(), Date.getDay(); d、处理时区 .toGMTString()将日期时间值转换为的字符串(GMT时间)； .tolocaleString()将日期时间值转换为的字符串(当地时间)。
32. JavaScript的对象:Math 属性： .E：为自然对数的底(约为2.718)； .PI：为圆周率(约为3.14159)； …… 方法： .abs()绝对值计算； .pow()数的幂； .sqrt()计算平方根； .cos()、.sin()、.tan() 、.acos、.asin()、.atan(); ……
33. JavaScript的屏幕对象　　显示器－screen。各种相关特征涵义参数举例说明 screen.height屏幕高度 screen.width屏幕宽度 screen.availHeight屏幕可见高度 screen.availWidth屏幕可见宽度 screen.colorDepth色深8 ，16，32位颜色
34. JavaScript事件模型事件：用户对网页的一些特定“操作”(这些操作通常直接对应鼠标的动作)和系统行为。例如加载一张网页，点击一个超链等。事件处理程序的引入（如何使一段JavaScript程序和事件的发生联系起来？）。 “on事件名”是JavaScript规定的对应事件处理程序柄（event handler）的名字。例如onClick、onfocus、onSubmit等等。
35. JavaScript事件模型(续)第一种引入方式：事件处理程序柄名以属性名的形式在HTML文本中某些适当的标记中出现，而对应的属性值是由网页编写者提供的JavaScript程序段（或事件处理函数名）；第二种引入方式：将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性（property） document.forms[0].age.onchange=isNumber；例：让事件处理程序作为“属性值” 这里，事件处理程序柄的名字是大小写不敏感的。这与HTML文本中对标记的属性名的松散要求是一致的。 OnLoad在网页完全加载完后执行(即包括图像,applet等)； OnUnLoad在网页退出之前执行。
36. JavaScript程序的注意事项　最好把源码写进HTML文件头里，及</head>之间是合适的地方。　JavaScript程序要用<script>，language这个限定参数也是必要的。再用</script>把程序关闭。　提示开始标记来关闭提示。　对所编程序加必要的注释。单行或多行注释加在/**/号中间来标示；单行注释则加在//号后面。</li><li data-id="37">37. 第四章在浏览器中使用</li><li data-id="38">38. 1.代表浏览器器所打开的窗口。 2.通常代表目前正在使用(focus)的窗口。 3.如果打开多个浏览器窗口时，可以利用别名(alias)来区别它们,如： ex. opener, parent, self, window, top 窗口对象(Window object)</li><li data-id="39">39. 窗口对象使用语法window.特性 window.方法(参数群) self.特性 //self代表目前window或frame名称 self.方法(参数群) top.特性 //top代表最顶层的窗口 top.方法(参数群) parent.特性 //parent代表目前框架的父框架 parent.方法(参数群) 窗口名称.特性窗口名称.方法(参数) 特性方法(参数)</li><li data-id="40">40. closed ->说明窗口是否已经关闭 defaultStatus ->浏览器底部预设的状态列讯息 length ->窗口重的框架个数 Frame ->窗口中的frame frames ->窗口中的frame数组 name ->窗口的名称 opener ->打开该窗口的窗口名称 status ->浏览器底部自行设定的状态信 document ->窗口中的document对象 history ->窗口history对象 location ->窗口对象的对象中的location对象窗口对象的属性</li><li data-id="41">41. alert() ->显示警告讯息 confirm() ->显示确认讯息 prompt() ->显示提示讯息 focus() ->成为焦点 blur() ->移开焦点(成为背景处理) open() ->打开新浏览窗口 close() ->开关已打开的浏览窗口 eval() ->执行引数运算式计算窗口对象的方法</li><li data-id="42">42. resizeBy(x, y) ->将窗口尺寸向X轴及Y轴调整 moveBy(x, y) ->将窗口向X轴及Y轴移动 scroll(x,y) ->卷动至指定的座標 print() ->列印指定之窗口內容 setTimeout() ->设定一定时程序(计时器) clearTimeout() ->撤销一定时程序(计时器) toString() ->传回字串表示值 valueOf() -->传回数值表示值窗口对象的方法</li><li data-id="43">43. <Script> function grow(){ window.resizeBy( 50, 50) } function shrink(){ window.resizeBy( -50, -50) } </script> <body onMouseOver=grow() onMouseOut=shrink()> <H1>将窗口放大与缩小</H1> </body> 范例 – 自动放大窗口</li><li data-id="44">44. <Script> function scrollIt() { for (y=1; y<=1000; y++){ scroll(1,y) } } </Script> <body onDblClick=scrollIt()> 按鼠标左键兩下，画面自动卷动.... <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> ... The End .... <body>范例一 – 自动卷动窗口</li><li data-id="45">45. 打开新窗口对象的语法[窗口对象名称 =] [Window.] open (‘[URL]‘ , ‘[新窗口名称] ‘ , [‘窗口的规格‘] )窗口对象名称：用以使用窗口对象的特性与方法。 ex.窗口对象名称.close 窗口名称：用以识別该窗口。 ex.<a href=“http://www.seed.net.tw” target=“窗口名称”></li><li data-id="46">46. <form> <input type=button value="打开窗口一(newWin)" onClick="newWin=window.open('test.htm','')"><P> <input type=button value="height为150点,width为200点" onClick="open('test.htm','','height=150,width=200')"><P> <input type=button value="只有工具列的窗口" onClick="open('test.htm','','toolbar=yes')"><P> <input type=button value="开关窗口一(newWin)" onClick=newWin.close()><P> <input type=button value="开关目前窗口" onClick=window.close()><P> </form>窗口对象范例 - 打开与开关窗口</li><li data-id="47">47. <Script> function grow(){ window.resizeBy( 0, 150) } function shrink(){ window.resizeBy( 0, -150) } </script> <body onMouseOver=grow() onMouseOut=shrink()> 广告页 here </body>窗口对象范例- 动态调整广告页大小</li><li data-id="48">48. 使用 Timer 的语法1.Timer又称为计时器或延迟器，常用来指定于特定时间后执行某程式。 2.时间单位为毫秒(千分之一秒) ex. 3000 milliseconds = 3 seconds [window.]setTimeout(“欲执行的程式码或函数”, 设定的时间)</li><li data-id="49">49. 使用 Timer 的语法(二)如果利用循环将计时器设计成重复执行，欲终止计时器执行，请使用此一格式。　因为要终止计时器的执行，必须指定欲终止的计时器名称。计时器对象名称 = [window.]setTimeout(“欲执行的代码或函数”, 设定的时间)</li><li data-id="50">50. 终止循环內 Timer 的语法终止计时器的执行，必须指定欲终止的计时器名称。 [window.]clearTimeout(计时器对象名称)</li><li data-id="51">51. <script> function timer() { setTimeout("alert('3秒到了!')",3000) } </script> <body><form> <input type=button value="计时开始" onClick=timer()> </form></body>窗口对象范例 - timer(1)</li><li data-id="52">52. <script> var counter=0 setTimeout(" upDate() ",3000) //三秒钟后呼叫upDate() function upDate() { counter ++ status = "第" + counter + "次载入" timer1 = setTimeout("upDate()",3000) } </script> <body><form> <input type=button value="计时结束" onClick=clearTimeout(timer1)> </form></body>窗口对象范例 - timer(2)</li><li data-id="53">53. 历史对象(history object)history对象是用来存储客戶端访问过的URL资料。这些历史记录是以串列(list)的方式存储。各大浏览器均提供检视history工具 ex. IE -> 检视/移至 NC -> 前往(go) </li><li data-id="54">54. 历史对象的使用语法如下。 history.特性 history.方法(参数群) length ->history对象中URL个数 back() ->载入历史对象中上一个URL forward() ->载入历史对象中下一个URL go() ->载入指定的URL 历史对象的使用语法</li><li data-id="55">55. <body> <form> <input type=button value="上一页" onClick=history.back()> <input type=button value="下一页" onClick=history.forward()> </form> </body>窗口对象范例 - history</li><li data-id="56">56. <Script> with (document) { write("<a href=javascript:location.reload()>重新载入此页</a><p>") write("<a href =javascript:location.replace('http://www.seed.net.tw')> 前往SeedNet方法一</a><p>") write("前往SeedNet方法二<p>".link('http://www.seed.net.tw')) write("<a href='http://www.seed.net.tw'>前往SeedNet方法三</a><p>") } </Script> <body> <a href="http://www.seed.net.tw">前往SeedNet方法四</a> </body>窗口对象范例 - location(1)</li><li data-id="57">57. <body> <a href='#' onMouseOver=location.replace('http://www.seed.net.tw')> 前往SeedNet方法五</a><p> <a href='#' onMouseOver=location.href='http://www.seed.net.tw'> 前往SeedNet方法六</a><p> <a href='#' onMouseOver=window.location='http://www.seed.net.tw'> 前往SeedNet方法七</a> </body>窗口对象范例 - location(2)</li><li data-id="58">58. Document 对象</li><li data-id="59">59. 1.代表目前的文件信息。 2.直接对应至HTML的Body标签。文档对象(Document object)</li><li data-id="60">60. document.特性 document.方法(参数群) bgColor ->相当于 HTML 的 BGCOLOR alinkColor ->相当于 HTML 的 ALINK linkColor ->相当于 HTML 的 LINK vlinkColor ->相当于 HTML 的 VLINK fgColor ->相当于 HTML 的 TEXT title ->相当于 HTML 的 <title> lastModified ->最近更新日期 URL ->文件的 URL文档对象的使用语法</li><li data-id="61">61. Document Anchor Applet Area Image Form Link 文档对象的对象阶层图</li><li data-id="62">62. <Script> document.write("◎本页最后更新日期： ") document.write(document.lastModified) </Script>文档对象范例 – 最近更新时间</li><li data-id="63">63. Form 对象</li><li data-id="64">64. 1.用于定义表单，提供使用者输入资料。 2.包含许多控制类型。 3.直接对应至HTML的表单元件。表单对象(Form object)</li><li data-id="65">65. Form Button Checkbox FileUpload Hidden Password Radio Reset Select Submit Text Textarea表单对象的对象阶层图</li><li data-id="66">66. 表单名称.特性表单名称.方法(参数群) forms[索引值].特性 forms[索引值].方法(参数群)表单对象的使用语法</li><li data-id="67">67. action ->ACTION属性设定值 elements ->以陣列代表表单內所有元件 encoding ->使用POST传送时之编码方式 length ->表单內元件个数 method ->指定传送方式 (POST/GET) target ->将执行结果于特定窗口內执行表单对象的特性</li><li data-id="68">68. 表单对象可使用的方法如下。 reset() ->模拟按下 reset 按钮的动作 submit() ->模拟按下 submit 按钮的动作 toString() ->传回字串表示值表单对象的方法</li><li data-id="69">69. 显示一个可供输入的域。可使用的事件处理程序： onBlur, onChange, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp本文对象(Text object)</li><li data-id="70">70. type = text //类型为本文 name = tel //Text名称 value = 03-4257387 //初始值 size = 20 //Text大小 title = 提示值 //提示值 AccessKey = L //快捷键值 maxlength = 10 //可输入资料长度 readonly //指定成为只读属性本文对象相关参数</li><li data-id="71">71. 文本对象的对象特性defaultValue -> 该元件预设值 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件目前输入值</li><li data-id="72">72. 1. 显示一个可供选择(单选)的按钮。 2. ON 表示确认﹔OFF 表示不确认。可使用的事件处理程序： onBlur, onClick, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp圆钮对象(Radio object)</li><li data-id="73">73. type = radio //类型为圆钮 name = sex //名称为sex value = boy //传送值为boy checked //设定为预设选项圆钮对象相关参数Input type=radio name=sex value=boy checked</li><li data-id="74">74. 圆钮对象的对象特性checked ->判断是否已經核取 defaultChecked ->该元件预设为核取与否 type ->该元件类型 name ->该元件识別名称 value ->该元件目前输入值</li><li data-id="75">75. <form name=form1> 性別： <input type=radio name=sex>男生<BR> <input type=radio name=sex checked>女生<BR> <input type=button value="判断使用者输入" onclick=SEX()> </form> <script> function SEX(){ if (document.form1.elements[0].checked) sex="男生" else sex="女生" alert('性別是：'+sex) } </script>表单对象范例 - radio</li><li data-id="76">76. 1. 显示一个可供选择的复选框。 2. ON 表示确认﹔OFF 表示不确认。可使用的事件处理程序： onBlur, onClick, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp确认方块对象(Checkbox object)</li><li data-id="77">77. type = checkbox //类型为确认方块 name = hobby //名称 value = music //传送值 checked //设定为预设选项确认方块对象相关参数Input type=checked name=hobby value=music</li><li data-id="78">78. 1.显示一个可供输入密码的输入框。 2.利用 * 隐藏所输入的资料。可使用的事件处理程序： onBlur, onChange, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp密码对象(password object)</li><li data-id="79">79. type = password //类型为密码 name = password //名称 value = 1234 //初始值 size = 20 //大小 maxlength = 10 //可输入资料长度密码对象相关参数Input type=password name=pw</li><li data-id="80">80. <form name=form1> 输入密码：<input type=password name=pw1><BR> 重新输入：<input type=password name=pw2><BR> <input type=button value=开始检查 onClick=checkPw()> </form> <Script> function checkPw(){ if (document.form1.pw1.value != document.form1.pw2.value) alert ("兩組密码不符，请重新输入") else alert ("OK!") } </Script>表单对象范例 - password(1)</li><li data-id="81">81. 密码对象的对象特性defaultValue -> 该元件预设值 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件目前输入值</li><li data-id="82">82. <Script> function checkPwLgh(index,str){ if (str.length != 9){ alert('你只输入'+str.length+'位数\n请输入9位数密码') document.form1.elements[index].value = '' document.form1.elements[index].focus() }} function checkRetype(){ if (document.form1.pw.value != document.form1.retypePw.value){ alert ("兩組密码不符，请重新输入") document.form1.retypePw.value = '' document.form1.retypePw.focus() } else alert ("密码检查作業完成!")} </Script> …<下页续>表单对象范例 - password(2)</li><li data-id="83">83. ……<接上页> <form name=form1> 输入密码： <input type=password name=pw size=9 maxlength=9 onChange=checkPwLgh(0,this.value)><BR> 重新输入： <input type=password name=retypePw size=9 maxlength=9 onChange=checkPwLgh(1,this.value)><BR> <input type=button value=密码检查 onClick=checkRetype()> </form>表单对象范例 - password(2)</li><li data-id="84">84. 提供一个隐藏域，用以储存特殊资料值，以供运算或参考。隐藏对象(hidden object)</li><li data-id="85">85. type = hidden //类型为隐藏 name = dummy //对象名称 value = 1234 //元件初始值隐藏对象相关参数Input type=hidden name=dummy value=1234</li><li data-id="86">86. 提供一組选单，供使用者选择。可使用的事件处理程序： onBlur, onChange, onFocus onClick, onDblClick选择对象(select object)</li><li data-id="87">87. name = week //名称 size = 3 //下拉框大小 multiple //设定为可多选 option //定义选择的內容 selected //预选项目 value //定义传送值选择对象相关参数</li><li data-id="88">88. <form> <select size=2> <option value=0>Sunday <option value=1>Monday <option value=2>Tuesday <option value=3>Wednesday <option value=4>Thursday <option value=5>Friday <option value=6 Selected>Saturday </select> </form>表单对象范例 - select(1)</li><li data-id="89">89. 选择对象的对象特性type -> 该元件类型 name -> 该元件识別名称 value -> 该元件目前输入值 selectedIndex -> 选项的索引值 length -> 选项个数 options -> 选项数组</li><li data-id="90">90. <Script> url = new Array(2) url[0] = "http://www.seed.net.tw" url[1] = "http://www.hinet.net" function jumpPage(form) { i = form.menu.selectedIndex; if (i>0) window.location.href = url[i-1] } </Script> <Form><Select name=menu onChange="jumpPage(this.form)"> <option>--选择ISP--<option>Seednet<option>Hinet </Select></Form>表单对象范例 - select(2)</li><li data-id="91">91. <Html><Script> function createOptions(){ var option = new Option(document.form1.select1.value) document.form1.select2.options[2] = option } </script> <form name=form1> <select name=select1 size=10> <option>可选择项目 <option>--------------- <option value=香蕉>香蕉 <option value=芭樂>芭樂 <option value=蘋果>蘋果 <option value=梨子>梨子 </select> …下页续 …表单对象范例 – 动态选单</li><li data-id="92">92. …接上页… <input type=button value="-->" onClick=createOptions()> <select name=select2 size=10> <option>选择项目 <option>--------------- </select></form> </Body> </Html>表单对象范例 – 动态选单</li><li data-id="93">93. 练习设计一交换式选单：所选取的项目应可列在右方。(按按钮或鼠标点清单项目两下) 加入右方选单后将左方选项清除。设计一个刪除钮可将选项刪除。</li><li data-id="94">94. 提供一个按钮，供触发事件之用。可使用的事件处理程序： onBlur, onClick, onFocus按钮对象(button object)</li><li data-id="95">95. type = button //类型为按钮 name = button1 //按钮名称 value = 请按我 //按钮面显示值 title = 送至服务器 //提示值 tabindex = 0 //定位顺序 disabled //使失效按钮对象相关属性</li><li data-id="96">96. 按钮对象的对象特性type -> 该元件类型 name -> 该元件识別名称 value -> 该按钮面显示值 disabled -> 该元件生效否</li><li data-id="97">97. <form name=form1> 动态设定按钮的显示字樣：<BR> 请输入： <input type=text onChange="document.form1.button1.value=this.value"> <BR> <input type=button name=button1 value=' '> </form>表单对象范例 - button</li><li data-id="98">98. <FORM onReset="this.button1.disabled=true"> <INPUT TYPE=text onClick="this.form.button1.disabled=false"> <INPUT TYPE=button name=button1 disabled value=" 传　送 "> <INPUT TYPE=reset value=" 重　来 "> </FORM> 表单对象范例 - button</li><li data-id="99">99. 用以将表格內资料送至服务器之用。可使用的事件处理程序： onBlur, onClick, onFocus 另外可在Form标签內搭配使用 onSubmit提交对象(submit object)</li><li data-id="100">100. type = submit //类型为呈送钮 name = submit1 //按钮名称 value = 提交 //提交钮表面显示值提交对象相关参数Input type=submit name=submit1 value=送出</li><li data-id="101">101. 提交对象的对象特性type -> 该元件类型 Name -> 该元件识別名称 value -> 该按钮面显示值</li><li data-id="102">102. <Script> function isReady() { if (document.form1.text1.value.length == 9) return true else alert("请输入9位数密码");return false } </Script> <Form name=form1 onSubmit="return isReady()"> <input type=text name=text1> <input type=submit> </form>表单对象范例 - submit1.双引号不能省略 2.当onSubmit = true 时才提交到器</li><li data-id="103">103. <Script> function isReady(form) { if (form.text1.value.length == 9) return true else alert("请输入9位数密码") form.text1.focus() //将焦点移回 text return false } </Script> <Form name=form1 onSubmit="return isReady(this)"> <input type=text name=text1> <input type=submit> </form>表单对象范例 - submit</li><li data-id="104">104. 用以将表格內资料还原为预设值，即重新输入之意。可使用的事件处理程序： onBlur, onClick, onFocus 另外可在Form标签內搭配使用 onReset重置对象(reset object)</li><li data-id="105">105. type = reset //类型为重置钮 name = reset1 //按钮名称 value = 重新输入 //重置钮表面显示值重置对象相关参数Input type=reset name=reset1 value=重新输入</li><li data-id="106">106. 重置对象的对象特性type -> 该元件类型 name -> 该元件识別名称 value -> 该按钮面显示值</li><li data-id="107">107. <Form name=form1 onReset=alert("重新来吧！")> <input type=text name=text1> <input type=reset> </form>表单对象范例 - reset</li><li data-id="108">108. 提供一个多列的本文域。可使用的事件处理程序： onBlur, onChange, onFocus 本文区域对象(textarea object)</li><li data-id="109">109. name = textarea1 //按钮名称 rows = 8 //列数 cols = 30 //行数(字元数) readonly //定义为只读属性本文区域对象相关参数Input type=reset name=reset1 value=重新输入</li><li data-id="110">110. 本文区域对象的对象特性type -> 该元件类型 name -> 该元件识別名称 value -> 本文区域的內容 defaultValue -> 本文区域的预设內容</li><li data-id="111">111. <form name=form1> 意见留言版......<BR> <textarea name=textarea1 rows=8 cols=30> </textarea> <input type=button value=显示留言內容 onClick= alert('您的留言是：\n---------\n'+document.form1.textarea1.value)> </form>表单对象范例 - textarea</li><li data-id="112">112. 提供一个本文域与档案浏览按钮。可使用的事件处理程序： onBlur, onChange, onFocus 档案对象(file/fileUpload object)</li><li data-id="113">113. type = file //型态为档案对象 name = file1 //对象名称档案对象相关参数Input type=file name=file1</li><li data-id="114">114. 档案对象的对象特性type -> 该元件类型 name -> 该元件识別名称 value -> 该元件內容值</li><li data-id="115">115. <form> <input type=file name=file1> <input type=button onClick=alert(document.forms[0].file1.value)> </form>表单对象范例 - file</li></ul> </section> </section> <section class="mip-box ut-mt10"> <section class="mip-box-heading"><h3> PPT 图集</h3></section> <section class="mip-box-body"> <img class="detail-img" src="https://sppt.open-open.com/image/c7bd15862eaaca49e6124f6ebfa8e864_all.jpg"> </section> </section> <section class="mip-box ut-mt10"> <section class="mip-box-heading"><h3> 相关PPT</h3></section> <section class="mip-box-body ut-pd10"> <ul> <li class="ellipsis"> <a href=" /ppt/11312845f3004efc84d61eacd9019555.html"><i class="fa fa-file-powerpoint-o" aria-hidden="true"></i> 东软内部培训教程JavaScript</a> </li> <li class="ellipsis"> <a href=" /ppt/357de50a5eef4555beb1f288034e04c8.html"><i class="fa fa-file-powerpoint-o" aria-hidden="true"></i> Axure RP 内部培训核心教</a> </li> <li class="ellipsis"> <a href=" /ppt/c874fd77a4dc47a58c367111a8027b03.html"><i class="fa fa-file-powerpoint-o" aria-hidden="true"></i> 软件测试培训教程</a> </li> <li class="ellipsis"> <a href=" /ppt/d540a9e4f22444149ec5fab2a0067d1a.html"><i class="fa fa-file-powerpoint-o" aria-hidden="true"></i> Tomcat培训教材培训</a> </li> <li class="ellipsis"> <a href=" /ppt/a224451f235f4a97997407b86f38d3dc.html"><i class="fa fa-file-powerpoint-o" aria-hidden="true"></i> 质量工程师培训教材</a> </li> <li class="ellipsis"> <a href=" /ppt/644e4417bf9b4e4086aca53b6b4a28a0.html"><i class="fa fa-file-powerpoint-o" aria-hidden="true"></i> SVN 内部培训资料</a> </li> <li class="ellipsis"> <a href=" /ppt/a83344bf77a74396a95fd7f8596e7190.html"><i class="fa fa-file-powerpoint-o" aria-hidden="true"></i> SEO 培训讲义</a> </li> <li class="ellipsis"> <a href=" /ppt/84ecfb600e6746198010e3bd9d29467d.html"><i class="fa fa-file-powerpoint-o" aria-hidden="true"></i> JAVA基础培训 - Java的GUI编程</a> </li> <li class="ellipsis"> <a href=" /ppt/495c66bf5e004b7d866e853d96f6dfd2.html"><i class="fa fa-file-powerpoint-o" aria-hidden="true"></i> LoadRunner 培训教程</a> </li> <li class="ellipsis"> <a href=" /ppt/c81f4403f6ca4df99f5c32862536fcc4.html"><i class="fa fa-file-powerpoint-o" aria-hidden="true"></i> JavaScript 教程</a> </li> </ul> </section> </section> <p class="mt20"> </p> <footer class="bs-docs-footer"> <div class="container"> <p class="t-c"> <a target="_blank" href="http://www.miibeian.gov.cn/">浙ICP备09019653号-31</a> </p> </div> </footer> <mip-fixed type="gototop"><mip-gototop threshold='300'><i class="fa fa-arrow-up" aria-hidden="true"></i></mip-gototop></mip-fixed>  <script src="https://c.mipcdn.com/static/v1/mip.js"></script> <script src="https://c.mipcdn.com/static/v1/mip-sidebar/mip-sidebar.js"></script> <script src="https://c.mipcdn.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js"></script> <script src="https://c.mipcdn.com/static/v1/mip-form/mip-form.js"></script> <script src="https://c.mipcdn.com/static/v1/mip-gototop/mip-gototop.js"></script> <script src="https://c.mipcdn.com/static/v1/mip-history/mip-history.js"></script> <script src="https://static.open-open.com/js/m-lib.js"></script> <script src="https://static.open-open.com/assets/jquery.modal.min.js"></script> <script type="text/javascript" src="https://static.open-open.com/assets/jquery-confirm/jquery-confirm.js?v=3.3.2"></script> <script type="text/javascript" src="https://static.open-open.com/js/m-base.js?v=1.01"></script> <script src="https://static.open-open.com/js/v.js?v=1.01"></script> <script type="text/javascript" src="https://static.open-open.com/js/jq-plug.js?v=2.002"></script> <script> JC.init("", "5304", "ppt",6,false); var consume_gold_cost = 20, uId = "", cId = "5304", slug = "11312845f3004efc84d61eacd9019555", title = "东软内部培训教程JavaScript", summary = ""; var category_name = ""; var tagList = [{ id:4114, name: "JavaScript开发" }, { id:14711, name: "演讲" }, { id:20051, name: "培训" }, { id:123, name: "HTML" }, { id:33, name: "JavaScript" }]; var num_page = "1"; var jc = {}, fav = []; $(function () { window._bd_share_config = {"common": {"bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "32"}, "share": {}};with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'https://static.open-open.com/assets/baidushare/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)]; var slide = $('.slide-box').playSlides({ autoSlide: false, scale: [4,3], total: 115, document_id: "c7bd15862eaaca49e6124f6ebfa8e864" }); $("#article_content li").click(function () { slide.slide_goto($(this).data("id")); $('body,html').animate({scrollTop:0}, 500); }); }); </script> <script src="https://static.open-open.com/js/docshow.js?v2.001"></script> <script>(function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); (function () { var src = "https://jspassport.ssl.qhimg.com/11.0.1.js?40291de101d60af5180c55eb7057c18e"; document.write('<script src="' + src + '" id="sozz"><\/script>'); })();</script> </body> </html>

东软内部培训教程JavaScript

haozh502

贡献于2010-10-30

东软内部培训教程JavaScript

PPT 内容