JavaScript入門筆記（一）

標籤：否則   入門   ati   ons   寫入內容   模型   重設   set   img   

JavaScipt

• 2.1 javascript的組成部分

  ECMAScript: 它是整個 javascript 的核心，包含(基本文法、變數、關鍵字、保留字、資料類型、語句、函數等等)DOM：文件物件模型，包含(整個 html 頁面的內容)、BOM：瀏覽器物件模型,包含(整個瀏覽器相關內容)

• 步驟（BOM)
• 1. window對象
  1. 第一步: 確定事件(onsubmit)並為其綁定一個函數
  2. 第二步: 書寫這個函數(擷取使用者輸入的資料<需要在指定位置定義一個id>)
  3. 第三步: 對使用者輸入的資料進行判斷
  4. 第四步: 資料合法(讓表單提交)
  5. 第五步: 資料非法(給出錯誤資訊, 不讓表單提交)
  6. 問題：如何控製表單提交？關於事件 onsubmit: 一般用於表單提交的位置, 那麼需要在定義函數的時候給出一個傳回值， onsubmit = return checkForm()
• 步驟分析:

1. 確定事件(onload)並為其綁定一個函數

2. 書寫綁定的這個函數

3. 書寫定時任務(setInterval)

4. 書寫定時任務的函數

5. 通過變數的方式, 進行迴圈 (擷取輪播圖的位置, 並設定src屬性)

6. 進行迴圈: 到最後一張的圖片時候要重設

• 定時操作

1. 在頁面指定位置隱藏一個廣告圖片 (使用display 屬性的 none值)

2. 確定事件(onload)並為其綁定一個函數

3. 書寫這個函數(設定一個顯示圖片的定時操作)

4. 書寫定時器中的函數(擷取廣告圖片的位置並設定屬性style的display值block)

5. 清除顯示圖片的定時操作()

6. 書寫隱藏圖片的定時操作

7. 書寫定時器中的函數(擷取廣告圖片的位置並設定屬性style的display值none)

8. 清楚隱藏圖片的定時操作()

• 代碼實現

  <script type="text/javascript">      function init() {          //書寫輪播圖顯示定時操作          setInterval("changeImg()", 3000);                    //設定顯示廣告圖片的定時操作, time不加 var就是全域變數          time = setInterval("showAd()", 3000);      }      //書寫函數      var i = 0;      function changeImg() {          i++;          //擷取圖片位置，並設定src屬性值          document.getElementById("img1").src = "../img/" + i + ".jpg";          if (i == 3) {              i = 0;          }      }            //2.書寫顯示廣告圖片的函數      function showAd() {          //3.擷取廣告圖片的位置          var adEle = document.getElementById("img2");          //4.修改廣告圖片元素裡的屬性讓其顯示          adEle.style.display = "block"          //5.清除顯示圖片的定時操作          clearInterval();          //設定隱藏圖片的定時操作\n          setInterval("hiddenAd()", 3000);      }            function hiddenAd() {          //8.擷取廣告圖片並設定其style屬性的display值為none          document.getElementById("img2").style.display = "none";          //9. 清除隱藏廣告圖片的定時操作          clearInterval(time);      }  </script>  ?  <body onload="init()">    <img src="../img/gg.jpg" width="100%" style="display: none;" id="img2"/>  </body>

1. Window2. Navigator3. History4. Location四、使用JS完成註冊頁面表單校正

第一步：確定事件 (onfocus 聚焦事件)並為其綁定一個函數

第二步：書寫綁定函數(在輸入框的後面給出提示資訊)

第三步：確定事件(onblur 離焦事件)

第四步：書寫函數(對資料進行校正，分別給出提示)

Javascript簡單介紹

1. 文法

2. 變數：只能用var定義, 如果在函數的內容使用var定義，就是局部變數，否則是全域的

3. 資料類型：未經處理資料類型(undefinded/null/string/number/boolean)

4. 語句：

5. 運算子： == 與 ===的區別

6. 函數：兩種寫法(有命名稱，匿名的)

BOM對象

window: alert(), prompt(), confirm(), setInterval(), clearInterval(), setTimeout(), clearTimecout()

history: go(參數), back(), forward()

location: href屬性

事件:

• onsubmit()此事件寫在form標籤中,必須有傳回值。

• onload() 此事件只能寫一次，且放到body標籤中

• 其他時間放到需要操作的元素位置，(onclick, onfocus, onblur)

擷取元素:

• document.getElementById("Id")

擷取元素裡的值:

• document.getElementById("id").value

向頁面輸出:

• 彈窗: alert();....

• 向瀏覽器中寫入內容： document.write(內容);

• 向頁面指定位置寫入內容: innerHTML

JavaScript入門筆記（一）