David J. MALAN: Lahat ng karapatan, kaya ito dito ay ang Myo braso banda, isang pares ng mga na namin mayroon para sa CS50 panghuling proyekto. At iyon ay isang demonstration namin nakapila up mo na nang maaga kung saan talaga ito medyo masikip braso banda rito nakikinig sa iyong mga paggalaw ng laman na pagkatapos ay nai-map sa software sa laptop Colton sa paglipas dito kung saan Nagkaroon ng iTunes at na kanta na naka-queue up. Sa halip na sa akin demoing ito, Colton naging sa lab malinaw na ang lahat ng linggo sa pagkuha ng isang demonstration handa para sa isang malakas ang loob volunteer. Kung may isang taong nais na dumating sa up-- nakita muna ang iyong kamay. Halika sa up. [00:01:09] Lahat ng karapatan. At ano ang iyong pangalan? [00:01:13] Madla: Uh, Maria. [00:01:14] David J. MALAN: Maria, mabait sa iyong nakikita. Halika sa paglipas dito. Hayaan akong kitang ipakilala sa Colton. Colton, ito ay Maria. [00:01:21] Colton: Hi, mabait sa matugunan mo. [00:01:23] David J. MALAN: Ang lahat ng karapatan, kaya hakbang isa, kami ay pagpunta sa may inilagay mo ito sa sa iyong bisig upang ito Kahanga masikip up na malapit sa iyong siko. At samantala, mayroon ng ipaalam ilagay sa aming Google Glass at kami paghaluin ang teknolohiya ngayon. [00:01:33] Colton: Una namin kailangang Hook ito sa mga bagay. [00:01:36] David J. MALAN: OK. Sa totoo lang, ilagay ang iyong mga braso ang pagpayag malapit sa cable hangga't maaari upang maaari naming unang i-sync up ito. [00:01:41] Colton: ni gawin ito Hayaan. [00:01:42] David J. MALAN: At samantala, kaya na lahat ng tao ay maaaring makakuha ng isang mas malapit sulyap, ipapakita namin palabunutan Andrew ng camera hanggang sa screen doon. Kaya mayroon kaming isang USB cable na Sini-plug sa gasa Maria ni. At ipaalam sa akin palabunutan screen Colton ni hanggang sa susunod na projector. [00:02:00] Kaya Colton ay pagrehistro ng mga device ngayon bilang isang Myo konektado sa cable. At ano ngayon Maria ni pagpunta sa gawin sa ilang sandali ay aktwal na maglakad sa pamamagitan ng ang mga hakbang sa pag-calibrate at turuan ang software kung paano ang kanyang mga kalamnan tumugon kapag gumawa siya ng ilang mga paunang natukoy na galaw na naiintindihan ang software. Kung gusto mong pumunta sa harap ng screen. OK, panatilihing sinusubukan. [00:02:30] Colton: Pumunta ganito. At tulad na. At ang lahat ng mga paraan sa kanan. Bumalik. [00:02:35] David J. MALAN: OK. Iba't ibang pananaw. Ito ay hindi mo. Ito ay sa amin. [00:02:40] Maria: OK. David J. MALAN: Hindi. Ilipat natin ito ng mas mataas na hanggang kaya Hayaang mas malapit sa iyong elbow, o kahit tighter. Lahat ng karapatan. [00:02:52] Narito pumunta namin. Ito ay isang mahusay na oras para sa CS52X. May pumunta namin. [00:02:57] Tunay na mabait. OK. Sirain ng mga daliri sa nakakatusok. [00:03:02] Tunay na mabait. Ikalat ang iyong mga daliri. Mahusay. -Wave kanan. Mausisa ito nagpapakita sa iyo gamit ang kaliwang hand-- [00:03:17] Colton: Oo, na wierd. David J. MALAN: Wave sa sa kanan at sumulong. Mabilis na inaabangan ang panahon na laktawan o sa susunod. Iyon ang OK Wave kanan. [00:03:25] Maria: ako don't-- maghintay. [00:03:26] David J. MALAN: Kailangan mo ng tulong? [00:03:28] Colton: Kaya ka ng pagpunta tulad nito. Maria: Ito ay pag-ang iba pang mga bagay, bagaman. Colton: Ito ay. David J. MALAN: Oo Hindi ko alam kung bakit ito nagpapakita sa iyo ng isang leftie. Colton: Bakit hindi ka try-- subukan lamang ng pagpunta tulad nito. [00:03:38] David J. MALAN: Walang? Siguro maabot ang iyong mga braso ang isang maliit na straighter at gawin itong mas matarik na katulad nito. Oo, OK, dumating sa. [00:03:48] Maria: Sorry. David J. MALAN: Ito ay hindi ang iyong kasalanan. Colton: Ito ay multa. David J. MALAN: Lahat ng Karapatan. Well-- [00:03:56] Maria: Dapat ba naming laktawan ito, pagkatapos ay i-? David J. MALAN: Oo, sabihin hayaan mo off ang hook. Kaya kung ang sinuman ay nais na gawin ang isang huling proyekto gamit ang cutting edge hardware, Napagtanto ito maaari lamang kumuha ng isang maliit na nagsisimula ginagamit upang. At this-- ang katotohanan ay ito ay talagang lubhang nagdurugo gilid. [00:04:10] Ito ay kung ano ang tinatawag na ang kit developer, na ay sinadya upang maging lubos isang pre-release nang sa gayon ay magawa nang eksakto tao this-- labanan dito, figure kung paano mga katawan ng mga tao gumagana gamit ang teknolohiya. Kaya kung nais mong pagkatapos, pagkatapos panayam, maaari naming ipaalam sa iyo darating at tumagal ng isa pang pag-iwa sa ito. Ngunit kung hindi man, ang isang round ng papuri, kung maaari namin, para sa Maria para sa darating sa up. [00:04:26] Maria: Salamat sa iyo. [00:04:28] David J. MALAN: Salamat sa iyo. Makikita manindigan naming ito, ngunit gagawin namin sa you-- kung paano tungkol sa isang ang stress ball dito? Oh, and-- if-- oo, salamat. Lahat ng karapatan. Kaya para sa mga kataka-taka, kung ikaw ay pamilyar sa mga tunog pagpipilian na ginawa namin doon mas maaga, isang kamangha-manghang TV ipakita na dapat mong ganap maging binge-panonood sa Netflix ay ang isang ito dito. [00:04:51] Tagapagsalita 1: Ladies at mga ginoo, isang salamangkero na may pangalang Josh. [00:05:04] David J. MALAN: At tila, ito ay isang bagay-text sa akin sa panahon ng panayam ngayon. Ako na nasabihan na Maria Nagkaroon kahapon ng kaarawan. Kaya maligayang kaarawan mula sa CS50 pati na rin sa Maria. [00:05:18] Kaya na maaari mong basahin sa buwang na ito mga ginoo dito, Steve Ballmer, na naging talagang klase ng 1977 sa kolehiyo, Itinigil kamakailan para sa Microsoft. Siya ay isang undergraduate dito, pagkatapos ng ilang taon na ang lumipas natagpuan ang kanyang sarili sa Stanford Business School kapag natanggap niya ang isang telepono tumawag mula sa isang kaibigan ng kanyang nag ay nanirahan down ang hall mula sa kanya dito sa Harvard. Pangalan ng kaibigang iyon ay Bill Tarangkahan, at sa panahon, siya ay sinusubukan upang mang-alap Steve na maging ang unang taong negosyo, talaga, sa isang maliit na kumpanya pangalanan ang Microsoft. [00:05:45] Isang mahaba kuwento maikli, Steve ay huli nanalo sa paglipas, Sumali sa Microsoft kapag sila Nagkaroon empleyado 30 lamang. At sa oras na siya Itinigil na medyo kamakailan, ang kumpanya ay nagkaroon ng 100,000 empleyado sa nakaraang ilang taon. At sa gayon ang isang website na kilala bilang humilig Ang naghanda ito pugay sa video na naisip namin na gusto namin Nagbahagi na nagbibigay sa iyo ng isang katuturan sa kung gaano karaming enerhiya Steve Dinadala sa anumang pagtatanghal siya ay nagbibigay. [VIDEO pag-playback] -Microsoft Parang 1/4 bata. Gawin umalis sa bahay bata. Sa kasong ito, hulaan ko Ako umaalis ng bahay. Uy Bill, whazzap? [00:06:23] -Wazzap? [00:06:24] -Hey, Wazzap? Na binigyan kami ng isang napakalaking pagkakataon. At ibinigay sa amin Bill na pagkakataon. Gusto kong pasalamatan Bill para doon. Nais mong masyadong ko. Ang bilis ng pagbabago Hindi pupunta na pabagalin. [00:06:42] Ito ay pagpunta upang makakuha ng mas mabilis at mas mabilis. Maaaring may ilang mga kakumpitensya na sa kasamaang palad, inalis! [00:06:54] Gustung-gusto ko kumpanyang ito. Oo! Ako ay isang PC, at gustung-gusto ko ang kumpanya na ito! [00:07:08] Mga Nag-develop, mga developer, developer, developer, developer, developer, developer, developer. Oo! Mga web developer! [00:07:19] Mga web developer! Mga web developer! Makinig sa kung ano pa sa iyo makakuha nang walang dagdag na bayad! [00:07:28] Ang MS-DOS executive, ng appointment kalandro, isang pile card, isang tala pad, ng orasan, ang isang control panel. At, maaari mong naniniwala ito? Reversie! [00:07:35] Isulat ang mga ito sa CD! I-post ang mga ito sa MSN! Ikaw-mail ang mga ito sa mga kaibigan! [00:07:40] Lahat sa isang click! Ang isa Microsoft, ang isa diskarte, isa team-- nakatuon, disiplinado, propesyonal, at dalubhasa sa lahat na aming ginagawa. Hayaan akong gumamit ng isang linya mula sa isang lumang pelikula. [00:07:52] Relasyon ay tulad ng mga pating. Ilipat ang mga ito nang pasulong o sila ay mamamatay. Talaga ako sa tingin tech mga kumpanya ay pareho. [00:08:01] [END VIDEO pag-playback] David J. MALAN: Kaya hindi namin kaya nasisiyahan sa ipahayag na Steve ay pagsali sa amin dito sa CS50 susunod na Miyerkules sa ang mga karaniwang lugar at oras dito. Space ay malamang na magiging limitado. At kaya sumali sa amin sa taong ito, mangyaring magtungo ngayon o makalipas ang ilang sandali sa cs50.harvard.edu/register. [00:08:22] At magpa-follow up kami sa pamamagitan ng Nagkukumpirma Martes spot. Hanapin ang inaabangan ang panahon na ang susunod na Miyerkules sa panahon ng panayam sa CS50. Ngayon, sa iba pang mga balita, nangyari kong matagpuan ito sa Ang Crimson lamang ang iba pang mga araw. [00:08:34] Ito ay lumiliko out na ang isa sa mga tauhan ng CS50 at hindi bababa sa isa sa mga mag-aaral CS50 ni ay kasalukuyang tumatakbo para sa UC presidente at bise-presidente, na dinala ako pabalik sa aking sariling araw pabalik kapag nawala ko ang UC halalan nang abang-aba. Ngunit ang magandang panig sa na ako palagi sabihin ang kuwento ay isa sa ako sigurado maraming mga kadahilanan Nawala ko ang halalan ay isang kumpletong kakulangan ng isang talento para sa mga pampublikong nagsasalita. At gayon pa totoo lang, ito ay nagdulot sa akin, na karanasan Sa tingin ko ang aking junior taon, upang aktwal na mag-sign up para sa Harvard Computer Society, na ang pangkat sa campus na pagpipigil sa iba't ibang mga teknikal na talk at iba pang mga bagay. At kinuha ko sa kanilang pagtuturo seminar at samakatuwid ay nagkaroon ng isang pagkakataon, isang magagandang pagkakataon, upang simulan ang paggawa sa eksaktong ito. Ngunit din, nagkaroon ako ng pagkakataon sa panahon ng karanasang ito magturo sa aking sarili ang lahat ng higit pang mga HTML. At kaya procrastinated ko kagabi sa pamamagitan ng naghahanap sa pamamagitan ng HTML batay website Ginawa ko sa katulad 1997, '98, para sa aking kampanya na kamukha ito dito. Alam ko. [00:09:29] Because-- at siyempre, abiso ang mga kamangha-manghang disenyo ng desisyon noong 1998 o watnat. Ang unang bagay na gusto mong user gawin sa oras ng pagbisita sa iyong website ay ang magkaroon upang i-click ang isa pang link lamang ipasok ang iyong website dito sa monghe sa likod tulad ng isang shrouded kurtina kung saan sa malas platform aking kampanya ay. At ito ay ang lahat ng makakakuha ka ng ngayon ay isang screenshot lang. Ngunit ako ay pagbabasa sa pamamagitan ng, tulad ng, ang aking mga poster kampanya kagabi at ang aking platform. [00:09:50] At ako ay kaya galit sa oras. Aking platform was-- ito ay kawili-wili. Kaya na calmed down na ako mula noon. Ngunit sa ibang araw, ako ay tumakbo muli at sana ay mas mahusay na-off ang oras na ito. [00:10:03] Kaya HTML, na wika na kung saan ginawa ko na in-- mo makikita sa lalong madaling panahon gumawa ng mas more-- ay isang bagay na napuntahan namin pinag-uusapan ng late at higit sa lahat paglalaan para sa ipinagkaloob ngayon na lumipat kami sa sa iba pang mga wika. Ngunit ni-pause para sa isang sandali lamang ipaalam at ilagay ang ilan sa mga bagay na ito sa konteksto. Kaya sa isang pangungusap, ano ang HTML? [00:10:18] O, ano ang ginagamit para sa? Sinuman? Oo. [00:10:20] Madla: Markup para sa mga website. David J. MALAN: Markup para sa website. Kaya ito ay isang markup language na Hinahayaan ka ng buuin ang isang web page. Header pumupunta dito, pamagat Dito, katawan dito napupunta. Ito ay boldface, ito ay italics-- na uri ng mga detalye. [00:10:33] OK, mabuti. Kaya CSS ay nagbibigay-daan you-- at ako kinuha ang ilang mga kalayaan doon na may naka-bold nakaharap at italics dahil na mas mahusay na ipinatupad sa ito. Is-- CSS ano? Sabihin sa isang pangungusap. Sinuman sa lahat. Oo. [00:10:46] Madla: Embellishments at mga bagay-bagay, tulad ng kung paano idisenyo ito. David J. MALAN: OK, mabuti. Embellishments na nagbibigay-daan sa iyo upang magdisenyo ito o stylize ito sa mga bagay tulad ng boldface at italics at kulay at din higit pa pinong haspe pagpoposisyon ng mga elemento. Ito ay isang uri ng hinahayaan kang makuha ang mga bagay sa huling milya upang kung, halimbawa, sa Pset7, maaari mong napansin sa iyong pahina ng portfolio kung ikaw ay sa puntong ito Mayroon na iyon ng default na talahanayan sa iyo gawin upang ipakita ang stock Kompanya ng gumagamit at marahil ay mukhang kahindik-hindik medyo cash sa pamamagitan ng default na walang white space. Uri Lahat ng mga crammed magkasama sa hanay at haligi. [00:11:18] Well, na may kaunting CSS, pati na maaari mong maisip, Maaari mong aktwal na-tweak na iyon at gawin itong isang bagay na mas pamilyar at marami prettier upang tumingin sa. Kaya CSS ay tungkol sa estilisasyon ng mga website. Ngunit isa pang pagkatapos ay ipinakilala namin wika, PHP, na nagbibigay-daan sa amin kung ano ang gagawin? [00:11:36] Hayaan ang gawin ng kung ano? Sinuman. Nakuha sa venture na lampas sa ang unang ilang mga hilera. Oo. [00:11:40] Madla: Bumuo ng mga dynamic na nilalaman. David J. MALAN: Perpekto. Bumuo ng mga dynamic na nilalaman. At maaari mong gawin ito sa anumang bilang ng mga wika. Mangyari naming gamitin ang PHP dahil ito ay sa bahagi kaya katulad sa C syntax. [00:11:50] Ngunit PHP eksakto na ginagawa nito. Hinahayaan nito ang pabagu-bagong mong buuin ang output. At ang ilan sa mga na output ay maaaring HTML, pati na karaniwang na-ginagawa namin. At din, dahil ito ay isang programming language, ay ang mekanismo sa pamamagitan ng kung saan maaari naming makipag-usap sa mga database. [00:12:03] At maaari kaming magsagawa ng mga query sa iba pang mga server tulad ng Yahoos at programming gumawa ng anumang bagay talaga na maaari mong kung hindi man ay Nais upang pilitin ang isang computer upang magawa. Kaya nagbibigay-daan sa PHP sa amin magsimula pabago-bago outputting nilalaman. Kaya sa pamamagitan ng logic na ito, hindi ko kinailangang isang pabago-bagong website pabalik sa 1998. [00:12:16] Ito ay lamang ng isang static na web page. Ng aking nilalaman ay kinailangang mapalitan sa pamamagitan ng manu-manong na may gedit o ilan katumbas. Ngunit PHP ay kung ano ang ginamit namin o ay maaaring magamit, sa halip, para sa isang bagay tulad ng Frosh IMS website, na ay dapat na kumuha ng pagpaparehistro at pamahalaan ang listahan ng mga users-- mga bagay na ay talagang ang pagbabago sa paglipas ng oras, kahit na mangyari namin gamitin ang Perl, sa ibang wika sa panahon. [00:12:35] At pagkatapos ay bilang wakas, ipinakilala namin SQL-- nakabalangkas na Query Wika. Kaya isa pang wika na ginagamit para sa kung ano? Ginagamit para sa kung ano? Puwede ba kaming Venture slight-- OK, hindi namin pupuntahan upang makakuha ng mas higit na malayo kaysa sa orkestra dito. Madla: Ito ay isang protocol ginagamit upang makipag-usap sa mga database. David J. MALAN: Isang protocol ginagamit upang makipag-usap sa mga database. Hayaan akong mag-tweak. Ito ay isang natural na wika na ginagamit makipag-usap sa databases-- Pinipili at mga pagpapasok at pagtatanggal at mga update at aktwal higit pang mga tampok na hindi pa namin kahit na dived sa ngunit maaaring gusto mong magkaroon ng explore-- upang galugarin para sa, sabihin nating, isang pangwakas na proyekto. Kaya may mga iba't-ibang mga piraso. [00:13:09] At sana Pset7, kahit na detalye nito ay masyadong mahaba, ito ay sadyang mahaba upang ituturo sa iyo sa pamamagitan ng kung paano ang mga bagay na maaari lahat i-type nang sama-sama. Ngayon, sa Monday, namin Ipinakilala ng aming huling wika na pormal na namin ipakilala sa ang course-- iyon ay, ang JavaScript. Ito, tulad ng PHP, ay isang kahulugan ng wika. [00:13:25] Ngunit isang pangunahing pagkakaiba Ipinanukalang ko sa Lunes ay na samantalang ang PHP ay isinasagawa o na binigyang-kahulugan sa server, na sa kasong ito ay ang CS50 appliance, o maaaring ilang mga komersyal na web server sa internet, JavaScript sa pangkalahatan ay isang wika na nagpapatakbo ng client side Hindi side-- kaya ng server sa browser. Alin ang sasabihin, tulad ng kapag binuksan ko up source code ng Facebook at natagpuan ang lahat ng ng mga .js file, ang implikasyon ay na kapag bumisita ka sa Facebook o sa karamihan mga website mga araw na ito, makakakuha ka ng hindi lamang ng HTML, hindi lamang CSS, ngunit ang maramihang mga JavaScript code ay madalas na nasa anyo ng .js ng mga file. At pagkatapos ito ay ang browser-- iyong sariling Mac o PC-- na executes ang code na iyon. [00:14:03] Ngunit ang iyong browser executes ito. Maaari mong isipin sa uri ng isang sandbox. Kaya na JavaScript code ay hindi dapat magagawang tanggalin ang mga file sa iyong computer. Hindi ito dapat magagawang magpadala ng mga email sa iyong ngalan. Ang iyong browser uri ng pinagbabawalan kung ano ang maaari mong gawin sa mga ito. [00:14:17] Kaya sa na kahulugan, ito ay isang maliit na mas malakas na, marahil, kaysa sa C. Ngunit JavaScript maaari, bilang isang bukod, gagamitin sa server, bagaman namin ay may posibilidad na huwag makipag-usap tungkol dito sa konteksto na iyon. Kaya ni itali ang mga ngayon hayaan. Isang linggo ang nakalipas plus, ipinakita namin ang ilang HTML sa left-- sobrang mayamot web page. [00:14:34] Lamang sabi kumusta mundo. At pagkatapos ay ipinanukalang ako sa kanan maaari naming uri ng magnakaw ideya mula sa aming mga talakayan ng mga istraktura ng data sa C at sa tingin tungkol sa kung paano ito hierarchical markup language sa kaliwa maaaring iguguhit o ipinatupad sa memory bilang isang aktwal na puno ng istraktura sa mga node at mga payo at ang mga uri ng mga detalye. Sa kanang, tinatawag naming na ang isang DOM-- Dokumento Bagay Model-- na lang isang magarbong paraan ng pagsabi tree. [00:14:56] Ngayon, kung bakit ay kapaki-pakinabang ito sa isipin na ito sa paraang ito? Dahil ngayon sa JavaScript, dahil mayroon kaming code na nakakakuha upang i-play sa kapaligiran, ang aktwal na HTML na ipinadala sa browser na at may na nai-load sa memorya ng browser sa isang puno sa computer ang iyong RAM ganito, maaari kaming gumamit ng JavaScript upang aktwal na tumawid o maglakad o paghahanap o baguhin ang DOM na puno gayunpaman gusto naming. Kaya sa katunayan, kung sa tingin mo tungkol sa facebook.com, kung gagamitin mo ang tampok na chat, kung paggamit ng Gmail at ang tampok gchat, anumang bagay kung saan mayroon kang mga mensahe darating na muli at muli at muli, ang mga mensahe ay marahil, tulad ng, li tag, mga tag Item List, siguro. [00:15:35] O siguro ang mga ito lamang divs na panatilihin ang paglitaw sa bawat oras na makakuha ng isang instant message. At nang sa gayon ay nangangahulugan lamang kung ano ang Facebook o Google ay ang paggawa ay anumang oras kang makakuha ng mensahe mula sa server, ang mga ito ay marahil ang paggamit ng JavaScript upang idagdag lamang ng isa pang node sa tree-- isa pang node na ito puno na pagkatapos biswal lamang ang hitsura tulad ng isang bagong linya ng teksto sa iyong screen. Ngunit ito ay naka-pagpasok sa ito istraktura ng data. [00:15:57] Kaya sa mga klase tulad ng CS124 at iba pa, ikaw ay aktwal na magsulat ng higit pang mga code laban mga istraktura ng data na katulad nito. Ngunit sa ngayon sa JavaScript, namin lamang ipinapalagay makuha namin ang lahat ng ang functionality na ito para sa libreng mula sa wika mismo. Kaya tingnan natin ang isang halimbawa ipaalam. [00:16:09] Hayaan akong buksan up ng isang file na tinatawag na form.html. Ito ay sobrang simple. Tila tulad ito. [00:16:15] Walang CSS, walang pag-iisip sa Estetika. Ito ay purong functional at tila ako humihingi ng email, password, muli ang password, at pagkatapos ay isang tseke sumang-ayon sa ilang mga tuntunin at kundisyon. Ano ang source code para sa Mukhang ay marahil isang bagay maaari mong hulaan na may Medyo ng pag-iisip ngayon. Mayroon akong isang form na tag dito. [00:16:32] Ang isang aksyon ay tila pagpunta sa pumunta sa isang file tinatawag register.php. Ang pamamaraan na pupuntahan ko gamitin ay makukuha. At pagkatapos Mayroon akong isang text field ang pangalan ay email. [00:16:40] Nakakuha ako ng isang field ng password ang pangalan ay password. Mayroon akong isa pang field ng password ang pangalan ay medyo nagkataon pagkumpirma. Ito ay lamang ng isa pang HTTP na parameter. [00:16:49] At pagkatapos ay hindi namin ginagamit namin na ang mga maliban sa dahil demo ng Frosh IMS sa class-- isang check box na ay katumbas ng uri lamang ng tseke. At Tatawag ako kasunduang iyon. Kaya ko nai uri ng nagkataon ngunit Maginhawa na may pangalang mga patlang na ito. Kaya ngayon kapag nakakakuha ang form na ito isinumite, tingnan natin kung ano ang mangyayari. Kung gagawin ko malan@harvard.edu, Makikita kong gawin ang isang password ng pulang-pula. Makikita kong gawin ang isang password sa wala. Hindi na makipagtulungan Hayaan. [00:17:10] At hindi ko ay lagyan ng check ang kahon. Hayaan akong i-click ang Magrehistro. At sinasabi nito, Hm, naka-rehistro. Hindi talaga. [00:17:16] Ngunit ang URL ay nagbago. Kaya ang form na ito ay malinaw na pinapayagan na sumailalim sa register.php. Pero siguro, dapat kong maging pansing ilan sa mga error na ito. Ngayon, sa Pset7 at ang ilan sa aming mga halimbawa panayam, Gusto naming i-print ang pangkaraniwang isang malaking pulang error na mensahe dito na nagsasabi, nawawala ang pangalan, o nawawalang mga password. Tapos namin na ang bago at namin nai tapos na-detect na error sa server side. [00:17:37] Ngunit maraming mga website mga araw na ito gawin pagkakita bahagi error ng client kung saan ang URL ay hindi nagbabago. Ang buong pahina ay hindi mag-refresh. Makakakuha ka ng instant na feedback mula sa browser. Siguro isang bagay na napupunta pula. [00:17:48] Siguro kang makakuha ng isang pop up. Ngunit hindi ka mag-aaksaya ng oras sa pagpapadala sa ang server ng data na hindi pa tapos. Kaya tingnan natin kung paano namin maaari makamit ang tampok na iyon pati na rin. [00:17:56] Hayaan akong pumunta sa form1.html, na kamukha ng parehong. Ngunit kung oras na ito gagawin ko malan@harvard.edu at nagta-type ako pulang-pula at hindi ko makikipagtulungan sa karagdagang ngunit i-click ang Magrehistro, mapansin ngayon. Hindi ito ang sexiest solusyon. Hindi bababa sa ko na nahuli ang error na ito. At ginamit ko na ang mga alerto pagpapaandar sa JavaScript-- na kung saan namin lamang gamit sa klase. Sa pangkalahatan, hindi mo dapat itong gamitin dahil maaaring masyadong mabilis ito lumayas ng kontrol. Ngunit mga password ay hindi tumutugma ang error. [00:18:19] Hayaan akong sige at i-click ang OK. Ngunit ano ang key takeaway dito ay na ang URL ay hindi magbago. Kaya hindi ko na bothered pag-aaksaya oras ng server na humihiling ito isang tanong na maaaring mayroon ako naisip out ang kasagutan sa aking sarili. [00:18:30] At ang mga gumagamit, kahit na na pakikipag-usap tungkol sa Mas mahaba ang user pagpunta sa isipin ang tungkol ito, ay pagpunta sa may instant na feedback. Walang latency sa ang pagkakakonekta ng network. Kaya tingnan natin ang source code ng ipaalam. [00:18:40] Form1.html hitsura structurally katulad up dito. Ang form na ito ay sa katunayan ang parehong. Ngunit sabihin makita kung ano ang ginawa ko down na dito. At mayroong iba't ibang mga paraan upang magawa ito. At ako nagawa mo na ang pinaka-tuwid tagasunod ngunit hindi pinaka-eleganteng paraan pa. Mayroon akong isang script tag. Pagkatapos ay tumawag ako document.getElementByID ('pagpaparehistro'). At mag-store ko halaga na sa form na ito, sa isang variable. [00:19:04] Kaya ano pa ako tapos? Maaari mong isipin document.getElementByID bilang isang espesyal na function na Nagbibigay sa iyo ng JavaScript Literal na mga kamay sa iyo ng isang pointer sa isa sa mga node o parihaba para sa puno na ito. Kaya ngayon na ang kung ano ang aming form variable sa JavaScript ay aktwal na tumuturo sa. [00:19:21] Kaya ngayon ang syntax ay naiiba mula sa C. Ngunit aming ginagawa ang ilang mga bagay dito. One, ang isang ito ay medyo kakaiba naghahanap, tiyak kumpara sa C. Ngunit tumingin sa 35 linya. Kaya sa kaliwang form.onsubmit. Isipin na onsubmit ay tulad ng isang patlang sa isang struct. Kung sa tingin mo ng variable na form ay pagiging lamang ng isang C struct, maaari itong magkaroon ng ilang mga patlang. [00:19:42] Bumalik sa araw, nagkaroon kami mga pangalan ng mga mag-aaral, ID, bahay, mga uri ng mga patlang. Sa tingin lang ng onsubmit ng sa isa pang field. Ngunit ito ay isang espesyal na field dahil ang browser ay preprogrammed ang aasahan .onsubmit upang hindi maging isang halaga tulad ng isang numero o string, ngunit upang aktwal na maging isang function o ang address ng isang function sa memory ng computer. [00:20:02] At sa katunayan, iyon ang dito ang keyword na ito. Ang sabi, ninyo ako ng bagong pag-andar. Ngunit kung ano ang pangalan nito magiging, tila? [00:20:09] Iniisip pabalik sa Lunes. Ano ang pangalan ng ito function na batay sa ang syntax na ito? Hindi, ibig kong sabihin, may malinaw na Walang pangalan ang associated-- tiyak wala sa kung ano ang nai-highlight ko dito. [00:20:21] Ngunit iyon lamang ang aktwal na OK. Ito ay isang hindi kilalang function, o isang lambda function na bilang ilang mga maaaring tawagan. At na lamang ay nangangahulugang ito ay isang function pa rin. Ito ay lang, hindi ka maaaring tumawag ito sa pamamagitan ng pangalan. Ngunit iyon lamang ang OK. Dahil muli, ang browser ay preprogrammed ng mga kumpanya tulad ng Google o Microsoft o Mozilla o sa iba na Alam lamang na kung ang .onsubmit patlang sa loob ng isang elemento ng form na may halaga, ituturing ito bilang isang function-- isang function pointer, kung habilin sa iyo. At tawagan ito kapag ang form ay isinumite. [00:20:46] Kaya kung ano ang code ay dapat na isagawa kapag ang form ay isinumite? Sa malas, lahat ng bagay sa loob ng kulot suhay. At ito lamang ang pangkakanyahan. [00:20:53] Maaari mong gawin ito tulad ng may posibilidad naming gawin sa CS50. Ngunit sa JavaScript, karamihan ng mga tao ay may posibilidad na panatilihin ito sa parehong linya dahil lang sa ito nang mas malinaw ay na nauugnay sa na function na keyword. Kaya ngayon kung ano ang aking ginagawa? [00:21:03] Kung katumbas ng form.email.value equals ang walang laman na string o wala, narito ang isang alerto kung saan ako pupunta sasabihin, Dapat mong ibigay ang iyong email address, at pagkatapos ay bumalik false. At ito ay na return false na Pinipigilan ang form mula sa isinumite. Samantala, kung ang halaga password ay blangko, Pupunta ako sa sumigaw sa user at sabihin, dapat kang magbigay ng isang password. [00:21:21] Samantala bagay nakakakuha may interes ng kaunti dito. Kung form.password.value hindi katumbas form.confirmation.value, ang iba pang mga patlang, sumigaw sa ang gumagamit na ang mga password Hindi tumutugma ang bilang nila ang hindi isang sandali ang nakalipas. At pagkatapos ay ang isang ito ay isang maliit na sexier dahil ako Alam Alam ko conceptually na naka-check ang pangalan ng isang check box na iyon. [00:21:40] Kaya ko lamang gumamit ng isang tandang punto upang sabihin kung ang tseke ay hindi checked-- ito ang Boolean halaga, totoo o false-- Magtatagal ako sumigaw sa user para sa kadahilanang iyon. Kung hindi man, kung makuha namin sa pamamagitan ng lahat ng mga kondisyon, hayaan bumalik ni lamang totoo. Hayaan ang form na isusumite. At ito ay pagkatapos mangyari. [00:21:56] Ni-type sa pulang-pula Hayaan. Hinahayaan suriin ang kahon, i-click ang Magrehistro. At ngayon pumunta ako sa pamamagitan ng destinasyon. Ngayon, walang database doon. Wala kagiliw-giliw na ang sa register.php. Kinakailangan ang isang bagay ko lang upang aktwal na makausap. Kaya hayaan mo akong i-pause, dito. Ang anumang mga katanungan sa kung ano ang iyong ginagawa lamang namin o kung ano ang ilan sa mga ito ng mga bagong syntax ay? OK, oo? [00:22:17] Madla: Kaya ang anumang mga checkbox ay awtomatikong isang Boolean. Wala kang idedeklara ito tulad na. [00:22:21] David J. MALAN: Tama. Anumang checkbox na ipinadala sa iyo mula sa isang HTML form sa iyong code ng JavaScript ay ginagamot, oo, bilang isang Boolean value-- totoo o hindi. Ito ay isang mahusay na tanong. Sapagkat ang iba pang mga halaga, ng Siyempre, naging teksto, aka string. [00:22:36] Ang lahat ng mga karapatan, kaya ipaalam sa akin -rewind ng kaunti pa. Ano ang buong punto ng ito? Lamang maging malinaw. Tulad ng, na namin alam, kahit na mula sa Pset7 at kahit na mula sa aralin noong nakaraang linggo ni halimbawa, na maaari malinaw naman namin ang $ _GET $ _POST Makita kung magbibigay sa amin ang user isang walang lamang halaga. Tandaan ang laman ng function sa PHP. [00:22:54] Kaya upang maging malinaw, kung ano ang isang kadahilanan maaari rin naming nais na gawin ang error na ito checking sa loob ng browser? Ano ang pag-uudyok dito? Oo. [00:23:06] Madla: Mas mabilis, at hindi mo gusto magpadala ng walang kasaysayan ng data sa server. David J. MALAN: Mahusay. Ito ay mas mabilis. Hindi mo na magpadala ng walang kasaysayan data sa server. [00:23:12] Kaya mo bumalik sa mas agarang tugon. At sa pangkalahatan, ang user karanasan ay mas mahusay. Isipin ang mga kahalili. [00:23:17] Kung para sa Gmail-- at noon ay sa kaso ng maraming taon na ang nakakaraan. Ipagpalagay na nakuha ng isang bagong email sa iyong Gmail account, ngunit ang tanging paraan sa pamamagitan ng upang makita na ay sa, tulad ng, -reload ang buong pahina. O ipagpalagay na nag-click ka sa isang link na basahin ang isang email. [00:23:29] Ang lahat ay may upang i-reload kaya na maaari mong makita ang email. O Facebook-- ka ng mensaheng chat. Hindi mo makita ito hanggang sa iyong i-reload ang pahina o i-click ang ilang mga link. [00:23:36] Tulad ng, ito ay magiging isang katakut-takot nakakainis na karanasan ng user. At ito ay kung ano ito ay tulad, malinaw, pabalik kapag nagpatakbo ako para sa UC at sa web ay mas dynamic na mas mababa at JavaScript ay hindi bilang popularized dahil ito ay ngayon. At bagay na nakakakuha magkano mas dynamic at marami pang iba client bahagi sa na kahulugan. [00:23:49] Subalit mayroong isang catch dito, at ito ay uri ng isang nakakainis na Huli ka. Dahil lamang sa idagdag mo ang client side pagkakita na tulad nito ay hindi nangangahulugan na maaari mong o dapat abandunahin pagkakita bahagi ng server. Mahalagang gusto mong ilagay ang iyong mga error ng pagsuri sa parehong mga lugar. Dahil kung ano ang isa ng araling natutunan mula sa artikulo Nabasa ko ang ilang mga sipi mula sa ugok CMS system-- Nilalaman Pamamahala ng System-- na noon ay pagpapatupad ng sistema ng pagpapatotoo nito, pag-login nito sa pamamagitan ng kung ano ang mekanismo? JavaScript. [00:24:20] Madla: JavaScript. David J. MALAN: JavaScript, eksakto, tama? Ito ay gumagamit ng JavaScript. At literal, mo guys mayroon -play nang kaunti marahil may Inspektor ng Chrome. At kung maaari ko ba itong mahanap, siyasatin elemento. [00:24:30] Hayaan akong pumunta sa paglipas ng gawin lahat ng mga pagpipilian ng Chrome. At ito ay kung paano kadali na hindi paganahin ang JavaScript sa isang browser. Lagyan ng check, wala nang JavaScript. [00:24:38] Kaya sa pagkamakatarungan, ng maraming ng web mga araw na ito ay lamang ng pagpunta sa masira dahil Gmail at iba pang mga sites-- Facebook-- ipinapalagay na Pinagana ang JavaScript. Ngunit kung gumagawa ka ng isang bagay ugok tulad ng pagpapatunay lamang ng pag-input mga gumagamit at pagsuri ito para sa error sa gilid client, isang kalaban ay madaling gawin ito. At pagkatapos ay kahit na mas matalinong kalaban na tulad mo guys ngayon ay maaaring gumamit ng Telnet o mabaluktot o command line lamang ang mga utos at talagang magpadala ng mga mensahe sa server na katulad ay hindi error-check. [00:25:05] Kaya ito ay higit pa sa isang desisyon na interface ng gumagamit kaysa ito ay isang aktwal na teknikal improvement-- pagpapatupad isang bagay na client gilid tulad nito. Kaya ngayon ng isang mabilis na sulyap, ngunit pagkatapos ay Kukunin ko umalinsunod sa mga online na lakad sa pamamagitan ng para sa isang ito. Sa form na dalawang, talaga namin nagpunta sa pamamagitan ng at nalinis up ang code nang kaunti. Ngunit ipaalam sa akin umalinsunod sa isa ng mga video na aming malamang naka-embed sa Pset8 na nagpapakita lamang sa iyo ng isang katulad syntax gamit ang isang library na tinatawag na jQuery, na isang super, super sikat na library sa JavaScript nang tapat na karamihan ng mga tao gamitin lamang ang mga araw at kahit lituhin ang bilang pagkatao mismo ang JavaScript. [00:25:37] At ito ay may gawi na kasangkot ang ilang mga palatandaan dolyar at mga keyword tulad ng dokumento sa mga panaklong dito. Ngunit muli, hayaan mo akong umayon sa ang ilang mga mas mabagal na mga tutorial online sa halip na makakuha ng nakatali sa syntax lamang. Ay lumipat sa Hayaan isang bagay na medyo mas malamig-lamig sa mga tuntunin ng mga application ng ito. [00:25:50] Kaya sa partikular, hayaan mo akong pumunta magpatuloy at magbukas ng mga ito dito. Halika sa. May pumunta namin. [00:25:59] Hayaan akong buksan up ang larawang ito dito. Hindi kinakailangan kumplikado naghahanap, ngunit ito Inilalarawan ng isang diskarte na tinatawag na AJAX-- Asynchronous JavaScript at XML, kung saan ang X para sa XML ay talagang hindi na talaga gagamitin. Ito ay may gawi na gamitin ang isang bagay tao na tinatawag na JSON. [00:26:13] Ngunit dito ay kung paano ang isang bagay tulad ng Google Maps o Google Earth gumagana. Subukan ito sa mabilisang, talagang Hayaan. Hayaan akong sige at buksan up ang Chrome sa aking browser. [00:26:21] At hayaan mo akong pumunta sa, sabihin, maps.google.com. At talagang, kung ikaw ay lumang sapat upang matandaan kung ano, tulad ng, MapQuest ay tulad pabalik sa araw, at marahil pa rin gumagana ang mga iyon tulad nito. Kapag ginamit mo upang maghanap para sa something-- 33 Oxford Street, Cambridge, Mass, ni gawin this-- mong hayaan gagawin talaga, kung Nais upang mag-pan pataas at pababa, pakaliwa at pakanan, Gusto mo mukhang isang malaking arrow sa tuktok, at ito Ipapakita nito sa iyo ng isa pang frame ng mapa dito. O gusto mong i-click ang sa kaliwa at mo ay pupunta sa paglipas dito, o isa pang pag-click at gusto mong pumunta sa paglipas dito. Ngunit sa halip ay mga araw, ng kurso namin lamang mang-ahas na maaari naming pumunta sa paligid ng Cambridge medyo mabilis sa pamamagitan lamang ng pag-click at pag-drag. Ngunit mapansin mayroong ilang mga glitches. [00:26:59] Kung gagawin ko ito mabilis sapat, kung ano ang mukhang nangyayari bilang i-drag ako ng isang maliit na masyadong mabilis para sa mga computer upang panatilihin up? Ano ang mong makita? Oo. [00:27:07] Madla: Ang pixels huwag i-refresh. David J. MALAN: Ang pixel huwag i-refresh. Mayroong actually-- at mo maaaring makita ito, talagang, kung pinapanood mo sa online at i-pause ito o talagang slows mga bagay pababa para sa once-- makikita mo na mayroong mga mga tile, kuwadrado, o parihaba na Nawawala mula sa mapa hanggang sa may split segundo sa ibang pagkakataon, mas maraming data, higit pang mga larawan aktwal lumitaw sa screen. At sa katunayan, kung gagawin namin ito sa pamamagitan ng pagtingin up Chrome's-- sabihin nating, Chrome-- tingnan natin. Hindi namin maaaring gawin iyon. [00:27:31] Oh, naku. Ni buksan ang maps.google.com Hayaan. Hayaan akong muli gumawa ng mas malaking window. [00:27:36] Bumalik sa 33 Oxford Street. Ano ang website ko sa kamakailan? Mayroon akong na ito, tulad ng, mga pribadong sigaw sa sarili ko na gusto kong pagkatapos ay instant message anumang mga kaibigan na naging online na nais marinig ito. Mayroong ilang mga website. Sa tingin ko ito Comcast-- kaya isang napaka-malaki Amerikano ISP. Maaari mong, kapag nagsa-sign up para sa bagong cable serbisyo modem o cable serbisyo ng TV, mayroon sila ng isang form napaka-makatwirang kung saan hihilingin sa iyo ang mga ito para sa iyong address. At mayroon ito ng kamangha-manghang Ang tampok na tinatawag na auto kumpleto, tulad ng Google, na nagsisimula upang punan sa sagot sa iyong tanong. [00:28:04] Ang problema ay, ginagawa nila auto kumpletong sa unang bagay na nagta-type ka. Kaya kung simulan mo ang pagta-type sa 33, ito ay magpapakita sa iyo literal bawat bahay sa Amerika na magsisimula kasama ang numero 33 bago magpatuloy sa asahan mong i-type ang nalalaman. Kaya kung nag-type ka ng 33 Oxford, pagkatapos ay ipinapakita nito sa iyo ang bawat kalye sa Amerika na may 33 Oxford sa ang pangalan nito, hindi isinasaalang-alang ng bayan na ikaw ay nasa. [00:28:25] At pagkatapos mong patuloy na mag-type. At sa wakas, napagtanto ng ito na ginagawa nila hindi alok na serbisyo sa iyong bahay sa Cambridge o isang bagay tulad na. Ngunit ang punto ay, ito ay ang pinaka tanga pagpapatupad ng auto kumpletuhin kailanman. [00:28:34] At lamang ako ng pagpunta off sa pasapyaw muli. Ngunit may mga mahusay na paraan upang gamitin ang JavaScript at hindi magandang paraan. At iyon ang hindi kinakailangan ang pinakamahusay na isa. [00:28:40] Ngunit ang punto dito, bago ito mahaba't maapoy na talumpati, ay upang buksan ang tool down na dito at buksan ang tool ng developer, bilang na hinihikayat namin ang bago, at upang panoorin ang Network tab bilang i-click ang ko talagang mabilis. At mapansin ang maramihang ng makuha ang nangyari kahilingan. Ang lahat ng ito nangyari dahil nag-drag ako. [00:28:57] At malamang, sa katunayan ng maraming mga hilera ngayon ay JPEG slash imahe Mga uri ng MIME o uri ng nilalaman. Iyon ay dahil sa kung ano ang chrome ay ginagawa sa bawat oras na nag-click ako at i-drag, i-click ang at i-drag, ay ito ay napagtatanto, oh, ako kailangang pumunta tanungin ang Google para sa tile sa mapa na higit sa dito, mabilis na i-download ito sa pamamagitan ng HTTP, at pagkatapos ay idagdag ito sa tinatawag na DOM sa web browser sa puno memory pagkatawan sa gayon na ang gumagamit, sa akin, na nakikita na-update na tile. At ito ay dahil sa isang diskarte na tinatawag na AJAX. Bumalik sa araw, ito talaga ay ang kaso na kung iyong Nais na baguhin kung ano ang nasa screen, Gusto mong i-click ang pataas, pababa, pakaliwa, kanan. At pagkatapos ay isang bagong pahina ay buksan. Ngunit mga araw na ito, lahat ng bagay ay mas dynamic. Nangyayari ito sa paraan ng aming mga kawani na tao gagawin Umaasa ito aktwal na gagawin interactive. At Nakakamit nito ito sa pamamagitan ng paraan ng isang diskarte na tinatawag na AJAX, na kung saan ay marahil pinakamahusay na ipinaliwanag sa pamamagitan ng isang halimbawa. Una, sabihin sa akin sige at buksan ang isang file tinatawag na quote.php sa pamamahagi code ngayon. [00:29:53] At pagkatapos ay hayaan mo akong gawin symbol-- Oops. Hayaan akong gawin simbolo = GOOG para sa ilan lang stock. O kaya naman talagang, ni gawin ang hayaan ng isa mula sa Pset LIBRE. Ipasok. [00:30:05] At ngayon mapansin kung ano ang nakukuha ko pabalik. Kaya ito ay isang tunay na maikling PHP file na ako nagsulat na borrows lamang ang code mula sa pag-andar ng paghahanap ng Pset7 ni at spits out gamit ang kulot suhay at quotes at pagtatanda ng tutuldok, tila, presyo sa kasalukuyang stock para sa kumpanya na pumasa ka sa pamamagitan ng get. Kaya ito ay iba mula sa karamihan ng kung ano ang hindi namin ginawa na ang paunawa ako Literal pagsigam out kung ano ang hitsura tulad ng code ng JavaScript. [00:30:27] Sa katunayan, ito ay isang JavaScript bagay. Sa katunayan, upang maging mas malinaw lamang, JavaScript Bagay Notation-- JSON-- lamang magarbong paraan ng pagsabi na Maaari kumakatawan sa data sa JavaScript magkano gaya ng magagawa mo sa PHP gamit ang key pares ng halaga. Kaya kung Nais kong idedeklara isang variable sa JavaScript sa kumakatawan Zamyla, para sa instance-- isang struct para sa Zamyla-- at kami tawagan ito mag-aaral, ang variable. Ang kanyang ID ay isa, bahay ay Winthrop, at pangalan ay Zamyla. [00:30:53] Ngunit ko rin magkaroon ng isang hanay ng mga bagay. Kaya kung gusto ko talaga magkaroon isang array sa JavaScript naglalaman ng maramihang mga naturang bagay, ito oras na kumakatawan sa mga kawani, Maaaring mayroon ko ang tatlong chunks ng code muli upang i-back upang i-back para sa mga tatlong dating miyembro ng kawani. Kaya ang syntax, medyo katulad ng both-- sa PHP. Ngunit ito ay partikular na JavaScript. Ito ay pagtatanda na bagay. Kaya kung ano ito kapaki-pakinabang para sa? [00:31:17] Kung sumulat ako code na spits out JSON-- JavaScript Bagay Notation-- mga bagay-bagay na Mukhang ganito o mga bagay-bagay na Mukhang istraktura Zamyla ni, Maaari ko talaga ito gamitin sa mga programa isulat ko. Hayaan akong pumunta sa ajax0.html. At ito ay hindi magkano too-- Naisip ibinigay sa Estetika. Ngunit panoorin kung ano ang mangyayari. [00:31:34] Hayaan akong sige at i-type libreng dito. I-click makakuha ng quote. At mapansin ang URL ay hindi nagbago. Pero ginawa ba akong makakuha ng mga pop up sa mukha presyo ng stock ngayon sentimos ng $ 0.15. Kaya hindi lahat na masama. Ngunit ang pagkakaiba ay kahit papaano, ang data na ito nang direkta ay dumating pabalik sa akin. Ngunit tumagal ng isang hakbang patungo sa ipaalam isang bagay na mas pamilyar. Sa bersyon ng isa sa mga ito, ipaalam sa akin -type libreng muli, i-click ang Kumuha ng quote, at now-- oh, ito ay talaga ang bersyon jQuery. Kaya ipaalam me-- ko ang hindi -fast-forward Medyo malayo sapat. Hayaan akong pumunta sa bersyon dalawa, na kung saan ako gusto. Pansinin kung ano ang iyong ginawa ko dito. Mayroon akong isang web page-- super simpleng bersyon ng anumang web page maaari mong gamitin ngayon sa isang field ng teksto dito para sa libre at pagkatapos ay tila lamang teksto. [00:32:14] Ito ay hindi isang form dito, tila. Ngunit kung nag-click ako makakakuha quote, mapansin ang aking web page ay tungkol sa upang baguhin waring ko Nalaman lamang ng isang bagong instant message o bilang bagaman ko lang ang inilipat sa -map at kailangan upang makakuha ng higit pang data pabagu-bagong idinagdag sa web page nang walang pagpapalit ng URL at ang gumagamit karanasan nagsisimula nagambala. Sa katunayan, ako pa rin sa eksaktong parehong place-- ajax2.html. [00:32:35] Kaya tingnan lamang sa halimbawang ito ipaalam at makita kung paano ito ang nangyayari. Hayaan akong pumunta sa ajax2.html. At mapansin muna ang form na ito. [00:32:44] Down dito, ako ko pag -off ang auto kumpleto. Minsan ay nakakakuha ito nakakainis kung ang browser Sinusubukan upang ipakita sa iyo ang iyong buong kasaysayan. Kaya maaari mo itong gawin sa pamamagitan ng HTML lamang sinasabi auto makumpleto off. [00:32:53] Ibinigay ko ang tekstong field ng symbol-- sa halip, isang ID ng simbolo. At ngayon, ito ay isang kawili-wiling tampok na ito. Hindi pa kami usapan tungkol span, ngunit maaari mong isipin ang tungkol dito tulad ng isang tag talata o div tag. Ito ay kung ano ang tinatawag na isang in-line na elemento, na ay nangangahulugan hindi ka makakakuha ng isang talata masira sa itaas at sa ibaba nito. Lamang Ito ay mamamalagi in-line na walang ng pagpindot sa pindutang katumbas ng maglagay. Kaya binigyan ko ang tipak ng HTML upang matukoy ang isang natatanging identifier nagkataon na ako na tinatawag na presyo. At mayroon akong isang pindutan Isumite. [00:33:21] Dahil ngayon up here-- at ito ay talaga sobrang nakamamangha kung gaano kaunting code maaari kang sumulat sa gawin medyo kapong baka things-- mapansin kung ano ang iyong ginawa ko dito kung ako mag-scroll pataas sa ulo ng pahinang ito. Unang sa Isinama ko aking ulo ng isang script tag na aktwal na Sumasangguni ng JavaScript-file sa ibang lugar. Ito ay mula sa mga organisasyon na nagsusulat ng jQuery, at ito ay lamang ng pagbibigay sa iyo ng pinakabagong bersyon ng kanilang jQuery library. [00:33:42] Kaya ito ay uri ng tulad ng matalim Kasama sa C o mangailangan sa PHP. Gamitin mo ang script tag may isang pinagmulan ng katangian. Ngunit ngayon ang aking sariling mga code ay magiging tama sa dito. [00:33:52] Pansinin Mayroon akong isang function na tinatawag na Quote. At mukha itong isang maliit na misteryosong sa unang tingin. Ngunit ang mang-ulol ito hiwalayin ipaalam. Bigyan mo ako ng URL sa isang variable na tinatawag. Magtalaga ito literal ang string na ito. Kaya, solong panipi, i-double quote sa Binibigyan lang ng JavaScript ako ng string. Ano ang ginagawa ng plus gawin? Pagdudugtong. [00:34:08] Kaya ito ngayon ang jQuery syntax na kumukuha ng isang maliit na nagsisimula ginagamit upang. Ngunit ito ay nangangahulugan pumunta lamang makakuha ako ng DOM node na ang natatanging identifier ay simbolo. Ang hashtag may ibig sabihin natatanging tagatukoy ng simbolo. [00:34:21] Ang dollar sign sa panaklong ibig sabihin lang, balutin ito sa jQuery isang uri ng lihim na sauce kaya makakakuha ka ng karagdagang pag-andar. At pagkatapos ay .val ay tila isang function, o bilang sabihin namin ngayon, isang paraan sa loob ng node na lamang nagbibigay sa iyo ng ang halaga. Kaya sa maikling, pangit at nakalilito bilang na ito ay tumitingin sa unang tingin, ito lamang ay nangangahulugan na makakuha ng user type sa, ilagay ito sa dulo ng string sa pamamagitan ng concatenating ito. Iyon lang. [00:34:43] Kaya ngayon, huling tatlong linya. Maaari mong kurutin ng maraming -andar out sa tatlong linya. Ang sign dolyar, bilang isang bukod, ay isang palayaw lamang para sa isang espesyal na global variable Literal na tinatawag na jQuery. [00:34:55] Dollar sign hitsura cool na lang. Kaya lamang uri ng komunidad jQuery ng ginagamit ito bilang kanilang espesyal na simbolo. Hindi ito ang ibig sabihin kung ano ang ibig sabihin nito sa PHP. Sa JavaScript, dollar sign ay tulad ng isang titik ng alpabetong o isang numero para sa isang variable. [00:35:07] Maaari kang magkaroon ng lang ito ng pangalan. Mukhang cool na lang. Kaya ang komunidad pinagtibay ito bilang palayaw para sa kanilang sariling library na tinatawag na jQuery. [00:35:13] At ito ay napaka-tanyag. Kaya makakuha ng JSON ay eksaktong iyon. Ito ay isang function na ang kakailanganin ng mga tao sa jQuery ay nagsulat na nakakakuha JSON mula sa isang server-- JavaScript Bagay pagtatanda. Mula sa kung ano ang URL naman upang makakuha ng impormasyon na iyon? Sa malas mula sa URL na ito dito. [00:35:27] At ano ang dapat gawin sa browser bilang lalong madaling ito ay makakakuha ng pabalik ang tugon na ito? At ito ay ang magic ng AJAX, kaya upang speak-- Asynchronous JavaScript sa XML. Ito ay mabuti upang makita na may tulad na isang simpleng halimbawa bilang namin ay may dito. [00:35:41] Ngunit ito ay asynchronous sa kamalayan na ang aking code kapag isagawa nagpadala ng mensahe sa server upang pumunta makakuha ng sa akin ang ilang JSON. At ito ay nangyari sobrang bilis na Nakatanggap ako ng tugon. Ngunit kung ano ang kawili-wiling ay na ito linya ng code ay hindi mag-tambay sa aking computer. [00:35:55] Hindi ko nakita ang isang umiikot na icon. Hindi ko mawala ang kakayahang maglipat ng aking mouse. Aking browser ay aktwal na ganap na multa. [00:36:01] Dahil sa paraan ng JavaScript pinangangasiwaan ang tugon mula sa server ay ang mga sumusunod. Irehistro mo kung ano ang nais mong tawagan ng callback, na Nangangahulugan lamang, hey, JavaScript. Sa sandaling ang server tumugon sa JSON, mangyaring tawagan ang hindi kilalang pag-andar na ito. [00:36:18] At mangyaring pumasa sa sa function na ito anumang string sabihin ang lahat ng server bilang isang argument na tinatawag na data. Kaya sa iba pang, mga salita, kung Pabago-bago ako assembling isang URL quote.php pagpasa sa simbolo tulad ng LIBRENG o GOOG o watnat, Pagkatapos ay ako na nagsasabi JavaScript pumunta makakuha ng URL na iyon. Tandaan na ang browser Mawawala upang magbalik ng bagay na kamukha ng nakita natin earlier-- na ito. [00:36:42] At kung ano ang pangalawang argumento dito upang makakuha ng JSON ay sinasabi ay tawagan ang function na ito kapag ang nakakakuha ng server pabalik ito man 10 millisecond mula ngayon o 10 segundo mula ngayon. At sa lalong madaling gawin mo, idagdag ang presyo sa pahina. Syntax na ito dito lang ay nangangahulugan pumunta makuha ang node mula sa puno na ang natatanging identifier ay price-- na span nakita namin nang mas maaga. [00:37:01] Ang pamamaraan na ito na tinatawag na HTML lamang sabi ni, pumunta palitan ang HTML na makikita sa data.price. Ano ang data.price? Well, sa browser, isipin, Nagpakita sa akin ito bumabalik. Kaya ito ay data. [00:37:14] At kaya ito ay isang maliit na misteryosong upang makita ang mga kuwit dito. Ngunit sa katunayan, hayaan mo akong gawin ito. Hayaan ang i-paste sa akin lang ito tunay mabilis sa gedit at ipakita ito tulad namin ay nagpakita ng Mas maaga istraktura Zamyla ni. [00:37:27] Ano ang server ay pagpapadala sa likod ay isang maliit na bagay na ganito ang hitsura. At kaya data.price ay lamang ng pagbibigay sa akin 0.1515. Kaya ng maraming gumagalaw bahagi dito ang lahat nang sabay-sabay. [00:37:39] Ngunit ang key takeaways ay mayroon kaming ito kakayahan upang gumawa ng mga karagdagang HTTP mga kahilingan gamit ang JavaScript nang hindi na kinakailangang i-reload ang pahina. At pagkatapos ay aming makakaya aktwal baguhin ang web page sa mabilisang. At ito ay lumiliko out na JavaScript at iba pang mga wika ay maaaring magamit ngayon ay hindi lamang upang mutate mga web page, ngunit upang aktwal na magsulat ng software sa isang aktwal na computer, hindi lamang nakakulong sa Chrome o mga katulad. [00:38:00] Sa katunayan, if-- Colton, gusto mo bang sumali sa amin back up dito gamit ang iyong code lab, at Chang pati na rin? Sabihin sige, pag-usapan ang tungkol sa hindi kilalang function at callback at talagang tuksuhin kapalaran dito may live na demo na may dumudugo teknolohiya gilid, isa sa aparato ang mga piling tao ng Paggalaw. Ngayon, ang device na ito, pagpapabalik, ay isang maliit na USB device pati na rin that-- na beautiful-- na plug in sa iyong USB port. [00:38:25] At pagkatapos ay nagbibigay ito ng pag-input sa anyo ng mga galaw ng tao sa pamamagitan ng paghanap gamit ang infrared beam, mahalagang, paggalaw mula sa iyong braso. Kaya kung saan ang kung ano ang Sinubukan Maria sa bago noon ay malakas, aktwal na pakiramdam kung ano ang pagbabago iyong braso, ito ang infrared na batay. Kaya ito ay naghahanap ng mga paggalaw sa loob ng ang uri ng globo ng isang paa o kaya ng aparato mismo. [00:38:46] Kaya bakit hindi ako tumagal isang pag-iwa sa unang na ito? At sa sige at itapon ipaalam up mo sa overhead dito. Kaya maglagay ng laptop Colton ni dito ipaalam. Mayroon kaming Andrew sa TV. At kung ano ang gusto mong sa akin upang gawin unang? [00:39:00] Colton: Sige lang ilagay ang iyong kamay sa paglipas ng ito tao at makikita mo ang ilang kamangha-manghang mga kuminang. [00:39:04] David J. MALAN: Bihirang mabait. Ito ay nangyayari sa lahat sa real time. OK. Ang lahat ng mga karapatan, at yep. Kaya mabait. Ang lahat ng mga karapatan, kung ano pa ang maaari naming gawin? [00:39:15] Colton: Pumunta sa susunod na screen at makita. [00:39:17] David J. MALAN: Lahat ng karapatan. [00:39:19] Colton: Ang isang masaya maliit na laro kung saan mo makakuha upang gumawa ng mga robot. [00:39:21] David J. MALAN: Lahat ng karapatan, kaya ito ay pekeng kamay na nagpapakita sa akin kung ano ang gagawin. Colton: Oo Kaya sige lang at grab ang isa sa mga bloke at ilagay ito sa itaas ng katawan na robot ni. David J. MALAN: Oh, mayroong aking kamay. Oh. OK, karapat-dapat sambahin. Maghintay ng isang minuto, OK. May pumunta namin. [00:39:41] Colton: ginawa ko ang isa sa aksidente. [00:39:43] David J. MALAN: OK, magagawa ko na ito tao. Diyablo! Kapag kami ay pagsasanay na ito noong nakaraang gabi, alam mo kung ano ang devolved sa? [00:39:51] Tulad ito. OK. Susunod isa? [00:39:55] Colton: Oo naman. [00:39:56] David J. MALAN: Lahat ng karapatan, at mayroong isang third. Lahat ng karapatan. Colton: At sa isang ito, mo makakuha ng to-- David J. MALAN: Oh, isa ito maganda. Colton: --yeah, pumili hiwalayin ito ng bulaklak. David J. MALAN: OK. Walang? Hindi nasagot. [00:40:14] Colton: Oh, mayroong kang pumunta. [00:40:15] David J. MALAN: Ah, Tumingin sa iyon. Tunay na mabait. Well, bakit wala 'kinukuha namin ang isang volunteer dito na nais na dumating sa up. Paano ang tungkol doon sa berdeng, ito? [00:40:27] Ang lahat ng mga karapatan, at sabihin have-- sa halip ng paggawa na, ang ilan sa iyo maaaring kilala sa larong ito here-- kunin ang mga lubid, marahil? Tingnan natin Hayaan. Mayroon kaming aming mga salamin sa ibabaw dito? [00:40:37] OK. Salamat sa inyo. Ano ang inyong pangalan? [00:40:39] Madla: Laura. [00:40:40] David J. MALAN: Laura? Nice upang makita. Kung hindi tututol kayo ng paglalagay Google Glass sa iyong mga salamin sa mata. Ito ay Colton. [00:40:46] Colton: Hi. Masaya akong makilala kayo. [00:40:48] David J. MALAN: OK, dumating sa paligid. Ang lahat ng mga karapatan, kaya kung ano ang iyong pagpunta sa gawin dito, ang pag-play ito bago, ay ilagay ang iyong kamay sa ibabaw ang Leap Motion dito. At ngayon ay dapat ilipat ang iyong arrow. Oh, nope. [00:40:57] Madla: Hindi. [00:40:58] David J. MALAN: Aming ayaw pa upang lumabas. OK, maghintay. Sa paglipas dito. Kaya abiso bilang hawak mo ang iyong daliri sa ibabaw ng isang bagay, Nagsisimula ang mouse upang pumunta berde, na kung saan ay kung paano mo i-click. [00:41:06] Kaya mag-hover sa play. At daliri isa lamang ay multa. At ngayon mag-click sa maliit na berdeng tao sa kaliwa. At ngayon matagal hanggang sa ito ay pumupuno up berde. Mahusay. Ngayon, tulad ng, antas ng isa hanggang tuktok. [00:41:16] Madla: Oo, gusto naming antas ng isa, dito. [00:41:20] David J. MALAN: Mahusay. OK, kaya ang kailangan mo gawin ay kunin ang mga lubid. Ang iyong cursor ang isang puting down na doon. [00:41:28] Tunay na mabait. Ang lahat ng mga karapatan, ito ay tungkol sa upang makakuha ng mas mahirap. Kaya pindutin nang matagal ang iyong daliri sa ibabaw ng susunod na ngayon. Mahusay. Isa ito mahirap. [00:41:39] Madla: Oh tae. OK. Nais ni ito upang pumunta na paraan. Oh tae, that-- [00:41:44] David J. MALAN: Oo. Pangalawang layunin ay upang makakuha ng lahat ng mga bituin. Ang lahat ng mga karapatan, sa susunod. [00:41:53] Tingnan natin kung maaari kang makakuha ng mga third isa ito Hayaan. Mahusay. OK, pumunta doon. [00:42:06] Oo naman. Oh, napaka-mabait. Lahat ng karapatan. [00:42:11] Kaya bakit hindi namin itindig dito ngayon? Hayaan ang sinuman dumating sa up ng gustong maglaro. Kaya magkano ang Laura aming mga boluntaryong Salamat. At kami ay nakikita mo sa Lunes. [00:42:18] Madla: marahil gusto mo ang mga pabalik. [00:42:21] Tagapagsalita 2: Sa susunod na CS50--