《JavaScript程序设计教程》项目4:万年历的设计_第1页
《JavaScript程序设计教程》项目4:万年历的设计_第2页
《JavaScript程序设计教程》项目4:万年历的设计_第3页
《JavaScript程序设计教程》项目4:万年历的设计_第4页
《JavaScript程序设计教程》项目4:万年历的设计_第5页
已阅读5页,还剩51页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

JavaScript程序设计教程项目4:万年历的设计项目4:万年历的设计4.1功能与技术分析4.1.1万年历在一个万年历网页上,可以选择不同年份及月份,从而实现显示日历的改变,如图4-1所示。项目4:万年历的设计4.1功能与技术分析4.1.2功能分析网页实现的功能有:

(1)显示本年本月的月历;

(2)在下拉列表中选择月份;

(3)鼠标点击年份两边的双箭头,可以改变年份;

(4)鼠标点击日期,可以在月历下方显示完整的年-月-日。项目4:万年历的设计4.1功能与技术分析4.1.3技术分析除了JavaScript基本知识外,还需掌握的知识点有:

(1)JavaScript的循环结构,以实现将日期显示在表格中。

(2)JavaScript的日期对象,实现日期的正确显示。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构

JavaScript提供了丰富多彩的设计循环结构的语句,包括for语句或计数循环、while语句和do…while语句、forin语句等。其中,for语句按指定的次数执行循环体,而while语句和do…while语句则是在给定的条件满足时执行循环体。无论何种类型的循环结构,其特点都是:循环体执行与否及其执行次数多少都必须视其循环类型与条件而定,且必须确保循环体的重复执行能在适当的时候得以终止(即非死循环)。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.1

while和do-while循环语句1.前测型循环结构

while语句属前测型循环结构,首先判断条件,根据条件决定是否执行循环,执行循环的最少次数为0。其语法结构如下:while(条件){语句块;}

若条件表达式为真,则执行语句块(循环体)内包含的语句。注意:在循环体中应包含更改条件的语句,否则循环一直进行下去,成为“死循环”。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.1

while和do-while循环语句1.前测型循环结构【例4-1】输入一个正整数,利用while循环判断是否素数。分析:所谓“素数”是指除了1和该数本身,不能被其它整数整除的数。判断一个自然数n(n≥3)是否素数,只要依次用2~作除数去除n,若n不能被其中任何一个数整除,则n即为素数,如图4-2所示。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.1

while和do-while循环语句1.前测型循环结构【例4-1】输入一个正整数,利用while循环判断是否素数。

(1)编写网页界面,使用文本框对象完成数值的输入,使用按钮接受命令项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.1

while和do-while循环语句1.前测型循环结构【例4-1】输入一个正整数,利用while循环判断是否素数。

(2)在<scripttype="text/javascript"></script>标记中添加单击按钮的事件处理器test()函数其中,isNaN()函数用于检查其参数是否是非数字值。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.1

while和do-while循环语句1.前测型循环结构【例4-1】输入一个正整数,利用while循环判断是否素数。另外,事件处理器test()函数调用了判断素数的函数su(x):该函数利用while循环依次用2~作除数去除x,若有一个被整除了,就不是素数,返回false;否则是素数,返回true。

项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.1

while和do-while循环语句在某些情况下,while循环大括号内的语句块可能一次也不被执行,因为对逻辑条件表达式的运算在执行语句块之前。若逻辑条件表达式运算结果为假,则程序直接跳过循环而一次也不执行或语句块。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.1

while和do-while循环语句2.后测型循环结构若希望至少执行一次循环体,可改用do…while语句,其基本语法结构如下:do{语句块;}while(条件);首先执行语句块(循环体),然后判断条件,根据条件决定是否继续执行循环,因此执行循环的最少次数为1。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.1

while和do-while循环语句2.后测型循环结构【例4-2】输入两个正整数,求它们的最大公约数。分析:求最大公约数可以用“辗转相除法”,方法如下:①以大数m作被除数,小数n做除数,相除后余数为r。②若r≠0,则m←n,n←r,继续相除得到新的r。若仍有r≠0,则重复此过程,直到r

=

0为止。③最后的n就是最大公约数。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.1

while和do-while循环语句2.后测型循环结构【例4-2】输入两个正整数,求它们的最大公约数。

(1)编写网页界面,使用文本框对象完成数值的输入,使用按钮接受命令其中,“计算”按钮的单击鼠标事件处理器直接调用计算公约数test(m,n)函数,两个参数分别是两个文本框输入的数值。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.1

while和do-while循环语句2.后测型循环结构【例4-2】输入两个正整数,求它们的最大公约数。

(2)在<scripttype="text/javascript"></script>标记中添加计算最大公约数test(m,n)函数test()函数使用do…while循环实现参数的辗转相除,最后的余数就是最大公约数。在浏览器中打开JavaScript程序,输入两个整数,计算结果如图4-3所示。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.2

for循环语句在不知道循环内执行多少次语句时,宜用while循环。若知道要执行的循环次数时,则最好使用for循环。

与while循环不同,for循环使用一个循环变量,每重复一次循环之后,循环变量的值就会自动增加或者减少。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.2

for循环语句for循环语句按照指定的循环次数,重复执行循环体内语句(或语句块),其语法基本结构如下:for(循环变量赋初值;循环结束条件;循环变量更新){语句块;}其中“循环结束条件”为控制循环结束与否的条件表达式,程序每执行完一次循环体内语句(或语句块),均要计算该表达式是否为真,若结果为真,则继续运行下一次循环体内语句(或语句块);若结果为假,则跳出循环体。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.2

for循环语句for循环语句按照指定的循环次数,重复执行循环体内语句(或语句块),其语法基本结构如下:for(循环变量赋初值;循环结束条件;循环变量更新){语句块;}“循环变量更新”指循环变量更新的方式,程序每执行完一次循环体内语句(或语句块),均需要更新循环变量。上述循环控制参数之间使用分号“;”隔开。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.2

for循环语句【例4-3】验证“哥德巴赫猜想”。

1742年6月,德国数学家哥德巴赫(C.Goldbah1690-1764)在给彼得堡的大数学家欧拉的信中提出一个问题:

任何大于6的偶数均可以表示为两个素数之和吗?欧拉复信道:“任何大于6的偶数均可以表示为两个素数之和,这一猜想我还不能证明,但我确信无疑地认为这是完全正确的定理。”

这就是至今尚未被证明的哥德巴赫猜想。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.2

for循环语句【例4-3】验证“哥德巴赫猜想”。虽然证明或推翻“哥德巴赫猜想”决非易事,但是利用计算机可以对任意的具体偶数进行验证。算法如下:对于任意偶数n,先求出小于n的一个素数x,令y

=n

x,判断y是否素数。如果y也是素数,则输出n

=x

+y,否则另取一个小于n的素数x而找y。直至x,y均为素数为止。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.2

for循环语句【例4-3】验证“哥德巴赫猜想”。

(1)编写网页界面,使用文本框对象完成数值的输入,使用按钮接受命令

(2)在<head></head>标记中添加javascript代码,其中编写将偶数分解为两个素数之和的test(n)函数,该函数调用例4-1中的素数判断函数su(x):

(3)在浏览器中打开JavaScript程序,输入任意不小于6的偶数,计算结果如图4-4所示。注意:当输入的偶数较大时,程序运行时间可能很长。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.2

for循环语句for、while、do…while三种循环语句具有基本相同的功能,在实际编程过程中,应根据实际需要和本着使程序简单易懂的原则来选择到底使用哪种循环语句。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.3循环的嵌套通常把循环体内不含循环语句的循环称为单重(层)循环,而把循环体内含有循环语句的循环称为多重循环,或称循环的嵌套。根据嵌套的层数有二重循环、三重循环,…,多重循环等等。上面介绍的循环结构既可以单独嵌套,也可以互相嵌套,但是要注意内外循环不能交叉。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.3循环的嵌套【例4-4】可以设置行、列数的表格。在实际应用中,常常需要改变显示表格的行、列数,仅使用HTML语句就不行了,此时必须使用JavaScript命令。

(1)编写网页界面,使用文本框对象完成数值的输入,使用按钮接受命令

(2)在<head></head>标记中添加将生成表格的init(rows,cols)函数,该函数最初由页面读入时调用,之后可以被“建立表格”按钮的单击事件调用

(3)在浏览器中打开JavaScript程序,显示如图4-5所示。项目4:万年历的设计4.2

JavaScript的控制结构二:循环结构4.2.4使用break和continue进行循坏控制在循环语句中,某些情况下需要跳出循环或者跳过循环体内剩余语句,而直接执行下一次循环,此时需要通过break和continue语句来实现。break语句的作用是立即跳出循环,continue语句的作用是停止正在进行的循环,而直接进入下一次循环。例4-3中test()函数的for循环,共需要循环n/2次,当找到n的一对素数分解后已无必要继续,可以使用break跳出循环,直接输出结果。项目4:万年历的设计4.3JavaScript的Date对象在Web应用中,经常碰到需要处理时间和日期的情况。JavaScript没有一个基本的日期数据类型,JavaScript内置了核心对象Date,该对象可以表示从毫秒到年的所有时间和日期,并提供了一系列操作时间和日期的方法。在深入了解Date对象前,首先了解两个有关时间标准的概念:

GMT:格林尼治标准时间的英文缩写,指位于伦敦郊区的皇家格林尼治天文台的标准时间,该地点的经线被定义为本初子午线。理论上来说,格林尼治标准时间的正午是指当太阳横穿格林尼治子午线时的时间。项目4:万年历的设计4.3JavaScript的Date对象在Web应用中,经常碰到需要处理时间和日期的情况。JavaScript没有一个基本的日期数据类型,JavaScript内置了核心对象Date,该对象可以表示从毫秒到年的所有时间和日期,并提供了一系列操作时间和日期的方法。在深入了解Date对象前,首先了解两个有关时间标准的概念:UTC:世界协调时间的英文缩写,是由国际无线电咨询委员会规定和推荐,并由国际时间局(BIH)负责保持的以秒为基础的时间标度,相当于本初子午线上的平均太阳时。由于地球自转速度不规则,目前采用由原子钟授时的UTC作为时间标准。项目4:万年历的设计4.3JavaScript的Date对象在大多数情况下,可以假定GMT时间和UTC时间一致,电脑的时钟严格按照GMT时间运行。

JavaScript脚本中采用UNIX系统存储时间的人工方式,即以毫秒数存储内部日期。同时,脚本在读取当前日期和时间时,依赖于客户端电脑的时钟,如果客户端电脑时钟有误,将造成一定的问题。注意:为方便表述,将GMT时间1970年1月1日0点定义为GMT标准零点,下同。项目4:万年历的设计4.3JavaScript的Date对象4.3.1生成Date对象的实例通常需要显式地创建Date对象,创建新的Date对象使用关键字new和Date构造函数。

Date对象的构造函数通过可选的参数,可生成表示过去、现在和将来的Date对象。其构造方式有四种,分别如下:varMyDate=newDate();varMyDate=newDate(毫秒数);varMyDate=newDate(日期时间字符串);varMyDate=newDate(年,月,日,时,分,秒,毫秒);项目4:万年历的设计4.3JavaScript的Date对象4.3.1生成Date对象的实例varMyDate=newDate();varMyDate=newDate(毫秒数);varMyDate=newDate(日期时间字符串);varMyDate=newDate(年,月,日,时,分,秒,毫秒);语句1生成一个空的Date对象实例MyDate,可在后续操作中通过Date对象提供的诸多方法来设定其日期和时间,如果不设定则代表客户端当前日期和时间。语句2的构造函数中传入唯一参数“毫秒数”,表示构造与GMT标准零点相距指定毫秒的Date对象实例MyDate。项目4:万年历的设计4.3JavaScript的Date对象4.3.1生成Date对象的实例varMyDate=newDate();varMyDate=newDate(毫秒数);varMyDate=newDate(日期时间字符串);varMyDate=newDate(年,月,日,时,分,秒,毫秒);语句3构造一个用“日期时间字符串”指定的Date对象实例MyDate,其中日期时间字符串符合特定的格式。语句4通过具体的日期属性,如年、月等构造指定的Date对象实例MyDate。项目4:万年历的设计4.3JavaScript的Date对象4.3.1生成Date对象的实例【例4-5】用不同的构造方式生成Date对象的实例,体会“毫秒数”、“日期时间字符串”、“年,月,日,时,分,秒,毫秒”的形式。打开网页,直接单击“日期测试”按钮,程序使用第一种格式生成对象:MyDate=newDate();并输出该Date对象表示的时间与GMT标准零点相距指定毫秒数、该对象所代表的时间的字符串,如图所示。项目4:万年历的设计4.3JavaScript的Date对象4.3.1生成Date对象的实例【例4-5】用不同的构造方式生成Date对象的实例,体会“毫秒数”、“日期时间字符串”、“年,月,日,时,分,秒,毫秒”的形式。复制第二个文本框中的毫秒数,并粘贴到第一个文本框中,单击“日期测试”按钮,程序使用第二种格式生成对象:MyDate=newDate(parseFloat(x));此时生成的Date对象所表示的时间与前者相同,稍微修改毫秒数值,得到的时间字符串不变,如图所示。项目4:万年历的设计4.3JavaScript的Date对象4.3.1生成Date对象的实例【例4-5】用不同的构造方式生成Date对象的实例,体会“毫秒数”、“日期时间字符串”、“年,月,日,时,分,秒,毫秒”的形式。如果复制第三个文本框中的时间字符串粘贴到第一个文本框中,得到的时间则完全相同。如果在第一个文本框中输入具体的日期和时间,则使用第四种格式生成相应的Date对象,如图4-7所示。项目4:万年历的设计4.3JavaScript的Date对象4.3.1生成Date对象的实例【例4-5】用不同的构造方式生成Date对象的实例,体会“毫秒数”、“日期时间字符串”、“年,月,日,时,分,秒,毫秒”的形式。通过程序结果可知,上述四种构造Date对象实例的方式都能构造同样的日期对象。注意:欧美时间制中,星期及月份数都从0开始计数。如星期中第0天为Sunday,第7天为Saturday;月份中的第0月为January,第11月为December。但月的天数从1开始计数。项目4:万年历的设计4.3JavaScript的Date对象4.3.2日期与时间的获取

Date对象以目标日期与GMT标准零点之间的毫秒数来储存该日期,给程序员操作Date对象带来一定的难度。为解决这个难题,JavaScript提供大量的方法而不是通过直接设置或读取属性的方式来设置和提取日期各字段,这些方法将毫秒数转化为对用户友好的格式。常用的方法如表4-1所示。getDate()返回date对象中的月份中的天数(1-31)getDay()返回date对象中的星期中的天数(0-6)getFullYear()返回date对象中的四位数年份getHours()返回date对象中的小时数(0-23)getMilliseconds()返回date对象中的毫秒数(0-999)getMinutes()返回date对象中的分钟数(0-59)getMonth()返回date对象中的月份数(0-11)getSeconds()返回date对象中的秒数(0-59)getTime()返回date对象的时间戳表示法(毫秒表示)getTimezoneOffset()返回本地时间与用UTC表示当前日期的时间差,以分钟为单位项目4:万年历的设计4.3JavaScript的Date对象4.3.2日期与时间的获取【例4-6】电子时钟的例子,体会获取日期与时间的方法。程序的界面很简单程序运行结果如图4-8所示,并根据客户端时钟及时更新文本框内容。项目4:万年历的设计4.3JavaScript的Date对象4.3.2日期与时间的获取【例4-6】电子时钟的例子,体会获取日期与时间的方法。上述代码主要包括如下内容:

(1)MyTimer()函数:该函数首先构造空的Date对象实例nowTime,用于保存当前系统的日期信息,然后通过Date对象的各种提取日期与时间信息的方法,获得如年、月、日、时、分、秒等信息,并更改输出格式;启动定时器timerID以及时更新Date对象实例nowTime;项目4:万年历的设计4.3JavaScript的Date对象4.3.2日期与时间的获取【例4-6】电子时钟的例子,体会获取日期与时间的方法。上述代码主要包括如下内容:

(2)MyWeek(week)函数:该函数将以数值参数传入的星期转化为中文表示的星期,并把结果以字符串的形式返回;上述日期都是客户端日期,Date对象也提供了基于UTC世界标准时间提取目标日期中各字段的诸多方法,如getUTCDay()、getUTCSeconds()等。这些方法的使用过程与实例中的相同,只不过操作的基础不是客户端日期,而是UTC世界标准时间。项目4:万年历的设计4.3JavaScript的Date对象4.3.3日期与时间的设置在实际应用中,通常需要在原有的日期基础上得到新的日期,如电影中的“二十年后”等。Date对象提供一系列的设置日期与时间的方法,常用的方法如表4-2所示。setDate()设置date对象中月份的一天,并返回date对象距1970年1月1日午夜之间的毫秒数(时间戳)setFullYear()设置date对象中的年份,月份和天,并返回date对象距1970年1月1日午夜之间的毫秒数(时间戳)setHours()设置date对象的小时,分钟,秒和毫秒,并返回date对象距1970年1月1日午夜之间的毫秒数(时间戳)setMilliseconds()设置date对象的毫秒数,并返回date对象距1970年1月1日午夜之间的毫秒数(时间戳)setMinutes()设置date对象的分钟,秒,毫秒,并返回date对象距1970年1月1日午夜之间的毫秒数(时间戳)setMonth()设置date对象中月份,天,并返回date对象距1970年1月1日午夜之间的毫秒数(时间戳)setSeconds()设置date对象中月份的一天,并返回date对象距1970年1月1日午夜之间的毫秒数(时间戳)setTime()使用毫秒数设置date对象,并返回date对象距1970年1月1日午夜之间的毫秒数(时间戳)项目4:万年历的设计4.3JavaScript的Date对象4.3.3日期与时间的设置【例4-7】设置Date对象的例子,体会设置日期与时间的方法。程序的界面较简单,使用了表格规范输出项目4:万年历的设计4.3JavaScript的Date对象4.3.4日期与时间的输出

Date对象提供如toString()、toGMTString()、toLocalString()等方法将日期转换为字符串,而不需要开发人员编写专门的函数实现该功能。toDateString()返回date对象的日期部分的字符串表示toTimeString()返回date对象的时间部分的字符串表示toString()返回date对象的字符串表示toLocaleDateString返回date对象的日期部分的本地化字符串表示toLocaleTimeString返回date对象的时间部分的本地化字符串表示toLocaleString返回date对象的本地化字符串表示toGMTString()返回date对象的格林威治时间(GMT)的字符串表示toUTCString返回date对象的世界标准时间(UTC)的字符串表示项目4:万年历的设计4.3JavaScript的Date对象4.3.4日期与时间的输出如下代码:functionMyTest(){

varMyDate=newDate();

varmsg="日期与时间转化为字符串:\n\n";

msg+="本地日期toString():"+MyDate.toString()+"\n";

msg+="本地日期toLocalString():"+MyDate.toLocaleString()+"\n";

msg+="GMT世界时间toGMTString():"+MyDate.toGMTString()+"\n";

msg+="UTC世界时间toUTCString():"+MyDate.toUTCString()+"\n";

alert(msg);}运行结果如图4-10所示。项目4:万年历的设计4.3JavaScript的Date对象4.3.4日期与时间的输出从程序结果可以看出,toString()和toLocaleString()方法返回表示客户端日期和时间的字符串,但格式大不相同。

实际上,toLocaleString()方法返回字符串的格式由客户设置的日期和时间格式决定,而toString()方法返回的字符串遵循以下格式:Thu

Jan2612:12:34UTC+08002012由于目前UTC已经取代GMT作为新的世界时间标准,后面两种将日期转化为字符串的方法toGMTString()和toUTCString()返回的字符串格式、内容均相同。项目4:万年历的设计4.3JavaScript的Date对象4.3.4日期与时间的输出【例4-8】综合利用Date对象的方法设计的最简格式计时器。按照“小时:分钟:秒钟”格式输出通常需要分别获取时间变量的小时数、分钟数和秒钟数,还要判断分钟和秒钟为几位数,并做处理。使用综合利用Date对象的格式输出等方法,可以非常简单地完成。项目4:万年历的设计4.4万年历的设计4.4.1网页万年历的界面设计万年历的界面设计主要分为两个部分:日历与选定日期显示区,其中的日历显示区使用表格实现,选定日期显示区使用网页区块<span></span>实现。项目4:万年历的设计4.4万年历的设计4.4.1网页万年历的界面设计万年历的界面设计主要分为两个部分:日历与选定日期显示区,其中的日历显示区使用表格实现,选定日期显示区使用网页区块<span></span>实现。而日历显示区又分为“年份、月份选择区”、“星期标题行”和“月历显示区”三部分,前两部分由两个子表实现,第三个使用网页区块<span></span>实现。

编写步骤如下:年份、月份选择区星期标题行

月历显示区选定日期显示项目4:万年历的设计4.4万年历的设计4.4.1网页万年历的界面设计

(1)页面包含一个三行一列的主表和一个<span>区块

(2)在主表的第一行仅有的单元格里增加一个一行四列的子表,分别放置左方向、年份值、右方向、月份选择列表框;第二行的仅有单元格里增加一个一行七列的子表,放置一周中的七个星期名。其中代码:onload="init()"用于读入网页后调用初始化函数。项目4:万年历的设计4.4万年历的设计4.4.2网页万年历的应用逻辑设计在万年历的应用逻辑设计中,最重要的步骤是根据选定的年份和月份确定相应的日历排放方式,其本质是选定月份的首日位置确定,即首日是周几的确定。其应用逻辑流程图如图4-13所示。项目4:万年历的设计4.4万年历的设计4.4.2网页万年历的应用逻辑设计在<head></head>标记中添加<script>标记,其中编写JavaScript代码。

(1)网页的初始化函数init:function

init(){

SetMonth.options[The_Month

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论