Javascript の基本的な構成要素を見てきたところで、これからたくさんのウェブサイトで見かける項目、Javascriptで動作するイメージギャラリーをつくってみることで、あなたが得た繰り返し、関数、条件とイベントの知識を試してみましょう。

前提条件: この評価を行う前に、このモジュールにある記事すべてを実施していること
目標: JavaScriptの繰り返し、関数、条件とイベントが理解できていることを確認する

出発点

この評価を始めるために、サイトからサンプルが入っている ZIP ファイルをダウンロードして、コンピュータのどこかで解凍しておきます。

: 別の方法として, この評価を行うために JSBin や Thimble のようなサイトを使うことができます。これらのオンラインエディタにHTML、CSS、JavaScriptを貼り付けることができます。利用するオンラインエディタがJavaScript/CSS パネルに分かれていなければ、HTMLページの中の <script>/<style> 要素にそれらを貼り付けてください 。

プロジェクト概要

HTML、CSSと画像および数行のJavascriptのコードが提供されています。必要なJavascriptを書いて、これを動くプログラムにする必要があります。HTMLのボディは次のようになっています。

<h1>Image gallery example</h1>

<div class="full-img">
  <img class="displayed-img" src="images/pic1.jpg">
  <div class="overlay"></div>
  <button class="dark">Darken</button>
</div>

<div class="thumb-bar">

</div>

例ではこのように見えます:

例にあるCSSファイルで最も興味深い部分:

  • full-img <div>の内側に3つの要素が絶対位置指定されています。ー <img> にはフルサイズの画像が表示されています。その右の上に<img>と同じサイズで空の<div> が置かれています(これは半透明の背景色で画像を暗くする効果に使われます)。そして<button> は暗くする効果をコントロールするために使われます。
  • thumb-bar <div> (いわゆるサムネイル画像)内の画像は幅を20%に設定し、左側に浮かせて一行に並べています。

JavaScriptに必要なもの:

  • すべての画像をループさせる際、 thumb-bar <div> の中にその画像を埋め込む<img>要素を挿入します。
  • onclick ハンドラーをthumb-bar <div>の中の<img>それぞれにつけます。それをクリックしたときにその画像が displayed-img <img> 要素に表示されるようにします。
  • onclick ハンドラーを<button> につけて、クリックされたらフルサイズ画像を暗くするようにします。再度クリックすると暗くする効果を外します。

もっとアイデアを加えると、最終的な例 のようになります。(ソースコードをのぞかないように!)

完成へのステップ

次のセクションですべきことを説明します。

画像をループさせる

すでに thumbBar という変数にthumb-bar <div>の参照を格納するようにしています。新しい<img>要素を作って、そのsrc属性にプレースホルダとして値xxxをセットしてください。そして、新しい<img>要素をthumbBarに追加してください。

必要なこと:

  1. "Looping through images"コメントの下に全5画像をループする繰り返し処理のコードを書いてください。ー それぞれ一つの画像を表す5つの要素を繰り返し処理する必要があります。
  2. それぞれの繰り返しで、プレースホルダーxxx の値を画像のパスに等しい文字列で置き換えてください。それぞれの場合で src 属性の値をこの値に設定します。いずれの場合も画像は images ディレクトリにあり、pic1.jpg, pic2.jpgというようなファイル名になっています。

onclickハンドラをそれぞれのサムネール画像に追加する

各ループの反復で、onclick ハンドラーを現在のnewImageに追加する必要がある、いやすべきである:

  1. 現在の画像のsrc 属性の値を探します。それぞれの<img>getAttribute() 関数を実行して、"src"のパラメータを渡すことによりできます。しかし画像はどのように取得するのでしょう? イベントハンドラが適用される前にループが完了するので、newImageの使用は機能しません; このようにすると、すべての場合に最後の<img>src値が返されます。これを解決するためにそれぞれのイベントハンドラの場合で、<img> がハンドラーの対象になっていることに注意してください。イベントオブジェクトから情報を取得するのはどうでしょう?
  2. 関数を実行して、パラメータとして返されたsrcの値を渡します。この関数は好きなように読み出すことができます。
  3. このイベントハンドラー関数はdisplayed-img <img>src属性の値をパラメータとして渡されたsrcの値にセットする必要がある。displayedImg という変数に関連する<img> の参照を格納するコードをすでに書いています。定義された名前付き関数が必要なのに注意してください。

暗くする/明るくするボタンを処理するハンドラーを書く

暗くする/明るくする<button>が残っている。btnという変数に<button>への参照を格納するコードを書いています。onclickハンドラーに追加する必要のあること次のとおりです:

  1. <button>にセットされている現在のクラス名をチェックするーこれもまた、getAttribute()を使えば取れます。
  2. クラス名が"dark"なら、<button>のクラスを(setAttribute()を使って)"light"に変更します。テキストも"Lighten"にします。そして、オーバーレイ<div>background-color"rgba(0,0,0,0.5)"にします。
  3. クラスメーが"dark"でなければ、<button>のクラスを"dark"に変更します。テキストを"Darken"に戻します。そしてオーバーレイ<div>background-color"rgba(0,0,0,0)"にします。

The following lines provide a basis for achieving the changes stipulated in points 2 and 3 above.

次のコードは上記の2と3で示された変更を行う基本的なものです。

btn.setAttribute('class', xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;

ヒントとコツ

  • HTMLとCSSは全く編集する必要はない

評価

組織されたコースの一部としてこの評価を行う場合、採点のため先生/メンターにあなたの成果を提出してください。もし、自習なら、このエクササイズに関するディスカッションのスレッドMozilla IRC#mdn IRC チャネルで尋ねれば、採点ガイドが簡単に得られるでしょう。まずエクササイズに挑戦してください。ーごまかしても何も得られません!

 

このモジュールに含まれるもの

 

ドキュメントのタグと貢献者

このページの貢献者: Shonanpooh, tomouchi, HeRoMo
最終更新者: Shonanpooh,