WebデザイナーのためのJavaScript & jQuery入門

jQueryを使う準備

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テキストエディタとブラウザの準備をします。そして、jQueryライブラリを利用する手順を学びます。
講師:
07:38

字幕

このレッスンでは jQuery の使い方を学びます。それではまずフォルダの中のbegin の HTML をChrome で開きましょう。開きましたら JavaScript のライブラリである jQuery は2通り使い方があるということを書いてあります。まず公式サイトからのダウンロードを試してみましょう。「公式サイトからダウンロード」をクリックします。そしてこの jquery.com という所がjQuery を開発している公式サイトです。そして右の方に Download jQuery というボタンがありますのでクリックをします。そうしますと、なにやらたくさんのファイルが並んでいますがまず注意するのは jQuery のバージョンです。1.x という系統と2.x という系統があります。2で始まる方が新しいのですが新しいだけに例えば IE8 といった昔のブラウザを切り捨てているということがあります。まだ IE に対応する余地がある場合は1.x の系統を選ぶようにしましょう。今回は、この Download compressed の方を選びます。これは compressed で圧縮をされている状態のものです。 uncompressed は可読性に優れている状態ですがファイルが少し重たくなってしまいますのでこの compressed の方をクリックします。そうしますと、この様にjQuery の本体のソースコードがずらっと現れます。これをブラウザのファイルから保存することにします。「ページを別名で保存」というのを選び保存場所は、この 04_02 のjs というフォルダがありますのでこの js というフォルダの中に入ってこちらに保存をします。無事に保存が完了しましたらこの画面は閉じて大丈夫です。そうしましたらアプリケーションの切り替えをしてファインダーに戻りbegin のファイルをSublime Text で開きましょう。Sublime Text で開きましたらスクロールをします。既に31行目に実はこれ h3 をピンクにしてくれという命令が jQuery の文法で書いてあります。が、この命令が書いてあるんですがやはりこの命令が書いてあってもまだブラウザ上では反映がされていません。ブラウザを縮めて並べておきましょう。何故かというと jQuery を使う準備がまだ済んでいないからです。jQuery を使うためには今ダウンロードした jQuery の本体をHTML に読み込む必要があります。 ですので、記述をしていきましょう。scriptそして早めに script タグを一旦閉じておきましょう。そして開始の script タグの内側にカーソルを入れて半角スペース src でソースを呼びだします。ソースは js フォルダの中に入っているファイル名をコピーしてきましょう。アプリケーションの切り替えでFinder の方へ行きjs フォルダの中に入ります。先程ダウンロードしたこのファイルがありますのでこのファイル名をコピーしましょう。コピーしましたらSublime Text に戻りjs の後にこの様にペーストをしました。これで、このライブラリが使えるつまりこのライブラリの中に.css といったような記法が書いてありそれを JavaScript に変換して使えるという風になっています。つまり、このライブラリが翻訳をしてくれるということです。そして jQuery の命令の必ず手前に置くというルールもありますので覚えておくようにしましょう。それでは上書き保存をしましたらブラウザにフォーカスをしてブラウザを更新更新すると、無事に見出しの色がピンクに変わりました。もう一通りの使い方をご紹介します。 今度はこの CDNContents Delivery Networkと書かれたリンクをクリックします。これは code.jquery.comというサイトに跳びます。CDN とはみんなが使うような人気のファイルはこのコードを最適化したネットワークを使って届けてあげます、というサービスです。この CDN の利点はとても高速であることとファイルをダウンロードしなくてもインターネット環境に繋がっていればすぐに使える、というメリットがあります。ですので今回は、この jQuery 1.x 系の1.11 の minifiedこれが先程の compressed と同じ意味です。minify なので縮められているという意味ですね。こちらをクリックします。そうしますと先程と同様に文字列がでてきますがこれを保存はせずにこの URL 欄をコピーしてそして、Sublime の方に行きscript タグを書きます。script そして速めに script タグを閉じておきます。そして、ソースソースはファイルのありかを記述しますのでこのダブルクォテーションの内側にペースト。これで、このファイルはネットワークを経由してこの HTML に呼びこまれるということになります。 ですので、先程書いたこの記述は消してしまって上書き保存、そしてブラウザにフォーカスして、更新をしても先程の命令はちゃんと効いているということになります。必要に応じてファイルを保存する方法とCDN を利用する方法メリットを考慮してどちらか選択できるようになりましょう。このレッスンでは jQuery を使う準備について学びました。

WebデザイナーのためのJavaScript & jQuery入門

jQueryはJavaScriptをあまりよく知らない人でも効率良く記述できるように作られたライブラリです。jQueryを使用すると、インタラクティブな演出や仕掛けを効率良くウェブサイトに実装することができます。このコースではJavaScriptとjQueryの基本を学んだうえで、それぞれの実際の応用の仕方について学んでいきます。

2時間49分 (27 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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