外网Queness曾发表博文《10 Jaw Dropping HTML5 and Javascript Effects》，文中介绍了10 个奇幻的HTML5和Javascript效果。个人网站“我爱互联网”对此文进行了翻译，现把译文转载于此，全文如下：
又10款令人惊奇的HTML5和javascript效果，今天网游的时候，又偶然踫到的这几款很不错的效果。回到几年前，这些效果是根本不可能实现，只能用flash做，但是现在，已经很轻松的就可以实现了。
之前也发布了几篇此类的文章，但觉得这几款效果确实很让人难以割舍，它们奇幻、炫丽，还是收藏了和大家一起分享吧。:-p
等会，大家要记得用高版本的一些浏览器哦，要不看不到效果的，我用的是Firefox3.5.11。
个人非常喜欢Breathing Galaxies和FlowerPower，真得很炫，你喜欢哪款呢？
Breathing Galaxies
使用键盘来改变形状中的线条样式，或移动鼠标来创建一个新的形状。
Noise Field
移动鼠标来改变粒子的运动。点击随机产生参数。
Keylight
根据按键放置的位置不同来产生不同的单调。
Swirling Tentacles
循环产生彩色不同颜色的三维线。
FlowerPower
来自于大自然另一个灵感 – 使用贝赛尔曲线做为笔刷绘图工具花朵，使用鼠标点击或拖动均可看到效果。
Blob
一滴可以在屏幕上抛掷的柔软的水泡，它可以在浏览器窗口中弹跳。这个水泡可以分割成许多小水滴（双击），如果他们碰撞小水滴们还会合并成一个大水滴。
Rotating Spiral
你是越来越困，很困…. 独立旋转螺旋的效果 – 简单，但视觉吸引力。点击开始，停止和扭转旋转。
Magnetic
磁点是用来控制粒子流。如果有很多粒子围绕磁铁，它会辐射的颜色和大小的增加。鼠标双击操作。
Trail
五颜六色的粒子跟随鼠标并在鼠标周围旋转，同时生成一个有机的痕迹，然后慢慢地淡出。
Graph Layout
一种交互式力向图的布局。
原文链接：10 Jaw Dropping HTML5 and Javascript Effects
译文链接：10个奇幻的HTML5和Javascript效果
最近遇到的怪事越来越多，之前是因为在页面内嵌javascript代码中的一段小小的注释引来的xss漏洞。昨天又遇到一个javascript代码考虑不周导致的不停刷新页面的情况，如果这个页面被别人发现了，很容易就会导致站点的ddos攻击。
网站的很多登录操作最终都会转到一个页面去统一处理，这个页面根据传入的参数的不同，然后跳转到对应的页面去。如果这个跳转页面的js没有判断好要跳转过去去的页面是不是自己。
一些用户就会将跳转的页面设置为这个页面，将导致这个页面不停的在自身进行跳转，不停的刷新。如果规模过大的话，这个攻击就变得很强大了。
所以在写js代码的时候还是要多多考虑一些边界的条件，js代码也会攻击的。例如，下面这段代码，如果前面增加一些输入的判断，不小心判断出错，让自己跳转到自己的话，该页面不停的刷新自己，麻烦就到了。
<html>
<head>
<title>location auto reload</title>
</head>
<body>
location auto reload
<script type="text/javascript">
var url = window.location.href;
window.location.reload(url);
</script>
</body>
</html>
呵呵，注意一下location这个对象：
Location 对象的 reload() 方法可以重新装载当前文档，replace() 可以装载一个新文档而无须为它创建一个新的历史记录，也就是说，在浏览器的历史列表中，新文档将替换当前文档。
Location 对象属性
属性
描述
IE
F
O
hash
设置或返回从井号 (#) 开始的 URL（锚）。
4
1
9
host
设置或返回主机名和当前 URL 的端口号。
4
1
9
hostname
设置或返回当前 URL 的主机名。
4
1
9
href
设置或返回完整的 URL。
4
1
9
pathname
设置或返回当前 URL 的路径部分。
4
1
9
port
设置或返回当前 URL 的端口号。
4
1
9
protocol
设置或返回当前 URL 的协议。
4
1
9
search
设置或返回从问号 (?) 开始的 URL（查询部分）。
4
1
9
Location 对象方法
属性
描述
IE
F
O
assign()
加载新的文档。
4
1
9
reload()
重新加载当前文档。
4
1
9
replace()
用新的文档替换当前文档。
4
1
9
写代码最好形成一定的编码规范，这样的话在交接起来，或者一起编写代码的时候会变得容易很多！
下面整理了一些编写javascript代码的时候常常注意的一些规范：
1 每行80个字符，很多编辑工具可以方便的来设置这个值的
2 注释 最好是单独的一行，要具有意义：
//a的作用是***
var a = 2;
3 变量的声明务必要有var，否则会导致大量的全局变量的存在，从而引起不必要的混乱
var a = 3;
function testVar(){
var a = 4;
alert(a);
}
testVar();
alert(a);
4 每行只写一条执行语句，这样代码看起来简单明了
5 缩进建议统一使用4个空格的tab来缩进。由于tab在不同的编辑器下的长度是不一致的，所以需要规定就是4个空格，处理起来会一致一些
6 return 表达式返回的时候，一定要将需要返回的表达式写在一行，否则可能会因换行解释成为结束，到时return一个undefined的值
function a(){
return
1;
}
alert(a());
7 如果要用到内部函数的话，建议使用“_”开头，如function _inFunc()感觉区分明显一些
8 变量命名的话，尽量保持有语义一些，少用全局变量，采用匈牙利命名方式，如wordPress这样的
大概想到这么多，欢迎补充。
在写javascript的时候，常常会为了ie做一些特殊的事情，如使用canvas，一些ie下特有的插件啥的。这些事情在其它的浏览器又不需要，如何来只是根据ie浏览器选择对应的javascript代码呢。
ie浏览器提供了条件注释来实现这个目的。
1 如何根据浏览器的类型做一些不同的事情？
Web服务器使用useragent，如browsermatch。BrowserMatch regex [!]env-variable[=value] [[!]env-variable[=value]] ...
譬如在服务器配置压缩的时候，针对一些浏览器做一些特殊的设置，
# Netscape 4.x 有一些问题...
BrowserMatch ^Mozilla/4 gzip-only-text/html
2 能否在前端来做一些条件判断的东东？
尤其是在加载一些为特定浏览器编写的javascript和css的时候（尤其是ie），能否直接在浏览器中来做条件过滤。
ie5以及其后的版本都支持条件注释
好处：
1) 一些低版本浏览器没有支持的特性，低版本浏览器都不回去进行解析和下载。
2) 跨浏览器，向后兼容。
条件注释的语法：
1 向后隐藏的。低版本浏览器不支持的话，就不会做任何的事情。ie5以后的版本会判断条件是否为真来解释执行注释中的代码。
<!--[if expression]> HTML <![endif]-->
<!--[if IE 8]>
<p>Welcome to Internet Explorer 8.</p>
<![endif]-->
当浏览器的版本号是ie8的时候才会执行下面的代码。
2 向后兼容的。低版本浏览器也会来进行解释执行。
<![if expression]> HTML <![endif]>
由于注释部分不是合法的html标签，所以会被低版本的浏览器忽略。因此代码会被执行。
<![if lt IE 9]>
<p>Please upgrade to Internet Explorer version 9.</p>
<![endif]>
条件注释中常常使用到的条件判断：
Item
Example
Comment
IE
[if IE]
The string "IE" is a feature corresponding to the version of Internet Explorer used ...
呵呵，有时常常会对Javascript对url编码的三个函数：esapce，encodeURI，encodeURLComponent，以及这个三个函数对应的解码函数感到困惑。
今天就来一一解读一下，整理一下自己的思路:):
1 escape
这个是最古老的，实际上，escape()不能直接用于URL编码，它的真正作用是返回一个字符的Unicode编码值。比如“春节”的返回结果是%u6625%u8282，也就是说在Unicode字符集中，“春”是第6625个（十六进制）字符，“节”是第8282个（十六进制）字符。 在地址栏执行：javascript:alert(escape('春节'))试试。
它的具体规则是，除了ASCII字母、数字、标点符号“@ * _ + - . /”以外，对其他所有字符进行编码。在\u0000到\u00ff之间的符号被转成%xx的形式，其余符号被转成%uxxxx的形式。
对应的解码函数是unescape()。
2 encodeURI
encodeURI()是Javascript中真正用来对URL编码的函数。
它着眼于对整个URL进行编码，因此除了常见的符号以外，对其他一些在网址中有特殊含义的符号“; / ? : @ & = + $ , #”，也不进行编码。
编码后，它输出符号的utf-8形式，并且在每个字节前加上%。试试：javascript:alert(encodeURI('http://www.qq.com?a=春节&b=3+2'));
它对应的解码函数是decodeURI()。
3 encodeURIComponent
最后一个Javascript编码函数是encodeURIComponent()。与encodeURI()的区别是，它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。
因此，“; / ? : @ & = + $ , #”，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码。至于具体的编码方法，两者是一样。
试试这段代码：javascript:alert(encodeURIComponent('http://www.qq.com?a=春节&b=3+2')) 所以使用encodeURIComponent时一般都是对参数来进行编码。
它对应的解码函数是decodeURIComponent()
参考：
http://www.w3school.com.cn/js/jsref_escape.asp
在我们的页面中，如果不是显示指出来的话，javascript是同步加载的，也就是javascript的加载是阻塞的，后面的元素需要等待javascript加载完毕后才能进行再加载。呵呵，对于一些意义不是很大的javascript，如果放在页面的头部，如果加载很慢的话，会严重影响用户的体验的。
有人会问这时为什么呢？因为有可能你的javascript代码会动态的植入一些元素到页面的dom中。
因此对于那些会有修改dom的javascript（最简单如里面会有document.writlen这样的语句），我们只能阻塞的加载，而且最好也是放在页面的最底部。但是对于那些不会导致dom修改的javascript，如一些统计的javascript，如google的统计等，我们完全可以异步的来加载，不必同步阻塞的来等待。如何异步加载一个javascript文件呢？
一 defer方式
在w3c的html中定义的script标签有一个defer的属性，这个属性开启的话表示这段javascript代码可以延迟加载。
<!ELEMENT SCRIPT - - %Script; -- script statements -->
<!ATTLIST SCRIPT
charset %Charset; #IMPLIED -- char encoding of linked resource --
type ...
js的框架现在很多了，而且都很好使用，诸如jquery、yui、ext等，但是有的时候我们只需要一些小小的功能，加载一个大的框架又觉得比较的麻烦，如trim这样的，于是我们就要自己动手来写代码了，往往这些代码散落在之前写的很多地方，很少整理过。每每要用的时候又要回过头来找，麻烦啊。这里整理诸如trim、排序、cookie操作相关的函数，做一个小小的备份，后续使用起来也方便一些。
1 trim：将一个字符串前后的空格去掉，利用正则表达式实现起来比较方便。(个人不太建议随便修改内置对象的prototype)
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
}
String.prototype.ltrim = function() {
return this.replace(/^\s+/g,"");
}
String.prototype.rtrim = function() {
return this.replace(/\s+$/g,"");
}
var test = " Test ";
var test1 = test.ltrim(); // returns "Test "
var test2 = test.rtrim(); // returns " Test"
var test3 = test.trim(); // returns "Test"
2 Array ...
我们写的javascript不一定都能保证是没有问题，可能在某些特殊的环境下，后者某些浏览器上，某些用户的cookie环境等导致javascript代码执行出错。这个时候我们需要知道javascript代码执行有问题，从而在下一个版本中解决这个问题。
怎么来发现我们的javascript代码有问题呢，通过damnit网站提供的工具可以方便的解决这个问题。
1 在ie和firefox下onerror这个事件，当javascript代码执行出错的时候，会触发这个事件，我们添加这个事件的处理函数，在处理函数里面添加上报即可。
如果需要利用 onerror 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）
onerror=handleErr
var txt=""
function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt);
return ...
一些好的开发工具，每次总是要用的时候才去慢慢的搜索查找，实在太麻烦，今天整理一下之前用到的javascript开发过程中使用到的一些开发工具，便于以后找起来比较方便：
javascript代码格式化工具http://jsbeautifier.org/，不仅仅是格式化，还是反编译的工具，查看json数据的时候也比较方便。
javascript代码检测工具http://jslint.com/ ，对你的javasrcipt代码进行严格的检查，规避潜在的代码风险。JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool.
javascript代码压缩工具http://www.crockford.com/javascript/jsmin.html，去除你代码中的无用的字符，如回车，换行。对于该的空格，tab键等，配合jslint使用能够极大的较少你的js代码的大小。
javascript代码混淆压缩工具http://dean.edwards.name/packer/，不但压缩你的javascript代码，同时将其中的变量以及函数进行hash混淆，导致代码变得很难读，同时大小也压缩惊人。
json格式检查工具http://www.jsonlint.com/，检查你的json是否是合法的格式，定位其中存在的问题。
javascript代码压缩工具之yui compressorhttp://developer.yahoo.com/yui/compressor/ ，jsmin之外的另外一个javascript压缩整理工具。
javascript调试工具 firebug，vs studio，Companion.JS
javascript代码注释工具 jsdoc http://jsdoc.sourceforge.net/
javascript内存泄漏查看工具 Drip/sIEve
这是来自微软GPDE团队的一个查看javascript内存泄漏的小工具Javascript Leaks Detector
firefox下的内存泄漏检测工具 Leak Monitor
你还想到什么工具，欢迎回复！
Posted in
Web前端Tags:
firebug,
javascript,
javasscript内存泄漏,
js pack,
jsbeauty,
jslint,
jsmin,
jsodc,
js代码压缩,
js代码注释,
js格式化,
js混淆
看到一些js代码中常常会有这样的操作if(!!a)或者var a = !!a ;一直有点不太理解，今天有人问了这个问题，于是去查找一下。
两次求!!的用意何在呢？
在firebug中试试如下一段代码：
1 var a = true && "test";
alert(a);alert(typeof a);
得到的值是test和string
2 var a = 0 && "test";
alert(a);alert(typeof a);
得到的值是0和number
新的ecma标准中说：
expr1 && expr2; // 如果为false返回expr1, 反之返回 expr2
expr1 || expr2; // 如果为真返回expr1, 反之返回expr2
var a = !!a;的目的就是为了是的a变成一个boolean类型的变量，同时能够保持应该是bool值。
如： var a = true && "test";alert(a === true)是false的，这是如果希望a === true，那么就需要将a进行两次的!!操作。
如上述，不知道你明白了没！o(∩_∩)o 哈哈
了解一下javascript中的boolean类型的潜规则转换：
Boolean( false ); ...