David J. MALAN: Dobra, tak, to tutaj jest ramię Myo Zespół, z którym kilka mają dla CS50 projektów końcowych. I to było wykazanie, że w kolejce można się z góry gdzie zasadniczo to dość mocno tutaj Arm Band słucha twoich ruchów mięśni które są następnie mapowane w oprogramowaniu Colton do laptopa, który jest na tutaj iTunes i że miał Piosenka już w kolejce. Zamiast mnie demoing tego, Colton był w laboratorium wyraźnie cały tydzień się pokaz gotowy do jednego dzielnego wolontariusza. Jeśli ktoś chciałby się na up-- zobaczyłem pierwszy rękę. Chodź na górę. [00:01:09] Dobrze. A jakie jest twoje imię? 

[00:01:13] Publiczność: Uh, Maria. 

[00:01:14] David J. MALAN: Maria, miło cię widzieć. Chodź tutaj. Pozwól, że przedstawię ci Colton. Colton, jest Maria. 

[00:01:21] COLTON: Cześć, miło cię poznać. 

[00:01:23] David J. MALAN: Wszystkie Dobra, więc kroku, jesteśmy będzie musiał umieścić to na przedramieniu tak, że jest to dość mocno się w pobliżu łokcia. A w międzyczasie, niech mają umieścić na naszym Google Glass i będziemy mieszać technologii dzisiaj. 

[00:01:33] COLTON: Najpierw musimy podłączyć to do rzeczy. 

[00:01:36] David J. MALAN: OK. Właściwie, postawmy rękę jako blisko tego kabla, jak to możliwe tak, że możemy po raz pierwszy zsynchronizować go. 

[00:01:41] COLTON: Zróbmy to. 

[00:01:42] David J. MALAN: A tymczasem, tak że każdy może bliżej oka, będziemy rzucać aparatu Andrzeja na ekranie tam. Więc mamy kabel USB, jest podłączony do opaski Marii. I niech mi wrzucić na ekran Colton do projektora następnego. 

[00:02:00] Więc Colton rejestruje urządzenie teraz jak Myo podłączone do tego kabla. A teraz, co Marii chwilę zrobi faktycznie przejść przez kroki kalibracji i uczyć oprogramowania jak jej mięśnie odpowiedzieć kiedy ona upewnić się, wstępnie zdefiniowane gesty, że oprogramowanie rozumie. Jeśli chcesz, aby przejść w z przodu ekranu. OK, próbować. 

[00:02:30] COLTON: Go w ten sposób. I tak. I przez całą drogę w prawo. Wróć. 

[00:02:35] David J. MALAN: OK. Innej perspektywy. To nie ty. To nas. 

[00:02:40] MARIA: OK. David J. MALAN: Nie Przejdźmy go wyżej, więc jest to bliżej do łokcia, a nawet mocniej. Dobrze. 

[00:02:52] No to jedziemy. To będzie dobry czas dla CS52X. Nie idziemy. 

[00:02:57] Bardzo ładne. OK. Kciuk do pinky. 

[00:03:02] Bardzo ładne. Rozłożone palce. Dobra. Fala prawo. Jest ciekawie pokazując Ci z lewej hand-- 

[00:03:17] COLTON: Tak, to jest dziwne. David J. MALAN: Wave w prawo i iść do przodu. Przewijanie do przodu, aby pominąć lub obok. To jest OK prawo Wave. 

[00:03:25] MARIA: don't-- czekam. 

[00:03:26] David J. MALAN: Potrzebujesz pomocy? 

[00:03:28] COLTON: Więc idziesz tak. Maria: To się toczenia Inna sprawa, choć. COLTON: Jest. David J. MALAN: Tak Nie wiem dlaczego to pokazuje wam leworęczny. COLTON: Dlaczego nie try-- po prostu spróbuj przejść w ten sposób. 

[00:03:38] David J. MALAN: Nie? Może osiągnąć ramię się trochę celniej i uczynić go bardziej gwałtowne tak. Tak, dobrze, chodź. 

[00:03:48] MARIA: Przykro mi. David J. MALAN: To nie twoja wina. COLTON: Jest w porządku. David J. MALAN: Wszystko w porządku. Well-- 

[00:03:56] MARIA: Czy powinniśmy pominąć tego, czym? David J. MALAN: Tak, niech niech was haka. Więc jeśli ktoś chciałby zrobić Ostateczny projekt za pomocą tej krawędzi tnącej sprzętu, to może po prostu sobie zająć trochę przyzwyczaić. I this-- rzeczywistość jest to jest rzeczywiście bardzo krwawienia krawędzi. 

[00:04:10] To jest to, co się nazywa Developer Kit, który ma być w zasadzie pre-release tak, że ludzie mogą zrobić dokładnie this-- walczyć z nim, rysunek się, jak działają ludzkie ciała z techniki. Więc jeśli chcesz potem, po wykładzie, możemy pozwolić przyjść i zrobić kolejne ukłucie w nim. Ale inaczej, brawa, jeśli mogliśmy, dla Marii za przybycie na górę. 

[00:04:26] MARIA: Dziękuję. 

[00:04:28] David J. MALAN: Dziękuję. Będziemy trzymać się tego, ale damy you-- jak o piłkę stres tutaj? Och, and-- if-- tak, dzięki. Dobrze. Tak dla ciekawskich, jeśli były zaznajomiony z wyborem dźwięku że zrobiliśmy tam wcześniej, niesamowite TV pokazują, że powinieneś absolutnie być binge-oglądania Netflix Jest to jeden tutaj. 

[00:04:51] GŁOŚNIK 1: Panie i panowie, mag o imieniu Josh. 

[00:05:04] David J. MALAN: I najwyraźniej, że to co do mnie tekst podczas wykładu teraz. Powiedziano mi, że Maria miał wczoraj urodziny. Więc z okazji urodzin CS50 do Marii, jak również. 

[00:05:18] Więc można przeczytać w ostatnim miesiącu że panowie tutaj, Steve Ballmer, który był w rzeczywistości klasa z 1977 roku w college'u, Niedawno przeszedł na emeryturę dla Microsoftu. Był studia tutaj, następnie kilka lat później znalazł się na Stanford Business School gdy otrzymał telefon zadzwonić z jego przyjacielem kto żył korytarzem z nim tutaj na Harvardzie. Nazwy znajomego Bill Gates, a w tym czasie, próbował zatrudnić Steve się Pierwszy biznes człowiek, naprawdę, w małej firmie Microsoft nazwa. 

[00:05:45] Krótko mówiąc, Steve został ostatecznie wygrał ponad, dołączył do firmy Microsoft, gdy miał zaledwie 30 pracowników. I do czasu, gdy emerytowany niedawna spółka miała 100 tysięcy pracowników w ciągu ostatnich kilku lat. I tak strona znany jako The Verge przygotowany to hołd na wideo że myśleliśmy, że wspólne, które daje poczucie, jak wiele energii Steve wnosi do każdej prezentacji on daje. [ODTWARZANIE] -Microsoft Jak czwartego dziecka. Dzieci nie wychodzić z domu. W tym przypadku, myślę, Wychodzę z domu. Hej, Bill, whazzap? 

[00:06:23] -Wazzap? 

[00:06:24] Hej, wazzap? Byliśmy podano ogromna szansa. I Bill dał nam taką możliwość. Chcę podziękować za to Bill. Chcę, żebyś też. Tempo innowacji nie zamierza zwalniać. 

[00:06:42] To będzie się coraz szybciej i szybciej. Nie może być kilka konkurenci które są niestety wyeliminowany! 

[00:06:54] Uwielbiam tę firmę. Tak! Jestem PC i kocham tę firmę! 

[00:07:08] Deweloperzy, developerzy, deweloperzy, deweloperzy, developerzy, deweloperzy, deweloperzy, deweloperzy. Tak! Web deweloperzy! 

[00:07:19] Web deweloperzy! Web deweloperzy! Posłuchaj, co jeszcze uzyskać bez dodatkowych opłat! 

[00:07:28] MS-DOS Executive, powołanie kalendarz, stos kart, notatnik, zegar, panel sterowania. I można w to uwierzyć? Reversie! 

[00:07:35] Możesz je nagrać na płycie CD! Prześlij je na Skype! Możesz wysłać je do znajomych! 

[00:07:40] Wszystko za pomocą jednego kliknięcia! Jeden Microsoft, jedna strategia, jedno team-- skupiony, zdyscyplinowany, profesjonalny, i ekspertem we wszystkim, co robimy. Pozwól mi korzystać z linii ze starego filmu. 

[00:07:52] Relacje są jak rekiny. Poruszają się do przodu lub do śmierci. I rzeczywiście uważam tech przedsiębiorstwa są takie same. 

[00:08:01] [KONIEC ODTWARZANIE] David J. MALAN: Więc jesteśmy tak zadowoleni, informujemy, że Steve dołączy do nas tu w środę na CS50 zwykle miejsce i czas tutaj. Przestrzeń będzie prawdopodobnie ograniczony. I tak, aby dołączyć do nas osobiście, proszę udać się dziś lub wkrótce do cs50.harvard.edu/register. 

[00:08:22] I będziemy śledzić przez Wtorek potwierdzający plamy. Oczekujemy, że w przyszłym Środa podczas wykładu w CS50. Teraz, w innych wiadomości, zdarzyło mi się natknąć się to tylko w The Crimson drugi dzień. 

[00:08:34] Okazuje się, że jeden z pracowników CS50 jest i co najmniej jeden studentów za CS50 pracuje obecnie dla UC prezes i wiceprezes, które przywróciło mnie do moich dni wstecz kiedy przegrał wybory UC marnie. Ale wyszło w które jest zawsze powiedzieć, że historia jeden z jestem pewien wiele powodów straciłem Wybór był kompletny brak z talentem do wystąpień publicznych. A tak szczerze mówiąc to, zawiózł mnie, że doświadczenie Myślę, że mój młodszy roku, rzeczywiście podpisać się na Harvard Computer Society, która jest na terenie kampusu, że grupa posiada różne rozmowy techniczne i inne rzeczy. I przejął ich nauczania seminaria i dlatego miał okazję, wspaniała okazja, aby rozpocząć pracę na dokładnie to. Ale również, miałem okazję podczas tego doświadczenia uczyć sobie tym bardziej HTML. I tak wczoraj przez zwlekał patrząc na stronie internetowej opartej na HTML Jak zrobiłem w 1997 roku, '98, dla mojego Kampania, która wygląda tutaj. Wiem. 

[00:09:29] Because-- i oczywiście zawiadomienie ten niesamowity projekt w 1998 roku decyzja lub cokolwiek. Pierwszą rzeczą, którą chcesz, aby użytkownicy zrobić na odwiedzenie witryny to trzeba po prostu kliknij inny odnośnik wprowadzić swoją stronę tutaj z mnichem za jak owiana kurtyną, gdzie widocznie moja kampania platformy. A to wszystko dostaniesz dziś jest tylko zrzut ekranu. Ale ja czytając, jak, kampanii plakaty ostatniej nocy a moja platforma. 

[00:09:50] A ja byłem tak zły na czasie. Moja platforma was-- było interesujące. Tak już się uspokoił, ponieważ wtedy. Ale pewnego dnia, będzie uruchomić ponownie i mam nadzieję, że lepiej ten czas. 

[00:10:03] Więc HTML, że język, w którym zrobiłem że in-- Ciebie będzie szybko zrobić wiele more-- jest coś, byliśmy mówisz późno iw dużej mierze biorąc za pewnik, teraz które zostały przeniesione na inne języki. Ale zatrzymajmy się na chwilę i umieścić niektóre z tych rzeczy w kontekście. Tak w jednym zdaniu, co to jest HTML? 

[00:10:18] Albo, co służy? Każdy, kto? Tak. 

[00:10:20] Publiczność: Markup witryn. David J. MALAN: Markup na stronie internetowej. Więc to, że język znaczników pozwala zorganizować stronę internetową. Nagłówek wchodzi tutaj, tytuł idzie tu, ciało przechodzi tutaj. To jest pogrubiony, to jest italics-- tego rodzaju szczegółów. 

[00:10:33] OK, dobrze. Więc CSS pozwala you-- i ja miała tam pewne wolności z wychodzącym i pogrubioną kursywą, ponieważ Tak lepiej realizowane z tym. CSS is-- co? Powiedzieć w jednym zdaniu. Każdy, kto w ogóle. Tak. 

[00:10:46] WIDOWNI: Zdobienia i rzeczy, jak sposób projektowania. David J. MALAN: OK, dobrze. Zdobienia, które pozwalają zaprojektować go lub stylizować go z rzeczy, jak pogrubioną czcionką i kursywa i kolory, a także więcej dobrze drobnoziarnisty pozycjonowanie elementów. To rodzaj pozwala robić rzeczy, na Ostatnia mile tak, że jeżeli na przykład w Pset7, można zauważyć na swoim Strona portfolio jeśli jesteś w tym momencie już, że domyślna tabela że aby pokazać gospodarstw czas na użytkownika i prawdopodobnie wygląda dość gotówki ohydny domyślnie bez białej przestrzeni. Wszystko jest od rodzaju zapchane ze sobą w rzędach i kolumnach. 

[00:11:18] Cóż, z odrobiną CSS, jak można zrealizować, rzeczywiście można dostosować i zrobić to, że coś o wiele bardziej znane i bardzo ładniejszy dla oka. Więc jest o CSS stylizacja witryn. Ale potem kolejny wprowadziła język PHP, który pozwala nam robić to, co? 

[00:11:36] Zróbmy to, co? Każdy. Masz na zakupy poza pierwsze kilka wierszy. Tak. 

[00:11:40] PUBLICZNOŚCI: Generowanie dynamicznej zawartości. David J. MALAN: Idealny. Generowania dynamicznej zawartości. I można to zrobić w dowolną liczbę języków. Przyzwyczailiśmy się do korzystania z PHP, ponieważ jest to częściowo tak podobnych składni C. 

[00:11:50] Ale PHP robi dokładnie to. To pozwala dynamicznie generować wyjście. A niektórzy z tego wyjścia może być HTML, jak my zwykle robi. I to również, bo to język programowania, jest Mechanizm, za pomocą którego możemy mówić do baz danych. 

[00:12:03] I możemy zrobić zapytania do inne serwery jak Yahoos i programowo nic zrobić naprawdę, że mogłyby Aby zmusić komputer do zrobienia. Więc PHP pozwala nam zacząć dynamicznie wyprowadzania treści. Więc przez tą logiką, nie mam dynamiczna strona internetowa w 1998 roku. 

[00:12:16] To był tylko statyczne strony WWW. Zawartość mojego należało zmienić ręcznie z gedit lub jakiś odpowiednik. Ale PHP jest używany lub co mogła wykorzystać raczej na coś takiego Strona Frosh IM, który miał wziąć rejestracje i zarządzać listą users-- rzeczy rzeczywiście zmienia się czas, mimo że stało w użyciu Perl, różne język w czasie. 

[00:12:35] I wtedy wreszcie wprowadziliśmy SQL-- Structured Query Language. Jeszcze tak inny język który jest używany na co? Używane na co? Możemy zaryzykować slight-- OK, nie będziemy uzyskać znacznie dalej niż orkiestry tutaj. Grupa docelowa: Jest to protokół rozmawiał z baz danych. David J. MALAN: protokół rozmawiał z baz danych. Pozwól mi podkręcić. Jest to język naturalny używany rozmawiać databases-- wybiera i wstawia i usuwa oraz aktualizacje i rzeczywiście nawet więcej funkcji, które my nawet nie zanurkował się, ale może chcesz explore-- mają do poszukiwania, powiedzmy, ostateczny projekt. Tak więc są te różne kawałki. 

[00:13:09] I mam nadzieję, że Pset7, choć jego specyfikacja jest dość długa, to celowo, aby przejść długi poprzez jak wszystkie te rzeczy można być wpisane razem. Teraz, w poniedziałek, my wprowadził nasz ostatni język że uda nam się wprowadzić w formalnie course-- czyli JavaScript. To, jak PHP, jest interpretowany język. 

[00:13:25] Jednak zasadnicza różnica I zaproponował w poniedziałek jest to, że podczas gdy PHP jest wykonywany lub interpretowane na serwerze, który w tym przypadku urządzenie CS50, lub może być jakiś komercyjny WWW serwer w Internecie, JavaScript ogólnie jest język, który działa po stronie klienta Serwer side-- więc nie w przeglądarce. To znaczy, tak jak kiedy otworzyłem się Facebook kodu źródłowego i znaleźć wszystkie tych .js plików, implikacja była że podczas odwiedzania Facebooka lub najbardziej Strony te dni, otrzymasz nie tylko HTML, nie tylko CSS, ale cała masa JavaScript Kod często w postaci plików .js. A potem to browser-- własny Mac lub PC--, że wykonuje ten kod. 

[00:14:03] Ale Twoja przeglądarka wykonuje go. Możesz myśleć w rodzaju piaskownicy. Tak, że kod JavaScript nie powinno być w stanie usunąć pliki na komputerze. Nie powinno być w stanie wysyłanie wiadomości e-mail w Twoim imieniu. Twoja przeglądarka z Ogranicza rodzaj co można z nim zrobić. 

[00:14:17] Więc w tym sensie, że to trochę mniej potężne, być może, niż C. Ale obsługa JavaScript, można, jak bok być stosowane na serwerze choć raczej nie będziemy rozmawiać o to w tym kontekście. Więc teraz niech związać je razem. Tygodniu oraz temu zaprezentowaliśmy niektóre HTML na lewy-- bardzo nudne stronie internetowej. 

[00:14:34] Wystarczy mówi hello world. A potem zaproponował na prawo możemy rodzaj kradzieży pomysłów z naszej dyskusji Struktury danych w C i myśleć o tym, jak to hierarchiczny język znaczników po lewej stronie można wyciągnąć lub wdrażane w pamięci jako rzeczywistej strukturze drzewa z węzłami oraz wskaźniki i te rodzaje szczegółów. Po prawej stronie, nazywamy że dokument o DOM-- Obiekt Model-- który jest po prostu fantazyjny sposób na powiedzenie drzewo. 

[00:14:56] Teraz, dlaczego to jest przydatne myśleć o tym w ten sposób? Bo teraz JavaScript, ponieważ mamy kod, który dostaje się do gry w tym Środowisko, które jest rzeczywiste HTML został wysłany do przeglądarki już i już załadowany do pamięci Przeglądarka w drzewo w Twoim komputerze RAM tak, możemy użyć skryptu faktycznie przechodzić lub pieszo lub wyszukiwarka lub zmienić DOM drzewo jednak chcemy. Faktycznie więc, jeśli myślisz, o facebook.com, w przypadku korzystania z funkcji czatu, jeśli Ciebie Wykorzystanie Gmail i funkcja gchat, coś, gdzie trzeba Wiadomości pochodzące znowu i znowu i znowu, te wiadomości są prawdopodobnie, jak tag LI, znaczniki listy pozycji, być może. 

[00:15:35] A może są po prostu DIV, które utrzymują pojawiające każdym razem, gdy pojawia się komunikat o natychmiastowy. I tak, po prostu, co oznacza, Facebook lub Google robi jest za każdym razem dostajesz wiadomości z serwera, są one prawdopodobnie za pomocą JavaScript po prostu dodać kolejny węzeł to tree-- inny węzeł do tego drzewo, które następnie wizualnie wygląda po prostu jak nowy wiersz tekstu na ekranie. Ale oni wkładając do tej struktury danych. 

[00:15:57] Tak jak w klasach CS124 i inni, będziesz faktycznie napisać więcej kodu przed struktury danych, takie jak ten. Ale teraz w JavaScript, musimy po prostu przyjąć, mamy wszystkie te funkcje za darmo z samego języka. Więc spójrzmy na przykład. 

[00:16:09] Pozwól mi otworzyć plik o nazwie form.html. To bardzo proste. To po prostu wygląda tak. 

[00:16:15] No CSS, ma myśli do estetyki. To czysto funkcjonalne i najwyraźniej jestem prosząc o e-mail, hasło, hasło ponownie, a następnie sprawdzić zgodzić się na pewne warunki. Co do tego kodu źródłowego Wygląda na to, to chyba coś można się domyślać z Trochę myśli teraz. Mam tutaj tag formularz. 

[00:16:32] Akcja jest najwyraźniej zamierza przejść do pliku o nazwie register.php. Metoda Zamierzam wykorzystać to dostać. A potem mam tekst Pole, którego nazwa jest e-mail. 

[00:16:40] Mam pole hasła którego nazwa jest hasłem. Mam inny pole hasła, którego nazwa jest nieco arbitralnie potwierdzenia. To jest po prostu inny parametr HTTP. 

[00:16:49] A potem nie używałem tych wyjątkiem ponieważ Frosh demo w class-- IM pole wyboru, które jest Wystarczy wpisać równa czek. I zadzwonię to porozumienie. Więc mam rodzaj arbitralnie, ale dogodnie nazwie te pola. Tak, że teraz, kiedy ta forma robi składane, zobaczmy, co się stanie. Jeśli robię malan@harvard.edu, Zrobię hasło szkarłatu. Zrobię hasło niczego. Niech nie współpracować. 

[00:17:10] I nie zaznaczyć pole. Pozwól mi kliknij Register. I mówi, hm, jesteś zarejestrowany. Nie bardzo. 

[00:17:16] Ale URL zmianie. Tak więc ta forma wyraźnie dozwolone przedłożyć register.php. Ale prawdopodobnie, powinienem być łowienie niektóre z tych błędów. Teraz, w Pset7 i niektóre naszych przykładach wykładowych, my zazwyczaj wydrukować duży czerwony komunikat o błędzie tutaj mówiąc, brakuje nazwy, lub brak hasła. Zrobiliśmy, że przed i mamy zrobione wykrywanie błędów po stronie serwera. 

[00:17:37] Ale wiele stron internetowych w tych dniach zrobić wykrywanie błędów po stronie klienta gdzie adres URL nie zmienia. Cała strona nie odświeża. Otrzymacie Państwo natychmiastowe informacje zwrotne z przeglądarki. Może coś się na czerwono. 

[00:17:48] Być może pojawi się pop-up. Ale nie trać czasu na wysłanie do Serwer to dane niepełne. Zobaczmy więc jak moglibyśmy osiągnięcia tej funkcji, jak również. 

[00:17:56] Pozwólcie mi iść do form1.html, która wygląda tak samo. Ale jeśli tym razem zrobić malan@harvard.edu i wpisuję szkarłat a ja dalej nie współpracują ale kliknij przycisk Zarejestruj, zauważysz teraz. To nie jest najseksowniejszą rozwiązanie. Ja przynajmniej złapać ten błąd. I użyłem alert Funkcja w JavaScript-- którego używamy tylko w klasie. Ogólnie rzecz biorąc, nie należy używać tego ponieważ może to bardzo szybko dostać się kontrolą. Ale hasła nie pasują to błąd. 

[00:18:19] Pozwólcie mi iść do przodu, a następnie kliknij OK. Ale co tu klucz wynos jest to, że adres URL nie zmienia. Więc nie tracić już przeszkadza Czas serwera prosząc go pytanie, które mógłbym zorientowali się, odpowiedź dla siebie. 

[00:18:30] I użytkownika, nawet jeśli Rozmawiałem na ten temat dłużej niż użytkownika będzie o tym myśleć, będzie miał natychmiastową informację zwrotną. Nie ma opóźnienia z łączność z siecią. Więc spójrzmy na to kodu źródłowego. 

[00:18:40] Form1.html wygląd strukturalnie podobne tutaj. Forma jest w rzeczywistości takie same. Ale zobaczmy, co zrobiłem tutaj. I nie ma różne sposoby, aby to zrobić. I zrobiłem najbardziej prosto popychacz, ale nie najbardziej elegancki sposób jeszcze. Mam znacznika script. I wtedy zadzwonić document.getElementById ("Rejestracja"). I przechowywać tę wartość w formie, zmienny. 

[00:19:04] Więc co ja zrobiłem? Można myśleć o document.getElementById jako Specjalna funkcja JavaScript daje że można dosłownie ręce wskaźnika jednego z węzłów lub prostokąty w tym drzewie. Więc teraz, że to, co nasza zmienna forma w JavaScript jest rzeczywiście wskazuje na. 

[00:19:21] Więc teraz jest inna składnia C. Ale robimy kilka rzeczy tutaj. Jeden, ten jest trochę dziwne patrząc, na pewno w porównaniu do C Ale spójrz na linii 35. Więc po lewej form.onsubmit. Przypomnijmy, że jest onsubmit jak pola w struct. Jeśli uważasz, że zmiennej formy jest po prostu C struct, to może mieć kilka pól. 

[00:19:42] Powrót w dzień, mieliśmy studentów nazwy, Identyfikatory, domy, te rodzaj pola. Wystarczy pomyśleć o onsubmit jak innym polu. Ale to dlatego, że specjalne pole Przeglądarka jest zaprogramowany oczekiwać .onsubmit nie być wartość jak liczba lub ciąg znaków, ale faktycznie być funkcja lub adres funkcji w pamięci komputera. 

[00:20:02] I rzeczywiście, to, co to słowo kluczowe tutaj robi. Mówi to, daj mi nową funkcję. Ale to, co jest jego nazwa będzie, widocznie? 

[00:20:09] Wracając do poniedziałku. Jaka jest nazwa tego Funkcja oparta na składni? Nie, mam na myśli, jest wyraźnie Nazwa associated-- pewno nie nie w tym, co mam zaznaczony tutaj. 

[00:20:21] Ale to jest naprawdę OK. Ta funkcja jest anonimowa, lub Funkcja lambda, jak niektórzy mogą to nazwać. A to po prostu oznacza, to nadal działa. To jest po prostu, nie można nazwać po imieniu. Ale to jest OK. Ponieważ znowu nie było przeglądarki zaprogramowany przez takie firmy jak Google lub Microsoft lub Mozilla lub innych do po prostu wiem, że jeśli dziedzinie .onsubmit wewnątrz elementu formularza wartość, traktować go jako function-- Wskaźnik funkcji, jeśli będzie. I nazywają go, gdy formularz jest składany. 

[00:20:46] Co więc kod powinien być wykonany gdy formularz jest składany? Najwyraźniej wszystko wewnątrz nawias klamrowy. A to tylko stylistyczne. 

[00:20:53] Można to zrobić jak mamy tendencję do zrobienia w CS50. Ale w JavaScript, większość ludzi tendencję do utrzymania go w tym samym wierszu tylko dlatego, że lepiej jest związane z tą funkcją kluczowego. Co teraz robię? 

[00:21:03] Jeśli form.email.value równa równych Pusty ciąg znaków lub nic, tutaj Alarm, gdzie mam zamiar powiedzieć, musisz podać swój adres e-mail, a następnie return false. I to, że zwrot, że fałszywe zapobiega formularz z przedłożeniem. Jednocześnie, jeżeli stosunek hasło puste, będę krzyczeć na użytkownika i powiedzieć, musisz podać hasło. 

[00:21:21] Tymczasem są coraz rzeczy trochę hodowcy tutaj. Jeśli nie form.password.value równa form.confirmation.value, inne pole, krzyczeć na że hasła użytkowników nie odpowiadają jak oni nie chwilą. I wtedy ten jeden jest trochę bardziej sexy, bo Wiem, że wiedział, że koncepcyjnie Nazwa jest zaznaczone pole wyboru jest. 

[00:21:40] Więc może po prostu użyć okrzyk punkt powiedzieć, jeśli kontrola nie jest checked-- to Boolean wartość true lub false-- Będę krzyczeć na użytkownika z tego powodu. W przeciwnym razie, jeśli mamy przez wszystkie z tych warunkach niech po prostu wrócić prawdziwe. Niech Formularz należy przedłożyć. I będzie to wtedy stało. 

[00:21:56] Miejmy wpisać szkarłat. Niech sprawdzić na okno, kliknij przycisk Zarejestruj. A teraz przejść do miejsca przeznaczenia. Teraz, nie istnieje żadna baza danych. Nie ma nic ciekawego w register.php. Potrzebne mi coś rzeczywiście rozmawiać. Więc pozwól mi zatrzymać, tutaj. Wszelkie pytania na temat tego, co właśnie zrobił lub co niektórzy z tej nowej składni jest? OK, tak? 

[00:22:17] Publiczność: Więc każdy pole jest automatycznie Boolean. Nie musisz deklarować to tak. 

[00:22:21] David J. MALAN: Poprawny. Każde pole, które jest wysyłane do Ciebie z Formularz HTML do kodu JavaScript będą traktowane tak, jak Boolean value-- prawdziwe lub fałszywe. To dobre pytanie. Podczas gdy inne wartości, z Oczywiście, był tekst, smyczki AKA. 

[00:22:36] W porządku, więc niech mnie przewinąć kawałek dalej. Jaki był cały sens tego? Wystarczy być jasne. Jak już wiemy, nawet z Pset7 a nawet z zeszłotygodniowym wykładzie przykłady, które możemy oczywiście sprawdzić $ _GET $ _POST Czy użytkownik dać nam pusta wartość. Pamiętaj pustą funkcję w PHP. 

[00:22:54] Tak po prostu, aby być jasne, co jest jeden z powodów, moglibyśmy również chce zrobić to sprawdzanie błędów Wewnątrz przeglądarki? Jaka jest motywacja tutaj? Tak. 

[00:23:06] Publiczność: Szybciej, a ty nie wysyłać bezużytecznych danych do serwera. David J. MALAN: Dobra. Jest szybszy. Nie wysyłać bezużyteczne dane do serwera. 

[00:23:12] Więc wrócisz więcej natychmiastowa reakcja. I ogólnie, użytkownik doświadczenie jest lepiej. Pomyśl o alternatywę. 

[00:23:17] Jeśli dla Gmail-- i był przypadek wiele lat temu. Załóżmy, że masz nową wiadomość w Gmailu konto, ale tylko w ten sposób przez Można zobaczyć, że ma, na przykład, przeładowania całej strony. Albo przypuśćmy, że klikniesz na Link do czytania wiadomości e-mail. 

[00:23:29] Wszystko musi przeładować tak które można zobaczyć e-mail. Lub Facebook-- otrzymasz wiadomość czatu. Nie widać go, dopóki nie przeładować strona lub kliknij jakiś link. 

[00:23:36] Jak byłoby to strasznie irytujące doświadczenie użytkownika. I to jest, jak to było, wyraźnie, z powrotem, kiedy wpadłem na UC i był znacznie mniej internetowej dynamiczne i JavaScript nie był tak spopularyzowany jak jest teraz. I rzeczy są coraz dużo bardziej dynamiczny i bardziej po stronie klienta w tym sensie. 

[00:23:49] Ale jest tu haczyk, a jest to rodzaj irytujące Gotcha. Tylko dlatego, że dodasz stronie klienta Wykrywanie jak to nie znaczy, można lub należy zrezygnować Wykrywanie po stronie serwera. Można zasadniczo Chcesz umieścić Sprawdzanie błędów w obu miejscach. Bo to, co było jednym lekcji nauczył z artykułu czytałem jakieś fragmenty od tej głupiej CMS system-- Content Management System-- że był wdrażania swojego systemu uwierzytelniania, jego pośrednictwem jakiego mechanizmu logowania? JavaScript. 

[00:24:20] Publiczność: JavaScript. David J. MALAN: JavaScript, dokładnie, tak? Został za pomocą JavaScript. I dosłownie, macie grał trochę prawdopodobnie z Chrome Inspektora. I czy mogę go znaleźć, sprawdź element. 

[00:24:30] Pozwól mi przejść do zrobienia wszystkie opcje Chrome. I to jest, jak łatwo jest, aby wyłączyć JavaScript w przeglądarce. Sprawdź, nie więcej JavaScript. 

[00:24:38] Więc w sprawiedliwości, wiele w internecie w dzisiejszych czasach jest po prostu się przełamać, bo Gmail i inne sites-- Facebook-- założyć, że JavaScript jest włączona. Ale jeśli robisz coś głupiego jak tylko walidacji wejścia użytkowników i sprawdzić ją, Błędy po stronie klienta, przeciwnik może łatwo to zrobić. A potem jeszcze mądrzejszy Przeciwnik jak wy teraz może użyć usługi Telnet lub zawijanie lub po prostu komendy wiersza poleceń i faktycznie wysyłania wiadomości do serwera że podobny błąd nie są sprawdzane. 

[00:25:05] Więc to jest więcej Decyzja interfejs użytkownika niż jest rzeczywista techniczne improvement-- realizacji strona coś klient tak. Więc teraz szybki rzut oka, ale potem Ja odroczyć na spacer on-line dzięki za to. W postaci dwóch, faktycznie przeszedł i oczyścić kod trochę. Ale pozwól mi odroczyć do jednego z filmów my będziemy prawdopodobnie osadzenia w Pset8 że tylko pokazuje podobną składnię przy użyciu biblioteki nazwie jQuery, co jest bardzo, super popularna biblioteka w JavaScript że szczerze, większość ludzi wystarczy użyć tych dni a nawet mylić jako istota JavaScript sama. 

[00:25:37] I wykazuje tendencję do obejmowania niektóre znaki dolara dokumentu i słowa kluczowe, takie jak w nawiasach tutaj. Ale znowu, chciałbym odroczyć do niektóre wolniej samouczki online zamiast się związany tylko w składni. Przejdźmy do coś trochę chłodniej w zakresie zastosowań tego. 

[00:25:50] Tak w szczególności, pozwól mi odejść do przodu i otworzyć to tutaj. Chodź. Nie idziemy. 

[00:25:59] Pozwól mi otworzyć ten obraz tutaj. Niepotrzebnie skomplikowane szuka, ale to opisuje techniki zwanej AJAX-- Asynchroniczny JavaScript i XML, w których X XML jest rzeczywiście Naprawdę już nie używane. To coś ma tendencję do korzystania inny nazwie JSON. 

[00:26:13] Ale tutaj jest jak coś Google Maps lub Google Earth działa. Spróbujmy tego w locie, faktycznie. Pozwólcie mi iść do przodu i otworzyć się na przeglądarce Chrome. 

[00:26:21] I pozwól mi iść do, powiedzieć, maps.google.com. I rzeczywiście, jeśli jesteś stary Wystarczy pamiętać, co, jak, MapQuest było jak z powrotem w dzień, a może nadal działać w ten sposób. Kiedy używane do wyszukiwania something-- 33 Oxford Street, Cambridge, Mass, zróbmy this-- was faktycznie, jeśli Ciebie chciał pan się i w dół, w lewo iw prawo, chcesz wyglądać duża strzałka na górze, i to Chcesz pokazać innym Rama mapie tutaj. A może kliknąć w lewo i ci pójdzie tutaj, lub kolejne kliknięcie i chcesz przejść tutaj. Jednak zamiast nich dni, mamy oczywiście tylko przyjąć, że możemy iść dość szybko wokół Cambridge po prostu klikając i przeciągając. Ale zauważysz jakieś usterki. 

[00:26:59] Jeśli mogę to zrobić na tyle szybko, co wydaje się dziać jak przeciągnąć zbyt szybko do komputera, aby nadążyć? Co widzisz? Tak. 

[00:27:07] Publiczność: Piksele nie odświeżyć. David J. MALAN: pikseli nie odświeżyć. Jest actually-- i was widział to, rzeczywiście, podczas oglądania online i pauza to czy rzeczywiście spowalnia rzeczy w dół dla once-- zobaczysz, że istnieją płytki, kwadraty lub prostokąty, które brakuje mapie aż Ułamek sekundy później, więcej danych, więcej zdjęć faktycznie pojawi się na ekranie. I rzeczywiście, jeśli mamy to zrobić, patrząc się Chrome's-- powiedzmy, Chrome-- Zobaczmy. Nie możemy tego zrobić. 

[00:27:31] Oh, sorry. Otwórzmy się maps.google.com. Pozwólcie, że jeszcze raz zrobić okno większe. 

[00:27:36] Wróć do 33 Oxford Street. Co było na stronie internetowej Byłem niedawno? Miałem to, jak, prywatny rant do sobie, że ja bym to natychmiastowy komunikat każdy przyjaciel kto był online którzy chcieli go słuchać. Jest jakaś strona internetowa. Myślę, że to Comcast-- tak bardzo duży amerykański ISP. Można, gdy logując się do nowego kabla Usługa modem lub usługi telewizji kablowej, mają postać bardzo przystępnej w którym poprosi o podanie adresu. I mają ten niesamowity funkcja o nazwie auto kompletne, jak Google, które zaczyna się zapełniać w odpowiedzi na pytanie. 

[00:28:04] Problemem jest to, że auto kompletne zrobić na pierwszych rzeczy, które podczas pisania. Więc jeśli zaczniesz pisać w 33 go, pokaże, dosłownie każdy dom w Ameryce, który rozpoczyna o numerze 33 przed przejściem do spodziewam się, aby wpisać więcej. Więc jeśli wpiszesz 33 Oxford, to pokazuje każdą ulicę w Ameryce, że ma 33 Oxford w jego nazwa, niezależnie od miasta że jesteś w. 

[00:28:25] A następnie kontynuować pisanie. I wreszcie, to zdaje sobie sprawę, że nie są Oferta usług w Twoim domu w Cambridge lub coś w tym stylu. Ale chodzi o to, jest najbardziej asinine realizacja auto zakończyć kiedykolwiek. 

[00:28:34] A ja po prostu się wyłącza na tej stycznej ponownie. Ale istnieją sposoby wykorzystać JavaScript i złe strony. I to niekoniecznie najlepszy. 

[00:28:40] Ale chodzi tu, przed tym tyrady, było otwarcie narzędzia tutaj i otwarcie narzędzia programistyczne, jak już wcześniej zachęcał, i oglądać Network Zakładka jak klikam naprawdę szybko. I zauważyć całą masę z uzyskać prośby stało. Wszystko to stało się odkąd zaciągnął. 

[00:28:57] I najprawdopodobniej rzeczywiście Wiele z tych wierszy teraz to obraz JPEG ukośnik Typy MIME lub typy zawartości. To dlatego, że to, co robi chrom za każdym razem kliknij i przeciągnij, kliknij i przeciągnąć, jest to wiedząc, oh, trzeba iść poprosić Google o płytki na mapie, która jest tutaj, szybko pobrać za pomocą protokołu HTTP, a następnie dodać go do tzw DOM do przeglądarek internetowych w drzewie pamięci reprezentacji tak, że użytkownik, mnie, widzi, że zaktualizowany płytki. A to z powodu technika zwana AJAX. Powrót w dzień, to naprawdę był przypadek, że jeśli chciał zmienić to, co jest na ekranie, trzeba by kliknąć w górę, w dół, w lewo, prawo. A potem nowa strona otworzy. Ale te dni, wszystko jest bardziej dynamiczna. Dzieje się to w sposób my, ludzie, by nadzieję, że to rzeczywiście będzie interaktywnie. I osiąga ten cel poprzez sposób w technice AJAX, który jest chyba najbardziej wyjaśnione na przykładzie. Po pierwsze, pozwól mi iść do przodu i otworzyć plik w nazwie quote.php dzisiejszy kod dystrybucji. 

[00:29:53] I pozwól mi zrobić symbol-- okrzyki. Pozwól mi zrobić, symbol = GOOG na tylko jakiś czas. Albo rzeczywiście, zróbmy jeden z Pset darmo. Enter. 

[00:30:05] A teraz zauważyć, co wrócę. Więc to jest naprawdę Krótko mówiąc, że plik PHP napisał, że po prostu pożycza kod z funkcji wyszukiwania do Pset7 w i wypluwa pomocą tego nawias klamrowy i cytaty i notacja okrężnicy, najwyraźniej, bieżący stan cenę za firmy, które przechodzą przez GET. Więc to jest inna od większości tego, co mamy odbywa się w tym ogłoszeniu jestem dosłownie wypluwa co wygląda jak kod JavaScript. 

[00:30:27] W rzeczywistości, jest to obiekt JavaScript. W rzeczywistości, po prostu być bardziej jasne, Obiekt JavaScript Notation-- JSON-- jest tylko fantazyjny sposób na powiedzenie, że Ciebie może reprezentować wiele danych w JavaScript jak można w PHP za pomocą pary wartość klucza. Więc gdybym chciał zadeklarować zmienne w JavaScript do reprezentuje Zamyla, dla instance-- struct dla Zamyla-- a my go nazywamy student, ta zmienna. Jej ID jest, dom jest Winthrop, a nazwa jest Zamyla. 

[00:30:53] Ale mogę też mieć tablicę obiektów. Więc jeśli naprawdę chce mieć tablicy w JavaScript zawierający wiele takich obiektów, w tym Czas reprezentujących pracowników, Może mam te trzy fragmenty kodu Powrót z powrotem do tyłu na nich trzech byłych pracowników. Więc składnia, całkiem podobny do both-- do PHP. Ale jest to szczególnie JavaScript. To zapis obiektu. Więc co to jest przydatna? 

[00:31:17] Jeśli piszę kod, który wypluwa JSON-- Obiekt JavaScript Notation-- rzeczy, które Wygląda na to, że to czy rzeczy wygląda struktura Zamyla, w Mogę właściwie to wykorzystać w programach piszę. Pozwólcie mi iść do ajax0.html. I to too-- niewiele myśli na estetyce. Ale obserwować co się dzieje. 

[00:31:34] Pozwólcie mi iść do przodu i wpisz darmo tutaj. Kliknij uzyskać wycenę. I zauważyć URL nie zmienił. Ale ja się pop-up z pozornie dzisiejsza grosza cena akcji z 0,15 dolarów. Tak więc nie wszystko, co złe. Ale różnica jest taka, że ​​w jakiś sposób, dane wrócił do mnie bezpośrednio. Ale zróbmy krok w kierunku coś bardziej zaznajomieni. W jednej z wersji tego, pozwól mi wpisz darmo ponownie kliknij Pobierz ofertę, i now-- och, to było faktycznie wersja jQuery. Więc me-- ja nie do przodu dość wystarczająco daleko. Pozwól mi przejść do wersji dwa, czyli tam, gdzie chciałem. Zauważ, co zrobiłem tutaj. Mam internetowej page-- się super, prosta wersja dowolnej stronie internetowej dziś można korzystać z pola tekstowego tutaj za darmo, a potem najwyraźniej tylko tekst. 

[00:32:14] To nie jest formularz tutaj, najwyraźniej. Ale jeśli kliknę się cytat, zauważyć moją stronę internetową ma się zmienić tak, jakbym właśnie dostałem nową wiadomość czatu albo tak, jakby po prostu przeniósł się mapy i potrzebne, aby uzyskać więcej danych dodany dynamicznie do strony internetowej bez zmiany adresu URL i użytkownika doświadczenie coraz przerwany. Rzeczywiście, jestem nadal na dokładnie to samo place-- ajax2.html. 

[00:32:35] Więc spójrzmy tylko na tym przykładzie i zobaczyć, jak to się dzieje. Pozwólcie mi iść do ajax2.html. I zauważyć, pierwsza postać. 

[00:32:44] Tu, jestem toczenia wyłączyć auto kompletne. Czasami robi się irytujące, gdy przeglądarka stara się pokazać, Cała historia. Więc można to zrobić w HTML przez tylko, że auto zakończyć się. 

[00:32:53] Dałem ten tekst ostrości symbol-- raczej identyfikator symbolu. A teraz, jest to ciekawa opcja. Nie rozmawialiśmy o rozpiętości, ale można o tym myśleć jak znacznik ust lub div tagu. To, co się nazywa w linii elementu, który oznacza, że ​​nie będzie się paragraf złamać powyżej i poniżej niego. To właśnie dzieje się na pobyt w-line bez uderzając równowartość wejść. Więc dałem ten kawałek HTML zostać określony niepowtarzalny identyfikator że arbitralnie nazywa cena. I mam przycisk Wyślij. 

[00:33:21] Bo teraz się here-- i to jest rzeczywiście bardzo niesamowite, jak mało kod możesz napisać do zrobienia stosunkowo czysty things-- zauważyć, co zrobiłem tutaj, jeśli I przejdź do głowy tej strony. Podaję pierwszy w moja głowa tagu script że rzeczywiście odwołuje Plik JavaScript gdzie indziej. To z organizacji że pisze jQuery, i to jest po prostu dając ostatni wersja ich biblioteki jQuery. 

[00:33:42] Więc to jest trochę jak ostra to w C lub wymagają w PHP. Za pomocą znacznika script z atrybutem source. Ale teraz jest mój kod będzie się w tutaj. 

[00:33:52] Zauważ, mam funkcję o nazwie wykresy. I wygląda na trochę tajemnicze na pierwszy rzut oka. Ale niech drażnić to od siebie. Daj mi zmienną URL. Przypisać go dosłownie ten ciąg. Tak więc, apostrofów, w cudzysłowy JavaScript po prostu daje mi łańcuch. Co oraz zrobić? Łączenie. 

[00:34:08] Tak to już jest składnia jQuery który zajmuje trochę przyzwyczaić. Ale to po prostu oznacza, idź mi DOM węzeł, którego symbolem jest unikalny identyfikator. Hashtag nie oznacza Identyfikator unikalny symbol. 

[00:34:21] Znak dolara w nawiasach oznacza jedynie, zawinąć to w jQuery rodzaj tajnych sosie tak uzyskać dodatkowe funkcje. A potem .val jest najwyraźniej Funkcja lub jak mówimy teraz, Metoda wewnątrz tego węzła że po prostu daje wartość. Tak w skrócie, brzydki i kłopotliwe jak to wygląda na pierwszy rzut oka, to po prostu oznacza się z użytkownikiem wpisany w umieścić go na końcu łańcucha przez złączenie go. To wszystko. 

[00:34:43] Więc teraz, ostatnie trzy linie. Można wycisnąć dużo funkcjonalność z trzech linii. To znak dolara, jak na bok, to tylko pseudonim na specjalne zmiennej globalnej nazywa dosłownie jQuery. 

[00:34:55] Znak dolara wygląda po prostu cool. Więc po prostu rodzaj wspólnoty jQuery z używali go jako ich specjalnym symbolem. To nie znaczy, co to oznacza w PHP. W JavaScript, znak dolara jest tak jak litery alfabetu lub numer zmiennej. 

[00:35:07] Może po prostu trzeba go jak nazwa. Po prostu wygląda świetnie. Więc społeczności przyjęła go jako pseudonimu dla własnej biblioteki o nazwie jQuery. 

[00:35:13] I jest to bardzo popularne. Więc JSON jest dokładnie to. Jest to funkcja, która Ludzie na jQuery napisał że dostaje JSON z server-- JavaScript Object Notation. Z tego, co to będzie adres URL aby uzyskać te informacje? Najwyraźniej z tego adresu tutaj. 

[00:35:27] I co należy zrobić, jak przeglądarka szybko, jak to robi się z powrotem tę odpowiedź? I to jest magia AJAX, tak aby speak-- Asynchronous JavaScript w XML. Trudno zobaczyć z takim Prosty przykład jak mieliśmy tutaj. 

[00:35:41] Ale to było w asynchroniczny poczucie, że mój kod przy wykonywane wysłał wiadomość do serwer idź mi JSON. I stało się bardzo szybko że dostałem odpowiedź. Ale co ciekawe jest to, że linii kodu nie powiesić mój komputer. 

[00:35:55] Nie widzę ikony wirowania. I nie stracić Możliwość przenieść myszy. Moja przeglądarka faktycznie perfekcyjnie. 

[00:36:01] Ponieważ sposób obsługuje JavaScript odpowiedź z serwera jest następujący. Zarejestrować, co można nazwać Funkcja zwrotna, która oznacza po prostu, hej, JavaScript. Po tym, jak serwer reaguje z JSON, zadzwoń tę anonimową funkcję. 

[00:36:18] I proszę, przeszedł do tej funkcji cokolwiek ciąg serwer wypluć jako argument o nazwie dane. Tak więc, w innym słowy, Jestem montażu dynamicznie quote.php URL przekazując w ten Symbol jak wolny lub GOOG lub czymkolwiek innym, Jestem wtedy mówi JavaScript przejdź się, że adres URL. Pamiętaj, że w przeglądarce zamierza powrócić coś że wygląda jak widzieliśmy earlier-- to. 

[00:36:42] A co drugi argument tutaj, aby uzyskać mówi JSON jest wywołać tę funkcję gdy serwer wraca czy to 10 milisekund od teraz lub 10 sekund od teraz. I tak szybko, jak to zrobić, dodać cenę do strony. To tutaj właśnie składnia oznacza, przejdź się węzeł z drzewa, którego unikalny identyfikator jest price-- tej rozpiętości widzieliśmy wcześniej. 

[00:37:01] Ta metoda nazywa HTML po prostu mówi, iść wymienić HTML to nie z data.price. Co data.price? Cóż, przeglądarka, pamiętam, pokazał mi to wraca. Więc to jest dane. 

[00:37:14] A więc jest to trochę tajemnicze zobaczyć przecinków tutaj. Ale w rzeczywistości, pozwól mi to zrobić. Pozwól mi tylko wkleić naprawdę szybko do gedit i pokazać, jak pokazaliśmy Struktura Zamyla za wcześniej. 

[00:37:27] Jaki serwer wysyła z powrotem jest mały obiekt, który wygląda tak. I tak data.price jest po prostu daje mi 0,1515. Tak więc wiele ruchomych części tutaj wszystko na raz. 

[00:37:39] Ale główne dania na wynos jest że mamy tę zdolność do dodatkowego protokołu HTTP wnioski za pomocą JavaScript bez konieczności przeładowania strony. I wtedy rzeczywiście możemy zmienić stronę na bieżąco. I okazuje się, że JavaScript i inne języki Teraz można stosować nie tylko mutować stron internetowych, ale faktycznie napisać oprogramowanie w rzeczywistej komputera nie tylko ograniczone do chrom lub podobne. 

[00:38:00] W rzeczywistości, if-- Colton, prawda jak do nas dołączyć z powrotem tutaj z kodem laboratorium i Chang oraz? Idziemy do przodu, po mówił o Funkcje i wywołania zwrotne anonimowych i tu naprawdę kusić losu z demo z krwawieniem technologia, jeden z urządzenia te Elite ruchu. Teraz, to urządzenie, odwołanie, Jest to małe urządzenie USB oraz that-- to beautiful-- które podłącza się do portu USB. 

[00:38:25] A następnie zapewnia, że ​​wejście w postaci ludzkich gestów poprzez wykrywanie za pomocą wiązek podczerwieni, zasadniczo, ruchy z twojego ramienia. Tak więc, podczas gdy to, co Maria próbowała na wcześniej był muskularny, rzeczywiście czuje, co się zmienia twoja ręka, to jest podczerwień oparte. Tak to wygląda dla ruchów w rodzaj sferze stóp lub tak samego urządzenia. 

[00:38:46] Więc dlaczego nie biorę stab na ten pierwszy? I niech śmiało rzucać można się na narzut. Więc postawmy laptopa Colton jest tutaj. Mamy Andrew telewizora. A co chcesz mi zrobić w pierwszej kolejności? 

[00:39:00] COLTON: Idź przed siebie i po prostu połóż dłonie na tego faceta a zobaczysz jakiś wspaniały blask. 

[00:39:04] David J. MALAN: Bardzo ładny. To wszystko dzieje się w czasie rzeczywistym. OK. Wszystko w porządku, i yep. Tak miło. Dobrze, co jeszcze możemy zrobić? 

[00:39:15] COLTON: Przejdź do następnego ekranu i zobaczyć. 

[00:39:17] David J. MALAN: Wszystko w porządku. 

[00:39:19] COLTON: zabawna gra gdzie masz do roboty. 

[00:39:21] David J. MALAN: Wszystko w porządku, więc to jest fałszywe ręce pokazując mi, co robić. COLTON: Tak więc śmiało i złapał jednego z bloków i umieścić ją na szczycie ciała tego robota. David J. MALAN: Och, nie moja ręka. Och. OK, urocza. Chwileczkę, OK. Nie idziemy. 

[00:39:41] COLTON: Zrobiłem jeden na wypadek. 

[00:39:43] David J. MALAN: OK, będę się tego faceta. Niech to szlag! Kiedy byliśmy uprawiania tego ostatniego noc, wiesz co to przekazane do? 

[00:39:51] Tak. OK. Następny? 

[00:39:55] COLTON: Jasne. 

[00:39:56] David J. MALAN: Dobra, a tam trzeci. Dobrze. COLTON: I w tym jednego, otrzymasz to-- David J. MALAN: Och, Ten jest piękny. COLTON: --yeah, wybrać poza ten kwiat. David J. MALAN: OK. Nie? Przegapić. 

[00:40:14] COLTON: Och, proszę. 

[00:40:15] David J. MALAN: Ach, spójrz na to. Bardzo ładne. Cóż, dlaczego nie "bierzemy z jednego wolontariusza tutaj którzy chcieliby przyjść na górę. Jak się tam w zieleni, to jest? 

[00:40:27] Wszystko w porządku, i niech have-- zamiast robić, że niektórzy z was może znać tę grę here-- przeciąć linę, może? Zobaczmy. Mamy tu okulary? 

[00:40:37] OK. Dziękuję. Jak się nazywasz? 

[00:40:39] Publiczność: Laura. 

[00:40:40] David J. MALAN: Laura? Miło widzieć. Jeśli nie masz nic przeciwko wprowadzenie Google Glass na okulary. To Colton. 

[00:40:46] COLTON: Cześć. Miło Pana poznać. 

[00:40:48] David J. MALAN: OK, chodź dookoła. W porządku, więc co masz zamiar tu zrobić, po zagraniu tego wcześniej, kładzie rękę na Leap Motion tutaj. A teraz twoja strzałka powinna ruszyć. Och, nope. 

[00:40:57] Publiczność: Nie. 

[00:40:58] David J. MALAN: My nie chce jednak zrezygnować. OK, czekaj. Tutaj. Więc zauważyć, jak trzymać palec na coś, mysz zaczyna iść zielony, co jest jak klikniesz. 

[00:41:06] Więc najechaniu na Play. I tylko jeden palec jest w porządku. A teraz kliknij na trochę zielony facet z lewej strony. A teraz trzymaj, aż wypełni się na zielono. Dobra. Teraz, jak, jeden poziom w górę szczycie. 

[00:41:16] Publiczność: Tak, chcemy poziom jeden, tutaj. 

[00:41:20] David J. MALAN: Dobra. OK, więc wszystko co musisz zrobić, to przeciąć linę. Kursor jest biały jeden na dole. 

[00:41:28] Bardzo ładne. W porządku, to o jeszcze trudniej. Tak trzymać palec obok teraz. Dobra. To jedna ciężko. 

[00:41:39] Publiczność: O cholera. OK. Chce iść w ten sposób. O cholera, that-- 

[00:41:44] David J. MALAN: Tak. Celem drugorzędnym jest, aby wszystkie gwiazdy. Dobra, dalej. 

[00:41:53] Zobaczymy, czy można dostać ten trzeci. Dobra. OK, idź tam. 

[00:42:06] Jasne. Och, bardzo ładne. Dobrze. 

[00:42:11] Więc dlaczego nie możemy odroczyć tu dzisiaj? Niech ktoś przyjdzie na górę, kto chce grać. Dzięki tak dużo do Laury wolontariuszem. I zobaczymy w poniedziałek. 

[00:42:18] Publiczność: Prawdopodobnie chcesz je z powrotem. 

[00:42:21] GŁOŚNIK 2: Na następnym CS50--