[MUZYKI] 

DAVID MALAN: To CS50. To jest początek tygodnia dziewięć. I to jest to, co mają była 200 rocznica pana Boole urodziny. Tak to jest, że towarzysze do kogo mamy nawiązywał dość kilka razy na temat korzystania Zmienne logiczne prawdziwe i fałszywe, 1 i 0 i takie. I to był Google'a hołd dla niego dzisiaj. Mógłby zwrócił 200. Więc jeśli chcesz dołącz do nas na CS50 obiad, spójrz na link na stronie internetowej oczywiście za. I takie twarze i przyjaciele jak to czeka tutaj w Cambridge. Twarze jak te czekają na Ciebie w New Haven. I rzeczywiście, Ken New Haven uprzejmie wykonane co nazywa animowany GIF ocalenia tutaj na niedawny lunch-- GIF jest jeszcze inny format pliku graficznego, z którym jesteś familiar--, że wygląda trochę coś takiego. Więc po prostu sekwencja of-- OK. Nikt tutaj w Cambridge śmieje. Ale w New Haven, w tym jest naprawdę zabawne, prawda? W porządku. 

Więc dołącz do nas tam. Tu na Harvardzie, W szczególności, w środę, jeśli jesteś studentem drugiego roku lub studiów even-- lub nawet junior-- myślenie podejmowania przełącznik do komputera nauką, wiedzą, że nie będziesz być sprawiedliwe CS doradztwo to Środa, tuż po klasie o 4:00 po południu w komputerze nauka budynek Maxwell Dworkin. Umieścimy to na kurs na strona jutro, jak dobrze. Pączki, jak mi powiedziano, będą serwowane. 

W porządku. Tak zabawne story-- byłem szturchanie wokół w internecie, i znalazłem kilka starych archiwów mojego byłego stronie. I okazuje out-- wokół tego czas, wydaje się bardzo na czasie od wnoszę, że wybory UC są o biegu ponownie. Więc wpadłem na UC, przegrał sromotnie. A może była to po części, dlaczego. Więc to była moja strona w czasie. Z jakiegoś powodu, myślałem, że to to dobry pomysł, zanim mówić ludziom co moja platforma była i dlaczego powinni głosować na mnie, że mają kliknij, aby wejść, aby dowiedzieć się, że informacje, które z perspektywy czasu jest trochę przerażające. I naprawdę nie wiem, co to było. 

Ale to na pewno nie pomóc w kampanii. Dowiedziałem się również, że starszy rok-- Miałem ten kalendarz Muppet. Muppety były trochę w modzie wtedy. A może nie. Miałem wtedy Muppet kalendarza. A ja myślałem, że to będzie fajne nazwy mój komputer w sieci Uniwersytetu Harvarda frogman.student.harvard.edu. W tym czasie mieliśmy wyjątkowo zidentyfikowania nazwy hostów. I można wybrać trochę próżności Zamiast nazwać własnym nazwiskiem. I poszedłem z Frogman z jakiegoś powodu. 

I wtedy started-- Spędziłem dużo czasu kliknięciu poprzez te linki tego ranka. I to była moja strona o, które obecnie rodzaj wydaje urocze. Ale to też świadczy tylko jak daleko technologia doszła. To znaczy, już w dzień, 486 było coś. Te dni, to jest super, super, bardzo wolno i dobrze mniej niż można mieć w własne kieszenie te dni. Jest więcej tam, że był jeszcze bardziej żenujące. Więc zostawię go na to. Ale to był mój pierwszy wypad do web-- o nie. To nie było. Mój pierwszy prawdziwy wypad do programowania WWW było to miejsce, które po prostu zapomniałem. W pewnym momencie dowiedziałem się, jak aby powtarzające się obrazy tła. I tak uważam, że ten płytki skuteczne, jak hokeista, piłki nożnej, i golf piłka, czy cokolwiek to jest na stronie internetowej Frosh IMS. I to było naprawdę, naprawdę Pierwszy projekt internetowy wziąłem on-- Myślę, że może studentem drugiego roku lat, młodszy rok-- po zażyciu CS50 i CS51, jeden wspólnych zajęciach follow-on. Zauważyłem w poszukiwaniu archiwa że jeden z moich następców i przyjaciele, Lee, trochę zmienił prawa autorskie do siebie. Ale to było naprawdę coś, Mam własne zakłopotanie. Ale w tym czasie, to Była to pierwsza strona, jak powiedziałem kilka tygodni temu, przez które student pierwszego roku mógł zarejestrować stacjonarnych sportów tutaj. I tak okazuje się, że obrazy tła tak, że nie taki dobry pomysł. Ale internetowa była nowa, a wszyscy byliśmy eksperymentować. I to jest to, co ja najwyraźniej nie w tym czasie. W porządku. Więc bez zbędnych ceregieli, możemy przełączyć przekładnie dziś dać, naprawdę, ostatni element, który może się okazać, szczególnie przydatne dla projektów końcowych lecz również, że zacznie aby cały świat szeroki sieci czuję się trochę bardziej zrozumiałe. Rzeczywiście, mamy zamiar przedstawić jeden język programowania nazywa JavaScript, który jest podobny i różni się różne sposoby z języków poznaliśmy już do tej pory. 

Więc C, przypomnijmy, jest to skompilowany język. Musisz uruchomić go przez kompilator. Otrzymasz kod źródłowy do obiektu Kod lub zer i jedynek. A to są zer i jedynek, które CPU, Central Processing Unit, właściwie zrozumieć. PHP, natomiast nie jest skompilowany język. Jest to co? Jest to język interpretowany. Więc jest jakiś program nazywa tłumacza, że musi przeczytać it-- góry do dół, lewo, aby prawy-- i dowiedzieć się, co to wszystko składnia robi i oznacza, czy jest to pętla lub stan lub dowolna inna liczba programów konstruuje. Więc to jest językiem interpretowanym. 

Następnie wprowadziliśmy HTML. I HTML nie jest nawet język programowania. Chcemy to, co nazywamy? Język znaczników, które jest po prostu rodzaj fantazyjny sposób na powiedzenie go nie ma programowania konstrukcje takie jak widzieliśmy nawet z powrotem w dniu Scratch. Nie ma pętli. Nie ma warunków. To naprawdę jest językiem o oznakowanie zapasowych danych i sformatowanie go lub ukształtowania go w pewien sposób. 

CSS, w międzyczasie, podobnie nie język programowania. To jeszcze bardziej estetycznie zorientowany. I to pozwala na sortowanie od dokładnego dostrojenia rzeczy takie jak wielkość czcionki i kolory i miejsca, a to wszystko. Potem mieliśmy 

SQL. Tak jest w istocie SQL programowania język, w pewnym sensie, choć dostosowane specjalnie do baz danych. Ale nawet jeśli tylko możemy przedstawić Państwu wybrać i wstawiania i usuwania i aktualizacji i kilka innych, Okazuje się, można rzeczywiście Napisać funkcje lub procedury, jak są one nazywa, w SQL, które wyglądają i działają zupełnie jak funkcji PHP i C. Więc wiem, że te istnieją. Ale my nawet nie z nimi jak tylko zarysować powierzchnię tutaj. A potem JavaScript, ostatni Nasze języki formalnie. Więc JavaScript, też jest językiem interpretowanym. A tych, którzy znają, zrobić chcesz je rozróżnić niektóre charakterystyczne zarówno C i PHP? Co sprawia, że ​​jest inaczej? 

PUBLICZNOŚCI: To nie jest skompilowany. 

DAVID MALAN: Powiedz jeszcze raz? 

PUBLICZNOŚCI: To nie jest skompilowany. 

DAVID MALAN: To nie jest skompilowany. Dlatego też jest interpretowane. Więc to nie jest skompilowany. Ale to sprawia, że ​​jest trochę jak PHP. Ale to wciąż różni się od PHP w jakiś wyraźny sposób co najmniej w sposób będziemy go używać. Tak? 

PUBLICZNOŚCI: To działa po stronie klienta. 

DAVID MALAN: Biegnie po stronie klienta, zazwyczaj. To rzeczywiście wyróżniającą charakterystyczne dla nas teraz. C był server-side na znaczeniu , że zrobiliśmy wszystko, co w CS50 IDE. PHP zatem dotąd po stronie serwera, o ile Jak się też dostaje interpreted-- nie skompilowane, ale interpreted-- wewnątrz CS50 IDE, co oczywiście jest tylko serwer lub serwery w chmurze. 

Ale JavaScript, nawet Choć idziesz zacząć pisać go, powiedzmy, pset osiem, a może ostateczna projects-- jesteś będzie wyprostować go w CS50 IDE i zapisać go w plikach w CS50 CS50 IDE, IDE i, z kolei, serwery w chmurze na którym jest gospodarzem, nie będą interpretacji lub wykonania kodu. Przeciwnie, to będzie do wysłania niezmienionej formie aż do przeglądarki. I to wtedy będzie IE lub Google Chrome lub Firefox lub Safari lub cokolwiek to właściwie interpretuje to, od góry do dołu, od lewej do prawej. Tak więc kluczowym rozróżnienie charakterystyczne dla dzisiaj jest to, że JavaScript jest po stronie klienta i PHP, na przykład został po stronie serwera. Teraz to ma ciekawe implikacje za, jak, własności intelektualnej i kto może rzeczywiście zobaczyć kod. I rzeczywiście, można przejść w internecie i zobaczyć najbardziej każdy kod, który ktoś ma napisany w JavaScript. Czasami jest to czytelne, Czasami jest to ukrywane. Ale o tym w odpowiednim czasie. 

Więc JavaScript, tyle ładnie, jest bardzo podobna, składniowo, aby C. I podobnie jak PHP, nie ma główną funkcją. Jeśli chcesz zacząć pisać Kod JavaScript w przeglądarce, jak zobaczysz dziś, po prostu zacząć pisać. Ale to, zobaczysz, szczególnie przydatne w kontekście przeglądarek internetowych. Jednak moja mała disclaimer-- zwykle earlier-- to znaczy, że można bardziej Zastosowanie dziś JavaScript po stronie serwera za pomocą wymyślnego ramy nazwie node.js że niektóre z własnych aplikacji CS50 jest są napisane. Sprawdź, 50 nie używa Node.js. Ale mamy zamiar skupić się na JavaScript po stronie klienta na na zewnątrz. 

Więc tutaj jest zbiorem warunków w PHP. Niestety, in-- rzeczywiście, że oświadczenie, też jest poprawna. Tutaj jest również zestaw Warunki w JavaScript. Składniowo, jest identyczny C oraz PHP. Wyrażenia pana Boole są, podobnie, składniowo identyczne zarówno C i PHP. Mamy również przełączniki w JavaScript, które wyglądają identycznie. Mamy dla pętli, które są skonstruowane identycznie, while, robić podczas pętli. 

Ten jest trochę inny. PHP miał dla każdego konstruktu że może być w użyciu lub będzie używać w pset siedem, być może. JavaScript ma tę specjalną wersję dla których można dosłownie powiedzieć coś jak dla zmiennej klucza w obiekcie, który Jest to bardzo zwięzły sposób powiedzenia, jeśli Mam object-- a my mówić o nich ponownie w moment-- i chcę iteracyjne nad wszystkim z głównych par wartości wewnątrz, Nie mam dowiedzieć się, w jaki sposób numerycznie indeksu im zero, jeden dwa Trzy. 

Można dosłownie powiedzieć. I na każdej iteracji, JavaScript dla mnie będzie zaktualizować klucz zmiennej jako pierwszy klucz, a następny klucz a następny klucz, a następny klucz i tak dalej. I mogę się w ich wartości, traktując obiekt w JavaScript, jak zobaczymy, jakby to jest asocjacyjna w PHP. Rzeczywiście, jeśli wreszcie owinięte swoje nic wokół tego, co tablica asocjacyjna jest w PHP, możesz myśleć o tym teraz, jak identyczne do obiektu w JavaScript. Ale to trochę uproszczeniem. 

Tablice wyglądają, tyle ładnie, identyczne do PHP wyjątkiem jednego znaku. Jest jedna rzecz, brakuje tutaj które widzieliśmy w zeszłym tygodniu z PHP. Co się pominięty? Tak? Nie znak dolara. Więc jesteśmy z powrotem do bardziej normalny świat, w którym Nie mają zmienne znaki dolara. Ale robisz poprzedzić je z var, zwykle. I var oznacza zmienną. I podobnie jak PHP jest luźno typed-- której istnieją rodzaje, są numery i smyczki i pływaki i tak forth-- JavaScript ma podobnie typy. Ale to luźno wpisane, że my, programiści nie trzeba ich podawać. Musimy być świadomi, że istnieje wiele różnych typów. 

Zmienne, meanwhile-- oto jak możemy zadeklarować "hello, world" jako ciąg znaków. Zauważ, że to identyczne PHP, ale nie znak dolara. I to jest coś, co będzie zaczniesz widzieć więcej dzisiaj, w której mamy obiekt z kluczy i wartości. A jeśli chcesz spróbować wywnioskować z ostatniej week-- składnia jest nieco inna. Ale trochę rozsądku check-- ile Klawisze ma ten obiekt wydaje się mieć? Widzę cztery. Widzę dwa. 

Więc to rzeczywiście dwa. Tak więc jest to zbiór dwóch par klucz-wartość. Kluczem jest symbolem, którego wartość jest FB. Kluczem jest cena, której wartość wynosi 101,53. To są dwie pary klucz-wartość. I pamiętaj, PHP-- i to jest kolejny właśnie rodzaj składniowej różnicy. To nie wszystko, intelektualnie ciekawa. PHP może napisać to samo rzecz jak follows-- środki, równa. I zmienić je na nawiasach kwadratowych. A potem zmienić na Słowo w cudzysłowach, "cena". I wtedy nie używać dwukropka. Co mogę użyć w zeszłym tygodniu? Tak, znak równości strzałka notacji ostry. 

A potem zrobił to samo tutaj. Tak samo tutaj. I to wszystko. Więc to jest w porządku, jeśli nie ma naprawdę dotarło do pamięci tylko ale dlatego, że naprawdę intelektualnie nieciekawe. To różnice tylko składniowych. Ale pomysły są dokładnie takie same. Wewnątrz tej zmiennej cytat w JavaScript Jest to zbiór par klucz-wartość, jedna z nich to symbol, z których jest cena. I mogę dostać w tych wartości o następującej składni. Podobnie jak w PHP, mogłem zrobić coś like-- pozwól mi zrobić to pole trochę większe. Podobnie jak w PHP, mogłem aby this-- oh, do cholery. Chodź. 

Podobnie jak w PHP-- OK, będziemy po prostu korzystać z notatek prezentera. Podobnie jak w PHP, mogę zrobić $ $ cytat [cytat "symbol"], i to będzie mnie wartość "symbol". W JavaScript, to będzie identyczne, w którym można po prostu to zrobić. Jedyną rzeczą, która jest Brakuje znak dolara. 

Więc tyle ładnie, a potem, nie nie aż tak dużo nowa składnia. Więc co dziś skupimy się na, naprawdę, jest niektóre z pomysłów i wniosków. I pierwsze takie aplikacja, która może widziałem jeśli zanurkował pset siedem już jest składnia. Tak więc w pset siedem, jeśli już widział i nie widziałem go jeszcze, wiem, że nie jest to plik, który dajemy zadzwoniłeś config.json-- JavaScript Object Notation. Czemu? Chcieliśmy, aby móc zapewnić Państwu szablon z niektórych par klucz-wartość. Chcieliśmy być w stanie podać listę przyjmującego, nazwę serwera. Chcieliśmy dać ci zastępczym dla swojej nazwy użytkownika i symbol zastępczy hasła. Jeśli nie widzisz Ten jednak, nie martw się. Więcej na ten temat w pset siedem [? Spec. ?] I wtedy, Oczywiście, chcemy was wypełnić do-DOS ponieważ podczas logowania CS50 IDE, każdy z was mieć własną nazwę użytkownika i hasło. 

Więc może używaliśmy pół tuzina lub więcej różnych formatów plików. Mogliśmy używany plik .txt. Możemy używany plik CSV. Mogliśmy stosuje się Plik INI, plik XML, cała masa więcej akronimy, że może nie kiedykolwiek słyszałem. To trochę arbitralne na koniec dnia. Ale bardzo popularne w dzisiejszych czasach jest tekst Format nazywa obiektu JSON-- JavaScript Notation--, że wygląda to tak. To trochę tajemnicze, ale zauważ wzory. Zaczynasz z otwartym kręcone nawiasów, a kończy się tak samo. Wewnątrz, że jest coś. Jest parę klucz-wartość. Więc jest to obiekt, który jestem patrząc na ekranie tutaj który ma jeden przycisk, który ma jedną wartość. I właśnie wnioskowanie oparte na poprzedni wzór, co jest kluczem tutaj? Bazy danych, co do lewy okrężnicy. 

Teraz wartość dzieje się a wiele linii tym razem. Ale wartość zaczyna się od kręconych zaprzeć się i kończy w nawias klamrowy. Więc co proponujesz jest Typ wartości bazie? Słownik, lub po prostu więcej zwięźle przedmiot. Dobrze? Jest to rodzaj struktury danych, które Można stosować inne struktury w sobie. Więc jeśli ta cała sprawa jesteśmy Wywołanie object-- i obiekt to tylko kilka z kluczowych wartości pairs-- wartość samej bazy danych jest obiektem. Wartość bazy danych ma całą masę par wartości podstawowych, z których pierwszy jest gospodarzem, a następnie wymienić, a następnie nazwa użytkownika, a hasło każdy z których wartości, w międzyczasie, to po prostu nudny ciąg w cudzysłów. 

Więc nawet jeśli nie jest to Super jasne jeszcze, wiem, że to jest po prostu standardowe, dość nudny sposób przechowywania danych w formacie standardowym. Ale typowych błędów You może zrobić, nawet w pset siedmiu, są małe głupie rzeczy, jak gdyby Ciebie przypadkowo pominąć przecinek tam. To będzie skutkować w pliku nie musi być czytelny. Jeśli przypadkowo pominąć rzeczy jak cytaty, to nie będzie czytelny. Więc jest to dość nitpicky format pliku, ale to jest taki, który jest bardzo powszechne. A my się z niego korzystać, nawet jeśli nie używać w przeciwnym wypadku kod JavaScript, w pset siedem. 

W porządku. Więc pamiętam to zdjęcie. Rozmawialiśmy o tym, w formacie HTML, które kod może wyglądać tak. To HyperText Markup Language [Niesłyszalne] tylko dla "Witaj, świecie". Ale potem zaproponowała Jakiś czas temu, że czy to pomaga, możesz zacząć myśleć o tym już jako drzewo. W rzeczywistości, wgłębienie, które używać tylko ze względu na czytelność w lub ze względu na styl w Po lewej stronie rodzaj być tłumaczone na tym drzewie, gdzie cię mają jakiś specjalny węzeł główny, że będziesz ogólnie nazywa się dokument, poniżej której Jest to element główny lub tag HTML, HTML, który następnie ma dwa dzieci, głowa i ciało. 

A potem z kolei szef ma tytuł. I tytuł ma wartość tekstową. I ciało podobnie ma wartość tekstową. Więc jeśli nie masz nic powiedzenie że owszem, można skorzystać z HTML i narysować jak tego, po prawej stronie Jest to fajny model psychicznego, bo teraz że mamy JavaScript do programowania, Język, który przeglądarki mogą wykonać i zinterpretować dla Ciebie, okazuje się, że to, co mamy zamiar zrobić w kodzie jest zacząć manipulować tym Struktura drzewa w pamięci. Nie mamy budować drzewo w pamięci. Nie musimy zrobić coś w rodzaju Struktura danych pset pięć stylu złożoność. Przeglądarka, ładnie tyle, na interpretacji HTML góry do dołu, lewo lub w prawo, jest dosłownie będzie przekazać nam równowartość wskaźnika do tego całego drzewa za darmo. To nie wszystkie ciężkiej pracy. To właśnie Mozilla i Apple i inni zrobili dla nas. 

A z JavaScript będziemy być w stanie kontrolować i zmieniać i robić Interesujące rzeczy do to drzewo, zwie lub jako DOM Document Object Model. Jakie rzeczy? Cóż, okazuje się, że w JavaScript, nie ta lista prania zdarzenia, które mogą mieć miejsce. I tak naprawdę nie używane, które Słowo od tygodnia zero i pset zero, gdy rozmawialiśmy o Scratch. Większość z was zapewne nie używać zdarzenie w projekcie Scratch. Ale możesz sobie przypomnieć proste Marco Polo Przykładem, gdzie mieliśmy dwa duchy, jeden z nich powiedział Marco. Drugi z nich, a następnie, po słuchanie i wysłuchaniu tego wydarzenia, powiedział, Polo. Jeśli nie, to nie krępuj się oglądaj się, że daleko wstecz. 

Ale to jest po prostu powiedzieć, i można rodzaju wywnioskować z nazwy tych rzeczy, JavaScript, okazuje się, ma dać nam drogę do słuchania dla myszy spada lub mysz idzie w górę klawisz lub zejście lub kluczem idzie w górę lub w onsubmit onSelect lub onresizing coś. Innymi słowy, każde działanie fizyczne że człowiek może mieć w przeglądarce co robisz na co dzień, można napisać kod, który słucha tych wydarzeń a potem robi coś odpowiedniego. 

Na przykład, jeśli używasz Google Maps, co się stanie, jeśli klikniesz i ruch mysz, zwykle? Jeśli kliknąć i przeciągnąć? Tak? Dokładnie. Mapa zaczyna się poruszać. Możesz więc jakby co to tu, co jest tam. A w jaki sposób Google wdrożenia, które? Cóż, zapewne, że są za pomocą kilku takich zdarzenia słuchaczy, jeden, który mówi, słuchać na myszy down-- więc gdy użytkownik fizycznie popycha jego gładzik lub jego myszy na dół. A następnie szukamy coś w ruchu lub inne wydarzenie, które pozwala nam uchwycić opór. A w rzeczywistości, drag jest podobnie w tym dot dot dot listę możliwych opcji. 

Więc to będzie potężny sposób rozpoczęcia odpowiedzi użytkownikowi jeszcze zanim on rzeczywiście kliknięć coś wyraźne jak złożyć. Ale mamy zamiar wprowadzić kilka wątków się tam dostać. Przejście Ale najpierw niech do pewnego rzeczywistego kodu. Więc mam zamiar iść do przodu i otworzyć dom-0, który jest bardzo prosty przykład tutaj, że jeśli powiększyć prostu ma to wejście tu na mnie. I mam zamiar iść do przodu i wpisz "Dawid" w moim imieniu i kliknij przycisk Prześlij. 

A potem, choć rodzaj tanio, I mam ten wiersz, które pojawia się, że mówi: "Witaj, David!" Jest to więc rodzaj jak nasze "hello, world" że zrobiliśmy jakiś czas temu w C i nawet w PHP, ponieważ mam dynamicznie wyprowadzać moje imię. Mogę zrobić nazwę czyjejś tutaj. Może po prostu zmienić na, jak Hannah, kliknij przycisk Prześlij. I rzeczywiście, małe zmiany pop-up. 

Teraz, pop-upy są jednym z większość maltretowane cechy sieci. I rzeczywiście, już w jednodniowe okienek wyskakujących weszła w modzie, bo Ciebie pójdzie do jakiejś website-- być może wątpliwa place-- które nagle rozpocząć przyprawiając ekranu z całym gronem pop-upy. I tak, ta zdolność do pop-up Okna przed użytkownikiem nie było szczególnie dobrze przyjęty przez ludzkość. Więc dlatego widzisz tego uniknąć rzeczy, która po prostu sprawia, że ​​cała ta sprawa brzydko. Więc będziemy potrzebować lepszy sposób, aby skłonić użytkownika. Ale teraz, że wydaje się działać. Więc po prostu intuicyjnie, co wydaje się być tutaj dzieje? Idę dalej i kliknij przycisk Prześlij, a wtedy coś się dzieje, wyraźnie. Ale to, co się dzieje, że nie stało w zeszłym tygodniu, za każdym razem, kliknąłem Zatwierdź? Co się nie stało na ekranie? Przepraszam? Odśwież. Adres URL nie zmienia w ogóle. Powiedziałem to był dom-0, a ja jestem jeszcze w DOM-0. Normalnie byśmy się zmienić na inny Adres URL, jak register.php lub podobne. 

Ale nawet kiedy zwolnić to coś, klikając przycisk OK, zauważyć, że adres URL pozostaje całkowicie umieścić. I rzeczywiście, jeśli jestem trochę sceptyczni, pozwól mi otworzyć Chrome. Pozwól mi otworzyć zakładkę Network. I zauważyć, że to w tej chwili puste. Pozwólcie mi iść do przodu i ponownie Maria. Nie ma ruchu w sieci w ogóle. Więc nie ma HTTP. 

Więc rzeczywiście, jeśli spojrzeć na kodzie źródłowym dla this-- pozwól mi zamknąć to okno i przejść do widoku Source. Ciekawa. Wygląda na to, że jakiś nowe tagi, wśród nich skrypt. Warto więc spojrzeć w CS50 IDE właśnie wysłałem do użytkownika. 

Więc tutaj jest-- niech skupić się tylko na HTML. Oto dolna połowa Dom-0.html. I zauważyć, że ma tytuł, tag głowy, tag ciała, tag formularza. Ale to, co wyskakuje do was jako inna, zwłaszcza jeśli nigdy wcześniej nie napisałeś sam JavaScript. Pozwól mi przejść się trochę w prawo tutaj. Mam wejście, inne wejście do przedstawienia. Mam identyfikator, który jest swego rodzaju nowa. Ale widziałem to z CSS. Co jeszcze jest na pewno nowy? Tak? Miły. 

W porządku. Więc gdzie jest napisane onsubmit, zauważyć, co wydaje się podążać. To jest atrybutem w nomenklaturze HTML. Jego wartość jest tym cudzysłowie tutaj. A to wygląda trochę dziwne na pierwszy rzut oka. To nie jest HTML. To nie jest CSS. Jest to, jak można się domyślać, JavaScript. Tak więc wydaje się, że wbudowany w ten Strona internetowa jest funkcja o nazwie pozdrawiam. A ja wywodząc, że wystarczy bo to słowo, pozdrawiam. Ma otwartą paren, blisko nawias, średnik. Wygląda na to, funkcji C, wygląda jak funkcji PHP. 

I rzeczywiście, to będzie będzie funkcją JavaScript. Potem wracam fałszywe. Wrócimy do że za chwilę. Ale gdzie jest określona funkcja? No daj mi przewijać w górę na wierzchu pliku. I mimo, że to długa linia, jest to stosunkowo proste. Pozwól mi przybliżyć tu i skupić się na tych czterech linii. 

Więc w JavaScript, tylko takich jak PHP, po prostu powiedzmy, dosłownie, słowo "funkcja" nazwa funkcji a następnie nawiasach z każdym arguments-- żadnych argumentów w tym przypadku. I nie ma typ zwracany w JavaScript, podobnie jak PHP. Więc to trochę luźniejsze niż C. Otwarty nawias klamrowy, blisko nawias klamrowy. Wbudowany w JavaScripcie jest function-- nie zaleca function-- ale funkcja nazywa alert których jedynym celem w życiu to podciągnąć, że dość brzydki zapyta, które widzieliśmy przed chwilą. 

Teraz jest to rodzaj łyk. Co się tu dzieje? Więc zacznijmy się podkreślić tu wszystko. To ten sam argument, aby ostrzec. A o co chodzi? To po prostu wygląda jak struna. I okazuje się, w przeciwieństwie do PHP, w przeciwieństwie C, to nie ma znaczenia w JavaScript jeśli wy apostrofy lub cudzysłowy. Będą równoważne. I szczerze mówiąc, to jest po prostu popularne tych dni dla programistów JavaScript, aby zawsze używać apostrofów z jakiegoś powodu. To jest po prostu rzeczą. Ale możemy użyć cudzysłowia, jak również. 

Więc plus to nowy charakter. Ale ci z was, którzy zrobili to wcześniej, co ma także na myśli? Tak. Złączyć. Więc widzieliśmy to w PHP. Jest tylko kropka Operator w PHP, który będzie łączyć dwa ciągi razem. C był ból w szyi, aby to zrobić. Przypomnijmy pset sześciu, co było especial ból w szyi, trzeba by użyć coś strcat po przydzielania pamięci na stosie lub sterty. Trzeba było pokonywać przeszkody tylko do łączenia dwóch ciągów. W JavaScript, jest to bardzo proste. Wystarczy użyć operatora plusa między nimi. 

Więc kompleks wyglądający co wydaje się być tym ponieważ na koniec cały ten ciąg, po prostu złączyć się wykrzyknikiem. Więc jeśli to, co było pojawiały się było "witam, Dawid", "hello, Hannah," "witam, Maria", i tak dalej, wyraźnie że w średnim rzeczą pomiędzy dwoma plusy musi dać mi dostęp do co? Co tam jest na pewno? Tak. Więc będę udawać tutaj odpowiedzieć na swoje nazwisko, prawda? Więc ich nazwisko pojawiło się w finale wynik. Więc co to oznacza? Cóż, zaproponował wcześniej, że Obraz, który tzw DOM ma ten szczególny element główny aż góra nazywa dokument. A teraz okazuje się, że będzie być specjalne zmienna globalna w JavaScript, wbudowane w którym jest cała masa przydatnych funkcjonalności. Wśród użytecznych funkcji jest zdolność do uzyskania w każdym węźle potomka. Te kwadraty lub prostokąty lub elipsy to tylko węzły w drzewie, że tak powiem. 

Tak więc okazuje się, że wbudowany w Obiekt document JavaScript w Jest to funkcja, inaczej znany jako Metoda, która się nazywa getElementById. Składnia wywoływania funkcji w JavaScript które znajduje się wewnątrz obiektu lub Zmienna jest tylko z notacji z kropkami. I widzieliśmy to w C co składnia struct. Widać to w pset siedmiu, rodzaj, rodzaj, gdy widzisz CS50 :: zapytania. Dwukropek Dwukropek w PHP jest inny sposób wywołania funkcji, która jest wewnątrz jakiegoś przedmiotu. 

Ale teraz w JavaScript, to tylko kropka. I tak ta funkcja, tyle ładnie, rodzaj mówi, co to does-- uzyskać elementu przez ID. Element jest po prostu inna nazwa dla zmiennej albo węzła DOM. I tak się elementu przez ID "imię" Oznacza this-- oto mój HTML. I na podstawie tego kodu HTML, co węzeł lub co tag HTML jestem będzie programowo być uczynku poprzez wywołanie document.getElementById? 

Tak, dokładnie. Mam zamiar dostać wejście Element, którego ID nie jest "nazwa". Tak konkretnie, można myśleć o tej funkcji, getElementById, w sposób dający kopii wskaźnik do tego konkretnego węzła w drzewie. Nie wyciągnąć to drzewa, ale jest to sposób uzyskania dostępu do tego prostokąta lub że prostokąt przez jednoznacznie identyfikujący go poprzez jego ID. 

Teraz, dlaczego to jest przydatne? Cóż, okazuje się, że po dotarłeś że węzeł, który prostokąt od obraz, że węzeł w jej wnętrzu, z kolei, ma całą masę pary klucz-wartość properties-- lub dane, z których jeden nazywa się wartością. Tak dosłownie, jest to swego rodzaju kęs, aby wyjaśnić całą sprawę. A na koniec dnia wszystko to robi to daje ciąg, który użytkownik wpisał w w tym hierarchiczny. Ale nie podoba Kilka z tych rzeczy. A raczej jest jakaś ciekawość nadal. Wszystko to wydawało się do pracy. Dlaczego uważasz, że wróciłem false po wywołaniu pozdrowić? To wygląda trochę brzydki, że Mam dwa oświadczenia nie oddzielone średnikami. Zgadywać. Jeśli usunąłem return false, co może się zdarzyć, po prostu instynktownie? Niestety, jeszcze raz? 

Otwórz kilka systemów Windows. Tak więc potencjalnie może coś tak by się stało. Co jeszcze? Może złożyć wniosek Gdzie? Do tej samej strony. Tak więc, w rzeczywistości jest to, że im bliżej odpowiedzieć tutaj, Nawet gdyby, w przeciwieństwie w przeszłości, nie mam określony atrybut działania, które zwykle mamy do czynienia. Okazuje się, że jest to domyślne. Jeśli nie określić działania, to jak mówi cytat, koniec cytatu lub nazwa samego pliku, która w tym przypadku być jak dom-0.html. To tylko rodzaj wywnioskować, czy raczej dorozumiany. 

I tak, jeśli nie to zrobić, niech zauważy. Pozwól mi zapisać tego. I już usunięte return false. Pozwól mi wrócić do tego przykładem i siłą załaduj go ponownie. A może widzieliście sobie zasugerować to na CS50 Omów kilka razy. Jeśli cokolwiek kiedykolwiek działając Funky i Przeglądarka nie jest zachowuje się zgodnie z oczekiwaniami, często będziesz chciał trzymać Shift, a następnie kliknij przycisk Odśwież. To zmusi każdy plik, aby przeładować i nie korzystać z lokalnej pamięci podręcznej przeglądarki lub kopiowaniem, tak, że teraz, pozwól mi iść do przodu i otworzyć mój inspektor, kartę Sieć. Zamierzam kliknij Zachowaj Zaloguj bo nie chcę, aby usunąć wiersze kiedyś zostanę zabrany gdzie indziej. 

Pozwólcie mi iść do przodu tu i wpisz Andi, kliknij przycisk Prześlij. W porządku. To wydaje się zgodnie z oczekiwaniami. To mówi "cześć, Andi". Pozwól, kliknij przycisk OK. Ciekawa. Zauważ, że strona zmieniła, choć do oryginalnej strony. Zwróć uwagę na rodzaj URL zmieniony. Warto dodać znak zapytania, zwykle jest to wskaźnik że staraliśmy się przedstawić coś. A następnie na dole, jeszcze bardziej wyraźnie, tutaj jest faktyczna żądania HTTP, które dostałem odpowiedzi 200, które sprowadził mnie z powrotem tutaj. 

Więc to nie to, co jest chcemy zrobić, prawda? Bo nie chcę przeładowania całej strony. I zamiast chciał wrócić fałszywe, tak aby zwarcie domyślne zachowanie przeglądarki, która był, oczywiście, do złożenia stronę. 

Warto więc spojrzeć na nieznacznie lepszy przykład. Jest to dom w wersji jedno. I zauważyć, co następuje. Jest OK, jeśli nie grok wszystkich linii kodu. Ale to, co jest zasadniczo różne o tej realizacji? Będę zastrzec, że zachowuje się sam, robi to samo. Co ja oczywiście zrobić inaczej? Tak? 

PUBLICZNOŚCI: [niesłyszalne]. DAVID MALAN: Tak. Tak więc funkcja definiuje differently-- Innymi słowy, nieobecnych w formie tam, na linii 7-- lub raczej linia 8-- nie mam atrybut onsubmit. W poprzednim przykładzie, miałem tego. A potem dosłownie napisał mój kod tutaj. A potem powiedziałem return false. A jeśli to nie pocierać jesteś jeszcze niewłaściwy sposób, powinien zacząć zakresie tak, jak w HTML, kiedy zaczęliśmy współpracować mieszają go atrybutów CSS w stylu, to po prostu zaczął się trochę bałagan i czuję się trochę źle. 

Podobnie tutaj, o ile zażyciem HTML, a następnie automatycznie rzuć trochę kodu JavaScript w środku cudzysłowie, to nie będzie bardzo utrzymaniu. Dobrze? To nawet nie jest oczywiste na pierwszy miejsce gdzie kod JavaScript jest. Więc byłoby naprawdę miło, jak zasadą lepszego projektowania, trzymajmy nasze HTML całkowicie oddzielony od naszego JavaScript. 

Tak więc do tego, co mamy zrobić tutaj jest following-- po prostu używać znaczników HTML tylko. I tak w wersji jedno z tego wszyscy Mam to forma z unikalnym ID. A potem na dół, ja korzystając specjalnej funkcji JavaScriptu przy czym mogę mieć co nazywa anonimowa funkcja. Tak więc okazuje się, że jeśli zadzwonię document.getElementById od 'demo' to jak danie mi wskaźnik do węzeł w moim drzewie element formularza, że tak powiem. 

Teraz wiem tylko z znając trochę HTML Teraz jesteśmy po przeczytaniu niektórych Internecie odniesienia, który to element formularza obsługuje cała masa listeners-- zdarzeń w Innymi słowy, lista pralnia imprezy słuchaczy, które widzieliśmy przed chwilą. Wiem, że od czytania dokumentacji że onsubmit jest ważne wydarzenie Słuchacz do elementu formularza. 

Więc kiedy wiem, że, to jest bezpieczne dla mnie zrobić following-- uzyskać ten węzeł z drzewa, element formularza, i uzyskać dostęp do tak zwanych Nieruchomość onsubmit. Więc kropka oznacza po prostu, Jest to właściwość, jak specjalnej wartości wewnątrz niego. I jakiego typu dane jestem przypisanie, najwyraźniej, do onSubmit, który jest skutecznie zmienną wewnątrz z tego węzła w drzewie? To pole wewnątrz tej struktury. Co znajduje się w typ danych? 

Funkcja, tak. Tak więc okazuje się, że PHP ma tego. I mimo, że my nie powiedział ci o tym, C ma również wskaźniki funkcji, Zdolność do przekazywania i przypisać funkcje jak same wartości zmiennych. I nie będziemy się cofać z powrotem do C Ale teraz okazuje się, że z prawej strony tutaj mimo, że wygląda trochę funky, to znaczy, hej przeglądarka, daj mi funkcję. I nie zamierzam nawet trudu, dając to nazwisko, bo jestem dosłownie zamierza przypisać nazwijmy to adres tej funkcji natychmiast onSubmit. Innymi słowy, przeglądarki, nie trzeba wiedzieć, co ta funkcja nazywa. Trzeba tylko wiedzieć, w których znajduje się w pamięci. A więc wystarczy po prostu mają tam znak równości i nie zawracać sobie głowy nazywania tego, jak foo lub pozdrowić lub każdy inny wyraz. A teraz to jest tylko stylistyczną rzeczą. Mogę przenieść ten nawias klamrowy na the-- sorry-- następnej linii jak zwykle robimy CS50. Ale w JavaScript, to faktycznie stylistycznie wspólne po prostu zachować nawias klamrowy, Pierwszy z nich, na tej pierwszej linii. 

Ale dalej, tam nic ciekawego. To otwarty nawias klamrowy tylko rozgranicza początek mojej funkcji. Funkcja jest identyczne, z wyjątkiem mam zawarte fałszywego zwrotny Wnętrze tej funkcji. Bo okazuje out-- i będzie tylko wiem to z czytania documentation-- że w przypadku funkcji, które można przypisać do obsługi onsubmit zwraca fałsz, przeglądarka po prostu wie i zgadza się, Nie przesłać formularz do serwera. Jeśli zwróci prawda, że ​​przedłoży go do serwera z przyczyn zobaczymy są przydatne w chwilę. 

A następnie średnik po nawias klamrowy nie tylko Oznacza Skończyłem definiowania funkcji. Wiesz, jak to nazwać, jak tylko jak usłyszysz złożenia. W porządku. Jest to nadal zapewne rodzaj brzydki. Więc co jeszcze możemy zrobić? 

Cóż, okazuje się, następnie w drugiej wersji, która jest last-- a my po prostu spojrzenie na to. Na ryzyko tworzenia to brzydsze, okazuje się, że istnieje biblioteka w świat o nazwie jQuery. I jQuery jest super popularne biblioteki JavaScript to jest tak popularny, że większość dowolny JavaScript-- to nie jest Nierzadko ludzie mylić jQuery z JavaScript. Czemu? Sam JavaScript ma bardzo zbyt obszerne sposoby robienia things-- document.getElementById, dadadadadada. Skończyć się o bardzo długie linie kodu. 

Więc kolega o imieniu John Resid, który faktycznie działa na starcie się tych dni, wyszedł z tegorocznych bibliotecznych temu, że wiele osób przyczyniło się nazywa jQuery, który zmienia składnia w następujący sposób. I tak widziałem tego, ponieważ będziesz zawsze zobaczyć, czy robi internetowy projekt końcowy, ten będzie równoważny sposób wykonania tej samej funkcji przy użyciu ta specjalna biblioteka. 

Obecnie, zamiast Tease odróżniają go w całości niech tylko spojrzeć na niektóre wzory. Składnia ta wydaje się mieć ile funkcje anonimowe lub funkcje bezimienne lub AKA funkcje lambda? Dwa, prawda? A wiesz, że nawet jeśli nie jesteś super wygodne z tym, prostu przez fakt, że mówi, function () dwa razy. 

I okazuje się, że co ten kod jest doing-- i będziemy odnosić się do odniesień internetowych, ostatecznie o pomoc z tym. To po prostu oznacza, że ​​gdy dokument jest gotowy, śmiało i zarejestrować następujących funkcji jak złożyć do obsługi HTML Element, którego unikalny pomysł jest demo. A potem, kiedy to się stanie, nazywają te dwie linijki kodu. I to jest, tragicznie, bardziej rozwlekły sposób powiedzenia return false. I powiedzieliśmy o tym tylko dlatego, zobaczysz, jak ten kod Online. I to nic nie obawiają się. Ale należy pamiętać, że to, co jest będzie powszechne w JavaScript Jest to paradygmat. A więc dlatego pokazujemy go teraz. W porządku. Więc bez zbyt mieszkania dużo na tej składni, są są jakieś pytania dotyczące te przykłady i pomysły do ​​tej pory? W porządku. Warto więc korzystać z tego za coś pożytecznego. Dokonywanie stronę internetową, która po prostu mówi cześć, tak i tak nie wszystko, co ciekawe, nie underwhelm. To nie będzie piękne, ale to będzie zrobić coś pożytecznego. Pozwól mi wrócić do mojego katalogu tu i otworzyć, powiedzieć, form-0.html. 

Więc przypuszczam, że tego jest studentem pierwszego roku stacjonarne sport strona rejestracji bez CSS lub jakimkolwiek sensie designu. A ja chcę iść do przodu i zarejestruj się tutaj za pomocą hasła. I mam zamiar zgadzasz się z warunkami oraz warunki i kliknij przycisk Zarejestruj. A teraz strona mówi: "Jesteś zarejestrowany! (No, nie bardzo.) " To wydaje się jak to działa, ale pozwól mi iść do przodu i wymusić reload. 

I pozwól mi powiedzieć, nie, nie potrzebuję mojego prawdziwego adresu e-mail. A może my po prostu powiedzieć pocztę tam. Hasło będzie, jak, 12345. A potem, po prostu dlatego, że jestem idiota, teraz 123456789. A ja nie zamierzam sprawdzić, czy w pudełku. 

Hmm. W porządku. Więc jest kilka możliwości dla poprawy tutaj. I wiesz, czy będzie zobaczyć w pset siedem, że można pisać code-- i będziesz musiał napisać Kod w PHP-- bronić przed tego rodzaju użytkownika błędy, ponieważ użytkownik wyraźnie nie współpracowała. A on nie dał wam wszystko wartości chciałeś, a nawet w formacie że tego chciał. Więc zobaczysz w pset siedmiu, że możemy z pewnością niektóre jeśli warunki, które mówią jeśli adres e-mail Nie jest to username@something.edu, mogliśmy tylko powiedzieć przepraszam i przeprosić użytkownika dużo, jak może być w pset siedem. Lub jeżeli nie są one zaznaczone to pole, okazuje się w PHP, można wykryć, że także. I z pewnością, jeśli haseł nie pasują do siebie jak w register.php dla pset siedem, można wykryć, że. Ale to jest ból w szyja, że ​​teraz oni zażądać nas, aby przejść całą drogę do serwera. Użytkownik jest informowany o błędzie. A przynajmniej, chyba że używasz niektórzy hodowcy techniki, teraz muszą kliknij na strzałkę. Czy nie byłoby miło, jak wiele stron internetowych dziś, gdybyś miał bardziej bezpośrednie sprzężenia zwrotnego, od razu? 

Innymi słowy, pozwól mi iść do wersji jedna, która ma być ładniejsza. Ale ma tę funkcję. Malan, 12345, 123456789, nie zamiar zaznaczyć pole, zarejestruj. Hasła nie pasują do siebie. Więc mimo, że wyskakujące jest ugly-- możemy zastąpić to ostatecznie coś jak Bootstrap, które zobaczysz w pset siedem Jest to bardzo popularny library-- zrobiłem wykryć, że hasła nie są identyczne. W porządku. Cóż, pozwól mi ustalić, że jako użytkownik. Pozwólcie mi iść dalej i powiedzieć, 12345, 12345. Nadal nie sprawdzając umowy. Musisz zgodzić się do Regulamin. Więc dlaczego? 

Jeśli mamy już zakładał że istnieje sposób, a my wymagane cię pset siedem wykryć błąd Warunki takie jak ten po stronie serwera, dlaczego ja męczyć się również w ten sposób w JavaScript? Co to jest argument łaska dodając co jesteś by zobaczyć jak some-- jest dodatkowa złożoność. 

Być może nie jest do góry nogami. Co to może być? PUBLICZNOŚCI: [niesłyszalne]. DAVID MALAN: O, ciekawe. Potencjalne wyczyny. Więc pamiętaj, jeśli nie jesteś obsługi błędne dane wprowadzone przez użytkownika, które świetnie, Może to wszystko lepiej, jeśli to nawet nie dotrzeć do serwera. Chciałbym przesunąć tam i powiedzmy, należy prawdopodobnie rozwiązać oba te problemy. Ale to jest sprawiedliwe. Co jeszcze? 

PUBLICZNOŚCI: [niesłyszalne]. 

DAVID MALAN: Tak. Kod ten, jak powiedzieliśmy wcześniej, jest interpretowane na stronie klienta. Nie przeszkadza serwer, co oznacza, że ​​nie ma wpływ na obciążenie serwera lub zdolności. A teraz, na małym starym mnie nie ma to znaczącego wpływu bo mam jeden użytkownik w tej chwili. 

Ale jeśli masz jakiekolwiek strona przyzwoitej wielkości, zwłaszcza największych, takich jak Facebook, więcej można trzymać ludzi off od serwera, tym lepiej Ponieważ serwer oczywiście ma tylko skończoną ilość pamięci RAM, skończona liczba GHz, skończoną ilość rzeczy może to zrobić w jednostce czasu. Więc jeśli jest więcej osób w świat uderzenie serwera, przypadkowo zalogowaniu nieprawidłowo, równie dobrze, jeśli Ciebie może utrzymać ten ciężar z serwerem. Dodatkowo, zwłaszcza w komórkowego device-- Jeśli kiedykolwiek zalogować się my.harvard lub Netid Yale lub podobne, jest to opóźnienie z wieloma strony internetowe tak dzięki czemu zajmuje, tak, cholernie sekundę lub dwie czasem. A potem, mój Boże, jeśli popełnisz błąd, to trzeba trafić z powrotem i powtórzyć go. Więc nie ma opóźnienia, zwłaszcza na wolniejszych połączeń sieciowych. Ale JavaScript, ponieważ działa na kliencie i nie ma potrzeby, aby przejść tam iz powrotem całej potencjalnie powolny internet Połączenie można uzyskać niemal natychmiastowe informacje zwrotne. 

Więc spójrzmy na to. Pozwól mi otworzyć formularz-0 oraz spójrz na HTML tutaj. I niech po prostu zobaczyć, co się dzieje. Jest to forma, której Akcja jest register.php. Jestem po prostu za pomocą uzyskać tak że mogłem zobaczyć adres URL. Ale dla haseł, my na pewno chcesz aby to zmienić, aby odpowiedzieć w rzeczywistości. Oto pole wprowadzania typu text. Oto kolejny wejściowy Pole typu hasło. Oto, jeśli nigdy wcześniej nie widział, wejście typu checkbox. 

Ale nie ma JavaScript tutaj w ogóle. To jest tylko kod HTML idzie do register.php. Jednak w jednej wersji, gdzie zaczęły się te pop-upy, Zobaczmy, co faktycznie dzieje się tutaj. W wersji jednej, co Zamierzam see-- I że mógłbym stoisko tyle z dość słów, ale zabrakło mi. 

W wersji jedno- tam idziemy. W wersji jednej, zauważysz following-- i nie jest najlepsza realizacja, ale to mój pierwszy. Zauważ, że poniżej Formularz mam znacznika script. A tag skrypt oznacza, hej, przeglądarka, tutaj jest jakiś kod, zazwyczaj JavaScript. A teraz, zauważyć to, co robię. Na line-- mogę ledwo czytaj it-- linii 32, to mówi, var form-- więc daj mi zmienną formą. A następnie dostać document.getElementId z "rejestracji". Co to? Cóż, niech przewinie się tutaj. Oraz informacja, ah, dałem element formularza dowolna, ale opisowe pomysł rejestracji. Więc to daje mi zmienną, która pozwala mi chwycić ten węzeł, że prostokąt w drzewie nazywa formę. form.onsubmit oznacza, hej przeglądarka, zarejestruj detektor zdarzeń w tym formularzu. Innymi słowy, gdy formularz jest złożone, wykonać następujący kod. Nie potrzebuje nazwy, ponieważ dlaczego trzeba znać nazwę? Trzeba tylko wiedzieć, co do wykonania, ergo jest to funkcja anonimowa lub lambda. I że funkcja jest wszystkie z tych linii jest tutaj. A teraz, szczerze mówiąc, nawet jeśli nie może kiedykolwiek napisane JavaScript wcześniej, to tylko C i PHP logiki. Więc jeśli form.email.value == "" - więc jeśli pole e-mail jest puste, krzyczeć na użytkownika z "Musisz podaj swój adres email. " Else if form.password.value jest puste krzyczeć na użytkownika, "Musisz podać swoje hasło." 

Co ciekawsze logicznie, Jeśli form.password.value nie równa form.confirmation.value-- Skąd pochodzą z potwierdzeniem? Pozwól mi do tyłu. Cóż, nazywa to wejście Pole tutaj hasło. I nazwał to jeden tutaj potwierdzenia. Mogłem nazwał go Hasło dwa lub cokolwiek innego. Jestem po prostu logicznie kontroli że te dwa są takie same. Else-- okazuje się, to jest pan Boole again-- wartość logiczną, pole wyboru. Więc jeśli powiem, wykrzyknik point-- jeśli nie form.agreement.checked, krzyczeć na użytkownika, jak również. 

Więc ta składnia zobaczysz jest bardzo często w JavaScript, gdzie masz ten notacji. Zaczynasz z obiektu tutaj. Nurkować głębiej do a, aby właściwość jak hasło. A następnie dostać się na jego rzeczywistej wartości. I znowu tutaj jest wejście. Oto hasło nazwa. A jego wartość jest bez względu na ludzka faktycznie wpisane. 

Tak więc we wszystkich tych przypadki, wróciłem fałszywe. Ale jeśli nie, wrócę prawda. A więc teraz widzimy przekonujące wykorzystanie kiedy byś return false do stop, co użytkownik robi i uczynić go lub jej wybrać ponownie lub wpisz ponownie. W przeciwnym razie zwróci true. 

I pozwól, że przedstawię jeden inny wariant tego właśnie do materiału siewnego jej pewne zrozumienie. Cóż, w wersji 2 to postać-2-- Zrobię to machnięciem ręki. To jest dla tych, nowoczesny, wersja jQuery, tych z Was, którzy chcą dabble w danej bibliotece. Ale niech start-- i jakieś pytania? Pozwól mi zatrzymać się na chwilę, ponieważ to było szybko i dużo. 

Ale dobrą rzeczą jest to, że wszystkie kodu jest bardzo podobnie. Nowe rzeczy jest to, co jest dom? Co to są te prostokąty? Co to są te węzły? Co znajduje się anonimowa funkcja? Co to jest funkcja obsługi zdarzenia? Ale na szczęście, większość to tylko pełne koło z, powiedzmy, tydzień zera. W porządku. Więc coś nieco bardziej interesujące? Cóż, po pierwsze, pozwól mi odejść do przodu i otworzyć Google Maps. I można zauważyć, że dla Moment, podzielonym na sekundę, zauważyć, co się dzieje, gdy Klikam wystarczająco szybko. I to połączenie na Harvardzie jest tak szybko, że tak naprawdę nie zauważyć. Ale co to za rodzaj zobaczyć gdybym kliknąć i przeciągnąć bardzo szybko? Ci z was, oglądania online jeśli spowolni to prędkość 0,5x, widać to lepiej. 

Co się dzieje po prostu zanim kliknąłem i zaciągnął? Pozwól mi spróbować here-- pozwól mi zrobić coś innego, tak jak 90210. Chodźmy daleko. To było naprawdę szybko, zbyt. Jak o Disney World? No to jedziemy. OK. Co widzisz na ułamek sekundy? Podobnie, jak, placów, prawda? Zastępcze do płytek? 

Cóż, co tu się dzieje? Mapy Google to dobry przykład to technologia, która się nazywa AJAX. I to jest, gdy zaczniemy używać JavaScript w szczególnie intrygujący sposób. Powrót w dzień, nie było ta strona nazywa MapQuest. A powinnam była podjęta zrzut ekranu z tego z lat 1990, gdzie jeśli chcesz spojrzeć tutaj na mapie, byś dosłownie kliknij strzałkę u góry, że pokazałem inny plac mapie. Jeśli chcesz, aby przejść w lewo, ty kliknąć strzałkę, który pokazał ci inny plac mapie. I niektóre strony internetowe jeszcze zrobić to dzisiaj. Ale nawet MapQuest ma zdobyć lepiej, jak Google Maps. 

Zamiast tego, co jest lepsze ich dni to strony internetowe, które używają technologii AJAX. AJAX-- zwie Asynchronous JavaScript i XML, co jest tylko wyobraźnia sposób powiedzenia technologia i technika Pozwala przeglądarki przy użyciu JavaScript do dodatkowych żądań HTTP po stronie został załadowany. Więc co to oznacza? Cóż, to będzie rodzaj irytujące w Gmailu jeśli za każdym razem chciał sprawdzanie poczty, trzeba było dosłownie uderzył Control-R lub Command-R lub kliknij przycisk Odśwież i cała strona cholernie by przeładować. Dobrze? To migać białym Prawdopodobnie na sekundę. Można by zobaczyć głupi pasek postępu. I tak, aby sprawdzić, czy masz nowe poczty, cała strona internetowa i adres URL jesteś na musiałby przeładować. 

Ale to nie jest to, co dzieje się w Gmailu. Dobrze? Gdy pojawi się nowy e-mail w Gmail, co dzieje się na ekranie? To po prostu pokazuje się, prawda? Po prostu wydaje się magicznie jako nowego rzędu w tabeli. To rzeczywiście wiąże się z przyzwoita ilość złożoności. W rzeczywistości, jeśli myślisz o tym drzewie, która chociaż jest prosta tutaj, Gmail-- i będę musiał szukać na kod będzie sure-- Prawdopodobnie posiada tabelę HTML, a może nieuporządkowana lista, która renderuje każdy z skrzynki pocztowe wiadomości e-mail jak. 

I tak, jeśli tego sobie wyobrazić nie drzewo w pamięci, gdy jesteś korzystania z Gmaila, który wygląda trochę jakby jak to, kiedy Google zdaje sobie sprawę, ooh, masz nową wiadomość e-mail, to nie robi chcą odbudować całe drzewo. Raczej chce znaleźć węzeł w drzewo, które reprezentuje swoją skrzynkę odbiorczą i po prostu wstawić nowy węzeł. 

Tak więc bardzo podobny do pset pięć, gdzie miał wstawić węzły w tabeli mieszania, Podobnie robi Google, poprzez Kod JavaScript, który to napisał, trawers tego drzewa, dowiedzieć się, gdzie jest to, że część Skrzynka okna, a następnie wstawić nowy wiersz. A nowy wiersz po prostu oznacza, jeden lub więcej, nowe węzły w drzewie. 

I tak AJAX to technika która pozwala na dokładnie to. Po odwiedził URL, jednak szalony długo, to jest, i raz stronę załadowany, nadal można chwycić więcej danych z internet-- czy to e-mail lub płytki z map-- chwycić go za kulisami a następnie włóż ją do strony tak, że człowiek naprawdę nie ma trzeba czekać na niego. 

Facebook Messenger działa w ten sam sposób. Dowolna ilość innych websites-- Och, faktycznie, nawet to. To znaczy, to, szczerze mówiąc, trochę przykry wyposażone w te dni. Jeśli zaczynam poszukiwania cats-- tego niby straszne doświadczenie użytkownika. To po prostu zaczyna poszukiwania dla mnie. Cóż, co on robi? Adres URL nie zmieniła od kiedy zacząłem pisać. Ale to, co się dzieje po drugiej stronie wire-- OK, hmm ciekawe. Co się dzieje po drugiej stronie Drut tutaj po prostu staje dziwniejsze. 

OK. Więc pozwól mi iść dalej i sprawdzić, Element i przejdź do karty sieciowej i starają się uczynić to techniczne i mniej o kotach. Jak wpisać dosłownie koty and-- co się dzieje per-- nie będę klikać, że. W porządku. Więc tutaj, co się dzieje za każdym razem wpisać znak, najwyraźniej? Jak, niski poziom? Co się dzieje z każdym z tych znaków piszę na klawiaturze? Tak? PUBLICZNOŚCI: [niesłyszalne]. 

DAVID MALAN: Dokładnie. Każdy z tych znaków jest będzie Google, po jednym na raz. Budują się ciąg na ich serwerze, który reprezentuje wszystko mam wpisane do tej pory. I za każdym razem wpisać kolejny znak, że używać ich tajny sos od a szukaj algorytmu i dowiedzieć się, ma na myśli tę stronę kota lub tej strony kot lub podobne? Więc w pewnym sensie, zapewnia mnie z lepsze doświadczenie, że nie mam nawet Należy wypełnić moją myśl. I rzeczywiście, jest to przydatne rzeczą, autouzupełnianie w ogóle. Jeśli ich algorytmy są wystarczająco dobre i jeśli moje pytania są na tyle oczywiste, Nie mam wpisać całe słowo. Mają zamiar mi powiedzieć, co go to jestem naprawdę szukają. Więc to, co nazywa Google błyskawiczne Wyszukiwanie jest po prostu za pomocą AJAX, za pomocą kodu, który pozwala im żądać dodatkową zawartość za pomocą przeglądarki internetowej za kulisami za pomocą tego Nowy język, JavaScript. Mamy więc kilka pozostawił minut. I pozwól mi zadzwonić do mojego kumpla Colton na scenę, gdyż wydawało się, Szczególnie zabawne ostatni raz wprowadzenie technologii że niektórzy z was wyraziły zainteresowanie w przypadku projektów końcowych. Myśleliśmy, że to będzie zabawne przynieść się wolontariusz, choć dziś pokazać dodatek do to, że pozwala you-- tak, Widziałem pierwszy tego rękę. Chodź na górę. Bardzo dobra robota. Dobra praca. Idę do tego projektu na ekran na chwilę. Jak masz na imię dla wszystkich? 

EFA: Jestem EFA. 

DAVID MALAN: Etha? 

EFA: EFA. 

DAVID MALAN: Efa? 

EFA: Tak. 

DAVID MALAN: Miło cię widzieć. W porządku. Niech to gotowy. Chodź do średniej z Colton tutaj. Co Colton ma w swoich rękach dziś jest pilot zdalnego sterowania. Tak więc, zamiast po prostu stać w sposób Trójwymiarowy świat rozglądając tak jak Colton, teraz Efa możliwe rzeczywiście chodzić przez idzie w górę, dół, lewo i prawo, jak Nintendo lub Xbox kontroler. EFA: Idę do upadku ze sceny. DAVID MALAN: będę stoją mniej więcej tutaj. Ale to jest ryzyko. OK. Więc śmiało i umieścić te na. Pozwólcie mi iść do przodu i przełączyć się na ekran tutaj. Pozwól, przyciemnić światła. I Colton, niech mnie się stać obok Ciebie. 

Czy chcesz, aby wyjaśnić tutaj z mikrofonem, co robimy? Proszę bardzo. 

COLTON: Jasne. Więc teraz jesteśmy załadunku na Oculus, Chyba operating-- nie działa System, ale główny program, w którym można uzyskać dostęp do wszystkich gier i Aplikacje, które są w bibliotece. Więc teraz, należy powiedzieć stuknij touchpad, aby rozpocząć. Touchpad będzie na Prawa strona zestawu słuchawkowego. Więc idź i tap-- EFA: Och, człowieku. DAVID MALAN: Tak, proszę. Jakość Efa widzi jest znacznie wyższa jakość. To jest po prostu Wi-Fi tutaj. COLTON: I co z tego, że jesteś będzie chciał zrobić jest patrzeć w górę prawej stronie ekranu. Tak, że gra na bardzo prawym górnym rogu. I wtedy, kiedy jesteś wybierając Opisz ponownie stuknij touchpad. Myślę, że jego Dreadhalls. I to tutaj jest A-- tutaj, niech mi trzymać okulary dla Ciebie. 

Więc po prostu dał mu kontroler. Więc teraz on może kontrolować grę. Potrafi poruszać się i takie tam. Więc idź naprzód i patrzeć do góry. Powinieneś zobaczyć nową grę. Więc idź naprzód i można to zrobić. Teraz powinieneś być w stanie kontrolować się ze sterownikiem, a także, jak najszybciej gra ładuje się tutaj. To może być trochę przerażające. 

EFA: Teraz ty mi powiedz. OK. 

COLTON: Wszystko w porządku. Tak więc potwierdzić, że można poruszać. OK. Możesz poruszać. Doskonały. Więc jeśli spojrzeć w dół, masz mapę. Mapa pokazuje, gdzie jesteś. Możesz rozejrzeć się po pokoju. Możesz całkowicie odwrócić. Tak, dokładnie. Obróć się. 

Więc wygląda na lewo. Myślę, że jest coś, co może wybrać się na beczce w pokoju. 

EFA: Jak mogę uzyskać map z drogi? COLTON: Spójrz w górę. Wystarczy spojrzeć w górę. W porządku. Proszę bardzo. Teraz śmiało i po prostu odwrócić. Więc szukać dalej na lewo. Ruszaj w lewo. Zachować się w lewo. Tak trzymaj. Tak. 

EFA: Och, to sposób. 

COLTON: Tak. Podejdź do niego ze sterownikiem. Proszę bardzo. Teraz należy powiedzieć go podnieść. Proszę bardzo. Podnieś to. W porządku. A teraz wyjść z tego pokoju. Śmiało i chodzić do tych drzwi. Więc masz zamiar hold-- mówi przytrzymaj przycisk, aby zmusić go otworzyć. Więc śmiało i przytrzymaj przycisk. Tak, zmuszając go otworzyć. W porządku. Dobra praca. Teraz idziemy z pokoju. Więc mam zamiar zostawić resztę się do Ciebie i zobaczyć, co można znaleźć. EFA: Nie będę w ciemnym pokoju. Zaczekaj. Teraz muszę iść ciemną salę? OK, wracam [niesłyszalne]. COLTON: Wszystko w porządku. Kilka przedmiotów odebrać. Wygląda na to kilka monet. To jest okazja zamek. Więc jeśli znajdziesz zablokowany Drzwi można użyć. Boisz się? 

EFA: Jeszcze nie. COLTON: OK. 

Pretend-- tak. Udawaj, że jesteś rzeczywiście tam stoi. A jeśli włączyć around-- musisz się do tego przyzwyczaić. Ale to ma sens. DAVID MALAN: A gdy Efa nadal grać, ponieważ możemy to zrobić przez cały dzień, wszyscy możemy palcach tutaj. Ale mamy dwie inne pary, jeśli chcesz przyjść i grać. W przeciwnym razie, zobaczymy następnym w środę. Dziękujemy naszym wolontariuszem dzisiaj. [APPLAUSE] 

[MUZYKA - "SEINFELD TEMAT"] Głośnik 1: Cóż, jestem wprowadzenie nowego PL montażu na. Właśnie zmienił OLPF-- 

GŁOŚNIK 2: Więc co dokładnie robisz? 

Głośnik 1: Cóż, każdy z these-- tu, pokażę ci ten jeden w tutaj. Można go zobaczyć tutaj. 

GŁOŚNIK 3: Myślę, że jestem dobry z nich. Chcesz więcej? 

GŁOŚNIK 4: Nie, jestem dobry. [Niesłyszalne]. 

GŁOŚNIK 3: Nie, [niesłyszalne]. Mieć trochę. Głośnik 1: Inny kolor. GŁOŚNIK 2: OK. Głośnik 1: Więc w końcu co to robi to dostosowuje kolor of--