Mr. NFrankenstein: Java Script

顯示具有 Java Script 標籤的文章。顯示所有文章

2013年11月15日

Online Convert Unix timestamp to Readable Date/time

年:
轉換日期/時間至 Unix timestamp (以1970/1/1為基準)
	/	/	at	:	:

base 64 string encode online

這一個用JavaScript寫的base 64 轉換的程式，方便大家使用，
至於程式寫法，可參閱下面這一篇文章。
http://subocheng.blogspot.tw/2013/11/javascript-base64-encode.html

Source String

Base 64 String

/**
*
* Base64 encode / decode
* http://www.webtoolkit.info/
*
**/
var Base64 = {

// private property
_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

// public method for encoding
encode : function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;

input = Base64._utf8_encode(input);

while (i < input.length) {

chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);

enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;

if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}

output = output +
this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);

}

return output;
},

// public method for decoding
decode : function (input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;

input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

while (i < input.length) {

enc1 = this._keyStr.indexOf(input.charAt(i++));
enc2 = this._keyStr.indexOf(input.charAt(i++));
enc3 = this._keyStr.indexOf(input.charAt(i++));
enc4 = this._keyStr.indexOf(input.charAt(i++));

chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;

output = output + String.fromCharCode(chr1);

if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}

}

output = Base64._utf8_decode(output);

return output;

},

// private method for UTF-8 encoding
_utf8_encode : function (string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";

for (var n = 0; n < string.length; n++) {

var c = string.charCodeAt(n);

if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}

}

return utftext;
},

// private method for UTF-8 decoding
_utf8_decode : function (utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;

while ( i < utftext.length ) {

c = utftext.charCodeAt(i);

if (c < 128) {
string += String.fromCharCode(c);
i++;
}
else if((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i+1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}
else {
c2 = utftext.charCodeAt(i+1);
c3 = utftext.charCodeAt(i+2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}

}

return string;
}

}

2013年9月30日

JavaScript Object Property get And set Method

範例:
var Obj = {}; Obj._aaa = null; Object.defineProperty(Obj, "aaa", { get: function () { return Obj._aaa; }, set: function (val) { console.log(Obj._aaa); Obj._aaa = val; } }); console.log(Obj.aaa); Obj.aaa = "test"; console.log(Obj.aaa);

結果:

null

null

test

說明:
可以在get and set的function做一些其他的事情，
當然你也可以不一定要用Obj._aaa;也可以將值寫入其他地方，例如localStorage

下面另外寫一個範例，儲存某些值到localStorage，若該值為空的，給他一個預設值。
範例
var Obj = {}; Object.defineProperty(Obj, "aaa", { get: function () { if(localStorage.getItem("aaa") == null) Obj.aaa = "Default Value"; return localStorage.getItem("aaa"); }, set: function (val) { localStorage.setItem("aaa",val); } }); console.log(Obj.aaa); Obj.aaa = "test"; console.log(Obj.aaa);

結果

Default Value

test

jQuery for each

針對Array進行for each
var ary = [ 52, 97 ]; $.each(ary, function( index, value ) { console.log( index + ": " + value ); });

結果

0: 52

1: 97

針對Object進行
var ary = {}; ary["aaa"] = "123"; ary["bbb"] = "456"; $.each(ary, function( index, value ) { console.log( index + ": " + value ); });

結果

aaa: 123

bbb: 456

break 效果 (return false)
var ary = [ 52, 97 ]; $.each(ary, function( index, value ) { if(index == 1) return false; console.log( index + ": " + value ); });

結果

0: 52

continue 效果 (return true)
var ary = [ 52, 97 ,30,20]; $.each(ary, function( index, value ) { if(index == 1) return true; console.log( index + ": " + value ); });

結果

0: 52

2: 30

3: 20

2013年9月1日

JavaScript Date Format

利用JavaScript取得目前時間並格式化YYYYMMDDHHMMSS

function GetDateFromatYYYYMMDDHHMMSS()
{
function pad(n){return n<10 :="" font="" n="">
var d = new Date();
return d.getFullYear() + pad(d.getMonth()+1) + pad(d.getDate()) + pad(d.getHours()) + pad(d.getMinutes()) + pad(d.getSeconds());
}

Javascript 加密，PHP解密 AES加密方式

JavaScript 加密:

<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/aes.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/components/pad-zeropadding.js"></script>

function EncryptData(data)
{
var key = CryptoJS.enc.Latin1.parse("1234567812345678");
var iv = CryptoJS.enc.Latin1.parse("1234567812345678");
var encrypted = CryptoJS.AES.encrypt(data, key, { iv: iv,mode:CryptoJS.mode.CBC,padding:CryptoJS.pad.ZeroPadding});
return encrypted;
}

PHP解密
$key = "1234567812345678";
$iv = "1234567812345678";
$DecryptData = rtrim(mcrypt_decrypt(MCRYPT_RIJNDAEL_128, $key, base64_decode($EncryptedData), MCRYPT_MODE_CBC, $iv),"\0");

注意一點，要把解密出來的後面\0來掉。
所以加了rtrim(XXX,"\0");
要不然Javascript比對會錯誤。

下面這一個我寫了一個SampleCode，但Key和iv的地方，需要做修改
Sample Code Download :

http://sdrv.ms/1aazyLW

2009年9月1日

Setting Maxlength with javascript

use javascript to set an object "maxlength" property doesn't working.

must use "maxLength".

ex :

document.getElementById("textObejct").maxLength = 5;

2009年7月22日

以Byte單位來計算字串長度的幾種做法(Javascript,C#,VB.Net)

一般計算字串長度,有下列幾種:

1.計算字元數,不管中文字,英文字都算一個字元

2.計算Byte數,中文字算2個byte,英文字算1個byte

舉例:

字串為:"我是puma"

1.計算字元數:中文字(2),英文字(4),總共(6)

2.計算Byte數:中文字(4),英文字(4),總共(8)

程式語法

view plaincopy to clipboardprint?
string str = "我是puma";  
  
//一般的字中長度計算,中文字(2),英文字(4),總共(6)  
Response.Write(str.Length.ToString());  
  
//利用Byte單位來計算字串長度,中文字(4),英文字(4),總共(8)  
Response.Write(System.Text.Encoding.Default.GetBytes(str).Length);  

VB.Net

view plaincopy to clipboardprint?
Dim str As String = "我是puma"  
  
'一般的字中長度計算,中文字(2),英文字(4),總共(6)  
Response.Write(str.Length.ToString())  
  
'利用Byte單位來計算字串長度,中文字(4),英文字(4),總共(8)  
Response.Write(System.Text.Encoding.Default.GetBytes(str).Length)  

Javascript

view plain copy
to clipboard print ?

<script type="text/javascript">

//string.Blength() 傳回字串的byte長度

String.prototype.Blength =
function() {

var arr = this.match(/[^\x00-\xff]/ig);

return arr ==

null ? this.length :

this.length + arr.length;

}

var str
= "我是puma";

alert("字元數:"+str.length);
//中文字(2),英文字(4),總共(6)

alert("byte數:"+str.Blength());
//中文字(4),英文字(4),總共(8)

</script>

2007年11月21日

在UpdatePanel下，使用RegisterClientScript

在.Net 2.0上面，一般我們會使用Response.Write()或是Me.Page.ClientScript.XXX來註冊或是寫一段Script到Client端，但是當我們使用UpdatePanel做AsyncPostBack時，它是沒有作用的。這時我們就必須使用ScriptManager來做了。

將其相對應的功能列表於下：

RegisterArrayDeclaration
使用陣列名稱和陣列值，向 Page 物件註冊 JavaScript 陣列宣告。
ScriptManager.RegisterArrayDeclaration(UpdatePanel1,"Hello",,"1,2,3");

RegisterClientScriptBlock
向Page物件註冊用戶端指令碼。最後一個參數若為true，則會自動加上<script></script>

ScriptManager.RegisterClientScriptBlock(UpdatePanel1,this.GetType(), "HelloWorld", "function helloWorld(){alert(1);}", true);

RegisterClientScriptInclude
向 Page 物件註冊用戶端指令碼 Include。
ScriptManager.RegisterClientScriptInclude(UpdatePanel1,this.GetType(),"HelloWorld",Server.MapPath("test.js"));

RegisterClientScriptResource
使用型別和資源名稱，向 Page 物件註冊用戶端指令碼資源。
ScriptManager.RegisterClientScriptResource(UpdatePanel1,this.GetType(),"test.js");

RegisterExpandoAttribute
將名稱/值組註冊為指定之控制項的自訂 (Expando) 屬性
ScriptManager.RegisterExpandoAttribute(UpdatePanel1,Button1.ClientID,"attributeName","attributeValue",true

RegisterHiddenField
向 Page 物件註冊隱藏值
ScriptManager.RegisterHiddenField(UpdatePanel1,"hiddenFieldName", "hiddenFieldIntialValue

RegisterOnSubmitStatement
使用類型、索引鍵和指令碼常值 (Literal)，向 Page 物件註冊 OnSubmit 陳述式。當送出
HtmlForm 時，會執行該陳述式
ScriptManager.RegisterOnSubmitStatement(UpdatePanel1,this.GetType(),"test","return window.confirm('test'))

RegisterStartupScript
向 Page 物件註冊啟始指令碼
ScriptManager.RegisterStartupScript(UpdatePanel1,this.GetType(),"HelloWorld", "alert('The page has loaded!')",true);

除了利用上面這一些Method將Script註冊到Client外，在UpdatePanel的AsyncPostBack啟動前後都可以加上一個Script Function，會先去呼叫該Function，然後才去做AsyncPostBack。語法如下：

Me.Page.ClientScript.RegisterStartupScript(Me.GetType,"AjaxBeforeUpdatePanelLoad", "<script type='text/javascript'>Sys.WebForms.PageRequestManager.getInstance).add_initializeRequest(BeforeUpdatePanelLoad);</script>")

Me.Page.ClientScript.RegisterStartupScript(Me.GetType,"AjaxAfterUpdatePanelLoad", "<script type='text/javascript'>Sys.WebForms.PageRequestManager.getInstance).add_endRequest(AfterUpdatePanelLoad);</script>")

這樣一來我們就可以自己寫BeforeUpdatePanelLoad和AfterUpdatePanelLoad去做一些我們想要統一做的Script

2007年11月14日

jQuery影片

剛剛在YouTube上面搜尋了一下"jQuery"字眼，發現了一些不錯的東西，
一些它的簡單教學，大師們的談話等等的。
特別將它post出來，讓各位想要使用JavaScript Framework的人，可以參考看看！
或許可以幫助你決定是否使用它吧！

2007年11月10日

利用JavaScript驗證身分證字號是否正確(台灣)

下面這一個code是利用JavaScript來驗證身分證字號是否正確。
Return True or False


//To Validate ID Number
function ValidateIDNumber(sId)
{
 try
 {
  if(sId == "") return true;
  
  sId = sId.toUpperCase();
  
  if(sId.length != 10) return false;
  
  var c1;
  c1 = sId.charAt(0);
  if(c1 < "A" || c1 > "Z") return false;
  
  var str1;
  str1 = sId.substring(1,10);
  if(isNaN(str1)) return false;
    
  var str2;
  str2 = "ABCDEFGHJKLMNPQRSTUVWXYZIO";
  var i1;
  i1 = str2.indexOf(c1) + 10;
  if(i1 < 10) return false;    
  
  sId = i1.toString() + str1
  
  var intChkSum;
  intChkSum = parseInt(sId.charAt(0)) + parseInt(sId.charAt(10));
  
  for(var i=1;i<=9;i++)
  {
   intChkSum = intChkSum + parseInt(sId.charAt(i)) * (10 - i);
  }
  intChkSum = intChkSum % 10;
  if(intChkSum!=0) return false; 
    }catch(e){
  return false;
 }
 return true;
}

設定與取得options(ComboBox)的選取值(Select Value)

要利用JavaScript取得跟設定options(ComboBox)的選項，
其實還有點麻煩，所以這邊就直接提供兩個Method來給各位使用，方便設定跟取得options的選項


function GetComboSelectedValue(objCombo)
{
   return objCombo.options[objCombo.selectedIndex].value;
}


function SetComboSelectedValue(objCombo , strValue)
{
 var i;
 for(i=0;i<=objCombo.options.length -1; i++)
 {
  if(objCombo.options[i].value == strValue)
  {
   objCombo.options[i].selected = true;
   return;
  }else{
   objCombo.options[i].selected = false;
  }
 }
}

利用JavaScript驗證統一編號是否正確(台灣)

先前曾發表過一個"利用VB.NET驗證統一編號是否正確(台灣)"
這裡再補上一個JavaScript版本的。


//To Validate Tax ID
function ValidateTaxID(sTaxID)
{
 try
 {
  var i;
  var a1;
        var a2;
        var a3;
        var a4;
        var a5;

        var b1;
        var b2;
        var b3;
        var b4;
        var b5;

        var c1;
        var c2;
        var c3;
        var c4;

        var d1;
        var d2;
        var d3;
        var d4;
        var d5;
        var d6;
        var d7;
        var cd8;

  if(sTaxID.length != 8) return false;
  
  var c;
  for (i = 0; i < 8; i++)
  {
   c = sTaxID.charAt(i);
   if ("0123456789".indexOf(c) == -1) return false;
  }

        d1 = parseInt(sTaxID.charAt(0));
        d2 = parseInt(sTaxID.charAt(1));
        d3 = parseInt(sTaxID.charAt(2));
        d4 = parseInt(sTaxID.charAt(3));
        d5 = parseInt(sTaxID.charAt(4));
        d6 = parseInt(sTaxID.charAt(5));
        d7 = parseInt(sTaxID.charAt(6));
        cd8 = parseInt(sTaxID.charAt(7));

        c1 = d1;
        c2 = d3;
        c3 = d5;
        c4 = cd8;

        a1 = parseInt((d2 * 2) / 10);
        b1 = (d2 * 2) % 10;

        a2 = parseInt((d4 * 2) / 10);
        b2 = (d4 * 2) % 10;

        a3 = parseInt((d6 * 2) / 10);
        b3 = (d6 * 2) % 10;

        a4 = parseInt((d7 * 4) / 10);
        b4 = (d7 * 4) % 10;

        a5 = parseInt((a4 + b4) / 10);
        b5 = (a4 + b4) % 10;

        if((a1 + b1 + c1 + a2 + b2 + c2 + a3 + b3 + c3 + a4 + b4 + c4) % 10 == 0) return true;
        
        if(d7 = 7)
        {
            if((a1 + b1 + c1 + a2 + b2 + c2 + a3 + b3 + c3 + a5 + c4) % 10 == 0) return true;
        }

        return false;
 }catch(e){
  return false;
 }
}

2007年11月2日

JavaScript Framework (jQuery)

上個禮拜我曾經在一個技術研討會上面，
做了一個簡單的介紹，說明為什麼我們要使用JavaScript Framework - jQuery的簡報。
在這邊將它做一些整理，希望對大家有幫助。

而當大部分的系統操作介面都開始朝向RIA前進時，我們能夠倖免嗎？
我想答案是肯定的吧！所以我們也免不了要開始開發出符合使用者期望的的操作介面來…
那使用者到底在想些什麼呢？他們的期望到底是什麼呢？
或許就是…

而為了滿足這些不斷擴展的使用者期望，一些新的技術或應用陸續的浮上檯面了…

而我們選擇了用AJAX和大量的JavaScript來滿足使用者的期望…
選擇它是因為我們覺得，以現有人員的技術背景來考量，
它的進入門檻比較低一點…因為它的code對我們而言比較熟悉也比較有親和力
但也因為我們選擇了這樣的搭配組合，所以我們也開始撰寫了大量的JavaScript，
當我們寫的越多，遇到的瓶頸與困難也越多…

遇到了這些問題，我們就在思考
…
其實網路上也有許多團體在發展JavaScript的Framework或Library…

那既然已經知道JavaScript也有Framework了，
那我們就開始思考，導入JavaScript的Framework是否有一些預設想要達到的目標或期望呢？
列出這一些將會有助於我們選擇一個比較適合我們的Framework.

1.最理想的狀況是，只要遵循library的語法來撰寫，就可以不用去理會跨browser的問題…
2.Reuse一些open source的程式，減少自行重新開發的程式
3.希望它可以使我們的程式更乾淨一些，可讀性更好一些
4.程式碼乾淨、可讀，相對的MA的負擔就會降低了
5.開發速度當然也是一個很重要的考量點
6.最後當然是學習成本不能太高摟~~總不能為了要達到這些目的，我們要額外花上一兩個月來學習如何使用它吧！這樣可能不是很符合經濟效益。

那到底要用哪一家的Library其實還蠻困擾我們的，
目前網路上有許多有名的JavaScript的Library，各自有各自的愛好者，而我最後是選擇了用jQuery來做我們的基底。
那為什麼要選用jQuery呢？或許是被它的slogan  write less , do more所吸引了吧！

這麼多的library其實我們也沒有每一個library都去看過、比較過，我們主要去看過prototype和jQuery而已，主要是因為時間上的考量，而且這兩個library是在網路上最常被拿來比較的。
那在這兩個library當中，我個人是覺的jQuery的code是比較簡潔的，也跟我過去學的程式語言的style比較相近一些。(這一點java派的人可能會反駁我，因為有人聲稱prototype比較像java，而jQuery比較像ruby。)
很小，所以對於網路傳輸的負擔很輕。因為JavaScript是必須要將全部的code傳到Client去執行的，所以我們不太可能去選擇一個很強但是又很大的Framework，要不然這樣對於網路的傳輸負擔其實是蠻大的。
jQuery算是相當熱門的JavaScript的Framework，因為熱門，所以自然就有很多愛好者願意投入來開發它，自然的資源就會比較多。而且他也是最近一兩年新崛起的熱門資源，而且還發展的蠻茁壯的，所以應該沒有那麼快被淘汰吧？
另外jQuery算是我比較早接觸的JavaScript library可能有些先入為主的觀念，所以還是比較喜歡用它…

這一個畫面是從jQuery的官方網站首頁上擷取下來的，它對於jQuery的解釋。
他說jQuery是一快速、簡明的javascript library，可以幫我們簡化HTML還有AJAX的處理。
它是設計來改變我們對於javascript的寫法的。
然後他這邊也聲稱用jQuery寫出來10行code的功能，在一般的JavaScript上面，可能要用20行才可以完成。
然後他這邊也強調，你如果要把這10行code往下精簡到2~3行是不太可能的。
這也就告訴我們，其實用jQuery寫出來的javascript已經是很精簡的code了。
但是他這邊又補上了一句，對於jQuery code的評價是：『Quick and Dirty』

這個畫面也是jQuery的官方網站首頁上copy下來的，
它有提到他們的library支援IE6.0以上還有FireFox1.5以上甚至還有其他的browser。
所以對我們而言他已經能夠幫助我們解決跨browser的問題了。
那從這些簡單的jQuery介紹，
除了學習成本以外，它似乎都已經滿足我們剛剛提出對於Framework的期望了。
那這些都只是紙上談兵，那接下來我們可以稍微看一下他的語法，來了解一下他的威力到底在哪邊…

jQuery的Selector它是一個很強大的功能，
它可以幫助我們很快速的去尋找到頁面上任何我們想要的物件
另外他可以搭配Xpath來找尋物件，所以對於Xpath和CSS越熟的人，來使用jQuery應該越能夠得心應手。

1.取代過去的dcoument.getElementById
2.取代過去的document.getElementByTagName
兩個的差別在於一個在Id前面有#字號，一個沒有…

後面這3個語法如果用一般的javascript語法來寫的話，我們可能都需要用一個for迴圈去跑它，
然後再個別去判斷它的屬性，再來指定他的相關Value

由這幾個簡單的語法來看，會發覺，光是打字就可以省下蠻多的了，程式碼也會比較簡潔一些。

那接下來我們就先來看一個簡單的範例，來讓大家體驗一下jQuery的威力
現在有一個需求，就是將所有a tag的連結物件，且id為e_links的控制項，當點選連結時，先詢問他是否執行。
那以一般的JS語法，大致上是這樣寫的

那我們現在利用jQuery的語法來改寫一下，你發現它的程式碼是不是簡潔多了？

我們現在撰寫JavaScript有很大的一部分是用來撰寫AJAX的相關處理的，
所以jQuery對於AJAX的相關支援也是很重要的，所以我們來看一下它提供了我們甚麼東西
1. 這個語法是將某一個HTML內容，load到某一個物件內。
2. 他是沒有回傳值給client端的
第一個參數是要執行的程式網址或是名稱
第二個參數是傳入要傳給該隻程式的參數，上面必須要指定型態，並且利用hash的方式來傳送
第三個參數是執行後要執行的javascript的function。
第二個參數跟第三個參數都是可以不用傳的。

除了基本的AJAX處理之外，也有提供比較詳細處理的AJAX Method
在這邊我們可以指定AJAX的time out時間，
傳輸的格式、
失敗要執行的function
成功時要執行的function

Post那個函數在我們的專案中，用的還蠻多的，像是利用它來做多國語言版的alert method
因為多國語言的訊息檔是在Server端，所以我們是利用AJAX的方法到Server端去取得Message後alert
像這樣的功能應用，如果用過去的XML HTTP Request來做的話，可能需要程式碼就會多很多。

另外jQuery也可以幫我們的HTML添加一些動畫效果，
例如這個範例是影藏某一個控制項，我們可以在他後面加入屬性去控制的隱藏和顯示的速度
做出來的效果就好像powerpoint的動畫一樣，會有漸層的效果。
隱藏有，當然也有顯示的了。

其實jQuery的UI還做了很多其他的功能，他都是額外採用plugin的方式附加進來的
這個網站是jQuery UI的官方網站，因為我們專案中目前還沒有大量使用它，那就不多做詳細介紹了。

對於jQuery的使用，我們用的還蠻測底的，
連一些自己包的Control為了要讓他可以跨Browser，也用了它，
所以我們發現其他專案要來Reuse我們的東西時，也需要一併include jQuery
目前遇到的專案看起來還好，因為它們原本沒有用任何的javascript framework
所以只要把我們用的jQuery include進來就可了，
但是如果別的專案已經有使用了其他的framework的話，可能就需要做一些調整了才能使用了。

訂閱：文章 (Atom)

Mr. NFrankenstein