Javascript基礎知識（一）核心基礎語法與事件模型_基礎知識

一.Javascript核心基礎語法

1.Javascript是一門增加互動效果的程式語言，它最初由網景公司發明，最後提交給ECMA（歐洲電腦製造商協會),ECMA將Javascript標準化，其命名為Javascript。

2.Javascript是一門解釋性語言，無需編譯就可以直接在瀏覽器下運作。

3.Javascript的用途？

 1.可以控制網頁中所有元素，增加.刪除.修改元素的屬性。

 2.可以在html中放入動態文字。

 3.回應使用者在使用網頁時所產生的事件。

 4.校驗使用者輸入的資料。

 5.偵測使用者的瀏覽器。

 6.用於建立cookie。

4.Javascript在html網頁中建立的三種方式

1.外部樣式：

建立一個檔案名稱：xx.js的檔案透過或直接使用<script></script>載入

3.內嵌樣式：

直接在標籤中加入事件:載入

5.Javascript的資料型態：

它的資料型別有兩大類：1.原始性資料型別2.引用性資料型態（物件）

原始性資料型態：1.typeof 2.number 3.string 4.boolean 5.null 6.undefined

引用性資料型別：(預先定義的物件有三種)1.原生物件（Object,number,string,boolean,function,Array,Date等）2.內建物件：不需要顯示初始化（math，Global） 3.宿主對象(主要有BOM和DOM)

6.BOM和DOM

BOM:瀏覽器物件模型Browser Object Model

DOM:文檔物件模型Document Object Model

二.Javascript的事件模型

1.Javascript事件模型：1.冒泡類型: 當使用者點擊按鈕時：input-body-html-document-window（從下往上冒泡）IE瀏覽器只是用冒泡

    2.擷取類型: 當使用者點選按鈕時：window-document-html-body-input （從上往下）

經過ECMA標準化後，其他瀏覽器都支援兩種類型，捕獲先發生。

2.傳統事件書寫的三種方式：

1.

2.======<script>function name1(){alert('helloword!');}</script> //有名函數

3.  //匿名函式

複製程式碼 程式碼如下:

<script><br />  Var button1=document.getElementById("input1");<br />  button1.onclick=funtion(){<br />  alert('helloword!')<br />  }<br /> </script>

3.現代事件書寫方式：

複製程式碼 程式碼如下:

  //IE中新增事件
<script><br />  var fnclick(){<br />  alert("我被點擊了")<br />  }<br />  var Oinput=document.getElementById("input1");<br />  Oinput.attachEvent("onclick",fnclick);<br />  --------------------------------------<br />  Oinput.detachEvent("onclick",fnclick);//IE中刪除事件<br /> </script>
  //DOM中新增事件
<script><br />  var fnclick(){<br />  alert("我被點擊了")<br />  }<br />  var Oinput=document.getElementById("input1");<br />  Oinput.addEventListener("onclick",fnclick,true);<br />  --------------------------------------<br />  Oinput.removeEventListener("onclick",fnclick);//DOM中刪除事件<br /> </script>
//相容IE和DOM新增事件
<script><br />  var fnclick1=function(){alert("我被點擊了")}<br />  var fnclick2=function(){alert("我被點擊了")}<br />  var Oinput=document.getElementById("input1");<br />  if(document.attachEvent){<br />  Oinput.attachEvent("onclick",fnclick1)<br />  Oinput.attachEvent("onclick",fnclick2)<br />  }<br />  else(document.addEventListener){<br />  Oinput.addEventListener("click",fnclick1,true)<br />  Oinput.addEventListener("click",fnclick2,true)<br />  }<br /> </script>