玄猫的窝-韩国峰的博客 » Web客户端技术 http://www.hanguofeng.cn 韩国峰的博客,关注Web技术与电子商务。 Sat, 04 Sep 2010 14:39:38 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 parseInt bug in firefox 3.5.2 http://www.hanguofeng.cn/archives/web-client/parseint-bug-in-firefox-3-5-2?utm_source=rss&utm_medium=rss&utm_campaign=parseint-bug-in-firefox-3-5-2 http://www.hanguofeng.cn/archives/web-client/parseint-bug-in-firefox-3-5-2#comments Sun, 06 Sep 2009 02:25:37 +0000 hanguofeng http://www.hanguofeng.cn/?p=160
来，先让我们看下面的JS代码：

  for(var i=0;i < 1000;i++)
  {
        var result = parseInt(-15.02);
	document.write( result );
	document.write( '' );
  }

你觉得他会输出什么？一串的-15？恩，也许在其他浏览器中是这样的，但是据我的测试，在Firefox 3.5.2里面，只有开始的几个是-15，其他都是-16，而且-15的个数不一定，有时是3个，有时又会出现4个。

那么，怎么解决呢，将其改为：

parseInt(-15.02,10);

即可


English version for foreign friends:

Ok,let’s get to the codes below:

  for(var i=0;i < 1000;i++)
  {
        var result = parseInt(-15.02);
	document.write( result );
	document.write( '' );
  }

What do you think it will output?Rows of -15?It might be in other browsers except Firefox 3.5.2 according to my test.In Firefox 3.5.2,only the begins are -15,others are -16,and the number of -15 is varying at different time,sometime 3 and sometimes maybe 4.

Then,codes following will works:

parseInt(-15.02,10);

随机内容

]]> http://www.hanguofeng.cn/archives/web-client/parseint-bug-in-firefox-3-5-2/feed 3 DreamWeaver CS4新特性之JavaScript http://www.hanguofeng.cn/archives/web-client/dreamweaver-cs4-new-feture-javascript?utm_source=rss&utm_medium=rss&utm_campaign=dreamweaver-cs4-new-feture-javascript http://www.hanguofeng.cn/archives/web-client/dreamweaver-cs4-new-feture-javascript#comments Fri, 26 Sep 2008 13:53:24 +0000 hanguofeng http://www.hanguofeng.cn/?p=56 据业界新闻称：

2008年9月24日，北京-今天，Adobe 公司（Nasdaq：ADBE）宣布推出业界的里程碑产品–Adobe® Creative Suite® 4产品家族。该产品能够应用于所有创意工作流，是业内领先的设计和开发软件。通过工作流的根本性突破，消除了设计师和开发工作者之间的壁垒。新的Creative Suite 4产品线包含数百个创新功能，全面推进了印刷、网络、移动、交互、影音视频制作的创意过程。该产品把整个产品线的Flash技术提升至整合力与表现力的新高水平，是Adobe迄今为止最大规模的软件版本，内容包括Adobe Creative Suite 4 Design editions、Creative Suite 4 Web editions、Creative Suite 4 Production Premium、Adobe Master Collection和13个基础产品、14项整合技术以及7种服务。

于是在官方下载了DreamWeaver CS4的PreRelease版来测试，解压和安装没有什么太多要说的，只是感觉比早先的DreamWeaver CS3的安装速度要快了不少，安装完毕，发现界面与之前相比有了一定的改变，如图（上图为DreamWeaver CS3，下图为DreamWeaver CS4）：

除了界面上的改变，该版本作为一个重要的里程碑版，还有许多更新，诸如：

  • 针对 Ajax 和 JavaScript 框架的代码提示
  • Adobe InContext Editing
  • HTML 数据集
  • Subversion® 集成
  • CSS 最佳做法

等，更多可以查看官方的fetures页。

这里我主要给您介绍一下关于JavaScript的部分新特性。

一、JavaScript代码外链。

我们知道，出于种种目的考虑，我们一般不在页面直接撰写JavaScript代码，而是将其放在外部的js文件中，这样做的好处，除了便于管理整个站点的JavaScript之外，还有助于多多借助客户端对js文件的缓存，减少很少改变的js文件的网络传输流量的浪费。

另外，出于多人协作和便于管理、便于敏捷变化和代码分层等原因，我们应该尽可能的做到结构-表现-行为的分离，在平常的代码编写中，你可能大量使用了诸如

<a onclick="alert_me('this is a link')" href="#">Click to alert me</a>

这样的代码，然而，这样做却是将行为耦合到了基本的代码结构中，我们提倡以添加事件的方式来将其完全分离到JavaScript代码中，这个操作也可以由DreamWeaver CS4来完成。

在DreamWeaver CS4中，则为我们提供了此功能，这个功能你可以在【Commands】->【Externalize JavaScript】中找到。

为了测试这两项特性，我们撰写了如下的代码：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function alert_me(msg)
{
	alert(msg);
}
</script>
</head>
<body>
<a href="#" onclick="alert_me('this is a link')">Click to alert me</a>
</body>
</html>

你可以看到，在这段代码中，不仅在页面中出现了JavaScript函数，而且还将行为直接绑定在了HTML标签中，这时使用【Commands】->【Externalize JavaScript】来打开DreamWeaver CS4为我们提供的工具，你可以看到，有两个选项，他们分别对应了只将页面中的JavaScript代码块分离为外部文件和与此同时分离HTML代码中的JavaScript，如图：

我们选择”Externalize JavaScript and attach unobtrusively”，即同时完成代码块和标签中代码的分离，命令执行完成后，页面的代码如下：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Untitled-15.js" type="text/javascript"></script>
</head>
<body>
<a href="#" id="a1">Click to alert me</a>
</body>
</html>

这样，就自动化的完成了相应的工作。

二、JavaScript代码提示。

一直以来，开发JavaScript没有特别顺手的IDE，Aptana算是一款基于Ecplise的JavaScript开发工具，提供了代码高亮和代码提示功能，如今，DreamWeaver CS4也提供了此功能，当我们构建JavaScript内置对象时，它已经可以进行代码提示了，如图：

除此以外，DreamWeaver CS4 还提供了对代码错误的提示，当代码出现错误，将在窗口顶端有一个黄色的提示条，同时在代码左侧行号处标识，如图：

三、对第三方JavaScript库的支持。

上面提到的Aptana同时提供对多种JavaScript的第三方类库，如Prototype、jQuery、YUI、ExtJS等的支持，DreamWeaver CS4也同样提供了，我们首先引入一个Prototype库，然后通过输入new Ajax.，试图构建一个Ajax的应用，此时DreamWeave CS4给出了Ajax类成员方法的代码提示，如图：

相关内容

]]> http://www.hanguofeng.cn/archives/web-client/dreamweaver-cs4-new-feture-javascript/feed 2 [译文]Google AJAX Language API对象参考 http://www.hanguofeng.cn/archives/web-client/google-ajax-language-api-class-reference?utm_source=rss&utm_medium=rss&utm_campaign=google-ajax-language-api-class-reference http://www.hanguofeng.cn/archives/web-client/google-ajax-language-api-class-reference#comments Sat, 22 Mar 2008 12:25:51 +0000 hanguofeng http://www.hanguofeng.cn/archives/web-client/google-ajax-language-api-class-reference 原文：http://code.google.com/apis/ajaxlanguage/documentation/reference.html

译言链接：http://www.yeeyan.com/articles/view/hanguofeng/5896

对象参考

全局方法

方法

返回类型

描述
google.language.translate(text, srcLang, destLang, callback) 无 全局方法，返回对支持的给定文本的目标语言翻译匹配文本。结果支持通过指定的callback函数进行异步调用。

  • text – 要翻译的文本。
  • srcLang – 以语言代码形式表现的源语言。参考Language 枚举。如果改惨啊数是一个空字符串，则系统将尝试自动识别源语言。
  • destLang – 以语言代码形式表现的目标语言。参考Language 枚举。
  • callback – 接收结果的回调函数。
google.language.detect(text, callback) 无 全局方法，返回描述给定语言文本的语言代码。结果支持通过指定的callback函数进行异步调用。

  • text – 要翻译的文本
  • callback -接收结果的回调函数。

结果对象

翻译结果

  • <result>
    • error?在载入feed时是否出现错误
    • translation翻译后的文本

检测结果

  • <result>
    • error?在载入feed时是否出现错误
    • language给定语言的语言代码。参考Language 枚举
    • isReliable一个布尔型变量来描述给定文本是否是可靠的
    • confidence一个基于0-1.0之间的数值，用来描述对给定文本的可信级别

Language枚举

google language的language枚举提供了对于名称常量到语言代码的映射，用来描述srcLang和destLang参数。以下是用在Google Translate的相同代码：

var google.language.Languages = {

  'ENGLISH' : 'en',

  'CHINESE' : 'zh',

  'CHINESE_SIMPLIFIED' : 'zh-CN',

  'CHINESE_TRADITIONAL' : 'zh-TW',

  'ARABIC' : 'ar',

  'FRENCH' : 'fr',

  'GERMAN' : 'de',

  'ITALIAN' : 'it',

  'JAPANESE' : 'ja',

  'KOREAN' : 'ko',

  'PORTUGUESE' : 'pt-PT',

  'RUSSIAN' : 'ru',

  'SPANISH' : 'es',

  'DUTCH': 'nl',

  'UNKNOWN' : ''

};

相关内容

]]> http://www.hanguofeng.cn/archives/web-client/google-ajax-language-api-class-reference/feed 0 [译文]Google AJAX Language API开发者参考 http://www.hanguofeng.cn/archives/web-client/google-ajax-language-api-developers-guide?utm_source=rss&utm_medium=rss&utm_campaign=google-ajax-language-api-developers-guide http://www.hanguofeng.cn/archives/web-client/google-ajax-language-api-developers-guide#comments Sat, 22 Mar 2008 12:13:15 +0000 hanguofeng http://www.hanguofeng.cn/archives/web-client/google-ajax-language-api-developers-guide 原文：http://code.google.com/apis/ajaxlanguage/documentation/

译言链接：http://www.yeeyan.com/articles/view/hanguofeng/5895

开发者参考

使用AJAX Language API，你可以仅使用JavaScript来完成对某个网页上某个区域的语言进行翻译和检测的工作。

API是新开发的，因此相对于一个完美的文档来说，可能有一些bug和微小的不足。我们会修补这些漏洞，因此请谅解、你可以加入AJAX APIs开发者论坛来给我们反馈和讨论这个API。

面向读者

本文档是面向对JavaScript编程和面向对象编程概念有所了解的人准备的。在互联网上有很多JavaScript教程。

介绍

在Google Ajax Language API上的”Hello,World”程序

开始学习本API的最简单方法是来看一个简单的例子，一下案例将检测给定语言，并且将其翻译为英文。

<html>

  <head>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    <script type="text/javascript">    google.load("language", "1");

function initialize() {

      var text = document.getElementById("text").innerHTML;

      google.language.detect(text, function(result) {

        if (!result.error && result.language) {

   google.language.translate(text, result.language, "en",

                             function(result) {

     var translated = document.getElementById("translation");

     if (result.translation) {

       translated.innerHTML = result.translation;

            }

          });

        }

      });

    }

    google.setOnLoadCallback(initialize);

</script>

  </head>

  <body>

    <div id="text">你好，很高興見到你。</div>

    <div id="translation"></div>

  </body>

</html>

你可以在这里查看该案例，并且随意修改和运行它。

在你的网页中包含Ajax Language API

为了在你的网页中加入AJAX Language API，你需要利用Google AJAX API Loader。该公有加载类允许你加载你所需要的所有AJAX API，包括这里的language API。你需要同时包含Google AJAX APIs的script标签并且调用google.load(“language”,”1″);。

<script type="text/javascript" src="http://www.google.com/jsapi" mce_src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

  google.load("language", "1");

</script>

第一个script标签加载了google.load函数，这个函数允许你加载特定的 Google API。google.load(“language”,”1″)加载了Language API的第一版。当前，AJAX Language API的版本为1，但是不久后新版本将可以使用。参考下面的版本讨论来获得更多信息。

API 更新

google.load函数的第二个参数实际上是你所使用的AJAX Language API的版本。当前，AJAX Language API的版本为1，但是不久后新版本将可以使用。

如果以后我们对API进行重要更新，我们将改变版本号，并且在Google Code和AJAX APIS 讨论中发布通知。当该事件发生后，我们预期会在至少一个月的时间内继续支持所有版本来使你有足够的时间来迁移你的代码。

AJAX Language API团队对于最近日较的Bug修复和平台优化进行定期更新。这些Bug修复应当仅提高表现和修复Bug，但是我们有可能不小心破坏某些API用户、请使用AJAX APIs 讨论组来报告这样的问题。

实例

语言翻译

本案例展示了一个简单的对一个JavaScript字符串变量进行翻译的过程。

google.language.translate("Hello world", "en", "es", function(result) {

  if (!result.error) {

    var container = document.getElementById("translation");

    container.innerHTML = result.translation;

  }

});

查看案例（translate.html）

语言检测

这个案例展示了对于一个JavaScript字符串的语言检测。将返回语言代码。

var text = "¿Dónde está el baño?";

google.language.detect(text, function(result) {

  if (!result.error) {

    var language = 'unknown';

    for (l in google.language.Languages) {

      if (google.language.Languages[l] == result.language) {

        language = l;

        break;

      }

    }

    var container = document.getElementById("detection");

    container.innerHTML = text + " is: " + language + "";

  }

});

查看案例 (detection.html)

翻译时源检测

如下的案例类似于基本的翻译案例，但是它展示了如何在不知道源语言时对文本进行翻译。通过传入一个空字符串来表示未知的源语言，系统将在一次调用中自动检测和翻译。

google.language.translate("Hello world", "", "es", function(result) {

  if (!result.error) {

    var container = document.getElementById("translation");

    container.innerHTML = result.translation;

  }

});

更多案例

这里有进行交互作用的两个附加案例。第一个案例对预输入的文本字符串进行语言检测，同时也允许输入其他的文本。它同时也显示信任和可靠因数（confidence and reliability factors-译者注）。

查看案例(detect.html)

第二个附加案例进行翻译。同时他也允许与上述类似的交互作用。

查看案例(translate.html)

API细节

支持的语言

Google AJAX Language API现在支持下列语言。该技术正在不断的提高，同时我们的团队也在努力的扩展这个列表，因此请经常回来看看。你也可以访问Google Translate来查看最近更新的列表。

  • Arabic （阿拉伯语）
  • Chinese (Simplified and Traditional) （中文简体）
  • Dutch （荷兰语）
  • English （英语）
  • French （法语）
  • German （德语）
  • Greek （希腊语）
  • Italian （意大利语）
  • Japanese （日语）
  • Korean （韩语）
  • Portuguese （葡萄牙语）
  • Russian （俄语）
  • Spanish（西班牙语）

支持的语言翻译对

Google AJAX Language API现在支持下列语言翻译对。该技术正在不断的提高，同时我们的团队也在努力的扩展这个列表，因此请经常回来看看。你也可以访问Google Translate来查看最近更新的列表。

  • Arabic to English （阿拉伯语到英语）
  • Chinese to English （中文到英语）
  • Chinese (Simplified to Traditional) （简体中文到繁体中文）
  • Chinese (Traditional to Simplified) （繁体中文到简体中文）
  • Dutch to English （荷兰语到英语）
  • English to Arabic （英语到阿拉伯语）
  • English to Chinese (Simplified) （英语到简体中文）
  • English to Chinese (Traditional) （英语到繁体中文）
  • English to Dutch （英语到荷兰语）
  • English to French （英语到法语）
  • English to German （英语到德语）
  • English to Greek （英语到希腊语）
  • English to Italian （英语到意大利语）
  • English to Japanese （英语到日语）
  • English to Korean （英语到韩语）
  • English to Portuguese （英语到葡萄牙语）
  • English to Russian （英语到俄语）
  • English to Spanish （英语到西班牙语）
  • French to English （法语到英语）
  • French to German （法语到德语）
  • German to English （德语到英语）
  • German to French （德语到法语）
  • Greek to English （希腊语到英语）
  • Italian to English （意大利语到英语）
  • Japanese to English （日语到英语）
  • Korean to English （韩语到英语）
  • Portuguese to English （葡萄牙语到英语）
  • Russian to English （俄语到英语）
  • Spanish to English（西班牙语到英语）

问题解决

如果在你的代码中遇到了问题：

  • 检查代码。请牢记JavaScript是对大小写敏感的语言。
  • 使用JavaScript调试器、在Firefox中，你可以使用JavaScript控制台或者FireBug扩展。在IE中，你可以使用Microsoft Script Debugger。
  • 在AJAX APIs讨论组中搜索。如果你找不到回答你问题的帖子，那么可以在讨论组中发布你的问题，并且包含指向你出问题的页面的链接。

相关内容

]]> http://www.hanguofeng.cn/archives/web-client/google-ajax-language-api-developers-guide/feed 0