JavaScript脚本的使用Word文件下载.docx

1、要编写JavaScript程序，一般可按下面的三步进行：第一步：选用编辑器，设计网页的编辑器都可以使用，如记事本、Dreamweaver等。第二步：在Web页面内加入JavaScript代码，JavaScript程序嵌入在HTML文档中的javascript 和标记之间，理论上可以将JavaScript语句放置在HTML文档中的任何位置，然后将核心脚本语句放置在之间是一个良好的编程习惯，因为这确保了所有代码在从部分调用之前被阅读和执行。第三步：将HTML文档保存为扩展名是.html或.htm的文件，然后使用浏览器就可以看到JavaScript程序运行效果。打开Dreamweaver，新建一网页

2、文件，并保存为js.html，打开代码视图，输入以下代码：htmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /titleJavaScript脚本的基本结构javascriptvar count=0; /定义变量并初始化document.write（）; /屏幕输出“上海世博欢迎您！”for（i=0;i上海世博欢迎您！/h1 /屏幕输出标题1格式的“上海世博欢迎您！/headbody这是属于BODY的内容/body/html保存文档，按F12浏览效果，如图10.1所示。图10.1使用JavaScript脚本

3、的基本结构10.1.2 使用JavaScript基本语法编写一个简易计算器下面通过学习一个简易的计算器学习JavaScript中自定义函数的创建使用方法以及表单元素的获取，效果如图10.2所示。图10.2简易计算器1. 新建表单网页calc.html，并为表单及各个表单元素命名，如图10.3所示。图10.3简易计算器表单设计其HTML代码如下：HTMLMETA http-equiv= charset=gb2312TITLE计算器FORM action= method=post name=myform id=TABLE border=0 bgcolor=#C9E495 align=center

4、TD colspan=4H3IMG src=images/shop.gif width=54 height= 购物简易计算器/TD/TRTD第一个数第二个数subButton2 mulButton2 divButton2 计算结果/FORM/BODY/HTML2. 自定义函数在JavaScript中，分别有内置函数和自定义函数，其中内置函数可在脚本任意位置随时调用（如alert函数）；自定义函数则必须先定义，然后才可以调用。在JavaScript中自定义函数的语法如下：function 函数名称（参数1，参数2，） 语句；其中，function是定义函数的关键字，函数名称最好定义成一个“见名知

5、义”的合法的标识符。参数列表是传递给函数使用或操作的值，其值可以是常量、变量或其他表达式。函数可以没有任何参数，但仍然必须保留小括号，如下所示：function 函数名称（ ） 函数的定义放在与之间。表单元素值的获取代码： document.表单名.表单元素名称.value;在下面添加脚本代码：SCRIPT language=function compute（op） /op为形式参数，它代码运算符号 var num1,num2; /定义变量num1=parseFloat（document.myform.txtNum1.value）; /将“第一个数”的文本框的值获取并转化为浮点数赋值到变量nu

6、m1中num2=parseFloat（document.myform.txtNum2.value）; /将“第二个数”的文本框的值获取并转化为浮点数赋值到变量num2中if （op=+） /判断参数值是“+”document.myform.txtResult.value=num1+num2 ; /将两个变量累加的值赋值到“计算结果”的文本框中-） /判断参数值是“-”document.myform.txtResult.value=num1-num2 ; /将两个变量相减的值赋值到“计算结果”的文本框中*） /判断参数值是“*”document.myform.txtResult.value=nu

7、m1*num2 ; /将两个变量相乘的值赋值到“计算结果”的文本框中/ & num2!=0） /判断参数值是“/”同时num2变量不等于0document.myform.txtResult.value=num1/num2 ; /将两个变量相除的值赋值到“计算结果”的文本框中3. 调用函数要执行一个函数，必须先调用这个函数，要调用函数，必须指定函数名及其后面的参数列表（前提是有参数）。函数的调用一般和表单元素的事件一起使用，调用格式如下：事件名=“函数名（）”；在“+”、“-”、“”、“/”四个命令按钮属性中调用函数，当鼠标单击命令按钮时调用函数，添加调用命令后的运算按钮代码： onClick=

8、compute（+）-*/至此，一个简易的计算器设计完成，保存文件，F12浏览效果。10.2 JavaScript常用对象应用10.2.1为网页编写一个日期显示的脚本由于要用日期和时间和显示问题，所以要用到日期对象Date，要求时间能按秒钟显示动态效果，要用定时器setTimeout（）方法。其中，日期对象是存储新Date对象的变量，下面为网页添加一个显示日期时间和脚本代码：无标题文档text/javascriptfunction reloop（）var time = new Date（ ）; /获得当前时间/获得年、月、日，Date（）函数中的月份是从011计算var year = time

9、.getYear（）;var month = time.getMonth（）+1;var date = time.getDate（）; /获得小时、分钟、秒var hour = time.getHours（）;var minute = time.getMinutes（）;var second = time.getSeconds（）;/获得一个星期中的第几天,西方的星期是从星期日开始，星期六结束var day = time.getDay（）;if （minute 10） /如果分钟只有1位，补0显示minute=+minute;if （second 12） /按12小时制显示hour=hour-

10、12;apm=PM ;var weekday = 0;switch（time.getDay（）case 0:weekday = 星期日break;case 1:星期一case 2:星期二case 3:星期三 break; case 4:星期四case 5:星期五case 6:星期六document.myform.time.value=今天是:+year+年+month+月+date+日+weekday+hour+:+minute+second+apm; setTimeout（reloop（）,1000）;/每秒钟调用一次函数reloop（）STYLE type=text/css/*设置样式：无

11、边框的文本框*/INPUT font-size: 30px; border-style:none ;background-color:#FF8B3B; /STYLEBODY onLoad=form name=INPUT id=ttime40/form保存网页，按F2浏览网页效果，如图10.4所示，显示的日期和时间与电脑中的内置时间相同。图10.4显示日期和动态时钟10.2.2 设计弹出窗口1. 熟悉window常用方法网站中有各种各样的弹出窗口，如网站公告，网站广告等，这就需要使用window对象的各种常用属性、方法和事件。window对象的常用方法，如表10.1所示。表10.1window常

12、用方法名称说明alert （提示信息）显示一个带有提示信息和确定按钮的对话框 confirm（提示信息“）显示一个带有提示信息和确定、取消按钮的对话框 open（url,namefeature打开具有指定名称的新窗口，并加载给URL 所指定的文档；如果没有提供URL，则打开一个空白文档close （ ）关闭当前窗口setTimeout（函数,毫秒数） 设置定时器：经过指定毫秒值后执行某个函数 2. 熟悉window窗口特征制作网页弹出窗口的语法：open（“打开窗口的url ”, “ 窗口名 ”, “ 窗口特征 ”）其中窗口特征属性如表10.2所示。表10.2窗口特征属性height窗口高度w

13、idth窗口宽度toolbars浏览器工具栏是否显示，yes或1为显示，no或0为不显示scrollbars是否显示滚动条menubar表示菜单栏是否显示location是否显示地址栏，yes或1为显示，no或0为不显示status是否显示状态栏，yes或1为显示，no或0为不显示resizable是否改变窗口的大小，yes或1为是，no或0为否3. 设计网页弹出窗口设计思路：打开首页的时候弹出一个大小固定，无滚动条、无菜单栏、无地址栏的广告窗口，主页的状态栏显示“上海世博欢迎您！”，效果如图10.5所示。图10.5自动弹出广告窗口操作方法：1） 在站点中创建主页index.html，为方便之

14、见，我们用插入图片表示首页。2） 在站点中创建一张广告网页adv.html，网页标题为“中国国家馆”，效果如图10.6所示。图10.6广告页面3） 添加弹出窗口的JavaScript脚本。世博网下面添下如下代码：function openwindow（ ） window.status= /状态栏显示“上海世博欢迎您！adv.html,中国馆, toolbars=0, location=0, statusbars=0, menubars=0,width=500,height=250,scrollbars=04） 调用函数由于要打开主页时自动弹出广告窗口，调用命令为网页加载事件onload。中添加

15、脚本调用命令：body onLoad=openwindow（ ）保存网页，按F12浏览效果。10.3 用JavaScript设计网页浮动广告网站中经常除了弹出广告窗口之外，通常还有随滚动条移动的广告以及在网页中飘浮的广告，这就要使用window对象下的子对象document对象，制作浮动广告主要涉及到document对象中的getElementById（）方法的应用，getElementById（）是根据HTML元素指定的ID，获得唯一一个HTML元素，如访问DIV层对象、图片img对象等。 10.3.1 设计随滚动条移动的浮动的广告1. 任务分析使用DIV层和JavaScript可以实现，先

16、在页面中添加一个层，并把图片放在层中，然后使用JavaScript控制层的位置坐标，让其随滚动条同步移动，并且总保持层位于页面的左上角，如图10.7所示。图10.7广告图片位于页面左侧2. 实现过程：1） 在dreamweaver中打开index.html，单击【布局】中“绘制 AP Div”按钮，在网页的左侧插入一个层，并设置层的相关属性，属性值如图10.8所示。图10.8设置层的属性2） 切换到代码窗口，将层的属性修改为style=“”。当网页中插入层时dreamweaver会自动生成的样式代码：#advleft position:absolute;left:15px;top:40px;w

17、idth:166px;height:335;z-index:1;我们必须剪切advleft中的样式代码，然后复制到对应的div id=advleft的style属性中，即将其修改为： style=，中间的回车符不去也可以，注意层的宽度和高度应与插入的广告图片大小保持一致，最后去掉内嵌样式剩下的代码。注意：如果要在网页的右侧设计一个浮动广告，只要将上面代码中的“left”改变“right”即可。3） 在层中插入广告图片logo3.jpg。4） 编写JavaScrip脚本代码var initTop1 = 0;function init（ ） /获取广告层的上边距的初始值initTop1=docum

18、ent.getElementById（）.style.pixelTop;function move（ ）/使广告图片层与滚动条同步移动document.getElementById（）.style.pixelTop=initTop1+document.body.scrollTop ; window.onscroll=move ; /窗口的滚动事件，当页面滚动时调用move（ ）函数5） 调用函数其中init（ ）在网页加载时调用，即在中添加调用代码后为body onload=init（ ），也就是能在网页加载时获取广告图片的初始位置；move（ ）函数的在页面滚动时调用，即可以用代码windo

19、w.onscroll=move ; 来调用函数。至此，与滚动条同步移动的广告设计完成，保存文档，按F12浏览网页效果，即可实现广告图片随滚动条同步移动，并且总保持同一个位置，如图10.9所示。图10.9广告图片与滚动条同步移动 10.3.2 带关闭按钮的浮动窗口当我们在打开网站时，如果广告图片太多，会让浏览者感觉到很烦，如果给广告带上关闭的按钮，当用户用鼠标单击此按钮时广告层就可以隐藏起来，要实现此功能，只要在上述的广告层中插入一个子层，并把关闭图片插入其中，然后给“关闭图片”所在的层添加鼠标单击事件，当鼠标单击的时候，调用相关方法来关闭广告层即可。2. 实现过程1） 在dreamweaver打开10.3.1中带有随滚动条移动的广告网页，在层advleft中插入子层closeleft。参考父层advleft的修改方法，将其样式代码，然后复制到对应的cloesleft的style属性中3） 在子层cloesleft中插入关闭图片close.gif，并调整层的大小，使其与关闭图片大小相同，如图所示，修改后的广告层代码：img src=logo3.jpg174335closeleft92px;19px; 72px;31