授業メモ　６月２１日

授業メモ JavaScript

JS実践課題A

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

<body>
<script>

	var msg = ['大吉','中吉','吉','凶'];

	var r = Math.floor(Math.random() * msg.length);

	document.write(msg[r]);


</script>
</body>
</html>

JS実践課題B-1

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

<body>

<table border="1">
<tr><th>製品名</th><th>価格</th></tr>

<script>
	var prodName = ['リラックスチェア','リラックスデスク','ブックスタンド'];

	var prodPrice = ['4000','12000','800'];

	
	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(i = 1; i < 3; i++){
		
	}
  -->

実践課題B-2

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

<body>

<table border="1">
<tr><th>製品名</th><th>価格</th></tr>

<script>
	var prodName = ['リラックスチェア','リラックスデスク','ブックスタンド'];

	var prodPrice = ['4000','12000','800'];

	for(i = 0; i < 3; i++){
		document.write('<tr><td>' + prodName[i] + '<\/td><td>' + prodPrice[i] + '円<\/td><\/tr>');
		}
</script>

</body>
</html>

JS実践課題C

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

<body>
<ul>
	<a href="#"></a>
</ul>

<script>
	var link01 = ["ホーム","会社情報","製品情報","お問い合わせ"];
	var link02 =["a","b","c","d"];

	for(i = 0; i < 4; i++){
		document.write('<li><a href="' + link02[i] + '">' + link01[i] + '<\/a><\/li>');
	}
</script>
</body>
</html>

JS実践課題D?

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>実践課題D</title>
<style>
th {
	background-color: #e6e6e6;
	width: 100px;
	height: 30px;
}
td {
	width: 200px;
	text-align: center;
}
</style>
</head>

<body>
<table border = "1">
<tr><th>添字</th><th>a</th><th>b</th><th>a×bを計算</th></tr>

<script>
	var td1 = ['5','12','18',];
	var td2 = ['33','14','65',];
	
	for(i = 0; i < 3; i++){
			document.write('<tr><th>' + i + '<\/th><td>' + td1[i] + '<\/td><td>' + td2[i] + '<\/td><td>' + '<button onClick=\"ans(' + i + ')\">計算結果</button><\/td>');
	}
	
	function ans(j){
			alert('答えは' + td1[j] * td2[j] + 'です。');
	}
	
</script>
</body>
</html>

JS実践課題E

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>

<body>
<table border="1">
<tr><th></th><th>商品A</th><th>商品B</th><th>商品C</th></tr>


<script>
var tanka = [300,450,520];

for(var i = 1; i <=10; i++){
	document.write('<tr>');
	document.write('<th>' + i + '<\/h>');
	for(var j = 0; j < 3; j++){
		document.write('<td>' + tanka[j] * i + '円<\/td>');
	}
	document.write('<\/tr>');
}
</script>
</body>
</html>

scrollable jquery
nivo slider
ローカル変数