Web应用开发技术教学课件-第12章JavaScript语言基础.ppt

2019年2月5日,第 12 章 javascript语言基础,2019年2月5日,12.1 javascript语言概述,简单地说，javascript是一种可以嵌入html文档的脚本语言 javascript最初是为了在html页面中增加交互功能而设计的。 javascript是一种脚本语言 (脚本语言是一种轻型编程语言)。 javascript脚本通常都直接嵌入在html页面里，也有时是写在单独的文件里。 javascript是一种解释型语言(脚本执行时不需要预编译) 任何人都可以使用javascript，无需许可。,什么是javascript,2019年2月5日,12.1 javascript语言概述,javascript的作用在于： javascript为html设计者提供了一个简单的编程工具。javascript是一种语法非常简单的脚本语言，几乎任何人都可以很容易地在他们的html页面中插入一段段小段代码。 javascript可以对事件进行反应。例如当一个页面完成加载时，或者当用户点击某个html控件时执行。 javascript可以读写html元素。javascript可以读取并改写一个html的内容。 javascript可以被用来验证数据。这样可以避免服务器进行额外的处理运算 javascript 可以用来监测访问者的浏览器，并根据用户浏览器的不同加载专门针对该浏览器设计的特殊页面。,javascript是一种基于对象和事件驱动(event driven)的脚本语言。使用它的目的是与html超文本标记语言、java 脚本语言（java小程序）一起实现在一个web页面中实现与web客户交互作用。它是通过嵌入在标准的html语言中实现的，它的出现弥补了html语言的缺陷。,2019年2月5日,12.1 javascript语言概述,javascript的发展历程 javascript是最具个性的一门语言，这与它的成长环境和发展历程有着密切关系。1995年，netscape公司的brendan eich开发了一个名叫livescript的脚本语言，嵌入到当年准备发布的netscape navigator浏览器中。随后netscape公司与sun公司联手完善了livescript语言设计，更名为javascript，并嵌入到netscape navigator 2.0版本浏览器中，以允许在web页中处理动态内容。随后netscape在netscape navigator 3.0版本中把javascript升级为1.1。 微软公司觉察到javascript脚本语言的威力，于是开发了一个名叫jscript的脚本语言，jscript语言采用了javascript语言类似的设计思想和方法，并嵌入到当时发布的ie 3.0版本浏览器中。于是，市场上就存在2个不同版本的javascript： microsoft的jscript，嵌入到ie浏览器中。 netscape的javascript，嵌入到netscape navigator浏览器中。,javascript的发展历程与特征,2019年2月5日,12.1 javascript语言概述,1997年netscape公司把自己的javascript 1.1版本脚本语言提交到ecma（欧洲计算机制造商协会），希望借助该组织来实现对javascript脚本语言的标准化。ecma组织最终确立了以ecma组织名称为前缀的ecmascript脚本语言，确定了javascript语言的标准。ecmascript标准比较接近netscape公司的javascript，同时吸取了jscript等其他脚本语言的精华。后来，iso（国际标准化组织）和iec（国际电工委员会）也相继接纳了ecmascript脚本语言作为标准（iso/iec-16262），从此javascript就踏入了标准时代。 javascript可以被应用为一种客户端或者服务器端技术。当应用在客户端时，javascript被嵌入到发送给web浏览器的html中，并且直接被浏览器解释。javascript也可以被应用为一种服务器端技术，web服务器在创建动态内容时使用该技术。,2019年2月5日,12.1 javascript语言概述,javascript的特点 脚本编写语言。javascript是一种脚本语言，它的基本结构形式与c、c+、vb、delphi十分类似。不需要先编译，而是在程序运行过程中由浏览器逐行地解释。它与html标识结合在一起，从而方便用户的使用操作。 基于对象的语言。javascript是一种基于对象的语言，同时以可以看作一种面向对象的。它能运用自己已经创建的对象。 简单性。javascript的简单性主要体现在：首先它是一种基于基本语句和控制流之上的简单而紧凑的设计。其次它的变量类型是采用弱类型，并未使用严格的数据类型。 动态性。javascript是动态的，它可以直接对用户或客户输入做出响应，无须经过web服务程序。它对用户的响应是采用以事件驱动的方式进行的。 跨平台性。javascript是依赖于浏览器本身，与操作环境无关，只要能运行支持javascript的浏览器就可正确执行。实际上javascript最杰出之处在于可以用很小的程序做大量的事。,2019年2月5日,javascriptt和java的区别,从名称上看，javascript和java似乎有一定联系，也容易引起一些混乱，以为javascript 是java的一个子集。实际上，javascript 和java完全不相干。 java是一种比javascript复杂的程序设计语言， 而javascript则是相当容易的脚本语言。 javascript与java是两个公司开发的不同的产品。 java是sun公司推出的新一代面向对象的程序设计语言，特别适合于internet应用程序开发； 而javascript是netscape公司的产品，是为了扩展浏览器(netscape navigator)的功能而开发的一种可以嵌入web页面中的基于对象和事件驱动的解释性语言，它的前身是livescript；而java的前身是oak语言。,2019年2月5日,javascriptt和java的区别,下面对两种语言间的异同作如下比较： 基于对象和面向对象 java是一种真正的面向对象的语言，即使是开发简单的程序，也必须设计对象。javascript是一种脚本语言，javascript也可以创建对象和设计功能强大的程序。 解释和编译 java的源代码在传递到客户端执行之前，必须经过编译。javascript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释执行。 强变量和弱变量 两种语言所采取的变量是不一样的。java采用强类型变量检查，即所有变量在编译之前必须作声明。javascript中变量声明采用弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。,2019年2月5日,javascriptt和java的区别,代码格式不一样 java是一种与html无关的格式，必须通过向html中引用外媒体进行装载，其代码以字节代码的形式保存在独立的文件中。javascript代码可以直接嵌入html文档中，并且可动态装载。 嵌入方式不一样 在html文档中，两种语言的标识不同，javascript使用 来标识，而java使用 来标识。 静态联编和动态联编 java采用静态联编，即java的对象引用必须在编译时进行，以使编译器能够实现强类型检查。javascript采用动态联编，即javascript的对象引用在运行时进行检查，如不经编译就无法实现对象引用的检查。,2019年2月5日,第一个javascript程序,下面编写第一个javascript程序。通过它可说明javascript 的脚本是怎样被嵌入到html文档中的。 程序：js01.htm document.write(“欢迎来到javascript世界 ！“); document.write(“); document.write(“这是我的第一个javascript程序“); 用浏览器打开这个js01.htm文件 显示以下输出： 欢迎来到javascript世界 ！ 这是我的第一个javascript程序,编程语言，如 c+、c#和java，每一条语句都需要以分号结束。许多程序员在写javascript的时候仍保持了这一习惯。实际上在javascript中分号并不是必需的。但是如果把多条javascript语句写在同一行中则需要以分号分隔。,2019年2月5日,页面中嵌入javascript,html页面中嵌入javascript的一般格式为： /这里写你的脚本代码 可以将.标识放入 或 .之间。将javascript标识放置.在头部之间，使之在主页和其余部分代码之前装载；也可以将javascript标识放置在.主体之间以实现某些部分动态地创建文档。,使用标记符来将javascript脚本嵌入html页面中，并使用类型属性来定义脚本语言的类型为javascript。因此，和定义了javascript开始和结束的位置。,2019年2月5日,页面中嵌入javascript,起初，并非所有的浏览器都支持javascript，它们会把javascript脚本显示为页面内容。为避免这种情况发生，在javascript刚开始出现的时候，通常使用html的注释标识符将javascript脚本包起来，这对不支持javascript语言的浏览器来说是很有用的。若不支持javascript代码的浏览器，则所有在其中的标识均被忽略；若支持，则执行其结果。例如： 注释结束行前面的双斜线 (/) 是javascript 的注释符。这样写可以防止javascript 编译器把这一行当做javascript脚本进行编译。 现在已经不建议这样使用。因为，几乎所有的浏览器现在都支持javascript；并且，在xhtml中，被html注释包围的javascript代码会真的被当做注释处理，不再起作用,2019年2月5日,页面中嵌入javascript,一些浏览器还支持javascript伪协议，可以在浏览器的地址栏中通过javascript的形式来直接执行javascript代码。这种执行方式为javascript带来了一种便捷的测试方法，能够以类似命令行的方式来测试javascript语句，而不必写一大堆文本和html标签。 例如，在ie浏览器的地址栏中输入： javascript: 12*24; 浏览器中会显示其执行结果： 288 如果你的安装了百度搜霸之类的软件，此功能会失效,2019年2月5日,调用js文件,既可以将javascript脚本直接嵌入在html页面中，也可以将javascript脚本写在单独的文件中，并使用标签的src属性来指定要调用的javascript文件(.js文件)。下面的例子将javascript脚本独立写入一个js02.js文件，然后在js02.htm中调用。 程序：js02.htm 将javascript脚本加入web文档中的例子 ,js02.js document.write(“javascript使web网站演变为web应用！“); document.close ();,2019年2月5日,调用js文件（续）,上面的运行结果与js03.htm是一样的 程序：js03.htm 将javascript脚本加入web文档中的例子 document. write(“javascript使得web网站演变为web应用！“); document. close(); ,特别需要注意的是：javascript的函数名对大小写是敏感的，如果将上面例子程序中的document.write写作document.write，程序将出错，无法显示其内容。,2019年2月5日,javascript内置对象,javascript是内置了很多对象和函数，使用其内建的javascript类来完成 一些特定的运算，例如字符串运算、日期等非常方便、灵活。下面的例子 是用javascript的数组对象来显示中文日期和星期的例子。 程序：js04.htm 显示中文日期和星期 cname = new array(“星期日“,“星期一“,“星期二“,“星期三“,“星期四“,“星期五“,“星期六“); d = new date(); document.write(d.getyear(),“年“); document.write(d.getmonth()+1,“月“); document.write(d.getdate(),“日“); document.write(“ “,cnamed.getday(); ,2019年2月5日,12.2 javascript语法基础,同其它语言一样，javascript脚本语言也有它自身的数据类型、表达式和算术运算符以及程序的基本框架结构。javascript的数据类型有基本数据类型(boolean number string null undefined)、组合数据类型(对象类型(object)和function类型)两种。 基本数据类型 javascript基本数据类型除了数字型、布尔型和字符串型外，还有特殊数据类型null和undefined。 数字型用来表示整数或实数。 字符串型是用“ ”号或 括起来的字符。javascript没有表示单一字符的char类型，只能使用单一字符的字符串，例如“s“、h。 布尔数据类型只有两个值true和false，主要用在条件和循环控制的判断。 null数据类型只有一个null值，如果变量值为null，表示变量没有值。 undifined数据类型指的是一个变量有声明，但是不曾指定变量值 或者一个对象属性根本不存在。,javascript数据类型与变量,2019年2月5日,12.2 javascript语法基础,常量 javascript的常量是不能改变的数据。 整型常量，其整型常量可以使用十六进制、八进制和十进制表示其值。以0开头的数字且每个位数的值为07的整数是八进制；以0x开头，位数值为09和af的数字是十六进制。 实型常量，实型常量是由整数部分加小数部分表示，如12.32、193.98 。可以使用科学或标准方法表示：5e7、4e5等。 布尔值，布尔常量只有两种状态：true或false。 它主要用来说明或代表一种状态或标志。javascript只能用true或false表示其状态，而不能用或表示状态。 字符型常量，使用单引号（）或双引号（“）括起来的一个或几个字符。如 ”javascript脚本语言“、”8755“、”hust1234“ 等。 空值，javascript中有一个空值null，如引用没有定义的变量，则返回一个null值。 特殊字符，同语言一样，javascript中同样有些以反斜杠（）开头的不可显示的特殊字符。通常称为控制字符。如表12.1所示。,2019年2月5日,12.2 javascript语法基础,变量 变量的主要作用是存取数据。对于变量必须明确变量的命名、变量的类型、 变量的声明及其变量的作用域。 变量的命名 javascript中的变量命名同其计算机语言非常相似，这里要注意以下几点： 变量名必须以字母或下画线开头，中间可以出现数字，变量名不能有空格。 变量名称区分大小写。 不能使用javascript中的关键字作为变量。如var、int、double、true不能作为变量的名称。,2019年2月5日,12.2 javascript语法基础,变量的声明 javascript变量可以在使用前先作声明，并给变量赋初值。 javascript的变量统一用命令var作声明和赋值，其格式如下： var 变量名称 =初始值 例如： var computer = 32 / computer是一个变量，且有初值为32。 var cname = “计算机技术” /定义了一个cname变量，同时赋予了一个字符串值。 javascript中的变量是弱类型的，在声明变量时可以不指定其数据类型 在使用时根据给定的值自动确定其类型。,x=100；y=“125“ ；xy= true ；price=11.20等。 其中x整数，y为字符串，xy为布尔型，price为实型。,2019年2月5日,12.2 javascript语法基础,变量的作用域 在javascript中同样有全局变量和局部变量。全局变量是定义在所有函数体之外，其作用范围是当前文件(.js文件)中的所有函数；而局部变量是定义在函数体之内，只对当前函数是可见的，而对其它函数则是不可见的。 变量的类型及其转换 要判断一个变量(基本变量或对象)的类型，可以用下面的语句 typeof(something); 其可能返回的数据为 number，string，boolean，object，function或者undefined,2019年2月5日,12.2 javascript语法基础,数据类型转换 基本数据类型转换的三种方法： 转换为字符型：string(); 例：string(123)的结果为“123“ 转换为数值型：number(); 例：number(“123“)的结果为123 转换为布尔型：boolean(); 例：boolean(“abc“)的结果为true 从一个值中提取另一种类型的值的方法： 提取字符串中的整数：parseint(); 如：parseint(“123abc“)的结果为123 提取字符串中的浮点数：parsefloat(); 如：parsefloat(“0.55abc“)的结果为0.55 调用javascript的eval()函数，计算表达式的值。 如：c=eval(“62+82“)的结果c=144,2019年2月5日,12.2 javascript语法基础,表达式 表达式是变量、常量及运算符的集合。表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。 运算符 运算符是完成操作的一系列符号，正如其他的语言一样，在javascript中有 算术运算符，如、-、*、/等； 比较运算符如!、等； 逻辑布尔运算符如|、&和！； 字符串运算如 、 等。,javascript表达式和运算符,2019年2月5日,12.2 javascript语法基础,根据操作数的个数，运算符可分为单目运算符，双目运算符和三目运算符。 在javascript中，双目运算符由下列方式构成： 操作数 运算符 操作数 如6040、“javascript”+“语言”等。 单目运算符只需一个操作数，其运算符可在前或后 如 x+ javascript也支持三目运算，主要格式如下： 条件？语句：语句 若条件表达式的值为真(true)，则执行语句1，其结果作为整个表述式的结果；否则执行语句2，其结果作为整个表述式的结果。例如： var now = new date(); var greeting = (now.gethours () = 12)?:“ 上午好！“: “下午好.“); ?运算符是if.else语句的简洁方式,2019年2月5日,12.3 javascript程序结构,与其他语言一样，javascript脚本语言的基本结构是由控制语句、函数、对象、方法、属性等来实现的。 下面简要介绍javascript程序的基本结构和函数的定义方式。关于对象属性与方法将在下一章中专门讨论。,程序控制流程,在任何语言中，程序控制流程是必需的，它能使得整个程序减少混乱，使之按其一定的方式执行。下面是javascript常用的程序控制流程结构及语句。 条件和分支语句：if else， switch 循环语句：for、for.in、while、break、continue,关于程序的流程控制语句，在前面的c#语言中，已经介绍很多，这里不再做详细介绍。下面重点介绍一下 forin 结构和递归运算,2019年2月5日,12.3 javascript程序结构,forin 循环控制语句 for.in语句与for语句类似，只是其循环的范围是一个对象所有的属性或是一个数组的所有元素。for.in语句的语法如下： for (变量 in 对象或数组) 执行语句. 其中，变量是对象的属性或数组的名称 在处理对象和数据时， forin 语句要比for循环方便简洁,2019年2月5日,12.3 javascript程序结构,程序12.8是for in循环的一个应用实例。该例子先定义了一个数据用于存放星期，然后通过一个forin循环依次取出数组的值，并显示在页面上。 程序12.8：js08.htm var cname = new array(“星期日“,“星期一“,“星期二“,“星期三“,“星期四“,“星期五“,“星期六“); for (x in cname) document.write(cnamex + “) ,请同学用for 循环实现程序12.8的功能,2019年2月5日,12.3 javascript程序结构,javascript中的递归运算 javascript也支持递归运算，下面是用递归生成一个斐波那契数列的例子。 程序12.10：js10.htm function fibonacci(n) return n ,如果递归调用的层次过多，每一次的递归调用都会占用更多的内存，从而减慢浏览器的运行，甚至导致浏览器处于停止响应的状态。避免使用递归的方案之一就是使用memoization技术，memoization是一种将函数返回值缓存起来的方法，可以获取上一次调用的执行结果。关于memoization技术可以查阅相关的资料。,2019年2月5日,12.3 javascript程序结构函数与事件,函数是具有独立功能的应用单元，也是进行模块化程序设计的基础。从某种意义上说，应用程序就是函数的集合，任何语言都离不开函数的定义与使用，javascript语言也不例外。 javascript函数是封装在程序中可以反复使用的程序模块。在进行复杂的程序设计时，通常是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数，从而使各部分充分独立、程序清晰、易于维护。 将html中的脚本编写为函数，就可以避免页面载入时执行该脚本，只在函数被调用时才会执行。可以在页面中的任何位置调用脚本，但函数的定义应该放在页面起始位置，即标签中。,2019年2月5日,12.3 javascript程序结构函数与事件,html中是通过事件激活来调用函数，下面来看一个简单的例子。 程序：js11.htm function display () alert(“hello world!“) ,假如上面的例子中的 alert(“hello world!”) 没有被写入函数，那么当页面被载入时它就会执行。 现在，当用户击中按钮时，脚本才会执行。 我们给按钮添加了onclick 事件，这样按钮被点击时函数才会执行。,2019年2月5日,12.3 javascript程序结构函数与事件,javascript函数定义如下： fnction 函数名（参数列表） 函数体 return 表达式; /return 语句指明将返回的值 函数由关键字function定义， 花括号规定了函数定义的开始和结束。 无参数的函数也必须在其函数名后加括号。即： function 函数名() 函数体 return 表达式; ,javascript函数定义,需要注意的是：javascript函数名对大小写是敏感的。“function“ 这个词必须是小写的，否则javascript就会出错。另外，必须使用大小写完全相同的函数名来调用函数。,下面的例子定义了一个最简单的函数 function times(x,y) t=x*y; return t; var time = times(2,3)，其返回值是 6,2019年2月5日,12.3 javascript程序结构函数与事件,在函数的定义中，我们看到函数名后有参数列表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在javascript中可通过arguments .length来检查参数的个数。例如： 程序12.12：js12.htm function write(x, y, m, n) for (i=0; i=arguments.length; i+) document.write(argumentsi + “); ,函数中的形式参数,在程序12.12中，在函数write()中定义了4个参数x、 y、m、n，然后通过arguments.length属性来获得参数的个数，再用argumentsi属性来获取每个参数的值。当用户单击“显示”按钮时，在页面上显示参数的值。,2019年2月5日,12.3 javascript程序结构函数与事件,javascript函数可作为事件驱动的结果来调用，从而实现把函数与事件关联。 javascript事件是交互性页面的基础。通常鼠标或热键的动作称为事件；由事件引发的程序的操作称为事件驱动；对事件进行处理的程序称为事件处理程序。在javascript中对事件的处理通常由函数担任，即当事件发生时函数才会执行。所有的函数都可作为事件处理程序。格式如下： function 事件处理名（参数表） 事件处理语句； 事件与其处理函数的关联语句是： ,javascript的事件,事件名称,事件处理程序,事件发生的对象,2019年2月5日,12.3 javascript程序结构函数与事件,程序：js13.htm function doclick() alert(调用doclick函数); ,在onclick=后，可以使用自己编写的函数作为事件处理程序，也可以使用javascript的内置函数，还可以直接使用javascript的代码等。例如： ,2019年2月5日,12.3 javascript程序结构函数与事件,上面例子虽然很简单，但它演示了一个典型javascript事件处理过程。javascript的所有事件处理与此类似，只是其对象的事件和触发的条件不同。可见，javascript的事件处理与函数调用其实很简单。 javascript中最常用的事情主要有：onclick、onchange、onselect、onfocus、onblur onload和onunload等事件。下面简要说明这些事件所使用的对象及触发的条件。 单击事件onclick 当用户单击鼠标按钮时产生onclick事件。同时onclick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生： button（按钮对象） checkbox（复选框）或（检查列表框） radio （单选钮） reset buttons（重置按钮） submit buttons（提交按钮）,2019年2月5日,12.3 javascript程序结构函数与事件,onchange改变事件 当利用text或texturea元素输入字符使其值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。例： 选中事件onselect 当text或textarea对象中的文字被选中后引发该事件。 获得焦点事件onfocus 当用户单击text或textarea以及select对象时产生该事件。 失去焦点onblur 当text对象或textarea对象以及select对象不再拥有焦点时引发该文件，他与onfocas事件是一个对应的关系。 javascript的事件很多，常用的javascript事件如表12.2所示。,2019年2月5日,12.3 javascript程序结构函数与事件,js14.htm是一个页面装载和关闭时自动调用函数的例子 程序：js14.htm function loadform() alert(“这是一个自动装载例子!“); function unloadform() alert(“这是一个卸载例子!“); 调用 ,2019年2月5日,12.3 javascript程序结构函数与事件,javascript常用事件,2019年2月5日,12.4 javascript中的json,近年来，json是web应用领域最热门的技术和话题之一，大有取代xml的架势。 那么什么是json呢？它有什么作用和优势呢？ 本节将回答这些问题，并简要介绍json的对象描述方法和json的解析方法。主要内容如下： json及其描述方法 json与xml的比较 json对象与字符方式转变,2019年2月5日,12.4 .1 json及其描述方法,json(javascript object notationjavascript对象表示法) 是一种优美的javascript对象创建方法，也是一种轻量级的数据交换格式。json非常易于阅读与编写，同时利于机器解析与生成。 json采用完全独立于语言的文本格式。它是由javascript发展而来的一种简单数据交换协议，它的数据格式就是一个合法的javascript对象,这意味着在javascript中处理json数据不需要任何特殊的api或工具包。 21世纪初，douglas crockford（javascript社区知名权威，yahoo的javascript架构师，json之父）希望寻找一种简便的数据交换格式，以便于在服务器之间交换数据。当时通用的数据交换语言是xml，但是douglas crockford觉得xml的生成和解析都太麻烦，所以他提出了一种简化格式，也就是json。,2019年2月5日,12.4 .1 json及其描述方法,json为创建对象提供了非常简单的方法。例如： 创建一个没有任何属性的对象： var myobject = ; 创建一个对象并设置属性及初始值: var student = name: “sunny”, age: 18, married: false; 创建一个对象并设置属性和方法： var student=name:“sunny”,show:function()alter(“hello:”+); 创建一个稍微复杂的对象，嵌套其他对象和对象数组等： var company = name: “microsoft”, product: “softwares”, chairman:name: “bill gates”, age: 53, employees:name: “angel”, age: 26,name: “hanson”, age: 32, readme:function()document.write(+“product“+duct); ;,2019年2月5日,12.4 .1 json及其描述方法,从上面的代码可以看出，json的描述形式就是用大括号“”括起来的项目列表，每一个项目间用逗号“，”分隔，项目的属性名和属性值用冒号“：”分隔。这是典型的字典表示形式，也再次表明了javascript中的对象就是字典结构。 不管多么复杂的对象，都可以用json形式的代码来创建并赋值。 json中对象（数据）描述的基本规则是： （1）并列的数据之间用逗号“，”分隔。 （2）映射用冒号 “：”表示。 （3）并列数据的集合（数组）用方括号“ ”表示。 （4）映射的集合（对象）用花括号“ ”表示。,2019年2月5日,12.4 .1 json及其描述方法,比如，有两个学生的信息如下：“学生夏雨，男，22岁，计算机专业；学生冬雪，女，20岁，信息管理专业”。用json格式可表示为： “姓名“ : “夏雨“, “性别“ : ”男”, ”年龄” : 22, ”专业“ : ”计算机”, “姓名“ : “冬雪“, “性别“ : ”女”, ”年龄” : 20, ”专业“ : ”信息管理” ,如果事先知道数据的结构，上面的写法还可以简化为： “夏雨“, ”男”, 22, ”计算机”, “冬雪“, ”女”, 20, ”信息管理” ,2019年2月5日,12.4 .1 json及其描述方法,在json中，有两种结构：对象和数组 对象是一个无序的“名称/值”对集合。一个对象以花括号“ ”表示开始和结束。名称与值之间用冒号“:”分隔，名称/值对之间使用逗号“,”分隔。例如： var city = “名称” : ”武汉”, “面积” : 8460, “人口” : 800 又如： var circle = “x”:16, “y”:8, “r”:25 ; 对象circle定义了一个圆点x坐标为16、y坐标为8、半径为25的圆。 数组是值的有序列表。一个数组以方括号 “ ”表示开始和结束，值之间用逗号“,”分隔。值可以是双引号括起来的字符串、数值或数组。例如： var tennis = “费德勒”, “罗迪克”, “达维登科”, “萨芬”, “加斯奎特”,2019年2月5日,12.4 .1 json及其描述方法,下面我们用一个实例来说明javascript中json的描述和实现。这里假设我们需要创建一个student对象，并具有以下属性： 姓名（name） 性别（sex） 年龄（age） 电子邮件（email） 我们可以使用以下json形式来表示student对象： var student = “name“:“sunny“,“sex“:“男“, “age“:24,“ email“ :“s“ 上面就是一个典型的json表示的javascript对象，对象的名称为student，每个名称与值使用冒号:分割，例如名称name对应值sunny，名称age对应值24。注意：对象中的“名称” 和字符串的“值”必须用引号(“”)括起来。,2019年2月5日,12.4 .1 json及其描述方法,如果把这一字符串赋予一个javascript变量，那么就可以直接使用对象的任一属性了来访问这个变量(对象)。代码如下： 程序：js15.htm var student=“name“:“sunny“,“sex“:“男“, “age“:24, “email“:“s“ document.write(student.name + “); document.write(student.sex + “); document.write(student.age + “); document.write(student.email + “); ,运行该程序显示如下： sunny 男 24 s,2019年2月5日,12.4 .1 json及其描述方法,在实际使用中，我们遇到的情况要比这复杂。比如，某学生的电子邮件地址可能不止一个，那么这种情况如何表示呢？json已经为我们考虑了这些，利用对象或数组的嵌套结构可以方便地解决这个问题。上面的例子可以修改为： 程序：js16.htm var student=“name“:“sunny“,“sex“:“男“,“age“:24,“email“: “hotmail“:“s“,“yahoo“:“s“ document.write(student.name + “); document.write(student.sex + “); document.write(student.age + “); document.write(student.email.hotmail +“; “+ student.email.yahoo); 该例子程序的显示结构如下： sunny 男 24 s; s,2019年2月5日,12.4 .1 json及其描述方法,下面代码演示了使用json形式定义这个学生列表： var student = “name“:“夏雨“,“sex“:“男“,“age“:24,“email“: “hotmail“:“s“,“yahoo“:“s“, “name“:“冬雪“,“sex“:“女“,“age“:20,“email“: “hotmail“:“a“,“yahoo“:“a“ 上面的例子中的student对象中还包含了2个子对象，每个子对象表示一个学生，可见json表示法是可以嵌套的。,2019年2月5日,12.4 .1 json及其描述方法,由于数组中包含多个学生对象，因此在获取学生信息时需要用一个循环来依次读取数组中的各个对象。程序代码如下： 程序：js17.htm var student= “name“:“夏雨“,“sex“:“男“,“age“:24,“email“: “hotmail“:“s“,“yahoo“:“s“, “name“:“冬雪“,“sex“:“女“,“age“:20,“email“: “hotmail“:“a“,“yahoo“:“a“ ; for (i in student) document.write(studenti.name + “); document.write(studenti.sex + “); document.write(studenti.age + “); document.write(studenti.email.hotmail+“;“+student1.email.yahoo); document.write(“); ,运行上面的程序显示如下： 夏雨 男 24 s; a 冬雪 女 20 a; a,2019年2月5日,12.4 .2 json与xml的比较,json和xml都使用结构化方法描述数据。我们对json与xml进行简单比较。 xml用于数据传输与交换格式的优点是：格式统一，符合标准，容易与其他系统进行远程交互，数据共享方便。但xml格式的不足之处在于： xml文件格式文件庞大，格式复杂，传输占用带宽。 服务器端和客户端需要花费复杂的代码和专用接口来解析，不易维护。 不同浏览器之间解析xml的方式不一致，需要重复编写很多代码。 json的优势主要表现在： 数据格式简单，易于读写，数据代码量小，易于传输且占用网络资源少。 易于解析，客户端可以用javascript简单的进行json数据的读取。 支持多种语言,