「 javascript 」标签的归档

Firebug

本文轉載自該處.

1. Firebug 中的Logging

Firebug有5種logging的方法:
1. console.log
2. console.debug
3. console.error()   erroricon Firebug
4. console.info()     infoicon Firebug
5. console.warn()   warningicon Firebug

console.log('This is log message');
console.debug('This is debug message');
console.error('This is error message');
console.info('This is info message');
console.warn('This is warning message');

 image Firebug

2. Firebug 中的Grouping

當輸出信息較多的情況下,可以嘗試用Grouping把信息組合起來輸出

var groupname = 'group1';
console.group("message group : " , groupname);
console.log("log message 1 from ", groupname);
console.log("log message 2 from ", groupname);
console.log("log message 3 from ", groupname);
console.groupEnd();

groupname = 'group2';
console.group("message group :  " , groupname);
console.log("log message 1 from ", groupname);

var subgroupname = 'subgroup1';
console.group("message group :  " , subgroupname);
console.log("log message 1 from ", subgroupname);
console.log("log message 2 from ", subgroupname);
console.log("log message 3 from ", subgroupname);
console.groupEnd();

console.log("log message 3 from ", groupname);
console.groupEnd();

image 3 Firebug

3. console.dir 和 console.dirxml

  • console.dir: 列舉object所有的屬性和方法
  • console.dirxml: 講HTMLElement以xml樹狀圖形式展示 
<table id="tbl1" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
//Create a class
function Car(){
this.Model = "Old Model";

this.getManufactor = new function(){
return "Toyota";
}
}

//Create a object
var objCar = new Car();

//Firebug
console.dir(objCar);
console.dirxml(document.getElementById('tbl1'));

</script>

image 4 Firebug

4. Assertion

function whatIsMyAge(year){
var currYear = 2007;
return currYear - year;
}

var yearOfBirth1 = 1982;
var age1 = 25;
console.assert(whatIsMyAge(yearOfBirth1) == age1);

var yearOfBirth2 = 1982;
var age2 = 11;
console.assert(whatIsMyAge(yearOfBirth2) == age2); //You should get the error here.

image 5 Firebug

只顯示一個失敗,證明有一個通過.

5. Tracking

console.trace() 可用於追蹤一系列function,清楚反應每個方法的運行軌跡.

<!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>
<title>Firebug</title>
<script language="javascript" type="text/javascript">

    function startTrace(str){
        return method1(100,200);
    }
    function method1(arg1,arg2){
        return method2(arg1 + arg2 + 100);
    }
    function method2(arg1){
        var var1 = arg1 / 100;
        return method3(var1);
    }
    function method3(arg1){
        console.trace();
        var total = arg1 * 100;
        return total;
    }

</script>
</head>
<body>
<input type="button" value="Trace" onclick="startTrace('4');"/>
</body>
</html>

image 6 Firebug

上圖顯示,用戶在X=46,Y=18的地方點擊了按鈕,收到用戶的動作之後,激發了startTrace方法,由於startTrace方法中包含method1(),於是method1()被call,如此類推.

6. Timing

衡量代碼運行時間

<!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>
<title>Firebug</title>
<script language="javascript" type="text/javascript">
function measuretheTime(){
    var timeName = 'measuringTime';
    console.time(timeName);

    for(var i=0;i&lt;1000;i++){
    ///do something
    for(var j=0;j&lt;100;j++){
    //do another thing.
    }
}

console.timeEnd(timeName);
}
</script>
</head>
<body>
    <input type="button" value="Trace" onclick="measuretheTime();"/>
</body>
</html>

measuringTime: 1ms

 

Firebug Tutorials

article clipper remember Firebug
 
2011
11/27
分类
Software
标签
发表评论

Sharepoint ctx

受Basic SharePoint-Google-Maps-WebPart for SharePoint-Lists及OWSAPI啓發,原來SharePoint在Load完每個頁面之後,會創建一個ctx的object,這個object記錄了該頁面的眾多信息,可以善於利用.

在Firebug中的Console填寫ctx,在返回的object中即可獲取ctx的所有屬性質料,其中包括

  • HttpPath
  • HttpRoot
  • ListTitle
  • listName
  • listUrlDir
  • view

實際應用:

article clipper remember Sharepoint ctx
 
2011
10/24
分类
SharePoint
标签

发表评论

Add new button in the last position of tool bar

受Basic SharePoint Google Maps WebPart for SharePoint啓發,下面提供一個在SharePoint List的ToolBar最後位置添加按鈕的方法

function AddButton(YourButtonTitle,YourFunction,YourLink)
{
  //searching for the correct position in the menu-toolbar (ms-menutoolbar)
  $("td.ms-toolbar").each(function(j){
    if($(this).attr("width")=="99%")
    {
      //insert a new menu-item before the found placeholder
      //var newMenuItem = '</internal-name-of-column><td class="ms-separator">';
      var newMenuItem = '<td class="ms-separator">';
      newMenuItem += '<img src="/_layouts/images/blank.gif" alt=""/>';
      newMenuItem += '</td>';
      newMenuItem += '<td nowrap="true" class="ms-toolbar">';
      newMenuItem += '<span title="'+ YourButtonTitle +'">';
      newMenuItem += '<div nowrap="nowrap" hoverinactive="ms-menubuttoninactivehover"' +
                     ' hoveractive="ms-menubuttonactivehover"'+
                     ' onmouseover="MMU_PopMenuIfShowing(this);' +
                     ' MMU_EcbTableMouseOverOut(this, true)"' +
                     ' class="ms-menubuttoninactivehover">';

      //Sample: <a href='#' onclick="javascript:YourFunction();return false;"
      //                    style="cursor: pointer; white-space:nowrap;">YourLink</a>
      newMenuItem += '<a onclick="javascript:'+ YourFunction + '();return false;"' +
                     ' href="#" style="cursor: pointer; white-space: nowrap;">'+ YourLink +'</a>';

      newMenuItem += '</div>';
      newMenuItem += '</span>';
      newMenuItem += '</td>';
      $(this).before(newMenuItem);
    }
  });
article clipper remember Add new button in the last position of tool bar
 
2011
10/23
分类
JavaScript
SharePoint
标签
发表评论

Sharepoint smart tools jQuery loader

微軟技術顧問 Jan Tielens 開發了個aspx,可以為SharePoint site 植入jQuery以及一個經其編寫的js – jQuery Loader.

在看其示範短片之後,感覺極度方便,於是試用, 在創建Document Library以及添加上述兩個js文件到該Library時,都成功. 但是在update default.master的時候,雖然顯示成功,但是當打開SharePoint主頁的時候卻失敗了, 提示Error.

鑒於公司沒有SharePoint Designer, 這個失敗似乎是致命的. 然而,天無絕人之路, 最後還是找到方法.

只需進入http://yoursite/_layouts/settings.aspx, Reset to site definition 重設就可以

注:Reset to site definition 并不會丟失任何內容

article clipper remember Sharepoint smart tools jQuery loader
 
2011
10/22
分类
SharePoint
标签


发表评论

JavaScript contains ignorecase

jQuery的強大,令web designer省卻了不少的麻煩,但是今天卻發現要用contains去select包含某字段元素的時候,jQuery卻沒有內置的ignoreCase選項. 搜索后,發現如下代碼

$.expr[':'].containsIgnoreCase =
            function(obj, index, meta, stack){
                      return (obj.textContent ||
                              obj.innerText ||
                              jQuery(obj).text() || '')
                              .toLowerCase().indexOf(meta[3].toLowerCase()) >= 0; };

很簡潔地為jQuery添加了此一缺失的功能.

對於其中meta[3]的含義,自己還是沒有理解透,不過發現該文.

$.expr[":"].containsNoCase = function(el, i, m) {

    var search = m[3];

    if (!search) return false;

    return eval("/" + search + "/i").test($(el).text());

};

該文提供了另一個方法,是用RegEx的方式去實現,其中有一段文字去解釋m[3].

element 0 is the full filter string including parameter, with token 1,2,3 being the :, filter name and parameter respectively. m[3] is the first parameter which in this filter is the string we’re searching for.

估計是指

m[0]: :containsNoCase('yourString')
m[1]: ':'
m[2]: containsNoCase
m[3]: 'yourString'
article clipper remember JavaScript contains ignorecase
 
2011
10/17
分类
JavaScript
标签

发表评论

Office 15也将支持HTML 5、JavaScript开发

微软已经公开表明 HTML5 和 JavaScript 将是 Windows8中关键的开发平台技术，如今的两则招聘信息更是暗示了，HTML5 和 JavaScript 也将成为 Office15 甚至是 Office365 的开发的技术之一。

其一是：“现在是时候将 Office 编程提高到下一阶段了。我们是 Visual Studio 部门中的小团队，目前正在规划 Office 15 的开发工具。我们的一大重要使命是使 Office 开发变得像下一代 Windows（即 Windows 8）那样简单而充满乐趣！JavaScript/HTML5 的整合将允许开发者创建能够跨客户端与服务器、整合 Office 365、增强 SharePoint 体验的富应用。”

第二则招聘更加具体：“我们的使命是提供通过脚本、宏、插件来扩展微软和第三方应用的下一代开发工具。这些工具允许企业应用开发者完全利用现代编程平台（比如 Visual Basic、C#、HTML 和 JavaScript）来快速且方便地开发创新的企业内的定制解决方案。”

目前微软已经为 Office 开发者提供了 Visual Basic for Applications（VBA）和 Visual Studio Tools for Office（VSTO），上述的两则招聘信息没有提到微软是否会结束 VBA 或 VSTO，也没提到 WPF/Silverlight 的发展，但可以肯定 HTML 5、JavaScript 将会是 Office 开发平台的新重点。

article clipper remember Office 15也将支持HTML 5、JavaScript开发
 
2011
09/12
分类
Excel
标签



发表评论