黑马程序员前端JavaScript入门到精通全套视频教程，javascript核
JavaScript由ECMAScript和Web APIs组成。在浏览器运行。
APIs由DOM(页面文档对象模型)和BOM(浏览器对象模型)。
ECMAScript:
规定了js基础语法核心知识，比如：变量、分支语句、循环语句、对象等等
WEB APIs:
DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等
JavaScript输入输出语法
输入
语法一：
document.write('要输出内容')
作用：向body内输入内容
注意：如果输出的内容是标签，也会被解析成网页元素
语法二：
alert('要输入内容')
作用：页面弹出警告对话框
语法三：
console.log('要输入内容')
作用：控制台打印输出
输出
语法一：
prompt('内容')
作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
字面量
字面量（literal）指计算机中描述的事/物
比如：
1000 是 数字字面量
'ABC' 字符串字面量
[]数组字面量
{}对象字面量等
变量
变量相当于一个容器用let定义 = 赋值符号
let age = 18, gender = 'man'//尽量不要用这种方法，一行声明一个变量 let num = 20 let name = 'jake' let 姓名 = 'rose'//可以用中文当变量名 age = 20//将age值改为20
let不允许多次声明变量，var可以多次声明
var声明：
1、可以先使用在声明（不合理）
2、var声明过的变量可以重复声明（不合理）
3、比如变量提升、全局变量、没有块级作用域等
变量命名规则
1、不能使用关键字(JavaScript内置英语词汇)：如 let、var、if、for等
2、只能用下划线、字母、数字、$组成，且数字不能开头
3、字母严格区分大小写，如Age和age是不同变量
常量
const PI = 3.14
1、常量声明的值不能更改
2、常量声明时必须赋值
JavaScript算术运算符执行优先级：
1、使用（）优先级最高
2、乘、除、取余优先级相同
3、加、减优先级相同
当不同运算符运算时获得到一个不正确的或者未定义的数学操作所得到的结果---NaN
console.log('老师' - 2)//NaN
NaN是粘性的，任何对NaN的操作都会返回NaN
console.log(NaN + 3)//NaN
NaN与自身也不同
console.log(NaN === NaN)//false
数字运算符
JavaScript算术运算符执行优先级：
1、使用（）优先级最高
2、乘、除、取余优先级相同
3、加、减优先级相同
当不同运算符运算时获得到一个不正确的或者未定义的数学操作所得到的结果---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('\'你\'很"帅"')//单双套用 \为转译符
字符串拼接使用+
console.log('吴'+'彦祖')//字符串拼接 输出吴彦祖
let age = 21
console.log('我今年'+age+'岁了')
模板字符串（ES6新语法*）
使用场景：
拼接字符串和变量时
document.write('大家好，我叫' + name + '，今年' + age + '岁')
语法：
``反引号
内容拼接变量时，用${}包住变量
布尔型（boolean）
只有true 和 false
未定义类型（undefined）
只声明变量不赋值的情况下，变量的默认值为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的区别：
undefined表示没有赋值
null表示赋值了，但是内容为空
null开发场景：
将来有个变量里面存放一个对象，但对象没创建好，先赋值null
检测数据类型
typeof运算符可以返回被检测的数据类型。它支持两种语法形式：
1、作为运算符：typeof x(常用写法)
2、作为函数形式：typeof(x)
let num = 10 console.log(typeof num)//number let ob = null console.log(typeof ob)//object
类型转换
隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换被称为隐式转换
规则：
+号两边只要有一个时字符串，就会把另一边的也转换成字符串类型
除了+以外的算数运算符 比如 - * / 等会把数据转换成数字类型
技巧：
+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串
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 = ['曹操','孙权','刘备','赵云','吕布','周瑜']
//方法一：双重循环 好理解时间复杂度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)
// }
//方法二 一重循环 时间复杂度 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},${b})`
}
}
const div1 = document.querySelector('div')
div1.style.backgroundColor = getUserColor(pd)
</script>
3、渲染学生信息
<body>
<h2>学生列表</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、猜数字游戏
<script>
let num = Math.floor(Math.random() * 11)
let pd = 1
let gus = +prompt('请输入数字（1-10）')
while(pd){
if(gus < num){
gus = +prompt('猜小了，请再输入数字（1-10）')
}
else if(gus > num){
gus = +prompt('猜大了，请再输入数字（1-10）')
}
else if(gus == num){
alert('恭喜你，猜对了！')
pd = 0
}
}
</script>
年会发奖
<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>
