JavaScript是一种被浏览器解释执行的脚本语言。如果你把浏览器看成是一个操作系统，那么JavaScript就是上面运行的一种编程语言(与c++、java...相似)，只不过它采用的是事件驱动的方式，即用户进行某种操作(如按下鼠标、选择菜单等)，浏览器就解释javascript然后出相应的响应。JavaScript设计的初衷，是让web页面能够拥有生命力，而不仅仅只是展现，一定程度上这降低了服务器和带宽的压力并为web的生命添加了许多可能性。javaScript常用来进行表单的验证，创建cookie，改进页面设计等等。
(此文不会详细去介绍javascript的语法，其语法与C或java的重叠部分将一笔带过，所以适合有一定编程经验的朋友快速熟悉javascript)
JavaScript基本语法
与java语言的比较
JavaScript在语法上与Java类似，下面结合Java对JavaScript进行一些语法的介绍。
- JavaScript区分大小写：这与Java语言相同。例如，变量username与变量userName是两个变量。
- 每行结尾的分号可有可无：如果没有添加分号，则一行默认表示一条语句。如果有分号，则以分号作为语句的结尾。
- 变量是弱类型的：在定义变量时，只使用var运算符，就可以将变量初始化为任意的值。例如下例：
var username="mrsoft" //将变量username 初始化为mrsoft
var age=20 //将变量age初始化为20
- 使用大括号标记代码块：与Java语言相同，JavaScript也是使用一对大括号标记代码块，被封装在大括号内的语句将按顺序执行。
- 注释：javascript注释使用方式与java的使用方式相同。单行注释使用双斜线"//"开头，在"//"后面的文字为注释内容。多行注释以"/*"开头，"*/"结尾，在"/*"和"*/"之间的内容为注释内容，在代码执行过程中不起作用。
Javascript的数据类型
- 数值型
-
- 整型：javascript的整形数据可以是正整数、负整数和0，并且可以使用十进制、八进制或十六进制表示。例如：
729 // 表示十进制的729
071 // 表示八进制的71
0x9405B // 表示十六进制的9405B
-
- 浮点型：浮点型数据由整数部分加小数部分组成，只能采用十进制，但是可以使用科学计数法或是标准方法来表示。例如：
3.1415926 //采用标准方法表示
1.6E5 // 采用科学
- 字符型
字符型数据是使用单引号或双引号括起来的一个或多个字符。
-
- 单引号括起来的一个或多个字符。如：
'a'
'javascript'
-
- 双引号括起来的一个或多个字符。如：
"系统公告："
- 布尔型
- 转义字符
例：在网页中弹出一个提示对话框，并应用转义字符"\r"将文字分为两行显示。
alert("欢迎访问我公司网站! \r http://www.mingribook.com")
- 空值
Javascript中有一个空值(null)，用于定义空的或不存在的引用。如果试图引用一个没有定义的变量，就返回一个null值。(空值不等于空的字符串("")或0)
- 未定义值
当使用一个并未声明的变量，或者使用了一个已经声明但没有赋值的变量时，将返回未定义值(modified)。
变量的定义及使用
javascript是弱类型语言，可以使用关键字var定义所有类型的变量，其语法格式如下：
var variable;
参数说明：
variable：用于指定变量名，该变量名必须遵守变量的命名规则。
例：
var number=10;
var info="欢迎访问我公司网站! \rhttp://www.mingribook.com"
var flag=true;
在javascrpit中，根据变量的作用域可以将变量分为全局变量和局部变量两种。全局变量是定义在所有函数之外，作用于整个脚本代码的变量；局部变量是定义在函数体内，只作用与函数体内的变量。
例：
<script language="javascript">
var company="明日科技"
function send(){
var url="www.mingribook.com";
alert(company+url);
}
</script>
如果只是声明了变量，但未对其赋值，则其默认值为undefined。
运算符的应用
javascript支持常见的赋值运算符，如=、+=、-=、*=、/=、%=、&=、|=、^=，也支持一些基本的运算符，如+、-、*、/、%、++、--，在使用方式上与大多数语言无异。
javascript的比较运算符在使用上有一些特殊。比较运算符的操作数可以是数字也可以是字符串。例：
| 运算符 | 描述 | 示例 |
| < | 小于 | 1<6 //返回未为true |
| > | 大于 | 7>10 //返回未为false |
| <= | 小于等于 | 10 <= 10 //返回未为true |
| >= | 大于等于 | 3>=6 //返回未为false |
| == | 等于。只根据表面值进行判断，不涉及数据类型 | "17"==17 //返回未为true |
| === | 绝对等于。根据表面值和数据类型同时进行判断 | "17"===17 //返回未为false |
| != | 不等于。只根据表面值进行判断，不涉及数据类型 | "17" !=17 //返回未为false |
| !== | 绝对不等于。根据表面值和数据类型同时进行判断 | "17"!==17//返回未为true |
javascript也支持常见的逻辑运算符，如!、&&、||，且用法无异。
javascript也支持三目运算符，其格式如下：操作数 ? 结果1：结果2。如果"操作数"的值为true，则整个表达式的结果为"结果1"，否则为"结果2"。
javascript支持对字符串进行+、+=运算。例：
var a="One "+"world ";
a+="One Dream";
alert(a);
JavaScript的流程控制语句
JavaScript的控制流程语句与大部分编程语言无异，提供了if、switch、for、while、do..while、break、continue等。
if条件语句
在用法上与C类似，if类放bool类型值，整数也可以转为bool。
例：使用if进行表单验证
<body>
<form name="form1" method="post" action="">
用户名：<input name="user" type="text" id="user"></input>
密码：<input name="pwd" type="text" id="pwd"></input>
<input name="Button" type="button" class="btn_grey" value="登陆"
οnclick="check()"></input>
<input name="Submit2" type="reset" class="btn_grey" value="重置"></input>
</form>
</body>
<script language="javascript">
function check() {
if(form1.user.value=="") { //判断用户名是否为空
alert("请输入用户名！");form1.user.focus();return;
} else if(form1.pwd.value=="") { //判断密码是否为空
alert("请输入密码！");form1.user.focus();return;
} else {
form1.submit(); //提交表单
}
}
</script>
Switch
javascript中switch与c或java中使用方式相同。javascript的switch还支持判断字符串类型，而Java7之前、c、C++都不支持此特性。
For、while、do...while、break、continue
与C、Java使用方式相同，不再赘述。
函数
函数是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段代码定义的。定义函数的基本语法如下：
function functionName([parameter 1, parameter 2,....]) {
statements;
[return expression;]
}
参数说明：
- functionName：必选项，用于指定函数名。在同一个页面中，函数名必须是唯一的，并且区分大小写。
- parameter：可选项，用于指定参数列表。当使用多个参数时，参数间使用逗号进行分隔。一个函数最多可以有255个参数。
- statements：必选项，是函数体，用于实现函数功能的语句
- expression：可选项，用于返回函数值。expression为任意的表达式、变量或常量。
例：定义一个用于计算商品金额的函数account()，该函数有两个参数，用于指定单价和数量，返回值为计算后的金额。具体代码如下：
function account(price, number) {
var sum = price * number;
return sum;
}
在调用时，如account(10.6. 10)。
事件处理
JavaScript与Web页面之间的交互是通过用户操作浏览器页面时触发相关事件来实现的。例如，在页面载入完毕时将触发onload(载入)事件，但用户单击按钮时将触发按钮的onclick事件等。事件处理程序则是用于响应某个事件而执行的处理程序。事件处理程序可以是任意JavaScript语句，但通常使用特定的自定义函数(Function)来对事件进行处理。
JavaScript基本事件
| 事件 | 何时触发 |
| onblur | 元素或窗口本身失去焦点时触发 |
| onclick | 单击鼠标左键时触发。当光标的焦点在按钮上，并按下Enter键时，也会触发该键 |
| ondbclick | 双击鼠标左键时触发 |
| onfocus | 任何元素或窗口本身获得焦点时触发 |
| onkeydown | 键盘上的按键(包括Shift或Alt等键)被按下时触发，如果一直按着某个键，则会不断触发。 |
| onkeyup | 释放键盘上的的按键时触发 |
| onreset | 单击重置按钮时，在<form>上触发 |
| onselect | 选中文本时触发 |
| onsubmit | 单击提交按钮时，在<form>上触发 |
事件处理程序的调用
如何在某个对象上来指定事件呢？主要有两种形式。
1. 在JavaScript中
在JavaScript中调用事件处理程序，首先需要获得要处理对象的引用，然后将要执行的处理函数赋值给对应的事件。
例：
<input name="bt_save" type="button" value="保存">
<script language="javascript">
var b_save=doucument.getElementById("bt_save");
b_save.οnclick=function() {
alert("单击了保存按钮")
}
</script>
2. 在HTML中
在HTML中分配事件处理程序，只需要在HTML标记中添加相应的事件，并在其中指定要执行的代码或是函数名即可。
如：
<input name="bt_save" type="button" value="保存" onlick="alert('单击了保存按钮')">
常用对象
JavaScript是一种基于对象的语言，因此许多功能来自于脚本中对象的方法与脚本的相互作用。
Window对象
Window对象即浏览器窗口对象，是一个全局对象，是所有对象的顶级对象。Window对象提供了许多熟属性和方法，这些属性和方法被用来操作浏览器页面的内容。Window对象不需要使用new关键字创建对象实例，而是直接使用"对象名.成员"的格式来访问其属性或方法。下面对Window对象的属性和方法进行介绍。
Window对象的常用属性：
| 属性 | 描述 |
| document | 对窗口或框架中含有文档的Document对象的只读引用 |
| defaultStatus | 一个可读写的字符，用于指定状态栏中的默认信息 |
| location | 用于代表窗口或框架的Location对象。如果将一个URL赋予该属性，则浏览器将加载并显示该URL指定的文档 |
| status | 一个可读写的字符，用于指定状态栏中的当前信息 |
| navigator | 对窗口或框架的Navigator对象的只读引用，通过Navigator对象可以获得与浏览器相关的信息 |
Window对象的方法：
| 方法 | 描述 |
| alert() | 弹出一个警告对话框 |
| confirm() | 显示一个确认对话框，单击"确认"按钮返回true，否则返回false |
| close() | 关闭窗口 |
| open() | 打开一个新窗口 |
| focus() | 将键盘焦点赋予顶层浏览器窗口。在多数平台上，这将使窗口移到最前面 |
| scrollTo(x,y) | 把窗口滚动到x,y坐标指定的位置 |
| moveTo(x,y) | 将窗口移动到一个绝对位置 |
| resizeTo(x,y) | 设置窗口的大小 |
| setInterval() | 周期性执行指定的代码 |
提示：
由于Window对象使用十分频繁，又是其他对象的父对象，所以在使用Window对象的属性和方法时，JavaScript允许省略Window对象的名称。
如：window.alert("你好") 可以替换为 alert("你好")
String对象
由于JavaScript经常对字符串进行操作，所以JavaScript内置了String对象来处理与字符串相关的操作。
属性：
String对象最常用的属性是length，该属性用于返回String对象的长度。
常用方法：
| 方法 | 描述 |
| anchor(name) | 为字符串对象中的内容两边加上HTML的<a name=name></a> |
| charAt(index) | 返回字符串对象中指定索引号的字符组成的字符串 |
| concat(s1,...,sn) | 将调用方法的字符串与指定字符串结合，结果返回新字符串 |
| indexOf(pattern) | 返回字符串中包含pattern所代表参数第一次出现的位置值。如果该字符串不包含要查找的模式，则返回-1 |
| localeCompare(s) | 用特定比较方法比较字符串与s字符串。如果字符串相等，则返回0，否则返回一个非0数字值 |
DOM技术
DOM是Document Object Model(文档对象模型)的简称，是表示文档(如HTML文档)和访问、操作构成文档的各种元素(如HTML标记和文本串)的应用程序接口(API)。它提供了文档中独立元素的结构化、面向对象的表示方法，并允许通过对象的属性和方法访问这些对象。另外，文档对象模型还提供了添加和删除文档对象的方法，这样能够创建动态的文档内容。DOM提供了处理事件的接口，它允许捕获和响应用户以及浏览器的动作。
DOM的分层结构
在DOM中，文档的层次结构以树形表示。树是倒立的，树根在上，枝叶在下，树的节点表示文档中的内容。DOM树的根节点是个Document对象，该对象documentElement属性引用表示文档根元素的Element元素。对于HTML文档，表示文档根元素的Element对象是<html>标记，<head>和<body>元素是树的枝干。
例：一个简单的HTML文档说明DOM的分层结构。
<html>
<head>
<title>一个HTML文档</title>
</head>
<body>
欢迎访问明日科技网站!
<br/>
<a href="www.mingribook.com">http://www.mingribook.com</a>
</body>
</html>
运行效果如下图：
对应的Document对象的层次结构如下图：
遍历文档
在DOM中，HTML文档中的各个节点被视为各种类型的Node对象，并且将HTML文档表示为Node对象的树。对于任何一个树形结构来说，最常做的就是遍历树。在DOM中，可以通过Node对象的paramNode、firstChild、nextChild、lastChild、previousSibling等属性来遍历文档树。
Node对象的属性：
| 属性 | 类型 | 描述 |
| parentNode | Node | 节点的父节点，没有父节点时为null |
| childNodes | NodeList | 节点的所有子节点的NodeList |
| firstChild | Node | 节点的第一个子节点，没有则为null |
| lastChild | Node | 节点的最后一个子节点，没有则为null |
| previousSibling | Node | 节点的上一个节点，没有则为null |
| nextChild | Node | 节点的下一个节点，没有则为null |
| nodeName | String | 节点名 |
| nodeValue | String | 节点值 |
| nodeType | Short | 表示节点类型的整形常量 |
由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型。下面以列表的形式给出了Node对象的节点类型、节点名、节点值及节点类型常量。
| 节点类型 | 节点名 | 节点值 | 节点类型常量 |
| Attr | 属性名 | 属性值 | ATTRIBUTE_NODE (2) |
| CDATASection | #cdate-section | CDATA段内容 | CDATA_SECTION_NODE(4) |
| Comment | #comment | 注释的内容 | COMMENT_NODE(8) |
| Document | #document | null | DOCUMENT_NODE(9) |
| DocumentType | 文档类型名 | null | DUCUMENT_TYPE_NODE(11) |
| DocumentFragment | #document-fragment | null | DUCUMENT_FRAGMENT_NODE(11) |
| Element | 标记名 | null | ELEMENT_NODE(1) |
| Entity | 实体名 | null | ENTITY_NODE(6) |
| EntityReference | 引用实体名 | null | ENTITY_REFERENCE_NODE(5) |
| Notation | 符号名 | null | NOTATION_NODE(12) |
| ProcessionInstruction | 目标 | 除目标以外的所有内容 | PROCESSION_INSTRUCTION_NODE(7) |
| Text | #text | 文本节点内容 | TEXT_NODE(3) |
例：解析前面html例子中的全部标记及标记总数。
<script language="javascript">
var element="";
function getElement(node) {
var total = 0;
if(node.nodeType == 1) {
total++;
elementList = elementList + node.nodeName + "、";
}
var childrens = node.childNodes;
for(var m=node.firstChild;m!=null;m=m.nextSibling) {
total += getElement(m);
}
return total;
}
function show() {
var number = getElement(document);
elementList=elementList.substring(0,elementList.length-1);
alert("该文档中包含："+elementList+"等"+number+"个标记! ");
elementList="";
}
</script>
获得文档中的指定元素
1. 通过元素的ID属性获取元素
使用Document对象的getElementsById()方法可以通过元素的ID属性获取元素。例如，获取文档中ID属性为userList的节点。代码如下：
document.getElementById("userList")
2. 通过元素的name属性获取元素
使用Document对象的getElementByName()方法可以通过元素的name属性获取元素。与getElementsById方法不同的是，该方法的返回值为一个数组，而不是一个元素。如果想通过name属性获取页面中唯一的元素，可以通过获取返回数组中下标值为0的元素进行获取。例如，获取name属性值为userName的节点。代码如下：
document.getElementByName("userName")[0]
操作文档
在DOM中不仅可以通过节点的属性查询节点，还可以对节点进行创建、插入、删除和替换等操作。这些操作都可以通过节点(Node)对象提供的方法来完成。Node对象的常用方法如：
| 方法 | 描述 |
| insertBefore(newChild,refChild) | 在现有节点refChild之前插入节点newChild |
| replaceChild(newChild,oldChild) | 将子节点列表中的子节点oldChild换成newChild，并返回oldChild节点 |
| removeChild(oldChild) | 将子节点列表中的子节点oldChild删除，并返回oldChild节点 |
| appendChild(newChild) | 将节点newChild添加到该节点的子节点列表末尾。如果newChild已经在树中，则先将其删除 |
| hasChildNodes() | 返回一个布尔值，表示节点是否有子节点 |
| cloneNode(deep) | 返回这个节点的副本(包括属性)。如果deep的值为true，则复制所有包含的节点，否则只复制这个节点 |
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
