Дэвід Дж Малання: Добра, так гэта вось Міо рука група, пару з якіх мы ёсць для CS50 канчатковых праектаў. І гэта было дэманстрацыяй мы стаялі ў чарзе Вы да загадзя, дзе па сутнасці гэта даволі туга павязку тут прыслухоўваецца да вашых цягліцавых рухаў , Якія затым адлюстроўваюць ў галіне праграмнага забеспячэння для ноўтбука Колтон тут, якія было Itunes і што Песня ўжо стаялі ў чарзе. Замест таго, каб мне запісваць дэма гэта, Колтон быў у лабараторыі ясна ўвесь тыдзень атрымліваць дэманстрацыю гатовыя на працягу аднаго адважнага добраахвотніка. Калі хто-то хацеў бы прыехаць на up-- ўбачыў сваю руку першым. Давай да. [00:01:09] Добра. І як цябе завуць? 

[00:01:13] АЎДЫТОРЫЯ: Э-э, Марыя. 

[00:01:14] Дэвід Дж Малання: Марыя, прыемна бачыць вас. Давай сюды. Дазвольце мне пазнаёміць вас з Колтон. Колтон, гэта Марыя. 

[00:01:21] Колтон: Прывітанне, прыемна пазнаёміцца. 

[00:01:23] Дэвід Дж Малання: Усе Права, так што ні крок, мы прыйдзецца вам паставіць гэта на перадплечча так што гэта даволі шчыльна каля локця. А між тым, давайце паставіць на нашай Google Glass і мы будзем змешваць тэхналогіі сёння. 

[00:01:33] Колтон: Па-першае, мы павінны будзем падключыць гэта ў рэчах. 

[00:01:36] Дэвід Дж Малання: ОК. На самай справе, давайце вашу руку, як блізка да гэтага кабелю, як гэта магчыма так што мы можам спачатку сінхранізаваць яго. 

[00:01:41] Колтон: Давайце зробім гэта. 

[00:01:42] Дэвід Дж Малання: А між тым, так што кожны можа атрымаць больш блізкі погляд, мы кінуць камеру Эндру на экране няма. Таму ў нас ёсць кабель USB, гэта быўшы падлучаны да павязкай Марыі. І дазвольце мне кінуць экран Колтон на праектары наступным. 

[00:02:00] Так Колтон рэгіструе прылада Зараз, як Міо падлучаны да гэтага кабелю. А зараз тое, што Марыя збіраюся рабіць імгненне на самай справе ісці праз крокі каліброўкі і навучыць праграмнае забеспячэнне як яе мышцы рэагаваць калі яна пераканацца, папярэдне вызначаны жэсты, што праграмнае забеспячэнне разумее. Калі вы хацелі б пайсці ў Пярэдняя частка экрана. Добра, працягвайце спрабаваць. 

[00:02:30] Колтон: Перайсці падобнае. І як, што. І ўсю дарогу справа. Вяртацца. 

[00:02:35] Дэвід Дж Малання: ОК. Іншага пункту гледжання. Гэта не вы. Гэта нам. 

[00:02:40] МАРЫЯ: Добра. Дэвід Дж Малання: Не. Давайце перанесьці яго вышэй, так гэта бліжэй да локця, ці нават мацней. Добра. 

[00:02:52] Тут мы ідзем. Гэта было б добры час для CS52X. Там мы ідзем. 

[00:02:57] Вельмі міла. Добра. Вялікі палец на мезенец. 

[00:03:02] Вельмі міла. Спрэд пальцы. Добра. Хваля права. Гэта цікава, які паказвае Вы з левай hand-- 

[00:03:17] Колтон: Так, гэта дзіўна. Дэвід Дж Малання: Хваля права і рухацца наперад. Перанясемся прапусціць або побач. Гэта нармальна прама Wave. 

[00:03:25] МАРЫЯ: Я don't-- чакаць. 

[00:03:26] Дэвід Дж Малання: Патрэбна дапамога? 

[00:03:28] Колтон: Дык што вы збіраецеся, як гэта. МАРЫЯ: Гэта ператвараецца Іншая справа, аднак. Колтон: Гэта. Дэвід Дж Малання: Ды я не ведаю, чаму ён паказвае вам leftie. Колтон: Чаму б вам не try-- паспрабуйце у ​​тым жа духу. 

[00:03:38] Дэвід Дж Малання: Не? Можа дасягаць руку з прамей і зрабіць яго больш рэзкім, як гэта. Так, добра, давай. 

[00:03:48] МАРЫЯ: Я шкадую. Дэвід Дж Малання: Гэта не ваша віна. Колтон: Гэта нармальна. Дэвід Дж Малання: All Right. Well-- 

[00:03:56] МАРЫЯ: Ці павінны мы прапусціць гэта, тады? Дэвід Дж Малання: Так, давайце хай вам сарвацца з кручка. Так што, калі хто-то хацеў зрабіць Канчатковы праект, выкарыстоўваючы гэтую рэжучую абзу абсталяванне, разумею, што гэта можа проста ўзяць крыху прывыкнуць. І this-- рэальнасць гэта на самай справе вельмі краі. 

[00:04:10] Гэта тое, што называецца Камплект распрацоўніка, які прызначаецца, каб быць істотна прэ-рэліз так што людзі могуць рабіць тое, this-- змагацца з ім, постаць аб тым, як органы народныя працаваць з тэхналогіяй. Так што, калі вы хочаце потым, пасля лекцыі, мы можам дазволіць вам прыйсці і зрабіць яшчэ адзін удар у гэтым. Але ў адваротным выпадку, апладысменты, калі мы маглі, для Марыі прыйшлі на да. 

[00:04:26] МАРЫЯ: Дзякуй. 

[00:04:28] Дэвід Дж Малання: Дзякуй. Мы павесіць на гэта, але мы дамо you-- як пра стрэс мяч тут? О, и-- if-- так, дзякуй. Добра. Такім чынам, для цікаўных, калі б вы былі знаёмыя з гукавой выбару што мы зрабілі там раней, дзіўны ТБ паказаць, што вы павінны абсалютна быць выпіўка-глядзець на Netflix гэта адзін тут. 

[00:04:51] СПІКЕР 1: Дамы і спадары, чараўнік па імі Джош. 

[00:05:04] Дэвід Дж Малання: І, відаць, гэта рэч у тэкст мяне падчас лекцыі цяпер. Мне сказалі, што Марыя быў дзень нараджэння ўчора. Так З Днём Нараджэння ад CS50 Марыі, а таксама. 

[00:05:18] Такім чынам, вы, магчыма, чыталі ў апошні месяц што гэта спадары тут, Стыў Балмер, які быў на самай справе клас 1977 г. у каледжы, Нядаўна які пайшоў у адстаўку для Microsoft. Ён быў студэнт тут, то пару гадоў праз апынуўся ў Стэнфард Business School калі ён атрымаў тэлефон патэлефанаваць з адным сваім, якія жыў па калідоры ад яго тут, у Гарвардзе. Імя гэтага сябра быў Біл Гейтс, і ў той час, ён спрабаваў завербаваць Стыва быць Першы дзелавой чалавек, на самай справе, у невялікай кампаніі назваць Microsoft. 

[00:05:45] Карацей кажучы, Стыў у канчатковым выніку перамог, далучыўся Microsoft, калі яны было ўсяго 30 супрацоўнікаў. І да таго часу, ён выйшаў у адстаўку зусім нядаўна, кампанія мела 100 тысяч супрацоўнікаў За апошнія некалькі гадоў. І так сайт вядомы як The Verge падрыхтаваў гэтую даніну на відэа што мы думалі, што мы падзяліўся, што дае вам пачуццё, як шмат энергіі Стывам прыводзіць да любой прэзентацыі ён дае. [ВИДЕОВОСПРОИЗВЕДЕНИЕ] -Microsoft Паходам на чацвёртага дзіцяці. Дзеці робяць пакінуць дом. У гэтым выпадку, я думаю, Я сыходжу з хаты. Эй Біл, whazzap? 

[00:06:23] -Wazzap? 

[00:06:24] Эй, 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] Усё з адным пстрычкай мышы! Адзін Microsoft, адна стратэгія, адзін нашой сканцэнтраваны, дысцыплінаваны, прафесійны, і эксперт ва ўсім, што мы робім. Дазвольце мне выкарыстоўваць лінію з старога фільма. 

[00:07:52] Адносіны, як акулы. Яны рухаюцца наперад або яны паміраюць. Я на самой справе думаю, што цёк кампаніі аднолькавыя. 

[00:08:01] [END ВИДЕОВОСПРОИЗВЕДЕНИЕ] Дэвід Дж Малання: Такім чынам, мы так рады паведамляе, што Стыў будзе далучацца да нас тут у CS50 наступную сераду ў Звычайнае месца і час тут. Касмічная, верагодна, будзе абмежаваным. І так, каб далучыцца да нас асабіста, калі ласка, ўзначаліць сёння або неўзабаве пасля гэтага у cs50.harvard.edu/register. 

[00:08:22] І мы будзем сачыць за дапамогай Аўторак, які пацвярджае плямы. З нецярпеннем чакаем, што ў наступным У сераду ў час лекцыі ў CS50. Цяпер, у іншых навінах, я выпадкова не сутыкаўся з гэтым у Пунсовым проста на днях. 

[00:08:34] Атрымліваецца, што адзін з супрацоўнікаў CS50 ў і па меншай меры адзін са студэнтаў CS50 ў у цяперашні час працуе для UC Прэзідэнт і віцэ-прэзідэнт, які вярнуў мяне маім уласным дзён таму калі я прайграў выбары UC трэскам. Але ліха без дабра у тым, што гэта я заўсёды распавесці гісторыю, што адзін з Я ўпэўнены, шмат прычын, я страціў выбары было поўнае адсутнасць з талентам прамоўніцкага. І так, шчыра кажучы, гэта адвёз мяне, што вопыт Я думаю, што мой малодшы год, на самай справе падпісаць для Гарвардскага камп'ютэрнага грамадства, якія гэта група на тэрыторыі кампуса, што праводзіць розныя тэхнічныя перамовы і іншыя рэчы. І я ўзяў на сябе іх навучанне семінары і таму меў магчымасць, Выдатная магчымасць, каб пачаць працаваць на менавіта гэта. Але таксама, я меў магчымасць на працягу гэтага вопыту каб навучыць сябе ўсё больш 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] АЎДЫТОРЫЯ: разметкі для вэб-сайтаў. Дэвід Дж Малання: разметкі для вэб-сайта. Так што гэта мова разметкі, дазваляе структураваць вэб-старонкі. Загаловак ідзе тут, назва ідзе тут, арганізм пераходзіць тут. Гэта паўтлусты, гэта italics-- такога роду падрабязна. 

[00:10:33] Добра, добра. Так CSS дазваляе you-- і я ўзяў некаторыя вольнасці там з тлустым абліцоўваннем і курсівам, таму што што лепш рэалізаваны з гэтым. CSS is-- што? Скажам, у сказе. Любы наогул. Так. 

[00:10:46] Аўдыторыя: Упрыгожванні і матэрыял, як, як праектаваць яго. Дэвід Дж Малання: ОК, добра. Ўпрыгажэнні, якія дазваляюць вам аформіць яго ці стылізаваць яго з рэчамі, як шрыфтам і курсіў і кветак, а таксама больш тонкай крупчастай пазіцыянаванне элементаў. Гэта свайго роду дазваляе прымаць рэчы на апошняй мілі, так што, калі, напрыклад, у Pset7, вы, магчыма, заўважылі на ваш Партфель старонкі, калі вы ў гэты момант ўжо, што табліца па змаўчанні, што вы зрабіць, каб паказаць запасамі карыстацкія і грашовых, верагодна, выглядае даволі агідна па змаўчанні, без прабелаў. Усё ў свайго роду забітыя разам у радках і слупках. 

[00:11:18] Ну, з невялікай колькасцю CSS, як вы можаце зразумець ,, Вы можаце фактычна наладзіць, што і зрабіць гэта што-то значна больш знаёмыя і шмат прыгажэй на выгляд. Так CSS складае каля стылізацыя сайтаў. Але тады мы ўвялі яшчэ адзін мова, PHP, які дазваляе нам рабіць? 

[00:11:36] Давайце проста рабіць тое, што? Любы. Дабраўся да выходзіць за рамкі першыя пару радкоў. Так. 

[00:11:40] АЎДЫТОРЫЯ: Генерацыя дынамічнага кантэнту. Дэвід Дж Малання: Выдатна. Генерацыя дынамічнага кантэнту. І вы можаце зрабіць гэта ў любую колькасць моў. Мы вырашылі выкарыстаць PHP, таму што гэта ў часткі так, аналагічнай сінтаксісу C. 

[00:11:50] Але PHP робіць менавіта гэта. Гэта дазваляе дынамічна генераваць выхад. І некаторыя з гэтага выхаду можа быць HTML, як мы звычайна робім. І гэта таксама, таму што гэта Мова праграмавання, з'яўляецца Механізм, з дапамогай якога мы можам гаварыць з базамі дадзеных. 

[00:12:03] І мы можам зрабіць запыты ў іншыя серверы, такія як йэху і праграмна зрабіць што-небудзь сапраўды, што вы маглі б у адваротным выпадку хачу, каб прымусіць кампутар рабіць. Так PHP дазваляе нам пачаць дынамічна вываду кантэнту. Так па гэтай логіцы, у мяне не было дынамічны сайт яшчэ ў 1998 годзе. 

[00:12:16] Гэта было проста статычным вэб-старонка. Мой кантэнт павінен быў быць зменены шляхам ўручную з Gedit ці нейкі эквівалент. Але PHP з'яўляецца тое, што мы выкарыстоўвалі ці можа быць выкарыстаны, а, нешта накшталт Сайт Фрош чаты, якія меркавалася, узяў рэгістрацыі і кіраваць спісам users-- рэчаў, якія фактычна пераходзе Час, хоць мы, аказваецца, выкарыстоўваць Perl, іншая мовай у той час. 

[00:12:35] І тады, нарэшце, мы ўвялі SQL-- Structured Query Language. Так яшчэ адну мову які выкарыстоўваецца для чаго? Выкарыстоўваецца для чаго? Ці можам мы рызыкаваць slight-- Добра, што мы не збіраемся атрымаць значна далей чым аркестра тут. АЎДЫТОРЫЯ: Гэта пратакол выкарыстоўваецца, каб пагаварыць з базамі дадзеных. Дэвід Дж Малання: пратакол выкарыстоўваецца, каб пагаварыць з базамі дадзеных. Дазвольце мне падправіць. Гэта натуральны мова выкарыстоўваецца пагаварыць з 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-- дакумента Аб'ект Model-- які з'яўляецца толькі мудрагелісты спосаб сказаць дрэва. 

[00:14:56] Цяпер, чаму гэта карысна думаць пра гэта такім чынам? Таму што цяпер з JavaScript, таму што ў нас ёсць Код, які дабіраецца, каб гуляць у гэтую серада, фактычны HTML гэта быў адпраўлены ў браўзэр ўжо і ўжо былі загружаныя ў памяць Браўзэр ў дрэва ў вашага кампутара RAM, як гэта, мы можам выкарыстоўваць JavaScript на самай справе прайсці або пешшу або пошук ці змяніць што DOM дрэва, аднак мы хочам. Такім чынам, на самай справе, калі вы думаеце, аб facebook.com, калі вы выкарыстоўваеце функцыю чата, калі вас Выкарыстанне Gmail і функцыя Gchat, што-небудзь, дзе ў вас ёсць Паведамленні, якія паступаюць зноў і зноў і зноў, гэтыя паведамленні, верагодна, як Л.І. тэг, Спіс тавару тэгі, магчыма. 

[00:15:35] Ці, можа быць, яны проста дзівы, якія трымаюць з'яўляцца кожны раз, калі вы атрымліваеце імгненнае паведамленне. І так, што проста азначае, што 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] І я не буду сцяжок. Дазвольце мне спасылку Зарэгістравацца. І гэта кажа, хм, вы зарэгістраваныя. Не зусім так. 

[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. Але тое, што ключ вынас тут з'яўляецца тое, што URL не змянілася. Так што я не папрацаваў марнаваць Час сервера з просьбай Пытанне, які я мог бы высветлілі адказ на сабе. 

[00:18:30] І карыстальнік, нават пры тым, казалі пра гэта больш, чым карыстацкімі буду думаць пра гэта, будзе мець імгненную зваротную сувязь. Там няма затрымкі з падключэнне да сеткі. Такім чынам, давайце паглядзім на гэты зыходны код. 

[00:18:40] Form1.html знешнасць структурна падобныя тут. Форма фактычна тое ж самае. Але давайце паглядзім, што я зрабіў тут. І ёсць розныя спосабы, каб зрабіць гэта. І я зрабіў самае прама паслядоўнік але не самы элегантны спосаб яшчэ. У мяне ёсць тэг сцэнара. Я тады тэлефануйце document.getElementById ('рэгістрацыя'). І я захоўваць гэтае значэнне у форме, пераменная. 

[00:19:04] Так што я зрабіў? Вы можаце думаць аб document.getElementById як спецыяльная функцыя, JavaScript дае вам што літаральна ўручае вам паказальнік на адзін з вузлоў або прастакутнікі ў гэтым дрэве. Так што цяпер гэта тое, што наша пераменная форма у JavaScript на самай справе паказвае на. 

[00:19:21] Так што цяпер сінтаксіс адрозніваецца ад C. Але мы робім некалькі рэчаў тут. Адзін з іх, гэта адна крыху дзіўна гледзячы, вядома ў параўнанні з C. Але паглядзіце на лініі 35. Так на левай form.onsubmit. Нагадаем, што onsubmit з'яўляецца як поля ў структуры. Калі вы думаеце пра зменнай формы проста быць C структура, ён можа мець некалькі палёў. 

[00:19:42] Назад у дзень, у нас былі студэнты імёны, Ідэнтыфікатары, дома, тыя, накшталт палёў. Проста падумайце аб onsubmit як іншы вобласці. Але гэта спецыяльнае поле, таму што Браўзэр запраграмавана чакаць .onsubmit каб ня быць значэннем як лік або радок, але на самой справе быць функцыяй або адрас функцыі ў памяці кампутара. 

[00:20:02] І на самай справе, вось што гэта ключавое слова тут робіць. Гэта кажа, дайце мне новую функцыю. Але тое, што яго імя будзе, відаць? 

[00:20:09] Успамінаючы панядзелак. Як называецца гэта функцыя, заснаваная на гэтым сінтаксісе? Не, я маю на ўвазе, ёсць выразна імя не associated-- вядома не ў тым, што я вылучыў тут. 

[00:20:21] Але што на самай справе ў парадку. Гэта ананімная функцыя, або Функцыя лямбда, як некаторыя маглі б назваць гэта. І гэта проста азначае, гэта ўсё ж такі функцыя. Гэта проста, вы не можаце назваць яго па імені. Але гэта не страшна. Таму што зноў, браўзэр быў запраграмавана кампаній, як 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, Іншае поле, крычаць на карыстальніка, што паролі не супадаюць, як яны зрабіў не хвіліну таму. А потым гэта свайго трохі сэксуальней, таму што I ведаю я ведаў канцэптуальна, што праверыў гэтае імя сцяжок ст. 

[00:21:40] Так што я магу проста выкарыстоўваць ўсклік Кропка сказаць, калі праверка не checked-- гэта лагічны Значэнне, праўда гэта ці false-- Я крычаў на карыстальніка па гэтай прычыне. У адваротным выпадку, калі мы атрымаем праз усе гэтыя ўмовы, давайце проста вярнуцца дакладна. Хай форма ўяўляецца. І гэта будзе адбывацца. 

[00:21:56] Давайце ўвесці малінавы. Давайце сцяжок, націсніце Рэгістрацыя. А цяпер я іду да месца прызначэння. Зараз, няма базы дадзеных ёсць. Там няма нічога цікавага у register.php. Мне проста трэба было нешта на самай справе казаць. Такім чынам, дазвольце мне спыніцца, тут. Любыя пытанні аб тым, што мы толькі што зрабілі ці тое, што некаторыя з гэтага новага сінтаксісу? Добра, так? 

[00:22:17] АЎДЫТОРЫЯ: Такім чынам, любы сцяжок аўтаматычна Boolean. Вы не павінны аб'яўляць, як ён. 

[00:22:21] Дэвід Дж Малання: Правільна. Любы сцяжок, які пасланы да вас ад HTML форма ў код JavaScript будзе разглядацца, так, як Лагічнае value-- сапраўдным або ілжывым. Гэта добры пытанне. У той час як у іншых каштоўнасцяў, з Вядома, былі тэкст, AKA радка. 

[00:22:36] Добра, так што давайце мне таму трохі далей. Тое, што было ўвесь сэнс гэтага? Проста каб быць ясна. Маўляў, мы ўжо ведаем, нават з Pset7 і нават з лекцыі на мінулым тыдні прыклады, якія, відавочна, можна праверыць $ _GET $ _POST Лі карыстальнік дасць нам пустое значэнне. Памятаеце пустую функцыю ў PHP. 

[00:22:54] Так проста, каб было ясна, што адна з прычын, мы маглі б таксама хачу зрабіць гэтую праверку памылак ўнутры браўзэра? Што матывацыя тут? Так. 

[00:23:06] АЎДЫТОРЫЯ: Хутчэй, і вы не адправіць непатрэбныя дадзеныя на сервер. Дэвід Дж Малання: Добра. Гэта хутчэй. Вы не адпраўляць бескарысна дадзеныя на сервер. 

[00:23:12] Такім чынам, вы атрымліваеце назад больш неадкладны адказ. І ў цэлым, то карыстальнік вопыт лепш. Падумайце пра альтэрнатыву. 

[00:23:17] Калі для Gmail-- і было так шмат гадоў таму. Выкажам здагадку, што вы атрымалі новае паведамленне электроннай пошты вашага Gmail рахунак, але адзіны спосаб праз бачыць, што гэта, як, перазагрузіць ўсю старонку. Ці, дапусцім, вы націскаеце на спасылка чытаць электронную пошту. 

[00:23:29] Усё павінна перазагрузіць так што вы можаце паглядзець электронную пошту. Або Facebook-- вы атрымаеце паведамленне чата. Вы не бачыце яго, пакуль вы не перазагрузіце старонка або націсніце некаторы спасылку. 

[00:23:36] Маўляў, гэта было б жахліва раздражняе карыстацкі вопыт. І гэта, як гэта было, ясна, яшчэ калі я балатаваўся на UC і вэб-быў значна менш дынамічным і JavaScript не быў, як папулярызавалі як гэта цяпер. І ўсё робіцца нашмат больш дынамічным і многае іншае на баку кліента, у гэтым сэнсе. 

[00:23:49] Але ёсць адна загваздка тут, і гэта свайго роду раздражняльны Gotcha. Проста таму, што вы дадаеце баку кліента Выяўленне як гэта не азначае, Вы можаце ці павінны адмовіцца Выяўленне на боку сервера. Вы па сутнасці хочаце размясціць Праверка памылак у абодвух месцах. Таму што тое, што было адным урока даведаўся з артыкула я чытаў урыўкі ад гэтай дурной CMS система-- Content Management система-- што было рэалізацыі сваёй сістэмы аўтэнтыфікацыі, яго Увайсці праз які механізм? JavaScript. 

[00:24:20] АЎДЫТОРЫЯ: JavaScript. Дэвід Дж Малання: 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-- Асінхронны JavaScript і XML, дзе X для XML на самай справе больш не сапраўды не выкарыстоўваецца. Гэта, як правіла, выкарыстоўваць што-то яшчэ называюць JSON. 

[00:26:13] Але вось як-то накшталт Google Maps або Google Earth працуе. Давайце паспрабуем гэта на ляту, на самай справе. Дазвольце мне ісці наперад і адкрываць да Chrome на маім браўзэры. 

[00:26:21] І дазвольце мне перайсці ў, кажуць, maps.google.com. І на самай справе, калі ты стары Дастаткова ўспомніць, што, як, MapQuest было падобным таму ў дзень, і, можа быць, яны ўсё яшчэ працуюць, як гэта. Калі вы выкарыстоўвалі для пошуку something-- 33 Oxford Street, Cambridge, Mass, давайце зробім this-- вас фактычна, калі вы хацеў павярнуць камеру уверх і уніз, налева і направа, вы будзе выглядаць Вялікая стрэлка на верхняй, і гэта б паказаць вам яшчэ адзін кадр карце тут. Ці вы б націснуць левую і вам пойдзе сюды, або паўторны пстрычка і вы б сюды. Але замест іх дзён, мы, вядома, проста само сабой якія разумеюцца, што мы можам пайсці вакол Кембрыджа даволі хутка проста пстрыкнуўшы і перацягнуўшы. Але звярніце ўвагу, што ёсць некаторыя глюкі. 

[00:26:59] Калі я зраблю гэта досыць хутка, што, здаецца, адбываецца як я цягнуць занадта хутка для кампутара, каб не адставаць? Што ты бачыш? Так. 

[00:27:07] Аўдыторыя: пікселі ня абнавіць. Дэвід Дж Малання: пікселі ня абнавіць. Там у actually-- і вам мог бачыць гэта, на самой справе, калі вы глядзіце онлайн і паўза гэта ці на самай справе запавольвае для once-- вы ўбачыце, што ёсць плітка, квадраты, або трыкутнікі, не хапае карце да на долю секунды пазней, больш дадзеных, Яшчэ малюнка на самай справе з'яўляюцца на экране. І на самай справе, калі мы робім гэта, гледзячы да Chrome's-- скажам, Chrome-- Паглядзім. Мы не можам гэтага зрабіць. 

[00:27:31] О, воклічы. Давайце адкрываць maps.google.com. Дазвольце мне зрабіць акно больш разоў. 

[00:27:36] Вярнуцца да 33 Оксфард-стрыт. Тое, што было на сайце я быў на нядаўна? У мяне была гэтая, быццам бы, асабістае гучныя словы, каб я што я б тады імгненнае паведамленне любы сябар, які быў на сайце хто хацеў пачуць яго. Там нейкая вэб-сайт. Я думаю, што гэта Comcast-- так вельмі вялікі амерыканскі правайдэр. Вы можаце, пры рэгістрацыі новага кабеля Паслугі мадэм ці тэлебачанне кабельнае, яны маюць форму вельмі разумна дзе яны просяць у вас ваш адрас. І ёсць гэтая дзіўная Функцыя называецца аўтаматычнае запаўненне, як Google, што пачынае запаўняць у адказ на ваша пытанне. 

[00:28:04] Праблема ў тым, што яны робяць аўтаматычнае запаўненне на першых рэчаў, якія вы ўводзіце. Так што, калі вы пачынаеце набіраць у 33, гэта пакажа вам, літаральна ў кожным доме у Амерыцы, які пачынаецца з нумарам 33 Перш чым працягнуць, каб чакаюць, што вы увядзіце больш. Так што калі вы набераце 33 Оксфард, Затым ён паказвае вам кожную вуліцу у Амерыцы, што ёсць 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 з'яўляецца адным, дом Уинтроп, і клічуць Zamyla. 

[00:30:53] Але я магу таксама ёсць масіў аб'ектаў. Так што, калі я на самой справе хацеў, каб масіў у JavaScript, які змяшчае некалькі такіх аб'ектаў, гэта Час, які прадстаўляе штат, Я, магчыма, гэтыя тры кавалкі кода таму каб спіна да спіны для іх тры былыя супрацоўнікі. Так сінтаксіс, даволі аналагічна і таго і іншага, каб 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 каб вызначыць унікальны ідэнтыфікатар што я ўмоўна назваць цану. І ў мяне ёсць кнопку Адправіць. 

[00:33:21] Таму што цяпер да here-- і гэта на самай справе супер дзіўна, як мала код Вы можаце напісаць рабіць адносна акуратны things-- заўважыць, што я зрабіў тут, калі I пракруткі уверх да галавы гэтай старонкі. Я уключыў першае ў мая галава скрыпт тэг што на самой справе спасылаецца Падаць у іншым месцы JavaScript. Гэта ад арганізацыі што піша JQuery, і гэта проста дае вам апошнія версія іх бібліятэкі JQuery. 

[00:33:42] Так што гэта накшталт як востры ўключаюць у C ці патрабуюць у PHP. Вы выкарыстоўваць тэг сцэнара з атрыбутам крыніцы. Але цяпер мая ўласная код будзе прама тут. 

[00:33:52] Звярніце ўвагу, у мяне ёсць функцыя называецца Цытаты. І гэта выглядае трохі загадкавы на першы погляд. Але давайце дражніць гэта адзін ад аднаго. Дайце мне зменную называецца URL ст. Прызначаюць яго ў літаральным сэнсе гэты радок. Так, адзінкавыя двукоссі, двайныя двукоссі ў JavaScript проста дае мне радок. Што плюс рабіць? Счапленне. 

[00:34:08] Так што гэта ў цяперашні час з'яўляецца сінтаксіс JQuery які займае трохі прывыкнуць. Але гэта проста азначае ідзі мне DOM вузлу, чые унікальны ідэнтыфікатар з'яўляецца сімвалам. Хэштэгу там азначае Унікальны сімвал ідэнтыфікатара. 

[00:34:21] Знак даляра ў дужках проста маю на ўвазе, абгарнуць гэта у JQuery свайго роду сакрэтны падліўка так Вы атрымліваеце дадатковую функцыянальнасць. А потым .val відаць Функцыя, або, як мы кажам, зараз, Спосаб ўнутры гэтага вузла што проста дае вам значэнне. Карацей кажучы, непрыгожа і заблытанай як гэта выглядае на першы погляд, гэта проста азначае, атрымаць з карыстальнікам тыпізаваных у, змясціць яго ў канцы радка шляхам аб'яднання яго. Гэта ўсё. 

[00:34:43] Так што цяпер, апошнія тры радкі. Вы можаце выціснуць шмат Функцыянальнасць з трох ліній. Гэта знак даляра, як ў бок, гэта проста мянушка для спецыяльнай глабальнай зменнай называецца літаральна JQuery. 

[00:34:55] Знак даляра выглядае проста выдатна. Так абшчына 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 праходжання ў гэтым Сімвал, як бясплатны або 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 і іншыя мовы можна выкарыстоўваць не толькі ў цяперашні час мутаваць вэб-старонак, але на самой справе пісаць праграмнае забеспячэнне у фактычным кампутары, не абмяжоўваецца толькі хром і да таго падобнае. 

[00:38:00] На самай справе, if-- Колтон, будзе вам хацеў далучыцца да нас зноў тут з вашым кодам лабараторыі, і Чанг, а? Давайце пойдзем далей, пагаварыўшы аб ананімныя функцыі і зваротныя выклікі і сапраўды выпрабоўваць лёс тут з дэма з крывацёкам сучасныя тэхналогіі, адным з гэтыя прылады Elite руху. Цяпер, гэта прылада, нагадаем, гэта невялікае прылада USB а that-- гэта beautiful-- які падключаецца ў свой партоў USB. 

[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] Дэвід Дж Малання: Добра, і ёсць трэцяя. Добра. Колтон: І ў гэтым, вы атрымліваеце to-- Дэвід Дж Малання: О, гэта адзін прыгожа. Колтон: --yeah, выбраць, акрамя гэтай кветкі. Дэвід Дж Малання: ОК. Няма? Прапушчаны. 

[00:40:14] Колтон: О, там вы ідзяце. 

[00:40:15] Дэвід Дж Малання: ах, паглядзіце на што. Вельмі міла. Ну, чаму не "мы бярэм з аднаго добраахвотніка тут хто хацеў бы прыйсці на да. Як наконт тут ў зялёнай зоне, ці не так? 

[00:40:27] Добра, і давайце have-- а не рабіць гэта, некаторыя з вас можа ведаеце гэтую гульню here-- перарэзаць вяроўку, магчыма? Паглядзім. У нас ёсць нашы акуляры тут? 

[00:40:37] Добра. Дзякуй. Як цябе клічуць? 

[00:40:39] АЎДЫТОРЫЯ: Лаура. 

[00:40:40] Дэвід Дж Малання: Лаура? Прыемна бачыць. Калі вы не пярэчыце, паклаўшы Google Glass за сваімі ачкамі. Гэта Колтон. 

[00:40:46] Колтон: Прывітанне. Прыемна пазнаёміцца. 

[00:40:48] Дэвід Дж Малання: ОК, давай вакол. Добра, так што вы збіраецеся зрабіць тут, згуляўшы гэта раней, з'яўляецца кладзіце руку на Leap Motion тут. І цяпер ваша стрэлка павінна рухацца. О, няма. 

[00:40:57] АЎДЫТОРЫЯ: Не. 

[00:40:58] Дэвід Дж Малання: Мы не хачу, каб кінуць яшчэ. Добра, пачакайце. А тут. Так заўважыць, як вы трымаеце ваш палец над чым-тое, мыш пачынае ісці зялёны, які з'яўляецца, як вы выберыце. 

[00:41:06] Так навядзіце курсор мышы на Play. І толькі адзін палец ў парадку. А цяпер націсніце на маленькі зялёны хлопец злева. А цяпер трымаць, пакуль яна не запоўніцца зялёным. Добра. Зараз, быццам бы, узровень адзін наверсе. 

[00:41:16] АЎДЫТОРЫЯ: Так, мы хочам першага ўзроўню, тут. 

[00:41:20] Дэвід Дж Малання: Добра. Такім чынам, усё, што вам зрабіць, перарэзаў вяроўку. Курсор гэта белая там. 

[00:41:28] Вельмі міла. Добра, ён збіраецца атрымаць складаней. Так трымаць палец на наступны цяпер. Добра. Гэта адзін цяжка. 

[00:41:39] АЎДЫТОРЫЯ: Вось дзярмо. Добра. Яна хоча, каб ісці па гэтым шляху. Вось дзярмо, that-- 

[00:41:44] Дэвід Дж Малання: Так. Другасная мэта атрымаць усе зоркі. Добра, наступны. 

[00:41:53] Давайце паглядзім, калі вы можаце атрымаць гэты трэці. Добра. Добра, ідзі туды. 

[00:42:06] Вядома. О, вельмі добра. Добра. 

[00:42:11] Дык чаму б нам не адкласці тут сёння? Няхай хто-небудзь прыйшоў на да, хто хоча гуляць. Вялікі дзякуй Лоры наш валанцёр. І мы будзем бачыць вас у панядзелак. 

[00:42:18] АЎДЫТОРЫЯ: Вы, напэўна, хочаце іх назад. 

[00:42:21] СПІКЕР 2: На наступным CS50--