1 00:00:00,000 --> 00:00:02,862 >> [MUSIC CHƠI] 2 00:00:02,862 --> 00:00:10,030 3 00:00:10,030 --> 00:00:11,580 >> DAVID Malan: Đây là CS50. 4 00:00:11,580 --> 00:00:12,880 Đây là khởi đầu của tuần chín. 5 00:00:12,880 --> 00:00:15,797 Và đây là những gì sẽ có được ngày sinh nhật thứ 200 của ông Boole. 6 00:00:15,797 --> 00:00:17,630 Vì vậy, đây là nghiên cứu sinh người mà chúng tôi đã ám chỉ 7 00:00:17,630 --> 00:00:21,800 khá nhiều lần về việc sử dụng Biến Boolean đúng và sai, 8 00:00:21,800 --> 00:00:22,910 1 và 0 và như vậy. 9 00:00:22,910 --> 00:00:25,270 Và điều này đã được Google của cống nộp cho anh ta ngày hôm nay. 10 00:00:25,270 --> 00:00:26,489 Ông đã có thể quay 200. 11 00:00:26,489 --> 00:00:28,280 Vì vậy, nếu bạn muốn tham gia với chúng tôi để CS50 ăn trưa, 12 00:00:28,280 --> 00:00:30,279 hãy xem các liên kết trên trang web của khóa học. 13 00:00:30,279 --> 00:00:33,580 Và khuôn mặt như vậy và bạn bè những chờ đợi bạn ở đây tại Cambridge. 14 00:00:33,580 --> 00:00:35,360 Khuôn mặt như thế này đang chờ đón bạn ở New Haven. 15 00:00:35,360 --> 00:00:37,800 Và, trên thực tế, Ken trong New Haven vui lòng thực hiện 16 00:00:37,800 --> 00:00:41,594 những gì được gọi là một GIF hoạt hình của Eli ở đây, vào gần đây lunch-- một GIF là chưa 17 00:00:41,594 --> 00:00:44,260 một định dạng tập tin đồ họa, mà bạn familiar-- đó 18 00:00:44,260 --> 00:00:46,300 trông một chút gì đó như thế này. 19 00:00:46,300 --> 00:00:48,179 Vì vậy, chỉ là một chuỗi of-- OK. 20 00:00:48,179 --> 00:00:49,720 Không ai ở đây ở Cambridge được cười. 21 00:00:49,720 --> 00:00:51,720 Nhưng ở New Haven, điều này thực sự là buồn cười, phải không? 22 00:00:51,720 --> 00:00:52,350 Được rồi. 23 00:00:52,350 --> 00:00:53,940 >> Vì vậy, chúng tôi có tham gia. 24 00:00:53,940 --> 00:00:55,900 Ở đây tại Harvard, Cụ thể, thứ Tư này, 25 00:00:55,900 --> 00:00:59,480 nếu bạn là một sinh viên năm hai hoặc sinh viên năm nhất even-- hoặc thậm chí suy nghĩ junior-- của việc ra 26 00:00:59,480 --> 00:01:01,563 một chuyển đổi thành máy tính khoa học, biết rằng có sẽ thấy 27 00:01:01,563 --> 00:01:04,440 được một CS tư vấn cho hội chợ này Thứ tư, ngay sau giờ học 28 00:01:04,440 --> 00:01:08,040 tại 04:00 trong máy tính tòa nhà khoa học Maxwell Dworkin. 29 00:01:08,040 --> 00:01:11,890 Chúng tôi sẽ đưa điều này vào khóa học của website của ngày mai, là tốt. 30 00:01:11,890 --> 00:01:14,430 Donuts, tôi đã nói, sẽ được phục vụ. 31 00:01:14,430 --> 00:01:15,180 >> Được rồi. 32 00:01:15,180 --> 00:01:18,790 Vì vậy, vui story-- Tôi thò khoảng trên internet, 33 00:01:18,790 --> 00:01:23,575 và tôi tìm thấy một số kho cũ của trang web trước đây của tôi. 34 00:01:23,575 --> 00:01:25,950 Và nó quay quanh out-- này thời gian, có vẻ như rất kịp thời 35 00:01:25,950 --> 00:01:28,910 kể từ khi tôi thu thập rằng các cuộc bầu cử UC khoảng gear lên một lần nữa. 36 00:01:28,910 --> 00:01:32,230 Vì vậy, tôi chạy cho UC, mất thảm hại. 37 00:01:32,230 --> 00:01:34,770 Và có lẽ đây là một phần lý do tại sao. 38 00:01:34,770 --> 00:01:37,600 Vì vậy, đây là trang web của tôi lúc đó. 39 00:01:37,600 --> 00:01:40,477 Đối với một số lý do, tôi nghĩ rằng nó là một ý tưởng tốt, trước khi nói với mọi người 40 00:01:40,477 --> 00:01:43,310 nền tảng những gì tôi đã và tại sao họ nên bỏ phiếu cho tôi, rằng họ có 41 00:01:43,310 --> 00:01:47,770 bấm vào để nhập vào để tìm ra rằng thông tin, mà khi nhìn lại là 42 00:01:47,770 --> 00:01:48,660 loại đáng sợ. 43 00:01:48,660 --> 00:01:50,910 Tôi không thực sự biết những gì đã được. 44 00:01:50,910 --> 00:01:53,140 >> Nhưng chắc chắn nó không giúp chiến dịch của tôi. 45 00:01:53,140 --> 00:01:56,874 Tôi cũng nhận thấy rằng bằng cấp cao year-- tôi đã có lịch Muppet này. 46 00:01:56,874 --> 00:01:58,540 Muppets là loại thịnh hành trở lại sau đó. 47 00:01:58,540 --> 00:01:59,456 Hoặc có thể họ không. 48 00:01:59,456 --> 00:02:01,790 Tôi đã có một lịch Muppet trở lại sau đó. 49 00:02:01,790 --> 00:02:04,860 Và tôi nghĩ rằng nó muốn được mát mẻ để tên máy tính của tôi trên mạng của Harvard 50 00:02:04,860 --> 00:02:07,460 frogman.student.harvard.edu. 51 00:02:07,460 --> 00:02:10,370 Vào thời điểm đó, tất cả chúng ta có duy nhất tên máy chủ nhận dạng. 52 00:02:10,370 --> 00:02:13,150 Và bạn có thể chọn một số vanity tên thay cho tên riêng của bạn. 53 00:02:13,150 --> 00:02:15,580 Và tôi đã đi với người nhái đối với một số lý do. 54 00:02:15,580 --> 00:02:19,040 >> Và sau đó tôi started-- tôi đã dành rất nhiều thời gian cách nhấn qua các liên kết 55 00:02:19,040 --> 00:02:20,280 sáng nay. 56 00:02:20,280 --> 00:02:24,690 Và đây là trang giới thiệu về mình, mà bây giờ loại có vẻ đáng yêu. 57 00:02:24,690 --> 00:02:28,210 Nhưng nó cũng làm chứng chỉ làm thế nào công nghệ đến nay đã đến. 58 00:02:28,210 --> 00:02:30,310 Ý tôi là, trở lại trong ngày, 486 là một cái gì đó. 59 00:02:30,310 --> 00:02:34,090 Những ngày này, đó là siêu, siêu, siêu chậm và cũng ít 60 00:02:34,090 --> 00:02:36,216 hơn bạn có thể có trong bạn túi riêng của những ngày này. 61 00:02:36,216 --> 00:02:38,465 Có nhiều trên đó mà thậm chí còn nhiều lúng túng. 62 00:02:38,465 --> 00:02:39,770 Vì vậy, tôi sẽ để nó ở đó. 63 00:02:39,770 --> 00:02:42,640 Nhưng đó là lần đầu tiên của tôi bước đột phá vào web-- oh, không có. 64 00:02:42,640 --> 00:02:43,180 Đó không phải. 65 00:02:43,180 --> 00:02:47,000 My bước đột phá thực sự đầu tiên thành lập trình web được trang web này, mà tôi chỉ quên. 66 00:02:47,000 --> 00:02:50,620 Tại một số điểm, tôi đã học được làm thế nào để làm cho hình ảnh nền lặp đi lặp lại. 67 00:02:50,620 --> 00:02:55,260 Và vì vậy tôi thấy ốp lát này có hiệu quả, như khúc côn cầu, bóng đá, golf và 68 00:02:55,260 --> 00:02:58,040 bóng, hoặc bất cứ điều gì đó là cho các trang web Frosh tin nhắn tức thì. 69 00:02:58,040 --> 00:03:01,390 Và điều này là thực sự, thực sự dự án dựa trên web đầu tiên tôi mất on-- 70 00:03:01,390 --> 00:03:03,880 Tôi nghĩ có lẽ thứ hai năm, year-- junior 71 00:03:03,880 --> 00:03:07,622 sau khi uống CS50 và CS51, một của các lớp tiếp theo vào chung. 72 00:03:07,622 --> 00:03:09,330 Tôi nhận thấy trong tìm kiếm thông qua các tài liệu lưu trữ 73 00:03:09,330 --> 00:03:12,150 rằng một trong những người thừa kế của tôi và bạn bè, Lee, loại thay đổi 74 00:03:12,150 --> 00:03:13,480 bản quyền với chính mình. 75 00:03:13,480 --> 00:03:17,520 Nhưng điều này thật sự là một cái gì đó Tôi nên sở hữu những bối rối tới. 76 00:03:17,520 --> 00:03:19,370 Nhưng vào thời điểm đó, điều này là trang web đầu tiên, 77 00:03:19,370 --> 00:03:22,220 như tôi đã nói cách đây vài tuần, theo đó sinh viên năm nhất có thể 78 00:03:22,220 --> 00:03:24,350 đăng ký và thể thao ở đây. 79 00:03:24,350 --> 00:03:27,950 Và do đó, nó quay ra mà hình ảnh nền 80 00:03:27,950 --> 00:03:29,530 như thế không phải là một ý tưởng tốt. 81 00:03:29,530 --> 00:03:31,840 Nhưng các web là mới, và chúng tôi đã thử nghiệm tất cả. 82 00:03:31,840 --> 00:03:34,310 Và đây là những gì tôi dường như đã làm vào thời điểm đó. 83 00:03:34,310 --> 00:03:34,810 Được rồi. 84 00:03:34,810 --> 00:03:38,020 Vì vậy, không có thêm ado, chúng tôi chuyển đổi bánh răng ngày hôm nay để cung cấp cho bạn, thực sự, 85 00:03:38,020 --> 00:03:42,250 các mảnh ghép cuối cùng mà bạn có thể tìm thấy đặc biệt hữu dụng cho các dự án cuối cùng 86 00:03:42,250 --> 00:03:44,780 nhưng cũng sẽ bắt đầu làm cho các trang web trên toàn thế giới 87 00:03:44,780 --> 00:03:46,680 cảm thấy một chút dễ hiểu hơn. 88 00:03:46,680 --> 00:03:49,460 Thật vậy, chúng ta sẽ giới thiệu một ngôn ngữ lập trình hơn 89 00:03:49,460 --> 00:03:52,474 gọi là JavaScript mà là tương tự và khác nhau theo những cách khác nhau 90 00:03:52,474 --> 00:03:54,140 từ ngôn ngữ, chúng tôi đã vậy, đến nay. 91 00:03:54,140 --> 00:03:55,807 >> Vì vậy, C, thu hồi, là ngôn ngữ biên dịch này. 92 00:03:55,807 --> 00:03:57,473 Bạn đã có để chạy nó thông qua một trình biên dịch. 93 00:03:57,473 --> 00:03:59,810 Bạn nhận được mã nguồn để phản đối mã, hoặc zero và những người thân. 94 00:03:59,810 --> 00:04:03,000 Và đó là những con số không và những người CPU của bạn, Central Processing Unit, 95 00:04:03,000 --> 00:04:04,360 thực sự hiểu. 96 00:04:04,360 --> 00:04:06,610 PHP, ngược lại, không phải là một ngôn ngữ biên dịch. 97 00:04:06,610 --> 00:04:08,772 Đó là một điều gì? 98 00:04:08,772 --> 00:04:09,980 Đây là một ngôn ngữ giải thích. 99 00:04:09,980 --> 00:04:11,750 Vì vậy, có một số chương trình được gọi là một trình thông dịch 100 00:04:11,750 --> 00:04:13,708 có đọc top it-- để phía dưới, từ trái sang right-- 101 00:04:13,708 --> 00:04:16,519 và tìm ra những gì tất cả cú pháp của bạn không và có nghĩa là, 102 00:04:16,519 --> 00:04:20,200 cho dù đó là một vòng lặp hoặc một điều kiện hoặc bất kỳ số nào khác của chương trình 103 00:04:20,200 --> 00:04:20,740 xây dựng. 104 00:04:20,740 --> 00:04:22,210 Vì vậy, đó là một ngôn ngữ giải thích. 105 00:04:22,210 --> 00:04:23,910 >> Sau đó, chúng tôi giới thiệu HTML. 106 00:04:23,910 --> 00:04:26,440 Và HTML không phải là lời ngôn ngữ lập trình. 107 00:04:26,440 --> 00:04:28,110 Chúng tôi muốn gọi nó là gì? 108 00:04:28,110 --> 00:04:31,650 Ngôn ngữ đánh dấu, mà chỉ là một loại cách ưa thích của nói nó 109 00:04:31,650 --> 00:04:35,820 không có cấu trúc lập trình như chúng ta đã thấy thậm chí trở lại trong ngày của Scratch. 110 00:04:35,820 --> 00:04:36,720 Không có vòng. 111 00:04:36,720 --> 00:04:37,920 Không có điều kiện. 112 00:04:37,920 --> 00:04:40,820 Nó thực sự là một ngôn ngữ về đánh dấu dữ liệu của bạn 113 00:04:40,820 --> 00:04:43,620 và định dạng hoặc cơ cấu nó một cách nào đó. 114 00:04:43,620 --> 00:04:46,147 >> CSS, trong khi đó, tương tự không phải là một ngôn ngữ lập trình. 115 00:04:46,147 --> 00:04:47,730 Nó thậm chí còn mang tính thẩm mỹ hơn theo định hướng. 116 00:04:47,730 --> 00:04:50,470 Và nó cho phép bạn sắp xếp các tinh chỉnh những thứ như kích thước font chữ và màu sắc 117 00:04:50,470 --> 00:04:51,850 và vị trí và tất cả điều đó. 118 00:04:51,850 --> 00:04:52,370 Sau đó, chúng tôi đã có 119 00:04:52,370 --> 00:04:53,160 >> SQL. 120 00:04:53,160 --> 00:04:56,010 Vì vậy, SQL thực sự là một lập trình ngôn ngữ trong một số ý nghĩa, 121 00:04:56,010 --> 00:04:59,330 mặc dù thiết kế đặc biệt để cơ sở dữ liệu. 122 00:04:59,330 --> 00:05:03,347 Nhưng thậm chí dù chúng tôi chỉ giới thiệu với bạn lựa chọn và chèn và xóa và cập nhật 123 00:05:03,347 --> 00:05:05,430 và một vài người khác, hóa ra bạn có thể thực sự 124 00:05:05,430 --> 00:05:07,380 viết các chức năng hay thủ tục, như họ đang 125 00:05:07,380 --> 00:05:11,270 gọi là, trong SQL mà nhìn và hành động khá giống như PHP và C chức năng. 126 00:05:11,270 --> 00:05:12,390 Vì vậy, biết rằng những tồn tại. 127 00:05:12,390 --> 00:05:15,348 Nhưng chúng tôi thậm chí không bận tâm với họ như chúng ta chỉ làm xước bề mặt ở đây. 128 00:05:15,348 --> 00:05:18,600 Và sau đó JavaScript, người cuối cùng của ngôn ngữ của chúng tôi chính thức giới thiệu. 129 00:05:18,600 --> 00:05:21,029 Vì vậy, JavaScript, quá, là một ngôn ngữ giải thích. 130 00:05:21,029 --> 00:05:23,070 Và những người quen thuộc, làm bạn muốn phân biệt nó 131 00:05:23,070 --> 00:05:26,960 với một số đặc trưng từ cả hai C và PHP? 132 00:05:26,960 --> 00:05:28,300 Điều gì làm cho nó khác nhau? 133 00:05:28,300 --> 00:05:29,650 >> Đung Nó không được biên dịch. 134 00:05:29,650 --> 00:05:29,930 >> DAVID Malan: Nói một lần nữa? 135 00:05:29,930 --> 00:05:31,200 >> Đung Nó không được biên dịch. 136 00:05:31,200 --> 00:05:31,930 >> DAVID Malan: Nó không được biên dịch. 137 00:05:31,930 --> 00:05:33,450 Vì vậy, nó cũng được giải thích. 138 00:05:33,450 --> 00:05:34,760 Vì vậy, nó không được biên dịch. 139 00:05:34,760 --> 00:05:37,210 Nhưng mà làm cho nó một chút như PHP. 140 00:05:37,210 --> 00:05:39,545 Nhưng nó vẫn khác PHP trong một số cách nổi bật, 141 00:05:39,545 --> 00:05:40,920 ít nhất là trong cách chúng ta sẽ sử dụng nó. 142 00:05:40,920 --> 00:05:41,205 Yeah? 143 00:05:41,205 --> 00:05:41,940 >> Đung Nó chạy client-side. 144 00:05:41,940 --> 00:05:44,000 >> DAVID Malan: Nó chạy phía khách hàng, thông thường. 145 00:05:44,000 --> 00:05:47,190 Đó là thực sự phân biệt đặc trưng cho chúng tôi ngay bây giờ. 146 00:05:47,190 --> 00:05:51,170 C là phía máy chủ trong ý nghĩa rằng chúng tôi đã làm tất cả mọi thứ trong CS50 IDE. 147 00:05:51,170 --> 00:05:53,630 PHP vậy, đến nay đã được server-side trong chừng mực 148 00:05:53,630 --> 00:05:56,550 vì nó cũng được interpreted-- không được biên dịch, nhưng interpreted-- 149 00:05:56,550 --> 00:06:00,690 bên CS50 IDE, trong đó tất nhiên là chỉ một máy chủ hoặc máy chủ trong các đám mây. 150 00:06:00,690 --> 00:06:03,070 >> Nhưng JavaScript, thậm chí mặc dù bạn bạn đang đi 151 00:06:03,070 --> 00:06:07,000 để bắt đầu viết nó cho, nói, pset tám và có thể thức projects-- bạn 152 00:06:07,000 --> 00:06:09,620 đi sang phải nó trong CS50 IDE và lưu nó 153 00:06:09,620 --> 00:06:14,760 trong các tập tin trong CS50 IDE, IDE CS50 và, đến lượt nó, các máy chủ đám mây 154 00:06:14,760 --> 00:06:19,160 mà trên đó nó được lưu trữ, sẽ không để giải thích hoặc thực thi mã của bạn. 155 00:06:19,160 --> 00:06:23,880 Thay vào đó, nó sẽ được gửi đi trong hình thức không đổi xuống cho trình duyệt. 156 00:06:23,880 --> 00:06:26,990 Và sau đó nó sẽ được trình duyệt IE hoặc Chrome hoặc Firefox hay Safari 157 00:06:26,990 --> 00:06:30,697 hoặc bất cứ điều gì đó thực sự diễn giải nó, trên xuống dưới, từ trái sang phải. 158 00:06:30,697 --> 00:06:32,780 Vì vậy, các phân biệt chủ yếu đặc trưng cho ngày hôm nay 159 00:06:32,780 --> 00:06:36,110 là JavaScript là client-side và PHP, ví dụ, 160 00:06:36,110 --> 00:06:37,690 có được server-side. 161 00:06:37,690 --> 00:06:40,920 Bây giờ, điều này có ý nghĩa thú vị cho, như, sở hữu trí tuệ 162 00:06:40,920 --> 00:06:42,660 và những người thực sự có thể nhìn thấy mã của bạn. 163 00:06:42,660 --> 00:06:44,860 Và thực sự, bạn có thể đi trên web và xem nhất 164 00:06:44,860 --> 00:06:47,530 bất kỳ mã mà một người nào đó có viết bằng JavaScript. 165 00:06:47,530 --> 00:06:50,230 Đôi khi nó có thể đọc được, đôi khi nó làm cho khó hiểu. 166 00:06:50,230 --> 00:06:52,550 Nhưng thêm vào đó trong thời gian do. 167 00:06:52,550 --> 00:06:57,530 >> Vì vậy, JavaScript, độc đáo đủ, là siêu tương tự, cú pháp, để C. 168 00:06:57,530 --> 00:06:59,364 Và giống như PHP, không có chức năng chính. 169 00:06:59,364 --> 00:07:02,113 Nếu bạn muốn bắt đầu bằng văn bản Mã JavaScript, như bạn sẽ thấy ngày hôm nay, 170 00:07:02,113 --> 00:07:03,270 bạn chỉ cần bắt đầu viết nó. 171 00:07:03,270 --> 00:07:06,910 Nhưng đó là, bạn sẽ thấy, đặc biệt hữu ích trong bối cảnh của các trình duyệt web. 172 00:07:06,910 --> 00:07:09,820 Tuy nhiên, nhỏ của tôi disclaimer-- thường earlier-- 173 00:07:09,820 --> 00:07:13,790 là để nói rằng bạn có thể ngày càng sử dụng ngày nay JavaScript phía máy chủ 174 00:07:13,790 --> 00:07:17,655 sử dụng một khung lạ mắt gọi là Node.js rằng một số ứng dụng riêng của CS50 175 00:07:17,655 --> 00:07:18,280 được viết. 176 00:07:18,280 --> 00:07:20,640 Kiểm tra 50 thực sự sử dụng Node.js. 177 00:07:20,640 --> 00:07:24,140 Nhưng chúng ta sẽ tập trung vào JavaScript client-side đây trên ra ngoài. 178 00:07:24,140 --> 00:07:26,750 >> Vì vậy, đây là một tập hợp các điều kiện trong PHP. 179 00:07:26,750 --> 00:07:29,350 Xin lỗi, in-- thực sự, mà tuyên bố, quá là đúng. 180 00:07:29,350 --> 00:07:32,200 Đây cũng là một tập hợp các điều kiện trong JavaScript. 181 00:07:32,200 --> 00:07:35,560 Cú pháp, nó là giống với C và PHP. 182 00:07:35,560 --> 00:07:39,040 Biểu của ông Boole là, tương tự như vậy, cú pháp 183 00:07:39,040 --> 00:07:41,190 giống hệt nhau cho cả hai C và PHP. 184 00:07:41,190 --> 00:07:44,100 Chúng tôi cũng có thiết bị chuyển mạch trong JavaScript mà nhìn giống hệt nhau. 185 00:07:44,100 --> 00:07:46,350 Chúng tôi có cho vòng mà là có cấu trúc giống nhau, 186 00:07:46,350 --> 00:07:48,140 trong khi các vòng, làm trong khi các vòng lặp. 187 00:07:48,140 --> 00:07:49,980 >> Điều này là một chút khác nhau. 188 00:07:49,980 --> 00:07:53,120 PHP đã từng xây dựng mà bạn có thể sử dụng được 189 00:07:53,120 --> 00:07:55,320 hoặc sẽ sử dụng trong pset bảy, có lẽ. 190 00:07:55,320 --> 00:07:59,460 JavaScript có phiên bản đặc biệt này cho nơi bạn có nghĩa là nói điều gì đó 191 00:07:59,460 --> 00:08:03,864 như cho chính biến trong đối tượng, trong đó là một cách rất ngắn gọn nói, 192 00:08:03,864 --> 00:08:06,780 nếu tôi đã có một object-- và chúng tôi sẽ nói về những lần nữa trong một moment-- 193 00:08:06,780 --> 00:08:10,370 và tôi muốn để lặp qua tất cả của các cặp giá trị bên trong, 194 00:08:10,370 --> 00:08:13,620 Tôi không cần phải tìm ra cách để chỉ số về số lượng chúng bằng số không, một, 195 00:08:13,620 --> 00:08:14,580 hai ba. 196 00:08:14,580 --> 00:08:15,900 >> Tôi nghĩa là có thể nói điều này. 197 00:08:15,900 --> 00:08:20,740 Và trên mỗi lần lặp, JavaScript đối với tôi sẽ cập nhật các chính biến 198 00:08:20,740 --> 00:08:24,810 là chìa khóa đầu tiên, sau đó bấm phím tiếp theo, sau đó các khóa tiếp theo, sau đó bấm phím tiếp theo, 199 00:08:24,810 --> 00:08:25,510 và kể từ đó trở đi. 200 00:08:25,510 --> 00:08:30,000 Và tôi có thể có được ở giá trị của nó bằng cách xử lý một đối tượng trong JavaScript, như chúng ta sẽ thấy, 201 00:08:30,000 --> 00:08:32,584 như thể đó là một mảng liên kết trong PHP. 202 00:08:32,584 --> 00:08:35,750 Thật vậy, nếu bạn cuối cùng bọc của bạn tâm xung quanh những gì một mảng kết hợp là 203 00:08:35,750 --> 00:08:40,140 trong PHP, bạn có thể nghĩ về nó bây giờ là giống với một đối tượng trong JavaScript. 204 00:08:40,140 --> 00:08:42,030 Nhưng đó là một chút một sự đơn giản. 205 00:08:42,030 --> 00:08:47,230 >> Mảng nhìn, độc đáo đủ, giống hệt nhau PHP trừ cho một ký tự. 206 00:08:47,230 --> 00:08:51,425 Có một điều còn thiếu ở đây mà chúng ta đã thấy trong tuần qua với PHP. 207 00:08:51,425 --> 00:08:52,050 Có gì bỏ qua? 208 00:08:52,050 --> 00:08:53,310 Yeah? 209 00:08:53,310 --> 00:08:54,090 Không có dấu hiệu đồng đô la. 210 00:08:54,090 --> 00:08:56,240 Vì vậy, chúng ta trở lại với một hơn thế giới bình thường mà 211 00:08:56,240 --> 00:08:58,050 các biến không có dấu hiệu đồng đô la. 212 00:08:58,050 --> 00:09:00,810 Nhưng bạn làm tiền tố chúng với var, thông thường. 213 00:09:00,810 --> 00:09:02,230 Và var nghĩa biến. 214 00:09:02,230 --> 00:09:06,440 Và giống như PHP là lỏng lẻo typed-- theo đó có nhiều loại, 215 00:09:06,440 --> 00:09:10,120 có những con số và chuỗi và phao nổi và rất forth-- 216 00:09:10,120 --> 00:09:11,570 JavaScript tương tự có các loại. 217 00:09:11,570 --> 00:09:15,470 Nhưng nó lỏng lẻo ở chỗ chúng tôi các lập trình viên không cần phải xác định chúng. 218 00:09:15,470 --> 00:09:18,980 Chúng tôi chỉ có được nhận thức rằng các loại khác nhau tồn tại. 219 00:09:18,980 --> 00:09:21,690 >> Biến, meanwhile-- đây là cách chúng ta có thể khai báo "hello, world" 220 00:09:21,690 --> 00:09:22,230 như là một chuỗi. 221 00:09:22,230 --> 00:09:24,890 Chú ý nó giống hệt với PHP nhưng không có dấu hiệu đồng đô la. 222 00:09:24,890 --> 00:09:27,120 Và đây là một cái gì đó chúng tôi sẽ bắt đầu thấy ngày nay nhiều hơn, 223 00:09:27,120 --> 00:09:30,990 nhờ đó mà bạn có một đối tượng khóa và giá trị. 224 00:09:30,990 --> 00:09:32,990 Và nếu bạn muốn thử để suy ra từ week-- cuối cùng 225 00:09:32,990 --> 00:09:34,730 cú pháp là một chút khác nhau. 226 00:09:34,730 --> 00:09:39,740 Nhưng một chút tỉnh táo check-- bao nhiêu phím không đối tượng này dường như có? 227 00:09:39,740 --> 00:09:40,850 Vì vậy, tôi thấy bốn. 228 00:09:40,850 --> 00:09:43,560 Tôi thấy hai. 229 00:09:43,560 --> 00:09:44,680 >> Vì vậy, nó thực sự hai. 230 00:09:44,680 --> 00:09:47,260 Vì vậy, đây là một bộ sưu tập của hai cặp khóa-giá trị. 231 00:09:47,260 --> 00:09:49,820 Điều quan trọng là biểu tượng có giá trị là FB. 232 00:09:49,820 --> 00:09:52,620 Điều quan trọng là giá có giá trị là 101,53. 233 00:09:52,620 --> 00:09:54,230 Vì vậy, những người là hai cặp khóa-giá trị. 234 00:09:54,230 --> 00:09:58,120 Và hãy nhớ, PHP-- và điều này là một lần nữa chỉ là loại khác biệt cú pháp. 235 00:09:58,120 --> 00:10:00,170 Đó không phải là tất cả mà trí tuệ thú vị. 236 00:10:00,170 --> 00:10:04,610 PHP có thể viết bài này cùng điều như quote follows--, bình đẳng. 237 00:10:04,610 --> 00:10:06,730 Và tôi thay đổi này để dấu ngoặc vuông. 238 00:10:06,730 --> 00:10:11,240 Và sau đó tôi thay đổi này để một lời trích dẫn, "giá". 239 00:10:11,240 --> 00:10:12,500 Và sau đó tôi không sử dụng dấu hai chấm. 240 00:10:12,500 --> 00:10:15,060 Tôi đã sử dụng những gì trong tuần qua? 241 00:10:15,060 --> 00:10:18,290 Yeah, dấu bằng mũi tên ký hiệu funky. 242 00:10:18,290 --> 00:10:21,470 >> Và sau đó tôi đã làm điều tương tự ở đây. 243 00:10:21,470 --> 00:10:23,580 Cùng một điều ở đây. 244 00:10:23,580 --> 00:10:24,240 Và đó là tất cả. 245 00:10:24,240 --> 00:10:27,752 Vì vậy, nó là tốt nếu điều này có không thực sự chìm vào bộ nhớ chỉ 246 00:10:27,752 --> 00:10:29,960 nhưng vì nó thực sự trí tuệ nhàm chán. 247 00:10:29,960 --> 00:10:31,660 Đó là sự khác biệt chỉ là cú pháp. 248 00:10:31,660 --> 00:10:33,230 Nhưng những ý tưởng là chính xác như nhau. 249 00:10:33,230 --> 00:10:35,910 Bên trong của biến này quote trong JavaScript 250 00:10:35,910 --> 00:10:39,020 là một bộ sưu tập các cặp khóa-giá trị, một trong số đó là biểu tượng, một trong số đó 251 00:10:39,020 --> 00:10:39,690 là giá cả. 252 00:10:39,690 --> 00:10:42,340 Và tôi có thể có được ở những giá trị với cú pháp sau đây. 253 00:10:42,340 --> 00:10:46,280 Cũng giống như trong PHP, tôi có thể làm điều gì đó để cho like-- 254 00:10:46,280 --> 00:10:48,590 tôi làm cho hộp này lớn hơn một chút. 255 00:10:48,590 --> 00:10:52,750 Cũng giống như trong PHP, tôi có thể làm this-- oh, mẹ kiếp. 256 00:10:52,750 --> 00:10:53,250 Nào. 257 00:10:53,250 --> 00:10:56,350 258 00:10:56,350 --> 00:11:00,800 >> Cũng giống như trong PHP-- OK, chúng tôi sẽ chỉ cần sử dụng các ghi chú trình bày. 259 00:11:00,800 --> 00:11:06,010 Cũng giống như trong PHP, tôi có thể làm $ quote $ quote ["biểu tượng"], 260 00:11:06,010 --> 00:11:08,860 và điều này sẽ làm cho tôi giá trị của "biểu tượng." 261 00:11:08,860 --> 00:11:12,800 Trong JavaScript, nó sẽ được giống hệt nhau, nhờ đó mà tôi chỉ có thể làm điều này. 262 00:11:12,800 --> 00:11:14,850 Điều duy nhất đó là thiếu là các ký hiệu đô la. 263 00:11:14,850 --> 00:11:17,470 >> Vì vậy, độc đáo đủ, sau đó, có không phải tất cả mà nhiều cú pháp mới. 264 00:11:17,470 --> 00:11:21,025 Vì vậy, những gì hôm nay chúng tôi tập trung vào, thực sự, là một số ý tưởng và các ứng dụng. 265 00:11:21,025 --> 00:11:22,900 Và lần đầu tiên như vậy ứng dụng mà có lẽ bạn 266 00:11:22,900 --> 00:11:26,090 đã nhìn thấy nếu bạn nhảy vào pset bảy đã là cú pháp này. 267 00:11:26,090 --> 00:11:28,980 Vì vậy, trong pset bảy, nếu bạn đã nhìn thấy hoặc không nhìn thấy được chưa, 268 00:11:28,980 --> 00:11:33,570 biết rằng có một tập tin mà chúng tôi cung cấp bạn gọi config.json-- JavaScript 269 00:11:33,570 --> 00:11:34,661 Object Notation. 270 00:11:34,661 --> 00:11:35,160 Tại sao? 271 00:11:35,160 --> 00:11:39,540 Chúng tôi muốn để có thể cung cấp cho bạn một mẫu với một số cặp giá trị khóa. 272 00:11:39,540 --> 00:11:44,290 Chúng tôi muốn để có thể cung cấp cho bạn một danh sách của chủ nhà, tên của các máy chủ. 273 00:11:44,290 --> 00:11:46,710 Chúng tôi muốn cung cấp cho bạn một giữ chỗ cho tên người dùng của bạn 274 00:11:46,710 --> 00:11:48,210 và một giữ chỗ cho mật khẩu của bạn. 275 00:11:48,210 --> 00:11:49,410 Nếu bạn không nhìn thấy này chưa, không phải lo lắng. 276 00:11:49,410 --> 00:11:51,340 Thêm chi tiết về điều này trong pset bảy [? spec. ?] Và sau đó, 277 00:11:51,340 --> 00:11:53,173 rõ ràng, chúng tôi muốn bạn để điền vào to-dos 278 00:11:53,173 --> 00:11:55,310 bởi vì khi bạn đăng nhập vào CS50 IDE, mỗi bạn 279 00:11:55,310 --> 00:11:57,630 có tên đăng nhập và mật khẩu riêng của bạn. 280 00:11:57,630 --> 00:12:00,910 >> Vì vậy, chúng ta có thể đã sử dụng một nửa tá hoặc nhiều định dạng tập tin khác nhau. 281 00:12:00,910 --> 00:12:02,940 Chúng ta có thể đã sử dụng một tập tin txt. 282 00:12:02,940 --> 00:12:04,570 Chúng ta có thể sử dụng một tập tin CSV. 283 00:12:04,570 --> 00:12:06,745 Chúng ta có thể đã sử dụng một INI file, một file XML, 284 00:12:06,745 --> 00:12:09,370 cả một bó nhiều từ viết tắt bạn có thể chưa bao giờ nghe. 285 00:12:09,370 --> 00:12:11,244 Đó là loại tùy ý cuối ngày. 286 00:12:11,244 --> 00:12:16,030 Nhưng siêu phổ biến những ngày này là một văn bản định dạng được gọi JSON-- JavaScript Object 287 00:12:16,030 --> 00:12:18,460 Notation-- trông như thế này. 288 00:12:18,460 --> 00:12:20,890 Đó là một chút khó hiểu, nhưng nhận thấy các mô hình. 289 00:12:20,890 --> 00:12:24,180 Bạn bắt đầu với một xoăn mở nẹp, và bạn kết thúc với cùng. 290 00:12:24,180 --> 00:12:26,550 Bên trong đó là một cái gì đó. 291 00:12:26,550 --> 00:12:27,920 Đó là một cặp khóa-giá trị. 292 00:12:27,920 --> 00:12:30,580 Vì vậy, đây là một đối tượng mà tôi nhìn trên màn hình ở đây 293 00:12:30,580 --> 00:12:33,690 rằng có một trọng điểm, trong đó có một giá trị. 294 00:12:33,690 --> 00:12:37,610 Và chỉ cần suy luận dựa trên mô hình trước đó, chìa khóa ở đây là gì? 295 00:12:37,610 --> 00:12:39,790 Cơ sở dữ liệu, các điều bên trái của đại tràng. 296 00:12:39,790 --> 00:12:43,500 >> Bây giờ, giá trị sẽ xảy ra là một nhiều dòng thời gian này. 297 00:12:43,500 --> 00:12:46,760 Nhưng giá trị bắt đầu với một xoăn cú đúp và kết thúc với một cú đúp xoăn. 298 00:12:46,760 --> 00:12:49,480 Vì vậy, những gì bạn sẽ đề xuất là kiểu của giá trị của cơ sở dữ liệu? 299 00:12:49,480 --> 00:12:52,160 300 00:12:52,160 --> 00:12:54,670 Một từ điển hay, chỉ cần hơn ngắn gọn, một đối tượng. 301 00:12:54,670 --> 00:12:55,170 Bên phải? 302 00:12:55,170 --> 00:13:00,010 Đây là loại một cấu trúc dữ liệu có thể sử dụng các cấu trúc khác trong chính nó. 303 00:13:00,010 --> 00:13:02,750 Vì vậy, nếu toàn bộ điều này chúng tôi gọi một object-- và một đối tượng 304 00:13:02,750 --> 00:13:07,101 chỉ là một loạt các giá trị khóa pairs-- sự giá trị của cơ sở dữ liệu chính nó là một đối tượng. 305 00:13:07,101 --> 00:13:10,350 Giá trị của cơ sở dữ liệu có cả một bó các cặp giá trị quan trọng, là người đầu tiên trong số đó 306 00:13:10,350 --> 00:13:13,130 là chủ nhà, sau đó đặt tên, sau đó Tên truy nhập, sau đó mật khẩu, 307 00:13:13,130 --> 00:13:17,550 mỗi người có giá trị, trong khi đó, nó chỉ là một chuỗi nhàm chán trong dấu ngoặc kép. 308 00:13:17,550 --> 00:13:19,770 >> Vì vậy, ngay cả khi đó không phải là siêu rõ ràng chỉ được nêu ra, 309 00:13:19,770 --> 00:13:22,740 biết rằng đây chỉ là một là tiêu chuẩn, cách khá nhàm chán 310 00:13:22,740 --> 00:13:25,190 lưu trữ dữ liệu trong một định dạng chuẩn. 311 00:13:25,190 --> 00:13:27,700 Nhưng những sai lầm phổ biến mà bạn có thể thực hiện, ngay cả trong pset bảy, 312 00:13:27,700 --> 00:13:32,120 là những điều ngu ngốc chút, giống như nếu bạn vô tình bỏ qua các dấu phẩy ở đó. 313 00:13:32,120 --> 00:13:34,900 Điều đó sẽ dẫn đến tập tin không nhất thiết là có thể đọc được. 314 00:13:34,900 --> 00:13:38,191 Nếu bạn vô tình bỏ qua những thứ như báo giá, nó sẽ không thể đọc được. 315 00:13:38,191 --> 00:13:41,654 Vì vậy, nó là một định dạng tập tin khá nitpicky, nhưng đó là một trong đó là siêu phổ biến. 316 00:13:41,654 --> 00:13:44,820 Và chúng tôi xảy ra để sử dụng nó, mặc dù bạn không sử dụng bất kỳ JavaScript khác, 317 00:13:44,820 --> 00:13:46,330 trong pset bảy. 318 00:13:46,330 --> 00:13:46,860 >> Được rồi. 319 00:13:46,860 --> 00:13:48,110 Vì vậy, nhớ hình ảnh này. 320 00:13:48,110 --> 00:13:51,657 Chúng tôi nói chuyện về, trong HTML, mà mã có thể trông như thế này. 321 00:13:51,657 --> 00:13:54,740 Đây là ngôn ngữ đánh dấu siêu văn bản [Không nghe thấy] chỉ "hello, thế giới." 322 00:13:54,740 --> 00:13:57,570 Nhưng sau đó chúng tôi đề xuất một trong khi lại rằng nếu nó giúp, 323 00:13:57,570 --> 00:14:00,210 bạn có thể muốn bắt đầu suy nghĩ về vấn đề này như một cái cây. 324 00:14:00,210 --> 00:14:03,730 Trong thực tế, thụt đầu dòng mà chúng ta sử dụng chỉ vì khả năng đọc của 325 00:14:03,730 --> 00:14:05,610 hoặc vì lợi ích về phong cách của bên trái có thể loại của 326 00:14:05,610 --> 00:14:10,040 được dịch sang cây này, nơi bạn có một số nút gốc đặc biệt mà chúng tôi sẽ 327 00:14:10,040 --> 00:14:16,860 quát được gọi là tài liệu, sau đó là yếu tố HTML gốc hoặc thẻ, HTML, 328 00:14:16,860 --> 00:14:19,980 mà sau đó có hai trẻ em, đầu và thân. 329 00:14:19,980 --> 00:14:21,750 >> Và sau đó lần lượt, đầu có một cái tên. 330 00:14:21,750 --> 00:14:23,440 Và danh hiệu có một giá trị văn bản. 331 00:14:23,440 --> 00:14:26,130 Và cơ thể tương tự có một giá trị văn bản. 332 00:14:26,130 --> 00:14:29,220 Vì vậy, nếu bạn cảm thấy thoải mái nói mà có, bạn có thể mất HTML này 333 00:14:29,220 --> 00:14:32,080 và vẽ một hình ảnh như thế này, phía bên tay phải 334 00:14:32,080 --> 00:14:35,910 là một mô hình tinh thần tốt đẹp bởi vì bây giờ rằng chúng ta có JavaScript, một lập trình 335 00:14:35,910 --> 00:14:39,960 ngôn ngữ mà trình duyệt có thể thực hiện và giải thích cho bạn, 336 00:14:39,960 --> 00:14:42,690 nó chỉ ra rằng những gì chúng tôi về để làm trong mã 337 00:14:42,690 --> 00:14:45,320 được bắt đầu thao tác này cấu trúc cây trong bộ nhớ. 338 00:14:45,320 --> 00:14:47,070 Chúng tôi không cần phải xây dựng cây trong bộ nhớ. 339 00:14:47,070 --> 00:14:49,880 Chúng tôi không cần phải làm loại cấu trúc dữ liệu pset lăm-style 340 00:14:49,880 --> 00:14:50,650 phức tạp. 341 00:14:50,650 --> 00:14:54,610 Các trình duyệt, độc đáo đủ, thuận diễn giải HTML trên xuống dưới, 342 00:14:54,610 --> 00:14:58,600 trái hoặc phải, là nghĩa đen đi tay chúng tương đương với một con trỏ 343 00:14:58,600 --> 00:15:00,840 cho rằng toàn bộ cây miễn phí. 344 00:15:00,840 --> 00:15:02,150 Nó làm tất cả các công việc khó khăn. 345 00:15:02,150 --> 00:15:05,520 Đó là những gì Mozilla và Apple và những người khác đã làm cho chúng ta. 346 00:15:05,520 --> 00:15:09,400 >> Và với JavaScript chúng ta sẽ có thể kiểm soát và thay đổi và làm 347 00:15:09,400 --> 00:15:12,910 điều thú vị để cây đó, nếu không được biết đến 348 00:15:12,910 --> 00:15:15,880 như một DOM hoặc Document Object Model. 349 00:15:15,880 --> 00:15:17,110 Những loại vật? 350 00:15:17,110 --> 00:15:19,030 Vâng, nó chỉ ra rằng trong JavaScript, có 351 00:15:19,030 --> 00:15:22,800 danh sách giặt ủi này sự kiện có thể xảy ra. 352 00:15:22,800 --> 00:15:26,330 Và chúng tôi đã không thực sự được sử dụng đó Lời kể từ tuần zero và pset 353 00:15:26,330 --> 00:15:28,240 bằng không khi chúng tôi nói chuyện về Scratch. 354 00:15:28,240 --> 00:15:31,390 Hầu hết các bạn có thể không sử dụng một sự kiện trong dự án Scratch của bạn. 355 00:15:31,390 --> 00:15:33,850 Nhưng bạn có thể gọi lại đơn giản Marco Polo 356 00:15:33,850 --> 00:15:36,760 Ví dụ, khi chúng ta có hai sprites, một trong số đó cho biết, Marco. 357 00:15:36,760 --> 00:15:40,180 Các khác của người mà sau đó, khi nghe và nghe sự kiện, cho biết, Polo. 358 00:15:40,180 --> 00:15:42,080 Nếu không được, cảm thấy tự do để nhìn lại đó rất lâu. 359 00:15:42,080 --> 00:15:44,450 >> Nhưng điều này chỉ là để nói, và bạn có thể loại 360 00:15:44,450 --> 00:15:47,730 suy ra từ tên của các điều, JavaScript, nó quay ra, 361 00:15:47,730 --> 00:15:53,200 sẽ cung cấp cho chúng ta một cách để lắng nghe cho chuột đi xuống hoặc chuột đi lên 362 00:15:53,200 --> 00:15:57,920 hoặc phím đi xuống hoặc phím đi lên hoặc onselect onsubmit 363 00:15:57,920 --> 00:15:59,740 hoặc onresizing một cái gì đó. 364 00:15:59,740 --> 00:16:03,060 Nói cách khác, bất kỳ hành động thể chất rằng một con người có thể đi với một trình duyệt 365 00:16:03,060 --> 00:16:08,210 mà bạn làm mỗi ngày, bạn có thể viết mã cho mà nghe cho các sự kiện 366 00:16:08,210 --> 00:16:10,220 và sau đó làm điều gì đó thích hợp. 367 00:16:10,220 --> 00:16:14,130 >> Ví dụ, nếu bạn sử dụng Google Maps, những gì sẽ xảy ra nếu bạn nhấp chuột và di chuyển 368 00:16:14,130 --> 00:16:16,250 chuột, thường? 369 00:16:16,250 --> 00:16:17,758 Nếu bạn nhấp vào và kéo? 370 00:16:17,758 --> 00:16:18,258 Yeah? 371 00:16:18,258 --> 00:16:21,701 372 00:16:21,701 --> 00:16:22,200 Đúng như vậy. 373 00:16:22,200 --> 00:16:23,159 Bản đồ bắt đầu di chuyển. 374 00:16:23,159 --> 00:16:25,616 Vì vậy, bạn có thể sắp xếp xem có gì trên đây, những gì ở trên đó. 375 00:16:25,616 --> 00:16:27,130 Và làm thế nào để Google thực hiện điều đó? 376 00:16:27,130 --> 00:16:29,421 Vâng, có lẽ, họ sử dụng một vài những sự kiện 377 00:16:29,421 --> 00:16:31,720 thính giả, một trong đó nói, lắng nghe trên chuột 378 00:16:31,720 --> 00:16:35,410 down-- vì vậy khi sử dụng thể chất đẩy trackpad của mình hoặc mình hoặc chuột của mình 379 00:16:35,410 --> 00:16:36,010 xuống. 380 00:16:36,010 --> 00:16:38,350 Và sau đó, chúng tôi đang tìm kiếm một cái gì đó giống như phong trào 381 00:16:38,350 --> 00:16:41,145 hoặc một số sự kiện khác cho phép chúng ta nắm bắt kéo. 382 00:16:41,145 --> 00:16:45,910 Và trên thực tế, kéo là tương tự như trong này dot dot dot danh sách các tùy chọn có thể. 383 00:16:45,910 --> 00:16:49,140 >> Vì vậy, đây sẽ là một mạnh mẽ cách để bắt đầu phản ứng cho người sử dụng 384 00:16:49,140 --> 00:16:52,824 thậm chí trước khi người đó thực sự nhấp chuột một cái gì đó rõ ràng như trình. 385 00:16:52,824 --> 00:16:55,240 Nhưng chúng tôi sẽ giới thiệu một vài chủ đề để đạt được điều đó. 386 00:16:55,240 --> 00:16:58,570 Nhưng trước tiên, chúng ta hãy chuyển tiếp để một số mã thực tế. 387 00:16:58,570 --> 00:17:01,450 Vì vậy, tôi sẽ đi trước và mở dom-0, 388 00:17:01,450 --> 00:17:05,869 đó là một ví dụ rất đơn giản ở đây là nếu tôi phóng to đơn giản 389 00:17:05,869 --> 00:17:08,500 có đầu vào này ở đây cho tôi. 390 00:17:08,500 --> 00:17:12,410 Và tôi sẽ đi trước và gõ vào "David" cho tên của tôi và nhấp vào Gửi. 391 00:17:12,410 --> 00:17:17,940 >> Và sau đó, mặc dù loại với giá rẻ, tôi nhắc này mà bật lên nói, 392 00:17:17,940 --> 00:17:19,244 "hello, David!" 393 00:17:19,244 --> 00:17:21,740 Vì vậy, đây là loại như chúng tôi "hello, world" 394 00:17:21,740 --> 00:17:25,150 rằng chúng tôi đã làm một lúc quay lại trong C và ngay cả trong PHP vì tôi đã tự động 395 00:17:25,150 --> 00:17:26,310 xuất ra tên của tôi. 396 00:17:26,310 --> 00:17:28,230 Tôi có thể làm tên của người khác ở đây. 397 00:17:28,230 --> 00:17:31,240 Tôi chỉ đơn giản là có thể thay đổi điều này với, như, Hannah, nhấn Submit. 398 00:17:31,240 --> 00:17:33,780 Và quả thực, các cửa sổ pop-up ít thay đổi. 399 00:17:33,780 --> 00:17:36,650 >> Bây giờ, pop-up là một trong những hầu hết các tính năng bị lạm dụng của web. 400 00:17:36,650 --> 00:17:38,520 Và trên thực tế, trở lại trong các chức năng chặn pop-up ngày 401 00:17:38,520 --> 00:17:40,820 đi vào thịnh hành vì bạn sẽ đi đến một số website-- 402 00:17:40,820 --> 00:17:43,604 có lẽ một place-- ngờ mà sẽ sau đó đột nhiên 403 00:17:43,604 --> 00:17:46,020 bắt đầu peppering màn hình của bạn với một bó toàn bộ các cửa sổ pop-up. 404 00:17:46,020 --> 00:17:49,700 Và vì thế khả năng này để bật lên cửa sổ ở phía trước của người sử dụng 405 00:17:49,700 --> 00:17:52,372 đã không được đặc biệt được đón nhận bởi nhân loại. 406 00:17:52,372 --> 00:17:54,080 Vì vậy, đó là lý do tại sao bạn thấy ngăn chặn điều này, 407 00:17:54,080 --> 00:17:55,706 mà chỉ làm cho toàn bộ điều này xấu xí. 408 00:17:55,706 --> 00:17:57,996 Vì vậy, chúng ta sẽ cần một cách tốt hơn để nhắc nhở người dùng. 409 00:17:57,996 --> 00:17:59,350 Nhưng hiện nay, điều đó dường như làm việc. 410 00:17:59,350 --> 00:18:03,320 Vì vậy, chỉ bằng trực giác, những gì dường như xảy ra ở đây? 411 00:18:03,320 --> 00:18:07,870 Tôi đi trước và bấm Gửi, và sau đó một cái gì đó đang xảy ra, rõ ràng. 412 00:18:07,870 --> 00:18:12,870 Nhưng những gì không xảy ra mà đã xảy ra tuần trước bất cứ lúc nào tôi nhấp Submit? 413 00:18:12,870 --> 00:18:15,940 Những gì đã không xảy ra trên màn hình? 414 00:18:15,940 --> 00:18:17,170 Lấy làm tiếc? 415 00:18:17,170 --> 00:18:18,010 Nạp lại. 416 00:18:18,010 --> 00:18:19,720 Các URL không thay đổi ở tất cả. 417 00:18:19,720 --> 00:18:22,250 Tôi cho rằng đây là dom-0, và tôi vẫn còn ở dom-0. 418 00:18:22,250 --> 00:18:26,890 Thông thường, chúng tôi muốn có được thay đổi một số khác URL, như register.php hoặc tương tự. 419 00:18:26,890 --> 00:18:29,560 >> Nhưng ngay cả khi tôi bỏ điều này bằng cách nhấn OK, 420 00:18:29,560 --> 00:18:32,310 nhận thấy rằng các URL vẫn hoàn toàn đặt. 421 00:18:32,310 --> 00:18:35,350 Và, trên thực tế, nếu tôi là một chút hoài nghi, hãy để tôi mở Chrome. 422 00:18:35,350 --> 00:18:36,860 Hãy để tôi mở tab Network. 423 00:18:36,860 --> 00:18:38,360 Và nhận thấy nó trống tại thời điểm này. 424 00:18:38,360 --> 00:18:40,700 Hãy để tôi đi trước và gửi lại Maria. 425 00:18:40,700 --> 00:18:42,810 Không có mạng lưới giao thông nào. 426 00:18:42,810 --> 00:18:44,320 Vì vậy, không có HTTP. 427 00:18:44,320 --> 00:18:47,620 >> Vì vậy, thực sự, nếu tôi nhìn vào mã nguồn cho this-- cho tôi đóng cửa sổ này 428 00:18:47,620 --> 00:18:49,480 và hãy vào View Source. 429 00:18:49,480 --> 00:18:50,400 Hấp dẫn. 430 00:18:50,400 --> 00:18:53,520 Dường như có một số thẻ mới, trong đó có kịch bản. 431 00:18:53,520 --> 00:18:57,490 Vì vậy, chúng ta hãy có một cái nhìn bên trong CS50 IDE chính xác những gì tôi đã gửi cho người sử dụng. 432 00:18:57,490 --> 00:19:00,690 >> Vì vậy, ở đây chúng ta hãy is-- tập trung vào các chỉ HTML. 433 00:19:00,690 --> 00:19:03,500 Dưới đây là nửa dưới của dom-0.html. 434 00:19:03,500 --> 00:19:07,830 Và nhận thấy rằng nó có một tiêu đề, một thẻ đầu, một thẻ cơ thể, một thẻ hình thức. 435 00:19:07,830 --> 00:19:11,257 Nhưng những gì nhảy ra ngoài với bạn như khác nhau, đặc biệt là nếu bạn đã không bao giờ 436 00:19:11,257 --> 00:19:12,590 bằng văn bản bất kỳ JavaScript mình. 437 00:19:12,590 --> 00:19:14,920 Hãy để tôi di chuyển một chút đến ngay đây. 438 00:19:14,920 --> 00:19:18,330 Tôi đã có một đầu vào, một đầu vào cho nộp. 439 00:19:18,330 --> 00:19:21,410 Tôi đã có một ID, đó là loại mới. 440 00:19:21,410 --> 00:19:22,790 Nhưng chúng ta đã thấy điều này với CSS. 441 00:19:22,790 --> 00:19:24,480 Những gì người khác chắc chắn là mới? 442 00:19:24,480 --> 00:19:24,980 Yeah? 443 00:19:24,980 --> 00:19:30,580 444 00:19:30,580 --> 00:19:32,140 Tốt đẹp. 445 00:19:32,140 --> 00:19:32,760 >> Được rồi. 446 00:19:32,760 --> 00:19:35,630 Vì vậy mà nó nói onsubmit, chú ý những gì dường như tuân theo. 447 00:19:35,630 --> 00:19:38,740 Đây là một thuộc tính trong HTML danh pháp. 448 00:19:38,740 --> 00:19:40,944 Giá trị của nó là chuỗi này trích dẫn ở đây. 449 00:19:40,944 --> 00:19:42,860 Và điều này có vẻ một chút lạ ở cái nhìn đầu tiên. 450 00:19:42,860 --> 00:19:44,050 Đó không phải là HTML. 451 00:19:44,050 --> 00:19:45,240 Nó không phải CSS. 452 00:19:45,240 --> 00:19:47,580 Đây là, như bạn có thể đoán, JavaScript. 453 00:19:47,580 --> 00:19:51,850 Vì vậy, có vẻ như được xây dựng vào đây Trang web là một chức năng gọi là Greet. 454 00:19:51,850 --> 00:19:54,250 Và tôi suy luận rằng chỉ bởi vì đó là một từ, chào hỏi. 455 00:19:54,250 --> 00:19:55,880 Nó có một dấu ngoặc mở, Dấu ngoặc đơn đóng, dấu chấm phẩy. 456 00:19:55,880 --> 00:19:58,095 Trông giống như một chức năng C, trông giống như một chức năng PHP. 457 00:19:58,095 --> 00:20:00,370 >> Và quả thực, nó sẽ là một hàm JavaScript. 458 00:20:00,370 --> 00:20:01,440 Sau đó tôi trở lại sai. 459 00:20:01,440 --> 00:20:03,440 Chúng tôi sẽ trở lại mà chỉ trong một khoảnh khắc. 460 00:20:03,440 --> 00:20:05,320 Nhưng đâu là chức năng này được xác định? 461 00:20:05,320 --> 00:20:07,950 Vâng cho tôi di chuyển lên để phía trên cùng của tập tin. 462 00:20:07,950 --> 00:20:11,710 Và mặc dù nó là một đường dài, nó tương đối đơn giản. 463 00:20:11,710 --> 00:20:15,000 Hãy để tôi phóng to ra ở đây và tập trung vào bốn dòng. 464 00:20:15,000 --> 00:20:17,137 >> Vì vậy, trong JavaScript, chỉ như PHP, bạn chỉ 465 00:20:17,137 --> 00:20:19,720 nói, theo nghĩa đen, từ "chức năng" tên của các chức năng, 466 00:20:19,720 --> 00:20:22,700 và sau đó ngoặc với bất kỳ arguments-- không có đối số trong trường hợp này. 467 00:20:22,700 --> 00:20:25,290 Và không có kiểu trả về trong JavaScript, giống như PHP. 468 00:20:25,290 --> 00:20:29,470 Vì vậy, nó là một chút lỏng hơn so với C. Mở ngoặc móc, nẹp xoăn gần. 469 00:20:29,470 --> 00:20:33,270 Được xây dựng vào JavaScript là một function-- không phải là một đề nghị function-- 470 00:20:33,270 --> 00:20:35,730 nhưng một chức năng gọi là cảnh báo Mục đích duy nhất mà trong cuộc sống 471 00:20:35,730 --> 00:20:38,620 là để kéo lên đó khá xấu xí nhắc nhở rằng chúng ta đã thấy một chút thời gian trước đây. 472 00:20:38,620 --> 00:20:40,950 >> Bây giờ đây là loại một ngụm. 473 00:20:40,950 --> 00:20:42,560 Những gì đang xảy ra ở đây? 474 00:20:42,560 --> 00:20:45,840 Vì vậy, chúng ta hãy bắt đầu làm nổi bật tất cả mọi thứ ở đây. 475 00:20:45,840 --> 00:20:48,540 Đó là lập luận tương tự để cảnh báo. 476 00:20:48,540 --> 00:20:49,530 Và những gì đang xảy ra? 477 00:20:49,530 --> 00:20:51,200 Điều này chỉ trông giống như một chuỗi. 478 00:20:51,200 --> 00:20:59,180 Và hóa ra, không giống như PHP và không giống như C, nó không quan trọng trong JavaScript 479 00:20:59,180 --> 00:21:01,090 nếu bạn dấu nháy đơn hoặc dấu ngoặc kép. 480 00:21:01,090 --> 00:21:02,060 Họ sẽ là tương đương. 481 00:21:02,060 --> 00:21:03,769 Và thẳng thắn mà nói, nó chỉ phổ biến những ngày này 482 00:21:03,769 --> 00:21:06,726 cho các lập trình JavaScript để luôn luôn sử dụng dấu ngoặc đơn cho một số lý do. 483 00:21:06,726 --> 00:21:07,840 Nó chỉ là điều phải làm. 484 00:21:07,840 --> 00:21:09,710 Nhưng chúng ta có thể sử dụng dấu ngoặc kép, là tốt. 485 00:21:09,710 --> 00:21:11,540 >> Vì vậy, cộng với đó là một nhân vật mới. 486 00:21:11,540 --> 00:21:14,512 Nhưng những người bạn của những người đã done này trước đây, những gì cộng nghĩa là gì? 487 00:21:14,512 --> 00:21:16,440 Yeah. 488 00:21:16,440 --> 00:21:17,120 Tiếp nhau. 489 00:21:17,120 --> 00:21:18,570 Vì vậy, chúng ta thấy điều này trong PHP. 490 00:21:18,570 --> 00:21:20,315 Không chỉ là những dấu chấm nhà điều hành trong PHP 491 00:21:20,315 --> 00:21:22,000 sẽ nối hai chuỗi với nhau. 492 00:21:22,000 --> 00:21:24,000 C là một cơn đau ở cổ để làm điều này. 493 00:21:24,000 --> 00:21:27,310 Nhớ lại từ pset sáu, đó là một cơn đau đặc biệt là ở cổ, 494 00:21:27,310 --> 00:21:29,470 bạn sẽ phải sử dụng một cái gì đó giống như strcat 495 00:21:29,470 --> 00:21:31,660 sau khi phân bổ bộ nhớ trên stack hay heap. 496 00:21:31,660 --> 00:21:34,243 Bạn phải nhảy qua hoops chỉ để nối hai chuỗi. 497 00:21:34,243 --> 00:21:36,040 Trong JavaScript, đó là siêu đơn giản. 498 00:21:36,040 --> 00:21:38,030 Chỉ cần sử dụng các toán tử cộng giữa chúng. 499 00:21:38,030 --> 00:21:41,420 >> Vì vậy, các phức hợp tìm kiếm Điều này có vẻ là 500 00:21:41,420 --> 00:21:43,490 bởi vì vào cuối của chuỗi toàn này, tôi chỉ 501 00:21:43,490 --> 00:21:45,797 tiếp nhau trên một dấu chấm than. 502 00:21:45,797 --> 00:21:48,380 Vì vậy, nếu những gì đã nảy lên được "hello, David", "hello, Hannah," 503 00:21:48,380 --> 00:21:52,740 "hello, Maria", và vân vân, rõ ràng rằng điều trung ở giữa hai 504 00:21:52,740 --> 00:21:55,215 Điểm cộng phải cho tôi tiếp cận với những gì? 505 00:21:55,215 --> 00:21:58,855 506 00:21:58,855 --> 00:22:01,991 Có gì trong đó cho chắc chắn? 507 00:22:01,991 --> 00:22:02,490 Yeah. 508 00:22:02,490 --> 00:22:05,090 Vì vậy, tôi sẽ giả vờ ở đây trả lời tên của họ, phải không? 509 00:22:05,090 --> 00:22:10,380 Vì vậy, tên của họ xuất hiện trong trận chung kết kết quả. Vì vậy, điều này có nghĩa là gì? 510 00:22:10,380 --> 00:22:15,080 Vâng, tôi đã đề xuất trước đó trong đó hình ảnh mà cái gọi là DOM 511 00:22:15,080 --> 00:22:18,580 có phần tử gốc đặc biệt này đường lên đỉnh được gọi là tài liệu. 512 00:22:18,580 --> 00:22:21,660 Và bây giờ, nó quay ra, đó là đi là một biến toàn cầu đặc biệt 513 00:22:21,660 --> 00:22:25,250 trong JavaScript, được xây dựng vào đó là một bó toàn bộ các chức năng hữu ích. 514 00:22:25,250 --> 00:22:31,770 Trong số các tính năng hữu ích là khả năng để có được ở bất kỳ nút hậu duệ. 515 00:22:31,770 --> 00:22:37,760 Những hình vuông hoặc hình chữ nhật hoặc elip chỉ là các nút trong một cây, vậy để nói chuyện. 516 00:22:37,760 --> 00:22:41,850 >> Vì vậy, nó chỉ ra rằng xây dựng vào Đối tượng tài liệu JavaScript của 517 00:22:41,850 --> 00:22:47,300 là một chức năng, nếu không được biết đến như là một phương pháp, đó gọi là getElementById. 518 00:22:47,300 --> 00:22:50,410 Cú pháp để gọi một hàm trong JavaScript 519 00:22:50,410 --> 00:22:55,220 đó là bên trong của một đối tượng hoặc một biến là chỉ với các ký hiệu dấu chấm. 520 00:22:55,220 --> 00:22:57,950 Và chúng ta thấy điều này trong C những gì các cú pháp cấu trúc. 521 00:22:57,950 --> 00:23:03,530 Bạn thấy điều này trong pset bảy, loại, loại, khi bạn nhìn thấy CS50 :: truy vấn. 522 00:23:03,530 --> 00:23:08,070 Đại tràng ruột trong PHP là một cách gọi một chức năng mà 523 00:23:08,070 --> 00:23:09,260 bên trong của một số đối tượng. 524 00:23:09,260 --> 00:23:11,960 >> Nhưng hiện nay trong JavaScript, nó chỉ là một dấu chấm. 525 00:23:11,960 --> 00:23:14,170 Và chức năng này, độc đáo đủ, loại 526 00:23:14,170 --> 00:23:16,810 nói những gì nó does-- có được yếu tố của ID. 527 00:23:16,810 --> 00:23:20,280 Một phần tử là chỉ là một tên cho một tag hoặc nút trong DOM. 528 00:23:20,280 --> 00:23:26,900 Và do đó, có yếu tố của ID "tên" nghĩa this-- đây là HTML của tôi. 529 00:23:26,900 --> 00:23:31,910 Và dựa trên HTML này, những gì nút hoặc những gì tag HTML tôi 530 00:23:31,910 --> 00:23:35,097 đi để lập trình được bàn giao bằng cách gọi document.getElementById? 531 00:23:35,097 --> 00:23:37,650 532 00:23:37,650 --> 00:23:38,500 >> Vâng, chính xác. 533 00:23:38,500 --> 00:23:42,670 Tôi sẽ có được đầu vào phần tử có có ID là "tên." 534 00:23:42,670 --> 00:23:45,140 Vì vậy, đặc biệt, bạn có thể nghĩ của chức năng này, 535 00:23:45,140 --> 00:23:49,560 getElementById, như là một cách cho sao một con trỏ đến nút đó cụ thể 536 00:23:49,560 --> 00:23:50,060 trong cây. 537 00:23:50,060 --> 00:23:51,980 Chúng tôi đã không vẽ này cây, nhưng đó là một cách 538 00:23:51,980 --> 00:23:54,900 nhận được quyền truy cập vào đó hình chữ nhật hoặc hình chữ nhật đó 539 00:23:54,900 --> 00:23:58,090 bằng cách xác định duy nhất nó thông qua ID của nó. 540 00:23:58,090 --> 00:23:59,760 >> Bây giờ, tại sao điều này là hữu ích? 541 00:23:59,760 --> 00:24:01,510 Vâng, nó quay ra rằng khi bạn đã nhận 542 00:24:01,510 --> 00:24:07,220 mà nút, hình chữ nhật từ hình ảnh, mà nút bên trong của nó, 543 00:24:07,220 --> 00:24:10,660 đến lượt nó, có một bó toàn bộ cặp khóa-giá trị properties-- 544 00:24:10,660 --> 00:24:13,480 hoặc dữ liệu, một trong số đó được gọi là giá trị. 545 00:24:13,480 --> 00:24:16,500 Vì vậy, theo nghĩa đen, đó là loại một mouthful để giải thích toàn bộ sự việc. 546 00:24:16,500 --> 00:24:19,370 Nhưng vào cuối ngày, tất cả điều này là cung cấp cho bạn 547 00:24:19,370 --> 00:24:23,070 một chuỗi mà người dùng gõ trong thời trang thứ bậc này. 548 00:24:23,070 --> 00:24:24,820 Nhưng tôi không thích một vài những điều này. 549 00:24:24,820 --> 00:24:27,590 Hay đúng hơn, có một số sự tò mò vẫn. 550 00:24:27,590 --> 00:24:28,870 Tất cả điều đó dường như làm việc. 551 00:24:28,870 --> 00:24:33,420 Tại sao bạn nghĩ rằng tôi trở về sai sau khi gọi chào? 552 00:24:33,420 --> 00:24:35,910 Điều này có vẻ hơi xấu xí, mà Tôi có hai câu có 553 00:24:35,910 --> 00:24:38,730 cách nhau bởi dấu chấm phẩy. 554 00:24:38,730 --> 00:24:39,310 Hãy đoán. 555 00:24:39,310 --> 00:24:44,390 Nếu tôi loại bỏ trở lại sai, những gì có thể xảy ra, chỉ là bản năng? 556 00:24:44,390 --> 00:24:46,990 557 00:24:46,990 --> 00:24:49,460 Xin lỗi, nói một lần nữa? 558 00:24:49,460 --> 00:24:50,530 >> Mở một loạt các Windows. 559 00:24:50,530 --> 00:24:52,780 Vì vậy, khả năng có lẽ cái gì như thế sẽ xảy ra. 560 00:24:52,780 --> 00:24:54,422 Những gì khác? 561 00:24:54,422 --> 00:24:55,630 Có thể gửi yêu cầu ở đâu? 562 00:24:55,630 --> 00:24:59,109 563 00:24:59,109 --> 00:25:00,510 Để cùng một trang. 564 00:25:00,510 --> 00:25:03,110 Vì vậy, trên thực tế, đó là điều đó gần hơn trả lời ở đây, 565 00:25:03,110 --> 00:25:05,890 mặc dù, không giống như trong quá khứ, tôi đã không 566 00:25:05,890 --> 00:25:09,300 quy định các thuộc tính hành động, mà thông thường chúng ta phải làm. 567 00:25:09,300 --> 00:25:11,780 Hóa ra có một mặc định. Nếu bạn không xác định hành động, 568 00:25:11,780 --> 00:25:15,370 nó giống như nói rằng quote, unquote hoặc tên của các tập tin bản thân, 569 00:25:15,370 --> 00:25:17,850 mà trong trường hợp này sẽ được như dom-0.html. 570 00:25:17,850 --> 00:25:20,420 Nó chỉ là loại suy, hay đúng hơn là ngụ ý. 571 00:25:20,420 --> 00:25:22,420 >> Và do đó, nếu tôi không làm được điều này, chúng ta hãy chú ý. 572 00:25:22,420 --> 00:25:23,230 Hãy để tôi tiết kiệm này. 573 00:25:23,230 --> 00:25:25,270 Và tôi đã gỡ bỏ trở lại sai. 574 00:25:25,270 --> 00:25:27,759 Hãy để tôi trở lại này ví dụ và lực tải lại nó. 575 00:25:27,759 --> 00:25:30,800 Và bạn có thể đã thấy tôi đề nghị này trên CS50 Thảo luận về một loạt các lần. 576 00:25:30,800 --> 00:25:34,560 Nếu bất cứ điều gì đã từng diễn xuất sôi nổi và Trình duyệt không hành xử như bạn mong đợi, 577 00:25:34,560 --> 00:25:37,410 đôi khi bạn sẽ muốn giữ Shift và sau đó nhấn Reload. 578 00:25:37,410 --> 00:25:41,480 Điều đó sẽ buộc mọi file để tải lại và không sử dụng bộ nhớ cache của trình duyệt của bạn địa phương 579 00:25:41,480 --> 00:25:47,032 hoặc bản sao như vậy mà bây giờ, hãy để tôi đi trước và mở lên Thanh tra của tôi, các tab Network. 580 00:25:47,032 --> 00:25:48,740 Tôi sẽ nhấp Bảo tồn Log vì tôi 581 00:25:48,740 --> 00:25:51,660 không muốn nó để xóa các hàng một lần tôi bị gạt đi nơi khác. 582 00:25:51,660 --> 00:25:54,650 >> Hãy để tôi đi trước đây và gõ Andi, nhấn Submit. 583 00:25:54,650 --> 00:25:55,150 Được rồi. 584 00:25:55,150 --> 00:25:56,480 Điều đó có vẻ như mong đợi. 585 00:25:56,480 --> 00:25:57,440 Nó nói "hello, Andi." 586 00:25:57,440 --> 00:25:59,420 Hãy để tôi nhấn OK. 587 00:25:59,420 --> 00:26:00,610 Hấp dẫn. 588 00:26:00,610 --> 00:26:05,100 Chú ý rằng trang này đã thay đổi, mặc dù trang ban đầu. 589 00:26:05,100 --> 00:26:06,770 Chú ý các loại URL của thay đổi. 590 00:26:06,770 --> 00:26:09,430 Nó thêm một dấu hỏi, mà thường là chỉ tiêu 591 00:26:09,430 --> 00:26:11,260 mà chúng tôi đã cố gắng để gửi một cái gì đó. 592 00:26:11,260 --> 00:26:13,570 Và sau đó ở phía dưới, thậm chí nhiều hơn một cách rõ ràng, 593 00:26:13,570 --> 00:26:17,570 đây là yêu cầu HTTP thực tế, trong đó có một phản ứng của 200 mà 594 00:26:17,570 --> 00:26:18,490 đưa tôi trở lại đây. 595 00:26:18,490 --> 00:26:20,250 >> Vì vậy, đây không phải là những gì chúng tôi muốn làm, phải không? 596 00:26:20,250 --> 00:26:22,166 Bởi vì tôi không muốn tải lại toàn bộ trang. 597 00:26:22,166 --> 00:26:24,970 Tôi thay vào đó muốn trở lại là sai lầm cho đến ngắn mạch 598 00:26:24,970 --> 00:26:28,840 hành vi mặc định của trình duyệt, là, tất nhiên, để gửi trang. 599 00:26:28,840 --> 00:26:31,700 >> Vì vậy, chúng ta hãy nhìn vào một Ví dụ nhỉnh hơn. 600 00:26:31,700 --> 00:26:33,920 Đây là một phiên bản dom. 601 00:26:33,920 --> 00:26:36,680 Và hãy chú ý những điều sau đây. 602 00:26:36,680 --> 00:26:39,150 Đó là OK nếu bạn không grok tất cả các dòng mã. 603 00:26:39,150 --> 00:26:41,750 Nhưng những gì là cơ bản khác nhau về việc thực hiện điều này? 604 00:26:41,750 --> 00:26:44,690 Tôi sẽ định nó cư xử cùng, làm điều tương tự. 605 00:26:44,690 --> 00:26:49,320 606 00:26:49,320 --> 00:26:51,570 Điều gì đã tôi rõ ràng là làm khác đi? 607 00:26:51,570 --> 00:26:52,266 Yeah? 608 00:26:52,266 --> 00:26:53,182 >> Đung [không nghe được]. 609 00:26:53,182 --> 00:27:03,421 610 00:27:03,421 --> 00:27:04,170 DAVID Malan: Yeah. 611 00:27:04,170 --> 00:27:08,620 Vì vậy, các chức năng được xác định differently-- nói cách khác, vắng mặt từ hình thức, 612 00:27:08,620 --> 00:27:13,180 up có trên dòng 7-- hay đúng hơn, dòng 8-- không còn 613 00:27:13,180 --> 00:27:15,070 Tôi có các thuộc tính onsubmit. 614 00:27:15,070 --> 00:27:16,750 Trong ví dụ trước, tôi đã có điều này. 615 00:27:16,750 --> 00:27:18,530 Và sau đó tôi theo nghĩa đen đã viết code của tôi ở đây. 616 00:27:18,530 --> 00:27:20,210 Và sau đó tôi đã nói trở lại sai. 617 00:27:20,210 --> 00:27:22,180 Và nếu nó không chà xát bạn một cách sai lầm nào, 618 00:27:22,180 --> 00:27:26,140 nó nên bắt đầu trong chừng mực như, giống như trong HTML, 619 00:27:26,140 --> 00:27:29,530 khi chúng tôi bắt đầu để cùng hòa mình nó với CSS trong các thuộc tính phong cách, 620 00:27:29,530 --> 00:27:32,890 nó chỉ mới bắt đầu để có được một chút lộn xộn hoặc cảm thấy một chút sai. 621 00:27:32,890 --> 00:27:35,020 >> Tương tự như vậy ở đây, nếu bạn bắt đầu dùng HTML, 622 00:27:35,020 --> 00:27:37,419 và sau đó bạn tự động tiếng tom số mã JavaScript 623 00:27:37,419 --> 00:27:40,460 ở giữa một chuỗi trích dẫn, đó là không sẽ rất dễ bảo trì. 624 00:27:40,460 --> 00:27:40,630 Bên phải? 625 00:27:40,630 --> 00:27:43,690 Nó thậm chí không rõ ràng lúc đầu đặt nơi mã JavaScript là. 626 00:27:43,690 --> 00:27:46,590 Vì vậy, nó sẽ được thực sự tốt đẹp như một nguyên tắc thiết kế tốt hơn, 627 00:27:46,590 --> 00:27:50,500 chúng ta hãy giữ HTML của chúng tôi hoàn toàn tách biệt với JavaScript của chúng tôi. 628 00:27:50,500 --> 00:27:53,150 >> Vì vậy, để làm được điều đó, những gì chúng tôi đã thực hiện ở đây là following-- 629 00:27:53,150 --> 00:27:56,790 chúng ta chỉ cần sử dụng HTML cho chỉ đánh dấu. 630 00:27:56,790 --> 00:28:00,730 Và như vậy trong phiên bản một trong những điều này, tất cả Tôi có là một hình thức với một ID duy nhất. 631 00:28:00,730 --> 00:28:04,630 Và sau đó xuống đây, tôi đang lợi dụng của một tính năng đặc biệt của JavaScript 632 00:28:04,630 --> 00:28:08,480 nhờ đó mà tôi có thể có những gì được gọi là một chức năng vô danh. 633 00:28:08,480 --> 00:28:14,150 Vì vậy, nó chỉ ra rằng nếu tôi gọi document.getElementById của 'demo' 634 00:28:14,150 --> 00:28:18,890 đó là giống như đem lại cho tôi một con trỏ đến nút này trong cây của tôi, các yếu tố hình thức, 635 00:28:18,890 --> 00:28:20,100 vậy để nói chuyện. 636 00:28:20,100 --> 00:28:22,220 >> Bây giờ, tôi chỉ biết từ biết một chút về HTML 637 00:28:22,220 --> 00:28:26,330 Hiện tại chúng tôi đang có đọc một số trực tuyến tài liệu tham khảo, đó là một yếu tố hình thức hỗ trợ 638 00:28:26,330 --> 00:28:29,950 một bó toàn bộ các sự kiện trong listeners-- Nói cách khác, các danh sách dài dằng dặc các sự kiện 639 00:28:29,950 --> 00:28:31,700 nghe mà chúng ta đã thấy một chút thời gian trước đây. 640 00:28:31,700 --> 00:28:35,950 Tôi biết từ đọc tài liệu onsubmit đó là một sự kiện hợp lệ 641 00:28:35,950 --> 00:28:38,520 listener cho một yếu tố hình thức. 642 00:28:38,520 --> 00:28:41,480 >> Vì vậy, một khi tôi biết rằng, nó an toàn cho tôi làm 643 00:28:41,480 --> 00:28:45,390 các following-- có được nút đó từ cây, các yếu tố hình thức, 644 00:28:45,390 --> 00:28:48,070 và truy cập của nó được gọi là tài sản onsubmit. 645 00:28:48,070 --> 00:28:49,880 Vì vậy, các dấu chấm chỉ có nghĩa là đây là một tài sản, 646 00:28:49,880 --> 00:28:52,180 như một giá trị đặc biệt bên trong của nó. 647 00:28:52,180 --> 00:28:55,590 Và những gì dữ liệu kiểu tôi giao, rõ ràng, 648 00:28:55,590 --> 00:28:58,900 để onsubmit, đó là hiệu quả một biến bên trong 649 00:28:58,900 --> 00:29:01,010 của nút đó trong cây? 650 00:29:01,010 --> 00:29:04,100 Đó là một lĩnh vực bên trong của cấu trúc đó. 651 00:29:04,100 --> 00:29:05,810 Các kiểu dữ liệu là gì? 652 00:29:05,810 --> 00:29:07,030 >> Một chức năng, yeah. 653 00:29:07,030 --> 00:29:08,607 Vì vậy, nó chỉ ra rằng PHP có này. 654 00:29:08,607 --> 00:29:10,440 Và mặc dù chúng tôi không nói với bạn về nó, 655 00:29:10,440 --> 00:29:16,240 C cũng có chức năng con trỏ, khả năng để vượt qua và gán chức năng 656 00:29:16,240 --> 00:29:18,330 như biến các giá trị 'bản thân. 657 00:29:18,330 --> 00:29:20,280 Và chúng tôi sẽ không thoái trở lại C. 658 00:29:20,280 --> 00:29:23,250 Nhưng hiện nay, nó chỉ ra rằng ở phía bên tay phải ở đây, 659 00:29:23,250 --> 00:29:26,260 mặc dù có vẻ một chút funky, phương tiện này, hey trình duyệt, 660 00:29:26,260 --> 00:29:27,550 cho tôi một chức năng. 661 00:29:27,550 --> 00:29:30,560 Tôi sẽ không để thậm chí làm phiền cho nó một cái tên bởi vì tôi là nghĩa đen 662 00:29:30,560 --> 00:29:34,450 sẽ chỉ định chúng ta hãy gọi nó địa chỉ của chức năng này 663 00:29:34,450 --> 00:29:35,994 ngay lập tức để onsubmit. 664 00:29:35,994 --> 00:29:39,160 Nói cách khác, trình duyệt, bạn không cần để biết chức năng này được gọi là. 665 00:29:39,160 --> 00:29:41,890 Bạn chỉ cần biết nó ở đâu trong bộ nhớ. 666 00:29:41,890 --> 00:29:44,210 Và như vậy nó cũng đủ chỉ để có một dấu bằng có 667 00:29:44,210 --> 00:29:48,240 và không phải bận tâm đặt tên này, như foo hoặc chào hoặc bất kỳ từ nào khác. 668 00:29:48,240 --> 00:29:50,150 Và bây giờ điều này chỉ là một điều phong cách. 669 00:29:50,150 --> 00:29:53,100 Tôi có thể di chuyển ngoặc móc này lên the-- sorry-- dòng tiếp theo 670 00:29:53,100 --> 00:29:54,750 như chúng ta thường làm CS50. 671 00:29:54,750 --> 00:29:57,550 Nhưng trong JavaScript, đó là thực sự phong cách phổ biến 672 00:29:57,550 --> 00:30:00,450 chỉ cần giữ cho các ngoặc móc, các Người đầu tiên, trên dòng đầu tiên. 673 00:30:00,450 --> 00:30:02,620 >> Nhưng sau này, có không có gì thú vị. 674 00:30:02,620 --> 00:30:05,830 Đó ngoặc móc mở chỉ demarcates bắt đầu chức năng của tôi. 675 00:30:05,830 --> 00:30:09,320 Các chức năng tại là giống hệt nhau, ngoại trừ tôi đã 676 00:30:09,320 --> 00:30:11,452 bao gồm các giả trở lại bên trong của chức năng này. 677 00:30:11,452 --> 00:30:13,160 Bởi vì nó quay out-- và bạn sẽ chỉ 678 00:30:13,160 --> 00:30:14,980 biết điều này từ đọc các documentation-- 679 00:30:14,980 --> 00:30:19,740 rằng nếu các chức năng mà bạn chỉ định để xử lý onsubmit trả về false, 680 00:30:19,740 --> 00:30:23,420 trình duyệt chỉ biết và đồng ý không gửi mẫu đến một máy chủ. 681 00:30:23,420 --> 00:30:27,210 Nếu nó trở thành sự thật, nó sẽ trình nó đến một máy chủ cho lý do chúng ta sẽ thấy 682 00:30:27,210 --> 00:30:28,700 là hữu ích chỉ trong một khoảnh khắc. 683 00:30:28,700 --> 00:30:31,000 >> Và sau đó các dấu chấm phẩy sau nẹp xoăn có chỉ 684 00:30:31,000 --> 00:30:32,541 có nghĩa là tôi đang thực hiện xong việc xác định chức năng. 685 00:30:32,541 --> 00:30:36,600 Bạn biết những gì để gọi là sớm khi bạn nghe một bài nộp. 686 00:30:36,600 --> 00:30:37,100 Được rồi. 687 00:30:37,100 --> 00:30:40,650 Điều này vẫn còn cho là loại xấu xí. 688 00:30:40,650 --> 00:30:42,190 Vì vậy, những gì chúng ta càng có thể làm gì? 689 00:30:42,190 --> 00:30:45,000 >> Vâng, nó quay ra sau đó trong phiên bản hai, đó là last-- 690 00:30:45,000 --> 00:30:46,780 và chúng ta sẽ chỉ nhìn lướt qua này. 691 00:30:46,780 --> 00:30:49,850 Tại các nguy cơ làm nó xấu xí, nó quay ra 692 00:30:49,850 --> 00:30:52,160 rằng có một thư viện trong thế giới gọi jQuery. 693 00:30:52,160 --> 00:30:54,900 Và jQuery là một siêu thư viện JavaScript phổ biến 694 00:30:54,900 --> 00:30:57,930 đó là rất phổ biến mà hầu hết bất kỳ JavaScript-- nó không 695 00:30:57,930 --> 00:31:00,540 phổ biến cho mọi người nhầm lẫn jQuery với JavaScript. 696 00:31:00,540 --> 00:31:01,070 Tại sao? 697 00:31:01,070 --> 00:31:04,990 Tự JavaScript có rất cách tiết làm things-- 698 00:31:04,990 --> 00:31:07,820 document.getElementById, dadadadadada. 699 00:31:07,820 --> 00:31:10,510 Bạn sẽ chỉ có rất đường dài của mã. 700 00:31:10,510 --> 00:31:15,550 >> Vì vậy, một đồng nghiệp tên là John Resid, những người thực sự làm việc cho một khởi động 701 00:31:15,550 --> 00:31:18,630 lên những ngày này, đi ra với điều này năm thư viện 702 00:31:18,630 --> 00:31:22,070 trước đó nhiều người đã đóng góp để gọi jQuery rằng những thay đổi 703 00:31:22,070 --> 00:31:23,449 cú pháp trong các cách sau đây. 704 00:31:23,449 --> 00:31:25,740 Và chỉ cần như vậy bạn đã nhìn thấy điều này, bởi vì bạn sẽ không thay đổi 705 00:31:25,740 --> 00:31:28,140 thấy điều này nếu làm một dự án cuối cùng dựa trên web, 706 00:31:28,140 --> 00:31:33,270 này sẽ là cách tương đương thực hiện cùng chức năng sử dụng 707 00:31:33,270 --> 00:31:34,630 thư viện đặc biệt này. 708 00:31:34,630 --> 00:31:36,680 >> Bây giờ, thay vì tease nó ngoài trong toàn bộ, 709 00:31:36,680 --> 00:31:38,520 chúng ta hãy xem xét một số mô hình. 710 00:31:38,520 --> 00:31:44,850 Cú pháp này dường như có có bao nhiêu chức năng ẩn danh 711 00:31:44,850 --> 00:31:49,584 hoặc chức năng không tên hoặc chức năng lambda AKA? 712 00:31:49,584 --> 00:31:50,190 Hai, phải không? 713 00:31:50,190 --> 00:31:52,690 Và bạn có biết rằng, ngay cả khi bạn không phải là siêu thoải mái với điều này, 714 00:31:52,690 --> 00:31:55,780 chỉ bởi thực tế rằng nó nói function () hai lần. 715 00:31:55,780 --> 00:31:58,172 >> Và nó chỉ ra rằng những mã này là doing-- 716 00:31:58,172 --> 00:32:01,255 và chúng tôi sẽ tham khảo tài liệu tham khảo trực tuyến, cuối cùng, đối với một số trợ giúp với điều này. 717 00:32:01,255 --> 00:32:04,480 Điều này có nghĩa khi các tài liệu đã sẵn sàng, 718 00:32:04,480 --> 00:32:07,490 đi trước và đăng ký các chức năng sau đây 719 00:32:07,490 --> 00:32:12,064 như là xử lý nộp cho HTML yếu tố có ý tưởng độc đáo là demo. 720 00:32:12,064 --> 00:32:14,480 Và sau đó, khi điều đó xảy ra, gọi hai dòng mã. 721 00:32:14,480 --> 00:32:18,677 Và đây là, một cách bi thảm, một nhiều hơn cách tiết nói trở lại sai. 722 00:32:18,677 --> 00:32:21,510 Và chúng tôi đề cập điều này chỉ vì bạn sẽ thấy mã như thế này trực tuyến. 723 00:32:21,510 --> 00:32:23,140 Và nó không có gì dễ nản lòng. 724 00:32:23,140 --> 00:32:26,057 Nhưng thay vào đó, hãy nhớ rằng những gì sẽ được phổ biến trong JavaScript 725 00:32:26,057 --> 00:32:26,765 là mô hình này. 726 00:32:26,765 --> 00:32:29,510 Và đó là lý do tại sao chúng tôi hiển thị nó cho bây giờ. 727 00:32:29,510 --> 00:32:30,010 Được rồi. 728 00:32:30,010 --> 00:32:32,730 Vì vậy mà không ở quá nhiều vào cú pháp đó, 729 00:32:32,730 --> 00:32:37,800 được có bất kỳ câu hỏi về những ví dụ hay ý tưởng cho đến nay? 730 00:32:37,800 --> 00:32:38,300 Được rồi. 731 00:32:38,300 --> 00:32:40,220 Vì vậy, hãy sử dụng này cho một cái gì đó hữu ích. 732 00:32:40,220 --> 00:32:47,070 Làm một trang web mà chỉ cần nói xin chào, vậy và như vậy không phải là tất cả những gì thú vị, 733 00:32:47,070 --> 00:32:47,830 không để underwhelm. 734 00:32:47,830 --> 00:32:51,038 Điều này sẽ không được xinh đẹp, nhưng nó là sẽ làm một cái gì đó hữu ích. 735 00:32:51,038 --> 00:32:56,350 Hãy để tôi quay trở lại thư mục của tôi ở đây và mở ra, nói, form-0.html. 736 00:32:56,350 --> 00:32:59,320 >> Vì vậy, giả sử đây là sinh viên năm nhất trang đăng ký và thể thao 737 00:32:59,320 --> 00:33:01,780 mà không có bất kỳ CSS hoặc bất kỳ ý nghĩa của thiết kế. 738 00:33:01,780 --> 00:33:05,404 Và tôi muốn đi trước và đăng ký tại đây với một mật khẩu. 739 00:33:05,404 --> 00:33:08,320 Và tôi sẽ phải đồng ý với các điều khoản và các điều kiện và nhấn Register. 740 00:33:08,320 --> 00:33:11,700 Và bây giờ các trang web nói rằng, "Bạn đang đăng ký! (Vâng, không thực sự.) " 741 00:33:11,700 --> 00:33:15,070 Điều đó có vẻ như nó đã làm việc, nhưng hãy để tôi đi trước và buộc tải lại. 742 00:33:15,070 --> 00:33:18,720 >> Và hãy để tôi nói, không, bạn không cần địa chỉ email thực tế của tôi. 743 00:33:18,720 --> 00:33:21,820 Hoặc có lẽ chúng ta sẽ chỉ nói mail trong đó. 744 00:33:21,820 --> 00:33:25,080 Mật khẩu sẽ được, như, 12345. 745 00:33:25,080 --> 00:33:28,810 Và sau đó, chỉ vì tôi là một thằng ngốc, bây giờ nó là 123456789. 746 00:33:28,810 --> 00:33:31,150 Và tôi sẽ không kiểm tra hộp thư của bạn. 747 00:33:31,150 --> 00:33:31,850 >> Hừm. 748 00:33:31,850 --> 00:33:32,350 Được rồi. 749 00:33:32,350 --> 00:33:34,920 Vì vậy, có nhiều cơ hội để cải thiện ở đây. 750 00:33:34,920 --> 00:33:39,070 Và bạn biết không, hoặc sẽ thấy trong pset bảy, bạn có thể viết code-- 751 00:33:39,070 --> 00:33:41,890 và bạn sẽ phải viết mã trong PHP-- để bảo vệ 752 00:33:41,890 --> 00:33:45,780 chống lại những loại người dùng lỗi do người sử dụng rõ ràng 753 00:33:45,780 --> 00:33:46,790 đã không hợp tác. 754 00:33:46,790 --> 00:33:49,680 Và người đó đã không cho bạn tất cả các giá trị mà bạn muốn hoặc thậm chí trong các định dạng 755 00:33:49,680 --> 00:33:50,630 mà bạn muốn họ. 756 00:33:50,630 --> 00:33:53,250 Vì vậy, bạn sẽ thấy trong pset bảy mà chúng tôi chắc chắn có thể có một số 757 00:33:53,250 --> 00:33:55,680 nếu điều kiện mà nói nếu địa chỉ email 758 00:33:55,680 --> 00:33:59,450 không phải là một username@something.edu, chúng ta chỉ việc 759 00:33:59,450 --> 00:34:02,575 nói xin lỗi và xin lỗi cho người sử dụng nhiều, như bạn có thể trong pset bảy. 760 00:34:02,575 --> 00:34:05,700 Hoặc nếu họ đã không kiểm tra hộp, Hóa ra trong PHP, bạn có thể phát hiện ra rằng, 761 00:34:05,700 --> 00:34:06,200 cũng. 762 00:34:06,200 --> 00:34:09,389 Và chắc chắn nếu mật khẩu không phù hợp như trong register.php 763 00:34:09,389 --> 00:34:11,521 cho pset bảy, bạn có thể phát hiện. 764 00:34:11,521 --> 00:34:13,770 Nhưng đó là một nỗi đau trong cổ trong đó bây giờ họ yêu cầu 765 00:34:13,770 --> 00:34:15,510 chúng tôi đi tất cả các cách để các máy chủ. 766 00:34:15,510 --> 00:34:17,053 Người dùng sẽ được thông báo lỗi. 767 00:34:17,053 --> 00:34:19,219 Và ít nhất, trừ khi bạn sử dụng một số kỹ thuật fancier, 768 00:34:19,219 --> 00:34:20,929 bây giờ họ phải bấm vào mũi tên lại. 769 00:34:20,929 --> 00:34:23,300 Nó sẽ không được tốt đẹp, như rất nhiều trang web ngày hôm nay, 770 00:34:23,300 --> 00:34:26,190 nếu bạn đã có ngay lập tức nhiều hơn thông tin phản hồi, ngay lập tức? 771 00:34:26,190 --> 00:34:31,389 >> Nói cách khác, cho tôi đi đến phiên bản một, mà là có được không đẹp. 772 00:34:31,389 --> 00:34:33,469 Nhưng nó không có tính năng này. 773 00:34:33,469 --> 00:34:39,590 Malan, 12345, 123456789, không sẽ kiểm tra các hộp, Đăng ký. 774 00:34:39,590 --> 00:34:41,330 Mật khẩu không phù hợp. 775 00:34:41,330 --> 00:34:44,459 Vì vậy, mặc dù điều này pop-up là ugly-- chúng ta có thể thay thế này cuối cùng 776 00:34:44,459 --> 00:34:47,000 với một cái gì đó giống như Bootstrap, mà bạn sẽ thấy trong pset bảy 777 00:34:47,000 --> 00:34:50,239 là một library-- rất phổ biến tôi đã làm phát hiện rằng mật khẩu không khớp. 778 00:34:50,239 --> 00:34:50,739 Được rồi. 779 00:34:50,739 --> 00:34:52,530 Vâng, hãy để tôi khắc phục điều đó như người sử dụng. 780 00:34:52,530 --> 00:34:55,460 Hãy để tôi đi trước và nói 12345, 12345. 781 00:34:55,460 --> 00:34:57,780 Vẫn không kiểm tra thỏa thuận. 782 00:34:57,780 --> 00:35:00,210 Bạn phải đồng ý với các điều khoản và điều kiện. 783 00:35:00,210 --> 00:35:01,760 Vậy tại sao? 784 00:35:01,760 --> 00:35:04,100 >> Nếu chúng ta đã thừa nhận rằng có một cách, 785 00:35:04,100 --> 00:35:07,260 và chúng tôi đã yêu cầu bạn pset bảy để phát hiện lỗi 786 00:35:07,260 --> 00:35:09,780 điều kiện như thế này server-side, tại sao tôi nên 787 00:35:09,780 --> 00:35:13,940 cũng bận tâm làm điều này trong JavaScript? 788 00:35:13,940 --> 00:35:15,850 Một đối số trong là gì ủng hộ thêm gì 789 00:35:15,850 --> 00:35:18,760 bạn đang về để xem như some-- có phức tạp thêm. 790 00:35:18,760 --> 00:35:23,610 791 00:35:23,610 --> 00:35:25,930 >> Có lẽ không có lộn ngược. 792 00:35:25,930 --> 00:35:26,924 Những gì nó có thể được? 793 00:35:26,924 --> 00:35:27,840 Đung [không nghe được]. 794 00:35:27,840 --> 00:35:31,132 795 00:35:31,132 --> 00:35:32,340 DAVID Malan: Oh, thú vị. 796 00:35:32,340 --> 00:35:33,530 Khai thác tiềm năng. 797 00:35:33,530 --> 00:35:37,540 Vì vậy, chắc chắn, nếu bạn không xử lý sử dụng đầu vào sai lầm rằng tuyệt vời, 798 00:35:37,540 --> 00:35:40,170 có lẽ đó là tất cả tốt hơn nếu nó thậm chí không đạt máy chủ của bạn. 799 00:35:40,170 --> 00:35:42,160 Tôi sẽ đẩy lùi và có nói, bạn nên có lẽ 800 00:35:42,160 --> 00:35:43,284 sửa chữa cả những vấn đề đó. 801 00:35:43,284 --> 00:35:44,140 Nhưng đó là công bằng. 802 00:35:44,140 --> 00:35:44,710 Những gì khác? 803 00:35:44,710 --> 00:35:45,626 >> Đung [không nghe được]. 804 00:35:45,626 --> 00:35:47,970 805 00:35:47,970 --> 00:35:49,014 >> DAVID Malan: Yeah. 806 00:35:49,014 --> 00:35:51,680 Mã này, như chúng ta đã nói, là giải thích trên các client-side. 807 00:35:51,680 --> 00:35:53,846 Nó không làm phiền các máy chủ, có nghĩa là nó không 808 00:35:53,846 --> 00:35:55,930 ảnh hưởng đến tải của máy chủ hoặc năng lực. 809 00:35:55,930 --> 00:35:59,840 Và bây giờ, tôi ít tuổi, này không có tác dụng có ý nghĩa 810 00:35:59,840 --> 00:36:01,970 bởi vì tôi có một người sử dụng ngay bây giờ. 811 00:36:01,970 --> 00:36:04,010 >> Nhưng nếu bạn đang ở bất kỳ website của độ nhất định, 812 00:36:04,010 --> 00:36:07,400 đặc biệt là lớn nhất, như Facebook, càng có nhiều bạn có thể giữ cho mọi người off 813 00:36:07,400 --> 00:36:09,927 các máy chủ của bạn tốt hơn vì một máy chủ, tất nhiên, 814 00:36:09,927 --> 00:36:12,510 chỉ có một số lượng hữu hạn của bộ nhớ RAM, một số hữu hạn các gigahertz, 815 00:36:12,510 --> 00:36:16,340 một số hữu hạn các điều nó có thể làm cho mỗi đơn vị thời gian. 816 00:36:16,340 --> 00:36:19,170 Vì vậy, nếu có nhiều người ở thế giới đánh máy chủ của bạn, 817 00:36:19,170 --> 00:36:21,750 vô tình đăng nhập không chính xác, chỉ là tốt nếu bạn 818 00:36:21,750 --> 00:36:23,254 có thể tiếp tục tải mà tắt máy chủ của bạn. 819 00:36:23,254 --> 00:36:25,420 Plus, đặc biệt là trên một điện thoại di động device-- nếu bạn đã bao giờ 820 00:36:25,420 --> 00:36:29,190 hoặc đăng nhập vào my.harvard Netid Yale hoặc các loại tương tự, 821 00:36:29,190 --> 00:36:32,330 có độ trễ này với rất nhiều các trang web như rằng nhờ đó mà nó mất, 822 00:36:32,330 --> 00:36:34,110 như, a damn thứ hai hoặc hai đôi. 823 00:36:34,110 --> 00:36:37,979 Và sau đó, Thiên Chúa của tôi, nếu bạn gõ nhầm, sau đó bạn phải đánh lại và làm lại nó. 824 00:36:37,979 --> 00:36:40,520 Vì vậy, có độ trễ, đặc biệt trên các kết nối mạng chậm hơn. 825 00:36:40,520 --> 00:36:43,030 Nhưng JavaScript, bởi vì nó chạy trên máy khách 826 00:36:43,030 --> 00:36:46,720 và không cần phải đi qua lại qua internet có khả năng chậm 827 00:36:46,720 --> 00:36:49,780 kết nối, bạn có thể nhận được phản hồi gần như tức thời. 828 00:36:49,780 --> 00:36:50,760 >> Vì vậy, chúng ta hãy nhìn vào điều này. 829 00:36:50,760 --> 00:36:54,280 Hãy để tôi mở ra form-0 và nhìn vào HTML ở đây. 830 00:36:54,280 --> 00:36:56,040 Và chúng ta hãy chỉ nhìn thấy những gì đang xảy ra. 831 00:36:56,040 --> 00:36:59,460 Đây là một hình thức mà hành động là register.php. 832 00:36:59,460 --> 00:37:01,530 Tôi chỉ sử dụng có được như vậy mà tôi có thể nhìn thấy các URL. 833 00:37:01,530 --> 00:37:05,030 Nhưng đối với mật khẩu, chúng tôi muốn chắc chắn muốn để thay đổi điều này để gửi trong thực tế. 834 00:37:05,030 --> 00:37:06,910 Dưới đây là một lĩnh vực đầu vào của loại văn bản. 835 00:37:06,910 --> 00:37:09,050 Dưới đây là đầu vào khác lĩnh vực của loại mật khẩu. 836 00:37:09,050 --> 00:37:13,150 Dưới đây là, nếu bạn chưa bao giờ nhìn thấy, một đầu vào của hộp loại. 837 00:37:13,150 --> 00:37:15,250 >> Nhưng không có JavaScript ở đây cứ lí do gì. 838 00:37:15,250 --> 00:37:18,170 Đây chỉ là HTML mà đi vào register.php. 839 00:37:18,170 --> 00:37:21,020 Nhưng trong phiên bản một, nơi tôi bắt đầu để có được những cửa sổ pop-up, 840 00:37:21,020 --> 00:37:23,010 hãy xem những gì thực sự xảy ra ở đây. 841 00:37:23,010 --> 00:37:26,757 Trong phiên bản một, những gì Tôi sẽ see-- tôi 842 00:37:26,757 --> 00:37:29,340 nghĩ tôi có thể stall đủ với đủ lời, nhưng tôi chạy ra ngoài. 843 00:37:29,340 --> 00:37:35,180 844 00:37:35,180 --> 00:37:38,590 >> Trong phiên bản one-- có chúng tôi đi. 845 00:37:38,590 --> 00:37:43,180 Trong phiên bản một, nhận thấy sự following-- và không phải là thực hiện tốt nhất, 846 00:37:43,180 --> 00:37:44,420 nhưng đó là lần đầu tiên của tôi. 847 00:37:44,420 --> 00:37:47,680 Chú ý rằng bên dưới hình thức, tôi có một thẻ script. 848 00:37:47,680 --> 00:37:49,430 Và một thẻ script có nghĩa là, hey, trình duyệt, đây 849 00:37:49,430 --> 00:37:52,340 đến một số mã trong, thường, JavaScript. 850 00:37:52,340 --> 00:37:54,420 Và bây giờ, chú ý những gì tôi đang làm. 851 00:37:54,420 --> 00:37:59,070 Trên line-- tôi có thể hầu như không đọc it-- dòng 32, nó nói, 852 00:37:59,070 --> 00:38:01,420 var form-- để cho tôi một biến gọi là hình thức. 853 00:38:01,420 --> 00:38:05,049 Và sau đó nhận document.getElementId của "đăng ký". 854 00:38:05,049 --> 00:38:05,590 Cai gi đây? 855 00:38:05,590 --> 00:38:07,290 Vâng, hãy để tôi tua lại lên đây. 856 00:38:07,290 --> 00:38:11,510 Và thông báo, ah, tôi đã cho các yếu tố hình thức một ý tưởng độc đoán nhưng mô tả 857 00:38:11,510 --> 00:38:13,050 đăng ký. 858 00:38:13,050 --> 00:38:16,820 Vì vậy, điều này mang lại cho tôi một biến cho phép tôi để lấy nút đó, 859 00:38:16,820 --> 00:38:19,580 rằng hình chữ nhật trong cây gọi là hình thức. 860 00:38:19,580 --> 00:38:24,460 phương tiện form.onsubmit, hey trình duyệt, đăng ký một sự kiện nghe 861 00:38:24,460 --> 00:38:25,470 vào mẫu này. 862 00:38:25,470 --> 00:38:28,890 Nói cách khác, khi hình thức này là trình, thực thi các mã sau đây. 863 00:38:28,890 --> 00:38:30,810 Nó không cần một tên vì tại sao bạn cần phải biết tên? 864 00:38:30,810 --> 00:38:32,880 Bạn chỉ cần biết những gì để thực hiện, ergo 865 00:38:32,880 --> 00:38:35,610 nó là một chức năng vô danh hoặc lambda. 866 00:38:35,610 --> 00:38:37,632 Và chức năng đó là tất cả các dòng ở đây. 867 00:38:37,632 --> 00:38:40,840 Và bây giờ, phải trung thực, ngay cả khi bạn có thể không có bao giờ viết JavaScript 868 00:38:40,840 --> 00:38:44,200 trước khi, nó chỉ là C và PHP logic. 869 00:38:44,200 --> 00:38:51,720 Vì vậy, nếu form.email.value == "" - vì vậy nếu trường email là trống, 870 00:38:51,720 --> 00:38:54,980 la lên với người dùng với "Bạn phải cung cấp địa chỉ email của bạn. " 871 00:38:54,980 --> 00:38:58,980 Khác nếu form.password.value là tiếng thét trống ở người sử dụng, 872 00:38:58,980 --> 00:39:00,400 "Bạn phải cung cấp mật khẩu của bạn." 873 00:39:00,400 --> 00:39:04,240 >> Thêm thú vị một cách hợp lý, nếu form.password.value không 874 00:39:04,240 --> 00:39:08,630 form.confirmation.value-- bằng nơi đã xác nhận đến từ đâu? 875 00:39:08,630 --> 00:39:09,470 Hãy để tôi tua lại. 876 00:39:09,470 --> 00:39:12,870 Vâng, tôi gọi là đầu vào này trường ở đây mật khẩu. 877 00:39:12,870 --> 00:39:15,180 Và tôi gọi này ở đây xác nhận. 878 00:39:15,180 --> 00:39:17,850 Tôi có thể gọi nó mật khẩu hai hoặc bất cứ điều gì khác. 879 00:39:17,850 --> 00:39:20,560 Tôi chỉ kiểm tra một cách hợp lý rằng hai đều giống nhau. 880 00:39:20,560 --> 00:39:25,760 Else-- hóa ra đây là ông Boole again-- một giá trị Boolean, các hộp kiểm tra. 881 00:39:25,760 --> 00:39:29,810 Vì vậy, nếu tôi nói, cảm thán point-- nếu không form.agreement.checked, 882 00:39:29,810 --> 00:39:31,820 la lên với người sử dụng là tốt. 883 00:39:31,820 --> 00:39:34,470 >> Vì vậy, cú pháp này, bạn sẽ thấy là rất phổ biến trong JavaScript, 884 00:39:34,470 --> 00:39:35,970 nơi bạn có ký hiệu dấu chấm này. 885 00:39:35,970 --> 00:39:37,460 Bạn bắt đầu với một đối tượng ở đây. 886 00:39:37,460 --> 00:39:41,430 Bạn lặn vào sâu hơn để một để một tài sản như mật khẩu. 887 00:39:41,430 --> 00:39:43,280 Và sau đó bạn sẽ có được giá trị thực tế của nó. 888 00:39:43,280 --> 00:39:45,830 Và một lần nữa, đây là đầu vào. 889 00:39:45,830 --> 00:39:47,310 Dưới đây là mật khẩu tên. 890 00:39:47,310 --> 00:39:50,860 Và giá trị của nó là bất cứ điều gì con người đã thực sự gõ vào. 891 00:39:50,860 --> 00:39:53,610 >> Vì vậy, trong tất cả các trường hợp, tôi trở về false. 892 00:39:53,610 --> 00:39:55,800 Nhưng nếu không, tôi trở thành sự thật. 893 00:39:55,800 --> 00:39:58,030 Và vì vậy bây giờ chúng ta thấy một sử dụng hấp dẫn khi 894 00:39:58,030 --> 00:40:00,620 bạn sẽ trả về false để dừng lại những gì người sử dụng của làm 895 00:40:00,620 --> 00:40:03,200 và làm cho anh ta hoặc cô chọn lại hoặc gõ một lần nữa. 896 00:40:03,200 --> 00:40:05,870 Nếu không, chúng tôi trở lại đúng. 897 00:40:05,870 --> 00:40:08,585 >> Và hãy để tôi giới thiệu một biến thể khác của điều này chỉ 898 00:40:08,585 --> 00:40:13,140 để gieo một số hiểu biết của chúng. 899 00:40:13,140 --> 00:40:16,850 Vâng, trong phiên bản 2 này, hình thức-2-- Tôi sẽ làm điều đó với một làn sóng của một bàn tay. 900 00:40:16,850 --> 00:40:19,920 Điều này là, đối với những người tò mò, phiên bản jQuery, 901 00:40:19,920 --> 00:40:23,330 những người bạn của những người có thể muốn vọc trong thư viện riêng. 902 00:40:23,330 --> 00:40:25,145 Nhưng chúng ta hãy start-- và bất kỳ câu hỏi? 903 00:40:25,145 --> 00:40:29,230 Hãy để tôi tạm dừng trong thời điểm bởi vì đó là nhanh và rất nhiều. 904 00:40:29,230 --> 00:40:32,610 >> Nhưng điều tốt đẹp ở đây là tất cả của mã này là khá nhiều giống. 905 00:40:32,610 --> 00:40:33,985 Các công cụ mới là dom là gì? 906 00:40:33,985 --> 00:40:35,115 Những hình chữ nhật là gì? 907 00:40:35,115 --> 00:40:35,990 Các nút này là gì? 908 00:40:35,990 --> 00:40:37,540 Một chức năng ẩn danh là gì? 909 00:40:37,540 --> 00:40:38,830 Xử lý sự kiện là gì? 910 00:40:38,830 --> 00:40:43,480 Nhưng may mắn thay, hầu hết đó chỉ là vòng tròn đầy đủ từ, nói, tuần không. 911 00:40:43,480 --> 00:40:43,980 Được rồi. 912 00:40:43,980 --> 00:40:46,070 Vì vậy, một cái gì đó thú vị hơn một chút? 913 00:40:46,070 --> 00:40:49,340 Vâng, trước hết, hãy để tôi đi trước và mở Google Maps. 914 00:40:49,340 --> 00:40:53,360 Và bạn sẽ nhận thấy rằng đối với một thời điểm, trên phân chia thứ hai, 915 00:40:53,360 --> 00:40:55,930 thông báo những gì sẽ xảy ra khi Tôi bấm đủ nhanh. 916 00:40:55,930 --> 00:40:59,720 Và kết nối này tại Harvard là như vậy nhanh mà bạn không thực sự chú ý đến nó. 917 00:40:59,720 --> 00:41:04,469 Nhưng điều gì làm bạn loại loại xem nếu tôi nhấp và kéo thực sự nhanh chóng? 918 00:41:04,469 --> 00:41:07,010 Những người bạn xem trực tuyến, nếu bạn làm chậm tốc độ này đến 0.5x, 919 00:41:07,010 --> 00:41:09,640 bạn có thể thấy điều này tốt hơn. 920 00:41:09,640 --> 00:41:13,550 >> Điều gì đã xảy ra chỉ trước khi tôi bấm và di chuyển? 921 00:41:13,550 --> 00:41:15,900 Hãy để tôi thử here-- hãy để tôi làm cái gì khác, như 90.210. 922 00:41:15,900 --> 00:41:17,550 Hãy đi thật xa. 923 00:41:17,550 --> 00:41:19,000 Đó là thực sự nhanh, quá. 924 00:41:19,000 --> 00:41:22,460 Làm thế nào về Disney World? 925 00:41:22,460 --> 00:41:23,190 Hiện chúng tôi đi. 926 00:41:23,190 --> 00:41:23,690 ĐƯỢC. 927 00:41:23,690 --> 00:41:26,030 Bạn đã thấy gì trong một vài giây? 928 00:41:26,030 --> 00:41:27,200 Chỉ là, như, hình vuông, phải không? 929 00:41:27,200 --> 00:41:28,930 Giữ chỗ cho gạch? 930 00:41:28,930 --> 00:41:30,270 >> Vâng, những gì đang xảy ra ở đây? 931 00:41:30,270 --> 00:41:35,410 Google Maps là một ví dụ tốt đẹp của công nghệ này mà được gọi là AJAX. 932 00:41:35,410 --> 00:41:38,510 Và đây là nơi mà chúng ta sẽ bắt đầu sử dụng JavaScript trong một đặc biệt 933 00:41:38,510 --> 00:41:39,277 cách quyến rũ. 934 00:41:39,277 --> 00:41:41,610 Trở lại trong ngày, đã có Trang web này được gọi là MapQuest. 935 00:41:41,610 --> 00:41:44,120 Và tôi nên đã lấy một ảnh chụp màn hình của việc này từ những năm 1990, 936 00:41:44,120 --> 00:41:45,820 mà nếu bạn muốn nhìn lên đây trên bản đồ, 937 00:41:45,820 --> 00:41:48,590 bạn có nghĩa là sẽ nhấp một mũi tên lên ở đầu cho thấy bạn 938 00:41:48,590 --> 00:41:49,870 một hình vuông khác nhau của bản đồ. 939 00:41:49,870 --> 00:41:51,790 Nếu bạn muốn di chuyển trái, bạn nhấp một mũi tên cho thấy bạn 940 00:41:51,790 --> 00:41:53,210 một hình vuông khác nhau của bản đồ. 941 00:41:53,210 --> 00:41:54,840 Và một số trang web vẫn làm điều này hôm nay. 942 00:41:54,840 --> 00:41:57,820 Nhưng ngay cả MapQuest đã nhận tốt hơn, như Google Maps. 943 00:41:57,820 --> 00:42:01,880 >> Thay vào đó, những gì tốt hơn những ngày này là các trang web có sử dụng AJAX. 944 00:42:01,880 --> 00:42:04,510 AJAX-- hay còn gọi là Asynchronous JavaScript và XML, 945 00:42:04,510 --> 00:42:08,370 mà chỉ là một cách nói một công nghệ hay kỹ thuật mà 946 00:42:08,370 --> 00:42:14,200 cho phép trình duyệt sử dụng JavaScript để thực hiện các yêu cầu HTTP bổ sung 947 00:42:14,200 --> 00:42:16,390 sau khi trang đã được tải. 948 00:42:16,390 --> 00:42:17,479 Vì vậy, điều này có nghĩa là gì? 949 00:42:17,479 --> 00:42:19,270 Vâng, nó sẽ là loại gây phiền nhiễu trong Gmail 950 00:42:19,270 --> 00:42:21,103 nếu mỗi khi bạn muốn để kiểm tra thư của bạn, 951 00:42:21,103 --> 00:42:24,940 bạn đã theo nghĩa đen nhấn Control-R hay Command-R hoặc bấm vào nút Reload 952 00:42:24,940 --> 00:42:26,580 và toàn bộ trang darn sẽ tải lại. 953 00:42:26,580 --> 00:42:26,800 Bên phải? 954 00:42:26,800 --> 00:42:28,460 Nó sẽ nhấp nháy màu trắng có thể cho thứ hai. 955 00:42:28,460 --> 00:42:30,043 Bạn sẽ nhìn thấy thanh tiến trình ngu ngốc. 956 00:42:30,043 --> 00:42:33,170 Và chỉ để xem nếu bạn có mới mail, toàn bộ trang web và URL 957 00:42:33,170 --> 00:42:34,580 bạn đang ở sẽ phải tải lại. 958 00:42:34,580 --> 00:42:35,960 >> Nhưng đó không phải là những gì xảy ra trong Gmail. 959 00:42:35,960 --> 00:42:36,459 Bên phải? 960 00:42:36,459 --> 00:42:40,300 Khi bạn nhận được một email mới trong Gmail, những gì xảy ra trên màn hình? 961 00:42:40,300 --> 00:42:41,480 Nó chỉ hiện lên, phải không? 962 00:42:41,480 --> 00:42:44,280 Nó chỉ xuất hiện kỳ ​​diệu như là một hàng mới trong bảng. 963 00:42:44,280 --> 00:42:47,030 Điều đó thực sự liên quan đến một số tiền khá phức tạp. 964 00:42:47,030 --> 00:42:51,892 Trong thực tế, nếu bạn nghĩ về cây này, mà mặc dù là một trong những đơn giản ở đây, 965 00:42:51,892 --> 00:42:54,100 Gmail-- và tôi sẽ phải xem xét tại các mã được sure-- 966 00:42:54,100 --> 00:42:58,710 có thể có một bảng HTML hoặc có thể một danh sách có thứ tự mà nó ám 967 00:42:58,710 --> 00:43:01,060 mỗi hộp thư email của bạn như. 968 00:43:01,060 --> 00:43:04,050 >> Và vì vậy nếu bạn tưởng tượng này có là một cây trong bộ nhớ khi bạn đang 969 00:43:04,050 --> 00:43:09,050 sử dụng Gmail trông loại loại như thế này, khi Google nhận ra, ooh, 970 00:43:09,050 --> 00:43:12,770 bạn có một email mới, nó không muốn xây dựng lại toàn bộ cây. 971 00:43:12,770 --> 00:43:16,430 Thay vào đó, nó muốn tìm các nút trong cây đại diện cho hộp thư đến của bạn 972 00:43:16,430 --> 00:43:18,580 và chỉ cần chèn một nút mới. 973 00:43:18,580 --> 00:43:24,640 >> Vì vậy, rất giống với pset năm, nơi bạn đã có để chèn nút vào một bảng băm, 974 00:43:24,640 --> 00:43:28,410 tương tự như vậy không Google, thông qua Mã JavaScript mà nó đã được viết, 975 00:43:28,410 --> 00:43:31,890 đi qua cây này, tìm ra nơi là một phần hộp thư đến của cửa sổ, 976 00:43:31,890 --> 00:43:33,440 và sau đó chèn một hàng mới. 977 00:43:33,440 --> 00:43:37,460 Và một hàng mới chỉ có nghĩa là một hoặc nhiều hơn các nút mới trong một cây. 978 00:43:37,460 --> 00:43:41,340 >> Và do đó, AJAX là kỹ thuật này cho phép chính xác điều đó. 979 00:43:41,340 --> 00:43:44,440 Một khi bạn đã truy cập một URL, Tuy nhiên điên dài nó là, 980 00:43:44,440 --> 00:43:46,472 và một khi các trang có được nạp, bạn vẫn có thể 981 00:43:46,472 --> 00:43:48,430 lấy dữ liệu hơn từ internet-- cho dù đó là 982 00:43:48,430 --> 00:43:52,460 một email hoặc một gạch của một map-- lấy nó đằng sau hậu trường 983 00:43:52,460 --> 00:43:55,290 và sau đó chèn nó vào trang do đó con người không thực sự 984 00:43:55,290 --> 00:43:56,910 phải đợi cho nó. 985 00:43:56,910 --> 00:43:58,980 >> Facebook Messenger hoạt động theo cùng một cách. 986 00:43:58,980 --> 00:44:01,562 Bất kỳ số websites-- khác oh, trên thực tế, ngay cả điều này. 987 00:44:01,562 --> 00:44:04,270 Ý tôi là, đây là, thẳng thắn, loại một tính năng khó chịu trong những ngày này. 988 00:44:04,270 --> 00:44:07,500 Nếu tôi bắt đầu tìm kiếm cats-- này là loại dùng một trải nghiệm khủng khiếp. 989 00:44:07,500 --> 00:44:08,990 Nó chỉ bắt đầu tìm kiếm cho tôi. 990 00:44:08,990 --> 00:44:10,050 Vâng những gì là nó đang làm gì? 991 00:44:10,050 --> 00:44:12,920 Các URL đã không thực sự thay đổi kể từ khi tôi bắt đầu gõ. 992 00:44:12,920 --> 00:44:17,330 Nhưng những gì đang diễn ra trên khắp các wire-- OK, hmm thú vị. 993 00:44:17,330 --> 00:44:20,470 Điều gì đang xảy ra trên dây ở đây chỉ được kì quặc. 994 00:44:20,470 --> 00:44:21,090 >> ĐƯỢC. 995 00:44:21,090 --> 00:44:24,670 Vì vậy, hãy để tôi đi trước và kiểm tra yếu tố và đi đến tab Network 996 00:44:24,670 --> 00:44:27,040 và cố gắng để thực hiện điều này kỹ thuật và ít về mèo. 997 00:44:27,040 --> 00:44:32,595 Khi tôi gõ, theo nghĩa đen, mèo và- gì đang xảy ra 998 00:44:32,595 --> 00:44:37,710 per-- Tôi sẽ không để bấm vào đó. 999 00:44:37,710 --> 00:44:38,210 Được rồi. 1000 00:44:38,210 --> 00:44:44,280 Vì vậy, ở đây, những gì đang xảy ra mỗi Hiện tôi gõ một ký tự, rõ ràng? 1001 00:44:44,280 --> 00:44:45,000 Giống như, mức thấp? 1002 00:44:45,000 --> 00:44:47,860 Điều gì đang xảy ra với mỗi người nhân vật tôi đang gõ vào bàn phím của tôi? 1003 00:44:47,860 --> 00:44:48,359 Yeah? 1004 00:44:48,359 --> 00:44:50,950 Đung [không nghe được]. 1005 00:44:50,950 --> 00:44:52,340 >> DAVID Malan: Chính xác. 1006 00:44:52,340 --> 00:44:55,600 Mỗi nhân vật là những người cách vào Google, một tại một thời điểm. 1007 00:44:55,600 --> 00:44:58,490 Họ đang xây dựng một chuỗi trên máy chủ của họ đại diện 1008 00:44:58,490 --> 00:44:59,936 tất cả mọi thứ tôi đã nhập vào cho đến nay. 1009 00:44:59,936 --> 00:45:01,810 Và mỗi lần tôi gõ một nhân vật khác, họ 1010 00:45:01,810 --> 00:45:04,530 sử dụng nước sốt bí mật của họ về một tìm kiếm thuật toán và tìm ra, 1011 00:45:04,530 --> 00:45:07,370 không có nghĩa là anh trang con mèo này hoặc trang này mèo hay như thế nào? 1012 00:45:07,370 --> 00:45:10,620 Vì vậy, trong một nghĩa nào đó, nó cung cấp cho tôi với một kinh nghiệm tốt hơn trong đó tôi thậm chí không 1013 00:45:10,620 --> 00:45:11,860 cần phải hoàn thành suy nghĩ của tôi. 1014 00:45:11,860 --> 00:45:14,440 Và quả thực, đó là một hữu ích điều, autocomplete nói chung. 1015 00:45:14,440 --> 00:45:17,690 Nếu thuật toán của họ là đủ tốt và nếu tìm kiếm của tôi là đủ rõ ràng, 1016 00:45:17,690 --> 00:45:19,300 Tôi không cần phải gõ toàn bộ từ. 1017 00:45:19,300 --> 00:45:22,110 Họ sẽ cho tôi biết những gì nó là tôi đang thực sự tìm kiếm. 1018 00:45:22,110 --> 00:45:25,940 Vì vậy, những gì Google gọi ngay lập tức tìm kiếm chỉ được sử dụng AJAX, 1019 00:45:25,940 --> 00:45:30,820 bằng cách sử dụng mã số đó cho phép họ yêu cầu bổ sung nội dung thông qua một trình duyệt web 1020 00:45:30,820 --> 00:45:34,026 đằng sau hậu trường bằng cách sử dụng này ngôn ngữ mới, JavaScript. 1021 00:45:34,026 --> 00:45:35,400 Vì vậy, chúng tôi có một vài phút còn lại. 1022 00:45:35,400 --> 00:45:37,710 Và hãy để tôi gọi lên bạn thân của tôi Colton lên sân khấu, 1023 00:45:37,710 --> 00:45:40,090 vì nó dường như đặc biệt thú vị lần cuối cùng 1024 00:45:40,090 --> 00:45:42,290 để giới thiệu một công nghệ rằng một số bạn 1025 00:45:42,290 --> 00:45:44,769 đã bày tỏ quan tâm trong các dự án chính thức. 1026 00:45:44,769 --> 00:45:47,310 Chúng tôi nghĩ rằng nó muốn được vui vẻ để mang lại lên một tình nguyện viên, tuy nhiên, ngày hôm nay 1027 00:45:47,310 --> 00:45:50,074 để cho bạn thấy một bổ sung cho này cho phép you-- yeah, 1028 00:45:50,074 --> 00:45:50,990 Tôi thấy bàn tay này đầu tiên. 1029 00:45:50,990 --> 00:45:52,900 Nào lên. 1030 00:45:52,900 --> 00:45:53,560 Thực hiện rất tốt. 1031 00:45:53,560 --> 00:45:55,035 Làm tốt lắm. 1032 00:45:55,035 --> 00:45:57,410 Tôi sẽ đến dự án này trên màn hình chỉ trong một khoảnh khắc. 1033 00:45:57,410 --> 00:45:58,150 Tên của bạn cho tất cả mọi người là gì? 1034 00:45:58,150 --> 00:45:59,180 >> EFA: Tôi Efa. 1035 00:45:59,180 --> 00:45:59,410 >> DAVID Malan: Etha? 1036 00:45:59,410 --> 00:45:59,785 >> EFA: Efa. 1037 00:45:59,785 --> 00:46:00,160 >> DAVID Malan: Efa? 1038 00:46:00,160 --> 00:46:00,730 >> EFA: Yeah. 1039 00:46:00,730 --> 00:46:01,250 >> DAVID Malan: Nice để xem bạn. 1040 00:46:01,250 --> 00:46:01,600 Được rồi. 1041 00:46:01,600 --> 00:46:02,590 Hãy để tôi có được sẵn sàng này. 1042 00:46:02,590 --> 00:46:04,423 Come on sang các giữa với Colton ở đây. 1043 00:46:04,423 --> 00:46:07,050 Colton gì có trong tay hôm nay là một điều khiển từ xa. 1044 00:46:07,050 --> 00:46:10,440 Vì vậy, thay vì chỉ đứng đó trong một ba chiều thế giới nhìn xung quanh 1045 00:46:10,440 --> 00:46:14,080 như Colton đã làm, bây giờ Efa thể thực sự đi bộ xung quanh bằng cách đi lên, 1046 00:46:14,080 --> 00:46:16,689 xuống, trái, và bên phải giống như một Nintendo hay Xbox controller. 1047 00:46:16,689 --> 00:46:18,230 EFA: Tôi sẽ để rơi ra khỏi sân khấu. 1048 00:46:18,230 --> 00:46:20,500 DAVID Malan: Tôi sẽ đứng khoảng hơn ở đây. 1049 00:46:20,500 --> 00:46:21,991 Nhưng đó là một nguy cơ. 1050 00:46:21,991 --> 00:46:22,490 ĐƯỢC. 1051 00:46:22,490 --> 00:46:25,690 Vì vậy, đi trước và đưa những người trên. 1052 00:46:25,690 --> 00:46:29,315 Hãy để tôi đi trước và chuyển sang màn hình ở đây. 1053 00:46:29,315 --> 00:46:30,670 Hãy để tôi tắt đèn. 1054 00:46:30,670 --> 00:46:32,780 Và Colton, cho tôi đến đứng bên cạnh bạn. 1055 00:46:32,780 --> 00:46:35,520 >> Bạn có muốn giải thích ở đây với mic những gì chúng tôi đang làm? 1056 00:46:35,520 --> 00:46:36,380 Ở đây bạn đi. 1057 00:46:36,380 --> 00:46:37,280 >> COLTON: Chắc chắn rồi. 1058 00:46:37,280 --> 00:46:39,980 Vì vậy, ngay bây giờ chúng tôi tải lên các Oculus, 1059 00:46:39,980 --> 00:46:43,070 Tôi đoán operating-- không hoạt động hệ thống, nhưng các chương trình chính, nơi 1060 00:46:43,070 --> 00:46:46,630 bạn có thể truy cập tất cả các trò chơi và các ứng dụng đang có trong thư viện của bạn. 1061 00:46:46,630 --> 00:46:50,060 Vì vậy, ngay bây giờ, cần nói tap touchpad để bắt đầu. 1062 00:46:50,060 --> 00:46:53,430 Touchpad sẽ là trên phía bên phải của tai nghe. 1063 00:46:53,430 --> 00:46:54,569 Vì vậy, đi trước và tap-- 1064 00:46:54,569 --> 00:46:55,110 EFA: Oh, người đàn ông. 1065 00:46:55,110 --> 00:46:56,443 DAVID Malan: Yeah, có bạn đi. 1066 00:46:56,443 --> 00:47:00,340 1067 00:47:00,340 --> 00:47:02,460 Chất lượng Efa được nhìn thấy là chất lượng cao hơn nhiều. 1068 00:47:02,460 --> 00:47:03,831 Đây chỉ là Wi-Fi ở đây. 1069 00:47:03,831 --> 00:47:05,580 COLTON: Vì vậy, những gì bạn đang sẽ muốn làm 1070 00:47:05,580 --> 00:47:08,350 đang nhìn về phía đỉnh bên phải của màn hình. 1071 00:47:08,350 --> 00:47:10,420 Yep, rằng trò chơi trên rất trên bên phải. 1072 00:47:10,420 --> 00:47:14,780 Và sau đó khi bạn đang chọn nó, hãy chạm vào touchpad nữa. 1073 00:47:14,780 --> 00:47:17,010 Tôi nghĩ Dreadhalls của nó. 1074 00:47:17,010 --> 00:47:20,820 Và sau đó ở đây là a-- đây, để tôi giữ kính của bạn cho bạn. 1075 00:47:20,820 --> 00:47:24,420 1076 00:47:24,420 --> 00:47:25,790 >> Vì vậy, tôi chỉ cho ông một bộ điều khiển. 1077 00:47:25,790 --> 00:47:28,886 Vì vậy, bây giờ anh có thể kiểm soát các trò chơi. 1078 00:47:28,886 --> 00:47:30,510 Ông có thể di chuyển xung quanh và các công cụ như thế. 1079 00:47:30,510 --> 00:47:31,968 Vì vậy, đi trước và tìm đến đỉnh. 1080 00:47:31,968 --> 00:47:33,640 Bạn sẽ thấy New Game. 1081 00:47:33,640 --> 00:47:36,310 Vì vậy, đi trước và bạn có thể làm điều đó. 1082 00:47:36,310 --> 00:47:39,320 Bây giờ, bạn sẽ có thể kiểm soát mình với bộ điều khiển, 1083 00:47:39,320 --> 00:47:43,860 là tốt, ngay sau khi các trò chơi tải lên ở đây. 1084 00:47:43,860 --> 00:47:46,356 Đây có thể là một chút đáng sợ. 1085 00:47:46,356 --> 00:47:47,300 >> EFA: Bây giờ bạn cho tôi biết. 1086 00:47:47,300 --> 00:47:50,132 ĐƯỢC. 1087 00:47:50,132 --> 00:47:51,080 >> COLTON: Tất cả các quyền. 1088 00:47:51,080 --> 00:47:52,650 Vì vậy, xác nhận rằng bạn có thể di chuyển xung quanh. 1089 00:47:52,650 --> 00:47:52,750 ĐƯỢC. 1090 00:47:52,750 --> 00:47:53,583 Bạn có thể di chuyển xung quanh. 1091 00:47:53,583 --> 00:47:54,300 Hoàn hảo. 1092 00:47:54,300 --> 00:47:56,470 Vì vậy, nếu bạn nhìn xuống, bạn có một bản đồ. 1093 00:47:56,470 --> 00:47:58,170 Bản đồ cho thấy bạn đang ở đâu. 1094 00:47:58,170 --> 00:47:59,720 Bạn có thể nhìn xung quanh căn phòng. 1095 00:47:59,720 --> 00:48:01,440 Bạn hoàn toàn có thể quay lại. 1096 00:48:01,440 --> 00:48:02,128 Vâng, chính xác. 1097 00:48:02,128 --> 00:48:02,627 Quay lại. 1098 00:48:02,627 --> 00:48:05,370 1099 00:48:05,370 --> 00:48:07,125 >> Vì vậy, nhìn sang bên trái của bạn. 1100 00:48:07,125 --> 00:48:09,875 Tôi nghĩ rằng có một cái gì đó bạn có thể chọn lên trên một thùng trong phòng. 1101 00:48:09,875 --> 00:48:11,709 >> EFA: Làm thế nào để tôi có được vạch ra đường? 1102 00:48:11,709 --> 00:48:12,375 COLTON: Nhìn lên. 1103 00:48:12,375 --> 00:48:12,980 Chỉ cần nhìn lên. 1104 00:48:12,980 --> 00:48:13,480 Được rồi. 1105 00:48:13,480 --> 00:48:13,765 Của bạn đó. 1106 00:48:13,765 --> 00:48:15,181 Bây giờ đi trước và chỉ quay lại. 1107 00:48:15,181 --> 00:48:21,460 1108 00:48:21,460 --> 00:48:24,620 Vì vậy, nhìn xa hơn để trái. 1109 00:48:24,620 --> 00:48:25,530 Hãy di chuyển trái. 1110 00:48:25,530 --> 00:48:26,960 Hãy tìm kiếm lại. 1111 00:48:26,960 --> 00:48:27,541 Tiếp tục đi. 1112 00:48:27,541 --> 00:48:28,040 Yeah. 1113 00:48:28,040 --> 00:48:28,720 >> EFA: Oh, theo cách đó. 1114 00:48:28,720 --> 00:48:29,261 >> COLTON: Yeah. 1115 00:48:29,261 --> 00:48:30,999 Đi bộ về phía nó với bộ điều khiển. 1116 00:48:30,999 --> 00:48:31,540 Của bạn đó. 1117 00:48:31,540 --> 00:48:32,790 Bây giờ nó nên nói nhặt nó lên. 1118 00:48:32,790 --> 00:48:33,360 Của bạn đó. 1119 00:48:33,360 --> 00:48:34,290 Nhặt nó lên. 1120 00:48:34,290 --> 00:48:35,550 Được rồi. 1121 00:48:35,550 --> 00:48:38,286 Bây giờ, chúng ta hãy ra khỏi căn phòng này. 1122 00:48:38,286 --> 00:48:42,209 Đi trước và đi bộ đến cánh cửa đó. 1123 00:48:42,209 --> 00:48:45,000 Vì vậy, bạn sẽ hold-- nó nói giữ nút để buộc nó mở. 1124 00:48:45,000 --> 00:48:46,333 Vì vậy, đi trước và giữ nút. 1125 00:48:46,333 --> 00:48:48,250 Yep, buộc nó mở. 1126 00:48:48,250 --> 00:48:48,750 Được rồi. 1127 00:48:48,750 --> 00:48:49,410 Làm tốt lắm. 1128 00:48:49,410 --> 00:48:50,826 Bây giờ chúng ta đang đi ra khỏi phòng. 1129 00:48:50,826 --> 00:48:56,970 1130 00:48:56,970 --> 00:49:01,366 Vì vậy, tôi sẽ rời khỏi phần còn lại lên cho bạn và xem những gì bạn tìm hiểu. 1131 00:49:01,366 --> 00:49:02,865 EFA: Tôi sẽ không ở trong phòng tối. 1132 00:49:02,865 --> 00:49:07,315 1133 00:49:07,315 --> 00:49:07,815 Oh, chờ đợi. 1134 00:49:07,815 --> 00:49:09,314 Bây giờ tôi phải đi xuống hành lang tối tăm? 1135 00:49:09,314 --> 00:49:10,785 OK, tôi sẽ trở lại [không nghe được]. 1136 00:49:10,785 --> 00:49:15,520 1137 00:49:15,520 --> 00:49:16,270 COLTON: Tất cả các quyền. 1138 00:49:16,270 --> 00:49:17,560 Một số mặt hàng hơn để chọn lên. 1139 00:49:17,560 --> 00:49:19,370 Hình như một số tiền xu. 1140 00:49:19,370 --> 00:49:22,242 Đó là một lựa chọn khóa. 1141 00:49:22,242 --> 00:49:24,200 Vì vậy, nếu bạn tìm thấy một khóa cửa, bạn có thể sử dụng đó. 1142 00:49:24,200 --> 00:49:27,755 1143 00:49:27,755 --> 00:49:28,380 Bạn có sợ không? 1144 00:49:28,380 --> 00:49:29,371 >> EFA: Chưa. 1145 00:49:29,371 --> 00:49:29,871 COLTON: OK. 1146 00:49:29,871 --> 00:49:34,850 1147 00:49:34,850 --> 00:49:35,497 >> Pretend-- yeah. 1148 00:49:35,497 --> 00:49:37,330 Chỉ cần giả vờ bạn thực sự đứng ở đó. 1149 00:49:37,330 --> 00:49:39,580 Và nếu bạn bật around-- bạn đã có để làm quen với nó. 1150 00:49:39,580 --> 00:49:40,752 Nhưng nó có ý nghĩa. 1151 00:49:40,752 --> 00:49:43,960 DAVID Malan: Và trong khi Efa tiếp tục chơi, vì chúng ta có thể làm điều này cả ngày, 1152 00:49:43,960 --> 00:49:45,381 chúng tôi có thể tất cả tip-toe ra ở đây. 1153 00:49:45,381 --> 00:49:48,130 Nhưng chúng tôi có hai cặp khác, nếu bạn muốn đến và chơi. 1154 00:49:48,130 --> 00:49:49,980 Nếu không, chúng ta sẽ thấy bạn tiếp theo vào ngày thứ Tư. 1155 00:49:49,980 --> 00:49:51,354 Cảm ơn bạn tình nguyện viên của chúng tôi ngày hôm nay. 1156 00:49:51,354 --> 00:49:52,101 [Vỗ tay] 1157 00:49:52,101 --> 00:49:54,506 1158 00:49:54,506 --> 00:49:57,392 >> [MUSIC - "Seinfeld THEME"] 1159 00:49:57,392 --> 00:49:58,222 1160 00:49:58,222 --> 00:50:00,180 SPEAKER 1: Vâng, tôi là đặt một PL mới gắn vào. 1161 00:50:00,180 --> 00:50:01,800 Tôi chỉ cần thay đổi các OLPF-- 1162 00:50:01,800 --> 00:50:03,980 >> SPEAKER 2: Vậy điều gì chính xác là bạn đang làm gì? 1163 00:50:03,980 --> 00:50:07,063 >> SPEAKER 1: Vâng, mỗi một trong these-- ở đây, tôi sẽ chỉ cho bạn một này tại đây. 1164 00:50:07,063 --> 00:50:08,690 Bạn có thể nhìn thấy nó ngay tại đây. 1165 00:50:08,690 --> 00:50:09,510 >> SPEAKER 3: Tôi nghĩ tôi tốt với các. 1166 00:50:09,510 --> 00:50:09,933 Anh cần thêm nữa không? 1167 00:50:09,933 --> 00:50:11,325 >> SPEAKER 4: Không, tôi là tốt. [Không nghe thấy]. 1168 00:50:11,325 --> 00:50:12,200 >> SPEAKER 3: Không, [nghe được]. 1169 00:50:12,200 --> 00:50:12,700 Có một số. 1170 00:50:12,700 --> 00:50:21,165 1171 00:50:21,165 --> 00:50:22,290 SPEAKER 1: màu sắc khác nhau. 1172 00:50:22,290 --> 00:50:22,890 SPEAKER 2: OK. 1173 00:50:22,890 --> 00:50:26,690 SPEAKER 1: Vì vậy, cuối cùng những gì nó làm đó là điều chỉnh màu sắc of--