用法
JS內部引用
<script type="text/javascript">
document.write("hello");
alert("JS代碼")
</script>
引用JS外部文件
<script src="myscript.js"></script>
注意: javascript作為一種腳本語言可以放在html頁面中任何位置，但是瀏覽器解釋html時是按先后順序的，所以前面的script就先被執行。比如進行頁面顯示初始化的js必須放在head里面，因為初始化都要求提前進行（如給頁面body設置css等）；而如果是通過事件調用執行的function那么對位置沒什么要求的。
注釋
單行注釋，在注釋內容前加符號"http://""
多行注釋以"/*"開始，以"*/"結束。
變量
定義變量使用關鍵字var,語法如下：
var 變量名
變量名可以任意取名，但要遵循命名規則:
1.變量必須使用字母、下劃線(_)或者美元符($)開始。
2.然后可以使用任意多個英文字母、數字、下劃線(_)或者美元符($)組成。
3.不能使用JavaScript關鍵詞與JavaScript保留字。
變量要先聲明再賦值，如下：
var mychar;
mychar="javascript";
var mynum = 6;
變量可以重復賦值，如下：
var mychar;
mychar="javascript";
mychar="hello";
注意:
在JS中區分大小寫，如變量mychar與myChar是不一樣的，表示是兩個變量。
變量雖然也可以不聲明，直接使用，但不規范，需要先聲明，后使用。
判斷語句（if...else）
語法:
if(條件)
{ 條件成立時執行的代碼 }
else
{ 條件不成立時執行的代碼 }
函數
如何定義一個函數呢？基本語法如下:
function 函數名()
{
函數代碼;
}
說明:
function定義函數的關鍵字。
"函數名"你為函數取的名字。
"函數代碼"替換為完成特定功能的代碼。
函數調用:
函數定義好后，是不能自動執行的，所以需調用它,只需直接在需要的位置寫函數就ok了,代碼如下:
<script type="text/javascript">
function contxt() //定義函數
{
alert("哈哈，調用函數了!");
}
</script>
<form>
<input type="button" value="點擊我" onclick="contxt()" />
</form>
輸出內容（document.write）
document.write() 可用于直接向 HTML 輸出流寫內容。簡單的說就是直接在網頁中輸出內容。
<script type="text/javascript">
第一種:輸出內容用""括起，直接輸出""號內的內容。
document.write("I love JavaScript！"); //內容用""括起來，""里的內容直接輸出。
第二種:通過變量，輸出內容
var mystr="hello world!";
document.write(mystr); //直接寫變量名，輸出變量存儲的內容。
第三種:輸出多項內容，內容之間用+號連接。
var mystr="hello";
document.write(mystr+"I love JavaScript"); //多項內容之間用+號連接
第四種:輸出HTML標簽，并起作用，標簽使用""括起來。
var mystr="hello";
document.write(mystr+"<br>");//輸出hello后，輸出一個換行符
document.write("JavaScript");
</script>
如何輸出空格, 解決方法:
- 使用輸出html標簽
來解決
document.write(" "+"1"+" "+"23");
- 使用CSS樣式來解決
document.write("<span style='white-space:pre;'>"+" 1 2 3 "+"</span>");
在輸出時添加“white-space:pre;”樣式屬性。這個樣式表示"空白會被瀏覽器保留"
警告（alert 消息對話框）
alert(字符串或變量);
注意:
在點擊對話框"確定"按鈕前，不能進行任何其它操作。
消息對話框通常可以用于調試程序。
alert輸出內容，可以是字符串或變量，與document.write 相似。
確認（confirm 消息對話框）
語法：
confirm(str);
參數說明：
str：在消息對話框中要顯示的文本
返回值
返回值: Boolean值
注: 通過返回值可以判斷用戶點擊了什么按鈕
代碼示例：
<script type="text/javascript">
var mymessage=confirm("你喜歡JavaScript嗎?");
if(mymessage==true) {
document.write("很好,加油!");
} else {
document.write("JS功能強大，要學習噢!");
}
</script>
提問（prompt 消息對話框）
語法:
prompt(str1, str2);
參數說明：
str1：要顯示在消息對話框中的文本，不可修改
str2：文本框中的內容，可以修改
返回值
1. 點擊確定按鈕，文本框中的內容將作為函數返回值
2. 點擊取消按鈕，將返回null
代碼示例：
var myname=prompt("請輸入你的姓名:");
if(myname!=null) {
alert("你好"+myname);
} else {
alert("你好 my friend.");
}
打開新窗口（window.open）
語法
window.open([URL], [窗口名稱], [參數字符串])
參數說明:
URL：可選參數，在窗口中要顯示網頁的網址或路徑。
如果省略這個參數，或者它的值是空字符串，那么窗口就不顯示任何文檔。
窗口名稱：可選參數，被打開窗口的名稱。
1.該名稱由字母、數字和下劃線字符組成。
2."_top"、"_blank"、"_self"具有特殊意義的名稱。
_blank：在新窗口顯示目標網頁
_self：在當前窗口顯示目標網頁
_top：框架網頁中在上部窗口中顯示目標網頁
3.相同 name 的窗口只能創建一個，要想創建多個窗口則 name 不能相同。
4.name 不能包含有空格。
參數字符串：可選參數，設置窗口參數，各參數用逗號隔開。
參數表：
例如：打開http://www.imooc.com網站，大小為300px * 200px，無菜單，無工具欄，無狀態欄，有滾動條窗口：
<script type="text/javascript">
window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
注意：運行結果考慮瀏覽器兼容問題。
關閉窗口（window.close）
用法：
widow.close(); // 關閉本窗口
或
<窗口對象>.close(); // 關閉指定的窗口
認識DOM
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
HTML文檔可以說由節點構成的集合，三種常見的DOM節點:
元素節點：<html>、<body>、<p>等都是元素節點，即標簽。
文本節點:向用戶展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
屬性節點:元素屬性，如<a>標簽的鏈接屬性。
通過ID獲取元素
語法：
document.getElementById(“id”)
結果：null或[object HTMLParagraphElement]
注：在獲取的元素是一個對象，如想對元素進行操作，我們要通過它的屬性或方法。
innerHTML 屬性
innerHTML 屬性用于獲取或替換 HTML 元素的內容。
語法：
Object.innerHTML="";
注意：
1.Object是獲取的元素對象，如通過document.getElementById("ID")獲取的元素。
2.注意書寫，innerHTML區分大小寫。
改變 HTML 樣式
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢？
語法
Object.style.property=new style;
基本屬性表（property）:
代碼示例：
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>
顯示和隱藏（display屬性）
網頁中經常會看到顯示和隱藏的效果，可通過display屬性來設置。
語法
Object.style.display = value
value取值：
控制類名（className 屬性）
className 屬性設置或返回元素的class 屬性。
語法：
object.className = classname
作用：
1.獲取元素的class 屬性
- 為網頁內的某個元素指定一個css樣式來更改該元素的外觀
樣式全部取消
removeAttribute("style")
變量
變量，存儲數據的容器。
變量名:容器---- 杯子
變量值：數據---杯子里的水
1.必須以字母、下劃線或美元符號開頭，后面可以跟字母、下劃線、美元符號和數字。如下:
正確:
mysum
_mychar
$numa1
錯誤:
6num //開頭不能用數字
%sum //開頭不能用除(_ $)外特殊符號,如(% + /等)
sum+num //開頭中間不能使用除(_ $)外特殊符號，如(% + /等)
2.變量名區分大小寫，如:A與a是兩個不同變量。
3.不允許使用JavaScript關鍵字和保留字做變量名。
什么是事件
事件是可以被 JavaScript 偵測到的行為。
主要事件表:
Date 日期對象
返回指定的字符串首次出現的位置
stringObject.indexOf(substring, startpos)
字符串分割split()
stringObject.split(separator,limit)
提取字符串substring()
stringObject.substring(startPos,stopPos)
提取指定數目的字符substr()
stringObject.substr(startPos,length)
Array 數組對象
數組定義的方法：
- 定義了一個空數組:
var 數組名= new Array();
- 定義時指定有n個空元素的數組:
var 數組名 =new Array(n);
- 定義數組的時候，直接初始化數據：
var 數組名 = [<元素1>, <元素2>, <元素3>...];
我們定義myArray數組，并賦值，代碼如下：
var myArray = [2, 8, 6];
說明：定義了一個數組 myArray，里邊的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。
數組連接concat()
arrayObject.concat(array1,array2,...,arrayN)
計時器setInterval()
語法：
setInterval(代碼，交互時間);
參數說明：
代碼：要調用的函數或要執行的代碼串。
交互時間：周期性執行或調用表達式之間的時間間隔，以毫秒計（1s=1000ms）。
返回值：
一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執行的值。
調用函數格式(假設有一個clock()函數)：
setInterval("clock()",1000)
或
setInterval(clock,1000)
取消計時器clearInterval()
語法：
clearInterval(id_of_setInterval)
參數說明：
id_of_setInterval：由 setInterval() 返回的 ID 值。
計時器setTimeout()
setTimeout()計時器，在載入后延遲指定時間后,去執行一次表達式,僅執行一次。
語法：
setTimeout(代碼,延遲時間);
參數說明：
- 要調用的函數或要執行的代碼串。
- 延時時間：在執行代碼前需等待的時間，以毫秒為單位（1s=1000ms)。
取消計時器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止計時器。
語法：
clearTimeout(id_of_setTimeout)
參數說明：
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行代碼塊。
History 對象
history對象記錄了用戶曾經瀏覽過的頁面(URL)，并可以實現瀏覽器前進與后退相似導航的功能。
注意:從窗口被打開的那一刻開始記錄，每個瀏覽器窗口、每個標簽頁乃至每個框架，都有自己的history對象與特定的window對象關聯。
語法：
window.history.[屬性|方法]
注意：window可以省略。
History 對象屬性
History 對象方法
使用length屬性，當前窗口的瀏覽歷史總長度，代碼如下：
var HL = window.history.length;
document.write(HL);
返回前一個瀏覽的頁面
window.history.back();
window.history.go(-1);
返回下一個瀏覽的頁面
window.history.forward();
window.history.go(1);
返回瀏覽歷史中的其他頁面
window.history.go(number);
Location對象
location用于獲取或設置窗體的URL，并且可以用于解析URL。
location.[屬性|方法]
Navigator對象
Navigator 對象包含有關瀏覽器的信息，通常用于檢測瀏覽器與操作系統的版本。
userAgent
返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)
navigator.userAgent
使用userAgent判斷使用的是什么瀏覽器(假設使用的是IE8瀏覽器)，代碼如下:
function validB(){
var u_agent = navigator.userAgent;
var B_name="Failed to identify the browser";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
B_name="IE(8-10)";
}
document.write("B_name:"+B_name+"<br>");
document.write("u_agent:"+u_agent+"<br>");
}
screen對象
screen對象用于獲取用戶的屏幕信息。
window.screen.屬性
DOM
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
HTML文檔可以說由節點構成的集合，DOM節點有：
元素節點：上圖中
<html>、<body>、<p>等都是元素節點，即標簽。文本節點:向用戶展示的內容，如
<li>...</li>中的JavaScript、DOM、CSS等文本。屬性節點:元素屬性，如
<a>標簽的鏈接屬性。
注意：前兩個是document方法。
getElementsByName()方法
返回帶有指定名稱的節點對象的集合
document.getElementsByName(name);
getElementsByTagName()方法
返回帶有指定標簽名的節點對象的集合。返回元素的順序是它們在文檔中的順序。
document.getElementsByTagName(Tagname) // Tagname是標簽的名稱，如p、a、img等標簽名
區別getElementByID,getElementsByName,getElementsByTagName
如下:
<input type="checkbox" name="hobby" id="hobby1"> 音樂
input標簽就像人的類別。
name屬性就像人的姓名。
id屬性就像人的身份證。
getAttribute()方法
通過元素節點的屬性名稱獲取屬性的值。
elementNode.getAttribute(name)
//1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。
//2. name：要想查詢的元素節點的屬性名字
setAttribute()方法
setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值。
elementNode.setAttribute(name,value)
//1.name: 要設置的屬性名。
//2.value: 要設置的屬性值。
節點屬性
在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ：
nodeName : 節點的名稱
nodeValue ：節點的值
nodeType ：節點的類型
一、nodeName 屬性: 節點的名稱，是只讀的。
- 元素節點的 nodeName 與標簽名相同
- 屬性節點的 nodeName 是屬性的名稱
- 文本節點的 nodeName 永遠是 #text
- 文檔節點的 nodeName 永遠是 #document
二、nodeValue 屬性：節點的值
- 元素節點的 nodeValue 是 undefined 或 null
- 文本節點的 nodeValue 是文本自身
- 屬性節點的 nodeValue 是屬性的值
三、nodeType 屬性: 節點的類型，是只讀的。以下常用的幾種結點類型:
| 元素類型 | 節點類型 |
|---|---|
| 元素 | 1 |
| 屬性 | 2 |
| 文本 | 3 |
| 注釋 | 8 |
| 文檔 | 9 |
訪問子節點childNodes
訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，他具有length屬性。
elementNode.childNodes
注意：如果選定的節點沒有子節點，則該屬性返回不包含節點的 NodeList。
訪問子節點的第一和最后項
node.firstChild
node. lastChild
訪問父節點parentNode
elementNode.parentNode
注意：父節點只能有一個。
訪問兄弟節點
- nextSibling 屬性可返回某個節點之后緊跟的節點（處于同一樹層級中）。
nodeObject.nextSibling
- previousSibling 屬性可返回某個節點之前緊跟的節點（處于同一樹層級中）。
nodeObject.previousSibling
說明：如果無此節點，則該屬性返回 null。
注意: 兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。
解決問題方法:
判斷節點nodeType是否為1, 如是為元素節點，跳過。
function get_nextSibling(n)
{
var x=n.nextSibling;
while (x && x.nodeType!=1)
{
x=x.nextSibling;
}
return x;
}
function get_previousSibling(n)
{
var x=n.previousSibling;
while (x && x.nodeType!=1)
{
x=x.previousSibling;
}
return x;
}
插入節點appendChild()
在指定節點的最后一個子節點列表之后添加一個新的子節點。
appendChild(newnode)
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newnode = document.createElement("li");
newnode.innerHTML="PHP";
otest.appendChild(newnode);
</script>
插入節點insertBefore()
insertBefore(newnode,node);
//newnode: 要插入的新節點。
//node: 指定此節點前插入節點。
<ul id="test"><li>JavaScript</li><li>HTML</li></ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newnode = document.createElement("li");
newnode.innerHTML = "PHP";
otest.insertBefore(newnode, otest.childNodes[1]);
</script>
刪除節點removeChild()
removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。
nodeObject.removeChild(node)
<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
for(var i=content.childNodes.length-1;i>=0;i--){
var dnode = content.childNodes[i];
var x = content.removeChild(dnode);
document.write(x.innerHTML+"<br>");
}
}
</script>
<button onclick="clearText()">清除節點內容</button>
注意: 把刪除的子節點賦值給 x，這個子節點不在DOM樹中，但是還存在內存中，可通過 x 操作。
如果要完全刪除對象，給 x 賦 null 值
替換元素節點replaceChild()
node.replaceChild (newnode,oldnew )
注意:
- 當 oldnode 被替換時，所有與之相關的屬性內容都將被移除。
- newnode 必須先被建立。
創建元素節點createElement
document.createElement(tagName)
<script type="text/javascript">
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "創建一個按鈕";
body.appendChild(input);
</script>
創建文本節點createTextNode
document.createTextNode(data)
//data : 字符串值，可規定此節點的文本
瀏覽器窗口可視區域大小
一、對于IE9+、Chrome、Firefox、Opera 以及 Safari：
? window.innerHeight - 瀏覽器窗口的內部高度
? window.innerWidth - 瀏覽器窗口的內部寬度
二、對于 Internet Explorer 8、7、6、5：
? document.documentElement.clientHeight表示HTML文檔所在窗口的當前高度。
? document.documentElement.clientWidth表示HTML文檔所在窗口的當前寬度。
或者
Document對象的body屬性對應HTML文檔的<body>標簽
? document.body.clientHeight
? document.body.clientWidth
在不同瀏覽器都實用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
網頁尺寸scrollHeight
scrollHeight和scrollWidth，獲取網頁內容高度和寬度。
一、針對IE、Opera:
scrollHeight 是網頁內容實際高度，可以小于 clientHeight。
二、針對NS、FF:
scrollHeight 是網頁內容高度，不過最小值是 clientHeight。也就是說網頁內容實際高度小于 clientHeight 時，scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
網頁尺寸offsetHeight
offsetHeight和offsetWidth，獲取網頁內容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動條 + 邊框。
二、瀏覽器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
網頁卷去的距離與偏移量
scrollLeft:設置或獲取位于給定對象左邊界與窗口中目前可見內容的最左端之間的距離 ，即左邊灰色的內容。
scrollTop:設置或獲取位于對象最頂端與窗口中可見內容的最頂端之間的距離 ，即上邊灰色的內容。
offsetLeft:獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置 。
offsetTop:獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標的計算頂端位置 。
