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

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