Web前端開發(fā)培訓Javascript教程一_第1頁
Web前端開發(fā)培訓Javascript教程一_第2頁
Web前端開發(fā)培訓Javascript教程一_第3頁
Web前端開發(fā)培訓Javascript教程一_第4頁
Web前端開發(fā)培訓Javascript教程一_第5頁
已閱讀5頁，還剩18頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

1、百度文庫-讓每個人平等地提升自我Web前端開發(fā)培訓Javascript學習階段一熱點：易萊勝官網(wǎng)百讀易萊勝官網(wǎng)上海易萊勝上海百讀易萊勝JavaScript 簡介javaScript為網(wǎng)頁的腳本語言，可用于HTML和web,更可廣泛 用于服務(wù)器、PG筆記本電腦、平板電腦和智能手機等設(shè)備。javascript 的特點：javaScript是一種輕量級的編程語言。JavaScript是可插入 HTML頁面的編程代碼。JavaScript插入HTML頁面后，可由所有的現(xiàn)代瀏覽器執(zhí)行。javascript可以寫html輸出流document.write（"<h1> 這是一個標題 &

2、lt;/h1>"）;document.write（"<p> 這是一個段落。</p>"）;JavaScript對事件的反應button type="button" onclick="alert(' 歡迎!')"> 點我!</button>alert()函數(shù)在JavaScript中一般是用來測試的。onclick事件元素。JavaScript 改變 HTML 內(nèi)容x=document.getElementById("demo") / 查找元素x.

3、innerHTML="Hello JavaScript" / 改變內(nèi)容我們經(jīng)常會看到 document.getElementById("some id")。這個方法 是HTML DOM中定義的。DOM (Document Object Model)(文檔對象模型)是用于訪問HTML元素的正式 W3C標準。JavaScript 改變 HTML 圖像<!DOCTYPE html><html><head><meta charset="utf-8"><title> 菜鳥教程()<

4、;/title></head><body><script>function changeImage() element=document.getElementById('myimage')if (element.src.match("bulbon")element.src='7images/pic_bulboff.gif'elseelement.src="/images/pic_bulbon.gif"</script><img id="myimage&q

5、uot; onclick="changeImage()”src="/images/pic_bulboff.gif" width="100" height="180"><p>點擊燈泡就可以打開或關(guān)閉這盞燈</p></body></html>JavaScript 改變 HTML 樣式x=document.getElementById("demo")/ 找到元素x.style.color="#ff0000”;/ 改變樣式JavaScript驗證輸入

6、JavaScript常用于驗證用戶的輸入。if isNaN（x） alert（"不是數(shù)字"）;JavaScript 用法HTML中的腳本必須位于<script>與</script>標簽之間。腳本可被放置在 HTML頁面的<body>和<head>部分中<script> 標簽如需在HTML頁面中插入 JavaScript請使用<script>標簽<script>和</script>會告訴 JavaScript在何處開始和結(jié)束。<script> 和 </script

7、> 之間的代碼行包含了JavaScript:<script>alert（"我的第一個 JavaScript"）;</script>您無需理解上面的代碼。只需明白，瀏覽器會解釋弁執(zhí)行位于<script> 和 </script> 之間的 JavaScript 代碼<body> 中的 JavaScript在本例中，JavaScript會在頁面加載時向 HTML的<body>寫文本：<!DOCTYPE html><html><body> .<script>d

8、ocument.write（"<h1> 這是一個標題 </h1>"）;document.write（"<p> 這是一個段落 </p>"）;</script>.</body></html>JavaScript函數(shù)和事件上面例子中的JavaScript語句，會在頁面加載時執(zhí)行。通常，我們需要在某個事件發(fā)生時執(zhí)行代碼，比如當用戶點擊按鈕時。如果我們把JavaScript代碼放入函數(shù)中，就可以在事件發(fā)生時調(diào) 用該函數(shù)。您將在稍后的章節(jié)學到更多有關(guān)JavaScript函數(shù)和事件的知

9、識。在 <head> 或者 <body> 的 JavaScript您可以在HTML文檔中放入不限數(shù)量的腳本。腳本可位于 HTML的<body>或<head>部分中，或者同時存在于兩個部分中。通常的做法是把函數(shù)放入<head>部分中，或者放在頁面底部。這樣就可以把它們安置到同一處位置，不會干擾頁面的內(nèi)容。<head> 中的 JavaScript 函數(shù)在本例中，我們把一個JavaScript函數(shù)放置到HTML頁面的<head> 部分。該函數(shù)會在點擊按鈕時被調(diào)用：<!DOCTYPE html><ht

10、ml><head><script>function myFunction()document.getElementById("demo").innerHTML="我的第一個JavaScript 函數(shù)”；</script></head><body><h1>我的Web頁面</h1><p id="demo">一個段落 </p><button type="button" onclick="myFuncti

11、on()"> 嘗 試一下</button></body></html><body> 中的 JavaScript 函數(shù)在本例中，我們把一個JavaScript函數(shù)放置到HTML頁面的<body> 部分。該函數(shù)會在點擊按鈕時被調(diào)用：<!DOCTYPE html><html><body><h1>我的Web頁面</h1><p id="demo">一個段落 </p><button type="button&qu

12、ot; onclick="myFunction()"> 嘗 試一下</button><script>function myFunction()document.getElementById("demo").innerHTML="我的第一個JavaScript 函數(shù)”；</script></body></html>夕卜部的JavaScript也可以把腳本保存到外部文件中。外部文件通常包含被多個網(wǎng)頁使用的代碼。外部JavaScript文件的文件擴展名是.js。如需使用外部文件，請在

13、<script>標簽的"src"屬性中設(shè)置該.js文件：<!DOCTYPE html><html><body>script src="myScript.js"></script></body></html>你可以將腳本放置于<head>或者<body>中實際運行效果與 您在<script>標簽中編寫腳本完全一致。myScript.js文件代碼如下:function myFunction() document.getElementB

14、yId("demo").innerHTML="我的第一個JavaScript 函數(shù)”； JavaScript 輸出avaScript沒有任何打印或者輸出的函數(shù)。JavaScript顯示數(shù)據(jù)JavaScript可以通過不同的方式來輸出數(shù)據(jù)：使用window.alert()彈出警告框。使用document.write()方法將內(nèi)容寫到 HTML文檔中。使用innerHTML寫入到HTML元素。使用console.log()寫入到瀏覽器的控制臺。使用 window.alert()你可以彈出警告框來顯示數(shù)據(jù)：<!DOCTYPE html><html>

15、;<body><h1>我的第一個頁面</h1><p>我的第一個段落。</p><script>window.alert(5 + 6);</script></body></html>操作HTML元素如需從 JavaScript訪問某個 HTML元素，您可以使用document.getElementByld(id)方法。請使用"id"屬性來標識HTML元素，弁innerHTML來獲取或插入元素內(nèi)容：<!DOCTYPE html><html><b

16、ody><h1>我的第一個 Web頁面</h1><p id="demo">我的第一個段落</p><script>document.getElementById("demo").innerHTML ="段落已修改。"</script></body></html>以上JavaScript語句(在<script>標簽中)可以在 web瀏覽器 中執(zhí)行：document.getElementById("demo"

17、) 是使用 id 屬性來查找 HTML元素的JavaScript代碼。innerHTML ="段落已修改?！笔怯糜谛薷脑氐腍TML內(nèi)容(innerHTML)的 JavaScript 代碼。寫到HTML文檔出于測試目的，您可以將 JavaScript直接寫在HTML文檔中：<!DOCTYPE html><html><body><h1>我的第一個 Web頁面</h1><p>我的第一個段落。</p><script>document.write(Date();</script><

18、;/body></html>請使用document.write()僅僅向文檔輸出寫內(nèi)容。如果在文檔已完成加載后執(zhí)行document.write ,整個HTML頁面將被覆蓋。<!DOCTYPE html><html><body><h1>我的第一個 Web頁面</h1><p>我的第一個段落。</p><button onclick="myFunction()”> ,點我 </button><script>function myFunction() doc

19、ument.write(Date(); </script></body></html>寫到控制臺如果您的瀏覽器支持調(diào)試，你可以使用console.log()方法在瀏覽器中顯示 JavaScript值。瀏覽器中使用 F12來啟用調(diào)試模式，在調(diào)試窗口中點擊"Console"菜單。<!DOCTYPE html><html><body><h1>我的第一個 Web頁面</h1><script>a = 5;b = 6;c = a + b;console.log(c);</s

20、cript></body></html>JavaScript 語法JavaScript是一個腳本語言。它是一個輕量級，但功能強大的編程語言。JavaScript 字面量在編程語言中，一般固定值稱為字面量，如 3.14。數(shù)字(Number)字面量可以是整數(shù)或者是小數(shù)，或者是科學計數(shù)(e)。3.141001123e5字符串（String）字面量 可以使用單引號或雙引號"John Doe”'John Doe達式字面量用于計算:5 + 65 *10數(shù)組（Array）字面量 定義一個數(shù)組：40, 100, 1, 5, 25, 10對象（Object）字面量

21、 定義一個對象：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, lengthx = 5length = 6變量可以通過變量名訪問。在指令式語言中，變量通常是可變的 字面量是一個恒定的值。變量是一個名稱。

22、字面量是一個值。JavaScript 操作符JavaScript使用算術(shù)運算符來計算值：(5 + 6) *10JavaScript使用賦值運算符給變量賦值：x = 5y = 6z = (x + y) * 10JavaScript 語句在HTML中，JavaScript語句向瀏覽器發(fā)出的命令語句是用分號分隔：x = 5 + 6;y = x * 10;JavaScript 關(guān)鍵字JavaScript關(guān)鍵字用于標識要執(zhí)行的操作。和其他任何編程語言一樣，JavaScript保留了一些關(guān)鍵字為自己 所用。var關(guān)鍵字告訴瀏覽器創(chuàng)建一個新的變量：var x = 5 + 6;var y = x * 10;J

23、avaScript同樣保留了一些關(guān)鍵字，這些關(guān)鍵字在當前的語言版 本中弁沒有使用，但在以后JavaScript擴展中會用到。JavaScript關(guān)鍵字必須以字母、下劃線（_）或美元符（$）開始 后續(xù)的字符可以是字母、數(shù)字、下劃線或美元符（數(shù)字是不允許 作為首字符出現(xiàn)的，以便JavaScript可以輕易區(qū)分開關(guān)鍵字和數(shù) 字）。JavaScript 注釋不是所有的JavaScript語句都是"命令"。雙斜杠/后的內(nèi)容將會被瀏覽器忽略： /我不會執(zhí)行JavaScript數(shù)據(jù)類型JavaScript有多種數(shù)據(jù)類型：數(shù)字，字符串，數(shù)組，對象等等:var length = 16;/ N

24、umber通過數(shù)字字面量賦值var points = x * 10;/ Number通過表達式字面量賦值var lastName = "Johnson"/ String通過字符串字面量賦值var cars = "Saab", "Volvo", "BMW"/ Array 通過數(shù)組字面量賦值var person = firstName:"John", lastName:"Doe" / Object 通過 對象字面量賦值數(shù)據(jù)類型的概念編程語言中，數(shù)據(jù)類型是一個非常重要的內(nèi)容。為了可

25、以操作變量，了解數(shù)據(jù)類型的概念非常重要。如果沒有使用數(shù)據(jù)類型，以下實例將無法執(zhí)行：16 + "Volvo"16加上"Volvo"是如何計算呢？以上會產(chǎn)生一個錯誤還是輸出以下結(jié)果呢？"16Volvo"你可以在瀏覽器嘗試執(zhí)行以上代碼查看效果。JavaScript 函數(shù)JavaScript語句可以寫在函數(shù)內(nèi)，函數(shù)可以重復引用： 引用一個函數(shù)=調(diào)用函數(shù)(執(zhí)行函數(shù)內(nèi)的語句)。function myFunction(a, b) return a * b;返回a乘于b的結(jié)果JavaScript字母大小寫JavaScript對大小寫是敏感的。當編寫J

26、avaScript語句時，請留意是否關(guān)閉大小寫切換鍵。函數(shù) getElementById 與 getElementbyID 是不同的。同樣，變量 myVariable與 MyVariable也是不同的。JavaScript 字符集JavaScript 使用 Unicode 字符集。Unicode覆蓋了所有的字符，包含標點等字符。JavaScript 語句JavaScript語句向瀏覽器發(fā)出的命令。語句的作用是告訴瀏覽器 該做什么。JavaScript 語句JavaScript語句是發(fā)給瀏覽器的命令。這些命令的作用是告訴瀏覽器要做的事情。document.getElementById("

27、;demo").innerHTML ="你好 Dolly"分號；分號用于分隔JavaScript語句。通常我們在每條可執(zhí)行的語句結(jié)尾添加分號。使用分號的另一用處是在一行中編寫多條語句。a = 5;b = 6;c = a + b;以上實例也可以這么寫：a = 5; b = 6; c = a + b;avaScript 代碼JavaScript代碼是JavaScript語句的序列。瀏覽器按照編寫順序依次執(zhí)行每條語句。document.getElementById("demo").innerHTML="你好 Dolly"docum

28、ent.getElementById("myDIV").innerHTML="你最近怎么樣？；JavaScript 代碼塊JavaScript可以分批地組合起來。代碼塊以左花括號開始，以右花括號結(jié)束。代碼塊的作用是一弁地執(zhí)行語句序列。function myFunction()document.getElementById("demo").innerHTML="你好 Dolly"document.getElementById("myDIV").innerHTML="你最近怎么樣?”； avaScr

29、ipt語句標識符JavaScript語句通常以一個 語句標識符 為開始，弁執(zhí)行該語句。語句標識符是保留關(guān)鍵字不能作為變量名使用。下表列出了 JavaScript語句標識符(關(guān)鍵字)：語句描述break用于跳出循環(huán)。catch語句塊，在try語句塊執(zhí)行出錯時執(zhí)行catch語句塊。continue跳過循環(huán)中的一個迭代。do . while執(zhí)行一個語句塊，在條件語句為true時繼續(xù)執(zhí)行該語句塊。for在條件語句為true時，可以將代碼塊執(zhí)行指定的次數(shù)。for . in用于遍歷數(shù)組或者對象的屬性（對數(shù)組或者對象的屬 性進行循環(huán)操作）。function 定義一個函數(shù)if . else用于基于不同的條件來執(zhí)行不同的動作。return退出函數(shù)switch用于基于不同的條件來執(zhí)行不同的動作。throw拋出（生成）錯誤 。try實現(xiàn)錯誤處理，與 catch 一同使用。var聲明一個變量。while當條件語句為true時，執(zhí)行語句塊。空格JavaScript會忽略多余的空格。您可以向腳本添加空格，來提高 其可讀性。下面的兩行代碼是等效的：var person="Hege"var person = "Hege&qu

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論