《JavaScript教案.doc》由會員分享，可在線閱讀，更多相關(guān)《JavaScript教案.doc（16頁珍藏版）》請在裝配圖網(wǎng)上搜索。

______________________________________________________________________________________________________________ JavaScript 教案 JavaScript?簡介 JavaScript 是互聯(lián)網(wǎng)上最流行的腳本語言，這門語言可用于 HTML 和 web，更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備。 JavaScript 是腳本語言 JavaScript 是一種輕量級的編程語言。 JavaScript 是可插入 HTML 頁面的編程代碼。 JavaScript 插入 HTML 頁面后，可由所有的現(xiàn)代瀏覽器執(zhí)行。 JavaScript 很容易學(xué)習(xí)。 您將學(xué)到什么 下面是您將在本教程中學(xué)到的主要內(nèi)容。 JavaScript：直接寫入 HTML 輸出流 實(shí)例 document.write("

這是一個標(biāo)題

"); document.write("

這是一個段落。

"); 嘗試一下 ? 您只能在 HTML 輸出中使用 document.write。如果您在文檔加載后使用該方法，會覆蓋整個文檔。 JavaScript：對事件的反應(yīng) 實(shí)例 點(diǎn)我! 嘗試一下 ? alert() 函數(shù)在 JavaScript 中并不常用，但它對于代碼測試非常方便。 onclick 事件只是您即將在本教程中學(xué)到的眾多事件之一。 JavaScript：改變 HTML 內(nèi)容 使用 JavaScript 來處理 HTML 內(nèi)容是非常強(qiáng)大的功能。 實(shí)例 x=document.getElementById("demo")? //查找元素 x.innerHTML="Hello JavaScript";??? //改變內(nèi)容 嘗試一下 ? 您會經(jīng)?？吹?document.getElementById("some id")。這個方法是 HTML DOM 中定義的。 DOM (Document?Object?Model)（文檔對象模型）是用于訪問 HTML 元素的正式 W3C 標(biāo)準(zhǔn)。 您將在本教程的多個章節(jié)中學(xué)到有關(guān) HTML DOM 的知識。 JavaScript：改變 HTML 圖像 本例會動態(tài)地改變 HTML 的來源（src）： 點(diǎn)亮燈泡 點(diǎn)擊燈泡就可以打開或關(guān)閉這盞燈 嘗試一下 ? JavaScript 能夠改變?nèi)我?HTML 元素的大多數(shù)屬性，而不僅僅是圖片。 JavaScript：改變 HTML 樣式 改變 HTML 元素的樣式，屬于改變 HTML 屬性的變種。 實(shí)例 x=document.getElementById("demo")? //找到元素? x.style.color="#ff0000";?????????? //改變樣式 嘗試一下 ? JavaScript：驗(yàn)證輸入 JavaScript 常用于驗(yàn)證用戶的輸入。 實(shí)例 if isNaN(x) {alert("不是數(shù)字")}; 嘗試一下 ? 您知道嗎？ JavaScript 與 Java 是兩種完全不同的語言，無論在概念上還是設(shè)計上。 Java（由 Sun 發(fā)明）是更復(fù)雜的編程語言。 ECMA-262 是 JavaScript 標(biāo)準(zhǔn)的官方名稱。 JavaScript 由 Brendan Eich 發(fā)明。它于 1995 年出現(xiàn)在 Netscape 中（該瀏覽器已停止更新），并于 1997 年被 ECMA（一個標(biāo)準(zhǔn)協(xié)會）采納。 JavaScript?用法 HTML 中的腳本必須位于 標(biāo)簽之間。 腳本可被放置在 HTML 頁面的 和 部分中。 會告訴 JavaScript 在何處開始和結(jié)束。 之間的代碼行包含了 JavaScript: 您無需理解上面的代碼。只需明白，瀏覽器會解釋并執(zhí)行位于 之間的 JavaScript 代碼? 那些老舊的實(shí)例可能會在 . . 嘗試一下 ? JavaScript 函數(shù)和事件 上面例子中的 JavaScript 語句，會在頁面加載時執(zhí)行。 通常，我們需要在某個事件發(fā)生時執(zhí)行代碼，比如當(dāng)用戶點(diǎn)擊按鈕時。 如果我們把 JavaScript 代碼放入函數(shù)中，就可以在事件發(fā)生時調(diào)用該函數(shù)。 您將在稍后的章節(jié)學(xué)到更多有關(guān) JavaScript 函數(shù)和事件的知識。 在 或者 的JavaScript 您可以在 HTML 文檔中放入不限數(shù)量的腳本。 腳本可位于 HTML 的 或 部分中，或者同時存在于兩個部分中。 通常的做法是把函數(shù)放入 部分中，或者放在頁面底部。這樣就可以把它們安置到同一處位置，不會干擾頁面的內(nèi)容。 中的 JavaScript 函數(shù) 在本例中，我們把一個 JavaScript 函數(shù)放置到 HTML 頁面的 部分。 該函數(shù)會在點(diǎn)擊按鈕時被調(diào)用： 實(shí)例

我的 Web 頁面

一個段落

嘗試一下 嘗試一下 ? 中的 JavaScript 函數(shù) 在本例中，我們把一個 JavaScript 函數(shù)放置到 HTML 頁面的 部分。 該函數(shù)會在點(diǎn)擊按鈕時被調(diào)用： 實(shí)例

我的 Web 頁面

一個段落

嘗試一下 嘗試一下 ? 外部的 JavaScript 也可以把腳本保存到外部文件中。外部文件通常包含被多個網(wǎng)頁使用的代碼。 外部 JavaScript 文件的文件擴(kuò)展名是 .js。 如需使用外部文件，請在 嘗試一下 ? 你可以將腳本放置于 或者 中 實(shí)際運(yùn)行效果與您在 嘗試一下 ? 以上 JavaScript 語句（在 嘗試一下 ? 請使用 document.write() 僅僅向文檔輸出寫內(nèi)容。 如果在文檔已完成加載后執(zhí)行 document.write，整個 HTML 頁面將被覆蓋。 實(shí)例

我的第一個 Web 頁面

我的第一個段落。

點(diǎn)我 嘗試一下 ? 寫到控制臺 如果您的瀏覽器支持調(diào)試，你可以使用?console.log()?方法在瀏覽器中顯示 JavaScript 值。 瀏覽器中使用 F12 來啟用調(diào)試模式， 在調(diào)試窗口中點(diǎn)擊 "Console" 菜單。 實(shí)例

我的第一個 Web 頁面

嘗試一下 ? 您知道嗎? 程序中調(diào)試是測試，查找及減少bug(錯誤)的過程。 JavaScript?語法 JavaScript 是一個程序語言。語法規(guī)則定義了語言結(jié)構(gòu)。 JavaScript 語法 JavaScript 是一個腳本語言。 它是一個輕量級，但功能強(qiáng)大的編程語言。 JavaScript 字面量 在編程語言中，一個字面量是一個常量，如 3.14。 數(shù)字（Number）字面量?可以是整數(shù)或者是小數(shù)，或者是科學(xué)計數(shù)(e)。 3.14 1001 123e5 嘗試一下 ? 字符串（String）字面量?可以使用單引號或雙引號 be written with double or single quotes: "John Doe" 'John Doe' 嘗試一下 ? 表達(dá)式字面量?用于計算： 5 + 6 5 * 10 嘗試一下 ? 數(shù)組（Array）字面量?定義一個數(shù)組： [40, 100, 1, 5, 25, 10] 對象（Object）字面量?定義一個對象： {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} 函數(shù)（Function）字面量?定義一個函數(shù)： function myFunction(a, b) { return a * b;} JavaScript 變量 在編程語言中，變量用于存儲數(shù)據(jù)值。 JavaScript 使用關(guān)鍵字?var?來定義變量， 使用等號來為變量賦值： var x, length x = 5 length = 6 嘗試一下 ? 變量可以通過變量名訪問。在指令式語言中，變量通常是可變的。字面量是一個恒定的值。 變量是一個名稱。字面量是一個值。 JavaScript 操作符 JavaScript使用?算術(shù)運(yùn)算符?來計算值: (5 + 6) * 10 嘗試一下 ? JavaScript使用賦值運(yùn)算符給變量賦值： x = 5 y = 6 z = (x + y) * 10 嘗試一下 ? JavaScript語言有多種類型的運(yùn)算符：/p> Type 實(shí)例 描述 賦值，算術(shù)和位運(yùn)算符 =? +? -? *? / 在 JS 運(yùn)算符中描述 條件，比較及邏輯運(yùn)算符 ==? != ? 在 JS 比較運(yùn)算符中描述 JavaScript 語句 在 HTML 中，JavaScript 語句向?yàn)g覽器發(fā)出的命令。 語句是用分號分隔： x = 5 + 6; y = x * 10; JavaScript 關(guān)鍵詞 JavaScript 語句通常于關(guān)鍵詞為開頭。?var?關(guān)鍵詞告訴瀏覽器創(chuàng)建一個新的變量： var x = 5 + 6; var y = x * 10; JavaScript 標(biāo)識符 和其他任何編程語言一樣，JavaScript 保留了一些標(biāo)識符為自己所用。 JavaScript 同樣保留了一些關(guān)鍵字，這些關(guān)鍵字在當(dāng)前的語言版本中并沒有使用，但在以后 JavaScript 擴(kuò)展中會用到。 JavaScript 標(biāo)識符必須以字母、下劃線（_）或美元符（$）開始。 后續(xù)的字符可以是字母、數(shù)字、下劃線或美元符（數(shù)字是不允許作為首字符出現(xiàn)的，以便 JavaScript 可以輕易區(qū)分開標(biāo)識符和數(shù)字）。 以下是 JavaScript 中最??重要的保留字（按字母順序）： abstract else instanceof super boolean enum int switch break export interface synchronized byte extends let this case false long throw catch final native throws char finally new transient class float null true const for package try continue function private typeof debugger goto protected var default if public void delete implements return volatile do import short while double in static with JavaScript 注釋 不是所有的 JavaScript 語句都是"命令"。雙斜杠?//?后的內(nèi)容將會被瀏覽器忽略： // 我不會執(zhí)行 JavaScript 數(shù)據(jù)類型 JavaScript 有多種數(shù)據(jù)類型：數(shù)字，字符串，數(shù)組，對象等等： var length = 16;???????????????????????????????? ?// Number 通過數(shù)字字面量賦值? var points = x * 10;????????????????????????????? // Number 通過表達(dá)式字面量賦值 var lastName = "Johnson";???????????????????????? // String 通過字符串字面量賦值 var cars = ["Saab", "Volvo", "BMW"];????????????? // Array? 通過數(shù)組字面量賦值 var person = {firstName:"John", lastName:"Doe"};??// Object 通過對象字面量賦值 數(shù)據(jù)類型的概念 編程語言中，數(shù)據(jù)類型是一個非常重要的內(nèi)容。 為了可以操作變量，了解數(shù)據(jù)類型的概念非常重要。 如果沒有使用數(shù)據(jù)類型，以下實(shí)例將無法執(zhí)行： 16 + "Volvo" 16 加上 "Volvo" 是如何計算呢? 以上會產(chǎn)生一個錯誤還是輸出以下結(jié)果呢？ "16Volvo" 你可以在瀏覽器嘗試執(zhí)行以上代碼查看效果。 在接下來的章節(jié)中你將學(xué)到更多關(guān)于數(shù)據(jù)類型的知識。 JavaScript 函數(shù) JavaScript 語句可以寫在函數(shù)內(nèi)，函數(shù)可以重復(fù)引用： 引用一個函數(shù)?= 調(diào)用函數(shù)(執(zhí)行函數(shù)內(nèi)的語句)。 function myFunction(a, b) { ??? return a * b;????????? ????????????????????? // 返回 a 乘于 b 的結(jié)果 } JavaScript 對大小寫敏感。 JavaScript 對大小寫是敏感的。 當(dāng)編寫 JavaScript 語句時，請留意是否關(guān)閉大小寫切換鍵。 函數(shù)?getElementById?與?getElementbyID?是不同的。 同樣，變量?myVariable?與?MyVariable?也是不同的。 JavaScript 字符集 JavaScript 使用 Unicode 字符集。 Unicode 覆蓋了所有的字符，包含標(biāo)點(diǎn)等字符。 如需進(jìn)一步了解，請學(xué)習(xí)我們的?完整 Unicode 參考手冊。 您知道嗎? JavaScript 中，常見的是駝峰法的命名規(guī)則，如 lastName (而不是lastname)。  THANKS !!! 致力為企業(yè)和個人提供合同協(xié)議，策劃案計劃書，學(xué)習(xí)課件等等 打造全網(wǎng)一站式需求 歡迎您的下載，資料僅供參考 -可編輯修改-