Macji Pro²⁰¹⁰

Mike West说：

Scope is one of the foundational aspects of the JavaScript language, and probably the one I’ve struggled with the most when building complex programs. I can’t count the number of times I’ve lost track of what the this keyword refers to after passing control around from function to function, and I’ve often found myself contorting my code in all sorts of confusing ways, trying to retain some semblance of sanity in my understanding of which variables were accessible where.

要学会JavaScript，必须得先去理解它的作用域是怎样的。

没有块级作用域

JavaScript变量的作用域只有全局和局部作用域。全局作用域是定义在JavaScript中（非函数体内），可以在任何地方改变它的值，这是非常危险的。局部作用域是定义在函数体内的，它的作用域是该函数的范围。外界不能访问他，只允许函数内部访问。JavaScript的变量没有块级作用域。

var g = "G";

function F() {
    alert(g); //显示G
    if ( true ) {
        var num = 10;
    }
    alert(num); //显示10
}

F();
alert(num + "1");//显示错误，num没有定义

我们再看一个例子

var p = "G";
function F2() {
    alert(p);//undefined
    var p = "L";
    alert(p);//L
}
F2();

为什么会这样呢？我们看一张图(画不好图-_-!)。这就它查找变量的方式。

function F4() {
    var a = 10;
    function F5() {
        return a;
    }
    alert(F5());//10
}
F4();

继续

废话不多说,先给出CSS

body{margin:100px 0}
.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block}
div#nav{height:70px; background:url(img/nav_bg.png) repeat-x}
div#nav ul{width:960px; margin:0 auto; list-style:none}
div#nav ul li{float:left; height:35px; overflow:hidden; padding:0 2px 0 0; font: bold 12px/35px Arial; background:url(img/nav_right.png) repeat-y right 0}
div#nav ul li a{float:left; height:100%; padding:0 20px; background:url(img/nav_sub.png) repeat-x; color:#fff; text-decoration:none}
div#nav ul li a.hover{clear:both; background-position:0 -35px}
div#nav ul li.on a{background-position:0 -35px}
div#nav ul li.nobg{background:none}

html

<div id="nav">
<ul class="clear">
<li class="on"><a href="javascript:;" mce_href="javascript:;">首页</a></li>
<li><a href="javascript:;" mce_href="javascript:;">麦鸡</a></li>

<li><a href="javascript:;" mce_href="javascript:;">麦鸡</a></li>
<li><a href="javascript:;" mce_href="javascript:;">麦鸡</a></li>
<li><a href="javascript:;" mce_href="javascript:;">MacJi</a></li>

<li><a href="javascript:;" mce_href="javascript:;">麦鸡</a></li>
<li><a href="javascript:;" mce_href="javascript:;">麦鸡</a></li>
<li class="nobg"><a href="http://www.macji.com" mce_href="http://www.macji.com">麦鸡的博客</a></li>

</ul>
</div>

JavaScript

function nav(c, config){
  this.config = config || {speed: 10, num: 2};
  this.container = (typeof(c)=="object") ? c : document.getElementById(c);
  this.lineHeight = this.container.offsetHeight;
  this.scrollTimeId = null;
  var _this = this;  

  this.__construct = function (){
    var inner,el,href;
    inner = _this.container.childNodes[0].innerHTML;
    href = _this.container.childNodes[0].href;
    el = document.createElement("a");
    el.innerHTML = inner;
    el.href = href;
    el.className = 'hover';
    _this.container.appendChild(el);  

    //注册事件
    _this.container.onmouseover = function (){_this.start()};
    _this.container.onmouseout  = function (){_this.end()};
  }();  

  this.start = function (){
    _this.clear();
    _this.scrollTimeId = setTimeout(function(){_this.scrollUp();}, _this.config.speed);
  };  

  this.end = function (){
    _this.clear();
    _this.scrollTimeId = setTimeout(function(){_this.scrollDown();}, _this.config.speed);
  };  

  this.scrollUp = function (){
    var c = _this.container;  

    if(c.scrollTop >= _this.lineHeight){c.scrollTop = _this.lineHeight;return;}
    c.scrollTop += _this.config.num;
    _this.scrollTimeId = setTimeout(function(){_this.scrollUp();}, _this.config.speed);
  };  

  this.scrollDown = function (){
    var c = _this.container;  

    if(c.scrollTop <= 0){c.scrollTop = 0;return;}
    c.scrollTop -= _this.config.num;
    _this.scrollTimeId = setTimeout(function(){_this.scrollDown();}, _this.config.speed);
  };  

  this.clear = function (){clearTimeout(_this.scrollTimeId)};
}

调用方法

(function(){
  var container = document.getElementById('nav');
  var el_li = container.getElementsByTagName('li');
  var arr = [];
  for( var i = 0; i < el_li.length; i++){
    //如果不是当前页面(className  == 'on')就实例化
    if(el_li[i].className == 'on') continue;
    arr[i] = new nav(el_li[i], {speed: 10, num: 4});
  }
})();

查看效果

google是个大公司,全世界都有google的脚印,韩国的google动画效果非常不错,蓝色理想论坛里已经有人挖过来了,可惜js写的太多了,那自己写一个吧?好,就这么干!

原理

小时候,总喜欢看动画片吧,动画片是怎样实现的呢?记得妈妈说是一张画一张画切换过去(啊?那一部葫芦兄弟要画多少副画啊? -_-! ),其实我们现在做的也是这样,用一个图片,这个图片里有很多个小图,来显示动画轨迹.按时间来移动图片,那图片不是会动了啊?(不知道,表达清楚了没…语文很重要啊!!)

准备

我们需要一张图片,一个大脑,一张会笑的脸(不笑效果就出不来了….)!!下面是我准备的图片(ps水平有限^_^)…

代码

我们看到上面的图片,想象下,它动起来是多么的优美啊…

css

.Gnb_btn_div{
	width:90px;
	height:75px;
	overflow:hidden;
	display:block;
	position:absolute;
}     

.Gnb_btn_img{
	width:100%;
	height:525px;
	display:block;
	overflow:hidden;
	text-indent:-500px;
}
#gnb_btn_01 .Gnb_btn_img {
	background-image:url(http://www.wler.cn/blog/img/friend.gif)
}

javascript

<script type="text/javascript">
// <![CDATA[
function GNB(_7c){
	//初始化一些参数
	this.iImgNum=7;			//小图片个数
	this.iImgHeight=75;		//小图片高度
	this.iOverSpeed=50;		//鼠标经过时候切换的时间
	this.iOutSpeed=50;		//鼠标离开时候切换的时间
	this.eventObj=_7c;		//取得图片对象     

	this.MouseOverFlag=false;
	this.imageIndex=0;
	if(this.eventObj==null){return;}
	this.eventObj.parentClass=this;this.eventAssign();
}     

GNB.prototype.eventAssign=function(){//注册事件
	this.eventObj.onmouseover=this.menuMouseOver;
	this.eventObj.onmouseout=this.menuMouseOut;
};     

GNB.prototype.menuMouseOver=function(){//鼠标经过
	if(this.parentClass.MouseOverFlag!=false){return;}
	this.parentClass.MouseOverFlag=true;
	this.parentClass.clearTimeOut();
	this.parentClass.menuMouseOverTimer();
};     

GNB.prototype.menuMouseOut=function(){//鼠标离开
	this.parentClass.MouseOverFlag=false;
	this.parentClass.clearTimeOut();
	this.parentClass.menuMouseOutTimer();
};     

GNB.prototype.menuMouseOverTimer=function(){//经过图片位置递增
	var _7d=this;
	if(this.imageIndex>=this.iImgNum){return;}
	this.eventObj.scrollTop=this.imageIndex*this.iImgHeight;
	this.imageIndex++;
	this.setTimerID=setTimeout(function(){_7d.menuMouseOverTimer();},this.iOverSpeed);
};     

GNB.prototype.menuMouseOutTimer=function(){////经过图片位置递减
	var _7e=this;if(this.imageIndex<0){return;}
	this.eventObj.scrollTop=this.imageIndex*this.iImgHeight;
	this.imageIndex--;
	this.setTimerID=setTimeout(function(){_7e.menuMouseOutTimer();},this.iOutSpeed);
};     

GNB.prototype.clearTimeOut=function(){//取消定时
	clearTimeout(this.setTimerID);
};
// ]]>
</script>

xhtml

<div class="Gnb_btn_div" id="gnb_btn_01">

<a class="Gnb_btn_img" href="#1" mce_href="#1">找朋友</a>
</div>     

<script type="text/javascript">
// <![CDATA[
var GNB1=new GNB(document.getElementById("gnb_btn_01"));//实例单个按钮,当然也可以多个
// ]]>
</script>

演示

Web 标准使您能通过最少的工作，生成可被最广大受众访问的 Web 站点。Web 标准的承诺是：只需设计页面一次，即可让该页以完全相同的方式在任何现代的浏览器中显示和工作。例如，在按照标准生成以后，旨在在 Microsoft Internet Explorer 中以某种方式显示的页可在其他浏览器（如，Mozilla Firefox、Netscape Navigator、Opera、Camino 和 Safari）中以相同的方式显示，而无需完成任何额外的工作。

Web 标准的一个额外好处是 — 使 Web 站点更易于为残疾人士访问。这是一个范围广泛的受众群体，包括视力衰退的中年人士，刚刚在滑雪时跌断胳膊的人士，以及完全失明的人士等。使用标准可避免无意中阻止那些具有暂时性或永久性身体残疾的人士访问 Web 页。

生成 XHTML Web 站点

HTML 在正式的场合已经过时了。World Wide Web Consortium (W3C) 于 2000 年 6 月 26 日发布了 XHTML 的第一个版本作为推荐标准。XHTML 标准的目标是取代 HTML。按照 W3C 的说法，“XHTML 是 HTML 的继承者”(http://www.w3.org/MarkUp/)。

XHTML 标准的制定者具有两大目标：

• 在文档结构和表示形式之间创建更明显的分离。
• 将 HTML 重新表示为 XML 的应用程序。

为了实现第一个目标，W3C 一直在坚定地从 HTML 中删除纯粹描述性的元素和属性（他们是从 HTML 4.0 开始这一过程的）。例如，XHTML 1.0 Strict 不包含诸如 <font> 标记之类的元素或诸如 bgcolor 属性之类的属性，因为这些元素和属性完全用于描述文档的外观，它们与文档的结构没有任何关系。

W3C 一直在努力使 Web 站点设计人员和开发人员摒弃特定标记应当具有特定外观这一观念。例如，您可能会认为 <h1> 标记（标题标记）的用途是在页中呈现大的加粗文本。这实际上是错的。<h1> 标记用来在文档中标记标题而不是其他任何东西。如何呈现标题标记由浏览器确定。视力衰退的人士使用的屏幕阅读器可能利用抑扬顿挫的声音来大声朗读标题标记的内容。不支持多个字体大小的 PDA 可能用闪烁文本呈现标题标记的内容。

您不应当试图使用诸如 <h1> 标记之类的页元素来控制 Web 页的外观。相反，您应当通过使用层叠样式表来指示 Web 页的外观。而且，您所使用的层叠样式表应当是外部 层叠样式表。请使用标记和属性来标记文档的结构，而使用样式表来控制文档的表示形式。

XHTML 的第二个目标是迫使 HTML 开发人员遵守更为严格的 XML 规则。按照 W3C 的说法，“XHTML 1.0 是 HTML 4.01 的作为 XML 1.0 应用程序的修订”(http://www.w3.org/MarkUp/)。换句话说，使用 XHTML 生成 Web 页时，实际上是在创建 XML 文档。

XML 文档具有比 HTML 文档更严格的语法。例如，XML 区分大小写，所有 XML 属性都必须放在引号内，而且 XML 标记不能重叠。强迫 Web 站点开发人员和设计人员遵守有更高要求的语言规则有很多好处。

好处之一，用 XHTML 标记编写的页具有更高的跨浏览器、跨设备和跨操作系统兼容性。如果在浏览器中打开传统的 HTML 页，浏览器将千方百计地呈现该页。浏览器将试图呈现该页，即使您的 HTML 一团糟。例如，Internet Explorer（以及 Firefox 和 Opera）能够很好地显示下面的 HTML 页。

<i><B>this is bold and italic</I> and this is bold </body></HTML>

Internet Explorer 会恰当地显示该页 — 即使该页缺少 <html> 和 <body> 开始标记，<b> 标记不具有匹配的结束标记，并且开始和结束 <i> 标记的大小写不一致。所有主要的浏览器都能适应几乎任何 HTML 标记“混合物”，并且不顾一切地呈现一些内容。

浏览器的这种适应行为是危险的，因为不同的浏览器（或相同浏览器的将来版本，或在不同操作系统上运行的相同浏览器）可能以不同方式呈现错乱的 HTML。实际上，对于最新版本的 Internet Explorer、Mozilla Firefox 和 Opera 而言，它们呈现无效 HTML 的方式惊人地一致。但是，一旦开始违反游戏规则，就不会得到任何保证。

然而，如果用 XHTML 的更严格的规则编写 Web 页，那么 Web 页就更有可能以一致的方式与当前浏览器协作，并且它们将继续与当前浏览器的未来新版本协作。对于任何公司而言，几乎都不具备针对每个浏览器、在每个操作系统和每个设备上测试其 Web 站点的资源。如果按照 Web 标准编写页面，那么就不必具有这样的资源。

XHTML 标准的版本

有三个版本的 XHTML 1.0，它们分别对应三个版本的 HTML 4.01：

• XHTML 1.0 Transitional
• XHTML 1.0 Strict
• XHTML 1.0 Frameset

XHTML 1.0 Transitional 包含 HTML 4.01 Transitional 中的全部标记和属性。引入 XHTML 1.0 Transitional 标准的目的是，使现有 HTML 设计人员和开发人员无需经历太多的痛苦就能迁移到 XHTML。

XHTML 1.0 Strict 与 XHTML 1.0 Transitional 的不同之处在于，它在文档结构和表示形式之间实施了一种更为明显的分离。与 XHTML 1.0 Transitional 不同，XHTML 1.0 Strict 强迫您使用层叠样式表来控制页的外观。

XHTML 1.0 Frameset 文档意在成为使用 <frameset> 标记将浏览器划分为多个框架的文档（XHTML 1.0 Transitional 和 Strict 页不能包含 <frameset> 标记）。

W3C 还发布了 XHTML 1.1 以作为推荐标准（2001 年 5 月 31 日）。XHTML 1.1 非常类似于 XHTML 1.0 Strict。二者的主要区别在于，可以用附加模块扩展 XHTML 1.1 以便支持新元素。例如，可以生成特定的 XHTML 1.1 页，该页还包含 MathML（数学标记语言）、SVG（可伸缩向量语言）或创建的自定义模块中的元素。

最后，W3C 正在制订 XHTML 2.0 推荐标准。因为 XHTML 2.0 仍然处于起草阶段，并且当前没有 Web 浏览器支持该标准，所以我们不在本文讨论它。

创建 XHTML 页

与 HTML 页不同，XHTML 页必须是标准格式且有效的 XML 文档。XHTML 1.0 推荐标准的第 4 部分对 HTML 和 XHTML 之间的区别进行了总结。这里给出生成有效 XHTML 页的最重要需求的列表：

• 页必须包含有效的 XHTML DOCTYPE。
  

  有效的 XHTML 页必须在其任何内容之前包含一个 XHTML DOCTYPE。当在 Visual Studio .NET 2005 或 Microsoft Visual Web Developer 中创建新的 ASP.NET 页时，该页中将自动包含 XHTML 1.0 Transitional 的正确的 DOCTYPE。下面列出四个标准的 XHTML DOCTYPE：

  
  

  XHTML 1.0 Transitional

  
  

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  
  

  XHTML 1.0 Strict

  
  

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  
  

  XHTML 1.0 Frameset

  
  
  

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

  
  

  XHTML 1.1

  
  

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  
  

  向页中添加 DOCTYPE 会影响该页在浏览器中的呈现方式。请参阅以下标题为“XHTML 和 DOCTYPE 切换”的一节。

• 根元素必须引用 XHTML 命名空间。
  

  XHTML 页的开始 <html> 标记必须指定默认命名空间 http://www.w3.org/1999/xhtml。以下是 XHTML 1.0 Transitional 页的有效开始 <html> 标记的示例：

  
  
  

  <html  xml:lang="en" lang="en">

• 所有元素和属性名都必须小写。
  

  XML 区分大小写。因此，在 <p> 标记和 <P> 标记之间存在差异。只有前者是有效的 XHTML 段落标记。

• 属性值必须始终放在引号内。
  

  确保始终将属性值放在双引号或单引号中。例如，以下是无效的 XHTML。

  
  

  <a href=SomePage.aspx>Next</a>

  
  
  

  在该示例中，href 属性缺少引号。以下代码是有效的 XHTML。

  
  

  <a href="SomePage.aspx" mce_href="SomePage.aspx">Next</a>

  
  

  您可以通过选择菜单选项 Tools、Options、Format，将 Visual Studio .NET 2005 和 Visual Web Developer 配置为自动将属性值放在引号内。

• 所有具有开始标记的非空元素都必须具有匹配的结束标记。
  

  如果具有开始 <p> 标记，则必须包含结束 </p> 标记来标记段落的结束。对于根本不包含任何内容的标记，例如 <br> 标记，可同时提供开始和结束标记 <br></br>，也可以使用空元素简写

  
  

  。

  
  
  

  为使 XHTML 页与现有的 HTML 浏览器向后兼容，需要小心处理打开和关闭标记的方式。例如，现有 HTML 浏览器倾向于将开始和结束 <br> </br> 标记错误地解释为两个 <br> 元素。因此，您应当使用空元素简写</br>。

  
  

  此外，除非您小心地在结束斜杠之前添加一个空格，否则现有 HTML 浏览器在处理空元素简写时会出现问题。因此，应当使用 <BR< b>[space] />（而不是）向页中添加 <br> 元素。

• 不得存在重叠标记。
  

  可以使标记嵌套，但是不允许使标记重叠。例如，以下 XHTML 是有效的。

  
  

  <b><i>This is bold and italic</i></b>

  
  

  但是，以下 XHTML 是无效的。

  
  

  <i><b>This is bold and italic</i></b>

• 不得存在属性最简化。
  

  所有属性都必须具有值，即使该值看起来有一点儿奇怪。例如，标记<input type=”checkbox” checked />是无效的 XHTML，因为 checked 属性不具有值。该标记应当写成<input type=”checkbox” checked=”checked” />。

• 必须使用 id 属性而不是 name 属性。
  

  在 HTML 中，可以使用 name 属性来标识 <a>、<applet>、<form>、<frame>、<iframe>、<img> 和 <map> 元素。尽管可以使用 name 属性生成 XHTML 1.0 Transitional 页，但在 XHTML 1.0 Strict 和 XHTML 1.1 标准中已经将 name 属性删除。您应当改而使用 id 属性来标识这些元素。

• 必须将 <script> 和 <style> 元素的内容包装到 CDATA 节中。
  

  如果在脚本或样式表中使用特殊字符（例如 < 或 &）或实体引用（例如 < 或 &），则需要将脚本或样式表的内容标记为 CDATA（字符数据）节，如下所示。

  
  

  <script type="text/javascript"> <![CDATA[ function isLess(a, b) {     if (a < b) return true; } ]]> </script>

  
  
  

  使用 CDATA 节并非对所有浏览器都有效。例如，Internet Explorer 会将 <script> 标记中的 CDATA 节视为语法错误。可以通过添加 JavaScript 注释避免该问题，如下所示。

  
  

  <script type="text/javascript"> /* <![CDATA[ */ function isLess(a, b) {     if (a < b) return true; } /* ]]> */ </script>

  
  

  JavaScript 使用 /* 和 */ 来标志注释的开始和结束。因此，CDATA 节对 JavaScript 隐藏，但不对分析该页的浏览器隐藏。总之，较好的做法是将样式规则和脚本放在外部文件中，而从 XHTML 页中引用这些文件。通过使用外部样式表和脚本，能够避免上述所有问题。

XHTML 和 DOCTYPE 切换

为 Web页指定 DOCTYPE 会影响浏览器呈现页的方式。Internet Explorer、Mozilla Firefox 和 Opera 全都支持一种名为“DOCTYPE 切换”（也叫“DOCTYPE 嗅探”）的功能。

引入 DOCTYPE 切换的目的是使浏览器能够正确地呈现符合标准的 Web 站点以及旧式 Web 站点。大多数 Web 站点被开发为呈现 HTML 页而不是 XHTML 页。浏览器通过判断是否存在 DOCTYPE 来确定何时应该使用标准来呈现页。

Internet Explorer 6+ 支持两种呈现模式，分别叫做 Quirks 模式和 Standards 模式。当 Internet Explorer 呈现包含有效 XHTML（或 HTML 4.0）DOCTYPE 的页时，它会以 Standards 模式呈现该页；否则，它会以 Quirks模式呈现该页（有关详细信息，请参阅 CSS Enhancements in Internet Explorer 6）。

Opera 浏览器 (Opera 7+) 支持与 Internet Explorer 相同的两种呈现模式：Quirks 和 Standards（有关详细信息，请参阅 http://www.opera.com/docs/specs/doctype/）。

Mozilla Firefox 1+ 支持三种呈现模式：Quirks 模式、Almost Standards 模式和 Standards 模式。Firefox 的 Almost Standards 模式对应于 Internet Explorer 和 Opera 的 Standards 模式。当页包含有效的 XHTML 1.0 Transitional DOCTYPE（并且该页被分配为 text/html MIME 类型）时，Firefox 会以 Almost Standards 模式呈现该页。当页包含 XHTML 1.0 Strict 或 XHTML 1.1 DOCTYPE（或者该页被分配为 XML MIME 类型）时，该页将以 Standards 模式呈现（有关详细信息，请参阅 http://www.mozilla.org/docs/web-developer/quirks/doctypes.html）。

可以通过临时向页中添加以下客户端脚本（该脚本在最新版本的 Internet Explorer、Firefox 和 Opera 中有效）确定浏览器的当前呈现模式。

<script type="text/javascript"> alert( document.compatMode ); </script>

您需要关心浏览器的呈现模式，因为它会影响将层叠样式表应用于该页的方式。如果将现有 HTML 页转换为 XHTML 页，那么在浏览器中打开它们时，它们可能看起来非常不同。

例如，Internet Explorer 以不同方式计算页元素的大小，这取决于呈现模式（它使用不同的 CSS Box Model）。在 Quirks 模式下，元素的宽度是通过将元素的内容、内边距、边框和边距相加而计算得到的。在 Standards 模式下，元素的宽度是只考虑元素内容的宽度而计算得到的。