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 >> У папці JavaScript, там буде бути купа файлів JavaScript. 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 являє собою масив з Гарварду житлові будинки, з їх 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 стиль, який, на додаток до Twitter 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 >> Тепер давайте поглянемо на об'єктах і асоціативні масиви в JavaScript, 35 00:01:56,600 --> 00:01:59,360 який для всіх намірів і цілей є взаємозамінними. 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 Отже, ви бачите, що асоціативні масиви і об'єкти в 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 >> Давайте швидко говорити про змінних в JavaScript. 56 00:03:02,930 --> 00:03:07,760 Як PHP, JavaScript змінні слабо або вільно набрали. 57 00:03:07,760 --> 00:03:14,120 Щоб створити локальну змінну, Ви передуватимете ім'я змінної з V-A-R, вар. 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 Але на відміну від C, петлі і умови не обмеження обсягу змінної. 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 Тепер без вар, змінна носитиме глобальний характер. 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 Особа реалізований як місце марки на 3D землі, і як 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 Заповніть Places все із співробітників і пасажири в світ, 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 ті, для петлі в С. Або ми можемо використовувати Альтернатива для структурі циклу. 108 00:06:12,910 --> 00:06:17,130 >> Для УАГ I в масиві, де я все ще буде індекс. 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 є їх фото в 3D-світі. 132 00:07:32,540 --> 00:07:38,030 Якби я хотів, щоб видалити місце Mark 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 нуль. 138 00:07:59,790 --> 00:08:02,920 Робіть це протягом будь-яких пасажирів у межах діапазону, і ви закінчили пікап. 139 00:08:02,920 --> 00:08:05,056