1

Javascript 进阶

作者:Longbill
网页模板: http://slides.html5rocks.com/
请使用Chrome浏览器。
左右箭头或鼠标滚轮翻页

JS 比你想象中强大

Javascript可以

在浏览器环境里:

  • 操作网页上的各种元素(DOM)

    包括新增/删除/修改/移动等

  • 响应用户/浏览器事件

    例如鼠标点击/鼠标移动等

  • 与服务端交互数据

    例如XMLHttpRequest(AJAX)

  • 在用户端存储数据

    Cookie/本地数据库等

  • 甚至

    制作动画/PPT/游戏，窃取用户数据等等
在其他环境里:

  • 像PHP等语言一样在服务器上运行

    Server Side Javascript 例如 NodeJS 等

  • 制作桌面软件或Widget等

    例如Firefox浏览器，Adobe Air软件等

在网页中插入Javascript

  • 在HTML的head或者body区域插入<script>标签

    <html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

  • 或者引用外部代码

    <html>
<body>
<script type="text/javascript" src="http://php.js.cn/somejs.js"></script>
</body>
</html>

    这两种方式插入的代码都会在浏览器解析（或者叫运行）到该标签的时候被执行。

注意

  1. document.write 方法只能在浏览器的文档流（解析生成页面的过程）中使用。一旦浏览器处理完成了一个网页之后，再使用document.write，就会导致浏览器新打开一个文档流，结果是整个网页变白。
  2. <script>标签是有执行顺序的。引用外部的JS文件会导致文档流阻塞，浏览器会等到外部JS文件加载并执行完成之后才会继续处理后面的东西。 所以一些基础的js文件（比如jquery.js）适合放在<head>部分加载。 而一些无关紧要的东西（比如统计代码等）则适合放到<body>的最后面(比如</body>前面)加载。
  3. 在文档流结束前，最好不要用Javascript操作DOM元素。 因为这样做有很多不确定性，而且在可恶的IE浏览器下面会有神奇的BUG。
  4. 文档流结束后，加载图片/flash等资源，所有资源加载完后才触发window.onload事件。所以真实环境下，我们经常用JQeury、YUI等类库来模拟document.onready事件（也就是文档流关闭的事件）。

其他地方的Javascript

  • URL地址/浏览器地址栏里也可以出现JS

    <a href="javascript:alert(1);">click</a> click
    URL里的JS被执行的时候，上下文环境(context)是window

  • HTML标签的事件属性

    <input type="button" onclick="alert(this.tagName);" value="戳我" />
    写到属性里面的JS执行时候的上下文环境是对应的DOM。所以以上alert的this.tagName为input元素的标签名。
  • 经验：用<a href="javascript:;"... 来代替 <a href="#" ...要好很多
变量

变量的声明

  • var some1;

  • var some1="a";

  • var some1="a",some2="b";

  • var arr=[],obj={}; //不建议使用arr=new Array()等方式。

  • var myFunc=function(){ return true; }; //函数也是一个变量

  • Javascript里面的变量如果没有事先声明，直接用也是可以的。 但是局部变量必须用var声明。所以我们应该养成每个变量都有一个明确的var声明。
  • 全局变量是魔鬼！ 应该尽量少使用全局变量。

函数的声明

foo();
function foo()
{
	alert('foo');
}
goo();
var goo = function()
{
	alert('goo');
}

(function()
{
	alert('bar');
})();

在同一个<script>标签内的 function xxx(...){ ... } 声明是会被提前的。所以上面的foo函数会被执行。但是goo不会。

变量作用域

变量的作用域是在函数定义的时候就决定的，而不是在函数执行的时候!

function foo()
{
	var name = 'Longbill';
	return function()
	{
		alert(name);
	}
}
var a = foo();
var name = 'Leon';
a();

以上代码会弹出"Longbill" 而不是 "Leon"!
如果你能明白这个，那你已经基本了解了JS最深奥的概念之一──“闭包”

对象 Object

var obj = {};
obj.a = 'a';
obj.b = function()
{
	alert('b');
};
obj[0] = 'Longbill';
obj[1] = 'Leon';
obj.length = 2;
obj["a"] = 'aaa';

万物皆对象。

下期：JS中的“类”、浏览器兼容性等。
2010-11-02
优米网
http://php.js.cn