《网页前端技术-电子教案-王敏杰 模块三任务一》由会员分享，可在线阅读，更多相关《网页前端技术-电子教案-王敏杰 模块三任务一（39页珍藏版）》请在金锄头文库上搜索。
1、,教学目的：了解什么是表单 了解表单的属性 掌握各种按钮的用法 掌握各种文本框的类型 教学重点：了解表单的属性 掌握各种按钮的用法 掌握各种文本框的类型 教学难点：掌握各种按钮的用法 掌握各种文本框的类型,实际就是在Title栏中滚动显示内容，即根据时间的不同，页面的Title显示不同的内容,了解JavaScript概述 JavaScript的特点,1.JavaScript概述,是一种基于对象和事件驱动的客户端脚本语言 ECMAScript：语言的基本语法和对象 DOM：作用于网页内容的方法和接口 BOM：与浏览器交互的方法和接口,JavaScript语言概况,什么是JavaScript,向H
2、TML页面添加交互行为 一种脚本语言 数行可执行计算机代码组成 直接嵌入HTML页面 一种解释性语言 无需购买即可使用,JavaScript功能,为HTML设计师提供了一种编程工具 可以将动态的文本放入HTML页面 可以对事件作出响应 可以读取和改变HTML元素内容 验证数据 检测访问者的浏览器 创建cookies,JavaScript应用,客户端应用 服务器端应用,第一个JavaScript程序, alert(“欢迎进入这个美妙的JavaScript世界！“); alert(“今后我们将共同学习JavaScript知识！“); ,显示效果:,这段程序一共弹出两个消息窗口，第一个为：,点击第一
3、个消息弹出窗口的“确定”按钮后，弹出第二个窗口，如下：,JavaScript文件的特点,是HTML文档，是标准的HTML格式 程序代码是可用字处理软件浏览的文本，出现在HTML相关区域 之间可加入脚本 写成type=“text/javascript“ alert()窗口对象方法 ，常用调试程序 通过标识说明 单行注释（/）,JavaScript的特点,简单性 动态性 基于对象的语言 安全性 跨平台性 节省CGI的交互时间,JavaScript语法,ECMAScript变量命名 ECMAScript变量类型 每行结尾的分号最好写上 ECMAScript注释 括号表示代码块, document.w
4、rite(“这个例子是让大家对Document对象有一个初步“+ “了解!“) document.title =设置文档标题等价于HTML的标签 document.bgColor=“#FFFF66“ document.fgColor = “#FF0000“ document.linkColor = “#0000CC“ document.vlinkColor = “#0FFF66“ document.write(“),document.write(“document.write()添加文字的显示样式。“) document.write(“) 您还可以找到 MSDN上有关 ASP.NET 的文档。
5、 ,3.Javascript函数,函数是一组可以随时随地运行的语句 函数是ECMAScript的核心 基本语法 function functionName(arg0,arg1,argN) statements ,函数调用,可以通过其名字加上括号中的参数进行调用 function sayHi(sName, sMessage) alert(“Hello “ + sName + sMessage); sayHi(“David“, “ Nice to meet you!“); ,返回函数值,函数确实有值，但不必明确地声明 使用return运算符后面跟上要返回的值 function sum(iNum1,
6、 iNum2) return iNum1 + iNum2; ,案例步骤, var text=document.title var timerID function newtext() 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() ,显示效果,在JavaScript中也有基本的运算，这
7、个案例中就以水波文字的效果来学习运算。,JavaScript中的运算符是可以完成操作的一系列符号。有+、-、*、/、!=、=、！、|、|、+=,JavaScrip运算,算术运算符 + 、+ 、-、-、*、/、%、+= 逻辑运算符 &、|、！、?: 比较运算符 =、!=、=、=,案例步骤 水波文字效果 , var step=3; var xstep=0; var msg=飞流直下三千尺，疑是银河落九天！; water.innerHTML=msg function wave() document.all.water.style.filter=wave(freq=3,strength=5,+phas
8、e=+xstep+, lightstrength=45, add=0, enabled=1); xstep+=step; TIMER=setTimeout(wave(),10); ,显示效果,在JavaScript中我们也会用到程序控制语句，像其它的编程语言一样，这里我们用在页面中输入的年月日是否正确来学习控制语句。,程序控制语句可以使得整个程序减小混乱。,JavaScript程序语句IF语句,if (表达式) 语句段1； else 语句段2； ,JavaScript程序语句IF应用, Javascript程序控制流IF语句应用 var activedate=new Date(); activ
9、ehour=activedate.getHours() if (activehour=6 & activehour“) else if(activehour=12 & activehour“) else if(activehour=18 & activehour“) else if(activehour=24 | activehour“) ,JavaScript程序语句FOR循环,for (初始化；条件；增量) 语句集,JavaScript程序语句FOR循环应用, Javascript程序FOR语句应用 var i=1; var j=1; for (i=1;i“); ,JavaScript程序
10、语句while循环语句,while （条件） 语句集；,JavaScript程序语句while循环语句应用, Javascript程序while语句应用 var i=1; var j=1; while (i“); i+; ,JavaScript程序语句DO WHILE,do 语句集； while （条件）；,JavaScript程序语句DO WHILE应用, Javascript程序dowhile语句应用 var i=1; var j=1; do j=1; do document.write(i+“*“+j+“=“+ (i*j)+“ “); j+; while(j“); i+; while(i ,JavaScript程序语句 Break和Continue,break命令可以终止循环的运行，然后继续执行循环之后的代码（如果循环之后有代码） continue命令会终止当前的循环，然后从下一个值继续运行,JavaScript程序语句SWITCH,switch (expression) case label: statementlist case label: statementlist default: statementlist ,
