JavaScript基础案例.pptx

第三章 JavaScript基础 第二单元 本章相关学习资源 《JavaScript语法》专题 《JavaScript制作页面特效》专题 《Web前端基础及数据库开发》 第3章 《JavaScript基础》 第2页/共43页 学习平台“静态网页技术”课程 学生用书 预习检查 说出在网页中引入JavaScript的方式。 简述setTimeout和setInterval的区别。 说出动态改变样式的两种属性及其取值。 第3页/共43页 本章任务 任务1：输出倒正金字塔直线 任务2：计算扣税后实得工资金额 任务3：网页窗口特效 任务4：制作12小时的时钟 任务5：表格操作 任务6：修改订单 第4页/共43页 本章目标 第5页/共43页 掌握JavaScript基础语法 会使用getElement系列方法实现DOM元素的查找和定位 会使用Core DOM标准操作节点 会使用Table对象的属性和方法操作表格 熟练使用style和className属性制作菜单特效 会制作省市级联和随鼠标滚动的广告图片 点重 点重 点重 点难 点重 串讲：页面引入JavaScript 使用script…/script标签 使用外部JS文件 直接在HTML标签中 script src=hello.js type =text/javascript script input name=btn type=button value=弹出消息框 onclick=javascript:alert(欢迎你);/ script type=text/javascript !-- alert(欢迎你); -- /script 第6页/共43页 串讲：JavaScript基础语法 JavaScript与Java的对比 类别 java JavaScript 变量声明 须指定数据类型 弱变量，使用var声明 数据类型 数值类型不同，JavaScript使用number 运算符 相同 条件结构 switch的表达式不能用string类型 可以用string类型 循环结构 for(变量：集合){… …} 用于遍历集合元素 for(变量 in 对象){… …}用于遍历数组或对象的属性 跳转 相同 第7页/共43页 上机练习 需求说明 输出如图所示的页面 完成时间：10分钟 共性问题集中讲解 第8页/共43页 小结 JavaScript中的switch结构与Java中switch结构的用法区别。 在网页中引入JavaScript有哪三种方式，常用的是哪种方式？ 第9页/共43页 串讲：函数 系统函数 自定义函数 eval() ：例如， eval(2+3);返回5 名称 说明 parseInt() 将字符串转换为整型数字 parseFloat() 将字符串转换为浮点型 isNaN() 判断非数字 eval() 计算表达式值 第10页/共43页 串讲：自定义函数 创建函数 无参函数 有参函数 调用函数 事件名=函数名() 例如：oncllick=函数名() 直接使用函数名（传递的实参值） 例如：var result=add(2,3); function 函数名(){ // JavaScript代码; } function 函数名(参数1,参数2，… ){ // JavaScript代码; } 第11页/共43页 上机练习 需求说明 计算扣税后的实得工资金额 使用prompt()输入税前工资 低于3500元不计税，应纳税所得额不超过1500元，则纳税税率是3%；应纳税所得额超过1500至4500元，则纳税税率是5%；应纳税所得额超过4500的，则纳税税率是10%。 完成时间：10分钟 共性问题集中讲解 第12页/共43页 串讲：程序调试 alert()方法 Firebug工具 单步进入 单步跳过 单步退出 第13页/共43页 串讲：window对象 常用方法 confirm()与alert()、 prompt()区别 名称 说明 prompt() 显示可提示收用户输入的对话框 alert() 显示带有一段消息和一个确认按钮的警告框 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框 close() 关闭浏览器窗口 open() 打开一个新的浏览器窗口，加载给定 URL 所指定的文档 第14页/共43页 串讲：open() 窗口特征 window.open(弹出窗口的url,窗口名称,窗口特征) 名称 说明 height、width 窗口文档显示区的高度、宽度，以像素计 left、top 窗口的x坐标、y坐标，以像素计 toolbar=yes | no |1 | 0