javaScript简单使用
注意:此文档是对于w3school的学习与整理
1. JavaScript 是一种轻量级的编程语言。是可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。
1). JavaScript：写入 HTML 输出
document.write("<h1>This is a heading</h1>");
只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。
2). JavaScript：对事件作出反应
<button type="button" onclick="alert('Welcome!')">点击这里</button>
alert() 函数一般用于代码测试
3). JavaScript：改变 HTML 内容
x=document.getElementById("demo") //查找元素, 这个方法是 HTML DOM 中定义的
x.innerHTML="Hello JavaScript";
4). JavaScript：改变 HTML 图像
<script>
function changeImage() {
element=document.getElementById('myimage');
if (element.src.match("bulbon")) {
element.src="/i/eg_bulboff.gif";
}
else {
element.src="/i/eg_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>
5). JavaScript：改变 HTML 样式
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式
6). JavaScript：验证输入
if isNaN(x) {alert("Not Numeric")};
7). javaScript 注释可用于提高代码的可读性。
单行注释以 // 开头。多行注释以 /* 开始，以 */ 结尾。
8). 声明变量
1. var a = '';
2. 重新声明 JavaScript 变量:
var carname="test";
var carname;
依然是test
9). JavaScript 数据类型: 字符串(string)、数字(数字均为 64 位)、布尔、数组、对象、Null、Undefined
1. 对象属性有两种寻址方式：
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
name=person.lastname;
name=person["lastname"];
2. 声明变量类型
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
3. 数字: 整数（不使用小数点或指数计数法）最多为15位。小数的最大位数是17，但是浮点运算并不总是100%准确. 如果前缀为0，则解释为八进制数，如果前缀为 0x，则解释为十六进制数。
1) 属性：MAX VALUE, MIN VALUE, NEGATIVE INFINITIVE, POSITIVE INFINITIVE, NaN, prototype, constructor
2) 方法：toExponential(), toFixed(), toPrecision(), toString(), valueOf()
4. 字符串
var txt = "Hello";
txt.length=5;
txt.big();txt.small();txt.bold();txt.fontcolor("Red");txt.toLowerCase();txt.toUpperCase()......
txt.indexOf('e'); str.match("e");
txt.replace('e', 'a');
txt.search('e');
5. 数组
var x;
var arr = new Array();
arr[0] = "Saab";
arr[1] = "Volvo";
arr[2] = "BMW";
for (x in arr)
{
document.write(arr[x] + "<br />")
}
var arr2=new Array("Saab","Volvo","BMW");
arr.concat(arr2);
arr.join(); //默认,
arr.join(.);
arr.sort();
10. JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。
1. 访问对象的属性: objectName.propertyName 2. 访问对象的方法: objectName.methodName()
example:Math(): Math.round(), Math.random(), Math.max(), Math.min()
11. break与continue
1. 如果把数字与字符串相加，结果将成为字符串。
2. do/while 循环。该循环至少会执行一次，即使条件是 false，隐藏代码块会在条件被测试前执行：
3. break 语句用于跳出循环。continue 用于跳过循环中的一个迭代。
4. JavaScript 标签
1) 标记 JavaScript 语句，请在语句之前加上冒号：
label:
语句
2) break 和 continue 语句仅仅是能够跳出代码块的语句。
语法
break labelname;
continue labelname;
continue 语句（带有或不带标签引用）只能用在循环中。 break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
12. 在 JavaScript 中，有多少种不同类型的循环? 两种。for 循环和 while 循环。
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
2. HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
1. <head> 中的 JavaScript 函数
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
点击时调用
2. <body> 中的 JavaScript 函数
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>
我们把 JavaScript 放到了页面代码的底部，这样就可以确保在 <p> 元素创建之后再执行脚本。
3. 外部的 JavaScript
<body> <script src="myScript.js"></script> </body>
外部脚本不能包含 <script> 标签。
3. 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
1). JavaScript 函数语法
function functionname()
{
这里是要执行的代码
}
2). 调用带参数的函数
function myFunction(var1,var2)
{
这里是要执行的代码
}
3). 带有返回值的函数
function myFunction()
{
var x=5;
return x;
}
var myVar=myFunction();
4). 变量
1>. 局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
2>. 全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
3>. JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
4>. 向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。
4. DOM操作
- JavaScript 能够改变页面中的所有 HTML 元素:innerHTML
- JavaScript 能够改变页面中的所有 HTML 属性:attribute
- JavaScript 能够改变页面中的所有 CSS 样式:style.property
- JavaScript 能够对页面中的所有事件做出反应
- onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。 - onclick 事件
- onchange 事件
- onmouseover 和 onmouseout 事件
- onmousedown、onmouseup 以及 onclick 事件构成了鼠标点击事件的所有部分。
首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
- onload 和 onunload 事件
- 如何添加或删除 HTML 元素: createElement, createTextNode, element.appendChild; getElementById, element.removeChild
5. 正则匹配(http://www.cnblogs.com/floraCnblogs/p/regular-expression.html)
RegExp 对象用于规定在文本中检索的内容。
1. 定义 RegExp
new RegExp(pattern, attributes);
1) pattern为字符串, 如果 pattern 是正则表达式，而不是字符串，则必须省略attributes.
2) attributes 是一个可选的字符串，包含属性 "g"(全局匹配)、"i"(区分大小写) 和 "m"(多行匹配)
2. RegExp 对象的方法
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
1) test() 方法检索字符串中的指定值。返回值是 true 或 false。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free")); //true
2) exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free")); //e
您可以向 RegExp 对象添加第二个参数，以设定检索。例如"g" 参数 ("global")可以找到所有某个字符的所有存在。原理如下：找到第一个 "e"，并存储其位置, 如果再次运行 exec()，则从存储的位置开始检索，并找到下一个 "e"，并存储其位置.
var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)
//eeeeeenull
3) compile() 方法用于改变 RegExp。既可以改变检索模式，也可以添加或删除第二个参数。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free")); //true
patt1.compile("d");
document.write(patt1.test("The best things in life are free")); //false
