js(配列) 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>配列練習(1)</title>
</head>

<body>

<script>

var msg =['大大大大大吉','大大大大吉','大大大吉','大大吉','大吉'];
var r=Math.floor(Math.random()*msg.length);
document.write(msg[r]); 

</script>

</body>
</html>
  • Math.floor=引数の最大値かつ小数点以下。
  • lengthこの場合は5
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>配列練習(2)</title>

<script>

var prodName=['チェア','デスク','ブックスタンド'];
var prodPrice=[4000,12000,800];

</script>

</head>

<body>

<table border="1">

<tr><th>製品名</th><th>価格</th></tr>
<script>

document.write('<tr>');
document.write('<td>'+ prodName[0] +'<\/td>');
document.write('<td>'+ prodPrice[0] +'円<\/td>');
document.write('</tr>');

document.write('<tr>');
document.write('<td>'+ prodName[1] +'<\/td>');
document.write('<td>'+ prodPrice[1] +'円<\/td>');
document.write('</tr>');

document.write('<tr>');
document.write('<td>'+ prodName[2] +'<\/td>');
document.write('<td>'+ prodPrice[2] +'円<\/td>');
document.write('</tr>');

</script>


</body>
</html>
  • for文を使っていないver
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>配列練習(2)-2 for文</title>
<script>

var prodName=['チェア','デスク','ブックスタンド'];
var prodPrice=[4000,12000,800];

</script>


</head>

<body>
<table border="1">

<tr><th>製品名</th><th>価格</th></tr>

<script>

for(var i=0;i<3;i++){

document.write('<tr>');
document.write('<td>'+ prodName[i] +'<\/td>');
document.write('<td>'+ prodPrice[i] +'円<\/td>');
document.write('</tr>');
}

</script>
</body>
</html>
  • for文を使用したver. 上のように変数指定をする必要がなくなる。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>配列練習(3)</title>

</head>

<body>

<script>

var menu=['ホーム','会社情報','製品情報','お問い合わせ'];
for(var i=0;i<menu.length;i++){
	document.write('<ul>');
	document.write('<li><a href="#">'+menu[i]+'</a><\/li>');
	document.write('<\/ul>');
}


</script>

</body>
</html>
  • リストを形成。document.write('')のなかにulを書く。liだけではダメ。
  • document.write()は基本的にbody内に書く。変数の下にはくることはない。