1 00:00:00,000 --> 00:00:02,690 [Powered by Google Translate] [セミナー：jQueryの] 2 00:00:02,690 --> 00:00:04,790 [Vipul Shekhawat、ハーバード大学] 3 00:00:04,790 --> 00:00:08,000 【これはCS50です。] [CS50.TV] 4 00:00:08,000 --> 00:00:10,640 あなたが自宅で一緒に続いている場合は、実際にオンラインで私のスライドにアクセスすることができます 5 00:00:10,640 --> 00:00:13,310 このリンクに行くことによって。 6 00:00:13,310 --> 00:00:18,650 それはbit.ly.上、TjjRWjだ 7 00:00:18,650 --> 00:00:20,700 また、単に、直接URLに行くことができます 8 00:00:20,700 --> 00:00:27,300 これは私の名前ですcloud.cs50.net /〜vshekhawat、、です 9 00:00:27,300 --> 00:00:32,409 とjQuery。 10 00:00:32,409 --> 00:00:34,920 私は非常にあなたが自宅で見ている場合は、一緒に従うことを奨励、 11 00:00:34,920 --> 00:00:40,650 あなたがここにいるならば、また、これはかなりインタラクティブなプレゼンテーションであるためです。 12 00:00:40,650 --> 00:00:43,160 >> だから、今日、私はjQueryのの話するつもりだ、と最初の質問は、ある 13 00:00:43,160 --> 00:00:45,300 jQueryのは何ですか？ 14 00:00:45,300 --> 00:00:47,090 今年は、私は、君たちにはJavaScriptをカバーしていない知っている 15 00:00:47,090 --> 00:00:51,080 できるだけ詳細に、我々は過去数年間に持っているとして。 16 00:00:51,080 --> 00:00:53,150 JavaScriptは、まず第一に、単にクライアント側の言語です 17 00:00:53,150 --> 00:00:58,390 あなたは、各ユーザーのマシン上でスクリプトやコードを実行するために使用する。 18 00:00:58,390 --> 00:01:00,660 だから、人々にWebページを提供するサーバーを持っている、 19 00:01:00,660 --> 00:01:02,600 しかし、あなたは、自分のマシン上のものをしたいと思うかもしれません 20 00:01:02,600 --> 00:01:08,060 30秒ごとに、またはそのような何かあなたのサーバーに要求を送信するために彼らのマシンを頼む。 21 00:01:08,060 --> 00:01:10,420 アドレスを確認するにはJavaScriptを使用してそれを行うことができます。 22 00:01:10,420 --> 00:01:13,190 jQueryのは、単にJavaScriptをの上に、より多くの機能を提供しています 23 00:01:13,190 --> 00:01:15,680 それはあなたのために余分なものを行います。 24 00:01:15,680 --> 00:01:17,710 あなたは上の内容を見れば、 25 00:01:17,710 --> 00:01:21,410 それはあなたが行うことができるしていることをものの一部について説明します。 26 00:01:21,410 --> 00:01:23,500 だから全体的に、それは2006年1月に作成されています。 27 00:01:23,500 --> 00:01:26,560 これは、最初2005年8月に考案されました。 28 00:01:26,560 --> 00:01:31,370 それは、数年の周りされて、それは本当に新しいWeb 2.0の動きの一部ですだ 29 00:01:31,370 --> 00:01:34,330 それは、インターネットがとても光沢のある作られている。 30 00:01:34,330 --> 00:01:37,630 これは、最も広く使用されているJavaScriptライブラリです。 31 00:01:37,630 --> 00:01:41,450 万人19.6以上のウェブサイトは、それを使用していて、使い方はまだ増加している 32 00:01:41,450 --> 00:01:45,640 builtwith.comによると、その、明らかに、昨年、 33 00:01:45,640 --> 00:01:49,710 ただ継続的にかなり直線的に増加している。 34 00:01:49,710 --> 00:01:52,870 トップ千万のサイトの中では、まだそこにある - 35 00:01:52,870 --> 00:01:55,180 そのうちの約40％が現在使用している。 36 00:01:55,180 --> 00:01:58,540 Facebookはそれを使用しています、他のウェブサイトの多くは、現在それを使用します。 37 00:01:58,540 --> 00:02:01,540 好んだら、自分でそれらの統計を見ることができます。 38 00:02:01,540 --> 00:02:05,820 それが土台と13のボードメンバーを持っているので、そして、あなたは、それが合法的に言うことができる 39 00:02:05,820 --> 00:02:11,910 定期的にそれに取り組む20人のチームと一緒に。 40 00:02:11,910 --> 00:02:16,110 だから、それは非常に広く使われている、それは、それは空想だ。組織URLを持っている 41 00:02:16,110 --> 00:02:21,660 それは他のもののためにスピンオフを持っているので、それは大したことだ。 42 00:02:21,660 --> 00:02:24,510 >> なぜあなたはそれを使うべきでしょうか？ jQueryのは非常に軽量です。 43 00:02:24,510 --> 00:02:27,270 それはそれは巨大なファイルではないことを意味します。あなたがダウンロードすることができます 44 00:02:27,270 --> 00:02:31,540 すべてのホワイトスペースとコメントなしであり、それが唯一の32 KBの縮小さファイル、。 45 00:02:31,540 --> 00:02:33,600 だから、それはちょうどあなたのウェブページ上にトスするのは簡単です 46 00:02:33,600 --> 00:02:35,910 とそのまま使用を開始する。 47 00:02:35,910 --> 00:02:39,630 それはまた、非常に効率的に書かれているので、それは多くを取るしません - 48 00:02:39,630 --> 00:02:42,550 あなたがそれを使用するとき、それははるかにあなたのウェブサイトが遅くなることはありません。 49 00:02:42,550 --> 00:02:45,770 それはあなたが以前に実現不可能だったものを実装することができます。 50 00:02:45,770 --> 00:02:47,790 機能性のいくつかの側面があり、 51 00:02:47,790 --> 00:02:51,780 アニメーションを作成するように、それは通常は行うことは非常に、非常に困難であろう。 52 00:02:51,780 --> 00:02:54,300 しかし、jQueryので、彼らは実際には非常にシンプルだ。 53 00:02:54,300 --> 00:02:57,040 と行うことは迷惑ですいくつかのものがあります 54 00:02:57,040 --> 00:02:59,610 JavaScriptで可能な、POSTリクエストを送信するように、 55 00:02:59,610 --> 00:03:02,190 しかし、サーバーに要求を送信するためには、次のように記述する必要があります 56 00:03:02,190 --> 00:03:04,320 コー​​ドの5または6または7行。 57 00:03:04,320 --> 00:03:07,200 今、あなたは、ただ一つの関数呼び出しで、単一行のコードでそれを行うことができます。 58 00:03:07,200 --> 00:03:11,790 それは本当にあなたがやっていることを多くのものを簡素化します。 59 00:03:11,790 --> 00:03:15,950 そして、すべてのクールな子供たちはそれを使用しています。そのことで、私は私を意味する。 60 00:03:15,950 --> 00:03:19,270 news.whrb.orgです私の最終的なプロジェクトは、昨年は、 61 00:03:19,270 --> 00:03:22,530 ラジオ局のためである、私はこのブログを作成 62 00:03:22,530 --> 00:03:29,750 これは、すべて我々がやったことを示し、それらのためにMP3ファイルをホストします。 63 00:03:29,750 --> 00:03:32,070 あなたは、過​​去の番組を閲覧することができます 64 00:03:32,070 --> 00:03:34,130 そしてそれはすべてのjQueryを使用して行われている。あなたが伝えることができます 65 00:03:34,130 --> 00:03:37,340 本質的に、すべてのこれらのアニメーションのため。 66 00:03:37,340 --> 00:03:42,360 ですから、持っている場合 - あなたは新しいポストを作成する場合、 67 00:03:42,360 --> 00:03:45,980 あなたは、これらの小さなslideDownsを参照してください、すべてのjQueryを使用して行われていること。 68 00:03:45,980 --> 00:03:49,140 そして、このフェード - そうなもののようなものは、すべてのjQueryを使用して行われ、 69 00:03:49,140 --> 00:03:52,720 とあなたは常にサイトをナビゲートするためにページをリロードする必要はありません。 70 00:03:52,720 --> 00:03:57,220 jQueryを使っ作られているもう一つのクールなことは、このプレゼンテーションである。 71 00:03:57,220 --> 00:03:59,700 私は、scrolldeckと呼ばれるこのオープンソースのものを使用しています 72 00:03:59,700 --> 00:04:03,250 jQueryのの上に書いた誰か。 73 00:04:03,250 --> 00:04:04,870 あなたが実際にソースを見ている場合は、そのを見ることができます 74 00:04:04,870 --> 00:04:07,830 彼らはこのドル記号を使用している、ドル記号 75 00:04:07,830 --> 00:04:12,110 関数はjQueryの関数であることを意味するためにjQueryのに使用されています。 76 00:04:12,110 --> 00:04:15,020 そこで彼らはjQueryのの上にラッパーを定義している 77 00:04:15,020 --> 00:04:18,570 それはあなたが、このようなプレゼンテーションを行うことができます 78 00:04:18,570 --> 00:04:21,200 そして、あなたは、ここで、彼らは元のjQueryファイルをインクルードしていることがわかります 79 00:04:21,200 --> 00:04:24,120 これはjQueryのを使用したい場合は、インクルードする必要がありますものです 80 00:04:24,120 --> 00:04:30,450 あなた自身のウェブサイトである。 81 00:04:30,450 --> 00:04:32,790 >> それに触れて、どのようにそれをインストールするのですか？ 82 00:04:32,790 --> 00:04:36,150 あなたはただ、ファイルをjQuery.com、ダウンロードに行くことができます 83 00:04:36,150 --> 00:04:38,320 Webディレクトリに追加し、それを含める。 84 00:04:38,320 --> 00:04:42,200 だから上に、HTMLファイルのheadタグ内 85 00:04:42,200 --> 00:04:45,400 あなたのメインのHTMLファイルを、単にコードのその行を持っている 86 00:04:45,400 --> 00:04:49,490 あなたが使用しているのjQueryのバージョンの正しいバージョンの。 87 00:04:49,490 --> 00:04:51,340 あなたは、jQuery.comに行くことによって、それをダウンロードすることができます 88 00:04:51,340 --> 00:04:55,130 "ダウンロードのjQuery"をクリックすると、それを持っている。それはそれだ。 89 00:04:55,130 --> 00:04:58,880 実際に、我々はそれがどのように見えるかを見てみることができます。 90 00:04:58,880 --> 00:05:01,080 ここでダウンロードをクリックすると、jQueryのはこれです。 91 00:05:01,080 --> 00:05:05,260 それはあなたのためのすべての魔法のものを行うだけで一つの大きなJavaScriptファイルです。 92 00:05:05,260 --> 00:05:09,270 これはまったく読めない縮小さバージョンです。 93 00:05:09,270 --> 00:05:13,180 また、読み取り可能である開発版、を見ることができます 94 00:05:13,180 --> 00:05:15,370 それでも非常に、非常に長い。 95 00:05:15,370 --> 00:05:17,980 それはそこに多くのものだ。 96 00:05:17,980 --> 00:05:20,240 あなたはまた、Googleのホスティングされたバージョンにリンクすることができます。 97 00:05:20,240 --> 00:05:23,820 だからあなたはそれを提供するためにGoogleに頼ることができます。 98 00:05:23,820 --> 00:05:29,310 彼らはすべての回で利用できるそれのすべてのバージョンを提供します。 99 00:05:29,310 --> 00:05:31,530 だから、あなたはおそらくあなたのためにそれをホストするためにグーグルに依存することができます。 100 00:05:31,530 --> 00:05:33,270 または、jQueryの独自の最新バージョンにリンクすることができます。 101 00:05:33,270 --> 00:05:36,400 彼らは、常に最新のバージョンに更新のURLを持っている。 102 00:05:36,400 --> 00:05:40,850 、これは、jQueryの - 最新だし、それで一つの問題はあり 103 00:05:40,850 --> 00:05:44,350 更新されたjQueryと以前の機能のいくつかのことは、ある 104 00:05:44,350 --> 00:05:47,250 彼らは、老化または廃止予定になっていた 105 00:05:47,250 --> 00:05:49,620 それはないかもしれません - それはもうサポートされませように起動することがあります。 106 00:05:49,620 --> 00:05:52,940 だから、バージョン1.8.2を使用してウェブサイトを記述する場合、 107 00:05:52,940 --> 00:05:55,000 時間によってバージョン2.7が出てきます 108 00:05:55,000 --> 00:05:57,000 あなたが書いている機能の一部はもう動作しません。 109 00:05:57,000 --> 00:05:59,930 だから、32 KBのファイルだけをダウンロードする方が良いでしょう、 110 00:05:59,930 --> 00:06:04,100 あなたのWeb​​ページの上に置いて、それは永遠にうまくいく。 111 00:06:04,100 --> 00:06:07,450 >> 私が先に行くとjQueryの実際の機能について話し始めるつもりです。 112 00:06:07,450 --> 00:06:13,090 最初のものは、セレクタです。これはjQueryのは、最初に提供するために考案されたものです。 113 00:06:13,090 --> 00:06:15,500 そして、あなたは見てのドキュメントをクリックすることができます 114 00:06:15,500 --> 00:06:18,690 私がカバーするつもりセレクタの詳細なマニュアルを参照してください。 115 00:06:18,690 --> 00:06:24,120 セレクタの背後にある考え方は、ページ上のHTML要素を選択することができるということです。 116 00:06:24,120 --> 00:06:28,790 ページ上の要素は彼らにIDとクラスやその他の識別の側面を持っている。 117 00:06:28,790 --> 00:06:30,500 もあります - 異なる順序ですばらしいスタイル。 118 00:06:30,500 --> 00:06:32,570 彼らはお互いの中にネストしている時間の一部。 119 00:06:32,570 --> 00:06:38,120 jQueryのは、ページから要素を取得する単純なクエリを構築することができます。 120 00:06:38,120 --> 00:06:41,890 その後は、jQueryの関数を使用して、これらの要素を操作することができます 121 00:06:41,890 --> 00:06:43,990 我々は、後で買ってあげる操作部は、です。 122 00:06:43,990 --> 00:06:46,040 あなたは、HTML、CSSを変更し、変更することができます 123 00:06:46,040 --> 00:06:50,500 あなたはまた、アニメーション化し、特定のイベントにアクティブにする機​​能を追加することができます。 124 00:06:50,500 --> 00:06:52,710 何かをクリックしている場合、そのため、たとえば、あなたは何かが起こるようにしたい、 125 00:06:52,710 --> 00:06:55,210 あなたにもjQueryを使っていることを行うことができます。 126 00:06:55,210 --> 00:06:57,380 と要素を選択する方法は膨大な数があります。 127 00:06:57,380 --> 00:07:00,310 それらのほとんどは、私は使ったことがないが、基本的なものがあります 128 00:07:00,310 --> 00:07:02,340 これはかなり重要です。 129 00:07:02,340 --> 00:07:05,750 あなただけの何も選択している場合例えば、要素セレクタ、、 130 00:07:05,750 --> 00:07:10,640 それはdivのです - 私は実際にこのスライドプレゼンテーションのオープンコードがあります。 131 00:07:10,640 --> 00:07:13,450 したがって、たとえば、ここでは、最初のスライドです。 132 00:07:13,450 --> 00:07:17,430 ここでは、div要素を持っている。私たちは、実際にページ上のすべてのdiv要素を選択した場合は、 133 00:07:17,430 --> 00:07:22,300 それはちょうど私達には、このファイル内に存在するすべてのdiv要素の配列を与えるでしょう。 134 00:07:22,300 --> 00:07:27,040 IDセレクタを使用すると、指定されたIDを使って何を選択することができます。 135 00:07:27,040 --> 00:07:32,230 もしそうなら、これは、例えば、このことは、 "何を、" IDを持っている 136 00:07:32,230 --> 00:07:37,160 そして、我々はいくつかのIDの代わりに＃何でこれをやった場合 137 00:07:37,160 --> 00:07:42,920 それだけで一つの要素を持っており、そのページのその要素の配列を返します。 138 00:07:42,920 --> 00:07:45,490 また、持っていることによって、セレクタをこのように組み合わせることができます 139 00:07:45,490 --> 00:07:48,260 唯一のdiv要素であるIDを持つものを選択します。 140 00:07:48,260 --> 00:07:51,810 うんそう。のみ、そのIDを持つdiv要素を選択します。 141 00:07:51,810 --> 00:07:55,260 クラスのためにあなただけのドットを使用して、それはCSSと同じことだ。 142 00:07:55,260 --> 00:07:57,500 子孫も動作します。あなたには、いくつかのクラスがあるので、もし 143 00:07:57,500 --> 00:08:00,170 それは、その中の要素をネストされている - ため、たとえば、 144 00:08:00,170 --> 00:08:03,260 、そこにいくつかのクラスがあり、それは別のページにリンクするアンカータグを持っている 145 00:08:03,260 --> 00:08:08,510 あなたはリンクを取得するには、この構文を使用することができます。 146 00:08:08,510 --> 00:08:12,420 また、一度に複数のものを選択することができます。単にカンマで区切って、 147 00:08:12,420 --> 00:08:17,360 あなたが好きな任意のセレクタを使用し、単一の配列に、一度にそれらのすべてを選択します。 148 00:08:17,360 --> 00:08:19,650 そしてまたセレクタありませんので、すべてのdiv要素を選択することができます 149 00:08:19,650 --> 00:08:24,210 いくつかの特定のクラスを持たない。 150 00:08:24,210 --> 00:08:28,790 そして、それはまさにこの選択がどのように動作するかを紹介して取得する便利な方法です。 151 00:08:28,790 --> 00:08:32,270 私は2番目で、いくつかの具体例を紹介します。 152 00:08:32,270 --> 00:08:35,480 >> 高度なセレクタがある - これらはほんの一例です。 153 00:08:35,480 --> 00:08:38,840 そこにこれらの数十がありますが、あなたは、すべての画像のタグを選択する場合 154 00:08:38,840 --> 00:08:42,799 いくつかの要素の中に、あなただけの操作を行います画像を。 155 00:08:42,799 --> 00:08:45,340 あなたは、例えば、偶数の要素を選択する場合はそれらの20が存在する場合、 156 00:08:45,340 --> 00:08:48,290 あなたは、0,2,4,6などを選択する 157 00:08:48,290 --> 00:08:51,630 偶数、あなたも行うことができます：あなたが奇数。 158 00:08:51,630 --> 00:08:55,470 これらは擬似セレクタですが、これは、彼らが実際に計算することを意味します 159 00:08:55,470 --> 00:09:00,960 他のすべての要素ではなく、ただ行くと、それらのすべてを選択するよりも。 160 00:09:00,960 --> 00:09:05,510 また、することができます - 各要素は、特定の属性を持つことができます。 161 00:09:05,510 --> 00:09:10,580 したがって、たとえば、クラス=センターも属性です。 162 00:09:10,580 --> 00:09:16,500 このアンカータグの場合、hrefが、ハイパーテキストの参照、また属性です。 163 00:09:16,500 --> 00:09:21,150 だから、リンクが特定のページへのか、単に何かを選択することができます - それは本当に一般的なのです。 164 00:09:21,150 --> 00:09:25,410 あなたがしたいことを、任意の属性を使って何を選択することができます。 165 00:09:25,410 --> 00:09:27,470 そして、また、属性が含まれています。 166 00:09:27,470 --> 00:09:30,420 あなたは、例えば、すべての入力要素を選択したい場合 167 00:09:30,420 --> 00:09:32,700 それらの名前として単語 "パス"を持っている、 168 00:09:32,700 --> 00:09:37,560 ページは、入力されたテキストブロックを有する場合 169 00:09:37,560 --> 00:09:41,050 それはあなたがそれを選択することができる一つの方法になるだろう "パスワード"と呼ばれています。 170 00:09:41,050 --> 00:09:43,020 と、より多くのがあります。あなたが先に行くとマニュアルを見ることができます 171 00:09:43,020 --> 00:09:46,950 そしてそれがどのように動作するかの具体例を参照してください。 172 00:09:46,950 --> 00:09:48,840 >> 次のことは、DOM操作です。 173 00:09:48,840 --> 00:09:52,500 我々は、要素を選択した後、我々は実際に彼らと一緒にものを行うことになるでしょう。 174 00:09:52,500 --> 00:09:55,500 これまでのところ、我々は全くそれを見ていないが、あなたはドキュメントを見れば 175 00:09:55,500 --> 00:09:57,950 私たちができることは本当にたくさんあり​​ます。 176 00:09:57,950 --> 00:10:02,900 この時点で、我々は、このプレゼンテーションで要素を選択するつもりだ 177 00:10:02,900 --> 00:10:04,890 そして彼らはjQueryを使って操作します。 178 00:10:04,890 --> 00:10:08,290 これはjQueryを使って実装されているので、我々は、jQueryライブラリへのアクセス権を持って 179 00:10:08,290 --> 00:10:13,580 そして我々は、このコード内でこれらの機能を使用することができます。 180 00:10:13,580 --> 00:10:16,200 あなたが知っていない可能性があること一つの有用な事はコンソールです。 181 00:10:16,200 --> 00:10:19,340 そしてGoogle Chromeは私が使用しているものです。あなたの頭の中にコマンドJを押すことができます 182 00:10:19,340 --> 00:10:21,720 またはAltコントロールJ、コンソールを開きます。 183 00:10:21,720 --> 00:10:26,130 Firefoxでは私はそれが、コマンドシフトKまたはコントロールシフトK.だと思う 184 00:10:26,130 --> 00:10:28,880 サファリでは、いくつかの設定を変更するに行かなければならない。 185 00:10:28,880 --> 00:10:35,460 そこにあなたがそれをしたい場合は、リンクですが、私はクロームまたはFirefoxを得ることをお勧めします。 186 00:10:35,460 --> 00:10:37,750 それでは、コンソールを開いてみましょう、それはここでダウンです。 187 00:10:37,750 --> 00:10:41,170 それはあなたが基本的にはちょうどあなたが欲しいものを行うことができます。 188 00:10:41,170 --> 00:10:45,100 だから、あなただけで、xという変数を作成して入力することもできます 189 00:10:45,100 --> 00:10:49,200 X = 5、X + 2が何であるかを見てみましょう。 190 00:10:49,200 --> 00:10:57,670 あなたも、CSのような何かを行うことができます+見てみましょうで、x + 45、それはCS50なります。 191 00:10:57,670 --> 00:11:00,530 あなただけのいくつかの典型的なJavaScriptのものを行うことができます。 192 00:11:00,530 --> 00:11:02,730 しかし、あなたはまた、ここではjQueryを行うことができます。 193 00:11:02,730 --> 00:11:06,200 >> だからここに、この第一の側面を見てみましょう。 194 00:11:06,200 --> 00:11:09,500 私たちは、文字列であるHTMLと呼ばれる変数を作成するつもりです。 195 00:11:09,500 --> 00:11:15,890 これは、いくつかの新しいテキストを呼ばれて、その中に段落タグを持っています。 196 00:11:15,890 --> 00:11:19,420 だから我々はこのHTMLを持って、それは段落タグで、いくつかの新しいテキストです。 197 00:11:19,420 --> 00:11:21,800 今、私たちは、実際にページに追加したいと考えています。 198 00:11:21,800 --> 00:11:28,310 私は、この段落のHTML、ここでこのタイトルは、APPEND IDになるようにそれを設定する。 199 00:11:28,310 --> 00:11:32,320 我々はAPPEND IDを選択し、それに追加する場合 200 00:11:32,320 --> 00:11:34,560 私が作成したHTMLの変数、 201 00:11:34,560 --> 00:11:40,370 それは右のこの段落タグの直後、終了時にそのHTMLを追加します。 202 00:11:40,370 --> 00:11:43,730 我々はそれをすればそう - 我々はこの段落を選択し、 203 00:11:43,730 --> 00:11:47,590 そして我々は、私が追加したHTMLの変数とのappend関数を呼び出しました 204 00:11:47,590 --> 00:11:50,960 それは、ページ上の右がその新しいテキストを追加します。 205 00:11:50,960 --> 00:11:54,970 我々はまた、それは、その要素の冒頭に、前に行くことを意味し、付加することができる。 206 00:11:54,970 --> 00:11:58,290 だから、最初とその後でいくつかの新しいテキストがあります。 207 00:11:58,290 --> 00:12:01,660 私が先に行くと私はやったこのようなものを取り除くためにリフレッシュすることができます。 208 00:12:01,660 --> 00:12:05,280 しかし、それはあなたがプリペンドおよび追加のメソッドを使用する方法の例です 209 00:12:05,280 --> 00:12:08,910 ページ上のものを操作するために、いくつかのHTMLを追加します。 210 00:12:08,910 --> 00:12:11,080 >> また、クラスを変更することができます。 211 00:12:11,080 --> 00:12:14,970 戻るこのスタイルファイルで、私は勝利クラスのためにこれを作成しました 212 00:12:14,970 --> 00:12:19,990 すなわち、テキストの色、赤、いくつかの背景色、およびテキストの影を有する。 213 00:12:19,990 --> 00:12:23,810 それは恐ろしい見えますが、私は実際にすることができます - 214 00:12:23,810 --> 00:12:26,410 この段落は、クラスIDに対応します。 215 00:12:26,410 --> 00:12:29,860 だから私は勝利のためにクラスを追加することができます。 216 00:12:29,860 --> 00:12:31,870 私は、コンソールでこれを実行することができます 217 00:12:31,870 --> 00:12:35,480 それはそのクラスを追加し、今では恐ろしいルックス、期待どおり。 218 00:12:35,480 --> 00:12:39,680 CSSは自動的にそのクラスがあなたに適用される - 219 00:12:39,680 --> 00:12:42,680 クラスのCSSがある場合、それが自動的に適用される 220 00:12:42,680 --> 00:12:44,680 あなたは、要素のクラスを変更した場合。 221 00:12:44,680 --> 00:12:49,230 その後、我々はそれがクラスを削除使用して削除できます。 222 00:12:49,230 --> 00:12:53,690 ですから、赤や強調のようないくつかの事前定義されたクラスを持っている場合、 223 00:12:53,690 --> 00:12:55,990 その後、あなたは、要素にそれらを適用したい 224 00:12:55,990 --> 00:12:58,230 あなたはすべての時間をスタイリングすべてのCSSを行う必要はありません。 225 00:12:58,230 --> 00:13:01,510 あなただけの要素にクラスを追加することができ、それが自動的になるだろう - 226 00:13:01,510 --> 00:13:05,580 それは自動的にそのクラスに適切になります。 227 00:13:05,580 --> 00:13:07,900 また、物事を削除することができ、私はすべてのdiv要素を選択するつもりです 228 00:13:07,900 --> 00:13:10,830 ページ上で、それらを削除します。 229 00:13:10,830 --> 00:13:13,990 それが見えるように何が起こっている？ 230 00:13:13,990 --> 00:13:16,170 それは何のように見えるために起こっているので、左のものは実際にありません。 231 00:13:16,170 --> 00:13:18,170 私のプレゼンテーションがなくなっています。 232 00:13:18,170 --> 00:13:21,290 私は、幸いにも、リフレッシュして、それを持ち帰ることができます 233 00:13:21,290 --> 00:13:24,420 それは一度だけ実行しているので、 234 00:13:24,420 --> 00:13:29,460 それはあなたが完全にページから要素を破棄したい場合は、削除する例です。 235 00:13:29,460 --> 00:13:33,180 >> また、上書きすることができ、私は、ページ上のすべての段落タグを選択するつもりです 236 00:13:33,180 --> 00:13:36,850 それらの内側に行くと、彼らはそこに持っているどのようなテキストに置き換える 237 00:13:36,850 --> 00:13:39,690 とただ一言 "テスト。" 238 00:13:39,690 --> 00:13:46,520 これを行う場合は、このテストをページ上のすべての段落を置き換えます。 239 00:13:46,520 --> 00:13:49,150 うん。彼らはすべてのテストに置き換えています。 240 00:13:49,150 --> 00:13:53,270 だからテキストにアクセスし、それを上書きする例です。 241 00:13:53,270 --> 00:13:57,490 また、情報を取得することができ、これは入力ボックスのために本当にクールです。 242 00:13:57,490 --> 00:14:00,470 あなたは人々にものを入力している入力ボックスを持っている場合 243 00:14:00,470 --> 00:14:03,880 人々はそれにものを入力している、 244 00:14:03,880 --> 00:14:09,030 ここで我々は、入力テキストのタイプの任意の入力タグを選択します。 245 00:14:09,030 --> 00:14:13,800 この場合には、プレゼンテーション全体で唯一の入力ボックスは、そこ 246 00:14:13,800 --> 00:14:17,260 そう私達はちょうど最初のものを選択しますし、我々はそれにVal関数を呼び出します。 247 00:14:17,260 --> 00:14:19,570 つまり、値を返し、入力ボックスのために 248 00:14:19,570 --> 00:14:24,330 値は、その中にあることを起こるどんなだけです。 249 00:14:24,330 --> 00:14:31,880 我々はこれを行う場合、だから、それは単なる文字列のものを返します。 250 00:14:31,880 --> 00:14:36,860 そして、我々はより多くのものを書き込んだ後、再びそれを呼び出した場合、それはより多くのものに変わります。 251 00:14:36,860 --> 00:14:40,760 それは、入力ボックスの要素にアクセスする一つの素晴らしい方法だし、次にチェック 252 00:14:40,760 --> 00:14:45,060 これは、有効な電子メールアドレスであり、これは、例えば、有効な日付である。 253 00:14:45,060 --> 00:14:49,600 人々がそれを入力しているように、ただ、瞬時にものを取り出すことができます 254 00:14:49,600 --> 00:14:54,830 その後、それが有効なのかどうか確認し、それをサーバに返送し、あなたがそれで欲しいものを行う。 255 00:14:54,830 --> 00:14:57,720 そして、それはあなたがそれらの箱の内側にあるものへのアクセス方法です。 256 00:14:57,720 --> 00:15:00,090 >> また、直接CSSを変更しているので、代わりに追加することができます 257 00:15:00,090 --> 00:15:02,510 いくつかの定義済みのプロパティを持つクラス、 258 00:15:02,510 --> 00:15:08,120 ちょうどあなたが何にでも好きなCSSを追加することができます。 259 00:15:08,120 --> 00:15:10,350 プレゼンテーション全体であるのでレッツセレクトボディ、、 260 00:15:10,350 --> 00:15:14,370 そして色は、テキストがどのような色定義プロパティです。 261 00:15:14,370 --> 00:15:19,420 我々は赤に、それを変更した場合は、ページ内のすべてのテキストが赤色に変わります。 262 00:15:19,420 --> 00:15:26,310 我々は、背景色の青のような何かを行うことができます 263 00:15:26,310 --> 00:15:30,680 そこに私達は行く、それは美しいです。 264 00:15:30,680 --> 00:15:33,840 あなたがこれをしたい何かを行うことができます。 265 00:15:33,840 --> 00:15:39,250 CSSプロパティを使って、あなたは本当に何も、いつでもどのように見えるかを変更することができます。 266 00:15:39,250 --> 00:15:41,630 次のことは、効果がある。 267 00:15:41,630 --> 00:15:45,710 効果は、基本的にはCSSを変更することと同じことである 268 00:15:45,710 --> 00:15:48,870 しかし、彼らは実際にそれにいくつかの余分なアニメーションを提供します。 269 00:15:48,870 --> 00:15:53,380 だからではなく、単に色を示すか、または何かを隠したり、変更、 270 00:15:53,380 --> 00:15:56,130 あなたが実際にそれをアニメーションにすることができます。 271 00:15:56,130 --> 00:16:00,760 あなたはそれのために豊富なドキュメントを見てみたい場合はここではドキュメントは、だ。 272 00:16:00,760 --> 00:16:04,760 しかし、私は主なものをカバーするつもりです。 273 00:16:04,760 --> 00:16:12,030 ショーと非表示のプロパティがあります。 274 00:16:12,030 --> 00:16:14,510 IDは、実際にこの全体のボックスに対応して表示/非表示、 275 00:16:14,510 --> 00:16:18,190 私はそれを隠している場合ので、それだけで消えます。 276 00:16:18,190 --> 00:16:24,210 私はそれが戻ってくるようにしたい場合、私は再びそれを表示することができます。 277 00:16:24,210 --> 00:16:26,340 そしてそれは背中です。それは実際に、消えませんでした 278 00:16:26,340 --> 00:16:30,670 私が実際にページから削除していなかった、私はちょうど隠れに視界のCSSプロパティを設定 279 00:16:30,670 --> 00:16:34,030 ので、あなたはもうそれを見ることはできません。 280 00:16:34,030 --> 00:16:39,250 上にスライドして下にスライドもあり、あなたは、この効果を持つことができます。 281 00:16:39,250 --> 00:16:47,050 それが消えるようにスライドして、それが消えた後、 282 00:16:47,050 --> 00:16:53,210 あなたはそれが戻ってくるようにそれを下にスライドすることができます。そして今、それは背中です。 283 00:16:53,210 --> 00:16:57,650 フェードIDがこのボックスに対応 - これフェード効果は、もあります。 284 00:16:57,650 --> 00:17:01,200 私はそれをフェードアウトなら、それは徐々に消えます。 285 00:17:01,200 --> 00:17:04,490 私もそれをフェードインすることができ、それが戻ってくるだろう。 286 00:17:04,490 --> 00:17:08,930 また、フェード機能に固有のもので、これにフェード行うことができます。 287 00:17:08,930 --> 00:17:12,589 あなたはそれがあなたが希望する任意の特定の不透明度にフェードすることができます。 288 00:17:12,589 --> 00:17:16,869 あなたは0.5にゆっくりそれをフェードそうだとすれば、それは半分の目に見えるようになるでしょう。 289 00:17:16,869 --> 00:17:22,630 私は再びそれが完全に見えるようにするには1に戻って、それが0.1に行かせる、とすることができます。 290 00:17:22,630 --> 00:17:24,760 それはちょうどあなたが行うことができます別のアニメーションだ。 291 00:17:24,760 --> 00:17:26,750 >> トグルの効果もあります。 292 00:17:26,750 --> 00:17:33,410 だから私は、このボックスに対応トグルIDを選択するつもりです 293 00:17:33,410 --> 00:17:38,970 そのdivの上には、トグルを呼び出すことができ、それが目に見えるだ場合、それは見えなくなるだろう、 294 00:17:38,970 --> 00:17:42,320 それは目に見えないだ場合、それは再び見えるようになります。 295 00:17:42,320 --> 00:17:44,440 だから、僕は二回このトグル関数を呼び出し、最初のものだった 296 00:17:44,440 --> 00:17:48,380 皮と同じものは、2番目の呼び出しではショーと同じものだった。 297 00:17:48,380 --> 00:17:53,510 そして、あなたはまた、フェードトグルでこれを行うことができます 298 00:17:53,510 --> 00:17:55,730 これは、それが実際にフェードを除いて同じものを、行います。 299 00:17:55,730 --> 00:17:59,410 トグルスライドで、同じもの。 300 00:17:59,410 --> 00:18:01,460 連鎖し効果が意味するだけでなく、あります 301 00:18:01,460 --> 00:18:05,520 あなたは、要素を選択し、ちょうどその上にアニメーションメソッドの束を呼び出す場合、 302 00:18:05,520 --> 00:18:07,400 あなたはそれがフェードアウトしたい場合、その後、下にスライド 303 00:18:07,400 --> 00:18:11,040 その後フェードイン、その後非表示にして、それが連続してそれらを行います。 304 00:18:11,040 --> 00:18:24,920 だから消えて、戻ってきた - いくつかの理由で、非表示には起こりませんでした。 305 00:18:24,920 --> 00:18:30,030 それを試してみましょう。ええ、そう、それはフェードアウトし、それが離れて下落した。 306 00:18:30,030 --> 00:18:32,230 そして、もっとたくさんあり​​ます。あなたは、アニメーション機能を使用することができます 307 00:18:32,230 --> 00:18:35,370 かなり複雑であり、独自のアニメーションを作成するには、 308 00:18:35,370 --> 00:18:38,790 しかし、それは無限の拡張性を提供します。 309 00:18:38,790 --> 00:18:40,630 あなたがしたいアニメーションの任意の種類を作ることができます。 310 00:18:40,630 --> 00:18:44,230 また、一度に複数のアニメーションをキューにキューを使用することができます。 311 00:18:44,230 --> 00:18:47,340 ですから、ページ全体に飛ぶために何かをしたい場合は、 312 00:18:47,340 --> 00:18:49,860 右上から左下へのスライド、あなたがそれを行うことができ、 313 00:18:49,860 --> 00:18:55,240 とだけ他の後に1に行くアクションの束を持っている。 314 00:18:55,240 --> 00:18:57,490 >> 我々は話をするつもりだ次のことは、イベントです。 315 00:18:57,490 --> 00:19:02,090 イベントには、あなたを許可 - これまでのところ、我々は単にコンソールに物事を入力してきた 316 00:19:02,090 --> 00:19:04,870 そしてそれは、これを実現するための一つの方法です 317 00:19:04,870 --> 00:19:08,020 しかし、実際のページで、次のことができるようにするつもりはない 318 00:19:08,020 --> 00:19:10,020 コンソールにユーザタイプのものを作る。 319 00:19:10,020 --> 00:19:12,050 あなたは、物事が自動的に行われたい。 320 00:19:12,050 --> 00:19:18,060 そのためには、いくつかの特定のイベントが起き上でアクティブイベントを使用する必要があります。 321 00:19:18,060 --> 00:19:21,340 あなたは、完全な詳細については、マニュアルを確認できます。 322 00:19:21,340 --> 00:19:24,030 それでは見てみましょう。我々は、ボックスを非表示にしたり表示したい 323 00:19:24,030 --> 00:19:29,340 私はまだそれを実装していないので、しかし、今は、このボタンは何もしません。 324 00:19:29,340 --> 00:19:35,420 私は実際のHTMLページに移動するつもりです。 325 00:19:35,420 --> 00:19:38,560 ここではスライドです。スライドのdiv要素があります。 326 00:19:38,560 --> 00:19:41,230 これは、スライドのクラスがあります。 327 00:19:41,230 --> 00:19:46,890 テキストがあります。さて、このボックスとボックスのボタンがあります。 328 00:19:46,890 --> 00:19:52,900 どのように我々は、実際にこれが消滅するでしょうか？ 329 00:19:52,900 --> 00:19:58,250 まず第一に、のはボックスIDが消えるなり関数を書いてみましょう。 330 00:19:58,250 --> 00:20:01,820 これは、目的球の構文ですが、ちょうどそれhideTheBox呼び出してみましょう。 331 00:20:01,820 --> 00:20:06,130 取られるべき引数がないので、それは、任意の引数をとりません。 332 00:20:06,130 --> 00:20:08,950 我々は、ボックス番号を選択することができます。 333 00:20:08,950 --> 00:20:15,020 jQueryの選択を使用するように、我々は、ボックスIDを選択することができます 334 00:20:15,020 --> 00:20:17,700 その後ちょうどそれが消えるよう。 335 00:20:17,700 --> 00:20:20,690 レッツは、それがフェードアウトする。 336 00:20:20,690 --> 00:20:27,390 我々は、実際のコンソールでは、この関数を実行した場合 337 00:20:27,390 --> 00:20:33,380 我々は、この関数を定義することができ、我々はhideTheBoxを呼び出すことができ、それが動作します。 338 00:20:33,380 --> 00:20:36,650 しかし、我々は、ボタンが実際に押されたときにそれが起こるしたい。 339 00:20:36,650 --> 00:20:40,950 そのためには、イベントを使用しなければならない。 340 00:20:40,950 --> 00:20:45,500 いくつかの特定のボタンをクリックするか、いくつかのアクションのハプニングにイベントをバインドするには、 341 00:20:45,500 --> 00:20:50,040 我々は、イベントがトリガされた要素を選択する必要があります - 342 00:20:50,040 --> 00:20:52,650 またはそれは申し訳ありませんが、イベントをトリガします。 343 00:20:52,650 --> 00:20:57,220 >> すべてのだから最初、ボックスボタンのIDを選択してみましょう 344 00:20:57,220 --> 00:20:59,610 、ボタンだので、今、そのボタンの 345 00:20:59,610 --> 00:21:02,750 我々はそれをクリックしたいるときにアニメーションを作成したい。 346 00:21:02,750 --> 00:21:05,040 だからこのクリック機能はあり。 347 00:21:05,040 --> 00:21:08,470 それはあなたがそれに別の関数をバインドすることができます。 348 00:21:08,470 --> 00:21:12,320 この関数は、引数として別の関数を受け取り 349 00:21:12,320 --> 00:21:14,310 我々は、hideTheBox関数で渡すことができます 350 00:21:14,310 --> 00:21:20,950 と、このボタンがクリックされるたびに、その機能が自動的に実行されます。 351 00:21:20,950 --> 00:21:24,850 だから、これは、我々はこれを保存した場合、私はリフレッシュします動作します 352 00:21:24,850 --> 00:21:33,460 と - 一秒、ごめんなさい。 353 00:21:33,460 --> 00:21:44,770 私は本当にすぐにこの問題を修正しましょう​​。 354 00:21:44,770 --> 00:21:50,680 オーケー。そうしよう。だから今ボックスは、我々はボタンをクリックしたときに消えつつある。 355 00:21:50,680 --> 00:21:55,470 我々はまた、単にfadeToggleためにこれを変更することができます 356 00:21:55,470 --> 00:22:00,020 ボックスを表示または非表示にするだけで、それを変更し、 357 00:22:00,020 --> 00:22:03,850 我々は更新している場合、これはまた、あまりにも動作します。 358 00:22:03,850 --> 00:22:08,550 我々はそれを隠すことができ、我々はまた、それを表示することができ、それが動作し続けます。 359 00:22:08,550 --> 00:22:12,210 我々が行うことができますもう一つは、我々は、実際にこのhideTheBox関数を定義する必要はありません 360 00:22:12,210 --> 00:22:15,050 私たちは、クリック機能を呼び出す前に。 361 00:22:15,050 --> 00:22:17,640 だからではなく、関数を定義し、hideTheBoxを呼び出す、 362 00:22:17,640 --> 00:22:20,310 我々はこれだけのものをクリックするとそれを呼び出すつもりだ。 363 00:22:20,310 --> 00:22:22,310 だから私たちは、ここでは匿名でそれを定義することができ、 364 00:22:22,310 --> 00:22:25,070 これはJavaScriptが持っている機能です。 365 00:22:25,070 --> 00:22:29,720 あなたは、関数を定義することができます、通常、我々は関数hideTheBoxを言うだろう 366 00:22:29,720 --> 00:22:34,490 引数を指定して、その代わりに、我々だけで、引数を機能しないと言うことができます 367 00:22:34,490 --> 00:22:36,870 、関数を定義するために括弧を開始 368 00:22:36,870 --> 00:22:40,780 、その中括弧を閉じた後、ちょうどここで関数を定義する 369 00:22:40,780 --> 00:22:45,130 最初のカッコと最後の括弧内 370 00:22:45,130 --> 00:22:47,860 それは、クリック関数の引数に対応しています。 371 00:22:47,860 --> 00:22:53,320 だから我々は、この関数に渡している、我々はここのコード行をコピーすることができ、 372 00:22:53,320 --> 00:22:55,450 それはまったく同じことを行います。 373 00:22:55,450 --> 00:22:57,290 そして今、我々はこのランダムfadeTheBox機能を持っていない 374 00:22:57,290 --> 00:22:59,960 その明確な理由がないのに、周りに座っている。 375 00:22:59,960 --> 00:23:02,070 関数が匿名で定義されていた、それは名前を持たない。 376 00:23:02,070 --> 00:23:08,060 我々はボックスボタンをクリックしたときにのみ実行されます。 377 00:23:08,060 --> 00:23:12,180 だからさわやかもう一度、1つのより多くの時間、あなたは、それはまだ動作していることがわかります。 378 00:23:12,180 --> 00:23:16,700 そして、それは、あなたがイベントを作成する方法を説明します。 379 00:23:16,700 --> 00:23:19,190 >> 我々が使用できるさまざまなイベントがたくさんあり​​ます。 380 00:23:19,190 --> 00:23:23,540 私はどのようにこれらの作業をお見せするためにコンソールを使用に戻すつもりです。 381 00:23:23,540 --> 00:23:28,210 これらのそれぞれのIDが各ボックスに対応する。 382 00:23:28,210 --> 00:23:33,020 このボックスをクリックし、IDであるので、これは重要なIDであり、これは、マウスのIDです。 383 00:23:33,020 --> 00:23:36,120 のではなく、毎回、それを入力して、もう一つは、このアクションの機能があるということです 384 00:23:36,120 --> 00:23:41,610 私は実際に先に行き、ここに、このアクション機能を下に定義されている。 385 00:23:41,610 --> 00:23:46,860 それはhideTheBox関数と同じことを行います。 386 00:23:46,860 --> 00:23:51,340 それは、それをインチこのボックスやフェードそれをどちらを取得またはフェード 387 00:23:51,340 --> 00:23:54,110 我々はここでそれを使用することができるしている理由だ。 388 00:23:54,110 --> 00:24:00,350 我々はこのクリックのIDをクリックした場合そこで、我々は、ボックスが消えたり、再び表示したい。 389 00:24:00,350 --> 00:24:03,610 それは我々が最後のスライドにあったことをボタンと同じことだ。 390 00:24:03,610 --> 00:24:07,450 今、我々はこれをクリックすると、ボックスが消え、という呼び出した後、 391 00:24:07,450 --> 00:24:10,160 再びそれをクリックし、ボックスが再び表示されます。 392 00:24:10,160 --> 00:24:12,480 これはかなり簡単です。ダブルクリックすると、同じことをします 393 00:24:12,480 --> 00:24:15,660 を除いては、ダブルクリックが必要です。 394 00:24:15,660 --> 00:24:19,030 あなたが再びそれをクリックして、それをクリックした場合だから何も起こりません、 395 00:24:19,030 --> 00:24:21,140 しかし、あなたはすぐにダブルクリックすると、それは消えます。 396 00:24:21,140 --> 00:24:23,310 あなたはダブルもう一度クリックすると、それが戻ってくるだろう。 397 00:24:23,310 --> 00:24:25,250 だから非常に簡単です。 398 00:24:25,250 --> 00:24:31,170 キーボード入力は、奇妙なの一種である、私はそれが実際に、この例では動作しないと思う 399 00:24:31,170 --> 00:24:37,670 なぜならキーダウン、アップキーとキーを押すと、他のキーアクション 400 00:24:37,670 --> 00:24:47,190 あなたにそれをバインドどんな要素に関係なく活性化する。 401 00:24:47,190 --> 00:24:51,410 たとえば、私は、身体または完全に別のものにダウンキーをバインドし、たとえ 402 00:24:51,410 --> 00:24:55,950 それはまだ関係なく活性化するであろう - それは固有のものではありません。 403 00:24:55,950 --> 00:25:00,190 私はこれをクリックしなければならないと何が消えるようにキーを押さないでください。 404 00:25:00,190 --> 00:25:04,470 それは関係なく、私はインチ現在よどんな要素の活性化するであろう 405 00:25:04,470 --> 00:25:06,880 したがって、これらは、実際には、この例では動作しません。 406 00:25:06,880 --> 00:25:13,180 ので、それはキーボード入力のdivに入力を入力として私を認識しません。 407 00:25:13,180 --> 00:25:15,740 >> しかし、あなたはマウスアクションを見れば、 408 00:25:15,740 --> 00:25:19,620 最初のものはホバーであり、そしてそれは、この使用して、CSSの一部を行うことができます。 409 00:25:19,620 --> 00:25:24,280 あなたは、CSSを使用している場合は、何か上にカーソルを置く場合は、そのようにそれを作成することができます 410 00:25:24,280 --> 00:25:28,940 その後そのスタイル変更。 411 00:25:28,940 --> 00:25:32,170 しかし、jQueryを使用して、あなたは同様に他のもののスタイルを変更することができます。 412 00:25:32,170 --> 00:25:37,120 したがって、たとえば、私たちはこのdivの上にカーソルを置く場合にアクションを呼び出すことになるだろう。 413 00:25:37,120 --> 00:25:39,660 それは我々がその上に置く場合には、ボックスが消えることを意味します。 414 00:25:39,660 --> 00:25:42,430 我々は離れてそれから移動した場合、ボックスが再び表示されます。 415 00:25:42,430 --> 00:25:45,090 我々はこれを呼び出して、その上に置くと、ボックスが消えない、 416 00:25:45,090 --> 00:25:47,050 とすぐに我々は離れて移動すると、それが戻ってくる。 417 00:25:47,050 --> 00:25:49,750 我々は、マウスのIDに、このホバー関数を呼び出す場合は、 418 00:25:49,750 --> 00:25:54,380 我々は、ボックスの上に置く場合は、このボックスに対応する、 419 00:25:54,380 --> 00:26:00,440 今それは、ファンキーであることだが、 - それからボックスが実際に表示されなくなります - 420 00:26:00,440 --> 00:26:06,310 我々は離れてそれから移動した場合、それが再び表示されます。今のところ、それはいくつかの理由で後方だ。 421 00:26:06,310 --> 00:26:12,720 マウスが入るとマウス移動機能がやや似ていますが、若干異なります。 422 00:26:12,720 --> 00:26:16,470 マウスはマウスだけが箱に入ったときに、期待通りに活性化すると入力します。 423 00:26:16,470 --> 00:26:19,210 あなたがそれに引っ越すのであれば、それは消えます。 424 00:26:19,210 --> 00:26:23,210 あなたが離れて移動するときに、それに戻りません、あなたが戻って来るようにそれのためのそれに戻って移動する必要があります。 425 00:26:23,210 --> 00:26:25,590 アクティブになり、マウスの移動機能は、もあります 426 00:26:25,590 --> 00:26:29,300 マウスはボックス内であっても存在している時に。 427 00:26:29,300 --> 00:26:32,430 だからそれだけでとフェードアウト、行くにしておこう。 428 00:26:32,430 --> 00:26:35,660 そしてそれは実際に伐採いる - それだけでフェードインしているように思える、 429 00:26:35,660 --> 00:26:39,140 しかし、それは実際には、これより多くのアクションをログに記録するだ 430 00:26:39,140 --> 00:26:43,550 そうあなたが離れて移動するとき、それはちょうどそれがそれらの千のようにログに記録されるために行くしておこう。 431 00:26:43,550 --> 00:26:46,620 多分ない千。多分5。 432 00:26:46,620 --> 00:26:50,200 それはそれ以上を記録します。 433 00:26:50,200 --> 00:26:53,280 ポイントは、すべてのマウス操作で、それらの多くがある。 434 00:26:53,280 --> 00:26:55,480 、あなたが他のものの上に読むことができますが、それらはすべて多少異なります 435 00:26:55,480 --> 00:26:57,700 とあなたが必要とするいずれか1選ぶことができます 436 00:26:57,700 --> 00:27:02,130 特定のいずれかの目的のためにあなたがやろうとしている。 437 00:27:02,130 --> 00:27:05,060 >> 私が話をするつもりです次のことは、AJAXです。 438 00:27:05,060 --> 00:27:09,340 AJAX、私たちは今年と同じくらいの深さではJavaScriptをカバーしていない知っている、 439 00:27:09,340 --> 00:27:11,770 ので、私はわずか数分のために一般的にAJAXについて話をするつもりです。 440 00:27:11,770 --> 00:27:15,210 AJAXは非同期JavaScriptとXMLの略です。 441 00:27:15,210 --> 00:27:19,030 、あなたは、Facebookにしているとき、それは、例えば、基本的だし、それはあなたに通知をプッシュ 442 00:27:19,030 --> 00:27:23,060 AJAXは、Webブラウザ上で実行されているからだ。 443 00:27:23,060 --> 00:27:25,800 Webブラウザは、実際の数秒おきに 444 00:27:25,800 --> 00:27:29,420 ことを求めて、Facebookのサーバに行く、あなたは私のために新しい何かを持っていない、 445 00:27:29,420 --> 00:27:31,980 そしてそれはあなたに戻ってくる。 446 00:27:31,980 --> 00:27:36,320 これは、サーバーに要求を送信することができます 447 00:27:36,320 --> 00:27:38,660 実際にページをロードする必要はありません。 448 00:27:38,660 --> 00:27:42,040 だから通常は、あなただけのPHPとデータベースを使用している場合、 449 00:27:42,040 --> 00:27:45,480 あなたは、サーバーから新しい情報を得ることができる前にページを更新する必要があります。 450 00:27:45,480 --> 00:27:48,770 しかし、AJAXを使用して、あなたは常に、新しい情報については引き出すことができます 451 00:27:48,770 --> 00:27:52,250 あなたはそのようなボタンか何かをクリックしたとき、またはそれを引き出します。 452 00:27:52,250 --> 00:27:56,140 だから、これは私たちがページをリロードせずに要求を送信することができ、 453 00:27:56,140 --> 00:27:58,130 そして我々はGETまたはPOST要求のいずれかを使用できます。 454 00:27:58,130 --> 00:28:05,370 >> GET要求があればあなたがにGoogle.comに、例えば、 455 00:28:05,370 --> 00:28:10,900 とq =テストを行う。それは彼らに、クエリのテストを与えている。 456 00:28:10,900 --> 00:28:15,890 それは、URL自体にこれらのパラメータを渡しているので、それはGETリクエストです。 457 00:28:15,890 --> 00:28:19,250 あなたのポストを介してそれらを送信しているかのように、POSTリクエストです。 458 00:28:19,250 --> 00:28:22,500 あなたは手紙の中で、それを入れて、彼らにそれをオフに出荷のようにそれは、だ 459 00:28:22,500 --> 00:28:25,140 しかし、彼らは実際に内容が表示されません。彼らは、URLには表示されませんね。 460 00:28:25,140 --> 00:28:31,040 直接でそれを入力することはできません、あなたは、ほとんど密かにそれを送信する必要があります。 461 00:28:31,040 --> 00:28:33,880 それは記事でだ。 462 00:28:33,880 --> 00:28:38,660 しかし、jQueryを使用すると、GETやPOSTリクエストを行うことができます 463 00:28:38,660 --> 00:28:42,740 はるかに容易に、通常は単なるJavaScriptを使用可能性がより。 464 00:28:42,740 --> 00:28:50,140 あなたは、GET要求を使用してAPIを照会することができます、そしてあなたはまた、ログイン情報を確認することができます。 465 00:28:50,140 --> 00:28:54,400 次のページで、私はこれを作成し、これは、 "昼食のために買っているのは？"、尋ね 466 00:28:54,400 --> 00:28:58,230 ハーバード食品APIを使用しているので、のは、そのプルアップしてみましょう。 467 00:28:58,230 --> 00:29:01,840 これは、APIへのGETリクエストを行うためにjQueryを使用する方法のほんの一例です 468 00:29:01,840 --> 00:29:04,200 それから戻って情報を取得します。 469 00:29:04,200 --> 00:29:07,090 だから私たちは、今日のメニューを見てみたい 470 00:29:07,090 --> 00:29:10,560 私たちは昼食のために何を見たい。 471 00:29:10,560 --> 00:29:16,500 ここではjQueryでGETリクエストを作成するためのURLです。 472 00:29:16,500 --> 00:29:18,600 あなたは、$を使用しています。機能を取得します。 473 00:29:18,600 --> 00:29:22,290 最初の引数は、照会しているので、まさに、URLです。 474 00:29:22,290 --> 00:29:27,200 その後、次の引数は、GETリクエストが完了したときに実行される関数です。 475 00:29:27,200 --> 00:29:29,980 だから、それが戻ってくるのを待つ、サーバにいくつかの要求を送る。 476 00:29:29,980 --> 00:29:33,770 それが戻ってきていないときは、サーバーからのデータといくつかのアクションを実行するつもりだ。 477 00:29:33,770 --> 00:29:37,520 のは、先に行くと同様にこのコードを記述しましょう​​。 478 00:29:37,520 --> 00:29:42,110 私はわざと、どちらこれをコーディングしていませんでした。 479 00:29:42,110 --> 00:29:46,660 ここTODOです。まず、イベントのバインディングを使用してみましょう 480 00:29:46,660 --> 00:29:50,820 このボタンが押されたときように、我々は、GETリクエストを送る。 481 00:29:50,820 --> 00:29:53,410 そして、それはいくつかのデータを要求リターンを得るとき、 482 00:29:53,410 --> 00:29:57,290 我々はこの食事情報IDのdivの中にそれを書くつもりです。 483 00:29:57,290 --> 00:30:02,860 まず、食品のボタンIDを選択してみましょう。 484 00:30:02,860 --> 00:30:07,320 それをクリックしたているときに、我々はそれが何かをしたい。 485 00:30:07,320 --> 00:30:11,930 ただ以前のように、それは匿名のfuction作ってみましょう。 486 00:30:11,930 --> 00:30:15,550 それらの中括弧をラップすることができ、 487 00:30:15,550 --> 00:30:18,530 そして、このボタンが押されたときに、我々は、GETリクエストを送信する 488 00:30:18,530 --> 00:30:20,750 昼食のために何かを確認します。 489 00:30:20,750 --> 00:30:24,970 これを行うには、我々だけで$を入力することができます。得る。 490 00:30:24,970 --> 00:30:28,850 これは、ドル記号を使用して、jQueryの関数です。 491 00:30:28,850 --> 00:30:31,430 これは、引数のカップルを取る。最初のものは、URLです 492 00:30:31,430 --> 00:30:34,450 もう一つは、コールバック関数、と呼ばれています関数です 493 00:30:34,450 --> 00:30:37,740 その要求は、実際に返したとき。 494 00:30:37,740 --> 00:30:39,890 ただ最初のURLを構築しましょう​​。 495 00:30:39,890 --> 00:30:44,650 私たちは、ダビデがアップする書いたAPIからそれを得ることができます。 496 00:30:44,650 --> 00:30:51,360 ここに行く、我々はそれがfood.cs50.net/api/1.3/menusだということがわかります 497 00:30:51,360 --> 00:30:54,140 その後、ちょうどあなたが希望するパラメータの名前を渡します。 498 00:30:54,140 --> 00:30:57,760 だからパラメータ1の値は1である。 499 00:30:57,760 --> 00:31:00,910 これは、標準の日付、開始日、今日がデフォルトのように見えます 500 00:31:00,910 --> 00:31:03,110 あなたは何を入力し、終了日にもデフォルトしていない場合 501 00:31:03,910 --> 00:31:05,930 今日まで何も入力しない場合。 502 00:31:05,930 --> 00:31:10,790 それは我々が何をしたいのです。私達はちょうど今日のための情報を取得したい。 503 00:31:10,790 --> 00:31:12,950 >> 私たちは、フォーマットはJSONになりたい。 504 00:31:12,950 --> 00:31:15,570 それはちょうど任意のだ、あなたがしたい任意のフォームを使用することができます。 505 00:31:15,570 --> 00:31:18,950 あなたは、CSVを使用できますが、JSONはJavaScriptオブジェクト表記です。 506 00:31:18,950 --> 00:31:24,150 JavaScriptは、それが何を意味するかを理解することは、非常に簡単です 507 00:31:24,150 --> 00:31:27,110 そして我々はより簡単にそのようにそれをプリントアウトすることができます。 508 00:31:27,110 --> 00:31:30,490 だから、JSONでリクエストしてみましょう、としましょう​​リクエストランチ。 509 00:31:30,490 --> 00:31:37,660 だから食事=昼食。ただ、そのURLを書くために、私たちはここに戻って行く。 510 00:31:37,660 --> 00:31:41,290 メニューがあります。最初のパラメータは、出力= JSONです 511 00:31:41,290 --> 00:31:44,640 ので、それは我々が望むものだし、とパラメータを区切る 'と。' 512 00:31:44,640 --> 00:31:48,940 2番目のパラメータは - 私は覚えていません。 513 00:31:48,940 --> 00:31:52,170 食事。そして、私たちは食事=ランチをしたい。 514 00:31:52,170 --> 00:31:57,390 あなたのブラウザにそれを入力して、それに行くことによって、このURLをテストすることができます。 515 00:31:57,390 --> 00:32:03,120 それはあなたにいくつかの出力が得られます。それはちょうど昼食のための原料の束だ。 516 00:32:03,120 --> 00:32:10,410 これは醜い形式です。私たちはより良い形式で当社のページ上に印刷したい。 517 00:32:10,410 --> 00:32:12,580 URLが正しいので、今、私たちは、単に関数を記述する必要があります 518 00:32:12,580 --> 00:32:18,300 リクエストが成功したときにコールバックする。 519 00:32:18,300 --> 00:32:20,430 この関数は、実際に引数を取ります。これは、データとなります。 520 00:32:20,430 --> 00:32:25,650 データは、GETリクエストが行われた後、GETリクエストから戻ってくるものです。 521 00:32:25,650 --> 00:32:28,860 我々は、中括弧を行うことができ、ここで我々は、匿名関数を書く 522 00:32:28,860 --> 00:32:33,900 それは我々が戻って情報を取得するときに、そのデータを使用して、実行します。 523 00:32:33,900 --> 00:32:37,840 データだから、我々はこのURLで入力したときに、 524 00:32:37,840 --> 00:32:41,540 これは、データが見えるように何が起こっているのです。これは巨大な文字列になるだろう。 525 00:32:41,540 --> 00:32:48,610 しかし、良いことですが、JavaScriptはJSON.parse関数を使用して、それを解析することができます。 526 00:32:48,610 --> 00:32:54,950 それでは、解析データと呼ばれる新しい変数を作成してみましょう。 527 00:32:54,950 --> 00:32:57,060 と解析データがオブジェクトの配列です。 528 00:32:57,060 --> 00:33:04,200 各オブジェクトには、次のような情報が含まれている - だけでなく、のは見てみましょう。 529 00:33:04,200 --> 00:33:08,980 これは、日付、食事、カテゴリ、レシピ、このすべての他のものを持っています。 530 00:33:08,980 --> 00:33:10,860 だから一人一人の名前をプリントアウトしてみましょう。 531 00:33:10,860 --> 00:33:13,790 我々はそこから戻ることをものの配列全体を反復しましょう​​、 532 00:33:13,790 --> 00:33:17,570 とだけそれぞれをプリントアウト - それぞれの名前をプリントアウト。 533 00:33:17,570 --> 00:33:22,670 これはforループです。 534 00:33:22,670 --> 00:33:26,030 >> JavaScriptは、アレイ上の変数とループを作成することができますこの便利な構文があります 535 00:33:26,030 --> 00:33:30,150 varのiが、ます。var i = 0を実行するのではので、代わりに、単にイテレータです 536 00:33:30,150 --> 00:33:40,290 iが長さ未満であった、私は+ +、あなただけの解析されたデータで私をvarを行うことができます。 537 00:33:40,290 --> 00:33:47,060 この例では、解析されたデータ（i）は、現在の要素に対応させて頂きます 538 00:33:47,060 --> 00:33:49,850 配列の、実際のオブジェクト。 539 00:33:49,850 --> 00:33:51,720 そして、我々はそれの名前を取得したい。 540 00:33:51,720 --> 00:33:54,170 だからやる名前みましょう。 541 00:33:54,170 --> 00:33:57,000 そして、最後のものは、我々は再びいくつかのjQueryを持っているつもりさ。 542 00:33:57,000 --> 00:34:02,660 実際には、divに現在空ですこの食事情報のdivを追加します。 543 00:34:02,660 --> 00:34:05,430 ように選択してみましょう。 544 00:34:05,430 --> 00:34:13,870 申し訳ございませんが、jQueryとセレクト食事情報divのID、または食事情報IDを使用します。 545 00:34:13,870 --> 00:34:16,580 我々はこれに追加したい。 546 00:34:16,580 --> 00:34:21,030 我々はテストを行った場合、例えば、それはちょうどそれを毎回上書きされます。 547 00:34:21,030 --> 00:34:29,190 だから私たちはこれを追加することができます。 548 00:34:29,190 --> 00:34:31,889 配列内の現在の要素が、我々​​はそれの名前を取得します 549 00:34:31,889 --> 00:34:38,159 そして我々は、食事情報IDのDIVの末尾に追加します。 550 00:34:38,159 --> 00:34:40,120 そして、ただ、それがクリーンに見えるようにする 551 00:34:40,120 --> 00:34:51,550 それはすべて1行ではありませんので、我々はまた、改行を追加します。 552 00:34:51,550 --> 00:34:55,280 すべてがうまくいけばそれで、それはに良いことがあります - 553 00:34:55,280 --> 00:34:57,220 まず第一に、このボタンがクリックされるたびに、 554 00:34:57,220 --> 00:35:00,070 それは、次のURLにGETリクエストをオフに送信されます。 555 00:35:00,070 --> 00:35:02,500 データはそこから戻ってきたとき、それは、それを解析します 556 00:35:02,500 --> 00:35:06,950 JSON、そのデータを表す配列全体をループ、にそれを回す 557 00:35:06,950 --> 00:35:10,310 その後、名前と改行を追加 558 00:35:10,310 --> 00:35:16,500 以前は空だったこの食事情報IDのすべての行に。 559 00:35:16,500 --> 00:35:18,910 だから、このページに戻って、我々は、リフレッシュします 560 00:35:18,910 --> 00:35:23,690 クリックして、調べる - それは動作しません。それは残念です。 561 00:35:23,690 --> 00:35:25,830 デバッグが出番とこれは 562 00:35:25,830 --> 00:35:30,070 index.htmlを、1行目。 563 00:35:30,070 --> 00:35:57,210 それは面白い。 564 00:35:57,210 --> 00:35:59,720 大丈夫、まあ、これをやって時間を費やすのではなく、私はちょうどするつもりです 565 00:35:59,720 --> 00:36:07,070 完成版である、私が持っていることを行って、ファイルを、プルアップ。 566 00:36:07,070 --> 00:36:13,710 私は違いが何であるかわからないんだけど、私達はちょうど代わりに、これを開くことができます。 567 00:36:13,710 --> 00:36:19,740 そして、私たちは、AJAXに行く、これは正しく動作するはずです。 568 00:36:19,740 --> 00:36:21,730 それは、昼食のために本日は何です 569 00:36:21,730 --> 00:36:24,870 順不同で、その周りに引用符で、それはきれいではありませんので。 570 00:36:24,870 --> 00:36:27,090 しかし、明らかに、あなたが最終的なプロジェクトのためにこれをやっていた場合、 571 00:36:27,090 --> 00:36:30,120 あなたはそれが良く見えるようになります。 572 00:36:30,120 --> 00:36:32,530 しかし、それはあなたがGETリクエストを行う方法の単純な例です。 573 00:36:32,530 --> 00:36:34,580 そして、我々は実際のコードを見れば、私は推測している、私はかなり確信している 574 00:36:34,580 --> 00:36:39,690 それはまだほとんど同じだ。 575 00:36:39,690 --> 00:37:04,990 ああ、私はそれだと、文字列に変換するのを忘れた。 576 00:37:04,990 --> 00:37:07,920 いや、それはまだ動作していない。いずれにせよ、ここで実際の完成したコードです 577 00:37:07,920 --> 00:37:10,300 これがどのように見えるべきかのために、 578 00:37:10,300 --> 00:37:16,400 そしてそれは私が単に実装ものと同じことを行います。 579 00:37:16,400 --> 00:37:22,760 あなたがボタンをクリックすると、それは自動的にデータを解析するためにJSONをGETを使用。 580 00:37:22,760 --> 00:37:29,190 それは、それから戻ってデータを取得し、配列全体をループ 581 00:37:29,190 --> 00:37:32,770 出入りプリント - 昼食のため、今日の何、それの名前、 582 00:37:32,770 --> 00:37:38,020 と各行の後に改行追加。 583 00:37:38,020 --> 00:37:41,100 それはあなたがGET関数を使用する方法を説明します。 584 00:37:41,100 --> 00:37:44,040 >> また、私は時間を持っていなかったPOSTを使用することができます 585 00:37:44,040 --> 00:37:47,940 そのための例を記述するが、我々は、ドキュメントを見ることができます。 586 00:37:47,940 --> 00:37:53,220 あなたはjquery.postを見れば、 587 00:37:53,220 --> 00:37:55,510 あなたはそれがほぼ同じものだということがわかります。 588 00:37:55,510 --> 00:38:01,650 あなたがURLを持っているが、その代わりに使用してパラメータを渡す - 589 00:38:01,650 --> 00:38:03,990 ただ、URL自体の文字列にそれらを置く 590 00:38:03,990 --> 00:38:06,300 このデータ変数に渡す必要があります 591 00:38:06,300 --> 00:38:11,990 それは、辞書、基本的には配列で、その値にマップするパラメータ。 592 00:38:11,990 --> 00:38:17,690 あなたのことをを渡し、それはPOSTを使用してそれらを送信します。 593 00:38:17,690 --> 00:38:20,790 そして、一度は、あなたが成功の機能を持つことができることを持っている 594 00:38:20,790 --> 00:38:23,930 データが戻ってきたときにそれが実行されます。 595 00:38:23,930 --> 00:38:26,430 それ以外の場合は、全く同じである。だから、POSTを使用して、 596 00:38:26,430 --> 00:38:29,970 あなたが入力フォームを持っている場合は、たとえば、POSTを使用することもできます 597 00:38:29,970 --> 00:38:35,780 あなたはそれに人々の入力のパスワードを聞かせて、これらのパスワードを送る 598 00:38:35,780 --> 00:38:41,850 あなたのバックエンドスクリプトに、そのユーザーが有効であるかどうかをデータベースでチェックする。 599 00:38:41,850 --> 00:38:46,700 あなたが行うことができますすべてのjQueryを使用する代わりに、すべてでページを更新する必要がなくなります。 600 00:38:46,700 --> 00:38:52,160 それは私が、私が以前にあなたを示すことがブログに実装方法を説明します。 601 00:38:52,160 --> 00:38:59,530 我々は最後のポータルに移動してログアウトした場合、ログアウト 602 00:38:59,530 --> 00:39:02,600 ログアウトが動作しません。 603 00:39:02,600 --> 00:39:13,360 まあ、私はただ新しいウィンドウでそれを開いてみましょう。 604 00:39:13,360 --> 00:39:16,580 ここで、そこにパスワードがあり、私はランダムな何かを入力するつもりだった。 605 00:39:16,580 --> 00:39:18,590 それは動作しませんが、我々はなかったことがわかります 606 00:39:18,590 --> 00:39:20,840 実際にはまったくページをリフレッシュする必要があります。 607 00:39:20,840 --> 00:39:24,610 コー​​ドは、あなたはそれを見てみたい場合には、 608 00:39:24,610 --> 00:39:37,460 ここではすべての利用可能です。 609 00:39:37,460 --> 00:39:45,680 コー​​ドだから私はいつか去年書いた。 610 00:39:45,680 --> 00:39:47,790 ここで見ることができるように、私たちは、POSTリクエストを送信している。 611 00:39:47,790 --> 00:39:50,400 私は、バックエンドでの考えられる理由と呼ばれるファイルを持っている 612 00:39:50,400 --> 00:39:53,860 パスワードが有効であればそれはチェックします。 613 00:39:53,860 --> 00:39:56,000 我々はに渡すパラメータは、パスワードにマップされ、ある 614 00:39:56,000 --> 00:40:00,030 現在この入力ボックスでの入力。 615 00:40:00,030 --> 00:40:04,110 データが戻ってくるとき、我々は確認してください。 616 00:40:04,110 --> 00:40:07,680 データがfalseの場合、我々は間違ったパスワードを言って、それを下にスライドさせ、 617 00:40:07,680 --> 00:40:09,580 そしてその直後、それが消えるよう。 618 00:40:09,580 --> 00:40:12,320 そうでなければ、我々は管理ページをロードします。 619 00:40:12,320 --> 00:40:15,080 これは、すべてのJSONを用いて行った。 620 00:40:15,080 --> 00:40:18,510 このコードの行数で、あなただけの、バックエンドにデータを渡すことができます 621 00:40:18,510 --> 00:40:21,020 それが正しいかどうかを確認し、あなたが正しくログインしているかどうかをチェック 622 00:40:21,020 --> 00:40:24,200 実際に正しいページに人をリダイレクトする、それに対応する 623 00:40:24,200 --> 00:40:29,760 または、それらをログインさせると、彼らは不正なパスワードを持っていたこと、それらを語っていない。 624 00:40:29,760 --> 00:40:33,040 だから、それはあなたがjQueryのPOSTを使用することができます方法の例です 625 00:40:33,040 --> 00:40:37,010 あなたのバックエンドへのPOSTリクエストを送信するために、 626 00:40:37,010 --> 00:40:42,400 誰かが正常に記録されているかどうかをチェックする。 627 00:40:42,400 --> 00:40:44,820 >> すべての権利、私が持っていたすべての例で、私がカバーしたかったすべてのものだそう。 628 00:40:44,820 --> 00:40:47,110 それらはjQueryのは、あなたが行うことができることを主要なものです： 629 00:40:47,110 --> 00:40:52,640 、要素を選択DOM操作を使用してそれらを修正し、 630 00:40:52,640 --> 00:40:56,340 エフェクトを追加することができ、特定のイベントで物事をアクティブにする、 631 00:40:56,340 --> 00:41:00,430 とも非常にシームレスかつ簡単にAJAX要求を行う。 632 00:41:00,430 --> 00:41:02,840 だから、来るか見ていただきありがとうございます 633 00:41:02,840 --> 00:41:06,230 ご質問があればと、ちょうど私に知らせてください。うん？ 634 00:41:06,230 --> 00:41:12,730 [学生]戻るあなたが示したときには、引用符でPOSTリクエストの後にJSONを持っていた 635 00:41:12,730 --> 00:41:15,170 と私はそれが何をしたかと思いまして。 636 00:41:15,170 --> 00:41:20,070 >>ええ、私は参照してください。問題は、この例では、私はちょうど示した、ということでした 637 00:41:20,070 --> 00:41:25,790 周りに引用符で囲まれた単語JSONがあった - 638 00:41:25,790 --> 00:41:31,690 私は再びそれをプルアップします - POST機能の周り。 639 00:41:31,690 --> 00:41:43,320 私はただ表示し、それを引き上げています。 640 00:41:43,320 --> 00:41:46,890 だからここでは、このPOSTリクエストだし、引用符でこのJSONはあり。 641 00:41:46,890 --> 00:41:50,280 それはちょうど我々が出力されることを期待しているのかを定義します。 642 00:41:50,280 --> 00:41:54,070 だから我々は、予想されるデータ型としてJSONを渡すと、 643 00:41:54,070 --> 00:41:56,070 、それは必要条件ではありませんが、我々はそれを渡した場合 644 00:41:56,070 --> 00:41:58,590 その後、データは自動的にJSONとして解析されます。 645 00:41:58,590 --> 00:42:00,600 だから私たちは、それをJSONのparse関数を呼び出す必要はありません 646 00:42:00,600 --> 00:42:02,620 それだけで自動的に行われます。 647 00:42:02,620 --> 00:42:05,150 そして、あなたは、POSTのドキュメントを見てみると、 648 00:42:05,150 --> 00:42:09,850 このデータ型の変数は、サーバから予想されるデータのタイプがある。 649 00:42:09,850 --> 00:42:12,660 間違っている可能性がありますインテリジェント推測するデフォルトは、 650 00:42:12,660 --> 00:42:15,520 ので、あなたはそれを空白のままにすることができますが、それは単にデータのタイプだ 651 00:42:15,520 --> 00:42:21,680 あなたが使用しているコーディングで、それはJSONまたはXMLまたは他の何かであるかどうか。 652 00:42:21,680 --> 00:42:25,280 >> その他のご質問は？ 653 00:42:25,280 --> 00:42:27,300 わかりました。あなたが他の質問がある場合、私に電子メールを送ること自由に感じ 654 00:42:27,300 --> 00:42:30,830 vshekhawat@college.harvard.eduで、 655 00:42:30,830 --> 00:42:34,860 とスライドとコードがかなりすぐにオンラインで入手する必要があります。 656 00:42:34,860 --> 00:42:42,810 あなたの最終的なプロジェクトで頑張って、あなたはjQueryのを使用したいと考えています。 657 00:42:42,810 --> 00:42:46,810 [CS50.TV]