JavaScript是嵌入到HTML中在瀏覽器中的腳本語言，由瀏覽器介紹執行代碼，不進行預編譯。
使用方式有3種：
1.事件定義式。 例如：<input type="button" onclick="alert('hello');">
2.嵌入式。
<script type="text/javascript" >
function test() {
alert("hello ,world");
}
</script>
3.文件調用式。 例如：<script src=" test.js" type="text/javascript"></script>
註釋：
單行：//
多行：/* */
標識符：規則和Java中變量的命名規則一樣。
變量沒有類型，統一用關鍵字var聲明，變量所引用的數據是由類型的。
數據類型：
一：特殊類型。（null，underfined）
二：內置對象。（Number，String ，Boolean，Function，Array，Math，Date，RegExp）
三：外部對象。（window，document）
四：自定義對象。（Object：自定義對象）
數據類型轉換函數：
toString()；
parseInt()；
parseFloat()；
typeof()；
isNaN(is not a number？)
使用Function對象創建函數：
var functionName = new Function(arg1,arg2,...,functionBody);
匿名函數：var func = function(arg1,arg2,..........) {functionBody}
常用的全局函數：parseInt/parseFloat isNaN eval
其中eval函數用於計算表達式字符串，或者用於執行字符串中的JavaScript代碼。
例如：var s1 = "1+2"; eval(s1)得到3
外部對象：
window對象：表示瀏覽器窗口。所有的JavaScript全局對象，函數，變量均自動成爲window對象的成員。
常用的屬性有：document，history，location，screen，navigator
常用方法：alert()，confirm()，setTimeout()，clearTimeout()，setInterval()，clearInterval()
其中定時器：分爲週期性定時器，一次性定時器。
週期性定時器：setInterval(exp,time)，返回啓動的定時器對象。 clearInterval(tId)停止啓動的定時器。
<!DOCTYPE html>
<html>
<head>
<title>動態時鐘</title>
<meta charset="utf-8" />
<script type="text/javascript">
var timer;
function start() {
timer = setInterval(function(){
var now = new Date();
var time = now.toLocaleTimeString();
var c = document.getElementById("clock");
c.innerHTML = time;
}, 1000);
}
function stop() {
clearInterval(timer);
}
</script>
</head>
<body>
<h1>動態時鐘</h1>
<p>當前時間：<span id="clock"></span></p>
<p>
<input type="button" value="啓動" onclick="start();"/>
<input type="button" value="停止" onclick="stop();"/>
</p>
</body>
</html>一次性定時器：setTimeout(exp，time) 返回啓動的定時器對象。clearTimeout(tID)停止啓動的定時器對象。
<!DOCTYPE html>
<html>
<head>
<title>動態提示信息</title>
<meta charset="utf-8" />
<style type="text/css">
#msg {
border:1px solid #ccc;
padding:10px;
text-align:center;
width:200px;
background-color: #eee;
}
.hide {
display:none;
}
.show {
display:block;
}
</style>
<script type="text/javascript">
function del() {
var m = document.getElementById("msg");
m.className = "show";
var timer = setTimeout(function(){
m.className = "hide";
clearTimeout(timer);
}, 2000);
}
</script>
</head>
<body>
<h1>動態提示信息</h1>
<p><input type="button" value="刪除" onclick="del();"/></p>
<p id="msg" class="hide">操作成功</p>
</body>
</html<!DOCTYPE html>
<html>
<head>
<title>圖片輪播</title>
<meta charset="utf-8" />
<style type="text/css">
.photo {
list-style-type: none;
border: 2px solid #ccc;
width: 480px;
height: 360px;
margin:0;
padding:0;
}
.photo li {
width: 480px;
height: 360px;
margin: 0;
padding: 0;
}
.show{
display: block;
}
.hide{
display: none;
}
</style>
<script type="text/javascript">
var timer;
var index = 0;
function start() {
timer = setInterval(function(){
var ul = document.getElementById("photo");
var lis = ul.getElementsByTagName("li");
for(var i=0;i<lis.length;i++) {
lis[i].className = "hide";
}
index++;
lis[index%lis.length].className = "show";
}, 1000);
}
function stop() {
clearInterval(timer);
}
</script>
</head>
<body onload="start();">
<h1>圖片輪播</h1>
<ul class="photo" id="photo"
onmouseover="stop();" onmouseout="start();">
<li class="show">
<img src="../images/f1.jpg">
</li>
<li class="hide">
<img src="../images/f2.jpg">
</li>
<li class="hide">
<img src="../images/f3.jpg">
</li>
<li class="hide">
<img src="../images/f4.jpg">
</li>
</ul>
</body>
</html>screen 對象：
常用屬性：width、height、availWidth、availHeight
history對象：
屬性：length
常用方法：back() ，forward()，go(num)
location對象：
屬性：href
方法：reload()
navigator：
常用屬性：獲取客戶端瀏覽器和操作系統信息，navigator.userAgent
DOM：
DOM(Document Object Model)提供了以下操作：
1、查找節點
2、讀取節點信息
3、修改節點信息
4、創建節點信息
5、刪除節點
節點信息：
nodeName：節點名稱（元素節點和屬性節點：標籤或者屬性名稱，文本節點：#text，文檔節點：#document）
nodeType：節點類型（元素節點 ：1 屬性節點：2 文本節點：3 註釋節點：8 文檔節點 9）
獲取節點的內容：
innerText
innerHTML
節點屬性：
getAttribute()：根據屬性名稱獲取屬性的值。
setAttribute()、removeAttribute()
元素節點的樣式：
style屬性：（node.style.color node.style.fontSize）
className屬性
查詢節點：
通過id查詢：document.getElementById()
通過層次（節點關係）查詢：parentNode，childNodes
通過標籤名稱查詢：getElementByTagName()返回一個節點列表length,【index】具體的元素
通過name的屬性查詢：