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

JavaScriptの働きを確認してみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptはHTMLとCSSを書き換えることができます。Developer Toolで実際にその働きを見てみましょう。
講師:
03:40

字幕

このレッスンではデベロッパーツールを使ってJavaScript の働きについて確認してみましょう。それでは site_final のフォルダーがあるのでこちらの中を開き、そして index.html があるのでChrome で開いてみましょう。開いたらデベロッパーツールを使ってJavaScript の動きを見ていきます。まずこちらのキャッチコピーの左側辺りの何も文字がない空間で右クリックをします。右クリックをすると「要素の検証」というメニューがあると思うのでこちらをクリックしましょう。そうするとデベロッパーツールが開きます。今 h2 にフォーカスが入っていますがこちらの中で上の要素にさかのぼっていってdiv id="message" の中にいることが分かります。そして少しスクロールをしてdiv class="backstretch" と書かれた箱を探してみましょう。こちらの左にある三角の矢印をクリックすると中身を閲覧することが可能です。こちらを開く、つまり展開しておきましょう。そうすると、何秒かおきにこのようにソースコードが動くことが確認できると思います。何が動いているかを確認してみましょう。 これはスライドショーの写真1枚1枚のエリアになっていてOpacity という項目が1 から 0 に動いていることが確認できます。0. なんなんなんという小数点以下の数値が動いています。このように HTML と CSS をJavaScript が動的に書き換えることでこのスライドショーができている、ということが確認できました。例えばこれをヘッダーの横の何もないエリアで右クリックから「ページのソースを表示」で見てみると、ページのソース、つまり HTML のコードが見られるわけですが実はそこに先程閲覧したBackstretch という箱はこのメッセージの中には入っていません。つまり jQuery 、JavaScript が動的にdiv を作り出して更にその中に画像を入れてそしてスタイルシートの Opacity 等をコントロールしてスライドショーが出来上がっているということになります。ソースコードの検索方法についてもご紹介しておきます。Mac の方は Command+FWindows の方はCtrl+F と押すと右上に検索窓が出てきます。ここに例えば message という風に単語を入れると自動的に message と書かれた文字がハイライトされます。 自分が調べたい対象がはっきりしている時はこのように検索窓と併せて使ってみてください。このレッスンではデベロッパーツールの一歩進んだ使い方、そして JavaScript の働きについて学びました。

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

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

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

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

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

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