JavaScript + jQueryで作るスライドショー

JavaScriptとjQueryの読み込み

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

ぜひご覧ください。

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

字幕

このレッスンではスライドショーを 実装していくにあたり利用する JaveScript ファイルと jQuery を HTML ファイルから読み込む方法について 解説いたします まずはダウンロードしてきた こちらの load_js というフォルダの中にある こちらの HTML ファイルと JavaScript ファイル そして css ファイルをエディタで 開いて下さい そして これが それらのファイルを開いた状態です これらのファイルを使いながら 今回のレッスンの解説を 進めていきたいと思います それでは 早速レッスンを 始めていきましょう 今回 JavaScript ファイルと jQuery を読み込むにあたって HTML ファイル上では script タグを こちらの― タグの直前に 設定することとします そして ご覧のとおり 既に こちらのファイルでは jQuery と JavaScript ファイルが 読み込まれている状態になっています それでは この部分を確認しながら どのように読み込んでいるかという点について 確認していきたいと思います まず こちらの jQuery 部分です こちらの jQuery は CDN という方式を使って jQuery を読み込んでいます jQuery はインターネット上の jQuery のサイトから取得することが可能です これがその jQuery のサイトとなります こちらのページの こちらの Download というボタンから このようにクリックすると こちらのページに遷移してきます こちらのぺ―ジでは jQuery を取得するための 幾つかの方法が記載されていますが 今回は CDN という方式を利用していますので その記載があるページの中ごろに― 注目してみたいと思います CDN のことについて描かれている箇所は こちらの部分になります こちらの部分の この一行 この部分をコピーして そして先程の の前に ペーストしているわけです それではエディタに戻ります こちらがそれをペーストした 部分になっています ただ今回は この index.html サーバー上にアップロードして 確認するのではなくて ローカル上 所謂 PC 上で動作を確認しているため こちらの― http: というものを この // の前に 付けてあげる必要があります これを付けてあげることによって ローカル上からも jQuery を正常に読み込むことが 可能になります そして次にこちらの JavaScript ファイルです こちらも同様に script タグを利用して 読み込んでいます そして こちらのソースには この手元にある javascript.js の パスを書いてあげればOKです 今回は この index.html と 同じ階層に この javascript.js ファイルがあるため ファイルの名前だけを 書いてあげればOKです それでは この状態で 正常に jQuery と JavaScript ファイルが 読み込まれているか確認してみたいと思います それでは javascript.js を エディタで開きます そして動作を確認するために このように書いていきます まずは $ マーク そして () の その中に function と書いて 更に () と書きます そしてその後に {} と書いて 最後の ) の後に ; を打ちます そして この { の後に 幾つか改行を入れて この中に alert そして (); そしてこの中に このように書いてあげましょう 「動作テストです」 このように書きましたら― javascript.js を 保存して下さい そして この index.html を ブラウザで開いて 動作を確認してみましょう こちらの index.html ですね これをブラウザで開きます すると このように 「JavaScript のアラート」ということで 「動作テストです」と 今 入力した内容が表示されてきましたね このように表示されてくれば 正常に jQuery と JavaScript ファイルが 読み込まれていることになります それではOKボタンを押して エディタに戻ります 以上でレッスンは終了です 今回はスライドショーを 実装していくにあたり利用する JavaScript ファイルと jQuery を HTML ファイルから読み込む方法について 解説いたしました 以降のレッスンでは この JavaScript ファイルと jQuery を利用して ローテーションする5つの画像を 横一列に並べて 画像の配置を初期状態に 設定する方法について解説いたしますので そちらもあわせて ご覧ください

JavaScript + jQueryで作るスライドショー

このコースでは、JavaScriptとjQueryを使ってスライドショーを作成する方法について学習します。具体的には、手動切り替えボタンが付いた画像のスライドショーをJavaScriptとjQueryを利用して実装する方法について解説します。同時にHTMLとCSSでのコーディングの仕方やJavaScriptやjQueryの基本についても学ぶことができます。

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

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

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

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