Web前端筆記
第六部分：JavaScript
1. JavaScript介紹
-
JavaScript是運行在瀏覽器端的腳步語言，
JavaScript直接有瀏覽器解釋執行不需要編譯
JavaScript主要解決的是前端與用戶交互的問題，
包括使用交互與數據交互。 JavaScript是瀏覽器解釋執行的，
前端腳本語言還有JScript（微軟，IE獨有），ActionScript( Adobe公司，需要插件)等。 -
前端三大塊
1、HTML：頁面結構
2、CSS：頁面表現：元素大小、顏色、位置、隱藏或顯示、部分動畫效果
3、JavaScript：頁面行爲：部分動畫效果、頁面與用戶的交互、頁面功能 -
Javascript組成
1、ECMAscript javascript的語法（變量、函數、循環語句等語法）
2、DOM 文檔對象模型 操作html和css的方法(修改html內容，css的樣式等)
3、BOM 瀏覽器對象模型 操作瀏覽器的一些方法(瀏覽器彈出彈框，定時器等) -
JavaScript格式
js對縮進沒有要求，每一句js代碼使用分號分開即可
代碼內部的function函數，if——else調節語句等等使用大括號包裹起來的內容，後面不寫分號“；”
縮進沒有要求，可以寫在一行，實際書寫縮進是爲了代碼整潔，符合規範 -
JavaScript註釋
1、一條javascript語句應該以“;”結尾
2、多個相同變量，寫在一起，使用逗號“,”
3、// 單行註釋,兩個斜線
多行註釋,類似css樣式的註釋
/*
xxx
xxx
*/ -
JavaScript運行：
js代碼一般都是引入到HTML或者PHP頁面，然後使用瀏覽器運行
網頁代碼從上往下依次運行，js代碼依次運行，每刷新一次網頁
就會執行一行js代碼
2. JavaScript嵌入頁面的方式
-
和css一樣，有3中引入方式
1、行間事件（主要用於事件）
2、頁面script標籤嵌入
3. 變量
-
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
- 5種基本數據類型：
-
變量、函數、屬性、函數參數命名規範
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
指定變量類型，變量名使用大小寫駝峯命名
4. js獲取元素方法1
-
可以使用內置對象document上的getElementById方法來獲取頁面上設置了id屬性的元素，
獲取到的是一個html對象，然後將它賦值給一個變量
4.1. js操作元素屬性
-
獲取的頁面元素，就可以對頁面元素的屬性進行操作，屬性的操作包括屬性的讀和寫。
-
操作屬性的方法
1、“.” 操作 .屬性name 和句點法只用一樣var oDiv1 = document.getElementById('div1'); oDiv1.style.color = 'red'; oDiv1.style.fontSize = '32px';2、“[ ]”操作 將元素內置屬性使用變量替換，就需要使用
var sMystyle = 'color'; var sValue = 'red'; oDiv.style.sMystyle = sValue; 該句不會產生任何效果 oDiv.style.color = sValue; 該句可以修改屬性 /*元素內置屬性用變量代替，就需要使用[]操作*/ oDiv.style[sMystyle] = sValue - 參考實例 -
屬性寫法
1、html的屬性和js裏面屬性寫法一樣
2、“class” 屬性寫成 “className”（特殊地方）
3、“style” 屬性裏面的屬性，有橫槓的改成駝峯式，比如：“font-size”，改成”style.fontSize”
5. js函數
-
函數使用function來聲明(python中是define)
function fnChange(){
alert(‘hello world!’);
}- ()可以傳入參數
- 函數功能代碼放在{}裏面,不同語句使用分號；斷開
- 縮進沒有要求，但是寫上縮進便於代碼規範閱讀
-
變量與函數預解析
JavaScript解析過程分爲兩個階段，先是編譯階段，然後執行階段，
在編譯階段會將function定義的函數提前，並且將var定義的變量聲明提前，
將它賦值爲undefined。
注意區別：
- 變量只預解析變量聲明，但是不會賦實際值，賦值是undefined
- 函數預解析聲明和函數定義都會提前，因此可以直接使用函數的功能 -
提取行間事件
本來在html行間調用的js事件可以提取到javascript中調用，從而做到結構與行爲分離。
js代碼都放在script標籤裏面 -
匿名函數
定義的函數可以不給名稱，這個叫做匿名函數，類似python中lambda匿名錶達式
可以將匿名函數直接賦值給元素綁定的事件來完成匿名函數的調用。 -
函數’return’關鍵字
函數中’return’關鍵字的作用：
1、返回函數執行的結果
2、結束函數的運行
3、阻止默認行爲 -
參考實例
6. js條件語句
-
通過條件來控制程序的走向，就需要用到條件語句
運算符
1、算術運算符： +(加)、 -(減)、 *(乘)、 /(除)、 %(求餘)
2、賦值運算符：=、 +=、 -=、 *=、 /=、 、++（自己上面加1，參考賦值實例）
3、條件運算符：、=、>、>=、<、<=、!=、!==、&&(而且)、||(或者)、!(否)
==默認會把不同類型轉換爲相同的類型，然後再比較
如果一個字符串‘2’和數字2,就會判斷爲true
=等效於,但是不會轉換類型，修正的bug
!=和!也是一樣
因此，推薦多加一個等號，pycharm中會給語法提示 -
條件語句
if -----
else ----- -
多重條件語句
if -----
else if -----
else if -----
else ----- -
switch語句
多重if else語句可以換成性能更高的switch語句
7. js的數組
-
數組就是一組數據的集合，javascript中，數組裏面的數據可以是不同類型的。
-
類似python的列表，其中大多數方法和python中也相同，少數不一樣
-
定義數組的方法
//對象的實例創建
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); // 彈出42、用下標操作數組的某個數據：aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 彈出13、join() 將數組成員通過一個分隔符合併成字符串
var aList = [1,2,3,4];
alert(aList.join(’-’)); // 彈出 1-2-3-4
alert(aList); // 彈出1,2,3,4
注意：數組的其它操作都會改變原始數組，但是join返回一個字符串，原始數組不變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,45、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,46、reverse() 將數組反轉
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 彈出4,3,2,17、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;
批量操作數組中的數據，需要用到循環語句var aList = [[1,2,3],[‘a’,‘b’,‘c’],[4,5,6]];
alert(aList[0].length); //第一行的長度3 alert(aList[2].length); //第一行的長度3 /*通過行列取出元素，類似numpy中數組*/ /*也可以把大元素看成第一個座標，大元素中的元素看做第二個座標*/ alert(aList[0][0]); //彈出1 alert(aList[1][1]); //彈出b alert(aList[2][2]); //彈出6
8. 循環語句
-
for循環
for(var i=0;i<len;i++)
{
…
} -
while循環
var i=0;
while(i<8){
…
i++;
}
9. 獲取元素方法2，使用標籤名
- 可以使用內置對象document上的getElementsByTagName方法來獲取頁面上的某一種標籤，
獲取的是一個選擇集，不是數組，但是可以用下標的方式操作選擇集裏面的標籤元素。- 參考001文件夾中008案例
10. 字符串處理
-
字符串轉換及處理
1、字符串合併操作：“ + ”
“+” 有特殊情況，看下面例子
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = ‘12’;
var sTr = ‘abc’;
alert(iNum01+iNum02); //彈出36
alert(iNum01+sNum03); //彈出1212 數字和字符串相加等同於字符串相加
alert(sNum03+sTr); // 彈出12abc2、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 彈出的是字符串對應的索引值，不存在就是彈出-17、substring() 截取字符串 用法： substring(start,end)（不包括end）
var sTr = “abcdefghijkl”;
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);alert(sTr2); //彈出 de alert(sTr3); //彈出 bcdefghijkl8、toUpperCase() 字符串轉大寫
var sTr = “abcdef”;
var sTr2 = sTr.toUpperCase();
alert(sTr2); //彈出ABCDEF9、toLowerCase() 字符串轉小寫
var sTr = “ABCDEF”;
var sTr2 = sTr.toLowerCase();
alert(sTr2); //彈出abcdef
11. 調試程序方法
- 調試程序的方法
1、alert 運行到該處函數會暫停運行，必須點擊頁面確定，然後繼續向下運行
2、console.log 函數一直向下運行，瀏覽器console中查看結果
// 火狐控制檯裏面可以直接訪問script下面的全局變量，但是局部變量訪問不到
3、document.title 改變網頁標題的值，調試的變量直接替換了網頁的標題，方法查看- 參考實例
12. 變量作用域
- 變量作用域指的是變量的作用範圍，javascript中的變量分爲全局變量和局部變量。
1、全局變量：在函數之外定義的變量，爲整個頁面公用，函數內部外部都可以訪問。
2、局部變量：在函數內部定義的變量，只能在定義該變量的函數內部訪問，外部無法訪問。- 函數尋找變量先在函數內部找，找不到再去函數外部找
- python函數內部定義一個變量爲全局變量需要使用global聲明
- js的全局變量一個地方修改，其它地方使用了該變量也已經發生變化了,全局變量很危險
- 參考實例
13. 封閉函數
-
封閉函數是javascript中匿名函數的另外一種寫法，創建一個一開始就執行而不用命名的函數
-
爲什麼需要封閉函數
存在一種情況，HTML開頭引入了js文件
HTML中的js代碼又定義了一些變量，這些變量如果js文件中已經存在了
就會直接將其覆蓋，導致重大錯誤，此時，封閉函數就派上用場了 -
封閉函數的好處
封閉函數可以創造一個獨立的空間，在封閉函數內定義的變量和函數不會影響外部同名的函數和變量，
可以避免命名衝突，在頁面上引入多個js文件時，用這種方式添加js文件比較安全
網站後期增加新的功能，直接使用封閉函數，可以避免對之前已有變量和功能的影響- 封閉函數定義和執行一步完成，具體功能的執行也是寫在封閉函數內部
14. js常用內置對象
- 1、document
document.getElementById //通過id獲取元素
document.getElementsByTagName //通過標籤名獲取元素
document.referrer //獲取上一個跳轉頁面的地址(需要服務器環境)- 直接瀏覽器查看元素console控制檯輸入document.referrer就可以查看跳轉前的網址
- 2、location
window.location.href //獲取或者重定url地址
window.location.search //獲取地址參數部分
window.location.hash //獲取頁面錨點或者叫哈希值
15. Math
- Math是內置的一個實例對象，有很多數學方法
Math.random 獲取0-1的隨機數
Math.floor 向下取整 5.6 就是5 沒有四捨五入，直接向上或向下
Math.ceil 向上取整 5.6 就是6
Math.PI 獲取圓周率3.1415…
可以直接使用瀏覽器的console輸入Math,展開查看詳細功能