HTML5网页编程教案
- 格式：doc
- 大小：4.66 MB
- 文档页数：119
《HTML5网页编程》教案教案首页翻转课堂教学设计教学内容一、学习目标掌握脚本的基本结构(Script标签)简单记忆基本语法变量的定义与赋值数据类型与转换parseFloat等运算符和控制语句同Java二、什么是JavaScript<HTML><HEAD><TITLE>脚本的基本结构</TITLE><SCRIPT language="javascript">var count=0;document.write("淘宝网欢迎您！");for(i=0;i<5;i++)document.write("<H2>淘宝网欢迎您！</H2>"); </SCRIPT></HEAD><BODY><H1> BODY部分的内容</H1></BODY></HTML>三、语法：变量的声明和赋值“var”－用于声明变量的关键字“count”－变量名运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别：算术运算符+、-、 * 、 / 、%、++、--、-(求反)比较运算符==、!=、>、>=、<、<=逻辑运算符&&、||、！if条件语句switch多分支语句for、while循环语多行注释以 /* 开始，以 */ 结束，符号 /*…… */ 指示中间的语句是该程序中的注释。
例如：/*helloWorld.html第一个JavaScript程序*/<!-注释内容->单行注释以 // 开始，以行末结束例如：<SCRIPT language=“javascript”> //表示JavaScript代码的开始parseInt (String)将字符串转换为整型数字如: parseInt (“86”)将字符串“86”转换为整型值86parseFloat(String)将字符串转换为浮点型数字如: parseInt (“34.45”)将字符串“34.45”转换为浮点值34.45四、总结提问循环结构的特点是什么？while循环和do-while循环有什么区别？教案首页翻转课堂教学设计教学内容一、函数的含义：类似于Java中的方法，是执行特定任务的语句块。
问题：如何希望点击某个按钮后才显示“HelloWorld”，并能输入显示的次数，怎么办？二、分析问题：1、在页面中放置一个文本框和一个按钮，让用户输入次数后点击按钮才显示2、把循环显示的代码放置到函数中，当点击按钮时，才调用函数显示HelloWorld经过分析，该如何解决上面问题？三、核心代码分析:function showHello( ){var count=document.myForm.txtCount.value ;for(i=0; i<count; i++)document.write("<H2>HelloWorld</H2>");}四、总结提问大家简述一下JavaScript脚本的基本结构？JavaScript与Java基本语法有哪些相同之处？在JavaScript中，如何定义一个函数？在JavaScript中，如何调用一个函数？在JavaScript中，常见错误有哪些？循环结构的特点是什么？while循环和do-while循环有什么区别？教案首页翻转课堂教学设计教学内容一在线平台测试与作业点评公布学生在线平台测试与作业成绩，并点评。
二布置课堂任务单任务介绍：一、相关知识点1、javascript基本语法1、变量的命名规则2、变量的使用3、数据类型2、现场编程使用变量存储以下MP3信息，并打印输出品牌（brand）：爱国者F928重量（weight）：12.4电池类型（type）：内置锂电池价格（price）：4993、总结提问什么是计算机程序？什么是变量？JavaScript常用的数据类型有哪些？简述JavaScript脚本的基本结构？在JavaScript中，常见错误有哪些？教案首页翻转课堂教学设计教学内容一在线平台测试与作业点评公布学生在线平台测试与作业成绩，并点评。
二布置课堂任务单任务介绍：二、相关知识点1、HTML文档的树状结构2、DOM对象模型3、浏览器对象的分层结构4、Window对象常用的属性5、时钟对象Date 对象存储的日期为自1970 年1 月1 日00:00:00 以来的毫秒数var today = new Date( ) ;date对象方法教案首页翻转课堂教学设计教学内容一在线平台测试与作业点评公布学生在线平台测试与作业成绩，并点评。
二布置课堂任务单会使用document对象的getElementById( )方法访问DIV层对象会使用document对象的getElementsByName( )方法访问表单元素会使用DIV对象的样式属性控制层的隐藏和显示任务介绍：三、相关知识点getElementByID( ) 根据HTML元素指定的ID，获得唯一的一个HTML元素。
如：访问DIV层对象、图片Img对象getElementsByName ( )根据HTML元素指定的name，获得相同名称的一组元素。
如：访问表单元素(全选功能)如何在页面上方显示广告图片？如何控制图片的移动？实现思路：在页面中插入层，然后在层中插入图片编写脚本1、使用getElementByID( )方法获取层对象2、捕获鼠标滚动事件，改变层对象的位置坐标常见的页面坐标的介绍top:指定元素的上边界位置。
pixelTop:设置或返回元素的上边界。
left:指定元素的左边界位置。
scrolltop:页面滚动的高度<SCRIPT language="javascript">var advInitTop=0;function inix( ){advInitTop=document.getElementById("advLayer").style.pixelTop; } function move( ){document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop; }window.onscroll=move ; //当页面滚动时调用move( )函数</SCRIPT><BODY onload="inix( )" ><DIV id="advLayer" style="position:absolute; left:16px;top:129px; width:144px; height:95px; z-index:1;"><A href=""><IMG src="images/advpic.gif"width="180" height="230" border="0"></A></DIV>让关闭图标所在的层像浮动窗口一样，也跟随滚动条同步滚动。
制作右边栏浮动的带关闭按钮的广告图片教案首页翻转课堂教学设计教学内容一在线平台测试与作业点评公布学生在线平台测试与作业成绩，并点评。
二布置课堂任务单三、实现1、复选框是否选中的属性是哪个？2、写代码逐个复选框设置为true，有没有更好的办法？实现思路：创建一组同名的复选框编写脚本1、使用getElementsByName( )方法获得一组同名的复选框对象。
2、通过循环来改变复选框是否被选中属性checked的值。
<SCRIPT language="javascript">function checkAll(boolValue ) {var allCheckBoxs=document.getElementsByName("isBuy") ;for (var i=0;i<allCheckBoxs.length ;i++){if(allCheckBoxs[i].type=="checkbox")allCheckBoxs[i].checked=boolValue ;} }</SCRIPT>……<TR><TD width="6%"><A href="javascript: checkAll(true)">全选</TD> <TD width="6%"><A href="javascript: checkAll(false)">全不选</A></TD><TD width="88%"><IMG src="images/top.jpg" width="845"height="18"></TD></TR>……编写如左图所示，通过全选/全不选前面加个复选框来实现全选/全不选切换的效果。
教案首页翻转课堂教学设计教学内容一在线平台测试与作业点评公布学生在线平台测试与作业成绩，并点评。
二布置课堂任务单任务介绍：三、相关知识点：实现思路1、创建改变样式的JavaScript代码this.style.fontSize='24px'this.style.fontSize='14px‘2、利用鼠标相关事件调用JavaScript代码onMouseOver="this.style.fontSize='24px'“onMouseOut="this.style.fontSize='14px'"实现思路名称说明不带下划线的超连接 A { color: blue;text-decoration: none;}A:hover{ color: red; }教案首页翻转课堂教学设计教学内容一在线平台测试与作业点评公布学生在线平台测试与作业成绩，并点评。
