課題6　JavaScript

課題6-1

  1. Terapadを起動する。
  2. タブの幅を4文字分にし、タブと空白文字を表示する設定に変更する (方法を忘れた場合はWebページ制作初回の資料を参照)。
    3. (自宅で作業したことがある場合は設定が残っているはずなのでこの工程は飛ばしてよい)
  3. デスクトップに「課題6」フォルダーを作り、さらにその中に「1」フォルダーを作る。
  4. 文字コード「UTF-8N」で、「1」フォルダーの中に「index.html」「main.css」という2つのファイルを作る。
  5. それぞれに以下のコードを記入して上書き保存する。
    6. (適当にこれまでのファイルからコピーして再利用するとよい)
    index.html


    main.css


  6. index.htmlをChromeで開くと、以下のようなものが表示される。
    7. scriptタグで囲んだ部分がJavaScriptのコード記述用エリアになる。
    document.writeでは固定の文字列や変数などを表示させられる。

  7. </body>の上に以下のコードを追加し、ブラウザを更新する。
    8. <hr>
<h2>変数の値の表示</h2>
<div id="main">
	<script>
		var a = "文字列";
		var b = 100;
		var c = 50;
		document.write(a+"<br>");
		document.write(a+b+c+"<br>");
		document.write(a+(b+c));
	</script>
</div>
    JavaScriptでは整数型・実数型・文字列型などの種類と関係なく、どのような変数も「var」で宣言する。
    文字列と整数を「+」で結合すると文字列になる。2行目が「文字列10050」になっているのはそのため。
    何もしなければ「+」は前から順に実行されるが、丸カッコで囲むとその部分が優先される。3行目ではそれを利用して「100+50」の演算を先にさせている。

  8. </body>の上に以下のコードを追加し、ブラウザを更新する。
    9. (「晴れ」「雨」はブラウザを更新するたびにランダムに変わる)
    <hr>
<h2>配列・乱数・繰り返し・条件分岐</h2>
<div id="main">
	<script>
		var wd = ["月", "火", "水", "木", "金", "土", "日"];
		for (var i=0; i<7; i++){
			document.write("6/"+(i+7)+"("+wd[i]+") ");
			var r = Math.random();
			if (r<0.5){
				document.write("晴れ<br>");
			} else {
				document.write("雨<br>");
			}
		}
	</script>
</div>
    JavaScriptでは配列の初期化はコンマ区切りの要素を角カッコで囲んで行う。
    if文、for文の構文は基本的に Processing や Java と同じ。
    「Math.random()」で0以上1未満の乱数が取得できる (これが0.5未満かどうかで条件分岐させているので、「晴れ」「雨」は1/2の確率で表示される)。

  9. </body>の上に以下のコードを追加し、ブラウザを更新する。
    10. (テキストボックスに何も入れずにクリックしたとき、何か書いてから記入したときでそれぞれ以下のようなウインドウが表示される)
    <hr>
<h2>フォームとイベント</h2>
<div id="main">
	<script>
		function chk() {
			var text1 = document.getElementById("tbox1").value;
			if (text1 == ""){
				alert("何か入力してください");
			} else {
				alert(text1 + "と入力しましたね");
			}
		}
	</script>
	<form>
		<input type="button" value="チェック" onClick=chk()>
		<input type="text" id="tbox1" value="">
	</form>
</div>
    alertはポップアップウィンドウを表示する命令。
    inputタグでtypeをbuttonにするとボタンが表示される (valueがボタンに表示される文字、onClickがクリック時に実行される関数で、ここではすぐ上のscriptタグで囲まれた部分に記述されている)。
    inputタグでtypeをtextにするとテキストボックスが表示される (idは区別用の値、valueはブラウザ更新時に入る文字列)。

課題6-2

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

提出

inserted by FC2 system