1 00:00:00,000 --> 00:00:09,870 2 00:00:09,870 --> 00:00:13,360 >> ZAMYLA צ'אן: ובכן, הנה אנחנו, בCS50 להגדיר p-האחרון. 3 00:00:13,360 --> 00:00:17,040 לברך את עצמכם מהצורך הגיע כל כך רחוק מאז שלום הראשון שלך 4 00:00:17,040 --> 00:00:20,090 עולמות והדפסה עד פירמידות למריו. 5 00:00:20,090 --> 00:00:21,930 אתה עשית באתר בשבוע שעבר. 6 00:00:21,930 --> 00:00:25,110 ואנחנו הולכים להיות ביצוע עוד אחד השבוע, אחד המאפשר לך 7 00:00:25,110 --> 00:00:28,570 נוסע ברחבי קמפוס אוניברסיטת הרווארד, קטיף עד CS50 חברים ואנשי צוות 8 00:00:28,570 --> 00:00:31,910 מביא אותם אליהם בתי מגורים. 9 00:00:31,910 --> 00:00:35,400 >> עכשיו, בשבוע שעבר עבדנו ב-PHP, שפת צד שרת. 10 00:00:35,400 --> 00:00:38,250 עבור p-קבוצה זו, אנחנו מקבלים הצגנו לJavaScript, שהוא 11 00:00:38,250 --> 00:00:40,610 שפת צד לקוח. 12 00:00:40,610 --> 00:00:44,020 אז בואו נסתכל על כמה מן קוד הפצה שספק ל 13 00:00:44,020 --> 00:00:46,210 לך על p-קבוצה זו. 14 00:00:46,210 --> 00:00:49,700 בתיקיית JavaScript, יהיו להיות חבורה של קבצים ב-JavaScript. 15 00:00:49,700 --> 00:00:53,600 >> יש buildings.js, המכיל מערך של מבנים סביב הרווארד 16 00:00:53,600 --> 00:00:57,340 קמפוס עם המידע שלהם ועמדה. 17 00:00:57,340 --> 00:01:01,630 Houses.js הוא מערך של הרווארד בתי מגורים עימם 18 00:01:01,630 --> 00:01:04,030 קווי רוחב וקווי אורך. 19 00:01:04,030 --> 00:01:08,600 Passengers.js מכיל מערך של נוסעים, אנשי צוות CS50 20 00:01:08,600 --> 00:01:11,640 כי אתה תהיה להחזיר ל בתי המגורים שלהם. 21 00:01:11,640 --> 00:01:16,450 >> Math3D.js, שמכיל הרבה פונקציות לעשות עם התנועה. 22 00:01:16,450 --> 00:01:19,500 אם אתה באופן מתמטי אופקים, אז אני מזמין אתכם להעיף מבט. 23 00:01:19,500 --> 00:01:23,530 אבל אתה לא צריך להבין כל מה שביש. 24 00:01:23,530 --> 00:01:26,710 Shuttle.js, העוסק ב התנועה של הסעות. 25 00:01:26,710 --> 00:01:31,450 וindex.html הוא דף הבית שבו כל מה שקורה, באמת, שבו 26 00:01:31,450 --> 00:01:33,610 משתמש אינטראקציה עם האתר. 27 00:01:33,610 --> 00:01:39,110 >> Service.css הוא גיליון סגנונות CSS, אשר בנוסף לטוויטר 28 00:01:39,110 --> 00:01:43,960 ספריית bootstrap, פקדים איך נראה index.html. 29 00:01:43,960 --> 00:01:48,190 ולאחר מכן יש לנו גם service.js, אשר מכיל פונקציות שירות עבור 30 00:01:48,190 --> 00:01:49,010 הסעות. 31 00:01:49,010 --> 00:01:53,010 והנה שבו אתה הולך להיות מילוי בחלק מהמטלות לשל. 32 00:01:53,010 --> 00:01:56,600 >> עכשיו בואו נסתכל על עצמים ו מערכים אסוציאטיביים ב-JavaScript, 33 00:01:56,600 --> 00:01:59,360 אשר, לכל דבר ועניין, ניתנים להחלפה. 34 00:01:59,360 --> 00:02:03,030 אם אני רוצה לעשות אובייקט משתנה בשם שרביט, הייתי 35 00:02:03,030 --> 00:02:04,290 להצהיר על זה. 36 00:02:04,290 --> 00:02:09,350 ובתוך הסוגריים מסולסלים האלה, הייתי תציין, הליבה היא חד קרן, העץ 37 00:02:09,350 --> 00:02:12,710 הוא דובדבן, והאורך הוא 13. 38 00:02:12,710 --> 00:02:16,370 >> עכשיו, אני יכול גם לגשת לערכים של אובייקטים באמצעות 39 00:02:16,370 --> 00:02:18,270 סימון מערך אסוציאטיבי. 40 00:02:18,270 --> 00:02:22,610 ליבת מדד אז שרביט, אני יכול להגדיר כי שווה לקרן, או 41 00:02:22,610 --> 00:02:24,710 לבדוק שאם אני צריך. 42 00:02:24,710 --> 00:02:28,890 או שאני יכול להשתמש באופרטור הנקודה wand.wood שווה דובדבן, ו 43 00:02:28,890 --> 00:02:30,280 כן הלאה וכן הלאה. 44 00:02:30,280 --> 00:02:33,930 אז אתה רואה שמערכים ואסוציאטיביים אובייקטים ב-JavaScript הולכים להיות 45 00:02:33,930 --> 00:02:37,710 להחלפה, ורצון להיות שימושי למדי. 46 00:02:37,710 --> 00:02:41,570 >> ואז אנחנו רואים מערך של מבנים בbuildings.js, 47 00:02:41,570 --> 00:02:43,870 שוב, מערך של אובייקטים. 48 00:02:43,870 --> 00:02:48,500 אם אני רוצה ליצור מערך של המיטב בניינים בקמפוס אוניברסיטת הרווארד, ולאחר מכן 49 00:02:48,500 --> 00:02:49,710 אני אעשה את זה באופן הבא. 50 00:02:49,710 --> 00:02:55,250 באמצעות סימון האובייקט הזה, שבו אני מאחסן את השורש, שם, הכתובת, 51 00:02:55,250 --> 00:03:00,260 קו רוחב, אורך ורוחב לכל אובייקט בניין אחד. 52 00:03:00,260 --> 00:03:02,930 >> בואו נדבר במהירות על משתנים ב-JavaScript. 53 00:03:02,930 --> 00:03:07,760 כמו PHP, משתני JavaScript הם בחולשה או רפיון שהוקלד. 54 00:03:07,760 --> 00:03:14,120 כדי ליצור משתנים מקומי, אתה קידומת השם המשתנה עם V--R, var. 55 00:03:14,120 --> 00:03:17,010 עכשיו, ב-JavaScript, פונקציות תהיה לצמצם את ההיקף של משתנים. 56 00:03:17,010 --> 00:03:20,600 אז אם יש לך משתנה מקומי בתוך פונקציה, ואז פונקציות אחרות 57 00:03:20,600 --> 00:03:22,060 לא יכול לגשת אליו. 58 00:03:22,060 --> 00:03:26,090 >> אבל שלא כמו C, לולאות ותנאים לא לצמצם את היקף משתנה. 59 00:03:26,090 --> 00:03:30,600 אז גם אם אתה מצהיר את זה בפנים של מצב, תהיה כולו הפונקציה 60 00:03:30,600 --> 00:03:32,810 יש להם גישה אליו. 61 00:03:32,810 --> 00:03:35,820 עכשיו, בלי var, משתנה יהיה גלובלי. 62 00:03:35,820 --> 00:03:39,170 אז אם אתה רק מכריז את השם ו להקצות ערך, אז זה משתנה 63 00:03:39,170 --> 00:03:41,900 יהיה משתנה גלובלי ב-JavaScript. 64 00:03:41,900 --> 00:03:48,480 >> עכשיו, בבתים, יש לנו אסוציאטיבי מערך של אובייקטים מסוג המארח, שבו 65 00:03:48,480 --> 00:03:52,100 כל בית הוא רק קו רוחב וקו אורך. 66 00:03:52,100 --> 00:03:55,140 אז יש לנו את הנוסעים מערך, שהוא מערך 67 00:03:55,140 --> 00:03:57,370 נוסע סוג האובייקט. 68 00:03:57,370 --> 00:04:01,620 אז כל נוסע יש משתמשים שם, שם, ובית. 69 00:04:01,620 --> 00:04:04,840 >> שים לב שאני אומר מסוג נוסע, שבאמת רק אומר 70 00:04:04,840 --> 00:04:08,150 כי לכל אובייקט אותה זוגות ערך מפתח. 71 00:04:08,150 --> 00:04:12,830 אז כל אובייקט של נוסעים סוג יש שם משתמש, שם, ובית. 72 00:04:12,830 --> 00:04:14,850 אז מה אנחנו צריכים לעשות כדי לעשות עבור p-הסט? 73 00:04:14,850 --> 00:04:20,779 ובכן, אנחנו צריכים לאפשר למשתמשים לבחור עד חברי צוות, כדי להציג את כל 74 00:04:20,779 --> 00:04:25,080 אנשי צוות שנמצאים כרגע ב המעבורת שלנו, וכדי להוריד אותם. 75 00:04:25,080 --> 00:04:29,395 ואז גם לדבר על תוספת תכונות שניתן ליישם עבור 76 00:04:29,395 --> 00:04:30,980 p-סט הסעות. 77 00:04:30,980 --> 00:04:33,610 >> אבל בואו נדבר על הטנדר ראשון. 78 00:04:33,610 --> 00:04:37,480 פניהם של צוות CS50 היו ניטע בכל רחבי קמפוס, בו כל 79 00:04:37,480 --> 00:04:41,750 פנים מיושמים כסימן מקום על פני כדור הארץ 3D, וכמו 80 00:04:41,750 --> 00:04:44,020 סמן על מפת 2D. 81 00:04:44,020 --> 00:04:47,880 לכן, כאשר המשתמש לוחץ על איסוף כפתור, אנחנו רוצים להוסיף סמוך 82 00:04:47,880 --> 00:04:49,590 נוסעי המעבורת. 83 00:04:49,590 --> 00:04:53,650 ואנחנו גם רוצים להסיר את מקומם לסמן מהעולם ולהסירם 84 00:04:53,650 --> 00:04:58,060 סמן מן המפה, המצביע על כך הם בהסעות שלנו עכשיו. 85 00:04:58,060 --> 00:05:02,520 >> אז איך לזהות אם נוסעים נמצא בטווח של המעבורת שלנו? 86 00:05:02,520 --> 00:05:06,670 ובכן, מרחק הפונקציה, ולכן shuttle.distance, עובר ב 87 00:05:06,670 --> 00:05:10,630 קווי אורך ורוחב, יחשב המרחק מהמיקום הנוכחי 88 00:05:10,630 --> 00:05:14,220 של המעבורת עד לנקודה ש אתה מציין שבניתנת 89 00:05:14,220 --> 00:05:15,860 קווי אורך ורוחב. 90 00:05:15,860 --> 00:05:19,180 כך שאתה יכול להשתמש בזה כדי לחשב את מרחק מהמעבורת ל 91 00:05:19,180 --> 00:05:20,310 נוסעים. 92 00:05:20,310 --> 00:05:24,040 >> אבל איך אתה יודע איפה הנוסעים? 93 00:05:24,040 --> 00:05:27,510 ובכן, זה המקום שבי נצטרך לערוך את הפונקציה לאכלס. 94 00:05:27,510 --> 00:05:32,500 לאכלס מקומות כל חברי צוות בנוסעים לעולם 95 00:05:32,500 --> 00:05:36,300 ולמפה, אבל לא תאחסן את המיקום שלהם. 96 00:05:36,300 --> 00:05:39,850 אז אולי אתה יכול לאחסן אותם למקם את הסימנים וסמנים 97 00:05:39,850 --> 00:05:41,570 בחלק המערך הגלובלי. 98 00:05:41,570 --> 00:05:45,780 >> עכשיו, יש כבר מערך גלובלי אחסון מידע מנוסעים. 99 00:05:45,780 --> 00:05:49,960 חנויות המערך נוסע כל אחד שמו של נוסע ואת הבית שלהם. 100 00:05:49,960 --> 00:05:54,985 אז אולי אתה יכול להוסיף כמה פרמטרים יש לחפצי נוסעים. 101 00:05:54,985 --> 00:05:58,150 >> כדי לעזור לנו לזהות את כל הנוסעים בטווח שלנו 102 00:05:58,150 --> 00:06:02,485 מעבורת, לולאה של בואו דרך כל נוסע במערך הנוסעים. 103 00:06:02,485 --> 00:06:07,790 לולאה בJavaScript עשויה להיראות משהו כזה, דומה מאוד ל 104 00:06:07,790 --> 00:06:13,200 אלה ללולאות בג או שאנחנו יכולים להשתמש חלופי למבנה לולאה, עבור 105 00:06:13,200 --> 00:06:18,680 אני var במערך, שבו אני עדיין יהיה המדד, אבל אתה לא צריך 106 00:06:18,680 --> 00:06:23,310 לציין את array.length מצב ואני + +. 107 00:06:23,310 --> 00:06:26,130 >> מיקומו של כל נוסע הוא ניתנו על ידי סימן המקום שלהם. 108 00:06:26,130 --> 00:06:29,800 אבל סימן המקום אינו קו רוחב והאורך. 109 00:06:29,800 --> 00:06:34,170 אנחנו צריכים לגשת לפרמטרים אלו על ידי מקבל את הגיאומטריה, באמצעות גט 110 00:06:34,170 --> 00:06:38,180 גיאומטריה על סימן המקום, ולאחר מכן ברגע שיש לנו את הגיאומטריה, מקבל 111 00:06:38,180 --> 00:06:42,580 או קו הרוחב או האורך שימוש בפונקציות הללו. 112 00:06:42,580 --> 00:06:45,680 >> אז עכשיו אנחנו יודעים איך לזהות אם נוסעים נמצאים בתוך 113 00:06:45,680 --> 00:06:47,920 מגוון רחב של ההסעות שלנו. 114 00:06:47,920 --> 00:06:52,050 ברגע שיש לנו הנוסעים האלה, אנחנו רוצה להוסיף כל נוסעים, כי הם 115 00:06:52,050 --> 00:06:53,140 בטווח זה. 116 00:06:53,140 --> 00:06:57,580 אנחנו רוצים לאפשר להם לקפוץ על ולקחת מושב במעבורת שלנו, אבל רק 117 00:06:57,580 --> 00:06:59,630 אם יש לנו מספיק מקום עבורם. 118 00:06:59,630 --> 00:07:04,120 >> Shuttle.seats המערך יציין אם מושבים ריקים, או 119 00:07:04,120 --> 00:07:05,890 שהוא במושב זה. 120 00:07:05,890 --> 00:07:11,160 אז אם מקום מושבו הוא ריק, ואז המושב שיהיה ריק. 121 00:07:11,160 --> 00:07:15,930 אז לחזר על מערך המושבים, בדיקה למושבים ריקים, אחסון 122 00:07:15,930 --> 00:07:20,020 נוסע למושבים האלה עד שאתה אין לי שום מושבים ריקים יותר. 123 00:07:20,020 --> 00:07:23,330 ולמרבה הצער, כל נוסעים אחרים יצטרך לחכות ל 124 00:07:23,330 --> 00:07:26,000 בפעם הבאה שהמעבורת מגיעה למטה. 125 00:07:26,000 --> 00:07:30,280 >> ברגע שהם מקבלים על המעבורת, אנחנו רוצים כדי להסיר את חותם המקום שלהם, שבו 126 00:07:30,280 --> 00:07:32,580 היא התמונה שלהם בעולם 3D. 127 00:07:32,580 --> 00:07:38,030 אם אני רוצה להסיר עמ 'סימן מקום, אז הייתי מקבל את כל התכונות 128 00:07:38,030 --> 00:07:42,820 מכדור הארץ שלי, מ- Google Earth, ולאחר מכן להסיר את אותו מקום ספציפי 129 00:07:42,820 --> 00:07:45,910 לסמן באמצעות פונקצית removeChild. 130 00:07:45,910 --> 00:07:51,360 ואז לבסוף, בואו להסיר את הסמן, הסמל על מפת 2D, לכל 131 00:07:51,360 --> 00:07:53,650 נוסעים שאנחנו מרימים. 132 00:07:53,650 --> 00:07:59,790 >> כדי להסיר מ 'סמן, אז אני רק בביצוע null m.setMap. 133 00:07:59,790 --> 00:08:03,670 האם זה עבור כל נוסעים בטווח, ושתסיים את טנדר. 134 00:08:03,670 --> 00:08:07,890 פונקצית התרשים צריכה להציג את כל מהנוסעים שנמצאים בך 135 00:08:07,890 --> 00:08:11,000 מעבורת, ומושב ריק אם ריק. 136 00:08:11,000 --> 00:08:14,420 אז תרשים צריך לחזר על shuttle.seats, בו מוצגות 137 00:08:14,420 --> 00:08:21,350 מידע לנוסע עבור כל מדד, ומושב ריק אם המדד שהוא ריק. 138 00:08:21,350 --> 00:08:26,160 >> עכשיו, אם טקסט HTML הוא לשים בתוך JavaScript משתנה, ולאחר מכן באמצעות 139 00:08:26,160 --> 00:08:31,950 document.getElementById, פחית תרשים לערוך את ה-HTML הפנימי של שניתנה 140 00:08:31,950 --> 00:08:36,140 אלמנט ידי הקצאה טקסט HTML כדי 141 00:08:36,140 --> 00:08:40,840 document.getElementById משתנה HTML פנימי. 142 00:08:40,840 --> 00:08:46,180 כאשר המשתמשים לוחץ על כפתור הגלילה כבוי בindex.html, הוא יתקשר 143 00:08:46,180 --> 00:08:47,160 פונקצית נפילה ענקית. 144 00:08:47,160 --> 00:08:49,510 וזה התפקיד שלנו ליישם את זה. 145 00:08:49,510 --> 00:08:54,150 >> בנפילה ענקית, אנחנו רוצים להסיר כל נוסע מהמעבורת רק אם 146 00:08:54,150 --> 00:08:58,740 אנחנו בטווח של היעד שלהם, בית המגורים שלהם. 147 00:08:58,740 --> 00:09:03,300 אז נפילה ענקית תצטרך לבדוק אם ההסעות היא בטווח של כל אחד 148 00:09:03,300 --> 00:09:08,200 בתים, ולהסיר כל צורך נוסע מהמעבורת. 149 00:09:08,200 --> 00:09:11,020 אז איך אנחנו בודקים אם אנחנו בטווח של כל בתים? 150 00:09:11,020 --> 00:09:16,630 ובכן, שוב, אנחנו נעשה שימוש shuttle.distance פונקציה, עובר ב 151 00:09:16,630 --> 00:09:20,990 קווי אורך והרוחב של הנקודה שאנחנו בודקים נגד. 152 00:09:20,990 --> 00:09:22,730 >> אבל מה הן הנקודות האלה? 153 00:09:22,730 --> 00:09:27,210 ובכן, את מערך הבתים, אם אתה זוכר בhouses.js, מאחסן 154 00:09:27,210 --> 00:09:32,790 קווי אורך ורוחב של כל בית ב מערך אסוציאטיבי, שבו כל 155 00:09:32,790 --> 00:09:35,980 מדד הוא שמו של הבית הזה. 156 00:09:35,980 --> 00:09:37,590 ואז להסיר את הנוסעים - 157 00:09:37,590 --> 00:09:41,820 כן, רק אם אנחנו בטווח שלהם בית שהם רוצים ללכת אליו. 158 00:09:41,820 --> 00:09:46,380 אז שוב, זכור כי נוסעים מאחסן את הבית שכל נוסעים 159 00:09:46,380 --> 00:09:48,850 רוצה ללכת. 160 00:09:48,850 --> 00:09:51,670 אם הם נמצאים בטווח קליטה שלהם בית, אז אנחנו נסיר כי 161 00:09:51,670 --> 00:09:57,200 נוסע מshuttle.seats וסט את עמדתם במערך לריק. 162 00:09:57,200 --> 00:10:00,220 >> עכשיו בואו נדבר על כמה תכונות נוספות כי יכול להיות מיושם ב 163 00:10:00,220 --> 00:10:02,690 p-סט הסעות CS50. 164 00:10:02,690 --> 00:10:05,850 יש שיטה ניקוד לפיה לך לעקוב אחר כמה 165 00:10:05,850 --> 00:10:07,520 מצביע למשתמש. 166 00:10:07,520 --> 00:10:11,120 שלהוריד את נוסעים בהצלחה, הם יכולים לקבל נקודות. 167 00:10:11,120 --> 00:10:15,100 אבל על מנת לנסות להוריד את הנוסעים שאין בו כל בית בקרבת מקום, 168 00:10:15,100 --> 00:10:16,980 כן, הם יכולים לקבל נענש על כך. 169 00:10:16,980 --> 00:10:21,790 אז אולי אתה רוצה לעקוב אחר הנקודות במשתנה גלובלית. 170 00:10:21,790 --> 00:10:25,970 >> אתה יכול ליישם אולי טיימר, שבו למשתמש יש כמות מסוימת של 171 00:10:25,970 --> 00:10:29,800 זמן כדי להרים ולהשיל מספר מסוים של נוסעים. 172 00:10:29,800 --> 00:10:33,280 אולי אפילו לשלב את זה עם השיטה הניקוד. 173 00:10:33,280 --> 00:10:39,970 או שאתה יכול לערוך תרשים כזה נוסעים מסודרים על ידי בית. 174 00:10:39,970 --> 00:10:45,250 אז זה כנראה יהיה סוג לתפקד לshuttle.seats. 175 00:10:45,250 --> 00:10:49,240 >> אתה יכול ליישם את תכונה מעופפת, שבו אם משתמש תשומות Konami 176 00:10:49,240 --> 00:10:53,460 קוד, ולאחר מכן המעבורת ממריאה קרקע והמעבורת יכולים לעוף. 177 00:10:53,460 --> 00:10:58,890 אבל לירידה בטוחה מ, הטוב ביותר לעשות להנחית את מעבורת הגלגלים שלה על 178 00:10:58,890 --> 00:11:00,700 הקרקע ראשונה. 179 00:11:00,700 --> 00:11:05,910 גם אתה יכול ליישם טלפורטציה, שבו אתה עושה את הרשימה נפתחת של 180 00:11:05,910 --> 00:11:08,380 בניינים בindex.html. 181 00:11:08,380 --> 00:11:12,270 ובחירה באחד מאלה, משתמש יועבר ל 182 00:11:12,270 --> 00:11:14,220 בניין שעל קמפוס. 183 00:11:14,220 --> 00:11:16,760 בסדר, אם כי, לנסוע דרך הקירות של כמה 184 00:11:16,760 --> 00:11:19,290 בניינים בדרך לשם. 185 00:11:19,290 --> 00:11:22,960 >> גם אתה יכול לשנות את המהירות של מעבורת, המאפשר למשתמש להגדיל 186 00:11:22,960 --> 00:11:25,490 או להקטין את המהירות. 187 00:11:25,490 --> 00:11:28,840 אולי אתה רוצה משתנה גלובלי ל לעקוב אחר כמה דלק 188 00:11:28,840 --> 00:11:31,520 יש הסעות, הפחתה זה כמו שאתה הולך יחד. 189 00:11:31,520 --> 00:11:35,860 ברגע שאתה מכה אפס, אם כי, ההסעות לא תוכל לעבור, אלא אם כן יש לך 190 00:11:35,860 --> 00:11:40,610 לתדלק, אולי באמצעות כפתור, או אפילו להפוך את תחנת הדלק משלך. 191 00:11:40,610 --> 00:11:43,240 >> אבל זה בהחלט לא רשימה ממצה. 192 00:11:43,240 --> 00:11:46,340 בדוק את המפרט למלא רשימה, או אולי להציע 193 00:11:46,340 --> 00:11:47,840 משלך כדי TF שלך. 194 00:11:47,840 --> 00:11:48,950 השמיים הוא הגבול. 195 00:11:48,950 --> 00:11:53,110 זה p-סט CS50 האחרון שלך, כל כך כיף עם זה. 196 00:11:53,110 --> 00:11:56,360 זה היה CS50 הסעות. 197 00:11:56,360 --> 00:11:59,230 >> אני חייב לומר, זה היה תענוג מה שהופך את אלה עבורך עם 198 00:11:59,230 --> 00:12:00,400 צוות הפקה. 199 00:12:00,400 --> 00:12:04,330 ואני מקווה שיש לך ליהנות מהם, גם כן. 200 00:12:04,330 --> 00:12:06,040 השם שלי הוא Zamyla. 201 00:12:06,040 --> 00:12:08,310 וזה היה CS50. 202 00:12:08,310 --> 00:12:16,363