課題6-1

  1. Terapadを起動する。
  2. タブの幅を4文字分にし、タブと空白文字を表示する設定に変更する (方法を忘れた場合はWebページ制作第1回の資料を参照)。
  3. デスクトップに「課題6」フォルダーを作り、さらにその中に「1」フォルダーを作る。
  4. Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「課題6」の中の「1」フォルダーの中に「index.html」という名前で保存する。


  5. 以下の囲みのものをTerapadにコピー&ペーストし、上書き保存する。
    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>JavaScriptの練習</title>
    </head>
    <body>
    JavaScriptの練習<br>
    <script>
    	document.write("こんにちは");
    </script>
    </body>
    </html>
    


  6. 「課題6」の「1」フォルダーにある「index.html」をブラウザで開く。すると、このようなものが表示される。
    <script>と</script>の間には、JavaScriptのプログラムを書ける。
    document.write は画面に文字を表示する命令。

  7. </script>の上に、以下の囲みのものをコピー&ペーストして上書き保存し、ブラウザをリロードする。すると、「こんにちは」のあとに「3」が表示される。
    	var a = 3;
    	document.write(a);
    

    var はJavaScriptの変数をつくる命令 (JavaScriptではProcessingの int, float, String のような型の区別はなく、どんな場合も var で定義する)。
    document.write では変数の値が表示される。

  8. 追加した行の「3」のところを「Math.random()」に書き換えて上書き保存し、ブラウザをリロードする。すると、「3」だったところがランダムな数値に変わる。

    Math.random() は0~1の乱数をつくる関数。
    リロードするたびにこの部分の数値は変わる。

  9. 「document.write(a);」を消し、その部分に以下のものをコピー&ペーストして上書き保存し、ブラウザをリロードする。何度かリロードすると、下の左右の図のようにどちらかが表示される。
    	document.write("<br>");
    	if (a < 0.5){
    		document.write("今日はいい天気");
    	} else {
    		document.write("今日は大雪");
    	}
    

    if~elseの条件分岐はProcessingの時と同じ。ランダムに決まった a が0.5より小さければ「今日はいい天気」、そうでなければ「今日は大雪」が表示される。
    分岐の上に入れた「document.write("<br>");」は改行タグ。普通に <body>~</body> の中に書くときと同様に、これが改行の役割をする。

  10. 全体を左図のように書き換えて上書き保存し、ブラウザをリロードする。すると、右図のように1週間分の天気が表示される (これもリロードするたびに変わる)。

    for文の書き方もProcessingと同じ。
    乱数・if~else構文はさっきと同じ。for文の中に入るので、Tabキーで1段深くする。

  11. 下から2行目の</body>の上に、以下の囲みのものをコピー&ペーストして上書き保存し、ブラウザをリロードする。
    <form>
    	<input type="button" value="チェック" onClick=f1()>
    	<input type="text" id="t1" value="">
    </form>
    

    ボタンとテキストボックスが追加される。
    普通のWebサイトのフォームのようにテキストボックスには文字を入れられる。
    この時点ではボタンを押しても何も起こらない。

  12. </script>の上に、以下の囲みのものをコピー&ペーストして上書き保存してブラウザをリロードし、「チェック」のボタンを押す。するとポップアップウインドウが出て「何か入力してください」と表示される。テキストボックスに何か書いてからボタンを押すと下の図のように書いた内容がメッセージの内容に反映される。
    	function f1(){
    		var text1 = document.getElementById("t1").value;
    		if (text1 == ""){
    			alert("何か入力してください");
    		} else {
    			alert(text1 +"と入力しましたね");
    		}
    	}
    


    f1はここで作ったJavaScriptの関数。
    さっき作ったボタンのところに「クリックされたらf1関数を実行する」という命令が書いてある。


課題2
inserted by FC2 system