?JavaScript 基礎(chǔ)第一篇 —— 變量

回顧

整個上一章節(jié)我們學(xué)習(xí)了布局的三篇，在布局中學(xué)習(xí)了流式布局和 flex 布局以及最后的 rem 布局，這些都是和布局相關(guān)的，因為移動端的流行，所以免不了需要前端中去兼容各種終端。故此方式還是挺多，各顯神通。可以根據(jù)顯示的業(yè)務(wù)場景或者自己團隊比較擅長的布局方式去寫。

布局學(xué)完之后，今天我們就進入了前端中相當重要的一個知識點，也就是：JavaScript，通常稱之為：js。也是前端中非常重要非常好玩的一環(huán)，在往后的工作中寫業(yè)務(wù)邏輯都和 js 是密不可分的！所以基礎(chǔ)一定要扎實。

計算機基礎(chǔ)

在學(xué)習(xí) js 之前我們可以大概的了解一下計算機的一些基礎(chǔ)。了解一下編程語言和標記語言的區(qū)別和內(nèi)存等。

編程語言和標記語言

編程語言：有很強的邏輯和行為能力，在編程語言里，你會看到很多判斷的邏輯，例如：if else、for、while 等邏輯行為的指令，這些都是屬于主動的。

標記語言：不用向計算機發(fā)出指令，常用于格式化和鏈接，標記語言的存在是被用讀取的它是被動的。

計算機組成及內(nèi)存

計算機是由硬件和軟件組成的，硬件一般是內(nèi)存、鼠標、鍵盤、cpu、硬盤等。

graph TD? ?java學(xué)習(xí)交流737251827

計算機 --> 硬件

硬件 --> 輸入設(shè)備 --> 鼠標

硬件 --> 輸出設(shè)備 --> 顯示器

硬件 --> CPU --> 負責(zé)數(shù)據(jù)處理和運算

硬件 --> 硬盤 --> 負責(zé)存儲永久數(shù)據(jù)

硬件 --> 內(nèi)存--> 負責(zé)存儲臨時數(shù)據(jù)

計算機 --> 軟件

軟件 --> 系統(tǒng)軟件 --> Linux

軟件 --> 應(yīng)用軟件 --> 微信

內(nèi)存：內(nèi)存的出現(xiàn)極大的改善了數(shù)據(jù)讀取的速度。很早之前因為 cpu 計算能力太快而硬盤讀取數(shù)據(jù)太慢，浪費了時間 所以出現(xiàn)了內(nèi)存來保存運行的數(shù)據(jù)。

關(guān)于這些你暫時可以不用理解，先作為了解記住就好。往后的學(xué)習(xí)越多你會發(fā)現(xiàn)基礎(chǔ)能力越欠缺。

瀏覽器組成部分

瀏覽器分為兩部分組成，渲染引擎和js 引擎

渲染引擎：用來解析 HTML 與 CSS，俗稱內(nèi)核，比如 Chrome 瀏覽器的 blink，老版的 webkit。

js 引擎：也稱為 JS 解釋器，用來讀取網(wǎng)頁中的 JavaScript 代碼，對其處理后運行，比如 Chrome 瀏覽器的 V8

首先需要注意的是：瀏覽器本身不會執(zhí)行 JS 代碼，而是通過內(nèi)置 JavaScript 引擎（解釋器）來執(zhí)行 JS 代碼，JS 引擎執(zhí)行時逐行解釋每一句源碼（轉(zhuǎn)換為機器語言），然后通過由計算機去執(zhí)行，所以 JavaScript 語言歸為腳本語言，會逐行解釋執(zhí)行

js 組成部分

ECMAScript（js 語法）

ECMAScript：它規(guī)定了 JS 的編程語法和基礎(chǔ)核心知識，相當于是一個制定 js 的標準，也是所有瀏覽器廠商共同遵守的一套 JS 語法工業(yè)標準。你所熟悉的 ES6、ES5 都是出自 ECMAScript 的。

DOM

DOM：頁面文檔對象模型。它是一種與平臺和語言無關(guān)的應(yīng)用程序接口。這里就暫且先記住就好，在未來會學(xué)習(xí)很多 DOM 的 API。

BOM

BOM：瀏覽器對象模型。瀏覽器窗口的 window 對象是 BOM 的頂層對象，其他對象都是該對象的子對象。

注意：剛開始學(xué)你會感覺到這三個組成部分比較抽象。比較難懂，沒關(guān)系慢慢來，基礎(chǔ) js 部分學(xué)習(xí)完之后，我們會逐步的學(xué)習(xí) DOM 和 BOM 的 API 方法

初識 js

js 初體驗

和 css 引入的方式一樣，js 也會有三種的引入方式，分別為：行內(nèi)、內(nèi)嵌、外部。其中我們一般寫代碼用的是內(nèi)嵌。一般用第三方庫也會有用到外聯(lián)這樣的，但是如果是外聯(lián)的話 <script></script> 中間的不允許寫代碼的。

注釋

單行注釋： //

多行注釋：/**/

? <script>? ?

// 兩個斜杠 表示 單行注釋? ?

/*? ? ?

表示多行注釋? ? 我再來一行?

? */?

</script>

輸入和輸出語句

alert(msg) —— 瀏覽器彈出警示框

console.log(msg) —— 瀏覽器控制臺打印輸出信息

prompt(msg) —— 瀏覽器彈出輸入框，用戶可以輸入

// 這是一個輸入框prompt('無言獨上西樓 下一句')

// 瀏覽器控制臺打印console.log('11111')

// 瀏覽器彈出警示框alert('月如鉤')

js 變量

變量概述：變量就是從內(nèi)存中申請一個空間來存放數(shù)據(jù)

變量的使用：用var聲明變量，計算機會自動的分配空間給程序

賦值：var myName = 'stk'

注意：如果一個值被重新賦值之后，它原有的值會被覆蓋，變量值將以最后一次的賦值為準

聲明多個變量：

// 聲明多個變量

var age = 18,? ?

name = 'stk',? ?

music = '晴天'

如果只聲明不賦值的話會出現(xiàn)：undefined

數(shù)據(jù)類型

-數(shù)據(jù)類型簡介：在計算機中不同的數(shù)據(jù)類型，存儲的空間是不同的

-簡單數(shù)據(jù)類型：

Number：數(shù)字類型（整型、浮點型）

MAX_VALUE —— 表示數(shù)據(jù)的最大值 num.MAX_VALUE

MIN_VALUE —— 表示數(shù)據(jù)的最小值 num.MIN_VALUE

isNaN() —— 判斷非數(shù)字。如果返回的是 false 表示是數(shù)字，如果返回的是 true 表示不是數(shù)字 用法：console.log(isNaN(12)) —— 返回 false

Boolean：布爾類型（true、false）

String：字符串類型('張三')

注意：任何類型和字符串相加都會變成字符串類型

字符串轉(zhuǎn)義字符

\n : 換行符

\ : 斜杠

' : 單引號

" : 雙引號

\t : tab 縮進

\b : 空格

獲取字符串長度：name.length

undefined：沒有給值，就是為 undefined，例如：var a； 此時輸出 a 會打印 undefined

Null：聲明為空 如果數(shù)字和 undefined 相加會出現(xiàn) NaN，（not a number）

獲取變量數(shù)據(jù)類型

檢測變量是什么類型：typeof

// 聲明一個變量

var num = 10

// 檢測 num 是什么類型

console.log(typeof num)

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

把一種數(shù)據(jù)類型的變量轉(zhuǎn)換成另一種數(shù)據(jù)類型

-轉(zhuǎn)換字符串類型

toString()—— 轉(zhuǎn)換字符串：var num = 1; alert(num.toString())

String()—— var num = 1; alert(String(num))

加號拼接字符串(重點)—— var num = 1; alert(num + '我是字符串')

-轉(zhuǎn)換數(shù)字類型（重點）

parseInt() 函數(shù)—— parseInt('79') 轉(zhuǎn)換整數(shù)

parseFloat() 函數(shù)—— parseFloat('78.21') 轉(zhuǎn)換小數(shù)

Number() 函數(shù)—— parseFloat('12')

-其他類型轉(zhuǎn)換布爾類型

Boolean() 函數(shù)—— Boolean('True')

注意：代表空、否定的值會被轉(zhuǎn)換為 false，如“”、0、NaN、null、undefined，其余的都是 true

編譯器和解釋器

計算機不能直接理解任何除機器語言之外的語言，所以必須把程序員縮寫的程序語言編譯成機器語言，才能執(zhí)行。程序語言編譯機器語言的工具稱之為：編譯器。

但是編譯器編譯的方式有兩種，一個是編譯、一個是解釋，兩種方式之間的區(qū)別在于編譯的時間不同

編譯型語言：編譯器是在代碼執(zhí)行之前進行編譯，然后生成中間代碼文件

解釋型語言：解釋器是在運行時進行及時解釋，并且立即執(zhí)行（當編譯器以解釋方式運行的時候，也稱之為解釋器）

一般 例如 java 這類語言稱之為：編譯型語言，而我們所學(xué)習(xí)的 js 稱之為：解釋型語言。

這一篇內(nèi)容還是相當多的，也算是一個 js 的入門基礎(chǔ)，基礎(chǔ)學(xué)來總是比較枯燥無味的，所以需要堅持和練習(xí)?！皶x百遍，其意自見”。這篇基礎(chǔ)就完了，有什么問題歡迎隨時留言~