JavaScript

JS 主要是用來(lái)開發(fā)前端, 但是也可以做別的. JS 現(xiàn)在是一個(gè) “通用” 的編程語(yǔ)言.

• 網(wǎng)頁(yè)開發(fā) (做各種特效)
• 網(wǎng)頁(yè)游戲
• 服務(wù)器端開發(fā)
• js 的代碼執(zhí)行, 依賴 js 的引擎(引擎就相當(dāng)于 JVM 一樣, 現(xiàn)在最主流的引擎是 v8 worker 引擎)
• 可以開發(fā)桌面程序(客戶端程序) , 得益于 Electron 框架 (github 搞得).
• 移動(dòng)端 app 開發(fā)

JavaScript 的組成

• ECMAScript(簡(jiǎn)稱 ES): JavaScript 語(yǔ)法
• DOM: 頁(yè)面文檔對(duì)象模型, 對(duì)頁(yè)面中的元素進(jìn)行操作
• BOM: 瀏覽器對(duì)象模型, 對(duì)瀏覽器窗口進(jìn)行操作

 Dom 和 Bom 都是瀏覽器給 JS 提供的 API

 hello world

JS 的 hello world 也是可以嵌入到 html 中執(zhí)行的

<script>
    alert('hello world');
</script>

彈出一個(gè)對(duì)話框, 對(duì)話框中的內(nèi)容是 ( ) 中的字符串.

# 注意 # 彈框在真實(shí)的項(xiàng)目中一般是不太建議使用的, 彈出對(duì)話框是比較影響用戶體驗(yàn)的

 JavaScript 的書寫形式

JS 同樣也有多種方式來(lái)和 html 結(jié)合執(zhí)行

內(nèi)嵌式

把 JS 代碼寫到 script 標(biāo)簽中

<script>
    alert('hello world');
</script>

內(nèi)聯(lián)式

把 JS 代碼放到標(biāo)簽的特殊屬性中

<button onclick="alert('hello world')">Gujiu的按鈕</button>

# 注意 #

• JS 中字符串常量可以使用單引號(hào)表示, 也可以 使用雙引號(hào)表示.
• HTML 中推薦使用雙引號(hào), JS 中推薦使用單引號(hào).

外部式

把 JS 代碼寫到單獨(dú)的 .js 文件中. 在 html 中引入這個(gè) JS 文件. 使用 script 標(biāo)簽引入

<script src="hello.js"></script>

alert("hello world");

特別像 C 的 include, 本質(zhì)就是把對(duì)應(yīng)的 JS 的代碼拷貝到 script 標(biāo)簽中

這樣做的好處, 就是可以把公共的 JS 代碼提取出來(lái), 就方便多個(gè)頁(yè)面來(lái)進(jìn)行重復(fù)使用

注釋

// or /* */

html, CSS 和 JavaScript 的注釋

輸入輸出

輸入: prompt

// 彈出一個(gè)輸入框
prompt("請(qǐng)輸入您的姓名:");

輸出: alert

// 彈出一個(gè)輸出框
alert("hello");彈出一個(gè)警示對(duì)話框, 輸出結(jié)果

輸出: console.log

console.log('hello world');

此時(shí)我們查看頁(yè)面, 我們可以發(fā)現(xiàn)什么都沒(méi)有, 并沒(méi)有顯示 ‘hello world’.

輸出的東西并沒(méi)有輸出在頁(yè)面上, 而是輸出在控制臺(tái)上. (這里輸出的內(nèi)容不是給普通用戶看的, 而是給程序員輔助調(diào)試的)

我們?cè)?nbsp;bilibili 主頁(yè)打開控制臺(tái), 就會(huì)出現(xiàn)一個(gè) logo 的小彩蛋.

變量的使用

變量是我們編程語(yǔ)言中非常核心的概念

基本用法

var name = 'Gujiu';
let age = 18;

# 注意事項(xiàng) #

• var 和 let 都是關(guān)鍵字, 僅僅表示說(shuō), 后面的名字是個(gè)變量, 不表示類型.
• 變量也是有類型的(沒(méi)有顯示寫出來(lái)), 具體類型根據(jù), 等號(hào)后面的值的類型來(lái)區(qū)分的
  • ‘Gujiu’ 是 String 類型, name 就是 String 類型
  • 18 是 number 類型, age 就是 number 類型 (JS 里不區(qū)分整數(shù)和浮點(diǎn)數(shù), 統(tǒng)一都是 number)
• var 是個(gè)老式寫法 (里面坑很多)
• let 是新式寫法 (推薦), 使用 let 變量的各種特性就和 java/ C 里的變量的特性基本一樣.

現(xiàn)在很多語(yǔ)言, 都是支持類似的寫法(定義變量, 不需要顯示聲明類型)

• C++: auto name = “hello” (自動(dòng)類型推導(dǎo))
• Java(11+): var name = “hello” (Java 不是特別依賴這個(gè)語(yǔ)法)
• Go: name := “hello” (:= 海象運(yùn)算符)

動(dòng)態(tài)類型

JS 中的變量類型, 是動(dòng)態(tài)的 (動(dòng)態(tài)這個(gè)詞通常指的是 “運(yùn)行時(shí)”, 靜態(tài)這個(gè)次通常指的是 “編譯期”) , 也就是運(yùn)行過(guò)程中, 變量的類型可以發(fā)生改變.

比如： 這樣一段代碼

int num = 10;
num = "hello"

這個(gè)代碼在 Java 中無(wú)法編譯運(yùn)行, 承諾 num 是整型, 自始至終都是 int.

JS 變量的類型是可以隨時(shí)改變的 (類型能不能改, 和是否使用 “類型自動(dòng)推導(dǎo)” 語(yǔ)法無(wú)關(guān))

動(dòng)態(tài)類型是好還是不好呢？

• 動(dòng)態(tài)類型提供了更靈活的編程方式
• 寫一段代碼, 就可以同時(shí)支持多種類型的數(shù)據(jù), 相當(dāng)于自帶泛型一樣
• 動(dòng)態(tài)類型的缺點(diǎn), 類型太靈活了, 小的程序還好, 如果是大型項(xiàng)目, 多個(gè)模塊, 多個(gè)團(tuán)隊(duì)協(xié)同開發(fā), 動(dòng)態(tài)類型就要吃虧了

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

number數(shù)字類型

• number: 數(shù)字. 不區(qū)分整數(shù)和小數(shù).
• boolean: true 真, false 假.
• string: 字符串類型.
• undefined: 只有唯一的值 undefined. 表示未定義的值.
• null: 只有唯一的值 null. 表示空值.

number 數(shù)字類型
J

S 中的數(shù)字不區(qū)分整數(shù)還是浮點(diǎn)數(shù), 統(tǒng)一都是 number.

這時(shí)就會(huì)出現(xiàn)一個(gè)問(wèn)題, 我們看這樣一段代碼:

let a = 1;
console.log(a / 2);

結(jié)果不是 0 而是 0.5.

特殊的數(shù)字值

• Infinity: 無(wú)窮大, 一般就是浮點(diǎn)數(shù) 除以 0 算出的結(jié)果 (注意 負(fù)無(wú)窮大, 不是無(wú)窮小)
• -Infinity: 負(fù)無(wú)窮大, 小于任何數(shù)字. 表示數(shù)字已經(jīng)超過(guò)了 JS 能表示的范圍.
• NaN: not a number. 表示當(dāng)前結(jié)果不是一個(gè)數(shù)字.

console.log('hello' - 10);

Stirng 字符串

JS 中字符串可以有 ' ' 來(lái)表示, 也可以用 " " 來(lái)表示.

如果字符串內(nèi)容中就有 " ", 那么字符串就可以使用 ’ ’ 來(lái)引起來(lái), 反之亦然

let name1 = "My name is \"Gujiu\"";
let name2 = 'My name is "Gujiu"';

字符串的典型操作:

• 求字符長(zhǎng)度

let name = 'Gujiu';
console.log(name.length);

字符串的長(zhǎng)度的意思是, 里面有幾個(gè)字符, 而不是 “字節(jié)”, 一個(gè)字符里面可以有多個(gè)字節(jié).

• 字符串拼接

使用 + 來(lái)進(jìn)行拼接 , 數(shù)字和字符串可以混著相加 (會(huì)把數(shù)字隱式轉(zhuǎn)為字符串)

let a = 10;
let b = 'hello';
console.log(a + b);

字符串比較

JS 中比較兩個(gè)字符串內(nèi)容是否相同, 直接使用 == 即可

let a = 'hello';
let b = 'hello';
console.log(a == b);

大部分編程語(yǔ)言中, 字符串比較, 都是使用 == (C 和 Java 不是)

boolean 布爾類型

JS 里 boolean 是可以隱式轉(zhuǎn)成 number

• true 會(huì)隱式轉(zhuǎn)成 1
• false 會(huì)隱式轉(zhuǎn)成 0

這樣的操作其實(shí)是不科學(xué)的. 實(shí)際開發(fā)中不應(yīng)該這么寫.

同樣的代碼, 在 Java 中式無(wú)法編譯的. Java 禁止 boolean 和 整數(shù)混合運(yùn)算.

像 Java 這種, 不太支持隱式類型轉(zhuǎn)換的語(yǔ)言, 稱為 “強(qiáng)類型語(yǔ)言” (Java 也不是 100% 不支持, 整數(shù)和 String 相加, 就隱式把 int 轉(zhuǎn)成 String)

像 JS 這種, 比較支持隱式類型轉(zhuǎn)換的語(yǔ)言, 稱為 “弱類型語(yǔ)言”

• 所謂的類型, 就是對(duì)不同種類的數(shù)據(jù), 來(lái)進(jìn)行區(qū)分
• 不同的類型的變量, 可能hi有不同的存儲(chǔ)結(jié)構(gòu)和不同的運(yùn)算支持方式
• 類型強(qiáng), 就是把不同的數(shù)據(jù), 區(qū)分度更高, 界限更明確
• 類型弱, 就是不同的數(shù)據(jù)區(qū)分度低, 界限更模糊

 (C++ 是靜態(tài)類類型, 但是 C++ 是強(qiáng)類型還是弱類型, 存在爭(zhēng)議)

undefined 未定義數(shù)據(jù)類型

undefined 只有一個(gè)值, 就是 undefined

訪問(wèn)某個(gè)變量, 他沒(méi)有被定義, 此時(shí)的結(jié)果就是 undefined , 而不會(huì)直接報(bào)錯(cuò).

var a;
console.log(a);

拿 undefined 和算數(shù)進(jìn)行算術(shù)運(yùn)算, 結(jié)果為 NaN

console.log(a + 10) //NaN

拿 nudefined 和 字符串拼接, 就會(huì)把 undefined 當(dāng)成字符串

console.log(a + "Gujiu") //undefinedGujiu

null 空值類型

null 只是有一個(gè)值, 就是 null. 訪問(wèn)的變量是存在的, 只不過(guò)變量的值, 是空值

# 注意事項(xiàng) #

• null 和 undefined 都表示取值非法的情況, 但是側(cè)重點(diǎn)不同.
• null 表示當(dāng)前的值為空. (相當(dāng)于有一個(gè)空的盒子)
• undefined 表示當(dāng)前的變量未定義. (相當(dāng)于連盒子都沒(méi)有)

運(yùn)算符

JavaScript 中的運(yùn)算符和 Java 用法基本相同. 此處不做詳細(xì)介紹了.

算數(shù)運(yùn)算符

+ - * / %

復(fù)制運(yùn)算符 & 復(fù)合賦值運(yùn)算符

= += -= *= /= %=

自增自減運(yùn)算符

++ --

比較運(yùn)算符

< > <= >= == != === !==

# 注意 #

• == 會(huì)進(jìn)行隱式類型轉(zhuǎn)換
• === 不會(huì)進(jìn)行隱式類型轉(zhuǎn)換 (類型不同, 直接就 false)

邏輯運(yùn)算符

&& || !

# 注意 #

b = a || 0;

如果 a 的值是真 (或者隱式轉(zhuǎn)成 true), 此時(shí)就是把 a 的值賦給了 b

如果 a 是假, 此時(shí)就是把 0 賦給了 b

位運(yùn)算

& | ~ ^

移位運(yùn)算

<< >> >>>

以上就是今天要講的內(nèi)容了，希望對(duì)大家有所幫助，如果有問(wèn)題歡迎評(píng)論指出，會(huì)積極改正??！

以上就是JavaScript 之JS的組成與基本語(yǔ)法的詳細(xì)內(nèi)容，更多關(guān)于JS的組成與基本語(yǔ)法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！