遜砲賴的爆肝筆記: javascript

顯示具有 javascript 標籤的文章。顯示所有文章

2015年11月13日星期五

[JS] 如何在JavaScript debug - 3.使用debug模式

如何在JavaScript debug第三集

debugㄟ郎龍係迪爸蓋。。。

這次是真正介紹怎麼在JavaScript debug！！

（蝦咪？那前兩篇是啥？？？）

來個不重要的前情提要吧

[JS] 如何在JavaScript debug - 1.找出錯誤的程式碼

[JS] 如何在JavaScript debug - 2.列印訊息（console.debug)

在逢甲工作的時候，英俊前輩教會我怎麼在eclipse使用debug工具中斷程式，追蹤參數

這招真的太好用了！！！！

從此我就擺脫System.out.print這種蠢方法

（只有在追蹤到底哪段程式浪費最多時間時才會把它印出來）

但今天不講eclipse，直接講Javascript

偉大的瀏覽器替直譯的JavaScript提供了debug的方法

說明一下：這招是蟹老闆教我的

首先，按 F12打開『開發人員工具』

然後切換到Sources頁籤

找到你想中斷的JavaScript程式碼

找不到的話，可以在旁邊切換到正確的檔案

在前面的行數輕輕點一下設立中斷點

然後就可以開始造你想要的流程操作網頁了

如下圖所視：當程式跑到中斷點時，就會停住

此時把滑鼠游標指到想追蹤的參數，等待他一下

就會出現參數目前的值是啥，如下圖框起來的部分所示

接下來就看要逐步執行，或是到下一個中斷點

不想繼續debug下去的話，直接把『開發人員工具』關掉就可以了

改完原始檔的javascript程式後，總是會習慣性的F5把畫面重整

這時候如果沒有把『開發人員工具』，網頁就會停在中斷點，很麻煩。。。

（因為他會先跑過一次編譯程式）

所以建議先關掉『開發人員工具』在重新整理（F5）

改JavaScript還有一件更討厭的事！！！！

就是cache！！！怎麼改都沒反應，沒發現是cache作怪的話真的是會卡關卡很久！！

此時可以直接『 ctrl + F5 』，強迫瀏覽器在去抓一次程式

搞定！！！

cache這件事還有其他的問題跟解法

尤其是tomcat真是超會cache的

有空在來寫吧

後記：
我跟蟹老闆說，最近都在po技術文，都快忘記怎麼寫搞笑文了，快不能回到老本行了。

蟹老闆說：你哪有po什麼技術文？你一直都在po搞笑文阿！！！

[JS] 如何在JavaScript debug - 1.找出錯誤的程式碼

[JS] 如何在JavaScript debug - 2.列印訊息（console.debug)

2015年11月5日星期四

[JS] 如何在JavaScript debug - 2.列印訊息（console.debug)

上一篇寫了待續未完，但續集卻是在這邊

想不到吧.... 哈哈哈，你抓不到我

其實是因為JavaScript的debug我有三個主題要寫

但如果寫在同一篇的話

對於想直接找到答案的人，還要看完一整篇文章才有結果

這實在太不貼心了，

沒錯！我就是那個一股溝就想知道答案的懶惰工程師

因此我又新開了一篇

在寫java時，第一個公司的前輩教我如何debug的方式

就是在某些地方System.out.println

直接print一些參數看看值正不正確

早期寫java的日子我一直用這個方式debug

~~直到我膝蓋中了一槍~~ 直到我學會debug模式為止

於是我把這個方式copy到JavaScript使用

有時候前端沒反應就是沒反應

怎麼改都不行真的很火大（cache也是一件很令人火大的事)

為了檢查值對不對，我會在某些關鍵地方alert出來看

一直用alert這種方式debug的結果就是

就要一直按確認

我又不是再做整人的網站，搞什麼阿！！！

整的還是我自己.......

~~直到我膝蓋中了一槍~~ 發現console.debug

這就是JavaScript版的System.out.print阿！！！

就像這樣

console.debug("a=" +a);

然後依然是F12看console就能看到列印出來的結果

不用再蠢蠢的確認確認確認再確認了

下回預告：

還記得上面說的

早期寫java的日子我一直用這個方式debug

~~直到我膝蓋中了一槍~~ 直到我學會debug模式為止

下篇：如何在JavaScript debug - 3.使用debug模式

2015年11月3日星期二

[JS] 如何在JavaScript debug - 1.找出錯誤的程式碼

在我剛出社會正要找第一份工作的時候

某個的老闆就這樣問我

『怎麼找出JavaScript錯誤』

當時呆呆的我，竟然回答『看程式』

結果就謝謝再聯絡了......(但是是我拒絕他XD)

後來覺得自己真是蠢畢了

寫過前端的人應該都會知道JavaScript是直譯式的語言

一邊編譯一邊執行，當你看到畫面前幾秒才編譯好

光看程式怎麼能發現runtime時錯誤呢XDDD

當右下角發現小小的黃色三角驚嘆號時

就是JavaScript出錯了!!!

(話說我用chrome後很久沒看到了....)

請按F12, 點console

就會很貼心的跟你說第幾行出錯

此時的行數，可不是原始碼的行數

別傻傻的要去找第1042行

自己寫的哪來那麼龐大的JS

而是編譯過後的程式碼行數

直接點選右邊的連結

瀏覽器會很貼心的帶你去錯誤的那一行

知道錯誤在哪裡了吧

這時候才來追原始碼的程式

2015年11月2日星期一

[JS] uploadify 傳入其他參數

uploadify 的一般用法

 $('#aImport').uploadify({
    'removeCompleted': true,
    'height': 25,
    'width': 45,
    'buttonText': '匯入',
    'queueID': 'queue',
    'multi': false,
    'uploader': '@Url.Action("ImportVistorFile")',
    'swf': '@Url.Content("~/Content/flash/uploadify.swf")',
    'fileObjName': 'file',
    'onUploadSuccess': function (file, data, response) {
        alert("匯入成功");
    },
    'onUploadError': function (file, errorCode, errorMsg, errorString) {
        alert('匯入失敗');
    }
});

後端程式的接法如下，直接接HttpPostedFileBase

public ActionResult ImportVistorFile(HttpPostedFileBase file)
{
    if (file != null)
    {
         var fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + file.FileName;
         var savePath = Path.Combine("D:/", fileName);
         file.SaveAs(savePath);
    }
}

但有時候除了檔案之外，還需要傳入其他東西
範例如下

public ActionResult ImportVistorFile(HttpPostedFileBase file,int projId)

這時候uploadify可以加入formData
以JSON的方式傳入參數
例如

 'formData': { "projId": $('#ProjId').val() },

整體範例如下

 $('#aImport').uploadify({
    'removeCompleted': true,
    'height': 25,
    'width': 45,
    'buttonText': '匯入',
    'queueID': 'queue',
    'multi': false,
    'uploader': '@Url.Action("ImportVistorFile")',
    'swf': '@Url.Content("~/Content/flash/uploadify.swf")',
    'fileObjName': 'file',
    'formData': { "projId": $('#ProjId').val() },
    'onUploadStart' : function(file) {
        $("#aImport").uploadify("settings", "formData", { "projId": $("#ProjId").val() });
    },
    'onUploadSuccess': function (file, data, response) {
        alert("匯入成功");
    },
    'onUploadError': function (file, errorCode, errorMsg, errorString) {
        alert('匯入失敗');
    }
});

2015/11/19 更新

今天又遇到不可思議的問題

在使用下拉選單傳入ProjId參數時

不管怎麼怎麼怎麼選，永遠都只傳入第一個選單

搞了一上午，總算解決了

在onUploadStart時重新設定formData的內容

'onUploadStart' : function(file) {
    $("#aImport").uploadify("settings", "formData", { "projId": $("#ProjId").val() });
},

2015年9月16日星期三

[JavaScript] datepicker 選擇日期區間設定

使用小月曆選擇日期時

通常我都用JQuery的datepicker (官網：https://jqueryui.com/datepicker/ )

最近接到一個需求：

根據前一個radio判斷可選擇的日期區間

第一次執行時可以透過下列設定minDate與maxDate

$("#selectDate").datepicker({
        minDate: new Date(2015,1,1),
        maxDate: new Date(2015,12,31)
    });

但執行後一樣的程式卻不能用了

沒有報錯，但也沒有反應

原來要執行後要重新設定datepicker的屬性，必須要加入option

範例如下

$("#selectDate").datepicker("option", "minDate", new Date());
$("#selectDate").datepicker("option", "maxDate", null);

執行結果: https://output.jsbin.com/wusini

2014年6月2日星期一

Cannot read property 'createDocumentFragment' of null

處理分頁時，使用ajax去重新讀取資料並且load頁面

經過了種種javascript傳遞物件失敗的挫折後，終於成功

因為太懶惰，所以想直接$(document).html(result)

結果卻一直失敗

本來以為是之前發現過的viewstate問題

沒想到問題更淺

竟然只是js的問題

stackoverflow上面是這樣說的

It doesn't make sense to try to add an element to the start of the document object. It isn't an HTMLElementNode. As far as I know, you can't give it additional children at all.

If you want to add a div element to the start of something, then the highest node that is allowed to contain it is the body element, so use: