3.第章-javascript基础1授课

1、第三章JavaScript基础第二单元讲师:william预习检查说出在网页中引入JavaScript的方式。简述setTimeout和setInterval的区别。说出动态改变样式的两种属性及其取值。第2页/共43页提问本章任务任务1：输出倒正金字塔直线任务2：计算扣税后实得工资金额任务3：网页窗口特效任务4：制作12小时的时钟任务5：表格操作任务6：修改订单第3页/共43页变量的声明和赋值 var width; width = 5;先声明变量再赋值var 用于声明变量的关键字,”哇”width 变量名var x, y, z = 10;var catName= “皮皮”;同时声明和赋值变量不

2、声明直接赋值width=5;数据类型typeof检测变量的返回值数据类型原始类型Undefined:变量已声明，但没有赋值而直接使用Boolean:赋值为布称值,true or falseString:赋值为字符串值Number:赋值为数值Null:赋值为null。Null类型的语义是“一个空的对象引用”。所以typeof(null)返回的是一个对象类型对象类型objectWiliam老师说:javascript没有字符类型串讲：页面引入JavaScript嵌入式:使用标签外部引入式:使用外部JS文件行内式:直接在HTML标签中 第6页/共43页上机练习需求说明输出如图所示的页面完成时间：10

3、分钟共性问题集中讲解第7页/共43页练习小结在网页中引入JavaScript有哪三种方式，常用的是哪种方式？第8页/共43页提问串讲：函数系统函数自定义函数eval() ：例如， eval(2+3);返回5名称说明 parseInt() 将字符串转换为整型数字 parseFloat()将字符串转换为浮点型isNaN()判断非数字eval() 计算表达式值第9页/共43页串讲：自定义函数创建函数无参函数有参函数调用函数事件名=函数名()例如：oncllick=函数名()直接使用函数名（传递的实参值）例如：var result=add(2,3);function 函数名() / JavaScrip

4、t代码; function 函数名(参数1,参数2， ) / JavaScript代码; 演示示例：调用有参有返回值函数第10页/共43页上机练习需求说明定义一个函数，输出用户的自身信息(名字，年纪)完成时间：10分钟共性问题集中讲解第11页/共43页练习串讲：window对象常用方法confirm()与alert()、 prompt()区别名称说明 prompt() 显示可提示收用户输入的对话框alert() 显示带有一段消息和一个确认按钮的警告框confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框close() 关闭浏览器窗口open() 打开一个新的浏览器窗口，加载给定 U

5、RL 所指定的文档setTimeout()在指定的毫秒数后调用函数setInterval()按照指定的周期（以毫秒计）来调用函数clearTimeout()取消由setTimeout()方法设置的timeout第12页/共43页串讲：open()窗口特征window.open(弹出窗口的url,窗口名称,窗口特征)名称说明height、width 窗口文档显示区的高度、宽度，以像素计left、top 窗口的x坐标、y坐标，以像素计toolbar=yes | no |1 | 0 是否显示浏览器的工具栏，默认是yesscrollbars=yes | no |1 | 0 是否显示滚动条，默认是yes

6、location=yes | no |1 | 0 是否显示地址栏，默认是yesstatus=yes | no |1 | 0 是否添加状态栏，默认是yesmenubar=yes | no |1 | 0 是否显示菜单栏，默认是yes第13页/共43页语法串讲：定时函数setTimeout()方法setTimeout(调用的函数,等待的毫秒数)setInterval(调用的函数,间隔的毫秒数)clearTimeout (setTimeout()返回的ID值 )var myTimesetTimeout(disptime(), 1000 );var myTime setInterval(disptime

7、(), 1000 );clearTimeout(myTime);setInterval()方法clearTimeout()方法第14页/共43页语法语法语法串讲：History对象History对象的方法go(1)等价于forward()go(-1)等价于back()*location对象Href:跳转到哪个网页名称说明 back()加载 history 对象列表中的前一个URLforward()加载 history 对象列表中的下一个URL go()加载 history 对象列表中的某个具体URL第15页/共43页var today=new Date(); /返回当前日期和时间var tda

8、te=new Date(september 1,2012,14:58:12);串讲：Date对象创建日期对象var 日期实例 = new Date(参数) ;常用方法名称说明 getDate()返回 Date 对象的一个月中的某一天，其值介于131之间getDay()返回 Date 对象的星期中的某一天，其值介于06之间getHours()返回 Date 对象的小时数，其值介于023之间getMinutes()返回 Date 对象的分钟数，其值介于059之间getSeconds()返回 Date 对象的秒数，其值介于059之间getMonth()返回 Date 对象的月份，其值介于011之间g

9、etFullYear()返回 Date 对象的年份，其值为4位数getTime()返回自某一时刻（1970年1月1日）以来的毫秒数第16页/共43页上机练习需求说明打开“青鸟论坛”页面时，弹出“调查表”页面设置“调查表”页面的宽、高和距窗口的x、y轴，且页面无滚动条、状态栏和菜单栏提交调查表时，弹出确认窗口第17页/共46页完成时间：15分钟共性问题集中讲解第17页/共43页练习串讲：Document对象名称说明 getElementById()返回对拥有指定id的第一个对象的引用getElementsByName()返回带有指定名称的对象的集合getElementsByTagName()返回

10、带有指定标签名的对象的集合write()向文档写文本、HTML表达式或JavaScript代码document对象的方法三种访问页面元素的区别第18页/共43页第19页/共46页上机练习需求说明显示年、月、日显示星期几显示时钟特效，时钟为12小时进制第19页/共46页完成时间：15分钟共性问题集中讲解第19页/共43页练习讲解：使用Core DOM操作节点DOM节点树父子关系兄弟关系第20页/共43页串讲：使用Core DOM操作节点访问节点创建和增加节点删除和替换节点访问指定节点的方法getElementById() getElementsByName() getElementsByTagN

11、ame() 查看/修改属性节点getAttribute(属性名) setAttribute(属性名,属性值) 第21页/共43页串讲：访问节点-1如果编程时希望访问某个元素的父元素，但又不知道父元素的ID、name、tag，怎么办？使用层次关系访问节点parentNodefirstChildlastChildnextSiblingpreviousSibling 东方贺 语文 95 该节点的parentNode ？ 该节点的firstChild ？lastChild ？第22页/共43页问题串讲：访问节点-2function checks() var objTable=document.getE

12、lementById(myTable); var strHtml = objTable.lastChild.firstChild.firstChild.innerHTML; alert(strHtml); 欧阳兰 该代码指哪个节点 ？ thead和tbody标签用于表格数据的逻辑分组，W3C不推荐，但写脚本访问表格数据时常用。第23页/共43页串讲：创建和增加节点创建和增加节点 的方法createElement()：创建节点 appendChild()：末尾追加方式插入节点insertBefore()：在指定节点前插入新节点cloneNode()：克隆节点function newNode()

13、/增加图片 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.app

14、endChild(copyImage); ID属性：sixty1第24页/共43页串讲：删除和替换节点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/r

15、eplace.jpg); document.body.replaceChild(newimage,oldimage); 删除和替换节点的方法removeChild()：删除节点 replaceChild() ：替换节点第25页/共43页ID属性：sixty2ID属性：sixty1需求说明实现如下的表格操作功能上机练习修改标题行样式为：居中显示、字体加粗 、单元格背景颜色变为“#ccc”完成时间：25分钟共性问题集中讲解第26页/共43页练习串讲：使用HTML DOM操作表格Table对象类别名称说明属性rows返回包含表格中所有行的一个数组方法insertRow()在表格中插入一个新行dele

16、teRow()从表格中删除一行TableRow对象类别名称说明属性cells返回包含行中所有单元格的一个数组rowIndex返回该行在表中的位置方法insertCell()在一行中的指定位置插入一个空的标签deleteCell()删除行中指定的单元格TableCell对象类别名称说明属性cellIndex返回单元格在某行单元格集合中的位置innerHTML设置或返回单元格的开始标签和结束标签之间的HTMLalign设置或返回单元格内部数据的水平排列方式className设置或返回元素的class属性第27页/共43页需求说明可以增加定单单击“修改”按钮时，数量改为文本框显示，可以改变数量，并且“修改”按钮变为“确定”按钮单击“确定”按钮后，修改数量成功，并且数量显示在当前的单元格中，“确定”按钮变为“修改”按钮上机练习完成时间：25分钟共性问题集中讲解第28页/共43页练习小结向指定的节点之前插入一个新的子节点，使用的方法是（ ）。创建一个新的元素节点，使用的方法是（ ）。如果已获得表格对象是tableObject，则获得第一行对象则可以写成（ ）。inse