Ubuntu 和 Ruby on Rails 中文筆記: 1月 2009

[JavaScript] replace函數：替換文件中的字串

var s=s.replace('aa','AA');

乍看下程式碼似乎沒什麼問題，不過去查了一下JavaScript中replace的用法，其實第一個參數應該是regx的方式

因此，如果改為

var s=s.replace(/\你要置換的字串/g,'AA');

這樣就可以正確的把所有符合的字串置換完成了!!

[JavaScript] innerHtml 的用法和注意事項

innerTEXT與innerHTML的區別：

跨瀏覽器的設置innerHTML方法

2006年11月06日星期一 09:37 A.M.

From:http://www.ajaxwing.com/index.php?c=DOM

Author:kenxu

很多人都可能遇到過這種情況：設置 innerHTML 的時候，插入的 HTML 代碼中包含腳本，但這些腳本卻不生效，或者在 IE
上生效在其它瀏覽器上就不生效。原因很簡單：不同瀏覽器對插入 innerHTML 中的腳本有不同的處理方法。經過實踐，歸納如下：

對於IE，首先 script 標籤必須帶 defer 屬性，其次在插入時刻，innerHTML 的所屬節點必須在 DOM 樹中；對於
Firefox 和 Opera，在插入時刻，innerHTML 的所屬節點不可以在 DOM 樹中。

根據上面結論，給出通用的設置 innerHTML 方法：

/*

* 描述：跨瀏覽器的設置 innerHTML 方法

* 允許插入的 HTML 代碼中包含 script 和 style

* 作者：kenxu <ken@ajaxwing.com>

* 日期：2006-03-23

* 參數：

* el: 合法的 DOM 樹中的節點

* htmlCode: 合法的 HTML 代碼

* 經測試的瀏覽器：ie5+, firefox1.5+, opera8.5+

*/

var setInnerHTML = function (el, htmlCode) {

var ua = navigator.userAgent.toLowerCase();

if (ua.indexOf('msie') >= 0 &&
ua.indexOf('opera') < 0) {

htmlCode = '<div style="display:none">for
IE</div>' + htmlCode;

htmlCode =
htmlCode.replace(/<script([^>]*)>/gi,

'<script$1 defer="true">');

el.innerHTML = htmlCode;

el.removeChild(el.firstChild);

}

else {

var el_next = el.nextSibling;

var el_parent = el.parentNode;

el_parent.removeChild(el);

el.innerHTML = htmlCode;

if (el_next) {

el_parent.insertBefore(el, el_next)

} else {

el_parent.appendChild(el);

}

}

}

還有某些情況，我們事先不清楚要插入到 innerHTML 的 HTML 代碼包含什麼，如果包含 document.write
語句，那麼就會破壞整個頁面。對於這種情況，可以通過重新定義 document.write 來避免。代碼如下：

/*

* 描述：通過重定義 document.write 函數，避免在使用 setInnerHTML 時，

* 插入的 HTML 代碼中包含 document.write ，導致原頁面受到破壞的情況。

*/

document.write = function() {

var body = document.getElementsByTagName('body')[0];

for (var i = 0; i < arguments.length; i++) {

argument = arguments[i];

if (typeof argument == 'string') {

var el = body.appendChild(document.createElement('div'));

setInnerHTML(el, argument)

}

}

}

在這篇文章編寫之前，已經有一個比較完善的解決方法《讓插入到 innerHTML 中的 script
跑起來》。比較起來，《讓》給出的方法考慮得更細緻，但處理起來比較繁瑣，效率不高。而這裡給出的方法則更簡單，並且充分利用了瀏覽器的特性。

小心使用innerHTML

最近在做AJAX,想用javascript實現DataList功能,遇到一個棘手的問題,由於要生成的HTML很長,所以我寫成如下的形式:

list.innerHTML="<table><tr>";

list.innerHTML+="<td>"

......

但是這樣生成的innerHTML始終不對,研究了半天,原來是innerHTML搞得鬼.innerHTML自帶了語法檢查功能,他會自動把不完整的
HTML代碼補充完整.運行如下的一個測試代碼就可以發現了.

document.getElementById("AlbumList").innerHTML="<table><tr>";

alert(document.getElementById("AlbumList").innerHTML);

他會自動把我的代碼裡面添加了<tbody>和</tr><
/table>等標記.神奇!!!

那麼不讓他自動填寫的一個辦法就是用一個中間變量:

var html="<table><tr>";

html+="<td>";

......

list.innerHTML=html;

就這樣就可以解決問題了.

innerHTMl和確認提示的使用

今天開發中涉及到對一個層的信息控制，就是控制一個層中顯示什麼信息，查找資料才知道使用innerHTML屬性來控制層的值，這個innerHTML跟
表單裡面的value屬性有點類似，能夠控制層的顯示值。

比如說我一個div層裡本來沒有值，我處罰一個事件後要顯示值，那麼就能夠使用innerHTML屬性了，其實innerHTML屬性除了能控制層以外，
還能控制窗口內容的所有元素，但是我沒有測試過。

（1）對div標籤的控制

div標籤跟span標籤是不一樣的，div是一個層的塊，span是一行，我們下面看演示就知道區別了。先來看一段控制div的代碼。

<script language="javascript">

function chageDiv(number)

{

if (number == 1) {

document.getElementById("div1").innerHTML = "值為1";

}

if (number == 2) {

document.getElementById("div1").innerHTML = "值為2";

}

}

</script>

DIV塊測試：<div id="div1">默認值</div>

<a href="#" onClick="chageDiv(1)">改變值為1</a>

<a href="#" onClick="chageDiv(2)">改變值為2</a>

運行的時候，點擊「改變值為1」那麼「默認值」這個內容將會被改變為「值為1」，但是注意其中的界面，就是會發現「DIV測試：」和「默認值」是兩行顯示
的，因為DIV是按塊來顯示的。

（2）對span的控制

與div類似，但是它是按照行來顯示的，看下面的代碼：

function chageSpan(number)

{

if (number == 1) {

document.getElementById("span1").innerHTML = "值為1";

}

if (number == 2) {

document.getElementById("span1").innerHTML = "值為2";

}

}

</script>

Span行測試：

<span
id="span1">默認值</span><br>

<a href="#" onClick="chageSpan(1)">改變值為1</a>

<a href="#" onClick="chageSpan(2)">改變值為2</a>

當點擊「改變值為1」的時候，「默認值」將變為「值為1」，但是「Span行測試」和「默認值」是在同一行顯示的，跟DIV不一樣。

另外一個值得注意的就是，不管是div還是span，後面的名字都是以為id來定義的，不是象表單一樣是使用name來定義的。

（3）confirm確認提示框的製作

當我們要執行一個危險操作的時候，比如刪除某個內容等，那麼就應該給用戶相應的提示來用戶不容易犯錯誤。一般提示都是使用confirm()函數來處理
的，給它提交一個參數作為顯示的信息提示，那麼訪問的時候將彈出對話框，如果點擊了「確定」那麼將改函數返回true，點擊了「取消」將放回
false，我們針對這個特點來使用兩種方法來控制用戶是否執行某個操作。

看代碼：

<script language="javascript">

function accessNeteasy()

{

if(confirm('你真的要訪問網易新聞 ?')) {

location='http://calendar.eyou.eyou';

}

}

function accessSina()

{

if (confirm('你確定要訪問新浪新聞 ?')) {

return true;

} else {

return false;

}

}

</script>

訪問方式一：

<a href="#"
onClick="accessNeteasy()">網易新聞</a><br&
gt;

訪問方式二：

<a href="http://news.sina.com.cn" onClick="return
accessSina()">新浪新聞</a>

我們這裡建立了兩個函數，一個accessNeteay，一個accessSina，就是訪問網易和新浪，我們使用不同的方法，第一種就是當點了鏈接以
後，判斷如果是true的話，那麼就location到指定鏈接，這種方法比較不具有通用型，只能針對單個的鏈接。第二種方法是使用返回值的形式，當確定
要訪問的時候返回true，不確定的時候返回false，那麼這個可以針對任何鏈接來做，寫成一個通用的信息提示，方便頁面中的調用。

以上代碼都經過測試通過，可以自己再這個基礎上進行擴展，寫出自己需要的JavaScript代碼。

[JavaScript]switch-case 的用法

摘錄自switch-case 邏輯判斷

switch(某段運算){
case 情況一:
//執行情況一要做的事情
break; //跳離
case 情況二:
//執行情況二要做的事情
break; //跳離
default:
//執行非以上情況
}

以下是範例：

function case1(num){
 switch(num){
  case 1:
   document.writeln("show 1!!");
   break;
  case 2:
   document.writeln("show 2!!");
   break;
  case 3:
   document.writeln("show 3!!");
   break;
  default:
   document.writeln("show others!!");
   break;
 }
}

function case2(num){
 switch(num){
  case 1:
   document.writeln("show 1!!");
   //沒有break，所以會繼續執行case 2
  case 2:
   document.writeln("show 2!!");
   break;
  case 3:
   document.writeln("show 3!!");
   //沒有break，所以會繼續執行case 4
  case 4:
   document.writeln("show 4!!");
   break;
  default:
   document.writeln("show others!!");
   break;
 }
}

function case3(num){
 switch(num){
  case 1:
  case 2:
   //相當於if(num==1 || num==2)
   document.writeln("show 1 or 2!!");
   break;
  case 3:
  case 4:
   //相當於if(num==3 || num==4)
   document.writeln("show 3 or 4!!");
   break;
  default:
   //相當於else
   document.writeln("show others!!");
   break;
 }
}

function case4(num){
 switch(f(num)){
  case 1:
  case 2:
   //相當於if(num==1 || num==2)
   document.writeln("show 1 or 2!!");
   break;
  case 3:
  case 4:
   //相當於if(num==3 || num==4)
   document.writeln("show 3 or 4!!");
   break;
  default:
   //相當於else
   document.writeln("show others!!");
   break;
 }
}

function f(num){
 return num;
}

function case5(num){
 switch(num<=2){
  case true:
   document.writeln("num <= 2");
   break;
  case false:
   document.writeln("num > 2");
   break;
 }
}

情境1：基本型，num 為多少，就會跳到指定的 case 去，執行完特定動作後，會因為遇到 break 而跳離整個 switch 區段，當 num 為 4 的時候，找不到對應的 case 時，就會到 default 去。

情境2：若某些 case 沒有下 break 跳離的話，則會繼續往下執行下一個 case，譬如若 num 為 1 的時候，會跳到 case 1，執行完後因為沒有 break，所以會繼續執行 case 2，然後才因遇到 break 而跳出。

情境3：與情境2狀況一樣，當判斷 num 在兩種不同的 case 都要執行相同的工作時，可以用此方法。

情境4：證明 switch 不是只能單純用來判斷單一變數，也可以是用來針對某個函式的執行結果做判斷。

情境5：證明 switch 亦可針對一段陳述式做判斷。

[JavaScript] sort函數：排列數字

Javascript數組 sort方法的分析

javascript 中 Array.sort()方法是用來對數組項進行排序的，默認情況下是進行升序排列，實例代碼如下：

var arrA = [6,2,4,3,5,1];
arrA.sort();
document.writeln(arrA);

//結果是：1,2,3,4,5,6
sort() 方法可以接受一個方法為參數，這個方法有兩個參數。分別代表每次排序比較時的兩個數組項。sort()排序時每次比較兩個數組項都回執行這個參數，並把兩個比較的數組項作為參數傳遞給這個函數。當函數返回值為1的時候就交換兩個數組項的順序，否則就不交換。

實例如下：

var arrA = [6,2,4,3,5,1];
/**//*arrA.sort();
document.writeln(arrA);
*/
function desc(x,y)
...{
if (x > y)
return -1;
if (x < y)
return 1;
}
function asc(x,y)
...{
if (x > y)
return 1;
if (x < y)
return -1;
}
arrA.sort(desc); // sort by desc
document.writeln(arrA);
document.writeln("
");
arrA.sort(asc); //sort by asc
document.writeln(arrA);

//輸出結果：
6,5,4,3,2,1
1,2,3,4,5,6
另外，可以直接把一個無名函數直接放到sort()方法的調用中。如下的例子是將奇數排在前面，偶數排在後面，例子如下：

var arrA = [6,2,4,3,5,1];
arrA.sort( function(x, y) ...{
if (x % 2 ==0)
return 1;
if (x % 2 !=0)
return -1;
}
);
document.writeln(arrA);

//輸出：1,5,3,4,6,2

[JAVA] Integer.valueof 和 Integer.parseInt 的區別

他們有著本質上的區別。

Integer.valueof(String s)是將一個數字的字串包裝成物件。
它是將一個實際值為數字的變量先轉成string型，
再將它轉成Integer型的包裝類別(相當于轉成了int的類別)這樣轉完的物件就具有方法和屬性了。

而Integer.parseInt(String s)只是將是數字的字串轉成數字，
注意，他返回的是int型變量，不具備方法和屬性。

至於程式返回值為甚麼都可以用int來接收呢？
例如：
int aaa=Integer.parseInt(ccc);
int bbb=Integer.valueOf(ccc);

這是因為 Integer 和 int 可以自動轉換。
Integer i = 5; int k= i; //像這樣表示是沒有編譯錯誤的

另外要注意的是
new Integer.valueof().intValue();
返回的也是一个int的值。

而
static Integer valueOf(int i)
返回的是一個表示指定的 int 值的 Integer 物件。
static Integer valueOf(String s)
返回的是保持指定的 String 的值的 Integer 物件。

參考：
http://zhidao.baidu.com/question/22561536.html
http://www.itkhl.com/Article/xtyh/itkhl-425.html
http://zhidao.baidu.com/question/71207432.html?fr=qrl&fr2=query

[JavaScript] setInterval 和 setTimeout 的區別

JavaScript 當中有兩個函式（setInterval 和 setTimeout）的作用很像，
查資料之後才知道他們的區別，以下是筆記。

setInterval / setTimeout

setInterval 裡設定的程式只會被重複觸發，直到執行了 clearInterval 為止

setTimeout 裡設定的程式只會被觸發一次

setInterval 和 setTimeout 都是利用時間去觸發某個動作的執行；並且下一行程式不會因為時間設定的長短而被延遲或影響；也就是說當 setInterval 和 setTimeout 那行程式被執行的時候，那個觸發的動作就被交給 window 物件去處理了，其他的程式會被繼續執行，不會受到影響

setInterval 和 setTimeout 在執行時都會產生 timerID 以便在某些狀況下需要用 clearInterval 和 clearTimeout 去取消那些觸發的動作

Ubuntu 和 Ruby on Rails 中文筆記

2009年1月29日星期四

[JavaScript] replace函數：替換文件中的字串

[JavaScript] innerHtml 的用法和注意事項

[JavaScript]switch-case 的用法

[JavaScript] sort函數：排列數字

[JAVA] Integer.valueof 和 Integer.parseInt 的區別

[JavaScript] setInterval 和 setTimeout 的區別

網誌存檔

搜尋此網誌

標籤

友站連結

Ubuntu 和 Ruby on Rails 中文筆記

2009年1月29日 星期四

[JavaScript] replace函數：替換文件中的字串

[JavaScript] innerHtml 的用法和注意事項

[JavaScript]switch-case 的用法

[JavaScript] sort函數：排列數字

[JAVA] Integer.valueof 和 Integer.parseInt 的區別

[JavaScript] setInterval 和 setTimeout 的區別

網誌存檔

搜尋此網誌

標籤

友站連結

2009年1月29日星期四