hi,JavaScript论坛

hello，JavaScript论坛网址：http://www.beiju123.cn/bbs

hi,终于见面了，自从11月份进入公司以来，终于可以专心学习js了，以前大多时间用在php中，后来发现自己是个喜欢用右脑思考的人，而这种人则适合做前端，因为前端更充满了艺术性和创新性。

我一直将自己看做一个艺术工作者，而不是一个程序员，艺术并不是指我设计多美妙，画画多好看，而是说我喜欢把写代码当做一种艺术创作，随心应手，充满创造性。

有人说程序员都是死脑筋，逻辑太紧，想了这一步就已经想好了下一步，我则不然，我做什么都是随心所欲，以灵感为基础，我不会那些枯燥的算法，也没有缜密的逻辑。

最近一直在写库或者说是框架，可能纯属胡闹，但是也算是我的一种兴趣吧，我喜欢写代码的感觉，不太在乎最后能不能写出惊人的作品，毕竟我是初学者。但是通过写框架我可以学到很多别人没有在意过的东西，就像一个c#程序员，如果他只会c#，那好，不错，但是如果他理解c，c++，理解编译原理，理解c#的底层，那他会比别人更棒。

前几天我建了这个论坛，我是个喜欢泡论坛和泡qq群的人，也是一个喜欢在电脑上开N个进程的人，喜欢一边写代码一边聊天一边看论坛，所以我建了一个论坛，希望有人可以通过这个平台学到东西，认识到牛人，增长见识，共同进步吧。。。

之所以起名字为hello，JavaScript。我觉得JavaScript现在还是被看做小众语言，虽然用的人多了很多，但是大多只是把它当做一个玩具，没有想着深入理解他，很多人只是用着jQuery，却不知道为什么会这样，为什么jQuery会这么灵活，在起步阶段就迷恋于框架是不明智的，大家要多深入了解一下JavaScript，JavaScript很简单，但是前端的思想不简单，这也是要重点理解的。

我其实也没什么资格点评语言，毕竟我还没毕业，身前一大批前辈，希望我能从他们那里学到更多。。。做一个爱上编程的人。。

一个制作在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路

对前端工程师来说,跨浏览器的兼容性问题一直是最头疼的,测试一个小小的东西,就要打开N个浏览器,然后比较来比较去,记录个浏览器的数据,比较不同,实在是麻烦.

作为一个标准的绝顶的懒人,我想做一个测试工具,可以同时把所有浏览器的测试结果都显示在一个浏览器窗口里,并且列成清晰的表格,便于比较.

这一定会是一个可爱的工具,节省时间不说,而且可以清晰的记录和比较数据.下面说一下我的思路.(之后我将使用这个工具测试一个js的兼容性问题,敬请关注)

本工具已经制作完成,但是不具通用性,需要和后台配合使用,需要和数据库交互,而且后台交互的性能不太好,普通的电脑无法承受(我的3GHZ的cpu,2G内存都不能直接打开多个浏览器窗口,可能是我数据库的操作过于频繁).虽然放在公共服务器上速度可以接受,但是不能拿出来给大家测试,因为多个人运行,再好的服务器也受不了.

工具是js+php+mysql制作的,并不是有的人想象的把多个浏览器引擎整合到一个软件里,我可没那水平.

使用的时候,只需要在js里写好测试数据和测试方法,传到一个测试实例里,然后在所有浏览器里打开一次这个窗口,js会统计数据,然后把数据存储到后台,之后js通过ajax获取所有的数据,将其解析成表格显示在网页中.最后结果是如果你的电脑够强,所有的浏览器里的网页都会显示一个列表,里面有所有浏览器的测试数据,如下:

之后就可以比较结果了.是不是很方便呢

原理:

首先将此功能抽象成一个组件,组件接受三个参数,一个是输入对象组,二是测试方法,三是组件配置参数.

在之后的组件初始化阶段,组件将遍历输入对象组中的所有对象,将对象传给测试方法,测试方法返回一个测试数据,组件将测试结果记录在一个对象中.

/**
* 这是一个测试对象在不同浏览器中属性的对象,可以同时在任何浏览器中测试,需要和后台脚本交互
* 请设置好输入数据和输出数据后,在要测试的浏览器中打开页面,结果将附加到列表中.
*
* @param {array} testObject 待测试的对象列表,每个对象都必须有一个唯一的标示做主键,而且有一个描述,
* testObject的格式如下{"in1":{obj:**,des:"dd"},"in2":{obj:**,des:"dd"}}
* @param {function} testMethod 测试的方法,程序会向此方法传入两个参数,一个是对象索引一个是对象.同时在此方法里可以用this引用test实例,此方法必须返回一个字符串,表示执行结果
* @param {json} config 配置参数
*/
(function(){
var CrossBrowserTest=function(testObjects,testMethod,config){
......

这个组件对对象参数格式和组件内的数据存储器的格式,以及向后台发送字符串的格式,后台返回数据的格式有着严格规定:

其中:testObject的格式如下{”in1″:{obj:**,des:”dd”},”in2″:{obj:**,des:”dd”}}

组件内的数据存储器的格式如下(this.data):{“in1”:{des:”描述”,data{“ie6”:{outDes:”ie6里的输出结果”},”ie7”:{outDes:”ie7里的输出结果”}}},”in2”:…}

Read the rest of this entry »

互联网群星聚集淘宝ued博客讨论交互设计奥妙

没骗大家,什么马云啊,马化腾啊,比尔盖茨啊,养猪的那个啊,脑白金那个啊都来了.大家去围观吧.
http://ued.taobao.com/blog/2010/02/05/interactive-controls-innovation3/#comments
注意看评论

折叠的table行元素

来一个例子:代码很简单,如下:

 <table border="1">
<tr>
<td>dd</td>
<td>dds</td>
</tr>
<tr>
<td>ss</td>
<td>sss</td>
</tr>
</table>

如此,一个表格,有两行两列,在任何浏览器下都没有任何显示错误.但是如果我加下面这句css,情况就不同了:

 <style>
tr{position: relative;}
</style>

看来是要出问题了,可是别着急,其实这个时候从表面上你看不到任何问题,页面布局绝对不会乱掉,

你看不到任何东西会重叠起来.

我可从来没有想过要耍大家,虽然表面上看不到问题,但是现在让我们的ie develop tool上场吧,它会告诉我们layout带来了什么

注意两幅图中的不同和相同.注意左边视图中的蓝色线框圈起来的东西,这个tool的作用就是右边点击某个元素会在网页中用线框框起来.

可是注意,我两次分别点击了两个不同的元素.而线框框起来的是同一个地方,我汗,我没看错吧.

是的,也就是说两个tr重叠了,可是奇怪的是tr里的元素渲染都完全正确,不影响到任何外观样式.不要以为这样是安全的,隐患在此时埋下.

我其实是在做一个模拟窗口的时候遇到这个问题的,我用了一个两行的table,第一行做窗口标题栏,可以拖动,第二行做主视图,可是后来我发现table的第二行把第一行盖住了,虽然外表看上去很正常,但是标题栏却因为被挡住不可以点击和拖动了.

要修复这个现象,去掉tr中的position即可

3.由此说来:

不知道大家写css的时候是不是用一些reset来先reset下,反正我是这样做的,我的NetBeans里的css模板里就存着reset,每个css文件头部都会有这样一段:

/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 12px;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: none;
}
/* 元素获得焦点时的样式! */
:focus {
outline: 0;
}
/* 特殊文本的样式! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* 细线表格样式 */
table {
border-collapse: collapse;
border-spacing: 0;
}

大家都知道要绝对定位一个元素的话,首先要使它的父元素定位,例如设置一个position:relative,这样子元素才可以absolute,然后top,left定位.

于是我就想,这样太麻烦了,我干脆给所有的元素都设置position:relative算了,然后要绝对定位的改一下position:absolute.这样免得挨个设置了,直接所有元素都可以绝对定位了.

于是本文所说的问题来了,我们给所有元素都设置了position:relative,于是table出问题了,所以说这种做法是不可取的,而且这样会引起一些其他的渲染问题,记得我在好几个地方都看到提示说不能这样设置.

本文其实是想说layout的,可是这个问题的确是ie的bug,不是layout问题,下次等我再遇到layout问题再说layout吧.顺便说一下,这真是一个奇怪的bug.

HTML5尝鲜(让canvas像flash一样工作,从而制作复杂的动画)

效果和源码:(本代码使用了本人自己的js框架,自己修改代码的话,请务必引用我试用的框架,否则会出现错误)

(请务必试用非ie浏览器浏览,极力推荐Safari和chrome,其他浏览器运行速度堪忧)

http://www.beiju123.cn/blog/wp-content/uploads/2010/02/canvas-demo.html

1.什么是canvas:

引用Firefox开发者中心的一段话:<canvas> is a new HTML element which can be used to draw graphics using scripting (usuallyJavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. The image on the right shows some examples of <canvas>implementations which we will see later in this tutorial.

注意,canvas主要是用来画图的,而不是注重动画,所以在canvas中没有帧的概念,没有精灵(Sprite)的概念,flash中的概念在canvas中很多都不存在.

canvas说白了,就是给js加了几个对象,多了几个方法.并不是一个独立的东西,应该说是JavaScript的一点点补充.就跟其他编程语言中的graphic对象差不多,提供了画基本图形和路径,图像,提供了颜色和样式管理.

更多关于canvas的基础,见https://developer.mozilla.org/en/Canvas_tutorial(英文版)

可能很多人会嚼的我这篇文章纯属多余,既然能够画图,那加上一个定时器不就是动画了嘛?

是的,如果你只是想在画布上画出一个圆或者矩形,然后让它动起来的话,那这么做无疑是可以得出结果的.代码也很简单,如下:

var x=0;
    var y=0;
    var ctx = document.getElementById('canvas').getContext('2d');
    setInterval(function(){
        ctx.clearRect(0,0,800,800);//清除画布某某个范围内的内容,参数分别为x,y,宽度,高度
        ctx.fillStyle = '#FFF'//设置颜色
        ctx.fillRect(x++,y++,50,50)//画一个矩形,参数为:x,y,宽,高
    })

效果就是一个方块在画布上向右下角移动.

动画往往不是如此简单,在flash里,复杂的动画里会包含很多元素,有剪辑,有精灵,他们之间还有包含关系,我们可以单独控制某个元素的移动,控制速度,控制属性.flash里有帧,我们可以在帧上放置元素,控制帧速.最重要的,做复杂的动画的时候,我们需要把每个元素抽象成一个完整的对象,例如:一个人对象啊,我们需要控制它走动,控制它攻击.

可是在canvas里面,图形并不是一个对象,在整个canvas元素里,有且只有只有一个画布的对象(多次创建的话,只会创建一个引用),如果想把里面的图形作为对象来控制的话,上面的动画方法就做不到了.这个时候,考虑一下flash的工作原理,我想出了如下的解决方案.

我们现在需要一种新的方法,这种方法可以让画布上的元素变成可以单独控制的对象.而画布上其实只有一个对象,怎么让它能承载多个动画对象呢?

我们想想flash的工作原理吧,flash中最基本的两个东西,一个是帧,一个是精灵(Sprite).下面我们就给我们的动画程序添加这两个概念.

首先是帧,我们通过一个定时器,每隔一段时间就重画一下画布,在这段时间里我们改变画布上的元素的位置,这样就是最基本的帧了.

然后现在问题就是如何控制画布上元素的属性呢?我们把画布上所有要用到的动画元素都抽象出来,每个元素都抽象成一个对象,这个对象拥有位置和大小,速度等信息.然后在每一帧重画画布的时候,我们遍历这些对象,调用它们自己的draw方法,让它们根据自己的属性把自己画到画布上.我们将这些元素统称为Sprite,也就是动画精灵.

现在,我们就可以控制这些动画元素了,因为它们都被抽象成了对象,可以有自己的属性和方法,他们都要实现一个接口.虽然在js中不存在接口的概念,但是我们要自己去衡量在每个扩展的精灵里是否都实现了接口的方法.因为这些方法都是必须的.我们把这个接口定义成如下的样子: Read the rest of this entry »

使用 Cufon 渲染网页字体(转载自ibm developerwork,在网页里引入特殊字体的方法,通过js实现字体渲染)

朱 照华, 程序员, 自由职业者

2009 年 11 月 19 日

本文介绍了使用 Cufon 进行网页字体渲染的一般方法和技巧，并以此为基准，介绍了 Cufon 技术的主要实现原理和这一原理的可能应用领域

这是一篇关于 Cufon 技术的小文章。什么是 Cufon 呢？简单的说，Cufon 是一个用来替代 sIFR 框架，实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库。

那么为什么要使用 Cufon 呢？这要从 Web 开发人员，所经常面对的一种“冲突”，即“字体（Font Family）冲突”开始讲起。

通常的这一冲突总是爆发于 Web 页面的设计者（Designer）和开发者（Coder）之间。在很多场合下，Web 页面的设计者都会倾向于在他们的页面设计稿中，为文字附加使用一些“特殊”的字体和特效，以此来展示他们卓越的设计能力。

如下图 1 所示，是某设计者为公司 A 所设计的一个公司简介页面（部分）。在其中为了突出公司的“亲和力”，设计者使用了一种名为 Baroque Script 的手写字体。

无疑的这一设计将会让开发人员“抓狂”。因为与此同时，A 公司雇主明确的告诉了开发人员，公司简介的内容需要可以通过后台管理程序进行修改，并实时的显示到相应的页面上。

这也就意味着，即使开发人员可以如下代码所示通过编写脚本，来实时输出公司简介的内容，并指定这一内容使用“Baroque Script”字体进行显示，也是无法“完美”的实现设计初衷的。

 <style>
  .introduction { font-family:'Baroque Script';}
 </style>
……
 <p style="font-size:36px"><?php echo $introduction; ?></p>
 <p style="font-size:24px; text-align:right">
 <?php echo $leader;?></p>

因为在大部分的浏览器上，并不会安装有 Baroque Script 字体。因此在这些浏览器上系统会主动“忽略”掉代码中关于 font-family 的说明，转而使用缺省字体进行输出，如下图 2 所示。

当然随着 Web 标准的发展，关于这一问题现在也已经有了一个“官方”的解决方案，那就是通过 CSS3 标准下的 @font-face 属性来指定和引入非缺省字体，如下代码所示。

……
 @font-face {
  font-family: "Baroque Script";
 src: url('BaroqueScript.ttf')
 }
……

完整的实现则可以参考范例 1.htm。显然的，这一解决方案会成为今后在此类问题上一个主流的处理方法。但是不幸的是，截止到目前为止其却并没有获得很多浏览器，尤其是 IE 系列浏览器的完整支持。而与之相较本文所将介绍的 Cufon 方案，目前在“普适性”上较 @font-face 方案则是要广泛许多，下表 1 则给出了二者在浏览器支持方面的一个比较，以供读者参考。

那么面对这一冲突，Cufon 究竟是如何解决非缺省字体显示的问题的呢？

回页首

引入 Cufon

作为一种基于 JavaScript 的网页字体引入方案， Cufon 的核心功能是通过一个名为“cufon-yui.js”的 JavaScript 类库，提供给开发人员的。因此使用 Cufon 技术的第一步，当然就是在 Web 页面中引入这一类库，如下代码所示。

 <script src="cufon-yui.js" type="text/javascript"></script>

创建并引入字体文件 Read the rest of this entry »

微软反盗版全球黑屏 中国成惟一例外

微软反盗版全球黑屏 中国成惟一例外 
昨日凌晨，微软发布消息称，2 月17日将发布针对“Windows激活技术”的更新，以验证用户使用的操作系统是否为正版。非正版用户若安装该更新，30天宽限期过后，电脑桌面壁纸将 变为黑色。但微软相关负责人同时表态称，中国市场是“惟一的例外”，尚不会通过Windows Update来要求用户下载安装这一更新。
“Windows激活技术”是一套内置于Windows 7和Windows Vista中的激活与验证技术，用来确认安装在电脑上的Windows是否是正版，并将允许用户有30天的激活宽限期，在这30天之内，用户可以随时激活 Windows系统。30天的宽限期之后，用户如果没有激活产品或者激活失败，系统会发送通知和提醒，同时电脑桌面壁纸将变成黑色，从而提醒用户需要激活产品或获取正版授权。

微软全球正版Windows部门总经理威廉姆斯说，这项更新以服务的方式提供，旨在保护正版用户和合作伙伴免受盗版软件的危害。2月底，微软的这一更新将通过Windows Update在全球发布。

但这一政策却单单将中国市场排除在外。“中国市场是全球惟一的例外。”微软中国消费与在线市场部总经理韦青表示，2月17日起，微软在中国市场并不会通过Windows Update来要求用户安装这一更新，而是将其放在微软的官方网站上，希望下载安装的用户可自行登录网站下载安装。“中国市场很重要，我们想留出时间来做市场宣传，培养用户认知。”韦青表示，这一更新行动在中国将会推迟，具体时间仍待定。

2008年，微软曾在中国市场发起一次“黑屏反盗版”行动。这一举措引起了中国用户的强烈不满，不少IT评论人士和网友认为微软产品定价过高，并质疑其不适当地控制用户电脑。

“微软将会在春节后发起一个大规模的市场宣传活动。”韦青称，对于购买与使用正版的中国用户，微软将考虑推出更多的优惠政策与服务。微软中国Windows 7商用市场总监包嘉峰表示，正版的用户可以下载微软免费防恶意软件服务Security Essentials，并可在Windows 7下使用XP模式，这些都是盗版用户所享受不到的。 

《北京日报》