JavaScript

# 1. 介绍 # ## 1.1 展示课程目录 ## ## 1.2 介绍JavaScript ## ### 1.2.1 JavaScript是什么？ ### a. JavaScript给web页面添加交互行为 b. 脚本语言 c. 被包含于一个HTML页面中 d. 被浏览器解释运行 ### 1.2.2 展示一个JavaScript ### //HTML 4.01 必须加上type="text/javascript"属性 function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds() // add a zero in front of numbers # 2. Developer Essentials # ## 2.1 开发工具 ## Brackets调用Chrome浏览器打开当前页面，此后修改html、css、javascript并保存后，所修改的内容会即时响应到浏览器中的页面，无须手动刷新页面。 Chrome的开发者工具，前端开发人员可以使用这个工具对代码进行调试，同时可以动态增删HTML标签、CSS样式。查看响应时间，以找出系统瓶颈等等。 在chrome中，按F12启用开发者工具，如图所示。  在console标签中，可以进行脚本的调试。如图所示。  Chrome的控制台还有一些常用的命令。 console.dir(obj) 将DOM结点以JavaScript对象的形式输出到控制台而console.log是直接将该DOM结点以DOM树的结构进行输出，与在元素审查时看到的结构是一致的。 console.dir(document.body); Copy() 通过此命令可以将在控制台获取到的内容复制到剪贴板。 copy(document.body) ## 2.2 在页面中添加JavaScript ## ### 2.2.1 内部嵌入script ### 把js放入script元素内部就可以实现在页面内部嵌入script： JavaScript code... ### 2.2.2 链入外部的script ### 使用src属性链入外部的script文件，属性值为文件的URL。 外部链接script文件的优点是可以运用相同的script文件到不同的页面。 ### 2.2.3 Script的位置 ### 按照惯例，所有的元素都应该放在页面的元素中。请注意：无论引用几个外部js文件，浏览器都会按照元素在页面中出现的先后顺序对它们依次进行解析 。换句话说，在第一个元素包含的代码解析完成后，第二个 # 2.3 对象 # 对象、属性、DOM Javascript中所有事物都是对象。对象有属性和方法。 比如: 现实生活中： person 属性有身高height，体重weight。方法有走路walk()，说话speak()。 JavaScript中：var str=”I like javascript” Str就是一个对象，属性有它的长度str.length；方法有str.toUpperCase() str.big(); var str=”I like javascript” ; document.write(str.big()); document.write(str.length); document.write(str.toUpperCase()); DOM 文档对象模型 ## 2.4 变量 ## 变量作为数据的存取容器，你可以给他起一个名字并且指定它的值，可以使一个数字，一个字符串，一个DOM的元素，或者一个函数等等。在程序运行期间可以改变它的值。起变量名要注意以下几点: - 变量必须以字母开头 - 变量也能以 $ 和 _ 符号开头 - 变量名称对大小写敏感 如下的语句使用关键字var声明了一个名为num的变量并且赋值为9： Var num=9; ### 2.4.1 数据类型 ### Null 变量被赋值为null Var foo = null; Numbers 指定变量的值为一个数字 Var foo = 9; Strings 指定变量为一个字符串，变量值需要使用单引号或者双引号引起。 Var foo = “I love javascript”; Booleans 指定变量的值为关键字true或者false。这样的值被叫做布尔值。 Var foo = true; ### 2.4.2 Arrays ### 数组是把多个值赋给一个变量。 Var foo=[9,”nine”]; 可以通过指定索引值(从0开始)获取其中任何一个值。 Alert( foo[0] ); //提示信息 “9” Alert( foo[1] ); //提示信息 “nine” ## 2.5 运算符 ## ### 2.5.1 比较运算符 ### 比较运算符用于进行比较，返回一个布尔值。 == 等于 != 不等于 > 大于 >= 大于或者等于 ### 2.5.2 算术运算符 ### 算术运算符可以进行加、减、乘、除和其他数学运算： += 自身加 ++ 加1 – 减1 ## 2.6 基本语句 ## ### 2.6.1 if…else 语句 ### if..else 语句是JavaScript最基本的控制语句。根据条件的不同执行不同的操作。结构如下： if( 条件 ) { //条件为true执行的语句 } else{ //条件为false执行的语句 } ### 2.6.2 循环 ### for语句作用是重复执行语句，直到循环条件为false为止。 for(初始化；条件；增量) { //语句 } 举例： var items = [“foo”, “bar”, “baz”]; // 创建数组 for( var i = 0; i ## 2.7 函数 ## 函数是拥有名称的一系列JavaScript语句的有效组合。函数被调用即意味着这些语句的顺序解释执行。函数可以有参数。在函数体内可以使用参数。函数结构如下： sum( a,b ) { //sum为函数名，a、b为函数的参数 return a+b; //函数执行部分 } ### 2.7.1 预定义函数 ### alert(), confirm(),prompt() 这三个都是属于弹框类型的。使用警告、提示和确认消息框来获得用户的输入。 Date() 返回当前日期和时间 parseInt(“123”) 解析一个字符串并返回一个整数。 setTimeout(functionName, 1000) 通过setTimeout在指定的毫秒数后调用函数或计算表达式。（在本例中，1000毫秒后执行functionName函数。setTimeout() 只执行functionName函数一次。如果要多次调用，可以使用 setInterval() 或者让functionName函数自身再次调用 setTimeout()。 ### 2.7.2 自定义函数 ### function 函数名称 (参数表) { //函数体 } 例如： 1. 无参函数 function foo() { alert(“执行foo函数”); } 函数的调用： foo(); 2. 有参函数 function alertArraySize(arr) { alert(arr.length); } 函数的调用： var test = [1,2,3,4,5]; alertArraySize(test); // Alerts “5” 3. 有返回值的函数 function sum( a,b ) { return a+b; } 函数的调用： alert( sum(1,9) ); ## 2.8 浏览器对象 ## 在JavaScript中，浏览器被作为window对象。Window对象有许多属性和方法供我们使用。 属性/方法 描述 event 代表事件的状态 history 包含用户在一个浏览器窗口里访问过的URLs location 在地址栏给URI的读写权限 status 设置窗口状态栏的文本。 alert() 显示带有一段消息和一个确认按钮的警告框。 close() 关闭浏览器窗口。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 focus() 把键盘焦点给予一个窗口。 ## 2.9 事件 ## 事件 描述 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 onfocus 元素获得焦点 onkeydown 某个键盘的键被按下 onkeypress 某个键盘的键被按下或按住 onkeyup 某个键盘的键被松开 onload 某个页面或图像被完成加载 onmousedown 某个鼠标按键被按下 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开 onmouseover 鼠标被移到某元素之上 onmouseup 某个鼠标按键被松开 onsubmit 提交按钮被点击 # 3. The DOM Nodes Objects # ## 3.1 DOM是什么 ## DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。 通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。 ## 3.2 Node 层次 ## HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。 Document title

Subhead

Paragraph text with a link here.

More text here.

## 3.3 获取DOM节点 ## var foo = document.getElementById( “beginner” ).innerHTML; 通过元素名称 getElementsByTagName() 我们可以通过tags获取文档中特定的元素。例如，document.getElementsByTagName(“p”)返回页面上的每个段落，它们按照从上到下的顺序被封装进collection或者nodeList中。nodeLists就如同数组。如果要获取具体某个段落，我们需要指定其索引值。 var paragraphs = document.getElementsByTagName(“p”); 对于上面的语句，paragraphs[0] 指的文档的第一个段落，paragraphs[1]指的第二段，等等。 如果我们需要分别访问nodeList中的每个元素。可以使用循环语句。如下： var paragraphs = document.getElementsByTagName(“p”); for( var i = 0; i ## 3.4 操作nodes ## setAttribute() 继续前面的例子，我们知道如何获取属性值，但是如果我们想要设置src属性为一个新的路径该怎么办呢？使用setAttribute() ! 该方法需要两个参数：要改变的属性和要设置的新值。 var treeImage = document.getElementById(“tree-image “); treeImage .setAttribute(“src”, “nodeTree.jpg”); innerHTML innerHTML给我们提供了获取和改变元素内文本和标记的方法。它和之前学习的方法不同。假使我们需要快速在class属性为“intro”的元素里添加一个文本段落： var introDiv = document.getElementsByClassName(“intro”); introDiv.innerHTML = “

This is our intro text

“; innerHTML会告诉JavaScript解析`

`和`

`作为标记。 style DOM也允许从一个使用style属性的元素增加、修改、删除CSS样式。 document.getElementById(“intro”).style.color = “#fff”; document.getElementById(“intro”).style.backgroundColor = “#f00”; 在JavaScript和DOM，CSS中带有连字符的属性名(比如background-color 和border-top-width) 变成骆驼拼写法(backgroundColor 和 borderTopWidth,相应的)这样 – 字符不会导致操作错误。 不仅可以设置这些style属性的值，还可以获取它们的值。这个语句获取#intro元素的背景颜色并把它赋给backColor变量： var backColor = document.getElementById(“intro”).style.backgroundColor; ## 3.5 添加删除元素 ## 目前为止，我们了解了怎么设置和获取文档中存在的节点。DOM允许开发者通过增加删除节点来快速改变文档结构自己。 createElement() 使用createElement()方法创建新的元素。该方法接受一个参数：要被创建的元素。使用该方法起初有点不直观，因为新的元素不会立即出现在页面上。一旦我们以这种方式创建一个元素。新的元素在被加入到文档中前是不固定的。 var newDiv = document.createElement(“div”); createTextNode() 如果你想在在页面上的之前创建的或者存在的元素输入文本，我们可以使用createTextNode()方法。使用它，需要提供一个文本字符串作为参数。如同createElement()方法，createTextNode()创建一个新的文本节点的引用，我们可以把它存储在一个变量中，当需要的时候添加到页面中。 var ourText = document.createTextNode(“This is our text.”); appendChild() 目前为止我们创建了一个新的元素和一个新的文本字符串，但是我们怎么把它们变成文档的一部分呢？appendChild() 方法可以帮助我们。该方法需要一个参数：你想加入到DOM的节点。可以在存在的元素上调用该方法，在文档结构中该元素将成为新加节点的parent。如下举例说明。 当前页面上有一个div，其id为“div-parent”：

现在我们想要在 #div-parent 添加包含“Hello world ”的段落。首先我们需要创建一个p元素，然后创建一个文本节点作为内容。 var parentDiv = document.getElementById(“div-parent “); var newParagraph = document.createElement(“p”); var copy = document.createTextNode(“Hello, world!”); 现在我们已经有了元素和一些文本，我们可以使用appendChild()把它们放到页面中。 newParagraph.appendChild( copy ); parentDiv.appendChild( newParagraph ); 第一条语句把文本内容（Hello, world!）添加到我们新建的段落（newParagraph），这样段落就有了内容。第二条语句添加newParagraph到原有的div（parentDiv）中。现在，DOM中的parentDiv不再是空的，它的内容（Hello, world!）将显示在页面上。 insertBefore() insertBefore()方法正如你猜想的那样，在另一个元素前插入一个元素。它需要两个参数：第一个是要被插入的节点，第二个是要被在前面插入元素的元素。 例如，在如下的段落前插入一个新的头：

Our paragraph text

我们在一个包含div和p元素的父节点里加入h1元素。 var ourDiv = document.getElementById(“our-div”); var para = document.getElementById(“our-paragraph”); var newHeading = document.createElement(“h1”); var headingText = document.createTextNode(“A new heading”); newHeading.appendChild( headingText ); // 把新的文本节点加入到新的头里 最后，使用如下的语句，利用insertBefore()方法把newHeading变量引用的元素放到ourDiv 元素内para前。 ourDiv.insertBefore( newHeading, para ); replaceChild() replaceChild()方法使用一个节点代替原有的一个节点，该方法需要两个参数。第一个参数是新的节点。第二个参数是将被新节点代替的节点。和insertBefore()类似，你也需要指定将要发生替换的节点的父节点。例如：

现在我们想用一张照片代替id值为“swap-me”的div。首先我们需要创建一个新的img元素并设置该元素的src属性。如下：

var ourDiv = document.getElementById("our-div");
var swapMe = document.getElementById("swap-me");
var newImg = document.createElement("img"); 
// Create a new image element
newImg.setAttribute( "src", "path/to/image.jpg" ); 
// Give the new image a "src" attribute
ourDiv.replaceChild( newImg, swapMe );

removeChild()
使用removeChild()方法可以删除一个节点或者文档树中的整个分支。该方法需要一个参数，即你想要删除的节点。如同appendChild方法，removeChild方法需要由父节点调用。例如：

<div id="parent">
  <div id="remove-me">
<p>Pssh, I never liked it here anyway.</p>
  </div>
</div>

如果我们想要删除id为”remove-me”的元素，我们可以使用如下方法：

var parentDiv = document.getElementById("parent");
var removeMe = document.getElementById("remove-me");
parentDiv.removeChild( removeMe );  
// Removes the div with the id "remove-me" from the page.

4. 与服务器端交互（Ajax）

Ajax表示异步JavaScript与XML。是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
XMLHttpRequest对象是进行Ajax的核心。通过设置XMLHttpRequest对象的onreadystatechange属性，当服务器产生响应时，浏览器会调用此处注册的函数。如下例。

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
  }
xmlhttp.open("GET","ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>

</body>
</html>