JavaScript讲义 任务一

JavaScript任务一认识Javascript案例分解案例资讯Title栏滚动特效水波文字效果页面中输入的年月日是否正确JavaScript概述JavaScript基本语法JavaScript函数JavaScript运算JavaScript程序控制语句案例资讯案例一Title栏滚动特效实际就是在Title栏中滚动显示内容，即根据时间的不同，页面的Title显示不同的内容我们先了解一下JavaScript概述、JavaScript的特点1JavaScript概述是一种基于对象和事件驱动的客户端脚本语言ECMAScript：语言的基本语法和对象DOM：作用于网页内容的方法和接口BOM：与浏览器交互的方法和接口JavaScript语言概况什么是JavaScript向HTML页面添加交互行为一种脚本语言数行可执行计算机代码组成直接嵌入HTML页面一种解释性语言无需购买即可使用JavaScript功能为HTML设计师提供了一种编程工具可以将动态的文本放入HTML页面可以对事件作出响应可以读取和改变HTML元素内容验证数据检测访问者的浏览器创建cookiesJavaScript应用客户端应用服务器端应用第一个JavaScript程序htmlheadScripttype=text/JavaScriptalert(欢迎进入这个美妙的JavaScript世界！);alert(今后我们将共同学习JavaScript知识！);/Script/head/html显示效果:这段程序一共弹出两个消息窗口，第一个为：点击第一个消息弹出窗口的“确定”按钮后，弹出第二个窗口，如下：JavaScript文件的特点是HTML文档，是标准的HTML格式程序代码是可用字处理软件浏览的文本，出现在HTML相关区域script/script之间可加入脚本写成type=text/javascriptalert()窗口对象方法，常用调试程序通过!--//--标识说明单行注释（//）JavaScript的特点简单性动态性基于对象的语言安全性跨平台性节省CGI的交互时间JavaScript语法ECMAScript变量命名ECMAScript变量类型每行结尾的分号最好写上ECMAScript注释括号表示代码块Scripttype=text/JavaScriptdocument.write(这个例子是让大家对Document对象有一个初步+了解!br/)document.title='设置文档标题等价于HTML的title标签‘document.bgColor=#FFFF66“document.fgColor=#FF0000“document.linkColor=#0000CC“document.vlinkColor=#0FFF66“document.write(pstyle='font-size:20pt;+color:#FF0066;background-color:#00FFCC;')document.write(document.write()添加文字的显示样式。)document.write(/p)/Script/Headbodyp您还可以找到ahref==152368title=“MSDNASP.NET文档”MSDN上有关ASP.NET的文档/a。/body3Javascript函数函数是一组可以随时随地运行的语句函数是ECMAScript的核心基本语法functionfunctionName(arg0,arg1,…argN){statements}函数调用可以通过其名字加上括号中的参数进行调用htmlbodyscripttype=text/javascriptfunctionsayHi(sName,sMessage){alert(Hello+sName+sMessage);}sayHi(David,Nicetomeetyou!);/script/body/html返回函数值函数确实有值，但不必明确地声明使用return运算符后面跟上要返回的值functionsum(iNum1,iNum2){returniNum1+iNum2;}注：如果函数无明确的返回值，或调用了没有参数的return语句，那么它真正返回的值是undefined。案例步骤scripttype=text/javascriptvartext=document.titlevartimerIDfunctionnewtext(){clearTimeout(timerID)document.title=text.substring(1,text.length)+text.substring(0,1)text=document.title.substring(0,text.length)timerID=setTimeout(newtext(),100)}newtext()/script显示效果案例资讯案例二水波文字效果在JavaScript中也有基本的运算，这个案例中就以水波文字的效果来学习运算。JavaScript中的运算符是可以完成操作的一系列符号。有+、-、*、/、!=、==、！、|、||、+=JavaScrip运算算术运算符+、++、-、--、*、/、%、+=逻辑运算符&&、||、！、?:比较运算符==、!=、、=、、=案例步骤htmlheadtitle水波文字效果/title/headbodybgcolor=#CCFFFFonLoad=if(document.all)wave()centerdivid='water'style='position:relative;width:400px;height:150px;font-family:Verdana;font-size:50px;color:#8080ff'/div/centerscripttype=text/javascriptvarstep=3;varxstep=0;varmsg='飞流直下三千尺，br疑是银河落九天！';water.innerHTML=msgfunctionwave(){document.all.water.style.filter='wave(freq=3,strength=5,'+'phase='+xstep+',lightstrength=45,add=0,enabled=1)';xstep+=step;TIMER=setTimeout('wave()',10);}/script/html显示效果案例资讯案例三页面中输入的年月日是否正确在JavaScript中我们也会用到程序控制语句，像其它的编程语言一样，这里我们用在页面中输入的年月日是否正确来学习控制语句。程序控制语句可以使得整个程序减小混乱。JavaScript程序语句——IF语句if(表达式)语句段1；……else语句段2；……JavaScript程序语句——if应用htmlheadtitleJavascript程序控制流IF语句应用/titlescripttype=text/javascriptvaractivedate=newDate();activehour=activedate.getHours()if(activehour=6&&activehour12){document.write(上午好！+br)}elseif(activehour=12&&activehour18){document.write(下午好！+br)}elseif(activehour=18&&activehour24){document.write(晚上好！+br)}elseif(activehour==24||activehour6){document.write(凌晨好！+br)}/script/headbody/body/htmlJavaScript程序语句——FOR循环for(初始化；条件；增量)语句集JavaScript程序语句—for循环应用htmlheadtitleJavascript程序FOR语句应用/titlescripttype=text/javascriptvari=1;varj=1;for(i=1;i=9;i++){for(j=1;j=i;j++){document.write(i+*+j+=+(i*j)+);}document.write(br);}/script/headbody/body/htmlJavaScript程序语句—while循环语句while（条件）语句集；JavaScript程序语句—while循环语句应用htmlheadtitleJavascript程序while语句应用/titlescripttype=text/javascriptvari=1;varj=1;while(i=9){j=1;while(j=i){document.write(i+*+j+=+(i*j)+);j++;}document.write(br);i++;}/script/headbody/body/htmlJavaScript程序语句——DOWHILEdo{语句集；}while（条件）；JavaScript程序语句——DOWHILE应用htmlheadtitleJavascript程序dowhile语句应用/titlescripttype=text/javascriptvari=1;varj=1;do{j=1;do{document.write(i+*+j+=+(i*j)+);j++;}while(j=i)document.write(br);i++;}while(i=9)/script/headbody/body/htmlJavaScript程序语句——Break和Continuebreak命令可以终止循环的运行，然后继续执行循环之后的代码（如果循环之后有代码）continue命令会终止当前的循环，然后从下一个值继续运行JavaScript程序语句——SWITCHswitch(expression){caselabel:statementlistcaselabel:statementlist……default:statementlist}