高中信息技术二年级粤教版选修3第五章第一节网页脚本教学设计_第1页
高中信息技术二年级粤教版选修3第五章第一节网页脚本教学设计_第2页
高中信息技术二年级粤教版选修3第五章第一节网页脚本教学设计_第3页
高中信息技术二年级粤教版选修3第五章第一节网页脚本教学设计_第4页
高中信息技术二年级粤教版选修3第五章第一节网页脚本教学设计_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

高中信息技术二年级粤教版选修3第五章第一节网页脚本教学设计一、教学分析本课内容选自普通高中信息技术粤教版选修3《网络技术应用》第五章"动态网页的制作"第一节"网页脚本"。学生此前已经掌握了HTML基本标记，能够独立编写结构完整的静态网页，但静态网页无法响应用户的即时操作，页面一旦发布便"一动不动"，这与学生日常上网时感受到的交互体验存在明显落差。正是这种落差构成本课最真实的学习动机：网页为什么能动？谁在指挥它动？本课的核心知识线索有三条：一是脚本的概念，即嵌入网页中的一小段程序代码，由浏览器解释执行，无须预编译；二是客户端脚本与服务器端脚本的区分，前者在浏览器中运行，后者在服务器上运行后再把结果发回浏览器；三是JavaScript的基本语法入门，包括事件驱动、函数调用、通过getElementById操作页面元素等。三条线索由浅入深，彼此支撑，其中"代码写在哪儿、在哪儿执行"是理解网页脚本运行机制的关键，也是本课最容易被学生忽视的思维难点。授课对象为高二年级学生。他们具备一定的逻辑思维能力，数学课上接触过变量与函数的概念，但多数学生没有正式学习过程序设计，对代码存在畏难情绪。教学策略上，我以"所见即所得"的即时反馈化解畏难感，让学生在记事本里敲几行代码、刷新浏览器就能看到效果，用成功的体验建立信心，再逐步引导其理解背后的运行机制。二、教学目标知识与技能目标：理解脚本的含义及其在网页中的嵌入方式；能说出客户端脚本与服务器端脚本的执行位置与各自特点；认识JavaScript的基本结构，会编写简单的脚本实现弹窗提示、按钮响应和页面内容动态修改。过程与方法目标：经历"观察现象—提出问题—动手验证—归纳规律"的探究过程，学会通过修改代码参数、观察页面变化来推测语法的功能，初步形成调试与试错的技术学习策略。情感态度与价值观目标：体验网页由静到动背后的技术逻辑，消除对编程的神秘感与恐惧感；在排查代码错误的过程中养成严谨细致的习惯；理解脚本的安全边界，树立负责任地使用技术、不编写不传播恶意脚本的意识。三、教学重点与难点教学重点：脚本的概念与嵌入位置；用JavaScript实现按钮触发的简单交互。教学难点：客户端脚本与服务器端脚本的辨析。难点突破的思路是借助"餐厅点菜"的情境类比：客户端脚本如同客人自己动手的自助餐台，操作全在本地完成；服务器端脚本如同后厨，订单送进去、成品端出来。再结合修改本地HTML文件代码改变显示结果、对比在线维基百科提交内容的实验，让学生在两种体验的对照中自行归纳结论。四、教学准备教师准备：多媒体机房、极域电子教室广播系统；三个对比网页（纯静态页面、含JavaScript弹出页面的页面、典型的服务器端交互页面如网站登录页）；任务导学案与分层练习文件包；预置有拼写错误的排错练习代码。学生准备：回忆HTML基本标记；每组一台可上网的计算机；记事本与常用的两种浏览器。五、教学方法采用情境导入、任务驱动、对比实验与分层递进相结合的教学方法。课堂主线是一个真实的项目任务——为班级网页加上"会动的功能"，所有知识点围绕完成任务的需要而展开，而不是先讲语法再找例子。六、教学过程环节一：对比观察，激趣导入（约6分钟）教师广播屏幕，依次打开两个网页。第一个是同学们上一章制作的纯HTML班级首页，图片整齐、文字清晰，但无论点击哪里都没有反应。第二个页面外观几乎相同，但当鼠标滑过导航菜单时菜单变彩色，点击按钮时弹出"欢迎来到我们的班级网站"的问候框，点击图片时图片还会切换。教师只问一个问题：两份代码，差在什么地方？学生回答往往零散："多了动画""后面那个能动"。教师追问：动的效果是谁发出的指令？指令写在哪里？谁负责执行它？连续三问将学生的注意力从表面效果引到执行机制上。教师顺势揭题——让网页动起来的是一种写在网页里的小代码，它的名字叫"脚本"，本节课我们就要亲手写出自己的第一段脚本。环节二：建立概念，明确位置（约6分钟）教师用广播课件呈现核心概念：脚本是嵌入在HTML文档中的一段程序代码，不需要像大型软件那样先编译成可执行文件，而是由浏览器一边读网页一边解释执行。因此脚本的"语言"很轻量，写起来像写一段话，却能让网页产生智能行为。配合一张网页源代码的截图，教师指出脚本的两处常见安身之地：写在head部分供随时调用，或写在body部分紧随页面元素。教师板书并用一句话总结——"HTML负责骨架与内容，CSS负责打扮，脚本负责行动"，帮助学生把脚本放进网页技术的整体版图。随后抛出区分性问题：这段代码究竟在哪里跑的？是在网站服务器上跑好后把结果寄过来，还是到你自己的电脑上跑？这个问题不在此刻回答，而是作为悬念，留给后面的实验去发现。环节三：第一个脚本，即写即验（约12分钟）学生打开记事本，按导学案输入如下代码：<html><body><scripttype="text/javascript">alert("你好，我的第一个脚本！");</script></body></html>保存为"test.html"，双击打开，浏览器立即弹出问候框。多数学生会在这一刻发出惊喜的声音——这正是设计意图：最小成本的成功体验。教师强调书写细节：保存时文件名后缀必须是.html而不是.txt；"alert"是英文"警告、提醒"，整句意思是浏览器发出一个提醒，括号里放要显示的内容；双引号包裹的是文本，JavaScript里这样的文本叫字符串。接着进行第一轮参数改造挑战：把中文换成自己设计的欢迎词，把一条alert变成三条连续弹出。学生发现，脚本会严格按书写顺序从上到下执行，这与数学中的运算顺序或语文中的行文先后是相通的。教师巡视时重点捕捉两类典型错误：忘记保存修正后的文件就刷新页面，以及把引号误输成中文全角引号导致毫无反应。把这两种错误请当事学生上讲台演示、全班共同诊断，让大家明白——代码不会通融，但报错本身就是老师，读懂现象就能找到病因。环节四：事件驱动，让按钮听话（约10分钟）教师提出学习任务：问候框目前页面一打开就弹出来，挡住内容，用户还没准备好。我们希望它在我们点击按钮那一刻才出现。这需要网页先"听"到一个动作，再去执行脚本——这个动作叫事件，对应执行的代码叫事件处理。学生继续完善代码，将脚本改为：<html><body><scripttype="text/javascript">functionhello(){alert("欢迎来到我们的班级网站！");}</script><inputtype="button"value="点我"onclick="hello()"></body></html>代码承载的新知识点有三处：function表示定义一个函数，把几句要重复的指令打包，起一个名字"hello"以便随时调用；大括号圈出函数的工作范围；onclick表示"当鼠标点击时"，把按钮元件与函数连起来。教师用"遥控器的按键与电视机动作"的比喻帮助学生理解事件与函数的绑定关系：按哪个键、做什么动作，都由程序员预先写定。学生在改造中常见的卡点是函数名拼写不一致——定义处写hello、调用处写hellow，导致点击毫无反应。教师不直接指出，而是提问：浏览器看不懂的部分可能有哪些？引导学生像校对文章一样逐字符检查，培养耐心与规范。完成的小组拓展任务：再增加一个按钮，点击后弹出不同的问候语，或弹出当前日期。设计阶梯式的任务让快的学生吃得饱、慢的学生跟得上。环节五：提取页面元素，网页真的活起来（约8分钟）教师提出本课的亮点任务：弹窗只是说话，真正的脚本能改网页本身。比如点击按钮后，网页上的标题文字换成新的内容。要实现这一步，脚本必须先"抓住"要改的那段文字，再替它换内容。学生在教师带领下完成代码：<html><body><h1id="biaoti">原来的标题</h1><inputtype="button"value="换标题"onclick="document.getElementById('biaoti').innerHTML='新标题出现啦！'"></body></html>教师带领学生拆解语句的逻辑链：document指当前网页文档；getElementById表示"按照身份证号找人"，id就像页面元素的唯一身份证号；找到后修改它的innerHTML，即元素内部的内容。教师特别强调，这行代码读起来就是从左到右一条指令——"在文档里，找到id是biaoti的元素，把内部内容改成新文字"。语句虽长，本质是"找对象、改属性"两个动作，消除了学生面对长代码的心理障碍。学生运行后亲眼看到标题瞬间变化，真切体会"网页在我手中变形"的掌控感。教师紧接着提议：能否把问候和换标题合并成一个完整的小页面？各小组自由创作，有的为班级作品展示页加上隐藏说明文字、点击后显示，有的为校庆页面加上倒计时问候。教师巡视指导，鼓励学生在实践单上记录自己用到的每一条新指令，把"做过"沉淀为"学会"。环节六：实验探究，分清客户端与服务器端（约8分钟）回到开始时悬而未决的问题——脚本在哪儿执行。教师带领学生做两组对照实验。实验一：断开网络连接，重新打开本地保存的test.html，点击按钮，弹窗照样出现。学生得出结论：这段代码不用上网也能跑，它是在我自己的浏览器里运行的。实验二：访问一个网站的登录页面，输入账号密码点提交，断网后再次提交，页面提示无法连接。可见这类操作必须先把数据送到远方的服务器，由服务器程序判断处理后返回结果，个人电脑上的浏览器并不参与验证。教师给出规范表述：在浏览者自己电脑的浏览器中解释执行的脚本称为客户端脚本，JavaScript是最典型的代表；在网站服务器上执行的脚本称为服务器端脚本，常见的有ASP、JSP、PHP等，它们运行完往往生成新的HTML发回浏览器。为加深理解，教师再举生活化对照：改自己电脑里的test.html文件，弹窗文字随我而变，因为代码就在我手里；但无论你怎样刷新维基百科，别人发表的内容绝不会因你的浏览器而变成别的样子，因为那些内容是在服务器上生成并固定下来的。教师进一步点出安全视野：客户端脚本人人可见其源代码，所以绝不能用JavaScript去验证密码，否则别人打开"查看源代码"就一目了然；真正涉及账号、成绩的验证必须由服务器端脚本完成。技术选型背后有安全考量，这是设计者必须养成的基本判断。环节七：排错演练，团队竞赛（约5分钟）教师广播一段暗藏三处错误的脚本，请各组于三分钟内找出并改正。错误依次为：script标记少写结束斜杠；alert拼写成alret；onclick后的函数名与定义不一致。小组完成后把改好的代码截图发至班级讨论区，教师领着全班集体点评，再次强调排错三步法：一读报错信息或异常现象，二对拼写逐字符核对，三对配对符号成对检查。排错能力伴随整个程序学习生涯，越早训练越早受益。环节八：课堂小结，梳理提升（约5分钟）教师请学生用一句话回答：网页脚本是什么？脚本写在哪里？在哪里执行？怎样让它在点击按钮时才执行？教师根据学生回答板书本课知识结构：脚本的含义与嵌入位置；客户端脚本在浏览器执行、可离线、可见源码；服务器端脚本在服务器执行、配合数据库、保障安全；JavaScript通过事件触发函数，通过id找到元素并修改内容。教师提醒：今天只迈出了脚本世界的第一步。脚本远不只是弹窗与变色，购物网站的自动计价、天气预报页面的实时刷新、在线文档的共同编辑，都建立在今天所学思想之上。掌握"事件—函数—元素"的三件利器，就拿到了继续深入的钥匙。环节九：布置作业，分层扩展（课后完成）基础作业：结合本课方法，为自己之前制作的班级网页至少增加两项脚本交互——一项弹出问候，一项按钮修改页面文字，下节课展示并说明所用语句的功能。拓展作业：查阅资料，尝试用JavaScript在网页中显示今天的日期与星期；思考并在导学案上回答——如果让你设计一个"输入答案、点击按钮判断对错"的小测验，你会选择客户端脚本还是服务器端脚本？理由是什么？这一问将本课的执行位置知识迁移到新的情境，为下一节深入学习JavaScript的更多语法埋下伏笔。七、板书设计主板书分三栏呈现。左栏：脚本——嵌入网页、浏览器解释执行、无需编译；位置：head或body。中栏：JavaScript三步法——事件onclick触发、function函数打包、getElementById找对象改内容。右栏：客户端脚本与服务器端脚本对照表——执行位置、能否离线运行、源代码是否可见、典型代表与安全用途。八、教学反思本课设计坚持把代码实践放在中心位置，让学生每一次学习新语法都伴随即时的可视效果，尽量压缩教师单向讲授的节奏。连续三轮保存与运行的高频反馈，既训练了规范习惯，

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论