>> [Гуляе музыка]
>> Дэвід малая: Гэта CS50.
Гэта пачатак тыдня дзевяць.
І гэта тое, што будзе мець быў 200-годдзя г Буля.
Так што гэта хлопцы каму мы згадвалі
даволі некалькі разоў аб выкарыстанні Лагічныя зменныя сапраўдныя і ілжывыя,
1 і 0 і да таго падобнае.
І гэта было Google, даніну з ім сёння.
Ён ператварыўся б 200.
Так што, калі вы хочаце, каб далучыцца да нас на абед CS50,
зірнуць на спасылку на вэб-сайце курсу.
І такія асобы, як і сябры гэта чакае вас тут, у Кембрыджы.
Асобы, як яны чакаюць Вас у Нью-Хейвене.
І на самай справе, Кен Нью-Хейвен ласкава
тое, што называецца Аніміраваныя GIF Илая тут нядаўна lunch-- GIF яшчэ
іншы графічны фармат файла, з якой вы familiar--, што
выглядае трохі нешта падобнае.
Так проста паслядоўнасць of-- ОК.
Тут ніхто ў Кембрыджы не смяецца.
Але ў Нью-Хейвене, гэта гэта сапраўды смешна, ці не так?
Добра.
>> Так што далучайцеся да нас там.
Тут, у Гарвардзе, У прыватнасці, гэта асяроддзе,
калі вы студэнт-другакурснік або першакурснік even-- ці нават junior-- мысленне рашэнняў
перамыкач у кампутар навука, ведаць, што там будзе
Будзьце CS кансультаванне справядліва гэта Серада, неўзабаве пасля класа
у 4:00 вечара ў кампутары навука будынак Максвел Дворкін.
Мы паставіць гэта на курс-х сайт заўтра, як добра.
Пончыкі, я сказаў, будзе пададзены.
>> Добра.
Так смешна story-- я тыкаць вакол у Інтэрнэце,
і я знайшоў некаторыя старыя архівы майго былога сайта.
І атрымліваецца out-- вакол гэтага Час, здаецца, вельмі своечасова
так я разумею, што выбары UC каля рыхтавацца зноў.
Так што я пабег за UC, страціў няшчасна.
І, можа быць, гэта было ў частцы, чаму.
Так што гэта быў мой вэб-сайт у той час.
Па нейкай прычыне, я думаў, што гэта было добрая ідэя, перш, чым казаць людзям,
што мая платформа была, і чаму яны павінны галасаваць за мяне, што ў іх ёсць
націснуць, каб увайсці, каб знайсці, што інфармацыя, якая ў рэтраспектыве гэта
выгляд жудасны.
Я сапраўды не ведаю, што гэта было.
>> Але гэта, вядома, не дапамагчы маёй кампаніі.
Я таксама знайшоў, што старэйшы год-- мяне была гэтая каляндар Маппет.
Маппет-шоў былі збольшага ў модзе ў той час.
Ці, можа быць, яны не былі.
Я быў каляндар Маппет тады.
І я думаў, што гэта было б выдатна, каб імя мой кампутар у сеткі Гарварда
frogman.student.harvard.edu.
У той час, мы ўсё адназначна ідэнтыфікуюцца імёны хастоў.
А вы маглі б выбраць некалькі ганарыстасць імя замест свайго імя.
І я пайшоў з плыўца па некаторых прычынах.
>> І тады я started-- я правёў шмат часу націску праз гэтыя спасылкі
сёння раніцай.
І гэта была мая старонка о, які ў цяперашні час выгляд здаецца чароўныя.
Але гэта таксама сведчыць аб тым, каб проста як далёка тэхналогія прыйшла.
Я маю на ўвазе, таму ў дзень, 486 было нешта.
У гэтыя дні, гэта супер, супер, супер павольна і добра менш
чым вы маглі б мець у сваім ўласныя кішэні ў гэтыя дні.
Там больш там, што быў яшчэ больш няёмка.
Таму я пакідаю яго на што.
Але гэта быў мой першы набег ў web-- аб, няма.
Гэта не было.
Мой першы рэальны набег ў вэб-праграмаванні быў гэты сайт, які я проста забыўся.
У нейкі момант, я даведаўся, як зрабіць паўтараюцца фонавыя малюнкі.
І так я знайшоў гэта чарапіца эфектыўна, як хакеіста, футбол, гольф і
шар, або што б гэта ні для сайта Фрош IMS.
І гэта было на самай справе, сапраўды першы вэб-праект на аснове я ўзяў on--
Я думаю, што, можа быць, студэнт-другакурснік год, малодшы год--
пасля таго, CS50 і CS51, адзін з агульных наступных па класах.
Я заўважыў, гледзячы ў у архівах
што адзін з маіх пераемнікаў і сябры, Лі, накшталт змянілася
аўтарскае права да сябе.
Але гэта было сапраўды тое, што Я павінен валодаць замяшанне.
Але ў той час, гэта быў першы сайт,
як я сказаў некалькі тыдняў таму, з дапамогай якога мог першакурснік
зарэгістравацца вочнай спорту тут.
І так атрымліваецца, што фонавыя малюнкі
так не такая добрая ідэя.
Але палатно было новым, і усё, што мы эксперыментавалі.
І гэта тое, што я па-відаць, зрабіў у той час.
Добра.
Так што без далейшых цырымоній, мы перамыкае Шасцярні сёння, каб даць вам, на самай справе,
заключная частка, што вы маглі б знайсці асабліва карысна для канчатковых праектаў
але таксама, што пачне зрабіць ўвесь свет павуціну
адчуваю сябе крыху больш зразумелым.
На самай справе, мы збіраемся прадставіць яшчэ адна мова праграмавання
называецца JavaScript, што падобна і адрозніваецца па-рознаму
ад мовах мы глядзелі на да гэтага часу.
>> Так C, нагадаем, гэта кампіляваная мову.
Вы павінны запусціць яго праз кампілятар.
Вы зыходны код аб'екта Код, або нулёў і адзінак.
І тыя і нулі тыя, якія ваш працэсар, Цэнтральны працэсар,
на самай справе зразумець.
PHP, наадварот, не кампіляваная мову.
Гэта што?
Гэта інтэрпрэтаваная мова.
Так што нейкая праграма называецца інтэрпрэтатар, які
павінен прачытаць it-- зверху знізу, злева right--
і высветліць, што ўсе ваш сінтаксіс робіць і азначае,
ці з'яўляецца гэта пятля ці стан або любое іншае лік праграмавання
будуе.
Дык вось гэта інтэрпрэтаваная мова.
>> Тады мы ўвялі HTML.
І HTML нават не мова праграмавання.
Мы б назвалі гэта што?
Мова разметкі, які знаходзіцца ўсяго свайго роду мудрагелісты спосаб сказаць гэта
ня праграмныя канструкцыі, такія як мы бачылі, нават назад у дзень нуля.
Там няма завес.
Там няма умоў.
Гэта сапраўды мову аб разметцы дадзеных
і фарматавання або структуравання яго ў некаторым родзе.
>> ВУС, тым часам, аналагічна не з'яўляецца мовай праграмавання.
Гэта нават больш эстэтычна арыентаванай.
І гэта дазваляе сартаваць тонкай налады такія рэчы, як памер шрыфта і колеру
і размяшчэнне, і ўсё, што.
Тады мы мелі
>> SQL.
Так SQL сапраўды праграмавання мову ў пэўным сэнсе,
хоць з улікам спецыяльна для баз дадзеных.
Але нават калі мы толькі пазнаёміць вас з выбраць і ўставіць і выдаліць і абнавіць
і некалькі іншых, Аказваецца, можна на самой справе
напісаць функцыі або працэдуры, так як яны
называецца, у SQL, якія выглядаюць і дзейнічаюць зусім як функцыі PHP і C.
Так ведаеце, што існуе.
Але мы нават не важдацца з імі як мы толькі што падрапаць паверхню тут.
І тады JavaScript, апошні з нашы мовы афіцыйна прадставіла.
Так JavaScript, таксама інтэрпрэтаваная мова.
І тых, хто знаёмы, зрабіць Вы хочаце, каб адрозніць яго
з некаторымі характарыстыка і ад C і PHP?
Чым яна адрозніваецца?
>> АЎДЫТОРЫЯ: Гэта не складзены.
>> Дэвід малая: раз сказаць?
>> АЎДЫТОРЫЯ: Гэта не складзены.
>> Дэвід малая: Гэта не складзены.
Так што, таксама інтэрпрэтуецца.
Так што гэта не складзены.
Але што робіць яго трохі як PHP.
Але ён па-ранейшаму адрозніваецца ад PHP ў некаторым дзіўным чынам
па меншай меры, у тым, як мы будзем яго выкарыстоўваць.
Да?
>> АЎДЫТОРЫЯ: Гэта працуе на баку кліента.
>> Дэвід малая: Яна працуе на баку кліента, звычайна.
Гэта сапраўды адметная характэрна для нас прама цяпер.
З была на баку сервера ў тым сэнсе, што мы зрабілі ўсё, што ў CS50 IDE.
PHP гэтага часу было серверны паколькі
як гэта, таксама, атрымлівае interpreted-- ня складзены, але interpreted--
ўнутры CS50 IDE, што, вядома, проста сервер або серверы ў воблаку.
>> Але ў JavaScript, нават хоць вам вы збіраецеся
каб пачаць пісаць яго, скажам, PSET восем і, магчыма, канчатковае projects-- вы
збіраецца дакладна гэта ў CS50 IDE і захаваць яго
файлаў, якія знаходзяцца CS50 IDE, IDE CS50 і, у сваю чаргу, воблака сервераў
на якім ён размяшчаецца, не збіраецца інтэрпрэтаваць або выконваць код.
Хутчэй за ўсё, гэта будзе адпраўлена ў нязменным выглядзе да браўзэры.
І гэта тое будзе І.Я. або Chrome або Firefox або Safari
або што-то на самай справе інтэрпрэтуе, што гэта зверху ўніз, злева направа.
Так Асноўнымі адметнымі характэрна для сённяшняга дня
з'яўляецца тое, што JavaScript з'яўляецца баку кліента і PHP, напрыклад,
Быў на боку сервера.
Цяпер, гэта мае цікавыя наступствы для, як, інтэлектуальнай уласнасці
і хто можаце ўбачыць код.
І на самай справе, вы можаце пайсці у Інтэрнэце і паглядзець, найбольш
любы код, які хтосьці напісана ў JavaScript.
Часам гэта чытаецца, часам гэта прыцемненыя.
Але пра гэта ў свой час.
>> Так JavaScript, досыць прыгожа, гэта супер падобна, сінтаксічна, каб С.
І гэтак жа, як PHP, няма Асноўная функцыя.
Калі вы хочаце, каб пачаць пісаць Код JavaScript, як вы ўбачыце сёння,
Вы проста пачаць пісаць.
Але гэта, вы ўбачыце, у прыватнасці, карысна ў кантэксце вэб-браўзэраў.
Тым не менш, мой маленькі disclaimer-- звычайна earlier--
было сказаць, што вы можаце больш сёння выкарыстанне JavaScript на боку сервера
з дапамогай фантазіі рамкі пад назвай Node.js што некаторыя з уласных прыкладанняў CS50 ў
напісаны на.
Праверце 50 фактычна выкарыстоўвае Node.js.
Але мы збіраемся засяродзіцца на JavaScript на баку кліента тут на.
>> Дык вось набор умоў у PHP.
На жаль, на самай справе in--, што Заяву, таксама правільна.
Тут жа набор ўмовы ў JavaScript.
Сінтаксічна гэта ідэнтычная З і PHP.
Выразы г Буля з'яўляюцца, Аналагічна, сінтаксічна
ідэнтычныя як C і PHP.
У нас таксама ёсць перамыкачы ў JavaScript, што выглядаюць ідэнтычна.
У нас ёсць для завес, якія структураваныя аднолькава,
у той час як завесы, рабіць, пакуль завесы.
>> Гэты трохі адрозніваецца.
PHP меў для кожнай канструкцыі што вы маглі б выкарыстоўваць
ці будуць выкарыстоўваць у PSET сем, можа быць.
JavaScript мае гэтую адмысловую версію для таго, дзе вы ў літаральным сэнсе нешта сказаць
як для зменнай ключ у аб'ект, які вельмі кароткім спосабам сказаць,
калі я атрымаў object-- і мы казаць пра іх яшчэ раз у moment--
і я хачу, каб перабраць усе з пар ключ-значэнне ўнутры,
Я не павінны высветліць, як колькасна індэксаваць іх з нуля, адной,
два, тры.
>> Я магу сказаць, што гэта ў літаральным сэнсе.
І на кожнай ітэрацыі, JavaScript для мяне будзе абнаўляць ключ зменнай
каб быць першым ключом, то ў наступным ключ, то наступны ключ, то наступны ключ,
і гэтак далей.
І я магу атрымаць на яго кошту апрацоўкай аб'ект у JavaScript, як мы ўбачым,
як быццам што гэта Асацыятыўны масіў у PHP.
На самай справе, калі вы, нарэшце, загорнуты ваш супраць таго, што вакол асацыятыўны масіў
у PHP, вы можаце думаць пра яго, як цяпер ідэнтычныя аб'екта ў JavaScript.
Але гэта крыху спрашчэнне.
>> Масівы глядзіце, досыць прыгожа, ідэнтычныя у PHP для аднаго знака, за выключэннем.
Там адна рэч, хапае тут што мы бачылі на мінулым тыдні з PHP.
Што апушчаны?
Да?
Няма знак даляра.
Так мы вярнуліся да больш нармальным свет, дзе
зменныя не маюць знакі даляра.
Але вы прэфікс іх з Вар, звычайна.
І вар азначае зменную.
І гэтак жа, як PHP з'яўляецца свабодна typed-- якой ёсць віды,
Ёсць колькасці і радкі і плавае і так forth--
JavaScript аналагічна мае віды.
Але гэта слаба тыпізаванай, што мы, праграмістам ня трэба паказваць іх.
Мы проста павінны быць у курсе што існуюць розныя тыпы.
>> Зменныя, meanwhile-- вось як мы маглі б аб'явіць "прывітанне, свет"
у выглядзе радка.
Звярніце ўвагу, што гэта супадае з PHP, але не знак даляра.
І гэта тое, што мы пачаць бачыць больш сёння,
у выніку чаго ў вас ёсць аб'ект з ключамі і значэннямі.
І калі вы хочаце, каб паспрабаваць вывесці з апошняга week--
сінтаксіс трохі адрозніваецца.
Але трохі разважнасці check-- колькі ключы гэта аб'ект, здаецца, ёсць?
Так я бачу чатыры.
Я бачу два.
>> Так гэта на самай справе два.
Так што гэта калекцыя з двух пар ключ-значэнне.
Ключ сімвал, значэнне якога FB.
Ключ цана, значэнне якога 101.53.
Так што тыя дзве пары ключ-значэнне.
І памятайце, PHP-- і гэта зноў толькі выгляд сінтаксічнай розніцы.
Гэта не ўсё, што інтэлектуальна цікавым.
PHP мог бы напісаць гэта ж рэч, як follows-- цытатай, роўная.
І я змяніць іх на квадратныя дужкі.
І тады я магу змяніць гэта у двукоссі слова, "цана."
І тады я не выкарыстоўваць двукроп'е.
Што я выкарыстоўваю на мінулым тыдні?
Так, знак роўнасці стрэлка фанкі абазначэння.
>> І тады я зрабіў тое ж самае тут.
Тое ж самае тут.
І гэта ўсё.
Так што гэта нармальна, калі гэта не мае сапраўды затануў у памяці толькі
яшчэ і таму, што гэта сапраўды інтэлектуальна нецікавым.
Гэта проста сінтаксічныя адрозненні.
Але ідэі дакладна тое ж самае.
Унутры гэтай зменнай цытата JavaScript
гэта калекцыя пар ключ-значэнне, адзін з якіх з'яўляецца сімвалам, адна з якіх
з'яўляецца кошт.
І я магу атрымаць пры тых значэннях з наступным сінтаксісам.
Гэтак жа, як у PHP, я мог зрабіць нешта like-- хай
мне зрабіць гэта акно крыху больш.
Гэтак жа, як у PHP, я мог зрабіць this-- аб, чорт вазьмі.
Давай.
>> Гэтак жа, як у PHP-- Добра, мы проста выкарыстоўваць Дарыльшчык нататкі.
Гэтак жа, як у PHP, я магу зрабіць $ цытата $ цытата ["сімвал"],
і гэта дапаможа мне значэнне "сімвал".
У JavaScript, гэта будзе ідэнтычныя, у выніку чаго я магу проста зрабіць гэта.
Адзінае, што гэта хапае знак даляра.
>> Так дастаткова добра, тое, што ёсць не ўсё, што шмат новага сінтаксісу.
Так што сёння мы арыентуемся на, сапраўды, некаторыя з ідэй і прыкладанняў.
І першы такі дадатак, якое вы маглі б
бачылі, калі вы нырнулі ў PSET сем ўжо гэты сінтаксіс.
Такім чынам, у PSET сем, калі ў Вас ёсць бачыў ці не бачыў яшчэ,
ведаю, што ёсць файл, які мы даем Вы назвалі config.json-- JavaScript
Object Notation.
Чаму?
Мы хацелі, каб быць у стане даць Вам з шаблон з некаторых пар ключ-значэнне.
Мы хацелі, каб быць у стане даць вам спіс хаста, назва сервера.
Мы хацелі, каб даць вам Месца для вашага імя карыстальніка
і запаўняльнік для вашага пароля.
Калі вы не бачыце гэта яшчэ няма пра што турбавацца.
Больш падрабязна пра гэта ў PSET сем [? спекуляцыя ?], А затым,
Відавочна, мы хочам вас запоўніць у-DOS
таму што, калі вы ўваходзіце ў CS50 IDE, кожны з вас
мець свой уласны лагін і пароль.
>> Такім чынам, мы маглі б выкарыстоўваць паўтара дзясятка або больш розных фарматаў файлаў.
Мы маглі б выкарыстоўваць файл .txt.
Мы маглі б выкарыстоўваць файл CSV з.
Мы маглі б выкарыстоўваецца INI-файл, XML-файл,
цэлая куча больш Скарачэнні, што Вы не маглі б калі-небудзь чуў.
Гэта свайго роду адвольнае ў канцы дня.
Але супер папулярныя ў гэтыя дні з'яўляецца тэкст фармат, званы JSON-- JavaScript Object
Notation--, што выглядае як гэта.
Гэта крыху загадкавым, але звернеце ўвагу, шаблоны.
Вы пачынаеце з адкрытым кучаравых дужка, і вы ў канчатковым з тым жа.
Унутры нешта, што.
Гэта пару ключ-значэнне.
Так што гэта аб'ект, які я гледзячы на ​​на экране тут
які мае адзін ключ, які мае адно значэнне.
І толькі вывядзенне на аснове папярэдняя мадэль, што ключавым тут?
База дадзеных, рэч, каб левы тоўстай кішкі.
>> Цяпер, значэнне бывае а некалькі радкоў на гэты раз.
Але значэнне пачынаецца з кучаравымі рыхтавацца і заканчваецца з фігурнай дужкі.
Так што вы маглі б прапанаваць гэта Тып значэння базы дадзеных?
Слоўнік ці проста больш лаканічна, аб'ект.
Дакладна?
Гэта свайго роду структуры дадзеных, можна выкарыстоўваць і іншыя структуры ў сабе.
Так што, калі ўсё гэта справа мы Выклік object-- і аб'ект
гэта ўсяго толькі купка ключ-значэнне pairs-- значэнне самай базы дадзеных з'яўляецца аб'ектам.
Значэнне базы дадзеных мае цэлы букет з пар ключ-значэнне, першы з якіх
гэта гаспадар, то назваць, то імя карыстальніка, пароль, то,
кожны з якіх значэння, між тым, гэта проста сумна радок у падвойных двукоссях.
>> Такім чынам, нават калі гэта не супер ясна толькі пакуль,
ведаю, што гэта ўсяго толькі стандарт, даволі сумна спосаб
захоўвання дадзеных у стандартным фармаце.
Але агульныя памылкі, якія вы можа зрабіць, нават у PSET сем,
маленькія дурныя рэчы, як, калі вас выпадкова апусціць коску там.
Гэта збіраецца прывесці ў файле не абавязкова быць чытаным.
Калі вы выпадкова апусціць рэчы, як каціроўкі, ён не збіраецца быць чытаным.
Так што гэта даволі nitpicky фармат, але гэта той, які вельмі часта.
І мы вырашылі выкарыстоўваць яго, хоць Вы не выкарыстоўваць любы JavaScript у адваротным выпадку,
у PSET сем.
>> Добра.
Так што памятаеце гэтую карціну.
Мы гаварылі, у HTML, што код можа выглядаць наступным чынам.
Гэта мова разметкі гіпертэксту [Неразборліва] для ўсяго "Hello, World".
Але тады мы прапанавалі Некаторы час таму, што, калі гэта дапаможа,
Вы маглі б пачаць думаць пра гэта ўжо ў выглядзе дрэва.
На самай справе, паглыбленне што мы выкарыстоўваць толькі дзеля чытальнасці ў
ці дзеля стылю ў на левая можаце выгляд
быць пераведзены ў гэтым дрэве, дзе вы ёсць спецыяльны каранёвай вузел, які мы
звычайна называюць дакумент, ніжэй якога корань HTML-элемент або тэг, HTML,
які затым два дзеці, галава і цела.
>> А потым, у сваю чаргу, кіраўнік мае назву.
І назва мае тэкставае значэнне.
І цела падобна мае тэкставае значэнне.
Так што, калі вы адчуваеце сябе камфортна прымаўка што так, вы маглі б узяць гэтую HTML
і намаляваць карціну, як гэта, правы бок
добры ментальная мадэль, таму што цяпер што ў нас ёсць JavaScript, праграмаванне
мова, які браўзэры выконваць і інтэрпрэтаваць для вас,
Аказваецца, што тое, што мы збіраемся зрабіць у кодзе
гэта пачаць маніпуляваць гэта Структура дрэва ў памяці.
Мы не павінны будаваць дрэва ў памяці.
Мы не павінны рабіць выгляд Структура дадзеных PSET пяць-стыль
Складанасць.
Браўзэр, досыць прыгожа, на інтэрпрэтацыі HTML зверху ўніз,
налева або направа, літаральна збіраецца перадаць нам эквівалента паказальнік
да гэтага ўсім дрэве бясплатна.
Гэта робіць усю цяжкую працу.
Гэта тое, што Mozilla і Apple, і іншыя зрабілі для нас.
>> І з JavaScript мы будзем быць у стане кантраляваць і змяняць і рабіць
цікавыя рэчы што дрэва, інакш вядомы
як DOM або аб'ектнай мадэлі дакументаў.
Якія рэчы?
Ну, атрымліваецца, што у JavaScript, ёсць
гэты спіс мыццё падзеі, якія могуць мець месца.
І мы сапраўды не выкарыстоўвалі, што Слова з тыдня нуля і PSET
нуля, калі мы казалі аб пустым.
Большасць з вас, верагодна, не выкарыстоўваць падзея ў вашай драпін праекта.
Але вы, магчыма, памятаеце просты Марка Пола
Напрыклад, калі ў нас было два спрайты, адзін з якіх сказаў, Марка.
Іншы з якіх затым, пры праслухоўванне і чуць, што падзея, сказаў, Пола.
Калі няма, не саромейцеся азірнуцца назад, што далёка назад.
>> Але гэта проста кажуць, і вы можаце выгляд
вывесці з назваў гэтых рэчы, JavaScript, аказваецца,
збіраецца даць нам магчымасць слухаць для мышы спускаючыся або мышы падышоўшы
або ключ спускаючыся або клавішу уверх ці onsubmit onselect
ці нешта onresizing.
Іншымі словамі, любая фізічная дзеянне што чалавек можа ўзяць з браўзэрам
што вы робіце кожны дзень, вы можаце напісаць Код для які слухае тых падзей
а затым робіць нешта падыходнае.
>> Напрыклад, калі вы выкарыстоўваеце Google Maps, што адбудзецца, калі пстрыкнуць і перамясціць
мыш, як правіла ,?
Калі вы пстрыкніце і перацягнуць?
Да?
Дакладна.
Карта пачынае рухацца.
Такім чынам, вы можаце сартаваць, бачаць тое, што тут, што там.
І як Google рэалізаваць гэта?
Ну, па-відаць, яны выкарыстоўваючы пару гэтых падзеі
слухачы, адзін, што кажа, слухайце на мышы
down-- таму, калі карыстальнік фізічна штурхае яго трекпад або яго ці яе мышкай
ўніз
І тады мы шукаем нешта накшталт руху
ці якой-небудзь іншы выпадак, які дазваляе захапіць супраціву.
І на самай справе, гэта так жа перацягнуць у гэтым кропка кропка кропка спіс магчымых варыянтаў.
>> Такім чынам, гэта будзе магутным спосаб пачаць адказваць карыстачу
нават раней, чым ён або яна на самай справе клікаў то відавочнае, як прадставіць.
Але мы збіраемся прадставіць пара тэмы патрапіць.
Але спачатку, давайце пераход у нейкі рэальны код.
Так што я збіраюся пайсці наперад і адкрыць дом-0,
які з'яўляецца вельмі просты прыклад тут, што калі я проста павялічыць
мае гэты ўваход тут для мяне.
І я збіраюся ісці наперад і ўвесці ў "Давід" на маё імя і націсніце кнопку Адправіць.
>> А потым, хоць накшталт танна, я ёсць гэта запрашэнне, якое з'яўляецца, што кажа,
"прывітанне, Дэвід!"
Так што гэта свайго роду як наш "прывітанне, свет"
што мы зрабілі некаторы час таму ў C і нават у PHP, таму што я дынамічна
выводзіцца маё імя.
Я магу зрабіць імя кагосьці іншага тут.
Я мог бы проста змяніць гэта, як Ханна, націсніце кнопку Адправіць.
І на самай справе, маленькія усплывальныя змены.
>> Цяпер, усплывальныя вокны з'яўляюцца адным з самым распаўсюджаным асаблівасці ў Інтэрнэце.
І на самай справе, яшчэ ў у дзень усплывальныя блокаторы
ўвайшлі ў моду, таму што вы будзе ісці ў нейкі website--
магчыма, пад пытаннем place-- што б потым раптам
пачаць закідваць экран з цэлай кучай усплываючых вокнаў.
І так гэтая здольнасць выскокваць Вокны ў перад карыстачом
ня была асабліва добра прыняты чалавецтвам.
Дык вось чаму вы бачыце гэта прадухіліць самае,
які толькі робіць усё гэта справа непрыгожа.
Такім чынам, мы збіраемся, каб мець патрэбу ў лепшы спосаб, каб заахвоціць карыстальніка.
Але цяпер, што, здаецца, працуе.
Так што проста інтуітыўна, што Здаецца, што тут адбываецца?
Я іду наперад і націсніце кнопку Адправіць, а то нешта адбываецца, ясна.
Але тое, што не адбываецца, што здарылася На мінулым тыдні ў любы час я націснуў прадставіць?
Што не адбылося на экране?
На жаль?
Абнавіць.
URL-адрас не зменіцца.
Я сказаў, што гэта быў дом-0, і я ўсё яшчэ ў Доме-0.
Як правіла, мы атрымаць змянілася ў іншы Спасылка, як register.php ці таму падобнае.
>> Але нават калі я звольніць гэтая рэч, націснуўшы кнопку ОК,
Звярніце ўвагу, што URL застаецца цалкам на месцы.
І, на самай справе, калі я крыху скептычна, дазвольце мне адкрыць Chrome.
Дазвольце мне адкрыць ўкладку Сетка.
І заўважце, гэта пусты на дадзены момант.
Дазвольце мне ісці наперад і паўторна Марыю.
Там няма сеткавага трафіку наогул.
Дык не HTTP.
>> Так на самой справе, калі я гляджу на зыходным кодзе для this-- дазвольце мне зачыніць гэта акно
і перайсці да Праглядзець Source.
Цікава.
Падобна на тое, ёсць некаторыя Новыя пазнакі, сярод іх сцэнар.
Такім чынам, давайце зірнем на працягу CS50 IDE менавіта тое, што я паслаў да карыстальніку.
>> Дык вось давайце is-- засяродзіцца на толькі HTML.
Вось у ніжняй палове Дом-0.html.
І заўважце, што ён атрымаў назву, галава тэг, тэг цела, форма тэга.
Але тое, што выскоквае вам як розныя, асабліва калі вы ніколі не
напісана любы JavaScript самастойна.
Дазвольце мне трохі пракруціць каб прама тут.
Я атрымаў ўваход, іншы уваход для ўявіць.
Я атрымаў ідэнтыфікатар, які з'яўляецца свайго роду новы.
Але мы бачым гэта CSS.
Што яшчэ, безумоўна, новы?
Да?
Ніца.
>> Добра.
Так, дзе ён кажа onsubmit, заўважыць, што, здаецца, варта.
Гэта з'яўляецца атрыбутам у HTML наменклатуры.
Яго значэнне гэта радок у двукоссі тут.
І гэта выглядае трохі дзіўна на першы погляд.
Гэта не HTML.
Гэта не CSS.
Гэта, як вы ўжо маглі здагадацца, JavaScript.
Так што, падобна, што ўбудаваны ў гэты Вэб-старонка з'яўляецца функцыяй называецца Вітаю.
І я проста вывядзенне што таму што гэтае слова, вітаю.
Ён атрымаў адкрытую Хлопец, Зачыніць Хлопец, кропка з коскі.
Падобна на тое, функцыі C, выглядае як функцыі PHP.
>> І на самай справе, ён збіраецца функцыя JavaScript.
Затым я вяртаюся ілжывым.
Мы вернемся да што у хвіліну.
Але дзе гэтая функцыя вызначана?
Ну дазвольце мне прагортку уверх у верхняй частцы файла.
І хоць гэта доўгая лінія, гэта адносна простая.
Дазвольце мне маштабу тут і засяродзіць увагу на гэтых чатырох ліній.
>> Такім чынам, у JavaScript, проста як PHP, вы проста
скажам, у літаральным сэнсе, слова "функцыя", імя функцыі,
а затым дужкі з любым ня arguments-- ніякіх аргументаў ў гэтым выпадку.
І няма вяртання тып у JavaScript, гэтак жа, як PHP.
Так што гэта трохі слабей, чым С. Адкрыць фігурная дужка, недалёка фігурная дужка.
Убудаваны ў JavaScript з'яўляецца function-- не рэкамендуецца function--
а функцыя называецца абвесткі чыя адзіная мэта ў жыцці
гэта падцягнуць, што даволі выродлівыя падкажыце што мы бачылі хвіліну таму.
>> Зараз гэта свайго роду глытком.
Што тут адбываецца?
Такім чынам, давайце пачнем з вылучыць ўсе тут.
Гэта той жа самы аргумент, каб папярэдзіць.
І што адбываецца?
Гэта выглядае проста як радок.
І аказваецца, у адрозненне ад PHP і ў адрозненне ад З, не мае значэння, у JavaScript
калі вы адзінарныя двукоссі або падвойныя двукоссі.
Яны будуць эквівалентныя.
І, шчыра кажучы, гэта проста папулярныя ў гэтыя дні
для праграмістаў JavaScript, каб заўсёды выкарыстоўваць адзінарныя двукоссі для нейкай прычыне.
Гэта толькі тое, што рабіць.
Але мы маглі б выкарыстоўваць двайныя двукоссі, а таксама.
>> Так плюс новы персанаж.
Але тыя з вас, якія зрабілі гэта раней, што робіць плюс на ўвазе?
Так.
Аб'яднаць.
Такім чынам, мы бачылі гэта ў PHP.
Там проста кропка аператар у PHP, што
будзе аб'ядноўваць два радкі разам.
З боль у шыі, каб зрабіць гэта.
Нагадаем, з PSET шэсць, які быў асаблівая боль у шыі,
Вы павінны былі б выкарыстоўваць нешта накшталт strcat
пасля вылучэння памяці у стэку або ў кучы.
Вы павінны былі скакаць праз абручы проста злучыць два радкі.
У JavaScript, гэта супер проста.
Проста выкарыстоўвайце аператар плюс паміж імі.
>> Такім чынам, комплекс выгляду што, здаецца, гэта
таму што ў канцы Уся гэтая радок, я проста
аб'яднаць на клічнікам.
Так што, калі тое, што было выскокваць быў "прывітанне, Дэвід," "прывітанне, Ханна,"
"прывітанне, Марыя", і гэтак далей, ясна што сярэдні рэч паміж двума
плюсы павінны даць мне доступ да чаго?
Што там напэўна?
Так.
Так што я буду рабіць выгляд, тут адказаць на іх імя, ці не так?
Такім чынам, іх імя выскачыла ў фінале Вынік. Такім чынам, што ж гэта значыць?
Ну, я прапанаваў раней у тым, што карціна, так званы DOM
мае гэты спецыяльны каранёвай элемент спосаб наверсе называецца дакумент.
А цяпер, аказваецца, што адбываецца як адмысловы глабальнай зменнай
у JavaScript, убудаваны ў якой з'яўляецца цэлая куча карысных функцый.
Сярод карысная функцыянальнасць з'яўляецца Магчымасць атрымаць у любы нашчадак вузла.
Гэтыя квадраты або прастакутнікі або эліпсы толькі вузлы ў дрэве, так бы мовіць.
>> Так што атрымліваецца, што ўбудаваны ў Дакумент аб'ект у JavaScript
з'яўляецца функцыяй, інакш вядомы як Метад, які называецца getElementById.
Сінтаксіс для выкліку функцыя ў JavaScript
што знаходзіцца ўнутры аб'екта або пераменная толькі з кропкавай натацыі.
І мы бачылі гэта ў C тое, што сінтаксіс структурай.
Вы бачыце гэта ў PSET сем, накшталт, накшталт, калі вы бачыце CS50 :: запыт.
Двукроп'е двукроп'е у PHP гэта яшчэ адзін спосаб выкліку функцыі, што гэта
ўнутры якога-небудзь аб'екта.
>> Але цяпер у JavaScript, гэта проста кропка.
І таму гэтая функцыя, досыць прыгожа, выгляд
кажа, што гэта does-- атрымаць элемент па ідэнтыфікатару.
Элемент гэта проста іншая назва для тэга або вузла ў DOM.
І таму атрымаць элемент, ID "імя" азначае this-- вось мой HTML.
І на аснове гэтага HTML, тое, што вузел або што HTML-тэгі гэта я
збіраецца праграмна быць перададзены па тэлефоне document.getElementById?
>> Так, менавіта так.
Я іду, каб атрымаць ўваход элемент існуе, чый ідэнтыфікатар "імя."
Так у прыватнасці, вы можаце думаю, гэтай функцыі,
getElementById, як спосаб даць рэзервовае паказальнік на гэты канкрэтны вузел
у дрэве.
Мы не цягне гэта дрэва, але гэта спосаб
атрымання доступу да, што прастакутнік або прастакутнік, што
па унікальнай ідэнтыфікацыі яго з дапамогай сваёй ID.
>> Цяпер, чаму гэта карысна?
Ну, гэта аказваецца што як толькі вы атрымалі
што вузел, што прастакутнік з карціна, што вузел ўнутры яго,
у сваю чаргу, мае цэлы букет пары properties-- ключ-значэнне
або дадзеныя, адна з якіх называецца значэнне.
Так літаральна, гэта дабро з рот, каб растлумачыць усё гэта.
Але ў канцы дня, усё гэта робіць, гэта даць вам
радок, што карыстальнік увёў у у гэтым іерархічным парадку.
Але я не люблю пара з гэтых рэчаў.
Ці, хутчэй, ёсць некаторыя цікаўнасць яшчэ.
Усё, што здавалася, на працу.
Чаму вы думаеце, я вярнуўся ілжыва пасля выкліку вітаць?
Гэта выглядае трохі непрыгожа, што У мяне ёсць дзве заявы
падзеленых кропкай з коскі.
Вазьміце здагадку.
Калі я выдаліў вярнуцца ілжывым, тое, што можа адбыцца, толькі інстынктыўна?
На жаль, яшчэ раз кажу?
>> Адкрыйце кучу Windows.
Так, можа быць, нешта патэнцыйна як гэта будзе адбывацца.
Што яшчэ?
Можа падаць заяўку дзе?
Для той жа старонцы.
Так, на самай справе, гэта, што бліжэй адказаць тут,
хоць у адрозненне ад у мінулым, я не
паказана атрыбут дзеянні, якія, як правіла, мы павінны зрабіць.
Аказваецца ёсць па змаўчанні. Калі вы не пакажаце дзеянні,
гэта, як кажуць цытату, канец цытаты або назва самога файла,
які ў гэтым выпадку будзе быць як Дом-0.html.
Гэта проста нейкая выснова, ці, хутчэй, маецца на ўвазе.
>> І таму, калі я не раблю гэта, давайце заўважаць.
Дазвольце мне захаваць гэта.
І я выдаліў вяртанне ілжывае.
Дазвольце мне вярнуцца да гэтага прыкладам і сілай перазагрузіць яго.
І вы маглі бачыць мне прапанаваць гэта на CS50 Абмеркаваць кучу раз.
Калі што-небудзь калі-небудзь дзейнічаючы ў стылі фанк і браўзэру не вядзе, як вы чакаеце,
часта вы хочаце правесці Зрух і націсніце Абнавіць.
Гэта прымусіць кожны файл, каб перазагрузіць і не выкарыстоўваць лакальны кэш браўзэра
або копія, так што зараз, дазвольце мне ісці наперад і Адкрыць мой інспектар, перайдзіце на ўкладку Сетка.
Я збіраюся націсніце Запаведнік Уваход таму што я
не хачу, каб выдаліць радкі Як толькі я атрымаю павезлі ў іншым месцы.
>> Дазвольце мне ісці наперад тут і увядзіце Andi, націсніце кнопку Адправіць.
Добра.
Гэта, здаецца, як і чакалася.
Ён кажа: "прывітанне, Эндзі."
Дазвольце мне націсніце кнопку ОК.
Цікава.
Звярніце ўвагу, што старонка змянілася, хоць на зыходную старонку.
Звярніце ўвагу на URL выгляд змяніўся.
Ён дадаў, пытальнік, які звычайна з'яўляецца паказчыкам
што мы спрабавалі прадставіць нешта.
І тады на дне, яшчэ больш відавочна,
тут актуальны запыт HTTP, які атрымаў адказ, што 200
прывёў мяне сюды.
>> Так што гэта не тое, што мы хочам зрабіць, правільна?
Таму што я не хачу, каб перазагрузіць ўсю старонку.
Я замест хацеў вярнуцца ілжыва такім чынам, каб кароткае замыканне
паводзіны па змаўчанні браўзэра, які было, вядома, прадставіць старонку.
>> Такім чынам, давайце зірнем на нязначна лепш прыклад.
Гэта дом версія аднаго.
І звярніце ўвагу на наступнае.
Гэта нармальна, калі вы не звяртаў увагі усе радкоў кода.
Але тое, што ў корані адрозніваецца аб рэалізацыі гэтага?
Я агаварыць гэта вядзе сябе тое ж самае, робіць тое ж самае.
Што я, відавочна, зрабілі па-іншаму?
Да?
>> АЎДЫТОРЫЯ: [неразборліва].
Дэвід малая: Так.
Такім чынам, функцыя вызначана differently-- іншымі словамі, якія адсутнічаюць з формы,
там на лініі 7-- або не дастаткова, лінія 8-- больш не
я маю onsubmit атрыбут.
У папярэднім прыкладзе, я павінен быў гэта.
А потым я літаральна напісаў сваю код тут.
І тады я сказаў вярнуцца ілжывым.
І калі гэта не церці Вы няправільна ўсё ж,
яна павінна пачаць пастолькі а, як і ў HTML,
калі мы пачалі супрацоўнічаць пагутарыць яго з CSS у атрыбуты стылю,
ён проста пачаў атрымліваць трохі брудны або адчуваць сябе крыху няправільна.
>> Аналагічна тут, калі Вы пачнеце прымаць HTML,
і затым вы аўтаматычна пляснуць код JavaScript
у сярэдзіне радка ў двукоссі, гэта ня будзе вельмі суправаджэнні.
Дакладна?
Гэта нават не відавочна на першы месца, дзе код JavaScript, ёсць.
Так што было б сапраўды добра, як прынцып лепшага дызайну,
давайце трымаць наш HTML цалкам аддзяліць ад нашай JavaScript.
>> Такім чынам, каб зрабіць гэта, тое, што мы зрабіць вось following--
мы проста выкарыстоўваем HTML для разметкі толькі.
І так у версіі з гэтага, усе У мяне ёсць форма з унікальным ідэнтыфікатарам.
А потым сюды, я, карыстаючыся спецыяльнай асаблівасцю JavaScript
у выніку чаго я магу мець тое, што называецца ананімнай функцыяй.
Так што атрымліваецца, што калі я буду называць document.getElementById з "дэма"
гэта як даваць мне паказальнік гэты вузел ў маім дрэве, элемент формы,
так бы мовіць.
>> Зараз, я проста ведаю, ад ведаючы трохі HTML
Цяпер мы, прачытаўшы некаторыя онлайн даведнік, што элемент формы падтрымлівае
цэлая куча listeners-- падзей у Іншымі словамі, спіс пральня падзеі
слухачы, якія мы бачылі хвіліну таму.
Я ведаю, ад чытання дакументацыі што onsubmit з'яўляецца сапраўдным падзеяй
слухач для элемента формы.
>> Таму, як толькі я ведаю, што, гэта бяспечна для мяне, каб зрабіць
following-- атрымаць гэты вузел з дрэва, элемент формы,
і атрымаць доступ да так званым onsubmit уласнасці.
Такім чынам, кропка проста азначае, гэта ўласцівасць,
як асаблівую каштоўнасць ўнутры яго.
І тое, што тып дадзеных гэта я прызначэнне, па-відаць,
каб onsubmit, што эфектыўна пераменная ўнутры
гэтага вузла ў дрэве?
Гэта поле ўнутры гэтай структуры.
Што тып дадзеных?
>> Функцыя, так.
Так што атрымліваецца, што PHP мае гэта.
І хоць мы не сказаць вам пра гэта,
З таксама мае паказальнікі на функцыі, у здольнасць перадаваць і прызначыць функцыі
а самі значэнняў зменных.
І мы не збіраемся рэгрэсаваць назад да C.
Але цяпер, аказваецца, што на правай баку тут,
нават калі гэта выглядае трохі фанкі, гэта азначае, эй-браўзэр,
даць мне функцыі.
Я не збіраюся нават турбавацца даючы гэтае імя, таму што я літаральна я
збіраецца прызначыць давайце называць яго адрас гэтай функцыі
неадкладна onsubmit.
Іншымі словамі, браўзэр, вам не трэба ведаць, што называецца гэтая функцыя.
Вам проста трэба ведаць, дзе ён знаходзіцца ў памяці.
І так дастаткова проста ёсць знак роўнасці ёсць
і не турбаваць назваўшы гэта, як Foo або вітаць або любое іншае слова.
А цяпер гэта проста стылістычная рэч.
Я мог бы перамясціць гэтую фігурную дужку на the-- sorry-- наступным радку
як мы звычайна робім CS50.
Але ў JavaScript, гэта на самай справе стылістычна агульнай
проста трымаць фігурную дужку, то Першы, на гэтай першай лініі.
>> Але далей, ёсць нічога цікавага.
Гэта адкрытая фігурная дужка толькі размяжоўвае пачатак маёй функцыі.
Функцыя цяпер ідэнтычныя, за выключэннем мяне ёсць
ўключаны вярнуцца ілжывым ўнутры гэтай функцыі.
Таму што атрымліваецца out-- і вы б толькі
ведаю, што гэта ад чытання documentation--
што калі функцыі, што вы прызначаеце да onsubmit апрацоўшчык вяртае хлусня,
браўзэр проста ведае і згаджаецца з тым, не ўяўляць форму на сервер.
Калі яна вяртае праўда, яна прадставіць гэта да сервера па прычынах, якія мы ўбачым
карысныя ў хвіліну.
>> А потым, пасля коскі фігурная дужка ёсць толькі
азначае, што я зроблена вызначэнні функцыі.
Вы ведаеце, што, як толькі патэлефанаваць як вы чуеце ўяўленне.
Добра.
Гэта па-ранейшаму магчыма выгляд непрыгожа.
Так што яшчэ мы можам зрабіць?
>> Ну, гэта аказваецца то ў другой версіі, якая з'яўляецца last--
і мы проста погляд на гэта.
На рызыку прыняцця гэта больш гідкі, аказваецца
што ёсць бібліятэка свет называецца JQuery.
І JQuery гэта супер Бібліятэка JavaScript папулярным
гэта так папулярныя, што большасць любы JavaScript-- гэта не
рэдкасць для людзей, каб заблытаць JQuery з JavaScript.
Чаму?
Сам JavaScript мае вельмі шматслоўныя спосабы вядзення things--
document.getElementById, dadadadadada.
Вы ў канчатковым выніку, вельмі доўгія радкі кода.
>> Такім чынам, чалавек па імені Джон Resid, хто на самай справе працуе на старце
да гэтых дзён, выйшаў з гэтай бібліятэкай гадоў
таму, што многія людзі ўнеслі свой уклад каб назваць JQuery, які змяняе
сінтаксіс наступным чынам.
І толькі так вы бачылі гэта, таму што вы будзеце нязменна
ўбачыць гэта, калі рабіць Канчатковы праект вэб-інтэрфейсам,
гэта было б раўназначна спосаб рэалізацыі гэтай жа функцыі, выкарыстоўваючы
гэта спецыяльная бібліятэка.
>> Цяпер, замест дражніць гэта адзін ад аднаго ў поўным аб'ёме,
давайце проста паглядзім на некаторыя ўзоры.
Гэты сінтаксіс, здаецца, ёсць колькі ананімныя функцыі
або безыменныя функцыі або лямбда-функцыі AKA?
Па-другое, ці не так?
І вы ведаеце, што, нават калі Вы не супер зручныя з гэтым,
проста той факт, што кажа функцыя () двойчы.
>> І атрымліваецца, што тое, што гэты код doing--
і мы будзем спасылацца на інтэрнэт-спасылак, у канчатковым рахунку, па нейкай дапамогу ў гэтым.
Гэта проста азначае, што, калі дакумент гатовы,
ісці наперад і зарэгістравацца наступная функцыя
як прадставіць апрацоўшчыку HTML элемент, унікальная ідэя з'яўляецца дэма.
А потым, калі гэта адбудзецца, называць гэтыя два радкі кода.
І гэта, на жаль, больш падрабязны спосаб сказаць вярнуцца ілжывым.
І мы гаварылі пра гэта толькі таму, што Вы ўбачыце код, як гэта онлайн.
І гэта нічога не палохайцеся.
Але замест таго, майце на ўвазе, што тое, што будзе распаўсюджаны ў JavaScript
гэта парадыгма.
І вось чаму мы паказваем яго цяпер.
Добра.
Так, не спыняючыся занадта шмат на гэтым сінтаксісе,
ці ёсць якія-небудзь пытанні па гэтыя прыклады і ідэі да гэтага часу?
Добра.
Такім чынам, давайце выкарыстоўваць гэта для чагосьці карыснага.
Стварэнне вэб-старонкі, проста кажа прывітанне, так і так не ўсё, што цікава,
ня underwhelm.
Гэты не збіраецца быць прыгожым, але гэта будзе рабіць нешта карыснае.
Дазвольце мне вярнуцца да маёй дырэкторыі тут і адкрыць, дапусцім, форма-0.html.
>> Такім чынам, няхай гэта першакурснік вочны спартыўныя старонцы рэгістрацыі
без CSS ці нейкім сэнсе дызайну.
І я хачу, каб ісці наперад і Зарэгіструйцеся тут з паролем.
І я збіраюся пагадзіцца з умовамі і ўмовы і націсніце Register.
І зараз вэб-сайт кажа, "Вы зарэгістравана! (Ну, не зусім.) "
Гэта здаецца, што гэта працуе, але дазвольце мне ісці наперад і прымусіць перазагрузкі.
>> І дазвольце мне сказаць, няма, вы не патрэбен мой фактычны адрас электроннай пошты.
Ці, можа быць, мы проста скажам, пошту там.
Пароль будзе, як, 12345.
А потым, толькі таму, што я ідыёт, цяпер гэта 123456789.
І я не збіраюся, каб праверыць вашу скрынку.
>> Хм.
Добра.
Так што некалькі магчымасцяў для паляпшэння тут.
І вы ведаеце, ці будзе ўбачыць у PSET сем, што вы можаце напісаць code--
і вы будзеце мець, каб напісаць код у PHP-- абараняць
супраць гэтых відаў карыстальніка памылкі, таму што карыстальнік відавочна
не супрацоўнічае.
І ён ці яна не дала вам усё шануе вы хацелі або нават у фармаце
што вы хацелі іх.
Такім чынам, вы ўбачыце ў PSET сем, што мы маглі б, вядома, ёсць некаторыя
калі ўмовы, якія кажуць Калі адрас электроннай пошты
ня username@something.edu, Мы маглі б проста
сказаць, прабачце, і папрасіць прабачэння перад карыстальнікам шмат, як вы маглі б быць у PSET сем.
Або, калі яны не праверылі гэтую скрынку, Аказваецца ў PHP, вы можаце выявіць, што,
таксама.
І, вядома, калі паролі не супадаюць, як у register.php
для PSET сем, вы можаце выявіць, што.
Але гэта боль у шыя, што зараз яны просяць
нам прайсці ўвесь шлях да сервера.
Карыстальнік інфармуецца пра памылку.
І па меншай меры, калі вы не выкарыстоўваеце некаторыя мудрагелістыя метады,
зараз у іх ёсць, каб націснуць стрэлку назад.
Не было б прыемна, як шмат вэб-сайтаў сёння,
калі ў вас больш непасрэднае зваротная сувязь імгненна?
>> Іншымі словамі, дазвольце мне перайсці да версіі Адзін з іх, які збіраецца быць не прыгажэй.
Але ў яго ёсць гэтая функцыя.
Малая, 12345, 123456789, ня збіраецца сцяжок, зарэгіструйцеся.
Паролі не супадаюць.
Такім чынам, нават калі гэта ўсплывальнае акно ugly-- мы можам замяніць гэта ў канчатковым выніку
нешта накшталт Bootstrap, які вы ўбачыце ў PSET сем
з'яўляецца вельмі папулярным library-- я выявіць, што паролі не супадаюць.
Добра.
Ну, дазвольце мне выправіць як карыстальнік.
Дазвольце мне ісці наперад і сказаць, 12345 12345.
Тым не менш, не правяраючы пагадненне.
Вы павінны пагадзіцца на пастановы і ўмовы.
Дык чаму?
>> Калі мы ўжо пакладзена што ёсць спосаб,
і мы абавязаны вам у PSET сем выявіць памылку
Ўмовы, як гэта серверны, чаму я павінен
турбаваць таксама рабіць гэта ў JavaScript?
Што такое аргумент у паслуга дадання, што
Вы збіраецеся, каб убачыць, як some-- ёсць дадатковая складанасць.
>> Можа быць, няма ног.
Што б гэта магло быць?
АЎДЫТОРЫЯ: [неразборліва].
Дэвід малая: О, цікава.
Патэнцыйныя подзвігі.
Так, што, калі вы не апрацоўвае няправільны ўвод карыстальніка, што вялікі,
можа быць, гэта ўсё лепш, калі гэта нават не дасягнуць ваш сервер.
Я б адсунуць там і скажам, вы павінны, верагодна,
вырашыць абедзве гэтыя праблемы.
Але гэта справядліва.
Што яшчэ?
>> АЎДЫТОРЫЯ: [неразборліва].
>> Дэвід малая: Так.
Гэты код, як мы ўжо казалі раней, інтэрпрэтуюцца на баку кліента.
Гэта не турбуе сервер, што азначае, што не
паўплываць нагрузку сервера або прапускную здольнасць.
А цяпер, для маленькай старой мяне, гэта не мае ніякага значнага ўплыву
таму што ў мяне адзін карыстальнік прама цяпер.
>> Але калі вы любы сайт прыстойнага памеру,
асабліва вялікі, як Facebook, тым больш вы можаце трымаць людзей ад
вашага сервера лепш таму сэрвэры, вядома,
мае толькі канчатковае колькасць аператыўнай памяці, канчатковае лік гігагерц,
канчатковае лік рэчаў ён можа зрабіць у адзінку часу.
Так што, калі ёсць больш людзей у свет ўдару сервер,
выпадкова рэгістрацыі няправільна, як добра, калі вы
можа захаваць гэтую нагрузку серверы.
Акрамя таго, асабліва на рухомай device-- калі вы калі-небудзь
увайсці ў my.harvard або NetID Ельскага і да т.п.,
там гэта затрымка з вялікай колькасцю сайты, як тое, дзякуючы чаму ён займае,
як, па-чартоўску секунду або дзве, часам.
А потым, мой Бог, калі вы памыліліся пры ўводзе, то вы павінны вырабіць зваротны ўдар і перарабляць.
Так што затрымка, асабліва на павольных сеткавых падключэнняў.
Але ў JavaScript, таму што ён працуе на кліента
і не трэба ісці наперад і назад па патэнцыйна павольным інтэрнэтам
падключэнне, вы можаце атрымаць імгненная зваротная сувязь амаль.
>> Такім чынам, давайце паглядзім на гэта.
Дазвольце мне адкрыць форма-0 і паглядзець на HTML тут.
І давайце паглядзім, што адбываецца.
Гэта форма якога дзеянне register.php.
Я толькі з дапамогай атрымаць так што я мог убачыць адрас.
Але для пароляў, мы, безумоўна, хочам каб змяніць гэта, каб ствараць у рэальнасці.
Вось поле ўводу тыпу тэксту.
Вось яшчэ адзін уваход поле тыпу пароля.
Вось, калі вы ніколі не бачылі, уваход тыпу сцяжок.
>> Але няма JavaScript тут наогул.
Гэта толькі HTML, што ідзе register.php.
Але ў версіі адной, дзе я пачаў атрымліваць гэтыя усплывальныя вокны,
давайце паглядзім, што на самой справе тут адбываецца.
У версіі аднаго, тое, што Я збіраюся see-- I
Я думаў, можа паралізаваць дастаткова з досыць слоў, але я выбег.
>> У версіі одно-- мы ідзем.
У версіі адной, звярніце ўвагу на following-- і ня лепшая рэалізацыя,
але гэта мой першы.
Звярніце ўвагу, што ніжэй Форма, у мяне ёсць сцэнар тэг.
І сцэнар тэг азначае, эй, браўзэр, вось
прыходзіць код у, звычайна JavaScript.
А цяпер звярніце ўвагу, што я раблю.
На line-- я магу ледзь прачытаць it-- лініі 32, ён кажа,
вар form-- так што дайце мне пераменная называецца форма.
А потым атрымаць document.getElementId з "рэгістрацыі".
Што гэта?
Ну, дазвольце мне назад тут.
І заўважце, ах, я даў выгляд элемента адвольная, але апісальны ідэя
рэгістрацыі.
Так што гэта дае мне пераменная, дазваляе мне захапіць гэты вузел,
што прастакутнік ў дрэве называецца форму.
form.onsubmit сродкі, эй-браўзэр, рэгістрацыі прослушивателя падзеі
у гэтай форме.
Іншымі словамі, калі гэтая форма прадстаўлены, выканаць наступны код.
Гэта не трэба, таму што імя чаму вы павінны ведаць імя?
Вам проста трэба ведаць, што для выканання, такім чынам
гэта ананімны або лямбда функцыі.
І, што функцыя ўсе з гэтых радкоў тут.
І зараз, каб быць сумленным, нават калі вы магчыма, не калі-небудзь напісаных JavaScript
перш, гэта проста С і PHP логіка.
Так што, калі form.email.value == "" - так што калі поле пустым электронная пошта,
крычаць на карыстальніка з "Вы павінны свой адрас электроннай пошты ".
Інакш, калі form.password.value пусты крык у карыстальніка,
"Вы павінны пазначыць свой пароль."
>> Больш цікава лагічна, калі form.password.value ня
роўна form.confirmation.value-- куды пацверджанне прыйшлі?
Дазвольце мне таму.
Ну, я назваў гэты ўваход поле тут пароль.
І я назваў гэты тут пацверджанне.
Я мог бы назваць яго пароль два ці што-небудзь яшчэ.
Я проста лагічна праверкі што гэтыя два з'яўляюцца аднолькавымі.
Else-- аказваецца, што гэта г-н Буль again-- лагічнае значэнне, сцяжок.
Так што, калі я кажу, клічнік point-- калі не form.agreement.checked,
крычаць на карыстальніка, а таксама.
>> Так гэты сінтаксіс вы бачыце вельмі распаўсюджаныя ў JavaScript,
дзе ў вас ёсць гэты кропкамі.
Вы пачынаеце з аб'екта тут.
Вы ныраць глыбей, каб да ўласцівасць, як пароль.
І тады вы атрымаеце на яго фактычнай кошту.
І зноў, тут ўваход.
Вось гэтае імя пароль.
І яго значэнне незалежна ад чалавек на самай справе набралі ст.
>> Так ва ўсіх з іх выпадкі, я вярнуўся ілжывымі.
Але калі няма, я вярнуся праўда.
І вось зараз мы бачым пераканаўчым выкарыстанне пры
Вы вернецца ілжывым спыніць тое, што робіць карыстальніка
і зрабіць яго ці яе выбар зноў або ўвядзіце яшчэ раз.
У адваротным выпадку, мы вяртаемся праўда.
>> І дазвольце мне прадставіць аднаго Іншы варыянт гэта проста
каб насеньне яго некаторы разуменне.
Ну, у версіі 2 гэтага формаў-2-- Я зраблю гэта з узмахам рукі.
Гэта для тых, цікава, версія JQuery,
тых з вас, хто хацеў бы плёскацца ў гэтай канкрэтнай бібліятэцы.
Але давайце start-- і любыя пытанні?
Дазвольце мне спыніцца на імгненне, таму што Гэта было хутка і шмат.
>> Але добрая рэч тут з'яўляецца тое, што ўсе кода ў значнай ступені тое ж самае.
Новы матэрыял, што з'яўляецца дом?
Якія гэтыя прастакутнікі?
Якія гэтыя вузлы?
Што такое ананімныя функцыі?
Што такое апрацоўшчык падзеі?
Але, на шчасце, большасць таго, што гэта проста поўны круг, скажам, нулявы тыдні.
Добра.
Так што-то трохі больш цікавым?
Ну, у першую чаргу, дазвольце мне перайсці наперад і адкрыць Google Maps.
І вы заўважыце, што для момант, на долю секунды,
заўважыць, што адбываецца, калі Я націсніце досыць хутка.
І гэтая сувязь у Гарвардзе так хутка, што вы нават не заўважаеце яго.
Але тое, што вы, здаецца, як бы ўбачыць калі я націсніце і перацягнуць вельмі хутка?
Тыя з вас прагляду онлайн, калі вы запаволіць гэта хуткасць 0,5 ×,
Вы можаце ўбачыць гэта лепш.
>> Што адбываецца проста перш, чым я націснуў і цягнулі?
Дазвольце мне паспрабаваць here-- зробім нешта яшчэ, як 90210.
Давайце далёка.
Гэта было вельмі хутка, занадта.
Як наконт Disney World?
Там мы ідзем.
ДОБРА.
Што вы бачыце на долі секунды?
Проста, як, квадратаў, праўда?
Запаўняльнікі для пліткі?
>> Ну, што тут адбываецца?
Google Maps з'яўляецца добрым прыкладам гэтая тэхналогія, што называецца AJAX.
І гэта, дзе мы пачнем выкарыстоўваць JavaScript у прыватнасці
павабна шлях.
Назад у дзень, было Гэты сайт называецца MapQuest.
І я павінен быў прынята Скрыншот гэтага з 1990-х гадоў,
дзе, калі вы хочаце, каб шукаць тут, на карце,
Вы літаральна націсніце стрэлку наверсе, што паказаў вам,
іншы квадрат мапе.
Калі вы хочаце, каб рухацца налева, вы націснуў стрэлку, які паказаў вам
іншы квадрат мапе.
А некаторыя вэб-сайты да гэтага часу гэта сёння.
Але нават MapQuest атрымаў лепш, як Google Maps.
>> Замест таго, што лепш іх дні сайты, якія выкарыстоўваюць AJAX.
AJAX-- інакш вядомы як Асінхронны JavaScript і XML і
якая з'яўляецца проста мудрагелісты спосаб сказаць тэхналогія або метад, які
дазваляе, выкарыстоўваючы браўзэр JavaScript зрабіць дадатковыя запыты HTTP
пасля старонка была загружана.
Такім чынам, што ж гэта значыць?
Ну, гэта было б свайго роду раздражняе ў Gmail
калі кожны раз, вы хацелі правяраць пошту,
Вы літаральна ўдарыў кіравання R ці- Каманда-R або націсніце кнопку Reload
і старонка цэлым цыраваць б перазагрузіць.
Дакладна?
Было б міргаць белым верагодна, секунду.
Вы б бачылі дурныя індыкатар.
І проста каб паглядзець, калі ў вас ёсць новы пошта, уся вэб-старонка і URL
Вы знаходзіцеся на прыйдзецца перазагрузіць.
>> Але гэта не тое, што адбываецца ў Gmail.
Дакладна?
Калі вы атрымліваеце новую электронную пошту ў Gmail, тое, што адбываецца на экране?
Гэта проста паказвае, уверх, направа?
Гэта проста чароўна з'яўляецца як новага радка ў табліцы.
Гэта на самай справе залучае прыстойнае колькасць складанасці.
На самай справе, калі вы думаеце пра гэта дрэве, якія, хоць з'яўляецца простым тут,
Gmail--, і я павінен глядзець на код, каб быць sure--
верагодна, мае HTML табліцу або, можа быць, неўпарадкаваных спіс, што робіць
кожнага з вашых паштовых скрынях лісты як.
>> І таму, калі вы сабе гэта ёсць гэта дрэва ў памяці, калі вы
з дапамогай Gmail, які выглядае выгляд роду як гэта, калі Google разумее, ох,
ў вас ёсць новае паведамленне электроннай пошты, гэта не хачу, каб аднавіць усё дрэва.
Хутчэй за ўсё, ён хоча, каб знайсці вузел у дрэва, якое ўяўляе вашу паштовую скрыню
і проста ўставіць новы вузел.
>> Так вельмі падобны на Pset пяць, дзе вы прыйшлося ўставіць вузлы ў хэш-табліцу,
аналагічна робіць Google, з дапамогай Код JavaScript, што ён напісаў,
траверс гэтага дрэва, высветліць, дзе з'яўляецца тое, што ўваходзяць у склад вокны,
а затым ўставіць новы радок.
І новая радок проста азначае адно ці больш новыя вузлы ў дрэве.
>> І так AJAX гэтая тэхніка што дазваляе менавіта гэта.
Пасля таго як вы наведалі URL, Аднак з розуму доўга гэта,
і пасля таго, як старонка мае быў загружаны, вы ўсё яшчэ можаце
захапіць больш дадзеных з internet-- Ці гэта
па электроннай пошце ці плітка з map-- схапіць яго за кулісамі
а затым устаўце яго ў старонку такім чынам, што чалавек на самой справе не
павінны чакаць.
>> Facebook Пасланец працуе сапраўды гэтак жа.
Любое колькасць іншай websites-- ой, на самай справе, нават гэта.
Я маю на ўвазе, гэта, шчыра кажучы, выгляд раздражняе асаблівасць у гэтыя дні.
Калі я пачынаю пошук cats-- гэта гэта свайго роду жудаснай карыстацкага досведу.
Гэта проста пачынае шукаць для мяне.
Ну тое, што ён робіць?
URL-адрас сапраўды не змяніўся так як я пачаў друкаваць.
Але тое, што адбываецца папярок wire-- ОК, хм цікава.
Што адбываецца папярок провада тут проста атрымлівае больш дзіўным.
>> ДОБРА.
Такім чынам, дазвольце мне ісці наперад і праверыць элемент і перайдзіце на ўкладку Network
і паспрабаваць зрабіць гэта тэхнічная і менш о кошках.
Паколькі я друкую, у літаральным сэнсе, кошкі и-- што адбываецца
per-- Я не збіраюся націсніце што.
Добра.
Так тут, што адбываецца кожны раз я увядзіце сімвал, па-відаць?
Як, нізкі ўзровень?
Тое, што адбываецца з кожным з тых, сымбалі я друкую на клавіятуры?
Да?
АЎДЫТОРЫЯ: [неразборліва].
>> Дэвід малая: Дакладна.
Кожны з гэтых знакаў збіраецца Google, па адным.
Яны будуюць радок на сваім сэрвэры, які ўяўляе
усё, што я набраў у да гэтага часу.
І кожны раз, калі я тыпу яшчэ адзін персанаж, яны
выкарыстоўваць іх сакрэтны падліўка з Алгарытм пошуку і высветліць,
ён меў на ўвазе гэтую старонку кошкі або гэтую старонку котка або да т.п.?
Такім чынам, у пэўным сэнсе, гэта дае мне з лепш вопыт, што я нават не
трэба завяршыць сваю думку.
І на самай справе, гэта карысны рэч, аўтазапаўненне ў цэлым.
Калі іх алгарытмы досыць добра і калі мае пошукі досыць відавочна,
Я не прыйдзецца набіраць цэлае слова.
Яны збіраюцца, каб сказаць мне, што гэта з'яўляецца на самай справе я шукаў.
Так што Google называе імгненна Пошук толькі з дапамогай AJAX,
з дапамогай кода, які дазваляе ім запытваць дадатковы кантэнт праз вэб-браўзэр
за кулісамі з выкарыстаннем гэтага Новая мова, JavaScript.
Такім чынам, мы маем пару хвілін засталося.
І дазвольце мне выклікаць майго прыяцеля Колтон на сцэну,
так здавалася Асабліва весела ў апошні раз
ўвесці тэхналогію што некаторыя з вас
выказалі зацікаўленасць у канчатковых праектаў.
Мы думалі, што гэта будзе весела, каб прынесці да добраахвотнікам, хоць, сёння
каб паказаць вам дадатак да гэта дазваляе, што you-- ды,
Я бачыў гэтую руку першым.
Давай до.
Вельмі добра зроблена.
Добрая праца.
Я збіраюся гэтага праекта на экран у хвіліну.
Ваша імя для ўсіх?
>> ОДВ: Я Эфа.
>> Дэвід малая: этанольн?
>> ОДВ: Эфа.
>> Дэвід малая: Эфа?
>> ОДВ: Так.
>> Дэвід малая: Прыемна бачыць вас.
Добра.
Дазвольце мне атрымаць гэта гатовыя.
Прыходзьце да пасярэдзіне з Колтон тут.
Што Колтон мае ў сваіх руках сёння пульт дыстанцыйнага кіравання.
Такім чынам, замест проста стаяць там у трохмерны свет азіраючыся
як гэта зрабіў Колтон, цяпер Эфа можа на самай справе хадзіць, паднімаючыся,
уніз, налева і направа, як у Nintendo або Xbox кантролер.
ОДВ: Я збіраюся падаць на сцэну.
Дэвід малая: я буду стаяць прыкладна тут.
Але гэта рызыка.
ДОБРА.
Так што наперад і пакласці на тых ,.
Дазвольце мне ісці наперад і перайсці да экрана тут.
Дазвольце мне цьмяны святло.
І Колтон, дазвольце мне прыйсці стэнд побач з вамі.
>> Вы хочаце, каб растлумачыць тут з мікрафонам, што мы робім?
Тут вы ідзяце.
>> Колтон: Вядома.
Так што цяпер мы пагрузка на Окулус,
Я думаю, operating-- не працуе сістэмы, але асноўная праграма, дзе
Вы можаце атрымаць доступ усе гульні і прыкладання, якія знаходзяцца ў вашай бібліятэцы.
Так што цяпер, ён павінен сказаць тачпэдом пачаць.
Сенсарны панэль будзе на правая бок гарнітуры.
Так што наперад і tap--
ОДВ: О, чалавек.
Дэвід малая: Так, там вы ідзяце.
Якасць Эфа бачыць значна больш высокую якасць.
Гэта толькі Wi-Fi тут.
Колтон: Так што вы збіраецца хацець зрабіць
гэта паглядзець у бок верхняй правай частцы экрана.
Так, гэта гульня на вельмі верхнім правым куце.
А потым, калі вы выбіраеце гэта, тачпэдом зноў.
Я думаю, што яго Dreadhalls.
А потым тут A-- тут, хай мне трымаць вашыя ачкі для вас.
>> Так што я проста даў яму кантролер.
Так што цяпер ён можа кантраляваць гульню.
Ён можа перамяшчацца і да таго падобнае.
Так ідуць наперад і глядзяць на вяршыні.
Вы павінны ўбачыць новую гульню.
Так што наперад, і вы можаце зрабіць гэта.
Зараз, вы павінны быць у стане кантраляваць самастойна з кантролерам,
а таксама, як толькі гульня загружае тут.
Гэта можа быць трохі страшна.
>> ОДВ: Цяпер вы скажыце мне.
ДОБРА.
>> Колтон: Добра.
Так пацвердзіць, што вы можаце перасоўвацца.
ДОБРА.
Вы можаце перасоўвацца.
Ідэальны.
Так што, калі вы паглядзіце ўніз, у вас ёсць карта.
Карта паказвае вам, дзе вы знаходзіцеся.
Вы можаце паглядзець вакол пакоя.
Вы можаце цалкам разгарнуцца.
Так, менавіта так.
Павярніся.
>> Так што глядзіце на ваш злева.
Я думаю, што ёсць што-то вы можаце забраць на бочцы ў пакоі.
>> ОДВ: Як я магу атрымаць намеціць шляхі?
Колтон: Паглядзіце.
Проста паглядзіце ўверх.
Добра.
Там вы ідзяце.
Цяпер ісці наперад і проста разгарнуцца.
Так што глядзіце далей налева.
Працягвайце рухацца налева.
Працягвайце глядзець налева.
Працягвайце.
Так.
>> ОДВ: О, гэта так.
>> Колтон: Так.
Падыдзіце да яго з кантролерам.
Там вы ідзяце.
Зараз ён павінен сказаць забраць яго.
Там вы ідзяце.
Вазьміце яго.
Добра.
Цяпер, давайце выйсці з гэтага пакоя.
Ідзіце наперад і ісці да тых дзвярэй.
Такім чынам, вы будзеце hold-- ён кажа ўтрымлівайце кнопку, каб прымусіць яго адкрытым.
Так што наперад і ўтрымлівайце кнопку.
Так, прымушаючы яго адкрыць.
Добра.
Добрая праца.
Цяпер мы ідзем з пакоя.
Так што я збіраюся пакінуць астатнія да Вам і бачыць тое, што вы даведаліся.
ОДВ: Я не збіраюся ў цёмным пакоі.
Ой, пачакайце.
Цяпер я павінен ісці па цёмным калідоры?
ОК, я збіраюся назад [неразборліва].
Колтон: Добра.
Некаторыя іншыя элементы, каб забраць.
Падобна на тое, некалькі манет.
Гэта адмычку.
Так што, калі вы знойдзеце зачынены дзверы, вы можаце выкарыстоўваць.
Вы баіцеся?
>> ОДВ: Пакуль няма.
Колтон: ОК.
>> Pretend-- так.
Проста выгляд вы на самай справе стаяў.
І калі вы уключыце around-- Вы павінны прывыкнуць да яго.
Але гэта мае сэнс.
Дэвід малая: І ў той час Эфа працягвае гуляць, так як мы маглі б зрабіць гэта на працягу ўсяго дня,
мы ўсе можам дыбачках тут.
Але ў нас ёсць два іншых пар, калі вы хочаце, каб падысці і гуляць.
У адваротным выпадку, мы ўбачым вы ў наступны асяроддзе.
Дзякуй нашаму добраахвотнікам сёння.
[Апладысменты]
>> [МУЗЫКА - "Seinfeld ТЭМА"]
СПІКЕР 1: Ну, я пакласці новы PL змантаваць на.
Я толькі што змяніў OLPF--
>> СПІКЕР 2: Так што менавіта вы робіце?
>> СПІКЕР 1: Ну, кожны з these-- тут, я пакажу вам гэты тут.
Вы можаце бачыць гэта прама тут.
>> СПІКЕР 3: я думаю, што я добра з гэтым.
Вы хочаце яшчэ?
>> СПІКЕР 4: Не, я добра. [Неразборліва].
>> СПІКЕР 3: Не, [неразборліва].
У некаторых з іх.
СПІКЕР 1: Розныя колеру.
СПІКЕР 2: ОК.
СПІКЕР 1: Так у канчатковым рахунку тое, што яго робіць гэта рэгулюе колер of--