JavaScript教程-Kev.ppt

JavaScript,讲师：Kevin,目 录,JavaScript简介 JavaScript语法 JavaScript面向个对象编程 Dom基础 JavaScript与Dom结合 JSON简介,JavaScript是Netscape公司与Sun公司合作开发的。在JavaScript出现之前，Web浏览器不过是一种能够显示超文本文档的软件的基本部分。而在JavaScript之后，网页的内容不再局限于枯燥的文本，可交互性得到了显著的改善 JavaScript是一种脚本语言，一种解释性的，基于对象的脚本语言。JavaScript脚本通常只能通过Web浏览器进行解释和执行而不是像普通意义上的程序那样可以独立运行 在HTML基础上，使用JavaScript 可以开发交互式Web网页。 JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容 注意，JavaScript与Java没有任何联系,JavaScript语法 语句,JavaScript脚本的基本组成单位。 只需要简单地把各条语句放在不同的行上就可以分割开来，不需要加分号“；”结束: first statement second statement 但在每条语句的末尾添加“；”是一种良好的编程习惯： first statement; second statement;,JavaScript语法注释,单行注释（双斜杠）： / line1 多行注释： /* line1 line2 */ HTML风格注释（不推荐使用）： ”来结束,JavaScript语法变量,JavaScript不要求在声明变量时必须明确指出其数据类型（所以称JavaScript为弱类型语言），可以使用统一的关键字var进行声明： var age = 33; mood = “happy”; 但是提前对变量做出声明是一种良好的编程习惯 变量名允许包含字母、数字、美元符号($)和下划线字符，但不允许包括空格或标点符号,JavaScript语法数据类型,JavaScript变量的类型是由变量的值决定的，可以对同一个变量赋予不同数据类型的值： 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开始，赋值方法也和其它语言类似： 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” = “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 result = multiply (5, 9); 注意，JavaScript中的函数不需声明返回类型，参数也不需要声明类型,JavaScript语法对象,JavaScript对象是由一组相关的属性和方法构成的数据实体。属性和方法都要使用“.”来访问： perty object.method() 使用函数来定义“类”： function Person() this.age = 12; = “no name”; this.sayHello = function() alert (“Hello ” + ); /其中this关键字不能省略！ 使用new关键字来创建对象实例： var vincent = new Person();,DOM基础,DOM简介,DOM是”Document Object Model”（文档对象模型）的首字母缩写。当创建了一个网页并把它加载到Web浏览器中时，就会在幕后创建一个文档对象模型 DOM表示被加载到浏览器窗口里的当前页面：浏览器向我们提供了当前页面的模型，而我们可以通过JavaScript访问这个模型 DOM把一份文档表示为一棵树,DOM树结构,如下的HTML页面：,DOM树结构（cont.）,浏览器加载该页面并将之转换为树形结构：,DOM树结构（cont.）,DOM树中的一切是以最外层的HTML包含元素，即html元素开始的。使用树的比喻，这叫做根元素（root element） 从根流出的线表示不同标记部分之间的关系。head和body元素是html根元素的孩子（child）；title是head的孩子，而文本 “Trees, trees, everywhere”是title的孩子；相对的，head是title的父亲（parent），title是文本 “Trees, trees, everywhere” 的父亲。处在同一层次的且互不包含的两个分支（如head和body）之间称为兄弟（sibling）关系。整个树就这样组织下去，直到浏览器获得与上图类似的结构 通常把这样的树结构成为一棵节点树,节点 （node）,DOM文档是由节点构成的集合，此时的节点是文档树上的树枝或者树叶 DOM中节点的类型： 元素节点（element node），诸如、等。元素节点可以包含其它的元素，唯一没有被包含在其它元素里的元素是，它是根元素 属性节点（attribute node），元素或多或少地有一些属性，属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里，所以属性节点总是被包含在元素节点中 文本节点（text node），元素中包含着文本节点“Trees, trees, everywhere”,基本DOM方法,getElementById(id) 返回一个给定id属性的元素节点相对应的对象。这个方法是与document对象相关联的函数。其中document对象代表着整个HTML文档并可以用来访问所有页面中的元素 getElementsByTagName(tagname) 返回一个对象数组，它们分别对应着文档里的一个特定的元素节点 getAttribute() 返回对象的属性值 setAttribute() 修改对象的属性值,重要DOM属性,childNodes 可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个数组，包含了给定元素节点的全体子元素 nodeName 返回元素节点的名称。注意，返回的结果全部是大写 nodeType 用来区分节点的类型，元素节点的nodeType属性值是1，属性节点的nodeType属性值是2，文本节点的nodeType属性值是3 nodeValue 可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空,重要DOM属性（cont.）,firstChild和lastChild 第一个和最后一个孩子节点。 node.firstChild等价于node.childNodes0， node.lastChild等价于 node.childNodesnode.childNodes.length 1 parentNode 返回元素的父节点 nextSibling 返回下一个兄弟节点,改变网页结构的DOM方法,createElement(tagname) 创建新的元素节点，此方法与document对象相关联。新建的元素节点并未与节点树相连 appendChild(node) 把新建的节点插入到节点树的某个节点下，成为这个节点的子节点 createTextNode(text) 创建文本节点 insertBefore(newNode, targetNode) 把一个新元素插入到一个现有元素的前面 replaceChild(newChild, oldChild) 替换一个孩子节点 removeChild(node) 删除一个孩子节点,基于DOM的Web应用程序示例,基于DOM的Web应用程序示例,首先建立一个非常简单的应用程序，然后再添加一点DOM魔法。注意，DOM可以移动网页中的任何东西而不需要提交表单。创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为 Hocus Pocus! 的按钮,初始的HTML清单,注意按钮的类型是 button 而不是提交按钮。如果使用提交按钮，单击该按钮将导致浏览器提交表单。通过使用一般输入按钮而不是提交按钮，可以把 JavaScript 函数和它连接起来与浏览器交互而无需提交表单,初始的HTML页面预览,目标效果,下面增加一些魔法，用兔子的图片替换页面中原有的图片：,使用getElementById()函数获得元素节点,首先找到网页中表示img元素的DOM节点。一般来说，最简单的办法是用getElementById()方法，它属于代表Web页面的document对象： var elementNode = document.getElementById(“id“);,修改图片，麻烦的办法,完成所需修改有几种方法：有些简单，有些麻烦。但是运用较麻烦的办法是一次很好的DOM练习，首先看看换图片比较麻烦的办法；后面再重新分析一下看看有没有更简单的办法 用带兔子的新照片替换原有图片的办法如下： 1、创建新的img元素 2、访问当前img元素的父元素，也就是它的容器 3、在已有img元素之前插入新的img元素作为该容器的子级 4、删除原来的img元素 5、结合起来以便在用户单击按钮时调用刚刚创建的函数,1、创建新的img元素,创建新的img元素： var newImage = document.createElement(“img“); 可以创建一个新的元素节点，元素名为img。在HTML中基本上就是： 下面需要增加一个属性src，它指定了要加载的图片： newImage.setAttribute(“src“, “rabbit-hat.gif“); 注：如果对已有的属性调用setAttribute()，则把原来的值替换为指定的值。但是，如果调用setAttribute()并指定一个不存在的属性，DOM就会使用提供的值增加一个属性,2、获得原始图片的父元素,现在有了要插入的图片，还需要找到插入的地方。要将其插入到已有图片之前然后再删除原来的图片。为此需要知道已有图片的父元素： var imgParent = hatImage.parentNode;,3、插入新图片,添加子节点的方法： insertBefore(newNode, targetNode) appendChild(newNode) 把新图片元素插入到原有图片之前： imgParent.insertBefore(newImage, hatImage); 现在原图片的父元素有了两个 子元素：新图片和紧跟在后面的旧图片,4、删除旧图片,因为已经得到了旧图片元素的父节点，只要调用removeChild()并把需要删除的节点传递给它即可： imgParent.removeChild(hatImage); 完整的JavaScript函数：,5、表单元素连接JavaScript,每当用户点击Hocus Pocus!按钮的时候运行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()，下面做一些修改，当用户再次点击按钮时把兔子藏起来！,1、修改按钮的标签,使用我们熟悉的方法，实现这个简单的功能，在showRabbit() 函数中添加如下语句：,2、隐藏兔子,隐藏兔子的方法基本上和放兔子出来完全相反，将图片的src属性再改回旧图片。创建一个新的 JavaScript 函数来完成这项任务：,3、更改事件处理函数,现在虽然按钮的标签改变了，但是单击按钮时的动作没有变。当用户单击按钮时可以使用DOM改变事件或者发生的动作。在JavaScript中，可以通过按钮的onclick属性来引用该事件，因此可以改变按钮触发的事件：只要赋给onclick属性一个新的函数,JSON,什么是JSON？,JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，而且它是基于JavaScript 的。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C+, C#, Java, JavaScript 等）。这些特性使JSON成为理想的数据交换语言 JSON有两种结构： “名/值”对的集合（A collection of name/value pairs）。在不同的语言中，它被理解为对象，结构，关联数组等 值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组 这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。,JSON的基本形式,对象是一个无序的“名/值”对集合。一个对象以“”开始，“”结束。每个“名称”后跟一个“:” ；“名/值”对之间使用“,” 分隔： 数组是值（value）的有序集合。一个数组以“”开始，“”结束。值之间使用“,”分隔： 字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。 值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套 数值（number）与C或者Java的数值非常相似。,JSON示例,下面的JSON表示名称/值对： “firstName“: “Brett“ 多个名称/值对串在一起: “firstName“: “Brett“, “lastName“:“McLaughlin“, “email“: “brettnewI“ 从语法方面来看，这与名称/值对相比并没有很大的优势，但是在这种情况下 JSON 更容易使用，而且可读性更好 当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性: “employees“: “firstName“: “Brett“, “lastName“:“McLaughlin“, “email“: “brettnewI“ , “firstName“: “Jason“, “lastName“:“Hunter“, “email“: ““ , “firstName“: “Elliotte“, “lastName“:“Harold“, “email“: ““ 这比相应的XML格式表示的数据更加简洁：,JSON示例（cont.）,相应的XML格式： Brett McLaughlin brettnewI Jason Hunter Elliotte Harold ,JSON vs. XML,可读性 JSON和XML的可读性可谓不相上下，XML略占上风 可扩展性 XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。 编码难度 XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了 解码难度 XML的解析得考虑子节点父节点关系，让人头昏眼花，而JSON的解析难度几乎为零。 流行度 XML