前端第35期：DAY 1 -P1-P19

學習筆記：

模板字符串

1.``(反引號)

2.英文輸入1旁邊的那個鍵

3.拼接時用${}包裹住變量：${變量名}

eg:document.write（`你好，我是${name}，來自${address}，${age}歲`）

練習：

布爾型、null和undefined

通過typeof關(guān)鍵字檢測數(shù)據(jù)類型

兩種語法形式：（常用第一種）

練習：

隱式轉(zhuǎn)換

eg:

綜合案例：（***特別注意反引號）

常見錯誤：

let或者const不允許多次聲明同一個變量

const聲明常量，常量不允許被重新賦值

prompt獲取到的是字符型，會出現(xiàn)字符串相加的情況

prompt如果要相加，記得要轉(zhuǎn)為數(shù)字型，可以利用+最簡單：（

）

學習心得：感覺都挺熟悉，入手挺快。

前端第35期：DAY 2 -P20-P34

學習筆記：

算術(shù)運算符：也叫數(shù)學運算符，主要包括加、減、乘、除、取余（求模）等

注：在計算失敗時，顯示的結(jié)果是 NaN

只有變量能夠使用自增和自減運算符

*** 先&&后||

邏輯運算符優(yōu)先級： ！> && >?||

if 多分支語句

使用場景： 適合于有多個條件的時候

三元運算符（三元表達式）

條件 ? 表達式1 ： 表達式2

switch語句

switch case語句一般用于等值判斷, if適合于區(qū)間判斷

switch case一般需要配合break關(guān)鍵字使用

斷點調(diào)試

作用：幫助更好的理解代碼運行，更快找到bug

瀏覽器打開調(diào)試界面

1. 按F12打開開發(fā)者工具

2. 點到源代碼一欄 （ sources ）

3. 選擇代碼文件

斷點：在某句代碼上加的標記就叫斷點，當程序執(zhí)行到這句有標記的代碼時會暫停下來

（沒操作明白）明天繼續(xù)看一遍

break??中止整個循環(huán)，一般用于結(jié)果已經(jīng)得到, 后續(xù)的循環(huán)不需要的時候可以使用（提高效率）??

continue?中止本次循環(huán)，一般用于排除或者跳過某一個選項的時候

while(true) 來構(gòu)造“無限”循環(huán)，需要使用break退出循環(huán)。（常用）

for(;;) 也可以來構(gòu)造“無限”循環(huán)，同樣需要使用break退出循環(huán)。

綜合案例

作業(yè)

綜合案例變形

有點奇怪不太懂（撓頭）↓

學習心得：有些地方不是太明白，明天繼續(xù)，仔細搞清楚弄明白。

前端第35期：DAY 3 -P35-P49

學習筆記：

注：for 循環(huán)和 while 一樣，如果不合理設(shè)置增量和終止條件，便會產(chǎn)生死循環(huán)。

循環(huán)嵌套

注：外層循環(huán)循環(huán)一次，里層循環(huán)循環(huán)全部

多個數(shù)據(jù)可以用數(shù)組存起來，然后放到一個變量中，方便管理，數(shù)組單元之間使用英文逗號分隔。

操作數(shù)組

1. push 動態(tài)向數(shù)組的尾部添加一個單元

2. unshit 動態(tài)向數(shù)組頭部添加一個單元

3. pop 刪除最后一個單元

4. shift 刪除第一個單元

5. splice 動態(tài)刪除任意單元

作業(yè)：

學習心得：今天的有些以前沒接觸過，有點新奇，學的有點慢，明天量稍微減一點，學扎實一點，加油！

前端第35期：DAY 4 -P50-P53

學習筆記：

函數(shù)

聲明（定義）一個完整函數(shù)包括關(guān)鍵字、函數(shù)名、形式參數(shù)、函數(shù)體、返回值5個部分

調(diào)用

聲明（定義）的函數(shù)必須調(diào)用才會真正被執(zhí)行，使用 （）調(diào)用函數(shù)

參數(shù)

通過向函數(shù)傳遞參數(shù)，可以讓函數(shù)更加靈活多變，參數(shù)可以理解成是一個變量。

注： 多個數(shù)據(jù)用逗號隔開

arr （傳上去是數(shù)組）

記得給個空值不然報錯

形參和實參

形參：聲明函數(shù)時寫在函數(shù)名右邊小括號里的叫形參（形式上的參數(shù)）

實參：調(diào)用函數(shù)時寫在函數(shù)名右邊小括號里的叫實參（實際上的參數(shù)）

形參可以理解為是在這個函數(shù)內(nèi)聲明的變量（比如 num1 = 10）實參可以理解為是給這個變量賦值

開發(fā)中盡量保持形參和實參個數(shù)一致

學習心得：封裝后調(diào)用方便了好多，不用一直復制真好。以前的人怎么想到的真牛

前端第35期：DAY 5 -P53-P55

學習筆記：

返回值

函數(shù)的本質(zhì)是封裝（包裹），函數(shù)體內(nèi)的邏輯執(zhí)行完畢后，想獲得函數(shù)內(nèi)部邏輯的執(zhí)行結(jié)果，要通過 return 關(guān)鍵字，將內(nèi)部執(zhí)行結(jié)果傳遞到函數(shù)外部，這個被傳遞到外部的結(jié)果就是返回值。

注：函數(shù)內(nèi)部只能出現(xiàn)1 次 return，并且 return 下一行代碼不會再被執(zhí)行，所以return 后面的數(shù)據(jù)不要換行寫

return會立即結(jié)束當前函數(shù)

函數(shù)可以沒有return，這種情況默認返回值為 undefined

學習心得：學習了return的使用情況，及其一些注意事項

前端第35期：DAY 6 -P56-P58

學習筆記：

兩個相同的函數(shù)后面的會覆蓋前面的函數(shù)

實參的個數(shù)和形參的個數(shù)可以不一致

如果形參過多 會自動填上undefined

如果實參過多 那么多余的實參會被忽略 (函數(shù)內(nèi)部有一個arguments,里面裝著所有的實參)

作用域

作用域的不同，變量可以分為全局變量和局部變量

全局作用域

作用于所有代碼執(zhí)行的環(huán)境(整個 script 標簽內(nèi)部)或者一個獨立的 js 文件。處于全局作用域內(nèi)的變量，稱為全局變量

局部作用域

作用于函數(shù)內(nèi)的代碼環(huán)境，就是局部作用域。 因為跟函數(shù)有關(guān)系，所以也稱為函數(shù)作用域。處于局部作用域內(nèi)的變量稱為局部變量

變量有一個坑， 特殊情況：

如果函數(shù)內(nèi)部，變量沒有聲明，直接賦值，也當全局變量看，但是強烈不推薦

但是有一種情況，函數(shù)內(nèi)部的形參可以看做是局部變量。

變量的訪問原則：在能夠訪問到的情況下 先局部， 局部沒有在找全局（就近原則）

學習心得：知道了形參和實參的個數(shù)可以不一致，曉得了變量有個坑，以及函數(shù)內(nèi)部的形參可以看做是局部變量。變量的訪問原則

前端第35期：DAY 7 -P59-P67

學習筆記：

函數(shù)表達式

將匿名函數(shù)賦值給一個變量，并且通過變量名稱進行調(diào)用

立即執(zhí)行函數(shù)

注意： 多個立即執(zhí)行函數(shù)要用 ; 隔開，要不然會報錯

無需調(diào)用，立即執(zhí)行，其實本質(zhì)已經(jīng)調(diào)用了

邏輯運算符里的短路

短路：只存在于 && 和 || 中，當滿足一定條件會讓右邊代碼不執(zhí)行

轉(zhuǎn)換為Boolean型

‘’、0、undefined、null、false、NaN 轉(zhuǎn)換為布爾值后都是false, 其余則為 true

隱式轉(zhuǎn)換：

1. 有字符串的加法 “” + 1 ，結(jié)果是 “1”

2. 減法 - （像大多數(shù)數(shù)學運算一樣）只能用于數(shù)字，它會使空字符串 "" 轉(zhuǎn)換為 0

3. null 經(jīng)過數(shù)字轉(zhuǎn)換之后會變?yōu)?0

4. undefined 經(jīng)過數(shù)字轉(zhuǎn)換之后會變?yōu)?NaN

對象

對象是一種數(shù)據(jù)類型。無序的數(shù)據(jù)的集合

特點：

無序的數(shù)據(jù)的集合；可以詳細的描述描述某個事物

對象有屬性和方法組成

屬性

數(shù)據(jù)描述性的信息稱為屬性，如人的姓名、身高、年齡、性別等，一般是名詞性的

多個屬性之間使用英文 , 分隔

屬性名和值，它們之間使用英文 : 分隔

屬性名可以使用 ""或 ''，一般情況下省略，除非名稱遇到特殊符號如空格、中橫線等

感覺和C語言中的結(jié)構(gòu)體好像

聲明對象

1.對象查語法:

對象名.屬性

（查的另外一種寫法）

對象[‘屬性’] 方式， 單引號和雙引號都可以

2.對象改語法:

對象名.屬性 = 新值

3.對象增語法:

對象名.新屬性名 = 新值

4.對象刪語法：(了解）

delete 對象名.屬性

學習心得：知道了立即執(zhí)行函數(shù)，短路，還有那些情況轉(zhuǎn)布爾型后是false，還有屬性一些語法

前端第35期：DAY 8 -P68-P69

學習筆記：

方法：

在內(nèi)部是方法，在外部是函數(shù)

1. 方法是由方法名和函數(shù)兩部分構(gòu)成，它們之間使用 : 分隔

2. 多個屬性之間使用英文 , 分隔

3. 方法是依附在對象中的函數(shù)

4. 方法名可以使用 "" 或 ''，一般情況下省略，除非名稱遇到特殊符號如空格、中橫線等

調(diào)用方法：

（錯誤的）：

（正確的）

遍歷對象

用for in遍歷對象

一般不用這種方式遍歷數(shù)組，主要是用來遍歷對象

for in語法中的 k 是一個變量, 在循環(huán)的過程中依次代表對象的屬性名

由于 k 是變量, 所以必須使用 [ ] 語法解析

注意： k 是獲得對象的屬性名， 對象名[k] 是獲得 屬性值

學習心得：曉得了調(diào)用方法不用再寫console log了，直接寫對象名.方法名。遍歷對象要用for in，打印時，k是屬性名，并且是‘屬性名’，所以需要 對象名【屬性名】 eg:console log(obj[k])，著重記憶

前端第35期：DAY 9 -P70-P71

學習筆記：

遍歷數(shù)組對象

用的傳統(tǒng)的for

內(nèi)置對象：

Math對象包含的方法有：

random：生成0-1之間的隨機數(shù)（包含0不包括1）

0-10之間的隨機數(shù)

eg: Math.floor(Math.random() * (10 + 1))

ceil：向上取整

floor：向下取整

round: 四舍五入

max：找最大數(shù)

min：找最小數(shù)

pow：冪運算

abs：絕對值

sqrt: 平方根

聲明一個空的對象（沒有任何屬性，也沒有任何方法），動態(tài)追加屬性

學習心得：遍歷數(shù)組對 象用傳統(tǒng)的for，遍歷數(shù)組不推薦用for in

前端第35期：DAY 10 -P72-P77

學習筆記：

random：生成0-1之間的隨機數(shù)（包含0不包括1）【0,1）

eg: 0-10之間的隨機整數(shù)[0,11)

Math.floor(Math.random() * (10 + 1))

隨機抽數(shù)組中的一個元素

N-M之間的隨機數(shù)

例子：抽取名字，刪除抽中的名字

回憶splice, splice(起始位置下標，刪除幾個元素)

例子：猜數(shù)字

用while循環(huán)來不斷地循環(huán)，提示輸入數(shù)字

限制猜的次數(shù)，用for來實現(xiàn)

基本數(shù)據(jù)類型和引用數(shù)據(jù)類型

感覺和指針有點像

學習心得：學會了怎么做點名，明天開web APIs，加油

前端第35期：DAY 12 -P78-P80

學習筆記：

變量聲明有三個 var let 和 const

const 優(yōu)先，盡量使用const

有了變量先給const，如果發(fā)現(xiàn)它后面是要被修改的，再改為let

const 聲明的值不能更改，而且const聲明變量的時候需要里面進行初始化

const聲明的變量，里面存的不是值，是地址

建議數(shù)組和對象使用 const 來聲明

DOM (文檔對象模型)、BOM（瀏覽器對象模型）

DOM作用：

操作網(wǎng)頁內(nèi)容，可以開發(fā)網(wǎng)頁內(nèi)容特效和實現(xiàn)用戶交互

DOM樹：

將 HTML 文檔以樹狀結(jié)構(gòu)直觀的表現(xiàn)出來，我們稱之為文檔樹或 DOM樹

作用：文檔樹直觀的體現(xiàn)了標簽與標簽之間的關(guān)系

DOM對象：

瀏覽器根據(jù)html標簽生成的 JS對象（DOM對象）

DOM的核心就是把內(nèi)容當對象來處理

document ：

是 DOM 里提供的一個對象

網(wǎng)頁所有內(nèi)容都在document里面

學習心得：之前聲明用的var，前幾天學用let，現(xiàn)在知道了用const最好（變量不再變的情況下），開始學DOM了，近段時間好忙，昨天都沒打卡，改天再補上吧

前端第35期：DAY 13 -P81

學習筆記：

獲取DOM元素

根據(jù)css選擇器來獲取DOM元素（重點）

選擇匹配的第一個元素

document.querySelector('css選擇器')

參數(shù)：包含一個或多個有效的css選擇器 字符串

返回值：css選擇器匹配的第一個元素，一個HTMLElement對象。如果沒有匹配到，則返回null。

nav一定要加‘#’

獲取ul 里面的一個小li

選擇匹配的多個元素

document.querySelectorALL('css選擇器')

參數(shù)：包含一個或多個有效的css選擇器 字符串

返回值：css選擇器匹配的NodeList 對象集合

這個得到的是一個偽數(shù)組：

有長度有索引的數(shù)組，但是沒有pop() push() 等數(shù)組方法

想要得到里面的每一個對象，則需要遍歷（for）的方式獲得

注：就算只有一個元素，通過querySelectAll()獲取過來的也是一個偽數(shù)組，里面只有一個元素

注意：小括號里面的參數(shù)寫css選擇器，必須是字符串，也就是必須加引號

其他獲取DOM元素方法

學習心得：學了根據(jù)css選擇器來獲取DOM元素，學會了選擇第一個和多個元素的方式querySelector 和querySelectorAll

前端第35期：DAY 14 -P82

學習筆記：

DOM對象都是根據(jù)標簽生成的,所以操作標簽,本質(zhì)上就是操作DOM對象。

通過修改 DOM 的文本內(nèi)容，動態(tài)改變網(wǎng)頁的內(nèi)容

修改DOM元素：

元素.innerText屬性只識別文本，不能解析標簽

將文本內(nèi)容添加/更新到任意標簽位置

元素.innerHTML屬性 能識別文本，能夠解析標簽

將文本內(nèi)容添加/更新到任意標簽位置

會解析標簽，多標簽建議使用模板字符

一般多數(shù)情況下選擇用元素.innerHTML

學習心得：知道了怎么操作修改DOM元素，用元素.innerHTML最好

前端第35期：DAY 15 -P83-P84

學習筆記：

通過 JS 設(shè)置/修改標簽元素屬性，比如通過 src更換 圖片

通過JS來設(shè)置/修改標簽元素屬性

對象.屬性=值

注：先獲取再修改

直接能過屬性名修改，最簡潔的語法

通過修改行內(nèi)樣式 style 屬性，實現(xiàn)對樣式的動態(tài)修改

對象.style.樣式屬性=值

注：修改時，值不要忘了單位

任何標簽都有 style 屬性，通過 style 屬性可以動態(tài)更改網(wǎng)頁標簽的樣式，如要遇到 css 屬性中包含字符 - 時，要將 - 去掉并將其后面的字母改成大寫

或者說 多組單詞的采取小駝峰命名法

例如：background-color 采取backgroundColor

因為body是唯一的標簽，可直接寫document.body.style

學習心得：

學會了通過JS來修改標簽元素屬性和通過style來操作css

前端第35期：DAY 17 -P85-P86

學習筆記：

用className來修改樣式

由于class是關(guān)鍵字，所以使用className去替代

注意：className是使用新值換舊值，會覆蓋掉之前引用的類名

如果兩個都想要，那就都寫上，例如上圖，既想要nav又想要box

使用className可以同時修改多個樣式，簡潔許多

注意：直接使用className賦值會覆蓋以前的類名

為了解決className容易覆蓋以前的類名，我們可以通過classList方式追加和刪除類名（常用）

在原先的類名上追加的

不用擔心被覆蓋掉了

刪除和切換

經(jīng)常還是用classList

學習心得：學了用className和classList來修改樣式，通常還是用classList修改方便一點

前端第35期：DAY 18 -P87

學習筆記：

點擊刷新，隨機輪播圖，確保圖片和背景顏色以及下面的小圓點都會隨之刷新

獲取N~M的隨機數(shù)

用parseInt來取整，例如2.1取整就是2, 2.9取整也是2，向下取整 后面就是獲得隨機數(shù)了

隨機sliderData數(shù)組里的一個對象打印到控制臺上

然后就是將相應(yīng)的數(shù)據(jù)渲染到標簽里面

獲取圖片路徑

隨后修改圖片路徑

對象.url修改 就是把sliderData數(shù)組里抽取的對象的url賦給前面

學習心得：前面學的有點忘了啊，改天需要抽個時間回顧一下，時間真不夠用啊

前端第35期：DAY 19 -P88

學習筆記：

注意：此處需要加點，和以前css的寫法相同

修改圖片下方的文本，使其跟隨圖片改變而改變，首先先獲取文本p

然后再用sliderData數(shù)組里的title和圖片一樣的隨機賦給p.innerHTML來修改

背景顏色的修改和文本的修改大差不差，都是先獲取，然后將sliderData數(shù)組里的color和圖片一樣的隨機賦給背景顏色來修改

讓小圓點隨著刷新和圖片一樣改變

一樣也是先獲取，之后用classList.add來為li添加active這個類，來讓小圓點高亮顯示

classList最為重要

學習心得：小圓點這塊有點不太通，不過知道了classList的添加類，是會了

前端第35期：DAY 20 -P89

學習筆記：

獲取表單的值，用 表單.value

注：innerHTML得不到表單內(nèi)容

設(shè)置表單的值，將其設(shè)置成password的，點一下就是text，點一下就是password

操作表單元素屬性

添加就有效果，移出就沒，一律使用布爾值表示

disabled，checked，selected

checked多選框用

checked只能接受布爾值，所以會有隱式轉(zhuǎn)換，會選中，但不提倡

這個checked有的話默認為true，沒有為false

ipt.checked=true是用js的方式勾選上多選框

disabled是禁用 為true時，按鈕就不能點了

屬性和值相同，可以省略，只寫一個

學習心得：知道了disabled和checked的使用，還有屬性和值兩個相同可以省略寫

前端第35期：DAY 11 -P90 （補卡）

學習筆記：

標準屬性：標簽天生自帶的屬性 比如class id title等, 可以直接使用點語法操作比如：disabled、checked、selected

自定義屬性:html5中推出的

在標簽上一律以data-開頭

在DOM對象上一律以dataset對象方式獲取

dataset獲取全部，以集合的形式

如果只需要其中一個，那么后面 dataset.屬性 就行

學習心得：知道了怎么寫自定義屬性，data-XXX XXX自己起。dataset獲取全部，需要一個則后面加上 .屬性

前端第35期：DAY 16 -P91 （補卡）

學習筆記：

定時器--間歇函數(shù)

使用定時器函數(shù)重復執(zhí)行代碼

開啟定時器

setInterval(函數(shù),間隔時間)

每每隔一段時間調(diào)用這個函數(shù)

間隔時間單位是毫秒（注：1秒=1000毫秒）

第一種寫法

第二種寫法：（注：函數(shù)直接寫函數(shù)名，不要加小括號）

加小括號的（也能使用，但極為少見，不建議使用）

定時器返回的是一個id數(shù)字

關(guān)閉定時器

let 變量名=setInterval(函數(shù),間隔時間)

clearInterval(變量名)

先let 變量獲得定時器返回的id數(shù)字,然后用clearInterval（）關(guān)閉定時器

eg:

學習心得：

學會了使用定時器，知道怎么開啟關(guān)閉，以及一些注意事項

前端第35期：DAY 21 -P92-P93

學習筆記：

button是個特殊的雙標簽，用value不能獲得表單的值，得用innerHTML才行

選擇器選的時候要加點，remove不用加點

無縫銜接位置一定要放在i++后面

學習心得：設(shè)置小圓點的時候要注意移除上一個的高亮的類名，然后為現(xiàn)在當前的小圓點添加類。button用innerHTML來獲取值。輪播圖自動從頭播放的if設(shè)置要緊挨著放在i++后面