JavaScript前端开发程序设计教程(微课版)(txt+pdf+epub+mobi电子书下载)


发布时间:2020-07-08 01:27:00

点击下载

作者:李玉臣 臧金梅

出版社:人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

JavaScript前端开发程序设计教程(微课版)

JavaScript前端开发程序设计教程(微课版)试读:

内容提要

JavaScript是一门广泛应用于Web前端开发的脚本语言,能为网页添加各式各样的动态效果,为用户提供流畅美观的浏览效果,具有简单、易学的特点。

本书系统地讲解了JavaScript编程的基础知识和实用技术。全书共10章,内容包括初识JavaScript、JavaScript语言基础、流程控制语句、JavaScript函数、对象、BOM和DOM、事件及事件处理、表单和表单对象、Ajax初步、JavaScript特效。为了加深读者对知识的理解,本书在全面、系统地知识讲解的基础上,配备了精彩的同步案例及综合案例,有助于读者对知识和技能的理解。

本书既可以作为普通高等学校、高职高专院校计算机相关专业的教材,也可以作为JavaScript爱好者及相关技术人员自学的参考资料。

前言 Foreword

随着互联网行业的发展,无论是计算机、平板电脑,还是手机用户,用户体验的要求都越来越高,JavaScript作为一种流行的脚本语言,可以实现网页的交互,为用户提供流畅的网页浏览效果,是目前Web前端开发中非常重要的一门语言。如何快速、全面、系统地了解并掌握它,已成为Web开发人员的迫切需求。本书特色1.案例贯穿

案例教学是当前非常有效的教学方法之一。本书将JavaScript脚本知识和案例有机结合,通过先易后难、从基础到高级的方式,循序渐进讲解JavaScript的基础知识和应用技术,并且通过“案例贯穿”的形式展开,在讲解知识点时,共配备了86个“同步案例”,让读者明白所学的知识点能用来解决什么问题。

然后,全书共用10个“综合案例”有效引导读者将本章学过的内容串起来,培养读者分析问题与解决问题的能力,以此真正做到知识点与案例相辅相成,使读者学以致用。2.微课视频

为帮助读者对重点知识的理解和掌握,本书每章重点、难点部分都配备微课视频,读者只需用手机扫描二维码,即可同步观看视频教学。3.巩固训练

本书在每一章的最后都提供了训练习题,方便读者及时巩固和验证自己的学习效果。内容安排

本书在章节安排上充分考虑到实际的教学和学习过程,使其更加符合人的一般认知规律。从JavaScript语言的发展历史及应用范围开始介绍,再通过数据类型和流程控制语句的讲解,让读者掌握JavaScript语言基本编程思路,然后对函数、对象、BOM和 DOM、事件等 JavaScript 的核心知识点进行重点介绍,最后介绍了几种常用的JavaScript的网页特效。全书通过大量有针对性的同步案例及综合案例来帮助读者更方便、更清晰地理解教材内容、知识点和技能点。教学建议

本书作为教材使用时,建议采用理论实践一体化教学模式,课堂教学建议为40~45学时,上机指导建议为40~45学时。各章主要内容和学时建议分配如下,教师可以根据实际教学情况进行调整。学时分配表

由于编者水平有限,书中难免有不足之处,欢迎读者来函给予宝贵意见,我们将不胜感激。编者电子邮箱:wflyc028@163.com。编者2018年6月

第1章 初识JavaScript

学习目标:■了解JavaScript的发展历史及主要特点■了解JavaScript的应用范围■ 掌握JavaScript的语法规范以及在HTML文档中的应用

■什么是JavaScript?JavaScript能做什么?怎么使用JavaScript?可能每个初次接触JavaScript的人都会有这些疑问,我们一一进行解答。

1.1 JavaScript简介

JavaScript(JS)是基于对象和事件驱动的客户端脚本语言,主要是用来进行Web前端开发的,如图1-1所示的可以查看某个日期星期几的日历,图1-2所示的查看某个日期距离2025年1月1日多长时间的倒计牌,图1-3所示的弹球小游戏等,都是典型的使用JavaScript开发的网页特效。图1-1 日历图1-2 倒计牌微课1-1 JavaScript简介

什么是Web前端开发?可以通过常见的项目开发基本框架图来了解,如图1-4所示。图1-3 弹球小游戏图1-4 项目架构示意图

如图1-4所示,项目开发基本框架一般分为三层。第一层是Web前端页面开发,这个页面是用HTML、CSS和JavaScript开发的,其中HTML+CSS实现了前端页面的结构和样式, JavaScript程序代码实现动态交互、网页特效等功能部分,这一层也就是常说的Web前端开发;中间一层是Web后台开发,也叫服务器端的程序开发,主要是进行业务处理;最后一层就是数据库了。在Web前端开发中,把纯粹的HTML+CSS开发的页面称为静态页面,这个页面是死的,没有用户交互功能,也没有什么特效,用户体验度低,要解决这个问题就需要用JavaScript来处理,这也是本书主要学习的内容。1.1.1 JavaScript的发展概况和特点

JavaScript是怎么来的?它的特点是什么?要解决这些问题,要先了解一下JavaScript的发展历史。1.JavaScript的历史(1)JavaScript语言诞生

最早的JavaScript语言思想是从嵌入式语言来的,大概在1992年,有一家叫Nombas的公司开发出了嵌入式脚本语言C--(C-minus-minus,Cmm),后来改名为Script Ease。这种将脚本嵌入到网页中的设计方法也就成为JavaScript诞生的理论基础。在1995年,网景(Netscape)公司的布兰登(Brendan Eich)为解决类似于“向服务器提交数据之前验证”的问题。Netscape Navigator 2.0与Sun公司合作开发的一个脚本语言,最开始的时候叫Live Script。为了营销的便利,借助于当时如日中天的Java,将其更名为JavaScript,JavaScript1.0版本就这样诞生了。(2)JavaScript标准的制定

JavaScript诞生后,成功地进行了推广,刺激了微软,所以微软也决定向浏览器进军,并发布了一个JavaScript克隆版,叫JScript,搭载到IE浏览器。微软进来以后,加上后来CEnvi的Script Ease,就有三种不同的JavaScript版本。所以这个时候就需要一个统一的标准来进行语法和特性的统一,JavaScript标准的制定就提上了日程。

在1997年,JavaScript 1.1作为一个草案提交给欧洲计算机制造商协会(ECMA)。当时第39技术委员会(TC39)承担了制定一个标准化语法和语义的“通用、跨平台、中立于厂商”的脚本语言。TC39集合了来自Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员,其同制定了ECMA-262标准。该标准的出生,诞生了ECMAScript这种全新脚本语言,但是习惯上,大家还是将这种语言叫作JavaScript。(3)JavaScript的应用推广

JavaScript的ECMA标准化推出后,各个公司都参照JavaScript的标准进行了浏览器引擎的修改,以适应ECMA的标准。网景公司虽然是最早推出JavaScript的,但是整整晚了一年才推出“完全遵循ECMA规范”的JavaScript,而微软早在一年前就推出了“完全遵循ECMA规范”的IE4.0,让微软取得了优先,这样就直接导致一个恶果:微软的JScript成为JavaScript语言的事实标准。

后来,国际标准化组织及国际电工委员会(ISO/IEC)也采纳ECMAScript作为标准(ISO/IEC-16262)。各Web浏览器也分别努力将ECMAScript作为JavaScript实现的基础。

由于网景的慢节奏,在JavaScript推广中,促成了微软的JScript成为JavaScript语言的事实标准,加上Windows绑定着IE浏览器,几乎占据全部市场份额。所以,1999年之后,所有的网页都是基于JScript来开发的。而网景在微软强大攻势下,于1998年全面溃败。但微软也没有一支独大,同年成立的Mozilla项目中的Firefox(火狐浏览器)在支持JavaScript方面无可比拟,在后来的时间里一步步蚕食IE的市场,成为全球第二大浏览器。另一个同微软构成竞争的是谷歌(Google Chrome),又称Google浏览器,是一个由Google(谷歌)公司开发的开放原始码网页浏览器。它以简洁的页面、极速的浏览,一举成为全球第三大浏览器。随着移动互联网的普及,嵌有Android系统的平板电脑和智能手机,抢占了大块的市场份额。后来苹果也成为浏览器的竞争者,苹果开发出了Safari浏览器,作为苹果公司各种产品的默认浏览器,在苹果的一体机(i Mac)、笔记本(Mac)、MP4(i Pod)、i Phone(智能手机)、i Pad (平板电脑)都运行着Safari浏览器,随着苹果的产品不断的发展,Safari浏览器也分得了浏览器的大量份额。

从以上JavaScript的分析我们可以得知,JavaScript是一门独立的脚本语言,虽然与Java语言名字相似,但二者没有一点关系,只是借了一下“名字”而已。2.JavaScript的特点(1)解释型语言:JavaScript是一种解释型语言,其源代码不需要编译就可以通过浏览器解释运行。在编写代码时,它可以和HTML代码结合在一起来解释执行。(2)基于对象的语言:JavaScript是一种基于对象的语言,在运行时,可以运用对象的属性和方法来实现各种功能,这个特点使JavaScript变得很强大。它可以使用内置对象,也可以使用自定义对象来实现比较复杂的功能。(3)数据安全性:JavaScript是一种安全的语言,它不允许访问本地的硬盘,也不能将数据存在网络服务器,不允许对网络文档进行修改和删除,只能通过浏览器进行进行信息浏览和动态的交互,防止数据的丢失。(4)跨平台性:JavaScript在运行时,只依赖于浏览器,与操作环境无关,只要有支持JavaScript的浏览器就可以正确地运行,对操作平台无要求。

就因为有了以上四大基本特点,JavaScript在软件开发,特别是Web前端开发受到越来越多的关注,其应用范围也就越来越广。1.1.2 JavaScript的应用

JavaScript语言具体可以应用到以下几个方面。1.验证用户输入的内容

JavaScript语言可以实现在客户端对用户输入的数据进行验证,如在注册时,提示用户名的格式是否符合要求,设置密码时两次设置是否相同等。2.实现页面的特效文字

使用JavaScript语言可以实现页面文字的多种效果,如旋转、翻滚等。3.实现页面的动画效果

在浏览页面时,我们会发现一些类似下雨、下雪的动画效果,这些效果使页面更加生动,这些动画效果也可以通过JavaScript来实现。4.实现窗口浮动的广告

浏览页面时经常发现一些浮动的广告窗口,这些浮动的广告窗口也可以通过JavaScript来实现。除此之外,JavaScript还广泛的应用在其他很多方面,例如JavaScript虽然是客户端脚本语言,但是也可以来开发服务器端的应用,现在比较时兴的HTML5 APP也是HTML5结合了JavaScript来开发的。1.1.3 支持JavaScript的浏览器

众所周知,JavaScript最初开发出来就是为了嵌套在浏览器中使用的,浏览器对JavaScript支持也是JavaScript代码能够正常解析运行的基础,那么,支持JavaScript浏览器有哪些呢?其实现在市场上主流的浏览器都支持JavaScript,如图1-5所示的几款浏览器,都对JavaScript有很好的支持。图1-5 支持JavaScript的浏览器

1.2 编写JavaScript的工具

从原理上来说,我们可以用任何一种文本编辑工具来编写JavaScript程序,如记事本、Notepad++、Edit Plus等,但这一类的编辑工具在写代码时很不方便,因为JavaScript是可以嵌入HTML网页文档中的,所以我们可以用任何一款HTML网页文件的编辑工具来完成JavaScript程序的编写,如Dreamwaver、HBuilder、Web Storm等。运用这些软件工具来编写程序的好处是一是代码自动提示,减少我们编写代码的失误和提高编写代码的速度,二是这些工具都有强大的纠错能力,帮助我们减少错误,三是提供了编写代码的模板,可以帮助我们提高速度和质量。这些软件编辑工具可以从网上很容易找到,安装在计算机上就可以使用它们开始我们的JavaScript征程了。其操作界面如图1-6和图1-7所示。图1-6 JavaScript操作界面(1)图1-7 JavaScript操作界面(2)

1.3 JavaScript在HTML中的应用

通过前面的介绍,我们知道JavaScript主要是用来嵌入HTML中使用的,那么到底怎么使用呢?JavaScript在HTML中的应用是很灵活的,但大致上有下面三种使用方式。1.3.1 直接将JavaScript代码嵌入HTML中

JavaScript代码是可以直接在HTML中编写的,怎么编写的,其实很简单,我们只要提供一对即可,在这对标记中编写的代码浏览器就不会把它认为是HTML代码了,当然,在实际编写时,在这对标记中还有其他一些属性,如表1-1所示。微课1-2 JavaScript在HTML中的应用表1-1 提示

标记的“src”属性来实现,实现步骤如下。(1)建立一个JavaScript文件,JavaScript文件的扩展名是.js,并且在单独建立JavaScript文件时不需要添加标签,直接写文件内容即可,如下代码所示。

alert("Hello,欢迎来到JavaScript世界!");(2)将建立好的以.js为扩展名的文件保存到链接它的HTML文件相同的目录下。(3)在HTML文件中使用

例如,在HTML文件hello.html的同一路径下创建一个JavaScript文件“hello.js”,然后使用

HTML页面代码如下所示。

准备好了,开始抽奖了
开始抽奖

适用浏览器:IE8、360、Fire Fox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

【知识点提炼】

1.JavaScript是一门基于对象和事件驱动的脚本语言,它最初是为了实现在HTML嵌入代码而推出来的,主要是为了解决在客户端对数据进行验证的问题。

2.JavaScript遵循ECMA-262标准,所以JavaScript实际上叫ECMAScript,不过习惯上仍叫JavaScript。

3.JavaScript是解释型语言,可以直接在浏览器上运行,现在流行的浏览器都能够支持JavaScript代码。

4.JavaScript具备跨平台性和数据安全性特点,现在的应用很广泛。

5.JavaScript在HTML中应用有三种方法,第一可以直接嵌入HTML中,第二可以链接外部的JavaScript文件,第三可以直接在HTML标签中使用。

【训练1】

1.自行下载安装Dreamwaver和HBuilder软件,体验JavaScript代码的实现。

2.搜索关于JavaScript的信息,了解其特点、历史、应用等。

第2章 JavaScript语言基础

学习目标:■了解JavaScript的基本数据类型■掌握JavaScript的变量和常量的定义及使用■掌握JavaScript的运算符和表达式,并具备运用表达式解决问题的能力

■ JavaScript脚本语言同其他程序设计语言一样,有自己支持的数据类型和运算符表达式。通过不同的表达式来对数据进行处理。本章将进行详细的介绍。

2.1 数据类型

JavaScript是一种弱类型的语言,即数据(变量或常量)在定义时不必指明数据类型,其数据类型可以通过为数据赋值时根据其值来确定是什么类型。本节将对JavaScript的数据类型进行详细的介绍。JavaScript的数据类型分为三类,有基本数据类型、引用数据类型和特殊数据类型。其中JavaScript的基本数据类型有数值型、字符串型和布尔型;引用数据类型是指支持对象编程的类型,特殊数据类型主要包括NULL(空值)、undefined(未定义)、Na N(非数值)以及转义字符。微课2-1 数据类型2.1.1 基本数据类型1.数值型

JavaScript的数值型包括整型和浮点型。(1)整型

整型也叫整数,是没有小数点的数值,它可以用十进制数、八进制数和十六进制数来表示。

十进制:用0~9的数字来表示,如24、67、-99、-102。

八进制:用0~7的数字来表示,首位必须加0,如023、045。

十六进制:用0~9的数字和A~F(或者a~f)来表示,前两位必须是0X或者0x。如0x245、0x5ad、0XCD、0XEF。(2)浮点型

浮点型数值可以有小数,即浮点型数值包括整数部分和小数部分,中间用小数点分开,即“整数部分.小数部分”。表示浮点型数值时只能采用十进制,其表示的形式有两种,分别是普通形式和指数形式。

普通形式:由整数部分、小数点和小数部分组成。如3.5、23.0、0.6、-6.8。

指数形式:也叫科学计数法,由数字、e和指数组成。如33.45e3(表示3.45×10),注意一点,指数是-324~308之间的整数,如3.45e3214、3.45e3.5都是不合法的。2.字符串型

字符串型数据是用来表示文本数据的,主要是由字母、数字、汉字或者其它特殊字符组成的。在程序中,字符串数据必须用单引号或者双引号括起来,其中单引号和双引号可以相互嵌套,即单引号中的字符串可以有双引号,双引号中的字符串可以有单引号,但单引号和双引号不能交叉使用,如下代码所示。"JavaScript是一门功能强大的编程语言"'JavaScript是一门功能强大的编程语言'"欢迎来到‘JavaScript’的世界"'欢迎来到“JavaScript”的世界'

但是,下面的语句表示也是错误的(单引号和双引号交叉)。'欢迎来到“JavaScript’的世界""欢迎来到‘JavaScript”的世界'

同样,下面的语句表示也是错误的(单引号里面必须是双引号,双引号里面必须是单引号)。"欢迎来到“JavaScript”的世界"'欢迎来到‘JavaScript’的世界'3.布尔型

布尔型也叫逻辑型,布尔型数值只有两个值,即逻辑真和逻辑假。在JavaScript中分别用true和false来表示布尔型的两个值。在程序中也可用非0数值和数值0表示true和false;当把true和false转换为数值时,分别是1和0。

在程序中,布尔值通常用在判断语句中,其表示结果的值是真还是假,如下代码所示。

n==1 判断n是否等于1,如果等于则为true,否则为false。2.1.2 引用数据类型

引用数据类型主要用在面向对象编程中,在后面第5章对象章节中将进行详细的介绍。2.1.3 特殊数据类型1.NULL(空值)

NULL也是JavaScript的一个关键字,表示空值,用于定义空的或者不存在的引用。2.undefined(未定义值)

undefined指的是未定义类型的变量,表示这个变量还没有赋值,如下代码所示。

执行上述代码后,会输出变量类型为undefined的效果,如图2-1所示。图2-1 输出变量类型为undefined提示

NULL① 不等于空字符串(“”)或者0;NULL② 与undefined的区别是NULL表示一个变量赋予了一个空值,而undefined则表示该变量没有被赋值。3.Na N(非数值)

Na N(not a numeber的缩写)是JavaScript特有的一个特殊数字类型,表示“非数值”。主要是指程序运行时由于某种原因发生计算错误,产生一个没有意义的数值,这个数值就是Na N。4.转义字符

转义字符通常也称为控制字符,它是以反斜杠开头不可显示的特殊字符,利用转义字符可以在字符串中添加不可显示的特殊字符或者避免引号匹配问题。例如在页面上输出图2-2所示的效果,可以通过如下代码实现。

实现效果如图2-2所示。图2-2 转义字符实现效果

常用的转义字符如表2-1所示。表2-1 JavaScript的转义字符提示

document.writeln()的作用是将括号内的内容在页面上输出。在使用document.writeln()输出转义字符时,只有放在格式化文本块中才会起作用,所以脚本须放在

的标签内。当然这对pre标签也可以放在

(3)实现效果

实现效果如图2-3所示。图2-3 最大数值和最小数值示例

2.2 变量与常量

2.2.1 标识符

标识符实际上是一个名称,在JavaScript中利用标识符来命名变量或者函数。在JavaScript中命名标识符必须符合其命名规则,即第一个字符必须是字母、下划线或美元符号($),其后的字符可以是字母、数字、下划线或美元符号。如下所示就是合法的标识符。liumy_name_name$strn1提示

①数字不允许作为首字符出现,这样在JavaScript中可以有效的区别标识符和数字;

②标识符不能与关键字同名。2.2.2 关键字

JavaScript关键字是指在JavaScript语言中有特定含义的,作为JavaScript自身所用的字。在程序中定义变量名和函数名时是不能与关键字相同的,JavaScript的关键字如表2-2所示。表2-2 JavaScript的关键字2.2.3 变量的定义和赋值

什么是变量?顾名思义,变量就是其值可以发生变化的量,变量的值可以通过赋值发生变化。从原理上来说,变量就是指程序中一个已经命名的单元,其主要作用就是为数据操作提供一个信息存储容器。微课2-2 变量的定义和赋值1.变量的命名

对变量进行命名,必须遵守变量的命名规则。JavaScript的变量命名如下。

①必须以字母或下划线开头,中间可以是数字、字母或下划线。

②变量名不能包含空格、加号、减号等符号。

③不能使用JavaScript的关键字。

④ JavaScript的变量名是严格区分大小写的。提示

虽然JavaScript的变量可以在遵守命名规则的基础上任意命名,但在编程中,最好还是遵循“见名知义”变量命名规范,这样便于记忆,增加程序的可读性。2.变量的声明与赋值

在使用JavaScript变量前要先对变量进行声明。由于JavaScript是一种弱类型的语言,与其他语言有所不同,所有JavaScript变量都是由关键字var进行声明的。(1)语法格式

var variablename[,variablename1,variablename2,…];(2)语法格式解析

var:声明变量的关键字,所有变量声明都用这个关键字。

variablename:声明的变量名,它遵循变量的命名规则。

一次可以声明一个变量,也可以同时声明多个变量,在一次声明多个变量时,每个变量之间要用逗号隔开。3.变量的赋值

变量的赋值就是给变量赋一个值,JavaScript的赋值符是等号(=)。在给变量赋值时有以下两种方法。

方法1:在声明变量的同时赋值,这也叫变量的初始化,如下代码所示。

var name="张小丽";

方法2:使用赋值语句为变量赋值,如下代码所示。var name;name="张小丽";4.变量的类型

同其他语言不同的是,JavaScript声明变量只有一个关键字,只是声明了变量的名字,不能声明其类型,变量类型是由变量值所属的类型所决定的,比如变量值是数值型,那么其变量类型就是数值型;变量值是字符串型,那变量的类型就是字符串型,如下所示。var x=23; // x的类型为数值型。var x=“我们一起来学习JavaScript!”; //x的类型为字符串型。var x=true; // x的类型为布尔型。提示

如果声明了一个变量但没有对其赋值,则该变量是存在的,但其值为underfined类型。【同步案例2-2】:变量定义和赋值使用示例

案例描述:本案例主要是进行变量声明和变量赋值的测试,要求声明3个变量,并对3个变量分别赋值,然后在页面上输出变量的值。(1)案例分析

①按照案例描述要求,需要声明3个变量,这里以声明name、course和score变量为例,分别代表姓名、科目和成绩。

②分别为3个变量赋值。

③利用document.write()命令在页面上输出变量的值。(2)实现代码 变量声明与赋值测试示例(3)实现效果

实现效果如图2-4所示。图2-4 变量定义和赋值使用示例2.2.4 变量的作用域

变量的作用域就是变量在程序中的作用范围,也就是变量在程序中的有效区域。JavaScript变量的作用域按照其作用的范围可以分为:全局变量和局部变量。变量的作用域主要是针对函数来定义的,全局变量是指定义在函数之外,对整个程序起作用;局部变量指的是定义在函数之内的变量,只对本函数本身起作用。关于函数变量的作用域将在后面函数章节中进行详细讲解。2.2.5 常量

常量就是其值固定不变的量,使用const关键字,一旦定义就不能随意更改它的值。在JavaScript的程序中经常会用到常量。常量在程序设计中也会带来很多方便,例如常量PI,其值定义为3.14159后,后面在涉及圆的一些程序设计中就可以很方便地来使用PI这个常量了。

相对于JavaScript的数据类型,常量也分为相对应的常量类型,如整型常量、浮点型常量、布尔型常量、字符串型常量、空值常量等。【同步案例2-3】:通过常量PI求圆的周长(1)案例分析

①求圆的周长,根据圆的周长公式,需要圆的半径和圆周率。

②圆的半径可以直接赋值,圆周率可以通过JavaScript的内置对象Math的PI属性获得。(2)实现代码(假设圆的半径为2.5cm) 求圆的周长案例示例(3)实现效果

实现效果如图2-5所示。图2-5 通过常量PI求圆的周长示例

2.3 运算符

运算符是指能够完成一系列计算操作的符号(如+、-、*、/等),通常将被计算的数称为操作数,例如“1+2”这个式子中1和2就是操作数,而“+”就是操作符。按照操作数的个数可以将运算符分为单目运算符(只有一个操作数)、双目运算符(有2个操作数)和三目运算符(有3个操作数)。1.单目运算符

单目运算符只有一个操作数,常见的单目运算符例如++、--等,如下所示。x++y-2.双目运算符

双目运算符有两个操作数,这也是最常用的,例如下面的例子都是双目运算符。x+yx-yx>yx==y3.三目运算符

三目运算符有3个操作数,条件运算符“?:”就是典型的三目运算符,如下所示。“?”前面为一条件判断表达式,如果符合条件,即其值为true时,就取冒号前的值,否则就取冒号后面的值。例如上面的代码,如果score的值大于90,则经过计算后其结果为“优秀”。如果score的值小于90,则经过计算后其结果为“普通”。

此外,按照操作数的类型来分,运算符还可以分为算术运算符、关系运算符、赋值运算符、逻辑运算符和条件运算符等。2.3.1 算术运算符

算术运算符主要用于在程序中进行加、减、乘、除等运算,JavaScript中常用的算术运算符如表2-3所示。表2-3 JavaScript的算术运算符【同步案例2-4】:计算账单金额

案例描述:日常中经常遇到算帐的问题。本案例要求通过编程实现统计商品的金额。当商品标价100元,税率为0.05,统计买一件该商品的总金额和税金分别是多少?(1)案例分析

①按照案例要求,要计算商品总金额,可用算术运算符来实现。

②在实现本案例时,需要先声明四个变量分别用来保存总金额、税金、税率、标价的值,再通过算术运算符来进行计算。

③将计算结果在页面上输出。(2)实现代码 商品统计总价示例

(3)实现效果

实现效果如图2-6所示。图2-6 计算账单金额示例2.3.2 关系运算符

关系运算符又叫比较运算符,是对两个操作数进行比较,然后返回一个布尔值。关系运算符如表2-4所示。表2-4 JavaScript的关系运算符【同步案例2-5】:比较两个数的大小

案例描述:在日常生活中,经常遇到两数大小比较的问题。要实现两个数的大小比较,用JavaScript的关系运算符很容易实现。本案例要求运用比较运算符来比较两个数的大小并在页面上输出结果。(1)案例分析

①按照案例要求,对两个数的大小进行比较,可用关系运算符来实现。

②首先要声明一个变量,用来保存要比较的值。然后通过这个变量的值与其他值进行比较。

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载