ДАВИД Ј. Малан: У реду, Дакле, ово је Мио рука бенд, пар који се имају за ЦС50 коначних пројекте. И то је била демонстрација смо на чекању Ви се унапред када суштински Овај прилично чврсто руку банд овде слуша ваше мишићних покрета који се тада мапирани у софтверу да Колтоновом лаптоп овамо који имао иТунес и да је Сонг већ стао. Уместо мене демоинг ово, Колтон је у лабораторији јасно целе недеље добити демонстрацију спреман за храбра волонтера. Ако неко жели да дође на их-- први пут угледао руку. Хајде горе. [00:01:09] У реду. А како се ти зовеш? 

[00:01:13] ПУБЛИКА: Ух, Марија. 

[00:01:14] ДАВИД Ј. Малан: Марија, драго ми је да вас видим. Дођи овамо. Дозволите ми да вас упознам са Цолтон. Колтон, ово је Марија. 

[00:01:21] ЦОЛТОН: Здраво, драго ми је да смо се упознали. 

[00:01:23] ДАВИД Ј. Малан: Све Добро, тако да први корак, ми смо морати ставите Ово на вашем подлактици тако да лепо то чврсто се близу лакта. У међувремену, хајде да стави на нашем Гоогле Гласс а ми ћемо помешати технологије данас. 

[00:01:33] ЦОЛТОН: Прво ћемо морати да хоок то у ствари. 

[00:01:36] ДАВИД Ј. Малан: У реду. Заправо, хајде да стави руку у у близини овог кабла могуће тако да прво да га синхронизујете горе. 

[00:01:41] ЦОЛТОН: Хајде да урадимо ово. 

[00:01:42] ДАВИД Ј. Малан: И у међувремену, тако да свако може добити ближе поглед, ћемо бацити Андрев камеру на екрану тамо. Дакле, имамо УСБ кабл који је се укључи у Мариа добија још једну улогу. И дозволите ми да бацим екран Колтон се на пројектору следећем. 

[00:02:00] Дакле, Колтон је регистровање уређаја сада као мио повезан са овим каблом. И ста сад Марија је ће тренутно радим заправо прође кроз тхе калибрације кораци и научити софтвер Како њени мишићи реагују кад се увери унапред дефинисане гестови да софтвер разуме. Ако желите да иду у предњи део екрана. У реду, будите упорни. 

[00:02:30] ЦОЛТОН: Иди овако. И тако. И скроз у десно. Вратимо. 

[00:02:35] ДАВИД Ј. Малан: У реду. Другачију перспективу. Није ти. То нас је. 

[00:02:40] МАРИЈА: Добро. ДАВИД Ј. Малан: Не Идемо на вишим, тако да је ближе лакта, или чак јаче. У реду. 

[00:02:52] Идемо. То би био добар тренутак за ЦС52Кс. Ту идемо. 

[00:02:57] Врло лепо. У реду. Тхумб да Пинки. 

[00:03:02] Врло лепо. Рашири прсте. Добро. Ваве праву. То је радознало показује ти са левом ханд-- 

[00:03:17] ЦОЛТОН: Да, то је Чудна. ДАВИД Ј. Малан: Махни Право и кренути напред. Брзо напред да прескочите или следеће. То је у реду Талас праву. 

[00:03:25] МАРИЈА: Ја не-- чекати. 

[00:03:26] ДАВИД Ј. Малан: Треба ли помоћ? 

[00:03:28] ЦОЛТОН: Значи идеш овако. МАРИЈА: То је скретање друга ствар. ЦОЛТОН: То је. ДАВИД Ј. Малан: Да, ја не знам Зашто то ти показати Лефтие. ЦОЛТОН: Зашто не три-- само покушајте иде овако. 

[00:03:38] ДАВИД Ј. Малан: Не? Можда до руку од мало отворенији и учинити га нагло овако. Да, у реду, хајде. 

[00:03:48] МАРИЈА: Жао ми је. ДАВИД Ј. Малан: Није твоја кривица. ЦОЛТОН: То је у реду. ДАВИД Ј. Малан: У реду. -Па 

[00:03:56] МАРИЈА: Да ли да прескочите ово, онда? ДАВИД Ј. Малан: Да, хајдемо пустити са удице. Дакле, ако би неко волео да радим финални пројекат користећи ову оштрицу хардвер, схватам да можда само узети мало навићи. А ово реалност је ово је заправо веома крвари ивицу. 

[00:04:10] То је оно што се зове комплет програмер, који треба да буде у суштини пре-релеасе тако да људи могу учинити тачно ово-- борити са њим, фигура како тела људи раде са технологијом. Дакле, ако желите Након тога, после предавања, можемо пустити да дође и узети још један убод у томе. Али иначе, аплауз, ако можемо, за Марију дошли на горе. 

[00:04:26] МАРИЈА: Хвала. 

[00:04:28] ДАВИД Ј. Малан: Хвала. Ми ћемо обесити на ово, али ми ћемо дати Како ти-- о стрес лопта овде? Ох, и-- ако-- Да, хвала. У реду. Дакле, за радознале, ако сте били упознати са Соунд Цхоице да смо тамо направили раније, невероватан ТВ показују да треба апсолутно бе Бинге-гледа на Нетфлик је овај овде. 

[00:04:51] СПЕАКЕР 1: Даме и господо, мађионичар по имену Џош. 

[00:05:04] ДАВИД Ј. Малан: И очигледно, то је ствар ме текст током предавања сада. Ми је речено да је Марија имао рођендан јуче. Дакле, срећан рођендан од ЦС50 Марији као добро. 

[00:05:18] Тако да можда прочитали у недавном месецу да је ова господа овде, Стив Болмер, који је у ствари класа 1977 на факултету, недавно пензионисан за Мицрософт. Он је додипломски овде, онда неколико година касније нашао у Станфорд Бусинесс Сцхоол када је добио телефон позовите из његов пријатељ кога живио низ ходник од њега овде на Харварду. Име тај пријатељ је Бил Гејтс, а у то време, Он је покушавао да регрутује Стеве да буде први пословни човек, заиста, у малој компанији Мицрософт име. 

[00:05:45] Скратим, Стив је на крају победио у, Мицрософт се придружио када имала само 30 запослених. А када је он пензији недавно, Компанија је имала 100.000 запослених у протеклих неколико година. Па сајт познат као Тхе Верге припремио овај трибуте на видео да смо мислили да дели то вам даје осећај колико енергије Стеве доноси било коју презентацију он даје. [ВИДЕО РЕПРОДУКЦИЈА] -Мицрософт Је као четврто дете. Деца не напусти кућу. У овом случају, претпостављам Одлазим из куће. Хеј Бил, вхаззап? 

[00:06:23] -Ваззап? 

[00:06:24] Хеј, ВАЗЗАП? Ми смо добили огромна прилика. И Билл нам је дао прилику. Желим да се захвалим за то Билла. Хоћу и ти да. Темпо иновација неће успорити. 

[00:06:42] То ће се све брже и брже. Можда постоји неколико такмичара које су нажалост елиминисани! 

[00:06:54] Волим ову компанију. Да! Ја сам ПЦ, а ја волим ову компанију! 

[00:07:08] Програмери, програмери, програмери, програмери, програмери, програмери, програмери, програмери. Да! Веб програмери! 

[00:07:19] Веб програмери! Веб програмери! Слушајте шта друго ти гет без доплате! 

[00:07:28] Екецутиве МС-ДОС, именовање календар, гомила картица, Ноте Пад, сат, контролна табла. А, можете ли веровати? Реверсие! 

[00:07:35] Спали их на ЦД! Поставите их на МСН! Ви их послати пријатељима! 

[00:07:40] Све са једним кликом! Један Мицрософт, једна стратегија, теам-- фокусиран, дисциплиновани, професионална, и стручњак у свему што радимо. Дозволите ми да користите линију од старог филм. 

[00:07:52] Везе су као ајкуле. Они се крећу напред или умру. Ја стварно мислим Тецх компаније су исти. 

[00:08:01] [ЕНД ВИДЕО РЕПРОДУКЦИЈА] ДАВИД Ј. Малан: Па ми смо толико драго да најављују да ће нам се придружити Стив овде у ЦС50 у среду у уобичајено мјесто и вријеме овдје. Простор ће вероватно бити ограничена. Па да нам се придруже у лично, молим вас хеад данас или убрзо после тога на цс50.харвард.еду/регистер. 

[00:08:22] И ми ћемо пратити од стране Уторак потврђује спотова. Радујем се да ће следеће Среда током предавања у ЦС50. Сада, у међувремену, и десило се наићи ово Тхе Цримсон само неки дан. 

[00:08:34] Испоставило се да је један од запослених ЦС50 је и најмање један ЦС50 студенти тренутно ради за УЦ председник и потпредседник, који ме је вратио на мојим данима назад кад сам јадно изгубио УЦ изборима. Али Силвер Лининг у томе је и увек испричати причу да један од Сигуран сам много разлога сам изгубио избори су потпуни недостатак од талента за јавни наступ. Па искрено се, Возио ме, то искуство Мислим да је моја прва година, да заправо потпише се за Харвард Цомпутер Социети, који је група на кампусу који држи разне техничке разговоре и друге ствари. И ја сам преузео своју наставу Семинари и стога имали прилику, дивна прилика, да почну да раде на управо то. Али исто тако, имао сам прилику током овог искуства да себи научи све више ХТМЛ. И тако сам оклевао синоћ гледа кроз сајту ХТМЛ седиштем у Направио сам у као 1997. године, '98, за моју Кампања која изгледа овако овде. Знам. 

[00:09:29] Јер-- и наравно, напомена Ова невероватна одлука дизајн у 1998. или ситница. Прва ствар коју желите да корисници да радим на посети свој сајт је да ћете морати да кликнете другу везу само да унесете свој сајт овде са монахом иза као велом завеса где Изгледа да је мој платформа кампања је била. И то је све што ћете добити Данас је само с. Али ја сам читајући, као, моја кампања плакати Ласт Нигхт и своју платформу. 

[00:09:50] И ја сам био толико љут на време. Моја платформа било-- било је занимљиво. Па сам се смирио од тада. Али једног дана, поново ћу покренути и надамо се боље овај пут. 

[00:10:03] Дакле ХТМЛ, да је језик у којем сам направио да у-- Ускоро ћете направити много море-- је нешто што смо били говоримо о покојног и углавном узимајући здраво за готово сада да смо прешли на друге језике. Али хајде да паузу за само један тренутак и стави неке од ових ствари у контекст. Дакле, у једној реченици, шта је ХТМЛ? 

[00:10:18] Или, што је користи? Анионе? Да. 

[00:10:20] ПУБЛИКА: добити за сајтове. ДАВИД Ј. Малан: добити за интернет сајт. Тако да је Маркуп Лангуаге који вам омогућава да структурирају веб страницу. Хеадер иде овде, наслов иде овде, тело иде овде. То је масна слова, ово је италицс-- такве детаље. 

[00:10:33] Добро, добро. Дакле, ЦСС ти-- и ја летс је тамо неке слободе са смелим окренута и курзивом, јер То је боље реализује са овим. ЦСС је-- шта? Кажу у једној реченици. Свако уопште. Да. 

[00:10:46] Публика: Ембеллисхментс и ствари, попут тога како га направити. ДАВИД Ј. Малан: Добро, добро. Ембеллисхментс да дозвољавате то дизајн или стилизовати ит са стварима као што су подебљане и курзив и боја и више у реду граинед позиционирање елемената. То је некако омогућава узмете ствари у Ласт Миле, тако да ако је, на пример, у Псет7, можда сте приметили на вашем Портфолио страница ако сте у овом тренутку већ да подразумевани табела коју да се покаже корисникове газдинства залиха и готовина вероватно изгледа прилично грозно подразумевано без белог простора. Све је некако претрпан заједно у редовима и колонама. 

[00:11:18] Па, са мало ЦСС, као што можете да схватите, заправо можете подесити да се и чине га нешто много више упознати и много лепше гледати. Дакле, ЦСС је о стилизација сајтова. Али онда још један смо увели језика, ПХП, која нам омогућава да радимо шта? 

[00:11:36] Хајде само да урадимо шта? Свако. Морам да иза вентуре Први пар редова. Да. 

[00:11:40] ПУБЛИКА: Генерате динамички садржај. ДАВИД Ј. Малан: Савршено. Генеришу динамички садржај. И ви можете да урадите у било који број језика. Ми се десити да користите ПХП, јер је то делом тако сличан Ц синтаксе. 

[00:11:50] Али ПХП ради управо то. То вам омогућава да динамички генеришу излаз. А неки од тог излаза може бити ХТМЛ, као што смо обично радили. И то је такође, јер је програмски језик, није механизам преко кога можемо разговарати са базама података. 

[00:12:03] И можемо направити упите други сервери попут Иахоос и програмски ништа стварно да би иначе Желим да примора рачунар да уради. Дакле, ПХП омогућава да кренемо динамички емитовања садржаја. Дакле, по овој логици, ја нисам имао динамичан сајт још 1998. године. 

[00:12:16] То је био само статичан веб страница. Моја садржаја мора бити промењен ручно са гедит или неки еквивалент. Али, ПХП је оно што смо користили или могао да користи, уместо тога, за тако нешто Фросх Ћаскање сајт, који је требало да се регистрације и управљају листу ствари које усерс-- заправо мењају преко време, иако смо се деси да користи Перл, другачији језик у то време. 

[00:12:35] И онда на крају, смо увели СКЛ-- Струцтуред Куери Лангуаге. Дакле, још један језик који се користи за шта? Користи се за шта? Можемо ли слигхт-- упустим У реду, не идемо да се много даље од оркестра овде. ПУБЛИКА: То је протокол се користи да разговара са базама података. ДАВИД Ј. Малан: протокол се користи да разговара са базама података. Пусти ме твеак. То је језик који се користи природна да разговара са датабасес-- одабраној и уметање и брисање и исправке и заправо чак више функција да нисмо ни кренуо у али можда ћете желети да имате екплоре-- да истражи за, рецимо, завршни пројекат. Тако да су ови различити делови. 

[00:13:09] И надамо се Псет7, иако његова спецификација је прилично дугачак, је намерно дуго те испратим кроз како се ове ствари могу све куцати заједно. Сада, у понедељак, ве увео наш последњи језик да ћемо формално ћемо увести у цоурсе-- то је, ЈаваСцрипт. Ово, као и ПХП, је тумачи језика. 

[00:13:25] Али кључна разлика Предложио сам у понедељак је да, док се извршава ПХП или се тумачи на серверу, који у овом случају је ЦС50 апарат, или можда неки комерцијалним веб сервер на интернету, ЈаваСцрипт генерално је језик који води страни клијента Не сервер сиде-- тако у претраживачу. Што ће рећи, баш као када сам отворио се Фацебоок изворног кода и пронашао све тих јс фајлова, импликација је када посетите Фацебоок или највише Сајтови ових дана, добијате не само ХТМЛ, не само ЦСС, али гомила ЈаваСцрипт код често у форми .ЈС датотека. А онда је бровсер-- сами Мац или ПЦ-- да изврши тај код. 

[00:14:03] Али ваш прегледач је извршава. Можете мислити у врсти сандбок. Тако да ЈаваСцрипт код не би требало да буде моћи да избришете фајлове на рачунару. То не би требало да слати на име. Ваш прегледач врста ограничава Шта можете да урадите са њим. 

[00:14:17] Дакле, у том смислу, то је мало мање моћан, можда, од Ц. Али ЈаваСцрипт може, као страну, да се користи на серверу, иако ћемо склони да не причам о томе у том контексту. Па сад хајде да вежем ово заједно. Пре недељу Плус, представили смо неке ХТМЛ на лефт-- Супер досадне веб страници. 

[00:14:34] Само поздравља свет. И онда сам предложио на Право можемо некако украсти идеје из наше расправе о структуре података у Ц и размислите о томе како ова хијерархијска Маркуп Лангуаге на левој може се извести или имплементирати у меморији као актуелне структуре стабла са чворова и показивачи и оне врсте детаља. Са десне стране, зовемо да је ДОМ-- документ Објецт Модел-- који је само Елегантан начин начин да дрво. 

[00:14:56] Сада, зашто је ово корисно мислите о томе на тај начин? Јер сада са ЈаваСцрипт, јер имамо код које добија да игра у овом окружење, стварна ХТМЛ који је упућен на претраживачу већ и већ убачен у меморију од Бровсер у дрво у рачунара РАМ овако, можемо да користимо ЈаваСцрипт да стварно прећи или ходају или претраживање или да промени ДОМ стабло, међутим желимо. Дакле, у ствари, ако мислите О фацебоок.цом, ако користите функцију ћаскање, ти ако Коришћење Гмаил и функција гцхат, нешто где имате поруке које долазе опет и опет и опет, те поруке су вероватно, као, ЛИ Таг, листа ставки ознаке, можда. 

[00:15:35] Или можда они само су ДИВС да држе појављивање сваки пут када добијете инстант поруку. И тако то само значи оно Фацебоок или Гоогле ради је сваки пут добијате Порука са сервера, они вјероватно користе ЈаваСцрипт да само додајте још једну чвор Да би се ово трее-- други чвор на ово дрво које онда визуелно само изгледа као нове линије текста на екрану. Али они уметање у овој структури података. 

[00:15:57] Дакле, у класама као ЦС124 и други, ви ћете заправо писати код против структуре података као што је овај. Али за сада у ЈаваСцрипт, само ћемо претпоставити добијамо све ове функционалности фор фрее фром самог језика. Па хајде да погледамо пример. 

[00:16:09] Дозволите ми да отворим фајл под називом форм.хтмл. То је супер једноставно. То само изгледа овако. 

[00:16:15] Не ЦСС, не мисли на естетику. То је чисто функционална и очигледно сам тражећи е-маил, лозинка, Поново лозинку, а затим провера да пристане на неке услове. Који изворни код за ово Изгледа као да је вероватно нешто можете погодити са мало мисли сада. Имам форму ознаку овде. 

[00:16:32] Акција је очигледно ће идите у фајл под именом регистер.пхп. Поступак ћу користити је добити. И онда имам текст поље чије име је е-маил. 

[00:16:40] Имам терен лозинке чије име је лозинка. Имам још Лозинка поље чије име је донекле произвољно потврда. То је само још један ХТТП параметар. 

[00:16:49] И онда смо не користи ове сем Пошто су Фросх Ћаскање демо у цласс-- цхецк бок који је Само укуцајте једнако чек. И ја ћу звати тај споразум. Па сам некако произвољно, али прикладно назван ова поља. Тако да сада, када је овај облик добија подноси, хајде да видимо шта ће се десити. Ако ја радим малан@харвард.еду, Ја ћу направити лозинку Цримсон. Учинићу лозинку ничега. Хајде да не сарађују. 

[00:17:10] И неће проверавати кутију. Пусти ме цлицк Регистер. И каже, ХМ, сте регистровани. Не баш. 

[00:17:16] Али УРЛ адреса промењена. Дакле, ово је јасно какав дозвољено достави регистер.пхп. Али вероватно, ја би требало да буде хватање неке од ових грешака. Сада, у Псет7 и неким наших примера предавања, бисмо генерално исписати велика црвена порука о грешци овде говорећи, недостају имена, или недостаје лозинке. Ми смо урадили пре и имамо Готово Сервер Сиде детекција грешке. 

[00:17:37] Али многи сајтови ових дана урадите клијент детекцију страни грешке где УРЛ адреса не мења. Цела страница не освежи. Добијате инстант феедбацк из претраживача. Можда нешто крене црвено. 

[00:17:48] Можда сте добили поп уп. Али да не губите време слања Дата Сервер то је непотпуна. Дакле, хајде да видимо како бисмо могли оствари ову функцију као добро. 

[00:17:56] Пусти ме да форм1.хтмл, који изгледа исто. Али, ако овај пут урадим малан@харвард.еду и куцам Цримсон а не даље сарађују али цлицк Регистер, приметио одмах. Није најсекси решење. Ја сам барем ухватили ову грешку. И ја сам користио упозорење функција у ЈаваСцрипт-- које користимо само у класи. У принципу, не би требало користити јер може врло брзо изаћи контроле. Али Лозинке се не поклапају је грешка. 

[00:18:19] Пусти ме само напред и кликните на ОК. Али, оно што је кључ за понети овде је да УРЛ адреса није променио. Тако да ја не смета сам губљење Време серверовог га пита Питање које сам могао схватио одговор за себе. 

[00:18:30] И корисник, иако причају о овоме дуже него што је корисник ће мислити о томе, ће имати инстант повратне информације. Нема кашњења са умрежавања. Па хајде да погледамо овај изворног кода. 

[00:18:40] Форм1.хтмл изглед структурно слично овде. Облик је у суштини исте. Али, хајде да видимо шта сам урадио овде. И ту је различита начина да то урадите. И ја сам урадио највише право Фолловер али не већина елегантан начин још. Имам скрипте ознаку. Онда зовем доцумент.гетЕлементБиИд ('производње'). И чувајте ту вредност у облику, варијабилни. 

[00:19:04] Дакле, шта сам урадио? Можете мислити о доцумент.гетЕлементБиИд као посебна функција која ЈаваСцрипт вам даје да буквално рукама држите показивач на један од чворова или правоугаоника у овом дрвету. Дакле, сада то наша форма променљива у ЈаваСцрипт заправо показује у. 

[00:19:21] Тако да сада синтакса разликује од Ц. Али ми радимо неке ствари овде. Једна, ово је мало чудно лоокинг, свакако Версус Ц. Али погледај линији 35. Дакле, на левој форм.онсубмит. Подсетимо се да је онсубмит је као поље у структури. Ако мислите о облику променљиве се управо Ц Струцт, можда има неке поља. 

[00:19:42] Назад у дан, имали смо студентима имена, Личне карте, куће, та врста поља. Само помислите на онсубмит као друго поље. Али то је посебна област, јер Бровсер је препрограмиран очекивати .онсубмит не буде вредност као број или стринг, али да заправо бити функција или адреса функције у меморији рачунара. 

[00:20:02] И заиста, то је шта Ова кључна реч овде ради. Ово каже, дај ми нову функцију. Али, оно што је њено име ће бити, очигледно? 

[00:20:09] Размишљајући назад до понедељка. Како се зове ово Функција на основу овог синтакси? Не, мислим, јасно је да је но наме ассоциатед-- сигурно не у оно што сам овде истакао. 

[00:20:21] Али то је заиста у реду. Ово је анонимна функција, или Ламбда функција као неки би га назвати. И то само значи ипак је функција. Само, не можете га звати по имену. Али то је у реду. Јер опет, прегледач је препрограмиран компаније попут Гоогле-а или Мицрософт или Мозилла или други у Само знам да ако .онсубмит терену Унутрашњост форма елемент има вредност, третирају као фунцтион-- функција показивач, ако хоћете. И зови га када се подноси образац. 

[00:20:46] Па шта код треба да се изврши када је образац поднесен? Очигледно, све унутар коврџаве огрлицом. А ово је само стилска. 

[00:20:53] Могао би ово свиђа имамо тенденцију да радимо у ЦС50. Али у ЈаваСцрипт, већина људи теже да га задржати на истој линији само зато што је јасније повезан са те функције кључних речи. Дакле, шта сад радим? 

[00:21:03] Ако форм.емаил.валуе једнако екуалс празан стринг или ништа, ево будни где ћу да кажем, морате обезбедити Вашу емаил адресу, а затим ретурн. И то је то повратак лажно да спречава формулар буде достављен. У међувремену, ако је вредност лозинка празно, ја ћу викати на корисника и кажу, морате да обезбедите лозинку. 

[00:21:21] У међувремену ствари постају мало одгајивач овде. Ако форм.пассворд.валуе не деси једнак форм.цонфирматион.валуе, друго поље, дери се на корисник који се лозинке не подударају као и они није малочас. И онда ово је мало секси јер И Знам да сам знао да концептуално Проверио је име у пољу за потврду је. 

[00:21:40] Тако да сам могу користити узвик Тачка да кажем да ли чек није цхецкед-- је Булова вредности, истина или фалсе-- Ја ћу викати на корисника из тог разлога. У супротном, ако се проћи сви ових услова, хајде да се врате тачно. Лет образац се подноси. А то ће онда десити. 

[00:21:56] Хајде да укуцате Цримсон. Хајде да проверимо поље, кликните на Регистер. И сада проћи до одредишта. Сада, нема базе података нема. Нема ништа занимљиво у регистер.пхп. Само ми је требало нешто да стварно разговарати. Дакле, дозволите ми да паузирате, овде. Сва питања о томе шта смо управо урадили или шта су неки од овог новог синтаксе је? У реду, зар не? 

[00:22:17] ПУБЛИКА: Према томе, сваки квадратић је аутоматски Боолеан. Не мораш да га прогласи тако. 

[00:22:21] ДАВИД Ј. Малан: Тачно. Свака потврду да је послат из ХТМЛ образац на ваш ЈаваСцрипт кода ће се третирати, да, Боолеан валуе-- истинито или лажно. То је добро питање. Док су друге вредности, од Наравно, били су текст, АКА Стрингс. 

[00:22:36] У реду, тако да ме пусти ревинд мало даље. Која је поента овога? Само да буде јасно. Као, ми већ знамо, чак и из Псет7 па чак и из предавања прошлонедељног Примери, да очигледно да проверити $ _ГЕТ $ _ПОСТ Видимо да нам дају корисник празна вредност. Запамтите празну функцију у ПХП. 

[00:22:54] Дакле, само да буде јасно, шта је Један од разлога што такође може желите да урадите ову проверу грешке унутар претраживача? Шта је мотивација овде? Да. 

[00:23:06] ПУБЛИКА: Брже, а ви не послати бескорисне податке на сервер. ДАВИД Ј. Малан: Добро. То је бржи. Ти не слати бескорисно Подаци на серверу. 

[00:23:12] Тако да се вратиш више тренутни одговор. И у свему, корисник Искуство је боље. Размислите о алтернативи. 

[00:23:17] Ако за Гмаил-- и био случај пре много година. Претпоставимо да је добио новог Емаил Васа Гмаил рачун, али једини начин кроз да видимо да је, као, релоад целу страницу. Или Претпоставимо да кликнете на Линк за читање е-маил. 

[00:23:29] Све мора да се то поново да можете да видите емаил. Или Фацебоок-- добијете поруку ћаскања. Ти не видиш док поново страна или кликните неку везу. 

[00:23:36] Као, то би било ужасно досадан корисничко искуство. И то је оно што је било, Јасно, када сам се кандидовао за УЦ и веб много мање динамичан а ЈаваСцрипт није био тако популаризован као што је сада. И ствари постају много динамичнији и још много тога клијент страни у том смислу. 

[00:23:49] Али постоји квака овде, и Ово је нека врста досадног Готцха. Само зато што сте додали страни клијента Откривање овако не значи можете или да напусти сервер детекција страни. Ви у суштини желе да ставиш еррор цхецкинг на оба места. Јер оно што је био један од лекција из члана сам прочитао неке одломке из са овим глупим ЦМС систем-- Цонтент Манагемент Систем-- да је имплементацији система аутентификације, његова пријава путем којим механизмом? ЈаваСцрипт. 

[00:24:20] ПУБЛИКА: ЈаваСцрипт. ДАВИД Ј. Малан: ЈаваСцрипт, тачно, зар не? Он је користио ЈаваСцрипт. И буквално, ви имате играо мало вероватно са Цхроме инспектора. А ако ја могу да га нађем, инспекцију елемент. 

[00:24:30] Пусти ме да урадим преко све опције Цхроме. А ево како је лако онемогућити ЈаваСцрипт у претраживачу. Проверите, нема више ЈаваСцрипт. 

[00:24:38] Дакле, у правичност, доста на веб ових дана тек ће да се пробије јер Гмаил и друге ситес-- Фацебоок-- претпоставити да ЈаваСцрипт је омогућен. Али, ако радите нешто глупо Као једино валидатинг корисников инпут и то проверу за Грешке на страни клијента, противник може лако урадити. И онда још паметнији противник као и ви Сада могу користити Телнет или увијање или само командне линије команде и слати поруке на сервер који на сличан начин нису Грешка цхецкед. 

[00:25:05] Дакле, ово је више од корисник одлука интерфејс онда је стварна технички импровемент-- имплементацију нешто клијент страни овако. Тако да сада брзо поглед, али онда Ја ћу се приклоне онлајн шетњу путем за ово. У облику два, заправо прошли и очистио Кодекса мало. Али дозволите ми да се приклањају једном од спотова смо вероватно ћете уградити у Псет8 то само показује да сличне синтакса користећи библиотеку под називом јКуери, што је супер, супер популарна библиотека у ЈаваСцрипт да искрено већина људи само користити ових дана па чак и збуни као биће сама ЈаваСцрипт. 

[00:25:37] И има тенденцију да се укључе неки долар знаци и кључне речи као што су документа у загради овде. Али опет, дозволите ми да се приклоне неки спорији Туториалс онлајн него се везали за само синтакси. Идемо на нешто мало хладније у смислу примене овога. 

[00:25:50] Дакле конкретно, пусти ме напред и отвори ово овде. Хајде. Ту идемо. 

[00:25:59] Дозволите ми да отворим ову слику овде. Непотребно компликовано лоокинг, али описује технику АЈАКС-- Асинхрони ЈаваСцрипт и КСМЛ, где Кс за КСМЛ је заправо не стварно користи. Она тежи да користите нешто друго се зове ЈСОН. 

[00:26:13] Али овде је како нешто слично Гоогле Мапс или Гоогле Еартх функционише. Хајде да пробамо ово у ходу, у ствари. Пусти ме да идем напред и отвори горе Цхроме на претраживачу. 

[00:26:21] И пусти ме да одем у, кажу, мапс.гоогле.цом. И заправо, ако сте стари Довољно да се сетим шта, као, МапКуест је као назад у дан, а можда су и даље раде овако. Када сте користили за тражење нешто-- 33 Окфорд Стреет, Цамбридге, МА, хајде да урадимо ово-- вас би заправо, ти ако желео да се и пан доле, лево и десно, ти би изгледала велика стрелица на врху, и би вам показао други Оквир карте овде. Или би кликните левим и ти ће ићи тамо, или неки други клик а ти би отићи тамо. Али уместо њих дана смо наравно само узети здраво за готово да можемо да идемо око Цамбридге прилично брзо само кликом и повлачењем. Али приметите било неких застоја. 

[00:26:59] Ако ја ово радим довољно брзо, оно што се чини да се деси као што сам драг мало пребрзо за рачунар да би се? Шта видиш? Да. 

[00:27:07] ПУБЛИКА: пиксели не освеже. ДАВИД Ј. Малан: пиксела не освеже. Има и те ствари-- могао да види ово, у ствари, Ако гледате на мрежи и пауза Ова или заправо успорава за једном-- видећете да постоје плочице, тргови, или правоугаоника који недостају Мапа до Сплит Сецонд касније, више података, још фотографија заправо На екрану се појављују. И у ствари, ако урадимо ово гледајући до Цхроме'с-- рецимо, Цхроме-- хајде да видимо. Ми не можемо да урадимо то. 

[00:27:31] Ох, Вхоопс. Хајде да отворимо мапс.гоогле.цом. Дозволите ми да опет да прозор већи. 

[00:27:36] Вратите се у 33 Окфорд Стреет. Шта је сајт био сам на скоро? Имао сам ту, као, приватни трачеве да ја да бих тада тренутне поруке Сваки пријатељ који је био на мрежи који су желели да га чују. Постоји нека сајт. Мислим да је тако Цомцаст-- велики амерички ИСП. Можете, приликом регистрације за нови кабл модема сервис или ТВ услуга кабловска, имају формулар врло разумно где су вас за вашу адресу. И хаве тхис невероватно функција која се зове Ауто Цомплете, попут Гоогле-а, која почиње да попуне У одговору на ваше питање. 

[00:28:04] Проблем је, они раде ауто цомплете на првих ствари које куцате. Тако да ако почнете да куцате у 33 је, ће вам показати буквално свака кућа у Америци да почне са бројем 33 пре наставка Очекујем да куцате више. Дакле, ако сте тип 33 Оксфорд, онда вам показује сваку улицу у Америци која има 33 Оксфорду његово име, без обзира на града да си у. 

[00:28:25] А онда наставите да куцате. И на крају, када схвате да они не Понуда услуга на кућну адресу у Кембриџу или нешто слично. Али поента је, ово је највише глуп спровођење ауто заврши икада. 

[00:28:34] И само ћу Офф на овом тангента поново. Али постоје добри начини за користе ЈаваСцрипт и лоше путеве. И то није нужно најбољи. 

[00:28:40] Али поента овде, пре тога тираде, био је да се отвори алата овде и отвори развојне алате, као што смо раније охрабрени, и да гледамо Нетворк картицу као што кликнете јако брзо. И приметити гомилу ухватила захтева догодило. Све ово се десило када сам вукла. 

[00:28:57] И највероватније, заиста Многи од тих редова Сада су слике Сласх ЈПЕГ МИМЕ типови или врсте садржаја. То је зато што оно што ради Цхроме сваки пут кад кликните и превуците, кликните и повуците је то реализује, ох, Морам да идем питати Гоогле за плочице на карти која је овде, Брзо га преузети преко ХТТП, а затим га додати тзв ДОМ на веб претраживача на меморијску дрвету представљање тако да корисник, ја, види да ажурира плочицу. А то је због техника зове АЈАКС. Назад у дан, стварно је био случај да ако желео да промени оно што је на екрану, бисте морали да кликнете горе, доле, лево, у праву. И онда би се нова страница отвори. Али ових дана, све је динамичнији. То се дешава у начину на који људи би Надам се да би, заправо, интерактивно. И то постиже начин техници названој АЈАКС, која је можда најбољи објашњава пример. Прво, дозволите ми да само напред и отвори фајл позвао куоте.пхп у данашњи дистрибуција кода. 

[00:29:53] А онда пусти ме да радим симбол-- Упс. Пусти ме да урадим симбол = ГООГ за само неко лагеру. Или стварно, хајде да урадимо један од Псет ФРЕЕ. Ентер. 

[00:30:05] А сада погледајте шта се вратим. Дакле, ово је стварно Укратко ПХП фајл који сам написао да једноставно позајмљује код од лоокуп функције Псет7 с и избацује користећи овај коврџаву браце и цитати и дебелог нотација, очигледно, Цена на Цуррент Стоцк за Компанија које пролазе преко ГЕТ. Дакле, ово је другачије од већине онога што имамо урађено у том обавештењу сам буквално бљувао како изгледа ЈаваСцрипт кода. 

[00:30:27] У ствари, то је ЈаваСцрипт објекат. У ствари, само да буде јасно, ЈаваСцрипт Објецт Нотатион-- ЈСОН-- је само фенси начин да се каже да вас може представљати податке ЈаваСцрипт много Као што можете у ПХП коришћењем кључних вредности парова. Дакле, ако сам хтео да се изјасни променљива у ЈаваСцрипт да представља Замила, за инстанце-- струцт за Замила-- и ми ћемо га звати Студент, ова варијабла. Њен ИД је једна, куца је Винтхроп, а име је Замила. 

[00:30:53] Али исто тако може имати низ објеката. Дакле, ако сам заиста желео да имам низ у ЈаваСцрипт садржи више таквих објеката, ова време представља особље, Можда су ове три комади Цоде Назад враћа се назад за њих тројица бивших припадника особља. Дакле синтакса, лепа слично ботх-- ​​на ПХП. Али ово је посебно ЈаваСцрипт. То је предмет нотација. Дакле, шта је то корисно за? 

[00:31:17] Ако пишем код који избацује ЈСОН-- ЈаваСцрипт Објецт Нотатион-- ствари које изгледа овако или ствари које Изгледа да је структура Замила, Ја заиста могу користити у програмима пишем. Пусти ме да идем у ајак0.хтмл. И то најбоље урадио-- није много мисао даје естетици. Али пази шта се дешава. 

[00:31:34] Пусти ме да идем напред и Тип овде. Кликните гет цитат. И приметите УРЛ адреса није променила. Али сам добио поп са наизглед данашња Пенни Стоцк цена $ 0.15. Дакле, не толико лоше. Али разлика је у томе некако, ови подаци се вратио по мене директно. Али хајде да корак ка нешто више познато. У верзији један овог, пусти ме Тип поново, кликните на Гет цитат, и сада-- Ох, то је било заправо верзија јКуери. Дакле, ми реци-- нисам Брзо унапред сасвим довољно далеко. Пустите ме да идем на верзију два, где сам и желела. Приметите шта сам овде урадио. Имам веб паге-- супер једноставна верзија сваког веб странице можете користити данас са поље овде бесплатно и онда очигледно само Тект. 

[00:32:14] Ово није форма овде, очигледно. Али ако кликнем се цитат, приметио моју веб страницу ће се променити као да сам Управо је добио новог инстант поруке или као да сам се преселио карта и потребно да добијете више података додао динамички на веб страници без УРЛ мења и корисника искуство геттинг прекинут. Заиста, још увек сам у Потпуно исти место-- ајак2.хтмл. 

[00:32:35] Па хајде да погледамо само на овом примеру па да видимо како се то догађа. Пусти ме да идем у ајак2.хтмл. И први приметио форму. 

[00:32:44] Овде, ја окреће Офф Ауто Цомплете. Понекад постаје досадан ако браузер покушава да вам покажем Ваша Читава историја. Тако да можете да урадите у ХТМЛ стране Само кажем ауто цомплете искључен. 

[00:32:53] Ја сам дао ово поље Тект симбол-- пре, ИД симбола. А сад, ово је занимљив функција. Нисмо разговарали о распона, али можете мислити о томе као став ознаке или ознаке див. То је оно што се зове линијски елемент, који значи да нећете добити став бреак изнад и испод њега. Управо ће остати у линији без ударање еквивалент ентер. Тако да сам дао тај комад ХТМЛ треба да се утврди јединствени идентификатор да сам произвољно звао цена. И ја имам дугме Пошаљи. 

[00:33:21] Јер сада се овде-- и то је заправо Супер невероватно колико мало код можете написати да урадите релативно уредно ствари-- погледајте шта сам урадио овде ако ја дођите до главе ове странице. Ја сам први пут у инцлудед Моја глава сценарио ознака то заправо референце ЈаваСцрипт филе другдје. Ово је из организације да пише јКуери, А ово је само вам даје најновије верзија њиховог јКуери библиотеке. 

[00:33:42] Дакле, ово је нешто као оштар укључе у Ц или захтевају у ПХП. Ви користите скрипту таг са извора атрибутом. Али сада мој број је ће бити у реду овде. 

[00:33:52] Приметио сам функцију зове Куотес. И то изгледа мало Цриптиц на први поглед. Али хајде да задиркују ово одвојено. Дај ми вариабле назвао УРЛ адресу. Доделите га буквално Овај стринг. Дакле, једноструке наводнике, двокреветне цитати ЈаваСцрипт ми само даје низ. Шта више уради? Спајање. 

[00:34:08] Дакле, ово је сада јКуери синтакса који се мало навићи. Али то само значи донеси ми ДОМ чвор чији јединствени идентификатор је симбол. Хаштагот тамо значи јединствени идентификатор симбол. 

[00:34:21] Долар пријава заграде само значи, завршити ово у јКуери врста тајног соса тако добијате додатну функционалност. А онда је очигледно .вал функција, или као што сада кажете, метод унутар овог чвора да само вам даје вредност. Дакле укратко, ружна и збуњујуће јер ово изгледа на први поглед, Ово само значи да са корисником куцаног у, стави на крају низа тако да се спајају. То је све. 

[00:34:43] Тако да сада, последња три реда. Можете да протури много функционалност од три линије. Овај знак доллара, као страну, је само надимак за посебну глобалну променљиву звао буквално јКуери. 

[00:34:55] Долар знак само изгледа кул. Дакле јКуери заједница некако да га користе као свој посебан симбол. То не значи оно што значи у ПХП. У ЈаваСцрипт, долар знак баш као слово азбуке или број за променљиву. 

[00:35:07] Можете само да га као име. Само изгледа кул. Тако заједници усвојен је као надимак за своју библиотеку под називом јКуери. 

[00:35:13] И то је супер популарна. Зато се ЈСОН је управо то. То је функција која Људи из јКуери написао који добија ЈСОН из сервер-- ЈаваСцрипт Објецт нотација. Од онога УРЛ адреса иде добити ту информацију? Очигледно са ове УРЛ адресе овде. 

[00:35:27] И шта би требало да уради као прегледач чим врати овај одговор? И то је магија Ајак, тако да спеак-- Асинцхроноус ЈаваСцрипт у КСМЛ. Тешко је да се види са таквим једноставан пример како смо овде имали. 

[00:35:41] Али, то је било у асинхрони осећај да је мој број, када извршена је послао поруку сервер да одемо ми мало ЈСОН. И десило се супер брзо да сам добио одговор. Али оно што је занимљиво је да је ово линија кода није висе мој компјутер. 

[00:35:55] Ја нисам видио предење икону. Нисам изгубио способност да померим миш. Мој Бровсер је заправо сасвим у реду. 

[00:36:01] Јер начин ЈаваСцрипт рукује одговор сервера је следећи. Се региструјете како бисте назвати цаллбацк функцију, која само значи, хеј, ЈаваСцрипт. Чим сервер реагује ЈСОН, позовите ову анонимну функцију. 

[00:36:18] И молим вас прошао у ову функцију онај стринг сервер испљунути као аргумент звао података. Другим речима, ако Ја динамички монтаже УРЛ адреса куоте.пхп пролази у овом Симбол као што је бесплатан или ГООГ или ситница, Ја тада говорим ЈаваСцрипт иди тај УРЛ. Имајте на уму да претраживача ће нешто да се врати да изгледа као да смо видели еарлиер-- ово. 

[00:36:42] А шта други аргумент овде да се говори ЈСОН се зову ову функцију Када сервер врати да ли је 10 милисекунди од сада и 10 секунди од сада. И чим ти, додати цену на страницу. Ова синтакса овде само значи одемо чвор од дрвета чији јединствени идентификатор је прице-- тог распона смо видели раније. 

[00:37:01] Овај метод се зове ХТМЛ само каже, иди замените ХТМЛ који је тамо са дата.прице. Шта је дата.прице? Па, браузер, сећам се, Показао ми је ово вратити. Дакле, то су подаци. 

[00:37:14] И тако је мало загонетан да видите зарезе овде. Али, у ствари, дозволите ми да урадим ово. Дозволите ми да налепите ово Реал брзо у гедит и показати да смо показали Структура Замила је раније. 

[00:37:27] Који сервер шаље назад је Мало објекат који изгледа овако. И тако је дата.прице само ми даје 0.1515. Дакле, пуно кретања Делови овде одједном. 

[00:37:39] Али кључни Такеаваис је да ми имамо ту способност да додатно ХТТП захтева помоћу ЈаваСцрипт без поново страницу. И онда можемо да промените веб страницу на лету. И испоставило се да је ЈаваСцрипт и други језици се сада може користити не само да мутира веб странице, али да заправо писати софтвер у стварном рачунару, не само ограничена на Цхроме или слично. 

[00:38:00] У ствари, ако-- Цолтон, да вас да нам се придружите врати овде са лабораторијског кодом, и Цханг као? Идемо напред, пошто је говорио о анонимне функције и Цаллбацкс и заиста изазива судбину овде с Ливе Демо са крварењем едге тецхнологи, једна од ови Елите Мотион уређаји. Сада, овај уређај, опозив, је мало УСБ уређај као и да је то-- лепи који се прикључује се на УСБ портова. 

[00:38:25] А онда се обезбеђује унос у облику људских гестова откривањем користећи инфрацрвене зраке, у суштини, покрети из руку. Дакле, док је оно што је покушао Марија пре него је мишићав, заправо осећа шта мења Твоја рука, ово је инфрацрвена заснива. Тако да је у потрази за кретања у врста сфере стопала или тако самог уређаја. 

[00:38:46] Па зашто не узимам убодна ово прво? И идемо напред и баци Ви се на графоскоп овде. Па хајде да стави Колтон лаптоп овде. Имамо Андрев на ТВ. А шта би ти волео да прво урадим? 

[00:39:00] ЦОЛТОН: Само напред и само Ставите руке иза овог момка па ћете видети неке феноменалне сјај. 

[00:39:04] ДАВИД Ј. Малан: Веома лепо. Ово се све дешава у реалном времену. У реду. У реду, и да. Тако лепо. У реду, шта још можемо да урадимо? 

[00:39:15] ЦОЛТОН: Идите на следећи екран и види. 

[00:39:17] ДАВИД Ј. Малан: У реду. 

[00:39:19] ЦОЛТОН: забавно мало игра где ти да роботе. 

[00:39:21] ДАВИД Ј. Малан: У реду, тако да је ово је факе руке показује ми шта да радим. ЦОЛТОН: Да Па изволите и зграби један од блокова и ставио га на врху тела које робота. ДАВИД Ј. Малан: О, ту је моја рука. Ох. У реду, слатко. Чекај мало, у реду. Ту идемо. 

[00:39:41] ЦОЛТОН: Направио сам један на несрећи. 

[00:39:43] ДАВИД Ј. Малан: Ок, ја ћу овог типа. Проклетство! Када смо вежбали ова задња ноћ, знаш шта је пренета у? 

[00:39:51] Овако. У реду. Следећи? 

[00:39:55] ЦОЛТОН: Наравно. 

[00:39:56] ДАВИД Ј. Малан: У реду, и ту је трећи. У реду. ЦОЛТОН: И у овом једном, добијате да-- ДАВИД Ј. Малан: О, Ово је предивно. ЦОЛТОН: --иеах, покупи осим овај цвет. ДАВИД Ј. Малан: У реду. Не? Промашио. 

[00:40:14] ЦОЛТОН: О, ево га. 

[00:40:15] ДАВИД Ј. Малан: Ах, погледај то. Врло лепо. Па, зашто донт 'узмемо од једног волонтера овде који би желели да дођу на горе. Како би било тамо у зеленом, зар не? 

[00:40:27] У реду, па хајде да бих-- Уместо тога, неки од вас Можда знате ову игру овдје-- пресекао конопац, можда? Хајде да видимо. Ми имамо своје наочаре овамо? 

[00:40:37] У реду. Хвала. Како се зовеш? 

[00:40:39] ПУБЛИКА: Лаура. 

[00:40:40] ДАВИД Ј. Малан: Лаура? Драго ми је да видим. Ако вам не смета стављање Гоогле Стакло преко наочара. Ово је Цолтон. 

[00:40:46] ЦОЛТОН: Здраво. Драго ми је што смо се упознали. 

[00:40:48] ДАВИД Ј. Малан: Ок, хајде око. У реду, па шта ћеш урадимо овде, пошто играо раније, се стави руку преко Леап Мотион овде. А сада ваш стрелица треба да се померају. Ох, не. 

[00:40:57] ПУБЛИКА: Не 

[00:40:58] ДАВИД Ј. Малан: Ми Не желим још да одустанем. У реду, чекај. Овамо. Дакле, приметите како сте држите прстом преко нечега, миш почиње да иде зелена, која је како кликнете. 

[00:41:06] Дакле, лебди изнад Плаи. И само један прст је у реду. А сада кликните на мало зелени момак са леве стране. А сада држи док се не напуни зелено. Добро. Сада, као, први ниво горе. 

[00:41:16] ПУБЛИКА: Да, желимо ниво један, овде. 

[00:41:20] ДАВИД Ј. Малан: Добро. Ок, тако да све што имаш да урадите је да смањи конопац. Курсор је бели доле. 

[00:41:28] Врло лепо. У реду, то је око да се теже. Дакле, држите прст у наредних сада. Добро. Ово је тешко. 

[00:41:39] ПУБЛИКА: О срање. У реду. Она жели да иде тим путем. Ох срање, то-- 

[00:41:44] ДАВИД Ј. Малан: Да. Секундарни циљ је да се све звезде. У реду, следећи. 

[00:41:53] Хајде да видимо да ли можете да добијете овај трећи. Добро. У реду, иди тамо. 

[00:42:06] Наравно. Јако лепо. У реду. 

[00:42:11] Па зашто не бисмо овде са радом данас? Никоме дођи до ко жели да игра. Хвала толико Лаури наш волонтер. И ми ћемо те видети у понедељак. 

[00:42:18] ПУБЛИКА: Вероватно желите да се она врати. 

[00:42:21] Звучник 2: На следећој ЦС50--