6/21のまとめ

JavaScript 授業

JavaScript

【実践課題A】
  • おみくじの結果「大吉」「中吉」「小吉」「吉」「凶」をランダムに表示させなさい。


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<script>
	var kuji =[ '吉', '中吉', '小吉', '吉', '凶'],
	r = Math.floor(Math.random()*kuji.length);
	alert('今日の運勢は' + kuji[r] +'です');
	
	</script>
</body>
</html>
【実践課題B】
  • 配列を使い、以下のような表組みを表示させなさい。


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></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>
  </table>
</body>
</html>
for文ver
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
  <script>
	var prodName =['チェア', 'デスク', 'ブックスタンド'];
  var prodPrice =['4000', '12000', '800'];
	</script>
</head>
<body>
	<table border="1">
  <tr>
  <th>製品名</th><th>価格</th>
  </tr>
 <script>
 var i;
 for(i = 0; i < 3; i++) {
 document.write('<tr>');
 document.write('<td>' + prodName[i] + '<\/td>');
 document.write('<td>' + prodPrice[i] + '円</\td>');
 document.write('<\/tr>');
 }
 </script>
  </table>
</body>
</html>
【実践課題C】
  • 配列を使い、以下のようにリストのリンクを表示させなさい。


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
  <script>
	var menu =['ホーム', '会社情報', '製品情報', 'お問い合わせ'];
	</script>
</head>
<body>
	
 <script>
 var i;
 for(i = 0; i < menu.length; i++) {
 document.write('<ul>');
 document.write('<li><a href="#">' + menu[i] + '</a><\/li>');
 document.write('<\/ul>');
 }
 </script>
  </table>
</body>
</html>