loading...

Tag: Javascript/Ajax/Actionscript

JavaScript程序编码规范

这是一套适用于JavaScript程序的编码规范。它基于Sun的Java程序编码规范。但进行了大幅度的修改, 因为JavaScript不是Java。

软件的长期价值直接源于其编码质量。在它的整个生命周期里,一个程序可能会被许多人阅读或修改。如果一个程序可以清晰的展现出它的结构和特征,那就能减少在以后对其进行修改时出错的可能性。

编程规范可以帮助程序员们增加程序的健壮性。

所有的JavaScript代码都是暴露给公众的。所以我们更应该保证其质量。保持整洁很重要。

JavaScript文件

JavaScript程序应独立保存在后缀名为.js的文件中。

JavaScript代码不应该被包含在HTML文件中,除非这是段特定只属于此部分的代码。在HTML中的JavaScript代码会明显增加文件大小,而且也不能对其进行缓存和压缩。

filename.js>应尽量放到body的后面。这样可以减少因为载入script而造成其他页面内容载入也被延迟的问题。也没有必要使用language或者type属性。MIME类型是由服务器而非scripttag来决定的。

查看全部

前端开发常用工具软件

一、IE网页调试插件

IE Developer Toolsbar

IE下的FireBug.HTML及CSS调试工具

http://www.windowsmarketplace.com/details.aspx?itemid=2695980

Microsoft Script Debugger

Companion.JS 需要安装Microsoft Script Debugger才可

Companion.JS

IE下的javascript调试工具.

http://www.my-debugbar.com/wiki/CompanioNJS/HomePage

SuperPreview

主要用于html、css的调试和各个浏览器(目前只能针对IE6-IE8)的页面呈现测试

http://download.microsoft.com/download/5/6/8/568F0D28-0434-4794-B7FC-FB293BCC98FB/SuperPreview_Trial_en.exe

IETester-同时拥有IE6、IE7、IE8(Vista兼容)

http://www.my-debugbar.com/wiki/IETester/HomePage

二、firefox网页调试插件

FireBug

firefox下一套强大的网页开发调试工具

https://addons.mozilla.org/en-US/firefox/addon/1843

Web Developer

FireFox下的查看工具,可以查看JS,CSS等页面信息

https://addons.mozilla.org/en-US/firefox/addon/60

YSlow

why slow 页面性能优化查看器.基于FireBug

http://developer.yahoo.com/yslow

Javascript Debugger

FireFox下的javascript调试工具,比FireBug有更强大的调试功能.

https://addons.mozilla.org/en-US/firefox/addon/216

Opera Developer Tools

三、其它

Opera下的DOM,CSS查看工具,类似FireBug.

http://dev.opera.com/articles/view/opera-developer-tools/

webkit

Safari下的开发调试工具

http://nightly.webkit.org/

Fiddler

一个很强大的http流查看工具

http://www.fiddlertool.com/fiddler/

Httpwatch

数据分析工具,头消息接受/发送的查看,POST数据查看.等等

http://www.httpwatch.com

JavaScript 实现 Konami Code –彩蛋

在 Facebook 上有一个彩蛋:

登录 facebook.com ,点击你首页的任何地方,键盘输入 Up, Up, Down, Down, Left, Right, Left, Right, B, A, Enter 后,再点击页面或滚动一下滚动条,你会发现特殊的变化(如下图),嘿嘿 ^^

玩过“魂斗罗”的朋友,肯定一眼就能看出输入的字符原来就是“魂斗罗”中的“秘技”。其实“秘技”的术语叫 Konami Code,详细见图示:

konami

那如何用 JavaScript 也在自己的页面上添加一个类似的彩蛋呢?

Abhi 在 《Konami Code on Facebook : How to implement it on your site》 一文中提供了大体思路:

var $ = {
    enabled: false,
    tmp: Array(),
    _konamiCode: Array(65,66,39,37,39,37,40,40,38,38),
    init: function() {
        this.tmp = Array(65,66,39,37,39,37,40,40,38,38);
    },
    konamiCode: function(e) {
        if(!this.enabled) {
            var t = this.tmp.pop();
            if((e.keyCode-t) == 0) {
                if(this.tmp.length == 0) {
                    this.enabled = true;
                }
            } else {
                this.init();
            }
        } else {
            this.action();
        }
    },
    // Change the action() function to whatever you want to
    action: function() {
        //alert("Konami Code Activated");
    }
}

然后在 load 的时候调用 $.init() 方法,在 keydown 的时候调用 $.konamiCode(event) 方法。

<body onload="$.init()" onkeydown="$.konamiCode(event)">
</body>

不过 Abhi 的方法还是冗余了点,Jan Jarfalk 在留言中提供了一个短小精悍的代码:

// Tweetable Konami code
var k=[];
function(e){
    k.push(e.keyCode);
    if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0) {
        //alert("Konami Code Activated");
    }
}

PS:有兴趣的还可以在 Google Reader 上尝试下此“秘技”

来源:planabc.net

Javascript keyCode 键盘键码值对照表

Javascript keyCode 键盘键码值对照表

keycode

前端开发书籍资料推荐

好书推荐

查看全部推荐书籍

jQuery简单实现图数字顺序图片列表

用jquery通过简单的几行代码可以实现文章图片数字顺序列表,可以用于一些文章排行等。

演示地址:http://wlog.com.cn/code/jquery/numlist/num-list.html

numlist

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery简单实现图数字顺序图片列表</title>
<script src="http://wlog.com.cn/lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
	$("#numList").find("li").each(function(i){
		$(this).addClass("num"+(i+1));
               //css 中样式从.num1 开始,所以用i+1
	});
})
-->
</script>
<style type="text/css">
ul,li {margin:0px; padding:0px;}
li {line-height:25px;}
.num1,.num2,.num3,.num4,.num5,.num6,.num7,.num8,.num9 {
text-indent:24px;
background:url(http://wlog.com.cn/code/jquery/numlist/images/num.gif) no-repeat;
border-bottom:1px #C3C3C3 solid;
overflow:hidden;
}
.num1 {background-position:0px -3px; }
.num2 {background-position:-2px -40px;}
.num3 {background-position:-4px -75px;}
.num4 {background-position:-6px -110px;}
.num5 {background-position:-6px -145px;}
.num6 {background-position:-6px -180px;}
.num7 {background-position:-6px -215px;}
.num8 {background-position:-6px -250px;}
.num9 {background-position:-6px -285px;}
</style>
</head>
<body>
<ul id="numList">
    <li>韩国新秀金新雅资料</li>
    <li>我的11款春夏发型真人秀</li>
    <li>祛斑收毛孔 7个经济小偏方</li>
    <li>林志玲四款盐美容秘</li>
    <li>诀 范冰冰章子怡示范上妆9禁</li>
    <li>忌 平民美女 4种超省钱养颜</li>
    <li>法 中国式妖娆 吕燕经典照 </li>
</ul>
</body>
</html>
Page 1 of 11