課題6 JavaScript

課題6-1

  1. デスクトップに「課題6」フォルダーを作り、その中に「1」「2」フォルダーを作る。
  2. Visual Studio Codeを起動する。
  3. 「File」→「Preferences」→「Settings」で設定メニューを出し、「render whitespace」で検索して設定を「all」に変える。


  4. Visual Studio Codeで「File」→「Open Folder」で「課題6」フォルダーを開く。
  5. 「課題6」の中の「1」フォルダーの中に「index.html」「main.css」「program.jp」という3つのファイルを作る。


  6. index.html に以下のコードをコピー&ペーストして上書き保存する。
  7. <!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-1. JavaScript</title>
    </head>
    
    <body>
        <span class="big futoji">ボタンを押すと何かが起こるページ</span>
        <ol>
            <li>文字を表示する
                <br>
                <input type="button" value="実行" onClick="showHello();">
                <div id="d1"></div>
            </li>
        </ol>
    </body>
    
    </html>
    16行目がボタンを作るための記述。ボタンを押すとonClickに書いてある関数が呼び出される。
    17行目はあとで文字を入れるための入れ物。プログラムから認識できるように識別名「d1」がつけてある。

  8. main.css に以下のコードをコピー&ペーストして上書き保存する。
    img {
        max-width: 100%;
        border: 1px solid black;
    }
    
    .big {
        font-size: 2.0em;
    }
    
    .futoji {
        font-weight: bold;
    }
    
    li {
        margin-bottom: 20px;
    }
    img に対する設定の2つ目は、外枠を表示させるためのもの。
    liに対する設定は、箇条書きの項目の間に適度にスペースをあけて見やすくするためのもの。

  9. program.js に以下のコードをコピー&ペーストして上書き保存する。
    function showHello() {
        var moji = document.getElementById("d1");
        moji.innerHTML = "Hello World";
    }
    2行目で、index.htmlにある「d1」を認識して、こちらでの変数「moji」を割り当てている。
    3行目でそれに入る文 (innerHTML) に "Hello World" を代入する。

  10. index.htmlをFireFoxで開いて「実行」ボタンを押し、以下のように「Hello World」という文字が表示されることを確認する。


  11. 以下の3つの画像をそれぞれ右クリックして「1」フォルダに保存する。
    (名前は「A.jpg」「B.jpg」「C.jpg」となる。変えずにそのまま保存する)
       

  12. index.htmlに以下のものを追加してブラウザを更新する。


    このように表示されればOK。説明文に「画像を変える」とあるが、それを実装するのはこのあと。


  13. index.html と program.js に以下のものを追加してブラウザを更新する。


    index.html
    24~26行目で3つのボタンを作っている。onClickで呼び出されるのはどれもshowImage関数だが、それぞれ別の引数 (画像名) を渡している。

    program.js
    6行目でindex.htmlから引数imgを受け取っている。これには「A.png」「B.png」「C.png」のどれかが入っている。
    7行目でindex.htmlにある「img2」を認識して、こちらでの変数「image」を割り当てている。
    8行目でその画像名 (src) に引数imgの値を入れている。

    画像の下に「1枚目」「2枚目」「3枚目」のボタンが表示され、それぞれをクリックして画像が図のように変わればOK。
    JavaScriptのエラーのチェック
    program.js 側のエラーは、これまでのようにFirefoxでCtrl+Uを押してソースを表示させても見つけられない。
    そのかわり、開発者ツールを使えばエラーの場所を確認できる。
    例えばボタンを押しても反応がないときは、F12キーを押して画面下側に「開発者ツール」が表示させる。
    エラーがある場合は赤丸に「!」のアイコンが出るので、それをクリックするとエラーの内容が確認できる。
    (開発者ツールの右上の「×」のすぐ左の「…」からツールの表示位置を変えることもできる)


    これはprogram.jsの7行目で「getElementById」を「getElementByld」(大文字のアイを小文字のエル) にしてしまった場合に表示されるもの。
    メッセージの1行目は「document.getElementByld は関数ではない」という意味。
    右側の「7:26」はこのエラーの場所が7行目の26文字目であることをあらわす。
    (もっとも、ProcessingやJavaでのプログラミングと同様に、間違えた場所そのものではないところがエラーでひっかかることも多い)

  14. index.html と program.js に以下のものを追加してブラウザを更新する。


    program.js
    13行目で「suuji」の中の文字をクリアしている。
    14~16行目のfor構文はProcessingやJavaとほぼ同じ。ただし、変数の宣言にはintではなくvarを使う。
    15行目の「Math.random()」で0~1の実数の乱数が得られる。parseIntでその小数点以下を切り捨てて整数化し、Stringで文字列化している。

    「実行」のボタンを押すたびにその下の数字が変わればOK。


  15. index.html と program.js に以下のものを追加してブラウザを更新する。


    index.html
    36行目で入力用のテキストボックスを作っている。

    program.js
    20行目でテキストボックスにnyuuryoku、21行目で結果表示エリアにkekkaという変数を割り当てている。
    22~26行目のif~else構文はProcessingやJavaとほぼ同じ。テキストボックスの文字と"abc"が一致しているかどうかでkekkaの文字に別のものを入れている。

    テキストボックスに"abc"を入れて「判定」を押すと「不正解」、それ以外のものを入れて「判定」を押すと「正解」が表示されればOK。


  16. index.html と program.js に以下のものを追加してブラウザを更新する。


    program.js
    31行目で「日時型」の変数を作り、32~37行目でそれぞれ年~秒の情報を取り出している (ただしgetMonth()では実際の月より1小さい値が返るので、1を加えている)。
    38行目はそれらを結合してnichijiの文字に入れているだけ。

    「日時表示」を押して現在の日時が表示されればOK。

課題6-2

  1. 「2」フォルダの中にindex.html, main.css, program.jsを作る。
  2. ファイルを編集し、オリジナルのページを作る。

課題の条件
注意 (この課題限定ではなく、Webページ全般について)
以下に例を挙げるが、これらはあくまで参考用。全く同じものはNG。

例1
index.html


main.css
(大きさの違う文字用の「kyodai」と「dai」、赤文字用の「red」を用意している)


program.js
(3行目で配列を初期化(宣言+代入)している。kikkyou[0]には「凶」、kikkyou[1]には「吉」…が入る)
(4行目で0~4の乱数を作り、その結果に応じてkikkyou[0]~kikkyou[3]のどれかを表示させる)
(乱数が0のときは、「赤くて巨大な太字」で「凶」を表示させる)




例2
index.html
(計算に使う2つの数字を入れるテキストボックスをinputで、結果を表示するための場所をspanで作っている)
(「size="3"」はテキストボックスの横幅の指定)


main.css


program.js
(2, 3行目でテキストボックスの文字を読み取り、それを数値に変換して変数に入れている。Numberを使うと元が整数の形なら整数型の値、実数の形なら実数型の値になる)
(5行目でその計算結果をkotaeに代入している)


提出

送り方がいつもと違うので注意。
inserted by FC2 system