JavaSript語法隨手記錄

o HTML 檔案內容中,JavaScript 要放在如下的 tag 中撰寫
<script type=”text/javascript”>
<!–
//…..這寫 JavaScript 程式
//–>
</script>

o 檢查變數存在否 (不適用於 boolean)
if ( window.sName )
document.write(“sName 存在:” + window.sName + “<br />”);
else
document.write(“sName 不存在:” + window.sName + “<br />”);

o For ( Element in Obj )
var pop;
var oAddr = new Object();
oAddr.name = “jjdai”;
oAddr.age=”20″;
oAddr.email = “jjdai@example.com”;
for ( popr in oAddr )
{
document.write(“屬性: ” + prop + “=” + oAddr[prop] + “<br />”);
}

//==> oAddr[“name”]
//==> oAddr.name

o functions
parseInt(), parseFloat()
sUrl = escape(sMsg); //@ aaa一 -> aaa%u…
sMsg = unescape(sUrl);

o Window 物件內建的對話方塊
alert(sMsg);
confirm(sMsg);
prompt(sMsg, sValue);

o
for ( var iI = 0; iI < document.all.length; iI++ )
{
oEle = document.all(iI);
sTags += oEle.tagName + ” ” + objEle.sourceIndex + ” “;
}

alert(sTags);

o 下拉式功能表
<html>
<head>
<title>下拉式功能表</title>
<style>
.menu { border: groove 2px;
padding: 3;
font-familt: 新細明體;
font-size: 15;
width: 100;
height: 90;
background-color: #c0c0c0;
postion: relative;
top: -140;
left: 200;
}
</style>
<script type=”text/javascript”>
function showpulldown(oMenu, pos)
{
oMenu.style.top = pos;
}
function hidepulldown(oMenu, pos)
{
oMenu.style.top = pos;
}
</script>
</head>
<body bgcolor=”#FFCC99″>
<span class=”menu” onmouseover=”showpulldown(this, ‘-15’)”
onmouseout=”hidepulldown(this, -140)”>
<a href=”/”>首頁</a><br />
<a href=”1.php”>1</a><br />
<a href=”2.php”>2</a><br />
<hr />
網站<br />
</span>
<span class=”menu” onmouseover=”showpulldown(this, ‘-70’)”
onmouseout=”hidepulldown(this, -140)”>
<a href=”http://www.aol.com”>AOL</a><br />
<a href=”http://www.netscape.com”>Netscape</a><br />
<a href=”www.microsoft.com”>IE</a><br />
<hr />
應用程式<br />
</span>
</body>
</html>

o 滑鼠事件
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onclick, ondbclick

o 鍵盤事件
onkeydown, onkeypress, onkeyup

o
<script type=”text/javascript”>
function showalert()
{
alert(“Event!”);
}
document.onclick = showalert;
</script>

==> 取消: document.onclick = null;

o 取消事件的處理
1. document.myForm.MyButton.onclick = null;
2. return false;
3. event.returnValue=false;
eg:
<script type=”text/javascript” event=”oncontextmenu” for=”document”>
event.returnValue = false;

o 取消氣泡事件
event.cancelBubble = true;

o 滑鼠事件的抓取
ele.setCapture();
==> 設定標籤物件 ele 的滑鼠事件抓取
==> 取消: ele.releaseCapture();
</script>

o Event
<html>
<head>
<title>Event Object的屬性</title>
<script type=”text/javascript”>
function showProp()
{
var obj;
var output = “”;
for ( obj in event )
{
output += obj + ” : ” + event[obj] + “<br />”;
}
show.innerHTML = output;
}
</script>
</head>
<body onload=”showProp()”>
<h2>Event Object的屬性</h2>
<hr />
<div id=”show”></div>
</body>
</html>

o 滑鼠游標的位置
<html>
<head>
<title>滑鼠游標的位置</title>
<script type=”text/javascript”>
function showPos()
{
fired.innerText = “X=” + event.x + ” Y=” + event.y;
client.innerText =”X=” + event.clientX + ” Y=” + event.clientY;
myScreen.innerText =”X=” + event.screenX + ” Y=” + event.screenY;
offset.innerText =”X=” + event.offsetX + ” Y=” + event.offsetY;

mycursor.style.posLeft = event.clientX;
mycursor.style.posTop = event.clientY;
}
</script>
</head>
<body onload=”showPos()”>
<h2>滑鼠游標的位置</h2>
<hr />
<div id=”mycursor” style=”position: absolute;top:10;left:10;height=20;width:20;background:blue;”>
</div>
<p>按一下文件顯示滑鼠游標的位置</p>
<form>
<input type=”button” value=”座標(0, 0)” onclick=”window.moveTo(0,0);”>
<input type=”button” value=”座標(100, 150)” onclick=”window.moveTo(100,150);”>
</form>
Fired: <span id=”fired”></span><br />
Client: <span id=”client”></span><br />
Screen: <span id=”mtScreen”></span><br />
Offset: <span id=”offset”></span><br />
</body>
</html>

o 滑鼠和鍵盤按鍵
<html>
<head>
<title>滑鼠和鍵盤按鍵</title>
<script type=”text/javascript”>
function showInfo()
{
var sMsg;
sMsg = “button: ” + event.button + “<br />”;
sMsg += “altKey: ” + event.altKey + “<br />”;
sMsg += “ctrlKey: ” + event.ctrlKey + “<br />”;
sMsg += “shiftKey: ” + event.shiftKey + “<br />”;
info.innerHTML = sMsg;
}

function display()
{
var sMsg;
sMsg = “keyCode: ” + event.keyCode + “<br />”;
info.innerHTML = sMsg;
}
</script>
</head>
<body onload=”showPos()”>
<h2>滑鼠和鍵盤按鍵</h2>
<hr />
<div id=”mycursor” style=”position: absolute;top:10;left:10;height=20;width:20;background:blue;”>
</div>
<p>按一下文件顯示滑鼠和鍵盤按鍵
<input type=”button” value=”X” onkeydown=”displaykey()”></p>
<div id=”info”></div>
</body>
</html>

o 動態新增物件的事件
objButton.attackEvent(“onkeydown”, moveButton);

event.keyCode;

左: LEFT_ARROW 37
上: UP_ARROW 38
右: RIGHT_ARROW 39
下: DOWN_ARROW 40

<html>
<head>
<title>鍵盤事件移動元素</title>
<style type=”text/css”>
.moveable { position:relative};
</style>
<script type=”text/javascript”>
var LEFT_ARROW = 37
var UP_ARROW = 38
var RIGHT_ARROW = 39
var DOWN_ARROW = 40
//按鍵處理
function moveButton()
{
switch ( event.keyCode )
{
case ( LEFT_ARROW ) : {
event.srcElement.style.posLeft–;
break;
}
case ( UP_ARROW ) : {
event.srcElement.style.posTop–;
break;
}
case ( RIGHT_ARROW ) : {
event.srcElement.style.posLeft++;
break;
}
case ( DOWN_ARROW ) : {
event.srcElement.style.posTop++;
break;
}
}
}
//新增事件
function addEvent(oButton)
{
oButton.attachEvent(“onkeydown”, moveButton);
}
</script>
</head>
<body onload=”showPos()”>
<h2>鍵盤事件移動元素</h2>
<hr />
<input type=”button” value=”X” id=”cmd1″ ckass=”moveable” onclick=”addEvent(this)” />
<input type=”button” value=”O” id=”cmd2″ ckass=”moveable” onclick=”addEvent(this)” />
<table>
<tr><td>__</td><td>__</td><td>__</td></tr>
<tr><td>__</td><td>__</td><td>__</td></tr>
<tr><td>__</td><td>__</td><td>__</td></tr>
</table>
</body>
</html>

o 正規語言檢驗
var oPattern = /^[a-z]{1}\w{4}/;
function validate()
{
var oForm = document.myForm;
var sUserName = oForm.myUserName.value;
if ( !oPattern.test(sUserName) )
{
alert(“使用者名稱需要小寫英文字母開頭(>5個字元)!”);
oForm.myUserName.focus();
oForm.myUserName.select();
event.returnValue = false;
}
}

o XHTML 規範
…..
. Script 程式碼需要使用 CDATA
<script>
<![CDATA[
…..
……
]]>
</script>

o IE 內建的 MSXML 元件來建立 XML DOM 物件
var xmlDom = new ActiveXObject(“MSXML2.DOMDocument”);
xmlDom.async = “false”;
xmlDom.load(“Ch1.xml”);

–> 亦可: strXML = “<book> …. </book>
xmlDom.loadXML(strXML);

o XMLHttpRequest
var httpRequest;
if ( window.XMLHttpRequest )
{
//@ IE7, Mozilla, Safari, etc..
httpRequest = new XMLHttpRequest();
}
else if ( window.ActiveXObject ) //@ IE5, IE6
{
//@ Search for newest MSXML DOM
var msxmls = [ “MSXML2.XMLHttp.4.0”,
“MSXML2.XMLHttp.3.0”,
“MSXML2.XMLHttp”,
“Microsoft.XMLHttp” ];
for ( iI= 0; msxmls.length > iI; iI++ )
{
try { //@ Create XMLHttpRequest obj.
httpRequest = new ActiveXObject(msxmls[iI]);
break;
} catch ( e ) { }
}
}

o Method of XMLHttpRequest
. abort(): 取消目前的 HHTP 請求
. getAllResponseHeaders(): 取得全部 HTTP 標頭的內容
. getResponseHeader(HeaderName): 取得指定 HTTP 標頭名稱的內容
. open(method, url, async, userud, pwd): 開啟 HTTP 請求
. send(): 傳送 HTTP 請求到伺服器
. setRequestHeader(HeaderName, value): 使用者自訂的 HTTP 標頭資料

o 取得 XML 文件內容
httpRequest.open(“GET”, “Ch2-1.xml”, false); //@ false: sync.
httpRequest.send();

ch2-1.htm
———–
<html>
<head>
<title>取得 XML 文件內容 – 文件內容</title>
</head>
<body>
<table border=”1″>
<script type=”text/javascript”>
var httpRequest;
if ( window.XMLHttpRequest )
{
//@ IE7, Mozilla, Safari, etc..
httpRequest = new XMLHttpRequest();
}
else if ( window.ActiveXObject ) //@ IE5, IE6
{
//@ Search for newest MSXML DOM
var msxmls = [ “MSXML2.XMLHttp.4.0”,
“MSXML2.XMLHttp.3.0”,
“MSXML2.XMLHttp”,
“Microsoft.XMLHttp” ];
for ( iI= 0; msxmls.length > iI; iI++ )
{
try { //@ Create XMLHttpRequest obj.
httpRequest = new ActiveXObject(msxmls[iI]);
break;
} catch ( e ) { }
}
}
httpRequest.open(“GET”, “Ch2-2.xml”, false); //@ false: sync.
document.write(httpRequest.readyState + “<br />”);
httpRequest.send(); //@ Send the request.
document.write(httpRequest.readyState + “<br />”);
//@ Get the response of XML DOM
xmlDom = httpRequest.responseXML;
var objNode = xmlDom.documentElement.childNodes;
//@ Show all XML nodes
for ( iI = 0; objNode.length > iI; iI++ )
{
document.write(“<tr><td>”);
document.write(objNode.item(iI).nodeName + “</td><td>”);
document.write(objNode.item(iI).text + “</td></tr>”);
}
</script>
</table>
</body>
</html>

o 取得 XML DOM
xmlDom = httpRequest.responseXML;

ch2-2.htm
———–
<html>
<head>
<title>取得 XML 文件內容 – XNL DOM</title>
</head>
<body>
<script type=”text/javascript”>
var httpRequest;
if ( window.XMLHttpRequest )
{
//@ IE7, Mozilla, Safari, etc..
httpRequest = new XMLHttpRequest();
}
else if ( window.ActiveXObject ) //@ IE5, IE6
{
//@ Search for newest MSXML DOM
var msxmls = [ “MSXML2.XMLHttp.4.0”,
“MSXML2.XMLHttp.3.0”,
“MSXML2.XMLHttp”,
“Microsoft.XMLHttp” ];
for ( iI= 0; msxmls.length > iI; iI++ )
{
try { //@ Create XMLHttpRequest obj.
httpRequest = new ActiveXObject(msxmls[iI]);
break;
} catch ( e ) { }
}
}
httpRequest.open(“GET”, “Ch1.xml”, false); //@ false: sync.
httpRequest.send(); //@ Send the request.
//@ Get the current status
document.write(httpRequest.status + ” – “);
document.write(httpRequest.statusText);
//@ Get the response string.
xmlDoc = httpRequest.responseText;
document.write(“<xmp>” + xmlDoc + “</xmp>”);
</script>
</body>
</html>

o 送出 XML 文件內容, for IE
var xmlDom = new ActiveXObject(“MSXML2.DOMDocument”);
//@ Build XML obj.
xnlDom.async = “false”;
xmlDom.loadXML(strXML);

//@ Send XML DOM to server
var httpRequest = new ActiveXObject(“MSXML2.XMLHTTP”);
httpRequest.open(“POST”, “Ch2-3.php”, false);
httpRequest.sned(xmlDom);

o 讀取/取得 HTTP 標投資訊
httpRequest.setRequestHeader(“MyName”, “jjdai”);

content = httpRequest.getResponseHeader(“CONTENT-TYPES”);

allValues = httpRequest.getAllResponseHeaders();

o RSS: Rich Site Summary, Really Simple Syndication, RDF Site Sumary
提供網站的摘要資訊,可以在網路上發表標題和摘要內容。

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.