JS入門
在前端這片領域裏，JavaScript是舉足輕重的。JS是事件驅動且面向對象的一種腳本語言，靈活地操控HTML,CSS以及瀏覽器，同時實現各種編程任務，可以說前端就是JS的天下。下面我們討論一下幾個基礎性問題
l 要點1：引入JS方式
這件事情看似簡單，其實是很有講究的，用哪種方式引入，在什麼地方引入，絕不能隨便。
引入方式：【是否需要創建函數】
[1]行內式：<p onClick="JavaScript:alert('Hello');">ClickHere</p>
[2]嵌入式：
不創建函數[頁面加載時就調用]
<script language="JavaScript"type="text/JavaScript">
alert("Hello");
</script>
創建函數[觸發事件後調用]
<script language="JavaScript"type="text/JavaScript">
function msg(){
alert("Hello");
}
</script>
[3]鏈接式
<script language="JavaScript"type="text/javascript" src="my.js"></scritp>
引入位置：【頁面是從上到下加載，避免操縱空節點】
放入<head>中 VS 放入<body>中
l 要點二：事件綁定觸發的方式
事件具體如何觸發，這個是看怎麼方便怎麼弄，都可以實現同樣的功能。
[1]事件處理函數
“HTML標記事件處理程序”[即調用自定義函數，或行內書寫代碼]
<ponclick="alert("Hello");">Click me</p>
“以屬性的形式出現的事件監聽程序”
<scripttype="text/javascript">
window.onload=function(){
varop=document.getElementById("myP");
op.onclick=function(){
alert("Hello");
}
}
</script>
<p id="myP">ClickMe</p>
[2]通用事件監聽程序
“IE中用attachEvent()和detachEvent()”
<script type="text/javascript">
functionmyClick1(){
alert("Hello,Iam myClick1");
oP.detachEvent("onclick",myClick1);
}
functionmyClick2(){
alert("Hello,I am myClick2");
}
window.onload=function(){
oP=document.getElementById("myP");
oP.attachEvent("onclick",myClick1);
oP.attachEvent("onclick",myClick2);
}
</script>
“DOM中用addEventListener()和removeEventLister()”
只需要在上面例子中換掉那兩個函數就可以啦
l 要點三：數據類型與運算符
弱數據類型，數據類型都視爲對象，有一系列屬性和方法，如String，number，boolean，array
簡單說一下數組的創建方式：
var arr=new Array();
var Map=newArray("China","USA");
varMap=["China","USA"];
運算符有很多，這裏介紹幾個常用的
[1]判等
“==”數值是否相等
“===”數值和類型是否全等
[2] “in”判斷某個屬性是否存在於某個對象中
function msg(){
var obj={title:"Name",author:"Tang"}
alert("title" in obj);
}
[3]“instanceof”判斷某個對象是否爲某個類的實例
function msg(){
var d=new Date();
alert(d instanceof Date);
}
[4] “typeof”返回某個對象的數據類型
function msg(){
var a="abc";
alert(typeof a);
}
[5] “delete”刪除變量或其屬性，系統變量和var聲明的變量不能刪除
y=4;
delete y;
[6]“new”創建一個對象的實例
l 要點4：函數與對象
[1]函數：可重用的代碼段function fName(arg1,arg2){}，可見函數參數無類型，甚至可以不指定，調用時直接應用。若有返回值，直接用return即可。用arguments內置數組對象可以訪問函數的參數列表，arguments.length返回其長度
[2]對象：
(1)瀏覽器對象BOM:window[alert()、confirm()、prompt()]、location、history、navigator、document、screen]
(2)JS內置對象：Date、Math、Array、String等
(3)自定義對象：var myObj=new Object();
下面對對象的幾個常用方法舉例：
window對象的定時操作函數
週期性執行：window.setInterval()與clearInterval()
延時後執行：window.setTimeout()與clearTimeout()，可以結合遞歸
<headlang="en">
<meta charset="UTF-8">
<title>mytest page</title>
<script type="text/javascript"src="js/my.js"></script>
<style type="text/css">
#main{
width: 720px;
margin: 0 auto;
text-align: left;
margin-top: 30px;
}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function dispTime(){
$("clock").innerHTML="<b>"+(newDate()).toLocaleDateString()+"</b>";
}
function init(){
dispTime();
window.setTimeout(init(),1000);
}
</script>
</head>
<body onload="init()">
<div id="clock"></div>
</body>
用另一個函數只需要將
window.setTimeout(init(),1000);改爲window.setInterval(dispTime,1000);
location對象的頁面鏈接改變與回退
可回退方式用的是屬性：location.href="http://www.baidu.com";
不可回退方式用方法：location.replace(http://www.baidu.com);
history主要用來控制瀏覽器的後退和前進，但是不能獲取到URL
l 要點5：DOM操作
DOM模型中操作每一個節點node都有一系列屬性和方法
訪問指定節點
方式一：getElementById(),getElementsByName(),getElementsByTagName()
方式二：通過document的forms[elements屬性],images等集合屬性訪問name，注意用下標確定具體的某一個
訪問相關節點
通過已知節點的屬性可以訪問相關節點：documentElement,firstChild,lastChild,childNodes，parentNode，previousSibling,nextSibling等
檢查節點類型
元素節點【nodeType=1】，屬性節點【2】，文本節點【3】,注意屬性節點和文本節點是兄弟節點，同屬於元素節點的子節點
創建節點
常用方法：createElement(),createTextNode(),cloneNdoe()
操作節點
常用方法：appendChild(),insertBefore(),removeChild(),replaceChild()
實用方法：innerHTML屬性
操作節點屬性
getAttribute()【有時候用"元素名.屬性名"更直接，如“myImg.src”】
setAttribute()【同上】
removeAttribute()
訪問和修改CSS樣式
通過style對象：如oP.style.color="red";【注：font-size等應寫成style.fontSize等】