JS基礎課程學習筆記
技術標籤：筆記javascript
學習web前端開發一個月思考總結
經過半個多月的學習 js基礎課程已經學習完畢 昨天也用一天的時間看完了JQ的基礎課 老師說在出現三大框架之前JQ非常盛行 我也體會到JQ相比於直接寫JS要簡單方便很多 而且執行速度也更快 但即使這麼好用 還是會被速度更快 效能更完善的框架代替 技術的發展與迭代還是很快的 但基礎知識非常重要 各種框架的使用都離不開JS的基礎知識 框架只是讓JS更快更靈活 是一種方便開發者的工具 作為一名開發者 基礎紮實 保持學習 無論如何更新迭代都可以跟的上技術的腳步
以下為js基礎學習筆記:
1變數
js裡兩個等號表示相等，三個等號表示絕對相等
賦值
var name=“zhangsan”;
var name=1,age=2;(建議分開寫)
1.1語法
1、區分大小寫
2、命名規則：以字母、下劃線、或＄符號開頭，由以上和數字組成，不能把保留字和關鍵字作為識別符號
1.2資料型別
js資料型別分為5種基本資料型別和複雜資料型別
基本資料：
console.log(typeof )判斷資料型別
1.2.1 Undefined:
使用了var宣告但沒有賦值，系統預設賦值undefined；
1.2.2 Null:
undefined派生與null，兩者幾乎相等，null是一個空物件值；
兩者對比：null表示沒有物件，本不該有值；undefined表示缺少物件，本該有值但是沒有找到。
console.log(typeof undefined) //"undefined"
console.log(typeof null) //"object"null是objec的一種
console.log(null==undefined) //true 兩者預設轉換為false 所以兩者相等輸出true
console.log(null===undefined) //false 兩者不同型別 所以輸出false
1.2.3 Boolean（布林型別返回布林值）:只有兩種值true和fales;
0、null、undefined和空值返回false；非空和非零值返回true。
var myBoolean = new Boolean("") //false
var myBoolean = new Boolean("abc") //true
1.2.4 Number:
字面量：所見即所得
十進位制沒有字首
八進位制字首0o
十六進位制字首0x
特例 NAN==NAN // false可通過console.log(isNAN( ))來判斷
parseInt（""）可將字串轉換為數字
parseFloat（""）可將字串轉換為浮點數
1.2.5 String:
unicode所有字元編碼庫； GBK（GB231）字型檔是中文字元庫； 字母的返回值通過ASCⅡ碼庫查詢
字串用單引號或雙引號包裹 var a=“123abc”
JavaScript 轉義序列
序列 代表字元
\0 Null字元（\u0000）
\b 退格符（\u0008）
\t 水平製表符（\u0009）
\n 換行符（\u000A）
\v 垂直製表符（\u000B）
\f 換頁符（\u000C）
\r 回車符（\u000D）
" 雙引號（\u0022）
’ 撇號或單引號（\u0027）
\ \ 反斜槓（\u005C）
正常字元前加反斜槓""會被js忽略
變數.tostring（）可以將數值、布林值、物件、字串的資料型別轉換為字串
複雜：
1.2.6 例 Object型別（物件）:
物件有方法和行為，行為用函式表示
兩種建立方法，沒有本質區別
var obj1={}
var obj2=new object()
1.3 布林操作符
1.3.1 邏輯非（！）
邏輯取反 在值的最前面寫"!" 返回值為布林值
1.3.2 邏輯與（&&）
都是布林值時 兩個值全為ture才會返回ture
第一個布林值是false則返回第一個值（第二個值會被短路操作）
第一個是true返回第二個值
1.3.3 邏輯或（||）
都是布林值時 兩個值有一個ture則返回ture
第一個布林值是ture則返回第一個值同時對第二個值進行短路操作
第一個是false 則返回第二個值
1.3.4 其他常用操作符
加（可以將字串連線起來）減乘除、取餘%、逗號操作符
三目運算子：
var a=1 ；var b=（a==1）？2:3;//如果a==1為ture則返回2，否則返回3
賦值操作符：
var a=1;
a+=3;//相當於a=a+3;
a*=3;//相當於a=a*3;
關係操作符：等於“”、不等於“！”、恆等於“=”、不恆等“！”
2 語句與函式
2.1 條件語句(if、else if、switch)
2.1.1 if語句：
var hour=1;
if(hour<18){
greeting="Good day";
}else{
greeting="Good evening";
}
console.log(greeting);
2.1.2 switch語句：
switch (new Date().getDay()) {
case 0:
day = "星期天";
break;
case 1:
day = "星期一";
break;
case 2:
day = "星期二";
break;
case 3:
day = "星期三";
break;
case 4:
day = "星期四";
break;
case 5:
day = "星期五";
break;
case 6:
day = "星期六";
break;
default:
day = "不存在”;"
break;
}
console.log(day)
2.2迴圈語句
2.2.1 for（最常用）
語法：
for（語句1；語句2；語句3）{需要執行的程式碼塊}
語句1在迴圈開始前執行；
語句2定義執行迴圈程式碼塊的條件，ture則執行程式碼塊，false則跳出迴圈;
語句3會在迴圈程式碼塊每次被執行後執行；
var text="";
for (var i=0;i<5;i++) {
text = "數字為" + i;
console.log(text);
}
//數字為0
//...
//數字為4
2.2.2 while迴圈（注意不要出現死迴圈）
var i=0;
var text="";
while (i<10){
text += "數字是"+i;
i++;
}
console.log(text);
//數字是0數字是1數字是2數字是3數字是4數字是5數字是6數字是7數字是8數字是9
2.2.3 do while迴圈（至少會執行一次 先執行再判斷）
2.2.4 break和continue語句
2.3 函式
語法：function 函式名（引數1，引數2，引數3）{執行程式碼區}
function sayHi(name,message){
alert("Hello"+name+","+message);
}
sayHi("zhangsan", "how are you today?");
2.4 引用型別和基本型別的引數傳遞
基本型別的資料按值儲存，儲存在棧記憶體中，賦值基本資料型別a（形式引數）=b（實際引數）後再更改b的值不影響a的值；
複雜資料型別按地址儲存，儲存在堆記憶體中，在棧記憶體中儲存的是一個堆記憶體中實際資料的地址，賦值複雜型別x=y後，再更改x的值，y的值也會隨之改變。
2.5 執行環境和作用域
作用域查詢變數時是按區域性環境到全域性環境的順序查詢
var宣告的變數是在當前環境中存在的 如果在區域性環境裡宣告 就只存在於當前區域性作用域 並且此函式作用域不被呼叫時 就查詢不到此變數
2.6 垃圾回收
js系統週期性自動回收記憶體 不在執行環境的記憶體會被回收
2.7 引用型別
2.7.1 object型別
是js中最頂層的物件也是最通用的物件
兩種建立方法，沒有本質區別
//1
var obj1={
age:18;
name:tiantian;
}
//2
var obj2=new object()
obj2.age=19;
obj2.name=Diane;
2.7.2 Array型別（陣列）
a 建立方法：
var arr=[1,2,3,true,"Diane"]
var arr=new Array(3)//建立一個包含3項的陣列
b 下標
陣列的下標是從零開始的arr[0]表示第一項 最後一個項的下標是arr[arr.length-1]
c 判斷
arr.isArray();//輸出值為true和false
d 棧方法：後進先出原則
arr.push(1)//推入1這個元素,從尾部推入
arr.pop()//彈出棧頂的第一個元素
e 佇列：先進先出原則
arr.unshift(3,12)//入隊
arr.shift()//出隊 從數列頭部開始出
f 陣列排序
var arr=[7,5,3,1]
for (var i=0;i<arr.length-1;i++){
for (var j=0;j<arr.length-1;j++){
if (arr[j]>arr[j+1]){
var temp=arr[j]
arr[j]=arr[j+1]
arr[j+1]=temp
}
}
}
console.log(arr);//(4) [1, 3, 5, 7]
g 陣列操作
新增：arr1.concat（arr2）表示把arr2新增到arr1的尾部；
查詢位置：arr.indexOf(元素)，元素在陣列內會返回元素下標，否則返回-1；
2.7.3 Date型別
var d=new Date()
console.log(d)//Fri Dec 18 2020 17:04:20 GMT+0800 (中國標準時間)
d.getTime（）可以獲得當前時間戳 可以用於獲取唯一值
2.7.4 正則表示式 RegExp型別
用來匹配或提取字串，多用於驗證手機號、郵箱地址等資料校驗功能，很多可以在網上直接複製使用
var reg=new RegExp(’\d’,‘gi’)返回值為true和false
修飾符Flags：
i表示忽略大小寫匹配
g表示全域性匹配
m表示多行匹配
2.7.5 Function型別
函式名相當於一個存放在棧記憶體中的指標，指向堆記憶體中函式的地址
js沒有過載 相同函式名的函式，前面的函式會被後面會覆蓋，所以儘量不要出現相同函式名的函式
函式宣告：
函式宣告會自動在全域性環境預解析，自動調到所有程式碼的最前面執行 如果在全域性聲明瞭一個函式A那麼在全域性任何地方都可以呼叫
function sayHi(name,message) {
alert("Hello,"+name+","+message);
}
sayHi("zhangsan", "how are you today?");
函式表示式：
函式表示式不會預解析 只有在執行到這段程式碼的時候才可以被呼叫
var sum=function(a,b){
return a+b;
}
函式內部屬性 this和arguments
arguments表示引數組成的陣列
this指向的是呼叫這個函式的物件 全域性環境的函式this指向window
2.7.6 基本包裝型別
Boolean、number、string型別會被js自動預設包裝成物件，可以呼叫屬性和方法
string型別
var str='abc 123 789'
console.log(str.split(" "))//用空格分割字串所得的項
console.log(str.indexOf("b"))//返回b的下標
2.7.7 Math物件
js內建物件
min和max
var max= Math.max(1,2,3,4);
var min= Math.min(1,2,3,4);
舍入方法
var d=3.1415926
Math.round(d) //3 四捨五入的整數
Math.ceil(d) //4 向上取整
Math.floor(d) //3 向下取整
隨機數
Math.random() //返回一個[0,1)之間的隨機數
3 面向物件開發
3.1 工廠模式
使用建構函式建立物件
3.2 建構函式
js有內建建構函式Object\Array等 也可自己建立建構函式 一般首字母大寫
通過new+函式名呼叫的就是建構函式
通過函式名（引數）呼叫的就是普通函式
3.3 原形模式prototype
建構函式名.prototype.方法/物件
使用原型物件可以減少記憶體使用
4 BOM瀏覽器物件模型
將整個瀏覽器看作一個物件，js中所有成員變數、成員方法都是瀏覽器物件中的物件和方法。
4.1 window物件
視窗大小、視窗偏移
延遲執行：setTimeout（function（）{程式碼,毫秒數}）
定期執行（定時器）：setInterval；迴圈停止：clearInterval
彈窗：alert
4.2 location物件
包含有關當前URL的資訊
常用屬性：href可做頁面跳轉；reload（）重新載入當前頁面；
4.3 Navigator物件
包含瀏覽器相關資訊
常用appName屬性進行判斷瀏覽器名稱
4.4 Screen物件
螢幕相關資訊解析度等
4.5 History物件（同時也是window的屬性）
瀏覽歷史的相關資訊
常用屬性方法:length返回瀏覽器歷史列表中的url數量；常用back（）載入前一個url；forward()載入下一個url；go（）載入列表中具體頁面
5 DOM文件物件模型
把網頁看成一棵樹，稱為DOM樹，常用節點：標籤節點element、根節點html:document、文字節點text、註釋節點comment不常用；
5.1 節點的屬性
nodeType屬性返回節點型別；
nodeName屬性返回節點名稱；
children屬性返回子節點；
parentNode屬性返回父節點
5.2 節點的方法
建立：
var p = document.createElement("p");//建立一個標籤p並賦值給變數p
// var txt = document.createTextNode("文字");
// p.appendChild(txt);
p.innerHTML="abcd"//p標籤的內容是abcd
var a = document.getElementById("a");//把id為a的標籤賦給變數a
a.appendChild(p);//把p放進a標籤裡
刪除：
a.removeChild(p)//刪除id為a的子節點p
5.3 常用節點
5.3.1 Document節點
表示整個頁面，同時也是window物件的一個屬性，可以查詢元素
特點如下：
nodetype為9；
parentNode為null；
5.3.2 Element 子節點
最常用的節點，特徵：
nodetype的值是1；
nodeName的值是元素的標籤名。
獲得節點的屬性：
var a=document.getElementById("a");
a.id="newid";
a.className="newclass"
console.log(a)
獲得標籤屬性：
這種方法更通用
console.log(a.getAttribute("id"))
console.log(a.getAttribute("class"))
設定標籤屬性
a.id="newid";
a.setAttribute("id","newid")
a.className="newclass"
a.setAttribute("class","newclass")
5.3.3 Text節點
包含純文字內容；nodetype是3； nodevalue的值是文字內容
5.4 DOM操作技術
5.4.1 動態引入（載入外部的）js指令碼
function loadJs(url){
var script = document.createElement("script");
script.src = url;
document.body.appendChild(script);
}
5.4.2 動態引入樣式表
function loadCss(url) {
var link = document.createElement("link");
link.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);
}
5.4.3 動態讀寫css樣式
<div id="aaa" style="width: 100px">12</div>
--------------------
var a = document.getElementById("aaa");
a.style.backgroundColor = 'red';
5.4.4 獲得元素大小
獲得元素的偏移大小：margin外的寬、高及距瀏覽器邊框左、上的距離
屬性：offsetwidth、offsetheight、offsetleft、offsettop
獲得客戶區大小：盒子的寬高
屬性：clientwidth、clientheight
相容寫法：
function getViewport() {
//ie7之前的相容寫法
if (document.compatMode == 'BackCompat') {
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
console.log(getViewport());
獲得有滾動條的文件寬高
屬性scrollwidth、scrollheight、scrollleft、scrolltop
相容寫法：
var docHeight=
Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
var docWidth =
Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth)
console.log(docHeight,docWidth);
6 事件
6.1 點選事件
屬性：onclick
特點：事件流先捕獲階段後冒泡階段
冒泡（觸發事件順序從小到大）、捕獲（觸發事件順序從大到小）
新增方式：
DOM2級事件處理程式
var a=document.getElementById('a')
a.addEventListener("click",function (){
alert("abcd")
},false)//false表示冒泡，true表示捕獲，基本上使用冒泡
-------
//移處事件
a.removeEventListener('click',方法名,false)
ie處理程式
btn.attachEvent('onclick',function () {})
btn.detachEvent('onclick',事件名)
跨瀏覽器相容事件處理程式
<input type="button" id="button1" value="按鈕">
--------------------------
function show() {
alert("hello world")
}
//宣告一個物件
var eventutil={
//新增控制代碼
addHandler:function (element,type,handler) {
//DOM2級事件處理判斷
if (element.addEventListener) {
element.addEventListener(type,handler,false);
}else if (element.attachEvent){
//ie事件處理判斷
element.attachEvent('on'+type,handler);
}else {
//DOM0級事件判斷
element['on'+type]=handler;
}
}
//或者刪除控制代碼
removeHandler:function (element,type,handler) {
//DOM2級事件處理判斷
if (element.removeEventListener) {
element.removeEventListener(type,handler,false);
}else if (element.detachEvent){
//ie事件處理判斷
element.detachEvent('on'+type,handler);
}else {
//DOM0級事件判斷
element['on'+type]=null;
}
}
}
eventutil.addHandler(button1,'click',show);
6.2 事件物件
6.2.1 DOM中的事件物件
預設傳入event引數
事件中的this==currenttarget、target屬性
this指事件function繫結的物件，target指實際觸發元素
阻止預設行為和冒泡：
阻止預設行為：preventDefault屬性；
阻止事件向上冒泡：stopPropagation屬性；
相容性寫法：
//阻止冒泡行為
function stopBullle(e){
//W3C瀏覽器
if (e && e.stopPropagation)
e.stopPropagation();
//IE瀏覽器
else window.event.cancelBubble = true;
}
//阻止瀏覽器預設行為
function stopDefault(e) {
//W3C瀏覽器
if (e && e.preventDefault)
e.preventDefault();
//IE瀏覽器
else
window.event.returnValue = false;
return false;
}
6.3 事件型別
6.3.1 load事件：
window.onload:當頁面給全部載入後 包括影象 js檔案 css檔案等外部資源 會觸發window的onload事件
6.3.2 resize事件：
window.onresize:頁面大小改變時觸發
6.3.3 scroll事件：
window.onscroll
6.3.4 滑鼠單擊事件
onclick
6.3.5 鍵盤事件
KeyDown，KeyUp，KeyPress（按下加回彈一次，並且產生一個字元）
6.4 事件委託
本質是冒泡 讓事件處理在父元素上完成，以減少多個子元素需要相同事件時的記憶體佔用
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
-------------
var ul= document.getElementById('ul')
ul.onclick=function (e){
let target=e.target;
console.log(target.innerHTML)
}
7 資料交換
7.1 JSON
7.1.1 簡介
js object notation ，js物件簡譜，一種輕量級資料交換格式，物件的屬性需要用雙引號包括，普通物件不用，json常用在前後端資料互動中
http://www.bejson.com/參考網址
7.1.2 JSON的序列化與反序列化
即將json序列轉成字元：JSON.stringify（序列變數名）屬性 & JSON.parse（被序列化的json變數名）屬性
7.2 get和post請求
常用的像後端發起請求的方式
get
讀取資料 可在url後面新增引數 後面新增的引數的資料比較小
post
可以項後端提交資料，可以提交較多資料
url
即網址 http預設埠80可以不寫
請求測試
postman工具
響應
後端返回的東西稱為響應 響應中包含響應資料 響應狀態碼 常用的：200正常、404找不到頁面
7.3 同步和非同步
js是同步語言 非同步中有回撥函式
7.4 如何發起一個請求
常用屬性
onreadystatechange屬性：儲存函式或函式名 每當readystate屬性改變時 就會呼叫該函式
readystate屬性：存有XMLHttpRequest的狀態 從0到4變化；0請求未初始化，1伺服器連結已建立，2請求已接受，3請求處理中，4請求已完成且相應就緒
status屬性：200表示"ok"；404表示未找到頁面
ajax方式發起請求步驟
完整的請求需要的是：
請求的網址
提交請求的內容資料、請求主體等
接收響應回來的內容
具體步驟：
1、建立非同步物件 即XMLHttpRequest（xhr）；
2、設定請求引數，包括請求的方法、url；
3、傳送請求；
4、註冊事件，onreadystatechange事件，狀態改變時就會呼叫
5、在註冊的事件中獲取返回的內容並修改頁面的顯示，資料是儲存在非同步物件的屬性中
發起get請求：
<body>
<input type="button" value="傳送get_ajax請求" id="btnAjax">
</body>
<script>
var btn=document.getElementById('btnAjax');
btn.onclick=function (){
//1、建立非同步物件xhr；
var ajaxObj = new XMLHttpRequest();
//2、設定請求引數，包括請求的方法、url；
ajaxObj.open("get", "http://localhost/index.php");
//3、傳送請求；
ajaxObj.send();
//4、註冊事件，onreadystatechange事件，狀態改變時就會呼叫
//如果要在資料完整請求回來的時候才呼叫，我們需要手動寫一些判斷邏輯
ajaxObj.onreadystatechange = function () {
//為了保證資料完整返回，我們一般會判斷兩個值
if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
//如果能夠進入這個判斷說明資料完美的回來了，並且請求的頁面是存在的
//5、在註冊的事件中獲取返回的內容並修改頁面的顯示
alert('資料返回成功');
//資料是儲存在非同步物件的屬性中
console.log(ajaxObj.responseText);
}
}
}
</script>
傳送post請求：
7.5 本地儲存token
cookie、localStorage、sessionStorage
7.5.1 cookie
只能儲存少量資料4KB左右 屬性Document.cookie=“username=john doe”
7.5.2 localStorage
主要儲存方式 儲存資料較大 沒有過期時間 直到手動去除
方法：
返回第n個鍵的名稱key(n)
返回指定鍵的值getitem(keyname)
新增（更新）鍵setitem(keyname,value)
移除鍵removeitem(keyname) 清除所有鍵clear()
7.5.3 sessionStorage
臨時資訊儲存 網頁關閉即消失