ALLISON BUCHHOLTZ-AU: 沒事大家。 歡迎回到節。 這是我們倒數第二部分。 它是如此傷心。 我不知道我該怎麼辦 沒有看到你們每星期一。 我想我們應該just-- 也許我們可以只 滿足這裡吃飯什麼的。 我不知道。 我會帶食物來代替。 我們只是說說而已。 但是,是的,下週會 是我們的最後一節。 關於這一點,你必須在下週測驗。 我知道我忘了做我的一樣, 2週提前通知上週, 但希望你們 知道這是未來。 但願這是最後一個 期中考試為你們的學期。 但它要覆蓋所有的 我們已經討論了材料。 所以它不喜歡你可以忘記 大約四個環或變量。 因為我們了解到 那些在開始的時候, 這些都是很明顯 公平的遊戲為你的測驗。 這將是相同的格式,同一 長度,所以你已經習慣了。 還有的將是 手工編碼的問題, 也許有些真的假的, 也許一些簡短的回答。 所以你應該 熟悉的格式, 特別是如果你採取 在實踐的檢驗。 但正如我在這裡說,這是 累積的,但我們肯定 要被聚焦在 事情的起六週。 因此,我們可能不會 問你有多少字節 在每個類型或 這些各種各樣的事情, 但我們很可能會成為 感興趣的東西像鍊錶, 或者不同的數據結構, 或不同的算法 我們已經講過了。 所以一定要確保你真的 了這些,如果你 需要什麼資源, 這裡有大量的資源。 我只是給了你一種 的快速列表出現。 下週將是競猜 在此期間,檢討。 所以,如果你有任何問題, 或特定的主題, 在測驗的具體的事情, 你想去了,請 他們提前發送給我時間讓我可以 種準備一些材料說。 而除了這 節評審,我們將 也可以拿著課程範圍 回顧像我們做最後一次。 它的將是 由同一人來完成。 我不知道這是否 令它變得更好或更壞, 但它會是我, 漢娜,Davan和加布了。 所以,如果你要來看看 我們所有的戲謔與對方 並引導您完成測驗 檢討,你一定要 來,下週一也。 所以你只要有一個週一果醬 包裝測驗檢討,這是很好的 因為你有週二 處理過的一切。 但絕對做檢查 這些資源。 Study.csv.net是迄今為止,我 認為,最有用的, 主要是因為它具有 大量的示例代碼, 它擁有所有的電源點 與它所有的筆記, 這是真的是我最畫 從我的部分材料。 如果有什麼事在以前的 我可能已經派出部分 你可能沒有 得到,只是讓我知道。 就像上週的示例代碼, 如果任何人都沒有拿到, 只是給我發電子郵件或來跟我說話, 我會確保你得到那個。 所以用的是,今天我們 要談論的JavaScript。 所以在這裡我們湯米,我是誰 只是說你昨晚。 我喜歡湯米。 JavaScript是他的最愛 語言,他說在這裡。 他們會試圖告訴你,這是 不是最好的,他們將是錯誤的。 所以,湯米是一個JavaScript高手。 我不太在他的 的水平,但我當時想, “湯米,我怎麼教 這些孩子的JavaScript?“ 所以,我得到了一些小竅門,讓 希望他們的工作了。 所以,有兩件事情知道的是, JavaScript是一種客戶端腳本 語言,因此而PHP是什麼 我們認為更多的服務器端, 它被上傳到服務器, 編譯和執行存在。 執行這一 在自己的機器。 好不好? 所以,你加載一些JavaScript頁面, 而且你的機器上執行。 語法非常類似於C和PHP。 我們將通過 JavaScript的一些實例中, 而你要看到, 我們談論的變量的方式,循環, 和條件都十分相似。 好不好? 他們是如此的相似事實 可能會絆倒一些你 起來,在某些情況下,僅僅是因為 你會加入的C一點點 那裡不應該有。 也許你嘗試輸入一些東西 當它不應該被鍵入。 而上,一件事 知道的是,JavaScript的 是一種動態類型 語言,如PHP。 所以,如果你們還記得 從節最後一周, 當我們是那種做 我們的PHP速成班, 我們看到了一個字符串人能怎麼會有 變成一個int之一,等等。 你的變量的類型 在運行時確定, 所以他們可能會改變過 該程序的過程中, 並以同樣的方式,我們從未 真的申報類型PHP變量, 我們將做同樣的 這裡的事情,我們是不是真的 控制我們的變量的類型, 可以這麼說,就像我們在C. 然後一件事 這是很酷的 你可以錯誤 通過控制台檢查, 與這個偉大的功能 的console.log,這 允許您打印出不同 變量或對象,我們將 談論的話題。 就像上週我 像“,使用此功能,”有傾倒 從你的PSET這是一個函數 要使用,的console.log。 我很驚訝有多少 學生在辦公時間 不知道轉儲功能。 我當時想,“伙計們,這將 讓你的生活變得更輕鬆。“ 好了,所以這是一種 只是一個簡單的事情,一如既往, 我們有例子。 我知道你們愛那些。 因此,這裡是一個很的例子 簡單的JavaScript文件在這裡。 所以它只是要創建 這種彈出,上面寫著: 的“hello world”,當你 進入頁面,但讓我們 試圖通過走這一點。 所以,很顯然,這只是 喜歡你的正常的index.html。 所以,只要我們正常這裡的模板, 我們有HTML,我們有我們的頭, 並且就像用CSS,我們如何 包括一些外部文件,對不對? 我們有一些腳本類型 文本是JavaScript的。 和源是hello.js, 這是到這裡。 這是hello.js的整個文件。 然後我們有一些 標題和一些身體HTML 我們真的不關心。 發生的事情是,當我們加載該頁面, 它會自動執行該腳本。 好不好? 所以用JavaScript 自動執行。 所以它會做,這是怎麼回事 立刻去執行這個。 而且它會說,“警報。 你好世界。“ 這是警報的功能 實際上產生此框。 好不好? 因此,它是一種所有活動的內容包括。 沒有什麼額外的,我們有 這樣做除了剛才的警報, 然後不管我們想 在我們的警告框。 好不好? 所以,這只是一個超級簡單 例如什麼樣的JavaScript可以做。 其中一個很酷 的事情,因為我們將看到, 是,JavaScript允許你 操縱你的網頁, 而不必 每次重新加載它們。 因此,如果您want--,例如,如果 您正在上空盤旋的東西, 如果你們曾經有 見過像菜單欄, 或者當你對一些懸停 話題,一個下拉菜單出現, 這是因為JavaScript代碼。 好不好? 所以,你不重裝整個 頁面獲得此菜單顯示, 你只是在尋找一些具體的 該用戶已採取行動, 這是所謂的事件,我們會得到 成,一旦你看到,你說, “OK,編輯的東西在這 頁面,使它看起來不同, 但只有編輯這些具體的東西。 不要重裝整個事情。“ 因此,它實際上是更漂亮,和 你不必重新加載頁面, 它真的很酷。 所以變量聲明, 所以你可以種看, 我把上面這裡,鬆散類型。 所以這是非常像PHP。 我們不需要告訴 JavaScript的是什麼類型的我們 期望每個這些變量的給定。 它們可以是任何類型的,我們想要的。 所以,你在這種情況下注意到,我們聲明 他們很簡單,只需用“VAR” 然後隨心所欲 我們的變量名是。 有一點要注意的是,當你 把VAR在變量名的前面, 在本地作用域它。 好不好? 這對你完全合理 徹底抹去了var 和公正面前有S等於CS50,以及 這將只是一個全局變量。 好不好? 所以,你可以初始化這兩種方法, 只是取決於你想要的。 因此,如果你初始化 它的功能範圍內, 並且希望該變量 保持這種功能範圍之內, 你要想做的事 像VAR名的變量, 對,如果你想讓它 在全球範圍,你 可以做的名字 的變量,然後 無論你想它設置為。 好不好? 這是一種很酷的事情到這裡, 因為如果我們看到我們的變量 B開始了為真。 而這是什麼does--能 誰能告訴我這是什麼呢? 所以,我們有一些警惕。 什麼B型 在開始? 聽眾:布爾。 ALLISON BUCHHOLTZ-AU:布爾。 正確的。 然後我們重新分配B 這個字符串,對不對? 這樣的話在這裡,有什麼B型呢? 這將會是一個字符串,對不對? 那麼,什麼是重要的 通知是,在C,我們 幾乎可以永遠不會做 類似的東西。 我們得有一個變量, 它轉換為別的, 也許做一些功能,用兩 我,請從電荷為整數。 但是,如果我們在這裡看到,B 很容易變型。 聽眾:等等,讓你可以 像“,使B整數?” ALLISON BUCHHOLTZ-AU:是的。 你可以重新分配B為整數。 聽眾:真的嗎? ALLISON BUCHHOLTZ-AU:是的。 然後這將是一個int。 所以,你的變量可以通過改變 該程序的過程中也。 它們不是嚴格類型。 這是非常鬆散類型。 好不好? 基本上你的變量可以為所欲為 他們希望,因為我們種看到的PHP。 他們可以做一些瘋狂的事情,所以 是相當小心,這很重要。 以及命名您的變量。 如果你做的不是突然,所有的 你要像, “等等,我認為這是一個 字符串,而現在它是一個int, 我真的不知道 這是怎麼回事了。“ 因此,這是只是一個簡單的例子 顯示如何變量可以輕鬆 改變其類型超過 程序的過程。 好不好。 所以這應該是 超級,超級熟悉。 因此,這些都是我們在JavaScript中循環。 它們是完全一樣的,除了 而不是四個INT I等於零, 我們可以只說無功我等於零。 然後,我們可以有我們的同類 的情況下,同類型的更新, 我加再加上工作得很好。 所以四肢是相同的, 消遣是相同的, 做消遣是完全一樣的。 同類型的通用格式。 我們注意到,四,括號, 括號,這都是一樣的。 也將有分號 當我們到了示例代碼。 你會看到它是相當 大致相同為c。 對於函數聲明, 再次,非常相似。 我們有一些功能,僅僅 說,這是一個功能,然後 的名字我們 功能,和輸入。 並再次,如果我們注意到,我們 沒有此類型的任何。 對不對? 我們什麼都沒有說這些 必須是整數或雙打,或浮動。 他們可以為所欲為。 重要的是注意到該 我們需要預先編寫函數 讓JavaScript的知道, 這其實是一個函數。 所以,這只是一些簡單的相加 函數返回x或y, 然後什麼也很酷 是,你實際上可以 分配的功能的變量。 所以在這種情況下,總和是現在 函數實際上做總和。 所以,如果你在這裡看到,我們有 功能,函數名,輸入。 對不對? 在這裡,我們只是功能和投入。 所以,這就是所謂的匿名函數。 這是什麼,應該是新的 大多數的你們,如果不是你們。 所以基本上是什麼 意思是,我們不這樣做 需要以我們的名義 功能在這種情況下。 我們只能說,“OK,我要去 有此功能的執行,在這裡 是它的輸入,和這​​裡的 它會做。“ 尤其是當你分配 一個函數來一些可變 你要去處理, 你不一定 需要把它的名字,因為 你會是指 它由該可變 名稱,而不是由任何 該功能實際上是調用。 好不好? 所以,如果我們在這裡看到,我們 有一些變量之和現在 這等於 之3至5。 我們會得到這一點。 而這也只是有一定的警覺, 三加5等於數。 這再加上只會串連 無論我們的答案是到字符串。 也很酷,再加上可以連接字符串。 對於JavaScript的,與PHP, HTML和CSS正如我們所說, 它的很多我們種取 訓練車輪在這裡下車 和你們有很多專門技術 如何真正理解這些東西。 他們是略有不同, 但他們沒有這樣的外國 而且,你不能谷歌的東西或 與W3號學校網上找一找。 而我們真正期待你 傢伙來樣,實驗 並了解你自己。 所以,我知道這似乎有點 比一些的C東西那麼徹底 我們這樣做,但實際上是有原因的。 但希望這不是太 不同,它不是壓倒性的。 因此,在JavaScript數組, 再次非常,非常相似。 對不對? 我們有一些變量數組 這等於空的方括號, 而這只是一個空數組。 這通常被稱為 文字數組符號。 這只是一件事情,我們把它叫做。 如果我們看到陣列中的兩個在這裡,我們有一些 字面數組有三個要素, 對不對? 然後我們有一些 VAR第三元素是 一些變量,只是 將要舉辦這個字符串,JS。 元素,好注意, 用逗號分隔, 就像我們所期望的。 你也可以訪問這些,因為我們沒有 在C,這個指標符號,對不對? 因此,從不同的PHP 現在,我們要回 只是種參考 事物通過索引。 就像C,它也是零指標。 我覺得這將是非常殘酷 如果他們突然作出的JavaScript 1 索引,你必須徹底 重新思考你如何看待陣列。 一個很酷的事情是,而不是 具有假如你曾經do-- 想要的陣列的長度, 也許你通過它遍歷 直到你找到一些終端,或 你只知道它是什麼。 因為JavaScript是非常寬鬆更多 方法不僅僅是類型,我們在這裡看到, 我們只要讓這個數組 更大,因為我們決定。 如果我們注意到數組3 有三件事情開始, 但隨後突然, 我在想,“哦,只是在開玩笑。 我們究竟要 使它101的東西。“ 所以,如果你想知道 你的數組的實際長度, 你不喜歡這樣。 我們將看到很多 此表示法中的例子中, 但使用JavaScript 它通常什麼 你在談論的對象 點什麼樣的功能 要應用於它。 好不好? 所以在這種情況下,我們的 對象數組二, 和我們說,我們想要的 長數組兩種。 因此,這只是調用就像是在這個時間。 而這將返回您的長度。 也未嘗需要注意的是 如果我們發現我們的陣列, 不像C,他們沒有 是所有相同類型的。 這更像是PHP。 JavaScript是基本上一樣, C和PHP的這個有趣的MELD。 因此,我們將進入這一點。 現在,讓我們姑且 你的陣列基本上 像C數組,在 他們是零索引。 好了,那就是一切。 你也可以擴展一個 數組索引任何你想要的。 而這很可能賽格 故障你或給你一些錯誤, JavaScript是一樣,“不,這是很好。 我得到這個。 我們就直奔 要在哪裡“。 好了,對象是非常重要的。 你們將使用大量的這些 在P組,如果我沒有記錯。 所以事情,這些都是 類似於C的結構。 所以,你能想到about--時 我們去一個例子權 在此之後,我認為它會 做了很多sense-- 但我們基本上是用對象 組織過程中的相關信息。 當我們談到 結構在C,我們常常 談學生誰有一些名字, ID,房子,你知道的,濃度。 這就是那種同樣的事情 我們使用對象這裡。 這只是組織 類似的信息。 你也可以認為這是更 類似於關聯數組在PHP。 因此,這將是怎樣的事情 在這裡我們有一些關鍵的一些價值, 非常類似PHP。 所以,你可以初始化一些 空對象,因為我們看到了這裡, 只需用花括號。 所以數組方括號。 空的對象是大括號。 良好的區別有。 而這些都只是兩個不同的 方法來設置屬性。 因此,這是一種 得多的方式 類似於PHP,我們 關聯數組,與我們的關鍵, 與我們的價值,而 這個is--你會 看到這個有很多更在JavaScript中。 這往往是慣例。 並以同樣的方式,我們做 陣列中的兩個點的長度,這是說, “OK,給我這個 這個對象的屬性。“ 對不對? 所以,以同樣的方式就好像,“給我 屬性長度數組兩個,“ 這是說,“給我一些 我們的空對象的財產。“ 或者在這種情況下,我們有 這裡分配給一些值。 但你也可以訪問這種方式。 然後在這裡這只是 顯示兩個不同的警報。 因此,這將顯示警報 將是完全相同的, 這只是兩種不同的方式 訪問我們想要的元素。 這是否有意義給大家? 我覺得像這樣的 可能更有意義, 只是因為我們度過了PHP的。 但是當我們做更多的例子,這 是字面上完全相同。 很多它只是改變語法。 OK,所以例子。 我愛的例子。 因此,這裡是一些CS50 變量,它是一個對象, 我們保存這一切 關於它的信息。 所以我們當然有,教練, TFS,pset時,和錄音。 因此,我們注意到這些幾乎 所有不同類型的。 對不對? 所以,對象可以存儲 不同類型的屬性。 我們能想到的this--這是非常 類似於我們在PHP關聯數組。 左右鍵,值,鍵,值, 鍵,值,等等,等等。 什麼也以同樣的方式吸引 我們可以有數組的數組內, 我們還可以有內的對象 對象,數組或對象中。 你從來沒有真正限制 只是事物的一個。 我們可以得到非常Inceptionesque,只是 不斷下降的兔子洞在那裡。 因此,如果我們注意到,我們 有一些課程, 是一個字符串,教練,這是一個字符串, 和數組,一個int和一個布爾值。 因此,所有的這些不同的事情。 好了,所以,我們有另外一個。 因此,在這種情況下,我們有 對象的數組。 所以就像一個對象 可以具有在它的陣列。 我們也可以有對象的數組。 這可能是有用的,以 想想類似那種 如何我們有一個哈希 表中,我們有一個數組 所有這些不同的 類型結構的說 是指向不同 節點和諸如此類的東西。 但在這種情況下,我們 有對象的數組。 因此,這就像一個數組 的關聯數組。 因此,我們有一些第一個元素會 與名詹姆斯對象 和眾議院溫斯羅普。 你們可能還記得 東西非常相似,這 與你最後的pset,那裡如果你 拉從數據庫的東西, 第一類 在你的陣列的事情是 所有有關信息 能夠滿足它的第一個用戶, 然後你不得不指數成 得到他們的股票或者其緩存 或者諸如此類的東西。 所以這是非常相同 的事情,只是一個小變化 在語法,點點變化 的話,我們用它來形容他們。 因此,如果我們想要的,誰能告訴 我這是什麼警報會在這裡做? 還是什麼的該位 代碼會為我們做? 觀眾:它會給你所有的名字。 ALLISON BUCHHOLTZ-AU:對,所以它 只想提醒所有的名字 因為它會通過 山寨我,所以它會從零開始。 所以它會說,好吧,我們正在尋找 在此第一個目的,這 在我們的數組的第一個插槽。 它說,“給我 屬性,該對象的名稱。“ 所以,我們去這裡,我們就 掃描時,我們會發現名字, 我們會打印出 詹姆斯,莫莉和卡爾。 有任何疑問,這麼遠嗎? 不幸的JavaScript 你會是 做了很多的期待上你 自己,找出語法, 努力解決它。 但當然,我一直在這裡, 辦公時間一直在這裡。 這一周,我可能是在星期二。 所以,如果你在那裡,你可以 來探望我這個星期。 這將會是巨大的。 OK,所以DOM是文檔,對象模型。 所以這只是一種方式 我們這樣想 關於我們如何HTML和一切 在它的組織方式。 這是非常多的東西 可能會拿出你的測驗。 我知道我的一年,它像這裡的 HTML文件,填寫DOM它。 而你只需填寫小事。 這些應該很容易點希望。 希望你會see-- 觀眾:[聽不清] ALLISON BUCHHOLTZ-AU:那麼 你在這裡看到這棵樹? 聽眾:是的。 ALLISON BUCHHOLTZ-AU: 因此,他們會問使用 填補了身下發生的事情。 也許身下,我們有一些 div的或者我們有一些段落, 我們會要求您填寫 一棵樹非常喜歡這一點。 因此,我們將通過它走。 因此,文檔,對象 模型只是一種方式 構建和思考 我們的HTML圖形。 而且當我們得到 到更多的JavaScript, 這將是 其實辦法,我們 操作不同 頁面上的元素。 我們需要一種方法來訪問每個 的東西在我們的HTML, 所以這給了我們一個非常 具體的標準化方式 在不同的網頁來做到這一點。 所以,如果我們只是穿行 這這裡,當然 我們的文件就像是我們整個文件。 這顯然是有道理的 它的最大的事情, 然後我們有我們的實際HTML, 這相當於在這裡此標籤。 此外,如果你的縮進你的標籤 正常,然後創建這個DOM樹 變得超級簡單。 所以,我們在這裡有一定的頭。 我們有一些身體 我們看到過幹的HTML, 這就是為什麼我們有頭部和身體。 在頭部,我們有一些 標題標籤,結束標題標籤, 所以我們知道,來的頭後。 而在我們的標題標籤, 我們有你好,世界。 好不好? 所以這是這整個左手分支。 然後換右手支 在這裡,我們可以看到,我們有HTML, OK,我們已經做到了這一點頭部, 我們正在尋找的只是身體, 因此,我們有一些身體部位。 和範圍內的,唯一的 我們擁有的是你好,世界。 好不好? 如果我們有像的東西 一些支架p和然後 你好,世界,然後又 再見支架P,世界, 我們將有兩個泡沫 脫落的位置。 因為他們都是身下,但 他們是獨立的段落這種情況下。 肯定是有實踐 對在以前的測驗, 以及它在網上很多。 OK所以,這只是讓 我們看到的一切很好 和操縱的東西 很系統。 好不好? 我們知道如何 遍歷這棵樹, 所以我們知道我們想要訪問。 OK,所以這是為什麼我們要 具有這種模式, 這樣我們就可以使用這樣的事情, 我們明白他們的意思, 而且他們的標準化 在所有的事情,我們做的。 因此,文件標題點就是 our--的標題所有這些 是相當自我解釋, 我常常這樣想。 所以前三 例子只是說, “OK,只是給我 本網頁標題“。 所以,它會給你什麼 對應的稱號。 文檔點的身體去給你 無論是那些身體標記內。 所以,你可以操縱的。 和文檔圓點點陣體 輸入HTML是一個非常酷的, 也許並不像超 直觀,但內部HTML 對應於這裡這個權利。 所以,如果你曾經想 操縱文本頁面上, 通常你會做 一些與身體內點HTML。 好不好? 所以內部HTML往往是指 實際上是什麼,這些標記之間。 好不好? 然後有用的功能。 所以,如果你想獲得 任何這些,任何元件, 我們有一些標識,類 名稱或標記的名稱。 這是非常相似的 事情我們做與CSS,對不對? 在這裡我們有一些選擇的 對應於任一個標籤,一個類 我們給他們,或一個ID。 這是非常相同的方式。 如果你有什麼事情, 有一些類狗, 和你說得到了標記名稱的元素, 你把狗在那裡 - 或遺憾, 類名。 你可以把點在那裡。 這將返回所有那些 有該類元素給你。 所以,你可以操縱只是那些。 以同樣的方式,也許你只是 要操縱一些頭,所以 一些H1的頭,像我們一樣。 你可以做得到按標籤元素 名字,因為H1是一個變量名。 並以同樣的方式,如果你想獲得 一些獨特的東西,你可以做得到的標籤。 通過id來獲取元素。 他們實際上是很多的這些。 這些都只是像三個非常多。 所以,如果你在網上去,因為 我會鼓勵 你做,並做一些 對自己的研究, 我絕對推薦 尋找到所有這些。 他們可能是超 是有用的,特別是當 你想只是一種操縱 無需非常具體的事情 要經過,並嘗試 解析出一切。 好了,過去的事情 是JavaScript事件。 所以,當我前面說的 關於去到一個網站, 而當你在徘徊的東西, 或者您的鼠標懸停在東西, 別的事情發生。 這就是我們想要 想想作為一個事件。 所以,我們有實力 有用這裡的onclick。 所以,我的是懸停,我這, 很肯定,只是懸停。 同樣是一噸,這些 你可以看一下。 有一個整體的名單在網上 不同的東西 你可以聽的。 但是JavaScript的事件 基本上只是回應事情 您的用戶在做什麼。 對不對? 所以,你的用戶做 什麼東西,這是一個事件, 和JavaScript將響應 但是你會喜歡它。 它會作出相應的反應。 因此,在這種情況下,我們有 一些窗口點的onload。 所以,這是什麼說的是,“等待 直到窗口的加載“。 好不好? 所以,當一切都裝,onload事件, 那麼你就可以執行此功能。 所以,當一切都 加載,你會 有一些搜索按鈕 通過ID獲取元素, 它打印了什麼 元素是作為搜索按鈕。 然後我們有這個變量, 我們說,“OK,的onclick。” 因此,當我們聽到咔嗒聲 上的搜索按鈕, 執行此功能,這是一個 警覺,你點擊搜索按鈕。 所以會發生什麼is--這是一個很好的 這裡的小圖形表示。 因此,我們的文檔載入, 這是我們的onload, 我們發現我們的搜尋 按鈕,這是這樣的。 我們正在尋找我們的搜索按鈕。 然後當搜索按鈕 點擊,它對應於這裡。 的onclick。 然後我們終於提醒我們的用戶, 這是在這裡最後一行。 好不好? 所以,每個這樣的四步剛 對應於四盒 那裡的底部。 這是否有意義給大家? 然後一件事,我只是去 更何況非常非常簡短,我 鼓勵你們到 去看看更多的是進 jQuery的,這僅僅是一個庫 這是建立在JavaScript的頂部。 它是超級有用的,因為 和大多數庫。 有很多的功能。 所以,如果有過的東西, 你想在JavaScript中, 你的第一直覺 不應該去思考 對“什麼功能應該 我的代碼?“這是應該的, “讓我看看誰家 已經做到了這一點給我。“ 由於十之八九的, 有人會做它已經, 他們可能做得更好。 人們花了很多時間做這些, 和JavaScript非常廣泛的應用, 所以人們不斷 試圖使它更好。 和jQuery有很多功能 這可能是對你有用 在最終的項目,如果你 做網頁設計的任何東西。 正如我喜歡說,“工作 更聰明,而不是更辛苦“。 如果你們這樣做,這將是巨大的。 當我們在黑客馬拉松我不 希望你是所有的壓力太大了。 我希望你能喜歡,“我得到了 這一點。 jQuery的氣死我了。 我不需要寫這些功能。“ 所以只是兩件事 還記得,我要去 讓你們看起來更 到jQuery的你自己。 所有我要說的是它 做一些漂亮的東西真棒 並且可以使你的生活 輕鬆許多。 但是你要什麼 擁有的是什麼文件 那你要使用它, 你會想這兩條線。 你會想 JS的jQuery的點JS腳本。 而實際上你的源 將是一些URL。 如果谷歌的jQuery,谷歌 實際上承載所有的文件給你。 所以,你一定要 輸入的URL來代替。 我只是把這個在這裡 為了簡單起見。 這一切都意味著是在哪裡 找到你的jQuery庫。 這是巨大的,所以你不想 舉辦它自己的計算機上 如果你能避免它,這就是為什麼我們 往往只是把谷歌的網址是 託管所有這些文件給你。 好不好? 你Google一下,我保證 這將是在那裡。 然後什麼 你是JavaScript文件 使用,所以這只是一些外部 JavaScript的,你正在使用的文件。 在我們鏈接到我們的CSS以同樣的方式 文件,這是同樣的事情。 這只是鏈接到文件 在您的JavaScript是。 我有一些例子 用簡單的JavaScript。 所以我們會做的時候。 然後在你的JavaScript指數, 這是你的JavaScript文件在這裡, 這是種包裝的 你有jQuery的。 你幾乎99.9 時間去百分比 有這個在index.js文件。 由於這是什麼說的是, “不執行任何東西 直到你的文件實際上是 準備好了,“這正是你想要的。 因為如果你的文件還沒有準備好, 和jQuery開始做的事情, 它只是一個爛攤子。 所以,你總是希望有這樣的包裝。 然後換東西去那裡,我 要離開你的球員自己詳閱。 好了,有沒有什麼問題的權利 現在關於JavaScript有什麼看法? 或DOM模型? 如果沒有,我們有一些很酷 例子,我們可以通過, 那你們可以幫助我的代碼。 但我也將是 超好聽的,如果你 不想說什麼 對於這些,這很好。 我也可以只給你例子。 但在任何 PowerPoint演示之前,我們繼續前進? 酷。 我覺得你們需要的能量。 因此,我認為我們將開始 與我黨的第一個例子。 我們有三個例子, 你有你的選擇。 因此,我們有時鐘,我們要去的地方 實現一個實際的時鐘是 要更新隨著時間的推移。 我們這個偉大的Twitter的功能。 This--你知道嗎,堅持下去。 我們將讓這個消失。 巴姆。 好不好。 我們這個偉大的Twitter功能 在這裡,that--我知道,對不對? 這將是巨大的。 是你們激動嗎​​? 即是要計數的數目 你已經離開了字, 所以,如果我輸入正確的現在, 顯然還在說140, 但我們知道,並非如此。 然後用我們的最後一個 在這裡,請點擊這裡聚會。 什麼將要發生的時候 我們點擊,背景的 會改變顏色。 所以,你們有自己的選擇 你想先做哪一個。 我保證我會接受它很容易對你。 我覺得每個人的那種 只是很低調今天。 所以,我將向您介紹如何 我們將實現所有這些。 如果你想幫腔 在,這是偉大的,但我 感覺每個人都有點累了。 所以我就帶你 通過這些實施例。 難道我們有什麼事情, 我們想先辦? 任何人嗎? 沒有偏好? 好不好。 你知道嗎? 我們黨。 我覺得你們需要一個little-- 所以,我們首先要做的一方之一。 好不好。 所以,我們這裡 - 這是 不應該在那裡。 現在,這是很好的。 好不好。 所以,我們在這裡是 只是一個簡單的HTML頁面 那你們應該都是超 熟悉從過去兩年的pset。 我們有我們的文檔類型在這裡。 每個人都可以看到什麼? 好不好。 酷。 很明顯,我們有我們的HTML。 我們有一些標題是 鏈接到一個樣式表 只是做我的字體漂亮,大和大膽。 所以不要擔心。 我們有一些機構, 一個Id的背景下,OK? 因為我們將要 改變背景。 所以,當我們正在改變 我們身體的背景下, 我們從兩個星期前記得 當我們正在處理的網頁。 所以好有。 我們有一些ID等於派對。 這ħ參考一斤只是意味著 它會去到同一頁。 然後點擊這裡聚會, 這就是為什麼當我們點擊它, 它應該改變顏色,令人欣慰。 然後我們有一些腳本,在這裡, 只是鏈接到本方點的js 文件,這是空的,因為 我們沒有做任何事情。 而且它是如此傷心。 但很快,它會改變 顏色,這將是真棒。 所以,我只是走你們 通過我們如何處理這個。 所以,第一件事 我們可能想要做的, 如果我們改變的背景 人體的第一件事,我們可能要 做實際上是搶 什麼樣的身體,對吧? 因此,我們希望有一筆,我們的 背景,如果你注意到, 我只是自動剛開始打字。 沒有什麼特別的,我們 需要做我們的JavaScript文件。 我可以開始聲明變量, 並宣布隨機函數。 而且它更自由的形式。 這就像用C,我們給大家 這些硬性規定,你長大了, 所以我們想,“出去​​。 是自由的。 做你想做的。“ 而這正是JavaScript是。 所以,我們在這裡有一定的背景。 與我們的DOM模型,我們知道我們 可以做文檔點得到的元素, 如果我們在這裡看到, 我們的身體有一個ID。 對不對? 因此,我們可以通過做得到的文檔 ID,這裡是一個簡單的問題。 什麼是我們的ID,我們要在這裡? 聽眾:背景。 ALLISON BUCHHOLTZ-AU:背景。 完美。 和分號結尾。 這並沒有消失呢。 你仍然需要你的分號。 好不好。 所以這是我們的第一個。 當我們點擊的東西,我們 想要的東西發生,對吧? 所以我們可能需要一些變量 這是等待一個點擊。 我們現在要做的是我們要 使我們的聯繫更加類似於一個按鈕。 因此,我們將有一些按鈕 等於記錄點憑身份證取元素。 如果我談論 點擊鏈接或點擊這裡聚會 鏈接,什麼可能我的身份證在這裡? 黨。 正確的。 OK不算太差至今。 每個人都得到了什麼,我們正在做什麼? 好了,現在我們有 按鈕,我們希望 當我們點擊它的東西改變。 所以,如果我們從PowerPoint中記得, 很簡單的事情,我們能做的 只是按鈕的onclick點,對不對? 而這將等於某些功能。 這是一個匿名函數。 而這只是as--其實我 要實現這種大些。 所以,我只是做了 這裡我要說的,OK, 當我們點擊我們的按鈕,這是 這個環節我們剛剛提到的, 我們要執行 該匿名函數。 我們不需要任何投入。 我們不關心什麼用戶說。 當他們點擊它,我們 打算做任何我們想做的, 這是改變背景顏色。 好不好? 所以這就是為什麼我們沒有任何投入, 我們只是有這個匿名函數。 現在我們實際上會 寫此功能。 因此,有一堆你的方式 可以生成一個隨機的顏色。 我做的方式,它是 生成三個隨機數 並將它們轉換為RGB三。 所以,這正說明你一些很酷 事情,如果你喜歡,“哦, 我需要生成一個隨機 數量。“如果你用Google搜索它, 這是你會發現什麼。 因此,我們有三個不同的 事,VAR,不要再紅,綠。 對不對? 因此,這些都是三個 事情讓一個顏色。 藍色,紅色和綠色。 酷。 而我們能做的是,我們知道 它必須是255之間, 如果你查閱了一些 隨機數發生器, 你可以得到像數學 點隨機的,如果你看這件事該 返回到一定數量 之間零和一。 好不好? 什麼數盡 與RGB三元去了? 零點什麼? 又能上去? 255。 因此,如果數學隨機點 0和1之間的推移, 怎麼可能,我們要轉換呢? 聽眾:時間? ALLISON BUCHHOLTZ-AU:是的,沒錯。 所以時間是255。 觀眾:[聽不清] 這就像[聽不清]。 ALLISON BUCHHOLTZ-AU:數學點隨機的。 聽眾:酷。 ALLISON BUCHHOLTZ-AU:是的。 JavaScript的只是需要你照顧。 好不好。 因此,我們可以做到這一點為所有這些。 對不對? 數學點隨機時間255。 複製。 酷。 所以,問題是,這可能 不會返回一個整數。 對不對? 也許我們得到了一些號碼 0和1之間, 它導致它稍微 斷,並且我們的位RGB不能浮動。 他們需要的是整數。 所以,如果你嘗試這樣做,它很可能 有一些反常行為。 這將是一個有點古怪。 所以,我們做的是我們要 確保這些四捨五入, 你可以圓兩種方式。 我倒圓樓。 所以我一直確信 它捨去。 多麼簡單,但要關閉它 是只得到一個隨機數, 您怎麼看我們 地板可能這個數字? 這是非常相似的。 任何想法? 所以,如果隨機只是數學點 隨機的,所以你認為我們會做地板? 數學圓點地板。 而且你還可以做數學點上限。 一輪是種曖昧 因為你不 知道是否圍捕或向下取整。 所以,通常我們總是做數學 點樓,數學點上限。 但honestly-- 聽眾:請問地板一輪下跌? ALLISON BUCHHOLTZ-AU:樓幾輪下來。 而這僅僅是我的一部分的選擇。 所以,現在我們有三個數字 已隨機產生的, 而我們現在要做的是我們 只是要改變背景。 好不好? 因此,我們已經有了我們 種背景存儲 在此元素被稱為背景。 所以你會發現,如果 你有這個發揮各地, 我們要改變風格。 這是種東西 您將谷歌和弄清楚, 怎麼樣來改變顏色。 但你訪問的方式這個顏色 背景點綴式的點背景。 因此,這是說給 這個對象,背景, 這指的是 元素的ID在那裡, 我們要去看看 款式風格之內, 我們要看看背景。 好不好? 如果你去看看這件事, 它可能使更多一點意義, 但這基本上只是說, “給我這個非常特殊的屬性 什麼我剛才定義的“。 所以,我們正在改變它是 一些RGB,因為它是有道理的。 我們使用的是RGB三元組,對不對? 我們have--我想確保我 在這裡得到的報價權數。 所以,我們要做的是,我們有 RGB,我們要去 to--這就像 級聯,這是紅色。 然後,我們需要一些逗號。 然後我們要加綠色, 然後一些逗號,和一些藍色的。 所以這些長處只是 意思是像串聯。 所以,這只是創建這個 字符串,它的內部RGB下去。 好不好? 觀眾:[聽不清]然後加 綠色加那麼紅。 ALLISON BUCHHOLTZ-AU:是啊, 因為我搞砸了起來。 一個人的罰款。 哦,堅持住。 第 因為我需要確保 我得到了所有這些權利。 所以我會在UNO時代報解釋。 綠色,藍色,完美。 現在,我完成了。 我相信。 好不好。 所以,這是什麼,是背景 將要被設置為某個字符串。 對不對? 這就是我們在這裡。 這將是一些RGB 255逗號 255逗號零,或任何號碼,你 有有。 因此,我們在這裡做, 我們有一些字符串。 而我們想要做的,就是我們 種動態創建 當我們真正運行這個程序。 所以這是一些字符串。 加配符連接它 紅色具有的價值, 它與一個符連接它 逗號,這符連接它 什麼是綠色的,而 等等,等等。 好不好? 直到最後,這是 關閉此RGB的括號在這裡。 好不好? 那麼,什麼這將 產生一些命令真的 即三個數字的RGB 這樣的背景現在設置為。 好不好? 所以,讓我們來看看,如果這個工程。 我希望這樣做,因為如果它 不,我要成為真正的悲哀。 哦,不。 OK,堅持住。 絕對的背景 點陣風格的圓點背景。 我肯定失踪 有些事情小。 你們不恨? 當它只是一個小的小錯誤? 全能背景。 RGB。 觀眾:[聽不清] ALLISON BUCHHOLTZ-AU:沒有。 課前我試過了。 我擁有的一切之前,我做了 類情況下,我很喜歡, “等一下,我做了什麼錯?” 因為我當時想,“我很可能會 搞砸在某個時候。“ 再加上綠色。 一切看起來像它的 正確地連接起來。 好不好。 觀眾:[聽不清] ALLISON BUCHHOLTZ-AU:哦,你去那裡。 這就是我需要的。 你看那個。 蒂芙尼搶救。 完美。 好不好。 現在,讓我們來看看它的工作原理。 哦,我的上帝。 好不好。 堅持,稍等。 聽眾:第二個加後空間。 ALLISON BUCHHOLTZ-AU:哪一個? 哦,等一下,等一下。 空間磨損? 聽眾:二加在 綠色的拼接。 ALLISON BUCHHOLTZ-AU:哦。 聽眾:有沒有空間 加之後,是的。 ALLISON BUCHHOLTZ-AU:你 不用說,但是 - 聽眾:哦,你還不知道? ALLISON BUCHHOLTZ-AU:它看起來很漂亮。 聽眾:OK。 好不好。 ALLISON BUCHHOLTZ AU: 讓我們來看看,如果這個工程。 好不好。 我顯然沒有在 本演示中,這讓我想起了 在一周的講座中, 但我知道這會工作。 我知道這會工作。 如此接近。 除非我不小心刪除 我的腳本就這一個。 不,這是黨的圓點JS。 OK舉行。 我要複製這一點,我也 只是要刪除一切, 因為我有這個工作較早。 我保證它的工作原理。 如果沒有,我會告訴你什麼是湯米的是。 和那裡。 聽眾:你引用方 點CSS,這是一個聚會點的js。 ALLISON BUCHHOLTZ-AU:啊,好 這裡是一方點JS。 OK,我做了什麼不同? OK,我們會看到,如果這個工程現在。 巴姆。 所以,我不知道我做了什麼不同, 但是這是應該發生的。 還挺酷。 我點擊這個一樣,永遠。 但我們可以嘗試,看看我做了什麼 不同的是這一次了。 我不知道你們這些傢伙,但這 看起來基本上是我剛寫。 有可能是一個缺失 分號的地方是我的事。 其實之後,我覺得我失踪 分號在這裡其實。 但我無法看到它,因為 它是關閉屏幕。 但是,如果我們注意到,這是相當 很多正是我只是寫。 我想大概是最難的部分 這僅僅是種這個東西吧 在這裡,理解 它在做什麼那裡。 這些事情你學習 真的只是通過谷歌搜索和誠實 只是嘗試。 如果你覺得有一些 屬性,有可能是。 所以,試試吧。 看看會發生什麼。 正如我所說的,有很多的 實驗用JavaScript, 和PHP,以及所有 的東西,尤其是CSS。 這是唯一真實的 的方式來理解它。 OK,讓慘敗與黨後, 點JS,我們有兩個選擇。 我們有時鐘或Twitter。 他們都是有趣的。 也許不是很好玩的派對, 其中有一個很酷的小選通 在最後的東西。 難道你們有什麼偏好? 聽眾:時鐘? ALLISON BUCHHOLTZ-AU:時鐘? 好不好。 酷。 所以,再一次,我們有我們的 空的JavaScript文件。 正如我們在這裡看到,我們 有一些非常簡單的HTML。 我們有我們的樣式表,只是 格式應該是什麼樣子。 我們有我們的div 時鐘的ID,這 只是說,“這應該是一個時鐘。” 我們有我們的鏈接 我們的JavaScript文件 這實際上是將 我們產生時鐘我們。 因為很酷的事情是,你可以 JavaScript的設置自動刷新 本身。 好不好? 因此,而不是等待 用戶打一個頁面上刷新 這樣就可以得到 更新時間,JavaScript的 但它喜歡可以更新它。 所以,我們最後一次,我們希望 訪問我們的背景,對不對? 所以,你覺得可能是 我們要在這裡做的第一件事情? 種,如果我們要關閉 這種模式在這裡的? 我們可能要 訪問我們的時鐘,對不對? 因此,我們有一些變種 時鐘,它equals-- 什麼我們認為這將是? 文檔點獲得元素by--我也 愛Sublime-- Id和我們的編號是時鐘。 分號。 必須確保獲得 那些分號此時, 因為我覺得這樣的 是問題最後一次。 OK的話,我只是說,試圖 有JavaScript的刷新自己, 有這個偉大的功能,我 知道它派上了用場,去年, 我不知道它派上用場此 PSET,但它被稱為設定的時間間隔。 其實這是真的 冷靜,如果你們做任何事 隨著時間的推移或得到 更新的信息。 在作最後的一個網站 項目,這可能是 你想一個函數 得到超級熟悉。 那麼,什麼設置的時間間隔確實是 我們要去給它一個功能, 以及多久它應該 調用此函數。 好不好? 所以在這種情況下,我們只是要 再次創造一些匿名函數, OK,這是會得到 我們的約會,我們的時間, 然後更新的東西,並顯示它。 所以我們擔心。 我們會喜歡這裡產生時鐘。 但是,我們需要的是怎樣 經常刷新。 因此,在這種情況下,它只是毫秒。 因此,我們只是要 做100毫秒。 當然,完全是任意的。 如果你想它來更新 速度要慢得多,你可以。 我們可以四處亂 與設定的時間間隔, 有多大我們的間隔後,我們得到 工作時鐘,希望我 到達。 所以,這只是說,“OK,通話 此功能每100毫秒。“ 好不好? 這就是它。 因此,我們希望我們的功能 做的是,我們希望有一些日期 還有一些時間是什麼 我們將有。 因此,我們可以開始我們 日期等於什麼​​, 而我們的時間等於什麼 我們還不知道。 或者實際上,我們只需要日期,因為 日期是要包括一切。 同樣,如果你​​只是谷歌任何有關 你想要做什麼,如果你寫的,“OK, 我想要得到的時間 通過JavaScript,“它 會給你這個偉大的 函數調用獲取日期。 從字面上看,大多數事情 你想要做的, JavaScript是將有 它已經為你做。 所以它的字面像新的一樣 獲得的日期,這是creating-- 或新的日期,rather-- 在產生 一些對象,表示一個日期。 而我們要做的就是在這裡 這is--我打算寫這個, 然後說明它做什麼。 所以,我會確保我得到這個權利。 好了,這是什麼功能 的確,是我們只是 創建HTML這實際上 我們去DIV時鐘ID中去。 那麼這究竟是什麼將做 只是產生一些字符串,OK? 即接著將是 移植到我們的HTML。 基本上,它要做的是 無論we--什麼,我會告訴你 是,無論我們說HTML是, 我們要在這裡替換該文本 與任何HTML的。 所以,這是怎麼回事,讓 我們改變時鐘點 被這只是HTML文本 應該是一個時鐘,實際上表示 我們關心的數字與事 一下,實際上是點。 所以,我們要做的是我們 要開始產生這個HTML。 因此,我們所用的相同的方式 做加等於為整數, 你現在可以做的字符串, 但它會來連接它們。 對不對? 正如我們看到黨的斑點JS,這只是 符連接所有這些東西放在一起。 所以,你可以連接不同的位 HTML的變量,或字符串位 你寫出來 自己,這只是 真的允許你動態 生成HTML,這是很酷。 所以,如果你有什麼 非常具體的用戶, 這可以讓你做到這一點。 因此,我們有HTML,到我要去 嘗試,並確保我得到這個權利。 因此,我們打算做一些H1頭。 那麼是什麼在這裡實現是很重要 是,這其實只是HTML。 對不對? 我們正在寫的實際 這裡的HTML代碼,它的 不只是一個字符串中的正常 我們會想想辦法。 所以,我們有一些HTML。 這被認為是一個字符串,在這裡雖然。 而我們做的日期dot--我們 希望得到我們的時間。 同樣,如果你​​看 上漲約約會什麼, 它會告訴你,這些都是 屬性的日期了。 這裡是你可以在上面使用的。 所以它可能有類似的東西 拿到小時,並獲得分鐘, 並獲得秒,並獲得毫秒, 誰知道還有什麼他們。 但是,如果你看看 文檔,它都在那裡。 所以我們必須得小時, 然後,我們希望 來連接該with--我 要推動這一在這裡。 所以,如果我們產生現在,我們 實際上產生的時間,對吧? 我們有時間,然後什麼 小時和分鐘之間? 你有一個分號,對不對? 因此,我們要在這裡做一些分號。 然後,我們希望得到我們的 分,所以以相同的方式 我們有最新的點得到小時, 怎麼可能我們得到分鐘? 這是字面上點的截止日期得到 分鐘,那種我喜歡的。 這就像,“哦,怎麼樣 讓我的分?“ 我只是讓我幾分鐘。 好不好。 然後,我們在這裡有另外一個冒號。 然後如果我們想要得到我們 秒,我們如何讓我們的第二個? 日期點綴得到秒。 我認為這是很酷。 什麼是重要的 意識到的是,我們還 這裡需要關閉我們的HTML標籤,因為 它應該仍然是有效的HTML,所以H1。 酷。 所以在這之後,我們可以做的時鐘 點內HTML等於HTML。 好不好? 所以請記住我是怎麼說 內基本HTML 無論需要之間的 兩個標籤,我們談到了 和插入或操縱 無論是在那裡? 所以,這是什麼呢,如果 我們再回到我們的時鐘, 是時鐘指 此專區內的一切。 這是內部HTML 這個編號時鐘格。 所以它會改變它 我們剛剛生成的HTML, 其中,其中,有希望, 希望,有希望, 將顯示時間現在。 我們拭目以待。 當然。 這麼多的技術問題。 佳佳的just--我 從我今天比賽的傢伙。 OK,那工作。 時鐘點內HTML。 這是HTML真的嗎? 也這是會發生什麼。 當你無法看到的東西,你 只是看你的源代碼。 好不好。 你想知道周圍的工作很酷 我們要做的就在這裡? 聽眾:你能做到大寫字母? 大寫字母? 因為你必須得小時, 然後拿到分鐘。 ALLISON BUCHHOLTZ-AU:它 就是讓時間和get--哦。 你are--金名將。 這是所有測試,伙計們。 我保證這是課前工作。 OK,但一些很酷的東西知道的是 你可以,如果有時also-- 外部文件 開始有點瘋狂, 你也可以只把他們直 在這裡,這往往會解決的事情。 除了這就像真難看。 當然格式化的一切。 確保這一切都漂亮。 好不好。 我想要做的所有很酷的演示, 而他們只是不工作了。 好不好。 腳本VAR時鐘。 不管怎麼說,最重要的是 這是在一般的方式 你會格式化的JavaScript。 正如你所看到的,也可以是 很挑剔的,有時, 即使是從字面上 工作2秒前。 或者不是兩秒鐘前, 但是非常非常最近。 所以,向你展示它應該是什麼樣子, 並告訴你,我是不是瘋了, 而這一切也正是 同樣的,這是它應該是什麼樣子。 你只是要做到這一點頂部 在這裡,如果你查看​​網頁源代碼, 如果你發現,他做了一些 瘋狂的事情,我簡化它。 此外,信貸湯米 McWilliam,究竟是誰 幫我創建這些例子, 這就是為什麼我知道他們的工作。 因為湯米是一個JavaScript高手。 但是,如果我們注意到,我們有一些設置。 在這裡,我們有我們的時鐘功能。 這是所有的JavaScript 我們只是寫了,或者一些。 我們只是寫了這一個就在這裡。 他有一個額外的 功能只是它墊 通過將零前一 字母或數字,如果是前 只是其中之一。 所以,如果你注意到,這是相當 很多正是我們剛才寫的。 你有一些可變的時鐘 有我們的元素,通過ID獲得元素, 這是時鐘。 我們有我們設定的時間間隔 功能,這是 匿名函數 即執行了這一切。 我們已經開始的一些字符串 HTML,我們再動態 通過讓一些產生 H1頭,串聯 用得到的時間,再加上 我們的結腸,再加上越來越 分鐘,加上另外 結腸癌,加上我們秒, 終於結束HTML它。 然後我們更新我們的時鐘 點內HTML到HTML, 我們更新每100毫秒。 好不好? 見我保證我沒瘋。 我不知道。 我不知道為什麼它不喜歡我。 我覺得像看起來一樣, 但顯然是恨我。 因此,讓我們看看第三輪的推移更好。 我們即將看到的。 我不知道這是怎麼回事去。 每個人都至少獲得 缺點,像是剛剛一般主題 JavaScript的關係嗎? 我希望這至少是有益的,更 比顯示出這是一個有點挑剔。 但你的習題集將是非常有趣的。 這將是巨大的。 它不會是相當繁瑣的作為 因為這,我不認為。 你會真正得到 看到很酷的事情。 所以最後但並非最不重要的, 我們將嘗試在微博之一。 我真的害怕了,伙計們。 我不知道這是怎麼回事去。 但只給你一點點 更有味道,其實這是 操作字符串和 投入,我們要怎麼做 是,如果我們發現這裡與HTML-- 這其中有一個有點緩慢 - 我們有一些文本區域,這 對應於該文本區這裡。 好不好? 並具有文本的ID。 我們重新設計的那麼一點點 一些的寬度和高度 我們已經預定, 我們已經H1, 這恰恰是我們的頭一個 代表我們的角色離開了。 我們給它一些標識 剩餘字符, 然後我們有一些腳本 在這裡,這我真的 希望第三次的 這裡的魅力,伙計們。 所以我們想要做的, 在相同的一般靜脈 我們已經與時鐘點JS做 和黨的圓點作為JS,我們已經注意到了, 是我們通過實際抓開工 我們關心的事情,對不對? 所以在這種情況下,有兩個 的事情,我們在意,好不好? 有一件事,我們居然有種 尋找到和從描繪數據, 一件事, 我們實際上改變。 因此,有我們的HTML。 如果這是我們這裡的網頁,什麼是 我們正在尋找的數據? 這將是什麼 在我們的箱子文字,對不對? 所以,無論我在這裡輸入。 這就是我想知道的,或者 這就是我想看看。 什麼將是 改變我們的網頁? 在剩餘字符。 所以以相同的方式,我們希望 通過初始化變量啟動 實際上守住這些元素。 好不好? 所以,如果我們有一些變種 這是我們的文本區域, 我們有一些變種是剩下的。 對不對? 所以這些要 持有這兩件事情。 因此,同樣的事情, 文檔dot-- OK,我 要確保這是 上班這段時間。 我很堅決。 OK,所以如果我們希望我們的 文本區域中,根據 我們的HTML,什麼是我們的標識? 什麼是我們的身份證號碼? 它只是將是文本,因為 這造成我們的文本區域,OK, 而我們的Id為文本,所以這是 我們如何能搶到什麼在那裡。 OK,分號。 我要成為超級 精確的關於這一點, 因為我想這個工作,這個時候。 OK,做同樣的事情, 通過id來獲取元素。 我真的不知道有什麼 造成其他兩個弄亂。 OK,那麼在這其中, 什麼我們要訪問? 什麼是我們的標識嗎? 我們在其他ID 我們的HTML,是什麼呢? 聽眾:剩餘字符。 ALLISON BUCHHOLTZ-AU: 剩餘字符。 好不好。 酷。 所以我只是要 寫這篇文章的真快。 我只是在寫第二本。 所以文本區域。 有趣的是B function--有 很多的功能,不僅 符合您 鼠標,但你的鍵盤。 好不好? 所以,你可以說,當任何鍵 按下,你可以做這樣的事情。 讓我們使用一個 被稱為關鍵了,這 說,“如果你按任意鍵 您的鍵盤,當用戶已經解除 他們的手指關閉該按鈕, 而關鍵已經成為未按下, 那麼我們要做些什麼。“ 好不好? 所以,這是有道理的,對不對? 因為每個字符 我們輸入,我們要去 有解除我們的十指關 的,所以當鍵上升, 我們可以知道遞減 我們剩餘字符。 所以,我們有一些關鍵 起來,並以同樣的方式, 我們會說, “OK,當我們做到這一點,我們 要創建一些函數, 會在這種情況下採取即,“ 我們想要做的是什麼 計算剩餘數。 OK,讓我們剛剛開始 通過創建一個變量。 因此,我們有一些變量R, 這是怎麼回事代表 多少個字符,我們已經離開。 好不好? 我們知道,我們先從 140,如果我們想知道, 讓我們說,這個長度 這一直是輸入字符串, 做你們有什麼想法 我們怎樣才能做到這一點? 正是基於關閉的明顯 東西,比如如果我們想個小時, 我們用得時間。 我們知道,我們的目標是 文本區域,但可能你們 想到什麼可能出現後呢? 任何想法? 所以這一塊的種少 直觀,但它的價值點的長度。 所以才給我一些 值屬性 其實這個字符串的長度。 所以它會說,“OK,我在尋找 在文字區域內的這個整個字符串, 而且我要告訴 你多久就是。“ 因為如果我們還記得字符串 其實只是陣列, 所以我們可以只取其中的長度。 因此,我們有。 酷。 那麼我們想要做的是,我們 永遠要允許用戶 輸入大於 140個字符,對不對? 因為如果我們說喜歡,“哦,你 只有這麼多剩餘,“ 然後讓他們做到這一點 不管怎麼說,我們一直在撒謊。 這是另一種 事情的JavaScript 可真不錯 對,就是用戶驗證 並確保你 在任何規則適合用戶 你已經提供給他們。 所以,如果你想要做這樣的事情做 肯定有人輸入自己的電子郵件地址, 或者確保當他們 輸入兩個密碼,它們匹配。 JavaScript可以做到這一點。 你會做這樣的事情,“當 提交表單,“或類似, “當提交表單按鈕 點擊後,檢查所有的這些事情。“ 我們能做到這一點的JavaScript。 所以,這正是 我們要在這裡做。 那麼,什麼可能是一個方法來檢查,如果 他們已經走了超過140個字符? 發生了什麼事情要發生在 我們的R值,如果他們嘗試一下呢? 這將是負面的,對不對? 或者它要少 大於或等於零。 因此,我們可以使用,如果是 就像一切。 好不好? 我們有一些文字區點 價值,我們在做什麼,在這裡 為我們只是cutting--是什麼呢? 抱歉。 這一次,我們只是想返回false。 我弄糊塗了。 所有的事情疲憊不堪不工作。 OK,我們只是想 返回false,然後我們 要顯示的 剩下的人物,對吧? 所以用時鐘,我們做了 一些與內部HTML,對不對? 在這裡我們將其設置等於一些 可變的,所以什麼可能我們在這裡做? 什麼是我們改變的內在HTML? 聽眾:剩餘? ALLISON BUCHHOLTZ-AU: 我們正在改變剩餘。 好吧,什麼我們做 希望把它設置為? 這將是R,因為這 應該是我們的剩餘字符。 好不好? 所以我真的很緊張,如果看到 這個工程現在,但我們會看到。 離開這一點。 這是真快。 [聽不清] OK。 再次,我只是要告訴你。 無論出於何種原因, 我的決定不工作, 但我會告訴你的是,這 is--哦,我應該把那個英寸 OK,我們注意到了相同的排序 這裡的事情,得到的文本區域。 另外,如果你的傢伙的通知,如果有 你想要做的事過, 而你不知道該怎麼辦 它,只需點擊查看頁面源代碼, 而且他們會告訴你的。 有時它會被加密。 為了您的PSET,我們加密一切, 所以它只是看起來像廢話。 但是,如果有過一個真正的 你喜歡酷的網站, 如果你只是點擊查看頁面源代碼, 它會告訴你該怎麼做。 如此反复,更聰明地工作,而不是更辛苦。 正如你在這裡看到,所有的 這些東西都是一樣的。 這一次在這裡只是需要一些子 這一點,我忘記了正是這種做。 但它顯然需要一些子 從零到10的值的, 什麼應該停止返回false 從輸入了用戶, 然後很明顯更新 內部HTML那裡。 酷。 從今天起這麼大拿外賣, 實驗,看看源代碼 因為它會幫助你很多, 每個人,有時JavaScript的 可以是很難的工作,並且不 總是工作,你期望它的方式, 只是繼續努力 因為我保證它會的。 我保證所有這些例子 課前進行了合作。 我不明白發生了什麼事。 我真的擁有一切相同。 還有一件事,我只是想 表明你們,可以超好用 是in--什麼工作呢? 我們得到了黨的工作,不是嗎? 我想是這樣。 是。 我們做到了。 真棒。 好了,一件事, 你們應該知道 是我講的控制台日誌。 於是安慰你好點日誌。 因此,這是同類產品中 等價的JavaScript的printf。 所以,如果你曾經想 檢查你的變量 或者看看發生些什麼事,是什麼 你可以做的是,如果我們考察的元素, 是你想要去的地方 到了,你去安慰, 你會看到,它打印打招呼。 這樣我們就可以擁有它 打印任何我們想要的。 如果我們希望它打印背景 點陣式的點的背景下, 我們應該能看到 RGB三,來了。 或不。 我忘了究竟如何 打印這樣的一個變量, 但你應該能夠 打印出這樣的事情。 這將是非常有用的 您PSET時, 你想操縱 坐標或諸如此類的東西。 因此,他們也改變這片類。 這是從過去幾年不同,所以 僅僅是很好的轉錄因子或轉錄因子 在辦公時間而是因為我們 這種伴隨著你們學習。 但是,控制台日誌是超級,超級 有助於JavaScript的最後一年。 所以喜歡它。 了解如何使用它。 它更容易使用比GDB,使 應該至少一個加點。 但是感謝你們的軸承和我在一起。 對不起,我的 實例出於某種原因 只是不希望 配合我,但我 那種希望它有助於讓你一個 在JavaScript中區多一點。 並給我你所有的問題要問 下週,所以我可以修復超, 我會帶上糖果,甚至額外的 糖果,因為這是荒謬的。 但是,你們是偉大的, 並有一個真棒一周。