JavaScript 基礎語法 02

據類型

在 JavaScript 中定義變量的時候使用的是 let/var，例如：

let num=18
let str='18'

這兩種方式定義的變量有什么區別呢？這里定義的兩個變量 num 和 str 的數據類型不同。例如：描述年齡和工資通過數字來描述，注冊某個網站的時候使用的賬號和昵稱可以是英文字母的組合。不同的數據是由不同的類型來描述的。

下面我們就開始學習 JavaScript 中的數據類型。

JavaScript 中的數據類型可以分為兩大類：基本數據類型、復雜數據類型。

簡單數據類型

Number
String

Boolean
null

undefined
BigInt - 新增

Symbol - 新增

復雜數據類型

Object

簡單數據類型

簡單數據類型又叫基本數據類型、原始數據類型(MDN)。

這里我們先來學習簡單數據類型中的前5種。

Number 類型

在 JavaScript 中整數(5, 6, 10)和浮點數(11.5, 1.1)都屬于 Number 類型，也就是所有的數值類型都是 Number 類型。

數值字面量

數值的固定值表示法
通俗點說就是用字面的形式來代表這種類型的數據

110、1024、60.5

數值判斷

NaN：not a number，JavaScript 中一個特殊的值，即非數字
isNaN：is not a number，JavaScript 中的一個方法用來判斷一個值是否不是數字

示例

// 返回 NaN，不是一個數字
let n=5 * 'a';

// 返回 false，即不管帶不帶引號都是一個數字
isNaN('5');
isNaN(5);

// 返回 true，不是一個數字
isNaN('a');

注意：在控制臺中打印的數值類型的值是有顏色的。

String 類型

把多個字符組成一串，就是一個字符串。
字符串字面量：字面形式來代表字符串數據

'程序猿'，"程序媛"

定義字符串的時候用單引號和雙引號都可以

let userName='jiaoshou';
let nickName="教瘦";

在定義字符串的時候我們推薦使用單引號，這是因為 HTML 中屬性值使用雙引號包裹，有的時候 HTML 和 JavaScript 可能會嵌套書寫，為了區分 HTML 的屬性和 JavaScript 中的字符串，所以這里始終推薦字符串使用單引號。

轉義符

你嘗試打印 '教瘦'，注意打印的結果中要包含單引號。實現不了吧？這是因為引號在 JavaScript 中有特殊的含義，如果我們想要打印引號的話，可以取消引號在 JavaScript 中的特殊含義

let userName='\'教瘦\'';
console.log(userName);

\ 在這里的作用是取消后面修飾符號的特殊含義，類似的內容，見下表：

Boolean 類型

布爾類型是一種專門為了編程設置的一種語法，主要用來表示一個結果的成立與否，其值只有兩個 true (真) 和 false (假)。

Boolean 字面量： true 和 false，區分大小寫
計算機內部存儲：true 為1，false 為0

undefined 類型

undefined 類型只有一個值：undefined。代表變量定義了，但是沒有賦值。

var a;
// 輸出 undefined
console.log(a);

// or
let b;
// 輸出 undefined
console.log(b);

null 類型

null 類型只有一個值：null。代表變量賦值了，但是值代表的是空。

var a=null;

let b=null;

// 變量a和b都賦值了，值為 null

復雜數據類型

復雜數據類型：Object。因為比較復雜所以后面專門學習。

獲取變量的類型

在 JavaScript 中定義變量的時候是通過 var/let 定義的變量，也就是在定義變量的時候沒有確定數據的類型。

let a=10;
a='abc';

甚至在代碼執行的過程中可以對變量重新賦值不同的類型(這樣是不推薦的，我們希望同一個變量中的數據是同一數據類型的)。

我們如果想要知道某個變量中存儲的數據類型，可以通過關鍵字 typeof 來獲取。

用法：

typeof 字面量/變量
typeof (字面量/變量)

注意：typeof 是關鍵字。

let a=10;
console.log(typeof a); // number
console.log(typeof 'Hello'); // string
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof null); // object

注意：typeof 返回的結果是字符串類型。

快速查看數據類型

如何使用谷歌瀏覽器，快速地查看數據類型？

在控制臺通過 console.log() 打印數據，字符串的顏色是黑色的，數值類型是藍色的，布爾類型也是紫色的，undefined 和 null 是灰色的(如果看到黑色的說明是字符串)

注釋

其實學習任何一門語言之前，最應該先學習的語法就是注釋語法，這樣我們就可以在代碼中寫一些說明和筆記之類的 JavaScript 里面的注釋有兩種：單行注釋、多行注釋。

單行注釋

用來描述下面一個或多行代碼的作用
VSCode 中的快捷鍵：Ctrl + /

// 這是一個變量
let nickName='js';

多行注釋

用來注釋多條代碼
VSCode 中的快捷鍵：Shift+ Alt + A

)HTML標簽

1.1 雙標簽有:<html></html>,<head></head><title></title>等

1.2 單標簽有:<br/>,<hr/>,<img/>等

2標簽屬性

標簽的屬性現在暫時寫在標簽內,其格式為屬性名="屬性值"

屬性值:HTML中屬性值既可以用單引號括起來,也可以用雙引號括起來或者不用引號都可以(不推薦)單雙引號一定要配對出現

3)HTML注釋: HTML與XML一樣使用來做注釋

4)常見標簽

1) meta: meta標簽需要寫在head標簽中,meta屬性及值有兩種寫法

1.1 指定name:<meta name=“名字” content=“值” />網頁的描述信息。

比如:<meta name=“keywords” content=“網頁關鍵詞,有助于SEO”/>

1.2 指定http-equiv:<meta http-equiv="名字" content="值" />模擬http響應頭信息。

比如:<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定網頁編碼,防止網頁中的中文出現亂碼

2)h1-h6標簽一般用于標題,表示字體的大小,h1最大h6最小,有助于SEO

3)<p></p>與<br/>標簽作用都是換行

<p>標簽前后會有比較大的空白一般用于段落,<br/>標簽只是換行

4)<center></center>使頁面內容居中顯示

5)<b>文字顯示為粗體</b>與<strong>文字顯示為粗體粗體(推薦)</strong>

6)<i>文字顯示為斜體</i> 7)<u>文字帶下劃線</u> 8)<em>文字顯示為斜體</em>

9) <sup>2</sup>上標,比如10的平方：10<sup>2</sup>

<sub>2</sub>下標,比如水的化學式：H<sub>2</sub>O

10)<pre></pre> 預格式化可以在頁面原樣輸出

<!DOCTYPE html>
<html>
<head>
  <title>常見標簽與屬性</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>  
    <h1>預祝大家虎年快樂</h1>
    <h2>預祝大家虎年快樂</h2>
    <h3>預祝大家虎年快樂</h3>
    <h4>預祝大家虎年快樂</h4>
    <h5>預祝大家虎年快樂</h5>
    <h6>預祝大家虎年快樂</h6>
    致敬所有抗疫人員<br />
    你們辛苦了!!!<br />
    <p>致敬所有邊防軍人,消防員,警察等</p>
    <p>祝你們虎年快樂,身康體健</p>
  <center>居中顯示</center>
  <b>文字顯示為粗體</b>與<strong>文字顯示為粗體粗體(推薦)<strong/><br>
  <i>文字顯示為斜體</i>與<em>文字顯示為斜體(推薦)</em> <u>文字帶下劃線</u><br/>
  10<sup>2</sup> <br/><!--水的化學式-->
  H<sub>2</sub>O <br/><!--10的平方-->
  <pre>
      葡萄美酒夜光杯，欲飲琵琶馬上催。 
      醉臥沙場君莫笑，古來征戰幾人回？
  </pre>
  </body>
</html>

顯示效果

HTML 事件是發生在 HTML 元素上的事情。

當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。

HTML 事件

HTML 事件可以是瀏覽器行為，也可以是用戶行為。

以下是 HTML 事件的實例：

HTML 頁面完成加載
HTML input 字段改變時
HTML 按鈕被點擊

通常，當事件發生時，你可以做些事情。

在事件觸發時 JavaScript 可以執行一些代碼。

HTML 元素中可以添加事件屬性，使用 JavaScript 代碼來添加 HTML 元素。

單引號:

<some-HTML-element some-event='some JavaScript'>

雙引號:

<some-HTML-element some-event="some JavaScript">

在以下實例中，按鈕元素中添加了 onclick 屬性 (并加上代碼):

實例

<button onclick='getElementById("demo").innerHTML=Date()'>現在的時間是??</button>

以上實例中，JavaScript 代碼將修改 id="demo" 元素的內容。

在下一個實例中，代碼將修改自身元素的內容 (使用 this.innerHTML):

實例

<button onclick="this.innerHTML=Date()">現在的時間是?</button>

	JavaScript代碼通常是幾行代碼。比較常見的是通過事件屬性來調用：

實例

<button onclick="displayDate()">現在的時間是?</button>

常見的HTML事件

下面是一些常見的HTML事件的列表:

事件	描述
onchange	HTML 元素改變
onclick	用戶點擊 HTML 元素
onmouseover	用戶在一個HTML元素上移動鼠標
onmouseout	用戶從一個HTML元素上移開鼠標
onkeydown	用戶按下鍵盤按鍵
onload	瀏覽器已完成頁面的加載

更多事件列表: JavaScript 參考手冊 - HTML DOM 事件。

JavaScript 可以做什么?

事件可以用于處理表單驗證，用戶輸入，用戶行為及瀏覽器動作:

頁面加載時觸發事件
頁面關閉時觸發事件
用戶點擊按鈕執行動作
驗證用戶輸入內容的合法性
等等 ...

可以使用多種方法來執行 JavaScript 事件代碼：

HTML 事件屬性可以直接執行 JavaScript 代碼
HTML 事件屬性可以調用 JavaScript 函數
你可以為 HTML 元素指定自己的事件處理程序
你可以阻止事件的發生。
等等 ...

	在 HTML DOM 章節中你將會學到更多關于事件及事件處理程序的知識。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：JavaScript 調用提速 40% 的實踐
下一篇：.net文件夾上傳源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商