第7章 JavaScript语言

第七章JavaScript与Dreamweaver7.1JavaScript语言基础7.1.1javaScript的概念JavaScript是Sun公司和Netscape公司合作推出的一种描述性脚本语言，可以嵌入HTML文件中，无须编译即可在浏览器中运行特点：是一种脚本语言基于对象的语言简单性、安全性动态性与跨平台性编写第一个JavaScript脚本例：7-1.htmscriptlanguage=“javascript”!--alert(“hello,world!”);//--/scriptJavaScript与Java的区别Java是Sun公司推出的新一代完全面向对象的程序设计语言，支持类和继承，主要应用于网络程序设计；JavaScript只是基于对象的，用于编写网页中的脚本。Java程序需要编译，用Java虚拟机执行；JavaScript源代码无须编译，由浏览器解释执行。Java程序可以单独执行，但JavaScript程序只能嵌入HTML中，不能单独运行。Java程序的编辑、编译需要专门的开发工具；JavaScript不需要特殊的开发环境，一般的文本编辑器即可。7.1.2JavaScript编程基础1.JavaScript程序的编辑和调试编辑：文本编辑器嵌入到HTML文件中的方法使用Script/Script标记Scriptlanguage=“JavaScript”/Script例7-1.htm将JavaScript程序以扩展名“.js”单独存放，再引入：Scriptsrc=“***.js”/script例7-2.htm注意：JavaScript大小写敏感语句后用“;”结束注释符号单行注释：//这里是注释内容多行注释：/*这里是注释内容*/2.常量和变量常量：整型、实型、布尔型、字符型、空值Null、特殊字符变量：整数、字符串、布尔型、实型变量的声明：VARmytestVARmytest=“thisisabook”注意：变量名以字母开头，由字母、数字、_组成变量名区分大小写3.运算符和表达式运算符：赋值运算符：=+=-=*=/=%=算术运算符：+-*/%++--逻辑运算符：&&||!关系运算符：====!=表达式：条件表达式：（条件）?A:B4.函数定义函数：Function函数名称（参数表）{函数执行部分;Return表达式;}例7-3.htm调用函数：函数名（参数表）例7-4.htm函数调用：scriptlanguage=javascript!--x=3;y=f(x);document.write(y);//--/script函数定义：scriptlanguage=javascript!--functionf(y){varx=y*y;returnx;}//--/script5.程序控制结构ifswitchforwhiledo…whilebreakcontinue（1）if语句if（条件）{执行语句}else{执行语句}hour=13;if(hour12)document.write(Goodmorning);elseif(hour18)document.write(Goodafternoon);elsedocument.write(Goodevening);例：7-5.htm（2）Switch语句Switch(expression){Caselabel1:语句块1；Caselabel2:语句块2；Default:语句块N；}scriptlanguage=javascriptvard=newDate();theDay=d.getDay();switch(theDay){case5:document.write(FinallyFriday);break;case6:document.write(SuperSaturday);break;case0:document.write(SleepySunday);break;default:document.write(I'mlookingforwardtothisweekend!);}/script例：7-6.htm（3）For语句：For(初始化部分；条件部分；更新部分){语句块；}Sum=0for(i=0;i6;i++)Sum+=3;Document.write(sum);（4）while语句while(条件){语句块；}i=0;while(i6){++i;Document.write(i+”br”);}（5）Do…while语句Do{语句块；}while(条件)i=0;Do{++i;Document.write(i+“br”);}while(i6)（6）break语句打断整个循环，并继续执行循环后面的代码scriptlanguage=javascriptvari=0for(i=0;i=10;i++){if(i==3)break;document.write(Thenumberis+i);document.write(br);}/script例：7-7.htm（7）continue语句将打断当前这次循环，而继续执行下一个循环值scriptlanguage=“javascript”vari=0for(i=0;i=10;i++){if(i==3)continue;document.write(”Thenumberis”+i);document.write(”br”);}/script例：7-8.htm6.事件的概念事件是浏览器响应用户操作的机制，JavaScript的事件处理功能可改变浏览器响应这些操作的方式，开发出更具有交互性并易使用的页面。事件说明用户与web页面交互操作时产生的操作。响应某个事件，而进行的处理过程称为事件处理，进行这种处理的代码称为事件处理器。例如：链接(Link)事件窗口(window)事件图形(Image)事件窗体(Form)事件常用事件表实例：onclick：7-9.htmonchange：7-10.htmonselect：7-11.htmonfocus：7-12.htmonblur：7-13.htmonload：7-14.htmonunload：7-15.htmonmouseover：7-16.htmonmouseout：7-16.htmonsubmit：7-17.htm7.2JavaScript的对象7.2.1浏览器对象Navigator：Window对象：Location对象：Document对象：History对象：1.Navigator对象Appname：浏览器名称Appversion：浏览器的版本号Appcodename：浏览器的代码名称例：7-18.htm2.Window对象Open(url,windowname,parameterlist)：打开浏览器窗口Close()：关闭窗口Alert()：消息框Confirm()：确认框Prompt()：提示框打开浏览器窗口语法：window.open(url,窗口名称,参数列表)参数：Height：窗口的高度Width：窗口的宽度Top：窗口距屏幕上方的象素值Left：窗口距屏幕左侧的象素值Toolbar：窗口是否显示工具栏（yes|no）Menubar：窗口是否显示菜单栏（yes|no）Scrollbars：窗口是否显示滚动条（yes|no）resizable：窗口大小是否根据文字多少变化，0为固定，1为变化Location：窗口是否显示地址栏（yes|no）Status：窗口是否显示状态栏信息（yes|no）例：7-19.htmahref=#onclick=window.open('曲师大','width=425,height=450,top=80,left=150,menubar=no,scrollbars=no')曲阜师范大学/aWindow.close()例：closewindow.htm超连接方式：ahref=“javascript:window.close()”关闭窗口/a按钮方式：INPUTtype=“button”value=“关闭”onclick=“window.close()3.Location对象Window.location.href=“…”例：7-20.htm4.Document对象Anchor锚对象Links链接对象Form窗体对象例：7-21.htm5.History对象History.go(-1)后退History.go(1)前进History.go(0)刷新例：7-22.htm7.2.2内置对象String对象Math对象Date对象Array对象Event对象访问方法：对象名.属性名称对象名.方法名称（参数表）时间对象Varcurr=newDate();方法：getDategetDaygetHoursgetMinutesgetMonthgetSecondsgetTimegetYear例：7-23.htm数学对象Math.数学函数（参数）字符串对象：例7-25.htm数组对象：例7-26.htm例：7-24.htm7.3Dreamweaver中的行为7.3.1行为概述行为是一种事件和动作的组合，事件激发一个动作产生一定特殊效果，用户不用编写代码就可以轻松作出各种功能效果。动作是用JavaScript预先编好的功能，如打开浏览器窗口、播放声音等。事件是由浏览器在响应用户动作的时候引发的。1．行为面板事件列表：显示设置的事件动作列表：添加行为：删除行为：2．常用的事件onAbort：浏览器正载入图像，用户停止浏览器的运行onChange：改变了页面上的一个值onClickonDblClickonKeyDownonKeyUponKeyPress：按下并释放onLoad：图像或页面完成载入时产生的事件onMouseDownonMouseUp：释放鼠标键onMouseMove：光标指向一个特定元素onMouseOut：光标移出特定元素边界onMouseOver：光标移动到特定元素上面onScroll：上翻滚动条或下翻滚动条onSelect：在文本区域选定文本时onSubmit：提交一个表单时onUnload：离开当前页面时3．附加行为行为可以附加给整个文件（body）也可以附加给链接、图像、表单元素。附加行为过程：选择一个对象打开行为面板，选定对象的HTML标签出现在行为面板标题栏中从附加行为中选择一个动作动作默认事件出现在列表中，根据需要更改事件7.3.2使用Dreamweaver自带的动作1．调用JavaScript【例】7-32.htm返回按钮：history.go(-1)2．改变属性改变某个对象属性的值，如层的背景色、表单的动作。3．检查浏览器4．检查插件【例】7-33.htm5．控制shockwave或flash【例】7-34.htm6．拖动层允许用户在浏览器拖动层，一般与body对象相连，使用onLoad事件【例】7-35.htm7．转到URL8．打开浏览器窗口页面载入时打开新窗口、单击对象打开【例】7-36.htm9．弹出信息弹出一个显示指定消息的JavaScript警告对话框，如单击按钮、图片、页面载入【例】7-37.htm10．设置状态栏文本11．交换图像12．检查表单【例】7-38.htm13.下拉菜单[例]7-39.htm