卡西卡的小寶庫
寶庫寶庫寶庫
Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

[JavaScript]Closure

Posted In: . By 卡西卡

Closure:閉包, 閉鎖空間, 封絕

  • 看起來有點像是“巨集”的,可以產生(return)新的函式。
// 打折
function Discount(percent) {
    return function(price) { return price * percent / 100.0; }
}

var VIP_Pay      = Discount(60); // 貴賓6 折
var Member_Pay   = Discount(80); // 會員8 折
var Consumer_Pay = Discount(95); // 門市95折
var dvd_price = 500;
print("DVD定價 "+dvd_price);
print("貴賓特惠價 "+VIP_Pay(dvd_price));
print("會員優待價 "+Member_Pay(dvd_price));
print("門市售價 "+Consumer_Pay(dvd_price));
/* 結果
DVD定價 500
貴賓特惠價 300
會員優待價 400
門市售價 475
*/

 

var i = 0; 
var funcSet = []; 
function run_funcSet() { 
    for (var j=0, func=funcSet[j] ; func ; func=funcSet[++j] ) { 
        func(); 
    } // for

print('Pure anonymous function'); 
for ( i=0 ; i<3 ; i++ ) { 
    funcSet[i] = function() {print(i);} 
} // for
run_funcSet(); 
print('Closure'); 
for ( i=0 ; i<3 ; i++ ) { 
    funcSet[i] = (
        function(i) {
            return function(){print(i);} 
        }
// function
    )(i); 
} // for
run_funcSet(); 
/* 結果
Pure anonymous function
3
3
3
Closure
0
1
2
*/

 

參考資料:

 

目標:由playlist.mp3控制播放內容(可空或多首),播完10秒後重新載入本頁。

說明:

  1. playlist.mp3可以是真的mp3音樂檔,或是內容為多首mp3網址(一行一首)的文字檔。
  2. playlist.mp3的內容由server端控制,可依警報或時間或隨機產生內容。
[body]
<OBJECT id=player type=application/x-oleobject height=1 width=1
classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6' >
<PARAM NAME="URL" VALUE="playlist.mp3">
<PARAM NAME="rate" VALUE="1">
<PARAM NAME="playCount" VALUE="1">
<PARAM NAME="autoStart" VALUE="true">
<PARAM NAME="baseURL" VALUE="">
<PARAM NAME="volume" VALUE="100">
<PARAM NAME="mute" VALUE="0">
<PARAM NAME="uiMode" VALUE="none">
</OBJECT>
[/body]

接收PlayStateChange[msdn]事件

[script]
window.onload = function() {
  var player = document.getElementById('player');
  player.attachEvent("playstatechange",MediaPlayer_playStateChange);
}
function MediaPlayer_playStateChange(newState) {
  if ( newState == 10/*Ready*/ ) {
    // 10秒後重新載入
    window.setTimeout("document.location.reload();", 1000*10);
  } // if
}
[/script]

參考資料:

  • Windows Media Player Reference - W3Schools
  • Using the Windows Media Player Control with Firefox - MSDN
  • Player.playState - MSDN
    Value State Description
    0 Undefined Windows Media Player is in an undefined state.
    1 Stopped Playback of the current media item is stopped.
    2 Paused Playback of the current media item is paused. When a media item is paused, resuming playback begins from the same location.
    3 Playing The current media item is playing.
    4 ScanForward The current media item is fast forwarding.
    5 ScanReverse The current media item is fast rewinding.
    6 Buffering The current media item is getting additional data from the server.
    7 Waiting Connection is established, but the server is not sending data. Waiting for session to begin.
    8 MediaEnded Media item has completed playback.
    9 Transitioning Preparing new media item.
    10 Ready Ready to begin playing.
    11 Reconnecting Reconnecting to stream.
  • ASX Elements Reference - MSDN
    Advanced Stream Redirector (ASX) files are based on the Extensible Markup Language (XML) syntax, and are made up of various elements with their associated tags and attributes.

 

[JS]取消事件

Posted In: , . By 卡西卡

重點:

  • Firefox沒有window.event的物件,必須透過addEventListener才能把event當成參數傳入function中。

可共用:

IE可用:

Firefox可用:

[SCRIPT]
window.onload = function() {
  addEvent(document.getElementById("form1"), "submit", checkForm);
}

function checkForm(e) {
  var obj = null;
  if ( e.srcElement ) {
    obj = e.srcElement;
  } // if
  else if ( e.target ) {
    obj = e.target;
  } // else if

  // 取消submit
  cancelEvent(e);
}

function cancelEvent(e)
{
  if ( e && e.preventDefault ) {
    // Firefox
    e.preventDefault();
    e.stopPropagation();
  } // if
  else {
    // IE
    e.cancelBubble=true;
    e.returnValue = false;
  } // else
  return false;
}

function addEvent(obj, evType, fn)
{
  if (obj.addEventListener) {
    obj.addEventListener(evType, fn, false);
    return true;
  } // if
  else if (obj.attachEvent) {
    var r = obj.attachEvent("on"+evType, fn);
    return r;
  } // else if
  else {
    return false;
  } // else
}
[/SCRIPT]
另一種方法: [SCRIPT]
function fnTest(evt) {
  evt=evt?evt:(window.event?window.event:null);
  printObject(evt);
}
function printHTML(str) {
  var div = document.getElementById('divMsg');
  div.innerHTML = str;
}
function printObject(obj) {
  var s = "";
  for(att in obj) s += ("<li>"+att+"="+obj[att]+"</li>");
  printHTML("<ol>"+s+"</ol>");
}
[/SCRIPT]
[BODY]
<input type="button" id="btnSave" value="TEST" onclick="fnTest(event);"/>
<div id="divMsg">divMsg</div>
[/BODY]

參考資料:

 

可共用:

  • obj.innerHTML

IE可用:

  • outerHTML
  • innerText

Firefox可用:

  • textContent
[SCRIPT]
function print(str) {
  var div = document.getElementById('divMsg');
  if ( div.innerText ) {
    // IE
    div.innerText = str;
  } // if
  else {
    // FireFox
    div.textContent = str;
  } // else
}
function printHTML(str) {
  var div = document.getElementById('divMsg');
  div.innerHTML = str;
}
[/SCRIPT]

 

[JS]getAttribute

Posted In: , . By 卡西卡

可共用:

IE可用:

  • obj.msg, obj['msg']
[SCRIPT]
function fnTest() {
  var obj = document.getElementById('txtStr');
  var msg = obj.getAttribute("msg");
  print(obj.id+'='+obj.value+','+msg );
}
[/SCRIPT]

[BODY]
<form>
<input type="text" id="txtStr" value="123-Abc" msg="測試" />
<input type="button" id="btnSave" value="TEST" onclick="fnTest();"/>
<br />
<div id="divMsg">divMsg</div>
</form>
[/BODY]

 

主要是用WScript.Shell是讀寫Registry的值。
若發生「 Automation 伺服程式無法產生物件」的錯誤就要調整IE的安全性設定,將「起始不標示為安全的ActiveX控制項」設定為啟用或提示。

<script language="javascript"> // 列印 function fnPrint() { try { // 儲存原本頁首頁尾的設定,然後設定空白 var ret = saveAndClearSetting(); // 列印 window.print(); // 回存原本頁首頁尾的設定 if ( ret ) restoreSetting(); } catch (e) { alert("err="+e.description); } } var hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; var hkey_key_header = hkey_path+"header"; // 頁首 var hkey_key_footer = hkey_path+"footer"; // 頁尾 var hkey_key_margin_bottom = hkey_path+"margin_bottom"; // 邊界(下) var hkey_key_margin_left = hkey_path+"margin_left"; // 邊界(左) var hkey_key_margin_right = hkey_path+"margin_right"; // 邊界(右) var hkey_key_margin_top = hkey_path+"margin_top"; // 邊界(上) var old_header = "&w&b第 &p 頁,共 &P 頁"; var old_footer = "&u&b&d"; // 儲存原本頁首頁尾的設定,然後設定空白 function saveAndClearSetting() { try { var RegWsh = new ActiveXObject("WScript.Shell"); old_header = RegWsh.RegRead(hkey_key_header); old_footer = RegWsh.RegRead(hkey_key_footer); RegWsh.RegWrite(hkey_key_header,""); RegWsh.RegWrite(hkey_key_footer,""); return true; } catch (e) { if ( e.description.indexOf("伺服程式無法產生物件") != -1 ) { alert("請調整IE瀏覽器的安全性\n網際網路選項\安全性\自訂層級\n「起始不標示為安全的ActiveX控制項」設定為啟用或提示。"); } // if else { alert("ERR="+e.description); } // else } // catch return false; } // 回存原本頁首頁尾的設定 function restoreSetting() { try { var RegWsh = new ActiveXObject("WScript.Shell"); RegWsh.RegWrite(hkey_key_header,old_header); RegWsh.RegWrite(hkey_key_footer,old_footer); } catch (e) { if ( e.description.indexOf("伺服程式無法產生物件") != -1 ) { alert("請調整IE瀏覽器的安全性\n網際網路選項\安全性\自訂層級\n「起始不標示為安全的ActiveX控制項」設定為啟用或提示。"); } // if else { alert("ERR="+e.description); } // else } // catch } </script>
http://klcintw4.blogspot.com/2007/09/javascriptie.html

 

[JS]電視網頁畫面切換

Posted In: . By 卡西卡


測試:
<script type="text/javascript" >
window.onload = Pages_Init;
</script>
<body>
<div id="MainPage">MainPage</div>
<div id="flash0" style="display:none;">flash0</div>
<div id="flash1" style="display:none;">flash1</div>
<div id="flash2" style="display:none;">flash2</div>
<script>new Page('MainPage',10);new Page('flash0',10);new Page('flash1',10);new Page('flash2',10);</script>
</body>