一、数据类型转换
一、引出
分为隐式、显示类型。
<script>
// 出现弹窗，让用户输入内容
let num = prompt("请输入一个数字")
// 检测数据类型并输出
console.log(typeof num) //string字符串
// +号有两个意思：1、数字求和 2、字符串
// 如果+号左右其中一个为字符串，那么+号iu是用来拼接的
console.log(num + 5) //105
// 数据类型转换
// 为了得到理想的结果
</script>
二、隐式类型转换
js在进行运算时，会发生隐式类型转换
+"10" 隐式类型转换
<script>
// 1、隐式转换，就是由javascript内部自己】根据需要】
// 对数据类型进行转换
let x = '10' //string
console.log(x - 1) //NAN不对 结果为9
let s = 'hahah'
console.log(s - 1) //NAN
// 在上述第一个列子中，JS内部先将'10'转成了10 再进行减1操作
// 'hahah'转成了NAN再进行减1操作
// 布尔类型
let isCool = true
console.log(true - 1)
// 上述列子中又发生了类型转换
// 先将true转换成数字1然后 1 - 1 结果为0
isCool = false
console.log(isCool - 1)
// 结果为-1
console.log(isCool + 1)
// 上述的运算在进行转换无非就是把
// isCool转成数字 或者
// 把 1 转成布尔
// 加减乘除 数值类型
// + 数字的运算，把isCool转成数字，也就是0
// 0 + 1 = 1
// js在进行运算，会发生隐式类型转换
</script>
三、显示类型转换
a) Number 是用来将一个数据转成数值类型的办法,如果能转就转 转不成就为NaN
b) parseInt能够将字符串以【数字开头】的部分提取出来
parseInt(数据) 只保留整数
parseFloat(数据) 可以保留小数
parseFloat会替换parseInt
<script>
let x = '10' // string
console.log(x + 5) // 105
// 先将x转成数字，然后再加5
console.log(x - 0 + 5) // 15
let y = '10'
console.log(+y +5) //15
// 开发中尽量少用这些用法（隐式类型容易出现bug）
// TypeScript要求数据类型一定要明确
// +"11"就会发生隐式转换
// 2、显示转换，光明正大的进行转换
let y1 = '10'
// 下面的代码是指重新定义变量，保存结果
let newY1 =Number(y1)
console.log(newY + 20) //结果为30
// 如果一个字符无法转换成数字，那么会怎末样
let t = 'haha'
let newT = Number(t)
console.log(newT) //NaN
// Number 是用来将一个数据转成数值类型的办法
// 如果能转就转 转不成就为NaN
// 练习题
let isFine = true
Number(isFine)
// b)parseInt能够将字符串以【数字开头】的部分提取出来
let j ='123abc'
// 能不能转换成一个数字？
console.log(Number(j)) //NaN
let newJ = parseInt(j)
console.log(newJ) //123
let z ='abc123'
let newZ = parseInt(z)
console.log(newZ) //NaN
// c)parseFloat能够将字符串中以【数字开头】的
// 数字部分提取出来，所不同的是它支持小数
// 将数字部分提取出来(含小数)
let p = '123.45元'
let newP = parseFloat(p)
console.log(newP) //123.45
let newP1 = parseInt(p)
console.log(newP1) //123 只提取整数部分
// 如果单纯只是提取字符串开头部分的整数，请使用parseFloat
// 提取字符串开头的【数字部分】，parseInt
// 纯数字字符串"100",Number
let b = '123abc'
console.log(parseFloat(b))
</script>
模板字符串（进行拼接的时候用）${}
四、作业
<!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>
h3{
text-align: center;
}
table{
width: 400px;
height: 90px;
margin: 0 auto;
}
table,th,td{
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
</style>
</head>
<body>
<h3>订单确认</h3>
<script>
let name = prompt("请输入商品名称：")
let price = prompt("请输入商品价格：")
let num = prompt("请输入商品数量：")
let total = parseFloat(price) * parseFloat(num)
let address = prompt("请输入商品地址:")
// console.log(name,price,num,address)
document.write(`<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品总价</th>
<th>商品地址</th>
</tr>
<tr>
<td>${name}</td>
<td>${price}</td>
<td>${num}</td>
<td>${total}</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>
二、运算符
赋值、一元、比较、逻辑
一、赋值运算符
<body>
<div class="container">
<h4>JavaScript 赋值运算符</h4>
<p>JavaScript 中除了 = 外，还有有许多与赋值相关的运算符:</p>
<ul>
<li>+=</li>
<li>-=</li>
<li>*=</li>
<li>/=</li>
<li>%=</li>
</ul>
<script>
// 定义一个变量并赋值
let num = 10
// 让自身减1，然后再次赋值给自身
num = num - 1
console.log(num) // 9
num -= 1 //相当于num = num -1
console.log(num)
// -= 先减再等于
let y = 9
y += 1
console.log(y) //10
let z = 10
z /= 2
console.log(z) //5
</script>
</div>
</body>
二、一元运算符
一、二、三...运算符
<body>
<div class="container">
<h4>JavaScript 一元运算符</h4>
<p>一元运算符指的只有单个变量参与运算的情形，最常见的一元运算符为 ++ 和 --</p>
<script>
// 运算只操作一个变量，就是一元运算
// ...两个，就是二元运算符
// ...
let x = 1
let y = 2
x + y //二元
let t = 3
t++
// 1、++ 是一个运算符，它使当前数据进行 +1的操作
let j = 4
j++ //5 相当于就j=j+1
console.log(j)
j++
console.log(j)
// 2、--是一个运算符
let z = 10
z-- //9
console.log(z)
z-- //8
console.log(z)
</script>
</div>
</body>
前++ 后++
<script>
// ++ 和 --有两种用法
// 前++ 后++
let i = 0
i++ //1
console.log(i)
++i
console //1
// 独立用没有任何区别
let p = 10
//++与另外一个数据进行运算
let newP = p++ + 5
console.log(newP) //15
//如果使用后++ 先与其他的数据进行运算，然后再自己加1
console.log(p) //11
let l = 9
let newL = ++q + 4 //13
console.log(newL)
//前++ 自身先加+ 然后再与其他进行运算
//面试题
let i = 1
console.log(i++ + ++i +i)
let a = 1
console.log(a++ + ++a +a) //前++先把a变成了2
不管是前++ 还是后++ 总共加了2次
console.log(a) //a=3(2 2 3)
</script>
三、比较运算符
比较两个数据大小是否相等
<body>
<div class="container">
<h4>JavaScript 比较运算符</h4>
<p>比较运算符用来比较两个数值类型数据的大小关系，非数值类型的数据会在隐式转换后再进行比较。</p>
<script>
//在计算机世界中也是会比较两个数据的大小关系，会用比较运算符
// > < != ==
let x = 3
let y = 5
// 1、x是否大于y
let res = x > y//不大于
console.log(res)
// 2、x是否小于y
res = x < y
console.log(res)
//比较运算符的结果一定是布尔类型（true false）
// 3、！=是否不相等
res = x != y
console.log(res)
// 4、x是否小于等于y <=
res =x <= y
console.log(res)
// 5、x是否大于等于y >=
res =x >= y
console.log(res)
// 6、x是否相等y ==
res = x == y
console.log(res)
// js中用于【判断相等的符号】有两个
// == ===
// 区别在于== 是值相等
// ===不仅值还有数据类型也相等
let h ='10'
let d = 10
console.log(h == d) //true
console.log(h == d) //false
// 使用==项目中命名会报错！
// 字符类型也可以比较
let e ='a'
let f ='b'
console.log(e>f) //false
console.log('hello' === 'hello') //true
console.log(0.1 + 0.2) //约等于0.3
// 不是js 而是计算机知识问题
console.log(0.1 + 0.3 === 0.3) //false
// 是不是只要小数就会有问题吗？不是
// 不要对小数进行对比，因为可能出现精度问题！！
</script>
</div>
</body>
四、逻辑运算符
<script>
// 针对布尔类型运算叫做逻辑运算符
// 3种符号
// 1、&& 逻辑与
// 2、|| 逻辑或
// 3、！ 逻辑非
// 运算结果为布尔类型
let isFine = true
let isCool = false
// a)&& "且"
// isFine && isCool //false
// 一假则假
console.log(isFine && isCool) //false
// b)|| '或'
// 一真则真
console.log(isFine || isCool) //true
// c)! '取反'
// 真变假，假变真
console.log(!isCool) //true
</script>
练习：
<title>判断一个数是4 的倍数，且不是100的倍数</title>
</head>
<body>
<script>
// 输入数字
let num = prompt("请输入一个数字：")
// 1、判断是不是某个数的倍数，取余%
// 比较运算符 结果为布尔型
let num4 = num % 4 === 0 //true false
let num10 = num % 100 !== 0
// 2、且 满足至少两个条件（true）
console.log(num4 && num10) //true或false
</script>
</body>
五、运算符优先级
<script>
is1 = true
is2 = false
console.log(!is1 && is2) //false
console.log(is1 || is2 && is1) //true
</script>
三、语句
一、表达式和语句
二、分支语句
if、三元运算符、switch语句
1、if分支语句
<style>
.container {
padding: 10px 30px;
}
</style>
</head>
<body>
<div class="container">
<h4>JavaScript 分支语句</h4>
<p>分支语句也叫条件语句，代码只有在满足一定条件时才可以被执行：</p>
<ul>
<li>if/else</li>
<li>三元运算符</li>
<li>switch</li>
</ul>
<script>
// 1、if判断
//if(条件为真){
//执行的代码
//}
if(true){
alert('代码被执行了')
}
let age = 10
if(age>20){
alter('年龄大于20')
}
// 2、if/else
if(true){
//为true执行这里的
}else{
//为false执行这里的
}
let gender = '女'
if(gender === '男'){
alert("男")
}else{
alert('为女')
}
</script>
</div>
</body>
练习1：
判断输入数字是否大于700
<script>
// 1、让用户输入自己的分数 prompt
// 2、通过if进行判断
let score = prompt("请输入你的分数：")
if(score> 700){
alert("大于700")
}else{
alert("小于700")
}
</script>
练习2：
用户登录 username
<script>
// 1、prompt 两次
let username = prompt("请输入用户名：")
let password = prompt("请输入密码：")
// 2、用户名 === pink && 密码 === 123456
if(username === 'pink' && password === '123456'){
alert("成功登录")
}else{
alert("输入账号或密码错误")
}
</script>
练习3：
判断是否为闰年
<script>
<script>
// 如果一个年份它是4的倍数且不是100的倍数，或者能被400整除，就是闰年
// 1、先计算是不是4的倍数 true false
// 2、再计算是不是100的倍数
// 取余为0 表示是某某的倍数
let year = prompt("请输入一个年份：")
if((year % 4 === 0 && year % 100 !== 0 )||year % 400 === 0){
alert(`${year}是闰年`)
}else{
alert(`${year}不是闰年`)
}
</script>
练习4：
判断成绩
<script>
let score = prompt("请输入你的分数")
if(score<100 && score>=90){
alert("A")
}else if(score<90 && score>=80){
alert("B")
}else if(score<80 && score>=70){
alert("C")
}else if(score<70 && score>=60){
alert("D")
}else if(score<60 && score>=0){
alert("E")
}else{
alert("输入错误")
}
</script>
2、三元运算符
条件？真结果：假结果
<script>
let a = null
let b = null
let age = prompt("请输入你的年龄：")
age>18 ? (a='成年人',b="18岁以上") ：(a='未成年',b='18岁以下')
alert('a')
alert('b')
</script>
<script>
// 1、多分支
// a) else if
// b) switch
// 2、两种多分枝的区别
// 答：else if条件是多种多样的，可以表示一个范围score >= 90
// 也可以是一个具体的值if(true){}else if(score === 61){}
// switch只能是固定的 === 进行判断
// 凡是使用switch的地方，都可以使用else if
// 3、else if的语法格式
if (条件1) {
} else if (条件2) {
} else if (条件3) {
} else {
}
// 4、switch case语法格式
switch (数据) {
case 条件1:
break
case 条件2:
break
case 条件n:
break
default:
}
// 5、三元运算符
// 答：它是一种运算逻辑，可以根据条件返回一个结果
// let 变量 = 条件 ? 结果1 : 结果2
// 但是在日常开发也会使用三元运算符来实现与if else相同的逻辑
// 条件? true 执行此处逻辑词 : false执行此处逻辑词
// 代码简单，希望得到一种结果，用三元运算符
// 6、短路运算符
// &&
</script>
3、switch语句
switch (数据) { case 条件1: break case 条件2: break case 条件n: break default: }
练习1：判断年月日
<script>
let year = prompt('请输入年份')
let month = prompt('请输入月份')
let day
switch (month) {
case '1':
case '3':
case '5':
case '7':
case '8':
case '10':
case '12':
day = 31
break
case '4':
case '6':
case '9':
case '11':
day = 30
break
case '2':
if(year % 400 === 0 ||(year % 4 ===0
&& year % 100 !== 0)){
day = 29
}else{
day = 28
}
break
}
alert(`${year}年的${month}月有${day}天`)
</script>
练习2：输入星期几，输出对应的英文
<script>
let day = prompt("请输入今天星期几")
switch(day){
case '星期一':
alert("Monday")
break
case '星期二':
alert("Tuesday")
break
case '星期三':
alert("Wednesday")
break
case '星期四':
alert("Thursday")
break
case '星期五':
alert("Friday")
break
case '星期六':
alert("Saturday")
break
case '星期天':
alert("Sunday")
break
default:
alert("error")
break
}
</script>
\
