[Powered by Google Translate] [セミナー：jQueryの] [Vipul Shekhawat、ハーバード大学] 【これはCS50です。] [CS50.TV] あなたが自宅で一緒に続いている場合は、実際にオンラインで私のスライドにアクセスすることができます このリンクに行くことによって。 それはbit.ly.上、TjjRWjだ また、単に、直接URLに行くことができます これは私の名前ですcloud.cs50.net /〜vshekhawat、、です とjQuery。 私は非常にあなたが自宅で見ている場合は、一緒に従うことを奨励、 あなたがここにいるならば、また、これはかなりインタラクティブなプレゼンテーションであるためです。 

だから、今日、私はjQueryのの話するつもりだ、と最初の質問は、ある jQueryのは何ですか？ 今年は、私は、君たちにはJavaScriptをカバーしていない知っている できるだけ詳細に、我々は過去数年間に持っているとして。 JavaScriptは、まず第一に、単にクライアント側の言語です あなたは、各ユーザーのマシン上でスクリプトやコードを実行するために使用する。 だから、人々にWebページを提供するサーバーを持っている、 しかし、あなたは、自分のマシン上のものをしたいと思うかもしれません 30秒ごとに、またはそのような何かあなたのサーバーに要求を送信するために彼らのマシンを頼む。 アドレスを確認するにはJavaScriptを使用してそれを行うことができます。 jQueryのは、単にJavaScriptをの上に、より多くの機能を提供しています それはあなたのために余分なものを行います。 あなたは上の内容を見れば、 それはあなたが行うことができるしていることをものの一部について説明します。 だから全体的に、それは2006年1月に作成されています。 これは、最初2005年8月に考案されました。 それは、数年の周りされて、それは本当に新しいWeb 2.0の動きの一部ですだ それは、インターネットがとても光沢のある作られている。 これは、最も広く使用されているJavaScriptライブラリです。 万人19.6以上のウェブサイトは、それを使用していて、使い方はまだ増加している builtwith.comによると、その、明らかに、昨年、 ただ継続的にかなり直線的に増加している。 トップ千万のサイトの中では、まだそこにある -  そのうちの約40％が現在使用している。 Facebookはそれを使用しています、他のウェブサイトの多くは、現在それを使用します。 好んだら、自分でそれらの統計を見ることができます。 それが土台と13のボードメンバーを持っているので、そして、あなたは、それが合法的に言うことができる 定期的にそれに取り組む20人のチームと一緒に。 だから、それは非常に広く使われている、それは、それは空想だ。組織URLを持っている それは他のもののためにスピンオフを持っているので、それは大したことだ。 

なぜあなたはそれを使うべきでしょうか？ jQueryのは非常に軽量です。 それはそれは巨大なファイルではないことを意味します。あなたがダウンロードすることができます すべてのホワイトスペースとコメントなしであり、それが唯一の32 KBの縮小さファイル、。 だから、それはちょうどあなたのウェブページ上にトスするのは簡単です とそのまま使用を開始する。 それはまた、非常に効率的に書かれているので、それは多くを取るしません -  あなたがそれを使用するとき、それははるかにあなたのウェブサイトが遅くなることはありません。 それはあなたが以前に実現不可能だったものを実装することができます。 機能性のいくつかの側面があり、 アニメーションを作成するように、それは通常は行うことは非常に、非常に困難であろう。 しかし、jQueryので、彼らは実際には非常にシンプルだ。 と行うことは迷惑ですいくつかのものがあります JavaScriptで可能な、POSTリクエストを送信するように、 しかし、サーバーに要求を送信するためには、次のように記述する必要があります コー​​ドの5または6または7行。 今、あなたは、ただ一つの関数呼び出しで、単一行のコードでそれを行うことができます。 それは本当にあなたがやっていることを多くのものを簡素化します。 そして、すべてのクールな子供たちはそれを使用しています。そのことで、私は私を意味する。 news.whrb.orgです私の最終的なプロジェクトは、昨年は、 ラジオ局のためである、私はこのブログを作成 これは、すべて我々がやったことを示し、それらのためにMP3ファイルをホストします。 あなたは、過​​去の番組を閲覧することができます そしてそれはすべてのjQueryを使用して行われている。あなたが伝えることができます 本質的に、すべてのこれらのアニメーションのため。 ですから、持っている場合 - あなたは新しいポストを作成する場合、 あなたは、これらの小さなslideDownsを参照してください、すべてのjQueryを使用して行われていること。 そして、このフェード - そうなもののようなものは、すべてのjQueryを使用して行われ、 とあなたは常にサイトをナビゲートするためにページをリロードする必要はありません。 jQueryを使っ作られているもう一つのクールなことは、このプレゼンテーションである。 私は、scrolldeckと呼ばれるこのオープンソースのものを使用しています jQueryのの上に書いた誰か。 あなたが実際にソースを見ている場合は、そのを見ることができます 彼らはこのドル記号を使用している、ドル記号 関数はjQueryの関数であることを意味するためにjQueryのに使用されています。 そこで彼らはjQueryのの上にラッパーを定義している それはあなたが、このようなプレゼンテーションを行うことができます そして、あなたは、ここで、彼らは元のjQueryファイルをインクルードしていることがわかります これはjQueryのを使用したい場合は、インクルードする必要がありますものです あなた自身のウェブサイトである。 

それに触れて、どのようにそれをインストールするのですか？ あなたはただ、ファイルをjQuery.com、ダウンロードに行くことができます Webディレクトリに追加し、それを含める。 だから上に、HTMLファイルのheadタグ内 あなたのメインのHTMLファイルを、単にコードのその行を持っている あなたが使用しているのjQueryのバージョンの正しいバージョンの。 あなたは、jQuery.comに行くことによって、それをダウンロードすることができます "ダウンロードのjQuery"をクリックすると、それを持っている。それはそれだ。 実際に、我々はそれがどのように見えるかを見てみることができます。 ここでダウンロードをクリックすると、jQueryのはこれです。 それはあなたのためのすべての魔法のものを行うだけで一つの大きなJavaScriptファイルです。 これはまったく読めない縮小さバージョンです。 また、読み取り可能である開発版、を見ることができます それでも非常に、非常に長い。 それはそこに多くのものだ。 あなたはまた、Googleのホスティングされたバージョンにリンクすることができます。 だからあなたはそれを提供するためにGoogleに頼ることができます。 彼らはすべての回で利用できるそれのすべてのバージョンを提供します。 だから、あなたはおそらくあなたのためにそれをホストするためにグーグルに依存することができます。 または、jQueryの独自の最新バージョンにリンクすることができます。 彼らは、常に最新のバージョンに更新のURLを持っている。 、これは、jQueryの - 最新だし、それで一つの問題はあり 更新されたjQueryと以前の機能のいくつかのことは、ある 彼らは、老化または廃止予定になっていた それはないかもしれません - それはもうサポートされませように起動することがあります。 だから、バージョン1.8.2を使用してウェブサイトを記述する場合、 時間によってバージョン2.7が出てきます あなたが書いている機能の一部はもう動作しません。 だから、32 KBのファイルだけをダウンロードする方が良いでしょう、 あなたのWeb​​ページの上に置いて、それは永遠にうまくいく。 

私が先に行くとjQueryの実際の機能について話し始めるつもりです。 最初のものは、セレクタです。これはjQueryのは、最初に提供するために考案されたものです。 そして、あなたは見てのドキュメントをクリックすることができます 私がカバーするつもりセレクタの詳細なマニュアルを参照してください。 セレクタの背後にある考え方は、ページ上のHTML要素を選択することができるということです。 ページ上の要素は彼らにIDとクラスやその他の識別の側面を持っている。 もあります - 異なる順序ですばらしいスタイル。 彼らはお互いの中にネストしている時間の一部。 jQueryのは、ページから要素を取得する単純なクエリを構築することができます。 その後は、jQueryの関数を使用して、これらの要素を操作することができます 我々は、後で買ってあげる操作部は、です。 あなたは、HTML、CSSを変更し、変更することができます あなたはまた、アニメーション化し、特定のイベントにアクティブにする機​​能を追加することができます。 何かをクリックしている場合、そのため、たとえば、あなたは何かが起こるようにしたい、 あなたにもjQueryを使っていることを行うことができます。 と要素を選択する方法は膨大な数があります。 それらのほとんどは、私は使ったことがないが、基本的なものがあります これはかなり重要です。 あなただけの何も選択している場合例えば、要素セレクタ、、 それはdivのです - 私は実際にこのスライドプレゼンテーションのオープンコードがあります。 したがって、たとえば、ここでは、最初のスライドです。 ここでは、div要素を持っている。私たちは、実際にページ上のすべてのdiv要素を選択した場合は、 それはちょうど私達には、このファイル内に存在するすべてのdiv要素の配列を与えるでしょう。 IDセレクタを使用すると、指定されたIDを使って何を選択することができます。 もしそうなら、これは、例えば、このことは、 "何を、" IDを持っている そして、我々はいくつかのIDの代わりに＃何でこれをやった場合 それだけで一つの要素を持っており、そのページのその要素の配列を返します。 また、持っていることによって、セレクタをこのように組み合わせることができます 唯一のdiv要素であるIDを持つものを選択します。 うんそう。のみ、そのIDを持つdiv要素を選択します。 クラスのためにあなただけのドットを使用して、それはCSSと同じことだ。 子孫も動作します。あなたには、いくつかのクラスがあるので、もし それは、その中の要素をネストされている - ため、たとえば、 、そこにいくつかのクラスがあり、それは別のページにリンクするアンカータグを持っている あなたはリンクを取得するには、この構文を使用することができます。 また、一度に複数のものを選択することができます。単にカンマで区切って、 あなたが好きな任意のセレクタを使用し、単一の配列に、一度にそれらのすべてを選択します。 そしてまたセレクタありませんので、すべてのdiv要素を選択することができます いくつかの特定のクラスを持たない。 そして、それはまさにこの選択がどのように動作するかを紹介して取得する便利な方法です。 私は2番目で、いくつかの具体例を紹介します。 

高度なセレクタがある - これらはほんの一例です。 そこにこれらの数十がありますが、あなたは、すべての画像のタグを選択する場合 いくつかの要素の中に、あなただけの操作を行います画像を。 あなたは、例えば、偶数の要素を選択する場合はそれらの20が存在する場合、 あなたは、0,2,4,6などを選択する 偶数、あなたも行うことができます：あなたが奇数。 これらは擬似セレクタですが、これは、彼らが実際に計算することを意味します 他のすべての要素ではなく、ただ行くと、それらのすべてを選択するよりも。 また、することができます - 各要素は、特定の属性を持つことができます。 したがって、たとえば、クラス=センターも属性です。 このアンカータグの場合、hrefが、ハイパーテキストの参照、また属性です。 だから、リンクが特定のページへのか、単に何かを選択することができます - それは本当に一般的なのです。 あなたがしたいことを、任意の属性を使って何を選択することができます。 そして、また、属性が含まれています。 あなたは、例えば、すべての入力要素を選択したい場合 それらの名前として単語 "パス"を持っている、 ページは、入力されたテキストブロックを有する場合 それはあなたがそれを選択することができる一つの方法になるだろう "パスワード"と呼ばれています。 と、より多くのがあります。あなたが先に行くとマニュアルを見ることができます そしてそれがどのように動作するかの具体例を参照してください。 

次のことは、DOM操作です。 我々は、要素を選択した後、我々は実際に彼らと一緒にものを行うことになるでしょう。 これまでのところ、我々は全くそれを見ていないが、あなたはドキュメントを見れば 私たちができることは本当にたくさんあり​​ます。 この時点で、我々は、このプレゼンテーションで要素を選択するつもりだ そして彼らはjQueryを使って操作します。 これはjQueryを使って実装されているので、我々は、jQueryライブラリへのアクセス権を持って そして我々は、このコード内でこれらの機能を使用することができます。 あなたが知っていない可能性があること一つの有用な事はコンソールです。 そしてGoogle Chromeは私が使用しているものです。あなたの頭の中にコマンドJを押すことができます またはAltコントロールJ、コンソールを開きます。 Firefoxでは私はそれが、コマンドシフトKまたはコントロールシフトK.だと思う サファリでは、いくつかの設定を変更するに行かなければならない。 そこにあなたがそれをしたい場合は、リンクですが、私はクロームまたはFirefoxを得ることをお勧めします。 それでは、コンソールを開いてみましょう、それはここでダウンです。 それはあなたが基本的にはちょうどあなたが欲しいものを行うことができます。 だから、あなただけで、xという変数を作成して入力することもできます X = 5、X + 2が何であるかを見てみましょう。 あなたも、CSのような何かを行うことができます+見てみましょうで、x + 45、それはCS50なります。 あなただけのいくつかの典型的なJavaScriptのものを行うことができます。 しかし、あなたはまた、ここではjQueryを行うことができます。 

だからここに、この第一の側面を見てみましょう。 私たちは、文字列であるHTMLと呼ばれる変数を作成するつもりです。 これは、いくつかの新しいテキストを呼ばれて、その中に段落タグを持っています。 だから我々はこのHTMLを持って、それは段落タグで、いくつかの新しいテキストです。 今、私たちは、実際にページに追加したいと考えています。 私は、この段落のHTML、ここでこのタイトルは、APPEND IDになるようにそれを設定する。 我々はAPPEND IDを選択し、それに追加する場合 私が作成したHTMLの変数、 それは右のこの段落タグの直後、終了時にそのHTMLを追加します。 我々はそれをすればそう - 我々はこの段落を選択し、 そして我々は、私が追加したHTMLの変数とのappend関数を呼び出しました それは、ページ上の右がその新しいテキストを追加します。 我々はまた、それは、その要素の冒頭に、前に行くことを意味し、付加することができる。 だから、最初とその後でいくつかの新しいテキストがあります。 私が先に行くと私はやったこのようなものを取り除くためにリフレッシュすることができます。 しかし、それはあなたがプリペンドおよび追加のメソッドを使用する方法の例です ページ上のものを操作するために、いくつかのHTMLを追加します。 

また、クラスを変更することができます。 戻るこのスタイルファイルで、私は勝利クラスのためにこれを作成しました すなわち、テキストの色、赤、いくつかの背景色、およびテキストの影を有する。 それは恐ろしい見えますが、私は実際にすることができます -  この段落は、クラスIDに対応します。 だから私は勝利のためにクラスを追加することができます。 私は、コンソールでこれを実行することができます それはそのクラスを追加し、今では恐ろしいルックス、期待どおり。 CSSは自動的にそのクラスがあなたに適用される -  クラスのCSSがある場合、それが自動的に適用される あなたは、要素のクラスを変更した場合。 その後、我々はそれがクラスを削除使用して削除できます。 ですから、赤や強調のようないくつかの事前定義されたクラスを持っている場合、 その後、あなたは、要素にそれらを適用したい あなたはすべての時間をスタイリングすべてのCSSを行う必要はありません。 あなただけの要素にクラスを追加することができ、それが自動的になるだろう -  それは自動的にそのクラスに適切になります。 また、物事を削除することができ、私はすべてのdiv要素を選択するつもりです ページ上で、それらを削除します。 それが見えるように何が起こっている？ それは何のように見えるために起こっているので、左のものは実際にありません。 私のプレゼンテーションがなくなっています。 私は、幸いにも、リフレッシュして、それを持ち帰ることができます それは一度だけ実行しているので、 それはあなたが完全にページから要素を破棄したい場合は、削除する例です。 

また、上書きすることができ、私は、ページ上のすべての段落タグを選択するつもりです それらの内側に行くと、彼らはそこに持っているどのようなテキストに置き換える とただ一言 "テスト。" これを行う場合は、このテストをページ上のすべての段落を置き換えます。 うん。彼らはすべてのテストに置き換えています。 だからテキストにアクセスし、それを上書きする例です。 また、情報を取得することができ、これは入力ボックスのために本当にクールです。 あなたは人々にものを入力している入力ボックスを持っている場合 人々はそれにものを入力している、 ここで我々は、入力テキストのタイプの任意の入力タグを選択します。 この場合には、プレゼンテーション全体で唯一の入力ボックスは、そこ そう私達はちょうど最初のものを選択しますし、我々はそれにVal関数を呼び出します。 つまり、値を返し、入力ボックスのために 値は、その中にあることを起こるどんなだけです。 我々はこれを行う場合、だから、それは単なる文字列のものを返します。 そして、我々はより多くのものを書き込んだ後、再びそれを呼び出した場合、それはより多くのものに変わります。 それは、入力ボックスの要素にアクセスする一つの素晴らしい方法だし、次にチェック これは、有効な電子メールアドレスであり、これは、例えば、有効な日付である。 人々がそれを入力しているように、ただ、瞬時にものを取り出すことができます その後、それが有効なのかどうか確認し、それをサーバに返送し、あなたがそれで欲しいものを行う。 そして、それはあなたがそれらの箱の内側にあるものへのアクセス方法です。 

また、直接CSSを変更しているので、代わりに追加することができます いくつかの定義済みのプロパティを持つクラス、 ちょうどあなたが何にでも好きなCSSを追加することができます。 プレゼンテーション全体であるのでレッツセレクトボディ、、 そして色は、テキストがどのような色定義プロパティです。 我々は赤に、それを変更した場合は、ページ内のすべてのテキストが赤色に変わります。 我々は、背景色の青のような何かを行うことができます そこに私達は行く、それは美しいです。 あなたがこれをしたい何かを行うことができます。 CSSプロパティを使って、あなたは本当に何も、いつでもどのように見えるかを変更することができます。 次のことは、効果がある。 効果は、基本的にはCSSを変更することと同じことである しかし、彼らは実際にそれにいくつかの余分なアニメーションを提供します。 だからではなく、単に色を示すか、または何かを隠したり、変更、 あなたが実際にそれをアニメーションにすることができます。 あなたはそれのために豊富なドキュメントを見てみたい場合はここではドキュメントは、だ。 しかし、私は主なものをカバーするつもりです。 ショーと非表示のプロパティがあります。 IDは、実際にこの全体のボックスに対応して表示/非表示、 私はそれを隠している場合ので、それだけで消えます。 私はそれが戻ってくるようにしたい場合、私は再びそれを表示することができます。 そしてそれは背中です。それは実際に、消えませんでした 私が実際にページから削除していなかった、私はちょうど隠れに視界のCSSプロパティを設定 ので、あなたはもうそれを見ることはできません。 上にスライドして下にスライドもあり、あなたは、この効果を持つことができます。 それが消えるようにスライドして、それが消えた後、 あなたはそれが戻ってくるようにそれを下にスライドすることができます。そして今、それは背中です。 フェードIDがこのボックスに対応 - これフェード効果は、もあります。 私はそれをフェードアウトなら、それは徐々に消えます。 私もそれをフェードインすることができ、それが戻ってくるだろう。 また、フェード機能に固有のもので、これにフェード行うことができます。 あなたはそれがあなたが希望する任意の特定の不透明度にフェードすることができます。 あなたは0.5にゆっくりそれをフェードそうだとすれば、それは半分の目に見えるようになるでしょう。 私は再びそれが完全に見えるようにするには1に戻って、それが0.1に行かせる、とすることができます。 それはちょうどあなたが行うことができます別のアニメーションだ。 

トグルの効果もあります。 だから私は、このボックスに対応トグルIDを選択するつもりです そのdivの上には、トグルを呼び出すことができ、それが目に見えるだ場合、それは見えなくなるだろう、 それは目に見えないだ場合、それは再び見えるようになります。 だから、僕は二回このトグル関数を呼び出し、最初のものだった 皮と同じものは、2番目の呼び出しではショーと同じものだった。 そして、あなたはまた、フェードトグルでこれを行うことができます これは、それが実際にフェードを除いて同じものを、行います。 トグルスライドで、同じもの。 連鎖し効果が意味するだけでなく、あります あなたは、要素を選択し、ちょうどその上にアニメーションメソッドの束を呼び出す場合、 あなたはそれがフェードアウトしたい場合、その後、下にスライド その後フェードイン、その後非表示にして、それが連続してそれらを行います。 だから消えて、戻ってきた - いくつかの理由で、非表示には起こりませんでした。 それを試してみましょう。ええ、そう、それはフェードアウトし、それが離れて下落した。 そして、もっとたくさんあり​​ます。あなたは、アニメーション機能を使用することができます かなり複雑であり、独自のアニメーションを作成するには、 しかし、それは無限の拡張性を提供します。 あなたがしたいアニメーションの任意の種類を作ることができます。 また、一度に複数のアニメーションをキューにキューを使用することができます。 ですから、ページ全体に飛ぶために何かをしたい場合は、 右上から左下へのスライド、あなたがそれを行うことができ、 とだけ他の後に1に行くアクションの束を持っている。 

我々は話をするつもりだ次のことは、イベントです。 イベントには、あなたを許可 - これまでのところ、我々は単にコンソールに物事を入力してきた そしてそれは、これを実現するための一つの方法です しかし、実際のページで、次のことができるようにするつもりはない コンソールにユーザタイプのものを作る。 あなたは、物事が自動的に行われたい。 そのためには、いくつかの特定のイベントが起き上でアクティブイベントを使用する必要があります。 あなたは、完全な詳細については、マニュアルを確認できます。 それでは見てみましょう。我々は、ボックスを非表示にしたり表示したい 私はまだそれを実装していないので、しかし、今は、このボタンは何もしません。 私は実際のHTMLページに移動するつもりです。 ここではスライドです。スライドのdiv要素があります。 これは、スライドのクラスがあります。 テキストがあります。さて、このボックスとボックスのボタンがあります。 どのように我々は、実際にこれが消滅するでしょうか？ まず第一に、のはボックスIDが消えるなり関数を書いてみましょう。 これは、目的球の構文ですが、ちょうどそれhideTheBox呼び出してみましょう。 取られるべき引数がないので、それは、任意の引数をとりません。 我々は、ボックス番号を選択することができます。 jQueryの選択を使用するように、我々は、ボックスIDを選択することができます その後ちょうどそれが消えるよう。 レッツは、それがフェードアウトする。 我々は、実際のコンソールでは、この関数を実行した場合 我々は、この関数を定義することができ、我々はhideTheBoxを呼び出すことができ、それが動作します。 しかし、我々は、ボタンが実際に押されたときにそれが起こるしたい。 そのためには、イベントを使用しなければならない。 いくつかの特定のボタンをクリックするか、いくつかのアクションのハプニングにイベントをバインドするには、 我々は、イベントがトリガされた要素を選択する必要があります -  またはそれは申し訳ありませんが、イベントをトリガします。 

すべてのだから最初、ボックスボタンのIDを選択してみましょう 、ボタンだので、今、そのボタンの 我々はそれをクリックしたいるときにアニメーションを作成したい。 だからこのクリック機能はあり。 それはあなたがそれに別の関数をバインドすることができます。 この関数は、引数として別の関数を受け取り 我々は、hideTheBox関数で渡すことができます と、このボタンがクリックされるたびに、その機能が自動的に実行されます。 だから、これは、我々はこれを保存した場合、私はリフレッシュします動作します と - 一秒、ごめんなさい。 私は本当にすぐにこの問題を修正しましょう​​。 オーケー。そうしよう。だから今ボックスは、我々はボタンをクリックしたときに消えつつある。 我々はまた、単にfadeToggleためにこれを変更することができます ボックスを表示または非表示にするだけで、それを変更し、 我々は更新している場合、これはまた、あまりにも動作します。 我々はそれを隠すことができ、我々はまた、それを表示することができ、それが動作し続けます。 我々が行うことができますもう一つは、我々は、実際にこのhideTheBox関数を定義する必要はありません 私たちは、クリック機能を呼び出す前に。 だからではなく、関数を定義し、hideTheBoxを呼び出す、 我々はこれだけのものをクリックするとそれを呼び出すつもりだ。 だから私たちは、ここでは匿名でそれを定義することができ、 これはJavaScriptが持っている機能です。 あなたは、関数を定義することができます、通常、我々は関数hideTheBoxを言うだろう 引数を指定して、その代わりに、我々だけで、引数を機能しないと言うことができます 、関数を定義するために括弧を開始 、その中括弧を閉じた後、ちょうどここで関数を定義する 最初のカッコと最後の括弧内 それは、クリック関数の引数に対応しています。 だから我々は、この関数に渡している、我々はここのコード行をコピーすることができ、 それはまったく同じことを行います。 そして今、我々はこのランダムfadeTheBox機能を持っていない その明確な理由がないのに、周りに座っている。 関数が匿名で定義されていた、それは名前を持たない。 我々はボックスボタンをクリックしたときにのみ実行されます。 だからさわやかもう一度、1つのより多くの時間、あなたは、それはまだ動作していることがわかります。 そして、それは、あなたがイベントを作成する方法を説明します。 

我々が使用できるさまざまなイベントがたくさんあり​​ます。 私はどのようにこれらの作業をお見せするためにコンソールを使用に戻すつもりです。 これらのそれぞれのIDが各ボックスに対応する。 このボックスをクリックし、IDであるので、これは重要なIDであり、これは、マウスのIDです。 のではなく、毎回、それを入力して、もう一つは、このアクションの機能があるということです 私は実際に先に行き、ここに、このアクション機能を下に定義されている。 それはhideTheBox関数と同じことを行います。 それは、それをインチこのボックスやフェードそれをどちらを取得またはフェード 我々はここでそれを使用することができるしている理由だ。 我々はこのクリックのIDをクリックした場合そこで、我々は、ボックスが消えたり、再び表示したい。 それは我々が最後のスライドにあったことをボタンと同じことだ。 今、我々はこれをクリックすると、ボックスが消え、という呼び出した後、 再びそれをクリックし、ボックスが再び表示されます。 これはかなり簡単です。ダブルクリックすると、同じことをします を除いては、ダブルクリックが必要です。 あなたが再びそれをクリックして、それをクリックした場合だから何も起こりません、 しかし、あなたはすぐにダブルクリックすると、それは消えます。 あなたはダブルもう一度クリックすると、それが戻ってくるだろう。 だから非常に簡単です。 キーボード入力は、奇妙なの一種である、私はそれが実際に、この例では動作しないと思う なぜならキーダウン、アップキーとキーを押すと、他のキーアクション あなたにそれをバインドどんな要素に関係なく活性化する。 たとえば、私は、身体または完全に別のものにダウンキーをバインドし、たとえ それはまだ関係なく活性化するであろう - それは固有のものではありません。 私はこれをクリックしなければならないと何が消えるようにキーを押さないでください。 それは関係なく、私はインチ現在よどんな要素の活性化するであろう したがって、これらは、実際には、この例では動作しません。 ので、それはキーボード入力のdivに入力を入力として私を認識しません。 

しかし、あなたはマウスアクションを見れば、 最初のものはホバーであり、そしてそれは、この使用して、CSSの一部を行うことができます。 あなたは、CSSを使用している場合は、何か上にカーソルを置く場合は、そのようにそれを作成することができます その後そのスタイル変更。 しかし、jQueryを使用して、あなたは同様に他のもののスタイルを変更することができます。 したがって、たとえば、私たちはこのdivの上にカーソルを置く場合にアクションを呼び出すことになるだろう。 それは我々がその上に置く場合には、ボックスが消えることを意味します。 我々は離れてそれから移動した場合、ボックスが再び表示されます。 我々はこれを呼び出して、その上に置くと、ボックスが消えない、 とすぐに我々は離れて移動すると、それが戻ってくる。 我々は、マウスのIDに、このホバー関数を呼び出す場合は、 我々は、ボックスの上に置く場合は、このボックスに対応する、 今それは、ファンキーであることだが、 - それからボックスが実際に表示されなくなります -  我々は離れてそれから移動した場合、それが再び表示されます。今のところ、それはいくつかの理由で後方だ。 マウスが入るとマウス移動機能がやや似ていますが、若干異なります。 マウスはマウスだけが箱に入ったときに、期待通りに活性化すると入力します。 あなたがそれに引っ越すのであれば、それは消えます。 あなたが離れて移動するときに、それに戻りません、あなたが戻って来るようにそれのためのそれに戻って移動する必要があります。 アクティブになり、マウスの移動機能は、もあります マウスはボックス内であっても存在している時に。 だからそれだけでとフェードアウト、行くにしておこう。 そしてそれは実際に伐採いる - それだけでフェードインしているように思える、 しかし、それは実際には、これより多くのアクションをログに記録するだ そうあなたが離れて移動するとき、それはちょうどそれがそれらの千のようにログに記録されるために行くしておこう。 多分ない千。多分5。 それはそれ以上を記録します。 ポイントは、すべてのマウス操作で、それらの多くがある。 、あなたが他のものの上に読むことができますが、それらはすべて多少異なります とあなたが必要とするいずれか1選ぶことができます 特定のいずれかの目的のためにあなたがやろうとしている。 

私が話をするつもりです次のことは、AJAXです。 AJAX、私たちは今年と同じくらいの深さではJavaScriptをカバーしていない知っている、 ので、私はわずか数分のために一般的にAJAXについて話をするつもりです。 AJAXは非同期JavaScriptとXMLの略です。 、あなたは、Facebookにしているとき、それは、例えば、基本的だし、それはあなたに通知をプッシュ AJAXは、Webブラウザ上で実行されているからだ。 Webブラウザは、実際の数秒おきに ことを求めて、Facebookのサーバに行く、あなたは私のために新しい何かを持っていない、 そしてそれはあなたに戻ってくる。 これは、サーバーに要求を送信することができます 実際にページをロードする必要はありません。 だから通常は、あなただけのPHPとデータベースを使用している場合、 あなたは、サーバーから新しい情報を得ることができる前にページを更新する必要があります。 しかし、AJAXを使用して、あなたは常に、新しい情報については引き出すことができます あなたはそのようなボタンか何かをクリックしたとき、またはそれを引き出します。 だから、これは私たちがページをリロードせずに要求を送信することができ、 そして我々はGETまたはPOST要求のいずれかを使用できます。 

GET要求があればあなたがにGoogle.comに、例えば、 とq =テストを行う。それは彼らに、クエリのテストを与えている。 それは、URL自体にこれらのパラメータを渡しているので、それはGETリクエストです。 あなたのポストを介してそれらを送信しているかのように、POSTリクエストです。 あなたは手紙の中で、それを入れて、彼らにそれをオフに出荷のようにそれは、だ しかし、彼らは実際に内容が表示されません。彼らは、URLには表示されませんね。 直接でそれを入力することはできません、あなたは、ほとんど密かにそれを送信する必要があります。 それは記事でだ。 しかし、jQueryを使用すると、GETやPOSTリクエストを行うことができます はるかに容易に、通常は単なるJavaScriptを使用可能性がより。 あなたは、GET要求を使用してAPIを照会することができます、そしてあなたはまた、ログイン情報を確認することができます。 次のページで、私はこれを作成し、これは、 "昼食のために買っているのは？"、尋ね ハーバード食品APIを使用しているので、のは、そのプルアップしてみましょう。 これは、APIへのGETリクエストを行うためにjQueryを使用する方法のほんの一例です それから戻って情報を取得します。 だから私たちは、今日のメニューを見てみたい 私たちは昼食のために何を見たい。 ここではjQueryでGETリクエストを作成するためのURLです。 あなたは、$を使用しています。機能を取得します。 最初の引数は、照会しているので、まさに、URLです。 その後、次の引数は、GETリクエストが完了したときに実行される関数です。 だから、それが戻ってくるのを待つ、サーバにいくつかの要求を送る。 それが戻ってきていないときは、サーバーからのデータといくつかのアクションを実行するつもりだ。 のは、先に行くと同様にこのコードを記述しましょう​​。 私はわざと、どちらこれをコーディングしていませんでした。 ここTODOです。まず、イベントのバインディングを使用してみましょう このボタンが押されたときように、我々は、GETリクエストを送る。 そして、それはいくつかのデータを要求リターンを得るとき、 我々はこの食事情報IDのdivの中にそれを書くつもりです。 まず、食品のボタンIDを選択してみましょう。 それをクリックしたているときに、我々はそれが何かをしたい。 ただ以前のように、それは匿名のfuction作ってみましょう。 それらの中括弧をラップすることができ、 そして、このボタンが押されたときに、我々は、GETリクエストを送信する 昼食のために何かを確認します。 これを行うには、我々だけで$を入力することができます。得る。 これは、ドル記号を使用して、jQueryの関数です。 これは、引数のカップルを取る。最初のものは、URLです もう一つは、コールバック関数、と呼ばれています関数です その要求は、実際に返したとき。 ただ最初のURLを構築しましょう​​。 私たちは、ダビデがアップする書いたAPIからそれを得ることができます。 ここに行く、我々はそれがfood.cs50.net/api/1.3/menusだということがわかります その後、ちょうどあなたが希望するパラメータの名前を渡します。 だからパラメータ1の値は1である。 これは、標準の日付、開始日、今日がデフォルトのように見えます あなたは何を入力し、終了日にもデフォルトしていない場合 今日まで何も入力しない場合。 それは我々が何をしたいのです。私達はちょうど今日のための情報を取得したい。 

私たちは、フォーマットはJSONになりたい。 それはちょうど任意のだ、あなたがしたい任意のフォームを使用することができます。 あなたは、CSVを使用できますが、JSONはJavaScriptオブジェクト表記です。 JavaScriptは、それが何を意味するかを理解することは、非常に簡単です そして我々はより簡単にそのようにそれをプリントアウトすることができます。 だから、JSONでリクエストしてみましょう、としましょう​​リクエストランチ。 だから食事=昼食。ただ、そのURLを書くために、私たちはここに戻って行く。 メニューがあります。最初のパラメータは、出力= JSONです ので、それは我々が望むものだし、とパラメータを区切る 'と。' 2番目のパラメータは - 私は覚えていません。 食事。そして、私たちは食事=ランチをしたい。 あなたのブラウザにそれを入力して、それに行くことによって、このURLをテストすることができます。 それはあなたにいくつかの出力が得られます。それはちょうど昼食のための原料の束だ。 これは醜い形式です。私たちはより良い形式で当社のページ上に印刷したい。 URLが正しいので、今、私たちは、単に関数を記述する必要があります リクエストが成功したときにコールバックする。 この関数は、実際に引数を取ります。これは、データとなります。 データは、GETリクエストが行われた後、GETリクエストから戻ってくるものです。 我々は、中括弧を行うことができ、ここで我々は、匿名関数を書く それは我々が戻って情報を取得するときに、そのデータを使用して、実行します。 データだから、我々はこのURLで入力したときに、 これは、データが見えるように何が起こっているのです。これは巨大な文字列になるだろう。 しかし、良いことですが、JavaScriptはJSON.parse関数を使用して、それを解析することができます。 それでは、解析データと呼ばれる新しい変数を作成してみましょう。 と解析データがオブジェクトの配列です。 各オブジェクトには、次のような情報が含まれている - だけでなく、のは見てみましょう。 これは、日付、食事、カテゴリ、レシピ、このすべての他のものを持っています。 だから一人一人の名前をプリントアウトしてみましょう。 我々はそこから戻ることをものの配列全体を反復しましょう​​、 とだけそれぞれをプリントアウト - それぞれの名前をプリントアウト。 これはforループです。 

JavaScriptは、アレイ上の変数とループを作成することができますこの便利な構文があります varのiが、ます。var i = 0を実行するのではので、代わりに、単にイテレータです iが長さ未満であった、私は+ +、あなただけの解析されたデータで私をvarを行うことができます。 この例では、解析されたデータ（i）は、現在の要素に対応させて頂きます 配列の、実際のオブジェクト。 そして、我々はそれの名前を取得したい。 だからやる名前みましょう。 そして、最後のものは、我々は再びいくつかのjQueryを持っているつもりさ。 実際には、divに現在空ですこの食事情報のdivを追加します。 ように選択してみましょう。 申し訳ございませんが、jQueryとセレクト食事情報divのID、または食事情報IDを使用します。 我々はこれに追加したい。 我々はテストを行った場合、例えば、それはちょうどそれを毎回上書きされます。 だから私たちはこれを追加することができます。 配列内の現在の要素が、我々​​はそれの名前を取得します そして我々は、食事情報IDのDIVの末尾に追加します。 そして、ただ、それがクリーンに見えるようにする それはすべて1行ではありませんので、我々はまた、改行を追加します。 すべてがうまくいけばそれで、それはに良いことがあります -  まず第一に、このボタンがクリックされるたびに、 それは、次のURLにGETリクエストをオフに送信されます。 データはそこから戻ってきたとき、それは、それを解析します JSON、そのデータを表す配列全体をループ、にそれを回す その後、名前と改行を追加 以前は空だったこの食事情報IDのすべての行に。 だから、このページに戻って、我々は、リフレッシュします クリックして、調べる - それは動作しません。それは残念です。 デバッグが出番とこれは index.htmlを、1行目。 それは面白い。 大丈夫、まあ、これをやって時間を費やすのではなく、私はちょうどするつもりです 完成版である、私が持っていることを行って、ファイルを、プルアップ。 私は違いが何であるかわからないんだけど、私達はちょうど代わりに、これを開くことができます。 そして、私たちは、AJAXに行く、これは正しく動作するはずです。 それは、昼食のために本日は何です 順不同で、その周りに引用符で、それはきれいではありませんので。 しかし、明らかに、あなたが最終的なプロジェクトのためにこれをやっていた場合、 あなたはそれが良く見えるようになります。 しかし、それはあなたがGETリクエストを行う方法の単純な例です。 そして、我々は実際のコードを見れば、私は推測している、私はかなり確信している それはまだほとんど同じだ。 ああ、私はそれだと、文字列に変換するのを忘れた。 いや、それはまだ動作していない。いずれにせよ、ここで実際の完成したコードです これがどのように見えるべきかのために、 そしてそれは私が単に実装ものと同じことを行います。 あなたがボタンをクリックすると、それは自動的にデータを解析するためにJSONをGETを使用。 それは、それから戻ってデータを取得し、配列全体をループ 出入りプリント - 昼食のため、今日の何、それの名前、 と各行の後に改行追加。 それはあなたがGET関数を使用する方法を説明します。 

また、私は時間を持っていなかったPOSTを使用することができます そのための例を記述するが、我々は、ドキュメントを見ることができます。 あなたはjquery.postを見れば、 あなたはそれがほぼ同じものだということがわかります。 あなたがURLを持っているが、その代わりに使用してパラメータを渡す -  ただ、URL自体の文字列にそれらを置く このデータ変数に渡す必要があります それは、辞書、基本的には配列で、その値にマップするパラメータ。 あなたのことをを渡し、それはPOSTを使用してそれらを送信します。 そして、一度は、あなたが成功の機能を持つことができることを持っている データが戻ってきたときにそれが実行されます。 それ以外の場合は、全く同じである。だから、POSTを使用して、 あなたが入力フォームを持っている場合は、たとえば、POSTを使用することもできます あなたはそれに人々の入力のパスワードを聞かせて、これらのパスワードを送る あなたのバックエンドスクリプトに、そのユーザーが有効であるかどうかをデータベースでチェックする。 あなたが行うことができますすべてのjQueryを使用する代わりに、すべてでページを更新する必要がなくなります。 それは私が、私が以前にあなたを示すことがブログに実装方法を説明します。 我々は最後のポータルに移動してログアウトした場合、ログアウト ログアウトが動作しません。 まあ、私はただ新しいウィンドウでそれを開いてみましょう。 ここで、そこにパスワードがあり、私はランダムな何かを入力するつもりだった。 それは動作しませんが、我々はなかったことがわかります 実際にはまったくページをリフレッシュする必要があります。 コー​​ドは、あなたはそれを見てみたい場合には、 ここではすべての利用可能です。 コー​​ドだから私はいつか去年書いた。 ここで見ることができるように、私たちは、POSTリクエストを送信している。 私は、バックエンドでの考えられる理由と呼ばれるファイルを持っている パスワードが有効であればそれはチェックします。 我々はに渡すパラメータは、パスワードにマップされ、ある 現在この入力ボックスでの入力。 データが戻ってくるとき、我々は確認してください。 データがfalseの場合、我々は間違ったパスワードを言って、それを下にスライドさせ、 そしてその直後、それが消えるよう。 そうでなければ、我々は管理ページをロードします。 これは、すべてのJSONを用いて行った。 このコードの行数で、あなただけの、バックエンドにデータを渡すことができます それが正しいかどうかを確認し、あなたが正しくログインしているかどうかをチェック 実際に正しいページに人をリダイレクトする、それに対応する または、それらをログインさせると、彼らは不正なパスワードを持っていたこと、それらを語っていない。 だから、それはあなたがjQueryのPOSTを使用することができます方法の例です あなたのバックエンドへのPOSTリクエストを送信するために、 誰かが正常に記録されているかどうかをチェックする。 

すべての権利、私が持っていたすべての例で、私がカバーしたかったすべてのものだそう。 それらはjQueryのは、あなたが行うことができることを主要なものです： 、要素を選択DOM操作を使用してそれらを修正し、 エフェクトを追加することができ、特定のイベントで物事をアクティブにする、 とも非常にシームレスかつ簡単にAJAX要求を行う。 だから、来るか見ていただきありがとうございます ご質問があればと、ちょうど私に知らせてください。うん？ [学生]戻るあなたが示したときには、引用符でPOSTリクエストの後にJSONを持っていた と私はそれが何をしたかと思いまして。 >>ええ、私は参照してください。問題は、この例では、私はちょうど示した、ということでした 周りに引用符で囲まれた単語JSONがあった -  私は再びそれをプルアップします -  POST機能の周り。 私はただ表示し、それを引き上げています。 だからここでは、このPOSTリクエストだし、引用符でこのJSONはあり。 それはちょうど我々が出力されることを期待しているのかを定義します。 だから我々は、予想されるデータ型としてJSONを渡すと、 、それは必要条件ではありませんが、我々はそれを渡した場合 その後、データは自動的にJSONとして解析されます。 だから私たちは、それをJSONのparse関数を呼び出す必要はありません それだけで自動的に行われます。 そして、あなたは、POSTのドキュメントを見てみると、 このデータ型の変数は、サーバから予想されるデータのタイプがある。 間違っている可能性がありますインテリジェント推測するデフォルトは、 ので、あなたはそれを空白のままにすることができますが、それは単にデータのタイプだ あなたが使用しているコーディングで、それはJSONまたはXMLまたは他の何かであるかどうか。 

その他のご質問は？ わかりました。あなたが他の質問がある場合、私に電子メールを送ること自由に感じ vshekhawat@college.harvard.eduで、 とスライドとコードがかなりすぐにオンラインで入手する必要があります。 あなたの最終的なプロジェクトで頑張って、あなたはjQueryのを使用したいと考えています。 [CS50.TV]