這篇筆記紀錄：
1.Timer用法
2.使用JavaScript作網頁元件CSS調整修改
3.取得外部CSS資訊的方法
4.Cookie範例
5.分離JavaScript與HTML程式碼
6.快速取得物件的小技巧
7.離開頁面的確認視窗寫法
1.Timer用法
計時器只能做到延遲時間，並非是依照真實時間來觸發
單次計時器的書寫方式：setTimeout("String型別的JavaScript Code", 6000);
單次計時器示範： setTimeout("document.getElementById('a').src='b.jpg';", 5*1000);
間歇計時器則使用 setIntervel()函式，引入的參數則與單次計時器相同
間歇計時器示範：var timerID = setIntervel(...);
儲存ID的資訊的作用是要使用下一個介紹的函式 clearInterval()
clearInterval(timerID)能清除間歇計時器，停止它的作用
location物件的reload() 可以重新讀取頁面，使用範例：location.reload();
結合timer可以做到定時重讀頁面等效果
2.使用JavaScript作網頁元件CSS調整修改
JavaScript能以document物件取得用戶端的視窗寬度，並進而調整顯示物件的大小
用戶端視窗是指瀏覽器視窗裡呈現網頁的部分，並不包含瀏覽器工具列等的部分
用戶端視窗高度= document.body.clientHeight 用戶端視窗寬度= document.body.clientWidth
其他常用的查詢需要去查API
取得圖片等元件的高度及寬度的取法如： var width = document.getElementById('a').width;
而網頁裡的所有元件都有一個style物件，能借助它達到調整CSS的顯示效果
如： document.getElementById('a').style.left = "300px";
注意一點，由 style 取得的資料有些是帶有px之類單位的字串
處理方式如：var picPos = eval(document.getElementById('a').style.left.replace("px", ""));
這樣一來會先以replace()把 px 移除，將著用eval()函式將之轉換成數值
3.取得外部CSS資訊的方法
在IE中要取得外部CSS的資訊必須使用特有的 currentStyle
其他瀏覽器則必須使用 defaultView 物件的 getComputedStyle()
範例如下：
var item = document.getElementById('a');
var iStyle = item.currentStyle || document.defaultView.getComputedStyle(item, null);
document.write("字體大小=" + iStyle.fontSize);
4.Cookie範例
w3cschool的Cookie的示範程式碼：
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start = document.cookie.indexOf(c_name + "=");
if ( c_start != -1 )
{
c_start = c_start + c_name.length+1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
function setCookie(c_name, value, expiredays)
{
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie=c_name + "=" + escape(value) +
((expiredays == null) ? "" : "; expires = " + exdate.toUTCString() );
}
function checkCookie()
{
username = getCookie('username');
if (username != null && username != "")
{
alert('Welcome again ' + username + '!');
}
else
{
username = prompt('Please enter your name:',"");
if (username != null && username != "")
{
setCookie('username', username, 365);
}
}
}
清除cookie的方法是將他的值改成空值，並將有效日期改成-1
5.分離JavaScript與HTML程式碼
透過HTML屬性聯繫事件處理函式(如：<button... onclick="script();" />)的寫法有缺點
HTML與JavaScript的混雜不利於維護
在JavaScript碼中指定函式的參考就可以避免動到HTML碼
如：window.onload = init;
上式效果等同於<body onload="init();">
onload是window物件的屬性，並被指派了 init() 函式的參考
如果需要將參數傳入函式中，則如下面範例改寫：
document.getElementById("test").onclick = function(evt){
testFunc("hi");
}
外層的 function literal包裹住對 testFunc() 的呼叫，並允許將參數傳入函式中
function literal 本身則傳入了事件物件做參數，若需要事件的資料可以靠它取得
假如不需要事件物件的話，參數evt會被忽略
function literal 會以函式參考被指派到onclick事件
假使JavaScript碼會取用網頁元件，必須注意在網頁的onload事件接收完資料後才能指定元件
window.onload 能在這種情況下完成要求，事件處理器在這裡接上應用程式：
window.onload = function(){
document.getElementById("test").onclick = function(evt){ testFunc("hi"); }
..... //程式碼配置
};
順便一提的是如果網頁文件載入的時間比較長
在完成之前可能會讓使用者看到未經處理的內容
要避免這種情形可以先將處理前的內容隱藏起來，處理完畢後再顯示出來
另外，因DOM的載入速度一般來說會比較慢
window.onload這樣綁定DOM物件的程式碼放在<head>裡可能不會有作用
這類型建議放在body標籤後才可能會有效
6.快速取得物件的小技巧
經常使用的 document.getElementById() method 可以寫成快捷函式來方便使用：
function $(id){
return document.getElementById(id);
}
7.離開頁面的確認視窗寫法
//using JQuery
$(window).bind("beforeunload",function(){
return ("您確定離開?");
});
沒有留言:
張貼留言