前端之JavaScript

阿新 • • 發佈：2018-06-07

無法空間 parse else 關閉決定問題下劃線沒有

　　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">        
    alert(‘ok！‘);
</script>

3、外部引入

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

變量、數據類型及基本語法規範

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

var iNum = 123;
 var sTr = ‘asd‘;

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

 var iNum = 45,sTr=‘qwe‘,sCount=‘68‘;

變量類型

5種基本數據類型：
1、number 數字類型
2、string 字符串類型
3、boolean 布爾類型 true 或 false
4、undefined undefined類型，變量聲明未初始化，它的值就是undefined
5、null null類型，表示空對象，如果定義的變量將來準備保存對象，可以將變量初始化為null,在頁面上獲取不到對象，返回的值就是null

1種復合類型：
object

javascript語句與註釋

1、javascript語句開始可縮進也可不縮進，縮進是為了方便代碼閱讀，一條javascript語句應該以“;”結尾;

<script type="text/javascript">    
var iNum = 123;
var sTr = ‘abc123‘;
function fnAlert(){
    alert(sTr);
};
fnAlert();
</script>

2、javascript註釋

<script type="text/javascript">    

// 單行註釋
var iNum = 123;
/*  
    多行註釋
    1、...
    2、...
*/
var sTr = ‘abc123‘;
</script>

變量、函數、屬性、函數參數命名規範

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

匈牙利命名風格：

對象o Object 比如：oDiv
數組a Array 比如：aItems
字符串s String 比如：sUserName
整數i Integer 比如：iItemCount
布爾值b Boolean 比如：bIsComplete
浮點數f Float 比如：fPrice
函數fn Function 比如：fnHandler
正則表達式re RegExp 比如：reEmailCheck

函數

　　函數就是重復執行的代碼片。

函數定義與執行

<script type="text/javascript">
    // 函數定義
    function fnAlert(){
        alert(‘hello!‘);
    }
    // 函數執行
    fnAlert();
</script>

變量與函數預解析

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

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

　　函數傳參 javascript的函數中可以傳遞參數。

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

函數‘return‘關鍵字

函數中‘return‘關鍵字的作用：
1、返回函數中的值或者對象
2、結束函數的運行

<script type="text/javascript">
function fnAdd(iNum01,iNum02){
    var iRs = iNum01 + iNum02;
    return iRs;
    alert(‘here!‘);
}

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

條件語句

通過條件來控制程序的走向，就需要用到條件語句。

條件運算符

==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

if else

var iNum01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01>iNum02){
    sTr = ‘大於‘;
}
else
{
    sTr = ‘小於‘;
}
alert(sTr);

多重if else語句

var iNow = 1;
if(iNow==1)
{
    ... ;
}
else if(iNow==2)
{
    ... ;
}
else
{
    ... ;
}

獲取元素方法

可以使用內置對象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>

操作元素屬性

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

操作元素屬性

var 變量 = 元素.屬性名讀取屬性
元素.屬性名 = 新屬性值改寫屬性

屬性名在js中的寫法

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 sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;
        // 寫(設置)屬性
        oA.style.color = ‘red‘;
        oA.style.fontSize = sValue;
    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.baidu.com" id="link1">百度</a>

innerHTML

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

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById(‘div1‘);
        //讀取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //寫入
        oDiv.innerHTML = ‘<a href="http://www.baidu.com">百度<a/>‘;
    }
</script>

......

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

事件屬性及匿名函數

事件屬性

　　元素上除了有樣式，id等屬性外，還有事件屬性，常用的事件屬性有鼠標點擊事件屬性(onclick)，鼠標移入事件屬性(mouseover),鼠標移出事件屬性(mouseout),將函數名稱賦值給元素事件屬性，可以將事件和函數關聯起來。

<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById(‘btn1‘);

    oBtn.onclick = myalert;

    function myalert(){
        alert(‘ok!‘);
    }
}

</script>

匿名函數

　　定義的函數可以不給名稱，這個叫做匿名函數，可以將匿名函數的定義直接賦值給元素的事件屬性來完成事件和函數的關聯，這樣可以減少函數命名，並且簡化代碼。函數如果做公共函數，就可以寫成匿名函數的形式。

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

數組及操作方法

　　數組就是一組數據的集合，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、reverse() 將數組反轉

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

6、indexOf() 返回數組中元素第一次出現的索引值

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

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

批量操作數組中的數據，需要用到循環語句

循環語句

程序中進行有規律的重復性操作，需要用到循環語句。

for循環

for(var i=0;i<len;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);

字符串處理方法

1、字符串合並操作：“ + ”

var iNum01 = 12;
var iNum02 = 24;
var sNum03 = ‘12‘;
var sTr = ‘abc‘;
alert(iNum01+iNum02);  //彈出36
alert(iNum01+sNum03);  //彈出1212 數字和字符串相加等同於字符串相加
alert(sNum03+sTr);     // 彈出12abc

2、parseInt() 將數字字符串轉化為整數

var sNum01 = ‘12‘;
var sNum02 = ‘24‘;
var sNum03 = ‘12.32‘;
alert(sNum01+sNum02);  //彈出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //彈出36
alert(parseInt(sNum03))   //彈出數字12 將字符串小數轉化為數字整數

3、parseFloat() 將數字字符串轉化為小數

var sNum03 = ‘12.32‘
alert(parseFloat(sNum03));  //彈出 12.32 將字符串小數轉化為數字小數

4、split() 把一個字符串分隔成字符串組成的數組

var sTr = ‘2017-4-22‘;
var aRr = sTr.split("-");
var aRr2= sTr.split("");

alert(aRr);  //彈出[‘2017‘,‘4‘,‘2‘]
alert(aRr2);  //彈出[‘2‘,‘0‘,‘1‘,‘7‘,‘-‘,‘4‘,‘-‘,‘2‘,‘2‘]

5、indexOf() 查找字符串是否含有某字符

var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //彈出2

6、substring() 截取字符串用法： substring(start,end)（不包括end）

var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);

alert(sTr2); //彈出 de
alert(sTr3); //彈出 bcdefghijkl

字符串反轉　　

var str = ‘asdfj12jlsdkf098‘;
var str2 = str.split(‘‘).reverse().join(‘‘);

alert(str2);

定時器

定時器在javascript中的作用

1、定時調用函數
2、制作動畫

定時器類型及語法

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

*/

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

變量作用域

變量作用域指的是變量的作用範圍，javascript中的變量分為全局變量和局部變量。

1、全局變量：在函數之外定義的變量，為整個頁面公用，函數內部外部都可以訪問。
2、局部變量：在函數內部定義的變量，只能在定義該變量的函數內部訪問，外部無法訪問。

<script type="text/javascript">
    // 定義全局變量
    var a = 12;
    function myalert()
    {
        // 定義局部變量
        var b = 23;
        alert(a);
        // 修改全局變量
        a++;
        alert(b);
    }
    myalert(); // 彈出12和23
    alert(a);  // 彈出13    
    alert(b);  // 出錯
</script>

封閉函數

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

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

function myalert(){
    alert(‘hello!‘);
};

myalert();

封閉函數：

(function(){
    alert(‘hello!‘);
})();

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

!function(){
    alert(‘hello!‘);
}()

封閉函數的作用

封閉函數可以創造一個獨立的空間，在封閉函數內定義的變量和函數不會影響外部同名的函數和變量，可以避免命名沖突，在頁面上引入多個js文件時，用這種方式添加js文件比較安全，比如：

var iNum01 = 12;
function myalert(){
    alert(‘hello!‘);
}

(function(){
    var iNum01 = 24;
    function myalert(){
        alert(‘hello!world‘);
    }
    alert(iNum01);
    myalert()
})()

alert(iNum01);
myalert();

前端之JavaScript

前端之JavaScript

JavaScript嵌入頁面的方式

變量、數據類型及基本語法規範

變量類型

javascript語句與註釋

變量、函數、屬性、函數參數命名規範

匈牙利命名風格：

函數

函數定義與執行

變量與函數預解析

函數‘return‘關鍵字

條件語句

條件運算符

if else

多重if else語句

獲取元素方法

操作元素屬性

操作元素屬性

屬性名在js中的寫法

innerHTML

事件屬性及匿名函數

事件屬性

匿名函數

數組及操作方法

定義數組的方法

操作數組中數據的方法

多維數組

循環語句

for循環

例如：數組去重

字符串處理方法

字符串反轉

定時器

定時器在javascript中的作用

定時器類型及語法

變量作用域

封閉函數

封閉函數：

封閉函數的作用

相關推薦

字符串反轉　　