[Powered by Google Translate] [7]週 [戴維·J·馬蘭 - 哈佛大學] [這是CS50。 - CS50.TV] 好的。歡迎回來。這是CS50，這是第7週開始。 一對夫婦的小公告： Pset5現在正在進行中，應該很快， 讓我說，坦白地說，這也往往是更具挑戰性的 該課程的習題集，所以讓我提這 所以，這個星期比以往任何時候你不等待，直到說，週三晚 週四晚上潛水英寸 這絕對是一個有趣的pset。我們認為它的樂趣。 如果你真的得到完全正確的，然後可以挑戰所謂的大板， 你將有機會與一些課程的工作人員鬥智斗勇 和你的同學。 大板的是，一旦你有你的拼寫檢查工作， 你就可以去cs50.net運行命令後， 純粹選擇加入，然後在大量的時間和RAM的數量多 您已經使用在您的實現將在這裡展出的課程的主頁上。 你會發現，這些人在這裡一大堆被列為員工 自上週末，工作人員認為這將是有趣的嘗試超越對方。 因此，認識到這裡的目標是超越的工作人員。 即使在這裡我只在第13位。 純粹的選擇，但它是一個機會，看看是多麼小RAM 和一些CPU秒鐘，你可以使用VIS-A-VIS你的同學。 我得承認，凱文·邁克爾·施密德， 目前在1號位置的轉錄因子之一， 這是一個實現，我們稱之為不可能 因為他幾乎為0的RAM和裝載的幾乎為0秒。 因此，我們將採取照顧凱文離線。 [笑聲] 有一定的技能，凱文把這裡的測試。 我們認為我們會做的事情太是現在CS50x的是一個星期的進步， 和你們是一樣多的學生是這個實驗的一部分。 我們已要求他們作為他們的pset0的一部分，這是同樣提交Scratch項目 他們感興趣的 - 一個遊戲，互動的藝術作品，動畫，或類似的 - 1 - 2分鐘的視頻，如果他們想，他們打招呼世界。 我想我會與大家分享的只是一對夫婦的影片，迄今已提交 因為對我們來說，對人員至少，它確實已經令人興奮的 和世界各地的鼓舞人心的，看到這些來自世界各地的鄉親 - 國家 - 調教下，所有的事情，在互聯網上的計算機科學課程， 不管是因為他們想繼續自己的學業， 他們希望把自己的職業生涯一個新的方向， 他們要填寫自己的知識空白， 所以一些同樣的原因，也許你們已經在這裡。 所以我給你一個這樣的學生在這裡。只是一點點，你可以提高音量。 這裡是我們的學生1分鐘的意見書。 你好，世界。我在西班牙的馬拉加，工業工程的學生。 我很高興，因為我愛這個在線課程計算機科學，我真的這樣做， 我才真正明白，我去探索它。 而事實上，我可以學習相同的，如果大家都做 而在哈佛，我在馬拉加，如何真棒是什麼？ 嗯，我覺得費爾南多，這是CS50。見你們。 [笑]，我們特別喜歡的另一個片段，你會發現，這位先生的英語也不是那麼強。 看起來他有機器翻譯，翻譯本身是有點不完美的， 但是，這是我們的最愛之一迄今為止。 [♪♪] 你好，世界。說日本] [我要迎接在日本，因為我的英語是非常不可靠的。 [我已經把你的消息，日本岐阜縣的城市。] [Ⅰ可以是第一次的學生在20年，可以看出。] 我很感激​​哈佛大學給了我這個機會和EDX。] [高爾夫是一個吉他，我最喜歡的事情。] [笑] [♪♪] [為什麼你會認為我是想參加cs50x。] [哈佛大學，這是我的願望。 [特別是，如果我住在日本很遙遠的存在。 [我想嘗試一下馬上意識到存在這樣的EDX時。] 難道你不覺得，你不學習一歲的] [CS50是我的願望。我的名字是賀都，這是CS50。] [♪♪] [熱烈的掌聲和歡呼] 另一個是我們最喜歡的提交這裡有人。 [♪♪] [馬蘭]谷歌它，如果你不熟悉這個米姆。 最後，一對夫婦的人，進行了發布，也許贏得了可愛的裁決。 [學生] AWW！ >> [馬蘭]我們不得不聽。這是短暫的，所以請仔細聆聽。 [女議長]你叫什麼名字？ “路易。 [女議長]這是什麼？ >> [笑聲] CS50。 [笑聲] [馬蘭他兩個需要。 在這裡，我們走了，是最後一次。 我的名字叫路易，這是CS50。 [笑]這然後是CS50x的。 謝謝你的所有那些你在家裡 誰迄今已領受。 今天，我們結束我們的討論的數據結構， 至少一些的最根本的， 然後我們繼續我們的談話，HTML和Web編程。 事實上，我們已經在過去的大約七週在編程的基礎知識 - 算法，數據結構，及類似品 - C，你可能已經經歷了迄今為止， 不一定是最方便的語言 實施這些想法。 因此，本週和下週開始，然後下面的， 我們將最終能夠過渡到C，這是一個相當低的水平的語言通常被稱為， 到較高的水平，其中PHP和JavaScript，和類似的東西， 我們會看到畫上同樣的課，我們已經了解到，在過去的幾個星期後， 但你會發現，數組和哈希表的聲明類的東西，搜索和排序 變得如此容易得多，因為語言本身，我們將開始使用 將變得更加強大。 但首先，應用程序的樹木。 這是很常見的這些天，需要壓縮信息。 在什麼情況下你會想要某種壓縮的數字信息嗎？ 是啊。 >> [學生]當你需要把它在Web上。 是啊，當你想送點東西在Web上。 如果你想下載一個大文件，這是理想的，如果有人在另一端 壓縮該文件使用zip格式或類似的東西 所以，你要發送較少的位數，否則可能會被傳輸。 那麼，你如何壓縮信息嗎？ 這一切都歸結為使用較少的位數，默認是必需的。 但是，這是種奇怪的事情，因為回想起0和1週 當我們談論ASCII和二進制和我們談到ASCII特別是 使用8位的字母代表 以使字母A代表65，小寫a是97號， 但是你代表65或97，你使用的是7位或8位。 但美中不足的是，有一些字母的英文字母 不再那麼受歡迎了，因為他們的。 Z是不是所有的流行，Q是不是所有的流行，但A和E是超人氣。 然而，所有這些信件，默認情況下，世界上使用的相同的比特數，只有8。 因此，它已經聰明的，如果不是使用8位的每一個字母， 即使是最不經常使用的Q和Z等， 如果我們用較少的比特位為A和E，S和最流行的字母 位不太受歡迎的字母， 這個想法是讓我們的優化，在一般情況下， 這是計算機科學的一個主題，試圖優化會發生什麼最 和多花一點時間，多一點空間，是的，可能發生的事情上， 但不一定作為經常。 因此，讓我們來舉一個例子。 假設我們要對信息進行編碼，效率很高。 您可能已經長大了知道一些關於莫爾斯電碼， 賠率是，你不知道實際的代碼， 但您可能還記得，它至少是這一系列的點和線組成的。 這是一個相當有效的編碼，並請注意，最流行的字母 - 例如，E - 使用最短的嗶嗶聲。 莫爾斯電碼是所有嘟 - 嘟 - 嘟 - 嘟 - 嘟 - 嘟色調 無論是為短週期的時間或很長一段時間。 E，表示由點，是一個超級短的嗶嗶聲，蜂鳴聲，這將代表E. 相比之下，T將是一個較長的蜂鳴聲，像蜂鳴聲[延長的聲音， 這將代表T. 但是，這仍然是非常短的，如果你看一下，因為相比之下，在Z， 表達z您會去嗶，嗶[更長聲音]，嗶，嗶嗶聲[較短的聲音。 因此，它是更長的時間，因為這是不常見的。 但是，這裡的疑難雜症的是，莫爾斯電碼是有點瑕疵的 的，因為它不立即解碼。 例如，假設你聽到一些最終的電線嗶[短]，嗶嗶聲[長]。 什麼樣的信息，我剛剛收到嗎？一個點號和破折號。這是什麼代表什麼呢？ [學生] >> [馬蘭]也許。 它也可以是E其次是T. 換句話說，雖然莫爾斯電碼，它利用了這個原則，優化角落的情況， 它本身不適合即時可解碼。 也就是說，人類是誰聽到或接收點和破折號 必須以某種方式找出字母之間的休息， 因為如果你不知道那些休息的，你可能會感到迷惑為ET，反之亦然。 所以，你可能會做什麼？在莫爾斯電碼中，你可能只是暫停之間的每一個字母。 但暫停是一種反到整點的加快。 所以，如果不是，我們想出了一個代碼，那裡有沒有這種糟糕的情況 其中E是一個前綴，例如，甲 - 換句話說，如果我們可以確保，該模式仍然是流行的字母的縮寫 只要不太受歡迎的字母，但有沒有可能出現的混亂？ 一個人的名字霍夫曼年前發明了這個計劃被稱為Huffman編碼 實際利用的數據結構中，我們已經花了一點時間談 在過去的一周，樹，二叉樹明確 - 一個二叉樹，這意味著它有不超過2名兒童。 它有可能是左孩子，也許孩子的權利，這就是它。 因此，假設只是為了討論的方便，有人想發送消息 像這樣的。這完全是一派胡言，但它的組成為，BS，CS，DS和ES。 如果你真的指望了所有的AS，BS，CS，DS和ES ，然後除以總數的信件， 這個小圖說，45％的信件是ES，20％都一樣， 10％Bs，以及等等。 所以，換句話說，假設引號的字符串 只是要發送一些消息。 它正好是廢話，這樣我們可以用幾個字母可能， 但它確實是這樣的，電子仍然是最流行的， B和C是最不受歡迎的，至少這5個字母的字母表。 那麼，我們如何去編碼， 二進制編碼的0和1的模式，這些信件 在這樣一種方式，E是一個短圖案，也許B和C是稍長的模式， 再次，這個想法是，我們希望用較少的比特位的大部分時間 更多的比特在一段時間內只有一次。 據霍夫曼編碼，您可以創建一個森林的樹木。 有樣的一個故事線，在此，涉及樹木，也建立他們的過程中，。 讓我們開始吧。 我建議你開始與這片森林，可以這麼說，5棵樹， 這是一個非常愚蠢的樹。 樹組成的只是一個單一的節點，代表了一圈。 因此，這些東西可能是一個C結構 和內部的C結構可能會對一個float代表的頻率計數 然後也許一個字符代表的信。 因此，認為這些節點只是任何舊的C結構，但就目前而言，更高的水平。 這是一個森林的5棵樹，每只能有一個節點。 霍夫曼提出的是，我們開始結合這些樹木 稍微大一點的樹具有最小頻率計數 通過連接他們與一個新的根節點。 因此，這裡的字母，請注意，為方便起見，我已經整理他們從左至右， 雖然這不是絕對必要的，和通知，最小的節點 目前10％及10％。 霍夫曼提出，我們合併這2個最小的節點進入一個新的樹 通過引入一個新的父節點，然後給家長一個左孩子和右孩子 其中B是任​​意的左側和C是任意的權利。 然後，霍夫曼還提議，讓我們現在只是覺得左子 在這些樹總是用0表示 和右孩子總是被代表的數字1。 這不要緊，如果你將它們翻轉，只要你是一致的。 所以，現在我們有四個在這片森林中的樹木。 4，因為現在我說的左樹 - 和它在這個意義上，它的增長這種方式沒有那麼多樹， 它更像是一個家庭樹，現在0.2是兩個孩子的父類的 - 注意，在母公司，我們已經開出0.2。 我們已經添加了兩個孩子的頻率計數和新節點的總和。 所以，現在我們只是重複這一過程。 尋找最小的兩個節點，然後加入到一個新的樹 然後再重複這個過程。 現在我們有幾個候選人，20％，15％，另外20％。 在這種情況下，我們必須打破平局。我們可以做到這一點隨意。 我們應該做它保持一致。 在這種情況下，我會隨意去與一個在左邊， 我現在合併了20％和15％，給我一個新的父，35％， 其左孩子是0，右孩子是1，現在我們只有3個在森林中的樹木。 你或許可以看到這是怎麼回事。 如果我們重複此一對夫婦更多的時間，我們將有一個更大的樹， 所有的邊都標有0和1的。 讓我們再次這樣做。 35％是該樹的根。 20％和45％，因此，我們將要合併的35％和20％。 現在有這樣的樹在這裡。我們添加這些，我們有55％。 現在有兩棵樹的森林。 我們這樣做，最後一次，希望數學的頻率 因為他們應該，因為我們計算他們從一開始就高達100％。 現在，我們有一棵樹。 因此，這是一個霍夫曼編碼樹。 種了一段時間，有口頭的，但現實的情況是一個for循環 一個遞歸函數，你可以建立這個東西相當快。 所以，現在我們有一個新的節點，所有這些內部節點已malloc分配， 據推測，前進的道路上。 所以，現在在這棵樹的頂部，我們有100％的，但現在請大家注意，我們有一個路徑 從這一新的偉大偉大偉大的祖父所有的偉大偉大偉大的孫子 所有的方式在底部，所有的葉子。 我們現在要做的是提出，在以字母“E”代表， 我們將簡單地使用數字1。為什麼呢？ 因為如果我們從最終的根遍歷這棵樹的葉稱為E， 我們遵循一個邊緣，右邊緣，而這在右上方標記的過程。 所以這裡的含義霍夫曼，E的二進制編碼是1。 這是漂亮該死有效的。真的不能得到任何比這更小。 相比之下，A來表示，如果你遵循的邏輯， 位，而不是什麼模式？ 01。 因此，要得到一個，我們從根開始，我們向左走，然後向右走， 這意味著我們為0，則1。 因此，我們應當代表字母“A”的模式0和1。 而現在，我們已經注意到有一個屬性的即時可解碼 我們沒有在莫爾斯電碼。 雖然這兩種模式是很短 - E 1位，A是2位 - 請注意，他們不能混淆或其他， 因為如果你看到它有E，如果你看到一個0，則它顯然得是A. 同樣的，什麼是D？ 001。 什麼是C？ 0001。 什麼是B？ 0000。 再次，我們所關心的，因為所有的字母都在葉子 他們都不是種中間商在從根到葉的路徑， 2個英文字母“混為一談不同的編碼有沒有風險 因為所有的這些位模式是確定性的。 0000永遠是B. 有沒有節點之間的某個地方，你可能會混淆一個字母的。 所以這裡的含義是什麼？ 最流行的字母 - 在這種情況下，E - 已經得到了最短的編碼， 已得到了最短的編碼， B和C，這是我們已經知道，從一開始就種最不受歡迎的 在10％的頻率每個，他們已經得到的最長的編碼。 因此，這意味著什麼，現在是，如果你要發送的消息的壓縮 在互聯網上，或在一封電子郵件中或類似， 而不是使用標準的ASCII，您可以發送一個霍夫曼編碼的消息 據此，如果你想發送字母“E”，只需發送一個位。 如果你想發送一個，你送2位，01，而不是發送8位 其次由另一個8位，然後由另一個8位，等等。 但這裡有一個疑難雜症。 這是不夠的構造這棵樹，然後開始發送Alice給Bob 較短的位模式，從ASCII字符串， 因為愛麗絲也有告知鮑勃是什麼 如果Bob可以讀出她的壓縮的消息嗎？ [聽不見的學生回應] >>那是什麼？ 聽不見的學生回應] >>樹是什麼。 或者甚至更具體的是，這些編碼是什麼， 特別是，因為在這個故事中，我們做了一個判斷，在一個點上。 還記得，我們​​必須選擇之間任意2個不同的20％的節點嗎？ 所以這是沒有的情況下，鮑勃，收件人，就可以重建自己的樹 因為也許他會創建樹有一點點不同的愛麗絲。 此外，鮑勃不知道原始的郵件是什麼 因為愛麗絲是唯一送他，當然，是壓縮的消息。 所以，這樣的壓縮勾的是，是，Alice可以節省大量的位 通過發送1 E和01，A和等， 但她也有告知鮑勃之間的映射是什麼字母和位 因為他們不能清楚地依靠剛剛ASCII了，如果我們不使用ASCII。 於是，她可以給他的樹不知道什麼原因 - 把它寫下來，將其存儲為二進制數據或類似的東西 - 或者只是給他一點小抄，一個Excel文件，顯示的映射。 因此，壓縮效果真的認為你發送的消息， 是相當大的，至少是中型， 因為如果你是一個超級短消息發送， 如果你只是想發送的消息不好，這恰好是一個詞，我們可以拼出， B-A-D，你可能會使用較少的位數， 但美中不足的是，如果你也有告知鮑勃樹是什麼 這些編碼是什麼，你將可能比所有的積蓄 壓縮的東西開始。 因此，它其實是可以的情況下，如果你嘗試壓縮 即使有類似ZIP文件格式，你可能很熟悉 - 漂亮的小文件，即使是空文件 - 有時，這些文件可能會更大而不是更小。 但實際上，出現這種情況只適用於小的文件大小， 所以它不會使一千兆字節的文件是2 GB的; 我們只是說字節或只是一對夫婦千字節為單位。 有些程序如zip有足夠的智慧認識到， “你要更多的比特花在壓縮此。” “讓我不要打擾它壓縮為你所有。” 因此，這只是一種方式，然後壓縮文本格式。 我們可以實現這樣的事情在C. 例如，下面是我們如何可能代表了一個節點， 在這裡我們有一個char的符號，一個浮點值的頻率， 正如我們看到的與我們的其他數據結構，2個三分球， 1的左子，1至右側，其中任何一個可以是NULL， 但如果沒有，它指的是一個左子節點和右子。 所以這又是霍夫曼編碼，它的一個方法，你可以去有關的信息壓縮， 它肯定是一個最容易實現的 的上下文中，比方說，上週的數據結構， 雖然存在更複雜的算法 您的數據，可以做更複雜的突變。 任何問題，然後上樹，二叉樹，或壓縮的文本？ [學生]有一些模糊，像如果[聽不清]分割成01， 然後011將是不明確的，對不對？ [聽不清] >>好問題。歧義。 讓我總結一下，這張照片上。 由於字符，表示要壓縮的， 定義該算法始終保持葉子， 你永遠不小心使用了相同的位模式為多個字母的前綴。 所以，換句話說，你關心的問題，它的名字一樣，所產生的歧義 001可能是B或C或類似的東西開始的開始。 但是，不能因為通知的情況下，所有的英文字母，我們要對其進行編碼 是在葉子上。 這種含糊不清，如莫爾斯電碼的情況下，只能產生 如果，例如，C是從根到B.沿路徑的某處 [學生]。因此，在這種情況下，說有2葉。 >>說A的 - 再說一遍。 學生說，有2葉，F和G，那麼G - >>好。但它不能。 A本身不能有葉F和G，因為這些字母F和G 本身將是離開某處B的左邊或右邊的E. 因此，通過定義，它們必須是葉子。 否則，你說得對，我們還沒有解決莫爾斯電碼面對的問題。 這個問題問得好。其他問題嗎？好的。 此位的概念，事實證明，我們有動力，我們一直還沒有實際使用 當它來操縱這些0​​和1。 我們問這個最早的一個問題集： 即，你怎麼去大寫字母轉換為小寫，反之亦然？ 或者，更具體而言，這些第一的pset之一問 其實你有多少位翻轉，以改變一個小寫或反之亦然？ 這裡有一個快速回顧一下65和97看起來像在二進制。 而且，即使這個問題已排序的消失在你的記憶， 你可以看到這裡有多少位需要翻轉 改變大寫字母A到小寫的a？只有一個問題。 它們的區別僅在一個位置，從左側的第三位。 而一個有010，小的一個擁有011。 所以，不知怎麼的，我們需要的只是能夠翻轉的位， 然後，我們可以大寫或小寫字母。 我們已經做到了這一點，在過去的實際使用條件 和檢查，如果這封信是在資本和資本Ž， 然後輸出如A - A + 26或類似的東西。 你可能做算術的英文字母。 但是，如果我們可以只翻轉，單比特嗎？ 你怎麼能去一個字節的價值位，8位，如01000001和01100001？ 如果你有這些模式的位，我們怎麼能去改變只是其中之一嗎？ 如果我們在這裡介紹在黃色的位模式呢？ 如果我的整個黃字符串0，除了一個位，我想改變 然後我引入一個新的操作被稱為按位運算符 - 在這個意義上，每個位的按位， 而不是一個完整的字節或四個字節。 這在黃色的豎線表明，如果我們把大寫字母A表示 和按位或用黃色的位序列？ 換句話說，回想起我們的討論在Scratch布爾表達式，然後在C. 做一個布爾值，或意味著這是真實的，無論是第一件事情是真實的 或第二件事情是真實的，他們都必須是真實的， 然後所產生的輸出本身是真實的。 在這種情況下，在這裡，我們得到，如果我們取0“或”有0嗎？假還是假的？ 它仍然是假的，所以小寫的a仍然如預期。 什麼，如果不是我們做1或0？ 現在這仍然是1，但要注意什麼就發生在這裡。 如果我們用大寫字母A開始，我們將繼續“或”它的每個位，我們在這裡做的， 0或黃色的為我們提供了什麼在這裡？這給了我們1。 事實上，假設我們不知道什麼是小一的大寫版本實際上是。 讓我們做到這一點。讓我搬到這回在這裡。 讓我們再這樣做。 0或0給了我0。 1或0給了我1。 0或1，給了我1。 0或0給了我0。下一個是0時，下一個為0時，下一個是0。 1或0給了我1。 因此，即使我們事先不知道什麼小寫a是， 簡單地通過“或”使用這種模式，我們已經在黃位， 你可以小寫字母大寫的A，通過翻轉該位。 我們用這個表達星期前翻了一下。 你如何真正做到以編程方式呢？ 您可以使用通常被稱為面具，位序列， 在這種情況下剛好在這裡看起來像這個數字， 然後你“或”一起使用這個新的C運算符， 不，你使用一個單一的|，你會得到這個答案在這裡，因為為什麼呢？ 這是在1s的地方，2S地方，4秒，8秒，16秒，32秒。 所以，事實證明，如果你把一個大寫字母A和按位或32的整數， 因為整數32，當你把它看作是位看起來像這樣， 這意味著你可以翻轉的位，你真正想要的。 同樣的 - 在短短的時刻，我們將看看代碼 - 假設我們想要去另一個方向。 你怎麼去小寫字母a到大寫字母A？其中位需要改變？ 這是同一個。 我們要改變，第三位從1到0。 我們怎麼可能去這樣做呢？ 我們如何關閉位？我們可以用什麼模式的位關閉位？ 如果我們的排序反轉的面具嗎？ 而在此之前，我們做了整個的黃色面具0 除了一位，我們要打開， 如果這個時候，我們除了使整個面罩1位，我們要關閉 然後用什麼樣的運營商？ 如果我們“和”東西呢？讓我們一起來看看。 如果我們現在翻轉，再假設我創建了一個面具，這是所有1 除了一個位，我想關閉 ，而不是“或”白色的人數達到頂部的黃色數字在這裡， 如果我不是“和”他們在一起嗎？這就是所謂的位。 從邏輯上講，它是為布爾值，同樣的事情。 這給了我0和1是0。因此，false和true是假的。 真真實不虛。 這裡是神奇：真，假的就是假的，所以我們已經關閉了該位。 現在剩下的故事是有些簡單。 因為其餘的掩模是1s，它並不重要什麼號碼是白色。 當你“和”與真實的東西，你不打算改變它的值。 如果這是真的，它仍將是真實的。如果是假的，它仍將是假的。 但是，奇蹟發生了，當你需要的東西是真實的 然後，“它為false。 這樣做的效果關閉該位。 因此，一個有點神秘。 讓我們看一些代碼，這實際上可能看起來更神秘的， 但讓​​我們來看看在這裡TOLOWER。 如果我期待在TOLOWER的，從大寫字母A到小寫的a， 讓我們來看看我們怎麼可能實施這一方案。 下面是主要的，它的不採取任何命令行參數。 我聲明了一個字符c為信用戶要輸入英寸 然後我用一個熟悉的DO WHILE循環的只是確保用戶肯定給了我一個大寫的A， 或B或C. .. Z，所以他們給我的東西之間的A到Z 現在，我在這裡做什麼？ 我“或”此與0x20，但實際上是相同的 - 我們會回來的這一個時刻 - 32。 所以，再一次，這種模式圖32是這裡的比特。我們知道這為什麼呢？ 只要想想0週。 這是在1s的地方，2S地方，4S，8S，16S，32S的地方。 因此，這黃色的數字正好是32。 然後我就可以把這一類的字母字符，按位“或”它的字面32號， 我該怎麼回來的？該字符的小寫版本。 剛才，我表達了這樣的在不同的基本符號。 什麼代表什麼呢？ >> [學生]十六進制。 [馬蘭]這恰好表示十六進制數。 十六進制所有的東西，我們還沒有談到， 但它實際上是在這樣的情況下方便。 即使它看起來更加複雜，即使它看起來像20和32， 事實證明，十六進制實際上是超級方便的符號 因為每一個數字後，將0x的十六進制 - 這意味著什麼; 這僅僅是人類的慣例，這裡說的是十六進制數 - 每個這些數字，2，然後在0，本身可以被表示 恰好有4位。 因此，如果我們這樣做，讓我在這裡打開一個文本編輯器 - 怪異自動完成 - 如果我們做一個小的文本編輯器，在這裡，在這裡的意思是4位的數量為0x20，這裡的另外4位。 讓我們做最右邊的4位第一。 0時，有4位表示的是什麼？超級容易。全部為0。 因此，4位為0。 你怎麼代表？它已經有一段時間了，我們這樣做，但它的0100。 所以這是的1S地方，這是的2S地方，然後不要緊，其他地方是什麼。 換句話說，你可能會說0x20的十六進制， 但是如果你再想想什麼是2，它是如何以二進制表示的， 什麼是0，它是如何以二進制表示的， 這些問題的答案是，分別。 因此，0x20的發生來表示這種模式的8位， 而這正是我們想要的面具。 所以這只是一個暫時的智力活動， 但現實的情況是，在代碼中，它通常更常見的是寫這樣的常量 在十六進制，因為程序員可以相對容易， 即使它需要一些紙和一支鉛筆，計算出的位模式是什麼 因為你不能只是表示0和1，通常的代碼。 你不能去00010等等。 你必須選擇十進制或十六進制或八進制或其他符號。 大多數人往往挑簡單，所以，每個數字代表4位的十六進制 你可以做到這一點快速數學。 我會揮揮手TOUPPER，這幾乎是相同的，它看起來幾乎相同。 ，TOUPPER發生使用或操作員而這傢伙和df。 DF代表什麼？ DF？任何人？ >> [學生255。 255？不是255。這將是FF。 我們將離開這個作為一個小練習。 但是，如果你從0，1，2，3，4，5，6，7，8，9，然後是後9？ 我們種出的小數位數，但在十六進制後9？ [學生]一。 “所以，A，B，C，D。 你可以計算出有什麼圖案的位d實際上代表。 如果我們做數學題，我們會看到，你最終得到的回到是相同的面具。 這是f，全1，這是d。因此，DF代表的面具。好的。 最後，不要把事情聲音超強，技術， 但假設我們想編寫一個程序，這樣做。 讓我繼續前進，使二進制，這是一個一個名為binary.c中的程序。 現在讓我跑的二進制，給我一個非負整數。 讓我們先從簡單和類型0。 這是一個程序，打印出一個整數，其二進制表示。 所以，如果我再次玩這個遊戲，並輸入在短短1，我應該得到一個32位表示1。 如果我這樣做有2個，我應該得到的。 如果我做了7，我應該在年底得到一些1，依此類推。 事實證明，我提到這一點，因為按位運算 你其實可以做另一件事情。 您可以動態創建這些面具。 看看這最後一個例子涉及的按位運算。 這是第一部分的代碼，提示用戶輸入一個數字， 它堅持認為，你給我一個非負整數。 因此，這是老同學的東西。 但這裡的東西，這是一種有趣的。 我該如何去打印二進制數呢？ 我第一次遍歷從要什麼有什麼？ 什麼通常一個int的大小，至少在家電？ >> [學生] 4。 這是4。因此，4 * 8是32 - 1為31。 所以，如果我從31開始計數，這表示，事實證​​明， 只是概念上，31位或最高位，這是這個傢伙在這裡， 而這將是第0位。 因此，這是位01 ... 31位。 那麼，什麼是這段代碼在做什麼？ 請注意，此循環，即使它看起來很神秘，只是，迭代從31下降到0。就是這樣。 所以現在最有趣的部分必須在這5行。 請注意，在此行中我聲明了一個變量稱為面具 我們的故事，這些黃色的數字是一致的。 然後這是什麼做的嗎？ 我們之前從來沒見過的，最有可能的，這又是一個按位運算符。 這是左移位運算符。 這個操作符做這件事。 這裡是編號為1，如果你這樣做我左移，左移， 問：你認為有這樣做的效果，個人1？ 從字面上移動。 因此，如果1號是你在左邊，你開始初始化我31， 那是什麼怎麼辦呢？要採取這個數字1，並把它在這裡的31處。 因為有很明顯它沒有其他的數字背後， 默認情況下，它們將被替換為0。 所以，你開始用數字1，這當然看起來是這樣的 - 讓我畫在這裡的中心。 然後轉移到左的東西，這傢伙基本上是“這種方式。 但只要你做到這一點，一個0來填充的。 如果你改變了它的第二次，它會這樣和另一個0被填充。 使用Shift鍵，然後再次得到另一個0填充。 所以，如果你做這件事情的<<我31處，你最終得到的面具 是32個字符長，其中最左邊的一個是1， 其中的所有的其餘部分是0。 而事實證明，順便說一句，這樣的一個號碼轉移到左側 也巧合的是，有時方便， 具有做該號碼的效果？ >> [學生]增加一倍。 增加一倍，因為每一列 - 1S的地方，2S的地方，4S的地方， 8S的地方，16S的地方 - 他們所有的倍增，因為你去左邊。 或者說，當你轉移1你要結束了身價倍增的數量。 你可以做一些有趣的數字轉換 通過轉換以這種方式所做的一切權力2。 那麼，怎樣做這項工作？ 然後給我一個面具，是為1正是在的地方，我想它除了全0， 然後這個表達式，被偷走toupper.c， 簡單地說數，n表示用戶輸入的， “和”與面具，什麼，你會得到嗎？ 你會得到1，如果有一個1在那蒙面位置， 否則你會得到一個0，如果不是。 所以所有的程序沒有有效的是它有一個循環， 為1，它創建了一個面具在這裡，然後在這裡，然後在這裡， 它使用按位“與”招，說是有1位用戶的輸入在這裡嗎？ 在用戶的輸入是否有1位嗎？如果是的話，從字面上輸出1，否則輸出0。 我們這樣做是整數只因為，這就是為什麼我們正在做的32位而不是8， 但我們已經介紹了，那麼什麼是此位，此位或， 這向左移位運算符，這是不經常非常有幫助， 但事實證明，他們可以。 事實上，如果你是代表類似的布爾值數組 只是為了表示真或者假，假設您是否想跟踪 滿屋子的300名學生是存在的， 你可以聲明一個數組，BOOL類型的尺寸為300，讓你得到300 bool值， 您可以設置為true，如果有人在這裡，否則返回false。 這是為什麼低效的數據結構中表示？ 這個數據結構的設計，300 bool值的數組有什麼不好呢？ 什麼是布爾值，其實，引擎蓋下的？ 這也可能不熟悉的東西。 事實證明，有沒有布爾。 請記住，我們創建排序與文件的cs50.h， 這本身就包含了標準的布爾值。 C是一種愚蠢的，但是，當涉及到bool。 它使用8位來表示每一個布爾值，這完全是浪費 因為很明顯，有多少位，你需要一個布爾值，代表嗎？僅有1。 所以，事實證明，如果你現在有能力按位運算符 操作即使在一個char，即使在一個單字節的各個位， 事實證明，你可以減少所需的記憶體來表示一些愚蠢的事 類似的出席風格的數據結構由一個因子8。 而不是用8位來表示真或假的，你可以從字面上使用一個 每8名學生在課堂上使用單字節 從0到1位切換使用這些低層次的技巧。 真正杜絕的能量。關於按位運算，還有什麼問題嗎？ 是啊。 >> [學生]有一個異或運算符嗎？ 是。有像這樣的一個異或運算符，^，胡蘿蔔符號， 這意味著只有第一件事，第二件事情可以是1的輸出是1。 還有一個，〜，這將允許你反轉0到1或反之亦然。 也有右移位運算符“，這是相反的，我們看到。 好的。讓我們到一個更高的水平。 我們開始談論文本，然後壓縮它 並用較少的比特數表示的文本; 我們討論了一些有關如何我們現在可以開始按位操作的事情。 現在，讓我們放大一萬英尺代表 更複雜的事情，如圖形。 在這裡，我們有一個德國的標誌，在這裡，我們有一個法國。 這些可能代表的文件格式，你可能知道 - GIF文件，例如。 如果你曾經看到的圖像在網絡上結束。 這是一個圖形交換格式。 這兩個標誌樣的適合自己的壓縮 或許最明顯的原因嗎？ >> [聽不見的學生反應] 有很多的重複，對不對？ 為了發送德國的標誌，認為這是在屏幕上的圖像 備份的臨時時代。 您可能還記得，有單獨的像素點組成的圖像。 有黑點和黑點的另一個整排一整排的。 有一群行的黑點，我們可以看到，如果我們真的放大， 就像當我們Rob的臉在Photoshop中放大。 只要我們得到了更深層次和更深入和更深入的圖像， 你開始看到的像素化，所有的平方，在這種情況下，組成了他的眼睛。 同樣的交易在這裡。如果我們在相當多的放大，你會看到個別的點。 好了，這是一種浪費位。 如果該標誌是三分之一黑色和三分之一的標誌是黃色的，等等， 為什麼我們不能以某種方式壓縮這個標誌嗎？ 甚至可以被壓縮，即使法國國旗的圖案是一個有點不同的。 GIF文件格式是一種無損壓縮格式， 這意味著你可以在這裡像德國國旗的圖像， 不犧牲質量的前提下，你可以扔掉了很多它的位。 這是像JPEG文件相比， 與我們大多數人可能更熟悉一些。 Facebook的照片和Flickr照片， 幾乎總是保存為JPEG格式時，他們上傳， 但JPEG文件格式是一種有損 - 有損 - 讓你扔掉位 但你也扔掉的質量。 所以，如果你使用Photoshop或壓縮的照片上傳到Facebook 他們在一個非常糟糕的手機， 你知道，圖像開始變得非常有污點和像素化， 這是因為它被壓縮的電腦或手機 由字面上扔信息。 但GIF是驚人的，它可以用較少的位數比它在默認情況下， 不會丟失任何信息。 它本質上這樣做，如下所示。 而不是存儲在一個文件中像一個BMP的RGB三黑，黑，黑，黑， 黑，黑，黑，黑，黑，黑，黑，黑等等， 相反，GIF格式是怎麼說的，“黑” 然後，“重複100次，”或類似的東西。 “黑，重複100次，黑色，重複100次...” “黃，重複100次。” 因此，它會記住，從本質上講，最左邊的像素 然後以某種方式編碼的概念，一遍又一遍重複的像素。 所以GIF文件可以壓縮不會丟失任何信息。 但是，如果你猜，如果是這樣的算法，GIFS使用， 這樣的標誌，即使是看起來相同的大小， 將是為GIF格式保存在磁盤上時，小嗎？ >> [學生]德國。 德國將是更小的呢？為什麼呢？ [學生]：因為你重複了許多次水平 ，然後重複另一時間。 “沒錯。 因為人民是誰發明的GIF只是一種擅自決定 重複將利用水平，而不是橫向。 還有更大量的重複橫向德國國旗在這裡比在法國的標誌。 所以，如果我們真正打開我的硬盤驅動器上的文件夾，這些GIF文件， 你可以看到，這裡是德國國旗的2千字節的法國人是4千字節。 它正好是一種巧合，一個是其他的兩倍， 但事實上，它是在的情況下，法國的標誌是更大的。 即使我們在這裡談論的圖形，可以適用於同樣的想法 沒有的東西一樣，是一個更複雜一點的標誌，但圖像。 如果你把一個蘋果的圖片，肯定有很多重複， 因此，我們可以以某種方式記住，默認的背景是藍色的 而不是如右側圖片顯示， 一定要記住在這幅畫中的每一個像素的顏色。 因此，我們可以拋出比特，不丟失信息。 蘋果仍然看起來是一樣的。 在這個例子中，你可能會看到在電影中會發生什麼。 這些代表老派的電影片，在最上面的圖片 你有一個房子和樹的RV駕駛過去。 ，麵包車驅動過去由左到右，顯然不改變嗎？ 這房子是不會在任何地方，樹是不會去任何地方。 唯一的移動是在這種情況下，麵包車。 因此，作為背景不變的建議，你可以做什麼，在電影 同樣扔掉的信息，不會改變在幀與幀之間。 這通常被稱為幀間壓縮 如果該框架看起來幾乎相同，這其中， 讓我們不要打擾存儲在磁盤上的任何相同的信息 這些中間幀，讓我們一次只能使用關鍵幀在一段時間內 實際存儲，信息冗餘只是作為一個小的完整性檢查。 與此相反，另一種方法來壓縮視頻是在這第二和較低的例子，在這裡， 而不是存儲30幀，為什麼你不只是存儲15幀每秒的呢？ 種精美，完美流動，而不是電影， 它可能看起來像它的口吃一點點，一點點的老同學， 但實際效果將是使用少得多位可能是必要的。 那麼，這給我們？ 這是一個有點順便說一句，還有什麼地方你可以去壓縮。 更多的，一類如CS175這裡。 在視頻下面是另一個例子。 如果蜜蜂是唯一的移動， 你真的可以扔掉那些中間幀的信息， 因為花的天空和樹葉不會改變。 但現在，讓我們考慮的最後一件事。 在接下來的5分鐘，我們離開Ç背後永遠在演講嗎？是。 pset時，雖然。 最後的故事C，然後我們得到非常性感尤物 涉及HTML和Web嗚呼。好的。 在這裡，我們走了。這就是動機。 事實證明，這一切的時候，我們一直在寫程序，我們運行鐺。 鐺，我們剛才說的第一週以來的相當多，需要的源代碼 並將其轉換成目標代碼。 需要C和將其轉換成0和1。 我已經躺在你的幾個星期，因為它不是那麼簡單。 有很多引擎蓋下的，當你運行一個程序，如鐺。 事實上，編譯程序的過程中，真的可以總結， 您可能還記得從Rob的視頻的編譯器上， 這4個步驟：前處理，編譯，裝配和連接。 但是，我們在課堂上和在世界上的大多數人通常會總結所有這些步驟 作為“編譯”。 但是，如果我們從源代碼是這樣的，記得這也許是最簡單的C程序 迄今為止我們已經寫了，記得在編譯時，它看起來像這樣結束了。 但是，實際上是一個中間步驟，這些步驟如下。 首先，有這件事情，這和我們的節目在最高層， ＃包括 什麼＃為我們做什麼？ 它幾乎複製並粘貼到我的文件stdio.h中的內容是什麼原因？ 為什麼我關心的內容stdio.h中嗎？在那裡的利益是什麼？ printf的聲明，它的原型，以使編譯器就知道我是什麼意思 當我提到這個函數printf。 所以第1步，在編譯前處理，這樣的程序鐺 或，鐺帶有一些輔助程序讀取您的代碼從上到下， 左到右，任何時候看到一個＃符號，接著像包括一個關鍵字， 執行該操作，複製和粘貼到您的文件在這種情況下stdio.h中。 這是第1步。 然後你有一個更大的C文件，因為龐大的複製，粘貼工作，剛剛發生的。 第2步現在正在編制。 但事實證明，編譯的源代碼，看起來像這樣 ，並把它的東西，看起來像這樣， 這對於那些熟悉的叫什麼名字？ >> [學生]大會。 “彙編語言。 這其實是，如果你把CS61，你將深入到更詳細的。 這僅僅是接近的，你可以去寫“0”和“1自己 在這樣一種方式，仍然至少有一點點的感覺，但寫的東西。 這些機器指令，如果我們向下滾動到這裡的主要功能， 注意到，這是push指令，將指令，減法指令， 調用指令，等等。 當你聽到你的計算機有英特爾內部， 在您的Mac或PC，你有一個英特爾CPU，這是什麼意思呢？ 一個CPU內建的公司像英特爾這樣理解某些指令。 他們根本不知道什麼是功能，如交換或主本身， ，但他們不知道什麼是非常低級別的指令，如加，減，推， 動，打電話，等等。 所以，當你的C代碼編譯成彙編語言， 非常用戶友好的代碼轉換成的東西，看起來像這樣， 的字面周圍移動字節或4字節在滿分的CPU等的小單位。 但最後，當鏘表示你的程序是準備藉此 到0s和1s，則發生的步驟稱為組裝， ，這一切都發生在眨眼時鐺。 我們從這裡開始，它輸出這樣的文件，然後將其轉換為這些0和1。 如果你想回去在某些時候，其實看到這個動作， 如果我進入hello1.c - 這是我們看著的第一個項目之一 - 通常我們將編譯鐺hello1.c，這將給我們的a.out。 相反，如果由你，而不是給它的-S標誌，你會得到什麼hello1.s 實際上，你會看到彙編語言。 我這樣做是一個很短的程序，但如果你回去爭奪 或恢復或你寫的任何程序，只是出於好奇 想看看它的樣子，實際上被送入CPU的， 您可以使用該-S標誌鐺。 但最後，還是有一個問題。 這裡是代表我實現你好，世界的“0”和“1。 但我用別人的功能在我的程序中。 因此，即使過程一直是我採取的hello.c， 它被編譯成彙編代碼，然後它被組裝成0和1， 唯一0s和1s，在這個時間點輸出 是從我的代碼的那些結果。 但該人士是誰寫的輸出，他們在20年前編寫的代碼 現在它安裝在設備上的某個地方， 所以我們有時他或她的0和1的合併與我的“0”和“1， 這給我們帶來了第4和最後一步的編制，被稱為連接。 因此，在左側我們有完全相同的圖像前： hello.c中成為彙編代碼變為“0”和“1。 但記得，我在我的代碼中使用的標準I / O庫， 這意味著在計算機上的某個地方有一個稱為stdio.c的文件 或至少​​其編譯後的版本，因為有人在幾年前 編譯stdio.c成彙編代碼，然後一大堆的“0”和“1。 這是所謂的靜態或動態庫。 這是在家電坐在某處的一些文件。 但最後，我有我的“0”和“1和人的”0“和”1 並以某種方式將它們鏈接在一起，從字面上相結合，“0”和“1 到一個單一的文件名為a.out或hello1或任何我打電話給我的程序 所以，最終的結果是所有的1和0，應編寫我的程序。 因此，這一切本學期的時候，你已經使用鐺 和更近期運行make才能運行鐺， 所有這些步驟已經發生排序的瞬間，但很刻意。 所以，如果你繼續在計算機科學，即CS61， 這是一層，您可以繼續剝滅 談到效率，安全性的影響等這些低級別的細節。 但是，我們要離開ç背後。 讓我們繼續前進，現在我們休息5分鐘， 我們回來的時候：互聯網。 好的。我們又回來了。 現在我們就開始我們的外觀，因為，你會看到，不只是在HTML HTML本身其實很簡單 但真正在Web編程，聯網更普遍的是， 所有這些技術如何走到一起 互聯網之上，使我們能夠創建更複雜的程序 迄今為止，我們已經能夠在這些黑色和白色的窗口。 事實上，即使在本​​學期在這一點上我們會花比較少的時間 PHP，HTML，CSS，JavaScript中，SQL多， 大多數學生做做著最後的項目是基於Web的 因為你會看到，你的背景現在在C 非常適用於這些較高層次的語言。 當你開始思考最終的項目， 其中，很像習題集0，鼓勵你在哪裡 你從頭開始做任何事情的興趣， 最後的項目是你的機會，把新學到的知識和悟性與C 或PHP或JavaScript或類似的旋 創建您自己的軟件，讓全世界都看到。 種子你的想法，要知道在這裡，您可以前往projects.cs50.net。 每一年，我們徵求教師和工作人員的想法和學生團體在校園 只是提出自己的想法，有趣的事情，可以解決使用電腦， 利用網站，使用軟件。 所以，如果你正在努力拿出自己的想法， 通過各種手段滾動的想法，從去年和今年。 這是完全沒問題，以解決已解決前一個項目。 我們已經看到許多應用程序在校園裡看到的狀態，洗衣， 許多應用程序食堂菜單導航， 許多瀏覽課程目錄和應用程序。 事實上，在未來的演講，並在將來的研討會， 我們將向您介紹一些公開可用的API，無論是市售 還有這裡的CS50在校園，讓您有訪問數據 然後可以做有趣的事情。 因此，更多的最終項目在幾天當我們發布的規範， 但現在，知道你可以單獨或與一個或兩個朋友 在任何您感興趣的項目。 互聯網。 你先走一步，拿出你的筆記本電腦，你去fa​​cebook.com的第一次， 在最近沒有記錄，並按Enter鍵。到底發生了什麼？ 當你按下回車鍵在您的電腦上，一大堆的步驟 啟動樣的神奇的發生。 所以，你在這裡的左側，像Fac​​ebook這樣的Web服務器是在右邊， 不知何故，你用這種語言稱為超文本傳輸協議HTTP，。 HTTP是不是一種編程語言。這是一個協議。 它是一組約定，Web瀏覽器和Web服務器時使用的互通。 這是什麼意思如下所示。 就像在現實世界中，我們這些公約 如果你滿足一些人的第一次，如果你不介意遷就我在這裡， 我可能會來給你，說：“嗨，我的名字是大衛。” “嗨，大衛。我的名字是薩米。 “嗨，大衛，我的名字是薩米。” 所以現在我們只是從事這種傻人協議 我已開始的協議，薩米作出了回應， 我們已經握過手，並在交易完成。 HTTP是非常相似的精神。 當您的Web瀏覽器請求www.facebook.com， 你的瀏覽器是真的做的是延長它的手，可以這麼說， 到服務器，並且它的發送一條消息。 該消息通常是像GET - 你想要得到的東西嗎？ - 我的主頁，這通常是由一個單一的斜線結束時的URL表示。 只是讓你知道我說的是什麼語言，我的瀏覽器，我要告訴你 我說HTTP 1.1版， 也很好的措施，我要告訴你的主機，我要的主頁 是facebook.com。 通常情況下，網絡瀏覽器，而您並不知道，人， 在互聯網上發送這個消息時，只需輸入www.facebook.com， 輸入到您的瀏覽器。 而Facebook的回應是什麼？ 它響應了一些外觀類似的神秘的細節，但也更。 讓我繼續前進，Facebook的主頁在這裡。 這是在屏幕上，我們大多數人可能永遠也看不到，如果你保持登錄狀態的時間， 但是，這的確是他們的主頁。 如果我們這樣做在Chrome中，請注意，你可以把這些小的上下文菜單。 使用Chrome瀏覽器，無論是的Mac OS，Windows，Linux操作系統，或類似的， 如果你控制點擊左鍵單擊，通常你可以拉一個菜單，看起來像這樣， 等待幾個選項，其中之一是查看頁面源代碼。 您通常也可以得到這些東西，通過“視圖”菜單上閒逛。 舉例來說，在這裡“查看”下，開發商是同樣的事情。 我要繼續前進，並期待在查看頁面源代碼。 你會看到的HTML標記寫入代表facebook.com。 這是一個完整的混亂，但我們會看到，這使得一些更有意義不久。 但也有一些模式在這裡。讓我向下卷動到這樣的東西。 這是很難的，一個人讀，但注意到，有這種模式的尖括號 選項等關鍵字，關鍵字的值一樣，一些帶引號的字符串。 這是什麼地方，當你簽署的第一時間，指定您的出生年份是什麼。 這裡，下拉菜單中的出生年是某種編碼 在這種語言稱為HTML超文本標記語言。 換句話說，當你的瀏覽器請求一個網頁， 它說這個慣例被稱為HTTP。 但到底是什麼facebook.com響應這個請求呢？ 響應這些神秘的消息，我們會看到在某一時刻。 但其反應是，超文本標記語言HTML的形式。 這是一個網頁被寫入在其中的實際語言。 什麼是網絡瀏覽器真的那麼，在收到的東西，看起來像這樣， 讀它從上到下，從左到右，任何時候看到這些尖括號 如同選擇一個關鍵字，它以適當的方式顯示這些標記語言。 在這種情況下，它會顯示一個下拉菜單，年。 但是，這是一個完整的一塌糊塗看。 這是因為Facebook開發者表現風格，例如5。 這是因為，他們寫的代碼，其實，寫得很漂亮， 很好的註釋，很好地縮進等， 但當然，傳真機，電腦，瀏覽器真的不給一個該死的 你的代碼是否是好風格。 而事實上，這是完全浪費按下TAB鍵，所有這些次 ，並把意見在你的代碼，並選擇真正描述性的變量名 因為如果瀏覽器不關心，你在做什麼在一天結束的時候，是在浪費字節。 因此，原來大多數網站做的是，即使為facebook.com的源代碼， 為cs50.net和所有這些其他網站在互聯網上 通常寫得很好，很好的註釋，很好地縮進之類的， 通常放在互聯網上的網站之前，該代碼是精縮， 據此，HTML和CSS - 別的東西，我們很快就會看到 - 被壓縮的JavaScript代碼，我們很快就會看到， 據此，長變量名，成為X，Y和Z， 和所有的空格，使一切顯得那麼的可讀性全都扔掉， 因為如果你這樣認為，Facebook的得到一個十億頁面的點擊一天 - 那樣瘋狂的東西 - 所以，如果一個程序員是肛門 按下空格鍵一個額外的時間，只是一些代碼行縮進以往任何時候都這麼多嗎？ 有何重要意義，如果Facebook保留空白 在所有的字節，他們發回的人在互聯網上嗎？ 按下空格鍵一次給你一個額外的字節，在你的文件。 如果十億人，然後進行下載主頁的那一天， 你有多少數據在互聯網上傳輸？ 技嘉沒有很好的理由。 理所當然的，很多網站這是不是這樣一個可擴展的問題， 但對於Facebook，谷歌，一些最流行的網站 經濟上有很大的激勵，使你的代碼看起來像一個爛攤子 因此，你使用盡可能幾個字節，然後將其壓縮 算法使用的東西，如zip，gzip壓縮， ，瀏覽器會自動為你做。但是，這一切都太糟糕了。 我們永遠不會學到什麼東西其他人的網站，以及如何設計網頁 如果我們這樣來看待它。 幸運的是，Chrome和IE瀏覽器和Firefox瀏覽器，如這些天 通常配有內置的開發工具。 事實上，如果我去這裡檢查元素，或者如果我去查看，開發， 和明確開發工具， 現在在我的屏幕底部的窗口彈出。 這是一個有點嚇人的，首先是因為這裡有很多不熟悉的標籤， 但是，如果我點擊左下角的元素，所有的方式， 顯然，Chrome是很聰明的。它知道如何解釋所有這些代碼。 因此，Chrome並清​​理所有Facebook的HTML。 即使有非空白在那兒，不縮進， 現在發現，我就可以開始瀏覽這個網頁的多層次。 事實證明，每一個書面的語言稱為HTML5的網頁開始， 這DOCTYPE聲明，可以這麼說：<！DOCTYPE html> 這是一種有重量輕，灰色，但在這個文件中的第一行代碼， 只是告訴瀏覽器，“嘿，來了一些HTML5。又來了一個網頁。” 第一次打開支架外，恰好是這件事情，一個開括號HTML標籤， 然後，如果我在更深的潛水 - 這些箭頭是完全沒有意義的; 他們只是演示文稿的緣故，他們實際上並不在該文件中 - 注意到Facebook的HTML標籤，這裡面的任何一個開括號開始 然後詞語被稱為標記。 所以裡面的HTML標籤顯然是一個head標籤和body標籤。 現在的head標籤內的是一個整體亂七八糟的Facebook 因為他們有很多的元數據和其他市場營銷和廣告的事情。 但是，如果我們向下滾動，下來，下來，下來，讓我們來看看它在哪裡。在這裡，它是。 這是至少在某種程度上是熟悉的。 Facebook的主頁，如果你曾經在該選項卡中標題欄的標題， 歡迎到Facebook - 登錄，註冊或了解更多。 這就是你會看到在瀏覽器的標題欄， 它是如何在代碼中表示。 如果我們忽略一切的頭部，大多數的膽量的網頁是在體內， 事實證明，Facebook的代碼將看起來更複雜 比大多數的東西，我們會寫最初只是因為它已建成了多年， 但也有一大堆的腳本標籤，JavaScript代碼， 使網站的互動性很強： 看到狀態更新即時使用的語言如JavaScript。 有什麼東西被稱為一個div，這是一個部門，一個頁面。 但是，在我們那個細節，讓我們嘗試縮小 看一個簡單的Facebook的1.0版本，可以這麼說。 這裡是你好，世界上的網頁。 在最高層，DOCTYPE聲明 這是一個有點不同的一切。 沒有別的，我們寫在網頁中開始<！除了線 除了一些所謂的HTML中的註釋。 但是，在大多數情況下，一切都在一個網頁是開放式支架，關鍵字，靠近支架。 在這種情況下，你可以看到最簡單的網頁可能。 HTML標籤包含一個頭的標籤，它包含一個body標籤， 但請注意，這個概念的啟動和停止標籤。 這是開始的HTML標籤，這是結束標記或結束標記。 請注意，對立的，他們在這個意義上，結束標記或結束標記 這個斜線內的本身。 同時，有一個開放的頭標記和一個親密的頭標記。 這裡是一個開放的標題和密切的標題標籤。 事實上，我已經把標題在同一行，純粹是武斷的。 它只是看起來像它會很好地適應在同一行，所以我沒有打擾按下[Enter]鍵幾次。 同時，我做的身體縮進是非常清楚的。 請注意，HTML語言是一個非常愚蠢的。 事實上，早在一天前，有所見即所得的編輯器 和Microsoft Word，你可以說，“這個大膽的，斜體，” 你實際上輸入的小命令在20多年前的散文 據此，你會說，“開始的文字加粗的文字加粗。” “開始使這個文本斜體字。這個文本斜體。” 這是HTML或任何標記語言是什麼。 這第一個標籤說：“嘿，瀏覽器。又來了一些HTML。” 下一個標記說：“嘿，瀏覽器。這裡談到的頭，我的網頁的頭。” “嘿，瀏覽器。這裡來的稱號。” 那麼，在這裡，“嘿，瀏覽器。這是它的標題。” 因此，這是瀏覽器知道如何不再顯示更多的字符比你好，世界 在標題欄中。 同時，這上面說，“這是它的頭。” 這是說，“又來了身體。下面是實際的身體” - 從字面上看，話你好，世界。 這在這裡說，“這就是它的身體。這是它的HTML。” 因此，瀏覽器是非常愚蠢的。 他們只是讀這個東西從上到下，從左到右，正是他們被告知做。 實際，讓我們在這裡做一個小例子。 讓我打開我的Mac上最簡單的程序在這裡，即“文字編輯”。 在Windows中，您可以使用Notepad.exe。 但是，這一切你需要開始製作網頁。 我要繼續前進，只是複製並粘貼此代碼到這個文件中。 我要繼續前進，並將其保存在我的桌面上， 我要保存為hello.html， 現在該文件名為hello.html。 在這裡，它是我的桌面上。 現在讓我去到瀏覽器中，將文件拖動到瀏覽器。 瞧，這是我的第一個網頁。 請注意，該選項卡的標題是你好，世界的每個標題標籤， ，請注意，你好，世界是我的網頁的身體， 嗚呼，我在互聯網上。 我是不是真的，正確的，因為這個文件是不是在互聯網上。 它正好是在我的本地硬盤驅動器在特定的路徑。 但這樣的想法是一樣的。我們現在需要的是一個web服務器，把它上傳。 但首先讓我們介紹多一點的複雜性和多一點程式化。 這是一個簡單的，如果無聊，網頁。 原來，有我們可以使用的其他類型的標籤。 例如，下面黃色的，我已經介紹了2個新的標籤。 我們不會起到多大的今天這些，但是請注意，鏈接標籤 不知何故從一切看起來不同。 鏈接標籤需要被稱為屬性， 和一個屬性是修改標記的行為。 在這種情況下，這是不是最好的選擇的名稱，鏈接，因為它的種毫無意義的， 但這個鏈接標籤說，從本質上講，包括我的網頁內的文件名為styles.css的。 你可以認為這是類似於C中的＃include指令。 Styles.css中所指的是一個完全不同的語言，我們今天不玩， 但它的美學：字體大小，顏色，填充，縮進，頁邊距， 和所有的那種美學細節。 同時，該腳本標記的功能類似， 而不是包括CSS，語言，它包含了另一種語言，JavaScript。 因此，換句話說，這些標籤我最終將能寫我自己的網頁 但也拉，我或別人寫的代碼 所以，我們可以站在別人的肩膀上，我們可以養成良好的設計， 分解出公共代碼。 如果我有10個不同的網頁，這意味著我的美學 可以被分解，很像＃包括到一個單獨的文件。 因此，我們到達那裡。 但是，讓我們更有趣的東西，這個文件實際上是第一次做。 再次，這是只是文本編輯。我不是技術上在互聯網上，但我們會到達那裡。 我想你好，世界一點點大膽的，它是。 所以，你好，讓我們武斷地說的進行大膽的。 同樣的故事是一樣的：你好，逗號，開始做這個大膽的， 當時的世界被以粗體字印刷，這意味著停止打印此大膽。 讓我繼續保存我的文件，回到鉻，我會放大，所以我們可以看得更清楚， 重新加載，你會看到，現在世界上的大膽。 網絡是所有關於超，讓我們繼續前進，做到這一點： 我最喜歡的網站，比方說，youtube.com。 保存，重新加載。好吧。有一對夫婦的問題，現在除了駭人聽聞的網站。 1，我敢肯定，我打在這裡輸入。我做到了。 我不僅按下回車鍵，我也縮進，是我們一直宣揚的風格， 但我是世界的。 所以，這是為什麼？瀏覽器只能做你告訴他們做什麼。 我還沒有告訴瀏覽器，“破行。插入段在這裡休息一下。” 因此，瀏覽器，它並不重要，如果我打回到30倍， 它仍然把我的右手旁的世界。 我真的要在這裡做的是這樣說
，插入換行符。 而實際上，一個換行符是怎麼樣一個奇怪的事情 因為你不能真正地開始移動到另一行，然後做一些事情， 然後停止移動到一個新行。這是一種原子操​​作。 你可以做到這一點，或者你不知道。您按下回車鍵，或者你不知道。 因此，br是一點點不同的標記，所以我需要重新梳理的同時打開和關閉 所有一次。 該語法是這樣的。 從技術上講，你可以做這樣的事情在某些版本的HTML， 但是這僅僅是愚蠢的，因為沒有任何理由來啟動和停止的東西 如果相反，你可以做這一切。 認識到，HTML5並不嚴格要求這個斜杠， 所以你會看到課本和網上資源，沒有它， 但良好的措施讓我們的做法到目前為止，我們已經看到的對稱性。 這意味著，該標記是打開和關閉。 所以，現在讓我救我的文件，回到這裡。 好了，所以它開始看起來更好，但我知道網絡是一種可點擊的， 但YouTube的在這裡似乎並沒有帶來任何。 這是因為，即使它看起來像一個鏈接時，瀏覽器不知道本身， 所以，我必須告訴瀏覽器這是一個鏈接。 做到這一點的方式是使用一個錨定標記： 的 讓我移動到一個新行所以這是一個有點更具可讀性， 我會收縮的字體大小。 我做了嗎？號將是有這種二分法。 這個標記，錨標記，確實需要一個屬性， 修改其行為，並且該屬性的值顯然是YouTube的URL。 但是要注意的兩分法是，僅僅因為這是你要的URL， 這並不意味著這個詞，你強調和鏈接。 相反，它可以是這樣的事情。 因此，我不得不說這個詞的超鏈接使用close錨標記。 請注意，我不這樣做。 1，這將是一個浪費大家的時間，這是沒有必要的。 要關閉一個標籤，你只提名字的標籤。 你不提任何的屬性。 所以，讓我們保存，回去。好了，瞧，現在它是藍色的，以及超鏈接。 如果我點擊它，其實我去到YouTube。 因此，即使我的網頁在互聯網上，它至少是HTML， 如果我們讓互聯網趕上，我們實際上結束了，在這裡在youtube.com。 我可以回去，這裡是我的網頁。但是要注意這一點。 如果你收到垃圾郵件或網絡釣魚攻擊， 現在只需五分鐘後你有能力做同樣的。 在這裡，我們可以做類似www.badguy.com 無論粗略的網站，那麼你可以說驗證您的PayPal帳戶。 [笑]，而現在這是要去badguy.com，我不會去點擊 因為我不知道在哪裡，導致。 [笑聲] 但是，我們現在有能力，實際上在那裡結束。 因此，我們真的才剛剛開始觸及問題的表面。 我們不會編程本身，我們所編寫的標記語言。 但只要我們圓了我們的詞彙在HTML中， 我們將介紹一個實際的編程語言PHP， 這將允許我們自動生成HTML，自動生成CSS， 這樣我們就可以（星期三）開始實施，說， 我們自己的搜索引擎等等。 但更多的，在一兩天。然後我們會看到你。 [CS50.TV]