碧水轩 » JavaScript http://www.ecoviews.cn 人生的三要素：思想 物质 能力---记录生活，改变自己！ Sat, 14 Jan 2012 05:12:13 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 !document.getElementById等的说明！ http://www.ecoviews.cn/archives/871.html http://www.ecoviews.cn/archives/871.html#comments Fri, 28 May 2010 02:14:42 +0000 若水思源 http://www.ecoviews.cn/?p=871
  • 选择下拉列表实现跳转！
  • 给自己的页面添加复制文章内容功能！
  • Unicode字符编码与ASCII字符编码的关系！
    • ]]>     对于在JavaScript中!document.getElementById、!document.createTextNode等这样的形式该如何理解，我想很多人并不是非常的清楚，但是看了以下的代码我想我们就会有一个非常深刻的理解。

    <html>
<script type="text/javascript">
alert(document);
/* 说明document为一个对象*/
alert(document.getElementById);
alert(document.createTextNode);
/*显示document对象是否定义getElementById与createTextNode，
   由于定义了，因此显示其定义的方法原型
*/
alert(document.getElementByClass);
/*由于document对象未定义getElementByClass方法，所以显示undefined*/
    /*明确上面的一些知识对于我们理解下面的一段代码非常有帮助*/
function checkSearch()
{
 if(!document.getElementById||!document.createTextNode)
 {
  return;
 }
 .......
 /*即，如果document对象没有定义getElementById与createTextNode方法，则函数停止执行*/
}
</script>
<body>
</body>
</html>
    其相关的执行结果如下所示（执行环境为IE6内核的浏览器）：
    alert(document);

    alert(document.getElementById);

    alert(document.createTextNode);

    alert(document.getElementByClass);

    相关文章:

    1. 选择下拉列表实现跳转！
    2. 给自己的页面添加复制文章内容功能！
    3. Unicode字符编码与ASCII字符编码的关系！

    ]]>     http://www.ecoviews.cn/archives/871.html/feed 0     JavaScript中文、英文字符串比较！ http://www.ecoviews.cn/archives/842.html http://www.ecoviews.cn/archives/842.html#comments Wed, 26 May 2010 00:55:04 +0000 若水思源 http://www.ecoviews.cn/?p=842
  • 选择下拉列表实现跳转！
  • 竖向伸缩列表的做法！
  • 给自己的页面添加复制文章内容功能！
    • ]]>     在使用JavaScript中，我们常常知道比较两个英文字符串是根据字符本身的ASCII码的大小，从左往右进行比较（很多教程上都这么说）。但是对于这样一种说法我认为不合适，毕竟字符串中不仅有英文，而且有中文，对于中文的比较也可以的，但是ASCII码却不能表示中文。

    因此，我想JavaScript的字符串比较应该换成另一种说法，那就是按照字符的Unicode码的大小从左至右进行比较。当然为何是Unicode码而不是其它的编码，我想这是跟我们页面的编码有关吧，但是到底是不是这样，我也没有查到相关的信息，如果你有这方面的资料，请告知于我，不胜感激。

    证明我上面所说的一个测试程序如下：页面编码utf-8

    <html>
<body>
<script type="text/javascript">
 var str1="Apple";
 var str2="Banana";
 document.write(str1>str2);
 document.write("<br />");
 /*
 执行结果为：FALSE,因为JavaScript中字符串的比较是按照字符的ASCII码，从左至右进行比较的。
 但是对于中文比较呢？
 由于中文不能使用ASCII码进行表示，但是却可以使用Unicode码表示，那么是否在进行中文字符串比较时
 是按照字符的Unicode值的大小进行比较的呢？
 如果真是这样的话，那么是否意味着所有的中文字符都比英文字符都大呢？
 */
 /*中文字符比英文字符要大*/
 var str3="中国";
 var str4="ZZ";
 document.write(str3>str4);
 document.write("<br />");
 /*执行结果为：true*/
 
 var str5="中国";
 var str6="人民";
 /*显示str5中第一个字符的Unicode值*/
 document.write(str5.charCodeAt(0));
 document.write("<br />");
 /*显示str6中第一个字符的Unicode值*/
 document.write(str6.charCodeAt(0));
 document.write("<br />");
 /*显示比较的结果*/
 document.write(str5>str6);
 document.write("<br />");
</script>
</body>
</html>
    执行结果如下：
    false
true
20013
20154
false

    从中我们可以得到这样的一个规律：所有的中文字符都比英文字符要大！

    相关文章:

    1. 选择下拉列表实现跳转！
    2. 竖向伸缩列表的做法！
    3. 给自己的页面添加复制文章内容功能！

    ]]>     http://www.ecoviews.cn/archives/842.html/feed 0     Unicode字符编码与ASCII字符编码的关系！ http://www.ecoviews.cn/archives/834.html http://www.ecoviews.cn/archives/834.html#comments Mon, 24 May 2010 02:02:11 +0000 若水思源 http://www.ecoviews.cn/?p=834
  • 竖向伸缩列表的做法！
  • 给自己的页面添加复制文章内容功能！
  • JavaScript中文、英文字符串比较！
    • ]]>     ASCII字符编码是一种7位编码，范围从0×00-0x7F，包括了英文字母，阿拉伯数字，标点符号，控制字符等，其中0×00-0×20和0x7F表示控制字符。

    换句话说，ASCII字符编码的编码范围为：0-254，其中0-32与127为控制字符。

    Unicode字符编码的编码范围是：0-65535，它包含三套编码方式如：UTF-8，UTF-16和UTF-32。它和ASCII的关系为ASCII字符编码是Unicode字符编码的一部分。

    懂得这点知识可以帮助我们理解这些方面的内容：
    1.怎么识别一段文字中，那些是中文，哪些是英文。
    2.在分割字符串时候，我们对于乱码的解决等等。

    下面以一段JavaScript代码为例来进行说明，其中网页编码为utf-8。

    <script type="text/javascript">
 var str="测试一个文档中的English与Chinese，并把其中的中英文分开。";
 var len=str.length;
 document.write("测试字符的长度："+len);
 document.write("<br />");
 for(i=0;i<len;i++)
 {
  unicode_num=str.charCodeAt(i);
  document.writeln(unicode_num);
  if(unicode_num<255)
  {
   char=str.charAt(i);
   document.write(char+"该字符为英文");
   document.write("<br />");
  }
  else
  {
   char=str.charAt(i);
   document.write(char+"该字符为中文");
   document.write("<br />");
  }
 }
</script>

    通过运行的结果我们可以发现以下一些事实：
    1.当网页编码为utf-8，gb2312时，字符长度是35，即是说中文字符与英文字符所用的编码格式都是相同的。
    2.在中文输入法下，标点符号是中文而不是英文。如上面的逗号、句号。
    3.因为中英文编码的格式是相同的，因此在进行字符串分割时不用考虑因为进行字符的裁剪而造成乱码的问题。而这是在php进行字符分割时要考虑的。

    懂得上面的一些知识可以在以下的一些应用中指导我们：
    1.对网页进行内容的提取。
    2.统计一篇文章中总字符的个数，中文字符，非中文字符的个数，如Word里面的字数统计功能。（当然上面的仅仅是一个非常粗略的算法，即如果一个字符的Unicode值小于255则为英文，反正为中文，但是实际上却比这个要细得多，但是这样的一种方法可以作为一种粗略的统计工具，在很多的应用中已经足够使用，如上面的测试程序中。）
    3.能在字符串剪裁中给予我们指导。

    相关文章:

    1. 竖向伸缩列表的做法！
    2. 给自己的页面添加复制文章内容功能！
    3. JavaScript中文、英文字符串比较！

    ]]>     http://www.ecoviews.cn/archives/834.html/feed 3     Alexa重定向实现方式！ http://www.ecoviews.cn/archives/466.html http://www.ecoviews.cn/archives/466.html#comments Thu, 04 Mar 2010 07:37:05 +0000 若水思源 http://www.ecoviews.cn/?p=466
  • 选择下拉列表实现跳转！
  • window.location与window.location.href
  • 给自己的页面添加复制文章内容功能！
    • ]]>       在今天我在查找如果提高自己网站的Alexa排名的时候，其中的一个方法就是把自己的网站的链接变成Alexa的重定向链接，如下面的链接所示：

      http://redirect.alexa.com/redirect?www.ecoviews.cn
    任何人只有点击了这个链接，那么都可以给我的Alexa排名做贡献，有趣的是我们打开的网页却仍然是我们自己网站的网页，不信的话你可以点击此处查看，打开的就是我网站的主页，却不是Alexa的网站。

    但是我们在来看看下面的这种情况：

    代码如下：
    点击进入<a href=”http://www.baidu.com?www.google.cn“>百度网站</a>

    效果为：点击进入百度网站，你会发现打开的网站却是百度的，而不是谷歌的网站，那么你就会想，Alexa的这种重定向是如何实现的的？

       这个功能完全可以使用JavaScript来实现，如你要打开的地址为：http://127.0.0.1/phpstudy/test.html?www.ecoviews.cn

    你只需在你的test.html文件中写入以下的代码就可以。

    <script type=”text/javascript”>
    var localurl =window.location.href;
    var url=localurl.split(“?”);
    window.location.href=”http://”+url[1];
    </script>

      实现的原理就是：获得？后面的url，然后在跳转到该地址就行了，因此能够实现这样功能的方法还有很多，上面的仅仅是一种而已。

    相关文章:

    1. 选择下拉列表实现跳转！
    2. window.location与window.location.href
    3. 给自己的页面添加复制文章内容功能！

    ]]>     http://www.ecoviews.cn/archives/466.html/feed 0     编码对JavaScript的影响！ http://www.ecoviews.cn/archives/400.html http://www.ecoviews.cn/archives/400.html#comments Sun, 24 Jan 2010 03:08:05 +0000 若水思源 http://www.ecoviews.cn/?p=400 这几天自己在做一个网站，在实现新闻列表选择的时候自己想实现下面这样的功能：

    1.如果用户的鼠标不在某条新闻上时，新闻背景显示为背景色。

    2.如果用户的鼠标在某条新闻上时，新闻背景显示为白色。

    一个图例如下所示：

    但是可惜的是我写了JavaScript代码，但是不知道为什么总是不起作用，我的JavaScript代码如下所示：

      

    后来自己找到了原因所在：原因是自己的网页编码为utf-8的格式，而JavaScript代码为gb2312的格式，结果造成了JavaScript代码不起作用。

    后台把JavaScript代码改为utf-8的格式后，成功了。

    做法就是：用记事本打开js文件，然后另存为，在另存为选择编码为utf-8。

    如下图所示：

    没有相关文章.

    ]]>     http://www.ecoviews.cn/archives/400.html/feed 0     给自己的页面添加复制文章内容功能！ http://www.ecoviews.cn/archives/385.html http://www.ecoviews.cn/archives/385.html#comments Fri, 15 Jan 2010 11:41:57 +0000 若水思源 http://www.ecoviews.cn/?p=385
  • Alexa重定向实现方式！
  • Unicode字符编码与ASCII字符编码的关系！
  • JavaScript中文、英文字符串比较！
    • ]]>       对于任何一个想在网络中找到自己想要的资料的人来说，找到自己想要的资料的时候是非常开心的事情的，毕竟这就意味着自己的问题得到了解决，自己不用再为了这个疑难而劳神伤心！

      不过我们常常在找到资料的时候感到不愉快，因为现在的网页制作不知道是怎么了，也许是网站主为了故意想让我们这些浏览者点击广告吧，他们常常把一些广告放在了网页的文章之中，当然这并不可厚非，毕竟网站主最主要或者说唯一的收入来源就是网站的广告。但是如果网站主仅仅是为了想增加自己的收入而不顾我们浏览者的感受的话，我想这样的网站主不是一个合格的。

      举一个简单的例子来说，当我们查找到我们需要的资料的时候，我们往往希望把这些资料给保存下来，一方面是怕自己以后再遇到相似问题时自己忘记了，二是避免自己以后忘记时再宠信花时间去查找这些资料，但是如果网站的站主禁止了页面的复制功能，或者是网站的站主在页面中嵌入了广告的话，那么着对于我们浏览者来说是不好的，一是不能保存我们需要的资料，二是我们在复制资料时十分的麻烦。当然我们浏览者也要加强自己的版权意识，毕竟很多网站禁止复制的原因就是为了保护自己的版权，而这正是我们网站浏览者所忽视的。

      不过在我看来，一个博客应该是以浏览者为主的，能为浏览者考虑的网站是才算得上是一个优秀的网站，因此如果一个网站能够提供一个复制网站文章内容的功能的话，我想就可以减轻我们浏览者很多的麻烦，毕竟每次选中我们要复制的文字本身是一件麻烦的事情，而实现这样的功能本身也非常的简单。

      下面我们用JavaScript来实现！具体的代码如下：

    <script type=”text/javascript”>

    // <![CDATA[

    function copy_clip(copy)

    {

    copy="碧水轩|http://www.ecoviews.cn \r\n"+copy;

    if (window.clipboardData)

    {

    window.clipboardData.setData("Text", copy);

    }

    else

    if (window.netscape)

    {

    netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

    var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);

    if (!clip) return;

    var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);

    if (!trans) return;

    trans.addDataFlavor(‘text/unicode’);

    var str = new Object();

    var len = new Object();

    var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);

    var copytext=copy;

    str.data=copytext;

    trans.setTransferData(“text/unicode”,str,copytext.length*2);

    var clipid=Components.interfaces.nsIClipboard;

    if (!clip) return false;

    clip.setData(trans,null,clipid.kGlobalClipboard);

    }

    alert(“内容已经复制到剪切板！”)

    }

    // ]]>

    </script>

    <!–以上为主要代码–>

    <input type=”text” id=”ff” value=”www.baidu.com” /><button onclick=”copy_clip(document.getElementById(‘ff’).value)”>复制

    </button>

    相关文章:

    1. Alexa重定向实现方式！
    2. Unicode字符编码与ASCII字符编码的关系！
    3. JavaScript中文、英文字符串比较！

    ]]>     http://www.ecoviews.cn/archives/385.html/feed 0     window.location与window.location.href http://www.ecoviews.cn/archives/309.html http://www.ecoviews.cn/archives/309.html#comments Sat, 02 Jan 2010 11:24:28 +0000 若水思源 http://www.ecoviews.cn/?p=309
  • 选择下拉列表实现跳转！
  • 竖向伸缩列表的做法！
  • JavaScript向PHP的传递变量的两种方式！
    • ]]>       在通常情况下，我们使用window.location=URL与window.location.href=URL来进行页面的跳转时没有什么不同，在IE与Firefox下我自己测试过，无论是URL是绝对路径还是相对路径，两者都可以起作用。

      但是仔细再Google上查找了相似的问题，却发现原来另有情况，那就是：

    （源地址：http://www.cnpublic.com/2009/06/windowlocationhref-invalid/）

      浏览器区别:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;

    Firefox1.5.x下,只能使用window.location.

    相关文章:

    1. 选择下拉列表实现跳转！
    2. 竖向伸缩列表的做法！
    3. JavaScript向PHP的传递变量的两种方式！

    ]]>     http://www.ecoviews.cn/archives/309.html/feed 0     竖向伸缩列表的做法！ http://www.ecoviews.cn/archives/111.html http://www.ecoviews.cn/archives/111.html#comments Sat, 19 Sep 2009 05:56:12 +0000 若水思源 http://www.baoway.net.cn/?p=348
  • JavaScript中文、英文字符串比较！
  • 给自己的页面添加复制文章内容功能！
  • Unicode字符编码与ASCII字符编码的关系！
    • ]]>      在进行web开发的过程中，后台管理是一个非常重要的部分，而后台管理又常常因为数据的条目和类别太多使我们的网页设计人员常常感到头痛，毕竟有时常常得考虑在一个页面中显示很多的条目与内容，但是却又要保持页面的视觉效果，而这两者之间又常常是想冲突的。因此在我们进行后台设计时，引入一种竖向或者横向的伸缩列表，达到显示内容与视觉效果相和谐的目的。

      伸缩列表有两种，一种是竖向的，这种常常在后台中使用，模拟的是电脑中文件夹的操作，而横向的更多的是用于网站的前台导航。因此，在这我们先介绍竖向伸缩列表的做法。

      效果图如下所示：
     竖向列表1
     该图是页面开始运行是的效果图，在每一个类别下面有若干小类，我们只要点击相应的类别就可以把相关类别展开，效果图如下所示，在点击一次，相关类别收缩。

      竖向列表2
    其功能的实现方式是通过JavaScript来控制相应元素的显示与隐藏，关键的JavaScript代码如下：

     function go(index)
    {
    var images=document.images;
    if(images[index].src.indexOf(“add”)!=-1)
    images[index].src=”images/dec.jpg”;
    else
    images[index].src=”images/add.png”;
     var tables=document.getElementsByTagName(“table”);//.length;index=2*index+1;
     if(tables[index].style.display==”none”)
     tables[index].style.display=”block”;
     else
     tables[index].style.display=”none”;
    }
    </script>

      你也可以通过点击这里获取该文件的原代码。

    相关文章:

    1. JavaScript中文、英文字符串比较！
    2. 给自己的页面添加复制文章内容功能！
    3. Unicode字符编码与ASCII字符编码的关系！

    ]]>     http://www.ecoviews.cn/archives/111.html/feed 0     选择下拉列表实现跳转！ http://www.ecoviews.cn/archives/107.html http://www.ecoviews.cn/archives/107.html#comments Fri, 18 Sep 2009 07:01:47 +0000 若水思源 http://www.baoway.net.cn/?p=342
  • !document.getElementById等的说明！
  • window.location与window.location.href
  • 网站中超链接嵌套！
    • ]]>       在我们浏览网站的时候，我们可能遇到这样的一种情况，那就是网站提供给我们一个下拉列表，然后我们选择之后，网站自动地跳转到我们选择的页面。自己一个真实的体会就是在一次国外网站注册的过程中，自己通过下拉列表选择自己的国籍后，网站自动定位到了一个中文页面进行注册。

      此时我们不禁会想，这样的功能我们应该怎么实现呢？实现有两种方法，一种是客服端进行实现—–使用JavaScript，另一种使用服务器端进行实现—利用PHP或JSP等动态语言实现，显而易见使用客服端要好，毕竟这样可以减少服务器的压力。

      我通过一个实例来说说明，读者可以通过该实例来进行体会。

    <html>
    <head><title>下拉列表实现跳转</title></head>
    <body>
    <select onchange=”eval(‘window.location=this.options[this.selectedIndex].value’)”>
    <option value=”1.html”>1.html</option>
    <option value=”2.html”>2.html</option>
    <option value=”3.html”>3.html</option>
    </body>
    <html>

      通过测试，可以实现我上面所说的内容，你可以通过这里来获取该源文件。

    相关文章:

    1. !document.getElementById等的说明！
    2. window.location与window.location.href
    3. 网站中超链接嵌套！

    ]]>     http://www.ecoviews.cn/archives/107.html/feed 0