手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

前端开发大众手册

Submitted by gouki on 2011, October 18, 11:07 PM

很明显，这段内容是ctrl+c,ctrl+v而来的，做备份和资料查询用，挺好的。
原文来自：http://www.chencheng.org/blog/2008/10/25/f2e-manual/#f2e-manual-s1

快捷导航：

另外还搞了个Firefox插件《前端开发工具集》，把资源整合到一个菜单下，方便查询。数据放在线上(Google AppEngine)，速度应该会有保证，更新也会比较方便。

在线工具集

常用Firefox插件

IE下的调试工具

  • Fiddle2 —— 非常强悍的一款http流查看工具，默认支持IE，其他浏览器可以设置将{Document}\Scripts\BrowserPAC.js设为代理进行使用。Firefox下可用上述”Fiddler 开关”进行快速切换。支持插件。
  • IE Developer Toolbar —— 查看元素、禁用缓存、禁用CSS\JS、Outline元素、查看生成的源码等功能，IE8自带了一个加强版的。
  • Microsoft Script Debugger + Companion.JS —— 调试JS用，虽然报错还是有误差，但是我已经满足了。安装顺序是：Microsoft Script Debugger，Companion.JS，在”IE选项-高级”里取消禁用脚本调试。
  • 多版本IE共存两种方案：
    • IE7/8 + IE Tester —— 大众型配置，可以基本满足日常需要。
    • IE6 + Internet Explorer Collection —— 在IE 6用户占绝对优势以及IE 6神奇bug满天飞的时代，我还是推荐这种方案，因为只有神奇的原装IE 6，才能抵挡运营神奇的问题。另外如果还有其他机器可供支配的话，建议再装个IE 8 + IE Tester，因为IE 8下的Developer Toolbar还是有很大改进的，调试起来会方便一些。
  • 以下三个软件相对不重要些：

参考手册

批处理工具

IDE及其他工具

Bookmarklet(右键另存)

开发者社区及权威网站

推荐订阅的博客和网站(排名不分先后)

－－－－－－
看了上面的内容，其实可以感觉得到国内的站点是什么样的。个人博客中还是有很多人研究一些东西，但走来走去，还是那些人的小圈子。你说呢?
如果你打不开原文地址的话，那么我就不得不说几句了，有时候，有个个人博客还是很有用的。
1、记录自己的开发心得，用与和其他人交流
2、摘抄一些信息，用于做数据的储存
3、也正是有了博客，除了做交流外，还能赚一些域名费和空间费（当然，我的服务器是我自己买 的和托管的，巨亏啊）

Tags: 前端

Javascript | 评论:2 | 阅读:24575

Javascript判断横竖屏

Submitted by gouki on 2011, September 24, 3:33 AM

最近在做ipad上的网页处理的时候，经常需要切换横竖屏。于是找了一下资料，写了一个简单的判断：

function check(){
     var s,screen = (window.innerWidth > window.innerHeight) ? "portrait" :"landscape";
     if(s!=screen){
         s=screen;
         alert(s);
    }
}
然后在document.addEventListener("DOMContentLoaded",function(){
     //在这里加入
    window.addEventListener("orientaionchange",check,false);
    //然后就是很重要的一句：
    setInterval(check,300);
})

为什么要用setInterval，就是因为每一次切换都要迅速判断，因此不得不用setInterval，否则第一次判断后就不会再处理了。。

Tags: javascript, ipad

Javascript | 评论:0 | 阅读:22924

CoffeeScript

Submitted by gouki on 2011, September 17, 10:44 PM

在博客园看到有人在介绍CoffeeScript，以前仿佛看过类似的东西。所以去官方看了一下，结果发现现在的代码是不是都在追求所谓的语义化？
比如你看这一段 ：

mood = greatlyImproved if singing  if happy and knowsIt   clapsHands()   chaChaCha() else   showIt()  date = if friday then sue else jill  options or= defaults 
然后所谓生成后的代码就成了这样：
var date, mood; if (singing) mood = greatlyImproved; if (happy && knowsIt) {   clapsHands();   chaChaCha(); } else {   showIt(); } date = friday ? sue : jill; options || (options = defaults); 
看到上面的这段生成后的代码，再对比一下原来的写法，是不是觉得很有意思？
再来一段长的：
grade = (student) ->   if student.excellentWork     "A+"   else if student.okayStuff     if student.triedHard then "B" else "B-"   else     "C"  eldest = if 24 > 21 then "Liz" else "Ike" 
输出之后就是：
var eldest, grade; grade = function(student) {   if (student.excellentWork) {     return "A+";   } else if (student.okayStuff) {     if (student.triedHard) {       return "B";     } else {       return "B-";     }   } else {     return "C";   } }; eldest = 24 > 21 ? "Liz" : "Ike";
越来越发现，原来写伪代码也可以转换成代码。而且看上去也不错，有点象zen coding了。现在很多IDE都支持zen coding
不知道这次这个coffeescript什么时候会被支持
官网：http://jashkenas.github.com/coffee-script/
但是对于用户来说，有一点压力，因为它还是会有一些学习成本。
 

Javascript | 评论:0 | 阅读:15841

DOM元素节点nodeType取值详解

Submitted by gouki on 2011, September 6, 11:01 PM

nodeType的取值还是会经常用到的，但一般我们只用1和3，找了一下资料，1和3的含义是什么，才发现，原来是这样的。【部分资料来自：http://www.impng.com/web-dev/element-nodetype-values.html】

整数 常量
1 ELEMENT_NODE，普通元素节点，如<html>,<p>,<div>,<span>,<img>
2 ATTRIBUTE_NODE，元素属性
3 TEXT_NODE，文本节点
4 CDATA_SECTION_NODE，即<![CDATA[ ]]>
5 ENTITY_REFERENCE_NODE，实体引用，如&amp;&nbsp;
6 ENTITY_NODE，实体，如<!ENTITY copyright “Copyright 2010, impng. All rights reserved”]>
7 PROCESSING_INSTRUCTION_NODE，PI，处理指令，如<?xml  version=”1.0″?>
8 COMMENT_NODE，注释<!–   –>
9 DOCUMENT_NODE，根节点，即document.nodeType
10 DOCUMENT_TYPE_NODE，DTD，文档类型<!DOCTYPE   >
11 DOCUMENT_FRAGMENT_NODE，文档片段
12 NOTATION_NODE，DTD中定义的记号


需要注意的是，在IE下会直接跳过HTML中的空格/Tab/换行，而Firefox下空格会认为是一个节点，因此，对类似节点取nextSibling或previousSibling时，需要判断是否是元素节点。所以。要取某个节点下面的文字时，必须是类似这样的写法。

JavaScript代码
  1. function L(a) {  
  2.     var b = "";  
  3.     for (a = a.firstChild; a; a = a.nextSibling){  
  4.         if (a.nodeType === 3){  
  5.             b += a.nodeValue;  
  6.         } else if (a.nodeType === 1){  
  7.             b += L(a);  
  8.         }  
  9.     }  
  10.     return b  
  11. }  

Tags: nodetype, dom

Javascript | 评论:0 | 阅读:19759

offsetParent作用范围

Submitted by gouki on 2011, August 30, 10:23 PM

在看代码的时候看到了这个offsetParent也就顺便找了一下资料：

XML/HTML代码
  1. offsetParent从字面上理解，这是在查找元素的父亲．可实际应用中，根据浏览器他会返回不同的结果．在Opera较低版本中返回被引用元素的直接父元素，在IE中使用offsetParent有时会返回body元素，有时会返回被引用元素的父元素．为什么IE会这样．我会在下面的实例演示中解释清楚．而在FireFox中他总是返回body元素．  
  2. 注意：offsetLeft与offsetTop永远是根据offsetParent来返回值，如果offsetParent返回的是父元素，那么他们就返回与父元素的偏移结果，如果offsetParent返回的是body元素，那么他们就返回与body元素的偏移结果．请根据浏览器进行测试．  

然后找了一段代码进行测试：

XML/HTML代码
  1. <html>  
  2. <head>  
  3.     <title>Dom：offsetParent使用</title>  
  4. </head>  
  5. <body>  
  6.     <p>该网页中有4个div 他们的id值分别是a,a_1,b,b_1<br/> a包含了a_1．b包含了b_1<br/> a和b是相互独立的．．下面我们分别对a_1和b_1两个子元素使用offsetParent方法．  
  7.         你用IE浏览器测试，你会发现a1的运函数弹出body，而b1的运行函数返回了div，同样的两个子元素．同样的使用方法．为什么返回的结果不一样呢？ 原因就是我为b1的父元素b,增加了一个宽度属性以后．他就把offsetParent看做是元素的父元素．如果不为b元素指定任何属性样式，他则返回body  
  8.         而在火狐和谷歌浏览器中两次都会弹出body,不会受此影响．</p>  
  9.     <div id="a">  
  10.         <div id="a_1"></div>  
  11.     </div>  
  12.     <div id="b" style="width:200px;">  
  13.         <div id="b_1"></div>  
  14.     </div>  
  15.     <script type="text/javascript">  
  16.         function a1_offsetParent() { //测试b元素的offsetParent  
  17.             var a_1 = document.getElementById("a_1");  
  18.             alert(a_1.offsetParent.tagName);  
  19.         }  
  20.         a1_offsetParent();//运行a1测试函数  
  21.         function b1_offsetParent() {  
  22.             var b_1 = document.getElementById("b_1");  
  23.             alert(b_1.offsetParent.tagName);  
  24.         }  
  25.         b1_offsetParent();//运行b1测试函数  
  26.     </script>  
  27. </body>  
  28. </html>  

这个时候就象上面的说明所说的，在firefox和webkit核心下两者都返回了“body”，然而：

XML/HTML代码
  1. 网友hcp8706说：  
  2. 在FF中使用offsetParent时不一定总返回body元素，当父元素使用css设置了定位属性时，offsetParent就会返回父元素．   

于是我在div的id="b"的style里加入了position:absolute，然后再测试，果然就返回了DIV。

XML/HTML代码
  1. <div id="b" style="width:200px;position:absolute;">  
  2.     <div id="b_1"></div>  
  3. </div>  
  4. <script type="text/javascript">  
  5.     function b1_offsetParent() {  
  6.         var b_1 = document.getElementById("b_1");  
  7.         alert(b_1.offsetParent.tagName);  
  8.     }  
  9.     b1_offsetParent();//运行b1测试函数  
  10. </script>  


学习完毕，上述的信息来自：http://www.web666.net/dom/offsetParent.html

Tags: offsetparent

Javascript | 评论:0 | 阅读:19141

Records:306«‹14151617181920212223›»