JavaScript教程-Kev.ppt

《JavaScript教程-Kev.ppt》由会员分享，可在线阅读，更多相关《JavaScript教程-Kev.ppt（50页珍藏版）》请在三一办公上搜索。

1、JavaScript,讲师：Kevin,目 录,JavaScript简介JavaScript语法JavaScript面向个对象编程Dom基础JavaScript与Dom结合JSON简介,JavaScript简介,JavaScript是Netscape公司与Sun公司合作开发的。在JavaScript出现之前，Web浏览器不过是一种能够显示超文本文档的软件的基本部分。而在JavaScript之后，网页的内容不再局限于枯燥的文本，可交互性得到了显著的改善JavaScript是一种脚本语言，一种解释性的，基于对象的脚本语言。JavaScript脚本通常只能通过Web浏览器进行解释和执行而不是像普通意

2、义上的程序那样可以独立运行在HTML基础上，使用JavaScript 可以开发交互式Web网页。JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容注意，JavaScript与Java没有任何联系,JavaScript语法 语句,JavaScript脚本的基本组成单位。只需要简单地把各条语句放在不同的行上就可以分割开来，不需要加分号“；”结束:first statementsecond statement但在每条语句的末尾添加“；”是一种良好的编程习惯：first statement;second statement;,

3、JavaScript语法注释,单行注释（双斜杠）：/line1多行注释：/*line1 line2*/HTML风格注释（不推荐使用）：”来结束,JavaScript语法变量,JavaScript不要求在声明变量时必须明确指出其数据类型（所以称JavaScript为弱类型语言），可以使用统一的关键字var进行声明：var age=33;mood=“happy”;但是提前对变量做出声明是一种良好的编程习惯变量名允许包含字母、数字、美元符号($)和下划线字符，但不允许包括空格或标点符号,JavaScript语法数据类型,JavaScript变量的类型是由变量的值决定的，可以对同一个变量赋予不同数据类

4、型的值：var age=“thirty three”;age=33;JavaScript中重要的数据类型：未定义（undefined），变量未定义空（null），变量未初始化字符串（string），可以放在单引号或双引号中数值（number），可以表示整数、浮点数布尔型（boolean），true或false对象（object）,JavaScript语法数组,数组用来存储一组值，使用关键字Array来声明，声明时可以指明数组的长度：var colors=new Array();var colors=new Array(3);其中new关键字可以省略，类似其它语言，数组的下标从0开始，赋值方法也

5、和其它语言类似：colors0=“red”;colors1=“black”;colors2=“white”;还可以使用方括号创建数组时同时初始化：var colors=“red”,“black”,“white”;,JavaScript语法数组（cont.）,使用方括号创建数组对象的简单方法：var colors=;/声明空数组对象colors0=“red”;colors1=“black”;通过数组的length属性可以得到数组中元素的个数。数组的长度可以动态扩展：colors3=“blue”;colors8=“grey”;关联数组：在填充数组时为每个新元素明确地给出下标：colors“r”=“

6、red”;colors“b”=“black”;,JavaScript语法,JavaScript中的算术运算符（+、-、*、/、+、-等）、比较运算符（、=）、条件语句（if、while、for等）,JavaScript语法函数,使用函数可以避免重复输入大量相同的内容。JavaScript中使用function关键字定义函数：function funcname(arg1,arg2,)statements;声明一个简单的函数：function multiply(num1,num2)var total=num1*num2;return total;声明后可以直接调用此函数获取结果：var resul

7、t=multiply(5,9);注意，JavaScript中的函数不需声明返回类型，参数也不需要声明类型,JavaScript语法对象,JavaScript对象是由一组相关的属性和方法构成的数据实体。属性和方法都要使用“.”来访问：object.propertyobject.method()使用函数来定义“类”：function Person()this.age=12;this.name=“no name”;this.sayHello=function()alert(“Hello”+this.name);/其中this关键字不能省略！使用new关键字来创建对象实例：var vincent=ne

8、w Person();,DOM基础,DOM简介,DOM是”Document Object Model”（文档对象模型）的首字母缩写。当创建了一个网页并把它加载到Web浏览器中时，就会在幕后创建一个文档对象模型DOM表示被加载到浏览器窗口里的当前页面：浏览器向我们提供了当前页面的模型，而我们可以通过JavaScript访问这个模型DOM把一份文档表示为一棵树,DOM树结构,如下的HTML页面：,DOM树结构（cont.）,浏览器加载该页面并将之转换为树形结构：,DOM树结构（cont.）,DOM树中的一切是以最外层的HTML包含元素，即html元素开始的。使用树的比喻，这叫做根元素（root e

9、lement）从根流出的线表示不同标记部分之间的关系。head和body元素是html根元素的孩子（child）；title是head的孩子，而文本“Trees,trees,everywhere”是title的孩子；相对的，head是title的父亲（parent），title是文本“Trees,trees,everywhere”的父亲。处在同一层次的且互不包含的两个分支（如head和body）之间称为兄弟（sibling）关系。整个树就这样组织下去，直到浏览器获得与上图类似的结构通常把这样的树结构成为一棵节点树,节点（node）,DOM文档是由节点构成的集合，此时的节点是文档树上的树枝或者树

10、叶DOM中节点的类型：元素节点（element node），诸如、等。元素节点可以包含其它的元素，唯一没有被包含在其它元素里的元素是，它是根元素属性节点（attribute node），元素或多或少地有一些属性，属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里，所以属性节点总是被包含在元素节点中文本节点（text node），元素中包含着文本节点“Trees,trees,everywhere”,基本DOM方法,getElementById(id)返回一个给定id属性的元素节点相对应的对象。这个方法是与document对象相关联的函数。其中document对象代表着整个HTML文档

11、并可以用来访问所有页面中的元素getElementsByTagName(tagname)返回一个对象数组，它们分别对应着文档里的一个特定的元素节点getAttribute()返回对象的属性值setAttribute()修改对象的属性值,重要DOM属性,childNodes可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个数组，包含了给定元素节点的全体子元素nodeName返回元素节点的名称。注意，返回的结果全部是大写nodeType用来区分节点的类型，元素节点的nodeType属性值是1，属性节点的nodeType属性值是2，文本节点的nodeType属性值是3nodeValue

12、可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空,重要DOM属性（cont.）,firstChild和lastChild第一个和最后一个孩子节点。node.firstChild等价于node.childNodes0，node.lastChild等价于node.childNodesnode.childNodes.length 1parentNode返回元素的父节点nextSibling返回下一个兄弟节点,改变网页结构的DOM方法,createElement(tagname)创建新的元素节点，此方法与document对象相关联。新建的元素节点并未与节点树相连appendChild(n

13、ode)把新建的节点插入到节点树的某个节点下，成为这个节点的子节点createTextNode(text)创建文本节点insertBefore(newNode,targetNode)把一个新元素插入到一个现有元素的前面replaceChild(newChild,oldChild)替换一个孩子节点removeChild(node)删除一个孩子节点,基于DOM的Web应用程序示例,基于DOM的Web应用程序示例,首先建立一个非常简单的应用程序，然后再添加一点DOM魔法。注意，DOM可以移动网页中的任何东西而不需要提交表单。创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为 Hocu

14、s Pocus!的按钮,初始的HTML清单,注意按钮的类型是 button 而不是提交按钮。如果使用提交按钮，单击该按钮将导致浏览器提交表单。通过使用一般输入按钮而不是提交按钮，可以把 JavaScript 函数和它连接起来与浏览器交互而无需提交表单,初始的HTML页面预览,目标效果,下面增加一些魔法，用兔子的图片替换页面中原有的图片：,使用getElementById()函数获得元素节点,首先找到网页中表示img元素的DOM节点。一般来说，最简单的办法是用getElementById()方法，它属于代表Web页面的document对象：var elementNode=document.get

15、ElementById(“id);,修改图片，麻烦的办法,完成所需修改有几种方法：有些简单，有些麻烦。但是运用较麻烦的办法是一次很好的DOM练习，首先看看换图片比较麻烦的办法；后面再重新分析一下看看有没有更简单的办法用带兔子的新照片替换原有图片的办法如下：1、创建新的img元素2、访问当前img元素的父元素，也就是它的容器3、在已有img元素之前插入新的img元素作为该容器的子级4、删除原来的img元素5、结合起来以便在用户单击按钮时调用刚刚创建的函数,1、创建新的img元素,创建新的img元素：var newImage=document.createElement(img);可以创建一个新的

16、元素节点，元素名为img。在HTML中基本上就是：下面需要增加一个属性src，它指定了要加载的图片：newImage.setAttribute(src,rabbit-hat.gif);注：如果对已有的属性调用setAttribute()，则把原来的值替换为指定的值。但是，如果调用setAttribute()并指定一个不存在的属性，DOM就会使用提供的值增加一个属性,2、获得原始图片的父元素,现在有了要插入的图片，还需要找到插入的地方。要将其插入到已有图片之前然后再删除原来的图片。为此需要知道已有图片的父元素：var imgParent=hatImage.parentNode;,3、插入新图片,

17、添加子节点的方法：insertBefore(newNode,targetNode)appendChild(newNode)把新图片元素插入到原有图片之前：imgParent.insertBefore(newImage,hatImage);现在原图片的父元素有了两个 子元素：新图片和紧跟在后面的旧图片,4、删除旧图片,因为已经得到了旧图片元素的父节点，只要调用removeChild()并把需要删除的节点传递给它即可：imgParent.removeChild(hatImage);完整的JavaScript函数：,5、表单元素连接JavaScript,每当用户点击Hocus Pocus!按钮的时候

18、运行showRabbit()函数。为此只要向HTML中增加一个简单的 onclick事件处理程序即可：,思考：替换图片更简单的办法,1、使用replaceChild()函数imgParent.replaceChild(newImage,hatImage);2、直接修改图片的src属性hatImage.setAttribute(src,rabbit-hat.gif);3、使用HTML DOM方法hatImage.src=“rabbit-hat.gif”;,然后把兔子藏起来,虽然兔子从帽子中跳出来了，但是屏幕下方的按钮仍然显示 Hocus Pocus!和调用 showRabbit()，下面做一些修

19、改，当用户再次点击按钮时把兔子藏起来！,1、修改按钮的标签,使用我们熟悉的方法，实现这个简单的功能，在showRabbit()函数中添加如下语句：,2、隐藏兔子,隐藏兔子的方法基本上和放兔子出来完全相反，将图片的src属性再改回旧图片。创建一个新的 JavaScript 函数来完成这项任务：,3、更改事件处理函数,现在虽然按钮的标签改变了，但是单击按钮时的动作没有变。当用户单击按钮时可以使用DOM改变事件或者发生的动作。在JavaScript中，可以通过按钮的onclick属性来引用该事件，因此可以改变按钮触发的事件：只要赋给onclick属性一个新的函数,JSON,什么是JSON？,JSON

20、(JavaScript Object Notation)是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，而且它是基于JavaScript 的。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C,C+,C#,Java,JavaScript 等）。这些特性使JSON成为理想的数据交换语言JSON有两种结构：“名/值”对的集合（A collection of name/value pairs）。在不同的语言中，它被理解为对象，结构，关联数组等值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组这些都是

21、常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。,JSON的基本形式,对象是一个无序的“名/值”对集合。一个对象以“”开始，“”结束。每个“名称”后跟一个“:”；“名/值”对之间使用“,”分隔：数组是值（value）的有序集合。一个数组以“”开始，“”结束。值之间使用“,”分隔：字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、null、对象（object）或者数组（arra

22、y）。这些结构可以嵌套数值（number）与C或者Java的数值非常相似。,JSON示例,下面的JSON表示名称/值对：firstName:Brett 多个名称/值对串在一起:firstName:Brett,lastName:McLaughlin,email:brettnewI 从语法方面来看，这与名称/值对相比并没有很大的优势，但是在这种情况下 JSON更容易使用，而且可读性更好当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性:“employees:firstName:Brett,lastName:McLaughlin,email:brettnewI,firstName:

23、Jason,lastName:Hunter,email:,firstName:Elliotte,lastName:Harold,email:这比相应的XML格式表示的数据更加简洁：,JSON示例（cont.）,相应的XML格式：BrettMcLaughlinbrettnewIJasonHElliotteH,JSON vs.XML,可读性JSON和XML的可读性可谓不相上下，XML略占上风可扩展性XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。编码难度XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的编码

24、明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了解码难度XML的解析得考虑子节点父节点关系，让人头昏眼花，而JSON的解析难度几乎为零。流行度XML已经被业界广泛的使用，而JSON才刚刚开始，但在Ajax领域，JSON凭借自身的优势有可能最终取代XML,在JavaScript中使用JSON（1）,JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的 API 或工具包。将JSON数据赋值给变量：var company=“employees:firstName:Brett,lastName:McLaughl

25、in,email:brettnewI,firstName:Jason,lastName:Hunter,email:,firstName:Elliotte,lastName:Harold,email:;这样将创建一个JavaScript对象,在JavaScript中使用JSON（2）,以JavaScript对象的方式访问数据，如获取第一个雇员的firstName信息：company.employees0.fristName正如可以用点号和括号访问数据，也可以按照同样的方式轻松地修改数据：company.employees0.fristName=“Vincent”,客户端处理JSON响应,服务器端返回JSON相应的文本表示，如：“city”:“Hefei”,“province”:“Anhui”客户端使用eval()函数将JSON文本转化为JavaScript对象：注意，使用额外的圆括号可使eval()函数将来源输入无条件地视为表达式进行解析。然后从JavaScript对象中取得相应的值：,课后作业,编写脚本完成下图功能（1）：,课后作业,附加：录入功能（必做）修改功能（选作）查询功能（选作）,