Ubuntu 和 Ruby on Rails 中文筆記: JavaScript 程式示範

顯示具有 JavaScript 程式示範 標籤的文章。顯示所有文章

2009年7月15日星期三

用JavaScript發出Post Request

Javascript Post Request like a Form Submit - Stack Overflow


function post_to_url(path, params, method) {
    method = method || "post"; // Set method to post by default, if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.setAttribute("value", params[key]);

        form.appendChild(hiddenField);
    }

    document.body.appendChild(form);    // Not entirely sure if this is necessary
    form.submit();
}

post_to_url('http://example.com/', {'q':'a'});

2009年6月30日星期二

在文章游標處插入文字

[JavaScript]在光标处插入文字

<HTML>

<HEAD>

<SCRIPT>

function storeCaret(textEl) {

if (textEl.createTextRange)

textEl.caretPos = document.selection.createRange().duplicate();

}

function insertAtCaret (textEl, text) {

if (textEl.createTextRange && textEl.caretPos) {

var caretPos = textEl.caretPos;

caretPos.text =caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?text + ' ' : text;

}

else

textEl.value = text;

}

</SCRIPT>

</HEAD>

<BODY>

<FORM NAME="cForm">

<TEXTAREA NAME="aTextArea" ROWS="10" COLS="60" WRAP="soft" ONSELECT="storeCaret(this);" ONCLICK="storeCaret(this);" ONKEYUP="storeCaret(this);"> 这是例子，你可以在这里添加文字、插入文字。 </TEXTAREA>

<BR>

<INPUT TYPE="text" NAME="aText" SIZE="80" VALUE="我要在光标处插入这些文字"><BR>

<INPUT TYPE="button" VALUE="我要在光标处插入上面文本框里输入的文字！" ONCLICK="insertAtCaret(this.form.aTextArea, this.form.aText.value);">

</FORM>

</BODY>

</HTML>

2009年6月26日星期五

防止誤刷新頁面

防止誤刷新頁面

window.onbeforeunload = function(){
return "您正要離開本頁面，您所做的所有的修改都會丟失，確定麼？";
};

正常提交時，還得屏掉。

frm.onsubmit = function(){

window.onbeforeunload = null;

}

2009年6月24日星期三

Javascript的延遲執行

Delaying Javascript Event Execution
If you're looking to execute javascript code whenever someone finishes (or stops temporary) scrolling, moving the mouse, or resizing the page, you may find the following code segment useful.
作者舉了幾個事件onScroll, onMouseMove, onResize，這些事件會被頻繁觸發。出於執行性能考慮，有些回調最好安排在事件結束之後，這時候就可以通過延時執行Javascript的方法實現，模擬onScrollEnd, onMouseMoveEnd和onResizeEnd。

 var onFooEndFunc = function() {
      var delay = 50; /* milliseconds - vary as desired */
      var executionTimer;
      return function() {
          if (executionTimer) {
              clearTimeout(executionTimer);
          }
          executionTimer = setTimeout(function() {
              // YOUR CODE HERE
          }, delay);
      };
 }();

2009年6月23日星期二

JavaScript 自訂 trim() 函式

<!--

//made by yaosansi 2005-12-02

//For more visit http://www.yaosansi.com

// Trim() , Ltrim() , RTrim()

String.prototype.Trim = function()

return this.replace(/(^\s*)|(\s*$)/g, "");

String.prototype.LTrim = function()

return this.replace(/(^\s*)/g, "");

String.prototype.RTrim = function()

return this.replace(/(\s*$)/g, "");

//-->

</SCRIPT>

2009年6月15日星期一

計算或限制計算字(元)數

計算字(元)數

a(半形)就是1個字元，而ａ(全形)卻是2個字元，若資料庫中欄位是設成30個字元的話，用來存放1個字元的字可以放30個，但是2個字元只能存放15個，那混合的話要怎麼計算呢？

首先要知道在ASCII中，0~255都是1個字元的字，255以後的都是2個字元，現在只要在count()函式中判斷輸入的字是共字元，而maxChr及nowChr則變成是最大幾字元及目前已輸入幾字元。

<script type="text/javascript">

</script>

2009年6月5日星期五

移除陣列中的特定元素

Remove array element in JavaScript: splice()

var aColors = new Array('red', 'yellow', 'green', 'tag');

aColors.splice(aColors.indexOf('tag'), 1);

Javascript取得被選中的字串

Javascript Get Selected Text.

var txt = '';
if (window.getSelection)
{
txt = window.getSelection();
}
else if (document.getSelection)
{
txt = document.getSelection();
}
else if (document.selection)
{
txt = document.selection.createRange().text;
}
else return;

2009年6月3日星期三

JavaScript arrays indexOf function of IE6/7

對，該死又萬惡的IE6/7不支援 indexOf 這個非常好用的函數。
Javascript in IE6 & IE7 DOESNT support Array.indexOf function！

所以，我們可以自己作一個
So we can create one by ourself

以下是範例
here is the Javascript code

------------------------------
Array.prototype.indexOf = function (word){
for(var i in this){//如果存在，返回index，否則返回-1
if(this[i] == word) return i;
}
return -1;
}
---------------------------------

說明：indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

JavaScript統計字串中內某字元或字串出現次數

帖子：什麼函數可以讓一個計算一個字符串內出現了幾次另一個字符

帖子的題目寫的已經很明白了，也就是統計一個字符串內指定字符的出現次數。例如cainiao中，a出現現了兩次。那麼應該有一個函數能夠正確地統計出類似的值。久仰正則表達式的大名（其實學過好幾次都忘了），記得正好可以解決這個問題。

看看cloudchen給出的使用正則表達式的代碼：


var str = "cloudchen";
var find = "c";
var reg = new RegExp(find,"g")
var c = str.match(reg);
alert(c?c.length:0)

var reg = new RegExp(find,"g")一句建立了一個正則表達式，也可以寫為：

var reg = /c/g;

c即要匹配的字符，其中g表示全局搜索。match則返回匹配的字符（串）。這樣也就獲得了字符串中指定字符出現的次數。這是一個很正規的做法。

split用來統計字符的出現次數

只能用太有才了來形容「我佛山人」，他給出了如下的代碼：


MsgBox UBound(Split("blueideablueideabbs","b"))

VBS的，但是用JS也一樣。重要的是這個思路，簡直是太簡單了！用字符串的split方法將其分為數組，數組的length-1就是字符的出現次數。代碼修改為JavaScript如下：


function test(){
var str = "www.cainiao8.com";
alert(str.split("c").length-1);
alert(str.split("w").length-1);
}

效果如下，首先顯示的是「c」字符的次數，然後是「w」字符的出現次數。

移除陣列中的重複元素

怎麼樣刪除數組中的重複元素？

為array添加了一個method:unique()，採用關聯結構的方式，效率很高。


var array1=new Array("a","c","b","b","a","c","c","c");



Array.prototype.unique = array_unique;



function array_unique(){

    var o = new Object();

    for (var i=0,j=0; i        if (typeof o[this[i]] == 'undefined'){

            o[this[i]] = j++;

        }

    }



    this.length = 0;

    

    for (var key in o) {

        this[o[key]] = key;

    }



    return this;

}



var d = new Date().getTime();

document.write(array1.unique());

d = new Date().getTime()-d;

document.write("
2000节点 新算法计耗时 "+ d +" 毫秒!");

2009年5月27日星期三

不設暫存就交換兩個變數的方法

實在太強了，從來沒想過交換兩個變數的內容，不設定額外的暫存變數就能達成！請看：

原理如下

a = a + b ;
b = a - b ;
a = a - b ;

2009年2月2日星期一

1~100的質數有幾個？分別是哪些？（2）

跟上一支程式一樣的表現，但程式是完全不同的寫法。
以下的範例，理論上可以檢測出無限多的質數。
用FF實測到100000，也只要20多秒。
<html>
<head>
<style type="text/css">
    .special {
     background-color:#FF0000;
      color:#FFFFFF;
      font-weight: bold ;
    }
</style>
</head>
<body>
<script>

function make_table(){
       var line= document.getElementById("line").value;
       varget_table_1 = document.getElementById("table_1");
       varhtml="<table align='center' border='1' width='80%'>";
       var p =new Array();
       p[0]=0;


       var n=0;
       for(j=0;j<line ;j++ )
       {
          html+="<tr>";

          for (i=0;i<10 ;i++ )
          {
              n=(j*10+i+1) //列出數字n，並設上ID
              html+="<td align='center'><span id='"+ n+"'>"+n+"</span></td>";

              p[n]=n;
          }
          html+="</tr>";
       }

       html+="</table>";
       get_table_1.innerHTML=html;


   document.getElementById(1).innerHTML="<divclass='special'>1</div>";

   var max=(line*10);//共line*10 個數
   var total_num=1;//已有的質數，1

   //從2開始，一直到最後
   for(i=2; i<=max; i++){
       for(k=i;k<=max;k++){
          //檢查k，k為0的話，K向後移動
          //直到k=0，k為質數，並且把i的起點改為k
          if(p[k]!=0){
              total_num++;
              document.getElementById(k).innerHTML="<divclass='special'>"+k+"</div>";
              i=k;
              break;
          }
       }
       //起點為k，把所有k的倍數都改為0，直到最後
       for(j=k;j<=max; j=j+k){
       p[j]=0;
       }

   }

   get_table_1.innerHTML+="<palign='center'>共 "+total_num+" 個質數</p>";
}
</script>

請問希望做 10 X <input type="text" id="line" />的質數表格？
<input type="button" value="開始製作" onClick="make_table()"/>
<br /><br />
<div id="table_1"></div>

</body>
</html>

1~100的質數有幾個？分別是哪些？（1）

以下的範例，理論上可以檢測出無限多的質數。
用FF實測到100000，也只要20多秒。

<html>
<head>
<style type="text/css">
    .special {
     background-color:#FF0000;
      color:#FFFFFF;
      font-weight: bold ;
    }
</style>
</head>
<body>
<script>

function make_table(){
       var line= document.getElementById("line").value;
       varget_table_1 = document.getElementById("table_1");
       varhtml="<table align='center' border='1' width='80%'>";

       var n=0;
       for(j=0;j<line ;j++ )
       {
          html+="<tr>";

          for (i=0;i<10 ;i++ )
          {
              n=(j*10+i+1) //列出數字n，並設上ID
              html+="<td align='center'><span id='"+ n+"'>"+n+"</span></td>";
          }
          html+="</tr>";
       }

       html+="</table>";
       get_table_1.innerHTML=html;


   document.getElementById(1).innerHTML="<divclass='special'>1</div>";
   document.getElementById(2).innerHTML="<divclass='special'>2</div>";
   document.getElementById(3).innerHTML="<divclass='special'>3</div>";

   var max=(line*10);//共line*10 個數
   var total_num=3;//已有的質數，1,2,3

   //跳過2的倍數不檢查 x=x+2
    for (x=5;x<=max ;x=x+2 )
   {

       var check= true;

       //方案一
       //一個數字的最大因數為其二分之一，y<=((x+(x%2))/2)
       //for(vary=2; y<=((x+(x%2))/2); y++)

       //方案二
       //因為整數平方根之後的因數，與後方重複，所以算到平方根取整數即可，比方案一更快
       //如100=10x10; 10是平衡點，之後25x4=4x25;
       //從三開始，跳過2的倍數，到x的平方根為止，可整除x的話，x不是質數，否則為質數
       for(vary=3; y<=Math.sqrt(x); y=y+2)
       {
          if (x%y == 0)
          {
              check = false;
              break;
          }
       }
       if(check)
       {
          total_num++;
          document.getElementById(x).innerHTML="<divclass='special'>"+x+"</div>";
       }

   }

   get_table_1.innerHTML+="<palign='center'>共 "+total_num+" 個質數</p>";
}
</script>

請問希望做 10 X <input type="text" id="line" />的質數表格？
<input type="button" value="開始製作" onClick="make_table()"/>
<br /><br />
<div id="table_1"></div>

</body>
</html>

訂閱：文章 (Atom)

Ubuntu 和 Ruby on Rails 中文筆記

2009年7月15日星期三

用JavaScript發出Post Request

2009年6月30日星期二

在文章游標處插入文字

2009年6月26日星期五

防止誤刷新頁面

2009年6月24日星期三

Javascript的延遲執行

2009年6月23日星期二

JavaScript 自訂 trim() 函式

2009年6月15日星期一

計算或限制計算字(元)數

2009年6月5日星期五

移除陣列中的特定元素

Javascript取得被選中的字串

2009年6月3日星期三

JavaScript arrays indexOf function of IE6/7

JavaScript統計字串中內某字元或字串出現次數

帖子：什麼函數可以讓一個計算一個字符串內出現了幾次另一個字符

split用來統計字符的出現次數

移除陣列中的重複元素

2009年5月27日星期三

不設暫存就交換兩個變數的方法

2009年2月2日星期一

1~100的質數有幾個？分別是哪些？（2）

1~100的質數有幾個？分別是哪些？（1）

網誌存檔

搜尋此網誌

標籤

友站連結

2009年7月15日 星期三

2009年6月30日 星期二

2009年6月26日 星期五

2009年6月24日 星期三

2009年6月23日 星期二

2009年6月15日 星期一

2009年6月5日 星期五

2009年6月3日 星期三

帖子：什麼函數可以讓一個計算一個字符串內出現了幾次另一個字符

split用來統計字符的出現次數

2009年5月27日 星期三

2009年2月2日 星期一

網誌存檔

搜尋此網誌

標籤

友站連結

2009年7月15日星期三

2009年6月30日星期二

2009年6月26日星期五

2009年6月24日星期三

2009年6月23日星期二

2009年6月15日星期一

2009年6月5日星期五

2009年6月3日星期三

2009年5月27日星期三

2009年2月2日星期一