JavaScript介紹

JavaScript是運行在瀏覽器端的腳步語言，JavaScript主要解決的是前端與用戶交互的問題，包括使用交互與數據交互。 JavaScript是瀏覽器解釋執行的，前端腳本語言還有JScript（微軟，IE獨有），ActionScript( Adobe公司，需要插件)等。

前端三大塊，html、css、javascript。html負責頁面結構；css負責頁面的表現，包括元素大小、顏色、位置、隱藏或顯示、部分動畫效果；而JavaScript負責頁面行爲，如部分動畫效果、頁面與用戶的交互、頁面功能

Javascript組成
- 1、ECMAscript javascript的語法（變量、函數、循環語句等語法）
- 2、DOM 文檔對象模型操作html和css的方法
- 3、BOM 瀏覽器對象模型操作瀏覽器的一些方法

JavaScript嵌入頁面的方式

行間事件（主要用於事件）

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

頁面script標籤嵌入

<script type="text/javascript">        
    alert('ok！');
</script>

外部引入

<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種基本數據類型：
  - number 數字類型
  - string 字符串類型
  - boolean 布爾類型 true 或 false
  - undefined undefined類型，變量聲明未初始化，它的值就是undefined
  - null null類型，表示空對象，如果定義的變量將來準備保存對象，可以將變量初始化爲null,在頁面上獲取不到對象，返回的值就是null
  - 一種複合類型：
    - object
- javascript語句與註釋
  - 一條javascript語句應該以“;”結尾
```
<script type="text/javascript">    
var iNum = 123;
var sTr = 'abc123';
function fnAlert(){
    alert(sTr);
};
fnAlert();
</script>
```
  - javascript註釋
```
<script type="text/javascript">    

// 單行註釋
var iNum = 123;
/*  
    多行註釋
    1、...
    2、...
*/
var sTr = 'abc123';
</script>
```
- 變量、函數、屬性、函數參數命名規範
  - 區分大小寫
  - 第一個字符必須是字母、下劃線（_）或者美元符號（$）
  - 其他字符可以是字母、下劃線、美元符或數字
- 匈牙利命名風格：
  - 對象o Object 比如：oDiv
  - 數組a Array 比如：aItems
  - 字符串s String 比如：sUserName
  - 整數i Integer 比如：iItemCount
  - 布爾值b Boolean 比如：bIsComplete
  - 浮點數f Float 比如：fPrice
  - 函數fn Function 比如：fnHandler
  - 正則表達式re RegExp 比如：reEmailCheck

獲取元素方法

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

獲取元素方法二

可以使用內置對象document上的getElementsByTagName方法來獲取頁面上的某一種標籤，獲取的是一個選擇集，不是數組，但是可以用下標的方式操作選擇集裏面的標籤元素。

<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        // aLi.style.backgroundColor = 'gold'; // 出錯！不能同時設置多個li
        alert(aLi.length);
        aLi[0].style.backgroundColor = 'gold';
    }
</script>
....
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

操作元素屬性

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

操作屬性的方法
- 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 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>

通過“[ ]”操作屬性，示例如下：

<script type="text/javascript">

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

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<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.itcast.cn">傳智播客<a/>';
    }
</script>

......

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

函數

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

函數定義與執行

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

提取行間事件

在html行間調用的事件可以提取到javascript中調用，從而做到結構與行爲分離。

<!--行間事件調用函數   -->
<script type="text/javascript">        
    function fnAlert(){
        alert('ok!');
    }
</script>
......
<input type="button" name="" value="彈出" onclick="fnAlert()">

<!-- 提取行間事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = fnAlert;
    function fnAlert(){
        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 fnAlert(a){
        alert(a);
    }
    fnAlert(12345);
</script>

函數’return’關鍵字

函數中’return’關鍵字的作用：

1、返回函數執行的結果
2、結束函數的運行

3、阻止默認行爲

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

條件語句

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

運算符
- 1、算術運算符： +(加)、 -(減)、 *(乘)、 /(除)、 %(求餘)
- 2、賦值運算符：=、 +=、 -=、 *=、 /=、 %=
- 3、條件運算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

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
{
    ... ;
}

switch語句

多重if else語句可以換成性能更高的switch語句

var iNow = 1;

switch (iNow){
    case 1:
        ...;
        break;
    case 2:
        ...;
        break;    
    default:
        ...;
}

數組及操作方法

數組就是一組數據的集合，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;

循環語句

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

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

字符串處理方法

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(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、charAt() 獲取字符串中的某一個字符

var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //彈出 #

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

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

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

8、toUpperCase() 字符串轉大寫

var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //彈出ABCDEF

9、toLowerCase() 字符串轉小寫

var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); //彈出abcdef

字符串反轉

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

alert(str2);

類型轉換

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、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(2019, 12, 31, 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 = '距離2019年12月31日晚24點還剩下' + day + '天' + hour + '時' + min + '分' + sec + '秒';
					oDiv.innerHTML = str;
				}
				timeleft();
				setInterval(timeleft, 1000);
			}
		</script>
......
<div id="div1"></div>

變量作用域

變量作用域指的是變量的作用範圍，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 myalert(){
    alert('hello!');
};

myalert();
```
- 封閉函數：
```
(function myalert(){
    alert('hello!');
})();
```
- 還可以在函數定義前加上“~”和“!”等符號來定義匿名函數
```
!function myalert(){
    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();
```

常用內置對象

1、document

document.getElementById //通過id獲取元素
document.getElementsByTagName //通過標籤名獲取元素
document.referrer  //獲取上一個跳轉頁面的地址(需要服務器環境)

2、location

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

3、Math

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

前端學習之旅——JavaScript

JavaScript介紹

Javascript組成

JavaScript嵌入頁面的方式

變量

獲取元素方法

獲取元素方法二

操作元素屬性

函數

條件語句

數組及操作方法

循環語句

字符串處理方法

類型轉換

調試程序方法

定時器

變量作用域

封閉函數

常用內置對象

從零開始完成一個分佈式爬蟲項目

數據庫學習之Redis高級特性

Django web 框架學習之旅（2）

如何進行前後端分離？

Scrapy框架——中間件詳解

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結