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> につけて、クリックされたらフルサイズ画像を暗くするようにします。再度クリックすると暗くする効果を外します。

To give you more of an idea, have a look at the finished example (no peeking at the source code!)

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

完成へのステップ

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

画像をループさせる

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

必要なこと:

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

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

In each loop iteration, you need to add an onclick handler to the current newImage — this should:

各ループの反復で、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 チャネルで尋ねれば、採点ガイドが簡単に得られるでしょう。まずエクササイズに挑戦してください。ーごまかしても何も得られません!

 

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

 

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

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