《JavaScript编程技术项目式教程（微课版）》全套教学课件

项目一

输出学生信息全套可编辑PPT课件何谓工匠呢？注重细节、追求完美是工匠精神的关键。彭祥华、高凤林、胡双钱等工匠，以高超技艺提升制造品质与水平。热爱劳动，专注精神工匠故事前端开发工程师岗位有哪些要求？精通HTML5、CSS等语言，熟悉DOM模型，熟练运用网页编辑、调试工具，具有跨浏览器设计开发经验。技能要求具有一定文档编辑能力及逻辑思维能力。文档编辑与逻辑思维精通JavaScript脚本语言，熟练使用jQuery、以及Bootstrap、Vue等前端框架。语言能力具有良好的学习能力，良好的团队意识。学习能力和团队意识学习目标了解JavaScript的特点及组成熟悉JavaScript的用途和发展状况掌握HBuilder开发工具的基本使用方法掌握JavaScript的基本使用方法培养工匠精神项目描述引导学生初步认识JavaScript是Web的编程语言。通过设置开发环境，建立文件、熟悉页面结构、编写代码等步骤了解JavaScript的特点，了解JavaScript作用，掌握在HTML文档中嵌入JavaScript的方法，同时了解JavaScript程序是由浏览器负责解释执行的，为静态页面添加动态效果，实现学生信息的输出。项目分析嵌入方法工具选择03在JavaScript代码中使用document.getElementById()等方法操作HTML标签。嵌入方法01根据项目需求选择合适的Web开发工具。02在HTML文档中通过script标签嵌入JavaScript代码。测试方法04使用浏览器打开HTML文档，查看页面效果并进行调试。任务1搭建开发环境由Netscape的BrendanEich设计，最初命名为LiveScript，后改名为JavaScript。背景解释型脚本语言，基于对象，数据安全性，跨平台性，动态性。特点ECMAScript、DOM、BOM。组成HBuilderX、SublimeText、AdobeDreamweaver、VisualStudioCode和WebStorm等。开发工具任务2第一个JavaScript程序行内式将JavaScript脚本代码写在事件的属性中或函数中直接调用。0102嵌入式使用<script>和</script>首尾标签包裹JavaScript代码，可放在HTML文档中任何需要的位置。03外链式把JavaScript脚本保存到外部文件中，通过<script>标签的“src”属性引用。基础语法值、运算符、表达式、关键词和注释。语句构成01按编写顺序逐一执行。语句执行02建议初学者每行代码后加分号，忽略多余空格、换行符和制表符，注释帮助理解代码和调试程序。编写规则03任务实现在HTML页面中编写JavaScript代码，输出“千里之行，始于足下”。编写代码保存文件，注意文件路径。保存文件测试代码运行效果，查看显示结果。测试代码项目实施使用JavaScript在页面输出学生个人信息，包括姓名、专业、班级和性别。JavaScript输出信息项目总结网页编程语言，用于实现网页交互功能。JavaScript概述内嵌式、外链式、行内式。引入方式常用编辑器：VisualStudioCode、SublimeText等。编辑工具变量、数据类型、运算符、流程控制、函数等。语法规则理论题简述JavaScript语言特点，组成及引入方法。实操题将<script></script>标签中的代码放在HTML不同位置查看页面显示效果。标签位置使用嵌入式实现网页弹出“helloworld！”提示对话框。嵌入式实现使用调用外部js文件方式来实现网页弹出“helloworld！”提示对话框。外部js文件调用拓展训练使用JavaScript语言在页面上输出一首古诗：勤学【宋】汪洙学向勤中得，萤窗万卷书。三冬今足用，谁笑腹空虚。谢谢项目二

计算体脂率倡导文明健康绿色环保生活方式倡导文明健康生活方式，提高健康意识，掌握健康知识和技能。健康生活方式推动实施健康中国战略，践行人民至上、生命至上理念。健康中国战略减盐、减油、减糖、健康口腔、健康体重、健康骨骼，提高健康意识。三减三健理念学习目标掌握输入输出语句的使用掌握JavaScript中变量的使用掌握运算符的使用掌握JavaScript的数据类型及类型转换方法倡导文明健康绿色环保生活方式项目描述通过开发计算体脂率的项目，引导学生掌握JavaScript输入输出语句、变量的使用、JavaScript的数据类型的相关基础知识，同时掌握并能合理使用不同的运算符。体脂率可通过BMI计算法计算得出。BMI计算法：BMI=体重（公斤）÷（身高×身高）（米）项目分析使用JavaScript输入输出语句进行交互。输入输出语句01遵循变量命名规范，确保代码可读性。变量命名规范02定义变量并赋值，存储体重和身高数据。变量定义和赋值0304使用JavaScript数据类型进行计算。数据类型使用在计算过程中进行数据类型转换。数据类型转换05任务1输出网页版权信息包含联系我们、网站地图、服务调查、用户留言、设为首页和收藏本站等链接。底部导航栏输入和输出语句语句说明alert(“msg”)浏览器弹出警告框prompt(“msg’”)浏览器弹出输入框，用户可以输入内容document.write(“msg”)向文档写文本、HTML表达式或JavaScript代码console.log(“msg”)浏览器控制台输出信息JavaScript不提供任何内建的打印或显示函数。为了方便信息的输入和输出，JavaScript提供了输入和输出语句。变量1.变量的作用在编写JavaScript程序时，如何将我们输入的信息保存起来呢？JavaScript的变量就是存储临时数据值的容器，也是程序在内存中申请的一块用来存放数据的空间。2.变量的命名规范变量在命名时，需要遵守变量的命名规范，从而避免代码运行出错，增强代码的可读性，提高代码的运行效率。具体如下：(1）由字母、数字、下划线和美元符号（$）组成，如name，user_name；(2）必须以字母开头，不能以数字开头，如age18正确，18age错误；(3）严格区分大小写，如tom和Tom代表两个变量； (4）保留字和关键字不能用于变量命名，如if、var和while等；(5）尽量做到“见其名知其意”，如name表示姓名，age表示年龄；(6）组合式变量名建议遵循驼峰式，如userName、myAge；任务2判断平闰年闰年能被4整除但不能被100整除，或能被400整除。输入年份，判断是否能被4整除但不能被100整除，或能被400整除，弹出警告框显示结果。判断方法判断代码数据类型分类JavaScript同强类型语言C、JAVA语言不同，它是弱数据类型语言，编写程序时不需要提前声明变量的数据类型，程序在运行过程中会自动确定变量的数据类型，我们可以把JavaScript理解为动态类型语言。运算符与表达式关系运算符赋值运算符03用于比较两个操作数的大小关系，其结果就是true或false。算数运算符01用于给JavaScript变量赋值，将表达式右侧的值赋给左边的变量。02用于执行加、减、乘和除等算数运算。逻辑运算符04逻辑运算符用于对布尔型值执行运算，通常在条件语句中使用。任务实现01编写JavaScript代码，判断输入的年份是否为闰年。编写代码02弹出对话框，输入要查询的年份。输入年份03根据闰年规则，判断输入的年份是否为闰年，并给出提示。判断闰年项目实施使用JavaScript语言开发计算体脂率的程序。项目总结学习JavaScript基础知识，包括变量、数据类型、数据类型转换和运算符与表达式。制作页面底部导航01掌握基础语法知识，为后续学习打下基础。计算平闰年02学习JavaScript基础知识，为后续学习打下基础。计算体脂率03理论题简述变量的命名规范?简述基本数据类型的分类?简述JavaScript强制转换数据类型的方法？实操题提示用户输入年龄，将用户反馈赋值给变量，并弹出对话框输出年龄。输入年龄使用parseFloat()函数将华氏温度转换为摄氏度，转换公式为：C=5/9(F-32)。华氏转摄氏战士连续作战89小时，编程计算共多少天零多少小时。计算作战时间拓展训练使用JavaScript语言完成体脂率程序的二次开发，要求根据不同的性别计算结果并给出相应提示！体脂率公示如下：（1）计算体重指数(BM1):BMI1=体重(千克)/身高的平方(米)（2）计算体脂率:1.2*BMI+0.23*年龄-5.4-10.8*性别(男为1，女为0)说明：成年男性的体脂率为15到18%，女性为20%至25%。谢谢项目三

简易自动取款机模拟系统01确保数据处于有效保护和合法利用的状态，具备保障持续安全状态的能力。数据安全定义02根据数据重要程度和危害程度，实行分类分级保护。数据分类分级保护制度03采取合法、正当方式收集数据，不得窃取或非法获取数据。数据收集合法性数据安全法学习目标掌握if语句单分支、双分支和多分支语法结构掌握switch语句语法结构掌握while语句语法结构掌握for语句语法结构掌握三元运算符的使用掌握break和continue的区别并合理使用培养学生肩负民族振兴使命项目描述通过简易自动取款机模拟系统项目，引导学生掌握流程控制语句的使用，一个程序执行的过程中，代码的执行顺序会直接影响执行结果。通过合理使用流程控制语句开发满足用户需求。输入数字1实现存款功能；输入数字2实现取款功能；输入数字3查询余额，输入数字4取卡退出。项目分析输入输出语句的使用。分支语句的使用。循环语句的使用。运算结果的显示。完成本项目使用的技术要点任务1学生成绩等级划分成绩等级划分根据成绩，给出学生的成绩考评结果。成绩等级划分条件90-100分，A，优秀；80-89分，B，良好；70-79分，C，中等；60-69分，D，及格；否则，E，不及格。选择结构1.if语句语法格式一：if(条件表达式){如果条件为true时执行的代码块；}语法格式二：if(条件){条件为true时执行的代码块；}else{条件为false时执行的代码块；}选择结构语法格式三：if(条件1){条件1为true时执行的代码块；}elseif(条件2){条件2为true时执行的代码块；}…elseif(条件n){条件n为true时执行的代码块；}else{所有条件同时为false时执行的代码块；}选择结构2.switch语句语法格式：switch(表达式){case值1:代码块1;break;case值1:代码块2;break;…default:默认代码块;}任务2计算1到100的累加和先测试再循环，循环体和循环条件组成。while语句01先执行再测试，至少执行一次循环体。do...while语句02初始化变量，条件表达式，增量表达式组成。for语句03选择结构1.while语句语法格式：while(条件表达式){循环执行的代码块；}2.do…while语句语法格式：do{循环执行的代码块；}while(条件);3.for语句语法格式：for(初始化变量;条件表达式;增量表达式){循环执行的代码块；}项目实施显示当前余额。查询余额退出系统。取卡退出输入取款金额，余额减少。取款输入存款金额，余额增加。存款项目总结01学生成绩等级划分学习选择结构和循环结构，掌握流程控制语句。02计算1-100累加和学习循环结构，掌握流程控制语句。03简易自动取款机模拟系统学习选择结构和循环结构，掌握流程控制语句。04使用break和continue学习流程控制语句，掌握break和continue的使用。05案例学习通过案例熟练掌握JavaScript的流程控制语句。理论题简述JavaScript条件语句的语法格式简述JavaScript循环语句的语法格式简述break和continue的区别实操题显示用户数据：提示用户输入1-100之间的数，如果用户输入数据不在范围内，提示“请输入1-100之间的数”，如果在范围内，将用户输入的数据输出。输入范围不同的时间显示不同的问候语，比如8点到11点之间显示上午好，11-13点之间显示中午好，13-17点显示下午好，其他时间显示晚上好。问候语求10的阶乘运算结果。阶乘运算拓展训练使用JavaScript语言输出正方形程序的开发，要求：（1）如果用户输入的行数小于10，按照用户输入的行数输出正方形；（2）如果用户输入的行数大于20，输出20行列的正方形。输入行数谢谢项目四

计算器的实现01职业理想、职业态度、职业责任、职业技能、职业纪律、职业良心、职业信誉、职业作风。职业精神02精益求精，一丝不苟，培养学生对计算机知识的思考和运用能力。工匠精神职业精神学习目标掌握函数的定义和调用方法掌握函数的参数的合理使用方法掌握返回值的设置掌握变量的作用域掌握系统函数的使用培养精益求精的职业精神项目描述通过开发简易计算器项目，引导学生掌握函数的定义、函数的调用和系统函数的使用。用户在页面输入第一个操作数和第二个操作数，点击相应操作符将运算结果显示在计算结果文本框中。项目分析编写函数，实现加减乘除等基本运算。函数定义在页面输入操作数和操作符，调用函数计算结果。函数调用0201使用系统函数，实现文本框显示计算结果。系统函数使用03任务1控制文字变化本案例要求学生使用JavaScript编写文字变化程序，用户选择不同的按钮，文字会发生不同的变化。函数的定义05函数返回值return语句指定，可以是任意的常量、变量或表达式。04函数体完成特定任务的一段程序代码。03函数参数形式参数，用于接收调用函数时传递的变量和值，多个参数用逗号分隔。02函数名命名，任何有效的标识符，赋予“所见即所得”的函数名。01函数定义定义完成特定任务的一段程序代码，避免重复编写。函数的调用直接调用调用函数，直接使用函数名。事件调用计算按钮点击后，弹出两个数的和。链接调用函数调用函数，实现链接跳转。函数调用案例定义一个名为my_Function的函数，接收两个参数num1和num2，计算它们的和并弹出提示框显示结果。函数定义在HTML文件中定义一个超链接，点击时调用my_Function函数，传入参数3和4，计算它们的和并弹出提示框显示结果。函数调用函数的参数和返回值调用函数时，实参和形参应一一对应，未提供实际参数的形参运行结果为undefined。函数使用return语句返回值，控制权交给调用函数的程序。函数参数函数返回值任务实现使用JavaScript编写代码，实现文字大小和颜色的变化。程序实现01程序步骤02编写HTML和JavaScript代码，实现文字变化和按钮调用，保存文件并测试代码运行效果。任务2检查参数是否是非数字值使用JavaScript完成用于检查参数是否是非数字值的程序开发，效果如图4-3所示。使用JavaScript完成用于检查参数是否是非数字值的程序开发。变量的作用域变量生命周期变量在声明时初始化，函数体内用var定义的变量为局部变量，函数执行完毕后销毁；不在函数体内声明的变量为全局变量，页面关闭后销毁。局部变量在函数体内用var定义的变量，仅在函数内部有效。全局变量不在函数体内声明的变量，在整个页面范围内有效。系统函数parseInt()将字符串转换为整数，parseFloat()将字符串转换为小数。解析字符串为数值01eval()计算表达式的值。计算表达式02isNaN()判断数据是否为数值型，返回true或false。判断数值类型03任务实现定义isNum函数，获取输入值，判断是否为非数字值。函数定义保存文件，测试代码运行效果，查看显示结果。测试运行在页面中编写代码，获取输入值，调用isNum函数，显示结果。代码实现项目实施实现加、减、乘、除四种运算，输出结果。计算器功能项目总结通过开发文字变化、判断非数字值和计算器，熟练掌握函数的应用。理论题简述JavaScript函数定义的语法格式？简述JavaScript函数调用的语法格式？简述JavaScript常用的系统函数？实操题输入三个数，输出最大值。调用函数输出100~1000之间所有素数，每行6个。编写函数输出2000～2100年所有闰年。编写函数接收三个参数，返回最大值。编写函数拓展训练编写一个带一个参数（指定显示多少层星号“*”)的函数，它在页面上输出的一个5层星号“*”图案如下图所示。其中，每行的星号“*”之间有一个空格间隔。谢谢项目五

内置对象特效开发全民国家安全教育日设立背景增强全民国家安全意识，维护国家安全。国家安全定义国家政权、主权统一和领土完整、人民福祉、经济社会可持续发展和国家其他重大利益相对处于没有危险和不受内外威胁的状态，以及保障持续安全状态的能力。国家安全领域政治安全、军事安全、国土安全、经济安全、文化安全、生物安全、网络安全、社会安全、科技安全、生态安全、资源安全、核安全、海外利益安全、太空安全、深海安全、极地安全等。维护国家安全拾获国家秘密及时上交，发现买卖国家秘密及时报告，制止盗窃、抢夺国家秘密，发现泄露线索及时举报。学习目标理解基于对象的程序设计思想掌握JavaScript的常用内置对象的使用方法掌握JavaScript的数组的创建方法掌握String对象、Date对象、Math对象常用的

属性和方法培养学生维护国家安全意识项目描述完成用户注册页面的验证，按提示要求进行输入，如果输入有误，在文本框后面提示错误信息，只有输入格式全部正确，才能够提交成功。项目分析1.用户名是由4～16位字符组成，不能为空，加载页面时提示相应信息。2.密码是由4～10位字符组成，且不能为空，加载页面时提示相应信息。密码和确认密码必须一致。3.电子邮箱信息不能为空，且必须包含“@”符号和“.”符号，且“@”符号必须在“.”符号前面。4.手机号不能为空，必须是11位数字，且由1开头。5.全部信息均满足条件后点击注册按钮，提示注册成功。任务1电子邮箱格式的简单验证完成电子邮箱格式的简单验证，引导学生注意电子邮箱的格式，电子邮箱要包含@，电子邮箱要包含.,并且在@后面，电子邮箱不能为空。JavaScript对象简介1.什么是JavaScript的对象?2.JavaScript包含四种对象3.内置对象的分类Number（数字）对象什么是Number对象？在JavaScript中，Number对象也被称为数字对象，是用于处理数字类型的对象。Number对象具有用于格式化数值的各种功能，并且可以释放用于表达诸如最大值、最小值，数值类型的无穷大或无限等值的各种属性和方法。Number对象用于处理整数、浮点数等数值。String（字符串）对象1.什么是String对象？String字符串是我们熟悉的数据类型，也是JavaScript的一种基本数据类型，String对象可用于处理或格式化文本字符串的对象。我们可以使用String对象提供原始字符串的长度属性和大量的字符串操作方法。例如提取字符或子字符串。在JavaScript中类型的转换非常灵活，在对字符串的属性或方法进行访问时，JavaScript首先会在内部为这个字符串创建一个字符串对象，然后用字符串对象代替字符串进行操作。

2.创建String字符串对象

创建字符串对象有两种方法。

（1）自动创建字符串对象，用var关键字声明。varstr1="helloworld";

调用字符串的对象属性或方法时自动创建对象，用完就丢弃。

（2）手工创建字符串对象，通过new关键字来创建。varstr1=newString("helloword");

String（字符串）对象3.String对象常见属性和方法

任务实现任务分析代码实现01电子邮箱不能为空，包含@和.,且.在@后面。02使用String对象的indexOf()方法，判断电子邮箱格式是否正确。任务2

随机数的产生完成在网页上随机输出1-100的数字，按开始按钮，产生随机数，按暂停按钮停止产生随机数，引导学生如何实现随机输出。任务2随机数的产生使用Math.random()生成0-1之间的随机数，乘以100并向下取整得到1-100的随机整数。随机数产生使用setInterval()方法，每50毫秒产生一个随机数并将值赋给text，实现数字滚动。定时器使用clearTimeout()方法结束计时器，显示最终结果。结束计时器Math（算数）对象1.Math对象作用Math（算数）对象的作用是：执行普通的算数任务。Math对象允许对数字执行数学任务。Math对象是一个内置对象，它为数学常量和数学函数提供了属性和方法，而不是一个函数对象。与其它全局对象不同的是,Math不是一个构造器，Math的所有属性和方法都是静态的。2.Math对象的属性Math对象的属性是数学中常用的常量，Math对象的所有属性和方法都是静态的，使用该对象时，不需要对其进行创建。

Math（算数）对象3.Math对象的方法Math对象还提供了一些常用的数学方法

。

任务3根据不同时间段显示问侯语完成在网页上输出系统日期时间，并且通过当前的时间进行问侯，引导学生如何实现日期时间输出。Date（日期）对象使用new关键字创建Date对象，有4种常见方式。创建Date对象提供丰富的方法来操作日期和时间值。Date对象方法Date（日期）对象1.什么是Date对象？在JavaScript中，Date对象用来实现对日期和时间的控制。例如，我们想要在页面上显示计时时钟，就得重复生成新的Date对象来获取计算机的当前时间。Date对象提供了丰富的方法来对这些值进行操作。另外需要了解的是，Date对象存储的日期是从1970年1月1日00:00:00以来的毫秒数。2.创建Date对象在使用Date对象类时，必须先使用new关键字创建一个Date对象。创建Date对象的常见方式有以下4种。（1）创建当前时刻的Date对象。（2）创建指定日期的Date对象。（3）创建指定日期和时间的Date对象。（4）通过时间戳创建Date对象。Date（日期）对象3.Date对象的方法

任务实现获取系统时间，判断上午、中午、下午或晚上，并显示相应问候语。根据时间段显示问候语任务4轮播图特效的制作完成网页上轮播图特效的制作，图片可以自动播放，也可以通过上一页、下一页按钮进行播放，使用六张世界名胜的图片，引导学生如何实现图片的轮播。Array（数组）对象1.什么是数组?数组是在内存中保存一组数据的集合。实质上数组也是一种变量，不过这个变量同其他变量只能保存一个值不同，数组变量能够保存多个值，这也是数组变量同其他变量本质的区别。数组变量的多值性相当于一个数组变量可以包含多个子变量，而每个子变量与普通变量一样，可以被赋值，也可以从中取值。为了区别数组变量和普通变量，我们把数组的子变量称为数组元素变量（简称数组元素）。另外，把数组中数组元素的个数称为数组大小（或数组长度）。

Array（数组）对象2.创建一个数组创建一个数组，有三种方法。下面的代码定义了一个名为myCars的数组对象。1）常规方式varmyCars=newArray();myCars[0]="Saab";

myCars[1]="Volvo";myCars[2]="BMW";2）简洁方式varmyCars=newArray("Saab","Volvo","BMW");3）字面方式varmyCars=["Saab","Volvo","BMW"];Array（数组）对象3.访问数组通过指定数组名以及索引号码，你可以访问某个特定的元素。以下代码可以访问myCars数组的第一个值：varname=myCars[0];以下代码可以修改数组myCars的第一个元素:myCars[0]="Opel";注：[0]是数组的第一个元素。[1]是数组的第二个元素。在一个数组中你可以有不同的对象，所有的JavaScript变量都是对象。数组元素是对象，函数是对象。因此，你可以在数组中有不同的变量类型。你可以在一个数组中包含对象元素、函数、数组：myArray[0]=Date.now;myArray[1]=myFunction;myArray[2]=myCars;任务实现制作轮播图特效，图片自动播放，也可通过按钮播放。任务描述01定义数组存储6张图片。数组定义02每隔2秒自动轮播图片。自动轮播0304实现向后播放图片功能。后退按钮实现向前播放图片功能。前进按钮05项目实施验证用户名长度在4-16位之间。用户名验证验证密码长度在4-10位之间。密码验证验证两次输入的密码是否一致。确认密码验证验证手机号码开始位是否为1，长度是否为11位，且不包含字符。手机号码验证验证邮箱格式是否包含@符号和.符号，且@符号在.符号前面。邮箱验证项目总结具有属性和方法的实体，用于存储和操作数据。对象概念内置对象、宿主对象、自定义对象。对象分类0201通过项目实施，学习内置对象，增强实践能力。任务驱动教学03理论题简述面向对象语言有三大特性？简述JavaScript包含四种对象？简述内置对象包含哪些？实操题01计算长度，获取指定位置字符，查找指定字符，替换字符，截取子串。字符串操作02计算指定日期是当前年的第几天。日期计算03预加载图片，定时切换，支持开始和停止按钮。幻灯片展示拓展训练从学员名单中随机选人。制作随机选人系统谢谢项目六

BOM特效开发《中华人民共和国个人信息保护法》保护个人信息权益，促进合理利用，促进数字经济健康发展。目的与意义合法、正当、必要和诚信原则，最小范围原则，公开透明原则，质量保证原则，安全保障原则。个人信息处理原则个人信息受法律保护，处理个人信息需取得个人同意，个人有权撤回同意。公民权益法治关怀与人性温度，避免“大数据杀熟”和“信息茧房”。信息化社会学习目标理解浏览器对象模型的概念及作用掌握window对象的重要属性和方法掌握location对象的重要属性和方法掌握history对象、navigator对象及screen对象的

重要属性和方法

作为计算机行业的从业人员，在保护好个人信息的同时，不泄露他人信息项目描述本项目主要完成旅游通网站的开发，从使用HTML构建网站结构，设置CSS样式到最后使用JavaScript开发网站导航、轮播图、表单等特效，网站主页如下所示。项目分析使用浏览器测试倒计时效果。浏览器测试每秒钟调用一次倒计时函数，实现动态倒计时效果。定时器设置倒计时时长=抢购开始时间-当前时间，单位为毫秒。倒计时时长计算将毫秒数转换为秒数，再转换为天、时、分、秒表示。时长转换任务1弹出广告窗口在Web中使用JavaScript的时候，BOM对象——浏览器对象模型起着至关重要的作用。BOM中提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。本任务制作一个弹窗效果，来学习BOM对象和window对象的属性和方法。BOM简介1.BOM的定义BOM（BrowserObjectModel）即浏览器对象模型，是JavaScript的重要组成部分之一。它提供了一系列对象，用于与浏览器窗口进行交互，这些对象统称为BOM对象。2.BOM的作用BOM提供了独立于内容而与浏览器窗口进行交互的对象，操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。3.BOM的结构

windowdocumentlocationnavigatorscreenhistory……BOM简介window子对象功能如下：（1）document（文档对象）：也称DOM对象，是HTML页面当前窗体的内容，同时它也是JavaScript重要组成部分之一，将会在后续课程中进行详细讲解。（2）screen（屏幕对象）：可获取与屏幕相关的数据，例如屏幕的分辨率等。（3）location（地址栏对象）：用于获取当前浏览器中URL地址栏内的相关数据。（4）history（历史对象）：主要用于记录浏览器的访问历史记录，也就是浏览网页的前进与后退功能。（5）navigator（浏览器对象）：用于获取浏览器的相关数据，例如浏览器的名称、版本等。

window对象1.window对象的作用window对象表示浏览器窗口，是BOM中所有对象的核心，也是BOM中所有对象的父对象，所有浏览器都支持window对象。JavaScript中所有全局对象、函数以及变量均自动成为window对象的成员。其中，全局变量是window对象的属性，全局函数是window对象的方法。2.window对象常用属性window对象3.window对象常用方法4.window属性和方法的调用window是不需要使用new运算符来创建对象的，在使用window对象时，可以直接调用其方法和属性。格式：window.属性名；window.方法名(参数);任务2

页面定时跳转在Web中使用JavaScript的时候，BOM对象——浏览器对象模型起着至关重要的作用。BOM中提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。本任务制作一个弹窗效果，来学习BOM对象和window对象的属性和方法。location对象1.location对象的作用location

对象可以获得当前浏览器中的URL，可以更改当前浏览器中访问的URL，实现新文档的载入或重载功能。URL：统一资源定位符（UniformResourceLocator），对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。在URL中，包含了网络协议、服务器的主机名、端口号、资源名称字符串、参数、锚点等内容。location对象2.location对象的常用属性location对象2.location对象的常用方法location对象提供了用于改变URL地址的方法，所有主流浏览器都支持。任务实现实现页面定时跳转功能，跳转目标地址为百度首页。任务描述01获取和更改当前浏览器中的URL，实现新文档的载入或重载功能。location对象02定义定时跳转函数，传递秒数和目标地址参数，递减秒数，当秒数递减到0时，跳转到指定页面。任务实现03任务3浏览历史记录跳转在一些网页中，经常会有返回上一页的功能，用户点击页面上的按钮或者链接就可以返回到上一个页面，这样使我们在浏览网页过程中操作很方便。本任务，我们将利用history对象，实现页面的前进返回功能，实现从this页面跳转到other页面，并由other页面返回this页面功能。history对象的作用通过window.history属性访问，实现“后退”和“前进”功能。历史记录操作history对象的常用属性和方法属性length：获取历史记录数量。0102方法history对象的常用属性和方法：back()、forward()、go()，用于页面跳转。任务实现包含两个按钮，一个用于载入other页面，一个用于前进。this页面01包含一个返回按钮，用于返回this页面。other页面02使用location.assign()和history.go()实现页面跳转和前进返回功能。实现按钮功能03任务4

获取浏览器相关信息在开发网页过程中，为了让网页兼容常用浏览器，需要获取当前浏览器名称、平台版本信息、是否启用cookie状态、操作系统平台等信息，因此，在使用浏览器显示网页时，浏览器可以创建一个navigator对象，利用该对象来获取当前页面的浏览器相关信息。例如：来获取浏览器名称、浏览器版本号、浏览器运行平台等相关信息，并将获取到的信息显示。navigator对象BOM中的navigator对象，包含了有关浏览器的信息，可以使用这些属性进行平台专用的配置，所有浏览器都支持该对象。navigator对象的实例是唯一的，可以用window对象的navigator属性来引用它。navigator对象的常用属性和方法任务实现02040103浏览器运行平台navigator.platform浏览器名称navigator.appName浏览器版本号navigator.appVersion是否启用cookienavigator.cookieEnabled任务5获取浏览器显示屏幕的相关信息在开发网页过程中，为了让网页显示的更加合理美观，需要获取当前浏览器显示屏幕的尺寸、分辨率等信息，因此，在使用浏览器显示网页时，可以创建一个screen对象，利用该对象来获取显示浏览器屏幕的相关信息。screen对象每个window对象的screen属性都引用一个screen对象。screen对象中存放有关显示浏览器屏幕的信息。JavaScript程序将利用这些信息优化它们的输出，以达到用户的显示要求。例如：一个程序可以根据显示器的尺寸,选择使用大图像还是小图像，还可以根据显示器颜色的深度,选择使用16位色还是8位色的图形。另外，JavaScript程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。screen对象screen对象的常用属性任务实现使用screen对象的height和width属性。使用screen对象的availHeight和availWidth属性。获取屏幕高度和宽度获取可占用高度和宽度项目实施计算商品抢购开始时间与当前时间差值，转换为天、时、分、秒。倒计时实现在页面中显示倒计时，并设置计时器每秒更新倒计时。显示倒计时项目总结提供全局属性和方法，如document、location等。window对象01获取和设置当前页面的URL。location对象02管理浏览器历史记录，如前进、后退等。history对象03获取浏览器和操作系统信息。navigator对象04获取屏幕尺寸和颜色深度等信息。screen对象05理论题简述JavaScript的浏览器对象模型?简述window对象的作用?如何调用BOM各对象属性及方法?实操题在页面载入时自动弹出一个欢迎访问窗口。自动弹出窗口利用window对象，实现指定时间关闭当前窗口案例。关闭当前窗口利用screen对象，实现网页显示窗口屏幕最大化效果。屏幕最大化拓展训练编写一个页面，包含四个按钮，前一页、后一页、back、forward，分别能访问前一页、后一页、前进和后退。谢谢项目七

DOM特效开发把每一件简单的事做好，就是不简单；把每一件平凡的事做好，就是不平凡。——张瑞敏天下大事必作于细，天下难事必作于易。—老子泰山不拒细壤，故能成其高；江海不择细流，故能就其深。学习目标了解DOM模型的组成掌握DOM中节点的常用属性和方法掌握DOM节点的创建、插入、删除、复制和替换培养严谨细致的工作作风项目描述实现购物车全选、取消全选特效，当用户选择“全选”复选框时选中所有商品，当用户取消选中“全选”复选框时取消所有商品的选择，基本功能如下：点击上面全选复选框，下面所有的复选框都选中（全选）。再次点击全选复选框，下面所有的复选框都不选中（取消全选）。如果下面复选框全部选中，上面全选按钮就自动选中。如果下面复选框有一个没有选中，上面全选按钮就不选中。项目分析让下面所有复选框的checked属性（选中状态）跟随全选按钮即可。做法给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。全选复选框设置一个变量，来控制全选是否选中。控制全选是否选中任务1绘制DOM节点树根据下面一段HTML代码，画出该HTML页面的DOM树。<!DOCTYPEhtml><html> <head> <title>DOM节点树</title> </head> <body> <h1>面向的岗位</h1> <p>web前端工程师</p> </body></html>任务描述包含一个html标签，包含head和body标签。HTML结构包含一个h1标签，内容为“面向的岗位”。标题包含一个p标签，内容为“web前端工程师”。正文DOM简介W3C标准，文档对象模型，访问、更新文档内容、结构和样式。DOM定义页面上数据和结构的树形表示，但可能并非实际实现方式。DOM结构CoreDOM、XMLDOM和HTMLDOM是三种文档类型标准模型，用于实现项目七的特效开发。DOM分类操作HTML文档的重要手段，获取、访问、标签属性和样式的设置等操作。DOM与JavaScriptDOM节点树文档节点、元素节点、文本节点、属性节点、注释节点。节点类型根节点、子节点、父节点、兄弟节点。节点关系任务实现任务2改变导航菜单样式完成鼠标移到菜单上时改变菜单样式，鼠标移出菜单时恢复为原来的样式，使用style改变元素样式或使用className改变元素样式。任务描述鼠标移到菜单上时改变菜单样式，移出菜单时恢复为原来的样式，使用style或className改变元素样式。获取操作的元素获取HTML元素通过ID、属性名和元素名获取元素对象或数组。document对象方法getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()。HTML5新增方法querySelector()、querySelectorAll()。改变元素属性使用setAttribute（）方法设置指定属性的值。设置属性值使用getAttribute（）方法获取指定元素的属性值。获取属性值使用removeAttribute（）方法从元素中删除指定的属性。删除属性改变元素样式使用style属性修改元素样式，去掉CSS样式名中的中横线，并将第二个单词首字母大写。行内样式01类样式02使用className属性修改元素样式，为元素添加或删除类样式名。改变元素内容innerHTML、innerText、textContent常用属性改变元素内容案例改变元素位置和大小01offsetLeft和offsetTop获取元素到页面边框的距离。02offsetWidth和offsetHeight获取元素自身的大小。03改变元素位置和大小利用offsetLeft和offsetTop属性改变元素位置，利用offsetWidth和offsetHeight属性改变元素大小。★注意事项：定位元素包含定位元素的最近父元素。offsetLeft和offsetTop改变元素内容。DOM特效开发：offsetWidth和offsetHeight改变元素内容。任务实现任务分析操作步骤01鼠标移入菜单时改变样式，移出时恢复原样式。02启动代码编辑软件，新建页面，编写代码，为<li>标签绑定事件，设置鼠标移入移出效果。任务3动态添加表格完成动态添加表格任务，增加一行、删除一行、复制一行、修改标题模式等操作，使用DOM动态操作表格。获取节点获取节点属性，利用节点之间的关系操作HTML元素。创建和插入节点创建节点使用createElement()、createTextNode()等方法创建元素节点、文本节点、属性节点。0102插入节点使用appendChild()、insertBefore()等方法将节点添加到HTML文档中的指定位置。删除、复制和替换节点使用remove()方法删除HTML元素。删除节点使用replaceChild()方法替换子节点。替换节点使用cloneNode()方法复制元素，参数为true或false。复制节点任务实现任务分析增加一行、删除一行、修改标题样式、复制一行。代码编写文件保存代码测试测试代码运行效果，查看显示结果。保存文件，注意文件路径。启动代码编辑软件，新建页面，编写代码。项目实施实现购物车全选、取消全选特效01项目总结通过DOM方式操作HTML和CSS样式、属性及内容，增强实践能力。操作HTML和CSS通过节点方式创建、插入、复制、替换和删除指定的元素。创建、插入、复制、替换和删除元素理论题简述什么是DOM？简述DOM有哪些节点？查询元素有几种常见的方法？HTML5新增的元素选择方法是什么?实操题在文本框输入留言，点击“发布”按钮，发布留言，若留言为空，提示“您没有输入内容”。留言发布操作点击全选时五个复选框全部选中，点击全不选时五个复选框都不选择。复选框操作实现增加一行、删除一行、复制一行功能。动态添加表格拓展训练当鼠标经过<li>标签时，改变当前元素背景色为红色，离开时去掉背景色，实现鼠标移入移出变色特效。谢谢项目八

应用事件开发特效让青春在劳动中闪光让青春在劳动中闪光，高尔基的诠释，也是劳动的真谛。如何把中国梦变成现实？脚踏实地付出艰巨、艰苦的努力，将蓝图变为现实。工匠精神追求卓越，钻研技术，做创新发展的先行者。实干精神弘扬实干精神，实现中国梦。我们当代大学生应怎样努力？弘扬劳动精神脚踏实地，兢兢业业，追求卓越，干一行爱一行，专一行精一行，立足平凡岗位，干出不平凡业绩。工匠精神任何大项目、新发明都需要不同劳动完善，工匠无处不在，只有劳动者发扬工匠精神，企业才能多出效益。诚实劳动人世间美好梦想、发展中难题、生命里辉煌，只有通过诚实劳动才能实现、破解、铸就。学习目标掌握事件及事件处理的概念掌握事件对象的概念及应用掌握事件绑定的方法掌握常用事件（鼠标事件、键盘事件、页面事件和表单事件）的应用培养学生的劳动精神项目描述实现选项卡tab切换效果，鼠标移入到不同的选项卡中国文学、中华诗词和中化文字时，下方会显示不同的内容。项目分析本项目使用设置索引号切换内容、添加tab样式、鼠标事件和display属性实现显示隐藏。任务1初识事件事件监听行内绑定0103给同一个DOM对象的同一个事件添加多个事件处理程序，具有兼容性问题。通过HTML标签的属性设置实现。02在JavaScript代码中，为需要事件处理的DOM元素对象，添加事件与事件处理程序。动态绑定任务2

跟随鼠标移动特效实现在页面上移动鼠标时，小天使图片跟随鼠标移动。事件触发时产生的对象，包含事件相关信息。事件对象鼠标操作导致的事件，如点击、移动、拖放等。鼠标事件0201实时响应事件，鼠标指针位置发生变化时触发。鼠标移动03任务2

跟随鼠标移动特效鼠标事件在JavaScript中，鼠标事件是Web开发中最常用的事件类型，鼠标事件详细说明如下所示：任务3快递单号查询当用户在快递单号文本框中输入内容时，文本框上面自动显示大号字的内容。如果用户输入为空，需要隐藏大号字内容。任务3快递单号查询快递单号输入快递单号隐藏快递单号显示快递单号检测输入快递单号，上面div以大号字体显示快递单号。给表单添加键盘事件，选择使用onkeyup事件。把快递单号里面的值获取过来赋值给上面的div，以文本显示。如果快递单号里面内容为空，则隐藏大号字体的div。键盘事件在JavaScript中，当用户操作键盘时，会触发键盘事件，键盘事件主要包括下面3种类型：keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回false时，会取消默认的动作（如输入的键盘字符）。keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理