js基礎知識入門總結

1、第一個js程序

一個項目包括三部分：前端（html、css、js）、數據庫、后端技術

引入方式：頁面中直接寫，script標簽引入

js事件綁定:

<input type="button" value="按鈕" onclick="myClick()" />
<input type="button" value="按鈕" id="btn"/>

function myClick(){
        console.log("點擊按鈕");      
}

document.getElementById('btn').onclick=function(ev){ 
        console.log("點擊按鈕");  
}

2、js變量聲明規則

var iNum1 = 10;
var sString = "abceelf";
var bFlag = true;
var aNum = [1,2,3,4,5];
var oObject = {name:'marry',age:18};
var fNumber = 10.3;

變量命名規范：

　　1）變量的第一個字符必須是字母、下划線_、或$

　　2）其余的字符必須是 下划線_ 、字母、數字、或$

　　3）不能用js的關鍵字

　　4）駝峰命名法

3、變量轉換

var  iNum1 = 10;
var  sString = "baude";
// + 作拼接作用，使數字轉換成字符串瀏覽器自動轉換的，取toString()方法
iNum1 + sString 
//而 -號、*號、/號只能作運算，即將所有數據轉換為數字，取Number()方法，如果不能轉換則為NaN

var  bFlag = true;
//布爾值轉換為數字1或0
iNum1 + bFlag 

//把數據轉換成數字
var  sString2 = “20djaog”；
Number(sString2)//將數字的字符串轉換為數字
parseInt(sString2)//將不能轉換為止
parseFloat("10.2ajofg")//可以轉換浮動型

4、js字符串操作

var  sString = "Hello world";
sString.length  //獲取字符串長度
sString.charAt(2)   //獲取字符串指定索引的字符
sString.substring(start,end)   //截取字符串從start位置到end位置，如果end缺省則到結尾
sString.substr(start,length)  //截取字符串從start位置截取length個字符
sString.indexOf('a',start)  // 返回字符串中指定的字符a第一次出現的位置，若無則返回-1；若第二個參數有，則從第二個參數start的位置開始
sString.lastIndexOf('a',start)   //從右邊到左邊查詢

5、js數組

//數組聲明
var  aTeam = new Array(4);
aTeam[0] = "dkop";
......

var aTeam = ["dd","es","ag"];

//數組方法
aTeam.toString(); //默認通過逗號隔開
aTeam.join("_").toString();  //指定通過 _ 隔開
aTeam.reverse().toString() //反序處理

//字符串處理為數組
var  sString = "deig_taig_kie_lieng";
sString.split("_")  //通過指定字符進行分割，返回一個數組

6、條件判斷

　　運算：除/ 、取余%

　　條件語句

if(條件1){
    //第一種情況
}else if(條件2){
    //第二種情況
}else{
    //剩余情況
}

//if語句也可以使用三元運算符等價代替
if(a>b){
    c=a;
}else{
    c=b;
}    
等價於  c =  a>b ? a:b;

7、等於號的區別=、==、===

// =是賦值
// ==是不判斷類型，會自動轉換為相同的類型再進行判斷
// ===會先判斷類型是否相同
var iNum = 10；
var sNum = ‘10’；
if（iNum == sNum）{
    //不判斷類型
}
if（iNum === sNum）{
     //判斷類型
}

//邏輯運算符 &&、  ||、  ！

8、循環結構

//while循環
var i = 0;
var iSum = 0;
while(i<101){
     //當前的iSum=上次的iSum+當前的i
     iSum += i;
     i++
}
alert(iSum);

//do...while循環

//for循環
var iSum = 0;
for(var i=0;i<101;i++){
    iSum += i;
}

9、for循環的嵌套

//9*9乘法表，首先最重要的就是確定各個循環變量的范圍
// var i    (1~9)       var j<i
var sHtml = "<table>";
for(var i = 1;i<=9;i++){
   sHtml+="<tr>";
    for(var j = 1;j<=i;j++){
        sHtml+="<td>"+i+"*"+j+"="+i*j+"</td>";
     }
}
sHtml+="</table>";
document.writeln(sHtml);

//以下是反向寫入頁面中
var sHtml = "<table>";
for(var i = 9;i>=1;i--){
    sHtml+="<tr>";
    for(var j = i;j>=1;j--){
        sHtml+="<td>"+i+"*"+j+"="+i*j+"</td>";
    }
}
sHtml+="</table>";
document.writeln(sHtml);

//冒泡排序：前面的元素依次和后面的元素進行比較
    var aNumber = [10,2,34,4,56,12,45,44,6,12,23,55];
    var iNum = 0;
    for(var i = 0;i<=aNumber.length-2;i++){
        for(var j = i+1;i<=aNumber.length-1;j++){
            if(aNumber[i]>aNumber[j]){
                iNum = aNumber[i];
                aNumber[i] = aNumber[j];
                aNumber[j] = iNum;
            }
        }
    }
    alert(aNumber);

//以下是降序
    var aNumber = [10,2,34,4,56,12,45,44,6,12,23,55];
    var iNum = 0;
    for(var i = 0;i<=aNumber.length-2;i++){
        for(var j = i+1;i<=aNumber.length-1;j++){
            if(aNumber[i]<aNumber[j]){
                iNum = aNumber[i];
                aNumber[i] = aNumber[j];
                aNumber[j] = iNum;
            }
        }
    }
    alert(aNumber);

10、switch語句

    switch(num){
        case 1:
            alert('星期1');
            break;
        case 2:
            alert('星期2');
            break;
        case 3:
            alert('星期3');
            break;
        case 4:
            alert('星期4');
            break;
        default:
            alert("星期天");
            break;
    }

11、break、continue和return

    function myClick() {
        var iSum = 0;
        for(var i=1;i<101;i++){
            if(i==5){
                //跳出整個循環體，只加到5
                // break;
                //跳過當前條件的循環，即除去5
                // continue;
                //結束整個方法體，此外return也可以作為函數的返回值
                return;
            }
            iSum += i;
        }
        alert(iSum);
    }

12、Math對象

    Math.PI;
    Math.max(10,32,40);
    Math.min(10,32,40);
    Math.round(12.59);//四舍五入
    Math.ceil(12.1);//向上取整
    Math.floor(12.9);//向下取整
    Math.random();//獲取0~1的隨機數，不包括0和1
    Math.floor(Math.random()*100+1) //獲取1~100之前的整數

13、date對象

    var myData = new Date();
    myData.getFullYear();
    myData.getMonth()+1;//月是從0開始的，所以要加1
    myData.getDay();
    myData.getHours();
    myData.getMinutes();
    myData.getSeconds();

14、setInterval和setTimeout

    function myClick() {
        var i=0;
        //循環執行
        var timer = setInterval(function () {
            i++;
            if(i==6){
                //清除指定的定時器
                clearInterval(timer);
            }
            console.log(i);
        },1000);

        //只執行一次
        setTimeout(function () {
            i++;
            console.log(i);
        },1000);
    }