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