[Powered by Google Translate] [Tydzień 9 DALEJ] [David J. Malan - Harvard University] [To jest CS50. - CS50.TV] 

To CS50. To jest koniec tygodnia 9. Dziękuję bardzo. Wreszcie. Tydzień 9. Mam. Dziś kontynuujemy naszą rozmowę na temat programowania WWW z okiem w kierunku końcowego projektu, a nie dlatego, że masz coś zrobić, web-based dla końcowych projektów, ale ponieważ zarówno dla końcowych projektów lub po CS50 z pewnością jest to kierunek, w którym nowoczesne oprogramowanie będzie. A przecież to nie jest faktycznie rzeczą łatwą. W rzeczywistości, jeden z najtrudniejszych rzeczy do zrobienia jest aspekt projektu. 

Na przykład, z założenia, że ​​w rzeczywistości oznacza się interfejs użytkownika lub doświadczenie użytkownika w prawo. Śmiem twierdzić - i wiemy, że z niedawnego zbioru problemowego gdy kilku z was antenie swoje zastrzeżenie o jakiś kawałek oprogramowania lub sprzęt irytuje cię, czy na uczelni lub poza - istnieje wiele stron tam, jest dużo sprzętu tam, tego rodzaju bani. Ale rzeczywistość jest taka, że ​​z rzeczy, które są łatwe w użyciu, ale są jednak potężne Jest to bardzo trudne wyzwanie. Więc na dzisiaj poprosiłem Józefa i Tommy dołączyć do mnie tutaj tak, że możemy mieć rozmowę, zarówno o projekt i jakiego rodzaju procesów myślowych powinien zacząć chodzić w Twojej głowie Podczas projektowania finałowych projektów, twoje przyszłych przedsięwzięciach. I wtedy z pomocą Tommy'ego przyjrzymy niektóre szczegóły realizacji. Jak możesz mieć wizję na papierze lub w głowie które następnie można wykonać programowo za pomocą niektórych technologii i technik, które właśnie zaczął mówić o, mianowicie JavaScript i coś jeszcze nowszego, czyli AJAX, asynchroniczny JavaScript. To pozwala na tworzenie jeszcze bardziej dynamiczne z interfejsem użytkownika przez pobieranie więcej danych stopniowo z serwera. Więc zobaczymy niektóre z tych fragmentów, jak również dzisiaj. Tak na marginesie, jeśli są Państwo zainteresowani w koncentracji w informatyce lub minoring w informatyce, wiedzą, że w ten piątek w południe w Maxwell Dworkin 221 będzie wydarzeniem pizzeria gdzie można dowiedzieć się nieco więcej na temat informatyki. Na swojej drodze do drzwi dzisiaj będziesz w stanie odebrać nieoficjalny przewodnik CS na Harvardzie. Umieścimy go na puszki na śmieci na zewnątrz na wysokości pasa tak, że jeśli chcesz, aby pobrać ten i dowiedzieć się nieco więcej o CS, że będzie tam dla ciebie, jak to było w tygodniu 0. Także, jeśli chcesz dołączyć do nas na obiad w piątek CS50 na 13:15, udać się do cs50.net/lunch. Bez zbędnych ceregieli, dam ci ucząc Joseph Ong. Hi. [Oklaski] Dzięki. Gdy po raz pierwszy dowiedziałem się o projekcie był w klasie tutaj nazywa CS179. 

Profesor w czasie opowiedział nam historię o innego profesora który poszedł do hotelu i korzystali z kranów. Czy ktoś może mi powiedzieć, co 2 gałki na lewo i prawo to zrobić? [Uczeń] zimna. >> Zimna. Good. Co się normalnie spodziewać, prawda? Ten profesor po użyciu kranu chce wziąć prysznic, a on przechodzi do tego użyć. On myśli, lewej i prawej strony są na gorąco i na zimno, prawda? Ale może ktoś mi powiedzieć, co to właściwie zrobić? Wszelkie ręce? [Niesłyszalne reakcja studentów] >> Jedna z propozycji jest? [Niesłyszalne odpowiedź uczeń] Temperatura >>? Tak więc jednym z nich reguluje temperaturę i inne elementy sterujące? >> [Uczeń] ciśnienie wody. Ciśnienie wody. Good. Ten profesor wchodzi do tego i, myśląc, że kontrolują ciepło i zimno, włącza tę właściwą, która jego zdaniem jest gorąco, aż się bo chce wziąć ciepły prysznic. Cóż, to tak naprawdę nie pasują do siebie, więc dostaje to nie bardzo świetna zabawa bycia w zimnym prysznicem, a wszyscy wiemy, jakie to uczucie. To jest przykład wada projektu. Co mam na myśli, że to jego oczekiwanie z kranu nie pasuje do tego, co wyszło z prysznicem, co jest raczej niefortunne dla niego. Jest to więc przykład wada projektu, co dzieje się w prawdziwym życiu. Ale widzimy wszelkiego rodzaju inne te, jak również. Nie jesteśmy pewnie fani systemu MBTA. Jest to system metra rzeczywiście w Londynie, który mówi: "Ten przycisk nie jest w użyciu." Dlaczego jest to nawet tam? Dlaczego w ogóle obchodzi? Kiedy byłem dzieckiem, jest tech savvy jeden w domu, gdy komputer będzie katastrofy, mama przyjdzie do mnie, pokazano mi ten ekran i pyta mnie co się stało. 

Nawet nie wiem, co to oznacza. [Śmiech] Co? [Śmiech] Czasami czuję się jak programistów to tylko trolling nas. Jako użytkownicy jesteśmy jak "Co się dzieje? Ktoś nam powie." To wszystko sprowadza się do kwestii designu. Design, jak widać, nie jest czysto o estetykę, to nie jest o tym, jak wyglądają. Widzimy tutaj, że ten mały pop-up tutaj faktycznie wygląda całkiem ładnie. Ma cień w tle, ma granic promieni dzieje. To trochę dość. To nie jest bardzo dobrze zaprojektowany, bo to nie jest bardzo przyjazny dla użytkownika. To trochę pop-up, które pojawia się tak naprawdę nie dał mi żadnych informacji o tym, co się dzieje, to nie ma mi nic powiedzieć jako użytkownik o tym, jak wyjść z tego błędu. Chcemy myśleć o rzeczach, że projekt nie jest. Po pierwsze, nie jest estetyczne. To również nie farsz aplikację ton niepotrzebnych funkcji. Jeśli jesteś tajska restauracja, pewnie nie chce być dentystą w tym samym czasie. I pytania Facebook nie, że wiele osób go stosować i to nie było naprawdę w centrum tego, co budowali. I tak miło, że nie o tyle ilość rzeczy że jesteś wprowadzenie do aplikacji, ale jakość i jak robisz, że doświadczenie użytkownika lepiej przez faktycznie poprawę tego, co już masz. 

W skrócie, projekt mówi nam co powinniśmy budować. Na przykład, jeśli budujemy coś, co pozwoli nam szukać rzeczy, takich jak Google, na przykład, musimy robić rzeczy w sposób który wymaga, aby użytkownik podejmuje wiele kliknięć, aby dostać się, czego chcą, czy należy to zrobić w sposób, na przykład, z Google Instant lub autouzupełniania który pozwala nam dotrzeć do naszych wyników szybciej? Technika polega na jak Tommy pokaże, właściwie go budować. Istnieje wiele rodzajów konstrukcji. Na przykład, jeśli budujemy coś wdrożyć coś w kraju Trzeciego Świata, gdzie nie ma zbyt wiele energii elektrycznej lub, że wiele technologii, należy zaprojektować co budujesz w sposób, który łatwo daje dostęp do ludzi. Ale jakiego rodzaju innych decyzji projektowych może istnieć lub może być zamieszany w coś takiego? Tak. Widzę rękę. [Niesłyszalne odpowiedź uczeń] Prawo. >> Dokładnie. Dostępność jest jedna rzecz. Wielu ludzi nie myśli o "Co z moich użytkowników?" jak skrajnych zarówno widma. Mam użytkowników, którzy mogą mieć niepełnosprawności, że nie myślę o a ja na samą myśl o projektowaniu dla zwykłego użytkownika. Internet jest dostępny dla każdego, w dzisiejszych czasach, i powinienem być projektowania dla tych osób, jak również. Jakie rodzaje innych decyzji projektowych można zarobić? Tak. >> [Uczeń] Koszty. Kosztować. Bardzo dobrze. Inna rzecz, którą opieramy nasze decyzje projektowe na to koszty. Jeśli jesteśmy biznesu, chcesz zbudować coś, co nie zajmują dużo koszt wytworzenia ale można sprzedać kosztem szczególnie wysokim lub może uzyskać nam zysk. 

Są to wszystkie rodzaje konstrukcji, ale kiedy budujemy coś w Internecie lub gdy budujemy coś, co prawdopodobnie nie kosztuje zbyt wiele zbudować się, jak aplikacji internetowych - nie musisz rzucać w nią dużo kapitału , aby zrobić coś, co faktycznie działa - co jesteśmy bardziej martwi się o to doświadczenie użytkownika. Nazywamy to łatwość wyśrodkowany projekt. Zasadniczo co użytkownik centered projektowania obejmuje stawia siebie w buty swoich użytkowników. Jeśli ktoś zarejestruje się w to, co buduję, oni oczywiście przyjść do mojego konkretnego zastosowania z cel na uwadze, z zadaniem, że chcą, aby zakończyć. A naszym zadaniem jest nie tylko, aby pomóc im wypełnić to zadanie ale pomóc wykonać to zadanie w sposób, który jest skuteczny, intuicyjne i, jak jakaś osoba mówi tam, dostępne. Co wydajność oznacza? Efektywność oznacza, jak szybko ma moja instrukcja wykonania zadania podano mój interfejs. Zajmuje dużo kliknięć dla nich, aby dostać się z jednego miejsca do drugiego? Czy to jest nudne? Czy muszą wykonywać wiele powtarzających się zadań? Chcemy, aby ten proces był jak najbardziej skuteczny więc nie trzeba robić te różne rzeczy. Co do intuicyjności, to, na przykład, gdy użytkownik wyszukuje mój interfejs jest to łatwe dla nich, aby dostać się z miejsca na miejsce? Czy jest to dla nich łatwe, aby dowiedzieć się, co mają do kliknij w moim interfejsie aby dla nich, aby osiągnąć cel lub zadanie, które chcą osiągnąć? 

I wreszcie, jak jedna osoba mówi tam, dostępność jest bardzo ważna. [Mężczyzna głośnik] Chodzi o dostępności dla rzeczy takich jak widzenie, lubię jak mam rzeczywiście zaprojektować coś dla kogoś, kto jest ślepy? Oh. Dla ludzi, którzy nie widzą w ogóle, mamy coś, co nazywa czytniki ekranu. Co należy zrobić, to należy budować swoją stronę w sposób że, na przykład, poszczególne technologie, co nazywamy - Istnieje wiele rzeczy teraz. Myślę, że są czytniki ekranu nazywane JAWS. Wiele z tych rzeczy opierają się na to, co nazywamy zasady strefy w celu odczytu do użytkownika, co ma na stronie. Dla tych ludzi, którzy nie widzą, trzeba się upewnić, że te czytniki ekranu rzeczywiście może podnieść zawartość na stronie i może pokazać użytkownikom, jeśli nie można zobaczyć, a przynajmniej można jeszcze zrozumieć treść na stronie. Tak. Okay. Wystarczy mówić o dobrej konstrukcji. Porozmawiajmy o złej konstrukcji. Są rzeczy, których nie powinno się robić. Czy ktoś może mi powiedzieć o swoich doświadczeniach z Craigslist i to, co myślą, nie jest tak wielka, o tym projekcie? Tak. >> [Uczeń] Myślę, że jest zbyt wiele słów w jednym miejscu. Zbyt wiele słów, prawda? Całkowicie przytłaczające. Możesz przyjść do tej strony i jesteś witany z całą masę rzeczy tutaj że może nawet nie ma znaczenia dla Ciebie. Na przykład, że mieszkasz w jednym stanie, że nie zaczyna się od tej litery. Powiedzmy, że mieszka w Teksasie, czy coś. 

Musisz przewinąć w dół strony, aby dostać się do miejsca są. Jestem z Bostonu, więc pozwól mi patrzeć w Massachusetts. Gdzie jest Massachusetts? Och, to właśnie tutaj. Och, to Boston. Okay. Spójrzmy na Boston. [Śmiech] Dość przytłaczające, prawda? Niezgrabne rzeczy tam. [Śmiech] Powiedzmy, że szukam gdzieś mieszkać. Ile osób faktycznie wykorzystane Craigslist? Ton Ciebie. Istnieje całkiem złe sposoby obejrzysz, ale spójrzmy na to. Jaka jest różnica pomiędzy img i pic? Czy ktoś może mi powiedzieć? Tam faktycznie nie ma różnicy. Mają na myśli dokładnie to samo, ale mają różne etykiety dla nich z jakiegoś powodu. Jeśli kliknę Posiada pliku nic się nie dzieje na stronie. I rzeczywiście trzeba kliknąć Wyszukaj ponownie coś się wydarzy. Co może być lepszym projektu decyzji, że można zrobić tam? Jeśli jestem kliknięcie tego filtra, prawdopodobnie chcesz filtrować przez danego działania lub danej kategorii. Więc zamiast nacisnąć Wyszukaj ponownie, może po prostu automatycznie zrobić filtrowanie rodzaj stylu Google, gdzie to zrobić natychmiast. [Malan] Ale nie tworzy jak widzieliśmy je dotychczas musiały być fizycznie przekazywane naciskając Enter przynajmniej lub klikając przycisk? Jak widać ich tak daleko, trzeba rzeczywiście kliknij Submit robić te rzeczy. 

Ale jak Tommy pokaże w sekundy, tak naprawdę są sposoby, taki sposób, że po kliknięciu na tym czymś może automatycznie wysyłać co nazywamy żądania AJAX i uzyskać dane z powrotem i filtrować wyniki natychmiast. Jest mnóstwo rzeczy, które są w porządku z tym interfejsem. [Malan] możesz wyszukać Cambridge? Jest coś, co nieco nietypowe tutaj gdzie cię obchodzi Cambridge i jeszcze dostajesz Westford, Spring Hill, West Newton i jak. Prawdopodobnie nie idealny. >> Prawdopodobnie nie idealny. Jak mogę być w stanie dokonać doświadczenia użytkownika lepiej na tej konkretnej stronie? Tak. >> [Uczeń] Instrukcje. Okay. Instrukcje w jaki rodzaj sens? [Uczeń] Na przykład, co dla początkujących użytkowników, którzy nawet nie wiedzą, co jest Craigslist lub nie wiesz, co masz robić. Racja. Więc wyjaśniając Craigslist jest na tej stronie jest bardzo ważne. Rzeczywiście możemy powiedzieć użytkowników, co ta strona jest faktycznie dla. Jeśli mam tu tylko to, widzę całą masę miejsc. Ja nawet nie wiem, co one oznaczają. Ale co ważniejsze, po prostu patrząc na ten interfejs, pamiętam musiałem przewijać mnóstwo rzeczy do znalezienia konkretnego społeczności że rzeczywiście zależało na tym. Co jest szybszy sposób można to zrobić? Tak. [Uczeń] Podzielić je na Wschód, regionach zachodnich. >> Okay. Mógłbym podzielić je na więcej kategorii, które mogą pomóc mi szybciej ustalić jak dostać się do danego miejsca. [Uczeń] Umieść listę rozwijaną. >> Racja. Okay. Przydałby mi się menu rozwijane, ponieważ mamy stały zestaw rzeczy i będziemy mogli pokazać je w rozwijanym menu. W ten sposób to nie zajmuje dużo miejsca na ekranie. Ale nawet lepiej niż to, co możemy zrobić? Tak. >> [Niesłyszalne odpowiedzi studentów] >> Czy możesz powiedzieć to jeszcze raz? >> [Uczeń] polu wyszukiwania. Tak, pole wyszukiwania. To świetnie. Co możemy zrobić, to rzeczywiście, jeśli spojrzeć na slajdy, pola wyszukiwania. Autouzupełnianie. Bardzo łatwy sposób przeglądać wyniki, które wiesz, że są w zestawie. Jeśli zaczniesz wpisywać BO, tylko pokaż mi wszystkie wyniki, które mają BO wewnątrz nich. W ten sposób można bardzo łatwo znaleźć konkretny, którego chcę, aby przejść do zamiast przewijania tej listy naprawdę duże. 

Są to wszelkiego rodzaju naprawdę nisko wiszących owoców, które ktoś realizuje Craigslist może faktycznie zrobić, aby doświadczenia na stronie dużo lepiej dla ich użytkowników. Okay. Wystarczy mówić o złych stronach. Porozmawiajmy o Facebook. Kiedy Facebook wyszedł, a zwłaszcza zdjęcia Facebook, było wiele innych usług, w tym czasie, który mógłby zrobić dokładnie te same rzeczy. Mogli organizowanie zdjęć w albumach. Co można zrobić, to można zorganizować je w zestawy, jak również. Można organizować je według daty. Można zrobić wszystkie te szczególne rzeczy. Ale czy ktoś wie co się Facebook zdjęcia wybuchnąć w czasie gdy została wydana? Tak. >> [Studentów] Tagi. Tags. >> Dokładnie. Mamy Milo tu, który jest naszą maskotką pies z tego chustka CS50. Widać, że mamy tę funkcję tagowania w środku. I co się tak ciekawe zdjęcia Facebook, z punktu widzenia użyteczności jest to, że ludzie rzeczywiście mogą za pośrednictwem tego zaangażować swoich znajomych na zdjęciach. Na Facebooku, ponieważ ich strona jest szczególnie społecznym, chodzi o budowę tego rodzaju atmosfery społecznej. To poprawiło doświadczenia dużo więcej zdjęć ponieważ mogą one zacząć, mówiąc: "To są połączenia między ludźmi, i są to zdjęcia o ludziach rzeczywiście zależy. " Część z nich jest też narcyzm sort. Ludzie lubią być oznakowane w zdjęć i tego typu rzeczy. Mimo, że nie koniecznie dobrą ludzką cechę, w tym samym czasie, to w oparciu o dobrych decyzji projektowych bo ludzie faktycznie dbają o takie rzeczy. Więc to zdjęcia Facebook. 

Ale porozmawiajmy Facebook bardziej ogólnie. Jestem pewien, że wiele osób tutaj ma opinii o Facebooku, zarówno dobre i złe decyzje projektowe decyzje projektowe. Więc odpowietrzyć lub być szczęśliwy. Chodź. Wiem wszystko o tobie użyć Facebook. Ktoś musi coś złego do powiedzenia lub coś dobrego do powiedzenia o nim. Tak. [Uczeń] W wiadomości RSS jest dużo rzeczy, których tak naprawdę nie obchodzi. Feed aktualności ma pokazać wiele rzeczy może nie zależy. Masz znajomych na Facebooku, którzy nie spotkali się na 2 lub 3 lata i widzisz ich wyniki nowości pojawiały się w kanale wiadomości i tak naprawdę nie dbam o to. Facebook rzeczywiście starał się zrobić to lepiej, a oni rzeczywiście próbowała wcisnąć odpowiednie wyniki na górze wiadomości RSS jak późno więc rzeczywiście zobaczyć rzeczy przez przyjaciół, które są odpowiednie dla Ciebie lub Twoich bliskich przyjaciół. Coś jeszcze? Tak. [Niesłyszalne odpowiedzi studentów] >> Czy możesz powiedzieć to jeszcze raz? [Uczeń] Reklamy są stosunkowo dyskretny. >> W jakim sensie? [Niesłyszalne odpowiedź uczeń] Oni nie mają światła na ekranie, jak banery. Okay. To dobrze. Jeśli pamiętasz Internetu z lat 90-tych - >> [Malan] I tam był. >> On tam był. [Śmiech] Możesz pamiętać Gify migające tła, sparkly rzeczy Sort stylu GeoCities rzeczy. To naprawdę nie jest przykładem dobrego projektu bo to naprawdę rozprasza od treści. Strona sztuka Yale użyte do animowanych plików GIF, jak ich tle i nie można było czytać niczego na stronie, ale myślę, że ktoś rzeczywiście rozmawiał z nimi i teraz jest nieco inaczej. [Malan] Jest dużo lepiej. >> Jest dużo lepiej, jak widać. >> [Malan] Oh yeah. Po prostu super, po prostu - Tak. Okay. 

Część jest również co Twoja strona prawdopodobnie bardzo minimalistyczny i bardzo zrozumiałe więc co na przepływie strony w sposób, który jest bardzo logiczne i nie dostać się w sposób od siebie. Jakiego rodzaju inne rzeczy są dobre o Facebook lub źle o Facebooku? Miejmy tylko mieć rozmowę projektu tutaj. Oh. Gdzie? Tak. [Uczeń] Nowy system Timeline pozwala wyszukać profil danej osoby o ich przeszłości. Ooh, Oś czasu. Timeline to świetna rzecz, ponieważ pozwala szypułka znajomym z powrotem, gdy byli w szkole średniej. Timeline jest dobre, ponieważ pozwala przefiltrować zawartość dużo szybciej, to pozwala znaleźć rzeczy, które w przeciwnym wypadku podjęte ci naprawdę dużo czasu, aby znaleźć tylko przewijanie w górę iw dół, w górę, w górę, w górę, w górę, w górę, tak jak dzieje się w czasie. Ale jest też coś w rodzaju minusem, że pod względem doświadczenia użytkownika. Co może być tego przyczyna? Wielkie słowo, które zaczyna się od P-R. >> [Uczeń] prywatności. Prywatność >>, prawda? Prywatność jest ogromny problem doświadczenie użytkownika. To jest jedna z rzeczy, których nienawidzę najbardziej o Facebook teraz. [Śmiech] [Malan] Jak mogę teraz. David nie wiedziałem, że to naprawdę się stało aż do wczoraj. Więc teraz wie, że za każdym razem, porozmawiać mu, że wiem, że został ignorując mnie. [Malan] niezręcznej część została I faktycznie ignorując go, a ja nie wiedziałam, że on wiedział, że ignorowanie go. [Śmiech] Prywatność jest ogromny problem. Czy ktoś może mi powiedzieć, co tu może być źle Facebook prywatności pomijając fakt, że robią takie rzeczy? Co to jest szczególnie trudne do zrobienia w odniesieniu do Facebooka prywatności? Ten rodzaj jest wiodącym pytanie. Tak. >> [Uczeń] Ukryj swoje zdjęcia od niektórych osób. Racja. Dokładnie, aby ukryć swoje zdjęcia od niektórych osób. Mają ten mały, mały przycisk w prawym górnym rogu, który pozwala przełączać prywatność zdjęciem. Ich opcje prywatności są bardzo zróżnicowane między różnymi rodzajami menu. 

Oni zdobyć dużo lepiej o tym niedawno, ale kiedyś przypadek że gdy chciał zapobiec znajomym ze zdjęć widząc, będziesz musiał przejść przez bardzo skomplikowaną 5-etapowy proces bycia jak, pozwól mi kliknij ten link, teraz pozwól mi kliknij ponownie, pozwól mi kliknij ponownie, pozwól mi określić, które ludzie nie mogą zobaczyć moje zdjęcia. To nie jest szczególnie dobry na części na Facebook bo tak wiele o doświadczenie użytkownika jest faktycznie dając im swobodę kontrolować, co ludzie widzą. Nazywamy to użytkownikowi kontrolę i wolność. Jeżeli nie chcesz pozwolić użytkownikom zrobić w sposób, który jest wydajny i intuicyjny, wówczas doświadczenie użytkownika nie jest aż tak wielki na wszystkich.  Czy faceci lubią mówić cokolwiek o Facebooku? Jak mogę to wyłączyć? [Ong] Nie można to wyłączyć, a to jest ogromna wada użyteczność ze strony Facebook. Ta cecha - I faktycznie wyglądał w nim wczoraj - to albo to, że nie może tego zrobić lub nie jest pochowany gdzieś bardzo, bardzo głęboko w zakamarkach Facebooku, ponieważ nie mogę dowiedzieć się, jak wyłączyć tę funkcję na wszystkich. [Malan] Ale czasami te decyzje nie są oczywiste bo chłopaki dali nam wiele cennych informacji na temat różnych zastosowań CS50 i strony internetowe, które oczywiście używa. Nie wprowadziły wszystkie te wnioski i sugestie. 

Część to na uzyskanie tak wiele wniosków, że jest funkcją czasu, ale czasami po prostu świadomie zdecydować jak, "Dziękuję za sugestię, ale nie zgadzam." Więc w jaki sposób ostatecznie decydują, co należy zrobić, jeśli użytkownicy, że powinieneś coś zrobić nawet jeśli nie koniecznie? Jest delikatna równowaga pomiędzy faktycznie słuchanie tego, co użytkownicy mówią i rzeczywiście ma jakąś linię, gdzie mówisz, "Nie będziemy robić to, co użytkownicy ci powiedzieć." A w szczególności, myślę, że był to cytat Henry'ego Forda, które podsumowuje to całkiem nieźle. "Gdybym zapytał ludzi, co chcieli, to oni powiedzieli, że chcą szybszych koni." Czy ktoś może coś w rodzaju odciąć, co to naprawdę znaczy cytat? To nie jest tak, że użytkownicy wiedzą, czego chcą, ale to bardziej, że - [Uczeń] Nie wiem, co jest możliwe. W części nie wiedzą, co jest możliwe. Tease, że oprócz trochę więcej. Co pan przez to rozumie? [Niesłyszalne odpowiedź uczeń] To dobrze. Co myślę, że próbujesz powiedzieć jest to, że ludzie wiedzą, czego chcą. Chcą szybszych koni. Czego tak naprawdę chcę, to zdolność do poruszania się szybciej, ale naprawdę nie wiem, medium przez które do osiągnięcia tego. Kiedy przyjeżdżają do użytkowników i użytkownicy ci coś powiedzieć i mówią ci, "Chcemy te funkcje i te funkcje i cechy te" nie chcesz koniecznie pomyśleć o "Pozwól mi iść do przodu "I realizować to, co wyraźnie powiedzieć" ale to, co chcesz, aby myśleć o to, "Jakie pomysły można uzyskać z tego?" Czego naprawdę chcą? 

I tam, co można zrobić, to zaprojektować coś spełniającego te wnioski ale niekoniecznie w sposób, że użytkownik oczekuje, że będzie zadowolony. Więc na coś końcowych projektów, w bardzo realnym, co jest przydatne, heurystyczna, jeśli chodzi o zrobienie czegoś lepszego, zwłaszcza jeśli projektant ma tę arogancję o nim której jesteś rodzajem wiedzieć, co jest najlepsze, można pobierać dane od użytkowników, ale jak można faktycznie przejść o coraz to uwagi? W końcowych projektów, bardzo konkretnie, co wytwarza optymalne wyniki tutaj? Co daje optymalne wyniki - i pójdę na to w drugim - jest to proces tworzenia i testowania, a następnie iteracji. Co mam na myśli badania jest zwykle podczas projektowania coś myślisz, że to dość dobre, jak: "Jestem taki wielki projektant. Wszyscy pokochają to." A następnie umieścić go tam i ludzie naprawdę nie podoba z jakiegoś powodu. Co trzeba zrobić, to trzeba się części rzeczy, które ludzie robią, jak i reorganizacji rzeczy, że ludzie nie lubią. To brzmi jak proces bardzo oczywiste, ale ten proces stale iteracja na górze, co już zbudowane jest procesem, który pomaga nie tylko udoskonalić swoje umiejętności projektowania, ale także pomaga ulepszyć projekt tak, że ludzie rzeczywiście doceniają produkt jeszcze bardziej niż przedtem. 

Pójdę na bardziej konkretne przykłady tego, co można faktycznie zrobić. Jako swego rodzaju ostatnim przykładzie produktu, spójrzmy na kajaku. KAYAK kiedy wyszedł bardzo, bardzo popularne. Czy ktoś może odgadnąć, dlaczego? Co to są różne rzeczy chcesz o tym, jeśli używano go lub jakie są różne rzeczy, których nie lubisz? Tak. >> [Niesłyszalne reakcja studentów] >> Ok. To część jest najmu użytkownik ma kwerendę, która jest bardziej ekspansywna niż bardzo restrykcyjne, jak: "Musisz wybrać datę początkową "I musisz wybrać datę zakończenia." W rzeczywistości, pozwala być elastyczne o tym i to daje wszystkie loty w tym przedziale. Coś jeszcze? [Uczeń] Obejmują one opłaty w cenie. Robią to na opłaty w cenie. Podatki i miejscach rzeczywiście iść prosto do tej ceny w lewym górnym rogu więc nie jesteś nabrać myśląc, że jesteś rzeczywiście płaci za 240 dolarów lotu gdy jest to naprawdę 330 dolarów. Coś jeszcze? Tak. [Niesłyszalne odpowiedź uczeń] Nie jestem pewien, czy rzeczywiście na to pozwolić. Może się mylę. To może być ciekawe, jeśli chcesz położyć większy nacisk na poszczególnych filtrów , tak aby przesunąć wyniki dotyczące tego filtr do góry. Ale może ktoś mi powiedzieć, co jest takiego specjalnego w tym po lewej stronie? Jak tradycyjnie patrzeć lot na serwis internetowy przed tym? 

Tak. >> [Niesłyszalne odpowiedzi studentów] >> Czy można powiedzieć, że - [Uczeń] Każda linia lotnicza. >> Tak. Każda linia lotnicza ma swoją własną stronę internetową. Ten konsoliduje rzeczy. I? [Uczeń] Wiesz dokładnie co razem wychodzimy. Wiesz dokładnie, co razem, gdy odchodzisz, , ale związane z filtrów, w szczególności. Pozwól mi wyciągnąć kajak. Boże, pop-upy. Złe doświadczenia użytkownika. Co się dzieje, kiedy przenieść ten suwak? [Animacja] Automatyczne aktualizacje. >> [Ong] Automatyczne aktualizacje. To coś, co jest bardzo ważne. Przed tym, gdy chciał zajrzeć do lotu, trzeba było umieścić w miejscu wejścia, lokalizacja wyjściowa, Naciśnij Szukaj to proces, który i pokazywać wyniki. Jeżeli chcesz zmienić zapytanie, to musisz wcisnąć z powrotem dwa razy, wprowadzić w nowej kwerendy od podstaw, a następnie zrobić to w kółko. Ciekawą rzeczą jest to coś takiego, że używa bardzo [niezrozumiały] coś w środku. Zawsze można zrobić coś takiego, że strzela się z wnioskiem i zwraca wszystkie wyniki natychmiast. Ten rodzaj natychmiastowego razie jest coś, co się KAYAK szalenie popularny bo to bardzo proste dla mnie po prostu zmienić swoje zapytanie i dowiedzieć się rzeczy, które są wokół określonego zakresu bez iść tam iz powrotem, tam iz powrotem, tam iz powrotem. Więc to są różne rzeczy, które chcesz, aby myśleć o tym, kiedy jesteś projektowania witryny. Jak mogę to zrobić bardzo wydajne dla moich użytkowników, aby przejść przez co pracują na i dostać się do ich ostatecznego celu, tak szybko, jak to możliwe? [Malan] A do punktu Józefa wcześniejszego o użytkownikach niekoniecznie wiedząc, czego chcą, w oparciu o to, co wy teraz wiedzieć o HTML i masz pola wyboru, przyciski opcji, menu wybierz, pól wpisu i jak, jak można realizować ideę wybranie czasu rozpoczęcia lotu? 

Które z tych różnych mechanizmów UI byłoby użyć? Jeśli po prostu znać ilość HTML, który wcześniej uczono i wiesz, wejścia są przyciski opcji, pola wyboru, menu rozwijanych oraz pola wejściowego, co twój naturalny wybór był do zbierania dat? [Uczeń] Wejście. Wejście. >> A może nawet z rozwijanej wszystkie daty, prawda? Więc z bardziej skomplikowanych mechanizmów interfejsu użytkownika, takich jak ta po lewej stronie, które można wprowadzić w życie, można uczynić ten proces znacznie bardziej intuicyjny z suwakiem bo czas jest ciągły, a ludzie zwykle nie myślą o tym w kategoriach odrębnych kawałków. Dobrze. Ostatnia rzecz. Dziesięć usability heurystyki. Wszystkie rzeczy, rozmawialiśmy o prawdopodobnie należeć do jednej z tych kategorii. Jeśli pójdziesz do tego łącza, które tereny zostaną umieszczone w Internecie, będziesz faktycznie być w stanie, jak zaprojektować swoją witrynę, należy pamiętać o heurystykę na uwadze i te zasady kciuka. Dla swoich projektów, co ja proponuję zrobić, aby zaprojektować app lepiej jest wykonanie prototypów papierze. Kiedy myślisz o swojej aplikacji, bardzo szybko naszkicować to, co chcesz to wygladac i czy wszystkie pola są umieszczone w taki sposób, że jest bardzo łatwy w intuicyjny używać a nawet pokazać tych prototypów papierowych do znajomych i rozpocząć grupach fokusowych. Wystarczy dostać 2 lub 3 ludzi i poprosić ich, aby tylko dotknąć tych prototypów papierowych i pokazać im nowe ekrany, aby zobaczyć, czy rzeczywiście zrozumieć, co się dzieje. 

Co chcesz zrobić, to dać im zadanie motywować zadanie, i po prostu dać im app i pozwolić im korzystać. Nie dać im instrukcji poza tym. Chcesz faktycznie niech interakcji z aplikacji w sposób, który pozwala widzieć jak będą go używać, jeśli nie stoją obok nich. I to jest bardzo ważne. To da Ci wiele spostrzeżeń, aby ludzie coraz wokół poszczególnych rzeczy w taki sposób, że nie była przeznaczona do? Są one przy użyciu szczególnych mechanizmów interfejsu użytkownika na ekranie w taki sposób, że jest typu hacky? Nie chciałem im zrobić to w ten sposób. A kiedy skończysz z tym, co chcesz zrobić? Twoje skały projekt, prawda? Co chcesz zrobić, to chcesz się rozwijać, a następnie wykonaj ten proces od nowa. Więc pokaż to znajomym kiedy już opracowany, przetestuj, opracowywania, testowania, opracowywania, testowania, iteracyjne, dalej i dalej. Konstrukcja jest bardzo iteracyjny proces, w tym sensie. Trzeba rzeczywiście coś zbudować, a następnie zrealizować rzeczy o nim , że nie zdawałem sobie sprawy, przed jak i wrócić i poprawić z tego. Teraz, jak na część rozwoju, to właśnie Tommy pokaże ci po przerwie i jak może być w stanie wdrożyć coś autouzupełniania w taki sposób, że jest bardzo prosty. [Malan] Jak Tommy ustawia tu, więc pytanie. Wiele z pierwszych stron - i kiedy Józef powiedział 1990 styl strony internetowej, to implementacje gdzie jeśli chcieli, aby wybrać czas rozpoczęcia i czas zakończenia, szczerze mówiąc, już w dzień, a nawet na niektórych stronach internetowych dzisiaj, sposób można zrobić to wybrać godzinę od drop-down, wybrać minut od drop-down, może wybrać AM, PM, a potem to zrobić 3 razy więcej. I tak z 6 kliknięć i może jakiś przewijanie Twój użytkownik może rzeczywiście zapewnić jakieś daty i / lub przedziale czasowym, w tym sensie. 

Więc na pewno suboptimal i jeszcze do tej pory nie widzieliśmy możliwości ekspresyjne w jednym z języków, którymi Sprawdziliśmy zrobić coś seksownego jak tego suwaka czasu rozpoczęcia i zakończenia. Ale jeśli myślisz, że powrót do tygodnie 0, gdy rozmawialiśmy o Scratch, tam nie było, że po prostu nie widżety pewne rzeczy. Naprawdę tylko miał te podstawowe, jak pętle i warunki i jak. Więc niby tylko myśli bardzo abstrakcyjnie teraz, niezależnie od konkretów HTML, Co tak naprawdę dzieje się z czymś takim czasie rozpoczęcia i suwak czasu końcowego? Kiedy przenieść moje myszy i kliknij na tym małym symbolem marchwi na lewo i rozpocznij przeciąganie, programowo, co to chcesz być w stanie realizować aby to się stało? Jakie pytania, co wyrażeń logicznych chcesz móc zapytać? Co się naprawdę dzieje? Sammy? [Uczeń] Gdzie jest pozycja kursora? >> Dobrze. W przypadku, gdy jest w pozycji kursora? To było coś, co potrzebne, aby wyrazić jeszcze w Scratch, czy był w zależności od lokalizacji, a nawet, jak kolor lub. Możesz przypominam sobie tak krótko w poniedziałek były wszystkie te rzeczy nazywane zdarzeniami w świecie w internecie, a więc nie takie rzeczy jak onclick i onkeypress i onkeyup i onmouseover i onmouseout. Więc sobie sprawę, że nawet te rzeczy, które już zostały biorąc za pewnik w internecie z witryn takich jak Facebook i Gmail, nawet jeśli nie masz pojęcia jak można ewentualnie realizować, bo nie ma nic, nawet jak to w wykładzie Zestaw 7 lub problem, uświadomić sobie, że z tych samych dokładnych podstaw, z HTTP i parametrów i GET i POST, z podstawowych wejść HTML które widzieliśmy do tej pory i za chwilę z programowych mechanizmów Tommy o wprowadzenie można rozpocząć, aby wyrazić siebie tak, jak to było w tygodniu 0 przez bardzo intuicyjnie przeciąganie i upuszczanie. 

Więc z tym powiedział, Tommy MacWilliam i nowe kawałki układanki dla nas w internecie. Dobrze. Nazywam się Tommy i będę mówić o JavaScripcie. Wystarczy disclaimer: jestem zdania, że ​​JavaScript jest najlepszym językiem programowania w całym świecie całym. Jest wiele ludzi, którzy nie zgadzają się ze mną, ale to jest po prostu niesamowite. Gdy wrócisz do C, jeśli masz pisać C dla innej klasy lub innych języków, to jest po prostu naprawdę frustrujące we wszystkich niskopoziomowych szczegółów trzeba ugrzęznąć w. Więc jeśli kiedykolwiek czując smutek jak denerwujące C jest do pisania, po prostu wrócić, napisz coś JavaScript. To jest nirwana. Poczujesz się znacznie lepiej o swój zły dzień. Dużo magii JavaScript pochodzi od jego zdolności do manipulowania rzeczy , które są już na stronie. Kiedy pisaliśmy nasze skrypty, były wykonywane na serwerze, i ostatecznie, że skrypt PHP prawdopodobnie wyświetli niektóre HTML. Że HTML został wysłany do klienta, a następnie, że było to. Jeśli PHP chciał dodać przycisk do strony, na przykład, nie może naprawdę zrobić. Musiałby to uczynić zupełnie nowy plik HTML i wysłać, że w przeglądarce. Z JavaScript wiemy, że będziemy mogli zaktualizować rzeczy, kiedy są już na stronie, iz tego powodu możemy zapewnić wiele informacji zwrotnych, które naprawdę poprawić doświadczenia użytkownika na naszej stronie internetowej. Wystarczy szybkie podsumowanie selektorów JavaScript. Wiemy, że gdy się pobrać strony HTML, który będzie reprezentował w DOM. 

DOM pamiętaj jest właśnie to wielkie drzewo, gdzie elementy są powiązane w tym dużym hierarchii. Kiedy pracowałem z baz danych w zbior 7, jedną z pierwszych rzeczy, które powinien wiedzieć, jak zrobić to zapytanie do bazy danych. Mamy ten duży tabeli użytkowników, a czasami po prostu chcę powiedzieć, "Chcę tylko niektóre z tych użytkowników spełniających pewne warunki." Podobnie, gdy mamy DOM musimy jakiś sposób odpytywania go. Musimy jakiś sposób mówi: "Chcę, wszystkie przyciski, które wyglądają tak "Lub wszystkich obrazów na stronie." A te przełączniki pozwalają nam zrobić. Więc po prostu szybkie podsumowanie. Ten pierwszy tutaj, to # przedstawić, co to będzie wybrać? Czy ktoś pamięta? [Niesłyszalne reakcja studentów] >> Tak, dokładnie. To będzie wybrać element na stronie, który ma identyfikator kliknij. I tak, że hash tag mówi to selektor zadziała z identyfikatorami. Jak o drugim, to. Wyśrodkowany, co będzie, które wybrać? Tak. >> [Uczeń] Klasa. >> Dokładnie. To jest teraz do wyboru przez klasę. ID i różnica między klasy jest ogólnie powinny być unikalne ID w ciągu co przestrzeń szukacie koniec. Więc jeśli szukali nad całą stronę internetową, naprawdę powinien mieć tylko 1 element z tej pewnej tożsamości, a więc w tym przypadku kliknij. Z klasy, z drugiej strony, można mieć więcej niż 1 elementu na tej samej stronie z tej samej klasy. Może to być przydatne do stwierdzenia, chcę wybrać wszystko, co się na środku strony a nie tylko 1 rzecz. 

I w końcu, ta ostatnia o to nieco bardziej skomplikowane, Ale co to będzie wybrać z DOM? [Niesłyszalne reakcja studentów] >> Co to jest? [Uczeń] Wszystko, co znajduje się tag. >> Mamy 2 części tutaj. Druga część jest powiedzieć chcę wybrać te tagi z tagu wejściowych, więc każdy element, który jest tag input. Ale nie chcę, po prostu zaznaczyć wszystkie wejścia bo coś takiego jak przycisk przesyłania może być wejście i coś w polu tekstowym może być wejście. Więc z tych nawiasach kwadratowych mówię chcę tylko, aby wybrać te elementy, które są typu text. Gdzieś w moim tagu HTML mam atrybut o nazwie typu, a wartość atrybutu musi być tekst. Tak jak o tej pierwszej części tutaj? Pierwszy wyraz tego selektora jest forma to mam miejsce, a następnie ta część wejścia. Co to zrobić, umieszczając postać przed nim? To się w zasadzie ograniczyć nasze zapytanie. To może być tak, że mamy kilka wejść na stronie , które nie są potomkami formularza. Co to będzie zrobić to powiem tylko chcę znaczniki wejściowe, które mają gdzieś nad nimi jakiś element dominujący formie. I tak w ten sposób możemy uczynić je bardziej hierarchiczne zapytania więc nie tylko wybrać wszystko dopasowanie danego selektora. Możemy trochę ograniczyć zakres tej kwerendy do czegoś innego. Więc teraz, że wiemy, jak wybrać elementy na stronie, Porozmawiajmy trochę o AJAX. AJAX jest nadal bardzo modny akronimem dla Asynchronous JavaScript and XML. Tak się składa, że ​​XML jest jakimś sposobem reprezentowania danych. 

Takie stracił popularność Ostatnio, więc w AJAX X nie jest używany przez cały czas. Zasadniczo co AJAX pozwala nam zrobić, to żądania HTTP z kontekstu JavaScript. Kiedy jesteśmy w naszej przeglądarce i mamy nawigację po stronach i kliknij na link, co nasza przeglądarka ma zamiar zrobić to żądanie HTTP do tego, co my, kliknij łącze. Ale to nie zawsze jest idealne, bo jeśli tak jest, to jak Dawid mówił zawsze mamy do użytkowników kliknij przycisk Submit lub kliknąć łącze w celu zapewnienia, że ​​coś stało się dzieje zaangażować żądania HTTP. Więc z AJAX możemy te wnioski w imieniu JavaScript. Oznacza to, że gdy użytkownik oddziałuje na stronie lub coś się stanie, rzeczywiście możemy zrobić programowy wniosek do innego pliku PHP na naszej stronie internetowej lub cokolwiek innego i pobrać dane, że plik wypluwa. Rzućmy okiem na przykład AJAX. To jest nasz CS50 strona Finance, z którym mam nadzieję, że niektórzy z nas są znane. Jeśli spojrzymy na kodzie HTML strony, widzimy tutaj, że dodałem kilka rzeczy, z których jeden dałem ten formularz identyfikator. Powiedziałem, id = "form-quote". Zrobiłem to tylko dlatego, że się dzieje, aby to trochę łatwiej wybrać z DOM skoro można po prostu zrobić bardzo proste zapytanie. Co chcę zrobić, o to chcę naprawić jakiś problem z CS50 Finansów. Więc jeśli idziemy do finance.cs50.net, każdym razem, kiedy chcesz dostać ofertę, muszę kliknąć ten przycisk Get Quote, i że przycisk Get Quote potem zabiera mnie do innego całej strony. A jeśli chcę kolejny cytat, muszę uderzyć przycisk Wstecz, a potem wpisz je, Mogę dostać ofertę, i uderzyłem przycisk Wstecz. To naprawdę nie najlepsze doświadczenia użytkownika. Kto tak naprawdę korzystać z witryny, czy to, że powoli, aby uzyskać ceny akcji? Więc to, co chcemy zrobić z AJAX jest usunąć ten krok będzie oddzielnej stronie w celu wyświetlenia wyników. 

Co tak naprawdę tylko z prośbą o to, że naprawdę niewielka cena, i to tylko bardzo mała ilość danych. Więc nie ma potrzeby, dla mnie, aby przejść kolejny całe strony HTML, pobrać całą nową partię HTML, może pobrać niektóre więcej zdjęć, inne pliki CSS tylko dla mnie, aby odpowiedzieć na to bardzo proste pytanie od tego, ile to kosztuje akcji. Z AJAX możemy zrobić to o wiele łatwiejsze. Widzimy tu, że mam połączenie w pliku JavaScript nazwie quote.js. Miejmy faktycznie otworzyć ten plik. Nie tam. Wszystkie moje pliki JavaScript będą znajdować się w HTML tak, że przeglądarka internetowa może do niego dostęp. Następnie mamy osobny katalog tutaj na JavaScripcie a teraz jest quote.js. Na górze tego pliku to mówi tutaj, że chcesz czekać na całej stronie jest załadowanie zanim ja staram się robić wszystko. Dlaczego jest to konieczne? Okazuje się, że następną rzeczą zamierzam zrobić o to zacząć szukać elementu który pasuje jakiś selektor. Jeśli to jest obsługa JavaScript kiedykolwiek wykonywane przed element ten został umieszczony na stronie wtedy wszystko staram się robić nie będzie działać bo mam zamiar spróbować wybrać coś, co nie jest tam jeszcze. Więc to line up górze mówi chcę byś czekać aż wszystko zostanie załadowany więc mamy gwarancję, że wszelkie elementy szukam faktycznie są na stronie. Ten znak dolara oznacza tutaj używam biblioteki o nazwie jQuery. Ta biblioteka jQuery pozwala nam korzystać z tych selektorów, że po prostu sprawdzić. Mówiąc $ następnie przekazując jako argument ten # form-cytat, Jestem teraz wybierając tę ​​formę, że po prostu przyjrzał. Teraz mam reprezentację tej formie w pamięci jakoś. 

Obecnie tego obiektu, w tym w postaci reprezentacji, Obecnie używam funkcji o nazwie na. Co ta funkcja nie jest to będzie dołączyć obsługi zdarzeń. Wydarzenie, które będziemy słuchać jest zdarzenie submit. Tak więc, gdy użytkownik kliknie przycisk Prześlij, że lub naciśnięciu Enter, wydarzenie to będzie ogień. Podłączając do tego, mogę zastąpić domyślne zachowanie formularza. Bez tego JavaScriptu, forma będzie przedłożyć cokolwiek plik PHP użyliśmy w tym atrybucie działania. Ale zamiast tego, mam teraz powiedzieć, czekaj, czekaj, czekaj, nie chcę, abyś to w życie. Chcę, aby tak się stało przed wyjazdem i spróbuj złożyć w jakimś pliku PHP. Teraz to, co chcę zrobić? W tym miejscu chcę używać AJAX jakoś wczytać w to, co cena akcji jest. Pierwszą rzeczą, jaką trzeba wiedzieć, jest to, co zbiory użytkownik patrząc. Aby to zrobić, że będę korzystać z innego wyboru. Jest to trzeci selektor patrzyliśmy wcześniej. Ten mówi, że chcę, aby rozpocząć ten element formularza z identyfikatorem formularzy cytatu. Następnie gdzieś tej formy nie musi być elementem wejściowym który ma nazwę symbolu. Jeśli spojrzymy na nasz HTML, widzieliśmy, że mamy wejście [name = symbol]. Oznacza to, że to się dzieje, aby wybrać to pole tekstowe, które użytkownik wpisując w. To miłe. Mamy pole tekstowe. Teraz tylko trzeba wiedzieć, co znajduje się w jej wnętrzu. Aby to zrobić, że możemy wywołać tę metodę tutaj, to. Val, a ten mówi, że wie, co masz pole tekstowe. Chcę, żebyś mi powiedział, co to jest użytkownik wpisze do tego pola tekstowego. Teraz mamy ciąg nazwie symbol, który jest równy co użytkownik wpisze w. To miłe. Możemy użyć tego ciągu, aby mieć naszą prośbę. Jest to nowy funkcji tutaj to $, chyba mamy już nie będzie wyboru elementów, mamy zamiar być wywołanie innej funkcji, która jest dostarczonych nam przez jQuery. Ta funkcja AJAX jest to, co naprawdę dzieje się do tego żądania HTTP. Musimy więc powiedzieć, że kilka rzeczy. Pierwszą rzeczą, jaką musimy powiedzieć tej funkcji jest gdzie chcę wniosek iść. Gdzieś w moim projekcie mam ten plik wewnątrz katalogu o nazwie quote.php HTML. Można uzyskać dostęp do tego pliku, widzieliśmy, jak to, jeśli pójdę do localhost / quote.php. 

Chcę JavaScript, aby wysłać do tej strony. Jaki rodzaj wniosku teraz? Widzieliśmy wcześniej, że forma ma tę metodę = "post" atrybutu, a to oznacza, że ​​będzie do żądania POST, więc nie będzie umieścić coś w adresie URL, a nie żądanie GET, które po prostu być zwolniony, jeśli tylko dostęp do strony z przeglądarki, na przykład. Teraz mamy powiedział, że chcesz, aby żądania HTTP POST do strony znajdującej się quote.php. Kiedy przesłać formularz, pamiętaj, możemy uzyskać dostęp do elementów wejściowych wewnątrz tej formy z tym $ _POST zmiennej. Do tej pory w historii nie byliśmy rzeczywiście wysłany wraz jeszcze żadnych danych. Właśnie powiedział robimy żądania AJAX i tu jest rodzaj wniosku robimy. Teraz trzeba rzeczywiście wysłać jakieś dane do strony. Aby to zrobić możemy wykorzystać tę właściwość o nazwie dane. Wartość tej właściwości jest rzeczywiście asocjacyjną. Powodem tego jest to, że pozwala na nie tylko wyślij 1 części danych. Dlatego mamy te nawiasy klamrowe o zagnieżdżone wewnątrz innych klamrowych nawiasach. Klawisze te asocjacyjnych będą samo jak nazwa przypisuje w naszych elementów formularza. To oznacza, że ​​jeśli wysłać wzdłuż klucza symbol co oznacza, że ​​moja strona może uzyskać dostęp do PHP te dane z $ _POST [symbol] podobnie jak zrobiliśmy wcześniej, kiedy byliśmy złożenie formularza. A teraz rzeczywiste dane chcemy wysłać będzie wewnątrz wartość tego asocjacyjnej. 

Mamy zapisane ten tekst w zmiennej o nazwie symbolu, i tak wysyłamy wraz teraz klawisz z symbolem a wartość co użytkownik wpisze w. Teraz zrobiliśmy to żądanie HTTP, nasz plik PHP wykonywany, i to będzie wysłać jakieś dane z powrotem teraz do klienta, że ​​właśnie to żądanie. Teraz musimy odpowiedzieć na cokolwiek serwer powiedział do nas. Aby to zrobić, że mamy ten ostatni obiekt nazywający się sukcesem. Wartość klucza sukcesu jest faktycznie będzie funkcja, i jest to jeden z naprawdę fajnych rzeczy, które możesz zrobić z JavaScript. Nie tylko można mieć wskazówki lub tablic jako wartości wewnątrz tablicy asocjacyjnej, można również funkcję. Więc mówiąc, sukces, to jest mój klucz. Dwukropek mówi tutaj jest wartość, i teraz to wartość funkcji właściwie. Tak więc nie trzeba dać tę funkcję nazwę per se. Możemy tylko powiedzieć, że to ma być jakiś sposób. To zajmie 1 argument. Argumentem tej funkcji będzie cokolwiek serwer wysłał nas od wniosku. Podobnie jak wtedy, gdy nasza przeglądarka wysyła żądanie, serwer wysyła coś w zamian a przeglądarka wyświetli ją, w kontekście AJAX właśnie złożony wniosek, serwer wysłał coś z powrotem, a teraz mamy, że reprezentowany jako ciąg. Z tego łańcucha Chciałbym tylko, że do wyświetlania na stronie. Aby to zrobić, że będę mieć ostatni selektor. Chcę wybrać element z ceną ID. To jest po prostu pusty div, które stworzyłem na stronie, i chcę ustawić zawartość tego div, aby być cokolwiek serwer wysłał nas z powrotem. Mam faktycznie zmodyfikowane quote.php trochę. 

Zamiast wywoływania renderowania i renderowania jakąś stronę, quote.php teraz jest po prostu zamiar wydrukować wartość zapasów jako łańcuch. Więc jeśli były faktycznie odwiedzić stronę, by po prostu zobaczyć, że małe ciąg niezależnie od ceny akcji jest. Ostatnią rzeczą, jaką musimy zrobić, jest tu po prostu upewnić się, że funkcja zwraca false. Co to mówi się, że jeśli jestem w środku programu obsługi zdarzeń i obsługi zdarzeń zwraca false zamiast zwracać true, oznacza to, że nie chcę, oryginalne wydarzenie na ogień. W tym przypadku, jeśli nie ma żadnego JavaScript i złożone formy, nasza przeglądarka będzie powiedzieć: "Mam zamiar wysłać te dane razem" a oni zamiar wysłać cię do innej strony. Ponieważ używamy AJAX teraz, nie ma potrzeby, aby wysłać użytkownika do innej strony. Jesteśmy po prostu będzie wyświetlać wyniki dynamicznie na tej samej stronie. Naprawdę nie chcesz, aby przejść w dowolnym miejscu, a ja chcę, aby pozostać na tej samej stronie. Więc powracając fałszywe, możemy zapewnić, że forma nie robi dla nas. Rzućmy okiem na to, co to rzeczywiście wygląda. Nasza strona cytat wygląda tak samo. Pozwól mi wyciągnąć inspektora tu więc możemy zobaczyć, co się dzieje. Sprawiają, że trochę mniej ogromny. Pamiętaj, że jeśli otwieramy zakładkę Network, to gdzie można zobaczyć wszystkie żądania HTTP , że dzieje się na stronie. 

Dla symbolu pozwól wpisać AAPL i kliknij Get Quote. Teraz dowiedzieliśmy się, że akcja Apple kosztuje pewną ilość dolarów Właśnie ukazał się na stronie, ale nie zmienił URL w ogóle. W rzeczywistości, o to żądania HTTP, które po prostu wykonane. Zrobiliśmy żądanie POST do quote.php. To ma sens. To jest to, co serwer wysłał nas z powrotem. To już nie ten gigantyczny dokument HTML z obrazami i tego typu rzeczy, to tylko wiersz tekstu, a następnie po prostu wyświetlany wiersz tekstu. Jeśli wrócimy do nagłówków i zobaczyć, co rzeczywiście wysłany wewnątrz tego żądania HTTP, Widzimy tu, że wysłaliśmy wzdłuż klucza symbol i wartość AAPL, czyli to, co użytkownik wpisze w. To jest ładne, ale to jeszcze trochę denerwujące. Muszę jeszcze kliknij ten przycisk, aby uzyskać notowania. Jesteśmy zajęci ludzie, a my nie mamy czasu do kliknięcia przycisków. Google sobie sprawę z tego jakiś czas temu, kiedy realizowane Google Instant. Co Google Instant nie jest jak piszesz to po prostu zacznie wyświetlać wyniki dla Ciebie więc nie musisz się martwić o nawet klikając Szukaj. Właściwie historia zabawy związane z tym. Gdy Google Instant wyszedł, ludzie byli jak "Whoa, to jest super niesamowite." "To jest tak cool." I student w dół w Stanford, który był 19 w czasie wykonane z tej witryny o nazwie YouTube Instant. Wszystkie Natychmiastowe YouTube nie jest skutecznie wyszukiwać YouTube natychmiast. Więc zamiast iść do YouTube.com i uderzył Szukaj, Kiedy zaczniesz pisać na YouTube tanie coś jak CS50, możemy tu zobaczyć, że jest to próba na wolnym połączeniu internetowym wypełnić te wyniki na żywo. Aby to zrobić, że rzeczywiście możemy zrobić bardzo prostą modyfikację do naszego pliku quote.js. Teraz jesteśmy dołączenie tego zdarzenia, gdy formularz jest składany. Tak naprawdę nie chcesz, aby użytkownik przedstawia tę postać już, więc niech zamiast strzelać to wydarzenie za każdym razem, gdy użytkownik naciśnie klawisz. Aby to zrobić Niech najpierw zmienić zdarzenie z przedstawia keyup. To oznacza, że ​​zamiast czekać na formularz do przedłożenia każdym naciśnięciu przycisku, coś się stało. To nie ma sensu, aby dołączyć ten KeyUp wydarzenie w całej postaci. Naprawdę tylko o tym polu wyszukiwania. 

Aby zaznaczyć, że teraz możemy zmienić to być, a nie postaci-cytatem, Formularz-quote i będziemy mieć wkład (typ = tekst) lub możemy powiedzieć (nazwa symbolu =) - co chcemy. Teraz jest ostatnia rzecz, którą musimy zrobić. Pamiętaj tu kiedy powiedzieliśmy return false powiedzieliśmy, że nie chcemy, że zdarzenie domyślne na ogień. Ale tak się składa, że ​​jeśli możemy wyłączyć, że teraz, cokolwiek wpisać w nie będzie pojawiać się już w przeglądarce bo byłoby to domyślne zachowanie, wpisując w polu tekstowym. Nie chcemy już do zastąpienia, że, więc niech to zniszczyć to return false. Jeśli mamy z tym że i odświeżyć stronę, teraz gdy zaczynam wpisywać AAPL zobaczysz, że cena akcji na dole tutaj kończy się automatycznie. Więc tutaj jest CS50 Finance Instant. Właściwie zabawy opowieść o YouTube błyskawiczne jest to, że uczeń po prostu rodzaj napisał ją jako 1-noc projektu, a następnego dnia otrzymał propozycję pracy przez YouTube CEO. Tak proste, to CS50 studenci, twoje ostateczne projekty mogą Ci praca w serwisie YouTube. Coś w tym jest naprawdę fajny pomysł na projekt końcowy, prawda? Mieliśmy trochę istniejące funkcje, że chcieliśmy zintegrować z. Możemy poprawić doświadczenia użytkownika trochę, i nagle szukają czegoś na YouTube błyskawiczne może być dużo łatwiejsze niż szukając jej na regularnym YouTube. Więc to jest AJAX w pigułce. 

W przykładach, że Józef był wykazujących, widzieliśmy wiele autocompletes, i te autocompletes są naprawdę, naprawdę przydatny, ponieważ nie trzeba pamiętać - Na przykład, jeśli nie pamiętam cenę akcji dla Apple i po prostu wiem, że to aa coś, a nie tylko mówić do mnie, "Akcji tej rzeczy kosztuje tyle pieniędzy" Chciałbym trochę lubią wiedzieć, co zapasy zaczynają się aa. Możemy to zrobić, naprawdę ładnie z biblioteką Bootstrap, który jest już wliczone wewnątrz CS50 Finansów. Jeśli przyjdziesz tu do tagu JavaScript i przewiń do wpisywanie znaków z wyprzedzeniem, jest to po prostu fajny plugin, że ktoś już napisał dla nas, i możemy swobodnie korzystać z jego funkcjonalności takiego. Wpisałem w i tutaj jest lista niektórych państw, które rozpoczynają się od A. Powiedzmy, że myślę, że to jest naprawdę fajne i to jest czas dla mnie jak to na mojej stronie. Okazuje się, że jest to naprawdę proste. Miejmy przeskoczyć żeby quote3.js. Mój plik wygląda trochę inaczej. Tu wszystkie moje rzeczy AJAX jest to samo. Chcę, aby załadować dane zbiorów bez konieczności przechodzenia do innej strony. Ale teraz chcę, aby korzystać z tej wtyczki. Dokumentacja Bootstrap ma świetne przykłady jak dokładnie można to zrobić. Chcę powiedzieć: "Oto wejście że chcę Autouzupełnianie" i mam zamiar wywołać tę funkcję o nazwie wpisywanie znaków z wyprzedzeniem, i to będzie obsługiwać wszystkie wpisywanie znaków z wyprzedzeniem rzeczy dla nas. Będzie on zainicjować listy będzie zrobić wszystkie nasze filtrowania. Jedyną rzeczą, to musi wiedzieć, jakie dane mamy autocompleting dalej. Tak więc okazało się, ten klucz tylko poprzez czytanie dokumentacji i patrząc na przykładach. Jeśli dać mu klucz źródła, wartość tego klucza to tylko niektóre rzeczy, array Chcę Autouzupełnianie. Zmienna ta pochodzi z tego drugiego. I otworzyć symbols.js. 

To symbols.js właśnie to naprawdę duża tablica zawierająca ciągi wszystkich tych symboli free z NASDAQ. Jeśli chcę wrócić do HTML, tak jharvard, vhosts, globalhost, html, szablony, quote_form. Ponieważ jest to teraz nazywa quote3.js, pozwól mi zmienić plik JavaScript Jestem tym tutaj. Teraz mam quote3.js, więc mam zamiar ładować w tym oddzielnym pliku JavaScript taki, który ma tę Bootstrap autouzupełniania. Teraz, kiedy wrócić do przeglądarki, odświeżyć stronę, i rozpocząć wpisywanie AA, jest mój autocomplete. I to było naprawdę takie proste. Miałem 1 wiersz kodu po prostu powiedział: "Oto rzeczy, które chcę Autouzupełnianie" i nagle mam to naprawdę miły funkcjonalność z nie dużo całego wysiłku w ogóle. Jak jesteś rozwój stron internetowych, a szczególnie na przedniej stronie końca rzeczy, masz zamiar znaleźć tak jest dużo. Jest dużo, dużo, dużo naprawdę świetnych i darmowych bibliotek tam które sprawiają, że bardzo proste do zrobienia rzeczy, jak to. Czy ktoś może myśleć o żadnych wad po prostu na tym dużym autocompleting liście symboli? Co może być coś, co nie jest najlepsze z tego podejścia? Tak. >> [Uczeń] Czas, jeśli masz dużo [niesłyszalne] Tak. Teraz jesteśmy pobierania tego ogromny plik JavaScript i jest wiele symboli. I tak, jeśli mamy mnóstwo rzeczy, może to trochę zwiększyć opóźnienie nie tylko szukają ale również pobierając aktualny plik. Great. Coś jeszcze? Teraz nie ma prawdziwe poczucie znaczenia. Jeśli wpisać w kategorii A, firm, które pojawiają się tutaj może nie być najbardziej popularne firmy, które zaczynają się A. 

Zanim przejdę do Apple, to może zająć trochę więcej znaków, aby znaleźć to, co szukam. Ta druga nie ma tego poczucia znaczenia. To jest po prostu powiedzieć: "Wszystko, co pasuje idę do wyświetlania". Zamiast tego chciałbym jakoś zintegrować pewne znaczenie do moich poszukiwań. Jeśli pójdę tutaj do Yahoo! Finance, finance.yahoo.com, Gdy próbuję wprowadzić symbol na stronie Yahoo! Finansów i rozpocząć wpisywanie goog, mam ładny listę rzeczy. Oczywiste jest, że wygląda jak Yahoo! Finance robi coś bardziej sprytny tutaj. Mają pewne znaczenie, i mają też dodatkowe informacje jak nazwa akcji. To coś, co tak naprawdę nie można dostać tylko z mojej listy stanie symboli. Chcę to i tak mam zamiar go wziąć. Aby to zrobić zróbmy kilka rzeczy. Niech najpierw otworzyć Inspektora na tej stronie ponieważ widzieliśmy, że ta strona nie jest przeładunek na wszystkich, więc to pewnie jakoś za pomocą AJAX do ładowania jego danych. Możemy dowiedzieć się, co dane jest to ładowanie. Jeśli I kliknij na tej karcie sieciowej, to będą wszystkie wnioski, które zaczynają być zwolniony. Teraz jeśli wpisać w mazi, możemy zobaczyć, że właśnie dostałem nowe żądanie HTTP. Prawdopodobnie jest to w przypadku, gdy pochodzą dane. Rzeczywiście, jeśli spojrzeć na to zawartości, co jest nieco dziwne nazwy, widzimy, że to jest dokładnie tam, gdzie Yahoo wysyłając swoje dane. 

Został utworzony oddzielny plik o nazwie suggest.php to bardzo podobne w duchu do wyszukiwania funkcji. Jest to w zasadzie zamiar zrobić kwerendę do URL Yahoo, wrócić niektóre dane, i wysłać go z powrotem do mnie. Teraz, zamiast tego duży, ogromną listę symboli, Można używać miłych rzeczy Yahoo adekwatności, i nie trzeba pobierać ten ogromny plik JavaScript. Jestem tylko będzie ciągnąć w dół faktycznie odpowiednich symboli giełdowych. Miejmy wskoczyć do tego. Więc html, js. Jesteśmy teraz w quote4. Teraz jesteśmy już nie korzysta, że ​​duże listę plików JavaScript. Ale jest mały rodzaj problemu projektowania tutaj. Powiedzieliśmy, że w AJAX jest asynchroniczna. Co to oznacza to, że kiedy złożyć wniosek o AJAX, tak tu na linii 8, to gdzie moja prośba AJAX jest faktycznie zwolniony. Powiedzmy, że teraz mam jakiś kod tu, że zamierza zrobić kilka rzeczy jak ostrzega użytkownika, czy coś zmienić na stronie. Co nie wydarzy się to przeglądarka nie będzie czekać na to żądanie, aby kontynuować przed wejściem w dół i uderzając tę ​​linię. To asynchroniczny część. To będzie, aby ten wniosek i powiedzieć: "Kiedy skończysz, "Wrócić i nazywają tę funkcję, że powiedziałem wam, aby zadzwonić w środku sukcesu." To oznacza, że ​​nie można po prostu pobrać wszystkie zapasy wcześniej. Musimy sprawić, by wniosek i czekać na coś, aby wrócić. Oznacza to, że przed, możemy po prostu powiedzieć, Bootstrap, "Oto lista rzeczy, chcę żebyś Autouzupełnianie". Nie możemy już zrobić, ponieważ już nie wiemy co chcemy faktycznie autouzupełnianie na. Na szczęście, Bootstrap myśl o tym, bo to są inteligentnych facetów tam, i rzeczywiście dał nam inny sposób załadować to wpisywanie znaków z wyprzedzeniem plugin. Wcześniej, wartość tej właściwości source właśnie ta wielka tablica rzeczy Autouzupełnianie. 

Teraz właściwość source jest faktycznie funkcją, a celem tej funkcji jest, aby dowiedzieć się, jakie rzeczy do Autouzupełnianie są. Jak to się dzieje, aby to wyjaśnić to, że będzie prosić Yahoo! Finance co najlepsze rzeczy do autouzupełniania są. Aby to zrobić, że mam zamiar zrobić bardzo podobny wniosek AJAX. Zamierzam poprosić tę stronę w suggest.php. Chcę wysłać wraz symboli nadal. A teraz mój sukces, dokumentacja Bootstrap powiedział mi że w celu wypełnienia, że ​​lista rzeczy, wszystko co musisz zrobić, to przekazać w tej tablicy teraz do funkcji zwrotnej. Ale chwileczkę. Jeśli to ma być tablicą i AJAX wysyła mnie tekst, jak to możliwe? Wprowadza nowy sposób wymiany danych zwanych JSON. W tym przypadku nie jesteśmy tylko odesłanie prosty ciąg tekstu. Teraz mamy do czynienia z bardziej złożonym tej liście symboli giełdowych. Symbole te zbiory mogą obejmować takie rzeczy jak nazwy firmy lub ceny bieżące. Tylko przy użyciu duży długi ciąg, który nie jest sformatowany w jakiejkolwiek sposób przewidywalny nie będzie to najlepszy sposób, aby uzyskać te dane z serwera Yahoo do mnie w taki sposób, że można łatwo zrozumieć. JSON jest technologia, która wykorzystuje jak tworzymy tablice asocjacyjne w JavaScript. To wygląda trochę jak asocjacyjnej JavaScript tablicy w rzeczywistości, to dlatego, że są. JSON oznacza JavaScript Object Notation. Jest to w zasadzie uzgodniono formatu przesyłania danych tam iz powrotem. Tutaj ten obiekt JSON lub ten JSON asocjacyjna wysyła mi jakieś dane na temat kursu. 

Kluczami tablicy są takie rzeczy oczywiście, że ma wartość CS50, i tu możemy zobaczyć, że mogę mieć wartość, która jest tablicą. I nie trzeba robić takie rzeczy jak pomijało strun i szukać przecinkami i robić szalone rzeczy, tak. Bo to jest zadeklarowany w tym formacie JSON, JavaScript i jQuery już funkcji do konwertowania ciągu znaków który wygląda jak ten JSON do rzeczywistej tablicy asocjacyjnej JavaScript że możemy pracować. Robi, że jest tak proste jak powiedzenie, że już nie jest ten plik, suggest.php, wysyłając do mnie po prostu ciąg tekstu, ale wiem, że to będzie wysyłać do mnie JSON. To oznacza, że ​​mogą być JSON przekształcona asocjacyjnej JavaScript tablicy. I tak jQuery, chciałbym by to zrobić dla mnie. To oznacza, że ​​parametr odpowiedzi tutaj nie jest to już tylko ciąg. Ponieważ mówiłem jQuery że nadchodzi jakiś JSON, jQuery będzie na tyle sprytny, aby powiedzieć: "Chciałeś JSON?" "Idę do konwersji, że do tablicy asocjacyjnej dla Ciebie." Miejmy faktycznie przyjrzeć karcie Sieć raz mamy quote4.js. Będziemy to zmienić i odświeżyć stronę. Teraz mam zamiar wpisać-ponownie. Zrobiłem kilka wniosków do suggest.php, ale teraz ta odpowiedź, a nie tylko napisu, to JSON. Więc mam otwarty nawias klamrowy, mówiąc: "Oto nadchodzi asocjacyjna". 

Pierwszy, to klucz asocjacyjnej nazywa symbole, a następnie o to tablica wszystkich odpowiednich symboli tak teraz z Yahoo! Finance, nie z tej gigantycznej liście. W ten sposób można po prostu zapełnić ten plugin Autouzupełniania z niektórych danych, które nie pochodzi z lokalnego pliku, który już uprzednio ale od czegoś innego. Okazuje się, że rzeczywiście możemy skorzystać z technologii o nazwie JSONP, lub JSON z wyściółką, które eliminują ten suggest.php pośrednika. Ale zamiast to robić, niech zamiast przyjrzeć się w jaki sposób można poprawić to jeszcze bardziej. Bardzo podoba mi się wpisywanie znaków z wyprzedzeniem bootstrap. To bardzo miłe. Ale jesteśmy coraz dobry w JavaScripcie i chcemy trochę to zrobić sami, może spojrzeć na to, co ten plugin można robić. Niech już nie używać tego wpisywanie znaków z wyprzedzeniem rzecz, i niech starają się tę listę sugerowanych akcji sami. Tutaj w quote6.php zamierzamy rozpocząć w ten sam sposób. Za każdym razem ktoś wpisze coś, chcemy złożyć wniosek o AJAX. To jest podobne do naszego pierwotnego CS50 błyskawiczne Finansów. Niż zwrócenie się do quote.php, jesteśmy teraz składając wniosek do tego samego pliku, tak jak wcześniej, to suggest.php, który po prostu się do ściągania danych z Yahoo! Finance. 

Znowu jesteśmy nadal spodziewa JSON, ale teraz od wpisywanie znaków z wyprzedzeniem nie robi to dla nas, musimy także wysłać wraz wartość, która jest w środku obecnego polu tekstowym. Teraz już wiemy, o co pytać Yahoo! Finance dla, a więc teraz tutaj jest funkcja, że ​​chcemy wykonać raz prośba kończy. Nie mamy plugin do listy dla nas, tak tutaj jest, dokąd faktycznie zbuduje listę sugestii. Aby to zrobić, podobnie jak w PHP, możemy złączyć te duże ciągi HTML następnie wydrukować je, możemy zrobić dokładnie taki sam coś w JavaScripcie. Najpierw jedziemy na rozpoczęcie ten ciąg nazwie sugestie, i ten napis jest po prostu będzie zawierać niektóre HTML. Chcemy, aby być lista rzeczy, więc mamy zamiar zacząć od tego znacznika listy a teraz idziemy do iterować wszystkie symbole, które zostały zwrócone do nas. Zapamiętaj, bo mówiliśmy dataType: 'json', to nie jest ciągiem. To jest już tablica dla nas. To jest naprawdę fajne. Możemy po prostu powiedzieć: "Chcę, byś dołączyć element listy." Umieścimy go wewnątrz elementu A w boku, że dajemy klasę sugestie więc wiemy co to jest, a teraz jest symbolem, że wróciliśmy z Yahoo! Finance. 

Po utworzeniu element dla każdego z symboli staliśmy z powrotem, chcemy po prostu zamknąć listę. Więc teraz sugestie reprezentuje ten mały fragment HTML że kiedy umieścić na stronie będzie lista rzeczy szukamy. Teraz rzeczywiście wprowadzone, że na stronie. Aby to zrobić, że mam rzeczywiście stworzyła kolejną pustą div i dałem mu identyfikator sugestie. Podobnie jak możemy ustawić zawartość div że wyświetlenia ceny danych giełdowych teraz po prostu chcę, aby ustawić zawartość div do cokolwiek to ciąg jest który zawiera te symbole. Korzystając z tej metody HTML zmienna ta sugestie, ten ciąg jest ciągiem HTML. Chcę, żebyś się, że HTML i umieścić go wewnątrz div nazwie sugestie. Właśnie dołączane coś DOM teraz. Dodaliśmy kilka nowych elementów do DOM że możemy wyświetlić na stronie. Zobaczmy, jak to wygląda. Jeśli załadować quote6 a teraz wracają, teraz, kiedy zaczniesz pisać AAPL, nie mamy już tego Bootstrap autouzupełniania, ale teraz mamy z tej listy, które zrobiliśmy sami. To jest trochę brzydsze nieco niż wpisywanie znaków z wyprzedzeniem bootstrap np. ale to nie pozwala nam na jeszcze jedną rzecz. Kiedy szukaliśmy w tym pluginie bootstrap widzieliśmy, że kiedy autocompleted, jeden z autouzupełniania wartości był AAPL. To nie może być tak pomocny. Jako użytkownik, nie może natychmiast rozpoznać wszystkie symbole akcji. Co jestem chyba bardziej prawdopodobne uznają są spółki rzeczywiste nazwy. Więc nie byłoby naprawdę przydatne, gdy zamiast mówić AAPL to powiedział coś w stylu Apple Inc Bo mamy ten przewrócił się, czy naprawdę możemy to łatwo zrobić. Otwórzmy nasze ostatni plik tu przytoczyć, więc quote7. 

Samo. Właśnie stworzyła kolejną plik PHP, który powróci do nas więcej niż tylko symboli. Będzie on również dać nam powrót spółki imiona. I tak robimy to samo. Robimy żądania AJAX. Gdy wniosek jest zakończone, będziemy wykonywać tę funkcję, tu i ta funkcja będzie budować wielki ciąg elementów. Ale różnica jest to, że wartość tych list nie jest już tylko symbolem, teraz jest nazwa. Tak więc mamy jeden mały problem. Kiedy używamy naszego odnośnika, musimy jakoś przekazać to symbol. Nie możemy przejść odnośnika coś Microsoft Corporation. Musimy przekazać go MSFT. Kiedy piszemy HTML, mamy wiele miłych cech wbudowanych. Mógł z nim związane href lub klasy. Ale to, co naprawdę potrzebne to dla każdego z tych linków mają symbol giełdowy skojarzony. Nie ma wbudowanego atrybutu HTML na symbol akcji, ale na szczęście, HTML5 pozwala nam tworzyć własne cechy, by być, co chcemy. Mówiąc danych symbol, już wprowadzono nowy atrybut którego imię po prostu składa się, i to jest w porządku, bo poprzedził go z tymi danymi. Będziemy przechowywać wewnątrz tam symbol z magazynu teraz. Co to oznacza to, że nawet jeśli mamy do wyświetlania wartości nazwy spółki wewnątrz nasz autouzupełnianie, wciąż pamiętając, symbol , który jest związany z każdym firmy. Sposób, w jaki to robisz jest wewnątrz tego samego elementu. To znaczy, że musimy dokonać jeszcze jednej zmiany. Kiedy kliknij go teraz, musimy faktycznie skorzystać z atrybutu symbolu a nie tylko jego wartość. Jeśli będziemy z powrotem w górę, przywiązujemy obsługi zdarzeń na sugestie. Gdy jeden z tych sugestii kliknięciu teraz, chcę coś zrobić. To, co chcę zrobić, to zmienić wartość tego pola. Teraz chcę, aby ustawić tę samą funkcję Val. 

Więc bez żadnych argumentów funkcja val zwraca do was, co jest już w polu tekstowym, ale jeśli dać mu łańcuch, to zajmie ten ciąg i umieścić go w polu tekstowym. Jestem zaznaczając jego pole tekstowe, w ten sam sposób. Jego nazwa jest w środku symbol formularzy cytatu. Teraz jestem przesyłając wartość atrybutu data-symbol. To coś tu jest nowe, to $ (this). Co dotyczy to jest element, który został kliknięty. Widzimy tutaj, że nie jesteśmy załączając zdarzenie click do każdego elementu, z klasy sugestii indywidualnie. Raczej, zbliżamy się to trochę inaczej. Zamiast tego mówimy, gdy w środku nic z tego div sugestie, co pamiętam to tylko pojemnik na tej liście, jeśli coś wewnątrz tego div kliknięciu i ma klasę sugestią Chcę, aby ta impreza na ogień. Zasadniczo, co to oznacza, że ​​możemy zrobić, to możemy wykorzystać ten sam obsługi zdarzeń dla wszystkich rzeczy w liście. Tak więc nie trzeba mieć jedno zdarzenie obsługi dla pierwszego elementu i inna obsługa zdarzeń dla drugiego elementu. Możemy natomiast powiedzieć: "Chcę sama obsługa zdarzeń stosuje się do wszystkiego w mojej liście." Ale musimy jakoś wiedzieć, który element został kliknięty. To "to" keyword oznacza tylko to. Jest to obiekt, który został kliknięty przez użytkownika. Jeżeli po prostu kliknął 3-te link, to reprezentuje element tego 3-gi link co oznacza, że ​​można uzyskać jego atrybut, data-symbol, co wiemy musi zawierać symbol, który jest związany z firmą właśnie kliknięty. Jeśli mamy wrócić do naszej strony finansów Widzimy teraz, że kiedyś mogę zacząć pisać coś jak MSFT, Nie jesteśmy już coraz zaledwie symbole free, mamy teraz coraz rzeczywistych przedsiębiorstw. Ale po kliknięciu na jedną z tych firm, widzimy, że jesteśmy rzeczywiście wypełnianie nie pole tekstowe z nazwą firmy ale z tym, co zostało zapisane w środku tych atrybutów danych. I tak, jeśli faktycznie sprawdzić jeden z tych elementów, klikając prawym przyciskiem myszy to i klikając Sprawdzić element, możemy rzeczywiście zobaczyć, jak to wygląda. 

Pamiętaj, to jest coś, co stworzyliśmy w środku, że dla pętli kiedy byliśmy budując ten ciąg HTML. Widzimy tutaj, że ta data-symbol ma wartość MSFT, co jest dobre. To, czego się spodziewaliśmy. To symbol i tak mamy wartość, co potrzebne do korzystania wewnątrz tego pola. To wystarczy na formularzu cytatem bo to trochę nudne. Miejmy tylko zrobić kilka szybkich ulepszeń do naszej strony portfela. Jeśli używany CS50 Finance na chwilę i rozpocząć kupna i sprzedaży wiele zasobów, ostatecznie tabela ta będzie się dość duże, i masz zamiar chcesz giełdowy, oczywiście. Po tabeli jest naprawdę duża, to może być użyteczne dla użytkownika spróbować przeszukiwać nim. Wewnątrz pola wyszukiwania, jeśli zaczniesz wpisywać coś jak Disney i szuka mojej ręki Mickey Mouse, widzimy, że stół jest teraz filtrowania w oparciu o to, co po prostu wpisane w. Funkcja ta wygląda super skomplikowane, ale tak naprawdę, naprawdę łatwe z jQuery i JavaScript. Ten portfolio.php plik zawiera plik JavaScript o nazwie portfolio.js. Rzućmy okiem na to. Więc html, js, portfolio. Oto, gdzie robimy, że wyszukiwanie na stole. Pierwszą rzeczą, którą musisz zrobić, to dołączyć obsługi zdarzeń do tego pola tekstowego ponieważ wiemy, że chcemy, aby nasza funkcja filtrowania na ogień za każdym razem użytkownik naciska coś, bo nie mam czasu na przyciski wyszukiwania. Pierwszą rzeczą, którą musisz zrobić, to dowiedzieć się, co użytkownik szuka, tak jak my kiedyś. Ten parametr odnosi się do bieżącego elementu użytkownik jest interakcja z. 

Ponieważ użytkownik jest interakcja z pola wyszukiwania $ This reprezentuje pole wyszukiwania, tak this.val daje nam to, co jest w środku pola wyszukiwania użytkownik jest aktualnie pisać. Tak, teraz to, co chcemy zrobić, to chcemy iterować wszystkie wiersze Wnętrze naszego stolika. Aby zaznaczyć wszystkie wiersze w naszym stole, dałem tej tabeli identyfikator portfela tabeli a każdy wiersz reprezentuje elementu TR, więc wybór będzie powrócić do mnie tablicy duży wszystkich wierszy w moim stole. Teraz chcę iteracyjne nad tablicy. I mogłeś dla pętli, ale jQuery faktycznie daje nam ładny funkcję o nazwie "każdy". Co każdy robi, to każdy ma jeden argument, i ten argument jest funkcją. Co to będzie zrobić, to to będzie zastosowanie tej funkcji do każdego elementu wewnątrz tej listy. Funkcja ta pobiera jeden argument, który jest e, i kiedy funkcja ta jest wykonywana, to e zostanie zastąpiony pierwszym rzędzie, a następnie w drugim rzędzie, a następnie w trzecim rzędzie. W ten sposób, to jest to samo, co działa dla pętli a potem zastanawianie bieżący element oparty na wewnętrznej indeksu Twojej pętli for. W każdej iteracji, dla każdego z tych elementów w tabeli, Chcę sprawdzić, czy w tekście elementu - tekst wewnątrz komórki w wierszu - pasuje do tego, co szukam. To wielkie długi ciąg komend jest jak można to zrobić. Pierwszy, ponownie, to odnosi się obecnie - w środku, ponieważ jest nowej funkcji - Ten prąd jest obecnie w wierszu tabeli. Chcę podjąć bieżący wiersz w tabeli, i chcę, aby wszystkie jego dzieci. Pamiętaj, że DOM jest hierarchiczną drzewa, Oznacza to, że elementy, które mają wiele dzieci. 

This. Funkcja dzieci będzie wrócić do mnie z powrotem tablicę wszystkich elementów że są dziećmi, w tym przypadku, wiersz w tabeli. To jest po prostu komórki wewnątrz wiersza. Chcę po prostu przeszukiwać pierwszej komórki. Tego. Pierwsza funkcja mówi mi pierwszy element tej tablicy. Wtedy funkcja tekst mówi, żebym dokładnie co znajduje się wewnątrz tej komórki ponieważ chcę szukać nad tym tekstem. Na koniec, przekonwertować go na małe litery, więc możemy zrobić tekstowych wielkość liter zapytania. Wreszcie, chcemy sprawdzić, czy ciąg wewnątrz tabeli zawiera ciąg jesteśmy szukasz. Funkcja indexOf w JavaScript właśnie to robi. Mówi nam, czy ten ciąg zawiera inny ciąg. Jeśli prawdą jest, że komórka zawiera co szukam, następnie chcę się upewnić, że to jest pokazane. Metoda show powiedzieć: "Pokaż element." Jeśli to nie jest przypadek, to znaczy, co szukam, nie jest zawarty w tym wierszu, a więc chcę ukryć to od użytkownika. Który osiąga ten ładny efekt filtrowania, gdzie nie widzimy całą tabelę. Jeśli jesteś zainteresowany w jaki sposób dokonać tego giełdowy, jak również, będziemy pisać źródła online. Ale to jest bardzo proste. JQuery ma niesamowite metody te animacje i manipulowanie właściwości CSS. Tak, to jest to dla mnie. 

Co więc nas czeka? Jak zobaczysz w ciągu kilku dni, ostateczny projekt przedsięwzięcia jest należny. Ostateczna propozycja projekty zadać kilka pytań, ale wśród nich będzie trzy etapy - jeden "dobry" kamień milowy, jeden lepiej kamień milowy, a jeden najlepszy. Pomysł jest naprawdę, aby pomóc wam ustawić swoje oczekiwania tak, aby w minimalnym stopniu będzie szczęśliwy z wyjściem ostatecznego projektu i będzie to "dobra" jakim jesteś zainteresowany. Ale wtedy w interesie coraz dotrzeć do tylko trochę do czegoś lepszego czy coś najlepiej, będziemy również sortować z wcisnąć się w kierunku, że dobrze. CS50 Hack-a-Thon, w międzyczasie, w ciągu kilku tygodni. Zwykle robimy to na zasadzie podstawa loterii z powodu zainteresowania, ale kursy są weźmiemy kilkuset nas autobusy wahadłowe z Harvard Square w dół, aby Kendall Square, gdzie Microsoft ma piękny obiekt wdzięcznej nazwie "NERD" - New Research Anglia i Development Center. Dostaniemy tam około godzina dwudziesta Musimy trochę jedzenia. Około 1 a.m. będziemy mieć trochę więcej jedzenia. Około 5 rano, jeśli nadal nie śpisz my udać się IHOP lub zabierze Cię z powrotem do kampusu. Celem jest do nurkowania w końcowych projektach wraz z kolegami i personelem. Następnie kilka dni później jest CS50 Fair, których naprawdę ma być okazją do wy, aby zaprezentować swoje prace i osiągnięć na semestr gdy ramię w ramię z siebie i coraz poczucie tego, co każdy zrobił. Z powiedział, że wiele dzięki Tommy i Józefa, i zobaczymy w poniedziałek.  [Oklaski]