>> [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--