js——行为（动态）
js的引入方式：
1，内部引入：
<script>
prompt('请输入您的年龄：')
</script>
2,外部引入——在外部js文件中写入，再引用
js的输入输出语句
1，输入语句
prompt('请输入您的密码：')——此处注意用反引号
2，打印到页面
document.write('你们真是小天才')
document.write('<strong>你们真是小天才</strong>')
——可以识别标签
3，控制台输出语句
console.log('我现在要在控制台输出')
alert——警示框
变量：
变量——相当于存储数据的容器
变量的声明
let 变量名 var 变量名——var存在很多缺点几乎快被淘汰
——区别：var 可以多次声明同一变量 ，容易出错
列：let age——即定义age为一个变量
变量的赋值
age = prompt('请输入您的年龄：')
age = 33
console.log(age)
——存在覆盖性，此时输出的age为33
变量的初始化
let uname = prompt('请输入您的用户名：')——声明的同时赋值
console.log(uname)
同时定义多个变量
let uname = 'zs', age = 21
console.log(uname, age)——不推荐容易混淆
变量的命名规范
1、有效符号（大小写字母、数字、下划线、$）
2、关键字、保留字不能用于变量命名
3、不以数字开头
4、尽量用有意义的变量名
5、驼峰命名法 userName ——区分两个单词第二个首字母大写
const常量：
<script>
const PI = 3.14——常量名大写 常量无法更改
PI = 4.456
console.log(PI)
</script>
数据类型：
let uname = 21——此时数据类型为整型
uname = 'gouxin'——此时数据类型为字符型
console.log(typeof (uname))——typeof(uname)——uname的类型
js是弱数据类型语言 只有赋值之后，才知道是什么数据类型
基本数据类型
console.log(a)
console.log(a + 2)
console.log(a + b)
console.log(a - b)
console.log(a * b)
console.log(a / b)
console.log(a % 2)
字符串类型
let uname1 = 'nnnsns'
console.log(typeof (uname1))
——string
let uname2 = "nnnsns"
alert(typeof (uname2))
——string
let uname3 = "nnn'gouxin'sns"
alert(typeof (uname3))
——string
let uname4 = 'nnn"gouxin"sns'
console.log(typeof (uname4))
——string
——外为单引号里面需用双引号，外为双引号里面需要为单引号，不然就会只识别第一对单引号或双引号
字符串的拼接用+
let a = prompt("请输入num1")
let b = prompt("请输入num2")
alert(a + b)
——如果输入a为1，b为2则值为12
模板字符串
let uname = prompt("请输入名字：")
let age = prompt("请输入年龄：")
document.write('你叫' + uname + ',今年' + age + '岁了')
document.write(`<strong>你叫${uname},今年${age}岁了</strong>`)
——中间可加标签，注意为返单引号
布尔类型
undefinded —— 声明，未赋值
null —— NaN —— not a number
显示转换
1，在前面加+转换为整型，prompt默认为字符型
let a = +prompt('num1')
let b = +prompt('num2')
2， console.log(Number(a) + Number(b))
3， console.log(typeof (+a))
——转换为整型
let c = '200.9875px'
console.log(parseInt(c))——截取c中整数部分
console.log(parseFloat(c))——截取c中浮动型部分，注意只能截取字符前的数字符后的不能
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
text-align: center;
}
table {
/* 合并相邻边框 */
border-collapse: collapse;
height: 80px;
margin: 0 auto;
text-align: center;
}
th {
padding: 5px 30px;
}
table,
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<h2>订单确认</h2>
<script>
let price = +prompt('请输入单价：')
let num = +prompt('请输入购买数量：')
let address = prompt('请输入收货地址：')
document.write(`
<table>
<thead>
<tr>
<th>
商品名称
</th>
<th>
商品价格
</th>
<th>
商品数量
</th>
<th>
总价
</th>
<th>
收货地址
</th>
</tr>
</thead>
<tr>
<td>小米</td>
<td>${price}</td>
<td>${num}</td>
<td>${price * num}</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>
运算符
= 赋值运算符
let a = 21
a = 33
a += 4 —— a = a + 4
a *= 2 —— a = a * 2
a -= 3 —— a = a - 3
a /= 2 —— a = a / 2
比较运算符
> < >= <= == ===
== 和===的区别：
alert(num1 == num2)
alert(num1 === num2)
== （隐式转换）只比较数值，将字符串转换为数字类型后进行比较 === 即比较数值，也比较类型
逻辑运算符
&& || !
alert(4 > 3 && 3 < 5) //两真为真，一假则假
alert(4 < 3 || 3 < 5) //一真则真 全假则假
alert(!true)
单分支语句
if(条件){
执行的代码
}
列：
if (age < 18) {
document.write('你是小弟弟，不要乱跑')
}
双分支语句
if(条件){
执行的代码
}else{
执行的代码
}
列：
if (age <= 18) {
alert('你不要乱跑')
} else {
alert('恭喜你，成年了')
}
练习：（判断闰年）
let year = +prompt('请输入年份：')
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
alert('闰年')
} else {
alert('平年')
}
多分支语言
if (age < 18) {
alert('你是未成年 学习吧')
} else if (age <= 25) {
alert('青春年华')
} else if (age <= 40) {
alert('好汉不提当年勇')
} else {
alert('男人四十一枝花')
}
三元运算符
判断条件？条件成立时执行的语句：条件不成立时执行的语句
if (age <= 18) {
alert('你不要乱跑')
} else {
alert('恭喜你，成年了')
}
等价于===》
age <= 18 ? alert('你不要乱跑') : alert('恭喜你，成年了')
练习（最大值）
let a = +prompt('请输入num1：')
let b = +prompt('请输入num2：')
a > b ? alert(`最大值是：${a}`) : alert(`最大值是：${b}`)
数字补零
let a = prompt('num')
a >= 10 ? alert(a) : alert(0 + a)
switch
let num = +prompt('请输入今天星期几了：')
switch (num) {
case 1:——满足条件执行
alert('星期一')
break——退出循环
case 2:
alert('星期二了')
break
case 3:
alert('星期三了')
break
case 4:
alert('星期四了')
break
case 5:
alert('星期五了')
break
case 6:
alert('周末了')
break
case 7:
alert('周末了')
break
default:——都不满足执行
alert('你是外星人吗')
}
while循环
while(终止条件){
循环体
}
do while ——先执行再判断
do {
console.log('你是大聪明')
i--
} while (i > 11)
练习：（1~100累加）
let i = 0
let sum = 0
while (i < 101) {
sum += i
i++
}
alert(sum)
for循环
for (let i = 1; i <= 10; i++) {
document.write(`你真是个大聪明<br>`)
}
——注意为返单引号，可嵌套标签
循环嵌套
列：九九乘法表
for (let i = 1; i < 10; i++) {
for (let j = 1; j <= i; j++) {
document.write(`<span>${j}*${i}=${i * j}</span>`);
}
document.write(`<br/>`)
}
continue，break的区别
break:跳出循环
continue：跳出本次循环
continue：
for (let i = 1; i < 100; i++) {
if (i === 50) {
continue
}
console.log(i)
}
——没有50
break
for (let i = 1; i < 100; i++) {
if (i === 50) {
break
}
console.log(i)
}
——50即以后的数字都没有
循环加强
1， for in
let arr = [1, 2, 3, 66, 4, 5]
for (let i in arr) {
console.log(arr[i])
}——数组遍历
——i为数组下标
2，for of
for (let k of arr) {
console.log(k)
}
——k为数组的元素
数组：
数组——同时存储多个有序的数据序列
索引下标从0开始
0 1 2 3 4 5
let arr = ['xin', 'hua', 'jialuo', 'zha', 12, true]
数组的声明方式：
1，arr[索引下标]
2，构造函数
数组的操作（增删查改）
改：——通过索引下标给元素重新赋值
原 let arr = ['xin', 'hua', 'jialuo', 'zha', 12, true]
改arr[1] = 'guanyu'——通过给元素赋值
console.log(arr)
alert(arr instanceof Array)——判断arr是否为数组
合并—— concat合并数组
let arr2 = [1, 2, 3, 4]
arr3 = arr.concat(arr2)
console.log(arr3)
增：
——push 在数组末尾添加
arr.push('姜加')
console.log(arr)
——unshift 在数组首部添加元素
arr.unshift('jiangjia')
console.log(arr)
——任意处增加
splice(删除的起始位置，0,要添加的元素)
删
——首部删除
arr.shift()
console.log(arr)
——尾部删除
arr.pop()
——删除任意处
splice(删除的起始位置，删除的个数)
arr.splice(3, 1)
console.log(arr)
console.log(arr.join(' **'))——以什么方式连接
console.log(arr.reverse())——颠倒数组元素顺序
console.log(arr.slice(3))——截取元素
二维数组
let student = [['jiangjia', 31, 'sing'], ['xuchao', 21, 'dance']]
alert(student[1][0])——下标查找
二维数组遍历
for (let i in student) {
for (let j in student[i]) {
console.log(student[i][j])
}
}
student.length 获取数组长度的——比索引最大值大1
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
