40回目授業内容　String（JavaScript）〜Array〜脱線

[授業][JavaScript]

String（JavaScript）

  • 文字を縦に並べる
<script>
var i;
var str2 = new String('文字列を１文字ずつ取り出す');
for(i = 0; i <= (str2.length - 1); i++ ) {
	document.write('<h2>', str2.charAt(i), '</h2>');
}
</script>

Array

  • 一部のデータを取り出し表示
<script>
var names = new Array(4);
names[0] = '山田太郎';
names[1] = '鈴木一郎';
names[2] = '佐藤花子';
names[3] = '田中健一';
document.write('<h2>こんにちは', names[0], 'さん</h2>');
document.write('<h2>こんにちは', names[3], 'さん</h2>');
</script>

-配列を使うと処理が簡単（＆for文）
>|html|
<script>
var names = new Array(4);
names[0] = '山田太郎';
names[1] = '鈴木一郎';
names[2] = '佐藤花子';
names[3] = '田中健一';

for(var i = 0; i <= (names.length - 1); ++i) {
document.write('<h2>こんにちは', names[i], 'さん</h2>');
}
</script>

<img src="http://tqs.jp/hatena_img/130116/003.jpg" width="550px">
<script>
var a = new Array(3);
var b = new Array(3);
var kai;
a[0] = 5;
a[1] = 12;
a[2] = 18;
b[0] = 33;
b[1] = 14;
b[2] = 65;
function kakezan0() {
	kai = a[0] * b[0];
	alert('答えは' + kai + 'です。');
}
function kakezan1() {
	kai = a[1] * b[1];
	alert('答えは' + kai + 'です。');
}
function kakezan2() {
	kai = a[2] * b[2];
	alert('答えは' + kai + 'です。');
}

</script>
<style>
tabule {
	border-collapse: collapse;
}
th {
	background-color: #eee;
}
th, td {
	width: 100px;
	text-align: center;
}
</style>
</head>

<body>
<h3>配列の演算</h3>
<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="kakezan0()">計算結果</button></td>
</tr>

<tr>
<th>1</th>
<td>12</td>
<td>14</td>
<td><button onClick="kakezan1()">計算結果</button></td>
</tr>

<tr>
<th>2</th>
<td>18</td>
<td>65</td>
<td><button onClick="kakezan2()">計算結果</button></td>
</tr>
</table>

</body>
  • lengthプロパティとfor文

var i;
var dayOffWeek = new Array(7);
var len = dayOffWeek.length;
dayOffWeek[0] = '日曜日';
dayOffWeek[1] = '月曜日';
dayOffWeek[2] = '火曜日';
dayOffWeek[3] = '水曜日';
dayOffWeek[4] = '木曜日';
dayOffWeek[5] = '金曜日';
dayOffWeek[6] = '土曜日';

for(i = 0; i < len; i++){
	document.write(dayOffWeek[i], '<br>');
}
</script>
  • 表品数×価格の表

<style>
table {
	border-collapse: collapse;
}
th {
	background-color: #eee;
	width: 80px;
	padding: 5px;
}
td {
	width: 80px;
	text-align: right;
	padding: 5px 8px;
}
</style>
</head>

<body>
<h3>単価×個数の一覧表</h3>
<table border="1">
<tr>
<th>個数</th>
<th>商品A</th>
<th>商品B</th>
<th>商品C</th>
</tr>
<script>
var tanka = new Array(3);
tanka[0] = 300;
tanka[1] = 450;
tanka[2] = 520;

for(i=1; i<=10; i++){
	document.write('<tr>');
	document.write('<th>' + i + '</th>');
	
	for(j=0; j<=2; j++) {
		document.write('<td>' + tanka[j]*i + '</td>');
	}
	document.write('</tr>');
}
</script>
</table>
</body>
  • 曜日を日本語で表示する

<script>
var days = new Array('日','月','火','水','木','金','土');
var date = new Date();
var day = days[date.getDay()];
document.write('<h1>今日は', day, 'です。</h1>');
</script>
  • １年後の曜日を表示

<script>
var days = new Array('日','月','火','水','木','金','土');
var date = new Date();

date.setFullYear(date.getFullYear() +1);
document.write('<h1>1年後は', days[date.getDay()],'曜日</h1>');
</script>

-合わせ技
<img src="http://tqs.jp/hatena_img/130116/008.jpg" width="550px">
>|html|
<script>
var days = new Array('日','月','火','水','木','金','土');
var date = new Date();
var day = days[date.getDay()];
document.write('<h1>');
document.write('今日は', date.getDate(), '日で', day, '曜日です。');
document.write('</h1>');

date.setFullYear(date.getFullYear() +1);
document.write('<h1>1年後は', days[date.getDay()],'曜日です。</h1>');
</script>
  • 要素をsortメソッドで並び替える
<script>
function compare(a, b){
return a - b;
}
</script>
</head>
<body>
<h3>
<script>
var ages = new Array(8, 10, 50, 24, 3, 5, 28, 35);
ages = ages.sort(compare);
document.write(ages.join(' > '));
</script>
</h3>
</body>


四十路男Tokiyoの人生再スタートblogもやってます。