JavaScript介紹和基本使用
技術標籤：javascripthtml
JavaScript介紹
JavaScript是一種專為與網頁互動設計的客戶端指令碼語言。
JavaScript的引入方式
1.內部引用，直接在html中編寫
<script type="text/javascript">
alert("這是一個彈出框");
document.write("這是頁面中的一句話");
</script>
2.在外部引入js
<script type="text/javascript" src=" JavaScript幾個注意點
1.type="text/javascript說明當前script標籤中文字的型別
2.所有JS程式碼寫在script標籤
3.script放在head標籤中
4.可以引入多個script標籤，多個script標籤順序執行
5.js程式碼可以外部引入 src引入外部檔案
6.如果當前script標籤作用是引入外部檔案，那麼這個script標籤中就不能再寫入
程式碼了。
JavaScript基本語法格式
註釋
單行註釋：//
多行註釋：/*這是一句話，還可以換行*/
基本資料型別
數字：number
布林：Boolean
特殊資料型別：null-空、undefined-未宣告
變數
變數，值可以改變
1.宣告變數，通過關鍵字var，宣告變數的時候同時給變數賦值，叫初始化。
2.變數賦值
3.同時定義多個變數，變數之間要使用逗號隔開
識別符號
使用者可以自定義的所有名字
識別符號規則：
1.由數字、字母、下劃線、$組成。除外的不可
2.不能以數字開頭
3.區分大小寫
4.識別符號必須見名知意
JS-BOM
BOM是瀏覽器的物件模型，瀏覽器可以通過呼叫系統的對話方塊，向用戶展示資訊。
提供了三個函式，使用對話方塊的操作：
window.alert("警告框"); window.confirm("請選擇確定和取消"); window.prompt("請輸入一個數","預設值");
DOM是文件物件模型：<html>開始d到</html>結束
HTML和CSS表達頁面的內容，JavaScript控制頁面的行為，DOM是連通HTML+CSS+JS的工具
DOM中節點種類：三種，在JS中所有節點都是物件
元素節點：<div></div>
屬性節點：titile=“屬性節點”
文字節點：內容
通過id獲取節點
<script>
var domDiv=document.getElementById("div1")
</script>
<body>
<div id="div1"></div>
</body>
程式碼會從上向下執行，還沒有加載出BOM元素，就執行script程式碼
JS-DOM-標籤屬性
1.通過該節點物件獲取該標籤屬性
alert(domDiv.tagName);
alert(domDiv.innerHTM);
domDiv.innerHTML ="<h1>我</h1>";會解析標籤
HTML屬性
id、title、style、className
訪問這些屬性：
元素節點.屬性名
元素節點[屬性名]
alert(domDiv.id);
alert(domDiv.title);
alert(domDiv.className);
alert(domDiv.style);//樣式物件
alert(domDiv.style.width);
domDiv.style.width = "400px";
//style樣式中 background-color 使用-連結的屬性訪問的時候
//需要將-去掉，然後將後續單詞的首字母大寫
alert(domDiv.style.backgroundColor)
domDiv.style.backgroundColor = "blue";
獲取元素節點
通過document獲取
id屬性：document.getElementById()
tagName標籤名：document.getElementsByTagName()
name屬性：document.getElementsByName()
class屬性：document.getElementsByCalssName()
注：oUI.style.backgroundColor;只能獲取行內樣式
獲取其他的樣式：
getComputedStyle(元素節點)[獲取樣式型別];
getComputedStyle(oUI)["background-color"];
通過父節點獲取
parentObj.childNodes //獲取制定物件接後代
HTML元素和TextNode物件的集合
parentObj.firstChird //獲得第一個子節點
parentObj.lastChird //獲得第二個子節點
//當前元素節點所有的子節點
alert(oDiv.childNodes);
alert(oDiv.childNodes.length);
JS-事件
用來獲取事件的詳細資訊，滑鼠位置，鍵盤按鍵等
主要分為：滑鼠事件、鍵盤事件、表單事件
組成：on+事件名稱
- 滑鼠事件
onClick //滑鼠點選事件
onDblClick //滑鼠雙擊事件
onMouseDown //滑鼠上的按鈕被按下了
onMouseUp //滑鼠按下後，鬆開時激發的事件
onMouseOver //當滑鼠移動到某物件範圍的上方時觸發的事件
onMouseMove //滑鼠移動時觸發的事件
onMouseOut //當滑鼠離開某物件範圍時觸發的事件
- 滑鼠事件屬性
e.clientX //滑鼠距離可視區的左邊距離
e.clientY //滑鼠距離可視區的上邊距離
e.pageX //滑鼠距離頁面的左邊距離
e.pageY //滑鼠距離頁面的上邊距離
e.offsetX //滑鼠距離事件源的左邊距離
e.offsetY //滑鼠距離事件源的上邊距離
- 表單事件
onBlur //當元素失去焦點時觸發的事件
onFocus //當某個元素獲得焦點時觸發的事件
onChange //當前元素失去焦點並且元素的內容發生改變而觸發的事件
onSubmit //提交表單
- 鍵盤事件
onKeyPress //當鍵盤上的某個鍵被按下並且釋放時觸發的事件
onKeyDown //當鍵盤上某個按鍵被按下時觸發的事件
onKeyUp //當鍵盤上某個按鍵被按放開時觸發的事件
瀏覽器的預設行為
JavaScript事件本身所具有的的屬性，如a標籤的跳轉，submit提交，右鍵選單，文字框輸入等。
阻止預設行為的方式：
event.preventDefault();
event.returnValue = false;
return false;
封裝函式
封裝一個函式，可以擁有上述幾種獲取元素節點的功能。
css選擇器
#id 通過id獲取元素節點
.class 通過className獲取元素節點
tagName 通過tagName獲取元素節點
name=xxx 通過name獲取元素節點