javascript入門講解筆記

Javascript
是由網景公司開發，並且由瀏覽器解釋執行的一種腳本語言，並且需要嵌入到html文件中。
2.主要作用
a.數據驗證（只有頁面數據驗證通過，才能提交表單到服務器）
b.實現html動態效果
c.獲取瀏覽器的一些信息
d.ajax核心技術之一

3.javascript特點
（1）是類似C語言
（2）可以寫在 html文件中，也可以寫在.js爲後綴的文件中
（3）是基於面向對象，但不是純粹的面向對象
沒有類的繼承 多態
（4）javascript是一種弱類型語言，在聲明變量時不能確定變量的類型，只有在運行時才能確定變量的具體類型。
4.javascript的組成部分
（1）ECMAsript
它主要定義了javascript的基本語法
各個瀏覽器都必須遵守該規範
是由ECMA規定
（2）dom
它把瀏覽器中的script解析成一棵dom樹，部分瀏覽器沒有遵守該規範，編寫時需要考慮兼容性問題。
（3）bom
瀏覽器中的內置對象，用來操作窗口。
比如：window location screen
 var 聲明變量
alert 彈出對話框
5基本語法
基本類型
（1） number 數值類型
（2）string
（3）boolean
（4）undefined
（5）null
邊編譯邊執行
false，0，null，不寫結果是false

for(i=0;i<atr1.length;i++){
for(j=0;j<atr[i].length;j++){
alert(atr1[i][j]);
}
}

引用類型
數組 var atr=new Array();
var atr=['1',123];
數組中常用的方法：
atr.contact(atr1);
atr.join(' ');
函數
DOM
dom(document object model)文檔對象模型
如何將結構化的文檔（比如html xml）轉換成一個符合dom的樹，
並且定義了操作這棵樹的方法和屬性

（1）查找
通過id查找
var obj=document.getElementById('id');
可以通過obj.innerHTML獲取該節點的html，也可以去修改該節點的html
可以通過obj.value獲取obj的value值，也可以去修改obj的value值


dom操作
1.查找
（1）通過id查找
document.getElementById('b1');
（2）通過標記名字查找
document.getElementByTagName('name');
2.創建節點
document.createElement('name');
3.插入節點
（1）插入該節點中所有子節點的後面
bo.appendChild(di);
（2）在某個節點前插入節點
bod.insertBefore(div,but);
but是bod標記中的子標記（舊）


4.替換節點
bo.replaceChild（newChild，refChild）；
5.刪除節點
bo.removeChild(obj);

6.樣式操作
方式一
修改style的屬性
注意：
必須是內聯樣式
如果樣式的屬性中包含“-”，先把“-”去掉，然後把“-”後的第一個單詞大寫

方式二
修改class屬性
className='s1'
比如：obj.className='s1';
7.如何禁止瀏覽器的默認提交行爲
鏈接中，瀏覽器會默認項href中地址發送請求
表單中 點擊

8.引入外部文件
把所有的javascript代碼放在.js爲後綴的文件中
然後
<script src="my.js">

框架的使用：
$(id)  相當於document.getElementById("");
$F(id)  相當於document.getElementById("").value;
$(id1,id2),一次根據id1,id2查找相應節點，返回
trip 去掉字符串兩端的空格
練習
1.通過鏈接添加節點
2.寫表單驗證
用戶名
密碼（6位數字）
確認密碼
身份證驗證碼


html dom*
html dom是在w3c規範dom之前定義的瀏覽器支持的一些dom操作
1）
select 對象
selectedIndex是指選擇下拉列表框的選項的索引
length 下拉列表框的長度
options 返回數組，是下拉列表框中的所有選項
2）option對象
text 是指option的文本
value是指選項的值
selected 當該選項被選中時值爲true，否則爲false
知識點;動態創建一個選項
var op=new Option(text,value);
3）table
屬性：
tHead 返回表格中的head節點
tFoot 返回表格中的foot點
tBodies返回表格中的body節點
rows 返回表格中的所有行
cells 返回所有列，數組
方法
insertRow(index) 向表格中的index位置插入一行，返回的是tr
deleteRow(index)刪除表格中的某一行
4）TableRow 表格中的一行
 insertCell(index) 向指定位置插入一個單元格，返回的是單元格對象
deleteCell(index)刪除該行指定位置的單元格
5）TableCell
代表的是一個單元格
bom瀏覽器內置的一些對象
主要有：
window
1.document屬性
2.open('test.html','newhtml','width=300','height=400');
3.location屬性
4.opener屬性
5.parent屬性
6.confirm()方法
7.prompt()方法
8.setInterval(f2,500)方法
9.clearInterval(tax) 方法
事件機制：
1)什麼是事件
第一種情況：用戶對網頁做了某些操作，比如按鈕點擊事件
第二種情況：用戶沒有對網頁做任何操作，也可能產生事件，
瀏覽器會加載整個網頁，加載完成會產生加載完成事件，當事件產生後，
會去找產生事件的相應節點是否綁定相應的事件處理代碼，如果有則執行，
如果沒有，則查找相應父節點是否綁定的事件代碼（事件冒泡）
事件添加：
1）在html中添加事件
<a href="javascript:;" οnclick="f1();">獲取屬性</a>
2）在dom添加事件
<a id="a1" href="javascript:;">獲取屬性</a>
<script type="text/javascript">
var obj=document.getElementById("a1");
obj.οnclick=f1;
function f1(){

}
</script>
注意：f1後面不能加小括號。加小括號代表立即執行。
3)匿名函數
匿名函數
obj.οnclick=function(){

}
匿名函數傳遞參數
obj.οnclick=function(){
 f1(msg);
}

在dom上綁定事件可以使js和html完全分離，方便代碼維護。
window.οnlοad=function(){}整個頁面加載完成以後執行匿名函數。
function f1(){
window.οnlοad=f1;整個頁面加載完成以後執行f1函數。

}
3.事件對象
1）獲得事件對象
IE瀏覽器中可以他通過event獲取
firefox需要在方法中傳遞event參數才能獲取
建議：爲了是IE和Firefox都通用，調用函數傳遞event參數
2）事件對象的作用
a、可以獲取鼠標點擊的座標
clientX
clientY
b、獲得事件源（產生事件的對象）
IE：e.target
firefox:e.srcElement
建議（Firefox和IE都可以）
var obj=e.target||e.srcElement

4）時間冒泡
a、什麼是事件冒泡
當一個節點事件完成以後，該事件會依次向上傳遞（傳遞給父節點，
如果父節點還有父節點，則再向上傳遞）
b、如何禁止事件冒泡
e.cancelBubble=true;
js面向對象基礎
1）定義
js和java不同，沒有定義類型的專門語法，但js可以用函數定義類型。
2）如何創建對象
a 用new關鍵字
var p=new Person('zs',25);
b 通過json創建對象
var p1={"name":"zs","age":22}

注意：如果屬性值是字符串，必須用引號引    起來,不是字符串不用。
值可以是number string null boolean
3）通過object創建對象
var p=new Object();
p.name="zs";
p.age=22;
因爲js是一種動態語言，可以在暈吧形式，對對象添加屬性。