JavaScript程序设计案例教程（第2版）课程标准教学教案

《JavaScript程序设计案例教程》课程标准【课程名称】JavaScript程序设计 【课程编码】【课程类别】专业基础课 【适用专业】计算机相关专业【授课单位】 【总学时】64【编写执笔人】 【编写日期】1．课程定位和课程设计1.1课程性质与作用1．课程性质JavaScript程序设计案例教程是一门重要的计算机专业课程。它具有很强的实践性，通过丰富的案例引导学生掌握JavaScript语言。课程涵盖语法基础、面向对象编程、DOM操作等内容。这门课既为前端开发奠定基础，又能与后端技术结合。它具有跨平台性，可在浏览器、服务器等多种环境运行。同时，课程注重培养学生的逻辑思维和问题解决能力，让学生能运用JavaScript创造出动态、交互性强的网页和应用程序。2．课程作用该课程是连接理论知识与实际应用的桥梁。通过课程学习，学生能掌握JavaScript这门广泛应用于前端开发的语言，为未来从事Web开发工作打下坚实基础。课程中的大量案例帮助学生理解抽象的编程概念，提升实际问题解决能力。在实际应用中，JavaScript可用于创建动态网页效果，如交互表单、动画特效等，极大地提升用户体验。它还能与HTML和CSS紧密结合，实现页面的丰富布局和美观设计。此外，该课程培养学生的逻辑思维和编程习惯。学生将学会如何分析问题、设计算法，并以高效的代码实现解决方案。同时，课程也有助于学生了解前端开发的最新趋势和技术，为持续学习和职业发展提供动力。1.2课程设计思路本课程以党的二十大精神为指导，有机融入党的二十大精神，秉承能力教育与思想教育同向同行的理念，尽可能选取既对应相关知识点，又能够体现职业素养并与实际应用紧密相关的案例；同时在教学中激发学生的爱国热情、创新意识，提高学生的职业素养，引导学生树立正确的人生观和价值观，鼓励学生成长为能够担当国家建设大任的时代新人，培养具有正确价值观的高技能型人才。课程上结合企业对软件开发相关人才的实际要求，与实际应用紧密结合，使学生在做中学，学中做，学完即可上手操作，帮助学生更快达到学以致用的目的。还可以锻炼学生的工作思维和实践技能，实现学生实战能力与岗位要求之间的无缝对接。2．课程目标2.1知识目标（1）了解JavaScript的起源、应用和特点；理解JavaScript和ECMAScript的关系；了解编辑器和浏览器相关知识及其应用；掌握JavaScript基础应用；能够使用JavaScript实现简单的网页功能。（2）了解标识符的概念及其定义规则；掌握变量的声明和赋值方法；熟悉常用数据类型；掌握常用运算符的应用；掌握流程控制语句的应用。（3）了解什么是引用类型；掌握定义数组的方法；掌握数组元素的基本操作；掌握数组的遍历；掌握数组相关方法的应用。（4）了解什么是函数；掌握函数的定义与调用；了解作用域及其应用；掌握匿名函数的应用；了解函数的嵌套和递归；了解变量提升；掌握闭包函数的应用。（5）理解面向对象思想，了解面向对象和面向过程的区别；了解对象的概念并掌握自定义对象的方法；掌握如何使用构造器创建自定义对象；掌握内置对象的常用属性和方法；掌握对象继承的应用。（6）了解什么是BOM；掌握window对象常用属性和方法；掌握location对象常用属性和方法；掌握history对象常用属性和方法；掌握navigator对象常用属性和方法；掌握screen对象常用属性和方法；掌握定时器的使用。（7）了解什么是DOM；了解HTML节点树；掌握常见HTML元素操作；掌握常见DOM节点操作。（8）了解什么是事件；掌握事件绑定方式；理解事件捕获和冒泡；掌握事件对象使用；掌握多种事件类型；掌握事件优化方式。（9）了解什么是Ajax；了解如何搭建Web服务器；掌握使用XMLHttpRequest进行网络请求的方法；掌握常见网络请求方式的应用；理解XML和JSON的区别；掌握常见跨域请求方式。（10）掌握Cookie的常见用法；掌握sessionStorage的常见用法；掌握localStorage的常见用法。（11）了解什么是正则表达式；掌握常见正则表达式的应用；掌握正则表达式的语法规则；掌握String类中常用方法的应用；掌握RegExp类中常用方法的应用。（12）掌握安装和在文档中引入Vue的方法；掌握创建Vue实例的方法并了解其生命周期；掌握Vue数据绑定的方法；掌握Vue计算属性和侦听器的应用；了解Vue模板渲染语法。（13）掌握使用浏览器事件处理游戏中各种操作的方法；能够使用CSS提升游戏效果。2.2能力目标（1）能够运用合适的开发工具进行JavaScript代码的编写、运行和调试；具备解决浏览器兼容性问题的能力，确保开发的网页能在各种浏览器上正常运行。（2）通过学习JavaScript的基本语法、数据类型、运算符、流程控制语句、函数、数组、对象等知识，能够熟练运用JavaScript进行程序设计和开发，具备解决实际问题的能力。（3）熟练使用运算符进行数学运算和逻辑判断；能够运用流程控制语句编写具有逻辑结构的程序，实现条件判断和循环执行等功能；在编程过程中，能够识别和处理常见的错误，如语法错误、逻辑错误等，提高程序的稳定性和可靠性。（4）通过综合案例的学习和实践，学生能够将所学的函数知识综合运用到实际的编程中，解决实际问题；培养学生的创新思维和解决问题的能力，能够根据具体需求设计和实现合适的函数和算法。（5）通过学习面向对象的概念、三大特征（封装、继承、多态），以及对象、构造器、内置对象等知识，能够运用面向对象的思想进行程序设计，提高代码的复用性、可维护性和可扩展性。（6）通过学习BOM（浏览器对象模型）和DOM（文档对象模型），能够熟练操作浏览器窗口、网页元素和文档节点，实现网页的动态交互和可视化效果，具备开发完整网页的能力。（7）通过学习事件的概念、绑定方式、事件流、事件对象的使用，以及多种事件类型（鼠标事件、触摸事件、键盘事件、焦点事件、页面事件、HTML5事件等），能够实现用户与网页的交互功能，提升网页的用户体验。（8）通过学习Ajax技术，能够实现浏览器与服务器的异步数据交互，掌握数据交换格式（XML和JSON）的使用，以及跨域请求的处理方式，具备开发高效、动态网页应用的能力。（9）通过学习Cookie、sessionStorage、localStorage等浏览器存储方式，能够合理地存储和管理网页数据，实现数据的本地缓存和持久化，提高网页的性能和用户体验。（10）能够创建和应用正则表达式进行文本匹配和验证；熟悉String类和RegExp类中与正则表达式相关的方法，能够运用这些方法解决实际问题；提高编程能力和解决问题的能力，能够运用正则表达式实现表单验证、模板语法等功能，增强对文本处理的能力。（11）熟练使用Vue进行数据绑定、事件处理、条件渲染和循环渲染，以及如何创建响应式用户界面。学生具备解决实际问题的能力，并激发对前端技术探索的热情。（12）将之前所学的JavaScript知识，如DOM操作、事件处理、定时器使用等，综合运用到贪吃蛇游戏的开发中，培养学生对知识的综合运用能力；通过分析游戏需求，解决游戏开发中遇到的各种问题，如小蛇移动、碰撞检测、食物生成等，培养学生解决实际问题的能力。2.3素质（思政）目标（1）通过对计算机技术的了解，增强探索意识；树立正确的价值观，提高媒介素养。（2）在学习和工作中培养刻苦努力、精益求精的态度；增强遵守规则的意识，养成按规矩行事的习惯；加强基础知识的学习，从而实现从量变到质变的转化，为个人的长远发展打下坚实的基础。（3）强化网络安全意识，树立正确的理想信念；增强个人信息保护和依法维权意识。（4）提高对相似事物归纳总结的能力；提高组织管理能力，加强团队合作能力；培养人文精神和法治意识。（5）培养精益求精、科学严谨、追求卓越的工匠精神；养成良好的时间管理习惯；继承优良传统，培养创新精神。（6）树立科技强国、为人民服务的远大理想；增强法律意识，正确履行自身的责任和义务。（7）发扬精益求精的工匠精神，养成严谨的科学作风；了解国家政策，心系国家建设，树立技能报国的人生理想。（8）了解科技发展，树立刻苦钻研、科技创新的人生目标；提高选择合适方法解决不同问题的能力。（9）关注国家发展，心系国家建设，增强民族意识；增强版权意识，培养创新精神。（10）增强网络安全意识，养成良好的职业习惯；心系国家建设，坚持以人民为中心，强化民族意识；树立正确的网络安全观，提高在信息化发展中的幸福感、安全感。（11）培养利用计算机技术解决实际问题的能力；夯实基础，提高专业水平，心系国家政府网站建设。（12）关注科技前沿新技术，激发为国争光的热情；培养执着专注、精益求精、追求卓越的工匠精神。（13）养成分析问题，事前规划的良好习惯；树立正确的文化观，提高将文化与科技融合的能力。3．课程内容与教学要求本课程包含JavaScript入门、基本语法、数组、函数、面向对象、BOM、DOM、事件、Ajax、浏览器存储、正则表达式、Vue、网页版贪吃蛇，共13个部分的内容，60学时。具体安排如下表所示：所用教材课程内容教学建议与说明学时分配《JavaScript程序设计案例教程》第1章JavaScript入门1.1JavaScript介绍1.2开发工具问答法、讨论法、讲授法、项目式教学法241.3快速上手综合案例：用户登录验证问答法、讨论法、讲授法、项目式教学法2第2章基本语法2.1基本概念2.2变量2.3数据类型问答法、讨论法、讲授法、项目式教学法462.4运算符2.5流程控制语句综合案例：计算银行存款问答法、讨论法、讲授法、项目式教学法2第3章数组3.1认识引用类型3.2数组问答法、讨论法、讲授法、项目式教学法243.2数组综合案例：地区选择器问答法、讨论法、讲授法、项目式教学法2第4章函数4.1函数的定义与调用4.2作用域4.3匿名函数问答法、讨论法、讲授法、项目式教学法464.4嵌套与递归4.5闭包函数综合案例：简易版计算器问答法、讨论法、讲授法、项目式教学法2第5章面向对象5.1面向对象介绍5.2对象问答法、讨论法、讲授法、项目式教学法265.3构造器5.4内置对象问答法、讨论法、讲授法、项目式教学法25.5继承综合案例：限制输入框输入问答法、讨论法、讲授法、项目式教学法2第6章BOM6.1BOM介绍6.2window对象6.3location对象问答法、讨论法、讲授法、项目式教学法266.4history对象6.5navigator对象6.6screen对象问答法、讨论法、讲授法、项目式教学法26.7定时器综合案例：限时秒杀活动问答法、讨论法、讲授法、项目式教学法2第7章DOM7.1DOM介绍7.2HTML元素操作问答法、讨论法、讲授法、项目式教学法247.3DOM节点操作综合案例：电商购物车问答法、讨论法、讲授法、项目式教学法2第8章事件8.1事件介绍8.2事件对象问答法、讨论法、讲授法、项目式教学法248.3事件类型8.4事件优化综合案例：图片懒加载问答法、讨论法、讲授法、项目式教学法2第9章Ajax9.1初识Ajax9.2Web服务器搭建问答法、讨论法、讲授法、项目式教学法269.3XMLHttpRequest9.4数据交换格式问答法、讨论法、讲授法、项目式教学法29.5跨域处理综合案例：多图上传功能问答法、讨论法、讲授法、项目式教学法2第10章浏览器存储10.1Cookie10.2sessionStorage和localStorage问答法、讨论法、讲授法、项目式教学法2410.2sessionStorage和localStorage综合案例：跨页表单提交问答法、讨论法、讲授法、项目式教学法2第11章正则表达式11.1初识正则表达式11.2正则表达式的语法规则问答法、讨论法、讲授法、项目式教学法2411.3与正则表达式相关的方法综合案例：实现表单验证问答法、讨论法、讲授法、项目式教学法2第12章Vue12.1Vue入门12.2Vue实例问答法、讨论法、讲授法、项目式教学法2612.3数据绑定12.4计算属性和侦听器问答法、讨论法、讲授法、项目式教学法212.5模板渲染综合案例：实现TodoList问答法、讨论法、讲授法、项目式教学法2第13章网页版贪吃蛇13.1功能展示13.2功能分析问答法、讨论法、讲授法、项目式教学法2413.3功能实现问答法、讨论法、讲授法、项目式教学法2 4．课程实施4.1教学条件（1）教师能力担任本课程的主讲教师最好具有双师型素质或是双师型教师，具备较丰富的教学经验，以及丰富的网站开发经验，能够根据本课程标准制定详细的授课计划，对每一堂课的教学过程精心设计，做出详细、具体的安排，以及较强的施教能力。同时具有扎实的计算机专业知识，熟练使用JavaScript相关软件，掌握网站开发、调试和应用中的关键点和技巧，具备较强的语言表达能力及教学组织能力，在教学过程中具备一定的课堂控制能力和应变能力。（2）多媒体教室多媒体教学可以使授课方式变得方便、快捷，使一些抽象难懂的知识或者操作变得直观而形象，使课堂教学活动变得活泼生动有趣，节省了教师授课时的板书时间,提高了教学效率。（3）计算机实训室上机操作是学生对课堂理论学习内容的再深造，可以直接体现学生对所学知识掌握程度，对提高学生的动脑、动手和实践创新能力起着决定的作用。4.2教学方法建议教师在教学过程中，可根据自己班级学生的实际情况，灵活选用教学方法，找到适合自己学生的方法，争取让每位学生都能自己动手完成本课程的所有项目。在讲授过程中，教师可根据实际情况选择合适的教学模式，可先行开展相关理论知识的教学，让学生积累足够的知识，再让学生进行任务实施，达到学以致用的教学目的。本课程可采用问答法、讨论法、讲授法、项目式教学法等多种方法，努力让学生掌握所学知识，并达到熟练运用，所有任务都能亲自动手完成。通过问答法，将教材的知识点以问题的形式呈现在学生的面前，让学生在寻求，探索解决问题的思维活动中，掌握知识、发展智力、培养技能，进而培养学生自己发现问题解决问题的能力。通过讨论法，通过预先的设计与组织，启发学生就特定问题发表自己的见解，以培养学生的独立思考水平和创新精神。通过项目式教学法，以任务需求来带动教学，每次课都有相应的任务和问题，让学生来完成，培养学生分析问题、解决问题和思考问题的习惯，增强学生实践操作能力。通过讲授法，让学生学习基本理论和方法。结合已有的知识，适当组织一些讨论，充分调动学生的主观能动性。通过问答法，回顾所学知识内容，引导学生思考问题的方式和方法，增强学生上课的专注度。适当增加迭代教学，把重要的知识、思想、经验在课程中反复涉及到，但每次涉及到这些内容时又不是简单地重复，而是在回顾原有的内容的基础上做进一步地深入和升华，既强化了记忆和理解，又拓展了新的视野，深化了理解。4.3教学评价与考核要求课程的教学评价由形成性测评（40%）和终结性测评（60%）组成，其考核要求如下：4.3.1形成性测评形成性测评考核学生在学习本课程过程中的学习情况和实际应用能力的发展情况，包括违纪考核（20%）、知识掌握情况考核（30%）、工作任务完成情况考核（50%）等。（1）违纪考核本项考核通过课前点名、上课纪律考核学生的课堂出勤率。上课迟到扣5分，上课吃东西扣5分，上课玩手机扣5分，其他扰乱课堂秩序的行为扣5分。（2）知识掌握情况考核本项考核主要通过在课堂上对学生学习态度，课堂发言，课堂参与度，问题分析和解决能力，所学知识点，项目实施过程。每次考核划分为优秀（30分）、良好（25分）、中等（15分）、及格（10分）和不及格（5分）五个档次。最后考核成绩为学生每次任务成绩的平均数。（3）工作任务完成情况考核本项考核主要通过学生对任务的解读能力、软件使用的能力、排查错误的能力、任务完成情况等，来检测其知识掌握情况、自主学习能力、团队协作能力，动手操作能力。每次工作任务完成情况按照相应标准而定，划分为优秀（50分）、良好（40分）、中等（30分）、及格（15分）和不及格（5分）五个档次。最后考核成绩为学生每次任务成绩的平均数。4.3.2终结性测评终结性测评主要考核学生在学完本课程后所达到的水平，通过期末考试进行考核。期末考试由闭卷笔试（60%）组成，主要评估学生对本门课程基本知识的掌握情况与综合运用能力。5．课程资源开发与利用5.1建议教材5.2网络资源

《JavaScript程序设计案例教程》

教案课时分配表章序课程内容课时备注1JavaScript入门42基本语法63数组44函数65面向对象66BOM67DOM48事件49Ajax610浏览器存储411正则表达式412Vue613网页版贪吃蛇4合计64

课题JavaScript入门课时4课时（180min）教学目标知识目标：（1）了解JavaScript的起源、应用和特点（2）理解JavaScript和ECMAScript的关系（3）了解编辑器和浏览器相关知识及其应用（4） 掌握JavaScript基础应用（5） 能够使用JavaScript实现简单的网页功能能力目标：（1）能够运用合适的开发工具进行JavaScript代码的编写、运行和调试（2）掌握在HTML中以不同方式引入JavaScript的方法，并能根据实际项目需求进行正确选择（3）能够通过触发事件（如按钮点击事件等）实现网页的交互效果，提升用户体验（4）具备解决浏览器兼容性问题的能力，确保开发的网页能在各种浏览器上正常运行素质目标：（1） 通过对计算机技术的了解，增强探索意识（2） 树立正确的价值观，提高媒介素养教学重难点教学重点：HTML引入JavaScript的三种方式及外链优势，常用输出语句，基础表达式，开发工具（编辑器、浏览器），编辑器编写代码，浏览器运行调试代码教学难点：JavaScript与ECMAScript的关系及完整组成，不同方式引入JavaScript的场景选择，处理不同编辑器和浏览器的兼容性问题教学方法问答法、讨论法、讲授法教学用具电脑、投影仪、多媒体课件、教材教学过程主要教学内容及步骤课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请同学们打开常用的浏览器（如Chrome、Firefox等），浏览至少三个不同类型的网站，如新闻网站、购物网站、社交网站等。在浏览过程中，仔细观察网页上的各种交互元素并记录，然后在APP上发表记录。【学生】完成课前任务考勤【教师】使用APP进行签到【学生】班干部报请假人员及原因新课预热【教师】自我介绍，与学生简单互动，介绍课程内容、考核标准等【学生】聆听、互动【教师】讲解JavaScript是网页前端开发的必备技术，增强学生的学习兴趣HTML、CSS和JavaScript是网页前端开发的必备技术。使用HTML和CSS可以制作静态的没有交互性的网页，而要使网页具有交互效果，就必须要使用JavaScript来实现。我们每天都在使用电脑或手机浏览各种各样的网页，可以说浏览网页已经成为我们生活的一部分，这些与我们紧密相关的网页的实现都离不开JavaScript。【学生】聆听、记录、理解问题导入【教师】提出以下问题：同学们，当我们在浏览网页时，经常会遇到一些很酷炫的效果和便捷的交互体验，这些丰富的交互功能是如何实现的呢？它们背后又运用了哪些技术呢？传授新知【教师】通过学生的回答，引入新知，讲解JavaScript的基础知识，JavaScript的开发工具，并编写第一个JavaScript程序1.1JavaScript介绍1.1.1JavaScript的起源1995年，NetScape（网景）公司决定开发一种与Java搭配使用且语法上类似辅助脚本的语言，其公司员工BrendanEich（布兰登·艾奇）仅花费10天时间便设计出了该脚本语言的原型。这门脚本语言最初命名为Mocha，1995年9月改名为LiveScript，同年12月，NetScape公司与Sun公司组成的开发联盟为了让这门语言搭上Java这门编程语言的热度，将其临时改名为JavaScript。但实际上Java和JavaScript是两门完全不同的语言，除了在语法上有些类似之外，并没有太多的共同点。……（详见教材）1.1.2JavaScript的应用JavaScript是一种可以嵌入到网页文件中的编程语言，可以实现网页的交互效果，使用户体验更好。例如，当用户在网页上填写手机号和验证码时，可以在浏览器端通过JavaScript进行校验，如果不符合校验规则，可以直接给出用户提示，而不必提交到服务器，这不仅给了用户好的体验，还减轻了服务器端的压力。✈【教师】利用多媒体展示“百度搜索框”和“网页上的轮播图效果”图片（详见教材），并进行讲解当我们在百度搜索框中输入关键词时，搜索框将会给出几个与关键词相关的提示。这是一个使用JavaScript实现的简单效果。另外，使用JavaScript还能实现网页中最常用到的轮播图效果。1.1.3JavaScript的特点1．JavaScript是脚本语言脚本是一条条可执行的文本命令，一般按照自上而下的顺序执行。常见的脚本语言有JavaScript、PHP、Python、Perl等，而C、C++、Java、Golang等语言并不属于脚本语言。非脚本语言一般需要经过编译、链接，生成可执行文件后才能够运行。而脚本语言主要依赖于脚本解释器，代码在运行时自动进行解释或编译。……（详见教材）2．支持面向对象编程，面向过程编程，函数式编程JavaScript是一种基于原型和函数的编程语言，同时也是一种多范式的语言，支持面向对象编程、命令式（面向过程）编程及函数式编程。✈提示函数式编程（functionalprogramming）是将计算机运算视为函数的计算的编程范式。3．支持跨平台执行JavaScript的执行主要依赖于浏览器的JavaScript引擎，目前几乎所有浏览器都支持运行JavaScript，并且JavaScript语言本身不依赖操作系统，在任何平台上都可以运行。在移动互联网时代，利用手机等移动设备上网的用户越来越多，JavaScript的跨平台特性使其承担更大的责任。1.1.4JavaScript和ECMAScript的关系ECMAScript是由Ecma国际（前身为欧洲计算机制造商协会）通过ECMA-262标准化的脚本程序设计语言，简称ES。JavaScript和Jscript语言可以理解为ECMAScript的实现和扩展。完整的JavaScript由三部分组成，分别是ECMAScript、DOM、BOM（详见教材）。ECMAScript从1997年发布首个版本开始，截至目前已经更新了10个版本。从2015年6月的ECMAScript2015（简称ES6）开始，ECMAScript每年会更新一个版本。【课堂讨论】✈【教师】对学生进行分组，每组选出一名组长，然后组织学生以小组为单位讨论以下问题：请结合自己日常浏览网页的经验，举例说明JavaScript实现的交互效果，讨论这些交互效果给用户带来哪些体验？✈【学生】聆听、思考、小组讨论，由小组代表上台发表讨论结果✈【教师】总结学生的讨论结果1.2开发工具1.2.1编辑器编辑器是进行Web前端开发必不可少的工具，一款优秀的编辑器能够大幅提高开发者的工作效率。目前比较流行的Web前端开发编辑器有SublimeText、VisualStudioCode和WebStorm。接下来将分别对它们进行简单介绍。1．SublimeTextSublimeText（简称Sublime）是一款轻量级的代码编辑器，它具有简洁清爽的用户界面，支持多行编辑、编程语言语法高亮、快速文件切换等功能。与此同时，它拥有较为丰富的插件，可以根据需要加强编辑器本身的功能。另外，Sublime是一款跨平台的编辑器，支持Windows、MacOS、Linux等主流操作系统。2．VisualStudioCodeVisualStudioCode（简称VSCode）是一款由微软开发，同时支持Windows、MacOS、Linux等操作系统且开源的代码编辑器。它具有Git版本控制功能，同时也具有代码补全、代码片段和代码重构等功能。另外，该编辑器支持用户个性化配置（如改变主题颜色），同时还内置了丰富的插件管理功能。✈【教师】组织学生阅读“Git版本控制系统”的内容（详见教材），并提出问题：使用Git版本控制系统的优点有哪些？✈【学生】阅读、思考、举手回答✈【教师】总结学生的回答3．WebStormWebStorm是由JetBrains软件公司开发的商业付费版Web开发工具，同时支持Windows、MacOS、Linux等操作系统。它内置了非常强大的代码提示功能和各种丰富的插件，方便用户使用。同时WebStorm集成了对Vue、React等框架的支持，并内置了强大的Git管理工具。✈【教师】利用多媒体展示“常用编辑器”表格和“SublimeText编辑器”图片（详见教材），并进行讲解除前面介绍的3种编辑器外，比较常用的还有由GitHub开发的Atom和由DCloud开发的HBuilderX。“常用编辑器”表格中展示了5种编辑器的相关信息，读者可根据需要选择应用。在上述5种编辑器中，SublimeText最为小巧、简洁，同时资源占用较少，非常适合JavaScript初学者使用。1.2.2浏览器✈【教师】利用多媒体展示“目前常见浏览器及其特点”表格（详见教材），并进行讲解浏览器是用户访问互联网上各种网页的必备工具。和编辑器类似，目前市面上也有多种多样的浏览器，而且大部分浏览器同时存在桌面版和移动版。不同类型和版本的浏览器对网页功能的支持也有所不同。作为JavaScript程序开发者，需要解决各种各样的浏览器兼容性问题，以确保开发的网页能在各种浏览器上运行。“目前常见浏览器及其特点”表格中列出了目前常见的几种浏览器及其特点。【课堂问答】✈【教师】随机邀请学生回答以下问题在实际的JavaScript开发中，应如何根据项目需求来挑选最合适的编辑器和浏览器组合呢？✈【学生】聆听、思考、回答✈【教师】总结学生的回答“目前常见浏览器及其特点”表格中所展示的浏览器，都存在多个版本，如IE浏览器常见的版本有8、9、10等。在一些老版本的Windows电脑中还会有IE6版本的浏览器，如果要让这部分用户正常使用网页功能，可能还需要做一些兼容性处理。本书将采用目前市场占有率最高的Chrome浏览器运行和调试程序。……（详见教材）1．渲染引擎（1）WebKit。WebKit是一个开源的渲染引擎，其前身是KDE小组的KHTML引擎。WebKit主要应用于Apple的Safari浏览器。另外老版本的安卓系统浏览器也是应用的WebKit。（2）Gecko。Gecko是一套用C++编写的开源渲染引擎，其特点是代码完全公开，可开发程度很高。Gecko因其开源的特点受到许多人的青睐，支持Gecko渲染引擎的浏览器很多，Firefox便是其中之一。（3）Trident。Trident是Microsoft著名的IE浏览器使用的渲染引擎，从IE4开始一直使用到IE11。IE本身的“垄断性”使得Trident长期一家独大，并且微软很长时间都没有更新Trident，这导致Trident引擎与浏览器标准脱离较远，以及存在许多未修复的bug。（4）Blink。Blink是由Google主导开发的开源浏览器渲染引擎。它是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及其之后的版本）等浏览器中使用。目前众多国产浏览器都在使用Blink渲染引擎，如360、QQ、搜狗浏览器等。2．JavaScript引擎（1）JavaScriptCore。JavaScriptCore是WebKit的一部分，主要应用于safari浏览器。（2）V8。V8是由Google开发的开源JavaScript引擎，主要应用于Chrome浏览器。值得一提的是，Node.js也集成了V8引擎。（3）Chakra。Chakra是由微软开发的JavaScript引擎，主要应用于IE9～IE11浏览器。（4）SpiderMonkey。SpiderMonkey是世界上第一款JavaScript引擎，由NetScape公司的BrendanEich设计，之后由Mozilla维护，主要应用于Firefox浏览器。【课堂问答】✈【教师】随机邀请学生回答以下问题请同学们根据上述浏览器内核的渲染引擎和JavaScript引擎的讲解，试举例说明不同的渲染引擎和JavaScript引擎在性能和功能上有哪些主要差异？✈【学生】聆听、思考、回答✈【教师】总结学生的回答✈【教师】提出问题：互联网信息良莠不齐，我们如何才能合理利用网络、参与网络生活呢？✈【学生】聆听、思考、回答✈【教师】总结学生的回答我们要提高媒介素养，积极利用互联网获取新知、促进沟通、完善自我。互联网是传播人类优秀文化、弘扬正能量的重要载体。我们应该合理利用网络，理性参与网络生活，传播网络正能量。1.2.3【示例】HelloWorld✈【教师】扫码播放“【示例】HelloWorld”微课，帮助学生了解编写及运行JavaScript程序的基本步骤和方法在简单了解了JavaScript的来历和开发工具后，相信大家已经跃跃欲试，想要亲自动手编写网页程序了。本节带领大家动手编写第一个JavaScript程序。（实例位置：example/ch1/example1.2.3.html）1．创建网页文件首先在本地磁盘创建一个文件夹code，然后在该文件夹中右键新建一个文本文档，并设置文件名为index.html，最后使用Sublime编辑器将index.html文件打开。2．编写网页代码在打开的index.html中编写简单的网页程序，其中包括<html>、<head>、<body>等标签元素，代码如下：……（详见教材）上述代码中设置了网页语言为en（英语），网页编码方式为UTF-8，以帮助浏览器正确识别网页编码。3．在网页中插入JavaScript代码如果在网页中直接编写JavaScript代码，会被浏览器识别为普通文本。为此需要在网页中插入一个<script></script>标签对，然后在该标签对中编写对应的JavaScript代码。一般将<script></script>标签对放在<head>标签或者<body>标签中，代码如下：……（详见教材）✈拓展阅读<script>标签放在<head>标签和<body>标签中，浏览器的执行顺序会有所不同。放在<head>标签中时，浏览器会先执行<script>标签代码，再渲染<body>标签中的内容；放在<body>标签中时，浏览器会先渲染<body>标签中的内容，再执行<script>标签代码。4．运行网页程序使用Chrome浏览器打开index.html文件，将会看到网页运行效果（详见教材）。单击提示框中的“确定”按钮，可看到网页内容。✈提示在编写JavaScript代码时，需要注意基本的语法规则，避免程序出错。（1）JavaScript区分大小写，如果将上述代码中的alert写为Alert，JavaScript程序将无法运行。（2）JavaScript对空格、换行、缩进不敏感，一条语句可以分成多行书写。（3）JavaScript中双引号和单引号都可以表示字符串。1.3快速上手1.3.1在HTML中引入JavaScript✈【教师】扫码播放“在HTML中引入JavaScript”微课，帮助学生了解使用内联式、外链式、行内式三种方式引入JavaScript的方法在HTML中可以使用内联式、外链式、行内式三种方式引入JavaScript。不同的方式对应不同的使用情况，下面分别介绍这三种方式。1．内联式内联式是将JavaScript代码包裹在<script>标签中直接编写到HTML文件中。1.2.3节的案例就是通过内联方式引入JavaScript代码的。使用内联方式引入JavaScript的形式如下：<scripttype="text/javascript"> JavaScript代码;</script>上述代码中，<script>标签的属性type用于告诉浏览器该段JavaScript代码的类型。在HTML5标准中，<script>标签的type属性默认为“text/javascript”，在不考虑老版本浏览器兼容性的情况下，可以不写type属性。type属性除可以为“text/javascript”外，还可以为其他类型，感兴趣的读者可以自行查阅学习。2．外链式外链式是指创建一个扩展名为js的文件，将JavaScript代码编写在该文件里，然后通过<script>标签的src属性将文件引入到网页中。下面通过实例进行说明。【课堂练习】✈【教师】利用多媒体展示【例1-1】，并进行讲解，帮助学生掌握使用外链方式在网页中引入JavaScript代码，实现网页弹窗效果的方法使用外链方式在网页中引入JavaScript代码，实现网页弹窗效果。（实例位置：example/ch1/1-1.html）。……（详见教材）✈【学生】聆听、思考、理解✈高手点拨由上述示例代码可以看出，<script>标签的src属性值是一个文件路径。src属性值除了可以是文件路径（包括相对路径和绝对路径）外，还可以是URL地址。（1）相对路径……（详见教材）（2）绝对路径……（详见教材）（3）URL地址……（详见教材）✈拓展阅读在网页加载时，用户都会希望尽快加载出网页内容和样式。当将<script>标签放在<head>标签中时，浏览器执行到<script>标签时会进行JavaScript代码的下载和执行，这样会阻止浏览器对HTML内容的解析和显示。所以通常会将<script>标签放在</body>标签前的位置，即所有网页内容之后，这样可以减少<script>标签对网页内容显示的影响。……（详见教材）3．行内式行内式是指将JavaScript代码作为HTML标签的属性值使用。例如，单击网页上的按钮弹出提示框，可通过以下代码实现。<buttononclick="alert('点击按钮')">我是个按钮</button>除按钮单击事件之外，为<a>标签的href属性赋值JavaScript代码后，单击链接标签也能弹出提示框，代码如下：<ahref="javascript:alert('点击链接');">我是个链接</a>现代网页开发提倡使用HTML、CSS、JavaScript分离的方式，即CSS和JavaScript都通过外链的方式引入。这样既能减少HTML文件的大小，也能通过defer等属性提升网页加载速度，还能增加代码的可读性和可维护性。另外，通过外链方式引入的JavaScript代码可以使用CDN（contentdeliverynetwork，内容分发网络），进一步加快文件下载速度，提升网页性能。建议今后在网页开发中尽量使用外链方式引入JavaScript。【课堂问答】✈【教师】随机邀请学生回答以下问题在HTML中引入JavaScript的内联式、外链式和行内式各有什么优缺点？在实际开发中应如何选择合适的引入方式？✈【学生】聆听、思考、回答✈【教师】总结学生的回答1.3.2常用输出语句利用输出语句可以输出一段代码的执行结果，在学习JavaScript时经常会用到输出语句。下面介绍3个常用的输出语句。1．console.log()console.log()主要用于在浏览器控制台输出相关内容，代码如下：console.log('这是一个log'); //输出结果“这是一个log”✈【教师】利用多媒体展示“console.log()控制台输出”图片（详见教材），并进行讲解在code文件夹下创建console.html文件，并在<script>标签中编写上述代码，再使用浏览器打开console.html文件，在网页空白处单击鼠标右键，在弹出的快捷菜单中选择“检查”项可打开调试工具，切换到“Console”选项卡，可看到输出结果，如图所示。……（详见教材）2．alert()使用alert()方法可以在浏览器中弹出一个警示框，确保用户可以看到某些重要信息。alert()方法在之前的案例中已经多次用到过，此处不再对其用法做过多介绍。除上述用处外，alert()方法还常用于测试程序。3．prompt()prompt()方法用于显示提示用户输入信息的对话框，代码如下：prompt('请输入密码'); //提示用户“请输入密码”✈【教师】利用多媒体展示“prompt()弹窗”图片（详见教材），并进行讲解代码运行结果如图所示。✈提示当网页弹窗运行时，弹窗之后的JavaScript代码将会停止执行，只有在弹窗消失后，后续JavaScript代码才会继续执行。【课堂问答】✈【教师】随机邀请学生回答以下问题常用输出语句console.log()、alert()和prompt()在功能上有哪些不同？分别适用于哪些场景？✈【学生】聆听、思考、回答✈【教师】总结学生的回答1.3.3基础表达式1．变量声明与赋值变量可以理解为一个容器，每个容器都有一个独一无二的名称，这个名称就是变量名。当需要多次使用同一个数据时，可以定义一个变量来保存该数据。一般采用以下方法声明和赋值变量。varapple; //声明变量applevarnum=1; //声明变量num，并赋值为1console.log(num); //输出结果12．算术运算JavaScript支持+（加）、-（减）、*（乘）、/（除）四则运算，示例如下：console.log(1+1); //输出结果2console.log(1+5*2); //输出结果11console.log((4-2)/2); //输出结果1……（详见教材）3．比较数字大小使用JavaScript中的比较运算符可以比较两个数字的大小，示例如下：console.log(10>2); //输出结果trueconsole.log(5<2); //输出结果falseconsole.log(3==5); //输出结果falseconsole.log(8==8); //输出结果true……（详见教材）4．字符串输出JavaScript中的字符串是指使用单引号或双引号包裹的数据，示例如下：console.log('hello'); //输出结果helloconsole.log("world"); //输出结果world5．字符串拼接字符串拼接是指将两个或两个以上字符串组合成一个字符串，通常使用“+”运算符进行字符串拼接操作，示例如下：console.log('hello'+'world'); //输出结果helloworldconsole.log('abc'+'123'); //输出结果abc1236．比较字符串是否相同使用“==”操作符可以比较两个字符串是否相同，示例如下：console.log('doc'=='doc'); //输出结果trueconsole.log('a'=='b'); //输出结果false7．根据比较结果执行不同的代码在JavaScript程序中，有时需要根据比较结果执行不同的代码，这就用到了if…else语句，示例如下：if('doc'=='cod'){ console.log('equal'); //比较结果为true时执行}else{ console.log('unequal'); //比较结果为false时执行}上述代码的执行结果为unequal，因为doc并不等于cod。【课堂讨论】✈【教师】组织学生以小组为单位讨论以下问题：请同学们结合上述基础表达式中的各种操作（变量声明与赋值、算术运算、比较大小、字符串操作等）的讲解，讨论其在实际网页开发中有哪些具体应用。✈【学生】聆听、思考、小组讨论，由小组代表上台发表讨论结果✈【教师】总结学生的讨论结果1.3.4函数在软件开发领域，有一个专有名词叫封装。封装简单来讲就是使用函数将一段代码或者一个功能模块单独抽离出来，然后通过调用一个个函数来完成任务。这样不仅可以减少代码的重复编写，还能使代码整体结构更加清晰。我们频繁使用的console.log()就是一个系统自带的函数。一般使用关键字function定义函数，函数的详细内容见第4章。【课堂问答】✈【教师】随机邀请学生回答以下问题函数在JavaScript开发中的作用是什么？请结合具体例子说明如何进行函数的封装以及调用函数带来的好处。✈【学生】聆听、思考、回答✈【教师】总结学生的回答1.3.5事件事件是指可以被JavaScript侦测到的行为，如在网页中移动或单击鼠标，敲击键盘等。可以通过触发事件执行特定的JavaScript代码，从而实现网页的交互效果。例如，用户单击页面上的某个按钮，就触发了单击事件，此时浏览器会打开一个提示框。【课堂练习】✈【教师】利用多媒体展示【例1-2】，并进行讲解，帮助学生掌握编写JavaScript代码实现单击按钮触发事件的方法编写JavaScript代码实现单击按钮触发事件。（实例位置：example/ch1/1-2.html）。……（详见教材）✈【学生】聆听、思考、理解……（详见教材）1.3.6【示例】改变网页文字颜色本节通过编写一个简单的JavaScript程序，实现单击按钮让网页中文字变色的效果。（实例位置：example/ch1/example1.3.6.html）示例代码如下：（详见教材）上述代码第8行是1个“我会变色”的<h1>标签，9～13行编写了5个对应不同颜色的按钮，单击每个按钮都会调用setColor()方法，并传入对应的颜色作为函数参数。setColor()方法使用document.getElementsByTagName('h1')获取页面上的<h1>标签，然后通过该标签的style对象的color属性设置颜色。style表示对应元素的样式，color对应CSS中的color属性。使用浏览器打开网页文件。单击“变为蓝色”按钮，可以看到“我会变色”4个字变为蓝色。有些同学可能现在还看不太懂案例中的个别语句，这没关系，学完后面的内容自然就会懂了。【学生】聆听、思考、理解、记录课堂实训【教师】讲述“用户登录验证”实现的功能，介绍设计思路，演示任务步骤，并组织学生以小组为单位完成任务网站一般都有用户登录注册模块，本案例将制作一个用户登录页面。该页面使用JavaScript程序获取用户输入的用户名和密码，如果输入的用户名和密码正确，提示用户登录成功；如果用户名或密码不正确，则提示用户输入的用户名或密码错误。（实例位置：example/ch1/login.html）新建网页文档“login.html”，在其中输入以下代码并保存文档。1 <!DOCTYPEhtml>2 <htmllang="en">3 <head>4 <metacharset="UTF-8">5 <title>用户登录校验</title>6 </head>7 <body>8 <script>9 varusername=prompt('请输入用户名'); //提示输入用户名 //如果用户名为“tom”，则提示输入密码10 if(username=='tom'){11 varpassword=prompt('请输入密码');……（详见教材）上述第10行代码，将用户输入的用户名与“tom”对比，如果匹配则让用户继续输入密码，如果不匹配则提示“用户名输入错误”。第12行代码将用户输入的密码与“123456”对比，如果用户输入的密码与“123456”匹配，则提示用户“登录成功”，否则提示用户“密码输入错误”。使用浏览器打开网页文档，将弹出“请输入用户名”提示框。当输入正确的用户名“tom”并单击“确定”按钮后，会提示用户“请输入密码”。当输入正确的密码“123456”后单击“确定”按钮，会提示“登录成功”。【学生】观看、聆听、思考、按要求完成任务，先完成的学生帮助本组其他学生完成任务，如遇问题可询问教师【教师】巡堂指导，及时解决学生问题课堂小结【教师】简要总结本课的要点本课首先讲了JavaScript的起源；然后讲了JavaScript的应用、特点，以及JavaScript和ECMAScript的关系；接下来介绍了JavaScript开发工具，并通过一个小示例讲解了如何利用编辑器和浏览器编辑和展示网页；最后简单介绍了在网页中引入JavaScript的方式、常用输出语句等基础知识，并通过一个综合案例向读者展示了JS在实际网页中的应用。通过本课的学习，学生应重点掌握SublimeText编辑器和Chrome浏览器在JavaScript开发和运行中的应用，以及在网页中引入JavaScript的方式，并简单了解常用输出语句、基础表达式、函数和事件的基础知识。【学生】总结回顾知识点作业布置【教师】布置课后作业请根据本课所学知识，完成课后习题中的相关习题。【学生】完成课后任务教学反思

课题基本语法课时6课时（270min）教学目标知识目标：（1） 了解标识符的概念及其定义规则（2） 掌握变量的声明和赋值方法（3） 熟悉常用数据类型（4） 掌握常用运算符的应用（5） 掌握流程控制语句的应用能力目标：（1）熟悉各种数据类型的特点和使用场景，能够准确地进行数据类型转换（2）能够运用条件语句和循环语句编写具有逻辑结构的程序，实现不同的功能（3）通过计算立方体体积、打印菱形图形、计算银行存款等案例，能够学会分析问题、解决问题的方法，提高自己的编程能力（4）在遇到实际问题时，能够运用所学的知识和技能，选择合适的语法和算法来解决问题素质目标：（1） 在学习和工作中培养刻苦努力、精益求精的态度（2） 增强遵守规则的意识，养成按规矩行事的习惯（3） 加强基础知识的学习，从而实现从量变到质变的转化，为个人的长远发展打下坚实的基础教学重难点教学重点：JavaScript的基本语法，包括标识符命名规则、变量声明与赋值、数据类型理解、运算符使用及其优先级，以及流程控制语句的应用教学难点：位运算符的运算规则及实际应用；复杂条件下的运算符优先级判断；运用流程控制语句；合理选择数据类型和运算符进行高效编程教学方法问答法、讨论法、讲授法教学用具电脑、投影仪、多媒体课件、教材教学过程主要教学内容及步骤课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请同学们使用JavaScript编写代码，输出一些简单的语句、进行基本的数学运算，然后在APP上发表遇到的问题，浏览其他同学遇到的问题，并提出解决办法。【学生】完成课前任务考勤【教师】使用APP进行签到【学生】班干部报请假人员及原因问题导入【教师】提出以下问题：当我们在使用手机或电脑上的应用程序时，有没有想过这些程序是如何实现各种功能的呢？比如，一个简单的计算器应用，它是如何进行数字计算和逻辑判断的呢？传授新知【教师】通过学生的回答，引入新知，讲解JavaScript中的基本概念，以及变量、数据类型、运算符、流程控制语句的相关知识2.1基本概念2.1.1标识符标识符是指开发者自定义的变量、函数、属性等的名称。例如，单词apple可以作为标识符使用。当然，并不是所有字符都能用作标识符，每种编程语言都有自己的标识符定义规则，下面介绍一下JavaScript中标识符的定义规则。①标识符由字母、下划线（_）、美元符号（$）和数字构成，如car，_book1，$money。②第一个字符不能为数字，如123str就属于非法标识符。③在定义标识符时，最好能做到见名知义，如name表示名称，sex表示性别等。④不能使用JavaScript中的关键字命名标识符，如char就属于非法标识符。【课堂问答】✈【教师】随机邀请学生回答以下问题：JavaScript中，标识符对字母大小是否敏感，即是否区分大小写？✈【学生】聆听、思考、回答✈【教师】总结学生的回答……（详见教材）2.1.2关键字和保留字关键字是指JavaScript中预先定义好的单词，它们被赋予了各种不同的含义。例如，var关键字表示变量声明。关键字不能用于标识符的命名，如果用关键字命名标识符，在程序运行时会出现错误提示。✈【教师】利用多媒体展示“ES5中的所有关键字”和“所有保留字”表格（详见教材），并进行讲解ES5中一共有26个关键字，它们有着不同的意义。例如，var用于变量声明，function用于函数声明，typeof用于变量类型判断，if用于条件判断。在之后的章节中，我们将会陆续讲解这些关键字的含义和用法，目前暂作了解。除上述关键字之外，JavaScript中还有一些保留关键字，简称保留字。保留字是指将来可能会用作JavaScript关键字的一些单词，是为JavaScript的发展预留的一些词语。虽然保留字可以作为标识符，但不建议这么使用，因为随着语言的发展，可能会导致一些无法预测的错误。2.1.3注释几乎所有的编程语言都有注释功能。注释主要用于描述当前代码，它可以让别人更好地理解你编写的代码，在多人合作开发时尤其有用。在程序解析时，注释会被JavaScript解释器忽略。JavaScript中的注释主要有两种，单行注释和多行注释。1．单行注释单行注释以两个斜杠“//”开始，后面都是注释内容，代码如下：//声明变量name，并为其赋值varname='tom';2．多行注释多行注释以斜杠和星号“/*”开始，星号和斜杠“*/”结束，代码如下：/**声明变量teacher*为变量teacher赋值*/varteacher='math';上述示例，中间的星号不是必需的，增加星号是为了增加注释的可读性。多行注释中可以嵌套单行注释，但不能嵌套多行注释。✈【教师】提出问题：孟子云：“不以规矩，不能成方圆”，我们在书写程序和生活中要遵守哪些规则呢？✈【学生】聆听、思考、回答✈【教师】总结学生的回答程序中的每一条语句都要符合语法规则。现实生活中人们也要遵守各种各样的规则，如法律法规、道德规范等。正因为有这些规则的存在，社会才能有序运转，我们才能有序生活。2.2变量✈【教师】扫码播放“变量”微课，帮助学生了解使用变量时的变量声明和变量赋值2.2.1变量声明JavaScript中一般使用var来声明变量，下面通过实例介绍具体方法。【课堂练习】✈【教师】利用多媒体展示【例2-1】，并进行讲解，帮助学生掌握声明变量的方法声明变量。（实例位置：example/ch2/2-1.html）。……（详见教材）✈【学生】聆听、思考、理解例2-1使用var声明了cat、blueShoes、boy和girl四个变量，其中boy和girl使用了同一个var。使用var可以一次声明一个变量，以“;”结束；也可以一次声明多个变量，各变量之间使用“,”分隔。下面运行例2-1创建的页面，并在控制台输出刚声明的变量，效果如图所示（详见教材）。……（详见教材）✈拓展阅读ES6中新增了let和const两个全新的变量声明关键字。let可以代替var使用，区别在于，其所声明的变量只在let命令所在的代码块内有效。const定义的变量值不可修改，也可以说const定义的是常量。……（详见教材）【课堂讨论】✈【教师】组织学生以小组为单位讨论以下问题：在JavaScript中，有多种变量声明方式，如使用var、let和const，也可以不使用关键字直接赋值。讨论不同声明方式的优缺点及在实际开发中应如何选择。✈【学生】聆听、思考、小组讨论，由小组代表上台发表讨论结果✈【教师】总结学生的讨论结果2.2.2变量赋值在声明变量之后，需要为变量赋值。变量赋值的方式一般有两种，一种是声明的同时进行赋值，另一种是先声明后赋值。下面通过实例介绍具体方式。【课堂练习】✈【教师】利用多媒体展示【例2-2】，并进行讲解，帮助学生掌握声明赋值的方法为变量赋值。（实例位置：example/ch2/2-2.html）。……（详见教材）✈【学生】聆听、思考、理解下面运行页面，并在控制台输出刚声明并赋值的变量。在声明变量的同时赋值，能直接打印出变量book所对应的值“JavaScript”；先进行变量声明的car，打印的结果为undefined；当为变量car赋值后，打印变量car所对应的值，结果为“bens”。✈拓展阅读除了使用关键字进行变量声明和赋值外，也可以不使用关键字进行变量声明和赋值，如dogColor='yellow'。使用这种方式定义的变量等价于window.dogColor='yellow'，后续的章节会对这样的变量定义进行介绍。建议在程序编写过程中都通过关键字进行变量声明，否则可能会出现不符合预期的错误。2.3数据类型2.3.1Undefined类型Undefined类型是JavaScript中特有的数据类型，它仅有一个对应值undefined。可以定义一个变量值为undefined，代码如下：varweather=undefined;console.log(weather); //undefined上述示例定义一个值为undefined的变量weather，在控制台输出weather的值为undefined。在2.2.1小节提到过，定义一个变量且未赋值的情况下，它的值为undefined，所以在定义变量时，未进行赋值和赋值为undefined的变量其实是等价的。一般来说不需要将变量显式定义为undefined。2.3.2Null类型Null类型是JavaScript中另外一个仅有一个值的数据类型，它的对应值为null。null表示一个空的对象指针，它和undefined其实很像，使用等于运算符（==）将null和undefined进行对比时，它们是相等的。与undefined不同的是，null表示变量（对象或地址）不存在或者无效，而undefined表示变量没有被赋值。【课堂讨论】✈【教师】对学生进行分组，每组选出一名组长，然后组织学生以小组为单位讨论以下问题：请同学们讨论null和undefined与空字符串（''）和0四者是否存在相等的情况？✈【学生】聆听、思考、小组讨论，由小组代表上台发表讨论结果✈【教师】总结学生的讨论结果2.3.3Boolean类型Boolean类型是JavaScript中比较常用的数据类型之一，它一共有两个值，分别为true和false。布尔型数据主要用于逻辑判断，true为真，false为假。代码如下：varappleIsFruit=true; //苹果是一种水果是真实的，即变量为真varappleIsMeat=false; //苹果是一块肉是不真实的，即变量为假✈提示值得注意的是，因为JavaScript是区分大小写的，所以仅有true和false为Boolean类型的值，True、False等都不是Boolean类型的值。另外，其他类型的数据也可以转换为Boolean类型，可以通过Boolean()函数将Undefined类型和Null类型数据转换为Boolean类型。【课堂练习】✈【教师】利用多媒体展示【例2-3】，并进行讲解，帮助学生掌握Boolean()函数的用法和作用使用Boolean()函数将其他类型数据转换为Boolean类型（实例位置：example/ch2/2-3.html）。……（详见教材）✈【学生】聆听、思考、理解……（详见教材）2.3.4Number类型和其他语言不同的是，JavaScript的Number（数值）类型不区分整数和浮点数（小数，在某些语言里称为双精度值），所有数值都为Number类型。Number类型默认为正数，也可以在数值前加上“+”号表示正数，数值前加上“-”号表示负数。代码如下：vara=10; //定义a为正整数10vara=+10; //和上一行代码一致……（详见教材）由上述示例可以看出，数值类型还可以使用科学计数法表示，以0开始的数值表示八进制数，以0x开始的数值表示十六进制数。由于计算机内存的限制，数值大小都有一个范围限制。在JavaScript中有Number.MIN_VALUE和Number.MAX_VALUE两个值，它们分别代表数值的最小值和最大值。在大部分浏览器中，Number.MIN_VALUE为5e-324，Number.MAX_VALUE为1.7976931348623157e+308。如果定义了一个大于最大值的数值，则该数值会被转换为特殊值Infinity（无穷大）；同理，如果定义了一个小于最小值的数值，则该数值会被转换为特殊值-Infinity（负无穷大）。其他类型的数据也可以转换为Number类型，如使用Number()函数可将Undefined类型、Null类型及Boolean类型数据转换为Number类型。【课堂练习】✈【教师】利用多媒体展示【例2-4】，并进行讲解，帮助学生掌握Number()函数的用法和作用使用Number()函数将其他类型数据转换为Number类型。（实例位置：example/ch2/2-4.html）。……（详见教材）✈【学生】聆听、思考、理解✈知识库NaN是JavaScript中的一个特殊全局对象属性，全称为NotaNumber（不是一个数字），但它本身却是一个Number类型的值。当其他语言的一个数值除以0时一般会有报错提示，但在JavaScript中会返回一个NaN，这样可以避免数值计算的错误。……（详见教材）2.3.5String类型String类型是由零个或多个Unicode字符组成的字符序列，这个字符序列又称为字符串，是开发过程中最常用的数据类型。和部分语言不同，JavaScript中的字符串可以由单引号（''）或者双引号（""）包裹。需要注意的是，以单引号开始的字符串需要以单引号结尾，以双引号开始的字符串需要以双引号结尾，否则会报错。代码如下（详见教材）。由以上代码可以看出，字符串中双引号和单引号可以相互嵌套，但必须成对出现。某些情况下可能需要在单引号中增加单引号，或在双引号中增加双引号，此时可以使用转义字符“\”处理。代码如下：varstr1='this\'saboy'; //输出this'saboyvarstr2="\"English\"" //输出"English"转义字符除了可以在字符串中输出引号之外，还有换行、输出反斜杠等功能。✈【教师】利用多媒体展示“转义字符常见应用及其含义”表格（详见教材），并进行讲解其他类型数据同样可以转换为String类型，使用String()函数可将Undefined类型、Null类型、Boolean类型和Number类型数据转换为String类型。【课堂练习】✈【教师】利用多媒体展示【例2-5】，并进行讲解，帮助学生掌握String()函数的用法和作用使用String()函数将其他类型数据转换为String类型。（实例位置：example/ch2/2-5.html）。……（详见教材）✈【学生】聆听、思考、理解✈知识链接ES6引入了模板字符串。模板字符串是普通字符串的加强版，普通字符串使用单引号（''）和双引号（""）进行标识，而模板字符串使用反引号（``，位于键盘左上角Esc键下方）进行标识。模板字符串可以作为普通字符串使用，也可用于定义多行字符串或在字符串中嵌入变量。……（详见教材）【课堂问答】✈【教师】随机邀请学生回答以下问题JavaScript中的模板字符串有什么特点？✈【学生】聆听、思考、回答✈【教师】总结学生的回答2.4运算符2.4.1算术运算符算术运算符主要用于数值之间的计算。它的功能和数学中的加减乘除类似，并在其基础上增加了自增自减等操作。✈【教师】利用多媒体展示“常用算术运算符及其含义”表格（详见教材），并进行讲解由“常用算术运算符及其含义”表格可以看出，算术运算符和数学中的运算符有许多相似之处，理解起来也比较容易，其主要新增了“++”和“--”两种运算符。自增和自减运算符可以放在变量前或变量后。“常用算术运算符及其含义”表格展示了常用的算术运算符及其含义。【课堂练习】✈【教师】利用多媒体展示【例2-6】，并进行讲解，帮助学生掌握自增和自减运算自增和自减运算符的应用。（实例位置：example/ch2/2-6.html）。……（详见教材）✈【学生】聆听、思考、理解由例2-6可以看出，自增和自减运算符放在变量前和变量后结果是不同的，放在变量前表示变量先自增减，然后再进行其他操作；放在变量后表示变量先进行其他操作，再自增减。“+”运算符不仅能用于数学上的加法运算，还可用于字符串拼接操作。【课堂练习】✈【教师】利用多媒体展示【例2-7】，并进行讲解，帮助学生掌握“+”运算在不同场景下的作用“+”运算符的应用。（实例位置：example/ch2/2-7.html）。……（详见教材）✈【学生】聆听、思考、理解由例2-7可以看出，“+”号可以拼接字符串。值得注意的是，当字符串和数值进行加法操作时，会进行字符串拼接，而不会进行加法操作。算术运算符除了自增自减外还有一些其他特点，具体包括以下几点。①在进行普通的四则运算时，和数学中的运算顺序一致“先乘除后加减”。与此同时，小括号可以改变运算的顺序，如(1+2)*3，先进行括号中的加法运算，再进行乘法运算。②“+”和“-”和数学中一样，可以代表正数和负数，如(+2)+(-5)的结果为-3。③需要注意的是，由于JavaScript的数值类型采用了IEEE754浮点数计算，在进行小数的运算时，会出现精度丢失的问题。例如，0.1+0.5的结果理论上是0.6，但由于精度问题，导致最终结果为0.060000000000000005，所以在进行小数的运算时需要特别注意。④数值中还存在+0和-0两种，(+0)+(-0)结果为+0，(+0)+(+0)结果为+0，(-0)+(-0)结果为-0。【课堂问答】✈【教师】随机邀请学生回答以下问题请同学们根据上述讲解，思考自增自减运算符放在变量前和变量后的区别，并举例说明？✈【学生】聆听、思考、回答✈【教师】总结学生的回答2.4.2赋值运算符赋值运算符是最常用的运算符，其作用是将运算符右侧的计算结果赋值给左侧的变量。最基本的赋值运算符之前已使用多次，那就是“=”运算符。赋值运算符的“=”不等同于数学中的等于号，数学中的等于号与比较运算符“==”和“===”类似（2.4.3节会介绍）。✈【教师】利用多媒体展示“常用算术运算符及其含义”表格（详见教材），并进行讲解在常用算术运算符及其含义”表格中，除“=”运算符以外，其他赋值运算符都是简写形式。例如：varnum=1;num+=5;它可以等价于以下代码：varnum=1;num=num+5;✈提示表中各运算符的使用此处先简单了解即可，关于位运算符具体如何运算，2.4.6节将会详细介绍。2.4.3比较运算符比较运算符主要用于变量与变量、变量与其他基本类型数据的比较，比较结果为Boolean类型的值，即true或者false。✈【教师】利用多媒体展示“常用比较运算符及其含义”表格（详见教材），并进行讲解“==”和“===”都表示等于，“!=”和“!==”都表示不等于，它们的主要区别是，“==”和“!=”会对比较的数据进行类型转换（常称为隐式类型转换），再进行值比较；而“===”和“!==”不会进行数据类型转换，直接比较两个值是否相等。代码如下：……（详见教材）【课堂问答】✈【教师】随机邀请学生回答以下问题在比较运算符中，“==”、“!=”与“===”、“!==”在数据比较中有什么区别？✈【学生】聆听、思考、回答✈【教师】总结学生的回答2.4.4条件运算符条件运算符也称为三元运算符，主要由条件表达式和结果表达式构成，是一种非常灵活的运算符。条件运算符结构如下：条件表达式?结果1:结果2“?”左边为条件