2016.3.17__ JavaScript基礎_1__第十二天

2016.3.17__ JavaScript基礎_1__第十二天
Javascript基礎

首先說聲抱歉。今日涉及內容難易度不統一，所以很多比較基礎的屬性直接通過思維導圖展示了。

同時需要注意，今日思維導圖中的內容和筆記中並不是一一對應的，請讀者自行對照查看。

對您造成的困擾，萬分抱歉。

今日課程預覽

1. JS 介紹

js(javascript)和java沒有任何關係，只不過名稱看起來有些相同;

netScape-網景公司

這裡可以瞭解一下網景公司的興衰史，同時也可以瞭解第一代瀏覽器的故事，大家可以瞭解一下“瀏覽器大戰”。

首先大家在學習前要明白幾點。

JavaScript 是指令碼語言

JavaScript 是一種輕量級的程式設計語言。

JavaScript 是可插入 HTML 頁面的編程代碼。

JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。

注意：

HTML 中的指令碼必須位於 標籤之間。

指令碼可被放置在 HTML 頁面的 和 部分中。

<script> 標籤

如需在 HTML 頁面中插入 JavaScript，請使用 <script> 標籤。

<script> 和 </script> 會告訴 JavaScript 在何處開始和結束。

JS的組成：（此處請參考思維導圖中內容）

ECMAScript 文件物件模型（DOM） 瀏覽器物件模型（BOM）

JS的特點：

弱類型的變數類型 事件驅動 跨平台

那我們學習 JS 能夠做什嗎？

寫入 HTML 輸出 對事件作出反應 改變 HTML 內容 改變 HTML 映像 改變 HTML 樣式 驗證輸入2. JS事件和函數的使用

通常，我們需要在某個事件發生時執行代碼，比如當使用者點擊按鈕時。

如果我們把 JavaScript 代碼放入函數中，就可以在事件發生時調用該函數。

同時我們也可以將

或中的 JavaScript放在 HTML 文檔中，並且我們的放入的指令碼是不限量的。

指令碼可位於 HTML 的

或部分中，或者同時存在於兩個部分中。

通常的做法是把函數放入

部分中，或者放在頁面底部。

這樣就可以把它們安置到同一處位置，不會干擾頁面的內容。

注意：

提示：我們把 JavaScript 放到了頁面代碼的底部，這樣就可以確保在

元素建立之後再執行指令碼。

可以把指令碼儲存到外部檔案中。外部檔案通常包含被多個網頁使用的代碼。

外部 JavaScript 檔案的副檔名是 .js。

如需使用外部檔案，請在 <script> 標籤的 “src” 屬性中設定該 .js 檔案。

<script src="myScript.js"></script>

在

或中引用指令檔都是可以的。

實際運行效果與您在 <script> 標籤中編寫指令碼完全一致。但是需要注意，外部指令碼不能包含 <script> 標籤。

3. JS引入方式3.1 頭部引入（內部）

<script type="text/javascript">//內容部分</script>
例如：
<script type="text/javascript">//警告   alert()語句 添加一條警告    alert('網路錯誤!');</script>
顯示效果如所示：
3.2 頭部引入js檔案（外部）
首先,你需要建立一個目錄檔案夾例如為js,然後再這個檔案夾中建立一個一個尾碼為.js的一個js檔案，
例如叫做index.js;
index.js中：
alert("網路錯誤！");
然後在index.html檔案中引入外部的js檔案來使用；
       <script src="js/index.js" type="text/javascript">   </script>
顯示效果和第一種方式也是一樣：
4. js的變數、js的資料類型
對於接下來要學習的js的變數以及js的資料類型，對有C語言基礎的朋友們來說，是非常簡單的，非常相似！
變數的定義：變數相當於一個容器，是用來儲存資料的。
4.1 變數命名規範：首字母不能是數字 首字母只能是數字或者底線 不能用中文 多個單詞使用駝峰命名法；從第二個單詞開始首字母大寫 要有語義 見名知義 不要使用關鍵字或者保留字，防止和系統重名
    var a = 5;//number  資料類型    var b = 10;    var str = "15";//字串類型（string）    alert(a+b);    alert(a+str);//如果一個number類型加上一個字串類型，則拼接，結果515    var c = a + str;    alert(c);         //+號的功能：1.數學運算 2.字串串連    var d = a - str;  //-號的功能：1.數學運算    alert(d);
總結：
變數：它是一個容器，都以var來定義變數，資料類型是由它的值來決定的，
例如：var a = 5,所以，變數a的資料類型是number；var b = “15”,則b是字串類（string）；
還有一種特殊的情況就是”+”號的作用：
+號的功能：1.數學運算 2.字串串連；這就是為什麼上面代碼中的alert(a+str);
警告的結果為515的原因，另外alert（）語句的作用只是為了驗證結果的，沒有什麼實質性的意義；
4.2 布爾類型 bool
    var bo1 = true;//布爾類型 結果true和false    //typeof()擷取變數的資料類型,(在不知道變數類型的情況下，也可以通過ypeof()擷取)    alert(typeof(bo1));
4.3 拓展 undefined類型
    //如果我們不給某個變數設定值，則為undefined類型；    var color;    alert(typeof color);
4.4 if語句
 //if語句  //判斷語句    == 判斷是否相等， //              > 大於 //              < 小於 //              >= 大於或者等於 //              <= 小於或者等於 //              != 不等於 //              === 全等於;    var a = 5;//number 資料類型    var b = 10;    var c = "5";    if (a == b) {        alert("a等於b");    } else{        alert("a不等於b");    }//== 只考慮值是否成立，不考慮類型，//如果既要考慮值，還得考慮資料類型的話，就用 === 全等於    if (a == c) {        alert("a==c成立");    } else{        alert("a == c不成立");    }
注意：
在js當中，”==” 只考慮值是否成立，不考慮變數的資料類型，
如果既要考慮值，還要考慮資料類型的話，就用 “===” 全等於.
4.5 邏輯運算子
        var a = 5;//number 資料類型    var b = 10;    var c = "5";//字串類型(string)    if (a < b && a == c) {        alert("成立");    }else{        alert("不成立");    }    if (a < b || a > c) {        alert("成立");    } else{        alert("不成立");    }    if (!(a > b)) {        alert("取反成立！");    } else{        alert("取反不成立！");    }
4.6 for 迴圈
 for (var i = 0;i < 10;i++) {     //警告提示框        alert(i);    }
看提示框的提示次數，可知此迴圈的迴圈次數為10次；
這裡C語言當中for迴圈當中已經應該非常熟悉了，此處不再多說。
4.7 JS 擷取對象
    

 

  
我是li1
  
我是li2
  
我是li3
  
我是li4
  
我是li5
  
我是li6
  
我是li7
  
我是li8
  
我是li9
  
我是li10
 
<script type="text/javascript">        var ol = document.getElementById("olist");    //擷取ol有序列表裡所有的span標籤，第一種方式        var spans = ol.getElementsByTagName("span");    //或者使用第二種方式：    var spans = document.querySelectorAll("#ol1 span");    //length 長度 可以通過length求長度    alert(spans.length);    //如果想擷取某單個span標籤對象，可以通過下標來擷取.例如：    //spans[0]  下標從0開始    </script>4.8 JS基礎事件（click、mouseover、mouseout）
例如下面代碼中的案例：設定一個div的屬性為寬為200px、高為200px、顏色為紅色；
     
  
頭部引入js
     <script type="text/javascript">    //  擷取操作的標籤  從文檔裡通過id去擷取標籤    //通常儲存在變數裡面    var btn = document.getElementById("btn");//得到button按鈕    var blockDiv = document.getElementById("div");//得到div標籤    //當點擊button按鈕時    btn.onclick = function(){        //做一次判斷        if (blockDiv.style.display == "none") {            blockDiv.style.display = "block"; //block 屬性 display:block 顯示        } else{            blockDiv.style.display = "none"; //block 屬性 display:none 隱藏        }        //當滑鼠移入按鈕上時 onmouseover        btn.onmouseover = function(){               //改變button上顯示的內容            btn.value = "顯示";                   }        //或者寫這個屬性相容性更強        //btn.onmouseenter = function(){        //  btn.value = "顯示";        //}        //當滑鼠移除時 onmouseout        btn.onmouseout = function(){            btn.value = "隱藏";        }        //或者寫這個屬性相容性更強        //btn.onmouseleave = function(){        //  btn.value = "隱藏";        //}    }     </script>
通過看下代碼實現的效果來驗證一下：
(注意點擊顯示按鈕時，div標籤的顯示與隱藏，以及滑鼠移入和移出按鈕時，按鈕上文字的變化)