JavaScript + jQueryで作るナビゲーションバー

JavaScriptとjQueryの読み込み

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

ぜひご覧ください。

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

字幕

このレッスンではナビゲーションバーを実装するにあたり、HTML ファイルからJavaScript ファイルとjQuery を読み込む方法について解説致します。まずはダウンロードしてきた、こちらの load_js フォルダの中にあるこれら3つのファイルをエディタで開いてください。そして、これがそれらのファイルを開いた状態です。これらのファイルを利用しながら、今回のレッスンの解説を進めていきたいと思います。それでは早速、レッスンを始めていきましょう。今回 JavaScript と jQuery を読み込む場所ですが、HTML コード上でいきますと、こちらの の上に設置していきたいと思います。まずは jQuery を設置していきたいと思います。jQuery はインターネット上のjQuery のサイトからダウンロードしてくることが可能です。jQuery のサイトはこちらとなります。こちらの Download メニューをクリックします。そして、こういったページが表示されます。このページでは、幾つか jQuery の取得方法が書いていますが、今回は、もっとも手軽なCDN という方式を使って、jQuery を取得したいと思います。 CDN に関しては、ページの中ごろに記載があります。この部分ですね。この部分の、こちらのコードを1行コピーしておきます。そしてエディタに戻ります。そして先程のこれで jQuery の読み込みが完了なのですが、今回はこの index.htmlあくまでローカル環境、要するに PC 上で動作の確認をしていくため、こちらの scr の中のこの頭の部分に、http: と打ってあげましょう。こうすることによって、PC 上からも jQuery を読み込むことができるようになります。それでは次に、手元にある javascript.js今、何も書かれていないこちらのファイルですね。こちらのファイルを index.html から読み込んであげましょう。読み込む方法はこの jQuery の下に、同じ様に タグを書いてあげます。そして タグですね。そして、この script タグの中にscr="" と書いて、このダブルクオテーションの中に先程の javascript.js の名前を書いてあげます。javascript.js ですね。これで jQuery とjavascript.jsこちらの2つのファイルの読み込みが完了しました。 ここで1点注意点なのですが、必ず HTML ソース上でjQuery を先に読み込む様にしてその後に javascript.js を読み込む様にしてください。それではこの状態でindex.html を保存します。そして、この状態できちんと jQuery とjavascript.js が読み込まれているかどうか確認していきたいと思います。それでは javascript.js をエディタで開いてください。そしてこの中に、この様に書いていきます。まずはドルマーク、そして ()そしてこの中にfunction() {}そして最後のかっこの後ろに、セミコロンを打ってあげます。そして、この波かっこの間にいくつか改行を開けて、ここに alert(); と書きます。そしてこの alert() の中に、シングルクオテーションを書いて、この中に「動作テストです。」と書いておきましょうか。この状態で javascript.js を保存します。そして index.htmlこちらをブラウザで開いてみましょうか。こちらのファイルをブラウザで開きます。すると、このように「JavaScript のアラート」ということで、「動作テストです。」と表示されてきましたね。 この様に表示されてくれば、jQuery と JavaScript の読み込みが完了という形になります。それでは OK ボタンを押して、エディタに戻ります。以上でレッスンは終了です。今回はナビゲーションバーを実装するにあたり、HTML ファイルからJavaScript ファイルとjQuery を読み込む方法について解説致しました。以降のレッスンでは、ナビゲーションバーのトップメニュー部分をクリックすることで、スライドメニューを表示させる手順についての解説をしていきますので、そちらも合わせてご覧ください。

JavaScript + jQueryで作るナビゲーションバー

このコースではJavaScriptとjQueryを使ってナビゲーションバーを作成します。スライドメニュー付きのナビゲーションバーの機能をJavaScriptとjQueryを利用して実装する方法について学びます。HTMLとCSSでのコーディングの仕方、クリックイベントの登録やクリック時のスライドメニューの表示の切り替え方法などを順を追って解説します。

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

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

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

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