1 00:00:00,000 --> 00:00:00,988 2 00:00:00,988 --> 00:00:09,880 >> [เล่นดนตรี] 3 00:00:09,880 --> 00:00:13,360 >> ลำโพง 1: ดีที่นี่เรามี P ชุดสุดท้ายใน CS50 4 00:00:13,360 --> 00:00:17,040 ขอแสดงความยินดีด้วยตัวเองจากที่มี มาเพื่อให้ห่างไกลตั้งแต่ทักทายครั้งแรกของคุณ 5 00:00:17,040 --> 00:00:20,090 โลกและการพิมพ์ออกมา ปิรามิดมาริโอ 6 00:00:20,090 --> 00:00:21,930 คุณทำเว็บไซต์เมื่อสัปดาห์ที่แล้ว 7 00:00:21,930 --> 00:00:25,110 และเรากำลังจะทำให้อีกคนหนึ่ง ในสัปดาห์นี้อย่างใดอย่างหนึ่งที่ช่วยให้คุณ 8 00:00:25,110 --> 00:00:28,570 ขับรอบมหาวิทยาลัยฮาร์วาร์หยิบ ขึ้น CS50 พนักงานและ 9 00:00:28,570 --> 00:00:31,910 นำพวกเขากลับไปยังพวกเขา บ้านที่อยู่อาศัย 10 00:00:31,910 --> 00:00:35,400 >> ตอนนี้เมื่อสัปดาห์ที่แล้วเราทำงานใน PHP ภาษาด้านเซิร์ฟเวอร์ 11 00:00:35,400 --> 00:00:38,250 สำหรับการตั้งค่า P ​​นี้เรากำลังได้รับการแนะนำให้รู้จักกับ กับ JavaScript ซึ่งเป็น 12 00:00:38,250 --> 00:00:40,600 ภาษาฝั่งไคลเอ็นต์ 13 00:00:40,600 --> 00:00:44,010 ดังนั้นลองมาดูที่บางส่วนของ รหัสการจัดจำหน่ายที่ให้ไว้กับ 14 00:00:44,010 --> 00:00:46,210 คุณสำหรับการตั้งค่า P ​​นี้ 15 00:00:46,210 --> 00:00:49,700 >> ในโฟลเดอร์จาวาสคริปต์จะมี เป็นพวงของไฟล์จาวาสคริปต์ 16 00:00:49,700 --> 00:00:53,600 มี buildings.js ที่มีเป็น อาเรย์ของอาคารรอบฮาร์วาร์ 17 00:00:53,600 --> 00:00:57,340 มหาวิทยาลัยมีข้อมูลของพวกเขา และตำแหน่ง 18 00:00:57,340 --> 00:01:01,630 Houses.js เป็น array ของฮาร์วาร์ บ้านที่อยู่อาศัยของพวกเขาด้วย 19 00:01:01,630 --> 00:01:04,030 ละติจูดและลองจิจูด 20 00:01:04,030 --> 00:01:07,020 Passengers.js มี อาร์เรย์ของผู้โดยสาร - 21 00:01:07,020 --> 00:01:08,600 CS50 พนักงาน - 22 00:01:08,600 --> 00:01:11,640 ที่คุณจะนำกลับไปที่ บ้านที่อยู่อาศัยของพวกเขา 23 00:01:11,640 --> 00:01:16,450 >> Math3D.js ที่มีจำนวนมาก ฟังก์ชั่นจะทำอย่างไรกับการเคลื่อนไหว 24 00:01:16,450 --> 00:01:19,500 หากคุณมีใจรักทางคณิตศาสตร์ แล้วผมยินดีต้อนรับคุณดู 25 00:01:19,500 --> 00:01:23,530 แต่คุณไม่จำเป็นต้องเข้าใจ ทุกอย่างอยู่ในนั้น 26 00:01:23,530 --> 00:01:26,710 Shuttle.js ที่เกี่ยวข้องกับ การเคลื่อนไหวของรถรับส่ง 27 00:01:26,710 --> 00:01:31,450 และ index.html เป็นหน้าแรกที่ ทุกอย่างเกิดขึ้นจริงๆที่ 28 00:01:31,450 --> 00:01:33,610 ผู้ใช้โต้ตอบกับเว็บไซต์ 29 00:01:33,610 --> 00:01:39,110 >> Service.css เป็นแผ่นลักษณะ CSS, ซึ่งนอกเหนือไปจากทวิตเตอร์ 30 00:01:39,110 --> 00:01:43,960 ห้องสมุดบูต, การควบคุม วิธีดู index.html 31 00:01:43,960 --> 00:01:48,190 แล้วเรายังมี service.js ซึ่ง มีฟังก์ชั่นการให้บริการสำหรับ 32 00:01:48,190 --> 00:01:49,010 รถรับส่ง 33 00:01:49,010 --> 00:01:53,010 และที่นี่เป็นที่ที่คุณกำลังจะเป็น กรอกในบางส่วนของการดอส 34 00:01:53,010 --> 00:01:56,600 >> ตอนนี้ขอใช้เวลาดูวัตถุและ arrays สมาคมใน JavaScript, 35 00:01:56,600 --> 00:01:59,360 ซึ่ง intents และวัตถุประสงค์ สามารถใช้แทนกัน 36 00:01:59,360 --> 00:02:03,030 ถ้าผมอยากจะทำให้วัตถุตัวแปร เรียกว่าไม้กายสิทธิ์ที่ฉันจะ 37 00:02:03,030 --> 00:02:04,290 ประกาศว่า 38 00:02:04,290 --> 00:02:08,789 และภายในวงเล็บปีกกาที่ฉันจะ ระบุหลักคือยูนิคอร์น 39 00:02:08,789 --> 00:02:10,220 ไม้เชอร์รี่ 40 00:02:10,220 --> 00:02:12,710 และระยะเวลา 13 41 00:02:12,710 --> 00:02:16,370 >> ตอนนี้ฉันยังสามารถเข้าถึงค่า ของวัตถุที่ใช้ 42 00:02:16,370 --> 00:02:18,270 สัญกรณ์อาเรย์ 43 00:02:18,270 --> 00:02:22,610 ดัชนีหลักดังนั้นที่ดินที่ฉันสามารถตั้งค่า ที่เท่ากับยูนิคอร์นหรือ 44 00:02:22,610 --> 00:02:24,710 ตรวจสอบว่าถ้าผมต้องการ 45 00:02:24,710 --> 00:02:26,510 หรือฉันสามารถใช้ประกอบจุด 46 00:02:26,510 --> 00:02:30,280 ไม้ไม้กายสิทธิ์จุดเท่ากับเชอร์รี่ และอื่น ๆ และอื่น ๆ 47 00:02:30,280 --> 00:02:33,930 ดังนั้นคุณจะเห็นว่า arrays สมาคมและ วัตถุใน JavaScript เป็นไปได้ 48 00:02:33,930 --> 00:02:37,720 แทนกันและจะ เข้ามามีประโยชน์มาก 49 00:02:37,720 --> 00:02:41,570 >> จากนั้นเราจะเห็นอาเรย์ของอาคาร ใน buildings.js 50 00:02:41,570 --> 00:02:43,870 อีกครั้งอาร์เรย์ของว​​ัตถุ 51 00:02:43,870 --> 00:02:48,500 ถ้าผมอยากจะให้อาเรย์ของที่ดีที่สุด อาคารในมหาวิทยาลัยฮาร์วาร์แล้ว 52 00:02:48,500 --> 00:02:49,710 ฉันจะทำให้มันดังต่อไปนี้ 53 00:02:49,710 --> 00:02:55,250 นี้โดยใช้สัญกรณ์วัตถุที่ ฉันเก็บรากชื่อที่อยู่ 54 00:02:55,250 --> 00:03:00,260 ละติจูดและลองจิจูดสำหรับทุก วัตถุอาคารเดียว 55 00:03:00,260 --> 00:03:02,930 >> Let 's รวดเร็วพูดคุยเกี่ยวกับตัวแปร ใน JavaScript 56 00:03:02,930 --> 00:03:07,760 เช่น PHP, JavaScript ตัวแปร กำลังอ่อนแรงหรือหลวมพิมพ์ 57 00:03:07,760 --> 00:03:14,120 เพื่อสร้างตัวแปรท้องถิ่นคุณคำนำหน้า ชื่อตัวแปรที่มี V--R, var 58 00:03:14,120 --> 00:03:17,010 >> ตอนนี้ใน JavaScript, ฟังก์ชั่นจะ จำกัด ขอบเขตของตัวแปร 59 00:03:17,010 --> 00:03:20,600 ดังนั้นหากคุณมีตัวแปรท้องถิ่นภายใน ฟังก์ชั่นการทำงานอื่น ๆ แล้ว 60 00:03:20,600 --> 00:03:22,060 ไม่สามารถเข้าถึงได้ 61 00:03:22,060 --> 00:03:26,090 แต่แตกต่างจากซีลูปและเงื่อนไขที่ทำไม่ได้ จำกัด ขอบเขตของตัวแปร 62 00:03:26,090 --> 00:03:30,600 >> ดังนั้นแม้ว่าคุณจะประกาศภายใน สภาพการทำงานทั้งหมดจะ 63 00:03:30,600 --> 00:03:32,810 สามารถเข้าถึงได้ 64 00:03:32,810 --> 00:03:35,820 ตอนนี้ได้โดยไม่ต้อง var ตัวแปร จะเป็นระดับโลก 65 00:03:35,820 --> 00:03:39,170 ดังนั้นหากคุณเพียงแค่ประกาศชื่อและ กำหนดค่าแล้วตัวแปรที่ 66 00:03:39,170 --> 00:03:41,900 จะเป็นตัวแปรทั่วโลก ใน JavaScript 67 00:03:41,900 --> 00:03:48,480 >> ขณะนี้ในบ้านเรามีการเชื่อมโยง อาร์เรย์ของว​​ัตถุประเภทบ้านที่ 68 00:03:48,480 --> 00:03:52,100 บ้านทุกหลังเป็นเพียงละติจูด และลองจิจูด 69 00:03:52,100 --> 00:03:55,140 แล้วเรามีผู้โดยสาร อาเรย์ซึ่งเป็นอาร์เรย์ 70 00:03:55,140 --> 00:03:57,370 ประเภทวัตถุผู้โดยสาร 71 00:03:57,370 --> 00:04:01,620 ดังนั้นผู้โดยสารทุกคนมีชื่อผู้ใช้ ชื่อและที่บ้าน 72 00:04:01,620 --> 00:04:04,840 ขอให้สังเกตว่าฉันเห็นของ ผู้โดยสารซึ่งจริงๆก็หมายความว่า 73 00:04:04,840 --> 00:04:08,150 ว่าวัตถุทุกคนมี คู่ค่าคีย์เดียวกัน 74 00:04:08,150 --> 00:04:12,830 ดังนั้นวัตถุประเภทผู้โดยสารทุกคนมี ชื่อผู้ใช้ชื่อและที่บ้าน 75 00:04:12,830 --> 00:04:14,850 >> ดังนั้นเราจึงทำในสิ่งที่จำเป็นต้อง ทำสำหรับการตั้งค่า P? 76 00:04:14,850 --> 00:04:20,779 ดีที่เราจำเป็นต้องให้ผู้ใช้สามารถเลือก ขึ้นทีมงานที่จะแสดงทั้งหมด 77 00:04:20,779 --> 00:04:25,090 สมาชิกในทีมงานที่มีอยู่ในปัจจุบัน รถรับส่งของเราและเพื่อวางพวกเขาออก 78 00:04:25,090 --> 00:04:29,280 แล้วเรายังจะพูดคุยเกี่ยวกับการพิเศษ คุณสมบัติที่สามารถจะนำมาใช้เพื่อ 79 00:04:29,280 --> 00:04:30,980 รถรับส่ง P ชุด 80 00:04:30,980 --> 00:04:33,610 >> แต่ขอพูดคุยเกี่ยวกับรถกระบะครั้งแรก 81 00:04:33,610 --> 00:04:37,480 ใบหน้าของพนักงาน CS50 ได้รับ ปลูกทั่วมหาวิทยาลัยที่แต่ละ 82 00:04:37,480 --> 00:04:41,750 ใบหน้าถูกนำมาใช้เป็นเครื่องหมายสถานที่ บนโลก 3 มิติและเป็น 83 00:04:41,750 --> 00:04:44,030 เครื่องหมายบนแผนที่ 2D 84 00:04:44,030 --> 00:04:47,880 ดังนั้นเมื่อผู้ใช้คลิกที่รถกระบะ ปุ่มที่เราต้องการที่จะเพิ่มในบริเวณใกล้เคียง 85 00:04:47,880 --> 00:04:49,590 บริการรถรับส่งผู้โดยสาร 86 00:04:49,590 --> 00:04:53,650 และเรายังต้องการที่จะเอาสถานที่ของพวกเขา ทำเครื่องหมายจากโลกและลบของพวกเขา 87 00:04:53,650 --> 00:04:58,060 เครื่องหมายจากแผนที่แสดงให้เห็นว่า พวกเขาอยู่ในรถรับส่งของเราตอนนี้ 88 00:04:58,060 --> 00:05:02,520 >> ดังนั้นทำอย่างไรเราตรวจสอบว่าผู้โดยสาร อยู่ในช่วงของการรับส่งของเราหรือไม่ 89 00:05:02,520 --> 00:05:04,610 ดีระยะทางฟังก์ชั่น - 90 00:05:04,610 --> 00:05:08,770 เพื่อให้รถร​​ับส่งจุดระยะทางผ่านใน ละติจูดและลองจิจูดจะ 91 00:05:08,770 --> 00:05:12,030 คำนวณระยะทางจากปัจจุบัน ตำแหน่งของรถรับส่งไป 92 00:05:12,030 --> 00:05:15,850 จุดที่คุณระบุกับที่ ให้เส้นรุ้งและเส้นแวง 93 00:05:15,850 --> 00:05:19,180 เพื่อให้คุณสามารถใช้ในการคำนวณ ระยะห่างจากรถรับส่งไปยัง 94 00:05:19,180 --> 00:05:20,310 ผู้โดยสาร 95 00:05:20,310 --> 00:05:24,040 >> แต่คุณจะรู้ว่า ผู้โดยสารมีอะไรบ้าง 96 00:05:24,040 --> 00:05:27,510 ดีที่ที่เราจะต้อง แก้ไขฟังก์ชั่นเติม 97 00:05:27,510 --> 00:05:32,500 เติมทุกสถานที่ของพนักงาน และผู้โดยสารเข้ามาในโลก 98 00:05:32,500 --> 00:05:36,300 และลงในแผนที่ แต่ไม่ได้ เก็บตำแหน่งของพวกเขา 99 00:05:36,300 --> 00:05:39,850 ดังนั้นบางทีคุณสามารถจัดเก็บของพวกเขา วางเครื่องหมายและเครื่องหมาย 100 00:05:39,850 --> 00:05:41,570 ในบางแถวของโลก 101 00:05:41,570 --> 00:05:45,780 >> ขณะนี้มีอยู่แล้วมากมายทั่วโลก การจัดเก็บข้อมูลจากผู้โดยสาร 102 00:05:45,780 --> 00:05:49,960 ร้านค้าแถวผู้โดยสารแต่ละ ชื่อของผู้โดยสารและบ้านของพวกเขา 103 00:05:49,960 --> 00:05:54,985 ดังนั้นบางทีคุณอาจจะสามารถเพิ่มพารามิเตอร์ไม่กี่ มีวัตถุผู้โดยสาร 104 00:05:54,985 --> 00:05:59,290 >> เพื่อช่วยให้เราตรวจสอบผู้โดยสารทุกคน อยู่ในช่วงของรถรับส่งของเราให้ 105 00:05:59,290 --> 00:06:02,500 ห่วงผ่านทั้งหมดของผู้โดยสาร ในอาร์เรย์ผู้โดยสาร 106 00:06:02,500 --> 00:06:07,790 ห่วงสำหรับใน JavaScript อาจมีลักษณะ บางสิ่งบางอย่างเช่นนี้คล้ายกันมากกับ 107 00:06:07,790 --> 00:06:12,910 เหล่านั้นสำหรับวงใน C. หรือเราสามารถใช้ ทางเลือกสำหรับโครงสร้างห่วง 108 00:06:12,910 --> 00:06:17,130 >> สำหรับ i var ในอาร์เรย์ที่ฉัน จะยังคงเป็นดัชนี 109 00:06:17,130 --> 00:06:20,740 แต่คุณไม่จำเป็นต้องระบุ ความยาวจุดอาร์เรย์ 110 00:06:20,740 --> 00:06:23,310 เงื่อนไขและฉันบวกบวก 111 00:06:23,310 --> 00:06:26,140 สถานผู้โดยสารทุกคนเป็น กำหนดโดยเครื่องหมายสถานที่ 112 00:06:26,140 --> 00:06:29,800 >> แต่เครื่องหมายสถานที่ที่ไม่ได้เป็น เส้นรุ้งและเส้นแวง 113 00:06:29,800 --> 00:06:34,575 เรามีการเข้าถึงพารามิเตอร์เหล่านั้นด้วย รับรูปทรงเรขาคณิตที่ใช้รับ 114 00:06:34,575 --> 00:06:35,900 เรขาคณิตเครื่องหมายสถานที่ 115 00:06:35,900 --> 00:06:39,630 แล้วเมื่อเรามีรูปทรงเรขาคณิตที่ ได้รับการอย่างใดอย่างหนึ่งหรือละติจูด 116 00:06:39,630 --> 00:06:42,600 ลองจิจูดโดยใช้ฟังก์ชั่นเหล่านั้น 117 00:06:42,600 --> 00:06:45,680 >> ดังนั้นตอนนี้เรารู้วิธีการตรวจสอบว่า ผู้โดยสารที่อยู่ภายใน 118 00:06:45,680 --> 00:06:47,920 ช่วงของรถรับส่งของเรา 119 00:06:47,920 --> 00:06:52,050 เมื่อเรามีผู้โดยสารที่เราจะ ต้องการเพิ่มผู้โดยสารที่เป็น 120 00:06:52,050 --> 00:06:53,140 ในช่วงที่ 121 00:06:53,140 --> 00:06:57,580 เราต้องการที่จะช่วยให้พวกเขาที่จะกระโดดขึ้นและ นั่งบนรถรับส่งของเรา แต่เพียง 122 00:06:57,580 --> 00:06:59,640 ถ้าเรามีที่ว่างพอสำหรับพวกเขา 123 00:06:59,640 --> 00:07:04,120 >> แถวที่นั่งจุดรถรับส่งจะ ระบุว่าที่นั่งว่างเปล่าหรือ 124 00:07:04,120 --> 00:07:05,890 คนที่อยู่ในที่นั่งที่ 125 00:07:05,890 --> 00:07:11,170 ดังนั้นถ้าที่นั่งว่างแล้ว ที่นั่งที่จะเป็นโมฆะ 126 00:07:11,170 --> 00:07:15,930 ดังนั้นย้ำกว่าแถวที่นั่ง ตรวจสอบที่นั่งว่างจัดเก็บ 127 00:07:15,930 --> 00:07:20,020 ผู้โดยสารในที่นั่งผู้ที่จนกว่าคุณจะ ไม่ได้มีที่นั่งว่างอีกต่อไป 128 00:07:20,020 --> 00:07:23,330 และโชคไม่ดีที่ผู้โดยสารคนอื่น ๆ จะต้องรอให้ 129 00:07:23,330 --> 00:07:26,000 ครั้งต่อไปที่รถรับส่งมาถึงรอบ 130 00:07:26,000 --> 00:07:30,280 >> เมื่อพวกเขาได้รับในรถรับส่งที่เราจะต้องการ เพื่อลบเครื่องหมายสถานที่ของพวกเขาซึ่ง 131 00:07:30,280 --> 00:07:32,540 เป็นภาพของพวกเขาในโลก 3 มิติ 132 00:07:32,540 --> 00:07:38,030 ถ้าผมต้องการที่จะลบเครื่องหมายสถานที่, p แล้วฉันจะได้รับทั้งหมดของคุณสมบัติ 133 00:07:38,030 --> 00:07:42,790 จากโลกของฉันจาก Google Earth, แล้วเอาสถานที่เฉพาะที่ 134 00:07:42,790 --> 00:07:45,910 ทำเครื่องหมายโดยใช้ฟังก์ชั่น removeChild 135 00:07:45,910 --> 00:07:51,360 แล้วสุดท้ายให้ลบเครื่องหมายที่ ไอคอนบนแผนที่ 2D ใด ๆ 136 00:07:51,360 --> 00:07:53,650 ผู้โดยสารว่าเราจะยกขึ้น 137 00:07:53,650 --> 00:07:59,790 ในการลบเครื่องหมายเมตรแล้วฉันจะ เพียงรันเมตรจุด setMap null 138 00:07:59,790 --> 00:08:02,920 ทำเช่นนี้สำหรับผู้โดยสารที่ใด ๆ ภายในช่วง และคุณได้เสร็จสิ้นการรถกระบะ 139 00:08:02,920 --> 00:08:05,056