刘建’s Blog

Firebug Lite 源自 Firebug ，可使用在IE、Opera、Safari 浏览器上。最新版本为 Firebug Lite 1.2 ，不仅包含了旧版本的console.log 命令，还可查看 DOM 元素、跟踪 XHRs，操纵 HTML、 CSS 和 JavaScript 。

Firebug Lite 可以在页面中插入调试：
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
还可以创建 Firebug Lite 书签调试（推荐）：

javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.pi&&window.firebug){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
当然你也可以将文件下载到本地调试。

更多介绍请看：http://getfirebug.com/lite.html

javascript事件查询综合
click()   对象.click()   使对象被点击。
closed   对象.closed   对象窗口是否已关闭true/false
clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象
confirm(”提示信息”) 弹出确认框，确定返回true取消返回false
cursor:样式  更改鼠标样式 hand crosshair text wait help default auto e/s/w/n-resize
event.clientX  返回最后一次点击鼠标X坐标值；
event.clientY  返回最后一次点击鼠标Y坐标值；
event.offsetX  返回当前鼠标悬停X坐标值
event.offsetY  返回当前鼠标悬停Y坐标值

document.write(document.lastModified)  网页最后一次更新时间
document.ondblclick=x  当双击鼠标产生事件
document.onmousedown=x  单击鼠标键产生事件

document.body.scrollTop; 返回和设置当前竖向滚动条的坐标值，须与函数配合,
document.body.scrollLeft; 返回和设置当前横向滚动务的坐标值，须与函数配合，
document.title  document.title=”message”; 当前窗口的标题栏文字
document.bgcolor document.bgcolor=”颜色值”; 改变窗口背景颜色
document.Fgcolor document.Fgcolor=”颜色值”; 改变正文颜色
document.linkcolor document.linkcolor=”颜色值”; 改变超联接颜色
document.alinkcolor document.alinkcolor=”颜色值”; 改变正点击联接的颜色
document.VlinkColor document.VlinkColor=”颜色值”; 改变已访问联接的颜色
document.forms.length 返回当前页form表单数
document.anchors.length 返回当前页锚的数量
document.links.length 返回当前页联接的数量
document.onmousedown=x 单击鼠标触发事件
document.ondblclick=x 双击鼠标触发事件
defaultStatus  window.status=defaultStatus; 将状态栏设置默认显示

function  function xx(){…}  定义函数
isNumeric               判断是否是数字
innerHTML  xx=对象.innerHTML  输入某对象标签中的html源代码
innerText  divid.innerText=xx  将以div定位以id命名的对象值设为XX

location.reload(); 使本页刷新，target可等于一个刷新的网页

Math.random()           随机涵数,只能是0到1之间的数,如果要得到其它数,可以为*10,再取整
Math.floor(number) 将对象number转为整数，舍取所有小数
Math.min(1,2)  返回1,2哪个小
Math.max(1,2)  返回1,2哪个大

navigator.appName 返回当前浏览器名称
navigator.appVersion 返回当前浏览器版本号
navigator.appCodeName 返回当前浏览器代码名字
navigator.userAgent 返回当前浏览器用户代标志

onsubmit    使用函数返回值
opener   opener.document.对象  控制原打开窗体对象

prompt   xx=window.prompt(”提示信息”,”预定值”); 输入语句
parent   parent.框架名.对象 控制框架页面

return   return false   返回值
random   随机参数（0至1之间）
reset()   form.reset();   使form表单内的数据重置

split(”")  string.split(”")  将string对象字符以逗号隔开
submit()  form对象.submit()  使form对象提交数据

String对象的  charAt(x)对象 反回指定对象的第多少位的字母
       lastIndexOf(”string”) 从右到左询找指定字符，没有返回-1
       indexOf(”string”) 从左到右询找指定字符，没有返回-1
       LowerCase()  将对象全部转为小写
       UpperCase()  将对象全部转为大写
substring(0,5)  string.substring(x,x)  返回对象中从0到5的字符
setTimeout(”function”,time) 设置一个超时对象
setInterval(”function”,time) 设置一个超时对象

toLocaleString() x.toLocaleString()  从x时间对象中获取时间，以字符串型式存在
typeof(变量名)   检查变量的类型，值有：String,Boolean,Object,Function,Underfined

window.event.button==1/2/3 鼠标键左键等于1右键等于2两个键一起按为3
window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间)
window.screen.width  返回当前屏幕宽度(分辨率值)
window.screen.height  返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight; 返回当前网页高度
window.document.body.offsetWidth; 返回当前网页宽度
document.body.clientWidth              返回浏览器宽度
document.body.clientHeight              返回浏览器高度
window.resizeTo(0,0)  将窗口设置宽高
window.moveTo(0,0)  将窗口移到某位置
window.focus()  使当前窗口获得焦点
window.scroll(x,y) 窗口滚动条坐标，y控制上下移动，须与函数配合
window.open()  window.open(”地址”,”名称”,”属性”)
   属性:toolbar(工具栏),location(地址栏),directions,status(状态栏),
menubar(菜单栏),scrollbar(滚动条),resizable(改变大小),width(宽),height(高),fullscreen(全 屏),scrollbars(全屏时无滚动条无参数,channelmode(宽屏),left(打开窗口x坐标),top(打开窗口y坐标)
                        window.location = ‘view-source:’ + window.location.href  应用事件查看网页源代码;

a=new Date();  //创建a为一个新的时期对象
y=a.getYear(); //y的值为从对象a中获取年份值 两位数年份
y1=a.getFullYear(); //获取全年份数 四位数年份
m=a.getMonth();  //获取月份值
d=a.getDate();  //获取日期值
d1=a.getDay();  //获取当前星期值
h=a.getHours();  //获取当前小时数
m1=a.getMinutes(); //获取当前分钟数
s=a.getSeconds(); //获取当前秒钟数

点击网页正文函数调用触发器：

1.onClick 当对象被点击
2.onLoad 当网页打开,只能书写在body中
3.onUnload 当网页关闭或离开时,只能书写在body中
4.onmouseover 当鼠标悬于其上时
5.onmouseout 当鼠标离开对象时
6.onmouseup 当鼠标松开
7.onmousedown 当鼠标按下键
8.onFocus 当对象获取焦点时
9.onSelect 当对象的文本被选中时
10.onChange 当对象的内容被改变
11.onBlur 当对象失去焦点

应用背景

毫无疑问，模板机制是CMS里面的重要组成要素。本来模板机制只涉及CMS后台程序处理，但是随着AJAX的发展，我们经常会通过XMLHttpRequest从后台获取数据再套入到特定的HTML结构注入到页面上。这时我们的前台处理也要涉及到模板机制的概念。

解决方案

假设要我们需要从后台异步读取一篇文章的信息（假设该文章只有标题、作者、内容三项信息）并显示在当前页面上。文章的HTML结构是：

<h1>标题</h1>

<div>作者</div>

<p>内容</p>

方案一：后台生成HTML代码

由后台生成HTML代码表面上是最方便的，前台程序员只需要通过XMLHttpRequest获取这段HTML并注入到页面（innerHTML）中就行了。但是，这种方法的可维护性是最差的，因为后台程序负责HTML的输出意味着一旦HTML结构有所更改就必须在后台程序中改。

方案二：动态创建HTML结点

代码示例：

  title.innerHTML = title;

  var authorNode = document.createElement(”div”);

  authorNode.innerHTML = author;

  var contentNode = document.createElement(”p”);

  contentNode.innerHTML = content;

document.body.appendChild(titleNode);

 document.body.appendChild(authorNode);

 document.body.appendChild(contentNode);

HTML结构比较简单的时候，这种结构是可以接受的。但是一旦出现了复杂的HTML结构，它的代码就会相当冗长，编写和维护起来都极为不便，程序效率也不高。

方案三：HTML模板

代码示例：

 template = template.replace(”{$title}”, title).replace(”{$author}”,author).replace(”{$content}”, content);

document.body.innerHTML = template;

这种方法的缺陷在于需要多次替换，如果数据很多，就要进行多次替换，效率非常差。但是它的思想是非常好的，只要避免了多次替换的问题，这种方法可以成为很好的解决方案。

我们可以引入正则表达式对这种方法进行改良。模板中要替换的字符串格式是 {$文章属性}，这种格式写成正则表达式就是 \{\$\w+\} 。如果要把文章属性（就是{$和}间的内容）提取出来，还要加一个分组，所以正则表达式最终是这样的 就是 \{\$(\w+)\}。

代码改良如下：

document.body.innerHTML = template.replace(/\{\$(\w+)\}/g, function($1, $2) { /* 返回文章对象的属性 */ return article[$2] || “”; });

扩展应用

最近做了一个奥运弹窗后台管理页面，其中有一个预览功能。管理员在表单中输入数据：

排行榜：(输入框)金牌(输入框)银牌(输入框)铜牌

然后显示结果：

排行榜：10 金牌 6 银牌 3 铜牌

结果的显示其实就是把输入框中的内容替换输入框代码。据此，我写的代码如下：

  preview.innerHTML = style.innerHTML.replace(

  });

原理就是用正则表达式匹配出id，然后通过document.getElementById方法提取input输入框的value属性，从而获得输入值，然后用输入值替换input输入框再注入到预览层中去。

对于许多想学习 JavaScript 的朋友来说，无疑如何选择入门的书籍是他们最头疼的问题，或许也是他们一直畏惧，甚至放弃学习 JavaScript 的理由。
在 JavaScript 方面，自己不是什么专家，也不是什么高手，但自己一路走来，JavaScript 从迷茫到认识，对于 JavaScript 书籍的认识或许还有些借鉴价值。

入门推荐首选书籍：《JavaScript DOM 编程艺术 》

当初读了不下 4 遍，书内容简单，易学，上手快，编程思想严谨。好的入门书，对你未来的编程都会有着深远的影响。此本书不辜负这个历史使命。

更详细的评论可以看 Realazy 在豆瓣上的评论在 豆瓣 上的评论《通往终点的过程与终点本身同样重要》

如果想购买可以直接到在当当或卓越亚马逊上购买打七折还免运费很划算
当当网购买《JavaScript DOM 编程艺术》链接：
卓越网购买《JavaScript DOM 编程艺术》链接：

基础学习书籍：《JavaScript 权威指南》

《JavaScript DOM 编程艺术》只是入门，介绍了编程思想和很简单的程序语法以及 DOM 的基本方法。而《JavaScript 权威指南》详尽的介绍了 JavaScript 的各种函数以及特性。至于后面差不多 500 页左右的参考（JavaScript 核心参考、客户端 JavaScript 参考、DOM 参考）可以暂时不看。

当当网《JavaScript 权威指南》介绍及购买入口：
卓越亚马逊《JavaScript 权威指南》介绍及购买入口：

进阶提升书籍：《JavaScript 高级程序设计》

在思想上强调 OPP 的概念，内容上注重实用，可以从中学到更多更细致的知识，并且注重浏览器差异的解决。

但如果要阅读必须有一定的 JavaScript 的基础（或者读完前两本），要不然会带来挫折感，打击学习的热情。

当当网《JavaScript 高级程序设计》介绍及购买入口：
卓越亚马逊《JavaScript 高级程序设计》介绍及购买入口：

拓展学习篇：《Ajax 实战》

比较全面深入的介绍了 Ajax 知识，其中 Ajax 开发的思想和 Ajax 开发中的设计模式等还是很值得学习。

最好在《JavaScript 高级程序设计》基础上阅读此书，可以很好的帮助理解该书的内容。当然对于没有后台语言基础的朋友来说，阅读起来还是有一定的障碍的。

当当网《JavaScript 高级程序设计》介绍及购买入口：
卓越亚马逊《JavaScript 高级程序设计》介绍及购买入口：

最后想说的：

JavaScript 水平到一定程度，书看得再多也不能得到最后技术的提升，要实践，要自己写代码，深入到开发中锻炼，理论结合实际，才会提升价值。