[Powered by Google Translate] [Тыдзень 9, працяг] [David J. малая - Гарвардскі універсітэт] [Гэта CS50. - CS50.TV] 

Гэта CS50. Гэта канец тыдня 9. Вялікі дзякуй. Нарэшце. 9-я тыдзень. Я атрымаў яго. Сёння мы працягваем наш размова аб вэб-праграмаванні з воку на канчатковы праект, а не таму, што вы павінны нешта зрабіць вэб- для канчатковага праектаў, але таму, што альбо для канчатковага праекта або пасля CS50 гэта, вядома, кірунак, у якім сучаснае праграмнае забеспячэнне не збіраецца. І ўсё ж гэта на самай справе не лёгкая рэч. На самай справе, адна з самых цяжкіх рэчаў, каб зрабіць аспекце дызайну. 

Напрыклад, дызайн мы маем на ўвазе на самой справе атрымаць карыстацкі інтэрфейс або карыстацкі вопыт права. Адважуся сказаць, - і мы ведаем з апошніх пастаўленай задачы , Калі некаторыя з вас эфір вашы нараканні аб некаторых кавалак праграмнага забеспячэння або абсталявання, якое раздражняе вас, як на кампусе або выключаны - ёсць шмат сайтаў там, ёсць шмат апаратных там, такі адстой. Але рэальнасць такая, што робіць рэчы, якія лёгкія ў выкарыстанні, але, тым не менш магутныя гэта вельмі складаная задача. Такім чынам, на сённяшні дзень я папрасіў Язэпа і Томі далучыцца да мяне тут так што мы можам весці размову, як пра дызайне і якія разумовыя працэсы павінны пачаць рухацца праз вашу галаву Пры распрацоўцы канчатковага праекта, вашых пачынаннях. А потым з дапамогай Томі мы будзем глядзець на некаторыя дэталі рэалізацыі. Як вы можаце мець некаторыя бачанне на паперы або ў розуме , Які затым можна выканаць праграмна з дапамогай некаторых тэхналогій і тэхнікі мы толькі пачалі казаць пра тое, а менавіта наяўнасць і нешта яшчэ больш новых, а менавіта AJAX, асінхронны JavaScript. Гэта дазваляе ствараць ўсё больш дынамічным з карыстацкага інтэрфейсу па выбарцы больш і больш дадзеных паступова з сервера. Такім чынам, мы ўбачым некаторыя з гэтых фрагментаў, а сёння. Як у баку, калі вы зацікаўлены ў канцэнтрацыі ў вобласці кампутарных навук або minoring у вобласці кампутарнай навукі, ведаюць, што ў гэтую пятніцу апоўдні У Максвелла Дворкін 221 будзе піца падзеі дзе вы можаце даведацца крыху больш пра кампутарных навук. На вашым шляху да дзвярэй сёння вы зможаце падабраць неафіцыйных кіраўніцтва CS у Гарвардзе. Мы змесцім яго ў смеццевыя бакі на вуліцы ў станы так што калі вы хочаце, каб захапіць гэта і даведацца трохі больш пра CS, што там будзе для вас, як гэта было ў тыдзень 0. Акрамя таго, калі вы хочаце далучыцца да нас на абед CS50 ў гэтую пятніцу ў 1:15 вечара, накіравацца ў cs50.net/lunch. Не мудрагелячы хітра, я даю вам навучанне калег Іосіф Онг. Прывітанне. [Апладысменты] Дзякуй. У першы раз я даведаўся аб дызайне быў у класе тут называюць CS179. 

Прафесар у той час, распавёў нам гісторыю пра іншае прафесарам які з'ехаў у гатэль і выкарыстоўваць краны. Ці можа хто-небудзь сказаць мне, што на 2 кнопкі на левай і правай рабіць? [Студэнт] Гарачыя і халодныя. >> Гарачыя і халодныя. Добра. Тое, што вы звычайна чакаеце, ці не так? Гэты прафесар пасля выкарыстання крана хоча, каб прыняць душ, і ён пачынае гэта выкарыстоўваць. Ён лічыць, што левая і правая боку для гарачага і халоднага, так? Але хто можа сказаць мне, што гэта на самай справе? Любы рукі? [Неразборліва адказ студэнта] >> Адно з прапаноў заключаецца? [Неразборліва адказ студэнта] >> тэмпературы? Такім чынам, адна з іх кантралюе тэмпературу і іншыя элементы кіравання? >> [Студэнт] ціск вады. Ціск вады. Добра. Гэты прафесар заходзіць у гэта і, думаючы, што яны кантралююць гарачай і халоднай, Атрымліваецца правільны, якое ён лічыць для гарачага, усё, аж да таму што ён хоча прыняць цёплы душ. Ну, гэта на самай справе не супадаюць, так што ён атрымлівае гэта не вельмі весела вопытам быць у халодны душ, і ўсе мы ведаем, як гэта. Гэта прыклад памылкі праектавання. Што я маю на ўвазе, што гэта яго чаканне ад крана не адпавядаюць таму, што выйшла з душа, якая з'яўляецца своеасаблівай няўдала для яго. Так што гэта прыклад памылкі праектавання, што адбываецца ў рэальным жыцці. Але мы бачым, усякія іншыя, а таксама. Мы, верагодна, не вентылятары сістэмы MBTA. Гэта сістэма метро на самай справе ў Лондане, які кажа: "Гэтая кнопка не выкарыстоўваецца". Чаму нават там? Навошта нам яшчэ трэба? Калі я быў дзіцем, будучы тэхнічна прасунутых у доме, , Калі кампутар будзе катастрофа, мая мама прыйдзе да мяне, паказаў мне гэты экран і пытае мяне, што здарылася. 

Нават не ведаю, што гэта значыць. [Смяецца] Што? [Смех] Часам мы адчуваем, што распрацоўшчыкі праграмнага забеспячэння проста троллінг нас. Так як карыстальнікі мы накшталт: "Што адбываецца? Хтосьці кажа нам". Гэта ўсё зводзіцца да пытання дызайну. Дызайн, як мы бачым, не з'яўляецца чыста аб эстэтыцы, гэта не пра тое, як усё выглядае. Мы бачым тут, што гэта невялікае ўсплывальнае тут на самай справе выглядае даволі добра. Ён мае цень на заднім плане, яна мае мяжу радыусаў адбываецца. Гэта свайго роду прыгожая. Гэта не вельмі добра распрацавана, таму што гэта не вельмі зручна для карыстальніка. Гэта маленькае ўсплывальнае акно, якое з'яўляецца на самай справе не даць мне любую інфармацыю, Пра тое, што адбываецца, яна не кажаце мне нічога, як карыстальнік пра тое, каб акрыяць ад гэтай памылкі. Мы хочам, каб думаць пра тое, што дызайн гэта не так. Па-першае, гэта не эстэтыка. Ён таксама не начынні вашага прыкладанні з кучай непатрэбнай функцыянальнасці. Калі вы тайская рэстаран, вы, верагодна, не хачу быць стаматолагам у той жа час. І з Пытанняў Facebook, не так шмат людзей выкарыстоўвалі яго і гэта было на самай справе не на аснове таго, што яны будавалі. І гэта так прыемна думаць не столькі колькасцю рэчаў што вы кладзеце ў ваша прыкладанне, але якасць і як вы робіце, што карыстацкі досвед лепш на самай справе паляпшэнне ад таго, што вы ўжо маеце. 

Увогуле, дызайн кажа нам, што мы павінны будаваць. Напрыклад, калі мы будуем тое, што давайце шукаць рэчы, Google, як, напрыклад, мы павінны рабіць рэчы, такім чынам, , Што патрабуе ад карыстача патрабуецца шмат клікаў, каб атрымаць тое, што яны хочуць, ці мы павінны рабіць гэта такім чынам, напрыклад, з Google Instant, або аўтазапаўненне , Што дазваляе нам дабрацца да нашых вынікаў хутчэй? Інжынерныя ўключае ў сябе, як Томі пакажа вам, на самай справе яе стварэння. Ёсць шмат тыпаў дызайну. Напрыклад, калі вы ствараеце нешта, каб разгарнуць нешта У краіне трэцяга свету, дзе існуе не так шмат электрычнасці або, што значна тэхналогіі, Вы павінны праектаваць тое, што вы будуеце такім чынам, што лёгка дае доступ да народа. Але тое, што ўсякія іншыя дызайнерскія рашэнні ці могуць быць або могуць быць ўцягнутыя ў нешта падобнае? Так. Я бачу руку. [Неразборліва адказ студэнта] >> праве. Менавіта так. Даступнасць гэта адно. Многія людзі не думаюць пра тое, "Як наконт маіх карыстальнікаў?" як крайнасці альбо спектру. У мяне ёсць карыстальнікі, якія могуць мець інваліднасць, што я не думаў пра і я проста думаў аб праектаванні для звычайнага карыстальніка. Інтэрнэт даступны кожнаму ў наш час, і я павінна быць распрацоўка для тых людзей. Што ўсякія іншыя дызайнерскія рашэнні вы маглі б зрабіць? Так. >> [Студэнт] кошту. Варта. Вельмі добра. Іншая справа, мы маглі б засноўваць нашы рашэнні дызайну на гэта выдаткаў. Калі мы бізнес, вы хочаце пабудаваць нешта, што не зойме шмат затраты на вытворчасць але можа прадаць у асабліва высокай кошту або можаце атрымаць нам некаторую прыбытак. 

Усе гэтыя розныя віды дызайну, але, калі мы будуем нешта ў інтэрнэце ці калі мы будуем тое, што, верагодна, не варта было б столькі будаваць цяпер, як інтэрнэт-прыкладанні - вы не павінны кідаць шмат капіталу ў ёй для таго, каб зрабіць нешта, што на самай справе працуе - тое, што мы больш турбуюцца пра тое, карыстацкі досвед. Мы называем гэты карыстальнік арыентаванага дызайну. Па сутнасці, карыстальнік арыентаванага дызайну ўключае ў сябе ставіць сябе на месца вашых карыстальнікаў. Калі нехта падпішацца на тое, што я будую, Відавочна, яны прыходзяць да мяне канкрэтнае прымяненне з мэтай, з задачай яны хочуць, каб скончыць. І ваша задача не толькі дапамагчы ім выканаць гэтую задачу але, каб дапамагчы ім выканаць гэтую задачу такім чынам, каб эфектыўна, інтуітыўна, і, як некалькі чалавек сказалі там, даступнай. Што эфектыўнасці значыць? Эфектыўнасць азначае, як хутка ў майго карыстачу выканаць задачу улічваючы мой інтэрфейс. Займае шмат клікаў для іх, каб патрапіць з аднаго месца ў іншае? Гэта цяжка? Ці павінны яны выконваць мноства паўтаральных задач? Мы хочам зрабіць гэты працэс як мага больш эфектыўнай такім чынам, яны не павінны рабіць тыя віды рэчаў. Што тычыцца інтуітыўна, гэта значыць, напрыклад, калі карыстальнік глядзіць мой інтэрфейс, гэта лёгка для іх, каб дабрацца з аднаго месца ў іншае? Гэта лёгка для іх, каб высветліць, што яны павінны націснуць на мой інтэрфейс для іх, для дасягнення мэты або задачы, якія яны хочуць дамагчыся? 

І, нарэшце, як адзін чалавек сказаў, што там, даступнасць вельмі важная. [Мужчынскі дынамік] Яно прыходзіць да даступнасці такія рэчы, як бачанне, падабаецца, як я на самай справе стварыць нешта для тых, хто сьляпы? Ох. Для тых, хто не можа бачыць наогул, у нас ёсць тое, што называецца чытання з экрана. Тое, што вы павінны зрабіць, гэта вы павінны стварыць свой сайт такім чынам, , Што, напрыклад, канкрэтных тэхналогій, што мы называем - Ёсць шмат рэчаў цяпер. Я думаю, што ёсць праграма чытання з экрана JAWS называецца. Многія з гэтых рэчаў разлічваць на тое, што мы называем вобласці правілаў для таго, каб зачытаць карыстачу, што прысутнічае на старонцы. Для тых людзей, хто не можа бачыць, вы павінны пераканацца, што гэтыя чытання з экрана сапраўды можа забраць змесціва на старонцы і можа рэальна паказаць карыстальнікам, Калі вы не можаце бачыць, па меншай меры, яшчэ можна зразумець змест старонкі. Так. Добра. Хопіць казаць аб добрым дызайне. Давайце пагаворым аб дрэннай дызайн. Гэта рэчы, якія вы не павінны рабіць. Можа хто-небудзь сказаць мне аб сваім вопыце з Craigslist і што яны думаюць не так вялікі гэты дызайн? Так. >> [Студэнт] Я думаю, што занадта шмат слоў у адной вобласці. Занадта шмат слоў, правільна? Цалкам пераважнай. Вы прыйшлі на гэтую старонку, і вы сустрэлі з цэлай кучай рэчаў тут , Што можа нават не мае значэння для вас. Напрыклад, вы жывяце ў адну дзяржаву, якое не пачынаецца з гэтай літары. Дапушчальны, вы жывяце ў Тэхасе ці чамусьці. 

Вы павінны пракруціць ўвесь шлях уніз старонкі, каб дабрацца да месца вы знаходзіцеся. Я з Бостана, таму дазвольце мне глядзець у штаце Масачусэтс. Дзе Масачусэтс? О, гэта прама тут. О, гэта Бостане. Добра. Давайце паглядзім на Бостан. [Смех] Даволі пераважнай, ці не так? Нязручныя рэчы там. [Смех] Скажам, я шукаю дзесьці жыць. Колькі людзей на самой справе выкарыстоўвалі Craigslist? Тоны вас. Ёсць даволі дрэнна спосабаў глядзець на гэта, але давайце паглядзім на гэта. У чым розніца паміж IMG і рыс? Можа хто-небудзь сказаць мне? Там на самай справе няма ніякай розніцы. Яны маюць на ўвазе адно і тое ж, але ў іх розныя цэтлікі для іх па некаторых прычынах. Калі я націскаю на мае вобраз, нічога не адбываецца на старонцы. Я на самой справе трэба націснуць пошук зноў нешта здарыцца. Што можа быць лепш дызайн рашэнне, якое можа быць зроблена там? Калі я націснуўшы на гэтую фільтра, я, верагодна, хочаце, каб фільтр з тым, што пэўныя дзеянні ці іншая катэгорыя. Такім чынам, замест таго, каб націснуць пошук зноў, я мог бы проста аўтаматычна выконваць фільтраванне накшталт Google стыль, у якім яны робяць гэта імгненна. [Малая] Але не ўтварае, як мы бачылі іх да гэтага часу павінны быць фізічна прадстаўлены націснуўшы Enter або па крайняй меры націску кнопкі? Як вы бачылі іх так далёка, вам на самай справе трэба націсніце кнопку Адправіць, каб зрабіць гэтыя рэчы. 

Але, як Томі пакажа вам, на другім, на самай справе спосабаў для Вас такія, што пры націску на гэтую рэч ён можа аўтаматычна адпраўляць што мы называем запыт AJAX і атрымаць дадзеныя назад і фільтраваць вынікі імгненна. Ёсць куча рэчаў, якія не так з гэтым інтэрфейсам. [Малая] Ці можаце вы шукаць Cambridge? Там-то трохі анамальная тут, дзе вы клапоціцеся аб Cambridge і тым не менш вы атрымліваеце Westford, Spring Hill, West Newton і таму падобнае. Напэўна, не ідэальныя. >> Напэўна, не ідэальныя. Як я мог бы быць у стане зрабіць працу карыстальнікаў лепш на гэтай старонцы? Так. >> [Студэнт] Інструкцыі. Добра. Інструкцыі ў які сэнс? [Студэнт] Напрыклад, рэч для карыстальнікаў-пачаткоўцаў, якія нават не ведаюць, што Craigslist з'яўляецца ці вы не ведаеце, што вы павінны рабіць. Права. Так, тлумачачы, што Craigslist на гэтай старонцы вельмі важна. Мы можам сапраўды сказаць, што карыстачы гэтай старонкі на самай справе для. Калі я проста наведвання гэтага, я бачу цэлую кучу месцаў. Я нават не ведаю, што яны азначаюць. Але што больш важна, проста гледзячы на ​​гэты інтэрфейс, Памятаеце, я была пракруціць ўніз тоны рэчаў, каб знайсці пэўны супольнасць што я на самой справе клапаціўся аб аб гэтым. Што хутчэй, як я мог гэта зрабіць? Так. [Студэнт] Падзяліце іх на ўсход, захад рэгіёнах. >> Добра. Я мог бы падзяліць іх на некалькі катэгорый, якія маглі б мне дапамагчы хутчэй вызначыць як дабрацца да пэўнага месца. [Студэнт] Пакласці ў расчыняецца спісе. >> Праве. Добра. Я мог бы выкарыстаць выпадальнае меню, таму што ў нас ёсць пэўны набор рэчаў і мы маглі б паказаць іх у выпадальным меню. Такім чынам, ён не займае так шмат месца на экране. Але яшчэ лепш, чым тое, што мы можам зрабіць? Так. >> [Неразборліва адказ студэнта] >> Ці можаце вы сказаць гэта зноў? >> [Студэнт] поле пошуку. Так, акно пошуку. Гэта вельмі добра. Што мы можам зрабіць, гэта на самай справе, калі мы паглядзім назад, на слайдах, акно пошуку. Аўтазапаўненне. Вельмі лёгкі спосаб пошуку з дапамогай вынікі, якія вы ведаеце, у наборы. Калі я пачынаю набіраць BO, проста пакажыце мне ўсе вынікі, якія маюць BO ўнутры іх. Такім чынам я магу вельмі лёгка знайсці прыватнасці, адна я хачу, каб замест таго, каб пракруціць гэта сапраўды вялікі спіс. 

Усе гэтыя віды вельмі нізка вісяць пладоў, што той, хто ажыццяўляе Craigslist рэальна можаце зрабіць, каб зрабіць вопыт на вэб-сайце нашмат лепш для іх канкрэтнага карыстальніка. Добра. Хопіць казаць аб дрэнных сайтаў. Давайце пагаворым аб Facebook. Пры Facebook выйшаў, і, у прыватнасці Facebook фатаграфіі, было шмат іншых паслуг, у той час, якія маглі б зрабіць тое ж самае. Яны могуць арганізаваць свае фатаграфіі ў альбомы. Што вы можаце зрабіць гэта можна арганізаваць іх у наборы, а таксама. Вы маглі б арганізаваць іх па даце. Вы можаце рабіць усе гэтыя канкрэтныя рэчы. Але хто ведае, што зрабіў Facebook фатаграфіі падарвацца ў той час ён быў выпушчаны? Так. >> [Студэнт] Тэгі. >> Тэгі. Менавіта так. У нас ёсць Milo тут, які з'яўляецца наша сабака талісман з бандана CS50. Вы бачыце, што ў нас ёсць гэтая паметкі ў сярэдзіне. А тое, што зрабіла Facebook фатаграфіі так цікава з пункту гледжання юзабіліці з'яўляецца тое, што яна на самай справе дазволіў людзям праз гэты прыцягваць сваіх сяброў у іх фатаграфій. Для Facebook, так як іх вэб-сайт з'яўляецца асабліва сацыяльных, гаворка ідзе аб стварэнні такой сацыяльнай атмасферы. Гэта палепшыла вопыт фатаграфій нашмат больш таму што яны могуць на самай справе пачынаюць казаць: «Гэта сувязяў паміж людзьмі, і гэтыя фатаграфіі людзей, якіх вы на самой справе хвалюе ". Частка з іх таксама роду нарцысізм. Людзям падабаецца быць пазначаныя ў фатаграфіях і таму падобнае. Хоць гэта не абавязкова добрая чалавечая рыса, У той жа час ён заснаваны на добрых дызайнерскіх рашэнняў таму што людзі на самай справе клапоціцца аб такіх рэчах. Дык вось Facebook фатаграфіі. 

Але давайце пагаворым Facebook у цэлым. Я ўпэўнены, што тут шмат людзей маюць меркаванне аб Facebook, і добрыя дызайнерскія рашэнні і дрэнных дызайнерскіх рашэнняў. Так што давайце прадухіліць або быць шчаслівым. Пойдзем. Я ведаю, што ўсе вы выкарыстоўваеце Facebook. Хтосьці павінен мець нешта дрэннае сказаць ці нешта добрае, каб сказаць пра гэта. Так. [Студэнт] У стужцы навін ёсць шмат рэчаў, якія я на самой справе не хвалюе. Стужка навін сапраўды паказвае шмат рэчаў, якія вы, магчыма, не хвалюе. У вас ёсць сябры на Facebook, каго вы не сустракаліся ў працягу 2 або 3 гадоў і вы ўбачыце іх вынікі навіны з'яўляюцца ў вашай стужцы навін і вы сапраўды не клапоцяцца пра яго. Facebook фактычна зрабіў высілак, каб зрабіць гэта лепш, і яны сапраўды спрабавалі праштурхнуць рэлевантныя вынікі ў пачатак стужкі навінаў у апошні час так што вы на самой справе бачыце рэчы сябрамі, якія маюць дачыненне да вас ці вашым блізкім сябрам. Што-небудзь яшчэ? Так. [Неразборліва адказ студэнта] >> Ці можаце вы сказаць гэта зноў? [Студэнт] аб'явы адносна незаўважна. >> У якім сэнсе? [Неразборліва адказ студэнта] Яны не маюць святла на экране, як і банэраў. Добра. Гэта добра. Калі вы памятаеце Інтэрнэт з 90-х гадоў - >> [малая] Я быў там. >> Ён быў там. [Смех] Магчыма, вы памятаеце міргаць GIF-фоны, бліскучыя рэчы, GeoCities стылю роду рэчы. Гэта сапраўды не з'яўляецца прыкладам добрага дызайну таму што гэта сапраўды адцягвае ад зместу. На сайце Ельскага мастацтва выкарыстоўваецца для анімаваных GIF-файлаў маюць у якасці фону і вы не маглі прачытаць што-небудзь на старонцы, але я думаю, нехта на самой справе гаварыў з імі, і цяпер гэта крыху па-іншаму. [Малая] Гэта значна лепш. >> Гэта значна лепш, як вы можаце бачыць. >> [Малая] О, так. Проста выдатна, проста - Так. Добра. 

Збольшага гэта таксама робіць вашыя старонкі, магчыма, вельмі мінімалісцкі і вельмі зразумелыя так што ўсё на старонцы паток такім чынам, што вельмі лагічна і не перашкаджаць адзін ад аднаго. Што ўсякія іншыя рэчы добрага Facebook або дрэнна аб Facebook? Давайце проста ёсць дызайн размова тут. Ох. Дзе? Так. [Студэнт] Новая сістэма Timeline дазваляе шукаць профіль чалавека аб сваім мінулым. Ох, Timeline. Timeline гэта вялікая рэч, таму што яна дазваляе сцябла сяброў таму, калі яны былі ў сярэдняй школе. Тэрміны добра, таму што дазваляе фільтраваць праз ўтрыманне значна хутчэй, яна дазваляе знайсці рэчы, якія б у адваротным выпадку вы прыняты вельмі доўгі час, каб знайсці проста пракрутка ўверх і ўніз, уверх, уверх, уверх, уверх, уверх, як ён можа вярнуцца ў часе. Але ёсць таксама свайго роду недахоп, што з пункту гледжання карыстача. Што гэта можа быць? Вялікія словы, якія пачынаюцца з P-R. >> [Студэнт] Бяспека. >> Privacy, дакладна? Канфідэнцыяльнасць з'яўляецца вялікай праблемай узаемадзеяння з карыстачом. Гэта адна з рэчаў, якія я ненавіджу больш за ўсё ў Facebook цяпер. [Смех] [Малая] Як мне цяпер. Давід не разумею, гэта адбылося на самай справе да ўчорашняга дня. Так што цяпер ён ведае, што кожны раз, калі я мець зносіны яму, што я ведаю, што ён ігнараваў мяне. [Малая] няёмка частка была я на самой справе звяртаючы на ​​яго ўвагі, і я не ведаю, што ён ведаў, што я звяртаючы на ​​яго ўвагі. [Смех] Канфідэнцыяльнасць з'яўляецца вялікай праблемай. Ці можа хто-небудзь тут, скажыце мне, што можа быць дрэннага аб канфiдэнцыяльнасцi Facebook акрамя таго, што яны робяць такія рэчы? Што гэта асабліва цяжка зрабіць у адносінах да Facebook прыватнае жыццё? Такога роду з'яўляецца адной з вядучых пытанне. Так. >> [Студэнт] схаваць фатаграфіі ад пэўных людзей. Права. Менавіта, каб схаваць фатаграфіі ад пэўных людзей. Яны маюць гэтую маленькую, маленькую кнопку ў правым верхнім куце, што дазваляе перамыкаць прыватнасці фота. Іх параметры прыватнасці вельмі разнастайныя паміж рознымі відамі меню. 

Яны атрымалі шмат лепш пра гэта нядаўна, але гэта была справа што кожны раз, калі вы хочаце, каб ваш сяброў бачыць фатаграфіі, Вам прыйдзецца прайсці праз вельмі складаны 5-ступеністы працэс быцця, як, Дазвольце мне націсніце на гэтую спасылку, цяпер дазвольце мне зноў націснуць, дазвольце мне зноў націснуць, Дазвольце мне паказаць, якія людзі не могуць убачыць мае фатаграфіі. Гэта не асабліва добра на ўдзел у Facebook таму, што так шмат пра карыстацкі досвед на самай справе дае ім свабоду кантраляваць тое, што людзі могуць бачыць. Мы называем гэта карыстацкі кантроль і свабоды. Калі вы не дазваляючы сваім карыстальнікам зрабіць гэта такім чынам, што з'яўляецца эфектыўным і інтуітыўна зразумелым, , То ваш карыстацкі досвед не вельмі вялікі, што на ўсіх.  Хіба вы, хлопцы, хацелі сказаць што-небудзь пра Facebook? Як адключыць? [Ong] Вы не можаце адключыць гэтую функцыю, і гэта велізарны недахоп юзабіліці з боку Facebook. Гэта функцыя - Я сапраўды паглядзеў на яго ўчора - гэта альбо, што вы не можаце зрабіць гэта або яго пахавалі дзесьці вельмі, вельмі глыбока у нетрах Facebook, таму што я не магу зразумець, як адключыць гэтую функцыю наогул. [Малая] Але часам гэтыя рашэнні не з'яўляюцца відавочнымі таму што вы, хлопцы далі нам шмат карыснай інфармацыі аб розных прыкладанняў CS50 і вэб-сайтах, у курсе выкарыстоўваюцца. Мы яшчэ не рэалізавалі ўсе гэтыя просьбы і прапановы. 

Часткова гэта для атрымання так шмат запытаў, што гэта функцыя часу, але часам мы проста прыняць свядомае рашэнне, як, "Дзякуй за прапанову, але мы не згодныя". Так як жа на самой справе вырашыць, што вы павінны рабіць, калі вашы карыстальнікі думаю, што вы павінны зрабіць нешта нават калі вы не абавязкова? Гэта тонкі баланс паміж фактычна слухаць тое, што кажуць карыстальнікі а на самай справе па нейкай лініі, дзе вы кажаце, "Мы не збіраемся рабіць тое, што гэтыя карыстальнікі гавораць". І ў прыватнасці, я думаю, што была цытата Генры Форда, які сумуе гэта даволі добра. "Калі б я спытаў людзей, чаго яны хацелі, яны б сказалі, што яны хацелі хутчэй коней". Ці можа хто-небудзь накшталт дражняць адзін ад аднаго, што гэта цытата на самай справе азначае? Справа не толькі ў тым, што карыстальнікі ведаюць, чаго хочуць, але больш за тое - [Студэнт] Яны не ведаюць, што гэта магчыма. У першай частцы яны не ведаюць, што гэта магчыма. Tease, што акрамя крыху больш. Што вы маеце на ўвазе? [Неразборліва адказ студэнта] Гэта добра. Тое, што я думаю, што мы спрабуем сказаць тут тое, што людзі ведаюць, чаго яны хочуць. Яны хочуць хутчэй каня. Тое, што яны сапраўды хочуць гэта ўменне рухацца хутчэй, але яны сапраўды не ведаю асяроддзя з дапамогай якога можна дамагчыся. Калі вы прыходзіце да сваіх карыстальнікам і карыстальнікам распавесці вам сёе-тое і яны скажуць вам: «Мы хочам, каб гэтыя асаблівасці і гэтыя асаблівасці і гэтыя функцыі", Вы не хочаце, каб абавязкова думаць пра "Дазвольце мне ісці наперад »І ажыццявіць тое, што яны відавочна кажуць:" але тое, што вы хочаце думаць пра тое, "Якія ідэі я магу атрымаць ад гэтага?" Чаго яны сапраўды хочуць? 

А адтуль, што вы можаце зрабіць, гэта стварыць нешта, што задавальняе гэтыя запыты але не абавязкова ў тым, што карыстач чакае, што яна будзе задаволена. Так, нешта накшталт канчатковага праекта, у вельмі рэальным выразе, Што карыснага эўрыстычнага, калі справа даходзіць да стварэння чагосьці лепшага, асабліва калі дызайнер гэтага пыхі пра яго , У якім вы, здаецца, ведаю, што лепш, вы маглі б здабываць з вашых карыстальнікаў, але як вы на самай справе ісці аб атрыманні, што зваротная сувязь? У фінале праекта, вельмі канкрэтна, то, што вырабляе аптымальныя вынікі тут? Што дае аптымальныя вынікі - і я пайду па гэтым у другім - гэта працэс распрацоўкі і тэставанні, а затым ітэрацыі. Што я маю на ўвазе тэставання, як правіла, пры стварэнні чагосьці Вы думаеце, што гэта даволі добра, быццам бы, "я такі вялікі дызайнер. Кожны будзе любіць гэтага". І тады вы паклалі яго там, і людзям не вельмі падабаецца, па некаторых прычынах. Тое, што вы павінны зрабіць, вы павінны прыняць частку рэчаў, якія людзі робяць, як і перарабіць тое, што людзі не любяць. Гэта гучыць як вельмі відавочны працэс, але гэты працэс стала ітэрацыі звыш таго, што вы ўжо пабудавалі гэта працэс, які дапамагае вам не толькі ўдасканальваць уласныя навыкі дызайну, але таксама дапамагае вам палепшыць дызайн так, што людзі на самай справе цэняць ваш прадукт яшчэ больш, чым раней. 

Я пайду за больш канкрэтныя прыклады таго, што вы маглі б на самай справе. Як свайго роду апошні прыклад прадукту, давайце паглядзім на байдарцы. KAYAK, калі ён выйшаў было вельмі, вельмі папулярныя. Ці можа хто-небудзь здагадацца, чаму? Якія віды рэчаў, якія вы хацелі пра гэта, калі вы выкарыстоўвалі яго або якія віды рэчаў, якія вы не любіце? Так. >> [Неразборліва адказ студэнта] >> Добра. Вось частка яго дазваляючы карыстачу ёсць запыт, які з'яўляецца больш экспансіўнай чым вельмі абмежавальным накшталт: "Вы павінны абраць дату пачатку ", І вы павінны выбраць дату заканчэння". На самай справе, ён дазваляе быць гнуткімі пра гэта, і гэта дае вам усе палёты ў гэтым дыяпазоне. Што-небудзь яшчэ? [Студэнт] Яны ўключаюць у сябе зборы ў кошт. Яны ўключаюць зборы ў кошт. Падаткі і рэчы на ​​самай справе ісці прама ў гэты кошт у левым верхнім так што вы не падманулі, думаючы, што вы на самай справе плаціце за $ 240 палётаў калі гэта сапраўды $ 330. Што-небудзь яшчэ? Так. [Неразборліва адказ студэнта] Я не ўпэўнены, калі яны сапраўды дазваляюць гэта зрабіць. Я магу памыляцца. Гэта можа быць цікавая рэч, калі вы хочаце, каб змясціць больш вагі на пэўных фільтраў так што яны штурхаюць вынікі, звязаныя з гэтым фільтрам на самым версе. Але хто можа сказаць мне, што такога асаблівага ў гэтым левая бок? Як вы традыцыйна паглядзець палёт на інтэрнэт-паслуг да гэтага? 

Так. >> [Неразборліва адказ студэнта] >> Ці можаце Вы сказаць, што - [Студэнт] Кожная авіякампанія. >> Так. Кожная авіякампанія мае свой уласны вэб-сайт. Гэта аб'ядноўвае рэчы. І што? [Студэнт] Вы сапраўды ведаеце, у які час ты ад'язджаеш. Вы сапраўды ведаеце, што раз, калі вы едзеце, але звязана з фільтрамі, у прыватнасці. Дазвольце мне падцягнуць каяк. О, Божа, ўсплывальных вокнаў. Няўдалы вопыт карыстальніка. Што адбываецца, калі я рухаю гэты паўзунок? [Студэнт] Аўтаматычныя абнаўлення. >> [Ong] Аўтаматычныя абнаўлення. Гэта тое, што вельмі важна. Да гэтага, калі вы хацелі, каб паглядзець палёту, Вы павінны былі пакласці ў свой ўваход месцазнаходжанне, месца выхаду, націсніце Search, ён будзе апрацоўваць, што і паказаць свае вынікі. Калі вы хочаце змяніць ваш запыт, вам прыйдзецца націснуць назад двойчы, ўвайсці ў новы запыт з нуля, а затым рабіць гэта зноў і зноў. Добрая рэч аб чымсьці, як гэта ён выкарыстоўвае вельмі [неразборліва] рэч у сярэдзіне. Кожны раз, калі вы робіце нешта накшталт гэтага, ён страляе з просьбай і вяртае вам ўсе вынікі адразу. Такога роду неадкладнай зваротнай сувязі з'яўляецца тое, што зрабіў KAYAK дзіка папулярны таму што гэта сапраўды лёгка для мяне проста змяніць мой запыт і высветліць тое, што вакол пэўнага дыяпазону без таго, каб вярнуцца назад і наперад, туды-сюды, туды-сюды. Такім чынам, гэтыя ўсялякія рэчы, якія вы хочаце думаць пра тое, калі вы распрацоўваеце ваш сайт. Як я магу зрабіць гэта вельмі эфектыўна для маіх карыстальнікаў, каб прайсці праз усе, што яны працуюць на і каб дабрацца да іх канчатковай мэты як мага хутчэй? [Малая], і кропка Язэпа раней аб карыстачах, не абавязкова ведаючы, што яны хочуць, заснаваны на тым, што вы, хлопцы, зараз ведаем аб HTML і ў вас ёсць сцяжкі, радыё-кнопкі, абярыце меню, поля ўводу і да т.п., Як бы рэалізаваць паняцце выбару часу пачатку палёту? 

Які з гэтых розных механізмаў UI вы б выкарыстоўвалі? Калі вы проста ведаць колькасць HTML, які выкладаў да і вы ведаеце, ўваходы радыё-кнопкі, сцяжкі, расчыняюцца спісы, і поле ўводу, што б ваш натуральны выбар быў для выбару даты? [Студэнт] ўваход. >> Input. Ці, можа быць, нават расчыняецца з усімі датамі, дакладна? Так і з больш складанымі механізмамі карыстацкага інтэрфейсу, як гэта на левай баку, якія можна рэалізаваць, Вы можаце зрабіць гэты працэс нашмат больш інтуітыўна з дапамогай паўзунка таму што час бесперапынна, і людзі звычайна не думаюць у тэрмінах асобныя часткі. Добра. Апошняя рэч. Дзесяць эўрыстыкі юзабіліці. Усе рэчы, пра якія мы казалі, верагодна, падпадаюць пад адну з гэтых катэгорый. Калі вы ідзяце па гэтай спасылцы, якую сайтах будзе размешчана ў Інтэрнэце, Вы сапраўды будзеце мець магчымасць, як стварыць свой сайт, каб гэтыя эўрыстыкі на ўвазе, і гэтыя правілы вялікага пальца. Для вашых праектаў, тое, што я прапаную вам зрабіць для таго, каб праектаваць ваша прыкладанне лепш гэта рабіць папяровых прататыпаў у першую чаргу. Калі вы думаеце аб вашым дадатку, вельмі хутка накідаць, што вы хочаце, каб яна выглядала, як і пераканайцеся, што ўсе скрынкі размешчаны такім чынам, што з'яўляецца вельмі інтуітыўна для карыстальніка, каб выкарыстоўваць і нават паказаць гэтыя папяровыя прататыпы вашых сяброў і пачаць фокус-груп. Проста атрымаць 2 або 3 чалавекі разам і папытаеце іх проста націсніце на гэтыя папяровыя прататыпы, і паказаць ім новыя экраны, каб убачыць, калі яны сапраўды разумеюць, што адбываецца. 

Тое, што вы хочаце зрабіць, гэта даць ім задачу, матываваць гэтую задачу, і проста даць ім прыкладання і дазволіць ім выкарыстоўваць яго. Не даваць ім ўказанні далей. Вы хочаце, каб на самой справе даць ім ўзаемадзейнічаць з вашым прыкладаннем такім чынам, што дазваляе вам бачыць як яны будуць выкарыстоўваць яго, калі вы не стаялі побач з ім. І гэта вельмі важна. Гэта дасць вам шмат азарэнняў, каб людзі абыйсці канкрэтныя рэчы такім чынам, што я не збіраўся іх? Ці выкарыстоўваюць яны канкрэтныя механізмы карыстацкага інтэрфейсу на экране такім чынам, што гэта свайго роду Hacky? Я не збіраўся для іх зрабіць гэта такім чынам. І як толькі вы скончыце з гэтым, што вы хочаце зрабіць? Ваша парод дызайн, ці не так? Тое, што вы хочаце зрабіць, вы хочаце развіць, а затым зрабіць гэты працэс зноў і зноў. Так пакажыце яго сябрам, як толькі вы стварылі яго, пратэставаць яго, распрацоўкі, тэсціравання, распрацоўкі, тэставанні, ітэрацыі, далей і далей і наперад. Дызайн вельмі итерационный працэс у гэтым сэнсе. Вы на самой справе трэба нешта пабудаваць, а затым рэалізаваць рэчы аб ім што вы не разумееце да і вярнуцца назад і паляпшэння ад гэтага. Цяпер, што тычыцца развіцця частку, гэта тое, што Томі збіраюся паказаць Вам, пасля перапынку і як вы маглі б рэалізаваць нешта накшталт аўтазапаўнення такім чынам, даволі проста. [Малая] Як Томі ўсталёўвае тут, пытанне тады. Многія з першых сайтаў - і калі сказаў Язэп 1990-х гадоў стыль сайта, гэта было рэалізацыі, дзе, калі вы хочаце, каб выбраць час пачатку і заканчэння часу, шчыра кажучы, яшчэ ў дзень і нават на некаторых вэб-сайтах сёння, як вы робіце гэта вы бераце ў гадзіне язды ад расчыняецца спісу Вы выбіраеце хвілін ад расчыняецца, можа быць, вы выбіраеце AM, PM, а затым вы зробіце гэта яшчэ 3 разы. І так з 6 клікаў і, магчыма, некаторыя пракруткі карыстачу можа рэальна забяспечыць нейкую дату і / або час дыяпазон у гэтым сэнсе. 

Так вызначана аптымальным, і ўсё ж да гэтага часу мы не бачылі ніякіх выразных магчымасцяў У любым з моў, мы глядзелі на нешта сэксуальней як гэта слайдер час пачатку і час заканчэння. Але калі вы ўспомніце тыдзень 0, калі мы казалі аб Scratch, там таксама не было віджэтаў, якія толькі што зрабілі пэўныя рэчы. Вы сапраўды толькі што гэтыя асновы, такія як цыклы і ўмовы і да таго падобнае. Такім чынам, выгляд проста думаць вельмі абстрактна зараз, незалежна ад асаблівасцяў HTML, тое, што адбываецца на самой справе нешта накшталт гэтага часу пачатку і канца паўзунок часу? Калі я рухаю мышшу і я націскаю на гэтую маленькую моркву сімвал злева і пачаць перацягвання, праграмным, што гэта вы хочаце быць у стане ажыццявіць каб гэта адбылося? Якія пытанні, якія лагічныя выразы вы хочаце, каб мець магчымасць спытаць? Што адбываецца на самай справе? Сэмі? [Студэнт] Дзе пазіцыю курсора? >> Добра. Дзе пазіцыю курсора? Гэта было тое, у чым мы мелі патрэбу, каб выказаць назад у Scratch, ці быў ён заснаваны на месцы ці нават колер і да т.п.. Вы маглі б узгадаць вельмі коратка ў панядзелак былі ўсе гэтыя рэчы называюцца падзеі У свеце Web, і такім чынам, ёсць такія рэчы, як OnClick і OnKeyPress і OnKeyUp і OnMouseOver і onmouseout. Так разумею, што нават гэтыя рэчы, якія мы прымалі як належнае на вэб- з сайтаў, як Facebook і Gmail, нават калі вы не ведаеце, як вы, магчыма, ажыццяўляць, таму што няма нічога нават падобнага ў лекцыі або задач 7, разумееш, што з гэтым дакладна такія ж асновы, з HTTP і параметры GET і POST і, з асноўнай HTML уваходаў, якія мы разгледзелі да гэтага часу і ў адно імгненне з праграмнымі механізмамі, Томі збіраецца ўвесці Вы можаце пачаць, каб выказаць сябе так жа, як вы рабілі ў тыдзень 0 з вельмі інтуітыўна перацягвання. 

Такім чынам, з улікам сказанага, Томі MacWilliam і некаторыя новыя кавалачкі галаваломкі для нас для Web. Добра. Мяне клічуць Томі, і я буду казаць аб JavaScript. Проста агаворка: Я прытрымліваюся думкі, што наяўнасць з'яўляецца лепшым мовай праграмавання У цэлым увесь свет. Ёсць шмат людзей, якія са мной не пагодзяцца, але гэта проста дзіўна. Як толькі вы вернецеся да C, калі ў вас ёсць, каб напісаць C для іншага класа або іншых моў, Гэта проста вельмі хвалюе ва ўсіх нізкаўзроўневых дэталяў вы павінны ўгразнуць цалі Так што калі вы ніколі не сумаваць аб тым, як раздражняе C, каб напісаць, проста вярнуцца, напісаць некалькі JavaScript. Гэта нірвана. Вы будзеце адчуваць сябе нашмат лепш аб вашай дрэнны дзень. Шмат магіі JavaScript зыходзіць ад яго здольнасці маніпуляваць рэчамі , Якія ўжо знаходзяцца на старонцы. Калі мы пісалі нашу PHP скрыпты, яны выконваюцца на серверы, і ў рэшце рэшт, што PHP скрыпт, верагодна, выводзіць некаторыя HTML. Гэта HTML было адпраўлена кліенту, а затым, што гэта было. Калі PHP хацеў дадаць кнопку на старонцы, напрыклад, яна не можа гэтага зрабіць. Гэта павінна было б зрабіць цалкам новы HTML файл і адправіць яго ў браўзэр. З дапамогай JavaScript мы ведаем, што мы можам абнавіць рэчы, а яны ўжо на старонцы, і з-за гэтага мы можам даць значна больш імгненную зваротную сувязь, , Які будзе сапраўды палепшыць карыстальніцкі вопыт на нашым сайце. Толькі хуткае паўтор селектараў JavaScript. Мы ведаем, што калі мы загрузіць HTML-старонку, які будзе прадстаўлены ў DOM. 

DOM памятаеце менавіта гэта вялікае дрэва, дзе элементы звязаны ў гэтай вялікай іерархіі. Калі мы працавалі з базамі дадзеных у PSET 7, адна з першых рэчаў, якую мы павінны ведаць, як зрабіць, гэта запыты да базы дадзеных. У нас ёсць вялікая табліца карыстальнікаў, і часам мы проста хочам сказаць, "Я хачу толькі некаторыя з гэтых карыстальнікаў, якія адпавядаюць вызначаным умове." Сапраўды гэтак жа, калі ў нас ёсць DOM мы павінны нейкім чынам запыце ён. Нам патрэбны нейкі спосаб сказаць: "Я хачу, каб усе кнопкі, якія выглядаюць так »Ці ўсе выявы на старонцы." І гэтыя селектары дазваляюць нам гэта зрабіць. Так што хуткае рэзюмэ. Гэта першая тут, гэта # ўявіць, што гэта такое збіраецеся выбраць? Хто-небудзь памятае? [Неразборліва адказ студэнта] >> Так, менавіта так. Гэта будзе абраць элемент на старонцы, якая мае ідэнтыфікатар ўявіць. І так, што хэш-тэг кажа, што гэта селектар будзе працаваць з ідэнтыфікатарамі. Як наконт другой, гэта. Цэнтру, што будзе, што выбраць? Так. >> [Студэнт] класа. >> Менавіта так. Гэта цяпер збіраецеся выбраць па класе. Розніца паміж ID і класа тут, як правіла, ідэнтыфікатар павінен быць унікальным у любы прастору, вы шукаеце больш. Так што, калі вы шукалі па ўсёй вэб-старонкі, Вы сапраўды павінны мець толькі 1 элемент з, што некаторыя ID, таму ў дадзеным выпадку ўявіць. З класамі, з іншага боку, мы можам мець больш чым 1 элемент на адной старонцы з тым жа класам. Гэта можа быць карысна для кажучы, што я хачу, каб выбраць усе, што па цэнтры старонкі , А не толькі 1 рэч. 

І, нарэшце, гэтая апошняя тут крыху больш складана, Але што гэта будзе абраць з DOM? [Неразборліва адказ студэнта] >> Што гэта такое? [Студэнт] нічога, што тэг. >> У нас ёсць 2-х частках тут. Другая частка будзе сказаць, што я хачу, каб выбраць гэтыя пазнакі з тэгам ўводу, так што любы элемент, які з'яўляецца ўводу тэгаў. Але я не хачу, каб проста выбраць усе ўваходы таму што нешта накшталт кнопкі адпраўкі можа быць уваход і нешта накшталт тэкставага поля можа быць ўваход. Так што з гэтым квадратных дужках я кажу, я толькі хачу, каб выбраць тыя элементы, , Якія маюць тып тэксту. Дзесьці ў маім HTML-тэгі У мяне ёсць атрыбут тыпу, і значэнне гэтага атрыбуту павінен быць тэкст. Так як аб гэтай першай часткі тут? Першае слова гэтага селектара форме, то ў мяне ёсць прастора, а затым гэта ўваходных часткі. Што гэта рабіць, паставіўшы форму перад ім? Гэта будзе ў асноўным абмяжоўвае наш запыт. Гэта можа быць так, што ў нас ёсць некалькі ўваходаў на старонцы , Якія не з'яўляюцца нашчадкамі формы. Што гэта будзе зрабіць гэта будзе сказаць, што я толькі хачу ўваходных тэгаў, якія дзесьці над імі некаторыя бацькоўскі элемент формы. І вось такім чынам мы можам зрабіць іх больш іерархічныя запыты так што мы не проста павінны выбраць усе адпаведныя дадзеным селектары. Мы можам выгляду гранічнага аб'ёму гэтага запыту на нешта іншае. Так што цяпер мы ведаем, як абраць элементы на старонцы, Давайце пагаворым крыху аб AJAX. AJAX з'яўляецца ўсё яшчэ вельмі модна абрэвіятурай, што расшыфроўваецца як Asynchronous JavaScript і XML. Проста так атрымалася, што XML з'яўляецца толькі некаторыя з спосабаў прадстаўлення дадзеных. 

Такое страціў папулярнасць у апошні час, так што X у AJAX не выкарыстоўваецца ўвесь час. Увогуле, што AJAX дазваляе нам зрабіць, гэта HTTP запыты З кантэксту JavaScript. Калі мы знаходзімся ў нашым вэб-браўзэр, і мы навігацыі па старонках і пстрыкаем па спасылцы, што наш браўзэр будзе зрабіць, гэта HTTP запыт да таго, што мы націскаем спасылку. Але гэта не заўсёды ідэальныя, таму што калі гэта так, то як Давід казаў: Мы заўсёды павінны зрабіць карыстальнікі націскаюць кнопку Submit або націсніце спасылку для таго, каб што-небудзь здарылася, што збіраецца прыцягнуць запыту HTTP. Так што з AJAX мы можам зрабіць гэтыя запыты ад імя JavaScript. Гэта азначае, што кожны раз, калі карыстальнік ўзаемадзейнічае са старонкай або што-небудзь здарыцца, мы сапраўды можам зрабіць праграмны запыт у іншы файл PHP на нашым сайце або што-небудзь яшчэ, і атрымаць дадзеныя, што файл выплёўвае. Давайце паглядзім на прыкладзе AJAX. Гэта наша CS50 старонка фінансаў, з якім, мы спадзяемся, што некаторыя з нас знаёма. Калі мы паглядзім на HTML гэтай старонкі, мы бачым тут, што я дадаў некалькі рэчаў, адной з якіх я даў гэтую форму ID. Я ўжо казаў ID = "формаў-цытату". Я зрабіў гэта толькі таму, што ён збіраецца зрабіць гэта крыху лягчэй выбраць з DOM так як я магу проста зрабіць вельмі просты запыт. Што я хачу зрабіць тут, я хачу, каб выправіць некаторыя праблемы з CS50 фінансаў. Так што, калі мы ідзем у finance.cs50.net, кожны раз, калі я хачу атрымаць цытату, я павінен націснуць гэтую кнопку Get Цытата і што Атрымаць спецыяльная прапанова кнопку, а затым бярэ мяне ў іншую цэлую старонку. А калі я хачу яшчэ адной цытатай, трэба націскаць кнопку Назад, а потым увесці яго, Я атрымліваю цытаты, і я ударыў кнопку Назад. Гэта сапраўды не лепшы карыстацкі досвед. Хто б рэальна выкарыстоўваць сайт, калі гэта так павольна, каб цэны на акцыі? Такім чынам, што мы хочам зрабіць з AJAX, гэта выдаліць гэты крок ісці на асобную старонку Для прагляду вынікаў. 

Тое, што мы сапраўды толькі прасіць, што на самай справе невялікая цана, і гэта толькі вельмі малая колькасць дадзеных. Такім чынам, няма неабходнасці, каб я яшчэ цэлы HTML старонкі, Спампаваць новую партыю HTML, можа быць, спампаваць некаторыя іншыя выявы, некаторыя іншыя файлы CSS толькі для мяне, каб адказаць на гэты вельмі просты пытанне пра тое, колькі робіць гэтую кошту акцый. З дапамогай AJAX мы можам зрабіць гэта нашмат прасцей. Мы бачым тут, што я кампаноўкі ў файл JavaScript называюць quote.js. Давайце на самай справе адкрыць файл. Не там. Усе мае файлы JavaScript будуць размешчаны ў HTML так што вэб-браўзэр можа атрымаць да яго доступ. Тады ў нас ёсць асобны каталог тут для JavaScript, і цяпер вось quote.js. У верхняй часткі гэтага файла гэта кажа тут, што я хачу чакаць цэлую старонку для загрузкі перш, чым я спрабую рабіць. Чаму гэта неабходна? Аказваецца, што наступнае, што я збіраюся зрабіць, так гэта пачаць шукаць элемент , Што адпавядае некаторы селектар. Калі гэта будзе калі-небудзь JavaScript выконваюцца перад гэтым элементам загружаецца на старонку, Затым усе, што я спрабую зрабіць, гэта не будзе працаваць таму што я збіраюся паспрабаваць, каб выбраць тое, што пакуль не існуе. Такім чынам, гэтая лінія наверсе кажа, што я хачу, каб ты пачакай, пакуль усё не загружаюцца так што мы гарантавалі, што любыя элементы я шукаю на самай справе на гэтай старонцы. Гэты знак даляра азначае тут я выкарыстоўваю бібліятэку пад назвай jQuery. Гэта JQuery бібліятэкі дазваляе нам выкарыстоўваць гэтыя селектары, якія мы толькі што разгледзелі. Гаворачы $ пераходзячы затым у якасці аргументу гэтая форма # двукоссі, Я цяпер абраць гэтую форму, якую мы толькі зірнулі на. Цяпер у мяне ёсць уяўленне, што форма ў памяці як-то. 

На гэтым аб'екце зараз, гэта ўяўленне формы, Я зараз з дапамогай функцыі прызвалі. Што гэтая функцыя робіць гэта збіраецца далучыць апрацоўшчык падзей. Падзея, якое мы збіраемся праслухоўваць гэта падзея адпраўкі. Такім чынам, калі карыстач націскае кнопку Submit, што ці націскае Enter, гэта падзея будзе спрацоўваць. Пры выкліках у гэта, я зараз магу перавызначыць паводзіны па змаўчанні формы. Без гэтага JavaScript, форма прадставіць да таго, што PHP файлаў Мы выкарыстоўвалі ў тым, што дзеянне атрыбуту. Але замест гэтага, я зараз кажу, пачакай, пачакай, пачакай, я не хачу, каб вы на самой справе зрабіць гэта. Я хачу, каб гэта адбылося, перш чым пайсці і паспрабаваць прадставіць некаторыя файлы PHP. Цяпер тое, што я хачу рабіць? На дадзены момант я хачу выкарыстоўваць AJAX неяк загрузіць у тое, што цэны на акцыі. Першае, што мне трэба ведаць, гэта тое, што фондавы карыстальнік глядзіць уверх. Для гэтага я буду выкарыстоўваць іншы селектар. Гэта ўжо трэці селектар мы глядзелі раней. Гэта сведчыць аб тым, што я хачу пачаць гэтую форму элемента з ID формаў-цытаты. Потым недзе ўсярэдзіне, што формы там павінен быць уваход элемента , Які мае назву знака. Калі мы азірнемся на нашу HTML, мы ўбачылі, што ў нас быў уваход [імя = сімвал]. Гэта азначае, што гэта будзе выбраць, што тэкставае поле, якое карыстач уводзіць ст. Гэта добра. У нас ёсць тэкставае поле. Цяпер нам проста трэба ведаць, што ўнутры яго. Для гэтага мы можам назваць гэты метад тут, гэта. Вал, і гэта кажа, што я ведаю, што тэкставае поле ў вас ёсць. Я хачу, каб ты сказаў мне, што гэта, уведзены карыстальнікам у гэтае поле. Цяпер у нас ёсць радок называецца знак, які роўны любы карыстальнік ўвялі цалі Гэта добра. Мы можам выкарыстоўваць гэтую радок зараз, каб зрабіць нашу просьбу. Гэта новая функцыя тут, гэта $, акрамя мы больш не будзе выбару элементаў, Мы збіраемся выкліку розных функцый, які прадастаўляецца нам JQuery. Гэтая функцыя AJAX з'яўляецца тое, што на самой справе адбываецца, каб зрабіць гэты запыт HTTP. Такім чынам, мы павінны сказаць ёй некалькі рэчаў. Першае, што мы павінны сказаць гэта функцыя, дзе я хачу просьбай пайсці. Дзесьці ў маім праекце ў мяне ёсць гэты файл ўнутры HTML каталог з назвай quote.php. Я магу атрымаць доступ да гэтага файла, мы бачылі, менавіта так, калі я іду на лакальны / quote.php. 

Я хачу, каб мае JavaScript, каб зрабіць запыт на гэтай старонцы. Які запыт цяпер? Мы бачылі раней, што форма мае гэты метад = "паведамленне" атрыбут, і гэта азначае, што ён збіраецца зрабіць POST запыт, так што не збіраецца штосьці ў URL, а не GET запыт, які будзе проста звольнены, калі мы проста звярталіся старонкі з вэб-браўзэра, напрыклад. Цяпер, калі мы сказалі, што я хачу зрабіць запыт HTTP POST на старонцы размешчаны на quote.php. Калі мы даведайцеся, памятаеце, што мы маглі атрымаць доступ да элементаў ўводу ўнутры гэтай формы з $ _POST зменных. Да гэтага часу ў гісторыі, якую мы, уласна, не даслалі ніякіх дадзеных пакуль няма. Мы толькі што сказалі, што мы робім запыт AJAX і вось тып запыту мы робім. Цяпер нам трэба на самай справе адправіць некаторыя дадзеныя на старонку. Для гэтага мы можам выкарыстоўваць гэта ўласцівасць, званае дадзеных. Значэнне гэтага ўласцівасці на самай справе асацыятыўны масіў. Прычынай гэтага з'яўляецца гэта дазваляе нам накіраваць больш за ўсё ў 1 порцыі дадзеных. Вось чаму ў нас ёсць гэтыя фігурныя дужкі тут ўкладзена ў гэтыя іншыя фігурныя дужкі. Ключы ў гэтых асацыятыўных масіваў будзе тое ж самае як тыя атрыбуты імя ў нашай элементы формы. Гэта азначае, што калі я пасылаю па ключавых знакам, гэта азначае, што мая старонка PHP можа атрымаць доступ да гэтых дадзеных з $ _POST [сімвал] гэтак жа, як мы рабілі гэта раней, калі мы былі адпраўкай формы. А цяпер фактычных дадзеных мы хочам паслаць будзе значэнне ўнутры гэтай асацыятыўны масіў. 

Мы захавалі гэты тэкст ў зменнай знак, і таму мы пасылаем па цяперашні час ключавым сімвалам і значэнне любы карыстальнік ўвялі цалі Цяпер мы зрабілі гэты запыт HTTP, наш PHP файл выконваецца, і ён збіраецца адправіць некаторыя дадзеныя назад цяпер да кліента, які толькі што зрабіў гэтую просьбу. Цяпер мы павінны рэагаваць на ўсё, што афіцыянт сказаў нам. Для гэтага ў нас ёсць гэта апошняе ўласцівасць называецца тут поспеху. Значэнне гэтага поспеху ключ на самай справе будзе функцыя, і гэта адна з сапраўды цікавых рэчаў можна зрабіць з дапамогай JavaScript. Не толькі ў вас ёсць цэлыя масівы або як значэнне ўнутры асацыятыўны масіў, Мы таксама можа мець функцыю. Так, кажучы, поспех, гэта мой ключ. Талстой кішкі кажа тут ідзе значэння, і ў цяперашні час значэнне гэтага на самай справе з'яўляецца функцыяй. Таму мы не павінны даць гэтай функцыі імя само па сабе. Мы можам толькі сказаць, што гэта будзе некаторая функцыя. Гэта зойме 1 аргумент. У якасці аргументу гэтай функцыі будзе усё, што сервер адправіў нас зваротна з запыту. Гэтак жа, як калі наш браўзэр робіць запыт, сервер пасылае нешта наўзамен і браўзэр адлюстроўвае яго, У кантэксце AJAX мы проста зрабілі запыт, сервер паслаў нешта наўзамен, і зараз мы, што прадстаўлена ў выглядзе радка. З гэтай радком я б хацеў, каб убачыць, што на старонцы. Для гэтага я буду мець адну апошнюю селектары. Я хачу, каб выбраць элемент з ID цане. Гэта проста пустыя спраў, якія я стварыў на старонцы, і я хачу, каб усталяваць змесціва гэтага DIV быць любы сервер адправіў нас назад. Я на самой справе змена quote.php няшмат. 

Замест выкліку візуалізацыі і рэндэрынгу некаторыя старонкі, quote.php цяпер проста збіраецца раздрукаваць кошту акцый у выглядзе радка. Так што калі вы былі на самай справе наведаць старонку, вы б проста бачыць, што невялікія радкі за ўсё, што кошт акцыі. Апошняе, што нам трэба зрабіць, тут проста пераканайцеся, што гэтая функцыя вяртае хлусня. Гэта сведчыць аб тым, што калі я ўнутры апрацоўніка падзеі і што апрацоўшчык падзеі вяртае хлусня замест вяртання праўда, гэта азначае, што я не хачу першапачатковае падзея, каб страляць. У гэтым выпадку, калі б мы не мелі JavaScript, і мы прадставілі форму, наш вэб-браўзэра будзе сказаць: "Я збіраюся адправіць гэтыя дадзеныя разам" і яны збіраюцца паслаць вас на іншую старонку. Паколькі мы выкарыстоўваем AJAX ў цяперашні час, няма неабходнасці адпраўляць карыстальніка на іншую старонку. Мы проста збіраемся для адлюстравання вынікаў дынамічнага на гэтай жа старонцы. Мы сапраўды не хочам, каб яны нікуды ісці, і я хачу, каб застацца на той жа старонцы. Так што, вяртаючыся ілжывым, мы гарантуем, што форма не зробіць гэта за нас. Давайце зірнем на тое, што гэта на самай справе выглядае. Нашы цытаты старонкі выглядае аднолькава. Дазвольце мне падцягнуць інспектар сюды, каб мы маглі бачыць, што адбываецца. Зрабіць гэта крыху менш, велізарныя. Памятаеце, што калі мы адкрываем ўкладку Сетка, гэта дзе мы можам бачыць усе запыты HTTP што адбываецца на старонцы. 

Для сімвала дазвольце мне ўвесці AAPL і націсніце Атрымаць спецыяльная прапанова. Цяпер мы ўбачылі, што доля Apple, варта некаторы колькасць даляраў толькі што з'явіўся на старонцы, але URL не зменіцца. На самай справе, тут HTTP запыту, які мы толькі што зрабілі. Мы зрабілі POST запыт quote.php. Гэта мае сэнс. Гэта тое, што сервер адправіў нас назад. Гэта ўжо не гэтай гіганцкай HTML дакумента з выявамі і да таго падобнае, гэта проста радок тэксту, а затым мы проста адлюстроўваюцца радкі тэксту. Калі мы вернемся да загалоўках і паглядзець, што мы на самай справе пасланы ўнутры гэтага запыту HTTP, Мы бачым тут, што мы паслалі па ключавых сімвалам і значэннем AAPL, якіх з'яўляецца тое, што карыстач увёў цалі Гэта добра, але гэта ўсё роўна трохі раздражняе. Я ўсё яшчэ павінен націснуць гэтую кнопку, каб атрымаць каціроўку акцый. Мы занятыя людзі, і ў нас няма часу, каб націснуць кнопку. Google зразумеў, што гэта некаторы час таму, калі яны ажыццяўляюцца Google Instant. Што Google Instant робіць гэта, як вы друкуеце ён проста пачынае паказваць вынікі для вас так што вам не прыйдзецца турбавацца аб нават націснуць Search. На самай справе, пацешная гісторыя звязана з гэтым. Як толькі Google Instant выйшаў, людзі накшталт: "Вау, гэта супер дзіўным". "Гэта так выдатна". І студэнт ўніз у Стэнфардскім які быў 19 у той час, Аб гэтым сайце пад назвай YouTube Instant. Усе імгненных YouTube робіць гэта эфектыўна шукаць YouTube імгненна. Такім чынам, замест таго, каб пайсці на YouTube.com і націсніце Search, калі я пачынаю набіраць у YouTube імгненных нешта накшталт CS50, мы маглі бачыць тут, што яна спрабуе на павольнае падлучэнне да Інтэрнэту запоўніць гэтыя вынікі жыць. Каб гэта зрабіць, мы сапраўды можам зрабіць вельмі просты мадыфікацыі нашага файла quote.js. Цяпер мы мацавання гэта падзея, калі формы. Мы не хочам, каб карыстач сцвярджае, што форма больш, так што давайце замест агонь гэтай падзеі кожны раз, калі карыстальнік націскае клавішу. Для гэтага давайце спачатку змяніць падзеі з прадставіць KeyUp. Гэта азначае, што, не чакаючы выглядзе прадставіць кожны раз, калі націснутая клавіша, нешта здарыцца. Ён больш не мае сэнс прыкласці гэтую KeyUp падзей у цэлым выглядзе. Мы сапраўды клапоцяцца толькі пра тое, што акно пошуку. 

Каб выбраць, што зараз мы можам змяніць гэта, каб быць, а не форма двукоссі, Форма двукоссі, і мы павінны ўваход (тып = тэкст) або мы маглі б сказаць (Name = знак) - усё, што мы хочам. Зараз ёсць яшчэ адна рэч, якую мы павінны зрабіць. Памятаеце, тут, калі мы сказалі вяртанне ілжывым Мы сказалі, што мы не хочам, каб падзеі па змаўчанні, каб страляць. Але так ужо здарылася, што, калі мы адключаем, што цяпер, усё, што мы ўвесці не будзе адлюстроўвацца ў браўзэры больш таму што гэта было б па змаўчанні не ўводзіць у тэкставае поле. Мы больш не жадаем, каб перавызначыць, так што давайце разбурыць гэтае вяртанне ілжывым. Калі мы захаваем, што і перазагрузіце старонку, цяпер, калі я пачынаю набіраць AAPL Вы ўбачыце, што кошт акцыі ў ніжняй тут завяршаецца аўтаматычна. Дык вось CS50 фінансаў Instant. На самай справе пацешная гісторыя пра імгненных YouTube з'яўляецца тое, што студэнт проста нейкая напісаў гэта як 1-ночы праекта, і на наступны дзень ён быў запрошаны на працу ў YouTube генеральны дырэктар. Так жа проста, як гэта, вы CS50 студэнтаў, вашы канчатковыя праекты вы можаце атрымаць працу на YouTube. Нешта ў гэтым родзе гэта сапраўды класная ідэя для канчатковага праекта, ці не так? У нас былі некаторыя існуючыя функцыі, якія мы хацелі інтэграваць с. Мы паляпшэння карыстацкага досведу трохі, і раптам пошуку нешта на YouTube імгненных можа быць нашмат прасцей чым шукаць яго на рэгулярнай YouTube. Дык вось AJAX ў двух словах. 

У прыкладах, што Іосіф быў паказваюць, мы бачылі шмат autocompletes, і тыя, autocompletes, сапраўды, вельмі зручна, таму што мы не павінны памятаць - Напрыклад, калі вы не памятаеце цану акцый для кампаніі Apple і мы проста ведаем, што гэта аа нешта, а не проста казаў мне, "Доля гэтая рэч каштуе столькі-то грошай" Я накшталт як ведаем, што акцыі пачынаюцца з аа. Мы можам зрабіць гэта сапраўды добра з пачатковай загрузкі бібліятэкі, якая ўжо ўключана Усярэдзіне CS50 фінансаў. Калі вы прыйшлі сюды, каб тэгі JavaScript і пракруціць ўніз да TYPEAHEAD, гэта проста добры убудова, які хтосьці ўжо пісаў для нас, і мы можам лёгка выкарыстоўваць яго функцыянальнасць, як гэта. Я набраў у і вось спіс некаторых дзяржаў, якія пачынаюцца з A. Давайце выкажам здагадку, што я думаю, што гэта сапраўды выдатна, і гэты час для мяне, каб уключыць гэта на маёй старонцы. Аказваецца, што гэта вельмі, вельмі простае. Давайце пяройдзем сюды, каб quote3.js. Мой файл выглядае крыху па-іншаму. Тут, унізе ўсе мае рэчы AJAX тое ж самае. Я хачу, каб загрузіць дадзеныя аб запасах без таго, каб перайсці да іншай старонцы. Але цяпер я хачу выкарыстоўваць гэты убудова. Bootstrap дакументацыі мае вялікае прыкладаў таго, як менавіта я магу гэта зрабіць. Я хачу сказаць: "Вось ўваходу, што я хачу аўтазапаўненне" і Я буду называць гэтую функцыю называюць гарачых клавіш, і што збіраецца апрацоўваць ўсе TYPEAHEAD рэчы для нас. Гэта будзе ініцыялізаваць спіс, ён будзе рабіць усё наша фільтрацыі. Адзінае, што ён павінен ведаць, якія дадзеныя мы autocompleting далей. Так я даведаўся пра гэтую кнопку, проста чытаючы дакументацыю, і, гледзячы на ​​прыклады. Калі я даю яму ключ крыніцы, значэнне гэтага ключавога толькі некаторыя масіў, што я хачу, каб аўтазапаўненне. Гэтая пераменная прыйшла з гэтай другой файла. Я адкрываю symbols.js. 

Гэта symbols.js менавіта гэта вельмі, вельмі вялікі масіў, які змяшчае радка ўсіх гэтых знакаў акцый з NASDAQ. Калі я хачу, каб вярнуцца да HTML, так jharvard, віртуальных даменаў, globalhost, HTML, шаблоны, quote_form. Так што цяпер называецца quote3.js, дазвольце мне змяніць файл JavaScript я ў тым ліку тут. Цяпер у мяне ёсць quote3.js, так што я збіраюся загрузіць у тым, што асобны файл JavaScript, той, які мае, што Bootstrap аўтазапаўнення. Цяпер, калі я скачу назад у браўзэр, перазагрузіце старонку, і я пачынаю набіраць А.А., вось і мой аўтазапаўнення. І гэта было сапраўды так проста. Я быў 1 радок кода, які проста сказаў: "Вось што я хачу аўтазапаўненне" І раптам я гэта вельмі, вельмі добрая функцыянальнасць не так ужо шмат намаганняў на ўсіх. Як вы распрацоўваеце вэб-сайтаў і асабліва адным баку канцы рэчаў, Вы збіраецеся знайсці гэта так шмат. Ёсць шмат, шмат, шмат сапраўды класных бясплатных бібліятэк там , Якія робяць яго супер лёгка рабіць такія рэчы. Ці можна думаць аб любых недахопах проста autocompleting на гэтым вялікім спісе сімвалаў? Што можа быць тое, што гэта не самы лепшы з такім падыходам? Так. >> [Студэнт] час, калі ў вас ёсць шмат [неразборліва] Так. Цяпер мы Спампоўваючы вялікі файл JavaScript і там шмат знакаў. І таму, калі ў нас ёсць тоны рэчаў, гэта магло выглядзе павелічэння латэнтнасці не толькі пошук але і загрузка сам файл. Вялікі. Што-небудзь яшчэ? Зараз няма ніякіх рэальных пачуццё актуальнасці. Калі я ўводжу, кампаніі, якія паказваюць тут Не можа быць найбольш папулярных кампаній, якія пачынаюцца з A. 

Перш чым дабрацца да Apple, гэта можа заняць некалькі знакаў, каб знайсці тое, што я шукаў. Гэта аўтазапаўнення не мае гэтага пачуцця актуальнасці. Гэта проста будзе сказаць: "Усё, што адпавядае Я іду, каб убачыць". Замест гэтага, я хацеў бы, каб хоць неяк інтэграваць некаторыя актуальнасць у маім пошуку. Калі я іду сюды, каб Yahoo! Finance, finance.yahoo.com, Калі я стараюся, каб увесці знак на старонцы Yahoo! фінансаў і я пачынаю набіраць GOOG, у мяне ёсць добры спіс рэчаў. Відавочна, гэта выглядае як Yahoo! Finance робіць нешта больш разумнае тут. Яны маюць некаторы стаўленне і ў іх таксама ёсць дадатковая інфармацыя як назва акцыі. Гэта тое, што я не магу атрымаць толькі з маёй складзе спіс знакаў. Я хачу гэтага, і таму я збіраюся ўзяць яго. Каб зрабіць гэта, давайце зробім некалькі рэчаў. Давайце спачатку адкрыць інспектару на гэтай старонцы таму што мы бачылі, што гэтая старонка не перазагружаючы на ​​ўсіх, так што гэта магчыма, з выкарыстаннем AJAX неяк па пагрузцы яго дадзеныя. Мы можам высветліць, якія дадзеныя ён загружаецца. Калі я націскаю на гэтай ўкладцы Сетка, яны будзе ўсё запыты, якія пачынаюць быць звольнены. Цяпер, калі я набіраю ў слізі, мы можам бачыць, што я толькі што атрымаў новы запыт HTTP. Гэта, напэўна, дзе гэтыя дадзеныя адкуль. Вядома ж, калі я гляджу на гэты URL, які з'яўляецца трохі дзіўным імем, мы бачым, што гэта менавіта тое, дзе Yahoo пасылае ад яго дадзеныя. 

Я стварыў асобны файл пад назвай suggest.php, што вельмі падобны па духу да функцыі пошуку. Гэта ў асноўным збіраецца зрабіць запыт у адрас Yahoo, вярнуць некаторых дадзеных, і адправіць яго назад да мяне. Цяпер, замест таго, каб выкарыстаць гэты вялікі, велізарны спіс знакаў, Я магу выкарыстоўваць Yahoo, добрыя рэчы актуальнасць, і я не трэба запампоўваць, што масавыя файл JavaScript. Я толькі збіраюся знесці на самай справе адпаведныя сімвалы акцый. Давайце пяройдзем да гэтых. Такім чынам, HTML, JS. Мы цяпер у quote4. Цяпер мы больш не выкарыстоўваецца, што вялікі спіс файлаў JavaScript. Але ёсць невялікая від дызайну праблема. Мы ўжо казалі пра тое, што ў AJAX з'яўляецца асінхронным. Гэта азначае, што, калі я раблю запыт AJAX, так прама тут, на лініі 8, гэта дзе мае AJAX запыт на самай справе звольнілі. Скажам, цяпер у мяне ёсць некаторы код сюды, што збіраецца рабіць некаторыя рэчы хацеў папярэдзіць карыстальніка ці змяніць нешта на старонцы. Што не адбудзецца гэта толькі браўзэр, не збіраецца чакаць гэтую просьбу працягнуць да прыходу ўніз і націснуць гэтую лінію. Гэта асінхронная частку. Ён збіраецца зрабіць гэтую просьбу і сказаў: "Кожны раз, калі вы скончыце, «Вярнуцца і выклікаць гэтую функцыю, што я сказаў вам тэлефанаваць ўнутры поспех". Гэта азначае, што мы не можам проста запампаваць усе акцыі загадзя. Мы павінны зрабіць запыт і чакаць чагосьці вярнуцца. Гэта азначае, што і раней, мы маглі б проста сказаць Bootstrap, "Вось спіс рэчаў, якія я хачу, каб вы аўтазапаўненне". Мы больш не можам гэтага рабіць, таму што мы не ведаем, чаго мы хочам на самай справе аўтазапаўнення далей. На шчасце, Bootstrap думаў пра гэта, таму што гэтыя разумныя хлопцы там, і яны фактычна далі нам іншы спосаб загрузіць гэтую TYPEAHEAD убудова. Перш, значэнне гэтага ўласцівасці крыніцы Менавіта гэтая вялікі масіў рэчаў, каб аўтазапаўненне. 

Цяпер ўласцівасці крыніцы на самай справе з'яўляецца функцыяй, і мэта гэтая функцыя высветліць, што рэчы для аўтазапаўнення на гэта. Як гэта адбываецца, каб зразумець гэта яна збіраецца спытаць Yahoo! Finance што лепшыя рэчы для аўтазапаўнення ёсць. Для гэтага я збіраюся зрабіць вельмі падобныя AJAX запыт. Я буду прасіць гэтую старонку ў suggest.php. Я хачу адправіць па знаках да гэтага часу. І цяпер мой поспех, Bootstrap дакументацыі сказаў мне, што для таго, каб запоўніць гэты спіс рэчаў, усё, што мне трэба зрабіць, гэта перадаць гэты масіў цяпер да функцыі зваротнага выкліку. Але пачакайце хвіліну. Калі гэта павінен быць масіў і AJAX адпраўляе мяне назад тэкст, як гэта магчыма? Гэта ўводзіць новы спосаб абмену дадзенымі называецца JSON. У гэтым выпадку мы не проста адправіўшы назад простыя радкі тэксту. Цяпер мы маем справу з больш складанымі спіс знакаў акцый. Гэтыя сімвалы акцый можа таксама ўключаць такія рэчы, як назва кампаніі або бягучай цэны. Толькі з дапамогай вялікага доўгую радок, якая не адфарматаваны ў любой прадказальным чынам Не будзе лепшы спосаб атрымаць гэтыя дадзеныя з сервера Yahoo да мяне такім чынам, я магу лёгка зразумець. JSON гэта тэхналогія, якая выкарыстоўвае ў сваіх інтарэсах, як мы ствараем асацыятыўныя масівы ў JavaScript. Гэта вельмі падобна JavaScript асацыятыўны масіў, а на самай справе, гэта таму, што яна ёсць. JSON каштуе для абазначэння аб'екта JavaScript. Гэта, у асноўным узгоднены фармат для перадачы дадзеных туды і назад. Вось гэты аб'ект JSON JSON ці гэта асацыятыўны масіў пасылае мяне некаторыя дадзеныя аб курсе. 

Ключамі гэтага масіва з'яўляюцца такія рэчы, як, вядома, што мае значэнне CS50, і тут мы бачым, што ў мяне можа быць значэнне, якое з'яўляецца масівам. Я не павінен рабіць такія рэчы, як разабраць радкоў і шукаць коскі і рабіць вар'яты рэчы, як, што. Таму што гэтая абвешчаны ў гэтым фармаце JSON, JavaScript і JQuery ўжо ёсць функцыі для пераўтварэння радкі , Які выглядае наступным JSON ў фактычных JavaScript асацыятыўны масіў што мы можам працаваць. Зрабіць гэта так жа проста, як кажуць, што больш не з'яўляецца гэты файл, suggest.php, адправіўшы мяне проста радок тэксту, Але я ведаю, што гэта збіраецца пасылаць мяне назад JSON. Гэта азначае, што JSON могуць быць ператвораныя ў JavaScript асацыятыўны масіў. І Jquery, я б хацеў, каб вы зрабіць гэта для мяне. Гэта азначае, што гэты адказ параметрам тут, гэта ўжо не проста радком. Таму што мы сказалі JQuery, што тут адбываецца некаторы JSON, JQuery будзе дастаткова разумная, каб сказаць: "Ты хацеў JSON?" "Я збіраюся ператварыць гэта ў асацыятыўны масіў для вас". Давайце на самай справе паглядзіце на ўкладцы Сетка, як толькі мы quote4.js. Мы зменім гэта і перазагрузіце старонку. Цяпер я збіраюся набраць у-раз. Я зрабіў некалькі запытаў, каб suggest.php, але цяпер гэты адказ, а не проста радок, гэта JSON. Так што ў мяне адкрытая фігурныя дужкі кажа: "Вось ідзе асацыятыўны масіў". 

Першы і адзіны ключ гэтага асацыятыўны масіў называюць знакамі, а то вось масіў ўсіх адпаведных сімвалаў прыходзіць цяпер з Yahoo! Finance, а не ад гіганцкага спісу. Вось як я магу проста запоўніць гэты убудова аўтазапаўнення з некаторымі дадзенымі, якія не зыходзіць ад мясцовых файл, які ўжо прадвызначаны а ад чагосьці іншага. Атрымліваецца, што мы сапраўды можам скарыстацца тэхналогіяй называецца JSONP, або JSON з дадаткам, што дазволіць ліквідаваць гэтую suggest.php пасярэднікаў. Але замест таго каб рабіць гэта, давайце замест гэтага зірнем на тое, як я магу палепшыць гэта нават больш. Мне вельмі падабаецца TYPEAHEAD загрузніка. Гэта сапраўды добры. Але мы атрымліваем добра JavaScript, і мы хочам, каб збольшага гэта рабіць самім, Можа быць, зірнем на тое, што гэты убудова можна было б рабіць. Давайце больш не выкарыстоўваю, што TYPEAHEAD рэч, і давайце паспрабуем зрабіць гэты спіс прапанаваных акцый саміх сябе. Тут, у quote6.php мы збіраемся пачаць такім жа чынам. Кожны раз, калі хтосьці тыпы нешта, мы хочам зрабіць запыт AJAX. Гэта падобна на наш арыгінальны CS50 фінансаў Instant. Замест таго, каб запыт на quote.php, Мы цяпер робіць запыт на той жа файл, як і раней, гэта suggest.php, якія толькі збіраюцца здабываць дадзеныя з Yahoo! Finance. 

Зноў жа, мы ўсё яшчэ чакаем JSON, але з тых часоў TYPEAHEAD не робіць гэта для нас, мы таксама павінны паслаць па значэнні, якое знаходзіцца ў бягучым тэкставага поля. Цяпер мы ведаем, што спытаць Yahoo! Finance для, і цяпер вось функцыі, якія мы хочам выканаць пасля завяршэння запыту. Мы не маем убудова, каб зрабіць спіс для нас, дык вось, дзе мы на самай справе збіраемся пабудаваць спіс прапаноў. Каб зрабіць гэта, шмат што падабаецца ў PHP мы аб'яднаныя гэтых вялікіх радкоў HTML Затым мы надрукавалі іх, мы можам зрабіць сапраўды такі жа рэччу ў JavaScript. Спачатку мы збіраемся пачаць гэты радок называюцца прапановы, і гэты радок проста будзе ўтрымліваць некаторыя HTML. Мы хочам, каб быць спіс рэчаў, так што мы збіраемся пачаць з гэтага спісу тэгаў, і зараз мы збіраемся перабраць усе знакі, якія былі вернутыя назад да нас. Памятаеце, таму што мы сказалі Тып дадзеных: 'JSON', гэта не радок. Гэта ўжо масіў для нас. Вось гэта сапраўды крута. Мы можам проста сказаць: "Я хачу, каб дадаць элемент спісу". Мы змесцім яго ўнутр элемента ў бок, што, мы дамо яму клас прапаноў, таму мы ведаем, што гэта такое, а цяпер вось знак таго, што мы вярнуліся з Yahoo! Finance. 

Пасля таго як мы стварылі элемент для кожнага з сімвалаў мы атрымалі назад, Мы проста хочам, каб закрыць спіс. Так што цяпер прапановы ўяўляе сабой гэты маленькі фрагмент HTML што калі пакласці на старонцы будзе спіс рэчаў, якія мы шукаем. Зараз давайце на самай справе пакласці, што на старонцы. Для гэтага я на самой справе стварыў яшчэ адзін пусты спраў, і я даў яму ID прапаноў. Многае, як мы ўсталявалі ўтрыманне спраў, што будзе адлюстроўвацца кошт акцый дадзеных, зараз мы проста хочам, каб усталяваць змест гэтага DIV да таго, што гэты радок , Які змяшчае гэтыя сімвалы. З дапамогай гэтага метаду HTML, гэта прапановы зменнай, гэты радок з'яўляецца радком HTML. Я хачу, каб вы, што HTML і пакласці яго ўнутр спраў называецца прапаноў. Мы толькі прыкладаемай нешта DOM цяпер. Мы дадалі некаторыя новыя элементы ў DOM, што мы можам зараз адлюстроўваюцца на старонцы. Давайце паглядзім, як гэта выглядае. Калі мы загружаем у quote6 і цяпер мы вяртаемся, Цяпер, калі я пачынаю набіраць AAPL, у нас больш няма, што Bootstrap аўтазапаўнення, але цяпер у нас ёсць гэты спіс, які мы зрабілі самі. Гэта крыху больш гідкі, чым крыху Bootstrap TYPEAHEAD, напрыклад, але гэта дазволіць нам зрабіць яшчэ адну рэч. Калі мы шукалі ў гэтым Bootstrap убудова, мы бачылі, што, калі мы autocompleted, адзін з аўтазапаўнення значэнняў было AAPL. Гэта можа быць не такім карысным. Як карыстальнік, я не мог адразу распазнаць ўсе знакі акцый. Тое, што я, верагодна, больш верагодна, прызнаюць з'яўляюцца фактычныя імёны кампаніі. Такім чынам, не было б сапраўды карысна, калі б замест таго, каб гаварыць AAPL гэта сказаў нешта накшталт Apple, Таму што мы пракату гэтым самі, мы можам вельмі лёгка зрабіць. Давайце адкрыем наш апошні файл цытаты тут, так quote7. 

Тое ж самае. Я толькі што стварыў яшчэ адзін PHP файл, які будзе вяртацца да нас больш, чым проста сімвалы. Гэта таксама дасць нам назад імёнаў кампаніі. І таму мы робім тое ж самае. Мы робім запыт AJAX. Пасля завяршэння запыту, мы збіраемся выканаць гэтую функцыю тут, і гэтая функцыя будзе пабудаваць вялікі радкі элементаў. Але розніца ў тым, што каштоўнасць гэтых спісах ўжо не проста сімвал, Цяпер гэта імя. Такім чынам, у нас ёсць адна невялікая праблема. Калі мы выкарыстоўваем наш пошук, мы павінны нейкім чынам перадаць яе сімвалам. Мы не можам прайсці пошуку нешта накшталт Microsoft Corporation. Мы павінны перадаць яго MSFT. Калі мы пішам HTML, у нас ёсць шмат добрых ўбудаваных атрыбутаў. Магчыма, звязана з яго HREF або класа. Але што нам сапраўды трэба зараз для кожнага з гэтых спасылак мець запас сімвал, звязаны з ім. Там няма ўбудаванага HTML атрыбут сімвал акцыі, Але, на шчасце, HTML5 дазваляе нам ствараць нашы ўласныя атрыбуты, каб быць усё, што мы хочам. Гаворачы дадзеных сімвалам, я прадставіла новы атрыбут , Імя якога я толькі што зрабіў, і гэта добра, таму што я апярэдзіў яго з гэтымі дадзенымі. Мы збіраемся захоўваць ўнутры ёсць сімвал з фондавага цяпер. Што гэта азначае, што нават калі мы адлюстравання значэння назвы кампаніі Унутры нашага аўтазапаўнення, мы ўсё яшчэ памятаючы знак , Звязанае з кожнай кампаніяй. Тое, як мы робім, што знаходзіцца ўнутры гэтага элемента. Такім чынам, гэта азначае, што мы павінны зрабіць яшчэ адно змяненне. Калі мы націскаем гэта цяпер, нам трэба на самай справе скарыстацца сімвалам атрыбутам , А не толькі яго кошт. Калі рэзервовае капіяванне, якое мы надаём апрацоўшчык падзеі для прапаноў. Кожны раз, калі адно з гэтых прапаноў націснутая зараз, я хачу нешта зрабіць. Што я хачу зрабіць, гэта змяніць значэнне гэтага поля ўводу. Цяпер я хачу ўсталяваць гэтую ж функцыю знач. 

Такім чынам, без якіх-небудзь аргументаў гэтая функцыя Val вяртае вам тое, што ўжо ў тэкставае поле, але калі вы даеце яму радкі, ён збіраецца ўзяць гэтую радок і змясціць яго ў тэкставае поле. Я выбраўшы яго ў тэкставае поле такім жа чынам. Гэта імя з'яўляецца сімвалам ўнутранай формы цытаты. Цяпер я пасылаю яго значэнне атрыбуту дадзеных сімвалам. Гэтая рэч тут новага, гэта $ (гэта). Што гэта азначае з'яўляецца элементам, які быў абраны. Мы бачым тут, што мы не падключаны падзеі пстрычкі да кожнага элементу з класам прапанову індывідуальна. Хутчэй, мы набліжаемся да гэтага крыху па-іншаму. Замест гэтага мы гаворым, калі нешта ўнутры гэтага DIV прапановы, , Якія памятаюць гэта проста кантэйнер для гэтага спісу, калі нешта ўнутры гэтай спраў націснутая і мае клас прапанову, Я хачу, каб гэта падзея да пажару. Па сутнасці, гэта азначае, што мы можам зрабіць, гэта мы можам выкарыстоўваць гэты ж апрацоўшчык падзеі для ўсіх рэчаў у спісе. Так што мы не павінны мець адзін апрацоўшчык падзей для першага элемента і іншай апрацоўшчык падзеі для другога элемента. Мы можам замест гэтага кажуць: "Я хачу той жа апрацоўшчык падзеі прымяніць да ўсяго ў маім спісе". Але мы павінны нейкім чынам даведацца, які элемент быў абраны. Гэта "гэта" ключавое слова ўяўляе менавіта гэта. Гэта аб'ект, які быў проста націснуў карыстальнік. Калі б я проста націснуў на трэцюю спасылку, гэта ўяўляе элемент, што 3 спасылкі, Гэта азначае, што я магу атрымаць яго атрыбут, сімвал дадзеных, якіх мы ведаем павінен утрымліваць сімвал, звязаны з кампаніяй, я проста націснуў. Калі мы вернемся назад да нашага фінансаў старонкі Мы бачым зараз, што як толькі я пачынаю ўводзіць нешта накшталт MSFT, Мы больш не атрымліваеце толькі знакі акцый, Мы цяпер атрымліваю рэальных кампаній. Але калі я націскаю на адну з гэтых кампаній, мы бачым, што мы на самай справе запаўнення поле не з назвай кампаніі але з тым, што захоўваецца ўнутры гэтых дадзеных атрыбутаў. І таму, калі я на самай справе праверыць адзін з гэтых элементаў пстрыкнуўшы правай кнопкай мышы і націснуўшы кнопку Праверыць элемент, мы можам сапраўды ўбачыць, як гэта выглядае. 

Памятаеце, што гэта тое, што мы стварылі ўнутры гэтага цыклу Калі мы будавалі ўверх, што радок HTML. Мы бачым тут, што гэта дадзеныя сімвал мае значэнне MSFT, што выдатна. Гэта тое, што мы чакалі. Гэта сімвал, і гэта, як мы атрымалі значэнне, якое мы павінны былі выкарыстаць ўнутры гэтага тэкставага поля. Гэтага дастаткова для цытатай форме, таму што гэта сумна. Давайце проста зрабіць некалькі хуткіх паляпшэнняў нашым партфоліо. Калі вы выкарыстоўвалі CS50 фінансаў на некаторы час, і вы пачынаеце купляць і прадаваць шмат акцый, ў рэшце рэшт гэтая табліца будзе атрымаць даволі вялікі, і вы будзеце жадаць, біржавых зводак, вядома. Пасля таго як табліца вельмі, вельмі вялікі, яна можа быць карыснай для карыстальнікаў, каб паспрабаваць знайсці ім. Усярэдзіне акно пошуку, калі я пачну ўводзіць нешта накшталт Дысней і, гледзячы на ​​мае акцыі Мікі Маўса, мы бачым, што табліца зараз фільтрацыі заснаваны на тым, што я толькі што ўвялі цалі Гэтая функцыя выглядае супер складаным, але на самой справе, вельмі лёгка з JQuery і JavaScript. Гэта portfolio.php файл утрымлівае файл JavaScript называюць portfolio.js. Давайце паглядзім на гэта. Такім чынам, HTML, JS, партфоліо. Вось дзе мы робім, што пошук на стол. Першае, што мне трэба зрабіць, гэта прымацаваць апрацоўшчык падзеі, што тэкставае поле таму што мы ведаем, што мы хочам, каб наша функцыя фільтрацыі для стральбы кожны раз, калі карыстальнік націскае нешта, таму што ў нас няма часу для пошуку кнопкі. Першае, што трэба зрабіць, гэта зразумець, што шукае карыстальнік, гэтак жа, як мы рабілі раней. Гэта ключавое слова паказвае на бягучы элемент карыстальнік ўзаемадзейнічае з. 

Таму што карыстач ўзаемадзейнічае з акном пошуку, $ Гэта ўяўляе поле пошуку так this.val дае нам тое, што ўнутры акна пошуку карыстач у цяперашні час друкаваць. Такім чынам, цяпер, што мы хочам зрабіць, мы хочам перабраць усе радкі Унутры нашага стала. Каб выбраць усе радкі ў нашай табліцы, я даў гэтую табліцу ID табліцы партфеля, і кожная радок ўяўляе сабой элемент TR, так што гэта селектар збіраецца вярнуцца да мяне вялікі масіў ўсіх радкоў у маёй табліцы. Цяпер я хачу перабраць гэты масіў. Я не маглі б вы для цыклу, але JQuery на самай справе дае нам добрыя функцыя пад назвай "кожны". Што кожны робіць гэта кожны прымае адзін аргумент, і гэты аргумент з'яўляецца функцыяй. Што ён збіраецца рабіць гэта яна збіраецца ўжыць гэтую функцыю да кожнага элементу ўнутры гэтага спісу. Гэтая функцыя прымае адзін аргумент, што гэта е, і калі гэтая функцыя будзе выканана, гэты адрас будзе замяніць першы радок, Затым другі шэраг, а затым трэці шэраг. Па гэтым шляху, гэта тое ж самае, як працуе цыкл , А затым высветліць бягучы элемент на аснове індэкса ўнутры вашага цыкла. На кожнай ітэрацыі для кожнага з гэтых элементаў у табліцы, Я хачу праверыць, калі тэкст элемента - тэкст вочкі ўнутры радкоў - адпавядае таму, што я шукаў. Гэта вялікая доўгая радок каманд, як я мог гэта зрабіць. Па-першае, зноў жа, гэта цяпер называецца - таму што ўсярэдзіне новая функцыя - гэта цяпер бягучую радок у табліцы. Я хачу ўзяць бягучую радок у табліцы, і я хачу, каб усе яго дзеці. Памятаеце, што DOM з'яўляецца іерархічнае дрэва, Гэта азначае, што элементы маюць некалькі дзяцей. 

Гэта. Дзяцей Функцыя збіраецца вярнуць мне, назад масіў з усіх элементаў , Якія з'яўляюцца дзеці, у дадзеным выпадку, радок у табліцы. Гэта проста клеткі ўнутры радка. Я проста хачу, каб зрабіць пошук па першай вочку. Гэта. Першая функцыя кажа, дайце мне першы элемент у гэтым масіве. Затым тэкст функцыі кажа мне атрымаць менавіта тое, што знаходзіцца ўнутры гэтай ячэйкі так як я хачу, каб зрабіць пошук па гэтаму тэксту. Нарэшце, давайце пераўтварыць яго ў ніжні рэгістр, так што мы можам зрабіць тэкст без уліку рэгістра запытаў. Нарэшце, мы хочам, каб пераканацца, што радкі ўнутры табліцы змяшчае радок, якую мы шукаем. IndexOf функцыі ў JavaScript робіць менавіта гэта. Ён кажа нам, ці не гэты радок утрымлівае іншую радок. Калі гэта праўда, што клетка ўтрымлівае тое, што я шукаю, Затым я хачу, каб пераканацца, што гэта паказана на малюнку. Паказаць метад скажа: "Самая элемент". Калі гэта не так, то гэта азначае, што тое, што я шукаю не змяшчаецца у гэтым шэрагу, і таму я хачу, каб схаваць ад карыстальніка. Гэта дасягаецца, што добры эфект фільтрацыі, дзе ўжо не бачым ўсёй табліцы. Калі вы зацікаўлены ў тым, каб зрабіць гэты Біржавы сімвал, а таксама, мы размесцім крыніца ў Інтэрнэце. Але гэта сапраўды проста. JQuery ёсць дзіўныя метады для гэтых анімацыі і працы з CSS ўласцівасцямі. Такім чынам, вось гэта для мяне. 

Што ж чакае нас наперадзе? Як вы ўбачыце на працягу некалькіх дзён, канчатковае прапанову праектаў звязана. Канчатковае прапанова праектаў будзе задаць вам некалькі пытанняў, але сярод іх будзе тры вехі - адзін "добры" вяха, адзін лепш вяха, і адзін лепшы. Ідэя ў тым, каб дапамагчы сапраўды вы, хлопцы, усталяваць вашы чаканні такім чынам, каб мінімальна вы будзеце шчаслівыя з выхадам ваш канчатковы праект і гэта будзе "добра" да гэтага часу, як вы занепакоеныя. Але тады ў інтарэсах атрымання вам дасягнуць толькі крыху да нечага лепшага ці нешта лепшае, мы таксама сартаваць падштурхнуць вас да таго, як добра. CS50 Hack-A-Thon, тым часам, на працягу некалькіх тыдняў. Як правіла, мы робім гэта на аснове аснове латарэю, таму што цікавасць, але цалкам верагодна, мы будзем прымаць некалькі сотняў з нас у аўтобусы ад Harvard Square да Kendall Square, дзе Microsoft мае прыгожы аб'ект трапна назваў "батанік" - Даследаванні Новай Англіі і Цэнтра развіцця. Мы дабяромся туды каля 8 гадзін вечара Нам прыйдзецца трохі ежы. Каля 1 раніцы нам прыйдзецца яшчэ трохі ежы. Каля 5 гадзін раніцы, калі вы яшчэ не спіць мы накіруемся да IHOP або прыняць вас назад у кампус. Мэта ёсць, каб паглыбіцца ў канчатковым праектаў разам з аднакласнікамі і персаналу. Затым праз некалькі дзён гэта CS50 кірмаш, якая на самай справе азначае быць магчымасць для вас, хлопцы, каб прадэманстраваць свае працы і дасягненнях за семестр у той час як бок аб бок адзін з адным і атрымаць адчуванне таго, што ўсё зрабілі. З улікам сказанага, вялікі дзякуй Томі і з Іосіфам, і мы будзем бачыць Вас у панядзелак.  [Апладысменты]