作成者別アーカイブ: hattori

付録A いろいろな機能

最終課題へ向けて、知っていると便利な機能を紹介します。

タイマーによる繰り返し

練習問題06-10でタイマーイベントによる実行をやりましたが、一回だけでなく一定時間ごとに繰り返しイベントを起こすことができます。

インターバルタイマーは、人間がボタンを押す代わりに定期的にJavaScript関数を呼び出してくれます。設定する時は次のようにします。

  • 変数 = setInterval(呼び出す関数, 呼び出す間隔);

「呼び出す関数」はHTMLでonclick=の後ろに書くのと同じように書きます。「呼び出す間隔」はミリ秒単位の数値を書きます。「変数」にはタイマーの番号が保存されます。この番号はタイマーを停止する時に必要です。

タイマーを停止する時は次のようにします。

  • clearInterval(タイマー番号);

サンプルプログラムは次のようになります。画像ファイルpicture.jpgと同じディレクトリに置いてください。

  • interval.html
  • interval.js

setIntervalのカッコの中の「呼び出す関数」は、関数名だけを書くこともできます。上の例だと6行目を次のように書いても同じです。
timerId = setInterval(change, 100);

乱数

数学的な式は、何回計算しても同じ答になります。しかしコンピュータのプログラムでは、計算するたびに違う結果になって欲しい時があります。例えば、ゲームで敵の動き方を計算する時、いつも同じ動きをするよりも実行するたびに違う動き方をする方が面白くなります。

まったくでたらめに数を並べたものを乱数と言います。JavaScriptでは、Math.random()という関数で乱数(に見える数)を計算してくれます。WebコンソールでMath.random()を実行すると何か数が表示されますが、これは実行するたびに違う数になります。

グー、チョキ、パーをデタラメに表示するサンプルプログラムは次のようになります。

  • random.html
  • random.css
  • random.js

配列と乱数

グー、チョキ、パーは3通りでしたが、もっとたくさんのデータがある場合はif文で場合分けするのは面倒です。そのような場合は、配列にデータを記憶させておき、乱数でその中から1個取り出すようにすると便利です。

Math.random()が計算するのは0以上1未満の小数です。配列の要素をデタラメに取り出したい場合は整数の乱数が必要ですが、その場合は切り捨て関数Math.floor()を使って整数に直します。例えば、0から9までの整数の乱数を計算するには次のようにします。

  • Math.floor(Math.random()*10)

占いをするサンプルプログラムは次のようになります。占いの文章をsentenceという配列に記憶させ、その何番目の文を使うかということを、0から文の個数-1までの乱数で決めます。

  • fortune.html
  • fortune.css
  • fortune.js

第11回 配列

配列

配列とは

同じ種類のデータがたくさん並んでいる時は、一個ずつ別の名前を付けるよりも番号を付けた方が便利なことがあります。配列は、ひとつの変数を区切ってたくさんのデータ(配列の要素と呼びます)を保存できるようにしたものです。データを保存したり取り出したりする時は、変数名[番号]という形で指定します。

練習問題 11-1(☆)

Webコンソールで次の式を順に入力してみなさい。

  • var x = ['Alice', 'Bob', 'Carol'];
  • x[0]
  • x[2]
  • x[3]
  • x[2] = 'Charlie';
  • x[2]

[ ] は次の二種類の意味で使われています。

  • カッコの中に、配列の中に入るデータそのものをコンマで区切って書きます。1行目の代入では、'Alice'という文字列、'Bob'という文字列、'Carol'という文字列の三つの要素からなる配列を変数xに保存しています。
  • x[0]のように変数の直後に書く時は、まず変数xに記憶されているのが配列である必要があります。カッコの中に書くのは、その配列の何番の要素かという数字です。x[0]xの中に['Alice', 'Bob', 'Carol']という配列が記憶されていて、その0番の要素なので'Alice'を意味します。x[2] = 'Charlie';を実行すると、2番の要素'Carol''Charlie'で置き換えます。

代入も二種類あります。

  • 1行目では配列まるごと代入しています。この時はイコールの左側は変数名だけで数字は付きません。
  • 5行目では配列の2番の要素に代入しています。他の要素には影響しません。

繰り返しと配列

配列が便利なのは、要素の何番というのを固定せずに変数に記憶しておけば、繰り返しによって変数の値を変えると次々と順番にデータを使えるところです。

カレンダーの例を考えてみましょう。日付は数字を1ずつ増やしていけばよいですが、曜日は日曜の次は月曜、その次は火曜と違う文字列を使う必要があります。繰り返しの中で日、月、火、…と使いたい場合は、あらかじめ配列に日、月、火、…という文字列を記憶しておき、0番の曜日、1番の曜日、2番の曜日、…と指定します。

練習問題 11-2(☆☆☆)
  1. 練習問題09-5でビスケットの数を増やしていったのと同じ要領で、箇条書き(ul要素)の項目(li要素)に1日、2日、3日、…と書き込みます。ファイルex11-2.htmlex11-2.jsを次のように書きなさい。

  2. 上のプログラムは次の図とどう対応するでしょうか?また、繰り返しをぐるぐる回ると、変数xの値はどう変わるでしょうか?
  3. コンソールで次の式を順に入力してみなさい。
    • var day = ['日','月','火','水','木','金','土'];
    • var n = 1;
    • day[n]
    • n = n+1;
    • day[n]
    • n = n+1;
    • day[n]
  4. ex11-2.jsを修正して、「1日(月)、2日(火)、3日(水)、…」と表示されるようにしなさい。7日以後の曜日はどう表示されるでしょうか?
  5. 7日以後も曜日を正しく表示するには、配列の中に31個の曜日を書くのもひとつの方法ですが、もっとうまいやり方があります。それは割り算の余り(%演算子)を使う方法です。コンソールで次の式を順に入力してみなさい。
    • 7 % 7
    • 8 % 7
    • 9 % 7
    • 14 % 7
    • 15 % 7
    • 21 % 7
    • 22 % 7
  6. 割り算の余りを利用して、31日まで曜日が表示されるようにしなさい。

カレンダーをもう少し実用的にしてみましょう。

練習問題 11-3(☆☆☆☆☆)
  1. 新しい入力欄を作り、そこに何月か数字を入力すると、その月の日数(28日か30日か31日)まで表示するようにしましょう。1月から12月までの日数の配列[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]を使います。
  2. もうひとつ入力欄を作り、そこに何年か数字を入力すると、正しい曜日で表示するようにしましょう。曜日の計算にはツェラーの公式を使います。
  3. 箇条書きではなく表を使ってカレンダーっぽくしてみましょう。(いちおう見本があります。授業でやってない機能を多く使っているので、あまり参考にならないかもしれませんが…)

複数のHTML要素を操作する

前にdocument.getElementById()でHTML要素を指定して中身を操作したり(innerHTML)、文字列を入力したり(value)しました。これは、id="..."で付けた名前がページの中で一箇所しかないので、どこを指しているかは一意的に決まります。

それに対して、複数のHTML要素をまとめて操作することもできます。document.getElementsByTagName()(さりげなくElementsと複数形になっていることに注意)は、カッコの中にタグ名を指定します。id="..."と違ってタグ名はページの中に同じものが何箇所も出てきますが、それ全部を指します。とりあえず全部を並べた配列を変数に保存して、後で何番のinnerHTMLとか指定して操作するのが普通です。

練習問題 11-4(☆)
  1. ブラウザでSFC-SFSのログインページを表示しなさい。
  2. ページのソースを表示し、li要素がどこに使われているか探しなさい。
  3. コンソールを開き、次の式を入力してみなさい。ページのどの部分と対応しているか分かるでしょうか?
    • var x = document.getElementsByTagName('li');
    • x[0].innerHTML
    • x[1].innerHTML
    • x[4].innerHTML
  4. ページの中でli要素が何個あったかは、配列の要素が何個あるか調べればわかります。変数xに記憶されている配列の要素の個数を調べるには、x.lengthとします。コンソールでx.lengthと入力してみなさい。
  5. スクラッチパッドを開き、次のプログラムを入力して実行してみなさい。表示はどうなるでしょうか?なぜ、そのような表示になるのか説明しなさい。
  6. input要素も同じように操作できます。スクラッチパッドで次のプログラムを入力して実行してみなさい。

実は、このページにinput要素は4個あります。4個目はtype="hidden"で画面には表示されません。画面に表示されないinput要素が何の役に立つかというと、サーバに送信するデータを保持する役目をしています。これについてはブラウザとサーバの関係を勉強しないといけませんが、それは「情報基礎2」で勉強します。

ラジオボタン

複数の選択肢から一つだけ選ぶというタイプの入力には、ラジオボタンを使います。

  • input要素のtype属性にradioを指定すると、一つのボタンができます。
  • 選択肢それぞれについて別々のinput要素を書きます。
  • どのinput要素がグループ(その中で一つだけ選ぶ)になっているかを示すために、name属性の値が同じものがグループになるという約束があります。例えば、「総合政策」、「環境情報」、「看護医療」、「1年」、「2年」、「3年」、「4年」という選択肢がある場合、「総合政策」、「環境情報」、「看護医療」のname属性には同じ値を書き、「1年」、「2年」、「3年」、「4年」のname属性にはさっきとは別の同じ値を書きます。

JavaScriptでラジオボタンのどれが押されたかを調べるには、まずページの中にあるラジオボタンを取り出さないといけません。getElementByIDだと一つのボタンしか取り出せませんし、getElementsByTagNameだとラジオボタン以外のinput要素も取り出されてしまいます。この場合はgetElementsByName(カッコの中にname属性の値を指定)を使うと、一つのグループのラジオボタンだけ集めて取り出せます。

練習問題 11-5(☆☆☆)
  1. ファイルex11-5.htmlを次のように書きなさい。
  2. ブラウザで上のファイルを表示し、ウェブコンソールで次の式を実行してみなさい。
    • var x = document.getElementsByName('faculty');
    • x[0]
    • x[0].value
    • x[1]
    • x[1].value
  3. ラジオボタンが選択されているかどうかは、ラジオボタン.checkedの値がtruefalseかでわかります。何も選択していない状態でウェブコンソールで x[0].checked を実行し、次に「総合政策」のボタンをクリックしてからもう一度 x[0].checked を実行してみなさい。
  4. truefalseかはif文の条件として使えます。まず「総合政策」をクリックした状態でウェブコンソールで次の式を実行し、次に「環境情報」をクリックした状態でもう一度実行してみなさい。
    • var f = '不明';
    • if (x[0].checked) { f = x[0].value; }
    • alert(f);
  5. ファイルex11-5.jsを次のように書き、「環境情報」をクリックした状態で「ここを押して」をクリックしてみなさい。その時のプログラムの動きを説明しなさい。
  6. 学部を表す「P」、「E」、「N」の後に学年も表示するようプログラムを修正しなさい。
チェックポイント
  • 配列とは何でしょうか?
  • x[0] はどういう意味でしょうか?
  • getElementByID, getElementsByTagName, getElementsByNameの違いは何でしょうか?

第10回 コンピュータの仕組み

コンピュータの仕組み

洗濯機はモーターを回転させて洗濯する機械ですし、炊飯器はヒーターで加熱して米を炊く機械です。では、コンピュータはどういう仕組で何をする機械でしょうか?

(PPT版ダウンロード)

「PCのスペック」テンプレート (DOC版 | PDF版)

練習問題 10-1(☆)
  1. ジュースの自動販売機では、何が入力で、中でどんな処理をして、何が出力されるでしょうか?
  2. 練習問題07-5の「なぞなぞ」では、何が入力で、中でどんな処理をして、何が出力されるでしょうか?
練習問題 10-2(☆☆☆)
  1. 練習問題09-5の「ふしぎなポケット」で、ファイルex09-5.htmlex09-5.jsは主記憶装置に保存されていますか、補助記憶装置に保存されていますか?
  2. 「ポケット」ボタンをクリックすると、ブラウザの画面には「ポケットを叩くとビスケットが2つ」と表示されますが、この文字列は主記憶装置に保存されていますか、補助記憶装置に保存されていますか?
  3. ブラウザの再読み込みをすると、画面は「ポケットの中にはビスケットが1つ」だけに戻りますが、この時主記憶装置と補助記憶装置の間ではどのようなデータのやり取りが行われたでしょうか?
練習問題 10-3(☆)
  1. アクティビティモニタ(ディレクトリ【アプリケーション】→【ユーティリティ】の中)を起動しなさい。
  2. 「CPU」のタブを選ぶと、下にCPU使用率のグラフが表示されます。いろいろなアプリを起動したり終了したりして、グラフの変化を見なさい。
  3. 「ディスクの動作」のタブを選ぶと、下にディスクアクセスのグラフが表示されます。いろいろなアプリを起動したり終了したりして、グラフの変化を見なさい。

Windows10では、「タスクマネージャー」の「パフォーマンス」タブでCPUの使用率などを見ることができます。

オペレーティングシステム

オペレーティングシステム(OS)とは、コンピュータを管理するためのソフトウェアで、次のような機能があります。

プロセス管理
他のソフトウェアの起動、実行、終了などを管理する。
デバイスドライバ
応用(アプリケーション)ソフトウェアが入出力装置を使う時、実際の細かい操作はオペレーティングシステムに任せることによって、アプリケーションを作りやすくする。
ファイルシステム
補助記憶装置を使う時に、データをファイルやディレクトリという単位にまとめることで使いやすくする。
セキュリティ
装置やデータに対するアクセス権限を管理する。
ユーザインタフェース
GUIやCUIでコンピュータを操作できるようにする。

現在広く使われているオペレーティングシステムには次のような種類があります。

パソコン用
Windows, MacOS, Linux系(Ubuntuなど)
スマートフォン用
iOS, Android (カーネル部分はLinux)
サーバ用
Windows Server, Unix系(Solarisなど), Linux系(RedHatなど), メインフレーム系(z/OSなど)

プロセス管理

アプリケーションの実行中の状態をプロセスと呼びます。オペレーティングシステムはプロセスがどのような動きをしているかを管理し、必要ならば強制的に終了させることが出来ます。

練習問題 10-4(☆☆)
  1. アクティビティモニタを起動し、どのようなプロセスが動いているか見なさい。
  2. 項目名の「%CPU」のところをクリックし、CPUをたくさん使っている順に並び替えなさい。
  3. ブラウザやエディタでいろいろな操作をして、表示順がどう変わるか見なさい。
  4. アップルマークのメニューから【強制終了…】を実行し、ブラウザ(または他の適当なアプリケーション)を強制終了させなさい。
  5. 「保存していない変更内容は失われます」と注意が出ますが、これは何を意味しているのか、主記憶装置・補助記憶装置との関係で説明しなさい。

Windows10では「タスクマネージャー」を使って強制終了できます。

ファイルシステム

第3回でも勉強しましたが、もう一度復習します。

  • 補助記憶装置(主にHDD)の中身は、ディレクトリ(フォルダ)とファイルによって整理されています。
  • ディレクトリが違えば同じファイル名で別のファイルを作れます。したがって、ファイルを正確に指定するにはディレクトリも含めたパス名(絶対パス名または相対パス名)が必要です。
練習問題 10-5(☆☆)
  1. 前に作った「情報基礎」ディレクトリ(または他の適当なディレクトリ)の中に ex10-5.txt というファイルを作り、好きな文章を書きなさい。
  2. エディタで ex10-5.txt の絶対パス名を確認しなさい。
    • miでは、一番上にある/automountで始まる部分です。
    • Emacsでは、M-x pwdでディレクトリ名が表示されます。
    • Atomでは、ファイル名が表示されているタブのところにマウスカーソルを持って行くと、ポップアップで表示されます。
  3. ex10-5.txt をデスクトップにコピー(optionキーを押しながらマウスでドラッグ)しなさい。
  4. コピーしたファイルをエディタで開き、絶対パス名をさっきと比べなさい。
  5. コピーしたファイルの中身を適当に書き換えて保存しなさい。
  6. 元のファイルの内容は書き換わっているでしょうか?
  7. 元の ex10-5.txt のエイリアスをデスクトップに作りなさい(optionキーとcommandキーの両方を押しながらドラッグ、または右クリックメニューで「エイリアス作成」を選んでエイリアスを作り、それをデスクトップにドラッグ)。
  8. エイリアスをエディタで開き、中身を適当に書き換えて保存しなさい。
  9. 元のファイルの内容は書き換わっているでしょうか?
  10. 元の ex10-5.txt を削除しなさい。
  11. エイリアスをエディタで開くとどうなるでしょうか?
  • コピーは、内容が同じ別のファイルを作ります。名前が同じでもディレクトリが違えば別のファイルです。
  • エイリアスは、一つのファイルに別の名前を付けます。名前が違っていても同じファイルです。

ユーザインターフェース

(PPT版ダウンロード)

練習問題 10-6(☆☆☆☆☆)
  1. スライド資料にあった「宝探しゲーム」と同じものをウェブページのリンクで作ってみましょう。方針としては、各ディレクトリに map.html というファイルを作り、これをリンクでつないでいきます。
  2. 宝探しゲームのディレクトリを自分のディレクトリにコピーします。ターミナルで次のコマンドを実行しなさい。

    • cp はファイルやディレクトリをコピーするコマンドです。引数としてコピー元とコピー先の二つのパス名を書きます。
    • -R は指定したディレクトリの下にあるファイルを全部一気にコピーせよというオプションです。
    • 最後の ~/Desktop/情報基礎 はスライド資料の演習で作ったディレクトリです。~ は自分のホームディレクトリを表します。
  3. デスクトップの情報基礎ディレクトリの中に islands というディレクトリができていることを確認しなさい。
  4. islands の中に map.html というファイルを作ります。内容は次のようにします。
  5. islands の中の island-a の中にも map.html というファイルを作ります。内容は次のものを書きます。
    • 「ロードス島の地図」という見出し
    • 三つの港へのリンク
    • 出発点(islands の中の map.html)へ戻るリンク
  6. islands の中の island-a の中の port-a の中にも map.html というファイルを作ります。内容は次のものを書きます。
    • ファイル empty へのリンク(画面には「宝の箱」と表示)
    • 「ロードス島の地図」へ戻るリンク
  7. ここまで作ったものが http://ipl.sfc.keio.ac.jp/text/info1/exercise/islands/map.html にありますので、これを参考にして他の島や港のページを作りなさい。ある港から別の島の港への近道なども作ってみなさい。

emptygarbage はHTMLファイルではありません。そのようなファイルをどう表示するかはブラウザの設定によって違います。特別教室の設定では、Firefoxは中身のテキストをそのまま表示し、SafariはFinderでそのファイルを表示します。

場合分けと繰り返しの復習

場合分け繰り返しを前に勉強しましたが、それを組み合わせて使ってみましょう。

Fizz Buzzという遊びがあります。1から順に数字を言っていきますが、3で割り切れる時は数字の代わりにFizz、5で割り切れる時はBuzz、両方で割り切れる時はFizz Buzzと言わなければなりません。これをコンピュータにやらせてみましょう。

練習問題 10-7(☆☆☆)
  1. 練習問題09-6のプログラムを修正し、1から30までの数字が順に表示されるようにしなさい。
  2. 繰り返しの図の箱の中には何と書けばよいでしょうか?
  3. まず、3で割り切れる時はFizz、割り切れない時は数字を表示するようにします。場合分けの図の箱の中には何を書けばよいでしょうか?それから、上の繰り返しの図の中のどれかの箱を消して、下の場合分けの図を組み込みなさい。
  4. 上で描いた図に従ってex09-6.jsのプログラムにif文を組み込みなさい。条件の「3で割り切れる」とは「3で割った余りが0と等しい」ということです。割り算の余りを計算する演算子は%ですので、変数countの値を3で割った余りはcount % 3で計算できます。
  5. 次に、3で割り切れて5でも割り切れる場合はFizz Buzzと表示するようにします。さっき描いた図のどこに場合分けを組み込めばよいでしょうか?それに従ってif文を書きなさい。
  6. 最後に、3で割り切れなくて5では割り切れる場合はBuzzと表示するようにしなさい。
練習問題 10-8(☆☆☆☆☆)

何年か前に世界のナベアツ(今は桂三度)が「3の倍数と3が付く数字の時だけアホになります」というネタをやっていましたが、これをコンピュータにやらせてみましょう。1から99までの数字を順に表示し、3の倍数の時、1の位が3の時、10の位が3の時、数字の後に「アホ」と表示してみましょう。できれば論理演算子を使ってif文1個だけで書いてみましょう。

チェックポイント
  • コンピュータの五つの機能は何でしょうか?
  • CPUの性能は何によって測れるでしょうか?
  • 主記憶装置と補助記憶装置の違いは何でしょうか?
  • プロセスとは何でしょうか?
  • ファイルのアクセス権は何のために必要でしょうか?

第9回 繰り返し

変数の値の変化

現在の値を使った計算

変数には代入によってデータを記憶させることができます。

データは何かの式を計算した結果の値なわけですが、その式の中に、代入する先の変数の「現在の」値を使うことができます。例えば、変数xに対して、次のような代入を考えます。

  • x = x + 1;

「現在の」xの値が2だとすると、まずx+1を計算して3になります。それから、それをxに代入するので「次の瞬間の」xの値は3になります。

練習問題 09-1(☆)
  1. コンソールで次の式を順に計算してみなさい。
    • var x = 3;
    • x = x + 1;
    • x = x + 1;
    • x = x + 1;
  2. コンソールで次の式を順に計算してみなさい。
    • var x = 1;
    • x = x * 2;
    • x = x * 2;
    • x = x * 2;
    • x = x * 2;
練習問題 09-2a(☆☆)
  1. ファイルex09-2.htmlを次のように書きなさい。
  2. ファイルex09-2.jsを次のように書きなさい。
  3. ボタンを何回かクリックしてみなさい。数字はどのように変わるでしょうか?

「今の値に○○する」というのはよく使うのですが、同じ変数名を2回書くのは無駄です。それで、「今の値に○○を足す」という+=演算子や、「今の値から○○を引く」という-=演算子が用意されています。例えば、 x = x - 2;x -= 2; と書いても同じです。
さらに、「1を足す」と「1を引く」はすごくよく使うので、++演算子と--演算子もあります。 x = x + 1;x += 1;++x; は同じ意味です。なお、 x++; と書いても1を足せますが、意味が微妙に違います(次の資料を参照)。

デバッガの使い方

プログラムが複雑になってくると、今どこを実行しているのか、変数はどんな値になっているか分からなくなることがあります。そんな時は、デバッガを使って調べることができます。

デバッガを使うと、次のようなことができます。

一時停止・ステップ実行・実行再開
プログラムを実行する前に、あらかじめ停止させたい場所(ブレークポイントと呼びます)を設定しておきます。プログラムの実行が順に進んでいって、ブレークポイントのところまで来ると、実行が一時停止します。そこから実行を再開することもできますし、1ステップだけ実行してまた停止させることもできます。
変数の値の表示・変更
ブレークポイントで停止している状態で、変数の現在の値を表示できます。また、値を書き換えてから実行を再開することができます。
練習問題 09-2b(☆☆☆☆)
  1. 練習問題09-2aの続きです。ここからは下の動画を見ながらやりなさい。字が小さいので全画面表示にした方がいいです(そうすると自分の操作ができなくなりますが…)。
  2. Firefoxでex09-2.htmlを表示し、メニュー【ツール】→【Web開発】→【デバッガ】を選択すると、下半分にデバッガが表示されます。
  3. 左側に、このページで使われているファイルが表示されるので、ex09-2.jsをクリックすると、JavaScriptのプログラムが右側に表示されます。
  4. プログラムの行番号が表示されているところをクリックすると、その行を実行する直前で停止するようにブレークポイントを設定できます。5行目をクリックして、alertの直前で停止するようにしなさい。
  5. 上半分にある「実行ボタン」をクリックして、関数addCount()を呼び出しなさい。下半分の表示はどう変わるでしょうか?
  6. 変数の値はプログラムの右側に表示されます。「スコープ」については難しいのでこの授業では説明しませんが、変数宣言関数定義の外にあればグローバルスコープ、中にあればfunctionスコープになります。グローバルスコープの横の三角をクリックして変数一覧を表示し、countの値が何になっているか調べなさい。
  7. 実行を再開するには、ファイルリストの上にある右向き三角をクリックします。再開して、countの値とダイアログボックスに表示される数字が同じであることを確認しなさい。
  8. プログラムの4行目をクリックして、count = count + 1の直前でも停止するようにしなさい。
  9. 上半分にある「実行ボタン」をクリックして、関数addCount()を呼び出し、4行目で停止したらcountの値を調べなさい。
  10. 実行を再開させなさい。5行目でも停止しますが、countの値はどうなっているでしょうか?
  11. 実行を再開し、ダイアログボックスに表示される数字を確認しなさい。
  12. 設定されているブレークポイントをクリックすると、解除できます。4行目と5行目のブレークポイントを解除しなさい。

参考資料

HTMLの属性を変化させる

練習問題08-8では、ボタンを押すと画像の横幅を800に設定しましたが、これを「ボタンを押すと画像の横幅を今の値より10増やす」にしてみましょう。

練習問題 09-3(☆☆☆)
  1. ファイルex09-3.htmlを次のように書きなさい。
  2. ファイルex09-3.jsを次のように書きなさい。
  3. ブラウザで表示してボタンをクリックしてみなさい。
  4. ex09-3.jsの先頭にwという名前の変数宣言を追加し、最初の値として100を代入しなさい。
  5. setAttributeのカッコの中にある幅の指定を'800'ではなく、変数wにしなさい。
  6. 関数changeの中に、「変数wの値を10増やす」という文を書き、ボタンをクリックするたびに画像が大きくなっていくようにしなさい。
練習問題 09-4(☆☆☆☆)

新しくテキスト入力欄を作り、そこに数字を入れてからボタンを押すと、画像の横幅がその数だけ増えていくようにしてみましょう。

ページに内容を追加していく

練習問題06-8で、innerHTMLを使ってページの表示内容を変更することをやりました。変数の値を変えながらinnerHTMLに代入すると、ページの内容がだんだん変化していくようにできます。

練習問題 09-5(☆☆☆)
  1. ファイルex09-5.htmlを次のように書きなさい。
  2. ファイルex09-5.jsを次のように書きなさい。
  3. ブラウザで表示し、「ポケット」ボタンを1回クリックしてみなさい。表示はどう変わったでしょうか。
  4. ex09-5.jsの2行目と3行目で、変数xにはどのような値が代入されたでしょうか?
  5. 結果としてHTMLの構造(ul要素とli要素の関係)はどうなったでしょうか?
  6. 「ポケット」ボタンをさらに何回かクリックしてみなさい。ビスケットは増えますか?
  7. ビスケットの個数を増やすため、個数を保存しておく変数bex09-5.jsの先頭で宣言しなさい。最初の値として1を代入します。
  8. 「ビスケットが1つ」の数字の1の代わりに変数bの値を使うようにしなさい。文字列と数値の連結は+でできます。
  9. 関数knock()の中に「変数bを1増やす」という文を追加しなさい。
  10. ブラウザで表示し、「ポケット」ボタンをクリックして、ビスケットが増えていくか確認しなさい。

自動的な繰り返し

上の練習問題では、ボタンを1回クリックするたびに何かを1回実行するので、繰り返し実行するにはボタンを何回もクリックしないといけません。今度は、ボタンを1回クリックするだけで何回も繰り返して実行するようにします。

for文

命令を繰り返して実行するにはfor文を使います。for文は次のような形をしています。

  • for ( 初期化; 条件; 変化 ) { 処理 }

これは次のように実行されます。

  1. 「初期化」の部分を実行します。
  2. 「条件」の部分を計算します。
  3. 「条件」が成り立つ(値がtrueである)ならば「処理」の部分を実行します。
  4. 「変化」の部分を実行します。
  5. 再び「条件」の部分を計算し、成り立つならば、また「処理」と「変化」の部分を実行します。
  6. 「条件」が成り立たなくなる(値がfalseになる)と終了します。

練習問題 09-6(☆☆☆)
  1. ファイルex09-6.htmlを次のように書きなさい。
  2. ファイルex09-6.jsを次のように書きなさい。
  3. ブラウザで表示してボタンをクリックしてみなさい。
  4. 紙に次の図を描き、ex09-6.jsのプログラムのどの部分がどの箱に対応しているか書き込みなさい。
  5. ex09-6.jsの2行目のcount <= 5count >= 5に書き換えて再読み込みし、ボタンを押してみなさい。なぜこうなるのでしょうか?
  6. 今度はcount >= 0にに書き換えて再読み込みし、ボタンを押してみなさい。なぜこうなるのでしょうか?
練習問題 09-7(☆☆☆☆)

練習問題09-5のプログラムを改造し、「ポケット」を1回クリックすると、一気に「ポケットを叩くとビスケットが100つ」まで100行追加されるようにしなさい。

練習問題 09-8(☆☆☆☆)

新しくテキスト入力欄を作り、そこに数字を入力してからボタンを押すと、ビスケットの数がその値になるまで繰り返すようにしてみましょう。

同じようにして、練習問題09-3もfor文を使って画像がだんだん大きくなっていくようにできそうな気がしますが、これはうまくいきません。どうしてかというと、for文の繰り返しは一瞬のうちに実行されるので、実際に見えるのは最後の一番大きなサイズの画像だけだからです。画像をだんだん大きくする方法は、付録Aの「タイマーによる繰り返し」を見てください。

while文とdo-while文

繰り返し実行には、for文だけでなくwhile文やdo-while文を使うこともできます。どれを使ってもだいたい同じことが書けますので、書きやすいものを使ってかまいません。

while文は次のような形をしています。

  • while ( 条件 ) { 処理 }

do-while文は次のような形をしています。

  • do { 処理 } while ( 条件 )

while文と違い、まず処理をしてから条件を調べます。最初から条件が成り立たない場合、while文は処理を1回も実行しませんが、do-while文は必ず1回は処理を実行します。

for文と同じことをwhile文で書くと、次のようになります。

  • 初期化; while ( 条件 ) { 処理; 変化; }
練習問題 09-9(☆☆☆☆)

練習問題09-6練習問題09-7をwhile文を使って書いてみましょう。

チェックポイント
  • x = x * 2 はどういう意味でしょうか?
  • for文はどのような形をしているでしょうか?
  • for文の初期化を実行した時点で条件が成り立たたない場合はどうなるでしょうか?

第8回 情報量

情報量の定義

場合の数と情報量

「ファイルのサイズが大きい」とか「このウェブページは重い」と言いますが、情報の量はきちんと量ることができます。(これは記憶装置の容量とも関係しますが、それについては第10回で勉強します)

(PPT版ダウンロード)

練習問題 08-1(☆☆☆)
  1. 血液型を区別するには何ビットの情報量が必要でしょうか?
  2. 血液型を当てるには、yes/noで答えられる質問を何回すればいいでしょうか?if文の図形を組み合わせて、どのようにすれば血液型が当てられるか描きなさい。
  3. ファイル ex08-1.html を次のように書きなさい。
  4. ファイル ex08-1.js を作って、「判定」をクリックすると「あなたは〜型です」というメッセージが出るようにしなさい。
  5. テキスト入力欄にyes, no以外の文字列が入力された時は、「yesかnoを入力してください」とメッセージを出すようにしなさい。

画像の情報量

ビットマップ画像の情報量を考えてみましょう。

  • ビットマップ画像はピクセル(標本化によって区切られたマス目)の集まりです。
  • 白黒画像の場合、各ピクセルは白か黒のカード1枚と同じなので1ビットの情報を持ちます。カラー画像の場合、ピクセルごとに色を表すための情報が必要です。
  • 全体の情報量は、ピクセルごとの情報量にピクセル数を掛けたものになります。
練習問題 08-2(☆☆)
  1. 横640ピクセル、縦480ピクセルの白黒画像の情報量は約何キロバイトでしょうか?
  2. 横640ピクセル、縦480ピクセルの16色画像の情報量は約何キロバイトでしょうか?

テキストエンコーディング(文字コード)

人間が読む文字を、コンピュータで処理できる形に直すやり方をテキストエンコーディング(または文字コード)と呼びます。今までHTMLファイルの最初の方におまじないとして書いていた <meta charset="utf-8"> は、テキストエンコーディングの種類を指定するものです。

(PPT版ダウンロード)

練習問題 08-3(☆)
  1. Firefoxで適当なページを表示し、メニューの【表示】→【文字エンコーディング】→【他の文字エンコーディング】の中からいろいろなエンコーディングを選択してみなさい。
  2. テキストエディタでファイルを保存する時、どのエンコーディングを使うかを指定できます。
    • mi: ツールバーの中に現在のエンコーディングが表示されている。そこをマウスでクリックするとメニューが出て、他のエンコーディングに変更できる(下のビデオ参照)。
    • Emacs: キーで C-x RET f あるいはメニューで [Options]→[Multilingual Environment]→[Set Coding System]→[For Saving This Buffer] とし、エンコーディングの名前を入力する。
    • Atom: 右下に現在のエンコーディングが表示されている。そこをマウスでクリックするとメニューが出て、他のエンコーディングに変更できる。エンコーディングを変更して保存する機能はうまく動かないようです。

    前に作った自己紹介のファイル introduction.html をテキストエディタで別のエンコーディングに変えて保存してみます。これをブラウザで表示する時は、charsetで指定したエンコーディングだと思って表示するので、保存した時のエンコーディングと違うと文字化けが発生します。

    1. テキストエディタのエンコーディングを euc-jp にしてから保存し、ブラウザで表示してみる。
    2. charset="utf-8"charset="euc-jp" に変更して保存し、ブラウザで表示してみる。
    3. テキストエディタのエンコーディングを utf-8 に戻して保存し、ブラウザで表示してみる。
    4. charset="euc-jp"charset="utf-8" に戻して保存し、ブラウザで表示してみる。

    (6/6修正)Atomで上の手順を実行するとファイルが壊れる場合があるので、この部分を削除しました。

データの圧縮

データによっては、見かけは大きくても、冗長な部分があって実際の情報量は小さいことがあります。また、画像や音声などは、人間は気がつかない程度に情報を削ることができます。そのような場合、同じ(あるいは人間から見るとほぼ同じ)情報を別の形に変換してデータ量(保存に必要な記憶容量)を小さくすることを圧縮と呼びます。

(PPT版ダウンロード)

練習問題 08-4(☆☆)
  1. ランレングス法で圧縮された次のビット列を展開しなさい。
    • 長さは3ビットで表し、最初は0の長さから始まります。
    • 途中で000が出てくるのは、同じ数字が長く続く場合です。例えば0が9回というのは(9が3ビットで書けないので)、0が7回、1が0回、0が2回と考え、111 000 010 と表します。
    111 000 110 001 111 000 001 001 101 111 100 011 101 001 011 001 011 001 101 001 001 001 111 001 111 000 010
  2. 紙に9×9のマス目を描き、展開したビット列の0は白、1は黒として左上から右下に順にマス目を塗っていきなさい。どのような図形になるでしょうか。

この例では、元のビット列と圧縮したビット列が同じ長さです。データの内容と圧縮方法によっては、圧縮するとかえってデータ量が大きくなる場合があります。

練習問題 08-5(☆☆☆☆☆)

下の参考資料を見て、次のデータをハフマン符号化で圧縮しなさい。

東京 千葉 茨城 東京 神奈川 群馬 東京 神奈川 神奈川 千葉 東京 千葉 埼玉 東京 神奈川 埼玉 東京 東京 埼玉 神奈川 千葉 茨城 神奈川 東京

画像ファイル

ファイル形式

画像ファイルは、色情報の表現や圧縮の方法の違いによっていろいろな形式があります。ウェブで使われる形式は、主に次の三種類です(詳しくは参考資料参照)。

GIF
可逆圧縮。色は8bit(256色)まで。複数の画像をアニメーション表示できる。
PNG
可逆圧縮。色は48bit(約280兆色)まで。
JPEG
不可逆圧縮で、圧縮率を変更することができる。色は24bit(約1600万色)まで。

写真などのピクセルごとに色が違う画像は、可逆圧縮で小さくすることは難しいので、多少情報を捨てながら圧縮するJPEGが適しています。イラストやロゴなどの色が均一で輪郭のはっきりしている画像は、不可逆圧縮だと画像の劣化が目につくので、可逆圧縮のGIFやPNGが適しています。

練習問題 08-6(☆)
  1. 自己紹介の写真をプレビューで開きなさい。普通はダブルクリックで開きます。
  2. メニューの【ファイル】→【書き出す…】でダイアログボックスを表示しなさい。
  3. JPEGの最低品質を選択し、別の名前でファイルに書き出しなさい。
  4. 元の画像と最低品質の画像をプレビューで並べて表示しなさい。画質の劣化は判るでしょうか?
  5. Finderの表示をリストにするとサイズなどの情報が表示されます。元の画像と最低品質の画像でサイズが違うかどうか比べなさい。

画像のサイズ

画像の「サイズ」と言った場合、ファイルに保存するデータ量という意味の時もありますが、普通は画像を構成するピクセルの縦と横の数を指します。実際に何センチの大きさかということは、表示する装置によってピクセルの大きさが違うので一概には言えません。

画像の情報量のところでやったように、ピクセル数が少なくなれば情報量も小さくなります。画像ファイルが(圧縮してあっても)大きい場合、サイズを小さくして(標本化を粗くして)データ量を減らすことができます。画像の多いページでは、サイズを小さくした画像(サムネイル)をまず表示し、クリックすると元の大きな画像を表示することがよくあります。

練習問題 08-7(☆☆)
  1. 自己紹介の写真の複製を作り、それをプレビューで開きなさい。(すでにサイズの小さな写真を使っている場合は、もう一度フォトブースで撮影して大きなサイズの写真を使いなさい)
  2. メニューの【ツール】→【サイズを調整…】でダイアログボックスを表示しなさい。
  3. 幅と高さを変更し、ファイルサイズがどう変わるかを見なさい。
  4. サムネイルとして適当なサイズにして、保存しなさい。
  5. 練習問題06-9の2枚の写真をサムネイルとオリジナルにしなさい。

写真を切り替えるのにボタンを使わず、img要素onclick属性を付ければデザイン的にスッキリします。ただし、見る人が画像をクリックすることに気がつかない可能性もあります。

表示サイズの指定

img要素で画像ファイルを表示する時に、width属性・height属性でサイズを指定して拡大・縮小することができます。

  • 単位はピクセルです。
  • width属性とheight属性のどちらか片方だけ指定すると、高さと幅は同じ割合で拡大・縮小されます。

JavaScriptでは、setAttribute() でwidth属性やheight属性の値を変更することで拡大・縮小ができます。setAttribute() の使い方は次の通りです。

  • 変更したい要素を document.getElementById() で指定します。
  • その後に .setAttribute() を書きます。
  • カッコの中は変更したい属性名と値です。
練習問題 08-8(☆☆☆)
  1. 自己紹介の写真の複製(または適当な画像ファイル)を作り、ファイル名を picture.jpg としなさい。
  2. ファイル ex08-8.html を次のように書きなさい。
  3. width="600"width="400" に変更し、ブラウザで再読み込みしてみなさい。
  4. ファイル ex08-8.js を次のように書きなさい。
  5. 新しくボタンを作り、ボタンを押すと上の関数 change() を呼び出すように ex08-8.html を修正しなさい(JavaScriptファイルを読み込むscript要素も忘れないように)。
練習問題 08-9(☆☆☆☆)

新しくテキスト入力欄を作り、数字を入力してボタンを押すと、画像がその幅で表示されるように ex08-8.htmlex08-8.js を修正しなさい。

width属性・height属性による指定は、画像を表示する時に拡大・縮小するだけなので、ブラウザが読み込むデータ量は変わりません。サムネイルのつもりで小さな値を指定しても、ページの読み込みが速くなるわけではありません。

チェックポイント
  • 1ビットとは何を意味しているのでしょうか?
  • 場合の数と情報量にはどんな関係があるでしょうか?
  • ビットマップ画像の情報量はどのように計算するのでしょうか?
  • 文字のエンコーディング(文字コード)とは何でしょうか?
  • 可逆圧縮と非可逆圧縮はどう違うでしょうか?
  • PNGとJPEGは、それぞれどんな画像に適しているでしょうか?

第7回 場合分け

データの入力

人間がマウスやキーボードを操作してコンピュータに情報を伝えることを入力と呼びます。逆にコンピュータがディスプレイに文字や絵を表示したり、スピーカで音を鳴らしたりして人間に情報を伝えるのは出力です。なお、コンピュータの構造と入力・出力の関係については、第10回で勉強します。

文字列の入力

前回までは入力としてマウスをクリックするだけでしたが、今度はキーボードを使って文字を入力してみましょう。第2回でやったようにHTMLでテキスト入力欄を作り、JavaScriptでそこに入力された文字を読み取ることができます。

練習問題 07-1(☆)
  1. ファイルex07-1.htmlを次のように書きなさい。
  2. ファイルex07-1.jsを次のように書きなさい。
  3. テキスト入力欄に自分の名前を書いて、「あいさつ」ボタンをクリックしてみなさい。

利用者が入力したテキストをJavaScriptで読み書きするには、document.getElementById().valueを使います。前回のHTML要素を読み書きする場合とは、innerHTMLvalueになっている違いがあります。

innerHTML
HTMLファイルの中に書いてある要素の中身(開始タグと終了タグは含まない)を指します。
value
テキスト入力欄の場合は、利用者が入力したデータを指します。(ボタンやチェックボックスなど他の種類のinput要素にもvalue属性がありますが、それはちょっと違う意味になります)
練習問題 07-2(☆☆☆)

上の練習問題に、Helloに代わる挨拶の言葉を入力するためのテキスト入力欄を追加しなさい。例えば、言葉のところに「こんにちは」、誰のところに「花子」と入力してボタンを押すと「こんにちは, 花子!」と表示し、言葉のところに「よう」、誰のところに「太郎」と入力してボタンを押すと「よう, 太郎!」と表示されるようにしなさい。

数値の入力

テキスト入力欄のデータは、たとえ数字であっても文字列型になります。それを足したり引いたりする時は、第5回でやった Number() を使って、まず数値に変換しないといけません。

練習問題 07-3(☆☆)
  1. ファイルex07-3.htmlを次のように書きなさい。
  2. ファイルex07-3.jsを次のように書きなさい。
  3. テキスト入力欄に適当な数字を入れて、「計算」ボタンを押してみなさい。
  4. 数値の足し算になるようにプログラムを修正しなさい。
練習問題 07-4(☆☆☆☆)

身長と体重を入力するとボディマス指数を計算して表示するプログラムを作りなさい。

if文と条件式

if文の書き方

プログラムは原則として上から順に実行されていきますが、途中で二種類の命令を書いておいて、その時の状況によってどちらかを実行することもできます。これを場合分けあるいは条件分岐と呼び、JavaScriptではif文を使って書き表します。

練習問題 07-5(☆)
  1. ファイルex07-5.htmlを次のように書きなさい。
  2. ファイルex07-5.jsを次のように書きなさい。(2行目のイコールは二つ並んでいることに注意。)
  3. テキスト入力欄に正しい答えを書いて「解答」ボタンを押してみなさい。次に間違った答を書いて「解答」ボタンを押してみなさい。

if文には次の二種類の書き方があります。

  • 指定した条件が成り立つ時は「これ」をやって、そうでなければ何もしない。
  • 指定した条件が成り立つ時は「これ」をやって、そうでなければ「あれ」をやる。

それぞれ次のように書きます。

  • if ( 条件 ) { 処理 }
  • if ( 条件 ) { 処理1 } else { 処理2 }
練習問題 07-6(☆☆)

上の練習問題では間違った時に何も表示されないので、elseを使って、間違った時には「はずれ」と表示されるようにしなさい。

比較演算子

値が等しいかどうかや、どちらが大きいかということも、足し算や引き算と同じように演算として扱います。足し算の’+‘や引き算の’-‘を演算子と呼びますが、比較の場合には’==‘や’<‘が演算子になります。

二つの式の間に比較演算子を書くと、左右の値の比較を行って、結果を返します(参考資料を参照)。比較の結果は真偽値という型で、trueかfalseかのどちらかになります。

練習問題 07-7(☆☆)
  1. コンソールで次の式を計算してみなさい。
    • 2==2
    • 2==3
    • 2!=2
    • 2!=3
    • 2<2
    • 2<=2
    • 2<=3
    • '2'==2
    • '2'===2
  2. 練習問題07-6のプログラムを修正し、条件式のところは「等しくない」比較にし、「あたり」と「はずれ」の表示を入れ換えなさい。

等しいかどうかの演算子がイコール2個なのは、イコール1個だと代入になってしまうからです。

if文の条件のところには、普通は真偽値型の(値がtrueかfalseになる)式を書きます。しかし、それ以外の式を書いてもよくて、その場合は適当に真偽値へ変換されます。代入も式として書けるので、比較のつもりでうっかりイコール1個にすると、代入が実行されます。エラーは表示されないのですが、だいたい訳の分からない動きになります。

練習問題 07-8(☆☆☆)
  1. ファイルex07-8.htmlを次のように書きなさい。
  2. ファイルex07-8.jsを次のように書きなさい。
  3. テキスト入力欄に適当な文字列(間違った答)を入力して「解答」ボタンをクリックし、「あたり」が出るか「はずれ」が出るか確認しなさい。
  4. テキスト入力欄に書いた文字列が「夢」(正しい答)に書き換わりますが、なぜこのような動きになるか説明しなさい。
  5. ex07-8.jsを修正し、「夢」と入力した時だけ「あたり」、それ以外は「はずれ」となるようにしなさい。

複雑な比較

なぞなぞの答として、漢字の「夢」だけでなくひらがなの「ゆめ」でも正解になるようにしましょう。

そのためには、入力した文字列、「夢」という文字列、「ゆめ」という文字列の三つを比較しなければなりませんが、比較演算子は一度に二つしか比較できません。三つを比較する方法はいくつかありますが、まずif文を二つ組み合わせる方法でやってみます。

練習問題 07-9(☆☆☆)
  1. 紙に鉛筆で次の図を(箱と箱の間の隙間を大きく)描き、条件のところには「入力した文字列と’夢’が等しい」、処理1のところには「あたりと表示」と書きなさい。
  2. 処理2は「入力した文字列と’夢’が等しくない場合」ですが、’ゆめ’と等しいかもしれないのではずれとは限りません。処理2の箱を消しゴムで消して、代わりにif文の図形(条件、処理1、処理2を矢印で結んだもの)を書きなさい。この部分の条件’、処理1’、処理2’にはそれぞれ何と書けばよいでしょうか?
  3. なぞなぞのプログラムを、今描いた図に対応するよう修正しなさい。
    • document.getElementById('answer').valueを2回書くのは長いし面倒なので、最初に変数に代入すると短く書けます。
    • if文で入力した文字列と「夢」を比較し、違った場合(elseの後)にもう一つif文を書いて「ゆめ」と比較します。

if文の「処理」のところに書く { } は、処理の中身が文1個の時は省略できます(と言うか、本来は文1個しか書けないので、文が2個以上の時は { } で囲んで一つの複合文にしています)。

else の後に別の条件分岐をするif文を書くことはよくあります。その場合はif文が1個の文なので { } を書かず、次のような形式で書くのが普通です。

    if (条件1) {
       処理1
    } else if (条件2) {
       処理2
    } else if (条件3) {
       処理3
    } .....
       .....
    } else {
       処理n
    }
  
練習問題 07-10(☆☆☆☆)

練習問題07-4のボディマス指数を計算するプログラムを、指数だけでなく18.5未満は「低体重」、18.5以上25未満は「普通」、25以上は「肥満」と表示するように変更しなさい。

  • ひとつ目のif文では18.5未満かどうかで分けます。
  • 18.5以上の場合は、ふたつ目のif文で25未満かどうかで分けます。

論理演算子

三つのものを比較する別の方法は、二つずつの比較を「かつ」や「または」で組み合わせる方法です。

この考え方は論理学が基になっています。論理学はプログラミングだけでなく、あらゆる学問の基礎です。

(PPTX版ダウンロード)

JavaScriptで真偽値を組み合わせる論理演算子には、&&(〜かつ〜)、||(〜または〜)、!(〜でない)があります(参考資料参照)。

練習問題 07-11(☆☆)
  1. 次の条件を表す式を書きなさい。
    • xが1以上で10未満。
    • xは’夢’か’ゆめ’のどちらかと等しい。
  2. なぞなぞのプログラムを修正し、if文一つだけで「夢」でも「ゆめ」でも正解になるようにしなさい。

練習問題 07-12(☆☆☆☆☆)

下の参考資料を見て、西暦年を入力して閏年か平年かを表示するプログラムを作りなさい。

チェックポイント
  • document.getElementById().innerHTMLdocument.getElementById().value の違いは何でしょうか?
  • if文の二種類の書き方は何と何でしょうか?
  • 等しいかどうか比較する演算子は何でしょうか?
  • 比較演算子の計算結果は何になるでしょうか?
  • 三つのデータを比較するにはどんな方法があるでしょうか?

第6回 関数と変数

関数

関数の定義

HTMLファイルの中のイベントハンドラの部分には、JavaScriptのプログラムを書きます。前回の練習問題05-10ではHTMLファイルの中に JavaScriptのプログラムである alert("Hello, world!"); を書き込み、JavaScriptファイルを使いませんでした。

しかし、イベントハンドラに書くプログラムが長くなってくると、だんだん書くのが大変になってきます。それで、普通はプログラム本体はJavaScriptファイルに書き、イベントハンドラにはそれを呼び出す部分だけを書きます。

ひとつのページに複数のプログラムが使われることがありますから、どのプログラムを呼び出すのか区別するために、プログラムに名前を付けておく必要があります。プログラムのひと固まりに名前を付けて、いつでも呼び出して実行できるようにしたものを関数と呼びます。

練習問題 06-1(☆)
  1. ファイル ex06-1.js を次のように書きなさい。
  2. 同じディレクトリにファイル ex06-1.html を次のように書き、ブラウザで表示してどうなるか確認しなさい。

解説動画

ページを表示してもHello, world!は出てきません。function { ... } と書くと、{ ... } の部分はすぐに実行するのではなく、名前を付けて後で実行できるように関数として登録されます。この関数の場合は sayhello が名前になります。関数名の後ろには () を書きますが、これについては後で説明します。

このように function を使って新しい関数を登録することを、関数を定義すると言います

関数の呼び出し

関数を定義しておけば、後でその中身を実行することができます。

練習問題 06-2(☆)
  1. さっきの練習問題のページを表示した状態でコンソールを開いて、次の行を入力し、実行してみなさい。
  2. ex06-1.html のbody要素の中に次の行を追加し、再読み込みしてからボタンをクリックしてみなさい。
  3. 上の行を次のように変更するとどうなるでしょうか?

解説動画

関数名の後に括弧をつけたものを実行すると、その関数の定義の中身が実行されます。これを関数を呼び出すと言います。

前回は平方根の計算をするのに Math.sqrt という関数を呼び出しましたMath.sqrtsayhello も関数ですが、Math.sqrt はあらかじめシステムの中で定義されているのに対し、sayhello は自分で定義した関数です。

練習問題 06-3(☆☆☆)

“Goodbye.”というメッセージを表示する関数saygoodbyeを定義し、ボタンを押すと呼び出すようにしなさい。

変数

変数宣言

変数とは、データを入れる箱に名前を付けたものです。例えば、Webコンソールで innerHeight と入力すると、何か数字が表示されます。これはブラウザが使っている変数で、innerHeight という名前の箱の中にはウインドウの高さ(正確にはコンテンツ表示部分の高さ)が記憶されています。

自分で好きな名前の変数を作って使うこともできます。そのためには「var 名前;」という文を実行します。これは「今後この名前は変数として使うぞ」という意味で、変数宣言と呼びます。

練習問題 06-4(☆)

Webコンソールで次の式を順に入力して、どのような結果が表示されるか確認しなさい。

  • x
  • var x;
  • x

  • 変数宣言も関数定義もされていない名前を使おうとすると、ReferenceErrorになります。
  • 変数宣言はした(箱は用意した)けれど、値が決まっていない(まだ箱に何も入れていない)状態だと、undefinedという結果(エラーではない)になります。

変数への代入

変数の中にデータを記憶させるには、代入をします。これは「変数名 = 式;」という形をしていて、式を計算した結果を変数に記憶させます。変数宣言と代入を同時にすることもできて、その場合は「var 変数名 = 式;」という形になります。

練習問題 06-5(☆☆)
  1. ex06-5.js を次のように書きなさい。
  2. ex06-5.html を次のように書きなさい。
  3. まず「あいさつ」をクリックしなさい。次に「太郎」、「あいさつ」、「花子」、「あいさつ」の順にクリックしてみなさい。この時の変数 who の値の変化を説明しなさい。
  4. ex06-5.js を次のように修正し、上と同じようにクリックしてみなさい。何が違うでしょうか?

解説動画

変数宣言を書く場所については、次の規則があります。

  • 複数の関数にまたがって使う変数の宣言は、関数定義の外側(普通はJavaScriptファイルの先頭)に書く。
  • 一つの関数だけで使う変数の宣言は、関数定義の内側(普通はその変数を最初に使う時)に書く。
練習問題 06-6(☆☆☆☆)

上の練習問題では、「太郎」と「花子」のボタンをクリックしても何も反応が無いので、押せたのか不安になります。「太郎」と「花子」のボタンをクリックしたら、「太郎が来た」と「花子が来た」というメッセージを表示するようにしなさい。ただし、「…が来た」と表示する新しい関数を定義し、taro()hanako() の中でその関数を呼び出す形にしなさい。

関数の引数

上の練習問題では、「太郎」と「花子」に別々の関数 tarohanako を作りました。二人ならいいですが、何十人も来る場合はいちいち関数を作るのは大変です。

一つの関数にいろいろなデータを処理させるには、引数を使います。これは関数名の後のカッコの中に書きます。

  • 関数呼び出しのカッコの中には、実際に使うデータを書きます。
  • 関数定義のカッコの中には変数を書きます(宣言は不要)。この変数に、呼び出しの時に書いたデータが自動的に代入されます。
練習問題 06-7(☆☆)
  1. ex06-7.js を次のように書きなさい。
  2. ex06-7.html を次のように書きなさい。
  3. 「太郎」というボタンをクリックした時に変数 xwho の値がどう変わるか説明しなさい。
  4. 関数 someone を使って、「レイ」、「シンジ」、「アスカ」にあいさつするためのボタンを作りなさい。

解説動画

引数が二つ以上ある時は、カッコの中にコンマで区切って書きます。

JavaScriptによるページの変更

表示しているページの内容をJavaScriptで読み取ったり、変更したりできます。そのためには次の二つのことが必要です。

  • HTMLの中に、どこをJavaScriptでいじりたいのか目印をつけます。いくつか方法がありますが、ここでは要素のid属性を使います。
  • JavaScriptのプログラムで document.getElementById().innerHTML という式を使います。

とりあえず、例題を見てみましょう。

練習問題 06-8(☆)
  1. ex06-8.js を次のように書きなさい。
  2. ex06-8.html を次のように書きなさい。
  3. 前と同じようにボタンをクリックし、ページの表示がどう変わるか確認しなさい。

解説動画

  • id属性class属性と似ていますが、一つのHTMLファイルの中で同じ値を持つ要素が複数あってはいけません。上の練習問題では、p要素id="who" と書いてあるので、このファイルの中で他に id="who" と書いた要素があってはいけません。
  • id属性が付いた要素は、document.getElementById().innerHTML で読み書きできます。ただし、カッコの中にはid属性の値を書きます。これは変数と同じように使うことができ、新しい値を代入すると画面の表示も書き換わります。

documentgetElementById()innerHTML は、ざっくり言うと次のような意味です。

  • document : 今表示しているページのソース
  • getElementById() : 指定したID属性を持つ要素を探し出す
  • innerHTML : 要素からタグを除いた中身の部分

これをピリオドでつなぐと「今表示しているページの中で指定したID属性を持つ要素の中身の部分」という意味になります。ピリオドの正確な意味を理解するには「オブジェクト」を勉強しないといけませんが、この授業ではそこまではやりません。

練習問題 06-9(☆☆☆)
  1. 自己紹介の写真とちょっと違った表情(口を閉じた顔と開いた顔とか、真面目な顔と変な顔とか)の写真をPhotoBoothで撮影し、自己紹介のHTMLファイルや前に撮った写真と同じディレクトリに保存しなさい。
  2. 自己紹介のHTMLファイルの中のimg要素id属性付きのdiv要素で囲んで <div id="..."><img ...></div> という形にしなさい。
    • div要素は、それ自体では何の意味もなく、ページの一部分にid属性class属性を付けるために使われます。
  3. 新しくJavaScriptファイルを作り、さっきのdiv要素の中身(最初の写真のimg要素)を2枚目の写真のimg要素に書き換える関数を作りなさい。
  4. 自己紹介のHTMLファイルのhead要素の中に、今作ったJavaScriptファイルを読み込むscript要素を追加しなさい。
  5. 写真の上か下に、写真を書き換える関数を呼び出すボタンを作りなさい
  6. ブラウザで表示し、ボタンをクリックして写真が切り替わるか確認しなさい。
  7. 元の写真に戻すボタンも作りなさい。

タイマーイベントによる実行

タイマーを使うと、一定時間経過するとイベントが起き、何かを実行させることもできます。

練習問題 06-10(☆)
  • コンソールで次の式を実行してみなさい。

setTimeout 関数には次の二つの引数があります。

  • 実行するべきプログラムを書いた文字列
  • 何ミリ秒後に実行するか

上の練習問題で 3 seconds have passed をダブルクォートで囲んでいるのは、シングルクォートだと alert() を囲むシングルクォートと区別がつかなくなるからです。

練習問題 06-11(☆☆☆☆☆)

練習問題06-9の続きで、写真を切り替えて3秒たつと自動的に元の写真に戻るボタンを作りなさい。

チェックポイント
  • 関数とは何でしょうか?
  • 関数の定義はどのように書くでしょうか?
  • 「関数を呼び出す」とはどういう意味でしょうか?
  • 変数とは何でしょうか?
  • 変数宣言はどのように書くでしょうか?
  • 変数への代入とは何をすることでしょうか?
  • HTMLの id 属性は何のために使うのでしょうか?

第5回 スクリプト

JavaScriptとは

ウェブページは、基本的な文章の構造をHTMLで書き、これに加えて画像ファイルやCSSを使うことを勉強しました。

しかし、それだけでは文章や絵が表示されるだけで、動きがありません。動画ファイルを貼り付ければ確かに動きはありますが、利用者の操作に反応して表示を変えるようなことはできません。

インタラクティブなページを作るためにはプログラムを書く必要があります。プログラムを書くための言語(プログラミング言語)の一つがJavaScriptです。

JavaScriptはその名前からJavaと混同されがちですが、この二つは全く別の言語です。もし参考書などを購入する場合は必ずJavaScriptの本を選択してください。

「プログラム」と「スクリプト」はだいたい同じ意味です。それほど大きくないプログラムのことをスクリプトと呼ぶことが多いです。

JavaScriptで書いたプログラムもCSSと同じく、別のファイルに保存します。HTMLと混ぜて書くこともできますが、これもCSSと同じく分けて書いた方が混乱しません。

練習問題 05-1(☆)
  1. ex05-1.js というファイルを作り、次のように書きなさい。
  2. 同じディレクトリに ex05-1.html というファイルを作り、次のように書きなさい。
  3. ex05-1.html をブラウザで表示し、どのようになるか確認しなさい。
  4. ex05-1.js を編集し、world を自分の名前に変更してからブラウザで再表示しなさい。
  5. ex05-1.js を編集し、今書いてあるのと同じ行を追加して2行にしなさい。それから2行目の HelloGoodby に変更して、再表示しなさい。

Hello world とは、伝統的にプログラミングを勉強する人が最初に書くプログラムです。


プログラムの実行

実行の順序

JavaScriptファイルに書くプログラムは、ブラウザに対する命令が並んだものです。例えば alert は、小さなウインドウ(ダイアログボックス)を出して、そこに何かメッセージを表示せよという命令です。

ブラウザはHTMLファイルの内容を上から順に表示していきますが、script要素があると指定されたプログラムを実行します。プログラムの中に複数の命令がある場合は(原則として)上から順に実行します。

練習問題 05-2(☆☆)
  • ex05-1.html を次のように書き換えてブラウザで表示しなさい。何が違うでしょうか?

スクラッチパッドの使い方

プログラムを書いていると、「こう書いたらどうなる?」とちょっと試してみたいことがよくありますが、その度にファイルを作って保存してブラウザで開いて…というのは面倒なので、Firefoxでは直接JavaScriptのプログラムを書いて、その場で実行してみることができます。

練習問題 05-3(☆)
  1. メニューの【ツール】→【Web開発】→【スクラッチパッド】を選択しなさい。
  2. スクラッチパッドに alert('Hello, world!'); と書き込みなさい。
  3. メニューの【実行メニュー】→【実行】を選び、どうなるか確認しなさい。

コンソールの使い方

プログラムに間違いがあると、当然のことながら実行できません。しかし、何か手がかりが無いと、どこに間違いがあるか分からないので、ブラウザはプログラムが実行できない時はエラーメッセージを表示してくれます。

練習問題 05-4(☆)
  1. メニューの【ツール】→【Web開発】→【Webコンソール】を選択しなさい。
  2. ex05-1.js を編集し、alertalart とわざと間違えて書きなさい。
  3. ブラウザで再読み込みし、コンソールに何が表示されるか確認しなさい。
  4. ex05-1.js を正しく修正し、再読み込みしてコンソールを確認しなさい。


基本的な文法

これからJavaScriptの文法を勉強していきますが、まず最初に基本的な約束として次のことを覚えてください。

  • 開きカッコと閉じカッコは必ず対応している。
  • 文字列リテラル(データとして扱う部分、さっきのプログラム例では Hello, world! の部分)はシングルクォートまたはダブルクォートで囲む。
  • 空白と改行は好きなところに入れてよい(ただし単語の途中を除く)。
  • コメントは /**/ に挟まれた部分。もっと簡単には、 // を書くとそこから行の最後までがコメントになる。
  • 文字列リテラルとコメントの中では日本語も使えるが、それ以外はASCII文字(いわゆる半角英数字、詳しくは第8回で勉強します)しか使えない。
  • 文(命令として実行できる一番小さな単位)の最後にはセミコロンを付ける。省略しても大丈夫な場合もあるが、必ず書く習慣をつけた方がトラブルが少ない。
練習問題 05-5(☆☆☆)
  1. 次のJavaScriptファイルをブラウザで開き、メニューの【ファイル】→【別名でページを保存…】で適当な場所に保存しなさい。
  2. このJavaScriptファイルを読み込むHTMLファイルを作りなさい。
  3. HTMLファイルをブラウザで開き、コンソールでエラーメッセージを確認しなさい。
  4. JavaScriptファイルを正しく修正しなさい。

今回は練習のためにJavaScriptファイルを保存し、対応するHTMLファイルを作り、ブラウザで開いて…とやりましたが、JavaScriptの間違いを調べるだけならスクラッチパッドの方が手軽です。

式の計算

簡単な式

alert の後には、文字列だけでなく計算式を書いてもよく、その計算をした結果がメッセージとして表示されます。

四則演算は数学と同じように書きます。

練習問題 05-6(☆)
  • ex05-1.js を編集し、次のように書き換えてブラウザで表示しなさい。

関数を使った計算

もっと複雑な計算をするためには関数を使います。例えば平方根を計算するには Math.sqrt という関数が用意されています。

練習問題 05-7(☆)
  • ex05-1.js を編集し、次のように書き換えてブラウザで表示しなさい。

alert(Math.sqrt(1+1))alert(Math.sqrt(2))alert(1.4142135623730951) は同じ意味です。

プログラムが順に実行されていき、実際にある関数の計算が行われることを「関数を呼び出す」と言います。関数の計算の結果を使って続きの計算をすることを「関数が値を返す」と言います。例えば、Math.sqrt(2) を呼び出すと 1.4142135623730951 という値を返します。

コンソールを使った計算

ちょっと計算してみたい時に、いちいちJavaScriptファイルを書き換えるのは面倒です。コンソールの一番下の行をクリックして計算式を入力すると(式の最後にはリターンキーを押します)、計算結果を表示してくれます。

練習問題 05-8(☆)

コンソールで次の式を計算してみなさい。

  • 1+1
  • Math.sqrt(1+1)
  • alert(Math.sqrt(1+1))

alert も実は関数の一種です。何かを計算するのではなく、画面にメッセージを出すという働きをします。計算結果としては undefined という特別な値を返します。

練習問題 05-9(☆☆)
  1. 2の平方根と3の平方根の和を計算しなさい。
  2. 1を0で割るとどうなるか、試してみなさい。
  3. 0を0で割るとどうなるか、試してみなさい。
  • Infinity は、計算結果がJavaScriptが扱える限界を越えたことを意味しています。
  • NaN は Not A Number の略です。計算結果が数値として表せないことを意味しています。

データの型

JavaScriptが扱うデータにはいくつかの種類があり、それをと呼びます。例えば数値とか文字列は型です。型が違うデータは計算の方法が違います。違う型のデータを無理やり計算しようとすると、場合によって自動的に型を変換してくれたり、エラーになったりします。

  • 例えば、12 と書くと数値ですが、'12' と書くと1という文字と2という文字を並べた文字列になります。
  • + という記号は、数値に対しては足し算ですが、文字列に対しては文字列をつなげるという意味になります。
  • Number という関数を使うと、文字列を数値に変換できます。
練習問題 05-10(☆)

コンソールで次の式を計算してみなさい。

  • 2+3
  • '2'+'3'
  • Number('2')+Number('3')
  • '2'+3
  • Number('2')+3

イベントによる実行

Hello world のプログラムは、ブラウザがページを読み込んで表示する時に実行されますから、最初にダイアログボックスが出た後は動きがありません(再読み込みすればまた実行されますが)。これでは面白くないので、ページを見ている人がマウスクリックなどの動作をした時にプログラムを実行する仕組みがあります。

プログラムを実行するきっかけをイベントと呼びます。イベントにはいろいろな種類があり、あるイベントが起きた時に何かプログラムを実行して欲しい場合は、HTMLの要素に対応するイベントハンドラを書いておく必要があります。

練習問題 05-11(☆☆)
  1. 新しいファイル ex05-11.html を次のように書き、ブラウザで表示してボタンをクリックしてみなさい。
  2. input要素をコピーして同じ行を作り、onclickondblclick に、Hello, world! を好きな言葉に変更してから保存しなさい。それからブラウザで再読み込みし、ボタンをクリックしたり、ダブルクリックしたりしてみなさい。

解説動画

この例では、onclickondblclick がイベントの種類を表し、その後のダブルクォートの中がイベントハンドラです。イベントハンドラにはJavaScriptのプログラムを書きます。

onclick イベントはボタンで使うことが多いですが、他の要素でもイベントハンドラを設定すれば同じように使えます。

練習問題 05-12(☆☆☆)

見出しの「イベントハンドラの練習」というところでマウスをクリックすると Hello, world! と表示されるようにしなさい。

見出しや段落に onclick のイベントハンドラを設定しても、見た目ではわかりませんから、下線を付けたり色を変えたりして「ここをクリックして欲しい」と見る人に伝えることが必要です。

練習問題 05-13(☆☆☆☆☆)

下の参考資料を見て、マウスを移動した時にメッセージが表示されたり、テキスト入力欄に書き込んだ文字が変更された時にメッセージが表示されたりするようにしなさい。

チェックポイント
  • プログラムは何のために使うのでしょうか?
  • プログラムの中に並んでいる命令は、どんな順序で実行されるでしょうか?
  • イベントとは何でしょうか?
  • イベントハンドラとは何でしょうか?

第4回 画像とスタイルシート

ウェブページを構成するファイル

前回までに、ウェブページはそれぞれHTMLファイルと対応していることを勉強しました。しかし、HTMLだけではできることが限られていますので、他の種類のファイルをHTMLと組み合わせて使うのが普通です。

よく使われるファイルの種類には次のようなものがあります。

スタイルシート(CSS)
ウェブページの見栄え(文字の大きさや色、レイアウトなど)を指定します。
スクリプト(JavaScript)
ウェブページに動きをつけたり、データを処理したりします。
画像(JPEG, PNGなど)
ウェブページに表示する画像です。

今回はスタイルシートと画像について勉強します。スクリプトについては次回以降詳しく勉強します。

画像

アナログとデジタル

今使われているコンピュータは、ほとんどすべて情報をデジタルな形で処理します。

(PPT版ダウンロード)

練習問題 04-1(☆☆)

数年前に地上波のアナログテレビ放送が停止し、デジタル放送(いわゆる地デジ)に移行しましたが、なぜアナログからデジタルへ移行したのでしょうか?理由を調べてまとめなさい。

画像ファイルの表示

自分の顔写真をデジタル画像としてファイルに保存し、自己紹介のページの中に表示してみましょう。

練習問題 04-2(☆☆)
  1. アプリケーションフォルダからPhoto Boothを探して起動しなさい。
  2. Photo BoothはiMacの内蔵カメラを使って写真を撮るアプリです。カメラのマークのボタンがシャッターで、右側のエフェクトをクリックすると、いろいろな効果を加える事ができます。

  3. 撮影した画像をメニューの【ファイル】→【書き出す…】でファイルに保存しなさい。
    • ファイル名に日本語が含まれている場合、そのままURLとして使うと何かとトラブルが多いので、英数字だけのファイル名に変更しておくのが無難です。
  4. 画像ファイルをダブルクリックして開きなさい。通常は「プレビュー」が起動するはずです。
  5. 必要な部分だけ切り抜きなさい。マウスで切り抜きたい範囲を選択してから、メニューの【ツール】→【切り取り】を選びます。
  6. メニューの【ツール】→【サイズを調整…】で、縦横200〜300ピクセル程度に変更しなさい。
  7. 変更後の画像をファイルに保存しなさい。
  8. 参考資料でimg要素の使い方を調べ、自己紹介ページに顔写真を表示しなさい。
    • 相対URLで指定しましょう。HTMLファイルと画像ファイルが同じディレクトリにあると楽です。
  9. title属性を使ってキャプションを書きなさい。
  10. この場合、alt属性はどのように指定すべきでしょうか?

プライバシーの観点から、顔写真はむやみに公開すべきではないという意見があります。上の練習問題で作ったファイルは自分しか見ることができないので大丈夫ですが、インターネットに公開するファイルを作るときは、個人情報をどこまで書くか慎重に考えてください。

練習問題 04-3(☆)
  1. 自己紹介の出身校のところに慶應義塾大学を追加し、SFCのロゴ画像を表示しなさい。
  2. ロゴ画像をa要素で囲んでリンクにし、画像をクリックするとSFCトップページに飛ぶようにしなさい。
  3. この場合、alt属性はどのように指定すべきでしょうか?

ロゴや写真には著作権があります。ウェブで公開されている写真をimg要素で自分のページの一部として表示する場合は、引用のルールに従って表示するか、作者の許可が必要です。

写真と同じように、動画ファイルを作って表示することもできます。ただし、ウェブで使用する動画のフォーマットはいろいろな種類があって統一されておらず、下の資料に従って作った動画ページは、閲覧者のブラウザや環境によって見えないことがあります。
簡単動画制作資料 ( PPT | PDF )

スタイルシート

CSSとは

第2回のマークアップ言語のところでも説明したように、HTMLは文章の構造(見出しとか段落とか)を指示するマークアップです。それに対して、文章の見え方(見出しは48ポイントの大きさで中央揃えとか)を指示するのがスタイルシートで、現在ウェブで使われている規格は CSS (Cascading Style Sheets) です。

CSSにはいくつかのレベルがあります。最近のブラウザはLevel3 (CSS3) に対応していますが、ブラウザによっては対応していない機能もあります。書き方を検索する時は、利用できるブラウザが限定されていないかどうか注意しましょう。

CSSはHTMLとは別のファイルに書きます。そのままでは、どのHTMLファイルとどのCSSファイルが対応しているのか分からないので、HTMLファイルの中にCSSファイルの名前を書いておきます。ブラウザは、まずHTMLファイルを読み込み、次にその中で指定しているCSSファイルを読み込んで、それから表示をします。画像の場合にimg要素で指定した画像ファイルを読み込んで表示するのと同じです。

CSSを別のファイルにせず、HTMLと混ぜて一つのファイルに書く方法もありますが、初心者は分けて書いた方が区別がはっきりして混乱を防げるので、この授業では別のファイルに分けて書く方法を使います。

CSSの文法

CSSファイルの中には、スタイルの指定を書き並べていきます。スタイルの指定は、「どこを」「どうする」という形をしています。

「どこを」
セレクタと呼び、色々な書き方がありますが、一番簡単なのはHTMLの要素名をそのまま書くことです。例えば h1 と書けば、見出しに対してスタイルが適用されます。複数の要素に同じスタイルを適用する場合は、要素名をコンマで区切って書きます。
「どうする」
プロパティと呼び、「○○は××」という形をしています。例えば、color: blue と書けば「文字色は青」という意味になります。プロパティが複数ある場合はセミコロンで区切って書きます。(1個しか無い場合でも最後にセミコロンを書く習慣をつけておいた方が間違いが少ないです。)

スタイル指定の書き方は、まずセレクタを書き、その後に { } で囲んでプロパティを書きます。

空白、改行はどこでも好きなところ(ただし単語の途中は除く)に書けます。コメントは /**/ で囲んだ部分です。

練習問題 04-4(☆)
  1. テキストエディタで、自己紹介のファイルと同じディレクトリに mystyle.css という名前のファイルを、次の内容で作りなさい。
  2. 自己紹介のファイル introduction.html をテキストエディタで開き、head要素に次のようにlink要素の1行を追加しなさい。
  3. 自己紹介のファイルをブラウザで開き、表示がどう変わったか確認しなさい。表示が変わらない人は、h1要素を使って見出しを書いているか確認しなさい。
  4. mystyle.css を編集し、bluegreen に書き換えてから、ブラウザを再読み込みし、表示がどうなるか確認しなさい。

色の指定

CSSでは bluegreen のように色の名前で指定することもできますが、もっと微妙な色を使いたい場合は数値で指定します。数値は16進数で書くことが多いので、まず2進数と16進数について勉強しておきましょう。

(PPT版ダウンロード)

アナログとデジタルで説明したように、色を量子化して数値に置き換えます。

  1. 色を赤(R)、緑(G)、青(B)の三原色の成分に分解します。
  2. それぞれの成分の明るさを0〜255の数値で表します。
  3. 数値を3個並べて書く方式もありますが、普通はそれぞれ2桁の16進数(00〜FF)に直し、RGBの順に並べて6桁の16進数(000000〜FFFFFF)1個にします。

こうやって作った16進数の頭に # を付けると、色の名前の代わりに書くことができます。

練習問題 04-5(☆)
  1. さっきの mystyle.css で、色の名前の代わりに #F0A050 と書いて保存し、ブラウザで再表示してみなさい。
  2. 数値をいろいろ変えて、どのような色になるか見てみなさい。

枠線の指定

時間割に枠線が無いとなんとなく締まらないので、枠線を付けてみましょう。

練習問題 04-6(☆)
  1. mystyle.css に次のスタイル指定を追加し、ブラウザで再読み込みしなさい。
  2. 参考資料のborderプロパティを見て、いろいろなスタイルの枠に変更してみなさい。一番気に入ったスタイルに変更しましょう。

class属性とセレクタ

セレクタに要素名を書くと、その要素はすべて同じスタイルが適用されます。そうではなくて、同じ要素名でも違うスタイルを適用したい場合は、あらかじめHTMLファイルの中にclass属性を書いておいて、CSSでスタイル指定する時の目印にしなければなりません。今後はclass属性の値のことをクラス名と呼ぶことにします。

クラス名が付いているところだけスタイル指定したい場合は、セレクタのところは要素名の後にドットとクラス名を書いたものになります。

練習問題 04-7(☆☆)
  1. 時間割の中で、この科目は重要だ(落とせない)と思うものを2〜3科目選び、次のようにtd要素のクラス名を important にしなさい。
  2. mystyle.css に次のようなスタイル指定を追加し、表示がどう変わるか確認しなさい。
  3. 時間割の中で、それほど重要ではない(落としてもいい…わけはないですが)科目をいくつか選び、青色の文字で表示するようにしなさい。

セレクタで要素名を省略して、ドットとクラス名だけ書くと、要素の種類は何でもよいから、とにかくクラス名が一致するものに対するスタイル指定になります。

練習問題 04-8(☆☆)
  1. 趣味について書いた定義・説明リストの中で、一番好きなものを選び、その要素に important というクラス名を付けなさい。この状態で文字の色はどうなるでしょうか?
  2. mystyle.css を修正し、時間割と趣味の両方で important というクラス名の付いた部分が赤い文字になるようにしなさい。
練習問題 04-9(☆☆☆☆☆)

スタイル指定がお互いに矛盾してしまうことがあります。例えば、「td要素はすべて青い文字」と「クラスが important のところは赤い文字」という指定があったら、<td class="important">...</td> のところは何色で表示されるでしょうか?まず実際に実験し、それから下の参考資料でセレクタの優先順位について調べなさい。

参考資料

インスペクタの使い方(CSSを調べる)

第2回でインスペクタを使ってHTMLを調べることをやりましたが、CSSを調べることもできます。

HTMLの要素をクリックすると、インスペクタの右側にその要素に関するCSSの情報が表示されます。表示は4種類あってタブで切り替えられます。

ルール
適用されるすべてのスタイル指定が表示されます。
計算済み
最終的に決定されたプロパティの値が表示されます。

ルール表示では、プロパティをマウスでクリックして有効/無効を切り替えられます。また、プロパティの値を書き換えて表示がどうなるか試してみることもできます。

練習問題 04-10(☆☆)
  1. 自己紹介のページを表示し、インスペクタで見出し(h1要素)に関する情報を表示しなさい。
  2. colorプロパティをクリックして有効/無効を切り替え、表示を確認しなさい。
  3. プロパティ以外のところでクリックすると、新しいプロパティが追加できます。font-sizeプロパティを追加し、値を 48pt にしなさい。
  4. 48pt をいろいろな値に変えてみなさい。

ウェブアクセシビリティ

原則としてHTMLでは文章の構造(章や段落や箇条書き)についてのマークアップを行い、それが画面上でどう見えるか(色や大きさやレイアウト)はスタイルシートで決めることになっています。このように分かれているのは、ウェブで最も重要なのは情報を万人に伝えることであり、受け手の状況に応じて表示方法は変わっても構わないという思想があるからです。つまり、伝えるべき情報そのものはHTMLで記述し、見栄えなど必要に応じて変更する部分はスタイルシートという分担になっています。

目の不自由な人や、手が不自由でマウスがうまく使えない人でもウェブを利用できるようにすることをウェブアクセシビリティと呼びます。ウェブアクセシビリティでは、構造と見栄えを分離して書くことが重要です。

練習問題 04-11(☆☆☆☆☆)

あるページがウェブアクセシビリティに配慮しているかどうかを検査するウェブアクセシビリティチェッカーがあります。下の参考資料を見て、実際にウェブアクセシビリティチェッカーを使ってみなさい。


チェックポイント
  • ウェブページを構成するファイルにはどんな種類があるでしょうか?
  • アナログと比較してデジタルの利点は何でしょうか?
  • アナログをデジタルに変換する手順は何でしょうか?
  • ビットマップ画像とベクター画像はどう違うでしょうか?
  • スタイルシートの役割は何でしょうか?
  • CSSのスタイル指定はどのような形をしているでしょうか?
  • CSSのclass属性は何のために使うのでしょうか?
  • ウェブアクセシビリティとは何でしょうか?