互联网软件开发与应用chap4.ppt

1、网页设计与制作网页设计与制作网页设计与制作网页设计与制作主讲：狼哥QQ：1107095361开始学习JavaScript为什么要学习JavaScriptnVBScript和JavaScript两种脚本语言有不同的特性，都掌握可以扬长避短。nVBScript和JavaScript结合编程是ASP解决方案的一种理想选择！nJavaScript是一种通用的、基于原型的、面向对象的脚本语言。nJavaScript设计目标是在不占用很多系统和网络资源的情况下，可以在页面做完整的程序nJavaScript是一种是一种Script脚本语言，所谓的脚本语言，所谓的脚本语言就是可以和脚本语言就是可以和HTML语

2、言混合使用的语言混合使用的语言。语言。nVBScript也是也是Script语言中的一种，但是语言中的一种，但是VBScript只有微软的浏览器只有微软的浏览器InternetExplore（IE）才能完全支持。而）才能完全支持。而JavaScript则不管是什么浏览器都可以运行，这也是则不管是什么浏览器都可以运行，这也是JavaScript的一个优点。的一个优点。nJavaScript是一种高级的脚本描述性语言，是一种高级的脚本描述性语言，并不需要依赖于特定的机器和操作系统，所并不需要依赖于特定的机器和操作系统，所以说它是独立于操作平台的。以说它是独立于操作平台的。JavaScript1.0

3、最初是在最初是在NetscapeNavigator2.0及及NetscapeLiveWire1.0上实现的，目前上实现的，目前JavaScript的版本是的版本是JavaScript1.2。JavaScript概述概述 JavaScript是由网景公司开发的一种跨平台，面向对象(object-oriented)的网页脚本语言(Web Script Language)，是目前流行的网页特效设计语言。JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。JavaScript概述概述什么是什么是JavaScript脚本语言？脚本语言？(1)脚本语言

4、脚本语言(Scripting Language)？由ASCII码构成，可直接用任何的文本编辑器开发完成。是一种不必事先编译，只要利用适当的解释器(Interpreter)就可以执行的简单的解释式程序。(2)JavaScript？JavaScript是由网景公司开发的一种跨平台，纯面向对象(object-oriented)式的网页式脚本语言(Web Script Language)。JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器的解释器来解释执行。JavaScript概述概述 脚本编写语言 基于对象的语言 简单性 安全性 动态性 跨平台JavaSc

5、ript的特点JavaScript概述概述 制作网页特效 提供表单前端验证 窗口动态操作 提高系统工作效率JavaScript的功能的功能JavaScript概述概述JavaScript概述概述n利用JavaScript可以增强网页的交互性，控制各种浏览器对象n利用JavaScript还可以实现对用户所输入的数据进行有效验证，从而减轻服务器的负担nJavaScript必须放在与标记之间，以便将脚本代码与HTML标记区分开来nScript块可以放在HTML中与之间，也可以放在与之间JavaScript与Java的区别n从本质上说从本质上说JavaScript和和Java没有什么联没有什么联系，但

6、是同时作为语言，可以从下面的角度系，但是同时作为语言，可以从下面的角度来区别。来区别。n（1）JavaScript是解释型的语言，当程序执是解释型的语言，当程序执行的时候，浏览器一边解释一边执行。而行的时候，浏览器一边解释一边执行。而Java是编译型的语言，必须经过编译才能执是编译型的语言，必须经过编译才能执行。行。n（2）代码格式不一样，）代码格式不一样，Java代码经过编译代码经过编译后成为二进制文件，而后成为二进制文件，而JavaScript是纯文本是纯文本的文件。的文件。n（3）在）在HTML中的嵌入方式不一样。中的嵌入方式不一样。Java可可以通过小应用程序嵌入以通过小应用程序嵌入H

7、TML文件，而文件，而JavaScript可直接写入一个文本文件或可直接写入一个文本文件或HTML文件中。文件中。JavaScript编写客户端脚本语法格式：在网页中加入JavaScriptn要在你的网页中使用JavaScript，你首先必须要知道该将它放在哪儿。其实很简单，只要在你的网页（HTML文件）中插入和标记对，你就可以在这两个标记队之间插入你的JavaScript代码了：n例如：例如：nalert(Helloworld!);在网页中加入JavaScriptn另外，你也可以将JavaScript代码放在另一个单独的文件里，然后在网页（HTML文件）中使用“SRC=此单独文件的路径/地址

8、（URL）”来使用此单独文件里的JavaScript程序代码。一般将这个单独的文件保存为扩展名为.JS的文件：Javascript程序n在网页打开时，弹出消息窗 window.alert(Hello My JS!);事件n在网页打开时，弹出广告 function dd()window.open(form2.htm);JAVASCRIPT语法基础基本的数据类型n数值型（整数和实数）n字符串型用“”括起来的n布尔型TRUE和FALSEn空值NULL变量的申明方法VARMytestJavascript:表达式n数学运算表达式:+-*/%+-n关系运算表达式:、=、=、=、!=n字符表达式:+n逻辑表

9、达式:&、|、!JavaScript语法基础n【语句】注释-使用/来注释一个单行,/*和*/可以注释多行；循环-for、do、while等等；条件语句-if.else；switch.case；条件分支语句(1)if(条件表达式)语句体1；else语句体2；条件分支语句(2)Switch(表达式)case值1：语句体1;break;case值2：语句体2;break;default:语句体;循环控制语句for(i=1;i=6;i+)document.write(“javascript”);应用举例：简单购物系统JavaScript的事件处理的事件处理主要内容主要内容1、事件、事件(Event)：

10、鼠标或键盘的动作称为事件鼠标或键盘的动作称为事件。2、事件驱动、事件驱动(Event Driver)：由事件引发的一由事件引发的一连串程序的动作，称为事件驱动。连串程序的动作，称为事件驱动。3、事件处理程序、事件处理程序(Event Handler)：对事件进对事件进行处理的程序或函数。行处理的程序或函数。4、事件处理程序语法、事件处理程序语法 JavaScript的事件处理的事件处理1、常见事件、常见事件事件事件动作作事件事件动作作Abort中止正在加载的对象Unload关闭当前网页Blur失去焦点MouseDown按下鼠标左键Focus获取焦点MouseMove移动鼠标指针Change改变

11、对象的值MouseOut鼠标指针离开某对象Click在对象上单击鼠标MouseOver鼠标指针悬停于某对象之上DblClick在对象上双击鼠标MouseUp放开鼠标左键DrogDrop拖拽对象Move窗口被移动时Error加载文件或图形时发生错误Resize窗口大小被改变KeyDown按下键盘上的任意键的瞬间Select选择某对象KeyPress按下键盘上的任意键时Submit单击表单上的Submit按钮KeyUp某键被按下后弹起来的瞬间Reset单击表单上的Reset按钮Load 浏览器读入文件时JavaScript的事件处理的事件处理2、事件处理程序语法、事件处理程序语法 将事件处理程序直

12、接嵌入HTML标记符中 例如：嵌入.中直接写在对象后面例如：document.onLoad=alert(这是事件处理程序);JavaScript的事件处理的事件处理3、应用举例、应用举例例:请输入基本资料：姓名：JavaScript包含两类函数：系统函数 用户自定义函数JavaScript函数函数JavaScript编程基础编程基础函数function fun(number)if(number=0)return 1;elsereturn 1;JavaScript的常用对象的常用对象nJavaScript是面向对象编程的。所谓是面向对象编程的。所谓“对象化对象化编程编程”，意思是把，意思是把Ja

13、vaScript能涉及的内容分成能涉及的内容分成大大小小的对象，对象下面还可继续划分对象直大大小小的对象，对象下面还可继续划分对象直至非常详细，所有的编程都以对象为出发点。小至非常详细，所有的编程都以对象为出发点。小到一个变量，大到网页文档、窗口甚至屏幕，都到一个变量，大到网页文档、窗口甚至屏幕，都是对象。是对象。nJavaScript的对象可以是一段文字、一幅图的对象可以是一段文字、一幅图片、一个表单等。每个对象有特定的属性、方法片、一个表单等。每个对象有特定的属性、方法和事件。对象的属性是反映该对象某些特定的性和事件。对象的属性是反映该对象某些特定的性质的，如字符串长度、图像的高宽、文本框

14、的文质的，如字符串长度、图像的高宽、文本框的文字等；对象的方法能对该对象做一些操作，如表字等；对象的方法能对该对象做一些操作，如表单的单的“提交提交”，窗口的，窗口的“滚动滚动”等；对象的事件等；对象的事件能响应发生在对象上的事情，如提交表单产生表能响应发生在对象上的事情，如提交表单产生表单的单的“提交事件提交事件”，点击产生，点击产生“点击事件点击事件”。不。不是所有的对象都有以上三个性质，有些没有事件是所有的对象都有以上三个性质，有些没有事件而只有属性。而只有属性。JavaScript提供了一些非常有用的常用内部对象提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这

15、正是和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。主要有基于对象编程的真正目的。主要有JavaScript提供的提供的Window（窗口）、（窗口）、string（字符串）、（字符串）、math（数值（数值计算）和计算）和Date（日期）内置对象等。（日期）内置对象等。内置对象都有自己的方法和属性，访问属性的语法是：内置对象都有自己的方法和属性，访问属性的语法是：“对象名对象名.属性名称属性名称”。访问方法的语法是：访问方法的语法是：“对象名对象名.方法名称方法名称（参数表）（参数表）”。所谓的方法就是一个普通的函数被封装到一个对象中。所谓的方法就是一个普通的函数被封装

16、到一个对象中。JavaScript内置对象内置对象 下面是一个文档对象树下面是一个文档对象树:JavaScript对象及其层次关系对象及其层次关系NavigatorPluginMineTypeWindowFrameDocumentLocationHistoryCookieAnchorAppletAreaFormImageLinkLayerCheckBoxRadioSubmitHiddenPasswardFileUploadTextTextareaSelectResetButtonOptionWindow对象nWindow对象是浏览器对象中大部分对象的祖先，下对象是浏览器对象中大部分对象的祖先，下面列出一些常用面列出一些常用Window对象的方法。对象的方法。n（1）open(URL,windowName,parameterList)：open()方法创建一个新的浏览器窗口，并在新窗口中载入一个指方法创建一个新的浏览器窗口，并在新窗口中载入一个指定的定的URL地址。地址。n（2）close()：close()方法关闭一个浏览器窗口。方法关闭一个浏览器窗口。n（3）alert()：弹出一个