标签 javascript 下的文章

JS的真真假假,看完会更清晰

Javascript的true和false很灵活,刚接触的时候用得很欢快,js真是智能,还能自动转换数据类型,太方便了,所以对于下面的情况的时候,大家不会觉得奇怪:

"0" == false; //true
"0" === false; //false

不过越是智能的东西越不要太相信了(比如说人),有时候会自作聪明的。

最近发现,有一位很有耐心的人做了这样一张表:

JS Comparison Table

点击这里打开 JS Comparison Table

确实很方便直观,但如果每次都来查表、甚至想背下来,估计难度不小,平时如果遇到了,也多是“噢,原来这里该这样”就过去了,谈到具体的原理,大家都说,啊,这是js的特点,因为js会进行类型转换,怎么转换的?好像没有太多讨论,最后就产生了js是在进行暗箱操作的感觉。

“被教育”最多的话就是:js里面的==是恶魔,和eval一样不要用,判断等不等要用===
我:哦

(然后一直带着不安的心情在使用==

直到最近,看到这样一条奇怪的语句:

if ("0"){ console.log("ha") }; //"ha"

这个怎么解释?是js的设计bug?我觉得不会吧,计算机也是人造的,总还是有规律的,即便是看起来的bug,也是有原理的。

我觉得以及忍无可忍了,必!须!知!道!原!理!

老规矩,先到MDN上面看看呗,哦,真幸运,果然找到了想要的原理。简单挑选了几条,涉及到==的判断原则、以及if中的条件判断原则。

1、使用==比较的时候

当比较的两边类型一样时候,比较容易,这里略过,只讨论类型不同时的比较。

  • number和string比较的时候,string会被转换为number值
  • ==两边的比较方如果有一方是Boolean类型,Boolean为true的时候会被转换为1,false时候转换为+0
  • object和number或string比较,object被通过valueOf和toString方法转换为它的原始值(primitive value)——为String或者Number值;如果转换失败,会报错(runtime error运行时错误)

- 阅读剩余部分 -

[译]HTML5 全屏Full-Screen API,支持Chrome、FF、IE11

什么是Full-Screen API

这个API允许单个的元素全屏显示,和F11全屏不同,这个API用来展示某个容器里面的图片、视频等。

支持的浏览器

所有的最新浏览器,包括IE11呢。移动端的支持有限,不过没关系,反正移动端的浏览器都是近乎全屏了。

因为这个API还没有规范,所以很可能以后会有改变,同时,使用起来也少不了各种浏览器厂商的前缀了。


Javascript 部分的API

下面的例子中,想要全屏显示的是ID为myimage的图片。先来看一下几个相应的方法。

1. document.fullscreenEnabled

如果当前浏览器允许进入全屏模式,这个属性返回true,可用来检测浏览器是否支持全屏API

if (document.fullscreenEnabled) { ... }

- 阅读剩余部分 -

使用Canvas生成照片直方图

最近刚接触HTML5的Canvas,然后想做点小东西。

什么是照片直方图

直方图是用来直观地表示图片的RGB三种颜色通道在不同亮度值上面,所占的量的多少。

大家都知道,电脑上的数码照片的每个像素由红绿蓝三种颜色合成,所以一个像素具有R-红色,G-绿色,B-蓝色三种颜色的信息;每种颜色取值是0-255————当为0的时候,表示当前像素没有这种颜色,当为最大值255的时候,表示这种颜色含量已经最高。

比如,纯红色的RGB就是(255,0,0),即红色最多,不含绿色和蓝色。黄色由红色和绿色合成,所以纯黄色RGB就是(255,255,0)。

Photoshop的直方图

然后,直方图的横坐标从左到右依次是0到255,纵坐标没有上限,当x为定值的时候,不同颜色的y值表示的是:亮度(姑且这么称呼)为x的这种颜色的量有y这么多。

直方图在摄影中经常用到,通过查看照片的直方图,可以知道曝光是否准确。如果需要的是正常的曝光,那么就应该使照片的各种颜色集中在x的中间值,大约100-150区间内,直方图呈现中间凸起的形状。

更多的信息,大家可以搜索查看照片直方图

说了这么多,终于进入正题了。

DEMO演示

点击查看:Canvas生成照片直方图

思路说明:

先载入一张图,然后获取图片的每个像素的值,然后对每个像素的RGB值分别统计,然后得到一个数组包含了3种颜色的量。这里设的是一个叫做tj的二维数组,红色是tj[0],绿色是tj[1],蓝色是tj[2];用tj0的值来表示亮度为210的红色像素的数量。

得到tj数组之后转换为直方图:例如tj1=3872转换为在x为145,y为3872的像素的地方用绿色画一个点,当然,y太大的话,直方图太高,所以下面会将y除以10来“压扁”直方图。

代码部分的说明直接写到注释中了。

- 阅读剩余部分 -

JS中“较高级”的正则表达式知识点

Javascript的正则表达式虽然很早以前就接触过了,那时候还在做编辑的时候,用AS写了一个文本替换的小程序。

最近逛书店,发现有本21天学通XXX的系列书,一向对这种名字的书没有好感,不过还是很好奇地拿了起来,随便翻了一下,正好看到一些以前没有注意到的地方,回来继续查看犀牛书等书补充了一下。

(XXX)

capturing groups(捕获性分组,犀牛书上叫组合)。

这个最常见的,就是用括号把一部分表达式包起来,方便在后面用+或者*或者{n,m}等来表示数量等,又或者有时候要用到|的情况。


(?:XXX)

non capture group (非捕获性分组,犀牛书上叫只组合)

和捕获性分组的区别就是,这里的括号内的内容不被计算入分组,也就是说是不存入$1,$2这些里面的。


x(?=y)

lookahead (零宽度正预测先行断言、先行断言)

- 阅读剩余部分 -