2014-2015学年—说课—JavaScript基础语法.ppt

辽中县职业教育中心 2014-2015学年 第二学期 北校区教师说课比赛 说课内容：JavaScript基础语法 说课教师：侯腾飞 所属部门：计算机教研室 本次说课内容简介 n与北大青鸟合作办学简介 nBEWEB课程体系简介 n本课程相关内容说明 n当前学生学习情况 n本章教学安排 n教法与学法 n教学过程简介 n课后学生学习反馈 与北大青鸟合作办学简介 学校提供环境、教师 学生服从学校管理 北大青鸟提供教材及课件 北大青鸟负责和学生签署顶岗实习就业协议 北大青鸟承诺：当学生完成所安排的课程的学习， 并通过相关考试，北大青鸟将负责 安排顶岗实习。 BEWEB课课程体系 第二学期 第一学期 计算机与网络基础美术基础使用Photoshop设计网页 使用Dreamweaver 制作网页 网站配色与布局使用Illustrator设计图形 第一学年 第三学期 第四学期 使用CSS+DIV制作网页 制作JavaScript脚 本特效 制作Flash动画 毕业设计使用PHP+MySql开发网站创意设计项目实战 第二学年 职业导向训练手册（软技能） 第三学年顶岗实习 本课程相关内容说明 nJavaScript概念 JavaScript是一种轻型的、解释型的程序设计语言 具有：面向对象的功能 可以用来： 表示Web浏览器窗口及其内容的对象 客户端程序编写 达到： 网页从静态到动态的效果 本课程相关内容说明 n训练技能 使用JavaScript实现实现 表单验证单验证 使用JavaScript制作网页页广告特效 使用JavaScript制作弹弹出窗口特效 使用JavaScript实现时钟实现时钟 特效 使用JavaScript实现级联显实现级联显 示功能 使用JavaScript+CSS实现实现 CSS样样式特效 本课程相关内容说明 n本课程设计思路 本课程总共13章，分为JavaScript基础语法、程 序逻辑控制、特效制作、表单验证及综合应用五 部分。具体章节课时安排如下： 第一章：6课时；第二章：6课时；第三章：6课时 第四章：6课时；第五章：6课时；第六章：6课时 第七章：6课时；第八章：8课时；第九章：8课时 第十章：10课时；第十一章：8课时； 第十二章：8课时；第十三章：12课时。 当前所教班级学生情况 n春季班学生和秋季班学生 n男生和女生 n走读生和住宿生 n爱学习的和不爱学习的 n爱劳动的和不爱劳动的 本章教学安排 n本章共分为两节，每节又都包含五小节 n第一节：我的第一个JS程序（2课时） n 为什么要学习JavaScript n 什么是JavaScript n JavaScript的基本结构 n JavaScript简单应用 n 实现案例我的第一个JS程序 n第二节：计算每日温差（2课时） n 变量的声明和赋值 n 数据类型 n 运算符 n 注释 n 实现案例计算每日温差 n上机实战（2课时） 教法与学法 n案例分析法 n任务驱动法 n分组讨论法 教学过程简介 n上课问好 n安全教育： n 禁止吃零食 n 禁止插座充电 n 禁止使用化妆用品 n 禁止带有手脚上的交流 n导入 n多媒体讲解 本章任务 n唐诗鉴赏 n问候语显示 n根据输入的学生成绩计算平均分 n计算员工工资 本章目标 n掌握JavaScript的基本结构 n掌握JavaScript在页面中的应用 n掌握脚本的基本语法 示例文字 回顾HTML-1 n 常用的HTML标签有哪些？ n 请说说表格的基本结构以及跨行、跨列的用法？ 单元格内容 单元格内容 标签名称 说 明 界定一个完整的HTML文档 定义文档的头部 设定显示在浏览器左上方的标题内容 定义文档的主体 定义文字的字体、字号和颜色 定义文本的段落 在文本中插入一个换行 插入一张图像 插入一条水平分隔线 定义超级链接 实现页 面中的滚动文字或图片 回顾HTML-2 n 请简述表单的基本结构？常用表单元素有哪些？ n 如何使用样式表定义统一的字体外观和文本框的细边 框样式？ 表单的基本结构： 常用的表单元素有： 文本框（text）、密码框（password）、单选按钮（radio）、 复选框（checkbox）、列表框（和）、 按钮（button、submit和reset）、多行文本框（）。 统一的字体外观： font-family:“黑体“; font-size:18px; color:#FF0000; 细边框样式： border-width:1px; border-style:solid; 为什么要学习JavaScript n表单验证 示例：贵美网上商城注册 n页面动态效果 示例：层的切换、树形菜单 JavaScript的组成 DOM JavaScript ECMAScript BOM nECMAScript: 核心语法 nDOM: 文档对象模型 nBOM: 浏览器对象模型 ECMAScript n语法标准 语法 变量和数据类型 运算符 逻辑控制语句 关键字、保留字 对象 n编码遵循ECMAScript标准 浏览器对象模型 nBOM 文档对象模型 nDOM 脚本的执行原理 应用 服务器 IE IE 解析HTML标签和 JavaScript脚本 从服务器端下载含 JavaScript的页面 返回响应 客户端请求含JS的页面 发送请求 1 用户输入 2 3 JavaScript的基本语法 输出Hello World! document.write(“Hello World!“); JavaScript的使用方式 nHtml页面内嵌JS代码 n外部JS文件 n简短缩写方式 常见的输入和输出 n警告（alert） alert(“提示信息”); n提示（prompt） prompt(“提示信息”, “输入框的默认信息”); 演示案例 n需求描述 弹出“我的第一个JS程序”消息框 演示案例 n思路分析 创建HTML文件 在中添加 使用alert()弹弹出消息 JavaScript核心语法 核心语法 数据类型 变量 运算符号 控制语句 注释 语法约定 输入/输出 变量的声明和赋值 var count; count = 5; 定义变量赋值 “var” 用于声明变量的关键字 “count” 变量名 var x, y, z = 10; var count = 10; 同时声明和赋值变量 声明多个变量 数据类型 n数据类型 undefined boolean string number Null 使用typeof函数查查看数据类类型 ntypeof运算符返回值如下： undefined：变量被声明后，但未被赋值 string：用单引号或双引号来声明的字符串 boolean：true或false number：整数或浮点数 object：javascript中的对象、数组和null 类型转换 nparseInt (String) 将字符串转换为整型数字 如: parseInt (“86”)将字符串“86”转换为整型值86 nparseFloat(String) 将字符串转换为浮点型数字 如: parseFloat (“34.45”)将字符串“34.45”转换为浮点值 34.45 运算符号 类型运算符 算术运算符+ - * / % + - 赋值运算符= 比较运算符 = Hello World“);”5次 使用document.write在页面上输出“Hello World” */ n 单行注释以 / 开始，以行末结束，例如： n 多行注释以 /* 开始，以 */ 结束，符号 /* */ 指 示中间的语句是该程序中的注释。例如： 演示案例 n需求描述 需要计算一天的温差（温差=当