>> [音樂播放]
>> DAVID馬蘭：這是CS50。
這是9週的開始。
這是什麼將有 是布爾先生誕辰200週年。
因此，這是研究員 對他們，我們已經提到
相當長的一段時間關於使用 布爾變量真與假，
1和0這樣。
這是谷歌的 今天向他表示敬意。
他會變成200。
所以，如果你想 我們一起CS50午餐
看看鏈接 在球場上的網站。
而這樣的面孔和朋友 這裡在劍橋這些等待著你。
像這些面孔等待著你在紐黑文。
而且，事實上，肯在 紐黑文熱情地讓
什麼叫禮的GIF動畫 這裡在最近lunch--一個GIF尚未
另一圖形文件格式， 與你familiar--的
看起來有點像這樣。
因此，只要序列of--確定。
這裡沒有人在劍橋的笑。
但在紐黑文，這 真可笑，對不對？
好的。
>> 所以不要我們一起在那裡。
在這裡，在哈佛， 具體而言，本週三，
如果你是一個大二或大一even-- 甚至junior--製作思路
交換機到計算機 科學，知道有會
被一個CS建議交易會 週三，下課後不久，
在下午4點，在計算機 科學樓馬克斯韋爾德沃金。
我們會把這個在球場上的 網站的明天，也是如此。
甜甜圈，我被告知，將送達。
>> 好的。
太好笑了story--我被戳 圍繞在互聯網上，
我發現一些舊檔案 我以前的網站。
而事實證明out--解決此 時間，似乎很及時
因為據我了解，在UC選舉 即將裝備起來。
所以，我跑了UC，淒慘地丟失。
也許這是部分原因。
因此，這是我的網站的時候。
出於某種原因，我認為這是 一個好主意，告訴人們面前
什麼我的平台是，為什麼他們 應該投我一票，他們有
點擊進入地發現， 信息，現在回想起來是
那種讓人毛骨悚然。
我真的不知道那是什麼東西。
>> 但它肯定沒有 幫助我的競選活動。
我還發現，高層 year--我有這個布偶日曆。
提線木偶是一種流行當時的情況。
或者，也許他們不是。
我有一個布偶日曆當時的情況。
而且我認為這會是很酷的名字 我的電腦哈佛的網絡
frogman.student.harvard.edu。
當時，我們都獨一無二 識別主機名。
你可以選擇一些虛榮 名稱，而不是你自己的名字。
而我就跟著蛙人出於某種原因。
>> 然後我started--我花了很多 時間通過點擊這些鏈接
今天上午。
這是我對網頁， 現在似乎有種可愛。
但是，這也證明了剛 技術多遠已經到來。
我的意思是，早在一天， 486是什麼東西。
這些天來，它的超級，超級， 超慢，好少
比你可能在你的 自己的腰包，這些天。
還有更多在那裡， 更是尷尬。
所以我會離開它。
但是，這是我的第一次 進軍web--哦，不。
這是不是。
我第一次真正涉足網頁編程 是這樣的網站，我只是忘了。
在某些時候，我學會了如何 做重複的背景圖像。
所以我發現這個平鋪有效， 像冰球運動員，足球和高爾夫球
球，或不管它是什麼 為Frosh IM的網站。
這實際上，真正的 第一個基於網絡的項目，我花了on--
我想，也許大二 今年，初中year--
服用CS50和CS51，一前一後 的共同後續類。
我注意到，在尋找 通過檔案
這對我的繼任者之一， 樣的朋友，李改
版權自言自語。
但是，這確實是東西 我應該對自己的尷尬。
但在當時，這 是第一個網站，
正如我所說的幾個星期前， 由新生能
從這裡註冊校內體育活動。
所以，事實證明， 該背景圖片
這樣是不是個好主意。
但在網絡是新的，並 我們都嘗試。
這就是我 顯然沒有當時。
好的。
因此，事不宜遲，我們切換 齒輪今天給你的，真的，
你可能會發現的最後一塊 對於最終的項目特別有用
而且，將開始到 使整個萬維網
感覺有點更容易理解。
事實上，我們將引進 多了一個編程語言
JavaScript調用，它類似於 並以不同的方式不同
從語言，我們已經看到了迄今。
>> 所以C，召回，是這樣的編譯語言。
你必須通過一個編譯器運行它。
你得到的源代碼，對象 代碼，或零和一。
而這些都是零和一的 你的CPU，中央處理單元，
真正理解。
PHP，相比之下，不 編譯型語言。
這是什麼？
這是一種解釋型語言。
因此，有一些程序 所謂的解釋器，
具有讀取它 - 頂到 底部，左到right--
並找出所有的東西 你的語法確實和手段，
不管它是一個循環或條件 或編程的任何其他數量
構建。
所以這是一種解釋型語言。
>> 然後，我們介紹了HTML。
和HTML甚至不是一個 編程語言。
我們會叫什麼？
一種標記語言，這就是 幾分說它奇特的方式
沒有像編程構造 我們看到即使回到划痕的一天。
有沒有循環。
有沒有條件。
這真的是一門語言 有關標記您的數據
和格式化或 構建以某種方式。
>> 的CSS，同時，類似地 不是一種編程語言。
它甚至更美觀為主。
它可以讓你排序的微調 像字體大小和顏色
和安置了這一切。
然後，我們有
>> SQL。
因此，SQL確實是一個編程 在一定意義上的語言，
雖然定制 具體到數據庫。
但是，即使我們只為您介紹 選擇和插入和刪除和更新
和其他幾個， 原來你其實可以
寫函數或者 程序，因為它們是
所謂的，在SQL的外觀和行為 很喜歡PHP和C函數。
所以知道這些存在。
但是，我們甚至不與他們不屑 因為我們只是劃傷表面在這裡。
然後JavaScript中，最後的 我們的語言正式出台。
因此，JavaScript的，也就是 一種解釋型語言。
而那些熟悉的，做的 要區分它
一些特徵 從C和PHP？
是什麼使得它有什麼不同？
>> 聽眾：這不是編譯。
>> DAVID馬蘭：再說一遍嗎？
>> 聽眾：這不是編譯。
>> DAVID馬蘭：這不是編譯。
因此它也被解釋。
所以它不是編譯。
但是，這使得它像PHP一點。
但它仍然從不同的 PHP在一些醒目的方式，
至少在方式，我們將使用它。
是嗎？
>> 聽眾：它運行的客戶端。
>> DAVID馬蘭：它運行 客戶端，通常。
這確實是顯著 特點對於我們現在。
C組服務器端的意義 我們所做的一切都是在CS50的IDE。
PHP迄今已 服務器端，只要
因為它也一樣，得到interpreted-- 沒有編制，但interpreted--
裡面的CS50 IDE，這當然是 在雲中僅有一個或多個服務器。
>> 但JavaScript中，甚至 雖然你你會
開始寫它，比方說，PSET 八，也許最終projects--你
要糾正它 CS50 IDE和保存
在內部CS50 IDE，IDE CS50文件 和，反過來，雲服務器
其所託管的，都不會 解釋或執行代碼。
相反，它會在要發送 未改變形式向下到瀏覽器。
而且它然後將是IE瀏覽器 或者Chrome或Firefox或Safari
或任何實際解釋 它，從上到下，從左到右。
因此，關鍵的區別 特徵為今天
是，JavaScript是客戶端 和PHP，例如，
已被服務器端。
現在，這種具有有趣的含義 為一樣，知識產權
誰又能真正看到你的代碼。
事實上，你可以去 在網絡上看到最
有人有任何代碼 用JavaScript編寫的。
有時是可讀的， 有時它的模糊處理。
但更多的是對在適當的時候。
>> 所以JavaScript中，很好地不夠，是 超級相似，語法，為C.
和很多像PHP， 沒有主要功能。
如果你想開始寫 JavaScript代碼，你會看到今天，
你剛開始寫它。
但它，你會看到，特別是 有用在Web瀏覽器的上下文中。
然而，我的小 disclaimer--通常先前已經
是說，你可以不斷 今天使用JavaScript的服務器端
使用名為Node.js的花式框架 的一些CS50自己的應用程序
被寫入。
50檢查實際使用node.js中
但是，我們要重點關注 JavaScript客戶端現在開始。
>> 因此，這裡是一組在PHP中的條件。
對不起，in--事實上，這 聲明中，也就是正確的。
這裡也是一組 條件在JavaScript中。
在語法上，它是 與C和PHP。
布爾先生的表達式， 同樣，語法
等同於C和PHP。
我們也有在開關 JavaScript代碼看起來完全相同。
我們有一個循環是 結構相同，
while循環，做while循環。
>> 這其中有一點不同。
PHP有每個結構 你可能會使用
還是會在PSET七種用途，也許吧。
JavaScript有此特殊版本 對，你從字面上說些什麼
像可變密鑰中的對象，這 是說一個非常簡潔的方式，
如果我有一個object--，我們將 在moment--再談論這些
我想遍歷所有 內的關鍵值對的，
我沒有搞清楚如何 數值索引它們與零個，一個
二，三。
>> 我可以從字面上講。
並在每個迭代中，JavaScript的 我將更新可變密鑰
成為第一密鑰，那麼下一個鍵， 然後下鍵，則下一個鍵，
等等。
我可以通過治療得到其價值 在JavaScript對象，因為我們將看到，
就好像它是一個 關聯數組在PHP。
事實上，如果你終於纏你 介意身邊有什麼關聯數組
在PHP中，你可以把它現在的 相同在JavaScript的對象。
但是，這一點 過於簡單化。
>> 陣列看，夠漂亮，相同的 到PHP除了一個字符。
有一件事在這裡失踪 我們確實看到上週與PHP。
什麼是不加嗎？
是嗎？
沒有美元符號。
所以，我們又回到了一 比較正常的世界裡，
變量沒有美元符號。
但是你做前綴他們 使用var，通常。
和VAR是指變量。
而像PHP是鬆散 typed--其中有型，
有數字和字符串 和花車等forth--
JavaScript的同樣有型。
但它弱類型，因為我們的 程序員不必指定它們。
我們只需要知道 不同類型的存在。
>> 變量，meanwhile--這裡是如何 我們可能會宣布“你好，世界”
作為字符串。
請注意，這是相同的 PHP，但沒有美元符號。
這是值得我們 開始看到更多的今天，
因此，你有一個對象 與鍵和值。
如果你想嘗試 從去年week--推斷
語法是有點不同。
不過有點神智check--多少 按鍵也該對象似乎有？
所以，我看到四個。
我看到兩個。
>> 因此，它實際上是兩個。
因此，這是一個集 兩個鍵 - 值對。
最關鍵的是符號，它的值是FB。
最關鍵的是價格，其值為101.53。
所以這是兩個鍵 - 值對。
請記住，PHP--而這又是 只是那種語法的差異。
這還不是所有的 智力有趣。
PHP可能已經寫了這個相同的 作為follows--報價的事情，等於。
而我，這些改變方括號。
然後，我改變這 帶引號的字，“價格”。
然後，我不使用冒號。
我才用什麼上週？
是啊，等號 箭頭時髦的符號。
>> 然後，我在這裡做同樣的事情。
這裡同樣的事情。
而這一切。
所以這是很好，如果這還沒有 真正沉沒在內存只
但因為它是真的 智力無趣。
這只是語法上的不同。
但思路是完全一樣的。
內該變量的 在JavaScript報價
是鍵值對的集合， 其中之一是符號，其中一個
是價格。
我可以在這些值獲得 以下語法。
就像在PHP中，我可以 做一些like--讓
我做這個框大一點。
就像在PHP中，我可以 使this--哦，該死。
來吧。
>> 就像在PHP-- OK，我們將 只要使用演示說明。
就像在PHP中，我可以 做$報價$報價[“符號”]，
這將讓我 值“的象徵。”
在JavaScript中，這將是 相同的，因此我可以做到這一點。
唯一那 缺少的是美元符號。
>> 這麼好聽夠的話，有 沒有多少新的語法。
因此，我們關注什麼今天，真的， 一些想法和應用。
和第一個這樣的 應用程序，你可能
已經看到，如果你潛入的pset 7已經是這樣的語法。
因此，在PSET七，如果你 見過或沒見過它，
知道，有一個文件就是我們給 你叫config.json--的JavaScript
對象符號。
為什麼呢？
我們希望能夠為您提供 一些鍵值對的模板。
我們希望能夠給你一個列表 主機，服務器的名稱。
我們想給你一個 佔位符，您的用戶名
和佔位符，您的密碼。
如果你沒有看到 這還沒有，不用擔心。
更多關於這方面的pset 7 [？規範。 ？]然後，
很明顯，我們希望你 填寫待辦事項
因為當你登錄 CS50 IDE，你們每個人
有你自己的用戶名和密碼。
>> 因此，我們可能已經使用了半打 或多個不同的文件格式。
我們可以使用一個.txt文件。
我們可以用一個CSV文件。
我們可以使用過的 INI文件，XML文件，
一大堆更多的縮寫詞 你可能沒有聽說過。
這是一種武斷 在一天結束。
但超受追捧是一個文本 格式，稱為JSON-- JavaScript對象
Notation--，看起來像這樣。
這是一個有點神秘， 但要注意的模式。
你開始以開放的花 撐，你最終以相同。
裡面的那是後話。
這是一個鍵值對。
所以這是我的對象 在屏幕上看著這裡
具有一個鍵，它具有一個值。
而就推斷基礎上， 以前的模式，什麼是這裡的關鍵？
數據庫的事 結腸的左側。
>> 現在，該值正好是 一個多行這個時候。
但值以捲曲 振奮並用大括號結束。
所以，你會提出什麼 數據庫的值的類型？
字典或者，只是更多 簡潔地說，一個對象。
對嗎？
這是怎樣的一個數據結構的 可以使用其他結構內本身。
因此，如果這件事我們 調用一個object--和對象
只是一堆的鍵值pairs--的 數據庫本身的值是一個目的。
數據庫的價值有一大堆 關鍵值對，其中第一個
為主機，然後將其命名，然後 用戶名，然後密碼，
其每個的值，同時，它的 只是一個無聊的雙引號括起來。
>> 因此，即使這不是 超清晰，只是還沒有，
知道，這僅僅是一個 標準，相當無聊的方式
的存儲在一個標準的格式的數據。
但常見的錯誤，你 可能使，即使在PSET七，
是有點愚蠢的事情，就像你 一不小心忽略逗號那裡。
這將導致文件 不一定具有可讀性。
如果你不小心忽略的東西，如 報價，它不會是可讀的。
所以這是一個非常挑剔的文件格式， 但它是一個是超級常見。
而我們碰巧使用它，即使 你不使用任何JavaScript，否則，
在PSET七人。
>> 好的。
所以請記住這張圖片。
我們談到，在HTML中，這 代碼可能會是這樣。
這是超文本標記語言 只是[聽不清]“你好，世界”。
但是，我們提出了一個 前陣子，如果有幫助，
你可能要開始思考 這個已經是一棵樹。
事實上，壓痕，我們 使用只是為了提高可讀性的緣故
或風格的緣故上 左側可以種
被翻譯成這棵樹，在那裡你 有一些特殊的根節點，我們將
一般稱為文件，低於該 是根HTML元素或標記，HTML，
然後具有兩個 兒童，頭部和身體。
>> 然後反過來，頭部有一個標題。
和標題有一個文本值。
而機身同樣具有文本值。
所以，如果你是舒服的說法 這是的，你可以利用這個HTML
並得出類似的圖片 此，右手側
是一個很好的心理模型，因為現在 我們有JavaScript的，編程
語言，瀏覽器可以 執行和解釋給你，
事實證明，什麼 我們即將做的代碼
在開始操作這個 樹結構在存儲器中。
我們沒有建 樹在內存中。
我們沒有那種做 PSET十五風格的數據結構
複雜性。
瀏覽器，很好地不夠，在 解釋的HTML從上到下，
左或右，是從字面上去 手我們指針的等效
以免費的整個樹。
它做了所有的辛勤工作。
這就是Mozilla和蘋果 和其他人已經為我們所做的。
>> 使用JavaScript我們要 能夠控制和改變，做
有趣的東西 那棵樹，否則稱為
作為DOM或文檔對象模型。
什麼樣的事情呢？
嗯，事實證明， 在JavaScript中，有
這個洗衣清單 事件可以發生。
而且，我們還沒有真正使用的 一句話，因為週零和PSET
零，當我們談到划痕。
大多數人可能沒有用 事件在划痕的項目。
但是，你可能還記得 簡單馬可波羅
例如，如果我們有兩個 其中一人的精靈，說，馬可。
其他的人，然後，在收聽 和訊這種情況下，說，馬球。
如果沒有，請隨時 回頭看那麼遠了。
>> 但是，這僅僅是 再說了，你可以種
從這些名稱推斷 事情，JavaScript的，事實證明，
是想給大家一個辦法，聽 鼠標下降或鼠標往上走
或鍵下降或密鑰 上升或onsubmit的ONSELECT
或onresizing東西。
換句話說，任何物理動作 一個人可以使用瀏覽器
你做的每一天，你可以寫 該代碼偵聽這些事件
然後做適當的事情。
>> 舉例來說，如果你使用谷歌地圖， 如果你點擊和移動會發生什麼
鼠標，典型地？
如果您單擊並拖動？
是嗎？
沒錯。
地圖開始移動。
所以，你可以排序看看有什麼 在這裡，有什麼在那裡。
以及如何做谷歌實現了嗎？
嗯，據推測，他們是 使用一對夫婦的這些事件
聽眾，一個 說，監聽鼠標
down--因此當用戶物理地 推他的觸控板或他或她的鼠標
下來。
然後，我們正在尋找 像運動
或一些其它事件 讓我們捕捉拖累。
而事實上，是拖拉同樣在此 點點可能的選項點名單。
>> 因此，這將是一個強大的 的方式開始響應用戶
甚至在他或她實際點擊 明確的東西像提交。
但是，我們要引進 一對夫婦主題到那裡。
但首先，讓我們來過渡 一些實際代碼。
所以我要去 進取，不斷開拓DOM-0，
這是一個非常簡單的例子 在這裡，如果我放大只是
有此輸入來到我身邊。
而且我要繼續前進，並輸入 “大衛”為我的名，然後點擊提交。
>> 排序，然後，雖然便宜，我 有這樣的提示彈出，上面寫著：
“你好，大衛！”
因此，這是一種 像我們的“你好，世界”
我們做了一段時​​間回來在C和 即使是在PHP，因為我已​​經動態
輸出我的名字。
我可以在這裡做別人的名字。
我可以簡單地更改為， 像漢娜，點擊提交。
事實上，小彈出的變化。
>> 現在，彈出窗口中的一個 網絡中最被濫用的特點。
而事實上，早在 當天彈出窗口攔截器
開始流行，因為你 會去一些website--
也許是有問題的place-- 那會突然
啟動胡椒屏幕 有一大堆的彈出窗口。
因此這種能力彈出 在用戶的前窗
一直沒有特別 廣受人類。
所以這就是為什麼你看到的 這阻止的事情，
這只是讓這件事難看。
因此，我們將需要一個 更好的方式來提示用戶。
但現在，似乎工作。
所以只是憑直覺，什麼 似乎是發生在這裡？
我繼續前進，點擊提交， 然後事情發生了，顯然。
但是，什麼是不能發生的事情是發生過的事 上週任我點擊提交？
什麼都沒有發生在屏幕上？
對不起？
刷新。
該網址沒有改變的。
我說，這是DOM-0， 我依然在DOM-0。
通常情況下，我們會得到改變一些其他的 的URL，就像register.php或類似物。
>> 但是，即使當我辭退 這件事情通過單擊確定，
注意到網址 保持完全投入。
而且，事實上，如果我有一點 持懷疑態度，讓我打開Chrome瀏覽器。
讓我打開網絡選項卡。
並且注意到它的空白的時刻。
讓我繼續前進，重新提交瑪麗亞。
有沒有網絡流量任何責任。
因此，有沒有HTTP。
>> 因此，我們確實，如果我看源代碼 對於this--讓我關閉這個窗口
去查看源代碼。
有趣的。
它看起來像有一些 新的標籤，其中包括腳本。
因此，讓我們在CS50看看 IDE正是我發送給用戶。
>> 所以在這裡is--我們 只關注HTML。
這裡的底部DOM-0.html的一半。
並注意它有一個標題， 頭標籤，body標籤，表單標籤。
但是，跳出你的 不同的，特別是如果你從來沒有
寫任何JavaScript自己。
讓我滾動一點 這裡的權利。
我有一個輸入， 另一個輸入提交。
我有一個ID，這是一種新的。
但是，我們也看到這一點CSS。
還有什麼是絕對新的？
是嗎？
美觀大方。
>> 好的。
那麼，它說的onsubmit， 注意到有東西似乎遵循。
這是一個屬性 在HTML命名。
它的價值就在這裡這個帶引號的字符串。
這看起來有點 怪異的第一眼。
這不是HTML。
這不是CSS。
這是，您可能已經猜到，JavaScript的。
如此看來，內置於該 網頁是一個名為greet函數。
而我推斷，只是 因為它是一個詞，打招呼。
它有一個開放的括號， 接近括號，分號。
看起來像一個C函數， 看起來像一個PHP函數。
>> 事實上，這將 是一個JavaScript函數。
然後我返回false。
我們會回來 在短短的時刻。
但如果是這個函數定義？
那麼，讓我向上滾動 到該文件的頂部。
而且，即使它是一個漫長的線路， 它是相對簡單的。
讓我縮小這裡 圍繞這四條線。
>> 因此，在JavaScript中，只 PHP之類的，你只要
比方說，從字面上看，這個詞“功能，” 的函數的名稱，
然後用任何括號 arguments--沒有參數在這種情況下。
而且也沒有返回類型 在JavaScript中，就像PHP。
因此，這不是C.寬鬆一點 打開大括號，靠近大括號。
內置到JavaScript是一種function-- 不推薦function--
但一個函數調用警報 在生活中，其唯一目的
就是拉了那個漂亮的醜陋 提示我們看到剛才。
>> 現在，這是怎樣的一個拗口的。
這是怎麼回事嗎？
因此，讓我們開始 這裡強調的一切。
這是同樣的理由來提醒。
而這是怎麼回事？
這看起來就像一個字符串。
而事實證明，不象PHP和不同 C，它不會在JavaScript無所謂
如果單引號或雙引號。
他們會是相同的。
坦率地說，這只是 受追捧
對於JavaScript程序員總是 使用單引號的某些原因。
這只是我們該做的。
但是，我們可以使用雙引號，也是如此。
>> 因此，加上是一個新的角色。
但是，那些你們誰做了 這之前，是什麼加什麼意思？
是啊。
串聯。
因此，我們在PHP中看到這一點。
這裡還有點 運營商在PHP中
將連接兩個字符串在一起。
C組在頸部疼痛做到這一點。
從PSET六，這是召回 在頸部一種特殊的疼痛，
你將不得不使用 類似的strcat
分配內存後 在堆棧或堆。
你必須赴湯蹈火 只是連接兩個字符串。
在JavaScript中，這是超級簡單。
只需使用它們之間的加法運算。
>> 這樣複雜的外觀的 事情似乎是這樣的
因為在結束時 這整個字符串，我只是
串聯上一個驚嘆號。
因此，如果發生了什麼雨後春筍般冒出來了 “你好，戴維。”“你好，漢娜，”
“你好，瑪麗亞，”等字樣，很明顯 在這兩個之間的中間事
加號必須給我提供什麼教育？
是什麼在那裡嗎？
是啊。
所以我就假裝在這裡 回答他們的名字吧？
因此，他們的名字突然出現在最後 結果。所以，這是什麼意思？
好吧，我在前面的提議 圖像的所謂的DOM
有這種特殊的根元素 一路前稱為文檔。
而現在，事實證明，這是怎麼回事 是一個特殊的全局變量
在JavaScript，內置到這是一個 一大堆有用的功能。
其中有用的功能是 能力得到任何後代節點。
這些正方形或長方形或橢圓形 只是在樹中的節點，可以這麼說。
>> 所以，事實證明，內置 JavaScript的文檔對象
是一個功能，或者被稱為 方法，這就是所謂的getElementById。
的語法主叫 在JavaScript函數
這是一個對象或一個的內部 變量只是用點符號。
我們看到在C 什麼結構的語法。
你看樣這PSET七， 排序，當你看到CS50 ::查詢。
PHP中的結腸結腸是另一種 調用函數的方式
裡面的一些對象。
>> 但現在在JavaScript中， 它只是一個點。
因此該功能， 很好地夠種，
說什麼does--得到元素通過ID。
一個元素是另一個名字 對於在DOM標籤或節點。
因此得到元素通過ID“名” 意味著this--這裡是我的HTML。
在此基礎上的HTML，什麼 節點或者是HTML標記是我
要以編程方式交由 通過調用的document.getElementById？
>> 是的，沒錯。
我要獲得輸入 元有ID為“名”。
那麼具體而言，可以 覺得這個功能，
的getElementById，作為給人一種方式 回一個指向特定節點
在樹中。
我們還沒有繪製這 樹，但它是一個辦法
對獲得訪問該 矩形或矩形
經由其ID唯一標識它。
>> 現在，這是為什麼有用嗎？
那麼，事實證明 一旦你已經得到
該節點，表示從矩形 畫面，在它的內部節點，
反過來，有一大堆的 properties--鍵值對
或數據，其中之一是所謂的值。
因此，從字面上看，它是一種一 滿口解釋整件事。
但在一天結束時， 這一切確實是給你
用戶鍵入字符串中的 在這種分層方式。
但我不喜歡 這些夫婦的事情。
或者說，有一些好奇依然。
所有這一切似乎工作。
為什麼你會認為我回來 呼叫招呼後假的？
這看起來有點醜，那 我有兩個語句有
用分號隔開。
以此來猜測。
如果我刪除返回false，什麼 可能發生的事情，只是本能？
對不起，再說一遍嗎？
>> 打開一堆的Windows。
因此，潛在的或許真的 這樣會發生。
還有什麼？
可能提交申請在哪裡？
要在同一個頁面。
因此，事實上，就是這樣 越接近答案在這裡，
即使不像 在過去，我已經不
指定action屬性， 通常我們要做的。
原來有一個默認的。 如果沒有指定動作，
這就像說報價，引文結束 或文件本身的名稱，
在這種情況下將 像DOM-0.html。
那種只是它的推斷， 或者說暗示的保證。
>> 所以，如果我不這樣做，讓我們注意。
讓我保存這個。
我已經刪除返回FALSE。
讓我回到這 例如，迫使其重新裝入。
你可能已經看到了我建議 這在CS50討論一堆倍。
如果有什麼是有史以來作用時髦和 瀏覽器的行為不作為您的期望，
通常情況下，你會想舉行 按住Shift鍵，然後單擊刷新。
這將迫使所有的文件重新加載 而不是使用瀏覽器的本地緩存
或副本，現在，讓我繼續前進， 打開我的督察，網絡選項卡。
我要去點擊 保留日誌，因為我
不希望它刪除的行 一旦我攆走其他地方。
>> 讓我在這裡繼續前進， 岸堤類型，點擊提交。
好的。
這似乎符合市場預期。
它說：“你好，安迪。”
讓我點擊確定。
有趣的。
請注意，頁面改變， 雖然原來的頁面。
請注意，網址樣的改變。
它增加了一個問號， 這通常是一個指標
我們試圖向東西。
然後在底部， 更明確地，
這裡是實際的HTTP請求， 這得到了200響應該
帶我回到這裡。
>> 因此，這不是什麼 我們想要做的，對不對？
因為我不希望 重新加載整個頁面。
我不是想回去 假以短路
瀏覽器的默認行為，其中 是，當然，提交該頁面。
>> 因此，讓我們來看看一個 略好例子。
這是DOM的版本之一。
並注意以下幾點。
這是確定的，如果你不神交 所有的代碼行。
但是，什麼是本質上的區別 這個執行？
我將規定它的行為 同樣的，做同樣的事情。
有我明明做了什麼不同？
是嗎？
>> 聽眾：[聽不清]。
DAVID馬蘭：是的。
因此函數被定義differently-- 換言之，從形式存在，
那裡就行7--或 相反，線8-不再
我必須onsubmit屬性。
在前面的例子，我有這個。
然後，我簡直寫到這裡我的代碼。
然後我說，返回false。
而如果它沒有擦 你又走錯了路，
它應該開始，只要 因為，就像在HTML中，
當我們開始共同混合它 使用CSS的樣式屬性，
它剛開始得到一點 凌亂還是覺得有點不對勁。
>> 同樣在這裡，如果 你開始服用HTML，
然後自動 撲通一些JavaScript代碼
在一個帶引號的字符串的中間，它的 不會是非常維護。
對嗎？
它也不是很明顯，在第一 地方，JavaScript代碼。
因此，這將是非常好的為 更好的設計宗旨，
讓我們徹底讓我們的HTML 從我們的JavaScript分開。
>> 因此，要做到這一點，我們已經 在這裡做的是following--
我們簡單地用HTML只標記。
所以，在這個版本的一台，所有 我是一個唯一的ID的形式。
然後到這裡，我趁著 對JavaScript的一個特殊功能
因此我能有什麼 所謂的匿名函數。
所以，事實證明，如果我叫 “演示”中的document.getElementById
這等於是給了我一個指針 在我的系統中，這一節點，表單元素，
可以這麼說。
>> 現在，我只知道，從 知道一點的​​HTML
現在我們已經看了一些網上 引用，一個表格單元支持
在一大堆事件listeners--的 換句話說，事件的洗衣清單
聽眾，我們看到剛才。
我從書上知道文檔 即onsubmit的是一個有效的事件
偵聽器表單元素。
>> 所以一旦我知道， 它是安全的，我做
該following--得到那個節點 從樹中，表單元素，
並訪問其所謂的 onsubmit的財產。
所以點只是意味著 這是一個屬性，
喜歡它裡面的特殊值。
什麼類型的數據我是 分配，顯然，
到的onSubmit，這是 實際上是一個變量中
樹中該節點的？
這是該結構的內場。
什麼是數據類型？
>> 一個功能，是的。
所以，事實證明，PHP有這一點。
而且即使我們 沒有告訴你這件事，
C也有函數指針，該 傳遞和分配功能的能力
作為變量的值本身。
而且我們不打算 倒退回C.
但現在，事實證明， 上的右側這裡，
即使它看起來有點 時髦的，這意味著，哎瀏覽器，
給我一個功能。
我不會甚至不屑給予 它的名字，因為我從字面上
要指定讓我們叫它 此函數的地址
立即onsubmit的。
換句話說，瀏覽器，你不需要 知道這個函數的調用。
你只需要知道 它是在存儲器中。
因此，這足以只是 有一個等號有
並沒有打擾這一命名，如 FOO或打招呼，或任何其他文字。
而現在這只是一個風格的東西。
我可以移動這個大括號 到the-- sorry--下一行
像我們平時做CS50。
但在JavaScript中，它的 實際上文體常見
只保留了大括號中， 第一個，在該第一行。
>> 但此後，有 什麼有趣的。
打開大括號只 標定我的函數的開始。
該功能是現在 相同的，只是我已經
包括返回假 這裡面的功能。
因為事實證明out-- 你不僅會
從閱讀知道這 該documentation--
如果函數您分配了 到onsubmit處理程序返回false，
瀏覽器才知道並同意 不要表單提交到服務器。
如果返回true，將提交 它以一台服務器的原因，我們會看到
在短短的時刻非常有用。
>> 再經過分號 大括號那裡只是
意味著我做的定義功能。
你知道要盡快叫什麼 當你聽到提交。
好的。
這是可以說是一種醜陋的還是。
那麼，我們還能做什麼？
>> 嗯，事實證明，然後在 2版，這是last--
而我們只需看一眼這一點。
在製作的風險 它難看，原來
，有一個庫 世界所謂的jQuery。
和jQuery是一個超級 流行的JavaScript庫
這是非常受歡迎，最 任何JavaScript--這不是
不凡的人混淆 jQuery的使用JavaScript。
為什麼呢？
JavaScript的本身就具有很 做things--的詳細方法
的document.getElementById，dadadadadada。
你最終不得不非常 長行的代碼。
>> 因此，一個名叫約翰·渣油老鄉， 究竟是誰的作品為一個啟動
這幾天，走了出來 與此庫年
以前，很多人都做出了貢獻 名為jQuery的改變
語法以下列方式。
而且只要你已經看到了這個， 因為你總是
看到這，如果做一個 基於網絡的最終項目，
這將相當於方式 實現使用同一功能
這個特殊的圖書館。
>> 現在，而不是挑逗 它除了在其全部，
就讓我們來看看一些模式。
這個語法似乎有 多少匿名函數
或匿名函數 或者AKA lambda函數？
二，對不對？
而你知道，即使 你不是超級舒適這一點，
剛剛通過的事實，它 說函數（）的兩倍。
>> 而事實證明， 這段代碼是doing--
我們會參考網上的參考， 最終，一些幫助與此有關。
這也就意味著，當 該文件已經準備好，
繼續並註冊 下面的函數
作為提交處理程序的HTML 元素，其獨特的想法是演示。
然後，當發生這種情況， 調用這兩個行代碼。
這是可悲的，更 說法返回false冗長的方式。
我們提到這一點，只是因為 你會看到這個代碼在線等。
而且它是沒什麼被嚇倒。
反倒是，請記住，什麼是 要在JavaScript中很常見
就是這種模式。
所以這就是為什麼我們展示它現在。
好的。
因此，沒有居住過 很多在該語法，
是有任何疑問 這些實例或想法迄今為止？
好的。
因此，讓我們用這個東西是有用的。
製作一個網頁，只是說你好， 某某是不是所有的有趣，
不underwhelm。
這一個不會是美麗的， 但它會做一些有用的東西。
讓我回到我的目錄 在這裡，開拓，說，外形0.html。
>> 因此，假設這是新生 校內體育活動註冊頁面
沒有任何的CSS或設計的任何意義。
而且我要繼續前進， 這裡使用密碼註冊。
而且我會同意的條款 和條件，然後單擊註冊。
而現在的網站上說，“你是 註冊！ （嗯，不是真的。）“
這似乎是它的工作，但 讓我繼續前進，迫使重裝。
>> 讓我說，不，你不這樣做 需要我的實際電子郵件地址。
或者，也許我們只能說，郵件在那裡。
密碼會一樣，12345。
然後，只是因為我 白痴，現在是123456789。
我不是要檢查你的盒子。
>> 嗯。
好的。
因此，有幾次機會 為改善這裡。
你知道，還是會在PSET看到 七，您可以編寫代碼 -
你就會有寫 在PHP--代碼保衛
針對這些種的用戶 錯誤，因為明確的用戶
沒有合作。
他或她還沒有給你一切 重視你想要的，甚至在格式
你希望他們。
所以，你會在PSET 7看出， 我們當然可以有一些
如果說條件 如果電子郵件地址
不是username@something.edu， 我們可以只
說對不起，並表示歉意用戶 多，就像你可能在PSET七人。
或者，如果他們沒有檢查那個盒子， 原來在PHP中，則可以檢測到，
太。
當然，如果密碼 不匹配在register.php
為PSET七，則可以檢測到。
但是，這是在一個痛苦 脖子上，現在他們要求
我們對所有的方式轉到服務器。
用戶被告知錯誤。
至少，除非你使用 有些美妙的技術，
現在他們必須單擊後退箭頭。
那豈不是很好，像 很多網站今天，
如果你有更直接的 反饋意見，瞬間？
>> 換句話說，讓我去版本 一個，這將是不漂亮。
但它確實有這個功能。
馬蘭，12345，123456789，不 要選中該複選框，註冊。
密碼不匹配。
因此，即使這個彈出窗口是ugly-- 我們可以最終取代本
喜歡的東西引導， 你會在PSET 7見
是一個非常受歡迎的library--我做 檢測到口令不匹配。
好的。
好吧，讓我來解決，作為用戶。
讓我繼續前進，說12345，12345。
仍然沒有檢查的協議。
您必須同意 條款和條件。
那麼，為什麼？
>> 如果我們已經假定 還有一種方法，
而我們需要你 PSET七，檢測錯誤
這樣的條件 服務器端的，為什麼要我
麻煩也這樣做在JavaScript？
是什麼在爭論 贊成加入什麼
你即將看到的some-- 有額外的複雜性。
>> 也許沒有上漲空間。
可能是什麼？
聽眾：[聽不清]。
DAVID馬蘭：呵呵，有意思。
潛在的漏洞。
所以肯定的是，如果你不處理 錯誤的用戶輸入，偉大的，
也許是，如果這一切的美好 甚至沒有達到您的服務器。
我推回那裡， 比方說，你應該
解決這兩個的這些問題。
但是，這是公平的。
還有什麼？
>> 聽眾：[聽不清]。
>> DAVID馬蘭：是的。
這段代碼，正如我們之前所說，是 解釋在客戶端。
它不打擾服務器， 這意味著它不
影響服務器的負荷或容量。
而現在，對於有點老了我， 這沒有任何意義的影響
因為我有一個用戶現在。
>> 但是，如果你的任何 體面的大小網站，
尤其是最大的，像Fac​​ebook， 更可以留人關閉
你的服務器的更好 當然，因為一台服務器，
只有擁有的RAM量有限， 有限數目吉赫的，
事物有限數目 它可以每單位做的時間。
因此，如果有更多的人在 世界打你的服務器，
意外記錄 如果您錯誤，一樣好
能保持這種負載關閉服務器。
加，尤其是在一個移動 如果你曾經device--
登錄my.harvard或 耶魯大學的網絡標識符號或類似的，
有這有很多的等待時間 網站一樣，因此它需要，
就像，一個該死的兩秒鐘的時候。
然後，我的上帝，如果你輸錯， 那麼你就要打回去重做。
因此，有延遲，特別是 在速度較慢的網絡連接。
但JavaScript的，因為 它運行在客戶機上
而並不需要來回走 跨越一個潛在的慢速互聯網
連接，就可以得到 幾乎在瞬間反饋。
>> 所以，讓我們來看看這個。
讓我打開了形式-0和 看看這裡的HTML。
而且，我們只看到發生了什麼事情。
這是他們的一種形式 行動register.php。
我只是用得到這麼 我能看到的網址。
但是，對於密碼，我們就一定要 要改變這種張貼在現實中。
以下是類型的文本輸入字段。
這裡的另一個輸入 字段類型的密碼。
在這裡，如果你從來沒有見過， 型複選框的輸入端。
>> 但有沒有JavaScript的 在這裡任何責任。
這僅僅是HTML的 去register.php。
但是，在一個版本，其中，我 開始讓那些彈出窗口，
讓我們看看究竟會發生在這裡。
在一個版本中，什麼 我要see--我
以為我可以拖延足夠 有足夠的話，但我跑了出去。
>> 在版本埃德蒙頓我們走吧。
在一個版本中，注意到following-- 而不是最好的實施中，
但是這是我的第一次。
請注意，以下 形式，我有一個腳本標記。
而script標籤意味著， 哎，瀏覽器，點擊這裡
進來一些代碼， 通常情況下，JavaScript的。
現在，請注意我在做什麼。
在line--我可以勉強 讀它 - 第32行，它說，
VAR form--所以給我 一個名為表單變量。
然後得到document.getElementId “註冊”的
這是什麼？
好了，讓我退了這裡。
並注意啊，我給表單元素 一個任意的描述性的想法
登記。
因此，這給了我一個變量 讓我搶這個節點，
在樹的矩形稱為形式。
form.onsubmit手段，嘿嘿瀏覽器， 註冊事件偵聽器
在這種形式。
換言之，當這種形式是 提交後，執行下面的代碼。
它並不需要，因為一個名 為什麼你需要知道叫什麼名字？
你只需要知道 要執行的，ERGO
它是一個匿名或lambda功能。
並且函數 在這裡所有這些行。
而現在，說實話，即使你 也許沒有寫過的JavaScript
之前，它只是C和PHP邏輯。
因此，如果form.email.value ==“” - 因此，如果電子郵件字段為空，
罵為“你必須將用戶 提供您的電子郵件地址。“
否則，如果form.password.value 是在用戶的空白吆喝，
“你必須提供您的密碼。”
>> 更有趣的是邏輯， 如果form.password.value不
等於form.confirmation.value-- 並確認哪兒來的？
讓我快退。
好吧，我叫這個輸入 場在這裡密碼。
我這裡所說的這一個確認。
我可以把它叫做 密碼兩個或其他任何東西。
我只是邏輯檢查 這兩個是相同的。
Else--事實證明這是布爾先生 again--一個布爾值，該複選框。
所以，如果我說了，驚呼一聲point-- 如果不是form.agreement.checked，
罵的用戶也是如此。
>> 所以這個語法，你會看到的是 在JavaScript中很常見，
在這裡，你有這樣的點號。
開始時你有一個對象在這裡。
您下潛較深到到 如密碼屬性。
然後你在它的實際價值得到。
再次，這裡是輸入。
這裡是名密碼。
而它的價值是什麼的 人類實際上已經輸入的研究。
>> 因此，在所有的這些 的情況下，我返回false。
但如果沒有，我返回true。
所以，現在我們看到了 引人注目的使用時，
您將返回false來 停止哪些用戶做
並讓他或她的選擇 一次或再次輸入。
否則，我們返回true。
>> 讓我介紹一款 這等變異只
其種子有一定的了解。
那麼，在這2版本，外形2-- 我會用一揮手做到這一點。
這一點，對於那些好奇， jQuery的版本，
你們誰可能要 涉足該特定庫。
但是讓我們start--和什麼問題嗎？
讓我停頓了片刻，因為 這是快了許多。
>> 但這裡的好處是，所有的 代碼幾乎是相同的。
新的東西是DOM是什麼？
什麼是這些矩形？
這些是什麼節點？
什麼是匿名函數？
什麼是事件處理程序？
但值得慶幸的是，大多數這只是 兜了一圈，比如說，從零一周。
好的。
因此，一些稍微更有趣嗎？
好吧，首先，讓我去 進取，不斷開拓谷歌地圖。
而且你會發現，一 那一刻，在一瞬間，
注意會發生什麼時 我點擊速度不夠快。
而在哈佛這方面是如此 快，你真的不注意到它。
但是，你有什麼樣的一種見 如果我點擊並拖動真快？
這些你在網上看的， 如果你慢這0.5倍的速度，
你可以看到這更好。
>> 發生了什麼事剛 之前，我點擊和拖動？
讓我來這裡 - 讓我做 別的東西，比如90210。
讓我們遠去。
這是真快，太。
如何迪斯尼世界？
在那裡，我們走了。
確定。
你看見什麼了一秒鐘？
只是，像，廣場，對不對？
佔位符瓷磚？
>> 那麼，這是怎麼回事嗎？
谷歌地圖是一個很好的例子 這就是所謂AJAX這種技術。
而這正是我們將開始 使用JavaScript的一個特別
誘人的方法。
早在一天，有 這個網站叫MapQuest的。
我應該已經採取了 從20世紀90年代截圖此，
在這裡，如果你想 看看在這裡在地圖上，
你會從字面上點擊箭頭 在頂部的顯示你
不同的正方形的地圖。
如果你想向左移動，你 點擊即表明您一個箭頭
不同的正方形的地圖。
而一些網站今日仍然這樣做。
但即使Mapquest服務已經得到 更好的，如谷歌地圖。
>> 相反，有什麼更好的這些 天是使用AJAX網站。
AJAX--另外稱為 異步JavaScript和XML，
這是說只是一種奇特的方式 一種技術或技術，
允許使用JavaScript的瀏覽器 作出額外的HTTP請求
後頁被加載。
所以，這是什麼意思？
那麼，這將是一種 惱人的在Gmail
如果每次你需要時間 檢查你的郵件，
你字面上按下Control-R或 命令-R或單擊刷新按鈕
而整個該死的網頁將重新加載。
對嗎？
它會閃爍白色 可能是第二個。
你會看到愚蠢的進度條。
而只是為了看看是否有新的 郵件，整個網頁和網址
你在必須重新加載。
>> 但是，這不是在Gmail中會發生什麼。
對嗎？
當你在一個新的電子郵件 Gmail的，是什麼在屏幕上發生什麼呢？
它只是顯示了，對不對？
它只是奇蹟般地出現 如在表中一個新行。
這實際上涉及到 體面的複雜性。
其實，如果你仔細想想這棵樹， 這雖然是一個簡單的在這裡，
Gmail--我不得不看 在代碼是sure--
可能有一個HTML表格或者 它呈現一個無序列表
您的每一個收件箱中的郵件作為。
>> 所以，如果你想像這有 是當你的內存樹
使用Gmail看起來那種類型的 這樣，當谷歌意識到，哦，
你有一個新的電子郵件，它不 要重建整個樹。
相反，它想找到該節點中 代表您的收件箱中的樹
並且只需插入一個新的節點。
>> 所以非常相似PSET五，在那裡你 不得不節點插入到一個哈希表，
同樣做谷歌，通過 它寫的JavaScript代碼，
遍歷這棵樹，找出其中 是窗口的那部分的收件箱，
然後插入新行。
而一個新的行只是表示一個 或多個在一個樹的新節點。
>> 所以AJAX是這種技術 ，允許這一點。
一旦你訪問過的URL， 然而，瘋狂的長是，
而一旦頁面 被加載，你仍然可以
抓住從多個數據 internet--無論是
電子郵件或map--的瓦 抓住它幕後
然後將其插入到頁 從而使人體並不真正
要等待它。
>> Facebook的Messenger的工作方式相同。
任何數量的其它websites-- 呵呵，其實，即使是這樣。
我的意思是，這是坦率地種， 一個惱人的功能，這些天。
如果我開始尋找這個cats-- 是一種可怕的用戶體驗。
這只是開始搜索我。
那麼它是什麼做的？
該網址還沒有真正改變 自從我開始打字。
但是，什麼是整個會 wire-- OK，嗯有趣。
什麼是整個會 線在這裡只是變得怪異。
>> 確定。
因此，讓我繼續前進，並檢查 元素，並進入網絡選項卡
並努力使這種 技術少約貓。
作為I型，從字面上看，貓 還有 - 發生了什麼
per--我不會點擊的。
好的。
所以到這裡，發生了什麼事每 一次，我輸入一個字符，顯然？
像，水平低？
發生了什麼事，每個那些 字符我打字在我的鍵盤？
是嗎？
聽眾：[聽不清]。
>> DAVID馬蘭：沒錯。
每個這些字符是 去谷歌，一次一個。
他們正在建立一個字符串 他們的服務器上，表示
一切我已經輸入了迄今。
每一次我型 另一種性格，他們
使用一個自己的秘密武器 搜索算法計算出，
他的意思是這種貓頁 或者這種貓頁面或之類的？
因此，在某種意義上說，它為我提供了一個 在更好的體驗我甚至不
需要完成我的想法。
事實上，這是一個很有用 首先，自動完成一般。
如果他們的算法是不夠好 如果我的搜索都是顯而易見的，
我不必鍵入整個單詞。
他們會告訴我是什麼 在實際上，我尋找。
那麼，谷歌稱之為即時 搜索只是使用AJAX，
使用代碼，允許他們請求 通過網絡瀏覽器的其他內容
背後使用這種場景 新的語言，JavaScript的。
因此，我們必須留下一兩分鐘。
而讓我叫我的好友 科爾頓起來搬上舞台，
因為它似乎 特別有趣的最後一次
引進技術 你們有些人
已表示有興趣 在最終的項目。
我們認為這會很有趣，使 一個志願者，不過，今天
向您展示的除了 這可以讓你 - 是啊，
只見這手第一次。
上來吧。
非常出色地完成。
幹得好。
我將這個項目上 屏幕上一會兒就好了。
你叫什麼名字給大家？
>> 全民教育：我是全民教育。
>> DAVID馬蘭：ETHA？
>> 全民教育：全民教育。
>> DAVID馬蘭：全民教育？
>> 全民教育：是的。
>> DAVID馬蘭：很高興見到你。
好的。
讓我得到這個準備。
你過來給 中間用科爾頓在這裡。
什麼科爾頓在他手裡 今天是一個遙控器。
因此，而不是只是站在那裡一 三維世界中四處尋找
作為科爾頓那樣，現在EFA可以 實際上走動通過往上走，
下，左，和右像 任天堂或Xbox控制器。
全民教育：我要掉下舞台。
DAVID馬蘭：我會的 站在大致在這裡。
但是，這是一個危險。
確定。
因此，繼續前進，把那些。
讓我繼續前進， 切換到此處的屏幕。
讓我把燈光調暗。
而科爾頓，讓我 走到你旁邊的立場。
>> 難道你想在這裡解釋一下 與MIC我們在做什麼？
在這裡你去。
>> COLTON：當然。
所以現在我們 加載了魔環，
我想operating--不工作 系統，但主要程序，其中
您可以訪問所有的遊戲 該應用程序存儲庫中。
所以現在，應該說 輕點觸控板開始。
觸摸板將是對 右側的耳機。
所以，儘管tap--
全民教育：哦，伙計。
DAVID馬蘭：是啊，你去那裡。
質量的全民教育是看到 高得多的品質。
這僅僅是在Wi-Fi在這裡。
COLTON：你那麼什麼 要想做的事情
看起來是朝上方 右邊的屏幕。
是的，在很右上角的那場比賽。
然後，當你選擇 它，再次點擊觸摸板。
我認為它Dreadhalls。
然後這裡A--這裡，讓 我握住你的眼鏡給你。
>> 所以，我只是給了他一個控制器。
所以，現在他能控制比賽。
他可以左右移動之類的東西。
因此，繼續前進，仰望上方。
您應該看到新遊戲。
所以，儘管你可以做到這一點。
現在，你應該能夠控制 自己與控制器，
還有，一旦 遊戲加載了這裡。
這可能是有點嚇人。
>> 全民教育：現在你告訴我。
確定。
>> COLTON：好吧。
所以，請確認您可以走動。
確定。
你可以四處走動。
完善。
所以，如果你往下看，你有一張地圖。
地圖顯示您身在何處。
你可以看看周圍的房間。
您可以完全轉身。
是的，沒錯。
轉身。
>> 所以，看看你的左邊。
我覺得有東西，你可以 拿起放在房間桶。
>> 全民教育：我如何獲得 映射出的方法是什麼？
COLTON：查一查。
只要看看了。
好的。
你去那裡。
現在，繼續前進，只是轉身。
所以看得更遠一些，以你的左邊。
繼續前進離開。
繼續找走了。
繼續前進。
是啊。
>> 全民教育：哦，這樣。
>> COLTON：是的。
走向它與控制器。
你去那裡。
現在，應該說把它撿起來。
你去那裡。
把它撿起來。
好的。
現在，讓我們走出這個房間。
繼續前進，走到那扇門。
所以，你要hold--它說 按住按鈕，迫使它開放。
所以，儘管並按住該按鈕。
是的，迫使其打開。
好的。
幹得好。
現在，我們走出了房間。
所以我要離開休息了 給你，看看你了解一下。
全民教育：我不會在黑暗的房間。
哦，等等。
現在我必須去暗下來的大廳？
好了，我要回去[聽不清]。
COLTON：好吧。
一些更多的項目回暖。
看起來像一些硬幣。
這是一個鎖定選秀權。
所以，如果你發現一個上鎖 門，你可以使用。
你害怕嗎？
>> 全民教育：還沒有。
COLTON：OK。
>> Pretend--呀。
只是假裝你 其實站在那裡。
如果你把around-- 你得習慣它。
但是，這是有道理的。
DAVID馬蘭：雖然全民教育繼續 玩，因為我們可以做到這一切的一天，
我們都可以踮著腳尖在這裡。
但是，我們確實有另外兩對， 如果你想拿出和發揮。
否則，我們將看到 你接下來的週三。
感謝您對我們的志願者今天。
[掌聲]
>> [MUSIC - “宋飛正傳主題”]
揚聲器1：好吧，我 把一個新的PL卡口上。
我只是改變了OLPF--
>> 揚聲器2：那麼是什麼 到底在做什麼？
>> 揚聲器1：好吧，每個人these-- 在這裡，我會告訴你這一個在這裡。
你可以看到它在這裡。
>> 揚聲器3：我覺得我好這些。
你要多一些？
>> 揚聲器4：沒有，我很好。 [聽不清]。
>> 揚聲器3：沒有，[聽不清]。
有一些。
揚聲器1：不同的顏色。
揚聲器2：確定。
揚聲器1：所以最終什麼 所做的就是調整顏色of--