3月10日授業内容 演算表の作成、setFullYear,Arrayオブジェクトの主なメッソッド(join,sort),function compare(),for〜in文の利用
Array(コンストラクタ)
d.hatena.ne.jp
<!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>
<!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>
<!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>
<!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>