python前端之JavaScript

阿新 • • 發佈：2018-12-10

目的：學習前端指令碼語言javascript的基本概念、頁面引入方式、獲取頁面元素及操作元素屬性的技巧，學習函式的基本定義方法和使用方法。

JavaScript介紹

JavaScript是執行在瀏覽器端的腳步語言，JavaScript主要解決的是前端與使用者互動的問題，包括使用互動與資料互動。 JavaScript是瀏覽器解釋執行的，前端指令碼語言還有JScript（微軟，IE獨有），ActionScript( Adobe公司，需要外掛)等。

前端三大塊 1、HTML：頁面結構 2、CSS：頁面表現：元素大小、顏色、位置、隱藏或顯示、部分動畫效果 3、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語句應該以“;”結尾

<script type="text/javascript">    
var a = 123;
var b = 'str';
function fn(){
    alert(a);
};
fn();
</script>

2、javascript註釋

<script type="text/javascript">    

// 單行註釋
var a = 123;
/*  
    多行註釋
    1、...
    2、...
*/
var b = 'str';
</script>

變數

JavaScript 是一種弱型別語言，javascript的變數型別由它的值來決定。定義變數需要用關鍵字 'var'

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

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

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

變數型別

5種基本資料型別： number、string、boolean、undefined、null

1種複合型別： object

變數、函式、屬性、函式引數命名規範

1、區分大小寫 2、第一個字元必須是字母、下劃線（_）或者美元符號（$） 3、其他字元可以是字母、下劃線、美元符或數字

獲取元素方法一

可以使用內建物件document上的getElementById方法來獲取頁面上設定了id屬性的元素，獲取到的是一個html物件，然後將它賦值給一個變數，比如：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">這是一個div元素</div>

上面的語句，如果把javascript寫在元素的上面，就會出錯，因為頁面上從上往下載入執行的，javascript去頁面上獲取元素div1的時候，元素div1還沒有載入，解決方法有兩種：

第一種方法：將javascript放到頁面最下邊

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

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

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

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

....

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

操作元素屬性

獲取的頁面元素，就可以對頁面元素的屬性進行操作，屬性的操作包括屬性的讀和寫。

操作屬性的方法 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.itcast.cn" 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.itcast.cn" 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.itcast.cn">傳智播客<a/>';
    }
</script>

......

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

函式

函式就是重複執行的程式碼片。

函式定義與執行

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

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

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

提取行間事件 在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">

匿名函式

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

<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>

函式傳參

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

函式'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、算術運算子： +(加)、 -(減)、 *(乘)、 /(除)、 %(求餘) 2、賦值運算子：=、 +=、 -=、 *=、 /=、 %= 3、條件運算子：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

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('不補習');
}

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('不補習');
}

陣列及操作方法

陣列就是一組資料的集合，javascript中，數組裡面的資料可以是不同型別的。

定義陣列的方法

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

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

運算元組中資料的方法 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

多維陣列 多維陣列指的是陣列的成員也是陣列的陣列。

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

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

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

迴圈語句

程式中進行有規律的重複性操作，需要用到迴圈語句。

for迴圈

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

while迴圈

var i=0;

while(i<8){

    ......

    i++;

}

陣列去重

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);

Javascript組成

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、alert

2、console.log

3、document.title

定時器

定時器在javascript中的作用 1、製作動畫 2、非同步操作 3、函式緩衝與節流

定時器型別及語法

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

*/

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

定時器製作時鐘

<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>

定時器製作倒計時

<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

變數作用域

變數作用域指的是變數的作用範圍，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>

封閉函式

封閉函式是javascript中匿名函式的另外一種寫法，建立一個一開始就執行而不用命名的函式。

一般定義的函式和執行函式：

function changecolor(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
}
changecolor();

封閉函式：

(function(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
})();

還可以在函式定義前加上“~”和“!”等符號來定義匿名函式

!function(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
}()

閉包

什麼是閉包 函式巢狀函式，內部函式可以引用外部函式的引數和變數，引數和變數不會被垃圾回收機制收回

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();

用處 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>

內建物件

1、document

document.referrer  //獲取上一個跳轉頁面的地址(需要伺服器環境)

2、location

window.location.href  //獲取或者重定url地址
window.location.search //獲取地址引數部分
window.location.hash //獲取頁面錨點或者叫雜湊值

3、Math

Math.random 獲取0-1的隨機數
Math.floor 向下取整
Math.ceil 向上取整

面向物件

面向過程與面向物件程式設計

1、面向過程：所有的工作都是現寫現用。

2、面向物件：是一種程式設計思想，許多功能事先已經編寫好了，在使用時，只需要關注功能的運用，而不需要這個功能的具體實現過程。

javascript物件 將相關的變數和函式組合成一個整體，這個整體叫做物件，物件中的變數叫做屬性，變數中的函式叫做方法。javascript中的物件類似字典。

建立物件的方法 1、單體

<script type="text/javascript">
var Tom = {
    name : 'tom',
    age : 18,
    showname : function(){
        alert('我的名字叫'+this.name);    
    },
    showage : function(){
        alert('我今年'+this.age+'歲');    
    }
}
</script>

2、工廠模式

<script type="text/javascript">

function Person(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.showname = function(){
        alert('我的名字叫'+this.name);    
    };
    o.showage = function(){
        alert('我今年'+this.age+'歲');    
    };
    o.showjob = function(){
        alert('我的工作是'+this.job);    
    };
    return o;
}
var tom = Person('tom',18,'程式設計師');
tom.showname();

</script>

2、建構函式

<script type="text/javascript">
    function Person(name,age,job){            
        this.name = name;
        this.age = age;
        this.job = job;
        this.showname = function(){
            alert('我的名字叫'+this.name);    
        };
        this.showage = function(){
            alert('我今年'+this.age+'歲');    
        };
        this.showjob = function(){
            alert('我的工作是'+this.job);    
        };
    }
    var tom = new Person('tom',18,'程式設計師');
    var jack = new Person('jack',19,'銷售');
    alert(tom.showjob==jack.showjob);
</script>

3、原型模式

<script type="text/javascript">
    function Person(name,age,job){        
        this.name = name;
        this.age = age;
        this.job = job;
    }
    Person.prototype.showname = function(){
        alert('我的名字叫'+this.name);    
    };
    Person.prototype.showage = function(){
        alert('我今年'+this.age+'歲');    
    };
    Person.prototype.showjob = function(){
        alert('我的工作是'+this.job);    
    };
    var tom = new Person('tom',18,'程式設計師');
    var jack = new Person('jack',19,'銷售');
    alert(tom.showjob==jack.showjob);
</script>

4、繼承

<script type="text/javascript">

        function fclass(name,age){
            this.name = name;
            this.age = age;
        }
        fclass.prototype.showname = function(){
            alert(this.name);
        }
        fclass.prototype.showage = function(){
            alert(this.age);
        }
        function sclass(name,age,job)
        {
            fclass.call(this,name,age);
            this.job = job;
        }
        sclass.prototype = new fclass();
        sclass.prototype.showjob = function(){
            alert(this.job);
        }
        var tom = new sclass('tom',19,'全棧工程師');
        tom.showname();
        tom.showage();
        tom.showjob();
    </script>

新選擇器

1、document.querySlector() 2、document.querySlectorAll()