講義37日目

講義内容

JavaScript

【実践課題A】

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>実践課題A</title>
</head>

<body>
<script>
<!--
var kuji=["大吉","中吉","小吉","吉","凶"];
var i=Math.floor(Math.random()*kuji.length);
document.write(kuji[i]);
-->
</script>

</body>
</html>

【実践課題B】

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>実践課題B</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<prodName.length;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>実践課題C</title>
<script>
<!--
var linkName = ['ホーム','会社情報','製品情報','お問い合せ'];
//-->
</script>
</head>

<body>
<script>
<!--
for (var i=0;i<linkName.length;i++){
document.write('<ul>');
document.write('<li>'+'<a href="#">'+linkName[i]+'<\/a>'+'<\/li>');
document.write('<\/ul>');
}
//-->
</script>
</body>
</html>

【実践課題E】

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>実践課題E</title>
<script>
<!--
var  rate=[300,450,520];


//-->
</script>
</head>

<body>
<table  border="1">
  <tr>
    <th scope="col">個数</th>
    <th scope="col">商品A</th>
    <th scope="col">商品B</th>
    <th scope="col">商品C</th>
  </tr>
 <script>
 <!--
for(i=1;i<=10;i++){
document.write('<tr>');
document.write('<th scope="row">'+(i)+'</th>');
for (var j=0;j<rate.length;j++){
document.write('<td>'+rate[j]*(i)+'円'+'</td>');
}
document.write('<\/tr>');
}
	//-->
	</script>
</table>
</body>
</html>