《Web前端技术（HTML+CSS+JavaScript）》课件-第7章 JavaScript基础语法_第1页
《Web前端技术（HTML+CSS+JavaScript）》课件-第7章 JavaScript基础语法_第2页
《Web前端技术（HTML+CSS+JavaScript）》课件-第7章 JavaScript基础语法_第3页
《Web前端技术（HTML+CSS+JavaScript）》课件-第7章 JavaScript基础语法_第4页
《Web前端技术（HTML+CSS+JavaScript）》课件-第7章 JavaScript基础语法_第5页
已阅读5页，还剩61页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第7章JavaScript基础语法学习目标123了解JavaScript的基本概念熟悉JavaScript的基本使用方法掌握JavaScript变量的定义与应用4掌握JavaScript数据类型与运算符的应用6掌握JavaScript函数的定义与应用5掌握JavaScript控制结构的应用本章架构★★★7.1初探JavaScript7.2编写JavaScript第一个实例7.3明晰JavaScript词法结构★★7.4应用JavaScript运算符7.5应用JavaScript数据类型★7.6使用JavaScript选择结构★7.7使用JavaScript循环结构★7.8使用JavaScript函数★7.9综合案例7.1初探JavaScript7.1初探JavaScriptJavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。1JavaScript概念7.1初探JavaScript2JavaScript基本特点脚本编写语言基于对象的语言简单性安全性动态性跨平台性7.1初探JavaScript1．对软件环境的要求（1）操作系统：Windows95/98/NT/2000/Me/XP等。（2）浏览器：Netscape公司的Navigator2.0以上版本的浏览器；微软公司的InternetExplorer3.0以上版本的浏览器等。（3）编辑器：用于编辑HTML文档的字符编辑器或者HTML文档编辑器。2．对硬件配置的要求（1）电脑内存：至少为32MB。（2）CRT：至少需要256颜色，分辨率在640×480以上。（3）CPU：至少为256MB。3JavaScript开发环境7.1初探JavaScript1.纯文本编辑工具

使用纯文本编辑器来编写脚本，如Windows的Notepad，是脚本编程人员常用的一种方法。2.专业化脚本编辑工具HbuilderXAntechinusJavaScriptEditorNetScapeNavigatorGold4JavaScript编写工具7.2编写JavaScript第一个实例7.2编写JavaScript第一个实例1JavaScript结构<script> JavaScript程序</script>在HTML文件中嵌入JavaScript的方法，可以通过<script>标签的属性来决定。<script>…</script>标签对的位置并不是固定的，可以出现在HTML文档的<head>…</head>或者<body>…</body>标签对之间，也可以出现在文档的多个位置。7.2编写JavaScript第一个实例2<script>标签的属性属性描述src包含JavaScript源代码的文件的URL，文件应以.Js为扩展名language表示在HTML中使用哪种脚本语言7.2编写JavaScript第一个实例3利用<script>标签的language属性使用language属性的方法如下：<scriptLanguage="JavaScript">

代码…</script>其中，把<script>标签的language属性设置为JavaScript，则表示所有支持JavaScript的浏览器都能够代理JavaScript代码。例7-1演示了如何在html网页中的script标签中编写脚本。例7-1chapter07_01.html7.2编写JavaScript第一个实例4利用<script>标签的src属性引入外部js文件使用src属性的方法如下：<scriptLanguage="JavaScript"src="*.js"></script>注意：使用<script>标签引入外部js文件时，不能简化<script>标签写法。例7-2chapter07_02.html7.3明晰JavaScript词法结构7.3明晰JavaScript词法结构标识符是用来识别具体对象的一个名称。最常见的标识符就是变量名，以及后面要提到的函数名。JavaScript是一门区分字母大小写的语言，且和其他任何编程语言一样，Javascript保留了一些标识符为自己所用，保留字不能用做普通的标识符。注意：保留字包括关键字、未来保留字、空字面量和布尔值字面量1标识符7.3明晰JavaScript词法结构JavaScript标识符必须以字母、下划线（_）或美元符（$）开始。后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便JavaScript可以轻易区分开标识符和数字）。例如，下面是合法的标识符：helloworldhello_world_helloworld$helloworld下面是非法的标识符：int//int是JavaScript中的保留字1.5//1.5是由数字开头，并且标识符中不能含有点号(.)helloworld//标识符中不能含有空格2命名规则7.3明晰JavaScript词法结构（1）单行注释单行注释以两个斜杠开头，然后在该行中书写注释文字，注释内容不超过一行。例如：//JavaScript注释语句（2）多行注释多行注释又叫注释块，它表示一段文字都是注释的内容。多行注释以符号“/*”开头，并以“*/”结尾，中间部分为注释的内容，注释内容可以跨越多行，但其中不能有嵌套的注释。示例代码如下：/*这是一个多行注释，这一行是注释的开始函数定义的开始……函数定义的结束*/3JavaScript程序的注释7.3明晰JavaScript词法结构例7-3

chapter07_03.html4标识符、命名规则、注释的应用7.3明晰JavaScript词法结构在程序运行期间，程序可以向系统申请分配若干内存单元，用来存储各种类型的数据。系统分配的内存单元要使用一个标记符来标识，并且其中的数据是可以更改的，所以称之为变量。标记内存单元的标记符就是变量名，内存单元中所装载的数据就是变量值。定义一个变量，系统就会为之分配一块内存，程序可以使用变量名来表示这块内存中的数据。5变量7.3明晰JavaScript词法结构变量名必须以大写字母（A~Z）、小写字母（a~z）或下划线（_）开头，其他的字符可以用字母、下划线或数字（0~9）。变量名中不能有空格、“+”号、“-”号等其他符号。不能使用JavaScript中的保留字作为变量名。这些保留字是在JavaScript内部使用的，不能作为变量的名称。例如，var、int、double、true等都不能作为变量的名称。‰在对变量命名时，最好把变量名的意义与其代表的内容对应起来，以便能方便地区分变量的含义。例如，name这样的变量名就很容易让人明白其代表的内容。‰JavaScript变量名是区分大小写的，因此在使用时必须确保大小写相同。不同大小写的变量，例如name、Name、NAME，将被视为不同的变量。‰JavaScript变量命名约定与Java类似。也就是说，对于变量名为一个单词的，则要求其为小写字母，例如area。对于变量名由两个或两个以上的单词组成的，则要求第二个和第二个以后的单词的首字母为大写，例如userName。5JavaScript中的变量命名要点7.3明晰JavaScript词法结构变量在使用之前必须声明，这不仅是JavaScript的要求，也是一个好的编程习惯。由于JavaScript是弱类型语言，因此它不像大多数高级语言那样强制限定每种变量的类型，也就是说，在创建一个变量时可以不指定该变量将要存放何种类型的信息。实际上，根据需要，还可以给同一个变量赋予一些不同类型的数据。在JavaScript中声明变量的方式有以下两种。格式1：var变量名1[,变量名2,变量名3,…]格式2：var变量名1=值1[,变量名2=值2变量名3=值3,…]6变量声明7.3明晰JavaScript词法结构在JavaScript中声明变量时，还可以在使用格式2声明变量时省略关键字var，即直接在赋值语句中隐式地声明变量。使用赋值语句隐式声明变量的格式为：格式3：变量名=值;7使用赋值语句隐式声明变量7.3明晰JavaScript词法结构不管声明变量时是否赋值，在程序中任何地方需要改变变量的值时都可以使用赋值语句来给变量赋值。赋值语句由变量名、等号以及确定的值组成。赋值语句的格式与上面的格式3相同，即：格式4：变量名=值;8变量赋值7.3明晰JavaScript词法结构JavaScript的常量通常又称为字面常量，它是不能改变的数据，与基本的数据类型相对应。一般有以下几种常量。1．整型常量整型常量可以使用十六进制、八进制和十进制表示。十六进制以0x或者0X开头，如0x8a。八进制必须以0开头，如0168。十进制的第一位不能是0（数字0除外），如235。2．实型常量实型常量是由整数部分加小数部分表示，如11.376和689.78，实型常量也可以使用科学计数法来表示，如8E7，7e6等。3．布尔值布尔常量用于区分一个事务的正反两面，不是真就是假。其值只有true和false两种。9常量7.3明晰JavaScript词法结构4．字符串型常量JavaScript中没有单独的字符常量，而只有由若干字符所组成的字符串型常量。字符串型常量使用单引号（‘’）或双引号（“”）引起来的若干字符，如“ab”、“abook”等。一个字符串中不包含任何字符也是可以的，其形式为“”，表示一个空字符串。5．null常量JavaScript中有一个null常量，表示一个变量所指向的对象为空值。6．undefined常量undefined常量用于表示变量还没有被赋值的状态或对象的某个属性不存在。null表示赋给变量的值为“空”，“空”是一个有特殊意义的值，而undefined则表示还没有对变量赋值，变量的值还处于未知状态。9常量7.3明晰JavaScript词法结构例7-4chapter07_04.html9使用变量案例7.4应用JavaScript运算符7.4应用JavaScript运算符表达式是变量、运算符以及其他表达式的集合，所有表达式都计算成一个值。在实际中有仅具有值的表达式以及把值赋给变量的表达式两种类型的表达式。例如：example="AnExample"是把值赋给变量example的表达式。表达式是利用运算符来连接数据的。运算符是完成操作的一系列符号，用于将一个或几个数据按照某种规则进行运算，并产生一个操作结果。它必须作用在数据上才有效，使用运算符的数据称为操作数。1运算符概念7.4应用JavaScript运算符JavaScript中的运算符主要有算术运算符、字符串运算符、逻辑运算符、比较运算符、条件运算符等。2运算类别7.4应用JavaScript运算符JavaScript中的运算符主要有算术运算符、字符串运算符、逻辑运算符、比较运算符、条件运算符等。根据操作数的个数，可以将JavaScript中的运算符分为以下几种。单目运算符：只作用于一个数据上的运算符。‰双目运算符：作用于两个数据上的运算符。‰三目运算符：作用于3个数据上的运算符。3运算类别7.4应用JavaScript运算符1．加（+）、减（-）、乘（*）、除（/）运算符加（+）、减（-）、乘（*）、除（/）运算符符合日常的数学运算规则，两边的运算数的类型要求是数值型的（“+”也可用于字符串连接操作），如果不是数值型，JavaScript会将它们转换为数值型。2．取模运算符（%）这个运算符也可以称为取余运算符，其两边的运算数的类型必须是数值型的。A%B的结果是数A除以数B后得到的余数。例如，11%2=1。以上的运算符都是双目运算符，使用这些运算符时如果不注意，有可能会出现NaN或其他错误的结果。例如，如果除数为0，就会出现错误。4算术和赋值运算符7.4应用JavaScript运算符3．取反运算符（-）取反运算的作用就是将值的符号变成相反的。即把一个正值转换成相应的负值，反之亦然。例如，x=5，则-x=-5。该运算符是单目运算符，同样也要求操作数都是数值型的，如果不是数值型的，会被转换成数值型。4．增量运算符（++）和减量运算符（--）这两种运算符实际上是代替变量x进行x=x+1和x=x-1操作的简单而有效的方法。表示将变量值加1或减1后再将结果赋给这个变量。有++x和x++两种用法。该运算符置于变量之前和置于变量之后所得到的结果是不同的。4算术和赋值运算符7.4应用JavaScript运算符=：将一个值或者表达式的结果赋给变量，例如，x=3。‰+=：将变量与所赋的值相加后的结果再赋给该变量，例如，x+=3等价于x=x+3。

-=：将变量与所赋的值相减后的结果再赋给该变量，例如，x-=3等价于x=x-3。*=：将变量与所赋的值相乘后的结果再赋给该变量，例如，x*=3等价于x=x*3。

/=：将变量与所赋的值相除后的结果再赋给该变量，例如，x/=3等价于x=x/3。%=：将变量与所赋的值求模后的结果再赋给该变量，例如，x%=3等价于x=x%3。5赋值运算符7.4应用JavaScript运算符字符串运算符只有一个字符串连接运算符（+），它是一个双目运算符。在JavaScript中，可以使用字符串连接运算符将两个字符串连接起来形成一个新的字符串。例如，“This”+“is”的运算结果为“Thisis”，“中国”+“青岛”运算结果为“中国青岛”。另外，字符串连接运算符还可以和前面的赋值运算符联合使用，形成“+=”运算符，它的作用是，将运算符右侧的字符串拼接到该运算符左侧字符串的后面，并将结果赋值给运算符左侧的操作数。6字符串运算符7.4应用JavaScript运算符<：小于。‰<=：小于等于。‰>：大于。‰>=：大于等于。‰==：等于。‰===：严格等于。‰!=：不等于。‰!==：严格不等于。7比较运算符7.4应用JavaScript运算符逻辑与（&&）：当两个操作数的值都为true时，运算结果为true，否则为false。逻辑或（||）：只要两个操作数中有一个值为true时，运算结果就为true。如果两个操作数的值都为假，则运算结果为假。逻辑非（！）：对操作数取反。即true值非运算的结果为false，false值非运算的结果为true。8逻辑运算符7.4应用JavaScript运算符9运算符优先级7.4应用JavaScript运算符10演示了JavaScript运算符的应用例7-5chapter07_05.html7.5应用JavaScript数据类型7.5应用JavaScript数据类型程序设计语言所支持的数据类型是这种语言最为基本的部分。JavaScript能够处理多种类型的数据，这些数据类型可以分为基本数据类型和引用数据类型两类。JavaScript的基本数据类型包括常用的数值型、字符串型和布尔型，以及两个特殊的数据类型：空值和未定义。另外，它还支持复合数据类型数组、函数、对象等。由于JavaScript采用弱类型的形式，因而数据在使用前不必先声明，而是在使用或赋值时才确定其数据类型。7.5应用JavaScript数据类型数值型（number）是最基本的数据类型，可以用于完成数学运算。JavaScript和其他程序设计语言的不同之处在于它并不区别整型数值和浮点型数值。在JavaScript中，所有数字都是由浮点型表示的。目前，JavaScript采用IEEE754标准定义的64位浮点数值格式来表示数据。1数值型7.5应用JavaScript数据类型字符串（string）是由Unicode字符（JavaScript1.3之前的版本只支持ASCII码字符）、数字、标点符号等组成的序列，是JavaScript中用来表示文本的数据类型。JavaScript和C、Java不同，它没有char这样的字符数据类型。要表示单个字符，必须使用长度为1的字符串。2字符串类型7.5应用JavaScript数据类型数值型数据和字符串类型的数据的值都有无穷多，但是布尔型数据的值只有两个，由布尔型直接量true和false来表示，分别代表真和假。它主要用来说明或代表一种状态或标志，通常是在程序中比较所得的结果。3布尔型7.5应用JavaScript数据类型JavaScript中还有一个特殊的空值型数据，用关键字null来表示，它表示“无值”，并不表示“null”这4个字母，也不是0和空字符串，而是JavaScript的一种对象类型。null常被看作对象类型的一个特殊值，即代表“无对象”的值。null是个独一无二的值，有别于其他所有的值。如果一个变量的值为null，那么就表示它的值不是有效的对象、数字、字符串和布尔值。4空值型7.5应用JavaScript数据类型在JavaScript中还有一个特殊的未定义值，用undefined来表示。如下情况时返回undefined值： 使用了一个并未声明的变量时。‰ 使用了已经声明但还没有赋值的变量时。‰ 使用了一个并不存在的对象属性时。5未定义值7.5应用JavaScript数据类型例7-6chapter07_06.html6演示JavaScript数据类型的应用7.6使用JavaScript选择结构7.6使用JavaScript选择结构在任何一种语言中，程序控制是必须的，它能使得整个程序不会发生混乱，使程序顺利按其一定的方式执行。控制结构主要包括：顺序结构、选择结构、循环结构。1控制结构7.6使用JavaScript选择结构选择结构语句需要根据给出的条件进行判断来决定执行对应的代码。通常选择结构为if和switch两种。在JavaScript中，我们可使用以下条件语句：if语句：只有当指定条件为true时，使用该语句来执行代码。if...else语句：当条件为true时执行代码，当条件为false时执行其他代码。if...elseif....else语句：使用该语句来选择多个代码块之一来执行。switch语句：使用该语句来选择多个代码块之一来执行。2选择结构7.6使用JavaScript选择结构例7-7chapter07_07.html3演示JavaScript选择结构的应用7.7使用JavaScript循环结构7.7使用JavaScript循环结构循环结构是程序中一个重要的结构。循环结构的特点就是在给定的条件成立时,反复执行某个程序段。通常称给定条件就是循环条件；反复执行的程序段称为循环体,循环体可以是复合语句,单个语句。在循环体中也可以包含循环语句，从而实现循环的嵌套。循环结构主要包括：for结构、while结构,do..while结构,还可以使用嵌套循环完成复杂的程序控制的操作。7.7使用JavaScript循环结构for结构语句是最常用的循环语句，它比较适合循环次数已知的情况。语法：for(初始化表达式;条件;递增表达式){语句块}其中：初始化表达式：循环开始的初始值。条件：每次循环都执行条件表达式，结果为true才能继续循环。递增表达式：使能够跳出循环。1for结构7.7使用JavaScript循环结构while结构语句比较适合循环次数不确定，但是已知循环控制条件的情况。语法：while(表达式){语句1；语句2；......

语句n；}2while结构7.7使用JavaScript循环结构do…while结构的用法与while结构类似。语法：do{

语句1；

语句2； ....

语句n;}while(循环条件);3do…while结构7.7使用JavaScript循环结构1.breakbreak语句用于跳出循环。在switc

人人文库> 全部分类> 专业文献 > IT计算机

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论