案例1：js初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击我变成粉色</button>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', () => {
btn.style.backgroundColor = 'pink'
})
</script>
</body>
</html>
案例2：js的引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 内部
// prompt('请输入您的年龄：')
</script>
<!-- 外部 -->
<script src="./03-外部js.js">
</script>
</body>
</html>
外部js
prompt('年龄：')
案例3：输入输出语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 输入语句
// prompt('请输入您的密码：')
// 打印到页面
document.write('你们真是小天才')
// 可以识别标签
document.write('<strong>你们真是小天才</strong>')
// 控制台输出语句
console.log('我现在要在控制台输出')
</script>
</body>
</html>
案例4：变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 变量：盒子----存储数据的容器 数据本身不是变量
// 变量的声明：
// let 变量名 var 变量名
// let age
// // 变量赋值
// age = prompt('请输入您的年龄：')
// age = 33
// console.log(age)
// 变量的初始化
// let uname = prompt('请输入您的用户名：')
// console.log(uname)
// 同时定义多个变量
// let uname = 'zs', age = 21
// console.log(uname, age)
let age = prompt('请输入年龄：')
document.write(age)
</script>
</body>
</html>
案例5：变量命名规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 变量命名规范:1、有效符号（大小写字母、数字、下划线、$）
// 2、关键字、保留字不能用于变量命名
// 3、不以数字开头
// 4、尽量用有意义的变量名
// 5、驼峰命名法 userName
</script>
</body>
</html>
案例6：let和var的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var 可以多次声明同一变量
console.log(age)
// var age
let age
</script>
</body>
</html>
案例7：const常量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 常量名大写 常量无法更改
const PI = 3.14
// PI = 4.456
console.log(PI)
</script>
</body>
</html>
案例8：数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// js是弱数据类型语言 只有赋值之后，才知道是什么数据类型
let uname = 21
uname = 'gouxin'
console.log(typeof (uname))
</script>
</body>
</html>
案例9：基本数据类型--数字类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 21.21312
let b = 33
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)
</script>
</body>
</html>
案例10：字符串类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// let uname1 = 'nnnsns'
// console.log(typeof (uname1))
// let uname2 = "nnnsns"
// console.log(typeof (uname2))
// let uname3 = "nnn'gouxin'sns"
// console.log(typeof (uname3))
// let uname4 = 'nnn"gouxin"sns'
// console.log(typeof (uname4))
// 字符串拼接用+
let a = +prompt("请输入num1")
let b = +prompt("请输入num2")
// alert 警示框
alert(a + b)
// 模板字符串
// let uname = prompt("请输入名字：")
// let age = prompt("请输入年龄：")
// document.write('你叫' + uname + ',今年' + age + '岁了')
// document.write(`<strong>你叫${uname},今年${age}岁了</strong>`)
</script>
</body>
</html>
案例11：布尔类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(typeof (3 < 5))
// undefinded 声明，未赋值
// null NaN not a number
console.log(undefined + 1)
console.log(null + 1)
</script>
</body>
</html>
案例12：显示转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = +prompt('num1')
let b = +prompt('num2')
console.log(Number(a) + Number(b))
console.log(typeof (+a))
let c = '200.9875px'
console.log(parseInt(c))
console.log(parseFloat(c))
</script>
</body>
</html>
案例13：综合案例
<!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>
案例14：运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// = 赋值运算符
// let a = 21
// a = 33
// a += 4 // a = a + 4
// a *= 2 //a = a * 2 74
//a -= 3 //a = a - 3
// a /= 2 //a = a / 2 35.5
// alert(a)
// let b = a++ //先赋值，再自增
// alert(b)
// alert(a) //36.5
// b = ++a //先自增，再赋值
// alert(b)
// 比较运算符
// > < >= <= == ===
let num1 = 2
let num2 = '2'
alert(num1 == num2)
alert(num1 === num2)
// == （隐式转换）只比较数值，将字符串转换为数字类型后进行比较 === 即比较数值，也比较类型
</script>
</body>
</html>
案例15：逻辑运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// && || !
// alert(4 > 3 && 3 < 5) //两真为真，一假则假
// alert(4 < 3 || 3 < 5) //一真则真 全假则假
// alert(!true)
alert(!(4 < 3))
</script>
</body>
</html>
案例16：单分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let age = 11
// if(条件){
// 执行的代码
// }
if (age < 18) {
document.write('你是小弟弟，不要乱跑')
}
</script>
</body>
</html>
案例17：双分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let age = +prompt('请输入您的年龄：')
if (age <= 18) {
alert('你不要乱跑')
} else {
alert('恭喜你，成年了')
}
</script>
</body>
</html>
案例18：判断闰年
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// year % 4 === 0 && year % 100 !== 0 || year % 400 === 0
let year = +prompt('请输入年份：')
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
alert('闰年')
} else {
alert('平年')
}
</script>
</body>
</html>
案例19：多分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let age = +prompt('age：')
if (age < 18) {
alert('你是未成年 学习吧')
} else if (age <= 25) {
alert('青春年华')
} else if (age <= 40) {
alert('好汉不提当年勇')
} else {
alert('男人四十一枝花')
}
</script>
</body>
</html>
案例20：三元运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let age = +prompt('请输入您的年龄：')
// if (age <= 18) {
// alert('你不要乱跑')
// } else {
// alert('恭喜你，成年了')
// }
// 判断条件？条件成立时执行的语句：条件不成立时执行的语句
age <= 18 ? alert('你不要乱跑') : alert('恭喜你，成年了')
</script>
</body>
</html>
案例21：求最大值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = +prompt('请输入num1：')
let b = +prompt('请输入num2：')
a > b ? alert(`最大值是：${a}`) : alert(`最大值是：${b}`)
</script>
</body>
</html>
案例22：数字补零
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// alert(2 < '3')
let a = prompt('num')
a >= 10 ? alert(a) : alert(0 + a)
</script>
</body>
</html>
案例23：switch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
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('你是外星人吗')
}
</script>
</body>
</html>
案例24：while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// while 一定要有终止条件
let i = 10
// while (i > 11) {
// console.log('你是大聪明')
// i--
// }
do {
console.log('你是大聪明')
i--
} while (i > 11)
</script>
</body>
</html>
案例25：while练习（1-100累加和）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1~100累加和
let i = 0
let sum = 0
while (i < 101) {
sum += i
i++
}
alert(sum)
</script>
</body>
</html>
案例26：for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
for (let i = 1; i <= 10; i++) {
document.write(`你真是个大聪明<br>`)
}
//
</script>
</body>
</html>
案例27：嵌套循环
<!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>
span {
display: inline-block;
margin: 15px;
}
</style>
</head>
<body>
<script>
for (let i = 1; i < 8; i++) {
console.log(`今天是第${i}天`)
for (let j = 1; j < 11; j++) {
console.log(`这是今天第${j}朵玫瑰花`)
}
}
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/>`)
}
for (let i = 1; i < 6; i++) {
for (let j = 1; j <= i; j++) {
document.write(`*`)
}
document.write(`<br/>`)
}
</script>
</body>
</html>
案例28：continue与break
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
for (let i = 1; i < 100; i++) {
if (i === 50) {
// break
continue
}
console.log(i)
}
// break:跳出循环
// continue：跳出本次循环
</script>
</body>
</html>
案例29：循环加强
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [1, 2, 3, 66, 4, 5]
// for in
// for (let i in arr) {
// console.log(arr[i])
// }
// for of
for (let k of arr) {
console.log(k)
}
</script>
</body>
</html>
案例30：数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// let name1 = '俊杰'
// 有序的数据序列
// 0 1 2 3 4 5
let arr = ['gouxin', 'huangzhong', 'jialuo', 'zhadanren', 12, true]
// 数组的声明方式
// arr[索引下标]
alert(arr[5])
// let arr2 = new Array()
// 数组遍历
// for (let i in arr) {
// console.log(arr[i])
// }
// 数组的操作
// 通过索引下标给对应元素重新赋值
arr[1] = 'guanyu'
console.log(arr instanceof Array)
let arr2 = [1, 2, 3, 4]
// concat合并数组
arr3 = arr.concat(arr2)
console.log(arr3)
// 增 push 在数组末尾添加
arr.push('姜加')
// unshift 在数组首部添加元素
arr.unshift('jiangjia')
arr.shift()
arr.pop()
// splice(删除的起始位置，删除的个数)
arr.splice(3, 1)
// splice(删除的起始位置，0,要添加的元素)
arr.splice(3, 0, 'jiangjia')
console.log(arr)
console.log(arr.join(' **'))
console.log(arr.reverse())
console.log(arr.slice(3))
</script>
</body>
</html>
案例31：二维数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let student = [['jiangjia', 31, 'sing'], ['xuchao', 21, 'dance']]
// console.log(student[1][0])
for (let i in student) {
for (let j in student[i]) {
console.log(student[i][j])
}
}
// student.length 获取数组长度的
</script>
</body>
</html>
标签：web,console,log,前端,alert,let,第五天,Document,age From： https://www.cnblogs.com/wxy1787880204/p/17552526.html