1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,810 [MUSIC PLAYING] 3 00:00:04,810 --> 00:00:06,940 >> Doug LLOYD: Jadi satu lagi semacam anggapan bahwa 4 00:00:06,940 --> 00:00:12,120 semacam jatuh di bawah payung JavaScript adalah sesuatu yang disebut AJAX. 5 00:00:12,120 --> 00:00:15,310 Sampai titik ini, kami interaksi dengan JavaScript 6 00:00:15,310 --> 00:00:17,727 telah terbatas untuk mendorong tombol dan sesuatu terjadi. 7 00:00:17,727 --> 00:00:19,560 Dan secara khusus, sesuatu yang terjadi 8 00:00:19,560 --> 00:00:22,950 adalah website kami melihat dan merasa perubahan. 9 00:00:22,950 --> 00:00:23,450 Kanan? 10 00:00:23,450 --> 00:00:26,540 Seperti khususnya, di Document Object Model video, 11 00:00:26,540 --> 00:00:29,060 Saya mengubah warna latar belakang. 12 00:00:29,060 --> 00:00:33,240 Tapi ketika saya melakukan itu, saya tidak memiliki untuk melakukan permintaan istimewa. 13 00:00:33,240 --> 00:00:36,800 Saya tidak perlu meminta server mengirimkan saya sebuah halaman baru. 14 00:00:36,800 --> 00:00:39,620 Aku hanya mengubah apa yang saya sudah punya. 15 00:00:39,620 --> 00:00:42,245 Saya tidak perlu memuat ulang halaman saya, dan hal-hal pasti berubah, 16 00:00:42,245 --> 00:00:43,760 jadi itu bagus. 17 00:00:43,760 --> 00:00:48,400 Tapi ada pasti beberapa interaksi user manual yang terlibat. 18 00:00:48,400 --> 00:00:53,140 AJAX adalah teknik keren yang memungkinkan kita untuk memperbarui konten halaman, 19 00:00:53,140 --> 00:00:55,750 dan bukan hanya tampilan dan merasa, tanpa reload. 20 00:00:55,750 --> 00:00:58,610 >> Dan dengan secara khusus ketika saya mengatakan memperbarui konten halaman, 21 00:00:58,610 --> 00:01:01,990 Saya tidak mengatakan kami menulis ulang halaman menggunakan JavaScript. 22 00:01:01,990 --> 00:01:06,560 Saya mengatakan kita benar-benar meminta informasi lebih lanjut dari server 23 00:01:06,560 --> 00:01:08,640 tanpa halaman kami harus reload. 24 00:01:08,640 --> 00:01:10,850 >> Sekarang semacam sedikit teknik yang lebih maju 25 00:01:10,850 --> 00:01:11,950 bahwa kita akan berbicara tentang dalam video ini. 26 00:01:11,950 --> 00:01:13,720 Kami akan memiliki beberapa interaksi. 27 00:01:13,720 --> 00:01:17,750 Tetapi ketika kita melakukannya, aku akan menjadi membuat permintaan ke server web. 28 00:01:17,750 --> 00:01:21,140 Dalam hal ini, hanya apa menjalankan web server Apache saya. 29 00:01:21,140 --> 00:01:25,010 Aku akan membuat tambahan permintaan sementara aku mengunjungi sebuah halaman web, 30 00:01:25,010 --> 00:01:26,890 tapi halaman saya tidak akan menyegarkan. 31 00:01:26,890 --> 00:01:30,000 >> Ini hanya akan asynchronous memperbarui halaman saya. 32 00:01:30,000 --> 00:01:31,840 Dan itu, pada kenyataannya, yang AJAX singkatan, 33 00:01:31,840 --> 00:01:35,400 adalah Asynchronous JavaScript dan XML. 34 00:01:35,400 --> 00:01:37,910 XML adalah jenis lain dari markup bahasa, dan Anda dapat mengurutkan dari 35 00:01:37,910 --> 00:01:39,680 dipikir-pikir seperti HTML. 36 00:01:39,680 --> 00:01:42,990 Ini tidak cukup hal yang sama, tetapi itu pada dasarnya hanya bahasa markup. 37 00:01:42,990 --> 00:01:47,770 Jadi itu adalah asynchronous JavaScript dan bahasa markup. 38 00:01:47,770 --> 00:01:50,590 >> Jadi untuk menggunakan ini AJAX AJAX technique-- 39 00:01:50,590 --> 00:01:52,230 bukan bahasa pemrograman yang terpisah. 40 00:01:52,230 --> 00:01:55,300 Ini hanya semacam set kami techniques-- 41 00:01:55,300 --> 00:01:57,870 perlu membuat khusus Objek JavaScript, yang 42 00:01:57,870 --> 00:02:00,689 disebut XMLHttpRequest. 43 00:02:00,689 --> 00:02:01,980 Sekarang, itu sangat mudah untuk melakukan hal ini. 44 00:02:01,980 --> 00:02:04,550 Kami hanya mengatakan var, apa pun kami ingin memanggil objek ini, 45 00:02:04,550 --> 00:02:07,030 sama dengan XMLHttpRequest baru. 46 00:02:07,030 --> 00:02:11,050 Dan sekarang kami telah diperoleh sekarang sebuah semacam AJAX objek, 47 00:02:11,050 --> 00:02:14,370 atau XMLHttpRequest objek, yang akan memungkinkan 48 00:02:14,370 --> 00:02:18,360 kita untuk asynchronous memperbarui halaman kami. 49 00:02:18,360 --> 00:02:23,100 >> Setelah kita mendapatkan ini baru objek, XMLHttpRequest ini, 50 00:02:23,100 --> 00:02:27,760 kita harus melakukan sesuatu untuk nya perilaku onreadystatechange. 51 00:02:27,760 --> 00:02:30,360 Onreadystatechange perilaku benar-benar hanya 52 00:02:30,360 --> 00:02:34,080 ketika Anda membuat permintaan ke halaman web, halaman 53 00:02:34,080 --> 00:02:35,880 berjalan melalui sejumlah langkah. 54 00:02:35,880 --> 00:02:37,370 Pertama, permintaan belum terkirim. 55 00:02:37,370 --> 00:02:39,860 Kemudian, permintaan telah mengirim, tapi tidak ditindaklanjuti. 56 00:02:39,860 --> 00:02:41,580 Maka permintaan telah ditindaklanjuti. 57 00:02:41,580 --> 00:02:43,680 Maka permintaan tersebut dikirim kembali kepada Anda. 58 00:02:43,680 --> 00:02:46,930 >> Kemudian, permintaan tersebut terisi penuh di halaman Anda. 59 00:02:46,930 --> 00:02:48,640 Mereka adalah negara yang berbeda. 60 00:02:48,640 --> 00:02:53,890 Dan jadi kita perlu mengatur kami objek XMLHttpRequest baru 61 00:02:53,890 --> 00:02:58,740 untuk mengubah ketika perubahan status siap. 62 00:02:58,740 --> 00:03:01,925 Dan biasanya, kami melakukan ini dengan mendefinisikan fungsi anonim, yang 63 00:03:01,925 --> 00:03:04,490 kita akrab dengan dari JavaScript sekarang, yang 64 00:03:04,490 --> 00:03:09,840 disebut ketika perubahan status siap. 65 00:03:09,840 --> 00:03:11,340 Ini benar-benar tidak lebih dari itu. 66 00:03:11,340 --> 00:03:14,340 Kami hanya akan mendefinisikan fungsi anonim, semacam seperti apa 67 00:03:14,340 --> 00:03:16,440 kami lakukan di JavaScript, di mana kita akan 68 00:03:16,440 --> 00:03:18,750 memiliki fungsi anonim menanggapi on klik, 69 00:03:18,750 --> 00:03:23,230 atau ketika kami melakukan peta berbagai objek dalam sebuah array. 70 00:03:23,230 --> 00:03:25,220 >> Sesuatu terjadi ketika sesuatu diklik. 71 00:03:25,220 --> 00:03:28,810 Dalam hal ini, itu hanya sesuatu yang terjadi ketika keadaan halaman kami 72 00:03:28,810 --> 00:03:30,160 perubahan. 73 00:03:30,160 --> 00:03:32,730 Ada dua sifat lainnya yang semacam of-- mereka tidak 74 00:03:32,730 --> 00:03:35,524 satu-satunya properti yang melekat pada XMLHttpRequest, 75 00:03:35,524 --> 00:03:36,940 tapi mereka yang cukup penting. 76 00:03:36,940 --> 00:03:39,815 Ada sesuatu yang disebut readyState, yang seperti yang Anda mungkin bisa menebak, 77 00:03:39,815 --> 00:03:41,750 adalah terkait dengan onreadystatechange. 78 00:03:41,750 --> 00:03:44,250 Ini benar-benar memberitahu Anda apa readyState adalah. 79 00:03:44,250 --> 00:03:46,289 0, 1, 2, 3, dan 4 kemungkinan ada, 80 00:03:46,289 --> 00:03:48,080 dan mereka semacam sekitar sesuai dengan apa yang 81 00:03:48,080 --> 00:03:50,030 Saya hanya berbicara tentang satu detik lalu. 82 00:03:50,030 --> 00:03:53,100 >> Dan kemudian status, yang semoga jika semuanya berjalan OK, 83 00:03:53,100 --> 00:03:56,710 adalah 200, yang merupakan kependekan untuk, tentu saja, OK, 84 00:03:56,710 --> 00:03:58,330 yang kita kenal dari Http. 85 00:03:58,330 --> 00:04:03,735 Jadi kami berharap bahwa negara siap kami adalah empat, dan status kita adalah 200. 86 00:04:03,735 --> 00:04:07,940 Dan jika negara siap kami adalah empat, dan respon 87 00:04:07,940 --> 00:04:11,490 siap untuk diletakkan pada Halaman, dan status adalah 200, 88 00:04:11,490 --> 00:04:13,580 kami mampu melakukan semuanya berhasil, 89 00:04:13,580 --> 00:04:17,209 sekarang kita bisa asynchronous memperbarui halaman kami 90 00:04:17,209 --> 00:04:21,730 tanpa harus reload seluruh isi itu. 91 00:04:21,730 --> 00:04:27,710 >> Setelah kita mendefinisikan apa yang terjadi dengan perilaku onreadystatechange, 92 00:04:27,710 --> 00:04:31,020 dan kami sudah memeriksa bahwa readyState adalah 4 dan status adalah 200, 93 00:04:31,020 --> 00:04:33,900 maka semua yang perlu kita lakukan adalah membuka sebuah asynchronous 94 00:04:33,900 --> 00:04:38,530 permintaan, yang hanya membuat sebuah Http umumnya GET permintaan. 95 00:04:38,530 --> 00:04:41,950 Hanya melakukannya pemrograman, bukannya melalui browser web kami. 96 00:04:41,950 --> 00:04:43,786 Dan kemudian kami kirim permintaan itu. 97 00:04:43,786 --> 00:04:45,660 Jadi, apa ini mungkin terlihat seperti dalam konteks? 98 00:04:45,660 --> 00:04:49,790 Jadi, inilah fungsi yang penawaran dengan permintaan AJAX. 99 00:04:49,790 --> 00:04:50,290 OKE? 100 00:04:50,290 --> 00:04:52,430 Dan aku sudah sewenang-wenang mengatakan ia menerima argumen. 101 00:04:52,430 --> 00:04:55,550 Dan ini semacam kerangka umum di sini. 102 00:04:55,550 --> 00:05:00,890 Pada awal, kita mendapatkan diri kita sendiri objek XMLHttpRequest baru. 103 00:05:00,890 --> 00:05:03,830 Lalu, saya harus mengatur perilaku onreadystatechange. 104 00:05:03,830 --> 00:05:06,970 Dan jadi saya akan mengatakan ketika perubahan readyState, 105 00:05:06,970 --> 00:05:10,110 Aku ingin kau memanggil fungsi ini. 106 00:05:10,110 --> 00:05:12,570 >> Yang akan meminta pertanyaan, jika readyState 107 00:05:12,570 --> 00:05:17,240 adalah 4, jika readyState telah berubah menjadi 4, dan status itu 200, 108 00:05:17,240 --> 00:05:20,799 jadi kami punya permintaan sukses, saya ingin melakukan sesuatu untuk halaman. 109 00:05:20,799 --> 00:05:22,590 Dan kita akan melihat-lihat sebuah contoh dari apa yang 110 00:05:22,590 --> 00:05:25,010 sesuatu yang mungkin dalam hitungan detik. 111 00:05:25,010 --> 00:05:27,830 Jadi, sekarang saya telah didefinisikan fungsi anonim saya, 112 00:05:27,830 --> 00:05:31,340 fungsi respon saya setiap kali perubahan readyState. 113 00:05:31,340 --> 00:05:37,120 >> Jadi saya hanya perlu untuk membuka meminta, menggunakan metode Terbuka. 114 00:05:37,120 --> 00:05:39,160 Dan kemudian, saya mengirim permintaan itu. 115 00:05:39,160 --> 00:05:41,980 Dan mari kita lihat contoh yang lebih konkret 116 00:05:41,980 --> 00:05:46,290 apa AJAX dapat Anda lakukan di halaman web kami. 117 00:05:46,290 --> 00:05:49,740 Jadi saya miliki di sini sangat sederhana Halaman disebut home.html. 118 00:05:49,740 --> 00:05:53,620 Dan aku punya informasi berjalan di sini dan semacam menu drop-down. 119 00:05:53,620 --> 00:05:55,390 >> Dan kami akan kembali ini dalam satu detik. 120 00:05:55,390 --> 00:05:59,150 Tapi saya pikir kita sekarang harus mengambil melihat kode sumber yang sebenarnya. 121 00:05:59,150 --> 00:06:01,080 Dan, aku akan membuka home.html. 122 00:06:01,080 --> 00:06:03,490 123 00:06:03,490 --> 00:06:04,740 Dan kami akan melihat apa yang terjadi. 124 00:06:04,740 --> 00:06:08,240 Jadi di bagian paling atas di sini, saya memiliki beberapa hal JavaScript yang terjadi. 125 00:06:08,240 --> 00:06:12,470 >> Dan di sini, saya tampaknya memiliki div yang ID adalah infodiv, 126 00:06:12,470 --> 00:06:15,290 dan beberapa informasi akan pergi ke sana. 127 00:06:15,290 --> 00:06:16,374 Dan kemudian saya harus formulir ini. 128 00:06:16,374 --> 00:06:18,081 Dan dalam hal ini bentuk, saya memiliki sesuatu 129 00:06:18,081 --> 00:06:20,200 disebut Pilih, yang hanya menu drop-down 130 00:06:20,200 --> 00:06:22,150 dengan banyak pilihan yang berbeda. 131 00:06:22,150 --> 00:06:26,150 Dan ternyata saat yang berubah, ketika opsi yang telah dipilih memiliki 132 00:06:26,150 --> 00:06:30,600 berubah, aku akan memanggil beberapa fungsi cs50Info, 133 00:06:30,600 --> 00:06:33,190 dan kemudian aku akan lulus dalam this.value, 134 00:06:33,190 --> 00:06:35,740 mana ini mengacu pilihan yang dipilih, 135 00:06:35,740 --> 00:06:39,820 dan nilai adalah salah satu dari ini di sini, pilihan value = sama kosong, "Blumberg," 136 00:06:39,820 --> 00:06:42,610 "bowden," "chan," dan "malan." 137 00:06:42,610 --> 00:06:45,090 >> Jadi apa yang mungkin benar-benar terjadi di sini ketika saya melakukan ini? 138 00:06:45,090 --> 00:06:48,800 Nah, mari kita melihat blumberg.html. 139 00:06:48,800 --> 00:06:51,330 140 00:06:51,330 --> 00:06:53,924 Sepertinya itu hanya potongan beberapa Html. 141 00:06:53,924 --> 00:06:56,090 Dan pada kenyataannya, apa yang saya berharap yang akan terjadi di sini 142 00:06:56,090 --> 00:07:00,020 adalah aku akan dapat steker Html ini langsung ke halaman web saya 143 00:07:00,020 --> 00:07:02,970 tanpa harus reload halaman, sehingga ketika 144 00:07:02,970 --> 00:07:07,510 Saya memilih Hannah dari drop-down menu, informasi tentang Hannah, 145 00:07:07,510 --> 00:07:11,100 khususnya, informasi ini di sini di blumberg.html, 146 00:07:11,100 --> 00:07:12,574 adalah apa yang muncul pada halaman. 147 00:07:12,574 --> 00:07:13,740 Dan aku tidak harus me-refresh. 148 00:07:13,740 --> 00:07:16,842 Dan jika saya memilih orang lain, informasi mereka akan muncul. 149 00:07:16,842 --> 00:07:17,550 Bagaimana saya melakukan ini? 150 00:07:17,550 --> 00:07:20,290 Sekali lagi, ini membutuhkan kita untuk menggunakan beberapa AJAX. 151 00:07:20,290 --> 00:07:22,540 Dan, kami akan membuka ajax.js. 152 00:07:22,540 --> 00:07:25,550 Dan di sini adalah fungsi yang, cs50Info. 153 00:07:25,550 --> 00:07:27,410 Jika nama apa-apa, aku kembali. 154 00:07:27,410 --> 00:07:31,450 Aku tidak akan melakukan apa-apa jika opsi kosong telah dipilih. 155 00:07:31,450 --> 00:07:35,420 Jika tidak, aku akan membuat XMLHttpRequest baru. 156 00:07:35,420 --> 00:07:39,020 Dan kemudian aku akan mengatakan, ketika perubahan readyState, memanggil fungsi ini. 157 00:07:39,020 --> 00:07:43,630 >> Dan jika readyState adalah 4 dan status adalah 200, 158 00:07:43,630 --> 00:07:45,740 inilah sedikit jQuery on line 13. 159 00:07:45,740 --> 00:07:50,450 Tapi semua saya lakukan adalah mengatakan, mengubah isi infodiv 160 00:07:50,450 --> 00:07:57,820 menjadi apa pun yang aku kembali sebagai respon dari HttpRequest saya. 161 00:07:57,820 --> 00:07:59,590 >> Apa HttpRequest saya? 162 00:07:59,590 --> 00:08:02,020 Nah, itu benar di sini on line 18 dan 19. 163 00:08:02,020 --> 00:08:08,550 Baris 18, saya pada dasarnya mempersiapkan GET permintaan nama + html. 164 00:08:08,550 --> 00:08:11,170 Dan lagi, nama di sini adalah argumen yang 165 00:08:11,170 --> 00:08:14,280 berlalu dalam sebagai parameter untuk cs50Info. 166 00:08:14,280 --> 00:08:18,460 >> Jadi pada dasarnya, saya lewat di seseorang nama, yang adalah bahwa set pilihan 167 00:08:18,460 --> 00:08:22,980 yang kita lihat di menu drop-down dalam bentuk. 168 00:08:22,980 --> 00:08:24,450 Saya mendapatkan nama itu. 169 00:08:24,450 --> 00:08:29,530 Dan saya katakan saya ingin Anda untuk silakan mendapatkan bagi saya file.html itu, 170 00:08:29,530 --> 00:08:31,020 dan kemudian mengirim permintaan itu. 171 00:08:31,020 --> 00:08:34,820 >> Dan onreadystatechange yang akan menjadi mendengarkan dan menunggu dan menunggu 172 00:08:34,820 --> 00:08:39,460 dan menunggu, sampai readyState adalah 4, dan status adalah 200. 173 00:08:39,460 --> 00:08:44,970 Sehingga siap untuk dilayani, dan permintaan berhasil. 174 00:08:44,970 --> 00:08:49,500 Dan kemudian jika itu adalah, itu akan mengubah isi infodiv 175 00:08:49,500 --> 00:08:53,030 menjadi teks respon yang saya dapatkan kembali. 176 00:08:53,030 --> 00:08:54,930 >> Jadi mari kita lihat bagaimana ini mungkin benar-benar bekerja. 177 00:08:54,930 --> 00:08:58,860 Jadi kita akan kepala ke browser saya jendela, dan kami akan lihat di sini. 178 00:08:58,860 --> 00:09:01,359 Jadi mari kita lihat apa yang terjadi di sini di AJAX. 179 00:09:01,359 --> 00:09:03,400 Jadi kita akan memilih seseorang dari menu drop-down. 180 00:09:03,400 --> 00:09:06,079 Jadi dalam hal ini, mari kita hanya memilih Hannah. 181 00:09:06,079 --> 00:09:08,120 Dan pemberitahuan bahwa Hannah informasi telah berubah, 182 00:09:08,120 --> 00:09:11,030 tapi saya tidak punya any-- saya Halaman tidak sepenuhnya ulang. 183 00:09:11,030 --> 00:09:12,190 Hal-hal yang tinggal. 184 00:09:12,190 --> 00:09:13,320 Sebagian besar barang tinggal. 185 00:09:13,320 --> 00:09:14,320 AJAX Uji tidak berubah. 186 00:09:14,320 --> 00:09:16,700 Tombol itu sendiri, ini menu drop-down tidak berubah. 187 00:09:16,700 --> 00:09:18,260 Tetapi informasi ada melakukan perubahan. 188 00:09:18,260 --> 00:09:20,218 Dan tergantung pada bagaimana cepat komputer bergerak saya, 189 00:09:20,218 --> 00:09:24,430 Anda benar-benar mungkin melihat bahwa konten menghilang dan kemudian muncul kembali benar 190 00:09:24,430 --> 00:09:24,930 segera. 191 00:09:24,930 --> 00:09:27,320 Itulah isi yang dihapus dari infodiv, 192 00:09:27,320 --> 00:09:29,940 dan kemudian diganti dengan permintaan asynchronous baru. 193 00:09:29,940 --> 00:09:34,410 >> Jadi jika saya beralih untuk mengatakan, Rob-- dan lagi, kita lihat, 194 00:09:34,410 --> 00:09:38,379 dan mungkin kita akan melihat itu benar-benar hilang dan muncul kembali dengan cepat. 195 00:09:38,379 --> 00:09:38,920 Kamu melihatnya? 196 00:09:38,920 --> 00:09:41,400 Bagaimana itu hanya muncul jauh, dan kemudian diisi ulang? 197 00:09:41,400 --> 00:09:43,640 Itu permintaan AJAX semacam mengambil tempat. 198 00:09:43,640 --> 00:09:46,060 Dan sebagainya tergantung pada orang yang saya pilih, saya 199 00:09:46,060 --> 00:09:50,690 membuat asynchronous yang berbeda permintaan ke file yang berbeda 200 00:09:50,690 --> 00:09:52,730 yang saya miliki di server saya. 201 00:09:52,730 --> 00:09:55,550 Dan isi saya infodiv memperbarui, 202 00:09:55,550 --> 00:09:58,457 berdasarkan mana yang saya telah memilih. 203 00:09:58,457 --> 00:10:00,040 Jadi itu benar-benar semua yang ada untuk AJAX. 204 00:10:00,040 --> 00:10:04,090 Hal ini memungkinkan kita untuk membuat asynchronous ini permintaan, update ke halaman. 205 00:10:04,090 --> 00:10:06,450 Tanpa harus refresh seluruh halaman, 206 00:10:06,450 --> 00:10:08,520 kita akan mendapatkan baru konten dari itu dengan membuat 207 00:10:08,520 --> 00:10:11,170 permintaan segar baru ke server. 208 00:10:11,170 --> 00:10:13,420 Dan, halaman kita bisa menjadi cukup sedikit lebih dinamis. 209 00:10:13,420 --> 00:10:15,128 >> Dan seperti yang kita mendapatkan lebih banyak dan lebih maju, Anda 210 00:10:15,128 --> 00:10:17,700 mungkin mendapatkan hal-hal seperti katakanlah, inbox email Anda, 211 00:10:17,700 --> 00:10:19,850 di mana Anda tidak perlu melakukan apa-apa. 212 00:10:19,850 --> 00:10:22,560 Anda tidak perlu klik menu drop-down atau klik apapun, 213 00:10:22,560 --> 00:10:25,920 dan tiba-tiba, Anda terbaru email muncul di bagian atas. 214 00:10:25,920 --> 00:10:27,840 Itu juga hanya permintaan Ajax. 215 00:10:27,840 --> 00:10:30,460 Ajax meminta Anda server, server email, 216 00:10:30,460 --> 00:10:33,360 untuk mengirim lebih dari semua informasi tentang email Anda terbaru, 217 00:10:33,360 --> 00:10:38,110 dan mengubah apa yang Anda lihat pada Layar menjadi set terbaru Anda email. 218 00:10:38,110 --> 00:10:41,080 Dan jika Anda memiliki yang baru di ada, maka isi dari div yang 219 00:10:41,080 --> 00:10:44,580 akan berubah untuk mencerminkan konten diperbarui. 220 00:10:44,580 --> 00:10:45,480 Aku Doug Lloyd. 221 00:10:45,480 --> 00:10:47,500 Ini adalah CS50. 222 00:10:47,500 --> 00:10:49,229