javascript基本类型和对象类型

基本类型

<script type="text/javascript"> var a = 3.14, b = a;//a 的值赋值给b a = 10;//a的值改变 alert(b); </script>

对象类型 object

<script type="text/javascript"> var a = { name: 'Colin', age: 24, Height: '173cm' }; window.option = a; option.name = 'Jerry'; alert(a.name); </script>

对象类型 Array

<script type="text/javascript"> var arr = [1, 2, 3]; var b = arr; b[0] = 4; alert(arr[0]) </script>

对象类型 DOM

<style type="text/css">.red{color:red}.blue{color:blue}</style> <div id="demo1"><span class="red">Hello world!</span></div> <script type="text/javascript"> var obj = document.getElementById('demo1').getElementsByTagName('span')[0]; var myInst = obj; myInst.className = 'blue'; var objStr = document.getElementById('demo1').innerHTML; var myStr = objStr; myStr = myStr.replace(/blue/g, 'blue'); alert("myStr = " + myStr); alert("obj.innerHTML = " + obj.innerHTML); </script>

CSS技巧两则

CSS实现圆角，mozilla和webkit有CSS3实现圆角的新特新

-mozilla-border-radius /*Mozilla圆角属性 */ -webkit-border-radius /*webkit圆角属性 */

圆角demo：

<div style="width:100px;height:100px;border:1px solid #666;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#CCC"></div>

border实现简单阴影：

圆角demo：

<div style="width:500px;border:2px solid #EEE;-moz-border-radius:3px;-webkit-border-radius:3px"> <div style="height:100px;border:1px solid #DDD;-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#FFF"></div> </div>

这些小技巧其实都是平时积累的小经验，多留意细节处理，会发现有很多方法实现很强大的功能。

Google Chrome多进程的必要场景

我是个极度偏向RIA应用的web终端用户，我常用的web程序如下Gmail, Google Reader, Google Docs, Google Languages tools, Google webpicasa, picnik, 1g1g.com, 猫扑爱听, 虾米，以上这些应用都常年霸占我的书签工具栏最佳位置。

试想一下，如果某次我正在Gmail聊天，用亦歌听歌，用Google Doc上传文档，浏览朋友的picasa，并用webQQ挂着我的QQ，正当我想在Gmail告诉朋友相册地址时，Firefox异常错误，所有眼前我正在做的事情瞬间中断，你会不会捶桌子？虽然在此重启Firefox, Firefox会重新自动打开上次访问过的页面，但我体验过这种异常关闭，很抓狂。有可能是你访问的站点的脚本很糟糕，也有可能是Firefox本地的插件异常造成关闭。

这时候，Google Chrome的多进程是不是显得格外优秀？

Javascript跨域传递JSON

Javascript无法跨域访问，这是Javascript的安全机制，跨域访问的定义可以这么说，www.google.com域下的脚本不能访问www.amazon.com域，www.google.com当然也不能访问子域名site.google.com域。JS如果要跨域访问数据，AJAX的http请求跨域数据会报错。如果需要用JS请求跨域的数据，JSON是很好的选择。跨域获取JSON并不是异步请求，而是应用script标签的src属性获取到服务器生成的JSON格式化文本，例：

<script type="text/javascript">
function jsonCallback(resp) { //jsonCallback是下面script标签回调的,resp将返回的JSON作为参数传递
  var entris =  resp.feed.entry
}
</script>
<script type="text/javascript" src="http://fanlog.blogspot.com/feeds/posts/default/?max-results=10&start-index=1&alt=json-in-script&callback=jsonCallback"></script>

script标签src的地址，是blogger API返回的JSON格式化数据，数据格式如下：

jsonCallback({"feed":["content",{"$t":"第一个标题"}],["content",{"$t":"第二个标题"}], .....

JSON数据格式可以像访问JS对象一样去访问，例如jsonCallback.feed[0].content.$t返回的值就是"第一个标题"，"[]"符号表示数组对象，访问第二个"[]"即为jsonCallback.feed[1]。

jQuery有一个getJSON()的方法可以直接访问JSON数据。prototype貌似米有。

inline-block属性

IE6和IE7可以通过触发haslayout模拟inline-block，而事实上，通常需要用到inline-block的元素都会用到width，而width本身就可以触发haslayout，很多文章在写到IE6、IE7中使用inline-block时，都写了zoom属性，事实上是不需要的。

延伸一个问题，很多时候在使用text-indent来隐藏文字时，一个inline元素并且使用了inline-block属性时，IE6下的麻烦就来了：

<div title="父容器"><span style="display:inline-block; width:120px; text-indent:-9999px; background:url(https://www.google.com/accounts/picasa20x20.png) no-repeat scroll 0 0">被隐藏的文字</span>测试文字测试文字</div>

如果以上代码中span的前面没有文字，整个div父容器就不见了。不见的原因还是text-indent，粗暴的解决方法：

<div title="父容器"> <span style="display:inline-block; width:120px; text-indent:-9999px; background:url(https://www.google.com/accounts/picasa20x20.png) no-repeat scroll 0 0">被隐藏的文字</span>
测试文字测试文字</div>

差异性同步工具cwRsync

cwRsync是windows下的同步工具，比如在local的代码需要提交到测试服务器进行测试，如果一次两次的copy还好，但是代码涉及到的目录很多的话就需要频繁的切换本地以及服务器的目录，很烦躁的。cwRsync可以直接文件夹对文件夹同步，配置好同步的路径，执行一次.bat文件即可。cwRsync有client和server两个版本，如果

下载cwRsynchttp://www.itefix.no/i2/node/10650

分别下载server和client版本，如果需要从本地同步到服务器，服务器必须安装server版本，因为cwRsync需要通过SSH登录服务器并验证用户。

了解HTML5

W3C已经接受并发布了HTML5的草稿，浏览器厂商已经等不及xhtml4.2的发布，技术的更新永远是跟这需求走的，任何技术标准还是离不开广泛的应用，如果不切实际的追求标准，只能吃力不讨好。

了解一下HTML5就明白，为什么这些大的厂商等不及xhtml4.2的发布。现在的web已经不是传统的内容呈现页面+超文本链接。丰富的交互体验需求以及风靡的AJAX应用对服务器的密集请求，迫使HTML5的促成。Google Gears要解决的问题，事实上也是HTML5要解决的问题。

Google Gears这个浏览器插件可以使web应用程序在本地离线运行，允许JavaScript访问、操作存储在本地的格式化数据，用户所有的本地离线操作和数据都将在下一次联网与服务器同步。显然Cloud app是离不开Google Gears。

HTML4.0或(X)HTML1.0+AJAX可以实现丰富的交互，AJAX带来前所未有的良好用户体验，但是HTML并不是标准的格式化数据标签，而客户端任何一次对数据的操作，都必须请求服务器，AJAX固然好，可是密集的数据请求所带来的性能问题，是Cloud App无法接受的。

HTML5的部分新特性：

• 新增了nav, aside, head, foot, article等更具有语义的标签
• 新增了canvas, video等多媒体标签的支持
• 对Javascript开放更多的API，Javascript更容易操作并且可以用sql语句访问存储在浏览器本地的格式化数据

可见HTML5希望带来更丰富的交互体验以及更高效的开发，目前HTML5和XHTML2仍然不是W3C官方推荐的语言标签，不过我个人认为，浏览器厂商的确有必要以官方的姿态站出来制定标准。