2019年2月22日 星期五

(07)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>

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

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

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

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

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

  17. //以下敘述必須連接寫成一行
  18. 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>");  

  19. for(start = 1-days; start <= 31; start +=7);
  20. {
  21. document.write("<tr align=center>"); 
  22. for(i = start; i < start + 7; i++);
  23. if((i > 0) && (i <= numdays[month]))
  24. {document.write("<td>"+ i +"</td>"); } 
  25. else{ document.write("<td>&nbsp;</td>"); } 
  26. document.write("</tr>"); 

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

  28. </SCRIPT> 

  29. </BODY>
  30. </HTML>
提示:程式碼中的<th>標籤,其屬性同等於標準的<td>HTML標籤,不過<th>標籤內的文字會變成粗體!

沒有留言:

張貼留言