1 00:00:00,000 --> 00:00:39,630 2 00:00:39,630 --> 00:00:41,880 DAVID J.馬蘭：好吧， 所以這是這裡的繆手臂 3 00:00:41,880 --> 00:00:44,450 帶內，一對夫婦，其中我們 有CS50最終項目。 4 00:00:44,450 --> 00:00:47,533 而這是一個演示中，我們排隊 您事先根本所在 5 00:00:47,533 --> 00:00:51,120 這個相當緊臂帶在這裡 聽你的肌肉運動 6 00:00:51,120 --> 00:00:54,280 這將被映射軟件 以科爾頓的筆記本電腦在這裡它 7 00:00:54,280 --> 00:00:57,230 有iTunes和那 歌已經排隊。 8 00:00:57,230 --> 00:01:00,270 而不是我演示該這樣， 科爾頓一直在實驗室 9 00:01:00,270 --> 00:01:04,129 顯然整個星期得到一個示範 準備好一個勇敢的志願者。 10 00:01:04,129 --> 00:01:07,430 如果有人想進來 在up--第一次看到你的手。 11 00:01:07,430 --> 00:01:09,540 上來吧。 12 00:01:09,540 --> 00:01:12,530 >> 行。 13 00:01:12,530 --> 00:01:13,886 而你叫什麼名字？ 14 00:01:13,886 --> 00:01:14,800 >> 聽眾：呃，瑪麗亞。 15 00:01:14,800 --> 00:01:16,550 >> DAVID J.馬蘭：瑪麗亞，很高興見到你。 16 00:01:16,550 --> 00:01:17,310 快點看過來。 17 00:01:17,310 --> 00:01:19,550 讓我來給你介紹科爾頓。 18 00:01:19,550 --> 00:01:21,290 科爾頓，這是瑪麗亞。 19 00:01:21,290 --> 00:01:23,050 >> COLTON：你好，很高興見到你。 20 00:01:23,050 --> 00:01:24,330 >> DAVID J.馬蘭：全部 對，所以第一步，我們 21 00:01:24,330 --> 00:01:26,204 要你放 這對你的前臂 22 00:01:26,204 --> 00:01:29,280 因此，它是相當 緊了靠近你的肘部。 23 00:01:29,280 --> 00:01:31,940 而與此同時，讓我們 把我們的谷歌玻璃 24 00:01:31,940 --> 00:01:33,720 而我們今天將混合技術。 25 00:01:33,720 --> 00:01:36,340 >> COLTON：首先我們得 鉤到東西了。 26 00:01:36,340 --> 00:01:37,170 >> DAVID J.馬蘭：OK。 27 00:01:37,170 --> 00:01:39,795 其實，讓我們把你的手臂 接近該電纜盡可能 28 00:01:39,795 --> 00:01:41,160 這樣我們就可以先同步起來。 29 00:01:41,160 --> 00:01:42,740 >> COLTON：讓我們做到這一點。 30 00:01:42,740 --> 00:01:46,500 >> DAVID J.馬蘭：而與此同時，這樣 每個人都可以得到一個更接近一目了然， 31 00:01:46,500 --> 00:01:50,290 我們折騰安德魯的攝像頭 在屏幕上出現。 32 00:01:50,290 --> 00:01:54,460 因此，我們有一個USB電纜的 被插入到瑪麗亞的袖標。 33 00:01:54,460 --> 00:02:00,230 讓我折騰科爾頓的屏幕 旁邊的投影機。 34 00:02:00,230 --> 00:02:06,000 >> 因此，科爾頓被註冊設備 現在的繆連接到該電纜。 35 00:02:06,000 --> 00:02:08,060 現在什麼超群 要做到瞬間 36 00:02:08,060 --> 00:02:10,120 實際上是通過走 校準步驟 37 00:02:10,120 --> 00:02:12,830 並教軟件 怎麼她的肌肉反應 38 00:02:12,830 --> 00:02:16,070 當她做出一定的預先定義的 手勢軟件的理解。 39 00:02:16,070 --> 00:02:17,910 如果你想進去 前面的屏幕。 40 00:02:17,910 --> 00:02:26,840 41 00:02:26,840 --> 00:02:30,090 OK，繼續努力。 42 00:02:30,090 --> 00:02:31,860 >> COLTON：進入這個樣子。 43 00:02:31,860 --> 00:02:32,970 和這樣的。 44 00:02:32,970 --> 00:02:34,563 和一路的權利。 45 00:02:34,563 --> 00:02:35,922 回去。 46 00:02:35,922 --> 00:02:37,740 >> DAVID J.馬蘭：OK。 47 00:02:37,740 --> 00:02:38,960 不同的觀點。 48 00:02:38,960 --> 00:02:39,620 這不是你的。 49 00:02:39,620 --> 00:02:40,350 這是我們的。 50 00:02:40,350 --> 00:02:41,749 >> 瑪麗亞：OK。 51 00:02:41,749 --> 00:02:42,540 DAVID J.馬蘭：沒有。 52 00:02:42,540 --> 00:02:46,720 53 00:02:46,720 --> 00:02:51,540 讓我們將它更高的，所以這是 接近你的胳膊肘，甚至更緊。 54 00:02:51,540 --> 00:02:52,680 行。 55 00:02:52,680 --> 00:02:53,270 >> 開始了。 56 00:02:53,270 --> 00:02:56,780 這將是一個很好的時間CS52X。 57 00:02:56,780 --> 00:02:57,670 在那裡，我們走了。 58 00:02:57,670 --> 00:02:58,760 >> 很不錯。 59 00:02:58,760 --> 00:03:01,170 行。 60 00:03:01,170 --> 00:03:02,790 拇指到小指。 61 00:03:02,790 --> 00:03:03,380 >> 很不錯。 62 00:03:03,380 --> 00:03:05,140 傳播你的手指。 63 00:03:05,140 --> 00:03:06,240 不錯。 64 00:03:06,240 --> 00:03:06,910 波權利。 65 00:03:06,910 --> 00:03:15,052 66 00:03:15,052 --> 00:03:17,010 它好奇地顯示 你與左hand-- 67 00:03:17,010 --> 00:03:19,665 >> COLTON：是啊，這是奇怪的。 68 00:03:19,665 --> 00:03:21,790 DAVID J.馬蘭：波 右，向前邁進。 69 00:03:21,790 --> 00:03:22,998 快進跳過或者明年。 70 00:03:22,998 --> 00:03:25,020 這是確定的波權利。 71 00:03:25,020 --> 00:03:26,650 >> 瑪麗亞：我don't--等待。 72 00:03:26,650 --> 00:03:28,430 >> DAVID J.馬蘭：需要幫忙嗎？ 73 00:03:28,430 --> 00:03:30,027 >> COLTON：所以你會喜歡這個。 74 00:03:30,027 --> 00:03:31,860 瑪麗亞：它的轉動 其他的事情，雖然。 75 00:03:31,860 --> 00:03:32,390 COLTON：是的。 76 00:03:32,390 --> 00:03:34,250 DAVID J.馬蘭：是的，我不知道 為什麼它向你展示一個leftie。 77 00:03:34,250 --> 00:03:36,458 COLTON：你為什麼不try-- 只是嘗試去這樣。 78 00:03:36,458 --> 00:03:38,910 79 00:03:38,910 --> 00:03:40,090 >> DAVID J.馬蘭：沒有？ 80 00:03:40,090 --> 00:03:42,580 也許到達你的手臂 出一點直 81 00:03:42,580 --> 00:03:46,070 並使其更突然這樣。 82 00:03:46,070 --> 00:03:48,176 是啊，好，來吧。 83 00:03:48,176 --> 00:03:49,670 >> 瑪麗亞：對不起。 84 00:03:49,670 --> 00:03:51,170 DAVID J.馬蘭：這不是你的錯。 85 00:03:51,170 --> 00:03:53,018 COLTON：它的罰款。 86 00:03:53,018 --> 00:03:55,430 DAVID J.馬蘭：好的。 87 00:03:55,430 --> 00:03:56,220 Well-- 88 00:03:56,220 --> 00:03:57,620 >> 瑪麗亞：我們應該跳過這個，然後呢？ 89 00:03:57,620 --> 00:03:59,620 DAVID J.馬蘭：是的，讓我們 讓你擺脫困境。 90 00:03:59,620 --> 00:04:03,130 因此，如果有人想辦一個 使用這種尖端最終項目 91 00:04:03,130 --> 00:04:07,707 硬件，實現它可能只是 需要一點時間來適應。 92 00:04:07,707 --> 00:04:10,290 和this--現實就是如此 其實是很前沿的。 93 00:04:10,290 --> 00:04:12,040 >> 這就是被稱為 該開發工具包，其中 94 00:04:12,040 --> 00:04:14,956 意指基本上預發布 使人們可以做完全 95 00:04:14,956 --> 00:04:18,690 this--與它對抗，圖 如何人的身體工作 96 00:04:18,690 --> 00:04:19,980 隨著技術的發展。 97 00:04:19,980 --> 00:04:21,750 所以，如果你想 事後，演講結束後， 98 00:04:21,750 --> 00:04:23,750 我們可以讓你來 採取另一種刺吧。 99 00:04:23,750 --> 00:04:26,970 但除此之外，掌聲雷動，如果 我們可以，瑪麗亞·達來臨。 100 00:04:26,970 --> 00:04:28,770 >> 瑪麗亞：謝謝你。 101 00:04:28,770 --> 00:04:30,390 >> DAVID J.馬蘭：謝謝。 102 00:04:30,390 --> 00:04:34,945 我們會掛到這一點，但我們會給 你 - 怎麼樣一個壓力球嗎？ 103 00:04:34,945 --> 00:04:38,620 哦，還有 - if--是的，謝謝。 104 00:04:38,620 --> 00:04:39,715 行。 105 00:04:39,715 --> 00:04:45,750 所以對於好奇的，如果你是 熟悉的聲音的選擇 106 00:04:45,750 --> 00:04:47,670 我們有做 早些時候，一個驚人的電視 107 00:04:47,670 --> 00:04:50,210 說明你絕對應該 是狂歡，觀看Netflix上 108 00:04:50,210 --> 00:04:51,110 這是一個在這裡。 109 00:04:51,110 --> 00:04:54,472 >> 揚聲器1：女士們，先生們， 一個名為喬希魔術師。 110 00:04:54,472 --> 00:05:04,710 111 00:05:04,710 --> 00:05:08,050 >> DAVID J.馬蘭：而且很顯然，這是 事到如今講課時給我發短信。 112 00:05:08,050 --> 00:05:11,190 我被告知，瑪麗亞 過了一個生日昨天。 113 00:05:11,190 --> 00:05:14,095 從這麼生日快樂 CS50瑪麗亞為好。 114 00:05:14,095 --> 00:05:18,720 115 00:05:18,720 --> 00:05:22,090 >> 所以，你可能已經讀過，最近一個月 這個紳士在這裡，史蒂夫 116 00:05:22,090 --> 00:05:25,260 鮑爾默，誰是真正 在大專班1977年， 117 00:05:25,260 --> 00:05:27,170 剛剛退休的微軟。 118 00:05:27,170 --> 00:05:29,620 他是一個本科生在這裡， 那麼幾年後 119 00:05:29,620 --> 00:05:31,910 發現自己 斯坦福大學商學院 120 00:05:31,910 --> 00:05:34,160 當他接到一個電話 從他誰的朋友打電話 121 00:05:34,160 --> 00:05:36,516 一直住在大廳 從他在哈佛。 122 00:05:36,516 --> 00:05:38,640 那朋友的名字是比爾 門，在當時， 123 00:05:38,640 --> 00:05:42,700 他試圖招募史蒂夫是 第一筆生意的人，真的， 124 00:05:42,700 --> 00:05:45,720 在一家小公司微軟的名字。 125 00:05:45,720 --> 00:05:48,960 >> 長話短說，史蒂夫 最終被征服了， 126 00:05:48,960 --> 00:05:52,130 加盟微軟時，他們 剛剛30名員工。 127 00:05:52,130 --> 00:05:54,300 和的時候，他 退休最近， 128 00:05:54,300 --> 00:05:58,100 該公司擁有100,000名員工 在過去的幾年裡。 129 00:05:58,100 --> 00:06:01,171 所以一個網站稱為邊緣 編制本致敬視頻 130 00:06:01,171 --> 00:06:02,920 我們認為我們會 共享，讓你 131 00:06:02,920 --> 00:06:08,380 到底有多少能量史蒂夫感 帶來任何表示，他帶來的。 132 00:06:08,380 --> 00:06:11,884 133 00:06:11,884 --> 00:06:12,550 [視頻回放] 134 00:06:12,550 --> 00:06:16,220 - 微軟就像一個第四個孩子。 135 00:06:16,220 --> 00:06:18,260 孩子做離開家。 136 00:06:18,260 --> 00:06:21,875 在這種情況下，我猜 我離開了家。 137 00:06:21,875 --> 00:06:23,270 嘿，比爾，whazzap？ 138 00:06:23,270 --> 00:06:24,200 >> -Wazzap？ 139 00:06:24,200 --> 00:06:25,320 >> - 嘿，wazzap？ 140 00:06:25,320 --> 00:06:28,590 我們已經給出了 巨大的機會。 141 00:06:28,590 --> 00:06:30,210 和比爾給了我們這樣的機會。 142 00:06:30,210 --> 00:06:35,520 143 00:06:35,520 --> 00:06:36,770 我要感謝比爾為。 144 00:06:36,770 --> 00:06:39,630 我要你了。 145 00:06:39,630 --> 00:06:42,500 創新的步伐 不會放緩。 146 00:06:42,500 --> 00:06:45,140 >> 它會變得越來越快。 147 00:06:45,140 --> 00:06:50,165 可能有幾個競爭者 那些不幸被淘汰！ 148 00:06:50,165 --> 00:06:54,337 149 00:06:54,337 --> 00:06:59,564 >> 我喜歡這家公司。 150 00:06:59,564 --> 00:07:00,064 是的！ 151 00:07:00,064 --> 00:07:03,452 152 00:07:03,452 --> 00:07:08,250 我是一台PC，我喜歡這家公司！ 153 00:07:08,250 --> 00:07:13,090 >> 開發者，開發者，開發者， 開發者，開發者，開發者， 154 00:07:13,090 --> 00:07:14,560 開發者，開發者。 155 00:07:14,560 --> 00:07:17,500 156 00:07:17,500 --> 00:07:18,970 是的！ 157 00:07:18,970 --> 00:07:19,950 Web開發人員！ 158 00:07:19,950 --> 00:07:21,420 >> Web開發人員！ 159 00:07:21,420 --> 00:07:22,890 Web開發人員！ 160 00:07:22,890 --> 00:07:25,830 161 00:07:25,830 --> 00:07:28,770 聽什麼你 得到不收取額外費用！ 162 00:07:28,770 --> 00:07:31,960 >> 在MS-DOS執行，預約 壓延機，卡堆，一個記事本， 163 00:07:31,960 --> 00:07:33,750 一個時鐘，一個控制面板。 164 00:07:33,750 --> 00:07:35,461 而且，你能相信嗎？ 165 00:07:35,461 --> 00:07:35,960 Reversie！ 166 00:07:35,960 --> 00:07:37,270 >> 它們刻錄到CD！ 167 00:07:37,270 --> 00:07:38,660 它們發布到MSN！ 168 00:07:38,660 --> 00:07:40,422 你郵寄給朋友！ 169 00:07:40,422 --> 00:07:41,790 >> 所有與點擊！ 170 00:07:41,790 --> 00:07:48,670 一個微軟，一種策略，一是team-- 專注，紀律，專業， 171 00:07:48,670 --> 00:07:50,610 和專家在所有我們做的。 172 00:07:50,610 --> 00:07:52,670 讓我用一條線從一部老電影。 173 00:07:52,670 --> 00:07:54,810 >> 關係就像鯊魚。 174 00:07:54,810 --> 00:07:57,480 他們前進或者死亡。 175 00:07:57,480 --> 00:08:01,470 其實，我覺得高科技 公司是相同的。 176 00:08:01,470 --> 00:08:04,801 >> [完視頻回放] 177 00:08:04,801 --> 00:08:08,050 DAVID J.馬蘭：所以我們是如此高興 宣布，史蒂夫將加入我們 178 00:08:08,050 --> 00:08:13,320 在這裡CS50下週三 平時的地點和時間在這裡。 179 00:08:13,320 --> 00:08:14,750 空間可能是有限的。 180 00:08:14,750 --> 00:08:19,650 所以我們一起的人，請 今天頭或此後不久， 181 00:08:19,650 --> 00:08:22,600 到cs50.harvard.edu/register。 182 00:08:22,600 --> 00:08:25,780 >> 我們將跟進 週二確認點。 183 00:08:25,780 --> 00:08:29,900 期待，明年 講座在CS50在週三。 184 00:08:29,900 --> 00:08:33,706 現在，在等消息，我偶然 遇到這樣的絳只是 185 00:08:33,706 --> 00:08:34,289 有一天。 186 00:08:34,289 --> 00:08:37,370 >> 事實證明，CS50的工作人員之一 和CS50的學生至少有一個 187 00:08:37,370 --> 00:08:40,299 目前正在運行UC 總統和副總統， 188 00:08:40,299 --> 00:08:42,950 這把我帶回 我自己回天 189 00:08:42,950 --> 00:08:45,920 當我失去了悲慘的UC選舉。 190 00:08:45,920 --> 00:08:48,210 但一線希望 在這是我一直 191 00:08:48,210 --> 00:08:50,604 講故事是， 對我的一個肯定 192 00:08:50,604 --> 00:08:52,770 很多原因，我失去了 選舉是完全缺乏 193 00:08:52,770 --> 00:08:54,103 對人才的公開演講。 194 00:08:54,103 --> 00:08:56,950 因此坦白地說，這 開車送我，那段經歷 195 00:08:56,950 --> 00:09:02,235 我覺得我大三，實際簽約 彌補哈佛大學計算機協會， 196 00:09:02,235 --> 00:09:04,610 是該集團在校園的 擁有各種技術講座 197 00:09:04,610 --> 00:09:05,318 和其他的東西。 198 00:09:05,318 --> 00:09:08,117 我接手他們的教學 研討會因此 199 00:09:08,117 --> 00:09:09,950 有一個機會，一個 難得的機會， 200 00:09:09,950 --> 00:09:12,620 開始工作的正是這一點。 201 00:09:12,620 --> 00:09:15,000 但同時，我有機會 在這方面的經驗 202 00:09:15,000 --> 00:09:16,930 教自己更加HTML。 203 00:09:16,930 --> 00:09:21,080 所以，我昨天晚上被一拖再拖 翻翻基於HTML的網站 204 00:09:21,080 --> 00:09:28,066 我做了像1997年，1998，我的 活動看起來像這樣在這裡。 205 00:09:28,066 --> 00:09:29,920 我知道。 206 00:09:29,920 --> 00:09:33,340 >> 因為 - 當然，預告 在1998年這個驚人的設計決策 207 00:09:33,340 --> 00:09:33,850 或諸如此類的東西。 208 00:09:33,850 --> 00:09:36,475 你想的第一件事用戶 做在訪問您的網站 209 00:09:36,475 --> 00:09:39,860 是必須點擊另一個鏈接只是 在這裡輸入你的網站與和尚 210 00:09:39,860 --> 00:09:43,940 後面像籠罩在哪裡帷幕 顯然我的競選綱領是。 211 00:09:43,940 --> 00:09:46,330 而這一切，你會得到 今天只是一個截圖。 212 00:09:46,330 --> 00:09:49,500 但我讀通過一樣， 我的競選昨晚海報 213 00:09:49,500 --> 00:09:50,490 我的平台。 214 00:09:50,490 --> 00:09:52,960 >> 我很生氣的時候。 215 00:09:52,960 --> 00:09:55,380 我的平台was--很有意思。 216 00:09:55,380 --> 00:09:57,730 所以我從那以後平靜下來。 217 00:09:57,730 --> 00:10:03,550 但總有一天，我會再次運行， 希望最好這個時候。 218 00:10:03,550 --> 00:10:07,265 >> 所以HTML，我在其中所做的語言 這in--你很快就會太大的緩慢 - 219 00:10:07,265 --> 00:10:09,140 是我們一直 談到後期 220 00:10:09,140 --> 00:10:12,460 並在很大程度上服用理所當然現在 我們已經轉移到其他語言。 221 00:10:12,460 --> 00:10:15,650 但是，讓我們停下來就一下 把其中的一些東西融會貫通。 222 00:10:15,650 --> 00:10:18,040 所以，在一個句子裡，HTML是什麼？ 223 00:10:18,040 --> 00:10:19,370 >> 或者說，是用來做什麼的呢？ 224 00:10:19,370 --> 00:10:20,208 任何人嗎？ 225 00:10:20,208 --> 00:10:20,708 是。 226 00:10:20,708 --> 00:10:22,002 >> 聽眾：標記的網站。 227 00:10:22,002 --> 00:10:23,460 DAVID J.馬蘭：標記的網站。 228 00:10:23,460 --> 00:10:27,100 因此，它是一種標記語言， 可以讓你構建一個網頁。 229 00:10:27,100 --> 00:10:30,040 頭去在這裡，標題 放在這裡，身體放在這裡。 230 00:10:30,040 --> 00:10:33,280 這是黑體字，這是 italics--之類的細節。 231 00:10:33,280 --> 00:10:33,830 >> OK，好。 232 00:10:33,830 --> 00:10:37,620 所以，CSS可以讓你 - 和我 採取了一些有自由 233 00:10:37,620 --> 00:10:40,990 與大膽的面向和斜體，因為 這是更好地與這個實現的。 234 00:10:40,990 --> 00:10:42,096 CSS is--什麼？ 235 00:10:42,096 --> 00:10:42,845 說，在一個句子裡。 236 00:10:42,845 --> 00:10:46,000 237 00:10:46,000 --> 00:10:46,720 任何人都沒有。 238 00:10:46,720 --> 00:10:46,870 是啊。 239 00:10:46,870 --> 00:10:49,286 >> 聽眾：裝飾和 的東西，想怎麼設計它。 240 00:10:49,286 --> 00:10:51,769 241 00:10:51,769 --> 00:10:52,810 DAVID J.馬蘭：好，好。 242 00:10:52,810 --> 00:10:55,420 裝飾，讓您 設計它，或者它風格化 243 00:10:55,420 --> 00:10:59,540 與諸如黑體和 斜體和顏色也更精細 244 00:10:59,540 --> 00:11:01,330 元素的細粒度定位。 245 00:11:01,330 --> 00:11:04,520 排序它可以讓你把東西 最後一英里，這樣，如果，例如 246 00:11:04,520 --> 00:11:08,130 在Pset7，你可能已經注意到你的 投資組合頁面，如果你在這一點上 247 00:11:08,130 --> 00:11:12,270 已經是默認的表，你 使顯示給用戶的持股 248 00:11:12,270 --> 00:11:15,740 和現金可能看起來很醜陋 默認情況下，沒有空格。 249 00:11:15,740 --> 00:11:18,420 一切的那種臨時抱佛腳 一起以行和列。 250 00:11:18,420 --> 00:11:20,662 >> 好了，有一點點 CSS，你可以實現， 251 00:11:20,662 --> 00:11:23,870 你其實可以調整的，並使其 一些更熟悉的多 252 00:11:23,870 --> 00:11:24,870 漂亮看看。 253 00:11:24,870 --> 00:11:27,730 所以CSS是關於 風格化的網站。 254 00:11:27,730 --> 00:11:31,970 但是，我們引入了另一個 語言，PHP，這讓我們怎麼辦？ 255 00:11:31,970 --> 00:11:36,400 256 00:11:36,400 --> 00:11:37,590 >> 我們只是做了什麼？ 257 00:11:37,590 --> 00:11:38,177 任何人。 258 00:11:38,177 --> 00:11:40,010 有冒險超越 前幾行。 259 00:11:40,010 --> 00:11:40,260 是啊。 260 00:11:40,260 --> 00:11:41,719 >> 聽眾：生成動態內容。 261 00:11:41,719 --> 00:11:42,718 DAVID J.馬蘭：完美。 262 00:11:42,718 --> 00:11:43,850 生成動態內容。 263 00:11:43,850 --> 00:11:45,808 你可以這樣做 任何數目的語言。 264 00:11:45,808 --> 00:11:50,120 我們碰巧使用PHP，因為它是 在欄目等類似C的語法。 265 00:11:50,120 --> 00:11:52,000 >> 但是PHP正是這麼做的。 266 00:11:52,000 --> 00:11:54,620 它可以讓你動態生成的輸出。 267 00:11:54,620 --> 00:11:57,890 有的認為產出可能 HTML，因為我們通常在做。 268 00:11:57,890 --> 00:12:00,160 而且，這也是因為它的 一種編程語言，是 269 00:12:00,160 --> 00:12:03,240 通過該機制 我們可以跟數據庫。 270 00:12:03,240 --> 00:12:05,730 >> 我們可以查詢到 其他服務器，如雅虎 271 00:12:05,730 --> 00:12:08,660 並以編程方式做任何事情 真的，你可能會以其他方式 272 00:12:08,660 --> 00:12:10,400 要強迫電腦做。 273 00:12:10,400 --> 00:12:13,580 所以，PHP讓我們開始 動態輸出內容。 274 00:12:13,580 --> 00:12:16,900 因此，通過這樣的邏輯，我沒有 一個動態的網站早在1998年。 275 00:12:16,900 --> 00:12:18,460 >> 這只是一個靜態的網頁。 276 00:12:18,460 --> 00:12:22,250 我的內容必須由改變 用gedit或者一些等價手動。 277 00:12:22,250 --> 00:12:25,290 但是PHP也就是我們使用或 也可以使用，而是 278 00:12:25,290 --> 00:12:27,260 這樣的事情了 即時的新生網站， 279 00:12:27,260 --> 00:12:31,160 應該採取登記和 管理users--的事情的列表 280 00:12:31,160 --> 00:12:33,550 實際上切換 時間，儘管我們碰巧 281 00:12:33,550 --> 00:12:35,990 使用Perl，不同的 在當時的語言。 282 00:12:35,990 --> 00:12:40,350 >> 然後最後，我們介紹 SQL--結構化查詢語言。 283 00:12:40,350 --> 00:12:43,845 因此，另一種語言 這是用來做什麼的？ 284 00:12:43,845 --> 00:12:46,660 285 00:12:46,660 --> 00:12:47,639 用於什麼？ 286 00:12:47,639 --> 00:12:49,430 我們可以大膽slight-- OK，我們不會 287 00:12:49,430 --> 00:12:51,263 獲得更遠 比這裡的樂團。 288 00:12:51,263 --> 00:12:53,432 聽眾：這是一個協議 用於跟數據庫。 289 00:12:53,432 --> 00:12:55,640 DAVID J.馬蘭：協議 用於跟數據庫。 290 00:12:55,640 --> 00:12:56,181 讓我調整。 291 00:12:56,181 --> 00:12:59,280 它使用的自然語言 談談databases--選擇 292 00:12:59,280 --> 00:13:01,280 並插入和刪除 更新和實際 293 00:13:01,280 --> 00:13:03,840 甚至更多的功能是 我們甚至還沒有跌 294 00:13:03,840 --> 00:13:07,920 成，但您可能希望explore--有 探索，比方說，一個最終的項目。 295 00:13:07,920 --> 00:13:09,560 因此，有這些不同的部分。 296 00:13:09,560 --> 00:13:13,100 >> 並希望Pset7，即使 其規格是相當長的， 297 00:13:13,100 --> 00:13:15,990 這是故意長走你 通過這些事情怎麼能都 298 00:13:15,990 --> 00:13:17,210 鍵入在一起。 299 00:13:17,210 --> 00:13:20,300 現在，在星期一，我們 介紹了我們最後的語言 300 00:13:20,300 --> 00:13:23,430 我們將正式引入 該course--就是JavaScript的。 301 00:13:23,430 --> 00:13:25,720 這，像PHP，是一個 解釋語言。 302 00:13:25,720 --> 00:13:28,110 >> 但一個關鍵的區別 我建議在週一 303 00:13:28,110 --> 00:13:32,730 是，而PHP是執行或 被解釋的服務器，在其上 304 00:13:32,730 --> 00:13:35,990 在這種情況下是CS50器具， 或可能是一些商業網站 305 00:13:35,990 --> 00:13:39,370 服務器在互聯網上， 一般的JavaScript 306 00:13:39,370 --> 00:13:43,650 是運行客戶端的語言 沒有服務器side--那麼在瀏覽器中。 307 00:13:43,650 --> 00:13:46,970 這是說，就像當我打開 了Facebook的源代碼，發現所有 308 00:13:46,970 --> 00:13:51,510 這些的.js文件中，隱含著 當您訪問Facebook或最 309 00:13:51,510 --> 00:13:54,810 網站的這些日子裡，你會得到 不僅是HTML，不僅CSS， 310 00:13:54,810 --> 00:13:59,370 但一大堆的JavaScript 常在的.js文件的形式編碼。 311 00:13:59,370 --> 00:14:03,970 然後它的browser--自己 蘋果或PC--一個執行該代碼。 312 00:14:03,970 --> 00:14:05,990 >> 但是，您的瀏覽器執行。 313 00:14:05,990 --> 00:14:08,070 你能想到的那種沙箱中。 314 00:14:08,070 --> 00:14:12,420 使JavaScript代碼不應該是 能夠刪除計算機上的文件。 315 00:14:12,420 --> 00:14:14,730 它不應該能夠 以您的名義發送電子郵件。 316 00:14:14,730 --> 00:14:17,760 您的瀏覽器種類的限制 你可以用它做什麼。 317 00:14:17,760 --> 00:14:20,630 >> 因此，在這個意義上說，這是一個有點 那麼強大，或許比C. 318 00:14:20,630 --> 00:14:24,030 但JavaScript可以作為 一邊，在服務器上使用， 319 00:14:24,030 --> 00:14:27,740 雖然我們傾向於不說話 它在這方面。 320 00:14:27,740 --> 00:14:29,740 所以，現在讓我們一起把這些。 321 00:14:29,740 --> 00:14:34,000 一個星期加前，我們提出了一些HTML 在lef​​t--超級無聊的網頁。 322 00:14:34,000 --> 00:14:35,000 >> 只是打招呼的世界。 323 00:14:35,000 --> 00:14:38,110 然後我提出的 右側我們可以種偷的想法 324 00:14:38,110 --> 00:14:41,470 從我們的討論 數據結構，C語言 325 00:14:41,470 --> 00:14:45,270 並思考如何分級 在左邊的標記語言 326 00:14:45,270 --> 00:14:49,720 可以得出，或在存儲器中實現 作為一個實際的樹結構的節點 327 00:14:49,720 --> 00:14:51,400 和指針和這些類型的細節。 328 00:14:51,400 --> 00:14:53,820 在右邊，我們稱之為 一個DOM--文檔 329 00:14:53,820 --> 00:14:56,800 反對型號 - 這僅僅是 說法一樹奇特的方式。 330 00:14:56,800 --> 00:14:59,520 >> 現在，這是為什麼有用 認為它以這種方式？ 331 00:14:59,520 --> 00:15:01,680 因為現在有 JavaScript的，因為我們有 332 00:15:01,680 --> 00:15:05,810 那在得到這個打碼 環境，實際的HTML那 333 00:15:05,810 --> 00:15:08,360 被發送給瀏覽器 已經具有已 334 00:15:08,360 --> 00:15:12,690 被加載到存儲器的 瀏覽到您的計算機中的一棵樹 335 00:15:12,690 --> 00:15:18,270 這樣的內存，我們可以使用JavaScript 實際遍歷或步行或搜索 336 00:15:18,270 --> 00:15:21,800 或更改DOM樹然而，我們想要的。 337 00:15:21,800 --> 00:15:24,040 所以，事實上，如果你認為 關於facebook.com， 338 00:15:24,040 --> 00:15:27,660 如果您使用聊天功能，如果你 使用Gmail和谷歌聊天軟件的功能， 339 00:15:27,660 --> 00:15:30,540 什麼，你必須 消息來連連 340 00:15:30,540 --> 00:15:35,880 又一次，這些消息可能是， 像李標籤，列表項的標籤，也許。 341 00:15:35,880 --> 00:15:37,940 >> 或者，也許他們只是 那不斷出現的di​​v 342 00:15:37,940 --> 00:15:39,770 每次你得到一個即時消息。 343 00:15:39,770 --> 00:15:42,960 因此，僅僅意味著什麼 Facebook或谷歌正在做 344 00:15:42,960 --> 00:15:45,200 在任何時候你得到一個 來自服務器的消息， 345 00:15:45,200 --> 00:15:48,740 他們可能使用JavaScript 只需添加另一個節點 346 00:15:48,740 --> 00:15:52,700 這tree--另一個節點這一 樹則在視覺上看起來只是 347 00:15:52,700 --> 00:15:54,570 喜歡的文字在屏幕上一個新行。 348 00:15:54,570 --> 00:15:57,100 但他們插入 這個數據結構。 349 00:15:57,100 --> 00:15:59,742 >> 因此，在這樣的類 CS124和其他人，你會 350 00:15:59,742 --> 00:16:02,200 其實對寫更多的代碼 數據結構是這樣的。 351 00:16:02,200 --> 00:16:04,310 但是現在在JavaScript中， 我們姑且 352 00:16:04,310 --> 00:16:07,920 我們得到了所有這些功能 免費從語言本身。 353 00:16:07,920 --> 00:16:09,210 因此，讓我們來看一個例子。 354 00:16:09,210 --> 00:16:13,120 >> 讓我打開一個名為form.html文件。 355 00:16:13,120 --> 00:16:14,601 這是超級簡單。 356 00:16:14,601 --> 00:16:15,600 它只是看起來像這樣。 357 00:16:15,600 --> 00:16:17,860 >> 沒有CSS，沒有想到美學。 358 00:16:17,860 --> 00:16:19,810 這是純粹的功能 顯然我 359 00:16:19,810 --> 00:16:24,000 請求的電子郵件，密碼 再次輸入密碼，然後檢查 360 00:16:24,000 --> 00:16:26,150 同意某些條款和條件。 361 00:16:26,150 --> 00:16:28,740 什麼此源代碼 看起來可能是什麼 362 00:16:28,740 --> 00:16:31,030 你可能有一個猜測 現在花點心思位。 363 00:16:31,030 --> 00:16:32,840 我有一個表單標籤在這裡。 364 00:16:32,840 --> 00:16:36,190 >> 動作顯然是要 去一個名為register.php文件。 365 00:16:36,190 --> 00:16:37,870 我將使用的方法是搞定了。 366 00:16:37,870 --> 00:16:40,880 然後我有一個文本 現場，其名稱是電子郵件。 367 00:16:40,880 --> 00:16:43,340 >> 我有一個密碼字段 他的名字是密碼。 368 00:16:43,340 --> 00:16:45,420 我有另一個 密碼字段的名字 369 00:16:45,420 --> 00:16:47,342 是有點任意的確認。 370 00:16:47,342 --> 00:16:49,690 這只是一個HTTP參數。 371 00:16:49,690 --> 00:16:54,430 >> 然後我們我們不只是用這些 由於即時消息的新生演示中class-- 372 00:16:54,430 --> 00:16:56,692 複選框是 只需鍵入等於檢查。 373 00:16:56,692 --> 00:16:57,900 我會打電話給該協議。 374 00:16:57,900 --> 00:17:00,700 所以我有種隨意，但 方便的命名這些字段。 375 00:17:00,700 --> 00:17:03,450 所以現在，當這種形式得到 提交後，讓我們看看會發生什麼。 376 00:17:03,450 --> 00:17:07,290 如果我做malan@harvard.edu， 我會做緋紅的密碼。 377 00:17:07,290 --> 00:17:09,530 我會做的任何密碼。 378 00:17:09,530 --> 00:17:10,910 讓我們不要合作。 379 00:17:10,910 --> 00:17:12,280 >> 我不會選擇該複選框。 380 00:17:12,280 --> 00:17:13,940 讓我點擊註冊。 381 00:17:13,940 --> 00:17:15,420 它說，嗯，你註冊。 382 00:17:15,420 --> 00:17:16,069 並不是的。 383 00:17:16,069 --> 00:17:17,450 >> 但是URL改變。 384 00:17:17,450 --> 00:17:22,280 因此，這種形式顯然是允許 提交register.php。 385 00:17:22,280 --> 00:17:25,160 但據推測，應該是我 捕捉一些錯誤。 386 00:17:25,160 --> 00:17:27,569 現在，在Pset7和一些 我們講的例子， 387 00:17:27,569 --> 00:17:30,130 我們通常會打印出 大紅色的錯誤信息在這裡 388 00:17:30,130 --> 00:17:33,760 他說，失踪的名字， 或丟失密碼。 389 00:17:33,760 --> 00:17:37,680 我們已經做到這一點之前，我們已經 做完服務器端錯誤檢測。 390 00:17:37,680 --> 00:17:41,580 >> 但是很多網站這幾天 做客戶端的錯誤檢測 391 00:17:41,580 --> 00:17:42,810 其中的URL不改變。 392 00:17:42,810 --> 00:17:44,101 整個頁面不會刷新。 393 00:17:44,101 --> 00:17:46,940 你得到即時的反饋 從瀏覽器。 394 00:17:46,940 --> 00:17:48,070 也許出了紅色。 395 00:17:48,070 --> 00:17:49,190 >> 也許你會得到一個彈出。 396 00:17:49,190 --> 00:17:53,240 但是，你不要浪費時間發送到 服務器數據是不完整的。 397 00:17:53,240 --> 00:17:56,050 因此，讓我們看看如何可能 實現這一功能也是如此。 398 00:17:56,050 --> 00:17:59,660 >> 讓我去form1.html， 這看起來是相同的。 399 00:17:59,660 --> 00:18:03,530 但是，如果這次我做的 malan@harvard.edu和I型深紅色 400 00:18:03,530 --> 00:18:07,350 我不進一步合作 但點擊註冊，現在發現。 401 00:18:07,350 --> 00:18:08,940 這不是最性感的解決方案。 402 00:18:08,940 --> 00:18:10,900 我至少抓住了這個錯誤。 403 00:18:10,900 --> 00:18:12,900 而且我用警報 在JavaScript--功能 404 00:18:12,900 --> 00:18:14,090 而我們只用在課堂上。 405 00:18:14,090 --> 00:18:16,430 一般情況下，你不應該使用這個 因為它可以非常迅速地得到了 406 00:18:16,430 --> 00:18:17,160 的控制權。 407 00:18:17,160 --> 00:18:19,180 但密碼不匹配的錯誤。 408 00:18:19,180 --> 00:18:21,120 >> 讓我繼續前進，然後單擊確定。 409 00:18:21,120 --> 00:18:25,040 但這裡的關鍵外賣 是該URL不改變。 410 00:18:25,040 --> 00:18:27,960 所以，我不打擾浪費 服務器的時間要求它 411 00:18:27,960 --> 00:18:30,750 一個問題，我可以有 想出答案來嘍。 412 00:18:30,750 --> 00:18:33,210 >> 和用戶，即使 在談論這個 413 00:18:33,210 --> 00:18:35,264 不是用戶的長 要想一想， 414 00:18:35,264 --> 00:18:36,680 都將有即時的反饋。 415 00:18:36,680 --> 00:18:39,044 有沒有潛伏期 網絡連通性。 416 00:18:39,044 --> 00:18:40,460 因此，讓我們看一下這個源代碼。 417 00:18:40,460 --> 00:18:45,600 >> Form1.html外觀 結構相似的在這裡。 418 00:18:45,600 --> 00:18:46,810 的形式實際上是相同的。 419 00:18:46,810 --> 00:18:48,330 但是，讓我們看看我在這裡做下去。 420 00:18:48,330 --> 00:18:49,913 並有不同的方法來做到這一點。 421 00:18:49,913 --> 00:18:53,690 我已經做了最直接 跟隨器，但不是最優雅的方式呢。 422 00:18:53,690 --> 00:18:54,869 我有一個腳本標籤。 423 00:18:54,869 --> 00:18:57,035 然後我打電話 的document.getElementById（'登記'）。 424 00:18:57,035 --> 00:19:00,090 425 00:19:00,090 --> 00:19:04,420 我保存的值 在形式上，一個變量。 426 00:19:04,420 --> 00:19:05,520 >> 所以我做了什麼？ 427 00:19:05,520 --> 00:19:08,960 你能想到的 的document.getElementById作為是 428 00:19:08,960 --> 00:19:11,200 一個特殊函數 JavaScript的給你 429 00:19:11,200 --> 00:19:14,400 從字面上給你一隻 指針指向的節點之一 430 00:19:14,400 --> 00:19:16,520 或矩形此樹。 431 00:19:16,520 --> 00:19:21,470 所以，現在這就是我們的表單變量 在JavaScript中實際上是指向。 432 00:19:21,470 --> 00:19:25,120 >> 所以，現在的語法不同 C.但我們正在做的一些事情在這裡。 433 00:19:25,120 --> 00:19:30,360 一，這個人是有點怪 看，肯定與C. 434 00:19:30,360 --> 00:19:32,180 但看35行。 435 00:19:32,180 --> 00:19:35,130 因此，在左邊form.onsubmit。 436 00:19:35,130 --> 00:19:38,060 回想一下，是的onsubmit 就像在一個結構中的字段。 437 00:19:38,060 --> 00:19:41,480 如果你覺得表單變量 只是作為一個C結構， 438 00:19:41,480 --> 00:19:42,600 它可能具有某些字段。 439 00:19:42,600 --> 00:19:46,410 >> 早在一天，我們有學生姓名， 身份證，房屋，這些類型的字段。 440 00:19:46,410 --> 00:19:48,520 試想想的onsubmit作為另一個領域。 441 00:19:48,520 --> 00:19:53,380 但它是一個特殊的領域，因為 瀏覽器預編程期待 442 00:19:53,380 --> 00:19:57,530 .onsubmit到不是一個值 象的數字或字符串 443 00:19:57,530 --> 00:20:01,180 但實際上是一個函數 或一個函數的地址 444 00:20:01,180 --> 00:20:02,570 在計算機的存儲器中。 445 00:20:02,570 --> 00:20:04,740 >> 事實上，這就是 這個關鍵字在這裡呢。 446 00:20:04,740 --> 00:20:06,710 這是說，給我一個新的功能。 447 00:20:06,710 --> 00:20:09,390 但是，什麼是它的名字 將是顯然？ 448 00:20:09,390 --> 00:20:10,800 >> 遙想到星期一。 449 00:20:10,800 --> 00:20:13,430 450 00:20:13,430 --> 00:20:17,170 什麼是這個名字 在此基礎上的語法功能？ 451 00:20:17,170 --> 00:20:19,784 不，我的意思是，有明確 沒有名字肯定associated-- 452 00:20:19,784 --> 00:20:21,200 不是我在這裡強調。 453 00:20:21,200 --> 00:20:22,560 >> 但是，這實際上確定。 454 00:20:22,560 --> 00:20:25,840 這是一個匿名函數，或一個 lambda函數的一些可能會調用它。 455 00:20:25,840 --> 00:20:27,589 而這僅僅意味著 它仍然是一個函數。 456 00:20:27,589 --> 00:20:29,400 這只是，你可以叫不上名字稱呼它。 457 00:20:29,400 --> 00:20:30,057 不過沒關係。 458 00:20:30,057 --> 00:20:33,140 因為再次，瀏覽器已 像谷歌公司的預編程 459 00:20:33,140 --> 00:20:38,540 或Microsoft或Mozilla或他人 只知道，如果.onsubmit場 460 00:20:38,540 --> 00:20:43,400 裡面的表單元素有 值，把它當作一個function-- 461 00:20:43,400 --> 00:20:44,750 一個函數指針，如果你願意。 462 00:20:44,750 --> 00:20:46,910 並調用它時，表單被提交。 463 00:20:46,910 --> 00:20:50,350 >> 那麼，什麼代碼應該被執行 當表單被提交？ 464 00:20:50,350 --> 00:20:52,526 顯然，一切都 裡面的花括號中。 465 00:20:52,526 --> 00:20:53,650 而這僅僅是風格。 466 00:20:53,650 --> 00:20:55,626 >> 你可以這樣做喜歡 我們傾向於做CS50。 467 00:20:55,626 --> 00:20:58,250 但在JavaScript中，大多數人 傾向於保持它在同一行上 468 00:20:58,250 --> 00:21:01,960 只是因為它更清楚的 與該關鍵字相關聯的功能。 469 00:21:01,960 --> 00:21:03,240 所以，現在我在做什麼？ 470 00:21:03,240 --> 00:21:08,616 >> 如果form.email.value等於等號 空字符串或沒有，這裡的 471 00:21:08,616 --> 00:21:11,490 警報在哪裡，我會說， 你必須提供你的電子郵件地址， 472 00:21:11,490 --> 00:21:12,690 然後返回false。 473 00:21:12,690 --> 00:21:15,720 和它的回報是假 防止被提交的形式。 474 00:21:15,720 --> 00:21:19,480 同時，如果密碼值是 空白，我要罵的用戶 475 00:21:19,480 --> 00:21:21,150 並說，你必須提供一個密碼。 476 00:21:21,150 --> 00:21:23,700 >> 與此同時事情越來越 一個小票友在這裡。 477 00:21:23,700 --> 00:21:29,160 如果form.password.value不 平等form.confirmation.value， 478 00:21:29,160 --> 00:21:31,680 其他領域，大聲喝斥 用戶的密碼 479 00:21:31,680 --> 00:21:33,860 不匹配，因為它們 剛才沒有。 480 00:21:33,860 --> 00:21:35,780 然後這一個是一個 小性感，因為我 481 00:21:35,780 --> 00:21:40,470 知道我知道的概念 選中一個複選框的名字。 482 00:21:40,470 --> 00:21:45,680 >> 所以，我可以只使用一個感嘆號 點說，如果檢查不 483 00:21:45,680 --> 00:21:48,040 checked--它是布爾 值，真或false-- 484 00:21:48,040 --> 00:21:49,700 我會罵這個原因給用戶。 485 00:21:49,700 --> 00:21:52,300 否則，如果我們打通 所有這些條件， 486 00:21:52,300 --> 00:21:53,270 讓我們只返回true。 487 00:21:53,270 --> 00:21:54,700 讓表單提交。 488 00:21:54,700 --> 00:21:56,560 這就會發生。 489 00:21:56,560 --> 00:21:57,740 >> 讓我們輸入深紅色。 490 00:21:57,740 --> 00:22:00,230 讓我們選中該複選框，單擊註冊。 491 00:22:00,230 --> 00:22:01,979 現在，我經歷到目的地。 492 00:22:01,979 --> 00:22:03,270 現在，有有沒有數據庫。 493 00:22:03,270 --> 00:22:05,370 沒有什麼有趣 在register.php。 494 00:22:05,370 --> 00:22:07,980 我需要的東西 實際談談。 495 00:22:07,980 --> 00:22:09,140 因此，讓我停下來，在這裡。 496 00:22:09,140 --> 00:22:16,270 在我們剛剛完成的任何問題 或者是一些新的語法是？ 497 00:22:16,270 --> 00:22:17,640 好了，是嗎？ 498 00:22:17,640 --> 00:22:20,025 >> 聽眾：因此，任何複選框 自動布爾。 499 00:22:20,025 --> 00:22:21,650 你不必聲明它這樣。 500 00:22:21,650 --> 00:22:22,649 >> DAVID J.馬蘭：正確。 501 00:22:22,649 --> 00:22:29,340 這是從發送給您的任何複選框 一個HTML表單的JavaScript代碼 502 00:22:29,340 --> 00:22:31,760 將處理過的，是的，作為一個 布爾value--真或假。 503 00:22:31,760 --> 00:22:32,635 這是一個很好的問題。 504 00:22:32,635 --> 00:22:36,080 而其他的值，對 當然，一直文本，AKA字符串。 505 00:22:36,080 --> 00:22:38,500 >> 好吧，讓我 進一步後退了一下。 506 00:22:38,500 --> 00:22:39,900 什麼是這整點？ 507 00:22:39,900 --> 00:22:41,400 只是要清楚。 508 00:22:41,400 --> 00:22:44,940 如同我們已經知道了，甚至從Pset7 甚至從上週的演講 509 00:22:44,940 --> 00:22:51,120 例子中，我們可以明顯地查詢 $ _GET $ _ POST看看用戶給我們 510 00:22:51,120 --> 00:22:52,200 一個空值。 511 00:22:52,200 --> 00:22:54,400 還記得在PHP中的空函數。 512 00:22:54,400 --> 00:22:58,040 >> 所以才要清楚，什麼是 一個原因我們還可以 513 00:22:58,040 --> 00:23:00,535 要做到這一點的錯誤檢查 內部的瀏覽器？ 514 00:23:00,535 --> 00:23:03,350 515 00:23:03,350 --> 00:23:06,080 什麼是這裡的動機是什麼？ 516 00:23:06,080 --> 00:23:06,580 是啊。 517 00:23:06,580 --> 00:23:09,735 >> 聽眾：更快，而你不知道 發送無用的數據發送到服務器。 518 00:23:09,735 --> 00:23:10,610 DAVID J.馬蘭：好。 519 00:23:10,610 --> 00:23:11,170 它的速度更快。 520 00:23:11,170 --> 00:23:12,920 你不發無用 數據發送到服務器。 521 00:23:12,920 --> 00:23:14,670 >> 所以，你得到一個更 即時響應。 522 00:23:14,670 --> 00:23:16,560 和整體，用戶 體驗更好。 523 00:23:16,560 --> 00:23:17,900 想想辦法。 524 00:23:17,900 --> 00:23:21,160 >> 如果Gmail--，是 很多年前的情況。 525 00:23:21,160 --> 00:23:24,160 假設你有一個新的電子郵件的Gmail 帳，但通過的唯一方式 526 00:23:24,160 --> 00:23:26,510 一看就知道是一樣， 重新加載整個頁面。 527 00:23:26,510 --> 00:23:29,030 或者，假設你點擊 一個鏈接來閱讀電子郵件。 528 00:23:29,030 --> 00:23:31,600 >> 一切都那麼重裝 你可以看到郵件。 529 00:23:31,600 --> 00:23:33,380 還是Facebook--你得到一個聊天信息。 530 00:23:33,380 --> 00:23:36,000 你看不到它，直到你重新加載 頁面或點擊一些鏈接。 531 00:23:36,000 --> 00:23:38,380 >> 像，這將是一個非常 煩人的用戶體驗。 532 00:23:38,380 --> 00:23:41,300 這是什麼樣子， 顯然，回來的時候我跑了UC 533 00:23:41,300 --> 00:23:44,760 和紙幅卻小得多動態 和JavaScript是不是推廣 534 00:23:44,760 --> 00:23:45,601 因為它是現在。 535 00:23:45,601 --> 00:23:47,850 而事情越來越多 更具活力和更 536 00:23:47,850 --> 00:23:49,900 客戶端在這個意義上。 537 00:23:49,900 --> 00:23:54,370 >> 但有一個陷阱在這裡， 這是一種惱人的疑難雜症的。 538 00:23:54,370 --> 00:23:58,720 僅僅因為你添加客戶端 檢測喜歡這並不意味著 539 00:23:58,720 --> 00:24:01,430 你可以或應該放棄 服務器端檢測。 540 00:24:01,430 --> 00:24:04,080 基本上你想要把你的 錯誤檢查這兩個地方。 541 00:24:04,080 --> 00:24:05,830 因為什麼1 學到的教訓 542 00:24:05,830 --> 00:24:10,270 從文章中，我讀了一些摘錄 從這個愚蠢的CMS系統 - 543 00:24:10,270 --> 00:24:14,410 內容管理系統 - 這是 實施它的認證系統中， 544 00:24:14,410 --> 00:24:16,790 通過什麼樣的機制其登錄？ 545 00:24:16,790 --> 00:24:19,515 546 00:24:19,515 --> 00:24:20,469 JavaScript的。 547 00:24:20,469 --> 00:24:21,499 >> 聽眾：JavaScript的。 548 00:24:21,499 --> 00:24:23,290 DAVID J.馬蘭： JavaScript的，就是這樣，對嗎？ 549 00:24:23,290 --> 00:24:24,610 它是使用JavaScript。 550 00:24:24,610 --> 00:24:27,120 和字面上看，你們有 打了一點點可能 551 00:24:27,120 --> 00:24:28,700 與Chrome的督察。 552 00:24:28,700 --> 00:24:30,890 如果我能找到它，檢查的元素。 553 00:24:30,890 --> 00:24:33,670 >> 讓我過去做的 所有Chrome的選項。 554 00:24:33,670 --> 00:24:37,080 這是它是多麼容易 在瀏覽器中禁用JavaScript的。 555 00:24:37,080 --> 00:24:38,950 檢查，沒有更多的JavaScript。 556 00:24:38,950 --> 00:24:41,070 >> 因此，在公平，很多 網絡的這些日子 557 00:24:41,070 --> 00:24:43,430 只是要打破，因為 Gmail和其他sites-- 558 00:24:43,430 --> 00:24:46,140 Facebook--假設 啟用JavaScript。 559 00:24:46,140 --> 00:24:50,180 但是，如果你正在做一些愚蠢的事 像只驗證用戶輸入 560 00:24:50,180 --> 00:24:52,520 並檢查它 在客戶端上的錯誤， 561 00:24:52,520 --> 00:24:54,940 對手可以很容易地做到這一點。 562 00:24:54,940 --> 00:24:57,180 然後更聰明 對手像你這樣的傢伙 563 00:24:57,180 --> 00:25:01,120 現在可以使用Telnet或捲曲 或者只是命令行命令 564 00:25:01,120 --> 00:25:05,300 居然將消息發送到服務器 這同樣是沒有錯誤檢查。 565 00:25:05,300 --> 00:25:08,380 >> 因此，這更多的是一種 用戶界面的決定 566 00:25:08,380 --> 00:25:13,060 比它是一個實際的技術 improvement--實施 567 00:25:13,060 --> 00:25:14,410 一些客戶端這樣的。 568 00:25:14,410 --> 00:25:16,800 所以，現在看一眼，但隨後 我會推遲到網上走 569 00:25:16,800 --> 00:25:17,674 通過這一個。 570 00:25:17,674 --> 00:25:21,480 在表格2中，我們通過實際去 和清理代碼一點點。 571 00:25:21,480 --> 00:25:23,650 不過，讓我推遲一個 的影片，我們很可能會 572 00:25:23,650 --> 00:25:27,970 嵌入在Pset8，僅僅顯示了一個 使用一種名為庫類似的語法 573 00:25:27,970 --> 00:25:32,320 jQuery的，這是一個超級，超級 通俗圖書館在JavaScript中 574 00:25:32,320 --> 00:25:34,510 坦白說大多數人 只是使用這些日子 575 00:25:34,510 --> 00:25:37,070 甚至混淆為 幸福的JavaScript本身。 576 00:25:37,070 --> 00:25:38,950 >> 它往往涉及 一些美元符號 577 00:25:38,950 --> 00:25:41,350 而像文檔的關鍵字 在括號這裡。 578 00:25:41,350 --> 00:25:44,480 但同樣，讓我推遲到 慢一些在線教程 579 00:25:44,480 --> 00:25:46,750 而在短短的語法獲得並列起來。 580 00:25:46,750 --> 00:25:48,630 讓我們繼續來 東西有點涼 581 00:25:48,630 --> 00:25:50,520 在此應用的術語。 582 00:25:50,520 --> 00:25:57,730 >> 因此，在特定的，讓我去 前進，這種開放在這裡。 583 00:25:57,730 --> 00:25:58,340 來吧。 584 00:25:58,340 --> 00:25:59,380 在那裡，我們走了。 585 00:25:59,380 --> 00:26:01,500 >> 讓我在這裡開了這幅畫。 586 00:26:01,500 --> 00:26:03,450 不必要地複雜化 看，但它 587 00:26:03,450 --> 00:26:07,880 介紹了一種叫做AJAX-- 異步JavaScript和XML，其中 588 00:26:07,880 --> 00:26:10,530 在X的XML實際上是 不再真正使用。 589 00:26:10,530 --> 00:26:13,430 它往往會使用的東西 其他所謂的JSON。 590 00:26:13,430 --> 00:26:16,560 >> 但這裡的東西怎麼樣 谷歌地圖或谷歌地球的工作。 591 00:26:16,560 --> 00:26:18,060 讓我們來試試這個上飛，其實。 592 00:26:18,060 --> 00:26:21,590 讓我繼續前進，打開 Chrome瀏覽器在我的瀏覽器。 593 00:26:21,590 --> 00:26:26,236 >> 讓我去成， 說，maps.google.com。 594 00:26:26,236 --> 00:26:29,260 595 00:26:29,260 --> 00:26:31,930 而實際上，如果你是老 夠記住什麼， 596 00:26:31,930 --> 00:26:35,600 像，MapQuest的樣子回到了一天， 也許他們仍然像這樣工作。 597 00:26:35,600 --> 00:26:38,870 當你使用搜索something-- 33牛津街，馬薩諸塞州劍橋市， 598 00:26:38,870 --> 00:26:40,650 讓我們做this--你 將實際上，如果 599 00:26:40,650 --> 00:26:43,000 要向上平移和 下，左，右， 600 00:26:43,000 --> 00:26:44,920 你會看起來像一個 在上面的大箭頭，它 601 00:26:44,920 --> 00:26:46,921 會告訴你另外一個 在地圖上的向上此處幀。 602 00:26:46,921 --> 00:26:49,753 或者您可以點擊離開你 會去到這裡，或再次點擊 603 00:26:49,753 --> 00:26:51,000 你會去在這裡。 604 00:26:51,000 --> 00:26:53,000 而是這些 天，我們當然只 605 00:26:53,000 --> 00:26:55,970 想當然地認為我們可以去 劍橋周圍很快 606 00:26:55,970 --> 00:26:57,550 只需點擊和拖動。 607 00:26:57,550 --> 00:26:59,130 但是請注意，有一些小問題。 608 00:26:59,130 --> 00:27:02,160 >> 如果我這樣做不夠快， 什麼似乎是發生 609 00:27:02,160 --> 00:27:05,960 我拖有點太快了 為計算機跟上？ 610 00:27:05,960 --> 00:27:07,160 你看到了什麼？ 611 00:27:07,160 --> 00:27:07,660 是啊。 612 00:27:07,660 --> 00:27:09,232 >> 聽眾：像素不刷新。 613 00:27:09,232 --> 00:27:10,940 DAVID J.馬蘭：本 像素不刷新。 614 00:27:10,940 --> 00:27:12,870 有actually--你 可以看到這一點，實際上， 615 00:27:12,870 --> 00:27:15,360 如果你看網上和暫停 這或實際會減慢速度 616 00:27:15,360 --> 00:27:18,600 為once--你會看到有 瓷磚，正方形，或矩形那 617 00:27:18,600 --> 00:27:22,040 從地圖上失踪，直到 一秒鐘後，更多的數據， 618 00:27:22,040 --> 00:27:24,390 更多圖片實際 出現在屏幕上。 619 00:27:24,390 --> 00:27:29,810 而事實上，如果我們做到這一點看 達Chrome's--讓我們說，Chrome-- 620 00:27:29,810 --> 00:27:30,310 讓我們來看看。 621 00:27:30,310 --> 00:27:31,090 我們不能這樣做。 622 00:27:31,090 --> 00:27:31,860 >> 哦，哎呦。 623 00:27:31,860 --> 00:27:34,761 讓我們打開maps.google.com。 624 00:27:34,761 --> 00:27:36,660 請允許我向窗口更大了。 625 00:27:36,660 --> 00:27:38,836 >> 回到33牛津街。 626 00:27:38,836 --> 00:27:42,010 627 00:27:42,010 --> 00:27:43,760 什麼是網站，我是在最近？ 628 00:27:43,760 --> 00:27:46,440 我有這個一樣，私人咆哮到 我自己，我會再即時消息 629 00:27:46,440 --> 00:27:48,470 任何朋友，誰是在線 誰想要聽到它。 630 00:27:48,470 --> 00:27:49,345 有一些網站。 631 00:27:49,345 --> 00:27:52,680 我認為這是Comcast--這樣 一個非常大的美國ISP。 632 00:27:52,680 --> 00:27:56,355 你可以註冊新的電纜時， 調製解調器服務或有線電視服務， 633 00:27:56,355 --> 00:27:59,230 他們有一個形式非常合理 他們問你為你的地址在哪裡。 634 00:27:59,230 --> 00:28:01,450 而有此驚人 功能叫做自動完成， 635 00:28:01,450 --> 00:28:04,600 像谷歌，啟動填補 在回答你的問題。 636 00:28:04,600 --> 00:28:08,090 >> 問題在於，他們做的自動完成 在您鍵入的第一件事情。 637 00:28:08,090 --> 00:28:12,890 所以如果你開始輸入33，它 從字面上會告訴你每個房子 638 00:28:12,890 --> 00:28:15,790 在美國啟動 用數字33 639 00:28:15,790 --> 00:28:17,920 繼續前 希望你能輸入更多。 640 00:28:17,920 --> 00:28:20,660 如果鍵入33牛津因此， 那麼就說明你的每一條街道 641 00:28:20,660 --> 00:28:24,726 在美國，有33牛津 它的名字，無論鎮 642 00:28:24,726 --> 00:28:25,350 你就能加入。 643 00:28:25,350 --> 00:28:26,320 >> 然後你繼續輸入。 644 00:28:26,320 --> 00:28:28,930 最後，它意識到，他們不 提供服務到您家在劍橋 645 00:28:28,930 --> 00:28:29,920 或者類似的東西。 646 00:28:29,920 --> 00:28:33,410 但問題是，這是最 愚蠢實現自動的 647 00:28:33,410 --> 00:28:34,140 完成過。 648 00:28:34,140 --> 00:28:36,400 >> 而我只是關閉 這個切了。 649 00:28:36,400 --> 00:28:39,040 但也有好方法 使用JavaScript和壞的方面。 650 00:28:39,040 --> 00:28:40,750 而這並不一定是最好的之一。 651 00:28:40,750 --> 00:28:46,360 >> 但這裡的問題，在此之前 長篇大論，就是在這裡開設了下來工具 652 00:28:46,360 --> 00:28:49,480 開放的開發工具， 正如我們之前的鼓勵， 653 00:28:49,480 --> 00:28:52,840 和觀看網絡 選項卡，單擊我的真快。 654 00:28:52,840 --> 00:28:55,400 並注意一大堆 弄的請求發生。 655 00:28:55,400 --> 00:28:57,310 所有這一切都發生了，因為我拖。 656 00:28:57,310 --> 00:29:00,170 >> 而最有可能的，確實 很多這些行 657 00:29:00,170 --> 00:29:04,060 現在圖像斜線JPEG MIME類型或內容類型。 658 00:29:04,060 --> 00:29:07,750 這是因為鉻是什麼做 我每次單擊並拖動，單擊 659 00:29:07,750 --> 00:29:11,650 和阻力，是它的實現，哦，我 需要去問問谷歌的瓷磚 660 00:29:11,650 --> 00:29:15,080 在地圖這是在這裡， 快速通過HTTP下載， 661 00:29:15,080 --> 00:29:19,550 然後將其添加到所謂的DOM 在存儲器樹的網絡瀏覽器 662 00:29:19,550 --> 00:29:24,430 表示，使得用戶 我看到了更新的瓷磚。 663 00:29:24,430 --> 00:29:26,795 這是因為 一個名為AJAX的技術。 664 00:29:26,795 --> 00:29:28,920 早在一天，它真的 是的情況下，如果 665 00:29:28,920 --> 00:29:33,050 想改變什麼在屏幕上， 你必須點擊上，下，左， 666 00:29:33,050 --> 00:29:33,550 對。 667 00:29:33,550 --> 00:29:34,740 然後一個新的頁面將打開。 668 00:29:34,740 --> 00:29:36,531 但這些天，一切都 更加動感。 669 00:29:36,531 --> 00:29:40,490 它發生的方式，我們人類會 希望它居然會以交互方式。 670 00:29:40,490 --> 00:29:43,210 它通過實現這 一種叫做方式 671 00:29:43,210 --> 00:29:46,170 AJAX，這也許是最好的 通過一個例子進行說明。 672 00:29:46,170 --> 00:29:49,730 首先，讓我繼續前進 並打開一個文件 673 00:29:49,730 --> 00:29:53,540 在名為quote.php 今天的分銷代碼。 674 00:29:53,540 --> 00:29:56,200 >> 然後讓我做symbol--哎呦。 675 00:29:56,200 --> 00:30:02,399 讓我做符號= GOOG 對於只是一些股票。 676 00:30:02,399 --> 00:30:04,440 或者其實，讓我們做的 一個來自處理器集免費的。 677 00:30:04,440 --> 00:30:05,270 輸入。 678 00:30:05,270 --> 00:30:06,580 >> 現在看到我回來。 679 00:30:06,580 --> 00:30:09,210 所以這是一個真正的 總之PHP文件，我 680 00:30:09,210 --> 00:30:13,210 寫了簡單的借用代碼 從Pset7的查找功能 681 00:30:13,210 --> 00:30:17,830 並吐出使用該花括號和 報價和冒號表示法，顯然， 682 00:30:17,830 --> 00:30:22,747 當前股票的價格 你通過GET傳遞公司。 683 00:30:22,747 --> 00:30:24,580 因此，這是不同的 大多數的我們已經 684 00:30:24,580 --> 00:30:26,496 在該通知，我做了 從字面上吐出 685 00:30:26,496 --> 00:30:27,870 什麼樣子的JavaScript代碼。 686 00:30:27,870 --> 00:30:30,020 >> 其實，這是一個JavaScript對象。 687 00:30:30,020 --> 00:30:34,130 其實，只是為了更​​清晰， Notation-- JSON-- JavaScript對象 688 00:30:34,130 --> 00:30:38,330 是說，你只是一個花哨的方式 可以表示在JavaScript中的數據太多 689 00:30:38,330 --> 00:30:41,660 就像你可以在PHP 使用鍵值對。 690 00:30:41,660 --> 00:30:44,270 所以，如果我想聲明 在JavaScript中的變量 691 00:30:44,270 --> 00:30:47,872 以代表Zamyla，為 instance--一個結構的Zamyla-- 692 00:30:47,872 --> 00:30:49,580 我們將調用它 學生，這個變量。 693 00:30:49,580 --> 00:30:53,060 她的ID是1，房子是 溫斯羅普，並將其命名為Zamyla。 694 00:30:53,060 --> 00:30:55,490 >> 但是，我也可以有對象的數組。 695 00:30:55,490 --> 00:30:58,710 所以，如果我真的想有 在JavaScript中包含數組 696 00:30:58,710 --> 00:31:01,740 多個這樣的目的，本 時間佔工作人員， 697 00:31:01,740 --> 00:31:04,910 我可能有這三個 代碼塊回 698 00:31:04,910 --> 00:31:08,560 以背對背這些 三名前職員。 699 00:31:08,560 --> 00:31:12,201 所以，語法，漂亮 類似both--到PHP。 700 00:31:12,201 --> 00:31:13,700 但是，這是特別的JavaScript。 701 00:31:13,700 --> 00:31:15,940 它的對象符號。 702 00:31:15,940 --> 00:31:17,240 那麼，這是什麼用呢？ 703 00:31:17,240 --> 00:31:21,580 >> 如果我寫的代碼，吐出JSON-- Notation--東西JavaScript對象的 704 00:31:21,580 --> 00:31:24,670 看起來是這樣或東西， 貌似Zamyla的結構， 705 00:31:24,670 --> 00:31:27,730 其實我可以用這個 在我的程序寫的。 706 00:31:27,730 --> 00:31:30,660 讓我去ajax0.html。 707 00:31:30,660 --> 00:31:33,310 這too--不多 的思想，賦予美感。 708 00:31:33,310 --> 00:31:34,660 不過，看會發生什麼。 709 00:31:34,660 --> 00:31:37,050 >> 讓我繼續前進，在此處鍵入免費。 710 00:31:37,050 --> 00:31:38,490 點擊獲得報價。 711 00:31:38,490 --> 00:31:41,060 和通知的URL並沒有改變。 712 00:31:41,060 --> 00:31:47,250 但我沒有得到一個彈出了明顯 今天的仙股的價格0.15美元。 713 00:31:47,250 --> 00:31:49,062 所以不是所有的壞。 714 00:31:49,062 --> 00:31:52,020 但不同的是，不知怎的， 這個數據回來我直接。 715 00:31:52,020 --> 00:31:54,250 但是，讓我們邁出了一步 東西比較熟悉。 716 00:31:54,250 --> 00:31:58,900 在一個版本中的這一點，讓我 免費再次鍵入，點擊獲取報價， 717 00:31:58,900 --> 00:32:01,146 和now--哦，這是 實際上jQuery的版本。 718 00:32:01,146 --> 00:32:03,270 因此，讓我 - 我沒有 快進很遠不夠。 719 00:32:03,270 --> 00:32:05,830 讓我去兩個版本， 這是我想要的。 720 00:32:05,830 --> 00:32:07,260 請注意，我在這裡所做的。 721 00:32:07,260 --> 00:32:10,370 我有一個Web page--超 任何簡單的網頁版 722 00:32:10,370 --> 00:32:14,260 你今天可能會使用與文本字段 這裡免費再顯然是剛剛 723 00:32:14,260 --> 00:32:14,880 文本。 724 00:32:14,880 --> 00:32:16,860 >> 這是不是在這裡的一種形式，顯然。 725 00:32:16,860 --> 00:32:19,360 但是，如果我點擊獲得 報價，請注意我的網頁 726 00:32:19,360 --> 00:32:22,760 即將改變，因為雖然我 剛剛得到一個新的即時消息 727 00:32:22,760 --> 00:32:25,360 或者，就像我剛才提出的 映射，需要獲得更多的數據 728 00:32:25,360 --> 00:32:29,220 動態添加到網頁 沒有URL變化和用戶 729 00:32:29,220 --> 00:32:30,980 經驗越來越中斷。 730 00:32:30,980 --> 00:32:35,750 事實上，我仍然在 完全相同的place-- ajax2.html。 731 00:32:35,750 --> 00:32:39,080 >> 因此，讓我們只能看一下這個例子 看看這是如何發生的。 732 00:32:39,080 --> 00:32:42,490 讓我進入ajax2.html。 733 00:32:42,490 --> 00:32:44,770 並首先注意到的形式。 734 00:32:44,770 --> 00:32:47,092 >> 到這裡，我翻 關閉自動完成。 735 00:32:47,092 --> 00:32:48,800 有時它得到 惱人的，如果瀏覽器 736 00:32:48,800 --> 00:32:50,508 試圖告訴你 你的整個歷史。 737 00:32:50,508 --> 00:32:53,450 所以，你可以做到這一點在HTML 只是說自動完成了。 738 00:32:53,450 --> 00:32:57,290 >> 我給這個文本字段 symbol--符號相反，一個ID。 739 00:32:57,290 --> 00:32:58,977 而現在，這是一個有趣的功能。 740 00:32:58,977 --> 00:33:01,310 我們還沒有談到跨度， 但你可以考慮一下 741 00:33:01,310 --> 00:33:03,177 就像一個段落標記或div標籤。 742 00:33:03,177 --> 00:33:05,010 這是什麼所謂的 在線元件，其 743 00:33:05,010 --> 00:33:07,415 意味著你不會得到一個段落 打破它上面和下面。 744 00:33:07,415 --> 00:33:11,530 它只是要繼續在網上無 按下回車鍵的等價物。 745 00:33:11,530 --> 00:33:17,980 所以我給這個區塊的HTML 要確定一個唯一的標識符 746 00:33:17,980 --> 00:33:20,130 我隨意叫價。 747 00:33:20,130 --> 00:33:21,560 我有一個提交按鈕。 748 00:33:21,560 --> 00:33:25,420 >> 因為現在起來這裡 - 這是 其實超級驚人的多麼少的代碼 749 00:33:25,420 --> 00:33:27,660 你可以寫做 比較整齊things-- 750 00:33:27,660 --> 00:33:31,800 發現我做了什麼在這裡，如果我 向上滾動到該頁面的頭部。 751 00:33:31,800 --> 00:33:34,970 我已經包括在第 我的頭一個腳本標籤 752 00:33:34,970 --> 00:33:37,410 實際上引用 其他地方的JavaScript文件。 753 00:33:37,410 --> 00:33:39,702 這是從組織 寫入jQuery的， 754 00:33:39,702 --> 00:33:42,660 而這僅僅是給你最新的 版本的jQuery庫。 755 00:33:42,660 --> 00:33:46,305 >> 因此，這是一種像鋒利 包括在C或需要在PHP。 756 00:33:46,305 --> 00:33:48,900 您可以使用腳本標記 與源屬性。 757 00:33:48,900 --> 00:33:52,030 但是現在我自己的代碼是 將是合適的在這裡。 758 00:33:52,030 --> 00:33:54,170 >> 請注意，我有一個功能叫做行情。 759 00:33:54,170 --> 00:33:56,180 它看起來有點 神秘的第一眼。 760 00:33:56,180 --> 00:33:57,305 但是，讓我們取笑這個分開。 761 00:33:57,305 --> 00:33:59,090 給我一個變量調用URL。 762 00:33:59,090 --> 00:34:01,390 從字面上給它分配此字符串。 763 00:34:01,390 --> 00:34:04,530 因此，單引號，雙引號 JavaScript的只是給了我一個字符串。 764 00:34:04,530 --> 00:34:06,900 什麼是加呢？ 765 00:34:06,900 --> 00:34:08,199 串聯。 766 00:34:08,199 --> 00:34:12,610 >> 所以這個現在是jQuery的語法 這需要一點時間來適應。 767 00:34:12,610 --> 00:34:18,310 但是，這只是意味著去把我的DOM 節點的唯一標識符是符號。 768 00:34:18,310 --> 00:34:21,929 包括hashtag有指 唯一標識符號。 769 00:34:21,929 --> 00:34:24,929 >> 在美元符號 圓括號只是意味著，這個包裹 770 00:34:24,929 --> 00:34:28,510 在jQuery的一種秘密武器，使 你會得到額外的功能。 771 00:34:28,510 --> 00:34:31,880 然後.VAL明顯 一個函數，或者像我們現在說的， 772 00:34:31,880 --> 00:34:35,219 該節點的內部的方法 這只是給你的價值。 773 00:34:35,219 --> 00:34:38,896 因此，在短期，醜陋和混亂 因為這第一眼看上去， 774 00:34:38,896 --> 00:34:42,020 這也就意味著與用戶輸入獲得 中，把它在字符串的結尾 775 00:34:42,020 --> 00:34:42,880 通過連接它。 776 00:34:42,880 --> 00:34:43,739 就這樣。 777 00:34:43,739 --> 00:34:46,070 >> 所以，現在，最後三行。 778 00:34:46,070 --> 00:34:48,690 你可以擠了很多 功能出了三條線。 779 00:34:48,690 --> 00:34:52,199 這個美元符號，作為一個 拋開，僅僅是一個綽號 780 00:34:52,199 --> 00:34:55,800 對於一個特殊的全局變量 所謂的字面上的jQuery。 781 00:34:55,800 --> 00:34:57,060 >> 美元符號只是看起來很酷。 782 00:34:57,060 --> 00:35:00,080 所以，jQuery社區正中下懷 使用它作為自己的特殊符號。 783 00:35:00,080 --> 00:35:02,470 這並不意味著這是什麼意思在PHP。 784 00:35:02,470 --> 00:35:06,356 在JavaScript中，美元符號 就像一個字母 785 00:35:06,356 --> 00:35:07,480 或一個數字的變量。 786 00:35:07,480 --> 00:35:09,000 >> 你可以把它作為名稱。 787 00:35:09,000 --> 00:35:09,770 只是看起來很酷。 788 00:35:09,770 --> 00:35:11,890 因此社會 採用它作為一個暱稱 789 00:35:11,890 --> 00:35:13,390 對於自己的圖書館被稱為jQuery的。 790 00:35:13,390 --> 00:35:15,060 >> 和它的超人氣。 791 00:35:15,060 --> 00:35:17,620 因此，獲得JSON正是如此。 792 00:35:17,620 --> 00:35:19,920 這是一個功能，該 在鄉親們寫的jQuery 793 00:35:19,920 --> 00:35:23,340 ，獲取JSON從server-- JavaScript對象表示法。 794 00:35:23,340 --> 00:35:25,680 從哪個網址是去 得到這些信息？ 795 00:35:25,680 --> 00:35:27,790 顯然，從這個網址在這裡。 796 00:35:27,790 --> 00:35:31,180 >> 又該瀏覽器做的 只要它回來這種反應？ 797 00:35:31,180 --> 00:35:36,500 這是AJAX的魔力，所以 speak--異步JavaScript的XML。 798 00:35:36,500 --> 00:35:41,320 很難看到這樣的 因為我們不得不在這裡簡單的例子。 799 00:35:41,320 --> 00:35:44,730 >> 但是，這是異步的 這個意義上，我的代碼時， 800 00:35:44,730 --> 00:35:48,530 執行發送一個消息到 服務器去給我拿一些JSON。 801 00:35:48,530 --> 00:35:51,340 和它發生了超快速 我得到了響應。 802 00:35:51,340 --> 00:35:55,130 但有趣的是，這 代碼行沒掛我的電腦。 803 00:35:55,130 --> 00:35:56,550 >> 我沒有看到一個旋轉圖標。 804 00:35:56,550 --> 00:35:59,200 我沒輸 能否將我的鼠標。 805 00:35:59,200 --> 00:36:01,340 我的瀏覽器實際上是完全正常的。 806 00:36:01,340 --> 00:36:06,290 >> 因為JavaScript的方式處理 來自服務器的響應如下。 807 00:36:06,290 --> 00:36:09,740 你註冊你叫什麼 一個回調函數，這 808 00:36:09,740 --> 00:36:12,830 只是意味著，哎，JavaScript的。 809 00:36:12,830 --> 00:36:16,100 只要服務器 回應JSON， 810 00:36:16,100 --> 00:36:18,750 請撥打這個匿名函數。 811 00:36:18,750 --> 00:36:23,910 >> 並請傳遞給這個函數 任何字符串服務器吐出 812 00:36:23,910 --> 00:36:26,080 作為參數調用數據。 813 00:36:26,080 --> 00:36:28,360 因此在另一方面，換句話說，如果 我動態組裝 814 00:36:28,360 --> 00:36:33,370 網址quote.php通過本 如免費或歌或諸如此類的東西的象徵， 815 00:36:33,370 --> 00:36:36,830 我再告訴 JavaScript的去把那個URL。 816 00:36:36,830 --> 00:36:39,080 請記住，瀏覽器 將要返回的東西 817 00:36:39,080 --> 00:36:42,680 看起來像我們先前已經看到了這一點。 818 00:36:42,680 --> 00:36:45,940 >> 什麼第二個參數 這裡獲取JSON是說 819 00:36:45,940 --> 00:36:48,450 在調用這個函數 當服務器回來 820 00:36:48,450 --> 00:36:52,440 無論是10毫秒 從現在開始，或從現在開始10秒。 821 00:36:52,440 --> 00:36:55,840 而且只要你做， 價格添加到頁面中。 822 00:36:55,840 --> 00:36:58,030 這種語法在這裡只是 手段去得到的節點 823 00:36:58,030 --> 00:37:01,940 從它的唯一的標識符的樹 是price--我們前面看到的跨度。 824 00:37:01,940 --> 00:37:04,320 >> 這種方法稱為HTML 只是說，去取代 825 00:37:04,320 --> 00:37:08,770 在HTML中的存在與data.price。 826 00:37:08,770 --> 00:37:10,200 什麼是data.price？ 827 00:37:10,200 --> 00:37:12,850 好了，瀏覽器，還記得， 我看了這回來了。 828 00:37:12,850 --> 00:37:14,540 因此，這是數據。 829 00:37:14,540 --> 00:37:18,100 >> 所以這是一個有點神秘 看到這裡的逗號。 830 00:37:18,100 --> 00:37:19,350 但事實上，讓我做到這一點。 831 00:37:19,350 --> 00:37:22,890 我只是複製粘貼此 真正的快速進入gedit中 832 00:37:22,890 --> 00:37:27,240 並出示此類似，我們發現 Zamyla的結構更早。 833 00:37:27,240 --> 00:37:31,610 >> 什麼是服務器發送回一個 小物體，看起來像這樣。 834 00:37:31,610 --> 00:37:37,140 所以data.price是 只是給我0.1515。 835 00:37:37,140 --> 00:37:39,310 所以很多移動 這裡的部分全部一次。 836 00:37:39,310 --> 00:37:41,860 >> 但關鍵是外賣 我們有這個能力 837 00:37:41,860 --> 00:37:44,600 作出額外的HTTP 使用JavaScript請求 838 00:37:44,600 --> 00:37:46,090 而無需重新加載頁面。 839 00:37:46,090 --> 00:37:49,580 然後我們就可以真正 在運行中改變網頁。 840 00:37:49,580 --> 00:37:51,850 而事實證明， JavaScript和其他語言 841 00:37:51,850 --> 00:37:54,510 現在可以使用不僅 變異的網頁， 842 00:37:54,510 --> 00:37:57,960 但實際編寫軟件 在實際的計算機， 843 00:37:57,960 --> 00:38:00,240 不只是局限在Chrome瀏覽器等。 844 00:38:00,240 --> 00:38:03,530 >> 事實上，if--科爾頓，你會 想加入我們回到了這裡 845 00:38:03,530 --> 00:38:06,100 與您的實驗室代碼，暢呢？ 846 00:38:06,100 --> 00:38:09,140 讓我們繼續前進，已經談了 匿名函數和回調 847 00:38:09,140 --> 00:38:13,090 而真的在這裡鋌而走險 有現場演示出血 848 00:38:13,090 --> 00:38:16,480 尖端技術，其中一個 這些精英運動設備。 849 00:38:16,480 --> 00:38:18,940 現在，這個設備，召回， 是一個小的USB設備 850 00:38:18,940 --> 00:38:25,620 還有that--這是beautiful-- ，可插入到您的USB端口。 851 00:38:25,620 --> 00:38:29,120 >> 然後它提供了輸入 在人體手勢的形式 852 00:38:29,120 --> 00:38:32,560 通過使用紅外光束探測， 實際上，從你的手臂動作。 853 00:38:32,560 --> 00:38:35,150 因此而有什麼瑪麗亞嘗試 之前是肌肉， 854 00:38:35,150 --> 00:38:39,000 實際上感覺什麼變化 你的手臂，這是基於紅外的。 855 00:38:39,000 --> 00:38:44,390 因此，在尋找中移動 一英尺左右的球的種類 856 00:38:44,390 --> 00:38:46,190 裝置自身的。 857 00:38:46,190 --> 00:38:48,950 >> 那麼，為什麼不讓我走 刺在這首？ 858 00:38:48,950 --> 00:38:53,100 讓我們繼續前進，扔 您在這裡的開銷。 859 00:38:53,100 --> 00:38:56,250 所以，讓我們把科爾頓的筆記本電腦在這裡。 860 00:38:56,250 --> 00:38:58,360 我們已經得到了安德魯在電視上。 861 00:38:58,360 --> 00:39:00,160 那你想我首先做什麼？ 862 00:39:00,160 --> 00:39:02,409 >> COLTON：來吧，只是 把你的手過這個傢伙 863 00:39:02,409 --> 00:39:04,430 你會看到一些神話般的閃閃發光。 864 00:39:04,430 --> 00:39:07,230 >> DAVID J.馬蘭：很不錯的。 865 00:39:07,230 --> 00:39:11,110 這一切都發生在實時。 866 00:39:11,110 --> 00:39:11,889 行。 867 00:39:11,889 --> 00:39:12,680 沒事了，是的。 868 00:39:12,680 --> 00:39:14,119 這麼好看。 869 00:39:14,119 --> 00:39:15,410 好吧，我們還能做什麼？ 870 00:39:15,410 --> 00:39:17,900 >> COLTON：轉到下一屏幕看。 871 00:39:17,900 --> 00:39:19,136 >> DAVID J.馬蘭：好吧。 872 00:39:19,136 --> 00:39:21,780 >> COLTON：一個有趣的小遊戲 你在哪裡得到，使機器人。 873 00:39:21,780 --> 00:39:24,738 >> DAVID J.馬蘭：好吧，所以這 是假的手帶我該怎麼做。 874 00:39:24,738 --> 00:39:27,920 COLTON：是的，所以還是提前 並抓住其中一個塊 875 00:39:27,920 --> 00:39:30,637 並把它放在了機器人的身體之上。 876 00:39:30,637 --> 00:39:32,137 DAVID J.馬蘭：哦，還有我的手。 877 00:39:32,137 --> 00:39:34,000 呵呵。 878 00:39:34,000 --> 00:39:34,780 OK，可愛。 879 00:39:34,780 --> 00:39:37,500 880 00:39:37,500 --> 00:39:38,650 等待一分鐘，OK。 881 00:39:38,650 --> 00:39:41,320 在那裡，我們走了。 882 00:39:41,320 --> 00:39:43,590 >> COLTON：我做了一個事故。 883 00:39:43,590 --> 00:39:45,423 >> DAVID J.馬蘭：好的，我會得到這個傢伙。 884 00:39:45,423 --> 00:39:45,923 該死的！ 885 00:39:45,923 --> 00:39:48,467 886 00:39:48,467 --> 00:39:51,550 當我們練習這最後 晚上，你知道這是什麼演化成？ 887 00:39:51,550 --> 00:39:54,285 >> 像這樣。 888 00:39:54,285 --> 00:39:55,490 行。 889 00:39:55,490 --> 00:39:55,990 下一個？ 890 00:39:55,990 --> 00:39:56,860 >> COLTON：當然。 891 00:39:56,860 --> 00:39:58,818 >> DAVID J.馬蘭：好吧， 並有三分之一。 892 00:39:58,818 --> 00:40:01,130 893 00:40:01,130 --> 00:40:01,674 行。 894 00:40:01,674 --> 00:40:03,215 COLTON：而在這其中，你會得到to-- 895 00:40:03,215 --> 00:40:04,923 DAVID J.馬蘭：哦， 這個美麗的。 896 00:40:04,923 --> 00:40:06,650 COLTON：--yeah，挑除這種花。 897 00:40:06,650 --> 00:40:07,441 DAVID J.馬蘭：OK。 898 00:40:07,441 --> 00:40:11,170 899 00:40:11,170 --> 00:40:11,670 不是嗎？ 900 00:40:11,670 --> 00:40:14,515 錯過了。 901 00:40:14,515 --> 00:40:15,570 >> COLTON：哦，你去那裡。 902 00:40:15,570 --> 00:40:18,680 >> DAVID J.馬蘭：啊，你看那個。 903 00:40:18,680 --> 00:40:19,830 很不錯。 904 00:40:19,830 --> 00:40:22,470 那麼，為什麼不'，我們取 在這裡一位志願者 905 00:40:22,470 --> 00:40:24,180 誰願意高達來吧。 906 00:40:24,180 --> 00:40:27,500 如何正確的有 在綠色，是嗎？ 907 00:40:27,500 --> 00:40:30,540 >> 好吧，讓我們have-- 而不是這樣做，你們中的一些 908 00:40:30,540 --> 00:40:34,590 可能知道這場比賽這裡 - 切斷繩子，也許？ 909 00:40:34,590 --> 00:40:35,100 讓我們來看看。 910 00:40:35,100 --> 00:40:37,320 我們有我們的眼鏡在這裡？ 911 00:40:37,320 --> 00:40:38,625 >> 行。 912 00:40:38,625 --> 00:40:39,270 謝謝。 913 00:40:39,270 --> 00:40:39,380 你叫什麼名字？ 914 00:40:39,380 --> 00:40:40,350 >> 聽眾：勞拉。 915 00:40:40,350 --> 00:40:41,266 >> DAVID J.馬蘭：勞拉？ 916 00:40:41,266 --> 00:40:42,120 很高興見到。 917 00:40:42,120 --> 00:40:45,600 如果你不介意把 谷歌玻璃上你的眼鏡。 918 00:40:45,600 --> 00:40:46,970 這是科爾頓。 919 00:40:46,970 --> 00:40:47,650 >> COLTON：你好。 920 00:40:47,650 --> 00:40:48,140 很高興認識你。 921 00:40:48,140 --> 00:40:49,600 >> DAVID J.馬蘭：OK，來吧左右。 922 00:40:49,600 --> 00:40:52,516 好吧，那麼你要什麼 在這裡做的，之前已經玩過這個， 923 00:40:52,516 --> 00:40:55,650 是將手放在 大躍進運動在這裡。 924 00:40:55,650 --> 00:40:57,210 現在你應該箭頭移動。 925 00:40:57,210 --> 00:40:57,710 呵呵，沒了。 926 00:40:57,710 --> 00:40:58,066 >> 聽眾：沒有。 927 00:40:58,066 --> 00:40:58,780 >> DAVID J.馬蘭：我們 不想放棄呢。 928 00:40:58,780 --> 00:40:59,280 OK，等待。 929 00:40:59,280 --> 00:41:01,200 在這裡。 930 00:41:01,200 --> 00:41:03,530 所以，看到你抱著你 手指上的東西， 931 00:41:03,530 --> 00:41:06,750 鼠標開始走向綠色， 這是怎麼點擊。 932 00:41:06,750 --> 00:41:08,980 >> 因此，將鼠標懸停在玩。 933 00:41:08,980 --> 00:41:10,970 而就在一個手指的罰款。 934 00:41:10,970 --> 00:41:13,869 現在點擊小 綠色的傢伙在左側。 935 00:41:13,869 --> 00:41:15,410 現在持有，直到它填補了綠色。 936 00:41:15,410 --> 00:41:15,640 不錯。 937 00:41:15,640 --> 00:41:16,990 現在一樣，一個級別之上。 938 00:41:16,990 --> 00:41:20,190 >> 聽眾：是的，我們想要一個級別，在這裡。 939 00:41:20,190 --> 00:41:21,660 >> DAVID J.馬蘭：好。 940 00:41:21,660 --> 00:41:25,500 好了，你有 做的是割繩子。 941 00:41:25,500 --> 00:41:28,240 光標是白茫茫的一片出現了下滑。 942 00:41:28,240 --> 00:41:28,880 >> 很不錯。 943 00:41:28,880 --> 00:41:31,290 944 00:41:31,290 --> 00:41:32,790 好吧，這是即將會更加困難。 945 00:41:32,790 --> 00:41:34,800 所以，把你的手指在接下來的現在。 946 00:41:34,800 --> 00:41:37,370 947 00:41:37,370 --> 00:41:39,030 不錯。 948 00:41:39,030 --> 00:41:39,999 這其中的辛苦。 949 00:41:39,999 --> 00:41:40,966 >> 聽眾：哦，廢話。 950 00:41:40,966 --> 00:41:41,466 行。 951 00:41:41,466 --> 00:41:42,466 它希望走那條路。 952 00:41:42,466 --> 00:41:44,890 呵呵廢話，that-- 953 00:41:44,890 --> 00:41:47,120 >> DAVID J.馬蘭：是啊。 954 00:41:47,120 --> 00:41:50,700 第二個目標是讓所有的星星。 955 00:41:50,700 --> 00:41:53,920 好吧，接下來。 956 00:41:53,920 --> 00:41:57,504 >> 讓我們來看看，如果你能得到這個第三個。 957 00:41:57,504 --> 00:41:58,004 不錯。 958 00:41:58,004 --> 00:42:05,980 959 00:42:05,980 --> 00:42:06,840 好了，到那邊去。 960 00:42:06,840 --> 00:42:08,850 >> 當然可以。 961 00:42:08,850 --> 00:42:11,230 呵呵，很不錯。 962 00:42:11,230 --> 00:42:11,930 行。 963 00:42:11,930 --> 00:42:13,534 >> 那麼，我們為什麼不今天休會？ 964 00:42:13,534 --> 00:42:15,200 讓任何人上來吧誰願意玩。 965 00:42:15,200 --> 00:42:16,880 非常感謝勞拉我們的志願者。 966 00:42:16,880 --> 00:42:18,730 我們會看到你在星期一。 967 00:42:18,730 --> 00:42:21,190 >> 聽眾：你可能想這些了。 968 00:42:21,190 --> 00:42:23,640 >> 揚聲器2：在接下來的CS50-- 969 00:42:23,640 --> 00:42:35,222