基礎プログラミング演習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タグを使って時間割表を作り、「重要」ボタンをクリックすると落とせない科目名（複数）の背景色が赤になるように、また、「微妙」ボタンをクリックすると落としてもよい（わけではないですが）科目名の背景色が青になるようにしなさい（科目は適当でよい）。


正当なCSSです!