1 00:00:00,000 --> 00:00:00,988 2 00:00:00,988 --> 00:00:09,880 >> [MUSIC nagpe-play] 3 00:00:09,880 --> 00:00:13,360 >> Tagapagsalita 1: Well, dito tayo, ang huling P hanay sa CS50. 4 00:00:13,360 --> 00:00:17,040 Bumati inyong sarili mula sa pagkakaroon ng dumating sa ngayon dahil ang iyong unang halo 5 00:00:17,040 --> 00:00:20,090 mga mundo at nagpi-print out pyramids para sa Mario. 6 00:00:20,090 --> 00:00:21,930 Nagsagawa ka ng isang website noong nakaraang linggo. 7 00:00:21,930 --> 00:00:25,110 At kami ay pagpunta sa ginagawang isa pa ngayong linggo, isa na nagbibigay-daan sa iyo upang 8 00:00:25,110 --> 00:00:28,570 magmaneho sa paligid ng Harvard campus, pagkuha up miyembro ng kawani CS50, at 9 00:00:28,570 --> 00:00:31,910 nagdadala sa mga iyon pabalik sa kanilang residential mga bahay. 10 00:00:31,910 --> 00:00:35,400 >> Ngayon noong nakaraang linggo kami ay nagtrabaho sa PHP, isang wika gilid server. 11 00:00:35,400 --> 00:00:38,250 Para sa mga ito P set, nagsisimula pa kami ipinakilala sa JavaScript, na isang 12 00:00:38,250 --> 00:00:40,600 wika panig ng client. 13 00:00:40,600 --> 00:00:44,010 Kaya ipaalam sa tumagal ng isang pagtingin sa ilan sa mga pamamahagi code na ibinigay sa 14 00:00:44,010 --> 00:00:46,210 ka para sa P set. 15 00:00:46,210 --> 00:00:49,700 >> Sa folder ng JavaScript, ay mayroong maging isang bungkos ng mga file sa JavaScript. 16 00:00:49,700 --> 00:00:53,600 Mayroong buildings.js, na naglalaman ng isang array ng mga gusali sa paligid ng Harvard 17 00:00:53,600 --> 00:00:57,340 campus, kasama ang kanilang impormasyon at posisyon. 18 00:00:57,340 --> 00:01:01,630 Houses.js ay isang array ng Harvard residential mga bahay, kasama ang kanilang 19 00:01:01,630 --> 00:01:04,030 mga latitude at longitudes. 20 00:01:04,030 --> 00:01:07,020 Passengers.js Naglalaman ng hanay ng mga pasahero - 21 00:01:07,020 --> 00:01:08,600 ang mga miyembro ng kawani CS50 - 22 00:01:08,600 --> 00:01:11,640 na ikaw ay nagdadala pabalik sa kanilang residential mga bahay. 23 00:01:11,640 --> 00:01:16,450 >> Math3D.js, na naglalaman ng maraming mga function na gawin sa kilusan. 24 00:01:16,450 --> 00:01:19,500 Kung ikaw ay mathematically isip, pagkatapos ay maligayang pagdating kong kumuha ka ng isang hitsura. 25 00:01:19,500 --> 00:01:23,530 Ngunit hindi mo kailangang maunawaan lahat ng bagay sa doon. 26 00:01:23,530 --> 00:01:26,710 Shuttle.js, na deal na may kilusan ang shuttle ni. 27 00:01:26,710 --> 00:01:31,450 At index.html ay ang home page kung saan ang lahat ng bagay ang mangyayari, talaga, kung saan ang 28 00:01:31,450 --> 00:01:33,610 user ay nakikipag-ugnayan sa site. 29 00:01:33,610 --> 00:01:39,110 >> Service.css ay ang estilo ng CSS sheet, na kung saan, bilang karagdagan sa Twitter 30 00:01:39,110 --> 00:01:43,960 Bootstrap library, mga kontrol paano index.html hitsura. 31 00:01:43,960 --> 00:01:48,190 At pagkatapos ay mayroon din namin service.js, na Naglalaman ang mga pag-andar ng serbisyo para sa 32 00:01:48,190 --> 00:01:49,010 ang shuttle. 33 00:01:49,010 --> 00:01:53,010 At dito ay kung saan ka magiging pagpuno ng mga ilan sa mga mag-dos. 34 00:01:53,010 --> 00:01:56,600 >> Ngayon ipaalam sa tumagal ng isang pagtingin sa mga bagay at nag-uugnay array sa JavaScript, 35 00:01:56,600 --> 00:01:59,360 na para sa lahat ng mga layunin at mga layunin ng ay mapaghahalinhinan. 36 00:01:59,360 --> 00:02:03,030 Kung Nais kong gumawa ng isang bagay sa isang variable na tinatawag na isang wand, ako ay 37 00:02:03,030 --> 00:02:04,290 Ipinahahayag ito. 38 00:02:04,290 --> 00:02:08,789 At sa loob ng mga kulot tirante gagawin ko tukuyin ang core ay kabayong may sungay. 39 00:02:08,789 --> 00:02:10,220 Wood ang cherry. 40 00:02:10,220 --> 00:02:12,710 At ang haba ay 13. 41 00:02:12,710 --> 00:02:16,370 >> Ngayon ay maaari ko rin ma-access ang mga halaga ng mga bagay gamit ang 42 00:02:16,370 --> 00:02:18,270 nag-uugnay array pagtatanda. 43 00:02:18,270 --> 00:02:22,610 Kaya wand index ng core, maaari ba akong magtakda na katumbas ng kabayong may sungay, o 44 00:02:22,610 --> 00:02:24,710 suriin na, kung kailangan ko. 45 00:02:24,710 --> 00:02:26,510 O maaari ko bang gamitin ang tuldok operator. 46 00:02:26,510 --> 00:02:30,280 Wand tuldok kahoy ay katumbas ng seresa, at iba pa, at balik sa gayon. 47 00:02:30,280 --> 00:02:33,930 Kaya nakikita mo na nag-uugnay array at bagay sa JavaScript ay pagpunta sa maging 48 00:02:33,930 --> 00:02:37,720 mapaghahalinhinan, at kalooban dumating sa lubos na madaling gamitin. 49 00:02:37,720 --> 00:02:41,570 >> Pagkatapos makita natin ang isang array ng mga gusali sa buildings.js. 50 00:02:41,570 --> 00:02:43,870 Muli, isang array ng mga bagay. 51 00:02:43,870 --> 00:02:48,500 Kung Nais kong gumawa ng isang array ng mga pinakamahusay na mga gusali sa Harvard campus, pagkatapos ay 52 00:02:48,500 --> 00:02:49,710 Gusto ko gawin itong tulad ng sumusunod. 53 00:02:49,710 --> 00:02:55,250 Gamit ang pagtatanda sa bagay, kung saan Mag-imbak ko root, pangalan, address, 54 00:02:55,250 --> 00:03:00,260 latitude, at longitude para sa bawat solong gusali sa bagay. 55 00:03:00,260 --> 00:03:02,930 >> Ng mabilis na makipag-usap tungkol sa mga variable ng Hayaan sa JavaScript. 56 00:03:02,930 --> 00:03:07,760 Tulad ng PHP, JavaScript variable ay mahina o maluwag na-type. 57 00:03:07,760 --> 00:03:14,120 Upang lumikha ng isang lokal na variable, prefix mo pangalan ng variable na may V-A-R, var. 58 00:03:14,120 --> 00:03:17,010 >> Ngayon sa JavaScript, mga pag-andar habilin limitahan ang saklaw ng variable. 59 00:03:17,010 --> 00:03:20,600 Kaya kung mayroon kang isang lokal na variable sa loob isang function, pagkatapos ay iba pang mga pag-andar 60 00:03:20,600 --> 00:03:22,060 Hindi maaaring ma-access ito. 61 00:03:22,060 --> 00:03:26,090 Ngunit hindi tulad ng C, loop at kundisyon ay hindi limitahan ang saklaw ng isang variable. 62 00:03:26,090 --> 00:03:30,600 >> Kaya kahit kung ipinahayag mo ito sa loob ng isang kalagayan, ang buong pag-andar habilin 63 00:03:30,600 --> 00:03:32,810 may access dito. 64 00:03:32,810 --> 00:03:35,820 Ngayon walang var, ang variable Magiging global. 65 00:03:35,820 --> 00:03:39,170 Kaya kung ipinahayag mo lang ang pangalan at magtalaga ng isang halaga, pagkatapos ay i-variable na 66 00:03:39,170 --> 00:03:41,900 ay magiging isang global variable sa JavaScript. 67 00:03:41,900 --> 00:03:48,480 >> Ngayon sa bahay, mayroon kaming isang nag-uugnay array ng mga bagay na uri ng bahay, kung saan 68 00:03:48,480 --> 00:03:52,100 bawat bahay ay isang latitude lamang at longitude. 69 00:03:52,100 --> 00:03:55,140 Pagkatapos ay mayroon kaming mga pasahero array, na kung saan ay isang array 70 00:03:55,140 --> 00:03:57,370 ng uri ng bagay na pasahero. 71 00:03:57,370 --> 00:04:01,620 Kaya bawat pasahero ay may username, isang pangalan, at ng bahay. 72 00:04:01,620 --> 00:04:04,840 Pansinin na akong nakikitang ng uri pasahero, na talagang lamang ay nangangahulugan 73 00:04:04,840 --> 00:04:08,150 na ang bawat bagay ay may parehong key halaga ng pareho. 74 00:04:08,150 --> 00:04:12,830 Kaya ang bawat uri ng object na pasahero ay may isang user name, isang pangalan, at ng bahay. 75 00:04:12,830 --> 00:04:14,850 >> Kaya kung ano ang kailangan namin upang gawin para sa P set? 76 00:04:14,850 --> 00:04:20,779 Well, kailangan namin upang payagan ang mga gumagamit na pumili up miyembro ng kawani, upang maipakita ang lahat ng 77 00:04:20,779 --> 00:04:25,090 ang mga miyembro ng kawani na kasalukuyang nasa ang aming shuttle, at sa drop ang mga ito off. 78 00:04:25,090 --> 00:04:29,280 At pagkatapos ay gagamitin din namin makipag-usap tungkol sa mga dagdag na tampok na maaaring ipinapatupad para sa 79 00:04:29,280 --> 00:04:30,980 ang shuttle hanay P. 80 00:04:30,980 --> 00:04:33,610 >> Ngunit-usapan natin ang tungkol sa pickup muna ipaalam. 81 00:04:33,610 --> 00:04:37,480 Ang mga mukha ng CS50 kawani ay inalisan nakatanim sa buong campus, kung saan ang bawat 82 00:04:37,480 --> 00:04:41,750 mukha ay ipinatupad bilang isang marka lugar sa 3D na lupa, at bilang isang 83 00:04:41,750 --> 00:04:44,030 marker sa 2D na mapa. 84 00:04:44,030 --> 00:04:47,880 Kaya kapag nag-click ang mga pickup button, gusto naming idagdag sa malapit 85 00:04:47,880 --> 00:04:49,590 pasahero sa shuttle. 86 00:04:49,590 --> 00:04:53,650 At gusto rin naming alisin ang kanilang mga lugar markahan mula sa mundo, at alisin ang kanilang 87 00:04:53,650 --> 00:04:58,060 marker mula sa mapa, na nagpapahiwatig na ang mga ito ay sa aming shuttle ngayon. 88 00:04:58,060 --> 00:05:02,520 >> Kaya paano ko nakita naming kung pasahero Nasa hanay ng aming mga shuttle? 89 00:05:02,520 --> 00:05:04,610 Well, ang function ng distansya - 90 00:05:04,610 --> 00:05:08,770 kaya shuttle tuldok distansya, ang pagpasa sa ang latitude at longitude, habilin 91 00:05:08,770 --> 00:05:12,030 kalkulahin ang distansya mula sa kasalukuyang posisyon ng shuttle papunta sa 92 00:05:12,030 --> 00:05:15,850 ituro na tinukoy mo sa na ibinigay ng latitude at longitude. 93 00:05:15,850 --> 00:05:19,180 Kaya maaari mong gamitin ito upang makalkula ang distansya mula sa shuttle papunta sa 94 00:05:19,180 --> 00:05:20,310 pasahero. 95 00:05:20,310 --> 00:05:24,040 >> Ngunit kung paano ang kilala mo kung saan ang mga pasahero ay? 96 00:05:24,040 --> 00:05:27,510 Well, na kung saan kakailanganin naming i-edit ang populate function. 97 00:05:27,510 --> 00:05:32,500 Panahanan ng mga tao lugar lahat ng mga miyembro ng kawani at pasahero sa mundo, 98 00:05:32,500 --> 00:05:36,300 at sa mga mapa, ngunit hindi maiimbak ang kanilang mga lokasyon. 99 00:05:36,300 --> 00:05:39,850 Kaya marahil maaari mong maiimbak ang kanilang mga ilagay ang mga marka at mga marker 100 00:05:39,850 --> 00:05:41,570 sa ilang mga pandaigdigang array. 101 00:05:41,570 --> 00:05:45,780 >> Ngayon ay mayroong na ay isang pandaigdigang array pag-iimbak ng impormasyon mula sa pasahero. 102 00:05:45,780 --> 00:05:49,960 Ang mga pasahero array na tindahan sa bawat pangalan ng pasahero at ang kanilang mga bahay. 103 00:05:49,960 --> 00:05:54,985 Kaya marahil maaari kang magdagdag ng ilang mga parameter doon sa mga pasahero bagay. 104 00:05:54,985 --> 00:05:59,290 >> Upang matulungan kaming nakakita ng lahat ng pasahero sa loob ng saklaw ng aming shuttle, sabihin 105 00:05:59,290 --> 00:06:02,500 loop sa pamamagitan ng lahat ng pasahero sa mga pasahero ng array. 106 00:06:02,500 --> 00:06:07,790 A para sa loop sa JavaScript maaaring tumingin isang bagay na tulad nito, na halos kapareho sa 107 00:06:07,790 --> 00:06:12,910 mga para sa loop sa C. O maaari naming gamitin ang isang alternatibo para sa loop istraktura. 108 00:06:12,910 --> 00:06:17,130 >> Para sa var i sa array, kung saan ako Magiging pa rin ang index. 109 00:06:17,130 --> 00:06:20,740 Ngunit hindi mo kailangang tukuyin ang haba ng array na tuldok 110 00:06:20,740 --> 00:06:23,310 kondisyon, at i plus plus. 111 00:06:23,310 --> 00:06:26,140 Ang bawat lokasyon ng pasahero ay ibinigay sa pamamagitan ng kanilang marka lugar. 112 00:06:26,140 --> 00:06:29,800 >> Ngunit ang marka lugar ay hindi ang latitude at longitude ang. 113 00:06:29,800 --> 00:06:34,575 Mayroon kaming upang ma-access ang mga parameter sa pamamagitan ng pagkuha ng geometry, gamit get 114 00:06:34,575 --> 00:06:35,900 geometry sa marka lugar. 115 00:06:35,900 --> 00:06:39,630 At pagkatapos ay sa sandaling mayroon kaming ang geometry, pagkuha ng alinman sa latitude o ang 116 00:06:39,630 --> 00:06:42,600 longitude, ang paggamit ng mga pag-andar. 117 00:06:42,600 --> 00:06:45,680 >> Kaya ngayon alam namin kung gaano upang makita kung pasahero ay nasa loob 118 00:06:45,680 --> 00:06:47,920 saklaw ng aming shuttle. 119 00:06:47,920 --> 00:06:52,050 Sa sandaling mayroon kaming mga pasahero, kami ay nais na magdagdag ng anumang mga pasahero na 120 00:06:52,050 --> 00:06:53,140 sa loob ng saklaw na iyon. 121 00:06:53,140 --> 00:06:57,580 Gusto naming payagan ang mga ito upang lumukso sa, at kumuha ng puwesto sa aming shuttle, ngunit lamang 122 00:06:57,580 --> 00:06:59,640 kung kami ay may sapat na puwang para sa kanila. 123 00:06:59,640 --> 00:07:04,120 >> Ang upuan shuttle tuldok array habilin ipahiwatig kung ang upuan ay walang laman, o 124 00:07:04,120 --> 00:07:05,890 kung sino ang nasa na upuan. 125 00:07:05,890 --> 00:07:11,170 Kaya kung ang isang upuan ay walang laman, pagkatapos ay na upuan ay magiging walang bisa. 126 00:07:11,170 --> 00:07:15,930 Kaya umulit sa ibabaw ng upuan array, pagsusuri para sa mga walang laman na upuan, pag-iimbak 127 00:07:15,930 --> 00:07:20,020 pasahero sa mga upuan hanggang sa iyo Walang anumang higit pang mga walang laman upuan. 128 00:07:20,020 --> 00:07:23,330 At sa kasamaang-palad, ang anumang iba pang mga pasahero na kailangang maghintay para sa 129 00:07:23,330 --> 00:07:26,000 susunod na oras ay sa paligid ng shuttle. 130 00:07:26,000 --> 00:07:30,280 >> Sa sandaling makakuha sila sa shuttle, magpapadala kami gusto alisin ang kanilang mga marka lugar, na 131 00:07:30,280 --> 00:07:32,540 ay kanilang larawan sa mundo ng 3D. 132 00:07:32,540 --> 00:07:38,030 Kung Nais kong alisin ang isang lugar mark p, pagkatapos Gusto ko makakuha ng lahat ng mga tampok 133 00:07:38,030 --> 00:07:42,790 mula sa aking lupa, mula sa Google Earth, at pagkatapos ay alisin na partikular na lugar 134 00:07:42,790 --> 00:07:45,910 markahan gamit ang removeChild function. 135 00:07:45,910 --> 00:07:51,360 Pagkatapos bilang wakas, alisin ni ang marker ipaalam, sa icon sa 2D na mapa para sa anumang 136 00:07:51,360 --> 00:07:53,650 pasahero na pagpili namin up. 137 00:07:53,650 --> 00:07:59,790 Upang alisin ang isang marker, m, pagkatapos ay idedetalye ko isakatuparan lamang m tuldok setMap null. 138 00:07:59,790 --> 00:08:02,920 Gawin ito para sa anumang mga pasahero sa loob ng range, at natapos mo na ang pickup. 139 00:08:02,920 --> 00:08:05,056