基礎プログラミング演習2

秋山優//maooonあっとgmail.com

課題の提出方法

  1. ycreportフォルダに「基礎プログラミング演習2a(秋山)」というフォルダ（後半だと2b）があるので、そこに「自分の名前(学籍番号)」を記したフォルダを作ります。
  2. 作成したフォルダの中に、「01」「02」・・のように毎授業ごとフォルダを作り、各回の課題で作成したファイルを保存します（誤って他人のフォルダに保存しないように注意）。
  3. 一つのページで課題が全て閲覧できるようにすること（課題ごとにHTMLファイルを作らない）。

評価について

注意

Webで検索したコード、友人や先輩に書いてもらったコード、生成AIが出力したコードをそのまま提出する人がたまにいますが、剽窃とみなされDとなります。AIの利用については大学のガイドラインに従って下さい。

第1回　授業の概要と復習

環境

復習

  1. 好きな食べ物（など何でもよい）について見出しと箇条書きを使ったHTMLファイルを作り、Webブラウザで表示できることを確認しなさい。タグのクイックリファレンス
  2. テキストボックスを作り、名前を入力してボタンをクリックすると「こんにちは〇〇さん」とアラート表示するプログラムを作りなさい。
  3. おみくじプログラムを作りなさい。Math.random()を使って乱数を生成し、乱数が0.3未満なら「大吉」、0.3以上0.6未満なら「中吉」、0.6以上0.9未満なら「小吉」、それ以外なら「凶」とアラート表示するようにすること。ボタンをクリックすると実行されるようにしなさい。

第2回　先学期の復習と来週以降への準備

練習問題

問題の動作サンプル?

第3回　JavaScriptを使ってCSSを操作する(1)

今日の目標

キーフレーズ

CSSを操作する方法 -document.getElementById().style-

次に、cssを書き換える方法について説明します。先ほどのHTMLに以下のスタイルが適用されているとします。

h1#a { color : blue; }

'a'というidがついたh1タグについて、文字色を青に指定しています。文字色を書き換えるには、以下のように書きます。

document.getElementById('a').style.color = 'red';

document.getElementById()でスタイルを変えたいタグを探してくるのは上と同じです。スタイルを書き換えるには、「.style.プロパティ名 = 値」のように書きます。今回は文字色を変えたかったので「.style.color」を使いましたが、例えば背景色を変えたい場合は「.style.backgroundColor」を使って、「document.getElementById('a').style.backgroundColor = 'red'」のようにします。

ここで注意することは、cssで背景色を表すプロパティはbackground-colorなのですが、javascriptのプログラム中にハイフンを書くとコンピュータは引き算と勘違いしてしまうので、ハイフンを取り除き、その後の文字（今回ならcolorのc）を大文字にします。同様に、文字の大きさを変えたい場合は、「.style.fontSize」を使います。文字の大きさも、cssではfont-sizeというプロパティで表しますが、同様の理由でfontSizeと表記します。なお、fontSizeに値を代入する際には注意が必要です。font-sizeプロパティの値は例えば「10px」のようにpx（ピクセル）が必要です。そのため、代入する際には数値と'px'を+記号を使ってつなげてあげる必要があります。

練習問題

  1. ボタンをクリックするとp要素の文字色とフォントが変わるようにしなさい（ボタンをクリックするたびに文字色が赤、黒、赤、、と変化し、フォントが1pxずつ大きくなるようにする）。
  2. 同様にp要素（でも何でも良い）を作り、CSSを使って背景色を指定します。次に、テキストボックスとボタンを作り、ボタンをクリックすると、背景色がテキストボックスに入力した色（例えばred）になるようにしなさい。
  3. 上記の練習問題を改良します。リセットボタンを作り、クリックすると背景色が元に戻るようにしなさい。
  4. 文章をクリックすると取り消し線が引かれたり消えたりするプログラムを作成しなさい。

    5. 参考ページ(text-decorationについて）

第4回　JavaScriptを使ってHTMLとCSSを操作する(2) -配列を使ってCSSを操作する-

今日の目標

先週の続きですが、配列を使います。

ちょっとした解説

先週は、document.getElementById('...').innerHTMLや.styleを使って、webページ中の特定のタグやcssを書き換えることについて勉強しました。getElementById()はHTML文書中から任意のタグを一つだけ拾ってきますが、一度に複数のタグの内容やスタイルを変えるといった場合には不向きです。そこで今週は、HTML中から一度に複数のタグを拾ってきて、それらの内容やスタイルをまとめて書き換える方法について勉強します。

一度に複数のタグを拾ってくるには、document.getElementsByTagName()やdocument.getElementsByClassName()を使います。getElementsByTagName()は、()内に指定したタグをHTML文書中から全て拾ってきます。また、getElementsByClassName()は、HTMLでタグにclass名を付けている場合、()内に指定したclass名の付いたタグを全て拾ってきます。

ここで、それぞれ「getElements」と複数形になっていることに注意しましょう。getElementById()は、HTML中でid名は被ってはいけないため、拾ってくるタグは必ず一つです。そのため、「element」と単数形になっています。しかし、HTML中には同一のタグが複数ある可能性がありますし、class名は複数のタグに付けてタグをグループ化するのに使われるため、共に「elements」と複数形になっています。

例えば、pタグが3つあるWebページを考えてみます。この時、全てのpタグの内容を「ほげほげ」に書き換えるにはどのようにすればよいでしょうか。document.getElementsByTagName('p').innerHTML = 'ほげほげ'; とすれば良いような気もしますが、これでは動きません。document.getElementsByTagName('p')はHTML中のpタグを3つ全て探してくるので、その中の何番目について書き換えるかを指定しなければなりません。

そこで、配列を使います。配列は変数と同様に値を記憶することができますが、変数が同時に一つの値を記憶することしかできないのに対し、配列は複数の値を記憶することができます。変数が一軒家（に一人だけ住める）なのに対し、配列はアパートのように部屋が分かれていて、複数の人が住める感じです。

配列の説明は授業で行いますが、例えば、document.getElementsByTagName('p')[0].innerHTML = 'ほげほげ'; とすると、HTML中の一番最初に出てきたpタグの内容が「ほげほげ」に書き換わります。[0]の部分が部屋番号に当たる部分で、1号室ではなく0号室から始まることに注意してください。HTML中の3つのpタグは、出てきた順番に上から0号室、1号室、2号室に入ります。なので、3つ全てのpタグを書き換えるには、

document.getElementsByTagName('p')[0].innerHTML = 'ほげほげ'; //一つ目に出てきたpタグを書き換える
document.getElementsByTagName('p')[1].innerHTML = 'ほげほげ'; //二つ目に出てきたpタグを書き換える
document.getElementsByTagName('p')[2].innerHTML = 'ほげほげ'; //三つ目に出てきたpタグを書き換える

のようにする必要があります。getElementsByClassName()も同様です。

上記3行は[]内の部屋番号が規則的に変化していて他の部分は全く同じなので、繰り返し文を使って簡単に書くことができます（上記サンプルページのソース参照）。今回はpタグの個数は3個と予め分かっていますが、実際にはタグがいくつあるか分からないので、document.getElementsByTagName('p').lengthを使って配列の要素数（つまりpタグが何個あるか）を自動で計算させます（上の例の場合、繰り返しの条件式は i < 3 ですが、i < document.getElementsByTagName('p').length　でも同じことになります）。

課題1についての解説資料(ppt)

練習問題

問題1,2,3の動作サンプル

  1. 次のようなHTMLがあるとき、以下の要件を満たすプログラムを作成しなさい。それぞれボタンがクリックされたら実行されるようにすること（それぞれの問題に一つずつ、ボタンを計2つ作って下さい）。
    <p class="aaa">要素1</p>
    <p class="aaa bbb">要素2</p>
    <p class="ccc aaa bbb">要素3</p>
    <p class="aaa ccc bbb">要素4</p>
    <p class="aaa bbb">要素5</p>

  2. pタグが複数含まれているページを作り、getElementsByTagName()を使ってpタグの数を数え、その数をalert()で表示するプログラムを作成しなさい。配列の要素数は、配列名.length で取得できる。ボタンをクリックすると実行されるようにすること。
  3. 上を改良し、テキストボックスからタグ名を入力し、そのタグの数をalert()で表示するプログラムを作成しなさい。ボタンをクリックすると実行されるようにすること。getElementsByTagName()の()の中にはテキストボックスから取得した文字列を代入した変数を直接書けばよい。
  4. tableタグを使って時間割表を作り、「重要」ボタンをクリックすると落とせない科目名（複数）の背景色が赤になるように、また、「微妙」ボタンをクリックすると落としてもよい（わけではないですが）科目名の背景色が青になるようにしなさい（科目は適当でよい）。

第5回　JavaScriptの基本的な文法の復習

練習問題

  1. モンテカルロ法をN回試行し、円周率を求めるプログラムを作成しなさい。 ただし、N=100とする。モンテカルロ法による円周率の求め方は以下のとおり（詳細は、スライド）。
    1. kを0にする。kは円の中に入った点の数を記憶する変数。
    2. 1×1の範囲の任意の点(x,y)に点を打つ(Math.random()を使い、0~1未満の乱数を生成、変数x, yに代入する）。
    3. 三平方の定理を使い、その点の原点からの距離(xの2乗+yの2乗の平方根（つまり、Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))が1以下ならkに1加える。不等式の両辺を2乗しても同じなので、xの2乗+yの2乗が1以下であれば良い。）
    4. 2〜3をN回繰り返す。
    5. 1/4円の面積は(π*(Math.pow(r, 2))/4で、上記の場合r=1なのでπは(4*k)/Nで求められる。
  2. 上記のモンテカルロ法のプログラムについて、試行回数をプロンプトもしくはテキストボックスから入力できるようにしなさい。動作サンプル

第6回　Canvasを使ったお絵かき(1)-基本図形の描画1-

今日の目標

参考スライド 参考ページ お絵かきの例

練習問題

全てボタンをクリックすると実行されるようにすること。

  1. 正六角形を描画するプログラムを改良し、正N角形を描画するプログラムを作成しなさい。Nはテキストボックスから入力するものとする。
  2. スライドをよく読み、図形1🏁を描画するプログラムを作成しなさい。繰り返しの入れ子を使うこと(以下2問同様)。
  3. 図形2のような図形を描いてみましょう。
  4. 図形3のような図形を描いてみましょう。

第7回　Canvasを使ったお絵かき(2)-基本図形の描画2-

先週の続きです。

練習問題

SAの佐々木くんが作成してくれた円弧に関する資料

  1. 三角形を描画するプログラムを改良し、塗り潰しの色と透明度をそれぞれテキストボックスから指定できるようにしなさい（色はredのようにアルファベットでよい）。デフォルトの色は黒、透明度は0.5である。
  2. 上記を改良し、ボタンをクリックする度にランダムに塗り潰しの色が変わるようにしなさい。
  3. 円弧を描画するプログラムを改良し、半径、startAngleとendAngle、anticlockwise（円弧を描画する向き）、塗り潰しの色をそれぞれテキストボックスから指定できるようにしなさい。startAngleとendAngleはラジアンで入力するものとする。
  4. canvas内のランダムな座標を始点にして、ランダムな座標まで直線を描画するプログラムを繰り返し文を使って改良し、一度に1000のランダムな直線を描画できるようにしなさい。
  5. **モンテカルロ法のプログラムを完成させなさい。大枠だけの穴あきプログラムはここにあるので、埋めてください。あまり助けにならないヒント

第8回　Canvasを使ったお絵かき(3)-アニメーション1-

今日の目標

練習問題

練習問題1,2,3の動作サンプルはここ。ボールの色、大きさ、速さ等は適当に変えて良い。

  1. クリックするとボールが一コマ動くサンプルプログラムをタイマーを使って改良し、ボタンをクリックするとボールが一定の速度で動くようにしなさい。
  2. ボールがCanvasの端っこに来たらボールがバウンドするように改良しなさい。サンプルコードのコメントをよく読むこと。
  3. ストップボタンを作り、クリックするとアニメーションが止まるようにしなさい。

第9回　Canvasを使ったお絵かき(4)-アニメーション2-

今日の目標

配列については、基礎プロ１の第10回に説明があります。

練習問題

先週のボールアニメーションの続きです。

  1. 先週のボールを動かすアニメーションで、ボールの塗り潰しの色の初期値をランダムにしてみましょう。第8回の練習問題2参照。
  2. 配列を使って複数のボールを動かしてみましょう。ボールの初期位置、移動量、半径、色をランダムにします。必ず分かりやすいコメントをつけること。

    3. ***hint***

    複数のボールのパラメータを配列で管理します。初めに空の配列を作っておきます。ボタンをクリックしてinit()が呼ばれると、繰り返し文を使って（作成するボールの数だけ）各パラメータの配列にランダムな値を追加していきます。繰り返しが終わってボールの初期値が決まった後にinit()からdrawBowl()がタイマーで呼ばれます。

    drawBowl()内では、繰り返し文を使って個数分のボールを描画します。ボールが1つの場合、locX[0], locY[0], speedX[0], speedY[0], radius[0], r[0], g[0], b[0]がそのボールのパラメータになります。ボールが2つなら、配列の要素が2つに増えて、2つめのボールのパラメータはlocX[1], locY[1], speedX[1], speedY[1], radius[1], r[1], g[1], b[1]となります。つまり、ボールの個数分だけ配列の要素が増えます。

    ボールが５つの場合、例えばlocXの初期化についてはinit()で次のような繰り返し文を書けばよいでしょう。

    for(let i=0; i<5; i=i+1){locX[i] = Math.random()*400;} //0~400未満(canvasの幅）の乱数をlocX[i]に追加する。iは0~4まで増える。

    あとは穴あきプログラムとボールいっこを動かすサンプルプログラムをよく読んでください。

  3. *上記の動作サンプルにはバグがあります。「ボールを動かす」ボタンを複数回押すと、ボールの速度が速くなり、「とめる」ボタンを押してもアニメーションが止まりません。何故でしょうか？原因を考え、改善しなさい（改善した動作サンプル）。

第10回　Canvasを使ったお絵かき(5)-アニメーション3-

先週の続きです。原理は先週と同じなので、ノーヒント。

  1. 「円をかく」ボタンをクリックすると、円が拡大しながら表示されるようにしなさい。拡大するスピードは適当でよい（サンプルでは5）。「とめる」ボタンをクリックするとタイマーが止まるようにすること。動作サンプル
  2. 問題２を改良します。円の半径がcanvasの幅と等しくなったら縮小し、0になったら拡大するようにしなさい。「とめる」ボタンをクリックするとタイマーが止まるようにすること。動作サンプル
  3. 一辺が10の正方形をランダムな座標に表示していくプログラムを作成しなさい。塗り潰しの色もランダムにすること。stopボタンをクリックするとタイマーが止まるようにすること。動作サンプル
  4. 問題3を改良します。clearボタンをクリックするとcanvasに描画された正方形が全て消去されるようにしなさい（canvasを白紙に戻すには、clearRect()を使う）。動作サンプル

第11回 Canvasを使ったお絵かき(6)-ボールゲーム1-

今日の目標

ただボールが動くだけでは面白くないので、今回と次回で落ちてきたボールをパッドで受け取るゲームを作っていきます。

練習問題

今日の完成形はこちら。

  1. 次のサンプルプログラムは、タイマーを使ってボールが上から落ちてくるプログラムです（まだ未完成なので動きません）。update関数の中のコメント部分を埋めてプログラムを完成させなさい。以前作ったボールアニメーションは、ボールが上下左右の壁にぶつかると跳ね返りましたが、今回は左右の壁に当たった時のみ跳ね返り、ボールが下端に到達したらまた上から落ちてくるようにします。
  2. 次のサンプルプログラムは、（いったんボールは忘れて）パッドを中央下端に表示するプログラムです。コメントを良く読み、未完成部分を埋めてプログラムを完成させなさい。
  3. 次のサンプルプログラムは、練習問題2で描画したパッドをキーボードの矢印キーで左右に動かすプログラムです。コメント部分を埋めてプログラムを完成させなさい。
  4. 練習問題1（ボールを動かす）と練習問題3（パッドを動かす）を合体させて一つのプログラムにしなさい。パッドでボールを受け取ったりする処理は考えなくてよい。

第12回 Canvasを使ったお絵かき(7)-ボールゲーム2-

前回の続きで、ボールゲームを完成させます。

今週の目標

ゲームのおおまかな仕様

練習問題

今回の完成形はこちら。

  1. ボールが落ちてくる時のx座標をランダムにする。
  2. 衝突判定（パッドでボールをキャッチしたら得点が入り、ボールは消えて上からまた落ちてくる）を実装する。
  3. スコアとミスの回数を表示する（ctx.font = '50px serif'; fillText(文字列, x, y);で表示）。
  4. ゲームオーバー機能（ボールをn個取り損なったらゲームオーバーのアラートを出してタイマーをクリアする）を実装する（nは適当に調節する。採点しやすいようにお願いします・・）。
  5. ボールをキャッチする度にスピードが上がる（採点できないような無理ゲーにしないでください・・）。
  6. ボールをm個キャッチしたら、スピードが初期値に戻り、ボールが一つ増える。以下同様に繰り返す。mは適切に調節すること。
  7. その他工夫して何かしら機能を追加する。上のサンプルではボールをキャッチする度にパッドの幅が減少する。他に、パッドから弾丸を発射する、ランダムで得点の多いボールが出現する、クリア条件をつくる、など。

最終課題について

Canvasを使って面白いWebサイトを作って下さい（アニメーションやゲームなど）。要件は以下の通りです。最後の授業でレビューします。

最終課題の要件

課題のサンプル

参考

最終課題の提出方法

第13回　テスト（と最終課題の作業）

変数、関数、繰り返し、条件分岐、配列、、canvasに関する問題は出ません。

第14回　最終課題の発表

作品紹介



正当なCSSです!