任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客 » javascript http://www.renniaofei.com 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客 Fri, 30 Jul 2010 10:51:25 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 TranslateThis 网页翻译工具 http://www.renniaofei.com/internet/translate-this-javascript-button/ http://www.renniaofei.com/internet/translate-this-javascript-button/#comments Sat, 24 Jul 2010 12:13:21 +0000 任鸟飞 http://www.renniaofei.com/?p=1477 TranslateThis 是一个使用 Ajax 和  Google Language API 技术的轻量级的 Javascript 翻译工具按钮，可以轻松翻译50多种语言。

使用TranslateThis的步骤很简单，只需要将 TranslateThis 官方网站提供的代码粘贴到网站指定的位置即可；而且还提供了Wordpress 插件—— TranslateThis，方便 Wordpress 用户直接使用。

translatethis 网页翻译工具

TranslateThis 官方网址：http://translateth.is/

]]> http://www.renniaofei.com/internet/translate-this-javascript-button/feed/ 13 渐行渐远的 VBScript http://www.renniaofei.com/internet/jianxingjianyuan-vbscript/ http://www.renniaofei.com/internet/jianxingjianyuan-vbscript/#comments Sat, 24 Jul 2010 06:35:49 +0000 任鸟飞 http://www.renniaofei.com/?p=1469 曾几何时，在客户端的DHTML应用方面，VBScript和Javascript分庭抗礼，而如今，VBScript已经日薄西山，渐行渐远!

VBScript 是 Visual Basic Scrip t的简称，有时也被缩写为 VBS。VBScript 是微软开发的一种脚本语言，可以看作是VB语言的简化版，可以应用于客户端和服务器端。

在网页服务器方面VBS是微软的 ASP 的一部分，虽然 ASP.NET已经出来很长一段时间，但国内的ASP还是占有一席之地，但随着时间的推移 ASP 会被慢慢的淘汰掉。

在服务器端 VBScript 凭借 ASP 还能勉强立足，但在客户端应用方面已经岌岌可危。刚开始我是先学ASP的，后来因为某些原因，开始学 PHP，现在我基本上不再使用 VBScript 及 ASP。如果你也在学网页编程，推荐你学习Javascript 和 PHP。

现在很少有网站使用 VBScript，几乎清一色的 Javascript，我们不禁要问 VBScript 渐行渐远的原因是什么呢？下面稍微总结了一些。

1. 浏览器对 VBScript 的支持情况

只有IE浏览器支持 VBScript ，而 Javascript 则受到所有浏览器的支持

2. 推广程度

Javascript 得到众多编程者的支持，而且由此衍生出大量的 Javascript 库，例如 Jquery、MooTools 等。

3. 势力对比

IE浏览器份额逐年降低，而且IE对新兴技术及标准支持力度不够；与此同时，Chrome、Opera 等浏览器异军突起。并且微软在互联网应用方面屡战屡败，以微软为后盾的编程语言自然也会受到冲击。

虽然对 VBScript 的消逝有点感伤，但适者生存的丛林法则也同样适用于互联网，优胜劣汰之后，互联网明天会更美好！

]]> http://www.renniaofei.com/internet/jianxingjianyuan-vbscript/feed/ 5 网站开发压缩工具收集整理 http://www.renniaofei.com/tools/wangzhan-kaifa-yasuo-gongju/ http://www.renniaofei.com/tools/wangzhan-kaifa-yasuo-gongju/#comments Tue, 13 Jul 2010 08:09:44 +0000 任鸟飞 http://www.renniaofei.com/?p=1385 影响网站打开时间有两个因素，一个是网页加载速度，另一个是网站页面的大小。网站加载速度与用户所处的网络环境及主机性能有关，而网站页面的大小则由网站开发者决定。本文的重点就是如何压缩网站页面，以减少页面加载时间。

1. 图片压缩

相对与文本来说，图片是相当占用空间的。压缩图片是重中之重。

图片压缩工具推荐：

2. Javascipt 压缩

为了增加页面的交互性及动画效果，很多页面大量使用 Javascript ，特别是 Jquery。

推荐工具：

3. CSS 压缩

由于 CSS 代码有很多缩写，所以使用压缩工具压缩一下，能大大的降低CSS文件的大小。

推荐工具：

4. HTML 压缩

推荐使用 Dreamweaver 的清理工具。

附：Google Chrome 插件 —— 网页加载速度分析工具  Speed Tracer (by Google)

]]> http://www.renniaofei.com/tools/wangzhan-kaifa-yasuo-gongju/feed/ 0 利用Jquery制作具有动画效果的链接 http://www.renniaofei.com/code/jquery-animate-links/ http://www.renniaofei.com/code/jquery-animate-links/#comments Fri, 04 Jun 2010 12:54:08 +0000 任鸟飞 http://www.renniaofei.com/?p=1072 jQuery是一套跨浏览器的JavaScript库，强化了HTML与JavaScript之间的操作，是目前最受欢迎的JavaScript库。利用Jquery可以制作出超酷的动画效果。

建议使用谷歌 AJAX Libraries API提供jQuery的js的引用服务，其优点是加载速度快，而且能降低网站服务器的负荷。

预览 利用jquery制作动画效果的链接

利用Jquery制作具有动画效果的链接 源代码

首先必须加载Jquery库，这里直接使用谷歌 AJAX Libraries API，使用方法如下：
在<head></head>内增加下面的代码即可：
<script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.1.js”></script>

HTML

<ul>
<li><a href="http://www.renniaofei.com" class="link">首页</a></li>
<li><a href="http://www.renniaofei.com" class="link">灵感</a></li>
<li><a href="http://www.renniaofei.com/category/design/" class="link">设计</a></li>
<li><a href="http://www.renniaofei.com/category/graphic/" class="link">图像</a></li>
<li><a href="http://www.renniaofei.com/category/code/" class="link">编码</a></li>
<li><a href="http://www.renniaofei.com/category/freebies/" class="link">素材</a></li>
<li><a href="http://www.renniaofei.com/category/internet/" class="link">网络</a></li>
</ul>

CSS

#links ul li {
margin-bottom: 6px;
list-style-type: none;
}

Jquery

<script type="text/javascript">
  $(document).ready(function() {
  $('a.link').hover(function() { //mouse in
    $(this).animate({ paddingLeft: '20px' },400);
  }, function() { //mouse out
    $(this).animate({ paddingLeft: 0 }, 400);
  });
});
</script>

代码说明

Html代码中所有需要增加动画效果的链接都添加类（class=”link”）,然后在Jquery中对a.link（所有class=”link”的链接）设置动画效果。

只需要简单的几行Jquery代码，即可实现如此炫的动画效果，还不感觉试一下！

]]> http://www.renniaofei.com/code/jquery-animate-links/feed/ 1 一个login函数名在javascript中引发的“血案” http://www.renniaofei.com/code/javascripti-keyword-login/ http://www.renniaofei.com/code/javascripti-keyword-login/#comments Sat, 17 Apr 2010 03:46:14 +0000 任鸟飞 http://www.renniaofei.com/?p=870 login究竟是不是Javascript预留的关键字？为何自己编写login()函数不起作用？而将自定义函数名由login()修改为其他字符串（check_Null）后，问题解决。

Javascript预留了一些关键字(Reserved Words)，所谓关键字是指在Javascript语言中有特定含义，成为Javascript语法中一部分的那些字。Javascript关键字是不能作为变量名和函数名使用的。

Javascript关键字列表：

break delete function return typeof case do if switch var catch else in this void continue false instanceof throw while debugger finally new true with default for null try

Javascript未来关键字(Javascript Future Reserved Words)

Javascript还有一些未来关键字，这些字虽然现在没有用到Javascript语言中，但是将来有可能用到。
abstract double goto native static boolean enum implements package super byte export import private synchronized char extends int protected throws class final interface public transient const float long short volatile

对比了一下，发现login不属于Javascript关键字，或许login()是javacript的内置函数？ 但在网上搜了一下，也没找到相关信息。 我也不知道为什么会这样！

具体案例

HTML

<form method=”post” name=”myform” id=”myform” action=”">
<p>
<label>Email:</label>
<input name=”link_email” id=”link_email” type=”text” />
<span>Require</span></p>
<p>
<label>Password:</label>
<input name=”link_password” type=”text” id=”link_password” onfocus=”javascript:this.value=”;” />
</p>
<p>
<label>&nbsp;</label>
<input type=”submit” name=”login” value=”Submit”
onclick=”javascript:return login();”>
</p>
</form>

Javascript

<script language=”javascript”>
<!–
function login(){
if (document.myform.link_email.value==”"){
alert(“用户名不能为空!”);
return false;
}
if (document.myform.link_password.value==”"){
alert(“密码不能为空!”);
return false;
}
return true;
}
// –>
</script>

问题点：

使用login()函数不能对文本框的内容进行检查，没有实现应有的功能。

解决方法：

将login()函数名修改为check_Null()，问题解决。

预览最终效果

login函数名在javascript中引发的“血案”

总结：

在编写程序时，须注意变量名及函数名是否是预留关键字，或与内置函数重名，尽量远离那些预留关键字。

]]> http://www.renniaofei.com/code/javascripti-keyword-login/feed/ 1 利用Javascript简化社交性书签(网摘)代码 http://www.renniaofei.com/code/shuqian-wangzhai-bookmarks-javascript-codes/ http://www.renniaofei.com/code/shuqian-wangzhai-bookmarks-javascript-codes/#comments Fri, 08 Jan 2010 14:38:37 +0000 任鸟飞 http://www.renniaofei.com/?p=388 社交性书签(网摘)是一种超链接的收藏和分享的社交性软件/或网站。因为收藏的超链接可以被许多人在网络上分享，因此也有人称之为网络书签。

用户可以通过它来收集，分类，聚合感兴趣的网络信息，如新闻，图片，资料，网站等。同时，也能方便的与其他人分享自己的个人收藏，并从其他用户收藏中进行信息采集，快速的找到感兴趣主题的网站。社交性书签的另一大特点是基于用户的平面化标签分类机制的分众分类法（Folksonomy），通过自发性的非等级标签分类而方便的进行信息聚集分类。

wangzhai shuqian bookmarks

常见的书签代码格式：

<a href=”http://del.icio.us/post” onclick=”window.open(‘http://del.icio.us/post?v=4&noui&jump=close&url=’+encodeURIComponent(location.href)+’&title=’+encodeURIComponent(document.title), ‘delicious’,'toolbar=no,width=700,height=400′); return false;”> Save This Page</a>

如果书签较多，则势必会造成代码重迭，可移植性降低。这里要介绍的是将所有的书签代码放到一个javascript文件中，在需要放置标签代码的部分，只须调用javascript即可。

右侧下载javascript书签代码  利用Javascript简化社交性书签(网摘)代码

使用说明：

  • 压缩文件中包含三个文件shuqian-wangzhai-bookmarks-javascript-codes-demo.html，wangzhai.js，以及images文件夹。
  • 请保持wangzhai.js和images文件夹的文件层级结构，英文wangzhai.js会调用images文件夹中的图像。
  •  在需要放置书签的地方添加如shuqian-wangzhai-bookmarks-javascript-codes-demo.html中所示的Javascript代码即可。
    具体代码：<script language=’javascript’ src=’wangzhai.js’></script>

根据需要，你可自行修改javascript代码，添加或删除某些书签。 从此javascript代码可以看出，只是简单的输出（document.write）语句，如果你有新的标签需要添加，只要按javascript中的格式将html代码转化成javascript输出代码即可。（html与javascript转化工具 http://tool.webmasterhome.cn/html_js.asp）

]]> http://www.renniaofei.com/code/shuqian-wangzhai-bookmarks-javascript-codes/feed/ 0 PHP与Javascript易混语法及函数整理对比 http://www.renniaofei.com/code/php-vs-javascript-yihun-yufa-hanshu-zhengli-duibi/ http://www.renniaofei.com/code/php-vs-javascript-yihun-yufa-hanshu-zhengli-duibi/#comments Sun, 03 Jan 2010 05:58:16 +0000 任鸟飞 http://www.renniaofei.com/?p=347 由于PHP和Javascript两者的语法及函数及其相似，在使用过程中极易混淆其用法，下面以表格的形式对比整理出两者易混淆的语法及函数。

项目 PHP Javascript
简介 PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言，常常搭配 Apache (web 服务器) 一起使用。PHP 语法非常类似于 Perl 和 C。 JavaScript 是因特网上最流行的客户端脚本语言，并且可在所有主要的浏览器中运行，比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies等
实现方式 PHP 的脚本块以 <?php 开始，以 ?> 结束。您可以把 PHP 的脚本块放置在文档中的任何位置。

当然，在支持简写的服务器上，您可以使用 <? 和 ?> 来开始和结束脚本块。

例：

<?php /PHP Document…… ?>

 HTML 的 <script> 标签用于把 JavaScript 插入 HTML 页面当中。

例：

<script language=”javascript”>// JavaScript Document …… </script>
注释 单行的注释以 // 开始

多行注释以 /* 开头，以 */ 结尾。

 与PHP相同
变量 局部变量申明用var

例：

var sqlstr;

若不使用var，则此变量申明为全局变量。

例：

color=”#111″;

 PHP 中的所有变量都是以 $ 符号开始的。

PHP 是一门松散类型的语言（Loosely Typed Language）,

在 PHP 中，不需要在设置变量之前声明该变量。

根据变量被设置的方式，PHP 会自动地把变量转换为正确的数据类型。

例：

<?php $txt = “Hello World!”; $number = 16; ?>
语句 document.write(“Hello world”); <?php echo “Hello World”; ?>
数组定义 有三种数组类型：

  1. 数值数组

    带有数字 ID 键的数组

    $names = array(“Peter”,”Quagmire”,”Joe”);

  2. 关联数组

    数组中的每个 ID 键关联一个值

    $ages = array( “Peter”=>32, “Quagmire”=>30, “Joe”=>34);

  3. 多维数组

    包含一个或多个数组的数组

    在多维数组中，主数组中的每个元素也是一个数组。在子数组中的每个元素也可以是数组，以此类推。

 创建 Array 对象的语法：

  1. new Array();
  2. new Array(size);
  3. new Array(element0, element0, …, elementn);
数组元素数量 count() 函数计算数组中的单元数目或对象中的属性个数。

对于数组，返回其元素的个数，对于其他值，返回 1。如果参数是变量而变量没有定义，则返回 0。如果 mode 被设置为 COUNT_RECURSIVE（或 1），则会递归底计算多维数组中的数组的元素个数。

语法：
count(array,mode)

 

 length 属性可设置或返回数组中元素的数目。

数组的 length 属性总是比数组中定义的最后一个元素的下标大 1。对于那些具有连续元素，而且以元素 0 开始的常规数组而言，属性 length 声明了数组中的元素的个数。

语法：arrayObject.length
字符串分割 split – 用正则表达式将字符串分割到数组中

说明：

array split ( string pattern, string string [, int limit])

 split() 方法用于把一个字符串分割成字符串数组。

语法：

stringObject.split(separator,howmany)
返回部分字符串 substr() 函数返回字符串的一部分。

语法：

substr(string,start,length)

 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

语法： stringObject.substr(start,length)
数学函数 floor() 函数向下舍入为最接近的整数。

语法： floor(x)

返回不大于 x 的下一个整数，将 x 的小数部分舍去取整。floor() 返回的类型仍然是 float，因为 float 值的范围通常比 integer 要大。

实例：

<?php echo(floor(5.1)); ?>

 floor() 方法可对一个数进行下舍入。

语法： Math.floor(x)

floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。

实例：

<script type=”text/javascript”> document.write(Math.floor(5.1) + “<br />”) </script>
数学函数 round() 函数对浮点数进行四舍五入。

语法：

round(x,prec)

返回将 x 根据指定精度 prec （十进制小数点后数字的数目）进行四舍五入的结果。prec 也可以是负数或零（默认值）。

实例：

<?phpecho(round(0.49)); ?>

 round() 方法可把一个数字舍入为最接近的整数。

语法：

Math.round(x)

与 x 最接近的整数。

实例：

<script type=”text/javascript”>

document.write(Math.round(0.49) + “<br />”) </script>
]]> http://www.renniaofei.com/code/php-vs-javascript-yihun-yufa-hanshu-zhengli-duibi/feed/ 0 利用Javascript来定义DOM中指定标签的样式及行为 http://www.renniaofei.com/code/liyong-javascript-lai-dingyi-dom-zhong-zhiding-biaoqian-de-yangshi-ji-xingwei/ http://www.renniaofei.com/code/liyong-javascript-lai-dingyi-dom-zhong-zhiding-biaoqian-de-yangshi-ji-xingwei/#comments Sat, 05 Dec 2009 03:36:21 +0000 任鸟飞 http://www.renniaofei.com/?p=139 文档对象模型（Docuement Object Model，简称DOM），是W3C组织推荐的处理XML的标准适配器。文档内容按照规定的格式标准按层级布局。

由于文档内容是按标准格式进行布局，我们可以利用Javascript DOM 来查找并控制对应标签元素的属性及行为。

例如：

<div id=”news”>some news list here</news>

如果想取得上面代码中的标签（news）只需在Javascript中调用 var news= document.getElementsById("news");
但是我们经常遇到
  • 标签元素无 id 属性；
  • 标签元素无 class属性；
  • 需要控制一个标签的集合，例如我想定义所有Footer部分的<a>标签的属性及行为。

下面举例子说明

<div id="header">
  <h1>任鸟飞网页设计</h1>
</div>
<div id="sidebar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">简介</a></li>
    <li><a href="#">业务</a></li>
    <li><a href="#">联系</a></li>
   </ul>
</div>
<div id="content">
  <h2>任鸟飞网页设计</h2>
  <p><a href="#">任鸟飞网页设计</a>
    设计类门户网站<p>
  <p><span style="color: red;">任鸟飞网页设计</span>
    设计类门户网站</p>
</div>
<div id="footer">
   <p>版权所有| <a href="#">联系我们</a> | <a href="#">隐私条款</a> |
      <a href="#">政策条款</a></p>
</div>

在整个文档中取出所有a标签，代码如下：

var myLinkCollection = document.getElementsByTagName("a");
for (i=0;i<myLinkCollection.length;i++) {
  // 根据需要来定为a标签的样式及行为}

从指定部分取出所有a标签，例如从footer中取出所有a标签，代码如下：

var myFooterElement = document.getElementById("footer");
var myLinksInFooter = myFooterElement.getElementsByTagName("a");
for (i=0;i<myLinksInFooter.length;i++) {
  // 定义footer部分所有a标签的样式及行为}

也可利用节点node的方法来实现：

var myLinkCollection = document.getElementsByTagName("a");

for (i=0;i<myLinkCollection.length;i++) {
  if (myLinkCollection[i].parentNode.parentNode.id === "footer") {
    // do something with footer anchor tags here
  }
}

也可与增加限制条件，比如说只取得含有href属性的a标签，代码如下：

var myLinkCollection = document.getElementsByTagName("a");

for (i=0;i<myLinkCollection.length;i++) {
  if (myLinkCollection[i].getAttribute("href")) {
    // 定义含有href属性的a标签的样式和行为
  }
}

我们也可以利用Javascript定义标签的属性，例如标签，代码如下：

var myLinkCollection = document.getElementsByTagName("span");

for (i=0;i<myLinkCollection.length;i++) {
  if (myLinkCollection[i].getAttribute("style")) {
    // 直接定义span标签的样式属性  }
}
]]> http://www.renniaofei.com/code/liyong-javascript-lai-dingyi-dom-zhong-zhiding-biaoqian-de-yangshi-ji-xingwei/feed/ 0 CSS&Javascript特效 http://www.renniaofei.com/design/css-javascript-inline-informational-overlays-code/ http://www.renniaofei.com/design/css-javascript-inline-informational-overlays-code/#comments Tue, 24 Nov 2009 13:42:43 +0000 任鸟飞 http://www.renniaofei.com/?p=89 利用CSS和Javascript实现网页内嵌信息响应鼠标事件，当鼠标滑过网页中某个给定的区域时，就会调用Javascript ，实现内嵌信息的显示与隐藏。

其实实现此特效的代码很简单，原理就是利用Javascript控制XHTML元素的现实与隐藏，下面列出其代码，供参考。
Javascript 代码


<script language="javascript">
function showLayer(layerName, shadowLayerName) 
{ 
   if (document.getElementById) // Netscape 6 and IE 5+ 
   { 
       var targetElement = document.getElementById(layerName); 
       targetElement.style.visibility = 'visible'; 
  } 
} 
 
function hideLayer(layerName) 
{ 
   if (document.getElementById) 
  { 
       var targetElement = document.getElementById(layerName); 
      targetElement.style.visibility = 'hidden'; 
   } 
} 

</script>

XHTML代码


<div id="hover" onmouseover="showLayer('image')" onmouseout="hideLayer('image')">
鼠标移动到这里就可以显示任鸟飞网页设计网的站标
</div> 
<div id="image" style="visibility: hidden;"> 
   <img src="http://www.renniaofei.com/wp-content/themes/renniaofei/images/default-thumbnail.gif" alt="image">
</div>

预览此效果：css-javascript-inline-informational-overlays-code

]]> http://www.renniaofei.com/design/css-javascript-inline-informational-overlays-code/feed/ 0