HTML學習筆記（JavaScript）NO.4，學習筆記no.4
JavaScript語句向瀏覽器發出命令。語句的作用是告訴瀏覽器該做什麼其中分號，語句之間的分割是分號，注意：分號是可選項，有時候看到不以分號隔開的。
JavaScript是按照編程順序執行的
標識符：
JavaScript標識符必須以字母、底線或貨幣符號開始
JavaScript的關鍵字是不能使用的
JavaScript對大小寫非常敏感
JavaScript會忽略多個空格的情況
JavaScript的變數：
變數是儲存資訊的“容器”如：var x=10；
資料類型
string、number、boolean、array、object、null和未定義
可以通過賦值為null的方式清除變數
var string=“fdjkaf”
var flag=true；
var arr=[];
var arr=new Array();
運算子號：
算數：+,-,*,%,/++,--
賦值運算子:=,+=,-=,*=,/=,%=
字串操作
比較子：==,===(必須滿足類型是相同的),!=,!==(必須滿足類型是不相同的),>,<,>=,<=
邏輯運算子：&&、||、！
條件運算子：a與b的關係 ？ 條件1 ： 條件2；
例子->
<p>i=100,j=10;i+j=?</p>
<p id="sumid"></p>
<button onclick="mysum()">結果</button>
<script>
function mysum(){
var i=100;
var j=10;
var m=i+j
document.getElementById("sumid").innerHTML=m;
}
</script>
條件陳述式if...else和switch和C語言一樣，其中switch語句不要忘了寫break；來進行判斷中斷
for迴圈：
for(var i=0;i<7;i++){
}
還有其他形式：
var i=[1,2,3,4,5,6];
var j;
for(j in i){
遍曆i中的元素
}
while和do...while迴圈和C語言一樣，跳躍陳述式：break、continue、return，JavaScript的函數部分與C也一樣
JavaScript的異常捕獲：
try{
異常代碼塊
}catch(err){
對異常的處理
}
throw可以建立自訂的錯誤，通過throw直接拋出異常，不用catch處理
JavaScript的事件監聽：
onClick 單擊事件
onMouseOver 滑鼠經過事件
onMouseOut 滑鼠移出事件
onChange 常值內容改變事件
onSelect 文字框選中事件
onFocus 游標聚集事件
onBlur 移開游標
onLoad 網頁載入事件
onUnload 關閉網頁事件
JavaScript DOM對象
HTML DOM：當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）
DOM操作HTML：
改變頁面中所有的HTML元素、屬性、CSS樣式和頁面中的所有事件作出反應->改變HTML輸出資料流：絕對不要在文檔載入完成之後使用document.write（）.這會覆蓋前面書寫的文檔
尋找元素：可以通過id找到HTML元素，或者通過標籤名找到HTML元素
改變HTML內容：使用屬性->innerHTML
改變HTML 屬性：使用屬性attribute->document.getelementbyid.屬性 = 新的屬性
DOM EventListener:
方法->
addEventListener();指定元素添加事件控制代碼
removeEventListener();移出方法添加的事件控制代碼
事件流->描述的是在頁面中接收事件的順序
事件冒泡->由最具體的元素接收，然後逐級向上傳播至最不具體的元素的節點(文檔)
事件的捕獲->最不具體的節點先接收事件，而最具體的節點應該是最後接收事件
事件處理：
HTML事件處理->直接添加到HTML結構中
DOM0級事件處理->把一個函數賦值給一個事件處理常式屬性
DOM2級事件處理->addEventListener（“事件名”,“事件處理函數”,“布爾值”）;
其中布爾值的取值有著不同的含義：true事件捕獲，false事件冒泡
removerEventListener();則是一處事件的監聽
如果是IE瀏覽器，則IE事件處理常式：attachEvent detachEvent
事件對象：在出發DOM事件的時候都會產生一個對象
事件對象event（常用）屬性及常用方法
1、type擷取事件類型
2、target擷取事件目標
3、stopProgragation()阻止事件冒泡
4、preventDefault()阻止事件預設行為
JavaScript對象：
JavaScript中的所有事物都是對象：字串，數值，數組，函數等等
每個對象帶有屬性和方法，JavaScript允許自訂對象
自訂對象->
1定義並建立對象執行個體
2使用函數來定義對象，然後建立新的對象執行個體
e.g.1
people = new Object();
people.name = "";
people.age ="";
e.g.2
people = { name:""; age:"";};
e.g.3
function people(name,age){
this.name = name;
this.age = age;
}
temp = new people("xxx",30);
JavaScript的字串對象，有很多對字串操作的方法：如：length(),indexOf(),match（），repelace("原來參數"，"要修改的內容")
大小寫轉換toUpperCase(),toLowerCase()
字串轉換為數組
e.g.
var str2 = "hello,shuai,ge";
var s = str2.split(",");//將str2通過逗號將其分割成為數組
Date對象：日期對象用於處理日期和時間
獲得當日的日期
Array對象也有很多的方法：contact()合并數組
sort()排序 push（）末尾追加元素 reverse()數組元素翻轉
a.sort()預設升序排序
a.sort(function(a,b){
return a-b;//升序排列
})
a.sort(function(a,b){
return b-a;//降序排列
})
Math對象abs(),round(),max(),min()
DOM對象控制HTML
常用方法->
getElementById()
getElementByName()擷取name
getElementByTagName()擷取元素
**（byName和ByTagName擷取的是一個相同名稱標籤的一個數組集合）
getAttribute（）擷取元素屬性
setAttribute（）設定元素屬性
childNodes()訪問子節點
parentNode()訪問父節點
createElement（）建立元素節點
createTextNode（）建立文本節點
insertBefore（）插入節點
removeChild（）刪除節點
offsetHeight網頁尺寸不包含捲軸，其次除了高度還有寬度的相應的設定
scrollHeight網頁尺寸
例子
1.動態插入元素
function addElement(){
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "按鈕"；
body.appendChild（input）;
}
2.擷取網頁的尺寸
var w = document.body.offsetWidth||
document.documentElementWidth;
3.建立節點與插入節點
fuction insertNode(){
var div = document.getElementById("div");
var node = document.getElementById("pid");
var newnode = document.createElement("p");
newnode.innerHTML = "動態建立一個P元素"；
div.insertBefore(newnode,node);
}
JavaScript的瀏覽器對象：
window對象是BOM的核心，window對象指當前的瀏覽器視窗
所有JavaScript全域對象、函數以及變數均自動成為window對象的成員
全域變數是window對象的屬性
全域函數是window對象的方法
甚至HTML DOM的document也是window對象的屬性之一
window對象尺寸->window.innerHeight瀏覽器的內部高度/寬度，innerWidth
window方法open(),close（）開啟/關閉視窗
JS瀏覽對象-計時器
計時事件->通過使用JavaScript，可以在一個設定的時間間隔之後來執行代碼，而不是在函數被調用之後立即執行，這個稱之為計時事件。
計時的方法->
setInterval()間隔指定的毫秒數不停地執行指定的代碼
clearInterval()方法用於停止上述的方法
setTimeout()暫停指定的毫秒數後執行指定的代碼
clearTimeout()方法用於停止上述的方法
e.g.
var mytime = setInterval(function(){
time();
},delay的時間毫秒級)
function time(){
var d = new Date();
var t = d.toLocalTimeString();
document.getElementById("ptime").innerHTML = t
}
JS瀏覽器對象-History對象
window.history對象包含瀏覽器的曆史url的集合
Histroy方法
back()與在瀏覽器點擊後退按鈕相同
forward（）與在瀏覽器中點擊按鈕向前相同
go（）進入曆史中的某個頁面
Location對象
window.location對象用於擷取當前頁面的地址url，並把瀏覽器重新導向到新的頁面
Location對象的屬性
location->
hostname返回web主機的網域名稱
pathname返回當前頁面的路徑和檔案名稱
port返回web主機的連接埠
protocol返回所使用的web協議
href屬性返回當前頁面的url
assign()方法載入新的文檔
Screen對象->
window.screen對象包含有關使用者螢幕的資訊
screen.availWidth可用的螢幕寬度
screen.availHeight可用的螢幕高度
screen.Height螢幕高度
screen.Width螢幕寬度
通過以上的屬性可以進行很好的螢幕適配的工作
詳解JS的物件導向
e.g.
如何建立類-》
function People(){
}
People.prototype.say = fucntion(){
}
如何繼承-》
fucntion Student(){}
Student.prototype = new People();
JS類的封裝
（fucntion(){
fucntiuon People(){
}
window.People = People;//這樣外界通過window的頂
層來訪問到People對象
}()）
function Person(){
var _this = {};
_this.say = fucntion(){
alert("nihao");
}
return _this;
}
上述代碼的含義：通過方法Person，在其內部首先建立了一個空的_this對象，然後通過fucntion的來定義其對象中的一個方法，最後將建立好的_this對象返回，這樣一個對象就建立好了。
