學習前端你必須知道的JavaScript 基礎和HTML DOM

時間 2019-11-30

標籤學習前端必須知道 javascript 基礎 html dom 欄目 JavaScript 简体版

原文原文鏈接

主題javascript

JavaScript是什麼html

JavaScript代碼應該放置在哪裏java

JavaScript語言node

JavaScript函數web

JavaScript事件編程

JavaScript對象瀏覽器

JavaScript HTML DOM 對象cookie

1、JavaScript是什麼函數

JavaScript用來給HTML頁面增長交互性工具

JavaScript是一種腳本語言（輕量級的程序設計語言）

JavaScript一般被嵌入到HTML頁面中

JavaScript是一種解釋語言（無須預先編譯，邊解釋邊執行）

2、JavaScript能作些什麼

JavaScript給HTML設計者提供了一個編程工具

JavaScript能動態的向HTML頁面中加入文本

JavaScript可以響應事件

JavaScript可以讀寫HTML元素

JavaScript可以用來驗證數據

JavaScript可以探測訪問者的瀏覽器

JavaScript可以用來建立cookies

3、JavaScript代碼放在哪裏，該如何放

使用標記（可使用該標記的type屬性定義使用的腳本語言，如VBScript）

<html>
<head>
<script type=」text/javascript」>
…
</script>
</head>
<body>
<script type=」text/javascript」>
…
</script>
</body>
</html>
複製代碼

腳本可以放在＜head＞或者＜body＞部分，譯者注：固然放在＜head＞部分的通常是函數，或者是打印HTML頭部元素，而在＜body＞部分能夠是任意的JavaScript代碼，只要輸出的text符合HTML規範。也能夠將JavaScript代碼與頁面分離，使用＜script＞標記的src 屬性來定義要引入的JavaScript代碼文件（.js文件）。

譯註：在IE6.0和Firefox中測試，type=」text/javascript」將影響腳本的運行，建議刪除。而用language=」javascript」代替

<html>
<head>
<script language=」JavaScript」 
Src=」http://somesite/myOwn JavaScript.js」>
</script>
<script language=」JavaScript」 
Src=」http://somesite/myOwn 2ndJavaScript.js」>
</script>
</head>
複製代碼

4、JavaScript變量

你可使用var或者根本不須要就能夠直接建立一個變量

Var straname=some value
Strid=some value
複製代碼

若是你在一個函數中聲明一個變量，那麼該變量只在函數範圍內有效

若是你在函數外聲明一個變量，在你頁面中的全部的函數均可以使用它

變量的生命週期是從你開始聲明它開始，直到頁面被關閉而結束

5、JavaScript消息框

u 警告框

用戶只有按了「OK」後才能繼續：alert(「sometext」)

u 確認框

用戶只有按了「OK」或「Cancel」後才能繼續：confirm(「cometext」)

譯註：若是用戶選擇不一樣的按鈕將返回不一樣的值，「OK」返回true，「Cancel」返回false你能夠獲取該值進行判斷。

u 交互框

用戶輸入一個值後，再按「OK」或「Cancel」後才能繼續: prompt(「sometext」,」defaultcalue」) 譯註：將返回用戶輸入的值。

6、JavaScript語句

條件語句if,if..else,switch

循環語句 for loop,while loop

Try…catch

Throw

譯註：此與java類同，除後兩條外與C類同

7、JavaScript函數

函數包含的代碼只有在一個事件或者一個調用發生的時候纔會被執行。

譯註：若是你把代碼寫在＜script＞中，而不寫在函數中，那麼頁面一裝載，代碼就會被當即執行，因此咱們能夠將代碼放入函數中，而後用HTML事件來調用。

你也能夠在頁面任何地方調用你的函數

函數實例

<html>
<head>
<script language=」JavaScript」 >
// 若是Alert(「Hello World!」)不是寫在下面的函數中，頁面一裝載時，代碼就會被當即執行
Function diaplaymessage(){
Alert(「Hello World!」)
}
</script>
</head>
<body>
<form>
<input type=」button」 calue=」Click Me!」 onclick=」diaplaymessage()」>
</form>
</body>
</html>
複製代碼

注意：JavaScript代碼關鍵字是區分大小寫的，如上代碼儘可能寫小寫（這裏是word自動將首字母改成了大寫）。

8、事件和事件處理器

每個web頁面都包含有各類各樣的事件，來激發事件處理函數

爲了定義事件和事件處理函數，咱們能夠在HTML標記中插入各類事件屬性

各類事件的例子：

鼠標點擊

一個網頁或圖片的裝載

在HTML表單中選擇一個輸入框

按下鍵盤…

HTML中的各類事件屬性：

Onabort 圖片裝入的時候被中斷

Onblur 一個元素失去焦點

Onchange 域的內容被改變

Onclick 鼠標單擊一個對象

Ondblclick 鼠標雙擊

Onerror 當裝載文檔或圖片的時候發生錯誤

Onfocus 一個元素得到焦點

Onkeydown 一個鍵盤鍵被按下

Onkeypress 一個鍵盤鍵被按下或者保持在下

Onkeyup 一個鍵盤鍵被釋放

Onload 一個頁面或者圖片完成裝載

Onmousedown 鼠標鍵被按下

Onmousemove 鼠標移動

Onmouseout 鼠標移出某個元素

Onmouseup 釋放鼠標鍵

Onreset 點擊了reset按鈕

Onresize 窗口被改變大小

Onselect 文本被選擇

Onsubmit 點擊了submit按鈕

Onunload 用戶退出頁面

l Onload和unload事件

這兩個事件當用戶進入或者離開頁面時被觸發，onload事件通常用來檢查訪問者瀏覽器的類型和版本，而後根據這些來裝載合適的web頁面。這兩個事件通常用來在當用戶進入或退出頁面時處理一些須要設置的cookies。

l Onfocus、onblur和onchange事件

這三個事件通常聯合起來進行表單驗證，例如當用戶改變域中的內容時，checkEmail()函數將被調用：＜input type=」text」 size=」30」 id=」email」 onchange=」checkEmail()」＞

Onblur演示例子：

<html><head>
<script language=」javascript」>
Function uppercase(){
Var x=document.getElementById(「fname」).value
Document.getElementById(「fname」).value=x.toUpperCase()
}
</script>
</head>
<body>
Enter your name:
<input type=」text」 id=」fname」 onblur=」uppercase()」>
</body>
</html>
複製代碼

Onsubmit演示例子：

<html><head>
<script language=」javascript」>
Function validate(){
//基於驗證邏輯返回true 或者false
}
</script>
</head>
<body>
<form action=」tryjs_submitpage.htm」 onsubmit=」return validate()」>
Name(最多10個字符)<input type=」text」 id=」fname」 size=」20」 ><br/>
Age(從1到100)(最多10個字符)<input type=」text」 id=」age」 size=」20」 ><br/>
Email:<input type=」text」 id=」email」 size=」20」 ><br/>
<br/>
<input type=」submit」 value=」遞交」 >
</body>
</html>
複製代碼

l onMouseOver和onMouseOut事件

這兩個事件通常用來建立動畫按鈕，下面是一個關於onMouseOver事件的例子，當該事件被探測到時，出現一個警告框：

<a href=http://www.xgtimes.com onmouseover=」alert(‘一個onmouseover事件’);return false」 > 
<img src=」xgtimeslogo.gif」 width=」100」 height=」30」></a>
複製代碼

9、JavaScript對象

n JavaScript是一種面向對象的變成語言，一個JavaScript對象有屬性和方法：

例如：String 對象有length屬性和oUpperCase()方法：

<script language=」 JavaScript」>
Var txt=」hello world!」
Document.write(txt.length)
Document.write(txt.roUpperCase())
</script>
複製代碼

n JavaScript內建對象

u String

u Date

u Araay

u Boolean

u Math

n 建立你本身的JavaScript對象

u 兩種不一樣的方法

l 建立一個對象的直接實例

l 建立一個對象的模板

u 建立一個對象的直接實例

n 建立一個對象的實例，增長四個屬性

personObj=new Object()
personObj.firstname=」john」
personObj.lastname=」doe」
personObj.age=50
personObj.eyecolor=」blue」
複製代碼

n 增長一個eat的方法，這eat()是一個已經定義或須要定義的函數，這與java 中方法的定義是有很大不一樣的

personObj.eat=eat

u 建立一個對象的模板

n 模板定義了JavaScript對象的結構

Function person(firstname,lastname,age,eyecolor){
This.firstname=firstname;
This.lastname=lastname;
This.age=age;
This.eyecolor=eyecolor;
}
複製代碼

注意模板僅僅是個函數

q 一旦你有了模板，你就能夠建立新的對象實例

myFather=new person(「John」,」Doe」,50,」blue」);
myMother=new person(「Sally」,」Rally」,48,」green」);
複製代碼

q 你也能增長一些方法到person對象，這也是在模板中完成的。

Function person(firstname,lastname,age,eyecolor){
This.firstname=firstname;
This.lastname=lastname;
This.age=age;
This.eyecolor=eyecolor;
This.newlastname=newlastname;
}
複製代碼

方法就是JavaScript函數

Function newlastname(new_lastname){
This.lastname=new_lastname
}
複製代碼

10、HTML DOM

HTML DOM爲HTML定義了一個標準的對象集，和一個標準的訪問和操做HTML文檔的方法。只要它們包含文本和屬性，全部的HTML元素均可以經過DOM訪問，包括刪除修改內容，建立元素。HTML DOM 是一個獨立的平臺和語言。它能夠在任何象Java,JavaScript,VBScript語言中使用。

u HTML DOM 對象：

u Anchor對象

u Document對象

u Event對象

u Form和form Input對象

u Frame,Frameset和IFrame對象

u Image對象

u Location對象

u Navigator對象

u Option和Select對象

u Screen對象

u Table,TableHeader,TableRow,TableData對象

u Window對象

11、document對象

寫入文本到輸出流：

<html>
<body>
<script language=」javascript」>
Document.write(「hello world」)
</script>
</body>
</html>
寫入格式化文本到輸出流：
<html>
<body>
<script language=」javascript」>
Document.write(「<h1>hello world<h1>」)
</script>
</body></html>
使用getElementById()
<html>
<body>
<script language=」javascript」>
Function getElement(){
Var x=document. getElementById(「myHeader」)
Alert(「I am a 」 + x.tagName + 「 element」)
}
</script>
<h1 id=」myHeader」 onclick=」getElement()」>點我看我是什麼元素
</body>
</html>
使用getElementsByName()
<html>
<head>
<script language=」javascript」>
Function getElements(){
Var x=document. getElementByName(「myInput」)
Alert(x.length + 「 elements!」)
}
</script>
</head>
<body>
<input name=」myInput」 type=」text」 size=」20」><br/>
<input name=」myInput」 type=」text」 size=」20」><br/>
<input name=」myInput」 type=」text」 size=」20」><br/>
<br/
<input type=」text」 onclick=」getElements」 value=」有多少元素命名爲’myInput’」><br/>
</body>
</html>
返回文檔中第一個錨點的innerHTML（內部文字）
<html>
<body>
<a name=」first」>first anchor</a><br/>
<a name=」second」>second anchor</a><br/>
<a name=」third」>third anchor</a><br/>
</br>
複製代碼

文檔中第一個錨點的InnerHTML ：

<script language=」javascript」>
Document.write(document.anchors[0].innerHTML)
</script>
</body>
</html>
訪問集合中的一項：
<html>
<body>
<form id=」Form1」 name=」Form1」>
名字：<input type=」text」>
</form>
<p>你可使用項目的數字或者名稱訪問集合中的項：
</p>
<script language=」javascipt」>
Document.write(「<p>第一個表單的名字是：」+document.forms[0].name+」</p>」)
Document.write(「<p>第一個表單的名字是：」+document.getElementById(「form1」). name+」</p>」)
</body>
</html>
複製代碼

12、事件對象

u 什麼是光標的位置

<html>
<head>
<script language=」javascript」>
Function show_coords(event){
X=event.clientx
Y=event.clientY
alert("x:"+X+" y:"+Y)
}
</script>
</head>
<body onmousedown=」show_coords(event)」>
<p>點擊文檔，將出現一個警告框來顯示光標的X，Y座標</p>
</body>
</html>
u 什麼是被按下鍵的unicode碼
<html>
<head>
<script language=」javascript」>
Function whichButton(event){
Alert(event.keyCode)
}
</script>
</head>
<body onkeyup=」whichButton(event)」>
<p>注意：當測試該例時，保證正確的窗口處於焦點狀態，按下鍵後，一個警告框顯示按下去的那鍵的unicode碼</p>
</body></html>
複製代碼

u 哪個元素被單擊

<html>
<head>
<script language=」javascript」>
Function whichElement(e){
Var targ
If(!e) var e=window.event
If(e.target) targ=e.target
Else if(e.srcElement) targ=e.srcElement
If(targ.nodeType==3) targ=targ.parentNode
Var tname
Tname=targ.tagName
Alert(「你單擊了一個」 + tname + 「 element.」)
}
</script>
</head>
<body onmousedown=」whichElement(event)」>
<p>單擊文檔的任何地方，一個警告框顯示你單擊餓元素的標記名</p> 
<h3>this is a header</h3>
<p>這是一個段落</p>
<img src=」ball.gif」 width=」29」 height=」28」 alt=」ball」>
</body></html>
複製代碼

u 哪一種類型事件被髮生

<html>
<head>
<script language=」javascript」>
Function whichType(event){
Alert(event.type)
}
</script>
</head>
<body onmousedown=」whichType(event)」>
u <p>單擊文檔，一個警告框顯示哪一種類型事件被髮生
</p>
</body></html>
複製代碼