最新日志

遮照层效果

想了想,还是发出来吧.虽然面向对象还不是很明白.



还可以把上篇文章的弹出层居中效果的制作和本例一起加个
如下:



主要代码:
copycode:
var Class = {
min_w:960,
bint: function(r) {
$(r).style.display = "block";
$(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px";
$(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px";
},
x: function(r,d) {
for (i = 1; i < r; i++) {
var c = document.createElement("div");
c.innerHTML = i;
$(d).appendChild(c);
}
},
res: function(r,wr) {
$(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px";
$(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px";
}

};


代码全自己一个弄的.如有错误请大家指正.谢谢!

弹出层居中效果的制作

问题:做一个带拖动的弹出层效果(像提示框那种)
先写了一半,明天继续奋斗:


************今天又更新一步******

点击右下角的"OPEN"




关于每一步的理解,最后解释.毕竟代码还没完全整理
被从中间扩展缓冲的效果算法难住了!

*****************OK,也不算难****************
就是让div的left和top属性随着width一起渐变就行了


javascript面向对象(二)

面向对象基础
接着上一篇继续今天的笔记:

对象

  对象是JavaScript的基础。实际上JavaScript语言中的一切都是对象,JavaScript的多数能力也正起源于此。在其最根本的层面上,对象作为属性的集合存在,差不多类似于你在其它语言中看到的哈希的概念。程序2-19展示了创建两个带有一组属性的对象的基本示例。

 程序2-19. 创建简单对象并设置其属性的两个例子

//创建一个新对象并将其存放在obj里
var obj = new Object();
//将该对象的一些属性设置成不同的值
obj.val = 5;
obj.click = function(){
alert( "hello" );
};
//下面是等效的代码,使用了{...}式缩写,
//和定义对象属性的"名称-值"对
var obj = {
//用名称-值对设置对象属性
val: 5,
click: function(){
alert( "hello" );
}
};


实际上对象就这么回事了。然而,事情变得麻烦的地方,在于新对象(尤其是那些继承其它对象属性的对象)的创建。

对象创建

  不像大多数其它面向对象的语言,JavaScript实际上并没有类的概念。在大多数其它的面向对象语言中,你可以初始化一个特定的类的实例,但是在 JavaScript中的情况这是这样。在JavaScript中,对象能够创建新的对象,对象可以从继承自其它对象。整个概念被称为"prototypal inheritance"(原型标本继承),将在"公有方法"一节中有更多论述。

   然而,重要的是,不论 JavaScript采用哪种对象方案,总归要有一个方式来创建新的对象。JavaScript的做法是,任何一个函数也都能作为一个对象被实例化。实际上,事情听起来远比它本身更令人困惑。好比有一块生面团(相当于原始的对象),用小甜饼切割器(相当于对象构造器,使用对象的原型prototype)为其成形。
  让我们看看程序2-20中这一机制的工作的实例

程序2-20. 创建并使用一个简单的对象
copycode:
//一个简单的函数,接受一个参数name,
//并将其保存于当前上下文中
function User( name ) {
this.name = name;
}
//用指定的name创建上述函数的新实例
var me = new User( "My Name" );

//我们可以看到name已经被成为对象本身的属性
alert( me.name == "My Name" );
//而且它确实是User对象的一个新实例
alert( me.constructor == User );
//那么,既然User()只是一个函数,
//当我们这么处理它的时候,发生了什么?
User( "Test" );
//因为this上下文没有被设置,它缺省地指向全局的window对象,
//这意味着window.name将等于我们提供给它的那个name
alert( window.name == "Test" );


程序2-20说明了constructor属性的使用。这个存在于每一个对象中的属性将总是指向创建该对象的那个函数。于是,你可以方便的复制该对象,创建一个新的有共同基类和不同属性的对象。示例见程序2-21.
 程序2-21. 使用constructor属性一例

copycode:
//创建一个新的、简单的User对象(函数)
function User() {}

//创建一个新的User对象
var me = new User();

//也是创建一个新的User对象(使用上前一个对象的constructor)
var you = new me.constructor();

//我们可以看到,实际上它们的constructor是同一个
alert( me.constructor == you.constructor );


公有方法

 公有方法可以完全地被对象的上下文中的最终使用者访问。为了实现这些对于特定对象的所有实例都可用的公共方法,你需要学习一个名为"prototype"的属性。prototype简单地包含一个对象,为一个父对象的所有新副本充当对基类的引用。本质上,prototype的任何属性对该对象的所每一个实例都是可用的。创建/引用的过程给了我们一个廉价版的继承,这一点我将在第三章论及。
   由于对象的prototype 也是一个对象,就跟其它任何对象一样,你可以给它附加新的属性。附加给prototype的新的属性将成为从原来的prototype对象实例化的每个对象的一部分,有效地使得该属性成为公有的(且可为全部实例所访问)。程序2-22展示一个此类例子:

  程序2-22. 带有通过prototype附加的方法的对象的例子

copycode:
//创建一个新的User的构造器
function User( name, age ){
this.name = name;
this.age = age;
}

//为prototype对象添加一个新方法
User.prototype.getName = function(){
return this.name;
};

//为prototype对象添加另一个方法
//注意此方法的上下文将是被实例化的对象
User.prototype.getAge = function(){
return this.age;
};

//实例化一个新的User对象
var user = new User( "Bob", 44 );

//我们可以看到两个方法被附加到了对象上,有着正确的上下文
alert( user.getName() == "Bob" );
alert( user.getAge() == 44 );


私有方法

私有方法和变量只能被其它的私有方法、私有变量的特权方法(下一节将会论述)访问。这是一种定义只能在内象内部访问的代码的方式。这一技术得益于 Douglas Crockford的工作。他的网站提供了大量的详述面向对象的JavaScript的工作机制和使用方法的文档:
  JavaScript文章列表:http://javascript.crockford.com/
  文章"JavaScript中的私有成员:http://javascript.crockford.com/private.html

我们来看一个私有方法可以怎样应用中的例子,如程序2-23所示.

 程序2-23. 私有方法只能被构造函数使用的示例:
copycode:
//一个表示教室的对象构造器
function Classroom( students, teacher ) {
//用来显示教室中的所有学生的私有方法
function disp() {
alert( this.names.join(", ") );
}

//课程的数据存储在公有的对象属性里
this.students = students;
this.teacher = teacher;

//调用私有方法显示错误
disp();
}

//创建一新的教室对象
var class = new Classroom( [ "John", "Bob" ], "Mr. Smith" );

//失败,因为disp不是该对象的公有方法
class.disp();

尽管很简单,私有方法却是非常重要的,它可以在保持你的代码免于冲突同时允许对你的用户可见和可用的施以更强大的控制。接下来,我们来研究特权方法。它是你的对象中可以使用的私有方法和共有方法的联合
另外还有特权方法,静态方法.请查看原文http://bbs.blueidea.com/thread-2734050-1-1.html

javascript面向对象(一)

今天看了好多关于javascript面向对象的知识.有一段是网上的载写的<精通javascript>的一部分.比较经典.
引用下.算是我今天的读书笔记吧!
学习的第一个方面:javascript的五个语言特性
第一:引用

JavaScript的一个重要的方面是引用的概念。引用就是指向对象实际位置的指针。这是一项极其强大的功能。前提是,实际的对象决不是一个引用:字符串总是一个字符串,数组总是一个数组。然而,多个变量可以引用相同的对象。JavaScript就是以这种引用引用机制为基础。通过维护一系列的指向其它对象的引用,语言为你提供了更大的弹性。

另外,对象能包括一系列的属性,这些属性简单地引用其它对象(如字符串,数字,数组等等)。当几个变量指向相同对象时,修改底层对象类型将会在所有的指点向它的变量上有所反映。例2-1即此一例,两个变量指向同一个对象,但是对对象内容的修改的反映是全局的。
程序2-1. 多变量引用单个对象的示例
//设置obj为一个空对象
var obj = new Object();

//objRef现在引用了别的对象
var objRef = obj;

//修改原始对象的属性
obj.oneProperty = true;

//我们可以发现该变化在两个变量中都可以看到
//(因为他们引用了同一个对象)
alert( obj.oneProperty === objRef.oneProperty );


我从前提到过自更改的对象在JavaScript里非常少见的。让我们看一个发生这一状况的实例。数组对象能够用push方法给它自己增加额外的项。因为在数组对象的核心,值是作为对象的属性存储的,结果类似程序2-1中的情形,一个对象成为全局被改动的(导致了多个变量的值被同时改变)。见程序2-2.

程序2-2. 自修改对象的例子

//创建一组项目的数组
var items = new Array( "one", "two", "three" );
//创建一个对项目数组的引用
var itemsRef = items;
//给原始数组添加一项
items.push( "four" );
//两个数组的长度应该相同,
//因为它们都指向相同的数组对象
alert( items.length == itemsRef.length );


记住这一点是很重要的:引用总是只指向最终被引用的对象,而不会是引用本身

第二:函数重载和类型检查

  在JavaScript的每一个函数里存在一个上下文相关的名为arguments的变量,它的行为类似于一个伪数组,包含了传给函数的所有参数。参数不是一真正的数组(意味着你不能修改它,或者调用push()方法增加新的项),但是你可以以数组的形式访问它,而且它也的确有一个length属性。程序2-5中有两个示例

程序2-5. JavaScript中函数重载的两个示例
copycode:
function sendMessage( msg, obj ) {
//如果同时提供了一个消息和一个对象
if ( arguments.length == 2 )
//就将消息发给该对象
obj.handleMsg( msg );

//否则,刚假定只有消息被提供
else
//于是显示该消息
alert( msg );
}

//调用函数,带一个参数 – 用警告框显示消息
sendMessage( "Hello, World!" );

//或者,我们也可以传入我们自己的对象用
//一种不同方式来显示信息
sendMessage( "How are you?", {
handleMsg: function( msg ) {
alert( "This is a custom message: " + msg );
}
});

//一个使用任意数目参数创建一个数组的函数
function makeArray() {
//临时数组
var arr = [];
//遍历提交的每一个参数
for ( var i = 0; i < arguments.length; i++ ) {
arr.push( arguments[i] );
}
//返回结果数组
return arr;
}


第三:作用域

作用域是JavaScript中一个较难处理的特性。所有面向对象的编程语言都有某种形式的作用域;这要看是什么上下文约束着作用域。在 JavaScript里,作用域由函数约束,而不由块约束(如while,if,和for里的语句体)。最终可能使得一些代码的运行结果表面上显得怪异 (如果你来自一种块作用域语言的话)。程序2-10的例子说明了“函数作用域代码”的含义。

代码2-10. JavaScript中变量作用域是怎样工作的例子

copycode:
//设置一个等于"test"的全局变量foo
var foo = "test";
//在if块中
if ( true ) {
//设置foo为"new test"
//注意:这仍然是在全局作用域中
var foo = "new test";
}
//正如我们在此处可见,foo现在等于"new test"
alert( foo == "new test" );
//创建一个修改变量foo的函数
function test() {
var foo = "old test";
}

//调用时,foo却驻留在是在函数的作用域里面
test();

//确认一下,foo的值仍然是"new test"
alert( foo == "new test" );


在程序2-10中你会发现,变量位于在全局作用域。基于浏览器的JavaScript有趣的一面是,所有的全局变量实际上都是window对象的属性。尽管一些老版本的Opera浏览器或Safari浏览器不是这样,假定浏览器这样工作通常是一个很好的经验规则。程序2-11展示了一个这种例子

 程序2-11. JavaScript的全局变量与window对象的例子

//全局变量,包含字符串"test"
var test = "test";

//你会发现,我们的全局变量和window的test属性是相同的
alert( window.test == test );


最后,让我们来看看当一个变量漏定义时会怎样。程序2-12里,变量foo在test()的作用域里被赋值。但是,程序2-12里实际并没有(用var foo)定义变量的作用域。当变量foo没有明确定义时,它将成为全局变量,即使它只在函数的上下文使用。

程序2-12. 隐式全局变量声明的示例

//一个为变量foo赋值的函数
function test() {
foo = "test";
}
//调用函数为foo赋值
test();
//我们发现foo现在是全局变量了
alert( window.foo == "test" );


友情推荐参考:http://www.cnblogs.com/zhengchuyu/archive/2008/07/22/1248576.html

第四个:闭包

闭包意味着内层的函数可以引用存在于包绕它的函数的变量,即使外层的函数的执行已经终止。这一特殊的论题可能是非常强大又非常复杂的。我强烈推荐你们参考本节后面将提及的站点,因为它有一些关于闭包这一话题的精彩的信息。
我们先来看程序2-13所示的闭包的两个简单例子。 
   程序2-13. 闭包改善的代码清晰性的两例

copycode:
//得到id为"main"的元素
var obj = document.getElementById("main");

//改变它的边框样式
obj.style.border = "1px solid red";

//初始化一个1秒钟以后被调用的回调函数
setTimeout(function(){
//此函数将隐藏该元素
obj.style.display = 'none';
}, 1000);

//用来延迟显示消息的通用函数
function delayedAlert( msg, time ) {
//初始化一个被封套的函数
setTimeout(function(){
//此函数使用了来自封套它的函数的变量msg
alert( msg );
}, time );
}

//调用函数delayedAlert,带两个参数
delayedAlert( "Welcome!", 2000 );


第一个对setTimeout的函数调用,展示了一个的JavaScript新手遇到问题的通俗的例子。在JavaScript新手的程序里像这样的代码时常可以看到:

copycode:
setTimeout("otherFunction()", 1000);
//或者甚至
setTimeout("otherFunction(" + num + "," + num2 + ")", 1000);


使用闭包的概念,完全可能的把这种混乱的代码清理掉。第一个例子很简单;有一个回调函数在调用setTimeout函数以后1000微秒以后被调用,而它仍引用了变量obj(定义在全局范围,指向id为"main"的元素)。定义的第二个函数,delayedAlert,展示了一种解决出现的 setTimeout混乱的方案,以及函数作用域内可以有闭包的能力。

  你们应该可以发现,当在代码中使用这种简单的闭包时,你所写的东西的清晰性将会提高,免于陷入语法的迷雾之中。

copycode:
//id为"main"的一个元素
var obj = document.getElementById("main");

//用来绑定的items数组
var items = [ "click", "keypress" ];

//遍历items中的每一项
for ( var i = 0; i < items.length; i++ ) {
//用自执行的匿名函数来激发作用域
(function(){
//在些作用域内存储值
var item = items[i];
//为obj元素绑定函数
obj[ "on" + item ] = function() {
//item引用一个父级的变量,
//该变量在此for循环的上文中已被成功地scoped(?)
alert( "Thanks for your " + item );
};
})();
}


第五:上下文

在JavaScript中,你的代码将总是有着某种形式的上下文(代码在其内部工作的对象)。这也是其它面向对象语言所共有的功能,但它们都不如JavaScript处理得这样极端。
  
上下文是通过变量this工作。变量this总是引用代码当前所在的那个对象。记住全局对象实际上是window对象的属性。这意味着即使是在全局上下文里,this变量仍然引用一个对象。上下文可以成为一个强大的工具,是面向对象代码不可或缺的一环。

程序2-17展示了一些关于上下文的简单例子。

copycode:
var obj = {
yes: function(){
// this == obj
this.val = true;
},
no: function(){
this.val = false;
}
};
//我们看到,obj对象没有"val"的属性
alert( obj.val == null );
//我们运行yes函数,它将改变附着在obj对象的val属性
obj.yes();
alert( obj.val == true );
//然而,我们现在让window.no指向obj.no方法,并运行之
window.no = obj.no;
window.no();
//这导致obj对象保持不变(上下文则切换到了window对象)
alert( obj.val == true );
//而window的val属性被更新
alert( window.val == false );


你可能已经注意到,在程序2-17中,当我们切换obj.no方法的上下文到变量window时,笨重的代码需要切换函数的上下文。幸运的是,JavaScript提供了两种方法使这一过程变得更加易于理解和实现。程序2-18展示了恰能些目的的两种不同方法,call和apply。

程序2-18. 改变函数上下文的示例

copycode:
//一个简单的设置其上下文的颜色风格的函数
function changeColor( color ) {
this.style.color = color;
}

//在window对象上调用这个函数将会出错,因为window没有style对象
changeColor( "white" );

//得到一个id为"main"的对象
var main = document.getElementById("main");

//用call方法改变它的颜色为黑
//call方法将第一个参数设置为上下文,
//并其它所有参数传递给函数
changeColor.call( main, "black" );

//一个设置body元素的颜色的函数
function setBodyColor() {
//apply方法设置上下文为body元素
//第一个参数为设置的上下文,
//第二个参数是一个被作为参数传递给函数的数组
// of arguments that gets passed to the function
changeColor.apply( document.body, arguments );
}

//设置body元素的颜色为黑
setBodyColor( "black" );


http://www.blueidea.com/tech/web/2007/4618.asp

Arguments对象


Arguments对象是一个集合,可以按照数字下标获取传递给函数的参数值.
例如:arguments.length可以获得传递过来的实参数量.

看书时发现对|arguments还是不太了解.于是搜索了一下相关.发现下面的这篇文章还比较通俗点:
http://www.xiaoxiaozi.com/2009/06/10/827/

在javascript函数体内,标识符arguments具有特殊含义。它是调用对象的一个特殊属性,用来引用Arguments对象。Arugments对象就像数组,注意这里只是像并不是。

javascript函数体内,arguments像数组(并不是真的数组,是一个Arguments对象,再次强调)一样,有length属性,可以代表传给函数的参数的个数.引用一个形式参数可以用参数名,也可以用arguments[]数组形式,其中arguments[0]表示第一个参数。
arguments.length属性:

js不会主动为你判断你到底给函数传了多少个参数,如果你多传了,多余的部分就没有被使用,如果你少传了,那么没传的参数值就是undefined,所以我们可以借助arguments的length属性来检测调用函数时是否使用了正确数目的实际参数,因为javascript是不会为你做这些事的



arguments还为我们提供了这样一种可能,就是为一个函数传任意数目的实际参数:
比如说,我想判断你传给我的一些数字的大小,取出最大的那个,对,没错,你传多少参数都行,但是前提是你要传数字,因为我在函数内部懒得判断了.
copycode:
function max()
{
//根据我上一篇日志,这已经是JavaScript内最小的数字了
var m = Number.NEGATIVE_INFINITY;
for(var i = 0; i < arguments.length; i++)
{
//只要有任何一个参数比m大,那么m就变成了这个参数的值
if(arguments[i] > m)
m = arguments[i];
}
return m;
}

说明一下arguments与真正传的形式参数是一致的:
比如,你给函数传了一个叫param的参数,并且只有这一个参数,那么param与arguments[0]都是对这个参数值的引用,改变其中一个值,即改变了二者所有的值.


简单的函数应用:
copycode:
<script type="text/javascript">
//用函数直接量,采用arguments.callee属性实现递归函数
document.write((function(x){if(x<=1) return 1;return x*arguments.callee(x-1);})(10));
</script>

小小子写的另一篇也不错:javascript 函数的方法call()和apply()