手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

用按位或操作将 浮点数 转成 整数

看到一篇文章,是这样说的:

use bitwish Operators "|"  Convert a floating-point value to an int
意思就是:
由于位操作只对整型才有意义,所以表达式中的浮点数会首先被js解析器转换成整型.
然后再用js解析器本身的语言(例如:c++)的或操作将算 运符两边的数值运算,所以该例的结果得到整数1.

 

JavaScript代码
  1. alert(0|'123.55');  
  2. alert(parseInt('123.55'));  
  3. alert(Math.round('123.55'));  

上面三种都可以转成int,但是math.round会四舍五入。

Tags: 浮点, 位或

javascript:void(0);

我看的这篇文章介绍的很少,只是一个简单的说明,在网页中,很多人把void当成了一个阻止默认事件发生的工具,因为他没有返回值,所以使用的时候可以肆无忌惮一点。

原文如下:

Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。

void 操作符用法格式如下:
1. javascript:void (expression)
2. javascript:void expression
注:expression 是一个要计算的 Javascript 标准的表达式,圆括号是可选的。

当使用 void 操作符指定的超链接时,表达式会被计算但是不会在当前文档处装入任何内容。

举例:

XML/HTML代码
  1. <A HREF="javascript:void(0)">单此处什么也不会发生</A>  
  2. <A HREF="javascript:void(document.form.submit())">单此处提交表单</A>  

跳转的几种办法:

XML/HTML代码
  1. 1.window.open("url")  
  2.   
  3. 2. 用自定义函数  
  4.          <script>  
  5.          function openWin(obj,target,args)  
  6.          {  
  7.              obj.target="_blank";  
  8.              obj.href = target+"?stationno="+args;  
  9.              obj.click();  
  10.          }  
  11.         </script>  
  12.   
  13. <a href="javascript:void(0)" onclick="openWin(this,"…………",3)">XXXX</a>  
  14.   
  15. 3.window.location.href="";  

 

上述第二种就是所谓利用void来阻止默认链接事情的发生。
还有一种情况就是在href里加入"###",即href="###",为什么是3个而不是一个?这也有一个缘故,请查看:FORM不能跳转,当找不到相应的锚点时,页面才不会往上滚动,如果指定锚点,而锚点名称为空,页面会滚动到顶部。###,其实只是指定一个不存在的锚点而已(又写的乱了)

Tags: void, window.open

雅虎JavaScript架构师:网页开发技术安全优先

html5 越来越近了,HTML5可能给我们带来很大的改变,就象新的标签可以支持视频了。看看javascript的架构师能够做什么吧。原文来自http://www.cnbeta.com/articles/109538.htm

由于当前技术仍偏向功能强化为主要思维,指令码趋向庞杂的结果,容易产生更多安全漏洞,且失去快速因应攻击调整架构的灵活性。
身 为JavaScript网路技术重要推手的雅虎(Yahoo!)架构设计师Douglas Crockford表示,现行网页开发技术思维仍偏重多媒体功能或浏览效能的提升,未来应以安全为第一优先。 Crockford 现为Yahoo!资深JavaScript架构师,负责YUI(Yahoo! User Interface)的架构设计,并且担任ECMA JavaScript 2.0技术委员会成员,为JavaScript开发社群大师级人物,此次受邀来台参加OSDC(Open Source Developer's Conference Taiwan)进行专题演讲,向国内开发者介绍ECMA JavaScript的发展。

Crockford向媒体阐述网络技术发展时指出,当前的网络技术仍然不脱过去的思维,网页开发技术仍以功能强化、浏览网页效能提升为主,虽然强 化了网络开发的丰富性,但未将网络安全列为开发优先考虑因素的结果,致使网络安全事件层出不穷。

延续过去网络开发思维的结果,现今网络技 术强调强大的互动、多媒体功能,但也让一些攻击手法兴起,以XSS(Cross-Site Scripting)为例,由于内嵌多个不同来源的脚本,容易让黑客借指令集趁虚而入,窃取用户端计算机的数据。

虽然也有新的技术,如 Google推动的Caja,用以防范XSS跨站攻击手法,但整体技术发展方向仍是朝功能、效能提升前进。

以HTML 5技术为例,Crockford表示,虽然HTML5增加了许多功能,但让整个脚本变得更为庞大且复杂,容易产生漏洞遭到攻击;另外,支持存取使用者电 脑、手机的终端数据,将数据被窃的安全风险扩大至手机上,而过于庞大复杂的结果,不容易因应日新月异的攻击手法改变,长期而言易形成安全风险。

对 于当前浏览器业者形成速度竞赛,纷纷强化JavaScript引擎加速网页浏览速度,号称最快的浏览速度,他认为,浏览器加速网页浏览速度虽是好事,但这 样改善方式有限,只在5至10%的终端浏览器部份加速,若能同时改善服务器端,加速的效果更大。

对于制定中的新标准ECMA Script 5,他乐观预期未来将成为主要的网络开发标准,虽然Apple、Chrome还不明确,但包括IE、FireFox、Opera都倾向ECMA Script 5,今年应会看到新的浏览器应用。
--EOF--
HTML5已经被越来越多的浏览器所支持,IE还能挺多久?是否又会创造出什么新标准?从IE4开始,多少网页设计师为了兼容所有的浏览器而痛苦?以后又会怎么样?IE6还有这么多用户,怎么办?这一些都让人迷惘啊。HTML5来了,对于前端工程师的压力就要更大一点了。代码没写好,很可能就直接被人利用了。以前的XSS漏洞可能会被更加扩大、放大。还是需要多学一点安全了

Tags: html5, ecmascript, javascript, chrome, yahoo

在非IE浏览器中实现“灰阶化[1]”

原文:http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

在非IE浏览器中实现“灰阶化[1]”

这个问题看似简单,实际上要付出很大的努力[2]。要的结果很简单:在所有非IE浏览器中模拟Internet Explorer浏览器的grayscale(灰度)滤镜。然而,它的解决方法并非你想得那么简单,这也让我着实大大地吃了一惊。

在 IE中,grayscale滤镜可以应用到任意一个元素中,它会很直观地将元素转变为灰度。可以使用下面 这行复杂且专有的CSS来实现grayscale滤镜。

JavaScript代码
  1. elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';  

如上所示,在IE中实现这种效果简单是小菜一碟;然而,在其他的浏览器中,需要引起很大的关注。

需要有两件情况值得考虑:图片元素和非图片元素。“非图片”类元素实现十分简单:在当前文档中遍历每个元素,寻找类似“backgroundColor”和 “color”的色彩属性,将它的RGB颜色值转换为灰度值。有不少方法可以实现;注意我们这里不是说降低图片的饱和度;“灰阶化”很明显跟它不一样。

JavaScript代码
  1. // Desaturate:降低饱和度  
  2. function RGBtoDesat(r,g,b) {  
  3. var average = (r + g + b) / 3;  
  4. return {  
  5. r: average,  
  6. g: average,  
  7. b: average  
  8. };  
  9. }  
  10.    
  11. // Grayscale:灰阶化  
  12. function RGBtoGrayscale(r,g,b) {  
  13. var mono = parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );  
  14. return {  
  15. r: mono,  
  16. g: mono,  
  17. b: mono  
  18. };  
  19. }  

因此,每个带颜色属性的元素要使用它来转为灰阶;初始颜色用来重置属性值。

我们的图片能否转为灰阶取决于两个因素;一是浏览器必须要支持HTML5 canvas元素和它getImageData方法,二是主机上的所有图片必须位于同一域名下;除此外,主机上的图片不能脱离getImageData方法而不管它是否支持[3]。Google Chrome浏览器和Safari(4以下版本)由于不支持getImageData,先不作讨论。其他的浏览器支持canvas元素,完全可以做到“灰阶化”图片。

实现这种方式是要“手工”遍历图片中的每一像素,并应用我们用来设置CSS 颜色属性的RGBtoGrayscale函数。真要这样做的话,浏览器绝对吃不消;除非有极其快速的Javascript引擎来承受大图片处理的压力。

鉴于上面提到的原因,因此在任一个元素需要“灰阶化”前,添加一个“预置”函数去运行显得尤为必要,这个函数可以使用零超时递归技术[4]来避免耗死浏览器。如果仅仅是小图片需要转换的话,不必使用“预置”函数,可以直接使用这种暴力转换。

为什么呢,这是为什么呢?

你肯定想知道在“灰阶化”会有哪些应用。那么,比如说:降低色彩以减少用户的视觉焦点,以此来减少用户对你网站上五颜六色东西的关注;比如说,光箱特效。像 vBulletin的论坛系统就使用了这种效果,它会你点击离开时,将页面变灰;然后会弹出确认框,这个确认框非很容易识别,因为它是页面中惟一的带色彩的东西。

“灰阶化”困扰我的真实原因是因为我很想知道是否有可能做到这个目的。我已经知道在IE浏览器里有这个滤镜,我还想看看在其他浏览器中能否模拟实现这种方便的特效。我也知道这种特效可能被认为已经过时了,但这并不重要;我仅仅是对实现它很感兴趣。

示例

我做了一个示例页面,上面有几个格斗士[5]的图片,功能已经在这篇文章中说过了。注意,在Safari(小于4)或才 Chrome(还有可能在Firefox老版本(V.2以前))不起作用;不要忘了它仅仅是一个试验。
http://james.padolsey.com/demos/grayscale/

使用方法

要对一个元素实现“灰阶化”需要调用 grayscale()函数,并将元素作为参数传递,比如:
JavaScript代码
  1. var el = document.getElementById( 'myEl' );  
  2. grayscale( el );  
  3. // 也可以传递一个DOM集合  
  4. // (这样所有的元素都会得到“灰度效果”)  
  5. grayscale( document.getElementsByTagName('div') );  
  6.  //也可以在jQuery对象集合中使用  
  7. grayscale( $('div') );  
若要重置元素(返回到原来的颜色状态)必须调用grayscale.reset(),并将需要重置的元素作为参数传递:
JavaScript代码
  1. grayscale.reset( el );  
  2. // reset()同样可以接受DOM对象或jQuery对象集合参数  
  3. grayscale.reset( $('div') );  
其中的prepare函数,上面已经讲过了,在有大图片要处理的情况下需要使用到,或者即使只是几个小图片。注意大图片需要有一会儿的时间去处理(一张 300×300的PNG格式图片在“预置”方式下需要耗费3秒钟的时间)。
JavaScript代码
  1. grayscale.prepare( document.getElementById('myEl') );  
  2. // 同样可以接受DOM对象或jQuery对象集合参数  
  3. grayscale.prepare( $('.gall_img') ); 

[完]

注:

[1]:灰阶化:原文grayscaling,意为“采取灰度标准”,即灰阶化,将图片由彩色转为灰度;
[2]原文为”This started out as a little experiment and eventually turned into quite an endeavor.“,可能存在翻译问题;
[3]原文为“externally hosted images cannot be passed into ‘getImageData’ regardless of whether it’s supported.”,翻译存疑;
[4]零超时递归技术:原文zero-timeout recursion technique,应为zero-time recursive technique;参见http://en.wikipedia.org/wiki/Recursion_(computer_science)
[5]格斗士:原文blood-thirsty hunters,嗜血的猎人

--EOF--
灰阶化可以用在414或者512,值得用用喽。。。

 

 

input输入框内的事件输入事件详细分析

毋庸置疑,对于input的操作,是javascript中最常用,最多见的操作。因此对于input的相关各种事件也就是大家都必须要关心的。
大家耳熟能详的大约也就是:onChange,onClick,onDbClick,onFocus,onBlur之类。onDbClick一般都难以遇到,但其实这并不全。翻开jQuery的手册,你会发现对于事件处理,有很多。大部分都是针对于input的,当然也有对于img对象的。
以下就是全文:

1.基础:本次分析原理就是在各个浏览器下input内容变化的时候触发事件的各种不兼容性.在ie下用onpropertychange事件,在其他浏览器里用input事件.

2.用例:对每个浏览器分别测试如下的情况:

–输入英文字母时–开启输入法时–大小写不同时–输入运算符时–按下tab键时–输入法中按下空格时–按下控制键时–复制粘贴时–删除文本时–等等

3.测试开始:(只标出特殊情况,没标出的表示正常触发,每次只触发一次事件)

chrome:+开启输入法时,可以捕捉到输入事 件.+开启输入法的时候按下空格键,触发两次事件,猜测一次是空格触发的,一次是输入法改变输入框里的文本时触发的.+开启输入法的时候,按下空格后,立 即按下大写锁定,此后所有的输入事件都会被触发两次,原因不知.+没有开启输入法的时候,方向键不会触发事件,但是开启输入法后,方向键可以触发事件.+ 剪切和粘贴都会触发事件.+tab键不处罚事件,开启输入法时,按tab键触发事件.+按住shift和其他键(例如:数字键),每输入一个字符触发两次 事件.

Firefox:+开启输入法时,不能扑捉到事件,但 是按下空格时,可以触发两次事件.+任何时候方向键都不触发事件.+开启输入法的时候,按下空格后,立即按下大写锁定,此后所有的输入事件都会被触发两 次,原因不知.+按下tab键的时候不触发事件.++Firefox页面刷新的时候内容会被保留在输入框里.+按住shift和其他键(例如:数字键), 每输入一个字符触发两次事件.

opera:+正常情况下,在输入框里按下tab键会 触发一次事件,但是此后只要不刷新页面,tab键都不会再触发此事件.+开启输入法后不会触发事件,开启后,方向键和tab键都不触发事件.+开启输入法 时,按下空格只触发一次事件,不会出现触发两次事件的情况.+粘贴的时候触发事件,剪切的时候不触发

ie:+输入法不会触发事件,按空格也都是只触发一次,方向键任何时刻都不触发.+刷新页面的时候内容会留在input里,而且注意,不管input是不是空的,刷新页面后自动触发一次事件.

3.总结.

就一句话,差异很大.

注意input事件可以用在chrome,Firefox,opera里,但是只能用 addEventListener绑定,不能用ontype形式,而onpropertychange可以用on形式,也可以用attachEvent绑定

--EOF--
了解这些兼容性的处理,对于页面的操作处理方面才会有更好的效果和用户体验。原文来自于http://www.beiju123.cn/blog/?p=375,是我采用read it later读回来的。。

Tags: input