JavaScript + jQueryで作るタブ切り替えコントロール

JavaScriptファイルとjQueryの読み込み

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLファイルへの外部JavaScriptファイルの読み込みと、jQueryの読み込み方法について解説致します。
講師:
06:09

字幕

このレッスンでは これまでのレッスンに引き続き JavaScript と jQuery を使って タブ切り替えコントロールを 実装するにあたり JavaScript ファイルと jQuery の 読み込み方法について解説します まずダウンロードしてきたこの load_js フォルダの中にある― この3つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンを解説して行きます 早速レッスンを始めていきましょう 今回タブ切り替えコントロールを 実装するにあたり 読み込むファイルは jQuery というファイルと 今回ファイルとして用意してある この javascript.js こちらをこの index.html から 読み込みます これらのファイルの読み込み場所ですが こちらの の― 直前に設置する事にします まずは jQuery の方から 読み込んでみたいと思います jQuery のファイルはインターネット上から 取得することができます こちらの jQuery のウェブサイト こちらの「 download 」から ファイルの取得形式を選択して ダウンロードすることができます 今回は最も簡単な方法 CDN という方式を使って jQuery を読み込みたいと思います CDN 版はこちらですね こちらの部分に記載があります ここに記載のあるこの1行を コピーして下さい そしてエディターに戻ります そして先程の の直前に 貼り付けます これで jQuery の取り込みは完了なのですが 今回はこの index.html を サーバー上にアップロードして 確認するのではなくて ローカル 要するに PC 上で動作を確認するので こちらの src (ソース)の部分 こちらの頭に http: と追加しておきましょう これでローカルの PC 上から jQuery を 読むことができるようになりました 次に今度はこちらの javascript.js まだ中身は空っぽですが これを index.html から 読み込んでみたいと思います と書いて 先程追加した jQuery の下に 追加していきます この script タグの中に同じように src=" " そして先程の javascript.js の ファイル名を書きます javascript.js こちらで JavaScript の読み込みが 完了しました 注意して頂きたいのはこの手元にある javascript.js より前に こちらの jQuery を読み込んで おく必要があるということです これはしっかりと覚えておきましょう では実際にきちんとそれぞれが 読み込まれているか確認してみましょう まずはこの index.html を保存します そして先程の手元にある javascript.js を開きます そしてここにこのようなプログラムを書きます $ の ( ) そして function そして同じように ( ) の { } そして最後の ) の後に ; (セミコロン) をおいておきます そしてこの { } の間に数行 改行を入れて ここに alert と書きます そして ( ) の ; (セミコロン) そしてこの alert の引数の中に 「動作テストです。」と入れておきましょう では こちらの javascript.js も 保存します この状態で一度この index.html こちらのファイルをブラウザで 開いて確認してみましょう 確認するブラウザは Chrome を利用します ではこちらのファイルを開いてみます するとこのように 「JavaScript のアラート」ということで 先程 alert の引数に入れた 「動作テストです。」という― テキストが表示されましたね これで jQuery とJavaScript それぞれが きちんと読み込まれている― ということが分かりました ではエディターに戻ります 以上でレッスンは終了です 今回は JavaScript と jQuery を使って タブ切り替えコントロールを 実装するにあたっての― jQuery と JavaScript ファイルの 読み込み方法について解説しました 以降のレッスンでは実際にタブ切り替えの 処理を JavaScript と jQuery を使って 具体的に順を追って解説して行きますので そちらも合わせて参考にしてみて下さい

JavaScript + jQueryで作るタブ切り替えコントロール

タブ切り替えコントロールとは、Webページ上でタブをクリックして表示しているコンテンツを切り替える機能のことです。このコースではJavaScriptとjQueryを利用して、タブ切り替えコントロールをサイトに実装する方法について解説します。このコースを見れば、JavaScriptやjQueryの基本についても同時に習得することができます。

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

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

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

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