[Powered by Google Translate] [9ウィークは、続く] [デビッド·J·マラン - ハーバード大学] [これはCS50です。 -  CS50.TV] 

これはCS50です。これは9週目の終わりです。どうもありがとうございます。 最後に。ウィーク9。思い付いたぞ。 今日、我々は、Webプログラミングについての私達の会話を続ける 最終的なプロジェクトに向かって目では、Webベースの何かをしなければならないので 最終的なプロジェクトのためにしかしなぜなら最終的なプロジェクトのためにどちらかまたはCS50後 これは確かに現代のソフトウェアが起こっている方向である。 そして、まだそれは実際に簡単なことではありません。 実際には、何が最も難しいものの一つは、デザインの側面である。 

例えば、設計によって、私たちは、実際にユーザーインターフェースを得ることを意味 またはユーザーエクスペリエンス右。 あえて私は - 私たちは最近の問題セットから知っている あなたのいくつかは、ソフトウェアのいくつかの作品についてのあなたの不満を放映したとき あなたを激怒またはハードウェア、キャンパスまたはオフにするかどうか -  そこに多くのサイトがあり、ハードウェアの多くは、そこにあり その種のは吸う。 しかし、現実にはまだ使いやすいものを作ることはそれにもかかわらず強力であるということです 非常に困難な課題である。 だから、今日のために私はここに私を参加するヨセフとトミーに尋ね 我々が会話を持つことができるように、両方に関する設計 とどのような思考プロセスの種類があなたの頭を通過し始めるべき あなたの最終的なプロジェクトを設計するとき、あなたの未来の努力。 そして、トミーの助けを借りて我々は、実装の詳細の一部を見てみましょう。 どのように紙の上に、またはあなたの心の中でいくつかのビジョンを持つことができます 次に、プログラムによって実行できること 技術や技法のいくつかを使用することによって私達はちょうど、話を始めました つまりJavaScriptとAJAX、非同期JavaScriptすなわち、さらに新しい何か。 あなたがユーザーインターフェースをより動的にすべてを作成することができます サーバから徐々に、より多くのデータをフェッチすることによって。 だから我々は、今日だけでなく、それらの断片の一部が表示されます。 余談ですが、あなたはコンピュータサイエンスに集中に興味を持っている場合 または正午にそれは今週の金曜日知っている、コンピュータサイエンスのminoring マクスウェルドーキン221にピザのイベントがあるでしょう どこでコンピュータサイエンスについてもう少し学ぶことができます。 ドアの外にあなたの方法今日のあなたはハーバード大学でCSへの非公式ガイドを拾うことができるでしょう。 私たちは、腰の高さで外のゴミ箱にそれを置くことにしましょう ので、これをつかむとCSについてもう少し詳しく知りたい場合は、 それは0週目にあったようにそれはあなたのためにそこになるでしょう。 また、午後1時15分で今週の金曜日CS50昼食のための私達への参加をご希望される場合は、 cs50.net/lunchへ向かいます。 さらに騒ぎがなければ、私はあなたの仲間のジョセフ·オングを教え与える。 こんにちは。 [拍手] ありがとうございます。 私はデザインについて学んだ最初の時間はCS179と呼ばれるここにクラスにいた。 

当時の教授は、私たちに別の教授についての話をした 誰がホテルに行って、蛇口を使用していた。 誰もが左に何2ノブを教え、右行うことができますか？ [学生]暖かい。暖かい。>>グッド。 通常は右、何を期待？ 蛇口を使用した後この教授はシャワーを浴びたいと、彼はこれを使用するに進みます。 彼は左を考えると右サイドは右、温·冷のためにあるのですか？ しかし、誰もがこれらが実際に何を教えますか？ どんな手？ [聞き取れない生徒の応答] >> 1つの提案はありますか？ [聞き取れない生徒の応答] >>温度？ だから、そのうちの一つは、温度やその他のコントロールを制御する？ >> [生徒]水圧。 水圧。グッド。 この教授は、これに入ってくると、彼らはホット＆コールド制御していることを考え 彼はホット、すべての方法のためだと思って正しいものを、オン 彼は暖かいシャワーを浴びたいから。 さて、これらは本当に一致していないので、彼は、この非常に楽しみではない経験を積む 冷たいシャワーにいるかのような、我々はすべてそれがどんな感じか知っています。 これは設計上の欠陥の例です。 それは蛇口からの彼の期待値であることによって、私は何を意味するか シャワーから出てきたものと一致しませんでした、 それは彼にとって不幸なの一種です。 だから、これは実際の生活の中で起こる設計上の欠陥の例です。 しかし、我々は同様に他のもののすべての種類を参照してください。 我々は、おそらくMBTAのシステムのファンじゃない。 これは、言うロンドンで実際に地下鉄のシステムであり、 "このボタンを使用していないです。" なぜそれがそこにあってもですか？なぜ、私たちも気にしない？ 私が子供の頃、家の中でハイテクに精通した一つである、だったとき コンピュータがクラッシュするたびに、私の母は、私に来る 私は、この画面を見せていると何が起こったのか私に尋ねる。 

でも、私はこれが何を意味するのか分からない。 [笑い]何？ [笑い] 時には私たちは、ソフトウェア開発者のように感じるだけでトローリングたちです。 ユーザーは、我々は、似ているように、 "何が起きているのでしょうか誰か教えてください。" これは、すべてのデザインの問題に帰着する。 デザインは、我々が見ることができるように、美学について純粋ではない それは、物事がどのように見えるかについてではない。 我々は、これはポップアップこっちに少しは実際にはかなり良さそうに見えていることはここを参照してください。 それはバックグラウンドでドロップシャドウを持っている、それは起こっている国境半径を持っています。 それはかなりのようなものだ。 それは非常にユーザーフレンドリーではありませんので、それは本当によく設計されていない。 来るそのポップアップあの小さな、本当に私には一切の情報を与えるものではありません 何が起こっているかについては、それがユーザとして私に何かを教えてくれない そのエラーから回復する方法について。 私たちはデザインではないという事について考えてほしい。 まず最初に、それは美学ではありません。 また、不要な機能のトンを使用してアプリケーションを詰めていない。 あなたがタイ料理のレストランなら、おそらく同時に歯医者になりたくない。 とFacebookの質問に、多くの人々がそれを使用していないことを そしてそれは彼らが構築していたものの核心実際にはなかった。 そしてそれはそんなに考えるように物事の量が素晴らしいではありません あなたのアプリケーションが、品質に入れていることを とどのようにあなたがより良いというユーザーエクスペリエンスを作っている によって実際にあなたがすでに持っているものを改良。 

一言で言えば、デザインは、私たちが作成すべきかを教えてくれる。 たとえば、私たちは私たちが物事を検索できるように何かを構築している場合、 Googleのように、例えば、我々は方法で物事を行うべきである ユーザーは、彼らが望むものを得るためにクリックをたくさん取る必要があるような、 あるいは、我々はGoogleインスタントやオートコンプリートとは、例えば、方法でそれを行う必要があります それは私達が私達の結果をより速く得ることができます？ トミーが実際にそれを構築する、あなたが表示されますようにエンジニアリングは、含まれます。 デザインの種類がたくさんあり​​ます。 たとえば、何かを展開するために何かを構築している場合 ずっと電気やその多くの技術が存在しない第三世界の国で、 あなたが構築しているものを設計しなければならない 簡単にそこにいる人々へのアクセスを提供する方法で。 しかし、他の設計上の決定の種類があるかもしれないもの または、このようなものに関与している可能性？ うん。私は手を参照してください。 [聞き取れない生徒の応答] >>権。その通りです。アクセシビリティは1つの事である。 多くの人が "何私のユーザーはどうですか？"について考えていない どちらスペクトルの両極端のような。 私は考えていないよという障害を持っている可能性のあるユーザーを持っている と私はちょうど一般的なユーザーのためにデザインを考えています。 インターネットは、今日では誰もがアクセス可能な と私は、同様にそれらの人々のために設計されるべきである。 あなたは、他にどのような設計上の決定の種類を作るのでしょうか？ はい。 >> [生徒]コスト。 コスト。非常に良い。 我々は我々のデザイン決定の基礎かもしれないもう一つはコストです。 我々はビジネスのなら、あなたは、製作のために多大なコストがかかりません何かを構築したい しかし、特に高コストで販売することができますか、または私達にいくつかの利益を得ることができます。 

これらは設計のすべての異なる種類がありますが、我々はインターネット上で何かを構築しているとき または我々は、おそらく今まで構築することはそれほどかかりません何かを構築しているときに、 インターネット·アプリケーションのように - あなたはそれに多くの資本をスローする必要はありません 実際に動作するものを作るために -  私たちはもっと心配しているのは、ユーザー·エクスペリエンスです。 我々は、このユーザ中心設計を呼び出します。 本質的にどのようなユーザー中心の設計が含まれ、ユーザーの立場に身を置いている。 私が作っている何のために誰かがサインアップした場合、 彼らは明らかに、目的を踏まえた上で私の特定のアプリケーションに来ている タスクと彼らは完成させたい。 そして、あなたの仕事は、彼らがそのタスクを完了するためだけではありません しかし、彼らは直感的、効率的な方法で、そのタスクを完了するため、 そして、いくつかの人はあそこに言ったように、アクセスできます。 効率性とは何を意味するのでしょうか？ 効率がどのように迅速に私のユーザーは私のインターフェイス、指定されたタスクを完了することを意味しています。 彼らは他の1つの場所から取得することがクリックたくさんの時間がかかりますか？ それは面倒ですか？彼らは、反復的なタスクの多くを実行する必要がありますか？ 我々は可能な限り効率的にそのプロセスを作りたい ので、彼らは物事のそれらの種類を行う必要はありません。 ユーザーが自分のインタフェースをルックアップする場合直観としては、それは、例えば、 彼らは場所から場所を取得することは簡単ですか？ 彼らは私のインターフェースでクリックしなければならないかを把握することは容易である ために彼らのために彼らが達成したい目標やタスクを達成するには？ 

1人があそこに言ったようにそして最後に、アクセシビリティは非常に重要です。 [男性話]これは、ビジョンのようなもののためのアクセシビリティーに来る、 私は実際には盲目である誰かのために何かを設計するにはどうすればよいような？ ああ。全く見ることができない人のために、私たちはスクリーンリーダーと呼ばれるものを持っています。 あなたは何をなすべきことはあなたが方法であなたのウェブサイトを構築するべきである つまり、例えば、我々が呼んでいるもの、特定の技術 -  今ではたくさんのことがあります。 私は、JAWSと呼ばれるスクリーンリーダーがあると思います。 これらの多くのものは、我々は地域のルールと呼んでいるものに依存している ページ上に存在するかをユーザに読み出しするために。 見ることができない人々のために、あなたは確認する必要があり、これらのスクリーンリーダー 実際にページ上のコンテンツを拾うことができますし、実際にあなたのユーザを表示することができ、 あなたが見ることができない場合は、少なくともあなたはまだ、ページ上のコンテンツを理解することができます。 うん。オーケー。 十分に良いデザインの話。悪いデザインについてお話しましょう​​。 これらはあなたがやってはいけないものです。 誰かはCraigslistと彼らの経験について教えてください。 とどのような彼らが考えることは、このデザインについてとても素晴らしいではありませんか？ はい。 >> [学生]私はあまりにも多くの単語を1つのエリアにあると思う。 あまりにも多くの単語、右か？完全に圧倒。 あなたがこのページに来て、あなたは、ここには物事の全体の束をもって迎えられている それも、あなたには関係ないかもしれません。 たとえば、この文字で始まらない一つの状態に住んでいます。 Let 'sは、あなたがテキサスか何かに住んでいると言う。 

あなたは、あなたが見れる場所に到達するためにページの下のすべての方法をスクロールする必要があります。 私はボストンから来たので、私はマサチューセッツで見てみましょう。マサチューセッツ州はどこですか？ ああ、それは右ここにあるのです。ああ、それはボストンです。オーケー。 ボストンを見てみましょう。 [笑い] かなり圧倒的な、右か？ あそこに気まずいもの。 [笑い] Let 'sは、私が生きるためにどこかを探していると言う。 どのように多くの人々は実際にはCraigslistの使用している？あなたのトン。 これを見ますが、これを見てみましょうための非常に悪い方法があります。 imgとPICの違いは何ですか？誰も教えてもらえますか？ 実際に違いはありません。 彼らはまったく同じことを意味しますが、彼らはいくつかの理由で彼らのために異なったラベルがあります。 私が持っている画像をクリックすると、何ページにも起こりません。 私が実際に起こることを何かのために再度検索をクリックする必要があります。 何がそこに行うことができる優れた設計上の決定になるのでしょうか？ 私はそのフィルタをクリックするならば、私はおそらくその特定のアクションでフィルタリングする または、特定のカテゴリ。 代わりに、再度検索を押す必要がなくなりだから、私はただ自動的にフィルタリングを行うことができます 彼らは瞬時にそれを行うGoogleスタイルの一種。 [マラン]しかし、我々は彼らがこれまで物理的に提出されなければならない見てきたように形成していない 少なくとも、またはボタンをクリックし、Enterキーを押して？ あなたはこれまでのところ、それらを見てきたように、実際にはそれらのことを行うには、Submitをクリックする必要があります。 

しかしトミーは第二にあなたが表示されますので、実際にあなたのための方法があります あなたはその事をクリックしたときに、それが自動的に送信できるように 私たちは何AJAXリクエストを呼び出し、戻ってきたデータを取得し、瞬時に結果をフィルタリングします。 このインタフェースで間違っているもののトンがあります。 [マラン]あなたはケンブリッジを検索できますか？ あなたはケンブリッジ気にどこに若干変則的な何かがここにあります そしてまだあなたはウェストフォード、スプリングヒル、ウェストニュートンなどを取得している。 おそらく理想的ではありません。 >>おそらく理想的ではありません。 どのように私は、この特定のページにユーザーの体験をより良いものにすることができるかもしれない？ はい。 >> [生徒]の指示。 オーケー。感覚がどんなものなのかの指示？ たとえば、[学生]でも、Craigslistは何であるかわからない初めてのユーザーのための事 またはあなたが行うことになっているのかわからない。 右。だから、Craigslistはこのページ上にあるかを説明することが重要です。 我々は、実際にこのページのために実際に何であるかをユーザに知らせることができます。 私はちょうどこれを訪れるならば、私は場所の全体の束を参照してください。私も彼らが何を意味するか分からない。 しかし、もっと重要なのは、ちょうどこのインターフェイスを見て、 私は特定のコミュニティを見つけるために物事のトンを下にスクロールしなければならなかった覚えている 私は実際にこれで気にかけている。 私は何ができる高速な方法は何ですか？はい。 [学生]それらを東、西の領域に分ける。オーケー。>> 私が判断速く私を助けることができる多くのカテゴリに分けることができる その特定の場所に到達する方法を説明します。 [学生]ドロップダウンリストを入れてください。 >>は右。オーケー。 我々は物事の固定セットを持っているので、私は、ドロップダウンメニューを使用することができます そして我々は、ドロップダウンメニューでそれらを示すことができた。 その方法は、それが画面上にあまりスペースを取りません。 しかし、それよりも優れ、私たちは何ができるのでしょうか？ はい。あなたは再びそれを>> [聞こえない学生の応答] >>と言うことはできますか？ >> [学生] [検索]ボックス。 うん、検索ボックス。それは素晴らしいことだ。 我々はスライドを振り返ってみると私たちが実際に出来ることは、検索ボックスです。 オートコンプリート。あなたが知っている結果を検索するための非常に簡単な方法は、セットに含まれている。 私はBOを入力して起動する場合は、ちょうど私にそれらのBOの内側を持っているすべての結果を示す。 そのように私は非常に簡単に私が行きたい特定のものを見つけることができます 代わりに、この非常に大きなリストをスクロールする必要がなくなります。 

これらは、誰かがCraigslistのを実装していることを実際に手の届く果実あらゆる種類のアール 実際に彼らの特定のユーザーの多くのより良いウェブサイト上の経験をするために行うことができます。 オーケー。十分に悪いサイトの話。 フェイスブックの話をしてみましょう。 Facebookが出てきて、特にFacebookの写真、時 全く同じことを行うことができ、一度に他のサービスがたくさんあり​​ました。 彼らは、アルバムに写真を整理できた。 あなたは何ができると、あなたにもセットにそれらを整理する可能性がある。 あなたは、日付でそれらを整理できた。あなたはすべてのこれらの特定の物事を行うことができます。 しかし、誰もがFacebookの写真がリリースされた時点で爆発させたか知っていますか？ はい。 >> [生徒]タグ。 >>タグ。その通りです。 我々は、CS50のバンダナを持つ私たちの犬のマスコットであるこっちミロを持っています。 あなたは、私たちは途中でこのタグ機能を持っていることがわかります。 そして、何は、ユーザビリティの観点から非常に興味深いFacebookの写真を作った それは実際にこれを経由して人々が自分の写真に彼らの友人を巻き込むことができていることです。 Facebookには、それらのウェブサイトは、特に社会であるので、 それは社会の雰囲気のこの種の構築についてです。 それはより多くの写真の経験を改善 彼らは実際に、これらの人々の間の接続です "と言って開始する可能性があるため、 これらはあなたが実際に気に人々についての写真です。 " その一部は、ソートナルシシズムです。 人々はそのような写真や物事でタグ付けされるのが好きです。 それは良い人間の特質であるとは限らないことですが、 同時にそれは、良いデザインの決定に基づいている 人々が実際にこのようなことを気にしているため。 だからそれはFacebookの写真です。 

しかし、ここではより一般的にはFacebookをお話ししましょう​​。 私は、ここで多くの人々がFacebookについて意見を持っていると確信しています 良いデザインの決定と悪いデザインの決定の両方。 それでは、ベントまたは幸せになりましょう。 さあ。私はあなたのすべてがFacebookを使って知っている。 誰かが言っても何か悪いことか、それについて言って何か良いものを持っている必要がある。はい。 [学生]は、ニュースフィードでは、私は本当に気にしないものが多数あります。 ニュースフィードは、あなたが気にしないかもしれない多くのものを示しています。 あなたは2または3年も会っていないFacebookの友人を持っている そしてあなたはそれらのニュースの結果があなたのニュースフィードにポップアップ表示 そしてあなたが本当にそれを気にしないでください。 Facebookは、実際に、これはより良くする努力をしてきた そして、彼らは実際に後半のようにニュースフィードの先頭に関連する結果をプッシュしようとしてきました ので、実際にあなたやあなたの親しい友人に関連している友人によって物事を参照してください。 何か他には？はい。 [聞き取れない生徒の応答] >>あなたは再びそれを言うことはできますか？ [学生]広告は比較的控えめです。どんな意味で？>> [聞き取れない生徒の応答]彼らはバナーのように、画面上の光を持っていない。 オーケー。それは良いことだ。 あなたは90年代からインターネットを覚えていれば -  >> [マラン]私はそこにあった。 >>彼はそこにあった。 [笑い] あなたがキラキラ点滅GIFを背景に、物事を覚えているかもしれない 物事のジオシティーズスタイルの一種。 それは本当に良いデザインの例ではありません それは本当に内容から気が散るからだ。 その背景としてアニメーションGIFを使用していたエール大学アートサイト そしてあなたは、ページ上で何かを読み取ることができませんでした しかし、私は誰かが実際に彼らに話をし、今ではそれは少し違うと思います。 [マラン]それは今ではずっといい。あなたが見ることができるように>>それは、今ではずっといい。 >> [マラン]そうそう。 ただ、単に偉大な - うん。オーケー。 

その一部はまた、非常にミニマルと非常に理解しやすいことによるとあなたのページを作っている 非常に論理的な方法でページフローで物事ので、お互いの邪魔になりません。 他のものは何ソートがFacebookについて良いかFacebookについて悪いですか？ ちょうどここにデザインの会話を持ってみましょう。 ああ。どこで？うん。 [学生]は、新しいタイムライン·システムでは、自分の過去についての人のプロフィールを検索することができます。 、タイムラインOohの。 それはあなた茎友達をすることができますので、タイムラインには、素晴らしいことだ バック彼らが高校にいたとき。 それはあなたが多くの高速コンテンツをフィルタすることができますので、タイムラインは良いですが、 それはあなたがそうでなければ見つけることがあなたに本当に長い時間がかかったであろうものを見つけることができます ちょうど間に合うように戻って行くような、アップ、アップ、アップ、アップ、アップ、上にスクロールダウンします。 しかし、その後、ユーザーエクスペリエンスの観点からその方法の欠点のようなものも用意されている。 それは何であるかもしれない？ P-Rで始まるビッグ言葉。 >> [生徒]プライバシー。 >>プライバシー、右か？ プライバシーは巨大なユーザーエクスペリエンスの問題です。 これは私が今ではFacebookについての最も嫌いなものの一つです。 [笑い] [マラン]のように私は今やる。 ダビデはこれが実際に起こった昨日まで気づかなかった。 だから今、彼は私が彼にチャットするたびに、私は彼が私を無視されている知っていることを知っている。 [マラン]不器用な部分、私は実際に彼を無視していましたが、 と私は彼が私が彼を無視していた知っていた知らなかった。 [笑い] プライバシーは巨大な問題です。 ここで誰もがFacebookのプライバシーについての悪いかもしれないものを教えてもらえますか 彼らがこのようなことを行うという事実のほかに？ それは、Facebookのプライバシーに関してやることは特にハードは何ですか？ その種は、主要な問題である。 はい。 >> [生徒]特定の人から、あなたの写真を非表示にします。 右。正確には、特定の人から写真を非表示にします。 彼らはあなたが写真のプライバシーを切り替えることができます右上にあるこの小さな、小さなボタンがあります。 自分のプライバシーオプションが非常にメニューの異なる種類の間で変化しています。 

彼らは最近、それについてたくさんよくなってきたが、それはケースのように使用 あなたが写真を見てからのお友達を防止したいときはいつでも、 あなたは、のようにされて、非常に複雑な5ステッププロセスを通過しなければならないでしょう 私は、このリンクをクリックさせ、今では、私はもう一度クリックしてみましょう、私はもう一度クリックしてみましょう 私は人々が私の写真を見ることができないかを指定できます。 そのFacebookの部分に特に良くはありません ユーザーエクスペリエンスに関するそんなに実際には、彼らに自由を与えているので 人々が見ることができるかを制御する。 我々は、このユーザーコントロールと自由を呼び出す。 あなたのユーザーが効率的かつ直感的な方法でそれを行うせていない場合は、 その後、あなたのユーザーエクスペリエンスはまったく本当に素晴らしいではありません。  君たちは、Facebookについては何も言うことはしませんか？ どのように私はこれをオフにするには？ [オング]あなたはこれをオフにすることはできませんし、それがFacebookの一部に巨大なユーザビリティ上の欠陥です。 この機能は - 私は実際に昨日、それを覗き込んだ -  それはあなたがそれを行うことができないのどちらかだか、それはどこかに、非常に、非常に深く埋められています Facebookの凹部に私はすべてでこの機能を無効にする方法を見つけ出すことができないためです。 [マラン]しかし、時には、これらの決定は、明白ではありません あなたたちは、様々なCS50アプリケーション上で私たちに有益な多くのフィードバックを与えているので、 コー​​スで使用しているとウェブサイト。 我々は、これらの要望やご提案のすべてを実装していない。 

の部分は、それが時間の関数であるように多くの要求を得るためのものであり、 時には私たちはちょうど、同じように意識的に決断を下す "提案していただき、ありがとうございますが、私たちはそうは思わない。" それでは、どのように実際にユーザーが何かをやるべきだと思う場合は、何をすべきかを決めるのですか あなたは必ずしもない場合でも？ これは、実際にユーザーが言うことを聞いて微妙なバランスだ あなたが言う場所と、実際には、行のいくつかの並べ替えを持って "我々は、これらのユーザーは言うことをするつもりはない。" 特に、私はかなりよく、これまでの合計を求めヘンリー·フォードによる引用があったと思います。 "私は彼らが望んで人を求めていた場合、彼らは速い馬を望んでいたと述べていただろう。" 誰もがその引用が本当に何を意味するのか離れていじめるのソートができますか？ それは、ユーザーが自分の欲しいものを知っているだけではない それはより多くのことだ -  [学生]彼らは何が可能かわかりません。 一部では、彼らは何ができるかわからない。 もう少しその離れていじめる。あなたはそれによって何を意味するのですか？ [聞き取れない生徒の応答] それは良いことだ。私は我々がここで言おうとしていると思うと、人々は、彼らが望むものを知っているということです。 彼らは速い馬が欲しい。 彼らが本当に欲しいのは、速く移動する能力である しかし、彼らは本当にそれを達成するためにそれによって媒体を知りません。 あなたのユーザーに来て、ユーザが何かを教えたときに そして、彼らはあなたを教えて、 "我々は、これらの機能とこれらの機能とこれらの機能を使いたい" あなたは必ずしもについて考える必要はありません、 "私が先に行ってみよう "と、彼らが言うことを明示的に実装する" しかし、あなたが考えるようにしたいと、 "私はそれからのアイデアはどのようなものを得ることができますか？" 彼らは実際に何をしたいのですか？ 

そこから何ができるかは、それらの要求を満たす何かをデザインである 必ずしもそうではないが、ユーザーはそれが満たされることを想定している方法で。 だから、非常に実質ベースで最終的なプロジェクトのような何かのために、 それはより良いものを作ることになると便利なヒューリスティックは、何ですか デザイナーは彼について、この傲慢さを持っている場合は特に あなたはソートのがベストですか知ってそれによって、あなたは、あなたのユーザからの入力を取るかもしれない しかし、あなたは実際にそのフィードバックを得ることについて、どのように行くのですか？ 最終的なプロジェクトでは、非常に具体的に、ここで何が最適な結果を生成？ 何が最適な結果を生成する - と私は2番目でこれを復習します -  開発し、テストしてから、繰り返し処理のこの処理のことです。 あなたが何かをデザインするときに私は何を試験することによって意味することは通常である あなたはそれが、のような、かなり良いことだと思う "私はそのような偉大なデザイナーです。誰もがこれを好きになるだろう。" そしてあなたはそれをそこに出して、人々はいくつかの理由でそれを本当に好きではありません。 あなたは何をしなければならないことで、人々がどのように行うことの部分を取らなければならないです そして人々は好きではないという事を見直す。 それは非常に明確なのは、プロセスのように聞こえますが、この過程は絶えず反復する あなたが既に構築されてきたものの上にあなたを助けるプロセスである 独自の設計技術を磨くだけでなく、あなたがデザインを洗練支援するだけでなく、 ので、人々は実際に彼らが以前よりお使いの製品がより一層感謝する。 

私はあなたが実際にどのような処理を実行するか、より具体的な例をあげてみたいと思います。 製品の最後の例のようなものとして、カヤックを見てみましょう。 それが出てきたカヤックは非常に、非常に人気がありました。 なぜ誰もが推測することはできますか？ あなたはそれを使用している場合は、このことについて好きなものの種類は何ですか またはあなたが好きではないものの種類は何ですか？ はい。 >> [聞こえない学生の応答] >>オーケー。 それの一部だと、ユーザーはより広大で​​あるクエリを持ってさせて頂いております あなたはあなたの開始日を選択する必要があり "、のように非常に限定的なものより "と、あなたの終了日を選択する必要があります。" 実際には、それはあなたがそれについて柔軟に対応することができます、それはあなたにはその範囲内のフライトのすべてを提供します。 何か他には？ [学生]彼らは価格の手数料が含まれます。 彼らは価格の手数料が含まれていない。 税金や物事は、実際に左上にその価格にまっすぐ行く ので、あなたは、あなたが実際に240ドルのフライトのために払っていると考えることにだまされていない ときにそれは本当に330ドルだ。 何か他には？はい。 [聞き取れない生徒の応答] 私は、彼らが実際にあなたがそれをやらせるかどうかはよく知りません。 私は間違っているかもしれない。 あなたが特定のフィルタに重きを置きたいと思うなら、それは面白いかもしれませんね 彼らはトップにそのフィルタに関連する結果をプッシュする。 しかし、誰もがこの左側の何がそんなに特別なのか教えてください？ どのように伝統的にこの前のインターネットサービス上の飛行をルックアップしましたか？ 

はい。 >> [聞こえない学生の応答] >>あなたがそれを言うことができます -  [学生]各航空会社。 >>うん。各航空会社は、独自のウェブサイトを持っています。 これは、物事を統合します。と？ [学生]あなたが残しているかを正確に時間を知っています。 あなたが残しているかを正確に知っている時、 しかし、特定のフィルタに関連していた。 私はカヤックをプルアップしてみましょう。 ああ、神様、ポップアップ。悪いユーザーエクスペリエンス。 私は、このスライダを動かしたときはどうなりますか？ [学生]自動更新されます。 >> [オング]自動更新されます。 ことは非常に重要な何かです。 この前、あなたは飛行をルックアップしたいときはいつでも、 あなたは、あなたの入力位置は、出力場所を押し検索しなければならなかった それはそれを処理し、あなたの結果を表しているだろう。 あなたのクエリを変更したい場合は、Backを2回押す必要があるでしょう ゼロから新しいクエリに入力してから、もう一度上それを上にやると。 このような何かについての素晴らしいところは、それが途中で非常に[理解不能]のものを使用しています。 あなたはこのような何かをするたびに、それは要求をオフに撃つ そしてそれはあなたにすぐにすべての結果が返されます。 即時フィードバックこの種のカヤックを乱暴に普及したものである 私はちょうど私のクエリを変更することは本当に簡単だから と、特定の範囲のまわりにあるものを把握する 行ったり来たり、行ったり来たり、行ったり来たりする必要がなくなります。 したがって、これらはあなたがあなたのウェブサイトを設計しているときに考えるようにしたいあらゆる種類のものがあります。 私のユーザーは、彼らが取り組んでいるものは何でも通過するためにどのように私はそれが非常に効率的に行うことができます そして、できるだけ早く彼らの最終的な目標に到達するには？ [マラン]以前のヨセフのポイントに必ずしも彼らが望むものを知っているユーザーについて、 君たちは今、HTMLについて知っていることに基づいて、 、あなたは、チェックボックス、ラジオボタン、セレクトメニュー、入力フィールドなどを、持っている どのようにして飛行の開始時刻をピッキングの概念を実装するだろうか？ 

あなたはそれらの様々なUIのメカニズムのどちらを使うのでしょうか？ あなただけの前に教えられたHTMLの量を知っている場合 そしてあなたは、入力がラジオボタン、チェックボックス、ドロップダウン、および入力ボックスを知っている あなたの自然な選択は、日付を選択するために何だったでしょう？ [学生]入力。 >>入力。または多分すべての日付を持つドロップダウン、右か？ ですから、実施することができることが左側にこのような、より複雑なUIメカニズムを持つ、 あなたはスライダーでこのプロセスは、より直感的にすることができ 時間は連続しているので、人々は通常、個別のチャンクの面でそれはないと思う。 かしこまりました。最後のもの。 十ユーザビリティヒューリスティック。 我々が話し、すべてのものは、おそらく、これらのカテゴリのいずれかに該当する。 あなたのサイトがオンラインで掲示され、このリンクに行けば あなたが実際にあなたのサイトを設計する際、念頭に置いてこれらのヒューリスティックスを保つ、ができるようになります 親指のこれらのルール。 あなたのプロジェクトのために、私は自分のアプリが良く設計するために、あなたは何をすべきかを示唆している 最初のペーパープロトタイピングを行うことです。 あなたのアプリケーションを考えているときに、非常に迅速にあなたはそれが見えるように欲しいものをスケッチ そしてすべてのボックスは、ユーザーが使用するために非常に直感的な方法で配置されていることを確認してください とでもお友達にこれらのペーパープロトタイプを示し、フォーカスグループを起動します。 ただ、一緒に2〜3人を取得し、ちょうどこれらのペーパープロトタイプをタップしてもらう そして、彼らが実際に何が起こっているか理解するかどうかを確認するために、彼らに新しい画面が表示されます。 

あなたは何をしたいのは、そのタスクを動機、彼らにタスクを与えることです そしてちょうどそれらのアプリを提供し、彼らがそれを使ってみましょう。 彼らにそれを超えて指示を与えてはいけない。 あなたが実際にそれらはあなたが見ることができますようにあなたのアプリケーションと対話できるようにしたい あなたがそれらの隣に立っていなかった場合に、どのように彼らはそれを使用することになります。 そして、それは非常に重要です。 人々は特定の物事の周りになっているようにあなたの洞察力の多くを与えること 私はそれらをするつもりはなかったような方法で？ 彼らは画面上の特定のUIメカニズムを使用している ハックの一種であるように？ 彼らはそれをそのように行うためには私が意図していなかった。 そして、一度あなたがそれで終わって、何をすべきかをしたいですか？ デザイン岩、右か？ あなたは何をしたいのは、あなたが何度も繰り返しやるから、そのプロセスを開発したいです。 だから、あなたがそれを開発してきたら、友人にそれを示して、それをテストする とそして前方に、開発、テスト、開発、テスト、反復する。 デザインは非常にこの意味での反復的なプロセスです。 あなたは実際にそれについてのことを実現する、何かを構築しなければならない あなたは前に実現し、戻って、そこから改善しなかったこと。 さて、開発の部分で、それはトミーが休憩後をお見せしようとしているものだ とどのようにオートコンプリートのような何かを実装することができるかもしれない かなり簡単な方法インチ [マラン]トミーはその後、ここで質問を設定したように。 最古のウェブサイトの多くの - とするとき、ヨセフは、1990年代スタイルのウェブサイトを言った それは、開始時刻と終了時刻を選択したい場合の実装だった 率直に言って、今日一日で戻って、さらにいくつかのウェブサイトで、 あなたがこれを行う方法は、ドロップダウンから[hour]を選ぶです ドロップダウンから数分を選んで、多分あなたは、午前、午後を選択 次にその3回以上行う。 それで、6回のクリック、おそらくいくつかのスクロールで あなたのユーザーが実際にこの意味での日付および/または時間範囲のいくつかの種類を提供することができます。 

だから間違いなく次善の、まだこれまで我々は表現力を見てきました のいずれかの言語で私たちは何かセクシーを行うことを見てきました 開始時間と終了時間のこのスライダーのような。 しかし、我々はスクラッチについて話したときに0週に戻って考えれば、 あまりにちょうど特定の事をしたウィジェットがありませんでした。 あなたは本当にちょうどループや条件などのように、これらの基礎を持っていた。 だから、HTMLの細目とは無関係に、現在、非常に抽象的な思考の一種で、 本当にこの開始時間と終了時間のスライダーのようなもので何が起こっているのか？ 私はマウスを移動して、私は左側にその小さなニンジンのシンボルをクリックすると および実装できるようにしたい、それが何であるか、プログラム的に、ドラッグを開始 それを実現するには？ どのような質問、あなたが求めることができるようにするにはどのようなブール式をしたいですか？ 何が本当に起こっているの？サミー？ [学生]カーソルの位置はどこにありますか？グッド。>>カーソルの位置はどこですか？ これは、我々がスクラッチに戻って表現するために必要なものだった それは、場所、あるいは色等に基づいてされたかどうか。 あなたはイベントと呼ばれるこれらの事のすべてがあった月曜日に今までので、簡単に思い出すかもしれない Webの世界というように、onClickとonKeyPressイベントのようなものがあり とonKeyUpとonmouseoverとonmouseout。 だから我々は、Web上で当然のことと取ってきたとしても、これらのものと認識 あなたは見当がつかない場合でも、FacebookやGmailのようなサイトと 講義の中であってもそれのようなものは何もないので、あなたはおそらくことを実装する方法 または問題セット7、これらの正確な同じ基礎であることを実現し、 HTTPおよびパラメータを持つとGETとPOST、 我々はこれまで見てきたことを基本的なHTMLの入力を持つ とプログラムによるメカニズムとその瞬間にトミーのは約導入すること あなたは0週目にやったように自分を表現するために始めることができます で、非常に直感的にドラッグ＆ドロップする。 

そう言ったことを、トミーMacWilliamおよびWeb用の私たちのためにいくつかの新しいパズルのピースを持つ。 かしこまりました。私の名前はトミーだと私には、JavaScriptの話をするつもりだ。 ただ免責事項：私はJavaScriptは最高のプログラミング言語であるという意見です 全体世界全体インチ そこに私に反対する人々がたくさんあり​​ますが、それだけで驚くべきことだ。 あなたが別のクラスまたはいくつかの他の言語のためにCを書く必要があるのなら一度、C言語に戻って、 それはあなたインチ行き詰まるする必要があるすべての低レベルの詳細には本当にイライラする ですから、Cを書くことですどのよ​​うに迷惑を悲しく感じている場合、 ちょうど戻って、いくつかのJavaScriptを記述します。それは涅槃です。 あなたの悪い日約はるかに良い感じられるでしょう。 JavaScriptの魔法の多くは、物事を操作する能力から来ている それはページ上に既に存在しています。 我々はPHPスクリプトを書いたとき、彼らは、サーバー上で実行された そして最終的にはPHPスクリプトは、おそらくいくつかのHTMLを出力していること。 そのHTMLがクライアントに送信された後、それはそれだった。 PHPは、ページにボタンを追加したい場合は、例えば、それは本当にそれを行うことはできません。 これは、全体の新しいHTMLファイルをレンダリングしていることをブラウザに送信する必要があります。 JavaScriptを使って我々は、彼らがページを開いている間に我々は物事を更新できることを知っている、 そして、このため我々は、はるかに即座にフィードバックを提供することができます それは本当に私たちのウェブサイト上でのユーザーエクスペリエンスが向上します。 JavaScriptのセレクタのだけ簡単にまとめ。 私たちは、HTMLページをダウンロードするときにことを知っている それは、DOMで表現することになるだろう。 

DOMは覚え要素がこの大規模な階層で関連しているだけで、この大きな木です。 我々は、pset 7のデータベースで働いていたとき、 我々が行う方法を知っているために必要な最初のものの一つは、データベースに対してクエリを実行しました。 、我々は、この大usersテーブルを持っており、時には我々はただ言いたい "私はいくつかの条件に一致し、これらのユーザーのいくつかをしたい。" 同様に、我々は、DOMを持っているとき、我々はそれを照会するいくつかの方法が必要になります。 我々は、私はこのようになり、すべてのボタンがほしい "というのがいくつかの方法が必要 "またはページ上のすべての画像。" そしてこれらのセレクタは、私たちはそれを行うことができます。 だから、簡単にまとめ。 ここでは、この最初のものは、これは＃提出し、選択しようとしていることは何ですか？誰も覚えていますか？ [聞き取れない生徒の応答] >>うん、その通りです。 これは、提出のIDを持っているページ上の要素を選択しようとしている。 それで、そのハッシュタグがこのセレクターは、IDで動作するように起こっていると言う。 もう一つ、この。中心について、それは何をどのように選択するのでしょうか？ うん。 >> [生徒]クラス。まさに>>。これは今のクラスで選択しようとしている。 ここでIDとクラスの違いは、IDは一意でなければなりません、一般的に どんな空間内では、上検索しています。 ですから、全体のWebページ上で検索された場合、 あなたは本当にのみ提出のこのケースではそう、その特定のIDを持つ1つの要素を持つ必要があります。 クラスでは、他の一方で、我々は同じページに2つ以上の要素を持つことができます 同じクラスを持つ。 これは、私がページの中央にいるすべてのものを選択したいと言ってのに便利かもしれない だけではなく、1事。 

そして最後に、ここでは、この最後の1つは、もう少し複雑です しかし、何これはDOMから選択するつもりですか？ [聞き取れない生徒の応答] >>これは何ですか？ [学生]タグだもの。私たちはここで2つの部分を持っている。>> 第二部は、私が入力のタグでこれらのタグを選択したいと言うことが起こっている inputタグで任意の要素はそう。 しかし、私はちょうどすべての入力を選択したくない submitボタンのようなものを入力することがなかったので して、テキストボックスのようなものを入力することができた。 だから私が言っている、これらの角カッコとともに私は、これらの要素のみを選択したい text型のものである。 どこかに私のHTMLタグで私がタイプという属性を持っている その属性の値はテキストでなければなりません。 それでは、どのようにここでは、この最初の部分はどうですか？ このセレクタの最初の単語は、私は空間とし、この入力部を持つ形式です。 それはそれの前にフォームを入れて、何をしますか？ これは、基本的に我々のクエリを制限しようとしている。 それは、我々はページ上のいくつかの入力を持っているそうであるかもしれません フォームの子孫でないこと。 これは何を行いますと、これは私だけでどこかに持っている上にinputタグが欲しいと言うだろうである フォームの一部の親要素。 それで、このように我々は、これらのより階層化されたクエリを作ることができます ので、単に与えられたセレクタに一致するすべてのものを選択する必要はありません。 私たちは、何か他の人に、そのクエリの範囲を制限する一種のことができます。 だから今我々は、ページ上の要素を選択する方法を知っていること、 AJAXについて少し説明してみましょう。 AJAXは非同期JavaScriptとXMLの略で、まだ非常に流行の頭文字をとったものです。 それはちょうどので、XMLはデータを表現するだけでいくつかの方法であることを起こる。 

最近失われた人気のようなものなので、AjaxのXは、すべての時間を使用していません。 基本的に、AJAXは私たちが行うことができますどのようなHTTPリクエストを作成している JavaScriptの文脈から。 我々は、Webブラウザにしていると我々はページをナビゲートしていると我々はリンクをクリックすると、 何私達のブラウザが何をしようとしている、我々はどのようなリンクをクリックしてHTTP要求を作ることです。 もしそうだとしたら、その後、ダビデは、言っていたようので、しかし、それは必ずしも理想的ではない 我々は常に、ユーザーが[送信]ボタンをクリックするか、リンクをクリックしなければなら HTTPリクエストを巻き込むために起こっている何が起こるを作るためにインチ だから、AJAXを使って、我々には、JavaScriptの代わりにこれらの要求を行うことができます。 ユーザーがページか何かが起こると対話するたびに、それは、意味 我々は、実際に当社のウェブサイト上でいくつかの他のPHPファイルへのプログラム要求を行うことができます または何か他のものと、そのファイルが吐き出したデータを取得します。 のはAJAXの例を見てみましょう。 これがうまくいけば、私たちの一部が使い慣れている私たちのCS50ファイナンスのページです。 我々は、このページのHTMLを見れば、我々は、私はいくつかのものを追加したことをここに見る 私はこのフォームにIDを与えてくれたそのうちの一つ。 私は、id = "フォーム引用"と言ってきました。 私はそれがDOMから選択するには、このコードを少し容易にするために起こっているという理由だけでこれをやった 私は非常に単純なクエリを作ることができるからです。 私がここでやりたいことは、私はCS50ファイナンスといくつかの問題を解決したいです。 だから我々はfinance.cs50.netに行けば、 私が見積もりを取得するたびに、私は、この見積を取得]ボタンをクリックする必要があります そして、それはまた別のページ全体に私を取り、次に見積ボタンを取得します。 私は別の引用をしたいならば、私は、[戻る]ボタンを押すと、それから、私はそれを入力する必要が 私が見積もりを取得し、私は​​、[戻る]ボタンを押してください。 これは本当に最高のユーザーエクスペリエンスではありません。 それは株価を取得するためにその遅い場合は誰が実際にサイトを使うのでしょうか？ だから我々はAJAXを使って何をしたいのか、別のページに行くのがそのステップを削除することも 結果を表示するために。 

我々が本当にのみを求めているのは、それは本当に小さな価格です そしてそれは単なるデータの本当に少量です。 だから別の全体のHTMLページを移動するための私のために必要が、ありません HTMLのまったく新しいバッチをダウンロードして、多分、いくつかのより多くの画像をダウンロード ちょうど私はその非常に単純な質問に答えるためのいくつかの他のCSSファイル この在庫コストを行うどのくらいの。 AJAXを使って我々は、これははるかに簡単にすることができます。 我々は、私がquote.jsというJavaScriptファイルにリンクしていることをここに参照してください。 実際に、そのファイルを開きましょう。そこではない。 私のすべてのJavaScriptファイルは、HTMLに置かれようとしている ので、Webブラウザはそれにアクセスできるようになります。 その後、我々は、JavaScriptのためここに別のディレクトリを持っている そして今ここにquote.jsです。 このファイルの上の方では、私は全体のページがロードされるのを待ちたいことをここに述べてい 私が何かをしようとする前に。なぜそれが必要なのですか？ それは私がここで何をするつもりです次のものが要素を探し始めていることが判明 それはいくつかのセレクタに一致します。 この要素がページにロードされる前に、このJavaScriptは今までに実行された場合、 次に私がやろうとするすべてのものは、仕事に行くのではない 私はまだそこにないものを選択しようとするつもりだ。 だから、トップアップこの行は、私はすべてがロードされるまで待ちたいと言う だから我々は、私が探している任意の要素がページ上に実際にあることを保証されている。 このドル記号は、ここで私はjQueryというライブラリを使用していることを意味します。 このjQueryライブラリは、私たちはただ見ていることこれらのセレクタを使用することができます。 引数として、この＃フォーム重引用符を渡して、$ aを言って、 いま私は、ただ見ていたことを、そのフォームを選択しています。 今、私は何とかしてメモリ内のその形の表現を持っています。 

現在、このオブジェクトでは、フォームのこの表現、 私は今で呼び出される関数を使用しています。 何この関数が何をすることは、イベントハンドラをアタッチすることが起こっているのです。 我々は耳を傾けるしようとしているイベントはsubmitイベントです。 だから、ボタンを押すか、または提出するユーザーがクリックすると入力したときに、 このイベントは発生しようとしている。 これにフックすることによって、私は今、フォームの既定の動作をオーバーライドできます。 このJavaScriptを使用しないと、フォームはどんなPHPファイルに提出する 我々はそのaction属性で使用されます。 しかし、その代わりに、私は今、待って、待って、待って、私はあなたが実際にそれを行うにはしたくない、と言っている。 私はあなたが行くといくつかのPHPファイルを送信しようとする前に、これが起こることを望む。 今私はどのように過ごしたいですか？ この時点で私は、株式の価格が何であるかにロードするためにどうにかしてAJAXを使用したいと思います。 私が知っている必要がある最初の事は、ユーザーが上向きになっているものを株式です。 私は別のセレクタを使用するつもりだこれを行うに。 これは、我々は前に見た第3のセレクタです。 これは、私はフォームの引用のIDを使用してこのフォーム要素をオフに開始したいと言っています。 その後、どこかにそのフォームの中にinput要素が存在しなければならない それは、シンボルの名前を持っています。 我々は、HTMLを振り返ってみると、我々は入力していたことを見た[名前=記号]。 ことは、これはユーザーがタイピングされていることをそのテキストボックスを選択しようとしていることを意味します。 それはうれしいです。我々は、テキストボックスを持っています。 今、私たちはその中にあるものを知ることだけが必要です。 、我々はここに、このメソッドを呼び出すことができることをこの。valを行うには、 そしてこれは私があなたが持っているものをテキストボックスを知って言っている。 私はあなたがそれは、そのテキストボックスに入力されたユーザであるかを教えたいと思います。 今、私たちは、ユーザが入力したものは何でもインチに等しいシンボルと呼ばれる文字列が それはうれしいです。私達は私達の要求を行うようになり、その文字列を使用することができます。 これは、ここに新しい機能であり、この$、 私たちはもはや要素を選択しようとしていないしている場合を除き、 我々は、jQueryによって我々に提供している別の関数を呼び出すことになるだろう。 このAJAX関数は実際には、このHTTP要求を行うために何が起こっているのです。 だから我々はそれをいくつかのことを伝えなければなりません。 私は要求がどこへ行きたいか我々は、この関数を指示する必要があります最初のものです。 どこかに私のプロジェクトで私はquote.phpと呼ばれるHTMLディレクトリ内でこのファイルを持っている。 私は、localhost / quote.phpに行けば、私はこのファイルにアクセスすることができます、我々は、ちょうどこのように、見た。 

私はJavaScriptはそのページへのリクエストを作りたい。 どのようなタイプの要求の今？ フォームはそのメソッド= "POST"属性を持っているその前に、我々は、鋸 そして、それはそれは、POSTリクエストを行うために起こっていることを意味 そのためには、URLではなく、GETリクエストには何も入れに行くのではない、 我々だけで、Webブラウザでページにアクセスした場合、そのちょうど例えば、解雇されるだろう。 今、私たちは、私は、HTTP POST要求を作りたいと言っている quote.phpにあるページへ。 我々は、フォームを送信したとき、私たちはそのフォームの内側のinput要素にアクセスすることができました覚えている その$ _POST変数を持つ。 これまでのところ、物語の中で、我々はまだ実際には、任意のデータに沿って送信していない。 我々は、AJAXリクエストを作っているだけ言ってきた そしてここでは、我々が作っている要求の種類です。 今、私たちは、実際にページにいくつかのデータを送信する必要があります。 我々はデータと呼ばれるこのプロパティを使用することができますこれを行うに。 このプロパティの値は、実際には連想配列です。 この理由は、それは、私たちはデータのちょうど1個以上のものを送ることができますです。 我々はここで、これらの他の中括弧の中にネストされたこれらの中括弧を持っている理由です。 これらの連想配列のキーは同じことになるだろうしている それらの名前は、フォーム要素の属性として。 私は記号のキーに沿って送信した場合ことを意味し、 私のPHPページは$ _POST [シンボル]を使用してこのデータにアクセスできることを意味します 我々は、フォームを送信したときに前にやったように。 そして今、実際のデータは、我々は、送信したい この連想配列の値の内側になるだろう。 

我々は、変数と呼ばれるシンボルでこのテキストを格納 それで我々は今に沿って記号のキーを送っている とユーザーに打鍵した何の価値 今、私たちは、私たちのPHPファイルが実行された、このHTTPリクエストを作りました それだけでこの要求を行ったクライアントにすぐに戻っていくつかのデータを送信するために起こっている。 今、私たちは、サーバーが私たちに言った何に応答する必要があります。 我々は成功と呼ばれるここでは、この最後のプロパティを持っていることを行うには。 この成功のキーの値は実際には関数であることを行っている、 そしてこれは、JavaScriptで行うことができます本当にクールなものの一つです。 だけでなく、あなたが、連想配列の値の内部としてint型または配列を持つことができます 我々はまた、機能を持たせることができる。 だから、成功と言って、これが私のキーです。 コロンは、値が来るここで言う そして今、この値は実際には関数である。 だから我々はこの関数をそれ自体の名前を付ける必要はありません。 我々は、ちょうどこれはいくつかの関数であることを行っていると言うことができます。それは1つの引数を取ることになるだろう。 この関数の引数があることを行っている どんなサーバは要求から私たちを送り返す。 私たちのブラウザが要求を出したときと同様に、サーバは何かお返しを送信 、ブラウザはそれを表示します 我々だけで要求を行ったAJAXのコンテキストでは、サーバーは、背中に何かを送信 そして今我々は、その文字列として表現さ​​れています。 その文字列で、私はちょうどページにそれを表示したいと思います。 私は最後の1セレクタを持っているつもりで利用しています。 私はID​​の価格を持つ要素を選択したい。 これは、ちょうど私がページに作成した空のdivです そして私は、サーバーが私たちを送り返すものは何でもであることがそのdivの内容を設定したい。 私は実際にquote.phpビットを変更しました。 

むしろrenderを呼び出して、いくつかのページをレンダリングするのではなく、 quote.phpは、単に文字列として株式の値をプリントアウトしようとしている。 あなたが実際にページを訪問したかのように、あなただけの、小さな文字列を参照してくださいと 株価が何であろうの。 我々はここで行う必要が最後に一つだけ、この関数がfalseを返していることを確認しています。 これが何を言うことはつまり、私は、イベントハンドラの内部にいたら そのイベント·ハンドラは、trueを返すのではなく、falseを返します それは私が火にオリジナルのイベントを望んでいないことを意味します。 この場合において、我々は、任意のJavaScriptがあるとしなかった場合、我々は、フォームを送信 私たちのウェブブラウザは、 "私は、一緒にそのデータを送信するつもりです"、と言うために起こっている そして、彼らは別のページに送信しようとしている。 我々は今、AJAXを使用しているので、ユーザーを別のページに送信する必要はありません。 我々は、ちょうどこれと同じページ上に動的に結果を表示しようとしている。 我々は、本当に彼らがどこへ行くにしたくない、と私は、同じページに滞在したい。 だから、falseを返すことによって、我々は、フォームが私たちのためにそれをしないことを確認してください。 のは、これが実際にどのようなものかを見てみましょう。 当社の見積もりページでは同じように見えます。 我々は何が起こっているのを見ることができるので、私はここでインスペクタを上下に引っ張ってみましょう。 それが少し巨大ください。 我々は、[ネットワーク]タブを開く場合、我々はすべてのHTTP要求を見ることができる、これがあることを覚えている そのページで何が起こっている。 

シンボルのために私はAAPLで入力して見積書をクリックしてみましょう。 今、私たちは、アップルのシェアはドルのいくつかの番号を要することを見た 同じページ上に登場したが、URLが全く変化しなかった。 実際には、ここで我々だけで作ったHTTP要求です。 我々はquote.phpへのPOST要求を行った。それは理にかなっています。 これは、サーバーが私達に送り返されたものです。 それは、もはやイメージとそのようなことで、この巨大なHTML文書ん それだけでテキストの行だし、私たちはただのテキストの行を表示しました。 我々は、ヘッダーに戻って、私たちが実際にこのHTTPリクエストの内部に送信した内容が表示される場合は、 我々は、我々がシンボルとAAPLの値のキーに沿って送られたことをここに見ることができます これは、ユーザーに打鍵したものです これはいいですが、それはまだ少し迷惑なんだ。 私はまだ株価を取得するにはこのボタンをクリックする必要があります。 我々は忙しい人だと我々はボタンをクリックする時間がありません。 彼らはGoogleインスタント検索を実装したとき、Googleはさっきこれを実現しました。 あなたがタイプしていると何がGoogleインスタントのしていることはあるそれはちょうどあなたのための結果の表示を開始 ので、あなたも、検索をクリックして心配する必要はありません。 実際に、それに関連する楽しいストーリー。 Googleインスタントが出てきたら、人々は、のようだった "うわ、これは超素晴らしいです。" "これはとてもクールだ。" 時19歳だったスタンフォード大学のダウンと学生 YouTubeのインスタントと呼ばれる、このサイトを作りました。 すべてのYouTubeのインスタントは事実瞬時にYouTubeを検索されません。 だからではなく検索をYouTube.comとヒットに行くことよりも、 私はCS50のようなYouTubeのインスタント何かに入力を開始すると、 我々はそれがインターネットの接続速度が遅い上にしようとしていることをここに見ることができました これらの結果は生きて移入されます。 我々は実際に私たちのquote.jsファイルに非常に簡単な修正を行うことができますこれを行うに。 フォームが送信されたときに、今私たちは、このイベントをアタッチしている。 私たちは本当に、ユーザーはもうそのフォームを送信するようにしたくない そうするたびにユーザが押すキーは、代わりにこのイベントを発生させてみましょう。 レッツ最初のKeyUpイベントに提出するからイベントを変更することを行うには。 のではなく、提出するためのフォームを待っていることを意味し、 キーが押されるたびに、何かが起きようとしています。 それはもはや、フォーム全体にこのKeyUpイベントをアタッチする意味がありません。 私たちは本当にそれだけで検索ボックスを気遣う。 

今、我々はむしろフォーム見積もりよりも、なるようにこれを変更することができます選択するには、 フォーム引用符と（=シンボルに名前を）我々は、入力があるでしょう（=テキストを入力します）、または我々が言うことができる -  私たちが望むものは何でも。 今、私たちがしなければならない最後にひとつはあり。 我々はfalseを返すと言ったときにここに降り覚えている 我々はそのデフォルトのイベントが発生したくないと語った。 しかし、それだけで、我々は今それを無効にした場合に起こりますように 我々は何を入力するもうブラウザに表示するつもりはない それは、テキストボックスに入力のデフォルトの動作になりますので。 我々はもはやので、この戻り値はfalseを破壊してみましょうことを上書きしたいん。 我々はそれを保存し、私がAAPLの入力を開始するとすぐに、ページをリロードする あなたはここで下部の株価が自動的に完了していることがわかります。 だからここCS50ファイナンスインスタントです。 YouTubeのインスタントについて、実際に楽しい物語 その学生は、単に種類の1泊分のプロジェクトとして、それを書いたのです そして次の日、彼は、YouTubeのCEOが仕事を依頼されました。 そのような単純なあなたCS50学生だから、あなたの最終的なプロジェクトでは、YouTubeでの仕事を得ることができます。 最終的なプロジェクトのための本当にクールなアイデアですそのような何か、右か？ 我々はと統合したかったいくつかの既存の機能を持っていた。 我々は、ユーザーエクスペリエンスを少し改善 と、突然YouTubeのインスタントで何かを検索するとたくさんの方が簡単でしょう 正規YouTubeでそれを検索するよりも。 だからそれは一言で言えば、AJAXです。 

ヨセフは見せたことの例で、我々は、自動的に補完をたくさん見た そしてそれら自動的に補完し、我々は覚えておく必要はありませんので、本当に便利です -  たとえば、アップルの株価を覚えていない場合 私達はちょうどではなく、ちょうど私に言うよりも、それのAA何かを、知っている "この事のシェアは、これだけのお金がかかります" 私は一種の株式はaaで始まるか知ってみたいと思います。 我々はすでに含まれているのブートストラップ·ライブラリとうまく実際にそれを行うことができる CS50ファイナンスの内側。 JavaScriptのタグにここまで来て、先行入力までスクロールダウンしている場合、 これは、ちょうど誰かがすでに私たちのために書いた素敵なプラグインです。 そして我々は、簡単にこのように、その機能を使うことができます。 私は、ここで入力したAで始まり、いくつかの州のリストです Let 'sは、私はこれは本当にクールだと思っているという、それは私が私のページにこれを含めての時間です。 これが本当に、本当にシンプルであることが判明。 quote3.jsへこっちへジャンプしてみましょう。 私のファイルは少し異なるように見えます。 ダウンここに私のAJAXのもののすべては同じです。 私は別のページに移動しなくても、株価データをロードする。 しかし、今私はこのプラグインを使用したいと思います。 ブートストラップのドキュメントでは、私はそれを行うことができます正確にどのように偉大な例があります。 私は言いたい、 "ここは、私が上でオートコンプリートしたい入力だ" と私は、先行入力と呼ばれるこの関数をコールするつもりです そしてそれは私たちのために先行入力のもののすべてを扱うことになるだろう。 それはリストを初期化する、それが私たちのフィルタリングのすべてを行います。 それは知っている必要があります唯一の事は私達が上にオートコンプリートしているもののデータです。 だから、僕はマニュアルを読んで、例を見て、この鍵を見つけた。 私はそれをソースのキーは、このキーの値を与えた場合、 私はオートコンプリートにしたい事のちょうどいくつかの配列です。 この変数は、この他のファイルから来ました。 私はsymbols.jsを開く。 

このsymbols.jsはただの文字列を含むこれは本当に、本当に大きな配列です。 ナスダックからこれらの株式銘柄のすべての。 私は、HTML、jharvard、バーチャルホスト、globalhost、HTMLテンプレートに戻ってジャンプしたい場合 quote_form。 今quote3.jsを呼ばれていなかったので、私はここに含めているJavaScriptファイルを変更してみましょう。 今、私はquote3.jsを持っているので、私はその別のJavaScriptファイルをロードするつもりです そのストラップオートコンプリートを有するもの。 今私はブラウザに戻ったときに、ページをリロードして、私はAAの入力を開始 私のオートコンプリートがあります。そして、それは本当にそのように単純であった。 私は、 "私はオートコンプリートにしたいものですここでは、"今言ったコードの1行を持っていた そして突然、私はすべての努力の全体ではなく、たくさんの本、本当に素晴らしい機能を備えています。 あなたは、Webサイトや特に​​物事の先端側を開発しているように、 あなたは、このようなケースがたくさんある見つけるつもりだ。 そこには本当にクールなフリーのライブラリをたくさん、たくさん、たくさんあり​​ます それはこのようなことを行うために、それが超簡単になります。 誰もが単にシンボルのこの大規模なリストでオートコンプリートのいずれかの欠点を考えることができますか？ 何がこのアプローチに最善ではない何かだろうか？ うん。 >> [生徒]時間は、[聞こえない]の数が多い場合 うん。今、私たちはこの巨大なJavaScriptファイルをダウンロードしているとシンボルが多数あります。 私たちはもののトンを持っているそうだとすれば、これは一種の探索のみならずレイテンシを増やすことができ だけでなく、実際のファイルをダウンロードします。 グレート。何か他には？ 今のところ関連性の本当の意味はありません。 私がここに表示され、企業で入力した場合 A.で始まる最も人気のある会社ではないかもしれません 

私はAppleに入る前に、それは私が探しているものを見つけるためにいくつかのより多くの文字がかかる場合があります。 このオートコンプリートは、関連性のこの感覚を持っていません。 それはちょうど、言おうとしている "私は表示するつもり一致するものを。" その代わりに、私はどういうわけか私の検索にいくつかの関連性を統合したいと思います。 、finance.yahoo.com、私はYahoo!ファイナンスにこっちに行けば 私はYahoo!ファイナンスのページに記号を入力しようとする と私はGOOGの入力を開始、私は物事のこの素敵なリストを持っています。 Yahoo!ファイナンスは、より巧妙なここで何かをやっているように、明らかに、それが見えます。 彼らはいくつかの関連性を持っていると、彼らはまた、追加情報を持っている 株式の名前のような。 それは私が本当にシンボルのちょうど私の在庫リストで得ることができない何かである。 私はこれをしたいので、私はそれを取るつもりだ。 レッツは、いくつかのことを行うことを行うには。 最初にこのページにインスペクタを開いてみましょう 私達はこのページがすべてでリロードされていないことを見たので、 ので、それはおそらく、そのデータをロードすることが何とかAJAXを使用している。 我々は、それがロードしていますどのようなデータを見つけることができます。 私はこの[ネットワーク]タブをクリックした場合、これらは解雇されるように開始要求のすべてになるだろうしている。 私はグーで入力した場合、今、私たちは、私はちょうど新しいHTTP要求を持っていることがわかります。 そのデータがどこから来ていると考えられる。 案の定、私は奇妙な名前のビットであり、このURLを見れば、 我々はヤフーからそのデータを送り出したときは、この正確であることがわかります。 

私は心の中でルックアップ機能と非常によく似ていますsuggest.phpと呼ばれる別のファイルを作成しました。 それは基本的にいくつかのデータを取り戻すため、YahooのURLにクエリを作るために起こっている、 そして私にそれを送り返す。 今すぐではなく、記号のこの大きな、巨大なリストを使用するよりも、 私はYahooの素敵な関連性のものを使用することができ、 と私はその大規模なJavaScriptファイルをダウンロードする必要はありません。 私は実際に関連する株式銘柄をプルダウンするつもりです。 その飛び込むしてみましょう。 だからHTML、JS。我々はquote4に今いる。 今、私たちはもはや、JavaScriptファイルのその大きなリストを使用していないしている。 しかし、設計上の問題の小さな種がここにあり。 我々は、AJAXの非同期であると言ってきました。 それが何を意味する、私はAJAX要求を行ったときにということである 私のAJAXリクエストが実際に発射されているので、ここに8行目で、これはです。 Let 'sは、今私はいくつかのものをやろうとしているその下に、ここでいくつかのコードを持っていると言う ユーザーに警告したり、ページ上の何かを変更したい。 何が起きようとしていないと、ブラウザは、続行するには、この要求を待機するつもりはないされている 前に降りてきて、この行を打つ。 これは非同期の部分です。 それは、このリクエストを行い、作業が終了するたびに "、と言うために起こっている "戻ってくると私は成功の中に呼び出すことがあなたに言ったことを、その関数を呼び出します。" それは我々が事前に​​全株式をダウンロードするだけではないことを意味します。 我々は、要求を行うと戻ってくるために何かを待つ必要がある。 前に、我々は単に、ブートストラップを言うことができることを意味します "ここは私がオートコンプリートにあなたが欲しいもののリストです。" 我々が知らないので、私たちはもはやもうそれを行うことはできません 我々は上に実際にオートコンプリートをしたいか。 幸いにも、ブートストラップは、それらがあそこにスマートな男ですので、これを考えた そして、彼らは実際に私たちは、この先行入力プラグインをロードする別の方法を与えた。 前に、このソースプロパティの値は、上のオートコンプリートの事のちょうどこの大きさの配列であった。 

今すぐソースプロパティは、実際には関数であり、 そしてこの関数の目的は、上のオートコンプリートに物事が何であるかを把握することです。 それは、アウトを把握するために起こっている方法は、Yahoo!ファイナンスに尋ねるために起こっている オートコンプリートに最高のものは何ですか。 私は非常によく似たAJAXリクエストを作ろうと思ってこれを行うに。 私はsuggest.phpでこのページを要求するつもりです。 私はまだ記号に沿って送信したい。 そして今、私の成功は、ブートストラップ·マニュアルには私に言った そのためには、物事のそのリストを移入する 私が行うために必要なすべてのコールバック関数になりましたこの配列を渡しています。 しかし、少しお待ちください。 これは配列であることになっているとAJAXはテキストを私に返送された場合、 どのようにそれは可能ですか？ これは、JSONと呼ばれるデータを交換するための新しい方法を紹介します。 この場合、私たちは、単なるテキストの単純な文字列を返送していない。 今、私たちは、株式銘柄のこのような複雑なリストを扱っています。 これらの株式銘柄は、会社の名前や現在の価格のようなものを含めることができます。 ちょうどあらゆる予測可能な方法でフォーマットされていない大きな長い文字列を使用して 私には、Yahooのサーバーからこのデータを取得するための最良の方法であることを行っていない 私は簡単に理解できる方法で。 JSONは、我々はJavaScriptで連想配列を作成する方法を活用して技術です。 これは、JavaScriptの連想配列のようにたくさん見える それがあるため、実際には、それは。 JSONは、JavaScript Object Notationの略です。 これは、基本的に前後にデータを転送するためのフォーマットに合意です。 ここでは、このJSONオブジェクトかこのJSON連想配列 私のコースについてのいくつかのデータを送信しています。 

この配列のキーは、CS50の値を持って当然のようなものです 上下ここで我々は、私は配列である値を持つことができることを確認することができます。 私は、文字列を解析するようなことを行うために持っているとカンマを見ていない そのような途方もないことをやる。 これは、このJSON形式で宣言されているため、 JavaScriptとjQueryは既に文字列を変換する機能を持っている 実際のJavaScriptの連想配列にこのJSONのように見える 我々は、で動作すること。 それをすることは、もはやこのファイルは、suggest.phpないことを言ってのと同じくらい簡単です 、単にテキストの文字列を私に返送 私はそれが戻ってJSONを私に送信することになるだろう知っている。 それは、そのJSONはJavaScriptの連想配列に変換することができることを意味します。 それで、jQueryの、私はあなたが私のためにそれをしたいと思います。 ここでは、この応答パラメータを意味し、 これはもはや単なる文字列ではありません。 我々は、ここでいくつかのJSONを来るjQueryを伝えているので、 jQueryが言うのに十分スマートであることを行っている、 "あなたは、JSONをしたいですか？" "私は、あなたのための連想配列に変換するつもりです。" 我々はquote4.jsを持ったら実際に[ネットワーク]タブを見てみましょう。 私たちは、これを変更し、ページをリロードします。 今、私は再びインタイプするつもりです。 私は、suggest.phpにカップルのリクエストを作ったが、今では、この応答した 単なる文字列ではなく、それはJSONです。 だから私が言って開き波括弧を持って、 "ここに連想配列が来る。" 

この連想配列の最初にして唯一のキーはシンボルと呼ばれ、 その後ここでは関係のシンボルのすべての配列です その巨大なリストから、Yahoo!ファイナンスから今来ていない。 それは私が単にこのオートコンプリートのプラグインを読み込むことができる方法です 既に所定のローカルファイルから来ていないいくつかのデータを 何か他のものから。 それは、私たちが実際にJSONPと呼ばれる技術を利用できることが判明 パディング付きまたはJSON、それはこのsuggest.php中間業者を排除するでしょう。 しかし、代わりにそれを行うのではなく、私はこれがさらにどのように改善できるかを見てみましょう。 私はストラップの先行入力を本当に好きだ。本当にうれしいです。 しかし、我々には、JavaScriptが得意取得していると我々は同じ種類ではこの自分たちでやってみたい 多分、このプラグインが何をして何ができるかを見てみましょう。 その先行入力のものを使用しないのはもはやみましょう、 と推奨銘柄のこのリスト自身にしようとしてみましょう。 ここquote6.phpで我々は同じようにオフを開始するつもりだ。 毎回誰かの種類は何か、我々は、AJAXリクエストを作りたい。 これは私たちのオリジナルのCS50ファイナンスインスタントに似ています。 むしろquote.phpへの要求を作成するのではなく、 我々は今、このsuggest.phpを以前と同じファイルへのリクエストを作っている、 これは、ちょうどYahoo!ファイナンスからデータを取得しようとしている。 

、再び、我々はまだJSONを期待しているが、現在は先行入力が私たちのためにこれをやっていないので 我々はまた、現在のテキストボックスの中にある値に沿って送信する必要があります。 今、私たちは、Yahoo!ファイナンスを求めるために知って そして、今ここで我々は要求が完了すると、実行したい機能です。 私たちは私たちのためにリストを作るためのプラグインを持っていない、 私たちが実際に候補のリストを構築しようとしているので、ここどこだ。 そのためには、多くのPHPでのように私達は、HTMLのこれらの大きな文字列を連結 それから私達はそれらを印刷し、我々はJavaScriptでまったく同じことを行うことができます。 まず、提案と呼ばれるこの文字列をオフに開始するつもりだ そしてこの文字列は、単にいくつかのHTMLが含まれているだろう。 、我々は、それが物事のリストになりたいので、このリストタグとオフを開始するつもりだ そして、今、私たちは私たちに戻されたすべてのシンボルを反復処理するつもりです。 覚えておいて、私たちは、dataTypeを言ってきたので、： 'json'には、これは文字列ではありません。 これは、すでに私たちのための配列です。それは本当にクールだ。 我々は、単に "私は、あなたがリスト要素を追加したい"と言うことができる 我々はその側面の要素の中にそれを置くことにしましょう​​、 我々はそれを我々はそれが何であるかを知っているので、提案のクラスを与えるでしょう、 そして今ここで我々はYahoo!ファイナンスから戻ってきたという象徴です。 

かつて我々は、我々は戻って得てきたシンボルの各々のための要素を作成しました 我々は、単にリストを閉鎖したいと思います。 だから今の提案は、この小さなHTMLフラグメントを表す そのページに置くときには、我々が探しているもののリストになるだろう。 今、実際にそのページに載せてみましょう。 私は実際には別の空のdivを作成したと私はそれを提案のIDが与えられたことを行うには。 我々は、在庫データの価格を表示していましたdivの内容を設定するのと同じよう 今のところ、この文字列が設定されている値にこのdivの内容を設定したい どのこれらの記号が含まれています。 このHTMLメソッドを使用して、この提案の変数は、この文字列は、HTML形式の文字列です。 私はあなたがそのHTMLを取得し、提案と呼ばれるdivの中にそれを載せていきたいと思います。 我々は、ちょうど今のDOMに何かを付加しました。 我々は今、ページ上に表示できることをDOMにいくつかの新しい要素を追加しました。 これはどのようなものか見てみましょう。 我々はquote6にロードし、今我々は戻ってくる場合は、 今私はAAPLを入力して起動したときに、私たちはもはやそのストラップオートコンプリートを、持っていない しかし、我々は今我々が自分自身を作ったこのリストを持っています。 これは、例えば、ブートストラップ先行入力より少し醜いです しかしそれは、私たちはもう一つのことを行うことができません。 我々はそのストラップのプラグインを見ていたとき、 我々は自動補完すると、オートコンプリートのいずれかの値がAAPLとされた。 それはとても便利ではないかもしれません。 ユーザーとして、私はすぐに株式銘柄のすべてを認識しない場合があります。 同社の実際の名前は何私はおそらく認識しやすいよです。 だから、本当に参考になる場合ではなく、AAPLを言っていないであろう これは、Apple Incのような何かを言った 我々は、この私たち自身を転がしてきたので、私たちは本当に簡単にそれを行うことができます。 のはとてもquote7、ここで我々の最後の引用ファイルを開くしよう。 

同じこと。私はただ単にシンボルよりも多く、私たちに戻ります別のPHPファイルを作成しました。 また、会社の名前を私達にお返しします。 そして私たちは同じことをやっている。我々は、AJAXリクエストを作っている。 リクエストが完了したら、我々はここで、この関数を実行しようとしている、 そしてこの関数は、要素の大きな文字列を構築しようとしている。 しかし、ここでの違いは、これらのリストの値は、もはや単なる記号ではないということです それが今では名前だ。 だから我々は一つの小さな問題を抱えている。 私達が私達のルックアップを使用する場合、私たちは何とかそれをシンボルを渡す必要があります。 我々は、米国Microsoft Corporationのようなルックに何かを渡すことはできません。 我々はそれMSFTを渡す必要があります。 我々はHTMLを書いているとき、私たちは素敵な組み込み型の属性の多くを持っている。 それhref属性またはクラスに関連付けられている場合があります。 しかし、私たちが本当に今必要なのは、これらのリンクのそれぞれのためのものです それに関連付けられた銘柄記号を持っている。 は組み込みのHTML属性銘柄記号の、はありません 幸いにも、HTML5は、私たちがやりたいように私たち自身の属性を作成することができます。 データシンボルを言って、私は、新しい属性を導入しました 名前は私がだけのために作られた、と私はこのデータを使って、それを前置きので、これは大丈夫です。 現在在庫からそこのシンボル内に保存するつもりです。 何それが意味することは、我々は会社の名前の値を表示しているにもかかわらず、ということである 私たちのオートコンプリートの内部は、我々はまだ記号を覚えている それは、それぞれの会社に関連付けられています。 我々がやっている方法は、この要素自体の内部にある。 だから我々はもう一つの変更を加える必要があることを意味します。 我々は今それをクリックすると、私たちは実際にシンボル属性を活用する必要があり ただ、その値よりもむしろ。 私たちがバックアップしている場合、我々は、提案にイベントハンドラをアタッチします。 これらの候補の1つが今クリックされるたびに、私は何かをしたい。 私は何をしたいと、その入力ボックスの値を変更することです。 今私はこの同じval関数を設定したい。 

したがって、任意の引数を指定せずにこのval関数はテキストボックスに既に何あなたに戻り、 あなたはそれを文字列を与える場合、それはその文字列を引数に取り、テキストボックスにそれを置くために起こっている。 私は、同じ方法で、そのテキストボックスを選択しています。 それの名前は、フォームの引用の内部シンボルです。 今、私はそれを属性データシンボルの値を送っている。 ここでこの事は、この$（this）を新しく追加されました。 これは何を意味するとクリックされた要素です。 私たちは、クリックイベントをアタッチしていないことをここに見ることができる 個別の提案のクラスと各要素に。 むしろ、我々はこの少し違う近づいている。 代わりに、私たちはいつでも、この提案のdivのanythingの内側、と言っている これは覚えておいて、そのリストのためだけのコンテナーです このdivの内側に何かがクリックされ、それが提案のクラスを持っている場合は、 私はこのイベントが発生する。 基本的にこれは、私たちにできることは何を意味するかは、我々はこの同じイベントハンドラを再利用できることです リスト内のすべてのもののために。 だから我々は最初の要素ごとに1つのイベントハンドラを持っている必要はありません 2番目の要素と別のイベントハンドラ。 我々はその代わりに "私は、リスト内のすべてのものに適用する同じイベントハンドラを望んでいる"、と言うことができます しかし、我々は何とかしてクリックされた要素を知る必要があります。 これは、 "this"キーワードはまさにそれを表しています。 これはただのユーザーによってクリックされたオブジェクトです。 私はちょうど第三のリンクをクリックした場合、これは、その第三のリンクの要素を表します これは、私がその属性、データシンボルを、得ることができることを意味 私たちが知っている私はちょうどクリックした会社に関連付けられているシンボルが含まれている必要があります。 私達は私達の財政のページにジャンプする場合は、 我々は、今一度、私はMSFTのようなものを入力して起動していることがわかります 我々は、もはや単なる銘柄記号を取得していないしている、 我々は今、実際の会社名を取得している。 しかし、私はこれらの企業の一つをクリックしたときに、 私たちは、実際に会社の名前でテキストボックスを移入していないことがわかります しかし、それらのデータ属性の内部に格納されていたものは何でも。 そして私は実際にそれを右クリックすることによって、これらの要素のいずれかを点検すれば とエレメント検査]をクリック、我々は実際にこれがどのように見えるかを確認することができます。 

これは我々がforループの内部に作成したものであることを覚えている 我々はHTMLの該当文字列を作成したとき。 我々は、このデータシンボルが大きいMSFT、の値を持っていることをここに見ることができます。 それは我々が期待していたものだ。 そのシンボルだとそれは我々が使用するために必要がある値を得た方法です このテキストボックスの内部。 それは退屈なものだので、それは十分な見積もりフォーム用です。 弊社のポートフォリオページへのいくつかの簡単な拡張機能を作ってみましょう。 あなたはしばらくの間、CS50 Financeを使用したことがあれば、株式を大量に購入し、販売を開始 最終的には、この表には、かなり大きくなるであろう そしてあなたはもちろんの株式相場をするつもりだ。 テーブルは、本当に大きいですと、それはその上に検索しようとするユーザーのために有用である可能性があります。 私はディズニーのような何かを入力して起動した場合、検索ボックスの内側 と私のミッキーマウスの在庫を探して、私たちは、テーブルが現在フィルタリングされていることがわかります 私はちょうどインチ入力した内容に基づいて、 この機能は、超複雑に見えますが、それは本当に、本当に簡単です jQueryとJavaScriptを使用した。 このportfolio.phpファイルはportfolio.jsというJavaScriptファイルが含まれています。 のは、その見てみましょう。 だからHTML、JS、ポートフォリオ。 私たちはテーブルの上に探索することをやっているところです。 私が最初にすべきことは、そのテキストボックスにイベントハンドラをアタッチしている 我々は我々のフィルタリング機能が発動することがわかっているので、 たびに、ユーザーが押したものを我々は、検索ボタンのための時間を持っていないので。 我々が最初にやるべきことは、ユーザーが探しているものが把握されている 私たちは前と同じように。 このキーワードは、ユーザーが対話している現在の要素を参照します。 

ユーザーが検索ボックスと対話するので、 $これは、検索ボックスを表します そうthis.valは、ユーザーが現在入力している検索ボックスの内側にあるものを与えてくれる。 だから、今私たちが何をしたいのか、我々はすべての行を繰り返し処理されるようにする 私たちのテーブルの内側。 私たちのテーブルのすべての行を選択するには、私は、そのテーブル、テーブルのポートフォリオのIDを与えた と各行は、TR要素で表されます ので、このセレクタは、私に大きな配列を返すために起こっている 私のテーブルのすべての行の。 今、私は、その配列を繰り返し処理したいと思います。 私は、forループを使用することもできますが、jQueryには、実際に私たちと呼ばれる素晴らしい機能提供する "各"を 何がそれぞれが行うことは、それぞれが1つの引数を取りますです その引数は、関数です。 それは何をやろうとしているのは、それがこのリストの内のすべての要素にその関数を適用するために起こっているのです。 この関数は、Eの引数を一つ取る そして、この関数が実行されたときに、この電子は、最初の行で置き換えることになるだろう 次に2番目の行、次に第三行。 この方法では、これはforループを実行するのと同じ事です その後ループのためのあなたのインデックス内側に基づいて現在の要素を考え出す。 各繰り返しで、テーブル内のこれらの要素のそれぞれについて、 行のセルの内部のテキストを - 私は、要素のテキストかどうかを確認したい -  私が探しているものと一致します。 このコマンドの大きな長い文字列は、私はそんなことができる方法です。 まず、もう一度、これは今を指します - それは新しい関数の内部だから -  これは、テーブルの現在の行になります。 私は、テーブル内の現在の行を取りたい と私は、そのすべての子を取得したい。 覚えておいて、DOMは、階層ツリーです これは、要素が子供の数を持っていることを意味します。 

関数が戻って私にすべての要素の配列を返すために起こっているこれ。子供 それは、表の行、この場合には、の子です。 これは、単に行の内部の細胞である。 私は最初のセルの上に検索したい。 この最初の関数は、私にその配列の最初の要素を与えると言います。 次に、テキスト関数は、そのセルの内側に正確に何が私を得ると言う 私はそのテキストの上を検索したいので。 最後に、それを小文字に変換してみましょう、 ので、我々は、テキスト大文字小文字を区別しない問合せを行うことができます。 最後に、我々はテーブルの内側に、その文字列は、我々が探している文字列が含まれているかどうかを確認したい。 JavaScriptでindexOf関数は、まさにそれを行います。 それは、この文字列が別の文字列が含まれているかどうかを教えてくれる。 それは、セルが、私が探しているものが含まれていることは事実だ場合 その後、私はそれが示されていることを確認したい。 showメソッドは、 "要素を表示します"、と言うだろう これが事実でないなら、それは私が含まれていないことを探しているものは何でも意味 その行内の、と私は非表示にしたいので、ユーザーからのものです。 それは、もはや我々は、テーブル全体を見ないその素敵なフィルタリング効果を実現しています。 あなたは同様にこのティッカーを作成する方法に興味があるなら、 我々は、オンラインソースを投稿します。しかし、それは本当に簡単です。 jQueryは、これらのアニメーションと操作CSSプロパティのための素晴らしいメソッドを持っています。 だから、それは私のためにそれだ。 

次に何が待ち受けている？あなたが数日のうちにわかるように、最終的なプロジェクトの提案が原因です。 最終的なプロジェクトの提案は、あなたにいくつか質問をします しかし、それらの間で3つのマイルストーンになります -  1 "良い"マイルストーン、どちらがいいマイルストーン、およびベスト1。 本当にあなたたちはあなたの期待を設定するのに役立ちますているアイデア 最低限必要なのは、あなたの最終的なプロジェクトの出力と幸せになりますように そしてそれは、これまであなたが懸念している "良好"となります。 しかし、その後、あなたがより良いものに少しだけに到達するために得ることの利益のために または最高の何か、我々はまた、同様にそれに向かってあなたをプッシュするの並べ替えがあります。 CS50ハック-thonのは、一方で、数週間のうちにある。 通常、我々は、金利の抽選基礎ベースでこれを行うには、 しかし、オッズは、我々はハーバードスクエアからのシャトルバスで、私たちの数百を取るよアール ダウンマイクロソフトは適切に "おたく"と呼ばれる美しい施設がありケンドール·スクエアへ -  ニューイングランド研究開発センター。 我々は、我々はいくつかの食べ物があるでしょう8時頃つきますよ。 1午前の周り我々はいくつかのより多くの食糧を持っているでしょう。 5の周りには、あなたはまだ目を覚ましている場合我々はIHOPまたはあなたがキャンパスに戻って取る上に向かうだろうよ。 目的は、最終的なプロジェクトに飛び込むことがある クラスメートやスタッフの横に。 それから数日後CS50フェアですが、 本当にあなたたちはあなたの仕事を紹介するための機会であることが意味されている 学期と成果 お互いに肩をこすり、誰が何をしたかの感覚を取得中。 そうは言っても、トミーへとヨセフに多くのおかげで、 そして我々は月曜日にお会いしましょう​​。  [拍手]