DAVID J.馬蘭：好吧， 所以這是這裡的繆手臂 帶內，一對夫婦，其中我們 有CS50最終項目。 而這是一個演示中，我們排隊 您事先根本所在 這個相當緊臂帶在這裡 聽你的肌肉運動 這將被映射軟件 以科爾頓的筆記本電腦在這裡它 有iTunes和那 歌已經排隊。 而不是我演示該這樣， 科爾頓一直在實驗室 顯然整個星期得到一個示範 準備好一個勇敢的志願者。 如果有人想進來 在up--第一次看到你的手。 上來吧。 [00:01:09] 行。 而你叫什麼名字？ [00:01:13] 聽眾：呃，瑪麗亞。 [00:01:14] DAVID J.馬蘭：瑪麗亞，很高興見到你。 快點看過來。 讓我來給你介紹科爾頓。 科爾頓，這是瑪麗亞。 [00:01:21] COLTON：你好，很高興見到你。 [00:01:23] DAVID J.馬蘭：全部 對，所以第一步，我們 要你放 這對你的前臂 因此，它是相當 緊了靠近你的肘部。 而與此同時，讓我們 把我們的谷歌玻璃 而我們今天將混合技術。 [00:01:33] COLTON：首先我們得 鉤到東西了。 [00:01:36] DAVID J.馬蘭：OK。 其實，讓我們把你的手臂 接近該電纜盡可能 這樣我們就可以先同步起來。 [00:01:41] COLTON：讓我們做到這一點。 [00:01:42] DAVID J.馬蘭：而與此同時，這樣 每個人都可以得到一個更接近一目了然， 我們折騰安德魯的攝像頭 在屏幕上出現。 因此，我們有一個USB電纜的 被插入到瑪麗亞的袖標。 讓我折騰科爾頓的屏幕 旁邊的投影機。 [00:02:00] 因此，科爾頓被註冊設備 現在的繆連接到該電纜。 現在什麼超群 要做到瞬間 實際上是通過走 校準步驟 並教軟件 怎麼她的肌肉反應 當她做出一定的預先定義的 手勢軟件的理解。 如果你想進去 前面的屏幕。 OK，繼續努力。 [00:02:30] COLTON：進入這個樣子。 和這樣的。 和一路的權利。 回去。 [00:02:35] DAVID J.馬蘭：OK。 不同的觀點。 這不是你的。 這是我們的。 [00:02:40] 瑪麗亞：OK。 DAVID J.馬蘭：沒有。 讓我們將它更高的，所以這是 接近你的胳膊肘，甚至更緊。 行。 [00:02:52] 開始了。 這將是一個很好的時間CS52X。 在那裡，我們走了。 [00:02:57] 很不錯。 行。 拇指到小指。 [00:03:02] 很不錯。 傳播你的手指。 不錯。 波權利。 它好奇地顯示 你與左hand-- [00:03:17] COLTON：是啊，這是奇怪的。 DAVID J.馬蘭：波 右，向前邁進。 快進跳過或者明年。 這是確定的波權利。 [00:03:25] 瑪麗亞：我don't--等待。 [00:03:26] DAVID J.馬蘭：需要幫忙嗎？ [00:03:28] COLTON：所以你會喜歡這個。 瑪麗亞：它的轉動 其他的事情，雖然。 COLTON：是的。 DAVID J.馬蘭：是的，我不知道 為什麼它向你展示一個leftie。 COLTON：你為什麼不try-- 只是嘗試去這樣。 [00:03:38] DAVID J.馬蘭：沒有？ 也許到達你的手臂 出一點直 並使其更突然這樣。 是啊，好，來吧。 [00:03:48] 瑪麗亞：對不起。 DAVID J.馬蘭：這不是你的錯。 COLTON：它的罰款。 DAVID J.馬蘭：好的。 Well-- [00:03:56] 瑪麗亞：我們應該跳過這個，然後呢？ DAVID J.馬蘭：是的，讓我們 讓你擺脫困境。 因此，如果有人想辦一個 使用這種尖端最終項目 硬件，實現它可能只是 需要一點時間來適應。 和this--現實就是如此 其實是很前沿的。 [00:04:10] 這就是被稱為 該開發工具包，其中 意指基本上預發布 使人們可以做完全 this--與它對抗，圖 如何人的身體工作 隨著技術的發展。 所以，如果你想 事後，演講結束後， 我們可以讓你來 採取另一種刺吧。 但除此之外，掌聲雷動，如果 我們可以，瑪麗亞·達來臨。 [00:04:26] 瑪麗亞：謝謝你。 [00:04:28] DAVID J.馬蘭：謝謝。 我們會掛到這一點，但我們會給 你 - 怎麼樣一個壓力球嗎？ 哦，還有 - if--是的，謝謝。 行。 所以對於好奇的，如果你是 熟悉的聲音的選擇 我們有做 早些時候，一個驚人的電視 說明你絕對應該 是狂歡，觀看Netflix上 這是一個在這裡。 [00:04:51] 揚聲器1：女士們，先生們， 一個名為喬希魔術師。 [00:05:04] DAVID J.馬蘭：而且很顯然，這是 事到如今講課時給我發短信。 我被告知，瑪麗亞 過了一個生日昨天。 從這麼生日快樂 CS50瑪麗亞為好。 [00:05:18] 所以，你可能已經讀過，最近一個月 這個紳士在這裡，史蒂夫 鮑爾默，誰是真正 在大專班1977年， 剛剛退休的微軟。 他是一個本科生在這裡， 那麼幾年後 發現自己 斯坦福大學商學院 當他接到一個電話 從他誰的朋友打電話 一直住在大廳 從他在哈佛。 那朋友的名字是比爾 門，在當時， 他試圖招募史蒂夫是 第一筆生意的人，真的， 在一家小公司微軟的名字。 [00:05:45] 長話短說，史蒂夫 最終被征服了， 加盟微軟時，他們 剛剛30名員工。 和的時候，他 退休最近， 該公司擁有100,000名員工 在過去的幾年裡。 所以一個網站稱為邊緣 編制本致敬視頻 我們認為我們會 共享，讓你 到底有多少能量史蒂夫感 帶來任何表示，他帶來的。 [視頻回放] - 微軟就像一個第四個孩子。 孩子做離開家。 在這種情況下，我猜 我離開了家。 嘿，比爾，whazzap？ [00:06:23] -Wazzap？ [00:06:24] - 嘿，wazzap？ 我們已經給出了 巨大的機會。 和比爾給了我們這樣的機會。 我要感謝比爾為。 我要你了。 創新的步伐 不會放緩。 [00:06:42] 它會變得越來越快。 可能有幾個競爭者 那些不幸被淘汰！ [00:06:54] 我喜歡這家公司。 是的！ 我是一台PC，我喜歡這家公司！ [00:07:08] 開發者，開發者，開發者， 開發者，開發者，開發者， 開發者，開發者。 是的！ Web開發人員！ [00:07:19] Web開發人員！ Web開發人員！ 聽什麼你 得到不收取額外費用！ [00:07:28] 在MS-DOS執行，預約 壓延機，卡堆，一個記事本， 一個時鐘，一個控制面板。 而且，你能相信嗎？ Reversie！ [00:07:35] 它們刻錄到CD！ 它們發布到MSN！ 你郵寄給朋友！ [00:07:40] 所有與點擊！ 一個微軟，一種策略，一是team-- 專注，紀律，專業， 和專家在所有我們做的。 讓我用一條線從一部老電影。 [00:07:52] 關係就像鯊魚。 他們前進或者死亡。 其實，我覺得高科技 公司是相同的。 [00:08:01] [完視頻回放] DAVID J.馬蘭：所以我們是如此高興 宣布，史蒂夫將加入我們 在這裡CS50下週三 平時的地點和時間在這裡。 空間可能是有限的。 所以我們一起的人，請 今天頭或此後不久， 到cs50.harvard.edu/register。 [00:08:22] 我們將跟進 週二確認點。 期待，明年 講座在CS50在週三。 現在，在等消息，我偶然 遇到這樣的絳只是 有一天。 [00:08:34] 事實證明，CS50的工作人員之一 和CS50的學生至少有一個 目前正在運行UC 總統和副總統， 這把我帶回 我自己回天 當我失去了悲慘的UC選舉。 但一線希望 在這是我一直 講故事是， 對我的一個肯定 很多原因，我失去了 選舉是完全缺乏 對人才的公開演講。 因此坦白地說，這 開車送我，那段經歷 我覺得我大三，實際簽約 彌補哈佛大學計算機協會， 是該集團在校園的 擁有各種技術講座 和其他的東西。 我接手他們的教學 研討會因此 有一個機會，一個 難得的機會， 開始工作的正是這一點。 但同時，我有機會 在這方面的經驗 教自己更加HTML。 所以，我昨天晚上被一拖再拖 翻翻基於HTML的網站 我做了像1997年，1998，我的 活動看起來像這樣在這裡。 我知道。 [00:09:29] 因為 - 當然，預告 在1998年這個驚人的設計決策 或諸如此類的東西。 你想的第一件事用戶 做在訪問您的網站 是必須點擊另一個鏈接只是 在這裡輸入你的網站與和尚 後面像籠罩在哪裡帷幕 顯然我的競選綱領是。 而這一切，你會得到 今天只是一個截圖。 但我讀通過一樣， 我的競選昨晚海報 我的平台。 [00:09:50] 我很生氣的時候。 我的平台was--很有意思。 所以我從那以後平靜下來。 但總有一天，我會再次運行， 希望最好這個時候。 [00:10:03] 所以HTML，我在其中所做的語言 這in--你很快就會太大的緩慢 - 是我們一直 談到後期 並在很大程度上服用理所當然現在 我們已經轉移到其他語言。 但是，讓我們停下來就一下 把其中的一些東西融會貫通。 所以，在一個句子裡，HTML是什麼？ [00:10:18] 或者說，是用來做什麼的呢？ 任何人嗎？ 是。 [00:10:20] 聽眾：標記的網站。 DAVID J.馬蘭：標記的網站。 因此，它是一種標記語言， 可以讓你構建一個網頁。 頭去在這裡，標題 放在這裡，身體放在這裡。 這是黑體字，這是 italics--之類的細節。 [00:10:33] OK，好。 所以，CSS可以讓你 - 和我 採取了一些有自由 與大膽的面向和斜體，因為 這是更好地與這個實現的。 CSS is--什麼？ 說，在一個句子裡。 任何人都沒有。 是啊。 [00:10:46] 聽眾：裝飾和 的東西，想怎麼設計它。 DAVID J.馬蘭：好，好。 裝飾，讓您 設計它，或者它風格化 與諸如黑體和 斜體和顏色也更精細 元素的細粒度定位。 排序它可以讓你把東西 最後一英里，這樣，如果，例如 在Pset7，你可能已經注意到你的 投資組合頁面，如果你在這一點上 已經是默認的表，你 使顯示給用戶的持股 和現金可能看起來很醜陋 默認情況下，沒有空格。 一切的那種臨時抱佛腳 一起以行和列。 [00:11:18] 好了，有一點點 CSS，你可以實現， 你其實可以調整的，並使其 一些更熟悉的多 漂亮看看。 所以CSS是關於 風格化的網站。 但是，我們引入了另一個 語言，PHP，這讓我們怎麼辦？ [00:11:36] 我們只是做了什麼？ 任何人。 有冒險超越 前幾行。 是啊。 [00:11:40] 聽眾：生成動態內容。 DAVID J.馬蘭：完美。 生成動態內容。 你可以這樣做 任何數目的語言。 我們碰巧使用PHP，因為它是 在欄目等類似C的語法。 [00:11:50] 但是PHP正是這麼做的。 它可以讓你動態生成的輸出。 有的認為產出可能 HTML，因為我們通常在做。 而且，這也是因為它的 一種編程語言，是 通過該機制 我們可以跟數據庫。 [00:12:03] 我們可以查詢到 其他服務器，如雅虎 並以編程方式做任何事情 真的，你可能會以其他方式 要強迫電腦做。 所以，PHP讓我們開始 動態輸出內容。 因此，通過這樣的邏輯，我沒有 一個動態的網站早在1998年。 [00:12:16] 這只是一個靜態的網頁。 我的內容必須由改變 用gedit或者一些等價手動。 但是PHP也就是我們使用或 也可以使用，而是 這樣的事情了 即時的新生網站， 應該採取登記和 管理users--的事情的列表 實際上切換 時間，儘管我們碰巧 使用Perl，不同的 在當時的語言。 [00:12:35] 然後最後，我們介紹 SQL--結構化查詢語言。 因此，另一種語言 這是用來做什麼的？ 用於什麼？ 我們可以大膽slight-- OK，我們不會 獲得更遠 比這裡的樂團。 聽眾：這是一個協議 用於跟數據庫。 DAVID J.馬蘭：協議 用於跟數據庫。 讓我調整。 它使用的自然語言 談談databases--選擇 並插入和刪除 更新和實際 甚至更多的功能是 我們甚至還沒有跌 成，但您可能希望explore--有 探索，比方說，一個最終的項目。 因此，有這些不同的部分。 [00:13:09] 並希望Pset7，即使 其規格是相當長的， 這是故意長走你 通過這些事情怎麼能都 鍵入在一起。 現在，在星期一，我們 介紹了我們最後的語言 我們將正式引入 該course--就是JavaScript的。 這，像PHP，是一個 解釋語言。 [00:13:25] 但一個關鍵的區別 我建議在週一 是，而PHP是執行或 被解釋的服務器，在其上 在這種情況下是CS50器具， 或可能是一些商業網站 服務器在互聯網上， 一般的JavaScript 是運行客戶端的語言 沒有服務器side--那麼在瀏覽器中。 這是說，就像當我打開 了Facebook的源代碼，發現所有 這些的.js文件中，隱含著 當您訪問Facebook或最 網站的這些日子裡，你會得到 不僅是HTML，不僅CSS， 但一大堆的JavaScript 常在的.js文件的形式編碼。 然後它的browser--自己 蘋果或PC--一個執行該代碼。 [00:14:03] 但是，您的瀏覽器執行。 你能想到的那種沙箱中。 使JavaScript代碼不應該是 能夠刪除計算機上的文件。 它不應該能夠 以您的名義發送電子郵件。 您的瀏覽器種類的限制 你可以用它做什麼。 [00:14:17] 因此，在這個意義上說，這是一個有點 那麼強大，或許比C. 但JavaScript可以作為 一邊，在服務器上使用， 雖然我們傾向於不說話 它在這方面。 所以，現在讓我們一起把這些。 一個星期加前，我們提出了一些HTML 在lef​​t--超級無聊的網頁。 [00:14:34] 只是打招呼的世界。 然後我提出的 右側我們可以種偷的想法 從我們的討論 數據結構，C語言 並思考如何分級 在左邊的標記語言 可以得出，或在存儲器中實現 作為一個實際的樹結構的節點 和指針和這些類型的細節。 在右邊，我們稱之為 一個DOM--文檔 反對型號 - 這僅僅是 說法一樹奇特的方式。 [00:14:56] 現在，這是為什麼有用 認為它以這種方式？ 因為現在有 JavaScript的，因為我們有 那在得到這個打碼 環境，實際的HTML那 被發送給瀏覽器 已經具有已 被加載到存儲器的 瀏覽到您的計算機中的一棵樹 這樣的內存，我們可以使用JavaScript 實際遍歷或步行或搜索 或更改DOM樹然而，我們想要的。 所以，事實上，如果你認為 關於facebook.com， 如果您使用聊天功能，如果你 使用Gmail和谷歌聊天軟件的功能， 什麼，你必須 消息來連連 又一次，這些消息可能是， 像李標籤，列表項的標籤，也許。 [00:15:35] 或者，也許他們只是 那不斷出現的di​​v 每次你得到一個即時消息。 因此，僅僅意味著什麼 Facebook或谷歌正在做 在任何時候你得到一個 來自服務器的消息， 他們可能使用JavaScript 只需添加另一個節點 這tree--另一個節點這一 樹則在視覺上看起來只是 喜歡的文字在屏幕上一個新行。 但他們插入 這個數據結構。 [00:15:57] 因此，在這樣的類 CS124和其他人，你會 其實對寫更多的代碼 數據結構是這樣的。 但是現在在JavaScript中， 我們姑且 我們得到了所有這些功能 免費從語言本身。 因此，讓我們來看一個例子。 [00:16:09] 讓我打開一個名為form.html文件。 這是超級簡單。 它只是看起來像這樣。 [00:16:15] 沒有CSS，沒有想到美學。 這是純粹的功能 顯然我 請求的電子郵件，密碼 再次輸入密碼，然後檢查 同意某些條款和條件。 什麼此源代碼 看起來可能是什麼 你可能有一個猜測 現在花點心思位。 我有一個表單標籤在這裡。 [00:16:32] 動作顯然是要 去一個名為register.php文件。 我將使用的方法是搞定了。 然後我有一個文本 現場，其名稱是電子郵件。 [00:16:40] 我有一個密碼字段 他的名字是密碼。 我有另一個 密碼字段的名字 是有點任意的確認。 這只是一個HTTP參數。 [00:16:49] 然後我們我們不只是用這些 由於即時消息的新生演示中class-- 複選框是 只需鍵入等於檢查。 我會打電話給該協議。 所以我有種隨意，但 方便的命名這些字段。 所以現在，當這種形式得到 提交後，讓我們看看會發生什麼。 如果我做malan@harvard.edu， 我會做緋紅的密碼。 我會做的任何密碼。 讓我們不要合作。 [00:17:10] 我不會選擇該複選框。 讓我點擊註冊。 它說，嗯，你註冊。 並不是的。 [00:17:16] 但是URL改變。 因此，這種形式顯然是允許 提交register.php。 但據推測，應該是我 捕捉一些錯誤。 現在，在Pset7和一些 我們講的例子， 我們通常會打印出 大紅色的錯誤信息在這裡 他說，失踪的名字， 或丟失密碼。 我們已經做到這一點之前，我們已經 做完服務器端錯誤檢測。 [00:17:37] 但是很多網站這幾天 做客戶端的錯誤檢測 其中的URL不改變。 整個頁面不會刷新。 你得到即時的反饋 從瀏覽器。 也許出了紅色。 [00:17:48] 也許你會得到一個彈出。 但是，你不要浪費時間發送到 服務器數據是不完整的。 因此，讓我們看看如何可能 實現這一功能也是如此。 [00:17:56] 讓我去form1.html， 這看起來是相同的。 但是，如果這次我做的 malan@harvard.edu和I型深紅色 我不進一步合作 但點擊註冊，現在發現。 這不是最性感的解決方案。 我至少抓住了這個錯誤。 而且我用警報 在JavaScript--功能 而我們只用在課堂上。 一般情況下，你不應該使用這個 因為它可以非常迅速地得到了 的控制權。 但密碼不匹配的錯誤。 [00:18:19] 讓我繼續前進，然後單擊確定。 但這裡的關鍵外賣 是該URL不改變。 所以，我不打擾浪費 服務器的時間要求它 一個問題，我可以有 想出答案來嘍。 [00:18:30] 和用戶，即使 在談論這個 不是用戶的長 要想一想， 都將有即時的反饋。 有沒有潛伏期 網絡連通性。 因此，讓我們看一下這個源代碼。 [00:18:40] Form1.html外觀 結構相似的在這裡。 的形式實際上是相同的。 但是，讓我們看看我在這裡做下去。 並有不同的方法來做到這一點。 我已經做了最直接 跟隨器，但不是最優雅的方式呢。 我有一個腳本標籤。 然後我打電話 的document.getElementById（'登記'）。 我保存的值 在形式上，一個變量。 [00:19:04] 所以我做了什麼？ 你能想到的 的document.getElementById作為是 一個特殊函數 JavaScript的給你 從字面上給你一隻 指針指向的節點之一 或矩形此樹。 所以，現在這就是我們的表單變量 在JavaScript中實際上是指向。 [00:19:21] 所以，現在的語法不同 C.但我們正在做的一些事情在這裡。 一，這個人是有點怪 看，肯定與C. 但看35行。 因此，在左邊form.onsubmit。 回想一下，是的onsubmit 就像在一個結構中的字段。 如果你覺得表單變量 只是作為一個C結構， 它可能具有某些字段。 [00:19:42] 早在一天，我們有學生姓名， 身份證，房屋，這些類型的字段。 試想想的onsubmit作為另一個領域。 但它是一個特殊的領域，因為 瀏覽器預編程期待 .onsubmit到不是一個值 象的數字或字符串 但實際上是一個函數 或一個函數的地址 在計算機的存儲器中。 [00:20:02] 事實上，這就是 這個關鍵字在這裡呢。 這是說，給我一個新的功能。 但是，什麼是它的名字 將是顯然？ [00:20:09] 遙想到星期一。 什麼是這個名字 在此基礎上的語法功能？ 不，我的意思是，有明確 沒有名字肯定associated-- 不是我在這裡強調。 [00:20:21] 但是，這實際上確定。 這是一個匿名函數，或一個 lambda函數的一些可能會調用它。 而這僅僅意味著 它仍然是一個函數。 這只是，你可以叫不上名字稱呼它。 不過沒關係。 因為再次，瀏覽器已 像谷歌公司的預編程 或Microsoft或Mozilla或他人 只知道，如果.onsubmit場 裡面的表單元素有 值，把它當作一個function-- 一個函數指針，如果你願意。 並調用它時，表單被提交。 [00:20:46] 那麼，什麼代碼應該被執行 當表單被提交？ 顯然，一切都 裡面的花括號中。 而這僅僅是風格。 [00:20:53] 你可以這樣做喜歡 我們傾向於做CS50。 但在JavaScript中，大多數人 傾向於保持它在同一行上 只是因為它更清楚的 與該關鍵字相關聯的功能。 所以，現在我在做什麼？ [00:21:03] 如果form.email.value等於等號 空字符串或沒有，這裡的 警報在哪裡，我會說， 你必須提供你的電子郵件地址， 然後返回false。 和它的回報是假 防止被提交的形式。 同時，如果密碼值是 空白，我要罵的用戶 並說，你必須提供一個密碼。 [00:21:21] 與此同時事情越來越 一個小票友在這裡。 如果form.password.value不 平等form.confirmation.value， 其他領域，大聲喝斥 用戶的密碼 不匹配，因為它們 剛才沒有。 然後這一個是一個 小性感，因為我 知道我知道的概念 選中一個複選框的名字。 [00:21:40] 所以，我可以只使用一個感嘆號 點說，如果檢查不 checked--它是布爾 值，真或false-- 我會罵這個原因給用戶。 否則，如果我們打通 所有這些條件， 讓我們只返回true。 讓表單提交。 這就會發生。 [00:21:56] 讓我們輸入深紅色。 讓我們選中該複選框，單擊註冊。 現在，我經歷到目的地。 現在，有有沒有數據庫。 沒有什麼有趣 在register.php。 我需要的東西 實際談談。 因此，讓我停下來，在這裡。 在我們剛剛完成的任何問題 或者是一些新的語法是？ 好了，是嗎？ [00:22:17] 聽眾：因此，任何複選框 自動布爾。 你不必聲明它這樣。 [00:22:21] DAVID J.馬蘭：正確。 這是從發送給您的任何複選框 一個HTML表單的JavaScript代碼 將處理過的，是的，作為一個 布爾value--真或假。 這是一個很好的問題。 而其他的值，對 當然，一直文本，AKA字符串。 [00:22:36] 好吧，讓我 進一步後退了一下。 什麼是這整點？ 只是要清楚。 如同我們已經知道了，甚至從Pset7 甚至從上週的演講 例子中，我們可以明顯地查詢 $ _GET $ _ POST看看用戶給我們 一個空值。 還記得在PHP中的空函數。 [00:22:54] 所以才要清楚，什麼是 一個原因我們還可以 要做到這一點的錯誤檢查 內部的瀏覽器？ 什麼是這裡的動機是什麼？ 是啊。 [00:23:06] 聽眾：更快，而你不知道 發送無用的數據發送到服務器。 DAVID J.馬蘭：好。 它的速度更快。 你不發無用 數據發送到服務器。 [00:23:12] 所以，你得到一個更 即時響應。 和整體，用戶 體驗更好。 想想辦法。 [00:23:17] 如果Gmail--，是 很多年前的情況。 假設你有一個新的電子郵件的Gmail 帳，但通過的唯一方式 一看就知道是一樣， 重新加載整個頁面。 或者，假設你點擊 一個鏈接來閱讀電子郵件。 [00:23:29] 一切都那麼重裝 你可以看到郵件。 還是Facebook--你得到一個聊天信息。 你看不到它，直到你重新加載 頁面或點擊一些鏈接。 [00:23:36] 像，這將是一個非常 煩人的用戶體驗。 這是什麼樣子， 顯然，回來的時候我跑了UC 和紙幅卻小得多動態 和JavaScript是不是推廣 因為它是現在。 而事情越來越多 更具活力和更 客戶端在這個意義上。 [00:23:49] 但有一個陷阱在這裡， 這是一種惱人的疑難雜症的。 僅僅因為你添加客戶端 檢測喜歡這並不意味著 你可以或應該放棄 服務器端檢測。 基本上你想要把你的 錯誤檢查這兩個地方。 因為什麼1 學到的教訓 從文章中，我讀了一些摘錄 從這個愚蠢的CMS系統 - 內容管理系統 - 這是 實施它的認證系統中， 通過什麼樣的機制其登錄？ JavaScript的。 [00:24:20] 聽眾：JavaScript的。 DAVID J.馬蘭： JavaScript的，就是這樣，對嗎？ 它是使用JavaScript。 和字面上看，你們有 打了一點點可能 與Chrome的督察。 如果我能找到它，檢查的元素。 [00:24:30] 讓我過去做的 所有Chrome的選項。 這是它是多麼容易 在瀏覽器中禁用JavaScript的。 檢查，沒有更多的JavaScript。 [00:24:38] 因此，在公平，很多 網絡的這些日子 只是要打破，因為 Gmail和其他sites-- Facebook--假設 啟用JavaScript。 但是，如果你正在做一些愚蠢的事 像只驗證用戶輸入 並檢查它 在客戶端上的錯誤， 對手可以很容易地做到這一點。 然後更聰明 對手像你這樣的傢伙 現在可以使用Telnet或捲曲 或者只是命令行命令 居然將消息發送到服務器 這同樣是沒有錯誤檢查。 [00:25:05] 因此，這更多的是一種 用戶界面的決定 比它是一個實際的技術 improvement--實施 一些客戶端這樣的。 所以，現在看一眼，但隨後 我會推遲到網上走 通過這一個。 在表格2中，我們通過實際去 和清理代碼一點點。 不過，讓我推遲一個 的影片，我們很可能會 嵌入在Pset8，僅僅顯示了一個 使用一種名為庫類似的語法 jQuery的，這是一個超級，超級 通俗圖書館在JavaScript中 坦白說大多數人 只是使用這些日子 甚至混淆為 幸福的JavaScript本身。 [00:25:37] 它往往涉及 一些美元符號 而像文檔的關鍵字 在括號這裡。 但同樣，讓我推遲到 慢一些在線教程 而在短短的語法獲得並列起來。 讓我們繼續來 東西有點涼 在此應用的術語。 [00:25:50] 因此，在特定的，讓我去 前進，這種開放在這裡。 來吧。 在那裡，我們走了。 [00:25:59] 讓我在這裡開了這幅畫。 不必要地複雜化 看，但它 介紹了一種叫做AJAX-- 異步JavaScript和XML，其中 在X的XML實際上是 不再真正使用。 它往往會使用的東西 其他所謂的JSON。 [00:26:13] 但這裡的東西怎麼樣 谷歌地圖或谷歌地球的工作。 讓我們來試試這個上飛，其實。 讓我繼續前進，打開 Chrome瀏覽器在我的瀏覽器。 [00:26:21] 讓我去成， 說，maps.google.com。 而實際上，如果你是老 夠記住什麼， 像，MapQuest的樣子回到了一天， 也許他們仍然像這樣工作。 當你使用搜索something-- 33牛津街，馬薩諸塞州劍橋市， 讓我們做this--你 將實際上，如果 要向上平移和 下，左，右， 你會看起來像一個 在上面的大箭頭，它 會告訴你另外一個 在地圖上的向上此處幀。 或者您可以點擊離開你 會去到這裡，或再次點擊 你會去在這裡。 而是這些 天，我們當然只 想當然地認為我們可以去 劍橋周圍很快 只需點擊和拖動。 但是請注意，有一些小問題。 [00:26:59] 如果我這樣做不夠快， 什麼似乎是發生 我拖有點太快了 為計算機跟上？ 你看到了什麼？ 是啊。 [00:27:07] 聽眾：像素不刷新。 DAVID J.馬蘭：本 像素不刷新。 有actually--你 可以看到這一點，實際上， 如果你看網上和暫停 這或實際會減慢速度 為once--你會看到有 瓷磚，正方形，或矩形那 從地圖上失踪，直到 一秒鐘後，更多的數據， 更多圖片實際 出現在屏幕上。 而事實上，如果我們做到這一點看 達Chrome's--讓我們說，Chrome-- 讓我們來看看。 我們不能這樣做。 [00:27:31] 哦，哎呦。 讓我們打開maps.google.com。 請允許我向窗口更大了。 [00:27:36] 回到33牛津街。 什麼是網站，我是在最近？ 我有這個一樣，私人咆哮到 我自己，我會再即時消息 任何朋友，誰是在線 誰想要聽到它。 有一些網站。 我認為這是Comcast--這樣 一個非常大的美國ISP。 你可以註冊新的電纜時， 調製解調器服務或有線電視服務， 他們有一個形式非常合理 他們問你為你的地址在哪裡。 而有此驚人 功能叫做自動完成， 像谷歌，啟動填補 在回答你的問題。 [00:28:04] 問題在於，他們做的自動完成 在您鍵入的第一件事情。 所以如果你開始輸入33，它 從字面上會告訴你每個房子 在美國啟動 用數字33 繼續前 希望你能輸入更多。 如果鍵入33牛津因此， 那麼就說明你的每一條街道 在美國，有33牛津 它的名字，無論鎮 你就能加入。 [00:28:25] 然後你繼續輸入。 最後，它意識到，他們不 提供服務到您家在劍橋 或者類似的東西。 但問題是，這是最 愚蠢實現自動的 完成過。 [00:28:34] 而我只是關閉 這個切了。 但也有好方法 使用JavaScript和壞的方面。 而這並不一定是最好的之一。 [00:28:40] 但這裡的問題，在此之前 長篇大論，就是在這裡開設了下來工具 開放的開發工具， 正如我們之前的鼓勵， 和觀看網絡 選項卡，單擊我的真快。 並注意一大堆 弄的請求發生。 所有這一切都發生了，因為我拖。 [00:28:57] 而最有可能的，確實 很多這些行 現在圖像斜線JPEG MIME類型或內容類型。 這是因為鉻是什麼做 我每次單擊並拖動，單擊 和阻力，是它的實現，哦，我 需要去問問谷歌的瓷磚 在地圖這是在這裡， 快速通過HTTP下載， 然後將其添加到所謂的DOM 在存儲器樹的網絡瀏覽器 表示，使得用戶 我看到了更新的瓷磚。 這是因為 一個名為AJAX的技術。 早在一天，它真的 是的情況下，如果 想改變什麼在屏幕上， 你必須點擊上，下，左， 對。 然後一個新的頁面將打開。 但這些天，一切都 更加動感。 它發生的方式，我們人類會 希望它居然會以交互方式。 它通過實現這 一種叫做方式 AJAX，這也許是最好的 通過一個例子進行說明。 首先，讓我繼續前進 並打開一個文件 在名為quote.php 今天的分銷代碼。 [00:29:53] 然後讓我做symbol--哎呦。 讓我做符號= GOOG 對於只是一些股票。 或者其實，讓我們做的 一個來自處理器集免費的。 輸入。 [00:30:05] 現在看到我回來。 所以這是一個真正的 總之PHP文件，我 寫了簡單的借用代碼 從Pset7的查找功能 並吐出使用該花括號和 報價和冒號表示法，顯然， 當前股票的價格 你通過GET傳遞公司。 因此，這是不同的 大多數的我們已經 在該通知，我做了 從字面上吐出 什麼樣子的JavaScript代碼。 [00:30:27] 其實，這是一個JavaScript對象。 其實，只是為了更​​清晰， Notation-- JSON-- JavaScript對象 是說，你只是一個花哨的方式 可以表示在JavaScript中的數據太多 就像你可以在PHP 使用鍵值對。 所以，如果我想聲明 在JavaScript中的變量 以代表Zamyla，為 instance--一個結構的Zamyla-- 我們將調用它 學生，這個變量。 她的ID是1，房子是 溫斯羅普，並將其命名為Zamyla。 [00:30:53] 但是，我也可以有對象的數組。 所以，如果我真的想有 在JavaScript中包含數組 多個這樣的目的，本 時間佔工作人員， 我可能有這三個 代碼塊回 以背對背這些 三名前職員。 所以，語法，漂亮 類似both--到PHP。 但是，這是特別的JavaScript。 它的對象符號。 那麼，這是什麼用呢？ [00:31:17] 如果我寫的代碼，吐出JSON-- Notation--東西JavaScript對象的 看起來是這樣或東西， 貌似Zamyla的結構， 其實我可以用這個 在我的程序寫的。 讓我去ajax0.html。 這too--不多 的思想，賦予美感。 不過，看會發生什麼。 [00:31:34] 讓我繼續前進，在此處鍵入免費。 點擊獲得報價。 和通知的URL並沒有改變。 但我沒有得到一個彈出了明顯 今天的仙股的價格0.15美元。 所以不是所有的壞。 但不同的是，不知怎的， 這個數據回來我直接。 但是，讓我們邁出了一步 東西比較熟悉。 在一個版本中的這一點，讓我 免費再次鍵入，點擊獲取報價， 和now--哦，這是 實際上jQuery的版本。 因此，讓我 - 我沒有 快進很遠不夠。 讓我去兩個版本， 這是我想要的。 請注意，我在這裡所做的。 我有一個Web page--超 任何簡單的網頁版 你今天可能會使用與文本字段 這裡免費再顯然是剛剛 文本。 [00:32:14] 這是不是在這裡的一種形式，顯然。 但是，如果我點擊獲得 報價，請注意我的網頁 即將改變，因為雖然我 剛剛得到一個新的即時消息 或者，就像我剛才提出的 映射，需要獲得更多的數據 動態添加到網頁 沒有URL變化和用戶 經驗越來越中斷。 事實上，我仍然在 完全相同的place-- ajax2.html。 [00:32:35] 因此，讓我們只能看一下這個例子 看看這是如何發生的。 讓我進入ajax2.html。 並首先注意到的形式。 [00:32:44] 到這裡，我翻 關閉自動完成。 有時它得到 惱人的，如果瀏覽器 試圖告訴你 你的整個歷史。 所以，你可以做到這一點在HTML 只是說自動完成了。 [00:32:53] 我給這個文本字段 symbol--符號相反，一個ID。 而現在，這是一個有趣的功能。 我們還沒有談到跨度， 但你可以考慮一下 就像一個段落標記或div標籤。 這是什麼所謂的 在線元件，其 意味著你不會得到一個段落 打破它上面和下面。 它只是要繼續在網上無 按下回車鍵的等價物。 所以我給這個區塊的HTML 要確定一個唯一的標識符 我隨意叫價。 我有一個提交按鈕。 [00:33:21] 因為現在起來這裡 - 這是 其實超級驚人的多麼少的代碼 你可以寫做 比較整齊things-- 發現我做了什麼在這裡，如果我 向上滾動到該頁面的頭部。 我已經包括在第 我的頭一個腳本標籤 實際上引用 其他地方的JavaScript文件。 這是從組織 寫入jQuery的， 而這僅僅是給你最新的 版本的jQuery庫。 [00:33:42] 因此，這是一種像鋒利 包括在C或需要在PHP。 您可以使用腳本標記 與源屬性。 但是現在我自己的代碼是 將是合適的在這裡。 [00:33:52] 請注意，我有一個功能叫做行情。 它看起來有點 神秘的第一眼。 但是，讓我們取笑這個分開。 給我一個變量調用URL。 從字面上給它分配此字符串。 因此，單引號，雙引號 JavaScript的只是給了我一個字符串。 什麼是加呢？ 串聯。 [00:34:08] 所以這個現在是jQuery的語法 這需要一點時間來適應。 但是，這只是意味著去把我的DOM 節點的唯一標識符是符號。 包括hashtag有指 唯一標識符號。 [00:34:21] 在美元符號 圓括號只是意味著，這個包裹 在jQuery的一種秘密武器，使 你會得到額外的功能。 然後.VAL明顯 一個函數，或者像我們現在說的， 該節點的內部的方法 這只是給你的價值。 因此，在短期，醜陋和混亂 因為這第一眼看上去， 這也就意味著與用戶輸入獲得 中，把它在字符串的結尾 通過連接它。 就這樣。 [00:34:43] 所以，現在，最後三行。 你可以擠了很多 功能出了三條線。 這個美元符號，作為一個 拋開，僅僅是一個綽號 對於一個特殊的全局變量 所謂的字面上的jQuery。 [00:34:55] 美元符號只是看起來很酷。 所以，jQuery社區正中下懷 使用它作為自己的特殊符號。 這並不意味著這是什麼意思在PHP。 在JavaScript中，美元符號 就像一個字母 或一個數字的變量。 [00:35:07] 你可以把它作為名稱。 只是看起來很酷。 因此社會 採用它作為一個暱稱 對於自己的圖書館被稱為jQuery的。 [00:35:13] 和它的超人氣。 因此，獲得JSON正是如此。 這是一個功能，該 在鄉親們寫的jQuery ，獲取JSON從server-- JavaScript對象表示法。 從哪個網址是去 得到這些信息？ 顯然，從這個網址在這裡。 [00:35:27] 又該瀏覽器做的 只要它回來這種反應？ 這是AJAX的魔力，所以 speak--異步JavaScript的XML。 很難看到這樣的 因為我們不得不在這裡簡單的例子。 [00:35:41] 但是，這是異步的 這個意義上，我的代碼時， 執行發送一個消息到 服務器去給我拿一些JSON。 和它發生了超快速 我得到了響應。 但有趣的是，這 代碼行沒掛我的電腦。 [00:35:55] 我沒有看到一個旋轉圖標。 我沒輸 能否將我的鼠標。 我的瀏覽器實際上是完全正常的。 [00:36:01] 因為JavaScript的方式處理 來自服務器的響應如下。 你註冊你叫什麼 一個回調函數，這 只是意味著，哎，JavaScript的。 只要服務器 回應JSON， 請撥打這個匿名函數。 [00:36:18] 並請傳遞給這個函數 任何字符串服務器吐出 作為參數調用數據。 因此在另一方面，換句話說，如果 我動態組裝 網址quote.php通過本 如免費或歌或諸如此類的東西的象徵， 我再告訴 JavaScript的去把那個URL。 請記住，瀏覽器 將要返回的東西 看起來像我們先前已經看到了這一點。 [00:36:42] 什麼第二個參數 這裡獲取JSON是說 在調用這個函數 當服務器回來 無論是10毫秒 從現在開始，或從現在開始10秒。 而且只要你做， 價格添加到頁面中。 這種語法在這裡只是 手段去得到的節點 從它的唯一的標識符的樹 是price--我們前面看到的跨度。 [00:37:01] 這種方法稱為HTML 只是說，去取代 在HTML中的存在與data.price。 什麼是data.price？ 好了，瀏覽器，還記得， 我看了這回來了。 因此，這是數據。 [00:37:14] 所以這是一個有點神秘 看到這裡的逗號。 但事實上，讓我做到這一點。 我只是複製粘貼此 真正的快速進入gedit中 並出示此類似，我們發現 Zamyla的結構更早。 [00:37:27] 什麼是服務器發送回一個 小物體，看起來像這樣。 所以data.price是 只是給我0.1515。 所以很多移動 這裡的部分全部一次。 [00:37:39] 但關鍵是外賣 我們有這個能力 作出額外的HTTP 使用JavaScript請求 而無需重新加載頁面。 然後我們就可以真正 在運行中改變網頁。 而事實證明， JavaScript和其他語言 現在可以使用不僅 變異的網頁， 但實際編寫軟件 在實際的計算機， 不只是局限在Chrome瀏覽器等。 [00:38:00] 事實上，if--科爾頓，你會 想加入我們回到了這裡 與您的實驗室代碼，暢呢？ 讓我們繼續前進，已經談了 匿名函數和回調 而真的在這裡鋌而走險 有現場演示出血 尖端技術，其中一個 這些精英運動設備。 現在，這個設備，召回， 是一個小的USB設備 還有that--這是beautiful-- ，可插入到您的USB端口。 [00:38:25] 然後它提供了輸入 在人體手勢的形式 通過使用紅外光束探測， 實際上，從你的手臂動作。 因此而有什麼瑪麗亞嘗試 之前是肌肉， 實際上感覺什麼變化 你的手臂，這是基於紅外的。 因此，在尋找中移動 一英尺左右的球的種類 裝置自身的。 [00:38:46] 那麼，為什麼不讓我走 刺在這首？ 讓我們繼續前進，扔 您在這裡的開銷。 所以，讓我們把科爾頓的筆記本電腦在這裡。 我們已經得到了安德魯在電視上。 那你想我首先做什麼？ [00:39:00] COLTON：來吧，只是 把你的手過這個傢伙 你會看到一些神話般的閃閃發光。 [00:39:04] DAVID J.馬蘭：很不錯的。 這一切都發生在實時。 行。 沒事了，是的。 這麼好看。 好吧，我們還能做什麼？ [00:39:15] COLTON：轉到下一屏幕看。 [00:39:17] DAVID J.馬蘭：好吧。 [00:39:19] COLTON：一個有趣的小遊戲 你在哪裡得到，使機器人。 [00:39:21] DAVID J.馬蘭：好吧，所以這 是假的手帶我該怎麼做。 COLTON：是的，所以還是提前 並抓住其中一個塊 並把它放在了機器人的身體之上。 DAVID J.馬蘭：哦，還有我的手。 呵呵。 OK，可愛。 等待一分鐘，OK。 在那裡，我們走了。 [00:39:41] COLTON：我做了一個事故。 [00:39:43] DAVID J.馬蘭：好的，我會得到這個傢伙。 該死的！ 當我們練習這最後 晚上，你知道這是什麼演化成？ [00:39:51] 像這樣。 行。 下一個？ [00:39:55] COLTON：當然。 [00:39:56] DAVID J.馬蘭：好吧， 並有三分之一。 行。 COLTON：而在這其中，你會得到to-- DAVID J.馬蘭：哦， 這個美麗的。 COLTON：--yeah，挑除這種花。 DAVID J.馬蘭：OK。 不是嗎？ 錯過了。 [00:40:14] COLTON：哦，你去那裡。 [00:40:15] DAVID J.馬蘭：啊，你看那個。 很不錯。 那麼，為什麼不'，我們取 在這裡一位志願者 誰願意高達來吧。 如何正確的有 在綠色，是嗎？ [00:40:27] 好吧，讓我們have-- 而不是這樣做，你們中的一些 可能知道這場比賽這裡 - 切斷繩子，也許？ 讓我們來看看。 我們有我們的眼鏡在這裡？ [00:40:37] 行。 謝謝。 你叫什麼名字？ [00:40:39] 聽眾：勞拉。 [00:40:40] DAVID J.馬蘭：勞拉？ 很高興見到。 如果你不介意把 谷歌玻璃上你的眼鏡。 這是科爾頓。 [00:40:46] COLTON：你好。 很高興認識你。 [00:40:48] DAVID J.馬蘭：OK，來吧左右。 好吧，那麼你要什麼 在這裡做的，之前已經玩過這個， 是將手放在 大躍進運動在這裡。 現在你應該箭頭移動。 呵呵，沒了。 [00:40:57] 聽眾：沒有。 [00:40:58] DAVID J.馬蘭：我們 不想放棄呢。 OK，等待。 在這裡。 所以，看到你抱著你 手指上的東西， 鼠標開始走向綠色， 這是怎麼點擊。 [00:41:06] 因此，將鼠標懸停在玩。 而就在一個手指的罰款。 現在點擊小 綠色的傢伙在左側。 現在持有，直到它填補了綠色。 不錯。 現在一樣，一個級別之上。 [00:41:16] 聽眾：是的，我們想要一個級別，在這裡。 [00:41:20] DAVID J.馬蘭：好。 好了，你有 做的是割繩子。 光標是白茫茫的一片出現了下滑。 [00:41:28] 很不錯。 好吧，這是即將會更加困難。 所以，把你的手指在接下來的現在。 不錯。 這其中的辛苦。 [00:41:39] 聽眾：哦，廢話。 行。 它希望走那條路。 呵呵廢話，that-- [00:41:44] DAVID J.馬蘭：是啊。 第二個目標是讓所有的星星。 好吧，接下來。 [00:41:53] 讓我們來看看，如果你能得到這個第三個。 不錯。 好了，到那邊去。 [00:42:06] 當然可以。 呵呵，很不錯。 行。 [00:42:11] 那麼，我們為什麼不今天休會？ 讓任何人上來吧誰願意玩。 非常感謝勞拉我們的志願者。 我們會看到你在星期一。 [00:42:18] 聽眾：你可能想這些了。 [00:42:21] 揚聲器2：在接下來的CS50--