JavaScript的組成

完整的JavaScript是由ECMAScript(語法)、Browser Objects(DOM、BOM)（特性）組成的。

在HTML中使用JavaScript

可以在head或body中使用<script>嵌入javascript指令碼

什麼是變數

ECMAScript的變數是鬆散型別

鬆散型別：可以用來儲存任何型別的資料

變數的宣告和賦值

1、變數的宣告：

變數的宣告要使用var操作符

語法：var變數名

2、變數賦值

宣告的同時賦值：var變數名=值

先聲明後賦值：變數名=值

說明：省略var宣告的變數是全域性變數

JavaScript的資料型別

ECMAScript:簡單資料型別，也稱基本資料型別{Undefined,Null;Boolean;Number;String};ECMAScript6新增了symbol資料型別；複雜資料型別：Object

typeof

功能：檢測變數型別

語法：typeof變數或typeof(變數)

返回值：string型別，有可能是string、number、boolean、object、undefined、function

undefined

-undefined型別只有一個值，即特殊undefin

null

1、null值表示一個空指標

2、如果定義的變數準備在將來用於儲存物件，那麼最好將改變數初始化為null而不是其他值

說明：undefined值是派生自null值的，所以undefined==null的返回結果是true

Number

-Number:表示整數和浮點數

-NaN:即非數值（Not a Number）是一個特殊的數值

說明：1、任何涉及NaN的操作（例如NaN/10）都會返回NaN.

2、NaN與任何值都不相等，包括NaN本身

3、所有涉及算術運算都返回Number型別

isNaN()

-語法：isNaN(n)

-功能：檢測n是否是“非數值”

-返回值:boolean

-引數：引數n可以是任何型別

說明：isNaN()對接收的數值，先嚐試轉換為數值，再檢測是否為非數值。

數值轉換

-有三個函式可以把非數值轉換為數值

Number(),parseInt(),parseFloat()

說明：

1、Number()可以用於任何資料型別。

2、parseInt()parseFloat()則專門用於把字串轉換成數值。

parseInt()

parseInt()：會忽略字串前面的空格，直至找到第一個非空格字元。

說明：

1、parseInt():轉換空字串返回NaN.

2、parseInt():這個函式提供第二個引數：轉換時使用的基數（即多少進位制）

parseFloat()

parseFloat:從第一個字元開始解析每個字元，直至遇見一個無效的浮點數字符為止

說明：

除了第一個小數點有效外，parseFloat(0與parseInt()的第二個區別在於它始終都會忽略前導的零。····　　　　················

string

string型別用於表示由零或多個16位Unicode字元組成的字元序列，即字串。字串可以由雙引號（“）或者單引號（'）表示

toString()與String()

語法：str.toString()

功能：將str轉換成字串

返回值：str的一個副本

引數：str是要轉換的內容，可以是數值、布林值、物件和字串。

說明：在不知道要轉換的值是不是null或者undefined的情況下，還可以使用String()函式，他能夠將任何的值轉換為字串

Boolean

用於表示真假的型別，即true表示真，false表示假

型別轉換

1、除0之外的所有數字，轉換為布林型都為true

2、除”“之外的所有字元，轉換為布林型都為true

3、null和undefined轉換為布林型為false

邏輯操作符

邏輯操作符：

&& 與 || :或 !:非

邏輯與

&&與（只有一個條件不成立，返回false）

說明：在有一個運算元不是布林值的情況，邏輯與操作就不一定返回值，此時他遵循下列規則：

1、如果第一個運算元隱式轉換後為true,則返回第二個運算元

2、如果第一個運算元隱式轉換後為false,則返回第一個運算元

邏輯或

||（只要一個條件成立，返回true）；

說明：在有一個運算元不是布林值的情況，邏輯與操作就不一定返回值，此時他遵循下列規則：

1、如果第一個運算元隱式轉換後為true,則返回第一個運算元

2、如果第一個運算元隱式轉換後為false,則返回第二個運算元

3、如果兩個運算元是null,則返回null

4、如果兩個運算元是NaN,則返回NaN

5、如果兩個運算元是undefined,則返回undefined

邏輯非

！非

說明：

1、無論運算元是什麼資料型別，邏輯非都會返回一個布林值

2、！！同時使用兩個邏輯非操作符時：

-第一個邏輯非操作基於無論什麼運算元返回一個布林值

-第二個邏輯非則對該布林值求反

比較操作符

==：想等，只比較是否想等

===:相等，比較值的同時比較資料型別是否想等

！=：不想等，比較值是否不想等

！==：不想等，比較值的同時比較資料型別是否不想等

三元操作符

語法：

條件？執行程式碼1：執行程式碼2

說明：可代替簡單的if語句，如果條件成立，執行程式碼1，否則執行程式碼2

函式的定義

函式使用function宣告，後跟一組引數以及函式體，語法如下：

function functionName([arg0,arg1,...argn]){
　　staatements
}

說明：

1、functionName是要定義的函式名，屬於識別符號

2、[]中的arg0,arg1,...argn為函式的引數

3、[]說明裡面的內容不是必須的,他不是語法

函式的呼叫

語法:

函式名([arg1,arg2,...argn])

函式的返回值

任何函式通過return語句,後面跟著返回值來實現返回值

說明:

1、函式會在執行完return語句之後停止並立即退出

2、return語句也可以不帶任何返回值,用於提前停止函式執行又不需要返回值的情況.

JavaScript中的引數

ECMAScript中的引數在內部用一個數組來表示

在函式體內通過arguments物件訪問這個陣列引數.

說明:

1、arguments物件只是與陣列類似,並不是Array的例項.

2、[]語法訪問它的每一個元素.

3、length屬性確定傳遞引數的個數.

JS物件之陣列

建立陣列的基本方式有兩種:

1、使用Array建構函式

語法:new Array()

小括號()說明:

(1)預先知道陣列要儲存的專案數量

(2)向Array建構函式中傳遞陣列應包含的項

2、使用陣列字面量表示法

由一對包含陣列項的方括號[]表示,多個數組項之間以逗號隔開.

var a = new Array(2);
       a[0] = 1;
       a[1] = "ni";
       var nums = new Array(1,3,6,9);
       var cols = ["red","yellow","green"];
       var infos = [6,"marry",true];

陣列元素的讀寫

讀取和設定值時,使用方括號[]並提供相應的索引

說明:索引是從0開始的正整數

陣列長度:array.lenght

說明;

1、通過設定lenght可以從陣列的末尾移除項或向陣列中新增新項.

2、把一個值放在超出當前陣列大小的位置上時,會重新計算陣列長度值,長度值等於最後一項索引加1

push()

語法:arrayObject.push(newele1,newele2,...,neweX)

功能:把他的引數順序新增到arrayObject的尾部

返回值:

把指定的值新增到陣列的新長度

unshift()

在前面新增

shift()

語法:arrayObject.shift()

功能:

刪除 arrayObject中的第一個元素

返回值:

被刪除的那個元素

pop()

功能:刪除arrayObject中最後一個元素

join()

語法:

arrayObject.join(separator)

功能:

用於把陣列中的所有元素放入一個字串

返回值:

字串

reverse()

語法:stringObject.reverse()

功能:用於顛倒陣列中元素的順序

返回值:陣列

sort()

語法;

arrayObject.sort(sortby)

功能:

用於對陣列的元素進行排序.

返回值:陣列

說明:

1、即使陣列中的每一項都是數值,sort()方法比較的也是字串.

2、sort()方法可以接受一個比較函式作為引數

 var arr = [9,-1,-2,10,85,98,45,-25,56]
 document.write(arr.sort(function (a,b){return a-b}));

concat()

語法:

arrayObject.concat(arrayX,arrayX,......,arrayX)

功能:

用於連線兩個或者多個數組

返回值:

陣列

slice()

語法:

arrayObject.slice(start,end)

功能:

從已有的陣列中返回選定的元素

引數:

start(必需)規定從何處選取,如果是負數,從陣列尾部開始算起

end(可選)規定從何處結束選取,是陣列片段結束處的陣列下標

說明:

1、如果沒有end,切分的陣列從start到陣列結束的所有元素.

2、如slice()方法的引數中有一個負數,則用陣列長度加上該數來確定相應的位置

返回值:陣列

刪除

語法:

arrayObject.splice(index,count)

功能:

刪除從index處開始的零個或多個元素

返回值:

含有被刪除的元素的陣列

插入和替換

語法:arrayObject.splice(index,count,item1,.....,itemX)

功能:

在指定位置插入值

引數:

index:起始位置

count:要刪除的項數

item1...itemX:要插入的項

返回值:從原始陣列中刪除的項(如果沒有刪除任何項,則返回空陣列)

indexOf()

語法:

arrayObject.indexOf(searchvalue,startIndex)

功能:從陣列的開頭(位置0)開始後查詢.

返回值:

引數:searchvalue:必需,要查詢的項

startIndex:可選,起點位置的索引.

返回值:

number,查詢的項在陣列中的位置,沒有找到的情況下返回-1

說明:

1、在比較第一引數與陣列中的每一項時,會使用全等操作符,即要求查詢的項必須嚴格想等.

2、陣列的位置的方法是ECMAScript5為陣列例項新增的,所以支援的瀏覽器

JS物件之String

charAt()與charCodeAt()

語法:stringObject.charAt(index)

功能:返回stringObject中index位置的字元

說明:ECMAScript5中可使用"方括號加字元索引"來訪問字串中特定的字元,但是IE7及更早的瀏覽器會返回undefined

indexOf()

語法:stringObjectOf("o")

功能:從一個字串中搜索給定的子字串,返回字串的位置.

返回值:數值.

說明:如果沒有好到該字串,則返回-1.

lastIndexOf()

語法:stringObject.lastIndexOf("o")

功能:從右邊搜尋,從一個字串中搜索給定的字串,返回字串的位置.

返回值;數值.

說明:如果沒有找到該字串,則返回-1.

slice()

語法:stringObject.slice(start,end)

功能:擷取子字串.

引數說明;

1、start:必須,指定子字串的開始位置.

2、end:可選,表示子字串到那裡結束,end本身不在擷取範圍之內,省略時擷取至字串的末尾

3、引數為負數時,其值為字串長度+該負數

substring()

說明:語法及功能同slice()完全一樣

區別在於:1、當引數為負數時,自動將引數轉換為0.

2、substring()會將較小的數作為開始位置,將較大的數作為結束位置

substr()

語法:stringObject.substr(start,len)

功能:擷取字串.

引數說明:1、start:必須,指定子字串的開始位置

2、len:可選,表示擷取的字元總數,省略時擷取至字串的末尾

3、當start為負數時,會將傳入的賦值與字串的長度相加.

4、當len為負數時,返回空字串

split()

語法:stringObject.split(separator)

功能:把一個字串分割成字串陣列

返回值:Array

說明:separator:必須,分隔符

replace()

語法:stringObject.replace(regexp/substr,replacement)

功能:在字串中用一些字元替換另一些字元,或替換一個與正則表示式匹配的字串

返回值:String

引數:regexp:必須.規定子字串或要替換的模式的RegExp物件

replacement:必須.一個字串值

不會改變原來字元物件的值

toUpperCase()與toLowerCase()

語法:stringObject.toUpperCase()

功能:把字串轉換為大寫.

語法:stringObject.toLowerCase()

功能:把字串轉換為小寫.

JavaScript DOM基礎

DOM查詢方法

語法:document.getElementById("id")

功能:返回對擁有指定ID的第一個物件的引用

返回值:DOM物件

說明:id為DOM元素上id屬性的值

語法:document.getElementsByTagName("tag")

功能:返回一個對所有tag標籤引用的集合

返回值:陣列

說明:tag為要獲取標籤的名稱

設定元素樣式

語法:ele.style.styleName =styleValue

功能:設定ele元素的CSS樣式

說明:

1、ele為要設定樣式的DOM物件

2、styleName為要設定的樣式名稱

3、styleValue為要設定的樣式值(要用雙引號,使用駝峰形勢)

innerHTML

語法:ele.innerHTML

功能:返回ele元素開始和結束標籤之間的HTML

語法:ele.innerHTML = "html"

功能:設定ele元素開始和結束標籤之間的HTML內容為html

說明:innerHTML:獲取和設定標籤之間的文字和html內容

className

語法:ele.className

功能:返回ele元素的class屬性

說明:如果有兩個以上的class值,則全部返回

語法:ele.className = "cls"

功能:設定ele元素的class屬性為cls(替換原先的class屬性值)

獲取屬性

語法:ele.getAttribute("attribute")

功能:獲取ele元素的arrribute屬性

說明1、ele是要操作的dom物件

2、attribute是要獲取的html屬性(如:id、tpye)

設定屬性

語法:ele.setAttribute("attribute,value")

功能:在ele元素上設定屬性

說明:

1、ele是要操作的dom物件

2、attribute為要設定的屬性名稱

3、value為設定的attribute屬性的值

刪除屬性

與暗訪:ele.removeAttribute("attribute")

功能:刪除ele上的attribute屬性

說明:

1、ele是要操作的dom物件

2、attribute是要刪除的屬性名稱

HTML事件

語法：<tag 事件 = “執行指令碼”> </tag?

功能：在HTML元素上繫結事件

說明：執行指令碼可以是一個函式的呼叫

滑鼠事件

-onload：頁面載入時觸發

-onclick:滑鼠點選時觸發

-onmouseover:滑鼠滑過時觸發

-onmouseout;滑鼠離開時觸發

-onfoucs:獲得焦點時觸發

-onblur:失去焦點時觸發

-onchange:域的內容改變時發生

-onsubmit:表單中的確認按鈕被點選時發生

-onmousedown:滑鼠按鈕在元素上按下時觸發

-onmousemove:滑鼠指標移動時發生

-onmouseup:在元素上鬆開滑鼠按鈕時觸發

-onresize:在調整瀏覽器視窗的大小時觸發

-onscroll:拖動滾動條滾動時觸發

HTML事件

語法:<tag 事件="執行指令碼"></tag>

功能:在HTML元素上繫結事件

說明:執行指令碼可以是一個函式的呼叫

<!--事件繫結第一種方式-->
<input type="button" value="彈出" onclick="a()">
<script>
    function a(){
        alert("哈哈");
    }
</script>

<!--第二種方式-->
<div class="btn" onmouseover="f1(this,'red')" onmouseout="f2(this,'black')">按鈕</div>
<script>
    function f1(btn,bc) {
        btn.style.background = bc;
}
</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> f2(btn,bc) {
   btn.style.background </span>=<span style="color: #000000;"> bc ;
}</span></pre>

DOM0級事件

語法:ele.事件 = 執行指令碼

功能:在DOM物件上繫結事件

說明;執行指令碼可以是一個匿名函式,也可以是一個函式的呼叫

頁面載入時觸發

<script>
        window.onload=function () {
            var box = document.getElementById("box");
            var clicekd = function () {
                alert("我被點選了");
            }
            box.onclick = clicekd;
        }
    </script>