client side JavaScript

• Window物件是client-side功能與API的主要進入點，代表瀏覽器window或frame。Window物件全部都是全域物件。

// +----------------------------------------
// |             Location物件                
// |          將目前頁面導到新的url
// +----------------------------------------
window.location = "https://www.google.com.tw/" // Location物件

• Window物件有個window特性，永遠都會指向自己。
• Window物件document特性，指向Document物件。用來顯示於視窗的內容。getElementById()就是其中重要的方法之一。

var span = document.getElementById('span-id'); // span 取得Element物件
// 可以利用Element物件使用一些方法
span.style.backgroundColor = "red"; // 設定背景顏色
span.className = "span-class"; // 設定class
...

• 事件處理器: 名稱都會以on開頭

sapn.onClick() = function(){...} // 當span被點擊時，觸發function

// +----------------------------------------
// |               onLoad                   
// | 會在視窗內的文件內容穩定後，可供操作時觸發  
// +----------------------------------------
window.onload = function() {
  console.log("window loaded");
};

• 使用外部script引用方式: <script src="xxx.js"></script>
• script類型: 預設為type="text/javascript"，可略。

<script type="text/javascript">
    // +--------------------------------------
    // |         javascript 程式碼            
    // +--------------------------------------
</script>

• 在url使用Javascript(在html裡需要填入url的地方(src/href/..)填入javascript:...)
  這種做法會將原html文件清空然後依照回傳文件重新顯示

// +------------------------------------
// | 下面程式碼回傳值僅有時間，並無html文件 
// +------------------------------------
<a href="javascript:new Date().toString()">click</a>


// +------------------------------------
// |    下面程式碼執行show Alert          
// +------------------------------------
<a href="javascript:alert(new Date().toString())">click</a>