1. 程式人生 > >javaScript需要掌握的基本知識

javaScript需要掌握的基本知識

一,JavaScript嵌入頁面的方式
1、行間事件(主要用於事件)

<input type="button" name="" onclick="alert('ok!');">

2、頁面script標籤嵌入

<script type="text/javascript">        
    var a = '你好!';
    alert(a);
</script>

3、外部引入

<script type="text/javascript" src="js/index.js"></script>

二,JavaScript語句與註釋與斷點除錯
1、一條javascript語句應該以“;”結尾
2、javascript註釋
// 單行註釋
/* */多行註釋
3、斷點除錯
藉助火狐和IE瀏覽器進行斷點除錯
三,JavaScript變數
1.JavaScript 是一種弱型別語言
javascript的變數型別由它的值來決定。 定義變數需要用關鍵字 ‘var’

var a = 123;
 var b = 'asd';

 //同時定義多個變數可以用","隔開,公用一個‘var’關鍵字

 var c = 45,d='qwe',f='68';

2,變數型別
(1)5中基本資料型別:number、string、boolean、undefined、null
(2)1種複合型別:object
3.變數、函式、屬性、函式引數命名規範
(1)、區分大小寫
(2)、第一個字元必須是字母、下劃線(_)或者美元符號($)
(3)、其他字元可以是字母、下劃線、美元符或數字
4.變數的作用域
變數作用域指的是變數的作用範圍,javascript中的變數分為全域性變數和區域性變數。
(1)、全域性變數:在函式之外定義的變數,為整個頁面公用,函式內部外部都可以訪問。
(2)、區域性變數:在函式內部定義的變數,只能在定義該變數的函式內部訪問,外部無法訪問。

<script type="text/javascript">
    //全域性變數
    var a = 12;
    function myalert()
    {
        //區域性變數
        var b = 23;
        alert(a);
        alert(b);
    }
    myalert(); //彈出12和23
    alert(a);  //彈出12    
    alert(b);  //出錯
</script>

三,獲取元素方法
可以使用內建物件document上的getElementById方法來獲取頁面上設定了id屬性的元素,獲取到的是一個html物件,然後將它賦值給一個變數。
1.第一種方法:將javascript放到頁面最下邊

....
<div id="div1">這是一個div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

2,第二種方法:將javascript語句放到window.onload觸發的函式裡面,獲取元素的語句會在頁面載入完後才執行,就不會出錯了。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

....

<div id="div1">這是一個div元素</div>

3.獲取元素的四種方法:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>04_獲取元素方法.html</title>
    <!-- 窗體載入完畢之後,獲取
    <script type="text/javascript">
        window.onload = function () {
            var div1 = document.getElementById("div1")
            console.info(div1)
        }
        window.onload = function () {
            console.info("孫迎光說你自己沒睡覺...你信不信?")
        }
    </script>
    -->
</head>
<body>
    <div id="div1" name="laowang">
        <h1>獲取元素方法</h1>
        <img src="xxxxxxx" alt="">
    </div>
    <div id="div2">
        <div id="div21"></div>
        <div class="p1"></div>
        <div class="aaaa1">nini</div>
        <p class="p2" name="laowang"></p>
        <p class="p1"></p>
        <p class="p3"></p>
    </div>
</body>
</html>
<!-- 第一種方式,寫在最後
<script type="text/javascript">
    var div1 = document.getElementById("div1")
    console.info(div1)
</script>
-->

<script type="text/javascript">
    //返回的是一個物件    ----
    var div1 = document.getElementById("div1")
    console.info(typeof  div1)
    console.info(div1)

    console.info("***************************************")
    //返回的是一個集合    ----
    var divs = document.getElementsByTagName("div")
    console.info(typeof  divs)
    console.info(divs)
    console.info(divs[0])

    console.info("***************************************")

    var h1s = document.getElementsByTagName("h1")
    console.info(typeof  h1s)
    console.info(h1s[0])

    console.info("***************************************")
    //返回的是一個集合,個別瀏覽器不相容
    var p1s = document.getElementsByClassName("aaaa1")
    console.info(typeof  p1s)
    console.info(p1s)

    console.info("***************************************")
    //返回的是一個集合
    var div = document.getElementsByName("laowang")
    console.info(div)


</script>

四,操作元素的屬性
獲取的頁面元素,就可以對頁面元素的屬性進行操作,屬性的操作包括屬性的讀和寫。
操作屬性的方法
1、“.” 操作
2、“[ ]”操作
屬性寫法
1、html的屬性和js裡面屬性寫法一樣
2、“class” 屬性寫成 “className”
3、“style” 屬性裡面的屬性,有橫槓的改成駝峰式,比如:“font-size”,改成”style.fontSize”
通過“.”操作屬性:

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 讀取屬性值
        var val = oInput.value;
        var typ = oInput.type;
        var nam = oInput.name;
        var links = oA.href;
        // 寫(設定)屬性
        oA.style.color = 'red';
        oA.style.fontSize = val;
    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.laowang.com" id="link1">老王</a>

通過“[ ]”操作屬性:

<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 讀取屬性
        var val1 = oInput1.value;
        var val2 = oInput2.value;
        // 寫(設定)屬性
        // oA.style.val1 = val2; 沒反應
        oA.style[val1] = val2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.laowang.com" id="link1"></a>

innerHTML :innerHTML可以讀取或者寫入標籤包裹的內容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //讀取
        var txt = oDiv.innerHTML;
        alert(txt);
        //寫入
        oDiv.innerHTML = '<a href="http://www.laowang.com">老王<a/>';
    }
</script>

......

<div id="div1">這是一個div元素</div>

五,函式
函式就是重複執行的程式碼片。
1,函式定義與執行

<script type="text/javascript">
    // 函式定義
    function aa(){
        alert('hello!');
    }
    // 函式執行
    aa();
</script>

2,變數與函式預解析
JavaScript解析過程分為兩個階段,先是編譯階段,然後執行階段,在編譯階段會將function定義的函式提前,並且將var定義的變數宣告提前,將它賦值為undefined。

<script type="text/javascript">    
    aa();       // 彈出 hello!
    alert(bb);  // 彈出 undefined
    function aa(){
        alert('hello!');
    }
    var bb = 123;
</script>

3,提取行間事件
在html行間呼叫的事件可以提取到javascript中呼叫,從而做到結構與行為分離。

<!--行間事件呼叫函式   -->
<script type="text/javascript">        
    function myalert(){
        alert('ok!');
    }
</script>
......
<input type="button" name="" value="彈出" onclick="myalert()">
<!-- 提取行間事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
}    
</script>
......
<input type="button" name="" value="彈出" id="btn1">

4.匿名函式
定義的函式可以不給名稱,這個叫做匿名函式,可以將匿名函式直接賦值給元素繫結的事件來完成匿名函式的呼叫。

<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
    */
    // 直接將匿名函式賦值給繫結的事件

    oBtn.onclick = function (){
        alert('ok!');
    }
}

</script>

5,函式傳參

<script type="text/javascript">
    function myalert(a){
        alert(a);
    }
    myalert(12345);
</script>

6,函式’return’關鍵字
函式中’return’關鍵字的作用:
(1)、返回函式執行的結果
(2)、結束函式的執行
(3)、阻止預設行為

<script type="text/javascript">
function add(a,b){
    var c = a + b;
    return c;
    alert('here!');
}

var d = add(3,4);
alert(d);  //彈出7
</script>

六,條件
1.運算子
(1)、算術運算子: +(加)、 -(減)、 *(乘)、 /(除)、 %(求餘)
(2)、賦值運算子:=、 +=、 -=、 *=、 /=、 %=
(3)、條件運算子:==(值相同)、===(型別和值都要相同)、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
2.if else

var a = 6;
if(a==1){
    alert('語文');
}else if(a==2){
    alert('數學');
}else if(a==3){
    alert('英語');
}else if(a==4){
    alert('美術');
}else if(a==5){
    alert('舞蹈');
}else{
    alert('不補習');
}

3.switch

var a = 6;

switch (a){
    case 1:
        alert('語文');
        break;
    case 2:
        alert('數學');
        break;
    case 3:
        alert('英語');
        break;
    case 4:
        alert('美術');
        break;
    case 5:
        alert('舞蹈');
        break;
    default:
        alert('不補習');
}

七,陣列
1.定義陣列的方法

//物件的例項建立
var aList = new Array(1,2,3);

//直接量建立
var aList2 = [1,2,3,'asd'];

2.運算元組中資料的方法
(1)、獲取陣列的長度:aList.length;

var aList = [1,2,3,4];
alert(aList.length); // 彈出4

(2)、用下標運算元組的某個資料:aList[0];

var aList = [1,2,3,4];
alert(aList[0]); // 彈出1

(3)、join() 將陣列成員通過一個分隔符合併成字串

var aList = [1,2,3,4];
alert(aList.join('-')); // 彈出 1-2-3-4

(4)、push() 和 pop() 從陣列最後增加成員或刪除成員

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //彈出1,2,3,4,5
aList.pop();
alert(aList); // 彈出1,2,3,4

(5)、unshift()和 shift() 從陣列前面增加成員或刪除成員

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //彈出5,1,2,3,4
aList.shift();
alert(aList); // 彈出1,2,3,4

(6)、reverse() 將陣列反轉

var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 彈出4,3,2,1

(7)、indexOf() 返回陣列中元素第一次出現的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

(8)、splice() 在陣列中增加或刪除成員

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //從第2個元素開始,刪除1個元素,然後在此位置增加'7,8,9'三個元素
alert(aList); //彈出 1,2,7,8,9,4

2.多維陣列

var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //彈出2;

3.獲取元素的第二種方法
document.getElementsByTagName(”),獲取的是一個選擇集,也是陣列,但是可以用下標的方式操作選擇集裡面的dom元素。

八,迴圈
程式中進行有規律的重複性操作,需要用到迴圈語句。
1.for迴圈

for(var i=0;i<len;i++)
{
    ......
}

2.while迴圈

var i=0;

while(i<8){
 .....
    i++;
}

3.陣列去重

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
var aList2 = [];
for(var i=0;i<aList.length;i++){
    if(aList.indexOf(aList[i])==i){
        aList2.push(aList[i]);
    }
}
alert(aList2);

斷點除錯法理解indexOf()陣列去重
圖1
九,javaScript三大模組
JavaScript 的核心 ECMAScript 描述了該語言的語法和基本物件;
DOM 描述了處理網頁內容的方法和介面;
BOM 描述了與瀏覽器進行互動的方法和介面。

圖片2
1、ECMAscript javascript的語法(變數、函式、迴圈語句等語法)
2、DOM 文件物件模型 操作html和css的方法
3、BOM 瀏覽器物件模型操作瀏覽器的一些方法

十,字串
1、字串合併操作:“ + ”
2、parseInt() 將數字字串轉化為整數
3、parseFloat() 將數字字串轉化為小數
4、split() 把一個字串分隔成字串組成的陣列
5、charAt() 獲取字串中的某一個字元
6、indexOf() 查詢字串是否含有某字元
7、substring() 擷取字串 用法: substring(start,end)(不包括end)
8、toUpperCase() 字串轉大寫
9、toLowerCase() 字串轉小寫

//字串反轉
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');

alert(str2); 

十一,定時器
1.定時器型別及語法

/*
    定時器:
    setTimeout  只執行一次的定時器 
    clearTimeout 關閉只執行一次的定時器
    setInterval  反覆執行的定時器
    clearInterval 關閉反覆執行的定時器
*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}

2.定時器製作時鐘

<script type="text/javascript">
    window.onload = function(){    
        var oDiv = document.getElementById('div1');
        function timego(){
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth()+1;
            var date = now.getDate();
            var week = now.getDay();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var str = '當前時間是:'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second);
            oDiv.innerHTML = str;
        }
        timego();
        setInterval(timego,1000);
    }

    function toweek(n){
        if(n==0)
        {
            return '星期日';
        }
        else if(n==1)
        {
            return '星期一';
        }
        else if(n==2)
        {
            return '星期二';
        }
        else if(n==3)
        {
            return '星期三';
        }
        else if(n==4)
        {
            return '星期四';
        }
        else if(n==5)
        {
            return '星期五';
        }
        else
        {
            return '星期六';
        }
    }


    function todou(n){
        if(n<10)
        {
            return '0'+n;
        }
        else
        {
            return n;
        }
    }
</script>
......
<div id="div1"></div>

3.定時器製作倒計時

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        function timeleft(){
            var now = new Date();
            var future = new Date(2016,8,12,24,0,0);
            var lefts = parseInt((future-now)/1000);
            var day = parseInt(lefts/86400);
            var hour = parseInt(lefts%86400/3600);
            var min = parseInt(lefts%86400%3600/60);
            var sec = lefts%60;
            str = '距離2016年9月12日晚24點還剩下'+day+'天'+hour+'時'+min+'分'+sec+'秒';
            oDiv.innerHTML = str; 
        }
        timeleft();
        setInterval(timeleft,1000);        
    }

</script>
......
<div id="div1"></div>

十二,型別轉換
1、直接轉換 parseInt() 與 parseFloat()

alert('12'+7); //彈出127
alert( parseInt('12') + 7 );  //彈出19 
alert( parseInt(5.6));  // 彈出5
alert('5.6'+2.3);  // 彈出5.62.3
alert(parseFloat('5.6')+2.3);  // 彈出7.8999999999999995
alert(0.1+0.2); //彈出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //彈出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //彈出7.9

2、隱式轉換 “==” 和 “-”

if('3'==3)
{
    alert('相等');
}

// 彈出'相等'
alert('10'-3);  // 彈出7
3、NaN 和 isNaN
alert( parseInt('123abc') );  // 彈出123
alert( parseInt('abc123') );  // 彈出NaN

十三,閉包
1.閉包概念:
函式巢狀函式,內部函式可以引用外部函式的引數和變數,引數和變數不會被垃圾回收機制收回

function aaa(a){      
      var b = 5;      
      function bbb(){
           a++;
           b++;
         alert(a);
         alert(b);
      }
      return bbb;
  }

 var ccc = aaa(2);

 ccc();
 ccc();

改寫成封閉函式的形式:

var ccc = (function(a){

  var b = 5;
  function bbb(){
       a++;
       b++;
     alert(a);
     alert(b);
  }
  return bbb;

})(2);

ccc();
ccc();

2.閉包用處:
(1)、將一個變數長期駐紮在記憶體當中,可用於迴圈中存索引值

<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        for(var i=0;i<aLi.length;i++)
        {
            (function(i){
                aLi[i].onclick = function(){
                    alert(i);
                }
            })(i);
        }
    }
</script>
......
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>

(2)私有變數計數器,外部無法訪問,避免全域性變數的汙染

<script type="text/javascript">

var count = (function(){
    var a = 0;
    function add(){
        a++;
        return a;
    }

    return add;

})()

count();
count();

var nowcount = count();

alert(nowcount);

</script>