




已阅读5页,还剩53页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第六讲 JavaScript 语言,参考书: Danny Goodman,作业四:用JavaScript完成一个计算器,用户只需用鼠标即可操作你的计算器 尽可能使计算器功能完整,主要内容,背景 几个简单例子 语言基本要素 JavaScript的对象模型 JavaScript的事件模型,背景,JavaScript - 使网页“可执行”的又一种手段 网页内容从信息到程序, 具有革命性的意义. Netscape的技术 (1995, after Java, 原来称为LiveScript), 与Java没有什么直接关系 所带来的好处 分担服务器的部分工作 减轻对网络的压力 改善与用户交互作用的质量,理解JavaScript,JavaScript是一种脚本语言 JavaScript是基于对象的语言 JavaScript是事件驱动的语言 JavaScript是安全的语言 JavaScript是平台无关的语言 JavaScript是廉价的(不需任何附加的软件),JavaScript与其他语言比较,JavaScript不是Java JavaScript与VBScript JavaScript与Perl,JavaScript与Java的比较,Aspects Java JavaScript owner Sun Microsystems Netscape natural of the language Object oriented Object based execution mechanism compiled/interpreted interpreted networking capability strong little graphics capability strong little interaction with HTML weak strong best for dynamic web pages interactive but plain webpages,基本工作方式,源程序直接嵌入HTML文档中 外部程序结合到HTML文档中 浏览器解释执行,客户端和服务器端的JavaScript,有公共的语言核心机制 -比如变量控制结构,数据类型等 语言对象模型上不一致 -客户端Script关心文档中的对象 -服务器端的Script关心管理用户和服务器连接的对象,主要能力,控制文档的内容和表现 控制浏览器的行为 和文档的内容相互作用 和用户交互 在客户方读写cookie 对图像进行操作,无能为力之处,图形 (对比Java有很强的图形能力) 读写客户方文件 (和Java applet一样) 网络 (对比Java applet可以和发出它的服务器连接), 除了可以引起浏览器去读一个URL外. 多线程 (Java支持多线程),典型例子-1: 文档内容和表现, document.write(“); document.write(“Hello, Web !“); document.write(“); How are you today ? ,典型例子-2: 浏览器行为, window.status = “Internetics = I + S + S“ See status bar ,典型例子-3: 和内容的作用, function compute(form) if (confirm(“Are you sure?“) form.result.value = eval(form.expr.value) else alert (“Please input again“) Enter an expression: Result: ,典型例子-4: 和用户的交互, function checkNum(str,min,max) if (str=“) alert(“Enter a number in the field, please.“) return false for (var i=0; i “9“) alert(“Try a number , please.“) return false var val=parseInt(str, 10); if (val max) alert(“Try a number from 1 to 10.“); return false return true function thanks() alert(“Thank you for your input.“) Enter a small number : ,典型例子-5-1: 建立cookie, temp = “test=internet“; expiration = new Date(new Date().getTime()+3600000); temp += ;expires=+expiration.toGMTString(); document.cookie = temp; A cookie has been set ,典型例子-5-2: 收回cookie, temp = document.cookie; document.write(temp) A cookie has been retrieved magically ! ,典型例子-6: 摆弄图像, function replace() document.replaced.src = “wcc.gif” ,JavaScript语言基本要素(1),数据类型 变量与表达式 数据类型转换 表达式与操作符,数据类型,String “hello” hello n(换行) t(tab) Number 4.5 Boolen true false NULL null Object Function,变量与表达式,创建变量 var anumber = 137; / 变量的值是一个数 var anumber1=2; var astring = “1”; / 变量的值也可以是一个字符串 var astring1=“hello”; 变量名 以字母开头,不能有空格 组合命名,myAge 表达式 xx= astring1+astring /结果是x=“hello1” xx=anumber+anumber1 /结果是xx=139 xx=anumber+astring /结果是xx=“1371”,数据类型转换,转换字符串为数值 ParseInt(“42”,10) = 42 ParseFloat(“42.33”,10) = 42 (截断小数,四舍五入) 转换数值为字符串 最简单的方法是空串与数值字符相加 “”+2500=“2500”,表达式与操作符,JavaScript 表达式和基本操作符类似于C, PERL,和 Java 赋值操作符有=, +=, -=, *=, /=, %=, =, =, / x 加 1 ,并把结果送给 y,表达式与操作符 ( contd),位逻辑运算符 x + y 为 “Hello World!“,语言基本要素(2),没有else if. if( condition ) . else . for 和 while. for( 初始化表达式; 条件; 增值表达式) 执行语句; . while(条件) 条件为真执行.; break 可以用在 for 或 while 循环中,使循环中断,跳到for或while循 环结束的位置。 continue 用在 for 或 while 循环可以跳过循环体中剩余的语句,直接 进行循环的下一次迭代. 全局变量和局部变量,对象模型,JavaScript被称为是“基于对象的” (而不是面向对象的) 有对象的概念: 数据和操作的封装, 但没有继承的概念 从定义的角度看, JavaScript程序中有两种对象 JavaScript提供的内置对象 (built-in object) 程序中定义的对象 一个对象是一个由变量、其他对象或方法组成的一个集合. 在一个对象中包含的其他对象和变量被称为特性 (property) 在一个对象内的函数(function)称为这个对象的方法( method) 在一个特定的对象中的一些特性的序列称为数组, 例如document对象中的image. 多维数组是由含有数组特性的对象数组构造的.,JavaScript 的内置对象,文档对象,HTML文档及其显示环境相联的对象, 例如window, document 核心语言对象(全局对象) 字符串对象(String) 数学对象(Math) 日期对象(Date) 数组对象(Array),对应于HTML文档及其相关环境的对象-文档对象,浏览器将这些系统对象组织成一个层次结构. Window, 对应于一个显示文档的窗口, 这个层次结构的根 location, Window对象的一个属性, 对应于当前URL. history, 又一个属性, 对应于用户曾经访问过的URL. document, 又一个属性, 对应所加载的文档. .,JavaScript的文档对象模型,JavaScript的文档对象模型(contd),注意:前面的文档对象模型只是牵制层次关系,不是继承层次关系。没有对象继承一个高于系列之上的对象属性或方法。 不存在任何方向上对象到对象的自动消息传递,通过文档或表单对象发送消息给它,所有对象引用一定是清楚的。,对象引用,当一个文档加载到浏览器后,它所有的对象都按照浏览器的文档对象所规定的严格层次结构存放到内存。 要有一种方法让Script指出它要的是哪一个对象,这就是对象引用。 JavaScript用严格的层次结构引导Script至文档的任何区域,对每个对象的引用必须包括从顶部到对象的所有层次,直至对象名,路径中各个相连的对象之间用句点分开。,对象引用(contd),变量可以写成下面的形式: 父对象.特性1索引1.特性2最后特性索引N 对象的方法(method)可以如此引用: 对象 .特性.方法(参数组) 一个含有典型特性和方法的对象的例子 document 是对应一个 .html文档的对象, 浏览器读进文档后生成. document.writeln 是这个对象的一个方法,输出带换行的字符串 document.location 是该对象的一个特性,含有它的URL,Window对象: 从浏览器程序的角度来看它,class Window 浏览器执行起来后就创建这样一个对象 Location location; String defaultStatus; History history; void alert(String); String prompt(String); Window window; 指向自己 Window self; 指向自己 Document document; Window open(String, String); void close(Window); . 网页中的JavaScript就是在这个对象的环境中执行的, 可以引用这个对象的变量, 调用函数等 . 上述只是Window对象的20个属性,10个方法和5个事件处理过程的一部分,Window对象: 从浏览器程序的角度来看它,alert() 和 window.alert()是等价的 var newwin = open(“someURL”, “MyNewWindow”) 将打开一个新浏览器窗口,并将一个指定的内容读进新窗口. 在原始窗口中然后可用newwin来操作新的窗口. 在新的窗口中, JavaScript可用opener来和原始窗口交流. 只能close自己打开的窗口 ! (不是每个浏览器都这样smart !),举例:,Open another window with JavaScript x = open(“newwin.html“,“NewWin“) x.defaultStatus = “Hello, new fellow ! This is from your creator.“ This is a text in original window,Open another window with JavaScript opener.defaultStatus = “Hello, my creator !“ alert(“The window is to beclosed“); close(self); This is a text in new window,用户对象的定义,JavaScript定义“类”, “函数”的语法是一样的, 而且这样的函数就成了该类的构造函数 ! 用户用函数定义来定义类, 然后用new语句创建该类的一个实例 function add() this.result = this.left + this.right; function MyClass(n) this.left = n; this.right = 6; this.result = 0; this.sum = add; x = new MyClass(4); x.sum(); document.write(x.result); ,with 语句: 程序的简便写法,使得引用方法时可以省略相关对象的名字 例如我们常写document.write(.) 我们也可以写成 with (document) write(.) 如果语句很多, 显然就有意义了.,对象与数组,JavaScript将对象也看成是一个数组. 如果x是一对象, 那么x0, x1, 分别指它的第一, 第二个成员等等. 这个特性反过来可以用于定义语义上类似于数组的对象: function MakeArray(size) this.length = size; for( var i=1; i=size; i+ ) thisi = 0; ,对象与数组 (contd),var maxNumObj = 10; objs = new MakeArray(maxNumObj); for( var n=1; n = maxNumObj; n+) objsn = new SomeClass(n); / 设objs 的元素为某类对象 perty就指objs数组的第I个元素的某种特性 如果将MakeArray这样的函数用于另外的函数中, 我们就可以得到多维数组的效果.,对象与数组 (contd),JavaScript提供了一个Array对象,用来创建数组 teachers = new Array(3) teachers0=“Li” teachers1=“Sun” teachers1=“wang” teachers = new Array(“Li”, “Sun”, “wang”),JavaScript的Math 对象,该对象不可创建,该对象是自动存在的 访问对象的方法 Mperty|method(parameter.parameter),JavaScript的Math 对象(contd),Math 有一套特性(内部常数) 包括 E, LN10, LN2, PI, SQRT1_2, SQRT2, 所以有Math.PI = 3.14159 等. Math方法包括 Math.random() 返回 0 到 1 之间的伪随机数 Math.abs(x) 返回 x 的绝对值 Math.max(x1,x2) 返回数值 x1 和 x2 中的最大值 Math.cos(x) 返回弧度为 x 的角的 cosine 值 Math.round(x) 按照离 x 最近的正整数或负整数取整,JavaScript的Date 对象,创建一个日期对象: var dateObjectName = new Date(parameters) 访问对象的方法 dateObjectName. method(),JavaScript的Date 对象(contd),Date 对象能力强大, 包括 21个方法 today = new Date(); / 设置 today 为当前日期和时间 asiwrite = new Date(“February 26, 1996 15:13:00“); / 按说明的日期和时间设置 asiwrite 注意, Java 和 JavaScript 在内部都是以从1970年1月1日 00:00:00开始累计毫秒数来记录时间的. 类似于 Java, Date.UTC(用一串数字表示日期) 和 Date.parse(用文本串表示日期) 是 “class 或 static“ 方法 还有象 getMonth 这样的方法可以从一个日期中抽出月份, 等等.,JavaScript的String对象,创建一个字符串对象: var myString = new String(“characters”) 访问对象的方法 perty|method,JavaScript的String对象(contd),任意字符串或含有字符串的变量都是string对象 length成员记录了字符串的长度(字符数) 串中的字符从左向右以 0 到 actualstring.length-1索引 newstring = astring.substring(index1,index2); / 返回一个位置在 index1 . index2-1的字符串 特别是如果 index2 index1, 子串返回 index2 . index1-1部分 !,事件模型,事件: 用户对网页的一些特定“操作”(这些操作通常直接对应鼠标的动作)和系统行为。 例如加载一张网页,点击一个超链,等。 事件处理程序的引入(如何使一段JavaScript程序和事件的发生联系起来?) 一些例子,Navigator4的事件模型,元素对象 事件 window Blur, Focus, Load, Unload, DragDrop, Move, Resize Layer Blur, Focus, Load, MouseOut, MouseOver onMouseup link Click , MouseOver, MouseOut, DbClick, MouseDown, MouseUp area MouseOut, MouseOver, Click image Abort, Error, Load form Submit, Reset,Navigator4的事件模型(contd),元素对象 事件 text, textarea Blur, KeyDown password Change, Focus, Select, KeyPress, KeyUp all buttons Click, MouseDown, MouseUp select Blur, Change, Focus fileUpload Blur, Focus, Select,事件处理程序的引入,“on事件名”是JavaScript规定的对应事件处理程序柄(event handler)的名字。例如onClick, onfocus, onSubmit, 等等. 第一种引入方式:事件处理程序柄名以属性名的形式在HTML文本中某些适当的标记中出现, 而对应的属性值是由网页编写者提供的JavaScript程序段(或事件处理函数名) 第二种引入方式:将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性(property) document.forms0.age.onchange=isNumber,例子: 让事件处理程序作为“属性值”, 这里,事件处理程序柄的名字是“case insensitive”。这与HTML文本中对标记的属性名的松散要求是一致的。 注意引号的用法 OnLoad在网页完全加载完后执行(即包括图像,applet等) OnUnLoad在网页退出之前执行,例子: (see demo event-1), some text 如果return false给onClick, 则浏览器不访问HREF指定的网址 status是暂时量, 只是在事件发生时有效; defaultStatus是缺省量, 在没有其它事件发生时也有效.,例子: 定时事件的应用,目标是编写一网页,使得当用户关注到含有该网页的浏览器窗口时,其状态区域显示一串动画文字,而当注意力移开后停止显示。 与定时事件有关的Window对象方法的应用 timer_id = setTimeout(“函数名”,毫秒数), 在指定时间过后执行该函数. Timer_id在此作为一个定时器的标识. clearTimeout(timer_id), 取消一个定时器, 意味着不再执行和它相关的计时操作., var text = “Welcome to PACT group at Peking University!“; var
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025版光伏发电项目施工合同小型工程本文本
- 2025版动漫衍生品授权销售合同汇编
- 2025翻译公司知识产权保护保密协议
- 2025版无人机监控设备采购安装合同
- 二零二五年屋顶雨棚安装工程环保验收合同
- 二零二五年度挖掘机采购合同及维修配件供应范本
- 二零二五版旅游客车租赁与旅游文化交流协议
- 2025版绿色交通保障返租回报资金担保合同
- 2025版企业内退员工再就业培训及就业服务合同
- 2025版投影机采购及配套软件服务合同
- 第五章 第二节 罪犯的权利
- 光伏发电技术项目投标书(技术标)
- (正式版)HGT 6276-2024 双酚F型环氧树脂
- 教育的智慧从哪里来读书分享课件
- 承诺协议书模板
- 公务用车安全教育培训
- 销售人员心态培训销售心态培训
- 志愿服务与志愿者精神知识考试题库大全(含答案)
- 养老机构入住护理、风险评估表、计划表、记录、告知书等健康档案护理记录模板
- 科技成果鉴定证书格式模板
- 人教版小学数学2年级下册课时练无答案+单元测试题+期中期末检测卷(含答案)
评论
0/150
提交评论