返回列表 上一主題 發帖

[教學] (教學第7篇)JavaScript 陣列

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-25 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
1# 跳轉到 » 倒序看帖
打印
tT
發表於 2010-5-10 00:22 | 只看該作者

[教學] (教學第7篇)JavaScript 陣列

陣列(Array)
陣列是變數之王！此話怎講？因為單純的變數一次只能存取一筆資料，而陣列卻可以存取多筆資料！簡言之：陣列是一群變數的集合。
如果我們有3筆不同的資料要利用單純的變數來存放，則我們必須在程式撰寫中使用3個變數來分別存放資料：
  1. X=”星期一”;
  2. Y=”星期二”;
  3. Z=”星期三”;
複製代碼
但我們若使用JavaScript所提供的Array()陣列物件，則可同時將上例中相同的三筆資料存放到陣列變數test中：
  1. test= new Array("星期一","星期二","星期三");
複製代碼
陣列的使用是必須new建構子建立出一個新的陣列變數方能使用！
建立陣列變數
  1. 陣列變數名 = new Array();
複製代碼
請注意：上列格式中Array()物件的「A」字母是大寫。

陣列的存取
我們建立一個變數陣列之後，可以將逐筆資料存入陣列中，但是必須指定陣列元素的『註標』，也就是說陣列變數內的每一筆資料就是一個陣列元素，要存取這些陣列元素內的資料，必須指定陣列元素的『編號』！其方法就是在陣列變數後方加上”[陣列註標]”！
  1. test[3] = “星期四”;
複製代碼
或者：
  1. test[0]="xxx";
  2. test[1]="yyy";
  3. test[2]=test[0]+test[1] ;//test[2]資料為’xxxyyy’
複製代碼
我們可以在陣列變數建立後再將逐筆資料存入陣列中：
  1. test = new Array();
  2. test[0]="xxx";
  3. test[1]="yyy";
複製代碼
也可以將陣列變數內的資料在變數陣列建立時就將資料直接存放進去，其格式如下：
建立陣列變數
  1. 陣列變數名 = new Array(資料1,資料2,…)
複製代碼
例如：
  1. test= new Array("星期一","星期二","星期三");
複製代碼
當我們建立一個變數陣列之後，這個變數陣列的內容，是可以一次全部輸出，在資料項之間將會有「，」逗號隔開：
  1. <BODY>
  2. test陣列內容：
  3. <Script LANGUAGE="JavaScript">
  4. test= new Array();
  5. test[0]="星期日";
  6. test[1]="星期一";
  7. test[2]=test[0]+test[1];
  8. document.write(test);
  9. </Script>
  10. </BODY>
複製代碼


實作學習:簡易月曆
現在的您已經具備相當撰寫JavaScript的功力了呦！現在我們就利用HTML標籤加上我們目前所學會的陣列變數、判斷敘述、日期物件來撰寫一個常在網路上看到的簡易月曆吧！
  1. <HTML>
  2. <HEAD>
  3. <TITLE>簡易月曆</TITLE>
  4. </HEAD>
  5. <BODY>

  7. <SCRIPT Language="JavaScript">
  8. day = new Date();
  9. days = day.getDay();
  10. month = day.getMonth();
  11. year=day.getYear();
  12. check = day.getYear()%4;

  14. numdays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);

  16. if(check == 0){ numdays[1] = 29; }

  18. document.write("<center><table border>");

  20. //以下敘述必須連接寫成一行
  21. document.write("<tr align=center><th colspan=7><font color=\"#0000ff\" size=\"2\">中華民國"+(year-1911)+"年 "+(month+1)+"月</th></tr>");

  23. //以下敘述必須連接寫成一行
  24. document.write("<tr align=center><th><font color=\"#ff0000\">日</a></th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th><font color=\"#00ff00\">六</a></th></tr>");  

  26. for(start = 1-days; start <= 31; start +=7);
  27. {
  28. document.write("<tr align=center>");
  29. for(i = start; i < start + 7; i++);
  30. {
  31. if((i > 0) && (i <= numdays[month]))
  32. {document.write("<td>"+ i +"</td>"); }
  33. else{ document.write("<td>&nbsp;</td>"); }
  34. }
  35. document.write("</tr>");
  36. }

  38. document.write("</table>");

  40. </SCRIPT>

  42. </BODY>
  43. </HTML>
複製代碼
提示：程式碼中的<th>標籤，其屬性同等於標準的<td>HTML標籤，不過<th>標籤內的文字會變成粗體！
收藏 分享
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

        靜思自在 : 人要知福、惜福、再造福。
返回列表 上一主題