[Powered by Google Translate] [Tuần 9, Tiếp tục] [David J. Malan - Đại học Harvard [Đây là CS50. - CS50.TV] 

Đây là CS50. Đây là phần cuối của tuần 9. Cám ơn rất nhiều. Cuối cùng. Tuần 9. Tôi đã nhận nó. Hôm nay chúng ta tiếp tục cuộc trò chuyện của chúng tôi về lập trình web với một tầm nhìn hướng tới dự án cuối cùng, không phải vì bạn phải làm một cái gì đó dựa trên web cho các dự án cuối cùng nhưng vì một cho các dự án cuối cùng hoặc sau khi CS50 điều này chắc chắn là hướng mà phần mềm hiện đại. Tuy nhiên nó không phải là thực sự là một điều dễ dàng. Trong thực tế, là một trong những điều khó khăn nhất để làm là khía cạnh của thiết kế. 

Ví dụ, theo thiết kế, chúng tôi có nghĩa là thực sự nhận được giao diện người dùng hoặc trải nghiệm người dùng. Tôi dám khẳng định - và chúng tôi biết từ một tập hợp các vấn đề gần đây khi một số các bạn phát sóng lời phàn nàn của bạn về một số phần của phần mềm hoặc phần cứng tức giận bạn, cho dù trong khuôn viên trường hoặc tắt - có rất nhiều trang web ra có, có rất nhiều phần cứng ra khỏi đó, là loại sucks. Nhưng thực tế là làm cho mọi thứ dễ dàng để sử dụng, chưa dù sao mạnh mẽ là một thách thức rất khó khăn. Vì vậy, hôm nay tôi hỏi Joseph và Tommy để tham gia cùng tôi lên đây để chúng tôi có thể có một cuộc trò chuyện, cả về thiết kế và những gì các loại của các quá trình suy nghĩ nên bắt đầu đi qua đầu của bạn khi bạn thiết kế các dự án cuối cùng của bạn, những nỗ lực của bạn trong tương lai. Và sau đó với sự giúp đỡ của Tommy, chúng tôi sẽ xem xét một số chi tiết thực hiện. Làm thế nào bạn có thể có một số tầm nhìn trên giấy hoặc trong tâm trí của bạn sau đó bạn có thể thực hiện chương trình bằng cách sử dụng một số các công nghệ và kỹ thuật, chúng tôi đã bắt đầu nói về, cụ thể là JavaScript và một cái gì đó mới hơn, là AJAX, JavaScript không đồng bộ. Điều đó cho phép bạn tạo ra tất cả sự năng động của một giao diện người dùng bằng cách lấy dữ liệu nhiều hơn và nhiều hơn nữa dần dần từ một máy chủ. Vì vậy, chúng ta sẽ thấy một số của những đoạn như ngày hôm nay. Một sang một bên, nếu bạn quan tâm đến tập trung trong lĩnh vực khoa học máy tính hoặc minoring khoa học máy tính, biết rằng thứ sáu này vào buổi trưa trong Maxwell Dworkin 221 sẽ có một sự kiện pizza nơi bạn có thể tìm hiểu thêm một chút về khoa học máy tính. Trên đường ngày hôm nay ra khỏi cửa, bạn sẽ có thể chọn một tài liệu hướng dẫn không chính thức để CS tại Đại học Harvard. Chúng tôi sẽ đặt nó vào thùng rác bên ngoài ở độ cao eo do đó nếu bạn muốn lấy điều này và tìm hiểu thêm một chút về CS, sẽ ở đó cho bạn như nó đã được trong tuần 0. Ngoài ra nếu bạn muốn tham gia với chúng tôi để CS50 trưa thứ sáu này tại 1:15 pm, đầu để cs50.net/lunch. Nếu không có thêm ado, tôi cung cấp cho bạn giảng dạy đồng Joseph Ong. Hi. [Vỗ tay] Cảm ơn. Lần đầu tiên tôi học được về thiết kế trong một lớp học ở đây gọi là CS179. 

Các giáo sư vào thời điểm đó nói với chúng tôi câu chuyện về giáo sư khác những người đã đi đến một khách sạn và sử dụng vòi nước. Bất cứ ai có thể cho tôi biết những gì 2 nút bấm bên trái và bên phải? [Sinh viên] nóng và lạnh. >> Nóng và lạnh. Tốt. Những gì bạn thường mong đợi, phải không? Giáo sư sau khi sử dụng vòi nước này muốn đi tắm, và ông tiến hành để sử dụng. Ông nghĩ rằng ở bên trái và bên phải là dành cho nóng và lạnh, phải không? Nhưng bất cứ ai có thể cho tôi biết những gì thực sự làm? Bất kỳ tay? [Phản ứng sinh viên không nghe được] >> Một gợi ý là? [Sinh viên không nghe được đáp ứng] >> Nhiệt độ? Vì vậy, một trong số họ điều khiển nhiệt độ và các điều khiển khác? >> [Sinh viên] Áp lực nước. Áp lực nước. Tốt. Giáo sư này đi vào điều này và nghĩ rằng họ đang kiểm soát nóng và lạnh, biến một trong những quyền, mà ông cho là nóng, tất cả các con đường lên vì anh ta muốn đi tắm ấm áp. Vâng, những điều này không thực sự phù hợp, do đó, ông nhận được kinh nghiệm này không phải là rất thú vị được tắm nước lạnh, và tất cả chúng ta đều biết những gì mà cảm thấy như. Đây là một ví dụ của một lỗ hổng thiết kế. Những gì tôi có nghĩa là bởi đó là kỳ vọng của mình từ vòi nước không phù hợp với những gì đã đưa ra khỏi vòi sen, đó là loại không may cho anh ta. Vì vậy, đây là một ví dụ về một lỗ hổng thiết kế điều đó xảy ra trong cuộc sống thực. Nhưng chúng tôi thấy tất cả các loại của những người khác là tốt. Chúng tôi có thể không phải là người hâm mộ của hệ thống MBTA. Đây là một hệ thống tàu điện ngầm thực sự ở London, nói rằng, "Nút này không sử dụng." Tại sao ngay cả trên đó? Tại sao chúng ta quan tâm? Khi tôi còn là một đứa trẻ, là hiểu biết về công nghệ trong nhà, bất cứ khi nào máy tính sẽ sụp đổ, mẹ tôi sẽ đến với tôi, màn hình này hiển thị cho tôi và hỏi tôi điều gì đã xảy ra. 

Thậm chí tôi không biết điều này có nghĩa là gì. [Cười] gì? [Cười] Đôi khi chúng tôi cảm thấy như các nhà phát triển phần mềm chỉ là trolling chúng tôi. Khi người sử dụng chúng ta như thế, "gì đang xảy ra Có người cho chúng tôi biết." Điều này tất cả đi xuống đến một vấn đề của thiết kế. Thiết kế, như chúng ta có thể thấy, không phải là hoàn toàn về thẩm mỹ, nó không phải về những điều trông như thế nào. Chúng tôi thấy rằng điều này rất ít cửa sổ pop-up trên đây thực sự trông khá đẹp. Nó có một bóng thả trong nền, nó có bán kính biên giới xảy ra. Đó là loại khá. Nó không thực sự cũng được thiết kế bởi vì nó không phải là rất thân thiện với người sử dụng. Mà ít pop-up mà đi lên không thực sự cho tôi bất kỳ thông tin nào về những gì đang xảy ra, nó không cho tôi biết bất cứ điều gì như người sử dụng về việc làm thế nào để phục hồi từ lỗi đó. Chúng tôi muốn để suy nghĩ về những điều mà thiết kế không phải. Đầu tiên, nó không phải là thẩm mỹ. Nó cũng không phải nhồi ứng dụng của bạn với tấn các chức năng không cần thiết. Nếu bạn là một nhà hàng Thái Lan, bạn có thể không muốn là một nha sĩ tại cùng một thời điểm. Và với câu hỏi Facebook, không phải là nhiều người sử dụng nó và nó đã không thực sự là cốt lõi của những gì họ đã được xây dựng. Và do đó, nó là tốt đẹp để suy nghĩ về không quá nhiều số lượng trong những điều rằng bạn đang đưa vào ứng dụng của bạn nhưng chất lượng và làm thế nào bạn đang làm cho rằng kinh nghiệm người dùng tốt hơn bằng cách thực sự cải thiện trên những gì bạn đã có. 

Tóm lại, thiết kế cho chúng ta biết những gì chúng ta nên xây dựng. Ví dụ, nếu chúng ta đang xây dựng một cái gì đó cho phép chúng ta tìm kiếm những thứ lên, như Google, ví dụ, chúng ta nên làm những việc theo cách thức yêu cầu người dùng để có được nhiều nhấp chuột để có được những gì họ muốn, hoặc chúng ta nên làm điều đó trong một cách, ví dụ, với Google Instant hoặc tự động hoàn chỉnh cho phép chúng ta có được kết quả của chúng tôi nhanh hơn? Kỹ thuật liên quan đến, như Tommy sẽ cho bạn thấy, thực sự xây dựng nó. Có rất nhiều loại thiết kế. Ví dụ, nếu bạn đang xây dựng một cái gì đó để triển khai một cái gì đó trong một quốc gia thế giới thứ ba, nơi không có nhiều điện hoặc công nghệ mà nhiều, bạn phải thiết kế những gì bạn đang xây dựng một cách dễ dàng cho phép truy cập đến những người ở đó. Nhưng những gì các loại quyết định thiết kế khác có thể có hoặc có thể được tham gia vào một cái gì đó như thế này? Yeah. Tôi thấy một bàn tay. [Không nghe được sinh viên phản ứng] >> phải. Chính xác. Tiếp cận là một điều. Rất nhiều người không nghĩ về, "Điều gì về người dùng của tôi?" giống như những thái cực của quang phổ hoặc. Tôi có người sử dụng có thể có khuyết tật mà tôi không nghĩ về và tôi chỉ suy nghĩ về thiết kế cho người dùng thông thường. Internet có thể truy cập bởi tất cả mọi người ngày nay, và tôi nên được thiết kế cho những người là tốt. Bạn có thể làm cho các loại quyết định thiết kế khác? Vâng. >> [Sinh viên] Chi phí. Chi phí. Rất tốt. Một điều chúng ta có thể căn cứ quyết định thiết kế của chúng tôi là chi phí. Nếu chúng tôi là một doanh nghiệp, bạn muốn xây dựng một cái gì đó mà không mất nhiều chi phí để sản xuất nhưng có thể bán với chi phí đặc biệt cao hoặc có thể nhận được một số lợi nhuận. 

Đây là tất cả các loại khác nhau của thiết kế, nhưng khi chúng tôi đang xây dựng một cái gì đó trên Internet hoặc khi chúng ta đang xây dựng một cái gì đó mà có lẽ không chi phí mà nhiều để xây dựng, như các ứng dụng Internet - bạn không phải ném vốn nhiều vào nó để làm một cái gì đó thực sự hoạt động - những gì chúng ta đang lo ngại hơn về kinh nghiệm người dùng. Chúng tôi gọi đây là thiết kế người dùng làm trung tâm. Về cơ bản những gì người sử dụng thiết kế làm trung tâm liên quan đến đặt mình trong những đôi giày của người sử dụng của bạn. Nếu dấu hiệu có người cho những gì tôi đang xây dựng, họ đã rõ ràng đến các ứng dụng cụ thể của tôi với một mục tiêu trong tâm trí, với một nhiệm vụ mà họ muốn để hoàn thành. Và công việc của bạn không phải là chỉ để giúp họ hoàn thành nhiệm vụ đó nhưng để giúp họ hoàn thành nhiệm vụ đó một cách có hiệu quả, trực quan, và, như một số người nói trên có thể truy cập. Hiệu quả có nghĩa là gì? Hiệu quả có nghĩa là người dùng của tôi một cách nhanh chóng như thế nào hoàn thành nhiệm vụ được giao diện của tôi. Liệu nó có nhiều nhấp chuột cho họ để có được từ một nơi khác? Là nó tẻ nhạt? Họ phải thực hiện rất nhiều công việc lặp đi lặp lại? Chúng tôi muốn làm cho quá trình hiệu quả nhất có thể vì vậy họ không phải để làm những loại vật. Trực giác nhạy bén, đó là, ví dụ, nếu người dùng nhìn lên giao diện của tôi, là nó dễ dàng cho họ để có được từ nơi này đến nơi khác? Dễ dàng cho họ để tìm ra những gì họ phải bấm vào trong giao diện của tôi để cho họ để đạt được mục tiêu hoặc nhiệm vụ mà họ muốn đạt được? 

Và cuối cùng, là một trong những người nói trên có, khả năng tiếp cận là rất quan trọng. [Nam loa] Nó đi kèm miễn phí cho những thứ như tầm nhìn, như làm thế nào để thực sự thiết kế một cái gì đó cho một người nào đó bị mù? Oh. Đối với những người không thể nhìn thấy ở tất cả, chúng tôi có một cái gì đó được gọi là trình đọc màn hình. Những gì bạn cần làm là bạn nên xây dựng trang web của bạn trong một cách rằng, ví dụ, đặc biệt là công nghệ mà chúng ta gọi Có rất nhiều thứ. Tôi nghĩ có trình đọc màn hình được gọi là JAWS. Rất nhiều những điều này dựa vào những gì chúng tôi gọi là quy tắc trong khu vực để đọc cho người sử dụng những gì hiện diện trên trang. Đối với những người không thể nhìn thấy, bạn cần phải chắc chắn rằng các màn hình độc giả thực sự có thể nhận nội dung trên trang và thực sự có thể cho người dùng của bạn, nếu bạn không thể nhìn thấy, ít nhất bạn vẫn có thể hiểu được nội dung trên trang. Yeah. Okay. Đủ nói về thiết kế tốt. Chúng ta hãy nói về thiết kế xấu. Đây là những điều mà bạn không nên làm. Bất cứ ai có thể cho tôi biết về kinh nghiệm của họ với Craigslist và những gì họ nghĩ là không tuyệt vời như vậy về thiết kế này? Vâng. >> [Sinh viên] Tôi nghĩ rằng có quá nhiều từ trong một khu vực. Quá nhiều từ, phải không? Hoàn toàn áp đảo. Bạn đến trang này và bạn sẽ được chào đón với một bó toàn bộ những thứ ở đây thậm chí có thể không quan trọng với bạn. Ví dụ, bạn sống trong một nhà nước mà không bắt đầu bằng chữ cái này. Hãy nói rằng bạn sống ở Texas hay một cái gì đó. 

Bạn phải di chuyển tất cả các con đường xuống trang để có được vị trí bạn đang ở. Tôi đến từ Boston, vì vậy hãy cho tôi nhìn ở Massachusetts. Massachusetts ở đâu? Ồ, nó ngay tại đây. Ồ, đó là Boston. Okay. Hãy nhìn tại Boston. [Cười] Khá áp đảo, phải không? Awkward những điều trên đó. [Cười] Hãy nói rằng tôi đang tìm một nơi nào đó để sống. Có bao nhiêu người đã thực sự được sử dụng Craigslist? Tấn bạn. Có nhiều cách khá xấu để nhìn vào điều này, nhưng chúng ta hãy xem xét điều này. Sự khác biệt giữa img và pic là gì? Bất cứ ai có thể cho tôi biết? Có thực sự là không có sự khác biệt. Họ có nghĩa là chính xác những điều tương tự, nhưng họ có nhãn khác nhau cho họ vì một lý do nào đó. Nếu tôi bấm vào Có hình ảnh, không có gì xảy ra trên trang. Tôi thực sự có nhấp vào Tìm kiếm một lần nữa cho một cái gì đó xảy ra. Điều gì có thể là một quyết định thiết kế tốt hơn có thể được thực hiện ở đó? Nếu tôi nhấp vào bộ lọc đó, tôi có lẽ muốn lọc bằng hành động cụ thể hoặc loại nào đó. Vì vậy, thay vì phải nhấn Tìm kiếm một lần nữa, tôi có thể chỉ cần tự động làm các bộ lọc sắp xếp của Google theo phong cách mà họ làm điều đó ngay lập tức. Malan Nhưng không hình như chúng ta đã nhìn thấy vậy, đến nay có được thể chất trình bằng cách nhấn Enter ít nhất hoặc nhấp chuột vào một nút? Như bạn đã thấy cho đến nay, bạn thực sự phải bấm Submit để làm những điều. 

Tuy nhiên, như Tommy sẽ chỉ cho bạn trong một lần thứ hai, thực sự có cách để bạn như vậy mà khi bạn click vào điều mà nó có thể tự động gửi những gì chúng ta gọi là một yêu cầu AJAX và lấy lại dữ liệu và lọc kết quả của bạn ngay lập tức. Có rất nhiều những điều sai trái với giao diện này. [Malan] Bạn có thể tìm kiếm cho Cambridge? Có cái gì đó hơi bất thường ở đây mà bạn quan tâm về Cambridge và bạn đang nhận được Westford, Spring Hill, West Newton và các loại tương tự. Có lẽ là không lý tưởng. >> Có lẽ là không lý tưởng. Làm thế nào tôi có thể có thể làm cho kinh nghiệm của người sử dụng tốt hơn trên trang này cụ thể? Vâng. >> [Sinh viên] Hướng dẫn. Okay. Hướng dẫn trong những gì sắp xếp ý nghĩa? [Sinh viên] Ví dụ, một điều cho người sử dụng lần đầu tiên người thậm chí không biết những gì Craigslist hoặc bạn không biết những gì bạn đang phải làm. Đúng. Vì vậy, giải thích những gì Craigslist là trên trang này là quan trọng. Chúng tôi thực sự có thể cho biết người sử dụng trang này là thực sự cho. Nếu tôi chỉ đến thăm này, tôi thấy một bó toàn bộ các địa điểm. Tôi thậm chí không biết những gì họ có ý nghĩa. Nhưng quan trọng hơn, chỉ cần nhìn vào giao diện này, nhớ tôi đã phải di chuyển xuống một tấn điều để tìm thấy một cộng đồng cụ thể rằng tôi thực sự quan tâm về điều này. Một cách nhanh hơn tôi có thể làm điều đó là gì? Vâng. [Sinh viên] Chia chúng thành phía đông, khu vực phía tây. >> Okay. Tôi có thể phân chia chúng thành các loại có thể giúp tôi nhanh hơn xác định làm thế nào để có được vị trí đó cụ thể. [Sinh viên] Đặt một danh sách thả xuống. >> Right. Okay. Tôi có thể sử dụng một trình đơn thả xuống bởi vì chúng ta có một tập cố định các vật và chúng tôi có thể hiển thị chúng trong một trình đơn thả xuống. Bằng cách đó nó không mất quá nhiều không gian trên màn hình. Nhưng thậm chí còn tốt hơn so với những gì chúng ta có thể làm gì? Vâng. >> [Không nghe được sinh viên phản ứng] >> Bạn có thể nói rằng một lần nữa? >> [Sinh viên] hộp tìm kiếm. Yeah, một hộp tìm kiếm. Đó là tuyệt vời. Những gì chúng tôi thực sự có thể làm là nếu chúng ta nhìn lại hộp slide tìm kiếm,. Autocomplete. Rất dễ dàng để tìm kiếm thông qua các kết quả mà bạn biết là trong tập hợp. Nếu tôi bắt đầu nhập BO, chỉ cần cho tôi tất cả các kết quả có trong BO của chúng. Bằng cách đó tôi có thể dễ dàng tìm thấy một trong những đặc biệt là tôi muốn đi đến thay vì phải di chuyển qua danh sách này thực sự lớn. 

Đây là tất cả các loại thực sự trái cây thấp treo-những người đang thực hiện Craigslist thực sự có thể làm gì để làm cho kinh nghiệm trên trang web tốt hơn rất nhiều cho người sử dụng cụ thể của họ. Okay. Đủ nói về các trang web xấu. Chúng ta hãy nói về Facebook. Khi Facebook ra, và đặc biệt là Facebook hình ảnh, đã có rất nhiều các dịch vụ khác tại thời gian có thể làm chính xác những điều tương tự. Họ có thể tổ chức các bức ảnh của bạn vào album. Những gì bạn có thể làm là bạn có thể sắp xếp chúng vào bộ cũng. Bạn có thể tổ chức chúng theo ngày. Bạn có thể làm tất cả những điều đặc biệt. Nhưng không ai biết điều gì đã khiến Facebook hình ảnh bùng nổ vào thời điểm nó được phát hành? Vâng. >> [Sinh viên] Tags. >> Tags. Chính xác. Chúng tôi có Milo ở đây, con chó của chúng tôi linh vật với bandana CS50 là. Bạn có thể thấy rằng chúng tôi có tính năng gắn thẻ ở giữa. Và những gì Facebook hình ảnh rất thú vị từ một quan điểm khả năng sử dụng là nó thực sự cho phép người dân thông qua này liên quan đến bạn bè của họ trong hình ảnh của họ. Đối với Facebook, kể từ khi trang web của họ là đặc biệt xã hội, nó về xây dựng loại này bầu không khí xã hội. Đó cải thiện trải nghiệm hình ảnh nhiều hơn bởi vì họ thực sự có thể bắt đầu nói, "Đây là những kết nối giữa con người, và đây là những hình ảnh về những người bạn thực sự quan tâm. " Một phần của nó cũng là loại tự ái. Những người như được gắn thẻ trong ảnh và những thứ như thế. Trong khi đó là không nhất thiết phải là một đặc điểm tốt của con người, đồng thời nó dựa trên quyết định thiết kế tốt bởi vì mọi người thực sự quan tâm về những thứ như thế này. Vì vậy, đó là Facebook ảnh. 

Nhưng chúng ta hãy nói Facebook nói chung. Tôi chắc chắn rằng rất nhiều người dân ở đây có ý kiến ​​về Facebook, cả hai thiết kế quyết định đúng đắn và quyết định thiết kế xấu. Vì vậy, hãy trút được hạnh phúc. Đi nào. Tôi biết tất cả các bạn sử dụng Facebook. Phải có người nào đó để có cái gì xấu để nói hoặc một cái gì đó tốt đẹp để nói về nó. Vâng. [Sinh viên] Trong các nguồn tin có rất nhiều điều tôi không thực sự quan tâm. Các nguồn tin cho thấy rất nhiều điều bạn có thể không quan tâm đến. Bạn có bạn bè trên Facebook người bạn đã không được đáp ứng trong 2 hoặc 3 năm và bạn thấy kết quả tin tức xuất hiện trong nguồn cấp dữ liệu tin tức của bạn và bạn không thực sự quan tâm về nó. Facebook đã thực sự thực hiện một nỗ lực để thực hiện điều này tốt hơn, và họ đã thực sự cố gắng để thúc đẩy các kết quả liên quan đến đầu của các nguồn cấp dữ liệu tin tức về muộn vì vậy bạn thực sự nhìn thấy những thứ bạn bè có liên quan đến bạn hoặc bạn bè thân của bạn. Bất cứ điều gì khác? Vâng. [Sinh viên phản ứng không nghe được] >> bạn có thể nói rằng một lần nữa? [Sinh viên] Các quảng cáo tương đối không phô trương. >> Trong ý nghĩa nào? [Sinh viên không nghe được đáp ứng] Họ không có ánh sáng trên màn hình, giống như biểu ngữ. Okay. Đó là tốt. Nếu bạn còn nhớ Internet từ những năm 90 - >> [Malan] Tôi đã ở đó. >> Ông đã có. [Cười] Bạn có thể nhớ GIF nhấp nháy nền, lấp lánh những điều, GeoCities loại phong cách của sự vật. Đó là thực sự không phải là một ví dụ về một thiết kế tốt bởi vì nó thực sự mất tập trung nội dung. Nghệ thuật Yale trang web được sử dụng để có các hình GIF động như là nền tảng của họ và bạn không thể đọc được bất cứ điều gì trên trang web, nhưng tôi đoán ai đó thực sự nói chuyện với họ và bây giờ nó là một chút khác nhau. Malan] Nó tốt hơn bây giờ. >> Nó tốt hơn bây giờ, như bạn có thể nhìn thấy. >> [Malan] Oh yeah. Chỉ là tuyệt vời, chỉ cần - Yeah. Okay. 

Một phần của nó cũng làm cho trang web của bạn có thể rất nhỏ gọn và rất dễ hiểu mọi thứ trên dòng chảy trang trong một cách đó là rất hợp lý và không nhận được trong cách của nhau. Những loại những thứ khác tốt về Facebook hay xấu về Facebook? Chúng ta chỉ có một cuộc trò chuyện thiết kế ở đây. Oh. Ở đâu? Yeah. [Sinh viên] Hệ thống Timeline mới cho phép bạn tìm kiếm các profile của người này về quá khứ của họ. Ooh, Timeline. Timeline là một điều tuyệt vời bởi vì nó cho phép bạn theo dõi bạn bè của bạn trở lại khi họ còn học trung học. Timeline là tốt vì nó cho phép bạn lọc thông qua các nội dung nhanh hơn rất nhiều, nó cho phép bạn tìm thấy những điều mà có thể có nếu không đưa bạn một thời gian rất dài để tìm chỉ cần di chuyển lên và xuống, lên, lên, lên, lên, lên, giống như đi ngược lại thời gian. Nhưng sau đó cũng có loại một nhược điểm về kinh nghiệm người dùng. Điều đó có thể được? Big từ bắt đầu với P-R. >> [Sinh viên] Riêng Tư này. >> Bảo mật, phải không? Bảo mật là một người sử dụng vấn đề kinh nghiệm rất lớn. Đây là một trong những điều tôi ghét nhất về Facebook. [Cười] Malan] Như tôi bây giờ. David đã không nhận ra điều này thực sự xảy ra cho đến ngày hôm qua. Vì vậy, bây giờ ông biết rằng mỗi khi tôi trò chuyện anh tôi biết anh ta đã bỏ qua tôi. [Malan Phần khó xử tôi đã thực sự bỏ qua anh ta, và tôi đã không biết rằng anh ấy biết tôi đã bỏ qua anh ta. [Cười] Bảo mật là một vấn đề lớn. Ai ở đây có thể cho tôi biết những gì có thể xấu về sự riêng tư của Facebook bên cạnh thực tế là họ làm những việc như thế này? Đó là những gì đặc biệt khó khăn để làm với Facebook riêng tư? Đó là loại là một câu hỏi hàng đầu. Vâng. >> [Sinh viên] Hide bức ảnh của bạn từ những người nhất định. Đúng. Chính xác, để ẩn các bức ảnh của bạn từ những người nhất định. Họ có nút này, nhỏ bé ở phía trên bên phải cho phép bạn chuyển đổi các quyền riêng tư của một bức ảnh. Tùy chọn bảo mật của họ rất khác nhau giữa các loại khác nhau của các menu. 

Họ đã nhận được tốt hơn rất nhiều về nó gần đây, nhưng nó được sử dụng phải là trường hợp rằng bất cứ khi nào bạn muốn ngăn không cho bạn bè của bạn từ các bức ảnh nhìn thấy, bạn sẽ phải đi qua một quá trình 5 bước rất phức tạp vì giống như, hãy để tôi nhấp vào liên kết này, bây giờ hãy để tôi nhấp vào một lần nữa, hãy để tôi nhấp vào một lần nữa, hãy để tôi chỉ định mà mọi người không thể nhìn thấy hình ảnh của tôi. Đó không phải là đặc biệt tốt trên một phần của Facebook bởi vì rất nhiều về kinh nghiệm của người sử dụng thực sự đem lại cho họ sự tự do để kiểm soát những gì mọi người có thể nhìn thấy. Chúng tôi gọi đây là kiểm soát người sử dụng và tự do. Nếu bạn không cho phép người dùng của bạn làm điều đó một cách hiệu quả và trực quan, sau đó trải nghiệm người dùng của bạn là không thực sự là tuyệt vời ở tất cả.  Bạn muốn nói bất cứ điều gì về Facebook? Làm thế nào để tắt chức năng này? Ong Bạn không thể tắt chức năng này, và đó là một lỗ hổng khả năng sử dụng rất lớn trên một phần của Facebook. Tính năng này - Tôi thực sự nhìn vào nó - nó hoặc là bạn không thể làm điều đó hoặc nó được chôn cất một nơi nào đó rất, rất sâu trong khung trông Facebook bởi vì tôi không thể tìm ra cách để vô hiệu hóa chức năng này ở tất cả. [Malan] Nhưng đôi khi những quyết định này là không rõ ràng bởi vì bạn đã cho chúng tôi rất nhiều thông tin phản hồi hữu ích trên CS50 các ứng dụng khác nhau và các trang web mà khóa học sử dụng. Chúng tôi đã không được thực hiện tất cả những yêu cầu này và những đề nghị, gợi ý. 

Một phần trong số đó là để nhận được yêu cầu rất nhiều rằng đó là một hàm của thời gian, nhưng đôi khi chúng ta chỉ cần thực hiện một quyết định có ý thức như thế, "Cảm ơn bạn đã gợi ý, nhưng chúng tôi không đồng ý." Vì vậy, làm thế nào để bạn thực sự quyết định những gì bạn nên làm gì nếu người dùng của bạn nghĩ rằng bạn nên làm điều gì đó ngay cả khi bạn không nhất thiết phải? Đó là một sự cân bằng tốt giữa thực sự lắng nghe những gì người dùng của bạn nói và thực sự có một số loại của dòng mà bạn nói, "Chúng tôi sẽ không làm những gì những người dùng nói rằng." Và đặc biệt, tôi nghĩ rằng đã có một trích dẫn nội dung bài viết này bởi Henry Ford rằng khoản tiền này lên khá tốt. "Nếu tôi yêu cầu mọi người những gì họ muốn, họ sẽ nói rằng họ muốn con ngựa nhanh hơn." Bất cứ ai có thể sắp xếp trêu chọc ngoài những gì câu rằng thực sự có nghĩa là? Nó không phải chỉ là người sử dụng biết những gì họ muốn, nhưng đó là thêm rằng - [Sinh viên] Họ không biết những gì có thể. Một phần họ không biết những gì có thể. Trêu chọc rằng, ngoài hơn một chút. Những gì bạn có nghĩa là bằng cách đó? [Không nghe được sinh viên phản ứng] Đó là tốt. Tôi nghĩ rằng chúng tôi đang cố gắng để nói ở đây là mọi người biết những gì họ muốn. Họ muốn con ngựa nhanh hơn. Những gì họ thực sự muốn là khả năng di chuyển nhanh hơn, nhưng họ không thực sự biết các phương tiện để đạt được điều đó. Khi bạn đến người dùng của bạn và người dùng của bạn nói với bạn điều gì đó và họ cho bạn biết, "Chúng tôi muốn các tính năng và các tính năng và các tính năng này," bạn không nhất thiết phải suy nghĩ về, "Hãy để tôi đi trước "Và thực hiện những gì họ nói rõ ràng," nhưng những gì bạn muốn suy nghĩ về là, "Tôi sắp xếp các ý tưởng có thể nhận được từ đó?" Những gì họ thực sự muốn? 

Và từ đó những gì bạn có thể làm là thiết kế một cái gì đó đáp ứng những yêu cầu đó nhưng không nhất thiết phải theo cách mà người sử dụng mong đợi nó được thỏa mãn. Vì vậy, đối với một cái gì đó như các dự án cuối cùng, về rất thực tế, một heuristic hữu ích là những gì khi nói đến làm một cái gì đó tốt hơn, đặc biệt là nếu thiết kế có kiêu ngạo về anh nhờ đó mà bạn loại biết những gì tốt nhất, bạn có thể có đầu vào từ người dùng của bạn, nhưng làm thế nào để bạn thực sự đi về nhận được rằng phản hồi? Trong các dự án cuối cùng, rất cụ thể, những gì sản xuất kết quả tối ưu ở đây? Sản xuất kết quả tối ưu - và tôi sẽ đi qua trong một giây - là quá trình phát triển và sau đó kiểm tra và sau đó lặp lại. Những gì tôi có nghĩa là bằng cách kiểm tra thường là khi bạn thiết kế một cái gì đó bạn nghĩ rằng nó khá tốt, giống như, "Tôi là một nhà thiết kế tuyệt vời như vậy. Mọi người đều sẽ thích điều này." Và sau đó bạn đặt nó ra khỏi đó và mọi người không thực sự thích nó vì một lý do nào đó. Những gì bạn phải làm là bạn phải mất các bộ phận của những thứ mà mọi người làm như và cải tạo những điều mà mọi người không thích. Nghe có vẻ giống như một quá trình rất rõ ràng, nhưng quá trình này liên tục lặp lại trên đầu trang của những gì bạn đã xây dựng là một quá trình giúp bạn không chỉ hoàn thiện kỹ năng thiết kế của riêng bạn mà còn giúp bạn tinh chỉnh các thiết kế để mọi người thực sự đánh giá cao sản phẩm của bạn thậm chí nhiều hơn họ đã làm trước. 

Tôi sẽ đi qua nhiều ví dụ cụ thể về những gì bạn thực sự có thể làm. Là loại một ví dụ cuối cùng của một sản phẩm, chúng ta hãy nhìn vào KAYAK. KAYAK khi nó đến là rất, rất phổ biến. Bất cứ ai có thể đoán tại sao? Các loại điều bạn thích về việc này nếu bạn đã sử dụng nó là gì hoặc các loại những thứ bạn không thích là gì? Vâng. >> [Không nghe được sinh viên phản ứng] >> Okay. Đó là một phần của nó cho phép người sử dụng có một truy vấn đó là mở rộng hơn hơn là một trong rất hạn chế như, "Bạn phải chọn ngày bắt đầu của bạn "Và bạn phải chọn ngày cuối cùng của bạn." Trong thực tế, nó cho phép bạn linh hoạt về nó và nó sẽ cho bạn tất cả các chuyến bay trong phạm vi đó. Bất cứ điều gì khác? [Sinh viên] Chúng bao gồm các lệ phí trong giá. Họ bao gồm các lệ phí trong giá. Các loại thuế và những thứ thực sự đi thẳng vào mức giá mà phía trên bên trái vì vậy bạn không bị lừa vào suy nghĩ rằng bạn đang thực sự trả tiền cho một chuyến bay 240 khi nó thực sự $ 330. Bất cứ điều gì khác? Vâng. [Không nghe được sinh viên phản ứng] Tôi không chắc chắn nếu họ thực sự cho phép bạn làm điều đó. Tôi có thể sai. Đó có thể là một điều thú vị nếu bạn muốn đặt trọng lượng nhiều hơn về các bộ lọc đặc biệt để họ đẩy các kết quả liên quan đến bộ lọc đó lên trên. Nhưng bất cứ ai có thể cho tôi biết những gì quá đặc biệt về phía bên trái này? Làm thế nào mà thông thường bạn có thể tìm kiếm một chuyến bay trên một dịch vụ Internet trước khi điều này? 

Vâng. >> [Không nghe được sinh viên phản ứng] >> Bạn có thể nói rằng - [Sinh viên] Mỗi hãng hàng không. >> Yeah. Mỗi hãng hàng không có trang web riêng của mình. Này củng cố điều này. Và? [Sinh viên] Bạn biết chính xác những gì bạn đang để lại. Bạn biết chính xác những gì bạn đang để lại, nhưng liên quan đến các bộ lọc đặc biệt. Hãy để tôi kéo lên KAYAK. Ôi Chúa ơi, pop-up. Bad kinh nghiệm người dùng. Điều gì sẽ xảy ra khi tôi di chuyển thanh trượt này? [Sinh viên] Tự động cập nhật. >> [Ong] Tự động cập nhật. Đó là một cái gì đó là rất quan trọng. Trước đó, bất cứ khi nào bạn muốn tìm một chuyến bay, bạn đã phải đặt ở vị trí đầu vào, đầu ra vị trí của bạn, nhấn Search, nó sẽ xử lý và hiển thị kết quả của bạn. Nếu bạn muốn thay đổi truy vấn của bạn, bạn sẽ phải bấm lại hai lần, nhập vào trong một truy vấn mới từ đầu, và sau đó làm điều đó hơn và hơn nữa. Những điều tốt đẹp về một cái gì đó như thế này là nó sử dụng một điều rất [khó hiểu] ở giữa. Bất cứ khi nào bạn làm một cái gì đó như thế này, nó bắn một yêu cầu và nó sẽ trả về cho bạn tất cả các kết quả ngay lập tức. Này sắp xếp các thông tin phản hồi ngay lập tức là một cái gì đó mà làm KAYAK wildly phổ biến vì nó thực sự dễ dàng cho tôi chỉ cần thay đổi truy vấn của tôi và để tìm ra những thứ mà xung quanh một phạm vi cụ thể mà không cần phải quay trở lại và ra, trở lại và ra, trở lại và ra. Vì vậy, đây là tất cả mọi thứ bạn muốn suy nghĩ về khi bạn đang thiết kế trang web của bạn. Làm thế nào tôi có thể làm cho nó rất hiệu quả cho người dùng của tôi phải đi qua bất cứ điều gì họ đang làm việc trên và để có được mục tiêu cuối cùng của họ càng nhanh càng tốt? [Malan] Và điểm của Joseph trước đó về người sử dụng không nhất thiết phải biết những gì họ muốn, dựa trên những gì bạn biết về HTML và bạn có hộp kiểm tra, các nút radio, các menu lựa chọn, các lĩnh vực đầu vào và như thế, làm thế nào bạn sẽ thực hiện khái niệm về chọn một thời gian bắt đầu cho một chuyến bay? 

Bạn sẽ sử dụng các cơ chế giao diện người dùng khác nhau? Nếu bạn chỉ biết số tiền của HTML đã được dạy trước và bạn biết các yếu tố đầu vào là các nút radio, hộp kiểm tra, thả xuống, và hộp đầu vào, sự lựa chọn tự nhiên của bạn sẽ những gì đã được để chọn ngày tháng? [Sinh viên] đầu vào. >> Đầu vào. Hoặc thậm chí có thể giảm xuống với tất cả các ngày, phải không? Vì vậy, với cơ chế giao diện người dùng phức tạp hơn như thế này ở phía bên trái mà bạn có thể thực hiện, bạn có thể làm cho quá trình này trực quan hơn nhiều với một thanh trượt bởi vì thời gian là liên tục, và người ta thường không nghĩ về nó về những phần rời rạc. Được rồi. Điều cuối cùng. Ten khả năng sử dụng công nghệ tự động. Tất cả những điều chúng tôi nói về có thể thuộc một trong các loại này. Nếu bạn đi đến liên kết này, các trang web sẽ được đăng trực tuyến, bạn sẽ thực sự có thể, khi bạn thiết kế trang web của bạn, hãy giữ những chẩn đoán trong tâm trí và các quy tắc của ngón tay cái. Đối với các dự án của bạn, những gì tôi đề nghị bạn làm để thiết kế các ứng dụng của bạn tốt hơn là để làm prototyping giấy đầu tiên. Khi bạn đang suy nghĩ về ứng dụng của bạn, rất nhanh chóng phác họa những gì bạn muốn nó trông giống như và chắc chắn rằng tất cả các hộp được sắp xếp theo một cách rất trực quan cho người dùng sử dụng và thậm chí hiển thị các nguyên mẫu giấy cho bạn bè của bạn và bắt đầu nhóm tập trung. Chỉ cần có được 2 hoặc 3 người với nhau và yêu cầu họ chỉ cần gõ vào các nguyên mẫu giấy này, và hiển thị màn hình mới để xem nếu họ thực sự hiểu những gì đang xảy ra. 

Những gì bạn muốn làm là cung cấp cho họ một nhiệm vụ, thúc đẩy nhiệm vụ đó, và chỉ cần cung cấp cho họ các ứng dụng và cho phép họ sử dụng nó. Không cung cấp cho họ hướng dẫn xa hơn. Bạn muốn thực sự cho họ tương tác với các ứng dụng của bạn trong một cách mà cho phép bạn xem làm thế nào họ sẽ sử dụng nó nếu bạn không được đứng bên cạnh chúng. Và đó là rất quan trọng. Điều đó sẽ cung cấp cho bạn rất nhiều những hiểu biết như là những người nhận được xung quanh những điều đặc biệt trong một cách mà tôi không có ý định họ? Được họ sử dụng cơ chế giao diện người dùng cụ thể trên màn hình trong một cách mà là loại hacky? Tôi không có ý định cho họ để làm nó theo cách đó. Và một khi bạn đang thực hiện với điều đó, bạn làm những gì muốn làm? Đá của bạn thiết kế, phải không? Những gì bạn muốn làm là bạn muốn để phát triển và sau đó làm cho quá trình trên một lần nữa. Vì vậy, hiển thị nó cho bạn bè một khi bạn đã phát triển nó, thử nghiệm nó, phát triển, thử nghiệm, phát triển, thử nghiệm, lặp, và chuyển tiếp. Thiết kế là một quá trình lặp đi lặp lại trong ý nghĩa này. Bạn thực sự có để xây dựng một cái gì đó và sau đó nhận ra những điều về nó mà bạn đã không nhận ra trước và quay trở lại và cải thiện từ đó. Bây giờ, khi cho phần phát triển, đó là những gì Tommy sẽ chỉ cho bạn sau giờ nghỉ và làm thế nào bạn có thể có thể thực hiện một cái gì đó giống như tự động hoàn chỉnh một cách khá đơn giản. [Malan] Như Tommy thiết lập ở đây, một câu hỏi sau đó. Rất nhiều của các trang web đầu tiên - và khi Joseph cho biết trang web theo phong cách những năm 1990, nó đã được triển khai thực hiện mà nếu bạn muốn chọn một thời gian bắt đầu và thời gian kết thúc, thẳng thắn, trở lại trong ngày và thậm chí trên một số trang web ngày hôm nay, cách bạn làm điều này là bạn chọn một giờ từ thả xuống, bạn chọn phút từ thả xuống, có thể bạn chọn AM, PM, và sau đó bạn làm điều đó thêm 3 lần nữa. Và như vậy với 6 lần nhấp chuột và có thể di chuyển một số người dùng của bạn thực sự có thể cung cấp một số loại ngày và / hoặc phạm vi thời gian trong ý nghĩa này. 

Vì vậy, chắc chắn không tối ưu nhưng cho đến nay chúng ta đã thấy không có khả năng biểu cảm trong bất kỳ ngôn ngữ, chúng tôi đã làm một cái gì đó hấp dẫn hơn như thế này thanh trượt thời gian bắt đầu và thời gian kết thúc. Nhưng nếu bạn nghĩ trở lại tuần 0 khi chúng tôi nói chuyện về Scratch, có quá không có vật dụng mà chỉ làm những điều nào đó. Bạn thực sự chỉ có những nguyên tắc cơ bản như các vòng lặp và điều kiện và các loại tương tự. Vì vậy, loại suy nghĩ rất trừu tượng bây giờ, độc lập của các HTML, những gì đang thực sự xảy ra với một cái gì đó như thế này thời gian bắt đầu và thanh trượt thời gian kết thúc? Khi tôi di chuyển con chuột của tôi và tôi bấm vào rằng biểu tượng cà rốt nhỏ ở bên trái và bắt đầu kéo, lập trình, nó là những gì bạn muốn để có thể thực hiện để làm cho điều đó xảy ra? Những câu hỏi, những gì Boolean biểu thức nào bạn muốn để có thể hỏi? Những gì thực sự đang xảy ra? Sammy? [Sinh viên] là vị trí của con trỏ? >> Good. Là vị trí của con trỏ? Đây là một cái gì đó chúng tôi cần phải thể hiện trở lại trong Scratch, cho dù nó được dựa trên vị trí hoặc thậm chí màu hoặc các loại tương tự. Bạn có thể nhớ lại bao giờ nên một thời gian ngắn vào hôm thứ Hai đã có tất cả những điều này được gọi là sự kiện trong thế giới của Web, và do đó, có những thứ như onclick và OnKeyPress và onkeyup và onmouseover và onmouseout. Vì vậy, nhận ra rằng ngay cả những điều này chúng tôi đã được cấp trên Web với các trang web như Facebook và Gmail, ngay cả khi bạn không có ý tưởng làm thế nào bạn có thể sẽ thực hiện điều đó bởi vì không có gì ngay cả như trong bài giảng hoặc vấn đề Đặt 7, nhận ra rằng với những nguyên tắc cơ bản cùng chính xác, với HTTP và các thông số và GET và POST, với các yếu tố đầu vào HTML cơ bản mà chúng tôi đã nhìn vậy, đến nay và trong một khoảnh khắc với các cơ chế chương trình của Tommy về để giới thiệu bạn có thể bắt đầu để thể hiện mình giống như bạn đã làm trong tuần 0 bởi rất trực giác cách kéo và thả. 

Vì vậy, với mà nói, Tommy MacWilliam và một số mảnh ghép mới cho chúng tôi cho Web. Được rồi. Tên tôi là Tommy và tôi sẽ nói chuyện về JavaScript. Chỉ cần một sự từ bỏ: Tôi có ý kiến ​​rằng JavaScript là ngôn ngữ lập trình tốt nhất trong toàn bộ trên toàn thế giới. Có rất nhiều người đồng ý với tôi, nhưng nó chỉ là tuyệt vời. Một khi bạn quay trở lại C, nếu bạn có để viết C cho một lớp học hoặc một số ngôn ngữ khác, nó chỉ thực sự bực bội trong tất cả các chi tiết ở mức độ thấp, bạn có muốn bị sa lầy. Vì vậy, nếu bạn đã bao giờ cảm thấy buồn về cách gây phiền nhiễu C là viết, chỉ cần đi lại, viết một số JavaScript. Đó là Niết bàn. Bạn sẽ cảm thấy tốt hơn về ngày tồi tệ của bạn. Rất nhiều sự kỳ diệu của JavaScript xuất phát từ khả năng của mình để thao tác mọi thứ đang có sẵn trên trang. Khi chúng tôi viết kịch bản PHP của chúng tôi, họ đã được thực hiện trên máy chủ, và cuối cùng là PHP script có thể ra một số HTML. HTML được gửi cho khách hàng, và sau đó đã được nó. Nếu PHP muốn thêm một nút vào một trang, ví dụ, nó có thể không thực sự làm điều đó. Nó sẽ phải làm cho toàn bộ tập tin HTML mới và gửi cho trình duyệt. Với JavaScript chúng tôi biết rằng chúng tôi có thể cập nhật mọi thứ trong khi họ đã có trên trang, và vì điều này, chúng ta có thể cung cấp nhiều phản hồi ngay lập tức, mà thực sự sẽ cải thiện trải nghiệm người dùng trên trang web của chúng tôi. Chỉ cần một bản tóm tắt nhanh chóng của các selectors JavaScript. Chúng ta biết rằng khi chúng tôi tải về một trang HTML, đó là sẽ được đại diện trong DOM. 

DOM nhớ là cây lớn này, nơi yếu tố có liên quan trong hệ thống phân cấp lớn. Khi chúng tôi làm việc với cơ sở dữ liệu trong pset 7, một trong những điều đầu tiên chúng ta cần phải biết làm thế nào để làm là truy vấn cơ sở dữ liệu. Chúng tôi có bảng này người sử dụng lớn, và đôi khi chúng ta chỉ muốn nói, "Tôi chỉ muốn một số của những người sử dụng phù hợp với một số điều kiện." Tương tự như vậy, khi chúng ta có DOM, chúng tôi cần một số cách để truy vấn nó. Chúng tôi cần một số cách nói, "Tôi muốn tất cả các nút giống như thế này Hoặc tất cả các hình ảnh trên trang. " Và những selectors cho phép chúng tôi làm điều đó. Vì vậy, chỉ cần một bản tóm tắt nhanh chóng. Này đầu tiên ở đây, điều này # gửi, những gì là sẽ chọn? Có ai nhớ? [Không nghe được sinh viên phản ứng] >> Yeah, chính xác. Điều này sẽ chọn một phần tử trên trang có một ID của trình. Và đó tag băm này chọn là sẽ làm việc với ID. Làm thế nào về điều thứ hai, điều này làm trung tâm, những gì mà sẽ chọn? Yeah. >> [Sinh viên] Class. >> Chính xác. Này hiện nay được lựa chọn bởi lớp. Sự khác biệt giữa ID và lớp học ở đây thường là ID phải là duy nhất trong không gian bất cứ điều gì bạn đang tìm kiếm. Vì vậy, nếu bạn đang tìm kiếm trên toàn bộ một trang web, bạn thực sự chỉ cần phải có 1 phần tử với ID nhất định, vì vậy trong trường hợp này của trình. Với các lớp học, mặt khác, chúng ta có thể có nhiều hơn 1 phần tử trên cùng một trang với cùng một lớp. Điều này có thể hữu ích để nói rằng tôi muốn chọn tất cả mọi thứ đó là trung tâm trên trang thay vì chỉ 1 điều. 

Và cuối cùng, này cuối cùng ở đây là một chút phức tạp hơn, nhưng điều này là những gì sẽ chọn từ DOM? [Sinh viên phản ứng không nghe được] >> đó là gì? [Sinh viên] Bất cứ điều gì đó là một thẻ. >> Chúng tôi có 2 phần ở đây. Phần thứ hai sẽ nói tôi muốn chọn các thẻ với một thẻ đầu vào, do đó, bất kỳ yếu tố đó là một thẻ đầu vào. Nhưng tôi không muốn chỉ cần chọn tất cả các yếu tố đầu vào bởi vì một cái gì đó giống như một nút submit có thể là một đầu vào và một cái gì đó giống như một hộp văn bản có thể là một đầu vào. Vì vậy, với các dấu ngoặc vuông tôi nói tôi chỉ muốn để lựa chọn những yếu tố là kiểu của văn bản. Một nơi nào đó trong thẻ HTML của tôi Tôi có một loại thuộc tính, và giá trị của thuộc tính đó có được văn bản. Vì vậy, làm thế nào về điều này một phần đầu tiên ở đây? Từ đầu tiên của chọn này là hình thức sau đó tôi có một không gian và sau đó điều này một phần đầu vào. Điều đó không làm gì, đưa hình thức ở phía trước của nó? Điều này về cơ bản giới hạn truy vấn của chúng tôi. Nó có thể là trường hợp đó, chúng tôi có một số yếu tố đầu vào trên trang mà không phải là con cháu của một hình thức. Điều gì sẽ làm là điều này sẽ nói tôi chỉ muốn đầu vào thẻ mà có một nơi nào đó ở trên chúng một số yếu tố cha mẹ của một hình thức. Và do đó, trong cách này chúng ta có thể thực hiện các truy vấn có thứ bậc nên chúng tôi không chỉ cần chọn tất cả mọi thứ phù hợp với một chọn nhất định. Chúng tôi có thể loại giới hạn phạm vi truy vấn đến một cái gì đó khác. Vì vậy, bây giờ mà chúng ta biết làm thế nào để lựa chọn các yếu tố trên trang, chúng ta hãy nói một chút về AJAX. AJAX là một từ viết tắt vẫn rất hợp thời trang mà là viết tắt của Asynchronous JavaScript và XML. Nó chỉ như vậy sẽ xảy ra rằng XML chỉ là một số cách để đại diện cho dữ liệu. 

Đó là loại phổ biến bị mất trong thời gian gần đây, do đó, X trong AJAX không sử dụng tất cả các thời gian. Về cơ bản, những gì AJAX cho phép chúng ta làm là làm cho các yêu cầu HTTP từ bối cảnh của JavaScript. Khi chúng tôi đang ở trong trình duyệt web của chúng tôi và chúng tôi đang di chuyển quanh trang và chúng tôi bấm vào một liên kết, những gì trình duyệt của chúng tôi là sẽ làm là thực hiện một yêu cầu HTTP tới bất cứ điều gì liên kết chúng ta click. Nhưng đó không phải luôn luôn lý tưởng bởi vì nếu đó là trường hợp, sau đó như David đã nói, chúng ta phải luôn luôn làm cho người dùng bấm vào một nút Submit hoặc nhấp vào liên kết để làm bất cứ điều gì xảy ra sẽ liên quan đến một yêu cầu HTTP. Vì vậy, với AJAX, chúng ta có thể thực hiện những yêu cầu trên danh nghĩa của JavaScript. Điều đó có nghĩa là bất cứ khi nào người dùng tương tác với các trang hoặc bất cứ điều gì xảy ra, chúng tôi thực sự có thể làm cho một yêu cầu chương trình cho một số tập tin PHP khác trên trang web của chúng tôi hoặc bất cứ điều gì khác và lấy dữ liệu tập tin đó mà spits ra. Chúng ta hãy xem xét một ví dụ về AJAX. Đây là CS50 trang Tài chính của chúng tôi mà hy vọng một số người trong chúng ta đã quen thuộc. Nếu chúng ta nhìn vào HTML của trang này, chúng ta thấy ở đây mà tôi đã thêm một vài điều, một trong số đó tôi đã đưa ra hình thức một ID. Tôi đã nói id = "hình thức trích dẫn nội dung bài viết này". Tôi đã làm điều này chỉ vì nó sẽ làm cho dễ dàng hơn một chút để lựa chọn từ DOM kể từ khi tôi chỉ có thể làm một truy vấn rất đơn giản. Những gì tôi muốn làm ở đây là tôi muốn sửa chữa một số vấn đề với CS50 Tài chính. Vì vậy, nếu chúng ta đi finance.cs50.net, mỗi khi tôi muốn để có được một báo giá, tôi phải nhấp vào nút này Trích dẫn Get, và đó Trích nút sau đó đưa tôi đến một trang khác. Và nếu tôi muốn trích dẫn nội dung bài viết khác, tôi phải nhấn nút Back và sau đó tôi gõ vào, Tôi nhận được một báo giá, và tôi nhấn nút Back. Điều này thực sự không phải là kinh nghiệm người dùng tốt nhất. Ai thực sự sẽ sử dụng trang web nếu nó có làm chậm, để có được giá cổ phiếu? Vì vậy, những gì chúng tôi muốn làm với AJAX là loại bỏ bước đi đến một trang riêng biệt để xem kết quả. 

Những gì chúng tôi đang thực sự chỉ yêu cầu là giá thực sự nhỏ, và đó là chỉ là một lượng nhỏ dữ liệu. Vì vậy, không cần cho tôi đi cả một trang HTML, tải về toàn bộ một lô mới của HTML, có thể tải về hình ảnh một số chi tiết, một số file CSS khác cho tôi để trả lời câu hỏi rất đơn giản bao nhiêu chi phí này chứng khoán. Với Ajax, chúng ta có thể làm điều này dễ dàng hơn nhiều. Chúng ta thấy ở đây mà tôi đang liên kết trong một tập tin JavaScript được gọi là quote.js. Hãy để thực sự mở tập tin đó. Không có. Tất cả các tập tin của tôi JavaScript sẽ được đặt trong HTML để trình duyệt web có thể truy cập nó. Sau đó, chúng tôi có một thư mục riêng biệt ở đây cho JavaScript, và bây giờ ở đây là quote.js. Ở phía trên của tập tin này nói ở đây mà tôi muốn chờ đợi cho toàn bộ trang được nạp trước khi tôi cố gắng làm bất cứ điều gì. Tại sao là cần thiết? Nó chỉ ra rằng điều tiếp theo tôi sẽ làm ở đây là bắt đầu tìm kiếm một phần tử phù hợp với một số chọn. Nếu JavaScript này là bao giờ được thực hiện trước khi yếu tố này được tải trên trang, sau đó tất cả những gì tôi cố gắng làm là sẽ không làm việc bởi vì tôi sẽ cố gắng chọn cái gì đó là không có được nêu. Vì vậy, dòng này lên hàng đầu nói rằng tôi muốn bạn phải chờ đợi cho đến khi tất cả mọi thứ được tải vì vậy chúng tôi đảm bảo rằng bất kỳ yếu tố tôi đang tìm kiếm thực sự trên trang. Ký hiệu đô la này ở đây có nghĩa là tôi đang sử dụng các thư viện được gọi là jQuery. Thư viện jQuery cho phép chúng ta sử dụng các chọn mà chúng ta chỉ cần nhìn vào. Bằng cách nói $ sau đó đi qua trong như một tham số hình thức trích dẫn nội dung bài viết, Tôi bây giờ lựa chọn hình thức đó mà chúng tôi chỉ đã xem xét. Bây giờ tôi có một đại diện của hình thành trong bộ nhớ bằng cách nào đó. 

Mở đối tượng này bây giờ, đại diện của biểu mẫu, Tôi bây giờ bằng cách sử dụng một chức năng gọi là. Chức năng này là nó sẽ đính kèm một xử lý sự kiện. Sự kiện mà chúng tôi đang đi để lắng nghe cho là sự kiện submit. Vì vậy, khi người dùng nhấp nút Submit hoặc ép Enter, sự kiện này sẽ để cháy. Bằng cách hooking vào điều này, bây giờ tôi có thể ghi đè lên hành vi mặc định của biểu mẫu. Nếu không có JavaScript này, hình thức trình PHP tập tin bất cứ điều gì chúng tôi sử dụng trong thuộc tính hành động. Nhưng thay vào đó, tôi là bây giờ nói rằng, chờ đợi, chờ đợi, chờ đợi, tôi không muốn bạn thực sự làm điều đó. Tôi muốn điều này xảy ra trước khi bạn đi và cố gắng trình một số tập tin PHP. Bây giờ tôi muốn làm những gì? Tại thời điểm này, tôi muốn sử dụng AJAX bằng cách nào đó để nạp vào giá của cổ phiếu. Điều đầu tiên tôi cần phải biết là cổ phiếu những gì người dùng đang tìm kiếm. Để làm điều đó tôi sẽ sử dụng một chọn. Đây là chọn thứ ba chúng tôi nhìn trước. Điều này nói rằng tôi muốn bắt đầu yếu tố hình thức này với một ID hình thức của báo. Sau đó, một nơi nào đó bên trong của hình thức đó có phải là một yếu tố đầu vào có một cái tên biểu tượng. Nếu chúng ta nhìn lại HTML của chúng tôi, chúng tôi thấy rằng chúng tôi đã có một đầu vào [name = biểu tượng]. Điều đó có nghĩa rằng điều này là để chọn hộp văn bản mà người dùng gõ vào. Đó là tốt đẹp. Chúng tôi đã có một hộp văn bản. Bây giờ chúng ta chỉ cần biết những gì bên trong của nó. Để làm điều đó chúng ta có thể gọi phương thức này ở đây, val. và điều này nói tôi biết hộp văn bản mà bạn có. Tôi muốn bạn cho tôi biết những gì nó là người dùng gõ vào hộp văn bản đó. Bây giờ chúng ta có một chuỗi biểu tượng đó bằng bất cứ điều gì người dùng gõ vào. Đó là tốt đẹp. Chúng ta có thể sử dụng chuỗi để thực hiện yêu cầu của chúng tôi. Đây là một chức năng mới đây, điều này, ngoại trừ chúng ta không còn sẽ được lựa chọn các yếu tố, chúng ta sẽ được gọi một chức năng khác nhau đó là cung cấp cho chúng tôi bởi jQuery. Chức năng này AJAX là những gì thực sự sẽ làm cho yêu cầu HTTP này. Vì vậy, chúng ta phải nói cho nó một vài điều. Điều đầu tiên chúng ta phải nói cho chức năng này là nơi tôi muốn yêu cầu để đi. Một nơi nào đó trong dự án của tôi, tôi có tập tin bên trong thư mục HTML được gọi là quote.php. Tôi có thể truy cập tập tin này, chúng ta đã thấy, chỉ như thế này, nếu tôi đi đến localhost / quote.php. 

Tôi muốn JavaScript của tôi để thực hiện một yêu cầu đến trang đó. Loại yêu cầu bây giờ? Chúng tôi đã thấy trước đó, hình thức đã có method = "post" thuộc tính, và điều đó có nghĩa là nó sẽ làm cho một yêu cầu POST, do đó, nó sẽ không đặt bất cứ điều gì trong URL, chứ không phải là một yêu cầu GET, mà chỉ cần sẽ bị sa thải nếu chúng ta chỉ cần truy cập trang web với các trình duyệt web, ví dụ. Bây giờ chúng tôi đã nói rằng tôi muốn thực hiện một yêu cầu HTTP POST đến một trang nằm ở quote.php. Khi chúng tôi gửi biểu mẫu, nhớ là chúng tôi có thể truy cập vào các yếu tố đầu vào bên trong hình thành với biến $ _POST. Cho đến nay, trong câu chuyện, chúng tôi đã không thực sự được gửi theo bất kỳ dữ liệu nào. Chúng tôi đã nói rằng chúng tôi đang làm cho một yêu cầu AJAX và đây là kiểu yêu cầu chúng tôi đang làm. Bây giờ chúng ta cần phải thực sự gửi một số dữ liệu vào trang. Để làm điều đó chúng ta có thể sử dụng tài sản này được gọi là dữ liệu. Giá trị của tài sản này thực sự là một mảng kết hợp. Lý do cho việc này là nó cho phép chúng tôi gửi cho hơn 1 chỉ mảnh dữ liệu. Đó là lý do tại sao chúng tôi có những dấu ngoặc nhọn ở đây lồng vào bên trong các dấu ngoặc nhọn khác. Các phím trong các mảng kết hợp này sẽ được điều tương tự như tên các thuộc tính đó trong các yếu tố hình thức của chúng tôi. Điều đó có nghĩa là nếu tôi gửi cùng một phím biểu tượng, điều đó có nghĩa là trang PHP của tôi có thể truy cập dữ liệu này với $ _POST [biểu tượng] giống như chúng ta đã làm trước khi chúng tôi gửi một hình thức. Và bây giờ dữ liệu thực tế, chúng tôi muốn gửi là có được bên trong giá trị của mảng kết hợp này. 

Chúng tôi lưu trữ văn bản trong một biểu tượng được gọi là biến, và vì vậy chúng tôi đang gửi cùng một phím biểu tượng và một giá trị của bất cứ điều gì người dùng gõ vào. Bây giờ chúng tôi đã thực hiện yêu cầu này HTTP, file PHP của chúng tôi đã thực hiện, và nó sẽ gửi một số dữ liệu trở lại cho khách hàng chỉ cần thực hiện yêu cầu này. Bây giờ chúng ta cần phải trả lời bất cứ điều gì các máy chủ nói với chúng tôi. Để làm điều đó chúng tôi có tài sản cuối cùng ở đây thành công được gọi là. Giá trị của khóa này thành công thực sự sẽ là một chức năng, và đây là một trong những điều thực sự mát mẻ, bạn có thể làm với JavaScript. Không chỉ bạn có thể có ints hoặc mảng như bên trong có một giá trị của một mảng kết hợp, chúng ta cũng có thể có một chức năng. Vì vậy, bằng cách nói rằng thành công, đây là chìa khóa của tôi. Một dấu nói ở đây có giá trị, và bây giờ giá trị của điều này thực sự là một chức năng. Vì vậy, chúng ta không cần phải cung cấp chức năng này một tên cho mỗi gia nhập. Chúng tôi chỉ có thể nói điều này là có được một số chức năng. Nó sẽ để có 1 đối số. Đối số cho chức năng này là có được bất cứ máy chủ gửi cho chúng tôi trở lại từ yêu cầu. Cũng giống như khi trình duyệt của chúng tôi làm cho một yêu cầu, máy chủ sẽ gửi một cái gì đó trở lại và trình duyệt hiển thị nó, trong bối cảnh của AJAX, chúng ta chỉ cần thực hiện một yêu cầu, máy chủ gửi một cái gì đó trở lại, và bây giờ chúng tôi đã là đại diện như một chuỗi. Với chuỗi mà tôi chỉ muốn hiển thị trên trang. Để làm điều đó tôi sẽ có một chọn cuối cùng. Tôi muốn chọn các phần tử với giá ID. Đây chỉ là một div trống mà tôi đã tạo trên trang, và tôi muốn thiết lập các nội dung của div đó là bất cứ điều gì các máy chủ gửi cho chúng tôi trở lại. Tôi đã thực sự thay đổi quote.php một chút. 

Thay vì gọi vẽ lại và vẽ một số trang, quote.php bây giờ chỉ đơn giản là để in ra các giá trị của cổ phiếu như là một chuỗi. Vì vậy, nếu bạn thực sự truy cập vào trang, bạn sẽ chỉ thấy rằng chuỗi nhỏ bất cứ giá cổ phiếu. Một điều cuối cùng chúng ta cần phải làm ở đây là chỉ cần đảm bảo chức năng này trả về false. Điều này nói rằng nếu tôi là bên trong của một xử lý sự kiện và xử lý sự kiện trả về false thay vì trở về đúng, điều đó có nghĩa rằng tôi không muốn sự kiện ban đầu để bắn. Trong trường hợp này, nếu chúng tôi không có bất kỳ mã JavaScript nào và chúng tôi gửi một hình thức, trình duyệt web của chúng tôi sẽ nói, "Tôi sẽ gửi dữ liệu đó cùng," và chúng tôi sẽ gửi cho bạn đến một trang khác. Bởi vì chúng ta đang sử dụng AJAX bây giờ, không có nhu cầu gửi người dùng đến một trang khác. Chúng tôi chỉ cần đi để hiển thị các kết quả tự động trên cùng một trang. Chúng tôi thực sự không muốn họ đi bất cứ nơi nào, và tôi muốn ở lại trên cùng một trang. Vì vậy, bằng cách trở về sai, chúng tôi đảm bảo rằng hình thức không làm điều đó cho chúng ta. Chúng ta hãy nhìn vào những gì thực sự trông như. Trang báo của chúng tôi trông giống nhau. Hãy để tôi kéo lên thanh tra xuống đây để chúng ta có thể xem những gì đang xảy ra. Làm cho nó một chút ít rất lớn. Hãy nhớ nếu chúng ta mở tab Network, đây là nơi chúng ta có thể thấy tất cả các yêu cầu HTTP đang xảy ra trên trang. 

Đối với một biểu tượng cho tôi gõ AAPL và nhấn Get Quote. Bây giờ chúng ta đã thấy được rằng phần của Apple chi phí một số số lượng đô la chỉ xuất hiện trên trang web, nhưng URL không thay đổi ở tất cả. Trong thực tế, đây là yêu cầu HTTP mà chúng ta chỉ cần thực hiện. Chúng tôi đã thực hiện một yêu cầu POST đến quote.php. Điều đó làm cho ý nghĩa. Đây là những gì các máy chủ gửi cho chúng tôi trở lại. Nó không còn là tài liệu HTML khổng lồ với hình ảnh và những thứ như thế, nó chỉ là một dòng văn bản, và sau đó chúng tôi chỉ hiển thị dòng văn bản. Nếu chúng ta trở lại để các tiêu đề và xem những gì chúng tôi thực sự được gửi bên trong yêu cầu HTTP này, chúng ta có thể thấy ở đây là chúng ta gửi cùng một phím biểu tượng và giá trị của AAPL, đó là những gì người dùng gõ vào. Điều này là tốt đẹp, nhưng nó vẫn còn một chút khó chịu. Tôi vẫn phải nhấp vào nút này để có được giá cổ phiếu. Chúng tôi là những người bận rộn và chúng tôi không có thời gian để các nút bấm. Google nhận ra điều này một chút trong khi trước đây khi họ thực hiện Google Instant. Google Instant là khi bạn đang gõ nó chỉ bắt đầu hiển thị kết quả cho bạn vì vậy bạn không phải lo lắng về thậm chí cách nhấn Tìm kiếm. Trên thực tế, một câu chuyện thú vị liên quan đến điều đó. Một khi Google Instant ra, mọi người giống như, "Whoa, điều này là siêu tuyệt vời". "Đây là mát mẻ như vậy." Và một sinh viên tại Đại học Stanford 19 vào thời điểm đó thực hiện trang web này được gọi là YouTube tức thì. Tất cả tức thì YouTube không hiệu quả tìm kiếm YouTube ngay lập tức. Vì vậy, thay vì phải đi để YouTube.com và nhấn Tìm kiếm, khi tôi bắt đầu gõ vào một cái gì đó tức thì YouTube như CS50, chúng ta có thể thấy ở đây là nó cố gắng trên một kết nối Internet chậm cư những kết quả này sinh sống. Để làm điều đó chúng tôi thực sự có thể làm cho một sửa đổi tập tin quote.js của chúng tôi rất đơn giản để. Ngay bây giờ chúng tôi đang gắn sự kiện này khi biểu mẫu được gửi. Chúng tôi không thực sự muốn làm cho người sử dụng gửi rằng hình thức nữa, vì vậy chúng ta hãy thay vì cháy sự kiện này mỗi khi người dùng nhấn một phím. Để làm được điều đó trước tiên hãy thay đổi các sự kiện từ trình KeyUp. Điều đó có nghĩa là thay vì chờ đợi đối với hình thức nộp, mỗi phím được nhấn, một cái gì đó sẽ xảy ra. Nó không còn làm cho tinh thần để đính kèm sự kiện KeyUp cả các hình thức. Chúng tôi thực sự chỉ quan tâm về điều đó hộp tìm kiếm. 

Để chọn mà bây giờ, chúng ta có thể thay đổi điều này để có, chứ không phải quote hình thức, hình thức trích dẫn nội dung bài viết này và chúng tôi sẽ có một đầu vào (gõ = text) hoặc chúng ta có thể nói (tên = biểu tượng) - bất cứ điều gì chúng ta muốn. Bây giờ có một điều cuối cùng chúng ta phải làm. Ghi xuống đây khi chúng ta nói return false chúng tôi nói rằng chúng tôi không muốn sự kiện mặc định để bắn. Nhưng nó chỉ như vậy sẽ xảy ra rằng nếu chúng ta vô hiệu hóa mà bây giờ, bất cứ điều gì chúng tôi nhập vào sẽ không hiển thị trong trình duyệt nữa vì đó sẽ là hành vi mặc định cách gõ vào một hộp văn bản. Chúng tôi không còn muốn ghi đè lên đó, vì vậy chúng ta hãy phá hủy return false. Nếu chúng ta lưu và tải lại trang, bây giờ khi tôi bắt đầu gõ AAPL bạn sẽ thấy rằng giá cổ phiếu ở dưới cùng ở đây được hoàn thành tự động. Vì vậy, đây là CS50 Tài chính tức thì. Thực sự là một câu chuyện thú vị về YouTube Instant đó là sinh viên chỉ cần loại đã viết nó như một dự án 1-đêm, và ngày hôm sau ông được cung cấp một công việc Giám đốc điều hành YouTube. Vì vậy, đơn giản như vậy, bạn CS50 sinh viên, các dự án cuối cùng của bạn có thể giúp bạn có được một công việc tại YouTube. Một cái gì đó như thế là một ý tưởng thực sự mát mẻ cho một dự án cuối cùng, phải không? Chúng tôi đã có một số chức năng hiện có mà chúng tôi muốn để tích hợp với. Chúng tôi cải thiện trải nghiệm người dùng một chút, và đột nhiên tìm kiếm một cái gì đó trên YouTube Instant có thể là một dễ dàng hơn rất nhiều hơn so với tìm kiếm nó trên YouTube thường xuyên. Vì vậy, đó là AJAX trong một nutshell. 

Trong các ví dụ mà Joseph đã được hiển thị, chúng tôi thấy rất nhiều autocompletes, và những autocompletes thực sự, thực sự tiện dụng bởi vì chúng ta không phải nhớ Ví dụ, nếu bạn không nhớ giá cổ phiếu của Apple và chúng tôi chỉ biết đó là aa một cái gì đó, chứ không phải chỉ nói với tôi, "Một phần của điều này chi phí nhiều tiền như vậy", Tôi muốn biết những gì cổ phiếu bắt đầu với aa. Chúng ta có thể làm điều đó thực sự độc đáo với các thư viện Bootstrap đã được bao gồm trong CS50 Tài chính. Nếu bạn đến đây để thẻ JavaScript và di chuyển xuống Typeahead, điều này chỉ là một plugin tốt đẹp mà ai đó đã viết cho chúng tôi, và chúng tôi có thể dễ dàng sử dụng chức năng của nó như thế này. Tôi gõ vào A và đây là danh sách của một số tiểu bang bắt đầu với A. Hãy nói rằng tôi nghĩ rằng đây là thực sự mát mẻ và đó là thời gian cho tôi để bao gồm này trên trang của mình. Nó chỉ ra rằng điều này là thực sự, thực sự đơn giản. Hãy để nhảy qua đây để quote3.js. Tập tin của tôi trông khác nhau một chút. Xuống đây tất cả các công cụ AJAX của tôi là như nhau. Tôi muốn tải các dữ liệu chứng khoán mà không cần phải đi đến một trang khác. Nhưng bây giờ tôi muốn sử dụng plugin này. Các tài liệu Bootstrap có ví dụ tuyệt vời của chính xác làm thế nào tôi có thể làm điều đó. Tôi muốn nói, "Đây là đầu vào mà tôi muốn tự động hoàn chỉnh trên," và tôi sẽ gọi chức năng này được gọi là typeahead, và đó sẽ xử lý tất cả các công cụ Typeahead cho chúng tôi. Nó sẽ khởi tạo danh sách, nó sẽ làm tất cả lọc của chúng tôi. Điều duy nhất nó cần phải biết những dữ liệu chúng tôi đang autocompleting trên. Vì vậy, tôi phát hiện ra chìa khóa này chỉ bằng cách đọc các tài liệu và tìm kiếm các ví dụ. Nếu tôi cung cấp cho nó một phím nguồn, giá trị của khóa này chỉ là một số mảng của những điều tôi muốn tự động hoàn chỉnh. Biến này đến từ tập tin khác. Tôi mở symbols.js. 

Symbols.js Đây chỉ là mảng này thực sự, thực sự lớn chứa các chuỗi của tất cả các biểu tượng chứng khoán NASDAQ. Nếu tôi muốn nhảy trở lại HTML, để jharvard, vhosts, globalhost, html, các mẫu, quote_form. Kể từ đó bây giờ được gọi là quote3.js, hãy để tôi thay đổi các tập tin Javascript tôi là bao gồm ở đây. Bây giờ tôi có quote3.js, vì vậy tôi sẽ để tải tập tin JavaScript riêng biệt, mà đã là autocomplete Bootstrap. Bây giờ khi tôi nhảy trở lại trình duyệt, tải lại trang, và tôi bắt đầu nhập aa, có autocomplete của tôi. Và nó thực sự đơn giản như vậy. Tôi đã có 1 dòng mã mà chỉ nói, "Đây là những điều tôi muốn tự động hoàn chỉnh," và đột nhiên tôi có chức năng này thực sự, thực sự tốt đẹp với rất nhiều không phải toàn bộ nỗ lực ở tất cả. Khi bạn đang phát triển các trang web và đặc biệt là cuối mặt trước của vật, bạn sẽ thấy đây là một trường hợp rất nhiều. Có rất nhiều, rất nhiều, rất nhiều thư viện miễn phí thực sự mát mẻ ra có mà làm cho nó siêu dễ dàng để làm những việc như thế này. Bất cứ ai có thể suy nghĩ của bất kỳ hạn chế của đơn giản autocompleting này danh sách lớn các biểu tượng? Điều gì có thể là một cái gì đó không phải là tốt nhất với phương pháp tiếp cận này? Yeah. >> [Sinh viên] Thời gian, nếu bạn có rất nhiều không nghe được] Yeah. Ngay bây giờ, chúng tôi đang tải tập tin này JavaScript rất lớn và có rất nhiều các biểu tượng. Và vì vậy nếu chúng ta có một tấn công cụ, loại có thể làm tăng độ trễ của không chỉ tìm kiếm nhưng cũng tải về các tập tin thực tế. Lớn. Bất cứ điều gì khác? Ngay bây giờ không có ý nghĩa thực tế liên quan. Nếu tôi nhập vào một A, các công ty hiển thị ở đây có thể không được các công ty phổ biến nhất mà bắt đầu với A. 

Trước khi tôi nhận được cho Apple, nó có thể mất các ký tự một số chi tiết để tìm thấy những gì tôi đang tìm kiếm. Autocomplete này không có ý nghĩa này liên quan. Nó chỉ sẽ nói, "Bất cứ điều gì phù hợp với tôi sẽ để hiển thị." Thay vào đó, tôi muốn bằng cách nào đó tích hợp một số liên quan vào tìm kiếm của tôi. Nếu tôi đi qua đây để Yahoo! Finance, finance.yahoo.com, Nếu tôi cố gắng nhập một biểu tượng trên trang Yahoo! Finance và tôi bắt đầu nhập goog, tôi có danh sách tốt đẹp của sự vật. Rõ ràng, nó trông giống như Yahoo! Finance được làm một cái gì đó thông minh hơn ở đây. Họ có một số phù hợp và họ cũng có thông tin bổ sung như tên của cổ phiếu. Đó là một cái gì đó mà tôi có thể không thực sự có được chỉ với danh sách cổ phiếu của các biểu tượng. Tôi muốn điều này và do đó, tôi sẽ mang nó. Để làm điều đó chúng ta hãy làm một vài điều. Trước tiên hãy mở thanh tra trên trang này bởi vì chúng tôi thấy rằng trang này không tải lại ở tất cả, do đó, nó có thể sử dụng AJAX bằng cách nào đó để tải dữ liệu của nó. Chúng tôi có thể tìm ra những dữ liệu mà nó tải. Nếu tôi bấm vào tab Network này, các đang có được tất cả các yêu cầu bắt đầu được bắn. Bây giờ nếu tôi gõ goo, chúng ta có thể thấy rằng tôi chỉ có một yêu cầu HTTP mới. Đây có lẽ là nơi mà dữ liệu đến từ. Chắc chắn đủ, nếu tôi nhìn vào URL này, đó là một chút kỳ lạ được đặt tên, chúng ta có thể thấy rằng đây là chính xác nơi mà Yahoo đang gửi dữ liệu của nó. 

Tôi đã tạo ra một tập tin riêng biệt gọi là suggest.php đó là rất tinh thần tương tự chức năng tra cứu. Đó là cơ bản sẽ tạo ra một truy vấn đến URL của Yahoo, lấy lại một số dữ liệu, và gửi nó trở lại với tôi. Bây giờ, thay vì sử dụng danh sách này, rất lớn của các biểu tượng, Tôi có thể sử dụng những thứ liên quan tốt đẹp của Yahoo, và tôi không phải tải về tập tin JavaScript lớn. Tôi chỉ để kéo xuống ký hiệu chứng khoán thực sự có liên quan. Hãy nhảy vào đó. Vì vậy, html, js. Chúng tôi bây giờ vào quote4. Bây giờ chúng ta không còn sử dụng rằng danh sách lớn của các tập tin JavaScript. Nhưng có một loại nhỏ của vấn đề thiết kế ở đây. Chúng tôi đã nói rằng A trong AJAX là không đồng bộ. Điều đó có nghĩa là khi tôi thực hiện một yêu cầu AJAX, như vậy ngay ở đây trên dòng 8, đây là nơi AJAX yêu cầu của tôi là thực sự bị sa thải. Hãy nói rằng bây giờ tôi có một số mã xuống đây đó là sẽ làm một số công cụ như cảnh báo người dùng hoặc một cái gì đó thay đổi trên trang. Những gì sẽ không xảy ra là trình duyệt sẽ không phải chờ đợi cho yêu cầu này để tiếp tục trước khi đi xuống và đánh dòng này. Đó là một phần không đồng bộ. Nó sẽ làm cho yêu cầu này và nói, "Bất cứ khi nào bạn hoàn thành, "Trở lại và gọi đó là chức năng mà tôi đã nói với bạn để gọi bên trong của sự thành công." Điều đó có nghĩa là chúng ta không thể chỉ cần tải về tất cả các cổ phiếu trước. Chúng tôi cần phải thực hiện các yêu cầu và chờ đợi một cái gì đó để quay trở lại. Điều đó có nghĩa là trước đây, chúng tôi chỉ đơn giản là có thể nói Bootstrap, "Đây là danh sách những thứ tôi muốn bạn để tự động hoàn chỉnh." Chúng tôi không còn có thể làm điều đó nữa vì chúng ta không biết những gì chúng ta muốn thực sự tự động hoàn chỉnh trên. May mắn thay, Bootstrap nghĩ về điều này bởi vì những kẻ thông minh trên đó, và họ thực sự đã cho chúng tôi một cách khác để tải plugin này Typeahead. Trước đây, giá trị của khách sạn nguồn này mảng lớn thứ để tự động hoàn chỉnh trên. 

Nguồn tài sản thực sự là một chức năng, và mục đích của chức năng này là để tìm ra những điều autocomplete trên. Cách nó sẽ hiểu rằng con số là nó sẽ yêu cầu Yahoo! Finance những điều tốt nhất để tự động hoàn chỉnh. Để làm điều đó tôi sẽ làm cho một yêu cầu AJAX rất giống nhau. Tôi sẽ yêu cầu trang này tại suggest.php. Tôi muốn gửi cùng các biểu tượng vẫn còn. Và bây giờ thành công của tôi, các tài liệu hướng dẫn Bootstrap nói với tôi rằng để cư danh sách những thứ đó, tất cả những gì tôi cần làm là vượt qua trong mảng này ngay bây giờ để chức năng gọi lại. Nhưng chờ một phút. Nếu điều này được coi là một mảng và AJAX được gửi lại văn bản, làm thế nào là có thể? Này giới thiệu một phương pháp mới để trao đổi dữ liệu gọi là JSON. Trong trường hợp này chúng tôi không chỉ gửi lại một chuỗi đơn giản của văn bản. Bây giờ chúng tôi đang làm việc với danh sách này phức tạp hơn các biểu tượng cổ phiếu. Những biểu tượng chứng khoán cũng có thể bao gồm những thứ như tên của công ty hoặc giá hiện hành. Chỉ cần sử dụng một chuỗi dài không được định dạng trong bất kỳ cách nào dự đoán được sẽ không phải là cách tốt nhất để có được dữ liệu từ máy chủ của Yahoo để tôi trong một cách mà tôi có thể dễ dàng hiểu được. JSON là một công nghệ có lợi thế như thế nào chúng tôi tạo ra các mảng kết hợp trong JavaScript. Điều này có vẻ rất giống một mảng kết hợp JavaScript, và trong thực tế, đó là bởi vì nó là. JSON là viết tắt của JavaScript Object Notation. Điều này về cơ bản là một thoả thuận định dạng để chuyển dữ liệu qua lại. Ở đây đối tượng này JSON hoặc mảng JSON liên kết này còn gửi cho tôi một số dữ liệu về một khóa học. 

Các phím của mảng này là những thứ như khóa học có một giá trị của CS50, và xuống ở đây chúng ta có thể thấy rằng tôi có thể có một giá trị là một mảng. Tôi không phải làm những việc như phân tích ra các chuỗi và tìm kiếm dấu phẩy và làm những điều điên rồ như thế. Bởi vì điều này được khai báo trong định dạng JSON, JavaScript và jQuery đã có chức năng để chuyển đổi một chuỗi trông như thế này JSON vào một mảng thực tế kết hợp JavaScript chúng tôi có thể làm việc với. Làm như vậy là đơn giản như nói rằng không còn là tập tin này, suggest.php, gửi cho tôi trở lại chỉ đơn giản là một chuỗi các văn bản, nhưng tôi biết nó sẽ được gửi cho tôi trở lại JSON. Điều đó có nghĩa rằng đó JSON có thể được chuyển đổi thành một mảng kết hợp JavaScript. Và như vậy jQuery, tôi muốn bạn làm điều đó cho tôi. Điều đó có nghĩa là tham số này phản ứng ở đây, điều này không còn chỉ là một chuỗi. Bởi vì chúng tôi đã nói với jQuery ở đây có một số JSON, jQuery là có được đủ thông minh để nói, "Bạn muốn JSON?" "Tôi sẽ chuyển đổi đó vào một mảng kết hợp cho bạn." Chúng ta thực sự có một cái nhìn tại tab Network, một khi chúng ta có quote4.js. Chúng tôi sẽ thay đổi điều này và tải lại trang. Bây giờ tôi sẽ gõ vào một một lần nữa. Tôi đã thực hiện một yêu cầu để suggest.php, nhưng bây giờ phản ứng này, chứ không phải chỉ là chuỗi, JSON. Vì vậy, tôi có một cú đúp mở xoăn nói: "Ở đây có một mảng kết hợp." 

Chìa khóa đầu tiên và duy nhất của mảng kết hợp này được gọi là biểu tượng, và sau đó đây là một mảng của tất cả các biểu tượng có liên quan bây giờ từ Yahoo! Finance, chứ không phải từ danh sách khổng lồ. Đó là cách tôi chỉ đơn giản là có thể cư plugin này autocomplete với một số dữ liệu đó không phải đến từ một tập tin địa phương đã được xác định trước nhưng từ cái gì khác. Nó chỉ ra rằng chúng ta thực sự có thể tận dụng lợi thế của một công nghệ được gọi là JSONP, hoặc JSON với lớp đệm, đó sẽ loại bỏ này trung gian suggest.php. Nhưng thay vì làm điều đó, chúng ta hãy thay vào đó hãy xem làm thế nào tôi có thể cải thiện hơn nữa. Tôi thực sự thích Bootstrap của Typeahead. Nó thực sự tốt đẹp. Nhưng chúng tôi đang nhận được tốt JavaScript và chúng tôi muốn loại làm điều này bản thân mình, có thể có một cái nhìn vào những gì plugin này có thể được làm. Hãy để không còn được sử dụng điều Typeahead, và chúng ta hãy cố gắng để làm cho danh sách các cổ phiếu cho mình. Trong quote6.php chúng tôi đang đi để bắt đầu theo cùng một cách. Mỗi lần loại người nào đó một cái gì đó, chúng tôi muốn thực hiện một yêu cầu AJAX. Điều này là tương tự như Tài chính ban đầu tức thì của chúng tôi CS50. Thay vì một yêu cầu quote.php, Bây giờ chúng tôi đang thực hiện một yêu cầu đến tập tin tương tự như trước, suggest.php này, mà chỉ là kéo dữ liệu từ Yahoo! Finance. 

Một lần nữa, chúng ta vẫn mong đợi JSON, nhưng bây giờ kể từ khi Typeahead không làm điều này cho chúng ta, chúng tôi cũng cần phải gửi cùng giá trị mà là bên trong của hộp văn bản hiện hành. Bây giờ chúng ta biết những gì để yêu cầu Yahoo! Finance, và vì vậy bây giờ ở đây là chức năng mà chúng tôi muốn thực hiện một lần yêu cầu hoàn tất. Chúng tôi không có plugin để làm cho danh sách cho chúng ta, vì vậy đây là nơi mà chúng tôi đang thực sự đi để xây dựng một danh sách gợi ý. Để làm điều đó, giống như trong PHP, chúng ta nối các chuỗi lớn của HTML sau đó, chúng tôi in họ, chúng tôi có thể làm điều tương tự chính xác trong JavaScript. Trước tiên, chúng ta sẽ bắt đầu chuỗi này được gọi là gợi ý, và chuỗi này là chỉ cần đi để chứa một số HTML. Chúng tôi muốn nó phải là một danh sách những thứ, do đó, chúng ta sẽ bắt đầu với danh sách thẻ này, và bây giờ chúng ta sẽ lặp qua tất cả các biểu tượng đã được trả lại cho chúng tôi. Hãy nhớ rằng, bởi vì chúng tôi đã nói datatype: 'json', điều này không phải là một chuỗi. Điều này đã một mảng cho chúng tôi. Đó là thực sự mát mẻ. Chúng tôi chỉ đơn giản là có thể nói, "tôi muốn các bạn nối thêm một phần tử danh sách." Chúng tôi sẽ đặt nó bên trong một phần tử a bên cạnh đó, chúng tôi sẽ cung cấp cho nó một lớp học của đề xuất vì vậy chúng tôi biết nó là gì, và giờ đây là biểu tượng mà chúng tôi đã trở lại từ Yahoo! Tài chính. 

Một khi chúng ta đã tạo ra một phần tử cho mỗi biểu tượng chúng tôi đã nhận được trở lại, chúng tôi chỉ muốn đóng ra khỏi danh sách. Vì vậy, bây giờ đề nghị đại diện cho đoạn này ít HTML khi được đặt trên một trang là có được danh sách những điều chúng tôi đang tìm kiếm. Bây giờ chúng ta hãy thực sự đặt trên trang. Để làm được điều mà tôi đã thực sự tạo ra một div trống rỗng và tôi đã cho nó một ID của đề xuất. Cũng giống như chúng ta thiết lập các nội dung của div đó sẽ hiển thị giá của các dữ liệu chứng khoán, bây giờ chúng ta chỉ muốn thiết lập các nội dung của div này bất cứ chuỗi này là trong đó có chứa các biểu tượng này. Bằng cách sử dụng phương pháp này HTML, biến này đề nghị, chuỗi này, là một chuỗi của HTML. Tôi muốn bạn để đi mà HTML và đặt nó bên trong của div gọi là gợi ý. Chúng tôi đã chỉ nối một cái gì đó vào DOM. Chúng tôi đã thêm một số yếu tố mới vào DOM mà chúng tôi có thể hiển thị trên trang. Hãy xem này trông giống như. Nếu chúng ta nạp năm quote6 và bây giờ chúng tôi quay trở lại, bây giờ khi tôi bắt đầu gõ AAPL, chúng ta không có mà Bootstrap autocomplete, nhưng bây giờ chúng ta có danh sách này mà chúng tôi đã thực hiện bản thân mình. Đây là một uglier ít hơn so với các Typeahead Bootstrap, ví dụ, nhưng nó cho phép chúng ta làm một điều khác. Khi chúng tôi đã xem xét rằng các plugin Bootstrap, chúng ta đã thấy rằng khi chúng ta autocompleted, một trong những giá trị tự động hoàn chỉnh là AAPL. Điều đó có thể không được như vậy. Là người sử dụng, tôi có thể không ngay lập tức nhận ra tất cả các ký hiệu chứng khoán. Những gì tôi có thể có khả năng để nhận ra là những tên thực tế của công ty. Vì vậy, sẽ không thực sự hữu ích nếu thay vì nói AAPL này cho biết một cái gì đó như Apple Inc. Bởi vì chúng ta đã cuộn này chính chúng ta, chúng ta thực sự có thể dễ dàng làm điều đó. Hãy mở tập tin trích dẫn nội dung bài viết mới nhất của chúng tôi ở đây, vì vậy quote7. 

Cùng một điều. Tôi đã chỉ cần tạo ra một file PHP đó sẽ trở lại với chúng ta nhiều hơn là chỉ những biểu tượng. Nó cũng sẽ cung cấp cho chúng tôi tên của công ty. Và vì vậy chúng tôi đang làm điều tương tự. Chúng tôi đang làm cho một yêu cầu AJAX. Một khi các yêu cầu đã hoàn thành, chúng tôi sẽ thực hiện chức năng này ở đây, và chức năng này sẽ xây dựng một chuỗi lớn của các yếu tố. Nhưng sự khác biệt ở đây là giá trị của các danh sách này là không còn chỉ là biểu tượng, nó bây giờ tên. Vì vậy, chúng tôi có một vấn đề nhỏ. Khi chúng ta sử dụng tra cứu của chúng tôi, chúng ta cần vượt qua nó bằng cách nào đó các biểu tượng. Chúng ta không thể vượt qua cái gì tra cứu như Tập đoàn Microsoft. Chúng ta cần phải vượt qua nó MSFT. Khi chúng tôi đang viết HTML, chúng tôi có rất nhiều tốt đẹp được xây dựng trong các thuộc tính. A có thể liên quan đến với một href hoặc một lớp học. Nhưng những gì chúng tôi thực sự cần bây giờ là cho mỗi của các liên kết để có một biểu tượng cổ phiếu liên kết với nó. Không có được xây dựng trong thuộc tính HTML cho cổ phiếu biểu tượng, nhưng may mắn, HTML5 cho phép chúng ta tạo các thuộc tính của chúng tôi để được bất cứ điều gì chúng ta muốn. Bằng cách nói biểu tượng dữ liệu, tôi đã giới thiệu một thuộc tính mới có tên tôi chỉ cần thực hiện, và điều này không quan trọng vì tôi mở đầu với dữ liệu này. Chúng tôi sẽ lưu trữ bên trong biểu tượng có từ cổ phiếu. Điều này có nghĩa là, mặc dù chúng tôi đang hiển thị giá trị của tên công ty bên trong của autocomplete của chúng tôi, chúng tôi vẫn còn nhớ các biểu tượng được liên kết với mỗi công ty. Cách chúng ta đang làm mà là bên trong của bản thân yếu tố này. Vì vậy, điều đó có nghĩa là chúng ta cần phải thực hiện một sự thay đổi nữa. Khi nhấn vào nó bây giờ, chúng ta cần để thực sự tận dụng lợi thế của thuộc tính biểu tượng chứ không phải là giá trị của nó. Nếu chúng ta trở lại, chúng tôi đính kèm một xử lý sự kiện để gợi ý. Bất cứ khi nào một trong những gợi ý được nhấp bây giờ, tôi muốn làm một cái gì đó. Những gì tôi muốn làm là thay đổi giá trị của hộp đầu vào đó. Bây giờ tôi muốn thiết lập cùng một chức năng này val. 

Vì vậy, mà không có bất kỳ đối số chức năng này val trả về cho bạn những gì đã có trong hộp văn bản, nhưng nếu bạn cho nó một chuỗi, nó sẽ mất rằng chuỗi và đặt nó vào hộp văn bản. Tôi đang lựa chọn hộp văn bản của nó trong cùng một cách. Tên của nó là biểu tượng bên trong hình thức của báo. Bây giờ tôi đang gửi đi giá trị của dữ liệu thuộc tính biểu tượng. Điều này ở đây là mới, điều này $ (this). Điều này đề cập đến các yếu tố đó được nhấp. Chúng ta có thể thấy rằng chúng tôi không gắn một sự kiện click cho mỗi yếu tố với một lớp học của đề nghị cá nhân. Thay vào đó, chúng tôi đang tiếp cận này một chút khác nhau. Thay vào đó, chúng tôi đang nói bất cứ khi nào bất cứ điều gì bên trong thẻ div này gợi ý, nhớ chỉ là các container cho danh sách đó, nếu một cái gì đó bên trong thẻ div này là nhấp vào và nó có một lớp học của các đề nghị, Tôi muốn sự kiện này để bắn. Về cơ bản những gì điều này có nghĩa là chúng ta có thể làm là chúng ta có thể tái sử dụng cùng một xử lý sự kiện cho tất cả những điều trong danh sách. Vì vậy, chúng tôi không cần phải có một xử lý sự kiện cho các yếu tố đầu tiên và xử lý sự kiện khác nhau cho các phần tử thứ hai. Chúng tôi thay vì có thể nói, "Tôi muốn cùng một xử lý sự kiện để áp dụng cho tất cả mọi thứ trong danh sách của tôi." Nhưng bằng cách nào đó chúng ta cần phải biết được yếu tố được nhấp. Điều này "" từ khóa đại diện cho điều đó. Đây là đối tượng đã được chỉ cần nhấp vào bởi người sử dụng. Nếu tôi chỉ cần nhấp vào liên kết thứ 3, đại diện cho các yếu tố của liên kết thứ 3, có nghĩa là tôi có thể nhận được thuộc tính của nó, dữ liệu-biểu tượng, mà chúng ta biết có chứa các biểu tượng liên kết với công ty tôi chỉ cần nhấp vào. Nếu chúng tôi nhảy trở lại trang tài chính của chúng tôi, chúng ta có thể thấy rằng một khi tôi bắt đầu gõ một cái gì đó như msft, chúng tôi không chỉ nhận được các biểu tượng chứng khoán, chúng tôi đang nhận được các công ty thực tế. Nhưng khi tôi bấm vào một trong các công ty này, chúng ta có thể thấy rằng chúng tôi đang thực sự populating hộp văn bản không phải với tên của công ty nhưng với bất cứ điều gì đã được lưu trữ bên trong những thuộc tính dữ liệu. Và vì vậy nếu tôi thực sự kiểm tra một trong những yếu tố này bằng cách click chuột vào nó và nhấp vào kiểm tra nguyên tố, chúng tôi thực sự có thể nhìn thấy những gì trông giống như. 

Nhớ rằng đây là một cái gì đó mà chúng tôi tạo ra bên trong đó vòng lặp for khi chúng tôi đang xây dựng rằng chuỗi HTML. Chúng ta có thể thấy ở đây là biểu tượng này dữ liệu có giá trị của MSFT, đó là rất tốt. Đó là những gì chúng tôi mong đợi. Đó là biểu tượng và đó là cách chúng tôi có giá trị mà chúng tôi cần thiết để sử dụng bên trong của hộp văn bản này. Đó là đủ đối với hình thức trích dẫn nội dung bài viết này bởi vì đó là loại nhàm chán. Chúng ta chỉ cần thực hiện một số cải tiến nhanh đến trang danh mục đầu tư của chúng tôi. Nếu bạn đã sử dụng CS50 Tài chính trong một thời gian và bạn bắt đầu mua và bán rất nhiều cổ phiếu, cuối cùng bảng này là sẽ nhận được khá lớn, và bạn sẽ muốn có một mã cổ phiếu chứng khoán, tất nhiên. Một khi bảng là thực sự, thực sự lớn, nó có thể hữu ích cho người sử dụng để cố gắng tìm kiếm trên. Bên trong của hộp tìm kiếm nếu tôi bắt đầu gõ một cái gì đó như Disney và tìm kiếm cổ phiếu Chuột Mickey của tôi, chúng ta có thể thấy rằng các bảng đang lọc dựa trên những gì tôi chỉ cần gõ nhập. Chức năng này có vẻ siêu phức tạp, nhưng nó thực sự, thực sự dễ dàng với jQuery và JavaScript. Portfolio.php tập tin này bao gồm một tập tin JavaScript được gọi là portfolio.js. Chúng ta hãy nhìn vào lúc đó. Vì vậy, html, js, danh mục đầu tư. Đây là nơi chúng tôi đang làm điều đó trên bàn. Điều đầu tiên tôi cần làm là đính kèm một xử lý sự kiện cho rằng hộp văn bản bởi vì chúng tôi biết rằng chúng tôi muốn chức năng của chúng tôi lọc để bắn mỗi khi người dùng nhấn một cái gì đó bởi vì chúng tôi không có thời gian cho các nút Tìm kiếm. Điều đầu tiên chúng ta cần làm là tìm ra những gì người dùng đang tìm kiếm, giống như chúng ta đã làm trước đây. Từ khóa này đề cập đến các yếu tố hiện người dùng đang tương tác với. 

Bởi vì người sử dụng tương tác với hộp tìm kiếm, $ Này đại diện cho hộp tìm kiếm, để this.val cho chúng ta những gì bên trong của hộp tìm kiếm người sử dụng hiện đang gõ. Vì vậy, bây giờ những gì chúng tôi muốn làm là chúng tôi muốn để lặp qua tất cả các hàng bên trong của bàn của chúng tôi. Để chọn tất cả các hàng trong bảng của chúng tôi, tôi đã cho rằng bảng một ID của bảng danh mục đầu tư, và mỗi hàng được đại diện bởi một yếu tố TR, chọn này là sẽ quay trở lại cho tôi một mảng lớn của tất cả các hàng trong bảng của tôi. Bây giờ tôi muốn để lặp qua mảng đó. Tôi có thể cho bạn một vòng lặp for, nhưng jQuery thực sự cung cấp cho chúng tôi chức năng tốt đẹp được gọi là "mỗi". Từng làm là mỗi mất một đối số, và tranh luận đó là một chức năng. Những gì nó sẽ làm là nó sẽ áp dụng chức năng để tất cả các phần tử bên trong của danh sách này. Chức năng này nhận một đối số đó là e, và khi chức năng này được thực thi, điện tử này sẽ được thay thế bằng hàng đầu tiên, sau đó là hàng thứ hai, và sau đó hàng thứ ba. Bằng cách này, đây là điều tương tự như chạy một vòng lặp for và sau đó tìm các yếu tố hiện tại dựa vào bên trong chỉ số của bạn cho vòng lặp. Tại mỗi lần lặp lại, mỗi người trong số những yếu tố này trong bảng, Tôi muốn kiểm tra nếu các văn bản của nguyên tố này - các văn bản của các tế bào bên trong của hàng - phù hợp với những gì tôi đang tìm kiếm. Chuỗi này dài lớn các lệnh là làm thế nào tôi có thể làm điều đó. Đầu tiên, một lần nữa, điều này ngay bây giờ đề cập đến - bởi vì nó là bên trong của một chức năng mới - điều này bây giờ là hàng hiện tại trong bảng. Tôi muốn lấy hàng hiện tại trong bảng, và tôi muốn để có được tất cả các con của nó. Hãy nhớ rằng, DOM là một cây phân cấp, điều đó có nghĩa rằng các phần tử có một số trẻ em. 

Chức năng này, trẻ em sẽ trở về tôi trở lại một mảng của tất cả các yếu tố là con cái, trong trường hợp này, một hàng trong bảng. Điều này chỉ đơn giản là các tế bào bên trong của hàng. Tôi chỉ muốn tìm kiếm trên các tế bào đầu tiên. Đầu tiên chức năng này cung cấp cho tôi những yếu tố đầu tiên trong mảng đó. Sau đó, chức năng văn bản nói rằng tôi biết chính xác những gì bên trong của tế bào đó kể từ khi tôi muốn tìm kiếm trên văn bản đó. Cuối cùng, chúng ta hãy chuyển đổi nó thành chữ thường, vì vậy chúng tôi có thể làm các truy vấn trường hợp văn bản không nhạy cảm. Cuối cùng, chúng tôi muốn để xem nếu đó là chuỗi bên trong của một bảng chứa các chuỗi chúng tôi đang tìm kiếm. Chức năng indexOf trong JavaScript hiện điều đó. Nó cho chúng ta hay không chuỗi này chứa một chuỗi. Nếu đó là sự thật rằng tế bào có chứa những gì tôi đang tìm kiếm, sau đó tôi muốn để đảm bảo rằng nó được hiển thị. Phương pháp hiển thị sẽ nói, "Hiển thị các phần tử." Nếu đây không phải là trường hợp, thì đó có nghĩa là bất cứ điều gì tôi đang tìm kiếm không được chứa trong hàng đó, và vì vậy tôi muốn ẩn từ người sử dụng. Mà đạt được rằng hiệu ứng lọc tốt đẹp, nơi chúng ta không còn nhìn thấy toàn bộ bảng. Nếu bạn quan tâm đến làm thế nào để làm cho mã cũng, chúng tôi sẽ đăng các nguồn trực tuyến. Nhưng nó thực sự đơn giản. JQuery có phương pháp tuyệt vời cho những hình ảnh động và thao tác các thuộc tính CSS. Vì vậy, đó là nó cho tôi. 

Những gì sau đó ở phía trước? Như bạn sẽ thấy trong một vài ngày, đề xuất các dự án cuối cùng là do. Các dự án cuối cùng đề nghị sẽ hỏi bạn một số câu hỏi, nhưng trong số đó sẽ có ba sự kiện quan trọng - 1 một "tốt" cột mốc quan trọng, một mốc quan trọng tốt hơn, và một tốt nhất. Ý tưởng đang được thực sự để giúp bạn thiết lập mong đợi của bạn để tối thiểu bạn sẽ được hạnh phúc với đầu ra của dự án cuối cùng của bạn và nó sẽ được "tốt" xa như vậy bạn đang quan tâm. Nhưng sau đó trong sự quan tâm của bạn để đạt được chỉ là một chút đến một cái gì đó tốt hơn hoặc một cái gì đó tốt nhất, chúng tôi cũng sẽ sắp xếp đẩy bạn hướng tới đó là tốt. CS50 Hack-a-thon, trong khi đó, trong một vài tuần. Thông thường, chúng tôi làm điều này trên một cơ sở cơ sở xổ số vì lợi ích, nhưng tỷ lệ cược là chúng tôi sẽ phải mất một vài trăm người trong chúng ta trong xe buýt đưa đón từ Harvard Square Kendall Quảng trường nơi mà Microsoft có một cơ sở xinh đẹp aptly gọi là "NERD" - Trung tâm Nghiên cứu và Phát triển New England. Chúng tôi sẽ đến đó khoảng 8 pm Chúng tôi sẽ có một số thực phẩm. Khoảng 1 giờ sáng, chúng tôi sẽ có thêm một số thực phẩm. Khoảng 5 nếu bạn vẫn còn tỉnh táo, chúng ta sẽ đi qua IHOP hoặc đưa bạn trở lại khuôn viên trường. Mục tiêu là để nhảy vào các dự án cuối cùng cùng với các bạn cùng lớp và nhân viên. Sau đó, một vài ngày sau đó là Hội chợ CS50, mà thực sự có nghĩa là một cơ hội cho các bạn để giới thiệu công việc của bạn và thành tựu trong học kỳ trong khi kề vai sát cánh với nhau và nhận được một cảm giác về những gì mọi người đã làm. Với mà nói, cảm ơn nhiều đến Tommy và Joseph, và chúng ta sẽ thấy bạn vào thứ hai.  [Vỗ tay]