• 1. 第三章 客户端编程10/21/20181
  • 2. 本节课的内容:什么是脚本语言 JavaScript概述 JavaScript嵌套HTML的方式 JavaScript基本语法 事件触发和处理 对象的基础知识 JavaScript的对象模型 window 对象 document 对象 form 对象10/21/20182
  • 3. 1、什么是脚本语言脚本语言源于UNIX操作系统 应用于web页面的脚本语言有javaScript、VBScript和用于编写CGI脚本的perl、shellScript等 根据脚本程序执行的地点不同分为服务器端脚本和客户端脚本,javaScript、VBScript既可以作为客户端脚本语言,又可作为服务器端脚本语言。10/21/20183
  • 4. 2、JavaScript 概述 HTML仅仅是一种标记语言,它能作的事情有限。 用HTML建立的文档是静态的。不能处理客户端的活动。 Scripting 使Web页变成动态的。 目前比较流行的脚本语言是JavaScript、Perl、VBScript。10/21/20184
  • 5. JavaScript是一种潜入在HTML文件中的脚本语言,由Netscape公司在1995年的Netscape2.0中推出,最初称为Mocha,后来又改为LiveScript,95年Java语言出现后,引进java的有关概念,又改为JavaScript JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷,可以开发客户端的应用程序。10/21/20185
  • 6. JavaScript 的特性: JavaScript脚本是由一系列的程序指令语句组成。 是事件驱动的,用户在网页上的某个动作就是一个事件,由嵌入网页中的脚本对这个事件作出响应。 是平台独立的,不论什么机器只要装有支持JavaScript的浏览器就可以正常运行 不涉及耗时的编译, 没有复杂的语法和规则集合 是基于对象而不是面向对象的,本身已经有创建好的对象,是不完全的面向对象,不支持分类、继承、封装等特性 支持诸如:switch..case、If…else、while 、 for、 do while等之类的构造 安全性、动态性,区分大小写,使用分号组合语句10/21/20186
  • 7. JavaScript 和 Java JavaScript 是由客户机进行解释的, 而 Java 在服务器上进行编译. JavaScript 是解释性语言, 而 Java 代码是在执行前先被编译。 不象Java, JavaScript.不需要声明变量的数据类型 不象Java, JavaScript 能够存取浏览器对象和功能 JavaScript 多数用于客户端的活动,有有限的对象、方法、属性和数据类型是不可扩展的。这与Java 的类和方法是不同的。10/21/20187
  • 8. 两种语言间的异同作如下比较: 基于对象和面向对象 解释和编译 强类型和弱类型 代码格式不一样 嵌入方式不一样 语句标签对内 JavaScript 代码可以放在HTML文件中的任何位置 10/21/201812
  • 13. 页标题 HTML文本 HTML文本 10/21/201813
  • 14. 3.2 JavaScript 源文件可以一个外部文件包括脚本 假如: 代码比较复杂 计划经常修改该代码 计划在多个页面中使用使用相同的代码 这是有用的 文件的扩展名为 .js 外部文件的引用(两个属性) 10/21/201814
  • 15. JavaScript大小写敏感,若要几行代码写在一行中各语句间以分号分隔,习惯上在每一个语句之后以分号结束,但不是必须。 在JavaScript中四种基本的数据类型:数值(整数和实数)、字符串型(用“”号或‘’括起来的字符或数值)、布尔型(使True或False表示)和空值4、JavaScript语法10/21/201815
  • 16. 在JavaScript的基本类型中的数据可以是常量,也可以变量。 10/21/201816
  • 17. 常量 整型常量 实型常量 布尔值 字符型常量 空值 特殊字符 10/21/201817
  • 18. 变量的定义 变量的主要作用是存取数据、提供存放信息的容器。 变量的命名 变量以字母开头,中间可以出现数字除下划线作为连字符外,变量名称不能有空格、加号、减号、逗号或其它符号。 不能使用JavaScript中的关键字作为变量。10/21/201818
  • 19. 变量的类型 如同其它编程语言,JavaScript允许你声明变量并使用存储在它们中的值,不过不需要去专门声明变量的数据类型。(P25) 由于JavaScript采用弱类型的形式,因而一个数据的变量或常量不必首先作声明,而是在使用或赋值时确定其数据的类型的。 JavaScript可以自动确定存储在变量中的数据类型。10/21/201819
  • 20. JavaScript用关键字var声明变量或直接使用赋值的形式声明变量。 Var str; Num1=20 Num2=3.0e1010/21/201820
  • 21. 声明变量通过关键字var,如下: var var1,var2; 在声明同时赋值给它,如: var var1=10; var var2=“hello”; var var3=true; 变量的长度可由length函数获得,如: var len=var2.length;10/21/201821
  • 22. 赋值运算符:= += -= *= /= %= 算术运算符: + - * / ++ % -– – 字符串运算符:+ 如:“abcd”+”efg” 逻辑运算符和关系运算符 ==, !=, < , > , ! , && , || 位运算 条件运算符 ? 比如: var a=true;b=false; a ? value1: value2 // 结果为value110/21/201822
  • 23. 在定义完变量后,就可以对它们进行赋值、改变、计算等一系列操作,这一过程通常由表达式来完成,可以说它是变量、常量、布尔及运算符的集合。 表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。10/21/201823
  • 24. 语法格式如下 函数的编写10/21/201824
  • 25. 函数由关键字function定义。 参数表,是传递给函数使用或操作的值,其值可以是常量 ,变量或其它表达式。 在JavaScript中可通过arguments.length来检查参数的个数。 调用方式: 函数名(实参) 函数名对大小写是敏感的。10/21/201825
  • 26. 当函数没有返回值时,可以使用return语句不带参数的形式。 当函数有返回值时,需要使用return语句,格式: return 表达式 例如3-1 注意:函数定义位置和函数参数10/21/201826
  • 27. 函数简例

    10/21/201827
  • 28. 变量的作用域 局部变量:变量可在声明它的函数中被访问, 全局变量:变量在函数体以外被声明,则可以在整个页面被访问到。 在函数内用var声明的变量是局部变量而在函数外用var声明的变量是全局变量 在函数内未用var声明的变量是全局变量,当函数内用var声明的变量和全局变量同名,他们就像两个不同名的变量。 例3-2变量作用域示例 10/21/201828
  • 29. 变量作用域示例 10/21/201829
  • 30.

    10/21/201830
  • 31. 程序控制结构在任何一种语言中,程序控制是必须的,它能使得整个程序顺利的按程序设计者希望的方式和顺序执行。 下面是JavaScript常用的程序控制结构及语句,因为缺省情况下,程序是按照语句的顺序来依次执行的,所以顺序结构就是通过语句的顺序实现的。 其他两种结构,分别是: 分支结构 循环结构10/21/201831
  • 32. 分支结构 if(表述式){ 语句段1; }else{ 语句段2; } 若表达式为true,则执行语句段1;否则执行语句段2。 10/21/201832
  • 33. 嵌套结构 if (condstmt1) { statement1 } else if (condstmt2) { statement2 } else if (condstmt3) { statement3 } else { statement4 }10/21/201833
  • 34. Switch(变量名){ Case 值1: 语句段1 Case 值2: 语句段2 …… default: 语句段n } Switch分支语句用来实现多支判断,根据变量名指定的变量的变量值和case语句后面的值是否相等来决定是否执行后面的语句,如果都不相等,则执行default后面的语句。10/21/201834
  • 35. 循环流程 for(初始化;条件;更新) { statement } 例3-3 使用for循环语句计算10!10/21/201835
  • 36. 10/21/201836
  • 37. While(条件) { 语句 } 比如: n=0; x=0; while(n<3) { n++; x++; }10/21/201837
  • 38. break语句 结束当前的while,for 以及do while 循环的执行,并把程序的控制交给下一条语句。 continue语句 结束当前while,for以及do while循环,并开始下一轮循环。10/21/201838
  • 39. 基本概念 JavaScript是基于对象的语言。而基于对象的基本特征,就是采用事件驱动(event-driven)。通常鼠标或热键的动作我们称之为事件,而由鼠标或热键引发的一连串程序的动作,称之为事件驱动。而对事件进行处理的程序或函数,我们称之为事件处理程序5、事件触发和处理10/21/201839
  • 40. 事件处理程序 在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样,可以将前面所介绍的所有函数作为事件处理程序。 10/21/201840
  • 41. 事件驱动 单击事件 onclick 改变事件 onchange 选中事件 onselect 获得焦点事件 onfocus 失去焦点 onblur 载入文件 onload 卸载文件 onunload 鼠标左键按下 onmousedown 鼠标左键抬起 onmouseup 获取鼠标 onmouseover 失去鼠标 onmouseout10/21/201841
  • 42. 事件是为动作响应时出现的通知。此通知的处理代码称为事件处理程序。 在javascript中可以为指定对象的各种事件设置相对应的事件处理程序。 如: 按钮的onClick,onLoad,onunload,onMouseOver,onMouseOut 下拉框的onChange, onClick10/21/201842
  • 43. 设置事件的方法,在指定对象的代码中加入类似属性 <….. onclick=“func1()” ….> 例3-410/21/201843
  • 44. 事件触发和事件处理 10/21/201844
  • 45.
    软件设计
    10/21/201845
  • 46. 6 对象的基础知识在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。语法:For(对象属性名 in 已知对象名){ 循环体 }说明:该语句的功能是用于对已知对象的所有属性进行操作的控制循环。10/21/201846
  • 47. 语法:With(对象名){ 循环体 } 说明:使用该语句的意思是:在该语句体内,任何对变量的引用被认为是这个对象的属性。10/21/201847
  • 48. this关键字 this是对当前的引用,在JavaScript由于对象的引用是多层次,多方位的,往往一个对象的引用又需要对另一个对象的引用,而另一个对象有可能又要引用另一个对象,这样有可能造成混乱,为此JavaScript提供了一个用于将对象指定当前对象的语句this。 10/21/201848
  • 49. 对象属性的引用可由下列三种方式之一实现: 使用点运算符 通过对象的下标实现引用 通过字符串的形式实现 例程 P3210/21/201849
  • 50. 对象下标:语法:Object[num]说明:其中Object是对象名称,num是属性在这个对象中是第几个属性的索引。10/21/201850
  • 51. 字符串的形式 : 语法:Object[“属性名称”]说明:其中Object是对象名称,num是属性在这个对象中是第几个属性的索引。10/21/201851
  • 52. 常用对象的属性和方法JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要自己用脚本编写程序来实现这些功能。这正是基于对象编程的真正目的。 在JavaScript提供了string(字符串)、math(数值计算)和date(日期)三种对象和其它一些相关的方法 。 10/21/201852
  • 53. 常用内部对象 串对象 该对象只有一个属性,即length。string对象的方法共有19个,主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。 例程 P33、34 10/21/201853
  • 54. 算术函数的Math对象 Math中提供了6个属性,它们是数学中经常用到的常数E、以10为底的自然对数LN10、以2为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1_2,2的平方根为SQRT2。 主要方法有:绝对值:abs()、正弦余弦值:sin(),cos()、反正弦反余弦 :asin(), acos()、正切反正切:tan(),atan()、四舍五入:round()、平方根:sqrt()、基于几方次的值:Pow(base,exponent)。 直接使用Math对象,不必用new创建一个对象10/21/201854
  • 55. 日期及时间对象 Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。 使用date之前先要用new创建一个对象 10/21/201855
  • 56. 数组对象 数组对象Array是一个对象的集合,其内可以放置不同类型的对象,数组的每一个成员对象都有一个下标,用来标明数组中的位置,下标从0开始 10/21/201856
  • 57. 数组的定义 Var 数组名=new Array() Var 数组名=new Array(元素个数) Var 数组名=new Array(元素1,元素2…) 例程 P36 Array.html10/21/201857
  • 58. 例3-5:创建一个登录页面,它接收客户的帐户ID和口令,如果客户留下任何字段空白,在点击Submit按钮后,应显示一条信息。10/21/201858
  • 59. 接收数据的用户界面10/21/201859
  • 60. 获得输入框的值用属性value,如:txtAccountID.value 事件:代表一个动作的产生。如单击鼠标按钮、双击鼠标、文字的改变等等。 当一个事件发生时,系统所做的操作是调用一个函数来完成处理。如: onClick、 onChange 等。10/21/201860
  • 61. 创建用户界面 Earnest Bank

    Earnest Bank


    Banking Online


    Login information: 10/21/201861
  • 62.
    Account ID
    Password 10/21/201862
  • 63. prompt( ) 语法: prompt(”提示信息“ ); 功能:请求用户在对话框中的文本字段中进行输入,并将其用户输入的结果返回。 alert( ) 语法: alert (”用户信息“ ); 功能:供用户通信的简单方法,用OK按钮在对话框中显示消息。 10/21/201863
  • 64. function checkValues() { var AccountID; var AccountIDLength; var passw; var passLength; AccountID=txtAccountID.value; AccountIDLength=AccountID.length; assw=pass.value; passLength=passw.length; if ((AccountIDLength==0)||(passLength==0)) { alert(“你必须同时输入登录名和口令字”); } }10/21/201864
  • 65. 【例3-6】 数字钟的设计 数字钟
      当前时间是:
    10/21/201866
  • 67. 例3-7、开发Web 站点,当用户访问该站点时能显示向他们致敬的个性化信息。当用户退出时应显示告别的信息。当用户访问该站点时,此站点应接收用户的名。10/21/201867
  • 68. 识别要使用的事件处理程序onLoad onUnLoad 例: 识别显示消息的方法Prompt() 接收用户的名 alert() 显示信息10/21/201868
  • 69. 代码:var visitor_name = ""; function greet_visitor() { visitor_name=prompt("请输入你的名字:", ''); alert("欢迎 " + visitor_name + "光临 !"); } function farewell_visitor() { alert("感谢 " + visitor_name + " 访问我们网页!"); }10/21/201869
  • 70. 7、JavaScript 的对象模型10/21/201870
  • 71. navigatorwindowArray(3.0)DateMathStringhistorydocumentlocationframelinkformanchorImage(3.0)resetradiobuttoncheckboxhiddenpasswordtexttextareaselectsubmit10/21/201871
  • 72. JavaScript是基于对象的脚本编程语言,那么它的输入输出就是通过对象来完成的。其中有关输入可通过窗口(window)对象来完成,而输出可通过文档(document)对象的方法来实现。 8、window 对象10/21/201872
  • 73. window对象是JavaScript 对象层次的最高层的对象,可以在脚本程序中隐式的引用window 对象。即输出时不用Window.document.Write()每当打开浏览器窗口都有一个相关的window 对象,每个window 对象都与特定的WEB网页相关,而这个网页的结构都反映在window 对象的Document对象中,每个window 都与URL页相关,而这个URL反映在window 对象的Location对象中,每个window 对象都有一个显示在这个窗口前的历史信息,这些信息存储在window 对象的History对象中.10/21/201873
  • 74. 属性描述 defaultStatus包含缺省的状态拦文本的串值Frames记录窗口中框架个数的数组对象,由此定位框架Length表示父窗口框架个数Name包含的名称Parent包含父窗口的名称Self 包含当前的窗口名,另一方法使用上边描述的名Status表示状态栏文本信息Top包含顶层的窗口名Window选用自身或名window 对象相关属性10/21/201874
  • 75. 方法用途Alert(messageText) 以 messageText为消息,上托windowClose() 关闭当前窗口。Confirm (messageText) 上托带显示messageText的消息框,有OK和CANCEL按钮Open(url,name, featureList) 打开url 提供的新窗口,带有此窗口目标名,特征表指出如出现工具栏、状态栏、菜单栏、滚动条等特征。Prompt (messageText ,response) 请求用在对话框的文本域输入 方法10/21/201875
  • 76. 事件处理程序 用途onLoad当窗口或框架结束装入时处理onUnload当窗口或框架结束卸载时处理 setTimeout (expression, time)以毫秒指定时间间隔,间隔完后执行表达式clearTimeout(timerID) 清除由timerID指定的时间间隔10/21/201876
  • 77. 10/21/201877
  • 78. 又如例3-4 P4110/21/201878
  • 79. 文档对象是非常重要的,它位于最低层,但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。9、document 对象10/21/201879
  • 80. document中三个主要的对象 anchor锚对象 链接links对象 窗体(Form)对象 文档对象中的属性 激活的链接颜色:alinkcolor 链接颜色:linkcolor 浏览过后的颜色:VlinkColor 背景颜色:bgcolor 前景颜色:Fgcolor 文档对象的基本元素 表单属性 锚属性 链接属性10/21/201880
  • 81. 属于 window 的对象,每个窗口都与一个文档对象有关 为处理当前文档资料提供了若干属性,诸如: location Lastmodified 为处理当前文档资料提供了若干方法,诸如: Open()和Close()启动和停止缓冲输出,调用Open打开文档进行写操作,调用Close()关闭写操作 Clear()清除文档窗口 Write()和Writeln()相同10/21/201881
  • 82. 属性 描述 linkColor 表示未被连接的颜色的串值 alinkColore 表示活动连接颜色的串值 vlinkColor 表示被访问连接的颜色的串值 bgColor 表示文档背景颜色 fgColor 表示文档前景颜色 Location 表示当前URL的串值 Title 表示 标签之间文本的串值Document 对象相关属性10/21/201882
  • 83. Document 对象相关方法方法用途Clear() 清除document窗口Close() 关闭write流 Open() 打开此文档,检索write()流中的数据Write (content) 把指定的内容写到该文档 Writeln() 向文档写入一行数据,后跟一个回车10/21/201883
  • 84. Ex2 又如例3-4 P3810/21/201885
  • 86. 9、Form对象 属于文档对象的子对象,这就是表单form对象
    标记有三个参数, Name表单的名字 method: 可以为get或post Action 提交表单数据时发送到的目的地10/21/201886
  • 87. 【例2-10】 、创建一个页面, 包括Login按钮,当客户点击 Login 按钮时,应显示登录页面,该页面应接受帐户ID和口令,应有一个 Submit 按钮. 如果客户在主页上不点击Login按钮,5秒钟后将自动进入登录页面。10/21/201887
  • 88. 根据问题陈述需要两个页面: 主页 上边应有一个登录按钮 登录页面 有客户ID与口令框及一个submit 提交按钮确定自动显示登录页面的方法SetTimeout() 方法 格式: SetTimeout(“表达式”,超时) clearTimeout() 方法 格式:clearTimeout(ID) 根据问题陈述:打开主页5秒后进入登录页面。 10/21/201888
  • 89. window 对象的 open() 方法 onClick事件 在用户点击按钮时触发 用于打开一个新窗口。语法: Open(“url”,”name”, options); 其中: url 是要打开的文档的路径 name 是文档的名称 options 如下表所示:10/21/201889
  • 90. 名称描述Height设置窗口高度,可为一整数值 Menubar设置有无菜单条:1有, 0无Resizable是否可重定窗口大小:1是,0否Scrollbars设置是否带滚动条,1 是 , 0 否Status设置是否带状态栏,1 是 , 0 否Toolbar设置是标准工具条,1 是 , 0 否Width设置窗口宽度Options 属性10/21/201890
  • 91. 5 秒钟自动打开新窗口的 go() 函数: function go() { open(“Login.html”,”Login”); } 若在 5 秒内用户单击了 Login 按钮,则应先清除设置的超时,再调用go() 函数进入登录页面: 10/21/201891
  • 92. Earnest Bank

    Earnest Bank


    Login information:

    Account ID      
    Password               10/21/201892
  • 93. 编写自动显示登录页面的代码 Earnest Bank

    Earnest Bank

    Welcome to the Web Site!!

    Click on the Login button or wait for 5 seconds to Login!

    10/21/201893
  • 94. 本章总结了解JavaScript的定义和基本概念 掌握JavaScript的基本语法 了解基于对象编程方法 了解事件驱动概念 熟练掌握JavaScript中的对象,主要是window、document等常用对象。 熟练掌握JavaScript中的事件,例如onmouseover、onmouseout、onsubmit等。 熟练掌握使用JavaScript处理表单,例如表单内容的验证等。10/21/201894
  • 95. 【作业1】 用户输入数据合法性检查示例,首先显示用户输入电话号码的界面,当用户输入了号码并单击“提交号码”按钮后,将执行合法性检查程序,若用户输入的电话号码值不符合要求则给出出错提示信息,并且不将数据提交给服务器;否则将用户输入的电话号码数据提交给服务器 10/21/201895