js第一天
一、JavaScript
js是一種通常運(yùn)行在瀏覽器的腳本編程語(yǔ)言溜宽,前端唯一的語(yǔ)言
二、js的組成
1.ECMAScript-JavaScript語(yǔ)言基礎(chǔ)
2.Web APIs
2.1-DOM:document object model(頁(yè)面文檔對(duì)象模型--瀏覽器幫我們實(shí)體化的一個(gè)對(duì)象:document)
2.2-BOM: browser object model(瀏覽器對(duì)象模型--瀏覽器幫我們實(shí)體化的一個(gè)對(duì)象:browser)
3. 作用(做什么腥沽?)
監(jiān)聽(tīng)用戶(hù)的行為诞吱,并讓網(wǎng)頁(yè)作出對(duì)應(yīng)的反饋
網(wǎng)頁(yè)特效(動(dòng)畫(huà)效果)
表單驗(yàn)證 (針對(duì)表單數(shù)據(jù)的合法性進(jìn)行判斷)
數(shù)據(jù)交互 (獲取后臺(tái)的數(shù)據(jù), 渲染到前端)
服務(wù)端編程 (node.js)
JavaScript的組成(有什么耘擂?)
ECMAScript規(guī)范:
規(guī)定了js基礎(chǔ)語(yǔ)法核心知識(shí)淡诗。
比如:變量缭保、分支語(yǔ)句痘番、循環(huán)語(yǔ)句捉片、對(duì)象等等
Web APIs(可操作的實(shí)體對(duì)象) :
DOM: 操作文檔,比如對(duì)頁(yè)面元素進(jìn)行移動(dòng)汞舱、大小伍纫、添加刪除等操作
BOM: 操作瀏覽器,比如頁(yè)面彈窗昂芜,檢測(cè)窗口寬度莹规、存儲(chǔ)數(shù)據(jù)到瀏覽器等等
注意 DOM屬于BOM
DOM:document object model (瀏覽器幫我們實(shí)體化為了一個(gè)對(duì)象:document)
BOM:browser object model(瀏覽器幫我們實(shí)體化為了一個(gè)對(duì)象:window)
權(quán)威網(wǎng)站: MDN
JavaScript 書(shū)寫(xiě)位置
目標(biāo):知道如何向頁(yè)面添加 JavaScript
1. -內(nèi)聯(lián) JavaScript
代碼寫(xiě)在標(biāo)簽內(nèi)部
語(yǔ)法:
注意: 此處作為了解即可,我們并不推薦泌神,但是后面vue中會(huì)看到這種使用模式
2. -內(nèi)部 JavaScript
直接寫(xiě)在html文件里良漱,用script標(biāo)簽包住
規(guī)范:script標(biāo)簽寫(xiě)在</body>上面
原因一:JavaScript如果 期望修改其下方的 html, 那么它可能由于 html 尚未被加載而失效
原因二:因?yàn)閟cript可能會(huì)修改dom元素欢际,那么繼續(xù)解析文檔沒(méi)有多大意義母市,為了提升性能,瀏覽器會(huì)阻塞文檔解析
拓展: alert(‘你好损趋,js’) 頁(yè)面彈出警告對(duì)話(huà)框
注意事項(xiàng)
js書(shū)寫(xiě)位置患久,應(yīng)該在所有的html標(biāo)簽元素之后
我們將 <script> 放在HTML文件的底部附近的原因是瀏覽器會(huì)按照代碼在文件中的順序加載 HTML。
如果先加載的 JavaScript 期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加載而失效蒋失。
因此返帕,將 JavaScript 代碼放在 HTML頁(yè)面的底部附近通常是最好的策略。
3. -外部 JavaScript
代碼寫(xiě)在以.js結(jié)尾的文件里
語(yǔ)法:通過(guò)script標(biāo)簽高镐,引入到html頁(yè)面中溉旋。
注意事項(xiàng)
- script標(biāo)簽中間無(wú)需寫(xiě)代碼,否則會(huì)被忽略嫉髓!
- 外部JavaScript會(huì)使代碼更加有序观腊,更易于復(fù)用,且沒(méi)有了腳本的混合算行,HTML 也會(huì)更加易讀梧油,因此這是個(gè)好的習(xí)慣。
JavaScript 注釋
注釋是編寫(xiě)程序時(shí)州邢,寫(xiě)程序的人給一個(gè)語(yǔ)句儡陨、程序段、函數(shù)等的解釋或提示量淌,能提高程序代碼的可讀性骗村。注釋只是為了提高可讀性,不會(huì)被計(jì)算機(jī)編譯
1.單行注釋
符號(hào)://
作用://右邊這一行的代碼會(huì)被忽略
快捷鍵:ctrl + /
2.塊注釋
符號(hào):/* /
作用:在/ 和 */ 之間的所有內(nèi)容都會(huì)被忽略
JavaScript 結(jié)束符
1.結(jié)束符
代表語(yǔ)句結(jié)束
英文分號(hào) ;
可寫(xiě)可不寫(xiě)(現(xiàn)在不寫(xiě)結(jié)束符的程序員越來(lái)越多)
換行符(回車(chē))會(huì)被識(shí)別成結(jié)束符 ,所以一個(gè)完整的語(yǔ)句呀枢,不要手動(dòng)換行
因此在實(shí)際開(kāi)發(fā)中有許多人主張書(shū)寫(xiě) JavaScript 代碼時(shí)省略結(jié)束符
但為了風(fēng)格統(tǒng)一胚股,要寫(xiě)結(jié)束符就每句都寫(xiě),要么每句都不寫(xiě)(按照?qǐng)F(tuán)隊(duì)要求.)
JavaScript 輸入輸出語(yǔ)法
什么是語(yǔ)法:
人和計(jì)算機(jī)打交道的規(guī)則約定
我們要按照這個(gè)規(guī)則去寫(xiě)
我們程序員需要操控計(jì)算機(jī)裙秋,需要計(jì)算機(jī)能看懂
向body內(nèi)輸出內(nèi)容
如果輸出的內(nèi)容寫(xiě)的是標(biāo)簽琅拌,也會(huì)被解析成網(wǎng)頁(yè)元素
頁(yè)面彈出警告對(duì)話(huà)框
控制臺(tái)輸出語(yǔ)法,程序員調(diào)試使用
顯示一個(gè)對(duì)話(huà)框摘刑,對(duì)話(huà)框中包含一條文字信息进宝,用來(lái)提示用戶(hù)輸入文字,獲取的輸入內(nèi)容是字符串
變量
變量是什么枷恕?
目標(biāo):理解變量是計(jì)算機(jī)存儲(chǔ)數(shù)據(jù)的“容器”
問(wèn)題1:用戶(hù)輸入的數(shù)據(jù)我們?nèi)绾未鎯?chǔ)起來(lái)党晋?
變量:
1.白話(huà):變量就是一個(gè)裝東西的盒子。
2.通俗:變量是計(jì)算機(jī)中用來(lái)存儲(chǔ)數(shù)據(jù)的“容器”徐块,它可以讓計(jì)算機(jī)變得有記憶隶校。
-
注意:變量不是數(shù)據(jù)本身,它們僅僅是一個(gè)用于存儲(chǔ)數(shù)值的容器蛹锰∩罡欤可以理解為是一個(gè)個(gè)用來(lái)裝東西的紙箱子
5.png
變量的基本使用
目標(biāo):掌握變量的聲明方式
-
聲明變量:
要想使用變量,首先需要?jiǎng)?chuàng)建變量(專(zhuān)業(yè)說(shuō)法: 聲明變量)
語(yǔ)法:
6.png
聲明變量有兩部分構(gòu)成:聲明關(guān)鍵字铜犬、變量名(標(biāo)識(shí))
let 即關(guān)鍵字 (let: 允許舞终、許可轻庆、讓、要)敛劝,所謂關(guān)鍵字是系統(tǒng)提供的專(zhuān)門(mén)用來(lái)聲明(定義)變量的詞語(yǔ)
舉例:
age 即變量的名稱(chēng)余爆,也叫標(biāo)識(shí)符
變量賦值:
定義了一個(gè)變量后,你就能夠初始化它(賦值)夸盟。在變量名之后跟上一個(gè)“=”蛾方,然后是數(shù)值。
注意:是通過(guò)變量名來(lái)獲得變量里面的數(shù)據(jù)
也可以聲明變量的時(shí)候同時(shí)給變量初始化上陕。
更新變量:
變量賦值后桩砰,還可以通過(guò)簡(jiǎn)單地給它一個(gè)不同的值來(lái)更新它。
注意: let 不允許多次聲明一個(gè)變量释簿。
聲明多個(gè)變量:
1.怎么理解變量亚隅?它的主要作用是什么?
一個(gè)容器庶溶,用來(lái)存放數(shù)據(jù)的
2.變量是通過(guò)那個(gè)關(guān)鍵字來(lái)聲明變量煮纵?如何賦值?
變量通過(guò) let 來(lái)聲明 通過(guò) = 實(shí)現(xiàn)賦值
3.變量通過(guò)變量名來(lái)獲得里面的數(shù)據(jù)
4.可以同時(shí)聲明多個(gè)變量
字面量
字面量: 字面上的一個(gè)數(shù)量偏螺;所見(jiàn)即所得行疏,的一個(gè)常量
比如: let num = 1 ; 這個(gè) 1 就是一個(gè)字面量(常量)
又比如: let str = “字符串”; let boolean = true;
與之對(duì)比的是另外一種寫(xiě)法(后面會(huì)學(xué)套像,先看一下就好):
let num = new Number(1);
let str = new String(“字符串”)酿联;
這種并不是所見(jiàn)即所得的值,而是需要通過(guò)計(jì)算機(jī)運(yùn)行之后凉夯,才能得到常量货葬;所以不是字面量
變量的本質(zhì)
內(nèi)存:計(jì)算機(jī)中存儲(chǔ)數(shù)據(jù)的地方采幌,相當(dāng)于一個(gè)大空間
變量命名規(guī)則與規(guī)范
規(guī)則:必須遵守劲够,不遵守報(bào)錯(cuò)
規(guī)范:建議,不遵守不會(huì)報(bào)錯(cuò)休傍,但不符合業(yè)內(nèi)通識(shí)
- 規(guī)則:
不能用關(guān)鍵字
關(guān)鍵字:有特殊含義的字符征绎,JavaScript 內(nèi)置的一些英語(yǔ)詞匯。例如:let磨取、var人柿、if、for等
只能用下劃線(xiàn)忙厌、字母凫岖、數(shù)字、$組成逢净,且數(shù)字不能開(kāi)頭
字母嚴(yán)格區(qū)分大小寫(xiě)哥放,如 Age 和 age 是不同的變量 - 規(guī)范:
起名要有意義
遵守小駝峰命名法
第一個(gè)單詞首字母小寫(xiě)歼指,后面每個(gè)單詞首字母大寫(xiě)。例:userName
數(shù)據(jù)類(lèi)型
計(jì)算機(jī)世界中的萬(wàn)事萬(wàn)物都是數(shù)據(jù)甥雕。
計(jì)算機(jī)程序可以處理大量的數(shù)據(jù)踩身,為什么要給數(shù)據(jù)分類(lèi)?
更加充分和高效的利用內(nèi)存
-
也更加方便程序員的使用數(shù)據(jù)
比如:
14.png
基本數(shù)據(jù)類(lèi)型
引用數(shù)據(jù)類(lèi)型
15.png
即我們數(shù)學(xué)中學(xué)習(xí)到的數(shù)字社露,可以是整數(shù)挟阻、小數(shù)、正數(shù)峭弟、負(fù)數(shù)附鸽。
JavaScript 中的正數(shù)、負(fù)數(shù)孟害、小數(shù)等 統(tǒng)一稱(chēng)為 數(shù)字類(lèi)型注意: JS 是弱數(shù)據(jù)類(lèi)型拒炎,變量到底屬于那種類(lèi)型,只有賦值之后挨务,我們才能確認(rèn) Java是強(qiáng)數(shù)據(jù)類(lèi)型 例如 int a = 3 必須是整數(shù)
字符串類(lèi)型(string)
通過(guò)單引號(hào)( '') 击你、雙引號(hào)( "")或反引號(hào)( ` )包裹的數(shù)據(jù)都叫字符串,單引號(hào)和雙引號(hào)沒(méi)有本質(zhì)上的區(qū)別谎柄,推薦使用單引號(hào)丁侄。
注意事項(xiàng):
- 無(wú)論單引號(hào)或是雙引號(hào)必須成對(duì)使用
- 單引號(hào)/雙引號(hào)可以互相嵌套,但是不以自已嵌套自已(口訣:外雙內(nèi)單朝巫,或者外單內(nèi)雙)
- 必要時(shí)可以使用轉(zhuǎn)義符 \鸿摇,輸出單引號(hào)或雙引號(hào)
字符串拼接:
模板字符串
1.作用
拼接字符串和變量
在沒(méi)有它之前,要拼接變量比較麻煩
2.符號(hào)
在英文輸入模式下按鍵盤(pán)的tab鍵上方那個(gè)鍵(1左邊那個(gè)鍵)
內(nèi)容拼接變量時(shí)劈猿,用 ${} 包住變量
布爾類(lèi)型(boolean)
表示肯定或否定時(shí)在計(jì)算機(jī)中對(duì)應(yīng)的是布爾類(lèi)型數(shù)據(jù)拙吉。
它有兩個(gè)固定的值 true 和 false,表示肯定的數(shù)據(jù)用 true(真)揪荣,表示否定的數(shù)據(jù)用 false(假)筷黔。
未定義類(lèi)型(undefined)
1-未定義是比較特殊的類(lèi)型,只有一個(gè)值 undefined仗颈。
什么情況出現(xiàn)未定義類(lèi)型佛舱?
只聲明變量,不賦值的情況下挨决,變量的默認(rèn)值為 undefined请祖,一般很少【直接】為某個(gè)變量賦值為 undefined。
2-工作中的使用場(chǎng)景:
我們開(kāi)發(fā)中經(jīng)常聲明一個(gè)變量脖祈,等待傳送過(guò)來(lái)的數(shù)據(jù)肆捕。
如果我們不知道這個(gè)數(shù)據(jù)是否傳遞過(guò)來(lái),此時(shí)我們可以通過(guò)檢測(cè)這個(gè)變量是不是undefined盖高,就判斷用戶(hù)是否有數(shù)據(jù)傳遞過(guò)來(lái)慎陵。
3-未定義是比較特殊的類(lèi)型掏秩,只有一個(gè)值 undefined。
null(空類(lèi)型)
null 表示 值為 空
null 和 undefined 區(qū)別:
undefined 表示沒(méi)有賦值
null 表示賦值了荆姆,但是內(nèi)容為空
null 開(kāi)發(fā)中的使用場(chǎng)景:
官方解釋?zhuān)喊?null 作為尚未創(chuàng)建的對(duì)象
大白話(huà): 將來(lái)有個(gè)變量里面存放的是一個(gè)對(duì)象蒙幻,但是對(duì)象還沒(méi)創(chuàng)建好,可以先給個(gè)null
控制臺(tái)輸出語(yǔ)句和檢測(cè)數(shù)據(jù)類(lèi)型
1.控制臺(tái)輸出語(yǔ)句:
控制臺(tái)語(yǔ)句經(jīng)常用于測(cè)試結(jié)果來(lái)使用胆筒。
可以看出數(shù)字型和布爾型顏色為藍(lán)色邮破,字符串和undefined顏色為灰色
-
通過(guò) typeof 關(guān)鍵字檢測(cè)數(shù)據(jù)類(lèi)型
4.png
類(lèi)型轉(zhuǎn)換
JavaScript是弱數(shù)據(jù)類(lèi)型: JavaScript也不知道變量到底屬于那種數(shù)據(jù)類(lèi)型,只有賦值了才清楚仆救。
坑: 使用表單抒和、prompt 獲取過(guò)來(lái)的數(shù)據(jù)默認(rèn)是字符串類(lèi)型的,此時(shí)就不能直接簡(jiǎn)單的進(jìn)行加法運(yùn)算彤蔽。
此時(shí)需要轉(zhuǎn)換變量的數(shù)據(jù)類(lèi)型摧莽。
通俗來(lái)說(shuō),就是把一種數(shù)據(jù)類(lèi)型的變量轉(zhuǎn)換成我們需要的數(shù)據(jù)類(lèi)型顿痪。
隱式轉(zhuǎn)換
某些運(yùn)算符被執(zhí)行時(shí)镊辕,系統(tǒng)內(nèi)部自動(dòng)將數(shù)據(jù)類(lèi)型進(jìn)行轉(zhuǎn)換,這種轉(zhuǎn)換稱(chēng)為隱式轉(zhuǎn)換蚁袭。
規(guī)則:
-
號(hào)兩邊只要有一個(gè)是字符串征懈,都會(huì)把另外一個(gè)轉(zhuǎn)成字符串
除了+以外的算術(shù)運(yùn)算符 比如 - * / 等都會(huì)把數(shù)據(jù)轉(zhuǎn)成數(shù)字類(lèi)型
缺點(diǎn):
轉(zhuǎn)換類(lèi)型不明確,靠經(jīng)驗(yàn)才能總結(jié)
小技巧:
+號(hào)作為正號(hào)解析可以轉(zhuǎn)換成Number
6.png
顯式轉(zhuǎn)換
編寫(xiě)程序時(shí)過(guò)度依靠系統(tǒng)內(nèi)部的隱式轉(zhuǎn)換是不嚴(yán)謹(jǐn)?shù)目模驗(yàn)殡[式轉(zhuǎn)換規(guī)律并不清晰卖哎,大多是靠經(jīng)驗(yàn)總結(jié)的規(guī)律。
為了避免因隱式轉(zhuǎn)換帶來(lái)的問(wèn)題删性,通常需要對(duì)數(shù)據(jù)進(jìn)行顯示轉(zhuǎn)換亏娜。
概念:
自己寫(xiě)代碼告訴系統(tǒng)該轉(zhuǎn)成什么類(lèi)型
轉(zhuǎn)換為數(shù)字型
- Number(數(shù)據(jù))
- 轉(zhuǎn)成數(shù)字類(lèi)型
如果字符串內(nèi)容里有非數(shù)字,轉(zhuǎn)換失敗時(shí)結(jié)果為 NaN(Not a Number)即不是 一個(gè)數(shù)字
NaN也是number類(lèi)型的數(shù)據(jù)蹬挺,代表非數(shù)字
- parseInt(數(shù)據(jù))
- 只保留整數(shù)
- parseFloat(數(shù)據(jù))
- 可以保留小數(shù)
- String(數(shù)據(jù))
- 變量.toString(進(jìn)制)