JS 學習筆記

時間 2019-12-04

原文原文鏈接

一、簡介

JavaScript簡稱JS，是可插入HTML文檔的編程代碼，JS代碼由瀏覽器執行。
可參考博客：JS的使用方式瞭解JS引入的相關內容。
JS能夠經過不一樣的方式來輸出數據：javascript

使用 window.alert() 彈出警告框。
使用 document.write() 方法將內容寫到 HTML 文檔中。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制檯。

二、JS變量

變量是用於存儲信息的"容器"。JS變量最好以字母開頭，而且區分大小寫。變量能夠保存數字、字符、數組、對象等類型的數據。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS變量</title>
</head>

<body>
<p id="info">本節介紹JS變量</p>
<script>
    var a1=1;        //數字
    var a2=3.14;     //帶小數點數字
    var a3=10e4;     //科學計數法數字
    var b1=true, b2=false;      //布爾
    var c1='Hello';        //字符
    var d1=[];     //空數組
    var d2=["Audi","Volvo","BMW"];      //數組
    var d3=["Adam",2,true];      //數組
    var g1=myFunction();    //將函數的返回賦值給變量，須要定義函數。
    var t1 = Date();        //時間

    alert(a1);
</script>

</body>
</html>

三、JS函數

函數的定義有三種方法，下面介紹其中的兩種，另一種不建議使用。其格式分別爲：java

<script>
    function f1(x, y) {    //x和y爲形參
        z = x * y;
        return z;
    }
    f2 = function (x, y) {
        z = x + y;
        return z;
    }

    alert(f1(2,3));    //調用f1函數，2和3爲實參
    alert(f2(1,2));
</script>

四、JS事件

JS事件是能夠被瀏覽器偵測到的行爲。一般在事件觸發時，能夠執行一些代碼。格式爲：編程

<some-HTML-element some-event="some-JavaScript">    //注意須要使用雙引號或單引號

下面列舉了兩個JS事件的例子，一個爲onmouseover，另外一個爲onclick。數組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
    <p onmouseover="this.innerHTML='請繼續'" style="color:red;">鼠標滑過查看詳情！</p>        //使用this能夠修改元素自身的內容
    <button onclick="document.getElementById('time').innerHTML=Date()">如今的時間</button>
    <p id="time"></p>

</body>
</html>

常見的HTML事件:瀏覽器

事件	描述
onchange	HTML 元素改變
onclick	用戶點擊 HTML 元素
onmouseover	用戶在一個HTML元素上移動鼠標
onmouseout	用戶從一個HTML元素上移開鼠標
onkeydown	用戶按下鍵盤按鍵
onload	瀏覽器已完成頁面的加載

JS的事件處理方式較爲繁瑣，jQuery 是爲事件處理特別設計的，爲此對於事件處理方面的工做可使用jQuery，請參考：jQuery學習筆記dom

五、JS流程控制

If...else 語句

// 語法爲：
if (condition)        
  {       
  當條件爲 true 時執行的代碼      
  }        
else        
  {        
  當條件不爲 true 時執行的代碼        
  }

for 循環

// 語法爲：
for (statement1; statement2; statement3)        
  {        
  被執行的代碼塊        
  }

其中，statement1爲在循環開始以前設置變量(如：var i=0)，statement2爲循環結束的條件（），statement3爲繼續循環前變量的改變方式(如：i++)。函數

for/in 循環 for/in循環能夠用來遍歷數組或對象的元素。

// 示例：
var p1={fname:"John",lname:"Doe"}; 
var p2=['A','B','C'];
for (x in p1) 
  { 
  txt=txt + p1[x]; 
  }

while循環
略。
還有一些其餘的流程控制語句這裏就不詳述。

六、JS對象

對象只是一種特殊的數據，對象擁有屬性和方法。JS是面向對象的語言，但它不使用類。可使用如下三種方式建立對象：學習

方式1：先建立空對象再添加屬性
方式2：相似字典格式的建立
方式3：使用對象構造器

<script>
    p1 = new Object();      //方式1
    p1.firstname = 'David';
    p1.lastname = 'Wang';
    p1.id = 1122;

    p2 = {firstname:"John", lastname:"Doe", id:5566};     //方式2

    function person(firstname,lastname,age)        //方式3
    {
        this.firstname=firstname;
        this.lastname=lastname;
        this.age=age;

        this.changeage=c;
        function c(age)
        {
            this.age=age;
        }
    }

    p3 =new person('cathy','you',30);
    p3.changeage(32);               //對象使用.調用方法
    document.write(p3.age);         //對象使用.調用屬性
</script>