JavaScript+jQuery交互式Web前端开发（第2版）课件黑马第15章初识JavaScript对象.pptx

第1章初识JavaScript《JavaScript+jQuery交互式Web前端开发（第2版）》学习目标/Target

了解JavaScript基本概念，能够描述JavaScript的用途、由来、组成和特点

了解浏览器的组成，能够描述浏览器的特点以及作用

掌握下载和安装代码编辑器的方法，能够独立下载和安装代码编辑器学习目标/Target掌握JavaScript常用的输入输出语句，能够灵活运用prompt()、alert()、

document.write()、console.log()语句

掌握JavaScript注释的使用，能够合理运用单行注释、多行注释增强代码的

可读性

掌握JavaScript代码引入方式，能够灵活运用行内式、内部式、外部式的方式

引入JavaScript代码学习目标/Target

了解什么是变量，能够描述变量的概念

掌握变量的命名规则，能够根据变量的命名规则为变量命名

先定一个小目标！1.1.3JavaScript的组成JavaScript是由ECMAScript、DOM、BOM这3部分组成的。JavaScript的组成部分如下图所示。1.1.3JavaScript的组成下面对JavaScript的组成部分进行介绍。ECMAScript：规定了JavaScript的编程语法和基础核心内容，是浏览器厂商共同遵守的一套JavaScript语法工业标准。DOM（DocumentObjectModel）：文档对象模型，是W3C（WorldWideWebConsortium，万维网联盟）组织制定的用于处理HTML文档和XML（eXtensibleMarkupLanguage，可扩展标记语言）文档的编程接口，它提供了对文档的结构化表述，并定义了一种方式使程序可以对该结构进行访问，从而改变文档的结构、样式和行为。BOM（BrowserObjectModel）：浏览器对象模型，是一套编程接口，用于对浏览器进行操作，如刷新页面、弹出警告框、控制页面跳转等。了解JavaScript的特点，能够描述JavaScript的特点1.1.4JavaScript的特点

先定一个小目标！010203123JavaScript是脚本语言中的一种，它的语法规则比较松散，使开发人员能够快速编写程序。使用脚本语言编写的代码可以直接由解释器执行，不需要生成独立的可执行文件。由于脚本语言只在被调用时自动进行解释或编译，所以具有简单易用的特点。简单易用JavaScript不依赖特定的操作系统，仅需要浏览器的支持。无论用户使用的操作系统是Windows、Linux、macOS还是Android、iOS，只要这些操作系统中安装了支持JavaScript的浏览器，就可以运行JavaScript。跨平台面向对象是软件开发中的一种重要的编程思想。JavaScript为面向对象提供了支持，使开发者能够通过面向对象思想进行编程。许多优秀的库和框架的诞生都离不开面向对象思想。面向对象使JavaScript开发变得快捷、高效，还可以降低开发成本。面向对象1.1.4JavaScript的特点JavaScript开发工具1.2了解浏览器，能够描述浏览器的特点以及作用

先定一个小目标！1.2.1浏览器1.2.1浏览器浏览器是用户访问互联网中各种网站所必备的工具，常见的浏览器及其特点如下表所示。浏览器厂商特点Internet

先定一个小目标！1.3.1JavaScript初体验1.3.1JavaScript初体验下面将通过一个案例演示如何在VisualStudioCode代码编辑器中编写一段简单的JavaScript代码。本案例的需求是打开网页时自动弹出一个警告框，警告框中的提示内容为“锲而不舍，金石可镂”。编写完JavaScript代码后，按“Ctrl+S”快捷键保存代码，然后右击VisualStudioCode代码编辑器中的Example1.html文件，选择“OpenwithLiveServer”，就会自动通过浏览器打开Example1.html文件。1.3.1JavaScript初体验掌握JavaScript代码引入方式，能够灵活运用行内式、内部式、外部式的方式引入JavaScript代码1.3.2JavaScript代码引入方式

先定一个小目标！1.3.2JavaScript代码引入方式在网页中编写JavaScript代码时，有3种引入JavaScript代码的方式，分别是行内式、内部式和外部式，下面分别对这3种引入方式进行讲解。行内式是将JavaScript代码作为HTML标签的属性值使用。例如，在打开网页时自动弹出一个警告框，警告框中的提示内容为“通过行内式引入JavaScript代码”，示例代码如下。1.行内式1.3.2JavaScript代码引入方式在上述示例代码中，标签的onload属性表示页面加载事件，用于在网页打开时自动执行JavaScript代码，该属性的值为行内式JavaScript代码。需要说明的是，使用行内式不适合在HTML标签中书写大量的JavaScript代码，这是因为行内式代码与HTML标签混合在一起，不利于代码维护。1.3.2JavaScript代码引入方式内部式将JavaScript代码写在由于通过内部式可以将多行JavaScript代码写在会被当成结束标签，使得页面不会弹出警告框，程序会报错。掌握JavaScript注释的使用，能够合理运用单行注释、多行注释增强代码的可读性

先定一个小目标！1.3.4

JavaScript注释注释用于对代码进行解释和说明，其目的是让代码阅读者能够更加轻松地了解代码的设计逻辑、用途等。在实际开发中，为了提高代码的可读性、方便代码的维护和升级，可以在编写JavaScript代码时添加注释。注释在程序解析时会被JavaScript解释器忽略。1.3.4

JavaScript注释单行注释以“//”开始，到该行结束之前的内容都是注释。下面通过代码演示单行注释的使用。1.单行注释prompt('请输入用户名：');//提示用户输入用户名上述示例代码中，“//”和后面的“提示用户输入用户名”是一条单行注释，运行代码后这部分内容不会在页面中显示。1.3.4

JavaScript注释多行注释以“/*”开始，以“*/”结束。在多行注释中可以嵌套单行注释，但不可以嵌套多行注释。下面通过代码演示多行注释的使用。2.多行注释/*

prompt('请输入用户名：');*/1.3.4

JavaScript注释上述示例代码中，从“/*”开始到“*/”结束的内容就是多行注释。在VisualStudioCode代码编辑器中，可以使用快捷键对当前选中的行添加注释或取消注释，单行注释使用快捷键“Ctrl+/”，多行注释使用快捷键“Shift+Alt+A”。1.3.4

JavaScript注释变量1.4了解什么是变量，能够描述变量的概念1.4.1

什么是变量

先定一个小目标！变量是指程序在内存中申请的一块用来存放数据的空间，用于存储程序运行过程中产生的临时数据。变量由变量名和变量值组成，通过变量名可以访问变量值。1.4.1

什么是变量1.4.1

什么是变量假设把内存想象成一列火车，变量相当于火车的车厢，变量名相当于火车座车厢的座位号，变量值相当于乘客。乘务员通过火车车厢的座位号就可以找到对应的乘客。例如，程序在内存中保存名为seat01、seat02和seat03的3个变量，变量值分别为小明、小智和小华，如下图所示。掌握变量的命名规则，能够根据变量的命名规则为变量命名1.4.2

变量的命名规则

变量的命名规则1.4.2

变量的命名规则JavaScript中变量的命名规则如下。不能以数字开头，且不能包含+、-等运算符，如01user、02-user是非法的变量名。严格区分大小写，如apple和Apple是两个不相同的变量名。不能使用JavaScript中的关键字命名。关键字是指在JavaScript中被事先定义并赋予特殊含义的单词，如if、this就是JavaScript中的关键字。1.4.2

变量的命名规则为了提高代码的可读性，在对变量命名时应遵循以下建议。使用字母、下画线或美元符号（$）命名，如score、set_name、$a、user01。尽量做到“见其名知其义”，如age表示年龄、sex表示性别、num表示数字等。用下画线分隔多个单词，如show_message；或采用驼峰命名法，变量的第1个单词首字母小写，后面的单词首字母大写，如leftHand、myFirstName等。需要说明的是，只要程序不报错，其他字符（如中文字符）也能作为变量名使用，但是不推荐这种命名方式。1.4.2

变量的命名规则JavaScript中常见的关键字多学一招在JavaScript中，关键字分为保留关键字和未来保留关键字。保留关键字是指目前已经生效的关键字。常见的保留关键字如下表所示。1.4.2

//为变量赋值'小智'age=20;

//为变量赋值20sex='男';

//为变量赋值'男'height=180;

//为变量赋值1801.4.3

【案例】使用变量保存商品信息

先定一个小目标！下面将通过一个案例演示如何使用变量保存商品信息。其中，商品名称为衬衫，商品颜色为白色，商品价格为50，商品尺寸为均码。1.4.4

【案例】使用变量保存商品信息掌握使用变量保存用户输入的值的案例，能够编写代码实现案例1.4.5

【案例】使用变量保存用户输入的值

【案例】使用变量保存用户输入的值如果在页面中输入“123456@”并单击“确定”按钮后，页面的显示信息如下图所示。1.4.5

【案例】使用变量保存用户输入的值掌握交换两个变量的值的案例，能够编写代码实现案例1.4.6

【案例】交换两个变量的值

先定一个小目标！学习了JavaScript的变量后，下面通过一个案例来练习变量的使用。本案例将实现交换两个变量的值。首先定义两个变量apple1和apple2，其中，变量apple1的值为红苹果，变量apple2的值为青苹果，然后定义第3个变量temp来保存临时数据，用于实现红苹果和青苹果的交换。1.4.6

【案例】交换两个变量的值在实现红苹果和青苹果交换的过程中，我们可以想象成左手拿着红苹果（apple1），右手拿着青苹果（apple2），前面有一张桌子（temp）。为了将左手的红苹果和右手的青苹果交换，首先需要将左手的红苹果放到桌子上，然后将右手的青苹果给左手，最后右手再从桌子上拿起红苹果，这样就完成了交换。下面编写代码实现红苹果和青苹果的交换。1.4.6

【案例】交换两个变量的值1.4.6

了解数据类型的分类，能够描述JavaScript中的基本数据类型和复杂数据类型

掌握常用的基本数据类型，能够根据实际需求定义基本数据类型的变量

掌握数据类型转换，能够根据实际需求将数据转换为布尔型数据、数字型数据

或字符串型数据

掌握运算符的使用，能够灵活运用运算符完成运算学习目标/Target掌握选择结构语句，能够根据实际需求选择合适的选择结构语句

掌握循环结构语句，能够根据实际需求选择合适的循环结构语句

掌握跳转语句，能够灵活运用continue语句或break语句完成程序中的流程跳转章节概述/SummaryJavaScript作为一门编程语言，在Web前端开发领域中扮演着至关重要的角色。作为一名初学者，掌握JavaScript基础是十分必要的。只有掌握了JavaScript基础，才能更好地理解和编写JavaScript程序，为后续的学习奠定坚实的基础。本章将对JavaScript基础进行讲解，包括数据类型、数据类型转换、运算符和流程控制。目录/Contents2.12.22.3数据类型数据类型转换运算符2.4流程控制数据类型2.1了解数据类型的分类，能够描述JavaScript中的基本数据类型和复杂数据类型2.1.1数据类型分类

先定一个小目标！2.2.1将数据转换为布尔型数据在比较数据或进行条件判断时，经常需要将数据转换为布尔型数据。在JavaScript中，使用Boolean()可以将给定的数据转换为布尔型数据，在转换时，表示空值或否定的值（包括空字符串、数字0、NaN、null和undefined）会被转换为false，其他的值会被转换为true。2.2.1将数据转换为布尔型数据2.2.1将数据转换为布尔型数据将数据转换为布尔型数据的示例代码如下。console.log(Boolean(''));//输出结果为：falseconsole.log(Boolean(0));//输出结果为：falseconsole.log(Boolean(NaN));//输出结果为：falseconsole.log(Boolean(null));//输出结果为：falseconsole.log(Boolean(undefined));//输出结果为：falseconsole.log(Boolean('小智'));//输出结果为：trueconsole.log(Boolean(123456));//输出结果为：true掌握数据类型转换，能够根据实际需求将数据转换为数字型数据

先定一个小目标！2.2.3将数据转换为字符串型数据在JavaScript中可以使用String()或toString()将数据转换为字符串型数据，它们的区别是，String()可以将任意类型的数据转换为字符串型数据；而toString()只能将除null和undefined之外的数据转换为字符串型数据。在使用toString()对数字进行数据类型的转换时，可以通过设置参数将数字转换为指定进制的字符串。2.2.3将数据转换为字符串型数据2.2.3将数据转换为字符串型数据下面通过代码演示将数据转换为字符串型数据。varnum01=23;varnum02=46;console.log(String(num01));//输出结果为：23console.log(num01.toString());//输出结果为：23console.log(num02.toString(2));//输出结果为：101110运算符2.3掌握算术运算符的使用，能够灵活应用算术运算符完成运算

先定一个小目标！2.3.1算术运算符算术运算符用于对两个数字或变量进行算术运算，与数学中的加、减、乘、除运算类似。JavaScript中常用的算术运算符如下表所示。运算符运算示例结果+加3+36-减6-33*乘3*515/除8/24%取模（取余）5%75**幂运算4**216++自增（前置）a=2;b=++a;a=3;b=3;自增（后置）a=2;b=a++;a=3;b=2;--自减（前置）a=2;b=--a;a=1;b=1;自减（后置）a=2;b=a--;a=1;b=2;2.3.1算术运算符自增和自减运算可以快速对变量的值进行递增或递减运算，自增和自减运算符可以放在变量前也可以放在变量后。当自增（或自减）运算符放在变量前时，称为前置自增（或前置自减）；当自增（或自减）运算符放在变量后面时，称为