小小子，simaopig http://www.xiaoxiaozi.com Say you say me ,say we together~~ Wed, 10 Mar 2010 10:42:17 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 30 买了一本书，学习CSS http://www.xiaoxiaozi.com/2010/03/10/1725/ http://www.xiaoxiaozi.com/2010/03/10/1725/#comments Wed, 10 Mar 2010 10:42:17 +0000 simaopig http://www.xiaoxiaozi.com/2010/03/10/1725/ 搞WEB开发，不会CSS实在有些说不过去。自己又太过懒散，惰性十足，指着自己头脑发热去学点啥东西简直是太困难了。何况读英文又实在不舒服（主要是不会啊，要不真能省一笔钱）。

经同事推荐，敲定了《CSS实战精粹》这本，希望自己可以坚持下去吧。哈。http://www.douban.com/subject/3008594/

相关文章

]]> http://www.xiaoxiaozi.com/2010/03/10/1725/feed/ 7 监控宝 用户访问速度跟踪 http://www.xiaoxiaozi.com/2010/03/05/1722/ http://www.xiaoxiaozi.com/2010/03/05/1722/#comments Fri, 05 Mar 2010 07:44:06 +0000 simaopig http://www.xiaoxiaozi.com/2010/03/05/1722/ 在爱胡扯的网站上发现这么一个好玩的站点：监控宝，提供很多功能，而且貌似现在是免费的。

功能包括有：服务器监控，网站可用率监控，及用户访问速度跟踪等。我最关心的就是用户访问速度跟踪。

监控宝

小小子已经把这玩意用上了，希望路过的，打酱油的兄弟姐妹们，闲来无事可以帮点一下，我也统计一下本站的访问速度。呵呵。当然了，如果您还有时间有兴趣帮我点两下广告就更感谢啦，哈。

点击方法很简单，点击页面下部的“监控宝”图标即可~~

点击地址

点击结果展示：
结果展示

PS:本文非软文，纯推荐

火烧网经典评论(无经，无典)


　　

相关文章

]]> http://www.xiaoxiaozi.com/2010/03/05/1722/feed/ 13 JavaScript 传递参数是值传递？还是值传递啊？ http://www.xiaoxiaozi.com/2010/03/05/1719/ http://www.xiaoxiaozi.com/2010/03/05/1719/#comments Fri, 05 Mar 2010 06:46:20 +0000 simaopig http://www.xiaoxiaozi.com/2010/03/05/1719/ 本文摘自：李松峰老师 翻译的 《JavaScript 高级程序设计 第二版》

在本文开头，首先，十万以及万分肯定的说一句，JavaScript 函数传递参数时，是值传递。虽然您可能不信，因为ECMAScript 变量可能包含两种不同数据类型的值：基本数据类型，和引用数据类型。难道引用数据类型传递的时候难道也是值传递吗？答，没错。

引用类型的值是什么东西

当一个变量向另一个变量复制引用类型的值时，会将存储在栈中的值（栈中存放的值是对应堆中的引用地址）复制一份到为新变量分配的空间中。

不同的是，这个值的副本其实是一个指针，而这个指针指向存储在堆中的一个对象。复制操作结束后，两个变量实际上引用同一个对象。

var user = new Object();

var admin = user;

admin.name = "xiaoxiaozi";

alert(user.name); //返回 xiaoxiaozi

该过程其实是这样的：

引用型变量的复制

引用型变量的复制

所以说，引用类型的值实际上是对其引用对象的一个指针。

传递的参数

基本类型我们不做讨论，那玩意除了值还真没别的。咱们继续来说引用类型。请看下面试例：

function setName(obj){
        obj.name = "xiaoxiaozi";
}

var person = new Object();
setName(person);

alert(person.name); // 返回 xiaoxiaozi

在向参数传递引用类型值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反映在函数的外部。

ECMAScript 中，所有函数的参数都是按值来传递的。基本类型值的传递和基本类型变量复制一致（采用在栈内新建值），引用类型值的传递和引用类型变量的复制一致（栈内存放的是指针，指向堆中同一对象）

因此在调用函数setName()时，person 被复制给了 obj ，因此在函数内部 obj 与 person 引用的是同一个对象，或者说是对同一个对象的引用。所以在给 obj 引用对象加上 name 属性时，person 引用的对象也有了 name 属性，因为虽然 obj 与 person 不同，但是二者引用的对象是同一个。

但是，千万不要认为，在局部作用域中修改的对象会在全局作用域中反映出来就说参数是按引用传递的。为了证明是值传递，让我们再来看如下例子：

function setName(obj){
     obj.name = "xiaoxiaozi";
     obj = new Object();
     obj.name = "admin";
}
var person = new Object();
setName(person);
alert(person.name); // 结果依旧是 xiaoxiaozi

在调用 setName() 函数初时，obj 与 person 引用的是同一对象，所以首次的 name 属性赋值会对 person 有所影响。但是当 obj 被重新定义时，其引用的对象已经与 person 不同，所以后面设置的 name 属性，不会对 person 引用的对象有任何影响。

感觉上面的这个例子非常好，大家可以仔细体会一下，我也是看到了这个例子才决定从文中摘抄(貌似没有摘，就是抄)的。

火烧网经典评论(无经，无典)


　　

相关文章

]]> http://www.xiaoxiaozi.com/2010/03/05/1719/feed/ 4 浏览器的盒子模型 Box Model http://www.xiaoxiaozi.com/2010/03/02/1715/ http://www.xiaoxiaozi.com/2010/03/02/1715/#comments Tue, 02 Mar 2010 10:24:40 +0000 simaopig http://www.xiaoxiaozi.com/?p=1715 盒子模型(Box Mode)是CSS中一个重要的概念，对于网页中的大部分对象，实际呈现形式都是一个盒子形状对象，理解了盒子模型才能更好的排版。对于盒子，我们最关心的就是盒子的尺寸：丫的要占多大地皮？

其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型，他们对盒子模型的解释各不相同，简单理解一下，方便我们了解为何IE这么让人痛苦，为何要为IE写一堆HOCK。这里再顺便鄙视一下，IE总是与标准对着干。

W3C家的盒子

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

那么，假设：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，用标准 W3C 盒子模型解释，那么：

这个盒子需要占据的位置为

宽=margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px

高=margin*2 + border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px

盒子的实际大小为

宽 = border*2 + padding*2 + content.width = 1*2+10*2+200=222px、

高 = border*2 + padding*2 + content.height = 1*2+10*2+50=72px；

IE家的盒子

IE Box Model

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的content 部分包含了 border 和 pading

那么，假设：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，用标准 W3C 盒子模型解释，那么：

这个盒子需要占据的位置为

宽=margin*2 +content.width = 20*2+200=240px、

高= margin*2 + content.height = 20*2+50=70px;

盒子的实际大小为

宽 = content.width = 200px

高 = content.height = 50px

选择自己想要的盒子

当margin,padding,border都为0时，两种盒模型是没有区别的，这个时候我们不用考虑使用哪种盒模型。可是，如果一定要选择一种盒模型呢，选择哪种？不用我说，大家也会选择标准的盒子，毕竟大家对IE的怨恨已经达到一定程度了。但是，怎么选择W3C标准的盒子呢？

在新建html文档时，大家可能没有注意到其html标签上面的Doctype声明，只要加上Doctype声明，浏览器就会采用W3C盒子标准去解释你的盒子了。

这里有一点小疑惑，刚看了一下 Google 首页是没有用 Doctype声明的。

测试你的盒子

jQuery 为我们提供了检测盒子模型的对象 boxModel 使用其我们可以很方便的检测当前浏览器采用的是哪种盒子模型，让我们一起来试一试吧。^_^

检测地址：

  1. 有Doctype声明
  2. 无Doctype声明

相关文章

]]> http://www.xiaoxiaozi.com/2010/03/02/1715/feed/ 6 JavaScript 数据类型转换之——Boolean类型 http://www.xiaoxiaozi.com/2010/03/02/1713/ http://www.xiaoxiaozi.com/2010/03/02/1713/#comments Tue, 02 Mar 2010 08:50:21 +0000 simaopig http://www.xiaoxiaozi.com/?p=1713 本文摘自：李松峰老师 翻译的 《JavaScript 高级程序设计 第二版》

在JavaScript中，可以对任意类型的值调用 Boolean() 函数，以将该值转为对应的 Boolean 值。虽然 Boolean 类型的字面值只有两个(true and false)，但是 ECMAScript 中所有类型的值都有与这两个 Boolean 字面值等价的值。

下表给出了各种数据类型及其对应的转换规则：

其他类型转为Boolean型的转换规则
数据类型 转换为true的值 转换为false的值
Boolean true false
String 任何非空字符串 “”(空字符串)
Number 任何非零数字值(包括无穷大infinity) 0和NaN
Object 任何对象 null
Undefined n/a(这个是毛东西？) undefined

相关文章

]]> http://www.xiaoxiaozi.com/2010/03/02/1713/feed/ 0 人人网被挂马？？ http://www.xiaoxiaozi.com/2010/03/02/1712/ http://www.xiaoxiaozi.com/2010/03/02/1712/#comments Tue, 02 Mar 2010 07:25:41 +0000 simaopig http://www.xiaoxiaozi.com/2010/03/02/1712/ 刚才用chrome访问人人，突然出错，显示该网站”访问此网站可能会损害您的计算机！”。初步怀疑是chrome的问题。。因为从Google里面搜索人人后进入，没有报警。嗯。

有图有真相，到底是人人被挂马，还是Chrome出现了问题，我不清楚。

chrome说人人可能会危害我的电脑

稍候，chrome强行退出，但是重启后，依旧对人人报警。
chrome检测到恶意软件并发生异常

仔细一看，其实不是Chrome说人人有问题，而是认为“www.pcpp.com.cn”这个网站包含恶意软件，在页面查询源代码，发现原来是好友新鲜事里的一张网友上传图片，看来人人是被网友给害了，没有加该同学为好友的应该不会有问题，嗯。。

经友人提示，该图片已经删除，嗯！删除该新鲜事后，成功登录人人。到此一桩冤假错案，了结。

相关文章

]]> http://www.xiaoxiaozi.com/2010/03/02/1712/feed/ 3 JavaScript cookie与domain http://www.xiaoxiaozi.com/2010/03/02/1711/ http://www.xiaoxiaozi.com/2010/03/02/1711/#comments Tue, 02 Mar 2010 06:50:42 +0000 simaopig http://www.xiaoxiaozi.com/?p=1711 在使用JavaScript设置cookie时，懒的时候经常忘记设置domain，但是昨天就遇到了一个奇怪的问题。

同名的 cookie，不同的 domain 或不同的 path，属不同的 cookie；
同名的 cookie，相同的 domain 且相同的 path，不同的 expires，属同一个 cookie。

由于页面重载，会导致我一个页面有两个setCookie函数，但是其中一个指定了domain，另一个没有指定，这样就存在了问题。即，当我想要删除一个cookie的时候，我需要把两个domain下的cookie值都给置为过期，否则不起作用。

因为JavaScript中，函数是可以进行重载的。而原因我却找了半天，看来自己对cookie的理解还是属于一知半解的水平。残念啊。。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>cookie demo</title>
</head>

<body>

<script type="text/javascript">
    function getCookie(name){
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
        if(arr=document.cookie.match(reg)) return unescape(arr[2]);
        else return null;
    }
    function setCookie(name,value)
    {
        alert('这是第一个setCookie');
        var expire = arguments[2] ? arguments[2] : 365*24*60*60*1000;
        var exp = new Date();
        exp.setTime(exp.getTime() + expire);
        document.cookie = name + "="+ escape (value) + ";path=/;expires=" + exp.toGMTString();
    }
   
    function setCookieValue(name,value){
        setCookie(name,value);
    }
   
    setCookieValue('name','value1');
</script>

    <input type="button" value="setCookie" onclick="setCookieValue('name','value2')" />
    <input type="button" value="getCookie" onclick="alert(getCookie('name'))" />
    <input type="button" value="getAll" onclick="alert(document.cookie);" />
    <script type="text/javascript" src="cookie.js"></script>
</body>
</html>
function setCookie(name,value)
{
        alert('这是第二个setCookie');
        var expire = arguments[2] ? arguments[2] : 365*24*60*60*1000;
        var exp = new Date();
        exp.setTime(exp.getTime() + expire);
        var domain = "xiaoxiaozi.com";
        document.cookie = name + "="+ escape (value) + ";domain="+domain+";path=/;expires=" + exp.toGMTString();
}

演示地址：http://www.xiaoxiaozi.com/code/demo/cookie.html

大家可以看到，首先调用的是第一个setCookie函数，而按钮调用的是第二个setCookie函数

allcookie

让我们看一下为何有两个同名的cookie
同明cookie

完全是因为domain不同，可悲啊。。

相关文章

]]> http://www.xiaoxiaozi.com/2010/03/02/1711/feed/ 0 设置网页桌面快捷方式 http://www.xiaoxiaozi.com/2010/02/25/1710/ http://www.xiaoxiaozi.com/2010/02/25/1710/#comments Thu, 25 Feb 2010 03:29:14 +0000 simaopig http://www.xiaoxiaozi.com/?p=1710 看 开心网 有一个设为桌面图标，发现其就是下载了个网页的快捷方式在桌面上。

网上也有类似的程序，但是写法上面，只能支持IE，而不能跨浏览器。看了一下开心的HTTP请求头，原来也不是很难，上网再一搜，咱也弄个演示玩一下。呵。

<html>
    <head>
        <title>小小子桌面版</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    <body>
        <a href='shorturl.php'>桌面版</a>
    </body>
</html>
<?php
    $Shortcut = "[DEFAULT]
    BASEURL=http://www.xiaoxiaozi.com/
    [InternetShortcut]
    URL=http://www.xiaoxiaozi.com
    IDList=
    IconFile=http://www.xiaoxiaozi.com/favicon.ico
    [{000214A0-0000-0000-C000-000000000046}]       
    Prop3=19,2
    ";
    header('Content-Type: application/octet-stream');
    header("Content-Disposition: attachment; filename=小小子.url");
    echo $Shortcut;
?>

演示地址：http://1.simaopig.sinaapp.com/shorturl.html

相关文章

]]> http://www.xiaoxiaozi.com/2010/02/25/1710/feed/ 22 document.documentElement http://www.xiaoxiaozi.com/2010/02/24/1709/ http://www.xiaoxiaozi.com/2010/02/24/1709/#comments Wed, 24 Feb 2010 10:31:23 +0000 simaopig http://www.xiaoxiaozi.com/2010/02/24/1709/ 看《JavaScript 高级程序设计》书中有 document.documentElement 这样的用法，看文章内容说是获取 <html/> 元素。不过从来没这么用过，简单写了个程序验证了一下。

演示地址1：http://www.xiaoxiaozi.com/code/dom/domele1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Script 闭合标签</title>
    </head>
    <body>
        <script type="text/javascript">
            var oHtml = document.documentElement;
               
            alert(oHtml.tagName);
        </script>
    </body>
</html>

看来还真是代表的<html/>元素，那如果我把html标签给去掉返回什么呢？

演示地址2：http://www.xiaoxiaozi.com/code/dom/domele2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>document.documentElement</title>
    </head>
    <body>
        <script type="text/javascript">
            var oHtml = document.documentElement;
           
            alert(oHtml.tagName);
   
        </script>
    </body>

咱们再来测试一下，我通过document.getElementsByTagName获取html试试，看看二者到底是不是同一个东西

演示地址3：http://www.xiaoxiaozi.com/code/dom/domele3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>document.documentElement</title>
    </head>
    <body>
        <script type="text/javascript">
            var oHtml = document.documentElement;
           
            var oHtml2 = document.getElementsByTagName('html')[0];
           
            alert(oHtml == oHtml2);
           
            alert(oHtml.tagName);
        </script>
    </body>
</html>

那么，如果我把html标签再删掉时，oHtml2还能获取到吗？

演示地址4：http://www.xiaoxiaozi.com/code/dom/domele4.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>document.documentElement</title>
    </head>
    <body>
        <script type="text/javascript">
            var oHtml = document.documentElement;
           
            var oHtml2 = document.getElementsByTagName('html')[0];
           
            alert(oHtml == oHtml2);
           
            alert(oHtml.tagName);
        </script>
    </body>

稍微有些不解，这个html标签都没了，为啥还能取到呢？看书中有这么一句话，难道可以解惑？

要访问<html/>元素（你应该明白这是该文件的document元素)，你可以使用document的documnetElement特性

作者说应该明白的东西我原来还真不明白，记录一下，有心得就是好事。

Good good study ,day day up!~

相关文章

]]> http://www.xiaoxiaozi.com/2010/02/24/1709/feed/ 3 遇到 </script> 要小心再小心 http://www.xiaoxiaozi.com/2010/02/24/1708/ http://www.xiaoxiaozi.com/2010/02/24/1708/#comments Wed, 24 Feb 2010 09:53:21 +0000 simaopig http://www.xiaoxiaozi.com/?p=1708 在页面中动态地引入外部 JavaScript　文件的方法有很多，其中之一就是使用 document.write 来直接输出。虽然用的人不多，但是偶尔应个急还是可以的。

但是在使用 document.write 输出的 script 块(</script>)时，一定要小心再小心。甚至只要在js里有用到</script>标签就要小心，小心什么？您且往下看：

演示地址1：http://www.xiaoxiaozi.com/code/js/script1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Script 闭合标签</title>
    </head>
    <body>
        <script type="text/javascript">
            document.write("<script type=\"text/javascript\">"+"alert('xxx');</script>");
        </script>
    </body>
</html>

当您这样写代码时，会发生什么事呢？我本意是想执行alert语句，可是事实上呢？这里发生了什么？没错，页面上只有一个 “); 这个这个类似于笑脸的东西，我想大家看着并不开心，因为我们的程序没有达到我们预先的效果！原因何在？

那就是，每当浏览器遇到</script>时，它都假定其中的代码块是完整的（即使它出现在JavaScript字符串中）。

其实不仅是document.write有问题，只要我们直接在 js 中有用到 </script> 标签，哪怕其在字符串中，浏览器也会把之认为其是 script 标签的结束符。请看下面两个例子：

演示地址2：http://www.xiaoxiaozi.com/code/js/script2.php

<html>
    <head>
        <title>script 闭合标签测试2</title>
    </head>
    <body>
        <script type="text/javascript">
            <?php
                echo "</script>";
                echo "alert('xxx');";
            ?>
        </script>
    </body>
</html>

演示地址3：http://www.xiaoxiaozi.com/code/js/script3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Script 闭合标签</title>
    </head>
    <body>
        <script type="text/javascript">
            alert("</script>");
        </script>
    </body>
</html>

上面两个示例告诉我们，即使</script>是在字符串中，也同样会被浏览器误会。那么就最后一个例子来说，为何页面会显示”);该内容呢？

原因很简单，浏览器认为该段代码有误，首先，alert漏掉了闭合括号，其次有两个</script>标签。

那么，我们该如何解决这个问题呢？方法有两种：

  1. 将闭合标签进行转义，采用<\/script>这种写法
  2. 将闭合标签拆分开，例如写成”</scr”+”ipt>”这种写法

演示地址4：http://www.xiaoxiaozi.com/code/js/script4.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Script 闭合标签</title>
    </head>
    <body>
        <script type="text/javascript">
            alert("<\/script>");
           
            alert("</scr"+"ipt>");
        </script>
    </body>
</html>

两种方法都可以解决问题，不管黑猫白猫，解决问题就是好锚。虽然个人比较欣赏第二种方法，呵呵。。

同时，写本文时也证明了这样一个道理，工欲善其事，必先利其器！有一个好的开发工具，往往可以达到事半功倍的效果。例如，Aptana 在我用上面错误写法时的截图如下：

Aptana 错误提示(点击看原图)

相关文章

]]> http://www.xiaoxiaozi.com/2010/02/24/1708/feed/ 2