JavaScript

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

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

JavaScript 的組成

• ECMAScript(簡稱 ES): JavaScript 語法
• DOM: 頁面文檔對象模型, 對頁面中的元素進行操作
• BOM: 瀏覽器對象模型, 對瀏覽器窗口進行操作

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

 hello world

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

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

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

# 注意 # 彈框在真實的項目中一般是不太建議使用的, 彈出對話框是比較影響用戶體驗的

 JavaScript 的書寫形式

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

內(nèi)嵌式

把 JS 代碼寫到 script 標簽中

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

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

把 JS 代碼放到標簽的特殊屬性中

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

# 注意 #

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

外部式

把 JS 代碼寫到單獨的 .js 文件中. 在 html 中引入這個 JS 文件. 使用 script 標簽引入

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

alert("hello world");

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

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

注釋

// or /* */

html, CSS 和 JavaScript 的注釋

輸入輸出

輸入: prompt

// 彈出一個輸入框
prompt("請輸入您的姓名:");

輸出: alert

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

輸出: console.log

console.log('hello world');

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

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

我們在 bilibili 主頁打開控制臺, 就會出現(xiàn)一個 logo 的小彩蛋.

變量的使用

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

基本用法

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

# 注意事項 #

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

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

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

動態(tài)類型

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

比如： 這樣一段代碼

int num = 10;
num = "hello"

這個代碼在 Java 中無法編譯運行, 承諾 num 是整型, 自始至終都是 int.

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

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

• 動態(tài)類型提供了更靈活的編程方式
• 寫一段代碼, 就可以同時支持多種類型的數(shù)據(jù), 相當于自帶泛型一樣
• 動態(tài)類型的缺點, 類型太靈活了, 小的程序還好, 如果是大型項目, 多個模塊, 多個團隊協(xié)同開發(fā), 動態(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ù)還是浮點數(shù), 統(tǒng)一都是 number.

這時就會出現(xiàn)一個問題, 我們看這樣一段代碼:

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

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

特殊的數(shù)字值

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

console.log('hello' - 10);

Stirng 字符串

JS 中字符串可以有 ' ' 來表示, 也可以用 " " 來表示.

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

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

字符串的典型操作:

• 求字符長度

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

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

• 字符串拼接

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

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

字符串比較

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

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

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

boolean 布爾類型

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

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

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

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

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

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

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

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

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

undefined 只有一個值, 就是 undefined

訪問某個變量, 他沒有被定義, 此時的結(jié)果就是 undefined , 而不會直接報錯.

var a;
console.log(a);

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

console.log(a + 10) //NaN

拿 nudefined 和 字符串拼接, 就會把 undefined 當成字符串

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

null 空值類型

null 只是有一個值, 就是 null. 訪問的變量是存在的, 只不過變量的值, 是空值

# 注意事項 #

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

運算符

JavaScript 中的運算符和 Java 用法基本相同. 此處不做詳細介紹了.

算數(shù)運算符

+ - * / %

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

= += -= *= /= %=

自增自減運算符

++ --

比較運算符

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

# 注意 #

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

邏輯運算符

&& || !

# 注意 #

b = a || 0;

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

如果 a 是假, 此時就是把 0 賦給了 b

位運算

& | ~ ^

移位運算

<< >> >>>

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

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

最新評論