Java學習階段一：3.JavaScript
目錄
瞭解JavaScript
JavaScript 是指令碼語言
JavaScript 是一種輕量級的程式語言。
JavaScript 是可插入 HTML 頁面的程式設計程式碼。
JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。
參考地址：http://www.w3school.com.cn/js/js_intro.asp
JavaScript基本語法
<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>
<p id="demo"></p>
JavaScript 對大小寫敏感。
JavaScript 對大小寫是敏感的。
當編寫 JavaScript 語句時，請留意是否關閉大小寫切換鍵。
函式 getElementById 與 getElementbyID 是不同的。
同樣，變數 myVariable 與 MyVariable 也是不同的。
JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆蓋了所有的字元，包含標點等字元
空格
JavaScript 會忽略多餘的空格。您可以向指令碼新增空格，來提高其可讀性。
對程式碼行進行折行
您可以在文字字串中使用反斜槓對程式碼行進行換行。
參考地址：http://www.w3school.com.cn/js/js_statements.asp
https://www.cnblogs.com/john-sr/p/5716345.html
JavaScript內部物件
參考地址：https://www.cnblogs.com/cyjy/archive/2017/02/22/6428908.html
http://www.w3school.com.cn/js/js_objects.asp
JavaScript的DOM
HTML DOM （文件物件模型）
當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。
HTML DOM 模型被構造為物件的樹。
HTML DOM 樹
查詢 HTML 元素
通常，通過 JavaScript，您需要操作 HTML 元素。
為了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：
- 通過 id 找到 HTML 元素
- 通過標籤名找到 HTML 元素
- 通過類名找到 HTML 元素
通過 id 查詢 HTML 元素
在 DOM 中查詢 HTML 元素的最簡單的方法，是通過使用元素的 id。
例項
本例查詢 id="intro" 元素：
var x=document.getElementById("intro");
通過標籤名查詢 HTML 元素
例項
本例查詢 id="main" 的元素，然後查詢 "main" 中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");通過類名找到 HTML 元素
本例通過 getElementsByClassName 函式來查詢 class="intro" 的元素：
例項
var x=document.getElementsByClassName("intro");- 常用方法:
- 獲取節點：
- document.getElementById(idName) //通過id號來獲取元素，返回一個元素物件
- document.getElementsByName(name) //通過name屬性獲取id號，返回元素物件陣列
- document.getElementsByClassName(className) //通過class來獲取元素，返回元素物件陣列（ie8以上才有）
- document.getElementsByTagName(tagName) //通過標籤名獲取元素，返回元素物件陣列
- 獲取/設定元素的屬性值：
- element.getAttribute(attributeName) //括號傳入屬性名，返回對應屬性的屬性值
- element.setAttribute(attributeName,attributeValue) //傳入屬性名及設定的值
- 建立節點Node：
- document.createElement("h3") //建立一個html元素，這裡以建立h3元素為例
- document.createTextNode(String); //建立一個文字節點；
- document.createAttribute("class"); //建立一個屬性節點，這裡以建立class屬性為例
- 增添節點：
- element.appendChild(Node); //往element內部最後面新增一個節點，引數是節點型別
- elelment.insertBefore(newNode,existingNode); //在element內部的中在existingNode前面插入newNode
- 刪除節點：
- element.removeChild(Node) //刪除當前節點下指定的子節點，刪除成功返回該被刪除的節點，否則返回null
- 常用屬性:
- 獲取當前元素的父節點 ：
- element.parentNode //返回當前元素的父節點物件
- 獲取當前元素的子節點：
- element.chlidren //返回當前元素所有子元素節點物件，只返回HTML節點
- element.chilidNodes //返回當前元素多有子節點，包括文字，HTML，屬性節點。（回車也會當做一個節點）
- element.firstChild //返回當前元素的第一個子節點物件
- element.lastChild //返回當前元素的最後一個子節點物件
- 獲取當前元素的同級元素：
- element.nextSibling //返回當前元素的下一個同級元素 沒有就返回null
- element.previousSibling //返回當前元素上一個同級元素 沒有就返回null
- 獲取當前元素的文字：
- element.innerHTML //返回元素的所有文字，包括html程式碼
- element.innerText //返回當前元素的自身及子代所有文字值，只是文字內容，不包括html程式碼
- 獲取當前節點的節點型別：node.nodeType //返回節點的型別,數字形式（1-12）常見幾個1：元素節點，2：屬性節點，3：文字節點。
- 設定樣式：element.style.color=“#eea”; //設定元素的樣式時使用style，這裡以設定文字顏色為例。
改變 HTML 樣式
如需改變 HTML 元素的樣式，請使用這個語法：
document.getElementById(id).style.property=new style改變 HTML 屬性
如需改變 HTML 元素的屬性，請使用這個語法：
document.getElementById(id).attribute=new value改變 HTML 內容
修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。
如需改變 HTML 元素的內容，請使用這個語法：
document.getElementById(id).innerHTML=new HTML改變 HTML 輸出流
在 JavaScript 中，document.write() 可用於直接向 HTML 輸出流寫內容。
onload 和 onunload 事件
onload 和 onunload 事件會在使用者進入或離開頁面時被觸發。
onload 事件可用於檢測訪問者的瀏覽器型別和瀏覽器版本，並基於這些資訊來載入網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。
例項
<body onload="checkCookies()">onchange 事件
onchange 事件常結合對輸入欄位的驗證來使用。
下面是一個如何使用 onchange 的例子。當用戶改變輸入欄位的內容時，會呼叫 upperCase() 函式。
例項
<input type="text" id="fname" onchange="upperCase()">onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用於在使用者的滑鼠移至 HTML 元素上方或移出元素時觸發函式。
例項
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把滑鼠移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="謝謝"
}
function mOut(obj)
{
obj.innerHTML="把滑鼠移到上面"
}
</script>onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構成了滑鼠點選事件的所有部分。首先當點選滑鼠按鈕時，會觸發 onmousedown 事件，當釋放滑鼠按鈕時，會觸發 onmouseup 事件，最後，當完成滑鼠點選時，會觸發 onclick 事件。
例項
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">請點選這裡</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="請釋放滑鼠按鈕"
}
function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="請按下滑鼠按鈕"
}
</script>
</body>參考地址：http://www.w3school.com.cn/js/js_htmldom.asp
http://www.w3school.com.cn/js/js_htmldom_html.asp
http://www.w3school.com.cn/js/js_htmldom_css.asp
http://www.w3school.com.cn/js/js_htmldom_events.asp
http://www.runoob.com/js/js-htmldom.html
https://www.cnblogs.com/Ry-yuan/p/6918155.html
BOM
瀏覽器物件模型 (BOM)
瀏覽器物件模型（Browser Object Model (BOM)）尚無正式標準。
由於現代瀏覽器已經（幾乎）實現了 JavaScript 互動性方面的相同方法和屬性，因此常被認為是 BOM 的方法和屬性。
參考地址：http://www.w3school.com.cn/js/js_window.asp
http://www.runoob.com/js/js-window.html
https://www.cnblogs.com/2010master/p/5824215.html
自定義函式
函式是由事件驅動的或者當它被呼叫時執行的可重複使用的程式碼塊。
描述 JavaScript 中定義函式的幾種方式:
JavaScript 中，有三種定義函式的方式：
1、函式語句：即使用 function 關鍵字顯式定義函式。如：
function f(x){
return x;
}2、函式定義表示式：也稱為“函式直接量”。形如：
var f = function(x){return x;};3、使用 Function() 建構函式定義，形如：
Var f = new Function(“x”,”return x;”);參考地址：http://www.w3school.com.cn/js/js_functions.asp
http://www.runoob.com/js/js-function-definition
https://blog.csdn.net/u012396955/article/details/53929937
全域性函式
| 函式 | 描述 |
|---|---|
| decodeURI() | 解碼某個編碼的 URI。 |
| decodeURIComponent() | 解碼一個編碼的 URI 元件。 |
| encodeURI() | 把字串編碼為 URI。 |
| encodeURIComponent() | 把字串編碼為 URI 元件。 |
| escape() | 對字串進行編碼。 |
| eval() | 計算 JavaScript 字串，並把它作為指令碼程式碼來執行。 |
| isFinite() | 檢查某個值是否為有窮大的數。 |
| isNaN() | 檢查某個值是否是數字。 |
| Number() | 把物件的值轉換為數字。 |
| parseFloat() | 解析一個字串並返回一個浮點數。 |
| parseInt() | 解析一個字串並返回一個整數。 |
| String() | 把物件的值轉換為字串。 |
| unescape() | 對由 escape() 編碼的字串進行解碼。 |
參考地址：http://www.runoob.com/jsref/jsref-obj-global.html
事件處理
參考地址：https://www.linuxidc.com/Linux/2016-12/13796