瞭解變數、資料型別、運算子等基礎概念，能夠實現資料型別的轉換，結合四則運算體會如何程式設計。
-
體會現實世界中的事物與計算機的關係
-
理解什麼是資料並知道資料的分類
-
理解變數儲存資料的“容器”
-
掌握常見運算子的使用，瞭解優先順序關係
-
知道 JavaScript 資料型別隱式轉換的特徵
介紹
掌握 JavaScript 的引入方式，初步認識 JavaScript 的作用
引入方式
JavaScript是一種執行在客戶端（瀏覽器）的程式語言。
JavaScript是由ECMAScript（基礎語法）和Web APIs（DOM、BOM）
JavaScript 程式不能獨立執行，它需要被嵌入 HTML 中，然後瀏覽器才能執行 JavaScript 程式碼。透過 script 標籤將 JavaScript 程式碼引入到 HTML 中，有兩種方式：
內部方式
透過 script 標籤包裹 JavaScript 程式碼
外部形式
一般將 JavaScript 程式碼寫在獨立的以 .js 結尾的檔案中，然後透過 script 標籤的 src 屬性引入
// demo.js
document.write('嗨，歡迎來傳智播學習前端技術！')
如果 script 標籤使用 src 屬性引入了某 .js 檔案，那麼 標籤的程式碼會被忽略！！！如下程式碼所示：
注意事項：
書寫位置儘量寫到文件末尾</body>前面
外部js標籤中間不要寫程式碼，否則會被忽視
註釋和結束符
透過註釋可以遮蔽程式碼被執行或者新增備註資訊，JavaScript 支援兩種形式註釋語法：
單行註釋
使用 // 註釋單行程式碼
多行註釋
使用 /* */ 註釋多行程式碼
注：編輯器中單行註釋的快捷鍵為 ctrl + /
結束符
在 JavaScript 中 ; 代表一段程式碼的結束，多數情況下可以省略 ; 使用回車（enter）替代。
實際開發中有許多人主張書寫 JavaScript 程式碼時省略結束符 ;
輸入和輸出
輸出和輸入也可理解為人和計算機的互動，使用者透過鍵盤、滑鼠等向計算機輸入資訊，計算機處理後再展示結果給使用者，這便是一次輸入和輸出的過程。
舉例說明：如按鍵盤上的方向鍵，向上/下鍵可以滾動頁面，按向上/下鍵這個動作叫作輸入，頁面發生了滾動了這便叫輸出。
輸出
JavaScript 可以接收使用者的輸入，然後再將輸入的結果輸出：
alert()、document.wirte()
以數字為例，向 alert() 或 document.write()輸入任意數字，他都會以彈窗形式展示（輸出）給使用者。
輸入
向 prompt() 輸入任意內容會以彈窗形式出現在瀏覽器中，一般提示使用者輸入一些內容。
變數
理解變數是計算機儲存資料的“容器”，掌握變數的宣告方式
變數是計算機中用來儲存資料的“容器”，它可以讓計算機變得有記憶，通俗的理解變數就是使用【某個符號】來代表【某個具體的數值】（資料）
<script>
// x 符號代表了 5 這個數值
x = 5
// y 符號代表了 6 這個數值
y = 6
//舉例： 在 JavaScript 中使用變數可以將某個資料（數值）記錄下來！
// 將使用者輸入的內容儲存在 num 這個變數（容器）中
num = prompt('請輸入一數字!')
// 透過 num 變數（容器）將使用者輸入的內容輸出出來
alert(num)
document.write(num)
</script>
宣告
宣告(定義)變數有兩部分構成：宣告關鍵字、變數名（標識）
關鍵字是 JavaScript 中內建的一些英文詞彙（單詞或縮寫），它們代表某些特定的含義，如 let 的含義是宣告變數的，看到 let 後就可想到這行程式碼的意思是在宣告變數，如 let age;
let 和 var 都是 JavaScript 中的宣告變數的關鍵字，推薦使用 let 宣告變數！！！
var 宣告：
可以先使用，然後在宣告（不合理）
var 宣告過的變數可以重複宣告（不合理）
比如變數提升、全域性變數、沒有塊級作用域等等
賦值
宣告（定義）變數相當於創造了一個空的“容器”，透過賦值向這個容器中新增資料。
關鍵字
JavaScript 使用專門的關鍵字 let 和 var 來宣告（定義）變數，在使用時需要注意一些細節：
以下是使用 let 時的注意事項：
-
允許宣告和賦值同時進行
-
不允許重複宣告
-
允許同時宣告多個變數並賦值
-
JavaScript 中內建的一些關鍵字不能被當做變數名
以下是使用 var 時的注意事項：
-
允許宣告和賦值同時進行
-
允許重複宣告
-
允許同時宣告多個變數並賦值
大部分情況使用 let 和 var 區別不大，但是 let 相較 var 更嚴謹，因此推薦使用 let，後期會更進一步介紹二者間的區別。
變數名命名規則
關於變數的名稱（識別符號）有一系列的規則需要遵守：
-
只能是字母、數字、下劃線、$，且不能能數字開頭
-
字母區分大小寫，如 Age 和 age 是不同的變數
-
JavaScript 內部已佔用於單詞（關鍵字或保留字）不允許使用
-
儘量保證變數具有一定的語義，見字知義
注：所謂關鍵字是指 JavaScript 內部使用的詞語，如 let 和var，保留字是指 JavaScript 內部目前沒有使用的詞語，但是將來可能會使用詞語。
變數案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1. 宣告一個年齡變數
// let age
// // 2. 賦值 = 賦值
// age = 18
// console.log(age)
// 3. 宣告的同時直接賦值 變數的初始化
// let age = 18
// 小案例
let num = 20
let uname = 'pink老師'
console.log(num)
console.log(uname)
</script>
</body>
</html>
常量
概念：使用 const 宣告的變數稱為“常量”。
使用場景：當某個變數永遠不會改變的時候，就可以使用 const 來宣告，而不是let。
命名規範：和變數一致
const PI = 3.14
注意： 常量不允許重新賦值,宣告的時候必須賦值（初始化）
資料型別
計算機世界中的萬事成物都是資料。
基本資料型別：
number數字型、string字串型別、boolean布林型、undefined未定義型、null空型別
模板字串：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// let age = 20
// // 模板字串 外面用`` 裡面 ${變數名}
// document.write(`我今年${age}歲了`)
let uname = prompt('請輸入您的姓名:')
let age = prompt('請輸入您的年齡:')
// 輸出
document.write(`大家好，我叫${uname}， 我今年貴庚${age}歲了`)
</script>
</body>
</html>
引用資料型別：
object物件
計算機程式可以處理大量的資料，為了方便資料的管理，將資料分成了不同的型別：
注：透過 typeof 關鍵字檢測資料型別
數值型別
即我們數學中學習到的數字，可以是整數、小數、正數、負數
JavaScript 中的數值型別與數學中的數字是一樣的，分為正數、負數、小數等。
字串型別
透過單引號（ ''） 、雙引號（ ""）或反引號包裹的資料都叫字串，單引號和雙引號沒有本質上的區別，推薦使用單引號。
注意事項：
-
無論單引號或是雙引號必須成對使用
-
單引號/雙引號可以互相巢狀，但是不以自已巢狀自已
-
必要時可以使用轉義符
\，輸出單引號或雙引號
布林型別
表示肯定或否定時在計算機中對應的是布林型別資料，它有兩個固定的值 true 和 false，表示肯定的資料用 true，表示否定的資料用 false。
undefined
未定義是比較特殊的型別，只有一個值 undefined，只宣告變數，不賦值的情況下，變數的預設值為 undefined，一般很少【直接】為某個變數賦值為 undefined。
注：JavaScript 中變數的值決定了變數的資料型別。
型別轉換
理解弱型別語言的特徵，掌握顯式型別轉換的方法
在 JavaScript 中資料被分成了不同的型別，如數值、字串、布林值、undefined，在實際程式設計的過程中，不同資料型別之間存在著轉換的關係。
隱式轉換
某些運算子被執行時，系統內部自動將資料型別進行轉換，這種轉換稱為隱式轉換。
注：資料型別的隱式轉換是 JavaScript 的特徵，後續學習中還會遇到，目前先需要理解什麼是隱式轉換。
補充介紹模板字串的拼接的使用
顯式轉換
編寫程式時過度依靠系統內部的隱式轉換是不嚴禁的，因為隱式轉換規律並不清晰，大多是靠經驗總結的規律。為了避免因隱式轉換帶來的問題，通常根邏輯需要對資料進行顯示轉換。
Number
透過 Number 顯示轉換成數值型別，當轉換失敗時結果為 NaN（Not a Number）即不是一個數字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<script>
let str = '123'
console.log(Number(str))
console.log(Number('pink'))
// let num = Number(prompt('輸入年薪'))
// let num = +prompt('輸入年薪')
// console.log(Number(num))
// console.log(num)
console.log(parseInt('12px'))
console.log(parseInt('12.34px'))
console.log(parseInt('12.94px'))
console.log(parseInt('abc12.94px'))
// -------------------
console.log(parseFloat('12px')) // 12
console.log(parseFloat('12.34px')) // 12.34
console.log(parseFloat('12.94px')) // 12.94
console.log(parseFloat('abc12.94px')) // 12.94
</script>
</body>