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

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

課題の提出方法

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

評価について

注意

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

第1回　授業の概要と復習

環境

復習

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

第2回　HTMLとCSSの復習

目標

来週以降、HTMLとCSSをJavaScriptから操作する方法について勉強しますが、その準備としてHTMLとCSS、Javascriptの基本について復習します。

参考ページ（とほほ）

練習問題

問題6, 7の動作サンプル。「画像を大きくする」というやつ。

第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. その他好きなように装飾しなさい。

    6. 参考ページ(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. これらの図形を描画するプログラムを作成しなさい。繰り返しの入れ子を使うこと。

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

先週の続きです。

練習問題

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

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

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

今日の目標

setInterval()についての解説

練習問題

動作サンプル

  1. ボタンをクリックするとボールが1ピクセル動くサンプルプログラムをタイマーを使って改良し、一度クリックしただけでボールが一定の速度で動きだすようにしなさい。
  2. ボールが左右の端に来たら跳ね返るように改良しなさい。サンプルコードのコメントをよく読むこと。
  3. 同様に、上下の端で跳ね返るようにしなさい。
  4. ストップボタンを作り、クリックするとアニメーションが止まるようにしなさい。

    5. 一つにまとめてよい。

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

先週の続きです。canvasは 400 x 400 でお願いします。

  1. 描画ボタンをクリックすると、中心座標(canvas.width/2, canvas.height/2)の円が拡大しながら表示されるようにしなさい。円の半径の初期値は0とし、拡大するスピードは適当に決めてよい（サンプルでは5）。ストップボタンをクリックするとタイマーが止まるようにすること。動作サンプル
  2. 問題1を改良します。円の半径がcanvasの幅と等しくなったら縮小し、0と等しくなったら拡大するようにしなさい。動作サンプル
  3. 一辺が10の正方形をランダムな座標に表示していくプログラムを作成しなさい。塗り潰しの色もランダムにすること。ストップボタンをクリックするとタイマーが止まるようにすること。動作サンプル
  4. 自分で工夫してアニメーションを作りなさい。


正当なCSSです!