《商务网站设计与开发》课件第04章 脚本语言JavaScript.pptx

1、 JavaScript简介4.1 JavaScript的基本语法4.2 JavaScript的面向对象特性4.3 JavaScript在浏览器中的应用4.4 JavaScript在HTML5中的应用4.5 常用的JavaScript框架4.6 思考题4.7 JavaScript是由Netscape公司开发一种基于对象、事件驱动并具有相对安全性的客户端脚本语言。JavaScript可以让网页产生动态、交互的效果，从而改善用户体验。JavaScript已成为Web客户端开发的主流脚本语言。JavaScript由JavaScript核心语言、JavaScript客户端扩展和JavaScript服务器

2、端扩展三部分组成。包括JavaScript的基本语法和JavaScript的内置对象，在客户端和服务器端均可运行。核心语言部分支持浏览器的对象模型DOM，可以很方便地控制页面上的对象。客户端扩展部分部分包含了在服务器上运行的对象，这些对象可以和数据库连接，可以在应用程序之间交换信息，也可以对服务器上的文件进行操作。服务器端扩展JavaScript通过元素在HTML文档中嵌入脚本代码，有两种方法嵌入脚本：第一种方法，直接在HTML文档中编写JavaScript代码。document.write(这是JavaScript！采用直接插入的方法！);第二种方法，可以通过文件引用的方式将已经编写好的Ja

3、vaScript文件（通常以.js为扩展名）引入进来。这种方式可以提高代码的重用性和可读性。例如：其中src属性值就是脚本文件的地址。常量和变量l JavaScript程序中的数据根据值的特征分为常量和变量，常量是那些在程序中可预知结果的量，不随程序的运行而变化，而变量则正好相反。常量和变量共同构成了程序操作数据的整体。l JavaScript中的常量更接近“直接量”，它可以是数值、字符串或者布尔值。更一般地说，JavaScript的常量是那些只能出现在赋值表达式右边的那些量。例如：3.1415、“Hello world”、true、null等都是常量。l JavaScript中用标识符来命名

4、一个变量，合法标识符可以由字母、数字、下划线以及$符号组成的，其中首字符不能是数字。在代码var a=5，b=“test”，c=new Object()中，标识符a、b、c都是变量，它们可以出现在赋值表达式的左侧。严格的说，有一个例外，在JavaScript中，undefined符号可以出现在赋值号的左边，但是根据它的标准化含义，还是将它归为常量。常量和变量l JavaScript是一种“弱类型”语言，即JavaScript的变量可以存储任何类型的值。数据类型和变量不是绑定的，变量的类型通常要到运行时才能决定。在JavaScript中既可以在声明变量时初始化，也可以在变量被声明后赋值，例如：v

5、ar num=3或者：var numnum=3l 因为JavaScript变量没有类型规则的约定，所以JavaScript的使用从语法上来讲就比较简单灵活。但同时，也由于没有变量类型的约束，对程序员也提出了更高的要求。数值是最基本的数据类型，它们表示的是普通的数。JavaScript的数值并不区别整型或是浮点型。十六进制整数常量的表示方法是以“0X”或者“0 x”开头。例如：0 xff，0 xCAFE911。JavaScript中浮点型数值可以采用科学计数法表示，例如：3.14，234.3333，6.02e23，1.4738e-23。数据类型（1）数值JavaScript中的字符串数据类型是由

6、Unicode字符组成的序列。与C+或Java不同，JavaScript没有char类型的数据，字符串是表示文本数据的最小单位。JavaScript的字符串常量是用单引号或双引号括起来的字符序列，其中可以含有0个或多个Unicode字符。字符串中可以使用转义符，比如“n”。当用单引号来界定字符串时，字符串中如果有单引号字符，就必须用转义序列（）来进行转义。数据类型（2）字符串布尔型是最简单的一种基本数据类型，它只有两个常量值，即true和false，代表着逻辑上的“真”和“假”。数据类型（3）布尔型数组是元素的集合，数组中的每一个元素都具有唯一下标来标识，可以通过下标来访问这些数值。数组下标是

7、从0开始的连续整数。在JavaScript中，数组的元素可以是任何类型的数据。可以通过数组的构造函数Array()来创建一个数组，数组一旦被创建，就可以给数组的任何元素赋值。数据类型（4）数组对象是JavaScript中的一种引用数据类型，也一种抽象和广义的数据结构。JavaScript对象是一个非常重要的知识，将在后面章节专门讨论。在这里仅先讨论对象的基本形式和基本语法。JavaScript中，对象是通过调用构造函数来创建的。理论上任何JavaScript函数都可以作为构造函数来创建。对象一旦创建，就可以根据自己的意愿设计并使用它们的属性了。数据类型（5）对象表达式和运算符n JavaScr

8、ipt的表达式由变量、常量、布尔量和运算符按一定规则组成的集合，包括：算术表达式、串表达式和逻辑表达式。例如：number+Hello +you are welcome!(a 5)&(b=2)n JavaScript中的运算符有：赋值运算符、算术运算符、逻辑运算符、比较运算符、字符串运算符和位运算符等。算术运算符运算符运算符描述描述例子例子+加x=y+2-减x=y-2*乘x=y*2/除x=y/2%求余数(保留整数)x=y%2+累加x=+y-递减x=-y赋值运算符运算符运算符例子例子等价于等价于=x=y+=x+=yx=x+y-=x-=yx=x-y*=x*=yx=x*y/=x/=yx=x/y%=x

9、%=yx=x%y逻辑运算符与比较运算符运算符运算符描述描述例子例子&逻辑“与”(x1)|逻辑“或”(x=5|y=5)!逻辑“非”!(x=y)逻辑运算符与比较运算符运算符运算符描述描述例子例子&逻辑“与”(x1)|逻辑“或”(x=5|y=5)!逻辑“非”!(x=y)运算符运算符描述描述例子例子=等于x=8!=不等于x!=8大于x8小于x=大于或等于x=8=小于或等于x=8字符串运算符n JavaScript只有一个字符串运算符“+”，使用字符串运算符可以把几个串连接在一起。例如，“hello”+“,world”的返回值就是“hello,world”。位运算符运算符运算符描述描述例子例子&按位与运

10、算A&B|按位或运算A|B按位异或运算AB按位取反A左移运算A右移运算AB条件运算符n 条件运算符是JavaScript中唯一的三目运算符。它的表达式如下：test？语句1:语句2n 其中test、语句1、语句2是它的三个表达式。条件运算符首先计算它的第一个表达式test的值，如果它的值为true，则执行语句1并返回其结果，否则执行语句2并返回其结果。例如下面代码可根据当前的时间返回am或pm的标志：var now=new Date();var mark=(now.getHours()12)？pm:am;逗号运算符n 逗号运算符是一个双目运算符，它的作用是连接左右两个运算数，先计算左边的运算数

11、，再计算右边的运算数，并将右边运算数的计算结果作为表达式的值返回。因此，x=（i=0，j=1，k=2）等价于：i=0；j=1；x=k=2；n 运算符通一般是在只允许出现一个语句的地方使用，在实际应用中，逗号运算符常与for循环语句联合使用。对象运算符n 对象运算符是指作用于实例对象、属性或者数组以及数组元素的运算符。JavaScript中对象运算符包括new运算符、delete运算符、in运算符、.运算符和运算符。循环语句n 循环语句是JavaScript中允许执行重复动作的语句。JavaScript中，循环语句主要有while语句和for语句两种形式。var i=10;while(i-)do

12、cument.write(i);for(var i=0;i 10;i+)document.write(i);条件语句n 条件语句是一种带有判定条件的语句，根据条件的不同，程序选择性地执行某个特定的语句。条件语句和后循环语句都是带有从句的语句，它们是JavaScript中的复合语句。n JavaScript中的条件语句包括if语句和switch语句。if(a!=null&b!=null)a=a+b;b=a-b;function convert(x)switch(typeof x)case number:return x.toString(16);/把整数转换成十六进制的整数 break;case

13、 string:return +x+;/返回引号包围的字符串 break;case boolean:return x.toString().toUpperCase();/转换为大写 break;default:return x.toString();/直接调用x的toString()方法进行转换 document.write(convert(110)+);/转换数值 document.write(convert(ab)+);/转换字符串 document.write(convert(true)+);/转换布尔值函数n 函数是封装在程序中可以多次使用的模块。函数必须先定义，后使用。通过funct

14、ion语句来定义函数有两种方式，分别是命名方式和匿名方式，例如：function f1()alert();/命名方式var f1=function()alert();/匿名方式n 有时候也将命名方式定义函数的方法称为“声明式”函数定义，而把匿名方式定义函数的方法称为引用式函数定义或者函数表达式。function square(x)return x*x;JavaScript是一种基于对象的语言。所谓“基于对象”，通常指该语言不一定支持面向对象的全部特性，比如不支持面向对象中“继承”或“多态”的特点。JavaScript具有封装的特点，并可以使用封装好的对象，调用对象的方法，设置对象的属性。笼统地

15、说：“基于对象”也是一种“面向对象”。对象是对具有相同特性的实体的抽象描述，实例对象是具有这些特征的单个实体。对象包含属性（properties）和方法（methods）两种成分。属性是对象静态特征的描述，是对象的数据，以变量表征；方法是对象动态特征的描述，也可以是对数据的操作，用函数描述。JavaScript中的对象可通过函数由new运算符生成的。生成对象的函数被称为类或者构造函数，生成的对象被称为类的实例对象，简称为对象。var a=new Object();a.x=1,a.y=2;也可以通过对象直接量来构造对象，这种方式使用了对象常量，实际上可以看成是new运算符方法的快捷表示法。例如:

16、var b=x:1,y:2;JavaScript是一种弱类型的语言，一方面体现在JavaScript的变量、参数和返回值可以是任意类型的,另一方面也体现在JavaScrip可以对对象任意添加属性和方法,这样无形中就淡化了“类型”的概念。var a=new Object();var b=new Object();a.x=1,a.y=2;b.x=1,b.y=2,b.z=3;对象和对象的构造 var o=new Date();/o是一个Date对象 Complex=function(r,i)/自定义Complex类型，表示复数 this.re=r;this.im=i;var c=new Comple

17、x(1,2);/c是一个复数对象 document.writeln(o.toLocaleString();document.write();document.write(c.re+,+c.im);对象运算符“.”和“”都是用来存取对象和数组元素的双目运算符。它们的第一个运算数都是对象或者数组。它们的区别是运算符“.”将第二个运算数作为对象的属性来读写，而“”将第二个运算数作为数组的下标来读写。运算符“.”要求第二个运算数只能是合法的标识符，而运算符“”的第二个运算数可以是任何类型的值甚至undefined，但不能是未定义的标识符。var a=new Object();a.x=1;alert(a

18、x);/a.x和a“x”是等价的表示形式var b=1,2,3;alert(b1);/对于数组b，b1通过下标“1”访问数组的第二个元素上述代码执行时，会弹出对话框以显示数组a和b的值。另一种构造对象的方法是先定义类型，再实例化对象。function Point(x,y)this.x=x;this.y=y;var p1=new Point(1,2);var p2=new Point(3,4);上述代码使用function定义了一个构造函数Point，实际上也同时定义了Point类型。p1和p2是同一种类型的对象，它们都是Point类的实例。Math对象是一个静态对象，这意味着不能用它来构造实例

19、。程序可以通过调用Math.sin()这样的静态函数来实现一定的功能。Math对象主要为JavaScript核心提供了对数值进行代数计算的一系列方法（比如三角函数、幂函数等）以及几个重要的数值常量（比如圆周率PI等）。（1）内置对象Math对象Date对象是JavaScript中用来表示日期和时间的数据类型。可以通过几种类型的参数来构造它，最简单的形式是缺省参数：var now=new Date();其次可以是依次表示“年”、“月”、“日”、“时”、“分”、“秒”、“毫秒”的数值，这些数值除了“年”和“月”之外，其他的都可以缺省。例如：var time=new Date(1999,1,2);以

20、这种形式构造日期时应当注意的是，JavaScript中的月份是从0开始计算的，因此上面的例子构造的日期是2月2日，而不是1月2日。（2）内置对象Date对象 第三种构造日期的方式是通过一个表示日期的字符串，例如：var d=new Date(“1999/01/02 12:00:01”);/这一次表示的是1月份 JavaScript为Date对象提供了许多有用的方法，下面通过一个例子给出了构造Date对象和使用Date对象方法的示范。（2）内置对象Date对象 var today=new Date();var year=today.getFullYear();/获取年份 var month=to

21、day.getMonth()+1;/JavaScript中月份是从0开始的 var date=today.getDate();/获取当月的日期 /表示星期的中文 var weeks=星期日,星期一,星期二,星期三,星期四,星期五,星期六;/输出结果 document.write(今天是:);document.write(year);document.write(年);document.write(month);document.write(月);document.write(date);document.write(日);document.write(+weekstoday.getDay();

22、字符串对象是JavaScript基本数据类型中最复杂的一种类型，也是使用频率很高的数据类型。String对象有两种创建方式：一是直接声明方式，二是通过构造函数new String()创建一个新的字符串对象。例如：var s1=abcdef;var s2=new String(Hello,world);String对象的属性不多，常用的是lenth属性，用于标识字符串的长度。String对象的方法比较多，而且功能也比较强大。（3）内置对象String对象JavaScript中的Error对象是用来在异常处理中保存异常信息。Error对象包括Error及其派生类的实例，Error的派生类是Eval

23、Error、RangeError、TypeError和SyntaxError。（4）内置对象Error对象在JavaScript中，正则表达式由RegExp对象表示，它是对字符串执行模式匹配的强大工具。每一条正则表达式模式对应一个RegExp实例。（5）内置对象RegExp对象异常处理机制n 所谓异常（exception）是一个信号，说明当前程序发生了某种意外状况或者错误。抛出（throw）一个异常就是用信号通知运行环境，程序发生了某种意外。捕捉（catch）一个异常，就是处理它，采取必要或适当的动作从异常状态恢复。try Bug /这里将会引发一个SystaxErrorcatch(e)/产生

24、的SystaxError在这里会被接住 alert(e);/异常对象将被按照默认的方式显示出来finally alert(“finally”);/不论如何，程序最终执行finally语句 在开发网站前台程序时，对浏览器对象的调用是必不可少的。window对象是浏览器提供的第一类对象，它的含义是浏览器窗口，每个独立的浏览器窗口或者窗口中的框架都是用一个window对象的实例来表示的。window对象是内建对象中的最顶层对象，它的下层对象有event对象、frame对象、document对象等，其中最主要的是document对象，它指的是HTML页面对象。属性名称属性名称说明说明范例范例name当

25、前窗口的名字window.nameparent当前窗口的父窗口parent.nameself当前打开的窗口self.status=“你好”top窗口集合中的最顶层窗口top.namestatus设置当前打开窗口状态栏的显示数据self.status=“欢迎”defaultStatus当前窗口状态栏的显示数据self.defaultStatus=“欢迎”window对象的主要方法方法名称方法名称说明说明范例范例alert()创建一个带“确定”按钮的对话框window.alert(输入错误！)confirm()创建一个带“确定”和“取消”按钮的对话框window.confirm(是否继续！)clo

26、se()关闭当前打开的浏览器窗口window.close()open()打开一个新的浏览器窗口window.open(URL,新窗口名,新窗口属性设置)prompt()创建一个带“确定”、“取消”按钮及输入字符串字段的对话框window.prompt(请输入姓名)setTimeout()设置一个时间控制器window.setTimeout(“fun()”,3000)clearTimeout 清除原来时间控制器内的时间设置window.clearTimeout()window对象示例 Click Me!var btn=document.getElementById(btn);btn.value=

27、点击我;function link(str)var myStr=prompt(请输入姓名);if(myStr=str)/如果验证姓名输入正确 if(confirm(myStr+你好！你想打开新的窗口?)window.open(http:/);else alert(对不起，用户名信息错误！);return;document对象是浏览器的一个重要对象，它代表着浏览器窗口的文档内容。浏览器装载一个新的页面时，总是初始化一个新的document对象。window对象的document属性总是引用当前已初始化的document元素。document对象的属性可以用来设置Web页面的特性，例如标题、前景色

28、、背景色和超链接颜色等。主要用来设置当前HTML文件的显示效果。document对象的主要属性属性名称属性名称说明说明范例范例alinkColor页面中活动超链接的颜色document.alinkColor=“red”bgColor页面背景颜色document.bgColor=“ff0000”fgColor页面前景颜色document.bgColor=“ff000f”linkColor未访问的超链接的颜色document.linkColor=“red”vlinkColor已访问的超链接的颜色document.vlinkColor=“green”lastModified最后修改页面的时间date

29、=lastModifiedlocation页面的URL地址url_inf=document.locationtitle页面的标题title_inf=document.titledocument对象的主要方法方法名称方法名称说明说明范例范例clear()清楚文档窗口内的数据document.clear()close()关闭文档document.close()open()打开文档document.open()write()向当前文档写入数据document.write(“你好！”)writeln()向当前文档写入数据,并换行document.writeln(“你好！”)事件驱动与界面交互n 在浏览

30、器文档模型中，事件是指因为某种具体的交互行为发生，而导致文档内容需要作某些处理的场合。在这种情况下，通常由被作用的元素发起一个消息，并向上传播，在传播的途径中，将该消息进行处理的行为，被称为事件响应或者事件处理。浏览器事件的种类很多，包括鼠标点击、鼠标移动、键盘输入、失去与获得焦点、装载、选中文本等等。浏览器的DOM提供了基本的事件处理方式，它被广泛应用于Web应用程序的开发中。n HTML标准规定了每个元素支持多种不同的事件类型。n 把一个脚本函数与事件关联起来被称为事件绑定，被绑定的脚本函数成为事件的句柄。HTML元素的事件属性可以将合法的JavaScript代码字符串作为值，这一种绑定被

31、称为“静态绑定”，例如下面代码中onclick的属性值：Click Me!除了静态绑定之外，JavaScript还支持直接对DOM对象的事件属性赋值，对应地，这种绑定称为“动态绑定”，例如：Click Me!btn.onclick=function()alert(hello);Canvas API是基于canvas元素的一套JavaScript函数库，它是提供了基本的绘图功能，支持创建文本、直线、曲线、多边形和椭圆，并可以设置其边框的颜色和填充色。下面的例子用JavaScript和canvas元素创建了一个在商业报表中常见的直方图。在代码的graph函数中，首先获取了这个图形所需要的canva

32、s对象，并设置了画布的宽度和高度等属性。然后通过循环访问data数组获得了相应的数据，并根据数据绘制出柱状图。传统的HTML使用cookie作为本地存储（浏览器端存储）的方式。通过cookie可以保存用户访网站的信息，例如个人资料等。每个cookie的格式都是“键/值对”（或称为“名称/值对”），即：=，名称和值都必须是合法的标示符。从JavaScript的角度看，cookie就是一些字符串，可以通过 document.cookie 来读取或设置这些信息。HTML5的新标准提供了比cookie更好的本地存储解决方案，主要包括四种：localstorage、sessionstorage、webS

33、QL和indexedDB。由于浏览器的兼容性问题，基于HTML5标准的本地存储机制并不是在所有浏览器中都已得到支持，在实际使用时需要对前端环境进行测试。在开发一定规模的基于JavaScript的浏览器端程序时需要重视代码的重用性，一方面需要将在不同HTML文件中多次重用的JavaScript代码保存到独立的文件中，另一方面也可充分利用由其他机构开发出的JavaScript框架（类库）。n jQuery是一个优秀的轻量级JavaScript框架，便于浏览器下载和执行。jQuery框架兼容CSS3和多种浏览器，可以让开发者更方便地处理对象、事件和AJAX等效果。在开发时，通过定义HTML对象的ID

34、值，jQuery能够使程序代码和HTML内容更加方便地分离，适合团队协作开发。n ExtJS是一种用于创建浏览器端用户界面的JavaScript框架。ExtJS库中提供了功能丰富的的界面控件，比如表格控件、树形结构控件等。在ExtJS表格控件中可以完成很多界面效果，包括：对行进行单选或多选、高亮显示选中的行、推拽改变列宽度、按列排序、支持checkbox全选、本地以及远程分页、对单元格进行渲染、添加新行、删除一或多行等。（1）JavaScript语言和C语言的异同有哪些？（2）JavaScript语言的面向对象的特性主要表现在哪些方面？（3）JavaScript语言有哪些内置对象？（4）试举例说明JavaScript语言异常处理机制。（5）编写代码练习：在网页中实现一个浮动的小图片，让其保持45度角的匀速直线运动，当碰到浏览器边框时会被反弹到另一个方向。（