javascript

• js是一門腳本語言

  • 直接通過瀏覽器執行的為腳本語言
  • js是輕量級編程語言

• javascript組成

  • ECMAScript語法和基本對象(核心)
  • DOM描述了處理網頁內容的方法接口(文檔對象模型)
  • BOM描述了與瀏覽器進行交互的方法接口(瀏覽器對象模型)

• 變量聲明不是必須的(不一定要寫var)

  • 在方法中帶var，此時該變量為局部變量
  • 在方法中不帶var，此時該變量為成員變量

• 網頁加載完成之后自動調用該函數

<script>
    window.onload = function(){
        //獲取頁面指定位置的元素
        var uEle = document.getElementById("username");
        //alert(uEle);
        //獲取頁面指定位置的內容(值)
        var uValue = uEle.value;
        alert(uValue);
    }
</script>

• 校驗表單用onsubmit,寫在form里
  • omsubmit后接收一個函數的調用,調用的函數有返回值,然后拿到返回值后再return給onsubmit

<form action="#" method="get" onsubmit="return check_form()">
</form>

js基本語法

• ECMAScript:
  • undefined 和 null區別
    • undefined:定義了沒賦值
    • null:沒有定義
  • == 和 ===區別
    • ==:"66"和66是一樣的(嘗試將字符串向number類型轉型)(一般筆試題會出現 )
    • ===:"66"和66是不一樣的
    • js中沒有equals,所有的比較都用==或===
  • 數據類型
    • undefined
    • boolean
    • number
    • string
    • object
    • null

簡單的數據校驗

• 獲取元素:
  • document.getelementbyid('id_name')
• 獲取元素值:
  • document.getelementbyid("id_name").value
  • ==如果id是一個字符串,則加上引號,如果是一個變量,則不需要==
  • 表單提交設置監聽為:onsubmit,如果時普通事件就用onclick
• 輸出:
  • 在制定位置寫內容
    • doculment.getElementById('id_name').innerHTML = 'inner string'
  • 文檔輸出
    • document.write():向頁面中寫內容
  • 彈框
    • alert
• js中比較特殊的事件
  • onsubmit:一般用于表單提交,需要有返回值
    • 函數返回值為false不提交
  • onload:瀏覽器加載完成后調用
• onsubmit="return checkForm()"下載表單form的位置,不是寫在submit按鈕的位置
• onload方法寫在body的屬性中,表示body中的內容加載完成后調用

輪播圖

<!--簡單切換圖片-->
<script type="text/javascript">
    var picNum = 1
    function switchImg() {
        picNum++;
        if (picNum > 3) {
            picNum = 1;
        }
        picSrc = document.getElementById('img1').src = "../../img/"+picNum+".jpg"
    }
</script>

• 自動輪播
  • 在body中通過onload方法在網頁加載完后調用自定義init方法
  • 通過window.setinterval('func()',time)調用函數實現自動輪播

<!--自動輪播-->
<script type="text/javascript">
    var num = 1
    function init() {
        window.setInterval("swithcImgAtuo()",3000)
    }
    function swithcImgAtuo()  {
        num++
        if (num > 3) {
            num = 1
        }
        document.getElementById("img1").src = "../img/"+num+".jpg"
    }
</script>

定時彈出廣告

• onload事件只能綁定一次

<script type="text/javascript">
    function init(){
        //書寫輪圖片顯示的定時操作
        setInterval("changeImg()",3000);
        
        //1.設置顯示廣告圖片的定時操作
        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(time);
        //6.設置隱藏圖片的定時操作
        time = setInterval("hiddenAd()",3000);
    }
    
    //7.書寫隱藏廣告圖片的函數
    function hiddenAd(){
        //8.獲取廣告圖片并設置其style屬性的display值為none
        document.getElementById("img2").style.display= "none";
        //9.清除隱藏廣告圖片的定時操作
        clearInterval(time);
    }
    
</script>

javascript引入方式

• 內部引入:script標簽內書寫
• 外部引入:<script type="text/javascript" src="1.js" ></script>
• 行內引入:

BOM

• window:瀏覽器打開的窗口,需要掌握的方法
  • alert():彈框
  • setInterval():周期性調用函數,返回一個code
  • clearInterval():清楚周期性調用函數
  • setTimeout():在指定的毫秒數后調用函數或者計算表達式
  • clearTimeout():同上
  • confirm():彈出對話框
  • prompt():顯示輸入對話框
• history:用戶在瀏覽器中瀏覽過的url
  • back():上一個url
  • forward():下一個url
  • go():加載history列表中的具體頁面
• location:包含有關當前url的信息
  • href:制定url進行跳轉

表單驗證

• 聚焦事件onfocus
• 失焦事件onblur

js中正則校驗

• 使用String對象中的match方法
• 使用正則對象中的test方法