>> [MUZYKA GRY]
>> DAVID MALAN: Jest CS 50, a to jest początek tygodnia dziewięć.
A co myśleliśmy, że będziemy robić dziś nie jest tylko zamknąć rozdział o zeszłotygodniowej
Materiał, gdzie skupiliśmy się na serwerze strona internetowa z programowania PHP i SQL,
niektóre rzeczy w bazie.
Porozmawiamy o odrobinie Bezpieczeństwo i dziś
przejście do programowania po stronie klienta język znany jako JavaScript.
Ale po pierwsze, niektóre wykupu.
>> Można przypomnieć, że na Środa, wyruszyłem
napisać stronę internetową, która wziął na wejściu użytkownika
za pomocą formularza HTML, który następnie przechowywany że nazwy wejściowe użytkownika, telefon
numery, a telefon Nośnikami w bazie danych.
A potem miałem trochę polecenia skrypt napisany w PHP linii
który miał do iteracji w ciągu wierszy danych
i wysyłania wiadomości tekstowych.
Mimo kilku, kilku próbach, my nie dostać tej pracy do końca.
>> Więc ja spędziłem cały ten tydzień pracy tego kodu, aby nas poza punkt
którym skończyliśmy, przy czym wszystkie Mam do końca środa
była to wiadomość tekstowa z Margo, jak walczyłem,
następnie wiadomości tekstowej z innego kolega, Masz to David.
Obserwowani przez ten jeden, cudownie zachęcające.
Przechowywane na dzieje, bardzo pokrzepiające.
I prawie dostał aż then-- i to pamiętać, że zakończył się w środę.
I wtedy rzeczywiście może mój ulubiony, Chwilę później, to przyszedł.
Cholera Live Stream.
>> Więc dzisiaj, naprawimy to z szybko spojrzeć na to, co zrobiłem, ponieważ.
Więc cały ten kod jest dostępny online w ubiegłym tygodniu, tygodniu, osiem,
Kod źródłowy.
I zobaczysz, że przeszedłem, i rzeczywiście oczyścić rzeczy nieco.
Przedstawiłem kilka innych cechy bazy danych SQL.
Na przykład, zamiast po prostu zrobić nośnikiem var char
jak myślę, że zrobiłem w locie w zeszłym tygodniu.
I zamiast zdefiniowana jako co nazywa enum.
>> A niektórzy z was widzieli ten może jak byliśmy C. Enum jest rzeczywiście
cechą C, gdzie można wyliczyć całą masę stałych
i przypisać im wartości automatyczne, jak jeden, dwa, trzy, cztery
bez twardych numerów kodów.
Tak SQL wspiera same, przy czym jeśli masz pole bazy danych, że tylko ty
chcą wziąć na jednym z skończonych Wartości można określić ją dosłownie
jak zrobiłem tam dla czterech popularnych amerykańskich przewoźników telefon.
>> Więc zrobiłem to.
I zrobiłem kilka zmian, jak oraz, z których najważniejsze
e-mail został dostać pracy, bo przypomnieć, że ten program, na którym oparła się
ogólnie nazywane e-mail, aby Bramka SMS, który jest po prostu
fantazyjny sposób na powiedzenie, że Verizon, i AT & T, i innych ludzi obsługuje serwer,
przy czym jeśli otrzyma e-mail, to zamienia go na SMS
i wysyła tekst wiadomość do innego telefonu.
Więc jeśli zrobiłem to poprawnie, tutaj jest nowe i ulepszone forma
że ma zamiar porozmawiać z nowy i ulepszony kod, który
można grać on-line.
I mam nadzieję, że będzie to zrobić mój Sygnał telefonu za chwilę.
>> Więc po pierwsze, mam zamiar wpisać w moim imieniu.
Po drugie, nie będę to tym razem zrobić.
Mam zamiar nie Skontroluj element.
I to jest właśnie mała rzecz, więc nie
stworzyć godzin postprodukcji działa tak jak ja ostatnio.
Tam teraz jest mój numer telefonu.
>> Będę wybrać Verizon.
I tu, wróćmy na tym mikrofonie tutaj, i mają to w moim telefonie tutaj.
Zamierzam kliknij Register, które mam nadzieję, że powinien
umieścić go w bazie danych.
Teraz mam zamiar udać się do Program wiersza poleceń, które
odwołanie nazwano kropka ukośnik Tekst i trzymaj kciuki.
No to jedziemy.
>> [DINGS telefon]
>> [APPLAUSE]
DAVID MALAN: Tak więcej zabawy niż this-- to zabawa, oczywiście, jeśli się do niego.
Ale to jest więcej zabawy, pomyślałam, jeśli stworzył jeden z tych momentów filmowych
gdzie jak coś naprawdę złego działo się w świecie,
i jak wszyscy ludzie NSA telefony komórkowe zaczynają piszczeć
z wiadomości tekstowych ostrzegając ich o tym fakcie.
Więc pomyślałem, że spróbujemy odtworzyć samo tutaj,
w którym nie używa bazy danych, I zamiast z góry
Napisałem program, który wygląda tak.
>> Jest index.php-- i umieścić ten kod w Internecie
jak well-- że najwyraźniej tylko świadczy form.php,
za pomocą stylu, że paradygmat MVC mówić o bardziej szczegółowo w zestawie problemów
siedem.
Ta forma jest dość prosta.
To będzie przedkładać plik o nazwie here.php pocztą.
I to najwyraźniej zamiar zapytać o nazwę i numer telefonu,
a następnie za pomocą tak zwanych Wybierz menu, to
zamiar dać co najmniej cztery popularnych amerykańskich przewoźników telefon komórkowy,
i pozwalają skutecznie wziąć udział, klikając tutaj.
>> A tutaj, w międzyczasie, będzie pożyczyć kodu z ostatniej chwili.
A jeśli po prostu przejrzeć to, zobaczysz, że nie ma
cała masa kontroli błędów.
Ale w końcu piękno jest to, że nie piszesz do bazy danych dzisiaj.
Trzymamy go proste i miejmy nadzieję, że tylko wysyłanie
za pośrednictwem wiadomości tekstowych funkcji I napisał w ciągu ostatnich kilku dni rozmowy
Tekst, który jest w funkcje. php, który jest ponownie dostępny w Internecie.
>> Więc jeśli chcesz wziąć udział w tym.
Nie jedziemy do przechowywania czegokolwiek.
Idź do URL tutaj w czasie rzeczywistym.
Nie przedstawia go jeszcze, ale niech zobaczyć, czy możemy mieć jeden z tych filmu
każdego z nas momenty, w których telefon komórkowy zaczyna piszczeć, miejmy nadzieję, że tylko
po tym roku w przeciwieństwie do w 2011 roku gdzie to poszło strasznie krzywo.
A kiedy idziesz do tego adresu, powinieneś zobaczyć bardzo prosty formularz
że jeśli masz nazwisko, telefon komórkowy numer i telefon, że przewoźnik
pasuje tam listy, przejdź naprzód i wypełnić formularz.
Ale nie bij złożyć jeszcze.
>> Formularz będzie wyglądać tak.
Śmiało i wpisz imię i nazwisko, numer telefonu.
Oop, ktoś idzie przed krzywej.
Jest OK.
OK, wszyscy wypełniony formularz.
To powinno działać na telefon, zbyt, jeśli chcesz.
W porządku, na miejsca, gotowi, start.
Hit Tutaj.
Co?
Nie.
Przysięgam na Boga, że ​​testowane to kilka razy dzisiaj.
Masz ją?
>> [Wstawienie GŁOSY]
>> DAVID MALAN: OK, błąd użytkownika może.
To dwa.
Pracował dla dwóch z kilkaset, trzy, cztery.
OK, to dobrze.
Czterech na pięciu dla odpowiedzialności ani jak o.
>> Więc co się stało?
Więc zapewne nie widząc twój ekrany, dlaczego to może być błędne?
To chyba, że ​​byliśmy po prostu próbuje zrobić zbyt wiele połączeń
do serwera pocztowego na wszystkich Uniwersytetu Harvarda raz z tego samego adresu IP.
Ja tylko zgadywać, ponieważ ja nie mają luksusu testowania
ten kod z niektórymi Z góry 300 osób
ale teraz sobie sprawę, że że co najmniej powinna
dostał zadanie tym razem.
>> W porządku, więc dlaczego to wszystko więcej z tematem, co się dzieje?
Otóż ​​po pierwsze, szybkie Kilka ogłoszeń.
Tak jeden, jeśli chcesz dołączyć do Chang, i Nick i inni na obiad w piątek,
zrobić RSVP w zwykłym adresie URL tam.
Jeśli myślisz o koncentrując lub robi wtórne w CS,
czy jesteś studentem drugiego roku, lub studiów, lub nawet młodszy lub starszy w tym momencie
i może jeszcze wycisnąć w kursach, sobie sprawę, że szkoły inżynierskiej
zbiera za darmo Ben i Lody i porady Jerry'ego
w środę tuż po klasie na 16:00 w budynku CS
w Maxwell Dworkin.
Jeśli jest to zbyt szybko na ekranie, po prostu idź
do cs50.harvard.edu dla Link do wydarzenia na Facebook
gdzie można zobaczyć więcej szczegółów.
>> Tymczasem, myślałem, że mam rację jedna rzecz ja goofed w środę.
Okazuje się, że ID Marka na Facebooku nie było trzech.
To było cztery.
Okazało się, że miał więcej testów Konta nie wspominam.
Ale co to było jak możliwość zrobić, to wyciągnąć URL takiego.
>> Tak więc okazuje się, że Facebook ma API, Application Programming Interface,
co jest mechanizm, dzięki któremu ci może zażądać danych programowo
na Facebooku i wrócić maszynę czytelne informacje, a nie strony internetowe
ale tekst tylko surowe, coś nazywa JavaScript Object Notation.
I rzeczywiście, jeśli mogę odwiedzić to Adres URL, i powiększyć domyślnie
Marka ta jest publicznie dostępne informacje.
>> I ciekawostka tutaj jest po prostu, że jego ID
rzeczywiście, numer cztery, które realizowane tak szybko, jak to zrobił.
Można to zrobić samemu, jeśli wiesz, Twoja nazwa użytkownika na Facebooku, jeśli masz.
Wystarczy wpisać go do góry nie.
I nic z tego nie jest prywatny.
Jestem po prostu to robi, nawet W trybie incognito.
Więc nie jestem nawet zalogowany.
I widzisz, że ja najwyraźniej był numer użytkownika sześciu tysiące czterysta pięćdziesiąt cztery
na Facebooku, co nie jest szkoda tych dni.
Tak czy inaczej, można również zobaczyć dodatkowe informacje nie.
>> I użyteczny aspekt o to, że ty
może napisać własne oprogramowanie jakoś integruje dane, takie jak ten
do własnej aplikacji.
Możesz upoważniają użytkowników do zalogować się na stronie internetowej,
nie przy użyciu własnej nazwy użytkownika i niestandardowe hasło, ale może ich Facebook login
i uzyskać informacje, nawet o swoich przyjaciół,
jeśli zatwierdzi takie, lub podobne.
Tak więc zauważyć, że CS50 też ma jedne z własnych interfejsów API,
jeden dla danych katalogowych Oczywiście, niektórzy dla menu w restauracji hugs
hale, wszystkie budynki i lokalizacje
na terenie kampusu mamy także API dla które można wyszukać i uzyskać podobny
z powrotem dane tekstowe, które można zintegrować w PHP lub JavaScript, a nawet,
choć rzadziej, C opiera się ostateczny projekt.
>> Rzeczywiście naprzód do finału Projekt kilka kamieni milowych.
Dostałeś e-mail od nas na drugi dzień.
Sobie sprawę, że wniosek wynika nadchodzący poniedziałek.
To nie zawsze wiążące, ale muszą otrzymywać towarzyszy nauczania
zatwierdzenie przed podjęciem wszelkie następnie zmiany.
A następnie do przodu są Wiele innych kamieni milowych.
>> Tak cię drażnić, zbyt, z niektórych możliwości,
mamy kilka Żarówki te barwy światła.
A niektórzy z was mają teraz niektóre z nich w swoim pokoju w akademiku, jak również.
A oni też mają API.
Więc pamiętam te żarówki tygodnie binarnych temu, że Dan Bradley i Ansel
Duff stworzony dla nas.
Użyli do interfejsu oprogramowania to żarówka, która w tej chwili
jest podłączony do prądu a następnie poprzez sieć bezprzewodową
jest połączony z małą rzecz zwane tu Bridge,
jak mały routera zastrzeżonych do tego konkretnego urządzenia.
>> Ale okazuje się, czy wiem, jak wysyłać wiadomości HTTP, jak wszyscy teraz zrobić,
Mogę wysłać wiadomość tak, aby to żarówka, aby ją włączyć lub wyłączyć
lub zrobić dowolną liczbę inne operacje na nim.
Zauważ, że to nie dostać, to nie pisać.
Jest jeszcze jeden o nazwie put.
Jest rzeczywiście kilka innych tego typu czasowniki.
Zauważmy jednak, że tam jest droga, slash API, slash nowy developer,
slash światło, slash jeden, slash stan.
>> To tylko pozornie ścieżka, że ​​firma Philips,
zdecydował musisz trafić z żądania HTTP
jeśli chcesz zmienić stan żarówki za pomocą protokołu HTTP 1.1.
Następnie zauważył pustą linię.
I wtedy wreszcie, co wygląda jak rodzaj tablicy jakiegoś,
to znowu będzie się nazywać JavaScript Object Notation, czy Jason.
A to, co widzisz tutaj jest to, że istnieją trzy pary wartości kluczowe.
>> Jednym z najważniejszych jest wezwał.
A jego wartość najwyraźniej będzie prawdą.
Jasność wynosi 128, co jest pewnego rodzaju int.
A potem jest czas przejścia zero, co jest najwyraźniej
jak długo to będzie podjąć, aby włączyć tę rzecz na.
>> Więc teraz to żarówka jest wyłączona.
Ale jeśli to zrobię dokładnie this-- niech mi iść do małego ściągawki
że Dan ustawić w advance-- i idę
iść do przodu i skopiować następujące polecenie.
Curl, jak niektórzy z was mógł wywnioskować na CS50
Omów to narzędzie takie jak Telnet że można symulować żądania HTTP,
specjalnie stawia.
Mogę wysłać te dane, specjalnie co właśnie
widziałem przed chwilą specjalnie do tego adresu URL na tutaj.
A potem Curl będzie obsługiwać wszystkich wymaganych nagłówków
i analizowania tam od.
>> Więc wszystko co musisz zrobić, to skopiować to do okno terminala, a następnie naciśnij Enter.
A żarówka jest długa.
I to wszystko przeżywa mój komputer bezprzewodowo
jakoś się do mostu, który Następnie rozmowy z tym żarówki.
Mogę zrobić coś innego.
Mogę zrobić to coś przejść czerwony na przykład.
Mogę na przykład zrobić ta sprawa go na zielono.
Mogę zrobić to iść na niebiesko.
>> I zauważyć, w każdej z nich przypadki, wszystko zmienia się, że jestem
Jest tak zwaną wartość Hue rzeczywiście dać mu trochę kolorów.
Więc pozwól mi wklej ten jeden w również.
Teraz jest niebieski.
>> I można to zrobić nawet hodowcy rzeczy where-- chodźmy na zielony.
I mogę to z robić Oczywiście z mojego kodu.
Ale nawet sam API wspiera działalność funkowe
jak ten, który będzie teraz przeszkadza nas przez następne 30 sekund.
>> Więc to jest jedna próbka tego, co może po zrobić z API, w tym jeden z udziałem
żarówki.
Należy pamiętać, że CS50 ma kilka pary Google Glass gdybyś
chciałbym zająć coś razem te linie, Arduino Unos, które
są malutkie komputery, zasadniczo, na pokładzie trochę obwodu
które można podłączyć przewody i inne rzeczy
do i faktycznie kontrola środowisko świat realny.
I jeszcze kilka o nowe zabawki, które posiadamy.
Ten dosłownie przybył drugi dzień pocztą, Myo opaska.
A ja myślałem, że to droga do Ci podekscytowany o projektach
które można używać z ten sprzęt będzie
będzie grać ten krótki klip że używają drażnić ludzi
że mamy teraz żyć w przyszłości.
>> [MUZYKA GRY]
>> DAVID MALAN: Tak, w ciągu kilku tygodni, to że może być zbyt chłodno na targach CS50.
Inne urządzenie, które mają kilka, że ​​jesteśmy
chętnie pożyczki na projekty nazywany jest regulator ruchu.
Jest to małe urządzenie USB podłączeniu do komputera
pozwala na interakcję z laptop, Mac lub PC,
jakbyś miał jak Xbox Kinect i rzeczywiście zrobić wiele ruchów fizycznych
jak widzimy, w tym wizja przyszłości.
>> [MUZYKA GRY]
>> DAVID MALAN: Więc nawet jeśli masz nie wiem, jak coś takiego
mogłoby być wymyślone lub pracy na poziomie sprzętowym, nie ma sprawy.
Nawet po kilku miesiącach CS50, i zrozumienie programowania
bardziej ogólnie, a bardziej programowania WWW niedawno, a następnie także API, i HTTP,
będziesz miał dostęp poprzez API oprogramowania Jeśli
chce pożyczyć jedną z nich Urządzenia do rzeczywiście mówić do niego
i nie trzeba się martwić o realizacja bazowego
Dane, które jest całkowicie Zgodnie z tym pojęciem z warstw
abstrakcja, że ​​mamy widoczne przez cały semestr.
>> Więc także w weekend, widziałem kilka sztuk wiadomości.
Idź pierwszy, przejdź do seminariów czy Ciebie chciałbyś dowiedzieć się czegoś
Więcej na dowolną liczbę tematów.
Zobacz tam URL.
A ten został wysłany do mi przez Changa, który wiesz,
kto drukuje naszą armię słoni.
I to był nagłówek następujący.
Jestem przerażony mojego nowego telewizora.
Dlaczego boję się włączyć ten rzecz na i was byłoby zbyt.
Więc jesteśmy teraz w wskazać w semestrze,
zbyt, gdzie nawet jeśli masz najmniejszego zrozumienia
o tym, jak działa internetowa i HTTP, i bezpieczeństwa, takie rzeczy
powinna zacząć przyciągają wzrok.
Ale także, zrozumiesz czy te rzeczy są, czy nie są
rzeczywiste zagrożenia.
>> Wziąłem więc kilka fragmentów z tego artykułu tutaj.
A historia jest następująca.
Jestem teraz właściciel Nowy Smart TV, który
obiecuje dostarczyć strumieniowe treści multimedialnych, gier, aplikacji,
social media, i internet przeglądania, oh i TV też.
Jedynym problemem jest to, że jestem teraz boi się go użyć, mówi autor.
Użytkownik będzie też, jeśli przeczytać 46 strona polityka prywatności na ekranie telewizora.
Ilość danych tego gromadzi rzeczą jest oszałamiająca.
Rejestruje, gdzie, kiedy, jak i jak długo można korzystać z telewizora.
Określa ona śledzenie plików cookie, jak już wspomniano,
i radiolatarnie przeznaczone do wykrycia, gdy masz
oglądany szczególności treści lub szczególności wiadomość e-mail
jeśli chcesz sprawdzić e-mail na ekranie telewizora.
Rejestruje aplikacje można używać, odwiedzane strony internetowe,
i jak na interakcję z zawartością, robi wszystko to za pośrednictwem Smart TV.
To również, straszniej yet-- to moja addition--
posiada wbudowany aparat fotograficzny z rozpoznawaniem twarzy.
>> Celem jest zapewnienie Sterowanie gestem do telewizora
i pozwalają, aby zalogować się do indywidualne konto za pomocą twarzy.
Na plus, obrazy są zapisane na telewizorze zamiast dodane
do serwera korporacyjnego.
Na domiar złego, Internet połączenie sprawia, że ​​cały telewizor
narażone na ataki hakerów, którzy wykazują zdolność
aby przejąć całkowitą kontrolę nad maszyną.
>> Bardziej niepokojące, jakby to nie było wystarczająco inteligentny, to mikrofon.
TV posiada głos Funkcja rozpoznawania
że pozwala widzom kontrolować Ekran z poleceń głosowych.
Ale obsługa jest wyposażony raczej złowieszcze ostrzeżenie.
Należy pamiętać, że jeśli Twoje wypowiedziane słowa to
osobiste lub inne wrażliwe informacji, że informacje
będzie jednym z przechwyconych danych i przekazywane osobom trzecim.
Zrozumiano?
Nie mów, osobiste lub ważne rzeczy przed telewizorem.
>> Więc to jest naprawdę na serio.
I trudno nie dostrzec, jeśli Ciebie idź do Best Buy lub jak w przypadku telewizorów
te dni.
Wszystkie są w jakiś sposób inteligentny.
I są one coraz mądrzejszy i straszniej.
A oni po prostu zbieranie danych w taki sposób, że rozmawialiśmy o
a następnie przesłać go za pośrednictwem protokołu HTTP lub jakiś inny protokół do jakiegoś serwera.
>> Więc to było z artykułem zabawy na tej stronie internetowej
tu, który mówił o szczególności błąd lub kod błędzie
że możemy rzeczywiście związać do zeszłotygodniowej dyskusji.
Więc to było jak nagłówek Wynika, historia toczy się tutaj,
Josh Breckman pracował Firma, która dostała kontrakt
rozwinąć zarządzanie treścią System lub CMS, jak są one nazywane,
na dość dużą stronie rządowej.
Znaczna część projektu związanego opracowanie systemu zarządzania treścią
tak, że pracownicy będą w stanie zbudować i utrzymać
ciągle zmieniających się Zawartość na ich stronie.
Poszło całkiem dobrze kilka dni po przejściu na żywo.
Ale na dzień sześć, rzeczy nie poszło tak dobrze.
Wszystkie treści na strona już całkowicie zniknął.
I wszystkie strony doprowadziły do ​​Domyślnie wpisz treść strony.
Ups.
Josh został powołany w celu zbadania i zauważyłem
Szczególnie kłopotliwe, że jeden zewnętrzny adres IP miał
poszedł i usunięte wszystkie Zawartość w systemie.
>> Adres IP nie należał zagranicznych hakerów pewnym zacięciem
zniszczyć pomocne informacje rząd.
To zdecydowane googlebot.com, Własny internetowej pająk indeksowania Google.
Ups.
Po trochę badań i kodowania wokół znaleźć noncorrupt kopii zapasowej,
Josh znaleźć problem.
>> Użytkownik nie kopiowane i wklejony pewne treści z jednego
Strona do drugiego, w tym Edycja hiperłącza
edytować treści na stronie.
Zazwyczaj nie będzie problem, ponieważ użytkownik zewnętrznej
należy wprowadzić nazwę użytkownika i hasło, ale system uwierzytelniania CMS,
system logowania, nie bierze pod uwagę
wyrafinowane hacking Techniki Google Pająk.
Ups.
>> Jak się okazuje, Google Spider nie używa
cookies, co oznacza, że ​​może łatwo ominąć czek na
jest zalogowany zestawu cookies się fałszywe.
To również nie zwrócić uwagę na JavaScript, które normalnie
monitować i przekierowywać użytkowników kto nie jest zalogowany.
Uważa jednak śledzić każdy hiperłącze na każdej stronie, stwierdzi,
w tym z Usuń stronę w tytule.
Ups.
>> Więc co to oznacza w więcej warunki techniczne, ale dość dostępne?
To po prostu oznacza, że w całej swojej stronie internetowej,
URL nie mieli tego jednego, że w przeciwieństwie do może pojawić się problem, ustawić siedem.
Przypomnijmy w problemu ustawić siedem lub wiedzieć problemu ustawić siedem
że jesteś kwestionowane, między innymi
do sprzedaży akcji w imieniu użytkowników.
Ale wdrożenie tej funkcji w drodze z się poprzez hiperłącza w swojej użytkownika
Interfejs, prawdopodobnie nie najmądrzejszy pomysł
ponieważ jeśli witryna jest w jakiś sposób dostępne, albo przez człowieka
kto klikając wokół lub kupić bot jak Google czy Spider
jak nazywa się to tylko indeksowania internetu próbuje indeksu
WWW w wyszukiwarce, mogli bardzo łatwo
uderzyć poprzez uzyskać tego rodzaju URL.
I to jest funkcjonalnie odpowiednik, w tym przypadku,
sprzedaży wszystkich akcji Google.
>> Teraz szczerze mówiąc, jest to całkowicie głupi, że CMS
Używane JavaScript i pliki cookie wdrożyć swój system logowania
i nie robi tego po stronie serwera, jak robicie i będzie w Pset 7--
tam login.php file-- zawsze, zawsze,
Bezpieczeństwo powinno być zawsze wykonane na stronie serwera
Nie po stronie klienta, ponieważ, jak to Artykuł sugeruje, a może się
zobaczyć, w pewnym momencie, to jest trywialne dla użytkownika, dobre lub złe,
po prostu wyłączyć JavaScript nie wspominając o cookie.
Więc to jest dzienny WTF.
>> Jest jeszcze jedna, która jest tylko trochę przerażające,
więc będę wspominać, gdyby tylko jako lekcja życia.
Każdym użyciu aplikacji nazywa jak Snapchat lub podobne
które mówi, że te zdjęcia tylko przez pięć sekund, dziesięć sekund, lub cokolwiek.
Są ulotne To absolutnie nie w tym przypadku.
Podobnie jak nie ma sposobu, cyfrowo, wdrożyć jakąś formę wideo,
lub obrazu, lub udostępnianie takich tekstowe że odbiorca na drugim końcu
nie można jakoś zapisać dane.
>> W najbardziej naiwny sposób, ktoś może wziąć swój telefon.
I mają drugie okno 10 patrząc na jakiś zatrzask
po prostu wziąć jakiś inny telefon i sfotografować go, oczywiście.
Tak więc można zachować coś cyfrowo w taki sposób.
Niektórzy z was wiedzą, jak zrobić zrzuty ekranu w telefonie.
W rzeczywistości, jeśli nie wiedzą o tym, sobie sprawę, że co najmniej Snapchat,
i myślę, że inne Aplikacje te dni,
przynajmniej powiedzieć, czy odbiorca ma rzeczywiście
podjąć zrzut obrazu.
>> Ale co gorsza, był to snappening, jak ktoś użył go niedawno,
gdzie 100,000 zatrzaskami został zwolniony
w tym, co nazywa się plik torrent na różnych stronach internetowych ostatecznie.
A te zawierały całą masę prywatnych wiadomości i postów.
Okazuje się, że większość z nich łagodne, tak, nie to, co można się spodziewać.
Ale ponieważ ludzie mieli używane na stronie internetowej strony trzeciej,
zalogowaniu z ich Snapchat nazwa użytkownika i hasło, a następnie
zapisywanie wszystkich swoich zatrzaskami na tej stronie przez osoby trzecie.
I to było to, że osoba trzecia stronie internetowej, że włamał,
które po prostu oznaczało, zorientowali się, jak ktoś uzyskać wszystkie 100.000 plusa tych obrazów
na własnym dysku twardym do późniejszej wymiany.
Szczerze mówiąc, tu też jest to rodzaj z asinine że Snapchat
jest realizowany w taki sposób, że strona trzecia może rozwiązać z osią
dane i że nie jest przywiązany do swojej Aplikacja działa na własnym telefonie.
Ale tu też sobie sprawę, że te rzeczy nie powinno się złapać z zaskoczenia,
lub przynajmniej nie powinny być lekcją życia tutaj.
Jeśli chcesz techniczne szczegółowe informacje, przejdź do tego adresu URL nie
to w dzisiejszych slajdów.
Wszystko w porządku, wszelkie pytania dotyczące dzisiejsze lekcje życia w CS?
Wyłącz to.
Coś w ogóle?
Mam dużo ludzi sprawdzanie ich Snapchat czy coś teraz.
>> W porządku, więc SQL, Structured Query Language.
Miejmy owinąć to.
A także, choć jesteśmy tylko zarysowania
Powierzchnia tego język, podamy
dość języku w postaci PSET 7
tak, że można rozwiązać niektóre dość powszechne funkcjonalność.
Ale sobie sprawę, istnieje kilka rzeczy, które nie wymagają od Ciebie,
ale masz zamiar być ważne przyjść projekty końcowe
a na pewno przyjdzie co rzeczywiste stron internetowych z rzeczywistych użytkowników
jest to decyzja projektu.
>> Okazuje się, że w bazy danych MySQL, można
mają wyboru, jak bukiety typy danych w kolumnach
i inne rzeczy, ale również Wybór tak zwanego składowania
Silnik do wszystkich danych, rodzaj systemu plików,
jeśli znasz, dla wszystkich danych.
W jakim formacie jest zapisany w końcu?
I najczęściej, być może, jest MyISAM i InnoDB, warunki techniczne
że będziemy dbać o tylko w takim stopniu, że trzeba
i nie ma Poniższa funkcja.
>> Załóżmy, że masz mały akademik lodówka.
I przypuszczam, że ty i twój współlokator, którzy dzielą tę lodówkę,
są naprawdę lubi mleka powiedzieć.
I to, w rzeczywistości, w jaki historia powiedziano mi w drodze powrotnej
w dniu, kiedy się na kurs nazwie CS 161 Systemy operacyjne, które
podobnie bada ten wątek.
Więc masz to lodówka.
Jesteś z mlekiem.
I wrócić do domu, twój współlokator na jeszcze w klasie lub cokolwiek,
i zdecydować, zamierzam wyjść i trochę mleka.
Więc zamknąć lodówkę, zablokowanie pokój w akademiku, przejść przez ulicę
CVS lub gdziekolwiek i uzyskać w kolejce, aby kupić mleko.
>> Tymczasem twój współlokator wróci do domu z klasy, dostaje się do pokoju w akademiku,
otwiera lodówkę, również zdaje sobie sprawę, ooph, jesteśmy z mlekiem.
Więc on zamyka lodówka i wtedy się dzieje
aby przejść do innego CVS, co zdarza się
jedną przecznicę od innych CVS na placu, i dostaje w linii
tam po mleko.
Teraz, oczywiście, kilka minut później, jak wrócę,
i najgorsze możliwe Wyniki stało.
Oboje mają mleko.
I tak naprawdę nie jak mleko, że dużo.
Tak więc jednym z nich jest po prostu dzieje się psuć w pewnym momencie.
Więc teraz mają nadmiernie mleka w lodówce wszystko dlatego, dlaczego?
>> [Niesłyszalne]
DAVID MALAN: Tak, nie jakiś ze sobą komunikować
że były coraz mleko.
Zatem w najprostszym sposoby, w świecie ludzi,
jak można tego uniknąć głupie taki scenariusz dzieje
że tylko skończy się jeden.
Tekst je tak dobrze.
Ale jak inaczej?
Post-it.
DAVID MALAN: Post-it notatki.
Każda forma komunikacji że opowiada swoją współlokatorkę
nie idź do lodówki do mleka.
Mam zamiar iść uzupełniania zapasów na własną rękę.
Więc jakoś trzeba aby zablokować tę część witryny.
Więc możemy this-- możemy rodzaju zrujnować historię i przekształcić się w historii CS
przy czym myśleć o tym, jak po prostu jak zmienny, który przechowuje pewną wartość.
I właśnie teraz, Wartość mleka jest zero,
które nie chcą się współlokatorka do kontroli tej zmiennej
a następnie podjąć decyzję, czy się go na podstawie stanu zmiennej
jeśli jesteś w trakcie zmiana stanu tej zmiennej.
>> Tak więc jednym z wierszy, że SQL dać w Pset 7 specyfikacji
Jest to jeden tutaj.
A my nie wydawać ogromne czas o tym mówić.
Ale okazuje się, jeśli próbujesz kupić trochę akcji w CS50 finansów
że masz już niektóre akcje, ciebie
chcesz być w stanie zrobić wiele rzeczy tam razem.
Chcesz być w stanie faktycznie na wysokim poziomie
sprawdzić wszelkie prawa, jeśli chcę kupić więcej akcji bezpłatnych,
mamy grosza rozmawiać w specyfikacji,
Chcę pierwszej kontroli ile akcji mam.
I przypuszczam, że to pięć.
I przypuśćmy, że chcę kupić 10 więcej, ostatecznie
chce mieć 15 akcji zapasów.
Więc muszę zadać dwa pytania.
Co Stan zmiennej?
Co znajduje się w wierszu stanu?
Ile akcji mogę obecnie?
Następnie chcesz iść do przodu i go zaktualizować.
Więc to analogowo mleko w sprawdzenie wiersz,
i chcesz go uaktualnić bo jeśli chcesz kupić 10 akcji
nie chcesz, aby zmienić wiersz 10, można
chce go zmienić na 5 plus 10 lub, oczywiście, 15.
>> Ta linia kodu zapewnia, że te dwa pomysły koncepcyjne
stało razem albo wcale.
Nikt, łącznie z innym użytkownikiem kto jest zalogowany na tej samej stronie internetowej,
można jakoś przerwać sprawdzanie rzędu
i aktualizowanie rzędu wybrać i aktualizacji, jeśli będzie.
I składnia nie jest super oczywiste, ale ten wiersz, to jest długa,
zapewnia, że ​​te dwie operacje sprawdzić zmienną lub sprawdzić wiersz
i zaktualizować wiersz zdarzyć atomowo.
>> Och, znowu to samo.
Wiadomość SMS na mój telefon.
Warto więc zrobić to trochę bardziej konkretne.
Załóżmy, że nie jesteś realizacji lodówkę,
i nie masz realizacji Pset 7 ale rzeczywisty bank,
lub ATM Automated Teller Maszyna, której cię jakoś
chcesz być w stanie wzmocnić użytkowników, aby przelać pieniądze
z jednego rachunku na inny.
OK, poczekaj.
Mam zamiar wyciszyć to teraz, dziękuję.
Dlatego chcemy, aby przenieść pieniądze z jednym numerem rachunku
do innego konta liczba, szczególnie 100 dolarów.
Jest to więc rodzaj arbitralne Przykładem, w którym jesteś, bankomat,
Może chcesz wykonać dwa SQL Zapytania, odejmowanie z jednego konta,
i dodać do innego konta.
Ale chcesz mieć pewność, że te dwie linie zarówno zdarzyć lub wcale.
Nie chcesz coś coraz przerwany.
Nie masz jakiś sprytny zły jakoś stoi w Bank of America
z dwóch bankomatów w przód o nim i jakoś
rodzaj wpisując Polecenia w tym samym czasie,
mam nadzieję, że próbuje do odliczenia 200 dolarów zamiast od $ 100 i tylko o 100 dolarów przelane.
W skrócie, chcesz tego, aby zachowywać się dokładnie tak, jak można się spodziewać.
>> I sposób zrobić Ta baza danych jest w SQL
zawinąć go w co nazywa transakcji.
Dosłownie w SQL, możesz zadzwonić CS50 na Funkcja zapytania z cytatu początku
transakcji.
Następnie można wykonać dowolną liczbę kolejnych zapytań SQL,
ale żaden z nich wziąć Wpływ na bazie danych
do czasu wywołania zapytania cytatu popełnić, jeśli ponownie PHP.
I w ten sposób można zapewnić, że nawet jeśli masz tysiące użytkowników wszystkich
uderzanie bazy danych w tym samym czasie, SQL
Obiecuję, że to będzie Zapytania będą dwa
realizowane jeden po drugim.
Więc nie kończy się z nadmiarem mleko lub źle kwota ostatecznie
pieniędzy.
>> Dlatego należy mieć to na uwadze, nie tyle dla Pset 7
ale dla projektów końcowych jeśli jesteś naprawdę
próbuje przenieść dane ok w całej tabeli, jak to polubisz tutaj.
Ale może jeszcze prostsze i bardziej oczywiste, aby zrozumieć na przykładzie
Jest to jeden tutaj.
I ktoś nam o maila to po prostu na drugi dzień
kiedy zobaczył coś podobnego w Internecie.
>> Tak więc do mojej wiedzy, system pin nie jest podatny na ten atak.
I nie mam pojęcia, czy to jeszcze zastosowania Baza danych SQL pod wyciągiem.
Ale użyjmy go do sake dyskusji.
Oto ekran Ludzie mają tendencję Harvard
zobaczyć podczas logowania z ich Numer ID i ich Harvard pin.
I przypuszczam, że system pin były wdrażane w PHP i MySQL z
baza danych, kod, który ktoś mogło pisemne lat temu
może wyglądać tak.
Najpierw zadeklarować zmienna o nazwie nazwa.
I po prostu, że od superglobalną POST.
Zapraszamy zatem do innej zmiennej nazywa hasło i zrobić to samo.
A potem po prostu wykonać zapytanie tutaj tak długo,
wybierz z użytkowników gdzie gwiazda nazwa użytkownika odpowiada taki a taki
i hasło równa taki a taki.
>> Zauważ, że kręcone szelki Użyłem tutaj
oznacza jedynie do PHP, przejdź dalej i zastąpić
Wartość tych dwóch zmienne tam.
Oni nie są bezwzględnie konieczne, ale mają tendencję, aby uniknąć subtelnych błędów składni.
Tak to wygląda w całości Na pierwszy rzut oka poprawne.
I to jest.
Można wdrożyć Układ pinów w ten sposób.
>> Ale załóżmy, że super inteligentny i złośliwy uczeń
Wejście to jako jego pin.
Więc usunęliśmy kulę Znaki tutaj w makiety,
a ja rzeczywiście objawił co może być on pisania.
I to jest trochę dziwne.
Ale to, co wyskakuje na ciebie na potencjalnie niepokojące o wejściu użytkownika,
nawet jeśli nie masz pojęcia, co Atak SQL injection oznacza.
Dlaczego to wygląda trochę podejrzane?
Co to jest?
[Niesłyszalne]
DAVID MALAN: czy jest trochę podejrzane.
W rzeczywistości, to jest kluczowe z SQL.
Tak, że nie wróży dobrze.
Fakt, że nie ma wszystkie te pojedyncze cudzysłowy
there-- w rzeczywistości, jeden z najłatwiej sposoby złamać kilka baz danych
to wpisując w nazwie typu O'Reilly że ma w nim apostrof
bo jeśli człowiek, który napisał Kod za kulisami
nie bierze pod uwagę, że nie mogą być pojedyncze cudzysłowy w użytkownika
wejście, a on lub ona jest za pomocą pojedyncze cudzysłowy w ich kodu,
złe rzeczy mogą się zdarzyć.
>> W rzeczywistości, co gorsza, za to.
Jeśli to był kolejny kod że ktoś w latach Harvard
temu napisał na kołku System, zauważyć co
o, aby podstawione dla nazwy użytkownika i hasła
jeśli użytkownik wpisze ponownie skroob jak nazwy użytkownika
i jeden, dwa, trzy, cztery, pięć, cytat lub cytatu jeden równa
Cytując jednego.
I zauważyć, co jest kluczem tutaj jest użytkownik nie
zaczął ich hasło lub ich pin z cytatem.
A oni go nie zakończył z cytatu, ponieważ on lub ona
przy założeniu, że w przypadku programista nie był tak ostry,
oni będą mieć ci, pojedyncze cudzysłowy w ich kodzie.
>> Więc oto kod.
I podstawienia Może teraz to się stało.
I podkreślił, co mam Filmaster wpisane.
Tak przed, po.
I zauważyć, co jest lekko niepokojące teraz o prawej połowie tego kodu SQL?
To trochę bardziej skomplikowane, co prawda, niż zapytań widzieliśmy.
Ale to nie może być może być dobre, jeśli jesteś
mówiąc: wybierz gwiazdę, która jest wybrać wszystko z tabeli użytkownika
gdzie nazwa_użytkownika odpowiada skroob i hasło jest równy jeden, dwa, trzy, cztery,
pięć lub jeden równa się jeden.
Co logiczne implikacje tej ostatniej klauzuli przypuszczalnie?
To jest po prostu zawsze prawdziwe.
>> I dlatego, że jakby odgadł lub zorientowali się, metodą prób i błędów
że programista, który napisał ten kod nie
Przewidujemy osobę ludzką lub złe wpisując w pojedynczych cudzysłowach, jak również,
możemy składniowo wykonać zapytanie SQL
z czymś bezsensownym ale coś, co
jest niepoprawne składniowo że zawsze wartość true.
Więc jeśli ten kod jest używany, aby odpowiedzieć Pytanie powinno prawda lub fałsz
użytkownik może przechodzić, Odpowiedź jest zawsze najwyraźniej dzieje
aby mogło być prawdziwe, bo to zawsze będzie aby wybrać coś z bazy danych
ponieważ jeden oczywiście zawsze równa się jeden.
>> Więc co to jest rozwiązanie?
Cóż w Pset 7, faktycznie uniknąć tego wszystkiego razem.
Dajemy Ci funkcję zapytania, a my zachęcamy do korzystania z znaki zapytania
jako zastępcze, podobne w duchu do printf w% s,
ale co jest kluczem o znaki zapytania tutaj jest, jeśli rzeczywiście przeczytać
functions.php, gdzie nasze Funkcja zapytanie jest realizowane,
te znaki zapytania są uciekł, w którym coś potencjalnie niebezpieczne
jak apostrof jest włączony do zbiegłego jednego cytatu.
>> Więc to, co jest naprawdę się dzieje, jeśli Ciebie
użyć funkcji zapytań CS50 lub każdą liczbę od osób trzecich wolnych bibliotek
zrobić to samo.
Nie ma znaczenia w tym przypadku, w kolorze zielonym, jeśli użytkownik wpisane w jednym cytatem
ponieważ zapytania funkcja pisaliśmy jest
zamiar dodać backslashy przed takie niebezpieczne cytat.
Więc to nie jest w Fakt, będzie legit.
To jest jak pisanie w szalony szuka Hasło to jest, oczywiście, nie będzie
być rzeczywisty hasło skroob jest.
>> Więc na wynos dla CS50 jest jeden, Zawsze używać coś absolutnie
jak w funkcji zapytania CS50 lub podstawowa biblioteka,
co zdarza się nazywać PDO.
Ale nigdy, nigdy, nigdy tak nie kod
bez ucieczki lub szorowanie jak mówią wasze wejścia.
I w pewnym momencie będzie prawdopodobnie natknąć się strony jak ta.
W rzeczywistości wydaje się, że przypadek jak na lotniskach i hotelach w miejscach
gdzie mają bezpłatny bezprzewodowy dostęp do Internetu dostępu, który musiał się zalogować, aby,
strony te są zawsze strasznie realizowane.
I tak rodzaj zabawy w domu ćwiczenia, nie do szkodliwych celów lub więcej
z zabawy na drodze ćwiczenia, to po prostu wpisz
apostrof, apostrof, w formularzu na jakimś stronie
i zobaczyć co się dzieje.
A jeśli serwer wywala lub daje masz jakiś komunikat o błędzie,
może być bardzo dobrze, że ktoś nie przewidział tego.
I wtedy należy powiadomić właściwe Władze i przejdź dalej.
>> Więc teraz mam nadzieję, że chłopaki powinni zrozumieć trochę więcej maniakiem humoru tutaj.
>> [Śmiech]
DAVID MALAN: Wiesz, że jesteś maniakiem.
Przez kilka następnych lat, będziesz pamiętać
który jest mało Bobby Stoły z powodu tej kreskówki tutaj.
Miejcie to na uwadze, jak my przełączanie kontekstu raz ostatni
dzisiaj do JavaScript.
Spędziliśmy stosunkowo niewiele Czas na składni PHP
bo to rzeczywiście bardzo podobny do C
I na tyle dobrze, JavaScript zbyt jest bardzo podobna do składni C w
jak zobaczymy w tylko chwila i jak my będziemy
zobaczyć jeszcze w tym tygodniu w szczególności.
Co można zrobić z tym językiem, choć jest bardziej wydajne,
zwłaszcza z API.
>> Ale najpierw szybkie zwiedzanie.
Tak jeden, w JavaScript, jest nie główną funkcją, która jest miła.
Jak w PHP, możesz po prostu napisać kod.
Warunki wyglądać.
I wyrażenia logiczne moc wyglądać tak lub tak.
Istnieją przełączniki, a oni może wyglądać tak.
Cztery pętle wyglądać.
Podczas gdy pętle wyglądać.
Czy chwilami wyglądać.
I wtedy wyglądać tablice ten, bardzo podobny do PHP.
Ale zauważmy, że w JavaScript Ciebie zadeklarować zmienną nie z dolara
podpisać, a nie z typem danych, ale dosłownie mówiąc var dla zmiennej przed nim.
To zbyt luźno wpisane tym, że zawiera typy,
ale nie jawnie zadeklarować je.
A potem łańcuch, na przykład, może wyglądać
jak to, że ciąg nazywany jest w tej sprawie.
A następnie obiekt.
I będziemy je widzimy więcej wkrótce.
I obiekt jest chyba jednym z najczęściej postrzegane struktury danych
w oparciu o JavaScript Program ponieważ umożliwia
skojarzenie arbitralne Kluczowe tylko pary wartości
jak tablice asocjacyjne PHP i tak jak własnego tabeli mieszania
lub spróbuj jak wdrożyliśmy kilka tygodni temu.
Warto więc zobaczyć, co rzeczywiście możemy zrobić z JavaScript.
W szczególności, to jest Lista funkcji prania
że przeglądarki mają, że pozwalają nam podłączyć JavaScript
na stronie internetowej w następujący sposób.
JavaScript jest często używany jako po stronie klienta językiem skryptowym.
To nie jest skompilowany.
To też jest interpretowane.
Ale w przeciwieństwie do PHP, który został uruchomiony na serwerze, na serwerze WWW
lub głęboko wewnątrz Klienci, JavaScript
różni się pod tym względem, że zwykle działa w przeglądarce.
>> Więc każdy kod JavaScript zacząć pisać dla Pset 8 lub ostatecznego projektu,
lub w realnym świecie jest zwykle dzieje być zapisywane na serwerze, absolutnie
kropka w kropkę HTML lub JS do pliku JavaScript.
Ale przeglądarka będzie ściągnąć że JavaScript
Kod do własnej instancji Chrome lub IE lub Firefox, lub cokolwiek.
I kod faktycznie się dostać wykonywane wewnątrz własnej przeglądarce.
Wystarczy, aby to bardziej realne, Zobaczmy to w formie betonowej.
>> Nie mamy pojęcia, co ten kod robi bez naprawdę czytanie przez niego.
Ale pozwól mi iść do Facebook.com bez logowania.
Pozwólcie mi iść do kontroli i przejdź do elementu, powiedzmy, sieci i przeładuj stronę.
A my see-- pozwól mi przesunąć przeładować Strona aby wszystkie żądania do nowego.
I pierwszy Widzę to plik CSS, CSS.
Oto pierwszy JavaScript plik i mam
nie wiem co to robi, ale tutaj jest część kodu JavaScript
która napędza Facebooka.
To nie jest nawet bardzo, że ujawniając, aby powiększyć.
To wciąż tak samo bezsensowne.
>> Ale zobaczysz, nawet na dole, tam jeszcze z tych plików JavaScript.
Ups.
To ping.
Chodźmy trochę Ponadto, dalej dalej.
Jest jeden.
>> Więc nawet jeśli Facebooku, za Sceny, w części jest napisane w PHP
i jego własnej Facebooka wersja istnieje ogromna ilość JavaScript.
W rzeczywistości, każdy z czacie robisz na Facebooku,
którykolwiek z aktualizacji inline osi czasu zdarzyć, że w czasie rzeczywistym, to wszystko
jest napędzany przez JavaScript.
Tak?
>> Publiczność: Nie jestem pewien, czy to jest Facebook,
ale myślałem, że Facebook opracowany ich własny język w domu kod?
DAVID MALAN: Robili.
Więc dlatego mówię o wariancji PHP o nazwie Hip Hop, że faktycznie
dodatkowe funkcje takie, że gdy do Zaznacz pierwszy realizowany Facebooka,
został napisany w PHP.
I tego rodzaju pozostaje rodzaj języka końcowego przodu
że używają o wiele ich kodowania, ale to
nie był to język Wagi szczególnie dobrze do miliardów
ludzi.
I tak mają dodaje własne ulepszenia za kulisami.
I korzystać z dowolnej liczby w innych językach
z różnych kawałków ich infrastruktury.
Więc tak, to wariancja co teraz wiemy, jak PHP.
>> Warto więc spojrzeć na kilka przykładów
w jaki sposób możemy wykorzystać tu JavaScript.
W dzisiejszym kodu źródłowego, mamy kilka plików, z których pierwszy,
niech nazywa DOM zero.
Więc DOM zera wygląda następująco.
Pozwól mi wejść do tego katalogu i otworzyć domzero.html,
góry, które ma typ doc oświadczenie, mówiąc, tutaj jest HTML 5.
I teraz oto znacznik HTML.
Oto tag głowy.
A oto co nowego dzisiaj.
>> Mamy teraz znacznika script wewnątrz głowicy strony.
I to najwyraźniej nie bardzo mało, ale informacja
że mam określony skrypt JavaScript.
I jak na bok, ponieważ jest błędne,
JavaScript ma absolutnie nic do czynienia z języka Java,
że niektórzy z was mogą dowiedzieliśmy się w APC.
To było bardziej marketingu rzeczą, niż cokolwiek,
jazda coattails lat Java temu.
Ale obsługa JavaScript, nic wspólnego z Java, tak podobnie i irytująco,
łudząco nazwie.
>> Więc o to, w jaki sposób zadeklarować funkcję w JavaScript, dosłownie znaczy funkcji,
Następnie nazwa funkcji Argumenty to każdy może podjąć,
tak jak w PHP.
Okazuje się, że w JavaScript, jednego z najbardziej irytujące funkcje, które istnieją jest Alert.
To jest małe okienko, które pojawi się i ostrzegają
do pewnego fragmentu informacji.
To zwykle mile widziana.
Ale będziemy używać go jako naszego Pierwsze ćwiczenie tutaj.
>> Zauważyć kilka cech JavaScript.
Pojedyncze i podwójne cytaty cytaty faktycznie nie ma już znaczenia.
Pojedyncze i podwójne cudzysłowy cytaty mogą być wymieniane,
natomiast w C, należy użyć cudzysłowy dla ciągów,
i masz dwa pojedyncze cytuje dla znaków.
W świecie, JavaScript, wielu ludzi, większość ludzi
używać apostrofów wokół strun tylko dlatego, że stylistyczne rzecz.
Ale co to za operator oraz tutaj których nie widzieliśmy wcześniej?
>> Publiczność: Łączenie.
DAVID MALAN: Łączenie.
Tak więc C nie ma nawet tego.
PHP ma operatora kropki, który to robi.
JavaScript ma operatora plusa, które łudząco jest jak Java.
Teraz to, co się tutaj dzieje?
>> Tak tu jest, gdzie podstawowym Zrozumienie tego obrazu
rzuciliśmy się kilka dni temu wchodzi w grę.
Pamiętaj, kiedy mieliśmy proste wersja HTML page--
po prostu powiedział, hello world.
A potem zwrócił drzewo z prawej strony, który
miał kilka prostokątów i linii łącząc je jak drzewa genealogicznego.
Więc to jest tak zwany DOM lub Document Object model.
I okazuje się, że można uzyskać dostęp do prostokąty w tym drzewie składni
jak poniżej.
Dosłownie znaczy dokument, który jest Specjalna zmienna globalna w JavaScript
Program, który ma funkcję z nim związane, które można uzyskać dostęp do
podobne do struct, ale po prostu powiedzieć, kropki, a następnie nazwa funkcji,
uzyskać elementu przez ID.
>> Element chcę dostać to najwyraźniej cytatu nazwę.
A potem chcę się jej wartość.
Teraz jesteśmy coraz dalej od siebie.
Nie jestem nawet pewien, co w tym wszystkim chodzi.
Miejmy przodu do HTML na strona, która jest bardzo prosta.
>> Uwaga, mam określony tworzą tutaj.
Zauważ Dałem mu wyjątkowy ID, mimo że nie zostały wykorzystane
atrybut ten przed.
Ale istnieje w HTML.
Można jednoznacznie zidentyfikować którąś HTML z identyfikatorem takiego.
>> Zawiadomienie teraz this-- okazuje HTML wspiera, na tej liście do prania
Chwilę temu, cały banda obsługi zdarzeń.
I to mówi na obsługa zdarzeń złożyć.
W sprawie przekazywania tego użytkownika Formularz należy wywołać następujący kod.
I kod, który będzie nazywać lub wykonany
jest dokładnie to, grecki Funkcja następnie return false.
Wszystko inne powinno być dość znajomo.
>> Tutaj jest wejście typu tekstu, którego ID, w tym przypadku, będzie nazwa.
Nie mamy rzeczywisty atrybut name to time-- i przycisk submit.
Tak powstała strona wygląda tak.
I otrzymany zachowanie zobaczysz, wygląda tak.
Strona go lokalne gospodarze mówi cześć David, mało estetyczne
sposób pozdrowić użytkownika.
Ale co się właściwie dzieje?
>> Cóż, za to, co to jest.
Jest to pole tekstowe.
I zgodnie z Kopiuj tutaj, dałem go
unikalny identyfikator nazywa cytatu nazwa.
Tymczasem, gdy mówiłem użytkownik przesyła ten formularz
naciskając Enter lub klikając Zatwierdź przycisk, wywołać funkcję o nazwie Pozdrówcie
a następnie return false.
Rozważmy te, w odwrotnej kolejności.
Zauważ, kiedy kliknij przycisk Prześlij, Adres URL tej strony nie zmienia.
Ikona przeglądarki nie zaczną obracać.
Nie idź nigdzie, i to dosłownie, bo powiedział return false.
Return false zwarć lub zatrzymuje domyślne zachowanie formularza.
Tak, że to pozostawia nas z to jedno ostatnie pytanie.
Co Pozdrówcie zrobić?
Cóż, najwyraźniej Greet wywołuje funkcję o nazwie
Alert, przechodzi w jednym Argument, że to długo
Wynik złączenie razem kilka podciągów, witaj miejsce przecinka,
to co to zwraca.
Tak więc dokument jest jak globalne zmienna do tego korzenia tego drzewa,
wywołanie specjalnej funkcji, inaczej obecnie znane jako metody.
Funkcja jest Wnętrze jest zmienna
zwana metoda zamiast funkcję.
>> Więc elementu przez ID.
Co elementem prawda chcą, aby przez jego ID?
Koniec cytatu nazwę i to specjalnie cenią.
Tak więc, innymi słowy, że kod po prostu znajduje się pole tekstowe, którego ID to nazwa
a następnie dostaje jej wartość.
Więc gdybym miał to zmienić i powiedzieć, Davina zamiast Dawida,
i kliknij przycisk Prześlij, teraz masz pozdrowienia dla Davina.
>> W porządku, więc wszystko jest w porządku i dobre.
Ale zobaczymy, czy możemy to trochę czystsze, ponieważ tylko
pisania kodu, jak to jest ogół będzie mile widziana.
To będzie wyglądać bardziej przerażające.
Ale co jest pierwszą różnicą, że można zauważyć tutaj
W tej wersji oprócz wymienić zmianę jednego DOM?
Co strukturalnie wygląda inaczej o tym kontra inne?
Tak?
PUBLICZNOŚCI: Czy forma na top skryptu teraz?
DAVID MALAN: Tak, formularz znajduje się na górze skryptu dla niektórych ciekawy powód.
Więc to jest pierwsza rzecz, że wyskakuje na mnie też.
I na szczęście przynajmniej, ta część jest identyczna.
Tak więc jedyną rzeczą, która wydaje być różny jest następująca.
>> Więc tutaj jest to, co jest miłe o JavaScripcie 2.
I to sprawia, że ​​trudno zrozumieć, na pierwszy rzut oka,
szczególnie dla końcowych projektów jeżeli patrzysz na przykładowy kod online
ale to sprowadza się do kilku podstawowe funkcje składniowe.
Jest tu ponownie to, że zmienna globalna dokument.
Tu znowu jest to, że metoda lub funkcja że mówi się elementu przez ID.
Tym razem chcę uzyskać identyfikator o nazwie demo.
Gdzie to jest?
To najwyraźniej rację tutaj sama forma.
>> A teraz zauważyć, że najwyraźniej jeśli wrócić, że węzeł z drzewa,
stanowi formę Sam, nie pole tekstowe,
Okazuje się, że postać, która węzeł lub prostokąt z drzewa,
ma to, co my nazywamy nieruchomości, bardzo, bardzo, bardzo podobne
w duchu do struct w C To tylko członek danych wewnątrz tego prostokąta.
>> Więc mam formularz tutaj, a ja mocowania,
czy jestem przypisanie do jego Na Zatwierdź obsługi lub raczej na Zatwierdź własności
Poniższa funkcja.
I to jest, jak dotąd, najbardziej szalona co do tej pory składniowo.
Okazuje się w JavaScript i PHP, i szczerze mówiąc o to chodzi w C,
nawet jeśli nie to zrobić, możesz dodać bezimienny, anonimowy lub AKA lambda
Funkcje, które nie mają nazwy ale mimo to można nazwać.
>> Więc co ja robię tu ja przypisanie to On Prześlij nieruchomości, które
jest wewnątrz tego węzła mojego drzewa DOM, funkcja, funkcja wskaźnika, jeśli będzie.
Funkcja ta nie ma wymienić, ale to nie robi
znaczenia, ponieważ zobaczymy w jednej chwili, jak to nazwać.
Gdy ta funkcja jest wywoływana, ten kod zostanie wykonany, a następnie
zwraca false, tak jak wcześniej.
>> Zauważmy jednak, co zrobiłem.
W tym momencie w historia, Mam formularz.
Ma unikatowy identyfikator o nazwie demo.
Tu mam znacznika script które wykonuje następujący kod.
Przywiązuje do tego węzła drzewa na to na Zatwierdź
Nieruchomość ta funkcja tutaj.
I tylko przez naturę, jak działają przeglądarki, kiedy teraz kliknij Wyślij lub naciśnij klawisz Enter,
że funkcja będzie się nazywa.
To nie potrzebuje nazwy bo kto do cholery obchodzi, jak się nazywa.
Tylko raz to zawsze dostanie nazywane jest to, kiedy wysłać formularz.
Nie ma potrzeby, dla mnie, deweloper człowieka,
faktycznie nazywają to nigdzie indziej.
>> Teraz, tak jak teaser, jakby to gięcia nie przeszkadza na tyle,
możemy nawet zrobić to wyglądają bardziej tajemnicze korzystania
bardzo popularna biblioteka o nazwie jQuery.
W rzeczywistości jQuery i JavaScript często łączyła.
A co zrobimy w środę jest początek za pomocą tego języka i tych bibliotek
budować coraz asynchroniczny i dynamiczne aplikacje
jak mapa się aplikacje, aplikacje
że aktualizować stronę w rzeczywistym Czas, podobnie jak Facebook lub Gchat
zrobić, a nie ograniczać się do trafienie Zatwierdź przez GET lub tylko pocztą
sam.
Więc widzę cię w środę.
>> [MUZYKA GRY]