tag:blogger.com,1999:blog-27287934516569531282024-03-06T15:14:51.375+08:00螞蟻的 JavaScriptant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comBlogger164125tag:blogger.com,1999:blog-2728793451656953128.post-78869394822796979242009-02-27T20:39:00.013+08:002009-03-11T07:31:26.203+08:00立體字<p>雖然 CSS 有定義 <a href='http://ant4css.blogspot.com/2009/01/text.html#shadow'>text-shadow</a> 這個特徵,可以用來作立體字,可是 text-shadow 只有 Safari 有支援;IE, Firefox, Chrome 都沒法用。這個練習發揮土法煉鋼的精神作出立體字。這個練習用到以下特徵與方法。
<ol>
<li><a href='http://ant4html.blogspot.com/2008/10/div.html'>DIV</a>:用來定義父區塊與子區塊。
<li><a href='http://ant4css.blogspot.com/2009/02/position.html'>position</a>:可以定義區塊佈局的方式。父區塊必須設成 relative,子區塊則設成 absolute。
<li><a href='http://ant4css.blogspot.com/2008/11/bottom.html'>top, left</a>:用來設定子區塊的位置。
<li>font3D(text, clr, dx, dy, layers):此函式可以輸出立體字。參數 text 是要輸出的字串。clr 是最上層字面的顏色。dx, dy 是兩個字面間的距離。layers 是字面層數,最多十層。
</ol>
<p><b>首先用 CSS 作立體字</b>。通常立體字用在較大的字才看的出效果,而且字距要加大,以免重疊。下面的範例將子區塊重疊在父區塊上,並且用 top, left 偏移子區塊一小段距離,以作出立體字的效果。子區塊的背景色必須是透明(transparent)。在 IE6 中必須設 line-height:64px 否則在部落格會失誤。
<!--範例始--><textarea id='SP3D' style='display:none'>
<script type='text/javascript'>
</script>
<style type='text/css'>
.f3d {position:relative;
font-size:64px;
line-height:64px;
font-weight:900;
letter-spacing:8px;
}
.f3d .face
{position:absolute;}
</style>
<div class=f3d>
3D FONT
<div class=face style='top:3px; left:3px; color:red'>
3D FONT
</div>
</div>
</textarea><script type='text/javascript'>dumpSample('SP3D')</script>
<!--範例終-->
<p><b>使用 javascript 產生立體字</b>。
<!--範例始--><textarea id='SP3Djs' style='display:none'>
<style type='text/css'>
.j3d {position:relative;
font-size:64px;
line-height:64px;
font-weight:900;
letter-spacing:8px;
}
.j3d .face
{position:absolute;}
</style>
<script type='text/javascript'>
function font3D(text, clr, dx, dy, layers)
{
var s='<div class=j3d>';
if( layers > 10 ) layers=10;
var x=dx, y=dy;
for(var i=1; i < layers; i++)
{
s+='<div class=face style="top:' +y+ 'px; left:' +x+ 'px">';
s+=text+ '</div>';
x+=dx; y+=dy;
}
s+='<div class=face style="color:' +clr+ '; top:' +y+ 'px; left:' +x+ 'px">';
s+=text+ '</div></div>';
document.write( s );
}
font3D('Hello World!', 'green', 4, 4, 5)
document.write( '<br /><br /><br />' );
font3D('新年快樂!', 'red', -1, -1, 6)
</script>
</textarea><script type='text/javascript'>dumpSample('SP3Djs')</script>
<!--範例終-->
<br /><br />ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-91022088561682299262009-02-27T14:58:00.001+08:002009-02-27T14:59:33.762+08:00可調整數值的長條<p>這個練習是要作一個數值調整條。長條上有一個鈕,用滑鼠右鍵按著鈕,然後左右移動,就可以改變值。這個練習用到以下特徵與方法。
<ol>
<li><a href='http://ant4html.blogspot.com/2008/10/div.html'>DIV</a>:用來定義父區塊與子區塊。
<li><a href='http://ant4css.blogspot.com/2009/02/position.html'>position</a>:可以定義區塊佈局的方式。父區塊必須設成 relative,子區塊則設成 absolute。
<li><a href='http://ant4js.blogspot.com/2008/12/documentmthfz.html#getElementById'>getElementById()</a>:利用識別名取得元素的物件。
<li><a href='http://ant4js.blogspot.com/2009/01/elementpty5.html#style'>style 物件</a>:元素的風格物件,利用此物件讀取或設定子區塊的 <a href='http://ant4css.blogspot.com/2008/11/bottom.html'>left</a> 就能移動子區塊。
<li><a href='http://ant4js.blogspot.com/2009/01/elementpty2.html#parentNode'>parentNode</a>:取得父元素的物件。
<li><a href='http://ant4js.blogspot.com/2009/01/elementpty3.html#clientHeight'>clientWidth</a>:取得父區塊的寬。
</ol>
<!--範例始--><textarea id='SPbar' style='display:none'>
<script type='text/javascript'>
var msdw=false;
var eventX=0;
function setVal( e, o )
{
if(!msdw) return;
var e = e || window.event;
var vo=document.getElementById('val');
var os=o.style;
if( os.left=='' ) os.left='0px';
var w=parseInt(o.parentNode.clientWidth);
var x=parseInt(os.left);
var ex=parseInt(e.clientX);
if( x >= 0 && x <= w )
{
x+=(ex-eventX);
eventX=ex;
if( x < 0 ) x=0;
if( x > w ) x=w;
vo.value=x;
os.left=x+'px';
}
}
function msDown(e, o )
{
var e = e || window.event;
eventX=parseInt(e.clientX);
msdw=true;
}
</script>
<style type='text/css'>
#bar {position:relative;
width:300px;
height:24px;
background:#339;
}
#bar .btn
{position:absolute;
width:24px;
height:24px;
background:red;
}
</style>
<div id=bar>
<div class=btn onmousedown='msDown(event, this )'
onmouseup='msdw=false'
onmouseout='msdw=false'
onmousemove='setVal(event, this)'>
</div>
</div>
<p><input id=val size=12>
</textarea><script type='text/javascript'>dumpSample('SPbar')</script>
<ul><li>用滑鼠按著上面的紅色小方塊,然後左右移動,就可以改變值。</ul>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-848622308145567792009-02-27T10:55:00.001+08:002009-02-27T10:56:58.061+08:00移動的區塊<p>這個練習是要將兩個子區塊不停的移動,但是不會超出父區塊的範圍。這個練習用到以下特徵與方法。
<ol>
<li><a href='http://ant4html.blogspot.com/2008/10/div.html'>DIV</a>:用來定義父區塊與子區塊,子區塊中可以放文字或圖片。
<li><a href='http://ant4css.blogspot.com/2009/02/position.html'>position</a>:可以定義區塊佈局的方式。父區塊必須設成 relative,子區塊則設成 absolute。
<li><a href='http://ant4js.blogspot.com/2008/12/documentmthfz.html#getElementById'>getElementById()</a>:利用識別名取得元素的物件。
<li><a href='http://ant4js.blogspot.com/2009/01/elementmth5.html#getElementsByTagName'>getElementsByTagName()</a>:利用標籤名取得元素物件的清單。使用時要注意 IE 沒有 <a href='http://ant4js.blogspot.com/2009/01/elementmth5.html#getElementsByClassName'>getElementsByClassName()</a> 這個方法。
<li><a href='http://ant4js.blogspot.com/2009/01/elementpty5.html#style'>style 物件</a>:元素的風格物件,利用此物件讀取或設定子區塊的 <a href='http://ant4css.blogspot.com/2008/11/bottom.html'>top, left</a> 就能移動子區塊。
<li><a href='http://ant4js.blogspot.com/2009/01/elementpty3.html#clientHeight'>clientHeight, clientWidth</a>:取得父區塊的寬與高。
<li><a href='http://ant4js.blogspot.com/2009/01/windowmthv2.html#setTimeout'>setTimeout()</a>:設定變化的時間間隔。
<li>setBall():此函式會設定 ball 類別區塊的開始位置。
<li>moveBall():此函式會移動 ball 類別區塊。
</ol>
<!--範例始--><textarea id='SPmenus' style='display:none'>
<style type='text/css'>
#board {position:relative;
width:300px;
height:300px;
background:#339;
}
#board .ball
{position:absolute;
width:24px;
height:24px;
background:white;
color:red;
}
</style>
<div id=board>
<div class=ball>B</div>
<div class=ball>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqDFS_lYt9n3mbIJu2gbYu2bZXspHAZUiTPq7sMN3abjxNP5tgQJ3lvamcEExZat-tqvDaPHwV_ZvSts9x9ctDigzxPikj_ZtPGuZaMSy8_ohD-6LagHTrmoxA6EinHSM9O7ILXhjs1szm/s200/ant.GIF">
</div>
</div>
<script type='text/javascript'>
var balls=[[2,2],[2,2]];
function moveBall(id)
{
var o=document.getElementById(id);
var w=parseInt(o.clientWidth)-24;
var h=parseInt(o.clientHeight)-24;
for(var i=0; i < balls.length; i++)
{var bo=balls[i][2];
var px=parseInt(bo.left);
var py=parseInt(bo.top);
px+=balls[i][0];
if(px > w || px < 0) balls[i][0]=-balls[i][0];
py+=balls[i][1];
if(py > h || py < 0) balls[i][1]=-balls[i][1];
bo.top=py+'px';
bo.left=px+'px';
}
setTimeout('moveBall("'+id+'")', 20);
}
function setBall(id)
{
var bs=document.getElementById(id).getElementsByTagName('div');
var bo=bs[0].style;
balls[0][2]=bo;
bo.top='10px';
bo.left='100px';
bo=bs[1].style;
balls[1][2]=bo;
bo.top='200px';
bo.left='10px';
}
setBall("board");
moveBall("board");
</script>
</textarea><script type='text/javascript'>dumpSample('SPmenus')</script>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-84789969524824567572009-02-25T14:47:00.003+08:002009-02-25T15:16:35.812+08:00存取報表的 TD 元素<p>這個練習是要將報表的每一個小格子的資料讀出來。由於一個報表的小格子很多,無法每一個格子都設 <a href='http://ant4html.blogspot.com/2008/10/m3.html#ID'>ID</a>,然後用 <a href='http://ant4js.blogspot.com/2008/12/documentmthfz.html#getElementById'>getElementById()</a> 讀取其內容。這個練習使用以下的特徵與方法來讀取小格子內容:
<ol>
<li><a href='http://ant4html.blogspot.com/2008/11/table.html'>TABLE 元素</a>:用來建立報表。
<li><a href='http://ant4html.blogspot.com/2008/11/td.html'>TD 元素</a>:用來存放小格子的內容。
<li><a href='http://ant4js.blogspot.com/2009/01/tablepty1.html#rows'>table.rows[]</a>:報表的每一橫欄對應一個 rows[],可藉此取得橫欄的物件。
<li><a href='http://ant4js.blogspot.com/2009/01/tablerowpty.html#cells'>cells[]</a>:用來取得小格子的物件。
<li><a href='http://ant4js.blogspot.com/2009/01/elementpty1.html#innerHTML'>innerHTML</a>:用來讀取小格子的內容。
</ol>
<p>下面的範例只用來讀取小格子的內容,但是只要加上其它程序碼,也可以更改小格子的內容。如果要增減報表的橫欄,則要用到 <a href='http://ant4js.blogspot.com/2009/01/tablemth.html#insertRow'>insertRow(), deleteRow()</a> 兩個方法。
<!--範例始--><textarea id='SPtbltd' style='display:none'>
<table id='tbl' bgcolor='#333388' rules=all>
<caption>學生總成績</caption>
<thead>
<tr><th>學號<th>姓名<th>學科<th>成績
</thead>
<tbody>
<tr><td>51<td>螞蟻<td>物理<td>99
<tr><td>52<td>蚱蜢<td>物理<td>59
</tbody>
<tfoot>
<tr><td colspan=4>2009/1/6 製作
</tfoot>
</table>
<p>
<script type='text/javascript'>
var tb=document.getElementById('tbl');
for(var i=0; i < tb.rows.length; i++)
{
for( var j=0; j < tb.rows[i].cells.length; j++)
document.write( tb.rows[i].cells[j].innerHTML +' <b>|</b> ');
document.write('<br />');
}
</script>
</textarea><script type='text/javascript'>dumpSample('SPtbltd')</script>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-3771698904548667662009-02-24T10:19:00.001+08:002009-02-24T10:20:39.973+08:00操控 RADIO 與 CHECKBOX<p>此練習使用 javascript 讀取 RADIO 與 CHECKBOX 的狀態。此練習用到以下元素與特徵:
<ol>
<li><a href='http://ant4html.blogspot.com/2008/11/form.html'>FORM</a>:宣告輸入表格。
<li><a href='http://ant4html.blogspot.com/2008/11/input.html#TYPE'>RADIO</a>:宣告一組單選鈕。
<li><a href='http://ant4html.blogspot.com/2008/11/input.html#TYPE'>CHECKBOX</a>:宣告一組複選鈕。
<li><a href='http://ant4js.blogspot.com/2008/12/documentptyfz.html#forms'>document.forms</a>:用來讀取或設定輸入表格的物件清單。
<li><a href='http://ant4html.blogspot.com/2008/10/m3.html#ONCLICK'>onclick</a>:用滑鼠左鍵點擊時,會啟動程序。。
<li>checked:RADID 與 CHECKBOX 元素物件的特徵,存放 true 表示此項被點選了;否則存放 false。
<li>value:RADID 與 CHECKBOX 元素物件的特徵,存放此項的值。
</ol>
<!--範例始--><textarea id='SPradio' style='display:none'>
<form id='fm1' onclick='hitted(this, "country")'>
單選的 RADIO:
<div>
<input name='country' type=radio
value='ROC'checked>中華民國<br />
<input name='country' type=radio
value='USA'>美國<br />
<input name='country' type=radio
value='NZL'>紐西蘭<br />
<input name='country' type=radio
value='FRC'>法國
</div>
</form>
<form id='fm2' onclick='favors(this, "stars")'>
複選的 CHECKBOX:
<input name='stars' type=checkbox
value='Jolin'checked>蔡依林
<input name='stars' type=checkbox
value='沛慈'>曾沛慈
<input name='stars' type=checkbox
value='敬騰'>蕭敬騰
<input name='stars' type=checkbox
value='宗緯'>楊宗緯
</form>
<p>
<script type='text/javascript'>
function hitted( o, name )
{
for(var i=0; i < o[name].length; i++)
if( o[name][i].checked ) break;
alert( o[name][i].value );
}
function favors( o, name)
{
var s='';
for(var i=0; i < o[name].length; i++)
if( o[name][i].checked ) s+=' / '+ o[name][i].value;
alert( s );
}
for(var i=0; i < document.forms['fm1'].country.length; i++)
document.write( document.forms['fm1'].country[i].value
+' / '+ document.forms['fm1'].country[i].checked +'<br />');
for(var i=0; i < document.forms['fm2'].stars.length; i++)
document.write( document.forms['fm2'].stars[i].value
+' / '+ document.forms['fm2'].stars[i].checked +'<br />');
</script>
</textarea><script type='text/javascript'>dumpSample('SPradio')</script>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-56062773548195842202009-02-20T14:09:00.014+08:002009-02-22T10:30:49.447+08:00保護圖片不被盜拷<p>此法使用 DIV 區塊蓋住被保護的作者圖片。DIV 區塊的長寬設成與作者圖片相同,其中放有著作權保護文字(copyright protection)。此法用到以下特徵與方法。
<ol>
<li><a href='http://ant4html.blogspot.com/2008/11/img.html'>IMG</a>:用來展現一張圖像。
<li><a href='http://ant4html.blogspot.com/2008/10/div.html'>DIV</a>:用來蓋住圖片。
<li><a href='http://ant4css.blogspot.com/2009/02/position.html'>position:relative</a>:設定圖片佈局的方式。
<li><a href='http://ant4css.blogspot.com/2008/11/bottom.html'>top</a>:用來將 DIV 區塊與圖片重疊放在一起。
<li><a href='http://ant4css.blogspot.com/2008/11/z-index.html'>z-index</a>:設定重疊的圖片與 DIV 區塊展現時的上下層次。
<li><a href='http://ant4js.blogspot.com/2009/01/windowevtv7.html#onload'>onload</a>:下載圖片時,會啟動此事件操控器。
<li><a href='http://ant4js.blogspot.com/2009/01/windowevtv5.html#onmousemove'>onmouseover</a>:滑鼠移入元素時,會啟動此操控器。
<li><a href='http://ant4js.blogspot.com/2009/01/windowevtv5.html#onmouseout'>onmouseout</a>:滑鼠移出元素時,會啟動此操控器。
<li><a href='http://ant4js.blogspot.com/2009/01/elementpty5.html#style'>style.zIndex</a>:用來變更圖片的層次。
<li>setZ(o, level):此為自訂函式,用來設定重疊元素的層次。參數 o 是元素物件,level 是要設定的層次。
</ol>
此法利用 onmouseout, onmouseover 兩個操控器,動態變更 z-index;當滑鼠移入作者圖片時,會出現保護文字。在圖片上點擊滑鼠右鍵,無法將作者圖片存檔。如果瀏覽器的 javascript 被關閉,則只能顯示保護文字。但是必須強調一點,此法不能達成百分之百保護。基本上,在網路傳輸的資料,不可能作到百分之百保護。另外有兩個版本是純用 CSS 的 <a href='http://ant4css.blogspot.com/2009/01/opacity.html'>OPACITY</a> 與 <a href='http://ant4css.blogspot.com/2008/11/z-index.html'>Z-INDEX</a> 作的保護罩,這兩個方法的缺點是 IE6 不支援 opacity 與 :hover。
<p>由於圖片與區塊的間距會隨 <a href='http://ant4css.blogspot.com/2008/11/font.html'>font</a> 變化;下例中,<a href='http://ant4css.blogspot.com/2009/02/font-size.html'>font-size:0px</a> 與 <a href='http://ant4css.blogspot.com/2008/11/line-height.html'>line-height:0</a> 是為了確保圖片與區塊的上下間距固定,以便用 top 調整兩者重疊。line-height 是被 Firefox, Safari, Chrome 所需要。如果是左右間距,則還受到 <a href='http://ant4css.blogspot.com/2008/11/letter-spacing.html'>letter-spacing</a>, word-spacing 的影響。實測時,左右間距在不同瀏覽器無法調成一致。
<p>DIV 區塊一定要設背景色,如果不設背景色,預設值是 transparent;這在 IE6 點擊滑鼠右鍵依然可以將作者圖片存檔。
<!--範例始--><textarea id='SPcp' style='display:none'>
<style type='text/css'>
.crp {font-size:0px;
line-height:0;
height:202px;
overflow:hidden;
}
.crp IMG
{position:relative;
padding:0px;
margin:0px;
border:none;
outline:none;
}
.crp DIV
{position:relative;
top:-200px;
width:200px;
height:200px;
background:red;
color:black;
font-size:14px;
line-height:1.2;
}
</style>
<div class=crp>
<img onload='setZ(this, 2)'
onmouseover='setZ(this, -2)'
onmouseout='setZ(this, 2)'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpYA549yz9MS8WE3TorQMGpoPgrqOUQYQzr0UHO5GnBgWzJjbXbZ-07pqxAUoNnsZMMHDidRLuHtdnAO9p3Iy26qtMYxQiyOqnPRzWKQfswwUOSPvfJ9sz1ideHxDOcjgbBM32jfo6ixI/s200/shape.jpg" />
<br />
<div onmouseover='setZ(this, 4)'
onmouseout='setZ(this, 0)' >
Copyright 2008, by ant2legs, All Rights Reserved.
</div>
</div>
<script type='text/javascript'>
function setZ( o, level )
{
o.style.zIndex=level;
}
</script>
</textarea><script type='text/javascript'>dumpSample('SPcp')</script>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-53112329668161258092009-02-09T07:41:00.012+08:002009-02-27T06:45:49.591+08:00展開式選單<p>此練習試作一個可展開與隱藏的選單。開始時只顯示第一層主選單,點選主選單項目,會展開第二層選單;再點選時,會隱藏子選單。你也可以用 CSS 作 <a href='http://ant4css.blogspot.com/2009/02/blog-post_09.html'>展開式選單</a>,其顯示效果不同,可以依需要選用最適合的方法。此練習使用的元素與方法有:
<ol>
<li><a href='http://ant4html.blogspot.com/2008/11/li.html'>UL</a>:建立一個沒有編號的清單。
<li><a href='http://ant4js.blogspot.com/2008/12/documentmthfz.html#getElementById'>getElementById()</a>:利用 ID 讀取元素物件。
<li><a href='http://ant4js.blogspot.com/2008/12/documentmthfz.html#getElementsByTagName'>getElementsByTagName()</a>:利用標籤名讀取元素物件,結果存入陣列中。要注意這是 getElement<span style='color:red'>s</span>ByTagName。
<li><a href='http://ant4js.blogspot.com/2009/01/elementpty5.html#style'>style</a>:設定風格表新值。
<li><a href='http://ant4css.blogspot.com/2008/11/display.html'>display:none</a>:隱藏元素內容。
</ol>
<!--範例始--><textarea id='SPmenus' style='display:none'>
<ul id='menus'>請點選下列項目
<li><span onclick='toggleMenu("m1")'>動作遊戲</span>
<ul id=m1>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3953.html'>長劍客戰骷髏</a>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a>
</ul>
<li><span onclick='toggleMenu("m2")'>競速遊戲</span>
<ul id=m2>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a>
</ul>
</ul>
<script type='text/javascript'>
function toggleMenu( id )
{
var o=document.getElementById( id );
o.style.display=
(o.style.display=='none') ? '' : 'none';
}
function hideMenu( id )
{
var o=document.getElementById( id ).getElementsByTagName('ul');
for( var i=0; i < o.length; i++)
o[i].style.display='none';
}
hideMenu('menus');
</script>
</textarea><script type='text/javascript'>dumpSample('SPmenus')</script>
<!--範例終-->
<p>測試時還發現一個問題。原本範例是寫成下面的方式,可是卻不能展開子選單。這顯示 『UL.pull UL {display:none}』這個規則,不能用 style.display 改變。
<!--範例始--><textarea id='SPmenu2' style='display:none'>
<style type='text/css'>
UL.pull UL {display:none}
</style>
<ul class=pull>請點選下列項目
<li><span onclick='toggleMenu("m3")'>動作遊戲</span>
<ul id=m3>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3953.html'>長劍客戰骷髏</a>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a>
</ul>
<li><span onclick='toggleMenu("m4")'>競速遊戲</span>
<ul id=m4>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a>
</ul>
</ul>
</textarea><script type='text/javascript'>dumpSample('SPmenu2')</script>
<!--範例終-->
<p><b>使用 <a href='http://ant4css.blogspot.com/2009/01/whitespace.html'>white-space</a> 製作一個展開式選單</b>。此法利用 white-space 的兩個值,pre 與 nowrap 來隱藏或展開選單;與前面的效果有差異。可以放一些次要資料在其中,要點選才能看到。此法也有一個 <a href='http://ant4css.blogspot.com/2009/02/blog-post_09.html'>CSS 版本</a> 的,但是不能在 IE6 執行。
<!--範例始--><textarea id='SPpre' style='display:none'>
<script type='text/javascript'>
function togglePre( obj )
{
var os=obj.parentNode.style;
os.whiteSpace=
(os.whiteSpace=='pre') ? 'nowrap' : 'pre';
}
</script>
<style type='text/css'>
.pre {height:auto;
overflow:hidden;
width:140px;
border:solid 1px red;
white-space:nowrap;
cursor:pointer;
}
</style>
請點選下列項目:
<DIV class=pre><span onclick='togglePre( this )'>動作遊戲</span>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_3953.html'>長劍客戰骷髏</a>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a>
</div>
<div class=pre><span onclick='togglePre( this )'>競速遊戲</span>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a>
</div>
</textarea><script type='text/javascript'>dumpSample('SPpre')</script>
<!--範例終-->
<p><b>下拉式的選單</b>。開始時只顯示第一層主選單,滑鼠移到選單項目上,會展開第二層選單;滑鼠移出,會隱藏子選單。此練習使用到 <a href='http://ant4css.blogspot.com/2009/02/position.html'>position</a> 特徵。先用一個父矩格 DIV 包納所有選單,並將其設為 position:relative。第二層選單則設為 position:absolute,並且利用 <a href='http://ant4css.blogspot.com/2008/11/bottom.html'>top, left</a> 調整其位置。
<!--範例始--><textarea id='SPpull' style='display:none'>
<script type='text/javascript'>
function showMenu(id)
{
var mo=document.getElementById(id);
mo.style.display='block';
}
function hideMenu(id)
{
var mo=document.getElementById(id);
mo.style.display='none';
}
</script>
<style type='text/css'>
.menulst
{position:absolute;
width:140px;
height:200px;
background:white;
display:none;
}
</style>
<div style='position:relative'>
<span onmouseover='showMenu("mu1")'
onmouseout='hideMenu("mu1")'>
動作遊戲</span> |
<span onmouseover='showMenu("mu2")'
onmouseout='hideMenu("mu2")'>
競速遊戲</span>
<pre id=mu1 class=menulst
style='top:0px;left:0px'
onmouseover='this.style.display="block"'
onmouseout='this.style.display="none"'>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_3953.html'>長劍客戰骷髏</a>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a>
</pre>
<pre id=mu2 class=menulst
style='top:-200px;left:120px'
onmouseover='this.style.display="block"'
onmouseout='this.style.display="none"'>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a>
</pre>
</div>
<p>1
<p>2
<p>3
<p>4
</textarea><script type='text/javascript'>dumpSample('SPpull')</script>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-70585692619882872682009-02-08T10:08:00.003+08:002009-02-08T10:21:50.923+08:00frameElement 的測試頁<p>請參考 <a href='http://ant4js.blogspot.com/2009/01/windowptyv2.html#frameElement'>frameElement</a>。
<!--範例始--><textarea id='SPframechg' style='display:none'>
<script type='text/javascript'>
document.write( window.frameElement
+'<br />'+ window.frameElement.height );
</script>
</textarea><script type='text/javascript'>dumpSample('SPframechg')</script>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-6494260091204384982009-02-08T09:47:00.002+08:002009-02-08T09:49:17.557+08:00改變 IFRAME 的網頁<p>此練習改變 IFRAME 元素內的網頁。這樣可以保持主視窗不變,而 IFRAME 的內容可以視需要 放置不同的網頁。此練習使用到以下元素與方法。
<ol>
<li><a href='http://ant4html.blogspot.com/2008/11/iframe.html'>IFRAME</a>:設定矩框的網頁與大小等等。
<li><a href='http://ant4js.blogspot.com/2008/12/documentmthfz.html#getElementById'>getElementById()</a>:取得矩框的元素物件。
<li><a href='http://ant4js.blogspot.com/2009/01/windowptyv2.html#frames'>frames[]</a>:取得矩框的視窗物件。
</ol>
<p>getElementById() 與 frames[] 都可以取得矩框的物件,但是一個是元素物件,一個是視窗物件。元素物件必須加上 contentWindow 特徵,才能取得矩框的視窗物件。
<!--範例始--><textarea id='SPframechg' style='display:none'>
<script type='text/javascript'>
function chgFrame( url )
{
//var o=document.getElementById('myfrm');
//o.src=url;
//o.contentWindow.location.href=url;
frames[0].location.href=url;
}
document.write( Date() );
</script>
<p><a href='javascript:chgFrame("http://www.blogger.com/")'>點此改變 IFRAME 內容</a>
<p>
<iframe width='90%' height='300px' id='myfrm'
src='http://ant4js.blogspot.com/2008/12/array.html'></iframe>
</textarea><script type='text/javascript'>dumpSample('SPframechg')</script>
<ul><li>上例中列出的幾個方法都測試過,可以用。
<li>測試時發現,改變 IFRAME 的網頁,會在瀏覽器的歷史紀錄增加新的一頁。在 Safari, Chrome 使用 o.src=url 改變網頁,則不會產生歷史新頁。</ul>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-54540765307185839372009-02-07T09:11:00.001+08:002009-02-07T09:12:50.085+08:00Storage:事件操控器<center class=sec>
<a href='http://ant4js.blogspot.com/2008/12/storage.html'>物件</a> |
<a href='http://ant4js.blogspot.com/2009/02/storagepty.html'>特徵</a> |
<a href='http://ant4js.blogspot.com/2009/02/storagemth.html'>方法</a> |
<a href='http://ant4js.blogspot.com/2009/02/storageevt.html'>事件</a>
</center>
<!--成員始--><div class=pty style='background:#ddddff'>Storage 的事件操控器</div>
<!--成員始--><div class=pty id='onstorage'>onstorage</div>
<p>儲存區被變更時,會啟動此事件操控器。啟動此事件會產生 event 物件,在 Firefox 測試,只能讀到一個特徵 domain;標準組織建議了多個特徵,都沒支援。
<!--範例始--><textarea id='SPonstorage' style='display:none'>
<script type='text/javascript'>
function onstorageHd(e)
{
e = e || window.event;
//document.removeEventListener("storage", hd, false); //會導致錯誤
onstorageDel(onstorageHd);
alert('已變更 '+e.domain +' / '+ e.url +' / '+ e.key);
}
function onstorageDel(hd)
{
if(document.removeEventListener)
document.removeEventListener("storage", hd, false);
else
document.detachEvent("onstorage", hd);
}
function onstorageSet(hd)
{
if(document.addEventListener)
document.addEventListener("storage", hd, false);
else
document.attachEvent("onstorage", hd);
}
function onstorageAdd()
{
sessionStorage.Game="射擊遊戲";
}
sessionStorage.Game="好玩遊戲";
</script>
<a href='javascript:onstorageSet(onstorageHd)'>先設定操控器</a> //
<a href='javascript:onstorageAdd()'>改變儲存區資料</a> //
<a href='javascript:sessionStorage.removeItem("Game")'>刪除儲存區資料</a>
</textarea><script type='text/javascript'>dumpSample('SPonstorage')</script>
<ul><li>上例,Firefox 成功;IE6, Safari, Chrome 失敗。
<li>使用 Firefox 測試時發現,<a href='http://ant4js.blogspot.com/2009/01/elementmth1.html'>removeEventListener()</a> 不能直接寫在事件函式中,會導致錯誤。必須寫在一個函式中,然後由事件函式呼叫之。如上面的寫法。</ul>
<!--範例終-->
<!--成員始--><div class=pty id='onstoragecommit'>onstoragecommit</div>
<p>儲存區被寫入磁碟時,會啟動此事件操控器。限 IE8 使用,非標準組織所建議。ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-16535759793243319752009-02-06T07:29:00.006+08:002009-02-07T09:14:32.984+08:00Storage:方法<center class=sec>
<a href='http://ant4js.blogspot.com/2008/12/storage.html'>物件</a> |
<a href='http://ant4js.blogspot.com/2009/02/storagepty.html'>特徵</a> |
<a href='http://ant4js.blogspot.com/2009/02/storagemth.html'>方法</a> |
<a href='http://ant4js.blogspot.com/2009/02/storageevt.html'>事件</a>
</center>
<div id="MBRlist"></div>
<script type='text/javascript'>
var mbrs=[
'clear',
'getItem',
'key',
'removeItem',
'setItem'
];
drawMBR("MBRlist",mbrs, 4, 'PMtbl') ;
</script>
<!--成員始--><div class=pty style='background:#ddddff'>Storage 的方法</div>
<!--成員始--><div class=pty id='clear'>clear()</div>
<p>清除所有的資料。限 IE8 使用。
<!--範例始--><textarea id='SPclear' style='display:none'>
<script type='text/javascript'>
sessionStorage.brain='益智遊戲';
document.write( sessionStorage.length
+' = '+ sessionStorage.brain +'<br />');
sessionStorage.clear();
</script>
<p><a href='http://ant4js.blogspot.com/2009/02/storagepmrd.html'>進入測試頁</a>,看看讀的到嗎?
</textarea><script type='text/javascript'>dumpSample('SPclear')</script>
<ul><li>上例,IE6, Firefox , Safari, Chrome 失敗。</ul>
<!--範例終-->
<!--成員始--><div class=pty id='getItem'>getItem()</div>
<p>讀取資料。其語法是:
<p>物件.getItem( key )
<p>key 是字串。找不到 key 時,回傳 null。
<!--範例始--><textarea id='SPgetItem' style='display:none'>
<script type='text/javascript'>
sessionStorage.fun='好玩遊戲';
document.write( sessionStorage.getItem('fun') );
</script>
</textarea><script type='text/javascript'>dumpSample('SPgetItem')</script>
<ul><li>上例,Firefox 成功;IE6, Safari, Chrome 失敗。</ul>
<!--範例終-->
<!--成員始--><div class=pty id='key'>key()</div>
<p>讀取指標所在的鍵名。其語法是:
<p>物件.key( 指標 )
<p>指標是整數。
<!--範例始--><textarea id='SPkey' style='display:none'>
<script type='text/javascript'>
for( var i=0; i < sessionStorage.length; i++)
document.write( sessionStorage.key( i ) +' / ');
</script>
</textarea><script type='text/javascript'>dumpSample('SPkey')</script>
<ul><li>上例,Firefox 成功;IE6, Safari, Chrome 失敗。</ul>
<!--範例終-->
<!--成員始--><div class=pty id='removeItem'>removeItem()</div>
<p>讀取資料。其語法是:
<p>物件.removeItem( key )
<p>key 是字串。
<!--範例始--><textarea id='SPremoveItem' style='display:none'>
<script type='text/javascript'>
sessionStorage.removeItem( 'fun' );
document.write( sessionStorage.getItem('fun') +'<br />');
for( var i=0; i < sessionStorage.length; i++)
document.write( sessionStorage.key( i ) +' / ');
</script>
</textarea><script type='text/javascript'>dumpSample('SPremoveItem')</script>
<ul><li>上例,Firefox 成功;IE6, Safari, Chrome 失敗。</ul>
<!--範例終-->
<!--成員始--><div class=pty id='setItem'>setItem()</div>
<p>讀取資料。其語法是:
<p>物件.setItem( key, value )
<p>key 與 value 都是字串。
<!--範例始--><textarea id='SPsetItem' style='display:none'>
<script type='text/javascript'>
sessionStorage.setItem( 'fight', '武打遊戲' );
document.write( sessionStorage.fight );
</script>
<p><a href='http://ant4js.blogspot.com/2009/02/storagepmrd.html'>進入測試頁</a>,看看讀的到嗎?
</textarea><script type='text/javascript'>dumpSample('SPsetItem')</script>
<ul><li>上例,Firefox 成功;IE6, Safari, Chrome 失敗。</ul>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-66330770224303350112009-02-06T07:16:00.003+08:002009-02-06T07:37:34.074+08:00storage 特徵與方法測試<p>請參考 <a href='http://ant4js.blogspot.com/2008/12/storage.html'>Storage</a>。
<!--成員始--><div class=pty id='length'>length</div>
<!--範例始--><textarea id='SPlength' style='display:none'>
<ol>
<script type='text/javascript'>
for( k in sessionStorage )
document.write( '<li>'+ k +' : '+ sessionStorage[k] );
</script>
</ol>
</textarea><script type='text/javascript'>dumpSample('SPlength')</script>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-63332567980048305912009-02-06T07:12:00.005+08:002009-02-07T09:15:04.444+08:00Storage:特徵<center class=sec>
<a href='http://ant4js.blogspot.com/2008/12/storage.html'>物件</a> |
<a href='http://ant4js.blogspot.com/2009/02/storagepty.html'>特徵</a> |
<a href='http://ant4js.blogspot.com/2009/02/storagemth.html'>方法</a> |
<a href='http://ant4js.blogspot.com/2009/02/storageevt.html'>事件</a>
</center>
<div id="MBRlist"></div>
<script type='text/javascript'>
var mbrs=[
'constructor',
'length',
'remainingSpace'
];
drawMBR("MBRlist",mbrs, 4, 'PMtbl') ;
</script>
<!--成員始--><div class=pty style='background:#ddddff'>Storage 的特徵</div>
<!--成員始--><div class=pty id='constructor'>constructor</div>
<p>存放物件的製造器。
<!--範例始--><textarea id='SPconstructor' style='display:none'>
<script type='text/javascript'>
document.write( 'Storage:'+ Storage.constructor
+'<br />session:'+ sessionStorage.constructor );
</script>
</textarea><script type='text/javascript'>dumpSample('SPconstructor')</script>
<ul><li>上例,Firefox 成功;IE6, Safari, Chrome 失敗。</ul>
<!--範例終-->
<!--成員始--><div class=pty id='length'>length</div>
<p>存放資料清單的長度。
<!--範例始--><textarea id='SPlength' style='display:none'>
<script type='text/javascript'>
sessionStorage.Gun='射擊遊戲';
document.write( 'Storage:'+ Storage.length
+'<br />session:'+ sessionStorage.length +'<br />');
Storage.prototype.race='賽車遊戲';
document.write( 'Storage:'+ Storage.length
+'<br />session:'+ sessionStorage.race
+'<br />session:'+ sessionStorage.length );
</script>
<p><a href='http://ant4js.blogspot.com/2009/02/storagepmrd.html'>進入測試頁</a>,看看讀的到嗎?
</textarea><script type='text/javascript'>dumpSample('SPlength')</script>
<ul><li>上例,Firefox 成功;IE6, Safari, Chrome 失敗。</ul>
<!--範例終-->
<!--成員始--><div class=pty id='remainingSpace'>remainingSpace</div>
<p>存放剩餘記憶體數量,單位是位元組。限 IE8 使用。
<!--範例始--><textarea id='SPremainingSpace' style='display:none'>
<script type='text/javascript'>
document.write( sessionStorage.remainingSpace );
</script>
</textarea><script type='text/javascript'>dumpSample('SPremainingSpace')</script>
<ul><li>上例,IE6, Firefox , Safari, Chrome 失敗。</ul>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-38523959421326692692009-02-05T08:41:00.010+08:002009-02-05T10:45:20.586+08:00Storage 測試<p>請參考 <a href='http://ant4js.blogspot.com/2008/12/storage.html'>Storage</a>。
<!--成員始--><div class=pty id='Storage'>Storage</div>
<!--範例始--><textarea id='SPStorage' style='display:none'>
<script type='text/javascript'>
document.write( sessionStorage.bike
+'<br />'+ globalStorage['ant4js.blogspot.com'].bike );
sessionStorage.prt('早安');
</script>
</textarea><script type='text/javascript'>dumpSample('SPStorage')</script>
<!--範例終-->
<!--成員始--><div class=pty id='globalStorage'>globalStorage</div>
<!--範例始--><textarea id='SPglobalStorage' style='display:none'>
<script type='text/javascript'>
document.write(
globalStorage['ant4js.blogspot.com'].Game );
</script>
</textarea><script type='text/javascript'>dumpSample('SPglobalStorage')</script>
<!--範例終-->
<!--成員始--><div class=pty id='localStorage'>localStorage</div>
<!--範例始--><textarea id='SPlocalStorage' style='display:none'>
<script type='text/javascript'>
document.write( localStorage.Jolin );
</script>
</textarea><script type='text/javascript'>dumpSample('SPlocalStorage')</script>
<!--範例終-->
<!--成員始--><div class=pty id='sessionStorage'>sessionStorage</div>
<!--範例始--><textarea id='SPsessionStorage' style='display:none'>
<script type='text/javascript'>
document.write( sessionStorage.JAY );
</script>
</textarea><script type='text/javascript'>dumpSample('SPsessionStorage')</script>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-30713092440675058212009-02-05T08:36:00.014+08:002009-02-05T10:16:16.025+08:00teststorage<!--成員始--><div class=pty id='Storage'>Storage</div>
<p>此為標準的介面,用於 localStorage, sessionStorage 物件。可以使用 prototype 增加所有
物件的成員。
<!--範例始--><textarea id='SPStorage' style='display:none'>
<script type='text/javascript'>
document.write( Storage +'<br />');
Storage.prototype.bike='賽車遊戲';
document.write( sessionStorage.bike +'<br />');
document.write( globalStorage['ant4js.blogspot.com'].bike +'<br />');
Storage.prototype.prt =
function ( s ) { document.write( s ) };
sessionStorage.prt('我很好');
</script>
<p><a href='http://ant4js.blogspot.com/2009/02/storagerd.html'>跳至測試頁</a>,看看可
不可以讀到。
</textarea><script type='text/javascript'>dumpSample('SPStorage')</script>
<ul><li>上例,Firefox 成功;IE6, Safari, Chrome 失敗。</ul>
<!--範例終-->
<!--成員始--><div class=pty id='globalStorage'>globalStorage</div>
<p>使用此存放的資料可以在不同視窗讀寫,但是限同一網站;並且可以長久保留在客戶電腦,即便此視窗關閉。限 Firefox 使用,未來可能增加標準的 localStorage。其語法是:
<p>globalStorage['網址'].特徵名 = 值
<p>網址例如 ant4js.blogspot.com。值必須是字串,所有的數值都必須轉換成字串。
<!--範例始--><textarea id='SPglobalStorage' style='display:none'>
<script type='text/javascript'>
document.write( globalStorage +'<br />');
globalStorage['ant4js.blogspot.com'].Game='射擊遊戲';
document.write( globalStorage['ant4js.blogspot.com'].Game );
</script>
<p>在另一個視窗開此頁 http://ant4js.blogspot.com/2009/02/storagerd.html ,看看可不可以讀到。
</textarea><script type='text/javascript'>dumpSample('SPglobalStorage')</script>
<ul><li>上例,Firefox 成功;IE6, Safari, Chrome 失敗。</ul>
<!--範例終-->
<!--成員始--><div class=pty id='localStorage'>localStorage</div>
<p>使用此存放的資料可以在不同視窗讀寫,但是限同一網站;並且可以長久保留在客戶電腦,即便此視窗關閉。Firefox 使用 globalStorage。
<!--範例始--><textarea id='SPlocalStorage' style='display:none'>
<script type='text/javascript'>
document.write( localStorage +'<br />');
localStorage.Jolin='蔡依林';
document.write( localStorage.Jolin );
</script>
<p><a href='http://ant4js.blogspot.com/2009/02/storagerd.html' target=_blank>
新開測試頁</a>,看看可不可以讀到。
</textarea><script type='text/javascript'>dumpSample('SPlocalStorage')</script>
<ul><li>上例,IE6, Firefox, IE6, Safari, Chrome 都失敗。</ul>
<!--範例終-->
<!--成員始--><div class=pty id='sessionStorage'>sessionStorage</div>
<p>此物件是要改善<a href='http://ant4js.blogspot.com/2009/02/cookie.html'>資訊片(cookie)</a>會被多個視窗讀取的情形。例如用戶對同一網站開了兩三個瀏覽器視窗,此時用戶在其中一個視窗運作,產生的資訊片,其它視窗都可以讀取;這有可能導致用戶在購物網站重複購買相同的商品而未察覺。使用 sessionStorage 存放的資訊,只有同一視窗中同一網站的任一網頁可以讀取;視窗關閉時,存放的資料會被刪去。
<!--範例始--><textarea id='SPsessionStorage' style='display:none'>
<script type='text/javascript'>
document.write( sessionStorage +'<br />');
sessionStorage.JAY='周杰倫';
document.write( sessionStorage.JAY );
</script>
<p><a href='http://ant4js.blogspot.com/2009/02/storagerd.html'>跳至測試頁</a>,看看可不可以讀到。
</textarea><script type='text/javascript'>dumpSample('SPsessionStorage')</script>
<ul><li>上例,Firefox 成功;IE6, Safari, Chrome 失敗。</ul>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-9686869814710212322009-02-04T15:19:00.005+08:002009-02-05T07:27:55.072+08:00cookie<!--成員始--><div class=pty id='cookie'>cookie</div>
<p>讀取或設定用戶電腦的資訊片(cookie)。其語法是:
<p>document.cookie='key=值[;expires=日期;domain=網址;path=目錄;secure=布林值]';
<p>每一組資訊片的格式是 key=value。key 的字母大小寫不同。value 可以用 <a href='http://ant4js.blogspot.com/2008/12/encodeuri.html'>encodeURIComponent(), decodeURIComponent()</a> 編碼,尤其是中文需要用此。每一組資訊片之後可以選擇地接以下屬性值,屬性用”;”分開。瀏覽器會將兩組資訊片用”; ”分開。
<ol>
<li>expires=過期時間。沒有設過期時間,則資訊片會在關閉瀏覽器時自動失效。設了過期時間,資訊片在過期前都有效,即使關閉瀏覽器或關閉電腦都可以讀回資訊片。要消除一個資訊片,可將 expires 設為過去時間。設定的時間要符合 GMT 格式,可用 <a href='http://ant4js.blogspot.com/2008/12/dateto.html#toUTCString'>toUTCString()</a> 設定日期。
<li>path=檔案路徑。只限此檔案路徑及其子路徑,可以存取此資訊片。預設值為本網頁所在目錄。
<li>domain=網路領域。只限此網路領域及其子領域,可以存取此資訊片。預設值為本頁所在的網域。可設定的值為本頁的網域及其主網域。例如本頁為 www.blog.com 則其主網域為 blog.com。
<li>max-age=秒數:資訊片存活時間的秒數。限 Firefox 使用。
<li>secure:如果設為 true,則限用安全的通信規則(https)存取。
</ol>
<p>雖然資訊片的語法很像字串,但其作法不同;新的資訊片會加入資料結構,而不是取代舊的。每一個網頁可設定的資訊片有限,例如 50 個;超過時,舊的資訊片會被移除,以容納新的。
<p>此頁的範例都是在個人電腦測試,使用 javascript 設定資訊片與讀取資訊片;尤其是 domain, path 沒有詳細測試。如果你有架設網站,可由主機設定資訊片,使用前請多作測試。
<p>cookie 的安全性不夠理想,因此 PHP 語言發展 session 加強之。
<!--範例始--><textarea id='SPcookie' style='display:none'>
<script type='text/javascript'>
document.write( document.cookie +'<br />');
document.cookie='color=red';
document.cookie='width=120';
document.write( document.cookie.length
+'<br />'+ document.cookie);
</script>
</textarea><script type='text/javascript'>dumpSample('SPcookie')</script>
<ul><li>上面出現很多長串數字,這是部落格系統設定的資訊片。</ul>
<!--範例終-->
<p><b>可以改變資訊片的值</b>。
<!--範例始--><textarea id='SPsame' style='display:none'>
<script type='text/javascript'>
document.cookie='color=green';
document.write( document.cookie );
</script>
</textarea><script type='text/javascript'>dumpSample('SPsame')</script>
<!--範例終-->
<!--成員始--><div class=pty id='setCookie'>setCookie()</div>
<p>由於設定資訊片的過期時間有點複雜,這裡寫了一個簡單的函式,此函式會組織字串,並且存入資訊片。函式的參數 key, value, domain, path 為字串;expire 是整數,單位為秒,可為負值,會與現在時間相加。expire, domain, path 可不設;expire 設為 0,或 domain, path 設為空字串,其效果與不設相同。
<!--範例始--><textarea id='SPsetCookie' style='display:none'>
<script type='text/javascript'>
function setCookie(key, value, expire, domain, path)
{
var ck=key +'='+ encodeURIComponent(value);
if( expire )
{
var epr=new Date();
epr.setTime(epr.getTime()+ expire*1000 );
ck+=';expires='+ epr.toUTCString();
}
if( domain )
ck+=';domain='+ domain;
if( path )
ck+=';path='+ path;
document.cookie=ck;
}
setCookie('name', '蔡依林', 20);
document.write( document.cookie );
</script>
</textarea><script type='text/javascript'>dumpSample('SPsetCookie')</script>
<!--範例終-->
<!--成員始--><div class=pty id='getCookie'>getCookie()</div>
<p>讀取一個資訊片。參數是 key,資訊片的鍵。沒找到此鍵會傳回 false;找到時,傳回鍵值。
<!--範例始--><textarea id='SPgetCookie' style='display:none'>
<script type='text/javascript'>
function getCookie(key)
{
if( document.cookie.length==0 ) return false;
var i=document.cookie.search(key+'=');
if( i==-1 ) return false;
i+=key.length+1;
var j=document.cookie.indexOf(';', i);
if( j==-1 ) j=document.cookie.length;
return document.cookie.slice(i,j);
}
document.write(
decodeURIComponent( getCookie( 'name') ) );
</script>
</textarea><script type='text/javascript'>dumpSample('SPgetCookie')</script>
<!--範例終-->
<!--成員始--><div class=pty id='delCookie'>delCookie()</div>
<p>刪除一個資訊片。參數是 key,資訊片的鍵。
<!--範例始--><textarea id='SPdelCookie' style='display:none'>
<script type='text/javascript'>
function delCookie(key)
{
setCookie(key, '', -2000);
}
delCookie( 'name' );
document.write( getCookie('name') );
</script>
</textarea><script type='text/javascript'>dumpSample('SPdelCookie')</script>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-39755763088827584672009-02-03T08:08:00.006+08:002009-10-18T20:09:30.108+08:00RegExp 速查表<center class=sec> <a href='http://ant4js.blogspot.com/2009/01/regexpv1.html'>RegExp 一頁</a> | <a href='http://ant4js.blogspot.com/2009/01/regexpv2.html'>二頁</a> | <a href='http://ant4js.blogspot.com/2009/01/regexpv3.html'>三頁</a> | <a href='http://ant4js.blogspot.com/2009/01/regexpv4.html'>四頁</a> | <a href='http://ant4js.blogspot.com/2009/01/regexpv5.html'>五頁</a> | <a href='http://ant4js.blogspot.com/2009/01/regexppty.html'>特徵</a> | <a href='http://ant4js.blogspot.com/2009/01/regexpmth.html'>方法</a> | <a href='http://ant4js.blogspot.com/2009/02/regexplst.html'>速查表</a> </center><br />
<p>文法規則計算式( Regular Expression),用在字串的符合計算,可以作子字串的搜尋,替換。Regular Expression 過去都翻譯成 正規表示法 或正則表示法,先解釋一下為什麼我會翻譯成文法規則計算式。首先牽涉到語文規則的都稱為文法,而英文文法中有 regular verbs 與 irregular verbs,分別是規則動詞與不規則動詞。所以 regular 翻成文法規則為宜。其次,在電腦程式術語中 arithmetic expression 通常翻譯成 數學計算式 或計算式。其實電腦之中,就是利用數學計算來分析文法規則,所以 Regular Expression 可以翻譯成 文法規則計算式 或文法式。<br />
<br />
<style type='text/css'>
.reg {border-collapse:collapse;
line-height:120%;
width:96%;
}
.reg TD {border:solid green 1px}
</style> <!--成員始--><div class=pty style='background:#ddddff'>RegExp 的特別字符</div><p><table align=center class=reg><tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv1.html#backslash'> \ </a> <td>脫離字母。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv1.html#begin'> ^ </a> <td>文字行的開始位置。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv1.html#end'> $ </a> <td>文字行的尾端。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv1.html#star'> * </a> <td>符合發生 0 次或更多次。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv1.html#plus'> + </a> <td>符合發生 1 次或更多次。等於 {1,}。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv1.html#ques'> ? </a> <td>符合發生 0 次或 1次。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv2.html#dot'> . </a> <td>除了 \n \r \u2028 \u2029 的任一字母。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv2.html#capture'> (x) </a> <td>此名為存入括號。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv2.html#nocapture'> (?:x) </a> <td>計算符合 x,但是不存入結果陣列。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv2.html#after'> x(?=y) </a> <td>x 符合的條件要加上 x 之後必須接 y。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv2.html#noafter'> x(?!y) </a> <td>x 符合的條件要加上 x 之後不可接 y。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv2.html#or'> x|y </a> <td>符合 x 或 y 都可以。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv2.html#n'> {n} </a> <td>n 是正整數。符合正好發生 n 次。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv3.html#nmore'> {n,} </a> <td>n 是正整數。符合發生 n 次或更多次。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv3.html#nm'> {n,m} </a> <td>n, m 是正整數。符合發生至少 n 次,最多 m 次。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv3.html#set'> [xyz] </a> <td>字母集合。符合其中的字母。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv3.html#noset'> [^xyz] </a> <td>不屬於字母集合中的字母。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv3.html#bksp'> [\b] </a> <td>字碼,清除前一字。與下面的不同。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv3.html#wb'> \b </a> <td>字的邊界。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv3.html#nowb'> \B </a> <td>不是字的邊界。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv3.html#cx'> \cX </a> <td>控制字母,X 由 A 到 Z。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv4.html#d09'> \d </a> <td>數字,等於 [0-9]。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv4.html#no09'> \D </a> <td>拉丁字母中的非數字,等於 [^0-9]。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv4.html#form'> \f </a> <td>字碼,跳至下一頁。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv4.html#nline'> \n </a> <td>字碼,跳至新行。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv4.html#cr'> \r </a> <td>字碼,跳至行首。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv4.html#ws'> \s </a> <td>單一空白字元。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv4.html#nows'> \S </a> <td>單一非空白字元。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv4.html#tab'> \t </a> <td>字碼,tab。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv5.html#vf'> \v </a> <td>字碼,垂直跳行。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv5.html#ab_09'> \w </a> <td>英文大小寫字母,數字,底線”_”。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv5.html#noab09'> \W </a> <td>字母不屬於英文大小寫字母,數字,底線”_”。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv5.html#nsave'> \n </a> <td>n 是正整數,表第 n 個<a href='http://ant4js.blogspot.com/2009/01/regexpv1.html##capture'> 存入括號</a>。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv5.html#z0'> \0 </a> <td>空字元。其後不要接數字。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv5.html#xhh'> \xhh </a> <td>ASCII 碼,兩位 16 進位數。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpv5.html#uhhhh'> \uhhhh </a> <td>獨角碼,四位 16 進位數。 </table><p><!--成員始--><div class=pty style='background:#ddddff'>RegExp 的特徵</div><p>下述特徵必須與 RegExp 配合使用,不能用在物件實體。 <table align=center class=reg><tr><td><a href='http://ant4js.blogspot.com/2009/01/regexppty.html#prototype'>prototype</a> <td>可以增加物件的特徵與方法。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexppty.html#dollar'>$1 至 $9</a> <td>使用<a href='http://ant4js.blogspot.com/2009/01/regexpv2.html#capture'>存入括號</a>,可將符合的子字串存入陣列中,然後用特徵 $1 ~ $9 讀出。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexppty.html#length'>length</a> <td>存有參數的個數。 </table><p><!--成員始--><div class=pty style='background:#ddddff'>RegExp 物件實體的特徵</div><p><table align=center class=reg><tr><td><a href='http://ant4js.blogspot.com/2009/01/regexppty.html#constructor'>constructor</a> <td>存有產生物件實體的函式其位置。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexppty.html#global'>global</a> <td>如果字旗 g 有設,則為 true;否則為 false。唯讀。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexppty.html#ignoreCase'>ignoreCase</a> <td>如果字旗 i 有設,則為 true;否則為 false。唯讀。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexppty.html#lastIndex'>lastIndex</a> <td>程式師可指定符合計算的起始位置。符合計算後 lastIndex 會被設為符合子字串的下一個位置。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexppty.html#multiline'>multiline</a> <td>如果字旗 m 有設,則為 true;否則為 false。唯讀。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexppty.html#source'>source</a> <td>內存文法規則。唯讀。 </table><p><!--成員始--><div class=pty style='background:#ddddff'>RegExp 物件實體的方法</div><p><table align=center class=reg><tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpmth.html#exec'>exec()</a> <td>對母字串加以處理,尋找符合文法規則的子字串,結果存入陣列中。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpmth.html#test'>test()</a> <td>對母字串加以處理,尋找符合文法規則的子字串。<br />
<tr><td><a href='http://ant4js.blogspot.com/2009/01/regexpmth.html#toString'>toString()</a> <td>此法傳回物件實體的字串。 </table>ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-67011803037976913232009-02-02T17:42:00.003+08:002009-02-02T17:47:59.165+08:00SELECT 元素:方法<center class=sec>
<a href='http://ant4js.blogspot.com/2009/02/selectpty.html'>特徵</a> |
<a href='http://ant4js.blogspot.com/2009/02/selectmth.html'>方法</a>
</center>
<div id="MBRlist"></div>
<script type='text/javascript'>
var mbrs=[
'add',
'remove',
'Option'
];
drawMBR("MBRlist",mbrs, 4, 'PMtbl') ;
</script>
<!--成員始--><div class=pty style='background:#ddddff'>SELECT 元素物件的方法</div>
<p>此處只講 SELECT 元素物件特有的方法,其它方法請參考 <a href='http://ant4js.blogspot.com/2009/01/elementmth1.html'>element</a> 物件。
<!--成員始--><div class=pty id='add'>add()</div>
<p>增加選項。其語法是:
<p>SELECT元素物件.add( 新元素物件 [, 指標])
<p>新元素要用 <a href='http://ant4js.blogspot.com/2008/12/documentmthae.html#createElement'>createElement()</a> 產生。未設指標時,新元素會被加在尾端。
<p>
<!--成員始--><div class=pty id='remove'>remove()</div>
<p>移除指標所在的選項。其語法是:
<p>SELECT元素物件.remove( 指標 )
<!--範例始--><textarea id='SPadd' style='display:none'>
<select id='games' size=6
onchange='alert( this.options[ this.selectedIndex ].text )'>
<option>賽車遊戲
<option selected>射擊遊戲
<option>好玩遊戲
</select>
<script type='text/javascript'>
function addOption()
{
var os=document.getElementById('games');
var np = document.createElement("option");
os.options.add(np, 1);
np.innerHTML = "益智遊戲";
}
</script>
<p><a href='javascript:addOption()'>點此新增選項</a>
<p><a href='javascript:document.getElementById("games").remove(1)'>點此移除選項</a>
</textarea><script type='text/javascript'>dumpSample('SPadd')</script>
<!--範例終-->
<!--成員始--><div class=pty id='Option'>new Option()</div>
<p>產生新的 Option 物件。其語法是:
<p>新物件= new Option([text], [value], [defaultSelected], [selected])
<ol>
<li>text:是選項的字串。
<li>value:是選項的 value 屬性之字串。
<li>defaultSelected:設為 true 則為預設被選。內定為false。
<li>selected:設為 true 則被選擇。內定為false。
</ol>
<p><b>可以配合 add() 使用</b>,增加新的選項。
<!--範例始--><textarea id='SPOption' style='display:none'>
<select id='game2' size=6
onchange='alert( this.options[ this.selectedIndex ].text )'>
<option>益智遊戲
<option selected>武打遊戲
<option>小遊戲
</select>
<script type='text/javascript'>
function addOption2()
{
var os=document.getElementById('game2');
var np = new Option("障礙遊戲", '', false, true);
os.options.add(np);
}
</script>
<p><a href='javascript:addOption2()'>點此新增選項</a>
<p><a href='javascript:document.getElementById("game2").remove(1)'>點此移除選項</a>
</textarea><script type='text/javascript'>dumpSample('SPOption')</script>
<!--範例終-->
<p><b>可以直接用在 options 物件</b>,用來取代舊的選項,或加在尾端。
<!--範例始--><textarea id='SPOption3' style='display:none'>
<select id='body' size=6
onchange='alert( this.options[ this.selectedIndex ].text )'>
<option>頭
<option>手
<option selected>腳
</select>
<script type='text/javascript'>
function addOption3()
{
var os=document.getElementById('body');
var ol=os.length;
os.options[ os.length ]= new Option("心--新增");
alert( ol +' / '+ os.length );
}
function replaceOption3()
{
var os=document.getElementById('body');
os.options[ 1 ]= new Option("肺--取代");
}
</script>
<p><a href='javascript:addOption3()'>點此新增選項</a>
<p><a href='javascript:replaceOption3()'>點此替換選項</a>
</textarea><script type='text/javascript'>dumpSample('SPOption3')</script>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-66624074096825847992009-02-02T17:22:00.004+08:002009-02-02T17:45:50.948+08:00操控 SELECT 元素<center class=sec>
<a href='http://ant4js.blogspot.com/2009/02/selectpty.html'>特徵</a> |
<a href='http://ant4js.blogspot.com/2009/02/selectmth.html'>方法</a>
</center>
<div id="MBRlist"></div>
<script type='text/javascript'>
var mbrs=[
'disabled',
'length',
'options',
'selectedIndex',
'size',
'tabIndex',
'type',
'value'
];
drawMBR("MBRlist",mbrs, 4, 'PMtbl') ;
</script>
<!--成員始--><div class=pty style='background:#ddddff'>SELECT 元素物件的特徵</div>
<p>要請注意,javascrip 中並無 SELECT 物件,此處講的是 <a href='http://ant4html.blogspot.com/2008/11/select.html'>SELECT</a> 元素的物件。此處只列出其特有的成員,其它成員請參考 <a href='http://ant4js.blogspot.com/2009/01/elementpty1.html'>element</a> 物件。
<p>
<!--成員始--><div class=pty id='disabled'>disabled</div>
<p>存放 true,則取消元素的功能:不能聚焦,不能用 TAB 選取,不能上傳;預設為 false,元素可使用。
<!--範例始--><textarea id='SPdisabled' style='display:none'>
<form name='sel'>
<select name='stars' id='stars' size=8
multiple style='width:180px'
onchange='alert( this.selectedIndex )'>
<optgroup label='男歌手'>
<option>蕭敬騰
<option>吳宗憲
</optgroup>
<optgroup label='女歌手'>
<option selected value='Jolin'>蔡依林
<option disabled>曾沛慈
</optgroup>
</select>
</form>
<script type='text/javascript'>
document.write( document.sel.stars.disabled );
</script>
</textarea><script type='text/javascript'>dumpSample('SPdisabled')</script>
<!--範例終-->
<!--成員始--><div class=pty id='length'>length</div>
<p>存放有幾個 <a href='http://ant4html.blogspot.com/2008/11/select.html'>OPTION</a> 元素。
<!--範例始--><textarea id='SPlength' style='display:none'>
<script type='text/javascript'>
document.write( document.sel.stars.length );
</script>
</textarea><script type='text/javascript'>dumpSample('SPlength')</script>
<!--範例終-->
<!--成員始--><div class=pty id='options'>options</div>
<p>存放 OPTION 元素物件之清單。
<!--範例始--><textarea id='SPoptions' style='display:none'>
<script type='text/javascript'>
//var o=document.forms[0].elements[0].options;
var o=document.getElementById('stars');
for( var i=0; i < o.length; i++)
document.write( o[i].tagName
+' : '+ o[i].selected
+' : '+ o[i].text
+' : '+ o[i].value +'<br />');
</script>
</textarea><script type='text/javascript'>dumpSample('SPoptions')</script>
<ul><li>在 Firefox, Safari, Chrome,如果 OPTION 沒設 VALUE 時,o[i].value 會存放 OPTION 的內容;但在 IE6 則放空字串。
<li>上例原使用 forms[0].elements[0],在個人電腦測試成功,但是移到部落格無法用。</ul>
<!--範例終-->
<!--成員始--><div class=pty id='selectedIndex'>selectedIndex</div>
<p>存放被選擇的項目之指標。
<!--範例始--><textarea id='SPsi' style='display:none'>
<script type='text/javascript'>
var o=document.getElementById('stars');
document.write( o.options[ o.selectedIndex ].innerHTML );
</script>
</textarea><script type='text/javascript'>dumpSample('SPsi')</script>
<!--範例終-->
<!--成員始--><div class=pty id='size'>size</div>
<p>可見的橫欄數,參見 <a href='http://ant4html.blogspot.com/2008/11/select.html#SIZE'>SIZE</a> 元素。
<!--範例始--><textarea id='SPsize' style='display:none'>
<script type='text/javascript'>
document.write( document.sel.stars.size );
</script>
</textarea><script type='text/javascript'>dumpSample('SPsize')</script>
<!--範例終-->
<!--成員始--><div class=pty id='tabIndex'>tabIndex</div>
<p>存放 TAB 順序 <a href='http://ant4html.blogspot.com/2008/11/select.html#TABINDEX'>TABINDEX</a> 元素。
<!--範例始--><textarea id='SPtabIndex' style='display:none'>
<script type='text/javascript'>
document.write( document.sel.stars.tabIndex );
</script>
</textarea><script type='text/javascript'>dumpSample('SPtabIndex')</script>
<!--範例終-->
<!--成員始--><div class=pty id='type'>type</div>
<p>SELECT 元素是單選式(select-one)還是多選式(select-multiple)。 參見 <a href='http://ant4html.blogspot.com/2008/11/select.html#MULTIPLE'>MULTIPLE</a>。
<!--範例始--><textarea id='SPtype' style='display:none'>
<script type='text/javascript'>
var o=document.getElementById('stars');
document.write( o.type);
</script>
</textarea><script type='text/javascript'>dumpSample('SPtype')</script>
<!--範例終-->
<!--成員始--><div class=pty id='value'>value</div>
<p>存放被選擇的項目。
<!--範例始--><textarea id='SPvalue' style='display:none'>
<script type='text/javascript'>
var o=document.getElementById('stars');
document.write( o.value );
</script>
</textarea><script type='text/javascript'>dumpSample('SPvalue')</script>
<ul><li>在 Firefox, Safari, Chrome,如果被選擇的 OPTION 沒設 VALUE 時,value 會存放 OPTION 的內容;但在 IE6 則放空字串。</ul>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-37260503278666152162009-02-02T09:14:00.003+08:002009-02-02T10:34:24.410+08:00用物件寫程式<center class=sec>
<a href='http://ant4js.blogspot.com/2009/02/object1.html'>用物件寫程式</a> |
<a href='http://ant4js.blogspot.com/2009/02/objectacc.html'>取用成員</a> |
<a href='http://ant4js.blogspot.com/2009/02/inheritance.html'>繼承</a> |
<a href='http://ant4js.blogspot.com/2009/02/objectset.html'>set, get</a>
</center>
<center class=PMtbl>
<a href='#Object'>new Object()</a> |
<a href='#this'>this</a> |
<a href='#this'>new</a> |
<a href='#this'>delete</a> |
<a href='#literal'>{ }</a> |
<a href='#Constructor'>物件製造器</a> |
<a href='#prototype'>prototype</a>
</center>
<p>一個物件包括了數個特徵(property)及數個方法(method)。這種結構化的資料組成,更符合真實世界的物體。此處介紹建立物件的方法及如何使用物件。</p>
<div class=pty id='Object'>new Object()</div>
<p>使用 new Object() 建立客製物件實體。
<!--範例始--><textarea id='SPobj' style='display:none'>
<script type='text/javascript'>
bike=new Object();
bike.maker='光陽';
bike.year=2007;
bike.color='紅色';
bike.draw=function () { document.write(this.maker+' '+this.year+' '+this.color); }
bike.draw();
</script>
</textarea><script type='text/javascript'>dumpSample('SPobj')</script>
<!--範例終-->
<div class=pty id='this'>this, new, delete</div>
<p>this 指正用的物件實體。用在方法中,指呼叫方法的物件實體。
<p>new 結合物件製造器,建立物件的實體,也就是配給記憶體。
<p>delete 可刪除已宣告的變數,物件實體,物件特徵,陣列的項目。delete 可以釋放沒用到的記憶體。
<!--範例始--><textarea id='SPdel' style='display:none'>
<script type='text/javascript'>
delete bike.year;
bike.draw();
</script>
</textarea><script type='text/javascript'>dumpSample('SPdel')</script>
<!--範例終-->
<div class=pty id='literal'>{ }</div>
<p>使用物件符號建立物件實體。物件用 { } 包夾。成員的名稱與值用”:”分開。不同的成員用”,”分隔。
<!--範例始--><textarea id='SPnota' style='display:none'>
<script type='text/javascript'>
store={
name:'老張麵店',
address:'中壢市',
show:function() { document.write(this.name+'新開張,位於'+this.address); }
}
store.show();
</script>
</textarea><script type='text/javascript'>dumpSample('SPnota')</script>
<!--範例終-->
<div class=pty id='Constructor'>物件製造器</div>
<p>使用製造器(Constructor)建立物件實體。先用 function 建立一個物件製造器,包括物件型態名稱,特徵,方法。然後用 new 處理器製造物件的實體,也就是配給資料儲存的記憶體,並且設定初值。物件製造器可以依據規劃的藍圖,建立多個物件實體,這比 new Object() 與物件符號{}兩個方法好,所以建議多採用物件製造器。
<!--範例始--><textarea id='SPcons' style='display:none'>
<script type='text/javascript'>
function student(name,gender,department)
{
this.name=name;
this.gender=gender;
this.department=department;
this.list=function ()
{ document.write('<br />'+this.name+
' / '+this.gender+' / '+this.department);
}
}
Jolin=new student('蔡依林', '女', '英語系');
Jay=new student('周杰倫', '男', '音樂系');
Jolin.list();
Jay.list();
</script>
</textarea><script type='text/javascript'>dumpSample('SPcons')</script>
<ul>上面的範例中,用 function 定義了一個物件製造器,其名稱為 student。然後用 new 製造兩個物件實體 Jolin 及 Jay。</ul>
<!--範例終-->
<p><b>所有的物件都會繼承物件 <a href='http://ant4js.blogspot.com/2008/12/functionpm.html'>Function 的特徵與方法</a></b>。
<!--範例始--><textarea id='SPconsFunc' style='display:none'>
<script type='text/javascript'>
document.write( Jolin.constructor +'<br />');
document.write( student.length +'<br />');
document.write( Jay.toString() +'<br />');
document.write( store.valueOf() );
</script>
</textarea><script type='text/javascript'>dumpSample('SPconsFunc')</script>
<!--範例終-->
<p><b>所有的物件都會繼承物件 <a href='http://ant4js.blogspot.com/2008/12/object_15.html'>Object 的方法</a>。</b>
<!--範例始--><textarea id='SPconsObj' style='display:none'>
<script type='text/javascript'>
document.write( student.prototype.isPrototypeOf(Jolin) +'<br />');
document.write( Object.prototype.isPrototypeOf(store) +'<br />');
document.write( bike.hasOwnProperty('maker') );
</script>
</textarea><script type='text/javascript'>dumpSample('SPconsObj')</script>
<!--範例終-->
<p><b>可以動態增加物件實體的特徵與方法。</b>下面的例子,為物件 Jolin 增加了一個方法 hello()。這個方法 Jay 不能用。</p>
<!--範例始--><textarea id='SPjolin' style='display:none'>
<script type='text/javascript'>
Jolin.hello=function () { document.write('你們好!我是 Jolin。'); };
Jolin.hello();
</script>
</textarea><script type='text/javascript'>dumpSample('SPjolin')</script>
<!--範例終-->
<div class=pty id='prototype'>prototype</div>
<p>使用 prototype 增加物件型態的特徵與方法。使用 prototype 的最大好處是,新增加的特徵與方法,也可以用在已經實體化的物件。
<!--範例始--><textarea id='SPproto' style='display:none'>
<script type='text/javascript'>
student.prototype.age=0;
student.prototype.changeAge=function (age) {this.age=age; }
student.prototype.listAll=function () { document.write('<br />'+this.name+' / '+this.gender+' / '+this.age+'歲 / '+this.department); }
Jolin.changeAge(27);
Jay.changeAge(28);
Jolin.listAll();
Jay.listAll();
</script>
</textarea><script type='text/javascript'>dumpSample('SPproto')</script>
<ul>上例中,用 prototype 為物件型態 student 新增加一個特徵 age,兩個方法 changeAge 與 listAll。</ul>
<!--範例終-->
<p>prototype 也可以用在系統預設的物件型態,例如 Array, Date, String 等等。</p>ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-73949240768377943232009-02-02T09:08:00.004+08:002009-02-02T09:22:14.796+08:00取用物件成員<center class=sec>
<a href='http://ant4js.blogspot.com/2009/02/object1.html'>用物件寫程式</a> |
<a href='http://ant4js.blogspot.com/2009/02/objectacc.html'>取用成員</a> |
<a href='http://ant4js.blogspot.com/2009/02/inheritance.html'>繼承</a> |
<a href='http://ant4js.blogspot.com/2009/02/objectset.html'>set, get</a>
</center>
<center class=PMtbl>
<a href='#bracket'>. [ ]</a> |
<a href='#in'>in</a> |
<a href='#instanceof'>instanceof</a> |
<a href='#foreach'>for each(in)</a> |
<a href='#forin'>for(in)</a> |
<a href='#with'>with</a>
</center>
<div class=pty id='bracket'> . [ ]</div>
<p>取用物件成員的方法,可用 . 或 []。使用 [] 的好處是,成員名稱是用字串來表達,而在程序執行中,字串可以變更。
<!--範例始--><textarea id='SPmbr' style='display:none'>
<script type='text/javascript'>
function human(name, gender, age)
{
this.name=name;
this.gender=gender;
this.age=age;
this.get=function () { return this.name+' / '+this.gender+' / '+this.age+'歲';}
}
function teacher(name, gender, age, department)
{
this.person=human;
this.person(name, gender, age);
this.department=department;
this.list=print;
}
function print()
{
document.write( this.get()+' / '+this.department );
}
Ma=new teacher('馬友友','男',55,'音樂系');
document.write(Ma.name+' / '+Ma['department'])
</script>
</textarea><script type='text/javascript'>dumpSample('SPmbr')</script>
<!--範例終-->
<div class=pty id='in'>in</div>
<p>in:用來檢查一個物件實體或物件型態中,是否含有指定的成員。語法是:
<p>成員 in 物件
<p>成員可用字串指定成員的名稱,或用整數的陣列指標;如果成員存在物件中,得到 true,否則為 false。
<!--範例始--><textarea id='SPin' style='display:none'>
<script type='text/javascript'>
document.write( 'list' in Ma );
</script>
</textarea><script type='text/javascript'>dumpSample('SPin')</script>
<!--範例終-->
<div class=pty id='instanceof'>instanceof</div>
<p>用來檢查一個物件實體是否是屬於指定的物件型態,肯定時為 true,否則為 false。其語法為:
<p>實體名稱 instanceof 型態名稱
<!--範例始--><textarea id='SPinst' style='display:none'>
<script type='text/javascript'>
document.write( Ma instanceof teacher );
</script>
</textarea><script type='text/javascript'>dumpSample('SPinst')</script>
<!--範例終-->
<div class=pty id='foreach'>for each( in )</div>
<p>將物件成員的值,一一取用。for each( in ) 將物件成員的值,一次取出一個,可在迴路中使用;到最後一個成員後,迴路結束。
<p>for each( in ) 只能在 Firefox 使用;IE, Safari, Chrome 都沒有支援。
<!--範例始--><textarea id='SPeach' style='display:none'>
<ol>
<script type='text/javascript'>
for each( val in Ma ) document.write('<li>'+val);
</script>
</ol>
</textarea><script type='text/javascript'>dumpSample('SPeach')</script>
<!--範例終-->
<p>
<div class=pty id='forin'>for( in )</div>
<p>將物件的成員名稱,一一取用。這與上述的 for each( in ) 取出成員的值,有所不同。
<!--範例始--><textarea id='SPforin' style='display:none'>
<ol>
<script type='text/javascript'>
for( key in Ma ) document.write('<li>'+key+' : '+Ma[key]);
</script>
</ol>
</textarea><script type='text/javascript'>dumpSample('SPforin')</script>
<!--範例終-->
<p>
<div class=pty id='with'>with</div>
<p>可用來宣告常用的物件實體,可以縮短使用物件成員的字串。通常用在使用物件頻繁的區塊。使用時要注意變數名稱與成員名稱不要相同。
<!--範例始--><textarea id='SPwith' style='display:none'>
<script type='text/javascript'>
with( Ma ) document.write( name +' 任職 '+ department );
</script>
</textarea><script type='text/javascript'>dumpSample('SPwith')</script>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-5700920863146876802009-02-02T08:37:00.005+08:002009-02-02T10:37:57.809+08:00繼承<center class=sec>
<a href='http://ant4js.blogspot.com/2009/02/object1.html'>用物件寫程式</a> |
<a href='http://ant4js.blogspot.com/2009/02/objectacc.html'>取用成員</a> |
<a href='http://ant4js.blogspot.com/2009/02/inheritance.html'>繼承</a> |
<a href='http://ant4js.blogspot.com/2009/02/objectset.html'>set, get</a>
</center>
<p>在這個世界上,有很多物體都有基本的特徵與功能,然後再加上各自特殊的特徵與功能。例如下面的範例中,每一個人類都有基本的特徵,例如性別,年齡;然後人類又可以分類成教師,工人,音樂家等等。繼承是在規劃物件製造器時,建立物件型態的繼承性,此為靜態的繼承;如果要在物件產生實體後,增加特徵或方法,就要用 <a href='http://ant4js.blogspot.com/2009/02/object1.html#prototype'>prototype</a>。
<!--範例始--><textarea id='SPinher' style='display:none'>
<script type='text/javascript'>
function human(name, gender, age)
{
this.name=name;
this.gender=gender;
this.age=age;
this.get=function () { return this.name+' / '+this.gender+' / '+this.age+'歲';}
}
function teacher(name, gender, age, department)
{
this.person=human;
this.person(name, gender, age);
this.department=department;
this.list=print;
}
function print()
{
document.write( this.get()+' / '+this.department );
}
Ma=new teacher('馬英九','男',55,'法律系');
Ma.list();
</script>
</textarea><script type='text/javascript'>dumpSample('SPinher')</script>
<ul><li>上例中,物件型態 teacher 繼承了物件型態 human;其指令是 this.person=human;。</ul><br />
<!--範例終-->
<p id='apply'><b>使用繼承自物件 <a href='http://ant4js.blogspot.com/2008/12/functionpm.html'>Function</a> 的方法 apply() 繼承物件:</b>其語法是:
<p>父物件.apply(參數0 [, 參數陣列]);</p>
<p>參數0 指定函式中 this 代表的物件。如果參數0 是 null 或 undefined,則 this 代表全域物件(global object)。參數0 也可以用基本型態資料,此時會轉換成相關的物件,例如 String, Number, Boolean。參數陣列是物件的參數。
<p>apply() 很類似下述的 call(),差別在 apply() 用陣列傳遞物件的參數,call() 則用名稱組。apply() 也可以用物件 <a href='http://ant4js.blogspot.com/2008/12/function.html#arguments'>arguments</a> 傳遞變動長度的參數組。
<!--範例始--><textarea id='SPapply' style='display:none'>
<script type='text/javascript'>
function worker(name, gender, age, skill)
{
this.skill=skill;
human.apply(this, arguments);
this.list=function () {
document.write( this.name+' : '+this.gender+' : '+this.age+' : '+this.skill);}
}
var Yun=new worker('袁師傅','男',50,'水電');
Yun.list();
</script>
</textarea><script type='text/javascript'>dumpSample('SPapply')</script>
<!--範例終-->
<p id='call'><b>使用繼承自物件 <a href='http://ant4js.blogspot.com/2008/12/functionpm.html'>Function</a> 的方法 call() 繼承物件:</b>其語法是:
<p>父物件.call(參數0 [, 參數1[, 參數2[, ...]]]);</p>
<p>參數0 指定函式中 this 代表的物件。如果參數0 是 null 或 undefined,則 this 代表全域物件。參數0 也可以用基本型態資料,此時會轉換成相關的物件,例如 String, Number, Boolean。參數1, 參數2 是物件的參數。
<!--範例始--><textarea id='SPcall' style='display:none'>
<script type='text/javascript'>
function musician(name, gender, age, instrument)
{
this.instrument=instrument;
human.call(this, name, gender, age);
this.list=function () {
document.write( this.name+' : '+this.gender+' : '+this.age+' : '+this.instrument);}
}
var Chen=new musician('陳美','女',30,'小提琴');
Chen.list();
</script>
</textarea><script type='text/javascript'>dumpSample('SPcall')</script>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-47588354851083390512009-02-02T08:11:00.005+08:002009-02-03T15:22:57.399+08:00set, get<center class=sec>
<a href='http://ant4js.blogspot.com/2009/02/object1.html'>用物件寫程式</a> |
<a href='http://ant4js.blogspot.com/2009/02/objectacc.html'>取用成員</a> |
<a href='http://ant4js.blogspot.com/2009/02/inheritance.html'>繼承</a> |
<a href='http://ant4js.blogspot.com/2009/02/objectset.html'>set, get</a>
</center>
<center class=PMtbl>
<a href='#get'>get</a> |
<a href='#set'>set</a> |
<a href='#defineGetter'>__defineGetter__()</a> |
<a href='#defineSetter'>__defineSetter__()</a> |
<a href='#lookupGetter'>__lookupGetter__()</a> |
<a href='#lookupSetter'>__lookupSetter__()</a>
</center>
<p>此段講的設值器(setter)與取值器(getter),IE 沒有支援;Firefox, Safari, Chrome 可以正確執行。IE8 開始有支援 __defineGetter__(), __defineSetter__(), __lookupGetter__, __lookupSetter__。IE8 未測試,下次補測。
<div class=pty id='get'>get</div>
<p>在物件中,宣告一個特徵與函式的連結,讀取此特徵時,會呼用該函式。其語法是:
<p> get 特徵名 [函式名] () { 指令集 }
<p>函式沒有參數。可選擇性的設函式名。在 Firefox 可以設函式名,但是 Safari, Chrome 會導致失敗,所以不能設函式名。建議不設。
<!--範例始--><textarea id='SPget' style='display:none'>
<script type='text/javascript'>
var Jolin = {
name:'蔡依林',
age:27,
get info () { return this.name +' / '+ this.age }
}
document.write( Jolin.info );
</script>
</textarea><script type='text/javascript'>dumpSample('SPget')</script>
<ul><li>請注意:使用時,不要加函式的括號,例如 Jolin.info(),會導致錯誤。
<li>筆者曾嘗試將 get 用在 <a href='http://ant4js.blogspot.com/2009/02/object1.html#Constructor'>物件製造器</a>,但沒有成功。</ul>
<!--範例終-->
<div class=pty id='set'>set</div>
<p>在物件中,宣告一個特徵與函式的連結,設定此特徵時,會呼用該函式。其語法是:
<p> set 特徵名 [函式名] ( 值 ) { 指令集 }
<p>可選擇性的設函式名。在 Firefox 可以設函式名,但是 Safari, Chrome 會導致失敗,所以不能設函式名。建議不設。
<p>函式只能有一個參數。在設定特徵時,等號右邊的值會傳給參數。
<p>下例是華氏與攝氏溫度的轉換。
<!--範例始--><textarea id='SPset' style='display:none'>
<script type='text/javascript'>
var Temperature = {
Celsius:0,
Fahrenheit:32,
set F ( deg )
{
this.Celsius=(deg-32)*5/9;
this.Fahrenheit=deg;
},
get info () {return this.Fahrenheit +' F = '+ this.Celsius +' C';}
}
Temperature.F=41;
document.write( Temperature.info );
</script>
</textarea><script type='text/javascript'>dumpSample('SPset')</script>
<!--範例終-->
<div class=pty id='defineGetter'>__defineGetter__()</div>
<p>宣告取值器。其語法是:
<p>物件.__defineGetter__( 特徵名字串, 函式 )
<!--範例始--><textarea id='SPdefineGetter' style='display:none'>
<script type='text/javascript'>
function Game(name, price)
{
this.name=name;
this.price=price;
this.__defineGetter__('info',
function () { return this.name +' / '+ this.price +'元' } );
//get info () { return this.name +' / '+ this.price +'元' } ;
}
var gun=new Game('槍戰遊戲', 100);
document.write( gun.info );
</script>
</textarea><script type='text/javascript'>dumpSample('SPdefineGetter')</script>
<ul><li>筆者嘗試將 get 用在 <a href='http://ant4js.blogspot.com/2009/02/object1.html#Constructor'>物件製造器</a>,但沒有成功。</ul>
<!--範例終-->
<div class=pty id='defineSetter'>__defineSetter__()</div>
<p>宣告設值器。其語法是:
<p>物件.__defineSetter__( 特徵名字串, 函式 )
<p>下面的範例,動態的增加已存在的物件實體之設值器。
<!--範例始--><textarea id='SPdefineSetter' style='display:none'>
<script type='text/javascript'>
function ces( deg )
{
this.Celsius=deg;
this.Fahrenheit=deg*9/5+32;
}
Temperature.__defineSetter__('C', ces );
Temperature.C=10;
document.write( Temperature.info );
</script>
</textarea><script type='text/javascript'>dumpSample('SPdefineSetter')</script>
<!--範例終-->
<p><b>也可以接在 <a href='http://ant4js.blogspot.com/2009/02/object1.html#prototype'>prototype</a> 後使用</b>。如此可以增加物件型態及所有物件實體的取值器與設值器。
<!--範例始--><textarea id='SPprototype' style='display:none'>
<script type='text/javascript'>
Game.prototype.__defineGetter__('USD', function ( ) { return this.price/32;} );
var bike=new Game('賽車遊戲', 128);
document.write( gun.USD
+'<br />'+ bike.USD );
</script>
</textarea><script type='text/javascript'>dumpSample('SPprototype')</script>
<!--範例終-->
<div class=pty id='lookupGetter'>__lookupGetter__()</div>
<p>傳回取值器的函式。其語法是:
<p>物件實體.__lookupGetter__( 取值器字串 )
<p>請勿將設值器用在此。
<!--範例始--><textarea id='SPlG' style='display:none'>
<script type='text/javascript'>
document.write( Jolin.__lookupGetter__('info') );
</script>
</textarea><script type='text/javascript'>dumpSample('SPlG')</script>
<!--範例終-->
<div class=pty id='lookupSetter'>__lookupSetter__()</div>
<p>傳回設值器的函式。其語法是:
<p>物件實體.__lookupSetter__( 設值器字串 )
<p>請勿將取值器用在此。
<!--範例始--><textarea id='SPlS' style='display:none'>
<script type='text/javascript'>
document.write( Temperature.__lookupSetter__('F') );
</script>
</textarea><script type='text/javascript'>dumpSample('SPlS')</script>
<!--範例終-->
<div class=pty id='delete'>delete</div>
<p>可以用 <a href='http://ant4js.blogspot.com/2009/02/object1.html#this'>delete</a> 刪除設值器與取值器。
<!--範例始--><textarea id='SPdelete' style='display:none'>
<script type='text/javascript'>
delete Temperature.info;
document.write( Temperature.info );
</script>
</textarea><script type='text/javascript'>dumpSample('SPdelete')</script>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-27440356385248151042009-02-01T11:08:00.004+08:002009-02-03T16:05:07.540+08:00音樂點播機<p>此練習使用 <a href=''>EMBED</a> 元素,及 javascrip 作一個音樂點播器。
<ol>範例解說:
<li>先將樂曲放在 <a href='http://ant4js.blogspot.com/2008/12/array.html'>陣列</a> 中,包括曲名與網址。
<li>用 javascript 讀取上述陣列,組織一個 <a href='http://ant4html.blogspot.com/2008/11/table.html'>TABLE</a>,可以顯示曲號與曲名,並且可以點選。
<li>使用 <a href='http://ant4css.blogspot.com/'>風格表</a> 設定 TABLE 的顯示特徵。
</ol>
<!--範例始--><textarea id='SPsize' style='display:none'>
<style type='text/css'>
#mscDiv TABLE {border-collapse:collapse;
font-size:14px;
}
#mscDiv TD {border:solid 1px green;
text-align:right;
min-width:16px;
}
</style>
<div id='music'>
<embed width=180 height=20 autostart=false
src="bell.wav"></embed>
</div>
<div id='mscDiv'></div>
<script type='text/javascript'>
var mscList=[
/*********
['卡農(Canon)', 'http://www.nknu.edu.tw/~chin/aoimg/CANON1.mid'],
['華爾茲舞曲', 'http://www2.japs.tp.edu.tw/webpic/%E5%8F%A4%E5%85%B8%E9%9F%B3%E6%A8%82/danube.mid'],
['春之頌', 'http://www2.japs.tp.edu.tw/webpic/%E5%8F%A4%E5%85%B8%E9%9F%B3%E6%A8%82/spring.mid'],
['莫札特第5號鋼琴協奏曲第一樂章', 'http://www.nknu.edu.tw/~chin/aoimg/KV175A.mid'],
['莫札特第5號鋼琴協奏曲第三樂章', 'http://www.nknu.edu.tw/~chin/aoimg/KV175C.mid'],
['莫札特土耳其進行曲', 'http://www.nknu.edu.tw/~chin/aoimg/KV331.mid'],
['匈牙利舞曲2', 'http://sql.jaes.tpc.edu.tw/javaroom/midi/alas/Cl/d5.mid'],
['蕭邦的別離曲', 'http://sql.jaes.tpc.edu.tw/javaroom/midi/alas/Cl/d4.mid'],
['天鵝湖', 'http://sql.jaes.tpc.edu.tw/javaroom/midi/alas/Cl/d13.mid'],
['貝多芬第九號交嚮曲', 'http://sql.jaes.tpc.edu.tw/javaroom/midi/alas/Cl/ac3cl_26.mid'],
['第五交嚮樂第一樂章.', 'http://sql.jaes.tpc.edu.tw/javaroom/midi/alas/Cl/ac3cl_19.mid'],
['第五交嚮樂第二樂章.', 'http://sql.jaes.tpc.edu.tw/javaroom/midi/alas/Cl/ac3cl_20.mid'],
['第五交嚮樂第三樂章.', 'http://sql.jaes.tpc.edu.tw/javaroom/midi/alas/Cl/ac3cl_21.mid'],
********/
['', ''],
['', '']
];
function setMscList()
{
var lo=document.getElementById('mscDiv');
var s='<p><table>';
for( var i=0; i < mscList.length; i++)
{
if(mscList[i][0] == '') continue;
var j=i%9;
if( j == 0 ) s+='<tr>';
s+='<td title="' +mscList[i][0]+
'" onclick="chgMusic(' +i+ ')">' +(i+1);
}
for( j++ ; j < 9; j++) s+='<td>';
s+='</table>';
lo.innerHTML=s;
}
function chgMusic( n )
{
var mo=document.getElementById('music');
var s='<embed width=180 height=20 autostart=true src="'
+mscList[n][1]+ '"></embed>';
mo.innerHTML=s;
//embed物件.src=mscList[n][1];
}
setMscList();
</script>
</textarea><script type='text/javascript'>dumpSample('SPsize')</script>
<ul><li>上例原本使用 embed物件.src=mscList[n][1] 來達成點曲的功能,可是此法只有 Firefox 可以執行;IE6, Safari, Chrome 都失敗。改用新的方法後,所有瀏覽器都可以成功執行。
<li>上例在個人電腦測試成功,此處考量著作權,所以不能點選播放,請自行用個人電腦測試。</ul>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.comtag:blogger.com,1999:blog-2728793451656953128.post-21863084304530240062009-01-30T14:48:00.001+08:002009-01-30T14:51:41.684+08:00讀取圖片的寬與高<p>javascript 必須在圖片展現之後,才能讀取圖片的寬與高。
<ol>範例解說:
<li>使用 <a href='http://ant4js.blogspot.com/2008/12/documentmthfz.html#getElementById'>getElementById</a> 取得圖片的物件。
<li>由圖片物件可以讀取寬(o.width)與高(o.height),參見 <a href='http://ant4html.blogspot.com/2008/11/img.html'>IMG</a>。
<li>最後設定 <a href='http://ant4js.blogspot.com/2009/01/elementpty5.html#style'>style</a> 物件;將 <a href='http://ant4css.blogspot.com/2008/11/display.html'>display</a> 設為 none;這樣圖片就會隱藏起來。
</ol>
<!--範例始--><textarea id='SPsize' style='display:none'>
<img id='pic1'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpYA549yz9MS8WE3TorQMGpoPgrqOUQYQzr0UHO5GnBgWzJjbXbZ-07pqxAUoNnsZMMHDidRLuHtdnAO9p3Iy26qtMYxQiyOqnPRzWKQfswwUOSPvfJ9sz1ideHxDOcjgbBM32jfo6ixI/s200/shape.jpg' />
<script type='text/javascript'>
var o=document.getElementById('pic1');
document.write( '寬:'+ o.width +' / 高:'+ o.height );
o.style.display='none';
</script>
</textarea><script type='text/javascript'>dumpSample('SPsize')</script>
<!--範例終-->ant2legshttp://www.blogger.com/profile/02447321881005913828noreply@blogger.com