js第一周總結

day1 JavaScript基本文法
- 一、JavaScript概述
- 二、如何引入就js？
- 三、如何輸出？（面試）
- 四、如何換行？
- 五、注釋
- 六、資料類型
- 七、辨別符命名規則
- 八、變量或常量
- 九、運算符與表達式
- - 1. ++ -- 遞增遞減運算符
  - 2. 算數運算符
  - - * / % -
    - +
  - 3.關系運算符
  - - > < >= <=
    - == !== === !==
  - 4.邏輯運算符
  - 5.三元（三目）運算符
  - 6.指派運算符
  - 7.特殊運算符
- 十、内置函數
- - 1.isNaN（）：判斷是否為NaN
  - 2.evel（）：解析字元串為表達式并傳回表達式的結果
  - 3.parseInt（'字元串'，2-36）
  - 4.parseFloat（'字元串'）
  - 5.number（'字元串'）
  - 十一、代碼規範
- day2 邏輯分支
- - 一、程式控制的三大結構
  - 二、實作選擇結構的語句有哪些？
  - - if
    - - 單分支選擇
      - 雙分支
      - 多分支
    - switch
- day3 循環結構
- - 一、循環結構
  - 二、循環思想（循環三要素）
  - 三、實作循環的語句？
  - 四、文法
  - - while：當型循環
    - do while：直到型循環
    - for：多功能循環
  - 五、額外的格式
  - 六、無限循環（死循環）：條件永遠為真
  - 七、循環之間的差別
  - - 1.while
    - 2.do while
    - 3.for
  - 八、break continue
  - - break
    - continue
- day4 函數（上）
- - 一、什麼是函數
  - 二、好處
  - 三、函數的分類
  - 四、函數的類型
  - 五、函數的聲明
  - 六、調用函數
  - 七、函數的參數
  - 八、函數的傳回值
  - 九、事件相關概念
- day5 函數（下）
- - 一、遞歸
  - 二、如何建立對象？
  - 三、如何通路對象中的屬性和方法

day1 JavaScript基本文法

一、JavaScript概述

什麼是JavaScript？

是一門基于對象和事件驅動的用戶端腳本語言。
哪一年？哪個公司？誰？第一個名字叫什麼？

1995年網景布蘭登 livescript
ECMA提出的第一套W3C标準：

ECMA-262
js包含哪幾部分？

ECMAScript

BOM

DOM

二、如何引入就js？

行内腳本（通過事件驅動）
内部腳本

外部腳本

注：如果是外部引入，那麼在script标簽中不要寫任何妮兒，因為寫了也不執行。

三、如何輸出？（面試）

alert（）：以警告框的形式輸出。但是會中斷後續語句的執行。通常在排錯時使用。
document.write（）：輸出在頁面中，會影響頁面布局。
console.log（）：在控制台輸出。輸出對象的詳細資訊。

四、如何換行？

頁面中換行 ‘< br >’
非頁面中換行 \n

注：轉義字元 \ ：将特殊含義的符号轉成普通字元。

\t : 表示橫向跳格（一次跳8個空格）

五、注釋

HTML < !-- – >
CSS / * * /
JS

單行注釋 //

多行注釋 / * * /

六、資料類型

基本資料類型：number（數字） string（字元串） Boolean（布爾） null（空） undefined（未定義）

複合資料類型：object（對象）

七、辨別符命名規則

隻能包含：字母、數字、下劃線、$
不能以數字開頭
不能是關鍵字或保留字
語義化
駝峰命名

（1）大駝峰： HowAreYou （構造函數、類名）

（2）小駝峰：howAreYou （函數名）

how_are_you（變量名）
匈牙利命名

整數：i_num
小數：f_num
字元串：s_str
字元：ch
布爾值：bo
數組：arr
函數：fn
對象：o_div

八、變量或常量

什麼是變量？

在記憶體中開辟空間，用于存儲資料，而随着程式的運作，這個空間的資料會發生變化，是以稱為變量。
如何聲明變量？

（1）顯示聲明：var 變量名，變量名，變量名；

（2）隐式聲明：變量名 = 值；
如何給變量指派？

（1）初始化變量值：聲明變量的同時給它指派

（2）先聲明，後指派
什麼是常量？

3 true false ‘3’

九、運算符與表達式

1. ++ – 遞增遞減運算符

從左到右，如果先看到變量，則先取出變量中的值參與其它運算，變量中的值再+1或-1。

從左到右，如果先看到運算符，則先将變量中的值+1或-1，再參與其它運算。

2. 算數運算符

* / % -

規則

如果是number類型之間的運算，直接運算
如果是不同類型資料之間運算，則先轉成數字，再運算。（轉成功，則直接運算；轉失敗，轉為NaN，運算結果直接是NaN）
true（轉為1） false（轉為0） null（轉為0）
undefined NaN 結果一定是NaN（not a number ）

注：

0除以非0 的數：0
非0的數除以0 ： infinity
0除以0：NaN
0模非0的數： 0
非0的數模0 ： NaN
0模0 ：NaN

+

規則

如果+兩邊有字元串，就連接配接成新的字元串

3.關系運算符

> < >= <=

相同類型比較，直接比較
字元串比較，從左到右依次比較
true（1） false（0） null（0）
undefined（false） NaN（false）

console.log(4 > '3');  //true
console.log(NaN >= NaN)  //false

== !== === !==

== !== ：隻比較結果，不看類型
=== !== ：先比較資料類型，再比較結果

//切記

console.log(null == false); //false
console.log(null == 0); //false
console.log(null == ''); //false
console.log(null == undefined); //true
console.log(null === undefined); //false
console.log(NaN == NaN); //false

4.邏輯運算符

false，0，null，undefined，NaN天然為假

！：非真即假，非假即真。！“ ” false
&& ：如果&&左邊表達式的值為true時，傳回右邊表達式的值；如果&&左邊表達式的值為false時，發生短路，不在執行右邊的表達式，直接傳回左邊表達式的值。（要特别注意，傳回的是表達式的值，不一定是true或false）
|| ：如果||左邊表達式的值為false時，發生短路，不在執行右邊的表達式，直接傳回左邊表達式的值；如果||左邊表達式的值為true時，傳回右邊表達式的值。

5.三元（三目）運算符

一進制（單目）：！、++、 - - 、 +（正）、-（負）
二進制（雙目）：* 、/ 、%、 +（加）、 -（減）&& 、 || 、關系運算符
三元（三目）：？：

文法：條件？語句：語句

當條件為true時，執行：前面的語句

當條件為false時，執行：後面的語句

擴充

prompt（‘提示性語句’，‘預設值’）：彈出一個使用者輸入的框。
//第二個參數可以省略

6.指派運算符

簡單指派 =
複合算數指派 += 、-= 、*= 、/= 、%=

規則：先取運算符左邊變量中的值與運算符右邊表達式的值進行相應的算術運算，最後将結果指派給左邊的變量。

7.特殊運算符

new ：用于建立對象

文法：new 構造函數（）

var o_num = new number();
var o_obj = new object();

typeof 用于檢測資料類型

typeof後輸出的值為字元串類型

console.log(typeof 4);//'unmber'
console.log(typeof '4');  //'string'
console.log(typeof true); //'boolean'
console.log(typeof null); //'object'
console.log(typeof undefined); //'undefined'
console.log(typeof NaN);      //'number'
console.log(typeof typeof 3);  //'string'

十、内置函數

1.isNaN（）：判斷是否為NaN

console.log(isNaN('8 8'));//true
console.log(isNaN('3.4.2'));//true
console.log(isNaN(0 / 0));//true
console.log(isNaN(3 / 0));//false

2.evel（）：解析字元串為表達式并傳回表達式的結果

3.parseInt（‘字元串’，2-36）

将字元串左邊有效的數字部分，轉為整數。如果第一個字元是非有效數字，則轉NaN

第二個參數是用于限制第一個參數的進制範圍。

如果省略第二個參數或第二個參數為0時，表示十進制
如果第二個參數是小于2或者大于36，結果為NaN
如果第一個參數不符合第二個參數的進制範圍，結果為NaN

<script>
        console.log(parseInt("5 5")); //5 
        console.log(parseInt("3.256"));//3
        console.log(parseInt("3a"));//3
        console.log(parseInt("a3"));//NaN
        console.log(parseInt("0x56"));//86    //0x ：表示十六進制數
        console.log(parseInt("3",2));//NaN
        console.log(parseInt("3a",1));//NaN
    </script>

4.parseFloat（‘字元串’）

将字元串左邊有效的數字部分，轉為小數。如果第一個字元是非有效數字，則為NaN

console.log(parseFloat('3.4.5'));  //3.4
console.log(parseFloat('4 23'));  //4
console.log(parseFloat('a34.3')); //NaN

5.number（‘字元串’）

将有效數字字元串轉為數字。如果其中有一個非有效數字，則轉為NaN

console.log(Number('3.4.5'));  //NaN
console.log(Number('3 4'));  //NaN
console.log(Number('3a')); //NaN

十一、代碼規範

運算符兩邊加一個空格
語句結束加分号
如果在{}中，縮進一個tab
小括号嵌套，加空格（（））

day2 邏輯分支

一、程式控制的三大結構

順序結構

從上到下，從左到右依次執行每一條語句，不允許跳過任何一條語句。
選擇結構

根據條件判斷，執行某一段代碼
循環結構

滿足一定條件。重複執行一段代碼

二、實作選擇結構的語句有哪些？

？：
if
switch

if

單分支選擇

if(條件){
	語句組；
}

雙分支

if(條件){
	語句組；
}else{
	語句組；
}

多分支

if(條件){
	語句組；
}else if(條件){
	語句組；
}else if{
	語句組；
}
...
else if(條件){
	語句組；
}else{
	語句組；
}

switch

switch(表達式){
	case 表達式 ： 語句組;[break];
	case 表達式 ： 語句組;[break];
	case 表達式 ： 語句組;[break];
	...
	case 表達式 ： 語句組;[break];
	default : 語句組；
}

規則：先計算switch後表達式的值，該值如果與某個case後表達式的值一緻，則執行該case後的語句組，如果後面有break，則退出switch語句。如果沒有break，則繼續執行後面所有的語句組，知道遇到break或右大括号結束。

day3 循環結構

一、循環結構

滿足某一條件，重複執行某一段代碼。

二、循環思想（循環三要素）

從哪裡開始
到哪裡結束
步長（步進）

三、實作循環的語句？

while
do while
for

四、文法

while：當型循環

循環初值;
while（循環條件）{
	語句組；
	步長；
}

do while：直到型循環

循環初值;
do{
	語句組；
	步長；
}while（循環條件）;

for：多功能循環

for(循環初值；循環條件；步長){
	語句組;
}

五、額外的格式

循環初值；
for（；循環條件；步長）{
	語句組;
}

循環初值；
for(;循環條件；){
	語句組；
	步長；
}

六、無限循環（死循環）：條件永遠為真

while（1）{}

do{} while(1)；

for（；1；）{}

七、循環之間的差別

1.while

當型循環，先判斷條件，後執行語句
第一次條件為false是，一次都不執行
當循環次數不确定時，建議使用

2.do while

直到型循環，先執行語句，後判斷條件
第一次條件為false時，至少執行一次。
當循環次數不确定時，建議使用

3.for

當型循環，先判斷條件，後執行語句
是哪個第一次條件為false時，一次都不執行
當循環次數确定時，建議使用。

八、break continue

break

用于switch語句中，跳出switch語句
用于循環語句中，跳出目前循環

continue

用于循環語句，跳出本次循環，提前進入下一次循環。

day4 函數（上）

一、什麼是函數

反複使用功能代碼封裝

二、好處

程式可控
一次封裝，多次使用（複用）
随處可調

三、函數的分類

内置（庫、系統）函數
自定義函數

四、函數的類型

function

五、函數的聲明

語句定義法：任意位置都可調用

function 函數名（[參數]）{
	//實作的功能代碼
}

表達式定義法：隻能先聲明，後調用

var 函數名 = function（[參數]）{
	//實作的功能代碼
}

六、調用函數

一般調用：函數名（[參數]）
事件調用

七、函數的參數

實際參數（實參）：調用函數時使用的參數，可以包括常量、變量、表達式
形式參數（形參）：定義函數時使用的參數，隻能是變量。

注：

當實參數量多于形參數量時，多于的實參忽略

當實參數量少于形參數量時，多于的形參值為undefined

八、函數的傳回值

return：

将函數的處理結果傳回到調用該函數的地方
退出函數

九、事件相關概念

o_div.onclick = function(){
	console.log('我點選了滑鼠');
}
/*
o_div：事件監聽的對象
click：點選事件（名詞）
onclick：事件驅動
function（）{}事件處理程式
*/
/*
綁定事件的文法
對象.事件驅動 = 事件處理程式
*/

onload : 加載事件
    表單
    onfocus : 得焦事件
    onblur : 失焦事件
    onchange : 改變事件

    滑鼠
    onclick ：點選事件
    ondblclick : 輕按兩下事件
    onmousedown : 滑鼠按下事件
    onmouseup : 滑鼠彈起事件
    onmouseover : 滑鼠移入事件
    onmouseout : 滑鼠移出事件
    onmouseenter : 滑鼠移入事件
    onmouseleave : 滑鼠移出事件
    onmousemove : 滑鼠移動事件

    鍵盤
    onkeydown : 鍵盤按下事件
    onkeyup : 鍵盤彈起事件
    onkeypress : 鍵盤按過事件

day5 函數（下）

一、遞歸

自己調用自己

遞歸的本質：循環（初始值，條件，步長）

二、如何建立對象？

字面量的方式

{key：value，key：value}

當隻需要一個對象的時候使用
new 内置構造函數（）

new object（）;
new 自定義構造函數（）

new 函數名（）；

批量建立對象時使用

構造函數文法

function 函數名([參數]){
	this.屬性 = 值；
	this.方法 = function(){
	...
	}
}

三、如何通路對象中的屬性和方法

對象.屬性對象.方法
對象[‘屬性’] 對象’方法’

2020-08-29---周總結day1 JavaScript基本文法