首页 > 代码库 > JavaScript（class0526）
JavaScript（class0526）
什么是JavaScript？
HTML只是描述网页长相的标记语言，没有计算、判断能力，如果所有计算、判断（比如判断文本框是否为空、判断两次密码是否输入一致）都放到服务器端执行的话网页的话页面会非常慢、用起来也很难用，对服务器的压力也很大，因此要求能在浏览器中执行一些简单的运算、判断。JavaScript就是一种在浏览器端执行的语言。
B/S
JavaScript的Java没直接的关系，唯一的关系就是JavaScript来源于Netscape中的LiveScript，后来吸收了Java的一些特性，升级为JavaScript。JavaScript有时被简称为JS。 Jscript ECMASctipt
JavaScript是解释型语言，无需编译就可以随时运行，这样哪怕语法有错误，没有语法错误的部分还是能正确运行。
JS的开发环境
VS中JavaScript、JQuery的自动完成功能：在VS2010中直接有，VS2008需要安装VisualStudio 2008SP1（http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&familyid=27673c47-b3b5-4c67-bd99-84e525b5ce61）和VS90SP1-KB958502-x86（http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736）补丁会更强更好用。如果实在“.” 不出来也没关系，不影响运行。注意：先安装2008SP1，再安装VS90SP1-KB958502-x86。 JS是非常灵活的动态语言，不像C#等静态语言那样严谨，开发工具中的JS完成功能只是一个辅助、建议，“.”出来的成员调用可能不能用，“.”不出来的成员也许也能调用，因此不要因为“点儿不出来”而担心代码有问题。 VS2008的HTML编辑器中触发JavaScript自动完成：Ctrl+J。
JS入门
<script type="text/javascript">
alert(new Date().toLocaleDateString());
</script>
<script language="....>已经不推荐使用。
JavaScript代码放到<script>标签中，script可以放到<head>、<body>等任意位置，而且可以有不止一个<script>标签。alert函数是弹出消息窗口，new Date()是创建一个Date类的对象，默认值就是当前时间。JS是大小写敏感的。
放到<head>中的<script>在body加载之前就已经运行了。写在body中的<script>是随着页面的加载而一个个执行的。
除了可以在页面中声明JavaScript以外，还可以将JavaScript写到单独的js文件中，然后在页面中引入：<script src="http://www.mamicode.com/test.js" type="text/javascript"></script>。声明到单独的js文件的好处是多页面也可以共享、减小网络流量。js文件的CDN(*)
注意：不要写成<script src="http://www.mamicode.com/test.js" type="text/javascript"/>否则会有问题，这是一个比较特殊的地方。
事件
在超链接的点击里执行JavaScript：<a href=“javascript:alert(’88’)">发发</a>
JavaScript中也有事件的概念，当按钮被点击的时候也可以执行JavaScript：
<input type="button" onclick="alert(99)" value="http://www.mamicode.com/久久"/>
只有超链接的href中的JavaScript中才需要加“"javascript:”，因为它不是事件，而是把“"javascript:”看成像“http:”、“ftp:”、“thunder://”、“ed2k://”、"mailto:"一样的网络协议，交由js解析引擎处理。只有href中这是这是一个特例
JS的变量
JavaScript中即可以使用双引号声明字符串，也可以使用单引号声明字符串。主要是为了方便和html集成，避免转义符的麻烦。
JavaScript中有null、undefined两种，null表示变量的值为空，undefined则表示变量还没有指向任何的对象，未初始化。两者的区别参考资料。
JavaScript是弱类型，声明变量的时候无法：int i=0；只能通过var i=0;声明变量，和C#中的var不一样，不是C#中那样的类型推断。
JavaScript中也可以不用var声明变量，直接用，这样的变量是“全局变量”，因此除非确实想用全局变量，否则使用的时候最好加上var。
JS是动态类型的，因此var i=0;i="abc";是合法的。
var i = 10; //声明一个变量，名字为i，指向10这个整数，一旦指向10，i就是int类型了。 i = "abc";//嫁鸡随鸡嫁狗随狗！ function f1() { a = 500; var b = 600; } function f2() { alert(a); alert(b); } f1();f2();
判断变量初始化
JavaScript中判断变量、参数是否初始化的三种方法：
var x;
if (x == null)
{ alert("null"); }
if (typeof (x) == "undefined")
{ alert(‘undefined‘); }
if (!x)
{alert(‘不x‘);}
if(x){}//变量被初始化了或者变量不为空或者变量不为0.
推荐用最后一种方法。 在js中 值为0、null、undefined或空字符串的表达式被解释为 false。
JS除错与调试
如果JavaScript中的代码有语法错误，浏览器会弹出报错信息，查看报错信息就能帮助排查错误。
以前调试的时候都是alert
JavaScript的调试，使用VS可以很方便的进行JavaScript的调试，调试时需要注意几点： 以调试方式运行网页。 设置断点、监视变量等操作和C#一样。
案例：用循环语句的方法计算1到100之间整数的和
函数的声明
JavaScript中声明函数的方式：
unction add(i1, i2) { return i1 + i2; }int add(int i1,int i2)//C#写法
不需要声明返回值类型、参数类型。函数定义以function开头。 var r = add(1, 2); alert(r); r = add("你好", "tom"); alert(r);
avaScript中不像C#中那样要求所有路径都有返回值，没有返回值就是undefined。
易错：自定义函数名不要和js内置、dom内置方法重名，比如selectall、focus等函数名不要用。
匿名函数
var f1 = function(i1, i2) {
return i1 + i2;
}
alert(f1(1,2));
类似于C#中的匿名函数。
这种匿名函数的用法在JQuery中的非常多
alert(function(i1, i2) { return i1 + i2; }(10,10));//直接声明一个匿名函数，立即使用。用匿名函数省得定义一个用一次就不用的函数，而且免了命名冲突的问题，js中没有命名空间的概念，因此很容易函数名字冲突。通过例子发现一旦命名冲突以最后声明的为准
必须<script src="http://www.mamicode.com/my1.js" type="text/javascript"></script>不能：<script src="http://www.mamicode.com/my1.js" type="text/javascript"/>
JS面向对象基础（*）
JavaScript中没有类的语法，是用函数闭包（closure）模拟出来的，下面讲解的时候还是用C#中的类、构造函数的概念，JavaScript中String、Date等“类”都被叫做“对象”，挺怪，方便初学者理解，不严谨。
function Person(name,age) { this.name = name; this.age =age; this.sayHello=function(){ alert("你好，我是"+this.name+"，我"+this.age+"岁了"); } } var p1 = new Person("tom",20); p1.sayHello();
必须要声明类名，function Person(name,age)可以看做是声明构造函数，Name、Age这些属性也是使用者动态添加了。var p1 = Person("tom", 30);//不要丢了new，否则就变成调用函数了，p1为undefined。new 相当于创建了函数的一个实例
面向对象 参考文章：http://www.cnblogs.com/heros/archive/2009/09/14/1566622.html 闭包参考文章 http://www.ibm.com/developerworks/cn/linux/l-cn-closure/
String对象(*)
length属性；
charAt方法；
取第几个字符
indexOf
lastIndexOf
Substr(start,length)、substring(start,end)
split
match、replace、search方法，正则表达式相关
g: 全局匹配
i: 忽略大小写
gi: 以上组合
电子邮件reg=/^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/gi;
Array对象
JavaScript中的Array对象就是数组，首先是一个动态数组，而且是一个像C#中数组、ArrayList、Hashtable等的超强综合体。 var names = new Array(); names[0] = "tom"; names[1] = "jerry"; names[2] = "lily"; for (var i = 0; i < names.length; i++) { alert(names[i]); }无需预先制定大小，动态。
练习
求一个数组中的最大值。定义成函数。
function getMax(array) { }
将一个字符串数组输出为|分割的形式，比如“梅西|卡卡|郑大世”。不要使用JavaScript中的Join函数。arr1.join("|")将数组用分隔符连接成一个字符串。
将一个字符串数组的元素的顺序进行反转。{"3","a","8","haha"} {"haha","8","a","3"}。不要使用JavaScript中的反转函数。提示：第i个和第length-i-1个进行交换。定义成函数。myreverse
交换两个变量，数组同样是传递引用。
JS中的Dictionary
JS中的Array是一个宝贝，不仅是一个数组，还是一个Dictionary，还是一个Stack。 var pinyins = new Array(); pinyins["人"] = "ren"; pinyins["口"] = "kou"; pinyins["手"] = "shou"; alert(pinyins["人"]); alert(pinyins.人);像Hashtable、Dictionary那样用，而且像它们一样效率高。
只要有了Array你就同时拥有了数组、List、Hashtable， var arr = new Array(); arr[0] = "tom"; arr[1] = "jim"; for (var i in arr) {//打印出来的是0、1、2……证明了数组用法是Dictionary用法的一个特例而已。 alert(i+arr[i]); }
Array的简化声明
Array还可以有简化的创建方式
var arr = [3, 5, 6, 8, 9];
普通数组初始化 这种数组可以看做是pinyins["人"] = "ren";的特例，也就是key为0、1、2……
字典风格的简化创建方式： var arr = {"tom":30,"jim":20};
Json对象
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。
数组、for及其他
对于数组风格的Array来说，可以使用join方法拼接为字符串
var arr = ["tom","jim","lily"];
alert(arr.join(","));//JS中join是array的方法，不像.Net中是string的方法 for循环可以像C#中的foreach一样用
for循环还可以获得一个对象所有的成员，类似于.Net中的反射
for (var e in document) { alert(e); }
有了它没有文档也可以进行开发。
var p1 = new Object();//创建一个Object对象，动态增加属性、方法 p1.Name = "tom"; p1.Age = 30; p1.SayHello = function() { alert("hello"); }; p1.SayHello(); for(var e in p1) {//对象的成员都是对象的key alert(e); }
扩展方法（*）
通过类对象的prototype设置扩展方法，下面为String对象增加quote（两边加字符）方法 String.prototype.quote = function(quotestr) { if (!quotestr) { quotestr = "\""; } return quotestr + this + quotestr; }; alert("abc".quote()); alert("abc".quote("|"));扩展方法的声明要在使用扩展方法之前执行。JS的函数没有专门的函数默认值的语法，但是可以不给参数传值，不传值的参数值就是undefined，自己做判断来给默认值。