DAVID J. Malan: Добре, така че това тук е рамото Myo лента, няколко от които ние имат за CS50 окончателните проекти. И това беше демонстрация ние, чакащи на опашката ти в предварително къде същество това доста здраво ръката бандов тук слуша вашите мускулни движения които след това картирани в софтуера за лаптоп Колтън е тук, които трябваше качи и че песен вече наредени на опашка нагоре. Вместо да ме demoing това, Колтън е бил в лабораторията ясно през цялата седмица получаване на демонстрация Пригответе се за един смел доброволец. Ако някой би искал да се на up-- видя ръката си на първо място. Хайде нагоре. [00:01:09] Добре. А какво е вашето име? [00:01:13] АУДИТОРИЯ: Uh, Мария. [00:01:14] DAVID J. Malan: Мария, е хубаво да те видя. Ела тук. Позволете ми да ви запозная с Колтън. Колтън, това е Мария. [00:01:21] COLTON: Здравейте, хубаво е да се запознаем. [00:01:23] DAVID J. Malan: All Добре, така че първата стъпка, ние сме ще трябва да поставите това, за да си предмишница така че това е доста плътно до близо до лакътя. А междувременно, нека да сложи на нашата Google Glass и ние ще се смесват технологии днес. [00:01:33] COLTON: Първо ще трябва да кука това в нещата. [00:01:36] DAVID J. Malan: OK. Всъщност, нека да сложи ръката си като в близост до този кабел е възможно така че за първи път може да го синхронизира. [00:01:41] COLTON: Нека да направим това. [00:01:42] DAVID J. Malan: А междувременно, така че че всеки може да получите по-близо поглед, ние ще хвърля камера Андрю на екрана има. Така че ние имаме един USB кабел, който е е включен в лента на Мария. И позволете ми да хвърля екран Колтън е нагоре на проектора следващата. [00:02:00] Така че Колтън се регистрирате устройството сега като Myo свързан с този кабел. И сега какво Мария ще направим кратко всъщност преведе през стъпки за калибриране и научи софтуера как мускулите й отговорят когато тя се направят някои предварително определени жестове, че софтуерът разбира. Ако искате да отидете в пред екрана. OK, продължаваме да опитваме. [00:02:30] COLTON: Върви по този начин. И така. И по целия път надясно. Върни се обратно. [00:02:35] DAVID J. Malan: OK. Различна гледна точка. Това не си ти. Тя ни е. [00:02:40] MARIA: OK. DAVID J. Malan: No. Нека да го преместите по-нагоре, така че е близо до лакътя си, или още по-силно. Добре. [00:02:52] Ето ни. Това би било добро време за CS52X. Има отидем. [00:02:57] Много хубаво. OK. Thumb на Пинки. [00:03:02] Много хубаво. Спред пръстите си. Добре. Wave право. Това е странно, показващ вие с левия hand-- [00:03:17] COLTON: Да, това е странно. DAVID J. Malan: Wave да правото и да се премести напред. Бързо превъртане напред, за да пропуснете или следващата. Това е ОК, прав Wave. [00:03:25] МАРИЯ: Аз don't-- чака. [00:03:26] DAVID J. Malan: Нуждаете се от помощ? [00:03:28] COLTON: Значи ти започваш по този начин. МАРИЯ: Това е превръщането на друго нещо, все пак. COLTON: Така е. DAVID J. Malan: Да, аз не знам защо се показва ви leftie. COLTON: Защо не try-- Просто се опитвам става по този начин. [00:03:38] DAVID J. Malan: Не? Може да достигне ръката си отдалечи малко поизправи и да я направи по-рязко по този начин. Да, добре, хайде. [00:03:48] MARIA: Съжалявам. DAVID J. Malan: Това не е по твоя вина. COLTON: Това е добре. DAVID J. Malan: All Right. Well-- [00:03:56] MARIA: Трябва ли да пропуснете това, тогава? DAVID J. Malan: Да, нека ви изпускам куката. Така че, ако някой би искал да направя окончателен проект, използвайки този режещ ръб хардуер, осъзнаваш, че може просто да отнеме малко време за опознаване. И this-- реалността е това е всъщност много кървене ръба. [00:04:10] Това е, което се нарича комплект разработчик, който е трябвало да бъде по същество предварително освобождаване така че хората могат да направят точно this-- се бори с него, фигура как телата на хората да работят с технологията. Така че, ако искате след това, след лекция, ние може да ви позволи да дойде и вземете друго хладно оръжие при нея. А иначе, аплодисменти, ако можехме, за Мария, че дойдохте нагоре. [00:04:26] MARIA: Благодаря ви. [00:04:28] DAVID J. Malan: Благодаря ви. Ние ще се придържа към това, но ние ще дадем you-- как за стрес топка тук? О, and-- if-- да, благодаря. Добре. Така че за любопитните, ако бяхте незапознат със звук избор че сме направили там по-рано, невероятно TV показват, че трябва да е абсолютно да гуляй-гледане на Netflix е този тук. [00:04:51] SPEAKER 1: Уважаеми дами и господа, магьосник на име Джош. [00:05:04] DAVID J. Malan: И както изглежда, това е нещо за мен текст по време на лекция в момента. Аз съм се казва, че Мария имаше рожден ден вчера. Така че, честит рожден ден от CS50 Мария, както добре. [00:05:18] Така че може да сте прочели през последните месец че това господа тук, Steve Балмър, който е всъщност клас от 1977 г. в колежа, Наскоро пенсиониран за Microsoft. Той беше студент тук, След няколко години по-късно се озова в Stanford Business School когато той получил телефонно обадя от негов приятел, който е живял по коридора от него тук в Харвард. Име на приятеля ви Бил Гейтс, и по това време, той се опитва да назначи Стив да бъде първия работен лице, наистина, в една малка фирма име Microsoft. [00:05:45] Дълга история кратко, Steve е в крайна сметка спечели, се присъедини към Microsoft, когато те има само 30 служители. И от времето, когато той пенсиониран съвсем наскоро, компанията има 100 000 служители през последните няколко години. И така един сайт, известен като The Verge подготвила този почит на видео че ние решихме, че ние бихме сподели, че дава усещане за това колко много енергия Steve носи на всяко представяне той дава. [Възпроизвеждане на видео] -Microsoft Е като четвърто дете. Децата напускат къщата. В този случай, аз предполагам Аз заминавам на къщата. Хей Бил whazzap? [00:06:23] -Wazzap? [00:06:24] -Hey, Wazzap? Ние сме били дадени на огромна възможност. И Бил ни даде тази възможност. Искам да благодаря на Бил за това. Искам да също. Темпът на иновациите няма да се забави. [00:06:42] Това се случва, за да получите по-бързо и по-бързо. Може да има няколко конкуренти че за съжаление се елиминира! [00:06:54] Обичам тази компания. Да! Аз съм PC, и аз обичам тази компания! [00:07:08] Разработчици, разработчици, програмисти, разработчици, програмисти, разработчици, разработчици, програмисти. Да! Уеб разработчиците! [00:07:19] Уеб разработчиците! Уеб разработчиците! Чуйте какво друго получавате без допълнително заплащане! [00:07:28] Изпълнителната власт MS-DOS, среща календар, купчина карта, бележник, часовник, контролен панел. И може ли да повярваш? Reversie! [00:07:35] Записвайте ги на CD! Публикувай тях да MSN! Можете да ги изпрати на приятелите си! [00:07:40] Всичко това с едно кликване! One Microsoft, една стратегия, един team-- съсредоточени, дисциплинирани, професионални, и експерт във всичко, което правим. Позволете ми да използвам линия от стар филм. [00:07:52] Взаимоотношенията са като акули. Те се движат напред или да умрат. Аз всъщност мисля технологии фирми са едни и същи. [00:08:01] [END възпроизвеждане на видео] DAVID J. Malan: Така че ние сме толкова удоволствието да обяви, че Стив ще се присъедини към нас тук в CS50 следващата сряда в на обичайното място и време тук. Space-вероятно ще бъде ограничено. И така, за да се присъедините към нас лично, моля отправят днес или скоро след това да cs50.harvard.edu/register. [00:08:22] И ние ще последва от Вторник, потвърждаващ петна. Очаквайте, че през следващата Сряда по време на лекция в CS50. Сега, в други новини, аз се случи да попаднете това в The Crimson просто на другия ден. [00:08:34] Оказва се, че един от служителите на CS50 и най-малко един от учениците на CS50 е В момента работи за UC президент и вицепрезидент, който ме върна моите собствени дни назад когато загубих изборите UC мизерно. Но сребро лигавицата в това е, че винаги разкаже историята е, че един от най-Сигурен съм, че много причини, които изгубиха избори е пълна липса един талант за говорене пред публика. И така, съвсем честно, че, ме закара, че опитът Мисля, че моята първа година, действително да се регистрирате за Harvard Computer Society, които е групата на територията на колежа, че има различни технически преговори и други неща. И поех преподаването семинари и следователно имаше възможност, а чудесна възможност, да започне да работи по точно това. Но също така, имах възможност по време на този опит да се науча още по HTML. И така, аз отлага снощи от търси чрез HTML базирани на сайта Аз направих по същия 1997 г., '98, за моя кампания, която прилича на това тук. Знам. [00:09:29] Because-- и разбира се, известие това невероятно дизайнерско решение през 1998 г. или какво ли не. Първото нещо, което искате потребителите да се направи при посещение на вашия сайт е да се наложи да щракнете върху друга връзка просто да въведете своя сайт тук с монаха зад като обвит завеса, където очевидно платформа кампанията ми. И това е всичко, което ще получите днес е само една снимка. Но аз бях четене през, като, моите кампанията плакати снощи и моята платформа. [00:09:50] И аз бях толкова ядосан в момента. Моята платформа was-- беше интересно. Така че аз съм се успокои, тъй като тогава. Но някой ден, аз ще се кандидатира отново и надявам се по-добре този път. [00:10:03] Така че HTML, че езика, на който съм направил че in-- скоро ще направи много по-MORE- е нещо, което ние сме били говорим за забава и до голяма степен приемат като даденост сега че сме преместени на други езици. Но нека да спрем за миг и постави някои от тези неща в контекст. Така в едно изречение, какво е HTML? [00:10:18] Или, което се използва? Някой? Да. [00:10:20] АУДИТОРИЯ: Markup за уебсайтове. DAVID J. Malan: Markup за уебсайт. Така че това е език за маркиране, че ви позволява да се структурира една уеб страница. Header отива тук, заглавие отива тук, тялото отива тук. Това е удебелен шрифт, това е italics-- този вид детайли. [00:10:33] ОК, добре. Така CSS позволява you-- и аз предприе някои свободи там с удебелен шрифт, курсив, защото облицовката че е по-добре, изпълнени с това. CSS is-- какво? Да речем, в едно изречение. Някой изобщо. Да. [00:10:46] Публика: декорации и неща, като например как да го проектираме. DAVID J. Malan: Добре, добре. Декорации, които ви позволяват да го проектираме или стилизирам с неща като удебелен шрифт и курсив и цветове, а също и по-добре гранули позициониране на елементите. Това нещо ви позволява да правите неща, последна миля, така че, ако, например, в Pset7, може би сте забелязали на Вашия портфолио страница, ако сте в този момент вече тази таблица по подразбиране, че сте направи да покаже фондовите стопанства на потребителя и пари в брой вероятно изглежда доста отвратителен по подразбиране, без празно пространство. Всичко е вид натъпкани заедно в редове и колони. [00:11:18] Е, с малко CSS, тъй като може да се реализира, всъщност можете да ощипвам, че и да го направи нещо много по-познато и много красива за гледане. Така че CSS е за стилизация на уеб сайтове. Но след още една въведохме език, PHP, която ни позволява да направим това, което? [00:11:36] Нека просто правя това? Всеки. Трябва да прекрачат първите няколко реда. Да. [00:11:40] АУДИТОРИЯ: генериране на динамично съдържание. DAVID J. Malan: Perfect. Генериране на динамично съдържание. И вие можете да направите това в произволен брой езици. Ние се случи да се използва PHP, защото това е отчасти така, подобен на C синтаксис. [00:11:50] Но PHP прави точно това. Тя ви позволява да създавате динамични изход. И част от тази продукция може да бъде HTML, тъй като ние сме обикновено са прави. И това е също така, защото това е език за програмиране, е механизмът, чрез който можем да говорим за бази данни. [00:12:03] И ние можем да направим запитвания към други сървъри като Yahoos и програмно направи нищо наистина, че може по друг начин Искам да принуди компютър, за да се направи. Така PHP ни позволява да започнем динамично генериране на съдържание. Така че от тази логика, аз не са имали динамичен сайт през 1998 година. [00:12:16] Това беше просто един статичен уеб страница. Моето съдържание трябваше да бъдат променени от ръчно с Gedit или някакъв еквивалент. Но PHP е това, което сме свикнали или може да се използва по-скоро за нещо като Уебсайт Фрош УИ, които трябваше да се регистрации и управлявате списък от неща, които users-- всъщност смяна време, макар и да се случи, да използва Perl, различен език по това време. [00:12:35] И тогава най-накрая, ние въведохме SQL-- Structured Query Language. Така че още един език който се използва за какво? Използва се за какво? Можем ли да венчър slight-- ОК, ние не отиваме за да получите много по-далеч от оркестъра тук. АУДИТОРИЯ: Това е протокол използва, за да говори с бази данни. DAVID J. Malan: Протокол използва, за да говори с бази данни. Позволете ми да ощипвам. Това е един естествен език, използван да говоря с databases-- избира и вложки и изтрива и актуализации и реално дори повече функции, които ние дори не са се гмурна в но може да искате да имате explore-- да проучи, да речем, окончателно проекта. Така че там са тези различни парчета. [00:13:09] И се надяваме, Pset7, въпреки че неговата спецификация е доста дълъг, това е умишлено дълго, за да ви преведе чрез това как тези неща могат всички бъде въведен заедно. Сега, в понеделник, ние представен миналата нашия език че ние официално ще въведе в на course-- че е JavaScript. Това, като PHP, е интерпретиран език. [00:13:25] Но ключова разлика Аз предложих в понеделник е, че докато PHP се изпълнява или се тълкува в смисъл, на сървъра, който в този случай е най-CS50 уреда, или може би някои търговски уеб сървър в интернет, JavaScript цяло е език, който се изпълнява от страна на клиента не сървъра side-- така в браузъра. Което е да се каже, точно както когато отворих до Facebook изходния код и е установено, всички на тези .js файлове, изводът е че когато посещавате Facebook или най- сайтове тези дни, можете да получите не само HTML, не само CSS, но цял куп JavaScript код често под формата на .js файлове. И тогава това е browser-- свой собствен Mac или PC--, която изпълнява този код. [00:14:03] Но вашият браузър изпълнява. Можете да мислите за нещо като пясък. Така че JavaScript код не трябва да бъде можете да изтриете файлове на вашия компютър. Тя не трябва да бъде в състояние да изпращате имейли от ваше име. Вашият браузър вид Ограничения какво можете да правите с него. [00:14:17] Така че в този смисъл, това е малко по- по-малко мощен, може би, от C. Но JavaScript може, като настрана, се използва на сървъра, макар че ще са склонни да не говорим за това в този контекст. Така че нека сега вратовръзка те заедно. Една седмица плюс отдавна, ние представихме някои HTML на left-- супер скучно уеб страницата. [00:14:34] Просто казва здравей свят. И тогава аз, предложени на право можем да вид крадат идеи от нашата дискусия за структури от данни в C и мисля за това как тази йерархична маркиращ език в ляво може да се направи или приложени в паметта като действителната дървовидна структура с възли и указатели и тези видове информация. От дясно, което наричаме че DOM-- Document Обект Model-- който е само един луксозен начин на казвайки дърво. [00:14:56] Сега, защо това е полезно да се мисля за него по този начин? Защото сега с JavaScript, защото имаме код, който ще играе в тази среда, действителната HTML, че е е изпратен на браузъра вече и има вече са заредени в паметта от браузър в едно дърво в компютъра ви RAM по този начин, ние можем да използваме JavaScript действително да преминават или разходка или търсене или промени това DOM дърво обаче искаме. Така че в действителност, ако смятате, за facebook.com, Ако използвате функцията за чат, ако използване Gmail и функцията gchat, нещо, когато имате съобщения, идващи отново и отново и отново, тези послания са най-вероятно, като, LI таг, елемент от списъка тагове, може би. [00:15:35] Или може би те са просто divs, че продължават да се появяват всеки път, когато получите незабавно съобщение. И така, това просто означава, какво Facebook или Google се справя е всеки път, когато получите съобщение от сървъра, те са най-вероятно с помощта на JavaScript просто да добавите друг възел до този tree-- друг възел за тази дърво, което след това визуално просто изглежда като нова линия от текст на вашия екран. Но те вмъкване в тази структура на данните. [00:15:57] Така че в класове като CS124 и другите, вие ще всъщност пиша повече код срещу структури от данни като този. Но за сега в JavaScript, ние просто ще приемем, ние получаваме всичко това функционалност безплатно от самия език. Така че нека да разгледаме един пример. [00:16:09] Позволете ми да се отвори файл, наречен form.html. Това е супер проста. Той просто изглежда по този начин. [00:16:15] Не CSS, без мисъл за естетика. Това е чисто функционална и очевидно съм питам за електронна поща, парола, парола отново, и след това проверка да се съгласи с някои условия. Какво изходния код за тази изглежда е вероятно нещо можете да се досетите с малко мисъл сега. Имам форма маркер тук. [00:16:32] Съдебният иск е явно ще отидете на файл, наречен register.php. Методът Отивам да се използва, е да получите. И тогава аз имам текст поле, чието име е имейл. [00:16:40] Имам поле за парола чието име е парола. Аз имам друг област парола, чието име е донякъде произволно потвърждение. Това е просто още един HTTP параметър. [00:16:49] И тогава ние не сме използвали тези с изключение на тъй като Фрош УИ демонстрация в class-- квадратчето, което е просто тип равнява проверка. И аз ще се обадя на това споразумение. Така че аз съм вид на произволно, а Удобно име тези области. Така че сега, когато тази форма получава представена, нека да видим какво ще стане. Ако malan@harvard.edu направя, Ще направя парола на червено. Ще направя парола от нищо. Нека да не си сътрудничат. [00:17:10] И аз няма да поставите отметка в квадратчето. Нека кликнете Register. И той казва, хм, вие сте се регистрирали. Не съвсем. [00:17:16] Но URL променен. Така че тази форма е ясно позволено да представи register.php. Но се предполага, че трябва да бъде улавяне на някои от тези грешки. Сега, в Pset7 и някои на нашите лекции примери, ние по принцип ще отпечата голяма червена съобщение за грешка тук казвайки, липсва име, или липсва парола. Ние сме направили, че преди и ние сме направено от страна на сървъра за откриване на грешки. [00:17:37] Но много сайтове тези дни направи клиент откриване страна грешка където URL не се променя. Цялата страница не опресняване. Можете да получите незабавна обратна връзка от браузъра. Може би нещо не е червено. [00:17:48] Може би можете да получите поп. Но ти не си губете времето за изпращане на данните на сървъра, че е непълна. Така че нека да видим как можем да постигането на тази функция, както добре. [00:17:56] Позволете ми да отида да form1.html, който изглежда по същия начин. Но ако този път правя malan@harvard.edu и пиша червено и аз не си сътрудничат по-нататък но кликнете Регистрирайте се, забележете сега. Това не е най-секси решение. Аз съм най-малко хванат тази грешка. И аз съм използвал сигнала функция в JavaScript-- които ние сме само с помощта на класа. По принцип, не трябва да използвате това защото тя може много бързо да се измъкнем контрол. Но пароли не съвпадат е грешката. [00:18:19] Позволете ми да отида напред и кликнете OK. Но това, което ключовата Takeaway тук е, че URL адресът не се променя. Така че аз не съм притеснявана загуба време на сървъра с молба въпрос, който би могъл да има измисли отговора за себе си. [00:18:30] И потребителя, въпреки че говорим за това по-дълъг от потребителя Ще мисля за това, ще има незабавна обратна връзка. Няма никаква латентност с мрежовата свързаност. Така че нека да погледнем на този код. [00:18:40] Form1.html вид структурно сходен тук. Формата е всъщност същото. Но нека видим това, което направих тук. И има различни начини да се направи това. И аз съм правил най-стрейт последовател, но не и най-елегантния начин, все още. Имам таг скрипт. След това аз наричам document.getElementById ("регистрация"). И аз се съхранява тази стойност по форма, променлива. [00:19:04] И така, какво съм направил? Можете да мислите за document.getElementById като специална функция, която JavaScript дава че буквално ръцете си указател към един от възли или правоъгълници в това дърво. Така че сега е каква форма нашата променлива в JavaScript е действително сочеше. [00:19:21] Така че сега синтаксиса е различен от C. Но ние правим няколко неща тук. One, това е малко странно гледам, със сигурност в сравнение с C. Но ако се вгледате по линия 35. Така че от лявата form.onsubmit. Спомнете си, че onsubmit е като поле в структура. Ако мислите, че на променлива форма е просто да бъдеш C структура, тя може да има някои области. [00:19:42] Обратно, в деня, имахме имената на учениците, Идентификатори, къщи, тези вид на полета. Просто мисля на onsubmit като друга област. Но това е специална сфера, тъй като браузър е програмиран да се очаква .onsubmit да не бъде на стойност като номер или низ, но всъщност да бъде функция или адреса на функция в паметта на компютъра. [00:20:02] И наистина, това е, което тази ключова дума тук е така. Това казва, дай ми една нова функция. Но какво е неговото име щеше да бъде, очевидно? [00:20:09] Мисля си обратно до понеделник. Какво е името на тази функция на базата на този синтаксис? Не, искам да кажа, че има ясно без име associated-- сигурност не в това, което съм подчертано тук. [00:20:21] Но това всъщност е OK. Това е анонимна функция, или ламбда функция, тъй като някои може да го наричат. А това просто означава, тя все още е една функция. Това е просто, не можете да го наричат ​​по име. Но това е ОК. Защото отново, браузърът е програмиран от компании като Google или Microsoft или Mozilla или други лица да Просто знам, че ако областта на .onsubmit вътре форма елемент има стойност, да го третира като function-- указател функция, ако щете. И това се обадя, когато се представя под формата. [00:20:46] Така че това, което код трябва да бъде изпълнена когато формулярът се подава? Очевидно е, че всичко вътрешността на фигурна скоба. И това е само стилистичен. [00:20:53] Можете да направите това като ние сме склонни да се направи в CS50. Но в JavaScript, повечето хора са склонни да я държи на една и съща линия просто защото е по-ясно е свързана с тази ключова дума функция. Така че сега, какво правя аз? [00:21:03] Ако form.email.value равнява на равни празен низ или нищо, тук е сигнал, когато аз отивам да се каже, трябва да предоставите вашия имейл адрес, и след това се върнете невярно. И то е, че връщане невярно, че предотвратява формата да бъде представен. В същото време, ако стойността на паролата е празно, аз отивам да се крещи на потребителя и да кажа, трябва да предоставите парола. [00:21:21] Междувременно нещата се малко любител тук. Ако form.password.value не равен form.confirmation.value, друга област, крещи на потребителя, че паролите не съвпадат, тъй като те не е направил преди малко. И след това е малко по-секси, защото аз Знам, че е знаел, че концептуално проверена е името проверка кутията. [00:21:40] Така че аз може просто да използвате удивителен точка да се каже, ако проверката не е checked-- това е Булев стойност, вярно или false-- Ще крещиш на потребителя по тази причина. В противен случай, ако ние се измъкне сам всички тези условия, нека просто да се върне вярно. Нека да се представи под формата. И това ще се случи. [00:21:56] Да напишете в червено. Нека отметка в квадратчето, кликнете Register. И сега отивам през към дестинацията. Сега, няма данни там. Няма нищо по-интересно в register.php. Аз просто нужда от нещо действително да говоря. Така че нека пауза, тук. Всички въпроси, свързани с това, което току-що направено или това, което някои от този нов синтаксис е? ОК, така ли? [00:22:17] АУДИТОРИЯ: Така всяко квадратче автоматично е Boolean. Вие не трябва да го декларира като това. [00:22:21] DAVID J. Malan: Правилно. Всяка отметка, че е изпратен от една HTML форма, за да ви JavaScript код ще се лекува, да, като Булева value-- вярно или невярно. Това е добър въпрос. Има предвид, че други ценности, на разбира се, са текст, известен още като струни. [00:22:36] Добре, така че ме пусна назад малко по-нататък. Какъв беше смисълът от това? Само за да бъде ясно. Както вече знаем, дори и от Pset7 и дори от лекция миналата седмица примери, че очевидно ние да проверите $ _GET $ _POST Видим дали потребителят да ни даде празна стойност. Запомни празната функция в PHP. [00:22:54] Така, само за да бъде ясно, какво е една от причините ние може също искам да направя тази проверка за грешки вътре в браузъра? Каква е мотивацията тук? Да. [00:23:06] АУДИТОРИЯ: По-бързо, а вие не го правят изпрати безполезни данни към сървъра. DAVID J. Malan: Добре. Това е по-бързо. Вие не изпращайте безполезен данни към сървъра. [00:23:12] Така че да се върнем на по- незабавен отговор. И като цяло на потребителя опит е по-добре. Помислете за алтернатива. [00:23:17] Ако за Gmail-- и е случай преди много години. Да предположим, че имам нов имейл вашия Gmail сметка, но единственият начин, чрез да се види, че е да, като, презареждане на цялата страница. Или да предположим, кликнете върху линк към четене на имейл. [00:23:29] Всичко трябва да се презареди, така че можете да видите на електронната поща. Или Facebook-- получите чат съобщение. Вие не го виждам, докато се презареди страницата или щракнете върху някаква връзка. [00:23:36] Например, това ще бъде ужасно досадно преживяване за потребителя. И това е, което е искал, ясно, обратно, когато се кандидатира за UC и в интернет е много по-динамичен и JavaScript не беше популяризиран както е сега. И нещата стават много по- по-динамичен и по- от страна на клиента в този смисъл. [00:23:49] Но има уловка тук, и това е вид досадно нещо, за което. Само защото сте добавили от страна на клиента откриване, като това не означава, вие може или трябва да се откаже от страна на сървъра за откриване. Вие по същество искате да сложиш проверка за грешки и на двете места. Защото това, което е един на поука от статията прочетох някои откъси от с тази глупава CMS system-- Content Management System--, че е прилагане на системата за удостоверяване, неговото влизане чрез какъв механизъм? JavaScript. [00:24:20] АУДИТОРИЯ: JavaScript. DAVID J. Malan: JavaScript, точно, нали? Той е използвал JavaScript. И буквално, вие имате играе малко вероятно с инспектор на Chrome. И ако мога да го намеря, да се запознаят елемент. [00:24:30] Позволете ми да отида да направя всички опции на Chrome. И това е колко лесно е да се изключите JavaScript в браузъра. Проверете, не повече JavaScript. [00:24:38] Така че, в справедливостта, много на интернет в наши дни е просто ще се счупи, защото Gmail и други sites-- Facebook-- се предположи, че JavaScript е активиран. Но ако правиш нещо глупаво като само валидиране потребители вход и проверка за грешки от страна на клиента, противник лесно може да направи това. И тогава дори по-умни противник като вас, момчета Сега може да използвате Telnet или Curl или просто командния ред команди и всъщност изпраща съобщения до сървъра че по подобен начин не са грешка проверени. [00:25:05] Така че това е по-скоро решение потребителски интерфейс отколкото е действителната техническа improvement-- прилагане нещо, от страна на клиента по този начин. Така че сега, един бърз поглед, но след това Аз ще се отложи за онлайн разходка чрез за това. В форма две, ние всъщност премина през и почистват кода малко. Но нека да се отложи с една на видеозаписи, които най-вероятно ще вграждане в Pset8 че просто ви показва един подобен синтаксис използване на библиотека, наречена Jquery, което е супер, супер популярна библиотека в JavaScript че честно казано повечето хора просто използвайте тези дни и дори обърка като същество самата JavaScript. [00:25:37] И тя е склонна да се включат някои признаци долар и ключови думи като документ в скоби тук. Но пак, нека да се отложи за някои по-бавни уроци онлайн вместо да изравни само синтаксис. Нека преминем към нещо малко по-хладно по отношение на заявленията за това. [00:25:50] Така че, по-специално, да ме пусне напред и да се отворят този тук. Хайде. Има отидем. [00:25:59] Позволете ми да се отвори тази снимка тук. Ненужно сложно гледам, но тя описва техника, наречена AJAX-- Asynchronous JavaScript и XML, където Х за XML всъщност система вече не е използвана. Тя има тенденция да се използва нещо още наречен JSON. [00:26:13] Но тук е как нещо подобно Google Maps или Google Earth работи. Нека се опитаме това в движение, всъщност. Нека да вървим напред и да се отвори до Chrome на моя браузър. [00:26:21] И позволете ми да отида в, се каже, maps.google.com. И всъщност, ако сте на възраст достатъчно, за да си спомня какво, като, MapQuest е като през деня, а може би и те все още се работи по този начин. Когато се използва за търсене на something-- 33 Oxford Street, Кеймбридж, Масачузетс, нека направим this-- ви би всъщност, ако сте Исках да се придвижвате нагоре и надолу, наляво и надясно, ще изглежда като голяма стрелка отгоре, и го ще ви покажа друг рамка на картата тук. Или бихте натиснете левия и ще отида тук, или друг клик и вие ще отидете тук. Но вместо тях дни, ние, разбира се, просто приемаме за даденост, че можем да отидем около Cambridge доста бързо просто чрез щракване и плъзгане. Но забележете има някои бъгове. [00:26:59] Ако направите това достатъчно бързо, това, което изглежда да се случва както аз плъзнете твърде бързо за компютъра, за да се справи? Какво виждаш? Да. [00:27:07] АУДИТОРИЯ: Пикселите не освежават. DAVID J. Malan: The пиксели не се освежават. Има actually-- и можеше да види това, всъщност, ако гледате онлайн и пауза това или наистина забавя нещата за once-- вие ще видите, че има плочки, площади, или правоъгълна форма, че са изчезнали от картата, докато част от секундата по-късно, все повече данни, още снимки всъщност се появи на екрана. И в действителност, ако ние направим това, като погледнете до Chrome's-- да кажем, Chrome-- нека да видим. Не можем да направим това. [00:27:31] О, Опа. Нека отворим maps.google.com. Нека направя прозореца по-голям отново. [00:27:36] Върни до 33 Oxford Street. Какво е интернет страницата бях наскоро? Имах това, като частен тирада за себе си, че бях тогава мигновено съобщение всеки приятел, който е онлайн който иска да го чуе. Има някои уебсайт. Мисля, че е така Comcast-- много голям американски ISP. Можете, когато се регистрирате за нов кабел модем услуга или кабелна TV услуга, те имат форма много разумно когато те питат за адреса си. И имат тази невероятна функция, наречена авто пълна, като Google, която започва да се запълни в отговор на вашия въпрос. [00:28:04] Проблемът е, че те правят автоматично пълно от първите неща, които вие въвеждате. Така че, ако започнете да пишете в 33, той ще ви покаже буквално всяка къща в Америка, която започва с номер 33 преди да продължите да Очаквам да напишете повече. Така че, ако сте написали 33 Oxford, след това ви показва всяка улица в Америка, който има 33 в Оксфорд неговото име, независимо от града че сте вътре. [00:28:25] И след това да продължите да пишете. И най-накрая, тя осъзнава, че те не го правят Предлагаме обслужване на вашия дом в Кеймбридж или нещо подобно. Но въпросът е, че това е най- тъпото изпълнение на авто завършите всякога. [00:28:34] И аз съм просто ще изключи на тази допирателна отново. Но има и добри начини за използвате JavaScript и лоши пътища. И това не е непременно най-добрата. [00:28:40] Но въпросът тук, преди това тирада, бе да отвори инструменти тук и да се отворят инструменти за разработчици, тъй като ние сме насърчени и преди, и да гледате на мрежата таб като кликна наистина бързо. И забележите един куп за да получите искания се е случило. Всичко това се е случило, тъй като аз се проточи. [00:28:57] И най-вероятно, наистина много от тези редове сега са на изображението черта JPEG MIME видове или типове съдържание. Това е така, защото това, което хром прави всеки път, когато щракнете и плъзнете, кликнете и плъзнете, е, това е реализиране, о, трябва да отидете попитайте Google за плочки на картата, че е тук, бързо да го изтеглите чрез HTTP, и след това го добавите към т.нар DOM за уеб браузъри в памет дърво представителство, така че потребителят, мен, вижда, че се обновява на плочки. И това се дължи на техника, наречена AJAX. Обратно, в деня, тя наистина е случаят, че ако искаха да променят това, което е на екрана, вие ще трябва да кликнете нагоре, надолу, наляво, надясно. И тогава нова страница ще се отвори. Но тези дни, всичко е по-динамичен. Това се случва в начина, по който хората ще Надявам се, че всъщност би интерактивно. И го постига това, като начин на техника, наречена AJAX, което е може би най- обясни с пример. Първо, нека да вървим напред и да се отворят файл наречен quote.php в днес код разпределение. [00:29:53] И след това да ме направи symbol-- Опа. Позволете ми да направя символ = GOOG само за някакъв склад. Или всъщност, нека направим един от Pset безплатно. Enter. [00:30:05] И сега забележи какво се върна. Така че това е наистина кратко PHP файл, който пише, че просто заема код от функция за търсене на Pset7 и изплюва използването на този фигурна скоба и цитати и нотация на дебелото черво, както изглежда, цена текущата акцията за компания, която да премине в по GET. Така че това е различно от повечето от това, което сме направено в това обявление съм буквално изплю това, което изглежда като JavaScript код. [00:30:27] В действителност, това е обект на JavaScript. В действителност, само за да бъде по-ясно, JavaScript Object Notation-- JSON-- е само един луксозен начин на казвайки, че могат да представят данни в JavaScript много като можете в PHP използване на ключови двойки стойност. Така че, ако исках да се декларира променлива в JavaScript да представлява Zamyla, за instance-- на структура за Zamyla-- и ние ще я наричаме студент, тази променлива. Нейният ID е един, къща Winthrop, а името е Zamyla. [00:30:53] Но аз също може да има набор от обекти. Така че, ако аз всъщност исках да имам масив в JavaScript, съдържащ множество такива обекти, това време представляващи персонала, Може би имам тези три парчета код на гърба назад, за да направите резервно за тях трима бивши членове на персонала. Така синтаксиса, доста подобно на both-- да PHP. Но това е особено JavaScript. Това е обект нотация. И така, какво е това полезно за? [00:31:17] Ако аз пиша код, който изплюва JSON-- JavaScript Object Notation-- неща, които изглежда така, или неща, които изглежда като структура Zamyla е, Аз всъщност може да използвате тази в програми пиша. Позволете ми да отида да ajax0.html. И това не е много too-- мисъл дава на естетика. Но внимавай какво ще се случи. [00:31:34] Нека да вървим напред и да напишете безплатно от тук. Кликнете получите оферта. И забележи URL не се е променило. Но аз се получи поп с очевидно днес стотинка цената на акциите на 0,15 щатски долара. Така че не всичко е толкова лошо. Но разликата е, че по някакъв начин, тези данни се върна директно към мен. Но нека да се върнем към нещо по-познато. Във версия един от това, нека ми въведете отново на свобода, кликнете Вземи цитат, и now-- о, това е всъщност Jquery версия. Така че нека me-- не съм бързо напред съвсем достатъчно далеч. Позволете ми да отида до версия две, което е мястото, където исках. Забележете, това, което съм направил тук. Имам уеб page-- супер проста версия на всяка уеб страница можете да използвате днес с текстово поле тук за безплатно и след това очевидно само текст. [00:32:14] Това не е форма тук, очевидно. Но ако кликнете получите цитат, забележете моята уеб страница е на път да се промени, тъй като въпреки че просто имам нов мигновени съобщения или така, сякаш току-що се премества в карта и се наложи да получите повече информация добавя динамично уеб страница без URL смяната и потребителя Първи опит прекъсва. Всъщност, аз съм все още в точно същия place-- ajax2.html. [00:32:35] Така че нека да погледнем само в този пример и да видим как се случва това. Позволете ми да отида в ajax2.html. И забележи формата на първо място. [00:32:44] Тук долу, аз съм завъртане изключите автоматичното пълна. Понякога той получава досадно, ако браузъра се опитва да ви покажа цялата си история. Така че, можете да го направите в HTML от просто казвам, автоматично завършване на разстояние. [00:32:53] Дадох този текст поле symbol-- по-скоро, за ID на символ. И сега, това е една интересна особеност. Ние не сме говорили за период, но можеш да се сетиш за това като параграф тагове или Разделения маркер. Това е това, което се нарича в онлайн елемент, който означава, че вие ​​няма да получите точка пробие над и под него. Това е просто ще остане в права линия без удря еквивалент на влезе. Така че съм дал тази парче HTML да се определи единен идентификатор че произволно нарича цена. И аз имам един бутон Submit. [00:33:21] Защото сега до here-- и това е всъщност супер удивително колко малко код можете да напишете да направя относително чист things-- забележите това, което съм направил до тук, ако аз превъртете до главата на тази страница. Аз бях включен за първи път в главата ми таг скрипт че всъщност препраща към JavaScript подаде другаде. Това е от организацията че пише JQuery, И това е само ви дава най-късно версия на JQuery библиотека. [00:33:42] Така че това е нещо като рязко включва в C или изискват по PHP. Можете да използвате маркера на скрипта с атрибут източник. Но сега ми собствен код е ще бъде точно тук. [00:33:52] Забележете, че има функция, наречена Цитати. И това изглежда малко загадъчен на пръв поглед. Но нека да дразни този апарт. Дай ми променлива, наречена URL а. Тя Присвояване буквално този низ. Така че, единични кавички, двойни кавички в JavaScript просто ми дава низ. Какво плюс направя? Concatenation. [00:34:08] Така че това сега е синтаксиса JQuery което отнема малко време за опознаване. Но това просто означава да отида ме на DOM възел, чийто уникален идентификатор е символ. Таг там означава уникален символ идентификатор. [00:34:21] Знакът долара в скоби просто означава, увийте това в Jquery някаква тайна сос така можете да получите допълнителна функционалност. И тогава .val е очевидно функция, или както казваме сега, метод вътре в този възел че просто ви дава стойност. Така че по-кратко, грозни и объркващо тъй като това изглежда на пръв поглед, това просто означава, получавате с потребителя въвели в, да я тури в края на низ от слепване. Това е всичко. [00:34:43] Така че сега, през последните три линии. Можете да прокара много функционалност от три линии. Този знак за долар, като настрана, е просто псевдоним за специален глобална променлива нарича буквално JQuery. [00:34:55] Dollar знак просто изглежда готино. Така Jquery общност просто вид го използва за своя специален символ. Това не означава това, което означава, че в PHP. В JavaScript, знака за долар е точно като буква от азбуката или номер за променлива. [00:35:07] Можете просто да го има като име. Просто изглежда готино. Така общността тя прие като псевдоним за собствената си библиотека, наречена JQuery. [00:35:13] И това е супер популярен. Така че JSON е точно това. Това е функция, за която хора в Jquery пишат че получава JSON от server-- JavaScript Object Notation. От това, което URL върви за да получите тази информация? Очевидно от този URL тук. [00:35:27] И какво трябва да браузъра направете Веднага след като се върне този отговор? И това е магията на AJAX, така да се speak-- Asynchronous JavaScript в XML. Това е трудно да се види с такъв прост пример като имахме тук. [00:35:41] Но това е асинхронно в чувството, че моят код, когато Добрата изпрати послание към сървър, за да отида да ми се някои JSON. И това се е случило супер бързо че имам отговор. Но това, което е интересно е, че това ред код не се мотае ми компютър. [00:35:55] Аз не виждам икона предене. Аз не загубят способността да се движи мишката ми. Моят браузър е всъщност перфектно глоба. [00:36:01] Заради начина, по който JavaScript дръжки отговор от сървъра е както следва. Можете да се регистрирате, което бихте се обадя функция за обратно повикване, които просто означава, хей, JavaScript. Веднага след като сървъра отговаря с JSON, моля обадете се на тази анонимна функция. [00:36:18] И моля ви премина в тази функция каквото низ сървъра изплюе като аргумент, наречен данни. Така че с други, думи, ако Аз съм сглобяване динамично на URL quote.php преминаване в този символ като FREE или GOOG или какво ли не, Аз тогава казвам JavaScript иди се, че URL. Не забравяйте, че на браузъра ще се върне нещо който изглежда като видяхме earlier-- това. [00:36:42] И това, което на втория аргумент тук, за да получите JSON казва се обадя на тази функция когато сървърът се върне дали това е 10 милисекунди от сега или 10 секунди от сега. И веднага след като го направите, добави цена за страница. Този синтаксис тук просто означава иди възела от дървото, чийто уникален идентификатор е price-- че педя видяхме по-рано. [00:37:01] Този метод се нарича HTML просто казва, отидете на мястото на на HTML, че е там с data.price. Какво е data.price? Е, браузъра, припомни, ми показа това да се върне. Така че това са данни. [00:37:14] И така, това е малко загадъчен за да видите запетаите тук. Но в действителност, нека да направим това. Нека просто поставете този наистина бързо в Gedit и да се покаже като ние показахме Структура рано Zamyla е. [00:37:27] Какво сървъра изпраща обратно е малък обект, който изглежда по този начин. И така data.price е просто ми дава 0.1515. Така че много от движещи части тук всичко наведнъж. [00:37:39] Но ключът е храна за вкъщи че имаме тази способност да се направи допълнителна HTTP искания, използващи JavaScript без да се налага да се презарежда страницата. И тогава можем действително промяна на уеб страницата в движение. И се оказва, че JavaScript и други езици може да се използва не само сега да мутира уеб страници, но действително да пишат софтуер в действително компютър, не ограничени само до Chrome или други подобни. [00:38:00] В действителност, if-- Колтън, бихте искали да се присъединят към нас обратно тук с вашата лаборатория код и Chang, както и? Да вървим напред, след като се говори за анонимни функции и извика и наистина да изкуши съдбата тук с демонстрация на живо с кървене модерните технологии, един от тези устройства Elite движение. Сега, това устройство, изземване, е малко USB устройство както that-- че е beautiful-- който се включва в профила си в USB порта. [00:38:25] И тогава се предвижда въвеждане под формата на човешки жестове чрез откриване, използвайки инфрачервени лъчи, по същество, движения от ръката си. Така че това, което Мария се опита , преди да е мускулест, реално чувство, което се променя ръката си, това е инфрачервена основа. Така че търси за движение в нещо като сфера на един крак, или така на самото устройство. [00:38:46] Така че, защо да не мога да взема пробождане в този първи? И нека да вървим напред и да се хвърли ви въз режийни тук. Така че нека да поставим лаптоп Колтън е тук. Имаме Andrew на телевизора. И това, което бихте искали от мен да направя първо? [00:39:00] COLTON: Давай напред и просто сложи ръцете си върху този човек и вие ще видите някои баснословен блясък. [00:39:04] DAVID J. Malan: Много хубаво. Всичко това се случва в реално време. OK. Добре, и Да. Така че хубаво. Добре, какво друго можем да направим? [00:39:15] COLTON: Отидете към следващия екран и ще видите. [00:39:17] DAVID J. Malan: Добре. [00:39:19] COLTON: А забавно малка игра където можете да получите да се роботи. [00:39:21] DAVID J. Malan: Добре, така че това е фалшив ръцете ми показват какво да правя. COLTON: Да Така че продължавайте напред и вземете един от блоковете и го постави на върха на тялото, че робота. DAVID J. Malan: О, там е моята ръка. О. OK, очарователни. Чакай малко, OK. Има отидем. [00:39:41] COLTON: Направих една на злополука. [00:39:43] DAVID J. Malan: ОК, аз ще получа този човек. Дявол да го вземе! Когато сме били практикуващи тази последна нощ, нали знаеш какво е това прехвърлени в? [00:39:51] Подобно на това. OK. Следваща? [00:39:55] COLTON: Разбира се. [00:39:56] DAVID J. Malan: Добре, и там е една трета. Добре. COLTON: И в този един, можете да получите to-- DAVID J. Malan: О, това е красива. COLTON: --yeah, вземете освен това цвете. DAVID J. Malan: OK. Не? Пропуснати. [00:40:14] COLTON: О, там ще отида. [00:40:15] DAVID J. Malan: Ах, Погледнете това. Много хубаво. Е, защо не вземаме от един доброволец тук които биха искали да идват нагоре. Какво ще кажете за там в зелено, нали? [00:40:27] Добре, и нека have-- вместо това, че някои от вас може да знае тази игра here-- срежете въжето, може би? Нека да видим. Ние имаме нашите очила тук? [00:40:37] OK. Благодаря. Какво е вашето име? [00:40:39] АУДИТОРИЯ: Лора. [00:40:40] DAVID J. Malan: Лора? Приятно ми е да се види. Ако нямате нищо против пускането Google Glass над очилата си. Това е Колтън. [00:40:46] COLTON: Hi. Приятно ми е да се запознаем. [00:40:48] DAVID J. Malan: Добре, хайде наоколо. Добре, така че това, което ти започваш да се правя тук, след като изигра това и преди, е сложил ръката си върху на Leap Motion тук. И сега си стрелка трябва да се движи. О, Не. [00:40:57] АУДИТОРИЯ: No. [00:40:58] DAVID J. Malan: Ние не искам още да се откажат. OK, изчакайте. Над тук. Така че забележите като държите пръста над нещо, мишката започва да отида зелено, което е как да кликнете. [00:41:06] Така мишката върху Пусни. И само един пръст е добре. И сега, кликнете върху малката зелен човек в ляво. И сега задръжте, докато не се напълни зелено. Добре. Сега, като, първо ниво до върха. [00:41:16] АУДИТОРИЯ: Да, ние искаме едно ниво, тук. [00:41:20] DAVID J. Malan: Добре. ОК, така че всичко, което трябва да направите, е да отрежете въжето. Курсорът е бялата там. [00:41:28] Много хубаво. Добре, това е за да се получи по-трудно. Така че задръжте пръста си върху следващата сега. Добре. Това е трудно. [00:41:39] АУДИТОРИЯ: О, глупости. OK. Той иска да отиде по този начин. О, глупости, that-- [00:41:44] DAVID J. Malan: Да. Вторична цел е да получите всички звезди. Добре, следващата. [00:41:53] Нека да видим дали можете да получите този трети. Добре. OK, отидете там. [00:42:06] Разбира се. О, много хубаво. Добре. [00:42:11] Така че защо да не отлага тук днес? Нека всеки, който дойде на нагоре, който иска да играе. Благодаря много за Laura нашия доброволец. И ние ще се видим в понеделник. [00:42:18] АУДИТОРИЯ: Може би искате тези обратно. [00:42:21] SPEAKER 2: На следващото CS50--