読者です 読者をやめる 読者になる 読者になる

3月10日授業内容 演算表の作成、setFullYear,Arrayオブジェクトの主なメッソッド(join,sort),function compare(),for〜in文の利用

f:id:paris1204:20160310233443p:plain
f:id:paris1204:20160310233449p:plain







Array(コンストラクタ
d.hatena.ne.jp


f:id:paris1204:20160310231348p:plain
f:id:paris1204:20160310231358p:plain
f:id:paris1204:20160310231404p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Arrayコンストラクタ</title><!--http://d.hatena.ne.jp/web-0818/20160513/p1-->

<style>
<!--<!--reset
-->

html,body,h1,h2,h3,table,tr,th,td{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;
line-height:1.0;}-->

table{border:1px solid black;
border-collapse:collapse;}

th,td{border:1px solid black;
width:100px;
text-align:center;}

th{background-color:#E2E1DC;}

</style>

</head>

<body>
<script>

var a=new Array(3);
var b=new Array(3);
var ans;
a[0]=5;
a[1]=12;
a[2]=18;
b[0]=33;
b[1]=14;
b[2]=65;

function calc(i){//function calc(i)の(i)は下の表のボタンのcalc()の中に入っている配列数を表している。
ans=a[i]*b[i];//ansの変数宣言は外で行うほうが良い(functionで設定した場合、結果はfunction内でしか反映されないため)
console.log(a[i]);
console.log(b[i])
alert('答えは' + ans  +'です。');



}
</script>
<h1>配列の演算</h1>
<table>
<tr>
<th>添字</th><th>a</th><th>b</th><th>axbの計算結果</th>
</tr>
<tr>
<th>0</th><td>5</td><td>33</td><td><button onclick="calc(0)">計算結果</button></td>
</tr>
<tr>
<th>1</th><td>12</td><td>14</td><td><button onclick="calc(1)">計算結果</button></td>
</tr>
<tr>
<th>2</th><td>18</td><td>65</td><td><button onclick="calc(2)">計算結果</button></td>
</tr>
</table>
</body>
</html>

d.hatena.ne.jp

f:id:paris1204:20160310232642p:plain
f:id:paris1204:20160310231543p:plain
f:id:paris1204:20160310231549p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>曜日を日本語で表示(一年後)</title>
</head>

<body>
<script>
var days=new Array('日','月','火','水','木','金','土');
var date=new Date;<!--Dateは日時操作機能を持つオブジェクト-->
console.log(date);//console表示→Fri Mar 10 2017 17:28:01 GMT+0900 (東京 (標準時))
date.setFullYear(date.getFullYear() + 1);//setFullYearは年を設定するという意味で()内で設定した情報を表示する。
//date.getFullで今日の情報を取り出し、+1で1年後の表示をしている
document.write('<h1>一年後は' + days[date.getDay()] + '曜日</h1>')

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

f:id:paris1204:20160310233659p:plain
f:id:paris1204:20160310233719p:plain

f:id:paris1204:20160310234127p:plain


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Arrayオブジェクトのメソッド</title>
</head>

<body>

<script>

function compare(a,b){//a,bは比較する対象を表しており、比較した結果を返して比較し続け大きい順に並べる
	return a-b;//大きい順に並べ替えられる

}
var ages=new Array(8,6,10,24,1,11,40,2);
ages=ages.sort(compare);//sortは並べ替え、compareは上に記載のfunction関数の戻り値を示す
document.write(ages.join('<'));//joinは引数どうしのつなぎに使われる


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

d.hatena.ne.jp

f:id:paris1204:20160310234640p:plain
f:id:paris1204:20160310234648p:plain
f:id:paris1204:20160310234654p:plain


f:id:paris1204:20160310235025p:plain
f:id:paris1204:20160310235031p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>連想配列</title>
</head>

<body>

<!--http://d.hatena.ne.jp/web-0818/20160516/p1
-->
<script>
var colors= new Object();
colors['white']='白色';
colors['red']='赤色';
colors['green']='緑色';
colors['yellow']='黄色';

for(var eigo in colors){//「for~in文」では、連想配列のすべてのキーが順番に変数に格納されていきます。
console.log(eigo);
console.log(colors);

	document.write('<h2>' + eigo + ' ' + colors[eigo] + '</h2>');
	
	
	}



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