1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [9ウィークは、続く]

2
00:00:02,700 --> 00:00:05,160
[デビッド·J·マラン - ハーバード大学]

3
00:00:05,160 --> 00:00:07,020
[これはCS50です。 -  CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> これはCS50です。これは9週目の終わりです。どうもありがとうございます。

5
00:00:13,340 --> 00:00:15,310
最後に。ウィーク9。思い付いたぞ。

6
00:00:15,310 --> 00:00:18,590
今日、我々は、Webプログラミングについての私達の会話を続ける

7
00:00:18,590 --> 00:00:21,660
最終的なプロジェクトに向かって目では、Webベースの何かをしなければならないので

8
00:00:21,660 --> 00:00:25,610
最終的なプロジェクトのためにしかしなぜなら最終的なプロジェクトのためにどちらかまたはCS50後

9
00:00:25,610 --> 00:00:29,000
これは確かに現代のソフトウェアが起こっている方向である。

10
00:00:29,000 --> 00:00:31,770
そして、まだそれは実際に簡単なことではありません。

11
00:00:31,770 --> 00:00:35,040
実際には、何が最も難しいものの一つは、デザインの側面である。

12
00:00:35,040 --> 00:00:38,600
>> 例えば、設計によって、私たちは、実際にユーザーインターフェースを得ることを意味

13
00:00:38,600 --> 00:00:40,420
またはユーザーエクスペリエンス右。

14
00:00:40,420 --> 00:00:43,200
あえて私は - 私たちは最近の問題セットから知っている

15
00:00:43,200 --> 00:00:45,960
あなたのいくつかは、ソフトウェアのいくつかの作品についてのあなたの不満を放映したとき

16
00:00:45,960 --> 00:00:49,000
あなたを激怒またはハードウェア、キャンパスまたはオフにするかどうか - 

17
00:00:49,000 --> 00:00:51,930
そこに多くのサイトがあり、ハードウェアの多くは、そこにあり

18
00:00:51,930 --> 00:00:53,900
その種のは吸う。

19
00:00:53,900 --> 00:00:58,730
しかし、現実にはまだ使いやすいものを作ることはそれにもかかわらず強力であるということです

20
00:00:58,730 --> 00:01:00,550
非常に困難な課題である。

21
00:01:00,550 --> 00:01:03,680
だから、今日のために私はここに私を参加するヨセフとトミーに尋ね

22
00:01:03,680 --> 00:01:06,680
我々が会話を持つことができるように、両方に関する設計

23
00:01:06,680 --> 00:01:09,090
とどのような思考プロセスの種類があなたの頭を通過し始めるべき

24
00:01:09,090 --> 00:01:12,040
あなたの最終的なプロジェクトを設計するとき、あなたの未来の努力。

25
00:01:12,040 --> 00:01:15,040
そして、トミーの助けを借りて我々は、実装の詳細の一部を見てみましょう。

26
00:01:15,040 --> 00:01:18,440
どのように紙の上に、またはあなたの心の中でいくつかのビジョンを持つことができます

27
00:01:18,440 --> 00:01:20,760
次に、プログラムによって実行できること

28
00:01:20,760 --> 00:01:24,030
技術や技法のいくつかを使用することによって私達はちょうど、話を始めました

29
00:01:24,030 --> 00:01:29,080
つまりJavaScriptとAJAX、非同期JavaScriptすなわち、さらに新しい何か。

30
00:01:29,080 --> 00:01:32,950
あなたがユーザーインターフェースをより動的にすべてを作成することができます

31
00:01:32,950 --> 00:01:35,780
サーバから徐々に、より多くのデータをフェッチすることによって。

32
00:01:35,780 --> 00:01:38,560
だから我々は、今日だけでなく、それらの断片の一部が表示されます。

33
00:01:38,560 --> 00:01:41,800
余談ですが、あなたはコンピュータサイエンスに集中に興味を持っている場合

34
00:01:41,800 --> 00:01:45,010
または正午にそれは今週の金曜日知っている、コンピュータサイエンスのminoring

35
00:01:45,010 --> 00:01:48,750
マクスウェルドーキン221にピザのイベントがあるでしょう

36
00:01:48,750 --> 00:01:50,780
どこでコンピュータサイエンスについてもう少し学ぶことができます。

37
00:01:50,780 --> 00:01:54,860
ドアの外にあなたの方法今日のあなたはハーバード大学でCSへの非公式ガイドを拾うことができるでしょう。

38
00:01:54,860 --> 00:01:57,290
私たちは、腰の高さで外のゴミ箱にそれを置くことにしましょう

39
00:01:57,290 --> 00:01:59,750
ので、これをつかむとCSについてもう少し詳しく知りたい場合は、

40
00:01:59,750 --> 00:02:02,480
それは0週目にあったようにそれはあなたのためにそこになるでしょう。

41
00:02:02,480 --> 00:02:06,500
また、午後1時15分で今週の金曜日CS50昼食のための私達への参加をご希望される場合は、

42
00:02:06,500 --> 00:02:09,800
cs50.net/lunchへ向かいます。

43
00:02:09,800 --> 00:02:13,260
さらに騒ぎがなければ、私はあなたの仲間のジョセフ·オングを教え与える。

44
00:02:13,260 --> 00:02:19,190
こんにちは。 [拍手]

45
00:02:19,190 --> 00:02:20,770
ありがとうございます。

46
00:02:20,770 --> 00:02:24,780
私はデザインについて学んだ最初の時間はCS179と呼ばれるここにクラスにいた。

47
00:02:24,780 --> 00:02:28,040
>> 当時の教授は、私たちに別の教授についての話をした

48
00:02:28,040 --> 00:02:31,640
誰がホテルに行って、蛇口を使用していた。

49
00:02:31,640 --> 00:02:35,630
誰もが左に何2ノブを教え、右行うことができますか？

50
00:02:35,630 --> 00:02:39,080
[学生]暖かい。暖かい。>>グッド。

51
00:02:39,080 --> 00:02:41,430
通常は右、何を期待？

52
00:02:41,430 --> 00:02:46,960
蛇口を使用した後この教授はシャワーを浴びたいと、彼はこれを使用するに進みます。

53
00:02:46,960 --> 00:02:51,310
彼は左を考えると右サイドは右、温·冷のためにあるのですか？

54
00:02:51,310 --> 00:02:55,470
しかし、誰もがこれらが実際に何を教えますか？

55
00:02:55,470 --> 00:02:58,060
どんな手？

56
00:02:58,060 --> 00:03:01,740
[聞き取れない生徒の応答] >> 1つの提案はありますか？

57
00:03:01,740 --> 00:03:05,860
[聞き取れない生徒の応答] >>温度？

58
00:03:05,860 --> 00:03:10,460
だから、そのうちの一つは、温度やその他のコントロールを制御する？ >> [生徒]水圧。

59
00:03:10,460 --> 00:03:12,350
水圧。グッド。

60
00:03:12,350 --> 00:03:15,100
この教授は、これに入ってくると、彼らはホット＆コールド制御していることを考え

61
00:03:15,100 --> 00:03:21,470
彼はホット、すべての方法のためだと思って正しいものを、オン

62
00:03:21,470 --> 00:03:23,560
彼は暖かいシャワーを浴びたいから。

63
00:03:23,560 --> 00:03:28,100
さて、これらは本当に一致していないので、彼は、この非常に楽しみではない経験を積む

64
00:03:28,100 --> 00:03:31,110
冷たいシャワーにいるかのような、我々はすべてそれがどんな感じか知っています。

65
00:03:31,110 --> 00:03:33,620
これは設計上の欠陥の例です。

66
00:03:33,620 --> 00:03:37,040
それは蛇口からの彼の期待値であることによって、私は何を意味するか

67
00:03:37,040 --> 00:03:39,420
シャワーから出てきたものと一致しませんでした、

68
00:03:39,420 --> 00:03:41,780
それは彼にとって不幸なの一種です。

69
00:03:41,780 --> 00:03:44,990
だから、これは実際の生活の中で起こる設計上の欠陥の例です。

70
00:03:44,990 --> 00:03:48,020
しかし、我々は同様に他のもののすべての種類を参照してください。

71
00:03:48,020 --> 00:03:50,390
我々は、おそらくMBTAのシステムのファンじゃない。

72
00:03:50,390 --> 00:03:55,560
これは、言うロンドンで実際に地下鉄のシステムであり、 "このボタンを使用していないです。"

73
00:03:55,560 --> 00:04:00,220
なぜそれがそこにあってもですか？なぜ、私たちも気にしない？

74
00:04:00,220 --> 00:04:02,810
私が子供の頃、家の中でハイテクに精通した一つである、だったとき

75
00:04:02,810 --> 00:04:05,050
コンピュータがクラッシュするたびに、私の母は、私に来る

76
00:04:05,050 --> 00:04:07,060
私は、この画面を見せていると何が起こったのか私に尋ねる。

77
00:04:07,060 --> 00:04:09,210
>> でも、私はこれが何を意味するのか分からない。

78
00:04:11,890 --> 00:04:14,700
[笑い]何？

79
00:04:16,950 --> 00:04:18,019
[笑い]

80
00:04:18,720 --> 00:04:23,050
時には私たちは、ソフトウェア開発者のように感じるだけでトローリングたちです。

81
00:04:23,050 --> 00:04:28,460
ユーザーは、我々は、似ているように、 "何が起きているのでしょうか誰か教えてください。"

82
00:04:28,460 --> 00:04:32,140
これは、すべてのデザインの問題に帰着する。

83
00:04:32,140 --> 00:04:34,650
デザインは、我々が見ることができるように、美学について純粋ではない

84
00:04:34,650 --> 00:04:37,230
それは、物事がどのように見えるかについてではない。

85
00:04:37,230 --> 00:04:41,720
我々は、これはポップアップこっちに少しは実際にはかなり良さそうに見えていることはここを参照してください。

86
00:04:41,720 --> 00:04:45,290
それはバックグラウンドでドロップシャドウを持っている、それは起こっている国境半径を持っています。

87
00:04:45,290 --> 00:04:47,550
それはかなりのようなものだ。

88
00:04:47,550 --> 00:04:51,480
それは非常にユーザーフレンドリーではありませんので、それは本当によく設計されていない。

89
00:04:51,480 --> 00:04:54,920
来るそのポップアップあの小さな、本当に私には一切の情報を与えるものではありません

90
00:04:54,920 --> 00:04:58,450
何が起こっているかについては、それがユーザとして私に何かを教えてくれない

91
00:04:58,450 --> 00:05:01,400
そのエラーから回復する方法について。

92
00:05:01,400 --> 00:05:05,190
私たちはデザインではないという事について考えてほしい。

93
00:05:05,190 --> 00:05:06,670
まず最初に、それは美学ではありません。

94
00:05:06,670 --> 00:05:10,800
また、不要な機能のトンを使用してアプリケーションを詰めていない。

95
00:05:10,800 --> 00:05:14,890
あなたがタイ料理のレストランなら、おそらく同時に歯医者になりたくない。

96
00:05:14,890 --> 00:05:17,720
とFacebookの質問に、多くの人々がそれを使用していないことを

97
00:05:17,720 --> 00:05:21,130
そしてそれは彼らが構築していたものの核心実際にはなかった。

98
00:05:21,130 --> 00:05:24,200
そしてそれはそんなに考えるように物事の量が素晴らしいではありません

99
00:05:24,200 --> 00:05:26,390
あなたのアプリケーションが、品質に入れていることを

100
00:05:26,390 --> 00:05:28,910
とどのようにあなたがより良いというユーザーエクスペリエンスを作っている

101
00:05:28,910 --> 00:05:32,540
によって実際にあなたがすでに持っているものを改良。

102
00:05:32,540 --> 00:05:37,040
>> 一言で言えば、デザインは、私たちが作成すべきかを教えてくれる。

103
00:05:37,040 --> 00:05:41,950
たとえば、私たちは私たちが物事を検索できるように何かを構築している場合、

104
00:05:41,950 --> 00:05:45,970
Googleのように、例えば、我々は方法で物事を行うべきである

105
00:05:45,970 --> 00:05:48,950
ユーザーは、彼らが望むものを得るためにクリックをたくさん取る必要があるような、

106
00:05:48,950 --> 00:05:52,580
あるいは、我々はGoogleインスタントやオートコンプリートとは、例えば、方法でそれを行う必要があります

107
00:05:52,580 --> 00:05:54,970
それは私達が私達の結果をより速く得ることができます？

108
00:05:54,970 --> 00:05:58,740
トミーが実際にそれを構築する、あなたが表示されますようにエンジニアリングは、含まれます。

109
00:05:58,740 --> 00:06:01,890
デザインの種類がたくさんあり​​ます。

110
00:06:01,890 --> 00:06:06,070
たとえば、何かを展開するために何かを構築している場合

111
00:06:06,070 --> 00:06:09,770
ずっと電気やその多くの技術が存在しない第三世界の国で、

112
00:06:09,770 --> 00:06:11,440
あなたが構築しているものを設計しなければならない

113
00:06:11,440 --> 00:06:14,210
簡単にそこにいる人々へのアクセスを提供する方法で。

114
00:06:14,210 --> 00:06:18,290
しかし、他の設計上の決定の種類があるかもしれないもの

115
00:06:18,290 --> 00:06:21,850
または、このようなものに関与している可能性？

116
00:06:23,690 --> 00:06:25,660
うん。私は手を参照してください。

117
00:06:25,660 --> 00:06:37,200
[聞き取れない生徒の応答] >>権。その通りです。アクセシビリティは1つの事である。

118
00:06:37,200 --> 00:06:40,870
多くの人が "何私のユーザーはどうですか？"について考えていない

119
00:06:40,870 --> 00:06:43,160
どちらスペクトルの両極端のような。

120
00:06:43,160 --> 00:06:47,770
私は考えていないよという障害を持っている可能性のあるユーザーを持っている

121
00:06:47,770 --> 00:06:50,590
と私はちょうど一般的なユーザーのためにデザインを考えています。

122
00:06:50,590 --> 00:06:52,630
インターネットは、今日では誰もがアクセス可能な

123
00:06:52,630 --> 00:06:54,870
と私は、同様にそれらの人々のために設計されるべきである。

124
00:06:54,870 --> 00:06:58,620
あなたは、他にどのような設計上の決定の種類を作るのでしょうか？

125
00:06:58,620 --> 00:07:00,690
はい。 >> [生徒]コスト。

126
00:07:00,690 --> 00:07:02,680
コスト。非常に良い。

127
00:07:02,680 --> 00:07:08,060
我々は我々のデザイン決定の基礎かもしれないもう一つはコストです。

128
00:07:08,060 --> 00:07:13,130
我々はビジネスのなら、あなたは、製作のために多大なコストがかかりません何かを構築したい

129
00:07:13,130 --> 00:07:17,720
しかし、特に高コストで販売することができますか、または私達にいくつかの利益を得ることができます。

130
00:07:17,720 --> 00:07:21,540
>> これらは設計のすべての異なる種類がありますが、我々はインターネット上で何かを構築しているとき

131
00:07:21,540 --> 00:07:25,120
または我々は、おそらく今まで構築することはそれほどかかりません何かを構築しているときに、

132
00:07:25,120 --> 00:07:28,630
インターネット·アプリケーションのように - あなたはそれに多くの資本をスローする必要はありません

133
00:07:28,630 --> 00:07:30,900
実際に動作するものを作るために - 

134
00:07:30,900 --> 00:07:33,490
私たちはもっと心配しているのは、ユーザー·エクスペリエンスです。

135
00:07:33,490 --> 00:07:36,390
我々は、このユーザ中心設計を呼び出します。

136
00:07:36,390 --> 00:07:41,550
本質的にどのようなユーザー中心の設計が含まれ、ユーザーの立場に身を置いている。

137
00:07:41,550 --> 00:07:44,870
私が作っている何のために誰かがサインアップした場合、

138
00:07:44,870 --> 00:07:48,250
彼らは明らかに、目的を踏まえた上で私の特定のアプリケーションに来ている

139
00:07:48,250 --> 00:07:50,280
タスクと彼らは完成させたい。

140
00:07:50,280 --> 00:07:53,650
そして、あなたの仕事は、彼らがそのタスクを完了するためだけではありません

141
00:07:53,650 --> 00:07:57,930
しかし、彼らは直感的、効率的な方法で、そのタスクを完了するため、

142
00:07:57,930 --> 00:08:01,900
そして、いくつかの人はあそこに言ったように、アクセスできます。

143
00:08:01,900 --> 00:08:03,750
効率性とは何を意味するのでしょうか？

144
00:08:03,750 --> 00:08:08,050
効率がどのように迅速に私のユーザーは私のインターフェイス、指定されたタスクを完了することを意味しています。

145
00:08:08,050 --> 00:08:11,650
彼らは他の1つの場所から取得することがクリックたくさんの時間がかかりますか？

146
00:08:11,650 --> 00:08:14,630
それは面倒ですか？彼らは、反復的なタスクの多くを実行する必要がありますか？

147
00:08:14,630 --> 00:08:17,140
我々は可能な限り効率的にそのプロセスを作りたい

148
00:08:17,140 --> 00:08:20,070
ので、彼らは物事のそれらの種類を行う必要はありません。

149
00:08:20,070 --> 00:08:24,230
ユーザーが自分のインタフェースをルックアップする場合直観としては、それは、例えば、

150
00:08:24,230 --> 00:08:27,240
彼らは場所から場所を取得することは簡単ですか？

151
00:08:27,240 --> 00:08:30,390
彼らは私のインターフェースでクリックしなければならないかを把握することは容易である

152
00:08:30,390 --> 00:08:33,770
ために彼らのために彼らが達成したい目標やタスクを達成するには？

153
00:08:33,770 --> 00:08:37,520
>> 1人があそこに言ったようにそして最後に、アクセシビリティは非常に重要です。

154
00:08:37,520 --> 00:08:39,640
[男性話]これは、ビジョンのようなもののためのアクセシビリティーに来る、

155
00:08:39,640 --> 00:08:42,740
私は実際には盲目である誰かのために何かを設計するにはどうすればよいような？

156
00:08:42,740 --> 00:08:46,460
ああ。全く見ることができない人のために、私たちはスクリーンリーダーと呼ばれるものを持っています。

157
00:08:46,460 --> 00:08:49,070
あなたは何をなすべきことはあなたが方法であなたのウェブサイトを構築するべきである

158
00:08:49,070 --> 00:08:52,020
つまり、例えば、我々が呼んでいるもの、特定の技術 - 

159
00:08:52,020 --> 00:08:53,590
今ではたくさんのことがあります。

160
00:08:53,590 --> 00:08:55,660
私は、JAWSと呼ばれるスクリーンリーダーがあると思います。

161
00:08:55,660 --> 00:08:58,410
これらの多くのものは、我々は地域のルールと呼んでいるものに依存している

162
00:08:58,410 --> 00:09:02,010
ページ上に存在するかをユーザに読み出しするために。

163
00:09:02,010 --> 00:09:05,480
見ることができない人々のために、あなたは確認する必要があり、これらのスクリーンリーダー

164
00:09:05,480 --> 00:09:09,130
実際にページ上のコンテンツを拾うことができますし、実際にあなたのユーザを表示することができ、

165
00:09:09,130 --> 00:09:13,630
あなたが見ることができない場合は、少なくともあなたはまだ、ページ上のコンテンツを理解することができます。

166
00:09:13,630 --> 00:09:16,190
うん。オーケー。

167
00:09:16,190 --> 00:09:23,410
十分に良いデザインの話。悪いデザインについてお話しましょう​​。

168
00:09:23,410 --> 00:09:25,220
これらはあなたがやってはいけないものです。

169
00:09:25,220 --> 00:09:27,890
誰かはCraigslistと彼らの経験について教えてください。

170
00:09:27,890 --> 00:09:32,190
とどのような彼らが考えることは、このデザインについてとても素晴らしいではありませんか？

171
00:09:33,690 --> 00:09:36,430
はい。 >> [学生]私はあまりにも多くの単語を1つのエリアにあると思う。

172
00:09:36,430 --> 00:09:39,350
あまりにも多くの単語、右か？完全に圧倒。

173
00:09:39,350 --> 00:09:42,400
あなたがこのページに来て、あなたは、ここには物事の全体の束をもって迎えられている

174
00:09:42,400 --> 00:09:43,860
それも、あなたには関係ないかもしれません。

175
00:09:43,860 --> 00:09:47,010
たとえば、この文字で始まらない一つの状態に住んでいます。

176
00:09:47,010 --> 00:09:48,690
Let 'sは、あなたがテキサスか何かに住んでいると言う。

177
00:09:48,690 --> 00:09:53,790
>> あなたは、あなたが見れる場所に到達するためにページの下のすべての方法をスクロールする必要があります。

178
00:09:53,790 --> 00:10:00,320
私はボストンから来たので、私はマサチューセッツで見てみましょう。マサチューセッツ州はどこですか？

179
00:10:00,320 --> 00:10:03,270
ああ、それは右ここにあるのです。ああ、それはボストンです。オーケー。

180
00:10:03,270 --> 00:10:09,070
ボストンを見てみましょう。 [笑い]

181
00:10:09,070 --> 00:10:12,250
かなり圧倒的な、右か？

182
00:10:12,250 --> 00:10:16,400
あそこに気まずいもの。 [笑い]

183
00:10:17,320 --> 00:10:19,470
Let 'sは、私が生きるためにどこかを探していると言う。

184
00:10:19,470 --> 00:10:24,130
どのように多くの人々は実際にはCraigslistの使用している？あなたのトン。

185
00:10:24,130 --> 00:10:30,960
これを見ますが、これを見てみましょうための非常に悪い方法があります。

186
00:10:35,130 --> 00:10:38,970
imgとPICの違いは何ですか？誰も教えてもらえますか？

187
00:10:41,350 --> 00:10:42,830
実際に違いはありません。

188
00:10:42,830 --> 00:10:47,710
彼らはまったく同じことを意味しますが、彼らはいくつかの理由で彼らのために異なったラベルがあります。

189
00:10:48,980 --> 00:10:53,560
私が持っている画像をクリックすると、何ページにも起こりません。

190
00:10:53,560 --> 00:10:57,490
私が実際に起こることを何かのために再度検索をクリックする必要があります。

191
00:10:57,490 --> 00:11:02,430
何がそこに行うことができる優れた設計上の決定になるのでしょうか？

192
00:11:03,820 --> 00:11:08,030
私はそのフィルタをクリックするならば、私はおそらくその特定のアクションでフィルタリングする

193
00:11:08,030 --> 00:11:09,970
または、特定のカテゴリ。

194
00:11:09,970 --> 00:11:14,450
代わりに、再度検索を押す必要がなくなりだから、私はただ自動的にフィルタリングを行うことができます

195
00:11:14,450 --> 00:11:17,060
彼らは瞬時にそれを行うGoogleスタイルの一種。

196
00:11:17,060 --> 00:11:20,440
[マラン]しかし、我々は彼らがこれまで物理的に提出されなければならない見てきたように形成していない

197
00:11:20,440 --> 00:11:23,170
少なくとも、またはボタンをクリックし、Enterキーを押して？

198
00:11:23,170 --> 00:11:26,830
あなたはこれまでのところ、それらを見てきたように、実際にはそれらのことを行うには、Submitをクリックする必要があります。

199
00:11:26,830 --> 00:11:30,090
>> しかしトミーは第二にあなたが表示されますので、実際にあなたのための方法があります

200
00:11:30,090 --> 00:11:33,010
あなたはその事をクリックしたときに、それが自動的に送信できるように

201
00:11:33,010 --> 00:11:38,840
私たちは何AJAXリクエストを呼び出し、戻ってきたデータを取得し、瞬時に結果をフィルタリングします。

202
00:11:38,840 --> 00:11:41,340
このインタフェースで間違っているもののトンがあります。

203
00:11:41,340 --> 00:11:43,530
[マラン]あなたはケンブリッジを検索できますか？

204
00:11:43,530 --> 00:11:47,030
あなたはケンブリッジ気にどこに若干変則的な何かがここにあります

205
00:11:47,030 --> 00:11:54,790
そしてまだあなたはウェストフォード、スプリングヒル、ウェストニュートンなどを取得している。

206
00:11:54,790 --> 00:11:57,930
おそらく理想的ではありません。 >>おそらく理想的ではありません。

207
00:11:57,930 --> 00:12:03,900
どのように私は、この特定のページにユーザーの体験をより良いものにすることができるかもしれない？

208
00:12:03,900 --> 00:12:07,340
はい。 >> [生徒]の指示。

209
00:12:07,340 --> 00:12:09,500
オーケー。感覚がどんなものなのかの指示？

210
00:12:09,500 --> 00:12:14,630
たとえば、[学生]でも、Craigslistは何であるかわからない初めてのユーザーのための事

211
00:12:14,630 --> 00:12:17,320
またはあなたが行うことになっているのかわからない。

212
00:12:17,320 --> 00:12:20,150
右。だから、Craigslistはこのページ上にあるかを説明することが重要です。

213
00:12:20,150 --> 00:12:23,490
我々は、実際にこのページのために実際に何であるかをユーザに知らせることができます。

214
00:12:23,490 --> 00:12:27,090
私はちょうどこれを訪れるならば、私は場所の全体の束を参照してください。私も彼らが何を意味するか分からない。

215
00:12:27,090 --> 00:12:29,730
しかし、もっと重要なのは、ちょうどこのインターフェイスを見て、

216
00:12:29,730 --> 00:12:35,530
私は特定のコミュニティを見つけるために物事のトンを下にスクロールしなければならなかった覚えている

217
00:12:35,530 --> 00:12:37,560
私は実際にこれで気にかけている。

218
00:12:37,560 --> 00:12:39,820
私は何ができる高速な方法は何ですか？はい。

219
00:12:39,820 --> 00:12:43,290
[学生]それらを東、西の領域に分ける。オーケー。>>

220
00:12:43,290 --> 00:12:47,460
私が判断速く私を助けることができる多くのカテゴリに分けることができる

221
00:12:47,460 --> 00:12:49,820
その特定の場所に到達する方法を説明します。

222
00:12:49,820 --> 00:12:54,510
[学生]ドロップダウンリストを入れてください。 >>は右。オーケー。

223
00:12:54,510 --> 00:12:58,240
我々は物事の固定セットを持っているので、私は、ドロップダウンメニューを使用することができます

224
00:12:58,240 --> 00:13:00,100
そして我々は、ドロップダウンメニューでそれらを示すことができた。

225
00:13:00,100 --> 00:13:02,240
その方法は、それが画面上にあまりスペースを取りません。

226
00:13:02,240 --> 00:13:05,630
しかし、それよりも優れ、私たちは何ができるのでしょうか？

227
00:13:05,630 --> 00:13:09,220
はい。あなたは再びそれを>> [聞こえない学生の応答] >>と言うことはできますか？ >> [学生] [検索]ボックス。

228
00:13:09,220 --> 00:13:11,260
うん、検索ボックス。それは素晴らしいことだ。

229
00:13:11,260 --> 00:13:16,430
我々はスライドを振り返ってみると私たちが実際に出来ることは、検索ボックスです。

230
00:13:16,430 --> 00:13:21,520
オートコンプリート。あなたが知っている結果を検索するための非常に簡単な方法は、セットに含まれている。

231
00:13:21,520 --> 00:13:25,980
私はBOを入力して起動する場合は、ちょうど私にそれらのBOの内側を持っているすべての結果を示す。

232
00:13:25,980 --> 00:13:29,030
そのように私は非常に簡単に私が行きたい特定のものを見つけることができます

233
00:13:29,030 --> 00:13:32,390
代わりに、この非常に大きなリストをスクロールする必要がなくなります。

234
00:13:32,390 --> 00:13:37,450
>> これらは、誰かがCraigslistのを実装していることを実際に手の届く果実あらゆる種類のアール

235
00:13:37,450 --> 00:13:42,500
実際に彼らの特定のユーザーの多くのより良いウェブサイト上の経験をするために行うことができます。

236
00:13:42,500 --> 00:13:46,370
オーケー。十分に悪いサイトの話。

237
00:13:46,370 --> 00:13:49,410
フェイスブックの話をしてみましょう。

238
00:13:50,880 --> 00:13:54,390
Facebookが出てきて、特にFacebookの写真、時

239
00:13:54,390 --> 00:13:57,870
全く同じことを行うことができ、一度に他のサービスがたくさんあり​​ました。

240
00:13:57,870 --> 00:14:00,740
彼らは、アルバムに写真を整理できた。

241
00:14:00,740 --> 00:14:03,360
あなたは何ができると、あなたにもセットにそれらを整理する可能性がある。

242
00:14:03,360 --> 00:14:06,070
あなたは、日付でそれらを整理できた。あなたはすべてのこれらの特定の物事を行うことができます。

243
00:14:06,070 --> 00:14:11,710
しかし、誰もがFacebookの写真がリリースされた時点で爆発させたか知っていますか？

244
00:14:11,710 --> 00:14:15,080
はい。 >> [生徒]タグ。 >>タグ。その通りです。

245
00:14:15,080 --> 00:14:21,300
我々は、CS50のバンダナを持つ私たちの犬のマスコットであるこっちミロを持っています。

246
00:14:21,300 --> 00:14:24,810
あなたは、私たちは途中でこのタグ機能を持っていることがわかります。

247
00:14:24,810 --> 00:14:28,240
そして、何は、ユーザビリティの観点から非常に興味深いFacebookの写真を作った

248
00:14:28,240 --> 00:14:34,130
それは実際にこれを経由して人々が自分の写真に彼らの友人を巻き込むことができていることです。

249
00:14:34,130 --> 00:14:37,680
Facebookには、それらのウェブサイトは、特に社会であるので、

250
00:14:37,680 --> 00:14:40,750
それは社会の雰囲気のこの種の構築についてです。

251
00:14:40,750 --> 00:14:42,620
それはより多くの写真の経験を改善

252
00:14:42,620 --> 00:14:46,390
彼らは実際に、これらの人々の間の接続です "と言って開始する可能性があるため、

253
00:14:46,390 --> 00:14:49,220
これらはあなたが実際に気に人々についての写真です。 "

254
00:14:49,220 --> 00:14:52,200
その一部は、ソートナルシシズムです。

255
00:14:52,200 --> 00:14:54,980
人々はそのような写真や物事でタグ付けされるのが好きです。

256
00:14:54,980 --> 00:14:58,510
それは良い人間の特質であるとは限らないことですが、

257
00:14:58,510 --> 00:15:01,910
同時にそれは、良いデザインの決定に基づいている

258
00:15:01,910 --> 00:15:04,860
人々が実際にこのようなことを気にしているため。

259
00:15:04,860 --> 00:15:07,190
だからそれはFacebookの写真です。

260
00:15:07,190 --> 00:15:09,800
>> しかし、ここではより一般的にはFacebookをお話ししましょう​​。

261
00:15:09,800 --> 00:15:13,400
私は、ここで多くの人々がFacebookについて意見を持っていると確信しています

262
00:15:13,400 --> 00:15:16,430
良いデザインの決定と悪いデザインの決定の両方。

263
00:15:16,430 --> 00:15:20,270
それでは、ベントまたは幸せになりましょう。

264
00:15:23,480 --> 00:15:26,450
さあ。私はあなたのすべてがFacebookを使って知っている。

265
00:15:26,450 --> 00:15:30,970
誰かが言っても何か悪いことか、それについて言って何か良いものを持っている必要がある。はい。

266
00:15:30,970 --> 00:15:35,060
[学生]は、ニュースフィードでは、私は本当に気にしないものが多数あります。

267
00:15:35,060 --> 00:15:37,740
ニュースフィードは、あなたが気にしないかもしれない多くのものを示しています。

268
00:15:37,740 --> 00:15:41,660
あなたは2または3年も会っていないFacebookの友人を持っている

269
00:15:41,660 --> 00:15:43,860
そしてあなたはそれらのニュースの結果があなたのニュースフィードにポップアップ表示

270
00:15:43,860 --> 00:15:45,870
そしてあなたが本当にそれを気にしないでください。

271
00:15:45,870 --> 00:15:48,700
Facebookは、実際に、これはより良くする努力をしてきた

272
00:15:48,700 --> 00:15:53,150
そして、彼らは実際に後半のようにニュースフィードの先頭に関連する結果をプッシュしようとしてきました

273
00:15:53,150 --> 00:15:58,300
ので、実際にあなたやあなたの親しい友人に関連している友人によって物事を参照してください。

274
00:15:58,300 --> 00:16:01,110
何か他には？はい。

275
00:16:01,110 --> 00:16:06,400
[聞き取れない生徒の応答] >>あなたは再びそれを言うことはできますか？

276
00:16:06,400 --> 00:16:10,140
[学生]広告は比較的控えめです。どんな意味で？>>

277
00:16:10,140 --> 00:16:16,370
[聞き取れない生徒の応答]彼らはバナーのように、画面上の光を持っていない。

278
00:16:16,370 --> 00:16:17,760
オーケー。それは良いことだ。

279
00:16:17,760 --> 00:16:25,030
あなたは90年代からインターネットを覚えていれば -  >> [マラン]私はそこにあった。 >>彼はそこにあった。 [笑い]

280
00:16:25,030 --> 00:16:29,210
あなたがキラキラ点滅GIFを背景に、物事を覚えているかもしれない

281
00:16:29,210 --> 00:16:31,570
物事のジオシティーズスタイルの一種。

282
00:16:31,570 --> 00:16:34,080
それは本当に良いデザインの例ではありません

283
00:16:34,080 --> 00:16:36,690
それは本当に内容から気が散るからだ。

284
00:16:36,690 --> 00:16:39,590
その背景としてアニメーションGIFを使用していたエール大学アートサイト

285
00:16:39,590 --> 00:16:41,800
そしてあなたは、ページ上で何かを読み取ることができませんでした

286
00:16:41,800 --> 00:16:44,870
しかし、私は誰かが実際に彼らに話をし、今ではそれは少し違うと思います。

287
00:16:44,870 --> 00:16:48,940
[マラン]それは今ではずっといい。あなたが見ることができるように>>それは、今ではずっといい。 >> [マラン]そうそう。

288
00:16:48,940 --> 00:16:56,020
ただ、単に偉大な - うん。オーケー。

289
00:16:56,020 --> 00:17:00,560
>> その一部はまた、非常にミニマルと非常に理解しやすいことによるとあなたのページを作っている

290
00:17:00,560 --> 00:17:05,690
非常に論理的な方法でページフローで物事ので、お互いの邪魔になりません。

291
00:17:05,690 --> 00:17:11,849
他のものは何ソートがFacebookについて良いかFacebookについて悪いですか？

292
00:17:11,849 --> 00:17:15,730
ちょうどここにデザインの会話を持ってみましょう。

293
00:17:19,470 --> 00:17:21,339
ああ。どこで？うん。

294
00:17:21,339 --> 00:17:25,640
[学生]は、新しいタイムライン·システムでは、自分の過去についての人のプロフィールを検索することができます。

295
00:17:25,640 --> 00:17:28,119
、タイムラインOohの。

296
00:17:28,119 --> 00:17:30,280
それはあなた茎友達をすることができますので、タイムラインには、素晴らしいことだ

297
00:17:30,280 --> 00:17:33,300
バック彼らが高校にいたとき。

298
00:17:35,160 --> 00:17:38,060
それはあなたが多くの高速コンテンツをフィルタすることができますので、タイムラインは良いですが、

299
00:17:38,060 --> 00:17:41,500
それはあなたがそうでなければ見つけることがあなたに本当に長い時間がかかったであろうものを見つけることができます

300
00:17:41,500 --> 00:17:45,840
ちょうど間に合うように戻って行くような、アップ、アップ、アップ、アップ、アップ、上にスクロールダウンします。

301
00:17:45,840 --> 00:17:48,910
しかし、その後、ユーザーエクスペリエンスの観点からその方法の欠点のようなものも用意されている。

302
00:17:48,910 --> 00:17:51,190
それは何であるかもしれない？

303
00:17:51,190 --> 00:17:56,780
P-Rで始まるビッグ言葉。 >> [生徒]プライバシー。 >>プライバシー、右か？

304
00:17:56,780 --> 00:17:59,970
プライバシーは巨大なユーザーエクスペリエンスの問題です。

305
00:17:59,970 --> 00:18:07,190
これは私が今ではFacebookについての最も嫌いなものの一つです。 [笑い]

306
00:18:07,190 --> 00:18:09,000
[マラン]のように私は今やる。

307
00:18:09,000 --> 00:18:11,380
ダビデはこれが実際に起こった昨日まで気づかなかった。

308
00:18:11,380 --> 00:18:14,560
だから今、彼は私が彼にチャットするたびに、私は彼が私を無視されている知っていることを知っている。

309
00:18:14,560 --> 00:18:16,880
[マラン]不器用な部分、私は実際に彼を無視していましたが、

310
00:18:16,880 --> 00:18:21,040
と私は彼が私が彼を無視していた知っていた知らなかった。 [笑い]

311
00:18:21,040 --> 00:18:24,030
プライバシーは巨大な問題です。

312
00:18:24,030 --> 00:18:28,670
ここで誰もがFacebookのプライバシーについての悪いかもしれないものを教えてもらえますか

313
00:18:28,670 --> 00:18:32,270
彼らがこのようなことを行うという事実のほかに？

314
00:18:32,270 --> 00:18:37,240
それは、Facebookのプライバシーに関してやることは特にハードは何ですか？

315
00:18:37,240 --> 00:18:40,340
その種は、主要な問題である。

316
00:18:41,680 --> 00:18:43,930
はい。 >> [生徒]特定の人から、あなたの写真を非表示にします。

317
00:18:43,930 --> 00:18:46,170
右。正確には、特定の人から写真を非表示にします。

318
00:18:46,170 --> 00:18:51,290
彼らはあなたが写真のプライバシーを切り替えることができます右上にあるこの小さな、小さなボタンがあります。

319
00:18:51,290 --> 00:18:56,360
自分のプライバシーオプションが非常にメニューの異なる種類の間で変化しています。

320
00:18:56,360 --> 00:18:59,510
>> 彼らは最近、それについてたくさんよくなってきたが、それはケースのように使用

321
00:18:59,510 --> 00:19:04,870
あなたが写真を見てからのお友達を防止したいときはいつでも、

322
00:19:04,870 --> 00:19:08,280
あなたは、のようにされて、非常に複雑な5ステッププロセスを通過しなければならないでしょう

323
00:19:08,280 --> 00:19:11,150
私は、このリンクをクリックさせ、今では、私はもう一度クリックしてみましょう、私はもう一度クリックしてみましょう

324
00:19:11,150 --> 00:19:13,420
私は人々が私の写真を見ることができないかを指定できます。

325
00:19:13,420 --> 00:19:17,250
そのFacebookの部分に特に良くはありません

326
00:19:17,250 --> 00:19:20,530
ユーザーエクスペリエンスに関するそんなに実際には、彼らに自由を与えているので

327
00:19:20,530 --> 00:19:22,460
人々が見ることができるかを制御する。

328
00:19:22,460 --> 00:19:25,550
我々は、このユーザーコントロールと自由を呼び出す。

329
00:19:25,550 --> 00:19:31,090
あなたのユーザーが効率的かつ直感的な方法でそれを行うせていない場合は、

330
00:19:31,090 --> 00:19:34,570
その後、あなたのユーザーエクスペリエンスはまったく本当に素晴らしいではありません。

331
00:19:34,570 --> 00:19:38,200
 君たちは、Facebookについては何も言うことはしませんか？

332
00:19:38,700 --> 00:19:41,420
どのように私はこれをオフにするには？

333
00:19:41,420 --> 00:19:46,290
[オング]あなたはこれをオフにすることはできませんし、それがFacebookの一部に巨大なユーザビリティ上の欠陥です。

334
00:19:46,290 --> 00:19:49,410
この機能は - 私は実際に昨日、それを覗き込んだ - 

335
00:19:49,410 --> 00:19:53,940
それはあなたがそれを行うことができないのどちらかだか、それはどこかに、非常に、非常に深く埋められています

336
00:19:53,940 --> 00:19:58,050
Facebookの凹部に私はすべてでこの機能を無効にする方法を見つけ出すことができないためです。

337
00:19:58,050 --> 00:20:00,400
[マラン]しかし、時には、これらの決定は、明白ではありません

338
00:20:00,400 --> 00:20:03,890
あなたたちは、様々なCS50アプリケーション上で私たちに有益な多くのフィードバックを与えているので、

339
00:20:03,890 --> 00:20:05,710
コー​​スで使用しているとウェブサイト。

340
00:20:05,710 --> 00:20:10,260
我々は、これらの要望やご提案のすべてを実装していない。

341
00:20:10,260 --> 00:20:14,550
>> の部分は、それが時間の関数であるように多くの要求を得るためのものであり、

342
00:20:14,550 --> 00:20:17,070
時には私たちはちょうど、同じように意識的に決断を下す

343
00:20:17,070 --> 00:20:19,830
"提案していただき、ありがとうございますが、私たちはそうは思わない。"

344
00:20:19,830 --> 00:20:24,350
それでは、どのように実際にユーザーが何かをやるべきだと思う場合は、何をすべきかを決めるのですか

345
00:20:24,350 --> 00:20:28,110
あなたは必ずしもない場合でも？

346
00:20:28,110 --> 00:20:32,360
これは、実際にユーザーが言うことを聞いて微妙なバランスだ

347
00:20:32,360 --> 00:20:35,840
あなたが言う場所と、実際には、行のいくつかの並べ替えを持って

348
00:20:35,840 --> 00:20:37,750
"我々は、これらのユーザーは言うことをするつもりはない。"

349
00:20:37,750 --> 00:20:42,520
特に、私はかなりよく、これまでの合計を求めヘンリー·フォードによる引用があったと思います。

350
00:20:42,520 --> 00:20:47,130
"私は彼らが望んで人を求めていた場合、彼らは速い馬を望んでいたと述べていただろう。"

351
00:20:47,130 --> 00:20:51,840
誰もがその引用が本当に何を意味するのか離れていじめるのソートができますか？

352
00:20:51,840 --> 00:20:56,060
それは、ユーザーが自分の欲しいものを知っているだけではない

353
00:20:56,060 --> 00:20:59,180
それはより多くのことだ - 

354
00:20:59,180 --> 00:21:02,720
[学生]彼らは何が可能かわかりません。

355
00:21:02,720 --> 00:21:06,140
一部では、彼らは何ができるかわからない。

356
00:21:07,880 --> 00:21:11,440
もう少しその離れていじめる。あなたはそれによって何を意味するのですか？

357
00:21:11,440 --> 00:21:21,340
[聞き取れない生徒の応答]

358
00:21:21,340 --> 00:21:25,770
それは良いことだ。私は我々がここで言おうとしていると思うと、人々は、彼らが望むものを知っているということです。

359
00:21:25,770 --> 00:21:28,050
彼らは速い馬が欲しい。

360
00:21:28,050 --> 00:21:29,840
彼らが本当に欲しいのは、速く移動する能力である

361
00:21:29,840 --> 00:21:32,310
しかし、彼らは本当にそれを達成するためにそれによって媒体を知りません。

362
00:21:32,310 --> 00:21:36,330
あなたのユーザーに来て、ユーザが何かを教えたときに

363
00:21:36,330 --> 00:21:39,700
そして、彼らはあなたを教えて、 "我々は、これらの機能とこれらの機能とこれらの機能を使いたい"

364
00:21:39,700 --> 00:21:42,650
あなたは必ずしもについて考える必要はありません、 "私が先に行ってみよう

365
00:21:42,650 --> 00:21:44,720
"と、彼らが言うことを明示的に実装する"

366
00:21:44,720 --> 00:21:48,610
しかし、あなたが考えるようにしたいと、 "私はそれからのアイデアはどのようなものを得ることができますか？"

367
00:21:48,610 --> 00:21:50,450
彼らは実際に何をしたいのですか？

368
00:21:50,450 --> 00:21:55,560
>> そこから何ができるかは、それらの要求を満たす何かをデザインである

369
00:21:55,560 --> 00:22:00,340
必ずしもそうではないが、ユーザーはそれが満たされることを想定している方法で。

370
00:22:00,340 --> 00:22:03,830
だから、非常に実質ベースで最終的なプロジェクトのような何かのために、

371
00:22:03,830 --> 00:22:07,900
それはより良いものを作ることになると便利なヒューリスティックは、何ですか

372
00:22:07,900 --> 00:22:10,630
デザイナーは彼について、この傲慢さを持っている場合は特に

373
00:22:10,630 --> 00:22:14,360
あなたはソートのがベストですか知ってそれによって、あなたは、あなたのユーザからの入力を取るかもしれない

374
00:22:14,360 --> 00:22:16,580
しかし、あなたは実際にそのフィードバックを得ることについて、どのように行くのですか？

375
00:22:16,580 --> 00:22:21,610
最終的なプロジェクトでは、非常に具体的に、ここで何が最適な結果を生成？

376
00:22:21,610 --> 00:22:25,030
何が最適な結果を生成する - と私は2番目でこれを復習します - 

377
00:22:25,030 --> 00:22:29,190
開発し、テストしてから、繰り返し処理のこの処理のことです。

378
00:22:29,190 --> 00:22:32,020
あなたが何かをデザインするときに私は何を試験することによって意味することは通常である

379
00:22:32,020 --> 00:22:36,970
あなたはそれが、のような、かなり良いことだと思う "私はそのような偉大なデザイナーです。誰もがこれを好きになるだろう。"

380
00:22:36,970 --> 00:22:41,600
そしてあなたはそれをそこに出して、人々はいくつかの理由でそれを本当に好きではありません。

381
00:22:41,600 --> 00:22:46,820
あなたは何をしなければならないことで、人々がどのように行うことの部分を取らなければならないです

382
00:22:46,820 --> 00:22:49,180
そして人々は好きではないという事を見直す。

383
00:22:49,180 --> 00:22:53,080
それは非常に明確なのは、プロセスのように聞こえますが、この過程は絶えず反復する

384
00:22:53,080 --> 00:22:55,980
あなたが既に構築されてきたものの上にあなたを助けるプロセスである

385
00:22:55,980 --> 00:22:59,730
独自の設計技術を磨くだけでなく、あなたがデザインを洗練支援するだけでなく、

386
00:22:59,730 --> 00:23:03,790
ので、人々は実際に彼らが以前よりお使いの製品がより一層感謝する。

387
00:23:03,790 --> 00:23:07,390
>> 私はあなたが実際にどのような処理を実行するか、より具体的な例をあげてみたいと思います。

388
00:23:07,390 --> 00:23:11,390
製品の最後の例のようなものとして、カヤックを見てみましょう。

389
00:23:11,390 --> 00:23:14,970
それが出てきたカヤックは非常に、非常に人気がありました。

390
00:23:14,970 --> 00:23:18,760
なぜ誰もが推測することはできますか？

391
00:23:18,760 --> 00:23:20,950
あなたはそれを使用している場合は、このことについて好きなものの種類は何ですか

392
00:23:20,950 --> 00:23:23,990
またはあなたが好きではないものの種類は何ですか？

393
00:23:23,990 --> 00:23:31,590
はい。 >> [聞こえない学生の応答] >>オーケー。

394
00:23:31,590 --> 00:23:34,730
それの一部だと、ユーザーはより広大で​​あるクエリを持ってさせて頂いております

395
00:23:34,730 --> 00:23:38,150
あなたはあなたの開始日を選択する必要があり "、のように非常に限定的なものより

396
00:23:38,150 --> 00:23:39,810
"と、あなたの終了日を選択する必要があります。"

397
00:23:39,810 --> 00:23:44,910
実際には、それはあなたがそれについて柔軟に対応することができます、それはあなたにはその範囲内のフライトのすべてを提供します。

398
00:23:44,910 --> 00:23:46,730
何か他には？

399
00:23:46,730 --> 00:23:50,530
[学生]彼らは価格の手数料が含まれます。

400
00:23:50,530 --> 00:23:53,330
彼らは価格の手数料が含まれていない。

401
00:23:53,330 --> 00:23:56,720
税金や物事は、実際に左上にその価格にまっすぐ行く

402
00:23:56,720 --> 00:24:00,710
ので、あなたは、あなたが実際に240ドルのフライトのために払っていると考えることにだまされていない

403
00:24:00,710 --> 00:24:03,280
ときにそれは本当に330ドルだ。

404
00:24:03,280 --> 00:24:06,200
何か他には？はい。

405
00:24:06,200 --> 00:24:10,140
[聞き取れない生徒の応答]

406
00:24:10,140 --> 00:24:14,610
私は、彼らが実際にあなたがそれをやらせるかどうかはよく知りません。

407
00:24:14,610 --> 00:24:18,310
私は間違っているかもしれない。

408
00:24:18,310 --> 00:24:23,360
あなたが特定のフィルタに重きを置きたいと思うなら、それは面白いかもしれませんね

409
00:24:23,360 --> 00:24:27,000
彼らはトップにそのフィルタに関連する結果をプッシュする。

410
00:24:27,000 --> 00:24:31,920
しかし、誰もがこの左側の何がそんなに特別なのか教えてください？

411
00:24:31,920 --> 00:24:39,540
どのように伝統的にこの前のインターネットサービス上の飛行をルックアップしましたか？

412
00:24:41,600 --> 00:24:44,650
>> はい。 >> [聞こえない学生の応答] >>あなたがそれを言うことができます - 

413
00:24:44,650 --> 00:24:47,530
[学生]各航空会社。 >>うん。各航空会社は、独自のウェブサイトを持っています。

414
00:24:47,530 --> 00:24:50,110
これは、物事を統合します。と？

415
00:24:50,110 --> 00:24:52,190
[学生]あなたが残しているかを正確に時間を知っています。

416
00:24:52,190 --> 00:24:54,460
あなたが残しているかを正確に知っている時、

417
00:24:54,460 --> 00:24:59,380
しかし、特定のフィルタに関連していた。

418
00:25:00,710 --> 00:25:03,540
私はカヤックをプルアップしてみましょう。

419
00:25:11,490 --> 00:25:14,020
ああ、神様、ポップアップ。悪いユーザーエクスペリエンス。

420
00:25:14,020 --> 00:25:17,230
私は、このスライダを動かしたときはどうなりますか？

421
00:25:17,230 --> 00:25:21,010
[学生]自動更新されます。 >> [オング]自動更新されます。

422
00:25:21,010 --> 00:25:23,440
ことは非常に重要な何かです。

423
00:25:23,440 --> 00:25:25,380
この前、あなたは飛行をルックアップしたいときはいつでも、

424
00:25:25,380 --> 00:25:28,410
あなたは、あなたの入力位置は、出力場所を押し検索しなければならなかった

425
00:25:28,410 --> 00:25:31,190
それはそれを処理し、あなたの結果を表しているだろう。

426
00:25:31,190 --> 00:25:34,120
あなたのクエリを変更したい場合は、Backを2回押す必要があるでしょう

427
00:25:34,120 --> 00:25:39,770
ゼロから新しいクエリに入力してから、もう一度上それを上にやると。

428
00:25:39,770 --> 00:25:43,910
このような何かについての素晴らしいところは、それが途中で非常に[理解不能]のものを使用しています。

429
00:25:43,910 --> 00:25:46,230
あなたはこのような何かをするたびに、それは要求をオフに撃つ

430
00:25:46,230 --> 00:25:48,420
そしてそれはあなたにすぐにすべての結果が返されます。

431
00:25:48,420 --> 00:25:51,680
即時フィードバックこの種のカヤックを乱暴に普及したものである

432
00:25:51,680 --> 00:25:55,910
私はちょうど私のクエリを変更することは本当に簡単だから

433
00:25:55,910 --> 00:25:58,890
と、特定の範囲のまわりにあるものを把握する

434
00:25:58,890 --> 00:26:01,950
行ったり来たり、行ったり来たり、行ったり来たりする必要がなくなります。

435
00:26:01,950 --> 00:26:05,200
したがって、これらはあなたがあなたのウェブサイトを設計しているときに考えるようにしたいあらゆる種類のものがあります。

436
00:26:05,200 --> 00:26:08,930
私のユーザーは、彼らが取り組んでいるものは何でも通過するためにどのように私はそれが非常に効率的に行うことができます

437
00:26:08,930 --> 00:26:13,010
そして、できるだけ早く彼らの最終的な目標に到達するには？

438
00:26:13,010 --> 00:26:16,430
[マラン]以前のヨセフのポイントに必ずしも彼らが望むものを知っているユーザーについて、

439
00:26:16,430 --> 00:26:18,640
君たちは今、HTMLについて知っていることに基づいて、

440
00:26:18,640 --> 00:26:22,780
、あなたは、チェックボックス、ラジオボタン、セレクトメニュー、入力フィールドなどを、持っている

441
00:26:22,780 --> 00:26:26,140
どのようにして飛行の開始時刻をピッキングの概念を実装するだろうか？

442
00:26:26,140 --> 00:26:30,030
>> あなたはそれらの様々なUIのメカニズムのどちらを使うのでしょうか？

443
00:26:30,030 --> 00:26:34,100
あなただけの前に教えられたHTMLの量を知っている場合

444
00:26:34,100 --> 00:26:39,070
そしてあなたは、入力がラジオボタン、チェックボックス、ドロップダウン、および入力ボックスを知っている

445
00:26:39,070 --> 00:26:43,320
あなたの自然な選択は、日付を選択するために何だったでしょう？

446
00:26:43,320 --> 00:26:48,670
[学生]入力。 >>入力。または多分すべての日付を持つドロップダウン、右か？

447
00:26:48,670 --> 00:26:53,170
ですから、実施することができることが左側にこのような、より複雑なUIメカニズムを持つ、

448
00:26:53,170 --> 00:26:55,500
あなたはスライダーでこのプロセスは、より直感的にすることができ

449
00:26:55,500 --> 00:27:01,020
時間は連続しているので、人々は通常、個別のチャンクの面でそれはないと思う。

450
00:27:01,020 --> 00:27:04,950
かしこまりました。最後のもの。

451
00:27:04,950 --> 00:27:07,370
十ユーザビリティヒューリスティック。

452
00:27:07,370 --> 00:27:10,820
我々が話し、すべてのものは、おそらく、これらのカテゴリのいずれかに該当する。

453
00:27:10,820 --> 00:27:14,420
あなたのサイトがオンラインで掲示され、このリンクに行けば

454
00:27:14,420 --> 00:27:18,900
あなたが実際にあなたのサイトを設計する際、念頭に置いてこれらのヒューリスティックスを保つ、ができるようになります

455
00:27:18,900 --> 00:27:21,330
親指のこれらのルール。

456
00:27:21,330 --> 00:27:26,610
あなたのプロジェクトのために、私は自分のアプリが良く設計するために、あなたは何をすべきかを示唆している

457
00:27:26,610 --> 00:27:28,850
最初のペーパープロトタイピングを行うことです。

458
00:27:28,850 --> 00:27:32,150
あなたのアプリケーションを考えているときに、非常に迅速にあなたはそれが見えるように欲しいものをスケッチ

459
00:27:32,150 --> 00:27:36,230
そしてすべてのボックスは、ユーザーが使用するために非常に直感的な方法で配置されていることを確認してください

460
00:27:36,230 --> 00:27:39,820
とでもお友達にこれらのペーパープロトタイプを示し、フォーカスグループを起動します。

461
00:27:39,820 --> 00:27:44,230
ただ、一緒に2〜3人を取得し、ちょうどこれらのペーパープロトタイプをタップしてもらう

462
00:27:44,230 --> 00:27:47,650
そして、彼らが実際に何が起こっているか理解するかどうかを確認するために、彼らに新しい画面が表示されます。

463
00:27:47,650 --> 00:27:50,680
>> あなたは何をしたいのは、そのタスクを動機、彼らにタスクを与えることです

464
00:27:50,680 --> 00:27:53,270
そしてちょうどそれらのアプリを提供し、彼らがそれを使ってみましょう。

465
00:27:53,270 --> 00:27:56,530
彼らにそれを超えて指示を与えてはいけない。

466
00:27:56,530 --> 00:28:00,920
あなたが実際にそれらはあなたが見ることができますようにあなたのアプリケーションと対話できるようにしたい

467
00:28:00,920 --> 00:28:03,870
あなたがそれらの隣に立っていなかった場合に、どのように彼らはそれを使用することになります。

468
00:28:03,870 --> 00:28:05,250
そして、それは非常に重要です。

469
00:28:05,250 --> 00:28:08,780
人々は特定の物事の周りになっているようにあなたの洞察力の多くを与えること

470
00:28:08,780 --> 00:28:10,560
私はそれらをするつもりはなかったような方法で？

471
00:28:10,560 --> 00:28:14,680
彼らは画面上の特定のUIメカニズムを使用している

472
00:28:14,680 --> 00:28:17,490
ハックの一種であるように？

473
00:28:17,490 --> 00:28:22,020
彼らはそれをそのように行うためには私が意図していなかった。

474
00:28:22,020 --> 00:28:23,940
そして、一度あなたがそれで終わって、何をすべきかをしたいですか？

475
00:28:23,940 --> 00:28:26,010
デザイン岩、右か？

476
00:28:26,010 --> 00:28:29,600
あなたは何をしたいのは、あなたが何度も繰り返しやるから、そのプロセスを開発したいです。

477
00:28:29,600 --> 00:28:32,110
だから、あなたがそれを開発してきたら、友人にそれを示して、それをテストする

478
00:28:32,110 --> 00:28:36,630
とそして前方に、開発、テスト、開発、テスト、反復する。

479
00:28:36,630 --> 00:28:39,720
デザインは非常にこの意味での反復的なプロセスです。

480
00:28:39,720 --> 00:28:43,280
あなたは実際にそれについてのことを実現する、何かを構築しなければならない

481
00:28:43,280 --> 00:28:46,520
あなたは前に実現し、戻って、そこから改善しなかったこと。

482
00:28:46,520 --> 00:28:50,890
さて、開発の部分で、それはトミーが休憩後をお見せしようとしているものだ

483
00:28:50,890 --> 00:28:53,220
とどのようにオートコンプリートのような何かを実装することができるかもしれない

484
00:28:53,220 --> 00:28:56,610
かなり簡単な方法インチ

485
00:28:57,440 --> 00:28:59,550
[マラン]トミーはその後、ここで質問を設定したように。

486
00:28:59,550 --> 00:29:03,780
最古のウェブサイトの多くの - とするとき、ヨセフは、1990年代スタイルのウェブサイトを言った

487
00:29:03,780 --> 00:29:07,640
それは、開始時刻と終了時刻を選択したい場合の実装だった

488
00:29:07,640 --> 00:29:10,380
率直に言って、今日一日で戻って、さらにいくつかのウェブサイトで、

489
00:29:10,380 --> 00:29:13,220
あなたがこれを行う方法は、ドロップダウンから[hour]を選ぶです

490
00:29:13,220 --> 00:29:15,910
ドロップダウンから数分を選んで、多分あなたは、午前、午後を選択

491
00:29:15,910 --> 00:29:17,440
次にその3回以上行う。

492
00:29:17,440 --> 00:29:19,920
それで、6回のクリック、おそらくいくつかのスクロールで

493
00:29:19,920 --> 00:29:24,000
あなたのユーザーが実際にこの意味での日付および/または時間範囲のいくつかの種類を提供することができます。

494
00:29:24,000 --> 00:29:27,920
>> だから間違いなく次善の、まだこれまで我々は表現力を見てきました

495
00:29:27,920 --> 00:29:30,330
のいずれかの言語で私たちは何かセクシーを行うことを見てきました

496
00:29:30,330 --> 00:29:32,620
開始時間と終了時間のこのスライダーのような。

497
00:29:32,620 --> 00:29:36,290
しかし、我々はスクラッチについて話したときに0週に戻って考えれば、

498
00:29:36,290 --> 00:29:39,080
あまりにちょうど特定の事をしたウィジェットがありませんでした。

499
00:29:39,080 --> 00:29:42,700
あなたは本当にちょうどループや条件などのように、これらの基礎を持っていた。

500
00:29:42,700 --> 00:29:46,910
だから、HTMLの細目とは無関係に、現在、非常に抽象的な思考の一種で、

501
00:29:46,910 --> 00:29:51,260
本当にこの開始時間と終了時間のスライダーのようなもので何が起こっているのか？

502
00:29:51,260 --> 00:29:54,960
私はマウスを移動して、私は左側にその小さなニンジンのシンボルをクリックすると

503
00:29:54,960 --> 00:29:59,220
および実装できるようにしたい、それが何であるか、プログラム的に、ドラッグを開始

504
00:29:59,220 --> 00:30:01,000
それを実現するには？

505
00:30:01,000 --> 00:30:04,920
どのような質問、あなたが求めることができるようにするにはどのようなブール式をしたいですか？

506
00:30:04,920 --> 00:30:06,930
何が本当に起こっているの？サミー？

507
00:30:06,930 --> 00:30:10,080
[学生]カーソルの位置はどこにありますか？グッド。>>カーソルの位置はどこですか？

508
00:30:10,080 --> 00:30:11,970
これは、我々がスクラッチに戻って表現するために必要なものだった

509
00:30:11,970 --> 00:30:14,690
それは、場所、あるいは色等に基づいてされたかどうか。

510
00:30:14,690 --> 00:30:18,410
あなたはイベントと呼ばれるこれらの事のすべてがあった月曜日に今までので、簡単に思い出すかもしれない

511
00:30:18,410 --> 00:30:22,370
Webの世界というように、onClickとonKeyPressイベントのようなものがあり

512
00:30:22,370 --> 00:30:25,960
とonKeyUpとonmouseoverとonmouseout。

513
00:30:25,960 --> 00:30:29,130
だから我々は、Web上で当然のことと取ってきたとしても、これらのものと認識

514
00:30:29,130 --> 00:30:32,190
あなたは見当がつかない場合でも、FacebookやGmailのようなサイトと

515
00:30:32,190 --> 00:30:34,890
講義の中であってもそれのようなものは何もないので、あなたはおそらくことを実装する方法

516
00:30:34,890 --> 00:30:38,570
または問題セット7、これらの正確な同じ基礎であることを実現し、

517
00:30:38,570 --> 00:30:41,090
HTTPおよびパラメータを持つとGETとPOST、

518
00:30:41,090 --> 00:30:44,010
我々はこれまで見てきたことを基本的なHTMLの入力を持つ

519
00:30:44,010 --> 00:30:47,690
とプログラムによるメカニズムとその瞬間にトミーのは約導入すること

520
00:30:47,690 --> 00:30:51,300
あなたは0週目にやったように自分を表現するために始めることができます

521
00:30:51,300 --> 00:30:53,800
で、非常に直感的にドラッグ＆ドロップする。

522
00:30:53,800 --> 00:30:58,950
>> そう言ったことを、トミーMacWilliamおよびWeb用の私たちのためにいくつかの新しいパズルのピースを持つ。

523
00:30:58,950 --> 00:31:03,450
かしこまりました。私の名前はトミーだと私には、JavaScriptの話をするつもりだ。

524
00:31:03,450 --> 00:31:07,150
ただ免責事項：私はJavaScriptは最高のプログラミング言語であるという意見です

525
00:31:07,150 --> 00:31:09,010
全体世界全体インチ

526
00:31:09,010 --> 00:31:11,940
そこに私に反対する人々がたくさんあり​​ますが、それだけで驚くべきことだ。

527
00:31:11,940 --> 00:31:16,330
あなたが別のクラスまたはいくつかの他の言語のためにCを書く必要があるのなら一度、C言語に戻って、

528
00:31:16,330 --> 00:31:19,780
それはあなたインチ行き詰まるする必要があるすべての低レベルの詳細には本当にイライラする

529
00:31:19,780 --> 00:31:23,050
ですから、Cを書くことですどのよ​​うに迷惑を悲しく感じている場合、

530
00:31:23,050 --> 00:31:25,130
ちょうど戻って、いくつかのJavaScriptを記述します。それは涅槃です。

531
00:31:25,130 --> 00:31:27,980
あなたの悪い日約はるかに良い感じられるでしょう。

532
00:31:27,980 --> 00:31:31,900
JavaScriptの魔法の多くは、物事を操作する能力から来ている

533
00:31:31,900 --> 00:31:33,730
それはページ上に既に存在しています。

534
00:31:33,730 --> 00:31:38,520
我々はPHPスクリプトを書いたとき、彼らは、サーバー上で実行された

535
00:31:38,520 --> 00:31:42,270
そして最終的にはPHPスクリプトは、おそらくいくつかのHTMLを出力していること。

536
00:31:42,270 --> 00:31:45,860
そのHTMLがクライアントに送信された後、それはそれだった。

537
00:31:45,860 --> 00:31:50,180
PHPは、ページにボタンを追加したい場合は、例えば、それは本当にそれを行うことはできません。

538
00:31:50,180 --> 00:31:54,350
これは、全体の新しいHTMLファイルをレンダリングしていることをブラウザに送信する必要があります。

539
00:31:54,350 --> 00:31:57,840
JavaScriptを使って我々は、彼らがページを開いている間に我々は物事を更新できることを知っている、

540
00:31:57,840 --> 00:32:00,840
そして、このため我々は、はるかに即座にフィードバックを提供することができます

541
00:32:00,840 --> 00:32:06,150
それは本当に私たちのウェブサイト上でのユーザーエクスペリエンスが向上します。

542
00:32:06,150 --> 00:32:09,330
JavaScriptのセレクタのだけ簡単にまとめ。

543
00:32:09,330 --> 00:32:11,590
私たちは、HTMLページをダウンロードするときにことを知っている

544
00:32:11,590 --> 00:32:13,890
それは、DOMで表現することになるだろう。

545
00:32:13,890 --> 00:32:19,340
>> DOMは覚え要素がこの大規模な階層で関連しているだけで、この大きな木です。

546
00:32:19,340 --> 00:32:21,810
我々は、pset 7のデータベースで働いていたとき、

547
00:32:21,810 --> 00:32:26,280
我々が行う方法を知っているために必要な最初のものの一つは、データベースに対してクエリを実行しました。

548
00:32:26,280 --> 00:32:29,060
、我々は、この大usersテーブルを持っており、時には我々はただ言いたい

549
00:32:29,060 --> 00:32:33,260
"私はいくつかの条件に一致し、これらのユーザーのいくつかをしたい。"

550
00:32:33,260 --> 00:32:36,020
同様に、我々は、DOMを持っているとき、我々はそれを照会するいくつかの方法が必要になります。

551
00:32:36,020 --> 00:32:39,490
我々は、私はこのようになり、すべてのボタンがほしい "というのがいくつかの方法が必要

552
00:32:39,490 --> 00:32:41,860
"またはページ上のすべての画像。"

553
00:32:41,860 --> 00:32:44,330
そしてこれらのセレクタは、私たちはそれを行うことができます。

554
00:32:44,330 --> 00:32:45,690
だから、簡単にまとめ。

555
00:32:45,690 --> 00:32:50,770
ここでは、この最初のものは、これは＃提出し、選択しようとしていることは何ですか？誰も覚えていますか？

556
00:32:50,770 --> 00:32:54,880
[聞き取れない生徒の応答] >>うん、その通りです。

557
00:32:54,880 --> 00:32:59,510
これは、提出のIDを持っているページ上の要素を選択しようとしている。

558
00:32:59,510 --> 00:33:03,470
それで、そのハッシュタグがこのセレクターは、IDで動作するように起こっていると言う。

559
00:33:03,470 --> 00:33:07,630
もう一つ、この。中心について、それは何をどのように選択するのでしょうか？

560
00:33:11,360 --> 00:33:15,180
うん。 >> [生徒]クラス。まさに>>。これは今のクラスで選択しようとしている。

561
00:33:15,180 --> 00:33:18,840
ここでIDとクラスの違いは、IDは一意でなければなりません、一般的に

562
00:33:18,840 --> 00:33:20,820
どんな空間内では、上検索しています。

563
00:33:20,820 --> 00:33:23,080
ですから、全体のWebページ上で検索された場合、

564
00:33:23,080 --> 00:33:27,740
あなたは本当にのみ提出のこのケースではそう、その特定のIDを持つ1つの要素を持つ必要があります。

565
00:33:27,740 --> 00:33:31,330
クラスでは、他の一方で、我々は同じページに2つ以上の要素を持つことができます

566
00:33:31,330 --> 00:33:33,130
同じクラスを持つ。

567
00:33:33,130 --> 00:33:36,580
これは、私がページの中央にいるすべてのものを選択したいと言ってのに便利かもしれない

568
00:33:36,580 --> 00:33:38,450
だけではなく、1事。

569
00:33:38,450 --> 00:33:40,310
>> そして最後に、ここでは、この最後の1つは、もう少し複雑です

570
00:33:40,310 --> 00:33:43,890
しかし、何これはDOMから選択するつもりですか？

571
00:33:46,650 --> 00:33:48,810
[聞き取れない生徒の応答] >>これは何ですか？

572
00:33:48,810 --> 00:33:53,250
[学生]タグだもの。私たちはここで2つの部分を持っている。>>

573
00:33:53,250 --> 00:33:58,070
第二部は、私が入力のタグでこれらのタグを選択したいと言うことが起こっている

574
00:33:58,070 --> 00:34:00,730
inputタグで任意の要素はそう。

575
00:34:00,730 --> 00:34:03,080
しかし、私はちょうどすべての入力を選択したくない

576
00:34:03,080 --> 00:34:05,170
submitボタンのようなものを入力することがなかったので

577
00:34:05,170 --> 00:34:08,409
して、テキストボックスのようなものを入力することができた。

578
00:34:08,409 --> 00:34:11,909
だから私が言っている、これらの角カッコとともに私は、これらの要素のみを選択したい

579
00:34:11,909 --> 00:34:14,110
text型のものである。

580
00:34:14,110 --> 00:34:17,400
どこかに私のHTMLタグで私がタイプという属性を持っている

581
00:34:17,400 --> 00:34:19,750
その属性の値はテキストでなければなりません。

582
00:34:19,750 --> 00:34:21,340
それでは、どのようにここでは、この最初の部分はどうですか？

583
00:34:21,340 --> 00:34:25,489
このセレクタの最初の単語は、私は空間とし、この入力部を持つ形式です。

584
00:34:25,489 --> 00:34:29,620
それはそれの前にフォームを入れて、何をしますか？

585
00:34:33,409 --> 00:34:35,860
これは、基本的に我々のクエリを制限しようとしている。

586
00:34:35,860 --> 00:34:38,510
それは、我々はページ上のいくつかの入力を持っているそうであるかもしれません

587
00:34:38,510 --> 00:34:41,080
フォームの子孫でないこと。

588
00:34:41,080 --> 00:34:46,150
これは何を行いますと、これは私だけでどこかに持っている上にinputタグが欲しいと言うだろうである

589
00:34:46,150 --> 00:34:49,030
フォームの一部の親要素。

590
00:34:49,030 --> 00:34:52,100
それで、このように我々は、これらのより階層化されたクエリを作ることができます

591
00:34:52,100 --> 00:34:55,000
ので、単に与えられたセレクタに一致するすべてのものを選択する必要はありません。

592
00:34:55,000 --> 00:35:00,760
私たちは、何か他の人に、そのクエリの範囲を制限する一種のことができます。

593
00:35:00,760 --> 00:35:04,000
だから今我々は、ページ上の要素を選択する方法を知っていること、

594
00:35:04,000 --> 00:35:06,780
AJAXについて少し説明してみましょう。

595
00:35:06,780 --> 00:35:12,270
AJAXは非同期JavaScriptとXMLの略で、まだ非常に流行の頭文字をとったものです。

596
00:35:12,270 --> 00:35:15,640
それはちょうどので、XMLはデータを表現するだけでいくつかの方法であることを起こる。

597
00:35:15,640 --> 00:35:20,920
>> 最近失われた人気のようなものなので、AjaxのXは、すべての時間を使用していません。

598
00:35:20,920 --> 00:35:26,220
基本的に、AJAXは私たちが行うことができますどのようなHTTPリクエストを作成している

599
00:35:26,220 --> 00:35:28,620
JavaScriptの文脈から。

600
00:35:28,620 --> 00:35:32,310
我々は、Webブラウザにしていると我々はページをナビゲートしていると我々はリンクをクリックすると、

601
00:35:32,310 --> 00:35:37,790
何私達のブラウザが何をしようとしている、我々はどのようなリンクをクリックしてHTTP要求を作ることです。

602
00:35:37,790 --> 00:35:41,670
もしそうだとしたら、その後、ダビデは、言っていたようので、しかし、それは必ずしも理想的ではない

603
00:35:41,670 --> 00:35:45,220
我々は常に、ユーザーが[送信]ボタンをクリックするか、リンクをクリックしなければなら

604
00:35:45,220 --> 00:35:50,380
HTTPリクエストを巻き込むために起こっている何が起こるを作るためにインチ

605
00:35:50,380 --> 00:35:54,160
だから、AJAXを使って、我々には、JavaScriptの代わりにこれらの要求を行うことができます。

606
00:35:54,160 --> 00:35:57,020
ユーザーがページか何かが起こると対話するたびに、それは、意味

607
00:35:57,020 --> 00:36:01,780
我々は、実際に当社のウェブサイト上でいくつかの他のPHPファイルへのプログラム要求を行うことができます

608
00:36:01,780 --> 00:36:06,280
または何か他のものと、そのファイルが吐き出したデータを取得します。

609
00:36:06,280 --> 00:36:09,860
のはAJAXの例を見てみましょう。

610
00:36:09,860 --> 00:36:16,140
これがうまくいけば、私たちの一部が使い慣れている私たちのCS50ファイナンスのページです。

611
00:36:16,140 --> 00:36:21,790
我々は、このページのHTMLを見れば、我々は、私はいくつかのものを追加したことをここに見る

612
00:36:21,790 --> 00:36:23,820
私はこのフォームにIDを与えてくれたそのうちの一つ。

613
00:36:23,820 --> 00:36:26,480
私は、id = "フォーム引用"と言ってきました。

614
00:36:26,480 --> 00:36:31,910
私はそれがDOMから選択するには、このコードを少し容易にするために起こっているという理由だけでこれをやった

615
00:36:31,910 --> 00:36:35,090
私は非常に単純なクエリを作ることができるからです。

616
00:36:35,090 --> 00:36:38,960
私がここでやりたいことは、私はCS50ファイナンスといくつかの問題を解決したいです。

617
00:36:38,960 --> 00:36:41,550
だから我々はfinance.cs50.netに行けば、

618
00:36:41,550 --> 00:36:45,700
私が見積もりを取得するたびに、私は、この見積を取得]ボタンをクリックする必要があります

619
00:36:45,700 --> 00:36:48,960
そして、それはまた別のページ全体に私を取り、次に見積ボタンを取得します。

620
00:36:48,960 --> 00:36:52,400
私は別の引用をしたいならば、私は、[戻る]ボタンを押すと、それから、私はそれを入力する必要が

621
00:36:52,400 --> 00:36:54,480
私が見積もりを取得し、私は​​、[戻る]ボタンを押してください。

622
00:36:54,480 --> 00:36:56,840
これは本当に最高のユーザーエクスペリエンスではありません。

623
00:36:56,840 --> 00:37:01,570
それは株価を取得するためにその遅い場合は誰が実際にサイトを使うのでしょうか？

624
00:37:01,570 --> 00:37:05,630
だから我々はAJAXを使って何をしたいのか、別のページに行くのがそのステップを削除することも

625
00:37:05,630 --> 00:37:08,410
結果を表示するために。

626
00:37:08,410 --> 00:37:11,240
>> 我々が本当にのみを求めているのは、それは本当に小さな価格です

627
00:37:11,240 --> 00:37:14,240
そしてそれは単なるデータの本当に少量です。

628
00:37:14,240 --> 00:37:17,400
だから別の全体のHTMLページを移動するための私のために必要が、ありません

629
00:37:17,400 --> 00:37:20,670
HTMLのまったく新しいバッチをダウンロードして、多分、いくつかのより多くの画像をダウンロード

630
00:37:20,670 --> 00:37:24,410
ちょうど私はその非常に単純な質問に答えるためのいくつかの他のCSSファイル

631
00:37:24,410 --> 00:37:27,810
この在庫コストを行うどのくらいの。

632
00:37:27,810 --> 00:37:31,000
AJAXを使って我々は、これははるかに簡単にすることができます。

633
00:37:31,000 --> 00:37:36,400
我々は、私がquote.jsというJavaScriptファイルにリンクしていることをここに参照してください。

634
00:37:36,400 --> 00:37:40,140
実際に、そのファイルを開きましょう。そこではない。

635
00:37:42,610 --> 00:37:45,860
私のすべてのJavaScriptファイルは、HTMLに置かれようとしている

636
00:37:45,860 --> 00:37:47,630
ので、Webブラウザはそれにアクセスできるようになります。

637
00:37:47,630 --> 00:37:50,330
その後、我々は、JavaScriptのためここに別のディレクトリを持っている

638
00:37:50,330 --> 00:37:54,340
そして今ここにquote.jsです。

639
00:37:54,340 --> 00:38:00,930
このファイルの上の方では、私は全体のページがロードされるのを待ちたいことをここに述べてい

640
00:38:00,930 --> 00:38:04,830
私が何かをしようとする前に。なぜそれが必要なのですか？

641
00:38:04,830 --> 00:38:08,650
それは私がここで何をするつもりです次のものが要素を探し始めていることが判明

642
00:38:08,650 --> 00:38:10,810
それはいくつかのセレクタに一致します。

643
00:38:10,810 --> 00:38:15,600
この要素がページにロードされる前に、このJavaScriptは今までに実行された場合、

644
00:38:15,600 --> 00:38:17,820
次に私がやろうとするすべてのものは、仕事に行くのではない

645
00:38:17,820 --> 00:38:20,580
私はまだそこにないものを選択しようとするつもりだ。

646
00:38:20,580 --> 00:38:23,780
だから、トップアップこの行は、私はすべてがロードされるまで待ちたいと言う

647
00:38:23,780 --> 00:38:28,030
だから我々は、私が探している任意の要素がページ上に実際にあることを保証されている。

648
00:38:29,730 --> 00:38:34,310
このドル記号は、ここで私はjQueryというライブラリを使用していることを意味します。

649
00:38:34,310 --> 00:38:38,570
このjQueryライブラリは、私たちはただ見ていることこれらのセレクタを使用することができます。

650
00:38:38,570 --> 00:38:44,010
引数として、この＃フォーム重引用符を渡して、$ aを言って、

651
00:38:44,010 --> 00:38:47,910
いま私は、ただ見ていたことを、そのフォームを選択しています。

652
00:38:47,910 --> 00:38:52,290
今、私は何とかしてメモリ内のその形の表現を持っています。

653
00:38:52,290 --> 00:38:56,760
>> 現在、このオブジェクトでは、フォームのこの表現、

654
00:38:56,760 --> 00:38:58,890
私は今で呼び出される関数を使用しています。

655
00:38:58,890 --> 00:39:02,710
何この関数が何をすることは、イベントハンドラをアタッチすることが起こっているのです。

656
00:39:02,710 --> 00:39:06,310
我々は耳を傾けるしようとしているイベントはsubmitイベントです。

657
00:39:06,310 --> 00:39:08,890
だから、ボタンを押すか、または提出するユーザーがクリックすると入力したときに、

658
00:39:08,890 --> 00:39:11,730
このイベントは発生しようとしている。

659
00:39:11,730 --> 00:39:16,390
これにフックすることによって、私は今、フォームの既定の動作をオーバーライドできます。

660
00:39:16,390 --> 00:39:19,770
このJavaScriptを使用しないと、フォームはどんなPHPファイルに提出する

661
00:39:19,770 --> 00:39:22,110
我々はそのaction属性で使用されます。

662
00:39:22,110 --> 00:39:25,440
しかし、その代わりに、私は今、待って、待って、待って、私はあなたが実際にそれを行うにはしたくない、と言っている。

663
00:39:25,440 --> 00:39:31,140
私はあなたが行くといくつかのPHPファイルを送信しようとする前に、これが起こることを望む。

664
00:39:31,140 --> 00:39:32,870
今私はどのように過ごしたいですか？

665
00:39:32,870 --> 00:39:39,270
この時点で私は、株式の価格が何であるかにロードするためにどうにかしてAJAXを使用したいと思います。

666
00:39:39,270 --> 00:39:44,170
私が知っている必要がある最初の事は、ユーザーが上向きになっているものを株式です。

667
00:39:44,170 --> 00:39:46,760
私は別のセレクタを使用するつもりだこれを行うに。

668
00:39:46,760 --> 00:39:49,020
これは、我々は前に見た第3のセレクタです。

669
00:39:49,020 --> 00:39:54,460
これは、私はフォームの引用のIDを使用してこのフォーム要素をオフに開始したいと言っています。

670
00:39:54,460 --> 00:39:58,440
その後、どこかにそのフォームの中にinput要素が存在しなければならない

671
00:39:58,440 --> 00:40:01,270
それは、シンボルの名前を持っています。

672
00:40:01,270 --> 00:40:05,460
我々は、HTMLを振り返ってみると、我々は入力していたことを見た[名前=記号]。

673
00:40:05,460 --> 00:40:12,380
ことは、これはユーザーがタイピングされていることをそのテキストボックスを選択しようとしていることを意味します。

674
00:40:12,380 --> 00:40:13,870
それはうれしいです。我々は、テキストボックスを持っています。

675
00:40:13,870 --> 00:40:17,360
今、私たちはその中にあるものを知ることだけが必要です。

676
00:40:17,360 --> 00:40:20,290
、我々はここに、このメソッドを呼び出すことができることをこの。valを行うには、

677
00:40:20,290 --> 00:40:23,240
そしてこれは私があなたが持っているものをテキストボックスを知って言っている。

678
00:40:23,240 --> 00:40:28,160
私はあなたがそれは、そのテキストボックスに入力されたユーザであるかを教えたいと思います。

679
00:40:28,160 --> 00:40:34,440
今、私たちは、ユーザが入力したものは何でもインチに等しいシンボルと呼ばれる文字列が

680
00:40:34,440 --> 00:40:39,820
それはうれしいです。私達は私達の要求を行うようになり、その文字列を使用することができます。

681
00:40:39,820 --> 00:40:42,450
これは、ここに新しい機能であり、この$、

682
00:40:42,450 --> 00:40:44,900
私たちはもはや要素を選択しようとしていないしている場合を除き、

683
00:40:44,900 --> 00:40:48,910
我々は、jQueryによって我々に提供している別の関数を呼び出すことになるだろう。

684
00:40:48,910 --> 00:40:54,810
このAJAX関数は実際には、このHTTP要求を行うために何が起こっているのです。

685
00:40:54,810 --> 00:40:57,000
だから我々はそれをいくつかのことを伝えなければなりません。

686
00:40:57,000 --> 00:41:01,410
私は要求がどこへ行きたいか我々は、この関数を指示する必要があります最初のものです。

687
00:41:01,410 --> 00:41:08,910
どこかに私のプロジェクトで私はquote.phpと呼ばれるHTMLディレクトリ内でこのファイルを持っている。

688
00:41:08,910 --> 00:41:15,150
私は、localhost / quote.phpに行けば、私はこのファイルにアクセスすることができます、我々は、ちょうどこのように、見た。

689
00:41:15,150 --> 00:41:20,450
>> 私はJavaScriptはそのページへのリクエストを作りたい。

690
00:41:20,450 --> 00:41:22,920
どのようなタイプの要求の今？

691
00:41:22,920 --> 00:41:27,210
フォームはそのメソッド= "POST"属性を持っているその前に、我々は、鋸

692
00:41:27,210 --> 00:41:29,270
そして、それはそれは、POSTリクエストを行うために起こっていることを意味

693
00:41:29,270 --> 00:41:32,630
そのためには、URLではなく、GETリクエストには何も入れに行くのではない、

694
00:41:32,630 --> 00:41:36,860
我々だけで、Webブラウザでページにアクセスした場合、そのちょうど例えば、解雇されるだろう。

695
00:41:36,860 --> 00:41:41,260
今、私たちは、私は、HTTP POST要求を作りたいと言っている

696
00:41:41,260 --> 00:41:44,840
quote.phpにあるページへ。

697
00:41:44,840 --> 00:41:51,490
我々は、フォームを送信したとき、私たちはそのフォームの内側のinput要素にアクセスすることができました覚えている

698
00:41:51,490 --> 00:41:54,430
その$ _POST変数を持つ。

699
00:41:54,430 --> 00:41:58,710
これまでのところ、物語の中で、我々はまだ実際には、任意のデータに沿って送信していない。

700
00:41:58,710 --> 00:42:00,640
我々は、AJAXリクエストを作っているだけ言ってきた

701
00:42:00,640 --> 00:42:03,200
そしてここでは、我々が作っている要求の種類です。

702
00:42:03,200 --> 00:42:07,090
今、私たちは、実際にページにいくつかのデータを送信する必要があります。

703
00:42:07,090 --> 00:42:10,930
我々はデータと呼ばれるこのプロパティを使用することができますこれを行うに。

704
00:42:10,930 --> 00:42:14,950
このプロパティの値は、実際には連想配列です。

705
00:42:14,950 --> 00:42:19,390
この理由は、それは、私たちはデータのちょうど1個以上のものを送ることができますです。

706
00:42:19,390 --> 00:42:24,750
我々はここで、これらの他の中括弧の中にネストされたこれらの中括弧を持っている理由です。

707
00:42:24,750 --> 00:42:29,680
これらの連想配列のキーは同じことになるだろうしている

708
00:42:29,680 --> 00:42:32,630
それらの名前は、フォーム要素の属性として。

709
00:42:32,630 --> 00:42:35,740
私は記号のキーに沿って送信した場合ことを意味し、

710
00:42:35,740 --> 00:42:41,870
私のPHPページは$ _POST [シンボル]を使用してこのデータにアクセスできることを意味します

711
00:42:41,870 --> 00:42:44,640
我々は、フォームを送信したときに前にやったように。

712
00:42:44,640 --> 00:42:47,090
そして今、実際のデータは、我々は、送信したい

713
00:42:47,090 --> 00:42:50,790
この連想配列の値の内側になるだろう。

714
00:42:50,790 --> 00:42:54,070
>> 我々は、変数と呼ばれるシンボルでこのテキストを格納

715
00:42:54,070 --> 00:42:57,380
それで我々は今に沿って記号のキーを送っている

716
00:42:57,380 --> 00:43:01,380
とユーザーに打鍵した何の価値

717
00:43:01,380 --> 00:43:06,270
今、私たちは、私たちのPHPファイルが実行された、このHTTPリクエストを作りました

718
00:43:06,270 --> 00:43:11,480
それだけでこの要求を行ったクライアントにすぐに戻っていくつかのデータを送信するために起こっている。

719
00:43:11,480 --> 00:43:15,220
今、私たちは、サーバーが私たちに言った何に応答する必要があります。

720
00:43:15,220 --> 00:43:20,180
我々は成功と呼ばれるここでは、この最後のプロパティを持っていることを行うには。

721
00:43:20,180 --> 00:43:24,240
この成功のキーの値は実際には関数であることを行っている、

722
00:43:24,240 --> 00:43:26,910
そしてこれは、JavaScriptで行うことができます本当にクールなものの一つです。

723
00:43:26,910 --> 00:43:31,720
だけでなく、あなたが、連想配列の値の内部としてint型または配列を持つことができます

724
00:43:31,720 --> 00:43:34,170
我々はまた、機能を持たせることができる。

725
00:43:34,170 --> 00:43:36,380
だから、成功と言って、これが私のキーです。

726
00:43:36,380 --> 00:43:38,830
コロンは、値が来るここで言う

727
00:43:38,830 --> 00:43:41,810
そして今、この値は実際には関数である。

728
00:43:41,810 --> 00:43:44,460
だから我々はこの関数をそれ自体の名前を付ける必要はありません。

729
00:43:44,460 --> 00:43:48,820
我々は、ちょうどこれはいくつかの関数であることを行っていると言うことができます。それは1つの引数を取ることになるだろう。

730
00:43:48,820 --> 00:43:51,190
この関数の引数があることを行っている

731
00:43:51,190 --> 00:43:54,460
どんなサーバは要求から私たちを送り返す。

732
00:43:54,460 --> 00:43:57,750
私たちのブラウザが要求を出したときと同様に、サーバは何かお返しを送信

733
00:43:57,750 --> 00:43:59,060
、ブラウザはそれを表示します

734
00:43:59,060 --> 00:44:03,030
我々だけで要求を行ったAJAXのコンテキストでは、サーバーは、背中に何かを送信

735
00:44:03,030 --> 00:44:07,110
そして今我々は、その文字列として表現さ​​れています。

736
00:44:07,110 --> 00:44:11,280
その文字列で、私はちょうどページにそれを表示したいと思います。

737
00:44:11,280 --> 00:44:14,040
私は最後の1セレクタを持っているつもりで利用しています。

738
00:44:14,040 --> 00:44:17,570
私はID​​の価格を持つ要素を選択したい。

739
00:44:17,570 --> 00:44:20,710
これは、ちょうど私がページに作成した空のdivです

740
00:44:20,710 --> 00:44:26,640
そして私は、サーバーが私たちを送り返すものは何でもであることがそのdivの内容を設定したい。

741
00:44:26,640 --> 00:44:30,280
私は実際にquote.phpビットを変更しました。

742
00:44:30,280 --> 00:44:33,460
>> むしろrenderを呼び出して、いくつかのページをレンダリングするのではなく、

743
00:44:33,460 --> 00:44:38,100
quote.phpは、単に文字列として株式の値をプリントアウトしようとしている。

744
00:44:38,100 --> 00:44:41,880
あなたが実際にページを訪問したかのように、あなただけの、小さな文字列を参照してくださいと

745
00:44:41,880 --> 00:44:45,030
株価が何であろうの。

746
00:44:45,030 --> 00:44:50,170
我々はここで行う必要が最後に一つだけ、この関数がfalseを返していることを確認しています。

747
00:44:50,170 --> 00:44:53,560
これが何を言うことはつまり、私は、イベントハンドラの内部にいたら

748
00:44:53,560 --> 00:44:57,300
そのイベント·ハンドラは、trueを返すのではなく、falseを返します

749
00:44:57,300 --> 00:45:01,510
それは私が火にオリジナルのイベントを望んでいないことを意味します。

750
00:45:01,510 --> 00:45:05,270
この場合において、我々は、任意のJavaScriptがあるとしなかった場合、我々は、フォームを送信

751
00:45:05,270 --> 00:45:08,280
私たちのウェブブラウザは、 "私は、一緒にそのデータを送信するつもりです"、と言うために起こっている

752
00:45:08,280 --> 00:45:10,130
そして、彼らは別のページに送信しようとしている。

753
00:45:10,130 --> 00:45:14,360
我々は今、AJAXを使用しているので、ユーザーを別のページに送信する必要はありません。

754
00:45:14,360 --> 00:45:17,920
我々は、ちょうどこれと同じページ上に動的に結果を表示しようとしている。

755
00:45:17,920 --> 00:45:21,460
我々は、本当に彼らがどこへ行くにしたくない、と私は、同じページに滞在したい。

756
00:45:21,460 --> 00:45:27,060
だから、falseを返すことによって、我々は、フォームが私たちのためにそれをしないことを確認してください。

757
00:45:27,060 --> 00:45:31,170
のは、これが実際にどのようなものかを見てみましょう。

758
00:45:31,170 --> 00:45:34,180
当社の見積もりページでは同じように見えます。

759
00:45:34,180 --> 00:45:37,240
我々は何が起こっているのを見ることができるので、私はここでインスペクタを上下に引っ張ってみましょう。

760
00:45:37,240 --> 00:45:40,270
それが少し巨大ください。

761
00:45:40,270 --> 00:45:44,590
我々は、[ネットワーク]タブを開く場合、我々はすべてのHTTP要求を見ることができる、これがあることを覚えている

762
00:45:44,590 --> 00:45:47,570
そのページで何が起こっている。

763
00:45:47,570 --> 00:45:52,890
>> シンボルのために私はAAPLで入力して見積書をクリックしてみましょう。

764
00:45:52,890 --> 00:45:56,720
今、私たちは、アップルのシェアはドルのいくつかの番号を要することを見た

765
00:45:56,720 --> 00:46:00,410
同じページ上に登場したが、URLが全く変化しなかった。

766
00:46:00,410 --> 00:46:04,570
実際には、ここで我々だけで作ったHTTP要求です。

767
00:46:04,570 --> 00:46:09,980
我々はquote.phpへのPOST要求を行った。それは理にかなっています。

768
00:46:09,980 --> 00:46:12,800
これは、サーバーが私達に送り返されたものです。

769
00:46:12,800 --> 00:46:16,320
それは、もはやイメージとそのようなことで、この巨大なHTML文書ん

770
00:46:16,320 --> 00:46:20,920
それだけでテキストの行だし、私たちはただのテキストの行を表示しました。

771
00:46:20,920 --> 00:46:26,290
我々は、ヘッダーに戻って、私たちが実際にこのHTTPリクエストの内部に送信した内容が表示される場合は、

772
00:46:26,290 --> 00:46:33,950
我々は、我々がシンボルとAAPLの値のキーに沿って送られたことをここに見ることができます

773
00:46:33,950 --> 00:46:36,430
これは、ユーザーに打鍵したものです

774
00:46:36,430 --> 00:46:39,230
これはいいですが、それはまだ少し迷惑なんだ。

775
00:46:39,230 --> 00:46:42,490
私はまだ株価を取得するにはこのボタンをクリックする必要があります。

776
00:46:42,490 --> 00:46:45,880
我々は忙しい人だと我々はボタンをクリックする時間がありません。

777
00:46:45,880 --> 00:46:49,910
彼らはGoogleインスタント検索を実装したとき、Googleはさっきこれを実現しました。

778
00:46:49,910 --> 00:46:53,590
あなたがタイプしていると何がGoogleインスタントのしていることはあるそれはちょうどあなたのための結果の表示を開始

779
00:46:53,590 --> 00:46:56,520
ので、あなたも、検索をクリックして心配する必要はありません。

780
00:46:56,520 --> 00:46:58,730
実際に、それに関連する楽しいストーリー。

781
00:46:58,730 --> 00:47:01,100
Googleインスタントが出てきたら、人々は、のようだった "うわ、これは超素晴らしいです。"

782
00:47:01,100 --> 00:47:02,540
"これはとてもクールだ。"

783
00:47:02,540 --> 00:47:05,950
時19歳だったスタンフォード大学のダウンと学生

784
00:47:05,950 --> 00:47:09,000
YouTubeのインスタントと呼ばれる、このサイトを作りました。

785
00:47:09,000 --> 00:47:13,170
すべてのYouTubeのインスタントは事実瞬時にYouTubeを検索されません。

786
00:47:13,170 --> 00:47:17,020
だからではなく検索をYouTube.comとヒットに行くことよりも、

787
00:47:17,020 --> 00:47:21,650
私はCS50のようなYouTubeのインスタント何かに入力を開始すると、

788
00:47:21,650 --> 00:47:25,320
我々はそれがインターネットの接続速度が遅い上にしようとしていることをここに見ることができました

789
00:47:25,320 --> 00:47:28,500
これらの結果は生きて移入されます。

790
00:47:28,500 --> 00:47:35,590
我々は実際に私たちのquote.jsファイルに非常に簡単な修正を行うことができますこれを行うに。

791
00:47:35,590 --> 00:47:40,900
フォームが送信されたときに、今私たちは、このイベントをアタッチしている。

792
00:47:40,900 --> 00:47:43,760
私たちは本当に、ユーザーはもうそのフォームを送信するようにしたくない

793
00:47:43,760 --> 00:47:48,570
そうするたびにユーザが押すキーは、代わりにこのイベントを発生させてみましょう。

794
00:47:48,570 --> 00:47:53,200
レッツ最初のKeyUpイベントに提出するからイベントを変更することを行うには。

795
00:47:53,200 --> 00:47:55,740
のではなく、提出するためのフォームを待っていることを意味し、

796
00:47:55,740 --> 00:47:58,490
キーが押されるたびに、何かが起きようとしています。

797
00:47:58,490 --> 00:48:02,030
それはもはや、フォーム全体にこのKeyUpイベントをアタッチする意味がありません。

798
00:48:02,030 --> 00:48:05,080
私たちは本当にそれだけで検索ボックスを気遣う。

799
00:48:05,080 --> 00:48:09,320
>> 今、我々はむしろフォーム見積もりよりも、なるようにこれを変更することができます選択するには、

800
00:48:09,320 --> 00:48:14,220
フォーム引用符と（=シンボルに名前を）我々は、入力があるでしょう（=テキストを入力します）、または我々が言うことができる - 

801
00:48:14,220 --> 00:48:16,420
私たちが望むものは何でも。

802
00:48:16,420 --> 00:48:18,650
今、私たちがしなければならない最後にひとつはあり。

803
00:48:18,650 --> 00:48:21,190
我々はfalseを返すと言ったときにここに降り覚えている

804
00:48:21,190 --> 00:48:24,370
我々はそのデフォルトのイベントが発生したくないと語った。

805
00:48:24,370 --> 00:48:26,390
しかし、それだけで、我々は今それを無効にした場合に起こりますように

806
00:48:26,390 --> 00:48:29,660
我々は何を入力するもうブラウザに表示するつもりはない

807
00:48:29,660 --> 00:48:33,000
それは、テキストボックスに入力のデフォルトの動作になりますので。

808
00:48:33,000 --> 00:48:38,660
我々はもはやので、この戻り値はfalseを破壊してみましょうことを上書きしたいん。

809
00:48:38,660 --> 00:48:44,800
我々はそれを保存し、私がAAPLの入力を開始するとすぐに、ページをリロードする

810
00:48:44,800 --> 00:48:50,160
あなたはここで下部の株価が自動的に完了していることがわかります。

811
00:48:50,160 --> 00:48:53,150
だからここCS50ファイナンスインスタントです。

812
00:48:53,150 --> 00:48:55,860
YouTubeのインスタントについて、実際に楽しい物語

813
00:48:55,860 --> 00:48:59,420
その学生は、単に種類の1泊分のプロジェクトとして、それを書いたのです

814
00:48:59,420 --> 00:49:03,800
そして次の日、彼は、YouTubeのCEOが仕事を依頼されました。

815
00:49:03,800 --> 00:49:10,610
そのような単純なあなたCS50学生だから、あなたの最終的なプロジェクトでは、YouTubeでの仕事を得ることができます。

816
00:49:10,610 --> 00:49:14,720
最終的なプロジェクトのための本当にクールなアイデアですそのような何か、右か？

817
00:49:14,720 --> 00:49:18,170
我々はと統合したかったいくつかの既存の機能を持っていた。

818
00:49:18,170 --> 00:49:20,330
我々は、ユーザーエクスペリエンスを少し改善

819
00:49:20,330 --> 00:49:24,340
と、突然YouTubeのインスタントで何かを検索するとたくさんの方が簡単でしょう

820
00:49:24,340 --> 00:49:27,290
正規YouTubeでそれを検索するよりも。

821
00:49:27,290 --> 00:49:30,790
だからそれは一言で言えば、AJAXです。

822
00:49:30,790 --> 00:49:34,860
>> ヨセフは見せたことの例で、我々は、自動的に補完をたくさん見た

823
00:49:34,860 --> 00:49:39,250
そしてそれら自動的に補完し、我々は覚えておく必要はありませんので、本当に便利です - 

824
00:49:39,250 --> 00:49:41,770
たとえば、アップルの株価を覚えていない場合

825
00:49:41,770 --> 00:49:45,110
私達はちょうどではなく、ちょうど私に言うよりも、それのAA何かを、知っている

826
00:49:45,110 --> 00:49:48,740
"この事のシェアは、これだけのお金がかかります"

827
00:49:48,740 --> 00:49:52,540
私は一種の株式はaaで始まるか知ってみたいと思います。

828
00:49:52,540 --> 00:49:58,340
我々はすでに含まれているのブートストラップ·ライブラリとうまく実際にそれを行うことができる

829
00:49:58,340 --> 00:50:01,380
CS50ファイナンスの内側。

830
00:50:01,380 --> 00:50:09,390
JavaScriptのタグにここまで来て、先行入力までスクロールダウンしている場合、

831
00:50:09,390 --> 00:50:13,730
これは、ちょうど誰かがすでに私たちのために書いた素敵なプラグインです。

832
00:50:13,730 --> 00:50:16,980
そして我々は、簡単にこのように、その機能を使うことができます。

833
00:50:16,980 --> 00:50:21,410
私は、ここで入力したAで始まり、いくつかの州のリストです

834
00:50:21,410 --> 00:50:25,360
Let 'sは、私はこれは本当にクールだと思っているという、それは私が私のページにこれを含めての時間です。

835
00:50:25,360 --> 00:50:28,300
これが本当に、本当にシンプルであることが判明。

836
00:50:28,300 --> 00:50:32,810
quote3.jsへこっちへジャンプしてみましょう。

837
00:50:34,890 --> 00:50:37,380
私のファイルは少し異なるように見えます。

838
00:50:37,380 --> 00:50:39,700
ダウンここに私のAJAXのもののすべては同じです。

839
00:50:39,700 --> 00:50:43,170
私は別のページに移動しなくても、株価データをロードする。

840
00:50:43,170 --> 00:50:46,220
しかし、今私はこのプラグインを使用したいと思います。

841
00:50:46,220 --> 00:50:51,020
ブートストラップのドキュメントでは、私はそれを行うことができます正確にどのように偉大な例があります。

842
00:50:51,020 --> 00:50:54,350
私は言いたい、 "ここは、私が上でオートコンプリートしたい入力だ"

843
00:50:54,350 --> 00:50:56,640
と私は、先行入力と呼ばれるこの関数をコールするつもりです

844
00:50:56,640 --> 00:50:59,730
そしてそれは私たちのために先行入力のもののすべてを扱うことになるだろう。

845
00:50:59,730 --> 00:51:02,090
それはリストを初期化する、それが私たちのフィルタリングのすべてを行います。

846
00:51:02,090 --> 00:51:06,680
それは知っている必要があります唯一の事は私達が上にオートコンプリートしているもののデータです。

847
00:51:06,680 --> 00:51:10,480
だから、僕はマニュアルを読んで、例を見て、この鍵を見つけた。

848
00:51:10,480 --> 00:51:14,150
私はそれをソースのキーは、このキーの値を与えた場合、

849
00:51:14,150 --> 00:51:17,770
私はオートコンプリートにしたい事のちょうどいくつかの配列です。

850
00:51:17,770 --> 00:51:20,180
この変数は、この他のファイルから来ました。

851
00:51:20,180 --> 00:51:23,400
私はsymbols.jsを開く。

852
00:51:23,400 --> 00:51:27,980
>> このsymbols.jsはただの文字列を含むこれは本当に、本当に大きな配列です。

853
00:51:27,980 --> 00:51:32,080
ナスダックからこれらの株式銘柄のすべての。

854
00:51:32,080 --> 00:51:42,190
私は、HTML、jharvard、バーチャルホスト、globalhost、HTMLテンプレートに戻ってジャンプしたい場合

855
00:51:42,190 --> 00:51:45,820
quote_form。

856
00:51:45,820 --> 00:51:50,910
今quote3.jsを呼ばれていなかったので、私はここに含めているJavaScriptファイルを変更してみましょう。

857
00:51:50,910 --> 00:51:55,110
今、私はquote3.jsを持っているので、私はその別のJavaScriptファイルをロードするつもりです

858
00:51:55,110 --> 00:51:57,910
そのストラップオートコンプリートを有するもの。

859
00:51:57,910 --> 00:52:04,430
今私はブラウザに戻ったときに、ページをリロードして、私はAAの入力を開始

860
00:52:04,430 --> 00:52:06,880
私のオートコンプリートがあります。そして、それは本当にそのように単純であった。

861
00:52:06,880 --> 00:52:11,400
私は、 "私はオートコンプリートにしたいものですここでは、"今言ったコードの1行を持っていた

862
00:52:11,400 --> 00:52:16,590
そして突然、私はすべての努力の全体ではなく、たくさんの本、本当に素晴らしい機能を備えています。

863
00:52:16,590 --> 00:52:19,810
あなたは、Webサイトや特に​​物事の先端側を開発しているように、

864
00:52:19,810 --> 00:52:21,840
あなたは、このようなケースがたくさんある見つけるつもりだ。

865
00:52:21,840 --> 00:52:25,700
そこには本当にクールなフリーのライブラリをたくさん、たくさん、たくさんあり​​ます

866
00:52:25,700 --> 00:52:30,190
それはこのようなことを行うために、それが超簡単になります。

867
00:52:30,190 --> 00:52:37,230
誰もが単にシンボルのこの大規模なリストでオートコンプリートのいずれかの欠点を考えることができますか？

868
00:52:37,230 --> 00:52:41,580
何がこのアプローチに最善ではない何かだろうか？

869
00:52:42,790 --> 00:52:45,960
うん。 >> [生徒]時間は、[聞こえない]の数が多い場合

870
00:52:45,960 --> 00:52:50,420
うん。今、私たちはこの巨大なJavaScriptファイルをダウンロードしているとシンボルが多数あります。

871
00:52:50,420 --> 00:52:54,360
私たちはもののトンを持っているそうだとすれば、これは一種の探索のみならずレイテンシを増やすことができ

872
00:52:54,360 --> 00:52:56,600
だけでなく、実際のファイルをダウンロードします。

873
00:52:56,600 --> 00:52:58,670
グレート。何か他には？

874
00:53:01,950 --> 00:53:05,280
今のところ関連性の本当の意味はありません。

875
00:53:05,280 --> 00:53:08,190
私がここに表示され、企業で入力した場合

876
00:53:08,190 --> 00:53:11,220
A.で始まる最も人気のある会社ではないかもしれません

877
00:53:11,220 --> 00:53:17,130
>> 私はAppleに入る前に、それは私が探しているものを見つけるためにいくつかのより多くの文字がかかる場合があります。

878
00:53:17,130 --> 00:53:20,420
このオートコンプリートは、関連性のこの感覚を持っていません。

879
00:53:20,420 --> 00:53:24,400
それはちょうど、言おうとしている "私は表示するつもり一致するものを。"

880
00:53:24,400 --> 00:53:30,510
その代わりに、私はどういうわけか私の検索にいくつかの関連性を統合したいと思います。

881
00:53:30,510 --> 00:53:36,440
、finance.yahoo.com、私はYahoo!ファイナンスにこっちに行けば

882
00:53:36,440 --> 00:53:42,100
私はYahoo!ファイナンスのページに記号を入力しようとする

883
00:53:42,100 --> 00:53:52,310
と私はGOOGの入力を開始、私は物事のこの素敵なリストを持っています。

884
00:53:52,310 --> 00:53:57,100
Yahoo!ファイナンスは、より巧妙なここで何かをやっているように、明らかに、それが見えます。

885
00:53:57,100 --> 00:53:59,790
彼らはいくつかの関連性を持っていると、彼らはまた、追加情報を持っている

886
00:53:59,790 --> 00:54:01,430
株式の名前のような。

887
00:54:01,430 --> 00:54:05,850
それは私が本当にシンボルのちょうど私の在庫リストで得ることができない何かである。

888
00:54:05,850 --> 00:54:09,520
私はこれをしたいので、私はそれを取るつもりだ。

889
00:54:09,520 --> 00:54:11,790
レッツは、いくつかのことを行うことを行うには。

890
00:54:11,790 --> 00:54:15,580
最初にこのページにインスペクタを開いてみましょう

891
00:54:15,580 --> 00:54:18,100
私達はこのページがすべてでリロードされていないことを見たので、

892
00:54:18,100 --> 00:54:21,960
ので、それはおそらく、そのデータをロードすることが何とかAJAXを使用している。

893
00:54:21,960 --> 00:54:23,920
我々は、それがロードしていますどのようなデータを見つけることができます。

894
00:54:23,920 --> 00:54:28,390
私はこの[ネットワーク]タブをクリックした場合、これらは解雇されるように開始要求のすべてになるだろうしている。

895
00:54:28,390 --> 00:54:34,020
私はグーで入力した場合、今、私たちは、私はちょうど新しいHTTP要求を持っていることがわかります。

896
00:54:34,020 --> 00:54:37,490
そのデータがどこから来ていると考えられる。

897
00:54:37,490 --> 00:54:41,990
案の定、私は奇妙な名前のビットであり、このURLを見れば、

898
00:54:41,990 --> 00:54:46,930
我々はヤフーからそのデータを送り出したときは、この正確であることがわかります。

899
00:54:46,930 --> 00:54:53,400
>> 私は心の中でルックアップ機能と非常によく似ていますsuggest.phpと呼ばれる別のファイルを作成しました。

900
00:54:53,400 --> 00:54:57,730
それは基本的にいくつかのデータを取り戻すため、YahooのURLにクエリを作るために起こっている、

901
00:54:57,730 --> 00:54:59,750
そして私にそれを送り返す。

902
00:54:59,750 --> 00:55:02,570
今すぐではなく、記号のこの大きな、巨大なリストを使用するよりも、

903
00:55:02,570 --> 00:55:05,280
私はYahooの素敵な関連性のものを使用することができ、

904
00:55:05,280 --> 00:55:08,150
と私はその大規模なJavaScriptファイルをダウンロードする必要はありません。

905
00:55:08,150 --> 00:55:12,040
私は実際に関連する株式銘柄をプルダウンするつもりです。

906
00:55:12,040 --> 00:55:13,960
その飛び込むしてみましょう。

907
00:55:13,960 --> 00:55:17,360
だからHTML、JS。我々はquote4に今いる。

908
00:55:17,360 --> 00:55:22,120
今、私たちはもはや、JavaScriptファイルのその大きなリストを使用していないしている。

909
00:55:22,120 --> 00:55:24,430
しかし、設計上の問題の小さな種がここにあり。

910
00:55:24,430 --> 00:55:28,200
我々は、AJAXの非同期であると言ってきました。

911
00:55:28,200 --> 00:55:31,000
それが何を意味する、私はAJAX要求を行ったときにということである

912
00:55:31,000 --> 00:55:36,490
私のAJAXリクエストが実際に発射されているので、ここに8行目で、これはです。

913
00:55:36,490 --> 00:55:40,370
Let 'sは、今私はいくつかのものをやろうとしているその下に、ここでいくつかのコードを持っていると言う

914
00:55:40,370 --> 00:55:43,930
ユーザーに警告したり、ページ上の何かを変更したい。

915
00:55:43,930 --> 00:55:49,830
何が起きようとしていないと、ブラウザは、続行するには、この要求を待機するつもりはないされている

916
00:55:49,830 --> 00:55:53,480
前に降りてきて、この行を打つ。

917
00:55:53,480 --> 00:55:55,900
これは非同期の部分です。

918
00:55:55,900 --> 00:55:58,400
それは、このリクエストを行い、作業が終了するたびに "、と言うために起こっている

919
00:55:58,400 --> 00:56:03,080
"戻ってくると私は成功の中に呼び出すことがあなたに言ったことを、その関数を呼び出します。"

920
00:56:03,080 --> 00:56:07,300
それは我々が事前に​​全株式をダウンロードするだけではないことを意味します。

921
00:56:07,300 --> 00:56:10,300
我々は、要求を行うと戻ってくるために何かを待つ必要がある。

922
00:56:10,300 --> 00:56:13,330
前に、我々は単に、ブートストラップを言うことができることを意味します

923
00:56:13,330 --> 00:56:15,580
"ここは私がオートコンプリートにあなたが欲しいもののリストです。"

924
00:56:15,580 --> 00:56:18,950
我々が知らないので、私たちはもはやもうそれを行うことはできません

925
00:56:18,950 --> 00:56:21,780
我々は上に実際にオートコンプリートをしたいか。

926
00:56:21,780 --> 00:56:25,190
幸いにも、ブートストラップは、それらがあそこにスマートな男ですので、これを考えた

927
00:56:25,190 --> 00:56:30,160
そして、彼らは実際に私たちは、この先行入力プラグインをロードする別の方法を与えた。

928
00:56:30,160 --> 00:56:35,630
前に、このソースプロパティの値は、上のオートコンプリートの事のちょうどこの大きさの配列であった。

929
00:56:35,630 --> 00:56:39,580
>> 今すぐソースプロパティは、実際には関数であり、

930
00:56:39,580 --> 00:56:44,580
そしてこの関数の目的は、上のオートコンプリートに物事が何であるかを把握することです。

931
00:56:44,580 --> 00:56:48,730
それは、アウトを把握するために起こっている方法は、Yahoo!ファイナンスに尋ねるために起こっている

932
00:56:48,730 --> 00:56:51,750
オートコンプリートに最高のものは何ですか。

933
00:56:51,750 --> 00:56:54,500
私は非常によく似たAJAXリクエストを作ろうと思ってこれを行うに。

934
00:56:54,500 --> 00:56:59,010
私はsuggest.phpでこのページを要求するつもりです。

935
00:56:59,010 --> 00:57:01,360
私はまだ記号に沿って送信したい。

936
00:57:01,360 --> 00:57:05,570
そして今、私の成功は、ブートストラップ·マニュアルには私に言った

937
00:57:05,570 --> 00:57:09,130
そのためには、物事のそのリストを移入する

938
00:57:09,130 --> 00:57:14,370
私が行うために必要なすべてのコールバック関数になりましたこの配列を渡しています。

939
00:57:14,370 --> 00:57:15,660
しかし、少しお待ちください。

940
00:57:15,660 --> 00:57:20,240
これは配列であることになっているとAJAXはテキストを私に返送された場合、

941
00:57:20,240 --> 00:57:22,720
どのようにそれは可能ですか？

942
00:57:22,720 --> 00:57:27,910
これは、JSONと呼ばれるデータを交換するための新しい方法を紹介します。

943
00:57:27,910 --> 00:57:33,000
この場合、私たちは、単なるテキストの単純な文字列を返送していない。

944
00:57:33,000 --> 00:57:37,670
今、私たちは、株式銘柄のこのような複雑なリストを扱っています。

945
00:57:37,670 --> 00:57:41,730
これらの株式銘柄は、会社の名前や現在の価格のようなものを含めることができます。

946
00:57:41,730 --> 00:57:47,550
ちょうどあらゆる予測可能な方法でフォーマットされていない大きな長い文字列を使用して

947
00:57:47,550 --> 00:57:51,970
私には、Yahooのサーバーからこのデータを取得するための最良の方法であることを行っていない

948
00:57:51,970 --> 00:57:54,540
私は簡単に理解できる方法で。

949
00:57:54,540 --> 00:58:01,280
JSONは、我々はJavaScriptで連想配列を作成する方法を活用して技術です。

950
00:58:01,280 --> 00:58:04,510
これは、JavaScriptの連想配列のようにたくさん見える

951
00:58:04,510 --> 00:58:06,600
それがあるため、実際には、それは。

952
00:58:06,600 --> 00:58:09,710
JSONは、JavaScript Object Notationの略です。

953
00:58:09,710 --> 00:58:15,020
これは、基本的に前後にデータを転送するためのフォーマットに合意です。

954
00:58:15,020 --> 00:58:18,280
ここでは、このJSONオブジェクトかこのJSON連想配列

955
00:58:18,280 --> 00:58:21,010
私のコースについてのいくつかのデータを送信しています。

956
00:58:21,010 --> 00:58:25,110
>> この配列のキーは、CS50の値を持って当然のようなものです

957
00:58:25,110 --> 00:58:29,140
上下ここで我々は、私は配列である値を持つことができることを確認することができます。

958
00:58:29,140 --> 00:58:32,730
私は、文字列を解析するようなことを行うために持っているとカンマを見ていない

959
00:58:32,730 --> 00:58:35,330
そのような途方もないことをやる。

960
00:58:35,330 --> 00:58:38,820
これは、このJSON形式で宣言されているため、

961
00:58:38,820 --> 00:58:43,510
JavaScriptとjQueryは既に文字列を変換する機能を持っている

962
00:58:43,510 --> 00:58:48,140
実際のJavaScriptの連想配列にこのJSONのように見える

963
00:58:48,140 --> 00:58:50,440
我々は、で動作すること。

964
00:58:50,440 --> 00:58:56,660
それをすることは、もはやこのファイルは、suggest.phpないことを言ってのと同じくらい簡単です

965
00:58:56,660 --> 00:58:59,040
、単にテキストの文字列を私に返送

966
00:58:59,040 --> 00:59:01,950
私はそれが戻ってJSONを私に送信することになるだろう知っている。

967
00:59:01,950 --> 00:59:06,760
それは、そのJSONはJavaScriptの連想配列に変換することができることを意味します。

968
00:59:06,760 --> 00:59:10,830
それで、jQueryの、私はあなたが私のためにそれをしたいと思います。

969
00:59:10,830 --> 00:59:13,990
ここでは、この応答パラメータを意味し、

970
00:59:13,990 --> 00:59:16,070
これはもはや単なる文字列ではありません。

971
00:59:16,070 --> 00:59:19,860
我々は、ここでいくつかのJSONを来るjQueryを伝えているので、

972
00:59:19,860 --> 00:59:22,950
jQueryが言うのに十分スマートであることを行っている、 "あなたは、JSONをしたいですか？"

973
00:59:22,950 --> 00:59:26,890
"私は、あなたのための連想配列に変換するつもりです。"

974
00:59:26,890 --> 00:59:32,100
我々はquote4.jsを持ったら実際に[ネットワーク]タブを見てみましょう。

975
00:59:32,100 --> 00:59:35,400
私たちは、これを変更し、ページをリロードします。

976
00:59:37,150 --> 00:59:41,250
今、私は再びインタイプするつもりです。

977
00:59:41,250 --> 00:59:45,600
私は、suggest.phpにカップルのリクエストを作ったが、今では、この応答した

978
00:59:45,600 --> 00:59:48,670
単なる文字列ではなく、それはJSONです。

979
00:59:48,670 --> 00:59:52,580
だから私が言って開き波括弧を持って、 "ここに連想配列が来る。"

980
00:59:52,580 --> 00:59:56,830
>> この連想配列の最初にして唯一のキーはシンボルと呼ばれ、

981
00:59:56,830 --> 01:00:00,240
その後ここでは関係のシンボルのすべての配列です

982
01:00:00,240 --> 01:00:04,820
その巨大なリストから、Yahoo!ファイナンスから今来ていない。

983
01:00:06,110 --> 01:00:10,630
それは私が単にこのオートコンプリートのプラグインを読み込むことができる方法です

984
01:00:10,630 --> 01:00:14,280
既に所定のローカルファイルから来ていないいくつかのデータを

985
01:00:14,280 --> 01:00:17,490
何か他のものから。

986
01:00:17,490 --> 01:00:21,160
それは、私たちが実際にJSONPと呼ばれる技術を利用できることが判明

987
01:00:21,160 --> 01:00:27,420
パディング付きまたはJSON、それはこのsuggest.php中間業者を排除するでしょう。

988
01:00:27,420 --> 01:00:34,010
しかし、代わりにそれを行うのではなく、私はこれがさらにどのように改善できるかを見てみましょう。

989
01:00:34,010 --> 01:00:36,040
私はストラップの先行入力を本当に好きだ。本当にうれしいです。

990
01:00:36,040 --> 01:00:39,570
しかし、我々には、JavaScriptが得意取得していると我々は同じ種類ではこの自分たちでやってみたい

991
01:00:39,570 --> 01:00:43,870
多分、このプラグインが何をして何ができるかを見てみましょう。

992
01:00:43,870 --> 01:00:46,500
その先行入力のものを使用しないのはもはやみましょう、

993
01:00:46,500 --> 01:00:50,550
と推奨銘柄のこのリスト自身にしようとしてみましょう。

994
01:00:50,550 --> 01:00:53,790
ここquote6.phpで我々は同じようにオフを開始するつもりだ。

995
01:00:53,790 --> 01:00:58,050
毎回誰かの種類は何か、我々は、AJAXリクエストを作りたい。

996
01:00:58,050 --> 01:01:01,590
これは私たちのオリジナルのCS50ファイナンスインスタントに似ています。

997
01:01:01,590 --> 01:01:05,020
むしろquote.phpへの要求を作成するのではなく、

998
01:01:05,020 --> 01:01:08,530
我々は今、このsuggest.phpを以前と同じファイルへのリクエストを作っている、

999
01:01:08,530 --> 01:01:12,460
これは、ちょうどYahoo!ファイナンスからデータを取得しようとしている。

1000
01:01:12,460 --> 01:01:19,480
>> 、再び、我々はまだJSONを期待しているが、現在は先行入力が私たちのためにこれをやっていないので

1001
01:01:19,480 --> 01:01:24,850
我々はまた、現在のテキストボックスの中にある値に沿って送信する必要があります。

1002
01:01:24,850 --> 01:01:28,120
今、私たちは、Yahoo!ファイナンスを求めるために知って

1003
01:01:28,120 --> 01:01:34,160
そして、今ここで我々は要求が完了すると、実行したい機能です。

1004
01:01:34,160 --> 01:01:36,520
私たちは私たちのためにリストを作るためのプラグインを持っていない、

1005
01:01:36,520 --> 01:01:40,630
私たちが実際に候補のリストを構築しようとしているので、ここどこだ。

1006
01:01:40,630 --> 01:01:44,850
そのためには、多くのPHPでのように私達は、HTMLのこれらの大きな文字列を連結

1007
01:01:44,850 --> 01:01:48,170
それから私達はそれらを印刷し、我々はJavaScriptでまったく同じことを行うことができます。

1008
01:01:48,170 --> 01:01:51,850
まず、提案と呼ばれるこの文字列をオフに開始するつもりだ

1009
01:01:51,850 --> 01:01:54,590
そしてこの文字列は、単にいくつかのHTMLが含まれているだろう。

1010
01:01:54,590 --> 01:01:58,320
、我々は、それが物事のリストになりたいので、このリストタグとオフを開始するつもりだ

1011
01:01:58,320 --> 01:02:03,340
そして、今、私たちは私たちに戻されたすべてのシンボルを反復処理するつもりです。

1012
01:02:03,340 --> 01:02:06,500
覚えておいて、私たちは、dataTypeを言ってきたので、： 'json'には、これは文字列ではありません。

1013
01:02:06,500 --> 01:02:09,500
これは、すでに私たちのための配列です。それは本当にクールだ。

1014
01:02:09,500 --> 01:02:13,790
我々は、単に "私は、あなたがリスト要素を追加したい"と言うことができる

1015
01:02:13,790 --> 01:02:16,000
我々はその側面の要素の中にそれを置くことにしましょう​​、

1016
01:02:16,000 --> 01:02:19,030
我々はそれを我々はそれが何であるかを知っているので、提案のクラスを与えるでしょう、

1017
01:02:19,030 --> 01:02:23,880
そして今ここで我々はYahoo!ファイナンスから戻ってきたという象徴です。

1018
01:02:23,880 --> 01:02:27,230
>> かつて我々は、我々は戻って得てきたシンボルの各々のための要素を作成しました

1019
01:02:27,230 --> 01:02:30,100
我々は、単にリストを閉鎖したいと思います。

1020
01:02:30,100 --> 01:02:33,040
だから今の提案は、この小さなHTMLフラグメントを表す

1021
01:02:33,040 --> 01:02:37,860
そのページに置くときには、我々が探しているもののリストになるだろう。

1022
01:02:37,860 --> 01:02:41,070
今、実際にそのページに載せてみましょう。

1023
01:02:41,070 --> 01:02:46,390
私は実際には別の空のdivを作成したと私はそれを提案のIDが与えられたことを行うには。

1024
01:02:46,390 --> 01:02:52,520
我々は、在庫データの価格を表示していましたdivの内容を設定するのと同じよう

1025
01:02:52,520 --> 01:02:58,600
今のところ、この文字列が設定されている値にこのdivの内容を設定したい

1026
01:02:58,600 --> 01:03:00,290
どのこれらの記号が含まれています。

1027
01:03:00,290 --> 01:03:07,650
このHTMLメソッドを使用して、この提案の変数は、この文字列は、HTML形式の文字列です。

1028
01:03:07,650 --> 01:03:13,490
私はあなたがそのHTMLを取得し、提案と呼ばれるdivの中にそれを載せていきたいと思います。

1029
01:03:13,490 --> 01:03:15,680
我々は、ちょうど今のDOMに何かを付加しました。

1030
01:03:15,680 --> 01:03:20,360
我々は今、ページ上に表示できることをDOMにいくつかの新しい要素を追加しました。

1031
01:03:20,360 --> 01:03:22,540
これはどのようなものか見てみましょう。

1032
01:03:22,540 --> 01:03:29,110
我々はquote6にロードし、今我々は戻ってくる場合は、

1033
01:03:29,110 --> 01:03:34,480
今私はAAPLを入力して起動したときに、私たちはもはやそのストラップオートコンプリートを、持っていない

1034
01:03:34,480 --> 01:03:38,470
しかし、我々は今我々が自分自身を作ったこのリストを持っています。

1035
01:03:38,470 --> 01:03:43,230
これは、例えば、ブートストラップ先行入力より少し醜いです

1036
01:03:43,230 --> 01:03:45,580
しかしそれは、私たちはもう一つのことを行うことができません。

1037
01:03:45,580 --> 01:03:48,660
我々はそのストラップのプラグインを見ていたとき、

1038
01:03:48,660 --> 01:03:52,590
我々は自動補完すると、オートコンプリートのいずれかの値がAAPLとされた。

1039
01:03:52,590 --> 01:03:54,820
それはとても便利ではないかもしれません。

1040
01:03:54,820 --> 01:03:59,100
ユーザーとして、私はすぐに株式銘柄のすべてを認識しない場合があります。

1041
01:03:59,100 --> 01:04:02,370
同社の実際の名前は何私はおそらく認識しやすいよです。

1042
01:04:02,370 --> 01:04:05,310
だから、本当に参考になる場合ではなく、AAPLを言っていないであろう

1043
01:04:05,310 --> 01:04:07,970
これは、Apple Incのような何かを言った

1044
01:04:07,970 --> 01:04:12,240
我々は、この私たち自身を転がしてきたので、私たちは本当に簡単にそれを行うことができます。

1045
01:04:12,240 --> 01:04:17,630
のはとてもquote7、ここで我々の最後の引用ファイルを開くしよう。

1046
01:04:17,630 --> 01:04:23,200
>> 同じこと。私はただ単にシンボルよりも多く、私たちに戻ります別のPHPファイルを作成しました。

1047
01:04:23,200 --> 01:04:25,550
また、会社の名前を私達にお返しします。

1048
01:04:25,550 --> 01:04:28,150
そして私たちは同じことをやっている。我々は、AJAXリクエストを作っている。

1049
01:04:28,150 --> 01:04:32,370
リクエストが完了したら、我々はここで、この関数を実行しようとしている、

1050
01:04:32,370 --> 01:04:36,520
そしてこの関数は、要素の大きな文字列を構築しようとしている。

1051
01:04:36,520 --> 01:04:39,520
しかし、ここでの違いは、これらのリストの値は、もはや単なる記号ではないということです

1052
01:04:39,520 --> 01:04:45,370
それが今では名前だ。

1053
01:04:45,370 --> 01:04:47,070
だから我々は一つの小さな問題を抱えている。

1054
01:04:47,070 --> 01:04:51,590
私達が私達のルックアップを使用する場合、私たちは何とかそれをシンボルを渡す必要があります。

1055
01:04:51,590 --> 01:04:54,950
我々は、米国Microsoft Corporationのようなルックに何かを渡すことはできません。

1056
01:04:54,950 --> 01:04:57,900
我々はそれMSFTを渡す必要があります。

1057
01:04:57,900 --> 01:05:01,640
我々はHTMLを書いているとき、私たちは素敵な組み込み型の属性の多くを持っている。

1058
01:05:01,640 --> 01:05:05,440
それhref属性またはクラスに関連付けられている場合があります。

1059
01:05:05,440 --> 01:05:08,230
しかし、私たちが本当に今必要なのは、これらのリンクのそれぞれのためのものです

1060
01:05:08,230 --> 01:05:11,120
それに関連付けられた銘柄記号を持っている。

1061
01:05:11,120 --> 01:05:14,240
は組み込みのHTML属性銘柄記号の、はありません

1062
01:05:14,240 --> 01:05:21,010
幸いにも、HTML5は、私たちがやりたいように私たち自身の属性を作成することができます。

1063
01:05:21,010 --> 01:05:24,620
データシンボルを言って、私は、新しい属性を導入しました

1064
01:05:24,620 --> 01:05:29,350
名前は私がだけのために作られた、と私はこのデータを使って、それを前置きので、これは大丈夫です。

1065
01:05:29,350 --> 01:05:34,270
現在在庫からそこのシンボル内に保存するつもりです。

1066
01:05:34,270 --> 01:05:39,590
何それが意味することは、我々は会社の名前の値を表示しているにもかかわらず、ということである

1067
01:05:39,590 --> 01:05:43,380
私たちのオートコンプリートの内部は、我々はまだ記号を覚えている

1068
01:05:43,380 --> 01:05:47,110
それは、それぞれの会社に関連付けられています。

1069
01:05:47,110 --> 01:05:50,350
我々がやっている方法は、この要素自体の内部にある。

1070
01:05:50,350 --> 01:05:52,930
だから我々はもう一つの変更を加える必要があることを意味します。

1071
01:05:52,930 --> 01:05:57,090
我々は今それをクリックすると、私たちは実際にシンボル属性を活用する必要があり

1072
01:05:57,090 --> 01:06:00,220
ただ、その値よりもむしろ。

1073
01:06:00,220 --> 01:06:05,010
私たちがバックアップしている場合、我々は、提案にイベントハンドラをアタッチします。

1074
01:06:05,010 --> 01:06:09,280
これらの候補の1つが今クリックされるたびに、私は何かをしたい。

1075
01:06:09,280 --> 01:06:13,160
私は何をしたいと、その入力ボックスの値を変更することです。

1076
01:06:13,160 --> 01:06:16,100
今私はこの同じval関数を設定したい。

1077
01:06:16,100 --> 01:06:21,060
>> したがって、任意の引数を指定せずにこのval関数はテキストボックスに既に何あなたに戻り、

1078
01:06:21,060 --> 01:06:27,070
あなたはそれを文字列を与える場合、それはその文字列を引数に取り、テキストボックスにそれを置くために起こっている。

1079
01:06:27,070 --> 01:06:28,980
私は、同じ方法で、そのテキストボックスを選択しています。

1080
01:06:28,980 --> 01:06:31,230
それの名前は、フォームの引用の内部シンボルです。

1081
01:06:31,230 --> 01:06:37,540
今、私はそれを属性データシンボルの値を送っている。

1082
01:06:37,540 --> 01:06:41,560
ここでこの事は、この$（this）を新しく追加されました。

1083
01:06:41,560 --> 01:06:46,850
これは何を意味するとクリックされた要素です。

1084
01:06:46,850 --> 01:06:50,880
私たちは、クリックイベントをアタッチしていないことをここに見ることができる

1085
01:06:50,880 --> 01:06:54,690
個別の提案のクラスと各要素に。

1086
01:06:54,690 --> 01:06:57,140
むしろ、我々はこの少し違う近づいている。

1087
01:06:57,140 --> 01:07:01,700
代わりに、私たちはいつでも、この提案のdivのanythingの内側、と言っている

1088
01:07:01,700 --> 01:07:04,080
これは覚えておいて、そのリストのためだけのコンテナーです

1089
01:07:04,080 --> 01:07:10,150
このdivの内側に何かがクリックされ、それが提案のクラスを持っている場合は、

1090
01:07:10,150 --> 01:07:13,000
私はこのイベントが発生する。

1091
01:07:13,000 --> 01:07:17,490
基本的にこれは、私たちにできることは何を意味するかは、我々はこの同じイベントハンドラを再利用できることです

1092
01:07:17,490 --> 01:07:20,000
リスト内のすべてのもののために。

1093
01:07:20,000 --> 01:07:22,080
だから我々は最初の要素ごとに1つのイベントハンドラを持っている必要はありません

1094
01:07:22,080 --> 01:07:24,550
2番目の要素と別のイベントハンドラ。

1095
01:07:24,550 --> 01:07:29,880
我々はその代わりに "私は、リスト内のすべてのものに適用する同じイベントハンドラを望んでいる"、と言うことができます

1096
01:07:29,880 --> 01:07:34,420
しかし、我々は何とかしてクリックされた要素を知る必要があります。

1097
01:07:34,420 --> 01:07:38,450
これは、 "this"キーワードはまさにそれを表しています。

1098
01:07:38,450 --> 01:07:42,360
これはただのユーザーによってクリックされたオブジェクトです。

1099
01:07:42,360 --> 01:07:47,680
私はちょうど第三のリンクをクリックした場合、これは、その第三のリンクの要素を表します

1100
01:07:47,680 --> 01:07:51,670
これは、私がその属性、データシンボルを、得ることができることを意味

1101
01:07:51,670 --> 01:07:57,760
私たちが知っている私はちょうどクリックした会社に関連付けられているシンボルが含まれている必要があります。

1102
01:07:57,760 --> 01:08:04,550
私達は私達の財政のページにジャンプする場合は、

1103
01:08:04,550 --> 01:08:08,580
我々は、今一度、私はMSFTのようなものを入力して起動していることがわかります

1104
01:08:08,580 --> 01:08:11,220
我々は、もはや単なる銘柄記号を取得していないしている、

1105
01:08:11,220 --> 01:08:13,720
我々は今、実際の会社名を取得している。

1106
01:08:13,720 --> 01:08:20,410
しかし、私はこれらの企業の一つをクリックしたときに、

1107
01:08:20,410 --> 01:08:25,180
私たちは、実際に会社の名前でテキストボックスを移入していないことがわかります

1108
01:08:25,180 --> 01:08:29,850
しかし、それらのデータ属性の内部に格納されていたものは何でも。

1109
01:08:29,850 --> 01:08:32,880
そして私は実際にそれを右クリックすることによって、これらの要素のいずれかを点検すれば

1110
01:08:32,880 --> 01:08:36,200
とエレメント検査]をクリック、我々は実際にこれがどのように見えるかを確認することができます。

1111
01:08:36,200 --> 01:08:40,290
>> これは我々がforループの内部に作成したものであることを覚えている

1112
01:08:40,290 --> 01:08:42,649
我々はHTMLの該当文字列を作成したとき。

1113
01:08:42,649 --> 01:08:47,870
我々は、このデータシンボルが大きいMSFT、の値を持っていることをここに見ることができます。

1114
01:08:47,870 --> 01:08:49,189
それは我々が期待していたものだ。

1115
01:08:49,189 --> 01:08:53,170
そのシンボルだとそれは我々が使用するために必要がある値を得た方法です

1116
01:08:53,170 --> 01:08:56,140
このテキストボックスの内部。

1117
01:08:56,140 --> 01:08:58,850
それは退屈なものだので、それは十分な見積もりフォーム用です。

1118
01:08:58,850 --> 01:09:02,990
弊社のポートフォリオページへのいくつかの簡単な拡張機能を作ってみましょう。

1119
01:09:02,990 --> 01:09:08,109
あなたはしばらくの間、CS50 Financeを使用したことがあれば、株式を大量に購入し、販売を開始

1120
01:09:08,109 --> 01:09:11,300
最終的には、この表には、かなり大きくなるであろう

1121
01:09:11,300 --> 01:09:13,850
そしてあなたはもちろんの株式相場をするつもりだ。

1122
01:09:13,850 --> 01:09:20,350
テーブルは、本当に大きいですと、それはその上に検索しようとするユーザーのために有用である可能性があります。

1123
01:09:20,350 --> 01:09:23,290
私はディズニーのような何かを入力して起動した場合、検索ボックスの内側

1124
01:09:23,290 --> 01:09:26,359
と私のミッキーマウスの在庫を探して、私たちは、テーブルが現在フィルタリングされていることがわかります

1125
01:09:26,359 --> 01:09:28,189
私はちょうどインチ入力した内容に基づいて、

1126
01:09:28,189 --> 01:09:31,640
この機能は、超複雑に見えますが、それは本当に、本当に簡単です

1127
01:09:31,640 --> 01:09:33,859
jQueryとJavaScriptを使用した。

1128
01:09:33,859 --> 01:09:39,189
このportfolio.phpファイルはportfolio.jsというJavaScriptファイルが含まれています。

1129
01:09:39,189 --> 01:09:41,130
のは、その見てみましょう。

1130
01:09:41,130 --> 01:09:44,890
だからHTML、JS、ポートフォリオ。

1131
01:09:44,890 --> 01:09:49,210
私たちはテーブルの上に探索することをやっているところです。

1132
01:09:49,210 --> 01:09:52,750
私が最初にすべきことは、そのテキストボックスにイベントハンドラをアタッチしている

1133
01:09:52,750 --> 01:09:55,760
我々は我々のフィルタリング機能が発動することがわかっているので、

1134
01:09:55,760 --> 01:09:59,800
たびに、ユーザーが押したものを我々は、検索ボタンのための時間を持っていないので。

1135
01:09:59,800 --> 01:10:03,000
我々が最初にやるべきことは、ユーザーが探しているものが把握されている

1136
01:10:03,000 --> 01:10:04,780
私たちは前と同じように。

1137
01:10:04,780 --> 01:10:11,320
このキーワードは、ユーザーが対話している現在の要素を参照します。

1138
01:10:11,320 --> 01:10:14,070
>> ユーザーが検索ボックスと対話するので、

1139
01:10:14,070 --> 01:10:17,020
$これは、検索ボックスを表します

1140
01:10:17,020 --> 01:10:21,820
そうthis.valは、ユーザーが現在入力している検索ボックスの内側にあるものを与えてくれる。

1141
01:10:22,810 --> 01:10:27,320
だから、今私たちが何をしたいのか、我々はすべての行を繰り返し処理されるようにする

1142
01:10:27,320 --> 01:10:29,240
私たちのテーブルの内側。

1143
01:10:29,240 --> 01:10:35,630
私たちのテーブルのすべての行を選択するには、私は、そのテーブル、テーブルのポートフォリオのIDを与えた

1144
01:10:35,630 --> 01:10:39,060
と各行は、TR要素で表されます

1145
01:10:39,060 --> 01:10:42,080
ので、このセレクタは、私に大きな配列を返すために起こっている

1146
01:10:42,080 --> 01:10:44,370
私のテーブルのすべての行の。

1147
01:10:44,370 --> 01:10:47,010
今、私は、その配列を繰り返し処理したいと思います。

1148
01:10:47,010 --> 01:10:52,390
私は、forループを使用することもできますが、jQueryには、実際に私たちと呼ばれる素晴らしい機能提供する "各"を

1149
01:10:52,390 --> 01:10:55,220
何がそれぞれが行うことは、それぞれが1つの引数を取りますです

1150
01:10:55,220 --> 01:10:57,090
その引数は、関数です。

1151
01:10:57,090 --> 01:11:02,760
それは何をやろうとしているのは、それがこのリストの内のすべての要素にその関数を適用するために起こっているのです。

1152
01:11:02,760 --> 01:11:05,550
この関数は、Eの引数を一つ取る

1153
01:11:05,550 --> 01:11:10,090
そして、この関数が実行されたときに、この電子は、最初の行で置き換えることになるだろう

1154
01:11:10,090 --> 01:11:12,070
次に2番目の行、次に第三行。

1155
01:11:12,070 --> 01:11:15,150
この方法では、これはforループを実行するのと同じ事です

1156
01:11:15,150 --> 01:11:21,360
その後ループのためのあなたのインデックス内側に基づいて現在の要素を考え出す。

1157
01:11:21,360 --> 01:11:24,750
各繰り返しで、テーブル内のこれらの要素のそれぞれについて、

1158
01:11:24,750 --> 01:11:30,560
行のセルの内部のテキストを - 私は、要素のテキストかどうかを確認したい - 

1159
01:11:30,560 --> 01:11:33,130
私が探しているものと一致します。

1160
01:11:33,130 --> 01:11:36,390
このコマンドの大きな長い文字列は、私はそんなことができる方法です。

1161
01:11:36,390 --> 01:11:40,900
まず、もう一度、これは今を指します - それは新しい関数の内部だから - 

1162
01:11:40,900 --> 01:11:45,020
これは、テーブルの現在の行になります。

1163
01:11:45,020 --> 01:11:47,340
私は、テーブル内の現在の行を取りたい

1164
01:11:47,340 --> 01:11:49,950
と私は、そのすべての子を取得したい。

1165
01:11:49,950 --> 01:11:51,940
覚えておいて、DOMは、階層ツリーです

1166
01:11:51,940 --> 01:11:54,200
これは、要素が子供の数を持っていることを意味します。

1167
01:11:54,200 --> 01:12:00,180
>> 関数が戻って私にすべての要素の配列を返すために起こっているこれ。子供

1168
01:12:00,180 --> 01:12:03,240
それは、表の行、この場合には、の子です。

1169
01:12:03,240 --> 01:12:07,150
これは、単に行の内部の細胞である。

1170
01:12:07,150 --> 01:12:09,230
私は最初のセルの上に検索したい。

1171
01:12:09,230 --> 01:12:13,090
この最初の関数は、私にその配列の最初の要素を与えると言います。

1172
01:12:13,090 --> 01:12:17,070
次に、テキスト関数は、そのセルの内側に正確に何が私を得ると言う

1173
01:12:17,070 --> 01:12:19,530
私はそのテキストの上を検索したいので。

1174
01:12:19,530 --> 01:12:21,040
最後に、それを小文字に変換してみましょう、

1175
01:12:21,040 --> 01:12:23,940
ので、我々は、テキスト大文字小文字を区別しない問合せを行うことができます。

1176
01:12:23,940 --> 01:12:29,990
最後に、我々はテーブルの内側に、その文字列は、我々が探している文字列が含まれているかどうかを確認したい。

1177
01:12:29,990 --> 01:12:32,980
JavaScriptでindexOf関数は、まさにそれを行います。

1178
01:12:32,980 --> 01:12:37,060
それは、この文字列が別の文字列が含まれているかどうかを教えてくれる。

1179
01:12:37,060 --> 01:12:40,150
それは、セルが、私が探しているものが含まれていることは事実だ場合

1180
01:12:40,150 --> 01:12:42,140
その後、私はそれが示されていることを確認したい。

1181
01:12:42,140 --> 01:12:45,330
showメソッドは、 "要素を表示します"、と言うだろう

1182
01:12:45,330 --> 01:12:50,350
これが事実でないなら、それは私が含まれていないことを探しているものは何でも意味

1183
01:12:50,350 --> 01:12:53,550
その行内の、と私は非表示にしたいので、ユーザーからのものです。

1184
01:12:53,550 --> 01:12:59,240
それは、もはや我々は、テーブル全体を見ないその素敵なフィルタリング効果を実現しています。

1185
01:12:59,240 --> 01:13:01,480
あなたは同様にこのティッカーを作成する方法に興味があるなら、

1186
01:13:01,480 --> 01:13:04,180
我々は、オンラインソースを投稿します。しかし、それは本当に簡単です。

1187
01:13:04,180 --> 01:13:09,860
jQueryは、これらのアニメーションと操作CSSプロパティのための素晴らしいメソッドを持っています。

1188
01:13:09,860 --> 01:13:11,020
だから、それは私のためにそれだ。

1189
01:13:11,020 --> 01:13:15,560
>> 次に何が待ち受けている？あなたが数日のうちにわかるように、最終的なプロジェクトの提案が原因です。

1190
01:13:15,560 --> 01:13:17,730
最終的なプロジェクトの提案は、あなたにいくつか質問をします

1191
01:13:17,730 --> 01:13:19,420
しかし、それらの間で3つのマイルストーンになります - 

1192
01:13:19,420 --> 01:13:22,840
1 "良い"マイルストーン、どちらがいいマイルストーン、およびベスト1。

1193
01:13:22,840 --> 01:13:25,870
本当にあなたたちはあなたの期待を設定するのに役立ちますているアイデア

1194
01:13:25,870 --> 01:13:29,160
最低限必要なのは、あなたの最終的なプロジェクトの出力と幸せになりますように

1195
01:13:29,160 --> 01:13:32,060
そしてそれは、これまであなたが懸念している "良好"となります。

1196
01:13:32,060 --> 01:13:34,540
しかし、その後、あなたがより良いものに少しだけに到達するために得ることの利益のために

1197
01:13:34,540 --> 01:13:37,680
または最高の何か、我々はまた、同様にそれに向かってあなたをプッシュするの並べ替えがあります。

1198
01:13:37,680 --> 01:13:40,660
CS50ハック-thonのは、一方で、数週間のうちにある。

1199
01:13:40,660 --> 01:13:44,340
通常、我々は、金利の抽選基礎ベースでこれを行うには、

1200
01:13:44,340 --> 01:13:47,680
しかし、オッズは、我々はハーバードスクエアからのシャトルバスで、私たちの数百を取るよアール

1201
01:13:47,680 --> 01:13:51,540
ダウンマイクロソフトは適切に "おたく"と呼ばれる美しい施設がありケンドール·スクエアへ - 

1202
01:13:51,540 --> 01:13:53,830
ニューイングランド研究開発センター。

1203
01:13:53,830 --> 01:13:56,380
我々は、我々はいくつかの食べ物があるでしょう8時頃つきますよ。

1204
01:13:56,380 --> 01:13:58,160
1午前の周り我々はいくつかのより多くの食糧を持っているでしょう。

1205
01:13:58,160 --> 01:14:02,150
5の周りには、あなたはまだ目を覚ましている場合我々はIHOPまたはあなたがキャンパスに戻って取る上に向かうだろうよ。

1206
01:14:02,150 --> 01:14:04,380
目的は、最終的なプロジェクトに飛び込むことがある

1207
01:14:04,380 --> 01:14:06,190
クラスメートやスタッフの横に。

1208
01:14:06,190 --> 01:14:08,280
それから数日後CS50フェアですが、

1209
01:14:08,280 --> 01:14:10,990
本当にあなたたちはあなたの仕事を紹介するための機会であることが意味されている

1210
01:14:10,990 --> 01:14:12,700
学期と成果

1211
01:14:12,700 --> 01:14:15,610
お互いに肩をこすり、誰が何をしたかの感覚を取得中。

1212
01:14:15,610 --> 01:14:17,850
そうは言っても、トミーへとヨセフに多くのおかげで、

1213
01:14:17,850 --> 01:14:19,960
そして我々は月曜日にお会いしましょう​​。

1214
01:14:19,960 --> 01:14:24,070
 [拍手]