HTML5+CSS3+JavaScript+Bootstrap网站开发技术（第3版）课件 第5章 让网页动起来-使用JavaScript技术_第1页
HTML5+CSS3+JavaScript+Bootstrap网站开发技术（第3版）课件 第5章 让网页动起来-使用JavaScript技术_第2页
HTML5+CSS3+JavaScript+Bootstrap网站开发技术（第3版）课件 第5章 让网页动起来-使用JavaScript技术_第3页
HTML5+CSS3+JavaScript+Bootstrap网站开发技术（第3版）课件 第5章 让网页动起来-使用JavaScript技术_第4页
HTML5+CSS3+JavaScript+Bootstrap网站开发技术（第3版）课件 第5章 让网页动起来-使用JavaScript技术_第5页
已阅读5页，还剩42页未读， 继续免费阅读

付费下载

下载本文档

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

文档简介

第5章让网页动起来—使用JavaScript技术JavaScript概述1JS语言基础2表达式与运算符3JS控制结构与函数4应用案例5小结65.1JavaScript简介JavaScript是一种脚本语言，是介于HTML与高级编程语言(Java、VB和C++等)之间的特殊语言。脚本是一种能完成某些功能的小程序段，由一组可以在Web服务器或客户端浏览器运行的命令组成。脚本语言可嵌入HTML页面，并被浏览器解释执行。使用脚本可以使网页具有动态效果和交互功能。5.1JavaScript简介（1）脚本编写语言（2）基于对象（3）简单性（4）安全性（5）动态性（6）跨平台性5.1.1JavaScript的概念和特点5.1JavaScript简介5.1.2第一个JavaScript程序脚本编写工具Notepad++、UltraEdit、DreamweaverCS6等编辑工具可用来编写脚本WebStormJavaScript程序的编写和运行（1）启动DreamweaverCS5新建HTML文件。（2）在<body>与</body>标记中输入代码。（3）保存为.html或.htm文件。5.1JavaScript简介在Dreamweaver中输入程序代码运行结果5.1JavaScript简介调试JavaScript程序

程序错误分为语法错误和逻辑错误两种。语法错误是指在程序中存在不符合语言规则的语句。例如，错误地使用了JavaScript的关键字错误地定义了变量名称等。5.1JavaScript简介5.1JavaScript简介

DreamweaverCS6的错误智能提示功能5.2JavaScript语言基础5.2.1JavaScript语法格式将JavaScript程序代码直接嵌入到HTML文件中，这是最常见的使用JavaScript方法。<scriptlanguage="javascript"runat="server"><!--statements;//--></script>5.2JavaScript语言基础属性language是script标记的基本属性。一般被指定为JavaScript或VBScript。runat="server"表示该段脚本在服务器端执行，如果省略，则表示该段脚本将发送到客户端运行。。

<!--...//-->是HTML注释语句。可以保证不识别<script>标记的浏览器忽略JavaScript代码。JavaScript语言区分字符大小写。5.2JavaScript语言基础5.2.1JavaScript代码书写位置在<body>和</body>标记之间嵌入JavaScript。在<head>和</head>标记之间嵌入JavaScript。引用外部的JavaScript文件。示例：demo0502.html5.2JavaScript语言基础5.2.3JavaScript语句语句结束标志和Java、C语言类似，JavaScript使用分号";"表示一条语句的结束；而与Java、C语言不同的是，用分号结束一条语句并不是强制性的要求。语句块一组大括号"{}"内的JavaScript语句称为语句块，一个语句块内的语句可以被当作一条语句处理。5.2JavaScript语言基础5.2.4JavaScript注释为了增加程序的可读性，以便于日后修改和维护代码，可以在JavaScript程序中为代码添加注释。JavaScript中注释可分为单行注释和多行注释。单行注释用两个斜杠//来表示多行注释则用“/﹡”开始，以“﹡/”结束。5.2JavaScript语言基础5.2.5数据类型JavaScript中的数据类型分为3类，分别是3种基本数据类型、2种复合数据类型和两种特殊数据类型。1．基本数据类型（1）数值型数值型既可以代表整型也可以代表浮点型，在JavaScript中，数值型包含了整型和浮点型。例如：num1=12.3;num2=0123; //表示八进制数“123”num3=0xEF; //表示十六进制数“EF”num4=3.5e11; //表示的是3.5×10115.2JavaScript语言基础（2）字符型字符型数据是用引号（"）或单引号（'）括起来的零个至多个字符。例如：str1="IlikeJavaScript!" //双引号定界符str2='IlikeJavaScript!' //双单引号定界符str3="Ilike'JavaScript'!"//双引号中包含单引号str4='Ilike"JavaScript"!'//单引号中包含双引号（3）布尔型布尔型用于逻辑运算，通常用来说明一种状态或表示比较的结果。布尔值只有真值true或假值false，在JavaScript中，也可以用非0数值表示true,数值0表示false。5.2JavaScript语言基础2．复合数据类型（1）数组用来保存一组相同或不同数据类型的数据。（2）对象对象是对一个事物的描述。JavaScript中的对象保存的是一组不同类型的数据和函数，对象中的数据被称为属性，函数被称为方法。不同类别的对象具有不同的对象类型。5.2JavaScript语言基础3．特殊数据类型（1）空值关键字null是一个特殊的值，用于定义空的或不存在的引用。如果试图引用一个没有定义的变量，则返回null。需要注意，null不等同于空的字符串""或0。由于JavaScript区分大小写，所以空值null不同于Null或NULL。（2）未定义类型即undefined类型。当一个变量被创建后，未给该变量赋值则该变量的值就是undefined。引用一个不存在数组元素时，会返回undefined；引用一个不存在的对象属性时，也返回undefined。5.2JavaScript语言基础5.2.6变量变量是在程序运行过程中可以改变的量，是程序中被命名的存储单元；主要作用是为数据操作提供存放信息的容器。它的定义包括变量名、变量数据类型和作用域几个部分。1．变量名

变量名是一个合法的标识符，JavaScript对变量名区分大小写。5.2JavaScript语言基础JavaScript变量的命名规则：必须以字母或下划线开头，中间可以是数字、字母或下划线。除下划线作为连字符外，变量名称不能有空格、加号、减号、逗号等符号。JavaScript的变量名是严格区分大小写的。变量名长度原则上没有限制。不能使用JavaScript中的关键字作变量名。5.2JavaScript语言基础2.变量的声明与赋值所有类型的JavaScript变量都由关键字var声明。语法格式如下:varvariableName;varname; //声明变量但没有赋值varname="mike"; //声明变量同时赋值vara,b,c; //用一个var关键字同时声明a、b和c三个变量vari=1;j=2;k=3; //同时声明l、j和k三个变量，并分别进行初始化变量可以不声明直接赋值，也可以使用var关键字多次声明同一个变量。5.2JavaScript语言基础3.变量的作用域变量的作用域是指变量在程序中的有效范围。根据作用域变量可以分为两种:全局变量和局部变量。4.变量的生存期变量的生存期是指变量在计算机中存在的有效时间。从编程的角度来讲，可以简单地理解为变量在程序中的有效范围，变量的生存期有两种:全局变量生存期和局部变量生存期。5.2JavaScript语言基础5.2.7常量在程序运行过程中值保持不变的量称为常量。常量的数据类型除了数值型、字符串型、布尔型和空值外，还包括一些反斜杠(\)开头的不可显示的特殊字符，通常称为转义符（控制符）。转义字符说明转义字符说明\b退格\"双引号\n回车换行\v跳格\tTab符号\r换行\f换页\\反斜杠\'单引号

JavaScript常用转义字符5.3表达式与运算符5.3.1表达式由操作数和运算符按一定的语法形式组成的符号序列。在表达式中，表示各种不同运算的符号称为运算符，参与运算的变量或常量称为操作数。5.3.2运算符1.字符串运算符在JavaScript中，可以使用字符串运算符"+"将两个字符串连接起来，形成一个新的字符串。demo0505.html5.3表达式与运算符2.算术运算符算术运算符用来连接算术表达式，包括加(+)、减(一)、乘(*)、除(/)、取模(%)、自加(++)、自减(--)等运算符，运算结果是数值。demo0506.html5.3表达式与运算符3.逻辑运算符运算符举例功能&&x&&y逻辑与，当

x和

y同时为

true时返回

true，否则返回

false||x||y逻辑或，当

x和

y任意一个为

true时返回

true，当两者同时为

false时返回

false！!x逻辑非，返回与

x(布尔值)相反的布尔值^x^y逻辑异或，当x和y相同时，返回false，否则返回true.逻辑运算符5.3表达式与运算符4.位运算符位运算符分为两种，一种是普通位运算符，另一种是移位运算符。位运算符举例功能&x&y与运算符，当两个数位同时为

1时，返回的数据的当前数位为

1，其他情况都为

0|x|y或运算符，两个数位中只要有一个为

1，则返回

1；当两个数位都为零时才返回零^x^y异或运算符，两个数位中有且只有一个为

0时，返回

0，否则返回

1~~x非运算符，反转操作数的每一位>>

x>>y右移y位<<

x<<y左移y位位运算符5.3表达式与运算符5.关系运算符关系运算是指两个数据之间的比较运算。关系运算符有6个，即>(大于)、<(小于)、>=(大于等于)、<=(小于等于)、==(等于)和!=(不等于)。运算符举例（设x=4,y=10）功能<

x<y小于，x<y的值为true>

x>y大于，x>y的值为false<=x<=y小于等于，x<=y的值为true>=x>=y大于等于，x>=y的值为false==x==y等于。当

x等于

y时返回

true值，否则返回

false值!=x!=y不等于。当

x不等于

y时返回

true值，否则返回

false值常用的关系运算符5.3表达式与运算符6.赋值运算符最基本的赋值运算符是等号（=），用于对变量进行赋值。运算符举例说明=x=10将右边表达式的值赋给左边的变量。+=x+=y将运算符左边的变量加上右边表达式的值赋给左边的变量。相当于x=x+y-=x-=y将运算符左边的变量减去右边表达式的值赋给左边的变量。相当于x=x-y*=x*=y将运算符左边的变量乘以右边表达式的值赋给左边的变量。相当于x=x*y/=x/=y将运算符左边的变量除以右边表达式的值赋给左边的变量。相当于x=x/y%=x%=y将运算符左边的变量用右边表达式的值求模，并将结果赋给左边的变量。x=x%y常用的赋值运算符5.3表达式与运算符7.其他运算符运算符说明?:条件运算符，等价于一个简单的if…else语句。例如，

age>=18?"成年人":"未成年人"[]下标运算符，用于引用数组元素。例如，

mybook[3]()用于调用函数的运算符。例如，mycheck()，逗号运算符，用于分隔不同的值。例如，varbookid，bookname.成员选择运算符，用于引用对象的属性和方法。例如，window.close()delete用于删除一个对象的属性或一个数组元素。例如，deletemybook[2]new用于创建一个用户自定义对象类型或内建对象类型的实例。例如，newObjectthis用于引用当前对象的关键字。例如，this.colortypeof返回操作数当前所容纳的数据的类型。typeof的返回值有6种:number、string、boolean、object、function和undefinedvoid指定要计算一个表达式，但没有返回值其他运算符5.3表达式与运算符8.运算符优先级优先级运算符说明结合性1.、[]、（）字段访问、数组下标访问以及函数调用左结合2++、--、-、!、delete、new、typeof、void、this一元运算符、其他运算符左结合3*、/、%乘法、除法、取模左结合4+、-、+加法、减法、字符串连接左结合5<、<=、>、>=小于、小于等于等左结合6==、!=等于、不等于左结合7&按位与左结合8^按位异或左结合9|按位或左结合10&&逻辑与左结合12||逻辑或左结合13?:条件右结合14=、*=、/=、%=、+=等赋值、运算赋值右结合15，逗号运算符 右结合JavaScript运算符的优先级和结合性5.4JavaScript控制结构与函数5.4.1JavaScirpt控制结构1．顺序结构按照语句的书写顺序从头到尾依次执行是程序执行的最简单流程。2．分支结构主要包括两类语句:一类是条件分支if语句，另一类是多重分支switch语句。5.4JavaScript控制结构与函数(1)简单条件分支if语句if语句是最基本、最常用的分支结构语句通过判断条件表达式的值为true或者false，来确定是否执行某一条语句。if(boolCondition){ statement;}

示例demo0508.html5.4JavaScript控制结构与函数(2)选择分支if-else语句if-else语句也称为选择分支语句，是在if语句的基础之上增加一个else从句。if(boolCondition){ statementl;}else{ statement2;}

示例demo0509.html5.4JavaScript控制结构与函数(3)使用if-else的多重分支语句如果要执行多个语句块中的某一个则应该使用elseif语句通过elseif语句可以对多个条件进行判断并且根据判断的结果执行不同的语句块。if(boolConditionl){ statementl;}elseif(boolCondition2){ statement2;}…else{ statement3;}5.4JavaScript控制结构与函数(4)使用switch的多重语句多路分支语句，其作用与if-elseif-else语句基本相同比if语句更具有可读性和灵活性，而且switch允许在找不到匹配条件的情况下执行默认的一组语句switch(expression){casevalue:statement;break;casevalue:statement;break;…default:defaultstatement;break;}5.4JavaScript控制结构与函数3．循环结构是在一定条件下，反复执行某段程序的流程结构，反复执行的程序块被称为循环体。循环结构是程序中非常重要的和基本的一种结构共有3种：while语句、do-while语句和for语句（1）while语句while语句是基本的循环控制语句。while(boolCondition){statement;}

示例demo0512.html5.4JavaScript控制结构与函数(2)do-while语句do-while语句的使用与while语句很类似，不同的是它不像while语句先计算条件表达式的值，而是无条件地先执行一遍循环体，再来判断条件表达式。若表达式的值为真，则再运行循环体，否则跳出do-while循环，执行循环体外面的语句。它的循环体将至少被执行一次do{ statement;}while(boolCondition);5.4JavaScript控制结构与函数(3)for语旬for语句是JavaScript语言中应用比较广泛的循环控制语句for语句使用一个变量作为计数器来控制循环的次数,这个变量就称为循环变量。for(initialization;expression;post-loop-expression){ statements;}5.4JavaScript控制结构与函数(4)跳转语句跳转语句用来实现程序执行过程中流程的转移。包括continue语句和break语句。break语句的功能是使程序立即跳出循环.并执行该循环之后的代码。continue语句的功能是结束本次循环，即本次循环中continue语句后面的语句不再执行，进入到下次循环的条件判断，条件为真则进入到下次循环。示例5.4JavaScript控制结构与函数5.4.2函数函数是一段能够实现特定运算的代码块，它可以被事件处理或其他语句调用。JavaScript中的函数包括内部函数（内置函数）和外部函数（自定义函数）。1.函数的引入在设计一个复杂的程序时，根据所要完成的功能，将程序中相对独立的部分，每部分编写一个函数。JavaScript函数还主要用来封装那些在程序中可能要多次用到的模块，以提高程序的可重用性。在事件处理中，可将函数作为事件驱动的结果而调用的程序。从而实现将函数与事件驱动相关联。

5.4JavaScript控制结构与函数2.函数的语法格式函数是由关键字function、函数名、参数及置于大括号中需要执行的一个语句块组成。functionfunctionName(parameters){ somestatements;}函数由function定义，functionName是函数名。

parameters是参数表，可以是一个或多个参数。函数通过函数名来调用，当函数有返回值时则必须使用return语句将值返回。函数名对大小写是敏感的。5.4JavaScript控制结构与函数3.函数的调用直接调用函数函数的定义通常放在HTML文件的<head>标记中，而函数的调用语句通常被放在<body>标记中，如果在函数定义之前调用函

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

最新文档

评论

0/150

提交评论