JS 的組成
ECMAScript
ECMAScript 是由ECMA 國際( 原歐洲計算機制造商協(xié)會)進行標準化的一門編程語言添怔,這種語言在萬維網(wǎng)上應用廣泛,它往往被稱為 JavaScript或 JScript弟劲,但實際上后兩者是 ECMAScript 語言的實現(xiàn)和擴展。
-
DOM——文檔對象模型
? 文檔對象模型(DocumentObject Model姥芥,簡稱DOM)兔乞,是W3C組織推薦的處理可擴展標記語言的標準編程接口。通過 DOM 提供的接口可以對頁面上的各種元素進行操作(大小凉唐、位置庸追、顏色等)
-
BOM——瀏覽器對象模型
? 瀏覽器對象模型(Browser Object Model,簡稱BOM) 是指瀏覽器對象模型台囱,它提供了獨立于內(nèi)容的淡溯、可以與瀏覽器窗口進行互動的對象結(jié)構(gòu)。通過BOM可以操作瀏覽器窗口簿训,比如彈出框咱娶、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等强品。
JS 初體驗
- 行內(nèi)式
<input type="button" value="點我試試" onclick="alert('Hello World')" />
- 可以將單行或少量 JS 代碼寫在HTML標簽的事件屬性中(以 on 開頭的屬性)膘侮,如:onclick
- 注意單雙引號的使用:在HTML中我們推薦使用雙引號, JS 中我們推薦使用單引號
- 可讀性差, 在html中編寫JS大量代碼時的榛,不方便閱讀琼了;
- 引號易錯,引號多層嵌套匹配時夫晌,非常容易弄混表伦;
- 特殊情況下使用
-
內(nèi)嵌式
<script> alert('Hello World~!'); </script>
- 可以將多行JS代碼寫到 script 標簽中
- 內(nèi)嵌 JS 是學習時常用的方式
-
外部JS文件
<script src="my.js"></script>
- 利于HTML頁面代碼結(jié)構(gòu)化谦去,把大段 JS代碼獨立到 HTML 頁面之外,既美觀蹦哼,也方便文件級別的復用
- 引用外部 JS文件的 script 標簽中間不可以寫代碼
- 適合于JS 代碼量比較大的情況
4 - JavaScript注釋
- flex子項目占的份數(shù)
- align-self控制子項自己在側(cè)軸的排列方式
- order屬性定義子項的排列順序(前后順序)
4.1 單行注釋
為了提高代碼的可讀性鳄哭,JS與CSS一樣,也提供了注釋功能纲熏。
JS中的注釋主要有兩種妆丘,分別是 單行注釋 和 多行注釋。
單行注釋的注釋方式如下:
// 我是一行文字局劲,不想被 JS引擎 執(zhí)行勺拣,所以 注釋起來
// 用來注釋單行文字( 快捷鍵 ctrl + / )
4.2 多行注釋
多行注釋的注釋方式如下:
/*
獲取用戶年齡和姓名
并通過提示框顯示出來
*/
/* */ 用來注釋多行文字( 默認快捷鍵 alt + shift + a )
快捷鍵修改為: ctrl + shift + /
vscode → 首選項按鈕 → 鍵盤快捷方式 → 查找 原來的快捷鍵 → 修改為新的快捷鍵 → 回車確認
5 - JavaScript輸入輸出語句
為了方便信息的輸入輸出,JS中提供了一些輸入輸出語句鱼填,其常用的語句如下:
方法 | 說明 | 歸屬 |
---|---|---|
alert(msg) | 瀏覽器彈出警示框 | 瀏覽器 |
console.log(msg) | 瀏覽器控制臺打印輸出信息 | 瀏覽器 |
prompt(info) | 瀏覽器彈出輸入框药有,用戶可以輸入 | 瀏覽器 |
- 注意:alert() 主要用來顯示消息給用戶,console.log() 用來給程序員自己看運行時的消息苹丸。
6 - 變量的概念
6.1 什么是變量
白話:變量就是一個裝東西的盒子愤惰。
通俗:變量是用于存放數(shù)據(jù)的容器。 我們通過 變量名 獲取數(shù)據(jù)赘理,甚至數(shù)據(jù)可以修改宦言。
### 6.2 變量在內(nèi)存中的存儲
本質(zhì):變量是程序在內(nèi)存中申請的一塊用來存放數(shù)據(jù)的空間。類似我們酒店的房間商模,一個房間就可以看做是一個變量奠旺。
7 - 變量的使用
- 變量的聲明
- 變量的賦值
7.1 聲明變量
// 聲明變量
var age; // 聲明一個 名稱為age 的變量
var 是一個 JS關(guān)鍵字,用來聲明變量( variable 變量的意思 )施流。使用該關(guān)鍵字聲明變量后响疚,計算機會自動為變量分配內(nèi)存空間,不需要程序員管
age 是程序員定義的變量名瞪醋,我們要通過變量名來訪問內(nèi)存中分配的空間
7.2 賦值
age = 10; // 給 age 這個變量賦值為 10
- = 用來把右邊的值賦給左邊的變量空間中 此處代表賦值的意思
- 變量值是程序員保存到變量空間里的值
7.3 變量的初始化
var age = 18; // 聲明變量同時賦值為 18
// 聲明一個變量并賦值忿晕, 我們稱之為變量的初始化。
7.4 變量語法擴展
-
更新變量
? 一個變量被重新復賦值后趟章,它原有的值就會被覆蓋杏糙,變量值將以最后一次賦的值為準。
var age = 18; age = 81; // 最后的結(jié)果就是81因為18 被覆蓋掉了
-
同時聲明多個變量
? 同時聲明多個變量時蚓土,只需要寫一個 var宏侍, 多個變量名之間使用英文逗號隔開。
var age = 10, name = 'zs', sex = 2;
-
聲明變量特殊情況
情況 說明 結(jié)果 var age ; console.log (age); 只聲明 不賦值 undefined console.log(age) 不聲明 不賦值 直接使用 報錯 age = 10; console.log (age); 不聲明 只賦值 10
7.5 變量命名規(guī)范
規(guī)則:
- 由字母(A-Za-z)蜀漆、數(shù)字(0-9)谅河、下劃線(_)、美元符號( $ )組成,如:usrAge, num01, _name
- 嚴格區(qū)分大小寫绷耍。var app; 和 var App; 是兩個變量
- 不能 以數(shù)字開頭吐限。 18age 是錯誤的
- 不能 是關(guān)鍵字、保留字褂始。例如:var诸典、for、while
- 變量名必須有意義崎苗。 MMD BBD nl → age
image.png
8 - 數(shù)據(jù)類型
8.1 數(shù)據(jù)類型簡介
-
為什么需要數(shù)據(jù)類型
? 在計算機中狐粱,不同的數(shù)據(jù)所需占用的存儲空間是不同的,為了便于把數(shù)據(jù)分成所需內(nèi)存大小不同的數(shù)據(jù)胆数,充分利用存儲空間肌蜻,于是定義了不同的數(shù)據(jù)類型。
簡單來說必尼,數(shù)據(jù)類型就是數(shù)據(jù)的類別型號蒋搜。比如姓名“張三”,年齡18判莉,這些數(shù)據(jù)的類型是不一樣的豆挽。 -
變量的數(shù)據(jù)類型
? 變量是用來存儲值的所在處,它們有名字和數(shù)據(jù)類型骂租。變量的數(shù)據(jù)類型決定了如何將代表這些值的位存儲到計算機的內(nèi)存中祷杈。JavaScript 是一種弱類型或者說動態(tài)語言斑司。這意味著不用提前聲明變量的類型渗饮,在程序運行過程中,類型會被自動確定:
var age = 10; // 這是一個數(shù)字型 var areYouOk = '是的'; // 這是一個字符串
? 在代碼運行時宿刮,變量的數(shù)據(jù)類型是由 JS引擎 根據(jù) = 右邊變量值的數(shù)據(jù)類型來判斷 的互站,運行完畢之后, 變量就確定了數(shù)據(jù)類型僵缺。JavaScript 擁有動態(tài)類型胡桃,同時也意味著相同的變量可用作不同的類型:
var x = 6; // x 為數(shù)字 var x = "Bill"; // x 為字符串
-
數(shù)據(jù)類型的分類
JS 把數(shù)據(jù)類型分為兩類:
簡單數(shù)據(jù)類型 (Number,String,Boolean,Undefined,Null)
復雜數(shù)據(jù)類型 (object)
8.2 簡單數(shù)據(jù)類型
簡單數(shù)據(jù)類型(基本數(shù)據(jù)類型)
JavaScript 中的簡單數(shù)據(jù)類型及其說明如下:
-
數(shù)字型 Number
? JavaScript 數(shù)字類型既可以保存整數(shù),也可以保存小數(shù)(浮點數(shù))磕潮。
var age = 21; // 整數(shù) var Age = 21.3747; // 小數(shù)
-
數(shù)字型進制
最常見的進制有二進制翠胰、八進制、十進制自脯、十六進制之景。
// 1.八進制數(shù)字序列范圍:0~7 var num1 = 07; // 對應十進制的7 var num2 = 019; // 對應十進制的19 var num3 = 08; // 對應十進制的8 // 2.十六進制數(shù)字序列范圍:0~9以及A~F var num = 0xA;
現(xiàn)階段我們只需要記住,在JS中八進制前面加0膏潮,十六進制前面加 0x
-
數(shù)字型范圍
JavaScript中數(shù)值的最大和最小值
最大值:Number.MAX_VALUE锻狗,這個值為: 1.7976931348623157e+308
最小值:Number.MIN_VALUE,這個值為:5e-32
-
-
數(shù)字型三個特殊值
Infinity ,代表無窮大轻纪,大于任何數(shù)值
-Infinity 油额,代表無窮小,小于任何數(shù)值
NaN 刻帚,Not a number潦嘶,代表一個非數(shù)值
-
isNaN
用來判斷一個變量是否為非數(shù)字的類型,返回 true 或者 false
[圖片上傳失敗...(image-eb1c73-1603530263976)]
var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false 崇众,21 不是一個非數(shù)字
var usrName = "andy";
console.log(isNaN(userName));// true 衬以,"andy"是一個非數(shù)字
-
字符串型 String
? 字符串型可以是引號中的任意文本,其語法為 雙引號 "" 和 單引號''
var strMsg = "我愛北京天安門~"; // 使用雙引號表示字符串 var strMsg2 = '我愛吃豬蹄~'; // 使用單引號表示字符串 // 常見錯誤 var strMsg3 = 我愛大肘子; // 報錯校摩,沒使用引號看峻,會被認為是js代碼,但js沒有這些語法
? 因為 HTML 標簽里面的屬性使用的是雙引號衙吩,JS 這里我們更推薦使用單引號互妓。
-
字符串引號嵌套
? JS 可以用單引號嵌套雙引號 ,或者用雙引號嵌套單引號 (外雙內(nèi)單坤塞,外單內(nèi)雙)
var strMsg = '我是"高帥富"程序猿'; // 可以用''包含"" var strMsg2 = "我是'高帥富'程序猿"; // 也可以用"" 包含'' // 常見錯誤 var badQuotes = 'What on earth?"; // 報錯冯勉,不能 單雙引號搭配
-
字符串轉(zhuǎn)義符
? 類似HTML里面的特殊字符,字符串中也有特殊字符摹芙,我們稱之為轉(zhuǎn)義符灼狰。
? 轉(zhuǎn)義符都是 \ 開頭的,常用的轉(zhuǎn)義符及其說明如下:
轉(zhuǎn)義符 解釋說明 \n 換行符浮禾,n 是 newline 的意思 \ \ 斜杠 \ ' ' 單引號 " ”雙引號 \t tab 縮進 \b 空格 交胚,b 是 blank 的意思 -
字符串長度
? 字符串是由若干字符組成的,這些字符的數(shù)量就是字符串的長度盈电。通過字符串的 length 屬性可以獲取整個字符串的長度蝴簇。
var strMsg = "我是帥氣多金的程序猿!"; alert(strMsg.length); // 顯示 11
-
字符串拼接
多個字符串之間可以使用 + 進行拼接匆帚,其拼接方式為 字符串 + 任何類型 = 拼接之后的新字符串
-
拼接前會把與字符串相加的任何類型轉(zhuǎn)成字符串熬词,再拼接成一個新的字符串
//1.1 字符串 "相加" alert('hello' + ' ' + 'world'); // hello world //1.2 數(shù)值字符串 "相加" alert('100' + '100'); // 100100 //1.3 數(shù)值字符串 + 數(shù)值 alert('11' + 12); // 1112
- + 號總結(jié)口訣:數(shù)值相加 ,字符相連
-
字符串拼接加強
console.log('pink老師' + 18); // 只要有字符就會相連 var age = 18; console.log('pink老師age歲啦'); // 這樣不行哦 console.log('pink老師' + age); // pink老師18 console.log('pink老師' + age + '歲啦'); // pink老師18歲啦
- 經(jīng)常會將字符串和變量來拼接吸重,變量可以很方便地修改里面的值
- 變量是不能添加引號的互拾,因為加引號的變量會變成字符串
- 如果變量兩側(cè)都有字符串拼接,口訣“引引加加 ”嚎幸,刪掉數(shù)字颜矿,變量寫加中間
-
-
布爾型Boolean
? 布爾類型有兩個值:true 和 false ,其中 true 表示真(對)鞭铆,而 false 表示假(錯)或衡。
? 布爾型和數(shù)字型相加的時候焦影, true 的值為 1 ,false 的值為 0封断。
console.log(true + 1); // 2 console.log(false + 1); // 1
-
Undefined和 Null
? 一個聲明后沒有被賦值的變量會有一個默認值undefined ( 如果進行相連或者相加時斯辰,注意結(jié)果)
var variable; console.log(variable); // undefined console.log('你好' + variable); // 你好undefined console.log(11 + variable); // NaN console.log(true + variable); // NaN
? 一個聲明變量給 null 值,里面存的值為空(學習對象時坡疼,我們繼續(xù)研究null)
var vari = null; console.log('你好' + vari); // 你好null console.log(11 + vari); // 11 console.log(true + vari); // 1
8.3 獲取變量數(shù)據(jù)類型
-
獲取檢測變量的數(shù)據(jù)類型
? typeof 可用來獲取檢測變量的數(shù)據(jù)類型
var num = 18; console.log(typeof num) // 結(jié)果 number
? 不同類型的返回值
[圖片上傳失敗...(image-4056e6-1603530263976)]
-
字面量
? 字面量是在源代碼中一個固定值的表示法彬呻,通俗來說,就是字面量表示如何表達這個值柄瑰。
- 數(shù)字字面量:8, 9, 10
- 字符串字面量:'黑馬程序員', "大前端"
- 布爾字面量:true闸氮,false
8.4 數(shù)據(jù)類型轉(zhuǎn)換
? 什么是數(shù)據(jù)類型轉(zhuǎn)換?
? 使用表單教沾、prompt 獲取過來的數(shù)據(jù)默認是字符串類型的蒲跨,此時就不能直接簡單的進行加法運算,而需要轉(zhuǎn)換變量的數(shù)據(jù)類型授翻。通俗來說或悲,就是把一種數(shù)據(jù)類型的變量轉(zhuǎn)換成另一種數(shù)據(jù)類型,通常會實現(xiàn)3種方式的轉(zhuǎn)換:
轉(zhuǎn)換為字符串類型
轉(zhuǎn)換為數(shù)字型
轉(zhuǎn)換為布爾型
-
轉(zhuǎn)換為字符串
[圖片上傳失敗...(image-c7b6c4-1603530263976)]
- toString() 和 String() 使用方式不一樣堪唐。
- 三種轉(zhuǎn)換方式巡语,更多第三種加號拼接字符串轉(zhuǎn)換方式, 這一種方式也稱之為隱式轉(zhuǎn)換淮菠。
-
轉(zhuǎn)換為數(shù)字型(重點)
[圖片上傳失敗...(image-adb0cc-1603530263976)]
- 注意 parseInt 和 parseFloat 單詞的大小寫男公,這2個是重點
- 隱式轉(zhuǎn)換是我們在進行算數(shù)運算的時候,JS 自動轉(zhuǎn)換了數(shù)據(jù)類型
-
轉(zhuǎn)換為布爾型
[圖片上傳失敗...(image-435364-1603530263976)]
代表空合陵、否定的值會被轉(zhuǎn)換為 false 枢赔,如 ''、0曙寡、NaN糠爬、null寇荧、undefined
-
其余值都會被轉(zhuǎn)換為 true
console.log(Boolean('')); // false console.log(Boolean(0)); // false console.log(Boolean(NaN)); // false console.log(Boolean(null)); // false console.log(Boolean(undefined)); // false console.log(Boolean('小白')); // true console.log(Boolean(12)); // true
9 - 解釋型語言和編譯型語言
9.1 概述
計算機不能直接理解任何除機器語言以外的語言举庶,所以必須要把程序員所寫的程序語言翻譯成機器語言才能執(zhí)行程序。程序語言翻譯成機器語言的工具揩抡,被稱為翻譯器户侥。
- 翻譯器翻譯的方式有兩種:一個是編譯,另外一個是解釋峦嗤。兩種方式之間的區(qū)別在于翻譯的時間點不同
- 編譯器是在代碼執(zhí)行之前進行編譯蕊唐,生成中間代碼文件
- 解釋器是在運行時進行及時解釋,并立即執(zhí)行(當編譯器以解釋方式運行的時候烁设,也稱之為解釋器)
執(zhí)行過程
類似于請客吃飯:
編譯語言:首先把所有菜做好替梨,才能上桌吃飯
解釋語言:好比吃火鍋钓试,邊吃邊涮,同時進行
10 - 關(guān)鍵字和保留字
10.1 標識符
標識(zhi)符:就是指開發(fā)人員為變量副瀑、屬性弓熏、函數(shù)、參數(shù)取的名字糠睡。
標識符不能是關(guān)鍵字或保留字挽鞠。
10.2 關(guān)鍵字
關(guān)鍵字:是指 JS本身已經(jīng)使用了的字筷转,不能再用它們充當變量名磅摹、方法名。
包括:break青责、case均抽、catch嫁赏、continue、default油挥、delete橄教、do、else喘漏、finally护蝶、for、function翩迈、if持灰、in、instanceof负饲、new堤魁、return、switch返十、this妥泉、throw、try洞坑、typeof盲链、var、void迟杂、while刽沾、with 等。
10.3 保留字
保留字:實際上就是預留的“關(guān)鍵字”排拷,意思是現(xiàn)在雖然還不是關(guān)鍵字侧漓,但是未來可能會成為關(guān)鍵字,同樣不能使用它們當變量名或方法名监氢。
包括:boolean布蔗、byte藤违、char、class纵揍、const纺弊、debugger、double骡男、enum淆游、export、extends隔盛、fimal犹菱、float、goto吮炕、implements腊脱、import、int龙亲、interface陕凹、long、mative鳄炉、package杜耙、private、protected拂盯、public佑女、short、static谈竿、super团驱、synchronized、throws空凸、transient嚎花、volatile 等。
注意:如果將保留字用作變量名或函數(shù)名呀洲,那么除非將來的瀏覽器實現(xiàn)了該保留字紊选,否則很可能收不到任何錯誤消息。當瀏覽器將其實現(xiàn)后两嘴,該單詞將被看做關(guān)鍵字丛楚,如此將出現(xiàn)關(guān)鍵字錯誤。