JavaScriptの関数を使いこなす

ナビゲーションバーをつくる

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
オブジェクトから取り出したデータをもとに、ナビゲーションのアイコンを複数加えます。
講師:
09:07

字幕

このレッスンでは HTML ドキュメントに加えた DOM 要素に- リンクを設定し 更に 3セット分のデータを用意して そこから 動的に そのセット分の要素を加えたいと思います 具体的には- このソーシャルメディアのアイコンですが 3セットそれぞれに異なった- 対応したリンクを加えて 差し込むことにします 今 Dreamweaver CC で開いている HTML ドキュメントは- アイコンが1つ 画像として差し込まれているだけです リンクも貼られていません 現在の状態を一応確認しておきます 「ファイル」から 「ブラウザでプレビュー」です 1個だけ画像が加えられています リンクはありません では HTML ドキュメントに戻って コードを加えていきましょう まず 今作られているコードの流れですが 空っぽの要素を用意しておいて それを querySelector で クラスを指定して 参照を取ります そして 後から加える- リンクの URL や画像ファイルの キーとなる名前を key に取ってあります そして その key を関数に渡して ここではまず- img のオブジェクトを作って返しています img の記述を 文字列で作る関数です その文字列の記述を- ul li の中に挟んで- 先程参照を取った要素の innerHTML というプロパティに設定すれば- 先程見た通り 画像が HTML ドキュメントの中に差し込まれます これに今度はリンクを加えたいと思います リンクもやはり 関数を定めます createImg に対応して- createA としましょう そして やはり key を受け取ります この key を文字通りキーワードにして- 画像やそれから URL を取ってこよう ということになっています 中身を考える前に こちらの記述をちょっと直しておきましょう まずは- createImg で画像があります それを更に- A 要素で挟むわけですから createA というこの関数で- 呼び出して その引数に渡します この引数に渡すのは URL になります リンク先の URL そして その A 要素で A タグで挟む- Img の要素ですね 2つを渡してあげます そうすると- Img の要素を子供に持った A 要素が出来上がるので この設定のまま- 新たにリンクの加わった画像が入る ということになります ではこちらは- key の前に- URL ですね key ではないですね 挟む 子供に持つ エレメントですから child にしましょう child と 後 構造はこちらと同じです 文字列を作って返す ということなので 同じように- var output ですね どう書くかはさておき return も 忘れないように書いておきましょう output です こちらは A 要素ですから 勿論 A タグですね そして href この URL を取るわけですが 属性はクォーテーションで- href の属性は クォーテーションが必要ですので そのクォーテーションと 文字列終わりのクォーテーションを 入れたうえで URL で閉じますね 文字列始まりのクォーテーション ダブルクォーテーション に対して- href 属性の終わりの シングルクォーテーションを入れて 閉じタグの 文字列の終わり と ちょっと改行しましょう 足すことの中に挟む 子供の要素 child 引数の値を加えます そして 閉じタグですね A の閉じタグを入れてあげて 返す と そうすると- Img の要素 URL を基に A 要素を作って それを- 要素の innerHTML に設定する ということですから これで流れはできました 後それから URL が必要ですね URL の指定をします var の URL と そして URL はというと- 上のほうでコメントで 後で使うつもりで 取ってありますが- ここから URL はもらってしまいましょう これが facebook の文ですので コピーして 持ってきます ちょっとまた隠れててもらいましょう 保存をして ブラウザで確認をしてみます アイコンが表示され リンクが設定されてますね クリックすると― ちょっと時間かかりますが Facebook のページに飛びました それでは 設定するアイコンのデータ 3セットに増やします 隠れてたデータに出てきてもらいましょう コメントアウトを解除します socialMedia という変数で オブジェクトに入っています では この中からグループ処理ですね for ループで処理していくことになります ではここで for ループなんですけれども オブジェクトからとってくるときには- var i= という 配列の書き方とは ちょっと違いますね key を- オブジェクトの中から取ってきましょう ということになります この socialMedia ここで key という変数を使いましたので この key は なくなります オブジェクトの中から この facebook twitter youtube という- key を取ってきますので これはいらなくなります そして この辺りちょっと変更する必要が- ちょっとずつあるんですけれども まずは インデントをかけて- icons.innerHTML これは外に出します 最後に設定します そして 文字列をどんどん加えていくので ul は最初に1個だけ必要ですよね ということなので― ここでも output という 変数を用意して まずは ul だけ加えてしまいます ul 要素だけ加えて- こちらは ul 要素抜きで li 要素を順次加えるわけですね 3セット分 それを加えるので output に += ですね そして 最後に output に- += で 閉じの ul タグを加えます これで全部が 文字列出来上がりましたので output を- icons の innerHTML に 設定すればいいでしょう で URL ですね URL は これ決め打ちになっていますから まずいですね 当然- socialMedia の変数から もらうわけです コピーしてきて- そして key を- この key ですね key を1個ずつ取ってくるんですが この key の- プロパティの値は何なの という聞き方なので こういう形になりますね では 保存して確認してみましょう 保存して- ブラウザでプレビューします 3つのアイコンが出ました Twitter - 行きましたね 戻ります YouTube - 大丈夫です このレッスンでは データをオブジェクトで用意し その中から for in のループで 動的に DOM 要素を作って- それをドキュメントに加える という方法についてご説明しました

JavaScriptの関数を使いこなす

関数はJavaScriptの基本です。また関数を知ることはスクリプトの組み立て方を理解することでもあります。このコースではJavaScriptの基礎を学んだ方を対象に、関数の定義から順を追って説明します。さまざまな機能やその呼び出し方、クラス定義で使われる応用テクニックまで実際にスクリプトを書きながら具体的に解説します。

2時間22分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年11月28日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。