书签 分享 收藏 举报 版权申诉 / 114
上传文档赚钱

类型WEB平台开发培训-js课件.ppt

  • 上传人(卖家):晟晟文业
  • 文档编号:4027293
  • 上传时间:2022-11-05
  • 格式:PPT
  • 页数:114
  • 大小:659.17KB
  • 【下载声明】
    1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
    2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
    3. 本页资料《WEB平台开发培训-js课件.ppt》由用户(晟晟文业)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
    4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
    5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
    配套讲稿:

    如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

    特殊限制:

    部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

    关 键  词:
    WEB 平台 开发 培训 js 课件
    资源描述:

    1、Neusoft Co.,Ltd.1WEB平台开发培训JavaScript李宁2016年1月 能够熟练的使用JavaScript语言对页面中的元素进行动态操作,对Form中的控件可以进行合法性,有效性校验等等。目的与目标课程概述 本课程主要是介绍JavaScript语言的语法,如何使用JavaScript对页面中的元素进行动态操作和对页面中可输入,可选择的控件进行校验等。第一章:JavaScript简介第二章:JavaScript基本语法第三掌 JavaScript对象第四章 在浏览器中使用第一章:JavaScript简介JavaScript JavaScript 历史历史JavaScript是

    2、由Netscape公司开发的一种脚本语言,结构简单,使用方便,对用户自身知识水平的要求并不高,易学易懂。Netscape将这种脚本语言命名为LiveScript,它的整个语法以Java为基础,但比Java要简单,同时,由于它是一种脚本语言,所以无需编译,可由浏览器直接解释运行,而不象Java那样需要经过编译。Netscape见LiveScript大有发展前途,而SUN也觉得可以利用Livescript为Java的普及做铺垫,于是两家签订协议,将LiveScript改为JavaScript,造就了这个强力的WEB页开发工具。JavaScriptJavaScript的特点的特点1.JavaScri

    3、pt是一种脚本语言 语法和规则没有可编译的编程语言那样严格和复杂,主要用于格式化文本和使用以编程语言编写的已编译好的组件。2.JavaScript是基于对象的语言 面向对象程序设计力图将程序设计为一些可以完成不同功能的独立部分(即对象)的组合体。基于对象的语言本身已具有创建完成的对象。例如,“日期”对象。3.JavaScript是事件驱动的语言 当你在Web主页中进行某种操作时,就产生了一个“事件”。事件几乎可以是任何事情:敲击一个按钮、拖动鼠标等均可视为事件。JavaScript是事件驱动的,当事件发生时,它可对之作出响应。具体如何响应某个事件取决于你的事件响应处理程序。JavaScript

    4、JavaScript的特点的特点4.JavaScript是安全的语言 JavaScript被设计为通过浏览器来处理并显示信息,但它不能修改其它文件中的内容。也就是说,它不能将数据存储在Web服务器或用户的计算机上,更不能对用户文件进行修改或删除操作。5.JavaScript是平台无关的语言 对于一般的计算机程序,它们的运行与平台有关。例如,除非你使用一个仿真器来模拟Windows环境,否则不可能在Macintosh上运行一个Windows应用程序。JavaScript则并不依赖于具体的计算机平台(虽然有一些限制),它只与解释它的浏览器有关。不论你使用Macintosh还是Windows,或是U

    5、NIX版本的NetscapeNavigator,JavaScript都可正常运行。JavaScriptJavaScript的功能的功能JavaScript的功能总体可以归结为两类:1、交互性使用JavaScript可以大大加强WEB页的交互性,如轻松的在你的WEB页中加入按钮,显示带有控制的文本,建立交互式表格等。2、动态性JavaScript可以使WEB页上显示的文本信息动起来或是加入一些动画,从而使你的WEB页看上去活泼诱人。JavaScriptJavaScript与与JavaJava语言的比较语言的比较 JavaScriptJavaScript不是不是JavaJavaJava是由Sun公

    6、司开发,与平台无关的、面向对象的程序设计语言,它与JavaScript基于对象的结构相反。JavaScriptJavaScript与与JavaJava语言的比较语言的比较 JavaScriptJavaScript与与JavaJava之间其它的一些主要区别之间其它的一些主要区别、Java程序被编译成为字节代码文件;JavaScript则是将字符正文传递给客户方并由客户方解释执行。、JavaScript是基于对象的,它自身具有已创建完毕的对象;而Java则是面向对象的,对象必须从类中创建。、JavaScript的代码以字符的形式嵌入在HTML文档中;Javaapplets则是由文档引用,其代码以字

    7、节代码的形式保存在另一个独立的文件中。JavaScriptJavaScript与与JavaJava语言的比较语言的比较 JavaScriptJavaScript与与JavaJava之间其它的一些主要区别之间其它的一些主要区别、在HTML文档中,用标识标明JavaScript脚本;而Javaapplets则用标识来标明。、JavaScript采用弱类型;而Java则采用强类型。JavaScriptJavaScript的局限性的局限性JavaScript为Web内容设计人员提供了极大的灵活性和控制手段。它是一种优秀的“粘合剂”,能够将一个Web节点中的不同组成部分捆绑在一起,成为一个紧密结合的信息

    8、源。然而,像任何事物一样,JavaScript也有它的局限性。浏览器相关的局限性浏览器相关的局限性 平台相关的局限性平台相关的局限性JavaScriptJavaScript的局限性的局限性 安全性有关的局限性安全性有关的局限性JavaScript的设计目标在于“Web安全性”,它比以前任何一种方法都更能保证Web的安全(例如:perl和CGI),这自然是牺牲JavaScript的一些功能换来的。(1)JavaScript不能打开、读、写、保存用户计算机上的文件。它有权访问的唯一信息就是它所嵌入的那一个Web主页中的信息。(2)JavaScript不能打开、读、写、保存Web服务器上的文件。尽管

    9、你可以使用它来提交HTML命令,但HTML命令也不能打开那些文件。JavaScriptJavaScript与与HTMLHTML在HTML文档里面,标签对内包容了和标签对。标签对内包容了标签对,标签对内的文字串是显示窗口的标题。标签对内包容了显示页面的内容。JavaScript的基本成分变量、函数和事件处理方法和HTML代码编织在一起,变量和函数被包容在新标签对内,而标签对则一般放在标签对内;事件处理方法可以被包容在任何中的标签对内,用于响应某事件,激发某 JavaScrip函数。JavaScriptJavaScript与与HTMLHTML document.write(hello world!

    10、)JavaScriptJavaScript包含文件包含文件你可以将JavaScript文件在HTML文件外面存放!把你的零碎们放到一起,起个名字,再给它个js的文件尾。非常重要:js文件里不能有或其它注释。例如:把pku.js文件链接到HTML文件中的句型如下:language=JavaScript“第二章:JavaScript基本语法JavaScriptJavaScript的语法结构的语法结构JavaScript的语言结构既宽松又简单;JavaScript的基本概念:语句:一条由计算机完成的、帮助你达到某种目的的指令,JavaScript中的每一行都可认为是一条语句。变量:一个代表某个值的名

    11、字就是变量。表达式:A=1+B;就是表达式。函数:具有一定功能的程序段;1、parseInt可以将字符串转化为整型数。2、paseFloat将字符串转化为附点数。JavaScript的数据类型 JavaScript支持的数据类型共有四种1、数值型:其中包括整型数和浮点型数。2、布尔型:即逻辑值,true或flase。3、字符串型:由单个或多个文本字符组成。4、空值:由关键字null代表。JavaScript的命名规则1、变量名中可以包含数字0-9、大写或小写的拉丁字母和下划线。2、变量名的首字符必须为字母或下划线。3、变量名对字母的大小写敏感。4、变量名的长度必须在一行内。5、变量名中不能有空

    12、格与其它标点符号。变量与表达式 创建变量 var anumber=137;/变量的值是一个数 var anumber1=2;var astring=“1”;/变量的值也可以是一个字符串 var astring1=“hello”;表达式 xx=astring1+astring/结果是x=“hello1”xx=anumber+anumber1/结果是xx=139 xx=anumber+astring/结果是xx=“1371”表达式与操作符 赋值操作符:=、+=、-=、*=、/=、%=、=、=、&=、=、|=;条件表达式:status=(age=18)?adult:minor;算数操作符:+、-、*

    13、、/、%、+和-,y=+x;位逻辑运算符:&、|、;、布尔操作符:&、|、!比较操作符:有=、=、=、!=;连接操作符+用于连接两个字符串:x=Hello;y=World!;x+y 为 Hello World!其他操作符 in,typeof instanceof等JavaScript流程控制语句if和else:if(condition).else.;for和while:for(初始化表达式;条件;增值表达式)执行语句;;while(条件)条件为真执行;;break可以用在for或while循环中,使循环中断,跳到for或while循环结束的位置;continue用在for或while循环可以跳

    14、过循环体中剩余的语句,直接进行循环的下一次迭代.;第三章 JavaScript对象JavaScript对象模型JavaScript被称为是“基于对象的”(而不是面向对象的),有对象的概念:数据和操作的封装,但没有继承的概念。从定义的角度看,JavaScript程序中有两种对象:JavaScript提供的内置对象(built-in object)和程序中定义的对象。一个对象是一个由变量、其他对象或方法组成的一个集合:在一个对象中包含的其他对象和变量被称为特性(property);在一个对象内的函数(function)称为这个对象的方法(method);在一个特定的对象中的一些特性的序列称为数组,

    15、例如document对象中的image;多维数组是由含有数组特性的对象数组构造的当一个文档加载到浏览器后,它所有的对象都按照浏览器的文档对象所规定的严格层次结构存放到内存。要有一种方法让Script指出它要的是哪一个对象,这就是对象引用。JavaScript用严格的层次结构引导Script至文档的任何区域,对每个对象的引用必须包括从顶部到对象的所有层次,直至对象名,路径中各个相连的对象之间用句点分开。变量可以写成下面的形式:父对象.特性1索引1.特性2.最后特性索引N 对象的方法(method)可以如此引用:对象.方法(参数组);一个含有典型特性和方法的对象的例子:document 是对应一个

    16、.html文档的对象,浏览器读进文档后生成;document.writeln(“hello”)是这个对象的一个方法,输出带换行的字符串;document.location 是该对象的一个特性,含有它的URL。用户对象的定义JavaScript定义“类”、“函数”的语法是一样的,而且这样的函数就成了该类的构造函数!用户用函数定义来定义类,然后用new语句创建该类的一个实例。以下是“类”的例子。(实际效果)function add()this.result=this.left+this.right;function MyClass(n)this.left=n;this.right=6;this.r

    17、esult=0;this.sum=add;x=new MyClass(4);x.sum();document.write(x.result);JavaScriptJavaScript的对象的对象:Arrayq 属性:length,它指明了数组的长度。方法:join()将数组值连接变为一个字符串;reverse()将数组值倒序;sort()将对数组值进行排序;AAA=new Array(3);AAA0=B;AAA1=A;AAA2=C;document.write(AAA.length+);document.write(AAA.join()+);document.write(AAA.reverse

    18、().join()+);document.write(AAA.sort().join()+;JavaScriptJavaScript的对象的对象:StringStringq 属性:length属性表明字符串长度。q 方法字符串的转换;toUpperCase()将字符串所有字符转为大写;toLowerCase()将字符串所有字符转为小写;toString()将非字符串对象显示转化为字符串。字符串的处理;substring()将括号中参数所指的字符串片段返回;charAt()返回括号中指定位置字符串的内容;split()根据指定的分隔符把一个字符串划分为一个字符串数组。如:newstring=as

    19、tring.substring(index1,index2);/返回一个位置在 index1和index2-1之间的字符串,特别是如果 index2 index1,子串返回 index2和index1-1之间的部分!JavaScriptJavaScript的对象的对象:DateDateq 属性:无q 方法:a a、设定日期设定日期setDate(),setMonth(),setYear();setTime()设定时间1970.1.1开始用毫秒数来计时;b b、日期格式转换日期格式转换.Date.UTC()返回一个通用时间,距1970年1月1日午夜的毫秒。c c、获取日期获取日期 .Date.g

    20、etDate(),.Date.getMonth(),.Date.getYear(),.Date.parse(),Date.getDay();d d、处理时区处理时区.toGMTString()将日期时间值转换为的字符串(GMT时间);.tolocaleString()将日期时间值转换为的字符串(当地时间)。JavaScriptJavaScript的对象的对象:MathMathq 属性:.E:为自然对数的底(约为2.718);.PI:为圆周率(约为3.14159);q 方法:.abs()绝对值计算;.pow()数的幂;.sqrt()计算平方根;.cos()、.sin()、.tan()、.acos

    21、、.asin()、.atan();JavaScriptJavaScript的屏幕对象的屏幕对象显示器screen。各种相关特征涵义参数举例说明screen.height屏幕高度screen.width屏幕宽度screen.availHeight屏幕可见高度screen.availWidth屏幕可见宽度screen.colorDepth色深8,16,32位颜色JavaScript事件模型 事件:用户对网页的一些特定“操作”(这些操作通常直接对应鼠标的动作)和系统行为。例如加载一张网页,点击一个超链等。事件处理程序的引入(如何使一段JavaScript程序和事件的发生联系起来?)。“on事件名”是

    22、JavaScript规定的对应事件处理程序柄(event handler)的名字。例如onClick、onfocus、onSubmit等等。JavaScript事件模型(续)第一种引入方式:事件处理程序柄名以属性名的形式在HTML文本中某些适当的标记中出现,而对应的属性值是由网页编写者提供的JavaScript程序段(或事件处理函数名);第二种引入方式:将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性(property)document.forms0.age.onchange=isNumber;例:让事件处理程序作为“属性值”这里,事件处理程序柄的名字是大小写不敏感的。这与HTML文本

    23、中对标记的属性名的松散要求是一致的。OnLoad在网页完全加载完后执行(即包括图像,applet等);OnUnLoad在网页退出之前执行。JavaScriptJavaScript程序的注意事项程序的注意事项最好把源码写进HTML文件头里,及之间是合适的地方。JavaScript程序要用,language这个限定参数也是必要的。再用把程序关闭。提示开始标记来关闭提示。对所编程序加必要的注释。单行或多行注释加在/*/号中间来标示;单行注释则加在/号后面。第四章 在浏览器中使用1.代表浏览器器所打开的窗口。2.通常代表目前正在使用(focus)的窗口。3.如果打开多个浏览器窗口时,可以利用别名(al

    24、ias)来区别它们,如:ex.opener,parent,self,window,top 窗口对象(Window object)窗口对象使用语法window.特性window.方法(参数群)self.特性/self代表目前window或frame名称self.方法(参数群)top.特性/top代表最顶层的窗口top.方法(参数群)parent.特性/parent代表目前框架的父框架parent.方法(参数群)窗口名称.特性窗口名称.方法(参数)特性方法(参数)closed-说明窗口是否已经关闭defaultStatus -浏览器底部预设的状态列讯息length-窗口重的框架个数Frame-窗口

    25、中的frameframes-窗口中的frame数组name-窗口的名称opener-打开该窗口的窗口名称status-浏览器底部自行设定的状态信document-窗口中的document对象history-窗口history对象location-窗口对象的对象中的location对象窗口对象的属性 alert()-显示警告讯息confirm()-显示确认讯息prompt()-显示提示讯息focus()-成为焦点blur()-移开焦点(成为背景处理)open()-打开新浏览窗口close()-开关已打开的浏览窗口eval()-执行引数运算式计算窗口对象的方法resizeBy(x,y)-将窗口尺寸

    26、向X轴及Y轴调整moveBy(x,y)-将窗口向X轴及Y轴移动scroll(x,y)-卷动至指定的座標print()-列印指定之窗口內容setTimeout()-设定一定时程序(计时器)clearTimeout()-撤销一定时程序(计时器)toString()-传回字串表示值valueOf()-传回数值表示值窗口对象的方法function grow()window.resizeBy(50,50)function shrink()window.resizeBy(-50,-50)将窗口放大与缩小范例 自动放大窗口function scrollIt()for(y=1;y=1000;y+)scroll

    27、(1,y)按鼠标左键兩下,画面自动卷动.The End.范例一 自动卷动窗口打开新窗口对象的语法窗口对象名称=Window.open(URL,新窗口名称 ,窗口的规格)1.窗口对象名称:用以使用窗口对象的特性与方法。ex.窗口对象名称.close2.窗口名称:用以识別该窗口。ex.窗口对象范例-打开与开关窗口function grow()window.resizeBy(0,150)function shrink()window.resizeBy(0,-150)广告页 here窗口对象范例-动态调整广告页大小使用 Timer 的语法1.Timer又称为计时器或延迟器,常用来指定于 特定时间后执行

    28、某程式。2.时间单位为毫秒(千分之一秒)ex.3000 milliseconds=3 seconds window.setTimeout(“欲执行的程式码或函数”,设定的时间)使用 Timer 的语法(二)如果利用循环将计时器设计成重复执行,欲终止计时器执行,请使用此一格式。因为要终止计时器的执行,必须指定欲终止 的计时器名称。计时器对象名称=window.setTimeout(“欲执行的代码或函数”,设定的时间)终止循环內 Timer 的语法终止计时器的执行,必须指定欲终止的计时器名称。window.clearTimeout(计时器对象名称)function timer()setTimeou

    29、t(alert(3秒到了!),3000)窗口对象范例-timer(1)var counter=0 setTimeout(upDate(),3000)/三秒钟后呼叫upDate()function upDate()counter+status=第+counter+次载入timer1=setTimeout(upDate(),3000)窗口对象范例-timer(2)历史对象(history object)1.history对象是用来存储客戶端访问过的URL资料。2.这些历史记录是以串列(list)的方式存储。3.各大浏览器均提供检视history工具ex.IE-检视/移至 NC-前往(go)历史对象

    30、的使用语法如下。history.特性history.方法(参数群)length-history对象中URL个数 back()-载入历史对象中上一个URLforward()-载入历史对象中下一个URLgo()-载入指定的URL历史对象的使用语法窗口对象范例-historywith(document)write(重新载入此页)write(前往SeedNet方法一)write(前往SeedNet方法二.link(http:/.tw)write(前往SeedNet方法三)前往SeedNet方法四窗口对象范例-location(1)前往SeedNet方法五前往SeedNet方法六前往SeedNet方法七

    31、窗口对象范例-location(2)Document 对象1.代表目前的文件信息。2.直接对应至HTML的Body标签。文档对象(Document object)document.特性document.方法(参数群)bgColor-相当于 HTML 的 BGCOLORalinkColor-相当于 HTML 的 ALINK linkColor-相当于 HTML 的 LINK vlinkColor-相当于 HTML 的 VLINKfgColor-相当于 HTML 的 TEXTtitle-相当于 HTML 的 lastModified-最近更新日期URL-文件的 URL文档对象的使用语法Docume

    32、ntAnchorAppletAreaImageFormLink文档对象的对象阶层图document.write(本页最后更新日期:)document.write(document.lastModified)文档对象范例 最近更新时间Form 对象1.用于定义表单,提供使用者输入资料。2.包含许多控制类型。3.直接对应至HTML的表单元件。表单对象(Form object)FormButton CheckboxFileUploadHiddenPasswordRadioResetSelectSubmitTextTextarea表单对象的对象阶层图表单名称.特性表单名称.方法(参数群)forms索引

    33、值.特性forms索引值.方法(参数群)表单对象的使用语法action-ACTION属性设定值elements-以陣列代表表单內所有元件encoding-使用POST传送时之编码方式length-表单內元件个数method-指定传送方式(POST/GET)target-将执行结果于特定窗口內执行表单对象的特性表单对象可使用的方法如下。reset()-模拟按下 reset 按钮的动作submit()-模拟按下 submit 按钮的动作toString()-传回字串表示值表单对象的方法 显示一个可供输入的域。可使用的事件处理程序:onBlur,onChange,onFocusonKeyDown,o

    34、nKeyUponMouseDown,onMouseUp本文对象(Text object)type=text/类型为本文 name=tel/Text名称 value=03-4257387/初始值 size=20/Text大小 title=提示值/提示值 AccessKey=L/快捷键值 maxlength=10/可输入资料长度 readonly/指定成为只读属性本文对象相关参数文本对象的对象特性defaultValue-该元件预设值type-该元件类型name-该元件识別名称value-该元件目前输入值该元件目前输入值1.显示一个可供选择(单选)的按钮。2.ON 表示确认OFF 表示不确认。可使

    35、用的事件处理程序:onBlur,onClick,onFocusonKeyDown,onKeyUponMouseDown,onMouseUp圆钮对象(Radio object)type=radio/类型为圆钮 name=sex/名称为sex value=boy/传送值为boy checked/设定为预设选项圆钮对象相关参数Input type=radio name=sex value=boy checked圆钮对象的对象特性checked-判断是否已經核取defaultChecked-该元件预设为核取与否type-该元件类型name-该元件识別名称value-该元件目前输入值性別:男生女生fun

    36、ction SEX()if(document.form1.elements0.checked)sex=男生elsesex=女生alert(性別是:+sex)表单对象范例-radio1.显示一个可供选择的复选框。2.ON 表示确认OFF 表示不确认。可使用的事件处理程序:onBlur,onClick,onFocusonKeyDown,onKeyUponMouseDown,onMouseUp确认方块对象(Checkbox object)type=checkbox/类型为确认方块 name=hobby/名称 value=music/传送值 checked/设定为预设选项确认方块对象相关参数Input

    37、 type=checked name=hobby value=music1.显示一个可供输入密码的输入框。2.利用*隐藏所输入的资料。可使用的事件处理程序:onBlur,onChange,onFocusonKeyDown,onKeyUponMouseDown,onMouseUp密码对象(password object)type=password/类型为密码 name=password/名称 value=1234/初始值 size=20/大小 maxlength=10/可输入资料长度密码对象相关参数Input type=password name=pw输入密码:重新输入:function che

    38、ckPw()if(document.form1.pw1.value!=document.form1.pw2.value)alert(兩組密码不符,请重新输入)else alert(OK!)表单对象范例-password(1)密码对象的对象特性defaultValue-该元件预设值type-该元件类型name-该元件识別名称value-该元件目前输入值function checkPwLgh(index,str)if(str.length!=9)alert(你只输入+str.length+位数n请输入9位数密码)document.form1.elementsindex.value=document

    39、.form1.elementsindex.focus()function checkRetype()if(document.form1.pw.value!=document.form1.retypePw.value)alert(兩組密码不符,请重新输入)document.form1.retypePw.value=document.form1.retypePw.focus()else alert(密码检查作業完成!)表单对象范例-password(2)输入密码:重新输入:表单对象范例-password(2)提供一个隐藏域,用以储存 特殊资料值,以供运算或参考。隐藏对象(hidden object

    40、)type=hidden/类型为隐藏 name=dummy/对象名称 value=1234/元件初始值 隐藏对象相关参数Input type=hidden name=dummy value=1234 提供一組选单,供使用者选择。可使用的事件处理程序:onBlur,onChange,onFocusonClick,onDblClick选择对象(select object)name=week/名称 size=3/下拉框大小 multiple/设定为可多选 option/定义选择的內容 selected/预选项目 value/定义传送值选择对象相关参数SundayMondayTuesdayWednes

    41、dayThursdayFridaySaturday表单对象范例-select(1)选择对象的对象特性type-该元件类型name-该元件识別名称value-该元件目前输入值selectedIndex-选项的索引值length-选项个数options-选项数组url=new Array(2)url0=http:/.twurl1=http:/function jumpPage(form)i=form.menu.selectedIndex;if(i0)window.location.href=urli-1-选择ISP-SeednetHinet表单对象范例-select(2)function crea

    42、teOptions()var option=new Option(document.form1.select1.value)document.form1.select2.options2=option可选择项目-香蕉芭樂蘋果梨子 下页续 表单对象范例 动态选单接上页 onClick=createOptions()选择项目-表单对象范例 动态选单练习 设计一交换式选单:1.所选取的项目应可列在右方。(按按钮或鼠标点清单项目两下)2.加入右方选单后将左方选项清除。3.设计一个刪除钮可将选项刪除。提供一个按钮,供触发事件之用。可使用的事件处理程序:onBlur,onClick,onFocus按钮对象

    43、(button object)type=button/类型为按钮 name=button1/按钮名称 value=请按我/按钮面显示值 title=送至服务器/提示值 tabindex=0/定位顺序 disabled/使失效按钮对象相关属性按钮对象的对象特性type-该元件类型name-该元件识別名称value-该按钮面显示值disabled-该元件生效否动态设定按钮的显示字樣:请输入:表单对象范例-button表单对象范例-button 用以将表格內资料送至服务器之用。可使用的事件处理程序:onBlur,onClick,onFocus另外可在Form标签內搭配使用onSubmit提交对象(s

    44、ubmit object)type=submit/类型为呈送钮 name=submit1/按钮名称 value=提交 /提交钮表面显示值 提交对象相关参数Input type=submit name=submit1 value=送出提交对象的对象特性type-该元件类型Name-该元件识別名称value-该按钮面显示值function isReady()if(document.form1.text1.value.length=9)return trueelsealert(请输入9位数密码);return false表单对象范例-submit1.双引号不能省略2.当onSubmit=true 时

    45、才提交到器function isReady(form)if(form.text1.value.length=9)return trueelsealert(请输入9位数密码)form.text1.focus()/将焦点移回 text return false表单对象范例-submit 用以将表格內资料还原为预设值,即重新输入之意。可使用的事件处理程序:onBlur,onClick,onFocus另外可在Form标签內搭配使用onReset重置对象(reset object)type=reset/类型为重置钮 name=reset1/按钮名称 value=重新输入/重置钮表面显示值 重置对象相关参

    46、数Input type=reset name=reset1 value=重新输入重置对象的对象特性type-该元件类型name-该元件识別名称value-该按钮面显示值表单对象范例-reset 提供一个多列的本文域。可使用的事件处理程序:onBlur,onChange,onFocus本文区域对象(textarea object)name=textarea1/按钮名称 rows=8/列数 cols=30/行数(字元数)readonly/定义为只读属性本文区域对象相关参数Input type=reset name=reset1 value=重新输入本文区域对象的对象特性type-该元件类型name-该元件识別名称value-本文区域的內容defaultValue-本文区域的预设內容意见留言版.表单对象范例-textarea 提供一个本文域与档案浏览按钮。可使用的事件处理程序:onBlur,onChange,onFocus档案对象(file/fileUpload object)type=file/型态为档案对象 name=file1/对象名称档案对象相关参数Input type=file name=file1档案对象的对象特性type-该元件类型name-该元件识別名称value-该元件內容值表单对象范例-file

    展开阅读全文
    提示  163文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    关于本文
    本文标题:WEB平台开发培训-js课件.ppt
    链接地址:https://www.163wenku.com/p-4027293.html

    Copyright@ 2017-2037 Www.163WenKu.Com  网站版权所有  |  资源地图   
    IPC备案号:蜀ICP备2021032737号  | 川公网安备 51099002000191号


    侵权投诉QQ:3464097650  资料上传QQ:3464097650
       


    【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。

    163文库