前端學習第63天,js基礎
一.js三個組成部分
ES: ECMAScript語法
- DOM: document物件模型 => 通過js程式碼與頁面文件(出現在body中的所有視覺化標籤)進行互動
- BOM: borwser物件模型 => 通過js程式碼與瀏覽器自帶功能進行互動
二.引入方式
- 行間式
```
出現在標籤中的全域性事件屬性中
this代表該標籤, 可以訪問全域性屬性, 再訪問具體操作物件(eg: this.style.color = "red")
```
- 內聯式
```
出現在script指令碼標籤中
可以通過標籤的id唯一標識,在js程式碼塊中操作頁面標籤
js採用的是小駝峰命名規範, 屬於解釋性語言(由上至下依次解釋執行)
```
- 外聯式
```
通過script標籤的src屬性連結外部js檔案, 連結後, script標籤本身內部的js程式碼塊將會被遮蔽
在任何位置都可以使用this物件,當this物件不指向任意一個標籤時,代表的是window物件
```
- js具體出現的位置
```
head標籤的底部: 依賴性js庫
body標籤的底部(body與html結束標籤的之間): 功能性js指令碼
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js引入</title> <!--js出現的第一個位置--> <script> // 一般為 依賴型JS庫 </script> </head> <body> <!--指令碼:一段功能程式碼塊, 可以巢狀在其他語言中使用, 完成一些額外的功能--> <!--js可以用來書寫指令碼, js就是指令碼語言, 書寫在script標籤中--> <!--js三個組成部分：ES（ECMAScript）語法 | DOM（document object model） | BOM（browser object model）--> <script> </script> <!--1.行間式--> <!--i) 行間式程式碼塊書寫在一個個全域性事件名屬性中，沒有script這樣的一個全域性屬性--> <!--ii) 在某一個標籤的某一個事件屬性值中，出現的this代表該標籤--> <!--iii) 該標籤物件this可以訪問該標籤的任意全域性屬性（eg：style）， 然後再間接訪問具體需要操作的物件（style.color）--> <div id="ddd" onmouseover="this.style.color = 'red'" onmouseleave="this.style.color = 'blue'">這是一個擁有行間式js的div</div> <!--2.內聯式--> <!--i) 可以通過標籤的id(唯一標識)，在js程式碼塊中訪問到該標籤(js的選擇器)--> <!--ii) js程式碼塊中語法採用的是小駝峰命名法, 屬性的值都是用字串形式進行賦值--> <!--iii) js屬於解釋性語言，所有載入順序會影響執行結構 => 內聯式的script標籤出現的位置--> <script> ddd.style.backgroundColor = "pink" </script> <!--3.外聯式--> <!--i) 通過script標籤的src資料鏈接外部js檔案--> <!--ii) 使用外聯的script(擁有src屬性)標籤，會遮蔽掉標籤內部的js程式碼塊--> <!--iii) 在js任意地方，均由this物件，this物件不指向任何標籤時，指向的是window物件--> <script src="js/01.js"> // 被遮蔽掉的程式碼塊 ddd.style.fontSize = "100px"; </script> </body> <!--js出現的第二個位置--> <script> // 一般為 功能性JS指令碼 </script> </html>
三.變數的定義
```js
四種定義變數的方式
語法: 關鍵詞 變數名 = 變數值
num = 10; // 省略關鍵詞, 定義的為全域性變數, 在任何位置定義, 在任何位置都可以訪問, 但不建議使用
var num = 10; // var關鍵詞, 無塊級作用域, 定義在塊級作用域中的變數, 外界也可以訪問
let num = 20; // let關鍵詞, 有塊級作用域, 定義在塊級作用域中的變數, 外界無法訪問
const NUM = 30; // const關鍵詞,有塊級作用域, 定義在塊級作用域中的變數, 外界無法訪問, 且變數的值不能再被二次修改, 所以為常量
/* 產生塊級作用域的方式
{
直接書寫
}
if語句可以產生
while語句可以產生
for語句也可以產生
*/
// 函式可以產生區域性作用域, 除了定義在區域性作用域中的全域性變數(沒有關鍵字的變數宣告), 外界可以訪問, 其他定義方式, 外界都不可以訪問
```
```js
// ES5 | ES6
// 是ECMAScript兩個語法版本, ES6是ES5之後的一個版本, 但是對ES5向下相容, ES6中支援ES5語法
```
```js
// 命名規範
// 變數命名規範
// 可以由哪些組成: 字母, 數字, _, $, 中文(一般不考慮)
// 可以以什麼開頭: 字母, _, $, 中文
// 不能出現什麼: 關鍵字, 保留字
// 提倡什麼書寫規範: 小駝峰, 支援_連線語法
好的 = "真好";
console.log(好的);
```
四.三種彈出框
```js
// 普通彈出框
// alert("你丫真帥!!!");
// 輸入框: 以字串形式接收使用者輸入內容
// var info = prompt("請輸入內容:");
// console.log(info)
// 確認框: 根據使用者選擇確認或取消, 得到 true | false 兩個布林結果
// var res = confirm("你是豬嗎?");
// console.log(res)
```
五.資料型別
```js
// 值型別
var a = 10; // Number 10
var a = 'abc'; // String abc
var a = true; // Boolean true
var a = undefined // undefined undefined
// 引用型別
var a = function(){} // function f(){}
var a = {} // Object {}
var a = null // Null null
// 其他Object具體體現
Array | Date | RegExp
```
## 六.值型別的型別轉換
```js
// 1.通過型別宣告轉換
Number() | String() | Boolean()
// 2.方法(函式)
parseInt('10') | parseFloat('3.14')
123..toString()
// 3.隱式轉換
+'10' => 10
'' + 10 => '10'
```
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>資料型別轉換</title>
</head>
<body>
number | boolean | string 之間相互轉換
</body>
<script>
// 1. number 與 boolean型別
// boolean型別的true就是數字1, false就是數字0
console.log((true + true) * 10 * false)
// number 中 0, NaN 可以直接當false來使用, 其他的都可以當true來使用
// 2. string,boolean 轉換為 number
var a = '10'; // => 10
a = '3.14'; // => 3.14
a = '3.14.15'; // => NaN
var b = true;
var n1 = Number(a);
console.log(n1)
var n2 = Number(b);
console.log(n2)
a = '3.14.15'; // 3.14
a = 'a3.14'; // NaN
console.log(parseFloat(a));
a = '3.94.15'; // 3
console.log(parseInt(a));
// 體現弱語言型別
a = '10';
var res = +a; // number 10
console.log(typeof(res), res)
// 3.number, string 轉換為 boolean
// 在分支或迴圈判斷中, 系統會將數字與字串型別自動轉換為布林型別
// 不在判斷中, 如何轉換
console.log(Boolean(""));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean("1"));
console.log(Boolean(-100));
// 4.number, boolean 轉換為 string
console.log(String(true));
console.log(String(1));
var a = 123;
console.log(a.toString());
console.log(123..toString());
console.log(3.14.toString());
var c = 123 + "";
console.log(typeof c, c);
// 用例
var z1 = 2 + +"5"; // 7
z1 = 2 + "5"; // "25"
// z1 = 2 ++"5"; // 語法錯誤 ++連在一起是 ++語法(瞭解)
var z2 = "5" - 2; // 3
console.log(z1, z2);
// 補充
// NaN與NaN不相等
</script>
</html>