[Powered by Google Translate] 第9週，續] [戴維·J·馬蘭 - 哈佛大學] [這是CS50。 - CS50.TV] 這是CS50。這是第9週結束。非常感謝。最後。第9週。我得到了它。今天，我們繼續我們的談話Web編程著眼於最終的項目，而不是因為你必須做一些基於網絡的最終的項目，但因為無論是對最終項目或之後CS50 當然，這是現代軟件的方向。然而，它實際上不是一件容易的事情。事實上，這樣做的最難的事情之一是在設計方面。例如，通過設計，我們的意思是實際上的用戶界面或用戶體驗。我敢說 - 我們知道從最近的問題集當一些你發表你的抱怨一些的軟件或硬件激怒你，無論在校園內或關閉 - 有一個網站有很多，有很多的硬件擺在那裡，那種很爛。但現實情況是，使尚未使用，很容易的事情卻是強大的這是一個非常困難的挑戰。所以，今天我問約瑟夫和Tommy和我一起在這裡這樣我們就可以有一個談話，都設計和什麼樣的思維過程，通過你的頭開始當你設計你的最後的項目，你的未來努力。然後用張宇的幫助下，我們來看看一些實施細節。在紙上或在你的心中，你怎麼能有一些視力，然後你可以通過編程執行使用的技術和工藝，我們才剛剛開始議論紛紛，即JavaScript和更新，即AJAX異步JavaScript的東西。這使您可以創建更動態的用戶界面逐步從服務器獲取越來越多的數據。因此，我們會看到的那些片段，以及一些今天。順便說一句，如果你有興趣集中在計算機科學或輔修計算機科學，要知道在本星期五中午，在Maxwell德沃金221會有一個比薩餅事件在那裡你可以學習一些關於計算機科學。在您的途中出了門，你就可以在哈佛拿起一個非官方指南CS。在腰部的高度，我們就會把它放在垃圾桶外所以，如果你想抓住這個學習一些關於CS，，會在那裡等你，因為它是在0週。此外，如果你想加入我們的的CS50午餐在本星期五下午1:15，一頭到cs50.net/lunch。事不宜遲，我給你教學研究員王陽樂。你好。 [掌聲] 謝謝。我第一次了解設計是一類稱為CS179。當時教授告訴我們另一位教授的故事誰去酒店使用的水龍頭。誰能告訴我什麼2旋鈕的左邊和右邊做呢？ [學生]冷熱。 >>冷熱。好。你通常期望，對不對？這位教授使用的水龍頭後要洗澡，他繼續使用。他認為，左，右側是冷時熱，對嗎？但是，任何人都可以告訴我，這實際上是怎樣做的呢？有什麼手？ [聽不見的學生反應] >>建議是什麼？聽不見的學生回應] >>溫度？因此，其中一個控制溫度和其他控件？ >> [學生]水壓力。水的壓力。好。這教授走進了這一點，並認為他們所控制的冷，熱，原來是正確的，他認為是熱的，所有的方式因為他想要一個溫暖的淋浴。那麼，這些不真正匹配，所以他得到了這個非常有趣的體驗洗了個冷水澡，大家都知道那是什麼感覺就像。這是一個設計缺陷的一個例子。我的意思是，他期望從水龍頭不匹配的淋浴一下就出來了，這是一種對他的不幸。因此，這是一個設計缺陷，在現實生活中發生的一個例子。但我們看到的，以及各種其他的。我們很可能不是球迷的MBTA系統的。這是一個實際上是在倫敦的地鐵系統，說，“這個按鈕，在不使用”。為什麼是在那裡？我們為什麼還要在意呢？當我還是一個孩子的時候，是科技知識的一個房子，時，電腦會崩潰，我媽來我往，我這個顯示屏幕，問我發生了什麼事。連我自己都不知道這意味著什麼。 [笑聲]是什麼？ [笑聲] 有時候，我們感覺像軟件開發人員只是曳我們。作為用戶，我們會說，“這是怎麼回事？有沒有人告訴我們。” 這一切都歸結到一個問題的設計。設計，我們可以看到，是不是純粹的美學，它不是關於如何看待事物。我們在這裡看到，這個小彈出窗口，這裡其實看起來很不錯。它有一個陰影的背景下，它有邊界的半徑去。這是一種相當漂亮。它的設計非常好，因為它不是非常用戶友好。這一點彈出來了，並沒有真正給我任何信息這是怎麼回事，它並沒有告訴我任何的用戶如何從這個錯誤中恢復。我們要思考的東西，設計是不是。首先，它不是美學。它也沒有填充您的應用程序有大量的不必要的功能。如果你是一個泰國餐廳，你可能不希望是一個牙醫在相同的時間。與Facebook的問題，而不是很多人用它它是不是真的在他們建設的核心。所以這是很好的想法有關的事情沒有這麼多的數量你把你的應用程序，但質量你如何使這一用戶體驗更好通過實際改善後，你已經擁有的東西。簡單地說，設計告訴我們，我們應該建立什麼。例如，如果我們正在建設的東西，讓我們尋找的東西，例如，像谷歌，我們應該做的事情的方式要求用戶採取大量的點擊，得到他們想要的東西，我們還是應該做到這一點的方式，例如，與谷歌即時或自動完成讓我們更快地獲得我們的研究結果？工程涉及，像湯米會告訴你，其實建設。有很多類型的設計。例如，如果您正在構建的東西部署在第三世界國家，那裡沒有多少電，或者很多技術，你要設計你什麼在容易訪問那裡的人。但是什麼樣的其他的設計決策可能有或可能參與這樣的事情？是啊。我看到了手。聽不見的學生回應] >>權。沒錯。無障礙環境是一件事。很多人不認為，“我的用戶？” 任一頻譜類似的極端。我的用戶可能有殘疾，我沒有想過我只是想為廣大用戶設計。互聯網是時下所有人都能訪問的，我應該為這些人設計。什麼樣的其他的設計決策，你可能會做什麼呢？是。 >> [學生]成本。成本。非常好。另一件事，我們可能我們的設計決策的基礎是成本。如果我們是一個企業，你想建立的東西，並不需要太多的生產成本但可以賣特別高的成本，我們可以得到一些利潤。這些都是不同類型的設計，但是當我們在互聯網上的東西當我們的東西，可能不會花費那麼多，現在建立，類似的互聯網應用 - 你不必把它扔多少資金為了使實際工作的東西 - 我們更擔心的是用戶體驗。我們稱這種以用戶為中心的設計。以用戶為中心的設計本質上涉及的是把自己的鞋你的用戶。如果有人為我什麼，顯然，他們已經與心中的目標，我的具體應用他們要完成的任務。你的任務就是不僅要幫助他們完成這一任務但是，以幫助他們完成任務的方式是有效的，直觀的，，一些人在那裡說，出入方便。效率的含義是什麼？效率意味著我的用戶如何快速完成的任務，因為我的接口。是否需要大量的點擊，他們從一個地方到另一個？它是乏味？他們必須執行大量重複性的任務嗎？我們希望使這一過程盡可能高效所以他們沒有做的那些各種各樣的東西。至於直觀性，即，例如，如果一個用戶查找我的接口，他們從一個地方到另一個地方是很容易嗎？他們是很容易弄清楚他們有什麼在我的界面點擊他們為了達到他們想要達到的目標或任務？最後，一個人在那裡說，無障礙環境是非常重要的。 [男性揚聲器]來獲得的東西如視覺，我想我怎麼設計的東西的人是盲目的嗎？哦。對於不能看到所有的人，我們有一些所謂的屏幕閱讀器。你應該做的是你應該建立自己的網站的方式，例如，特定的技術，也就是我們所說的 - 有很多事情現在。我認為有稱為JAWS屏幕閱讀器。很多這些東西靠的是什麼，我們稱之為區域規則為了讀出給用戶的什麼本頁面上。對於那些誰也看不出，你需要確保這些屏幕閱讀器實際上可以在頁面上的內容和可以實際顯示您的用戶，如果你不能看到，至少你還是可以理解的內容在頁面上。是啊。好吧。夠談論良好的設計。讓我們來談論糟糕的設計。這些事情，你不應該做的。誰能告訴我關於他們的經驗與Craigslist 和他們認為是如此之大，這樣的設計呢？是。 >> [學生]我覺得有太多的話在一個區域。太多的話，對不對？完全壓倒。你來到這個網頁，你看到一大堆的東西在這裡甚至可能沒有對你重要。例如，你生活在一個國家，不與這封信開始。比方說，你住在得克薩斯州或什麼的。你必須要在頁面滾動的方式去你在的位置。我是從波士頓來，讓我看看在美國馬薩諸塞州。美國馬薩諸塞州在哪裡？哦，這是正確的。哦，這是波士頓。好吧。讓我們來看看在波士頓。 [笑聲] 很壓倒性的，對不對？那邊尷尬的事情。 [笑聲] 比方說，我在找住的地方。有多少人實際使用Craigslist的？噸的你。有非常糟糕的方式來看待這一點，但讓我們來看看在這。 img和圖片之間的區別是什麼？誰能告訴我？其實是沒有什麼區別。他們的意思是完全一樣的東西，但由於某種原因，他們有不同的標籤。如果我點擊有圖片，什麼也沒有發生在頁面上。其實，我不得不再次單擊“搜索”的事情發生。可能是一個更好的設計決策，可以做有什麼？如果我點擊該過濾器，我可能要篩選由特定的行動或該特定類別。，而不必再次按下搜索，我可能只是自動的過濾谷歌的風格，他們這樣做是瞬間的排序。 [馬蘭]，但不構成我們已經看到了他們迄今為止在物理上提交擊中至少輸入或點擊一個按鈕？正如你已經看到了他們到目前為止，你必須單擊“提交”做這些事情。但是，托米會告訴你在第二，其實有方法，供您例如，當你點擊那個東西，它可以自動發送我們所說的AJAX請求，並返回數據並篩選結果瞬間。這裡有很多的東西，這個接口是錯誤的。 [馬蘭]你能搜索劍橋？有一些異常，在這裡你所關心的劍橋但你要韋斯特福德，春山，西牛頓等。可能不理想。 >>可能不理想。我怎麼可能能夠更好地使用戶的體驗，對這個特定頁面的呢？是。 >> [學生]說明。好吧。說明在什麼樣的意義？ [學生]例如，用戶第一次的事情誰也不知道Craigslist是或者你不知道你應該做的事情。右。因此，解釋什麼是Craigslist的在這個頁面上是很重要的。事實上，我們可以告訴用戶這個頁面實際上是為。如果我只是訪問，我看到一大堆的位置。我什至不知道他們的意思。但更重要的是，在這個界面，記得我不得不向下滾動一噸重的東西，找到一個特定的社會，其實我在乎此。我可以做一個更快的方法是什麼？是。 [學生]劃分為東，西部地區。 “好了。我可以將其劃分為多個類別，可以幫助我更快地確定如何獲取到特定的位置。 [學生]將一個下拉列表。 “沒錯。好吧。我可以用一個下拉菜單，因為我們有固定的一套東西我們可以向他們展示在一個下拉菜單。這樣，它不會佔用這麼大的空間在屏幕上。，但更重要的是，我們能做些什麼呢？是。 >> [聽不見的學生回應] >>你能再說一遍嗎？ >> [學生]搜索框。是啊，一個搜索框。這是偉大的。實際上，我們可以做的是，如果我們回頭看的幻燈片，搜索框。自動完成。非常簡單的方法來搜索的結果，你知道在一組。如果我開始打字BO，你只要給我所有的結果，BO裡面的。這樣，我可以很容易地找到我想去而不是滾動這真是大名單。這些是真正的低懸的果實的各種人誰是實施Craigslist的其實可以做好了很多，其特定的用戶在網站上的經驗。好吧。夠談論不良網站。讓我們來談談關於Facebook。當Facebook出來了，特別是Facebook的照片，有很多的時間可以做同樣的事情在其他服務。他們可以組織您的照片到相冊中。你可以做的是，你可以將它們組織成組。你可以組織他們的日期。你可以做所有這些特別的東西。但沒有人知道是什麼原因使Facebook的照片在被釋放的時間爆炸呢？是。 >> [學生]標籤。 >>標籤。沒錯。我們有米洛在這裡，誰是我們的狗與CS50頭巾的吉祥物。你可以看到，我們有這個標記功能在中間。是什麼原因使Facebook的照片從可用性的角度來看是，它實際上允許人通過這涉及到他們的朋友，在他們的照片。對於Facebook來說，由於他們的網站是特別的社會，建設這樣的社會氛圍。的經驗，提高了很多照片因為實際上，他們可能會說，“這是人與人之間的聯繫，這些都是你真正關心的人的照片。“ 它是也有幾分自戀。人們喜歡被標記在照片之類的東西。雖然這並不一定是良好的人性特點，同時，它是基於良好的設計決策因為人們真正關心的事情是這樣的。所以這是Facebook的照片。但是，讓我們來談談Facebook的更普遍。我敢肯定，很多人在這裡有關於Facebook的意見，良好的設計決策和糟糕的設計決策。因此，讓我們的發洩很高興。來吧。我知道你們使用Facebook。有人有什麼不好說或說些什麼好東西。是。 [學生]在新聞源有很多的事情我真的不關心。新聞源展示了很多的東西，你可能並不關心。你有朋友在Facebook上，你沒有遇見過2年或3年，你看到的新聞結果雨後春筍般冒出來在你的新聞源和你真的不關心它。實際上，Facebook已經作出的努力，使這更好的，他們實際上已經試圖把相關的結果的頂部為晚的新聞源所以你看到的東西，這是有關你或你的親密朋友的朋友。還有別的嗎？是。 [聽不見的學生回應] >>你能再說一遍嗎？ [學生]廣告是比較不顯眼。 “在什麼意義？ [聽不見的學生反應他們沒有屏幕上的光，像旗幟一樣。好吧。這是很好的。如果你還記得20世紀90年代的互聯網 - >> [馬蘭]我在那裡。 >>，他在那裡。 [笑聲] 你可能還記得閃爍的GIF背景，閃閃發光的東西，地球村的風格諸如此類的東西。這真的不是一個例子，一個好的設計因為它是真正從內容分心。耶魯大學的藝術網站，曾經有過為背景的GIF動畫你可以不閱讀任何頁面上，但我想，居然有人已經告訴過他們，現在它是一個有點不同。 [馬蘭]這是現在好多了。 >>這是現在好多了，你可以看到。 >> [馬蘭]哦，是的。好了，只是 - 是的。好吧。它也使您的網頁可能非常簡約，非常理解這樣的事情在頁面上流動的方式，這是非常合乎邏輯的，並沒有得到對方的方式。什麼樣其他的事情是對Facebook的好或壞關於Facebook嗎？讓我們在這裡有一個設計對話。哦。在哪裡？是啊。 [學生]新的時間線系統允許你搜索的人的個人資料，他們的過去。哦，時間線。時間軸是一個偉大的事情，因為它可以讓你秸稈你的朋友他們在高中的時候。時間軸是好事，因為它可以讓你過濾內容的速度快了很多，它可以讓你找到的東西，否則將有很長一段時間找到只是滾動了下來，起來，起來，起來，起來，起來，像時光倒流。但也有排序的缺點，在用戶體驗方面。什麼會是什麼呢？大P-R開頭的單詞。 >> [學生]隱私。 >>隱私保護，對不對？隱私權是一個巨大的用戶體驗問題。這是我最討厭的關於Facebook現在的事情之一。 [笑聲] [馬蘭]我現在做。大衛並沒有意識到這實際上直到昨天才發生的。所以，現在他知道，每次我聊他，我知道他一直不理我。 [馬蘭這種尷尬的分手是我居然無視他，我不知道他知道我不理他。 [笑聲] 隱私是一個巨大的問題。任何人都可以在這裡告訴我什麼是對Facebook的隱私可能是壞的除了事實，他們做這樣的事情？這是什麼特別難Facebook的隱私嗎？這是一個引導性的問題。是。 >> [學生]隱藏你的照片從某些人。右。沒錯，隱藏你的照片從某些人。他們有這樣的小，小的右上角的按鈕，可以讓你切換的隱私照片。他們的隱私選項很豐富，不同種類的菜單。他們已經變得好了很多關於它最近，但它使用的情況下只要你想，以防止你的朋友看到照片，你將不得不去的5個步驟，通過一個非常複雜的過程，像，讓我點擊這個鏈接，現在讓我點擊了，讓我點擊了，讓我指定的人可以看到我的照片。這是在Facebook的部分不是特別好因為有這麼多關於用戶體驗實際上是給他們的自由控制哪些人可以看到。我們稱這種用戶控制和自由。如果你還沒有讓您的用戶這樣做的方式是有效的，直觀的，那麼你的用戶體驗是不是真的那麼偉大的。你們想對Facebook說什麼嗎？我如何關閉這個功能呢？ [王]您不能關閉這個功能，Facebook的一部分，這是一個巨大的可用性缺陷。這個功能 - 其實我昨天看著它 - 這是，你不能做到這一點，或者它非常，非常深的地方埋 Facebook的凹槽，因為我無法弄清楚如何禁用此功能在所有。 [馬蘭]但有時這些決定並不明顯因為你們已經給了我們很多有用的反饋各種CS50應用在課程中使用的網站。我們還沒有實現所有的這些要求和建議。部分，也就是獲得這麼多的請求，它是時間的函數，但有時我們只是有意識地決定一樣， “謝謝你的建議，但我們不同意。” 那麼，你如何決定你應該做的，如果你的用戶認為你應該做的事情即使你不一定嗎？這是一個微妙的平衡之間其實聽你的用戶說，實際上有某種行，你說， “我們不會做這些用戶怎麼說。” 特別是，我認為這是由亨利·福特的報價，總結得不錯。 “如果我問人們他們想要的東西，他們會說，他們希望更快的馬。” 任何人都可以進行排序，梳理出報價的真正意義是什麼？這不只是讓用戶知道他們想要什麼，但更重要的是 - [學生]：他們不知道什麼是可能的。在某種程度上，他們不知道什麼是可能的。戲弄，除了多一點點。你指的是什麼？ [聽不見的學生反應] 這是很好的。我認為，我們在這裡想說的是，人們知道他們想要什麼。他們希望更快的馬。他們真正想要的是快速移動的能力，但他們真的不知道介質實現。當你來到你的用戶，你的用戶告訴你一件事他們告訴你，“我們希望這些功能，而這些功能，而這些功能。” 你一定不想去想，“讓我繼續前進 “和實現他們明確地說，” 但你要考慮的是，“我可以得到什麼樣的想法，從這個嗎？” 他們真正想要什麼？從那裡，你可以做什麼是設計滿足這些要求的東西，但不一定的方式，用戶的期望得到滿足。因此，最後的項目一樣，在很實質的東西，什麼是一個非常有用的啟發，當它涉及到更好的東西，尤其是當設計師對他的這種傲慢進行排序，讓你知道什麼是最好的，你可能需要從用戶的輸入，但你如何真正得到的反饋信息？在最終的項目中，很具體，產生最佳的效果呢？產生最佳的結果 - 我會在第二 - 是的開發和測試，然後重複這個過程。我的意思是測試通常是當你設計的東西你認為這是相當不錯的，像“我就是這樣一個偉大的設計師，每個人都非常喜歡這個。” 然後你把它放在那裡，人們真的不喜歡它的一些原因。你需要做的是你要的東西，人們不喜歡的部分和改造，人們不喜歡的東西。這聽起來像一個非常明顯的過程，但這個過程中，不斷迭代你已經建立的頂部是一個過程，可以幫助您不僅完善自己的設計能力，而且還可以幫助您完善設計因此，人們實際上非常感謝您的產品，甚至超過他們之前。我就去了更具體的例子，實際上，你可能做的事情。作為排序的最後一個例子的產品，讓我們來看看在KAYAK。滿意的，當它來到的時候是非常，非常受歡迎。任何人都可以猜到是為什麼呢？各種你喜歡的東西，如果你用它是什麼什麼是各種各樣的事情，你不喜歡嗎？是。 >> [聽不見的學生反應] >>好。這是它的一部分，讓用戶有更廣闊的查詢是比非常嚴格的，如，“你必須選擇你的開始日期 “，你必須選擇結束日期。” 事實上，它可以讓你靈活的，它可以讓你在這個範圍內的所有的航班。還有別的嗎？ [學生]，包括價格的費用。他們這樣做的費用包括在價格中。稅和活動其實，價格在左上角直接進入這樣你就不會誤以為你實際支付的240美元飛行當它真的330美元。還有別的嗎？是。 [聽不見的學生反應] 我不知道如果他們真的讓你這樣做。我可能是錯誤的。這可能是一件有趣的事情，如果你想要把更多的重量，特殊的過濾器使得它們推頂端到該過濾器有關的結果。但是，任何人都可以告訴我這左邊有什麼特別之處呢？你是如何傳統的看互聯網上的服務，在此之前的飛行嗎？是。 >> [聽不見的學生回應] >>你說 - [學生]：每家航空公司。 >>呀。每家航空公司都有自己的網站。這鞏固事情。然後呢？ [學生]你知道你究竟什麼時候離開。你知道你究竟什麼時候離開，但在特定的過濾器。讓我拉滿意的。哦，上帝，彈出式窗口。糟糕的用戶體驗。當我提出這個滑塊，會發生什麼情況？ [學生]自動更新。 >> [王]自動更新。這件事情是非常重要的。在此之前，每當你想看看一個航班，你不得不把在輸入的位置，你的輸出位置，然後按搜索，它會處理並顯示結果。如果你想改變你的查詢，你就必須按兩次，從頭開始進入一個新的查詢，然後再去做一遍又一遍。這樣的事情是很好的事情，在中間使用了一個非常難以理解的事物。每當你做這樣的事情，它拍攝了一個請求，它返回的結果。這種即時的反饋是滿意的廣受歡迎的東西，因為它是很容易的，我只是改變我的查詢並找出的東西，都是圍繞一個特定的範圍內不回去，反反复复，來來回回。因此，這些都是各種各樣的事情，你要想想，當你設計你的網站。我怎樣才能讓我的用戶，這是非常有效的去任何他們正在努力他們的最終目標，並得到盡可能快？ [馬蘭]約瑟夫點之前用戶不一定知道他們想要什麼，根據你們現在知道HTML 你有複選框，單選按鈕，選擇菜單，輸入字段和等，你將如何實現一個飛行的開始時間採摘的概念呢？這些不同的UI機制，你會用嗎？如果你只是知道以前教過的HTML 你知道的輸入單選按鈕，複選框，下拉框和輸入框，你會怎樣自然的選擇已經採摘日期？ [學生]輸入。 >>輸入。或者甚至下降打倒所有的日期，對不對？因此，更複雜的用戶界面的左側，你可以實現這樣的機制，你可以使這個過程更直觀，採用了滑蓋因為時間是連續的，和人們通常不認為它的離散塊。好的。最後一件事。 10個可用性啟發式。我們談到的所有的事情可能屬於其中一類。如果你去這個鏈接，該網站將在網上公佈，你實際上是可以的，當你設計你的網站，讓這些啟發式記這些經驗法則。為您的項目，我建議你做什麼，以更好地設計你的應用程序是紙上原型第一。當你思考你的應用程序時，很快就畫出你想要什麼它看起來像並確保所有框都非常直觀的用戶使用的方式，是配置在這些紙上的原型，甚至給你的朋友，並開始焦點小組。只要2人或3人，並要求他們只是利用這些紙上的原型，，並告訴他們新的屏幕，看看他們是否真正了解這是怎麼回事。你想要做的是給他們的任務，激勵，任務，只是給他們的應用程序，並讓他們使用它。不要給他們超出了指示。你想真正讓他們與您的應用程序進行交互的方式可以讓你看到他們將如何使用它，如果你不站在他們旁邊。這是非常重要的。這會給你的見解是人四處逛逛特別的東西的方式，我並沒有打算在他們呢？他們在屏幕上使用特定的UI機制的方式，是一種哈克？我並沒有打算讓他們這樣做的。一旦你完成了這個，你要怎麼辦？你的設計岩石，對不對？你想要做的是，你想這個過程中開發和做一遍。所以給朋友，一旦你已經開發了它，測試它，開發，測試，開發，測試，迭代，並和弘揚。設計是一個迭代的過程在這個意義上。實際上，你必須建立一些關於它的事情，然後實現，你不知道前，，從該回去和改善。現在，作為發展的一部分，這就是湯米是要告訴你，休息後和你可能會對如何能夠實現類似自動完成的方式，是相當簡單的。 [馬蘭]托米在這裡，然後一個問題。很多最早的網站 - 約瑟夫說，20世紀90年代風格的網站，它實現，如果你想選擇的開始時間和結束時間，坦率地說，早在一天，甚至在一些網站上的今天你做到這一點的方法是你從下拉菜單中選擇一個小時，你挑分鐘從下拉，也許你選擇AM，PM，你這樣做3次以上。因此，有6次點擊，也許一些滾動您的用戶實際上可以提供的日期和/或時間範圍，在這個意義上的一些種。所以肯定是不理想的，但迄今為止，我們沒有發現表達能力在任何語言中，我們已經看到在做一些性感的這樣的滑塊的開始時間和結束時間。但是，如果你覺得回到了0週當我們談到划痕，也有不小工具，只是做了某些事情。你真的只循環和條件等，有這些基本一樣。因此，種只是想現在非常抽象的，獨立的HTML的詳情，什麼是真正的開始時間和結束時間滑塊這樣的東西嗎？當我將我的鼠標和我點擊那個小胡蘿蔔符號的左邊並開始拖動，編程，什麼是你想成為能夠實現要做到這一點呢？什麼樣的問題，你想要什麼布爾表達式可以要求嗎？到底發生了什麼？薩米？ [學生]光標的位置在哪裡？ >>好。光標的位置在哪裡？這是我們需要表達在Scratch的東西，無論是基於位置，甚至色彩等。您可能還記得曾經週一短暫，所有這些事情稱為事件在世界上的Web等方面存在的東西，如onclick和的OnKeyPress 和onKeyUp和onmouseover和onmouseout。因此，實現，即使這些事情，我們已經為在Web上授予即使你不知道的網站，如Facebook和Gmail，你將如何可能實現，因為沒有什麼甚至喜歡在課堂上或習題集，實現這些相同的基礎，與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，我們需要知道怎麼做的第一件事情就是查詢數據庫。我們有龐大的用戶表，有時我們只想說， “我只想要一些符合某些條件，這些用戶。” 同樣，當我們有DOM，我們需要以某種方式查詢。我們需要以某種方式說，“我希望所有的按鈕，看起來像這樣 “或在頁面上的所有圖像”。這些選擇使我們能夠做到這一點。因此，只要簡單回顧一下。這第一個，此＃提交，那是要選擇嗎？有誰還記得嗎？ [聽不見的學生反應] >>是的，沒錯。這是怎麼回事，有一個ID的提交頁面上選擇一個元素。所以說，這個選擇是去工作的ID，散列標籤。的第二個。中心的，究竟會是選擇嗎？是啊。 >> [學生]類。 “沒錯。這是現在要選擇的類。這裡的ID和類之間的區別是一般的ID應該是唯一的內的任何空間，你正在尋找。所以，如果你正在尋找一個完整的網頁，你真的應該只有1個元素與某些ID，所以在這種情況下，提交。另一方面，隨著類，我們可以在同一頁上有超過1元具有相同的類。這可能是有用的說，我想選擇在頁面上居中的一切，而不是僅僅的事情。最後，這最後一個在這裡是一個更複雜一點，但是這是什麼要選擇的DOM呢？ [聽不見的學生回應] >>那是什麼？ [學生]這是一個標籤的東西。 >>在這裡，我們有2個部分。第二部分是說我要選擇一個標籤，輸入標籤，因此，任何元素，這是一個輸入標籤。但我不想只選擇所有的輸入可能是因為像一個提交按鈕輸入像一個文本框，可以輸入。因此，這些方括號我說我只需要選擇這些元素，文本類型。在我的HTML標記中的某個地方，我有一個屬性的類型，該屬性的值是文本。因此，如何對這裡的第一部分？這個選擇的第一個字是形式，那麼我有一個空格，然後輸入部分。這是什麼做的，將在它前面的嗎？這是從根本上限制了我們的查詢。這可能是，我們有一些在網頁上輸入的情況下是不是一種形式的後裔。這將是本會說我只希望有地方在他們之上的輸入標籤一些父元素的一種形式。因此，在這種方式中，我們可以使這些多層次的查詢所以我們不僅要選擇所有匹配給定的選擇。我們種的範圍限制在該查詢別的東西。所以，現在我們知道如何選擇頁面上的元素，讓我們來談談一些關於AJAX。 AJAX是一個仍然非常時髦的縮寫，異步JavaScript和XML。碰巧的是，XML僅僅是一些數據的方式來表示。最近丟失了大眾化的那種，所以AJAX中的X是沒有用的全部時間。基本上，AJAX允許我們做的是HTTP請求從上下文的JavaScript。當我們在我們的網頁瀏覽器，我們導航頁面，我們點擊一個鏈接，我們的瀏覽器是什麼做的是使一個HTTP請求到我們點擊任何鏈接。但是，這並不總是理想的，因為如果是這樣的話，那麼像大衛說，我們總是有讓用戶單擊Submit按鈕，或單擊一個鏈接為了讓任何事情發生，會涉及到一個HTTP請求。因此，AJAX，我們就可以提出這些要求，代表的JavaScript。這意味著無論何時與用戶交互的頁面或什麼發生，在我們的網站上，我們實際上可以使一個綱領性的其他一些PHP文件的要求或其他任何東西和檢索數據，該文件吐出來。讓我們來看看在AJAX的一個例子。這是我們的CS50財經頁面，希望我們中的一些人熟悉。如果我們看一下這個頁面的HTML中，我們看到這裡，我添加了幾件事情，其中一個我已經給這種形式的ID。我已經說過的id =“形式引號”。我這樣做只是因為它的DOM，這是一個有點更容易選擇因為我可以做一個很簡單的查詢。我想在這裡做的是與CS50融資，我想解決一些問題。因此，如果我們去到finance.cs50.net，每次我想要得到的報價，我點擊獲取報價“按鈕，獲取報價按鈕，然後帶我到另一個整頁。如果我想其他報價，我需要點擊“返回”按鈕，然後我輸入的，我得到的報價，和我打“後退”按鈕。這真的是不是最好的用戶體驗。誰真正使用的網站，如果它是很慢的股票價格得到嗎？所以我們想要做的與AJAX是，要一步一個單獨的頁面中移除以查看結果。我們真正唯一的要求是非常小的價格，這只是一個非常小的數據量。因此，有沒有需要我去另一個HTML頁面，下載一個HTML一批新的，也許更多圖片下載，其他一些CSS文件就由我來回答，很簡單的問題此股票成本多少。隨著AJAX，我們可以輕鬆了許多。我們看到，在這裡，我在一個JavaScript稱為quote.js的文件鏈接。我們的實際打開該文件。不存在。我的所有的JavaScript文件都位於HTML 因此，在Web瀏覽器可以訪問它。然後，我們在這裡為JavaScript有一個單獨的目錄，現在這裡是quote.js。在該文件的頂部說，在這裡，我要等待整個頁面被加載之前，我嘗試做任何事情。為什麼是必要的？事實證明，我要在這裡做的是接下來的事情開始尋找一個元素一些選擇相匹配的。如果這個JavaScript執行前加載此元素在頁面上，然後我嘗試做的一切是行不通的，因為我要選擇的東西，現在還沒有。因此，這條線往上頂說，我要你等待，直到一切都加載這樣，我們就保證了我在尋找任何元素，實際上是在頁面上。這個美元符號在這裡我使用的是稱為jQuery的庫。這個jQuery庫使我們能夠利用這些選擇，我們只是看著。說作為一個參數傳遞形式引號，我現在選擇的形式，我們只是看了看。現在我有一個不知何故，在內存中表示。現在這個對象中，這種表達的形式，我現在用的是調用的函數。這個函數的功能是它會附加一個事件處理程序。我們要聽的是本次活動的submit事件。因此，當用戶點擊提交按鈕或按Enter鍵，此事件要解僱。通過掛接到這個，我現在可以覆蓋默認的行為的形式。如果沒有這個JavaScript的形式提交到PHP文件我們使用的行動屬性。但是，我現在說，等待，等待，等待，我不想讓你真正做到這一點。我希望這種情況發生之前，你去嘗試向一些PHP文件。現在我想要做的是什麼呢？在這一點上，我想以某種方式使用AJAX加載的股票是什麼價格。我需要知道的第一件事情是，用戶正在尋找什麼樣的股票了。要做到這一點，我要使用另一個選擇。這是第三個選擇，我們看著面前。這是說，我要開始這個表單元素的ID的形式報價。然後該表格內的某處，必須有一個input元素具有的符號的名稱。如果我們回頭看，我們的HTML中，我們看到，我們有一個輸入名稱=符號。這意味著，這是怎麼回事，選擇該文本框，用戶輸入。這是很好的。我們有文本框。現在，我們只需要知道它裡面有什麼。要做到這一點，我們在這裡，可以調用此方法。值，這說，我知道你有什麼“文本框中。我希望你能告訴我什麼是用戶輸入到該文本框中。現在我們有一個稱為符號的字符串，等於不管用戶輸入的字詞。這是很好的。現在，我們可以使用該字符串，使我們的要求。這是一個新的功能，這除了我們不再將要選擇的元素，我們要調用不同的功能，提供給我們的jQuery。 AJAX的功能是什麼，使這個HTTP請求。因此，我們必須告訴它一些東西。我們要告訴這個函數的第一件事情就是我想要的要求去。在我的項目中的某個地方，我這裡面的HTML目錄稱為quote.php的文件。我可以訪問這個文件，我們看到了，就這樣，如果我去到localhost / quote.php的。我想我提出請求該頁面的JavaScript。什麼類型的請求呢？在此之前，我們看到的形式，方法=“郵報”屬性，這意味著它將會使一個POST請求，所以它不會把任何東西，而不是一個GET請求的URL，只是如果我們只是訪問該頁面的Web瀏覽器，例如被解僱。現在，我們已經說過了，我想使一個HTTP POST請求的頁面位於quote.php。當我們提交表單時，請記住，我們可以訪問這種形式的輸入元素與$ _POST可變。到目前為止，在這個故事中，我們實際上沒有任何數據一起發送。我們只是說，我們正在做一個AJAX請求這裡的請求的類型，我們正在做的。現在，我們需要發送一些數據的頁面。要做到這一點，我們可以使用這個屬性被稱為數據。此屬性的值實際上是一個關聯數組。這樣做的原因是，它允許我們發送的數據只是1個以上。這就是為什麼我們這些在這裡嵌套的花括號內的這些其他的花括號。這些關聯數組中的鍵都將是同樣的事情這些名稱中的屬性的表單元素。這意味著，如果我一起發送一個鍵，符號，這意味著我的PHP頁面可以訪問這些數據與$ _POST [符號] 就像我們以前那樣，當我們提交表單。而現在我們要發送的實際數據將是此關聯數組內的值。我們存儲在變量符號的文本，所以我們要發送沿著現在是一個關鍵的符號和一個值的任何用戶輸入英寸現在，我們已經取得了我們的PHP文件執行，這個HTTP請求，它會發送一些數據，現在只是提出這個要求的客戶端。現在，我們需要作出回應，無論服務器對我們說。要做到這一點，我們有這樣的最後一個屬性，這裡所說的成功。成功的關鍵的價值，這實際上是一個函數，這是一個非常酷的事情你可以做的JavaScript。您不僅可以有整數或數組作為一個關聯數組裡面的值，我們也可以有一個函數。所以說成功，這是我的鑰匙。一個冒號說，在這裡的價值，現在的價值，這實際上是一個函數。所以我們並不需要給這個函數的名稱本身。我們只能說，這將是一些功能。這將需要1個參數。此函數的參數將是無論服務器發送我們的要求。就像當我們的瀏覽器發出請求，服務器發送回瀏覽器顯示，的背景下，AJAX，我們剛剛作出了一個請求，服務器發送的東西回來，現在我們已經是作為一個字符串表示。以該字符串，我只是想顯示在頁面上。要做到這一點，我有一個最後的選擇。我要選擇的元素的ID價。這僅僅是我在頁面上創建一個空白的div，我想設置該分區的內容是什麼服務器發送回。其實我修改quote.php位。而不是調用渲染和渲染一些頁面， quote.php現在只是要為一個字符串，打印出的股票價值。所以，如果你要訪問的頁面，你會只看到小串無論股價。在這裡我們需要做的最後一件事是確保這個函數返回false。這說的是，如果我是裡面的一個事件處理程序該事件處理程序返回false，而不是返回true，這意味著，我不希望原來的觸發事件，。在這種情況下，如果我們沒有任何的JavaScript，我們提交一個表單，我們的Web瀏覽器會說，“我將要發送的數據一起，” 他們會送你到另一個頁面。因為我們現在正在使用AJAX，就沒有必要向用戶發送到另一頁。我們只是同一頁面上動態顯示的結果。我們真的不希望他們去任何地方，我想留在同一頁上。因此，通過返回false，我們保證的形式，我們沒有做。讓我們來看看這實際上看起來像。我們的報價看起來是一樣的。讓我往上拉的檢查員在這裡，所以我們可以看到發生了什麼事情。少巨大的。請記住，如果我們打開“網絡”選項卡上，這是我們可以看到所有的HTTP請求在頁面上正在發生的。對於一個符號，讓我的類型AAPL，然後點擊獲取報價。現在我們看到，蘋果的份額花費一定數量的美元剛一出現在頁面上，但並沒有改變在所有的URL。事實上，這裡是我們剛剛作出的HTTP請求。我們一個POST請求quote.php的。這是有道理的。這是服務器給我們送來。它不再是這個巨大的HTML文件，圖像和類似的東西，它只是一個行文字，然後我們只是顯示的文本行。如果我們回去的頭，看看我們其實裡面的這個HTTP請求發送，我們可以看到，在這裡，我們一起發送符號的鍵和值AAPL，這就是用戶輸入的字詞。這是很好的，但它仍然是有點討厭。我還是要單擊此按鈕可以獲取股票報價。我們是忙碌的人們，我們沒有時間去按一下按鈕。谷歌意識到這一點，而當他們實現谷歌即時。谷歌即時是在您輸入時，它只是開始為你顯示結果所以你不必擔心即使點擊搜索。其實，一個有趣的故事了這一點。一旦谷歌即時出來了，人都一樣，“哇，這是超級驚人的。” “這太酷了。” 和在斯坦福大學的學生，19歲的時候本網站YouTube的即時。所有的YouTube即時並有效地搜索YouTube的瞬間。因此，而不是去YouTube.com並點擊搜索，當我開始打字到YouTube即時的東西，如CS50，我們可以在這裡看到，它試圖在一個緩慢的互聯網連接填充這些結果住。要做到這一點，我們實際上可以做一個很簡單的修改給我們的quote.js的文件。現在，我們把此事件提交表單時。我們真的不希望使用戶不再提交該表格，讓我們，而不是每次用戶按下一個鍵觸發此事件。要做到這一點，讓我們先改變事件提交KEYUP。這意味著，而不是等待的形式提交，每次按下該鍵，事情是會發生什麼。它不再是有道理的附加keyup事件的整個形式。我們真正關心的只是搜索框的。要選擇，現在，我們可以改變這，而不是形式引號，形式報價，我們將有一個輸入（TYPE = TEXT），或者我們可以說，（=符號命名） - 任何我們想要的。現在我們要做的最後一件事。記住這裡的時候，我們說，返回false 我們說，我們不希望，默認情況下觸發事件，。但是，碰巧的是，如果我們禁用，現在，無論我們輸入是不會顯示在瀏覽器中了因為那將是輸入到一個文本框中的默認行為。我們不再需要重載它，所以讓我們來破壞這個返回false。如果我們保存和重新加載頁面，現在當我開始打字AAPL 你會看到在這裡的底部，股票價格會自動完成。因此，這裡是CS50財經即時。實際上是一個有趣的故事的YouTube即時是，學生只是一種寫一晚的項目，第二天YouTube的CEO，他提供了一份工作。所以就這麼簡單，你CS50學生，您的最終項目可以讓你的工作在YouTube。類似的東西是項目的最後一個很酷的想法，對吧？我們有一些現有的功能，我們希望整合。我們改善用戶體驗了一點點，，突然在YouTube即時搜索的東西，可能是一個更容易尋找它比一般的YouTube。所以這是AJAX的縮影。在約瑟夫顯示的例子中，我們看到了很多的自動完成，和那些自動完成的，真的，真的很方便，因為我們並不一定要記住 - 例如，如果你不記得蘋果的股票價格我們只知道這是AA的東西，而不是僅僅對我說， “A股這件事情花費這麼多錢。” 樣的，我想知道哪些股票開始使用AA。我們可以做到這一點真的很好，已經包含引導程序庫，裡面的CS50融資。如果你來這裡的JavaScript標記，向下滾動到事先鍵入的內容，這是一個不錯的插件，已經有人為我們寫的，我們可以很容易地使用這樣的功能。我輸入A和這裡列出的一些國家開始A. 比方說，我認為這是真的很酷，這是我包括在我的網頁上。事實證明，這是真的，真的很簡單。讓我們在這裡quote3.js跳。我的文件看起來有點不同。在這裡，我的所有AJAX的東西是一樣的。我要加載的庫存數據，而不必去到另一個頁面。但現在我想使用這個插件。引導文件究竟如何我能做到這一點的很好的例子。我想說的是，“在這裡，我想自動完成輸入，” 我要調用這個函數，稱為預輸入，這就是要為我們處理所有的預輸入的東西。初始化列表，它會做所有我們的過濾。唯一需要知道的是什麼樣的數據，我們自動完成。所以我只是發現了這個關鍵，通過閱讀文檔和看的例子。如果我給它一個重要的來源，這個鍵的值僅僅是一些陣列的事情，我想自動完成。這個變量來自這個其他文件。我打開了symbols.js。這symbols.js這只是非常，非常大的數組，其中包含字符串所有這些股票從納斯達克的符號。如果我想跳回至HTML，所以jharvard，虛擬主機，globalhost，HTML，模板， quote_form。從那時起，現在被稱為quote3.js，讓我改變我的JavaScript文件包括。現在我有quote3.js的，所以我要加載中，單獨的JavaScript文件，一個具有該引導程序自動完成。現在，當我跳回到瀏覽器，重新載入頁面，並我開始打字AA，有我的自動完成。這是真的就這麼簡單。我有1行代碼，只是說：“這是自動完成的事情，我想上。” 突然間，我有這真的，真的很不錯的功能不是很多的努力。當你正在開發的網站，尤其是前端方面的東西，你會發現是這樣的話有很多。有很多，很多，很多非常酷的免費圖書館有使超級容易做這樣的事情。誰能想到在這個大的符號列表簡單地自動完成的任何缺點嗎？這是不是最好的，這種方法可能是一些什麼？是啊。 >> [學生]的時間，如果你有很多的[聽不清] 是啊。現在，我們正在下載這個龐大的JavaScript文件，有很多的符號。所以，如果我們有一噸重的東西，這可能會增加的延遲不僅搜索而且實際的文件下載。大。還有別的嗎？現在沒有真正意義上的相關性。如果我鍵入A，公司在這裡顯示的可能不是最熱門的公司，開始A. 我到蘋果之前，它可能需要一些更多的字符來尋找我在尋找什麼。這種自動完成沒有這個意義上的相關性。這只是說，“我要顯示任何匹配。” 相反的是，我想為我的搜索以某種方式結合一定的相關性。如果我走在這裡，雅虎財經，finance.yahoo.com 如果我試圖進入雅虎財經的頁面上的符號我開始打字goog，我有這個很好的事情的清單。顯然，它看起來像雅虎財經是做一些更聰明在這裡。他們有一定的關聯，他們也有更多的信息喜歡這個名字的股票。這件事情，我真的不能與我的股票符號列表。我想這一點，所以我打算把它。要做到這一點，讓我們的做一些事情，。讓我們先打開此頁面上督察因為我們看到這個頁面是不重裝，所以它可能是使用AJAX莫名其妙地裝載它的數據。我們可以找出什麼樣的數據加載。如果我點擊這個網絡“選項卡上，這些都將是所有的請求，開始被解僱。現在，如果我輸入咕，我們可以看到，我剛剛得到一個新的HTTP請求。這可能是這些數據是來自哪裡。果然，我看這個URL，這是一個有點奇怪的命名，我們可以看到，這正是雅虎的發送數據。我已經創建了一個單獨的的文件名為suggest.php的精神，以查找功能非常相似。它基本上是雅虎的URL進行查詢，得到一些數據，並將其發回給我。現在，而不是使用大，巨大的符號列表，我可以使用雅虎的很好的相關性的東西，我沒有下載大量的JavaScript文件。我只是要拉下實際相關的股票符號。讓我們跳進的。因此，HTML，JS。我們現在在quote4。現在，我們不再使用該大名單的JavaScript文件。但這裡有一個小的設計問題。我們曾經說過，A在AJAX是異步的。這是什麼意思的是，當我做一個AJAX請求，第8行，這是我的AJAX請求實際上是發射。比方說，現在我這裡有一些代碼，會做一些東西我想在頁面上提醒用戶注意或改變一些東西。什麼是不可能發生的事情是瀏覽器還沒有要等待這個請求繼續之前下來，擊中這條線。這就是異步的一部分。這將會使這一請求，並說，“當你完成， “回來，並調用該函數，我告訴你打電話內的成功。” 這意味著我們不能只是預先下載的所有股票。我們需要，使請求並等待的東西回來。這意味著，之前，我們可以簡單地告訴引導， “這是我想你自動完成的事情的清單。” 我們不能再這樣做了，因為我們不知道我們想要的東西實際上是自動完成的。幸運的是，自舉想到了這一點，因為這些都是聰明的傢伙在那裡，他們實際上給了我們另一種方式來加載這個預輸入的插件。在此之前，源屬性的值，這只是這個大陣自動完成的事情。現在的源屬性實際上是一個函數，此功能的目的是要弄清楚的事情是自動完成的。要明白這一點，就是它的是它會要求雅虎財經什麼是自動完成的最好的東西。要做到這一點，我會做一個非常類似的AJAX請求。我要請求這個頁面suggest.php。我想還是一起發送的符號。現在，我的成功，引導文件告訴我，以填充該列表中的東西，所有我需要做的就是在這個數組傳遞給回調函數。但是，且慢。如果這應該是一個數組，AJAX送我回文本，這怎麼可能呢？這引入了一種新的方法稱為JSON數據交換。在這種情況下，我們不只是發送一個簡單的文本字符串。現在，我們正在處理這個更複雜的股票符號列表。這些股票符號也包括像公司的名稱或目前的價格。只是用一個很長的字符串，這不是在任何可預見的方式格式化不會是最好的方式得到這個數據，我從雅虎的服務器的方式，我可以很容易地理解。 JSON是一種技術，利用我們如何在JavaScript中創建關聯數組。這看起來很像一個JavaScript關聯數組，而事實上，這是因為它是。 JSON代表JavaScript對象表示法。這基本上是一個商定來回傳輸數據的格式。在這裡JSON對象或本JSON關聯數組發送一些數據有關課程。此陣列的鍵像當然，有一個值，該值的CS50，在這裡我們可以看到，我可以有一個值，它是一個數組。我沒有做的事情，比如解析出字符串，並期待逗號做瘋狂的事情一樣。因為這是聲明在此JSON格式， JavaScript和jQuery已經有函數將字符串轉換為這樣的JSON轉化為實際的JavaScript關聯數組我們可以一起工作。這樣做是因為簡單的說，不再是這個文件，suggest.php，送我回一個簡單的文本字符串，但我知道這是要送我回JSON。這意味著，可以轉換成JSON的JavaScript關聯數組。因此，jQuery，我想請你為我做的。這意味著，這裡此響應參數，這已經不再只是一個字符串。因為我們已經告訴了jQuery的，這裡是一些JSON， jQuery是足夠聰明，說，“你想JSON？” “我要轉換到一個關聯數組你。” 讓我們來看看在“網絡”選項卡上，一旦我們有quote4.js。我們將改變這一點，並重新加載頁面。現在，我要再次輸入的A-A。我已經作出了的夫婦請求suggest.php，但現在這種反應，，而不僅僅是字符串，它是JSON。所以我說，“又來了一個關聯數組，有一個開放的大括號”。這個關聯數組的第一個也是唯一的密鑰被稱為符號，然後在這裡是一個數組的所有相關符號現在從雅虎財經，而不是從那個巨大的列表。這就是我如何可以簡單地填充這個自動完成插件一些數據不是來自本地文件，該文件已經預定但其他的東西。事實證明，我們實際上可以利用的技術，稱為JSONP，或JSON填充，將消除這種suggest.php的中間人。但不是這樣做的，而不是讓我們來看看我是如何可以改善這一點更。我真的很喜歡引導的，事先鍵入的。這是非常好的。但我們在JavaScript越來越好，我們要種做自己，也許看看這是什麼插件可以做。讓我們不再使用該預輸入的東西，讓我們嘗試使這個建議的股票，自己。在這裡，我們要開始以同樣的方式quote6.php。每當有人類型的東西，我們希望做一個AJAX請求。這是我們原來的CS50財經即時。不是要求作出quote.php，現在，我們請求了同一個文件之前，suggest.php，它只是將數據從雅虎財經。同樣，我們仍然預期JSON，但因為現在的預輸入，這對我們不這樣做，我們還需要發送沿內的當前文本框的值是。現在我們知道要問什麼，雅虎財經，所以現在在這裡，我們要執行一次請求完成的功能。我們沒有插件，使我們的列表，所以在這裡我們要建立一個列表的建議。要做到這一點，很像我們在PHP的HTML字符串連接起來這些大然後我們印製了他們，在JavaScript中，我們可以做同樣的事情。首先，我們要開始這個字符串建議，此字符串只包含了一些HTML。我們希望它是一系列的事情，所以我們要開始了與此列表的標籤，現在我們要遍歷所有的符號，返回到我們。請記住，因為我們前面提到的數據類型：'json'的，這是不是一個字符串。這已經是我們的一個數組。這真的很酷。我們可以簡單地說，“我希望你能添加一個列表中的元素。” 我們將將其放在身邊的那一個元素，我們可以給它一個類的建議，所以我們知道它是什麼，現在這裡是我們回來，從雅虎財經的符號。一旦我們創建了一個元素的符號，我們已經得到了，我們只是想以關閉列表。所以，現在的建議表示這個小HTML片段當放在頁面上的將是我們正在尋找的東西的列表。現在，讓我們實際在頁面上。要做到，我實際上已經創造了另一個空的div，我已經給了它一個ID的建議。就像我們設置的div的價格，庫存數據將顯示的內容，現在，我們只是想設置這個div的內容，不管這個字符串是包含這些符號。通過使用這個HTML的方法，這樣的建議變量，這個字符串，是一個字符串的HTML。我希望你的HTML，並把它裡面的div建議。我們剛剛附加的東西，現在的DOM。我們增加了一些新的元素的DOM，我們現在可以顯示在頁面上。讓我們來看看這是什麼看起來像。如果我們加載在quote6和現在我們回來，現在，當我開始打字AAPL，我們不再有引導程序自動完成，但我們現在有這個名單，我們自己。這是一個有點醜陋，比引導的預輸入，例如，但它允許我們做的另一件事情。當我們正在尋找在這個引導程序插件，我們看到，當我們自動補齊，自動完成的值是AAPL。這也許不是太有幫助了。作為一個用戶，我可能不會立即承認所有的股票符號。我可能更容易識別，是公司的實際名稱。因此，它是真正有用的，而不是說AAPL 如蘋果公司說了些什麼因為我們已經推出了自己，我們可以很容易地做到這一點。讓我們打開我們最後的報價文件，所以quote7。同樣的事情。我剛剛創建了一個PHP文件，該文件將返回給我們更多的不僅僅是符號。它也會給我們公司的名字。因此，我們正在做同樣的事情。我們正在做一個AJAX請求。一旦請求完成後，我們將在這裡執行此功能，此功能是要建立一個大的字符串的元素。但不同的是，這些列表的值不再僅僅是符號，它現在的名字。因此，我們有一個小問題。當我們用我們的查找，我們需要以某種方式傳遞給它的符號。我們可以通過查找類似微軟公司。我們需要通過它MSFT。當我們編寫HTML，我們有很多不錯的內置屬性。一個A可能與它的href或一個類。但我們現在真正需要的是什麼，每個環節有與之相關的股票代碼。有沒有內置HTML屬性的股票代碼，但幸運的是，HTML5可以讓我們創建我們自己的屬性，是我們想要的。說數據符號中，我介紹了一個新的屬性他的名字我只是做了起來，這是好的，因為我前面的這個數據。我們要到店裡面有符號的股票。這也就意味著，即使我們顯示的價值，公司的名稱我們的自動完成內，我們仍然在記憶的象徵是與每個公司相關聯。我們這樣做的方式是該元素本身的內部。因此，這意味著我們需要作出更多的變化。當我們點擊它，現在，我們需要利用的符號屬性而不僅僅是它的價值。如果我們備份，我們建議附加一個事件處理程序。每當一個點擊這些建議，我現在想要做的事情。我想要做的是改變該輸入框的值。現在，我想設置這個相同的val函數。因此，不帶任何參數的值函數返回到你已經在文本框中，但如果你給它一個字符串，該字符串，並把它在文本框中。以同樣的方式，我選擇它的文本框中。它的名字是符號的形式引號內。現在，我要送它的值的屬性數據符號。這東西是新的，這$（本）。這指的是被點擊的元素。我們可以看到，在這裡，我們不會附加的click事件每個元素單獨一類的建議。相反，我們正在接近這一點是不同的。相反，我們說的這個建議DIV裡面的東西，記住的是該列表的容器，如果這個div裡面的東西被點擊，它有一個類的建議，我想觸發該事件。基本上，這意味著什麼，我們可以做的是，我們可以重複使用相同的事件處理程序在列表中的所有的東西。所以，我們必須有一個事件處理程序的第一個元素不同的事件處理程序的第二個元素。相反，我們可以說，“我希望同樣的事件處理程序適用於一切在我的名單。” 但是，我們需要以某種方式知道哪個元素被點擊。這個“本”關鍵字表示這一點。這是一個對象，該對象只是由用戶點擊。如果我只是點擊第三個鏈接，這表示，第三環節的元素，這意味著我可以得到它的屬性，數據符號，我們知道必須包含的符號，我只是點擊與該公司相關的。如果我們跳回到我們的融資頁，我們現在可以看到，一旦我開始打字像MSFT，我們不再只股票符號，我們現在得到實際的公司。但是，當我點擊這些公司，我們可以看到，我們實際上是在填充的文本框的公司名稱但與任何存儲這些數據的屬性的內部。所以，如果我實際檢查通過右鍵單擊這些元素之一並單擊“檢查元素”，我們其實可以看到這看起來像。記住，這是東西，我們創建for循環內的當我們在建立該字符串的HTML。在這裡我們可以看到，這個數據符號的值MSFT，這是偉大的。這是我們期待的。這是符號，這就是我們得到的價值，我們需要使用裡面的這個文本框。這就夠了，因為這是一種無聊報價表。讓我們只是做一些快速增強我們的產品組合。如果你已經使用了一段時間，你CS50金融開始買入和賣出大量的股票，此表最終是會得到相當大的，你想要的股票行情自動收錄器，當然。一旦表是非常，非常大，它可能是有用的用戶嘗試搜索了它。如果我開始在搜索框中輸入一些像迪斯尼內部和尋找我的米老鼠股票的，我們可以看到，現在過濾表根據我剛才輸入。這個功能看起來超級複雜，但它是真的，真的很容易使用jQuery和JavaScript。這portfolio.php文件包含一個JavaScript稱為portfolio.js的文件的。讓我們來看看在那。因此，HTML，JS，組合。這裡就是我們正在做的搜索在桌子上。我需要做的第一件事情是事件處理程序附加到該文本框因為我們知道，我們希望我們的過濾功能，以火每次用戶按下的東西，因為我們沒有時間搜索按鈕。我們需要做的第一件事情是找出用戶搜索什麼，就像我們以前那樣。此關鍵字是指用戶交互的當前元素。由於用戶交互的搜索框， $這代表搜索框，，所以this.val為我們提供了用戶輸入的搜索框裡面有什麼。所以，現在我們想要做的是，我們要遍歷所有的行我們的表內。要選擇在我們的表中的所有行，我給了該表的表組合的ID，和每行代表一個TR元素，所以這個選擇是要返回給我一個大數組我的表中的所有行。現在，我想遍歷該數組。我可以一個for循環，但是jQuery實際上為我們提供了很好的功能稱為“每一個”。每個做的是每一個接受一個參數，該參數是一個函數。它要做的是要申請的功能，這個列表內的每一個元素。這個函數接受一個參數的E，當此功能被執行時，此e是將被替換的第一行，然後是第二行，第三行。通過這種方式，這是同樣的事情，一個for循環然後盤算根據當前元素的索引您的內部循環。在每次迭代中，對每個表中的這些元素中，我要檢查的文本元素 - 該行的單元格內的文本 - 符合我在尋找什麼。大長串的命令是我能做到這一點。首先，現在指的是 - 因為它裡面有一個新的功能 - 這是現在的表中的行。我想利用當前的表中的行，我想要得到它的所有子。請記住，DOM是一個層次結構樹，這意味著，元素有一個兒童的數目。兒童函數將要返回到我回來的所有的元素的數組的孩子，在這種情況下，在表中的行。這僅僅是簡單的細胞內的行。我只是想在第一個單元格進行搜索。這第一個功能，我說給該數組的第一個元素。然後在文本的功能說我到底是什麼，細胞內的因為我想，要搜尋該文本。最後，讓我們將其轉換為小寫，所以，我們可以做的文本不區分大小寫查詢。最後，我們希望看到表內，如果該字符串包含字符串，我們正在尋找。 indexOf函數在JavaScript中做到了這一點。它告訴我們這個字符串是否包含另一個字符串。如果單元格包含的是真的，我在尋找什麼，然後我想，以確保將其顯示出來。 show方法會說，“顯示的元素。” 如果不是這種情況，那麼，這意味著什麼，我尋找不包含該行內的，所以我要隱藏的用戶。實現這一很好的過濾效果，我們不再看到整個表。如果你感興趣的以及如何使這個股票，我們將在網上發布的源。但是，它真的很簡單。 jQuery有可怕的這些動畫的和操縱CSS屬性的方法。所以，這是對我來說。那麼，擺在我們面前呢？你會看到在幾天內，最終的項目建議書，是因為。最終的項目建議將問你幾個問題，但其中將有三個里程碑 - 一個一個“好”的里程碑，一個更好的里程碑，一個最好的。真正的想法是幫助你們設置您的期望所以，最低限度，你會很高興與您的最終項目的輸出這將是“好”到目前為止，你所關心的。但後來的利益，讓你達到只需要一點點的東西更好的最好的東西，我們也將推動你走向，以及排序。 CS50哈克一個馬拉松，同時，在幾個星期。通常情況下，我們這樣做彩票基礎的基礎，因為興趣，但我們會採取幾百我們從哈佛廣場的穿梭巴士肯德爾廣場，微軟有一個美麗的設施，形象地稱為“書呆子” - 新英格蘭研究和發展中心。我們會得到晚上8點左右，我們還會有一些食物。凌晨1點左右，我們將有更多的食物。早上5點左右，如果你還醒著，我們將前往IHOP或帶你回到校園。目標是深入到最後的項目旁邊的同學和工作人員。幾天後是的CS50公平，這是真正的意思是你們的機會來展示你的工作本學期和取得的成就而擦肩的相互感，每個人都做了。隨著中說，非常感謝到湯米和約瑟夫，我們星期一見。 [掌聲]