3.js注釋和變量

//單行注釋 多行注釋/* */

var 變量值 = 值【1】一個(gè)變量名只能存儲(chǔ)一個(gè)值【2】賦值覆蓋【3】嚴(yán)格區(qū)分大小寫(xiě)

命名規(guī)則

4.數(shù)據(jù)類(lèi)型

Number ：10、12.5、0xff、0b11、2e3、 a+b

String："20"，10+"20"=1020

Boolean：true、false

Undefined：聲明但未賦值

Null：null

Symbol、復(fù)雜類(lèi)型

檢測(cè)數(shù)據(jù)類(lèi)型

數(shù)據(jù)類(lèi)型轉(zhuǎn)換

5.運(yùn)算符

數(shù)字運(yùn)算符[ + - * / %]

console.log("1"+"2"*3+4) =>164

賦值運(yùn)算符

比較運(yùn)算符

邏輯運(yùn)算符

&& || ！

自增運(yùn)算符

i++ ++i

i-- --i

三元運(yùn)算符

？：

day02

6.條件分支語(yǔ)句和循環(huán)分支語(yǔ)句

if語(yǔ)句

①

if(條件表達(dá)式){  
   語(yǔ)句...  
}  

②

if(條件表達(dá)式){  
	語(yǔ)句...  
}else{  
	語(yǔ)句...  
} 

③

if(條件表達(dá)式){  
	語(yǔ)句...  
}else if(條件表達(dá)式){  
	語(yǔ)句...  
}else if(條件表達(dá)式){  
	語(yǔ)句...  
}else if(條件表達(dá)式){  
	語(yǔ)句...  
}else{  
	語(yǔ)句...  
}

switch語(yǔ)句

switch (變量/表達(dá)式) {
    case 常量值/變量/表達(dá)式:
        語(yǔ)句;
        break;
    case 常量值/變量/表達(dá)式:
        語(yǔ)句;
        break;
    default:
        語(yǔ)句;
}

• 1、===
• 2、不要比較運(yùn)算符
• 3、break

while語(yǔ)句

while(條件表達(dá)式){  
    語(yǔ)句...  
}  

do{  
語(yǔ)句...  
}while(條件表達(dá)式) 

和while的區(qū)別：

while：先判斷后執(zhí)行

do...while: 先執(zhí)行后判斷

do...while可以確保循環(huán)體至少執(zhí)行一次

for循環(huán)

for(1初始化表達(dá)式 ; 2條件表達(dá)式 ; 4更新表達(dá)式){  
    3語(yǔ)句...  
} 

break 和 continue

break;：立即終止本層次循環(huán)。

continue;：立即跳過(guò)本層次循環(huán)，提前進(jìn)入本層次的下一次循環(huán)。

7.函數(shù)

1、定義函數(shù)

聲明式：function test1(){......}

賦值式：var test = function(){......}

【區(qū)別】聲明式先調(diào)用再聲明，賦值式先定義再調(diào)用

2、調(diào)用函數(shù)

test()

函數(shù)參數(shù)

形參：形式參數(shù)

實(shí)參：實(shí)際參數(shù)

可以不傳參、形參只能在函數(shù)內(nèi)部去使用

函數(shù)返回值 return

1、看需求要不要返回值

2、return打斷函數(shù)執(zhí)行

預(yù)解析

作用域

全局直到頁(yè)面關(guān)閉

局部（函數(shù)內(nèi)）

局部變量vs全局變量

訪(fǎng)問(wèn)規(guī)則

https://github.com/Stone186/JavaScriptStudyDemo

day03

8.對(duì)象

復(fù)雜數(shù)據(jù)類(lèi)型：存儲(chǔ)一些基本數(shù)據(jù)類(lèi)型的一個(gè)集合

①字面量創(chuàng)建?var obj ={

? ? ? ? num:100,

? ? ? ? str:"hello woorld",

? ? ? ? boo:true

"a+b:"111"

? ? ? ?}

obj.num obj.str obj.boo

?②內(nèi)置構(gòu)造函數(shù) var obj = new Object()

對(duì)象的基本操作

①

增：var obj = { }

查：document.write(obj.name)

改：obj.name = "Jack"

刪：delete obj.name

②

增：obj2["name"] = "Tom"

查：document.write(obj2["name"])

改：obj["name"] = "Jack"

刪：delete obj["name"]

區(qū)別：鍵名為"a+b"表達(dá)式只能使用第二種方式

對(duì)象遍歷

? ? ? ?for(var i in obj){

? ? ? ? document.write(i+":"+obj[i])

? ? ? ? document.write("<br>")

? ? ? ?}

不同數(shù)據(jù)類(lèi)型的存儲(chǔ)

棧：存儲(chǔ)簡(jiǎn)單類(lèi)型 堆：復(fù)雜類(lèi)型

obj2 = obj1引用

9.數(shù)組

? ? ? ?var arr = [10,11,12,13,14,15]

? ? ? ?//字面量創(chuàng)建數(shù)組

? ? ? ?var arr1 = new Array(10,11,12,13,14,15)

? ? ? ?var arr2 = new Array(10)

? ? ? ?//new 數(shù)組 arr1有6個(gè)元素 arr2有10個(gè)元素(empty)

數(shù)組基本操作

length

arr.length // 可讀可寫(xiě)

arr.length = 0清空數(shù)組

index

arr[0]

遍歷

for (var i=0;i<arr.length ;i++){console.log(i)}

push：追加元素 返回值：長(zhǎng)度

pop：刪除元素 返回值：刪除元素

unshift：前面追加元素 返回值：長(zhǎng)度

shift：前面刪除元素 返回值：刪除的這個(gè)元素

splice：刪除或增加 刪：arr.splice(1,3) 加arr.splice(1,0,"hello") 刪后加 arr.splice(1,2,"hello","woorld")

resver：倒序

sort： 排序 可接受一個(gè)回調(diào)函數(shù)arr.sort(function(a,b){

return a-b //從小到大 b-a從大到小

})

concat： 拼接

join：數(shù)組=>字符串a(chǎn)rr.join("|")

slice：截?。ㄩ_(kāi)始索引，結(jié)束索引）

indexof：獲取索引值

lastIndexof：-1找不到（從后往前）返回值：刪除內(nèi)容

forEach：遍歷，回調(diào)函數(shù)

arr.forEach(function(item,index){consloe.log(itemm,index})

map：映射 回調(diào)函數(shù)

var arr = arr.map(function(item){return item})

filter：過(guò)濾 arr.filter(function(item){ return true/false(bool型數(shù)據(jù)，滿(mǎn)足一個(gè)返回一個(gè)) item>200 })

every：每一個(gè) arr.every(function(item){return (bool每一個(gè)都需要符合條件為true，只要有一個(gè)不符合false) item>=90 })

some：只要有一個(gè) arr.some(function(item){return (bool每一個(gè)都不符合條件為false，只要有一個(gè)符合true) item>=90 })

find：找出所有符合條件，多個(gè)只給一個(gè)arr.find(function(item){return item.key === 100})

reduce：疊加

arr.reduce(function(prev,item){return prev+item},0(初始值，可以為空字符串""))

冒泡排序

1. for?(var?i?=?0;?i?<?arr.length?-?1;?i++)?{??
2. ????????????????for?(var?j?=?0;?j?<?arr.length?-?1?-?i;?j++)?{??
3. ????????????????????if?(arr[j]?>?arr[j?+?1])?{??
4. ????????????????????????var?tmp?=?arr[j]??
5. ????????????????????????arr[j]?=?arr[j?+?1]??
6. ????????????????????????arr[j?+?1]?=?tmp??
7. ????????????????????}??
8. ????????????????}??
9. ????????????}?

選擇排序

1. for?(var?i?=?0;?i?<?arr.length?-?1;?i++)?{??
2. ????var?minIndex?=?i;??
3. ????for?(var?j?=?i+1;?j?<?arr.length;?j++)?{??
4. ??
5. ????????if?(arr[minIndex]?>?arr[j])?{??
6. ????????????minIndex?=?j??
7. ????????}??
8. ????}??
9. ????var?tmp?=?arr[i]??
10. ????arr[i]?=?arr[minIndex]??
11. ????arr[minIndex]?=?tmp??
12. }??

數(shù)組去重：

一、

1. var?arr?=?[1,?3,?2,?4,?3,?2,?5,?6,?4]??
2. var?arrcpoy?=?[]??
3. for?(var?i?=?0;?i?<arr.length;i++){??
4. ????if(arrcpoy.indexOf(arr[i])?===?-1){??
5. ????????arrcpoy.push(arr[i])??
6. ????}??
7. }?

二、利用對(duì)象

1. for?(var?i?=?0;?i?<?arr.length;?i++)?{??
2. ?????obj[arr[i]]?=?""??
3. ?}??
4. ?var?arr2?=?[]??
5. ?for?(var?i?in?arr2)?{??
6. ?????arr2.push(i?-?0)??
7. ?}??

三、new Set

1. var?set1?=?new?Set(arr)??
2. var?arr1?=?Array.from(set1)??

四、splice

字符串

var str1 = "hello"

var str2 = new String("world")

str1.length（長(zhǎng)度只讀）str2[index] （索引只讀）字符串可以直接用 = 賦值（簡(jiǎn)單類(lèi)型）

統(tǒng)計(jì)字符串中單詞重復(fù)次數(shù)

字符串常用方法

chartAt(索引) 返回對(duì)應(yīng)的字符

charCodeAt(索引) 返回索引對(duì)應(yīng)的字符編碼 String.formCharcode(i) 將字符編碼i轉(zhuǎn)為字符

toUpperCase() toLowerCase()大小寫(xiě)轉(zhuǎn)換

substr(開(kāi)始索引,截取長(zhǎng)度) substring(開(kāi)始索引,結(jié)束索引) slice(開(kāi)始索引,結(jié)束索引) 截取字符串

replace 替換 replace("目標(biāo)字符","替換字符")只替換遇見(jiàn)第一個(gè) 所有：for循環(huán)或正則表達(dá)式

split str.split("|")分割字符串

indexOf lastIndexOf

contact 連接字符串 +

trim 去掉首尾空格

trimStart() trimLeft()去掉首空格

trimEnd() trimRight()去掉尾空格

模糊查詢(xún)

day04

json字符串

var str = '{"name":"jack","age":"20"}'

var obj = JSON.parse(str)

var obj1 = {"name":"tiechui"}

var str1 = JSON.stringify(obj1)

模板字符串ES6

\ ` 表明還是同一字符串

1. var?myhtml?=???
2. "<li>111<li>??
3. ????<li>111<li>??
4. ????<li>111<li>"??
5. ??
6. var?myhtml2?=??
7. ????"<li>111<li>\??
8. <li>111<li>\??
9. <li>111<li>"??
10. var?myhtml2?=??
11. ????`<li>111<li>??
12. <li>111<li>??
13. <li>111<li>`?

${ 變量 }

1. var?name?=?"stone"??
2. ????????????var?str?=?`my?name?is?${name}`??

數(shù)字常用方法Number

toFixed(n)保留n小數(shù)位，返回字符串類(lèi)型

Math對(duì)象

random 0~1之間隨機(jī)數(shù)，包括0不包括1

round 四舍五入

ceil 向上 floor向下取整

abs 絕對(duì)值

sqrt 平方根

pow(底數(shù),指數(shù)) pow(2,3)=8

max(多個(gè)參數(shù)) 取最大值

max(多個(gè)參數(shù)) 取最小值

PI π

隨機(jī)整數(shù)

函數(shù)實(shí)現(xiàn)

時(shí)間對(duì)象

new Date()不傳參返回當(dāng)前時(shí)間

一個(gè)參數(shù) new Date(毫秒數(shù)) 1970 1 1 0:00 + 毫秒數(shù)

二個(gè)參數(shù) 、三個(gè)參數(shù) new Date(年,月,日,時(shí)2,分,秒)

字符串 new Date("2023-10-10 10:10:10")

時(shí)間對(duì)象常用方法

getFullYear() 年 getMouth() /0~11=>1~12/ getDate()日 getDay()獲取周幾(周日 0 一 ~ 六 1~6)

getHours() getMinutes() getSeconds() getMilliseconds()

getTime()獲取時(shí)間戳 1970 1 1 0:00 至今 毫秒數(shù)

new Date(getTime()) 當(dāng)前時(shí)間

設(shè)置setFullYear() setMouth() setDate() 無(wú)setDate(根據(jù)年月日獲取) setHour() setMinutes() setSeconds()

setTime() 等價(jià)于new Date()

定時(shí)器 倒計(jì)時(shí)和間隔定時(shí)器

倒計(jì)時(shí) setTimeout(執(zhí)行函數(shù)，多長(zhǎng)時(shí)間后執(zhí)行) clearTimeout()

間隔定時(shí)器 setInterval(執(zhí)行函數(shù)，執(zhí)行間隔) clearInterval()

按鈕對(duì)象 button 綁定事件 btn.onclick = function(){}

異步執(zhí)行 死循環(huán)阻塞異步代碼

倒計(jì)時(shí)案例

1. <!DOCTYPE?html>??
2. ??
3. <head>??
4. ????<meta?charset="utf-8">??
5. ????<title>倒計(jì)時(shí)案例</title>??
6. ??
7. </head>??
8. ??
9. <body>??
10. ????<div?id="box"></div>??
11. ????<script>??
12. ????????var?targetDate?=?new?Date("2023/6/18")??
13. ??
14. ????????function?diffTime(current,?target)?{??
15. ????????????var?sub?=?Math.ceil((target?-?current)?/?1000)??
16. ??
17. ????????????var?day?=?parseInt(sub?/?(60?*?60?*?24))??
18. ??
19. ????????????var?hours?=?parseInt(sub?%?(60?*?60?*?24)?/?(60?*?60))??
20. ??
21. ????????????var?minutes?=?parseInt(sub?%?(60?*?60)?/?10)??
22. ??
23. ????????????var?seconds?=?sub?%?60??
24. ????????????var?obj?=?{??
25. ????????????????day:?day,??
26. ????????????????hours:?hours,??
27. ????????????????minutes:?minutes,??
28. ????????????????seconds:?seconds??
29. ????????????}??
30. ????????????return?obj??
31. ????????}??
32. ????????setInterval(function?()?{??
33. ????????????var?currentDate?=?new?Date()??
34. ????????????var?res?=?diffTime(currentDate,?targetDate)??
35. ??
36. ????????????box.innerHTML?=?`京東618-${res.day}天${res.hours}時(shí)??
37. ????????????${res.minutes}分${res.seconds}秒`??
38. ????????},?1000)??
39. ????</script>??
40. ??
41. </body>??

day05

BOM對(duì)象

1、獲取瀏覽器窗口尺寸

window.innerHeight,innerHeight/innerWidth包含滾動(dòng)條寬高

2、瀏覽器彈出層 阻塞式彈出

alert() window.alert()

confirm()詢(xún)問(wèn)框 返回值 true/false

prompt() 輸入框 返回 輸入內(nèi)容字符串

3、瀏覽器地址欄

location.herf 獲取地址欄或跳轉(zhuǎn)

location.herf = "自定義頁(yè)面" 跳轉(zhuǎn)

reload 刷新

4、瀏覽器常見(jiàn)事件

onload()所有資源加載完畢執(zhí)行

resize

onresize 屏幕大小改變是發(fā)生 響應(yīng)式布局

onscroll 屏幕發(fā)生滾動(dòng)觸發(fā)

瀏覽器滾動(dòng)距離document.documentElement.scrollTop(scrollLeft)

去除<!DOCTYPE html>時(shí)失效 ， 使用document.body.scrollTop 保證兼容性 ||

window.scrollTo(x,y) 滾動(dòng)到對(duì)應(yīng)x、y坐標(biāo)

或({left:0,top:0})

5、瀏覽器打開(kāi)標(biāo)簽頁(yè)

window.open("htttp://www.baidu.com")

window.close()關(guān)閉當(dāng)前標(biāo)簽頁(yè)

6、瀏覽器歷史記錄

window.history.back()后退 必須保證有上一個(gè)頁(yè)面

history.forword()前進(jìn) 必須保證有下一個(gè)頁(yè)面

history.go(1|-1) 1前進(jìn)一個(gè)頁(yè)面，-1后退一個(gè)頁(yè)面

7、瀏覽器本地存儲(chǔ)

localStorage與當(dāng)前頁(yè)面有關(guān)

setItem("key","value")只能存字符串，存對(duì)象：JSON.stringify({ }) 取JSON.parse

getItem("key")

removeItem("key")

clear()刪除全部

sessionStorage 用法相同 區(qū)別 localStorage永久存儲(chǔ) 關(guān)閉頁(yè)面或電腦都存在 sessionStorage 會(huì)話(huà)存儲(chǔ)（臨時(shí)）

案例 記住用戶(hù)名

DOM對(duì)象 文檔對(duì)象類(lèi)型

獲取元素的方式

非常規(guī) html，head，body

document.doucmentElement // rem

document.head document.body

常規(guī)=> id，class，tag、、、

document.getElementById("id")

document.getElementsByClassName

var item = document.getElementsByClassName("newsitem")
console.log(item)//偽數(shù)組
items[0].innerHTML = "news-111"
for(var i=0;i<item.length;i++){
    item[i].innerHTML = "news-"+i
  }轉(zhuǎn)換真數(shù)組var newitems = Array.form(items)

document.getElementsByTagName("li")返回偽數(shù)組

name <input name="username/password" type="text/password">

document.getElementsByName("username/password") 返回偽數(shù)組

css選擇器

querySelector返回對(duì)象，返回遇到的第一個(gè)

var item = document.querySelector("#box")

querySelectorAll

var item = document.querySelector("ul li.newsitem")

操作元素屬性

day06

初識(shí)事件

事件源、事件類(lèi)型、事件處理函數(shù)

DOM0類(lèi)型 后面會(huì)覆蓋前面的 box.onclick

DOM2 綁定多個(gè)事件處理函數(shù)，按順序執(zhí)行

box.addEventListener兼容性attachEvent

this.disabled = "disable"

事件解綁 ①dom.onclick = null

function handler(){}

②box.removeEventListener("click",handler)

兼容性detachEvent

事件類(lèi)型

click單擊 dbclick雙擊

右鍵 contextmenu btn.oncontextmenu 自定義右鍵菜單

mousedown mousemove mouseup鼠標(biāo)

移入移出 mouseover/mouseenter mouseout/mouseleave 區(qū)別前面的在孩子節(jié)點(diǎn)也會(huì)觸發(fā)

鍵盤(pán)

focus / blur 獲取/失去焦點(diǎn)

change 獲取焦點(diǎn)和失去焦點(diǎn)時(shí)對(duì)比內(nèi)容不一樣時(shí)觸發(fā)

submit / reset

阻止表單觸發(fā)

移動(dòng)端

touchstart touchmove touchend touchcancel

事件對(duì)象