了解變量棒呛、數(shù)據(jù)類型、運算符等基礎概念，能夠?qū)崿F(xiàn)數(shù)據(jù)類型的轉換邑茄，結合四則運算體會如何編程。
JavaScript介紹
變量
常量
數(shù)據(jù)類型
運算符
實戰(zhàn)案例
重點單詞：
js介紹
能說出JavaScript 是什么? 怎么寫?
能寫出JavaScript 輸入和輸出語句
js是什么俊啼？
是什么肺缕？
是一種運行在客戶端（瀏覽器）的編程語言，可以用來創(chuàng)建動態(tài)更新的內(nèi)容，控制多媒體搓谆，制作圖像動畫等交互效果
怎么寫?
JavaScript 程序不能獨立運行炒辉，它需要被嵌入 HTML 中，然后瀏覽器才能執(zhí)行 JavaScript 代碼泉手。通過 script 標簽將 JavaScript 代碼引入到 HTML 中黔寇，有兩種方式：
內(nèi)部方式
通過 script 標簽包裹 JavaScript 代碼
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎 - 引入方式</title>
</head>
<body>
<!-- 內(nèi)聯(lián)形式：通過 script 標簽包裹 JavaScript 代碼 -->
<script>
alert('嗨，歡迎來傳智播學習前端技術斩萌！')
</script>
</body>
</html>
外部形式
一般將 JavaScript 代碼寫在獨立的以 .js 結尾的文件中缝裤，然后通過 script 標簽的 src 屬性引入
// demo.js
document.write('嗨，歡迎來傳智播學習前端技術颊郎！')
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎 - 引入方式</title>
</head>
<body>
<!-- 外部形式：通過 script 的 src 屬性引入獨立的 .js 文件 -->
<scriptsrc="demo.js"></script>
</body>
</html>
如果 script 標簽使用 src 屬性引入了某 .js 文件憋飞，那么 標簽的代碼會被忽略！Ｄ房浴榛做！如下代碼所示：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎 - 引入方式</title>
</head>
<body>
<!-- 外部形式：通過 script 的 src 屬性引入獨立的 .js 文件 -->
<scriptsrc="demo.js">
// 此處的代碼會被忽略掉！Ｄ诶辍＜烀小！
? alert(666);
</script>
</body>
</html>
注釋和結束符
通過注釋可以屏蔽代碼被執(zhí)行或者添加備注信息昆淡，JavaScript 支持兩種形式注釋語法：
單行注釋
使用 // 注釋單行代碼
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎 - 注釋</title>
</head>
<body>
<script>
// 這種是單行注釋的語法
// 一次只能注釋一行
// 可以重復注釋
document.write('嗨锰瘸，歡迎來傳智播學習前端技術！');
</script>
</body>
</html>
多行注釋
使用 /* */ 注釋多行代碼
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎 - 注釋</title>
</head>
<body>
<script>
/* 這種的是多行注釋的語法 */
/*
? ? 更常見的多行注釋是這種寫法
? ? 在些可以任意換行
? ? 多少行都可以
? ?? */
document.write('嗨昂灵，歡迎來傳智播學習前端技術避凝！')
</script>
</body>
</html>
注：編輯器中單行注釋的快捷鍵為 ctrl + /
結束符
在 JavaScript 中 ; 代表一段代碼的結束，多數(shù)情況下可以省略 ; 使用回車（enter）替代眨补。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎 - 結束符</title>
</head>
<body>
<script>
alert(1);
alert(2);
alert(1)
alert(2)
</script>
</body>
</html>
實際開發(fā)中有許多人主張書寫 JavaScript 代碼時省略結束符 ;
輸入和輸出語句
輸出和輸入也可理解為人和計算機的交互管削，用戶通過鍵盤、鼠標等向計算機輸入信息撑螺，計算機處理后再展示結果給用戶佩谣，這便是一次輸入和輸出的過程。
輸出語句
// 1. 輸出語句
//? 1.1 alert 頁面彈出警示框
// alert('你好,js')
// 1.2 document.write 向頁面文檔輸入內(nèi)容 顯示到頁面body標簽之內(nèi), 可以正常的解析標簽
document.write('今日特價')
document.write('<h4>今日特價</h4>')
// 1.3 console.log 給我們程序員調(diào)試使用的 ? console 控制臺
console.log('給咱們程序員使用的')
輸入語句
向 prompt() 輸入任意內(nèi)容會以彈窗形式出現(xiàn)在瀏覽器中实蓬，一般提示用戶輸入一些內(nèi)容茸俭。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎 - 輸入輸出</title>
</head>
<body>
<script>
// 1. 輸入的任意數(shù)字，都會以彈窗形式展示
document.write('要輸出的內(nèi)容')
alert('要輸出的內(nèi)容');
// 2. 以彈窗形式提示用戶輸入姓名安皱，注意這里的文字使用英文的引號
prompt('請輸入您的姓名:')
</script>
</body>
</html>
變量
變量是什么&基本使用
理解變量是計算機存儲數(shù)據(jù)的“容器”调鬓，掌握變量的聲明方式
變量是計算機中用來存儲數(shù)據(jù)的“容器”，變量不是數(shù)據(jù)本身酌伊，它們僅僅是一個用于存儲數(shù)值的容器腾窝∽鹤伲可以理解為是一個個用來裝東西的紙箱子。
聲明
聲明(定義)變量有兩部分構成：聲明關鍵字虹脯、變量名（標識）
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎 - 聲明和賦值</title>
</head>
<body>
<script>
// let 變量名
// 聲明(定義)變量有兩部分構成：聲明關鍵字驴娃、變量名（標識）
// let 即關鍵字，所謂關鍵字是系統(tǒng)提供的專門用來聲明（定義）變量的詞語
// age 即變量的名稱循集，也叫標識符
letage
</script>
</body>
</html>
關鍵字是 JavaScript 中內(nèi)置的一些英文詞匯（單詞或縮寫）唇敞，它們代表某些特定的含義，如 let 的含義是聲明變量的咒彤，看到 let? 后就可想到這行代碼的意思是在聲明變量疆柔，如 let age;
let 和 var 都是 JavaScript 中的聲明變量的關鍵字，推薦使用 let 聲明變量Ｏ庵？醯怠！
賦值
聲明（定義）變量相當于創(chuàng)造了一個空的“容器”歇拆，通過賦值向這個容器中添加數(shù)據(jù)鞋屈。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎 - 聲明和賦值</title>
</head>
<body>
<script>
// 聲明(定義)變量有兩部分構成：聲明關鍵字、變量名（標識）
// let 即關鍵字故觅，所謂關鍵字是系統(tǒng)提供的專門用來聲明（定義）變量的詞語
// age 即變量的名稱谐区，也叫標識符
letage
// 賦值，將 18 這個數(shù)據(jù)存入了 age 這個“容器”中
age=18
// 這樣 age 的值就成了 18
document.write(age)
// 也可以聲明和賦值同時進行
letstr='hello world!'
alert(str);
</script>
</body>
</html>
變量更新
變量賦值后逻卖，還可以通過簡單地給它一個不同的值來更新它。
// 1.更新變量
letage=18
age=19
// 注意: 不要多次聲明同一個變量
// let age = 19
console.log(age)
聲明多個變量
語法：多個變量中間用逗號隔開昭抒。
說明：看上去代碼長度更短评也，但并不推薦這樣。為了更好的可讀性灭返，一般情況下我們一行只聲明一個變量盗迟。
// 2. 一次聲明多個變量的簡寫方式 (了解 能認出來就可以了)
// let uname = 'pink老師', sex = '男'
letuname='pink老師'
letsex='男'
console.log(uname,sex)
let 和 var 區(qū)別
在較舊的JavaScript，使用關鍵字 var 來聲明變量 熙含，而不是 let
var 現(xiàn)在開發(fā)中一般不再使用它罚缕，只是我們可能再老版程序中看到它。
let 為了解決 var 的一些問題怎静。
var 聲明一些不合理的地方：
可以先使用 在聲明 (不合理)
var 聲明過的變量可以重復聲明(不合理)
比如變量提升邮弹、全局變量、沒有塊級作用域等等
結論：
var 就是個bug蚓聘，別迷戀它了腌乡，以后聲明變量我們統(tǒng)一使用 let
變量的本質(zhì)
內(nèi)存：計算機中存儲數(shù)據(jù)的地方，相當于一個空間
變量本質(zhì)：是程序在內(nèi)存中申請的一塊用來存放數(shù)據(jù)的小空間
變量名命名規(guī)則
關于變量的名稱（標識符）需要遵守：
規(guī)則：
只能是字母夜牡、數(shù)字与纽、下劃線、$，且不能能數(shù)字開頭
字母區(qū)分大小寫急迂，如 Age 和 age 是不同的變量
JavaScript 內(nèi)部已占用于單詞（關鍵字或保留字）不允許使用
盡量保證變量具有一定的語義影所，見字知義
規(guī)范：
起名要有意義
遵守小駝峰命名法
第一個單詞首字母小寫，后面每個單詞首字母大寫僚碎。例：userName
// 1. 規(guī)則(法律)
// 1.1 變量名不能是關鍵字
// let let = 10
// 1.2 變量名的組成: 英文字母 數(shù)字 _? $ 猴娩，不能以數(shù)字開頭
// let 1num = 10 錯誤
// let num! = 10 錯誤
// 1.3 js嚴格區(qū)分大小寫
// let age = 18
// console.log(Age)
// 2. 規(guī)范(道德)
// 2.1 起名要有意義
// let age = 18
// let nl = 19
// 2.2 我們命名建議采取小駝峰命名法
letmyName='pink老師'
letmyFirstName='p'
常量
是什么：也是一個容器，用于保存數(shù)據(jù)的
和變量的區(qū)別： 常量里面保存的值是不允許改變的
使用場景：當某個值永遠不會改變的時候听盖，我們可以使用常量來保存胀溺，目的為了程序的安全
// 常量： 也是一個容器用來保存的數(shù)據(jù)
constpi=3.14
console.log(pi)
// 注意事項：
// 1. 常量里面的值是不允許修改的
pi=3.141592653
console.log(pi)
// 2. 常量必須要初始化(聲明常量的時候必須要賦值)
// const url
注意： 常量不允許重新賦值,聲明的時候必須賦值（初始化）
數(shù)據(jù)類型
計算機世界中的萬事成物都是數(shù)據(jù)。
生活中會把物品進行歸類皆看，不同的物品不能混淆在一起仓坞。
計算機程序可以處理大量的數(shù)據(jù)，方便程序員的使用數(shù)據(jù)腰吟。
數(shù)字型和字符串型
數(shù)字型：
即我們數(shù)學中學習到的數(shù)字无埃，可以是整數(shù)、小數(shù)毛雇、正數(shù)嫉称、負數(shù)
通過typeof關鍵字檢測數(shù)據(jù)類型
字符串：
被引號包裹的一段文字信息
JS中的字符串:
通過單引號（ ‘’） 、雙引號（ “”）或反引號( `` ) 包裹的數(shù)據(jù)都屬于字符串
單引號和雙引號沒有本質(zhì)上的區(qū)別灵疮，推薦使用單引號织阅。
注意事項：
單引號/雙引號可以互相嵌套，但是不以自已嵌套自已（口訣：外雙內(nèi)單震捣，或者外單內(nèi)雙）
一定注意變量名不要加引號荔棉，否則認為是字符串
// 1. 數(shù)字型： 用于計算的， js數(shù)字類型包含： 整數(shù)蒿赢、小數(shù)
// let num1 = 18
// let num1 = -18
letnum1=18.88
// let num1 = -18.88
console.log(typeofnum1)// number ? typeof 關鍵字檢測數(shù)據(jù)類型
// 2. 字符串類型: 被引號包裹的一段文字信息 ? 單引號 雙引號? 反引號
letgoods='筆記本電腦'
letaddress="黑馬程序員"
console.log(typeofgoods)// string
console.log(typeofaddress)// string
letcolor=`粉紅色`
lettel='13612342234'
// 2.1 變量是不能加引號的,變量加了引號就不是盒子了润樱，是一個字符串
console.log('goods')
// 2.2 字符串嵌套的問題. 不能嵌套自己, 外單內(nèi)雙? 或者 外雙內(nèi)單
console.log('今日特價"跳樓大甩賣"速速搶購')
console.log("今日特價'跳樓大甩賣'速速搶購")
模板字符串
使用場景:
拼接字符串和變量
語法
// 1. 字符串拼接
letage=91
// console.log('pink老師今年' + age + '歲')
console.log('pink老師今年'+age+'歲')
// 2. 模板字符串
console.log(`pink老師今年${age}歲`)
// 3. 模板字符串里面的字符串可以換行
注意：反引號中間的字符串可以換行的
布爾類型
表示肯定或否定時在計算機中對應的是布爾類型數(shù)據(jù)，它有兩個固定的值 true 和 false羡棵，表示肯定的數(shù)據(jù)用 true壹若，表示否定的數(shù)據(jù)用 false。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎 - 數(shù)據(jù)類型</title>
</head>
<body>
<script>
//? pink老師帥不帥皂冰？回答 是 或 否
letisCool=true// 是的店展，摔死了！
isCool=false// 不秃流，套馬桿的漢子壁查！
document.write(typeofisCool)// 結果為 boolean
</script>
</body>
</html>
undefined
未定義是比較特殊的類型，只有一個值 undefined剔应，只聲明變量睡腿，不賦值的情況下语御，變量的默認值為 undefined，一般很少【直接】為某個變量賦值為 undefined席怪。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎 - 數(shù)據(jù)類型</title>
</head>
<body>
<script>
// 只聲明了變量应闯，并末賦值
lettmp;
document.write(typeoftmp)// 結果為 undefined
</script>
</body>
</html>
注：JavaScript 中變量的值決定了變量的數(shù)據(jù)類型。
運算符
算術運算符
數(shù)字是用來計算的挂捻，比如：乘法 * 碉纺、除法 / 、加法 + 刻撒、減法 - 等等骨田，所以經(jīng)常和算術運算符一起。
算術運算符：也叫數(shù)學運算符声怔，主要包括加态贤、減、乘醋火、除悠汽、取余（求模）等
運算符作用
+求和
-求差
*求積
/求商
%取模（取余數(shù)），開發(fā)中經(jīng)常用于作為某個數(shù)字是否被整除
注意：在計算失敗時芥驳，顯示的結果是 NaN （not a number）
// 算術運算符
console.log(1+2*3/2)//? 4
letnum=10
console.log(num+10)// 20
console.log(num+num)// 20
// 1. 取模(取余數(shù))? 使用場景：? 用來判斷某個數(shù)是否能夠被整除
console.log(4%2)//? 0 ?
console.log(6%3)//? 0
console.log(5%3)//? 2
console.log(3%5)//? 3
// 2. 注意事項 : 如果我們計算失敗柿冲，則返回的結果是 NaN (not a number)
console.log('pink老師'-2)
console.log('pink老師'*2)
console.log('pink老師'+2)// pink老師2
賦值運算符
賦值運算符：對變量進行賦值的運算符
=? ? 將等號右邊的值賦予給左邊, 要求左邊必須是一個容器
運算符作用
+=加法賦值
-+減法賦值
*=乘法賦值
/=除法賦值
%=取余賦值
// 賦值運算符
letnum=1
// 1. 需求 我們想要num變量里面的值 + 1， 加完之后再把計算結果存到num里面
// num = num + 1
// console.log(num)
// 2. += 賦值運算符
num+=1// 當前情況下是等價于? num = num + 1
console.log(num)
自增/自減運算符
符號作用說明
++自增變量自身的值加1兆旬，例如: x++
--自減變量自身的值減1假抄，例如: x--
++在前和++在后在單獨使用時二者并沒有差別，而且一般開發(fā)中我們都是獨立使用
++在后（后綴式）我們會使用更多
注意：
只有變量能夠使用自增和自減運算符
++丽猬、-- 可以在變量前面也可以在變量后面宿饱，比如: x++? 或者? ++x
就是++在前面就是先計算，后++就是先取值
// 1. 自增運算符： 可以讓變量里面的值加1
// let x = 3
// // x++ ? // x = x + 1 或者? x += 1
// ++x
// console.log(x)
// 2. ++在前和++在后的區(qū)別宝鼓。 如果單獨使用，沒有區(qū)別巴刻，如果參與了運算就有區(qū)別
// 2.1 ++在前? 前綴式 ： 先對變量值+1愚铡， 然后拿著變量值做運算
// let x = 3
// let y = ++x
// console.log(y) // 4
// console.log(x) // 4
// 2.2 ++在后 后綴式 ： 先拿著變量值運算，再對變量值+1
letx=3
lety=x++
console.log(y)// 3
console.log(x)// 4
比較運算符
使用場景：比較兩個數(shù)據(jù)大小胡陪、是否相等沥寥，根據(jù)比較結果返回一個布爾值（true / false）
運算符作用
>左邊是否大于右邊
<左邊是否小于右邊
>=左邊是否大于或等于右邊
<=左邊是否小于或等于右邊
===左右兩邊是否類型和值都相等（重點）
==左右兩邊值是否相等
!=左右值不相等
!==左右兩邊是否不全等
// 比較運算符： 根據(jù)比較結果返回 布爾值 true / false
console.log(3>5)// false
console.log(3<5)// true
console.log(3>=5)//? false
console.log(3>=3)// true
console.log(3<=5)// true
// console.log(3 = 3)? // 錯誤
// 1. 判斷是否相等我們使用 ===? 要求 值 和 數(shù)據(jù)類型都相等返回的結果才是true,提倡使用三等? 全等
console.log(3===3)// true
console.log(3==='3')//? false
console.log(3!==3)// false
console.log(3!=='3')// true
// 2. == 判斷是否相等，使用較少, 判斷值是否相等柠座，并不判斷數(shù)據(jù)類型是否相等
console.log(3==3)// true
console.log(3=='3')//? true
console.log(3!=3)// false
邏輯運算符
使用場景：可以把多個布爾值放到一起運算邑雅，最終返回一個布爾值
符號名稱日常讀法特點口訣
&&邏輯與并且符號兩邊有一個假的結果為假一假則假
||邏輯或或者符號兩邊有一個真的結果為真一真則真
!邏輯非取反true變false? false變true真變假，假變真
ABA && BA || B!A
falsefalsefalsefalsetrue
falsetruefalsetruetrue
truefalsefalsetruefalse
truetruetruetruefalse
// 邏輯運算符:? 邏輯與 &&? 邏輯或 ||? 邏輯非 !
// 1.邏輯與 &&? 一假則假
console.log(false&&false)// false
console.log(false&&true)// false
console.log(true&&false)// false
console.log(true&&true)// true
console.log(3>5&&2<4)// false
// 判斷某個數(shù)字是否在 8096到36999 之間： 數(shù)字大于等于 8096 并且小于等于36999
letnum=1000
console.log(num>=8096&&num<=36999)// false
console.log('------')
// 2. 邏輯或 || ? 一真則真
console.log(true||false)// true
console.log(false||true)// true
console.log(true||true)// true
console.log(false||false)// false
console.log('------')
// 3. 邏輯非 取反
console.log(!false)// true
console.log(!true)// false
運算符優(yōu)先級
邏輯運算符優(yōu)先級： 妈经！> && >? ||?
綜合案例
需求：用戶輸入商品價格和商品數(shù)量淮野，以及收貨地址捧书，可以自動打印訂單信息
分析：
①：輸入數(shù)據(jù)
? ? ? 需要輸入3個數(shù)據(jù)，所以需要3個變量來存儲? 價格 price骤星、數(shù)量 num经瓷、地址 address
②：處理數(shù)據(jù)
? ? 需要計算總的價格保存變量：總計 total? = price *? num
③：輸出數(shù)據(jù)
? ? ? 頁面打印生成表格，里面填充數(shù)據(jù)洞难，使用模板字符串
完整代碼：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>綜合案例-商品訂單信息頁面</title>
<style>
.title{
text-align:center;
color:#3e3e3e;
?? }
.order{
/* 合并相鄰邊框 */
border-collapse:collapse;
height:80px;
margin:0auto;
text-align:center;
border-radius:10px10px00;
overflow:hidden;
?? }
/* 給行添加漸變背景顏色 */
.ordertr:nth-child(1) {
background-image:linear-gradient(toright,#f46e33,#f057a5);
?? }
.ordertr:nth-child(2) {
background-image:linear-gradient(toright,#fdf0eb,#fdeff6);
?? }
.ordertr:nth-child(2) :last-child{
color:#f282bb;
?? }
.orderth{
padding:5px50px;
color:#fff;
?? }
.order,
th,
td{
border:1pxsolid#fff;
line-height:50px;
?? }
</style>
</head>
<body>
<h2class="title">訂單詳情頁面</h2>
<script>
// 1. 輸入數(shù)據(jù)
letprice=prompt('請你輸入商品單價:')
letnum=prompt('請您輸入商品數(shù)量:')
letaddress=prompt('請您輸入收貨地址:')
// 2. 處理數(shù)據(jù)
lettotal=price*num// 計算總價
// alert(total)
// 3. 輸出數(shù)據(jù)
document.write(`
<table class="order">
<tr>
<th>商品名稱</th>
<th>商品價格</th>
<th>商品數(shù)量</th>
<th>總價</th>
<th>收貨地址</th>
</tr>
<tr>
<td>小米青春版PLUS</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>
