プログラミング 中部大学2025年春期

Javascriptによるプログラミング4

HTMLを出力する

ウェブブラウザーはHTMLを解釈して豊かな表現をすることができる。 これまで行ってきたJavascriptの出力(document.write)はHTMLの中に埋め込まれたものとしてブラウザーに解釈されている。 今回の講義ではさらにHTMLを意識した出力を行い、表現を豊かにする。

HTMLは応用生物化学科向けの生物情報リテラシーの時間に説明してある。 HTMLがわからないときは以下の講義資料を参照してください。

  1. [第12回講義]
  2. [第13回講義]
  3. [第14回講義]
<!DOCTYPE HTML>
<html lang='ja_JP'>
<body>
<script type='text/javascript'><!--

/*
 * HTMLを出力する
 */
document.write("<h1>見出し レベル1</h1>"); 
document.write("<h2>見出し レベル2</h2>"); 
document.write("<h3>見出し レベル3</h3>"); 

//	H1からH6までを出力する
for(var n = 1 ; n <= 6 ; n ++){
	document.write("<h" + n + ">見出し レベル" + n + "</h" + n + ">");
}

//	本文はpタグを使うとよい
document.write("<p>ここに文章を書く。</p>");

//	箇条書き (番号付き)
document.write("<ol>");	//	ordered list の略
for(var n = 0 ; n < 5 ; n ++){
	document.write("<li>" + n + "番目</li>");
}
document.write("</ol>");

//	箇条書き (番号付き)
document.write("<ul>");	//	ordered list の略
for(var n = 0 ; n < 5 ; n ++){
	document.write("<li>" + n + "番目</li>");
}
document.write("</ul>");

--></script>
</body>
</html>
実行結果

練習

前回の素数を出力するプログラムを改良し、番号付き箇条書きにして出力せよ。

表を作る

HTMLでは表をつくることができる。 以下に表をつくるためのHTMLのコードを示す。 

<table>
<thead>
	<tr><th>見出し1</th><th>見出し2</th></tr>
</thead>
<tbody>
	<tr><td>1行目1列</td><td>1行目2列</td></tr>
	<tr><td>2行目1列</td><td>2行目2列</td></tr>
	<tr><td>3行目1列</td><td>3行目2列</td></tr>
</tbody>
</table>
実行結果
見出し1見出し2
1行目1列1行目2列
2行目1列2行目2列
3行目1列3行目2列

Javascriptで表を出力する

<!DOCTYPE HTML>
<html lang='ja_JP'>
<body>
<script type='text/javascript'><!--

/*
 * 表を出力する
 */
document.write("<table>"); 

document.write("<thead>"); 
document.write("<tr>");
document.write("<th></th>");	// 空のマス
for(var c = 1 ; c <= 10 ; c ++){
	document.write("<th>" + c + "列</th>");
}
document.write("</tr>");
document.write("</thead>");

document.write("<tbody>");

for(var r = 1 ; r <= 10 ; r ++){
	document.write("<tr>");
	document.write("<th>" + r + "行</th>");

	for(var c = 1 ; c <= 10 ; c ++){
		document.write("<td>" + r + "行" + c + "列" + "</td>");
	}
	document.write("</tr>");
}

document.write("</tbody>");
document.write("</table>"); 
--></script>
</body>
</html>
実行結果

練習

九九の表を作成せよ。

フォームを使用する

HTMLはユーザーが値を入力するフォームを用いることができる。 フォームの要素にはテキストボックス、ボタン、ラジオボタン、セレクトボックスなどがある。

ボタンを作成する

<input type='button' value='表示する文字列'>
実行結果

上のボタンはクリックされたときの動作が設定されていないので、クリックしても何も起きない。

ボタンがクリックされたときにJavascriptを実行する

input要素のonclick属性にJavascriptの関数を指定すると、ボタンがクリックされたときにその関数が実行される。 

<!DOCTYPE HTML>
<html lang='ja_JP'>
<body>
<script type='text/javascript'><!--
/*
 * クリックされたときに呼ばれる関数を定義する
 * 関数の定義はinput要素より前にある必要がある。
 */
function message(){
	alert('クリックされたよ');
}

--></script>
<!--
	input要素のonclick属性に関数名を指定する。
	このとき、関数を呼び出すように()を付けておくことが重要。
-->
<input type='button' value='ここを押してね' onclick='message()'>
</body>
</html>
実行結果

フォーム要素を取得する

HTMLの要素にはid属性をつけることができる。 id属性をつけるとその要素をJavascriptから操作できる。 

<!DOCTYPE HTML>
<html lang='ja_JP'>
<body>
<!--
	id属性をつけたinput要素を出力する。
	これをJavascriptで操作するためにJavascriptより前にすることが重要。
-->
<input type='button' id='button1' value='ここを押してね'>
<script type='text/javascript'><!--
/*
 *	HTMLの要素をJavascriptで操作する例
 */
//	idがbutton1である要素(オブジェクト)を取得する。
var btn = document.getElementById('button1');

//	要素の値(valueプロパティ)を出力する。
document.write(btn.value);

--></script>
</body>
</html>
実行結果

ボタンがクリックされたとき、HTMLの要素を変える

<!DOCTYPE HTML>
<html lang='ja_JP'>
<body>
<script type='text/javascript'><!--
/*
 * クリックされたときに呼ばれる関数を定義する
 * 関数の定義はinput要素より前にある必要がある。
 */
function changeValue(){
	//	idがinput1の要素の値を取得する
	var value = document.getElementById('input1').value;
	//	idがbutton1の要素の値を変える。
	document.getElementById('button1').value = value;

	//	以下のように1行で書いてもよい。
	// document.getElementById('button1').value = document.getElementById('input1').value;
}

--></script>
<!--
	このinput要素はユーザーが入力した値を取得するために使う。
-->
<input id='input1' type='input' value='ここに文字をいれてね'>
<!--
	このinput要素はユーザーがJavascriptを実行するために使う。
-->
<input id='button1' type='button' value='この文字が変わるよ' onclick='changeValue()'>
</body>
</html>
実行結果

練習

  1. テキストボックスを以下のように3つ用意せよ。

    全てのテキストボックスにはid属性を付けておくこと。id属性はそのHTML内で重なってはいけない。

    + =
  2. ボタンを一つ追加せよ。

    追加したボタンにもid属性を付けておくこと。

    + =
  3. ボタンをクリックしたときに実行する関数を定義せよ。

    ボタンクリックで呼ばれる関数はそのボタンの前で定義しないといけないことを思い出すこと。

  4. その関数内で2つのテキストボックスの値を取得せよ。

    値が取得できているかどうかはalert関数を使うと簡単にチェックできる。

  5. 2つのテキストボックスの値を結合して、3つめのテキストボックスの値にせよ。

    1つめにHello、2つめにWorldと入力されたとき、3つめのテキストボックスにHelloWorldと表示されるようにする。

  6. 2つのテキストボックスの値の和を3つめのテキストボックスの値にせよ。

    1つめに2、2つめに3と入力されたとき、3つめのテキストボックスに5と表示されるようにする。 テキストボックスから取得した値は文字列になっているのでparseInt関数を用いる。 

    //	parseInt関数の使い方
var input1 = '2';	// 文字としての2を変数にいれる
var input2 = '3';	// 文字としての3を変数にいれる
alert(input1 + input2); // ここでは文字列の結合が行われて23になる。
alert(parseInt(input1) + parseInt(input2));	// parseInt関数により文字列が整数になる。その結果5と表示される。
練習の回答例

課題

九九の表をJavascriptで作成せよ。 作成したJavascriptを含むHTMLファイルを提出すること。

作成手順

前の講義
トップページへ
次の講義