JavaScript程序设计基础.ppt

《JavaScript程序设计基础.ppt》由会员分享，可在线阅读，更多相关《JavaScript程序设计基础.ppt（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、JavaScript程序设计基础程序设计基础n nJavaScript简介简介n nJavaScript编程基础编程基础n nJavaScript中的对象编程中的对象编程n nJavaScript的动态网页编程技术的动态网页编程技术n nJavaScriptJavaScript是什么？是什么？是什么？是什么？是是Web页面中的一种脚本编程语页面中的一种脚本编程语言，可用于言，可用于Web系统的客户端和服务器端编程。系统的客户端和服务器端编程。JavaScript的前身叫做的前身叫做LiveScript，是是Netscape公司开公司开发的脚本语言。发的脚本语言。Sun公司推出公司推出Java语

2、言后，语言后，Netscape公司和公司和Sun公司于公司于1995年一起重新设计了年一起重新设计了LiveScript，并将其更名为并将其更名为JavaScript。JavaScript简介简介n nJavaScriptJavaScript的基本特点的基本特点的基本特点的基本特点脚本编程语言：脚本编程语言：脚本编程语言：脚本编程语言：与与HTML代码结合在一起，通常由浏览器解释代码结合在一起，通常由浏览器解释执行。执行。基于对象的语言：基于对象的语言：基于对象的语言：基于对象的语言：JavaScript的许多功能来自于脚本环境中对的许多功能来自于脚本环境中对象的方法与脚本的相互作用。象的方法

3、与脚本的相互作用。安全性：安全性：安全性：安全性：在在HTML页面中页面中JavaScript不能访问本地硬盘，也不不能访问本地硬盘，也不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。或动态交互。跨平台：跨平台：跨平台：跨平台：在在HTML页面中页面中JavaScript的执行环境依赖于浏览器的执行环境依赖于浏览器本身，只要安装了支持本身，只要安装了支持JavaScript的浏览器，的浏览器，JavaScript程序程序就可以执行。就可以执行。JavaScript简介（续简介（续1）n nJavaScriptJavaSc

4、ript的应用的应用的应用的应用客户端应用：客户端应用：客户端应用：客户端应用：将客户端的将客户端的JavaScript脚本程序嵌入或链接到脚本程序嵌入或链接到HTML文件，当用户通过浏览器请求这样的文件，当用户通过浏览器请求这样的HTML页面时，页面时，JavaScript的脚本程序与的脚本程序与HTML一起被下载到客户端，由客户一起被下载到客户端，由客户端的浏览器读取端的浏览器读取HTML文件，若包含文件，若包含JavaScript解释执行。解释执行。JavaScript简介（续简介（续2）浏览器服务器浏览器发出浏览器发出URL请求请求服务器返回服务器返回HTML文件，由浏览文件，由浏览器

5、解释执行器解释执行服务器端应用：服务器端应用：服务器端应用：服务器端应用：JavaScript可以用来开发服务器端的可以用来开发服务器端的Web应用应用程序。当用户通过浏览器请求程序。当用户通过浏览器请求URL时，服务器执行时，服务器执行JavaScript脚本程序，将生成的数据以脚本程序，将生成的数据以HTML格式返回浏览器。格式返回浏览器。JavaScript简介（续简介（续3）浏览器服务器浏览器发出浏览器发出URL请求请求服务器解释执行脚本程序，并将服务器解释执行脚本程序，并将结果以结果以HTML形式返回形式返回1.对于对于JavaScript的客户端应用和服务器端应用，要根据实际情的客

6、户端应用和服务器端应用，要根据实际情况进行选择。从程序保密性的角度来看，采用服务器端应用更况进行选择。从程序保密性的角度来看，采用服务器端应用更为妥当（例如，用户注册）。如果只是对数据进行验证，可采为妥当（例如，用户注册）。如果只是对数据进行验证，可采用客户端应用来实现，这样效率更高。用客户端应用来实现，这样效率更高。n n在在在在WebWeb页面中使用页面中使用页面中使用页面中使用JavaScriptJavaScript1.1.在在在在HTMLHTML中嵌入中嵌入中嵌入中嵌入JavaScriptJavaScript：在在HTML中通过中通过 引入引入JavaScript代码。当浏览器读取到代

7、码。当浏览器读取到标记时，解释执行其中的脚本。在使用标记时，解释执行其中的脚本。在使用标记时，必标记时，必须通过须通过Language属性指定属性指定块中包含的是何种类型的块中包含的是何种类型的脚本。脚本。JavaScript简介（续简介（续4）举例：S01_02.htm嵌入嵌入JavaScript代码代码/脚本标记脚本标记 document.write(Hello World!)/在页面上显示一行文字在页面上显示一行文字JavaScript简介（续简介（续5）链接链接链接链接JavaScriptJavaScript文件：文件：文件：文件：如果脚本程序较长或者同一段脚本可以如果脚本程序较长或者

8、同一段脚本可以在若干在若干Web页中使用，则可以将脚本程序单独放在一个文件里页中使用，则可以将脚本程序单独放在一个文件里（.js），），然后链接到需要它的然后链接到需要它的HTML文件，相当于将其中的文件，相当于将其中的脚本填入链接处。具体可通过脚本填入链接处。具体可通过标记的标记的SRC属性来指属性来指定外部脚本文件的定外部脚本文件的URL。举例：举例：S01_03.htm，其中，文件其中，文件S01_03.js与与S01_03.htm放在同一个文件夹中，并含有以下内放在同一个文件夹中，并含有以下内容容：document.write(Hello World!)JavaScript简介（续简介

9、（续6）S01_03.htm文件内容如下：链接链接JavaScripte代码代码JavaScript简介（续简介（续7）n n编写编写编写编写JavaScriptJavaScript的工具的工具的工具的工具使用纯文本编辑器：使用纯文本编辑器：使用纯文本编辑器：使用纯文本编辑器：早期的脚本编程人员通常使用纯文本编辑早期的脚本编程人员通常使用纯文本编辑器（如器（如Windows的记事本）来编写的记事本）来编写JavaScript脚本程序。这种脚本程序。这种方法适合于少量脚本的编写和修改。方法适合于少量脚本的编写和修改。使用专业化脚本编辑工具：使用专业化脚本编辑工具：使用专业化脚本编辑工具：使用专业

10、化脚本编辑工具：利用可视化工具（如利用可视化工具（如Frontpage、Dreamweaver和和Flash等）可以很容易的在等）可以很容易的在 Web页面中加入脚页面中加入脚本来完成一些功能。本来完成一些功能。JavaScript的专业化开发工具具有许多处的专业化开发工具具有许多处理理JavaScript特性的功能（如代码生成、语法敏感编辑和调试特性的功能（如代码生成、语法敏感编辑和调试等），开发人员经常使用这些工具进行等），开发人员经常使用这些工具进行Web程序的开发，以便程序的开发，以便提高效率。提高效率。JavaScript简介（续简介（续8）n nJavaScriptJavaScri

11、pt中的常量、变量及表达式中的常量、变量及表达式中的常量、变量及表达式中的常量、变量及表达式常量：常量：常量：常量：数值型（整数、浮点数）、字符串和布尔型。数值型（整数、浮点数）、字符串和布尔型。变量变量变量变量 可以使用关键字可以使用关键字“var”声明变量。如声明变量。如var name,age,weight;变量赋值：变量赋值：var name=“张三张三”;name=“李四李四”;运算符运算符运算符运算符 算术运算符：算术运算符：+、-、*、/、%（取余数）、（取余数）、+、-关系运算符：关系运算符：、=、=、=（严格等于）、（严格等于）、!=、!=（严格不等于）（严格不等于）逻辑运算

12、符：逻辑运算符：&、|、!字符串运算符：字符串运算符：+（连接）（连接）JavaScript编程基础编程基础 赋值运算符：=条件运算符：condition?true_result:false_ resultn n在在在在JavaScriptJavaScript中使用对话框中使用对话框中使用对话框中使用对话框警示对话框警示对话框警示对话框警示对话框 alert()alert()举例，举例，举例，举例，S04_01.S04_01.htmhtm警示对话框警示对话框alert(欢迎浏览本页面！欢迎浏览本页面！);警示对话框显示一些文本信息和一个警示对话框显示一些文本信息和一个“确定确定”按钮。按钮。J

13、avaScript编程基础（续编程基础（续1）确认对话框确认对话框确认对话框确认对话框 confirm()confirm()该方法返回一个该方法返回一个该方法返回一个该方法返回一个布尔值布尔值布尔值布尔值 举例，举例，举例，举例，S04_02.S04_02.htmhtm确认对话框确认对话框var visited,show_text;visited=confirm(您来过燕大吗？您来过燕大吗？);show_text=visited?您也认为燕大很美吧！您也认为燕大很美吧！:欢迎您有机会来燕大参观欢迎您有机会来燕大参观!;document.write(show_text);JavaScript编程

14、基础（续编程基础（续2）提示对话框提示对话框提示对话框提示对话框 prompt()prompt()举例，举例，举例，举例，S04_03.S04_03.htmhtm提示对话框提示对话框var name;name=prompt(请输入您的姓名请输入您的姓名:,);document.write(name+您好！欢迎您进入我的主页！您好！欢迎您进入我的主页！);JavaScript编程基础（续编程基础（续3）n nJavaScriptJavaScript的流程控制语句的流程控制语句的流程控制语句的流程控制语句分支结构：分支结构：分支结构：分支结构：包括包括if语句和语句和switch语句语句。语法结构

15、同语法结构同C语言类似。语言类似。举例：输入两个数，求其最大值（举例：输入两个数，求其最大值（S04_05.htm），），选择回答问选择回答问题（题（S04_10.htm）循环结构：循环结构：循环结构：循环结构：包括包括for语句、语句、while语句和语句和do while语句语句。语法结语法结构同构同C语言类似。语言类似。举例，利用举例，利用for语句在页面上通过脚本显示语句在页面上通过脚本显示6级标题级标题（S04_12.htm），），使用使用while语句求语句求1+2+3+100的累加和的累加和（S04_13.htm），），利用利用do while语句编写一个二位整数相加的语句编写一

16、个二位整数相加的测试程序（测试程序（S04_15.htm），），利用循环的嵌套在页面上显示一个利用循环的嵌套在页面上显示一个“99乘法表乘法表”（S04_18.htm）JavaScript编程基础（续编程基础（续4）n nJavaScript的函数的函数预定义函数：预定义函数：预定义函数：预定义函数：包包eval()计算字符串表达式的值、计算字符串表达式的值、parseFloat()将字符串开头的整数或浮点数分解出将字符串开头的整数或浮点数分解出来来,转换为浮点数、转换为浮点数、parseInt()将字符串开头的整数将字符串开头的整数分解出来分解出来,转换为整数。转换为整数。函数定义和调用：函

17、数定义和调用：函数定义和调用：函数定义和调用：无参函数的定义和调用（无参函数的定义和调用（S05_03.htm），），有参函数的有参函数的定义和调用（定义和调用（S05_04.htm、S05_06.htm）JavaScript编程基础（续编程基础（续5）n n对象的基本概念对象的基本概念对象的基本概念对象的基本概念对象的属性和方法：对象的属性和方法：对象的属性和方法：对象的属性和方法：对象包含两个要素，一个是用来描述对象对象包含两个要素，一个是用来描述对象的一组数据，即若干变量，通常称为属性；另一个是用来操作的一组数据，即若干变量，通常称为属性；另一个是用来操作对象的若干动作（或函数），通常称

18、为方法。在对象的若干动作（或函数），通常称为方法。在JavaScript中，中，对象就是属性和方法的集合。方法是作为对象成员的函数，表对象就是属性和方法的集合。方法是作为对象成员的函数，表明对象所具有的行为；属性是作为对象成员的变量，表明对象明对象所具有的行为；属性是作为对象成员的变量，表明对象的状态。因此，我们可以通过调用对象的方法来对对象进行各的状态。因此，我们可以通过调用对象的方法来对对象进行各种操作。种操作。在在在在JavaScriptJavaScript 中使用对象：中使用对象：中使用对象：中使用对象：可以使用三种对象，即内置对象、可以使用三种对象，即内置对象、自定义对象和浏览器对象

19、。在自定义对象和浏览器对象。在JavaScript中，可通过中，可通过new运算运算符来创建对象，即符来创建对象，即变量名变量名=new 对象名对象名()。将新创建的对象。将新创建的对象赋予一个变量（也叫对象变量）后，就可以通过这个变量访问赋予一个变量（也叫对象变量）后，就可以通过这个变量访问对象的属性和方法。对象的属性和方法。JavaScript中的对象编程中的对象编程n nJavaScriptJavaScript中的几个常用内置对象中的几个常用内置对象中的几个常用内置对象中的几个常用内置对象DateDate对象：对象：对象：对象：该对象主要提供获取和设置日期和时间的该对象主要提供获取和设置

20、日期和时间的方法。例如，方法。例如，getFullYear()（返回日期的完整年份，返回日期的完整年份，4位整数）、位整数）、getMonth()-返回日期的月份值（返回日期的月份值（011）、）、getDate()-返回日期的日值（返回日期的日值（131）、）、getDay()-返返回星期几的序号（回星期几的序号（06）。举例，在。举例，在Web页面中显示页面中显示当前日期当前日期（S06_3.htm）StringString对象：对象：对象：对象：该对象提供了对字符串进行处理的属性该对象提供了对字符串进行处理的属性和方法。使用该对象时，首先要创建一个字符串对象和方法。使用该对象时，首先要创

21、建一个字符串对象变量。可以使用变量。可以使用new运算符来创建，也可以直接将字运算符来创建，也可以直接将字符串赋给变量。符串赋给变量。JavaScript中的对象编程（续中的对象编程（续1）String对象的最常用对象和方法：对象的最常用对象和方法：求字符串长求字符串长度度length、将字符串中的字母转换为小写字母将字符串中的字母转换为小写字母toLowerCase()、将字符串中的字母转换为大写字母将字符串中的字母转换为大写字母toUpperCase()、取子串取子串substr(start，len)。举例，将输入。举例，将输入的字符串反向输出到页面上，并且要求将其中的字符串反向输出到页面

22、上，并且要求将其中的小写字母转换为大写字母。实现文件的小写字母转换为大写字母。实现文件S06_07.htm内容如下：内容如下：JavaScript中的对象编程（续中的对象编程（续2）HTML使用使用使用使用StringStringscript language=varvar origin_s,upper_s,i;origin_s,upper_s,i;origin_s=prompt(origin_s=prompt(请输入一行文字请输入一行文字请输入一行文字请输入一行文字:,);:,);upper_s=origin_s.upper_s=origin_s.toUpperCasetoUpperCase

23、();();for(i=upper_s.length-1;i=0;i-)for(i=upper_s.length-1;i=0;i-)document.write(upper_s.document.write(upper_s.charAtcharAt(i);(i);JavaScript中的对象编程（续中的对象编程（续3）Array对象：对象：在JavaScript中，使用内置对象Array创建数组对象。格式如下：var arrayname=new Array(arraysize)举例，在页面上显示当前日期和时间,并显示是星期几。实现文件S06_09.htm内容如下：JavaScript中的对象编

24、程（续中的对象编程（续4）HTML显示星期几显示星期几显示星期几显示星期几/TITLEscript language=varvar week,today,week_i;week,today,week_i;week=new Array(week=new Array(星期日星期日星期日星期日,星期一星期一星期一星期一,星期二星期二星期二星期二,星期三星期三星期三星期三,星期四星期四星期四星期四,星期五星期五星期五星期五,星期六星期六星期六星期六););today=new Date();today=new Date();week_i=today.week_i=today.getDaygetDay()

25、;();document.write(today.document.write(today.toLocaleStringtoLocaleString()()+weekweek_i);+weekweek_i);JavaScript中的对象编程（续中的对象编程（续5）返回日期的字符串表示返回日期的字符串表示Array对象最常用的属性和方法：对象最常用的属性和方法：计算数组的长度length、返回一个包含数组中所有元素的字符串toString()。举例，使用toString()方法输出数组对象变量的内容。实现文件S06_11.htm内容如下：JavaScript中的对象编程（续中的对象编程（续6）H

26、TML使用使用使用使用ArrayArray对象的属性和方对象的属性和方对象的属性和方对象的属性和方法法法法/TITLEscript language=varvar classmates,i classmates,iclassmates=new Array(classmates=new Array(张月张月张月张月,李良李良李良李良,王力王力王力王力,何芳何芳何芳何芳););document.write(document.write(我的同学有我的同学有我的同学有我的同学有:+:+classmates.classmates.toStringtoString();();JavaScript中的对象

27、编程（续中的对象编程（续7）n n动态网页编程技术：动态网页编程技术：是指在是指在HTML文档中使用文档中使用脚本语言，通过文档对象模型和事件驱动脚本语言，通过文档对象模型和事件驱动（Event-Driven）技术，控制装载到浏览器中技术，控制装载到浏览器中的页面及其元素。的页面及其元素。引用文档对象模型中的对象：引用文档对象模型中的对象：文档对象模型为文档对象模型为层次结构，所有下层对象都是其上层对象的子层次结构，所有下层对象都是其上层对象的子对象。子对象其实就是父对象的属性，其引用对象。子对象其实就是父对象的属性，其引用方式与对象属性的引用相同。例如，引用方式与对象属性的引用相同。例如，引

28、用document对象，可用对象，可用window.document.write(“Hello”);JavaScript的动态网页编程技术的动态网页编程技术由于由于window对象是默认的最上层对象，因此引用其对对象是默认的最上层对象，因此引用其对象时可以不使用象时可以不使用window。如，如，document.write(“Hello”);当引用较低层次的对象时，要根据对象的包含关系，使当引用较低层次的对象时，要根据对象的包含关系，使用成员引用操作符用成员引用操作符“.”一层一层地引用对象。例如，一层一层地引用对象。例如，引用文档中表单（引用文档中表单（form1）的文本输入框的文本输入框

29、yourname，使用使用document.form1.yourname。举例，使用脚本为表单中的文本输入框给出一个初值。举例，使用脚本为表单中的文本输入框给出一个初值。实现文件实现文件S07_01.htmJavaScript的动态网页编程技术（续的动态网页编程技术（续1）n n事件驱动的基本概念：事件驱动的基本概念：用户操作事件（操作鼠用户操作事件（操作鼠标或按键的动作）或系统操作事件（如载入页标或按键的动作）或系统操作事件（如载入页面等）引起一连串程序动作的执行方式，称为面等）引起一连串程序动作的执行方式，称为事件驱动。为了响应某个事件而进行的处理过事件驱动。为了响应某个事件而进行的处理过

30、程，称为事件处理。对事件进行处理的过程或程，称为事件处理。对事件进行处理的过程或函数，称为事件处理程序。函数，称为事件处理程序。n n处理事件：处理事件：在在JavaScript中，使用事件有中，使用事件有2种方种方法，即使用法，即使用HTML标记或使用标记或使用JavaScript语句。语句。JavaScript的动态网页编程技术（续的动态网页编程技术（续2）许多许多HTML标记允许加上以事件名为名的属性，标记允许加上以事件名为名的属性，如在按钮标记中加上如在按钮标记中加上onclick事件属性，并为该事件属性，并为该属性给出值。举例，设计一个表单，放入两个属性给出值。举例，设计一个表单，放

31、入两个按钮，单击它们时将显示不同问候语。实现文按钮，单击它们时将显示不同问候语。实现文件：件：S07_02.htm使用事件的另一种方法是使用使用事件的另一种方法是使用JavaScript语句语句:对象对象.事件事件=函数名函数名举例，设计一个表单，放入举例，设计一个表单，放入1个按钮，单击它时个按钮，单击它时将显示一条问候语。实现文件：将显示一条问候语。实现文件：S07_03.htmJavaScript的动态网页编程技术（续的动态网页编程技术（续3）n n表单处理：表单处理：表单处理：表单处理：当用户单击了表单中的提交按钮之后，用当用户单击了表单中的提交按钮之后，用户在表单中填写或选择的内容将

32、被传送到服务器端特户在表单中填写或选择的内容将被传送到服务器端特定的程序（由定的程序（由action属性指定，通常为属性指定，通常为ASP程序、程序、JSP程序或程序或Java Servlet程序）中，由该程序进行具体程序）中，由该程序进行具体的处理。的处理。验证表单：验证表单：由于表单正式提交到服务器之前，需要由于表单正式提交到服务器之前，需要onSubmit的值为的值为true，因此可以通过为因此可以通过为onSubmit事件事件指定的处理函数来进行表单数据的验证。举例：设计指定的处理函数来进行表单数据的验证。举例：设计一个表单，该表单有姓名和卡号（格式为一个表单，该表单有姓名和卡号（格式

33、为XXXX-XXXX-XXXX-XXXX，每个每个X代表一位数字），要求代表一位数字），要求在用户单击提交按钮在用户单击提交按钮“发送发送”之前，验证输入数据的之前，验证输入数据的有效性。（有效性。（S08_11.htm)JavaScript的动态网页编程技术（续的动态网页编程技术（续4）处理表单元素举例：处理表单元素举例：以下例子中用到的表单元以下例子中用到的表单元素对象的属性和方法：素对象的属性和方法：focus()将焦点移动到将焦点移动到对象上，对象上，onChange当对象的值改变时触发，当对象的值改变时触发，onClick当单击按钮、单选框或复选框时触当单击按钮、单选框或复选框时触发

34、。例子：发。例子：处理文本框处理文本框-验证在文本框中输验证在文本框中输入的年龄是否在入的年龄是否在10100之间（之间（S08_12.htm)；处理按钮处理按钮设计设计3个按钮，单击它们时分别个按钮，单击它们时分别使页面的背景色变成红、蓝、绿（使页面的背景色变成红、蓝、绿（S08_13.htm)；JavaScript的动态网页编程技术（续的动态网页编程技术（续5）处理单选框和复选框处理单选框和复选框设计一个在线调查的表设计一个在线调查的表单页面（含有单选、多选项），当用户单击提单页面（含有单选、多选项），当用户单击提交按钮时，将显示一个对话框显示用户的选择交按钮时，将显示一个对话框显示用户的

35、选择结果（结果（S08_14.htm)；处理列表处理列表设计一个设计一个在线调查的表单页面（含有一个单选列表和一在线调查的表单页面（含有一个单选列表和一个多选项列表），当用户单击提交按钮时，将个多选项列表），当用户单击提交按钮时，将显示一个对话框显示用户的选择结果（显示一个对话框显示用户的选择结果（S08_15.htm)JavaScript的动态网页编程技术（续的动态网页编程技术（续6）n n时间特效：时间特效：举例，举例，设计一个页面，显示一个设计一个页面，显示一个数字时钟（数字时钟（S10_07.htm）；）；设计一个页面，设计一个页面，它可以通过一个页面，通过一个按钮控制显示它可以通过一个页面，通过一个按钮控制显示或不显示数字时钟（或不显示数字时钟（S10_08.htm）JavaScript的动态网页编程技术（续的动态网页编程技术（续7）