[Powered by Google Translate] [Java 9, vazhdoi] [David J. Malan - Universiteti i Harvardit] [Kjo është CS50. - CS50.TV] 

Kjo është CS50. Ky është fundi i javës 9. Shumë falemnderit. Në fund. Java 9. I got it. Sot ne vazhdojmë bisedën tonë në lidhje me programimin e web me një sy drejt e projektit përfundimtar, jo për shkak se ju duhet të bëni diçka të web-based për projekte finale, por për shkak se as për projekte finale ose pas CS50 kjo është sigurisht drejtimi në të cilën software moderne po ndodh. Dhe ende nuk është në fakt një gjë e lehtë. Në fakt, një nga gjërat më të vështira për të bërë është aspekti i dizajnit. 

Për shembull, me dashje ne do të thotë në të vërtetë marrjen e ndërfaqen e përdoruesit ose përvojë përdorues të drejtë. Unë guxoj të them - dhe ne e dimë nga një sërë problemeve të kohëve të fundit kur një pakice prej jush transmetuar dhembje në bark tuaj në lidhje me disa pjesë e software ose hardware që ju zemëron, qoftë në kampus ose off - ka një shumë vende atje, ka një shumë të pajisjeve atje, se lloji i sucks. Por realiteti është se duke bërë gjëra që janë të lehta për t'u përdorur ende janë megjithatë të fuqishme është një sfidë shumë e vështirë. Pra, për sot e pyeta Jozefi dhe Tommy bashkohet me mua për të deri këtu kështu që ne mund të kemi një bisedë, si për dizajn dhe çfarë lloje të proceseve të mendimit duhet të fillojë duke kaluar nëpër kokën tuaj kur ju design projektet tuaja përfundimtare, përpjekjet tuaja për të ardhmen. Dhe pastaj me ndihmën e Tommy ne do të shikojmë disa nga detajet e zbatimit. Si mund të ketë disa vizion në letër apo në mendjen tuaj që atëherë ju mund të ekzekutojë programatikisht duke përdorur disa prej teknologjive dhe teknikave ne kemi filluar vetëm duke folur rreth, dmth JavaScript dhe diçka edhe më të reja, domethënë AJAX, JavaScript asinkron. Kjo ju lejon të krijoni të gjitha më dinamik e një ndërfaqe të përdoruesit të nga ngarkuar më shumë të dhëna dhe më shumë në mënyrë progresive nga një server. Pra, ne do të shohim disa nga ato copra, si edhe sot. Si një mënjanë, në qoftë se jeni të interesuar në përqëndruar në shkenca kompjuterike ose minoring në shkenca kompjuterike, e dinë se kjo e premte në mesditë Maxwell në Dworkin 221 nuk do të jetë një ngjarje pica ku ju mund të mësoni pak më shumë në lidhje me shkenca kompjuterike. Në rrugën tuaj nga dera sot ju do të jetë në gjendje të marr një udhëzues jozyrtare të SHC në Harvard. Ne do të vënë atë në kanaçe plehra jashtë në lartësi bel kështu që nëse ju dëshironi për të rrëmbyer këtë dhe të mësojnë pak më shumë rreth CS, që do të jetë atje për ju, ashtu siç ishte në javën 0. Gjithashtu nëse ju do të donte të bashkohet me ne për drekë CS50 këtë të premte në 01:15, shkojnë në cs50.net/lunch. Pa zhurmë më tej, unë jap mësim shokët Joseph Ong. Hi. [Duartrokitje] Faleminderit. Hera e parë që kam mësuar në lidhje me dizajnin ishte në një klasë të quajtur CS179 këtu. 

Profesori në kohën na tha historinë për një tjetër profesor i cili kishte shkuar në një hotel dhe të përdorura në faucets. Dikush mund të më thoni se çfarë 2 pullat në të majtë dhe të djathtë të bëni? [Student] Nxehtë dhe të ftohtë. Hot >> dhe të ftohtë. Mirë. Çfarë ju normalisht presin, apo jo? Ky profesor pas përdorimit rakord dëshiron të marrë një dush, dhe ai vazhdon për të përdorur këtë. Ai mendon të majtë dhe të djathtë palët janë për të nxehtë dhe të ftohtë, e drejtë? Por dikush mund të më tregoni se çfarë të bëjë në fakt këto? Çdo duart? [Përgjigja e padëgjueshme Studenti] >> Një sugjerim është? [Përgjigja e padëgjueshme Studenti] Temperatura >>? Kështu njëri prej tyre kontrollon temperaturën dhe kontrollet e tjera? >> [Student] presionin e ujit. Presioni i ujit. Mirë. Ky profesor ecën në këtë dhe, duke menduar se ata janë të nxehtë dhe të ftohtë kontrollin, kthen një të drejtë, të cilën ai mendon se është për të nxehtë, të gjithë rrugën deri sepse ai dëshiron të marrë një dush të ngrohtë. E pra, këto nuk përputhen me të vërtetë lart, kështu që ai merr këtë përvojë jo shumë të fun për të qenë në një dush të ftohtë, dhe ne të gjithë e dimë se çfarë ndjehet si. Ky është një shembull i një krisje të projektimit. Çfarë dua të them me këtë është shpresa e tij nga rakord nuk përputhen me atë që doli nga dush, që është lloj i pafat për të. Pra, ky është një shembull i një krisje të projektimit që ndodh në jetën reale. Por ne shohim të gjitha llojet e tjera si ato. Ne nuk jemi ndoshta tifozët e sistemit MBTA. Ky është një sistem metroje në fakt në Londër, i cili thotë: "Ky buton nuk është në përdorim." Pse është ajo edhe në atje? Pse nuk kemi edhe kujdes? Kur unë isha një fëmijë, duke qenë një teknologjisë tru në shtëpi, kur kompjuteri do të rrëzimit, nëna ime do të vijë tek unë, treguar mua këtë ekran dhe duke i kërkuar se çfarë ka ndodhur. 

Edhe unë nuk e di se çfarë do të thotë kjo. [Qeshur] Çfarë? [Qeshura] Ndonjëherë ne ndjehemi si zhvilluesit e programeve janë vetëm trolling na. Si përdorues jemi si, "Çfarë po ndodh? Dikush na tregoni." Kjo gjitha vjen poshtë për një çështje të projektimit. Projektimit, si ne mund të shohim, nuk është thjesht në lidhje me estetikë, kjo nuk është se si gjërat duken. Ne shohim këtu se kjo pak pop-up gjatë këtu në fakt duket shumë e bukur. Ajo ka një hije rënie në sfond, ajo ka radiuses kufitare në vazhdim e sipër. Kjo është lloj i bukur. Kjo nuk është me të vërtetë mirë të dizajnuara për shkak se ajo nuk është shumë përdorues miqësore. Se pak pop-up që vjen deri nuk ka të vërtetë të më jepni ndonjë informacion për atë që po ndodh, kjo nuk thoni asgjë si përdorues se si të shërohet nga ajo gabim. Ne duam të mendojmë për gjëra që dizajni nuk është. Së pari, nuk është estetikë. Kjo nuk është edhe mbushje app tuaj me ton të funksionalitetit të panevojshme. Nëse ju jeni një restorant Thai, ju ndoshta nuk dëshironi të jetë një dentisti në të njëjtën kohë. Pyetjet dhe me Facebook, jo se shumë njerëz e përdorën atë dhe kjo nuk ishte me të vërtetë në thelbin e asaj që ata ishin duke ndërtuar. Dhe kështu është mirë të mendoni se nuk ka të bëjë aq shumë sasinë e gjërave se ju jeni vënë në aplikimin tuaj, por cilësinë dhe se si ju jeni duke bërë atë user experience më të mirë me të vërtetë përmirësuar mbi atë që ju tashmë e keni. 

Në pak fjalë, dizajn na tregon se çfarë ne duhet të ndërtojmë. Për shembull, në qoftë se ne jemi duke ndërtuar diçka që na le kërkoni gjërat, si Google, për shembull, duhet të bëjmë gjërat në një mënyrë të që kërkon përdoruesin të marrë shumë klikime për të marrë atë që ata duan, apo duhet të bëjmë atë në një mënyrë, për shembull, me Google çastit ose Autocomplete që lejon të na marrë në rezultatet tona të shpejtë? Inxhinieri përfshin, si Tommy do të ju tregojnë se, në të vërtetë ndërtuar atë. Ka shumë lloje të projektimit. Për shembull, nëse ju jeni ndërtimin e diçka për të vendosur diçka në një vend të tretë botërore, ku nuk ka energji elektrike më shumë ose më shumë se teknologjia, ju keni për të hartuar atë që ju jeni të ndërtimit në një mënyrë që të lehtë jep qasje në njerëz atje. Por ajo që llojet e vendimeve të projektimit të tjera mund të ketë ose mund të jetë përfshirë në diçka si kjo? Po. Unë shoh një dorë. [Përgjigja e padëgjueshme Student] E drejta. >> Saktësisht. Accessibility është një gjë. Shumë njerëz nuk mendojnë rreth, "Po në lidhje me përdoruesit e mia?" si ekstremet e spektrit të dyja. Unë kam përdoruesit të cilët mund të kenë aftësi të kufizuara që unë nuk jam duke menduar për dhe unë jam vetëm duke menduar për dizajnimin për përdoruesit e përgjithshme. Interneti është i arritshëm nga të gjithë në ditët e sotme, dhe unë duhet të projektimit për ata njerëz si. Çfarë llojet e vendimeve të projektimit të tjera mund të bëni? Po. >> [Student] Kosto. Kosto. Shumë mirë. Një tjetër gjë që ne mund të bazojmë vendimet tona të projektimit janë në kosto. Nëse ne jemi një biznes, ju doni për të ndërtuar diçka që nuk ka marrë kosto shumë për të prodhuar por mund të shesë në një kosto të lartë në veçanti, ose mund të merrni të na disa fitim. 

Këto janë të gjitha llojet e ndryshme të projektimit, por kur ne jemi duke ndërtuar diçka në internet ose kur ne jemi duke ndërtuar diçka që ndoshta nuk kushton aq shumë për të ndërtuar deri tani, si aplikacioneve të internetit - ju nuk keni për të hedhur në atë kapital shumë në mënyrë që të bëjë diçka që në fakt punon - ajo që ne jemi më të shqetësuar rreth është user experience. Ne e quajmë këtë dizajn përdorues në qendër. Në thelb ajo dizajn përdorues në qendër të bëjë është vënë veten në këpucë e përdoruesve tuaj. Nëse dikush shenjat për atë që unë jam ndërtimin, ata kanë ardhur padyshim me aplikimin tim të veçantë me një qëllim në mendje, me një detyrë që ata duan për të përfunduar. Dhe puna juaj nuk është vetëm për të ndihmuar ata të përfunduar këtë detyrë por për të ndihmuar ata të përfunduar këtë detyrë në një mënyrë që është efikas, intuitive, dhe, si një person i tha atje, të arritshme. Çfarë do të thotë efikasitet? Efikasitetit të thotë se sa shpejt e bën përdoruesin e mia përfunduar detyrën e dhënë ndërfaqe tim. E bën atë të marrë shumë klikime për ata për të marrë nga një vend në tjetrin? Është ajo e lodhshme? A kanë për të kryer shumë detyrave të përsëritura? Ne duam ta bërë këtë proces sa më efikas të jetë e mundur kështu që ata nuk duhet të bëjnë ato llojet e gjërave. Sa për intuitiveness, që është, për shembull, nëse një përdorues duket deri ndërfaqe tim, është e lehtë për ta për të marrë nga një vend në tjetrin? Është e lehtë për ta që të kuptoj se çfarë ata kanë për të klikoni në ndërfaqen e mia në mënyrë që ata të arritur qëllimin ose detyrën që ata duan të arrijnë? 

Dhe së fundi, si një person i tha atje, qasja është shumë e rëndësishme. [Gjuha mashkull] Ajo vjen me aksesueshmërinë për gjëra të tilla si vizion, pëlqen se si mund të vërtetë të hartuar diçka për dikë që është i verbër? Oh. Për njerëzit të cilët nuk mund të shohin në të gjitha, ne kemi diçka që quhet lexues ekran. Çfarë ju duhet të bëni është që ju duhet të ndërtojë faqen tuaj te internetit në një mënyrë të se, për shembull, teknologjitë e veçanta ajo që ne e quajmë - Ka shumë gjëra tani. Unë mendoj se ka lexues ekran quajtur JAWS. Një shumë prej këtyre gjërave të mbështetet në atë që ne e quajmë rregullat zonë në mënyrë që të lexohet nga të përdoruesit se çfarë është i pranishëm në faqe. Për ata njerëz që nuk mund të shohin, ju duhet të bëni të sigurtë që këto lexuesit ekran në fakt mund të marr përmbajtjen në faqe dhe në fakt mund të tregojë përdoruesit tuaj, në qoftë se ju nuk mund të shihni, të paktën ju mund të kuptoni përmbajtjen në faqe. Po. Rregull. Mjaft duke folur për dizajn të mirë. Le të flasim për dizajn keqe. Këto janë gjëra që ju nuk duhet të bëni. Dikush mund të më thoni në lidhje me përvojat e tyre me Craigslist dhe atë që ata mendojnë se nuk është aq e madhe në lidhje me këtë dizajn? Po. >> [Student] Unë mendoj se ka shumë fjalë në një fushë. Fjalë shumë, apo jo? Plotësisht e madhe. Ju vijnë në këtë faqe dhe ju jeni prit me një bandë e tërë e gjërave deri këtu që nuk mund edhe rëndësi për ju. Për shembull, ju jetoni në një shtet që nuk fillon me këtë letër. Le të thonë se ju jetoni në Teksas apo diçka. 

Ju duhet të shkoni të gjithë rrugën poshtë të faqes për të shkuar në vendin që ju jeni në. Unë jam nga Bostoni, kështu që më lejoni të shohim në Massachusetts. Ku është Massachusetts? Oh, kjo është e drejtë këtu. Oh, kjo është Boston. Rregull. Le të shikojmë në Boston. [Qeshura] Pretty madhe, apo jo? Gjëra të vështirë atje. [Qeshura] Le të thonë se unë jam duke kërkuar për diku për të jetuar. Sa shumë njerëz kanë përdorur në fakt Craigslist? Ton prej jush. Ka shumë mënyra mjaft të këqija për të parë në këtë, por le të shohim në këtë. Çfarë është dallimi në mes img dhe pic? Dikush mund të më thoni? Nuk ka asnjë ndryshim të vërtetë. Ata do të thotë të njëjtën gjë, por ata kanë etiketa të ndryshme për ta për disa arsye. Nëse unë klikoni mbi Has Image, asgjë nuk ndodh në faqe. Unë në fakt duhet të klikoni Kërko përsëri për diçka të ndodhë. Çfarë mund të jetë një vendim i mirë i projektimit që mund të bëhet atje? Nëse unë jam duke klikuar në këtë filtër, unë ndoshta do të duan për të filtruar nga ky veprim të caktuar ose kategori të veçantë. Pra, në vend që të shtypni Kërko përsëri, unë mund të bëjë vetëm automatikisht filtrim lloj i stilit të Google, ku ata e bëjnë atë në çast. [Malan] Por nuk formon siç kemi parë deri më tani ato duhet të dorëzohen fizikisht duke e goditur Shkruani të paktën ose duke klikuar një buton? Si ju kam parë ato deri tani, ju në të vërtetë duhet të klikoni Submit për të bërë ato gjëra. 

Por si Tommy do të ju tregojnë në një të dytë, nuk janë në fakt mënyra për ju tillë që kur ju klikoni në këtë gjë ajo mund të dërgojë automatikisht ajo që ne e quajmë një kërkesë AJAX dhe për të marrë të dhëna mbrapa dhe të filtruar rezultatet tuaja menjëherë. Ka ton e gjëra që janë të gabuar me këtë interface. [Malan] Mund të kërkoni për Kembrixh? Ka diçka pak anormal këtu ku ju intereson Kembrixh dhe ende jeni duke marrë Westford, Spring Hill, West Newton dhe si. Ndoshta jo ideale. Ndoshta nuk >> ideale. Si mund të jem në gjendje për të bërë përvojën e përdoruesit të mirë në këtë faqe të veçantë? Po. >> [Student] Udhëzimet. Rregull. Udhëzime në çfarë lloj kuptim? [Student] Për shembull, një gjë për herë të parë përdoruesit të cilët as nuk dinë se çfarë është Craigslist apo ju nuk e dini se çfarë jeni duke menduar për të bërë. Drejtë. Pra, duke shpjeguar se çfarë Craigslist është në këtë faqe është e rëndësishme. Ne fakt mund të tregojë se çfarë përdoruesit kjo faqe është në të vërtetë për të. Në qoftë se unë jam vetëm duke vizituar këtë, unë shoh një bandë e tërë e vende. Unë nuk e di edhe atë që thotë. Por më e rëndësishmja, vetëm duke kërkuar në këtë ndërfaqe, mos harroni Unë kisha për të lëvizni poshtë një ton të gjëra për të gjetur një komunitet të veçantë se unë në fakt kujdesej për për këtë. Çfarë është një mënyrë të shpejtë unë mund ta bëjë këtë? Po. [Student] Ndani ato deri në lindje, në perëndim rajone. Mirë >>. Unë mund të ndajnë ato në kategori më të cilat mund të ndihmojnë më të shpejtë të përcaktojë se si të merrni në atë vend të veçantë. [Student] Vendos një drop-down list. E drejta >>. Rregull. Unë mund të përdorin një drop-down menu, sepse ne kemi një grup të caktuar të gjërave dhe ne mund të tregojnë ato në një drop-down menu. Në këtë mënyrë ajo nuk ka marrë deri hapësirë ​​aq shumë në ekran. Por edhe më mirë se kaq, çfarë mund të bëjmë? Po. >> [Student] përgjigje padëgjueshme >> Mund të them se përsëri? >> [Student] kutinë e kërkimit. Po, një kuti kërkimi. Kjo është e madhe. Ajo që ne mund të bëjë në fakt është nëse ne shikojmë prapa në kutinë e kërkimit, slides. Autocomplete. Mënyrë shumë e lehtë për të kërkuar përmes rezultateve që ju e dini jeni në një grup. Nëse unë filloni të shtypni buxhetore, vetëm më tregoni të gjitha rezultatet që kanë brenda BO prej tyre. Në këtë mënyrë unë mund shumë lehtë të gjeni një të veçantë unë dua të shkoj në në vend që të lëvizni nëpër këtë listë me të vërtetë e madhe. 

Këto janë të gjitha llojet e frutave të vërtetë në lartësi të ulët se dikush që është duke zbatuar Craigslist në fakt mund të bëni për të bërë përvojë në faqen e internetit shumë të mirë për përdoruesit e tyre të veçantë. Rregull. Mjaft duke folur për faqet e internetit të këqija. Le të flasim për Facebook. Kur doli Facebook, dhe veçanërisht foto Facebook, ka qenë shumë e shërbimeve të tjera në kohën që mund të bëjë pikërisht të njëjtat gjëra. Ata mund të organizojnë fotografitë tuaja në albume. Çfarë ju mund të bëni është që ju mund të organizojë ato në grupe si. Ju mund të organizojë ato sipas datës. Ju mund të bëni të gjitha këto gjëra të veçanta. Por nuk e di ndokush se çfarë bëri Facebook fotot shpërthejnë në kohën kur u lirua? Po. >> [Student] Tags. Tags >>. Saktësisht. Ne kemi Milo gjatë këtu, i cili është nuskë tonë qeni me atë bandana CS50. Ju mund të shihni se ne kemi këtë funksion tagging në mes. Dhe çfarë bëri photos Facebook kaq interesante nga pikëpamja e përdorshmërisë është se ai në fakt lejuar njerëzit me anë të kësaj të përfshijë miqtë e tyre në fotot e tyre. Për Facebook, pasi website i tyre është veçanërisht sociale, kjo është në lidhje me ndërtimin e këtij lloj atmosfere sociale. Kjo përmirësuar përvojën e fotografive më shumë sepse ata në fakt mund të fillojnë duke thënë, "Këto janë lidhjet midis njerëzve, dhe këto janë fotot për njerëzit që ju intereson në të vërtetë. " Pjesë e saj është edhe narcisizëm lloj. Njerëzit si për të etiketuar në fotografi dhe gjëra të tilla si kjo. Ndërkohë që nuk është domosdoshmërisht një tipar të mirë të njeriut, në të njëjtën kohë është e bazuar në vendimet e projektimit të mirë sepse njerëz të vërtetë kujdeset për gjëra të tilla si kjo. Pra, kjo është foto Facebook. 

Por le të flasim më gjerësisht në Facebook. Unë jam i sigurt se shumë njerëz këtu kanë mendime rreth Facebook, dy vendime të mira të projektimit dhe vendimet e këqija të projektimit. Pra, le të çarë e xhaketës apo të jenë të lumtur. Come on. Unë e di të gjithë ju përdorni Facebook. Dikush duhet të ketë diçka të keqe për të thënë apo diçka të mirë për të thënë në lidhje me të. Po. [Student] Në News Feed ka një shumë gjëra që unë nuk mund të vërtetë kujdesen rreth. News Feed ka treguar shumë gjëra që ju nuk mund të kujdeset për të. Ju keni miq në Facebook të cilët ju nuk e keni takuar për 2 ose 3 vjet dhe ju të shihni rezultatet e tyre të lajmeve popping deri në feed tuaj lajme dhe ju të vërtetë nuk kujdesen për të. Facebook ka bërë të vërtetë një përpjekje për të bërë këtë të mirë, dhe ata në fakt e kam provuar për të nxitur rezultatet përkatëse në krye të ushqyer lajme si kohët e fundit kështu që ju të vërtetë të shihni gjërat nga miqtë që janë të rëndësishme për ju apo miqtë tuaj të ngushtë. Çdo gjë tjetër? Po. [Student] përgjigje padëgjueshëm >> Mund të them se përsëri? [Student] Reklama janë relativisht modest. Në çfarë kuptimi >>? [Përgjigja e padëgjueshme Studenti] Ata nuk kanë dritë në ekran, si parulla. Rregull. Kjo është e mirë. Nëse ju kujtohet në internet nga vitet '90 - >> [Malan] Unë kam qenë atje. Ai ishte aty >>. [Qeshura] Ju mund të mbani mend ndezje gifs prejardhje, sparkly gjëra, GeoCities lloj stili i gjërave. Kjo nuk është me të vërtetë një shembull i një dizajn të mirë sepse ajo është me të vërtetë vëmendjen nga përmbajtja. Website artit Yale përdorur të ketë animuar si sfond tyre dhe ju nuk mund të lexoni çdo gjë në faqe, por unë mendoj se dikush në fakt bisedoi me ta dhe tani është pak më ndryshe. [Malan] Është shumë më mirë tani. >> Është shumë më mirë tani, si ju mund të shihni. >> [Malan] Oh yeah. Vetëm madh, vetëm - Po. Rregull. 

Pjesë e tij është bërë edhe faqja juaj ndoshta shumë minimalist dhe shumë e kuptueshme kështu gjërat në rrjedhën e faqes në një mënyrë që është shumë logjike dhe të mos merrni në rrugën e njëri-tjetrit. Cilat llojet e gjërave të tjera janë të mira në lidhje me Facebook apo i keq për Facebook? Le të ketë një bisedë të projektimit këtu. Oh. Ku? Po. [Student] Sistemi i ri Timeline ju lejon të kërkoni profilin e personit për të kaluarën e tyre. Ooh, Timeline. Timeline është një gjë e madhe, sepse kjo ju lejon të kërcell miqtë tuaj mbrapa, kur ata ishin në shkollë të mesme. Timeline është e mirë sepse ajo ju lejon të filtruar përmes përmbajtjes një shumë të shpejtë, kjo ju lejon të gjeni gjëra që do të kishte marrë ndryshe ju një kohë vërtet të gjatë për të gjetur vetëm Scroll lart dhe poshtë, lart, lart, lart, lart, lart, si kthim prapa në kohë. Por pastaj ka edhe një lloj dobësitë të cilat në aspektin e user experience. Çfarë mund që të jetë? Fjala e madhe që fillon me P-R. >> [Student] Privacy. Privacy >>, e drejtë? Privacy është një i madh user experience çështje. Kjo është një nga gjërat që unë urrej më për Facebook tani. [Qeshura] [Malan] Si bëj unë tani. David nuk e kuptojnë këtë fakt ka ndodhur deri dje. Kështu që tani ai e di se çdo herë që unë chat atë unë e di që ai është duke injoruar mua. [Malan] Pjesa e vështirë ishte që unë ishte në fakt duke injoruar atë, dhe unë nuk e di se ai e dinte se unë isha duke injoruar atë. [Qeshura] Privacy është një çështje e madhe. Mund dikush këtu më tregoni se çfarë mund të jetë e keqe për privatësinë në Facebook përveç faktit se ata bëjnë gjëra të tilla si kjo? Çfarë është ajo veçanërisht e vështirë për të bërë në lidhje me privatësinë Facebook? Kjo lloj është një pyetje kryesor. Po. >> [Student] Hide fotot tuaja nga njerëz të caktuar. Drejtë. Pikërisht, për të fshehur fotot tuaja nga njerëz të caktuar. Ata e kanë këtë buton të vogël, pak në të drejtën e sipërme që ju lejon të toggle privatësinë e një foto. Mundësitë e tyre janë të ndryshme shumë të privatësisë mes llojet e ndryshme të menutë. 

Ata kanë marrë një shumë të mirë në lidhje me atë kohët e fundit, por ajo përdoret për të jetë rasti se sa herë që ju të kërkuar për të parandaluar miqtë tuaj nga fotot shohin, ju do të duhet të kalojnë nëpër një proces shumë i komplikuar 5-hapi për të qenë si, më lejoni të klikoni këtë link, tani më lejoni të klikoni përsëri, më lejoni të klikoni përsëri, më lejoni të specifikojë cilat njerëzit nuk mund të shihni fotografitë e mia. Kjo nuk është veçanërisht i mirë nga ana e Facebook sepse aq shumë në lidhje me përvojën e përdoruesit është në të vërtetë duke u dhënë atyre lirinë për të kontrolluar atë që njerëzit mund ta shohin. Ne e quajmë këtë kontroll përdoruesit dhe lirinë. Nëse ju nuk jeni të lejuar përdoruesit tuaj të bëjë që në një mënyrë që është efikas dhe intuitive, atëherë përvoja juaj përdoruesi nuk është me të vërtetë e madhe se në të gjitha.  Do të ju djema të doja të them asgjë rreth Facebook? Si mund ta kthyer këtë off? [Ong] Ju nuk mund të kthehet këtë off, dhe kjo është një e metë e madhe përdorshmërisë nga ana e Facebook. Ky tipar - Unë në fakt shikuar në atë dje - është ose që ju nuk mund ta bëjë atë apo kjo është varrosur diku shumë, shumë thellë në skutat e Facebook, sepse unë nuk mund ta kuptoj se si për të çaktivizoni këtë funksionalitet në të gjitha. [Malan] Por ndonjëherë këto vendime nuk janë të dukshme sepse ju djema na kanë dhënë shumë reagime të dobishme në CS50 aplikacione të ndryshme dhe faqet e internetit që përdor kurs. Ne nuk kemi zbatuar të gjitha këto kërkesa dhe sugjerime. 

Pjesë e që është për të marrë kaq shumë kërkesa se kjo është një funksion i kohës, por ndonjëherë ne vetëm të bëjë një vendim të ndërgjegjshëm si, "Faleminderit për sugjerimin, por nuk pajtohemi." Pra, si mendoni ju në fakt të vendosni se çfarë ju duhet të bëni nëse përdoruesit tuaj mendoj se ju duhet të bëni diçka edhe në qoftë se ju nuk bëni domosdoshmërisht? Kjo është një bilanc gjobë në mes të vërtetë të dëgjuar se çfarë thonë përdoruesit tuaj dhe në fakt ka disa lloj të linjës ku ju them, "Ne nuk jemi duke shkuar për të bërë atë që thonë këto përdoruesit." Dhe në veçanti, unë mendoj se ka qenë një citim nga Henry Ford që përmbledh këtë ide mjaft mirë. "Nëse do të kisha pyetur njerëzit se çfarë ata donin, ata do të kanë thënë se ata donin kuaj të shpejtë." Dikush mund të lloj të vë në lojë përveç asaj që quote vërtetë do të thotë? Kjo nuk është vetëm se përdoruesit e di se çfarë ata duan, por kjo është më shumë se - [Student] Ata nuk e dinë se çfarë është e mundur. Në pjesën ata nuk e dinë se çfarë është e mundur. Tease se përveç pak më shumë. Çfarë doni të thoni me këtë? [Përgjigja e padëgjueshme Student] Kjo është e mirë. Ajo që unë mendoj se ne jemi duke u përpjekur për të thënë këtu është se njerëzit e dinë se çfarë ata duan. Ata duan kuaj të shpejtë. Çfarë ata me të vërtetë duan është aftësia për të lëvizur më shpejt, por ata vërtetë nuk e di të mesme nga të cilat për të arritur këtë. Kur keni ardhur për përdoruesit tuaj dhe përdoruesit tuaj ju tregoj diçka dhe ata ju them, "Ne duam këto karakteristika dhe këto karakteristika dhe këto karakteristika," ju nuk doni të mendoni rreth domosdoshmërisht, "Lërmë të shkoj përpara "Dhe të zbatojë atë që ata në mënyrë eksplicite thotë:" por çfarë ju doni të mendoni për është, "Çfarë lloj ideve mund të merrni nga kjo?" Çfarë bëjnë ata në fakt duan? 

Dhe nga atje atë që ju mund të bëni është të projektimit diçka që kënaq këto kërkesa por jo domosdoshmërisht në mënyrë që përdoruesit pret që ajo të jetë e kënaqur. Pra, për diçka si projekte përfundimtare, në terma shumë të vërteta, çfarë është një orientues i dobishëm kur është fjala për të bërë diçka të mirë, veçanërisht në qoftë se projektuesi ka këtë arrogancë rreth tij ku ju e dini se çfarë lloj e mirë, ju mund të marrë të dhëna nga përdoruesit e tuaj, por si mendoni ju në fakt të shkoni në lidhje me marrjen atë reagime? Në projektet e fundit, shumë konkretisht, çfarë prodhon rezultate optimale këtu? Çfarë prodhon rezultate optimale - dhe unë do të shkoj për këtë në një të dytë - është ky proces i zhvillimit dhe pastaj testimin dhe pastaj iterating. Çfarë dua të them me anë të testimeve është zakonisht kur ju design diçka ju mendoni se është mjaft e mirë, si, "Unë jam e tillë një projektuesi i madh. Gjithkush do të duan këtë". Dhe pastaj ju vënë atë atje dhe njerëz të vërtetë nuk e pëlqen atë për disa arsye. Çfarë ju duhet të bëni është që ju keni për të marrë pjesë e gjërave që njerëzit kanë dëshirë dhe riorganizimit gjërat që njerëzit nuk më pëlqen. Kjo tingëllon si një proces shumë të qartë, por ky proces i vazhdueshëm iterating në krye të asaj që ju keni ndërtuar tashmë është një proces që ju ndihmon jo vetëm që përsosin aftësitë tuaja të projektimit, por edhe ju ndihmon të përsosin dizajn në mënyrë që njerëzit të vërtetë e vlerësojmë produktin tuaj edhe më shumë se ata më parë. 

Unë do të shkoj për më shumë shembuj konkretë të asaj që ju mund të bëjë në fakt. Si lloj i një shembull të fundit të një produkti, le të shohim në kajak. Kajak kur ajo doli jashtë ishte shumë, shumë e famshme. Mund dikush me mend pse? Cilat janë llojet e gjërave që ju pëlqen në lidhje me këtë nëse keni përdorur atë apo çfarë janë llojet e gjërave që ju nuk më pëlqen? Po. >> [Përgjigja e padëgjueshme Student] >> Okay. Kjo është pjesë e saj është lënë përdoruesit kanë një pyetje që është më e shtrirë se një shumë e kufizuar si, "Ju duhet të marr datën tuaj të fillojë "Dhe ju duhet të marr datën tuaj në fund." Në fakt, kjo ju lejon të jetë fleksibël në lidhje me të dhe kjo ju jep të gjitha fluturimet në atë varg. Çdo gjë tjetër? [Student] Ato përfshijnë tarifat në çmim. Ato nuk përfshijnë taksat në çmim. Taksat dhe gjëra të vërtetë të shkojnë direkt në këtë çmim në të majtë e sipërme kështu që ju nuk jeni të mashtruar në duke menduar se ju jeni në të vërtetë duke paguar për një fluturim $ 240 kur ajo është me të vërtetë 330 $. Çdo gjë tjetër? Po. [Përgjigja e padëgjueshme Student] Unë nuk jam i sigurt nëse ata në fakt të ju lejojnë të bëni këtë. Unë mund të jetë i gabuar. Kjo mund të jetë një gjë interesante në qoftë se ju doni të vënë më shumë peshë në filtra të veçanta në mënyrë që ata të shtyjë rezultatet që lidhen me këtë filtër në krye. Por dikush mund të më thoni se çfarë është aq e veçantë në lidhje me këtë anën e majtë? Si e keni tradicionalisht kërkoni një fluturim në një shërbim në internet para se kjo? 

Po. >> [Student] përgjigje padëgjueshme >> Mund të ju them se - [Student] Çdo ajrore. Po >>. Çdo linjë ajrore ka faqen e vet. Kjo konsolidon gjëra. Dhe? [Student] Ju e dini saktësisht çfarë ju jeni duke lënë kohë. Ju nuk e dini saktësisht çfarë ju jeni duke lënë kohë, por lidhur me filtra në veçanti. Më lejoni të tërheq lart kajak. O Zot, pop-ups. Përvoja Bad përdoruesit. Çfarë ndodh kur unë të lëvizë këtë slider? [Student] përditësimet automatike. >> [] Ong përditësimet automatike. Kjo është diçka që është shumë e rëndësishme. Para kësaj, sa herë që ju të kërkuar për të parë një fluturim, keni pasur për të vënë në vendin tuaj input, output lokacionit tuaj, Kërko Press, ajo do të përpunojë dhe të tregojnë se rezultatet tuaja. Nëse dëshironi të ndryshoni pyetjen tuaj, ju do të duhet të shtypni përsëri dy herë, të hyjë në një pyetje të ri nga e para, dhe pastaj të bëjë atë pa pushim. Gjë e bukur për diçka si kjo është ajo përdor një shumë [] pakuptueshëm gjë në mes. Kurdo që ju të bëni diçka si kjo, ajo shoots off një kërkesë dhe të kthehet të gjitha rezultatet menjëherë. Ky lloj reagime të menjëhershme është diçka që e bëri kajak wildly popullore sepse ajo është me të vërtetë e lehtë për mua të vetëm të ndryshojë query time dhe të kuptoj se gjërat që janë rreth një gamë të veçantë pa pasur nevojë për të shkuar mbrapa dhe me radhë, mbrapa dhe me radhë, mbrapa dhe me radhë. Pra, këto janë të gjitha llojet e gjërave që ju doni të mendoni për kur ju jeni dizajnimin e web faqen tuaj. Si mund ta bëjë atë shumë të efektshme për përdoruesit e mi të shkojnë nëpër çdo gjë që ata janë duke punuar në dhe për të marrë në qëllimin e tyre përfundimtar sa më shpejt të jetë e mundur? [Malan] Dhe në pikën e Jozefit më parë për përdoruesit e jo domosdoshmërisht ditur se çfarë ata duan, bazuar në atë që ju djema tani dini rreth HTML dhe ju keni kutitë, butonat e radios, menutë, zgjidhni fushat e inputeve dhe si, si do ta zbatojë nocionin e zgjedhjen e një kohën e fillimit për një fluturim? 

Cili prej këtyre mekanizmave UI të ndryshme do të ju përdorni? Nëse ju vetëm e di sasinë e HTML që u mësoi parë dhe ju e dini se inputet janë butonat e radios, kutitë, rënie-ngritje, dhe kuti input, çfarë do të zgjedhja juaj e natyrshme kanë qenë për datat ringjallet? [Student] Input. Input. >> Apo ndoshta edhe një drop-down me të gjitha datat, apo jo? Pra, me mekanizmat më komplekse UI si kjo në anën e majtë që ju mund të zbatojë, ju mund të bëni këtë proces shumë më intuitive me një slider sepse koha është e vazhdueshme, dhe njerëzit zakonisht nuk mendojnë për atë në drejtim të chunks diskrete. Dakord. Gjëja e fundit. Dhjetë heuristics përdorshmërisë. Të gjitha gjërat që ne folëm ndoshta bien në një nga këto kategori. Nëse ju shkoni në këtë link, cilat vende do të postuar në internet, ju do të vërtetë të jetë në gjendje për të, si ju design faqen tuaj, mbani në mend këto heuristics dhe këto rregulla e gishtit. Për projektet tuaja, çfarë unë sugjeroj që ju të bëni në mënyrë për të hartuar app tuaj më të mirë është që të bëjë prototyping letër parë. Kur ju jeni duke menduar në lidhje me aplikimin tuaj, shumë shpejt skemë atë që ju dëshironi që ajo të duket si dhe sigurohuni që të gjitha kutitë janë të rregulluar në një mënyrë që është shumë intuitiv për përdoruesit për të përdorur dhe madje edhe të tregojë këto prototipa letër për miqtë tuaj dhe të fillojnë fokus grupe. Vetëm të marrë 2 ose 3 persona së bashku dhe i pyet ata për të vetëm trokitje e lehtë në këto prototipa letër, dhe tregoni atyre ekranet reja për të parë nëse ata vërtetë kuptojnë se çfarë po ndodh. 

Çfarë doni të bëni është dhënë atyre një detyrë, të motivuar këtë detyrë, dhe vetëm për t'u dhënë atyre app dhe le ta përdorin atë. A nuk jep atyre udhëzime përtej kësaj. Ju dëshironi që në fakt le ta ndërveprojnë me app tuaj në një mënyrë që ju lejon të shihni se si ata do të përdorin atë në qoftë se ju nuk ishin në këmbë pranë tyre. Dhe kjo është shumë e rëndësishme. Kjo do t'ju japë shumë njohuritë për të janë njerëz të marrë rreth gjërave të caktuara në një mënyrë që nuk e kam ndërmend atyre të? Janë përdorur mekanizma të veçantë UI në ekran në një mënyrë që është lloj i hacky? Unë nuk e kam ndërmend për ta bërë atë në këtë mënyrë. Dhe një herë ju jeni bërë me këtë, çfarë ju doni të bëni? Shkëmbinj tuaj design, e drejtë? Çfarë doni të bëni është që ju doni të zhvillojë dhe pastaj të bëjë atë proces përsëri. Kështu tregojnë atë me miqtë një herë ju keni zhvilluar atë, të provuar atë, zhvilluar, test, të zhvilluar, test, iterate, dhe mbi dhe përpara. Design është një shumë proces përsëritës në këtë kuptim. Ju në fakt keni për të ndërtuar diçka dhe pastaj të kuptojë gjëra në lidhje me të që ju nuk e kuptojnë përpara dhe të shkuar mbrapa dhe për të përmirësuar nga ajo. Tani, si për pjesën e zhvillimit, kjo është ajo që Tommy do të ju tregojnë se pas shpërbërjes dhe se si ju mund të jetë në gjendje të zbatojë diçka si Autocomplete në një mënyrë që është mjaft e thjeshtë. [Malan] Si Tommy vendos këtu, një pyetje pastaj. Shumë nga faqet e internetit më të hershme - dhe kur Jozefi i tha 1990 website stil, ajo ishte Implementimi ku nëse do të donit të përzgjidhni një kohën e fillimit dhe një herë në fund, sinqerisht, mbrapa në ditë dhe madje edhe në disa faqet e internetit sot, mënyrë që ju të bëni këtë është që ju të vini një orë nga një drop-down, ju të vini minuta nga një drop-down, ndoshta ju zgjidhni AM, PD, dhe pastaj ju bëni që 3 herë më shumë. Dhe kështu me 6 klikimeve dhe ndoshta disa scrolling përdoruesit tuaj në fakt mund të japin disa lloj datën dhe / ose varg kohë në këtë kuptim. 

Pra, patjetër optimale dhe akoma deri më tani kemi parë asnjë aftësitë shprehëse në ndonjë nga gjuhët e kemi shikuar për të bërë diçka sexier si ky slider kohe fillimit dhe kohën fund. Por në qoftë se ju mendoni përsëri në javën 0 kur kemi biseduar për Scratch, atje nuk ka pasur Widgets që vetëm e bëri gjëra të caktuara. Ju me të vërtetë kishte vetëm këto themele si sythe dhe kushtet dhe si. Pra, lloji i vetëm duke menduar shumë abstrakte tani, pavarësisht nga veçoritë e HTML, Çfarë është me të vërtetë ndodh me diçka si kjo kohë e fillimit dhe kohën fund slider? Kur unë të lëvizin mausin tim dhe unë klikoni mbi atë simbol karrota pak në të majtë dhe të fillojnë zvarritje, programuar, çfarë është ajo që ju doni të jenë në gjendje të zbatojnë për të bërë që të ndodhë? Çfarë pyetje, çfarë shprehjet Boolean nuk ju duan të jenë në gjendje të kërkoni? Çfarë është me të vërtetë ndodh? Sammy? [Student] Ku është pozicioni i kursorit? Mirë >>. Ku është pozita e kursorit? Kjo ishte diçka që ne e nevojshme për të shprehur përsëri në Scratch, nëse ajo është bazuar në vendndodhjen apo edhe ngjyra ose si. Ju mund të kujtojnë ndonjëherë kaq pak kohë të hënën ka pasur të gjitha këto gjëra quhet ngjarje në botën e Web, dhe kështu që nuk ka gjëra të tilla si OnClick dhe çelësi shtyp në linjë dhe onkeyup dhe onmouseover dhe onmouseout. Pra, të kuptojnë se edhe këto gjëra ne kemi qenë duke marrë për të dhënë në Web me faqet si Facebook dhe Gmail, edhe nëse ju nuk kanë idenë si ju ndoshta do të zbatojë se për shkak se nuk ka asgjë si ai, edhe në leksionin ose Problem Set 7, të kuptojnë se me këto bazat e saktë të njëjta, me HTTP dhe parametrat dhe GET dhe PAS, me inpute themelore HTML që ne i kemi shikuar deri tani dhe në një moment me mekanizmat programatike që të Tommy gati për të futur ju mund të filloni për të shprehur veten ashtu si ju e bëri në javë 0 nga shumë intuitive zvarritje dhe në rënie. 

Pra, me tha se, Tommy MacWilliam dhe disa copa mister të reja për ne për Web. Dakord. Emri im është Tommy dhe unë jam duke shkuar për të folur në lidhje me JavaScript. Vetëm një mohim: Unë jam i mendimit se JavaScript është gjuhë programimi mirë në të gjithë botën të tërë. Ka shumë njerëz që nuk pajtohen me mua, por kjo është vetëm amazing. Pasi ju shkoni përsëri në C, në qoftë se ju duhet të shkruani C për një klasë apo disa gjuhë të tjera, kjo është vetëm të vërtetë zhgënjyese në të gjitha nivelit të ulët detaje ju duhet të merrni bogged poshtë in Kështu që nëse ju jeni ndjeheni ndonjëherë i trishtuar për mënyrën se si i bezdisshëm C është për të shkruar, thjesht shkoni mbrapa, shkruajnë disa JavaScript. Kjo është Nirvana. Ju do të ndiheni shumë më mirë për ditën tuaj të keqe. Një shumë e magjinë e JavaScript vjen nga aftësia e saj për të manipuluar gjërat që janë tashmë në faqe. Kur ne shkroi Scripts PHP tona, ata u ekzekutuan në server, dhe përfundimisht se PHP script ndoshta disa prodhimit HTML. Kjo HTML është dërguar të klientit, dhe pastaj se ishte ajo. Nëse PHP kërkuar për të shtuar një buton në një faqe, për shembull, ajo nuk mund të vërtetë të bëjë atë. Ajo do të duhet të bëjë një skedar HTML krejt të re dhe për të dërguar që të shfletuesit. Me JavaScript ne e dimë që ne mund update gjëra, ndërsa ata janë tashmë në faqe, dhe për shkak të kësaj ne mund të japin reagime shumë më të menjëhershme, i cili do me të vërtetë të përmirësuar përvojën e përdoruesit në faqen tonë të internetit. Vetëm një radhitje të shpejtë të selectors JavaScript. Ne e dimë se kur ne të shkarkoni një faqe HTML, që do të jenë të përfaqësuara në DOM. 

DOM mos harroni kjo është vetëm pemë e madhe ku elementet janë të lidhura në këtë hierarki të madhe. Kur ne kemi punuar me bazat e të dhënave në pset 7, një nga gjërat e para që ne të nevojshme për të dini se si për të bërë ishte query bazës së të dhënave. Ne kemi këtë tryezë të madhe përdoruesit, dhe nganjëherë ne vetëm duam të themi, "Unë vetëm dua disa prej këtyre përdoruesve që përputhen me disa kushte." Në mënyrë të ngjashme, kur ne kemi nevojë për disa DOM ne rrugën e querying atë. Ne kemi nevojë për një mënyrë për të thënë, "Unë dua të gjithë butonat që duken si kjo "Ose të gjitha imazhet në faqe." Dhe këto selectors të na lejojë për të bërë këtë. Pra, vetëm një radhitje të shpejtë. Ky i fundit e parë këtu, kjo # paraqesë, çka është se do të zgjidhni? A ka dikush kujtohet? [Përgjigja e padëgjueshme Studenti] >> Po, pikërisht. Kjo do të zgjidhni një element në faqe që ka një ID të dorëzojë. Dhe kështu që tag hash thotë se kjo zgjedhësi do të punojë me kartat e identitetit. Si në lidhje me një të dytë, kjo. Qendër, çfarë do që të zgjidhni? Po. >> [Student] Class. Pikërisht >>. Kjo është tani do të zgjidhni nga klasa. Dallimi midis identitetit dhe klasës këtu është përgjithësisht ID duhet të jetë unik brenda çfarëdo hapësirë ​​që ju jeni në kërkim gjatë. Pra, nëse ju jeni në kërkim mbi një faqe të tërë web, ju me të vërtetë duhet të ketë vetëm 1 element me atë ID të caktuar, kështu që në këtë rast të dorëzojë. Me klasat, në anën tjetër, ne mund të kemi më shumë se 1 element në të njëjtën faqe me të njëjtën klasë. Kjo mund të jetë e dobishme për të thënë se unë dua të zgjidhni çdo gjë që është përqëndruar në faqen në vend se vetëm 1 gjë. 

Dhe së fundi, kjo e fundit këtu është pak më e komplikuar, por çfarë është kjo do të zgjidhni nga DOM? [Përgjigja e padëgjueshme Studenti] >> Çfarë është ajo? [Student] Çdo gjë që është një tag. Ne kemi 2 >> pjesë këtu. Pjesa e dytë do të thonë se unë dua të zgjidhni këto tags me një tag të dhëna, kështu që çdo element që është një tag input. Por unë nuk dua të vetëm të zgjidhni të gjitha inputeve sepse diçka si një buton submit mund të jetë një input dhe diçka si një kuti teksti mund të jetë një input. Pra, me këto kllapa katrore që unë jam duke thënë se unë vetëm dua të zgjidhni ato elemente që janë të tipit tekst. Diku në tag HTML time Unë kam një atribut quajtur lloji, dhe vlera e kësaj duhet të jetë atribut tekst. Pra, si në lidhje me këtë pjesë të parë këtu? Fjala e parë e këtij përzgjedhës është formë atëherë unë kam një hapësirë ​​dhe pastaj kjo pjesë input. Çfarë do të bëjë, duke formularin në frontin e tij? Kjo është në thelb do të kufizojnë kërkesën tonë. Kjo mund të jetë rast që ne kemi disa inpute në faqe që nuk janë pasardhës të një formë. Çfarë kjo do të bëjë është kjo do të thonë se unë vetëm dua tags dhëna që kanë diku mbi ta disa element prind i një forme. Dhe kështu në këtë mënyrë ne mund të bëjë këto pyetje më hierarkike kështu që ne nuk do të vetëm duhet të zgjidhni gjithçka që përputhen një përzgjedhës dhënë. Ne mund të lloj kufiri fushës së kësaj pyetje me diçka tjetër. Pra, tani që ne e dimë se si për të zgjedhur elemente në faqe, le të flasim pak për AJAX. AJAX është një akronim ende shumë të modës që qëndron për josinkronik JavaScript dhe XML. Kjo ndodh pikërisht kështu që XML është vetëm një mënyrë për të përfaqësuar të dhënave. 

Kjo lloj e popullaritetit të humbur kohët e fundit, kështu që X në AJAX nuk është përdorur gjatë gjithë kohës. Në thelb, ajo që AJAX na lejon të bëni është të bëjë kërkesa HTTP nga kuadrin e JavaScript. Kur ne jemi në shfletuesin tonë të internetit dhe ne jemi të lundrimit nëpër faqet dhe ne të klikoni një lidhje, çfarë shfletuesi ynë do të bëni është të bëjë një kërkesë HTTP në çfarëdo Link Ne click. Por kjo nuk është gjithmonë ideale, sepse në qoftë se është rasti, atëherë si Davidi u thënë: ne gjithmonë kemi për të bërë përdoruesit klikoni një buton ose klikoni Submit një lidhje në mënyrë që të bëjë çdo gjë të ndodhë që do të përfshijë një kërkesë HTTP. Pra, me AJAX, ne mund të bëjë këto kërkesa në emër të JavaScript. Kjo do të thotë sa herë që përdoruesi ndërvepron me faqe ose ndodh diçka, ne fakt mund të bëjë një kërkesë programatike për disa dosje tjetër PHP në faqen tonë të internetit apo ndonjë gjë tjetër dhe të rifitoj të dhënave që se dosja pështyn jashtë. Le të marrin një vështrim në një shembull të AJAX. Kjo është faqja jonë e Financave CS50, me të cilat shpresojmë se disa prej nesh janë të njohur. Nëse ne shikojmë në HTML të kësaj faqeje, ne shohim këtu se unë kam shtuar disa gjëra, një nga të cilat unë kam dhënë këtë formë një ID. Unë e kam thënë id = "formë-quote". Unë e kam bërë këtë vetëm për shkak se ajo do të bëjë këtë një pak më e lehtë për të zgjedhur nga DOM pasi që unë mund të bëjë vetëm një pyetje shumë të thjeshtë. Ajo që unë dua të bëj këtu është që unë dua të zgjidhur disa probleme me CS50 Financave. Pra, nëse ne do të shkojmë për të finance.cs50.net, çdo herë që unë dua të të marrë një kuotë, unë duhet të klikoni këtë buton të marrë kuotë, dhe se Get butonin Cituar pastaj merr mua për një faqe të tërë. Dhe në qoftë se unë dua një tjetër kuotën, unë kam për të goditur butonin mbrapa dhe pastaj shtypni atë në, Kam marrë një kuotë, dhe unë goditi butonin Back. Kjo me të vërtetë nuk është përvoja më e mirë përdoruesi. Kush do të vërtetë të përdorni faqen e internetit në qoftë se është i ngadalshëm që të marrë çmimet e aksioneve? Kështu që ajo që ne duam të bëjmë me AJAX është hequr atë hap të shkuar në një faqe të veçantë në mënyrë për të parë rezultatet. 

Ajo që ne jemi me të vërtetë vetëm duke i kërkuar për të është se çmimi me të vërtetë të vogël, dhe kjo është vetëm një sasi të vogël e të dhënave me të vërtetë. Kështu që nuk ka nevojë për mua për të shkuar një tjetër faqe të tërë HTML, shkarkoni një grumbull të tërë të re e HTML, ndoshta shkarko imazhe disa më shumë, disa fotografi të tjera CSS vetëm për mua që të përgjigjem në këtë pyetje shumë e thjeshtë se sa e bën këtë kosto aksioneve. Me AJAX ne mund të bëjë këtë një shumë më e lehtë. Ne shohim këtu poshtë se unë jam i lidhur në një skedar të quajtur JavaScript quote.js. Le të vërtetë të hapur atë file. Nuk ka. Të gjitha dosjet e mia JavaScript do të jenë të vendosura në HTML kështu që shfletuesi web mund të përdorni atë. Pastaj ne kemi një drejtori të veçantë këtu për JavaScript, dhe tani këtu është quote.js. Në krye të këtij file këtë thotë këtu që unë dua të presin për faqe të tërë të jenë të ngarkuar para se unë të përpiqet të bëjë asgjë. Pse është se e nevojshme? Ajo rezulton se gjë tjetër që unë jam duke shkuar për të bërë këtu është të fillojmë të shikojmë për një element që përputhet me disa përzgjedhës. Nëse kjo JavaScript është ekzekutuar kurrë më parë ky element është i ngarkuar në faqe, atëherë gjithçka unë të përpiqet të bëjë nuk do të punojë sepse unë jam do të përpiqen të zgjidhni diçka që nuk është ende atje. Pra, kjo vijë deri krye thotë se unë dua që ju të prisni derisa çdo gjë është ngarkuar kështu që ne jemi të garantuar se çdo elementë që unë jam duke kërkuar për të vërtetë janë në faqe. Kjo shenjë dollar këtu do të thotë që unë jam duke përdorur bibliotekën e quajtur jQuery. Kjo bibliotekë jQuery na lejon të përdorni këto selectors se ne vetëm dukej në. Duke thënë $ pastaj kalon si një argument këtë formë # quote-, Unë tani jam zgjedhur atë formë që ne vetëm mori një vështrim në. Tani unë kam një përfaqësim të kësaj forme në kujtim disi. 

Në këtë objekt tani, ky përfaqësim i formës, Unë jam tani duke përdorur një funksion të quajtur në. Çfarë ky funksion nuk është se do të lidhni një mbajtës ngjarje. Ngjarja që ne jemi duke shkuar për të dëgjuar për të është ngjarja submit. Kështu që kur përdoruesi klikon butonin Submit që shtyn ose Enter, kjo ngjarje do të zjarrit. Nga hooking në këtë, unë tani mund të pranoj sjelljen e parazgjedhur të formularit. Pa këtë JavaScript, formë do të paraqesë në çfarëdo skedar PHP kemi përdorur në atë atribut veprimit. Por në vend, unë jam tani duke thënë, prisni, prisni, prisni, unë nuk dua që ju të vërtetë të bërë këtë. Unë dua që kjo të ndodhë para se të shkoni dhe të përpiqet të paraqesë një skedar PHP. Tani çfarë unë dua të bëj? Në këtë pikë unë dua të përdorni AJAX disi të ngarkesës në atë që çmimi i aksioneve është. Gjëja e parë që duhet të dini është se çfarë aksioneve përdoruesi është duke kërkuar deri. Për të bërë që unë jam duke shkuar për të përdorur një tjetër përzgjedhës. Kjo është përzgjedhës i tretë kemi shikuar në para. Kjo thotë se unë dua të nisem këtë element formë me një ID të formës kuotë. Pastaj diku brenda kësaj forme nuk duhet të jetë një element input që ka një emër të simbolit. Nëse ne shikojmë prapa në HTML tonë, ne pamë se kemi pasur një kontribut [name = simboli]. Kjo do të thotë se kjo do të zgjidhni atë kutinë e tekstit që përdoruesi është shtypur në. Kjo është e bukur. Ne kemi kutinë e tekstit. Tani ne vetëm duhet të dini se çfarë është në brendësi të saj. Për ta bërë këtë ne mund të quajmë këtë metodë këtu, kjo. Val, dhe kjo thotë se unë e di se çfarë kuti teksti që keni. Unë dua që ju të më thoni se çfarë është përdorues shtypur në atë kutinë e tekstit. Tani ne kemi një varg të quajtur simbol që është e barabartë me çdo gjë që përdoruesit typed in Kjo është e bukur. Ne mund të përdorim atë varg tani për të bërë kërkesën tonë. Ky është një funksion i ri këtu, kjo $, përveç ne jemi nuk do të përzgjedhjen e elementeve, ne jemi duke shkuar për të thirrur një funksion të ndryshëm që është dhënë për ne nga jQuery. Ky funksion AJAX është ajo që është në të vërtetë do të bëjë këtë kërkesë HTTP. Pra, ne duhet të tregoni atë disa gjëra. Gjëja e parë që ne duhet të them këtë funksion është vendi ku unë dua kërkesa për të shkuar. Diku në projektin tim unë kam këtë fotografi në brendësi të directory HTML quajtur quote.php. Unë mund të hyni në këtë skedar, ne pamë, ashtu si ky, nëse unë shkoj në localhost / quote.php. 

Unë dua JavaScript time për të bërë një kërkesë në atë faqe. Çfarë lloji i kërkesës tani? Ne e pamë më parë se forma e ka atë metodë = "post" atribut, dhe kjo do të thotë se do të bëjë një kërkesë PAS, kështu që ajo nuk do të vënë asgjë në URL, më tepër se një kërkesë të marrë, i cili vetëm do të pushohen nga puna në qoftë se ne të arrihen vetëm faqe me shfletuesin web, për shembull. Tani ne kemi thënë që unë dua të bëj një kërkesë PAS HTTP tek një faqe të vendosura në quote.php. Kur ne të dorëzojë formularin, mos harroni ne mund të hyni në elementet e dhëna brenda e kësaj forme me atë variabël $ _POST. Deri më tani në histori nuk kemi dërguar ndonjë të vërtetë së bashku dhënave ende. Ne kemi vetëm tha se ne jemi duke e bërë një kërkesë AJAX dhe këtu është lloji i kërkesës që ne jemi duke e bërë. Tani ne kemi nevojë që në fakt të dërguar disa të dhëna në faqe. Për ta bërë këtë ne mund të përdorim këtë pronë të quajtur dhënave. Vlera e kësaj prone është në fakt një grup shoqerues. Arsyeja për këtë është se na lejon që të dërgojë më shumë se vetëm një pjesë e të dhënave 1. Kjo është arsyeja pse ne kemi këto formatimin e teksteve kaçurrel mbivendosur këtu brenda këtyre formatimin e teksteve kaçurrel tjera. Çelësat në këto vargjeve associative do të jetë e njëjta gjë si ato Emri atribuon elementet tona në formë. Kjo do të thotë se në qoftë se unë po dërgoj përgjatë një çelës të simbolit, që do të thotë faqja ime PHP mund të hyni në këto të dhëna me $ _POST [simbolin] ashtu si ne e bëmë më parë, kur ne ishim dorëzuar një formular. Dhe tani të dhënat aktuale ne duam të dërgoni do të jetë brenda vlera e këtij grup asociative. 

Ne ruajtur këtë tekst në një simbol ndryshueshme quajtur, dhe kështu që ne jemi të dërguar së bashku tani një çelës të simbolit dhe një vlerë të çfarëdo përdoruesi typed in Tani ne kemi bërë këtë kërkesë HTTP, fotografi PHP ynë ka ekzekutuar, dhe ai do të dërgojë disa të dhëna mbrapa tani për klientin se vetëm e bëri këtë kërkesë. Tani ne kemi nevojë për t'iu përgjigjur çfarëdo server na tha. Për ta bërë këtë ne kemi këtë pronë fundit këtu quhet sukses. Vlera e këtij çelësi suksesit është në të vërtetë do të jetë një funksion, dhe kjo është një nga gjërat me të vërtetë e ftohtë që ju mund të bëni me JavaScript. Jo vetëm që mund të keni ints ose vargjeve si brenda vlerës së një grup asociativ ne gjithashtu mund të ketë një funksion. Pra, duke thënë sukses, ky është çelësi im. Një zorrës së trashë thotë se këtu vjen vlerën, dhe tani vlera e kjo është në fakt një funksion. Pra, ne nuk kemi nevojë për t'i dhënë këtij funksioni një emër në vetvete. Ne vetëm mund të thonë se kjo do të jetë një funksion. Ajo do të marrë 1 argument. Argumenti për këtë funksion do të jetë çfarëdo server na dërgoi përsëri nga kërkesa. Ashtu si kur shfletuesi jonë bën një kërkesë, serveri dërgon diçka mbrapa dhe shfletuesi shfaq atë, në kontekstin e AJAX ne vetëm bërë një kërkesë, serveri dërguar diçka mbrapa, dhe tani ne kemi përfaqësuar se si një varg. Me këtë varg Unë vetëm do të doja për të shfaqur që në faqe. Për të bërë që unë jam do të ketë një përzgjedhës të fundit. Unë dua për të zgjedhur elementin me çmim ID. Kjo është vetëm një div zbrazët që unë kam krijuar në faqe, dhe unë dua të vendosur përmbajtjen e atij div të jetë çfarëdo server na dërguan përsëri. Unë kam modifikuar fakt quote.php pak. 

Në vend se të kryejë detyrën e quajtur dhe pasqyrim disa faqe, quote.php tani është thjesht do të shtypura nga vlera e aksioneve si një varg. Pra, nëse ju keni qenë në fakt vizitoni faqe, ju vetëm do të shihni se vargut të vogël e çfarëdo çmimi i aksioneve është. Një gjë e fundit që ne duhet të bëjmë këtu është vetëm sigurohuni këtë funksion të kthimit të rreme. Çfarë kjo do të thotë është se në qoftë se unë jam në brendësi të një mbajtës ngjarje dhe se mbajtës ngjarje kthen rreme në vend të kthimit të vërteta, që do të thotë se unë nuk dua ngjarje origjinale të zjarrit. Në këtë rast, në qoftë se ne nuk kemi ndonjë JavaScript dhe ne dorëzuar një formular, shfletuesi tonë të internetit do të thotë, "Unë jam duke shkuar për të dërguar të dhëna se bashku", dhe ata do të ju dërgojnë në një tjetër faqe. Sepse ne jemi duke përdorur AJAX tani, nuk ka nevojë për të dërguar përdoruesit në një faqe. Ne jemi vetëm duke shkuar për të shfaqur rezultatet dinamike në këtë faqe njëjtë. Ne me të vërtetë nuk duan ata të shkojnë kudo, dhe unë dua të qëndrojnë në të njëjtën faqe. Pra, duke u kthyer rreme, ne sigurohemi se forma nuk ka bërë që për ne. Le të marrin një vështrim në atë që ky fakt duket si. Faqja jonë quote duket njëjtë. Më lejoni të tërheq lart inspektorin këtu poshtë kështu që ne mund të shohim se çfarë po ndodh. Bëjnë atë një pak më pak i madh. Mos harroni, nëse kemi hapur deri tab Rrjetit, ky është vendi ku ne mund të shohim të gjitha kërkesat HTTP që po ndodhin në faqe. 

Për një simbol më lejoni të shkruani në AAPL dhe kliko Get kuotë. Tani ne pamë se një pjesë e Apple kushton një numër dollarë vetëm u shfaq në faqe, por URL nuk ka ndryshuar fare. Në fakt, këtu është kërkesa HTTP që kemi bërë vetëm. Ne kemi bërë një kërkesë të postoni në quote.php. Që e bën kuptim. Kjo është ajo që na dërgoi server prapa. Ajo nuk është më ky dokument HTML gjigant me imazhe dhe gjëra si kjo, kjo është vetëm një linjë të tekstit, dhe pastaj ne thjesht shfaqet linjën e tekstit. Nëse ne do të shkojmë përsëri në headers dhe të shohim se çfarë ne fakt ka dërguar në brendësi të kësaj kërkese HTTP, ne mund të shohim këtu poshtë që kemi dërguar përgjatë një kyç dhe një simbol i vlerës së AAPL, e cila është ajo përdorues shtypen in Kjo është e mirë, por kjo është ende pak i bezdisshëm. Unë ende duhet të klikoni këtë buton për të marrë të japin kuotën e aksioneve. Ne jemi njerëz të zënë dhe ne nuk kemi kohë për të klikoni butonat. Google realizuar këtë pak kohë më parë, kur ata implementuar Google Instant. Çfarë e bën Google Instant është si ju jeni të shtypni vetëm ajo fillon shfaqja e rezultateve për ju kështu që ju nuk duhet të shqetësohen për madje klikuar Kërko. Në fakt, një histori fun lidhur me këtë. Pasi Google Instant doli, njerëzit ishin si, "Whoa, kjo është super e mahnitshme." "Kjo është kaq i ftohtë." Dhe një student në Stanford poshtë cili ishte në atë kohë 19 bërë këtë vend të quajtur YouTube Instant. Të gjitha Instant YouTube nuk është efektive kërkoni YouTube çast. Pra, në vend që të shkojnë në YouTube.com dhe e goditi Kërko, kur filloni të shtypni në diçka si YouTube Instant CS50, ne mund të shohim këtu se ajo është duke u përpjekur për të në një lidhje të ngadaltë të internetit populloj këto rezultate jetojnë. Për të bërë që ne mund të bëjë në fakt një modifikim shumë e thjeshtë për quote.js dosjen tonë. Tani për tani ne jemi bashkëngjitur kësaj ngjarje, kur forma është dorëzuar. Ne nuk të vërtetë duan të bëjnë përdoruesit paraqesë atë formë më, kështu që le të zjarrit në vend këtë ngjarje çdo herë përdoruesi shtyn një kyç. Për ta bërë këtë le të parë të ndryshojë nga ngjarje të paraqesë në keyup. Kjo do të thotë se në vend se duke pritur për forma të paraqesë, çdo herë kyç është ngritur, diçka do të ndodhë. Kjo nuk ka kuptim të bashkëngjitni këtë ngjarje keyup në formën e tërë. Ne me të vërtetë vetëm kujdeset për atë kutinë e kërkimit. 

Për të zgjedhur që tani, ne mund të ndryshojmë këtë jetë, në vend se të japin kuotën e-formë, formë-kuotë dhe ne do të kemi një kontribut (type = text) ose ne mund të themi (name = simbol) - çfarëdo që ne duam. Tani ka një gjë e fundit që ne duhet të bëjmë. Kujtojmë këtu poshtë, kur kemi thënë kthimi rreme kemi thënë ne nuk duam që ngjarje parazgjedhur të zjarrit. Por kjo ndodh pikërisht kështu që nëse ne disable që tani, çdo gjë që ne shkruani në nuk do të shfaqen në shfletuesin më sepse kjo do të jetë sjellja e parazgjedhur të shtypni në një kuti teksti. Ne nuk duam të refuzo atë, kështu që le të shkatërroj ky kthim rreme. Nëse ne të shpëtuar atë dhe rifreskoni faqen, tani kur filloni të shtypni AAPL ju do të shihni se çmimi i aksioneve në fund këtu është duke përfunduar automatikisht. Kështu që këtu është CS50 Instant Financave. Në fakt një histori në lidhje me fun çast YouTube është se nxënësi vetëm lloj i shkroi atë si një projekt 1-nate, dhe ditën tjetër ai u ofrua një punë nga CEO YouTube. Pra, aq e thjeshtë sa që, ju CS50 studentët, projektet tuaja përfundimtare mund të merrni ju një punë në YouTube. Diçka si kjo është një ide me të vërtetë e ftohtë për një projekt përfundimtar, e drejtë? Ne kemi pasur disa funksionalitetin ekzistuese që kemi dashur të integrohen me të. Ne të përmirësuar user experience pak, dhe papritmas kërkoni diçka në YouTube çast mund të jetë shumë më e lehtë se të kërkoni për atë në YouTube rregullt. Pra, kjo është AJAX në një fjalë. 

Në shembujt që Jozefi u treguar, ne pamë një shumë të autocompletes, dhe ato janë autocompletes vërtetë, të vërtetë i dobishëm për shkak se ne nuk duhet të mbani mend - Për shembull, nëse ju nuk e mbani mend çmimin aksioneve për Apple dhe ne vetëm e di se është diçka aa, në vend se vetëm duke thënë për mua, "Një pjesë e kësaj gjë kushton shumë para këtë", Unë do lloj të doja të di se çfarë aksione të fillojë me AA. Ne mund të bëjmë që me të vërtetë mirë me bibliotekën bootstrap që është përfshirë tashmë brenda CS50 Financave. Nëse keni ardhur deri këtu me tag JavaScript dhe lëvizni poshtë për të Typeahead, kjo është vetëm një plugin bukur se dikush tashmë ka shkruar për ne, dhe ne lehtë mund të përdorni funksionet e saj si kjo. I shtypur në një A dhe këtu është një listë e disa shteteve që fillojnë me A. Le të thonë se unë mendoj se kjo është me të vërtetë të qetë dhe kjo është koha për mua që të përfshijë këtë në faqen time. Ajo rezulton se kjo është me të vërtetë, të vërtetë të thjeshtë. Le të hidhen mbi këtu për quote3.js. Fotografi tim duket pak më ndryshe. Këtu poshtë të gjitha AJAX gjëra sime është njëjtë. Unë dua të ngarkesës e të dhënave të aksioneve pa pasur nevojë të shkoni në një faqe tjetër. Por tani unë dua të përdorni këtë plugin. Dokumentacioni Bootstrap ka shembuj e madhe e pikërisht si unë mund ta bëjë këtë. Unë dua të them, "Ja input që unë dua të Autocomplete në," dhe unë jam duke shkuar për të thirrur këtë funksion të quajtur typeahead, dhe që do të trajtojë të gjitha stuff Typeahead për ne. Ajo do të nisja listën, ajo do të bëjë të gjitha filtrim tona. E vetmja gjë që duhet të dini është se çfarë të dhënat që ne jemi në autocompleting. Pra, kam gjetur këtë çelës vetëm duke lexuar dokumentacionin dhe duke kërkuar në shembujt. Nëse unë jap një çelës të burimit, vlera e këtij kyçe është vetëm disa grup të gjëra unë dua të Autocomplete në. Ky variabël erdhi nga kjo skedë tjetër. I hapur deri symbols.js. 

Kjo është vetëm symbols.js këtë koleksion të vërtetë, të vërtetë e madhe që përmbajnë strings e të gjitha këtyre simboleve të aksioneve nga NASDAQ. Nëse unë dua të hidhen përsëri në HTML, kështu jharvard, vhosts, globalhost, HTML, templates, quote_form. Që nga ajo është quajtur tani quote3.js, më lejoni të ndryshojë skedarin JavaScript unë jam përfshirë këtu. Tani unë kam quote3.js, kështu që unë jam duke shkuar për të ngarkuar në atë dosje JavaScript veçantë, ai që ka atë Autocomplete bootstrap. Tani kur unë hidhen përsëri në shfletuesin, rifreskoni faqen, dhe unë filloni të shtypni AA, ka autocomplete ime. Dhe kjo ishte me të vërtetë të thjeshtë si ajo. I kishte 1 linjë të kodit që sapo tha, "Këtu janë gjërat që unë dua të Autocomplete në," dhe papritmas unë kam këtë funksionalitet të vërtetë, të vërtetë të bukur me një shumë jo të tërë përpjekje në të gjitha. Si ju jeni zhvillimin e faqet e internetit dhe veçanërisht anën e përparme fund të gjërave, ju do të jeni për të gjetur këtë është rasti shumë. Nuk janë një, shumë shumë, shumë e bibliotekave të vërtetë cool lirë atje që e bëjnë atë super të lehtë për të bërë gjëra të tilla si kjo. Dikush mund të mendoj për ndonjë meta e thjesht autocompleting në këtë listë të madhe të simboleve? Çfarë mund të jetë diçka që nuk është e mirë me këtë qasje? Po. >> [Student] Time, në qoftë se ju keni një shumë të [padëgjueshme] Po. Tani për tani ne jemi shkarkoni këtë skedar të madh JavaScript dhe ka një shumë e simboleve. Dhe kështu që nëse ne kemi një ton të gjëra, ky lloj mund të rrisë latente e jo vetëm në kërkim por edhe shkarkimit skedarin aktual. Madhe. Çdo gjë tjetër? Tani për tani nuk ka asnjë kuptim të vërtetë rëndësi. Nëse unë të shkruani në një një, kompanitë që shfaqen këtu nuk mund të jetë kompanitë më të njohura që fillojnë me A. 

Para se të shkoj për të Apple, ajo mund të marrë disa karaktere më shumë për të gjetur atë që unë jam duke kërkuar për të. Kjo autocomplete nuk e ka këtë ndjenjë të rëndësisë. Është vetëm do të thotë: "Çdo gjë që përputhet unë jam duke shkuar për të shfaqur." Në vend të kësaj, unë do të doja të integrohen disi njëfarë rëndësie në kërkimet e mia. Nëse unë shkoj këtu për Yahoo! Financave, finance.yahoo.com, Në qoftë se unë të përpiqet për të hyrë në një simbol në faqen Yahoo! Financave dhe unë filloni të shtypni GOOG, unë kam këtë listë bukur të gjërave. Qartë, kjo duket si Yahoo! Financave është duke bërë diçka më të zgjuar këtu. Ata kanë njëfarë rëndësie dhe ata gjithashtu kanë informacion shtesë si emrin e aksioneve. Kjo është diçka që unë nuk mund të vërtetë të merrni vetëm me listën time të aksioneve të simboleve. Unë dua këtë dhe kështu që unë jam duke shkuar për të marrë atë. Për ta bërë këtë le të bëjnë disa gjëra. Le të parë të hapur deri inspektorin në këtë faqe sepse ne pamë se kjo faqe nuk është e ngarkimit në të gjitha, kështu që ajo është ndoshta duke përdorur AJAX disi të ngarkimit të dhënat e saj. Ne mund të gjeni se çfarë të dhënave është e ngarkimit. Në qoftë se unë klikoni në këtë tab Network, këto do të jenë të gjitha kërkesat që fillojnë të shkarkuar. Tani, nëse unë lloji në goo, ne mund të shohim se Unë kam vetëm një kërkesë të re HTTP. Kjo është ndoshta ku se të dhënat po vjen nga. Pa dyshim, në qoftë se unë shoh këtë URL, e cila është pak i quajtur cuditerisht, ne mund të shohim se kjo është saktësisht ku Yahoo është dërguar të dhënat e saj nga jashtë. 

Unë kam krijuar një skedar të veçantë të quajtur suggest.php që është shumë e ngjashme në frymë të funksionit lookup. Kjo është në thelb do të bëjë një pyetje në URL Yahoo, kthehet disa të dhëna, dhe dërgoni atë për mua. Tani, në vend se duke përdorur këtë listë të madhe, të madhe të simboleve, Unë mund të përdorin gjëra të këndshme Yahoo rëndësia, dhe unë nuk kanë për ta shkarkuar këtë dosje masiv JavaScript. Unë jam vetëm duke shkuar për të tërhequr poshtë në fakt simbolet përkatëse të aksioneve. Le të hidhen në këtë. Pra html, js. Ne jemi tani në quote4. Tani ne jemi duke përdorur këtë nuk listë e madhe e dosjeve JavaScript. Por ka një lloj i vogël i problemit të projektimit këtu. Ne kemi thënë se në një AJAX është asinkron. Çfarë do të thotë është se kur unë të bëjë një kërkesë AJAX, në mënyrë të drejtë këtu në linjë 8, ky është vendi ku kërkesë AJAX im është qëlluar në të vërtetë. Le të thonë se tani kam disa kodin këtu poshtë se do të bëjë disa gjëra doja të paralajmërojë përdoruesit apo diçka të ndryshojë në faqe. Çfarë nuk do të ndodhë është shfletuesi nuk do të presë për këtë kërkesë për të vazhduar para se të vijnë poshtë dhe goditur këtë linjë. Kjo është pjesa asinkron. Ajo do të bëjë këtë kërkesë dhe thonë: "Kur të keni mbaruar, "Kthehen dhe të thërrasë atë funksion që ju thashë për të thirrur në brendësi të suksesit." Kjo do të thotë që ne nuk mund të shkarkoni të gjitha rezervat paraprakisht. Ne kemi nevojë për të bërë kërkesën dhe prisni për diçka që do të vijnë përsëri. Kjo do të thotë se para se, ne thjesht mund të them bootstrap, "Ja lista e gjërave që unë dua që ju të Autocomplete në." Ne nuk mund ta bëjë këtë më, sepse ne nuk e dimë ajo që ne duam në fakt autocomplete në. Për fat të mirë, Bootstrap menduar për këtë, sepse ata janë njerëz të zgjuar atje, dhe ata në fakt na dha një tjetër mënyrë për të ngarkuar këtë plugin Typeahead. Para, vlera e kësaj prone burim ishte vetëm ky grup i madh i gjërave për Autocomplete në. 

Tani prona burimi është në fakt një funksion, dhe qëllimi i këtij funksioni është që të kuptoj se çfarë gjërat për Autocomplete në janë. Mënyra se si do të kuptoj se nga është ai do të kërkojë Financave Yahoo! çfarë gjërat më të mira për Autocomplete janë. Për të bërë këtë unë jam duke shkuar për të bërë një kërkesë shumë të ngjashme AJAX. Unë jam duke shkuar për të kërkuar këtë faqe në suggest.php. Unë dua të dërgoj përgjatë simbolet ende. Dhe tani suksesi im, dokumentacioni Bootstrap më tha që në mënyrë të populloj se lista e gjërave, të gjitha unë duhet të bëni është të kalojë në këtë grup tani në funksion callback. Por prisni një minutë. Nëse kjo është menduar të jetë një grup dhe AJAX është dërguar mua mbrapa tekst, si është e mundur kjo? Kjo paraqet një mënyrë të re të shkëmbimit të të dhënave JSON quajtur. Në këtë rast ne nuk jemi vetëm duke dërguar përsëri një varg të thjeshtë të tekstit. Tani ne jemi që kanë të bëjnë me këtë listë më kompleks të simboleve të aksioneve. Këto simbole aksioneve gjithashtu mund të përfshijnë gjëra të tilla si emri i kompanisë ose çmimet aktuale. Vetëm duke përdorur një varg të madh të gjatë që nuk është formatuar në asnjë mënyrë të parashikueshme nuk do të jetë mënyra më e mirë për të marrë këto të dhëna nga serveri Yahoo tek unë në një mënyrë që unë mund të lehtë të kuptojnë. JSON është një teknologji që merr përparësi se si ne krijojmë vargjeve associative në JavaScript. Kjo duket shumë si një grup JavaScript asociative, dhe në fakt, kjo është për shkak se ajo është. JSON qëndron për simbol JavaScript Object. Kjo është në thelb një format rënë dakord për transferimin e të dhënave mbrapa dhe me radhë. Ja ky objekt JSON JSON ose ky grup shoqerues është dërguar me disa të dhëna në lidhje me një kurs. 

Çelësat e kësaj grup janë gjëra të tilla si Natyrisht që ka një vlerë prej CS50, dhe këtu poshtë mund të shihni se unë mund të ketë një vlerë që është një grup. Unë nuk kam për të bërë gjëra të tilla si kuptoj nga vargjet dhe të kërkoni për presje dhe të bëjë gjëra të çmendur si kjo. Sepse kjo është deklaruar në këtë format JSON, JQuery JavaScript dhe tashmë kanë funksione për të kthyer një varg që duket si ky JSON në një grup aktuale JavaScript associative që ne mund të punojnë me të. Duke bërë që është aq e thjeshtë sa duke thënë se nuk është kjo, fotografi suggest.php, dërguar mua mbrapa thjesht një varg të tekstit, por unë e di se do të jetë dërguar mua mbrapa JSON. Kjo do të thotë se kjo JSON mund të konvertohet në një koleksion JavaScript asociative. Dhe kështu jQuery, unë do të doja që ju të bëni këtë për mua. Kjo do të thotë që ky parametër përgjigje këtu, kjo nuk është më vetëm një varg. Sepse ne kemi thënë se këtu vjen jQuery JSON disa, jQuery do të jetë mjaft i zgjuar për të thënë, "Ti kërkuar JSON?" "Unë jam duke shkuar për të kthyer atë në një grup shoqëruese për ju." Le të vërtetë të marrë një vështrim në skedën e rrjetit herë kemi quote4.js. Ne do të ndryshojë këtë dhe ringarkoni faqes. Tani unë jam duke shkuar për të shkruani në një-a përsëri. Unë kam bërë një çift të suggest.php kërkesa, por tani kjo përgjigje, në vend se vetëm të vargut, është JSON. Pra, unë kam një mbajtëse të hapur kaçurrel duke thënë: "Ja ku po vjen një grup shoqerues." 

Çelësi i parë dhe i vetëm i këtij grup associative quhet simbolet, dhe atëherë këtu është një grup i të gjitha simboleve përkatëse vijnë tani nga Yahoo! Financave, jo nga ajo lista gjigant. Kjo është se si unë thjesht mund të populloj këtë plugin Autocomplete me disa të dhëna që nuk vjen nga një skedar lokale që është paracaktuar tashmë por nga diçka tjetër. Ajo rezulton se ne në fakt mund të përfitojnë nga një teknologji të quajtur JSONP, ose JSON me mbushje, që do të eliminojë këtë ndërmjetës suggest.php. Por në vend që të bëjnë këtë, le të në vend të marrin një sy se si unë mund të përmirësojë këtë edhe më shumë. I really like Typeahead bootstrap së. Është me të vërtetë bukur. Por ne jemi duke marrë të mirë në JavaScript dhe ne duam të bërë këtë lloj të veten, ndoshta të marrë një vështrim në atë që ky plugin mund të jetë bërë. Le të më nuk përdorin këtë gjë Typeahead, dhe le të përpiqet të bëjë këtë listë të rezervave të sugjeruara veten. Këtu në quote6.php ne jemi duke shkuar për të filluar jashtë në të njëjtën mënyrë. Çdo kohë lloje dikush diçka, ne duam të bëjë një kërkesë AJAX. Kjo është e ngjashme me origjinale çast tonë CS50 Financave. Në vend se të bërë një kërkesë për quote.php, ne jemi tani duke bërë një kërkesë për këtë dosje të njëjtë si më parë, ky suggest.php, e cila është vetëm do të tërheqë të dhëna nga Yahoo! Financave. 

Përsëri, ne jemi ende duke pritur JSON, por tani pasi Typeahead nuk po e bën këtë për ne, ne gjithashtu duhet të dërgojë së bashku vlerën që është brenda kutinë e tekstit aktual. Tani ne e dimë se çfarë duhet të kërkojnë Financave Yahoo! për të, dhe kështu që tani këtu është funksioni që ne duam për të ekzekutuar një herë kërkesa kompleton. Ne nuk kemi plugin për të bërë listë për ne, kështu që këtu është ajo ku ne jemi në të vërtetë do të ndërtojë një listë e sugjerime. Për ta bërë këtë, ashtu si në PHP ne concatenated këto vargje të mëdha të HTML pastaj ne të shtypura e tyre, ne mund të bëjmë të njëjtën gjë e saktë në JavaScript. Së pari ne do të nisem varg quajtur këtë sugjerimet, dhe kjo është vetëm string do të përmbajë disa HTML. Ne duam që ajo të jetë një listë e gjërave, kështu që ne jemi duke shkuar për të nisem me këtë tag listë, dhe tani ne jemi duke shkuar për iterate mbi të gjitha simbolet që janë kthyer prapa ke ne. Mbani mend, sepse ne kemi thënë tipi: 'JSON', kjo nuk është një varg. Kjo është tashmë një grup për ne. Kjo është me të vërtetë cool. Ne thjesht mund të themi: "Unë dua që ju të append një element listë." Ne do të vënë atë brenda një element një në anën e që, ne do t'i jepte një klasë e sugjerime kështu që ne e dimë se çfarë është, dhe tani këtu është simboli që kemi marrë prapa nga Yahoo! Financave. 

Pasi ne kemi krijuar një element për secilin prej simboleve kemi marrë prapa, ne vetëm duam të mbyllur jashtë listës. Deri tani sugjerime përfaqëson këtë fragment të vogël HTML se kur vihet në një faqe do të jetë në listën e gjërave që ne jemi duke kërkuar për të. Tani le të vërtetë vënë atë në faqe. Të bëjë që unë kam krijuar në fakt një tjetër div bosh dhe unë kam dhënë atë një ID të sugjerimeve. Ashtu si ne kemi vendosur përmbajtjen e që do shfaqin div çmimin e të dhënave të aksioneve, Ne tani thjesht duan për të vendosur përmbajtjen e këtij div në çfarëdo ky varg është i cili përmban këto simbole. Duke përdorur këtë metodë HTML, ky variabël sugjerime, ky varg, është një varg i HTML. Unë dua që ju të merrni atë HTML dhe e vënë atë në brendësi të quajtur div sugjerime. Ne kemi bashkangjitur vetëm diçka për DOM tani. Ne kemi shtuar disa elemente të reja për DOM që ne tani mund të shfaqin në faqe. Le të shohim se çfarë kjo duket si. Nëse ne të ngarkesës në quote6 dhe tani kemi ardhur përsëri, tani kur kam filluar të shtypni AAPL, ne nuk kemi atë bootstrap Autocomplete, por ne tani kemi këtë listë që kemi bërë veten. Kjo është pak më shëmtuar se Typeahead bootstrap, për shembull, por kjo nuk na lejon që të bëjmë një gjë tjetër. Kur ne ishim duke kërkuar në atë plugin bootstrap, ne pamë se kur ne autocompleted, një nga vlerat autocomplete ishte AAPL. Kjo nuk mund të jetë aq e dobishme. Si përdorues, unë nuk mund të njohin menjëherë të gjitha simboleve të aksioneve. Ajo që unë jam ndoshta më shumë gjasa për të njohur janë emrat aktuale të kompanisë. Pra, nuk do të jetë me të vërtetë e dobishme në qoftë se në vend se duke thënë AAPL këtë tha diçka si Apple Inc Sepse ne kemi mbështjellë këtë veten, ne mund të vërtetë të lehtë ta bëjë këtë. Le të hapë dosjen tonë të fundit quote këtu, kështu që quote7. 

E njëjta gjë. Unë kam krijuar vetëm një skedar PHP që do të kthehet tek ne më shumë se vetëm simbole. Ai gjithashtu do të na japë përsëri emra të kompanisë. Dhe kështu që ne jemi duke bërë të njëjtën gjë. Ne jemi duke e bërë një kërkesë AJAX. Pasi kërkesa ka përfunduar, ne jemi duke shkuar për të ekzekutuar këtë funksion këtu, dhe kjo funksion do të ndërtojë një varg të madhe të elementeve. Por ndryshimi këtu është se vlera e këtyre listave nuk është më vetëm simbol, kjo është tani emri. Pra, ne kemi një problem të vogël. Kur ne përdorim lookup tonë, ne kemi nevojë për të kaluar disi atë simbol. Ne nuk mund të kalojë diçka lookup si Microsoft Corporation. Ne duhet të kalojë atë MSFT. Kur ne jemi me shkrim HTML, ne kemi shumë të ndërtuar në atributet e bukur. Një A mund të ketë lidhur me një href apo një klasë. Por ajo që ne duhet të vërtetë tani është për secilin prej këtyre lidhjeve të ketë një simbol të aksioneve të lidhur me të. Nuk ka built-in HTML atribut për simbol të aksioneve, por për fat të mirë, HTML5 na lejon të krijoni atributet tona të jetë çdo gjë që ne duam. Duke thënë të dhënave simbol-, unë kam futur një atribut të ri Unë bëra vetëm emri i të cilit deri, dhe kjo është në rregull, sepse unë prefaced atë me këto të dhëna. Ne jemi duke shkuar për të ruajtur brenda e ka simbol nga të aksioneve tani. Çfarë kjo do të thotë është se edhe pse ne jemi shfaqur vlerën e emrit të kompanisë brenda autocomplete tonë, ne jemi ende duke kujtuar simbolin që është e lidhur me çdo kompani. Mënyra që ne jemi duke bërë që është brenda e këtij elementi vetë. Kështu që do të thotë ne kemi nevojë për të bërë një ndryshim shumë. Kur ne click it tani, ne kemi nevojë të vërtetë të përfitojnë nga atributi simbol në vend se vetëm vlera e tij. Nëse ne back up, ne i japim një mbajtës ngjarje për sugjerimet. Kurdo që një nga këto sugjerime është klikuar tani, unë dua të bëj diçka. Ajo që unë dua të bëj është të ndryshojë vlerën e asaj kutinë e input. Tani unë dua të vendosur këtë funksion njëjtin val. 

Pra, pa argumente këtë funksion val kthehet tek ju atë që është tashmë në kutinë e tekstit, por në qoftë se ju t'i jepte një varg, ajo do të marrë atë varg dhe e vënë atë në kutinë e tekstit. Unë jam zgjedhur kutinë e tekstit në të njëjtën mënyrë. Është emri është brenda simbol i formës kuotë. Tani unë jam i dërguar atë vlerën e atributit të dhënave-simbol. Kjo gjë këtu është e re, kjo $ (këtë). Çfarë kjo i referohet është element që u klikuar. Ne mund të shohim këtu se ne nuk jemi bashkëngjitur një ngjarje click për secilin element me një klasë të sugjerim individualisht. Përkundrazi, ne jemi duke iu afruar këtë një pak ndryshe. Në vend të kësaj ne jemi duke thënë se sa herë brenda asgjë e kësaj div sugjerime, Mos harroni që është vetëm enë për atë listë, nëse diçka brenda këtij div klikohet dhe ajo ka një klasë e sugjerim, Unë dua që kjo ngjarje të zjarrit. Në thelb kjo do të thotë se çfarë ne mund të bëjmë është që ne mund të ripërdorimin këtë mbajtës të njëjtën ngjarje për të gjitha gjërat në listë. Pra, ne nuk duhet të ketë një mbajtës ngjarje për elementin e parë dhe një mbajtës i ndryshëm ngjarje për të elementit të dytë. Ne mund të themi në vend të kësaj, "Unë dua handler njëjta ngjarje të zbatohet për çdo gjë në listën time." Por ne duhet të dimë se cili element disi u klikuar. Kjo "kjo" fjalen përfaqëson vetëm se. Ky është objekti që është klikuar vetëm nga përdoruesit. Në qoftë se unë vetëm klikuar lidhjen 3, kjo paraqet elementin e asaj lidhje 3, që do të thotë se unë mund të merrni atributin e vet, të dhënat e-simbol, të cilat ne e dimë duhet të përmbajë simbolin që është lidhur me kompaninë e unë vetëm klikuar. Nëse ne hidhen përsëri në faqen tonë të financave, ne mund të shohim tani se dikur kam filloni të shtypni diçka si MSFT, ne jemi nuk marrë vetëm simbole të aksioneve, ne jemi tani duke kompanitë aktuale. Por kur unë klikoni mbi një nga këto kompani, ne mund të shohim se ne jemi në të vërtetë nuk e popullimit kutinë e tekstit me emrin e kompanisë por me çdo gjë që është ruajtur në brendësi të këtyre atributeve të dhënave. Dhe kështu që nëse unë në fakt të inspektuar një nga këto elemente duke klikuar drejtë atë dhe duke klikuar Inspect Element, ne fakt mund të shohim se çfarë kjo duket si. 

Mos harroni kjo është diçka që ne kemi krijuar brenda se për lak kur ne u ndërtuar atë varg të HTML. Ne mund të shohim këtu se këto të dhëna-simbol ka vlerën e MSFT, e cila është e madhe. Kjo është ajo që ne prisnim. Kjo është simbol dhe kjo është se si ne të marrë vlerën që ne e nevojshme për të përdorur brenda këtij kutinë e tekstit. Kjo është e mjaftueshme për formën kuotë, sepse kjo është lloj i mërzitshëm. Le të vetëm të bëjë disa përmirësime të shpejta në faqen tonë të portofolit. Nëse e keni përdorur CS50 Financave për një kohë dhe ju filloni blerjen dhe shitjen e një shumë të rezervave, përfundimisht kjo tabelë do të marrë goxha i madh, dhe ju do të jeni të duan një ticker aksioneve, natyrisht. Pasi tryezë është me të vërtetë, të vërtetë e madhe, ajo mund të jetë e dobishme për përdoruesit që të përpiqen për të kërkuar mbi të. Brenda kutinë e kërkimit në qoftë se unë të fillojë të shtypni diçka si Disney dhe duke kërkuar për Mickey Mouse aksioneve tim, ne mund të shohim se në tryezë tani është filtrim bazuar në atë që unë shtypur vetëm in Ky funksionalitet duket e komplikuar super, por është e vërtetë, të vërtetë e lehtë me jQuery dhe JavaScript. Kjo skedë portfolio.php përfshin një skedar të quajtur JavaScript portfolio.js. Le të marrin një vështrim në atë. Pra html, js, portofoli. Ja ku ne jemi duke bërë që në kërkim në tryezë. Gjëja e parë që duhet të bëni është të lidhni një mbajtës ngjarje në atë kutinë e tekstit sepse ne e dimë që ne duam funksioni tonë filtrim të zjarrit çdo herë që përdoruesi shtyn diçka, sepse ne nuk kemi kohë për butonat kërkim. Gjëja e parë që ne duhet të bëni është të kuptoj se çfarë është në kërkim për përdoruesit, ashtu si ne e bëmë më parë. Kjo fjalen referohet elementit aktual përdoruesi është bashkëveprojmë me. 

Sepse përdoruesi është bashkëveprojmë me kutinë e kërkimit, $ Kjo paraqet kutinë e kërkimit, kështu this.val na jep atë që është brenda kutinë e kërkimit përdorues aktualisht është shtypur. Pra, tani ajo që ne duam të bëjmë është që ne duam të iterate mbi të gjitha rreshtave brenda tryezën tonë. Për të zgjedhur të gjitha rreshtave në tabelën tonë, unë i dha atë tryezë një ID të portofolit tavolinë, dhe secili rresht është përfaqësuara nga një element TR, kështu që kjo përzgjedhës do të kthehet tek unë një grup i madh të gjitha rreshtave në tryezën time. Tani unë dua të iterate mbi këtë koleksion. Unë mund të ju një për lak, por jQuery fakt na ofron funksionin e bukur të quajtur "njeri". Atë që çdo njeri nuk është një argument i merr, dhe që argumenti është një funksion. Atë që do të bëjë është se do të aplikojë atë funksion për çdo element brenda e kësaj liste. Ky funksion merr një argument që është e, dhe kur ky funksion është ekzekutuar, kjo e do të zëvendësohet me rreshtin e parë, atëherë radhën e dytë, dhe pastaj radhën e tretë. Me këtë mënyrë, kjo është e njëjta gjë si drejtimin e një për lak dhe pastaj parafytyruar elementin aktual bazuar në brendësi indeksin e tuaj për lak. Në çdo përsëritje, sepse secili prej këtyre elementeve në tabelën, Unë dua për të kontrolluar nëse në tekstin e elementit - tekstin e qelizave brenda të rresht - përputhet me atë që unë jam duke kërkuar për të. Ky varg i madh e gjatë e komandave është se si unë mund ta bëjë këtë. Së pari, përsëri, kjo i referohet tani - sepse kjo është në brendësi të një funksioni të ri - ky është tani në radhën e tanishme në tabelë. Unë dua të të marrë rresht aktuale në tabelë, dhe unë dua të të marrë të gjithë fëmijët e saj. Mos harroni, është një pemë DOM hierarkike, që do të thotë se elementet të ketë një numër të fëmijëve. 

Këtë. Fëmijët funksion do të kthehet tek unë përsëri një rrjet të gjitha elementet e që janë bijtë e, në këtë rast, një rresht në tabelë. Kjo është thjesht qelizat brenda të rresht. Unë vetëm dua të kërkoni mbi qeliza e parë. Këtë. Funksioni i parë thotë jepni elementin e parë në këtë grup. Atëherë funksioni teksti thotë merrni mua saktësisht se çfarë ka brenda e atë qelizë pasi që unë dua të kërkoni mbi atë tekst. Së fundi, le të kthyer atë në vogle, kështu që ne mund të bëjmë pyetje rast tekst pandjeshëm. Së fundi, ne duam të shohim në qoftë se string brenda një tabelë përmban vargun ne jemi në kërkim për të. Funksioni indexOf në JavaScript bën vetëm se. Ajo na tregon nëse janë apo jo këtë varg përmban një varg. Nëse është e vërtetë se qeliza përmban atë që unë jam duke kërkuar për të, atëherë unë dua të bëni të sigurtë që ajo është treguar. Metoda shfaqje do të thonë: "Trego elementin". Nëse kjo nuk është rasti, atëherë kjo do të thotë çdo gjë që unë jam duke kërkuar për të është që nuk përfshihen brenda asaj rresht, dhe kështu që unë dua të fshehur është nga përdoruesit. Që të arrijë efekt të bukur se filtrim, ku nuk shohim tabelën tërë. Nëse jeni të interesuar në atë se si për të bërë këtë Ticker, si edhe, Ne do të postoj burimin online. Por është e vërtetë e thjeshtë. JQuery ka metoda të tmerrshme për këto animacione dhe manipulimin pronat CSS. Pra, kjo është ajo për mua. 

Çka pastaj shtrihet përpara? Si ju do të shihni në disa ditë, në finale projektet propozimi është për shkak. Propozimi përfundimtar projekte do t'ju kërkojë disa pyetje, por në mesin e tyre do të jenë tre piketa - një një "mirë" moment historik, një një moment historik të mirë, dhe një një më të mirë. Ideja qenë me të vërtetë për të ndihmuar ju djema vendosur pritjet tuaja kështu që ju do të jetë minimalisht i kënaqur me prodhimin e projektit tuaj përfundimtar dhe ajo do të jetë "mirë" për aq sa ju janë të shqetësuar. Por pastaj në interes të gjetjes ju për të arritur vetëm pak për diçka më të mirë apo diçka të mirë, ne gjithashtu do lloj të shtyjë ju drejt se si. The CS50 Hack-a-thon, ndërkohë, është në disa javë. Në mënyrë tipike, ne bëjmë këtë në një bazë të bazë të shortit për shkak të interesit, por shanset janë që ne do të marrin disa qindra prej nesh në autobusët anijes nga Harvard Square poshtë për Kendall Square ku Microsoft ka një strukturë të bukur të quajtur me vend "NERD" - i Kërkimeve New England dhe Qendra e Zhvillimit. Ne do të merrni atje rreth 8:00 Ne do të kemi pak ushqim. Rreth 01:00 ne do të kemi ushqim disa më shumë. Rreth 5:00 në qoftë se ju jeni ende zgjuar ne do të kryesojë mbi të IHOP ose të marrë të ju kthejnë në kampus. Objektivi nuk është që të zhyten në projekte finale së bashku me shokët e klasës dhe stafit. Pastaj një ditë më vonë është Panairi CS50, i cili ka për qëllim të vërtetë të jetë një mundësi për ju djema në vitrinë punën tuaj dhe arritjet për gjashtëmujorin e ndërsa fërkim supet me njëri-tjetrin dhe për të gjetur një kuptim të asaj që të gjithë e bëri. Me tha se, falë shumë për Tommy dhe të Jozefit, dhe ne do të shohim ju në hënën.  [Duartrokitje]