黑馬程序員前端JavaScript入門到精通全套視頻教程，javascript核
JavaScript由ECMAScript和Web APIs組成。在瀏覽器運行。
APIs由DOM(頁面文檔對象模型)和BOM(瀏覽器對象模型)。
ECMAScript:
規(guī)定了js基礎(chǔ)語法核心知識，比如：變量、分支語句、循環(huán)語句、對象等等
WEB APIs:
DOM 操作文檔，比如對頁面元素進行移動、大小、添加刪除等操作
BOM 操作瀏覽器，比如頁面彈窗，檢測窗口寬度、存儲數(shù)據(jù)到瀏覽器等等
JavaScript輸入輸出語法
輸入
語法一：
document.write('要輸出內(nèi)容')
作用：向body內(nèi)輸入內(nèi)容
注意：如果輸出的內(nèi)容是標(biāo)簽，也會被解析成網(wǎng)頁元素
語法二：
alert('要輸入內(nèi)容')
作用：頁面彈出警告對話框
語法三：
console.log('要輸入內(nèi)容')
作用：控制臺打印輸出
輸出
語法一：
prompt('內(nèi)容')
作用：顯示一個對話框，對話框中包含一條文字信息，用來提示用戶輸入文字
字面量
字面量（literal）指計算機中描述的事/物
比如：
1000 是 數(shù)字字面量
'ABC' 字符串字面量
[]數(shù)組字面量
{}對象字面量等
變量
變量相當(dāng)于一個容器用let定義 = 賦值符號
let age = 18, gender = 'man'//盡量不要用這種方法，一行聲明一個變量 let num = 20 let name = 'jake' let 姓名 = 'rose'//可以用中文當(dāng)變量名 age = 20//將age值改為20
let不允許多次聲明變量，var可以多次聲明
var聲明：
1、可以先使用在聲明（不合理）
2、var聲明過的變量可以重復(fù)聲明（不合理）
3、比如變量提升、全局變量、沒有塊級作用域等
變量命名規(guī)則
1、不能使用關(guān)鍵字(JavaScript內(nèi)置英語詞匯)：如 let、var、if、for等
2、只能用下劃線、字母、數(shù)字、$組成，且數(shù)字不能開頭
3、字母嚴(yán)格區(qū)分大小寫，如Age和age是不同變量
常量
const PI = 3.14
1、常量聲明的值不能更改
2、常量聲明時必須賦值
JavaScript算術(shù)運算符執(zhí)行優(yōu)先級：
1、使用（）優(yōu)先級最高
2、乘、除、取余優(yōu)先級相同
3、加、減優(yōu)先級相同
當(dāng)不同運算符運算時獲得到一個不正確的或者未定義的數(shù)學(xué)操作所得到的結(jié)果---NaN
console.log('老師' - 2)//NaN
NaN是粘性的，任何對NaN的操作都會返回NaN
console.log(NaN + 3)//NaN
NaN與自身也不同
console.log(NaN === NaN)//false
數(shù)字運算符
JavaScript算術(shù)運算符執(zhí)行優(yōu)先級：
1、使用（）優(yōu)先級最高
2、乘、除、取余優(yōu)先級相同
3、加、減優(yōu)先級相同
當(dāng)不同運算符運算時獲得到一個不正確的或者未定義的數(shù)學(xué)操作所得到的結(jié)果---NaN
console.log('老師' - 2)//NaN
NaN是粘性的，任何對NaN的操作都會返回NaN
console.log(NaN + 3)//NaN
NaN與自身也不同
console.log(NaN === NaN)//false
字符運算符
let* s1 = 'a'
let* s2 = "b"
let* s3 = `c`//反引號
let* s4 = '123456'//這也是字符串
let* s5 = ''//空字符串
console.log('\'你\'很"帥"')//單雙套用 \為轉(zhuǎn)譯符
字符串拼接使用+
console.log('吳'+'彥祖')//字符串拼接 輸出吳彥祖
let age = 21
console.log('我今年'+age+'歲了')
模板字符串（ES6新語法*）
使用場景：
拼接字符串和變量時
document.write('大家好，我叫' + name + '，今年' + age + '歲')
語法：
``反引號
內(nèi)容拼接變量時，用${}包住變量
布爾型（boolean）
只有true 和 false
未定義類型（undefined）
只聲明變量不賦值的情況下，變量的默認(rèn)值為undefined，一般很少直接為某個變量賦值undefined
let num console.log(num)//undefined console.log(undefined)//NaN
null(空類型)
JavaScript中的null僅僅時一個代表“無”、“空”、“值未知”的特殊值
let obj = null conslole.log(obj)//null conslole.log(null + 1)//1
undefined和null的區(qū)別：
undefined表示沒有賦值
null表示賦值了，但是內(nèi)容為空
null開發(fā)場景：
將來有個變量里面存放一個對象，但對象沒創(chuàng)建好，先賦值null
檢測數(shù)據(jù)類型
typeof運算符可以返回被檢測的數(shù)據(jù)類型。它支持兩種語法形式：
1、作為運算符：typeof x(常用寫法)
2、作為函數(shù)形式：typeof(x)
let num = 10 console.log(typeof num)//number let ob = null console.log(typeof ob)//object
類型轉(zhuǎn)換
隱式轉(zhuǎn)換
某些運算符被執(zhí)行時，系統(tǒng)內(nèi)部自動將數(shù)據(jù)類型進行轉(zhuǎn)換，這種轉(zhuǎn)換被稱為隱式轉(zhuǎn)換
規(guī)則：
+號兩邊只要有一個時字符串，就會把另一邊的也轉(zhuǎn)換成字符串類型
除了+以外的算數(shù)運算符 比如 - * / 等會把數(shù)據(jù)轉(zhuǎn)換成數(shù)字類型
技巧：
+號作為正號解析可以轉(zhuǎn)換成數(shù)字型
任何數(shù)據(jù)和字符串相加結(jié)果都是字符串
console.log(2 + 2)//4
????console.log(2 - 2)//0
????console.log('2' + 2)//22
????console.log('2' - 2)//0
????console.log('p' - 2)//NaN
????console.log(typeof '2')//string
????console.log(typeof +'2')//number
????console.log(+'22' - 2)//20
1、隨機點名
??<script>
? ? ? ? ?let arr = ['曹操','孫權(quán)','劉備','趙云','呂布','周瑜']
? ? ? ? //方法一：雙重循環(huán) 好理解時間復(fù)雜度n2
? ? ? ? // for(let i = 0; i<arr.length; i++){
? ? ? ? // ? ? let random = Math.floor(Math.random() * arr.length)
? ? ? ? // ? ? while(arr[random] == undefined){
? ? ? ? // ? ? ?random = Math.floor(Math.random() * arr.length)
? ? ? ? // ? ? }
? ? ? ? // ? ? console.log(arr[random])
? ? ? ? // ? ? arr.splice(random,1)
? ? ? ? ? ?
? ? ? ? // }
? ? ? ? //方法二 一重循環(huán) 時間復(fù)雜度 n
? ? ? ? while(true){
? ? ? ? ? ? if(arr.length === 0){break}
? ? ? ? ? ? let random = Math.floor(Math.random() * arr.length)? ? ? ? ? ? console.log(arr[random])
? ? ? ? ? ? arr.splice(random,1) ? ? ? ? ?
? ? ? ? } ? ? ?
? ? ? ?
? ? </script>
2、隨機顏色
<script>
? ? ? ? let pd = +prompt("請選擇顏色方法（1/0）")
? ? ? ?
? ? ? ? function getUserColor(pd = 1){
? ? ? ? ? ? console.log('aaa');
? ? ? ? ? ? if(pd === 1){
? ? ? ? ? ? ? ? let color1 = '#'
? ? ? ? ? ? ? ? let arr = ['1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
? ? ? ? ? ? ? ? for(let i = 0; i<6; i++){
? ? ? ? ? ? ? ? let random = Math.floor(Math.random() * arr.length)
? ? ? ? ? ? ? ? ?color1 = color1 + arr[random]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? return color1
? ? ? ? ? ? }
? ? ? ? ? ? if(pd === 0){
? ? ? ? ? ? ? ? let r = Math.floor(Math.random() * 256)
? ? ? ? ? ? ? ? let g = Math.floor(Math.random() * 256) ? ? ? ? ? ?
? ? ? ? ? ? ? ? let b = Math.floor(Math.random() * 256) ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? return `rgb(${r},${g},$)`
? ? ? ? ? ? }
? ? ? ? ? ?
? ? ? ? }
? ? ? ?
? ? ? ? const div1 = document.querySelector('div')
? ? ? ? div1.style.backgroundColor = getUserColor(pd)
? ? </script>
3、渲染學(xué)生信息
<body>
? ? <h2>學(xué)生列表</h2>
? ? <table>
? ? ? ? <tr>
? ? ? ? ? ? <th>姓名</th>
? ? ? ? ? ? <th>年齡</th>
? ? ? ? ? ? <th>性別</th>
? ? ? ? </tr>
? ? ? ? <script>
? ? ? ? ? ? let stuArr = [
? ? ? ? ? ? ? ? {'stuName':'小明','stuAge':23,'stuGender':'男'},
? ? ? ? ? ? ? ? {'stuName':'小紅','stuAge':21,'stuGender':'女'},
? ? ? ? ? ? ? ? {'stuName':'小剛','stuAge':24,'stuGender':'男'},
? ? ? ? ? ? ? ? {'stuName':'小強','stuAge':20,'stuGender':'男'},
? ? ? ? ? ? ]
? ? ? ? ? ? for(let students of stuArr){ ? ? ? ? ?
? ? ? ? ? ? ? ? document.write(`
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>${students.stuName}</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>${students.stuAge}</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>${students.stuGender}</td>
? ? ? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? `)
? ? ? ? ? ? }
? ?
? ? ? ? </script>
? ? </table>
? ?
</body>
4、猜數(shù)字游戲
<script>
? ? ? ? let num = Math.floor(Math.random() * 11)
? ? ? ? let pd = 1
? ? ? ? let gus = +prompt('請輸入數(shù)字（1-10）')
? ? ? ? while(pd){
? ? ? ? ? ? if(gus < num){
? ? ? ? ? ? ? ? gus = +prompt('猜小了，請再輸入數(shù)字（1-10）')
? ? ? ? ? ? }
? ? ? ? ? ? else if(gus > num){
? ? ? ? ? ? ? ? gus = +prompt('猜大了，請再輸入數(shù)字（1-10）')
? ? ? ? ? ? }
? ? ? ? ? ? else if(gus == num){
? ? ? ? ? ? ? ? alert('恭喜你，猜對了！')
? ? ? ? ? ? ? ? pd = 0
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
年會發(fā)獎
<body>
? ? <strong>公司年會</strong>
? ? <h2>一等獎:<span class="h2">xxx</span></h2>
? ? <h3>二等獎:<span class="h3">xxx</span></h3>
? ? <h4>三等獎:<span class="h4">xxx</span></h4>
? ? <script>
? ? ? ? let h2 = document.querySelector('.h2')
? ? ? ? let h3 = document.querySelector('.h3')
? ? ? ? let h4 = document.querySelector('.h4')
? ? ? ? const arr = ['jake','rose','vency'] ? ? ?
? ? ? ? //方法一
? ? ? ? // var rand = Math.floor(Math.random()*arr.length)
? ? ? ? // h2.innerHTML = arr[rand]
? ? ? ? // arr.splice(rand,1)
? ? ? ? // var rand = Math.floor(Math.random()*arr.length) ? ? ? ?
? ? ? ? // h3.innerHTML = arr[rand]
? ? ? ? // arr.splice(rand,1)
? ? ? ? // var rand = Math.floor(Math.random()*arr.length) ? ?
? ? ? ? // h4.innerHTML = arr[rand]
? ? ? ? // arr.splice(rand,1)
? ? ? ? //方法二
? ? ? ? inner(h2)
? ? ? ? inner(h3)
? ? ? ? inner(h4)
? ? ? ? function inner(name){
? ? ? ? ? ?
? ? ? ? ? ? var rand = Math.floor(Math.random()*arr.length)
? ? ? ? ? ? name.innerHTML = arr[rand]
? ? ? ? ? ? arr.splice(rand,1)
? ? ? ? }
? ? </script>
</body>
