scroll images

function scrollImages() {
  var coverBarDiv = document.getElementById("coverBar");
  var images = coverBarDiv.getElementsByTagName("img");
  for (var i = 0; i < images.length; i++) {
    var left = images[i].style.left.substr(0, images[i].style.left.length - 2);
    if (left <=  -86) {
      left = 532;
    }
    images[i].style.left = (left - 1) + "px";
  }
}

ajax request object

If you are making two independent ajax request, you have to create two independent ajax request object.

function checkA(){
     var request = createRequest();
}

function checkB(){
     var request = createRequest();
}

You might think you have created two independent request object. In fact, you only create one request object. This might make your system prone to error.

the better way

function checkA(){
     var requestForA = createRequest();
}

function checkB(){
     var requestForB = createRequest();
}

By removing "var", we can make the request object become a global variable and make sure each request only coping with one ajax request.

javascript trim

//trim both side of space
function trim(str){
return str.replace(/(^\s*)|(\s*$)/g, "");
}
//trim left side of space
function ltrim(str){
return str.replace(/(^\s*)/g,"");
}
//trim right side of space
function rtrim(str){
return str.replace(/(\s*$)/g,"");
}
function trimEnter(str){
return str.replace(/\n\r/gi,"");
}

cookie

function writeCookie(name, value, days) {
  // By default, there is no expiration so the cookie is temporary
  var expires = "";

  // Specifying a number of days makes the cookie persistent
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toGMTString();
  }

  // Set the cookie to the name, value, and expiration date
  document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
  // Find the specified cookie and return its value
  var searchName = name + "=";
  var cookies = document.cookie.split(';');
  for(var i=0; i < cookies.length; i++) {
    var c = cookies[i];
    while (c.charAt(0) == ' ')
      c = c.substring(1, c.length);
    if (c.indexOf(searchName) == 0)
      return c.substring(searchName.length, c.length);
  }
  return null;
}

function eraseCookie(name) {
  // Erase the specified cookie
  writeCookie(name, "", -1);
}

=======================
write cookie
document.cookie = "specifiedName" + "=" + "; expires =" + new Date().toGMTString() + "; path=/";

document.cookie =
  'ppkcookie1=testcookie; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/'

javascript

NaN -> not a number exception
ex. subtotal = (0 +12) * ?(uninitialized number) = NaN
isNaN(NumOfItem) -> whether the variable is a number?

subtotal.toFixed(2) -> 四捨五入至小數第二位
donutString.indexOf("dozen") != -1 -> whether "dozen" appears in the string

document.body.clientHeight/clientWidth
document.getElementById("rockImg").style.height="100px";
document.getElementById("rockImg").src= smileRock.png
圖將根據新設定的高度自行縮放,並維持比例

要補捉<span>test</span>或<div>test</div>裡的字
    alert(document.getElementById("test").firstChild.nodeValue);  ->test
    alert(document.getElementById("test").value); ->undefine (used to capture the value of text fields)
A safety way to change the text under a node

1. remove all child nodes
2. create a new node
3. append the new node to its parent

ex. var node = document.getElementById("test");
     while(test.firstChild){
        node.removeChild(node.firstChild);
     }
     node.appendChild(document.createTextNode("new content"));

refresh(); ->refresh web page
setTimout ("alert('wake up');", 1000); 延遲一秒
var accept = confirm("Do you really want to delete?"); -> return true/false

if (navigator.cookieEnabled)

onblur -> The onblur event occurs when an object loses focus.  <-> onfocus
<input type="text" onblur="validateNonEmpty(this); upperCase();"></input>
function validateNonEmpty(inputField){
   if( inputField.value.length == 0)
        alert('please enter a value');
}
===using alert to inform user of validation error is a bad practice. better way===
<input type="text" onblur="validateNonEmpty(this,document.getElementById('phone_help'));"></input>
<span id="phone_help" class="help"></span>
function validateNonEmpty(inputField, helpText){
   if( inputField.value.length == 0){
        if(helpText != null){
            helpText.innerHTML = "please enter a value";
        }
        return false;
    } else{
        if(helpText != null){
            helpText.innerHTML = "";
        }
        return true;
    }
}
=============================================================

onchange -> The onchange event occurs when an object loses focus and the content of a field changes.
                  If there isn't any change, the onchange event will not be trigered.
                  Therefore, it is better to use onblur for validation.
<input type="text" onchange="calculateTotalPrice()"></input>

onresize -> The onresize event occurs when a window or frame is resized.

function myFunction(){
    var username = prompt('what is your name?');
    if(username){
        alert('hi '+username);
    }
}


css
========
visibility:hidden/visible
display:none/block

comment
// or /* /*/
id attribute -> unique within a web page
name attribute -> unique within a form
function showIt(thForm){
    alert(theForm["zipcode"].value);
}
<input   type="text"   value="第一個得到焦點"   tabIndex="1">  
<input   type="text"   value="第二個得到焦點"   tabIndex="2">  

textField.focus();
textField.select();

escape character -> \


pitfall

var num1 = document.getElementById("one").value; ->value = 3
var num2 = document.getElementById("two").value; ->value = 4
var total = num1 + num2 = ?? ->34
why? The default data type is String.
Therefore you should transform the datatype from String to Int or Float.
parseInt/parseFloat
var total = parseInt(num1)+parseInt(num2) = 7

Stand-up meeting

看到一個很白爛的leader,瘋狂開會,讓我想到stand-up meeting
大致上內容如下,有機會的話,小心不要變成這個白爛的人!
「開會是個溝通必要但又花時間討人厭的事情，在 Agile 方法論裡面提出了一種叫 Stand-up meeting 的每天開會方式，正如其名建議的：請站著開會，這樣才會提醒大家儘早開完。每個人至多兩分鍾報告三件事情 1.距離上次開會，我做了什麼? 2. 到下次開會，我打算做什麼 3. 我碰到的困難。如果有需要討論更細節特定的東西，請再約有關係的人在開完 stand-up 各自帶開即可。一般來說合理的 stand-up meeting 時間約10到15分鍾，至多絕不超過 30 分鍾。另外就是儘量不要等人，時間到了就開始吧。

Stand-up meeting 有幾個好處：1. 繼續專心每天的進度 2. 如果 developer 碰到任何問題，可以有機會發出聲音尋求幫助，加速事情解決 3. 幫助團隊成員瞭解其他人在做什麼事情。」 quoted from ihower's blog

Jconsole

Using JConsole to Monitor Applications