JavaScriptの関数を使いこなす

HTMLドキュメントにDOM要素を加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLドキュメントに動的にDOM要素を加えます。
講師:
07:47

字幕

このレッスンでは HTML ドキュメントに要素― ドキュメントオブジェクトモデルの要素 ということで DOM 要素といいますが それを― JavaScript コードで 動的に加えてみたいと思います 具体的にはこのアイコンなんですが 画像です それから リンクも加えてあります このような設定を JavaScript で 行ってみたいと思います Dreamweaver で開いた HTML ドキュメントには― まず body にはテキストの要素と それから空の要素があるだけです 画像は加えてありません それから script 要素に JavaScript コードを実行するための- 最低限の設定だけ加えてあります まず こちらですが window がロードし終わったら- この関数を実行しなさい ということで その関数の側だけ定義してあります 確認用に console.log が入っていて called という文字が表示されますので 呼び出されたかどうかだけ ちょっと確認しておきましょう 「ファイル」から 「ブラウザでプレビュー」します 画像はないですね そして- JavaScript コンソールを表示すると― 呼び出されていますから called という文字列が表示されました これは クリアして HTML ドキュメントのほうに戻りましょう console.log のステートメントは テスト用ですので 消します そして早速書いていきますが まず- この要素の中に 今空っぽですが- これから加える要素を差し込んでいきます クラス名が socialmediaicons という風になっていますので これを取ってきましょう 変数名は 面倒くさいので- icons と ちょっとごまかしてしまいます そして document に行きます querySelector ですね その中で こんなクラスを知りませんか と socialmediaicons と これで このクラスの要素がとられます この要素の中に- テキストで要素を書き加えていく ということになります そのためのキーワードというのは key ということにして- まずは テキストで普通に書いていきます facebook と 後で アイコンが入りますが 今は文字列です そして ここで icons と- 先程取得した要素ですね その中の innerHTML という風にすると- 文字列で定めた要素を差し込むことができます key だけでもいいですが せっかくですので- ul 要素ということは 中に li 要素が入りますね そして 今のところただの文字列 key facebook と入っていますが それを加えたうえで- 閉じタグですね li と- ul を閉じる という風にしてみます 確認しましょう ファイルを保存して ブラウザで見てみます ブラウザをリロードしましょう facebook という文字が 出てきましたね それから element を見てみると― body の中の空っぽだった要素ですが 空ではなさそうです ul 要素が入り li 要素が入って- facebook というテキスト これが JavaScript コードで 動的に加えられたものです ではここは 一旦クリアしてしまいましょう また HTML ドキュメントのほうに戻ります この画像を読み込みたいので 先に 画像のほうを確認しておきましょう HTML ドキュメントと同じ階層に images というフォルダがおいてあって その中にアイコンの画像が入っています 今回は facebook ですから facebook.png - これを読み込みたいと思います 変数の key に入れた文字列 これは画像ファイルと同じですね ちゃんと同じに決めておきましたけれども これを key にして- img の要素を作りたいと思います そのための関数をこれから作りますが- createImg とします そして この key に従って 読み込む画像を決めますので key を引数として渡します そうしたら function の- createImg 引数は同じ key としておきましょう そして中括弧始まり 中括弧閉じ と 返す文字列は output という- 文字列の変数に入れて 後で返す- (キーを打つ音) ということにします ですからこの output に- 要素の記述を 文字列で書けばいい ということですね そういうことなので まず img ですね そして ちょっと改行しましょうか その後に- source です src= そして その要素の属性として- クォーテーションつけます これは文字列の終わりではないので シングルクォーテーションつけたうえで― 文字列の終わりの ダブルクォーテーションの後に- key に入っている文字列をつなげて そしてまた- 文字列が始まる ダブルクォーテーションの後に- .png で- これは属性の切れ目の シングルクォーテーションで- ダブルクォーテーションで閉じる と 後- フォルダが入ってなかったですね images と スラッシュ また改行しましょう そして ついでといっては何ですが alt 属性を加えておきます ここも属性の指定のクォーテーション シングルで加えておいて 文字列の終わりの ダブルクォーテーションの- key プラスして ダブルクォーテーションアイコン と入れましょう 今度は要素の属性の終わりの シングルクォーテーションでタグを閉じて- ダブルクォーテーションでお終い と もう1つ innerHTML に 差し込むのは- key の文字列に変わって 関数から返された文字列- element という変数入れてますけど これを- ペーストして 保存して確認しましょう ブラウザをリロードしてみます アイコンが表示されました このレッスンでは HTML ドキュメントに- DOM 要素を動的に差し込むことにしました その場合 まず body 要素の中の要素を 取ってくるには- querySelector を使います そしてその innerHTML というプロパティに 文字列で差し込む要素の記述を加えればいい ということでした

JavaScriptの関数を使いこなす

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

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

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

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

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