【干貨】新中地GIS開發(fā)夏令營文檔（4）JavaScript
第四章: JavaScript
一. JavaScript簡介
1 JS的發(fā)展歷程
回顧整個JavaScript的發(fā)展歷程, 實際上就是Web發(fā)展的歷程
從最開始的撥號上網(wǎng)方式到現(xiàn)在的100M光纖, 4G/5G移動Web的發(fā)展
在近20年, 上網(wǎng)的方式發(fā)生了翻天復(fù)地的變化, 可以說是科技大爆炸.
人們在享受越來越便捷的上網(wǎng)的同時, 對Web產(chǎn)品的需求越來越高
從單純的對訪問速度的需求, 越來越多的轉(zhuǎn)移到視覺美感, 智能操作交互, 沉浸式虛擬現(xiàn)實, 這些需求又反過來推動了技術(shù)的不斷創(chuàng)新與進步.
1) JS的誕生
在互聯(lián)網(wǎng)初期(20世紀(jì)90年代) ----web1.0
主要通過撥號上網(wǎng)的方式瀏覽網(wǎng)頁, 提交信息. 上網(wǎng)的速度只有28.8 kbit/s
JavaScript最初是網(wǎng)景公司的工程師Brandan Eich花了10天的時間設(shè)計出來的, 主要是為了在瀏覽器上先驗證用戶輸入的信息是否符合格式.
為什么要這樣做呢?
因為當(dāng)時的網(wǎng)絡(luò)是非常慢的, 如果用戶填寫了大量的信息, 提交到服務(wù)器, 在服務(wù)器端驗證發(fā)現(xiàn)不合格, 用戶要再次重新填寫, 這個是很讓人抓狂的.
設(shè)想一下，用戶填完一個表單，點擊提交按鈕，等待了 30 秒的處理后，看到的卻是一條告訴你忘記填寫一個必要的字段
最開始的時候, Eich把自己設(shè)計的這種運行在瀏覽器上的腳本叫做liveScript, 在發(fā)布的時候為了蹭Java的熱度, 就改名叫做JavaScript, 實際上跟Java沒有半毛錢關(guān)系
2) JS的成長
在PC互聯(lián)網(wǎng)(2010年之前)----web2.0
這個時候, 個人電腦PC開始普及, 網(wǎng)絡(luò)速度突飛猛進, 上網(wǎng)的成本越來越低
人們開始大量的使用PC訪問web應(yīng)用, 包括:
●blog(博客)--新浪
●RSS(訂閱)
●社交網(wǎng)絡(luò)(SNS)--FaceBook/人人網(wǎng)
●P2P(下載)--迅雷
●搜索引擎--Google/baidu
●即時通訊(IM)--QQ
●電子商務(wù)--Taobao
在這個時代, JavaScript都只是一種不起眼的小腳本, 沒有人把他當(dāng)成真正的編程語言.
JavaScript在這個時候依然只是用來處理PC網(wǎng)頁的簡單動畫和驗證, 也沒有單獨的前端崗位, 大部分前端的工作都是由php程序員或者UI人員完成的
3) JS的新生
web3.0
隨著喬幫主推出的IPhone智能手機, 改變了人們的生活方式
以智能手機為代表的移動互聯(lián)網(wǎng)應(yīng)運為生, 稱為web3.0
HTML5與CSS3
到2015年左右, HTML5和CSS3的標(biāo)準(zhǔn)化, 大大推進了前端的發(fā)展
前端做為一個獨立的方向真正開始被重視
ECMA2015
在2015年, JavaScript的規(guī)范組織ECMA(歐洲計算機制造商協(xié)會)推出了ECMA2015, 也被稱為ES6
這一版本的出現(xiàn), 極大的改進了JavaScript語言, 使得JavaScript具備開發(fā)大型項目的能力
V8引擎與Node.js
Chrome推出的V8引擎將JavaScript的速度提升了幾個數(shù)量級
Node.js的出現(xiàn), 完善了JavaScript在服務(wù)端的能力, 使得JavaScript編寫服務(wù)端程序作為可能
未來的發(fā)展
自2016年以來, 前端發(fā)展非常迅速, 開源社區(qū)越來越活躍, 出現(xiàn)了大量的工作崗位, 薪資也水漲船高
JavaScript現(xiàn)在應(yīng)用的范圍越來越廣
●微信小程序
●H5游戲
●桌面應(yīng)用(Electron)
●webApp
●AI+物聯(lián)網(wǎng)( AIot)
2 JS的組成
JavaScript是解釋性的弱類型編程語言
●解釋性: 逐行解釋, 逐行執(zhí)行
●弱類型: 不區(qū)分變量的數(shù)據(jù)類型
●編程語言: 圖靈完備的語言
一般認(rèn)為瀏覽器中JavaScript由三部分組成
●ECMAScript: 基礎(chǔ)語法
●DOM: 文檔對象模型
●BOM: 瀏覽器對象模型
1) ECMAScript
ECMAScript 是由ECMA（ 原歐洲計算機制造商協(xié)會）進行標(biāo)準(zhǔn)化的一門編程語言, 主要規(guī)定了像變量, 數(shù)據(jù)類型, 流程控制, 函數(shù)等基礎(chǔ)語法
2) DOM和BOM
W3C:?萬維網(wǎng)聯(lián)盟?(World Wide Web Consortium) 主要是完成HTML和CSS及瀏覽器標(biāo)準(zhǔn)化的研究, 是一個非盈利性的公益組織, 主要由大公司和開發(fā)人員組成
其中,
●DOM是由W3C組織制定的標(biāo)準(zhǔn), 通過 DOM 提供的接口可以對頁面上的各種元素進行操作（大小、位置、顏色、事件等）
●BOM是由各個瀏覽器廠商根據(jù)DOM在各自瀏覽器上的實現(xiàn), 不同的瀏覽器會略有差異, 通過BOM可以操作瀏覽器窗口，比如彈出框、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等
3 JS的寫在哪里
跟CSS一樣, JS也有3種書寫方式
●外部: 將JS文件單獨保存, 再通過<script src="xxx.js">引入
●內(nèi)嵌: 在HTML文件中, 將JS代碼寫在<script>標(biāo)簽中
●行內(nèi): 現(xiàn)在幾乎不用
示例
外部
內(nèi)嵌
在實際工作中, 通常將js代碼寫在文件中, 再使用外部方式引入
在學(xué)習(xí)階段, 為了調(diào)試方便, 主要采用內(nèi)嵌的方式
4 體驗JS
為了方便信息的輸入輸出，JS中提供了一些輸入輸出語句，其常用的語句如下：
注意：alert() 主要用來顯示消息給用戶，console.log() 用來給程序員自己看運行時的消息
示例
調(diào)試技巧
在Chrome瀏覽器中, 使用F12或者Ctrl+Shift+I打開調(diào)試窗口, 在console控制臺中查看
在控制臺中, 也可以編寫JS的代碼
二. 變量
1 什么是變量
變量是一個存放數(shù)據(jù)的容器(盒子), 由變量名和變量值組成
就好比, 通過房間號(變量名)可以找到某個人(變量值)
擴展
變量是程序在內(nèi)存中申請的一塊用來存放數(shù)據(jù)的空間
2 變量的使用
1) 變量的聲明
語法
var ( variable )是一個 JS關(guān)鍵字, 用來聲明變量, 后面跟變量名
uname/age就是變量名, 計算機通過這個名字就可以找到對應(yīng)的內(nèi)存空間, 進而訪問到空間里的數(shù)據(jù)
2) 變量的賦值
語法
3) 聲明的同時賦值
示例
變量可以重新賦值, 新值會覆蓋舊值
注意
一般, 變量先聲明再使用
3 變量命名規(guī)則
在JS中, 變量的命名是有一定的規(guī)則的(標(biāo)識符)
標(biāo)識符: 由字母(A-Za-z)、數(shù)字(0-9)、下劃線()、美元符號( $ )組成，如：usrAge, num01,?name
變量名嚴(yán)格區(qū)分大小寫, 如?
app和App是兩個不同的變量不能以數(shù)字開頭
不能是 關(guān)鍵字 或者 保留字
推薦使用 駝峰法 (首字母小寫，后面單詞的首字母需要大寫)
如:?myFirstName
4 關(guān)鍵字與保留字
更多相關(guān)的內(nèi)容, 參考JavaScript 保留關(guān)鍵字
三. 數(shù)據(jù)類型
1 什么是數(shù)據(jù)類型
現(xiàn)實
描述不同的數(shù)據(jù)時, 人們往往會使用不同的類型, 比如:
姓名: 字符
年齡: 數(shù)字
一個命題的結(jié)論: 真假
程序
在程序中, 不同類型的數(shù)據(jù)在存儲和傳輸時占用空間的大小是不同的. 因此, 會存在數(shù)據(jù)類型的區(qū)別
變量的數(shù)據(jù)類型
變量的數(shù)據(jù)類型就是在變量中保存的數(shù)據(jù)的類型
示例
JavaScript是弱類型語言, 并沒有嚴(yán)格的規(guī)定變量的類型, 換句話說, 變量的類型是可以改變的, 但是強烈不建議這么做,不推薦
2 常用的數(shù)據(jù)類型
1) 簡單數(shù)據(jù)類型(值類型)
Number: 數(shù)字型
String: 字符型
Boolean: 布爾型
Undefined: 未定義
Null: 空
數(shù)字型
示例
這里注意一種特殊的數(shù): NaN(Not a Number)非數(shù)
字符型
使用引號來表示一個字符串
單引號, 雙引號都可以, 推薦使用單引號, HTML中一般使用雙引號
引號成對使用
示例
轉(zhuǎn)義字符
字符串拼接
在JavaScript中,?+是一個很特別的符號, 可以用于字符串的拼接
小技巧
在Chrome調(diào)試控制臺中,
藍色: 數(shù)字
黑色: 字符
示例
布爾型
布爾類型有兩個值：true 和 false. 其中
true 表示真
false 表示假
Undefined
一個變量聲明了, 但是沒有被賦值, 這時變量里會使用默認(rèn)值undefined
Null
空, 在講對象的時候再講
2) 引用數(shù)據(jù)類型
Object: 對象
關(guān)于引用數(shù)據(jù)類型是相對比較難的問題, 在后面的章節(jié), 我們會專門來講解
這里, 有一句名言, 大家可以先記下來, 后面慢慢體會
在JavaScript中, 一切都是對象
3 如何判斷數(shù)據(jù)類型
通過typeof?可用來獲取檢測變量的數(shù)據(jù)類型
示例
這里的
typeof是一個關(guān)鍵字. 當(dāng)作運算符使用, 整體表達式有返回值typeof()是當(dāng)作函數(shù)使用
4 數(shù)據(jù)類型轉(zhuǎn)換
1) 顯式轉(zhuǎn)換
最常見的是字符型轉(zhuǎn)數(shù)值型
需求
先彈出第一個輸入框，提示用戶輸入第一個數(shù)字 保存起來
再彈出第二個框，提示用戶輸入第二個數(shù)字 保存起來
把這兩個值相加，并將結(jié)果賦給新的變量
彈出警示框（alert) ， 把計算的結(jié)果輸出 （輸出結(jié)果）
示例
我們發(fā)現(xiàn)prompt返回的類型是字符型, 兩個字符型相加, 其實是拼接, 并不是我們想要的結(jié)果, 這時我們需要先將字符型轉(zhuǎn)換成數(shù)字型, 再運算
第3行, 用到了一個函數(shù),?
parseInt作用是將字符轉(zhuǎn)換成整數(shù)
更多轉(zhuǎn)換函數(shù), 參考手冊:?JavaScript類型轉(zhuǎn)換
2) 隱式轉(zhuǎn)換
什么是隱式轉(zhuǎn)換
隱式轉(zhuǎn)換就是JS引擎偷偷將類型轉(zhuǎn)換了, 不讓你知道
由于JavaScript是一種非常靈活的語言, 導(dǎo)致數(shù)據(jù)類型存在大量隱式轉(zhuǎn)換, 這里面有很多坑.
通過幾個例子, 大家先理解一些常用的
示例
+的隱式轉(zhuǎn)換
==的隱式轉(zhuǎn)換
大體的原則是
字符型 轉(zhuǎn)換成 數(shù)字型
布爾型 轉(zhuǎn)換成 數(shù)字型
示例
關(guān)于Boolean類型的轉(zhuǎn)換
空字符串(''), NaN, 0, null, undefined?=> false
其余的全部 => true
四. 運算符
1 運算符的分類
運算符（operator）也被稱為操作符，是用于實現(xiàn)賦值、比較和執(zhí)行算數(shù)運算等功能的符號, 常用的有:
算數(shù)運算符
自增自減運算符
比較運算符
邏輯運算符
賦值運算符
1) 表達式和返回值
表達式：是由數(shù)字、運算符、變量等以能求得數(shù)值的有意義排列方法所得的組合
簡單理解：是由數(shù)字、運算符、變量等組成的式子
表達式最終都會有一個結(jié)果，返回給開發(fā)者，稱為返回值
示例
2 算數(shù)運算符
算數(shù)運算符就是數(shù)學(xué)運算中的加減乘除
小數(shù)會存在精度丟失的問題
因此, 不要直接拿小數(shù)進行比較!!!
3 自增自減運算符
自增自減都是對數(shù)字變量的操作
示例
下面這種是錯誤的
1) 前置自增
++num: 先+1, 再返回結(jié)果
2) 后置自增
num++: 先返回結(jié)果, 再+1
練習(xí)
4 比較運算符
比較運算符是兩個數(shù)據(jù)進行比較時所使用的運算符，比較運算后，會返回一個布爾值（true / false）作為比較運算的結(jié)果
字符的比較
字符的比較是按照ASCII碼表依次比較的
示例
5 邏輯運算符
邏輯運算符是用來進行布爾值運算的運算符
后面開發(fā)中經(jīng)常用于多個條件判斷
1) 邏輯與
全真為真, 一假為假
2) 邏輯或
全假為假, 一真為真
3) 邏輯非
真假互換
4) 短路運算
當(dāng)有多個表達式（值）做邏輯運算時
第一個表達式值可以確定結(jié)果時,就不再繼續(xù)運算后邊的表達式的值
邏輯與
語法： 表達式1 && 表達式2
邏輯或
語法： 表達式1 || 表達式2
示例
練習(xí)
判斷是否為潤年, 滿足以下兩個條件之一就是潤年
能被4整除且不能整除100
能夠被 400 整除
6 賦值運算符
把數(shù)據(jù)賦值給變量的運算符
7 運算符的優(yōu)先級
五. 流程控制
1 概念
流程控制就是來控制代碼按照一定結(jié)構(gòu)順序來執(zhí)行
主要有3種結(jié)構(gòu)
順序
條件
循環(huán)
程序的流程圖, 可以通過使用processon在線編輯:?ProcessOn
2 順序
順序結(jié)構(gòu)是程序中最簡單、最基本的流程控制，它沒有特定的語法結(jié)構(gòu)，程序會按照代碼的先后順序，依次執(zhí)行，程序中大多數(shù)的代碼都是這樣執(zhí)行的
3 條件
根據(jù)不同的條件，執(zhí)行不同的路徑代碼(執(zhí)行代碼多選一的過程) 從而得到不同的結(jié)果
1) if語句
語法
示例
需求: 成績>90分輸出A, 成績在80~90之間輸出B, 成績70~80之間輸出C, 成績在60~70之間輸出D, 成績<60, 輸出不及格
2) switch語句
switch 語句也是多分支語句，它用于基于不同的條件來執(zhí)行不同的代碼
當(dāng)要針對變量設(shè)置一系列的特定值的選項時，就可以使用 switch
示例
將數(shù)字1~7轉(zhuǎn)換成星期一到星期天
4 循環(huán)
重復(fù)多次執(zhí)行有規(guī)律的代碼, 可以使用循環(huán)來表示, 通過一個變量可以記錄第幾次循環(huán), 已經(jīng)循環(huán)的總次數(shù)
1) for循環(huán)
語法
示例
示例
累加求和
練習(xí)
提示用戶輸入兩個數(shù), 計算累加求和
在for循環(huán)中, 可以使用if和for循環(huán)
示例
分別求1~100的奇數(shù)和, 偶數(shù)和
示例
打印3行3列的星星
練習(xí)
打印n行m列的星星
示例
打印9*9乘法表
2) while循環(huán)
語法
do...while
當(dāng)條件滿足時, 執(zhí)行
區(qū)別是do...while會先執(zhí)行一次, 再判斷
3) 跳出循環(huán)
continue: 跳出當(dāng)前循環(huán)
break: 跳出整個循環(huán)
示例
需求: 實現(xiàn)一個簡易ATM系統(tǒng)
一直提示用戶一個界面(1: 存款2:取款0:退出)
用戶可以選擇功能
存取款后提示余額
六. 數(shù)組
1 基本概念
1) 定義數(shù)組
數(shù)組是指一組數(shù)據(jù)的集合，其中的每個數(shù)據(jù)被稱作元素，元素可以存放任意類型的數(shù)據(jù)。數(shù)組是一種將一組數(shù)據(jù)存儲在單個變量名下的優(yōu)雅方式
語法
數(shù)組中可以存放任意類型的數(shù)據(jù)，例如字符串，數(shù)字，布爾值等
示例
2) 訪問數(shù)組元素
通過下標(biāo)(索引)訪問數(shù)組元素, 下標(biāo)從0開始
3) 添加數(shù)組元素
示例
4) 刪除數(shù)組元素
示例
示例
求數(shù)組中的最大值
作業(yè)
反轉(zhuǎn)數(shù)組元素
eg. 原數(shù)組: [1,2,3], 新數(shù)組[3,2,1]
3 多維數(shù)組
如果一個數(shù)組a的一個元素也是一個數(shù)組, 數(shù)組a就叫多維數(shù)組
示例
七. 函數(shù)
1 基本概念
可能會有非常多的相同代碼或者功能相似的代碼，這些代碼可能需要大量重復(fù)使用
我們把實現(xiàn)特定功能的代碼塊叫做一個函數(shù)
函數(shù)可以需要的任何時候調(diào)用
函數(shù)不調(diào)用不執(zhí)行
1) 函數(shù)聲明
語法
2) 調(diào)用函數(shù)
語法
示例
將累加求和的功能
封裝成一個函數(shù), 求1到100和
2 參數(shù)
參數(shù)可以使函數(shù)實現(xiàn)更加強大的功能
1) 實參與形參
語法
形參: 函數(shù)聲明時參數(shù)
實參: 函數(shù)調(diào)用時參數(shù)
2) 傳參的過程
傳參的過程就是賦值的過程, 將實參的值賦值給形參
示例
進一步改造, 計算從n到m的和
3 返回值
一般一個函數(shù)在調(diào)用后, 會產(chǎn)生一個固定的結(jié)果, 一般將結(jié)果返回出來, 具體要怎么使用這個結(jié)果, 不是由函數(shù)決定的. 這就是編程里的"單一職責(zé)"原則
進一步改造
嘗試封裝一些函數(shù)
求n到m的奇數(shù)和
封裝一個函數(shù)求n到m的平均值
封裝一個函數(shù)求數(shù)組中的最大值
八. 對象
1 類和對象
1) 對象的概念
對象: 一個具體的實體
在現(xiàn)實世界中, 對象隨處可見, 一個人, 一個學(xué)生, 一個杯子, 一輛汽車, 游戲里的一個英雄... 都是一個對象
2) 對象的組成
如何描述一個對象呢
比如,
每個人都有姓名,?年齡,?性別這些特征.
游戲里的英雄都有生命值,?攻擊力,?防御力這些特征.
對象除了這些特征外, 還有一些行為/動作
比如,
人可以吃飯,?睡覺
游戲里的英雄可以移動, 可以放技能
在程序里,
把對象的特征叫做屬性, 使用變量來描述
把對象的行為叫做方法, 使用函數(shù)來描述
因此, 我們得出一個重要結(jié)論:
對象是由屬性和方法組成的!!
3) 類的概念
類: 具有相同特征的事物的集合
我們把具有相同特征和行為的實體抽象出來, 就形成了一個類.
比如: 把人集合在一起, 就形成了人類, 把王者榮耀里的英雄集合起來, 就形成了英雄類
每一個人類都有一些相同的特征, 比如: 姓名, 性別, 年齡, 身高, 體重...等
每一個英雄也有一些相同的特征, 比如: 生命值, 攻擊力, 防御力...等
4) 程序中的類與對象
那么如何使用程序來描述這些相同的特征呢?
可以定義一個模板/規(guī)范/設(shè)計圖紙, 然后通過這個模板/規(guī)范/設(shè)計圖紙來生產(chǎn)一個個的實體.
比如: 我們可以通過寶馬車的設(shè)計圖紙來生產(chǎn)一輛寶馬車
我們把定義的這個模板叫做類
把生產(chǎn)出來的實體叫做對象
把生產(chǎn)的過程叫做實例化
5) 類和對象的關(guān)系
類和對象的關(guān)系, 可以認(rèn)為是整體和個體, 抽象和具體的關(guān)系
通過上面的描述, 總結(jié)起來說, 就是
類是對象的集合
對象是類的實例化
6) 小結(jié)
對象是由屬性和方法組成的
屬性就是變量, 方法就是函數(shù)
類是對象的集合, 對象是類的實例化
補充: 由于類是對象的集合, 通常我們也可以說類由屬性和方法組成~
2 初步認(rèn)識JS中的類和對象
1) 構(gòu)造函數(shù)的定義
在JS中, 沒有類(class)的概念, 主要是通過構(gòu)造函數(shù)來模擬的.[^1]
語法
使用
function關(guān)鍵字表示定義一個構(gòu)造函數(shù)構(gòu)造函數(shù)名一般首字母大寫
示例: 2-1構(gòu)造函數(shù)的定義.html
通過以上方式就可以定義一個Person構(gòu)造函數(shù), 相當(dāng)于定義好了一個Person類
2) 構(gòu)造函數(shù)的作用
通過構(gòu)造函數(shù)實例化對象
在JS中, 我們通過構(gòu)造函數(shù)(類)來實例化對象
語法
示例: 2-2通過構(gòu)造函數(shù)實例化對象.html
以上代碼
通過new關(guān)鍵字, 產(chǎn)生了一個對象, 并賦值給變量p
通過
typeof p測試變量p的類型為object, 說明p是一個對象
在構(gòu)造函數(shù)中定義屬性
構(gòu)造函數(shù)規(guī)定了由該類實例化出來的對象應(yīng)該包含哪些屬性
比如, 由學(xué)生類實例化出來的學(xué)生對象都應(yīng)該有姓名,?年齡這些屬性
在構(gòu)造函數(shù)的內(nèi)部, 我們通過this.屬性名的方式來定義屬性
在這里, 大家先把這個看作固定寫法, 后面我們再具體分析
構(gòu)造函數(shù)雖然可以規(guī)定實例對象應(yīng)該包含哪些屬性, 但是并不能確定實例對象的屬性值
比如 人類都應(yīng)該有名字這個屬性, 但是具體叫什么名字, 只有在一個人出生的時候才去確定
因此, 在實例化對象的時候, 需要將具體的數(shù)據(jù)傳遞給構(gòu)造函數(shù)
示例: 2-3在構(gòu)造函數(shù)中定義屬性.html
重要結(jié)論
構(gòu)造函數(shù)主要完成屬性的初始化!!!
練習(xí)
一. 通過構(gòu)造函數(shù)Phone定義一個手機類, 包含型號(type), 價格(price), 顏色(color), 屏幕大小(size)
二. 實例化兩個對象
一個iphone對象, 型號: iphoneX, 價格: 6999, 顏色: 土豪金, 屏幕大小: 5.8英寸
一個huawei對象, 型號:p30 pro, 價格: 5988, 顏色: 極光藍, 屏幕大小: 6.1英寸
參考答案
作業(yè)
一.通過構(gòu)造函數(shù)Hero定義一個英雄類, 包含血量(HP), 類型(type), 攻擊力(attack)
二.實例化兩個對象
一個lianpo對象, 血量:700, 類型: 力量型, 攻擊力: 70
一個houyi對象, 血量:300, 類型: 射手, 攻擊力: 130
3) 小結(jié)
通過構(gòu)造函數(shù)定義類(規(guī)定應(yīng)該包含哪些屬性名)
通過new實例化對象(在實例化時, 確定屬性值)
構(gòu)造函數(shù)主要完成屬性的初始化
3 對象的方法
1) 方法的定義
我們已經(jīng)知道
類由屬性和方法組成
在JS中, 通過構(gòu)造函數(shù)定義類
在構(gòu)造函數(shù)中可以通過
this.屬性名定義屬性
那么, 在構(gòu)造函數(shù)中是否也可以通過this.方法名定義方法呢?
2) 方法的使用(調(diào)用)
語法
由于方法就是一個函數(shù), 在后面加小括號表示方法的調(diào)用
示例
3) 小結(jié)
一般不在構(gòu)造函數(shù)中定義方法
方法的調(diào)用語法:?
對象.方法名()
九. 常用的內(nèi)置對象
1 常用的內(nèi)置對象
Math對象
Date對象
字符串對象
數(shù)組對象
學(xué)習(xí)方法
查文檔! 查文檔! 查文檔!
學(xué)習(xí)一個內(nèi)置對象的使用，只要學(xué)會其常用成員的使用即可，我們可以通過查文檔學(xué)習(xí)，可以通過MDN/W3C來查詢。
Mozilla 開發(fā)者網(wǎng)絡(luò)（MDN）提供了有關(guān)開放網(wǎng)絡(luò)技術(shù)（Open Web）的信息，包括 HTML、CSS 和萬維網(wǎng)及 HTML5 應(yīng)用的 API。
MDN:https://developer.mozilla.org/zh-CN/
2 Math對象的常用方法
3 Date對象的常用方法
4 數(shù)組對象的常用方法
5 JSON對象的常用方法
十. DOM介紹
一般認(rèn)為JavaScript由三部分組成
ECMAScript: 基礎(chǔ)語法
DOM: 文檔數(shù)據(jù)模型
BOM: 瀏覽器對象模型
通過面前的學(xué)習(xí), 我們了解ECMAScript, 也就JS的基礎(chǔ)語法部分, 從這一講開始, 我們來簡單的了解一下DOM和BOM
1 什么是DOM
DOM(Document Object Model) 文檔對象模型
DOM是W3C組織制定并推薦的標(biāo)準(zhǔn), 這個標(biāo)準(zhǔn)提供了一系列操作HTML的統(tǒng)一API(Application Programming Interface)
核心對象是document
HTML是一種標(biāo)記語言, 那么瀏覽器是如何解析并渲染顯示的呢?
瀏覽器的工作流程
瀏覽器讀取HTML文件
在內(nèi)存中生成DOM樹
調(diào)用API渲染顯示
2 DOM樹
DOM樹?是將HTML文檔映射成樹形結(jié)構(gòu)，通過節(jié)點對象對其處理，處理的結(jié)果可以加入到當(dāng)前的頁面
文檔: 一個HTML頁面就是一個文檔，DOM中使用document表示
節(jié)點: 網(wǎng)頁中的所有內(nèi)容，在DOM樹中都是一個節(jié)點(標(biāo)簽、屬性、文本、注釋等)
元素節(jié)點: 網(wǎng)頁中的所有內(nèi)容, 比如
h1,?div都是一個元素, 也就是element Node文本節(jié)點:?
<h1>文本</h1>里的文本就是文本節(jié)點, 也就是text Node屬性節(jié)點:?
<img src="1.jpg"></img>里的屬性就是屬性節(jié)點
大家可以通過AST研究
也可以通過chrome打印調(diào)試
3 獲取元素
如果要操作DOM, 首先我們需要知道具體需要操作哪一個元素. 即:?獲取元素
目前最常用的API
getElementById(兼容性好)
querySelect(H5新增, 功能強大)
querySelectAll(H5新增)
示例一
語法
示例二
作業(yè)
獲取到第二個li元素(<li>產(chǎn)品</li>)
4 事件驅(qū)動
1) 什么是事件驅(qū)動
我們說JavaScript采用的是事件驅(qū)動機制, 即:?觸發(fā)---響應(yīng)機制
如何理解
觸發(fā)一個特定的事件, 比如: 點擊一個按鈕. 然后會執(zhí)行事件對應(yīng)的函數(shù)
示例
步驟
獲取元素
注冊事件(綁定事件)處理函數(shù)
觸發(fā)事件, 執(zhí)行函數(shù)
2) 鼠標(biāo)事件
示例 - 仿淘寶隱藏二維碼
點擊x號, 隱藏廣告
3) 鍵盤事件
4) 新增的事件注冊方式
addEventListener()
示例
在注冊事件時不用加on
5) 事件對象
示例
比較常用的屬性和方法
e.target: 觸發(fā)事件的對象
e.preventDafult(): 阻止默認(rèn)行為
e.stopPropagation(): 阻止冒泡
示例 - 判斷哪個按鍵被按下了
示例 - this和e.target的區(qū)別
5 自學(xué)API
結(jié)點操作相關(guān)的API(增刪改查)
結(jié)點關(guān)系相關(guān)的API(父子兄弟)
練習(xí): 實現(xiàn)一個留言板
要求
當(dāng)輸入內(nèi)容為空時, 提示"請輸入內(nèi)容"
每次發(fā)布的留言在最上面顯示
發(fā)布完后, 清除之前寫的內(nèi)容
答案
十一. BOM介紹
1 什么是BOM
BOM(Browser Object Model) 瀏覽器對象模型
它提供了獨立于內(nèi)容而與瀏覽器窗口進行交互的對象，其核心對象是?window,
由于每個瀏覽器廠商實現(xiàn)方式不同, BOM的表現(xiàn)會略有差異.
BOM 由一系列相關(guān)的對象構(gòu)成，并且每個對象都提供了很多方法與屬性
包括:
location: URL相關(guān)
navigator: 瀏覽器相關(guān)
screen: 窗口相關(guān)
history: 瀏覽歷史
其實, BOM 比 DOM 更大, 它包含 DOM
2 常用方法
window對象提供了很多可用方法
像之前, 我們經(jīng)常用到的方法都是window對象的方法
alert
prompt
這里, 我們重點介紹
定時器
location對象
history對象
3 定時器
window 對象提供了 2 種定時器
setTimeout()
setInterval()
1) setTimeout
語法
當(dāng)時間到了, 會執(zhí)行函數(shù). 只執(zhí)行一次
示例
回調(diào)函數(shù)
像上面這樣的函數(shù), 我們一般也叫回調(diào)函數(shù)
顧名思義, 回調(diào)函數(shù)(callback)就是"現(xiàn)在不執(zhí)行, 過一段時間回過頭來執(zhí)行"
回調(diào)函數(shù)都有一個觸發(fā)的時機, 比如
事件處理函數(shù): 當(dāng)按鈕點擊時觸發(fā)
定時器函數(shù): 當(dāng)時間到了觸發(fā)
2) setInterval
語法
每隔一段時間, 執(zhí)行一次函數(shù). 會執(zhí)行多次
示例
3) clearInterval
通過clearInterval停止setInterval設(shè)置的定時器
示例
應(yīng)用場景:
倒計時
發(fā)送驗證碼, 60s后重試
抽獎
示例 - 模擬發(fā)送驗證碼倒計時
4 location對象
1) 作用
location對象用于獲取設(shè)置URL
什么是URL
URL(Uniform Resource Locator), 統(tǒng)一資源定位符
在計算機網(wǎng)絡(luò)中, 可以通過統(tǒng)一資源定位符(URL)請求對應(yīng)的服務(wù)器資源(Resource)
Schema: 使用的協(xié)議類型, 如http/https/ftp等
host: 主機域名或IP
port: 端口號(可選)
path: 路徑
query-string: 查詢參數(shù)(可選)
#anchor: 錨鏈接
2) 常用屬性
示例 - 3秒后跳轉(zhuǎn)
如果文章對你有幫助的話，也請你幫我2個忙吧 (*?▽?*)
給這篇文章一鍵三連吧，對我很重要啦~
關(guān)注一下我 @新中地職業(yè)培訓(xùn)學(xué)校，聽說現(xiàn)在關(guān)注的，以后都是尊貴的老粉啦！
獲取更多GIS開發(fā)相關(guān)課程資源V：gis0329
