1.js初体验
<body>
<button>点击我变成粉色</button>
<script>
let btn = document.querySelector('button')
btn.addEventListener('click', () => {
btn.style.backgroundColor = 'pink'
})
</script>
</body>
</html>
2.js引入方式
-
<script></script>-----内部引入
-
外部js.js <script src="./93-外部js.js">
<body>
<script>
// 内部
//prompt('请输入您的年龄:')
</script>
<!-- 外部 -->
<script src="./93-外部js.js">
</script>
</body>
3.输入输出语句
-
输入语句-----prompt('请输入您的密码:')
-
打印到页面-----document.write('天才') 可以识别标签-----document.write('<strong>天才</strong>')
-
输出到控制台-----console.log('天才') 警示框-------alert
<body>
<script>
//输入语句
prompt('请输入您的密码:')
//打印到页面//可以识别标签
document.write('<strong>天才</strong>')
//控制台输出语句//不识别标签
console.log('天才')
</script>
<body>
4.变量
变量:盒子----存储数据的容器 数据本身不是变量
变量的声明: let 变量名 ; var 变量名(不用)
<script>
//prompt('请输入您的年龄:')输入语句
let age=prompt('请输入您的年龄:')------变量赋值
console.log(age)-----控制台打印
doucument.write(age)
</script>
变量初始化
let uname=prompt('请输入您的用户名:')
console.log(uname)------不要加''
同时定义多个变量
let uname='张三',age= 21
console.log(uname,age)
5.变量命名规范
<script>
变量命名规范:
1.有效符号(大小写字母、数字、下划线、$)
2.关键字、保留字不能用于变量命名
3.不以数字开头
4.尽量用有意义的变量名
5.驼峰命名法 userName
</script>
6.let和var的区别
var:可以多次声明同一变量
var先使用后声明,不报错
<script>
console.log(age)
var age
</script>
let先使用后声明报错
<script>
console.log(age)
let age
</script>
7.const常量
PI-----常量名大小写 常量无法更改
<script>
const PI = 3.14-----能用const用const,如果后面变化用let
// PI = 4.456-----报错 常量无法更改
console.log(PI)
</script>
8.数据类型
js是弱数据类型语言 只有赋值之后,才知道是什么数据类型
<body>
<script>
// js是弱数据类型语言 只有赋值之后,才知道是什么数据类型
let uname = 21
uname = 'gouxin'
console.log(typeof (uname))-----查看数据类型
</script>
</body>
9.基本数据类型—数字类型
<script>
let a=21
let b=33
console.log(a)------->21
console.log(a+2)----->23
console.log(a+b)----->54
console.log(a-b)---->-12
console.log(a*b)----->693
console.log(a/b)----->0.6363636364
console.log(a%2)----->21
</script>
10.字符串类
两个字符串
let uname1='nnsns'
console.log(typeof (uname1))-----查看数据类型
let uname2='nnsns'
console.log(typeof (uname2))
let uname3="nn'gouxin'sns"------''嵌套 外双中单
console.log(typeof(uname3))
let uname4='nn"douxin"sns'-----外单中双
console.log(typeof(uname4))
字符串拼接用+
alert警示框
let a= +prompt("请输入num1")
let b= +prompt("请输入num2")
alert(a+b)
模板字符串(可以识别标签)
let uname=prompt("请输入名字:")
let age=prompt("请输入年龄:")
效果相同
document.write('你叫' + uname + ',今年' + 'age' + '岁了')
document.write(`<strong>你叫${uname},今年${age}岁了</strong>`)
11.布尔类型
console.log(typeof(3<5))----布尔类型
//undefinded 声明,未赋值
//null 空 NaN not a number缩写NAN
console.log(undefined + 1)------结果:NAN
console.log(null + 1)-------结果:1
12.显示转换
<body>
<script>
字符串
let a = prompt('num1')
let b = prompt('num2')
转化成数字类型方法:
1.let a = prompt('num1')
let b = prompt('num2')
console.log(Number(a) + Number(b))
2.let a = +prompt('num1')
let b = +prompt('num2')
console.log(typeof (+a))
3.let a = +prompt('num1')
let b = +prompt('num2')
console.log(Number(a) + Number(b))
let c = '200.9875px'
console.log(parseInt(c))-------200单独拿出来去掉后面跟的东西
console.log(parseFloat(c))------浮点型200.9875单独拿出来去掉px
</script>
</body>
13.综合案例
<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>
14.运算符
-
赋值运算符 = += -= /= *=
-
a++先给别人用再自增
++a先自增再给别人用
-
比较运算符> < >= <= == ===
==:(隐式转换)只比较数值,将字符串转换为数字类型后进行比较
===:既比较数值,也比较类型
<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>
15.逻辑运算符
&&:有0为0
||:有1为1
!:非
<body>
<script>
// && || !
// alert(4 > 3 && 3 < 5) //两真为真,一假则假
// alert(4 < 3 || 3 < 5) //一真则真 全假则假
// alert(!true)
alert(!(4 < 3))
</script>
</body>
16.单分支语句
<body>
<script>
let age = 11
// if(条件){
// 执行的代码
// }
if (age < 18) {
document.write('你是小弟弟,不要乱跑')
}
</script>
</body>
17.双分支语句
let age = +prompt转换为数字类型
alert警示框
<body>
<script>
let age = +prompt('请输入您的年龄:')
if (age <= 18) {
alert('你不要乱跑')
} else {
alert('恭喜你,成年了')
}
</script>
</body>
18.闰年
year % 4 === 0 && year % 100 !== 0 || year % 400 === 0
<body>
<script>
let year = +prompt('请输入年份:')
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
alert('闰年')
} else {
alert('平年')
}
</script>
</body>
19.多分支语句
if------->else if-------->else
<body>
<script>
let age = +prompt('age:')
if (age < 18) {
alert('你是未成年 学习吧')
} else if (age <= 25) {-------默认从18开始
alert('青春年华')
} else if (age <= 40) {
alert('好汉不提当年勇')
} else {
alert('男人四十一枝花')
}
</script>
</body>
20.三元运算符
双分支的简写
成立:运行?后的
不成立:运行:后的
<body>
<script>
let age = +prompt('请输入您的年龄:')
// if (age <= 18) {
// alert('你不要乱跑')
// } else {
// alert('恭喜你,成年了')
// }
// 判断条件?条件成立时执行的语句:条件不成立时执行的语句
age <= 18 ? alert('你不要乱跑') : alert('恭喜你,成年了')
</script>
</body>
21.求最大值
<body>
<script>
let a = +prompt('请输入num1:')
let b = +prompt('请输入num2:')
a > b ? alert(`最大值是:${a}`) : alert(`最大值是:${b}`)
</script>
</body>
22.数字补零
2<‘3’ 数字和字符串比较时会自动把字符串转化成数字
alert(0 + a)数字和字符串相加会把数字转化成字符串2---->02
<body>
<script>
// alert(2 < '3')
let a = prompt('num')
a >= 10 ? alert(a) : alert(0 + a)
</script>
</body>
23.switch语句
cace1:当你的num=1的时候
break:跳出循环
default:
alert('你是外星人吗')-----没有符合条件的时候输出
<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>
24.while循环
while 一定要有终止条件
i = 10 不符合 i > 11 while不执行
<body>
<script>
// while 一定要有终止条件
let i = 10-----定义变量
while (i > 11) {
console.log('你是大聪明')
i--
}
</script>
</body>
i = 10不符合 i > 11 do while 不管死活先执行一次’你是大聪明’
<body>
<script>
let i = 10-----定义变量
do {
console.log('你是大聪明')
i--
} while (i > 11)
</script>
</body>
25.while练习
<body>
<script>
// 1~100累加和
let i = 0
let sum = 0
while (i < 101) {
sum += i
i++
}
alert(sum)
</script>
</body>
26.for循环
<body>
<script>
for (let i = 1; i <= 10; i++) {
document.write(`你真是个大聪明<br>`)
}
</script>
</body>
27.循环嵌套
display: inline-block水平显示列表项
<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>`);
}---------<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>
28.continue、break
break:跳出循环
continue:跳出本次循环
<body>
<script>
for (let i = 1; i < 100; i++) {
if (i === 50) {
// break
continue
}
console.log(i)
}
// break:跳出循环
// continue:跳出本次循环
</script>
</body>
29.循环加强
arr 数组名
for in 遍历数组 i 代表索引下标
for of 遍历数组 k 代表数组元素
<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>
30.数组
let arr:起变量名,可以是gouxin、12、true(布尔值)
索引下标从 0 开始,快速查找数组元素
<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])
// }
数组的操作 增删改查
改 1.通过索引下标给对应元素重新赋值
arr[1] = 'guanyu'
console.log(arr instanceof Array)--------instanceof Array判断arr是不是数组------console.log(typeof(arr))打印出是什么数组类型
2.let arr2 = [1, 2, 3, 4]
arr3 = arr.concat(arr2)----------concat合并数组,包含了gouxin,guanyu,jialuo,zhadanren,12,true,1,2,3,4
console.log(arr3)
增 3.push 在数组末尾添加
arr.push('姜加')
console.log(arr)
4.unshift 在数组首部添加元素
arr.unshift('jiangjia')
console.log(arr)
删 5.arr.shift() 在数组首部删除元素
console.log(arr)
6.arr.pop() 删除最后一个元素
console.log(arr)
7.splice(删除的起始位置,删除的个数)
arr.splice(3, 1)
8.splice(删除的起始位置,0,要添加的元素)
arr.splice(3, 0, 'jiangjia')
console.log(arr)
console.log(arr.join(' **'))-------’ ‘里面以什么方式连接gouxin **guanyu **jialuo **jiangjia **12 **true
console.log(arr.reverse())-----颠倒数组顺序
console.log(arr.slice(3))------数组截取3指截取的长度
</script>
</body>
31.二维数组
<body> 0 1
<script> 0 1 2 0 1 2
let student = [['jiangjia', 31, 'sing'], ['xuchao', 21, 'dance']]
// console.log(student[1][0])-----1指[],0指xuchao
for (let i in student) {------------二维数组遍历
for (let j in student[i]) {
console.log(student[i][j])
}
}
// student.length 获取数组长度的
</script>
</body>555
作业
九九乘法表 for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span {
display: inline-block;
margin: 15px;
}
</style>
</head>
<body>
<script>
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/>`)
}
</script>
</body>
</html>
九九乘法表 while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
let i = 1;
while (i <= 9) {
let j = 1;
while (j <= i) {
document.write(j+ '*' +i + '=' + j*i + ' ');
j += 1;
}
document.write("<br>")
i += 1;
}
</script>
</body>
</html>