JavaScript程序设计基础.ppt

《JavaScript程序设计基础.ppt》由会员分享，可在线阅读，更多相关《JavaScript程序设计基础.ppt（32页珍藏版）》请在三一办公上搜索。

1、JavaScript程序设计基础,JavaScript简介JavaScript编程基础JavaScript中的对象编程JavaScript的动态网页编程技术,JavaScript是什么？是Web页面中的一种脚本编程语言，可用于Web系统的客户端和服务器端编程。JavaScript的前身叫做LiveScript，是Netscape公司开发的脚本语言。Sun公司推出Java语言后，Netscape公司和Sun公司于1995年一起重新设计了LiveScript，并将其更名为JavaScript。,JavaScript简介,JavaScript的基本特点脚本编程语言：与HTML代码结合在一起，通常由浏

2、览器解释执行。基于对象的语言：JavaScript的许多功能来自于脚本环境中对象的方法与脚本的相互作用。安全性：在HTML页面中JavaScript不能访问本地硬盘，也不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。跨平台：在HTML页面中JavaScript的执行环境依赖于浏览器本身，只要安装了支持JavaScript的浏览器，JavaScript程序就可以执行。,JavaScript简介（续1）,JavaScript的应用客户端应用：将客户端的JavaScript脚本程序嵌入或链接到HTML文件，当用户通过浏览器请求这样的HTML页面时，JavaScript的脚本程序与

3、HTML一起被下载到客户端，由客户端的浏览器读取HTML文件，若包含JavaScript解释执行。,JavaScript简介（续2）,服务器端应用：JavaScript可以用来开发服务器端的Web应用程序。当用户通过浏览器请求URL时，服务器执行JavaScript脚本程序，将生成的数据以HTML格式返回浏览器。,JavaScript简介（续3）,对于JavaScript的客户端应用和服务器端应用，要根据实际情况进行选择。从程序保密性的角度来看，采用服务器端应用更为妥当（例如，用户注册）。如果只是对数据进行验证，可采用客户端应用来实现，这样效率更高。在Web页面中使用JavaScript在HT

4、ML中嵌入JavaScript：在HTML中通过 引入JavaScript代码。当浏览器读取到标记时，解释执行其中的脚本。在使用标记时，必须通过Language属性指定块中包含的是何种类型的脚本。,JavaScript简介（续4）,举例：S01_02.htm嵌入JavaScript代码/脚本标记 document.write(Hello World!)/在页面上显示一行文字,JavaScript简介（续5）,链接JavaScript文件：如果脚本程序较长或者同一段脚本可以在若干Web页中使用，则可以将脚本程序单独放在一个文件里（.js），然后链接到需要它的HTML文件，相当于将其中的脚本填入链

5、接处。具体可通过标记的SRC属性来指定外部脚本文件的URL。举例：S01_03.htm，其中，文件S01_03.js与S01_03.htm放在同一个文件夹中，并含有以下内容：document.write(Hello World!),JavaScript简介（续6）,S01_03.htm文件内容如下：链接JavaScripte代码,JavaScript简介（续7）,编写JavaScript的工具使用纯文本编辑器：早期的脚本编程人员通常使用纯文本编辑器（如Windows的记事本）来编写JavaScript脚本程序。这种方法适合于少量脚本的编写和修改。使用专业化脚本编辑工具：利用可视化工具（如Fro

6、ntpage、Dreamweaver和Flash等）可以很容易的在 Web页面中加入脚本来完成一些功能。JavaScript的专业化开发工具具有许多处理JavaScript特性的功能（如代码生成、语法敏感编辑和调试等），开发人员经常使用这些工具进行Web程序的开发，以便提高效率。,JavaScript简介（续8）,JavaScript中的常量、变量及表达式常量：数值型（整数、浮点数）、字符串和布尔型。变量 可以使用关键字“var”声明变量。如var name,age,weight;变量赋值：var name=“张三”;name=“李四”;运算符 算术运算符：+、-、*、/、%（取余数）、+、-

7、关系运算符：、=、=、=（严格等于）、!=、!=（严格不等于）逻辑运算符：&、|、!字符串运算符：+（连接）,JavaScript编程基础,赋值运算符：=条件运算符：condition?true_result:false_ result在JavaScript中使用对话框警示对话框alert()举例，S04_01.htm警示对话框alert(欢迎浏览本页面！);警示对话框显示一些文本信息和一个“确定”按钮。,JavaScript编程基础（续1）,确认对话框confirm()该方法返回一个布尔值 举例，S04_02.htm确认对话框var visited,show_text;visited=con

8、firm(您来过燕大吗？);show_text=visited?您也认为燕大很美吧！:欢迎您有机会来燕大参观!;document.write(show_text);,JavaScript编程基础（续2）,提示对话框prompt()举例，S04_03.htm提示对话框var name;name=prompt(请输入您的姓名:,);document.write(name+您好！欢迎您进入我的主页！);,JavaScript编程基础（续3）,JavaScript的流程控制语句分支结构：包括if语句和switch语句。语法结构同C语言类似。举例：输入两个数，求其最大值（S04_05.htm），选择回答

9、问题（S04_10.htm）循环结构：包括for语句、while语句和do while语句。语法结构同C语言类似。举例，利用for语句在页面上通过脚本显示6级标题（S04_12.htm），使用while语句求1+2+3+100的累加和（S04_13.htm），利用do while语句编写一个二位整数相加的测试程序（S04_15.htm），利用循环的嵌套在页面上显示一个“99乘法表”（S04_18.htm）,JavaScript编程基础（续4）,JavaScript的函数预定义函数：包eval()计算字符串表达式的值、parseFloat()将字符串开头的整数或浮点数分解出来,转换为浮点数、pa

10、rseInt()将字符串开头的整数分解出来,转换为整数。函数定义和调用：无参函数的定义和调用（S05_03.htm），有参函数的定义和调用（S05_04.htm、S05_06.htm）,JavaScript编程基础（续5）,对象的基本概念对象的属性和方法：对象包含两个要素，一个是用来描述对象的一组数据，即若干变量，通常称为属性；另一个是用来操作对象的若干动作（或函数），通常称为方法。在JavaScript中，对象就是属性和方法的集合。方法是作为对象成员的函数，表明对象所具有的行为；属性是作为对象成员的变量，表明对象的状态。因此，我们可以通过调用对象的方法来对对象进行各种操作。在JavaScri

11、pt 中使用对象：可以使用三种对象，即内置对象、自定义对象和浏览器对象。在JavaScript中，可通过new运算符来创建对象，即变量名=new 对象名()。将新创建的对象赋予一个变量（也叫对象变量）后，就可以通过这个变量访问对象的属性和方法。,JavaScript中的对象编程,JavaScript中的几个常用内置对象Date对象：该对象主要提供获取和设置日期和时间的方法。例如，getFullYear()（返回日期的完整年份，4位整数）、getMonth()-返回日期的月份值（011）、getDate()-返回日期的日值（131）、getDay()-返回星期几的序号（06）。举例，在Web页面

12、中显示当前日期（S06_3.htm）String对象：该对象提供了对字符串进行处理的属性和方法。使用该对象时，首先要创建一个字符串对象变量。可以使用new运算符来创建，也可以直接将字符串赋给变量。,JavaScript中的对象编程（续1）,String对象的最常用对象和方法：求字符串长度length、将字符串中的字母转换为小写字母toLowerCase()、将字符串中的字母转换为大写字母toUpperCase()、取子串substr(start，len)。举例，将输入的字符串反向输出到页面上，并且要求将其中的小写字母转换为大写字母。实现文件S06_07.htm内容如下：,JavaScript中

13、的对象编程（续2）,使用Stringvar origin_s,upper_s,i;origin_s=prompt(请输入一行文字:,);upper_s=origin_s.toUpperCase();for(i=upper_s.length-1;i=0;i-)document.write(upper_s.charAt(i);,JavaScript中的对象编程（续3）,Array对象：在JavaScript中，使用内置对象Array创建数组对象。格式如下：var arrayname=new Array(arraysize)举例，在页面上显示当前日期和时间,并显示是星期几。实现文件S06_09.ht

14、m内容如下：,JavaScript中的对象编程（续4）,显示星期几var week,today,week_i;week=new Array(星期日,星期一,星期二,星期三,星期四,星期五,星期六);today=new Date();week_i=today.getDay();document.write(today.toLocaleString()+weekweek_i);,JavaScript中的对象编程（续5）,返回日期的字符串表示,Array对象最常用的属性和方法：计算数组的长度length、返回一个包含数组中所有元素的字符串toString()。举例，使用toString()方法输出数

15、组对象变量的内容。实现文件S06_11.htm内容如下：,JavaScript中的对象编程（续6）,使用Array对象的属性和方法var classmates,iclassmates=new Array(张月,李良,王力,何芳);document.write(我的同学有:+classmates.toString();,JavaScript中的对象编程（续7）,动态网页编程技术：是指在HTML文档中使用脚本语言，通过文档对象模型和事件驱动（Event-Driven）技术，控制装载到浏览器中的页面及其元素。引用文档对象模型中的对象：文档对象模型为层次结构，所有下层对象都是其上层对象的子对象。子对象

16、其实就是父对象的属性，其引用方式与对象属性的引用相同。例如，引用document对象，可用window.document.write(“Hello”);,JavaScript的动态网页编程技术,由于window对象是默认的最上层对象，因此引用其对象时可以不使用window。如，document.write(“Hello”);当引用较低层次的对象时，要根据对象的包含关系，使用成员引用操作符“.”一层一层地引用对象。例如，引用文档中表单（form1）的文本输入框yourname，使用document.form1.yourname。举例，使用脚本为表单中的文本输入框给出一个初值。实现文件S07_01

17、.htm,JavaScript的动态网页编程技术（续1）,事件驱动的基本概念：用户操作事件（操作鼠标或按键的动作）或系统操作事件（如载入页面等）引起一连串程序动作的执行方式，称为事件驱动。为了响应某个事件而进行的处理过程，称为事件处理。对事件进行处理的过程或函数，称为事件处理程序。处理事件：在JavaScript中，使用事件有2种方法，即使用HTML标记或使用JavaScript语句。,JavaScript的动态网页编程技术（续2）,许多HTML标记允许加上以事件名为名的属性，如在按钮标记中加上onclick事件属性，并为该属性给出值。举例，设计一个表单，放入两个按钮，单击它们时将显示不同问候

18、语。实现文件：S07_02.htm使用事件的另一种方法是使用JavaScript语句:对象.事件=函数名举例，设计一个表单，放入1个按钮，单击它时将显示一条问候语。实现文件：S07_03.htm,JavaScript的动态网页编程技术（续3）,表单处理：当用户单击了表单中的提交按钮之后，用户在表单中填写或选择的内容将被传送到服务器端特定的程序（由action属性指定，通常为ASP程序、JSP程序或Java Servlet程序）中，由该程序进行具体的处理。验证表单：由于表单正式提交到服务器之前，需要onSubmit的值为true，因此可以通过为onSubmit事件指定的处理函数来进行表单数据的验

19、证。举例：设计一个表单，该表单有姓名和卡号（格式为XXXX-XXXX-XXXX-XXXX，每个X代表一位数字），要求在用户单击提交按钮“发送”之前，验证输入数据的有效性。（S08_11.htm),JavaScript的动态网页编程技术（续4）,处理表单元素举例：以下例子中用到的表单元素对象的属性和方法：focus()将焦点移动到对象上，onChange当对象的值改变时触发，onClick当单击按钮、单选框或复选框时触发。例子：处理文本框-验证在文本框中输入的年龄是否在10100之间（S08_12.htm)；处理按钮设计3个按钮，单击它们时分别使页面的背景色变成红、蓝、绿（S08_13.htm)

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