課題6　JavaScript

課題6-1

  1. Terapadを起動する。
  2. 「表示」→「オプション」でタブの幅を4文字分にし、タブと空白文字を表示する設定に変更する。


  3. デスクトップに「課題6」フォルダーを作り、さらにその中に「1」フォルダーを作る。
  4. Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「index.html」という名前で保存する。
  5. 以下のコードをコピー＆ペーストして上書き保存する。
    6. <!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="main.css">
	<script type="text/javascript" src="program.js"></script>
	<title>課題6. JavaScript</title>
</head>
<body>
<span class="header">動的なページの例</span>
<div class="main">
	<ol>
		<li>文字を表示する</li>
			<input type="button" value="実行" onClick="showHello();">
			<div id="d1"></div>
		<li>1～10の範囲の乱数 (整数) を表示する</li>
			<input type="button" value="実行" onClick="showRandom();">
			<div id="d2"></div>
		<li>1～10を並べて表示する</li>
			<input type="button" value="実行" onClick="show1to10();">
			<div id="d3"></div>
		<li>入れた文字に応じて「正解」「不正解」を表示する</li>
			<input type="button" value="実行" onClick="judgeA();">
			<input type="text" id="txt4" size="10">
			<div id="d4"></div>
		<li>日付を表示する</li>
			<input type="button" value="実行" onClick="showDate();">
			<div id="d5"></div>
	</ol>
</div>
</body>
</html>

  6. 「ファイル」→「新規作成」でもう一枚TeraPadを開く。
  7. 「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「main.css」という名前で保存する。


  8. 以下のコードをコピー＆ペーストして上書き保存する。
    9. /* 画像 */
img {
	max-width: 100%; /* 最大幅をブラウザの幅にする */
}
/* 見出し用 */
.header {
	font-size: 2.0em;/* 2倍サイズ */
	font-weight: bold;/* 太字 */
}
/* 本文用字下げ */
div.main {
	margin-left: 10px;/* 左をあける */
}
/* 箇条書きの項目の設定 */
li {
	margin-top: 20px;/* 上の隙間 */
	font-size: 1.5em; /* 1.5倍サイズ */
}

  9. 「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「program.js」という名前で保存する。


  10. 以下のコードをコピー＆ペーストして上書き保存する。
    11. /* 「Hello World」を「d1」の文字に入れる */
function showHello() {
}

/* 1～10の範囲の乱数 (整数) を「d2」の文字に入れる */
function showRandom() {
}

/* 「1～10」を並べたものを「d3」の文字に入れる */
function show1to10() {
}

/* 「txt4」の文字が「あ」なら「正解」、そうでなければ「不正解」を「d4」の文字に入れる */
function judgeA() {
}

/* 日付を「d5」の文字に入れる */
function showDate() {
}
    このように「1」フォルダに3つのファイルができていて、TeraPadも3枚開いていればOK。

  11. index.htmlをFireFoxで開くと、以下のようなものが表示される。
    12. (表示がこうなっていることを確認したら main.css は閉じておく)
    (今後変更を加えるのは program.js だけ。index.html はブラウザ更新用にだけ使う)
    index.html の inputタグでボタンやテキストボックスを表示している。
    typeプロパティに button を入れるとボタンに、text を入れるとテキストボックスになる。
    ボタンでは valueに入れた文字が表示される。

    onClickに入れた文字列は、「そのボタンがクリックされたときに実行される関数」。
    関数は program.jsに記述されているが、この時点ではどれも空っぽなので、クリックしても何も起きない。

  12. program.js の showHello関数の中 (2行目と3行目の間) に以下のコードを追加して上書きしてからブラウザを更新し、「実行」を押して図のようになることを確認する。
    13. 	var t1 = document.getElementById("d1"); /* html側の表示対象取得 */
	t1.innerHTML = "Hello World!";
    index.html の 16行目にdivタグで作った (最初は空っぽの文字が入っている) 要素を「document.getElementId」で取得している。
    その要素の文字「innerHTML」に「Hello World!」を代入することで、ブラウザ上でこの文字が表示される。

  13. program.js の showRandom関数の中に以下のコードを追加して上書きしてからブラウザを更新し、「実行」を押して図のようになることを確認する。
    14. 	var t2 = document.getElementById("d2"); /* html側の表示対象取得 */
	t2.innerHTML = parseInt(Math.random()*10)+1;
    「実行」をクリックすると1～10の乱数が表示される。クリックするたびにその値が更新される。

    表示対象の取得と文字の書き換えのしくみは先ほどと同様。

    「Math.random()」で0～1の実数の乱数が得られる。
    それを10倍して「parseInt」で整数化 (切り捨て) すると0～9の範囲の整数になる。
    それに1を足せば1～10の範囲の整数になる。

  14. program.js の show1to10関数の中に以下のコードを追加して上書きしてからブラウザを更新し、「実行」を押して図のようになることを確認する。
    15. 	var t3 = document.getElementById("d3"); /* html側の表示対象取得 */
	t3.innerHTML = ""; /* t3の中を空っぽにする */
	for (var i=1; i<=10; i++){
		t3.innerHTML += i + " "; /* 数値iと半角スペースをt3の後ろに追加 */
	}
    「実行」をクリックすると1～10の数字が順に並んで表示される。

    for文の書式はProcessingと同じだが、JavaScriptでは変数の宣言は型の区別なしに「var」で行う。
    「+=」もProcessingと同じで、左辺が文字列の変数なら「右辺の文字列を左辺の後ろにくっつける」、左辺が数値の変数なら「左辺の変数を右辺の値ぶん増やす」という処理にあたる。

  15. program.js の judgeA関数の中に以下のコードを追加して上書きしてからブラウザを更新し、テキストボックスに文字を入力して「実行」を押して、その値に応じて図のようになることを確認する (「あ」以外なら何でも「不正解」になる)。
    16. 	var t4 = document.getElementById("d4"); /* html側の表示対象取得 */
	var x4 = document.getElementById("txt4"); /* html側のテキストボックス取得 */
	var t = x4.value; /* テキストボックスの文字 */
	if (t=="あ"){ /* tが「あ」なら */
		t4.innerHTML = "正解";
	} else { /* そうでなければ */
		t4.innerHTML = "不正解";
	}
    「実行」をクリックするとテキストボックスの文字が「あ」なら「正解」、そうでなければ「不正解」が表示される。

    if～else構文の書式はProcessingと同じ。
    「==」で等しいかどうかを判定して、条件を満たすかどうかでdivの要素に入れるものを変えている。

  16. program.js の showDate関数の中に以下のコードを追加して上書きしてからブラウザを更新し、「実行」を押して図のようになることを確認する。
    17. 	var now = new Date(); /* 日時情報の取得 */
	var t5 = document.getElementById("d5"); /* html側の表示対象取得 */
	var y = now.getFullYear(); /* 年の取得 */
	var m = now.getMonth()+1; /* 月の取得 */
	var d = now.getDate(); /* 日の取得 */
	t5.innerHTML = y+"年"+m+"月"+d+"日";
    「実行」をクリックするとその日の日付が表示される。

    「var now = new Date();」で変数 now に年・月・日・曜日・時・分・秒・ミリ秒の情報が入る (参考)。
    「getFullYear」「getMonth」「getDate」で年、月、日の情報をそれぞれ取り出している。ただし、「getMonth」では実際の月より1小さい値になるため、それに1を加えている。

課題6-2

  1. 課題6-1の結果表示用のFireFoxのタブ、すべてのTeraPadを閉じる。
  2. 「課題6」フォルダの中に「2」フォルダを作る。
  3. 「2」フォルダの中にindex.htmlファイルを作る (cssファイルや別のhtmlファイルを入れてもよい)。
  4. それらのファイルを編集し、オリジナルのページを作る。
課題の条件
注意 (この課題限定ではなく、Webページ全般について)
以下に例を挙げるが、これらはあくまで参考用。全く同じものはNG。

例1 (main.cssは課題6-1と同じ)
index.html


program.js
(3行目で配列を初期化(宣言+代入)している。word[0]には「凶」、word[1]には「吉」…が入る)
(文字の代わりに画像を表示させることもできる。例えばあらかじめ a.jpg ～ d.jpg という画像を同じフォルダに入れておいて、3行目を「var word = ["<img src='a.jpg'>", "<img src='b.jpg'>", "<img src='c.jpg'>", "<img src='d.jpg'>"];」のようにすれば、ボタンをクリックするとこれらの画像のうちどれかがランダムに表示される)




例2 (main.cssは課題6-1と同じ)
index.html


program.js
(4行目, 5行目では、テキストボックスの値を取得して数値に変換している。parseIntとは異なり、Numberを使うと元の文字列が整数の形をしていれば整数、実数の形なら実数に変換される)


提出

inserted by FC2 system