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 სამყაროს და დაბეჭდვისას პირამიდების განთავსების Mario. 6 00:00:20,090 --> 00:00:21,930 თქვენ გააკეთა website გასულ კვირას. 7 00:00:21,930 --> 00:00:25,110 და ჩვენ ვაპირებთ, რომ იყოს მიღების კიდევ ერთი ამ კვირაში, რომელიც საშუალებას გაძლევთ 8 00:00:25,110 --> 00:00:28,570 მართოს გარშემო ჰარვარდის კამპუსში, კრეფა up 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 კომპლექტი, ჩვენ ვიღებთ გააცნო to 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 ფოლდერი, იქ იქნება bunch of JavaScript ფაილი. 16 00:00:49,700 --> 00:00:53,600 არსებობს buildings.js, რომელიც შეიცავს array შენობების გარშემო Harvard 17 00:00:53,600 --> 00:00:57,340 კამპუსში, მათი ინფორმაცია და პოზიცია. 18 00:00:57,340 --> 00:01:01,630 Houses.js მასივი Harvard საცხოვრებელი სახლები, მათი 19 00:01:01,630 --> 00:01:04,030 latitudes და longitudes. 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, რომელიც ეხება shuttle მოძრაობა. 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 Shuttle. 33 00:01:49,010 --> 00:01:53,010 და აი სადაც თქვენ ვაპირებთ იყოს შევსების ზოგიერთი to dos. 34 00:01:53,010 --> 00:01:56,600 >> ახლა მოდით შევხედოთ ობიექტები და ასოციაციური მასივები in 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 და შიგნით იმ curly აფრთხილებს მინდა განსაზღვროს ძირითადი unicorn. 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 ასოციაციურ მასივში notation. 43 00:02:18,270 --> 00:02:22,610 ასე რომ ჯოხი ინდექსი core, შემიძლია მითითებული რომ თანაბარი unicorn, ან 44 00:02:22,610 --> 00:02:24,710 შეამოწმეთ, რომ, თუ მე უნდა. 45 00:02:24,710 --> 00:02:26,510 ან შემიძლია dot ოპერატორი. 46 00:02:26,510 --> 00:02:30,280 Wand dot ხის შეადგენს ალუბალი, და ასე შემდეგ, და ასე შემდეგ. 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 >> მაშინ ჩვენ ვხედავთ მასივი აშენებული in 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 გამოყენებით ამ ობიექტის notation, სადაც მე შესანახად root, სახელი, მისამართი, 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, 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 მაგრამ განსხვავებით 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 გარეშე 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 >> ახლა სახლები, ჩვენ ასოციაციურ array სახლის ტიპის ობიექტები, სადაც 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 ასევე, ჩვენ უნდა დაუშვას წევრებს შეარჩიო up პერსონალის წევრები, არიან ყველა 77 00:04:20,779 --> 00:04:25,090 თანამშრომელთა, რომლებიც ამჟამად ჩვენი shuttle და ვარდნა მათ off. 78 00:04:25,090 --> 00:04:29,280 და მაშინ ჩვენ საუბარი ზედმეტი თვისებები, რომელიც შეიძლება განხორციელდეს 79 00:04:29,280 --> 00:04:30,980 shuttle 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 სახე ხორციელდება როგორც ადგილზე მარკა on 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 მგზავრებს Shuttle. 86 00:04:49,590 --> 00:04:53,650 და ჩვენ ასევე გვინდა ამოიღონ მათ ადგილას აღსანიშნავად მსოფლიოს და ამოიღონ მათ 87 00:04:53,650 --> 00:04:58,060 მარკერის from the map, რაც მიუთითებს, რომ ისინი ჩვენს shuttle ახლა. 88 00:04:58,060 --> 00:05:02,520 >> ასე როგორ უნდა აღმოაჩინოს, თუ მგზავრებს ფარგლებში რიგი ჩვენი shuttle? 89 00:05:02,520 --> 00:05:04,610 ასევე, ფუნქცია მანძილი - 90 00:05:04,610 --> 00:05:08,770 ასე shuttle dot მანძილი, გადადის გრძედი და განედი, იქნება 91 00:05:08,770 --> 00:05:12,030 გამოვთვალოთ მანძილი მიმდინარე პოზიცია shuttle რომ 92 00:05:12,030 --> 00:05:15,850 აღვნიშნო, რომ თქვენ დააკონკრეტა, რომ მოცემული გრძედი და განედი. 93 00:05:15,850 --> 00:05:19,180 ასე, რომ თქვენ შეგიძლიათ გამოიყენოთ ეს გამოთვლა დაშორება shuttle რომ 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 ისე, რომ სადაც ჩვენ გვექნება რედაქტირება populate ფუნქცია. 97 00:05:27,510 --> 00:05:32,500 Populate ადგილებში ყველა შემადგენლობა და მგზავრების სოფლად, 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 >> დაგვეხმაროს აღმოაჩინოს ყველა მგზავრი ფარგლებში დიაპაზონი ჩვენი shuttle, მოდით 105 00:05:59,290 --> 00:06:02,500 loop მეშვეობით ყველა მგზავრი წელს მგზავრთა მასივი. 106 00:06:02,500 --> 00:06:07,790 For loop in JavaScript შეიძლება გამოიყურებოდეს მსგავსი რამ, ძალიან გავს 107 00:06:07,790 --> 00:06:12,910 იმ loop in C. ან ჩვენ შეგვიძლია გამოვიყენოთ ალტერნატიული loop სტრუქტურა. 108 00:06:12,910 --> 00:06:17,130 >> განთავსების var i მასივი, სადაც მე იქნება ინდექსი. 109 00:06:17,130 --> 00:06:20,740 მაგრამ თქვენ არ უნდა მიუთითოთ მასივი dot ხანგრძლივობა 110 00:06:20,740 --> 00:06:23,310 მდგომარეობა, და მე plus plus. 111 00:06:23,310 --> 00:06:26,140 ყველა სამგზავრო ადგილმდებარეობა მოცემულია მათი ადგილზე ჩანაწერები. 112 00:06:26,140 --> 00:06:29,800 >> მაგრამ ადგილი mark არ არის გრძედის და განედი. 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 რიგი ჩვენი Shuttle. 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 ჩვენ გვინდა, რომ დაუშვებს მათ hop, და ჩაჯექით ჩვენს shuttle, მაგრამ მხოლოდ 122 00:06:57,580 --> 00:06:59,640 თუ ჩვენ გვაქვს საკმარისი ოთახი მათთვის. 123 00:06:59,640 --> 00:07:04,120 >> Shuttle dot ადგილების მასივი მიუთითებს, არის თუ არა ადგილები ცარიელი, ან 124 00:07:04,120 --> 00:07:05,890 ვინ არის, რომ ადგილს. 125 00:07:05,890 --> 00:07:11,170 ასე რომ, თუ ადგილი არის ცარიელი, მაშინ რომ ადგილს იქნება null. 126 00:07:11,170 --> 00:07:15,930 ასე რომ iterate მეტი ადგილების მასივი, შემოწმების ცარიელი ადგილების, შენახვის 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 მომავალი დრო shuttle მოდის გარშემო. 130 00:07:26,000 --> 00:07:30,280 >> როდესაც მათ მისაღებად Shuttle, ჩვენ გვინდა ამოიღონ მათ ადგილზე გასვლის შემდეგ, რომელიც 131 00:07:30,280 --> 00:07:32,540 მათი სურათი 3D-სამყაროში. 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 სამგზავრო, რომ ჩვენ კრეფა up. 137 00:07:53,650 --> 00:07:59,790 ამოიღონ მეურვეობდა, m, მაშინ მე უბრალოდ შეასრულოს m dot setMap null. 138 00:07:59,790 --> 00:08:02,920 ამისათვის ნებისმიერი მგზავრი ფარგლებში სპექტრი, და თქვენ დასრულდა პიკაპის. 139 00:08:02,920 --> 00:08:05,056