JavaScript 程序设计 课件全套 龚爱民 第1-10章-JavaScript快速入门-异常和调试

第1章JavaScript快速入门简约风格｜程序设计主题｜课堂教学版本章学习地图程序设计基本概念JavaScript语言特点Helloworld基础语法输入与输出课程重点理解程序、程序语言与JavaScript的关系。掌握控制台运行代码的基本方法。会使用输出、输入、注释和简单运算。课堂推进建议1概念导入2语法讲解3示例演示4随堂练习JavaScript程序设计｜授课PPT1第1章学习目标与知识结构JavaScript程序设计｜授课PPT2学习目标说出计算机程序和程序语言的基本含义。了解JavaScript在Web前端开发中的作用。会在浏览器控制台中运行简单代码。掌握直接量、运算符、注释、输入与输出。本章内容结构1计算机程序2程序语言发展3JavaScript语言4Helloworld5直接量与运算符6console.log输出7注释与prompt输入第1章程序设计基本概念JavaScript程序设计｜授课PPT3计算机程序是用程序语言编写的指令序列，用来完成指定任务。软件由许多程序协同工作形成，离开程序，计算机无法按人的意图完成任务。程序语言在人与计算机之间建立交流规则：人写语句，机器通过解释或编译执行。学习程序设计的重点不是背语法，而是用清晰步骤描述解决问题的方法。课堂导入可用“做菜菜谱”类比程序：步骤明确，顺序清楚，结果可验证。强调程序=指令序列，语句=具体指令。第1章程序语言的发展JavaScript程序设计｜授课PPT4项目含义/作用课堂关注点机器语言由0和1组成的机器指令，CPU可直接识别。执行效率高，但难写、难读、依赖硬件。汇编语言用符号代替二进制指令，如MOV、JMP等。可读性提高，但仍与机器结构密切相关。高级语言接近自然语言和数学表达，如JavaScript、Python、Java。易学易用、可移植性更强，适合应用开发。第1章JavaScript的角色JavaScript程序设计｜授课PPT5JavaScript最常见的宿主环境是浏览器，代码由浏览器内置的JavaScript引擎执行。Web前端三要素：HTML描述结构，CSS定义样式，JavaScript实现行为与交互。JavaScript可用于动态网页、事件处理、操作HTML标签和CSS样式、记录用户状态等。它是动态、弱类型语言，既可进行过程式编程，也支持面向对象编程。理解角度HTML像骨架，CSS像衣服，JavaScript像动作。学生可以先从控制台练习，再过渡到网页脚本。第1章控制台中的HelloworldJavaScript程序设计｜授课PPT6讲解要点打开Chrome开发者工具，进入Console面板。输入代码后按Enter运行，多行输入可用Shift+Enter换行。console.log()用于在控制台输出运行结果。JavaScript示例console.log("Helloworld!");//执行加法运算并输出结果console.log(1972+1002);运行结果依次为：Helloworld!和2974第1章基础语法：直接量与运算符JavaScript程序设计｜授课PPT7直接量也叫字面量，是程序中可以直接使用的数据。常见直接量：数值直接量、字符串直接量、布尔直接量。运算符用于对数据进行处理，例如+表示加法或字符串连接。直接量可以参与运算，但直接量本身不能被修改。示例1972、1002是数值直接量。"Helloworld!"是字符串直接量。true和false是布尔直接量。第1章换行、空格、分号与代码风格JavaScript程序设计｜授课PPT8JavaScript通常按语句逐条执行，语句之间应保持清晰分隔。换行和空格大多数情况下会被忽略，但良好缩进能提高可读性。分号用于标记语句结束；入门阶段建议每条语句都写分号。程序中的英文字母、括号、引号、分号等必须使用英文状态输入。易错点中文分号“；”不是英文分号“;”。console.log中的大小写不能随意改变。第1章注释：让代码更容易理解JavaScript程序设计｜授课PPT9讲解要点注释是给人看的说明文字，不会被JavaScript引擎执行。单行注释以//开头。块式注释以/*开始，以*/结束，可以跨多行。JavaScript示例//输出一句欢迎语console.log("欢迎学习JavaScript");/*以下代码用于计算两个数的和适合初学者观察运行结果*/console.log(3+4);第1章输入：prompt()方法JavaScript程序设计｜授课PPT10讲解要点prompt()会弹出输入对话框，等待用户输入。输入的内容通常先保存到变量，再参与后续处理。prompt()得到的数据默认是字符串，后续章节会学习类型转换。JavaScript示例letname=prompt("请输入你的姓名：");console.log("你好，"+name);lettext=prompt("请输入任意内容：");console.log("你输入的是："+text);第1章入门程序的一般流程JavaScript程序设计｜授课PPT111输入2保存3处理4输出流程说明输入：通过prompt()或直接量获得数据。保存：用变量接收数据，便于多次使用。处理：用运算符、表达式完成计算或拼接。输出：用console.log()查看结果。第1章课堂练习JavaScript程序设计｜授课PPT12随堂练习/课后作业建议1在控制台输出“我的第一个JavaScript程序”。2输出2026与1995的和。3使用三条console.log()分别输出姓名、班级、课程。4使用prompt()输入姓名，并输出“欢迎你，姓名”。5将一段杂乱代码整理为多行代码，并添加注释。第1章本章小结JavaScript程序设计｜授课PPT13知识闭环程序是完成任务的指令序列。JavaScript主要在浏览器等宿主环境中运行。console.log()用于输出，prompt()用于输入。注释和规范格式是良好编程习惯。迁移应用用控制台验证每个小知识点。尝试将生活中的步骤写成程序流程。为自己的代码添加简洁注释。第2章变量与数据类型简约风格｜程序设计主题｜课堂教学版本章学习地图变量常量标识符与关键字数据类型类型转换课程重点理解变量、常量、标识符与关键字。掌握基本数据类型和特殊值。能完成显式类型转换并避免常见错误。课堂推进建议1概念导入2语法讲解3示例演示4随堂练习JavaScript程序设计｜授课PPT1第2章学习目标与知识结构JavaScript程序设计｜授课PPT2学习目标会使用let定义变量，并理解赋值与初始化。会使用const定义常量，并知道常量不可重新赋值。掌握标识符命名规则，能识别不合法命名。理解数值、字符串、布尔、undefined、null。能使用Number()和String()完成显式转换。本章内容结构1变量定义2赋值与初始化3访问变量4常量5标识符与关键字6基本数据类型7自动与显式转换第2章变量的含义JavaScript程序设计｜授课PPT3变量用于存储数据，可以理解为内存中某个存储单元的名字。变量包含两个核心概念：变量名和变量值。使用变量前通常先定义，JavaScript中常用let定义变量。变量中的数据可以被新的赋值覆盖。类比变量名像快递柜编号。变量值像柜子里存放的快递。赋值就是把数据放进柜子。第2章定义、赋值和初始化JavaScript程序设计｜授课PPT4讲解要点定义：leta;赋值：a=10;初始化：定义变量时同时赋值。变量未初始化时，值为undefined。JavaScript示例leta;console.log(a);//undefineda=10;console.log(a);letx=20;console.log(x);第2章访问变量与动态类型JavaScript程序设计｜授课PPT5讲解要点通过变量名可以读取变量中保存的数据。除了赋值号左侧的变量，代码中的变量通常表示读取其值。JavaScript变量不固定数据类型，可保存不同类型的值。JavaScript示例letmessage="Helloworld";letcopy=message;console.log(copy);letvalue=100;console.log(value);value="JavaScript";console.log(value);第2章常量constJavaScript程序设计｜授课PPT6常量用于保存程序运行过程中固定不变的数据。使用const定义常量，定义时必须初始化。尝试重新给常量赋值会导致程序错误。常量通常使用全大写命名，以便和变量区分。使用场景圆周率PI版本号VERSION固定折扣DISCOUNT最大分数MAX_SCORE第2章变量与常量对比JavaScript程序设计｜授课PPT7项目含义/作用课堂关注点let变量值可以改变，适合保存会变化的数据。如年龄、成绩、计数器、用户输入。const常量值不可重新赋值，适合固定数据。如PI、固定配置、最大值。命名建议变量名应有意义，常量名常用大写。避免a、b、c等无意义名称，除非场景很简单。第2章标识符与关键字JavaScript程序设计｜授课PPT8标识符是变量名、函数名、类名等名字的统称。标识符只能包含字母、数字、_、$，不能包含空格和-。首字符不能是数字。标识符不能是JavaScript关键字，如let、if、for、true。JavaScript严格区分大小写：name和Name是两个不同标识符。判断示例userName：合法。3score：不合法，数字开头。student-age：不合法，含-。let：不合法，关键字。第2章基本数据类型JavaScript程序设计｜授课PPT9数值类型：所有整数和小数都按数值类型处理。字符串类型：由单引号或双引号括起来的文本。布尔类型：只有true和false两个值，常用于条件判断。undefined：变量已定义但未赋值。null：空值，常用于描述对象为空。注意"3.14"是字符串，不是数值。3.14是数值。"1+1"是文本，不会计算成2。第2章字符串与转义字符JavaScript程序设计｜授课PPT10字符串可以使用单引号或双引号包裹。双引号字符串中可以直接包含单引号，单引号字符串中可以直接包含双引号。反斜杠\在字符串中有特殊意义，表示路径时常写成\。常见转义字符包括：\n换行、\t制表符、\'单引号、\"双引号。示例"Hisnameis'Jack'"'Hisnameis"Jack"'"c:\\windows\\system"第2章类型转换：为什么需要Number()JavaScript程序设计｜授课PPT11讲解要点prompt()输入的内容是字符串。字符串和数字使用+时可能发生连接而不是加法。Number()可把可转换的字符串转为数值。无法转换为合法数值时结果为NaN。JavaScript示例leta=prompt("请输入第一个数：");letb=prompt("请输入第二个数：");console.log(a+b);//可能是字符串连接letx=Number(a);lety=Number(b);console.log(x+y);//数值加法第2章输入数据参与计算的规范流程JavaScript程序设计｜授课PPT121输入字符串2显式转换3参与运算4输出结果流程说明先用prompt()获取用户输入。再用Number()转换为数值。用表达式完成加、减、乘、除等运算。最后使用console.log()输出结果。第2章课堂练习JavaScript程序设计｜授课PPT13随堂练习/课后作业建议1定义变量name和age，输出“姓名：张明，年龄：16”。2定义常量PI，输入半径，计算圆面积。3判断userName、3score、student-age、_score是否为合法标识符。4输入两个数字，使用Number()转换后输出它们的和。5观察"5"+1、"5"-1、Number("John")的运行结果。第2章本章小结JavaScript程序设计｜授课PPT14知识闭环变量用let，常量用const。变量先定义后使用，未赋值时为undefined。标识符命名要合法、清晰、区分大小写。掌握基本数据类型与显式类型转换非常重要。迁移应用所有用户输入默认按字符串处理。写计算程序时先确认数据类型。用有意义的变量名提升代码可读性。第3章顺序结构程序设计简约风格｜程序设计主题｜课堂教学版本章学习地图算法基础表达式和语句顺序结构赋值运算算术运算课程重点理解算法及其描述方法。掌握表达式、语句与顺序结构。能完成输入—处理—输出类程序。课堂推进建议1概念导入2语法讲解3示例演示4随堂练习JavaScript程序设计｜授课PPT1第3章学习目标与知识结构JavaScript程序设计｜授课PPT2学习目标理解算法是解决问题的步骤描述。能区分表达式、语句和复合语句。掌握顺序结构程序的执行规律。会使用赋值运算、算术运算和字符串连接。能编写基本计算类程序。本章内容结构1算法概念2算法特征3算法描述4表达式与语句5顺序结构6运算优先级7顺序结构实例第3章算法的概念与特征JavaScript程序设计｜授课PPT3算法是解决问题的逐步过程，是对解题方案准确、完整的描述。程序设计的核心是算法，程序只是用语言把算法表达出来。算法具有有穷性、确切性、输入性、输出性和有效性。好算法应步骤清楚、结果明确、可在有限时间内执行。课堂解释算法像“路线图”。没有算法，代码只是零散语句。先想清步骤，再写代码。第3章算法描述方法JavaScript程序设计｜授课PPT4项目含义/作用课堂关注点自然语言用中文或英文描述解题步骤。容易理解，但可能不够精确。伪代码介于自然语言和程序语言之间。格式灵活，适合表达算法思路。流程图用图形符号表示流程和逻辑。直观清晰，适合讲解顺序、分支、循环。第3章表达式、语句与复合语句JavaScript程序设计｜授课PPT5表达式由数据和运算符组成，运行后得到一个值。语句是完整的指令，能改变程序运行状态，如赋值语句。复合语句使用花括号{}包围多条语句，形成一个语句块。语句块中的语句应保持统一缩进，便于阅读和维护。区分3+2-1是表达式。i=10+20;是语句。{...}是复合语句。第3章顺序结构：输入—处理—输出JavaScript程序设计｜授课PPT61输入2计算3保存4输出流程说明顺序结构按代码出现的先后顺序执行。典型程序先获取数据，再根据公式计算，最后输出结果。若要调整执行顺序，通常需要调整代码排列位置。顺序结构是分支结构和循环结构的基础。第3章示例：计算正方体体积JavaScript程序设计｜授课PPT7讲解要点先输入正方体边长。根据公式v=c*c*c计算体积。输出变量v的值。JavaScript示例letc=Number(prompt("请输入正方体边长："));letv=c*c*c;console.log("正方体体积为："+v);第3章赋值运算JavaScript程序设计｜授课PPT8赋值运算符=的左侧必须是变量。当右侧是表达式时，先计算表达式，再把结果保存到变量。语句a=a+10表示先读取a，再加10，最后覆盖原来的a。赋值运算常与累加、交换变量、保存中间结果一起使用。重点等号不是数学中的“相等”。编程中的=表示“把右边的值存到左边”。第3章算术运算与优先级JavaScript程序设计｜授课PPT9常用算术运算符：+、-、*、/、%。自增++表示变量加1，自减--表示变量减1。乘、除、取模优先级高于加、减。括号()优先级最高，可强制改变运算顺序。不确定优先级时，使用括号提升可读性。示例2+3*4结果为14。(2+3)*4结果为20。i++与++i都会让i加1，但表达式值不同。第3章自增运算：前置与后置JavaScript程序设计｜授课PPT10讲解要点++i：先自增，再使用变量值。i++：先使用变量值，再自增。两者都会改变变量本身，但表达式结果不同。JavaScript示例leti=1;letj=++i;console.log(i);//2console.log(j);//2letx=1;lety=x++;console.log(x);//2console.log(y);//1第3章字符串连接运算JavaScript程序设计｜授课PPT11字符串最常见的运算是连接，使用+运算符。如果+两侧有字符串，JavaScript通常会进行字符串连接。数值和字符串混合运算可能产生意料之外的结果。需要数值运算时，应先用Number()转换或用括号明确计算顺序。示例"3"+"2"→"32"3+"6"→"36""10+20="+(10+20)→"10+20=30"第3章示例：交换变量的值JavaScript程序设计｜授课PPT12讲解要点直接a=b会覆盖a原来的值。借助临时变量t保存中间数据。这是理解赋值过程的经典问题。JavaScript示例leta=10;letb=20;lett=a;a=b;b=t;console.log("a="+a);console.log("b="+b);第3章课堂练习JavaScript程序设计｜授课PPT13随堂练习/课后作业建议1输入长方形的长和宽，计算面积和周长。2输入圆的半径，输出周长和面积。3输入三门成绩，计算总分与平均分。4分析表达式2+3*4、(2+3)*4的区别。5修改i+"+"+j+"="+i+j，使输出10+20=30。第3章本章小结JavaScript程序设计｜授课PPT14知识闭环算法是解决问题的步骤，程序是算法的实现。顺序结构按照语句顺序依次执行。输入、处理、输出是基础程序的主线。赋值、算术运算和字符串连接是本章核心操作。迁移应用遇到计算题先写公式，再转成代码。复杂表达式使用括号明确运算顺序。养成写清变量名和注释的习惯。第4章分支结构程序设计简约风格｜程序设计主题｜课堂教学版本章学习地图条件判断关系运算逻辑运算if语句switch语句课程重点掌握条件判断、关系运算和逻辑运算。会使用if系列语句和switch语句。能解决成绩分级、闰年判断等典型问题。课堂推进建议1概念导入2语法讲解3示例演示4随堂练习JavaScript程序设计｜授课PPT1第4章学习目标与知识结构JavaScript程序设计｜授课PPT2学习目标理解分支结构解决“根据条件选择路径”的问题。掌握关系表达式与逻辑表达式的写法。会编写单分支、双分支和多分支if语句。会使用switch处理多值选择问题。能用分支结构完成实际判断任务。本章内容结构1条件判断2关系运算符3逻辑运算符4单分支if5双分支if...else6多分支结构7switch语句第4章条件判断与分支结构JavaScript程序设计｜授课PPT3顺序结构只能按固定顺序执行，不能根据情况改变路径。分支结构根据条件成立与否选择不同语句执行。条件表达式的结果通常是true或false。现实中的“如果……否则……”可以映射为程序中的分支结构。生活类比如果下雨，就带伞。如果买到飞机票，就坐飞机；否则坐动车。条件决定行为。第4章关系运算符JavaScript程序设计｜授课PPT4项目含义/作用课堂关注点>、<判断左侧是否大于或小于右侧。常用于比较数值大小。>=、<=判断是否大于等于或小于等于。成绩区间判断中很常用。==、!=判断两个值是否相等或不相等。判断菜单编号、星期、用户名等。第4章逻辑运算JavaScript程序设计｜授课PPT5&&表示逻辑与：两个条件都为true，结果才为true。||表示逻辑或：只要一个条件为true，结果就为true。!表示逻辑非：对布尔值取反。多个条件组合时，应使用括号让逻辑更清晰。示例score>=60&&score<90month==1||month==2||month==12!(age>=18)第4章if语句的执行流程JavaScript程序设计｜授课PPT61判断条件2条件为真3执行语句块4继续后续代码流程说明if语句首先计算条件表达式。条件为true时执行花括号中的语句。条件为false时跳过该语句块。语句块只有一行时可省略花括号，但教学中建议保留。第4章单分支与双分支示例JavaScript程序设计｜授课PPT7讲解要点单分支适合“满足条件才做某事”。双分支适合“二选一”的问题。判断奇偶是双分支的典型案例。JavaScript示例letn=Number(prompt("请输入一个整数："));if(n%2==0){console.log("偶数");}else{console.log("奇数");}第4章多分支示例：成绩等级JavaScript程序设计｜授课PPT8讲解要点多分支适合多个互斥条件。条件顺序应从高到低或从小到大保持清晰。最后的else处理剩余情况。JavaScript示例letscore=Number(prompt("请输入成绩："));if(score>=90){console.log("优秀");}elseif(score>=80){console.log("良好");}elseif(score>=60){console.log("合格");}else{console.log("不合格");}第4章条件运算符JavaScript程序设计｜授课PPT9条件运算符是简洁的双分支表达式，格式为：条件?值1:值2。当条件成立时，整个表达式取值1；否则取值2。适合处理简单的二选一赋值或输出。如果逻辑较复杂，仍建议使用if...else提高可读性。示例letmax=a>b?a:b;letresult=score>=60?"合格":"不合格";第4章switch语句：多值选择JavaScript程序设计｜授课PPT10讲解要点switch适合表达式取多个固定值的情况。case表示每一种可能的值。break用于结束当前分支，default处理默认情况。JavaScript示例letn=Number(prompt("请输入1~7："));switch(n){case1:console.log("星期一");break;case2:console.log("星期二");break;case3:console.log("星期三");break;case4:console.log("星期四");break;case5:console.log("星期五");break;case6:console.log("星期六");break;case7:console.log("星期日");break;default:console.log("输入错误");}第4章综合示例：判断闰年JavaScript程序设计｜授课PPT11讲解要点闰年条件：能被4整除且不能被100整除，或者能被400整除。该问题适合训练复杂逻辑表达式。用括号明确&&与||的组合关系。JavaScript示例letyear=Number(prompt("请输入年份："));if((year%4==0&&year%100!=0)||year%400==0){console.log(year+"年是闰年");}else{console.log(year+"年不是闰年");}第4章课堂练习JavaScript程序设计｜授课PPT12随堂练习/课后作业建议1输入一个数，判断是否为正数。2输入一个整数，判断奇数或偶数。3输入三个数，输出最大值。4输入月份，输出对应季节。5用switch根据数字1~7输出星期。第4章本章小结JavaScript程序设计｜授课PPT13知识闭环分支结构让程序具有“选择能力”。关系运算和逻辑运算负责构造条件。if适合区间判断和复杂条件，switch适合固定值选择。写分支时要检查条件是否完整、顺序是否合理。迁移应用成绩等级、闰年、季节判断都是经典分支问题。复杂条件建议先用自然语言写清楚。测试程序时要覆盖边界值。第5章循环结构程序设计简约风格｜程序设计主题｜课堂教学版本章学习地图循环结构概述for语句while语句do...while语句嵌套循环课程重点掌握for、while、do...while三种循环。理解循环三要素与死循环风险。会使用嵌套循环、break和continue。课堂推进建议1概念导入2语法讲解3示例演示4随堂练习JavaScript程序设计｜授课PPT1第5章学习目标与知识结构JavaScript程序设计｜授课PPT2学习目标理解循环结构用于解决重复执行的问题。掌握for循环的计数控制。掌握while与do...while的条件控制。理解嵌套循环的执行过程。能使用break和continue控制循环流程。本章内容结构1循环思想2for循环3while循环4do...while循环5循环嵌套6break语句7continue语句8循环应用第5章为什么需要循环JavaScript程序设计｜授课PPT3当同类操作需要重复执行时，循环能避免大量重复代码。循环程序通常包含：初始值、循环条件、循环体、变化量。循环条件决定是否继续执行。缺少变化量或条件设置错误，容易形成死循环。典型任务累加求和。批量输出。统计符合条件的数据。生成图形或表格。第5章循环结构的一般流程JavaScript程序设计｜授课PPT41初始化2判断条件3执行循环体4更新变量5回到判断流程说明初始化只执行一次。每次循环前通常要判断条件。循环体中执行重复任务。更新变量影响下一次判断。第5章for循环：适合已知次数JavaScript程序设计｜授课PPT5讲解要点for语句将初始化、条件和增量集中写在一行。常用于从1到n、遍历固定范围等问题。计数器变量通常命名为i、j、k。JavaScript示例for(leti=1;i<=5;i++){console.log("第"+i+"次循环");}//计算1~100的和letsum=0;for(leti=1;i<=100;i++){sum+=i;}console.log(sum);第5章while循环：适合条件控制JavaScript程序设计｜授课PPT6讲解要点while先判断条件，条件为true才进入循环。循环次数不固定时，while更灵活。循环体内必须有机会改变条件，否则可能死循环。JavaScript示例leti=1;letsum=0;while(i<=100){sum+=i;i++;}console.log(sum);第5章do...while循环JavaScript程序设计｜授课PPT7讲解要点do...while先执行循环体，再判断条件。无论条件是否成立，循环体至少执行一次。适合“至少输入一次”“至少询问一次”的场景。JavaScript示例letn;do{n=Number(prompt("请输入1~10之间的数字："));}while(n<1||n>10);console.log("输入合法："+n);第5章三种循环对比JavaScript程序设计｜授课PPT8项目含义/作用课堂关注点for循环次数明确，结构紧凑。输出固定范围、数组遍历、计数求和。while先判断条件，次数可不确定。持续输入、条件满足才执行。do...while先执行一次，再判断条件。菜单选择、输入验证、至少执行一次的任务。第5章嵌套循环JavaScript程序设计｜授课PPT9一个循环体中包含另一个循环，称为嵌套循环。外层循环控制行，内层循环常控制列。常用于输出图形、表格、九九乘法表等。分析嵌套循环时，要分清外层变量和内层变量。理解方式外层每执行一次，内层会完整执行一轮。先从小规模数据手动跟踪。第5章嵌套循环：输出星号图形JavaScript程序设计｜授课PPT10讲解要点外层循环控制行数。内层循环控制每行星号个数。字符串变量line用于拼接一行内容。JavaScript示例for(leti=1;i<=5;i++){letline="";for(letj=1;j<=i;j++){line+="*";}console.log(line);}第5章break与continueJavaScript程序设计｜授课PPT11break用于立即结束当前循环，执行循环后面的代码。continue用于结束本次循环，直接进入下一次循环判断。多重循环中，break只终止离它最近的一层循环。二者都能改变循环流程，但目的不同。记忆法break：彻底退出。continue：跳过本次。先确认要退出循环，还是只跳过当前数据。第5章综合示例：九九乘法表JavaScript程序设计｜授课PPT12讲解要点九九乘法表是嵌套循环的经典练习。外层变量i控制行。内层变量j控制每行的列。JavaScript示例for(leti=1;i<=9;i++){letline="";for(letj=1;j<=i;j++){line+=j+"×"+i+"="+(i*j)+"";}console.log(line);}第5章课堂练习JavaScript程序设计｜授课PPT13随堂练习/课后作业建议1使用for循环输出1~100。2使用while循环计算1~100的和。3输出1~100中所有能被3整除的数。4输入n，计算n的阶乘。5输出九九乘法表。6判断一个输入整数是否为素数。第5章本章小结JavaScript程序设计｜授课PPT14知识闭环循环结构解决重复执行的问题。for适合已知次数，while适合条件控制，do...while至少执行一次。嵌套循环常用于二维结构问题。break与continue可以改变循环执行过程。迁移应用求和、统计、查找、输出图形都离不开循环。先写循环三要素，再写循环体。用小数据手动跟踪循环过程。第6章函数简约风格｜程序设计主题｜课堂教学版本章学习地图函数基本概念函数定义参数返回值嵌套调用课程重点理解函数封装和复用的价值。掌握函数定义、调用、参数和返回值。理解作用域、生命周期与嵌套调用。课堂推进建议1概念导入2语法讲解3示例演示4随堂练习JavaScript程序设计｜授课PPT1第6章学习目标与知识结构JavaScript程序设计｜授课PPT2学习目标理解函数能将一段代码封装为可重复使用的功能。掌握function定义函数和调用函数的方法。区分形参和实参，理解参数传递。理解return返回值的作用。了解局部变量、全局变量和变量生命周期。本章内容结构1为什么使用函数2定义函数3调用函数4参数与默认值5返回值6函数嵌套调用7变量作用域第6章为什么使用函数JavaScript程序设计｜授课PPT3当程序功能增多时，把代码分成多个函数能降低复杂度。函数可以减少重复代码，提高复用性。函数名应能准确描述功能，如sum、isPrime、showInfo。使用函数后，主程序可以更清楚地表达整体流程。教学重点函数是“会做一件事的小工具”。工具可以被多次调用。先写功能，再考虑复用。第6章函数的定义与调用JavaScript程序设计｜授课PPT4讲解要点函数由function关键字定义。函数体写在花括号中。函数不会自动执行，必须调用。JavaScript示例functionsayHello(){console.log("欢迎学习JavaScript！");}sayHello();sayHello();第6章函数调用的执行过程JavaScript程序设计｜授课PPT51遇到调用2进入函数3执行函数体4返回调用处流程说明主程序执行到函数调用语句时，跳转到函数内部。函数体语句按顺序执行。遇到return或函数结束后，程序回到调用位置。函数调用可以嵌套，但要保持逻辑清晰。第6章参数：让函数更灵活JavaScript程序设计｜授课PPT6形参写在函数定义的小括号中，用来接收数据。实参写在函数调用的小括号中，是传给函数的实际数据。参数可以有多个，多个参数之间用逗号分隔。恰当使用参数，可以让同一个函数处理不同数据。示例理解functionsum(a,b)中a、b是形参。sum(10,20)中10、20是实参。第6章带参数函数JavaScript程序设计｜授课PPT7讲解要点参数让函数从固定功能变成通用功能。本例用参数控制输出星号的个数。JavaScript示例functionshowLine(n){letline="";for(leti=1;i<=n;i++){line+="*";}console.log(line);}showLine(3);showLine(6);第6章返回值returnJavaScript程序设计｜授课PPT8return用于把函数的运行结果返回给调用位置。return之后的语句通常不会继续执行。没有return的函数默认返回undefined。有返回值的函数可以参与赋值、表达式和其他函数调用。对比console.log()是输出。return是返回结果。二者不是同一件事。第6章有返回值的函数JavaScript程序设计｜授课PPT9讲解要点sum函数把计算结果返回。调用位置可以把返回值保存到变量。返回值也可以直接输出或继续参与运算。JavaScript示例functionsum(a,b){returna+b;}letresult=sum(10,20);console.log(result);console.log(sum(3,4)*2);第6章嵌套调用与作用域JavaScript程序设计｜授课PPT10函数可以调用其他函数，形成嵌套调用。局部变量定义在函数内部，只能在函数内部使用。全局变量定义在函数外部，可以被多个函数访问。应尽量减少不必要的全局变量，降低变量冲突风险。生命周期局部变量：函数调用时创建，调用结束后通常失效。全局变量：页面或程序运行期间通常一直存在。第6章综合示例：判断素数函数JavaScript程序设计｜授课PPT11讲解要点把判断逻辑封装为isPrime(n)。返回true或false，便于主程序使用。该函数可在多处复用。JavaScript示例functionisPrime(n){if(n<2)returnfalse;for(leti=2;i<n;i++){if(n%i==0){returnfalse;}}returntrue;}console.log(isPrime(17));第6章课堂练习JavaScript程序设计｜授课PPT12随堂练习/课后作业建议1编写sayHello()函数，输出欢迎语。2编写sum(a,b)函数，返回两个数的和。3编写max(a,b)函数，返回较大值。4编写isEven(n)函数，判断是否为偶数。5编写isLeap(year)函数，判断闰年。6编写factorial(n)函数，返回n的阶乘。第6章本章小结JavaScript程序设计｜授课PPT13知识闭环函数用于封装一段可复用的功能。参数决定函数输入，return决定函数输出。函数调用会改变程序执行位置，完成后回到调用处。作用域决定变量能在哪里被访问。迁移应用把重复代码提取成函数。用函数名表达功能意图。复杂程序可拆成多个小函数逐步实现。第7章类和对象简约风格｜程序设计主题｜课堂教学版本章学习地图面向对象概述对象类属性和方法构造方法课程重点理解面向对象的基本思想。掌握对象、类、属性、方法和构造方法。理解封装与继承并能编写简单类。课堂推进建议1概念导入2语法讲解3示例演示4随堂练习JavaScript程序设计｜授课PPT1第7章学习目标与知识结构JavaScript程序设计｜授课PPT2学习目标理解对象由属性和方法组成。理解类是创建对象的模板。会用class定义类，用new创建对象。会在类中定义构造方法和普通方法。了解封装和继承的作用。本章内容结构1面向对象思想2对象直接量3类与对象4constructor构造方法5属性与方法6封装7继承8综合应用第7章面向对象程序设计思想JavaScript程序设计｜授课PPT3面向对象把现实世界中的事物抽象为程序中的对象。对象既有状态，也有行为。状态用属性表示，行为用方法表示。面向对象有利于提高模块化程度和代码复用能力。类比学生对象：姓名、年龄、成绩是属性；学习、考试、显示信息是方法。手机对象：品牌、价格是属性；打电话、拍照是方法。第7章对象直接量JavaScript程序设计｜授课PPT4讲解要点对象可以用一组键值对描述。属性名和值之间用冒号分隔。多个属性之间用逗号分隔。通过对象名.属性名访问属性。JavaScript示例letphone={brand:"Huawei",price:4999,color:"black"};console.log(phone.brand);console.log(phone.price);第7章类与对象的关系JavaScript程序设计｜授课PPT5类是描述一组相似对象的模板。对象是根据类创建出来的具体实例。同一个类可以创建多个对象，每个对象的属性值可以不同。使用类能让对象创建过程更规范、更统一。一句话类像“图纸”。对象像“按图纸造出的具体产品”。第7章定义类与创建对象JavaScript程序设计｜授课PPT6讲解要点使用class定义类。constructor()是构造方法，用于初始化属性。this表示当前对象。使用new创建对象。JavaScript示例classStudent{constructor(name,age){=name;this.age=age;}}lets1=newStudent("李华",16);lets2=newStudent("王明",17);console.log();console.log(s2.age);第7章方法：对象的行为JavaScript程序设计｜授课PPT7讲解要点方法定义在类中，用于描述对象能做什么。方法可以访问对象自己的属性。通过对象名.方法名()调用方法。JavaScript示例classRectangle{constructor(width,height){this.width=width;this.height=height;}getArea(){returnthis.width*this.height;}}letrect=newRectangle(10,20);console.log(rect.getArea());第7章封装JavaScript程序设计｜授课PPT8封装是把数据和操作数据的方法组织在对象内部。对象对外提供必要接口，隐藏内部实现细节。通过方法读写属性，可以增加检查和控制。封装能提高程序安全性、可维护性和复用性。生活类比开车时只需要方向盘、油门和刹车。不需要了解发动机内部所有细节。第7章封装示例：控制属性修改JavaScript程序设计｜授课PPT9讲解要点通过方法设置属性，可加入合法性检查。避免外部代码随意修改对象内部状态。JavaScript示例classRectangle{constructor(width,height){this.width=width;this.height=height;}setHeight(h){if(h>0){this.height=h;}}}letr=newRectangle(10,20);r.setHeight(50);console.log(r.height);第7章继承JavaScript程序设计｜授课PPT10继承允许子类获得父类已有的属性和方法。使用extends表示继承关系。子类构造方法中通常使用super()调用父类构造方法。继承可以减少重复代码，并表达对象之间的层次关系。例子Human是父类。Student、Teacher可以是子类。子类既有共同特征，也有自己的特征。第7章继承示例JavaScript程序设计｜授课PPT11讲解要点Teacher继承Human。super(name,age)调用父类构造方法。子类增加自己的subject属性。JavaScript示例classHuman{constructor(name,age){=name;this.age=age;}}classTeacherextendsHuman{constructor(name,age,subject){super(name,age);this.subject=subject;}}lett=newTeacher("张老师",30,"JavaScript");console.log(+"teaches"+t.subject);第7章课堂练习JavaScript程序设计｜授课PPT12随堂练习/课后作业建议1定义Student类，包含姓名和年龄，并创建对象输出信息。2为Student类添加showInfo()方法。3定义Circle类，包含半径，提供求面积和周长方法。4定义Book类，包含书名、作者、价格，并输出图书信息。5定义Person类和Student子类，体现继承关系。第7章本章小结JavaScript程序设计｜授课PPT13知识闭环对象由属性和方法组成。类是模板，对象是实例。构造方法负责初始化对象。封装和继承是面向对象的重要特征。迁移应用先从现实对象提取属性和方法。用类统一描述同类对象。通过方法组织操作，避免代码分散。第8章数组简约风格｜程序设计主题｜课堂教学版本章学习地图数组基本概念访问数组遍历数组二维数组Array常用方法课程重点理解数组保存一组数据的价值。掌握数组访问、遍历和常用方法。能使用数组完成统计、查找和排序。课堂推进建议1概念导入2语法讲解3示例演示4随堂练习JavaScript程序设计｜授课PPT1第8章学习目标与知识结构JavaScript程序设计｜授课PPT2学习目标理解数组可以保存多个数据。掌握索引、数组元素和length的含义。能使用for和while遍历数组。了解二维数组和常用数组方法。能完成求和、平均值、最大值、排序等任务。本章内容结构1数组定义2索引访问3数组长度4for遍历5while遍历6二维数组7常用方法8冒泡排序第8章为什么需要数组JavaScript程序设计｜授课PPT3普通变量一次只能保存一个数据。当需要保存一组成绩、姓名、颜色、坐标等数据时，数组更合适。数组中的每个数据称为元素，每个元素都有索引。JavaScript数组长度是动态的，可根据需要添加或删除元素。场景一个班的成绩。一组颜色。贪吃蛇身体的多个坐标。第8章定义数组与访问元素JavaScript程序设计｜授课PPT4讲解要点数组直接量使用方括号[]。索引从0开始。arr.length表示数组长度。最后一个元素索引是arr.length-1。JavaScript示例letcolors=["red","orange","yellow","green"];console.log(colors[0]);//redconsole.log(colors[2]);//yellowconsole.log(colors.length);//4console.log(colors[colors.length-1]);第8章遍历数组JavaScript程序设计｜授课PPT5遍历是按一定顺序访问数组中的每个元素。for循环常用于按索引遍历数组。while循环也可遍历数组，但需要自己维护计数器。遍历通常与求和、统计、查找、输出等操作结合。核心模板for(leti=0;i<arr.length;i++){使用arr[i]}第8章数组统计：求总分和平均分JavaScript程序设计｜授课PPT6讲解要点先定义累加变量sum。遍历数组，把每个成绩加到sum中。平均分=总分/人数。JavaScript示例letscores=[90,80,76,86,93,69,85,80];letsum=0;for(leti=0;i<scores.length;i++){sum+=scores[i];}console.log("总分："+sum);console.log("平均分："+sum/scores.length);第8章查找最大值和最小值JavaScript程序设计｜授课PPT7讲解要点先假设第一个元素是最大值或最小值。遍历后续元素并不断比较。发现更大或更小的值就更新变量。JavaScript示例letarr=[12,45,23,67,34];letmax=arr[0];letmin=arr[0];for(leti=1;i<arr.length;i++){if(arr[i]>max)max=arr[i];if(arr[i]<min)min=arr[i];}console.log(max);console.log(min);第8章二维数组JavaScript程序设计｜授课PPT8二维数组可以理解为“数组中的数组”。它常用于表格数据，如多个学生多门课程成绩。访问二维数组元素通常使用arr[i][j]。外层索引表示行，内层索引表示列。示例arr[0][0]：第1行第1列。arr[1][2]：第2行第3列。第8章二维数组示例：成绩表JavaScript程序设计｜授课PPT9讲解要点每个小数组保存一个学生的多门成绩。外层循环遍历学生。内层循环遍历该学生的每门课程。JavaScript示例letscores=[[90,80,76],[86,93,69],[85,80,92]];for(leti=0;i<scores.length;i++){letsum=0;for(letj=0;j<scores[i].length;j++){sum+=scores[i][j];}console.log("第"+(i+1)+"个学生总分："+sum);}第8章Array常用方法JavaScript程序设计｜授课PPT10项目含义/作用课堂关注点push/poppush在尾部添加元素，pop删除尾部元素。常用于栈式数据处理。shift/unshiftshift删除头部元素，unshift在头部添加元素。会影响其他元素索引。slice/spliceslice截取新数组，splice可删除或插入元素。注意splice会修改原数组。sort/reversesort排序，reverse反转数组。sort比较函数决定排序规则。第8章冒泡排序JavaScript程序设计｜授课PPT11讲解要点相邻两个元素比较。如果顺序不符合要求，就交换位置。一轮结束后，最大值会“冒泡”到末尾。重复多轮后完成排序。JavaScript示例letarr=[47,38,65,97,76,13,27,49];for(leti=0;i<arr.length-1;i++){for(letj=0;j<arr.length-1-i;j++){if(arr[j]>arr[j+1]){lett=arr[j];arr[j]=arr[j+1];arr[j+1]=t;}}}console.log(arr);第8章课堂练习JavaScript程序设计｜授课PPT12随堂练习/课后作业建议1定义数组保存5名学生姓名，并依次输出。2定义成绩数组，计算总分和平均分。3输出数组中的最大值和最小值。4统计成绩数组中大于60的个数。5使用冒泡排序将数组按从小到大排序。6用二维数组保存3名学生3门成绩并输出总分。第8章本章小结JavaScript程序设计｜授课PPT13知识闭环数组用于保存一组数据，索引从0开始。遍历数组是统计、查找、排序的基础。二维数组适合表示表格型数据。数组方法能提高增删改查效率。迁移应用成绩管理、名单管理、坐标集合都可用数组。写数组程序先明确元素含义和索引范围。排序算法训练逻辑思维。第9章JavaScript常用对象简约风格｜程序设计主题｜课堂教学版本章学习地图内置对象概述String对象Date对象Math对象定时器课程重点掌握String、Date、Math和定时器常用方法。能处理字符串、日期时间和随机数。能制作时钟、倒计时等小程序。课堂推进建议1概念导入2语法讲解3示例演示4随堂练习JavaScript程序设计｜授课PPT1第9章学习目标与知识结构JavaScript程序设计｜授课PPT2学习目标认识常用内置对象及其作用。掌握String对象常见字符串处理方法。掌握Date对象获取日期和时间。掌握Math对象取整、随机数等方法。会使用定时器实现周期执行。本章内容结构1对象与内置对象2String属性与方法3字符串截取与替换4Date对象5Math对象6随机数7setInterval定时器第9章为什么学习常用对象JavaScript程序设计｜授课PPT3JavaScript不仅有语法，还提供了大量现成对象和方法。使用内置对象可以减少重复造轮子，提高开发效率。常用对象包括String、Date、Math、Array等。本章重点解决文本处理、时间处理、数学计算和定时执行。学习策略先知道对象能做什么。再记住常用方法。最后通过案例串联使用。第9章String对象概览JavaScript程序设计｜授课PPT4字符串既可以作为基本类型使用，也可以调用String对象的方法。length属性可获取字符串长度。charAt(index)可获取指定位置字符。substring()、replace()、split()、concat()等方法常用于文本处理。注意字符串索引也从0开始。多数String方法返回新字符串，不修改原字符串。第9章String常用方法示例JavaScript程序设计｜授课PPT5讲解要点length获取长度。charAt()按索引取字符。replace()替换文本。split()把字符串拆分为数组。JavaScript示例letstr="HelloJavaScript";console.log(str.length);console.log(str.charAt(0));console.log(str.replace("Hello","Hi"));lettext="red,green,blue";letarr=text.split(",");console.log(arr);第9章Date对象JavaScript程序设计｜授课PPT6Date对象用于处理日期和时间。newDate()可以创建表示当前时间的日期对象。getFullYear()获取完整年份。getMonth()获取月份，但结果从0开始，所以通常要加1。getDate()、getDay()、getHours()、getMinutes()、getSeconds()可获取日期时间各部分。易错点getMonth()返回0~11。显示实际月份时要+1。第9章获取当前日期和时间JavaScript程序设计｜授课PPT7讲解要点创建Date对象。分别读取年、月、日、时、分、秒。拼接成常见显示格式。JavaScript示例letnow=newDate();letyear=now.getFullYear();letmonth=now.getMonth()+1;letdate=now.getDate();leth=now.getHours();letm=now.getMinutes();lets=now.getSeconds();console.log(year+"-"+month+"-"+date);console.log(h+":"+m+":"+s);第9章Math对象JavaScript程序设计｜授课PPT8Math对象提供数学计算相关方法和常量。Math.abs()返回绝对值。Math.floor()向下取整，Math.ceil()向上取整。Math.round()四舍五入取整。Math.random()生成[0,1)范围内的随机小数。常用公式1~10随机整数：Math.floor(Math.random()*10)+1第9章随机数与取整JavaScript程序设计｜授课PPT9讲解要点随机数常用于抽奖、游戏、测试数据。生成指定范围随机整数需要缩放、取整、平移。公式：Math.floor(Math.random()*个数)+起始值。JavaScript示例console.log(Math.floor(5.9));//5console.log(Math.ceil(5.1));//6console.log(Math.round(5.5));//6//生成1~100之间的随机整数letn=Math.floor(Math.random()*100)+1;console.log(n);第9章定时器JavaScript程序设计｜授课PPT10setInterval()可以按固定时间间隔重复执行函数。clearInterval()可以停止已经创建的定时器。定时器常用于时钟、倒计时、动画、周期刷新等场景。时间间隔单位是毫秒，1000毫秒等于1秒。语法letid=setInterval(fn,1000);clearInterval(id);第9章示例：每秒输出当前时间JavaScript程序设计｜授课PPT11讲解要点将输出当前时间封装成函数。使用setInterval每隔1秒调用一次。可扩展为网页时钟或倒计时。JavaScript示例functionrender(){letnow=newDate();console.log(now.toLocaleTimeString());}lettimer=setInterval(render,1000);//需要停止时：//clearInterval(timer);第9章课堂练习JavaScript程序设计｜授课PPT12随堂练习/课后作业建议1输出-10、25、-3.14的绝对值。2观察Math.floor、Math.ceil、Math.round的不同结果。3生成一个1~10之间的随机整数。4输出当前年月日。5使用setInterval每秒输出一次当前时间。6编写10秒倒计时程序。第9章本章小结JavaScript程序设计｜授课PPT13知识闭环String用