jQuery APIでWebサイトを演出しよう

jQueryの実行タイミング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryの処理のタイミングを学びましょう。
講師:
08:45

字幕

このレッスンではjQuery の実行タイミングについて見ていきましょう。それではまず begin のフォルダーの中を開いてindex.html を Google Chrome で開きます。開いたらこのようにページの内容が現れますが下までスクロールをしてこの Practice という見出しを一度クリックしてみましょう。クリックするとこのように現れたり消えたりということを繰り返します。これは fadeToggle というメソッドですね。それでは一度フォルダーに戻り、begin のフォルダーを丸ごとSublime Text にドラッグアンドドロップしましょう。ドラッグアンドドロップをしたらサイドバーに index.html が見えているはずなのでこちらをダブルクリックするとファイルとして開くことができます。そうしたら一番下までスクロールをします。こちらの という所を見ます。ここに Practice の中に入っているh3 をクリックしたらbox というクラスが付いた要素がフェードインしたりフェードアウトしたりという命令が書いてあるわけですが例えばこの script から/script までを切り取ってしまって49行目に例えばペーストをしてしまうとどうなるでしょうか。 上書き保存をしてブラウザーに切り替えてそして更新をしてみましょう。そして Practice の見出しをクリックしても何も反応が起きなくなってしまいました。そして Sublime Text に戻ります。これは、まだこちらのライブラリが読み込まれる前にこちらが読まれてしまったのでライブラリを読んでからでないとこの fadeToggle というメソッドやこの jQuery の文法が理解できないということですね。なのでこのスクリプトはライブラリの必ず下になくてはいけないということがまず1つ大切な事です。今度は50行目から56、つまりスクリプト全部を切り取って上までスクロールをして、こちらの8行目の閉じ head の上にペーストをしましょう。JavaScript は head の中に入れても普通に読み込みが行われます。では上書き保存をしてブラウザーにフォーカスしてそして更新をしてみましょう。更新をしたらこの Practice の見出しをクリック。実はクリックしても動かないはずです。ここでもう1つコツがあるのでSublime Text に戻りましょう。ちゃんとライブラリも読み込まれてそして正しい文法で書いているのになぜか実行されないということは実はこの書き方は閉じの body の上でないと駄目な書き方になっています。 勿論閉じの body だけでやっていくのは大丈夫なんですけども、書き方によっては head の中で済ませたいということもあると思います。そういう時は一度ブラウザーを見てみましょう。ブラウザーに切り替えてここに答えが書いてあります。1つ目は ready というメソッドを使うということです。$(document).ready(function)これが開始のメッセージでそしてこちらの括弧の方が閉じということになります。これを使うことで上に書いても実行させることができます。それではこちらをコピーしてまず開始の方ですね。コピーしたらSublime Text に戻りましてこの $ から始まる上にペーストしましょう。そしてこちらの終了を表す括弧はこのセットと一緒の物なのでこの14行目の }); をコピーして改行してペースト。こうすることでdocument.ready の中にこの命令が入りました。では上書き保存をしてブラウザーに切り替えて更新をしてみましょう。そしてスクロールをしてPractice の所をクリックしてみると、このように fadeToggle がまた有効になりました。実はこの命令は DOMこれは Document ObjectModel といってブラウザーの要素名ですね。 body であったり h1これが JavaScript で操作できるオブジェクトであるということを示すものなのですがこの DOM が準備されたら実行、と。つまり、また Sublime Text に戻ってソースコードを見ていきますが上から順番にブラウザーはソースコードを読んでいきます。なので上から読んだ時に、この Practice というものがまだ存在しないわけですね。そこで document.ready というものでくくってあげると、一度上から下まで全部ブラウザーでこの要素名を取得してからこのスクリプトを実行するというようなタイミングになるのでfadeToggle が効くということになります。様々なサイトを見るとそういった説明が省略されている場合があるので動かない、といった場合はこのように ready のタイミングで実行してみるといいかもしれません。ではブラウザーに一度戻りましょう。実はこの document.ready は省略形で書くことができます。こちらもよく見かけるのでこの2つは同じ意味であるということを覚えておきましょう。つまり $(document).ready はdocument.ready を消して$(function) と普通に始めてしまっても普通に効くということを試してみましょう。 Sublime Text に戻ってdocument.ready を削ってしまいます。この時、括弧の残る数を注意しましょう。$(function) が残ればオッケーです。上書き保存をしてブラウザーに切り替えてここでショートカット、Mac は Command+RWindows は Ctrl+R で更新をします。そして Practice の見出しをクリックしても先程と同様に動くということを確認しておきましょう。そしてもう1つスクリプトの読み込むタイミングを説明しておきます。もう1つが JavaScript で言うとonLoad というものでready との違いは画像など重たいコンテンツも全て読み込んだ後に実行するというものです。ready は要素名だけが取得されたらDOMドムとも言いますが、ドムがしっかり読み込まれたら実行する。つまり画像が読み込まれてなくても実行が可能なのでスクリプトによる準備が早く整うということがメリットです。画像を扱う jQuery もありますのでそんな時はこちらの window.load という風に書いてあげると、実行タイミングを画像などがそろった時に実行、ということができます。 基本的にはこの ready で事足りる場合がほとんどですがそれだとまずいという時がありますのでこの window.load というのも覚えておいてください。では Sublime Text に戻ります。このレッスンでは head にJavaScript を書いてしまうと量がちょっと多くなってしまうのでこれを切り取って body の上ですね。閉じ body の上でスクリプトを管理していくことにしたいと思いますのでそのように合わせていきましょう。このレッスンでは jQuery の実行タイミングについてご紹介しました。

jQuery APIでWebサイトを演出しよう

jQueryはJavaScriptを効率良く記述することができる、世界中で広く使われているライブラリです。APIとは外部のウェブサービスを自分のサイト内で利用できる仕組みのことです。このコースではjQueryやAPIの基本を学習したのち、jQueryのプラグインやGoogle APIなどの実践的な使い方について学びます。

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

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

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

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