守望轩 » javascript

帮帮我！我不懂JavaScript

xjb — Wed, 30 Sep 2009 06:02:50 +0000

本文翻译自著名的Javascript库mootools的一篇Javascript入门文章Help! I Don’t Know JavaScript!，虽然是2007年的旧文，但现在看来仍是比较好的学习HTML,CSS,JavaScrip入门知识资源与参考文章，对javascript初学者很有帮助。

——————————————————————————–
为所有对MooTools感兴趣的开发者，我编制一份清单，在这个清单里提供关于客户端开发需要了解的各种资源。
http://www.watch-life.net/javascript/help-i-dont-know-javascript.html

专业工具

这是进行web开发的先决条件
Firefox:你需要使用Firefox进行开发。但你需要在你管理的电脑上安装所有的浏览器，以便检查跨浏览器支持。

基本的扩展（firefox的扩展）

firedebug

有史以来最好的firefox插件，Firebug让你知道那些令你头痛不已的代码是如何在页面运行的。

Web Developer Toolbar

给你全面掌控网站的力量。禁用Javacript，查看不加载css时的页面运行，禁用referrers，禁用严格的警告，等等更多超出你想想的功能，

基础知识学习

别让对HTML的不了解阻碍你的web开发。

如何创建HTML
以下这些网络链接非常不错，不仅涉及相关细节，而且涉及语法和很好的练习，是可读性很好的参考

Mozilla开发者中心(Mozilla Developer Center ，MDC)
也许是网络上最全面的web开发信息中心，特别是针对Firefox或Mozilla的开发，这里应该成为你主要参考指南。

HTML
CSS
JavaScript
Bonus Points: DOM

W3 Schools

W3 Schools提供一站式的web技术参考，而且比W3C提供的原始文档更通俗易读。MDC虽然不错，但有一些可以用来运行的参考资料也是个不错的主意。

Microsoft’s Developer Network（MSDN）
不要被它的名字给蒙蔽了，其实JScript是和JavaScript一个东西。我认为微软（microsoft）应该因为MSDN获得一两个实用性网站的奖项。特别是当你与IE的不规范进行斗争的时候，你应该来访问这个网站。

其他资源
如果好奇，你可以读一下A List Apart,了解一些奇妙的技巧。

你也可以访问Mootools的在google上的用户组，或者非官方的论坛

JavaScript详细参考

JavaScript 是世界最酷的编程语言。首先，要想掌握好JavaScript，你必须认识到和你过去最喜欢的语言是不同的。只有明白这个事实后，你可以看看下面这些参考教程。

基础学习

来些轻松有趣的，Yahoo的一些让人敬佩的人上传了他们许多普及性培训的视频，对我们来说这是件了不起的事，因为我们对JavaScript的学习简单到了只需要花几个小时去看这些聪明人的谈话。

令人激动的Javascript三部曲

Javascript编程语言

DOM原理

高阶Javascript

特别收录

注：以上视频需要翻墙才可以查看。

独自学习

一旦你做完上面这些事，就可以利用google的帮助进行尝试，直到你可以使用原始的javascript写几个基础的有趣跨浏览器的AJAX的应用，不需要多久，你不需要google也可以做一些不花哨的应用。我认为你应该看一些对你有帮助的原始的Javascript框架，理解这些框架如何运行，以及理解框架提供的丰富功能。

有篇文章《JavaScript的知识缺陷（The JavaScript knowledge gap）》，你看看会觉得很有趣。

通过示例学习

如果你要成为一个很好的javascript程序员，最好的方式就是去看别人写的示例代码。换句话说，你可以看看 MooTools的源代码，从中获取不少灵感。你不仅可以吸收很多好思路，你还能更深的理解这一框架。

进阶到高阶水平

如果你确切完成了我上面列举的大部分学习内容，那么是时候下载MooTools了，我们很乐意看见在论坛提交你的问题，在IRC里潜水，为Mootools社区做出贡献。

下载完整的未经压缩的源码，并应用在你的开发项目上，如果你做个改变，看看会发生什么。试着找出bug点，并给出解决方法。尝试做一些插件，只是要确保你的插件的名称与MooTools相关联。

持续关注

常来我们的博客看看,这里有许多你需要了解有关调试的知识和有关MooTools框架的一些高阶的阅读资料。

你可能也会喜欢以下文章：

转载请注明作者，出处，以及原始超链接。
评论数：3 | 评论这篇文章|关注作者最近动态,欢迎 follow me xjb@twitter.com|联络作者：iamxjb@gmail.com
© 2010 守望轩 www.watch-life.net

兼容多种浏览器“复制到剪贴板”的解决方案

xjb — Thu, 05 Mar 2009 03:10:00 +0000

昨天在也一个php程序的时候，要实现“复制到剪贴板”的功能，安全问题，浏览器的限制越来越严，实现的方法也越来越有限，这个简单的功能要想实现兼容不同的浏览器还真不容易，根据网上的一些资料结合我测试的经验，相关解决方案如下：

方案一：利用“window.clipboardData”

代码示例：

if (window.clipboardData) {

        window.clipboardData.clearData();

        window.clipboardData.setData("Text", txt)
};


  评论：这个方案只适合IE浏览器，同时在IE7下有个如下安全提示的对话框。
 
 由于IE的浏览器的占有率比较大，这个方案是使用最广的，也是最简单的方法。
支持浏览器：IE5.5 IE6.0 IE7.0
方案二：利用“Components.interfaces.nsIClipboard”
代码示例：
if (window.netscape) {

        try {

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

        } catch (e) {

        if (flag == 0) {

            alert("You are using the Firefox browser, copy the function browser refuse！
\nPlease in the browser address bar enter'about:config' and Enter \n and set'signed.applets.codebase_principal_support' to 'true'");
        } else {

        alert("你使用的是Firefox 浏览器,复制功能被浏览器拒绝！\n请在浏览器地址栏输入'about:config'
并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'");
        }

        }

        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 = txt;

        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);
}
评论：这个方案只适合Firefox,同时也有安全的问题，如果想使用这个方法，必须手动开启Firefox的一个配置：signed.applets.codebase_principal_support。方法是：在地址栏输输入“about:config”,设置“signed.applets.codebase_principal_support”为true，默认该项是false。
 

这个方法虽然可以在Firefox使用，但让一个普通用户去开启这个配置似乎太专业了。
把这个方案和方案一结合，可以适用80%以上的用户。
支持浏览器：Firefox1.5  firefox2.0  firefox3.0
方案三：javascript + flash
代码示例：
var flashcopier = 'flashcopier';

        if (!document.getElementById(flashcopier)) {

            var divholder = document.createElement('div');

            divholder.id = flashcopier;

            document.body.appendChild(divholder);

        }

        document.getElementById(flashcopier).innerHTML = '';

        var divinfo = '+ text2copy + '" 
width="0" height="0" type="application/x-shockwave-flash">';
        document.getElementById(flashcopier).innerHTML = divinfo;}
评论：这个方案是一个最流行的方法，著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁，复制内容到剪贴板。原理是：创建一个隐藏的flash文件，同时给给flash的变量FlashVars 赋值“clipboard=..”，通过这个赋值flash就会把复制的内容放到剪贴板。这个方法兼容IE、Firefox、Opera、chrome、 Safari，真可谓“万能”的解决方案。浏览器Flash的安装率非常高，这几乎是一个完美的解决方案。
clipboard.swf 的下载地址：http://watch-life.googlecode.com/files/clipboard.swf。
但是，世界上有完美的事么？这个方法只支持flash 9 ，不支持最新的flash 10。因为flash10中规定了只有在swf上进行了真实的操作（比如鼠标点击）才能访问剪切板，而上述方法只是使用了一个隐藏的swf文件，通过javascript操作flash的剪贴板，用户并没有对swf文件进行真实的操作，因此这个方法也就失效了。
那么如何解决这个“真实操作”的问题呢？可以使用一个JavaScript库：Zero Clipboard，利用这个js库可以支持利用flash 10 实现复制到剪贴板。这个方法原理是在一个透明的flash（对用户来说是不可见的）上覆盖一个dom元素比如button或div，当点击这个dom时，实际点击的是flash，从而访问flash的剪贴板。真够曲折的。:-)
具体的实现详见如下链接：
DEMO页面 :  http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/
Zero Clipboard项目主页： http://code.google.com/p/zeroclipboard/
支持浏览器：Firefox1.5  firefox2.0  firefox3.0 IE5.5 IE6.0 IE 7.0 opera 8 opera 9 chorme 1.0 chorme 2.0 safari 3



	你可能也会喜欢以下文章：
	
	对Google chrome OS 有点失望 (5)
	web developer tips (4):在Visual Web Developer中增加浏览器 (3)
	英文阅读：Matt Cutts关于google chrome常见疑问的回答 (0)
	Google Chrome 初试手记 (3)
	帮帮我！我不懂JavaScript (3)
	Google Chrome 会是IE的终结者么？ (5)
	web developer tips (51):使用vs2005和IE8进行调试 (0)
	让GridView中CheckBox列支持FireFox (0)


转载请注明作者，出处，以及原始超链接。
评论数：4 | 评论这篇文章|关注作者最近动态,欢迎 follow me xjb@twitter.com|联络作者：iamxjb@gmail.com
© 2010 守望轩 www.watch-life.net