- 1. 第三章JavaScript基础第二单元
- 2. 本章相关学习资源
《JavaScript语法》专题
《JavaScript制作页面特效》专题
《Web前端基础及数据库开发》
第3章 《JavaScript基础》
第2页/共43页学习平台“静态网页技术”课程学生用书
- 3. 预习检查说出在网页中引入JavaScript的方式。
简述setTimeout和setInterval的区别。
说出动态改变样式的两种属性及其取值。第3页/共43页提问
- 4. 本章任务任务1：输出倒正金字塔直线
任务2：计算扣税后实得工资金额
任务3：网页窗口特效
任务4：制作12小时的时钟
任务5：表格操作
任务6：修改订单第4页/共43页
- 5. 本章目标第5页/共43页掌握JavaScript基础语法会使用getElement系列方法实现DOM元素的查找和定位会使用Core DOM标准操作节点会使用Table对象的属性和方法操作表格熟练使用style和className属性制作菜单特效会制作省市级联和随鼠标滚动的广告图片点重点重点重点难点重
- 6. 串讲：页面引入JavaScript使用标签
使用外部JS文件
直接在HTML标签中第6页/共43页
- 7. 串讲：JavaScript基础语法JavaScript与Java的对比类别javaJavaScript变量声明须指定数据类型弱变量，使用var声明数据类型数值类型不同，JavaScript使用number运算符相同条件结构switch的表达式不能用string类型可以用string类型循环结构for(变量：集合){… …}
用于遍历集合元素for(变量 in 对象){… …}用于遍历数组或对象的属性跳转相同第7页/共43页
- 8. 上机练习需求说明
输出如图所示的页面完成时间：10分钟共性问题集中讲解第8页/共43页练习
- 9. 小结JavaScript中的switch结构与Java中switch结构的用法区别。
在网页中引入JavaScript有哪三种方式，常用的是哪种方式？第9页/共43页提问
- 10. 串讲：函数系统函数
自定义函数eval() ：例如， eval("2+3");返回5名称说明 parseInt() 将字符串转换为整型数字 parseFloat()将字符串转换为浮点型isNaN()判断非数字eval() 计算表达式值第10页/共43页
- 11. 串讲：自定义函数创建函数
无参函数
有参函数
调用函数
事件名=函数名()
例如：oncllick="函数名()"
直接使用函数名（传递的实参值）
例如：var result=add(2,3);function 函数名(){
// JavaScript代码;
}function 函数名(参数1,参数2，… ){
// JavaScript代码;
}演示示例：调用有参有返回值函数第11页/共43页
- 12. 上机练习需求说明
计算扣税后的实得工资金额
使用prompt()输入税前工资
低于3500元不计税，应纳税所得额不超过1500元，则纳税税率是3%；应纳税所得额超过1500至4500元，则纳税税率是5%；应纳税所得额超过4500的，则纳税税率是10%。完成时间：10分钟共性问题集中讲解第12页/共43页练习
- 13. 串讲：程序调试alert()方法
Firebug工具
单步进入
单步跳过
单步退出
演示示例：程序调试第13页/共43页
- 14. 串讲：window对象常用方法
confirm()与alert()、 prompt()区别
名称说明 prompt() 显示可提示收用户输入的对话框alert() 显示带有一段消息和一个确认按钮的警告框confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框close() 关闭浏览器窗口open() 打开一个新的浏览器窗口，加载给定 URL 所指定的文档第14页/共43页
- 15. 串讲：open()窗口特征
window.open("弹出窗口的url","窗口名称","窗口特征")名称说明height、width 窗口文档显示区的高度、宽度，以像素计left、top 窗口的x坐标、y坐标，以像素计toolbar=yes | no |1 | 0 是否显示浏览器的工具栏，默认是yesscrollbars=yes | no |1 | 0 是否显示滚动条，默认是yeslocation=yes | no |1 | 0 是否显示地址栏，默认是yesstatus=yes | no |1 | 0 是否添加状态栏，默认是yesmenubar=yes | no |1 | 0 是否显示菜单栏，默认是yes第15页/共43页语法
- 16. 串讲：History对象History对象的方法
go(1)等价于forward()
go(-1)等价于back()
名称说明 back()加载 history 对象列表中的前一个URLforward()加载 history 对象列表中的下一个URL go()加载 history 对象列表中的某个具体URL第16页/共43页
- 17. 串讲：Document对象名称说明 getElementById()返回对拥有指定id的第一个对象的引用getElementsByName()返回带有指定名称的对象的集合getElementsByTagName()返回带有指定标签名的对象的集合write()向文档写文本、HTML表达式或JavaScript代码document对象的方法
三种访问页面元素的区别
第17页/共43页
- 18. 上机练习需求说明
打开“青鸟论坛”页面时，弹出“调查表”页面
设置“调查表”页面的宽、高和距窗口的x、y轴，且页面无滚动条、状态栏和菜单栏
提交调查表时，弹出确认窗口第18页/共46页完成时间：15分钟共性问题集中讲解第18页/共43页练习
- 19. var today=new Date(); //返回当前日期和时间
var tdate=new Date("september 1,2012,14:58:12");串讲：Date对象创建日期对象
var 日期实例 = new Date(参数) ;常用方法
名称说明 getDate()返回 Date 对象的一个月中的某一天，其值介于1～31之间getDay()返回 Date 对象的星期中的某一天，其值介于0～6之间getHours()返回 Date 对象的小时数，其值介于0～23之间getMinutes()返回 Date 对象的分钟数，其值介于0～59之间getSeconds()返回 Date 对象的秒数，其值介于0～59之间getMonth()返回 Date 对象的月份，其值介于0～11之间getFullYear()返回 Date 对象的年份，其值为4位数getTime()返回自某一时刻（1970年1月1日）以来的毫秒数第19页/共43页
- 20. 串讲：定时函数setTimeout()方法setTimeout("调用的函数",等待的毫秒数)setInterval("调用的函数",间隔的毫秒数)clearTimeout (setTimeout()返回的ID值 )var myTime＝setTimeout("disptime()", 1000 );var myTime＝ setInterval("disptime()", 1000 );clearTimeout(myTime);setInterval()方法clearTimeout()方法第20页/共43页语法语法语法
- 21. 第21页/共46页上机练习需求说明
显示年、月、日
显示星期几
显示时钟特效，时钟为12小时进制第21页/共46页完成时间：15分钟共性问题集中讲解第21页/共43页练习
- 22. 讲解：使用Core DOM操作节点DOM节点树父子关系兄弟关系第22页/共43页
- 23. 串讲：使用Core DOM操作节点访问节点
创建和增加节点
删除和替换节点访问指定节点的方法
getElementById()
getElementsByName()
getElementsByTagName()
查看/修改属性节点
getAttribute("属性名")
setAttribute("属性名","属性值")
第23页/共43页
- 24. 串讲：访问节点-1如果编程时希望访问某个元素的父元素，但又不知道父元素的ID、name、tag，怎么办？
使用层次关系访问节点
parentNode
firstChild
lastChild
nextSibling
previousSibling 该节点的parentNode ？ 该节点的firstChild ？lastChild ？第24页/共43页问题
- 25. 串讲：访问节点-2function checks(){
var objTable=document.getElementById("myTable");
var strHtml = objTable.lastChild.firstChild.firstChild.innerHTML;
alert(strHtml);
}
……
该代码指哪个节点 ？ thead和tbody标签用于表格数据的逻辑分组，W3C不推荐，但写脚本访问表格数据时常用。第25页/共43页
- 26. 串讲：创建和增加节点创建和增加节点 的方法
createElement()：创建节点
appendChild()：末尾追加方式插入节点
insertBefore()：在指定节点前插入新节点
cloneNode()：克隆节点
function newNode(){ //增加图片
var oldNode=document.getElementById("sixty1");
var image=document.createElement("img");
image.setAttribute("src","images/newimg.jpg");
document.body.insertBefore(image,oldNode);
}
function copyNode(){ //复制图片
var image=document.getElementById("sixty1");
var copyImage=image.cloneNode(false);
document.body.appendChild(copyImage);
}ID属性：sixty1第26页/共43页
- 27. 串讲：删除和替换节点function delNode(){ //删除图片
var dNode=document.getElementById("sixty1");
document.body.removeChild(dNode);
}
function repNode(){ //替换图片
var oldimage=document.getElementById("sixty2");
var newimage=document.createElement("img");
newimage.setAttribute("src","images/replace.jpg");
document.body.replaceChild(newimage,oldimage);
}删除和替换节点的方法
removeChild()：删除节点
replaceChild() ：替换节点第27页/共43页ID属性：sixty2ID属性：sixty1
- 28. 需求说明
实现如下的表格操作功能上机练习修改标题行样式为：
居中显示、
字体加粗 、
单元格背景颜色变为“#ccc”完成时间：25分钟共性问题集中讲解第28页/共43页练习
- 29. 串讲：使用HTML DOM操作表格Table对象
类别名称说明属性rows[]返回包含表格中所有行的一个数组方法insertRow()在表格中插入一个新行deleteRow()从表格中删除一行TableRow对象
类别名称说明属性cells[]返回包含行中所有单元格的一个数组rowIndex返回该行在表中的位置方法insertCell()在一行中的指定位置插入一个空的
标签deleteCell()删除行中指定的单元格TableCell对象
类别名称说明属性cellIndex返回单元格在某行单元格集合中的位置innerHTML设置或返回单元格的开始标签和结束标签之间的HTMLalign设置或返回单元格内部数据的水平排列方式className设置或返回元素的class属性第29页/共43页- 30. 需求说明
可以增加定单
单击“修改”按钮时，数量改为文本框显示，可以改变数量，并且“修改”按钮变为“确定”按钮
单击“确定”按钮后，修改数量成功，并且数量显示在当前的单元格中，“确定”按钮变为“修改”按钮上机练习完成时间：25分钟共性问题集中讲解第30页/共43页练习
- 31. 小结向指定的节点之前插入一个新的子节点，使用的方法是（ ）。
创建一个新的元素节点，使用的方法是（ ）。
如果已获得表格对象是tableObject，则获得第一行对象则可以写成（ ）。insertBefore()createElement()tableObject.rows[0]第31页/共43页提问
- 32. 串讲：如何实现省市级联如何使用下拉列表框实现城市级联？
需使用的对象
数组
select对象
option对象
第32页/共43页演示示例：制作省市级联效果
问题分析
- 33. 串讲：数组创建数组
操作数组
单个读取
循环读取
var 数组名称 = new Array(size);数组对象名.[数组下标]for (var i in array){
// 循环代码;
}下标可以是字符串类型第33页/共43页语法语法语法
- 34. 串讲：下拉列表框对象Select对象常用的事件、方法和属性
Option对象的常用属性
text：设置或返回某个选项的纯文本值
value：设置或返回被送往服务器的值
第34页/共43页类别名称说明事件onchange当改变选项时调用的事件方法add()向下拉列表框中添加一个选项属性options[]返回包含下拉列表框中的所有选项的一个数组selectedIndex设置或返回下拉列表框中被选项目的索引号
- 35. 讲解：实现省市级联实现思路
创建数组存储省市
创建两个下拉列表框，分别显示省份和城市
页面加载时把省份名称添加到表示省份的下拉列表框中
选择某一个省份时，使用onchange事件调用函数（changeCity()）使城市下拉列表框中显示对应的城市
var cityList = new Array();
cityList['江苏省'] = ['南京市','苏州市','无锡市'];
cityList['浙江省'] = ['杭州市','宁波市','温州市'];
… …function allCity(){
var province=document.getElementById("selProvince");
for (var i in cityList)
province.add(new Option(i, i),null);
}function changeCity(){
var province=document.getElementById("selProvince").value;
var city=document.getElementById("selCity");
city.options.length=0; //清除当前city中的选项
for (var i in cityList){
if (i == province)
for (var j in cityList[i])
city.add(new Option(cityList[i][j],cityList[i][j]),null);
}
}存储省市的关键代码：显示省份的关键代码：根据所选省份显示城市的关键代码：省份ID省份ID城市ID第35页/共43页
- 36. 串讲：访问样式的常用方法动态改变页面元素的样式
使用getElement系列方法访问元素
通过属性改变样式
style属性
className属性
HTML元素.style.样式属性＝"值";HTML元素.className="样式名称";第36页/共43页
- 37. 讲解：访问样式的应用如何实现广告图片总是显示在页面上方，并且随滚动条同步移动？
实现思路
把广告图片放在一个div中，并且div总是显示在页面的上方
使用getElementById()方法获取层对象，并且获取层在页面上的初始位置
根据鼠标滚动事件，获取滚动条滚动的距离
随着滚动条的移动改变层在页面上的位置
第37页/共43页演示示例：随鼠标滚动的广告图片
问题
- 38. 讲解：实现滚动的广告图片获取层在页面上的初始位置
获取滚动条滚动的距离
页面事件
onscroll、onload、onresizevar divObj=document.getElementById(“advObj");
var objTop= divObj.currentStyle.top; //IE浏览器
//Firefox浏览器
var objTop =document.defaultView.getComputedStyle(divObj,null).top;不同浏览器的获取方式不同第38页/共43页document.documentElement.scrollTop; //滚动条向上滚动的距离
document.documentElement.scrollLeft; //滚动条向左滚动的距离
- 39. 串讲：实现滚动的广告图片adverObject=document.getElementById("adver"); //获得层对象
if(adverObject.currentStyle){ //IE浏览器
adverTop=parseInt(adverObject.currentStyle.top);
adverLeft=parseInt(adverObject.currentStyle.left);
}else{ //Firefox浏览器
adverTop=parseInt(document.defaultView
.getComputedStyle(adverObject,null).top);
adverLeft=parseInt(document.defaultView
.getComputedStyle(adverObject,null).left);
}获取层在页面上的初始位置的关键代码：注意类型转换function move(){
adverObject.style.top=adverTop+parseInt(document
.documentElement.scrollTop)+"px";
adverObject.style.left=adverLeft+parseInt(document
.documentElement.scrollLeft)+"px";
}改变层在页面上的位置的关键代码：第39页/共43页
- 40. 答疑时间同学们请就以下方面的问题请教老师
（教员备课时自行填写）第40页/共43页
- 41. 总结简述getElement系列方法的应用场合。
动态地改变样式的属性有哪些？
控制元素的显示和隐藏的属性是什么，其取值有哪些？
简述setTimeout和setInterval的区别。
如何获取滚动条滚动的距离？第41页/共43页提问
- 42. 作业
必做
教员备课时在此添加内容
选做
教员备课时在此添加内容
提交时间：xxx
提交形式：xxx
阅读学生用书第4章，观看平台《表单验证》
教员备课时在此添加内容
第42页/共43页课后作业预习作业
- 43. 第43页/共43页
|
