３月９日　授業内容①（復習（配列を曜日に変換）、Math.random(乱数),Math.floor（小数点以下切捨て）、Array(空の配列要素の挿入)）

f:id:paris1204:20160309224003p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>昨日の復習及び配列を使って曜日に変換</title>
</head>

<body>
<script>
var today=new Date;
var y=today.getFullYear();
var m=today.getMonth() + 1;
var date=today.getDate();
var day=today.getDay();
//http://d.hatena.ne.jp/web-0818/20160502/p1
var w=['日','月','火','水','木','金','土'];
day=w[day];//変数dayは0～６の数字で曜日を表しているので変数weekで曜日ごとに配列し参照できるようにする。

var d='今日は' + y + '年' + m + '月' + date + '日' + day + '曜日です。';



document.write('<h1>');
document.write(d);
document.write('</h1>');




</script>

</body>
</html>


f:id:paris1204:20160309224521p:plain

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Dreamweaverでの日付等の設定機能</title>
</head>

<body>
<!--下記はDreamweaverの機能で表示できる（挿入→日付→それぞれのフォーマットの設定をする。保存時に自動的に更新にチェック尾wいれると更新するたびに最新の日付に変わる）-->
<!-- #BeginDate format:fJa2 -->2016年3月9日 水曜日 <!-- #EndDate -->
</body>
</html>

d.hatena.ne.jp

関数＝メッソッドと同じと考えて良い

f:id:paris1204:20160309224622p:plain

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Mathメッソッド</title>
</head>

<body>
<script>

for(var i=0;i<10;i++){//var iは回数制限をつけるためだけに書かれているので表示にいれなくても大丈夫
	console.log(i + '回目');
var rdm=Math.random();//Math.random()は乱数を表示し、表示は１以下でされる。
console.log(rdm);
	
	}

</script>


</body>
</html>


f:id:paris1204:20160309224814p:plain
f:id:paris1204:20160309224819p:plain

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Mathメッソッド(おみくじ)</title>
<!--http://d.hatena.ne.jp/web-0818/20160511/p1-->
</head>

<body>
<script>
function uranai(){

var rdm=Math.random();

if(rdm<=0.25){
	document.write('<h1>小吉です。</h1>');
	}
	else if(rdm<0.5){
		document.write('<h1>中吉です。</h1>');
		}
else if(rdm<0.75){
		document.write('<h1>大吉です。</h1>');
		}
		else if(rdm<0.76){
		document.write('<h1>大大吉です。</h1>');
		}
		else{
		document.write('<h1>大凶です。</h1>');
		}
}//functionの閉め
</script>
<h2>運試し</h2>
<p><button onclick="uranai()">おみくじを引く</button></p>

</body>
</html>


f:id:paris1204:20160309225035p:plain
f:id:paris1204:20160309225053p:plain

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Mathメッソッド(乱数を整数表示)</title>
<!--http://d.hatena.ne.jp/web-0818/20160511/p1-->
</head>

<body>
<script>
MAX=10;//定数を表すときは大文字でMAX

for(var i=0;i<10;i++){//iはあくまでも繰り返しのためのカウンター変数
//floorは少数点以下を切捨てる機能
	var rdm=Math.floor((Math.random()*MAX)+ 1);//(Math.random()*MAX)+ 1)は(Math.random()*10)+ 1)ということ。
	//+1をするのはrandomで少数代２位の値がでるから。
	console.log(rdm);
	document.write(rdm + '<br>');
	}

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

＊画像がページ更新ごとにランダムに変わる

f:id:paris1204:20160309225524p:plain
f:id:paris1204:20160309225535p:plain
f:id:paris1204:20160309225543p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Mathメソッド(画像のランダム表示)<!--サイドバーに表示されるバナー広告などに使える--></title>
</head>

<body onload="changeImg()">

<script>
function changeImg(){

var numberOfImg=5;
var rdm=Math.floor(Math.random()*numberOfImg +1);//+1を入力する理由：Math.randomで表示されるのは１より小さい値なのでかけても整数化すると４になってしまうため、５枚の画像を表示させたいときは+1たさないといけない。
console.log(rdm);
var imgNum=rdm +'.jpg';//画像の保存を01でした場合はrdmの前に+0をしないと表示されない。
document.write('<img src="img/num'  + imgNum +'" alt="">');


}//functionの閉じ
</script>


</body>
</html>

d.hatena.ne.jp


f:id:paris1204:20160309231435p:plain
f:id:paris1204:20160309231441p:plain
f:id:paris1204:20160309231449p:plain

f:id:paris1204:20160309230603p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>arrayオブジェクト(配列を使う(Arrayコンストラクタ))</title><!--http://d.hatena.ne.jp/web-0818/20160513/p1-->
</head>

<body>
<script>
var names = new Array(4);//空の配列要素の挿入をnew Arrayでしている。今回は４つ
names[0] = '山田太郎';
names[1] = '鈴木一郎';
names[2] = '佐藤花子';
names[3] = '田中健一';

  document.write('<h2>こんにちは' + names[0] +  'さん</h2>');
  document.write('<h2>こんにちは' + names[3] + 'さん</h2>');
</script>
</body>
</html>

f:id:paris1204:20160309231427p:plain

f:id:paris1204:20160309235404p:plain
f:id:paris1204:20160309235412p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>arrayオブジェクト(配列演算)</title><!--http://d.hatena.ne.jp/web-0818/20160513/p1-->

<style>
table{width:300px;
border:1px black solid;
border-collapse:collapse;
margin:50px auto;}

th,td{border:1px solid black;
text-align:center;
line-height:32px;}

th{background-color:#D4CECF;}

</style>

</head>

<body>
<script>
var a=new Array(3);
var b=new Array(3);

a[0]=5;
a[1]=12;
a[2]=18;
b[0]=33;
b[1]=14;
b[2]=65;

var reponse;

function ans(i){
	 reponse= a[i] * b[i];
	alert('答えは' + reponse + 'です。');
	
	
	}
</script>
<table>
<tr>
<th>添字</th><th>a</th><th>b</th><th>a x bを計算</th>
</tr>
<tr>
<th>0</th><td>5</td><td>33</td><td><button onclick="ans(0);">計算結果</button></td>
</tr>
<tr>
<th>１</th><td>12</td><td>14</td><td><button onclick="ans(1);">計算結果</button></td>
</tr>
<tr>
<th>２</th><td>18</td><td>65</td><td><button onclick="ans(2);">計算結果</button></td>
</tr>
</table>
</body>
</html>