整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在 JavaScript 中定義變量的時(shí)候使用的是 let/var，例如：
let num=18
let str='18'這兩種方式定義的變量有什么區(qū)別呢？這里定義的兩個(gè)變量 num 和 str 的數(shù)據(jù)類型不同。例如：描述年齡和工資通過(guò)數(shù)字來(lái)描述，注冊(cè)某個(gè)網(wǎng)站的時(shí)候使用的賬號(hào)和昵稱可以是英文字母的組合。不同的數(shù)據(jù)是由不同的類型來(lái)描述的。
下面我們就開始學(xué)習(xí) JavaScript 中的數(shù)據(jù)類型。
JavaScript 中的數(shù)據(jù)類型可以分為兩大類：基本數(shù)據(jù)類型、復(fù)雜數(shù)據(jù)類型。
簡(jiǎn)單數(shù)據(jù)類型又叫基本數(shù)據(jù)類型、原始數(shù)據(jù)類型(MDN)。
這里我們先來(lái)學(xué)習(xí)簡(jiǎn)單數(shù)據(jù)類型中的前5種。
在 JavaScript 中整數(shù)(5, 6, 10)和浮點(diǎn)數(shù)(11.5, 1.1)都屬于 Number 類型，也就是所有的數(shù)值類型都是 Number 類型。
// 返回 NaN，不是一個(gè)數(shù)字
let n=5 * 'a';
// 返回 false，即不管帶不帶引號(hào)都是一個(gè)數(shù)字
isNaN('5');
isNaN(5);
// 返回 true，不是一個(gè)數(shù)字
isNaN('a');注意：在控制臺(tái)中打印的數(shù)值類型的值是有顏色的。
let userName='jiaoshou';
let nickName="教瘦";在定義字符串的時(shí)候我們推薦使用單引號(hào)，這是因?yàn)?HTML 中屬性值使用雙引號(hào)包裹，有的時(shí)候 HTML 和 JavaScript 可能會(huì)嵌套書寫，為了區(qū)分 HTML 的屬性和 JavaScript 中的字符串，所以這里始終推薦字符串使用單引號(hào)。
你嘗試打印 '教瘦'，注意打印的結(jié)果中要包含單引號(hào)。實(shí)現(xiàn)不了吧？這是因?yàn)橐?hào)在 JavaScript 中有特殊的含義，如果我們想要打印引號(hào)的話，可以取消引號(hào)在 JavaScript 中的特殊含義
let userName='\'教瘦\'';
console.log(userName);\ 在這里的作用是取消后面修飾符號(hào)的特殊含義，類似的內(nèi)容，見下表：
布爾類型是一種專門為了編程設(shè)置的一種語(yǔ)法，主要用來(lái)表示一個(gè)結(jié)果的成立與否，其值只有兩個(gè) true (真) 和 false (假)。
undefined 類型只有一個(gè)值：undefined。代表變量定義了，但是沒(méi)有賦值。
var a;
// 輸出 undefined
console.log(a);
// or
let b;
// 輸出 undefined
console.log(b);null 類型只有一個(gè)值：null。代表變量賦值了，但是值代表的是空。
var a=null;
let b=null;
// 變量a和b都賦值了，值為 null復(fù)雜數(shù)據(jù)類型：Object。因?yàn)楸容^復(fù)雜所以后面專門學(xué)習(xí)。
在 JavaScript 中定義變量的時(shí)候是通過(guò) var/let 定義的變量，也就是在定義變量的時(shí)候沒(méi)有確定數(shù)據(jù)的類型。
let a=10;
a='abc';甚至在代碼執(zhí)行的過(guò)程中可以對(duì)變量重新賦值不同的類型(這樣是不推薦的，我們希望同一個(gè)變量中的數(shù)據(jù)是同一數(shù)據(jù)類型的)。
我們?nèi)绻胍滥硞€(gè)變量中存儲(chǔ)的數(shù)據(jù)類型，可以通過(guò)關(guān)鍵字 typeof 來(lái)獲取。
用法：
typeof 字面量/變量
typeof (字面量/變量)注意：typeof 是關(guān)鍵字。
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 返回的結(jié)果是字符串類型。
如何使用谷歌瀏覽器，快速地查看數(shù)據(jù)類型？
在控制臺(tái)通過(guò) console.log() 打印數(shù)據(jù)，字符串的顏色是黑色的，數(shù)值類型是藍(lán)色的，布爾類型也是紫色的，undefined 和 null 是灰色的(如果看到黑色的說(shuō)明是字符串)
其實(shí)學(xué)習(xí)任何一門語(yǔ)言之前，最應(yīng)該先學(xué)習(xí)的語(yǔ)法就是注釋語(yǔ)法，這樣我們就可以在代碼中寫一些說(shuō)明和筆記之類的 JavaScript 里面的注釋有兩種：?jiǎn)涡凶⑨尅⒍嘈凶⑨尅?/p>
// 這是一個(gè)變量
let nickName='js';)HTML標(biāo)簽
1.1 雙標(biāo)簽有:<html></html>,<head></head><title></title>等
1.2 單標(biāo)簽有:<br/>,<hr/>,<img/>等
2標(biāo)簽屬性
標(biāo)簽的屬性現(xiàn)在暫時(shí)寫在標(biāo)簽內(nèi),其格式為 屬性名="屬性值"
屬性值:HTML中屬性值既可以用單引號(hào)括起來(lái),也可以用雙引號(hào)括起來(lái)或者不用引號(hào)都可以(不推薦)單雙引號(hào)一定要配對(duì)出現(xiàn)
3)HTML注釋: HTML與XML一樣使用<!-- 注釋內(nèi)容 -->來(lái)做注釋
4)常見標(biāo)簽
1) meta: meta標(biāo)簽需要寫在head標(biāo)簽中,meta屬性及值有兩種寫法
1.1 指定name:<meta name=“名字” content=“值” />網(wǎng)頁(yè)的描述信息。
比如:<meta name=“keywords” content=“網(wǎng)頁(yè)關(guān)鍵詞,有助于SEO”/>
1.2 指定http-equiv:<meta http-equiv="名字" content="值" />模擬http響應(yīng)頭信息。
比如:<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定網(wǎng)頁(yè)編碼,防止網(wǎng)頁(yè)中的中文出現(xiàn)亂碼
2)h1-h6標(biāo)簽一般用于標(biāo)題,表示字體的大小,h1最大h6最小,有助于SEO
3)<p></p>與<br/>標(biāo)簽 作用都是換行
<p>標(biāo)簽前后會(huì)有比較大的空白一般用于段落,<br/>標(biāo)簽只是換行
4)<center></center>使頁(yè)面內(nèi)容居中顯示
5)<b>文字顯示為粗體</b>與<strong>文字顯示為粗體粗體(推薦)</strong>
6)<i>文字顯示為斜體</i> 7)<u>文字帶下劃線</u> 8)<em>文字顯示為斜體</em>
9) <sup>2</sup>上標(biāo),比如10的平方：10<sup>2</sup>
<sub>2</sub>下標(biāo),比如水的化學(xué)式：H<sub>2</sub>O
10)<pre></pre> 預(yù)格式化可以在頁(yè)面原樣輸出
<!DOCTYPE html>
<html>
<head>
<title>常見標(biāo)簽與屬性</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>預(yù)祝大家虎年快樂(lè)</h1>
<h2>預(yù)祝大家虎年快樂(lè)</h2>
<h3>預(yù)祝大家虎年快樂(lè)</h3>
<h4>預(yù)祝大家虎年快樂(lè)</h4>
<h5>預(yù)祝大家虎年快樂(lè)</h5>
<h6>預(yù)祝大家虎年快樂(lè)</h6>
致敬所有抗疫人員<br />
你們辛苦了!!!<br />
<p>致敬所有邊防軍人,消防員,警察等</p>
<p>祝你們虎年快樂(lè),身康體健</p>
<center>居中顯示</center>
<b>文字顯示為粗體</b>與<strong>文字顯示為粗體粗體(推薦)<strong/><br>
<i>文字顯示為斜體</i>與<em>文字顯示為斜體(推薦)</em> <u>文字帶下劃線</u><br/>
10<sup>2</sup> <br/><!--水的化學(xué)式-->
H<sub>2</sub>O <br/><!--10的平方-->
<pre>
葡萄美酒夜光杯，欲飲琵琶馬上催。
醉臥沙場(chǎng)君莫笑，古來(lái)征戰(zhàn)幾人回？
</pre>
</body>
</html>顯示效果
HTML 事件是發(fā)生在 HTML 元素上的事情。
當(dāng)在 HTML 頁(yè)面中使用 JavaScript 時(shí)， JavaScript 可以觸發(fā)這些事件。
HTML 事件
HTML 事件可以是瀏覽器行為，也可以是用戶行為。
以下是 HTML 事件的實(shí)例：
HTML 頁(yè)面完成加載
HTML input 字段改變時(shí)
HTML 按鈕被點(diǎn)擊
通常，當(dāng)事件發(fā)生時(shí)，你可以做些事情。
在事件觸發(fā)時(shí) JavaScript 可以執(zhí)行一些代碼。
HTML 元素中可以添加事件屬性，使用 JavaScript 代碼來(lái)添加 HTML 元素。
單引號(hào):
<some-HTML-element some-event='some JavaScript'>
雙引號(hào):
<some-HTML-element some-event="some JavaScript">
在以下實(shí)例中，按鈕元素中添加了 onclick 屬性 (并加上代碼):
實(shí)例
<button onclick='getElementById("demo").innerHTML=Date()'>現(xiàn)在的時(shí)間是??</button>
以上實(shí)例中，JavaScript 代碼將修改 id="demo" 元素的內(nèi)容。
在下一個(gè)實(shí)例中，代碼將修改自身元素的內(nèi)容 (使用 this.innerHTML):
實(shí)例
<button onclick="this.innerHTML=Date()">現(xiàn)在的時(shí)間是?</button>
| JavaScript代碼通常是幾行代碼。比較常見的是通過(guò)事件屬性來(lái)調(diào)用： |
實(shí)例
<button onclick="displayDate()">現(xiàn)在的時(shí)間是?</button>
常見的HTML事件
下面是一些常見的HTML事件的列表:
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改變 |
| onclick | 用戶點(diǎn)擊 HTML 元素 |
| onmouseover | 用戶在一個(gè)HTML元素上移動(dòng)鼠標(biāo) |
| onmouseout | 用戶從一個(gè)HTML元素上移開鼠標(biāo) |
| onkeydown | 用戶按下鍵盤按鍵 |
| onload | 瀏覽器已完成頁(yè)面的加載 |
更多事件列表: JavaScript 參考手冊(cè) - HTML DOM 事件。
JavaScript 可以做什么?
事件可以用于處理表單驗(yàn)證，用戶輸入，用戶行為及瀏覽器動(dòng)作:
頁(yè)面加載時(shí)觸發(fā)事件
頁(yè)面關(guān)閉時(shí)觸發(fā)事件
用戶點(diǎn)擊按鈕執(zhí)行動(dòng)作
驗(yàn)證用戶輸入內(nèi)容的合法性
等等 ...
可以使用多種方法來(lái)執(zhí)行 JavaScript 事件代碼：
HTML 事件屬性可以直接執(zhí)行 JavaScript 代碼
HTML 事件屬性可以調(diào)用 JavaScript 函數(shù)
你可以為 HTML 元素指定自己的事件處理程序
你可以阻止事件的發(fā)生。
等等 ...
| 在 HTML DOM 章節(jié)中你將會(huì)學(xué)到更多關(guān)于事件及事件處理程序的知識(shí)。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
