[Powered by Google Translate] [第9週] [戴維·J·馬蘭 - 哈佛大學] [這是CS50。 - CS50.TV] 好的。歡迎回來。這是CS50，這是第9週開始。 今天，我們特別側重於設計，不再在C的背景下， 但在的背景下，PHP和SQL位和一些JavaScript， 特別是朝雙方的pset 7月底，最終的項目。 事實上，在這一點上，如果你是在最終的項目 大概一個小時前，你至少開始給一些思考 最終的項目，你在想你想與1或2個同學， 如果你無法連接同學， 隨意填寫在cs50.net/partners/form。 它會問你你是誰，你在想的是什麼樣的項目， 你住的地方只是後勤方面的原因。 然後，如果你要留意在未來一周左右的電子表格URL， 然後，你可以看到一個只讀版本的谷歌文檔 我們正在收集這方面的信息。 所以，如果你想與別人，通過各種手段隨時接觸到人 通過這種機制。 但大多數人做的工作獨奏。這是完全正常的。 所以，不要覺得這是不以任何方式強制性的。 上週五，這只是我和幾個在這裡的球隊， 最空的影院。 有3個遊客坐在上面，所以這是一個有點尷尬的。 我們談的是數據庫和我們談到的pset一點點。 如果你沒有碰巧趕上上的視頻只是還沒有，這是罰款。 我會盡力定義的任何條款，否則，我們會想當然地 根據上週五的演講。 但今天我們要嘗試讓大家給點意見 不只是能夠做這樣的事情的pset 7 但真正了解發生了什麼事情引擎蓋下的， 特別是一些抽象的functions.php文件中，我們將在 讓你的生活更容易一點，但讓你最終明白 所以，當訓練車輪脫落，在幾個星期後，你仍然可以生存 在現實世界中，沒有任何的CS50的框架下你做這個東西。 這$ _SESSION，對於那些你熟悉的人 已經趕上了上週五的視頻，是什麼會議，讓我們做 在一個基於PHP的Web應用程序？ 這是一個超全局變量，這意味著它類似的精神GET和POST 和其他幾個人，但是這是什麼東西有用嗎？ 什麼是會議？是啊。 [學生]登錄。 你說什麼？ [學生]登錄記錄。的確，。 在pset中7，我們正在使用的這屆超全局，以方便登錄。 這個超全局的好處是，它是一個關聯數組。 一個關聯數組，召回，僅僅是一個數組，但其索引不再是數字 像012。它們可以是數字或它們甚至可以是字符串。 因此，如果你的pset 7跳入，你可能還記得，我們​​存儲的關鍵ID 裡面的這個關聯數組的值是123 - 無論當前登錄用戶的ID。 這樣做的動機是，即使用戶訪問了本地 或我的網站更一般的，然後他們記錄中， 即使他們不點擊一個鏈接或返回到我的網站，5分鐘 或者甚至一個小時，甚至一天，但他們離開他們的瀏覽器窗口打開， 通過超全局，我記得他們登錄。 換句話說，它可以讓我稍微長期什麼我想知道的關於用戶存儲。 你也可以想起來真是一個購物車的化身。 像亞馬遜這樣的地方顯然是讓你把東西放進了購物車， 但HTTP，權力網絡的協議是無狀態的 在這個意義上，當你訪問一個網站， 在大多數情況下，你也別有一番不間斷的網絡連接 您的瀏覽器和服務器之間。 只要你下載了HTML，JPEG和GIF文件和所有這一切， 連接消失，你只是有一個從服務器複製的HTML和諸如此類的東西。 但是，如果服務器要記住關於你的東西， 在服務器上記錄這些信息的負擔。 所以你的程序員誰控制服務器 可以把任何你最想在這個超全局關聯數組 ，這將是有下一次用戶回來， 無論是分鐘，甚至幾天後，除非關閉瀏覽器窗口， 在這一點SESSION消失。 因此，它是短暫的存儲，它的非持久的，它的意思走 只要用戶關閉瀏覽器 - 不只是選項卡中，往往是整個的瀏覽器， 從而有效地註銷用戶。 所以，事情其實這是怎麼實現的呢？ 讓我們快速瀏覽一下我們看一個簡單的例子，在上週五。 對於那些不熟悉，它是像這樣簡單。 這是一個網頁，其唯一目的就是要告訴我 多少次我曾參觀過這個頁面。 這是第一次來這裡上週一，我曾經訪問過這個網站，所以說0次。 但是，如果我開始重新加載這個頁面，它說1次，2，3，4，5， ，這最終將只是繼續向上計數，起來，起來，起來，起來 其實我每次單擊刷新就可以了。 所以，這是怎麼工作的呢？讓我進去，這個文件稱為counter.php。 它的上半部分是藍色的意見，但有趣的是在這裡。 第13行，我們調用這個函數session_start的， ，這簡直是所有你需要做的，如果你想要訪問 這個特殊的超全局變量名為$ _SESSION。 這使得這一切成為可能，我們可以看到在某一時刻怎麼說都是可能的。 在第16行通知，我在做什麼。 如果“計數器”的鍵，調用計數器 - 換句話說，索引值 - 存在這個數組裡面的所謂的會話，然後我在做什麼與它下面的行嗎？ 第18行做什麼？ [聽不見的學生響應那是什麼？ [學生]保存的價值。好。 它的值存儲在會議現在在一個新的本地臨時變量， $計數器全部用小寫。 請注意，PHP已經有點懶。 請注意，我們沒有任何提及的整數或浮點數或字符串，或類似的東西， 因為PHP是弱類型，你沒有指定類型的變量， 在這種情況下，在這裡我還沒有甚至宣稱它。 我聲明這些花括號內的，不像C，這其實是沒關係的。 無論怎樣深層嵌套的變量的聲明是在PHP - 內部的，裡面的大括號和大括號 - 在那一刻，它會在時間存在的程序的其餘部分， 為更好或更壞。 因此，它立即成為全球性的，只要你定義它，因為我們在這裡做的。 否則，如果我沒有發現有什麼事，在SESSION超全局， 我似乎初始化這個變量的計數器為0， 只是假設該用戶從未來過這裡。 然後，這當然是遞增計數器如何？ 我裡面的這個關聯數組的值更新 通過設置它等於任何逆流+ 1。 如果我向下滾動的HTML頁面，它其實很簡單。 我在本頁面身體，“你已經訪問此網站和太次。” 這是一個PHP構造。 如果你這樣做<=，有效地相當於什麼功能？ 這真是像printf的東西，我們已經見過很多次在C， 雖然你可能已經知道，從規範的pset 7， 打印也是一個函數，只是打印出一些東西，但它並沒有實際使用的格式代碼， 實際上，你可以說迴聲。 他們都是非常輕微的淨影響是不同的，即使最終。 因此，使用等號只是一個優雅的方式做它 更簡潔，否則你可能可以。 所以這是此網站。它打印出計數器的值。 這是怎麼實際發生的事情嗎？ 您可能還記得一個星期前，我們開始尋找下面的罩 在網頁如何使用該Inspector選項卡。 Chrome有Mac版本，Windows版本，甚至Linux版本，這兩者 Firefox和IE瀏覽器也有類似的機制，讓你有這樣的內置調試器 的瀏覽器的內部。 讓我們來看看下面的。 在這裡，我們有一大堆的標籤記得，最左邊的一個元素， 不管如何godawful，HTML和JavaScript是在一個頁面， 記得，與“元素”選項卡中，您實際上可以瀏覽HTML層次 漂亮和整齊。 所以，如果你想學習谷歌或Facebook這樣的網站 還是真的任何網站，你可能會更好過 這樣的源代碼，而不是觀看原始源， 它可以是一個爛攤子，我們已經看到了，特別是在谷歌的網站。 所以，如果我不是在這裡點擊“網絡”選項卡， 讓我們來看看發生了什麼事情，就當我訪問這個頁面。 首先，讓我清楚我的緩存。 我要進入Chrome瀏覽器中的設置，然後去歷史 然後清除所有瀏覽數據。 你可能會用於其他目的，[笑聲] 但是當它涉及到開發的網站，它實際上是有用的 - 如果你笑，你知道的。 [笑聲] 它實際上是非常有用的網站開發時，因為現實的情況是 緩存緩存的HTML文件，JavaScript文件的事情，比如餅乾之類的東西 實際上可以成為一個很頭痛，因為如果無論出於何種原因 瀏覽器決定緩存一些文件，但你已經​​切換到文件服務器上的 但瀏覽器還沒有真正認識到該文件已經修改 ，因此不實際重新下載它，甚至當您單擊Reload按鈕， 最萬無一失的方法之一，只是確保故障是不是與您的代碼， 這是瀏覽器的行為，是要在您的瀏覽器 清除全部歷史記錄，以便有沒有混淆。 然後，如果你真的想成為偏執狂，退出瀏覽器，重新啟動它， 然後確保所有工作。 因此，在短，清除緩存是做開發的時候。 所以，在這裡，我們有“網絡”選項卡。 我以前曾訪問過的網站的9倍，但讓我繼續，並單擊“重新加載”。 我是回落到0。 實際，讓我們看看它是如何，這屆超全局正在實施。 1 HTTP請求，我要點擊， 這個調試窗口，讓我看，裡面的。 在這裡，我看到的只是來自服務器的響應，這是不感興趣的。 我已經看到了這在任何數量的方式。 但在技術上是有趣的標頭。 如果我向下滾動，並專注於請求標頭，然後單擊“查看源文件”， 我要看到的是字面上的HTTP請求 剛去從我的瀏覽器到服務器， GET是最重要的詞和/ counter.php的文件名， HTTP/1.1只是我的瀏覽器使用的HTTP版本。 這裡是一個小小的提醒，從瀏覽器到服務器的服務器的名稱是什麼 它想聊得來。 那麼剩下的這有時是有趣的，但現在不相關權利。 這僅僅是種的好奇心。 隱秘，雖然這個字符串是在任何時候，您的瀏覽器訪問一個網站 通知服務器你使用什麼樣的瀏覽器 你使用的是什麼操作系統和什麼版本上。 所以，如果你曾經想知道如何像CNN網站和諸如此類的東西 知道的百分比是在網絡上，PC用戶的Mac用戶， IE用戶，Chrome用戶之類的，這是因為我們所有的瀏覽器 告訴每一個單一的網站，在那裡我們是什麼。 這並不一定包含個人身份信息， 但它告訴服務器你的IP地址是與您使用的是什麼瀏覽器和操作系統。 所以，在這個信息。 但是，什麼是更有趣的，當涉及到這些會議是響應頭。 讓我單擊“查看源文件”下的響應。 有趣的是幾件事情。 1，我們回來的狀態碼為200。 我們從來沒有看到此狀態碼，因為這意味著一切都很好。 它的字面意思是別的東西還好。 什麼是數字，我們有時會看到這是不好的？ [學生] 404。 404，未找到文件，403你可能被絆在了， 這是被禁止的，這意味著你忘了屬性的東西，最有可能的。 有一堆的人。 在這裡，這是一個有點瘋狂。 我真的寫了這個文件，幾分鐘前，將其粘貼到gedit的。 為什麼這頁在1981年之前到期，真的是一個網絡？ 這是怎麼回事呢？ 聽不見的學生響應時間戳記。但是，為什麼呢？ 這是有點武斷，但實際上它是有用的。 這是在說我的瀏覽器，這是PHP文件，你只是要求已經過期。 事實上，30年前到期。 但到底是什麼，究竟意味著什麼？ 這只是意味著，當用戶下一次訪問這個頁面， 無論是重裝或在地址欄輸入URL， 確保您去獲取新的副本。 這是清除緩存的一個例子， 一個愚蠢的字，僅僅表示試圖阻止瀏覽器 從實際緩存HTML，從服務器發送 ，這樣你就沒有不小心碰到重裝，然後看到相同版本的文件。 事實上，你想向服務器發送一個新的副本。 因此，事實上，它的1981年只是意味著該設備的選擇 任意一個過去的日期。 但是，真正的的多汁線是現在這一個。 即使在50與Cookie，你可能很熟悉。 截至目前，尤其是在那些不太舒服或在兩者之間， 什麼是Cookie在你的理解 即使我們即將讓您了解更多的技術？ 一個cookie是什麼？是啊。 [學生]關於用戶的信息，想，如果他們寫自己的用戶名或東西。 好。這是關於用戶的信息，是否已經輸入自己的用戶名。 Cookies是一種方式，使服務器可以記住用戶的東西。 真的是一個cookie是一個文本文件或部分的字節序列 您的瀏覽器內的服務器的種植， 和內部的該文件或那些字節之間是一些標識符種。 也許這是從字面上您的用戶名，但更多的時候，它的東西，看起來更神秘的 這樣的事情在這裡 - bo8dal3ct等等 - 這非常大的字母數字字符串 這真的只是意味著你是一個獨特的標識符。 或者，你可以認為它排序的虛擬郵戳。 如果你去一些俱樂部或遊樂園，要記住，你實際上已經支付 了，他們把你的手的某種紅色的小標籤上， 並提醒人們，在你已經支付的計數器 你可以來來去去，請你。 Cookies是精神，有點類似。 我第一次訪問這個網站，我只是做了我的緩存清空後， Web服務器，在的家電在這種情況下，把我的手一戳就 他的名字是PHPSESSID，會話ID， 它的值是這個很長的字母數字字符串。 所以，現在排序的字樣，下一次我打我的手，重新加載 或手動訪問這個URL在瀏覽器中， 我的瀏覽器定義HTTP將展示郵戳 再次，一遍又一遍。 因此，即使服務器沒有必要知道我是誰， 他們至少知道，我的相同的用戶或者至少，更具體地，在同一個瀏覽器。 所以這是最終SESSION的超全局變量是如何實現的。 服務器不知道你是誰，當你重新審視一個網站，第二次或第三次 除非你提出這個郵戳。 只要你提出，郵戳， 基本上進入它自己的一個小數據庫的Web服務器 和檢查，還好，我剛才看到了郵戳的用戶bo8dal3ct等等。 讓我看看什麼樣的信息存儲程序員 內關於該用戶的超全局， 然後讓我確保數據是再次裡面的SESSION超全局 因此，程序員可以重新訪問這些數據 即使它被設置一些前的幾分鐘或幾小時。 所以，換句話說，餅乾，得到了一個壞名聲了一段時間 因為在瀏覽器中的不安全感，他們真的可以侵犯我們的隱私而所有這一切， 實際上，他們有很大的效用，因為沒有他們 你將不停地登錄到您所訪問的每一個Facebook頁面 或閱讀，如果瀏覽器沒有一些方法，記住每一個Gmail電子郵件 你已經通過認證。 因此，以這種方式Cookie的跨線來回發送。 有關cookies的另一種好奇心，尤其是在這裡，這是完全明文。 有沒有加密，在這裡任何， 事實上，我使用HTTP的時刻。 我們最喜歡的時刻之一，這是2年前，在CS50 是一個工具叫做Firesheep左右的時間就出來了。 這是一個免費的軟件，是由一名安全研究人員 作為一個為社會敲響了警鐘，說是多麼殘暴實施 在網絡上的一些認證機制。 因此，一段時間後，Facebook是幾乎完全通過HTTP，沒有HTTPS。 而且，即使你不知道加密的工作原理，S是安全的 所以這意味著有至少涉及一些加密。 沒有使用Facebook的用戶名和密碼進行加密， 但只要你看著你戳或您的郵件或新聞源， 所有這一切是未加密的。 所以，是的Gmail，直到一年或2年前。 您登錄的任何時間，是的，他們使用安全的加密， 但此後他們沒有。原因可能是什麼？ 為什麼不直接使用加密算法的所有的時間，在這樣的情況下使用呢？ 那是什麼？我覺得我聽到的東西。 [學生]速度。 速度，對不對？有辦法解決這個問題。 但是，如果你只是一種認為它在邏輯上，如果你加密的東西， 你有至少做一些更多的工作。 在pset中，當你實現凱撒或維瓊內爾，甚至破解， 只是打印一個字符串是比較容易的。 加密，然後打印一個字符串至少需要多一點的工作。  對於超受歡迎的網站，如谷歌和Facebook， 如果你必須為每個用戶做更多的工作，為他們訪問的每一個網頁， 這只是需要更多的CPU時間。 如果您需要更多的CPU時間，你可能需要更多的服務器， 這意味著你可能需要更多的錢。 這麼多年，這真的不是最好的做法。 人們會時，才需要使用SSL加密。 但事實證明，Firesheep這傢伙超清晰， 當你們誰是目前在Facebook上 - 出於好奇，讓我們來看看如果你能坦白。 如果你在Facebook上現在在一些標籤，即使它的前景化， 您的網址是HTTP或HTTPS？ 多個學生] S。S？ [笑聲] 好吧。任何HTTP？僅有1？好吧。 所以，我們所有的人都可以破解，現在那傢伙的Facebook帳戶。 在大多數情況下，這已經成為默認打開的，至少在一些網站。 長話短說，如果你的網絡流量是不加密的， 不僅HTML回去，來回的WiFis未加密的， 所以不要像餅乾的東西晃來晃去，整個空氣 沒有任何形式的加密。 所以，如果你只是有點編程精明還是有點谷歌搜索技巧 找到免費的軟件，這樣做，所有你必須做的就是坐在星巴克 或坐在那裡的機場一般未加密的WiFi 只是看等關鍵字的Set-Cookie：PHPSESSID 因為如果你的技術知識，只是看的WiFi 可用於所有這種模式的整個空氣的比特流中， 然後，你可以說那傢伙的的PHPSESSID發生是bo8dal等等。 然後，如果你是足夠精通技術的或合適的工具， 然後，你可以只是重新配置自己的瀏覽器開始呈現，郵戳 Facebook.com，而Facebook只是要假設你是那傢伙 因為他們知道是不是你是誰，但你有這樣的唯一標識符。 所以，如果你偷，唯一的標識符，它作為自己的Web服務器， 他們只是要告訴你，人的新聞源 或該人的消息或戳。 我想谷歌現在如何激活HTTPS的Facebook或許。 但它確實是那樣簡單。 因此，Facebook和谷歌之類的已經變得非常好，在此， 但隨時留意您訪問的網站不使用HTTP 有某種敏感信息， 無論是財政或個人等。 如果他們不利用這一點，很可能是這樣的cookies是很容易被竊取， 然後偽造的，而這正是Firesheep做。 你沒有成為一個程序員。 所有您需要做的是有一個互聯網連接，下載這個免費的工具， 會怎樣做是你登錄，然後它會顯示你的Facebook名稱 每個人都在桑德斯，在這個特殊的示範，在你身邊 和所有你需要做的就是點擊他們的名字和過程自動化軟件 嗅探到Facebook作為自己的，該cookie， 瞧，你正在登錄。 因此，這是另外一個人“不這樣做”，正式。 如果你有你自己的家庭網絡，你想修改，通過各種手段， 但認識到這一點並在大學環境中交叉的行。 但這裡的目標是真正強調的不是如何做到這一點 但如何抵禦這些事情的。 瑣碎的解決方案，即使它本身是有缺陷的， 是真正降低使用任何網站，不使用HTTPS不斷。 所以越來越多的網站，如Facebook和谷歌有複選框 在這裡你可以選擇這樣的事情， 和銀行這幾年有類似的原因。 因此，只要一點點的恐懼因素，如果我們能。但就是這樣的縮影。 這是，服務器如何記得你是誰。 只要他們能記住你是誰，他們可以記住任何關於你 程序員已經存放在裡面的這個特殊的超全局變量名為$ _SESSION。 的pset 7，我們使用它的平凡，只需要記住一個int， 即獨特的ID的用戶登錄， 所以我們知道他們曾經做過的那樣。 然後在會話或餅乾或類似的任何問題？ Firesheep並不能很好地工作了， 你必須把你的電腦變成一個特殊的混雜模式 所以其實你聽，除了自己的流量。 所以，如果你正在下載Firesheep，知道這是不是很容易 因為它曾經是證明。 好的。不這樣做，在桑德斯。在家裡做。 數據庫。 我們在很刻意的pset 7的事情之一 是我們給你一個示例數據庫中的表，有一些用戶ID的用戶， 一些用戶名和其中的一些加密的密碼。 ，你會看到，如果你還沒有的話，你要一點點改變表。 你要到每個用戶在該表中添加一些高速緩存， 你要添加另一個歷史表中，一個投資組合表， 或也許調用別的東西。 但在思考如何做到這一點，讓我們打開此工具 我們上週五，但如果不熟悉，該設備自帶的工具 所謂的phpMyAdmin，這是巧合的是用PHP編寫的， 但其目的在生活中，我在這裡登錄的jharvard與深紅色後， 是給我一個用戶友好的方式查看和更改我的數據庫。 我在設備上運行的數據庫是MySQL的。 這是非常流行的，它是一個免費的開源的數據庫，奇妙的易於使用的， 尤其是前端是這樣的。 這個工具允許我做什麼，例如，圍坐在桌子旁打個招呼。 讓我繼續這樣做。 上週五，我們創建了一個表叫學生是超級簡單的。 它有3列 - ID，名稱，與電子郵件 - 我手動插入一對夫婦的行 像大衛和邁克在這個特殊的例子。 讓我們這一點，讓我們假定我們要記住更多的 不僅僅是用戶的姓名和電子郵件有關。 讓我點擊在頂部結構。 再次，在pset引導您完成必要的步驟，在這裡， 所以不要擔心，如果一些這方面是有點快。 然後，我要點擊這裡。 我要添加一些列後，電子郵件 因為我想補充的類似房子。 我忘了記錄學生的家。 讓我單擊“Go”，現在我們有這種形式，不幸的是，由左到右寬一點， 但我現在就打電話給這個場子裡的名稱， 的類型，我現在必須做出選擇。 因此，讓我們有一個簡短的不同類型在MySQL中聊天 而PHP是弱類型的戲劇快速和寬鬆的類型， 在一個數據庫中，特別是它的超級重要的實際使用輸入你的優勢 因為一個能為你做的事情，MySQL和其他數據庫引擎 是確保你不把假的數據插入到數據庫。 這是一種錯誤檢查，為您提供的免費。 對於房子，我們顯然不希望它是一個int，這是一個在MySQL中的32位值。 我們也想談一談有關數據類型為varchar（星期五），它代表的可變長度的字符。 這是什麼？這允許你指定你想這是某種形式的字符串。 你真的不事先知道它有多長， 所以我們的房子的名字可以武斷地說是255個字符， 但你可以去32，64 - 任何數量真的。 但使用的數據類型為varchar的一個字段名為字符的優勢是什麼？ 如果我只是直觀地向下滾動，發現有字符的數據類型為varchar。 varchar是可變長度的字符，字符是一個固定長度的字符。 因此，僅根據這一定義，這些有什麼優勢或劣勢？ 換句話說，誰在乎的區別，為什麼要照顧你嗎？ 是啊。 [學生] VARCHAR具有更大的靈活性，但佔用更多的內存。 好。數據類型為varchar佔用更多的 - 讓我們來看看。我不知道，如果我聽說過這一權利。 你能再說一次好嗎？ [學生]我說的數據類型為varchar可能具有更大的靈活性，但它會佔用更多的內存。 有趣的。好吧。數據類型為varchar可能給你更多的靈活性，但佔用更多的內存。 後者不一定是正確的。 它依賴於上下文，但讓我們回來。 [聽不見學生的回答沒錯。 它實際上是字符的情況下，通常會使用更多的內存 因為一個字符，和C一樣，就像是一個字符串，它是一個字符數組。 所以，如果你說一個char字段的長度為255， 數據庫是從字面上去給你255個字符。 而如果房子是媽媽和6個字符總， 你這是在浪費超過200個字符。 因此，一個數據類型為varchar有效地使用盡可能多的字符是必要的 至最大量。 但其實你付出的代價是性能，具有潛在的。 如果你事先知道所有的字符串都將是8個字符 - 舉例來說，假設您所需要的密碼長度為8 - 上攻使用一個char領域的場合，雖然不是經常， 指定一個固定長度的東西，就像一個密碼 因為現在的數據庫可以更聰明。 如果知道，每個char領域，每一個列中的字符串的長度相同， 你回來的隨機存取功能。 您可以跳來跳去之間的各種字符字段在數據庫表中 因為覺得一個數據庫以行和列。 因此，如果每一個的字符串之一是相同的長度， 你知道，第一個字節是0，下一個字節8 然後16和24等等。 因此，如果所有的字符串均具有相同的長度，就可以跳來跳去更有效。 這樣就可以在性能方面的好處， 但通常你沒有提前知道的豪華， 所以一個varchar是要走的路。 下面是另外一個細節，甚至Facebook跑進最後。 詮釋是偉大的，我們排序默認情況下，使用任何時候，我們希望有一個數字， 但它只有32位。 而且儘管Facebook並沒有完全有4十億用戶現在， 肯定有一些人在那裡擁有多個帳戶 或帳戶已被打開，然後關閉， 因此Facebook本身，我相信幾年前從int轉換 ，被形象地稱為的BIGINT，這是64位，而不是。 因此，這是一個設計決策。 你會是幸運的，如果你的項目最終變成令人驚訝的啟動， 有4億美元和1個用戶，給予或採取， 在這種情況下，使用int類型可能會有點短視。 但在現實中，你的用戶表可能是罰款與int類型。 但對於類似的pset 7，喜歡你的歷史記錄表， 你可能有數以千計，數以百萬計的用戶如果演變成etrade.com。 所以，儘管你可能不會有超過4億的用戶， 隨著時間的推移，你有可能這些用戶有超過4億的交易 - 購買和銷售的東西在他們的歷史。 所以，如果你預期 - 再次，這些都是很好的，如果你有這麼多的數據的問題 - 如果你這樣做預測數據的大小超過一個int， 類似BIGINT不夠頻繁通過設計師的方向 因為人的數字，不會是一個問題， 但這個簡單的選擇一些更大的比。 我們正在使用的十進制pset中，它指定了固定的精度 這樣你才能避免浮點數和雙精度實數和類似的問題。 然後還有一些其他領域的。我們將揮動我們的手在一定程度上。 但是，日期，時間都在MySQL中規定的格式， 的優點是存儲日期的日期，而不是​​VARCHAR處理 數據庫可以格式化成不同的格式， 無論是美國格式或歐洲格式或類似的 - 但是你想要的 - 更有效地比，如果它只是一些通用的數據類型為varchar。 然後還有一些其他BINARY，VARBINARY，斑點。 這些都是二進制大對象，你也可以存儲二進制數據 以及作為在一個數據庫中的幾何數據。 但對我們來說，我們通常會關心int和VARCHAR處理之類的。 讓我們完成了這個例子的房子。 房子我要武斷地說是255個字符。 默認值，我們可以做到這一點。 默認情況下，我們可以把每個人都在奧美樓，例如。 這就是我們如何可以指定該數據庫 應確保有人總是有一個值。但我會離開即可。 事實上，住在校外，而不是在一個房子裡的人， 也許我真的要指定為房子的默認值是NULL， 然後我需要選中此複選框，如果用戶的房子是空的，也沒關係，告訴數據庫。 再次，這是另一種防禦機制，你可以把 所以你甚至不必一定把它放在你的PHP代碼。 該數據庫將確保事情是或不是NULL。 最後，屬性。 這些都不是真正相關的。 這些二進制，無符號 - 沒有為varchar有關。 指數。 有誰知道或記得有一個猜想指數是什麼 類似的房子嗎？ 其實這也是一個重要的設計決策，也比較容易。 對於那些尚未看到了，上週五我們短暫交談，有關主鍵。 在一個數據庫表中，主鍵的字段或列 唯一標識表中的行。 因此，在當前表中，我們的ID，我們有姓名和電子郵件。 這些是最佳人選是一個主鍵， 其作用是唯一標識行嗎？ 也許ID。 可以說，我們也可以使用又有何干？ 也許你可以使用電子郵件，因為在理論上，它的獨特之處 除非人共享電子郵件帳戶。 但現實情況是，如果您使用的是數字ID：1234， 只有32位，而一個電子郵件地址可能會是這樣的的許多字節或指定的字節。 因此，在效率方面的獨特標識符， 它往往是好的做法，只是使用int 即使你有一些的字符串的候選人，你可以說是使用。 對於類似的房子，這不應該是一個主鍵 因為只有1人可以住在奧美和Currier和1人。 同樣，這不應該是唯一的。 主要的區別和獨特的是，在我們目前的情況下，表， ID是主要的，但不是主要的原因，我們剛才提到的電子郵件是 - 性能 - 但它仍然應該是唯一的。 所以，你仍然可以強制執行唯一性，沒有提出索賠要求 ，這是一個超級重要的主要領域。 但是，這是非常有幫助的指數。 如果您知道您的最終項目提前，pset中7，一般， 這個場子裡將是你搜索了很多 利用選擇的關鍵字或別的東西， 那麼你就可以先發製人地告訴數據庫工作它的魔力 並確保在內存中，它創造了必要的任何花哨的數據結構 房子的基礎上，以加快搜索。 也許它會使用一個哈希表，也許它會使用一個鍊錶。 在現實中，往往使用一棵樹，往往是一個結構，稱為B-樹 - 不是二進制樹，但B-樹 - 這是一個非常廣泛的樹 你可能會看到在一個類CS124，數據結構類。 但是，總之，你不必須擔心，當使用智能數據庫軟件。 您只需告訴它，“索引字段，這樣我就可以更有效地搜索就可以了。” 如果你將其關閉，並你嘗試搜索數據庫中的每個人都住在奧美， 它會退化成線性搜索。 而且，如果你有6000的本科生都住在一些房子， 你要的全表搜索找到Matherites， 而如果你說的指數，希望它會是接近於對數搜索 找到這些類型的學生。 這僅僅是一個免費的功能打開， 即使它的價格是在一定的空間。 最後，自動遞增，這人工智能領域， 這意味著，如果它是一個int，你不想負責遞增它自己 每次有一個新的用戶，請檢查， ，被插入的每個用戶將自動獲得一個新的ID。 讓我們單擊“保存”，現在讓我們找出故障，這種設計。 如果我進入瀏覽，通知，邁克和我的房子是NULL。 我可以使用phpMyAdmin來手動修改。 在這裡我可以去和類型Mather中，然後按Enter鍵， 現在發現表是不同的。 但是請注意，我可以做別的事情。 大衛的ID為1，所以phpMyAdmin的再僅僅是一個管理工具; 這是不是您的用戶會看到。 所以，如果我不是單擊SQL選項卡往上頂 - 再次，pset中7為您介紹這些查詢 - 我可以手動執行的SQL結構化查詢語言命令 UPDATE房子='Pfoho'WHERE id = 1的用戶設置。 這些SQL查詢，精美的就夠了，非常可讀的由左到右。 更新用戶表，設置字段稱為房子Pfoho 在用戶的編號是1。 或者，我什至可以做電子郵件='malan@harvard.edu'。 所以，只要是我唯一標識，這將正常工作。 但是，ID往往是更高的性能，讓我們做到這一點。 讓我們單擊“轉到”。好了，lecture.users不存在。什麼是我的錯誤嗎？ 這裡實際上是所謂的什麼表？ 這就是所謂的學生，只是因為這就是我們所做的，在左上角。 這就是所謂的學生，而不是用戶。所以現在單擊“Go”。 1行受影響。查詢用時0.01秒。 如果現在我單擊“瀏覽”，現在馬蘭生活在Pfoho。 所以這是另一種味道的SQL，但在pset將引導您完成更多一點。 我已經在這裡有一個愚蠢的決定。 我認為，這個數據庫設計是低效的 因為更多的人，我想補充的學生表， 我們更多的我開始增加，我開始添加的TFS， 我們將開始看到此表中的冗餘什麼？ 是啊。 [學生]看到它的學生，我們使用的是相同的[聽不清] 相同的 - 對，沒錯。 所以，如果400人住在奧美，給予或採取， 此表最終將有400行說：“奧美”，“奧美” “奧美”，“奧美”，“奧美”。 我們浪費了所有的這些字節，那裡有一對夫婦的外賣店。 1，角落裡有瘋狂的情況：如果有人花了很多錢 並重新命名奧美，現在我們要改變我們的整個數據庫表。 這不會經常發生，但Pfoho一度被稱為北樓15年前， 所以它發生。不過，這還不是全部，引人注目。 更引人注目的莫過於一個角落的情況，如需要更新大量的數據 的數據庫就是為什麼你存儲MATHER一遍又一遍，一遍又一遍嗎？ 這是一個很大的字符，6個字符。 我們不能做，甚至比這更好，特別是對Pforzheimer？ 當然，我們可以做的更好比許多字符。 為什麼不直接關聯一個唯一的標識符，每間房子 並存儲為每個用戶？所以，讓我們來試試這個。 而不是只是學生使用表，讓我去我的演講數據庫在左上角。 請注意，這裡說創建表。 讓我創建一個新的表稱為房屋。 的列數為2。輸入。 現在，我有2個字段。 我要叫這名字，這將是一個varchar的長度為255， 但是，這是相當武斷的。讓我在這裡公約。 因此，把一個ID在這裡。讓我們給每一個房子的唯一標識符。 讓我們給每一個房子的名字。 讓我們指定的標識符將是無符號的，只是按照慣例，只使用正數。 讓我們先走，並把現在這是一個自動遞增字段。 我們還需要什麼別的嗎？ 讓我們繼續前進，並單擊“保存”。 現在我有第二個表。 順便說一句，這是稍微有點隱蔽的SQL命令 你將不得不手動鍵入，如果不使用的管理工具，像phpMyAdmin。 因此，另一個原因，我們使用它。 這是奇妙的有用的教學法，因為你可以按一下周圍的 並找出是如何工作的，只是複製和粘貼的phpMyAdmin做什麼。 但在CREATE TABLE命令是剛剛執行了，這裡是我的表。 讓我繼續通過點擊“插入”選項卡，並使用原始的SQL，而不是過於簡單化。 讓我做INSERT INTO房屋， 我說的房子是有一個價值的“奧美”的名稱。 就是這樣。這個語法是多了幾分神秘。 這是我們要插入的字段的名稱。 這是我們想要的值插入到這些領域。讓我單擊“Go”。 1插入的行花了0.02秒。讓我現在單擊“瀏覽”。 請注意，如果我單擊“瀏覽”，奧美，其ID是通過自動化的數字1。 讓我做另一個。讓我進入“SQL”選項卡上。 INSERT INTO的房子。的房子的名稱是將有一個的Pfoho值等等。 去！我能保持這樣了一次又一次。 或使用phpMyAdmin如果你覺得無聊，你可以直接使用“插入”選項卡 沒有輸入的原始的SQL。 例如，您可以一鼓作氣更快速地打字，宿舍樓裡，回車， 現在如果我們單擊“瀏覽”，有宿舍樓裡，一個ID為3。 因此，這就是我們所說的自動遞增。 但現在我們必須解決學生的東西。 在學生，現在的房子領域的數據類型是什麼？ 它應該是一個int，對不對？ 因此，這裡的目標是分解出，否則被稱為正常化，表 所以，我們不存儲信息的冗餘在我的表。 再次，我們在這裡的路徑是怎麼說的奧美，奧美， 奧美，奧美，Pfoho，Pfoho，Pfoho，Pfoho，這是非常多餘的 的浪費的字符。 所以，讓我繼續前進，點擊結構改變這種情況， 讓我繼續前進，檢查了房子，請單擊“更改”， 現在，我要改變這是一個int。 255不再是相關的。 讓我繼續說，很好，如果它仍然是NULL。保存。 表學生已成功地改變， 再次注意到房子是一個int。 順便說一句，忽略括號中的數字，當它涉及到整數。 這是傳統的原因。 早在一天當你沒有圖形用戶界面，而不是有一個命令行環境中， 10和11分別指定多少個字符，你應該顯示 在終端窗口中顯示的字段。 它有沒有做實際的字段的位長，所以，現在我們就忽略。 現在，我必須去到這個表中。 如果大衛住在奧美，房子不應該是0， 這是一個默認的int值最接近NULL。 他應該住在房子1。 讓我們武斷地說，邁克的生活在Pfoho，所以門牌號碼2。 現在，我的表看起來多了幾分神秘。 但考慮到效率。 我現在只用32位來標識的房子， 這意味著有規範的定義，我的房子馬瑟和Pfoho的只有1 和的房子表中。 所以，如果我現在要重新加入這些表，它認為這種方式。 在這裡，我有我的學生表，右手邊有這些數字，1和2。 1奧美，2是Pfoho的。 我們有這個其他表中的那些相同的標號，這就是所謂的房屋， 1和2和圖3為那些3房子。 我們現在想要做的是，PHP和SQL代碼的能力， 排序的重新加入這些表，如果這些是學生，這些都是房屋， 我們希望以某種方式結合起來，使1行1， 2號線與2個，這樣我們就可以計算出在大衛 邁克和其他人生活的地方。 要做到這一點，我們就可以像下面這樣執行一個SQL查詢。 SELECT * FROM學生參加房子 - 現在什麼領域，我們想加入嗎？ 因此，students.house = houses.id。 有點神秘，但是這部分是指從字面上創建一個新的臨時表 這是參加的學生和房屋的結果。 你怎麼想在這裡結合我的手指的技巧嗎？ 將學生的家域的值等於房屋的ID字段。 如果我現在單擊“Go”，我正是我希望的。 大衛在奧美，邁克是在Pfoho，我也看到了唯一的標識符。 但問題是，現在我有一個完整的表。 因此，這裡的pset 7外賣或真正為最終的項目： 如果你發現你存儲的任何信息冗餘， 無論是房子，也許這是一個城市，州和ZIP 其中的ZIP可以通常但並不總是可以使用一個唯一的標識符， 幹什麼去了，然後通過行使精神上的東西，像phpMyAdmin 分解出來，常用的數據，因為尤其是當你的網站得到更多的使用 越來越流行，這是你如何確保這一切是超級快， 許多暗示的獨特性可能給數據庫。 這是一個很大。 有什麼問題嗎？好的。讓我們有5分鐘的休息時間和重組。 好的。 下面是一個例子，幾年前，當我把CS161， 這是在大學的操作系統類 這被稱為是驚人的，但一個瘋狂的工作， 它真的在關注一些低級別的操作系統中出現的問題 甚至還可以在世界上的數據庫。 馬戈舒爾茨，我的教授，當年的故事，被告知如下。 假設你有一個小宿舍裡為你和你的室友冰箱 你真的喜歡牛奶。 所以，你回家一天的課堂上，你的室友尚未出現， 你打開冰箱，你會意識到，“哦，該死的，我們的牛奶。” 所以，你關閉的冰箱，你走馬路對面的CVS 並獲得越來越長的線，在CVS買一些牛奶。 同時，從他或她的課，你的室友回家 進了房間，打開冰箱真的想要一些牛奶， 打開冰箱，“媽的，沒有牛奶。” 於是他或她關閉了冰箱，走出了門，並進入到ABP 或其他地方比CVS你不會互相碰撞 去得到一些牛奶。 當然，幾分鐘後，你回家 現在你有兩倍多的牛奶，因為你其實是想。 牛奶，現在會走壞，因為你喜歡牛奶 但你真的不喜歡牛奶，所以現在你有太多的牛奶，所以它會變味。 這是一個可怕的，可怕的局面。 什麼可能已經解決了這個困境，如果你是第一個室友回家嗎？是。 [學生]您應該留了一張紙條。 [笑聲] 好。你應該留了一張紙條。 您應該把後它說明或如說，“飄的牛奶” ，然後你的室友概念將被鎖定，其實這樣做。 或者，你可以去1步。 你可以從字面上某種掛鎖鎖的冰箱， 現在你的室友會從字面上鎖定的冰箱。 如果我們概括編程， 你幾乎可以認為冰箱某些類型的變量或結構， 某種信息的容器。 根本的問題是，你可以檢查 或讀取這樣的數據結構的狀態下， 但你看它在不同的時間，但你做了一個決定 基於對世界的狀態，在這些不同的時刻。 所以，如果你鎖定了冰箱，你會至少避免你的室友 從能夠檢查狀態的世界， 這樣他或她可能不會作出同樣的決定。 因此，數據庫，事實證明，這個問題不斷。 讓我們來看看，如果我們可以構造一個場景。 假設，你的壞傢伙，你去美國銀行（Bank of America） 或在廣場上，有一對夫婦的自動取款機並排的其他地方， 不知為何，你如何複製一個ATM卡 - 不是所有的努力。 這只是一個磁條。 所以你想嘗試做的是玩這個遊戲 一台機器，讓你把卡，另一張卡到其他機器上， 你基本上要嘗試去取錢同時， 因為想像這個故事如下。 機器左側，把你的卡和PIN， 然後你說，“給我100美元。” ATM編程，首先做一個選擇的數據庫或等值 - 它使用任何數據庫 - 看看該用戶是否擁有至少100元，在他或她的帳戶？ 如果是這樣的話，然後吐出100美元，而其資產負債減去100元。 但是，當然，如果是多台機器在這裡或多種方式的檢查 這個世界的狀態，銀行金庫，就看你有多少錢， 假設只是偶然的機器上左側和右側 問這個問題在大致相同的時刻。 而這肯定會發生。自動取款機電腦這些天。 因此，如果機器左側的說，“是的，你有至少100元。” 同時在機器上正確的說，“是的，你必須在至少100元，” 之後兩人又繼續完成他們的計劃和實際吐出100美元 並說，“在此之前，你有200元。” “讓我更新的變量，現在是100元留在該帳戶。” 但是，如果他們都已經檢查您的帳戶餘額，發現它的$ 200 兩個人都做數學題，說200 - 100， 機器有潛在的吐出兩個100元的鈔票在每一台機器， 但他們只更新和賬戶餘額為100元。 換句話說，你已經採取了200元，但由於他們考察了世界的狀態 同時，然後根據該值決定， 他們最終可能不會做的數學正確。 因此，在銀行的情況，你真的希望有某種鎖定 所以，只要你已經檢查了一些變量的狀態 這是非常重要的，像您的帳戶餘額， 不要讓任何人作出決定的基礎上，做你的事，直到你完成， 在這種情況下，你是在左邊的ATM。 其他人鎖定。 實際上，你可以在幾種不同的方法來達到這樣的效果。 在MySQL中是一個最簡單的方法，我們給你行的SQL 問題集規範長相酷似。 INSERT INTO表 - 無論它被稱為 - 一個ID，一個符號，一個份額，股份數目， 下面的值，例如。 如果你還沒有讀過的規範，這是一個例子，你怎麼去 購買了10股，這一分錢的股票總統Skroob， 其用戶ID恰好是7號呢？ 這表示插入到表下面的ID，符號及股數， 7，'DVN.V'，和10。 但是 - 但是，但是，但是 - 第二行是非常重要的一個。 DUPLICATE KEY UPDATE股的股​​數+的VALUES（股）。 因此，完全神秘的，乍看之下。 但事實證明，這個SQL查詢，即使它包裝到2號線， 是1個很長的查詢，這意味著它的原子 在這個意義上，這個查詢將被執行在一起，或沒有在所有。 MySQL的定義，這就是他們實現這個查詢。 它是由執行一次或根本不保證本手冊的定義。 這樣做的動機是如下。 如果在這種情況下，你想購買10股股票， 它是一種相同的故事牛奶，這是一種同樣的故事，作為ATM。 如果您不使用此語法錯誤的 而是選擇從數據庫中看到這一分錢的股票多少股 總統Skroob，並假設他有10股， 一些一瞬間後，你做一個UPDATE語句， 這是在SQL另一份聲明中說，繼續前進，增加10個股份 因此，在理想狀態下，以他現在10的總數是20， 的問題是，因為在數據庫中的系統，因為在今天的計算機上 你有多個處理器，多核心 - 換句話說，計算機可以從字面上可以做多件事情一次 - 有沒有保證，在這種情況下，SELECT和UPDATE 將要發生背靠背。 因此，一個壞的情況是，你做的SELECT 看到這一分錢股票多少股份Skroob， 然後只是偶然另一個數據庫中查詢被執行 - 也許它Skroob試圖在另一個瀏覽器窗口買10股 完全在另一個窗口，很像ATM - 想在SELECT和UPDATE之間的另一個查詢得到。 可能的情況下，Skroob現在失去了一些股份數目 因為另一個進程正在檢查他的世界的狀態， 他得到了比他應該有更多的股票。 我們不會去的正是那些特別的故事線將進入詳情 但問題是，如果你要檢查一個變量的值，然後作出決定， 如果有別人做的東西，在這2條語句之間的風險， 這可以發生在多處理器系統中，在多核系統中， 做多件事情的能力，在一次與電腦，不好的事情都可能發生 如銀行賬戶被扣除不正確的，買牛奶的兩倍多， 在這種情況下，錯誤的股數。 但有一個更簡單的方法來思考這個。 事實證明，SQL也支持，如果你正確地配置你的表， 一些所謂的交易，我認為這實際上是更容易理解 比這個，但它不是一個班輪，所以它實際上是一個更複雜一點。 從字面上有一個名為START TRANSACTION語句在SQL。 就像有SELECT，UPDATE，INSERT，DELETE和JOIN和一幫的人， 有關鍵字，如START TRANSACTION。 你在pset中7的情況下做的 - 你沒有做到這一點的pset 7，它是沒有必要明確卸棄， 但最終的項目，它可以是有用的 - 如果你調用一個查詢的START TRANSACTION，然後再查詢 和然後另一個查詢，然後另一個，另一個，和另一個 這些查詢將不會實際執行，直到你調用的SQL語句COMMIT， 在這一點上，無論是陳述或20項，它們都將被執行一次， 這意味著沒有人可以不小心買太多牛奶或借記太多的錢 或買太多的股票，因為所有的查詢將執行 背靠背背靠背。 這是超級重要的，特別是當你做這樣的事情。 這是一個任意的例子，說讓我們更新銀行賬戶 通過設置等於餘額 - $ 1000的賬戶數為2的平衡。 然後第二個語句，現在讓我們存入的$ 1000 進入別人的銀行帳戶，其帳戶數為1。 換句話說，這是一個很好的例子，在那裡你要確保 這些語句都發生或根本不 因為否則的話客戶會得到擰 你會拿自己的錢，而不是存放在其他地方， 或銀行去你要去的地方，錢存得要命 但實際上沒有從用戶的帳戶中減去它。 所以，你想他們兩個一起執行。 因此進入世界交易。 所以，一定要記住，在你的腦海裡， 沒有那麼多的目的，只是最後的項目， 但如果你想利用您的最終項目的地方， 如果你要啟動它周圍的一些公司， 如果你想在校園裡一些學生的問題解決 ，實際上有一個活的，活躍的網站，這些都是可能出現的那種微妙的錯誤 如果你不太想通過什麼都有可能發生，如果2人 正在試圖訪問你的網站，在字面上的同一時刻， 據此，他們的查詢，否則可能會交織在一起。 準備好一些JavaScript，其捉弄人嗎？ 這是我們本學期的最後一種語言。好的。 值得慶幸的是，JavaScript會非常，非常，非常相似的語言，C和PHP， 到目前為止，我們已經做了的。 有沒有任何JavaScript在pset中7，但它是一個非常有用的工具 當談到做基於網絡的最終項目還是真的只是網​​絡編程更普遍的。 所以，簡要概述了一種叫DOM。 這是一個超級簡單的網頁，其實只是說你好，世界 在標題和在體內。 由於縮進一段時間，一直建議 確實是有層次結構的網頁。 我可以得出這樣的HTML片段為一棵樹， 回想起我們的討論在C的數據結構，如下所示。 我有一些特殊的根稱為文檔節點的節點， 在短短的時刻，在JavaScript中，我們將看到模擬的。 第一個孩子，唯一的孩子，在這種情況下的HTML標籤。 有沒有直接映射的doctype。 這是一個特殊的事情，所以我們應該忽略它，當它涉及到這個DOM， 本文檔對象模型樹。 注意，我已經描繪為一個矩形任意的HTML標籤， 有2個孩子：頭部和身體。 同樣畫成矩形。 它是有意義的圖示，頭是身體的左側。 其含義是，在樹頭是第一位的。 因此，實際上是一個訂貨樹當你畫它是這樣的， 即使是任意的形狀和諸如此類的東西。 頭同時還有一個孩子叫標題， 和標題其實有自己的孩子，這是“你好，世界”， 這我故意作為這裡一個橢圓形，以使其能夠稍微不同於矩形提請。 這些矩形元素，而您好，世界上真的有一個文本節點。 所以這是一個樹中的節點，但它是一個不同類型的節點 所以我畫了任意不同。 同樣身體有一個孩子叫你好，世界好， 如此不同的節點，即使它們是巧合的是相同的文字， 但我畫它使用相同的形狀。那麼，誰在乎呢？ 那麼，什麼是好的關於HTML的是，它有這樣的層次性。 什麼是好的關於JavaScript，特別是庫，可免費獲得 和流行的如jQuery，您可以通過在樹結構如此驚人的容易。 任何的東西，我們在C的指針和遍歷樹和遞歸的節點上 左子右孩子，突然之間，我們可以排序的授予 令人驚訝的啟發，如果不是有點沮喪 但幾乎​​沒有一種有效的方式去編程。 因此，這些較高層次的語言如JavaScript 我們將能夠更直觀地瀏覽這個樹。 事實上，將是相當熟悉的語法。 如果你從來沒有見過的Javascript之前，這是一個非常好的參考 從Mozilla人，誰的人讓Firefox， 所以不要隨意瀏覽，在您方便的。 你會發現 - 這些幻燈片是相同的，我們使用的是其他 - 同樣地，主已經一去不復返了。 所以，當你寫一個程序，在JavaScript中，沒有任何主要功能。 你剛開始寫代碼。 但JavaScript和C和PHP之間的關鍵區別 ，而C和PHP迄今已執行服務器端 在這種情況下，由器具，或更一般地由服務器 通常是由設計中的JavaScript的瀏覽器中執行。 換句話說，您可以編寫JavaScript代碼，我們， 服務器上的設備，但你有你的HTML之間，在你的CSS， 在您的GIF和PNG和JPEG文件 這樣，當用戶訪問你的網頁，如果你使用JavaScript， JavaScript代碼，從服務器到瀏覽器， 和它的實際執行的瀏覽器。 因此，這甚至是知識產權的有意義的影響。 這是一種愚蠢的，當它涉及到JavaScript代碼，甚至想保護您的IP 因為性質的語言，它通常被執行瀏覽器端。 您可以混淆它，這意味著你可以把它看瘋了，醜陋的 沒有空格，可怕的變量名，使人們更難竊取您的IP， 更關鍵的是，它是瀏覽器端執行。 即使順便說一句，可使用JavaScript的服務器端， 最常見的情況，現在仍然是在瀏覽器上。 這裡是什麼樣子。下面是一個if-else if-else結構就像C語言，就像PHP。 這裡是一個布爾表達式，當你“或”兩件事情。 是當你“和”兩件事情。 這裡是一個switch語句，這是類似於PHP ，你可以打開不同類型的值。 循環同樣在這裡，for循環的結構完全相同，這是我們見過的。 while循環，我們已經得到了while循環。 變量，以往任何時候都略有不同。 你聲明的變量，比如你在PHP和C， 但同樣是JavaScript的弱類型。 您不指定整數或浮點數或字符串或任何類似的通常。 您可以指定變種​​。 您不必指定變種，但它的意義，如果你不這樣做。 通常，如果你省略VAR，你不小心創建一個全局變量，而不是本地。 因此，我建議，你幾乎總是只說var和當時的名稱的變量。 這是不是一種類型，它只是var為變量。 這將是一個例子，無論是123或“你好，世界”。 數組是當前和語法上類似於PHP。 我會說VAR的數字，然後我再使用方括號來聲明一個變量 ，它的類型是數組，這些特殊的數字，以逗號分隔。 最後，這是唯一的一個真正看起來不同。 回想一下，在PHP中，我們將實現一個關聯數組的學生 像Zamyla可能是這樣的，其中的變量被稱為學生。 方括號的意思來了一個數組。 事實上，我沒有使用數字指標，但字符串 - ID，房子，和名稱 - 意味著這是一個關聯數組， 這些箭頭的等號和尖括號 也就是說，關鍵是“id”，值為1; 最關鍵的是“房子”，是溫斯洛普樓; 最關鍵的是“名”，值是Zamyla陳。 因此，有3個按鍵，在這裡面的關聯數組，每一個都有其自身的價值。 我們已經看到，pset的，或你很快會在JavaScript中同樣的想法， 但它會看起來像這樣。 因此，VAR學生 - 沒有美元符號的類型，也沒有提及，但是變種 - 平等相待，然後打開在JavaScript中的花括號，因為當你有鍵值對， 你實際使用的一些所謂的對象。 你可能還記得誰沒有採取的APCS或類似對象從Java 或類似的語言。 JavaScript是不是Java，首先。 這是一個經過深思熟慮的設計決策年前收工別的東西，很受歡迎， 它的名稱，即使它具有Java本身沒有根本的關係。 JavaScript中的對象，你創建它們的花括號符號。 JavaScript中的對象是幾乎等同於關聯數組在PHP 當涉及到他們的內部存儲數據。 但更有力地在JavaScript中，你可以關聯很容易的功能 裡面的對象，儘管你可以做到這一點在其他語言中， 這是一個相當普遍的範例，正如我們將看到的。 總之，這個對象代表一個學生，誰是特別Zamyla的， 在概念上，它是類似，只是語法不同。 讓實際使用JavaScript在文件中。 原來有一個腳本標記。 我們已經看到了的風格標籤和我們見過的其他HTML標籤。 實際上腳本標籤將包含一些JavaScript代碼。 讓我進入設備，我們有一些預先的源代碼。 我還沒有發布在網站上，但下課後，我會做到這一點。 讓打開這個1，blink.html的。 早在20世紀90年代，簡直是眨眼標籤的HTML標籤， 而這是一個在互聯網上的最奇妙的過度使用的標籤 讓你訪問一些20世紀90年代風格的網頁，並開始看到這樣的文字閃爍， 結果的侯爵標籤，其中有這樣的文字去。 其中，世界實際上已同意在Web標準的幾十倍， 幾年前，董事會每個人都殺了閃爍標籤。 但是，我們可以復活它使用JavaScript作為一個示範的權力，你有 當你可以寫一個程序內的網頁。 首先，讓我們略過的新東西，只注重老。 在這個例子中是舊的東西。 我有一個HTML標籤，頭標籤，標題標籤。 然後我有一個body標籤的div，召回只是一個矩形分割的頁面 我的“問候”，任意指定一個唯一的ID， 只是讓我有一個唯一提到它的方式，有一些非常簡單的文本： 你好，世界。 現在讓我向上滾動到頂部的這個文件，看看有什麼新。 新往上頂的第一件事，是script標籤， 和內部的腳本標記通知我聲明一個函數。 聲明一個函數在JavaScript中，很類似PHP， 您字面上寫函數，則函數的名稱，括號， 也許一些參數，如果需要。 然後，我得到了我的花括號像往常一樣，現在我們有一些稍微新的代碼， 但讓​​我們來看看這是什麼意思。 所以無功格，這也就意味著給我一個變量所謂息。 我可以把它叫做foo的，但我想它被稱為股息 的原因，在第二，這將是清楚的。 事實證明，在JavaScript中 - 這是我的網頁中嵌入的JavaScript代碼 - 稱為文檔的各種有一個特殊的全局變量。 事實上，JavaScript是一種面向對象的語言。 我們不會進入細節，這是什麼意思，在50 但現在知道對象是一個結構很像。 就像我們看到的遙想當年最早的一個問題設置 在一個結構，我們投入了大量的信息， 同樣是文件的特殊結構，自帶的瀏覽器， 任何網頁。這不是我創建了。 本文件的結構裡面，但是，你不僅數據 但你也具備的功能。 任何時候你有一個函數的內部結構，裡面的一個對象， 這就是所謂的一個方法。但是，同樣的事情。 一個方法是一個函數，剛好是裡面別的東西。 因此，這意味著，這個特殊的全局變量文件 有一個函數調用，基本上getElementById。 這將讓你的DOM元素，文檔對象模型樹， 其ID是在這種情況下問候語。 換句話說，我們所有的時間花在數據結構來這裡發揮作用。 這張照片的DOM，我們過會兒前， 即使是有點不同的，如果我有一個div在這幅畫中， 什麼樣的document.getElementById返回我是一個指針 到的矩形在樹中，樹中的矩形的參考。 所以，這意味著什麼實際調用這些功能之一。 在這種情況下，這又是一個div。這不是一個機構或一個標題。 因此，讓我們來看看什麼我現在做的這個div，我有這個變量稱為格內。 原來你有能力動態調整您的網頁的CSS與JavaScript。 到現在為止，所有的CSS，儘管是有限的，我們所做的是在樣式屬性， 或有什麼地方我們把CSS？ 我有點被寵壞的那一個。在風格標籤在文件的頂部。 或第三位一直在嗎？ 一個外部文件中，一些CSS。 因此，這些都是CSS迄今為止，我們已經做了3個地方， 但美中不足的是，我們已經硬編碼。 你決定你一頭扎進pset中7，我們決定在課前將我們的CSS。 但是如果你想改變你的CSS，你可以真正做到這一點 一旦你有一個實際的編程語言。 CSS，HTML - 不是編程語言。 JavaScript是。 因此，原來，一旦你有這些矩形樹 所謂的DOM，它本身它裡面的一些數據。 所以，我剛拿到的div從樹上有什麼，我們會打電話給它裡面的一個屬性 稱為風格，樣式屬性本身也是一個屬性叫的知名度。 我也知道這只是尋找一​​個CSS用戶手冊。 原來有一個可見性CSS屬性，它做什麼它說。 這使得一些可見的或不可見或不可見。 而如何做到這一點是這樣的。 我問的編程方式，如果這個div隱藏的知名度， 我該怎麼改變？可見。 否則，如果這個頁面是不是隱藏的知名度，在邏輯上我隱藏它。 我不知道為什麼它是可見的和隱藏的和不可見的和不可見的。 這是一個糟糕的設計決定的方式。 但是，這些是對立的CSS可見的和隱藏。 所有這一切都沒有是不是就意味著改變我的CSS文件和關閉，開啟和關閉 為特定的分區。 但是，這是一個函數調用的閃爍。當閃爍功能叫什麼名字？ 事實證明，有一個特殊的全局變量稱為窗口， 類似的文件精神，而文件是指您的網頁， 像你的HTML DOM樹，從服務器發送， 窗口是指在它的周圍，鍍鉻的地址欄，標題欄， 所有的東西在你的網頁。 而事實證明，在窗口對象有一個特殊的功能，它裡面叫的setInterval 做什麼它說。 將設置的時間間隔 - 在這種情況下，每500毫秒 - ，可以猜，什麼會做的每500毫秒？ 這將執行該函數閃爍。 很高興在這裡，我們可以這樣做，即使我們從來沒有在C。 C也有被調用的函數指針的東西，在這裡你可以通過功能左右 作為參數。 同樣，在JavaScript中，你可以傳遞到另一個函數的函數的名稱。 注意到我在做什麼。我沒有這樣做。 如果我把括號後的閃爍，這意味著呼籲閃爍功能。 如果我忽略它們，在這裡的意思是閃爍功能 這樣的setInterval可以把它每隔500毫秒。 因此，最終的結果是殘酷的，但是，如果我進入本地和blink.html去， 我現在有這種情況發生了一次又一次。 如果我真的檢查的元素，讓我們看看我們可以看到這一點。 讓我檢查元素，讓我向下滾動，只需要一點點， 讓我選擇在這裡的元素，並注意Chrome瀏覽器的DOM裡面督察。 它的字面來回變化，每500毫秒。 如果我們去我們的朋友內特， 如果你想知道這是如何工作的，類似的想法，間隔， 但內特 - 實際上是非常有效地利用顏色在這種特殊情況下在這裡。 所以，我們還有什麼可以做呢？ 讓我們打開另一個例子試試 這是通過編程更加有用的事情閃爍。 讓我今天進入我們的表格目錄，進入FORM0。 這是我能想出的最醜陋的形式， 讓我告訴你什麼是它看起來像在瀏覽器中。 讓我進入本地主機/形​​式，這是FORM0的。 這是一個超級難看的HTML表格，有幾個字段，電子郵件，密碼， 密碼，然後一點點的複選框，同意某些條款和條件。 美中不足的是，如果我訪問的形式，我不想給你我的電子郵件地址， 我不想同意的條款和條件也許，我可以單擊“註冊” 它讓我通過了。 發生這種情況向一個愚蠢的PHP稱為dump.php的文件。 它的作用是打印出來的內容只是用於診斷目的的$ _GET。 這是由用戶提交的只是現在。 但是，假設我們要驗證用戶的表單提交。 讓我進入第1版。 這是form1.html。它看起來美觀一樣糟糕，但要注意它是如何的花哨。 如果沒有合作，我請單擊“註冊”我被罵。 “您必須提供您的電子郵件地址。” 好的。所以，讓我來試試。所以malan@harvard.edu。我並不需要一個密碼。 註冊。 “你必須提供一個密碼。”好的。 因此，我將提供深紅色的密碼。註冊。 “密碼不匹配”。我現在必須輸入深紅色這裡。 我不小心檢查。註冊。 “您必須同意的條款和條件。”好的。同意。註冊。 現在，它讓我看到那邊的診斷輸出。 所以，剛剛發生了什麼？ 我們有這個能力來驗證表單提交。 事實上，如果你沒有潛入的pset 7，有一個歉意的功能 這使得它很容易在用戶屏幕上的一條消息，大喊大叫。 我使用了一個略微不同的機制，報警功能， 這是不是一個函數的笑了，因為它非常醜陋的用戶信息。 但是讓我們看看我在這裡做什麼。 這是form1.html的，請注意，我有一些非常熟悉的語法： body標籤，表單標籤，action屬性，屬性的方法。 但是請注意，我已經給了我一個獨特的ID為方便。 然後我收到一封電子郵件，其類型為文本字段， 一個密碼字段，它的類型是密碼，確認字段，它的類型是密碼， 一個複選框，然後在這裡他的名字是協議類型為複選框。 然後我有一個提交按鈕。 但是請注意，在上面更何況我有。 首先，有一個使用的腳本標記。 如果你有一些JavaScript代碼，在另一個文件中，就像CSS，你可以將其包含。 你用腳本源代碼，然後通知我連接顯然 很長的路徑，但其文件名googleapis.com在jquery.min結束 最小的。js。 jQuery是一個超級流行的，只是使JavaScript的JavaScript庫 更方便用戶的使用。 它實際上成為了事實上的標準。 因此，即使你將要看到的是不是純JavaScript本身， 它是很像CS50庫之上的JavaScript庫是一層 在頂部的低級別的C代碼，現實的情況是，幾乎每個人都在互聯網上使用它。 因此，這些都是沒有培訓車輪。這是最好的練習，這些天。 現在注意下面的是我自己的腳本標籤，並注意我在這裡所做的。 事實證明，，jQuery也有點花哨的東西。 JavaScript有貨幣符號，但他們是沒有意義的。 他們就像字母A或B或C。 jQuery沒有簡單地採用公約或下崗的要求這樣的事實： ，將是他們的特殊符號。 因此，只要你加載這個全球性的JavaScript文件的腳本標籤， 您可以訪問一個特殊的全局變量，這就是所謂的$。 它更恰當地稱為jQuery的，但看上去不性感$。 但沒有特殊的意義。在PHP中，它有特殊的意義。 你必須有它前面的變量。 這僅僅是一個性感的事情，他們就。 這到底是怎麼回事呢？ 請注意，我通過我的jQuery功能全局變量文件 然後我打電話。準備好了。 什麼jQuery基本上的作用是它可以讓你採取一些普通的JavaScript的東西 像文檔對象，window對象， 而如果你把它傳遞到jQuery函數 - 再次，要清楚，這是一個函數調用jQuery的 - 它是什麼，它會返回給你一個特殊版本的文件 具有更多的功能，與它相關聯的。 因此，在原始JavaScript有沒有現成的函數， 但如果你通過文件的jQuery功能， 它返回給你一個特殊版本的文檔對象 有更多花哨的功能。 這就是為什麼人們喜歡它的原因。它只是使事情變得更容易的事，因為我們將要看到的。 那麼，是什麼這行代碼是什麼意思？ 這行代碼在這裡是指當文件準備 - 換句話說，一旦瀏覽器完成讀取此文件從上到下 - 繼續執行以下功能。 什麼是真正有趣的JavaScript - PHP以及 - 匿名函數。 在JavaScript中，你可以聲明沒有名字，但他們有一個身體的功能。 請注意，這裡發生了什麼。 這是一個函數調用的準備，它只是意味著執行以下操作 當整個網頁是準備好了，當這些都被讀出在從服務器。 你想要做什麼？我想執行的代碼塊。 請注意，我們不希望馬上執行這些代碼。 如果我忽略了這一點，這將意味著立即開始執行這些代碼行。 但事實上，我說，不，不，不，包在一個匿名函數，這樣 表示不執行它，把它最終。 我們看到剛才我們在以前的表格的例子。 什麼樣的功能，我們稱之為最終，500毫秒後呢？閃爍。 所以同樣的想法。 再次，即使這看起來有點怪異，只是現在信仰 ，這就是所謂的最終聲明一個匿名函數， 只要簡單的寫函數（）{ 所以我們要什麼樣的代碼最終執行嗎？以下。 這也顯得有些新的，但在這裡的意思是jQuery的功能， ，這是一條捷徑。 下面這段HTML在屏幕的底部，當然有一些樹表示。 它不是這個。此頁面是更有趣的比這個Hello World例子。 但還有一些樹，對應於這個HTML。 這將是一個痛苦在脖子上不得不實行某種遞歸函數 開始的根節點，然後找到該節點的ID註冊。 那麼，什麼jQuery，我們這簡直是超級容易。 來吧，讓我無論div或任何形式，任何HTML元素 有一個ID的登記。 這是相當於的document.getElementById（“註冊”）。 人們為什麼喜歡jQuery？ 因為它是更短的輸入。但是，這一切是。這是同樣的想法。 我的標籤的ID註冊。 而當該標籤，這恰好是一個形式，提交， 繼續執行該代碼。 因此，讓我們現在看我們如何做表單驗證。 語法在第一，但無可否認，神秘的是怎麼回事呢？ 如果這行代碼是真實的，我要罵的用戶提供他或她的電子郵件地址。 那麼，這行代碼是什麼？ $ jQuery的。我們注意到這一點。 這是一種像CSS。 如果你跳入CSS，你就會知道，這意味著該元素的ID註冊。 空間意味著找到一個孩子或一個登記的後裔，他的名字是輸入。 那麼這件事情在方括號中是一個小的過濾器。 而且，即使這個看起來很神秘的，這也就意味著去的形式，其ID的註冊， 到輸入元素內，他的名字是電子郵件， 然後得到它的價值，無論它的值恰好是 - 航空自衛隊這是我類型或malan@harvard.edu的，如果這是我所輸入的。 因此，如果窗體的電子郵件領域==沒什麼，罵的用戶。 否則，如果密碼字段中的值的==什麼都沒有，罵的用戶。 否則，如果的密碼字段的值不等於確認字段的值， 這是另一種形式的元素，在用戶嚷嚷。 最後 - 而這其中也有它自己的一些新的語法， 但一旦你看到它，它至少更合理一點 - 否則，如果是註冊ID的形式，其有一個輸入元素，其名稱是協議 和檢查，繼續前進，大聲嚷嚷的用戶。 所以，我承認，乍看之下，這完全是壓倒性的。 這是一個很多新的語法。但是，所有的jQuery如下這些種模式。 說實話，我不知道這存在，直到幾分鐘前。 我用Google搜索，“你怎麼檢查，如果一個複選框被選中，在jQuery嗎？” 這是語法，因為有不同的方法做這件事 與實際原始JavaScript代碼。 因此，作為第一頁習題集7所強調的， pset中7是非常行使自己的引導 我們提供了希望，一個概念性的框架，以解決在pset。 但往往是網頁設計的情況下，這是給你真正閒逛， 只要你引用它們包含的代碼片段和例子從Web 每上，第一頁的條款， 並認識到，學習HTML，CSS，JavaScript和SQL 真正的意思是在家裡工作，我們已開始採取這些訓練車輪。 並實現也有那麼多的事情可以做的瀏覽器。 這些元素裡面還有其他的東西稱為事件處理程序。 即使我們只是看著那些被稱為的onsubmit和onready， 你可以做這樣的事情的OnKeyDown，調用onKeyUp， 喜歡當用戶觸摸鍵時，你可以聽，鍵向上。 Gmail有鍵盤快捷鍵。 如何實現快捷鍵，例如C組成？ 偵聽事件，因為他們是所謂的，喜歡的OnKeyPress或onKeyUp和聚焦的。 如果你曾經在一些菜單選項懸停你的鼠標 突然，瞧，出現一個菜單或圖形的顏色會發生變化， 他們是如何做呢？ 而不是聽的onready或的onsubmit，你聽的onmouseover或鑻。 因此，在短，這些非常簡單的基礎知識，我們已經開始觸及問題的表面今日 ，我們將深入進一步週三，你有越來越多的 實施種的東西，你已經很熟悉了。 因此，讓我們的結束，我們將繼續在週三。 [CS50.TV]