js基础1
注释符和结束符
ctrl+/ 单行注释
alt+shift+a 块注释
注意: 结束符;
可省略
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注释和结束符</title>
</head>
<body>
<script>
/* 单行注释 ctrL+/
多行注释 alt+shift+a */
// JS中结束符;可加可不加
alert('第一句话');
alert('第二句话');
</script>
</body>
</html>
输入输出语法
输出
document.write(’ ‘)
alert(’ ‘)
console.log(’ ')
输入
prompt(’ ')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入输出语法</title>
</head>
<body>
<script>
// 1、文档输出内容
document.write('我是div标签')
document.write('<h1>我是标题</h1>')
// 2、控制台打印输出,给程序员看
console.log('看看对不对')
console.log('日志')
// 3、输入语句
prompt('请输入您的年龄:')
</script>
</body>
</html>
变量-“容器”
变量的基本使用
1、声明变量 : let 变量名
2、变量赋值
<!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、声明一个年龄的变量
// let age
// // 2、赋值,18是字面量
// age=18
// console.log(age)
// let age = 18
// console.log(age)
// 小案例
let num =20
let uname = '张三'
console.log(num)
console.log(uname)
</script>
</body>
</html>
变量的使用更新
let不允许重复声明
输入用户名案例
<!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、用户输入
// prompt('请输入姓名')
// 2、内部处理保存数据
let uname = prompt('请输入姓名')
// 3、打印输出
document.write(uname)
</script>
</body>
</html>
交换两个变量案例
<!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 num1 = 10
let num2 = 20
let temp
temp = num1
num1 = num2
num2 = temp
console.log(num1, num2);
</script>
</body>
</html>
变量的命名规范
注意:
1、数字不能开头
2、只允许出现$和_符号
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>
// let 11=11
let num1$_ =11
//let nav-bar = 11
</script>
</body>
</html>
输入姓名年龄案例
<!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 uname=prompt('请输入您的姓名:')
let age=prompt('请输入您的年龄:')
let gender=prompt('请输入您的性别:')
document.write(uname, age, gender)
</script>
</body>
</html>
var和let的区别
<!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 num
// console.log(num);
// var num = 10
// num=10
// console.log(num)
// var num
// var num=10
// var num=20
// console.log(num)
num=10
console.log(num)
let num
</script>
</body>
</html>
变量拓展-数组
体验数组
<!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 = [10, 20, 30]
// 1、声明数组
let arr = ['刘德华', '张学友', '黎明', '郭富城']
// 2、使用数组 数组名+[索引号] 从0
// console.log(arr)
// console.log(arr[0])
// console.log(arr[2]);
//数组的长度=索引号+1
// 3、数组的长度
console.log(arr.length);
</script>
</body>
</html>
数组取值案例
<!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 = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
console.log(arr[6]);
</script>
</body>
常量-永远不会改变的值
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>
// 1、常量不允许更改值
// const PI=3.14
// console.log(PI)
// PI=3.15
// console.log(PI)
// 2、常量声明的时候必须赋值
// const PI
</script>
</body>
</html>
数据类型
数字类型
基本数据类型:数字类型(Number)、
引用数据类型:object对象
优先级:乘、除、取余 > 加减
<!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 num = 'pink'
// console.log(num)
console.log(1 + 1)
console.log(1 * 1)
console.log(1 / 1)
console.log(4 % 2)
console.log(5 % 3)
console.log(3 % 5)
// java 强数据类型的语言
</script>
</body>
</html>
计算圆的面积案例
<!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、页面弹出输入框
let r = prompt('请输入圆的半径')
// 2、计算圆的面积《内部处理》
let result = 3.14*r*r
// 3、页面输出
document.write(result)
</script>
</body>
</html>
数据类型——NaN
- NaN不是一个数字,代表计算错误。
- NaN是粘性的,任何对NaN的操作都会返回NaN
数据类型-字符串类型(string)
<!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 str = 'pink'
// let str1 = "pink"
// let str2 = `中文`
// console.log(str2)
// console.log(11)
// console.log(`11`)
// console.log(str)
// console.log('str')
// console.log('pink老师讲课非常有"激情"')
// console.log('pink老师讲课非常有\'激情\'')
// 字符串拼接
// console.log(1 + 1)
// console.log('pink'+'老师')
let age = 18
document.write('我今年'+ age + '岁了')
</script>
</body>
</html>
数据类型-模板字符串---->拼接字符串
- 必须使用反引号
``
<!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 = 18
// 模板字符串 外面用`` 里面用${变量名}
document.write(`我今年${age}岁了`)
</script>
</body>
</html>
页面输出用户信息案例
<!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 uname = prompt('请输入您的姓名:')
let age = prompt('请输入您的年龄:')
// 输出
document.write(`大家好,我叫${uname},我今年贵庚${age}岁了`)
</script>
</body>
</html>
数据类型-布尔类型(boolean)
true / false
数据类型-未定义类型(undefinied)
数据类型-null(空类型)
null作为尚未创建的对象
<!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、布尔型自变量
console.log(3 > 4)
let isCool = true
console.log(isCool)
// 2、未定义变量 弱数据类型 声明一个变量未给值
let num
console.log(num)
// 3、null空
let obj = null
console.log(obj)
// 计算有区别
console.log(undefined + 1)
console.log(null + 1);
</script>
</body>
</html>
检测数据类型
typeof x
typeof(x)
<!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 = 10
console.log(typeof num)
let str = 'pink'
console.log(typeof str)
let str1 = '10'
console.log(typeof str1)
let flag = false
console.log(typeof flag)
let un
console.log(typeof(un))
let obj = null
console.log(typeof obj)
</script>
</body>
</html>
数据类型转换
隐式转换
- 加号坐标只要有一个字符串,会自动将另一个转换为字符串
- 减号,乘号,除号看数字
<!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(1 + 1)
console.log('pink'+1)
console.log(2 +2)//0
console.log(2 + '2')//22
console.log(2 - 2)
console.log(2 - '2')
console.log(+12)
console.log(+'123') //转换为数字型
</script>
</body>
</html>
显示转换
- Number(数据)
- parseInt (数据)—只保留整数
- parseFloat (数据)—只保留小数
<!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>
.box{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<script>
let str = '123'
console.log(Number(str))
console.log(Number('pink'))
// let num = Number(prompt('输入年薪'))
// let num = +(prompt('输入年薪'))
// console.log(Number(num))
// console.log(num)
console.log(parseInt('12px'))
console.log(parseInt('12.34px'))
console.log(parseInt('abc12.94px'))
console.log(parseFloat('12px'))
console.log(parseFloat('12.34px'))
console.log(parseFloat('abc12.94px'))
</script>
</body>
</html>
计算两个数的和案例
<!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、用户输入 prompt得到的是字符串型
let num1 = +prompt('请输入第一个数:')
let num2 = +prompt('请输入第二个数:')
// 2、输出
alert(`两个数相加的和是:${num1+num2}`)
</script>
</body>
</html>
综合案例-用户订单信息
<!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>
// 1、用户输入
let price = +prompt('请输入商品价格:')
let num = +prompt('请输入商品数量:')
let address = prompt('请输入收货地址:')
// 2、计算总价
let total = price*num
// 3、页面打印渲染
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米手机青春PLUS</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>
js基础2
运算符
赋值运算符:将右边赋给左边
<!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 = 1
// num = num + 1
num += 3
console.log(num)
</script>
</body>
</html>
一元运算符
如正负
自增:++ 让变量值+1
自减:-- 让变量值-1
前置自增++i(先自加再使用)
后置自增I++(先使用再自加),使用的多
单独使用没有区别
<!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 = 10
// num = num + 1
// num += 1
// 1、前置自增
let i = 1
// console.log(++i + 1)
console.log(i++ + 1)
// i++
// console.log(i)
</script>
</body>
</html>
比较运算符
- === 左右两边值是否类型和值都相等(开发中强烈建议使用)
- NaN不等于任何值,包括它本身
- 不同类型之间比较会发生隐式转换
<!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(2 == '2')//比较运算符会发生隐式转换
console.log(2 === '2')
console.log(undefined === null)
console.log(NaN === NaN)
console.log(2 !== '2')
console.log('a' < 'b')
console.log('aa' < 'ab')
console.log('aa' < 'aac')
</script>
</body>
</html>
逻辑运算符
<!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(true && true)
console.log(false && true)
console.log(3<5 && 3 > 2)
console.log(3<5 && 3 < 2)
console.log('----------')
// 逻辑或 一真则真
console.log(true || true)
console.log(false || true)
console.log(false || false)
console.log('----------')
// 逻辑非
console.log(!true)
console.log(!false)
console.log('----------')
let num = 2
console.log(num > 5 && num < 10)
</script>
</body>
</html>
逻辑运算符案例
<!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、用户输入
let num = +prompt('请输入一个数字:')
// 2、弹出结果
alert(num % 4 === 0 && num % 100 !== 0)
</script>
</body>
</html>
运算符优先级
小括号 > 一元运算符(++ – !)> 算数运算符(先乘除取余后加减)> 关系运算符(> >= < <=)> 相等运算符(== != === !==)> 逻辑运算符(先与后或)> 赋值运算符 > 逗号运算符
语句
表达式和语句
表达式可以求值,所以写在赋值语句的右侧
语句不一定有值,是一段可以执行的代码
分支语句
有选择性的执行想要的代码
if分支语句
单分支语句
<!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>
// 单分支语句
// if (true) {
// console.log('执行语句')
// }
// if (false) {
// console.log('执行语句')
// }
// 除了0 所有的数字都为真
// if (2) {
// console.log('执行语句')
// }
// if ('pink老师') {
// console.log('执行语句')
// }
// 空字符串当假
// if ('') {
// console.log('执行语句')
// }
// 1、用户输入
let score = +prompt('请输入成绩:')
// 2、进行判断输出
if (score >= 700) {
alert('恭喜考入黑马程序员')
}
</script>
</body>
</html>
双分支语句
<!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、用户输入
let uname = prompt('请输入用户名:')
let pwd = prompt('请输入密码:')
// 2、判断输出
if (uname === 'pink' && pwd === '123456') {
alert('登录成功')
}else{
alert('用户名或者密码错误')
}
</script>
</body>
</html>
闰年案例
<!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、用户输入
let year = prompt('请输入年份:')
// 2、判断输出
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
alert(`${year}是闰年`)
}else{
alert(`${year}是平年`)
}
</script>
</body>
</html>
多分支语句
<!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、用户输入
let score = +prompt('请输入成绩:')
// 2、判断输出
if (score >= 90) {
alert('成绩优秀')
}else if (score >= 70){
alert('成绩良好')
}else if(score >= 60){
alert('成绩及格')
}else{
alert('成绩不及格')
}
</script>
</body>
</html>
三元操作符
条件?满足条件执行的代码:不满足条件执行的代码
<!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(3 > 5 ? 3 : 5)
// if (3 < 5) {
// alert('真的')
// }else{
// alert('假的')
// }
// 3 < 5 ? alert('真的') : alert('假的')
let sum = 3 < 5 ? 3 : 5
console.log(sum)
</script>
</body>
</html>
取最大值案例
<!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、用户输入
let num1 = +prompt('请您输入第一个数:')
let num2 = +prompt('请您输入第二个数:')
// 2、判断输出
// if (num1 > num2) {
// alert(num1)
// }else{
// alert(num2)
// }
num1 > num2 ? alert(`最大值是:${num1}`) : alert(`最大值是:${num2}`)
</script>
</body>
</html>
数字补0案例
<!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、用户输入
let num = prompt('请您输入一个数字:')
// 2、判断输出 - 小于10才补0
num = num < 10 ? 0 + num : num
alert(num)
</script>
</body>
</html>
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>
switch(4){
case 1:
console.log('您选择的是1')
break //推出switch
case 2:
console.log('您选择的是2')
break //推出switch
case 3:
console.log('您选择的是3')
break //推出switch
default:
console.log('没有符合条件的');
}
</script>
</body>
</html>
简单计算器案例
<!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个数字+1个操作符号
let num1 = +prompt('请你输入第一个数字:')
let num2 = +prompt('请你输入第二个数字:')
let sp = prompt('请你输入 + - * / 其中的一个:')
// 2、判断输出
switch(sp){
case '+':
alert(`两个数的加法操作是${num1 + num2}`)
break
case '-':
alert(`两个数的加法操作是${num1 - num2}`)
break
case '*':
alert(`两个数的加法操作是${num1 * num2}`)
break
case '/':
alert(`两个数的加法操作是${num1 / num2}`)
break
default:
alert('请输入加减乘除:')
}
</script>
</body>
</html>
循环语句
断点提示
while循环
while循环就是在满足条件期间,重新执行某些代码
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>
// // 1、变量的起始值
// let i = 1
// // 2、终止条件
// while(i <= 3 ){
// document.write('我要循环3次 <br>')
// i++
// }
// // 3、变量的变化量
// 1、变量的起始值
let end = +prompt('请输入次数:')
let i = 1
// 2、终止条件
while(i <= end ){
document.write('我要循环3次 <br>')
i++
}
// 3、变量的变化量
</script>
</body>
</html>
循环打印案例
<!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、页面输出1-100
// let i = 1
// while(i <= 100){
// document.write(`这是第${i}个数<br>`)
// i++
// }
// 2、页面输出1-100的总和并输出
// let i = 1
// let sum = 0
// while(i <= 100){
// sum += i
// i++
// }
// console.log(sum)
// 3、页面输出1-100的累加偶数和
let i = 1
let sum = 0
while(i <= 100 ){
if(i % 2 === 0){
sum += i
}
i++
}
console.log(sum)
</script>
</body>
</html>
循环推出
continue和break的区别
break: 退出循环
continue: 当前时段退出本次循环、进行下一次循环
<!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 i = 1
// while(i <= 5){
// if(i === 3){
// break
// }
// console.log(`我要吃第${i}个包子`)
// i++
// }
let i = 1
while(i <= 5){
if(i === 3){
i++
continue
}
console.log(`我要吃第${i}个包子`)
i++
}
</script>
</body>
</html>
综合案例-简易ATM取款机案例
<!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、开始循环 输入框写到 循环里面
// 3、准备总金额
let money = 100
while(true){
let re = +prompt(`请您选择操作:
1.存钱
2.取钱
3.查看余额
4.退出
`)
// 2、如果用户输入的是4 则退出循环
if (re === 4) {
break
}
// 4、根据输入做操作
switch (re) {
case 1:
// 存钱
let cun = +prompt('请输入存款金额:')
money += cun
break;
case 2:
// 取款
let qu = +prompt('请输入取款金额:')
money -= qu
break
case 3:
// 查看金额
alert(`您的银行余额为${money}`)
break
default:
break;
}
}
</script>
</body>
</html>
js基础3
for 循环 用来遍历
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 <= 3; i++) {
document.write('月薪过万<br>')
}
</script>
</body>
</html>
<!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 = 0; i <= 100; i++) {
// document.write(`今年我${i}岁了<br>`)
// }
// let sum = 0
// for (let i = 0; i <= 100; i++) {
// if (i % 2 === 0) {
// sum += i
// }
// }
// document.write(sum)
// for (let i = 1; i <= 5; i++) {
// document.write('*')
// }
// 4、打印数组
let arr = ['刘德华', '刘小强', '刘晓庆', '刘若英', '刘热巴', 'pink老师']
// for (let i = 0; i <= arr.length - 1; i++) {
// console.log(arr[i])
// }
// 必须从0开始 因为数组的索引号从0开始
for(i = 0;i < arr.length;i++){
console.log(arr[i])
}
</script>
</body>
</html>
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 <= 5; i++) {
// if (i === 3) {
// continue//不再执行本次循环后面的语句
// }
// console.log(i)
// document.write(i)
// }
for (let i = 1; i <= 5; i++) {
if (i === 3) {
break//退出整个循环,结束循环
}
console.log(i)
document.write(i)
}
</script>
</body>
</html>
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>
// 外层循环打印第n天
for (let i = 1; i <= 3; i++){
document.write(`第${i}天<br>`)
// 里层循环打印第n个单词
for (let j = 1; j <= 5; j++){
document.write(`记住了第${j}个单词<br>`)
}
}
</script>
</body>
</html>
打印星星案例
<!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(i = 1; i <= 5; i++){
// // 里层循环打印几个星星
// for (let j = 1; j <= 5; j++) {
// document.write('$')
// }
// // 进行换行显示
// document.write('<br>')
// }
let row = +prompt('请输入行数:')
let col = +prompt('请输入列数:')
// 外层循环打印行数
for(i = 1; i <= row; i++){
// 里层循环打印几个星星
for (let j = 1; j <= col; j++) {
document.write('$')
}
// 进行换行显示
document.write('<br>')
}
</script>
</body>
</html>
<!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. 外层循环打印行数
for(let i = 1; i <= 5; i++){
// 2. 里层循环打印列数
for (let j = 1; j <= i; j++) {
document.write('&')
}
// 换行
document.write('<br>')
}
</script>
</body>
</html>
九九乘法表
<!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;
width: 100px;
padding: 5px 10px;
border: 1px solid #000;
margin: 2px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgb(255, 192, 203, .4);
background-color: rgb(255, 192, 203, .1);
text-align: center;
color: hotpink;
}
</style>
</head>
<body>
<script>
// 1. 外层循环打印行数
for(let i = 1; i <= 9; i++){
// 2. 里层循环打印列数
for (let j = 1; j <= i; j++) {
document.write(`<span>${j} X ${i} = ${i*j}</span>`)
}
// 换行
document.write('<br>')
}
</script>
</body>
</html>
数组
数组是一种数据类型
- 声明数组
- 获取数据
数组求和及平均值
<!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 = [2, 6, 1, 7, 4]
// 1. 求和的变量 sum
let sum = 0
// 2. 遍历累加
for(let i = 0; i < arr.length; i++){
// console.log(arr[i])
sum += arr[i]
}
console.log(`数组的和的结果是${sum}`)
// 3. 平均值 和/arr.length = 4
console.log(`数组的平均值是: ${sum / arr.length}`)
</script>
</body>
</html>
求数组最大值和最小值
<!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 = [2, 6, 1, 7, 400, 55, 88, 100]
let max = arr[0]
let min = arr[0]
// 遍历数组
for(let i = 1; i < arr.length; i++){
if(max < arr[i]){
max = arr[i]
}
if(min > arr[i]){
min = arr[i]
}
}
// 输出max
console.log(max)
console.log(min)
</script>
</body>
</html>
操作数组
操作数组-修改
<
!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 = []
// console.log(arr)
// // console.log(arr[0])
// arr[0] = 1
// arr[1] = 5
// console.log(arr)
let arr = ['pink', 'red', 'green']
// 修改
// arr[0] = 'hotpink'
// 给所有数组元素后面加老师
for (let i = 0; i < arr.length; i++) {
// console.log(arr[i])
arr[i] = arr[i] + '老师'
}
console.log(arr)
</script>
</body>
</html>
数组操作-新增
数组.push:往后面添加元素,并返回该数组的新长度
数组.unshift:往前面添加元素,并返回该数组的新长度
<!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 = ['pink', 'hotpink']
// 新增 push 推
// arr.push('deepink', 'lightpink')
// console.log(arr)
arr.unshift('red')
console.log(arr)
</script>
</body>
</html>
数组筛选案例
<!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 = [2,0,6,77,9,54,3,78,7]
// 1、声明新数组
let newArr = []
// 2、遍历旧数组
for (let i = 0; i < arr.length; i++) {
if(arr[i] >= 10){
// 3、满足条件的追加给新数组
newArr.push(arr[i])
}
}
// 4、输出一个新的数组
console.log(newArr)
</script>
</body>
</html>
数组去0案例
<!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 = [2,0,6,1,77,0,52,0,25,7]
let newArr = []
for(i = 0; i < arr.length; i++){
if(arr[i] !== 0){
newArr.push(arr[i])
}
}
console.log(newArr)
</script>
</body>
</html>
数组操作-删除
数组.pop:从数组中删除最后元素,并返回该元素的值
数组.shift:删除第一个元素,并返回该元素的值
数组.splice:可以删除指定元素
arr.splice(起始位置,删除几个元素)
<!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 = ['red', 'green', 'blue']
// 1、删除最后一个
// console.log(arr.pop()) //blue
// arr.pop()
// arr.pop()
// console.log(arr)
// 2、删除第一个元素
// arr.shift()
// console.log(arr)
// 3、splice() 删除指定元素
// arr.splice(1)从green 删除到最后
arr.splice(1, 1) //从索引号为1的位置开始删,删除一个元素
console.log(arr)
</script>
</body>
</html>
综合案例-根据数据生成柱形图
<!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>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 700px;
height: 300px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
margin: 50px auto;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box>div {
display: flex;
width: 50px;
background-color: pink;
flex-direction: column;
justify-content: space-between;
}
.box div span {
margin-top: -20px;
}
.box div h4 {
margin-bottom: -35px;
width: 70px;
margin-left: -10px;
}
</style>
</head>
<body>
<script>
// 1、四次弹框效果
// 声明一个新的数组
let arr = []
for (let i = 1; i <= 4; i++){
// let num = prompt(`请输入第${i}季度的数据:`)
// arr.push(num)
arr.push(prompt(`请输入第${i}季度的数据:`))
}
// console.log(arr)
// 盒子开头
document.write(`<div class="box">`)
// 盒子中间 利用循环的形式 跟数组有关系
for(i = 0; i < arr.length; i++){
document.write(`
<div style="height: ${arr[i]}px;">
<span>${arr[i]}</span>
<h4>第${i + 1}季度</h4>
</div>
`)
}
// 盒子结尾
document.write(`</div>`)
</script>
</body>
</html>
js基础4
函数-执行特定任务的代码块
函数的使用-实现了代码复用
function(){
}
- 函数的声明
- 命名规范
小驼峰、前缀尽量为动词、常用动词约定 - 函数的调用语法
<!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、求两个数的和
// function getSum(){
// let num1 = +prompt('请输入第一个数:')
// let num2 = +prompt('请输入第二个数:')
// console.log(num1 + num2)
// }
// getSum()
// 2、求1~100累加和
function getSum(){
let sum = 0
for (let i = 1; i <= 100; i++) {
sum += i
}
console.log(sum)
}
getSum()
</script>
</body>
</html>
函数传参-提高了函数的灵活性
function(参数列表){
}
<!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>
// 函数求和
// 设置默认值,有参执行传递过来的参数,无参执行默认值
function getSum(num1 = 0, num2 = 0) {
// num1 默认的值 undefined
document.write(num1 + num2)
}
getSum(1, 2) //3
getSum() //0
// function getSum(start, end){
// // 形参
// // console.log(end)
// let sum = 0
// for (let i = start; i <= end; i++) {
// sum += i
// }
// console.log(sum)
// }
// getSum(1, 50)//实参 -实际的参数
// getSum(100, 200)
</script>
</body>
</html>
函数封装数组求和案例
<!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. 封装函数
// 给一个参数的默认值
function getArrSum(arr = []){
// console.log(arr)
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
console.log(sum);
}
getArrSum([11, 22, 33])
getArrSum()
</script>
</body>
</html>
实参可以是变量
<!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>
// 求n到m的累加和
function getSum(n = 0, m = 0){
let sum = 0
for(i = n; i <= m; i++){
sum += i
}
console.log(sum)
}
// getSum()
// getSum(1, 2)
let n = +prompt('请输入起始值:')
let m = +prompt('请输入结束值:')
getSum(n, m)//实参可以是变量
</script>
</body>
</html>
函数的返回值-把处理结果返回给调用者,也可以让其他程序使用这个结果
- 可以将函数内部的值交给外面使用
- return后面的代码不会被执行
- return不要换行
- return函数可以没有return,结果是undefinied
<!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>
// function fn(){
// return 20
// }
// // console.log(fn())
// let re = fn()
// console.log(re)
// 函数求和
function getTotalPrice(x, y){
return x + y
}
let sum = getTotalPrice(1, 2)
console.log(sum)
console.log(sum)
</script>
</body>
</html>
求数组最大值和最小值
<!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. 求函数的最大值
// function getMax(x, y){
// return x > y ? x : y
// }
// let max = getMax(11, 223)
// console.log(max)
// 2. 求任意数组的最大值, 并且返回
// function getArrValue(arr){
// // (1)先准备一个max变量存放数组的第一个值
// let max = arr[0]
// // (2)遍历比较
// for(let i = 1; i < arr.length; i++){
// if(max < arr[i]){
// max = arr[i]
// }
// }
// // (3)返回值
// return max
// }
// let max = getArrValue([11, 3, 55, 7, 9])
// console.log(max)
// 3. 求任意数组的最大值和最小值,并且返回值
function getArrValue(arr){
// (1)先准备一个max变量存放数组的第一个值
let max = arr[0]
let min = arr[0]
// (2)遍历比较
for(let i = 1; i < arr.length; i++){
if(max < arr[i]){
max = arr[i]
}
if(min > arr[i]){
min = arr[i]
}
}
// (3)返回值
return [max, min]
}
let newArr = getArrValue([11, 3, 55, 7, 9])
console.log(`数组的最大值是:${newArr[0]}`)
console.log(`数组的最小值是:${newArr[1]}`)
</script>
</body>
</html>
<!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>
// function getSum(x, y){
// return x + y
// }
// let result = getSum(1, 2)
// console.log(result)
// 1. 两个相同的函数后面会覆盖前面的
function fn(){
console.log(1)
}
function fn(){
console.log(2)
}
fn()
// 2. 参数不匹配
function fn(a, b){
console.log(a + b)
}
// (1)实参多余形参 剩余的实参不参与运算
fn(1, 2, 3)
// (2)实参少余形参
fn(1) //1 + undefinied = NaN
</script>
</body>
</html>
进行函数内部执行F11
作用域-提高了逻辑的局部性,增强了程序的可靠性,减少了名字冲突
全局作用域
局部作用域
<!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 = 10 //1. 全局变量
console.log(num)
function fn() {
console.log(num)
}
fn()
// 2. 局部变量
function fun(){
let str = 'pink'
}
console.log(str) //错误
</script>
</body>
</html>
特殊情况:
<!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 = 20
// function fn(){
// num = 10 //全局变量来看 强烈不允许
// }
// fn()
// console.log(num)
// function fun(x, y) {
// //形参可以看作是函数的局部变量
// console.log(x)
// }
// fun(1, 2)
// console.log(x) //错误
// let num = 10
function fn(){
// let num = 20
function fun() {
// let num = 30
console.log(num)
}
fun()
}
fn()
</script>
</body>
</html>
变量的访问原则:采取就近原则
匿名函数
- 具名函数
- 匿名函数
没有名字的函数,无法直接使用
使用方式:
1、函数表达式
2、立即执行函数
<!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、函数表达式
fn(1, 2) //错误
let fn = function (x, y) {
// console.log('我是函数表达式')
console.log(x + y)
}
fn(1, 2)
// 函数表达式和具名函数的不同 function() {}
// 1、具名函数的调用可以写到任何位置
//2、函数表达式,必须先声明表达式,后调用
function fun() {
console.log(1)
}
fun()
</script>
</body>
</html>
立即执行函数
场景:避免全局变量的污染
注意:不同立即执行函数必须用**分号;**分隔
<!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 = 10
// let num = 20
// (function(){
// console.log(11)
// })()
// (function(){
// let num = 10
// })();
// (function(){
// let num = 20
// })()
// 1. 第一种写法
(function (x, y) {
console.log(x + y)
})(1, 2);
// 2. 第二种写法
(function(x, y){
console.log(x + y);
}(1, 3));
// (function(){})();
// (function(){}());
</script>
</body>
</html>
综合案例-转换时分秒
<!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、用户输入
let second = +prompt('请输入秒数:')
// 2、封装函数
function getTime(t) {
console.log(t)//总秒数
// 3、转换
// 小时:h = parseInt(总秒数 / 60 / 60 % 24)
// 分钟:m = parseInt(总秒数 / 60 % 60)
// 秒数:s = parseInt(总秒数 % 60)
let h = parseInt(t / 60 / 60 % 24)
let m = parseInt(t / 60 % 60)
let s = parseInt(t % 60)
// 补0
h = h < 10 ? '0' + h: h
m = m < 10 ? '0' + m: m
s = s < 10 ? '0' + s: s
// console.log(h, m, s)
return `转换完毕之后是${h}小时${m}分${s}秒`
}
let str = getTime(second)
document.write(str)
</script>
</body>
</html>
逻辑中断
短路
只存在于&& 和||中,当满足一定条件会让右边代码不执行
<!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>
function fn(x, y){
x = x || 0
y = y || 0
console.log(x + y)
}
fn(1, 2)
// fn()
// console.log(false && 3 + 5)
// let age =18
// console.log(false && age++) //age++不执行 一假必假
// console.log(age)
// console.log(11 && 22) //都是真,则返回最后一个真值
// console.log(11 || 22) //输出第一个真值
</script>
</body>
</html>
转换为Boolean型
显示转换:
1.Boolean(内容)
’ '、0、undefinied、null、false、NaN转换为布尔值后都是false,其余则为true
隐式转换:
1、有字符串的加法" " + 1,结果是1
2、减法 - (像大多数数学运算一样)只能用于数字,会使空字符串" "转换为0
3、null经过数字转换之后会变为0
4、undefinied经过数字转换之后会变为NaN
null == NaN (正确)
js基础5
对象object(一种数据类型)-无序的数据集合
认识对象
let 对象名 = { },{ }是对象字面量
对象由属性和方法组成
<!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、声明对象
let pink = {
uname: 'pink老师',
age: 18,
gender: '女'
}
console.log(pink)
console.log(typeof pink)
</script>
</body>
</html>
对象的使用
增 删 改 查
属性-查:
对象.属性
属性-改:
对象名.属性 = 新值
属性-增:
没有就是新增,有就是改
对象名.属性 = 新值
属性-删:
delete 对象名.属性
<!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 pink = {
// uname: 'pink老师',
// age: 18,
// gender: '女'
// }
// // 把性别的女改为男
// pink.gender = '男'
// console.log(pink)
// pink.hobby = '足球'
// console.log(pink)
// delete pink.age
// console.log(pink)
// 1、声明
// console.log(window.name)
let goods = {
'goods-name': '小米10青春版',
num: 100012816024,
weight: '0.55kg',
address: '中国大陆'
}
// console.log(address)
// 2、使用属性 查 对象名.属性名
// console.log(goods.address)
// console.log(goods.name)
// 修改
goods.name = '小米10PLUS'
goods.color = '粉色'
console.log(goods)
// console.log(goods.goods - name)
// 查的另外一种属性
// 对象名['属性名']
console.log(goods['goods-name']);
// console.log(goods.name)
console.log(goods.num)
console.log(goods.weight)
console.log(goods.address)
console.log(goods.color)
// 查 总结
// 1、对象名.属性名 obj.age
// 2、对象名['属性名'] obj['age']
</script>
</body>
</html>
对象中的方法
<!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 obj = {
uname: '刘德华',
//方法
song:function(x, y){
// console.log('冰雨')
console.log(x + y)
},
dance:function(){
console.log('王一博跳舞');
}
}
// 方法调用 对象名.方法名
obj.song(1, 2)
obj.dance()
</script>
</body>
</html>
遍历对象
遍历对象,获得对象值 obj[k]
<!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 in 不推荐遍历数组
// let arr = ['pink', 'red', 'blue']
// for(let k in arr){
// console.log(k) //数组的下标 索引号 但是是字符串型 '0'
// console.log(arr[k])
// }
// 1、遍历对象 for in
let obj = {
uname: 'pink老师',
age: 18,
gender: '男'
}
// 2、遍历对象
for(let k in obj){
console.log(k) //属性名 'uname'
// console.log(obj.name)
// console.log(obj.k)
// console.log(obj.'uname')
// console.log(obj['uname']) 'uname' === k
console.log(obj[k]) //输出属性值 obj[k]
}
</script>
</body>
</html>
遍历数组对象
<!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 students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '河南省'},
{name: '小刚', age: 17, gender: '男', hometown: '山西省'},
{name: '小丽', age: 18, gender: '女', hometown: '山东省'}
]
for(i = 0; i < students.length; i++){
// console.log(i) //下标索引号
// console.log(students[i]) //每个对象
console.log(students[i].name)
console.log(students[i].hometown)
}
</script>
</body>
</html>
渲染学生信息表
<!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>
table {
width: 600px;
text-align: center;
}
table,
th,
td {
border: 1px solid #ccc;
border-collapse: collapse;
}
caption {
font-size: 18px;
margin-bottom: 10px;
font-weight: 700;
}
tr {
height: 40px;
cursor: pointer;
}
table tr:nth-child(1) {
background-color: #ddd;
}
table tr:not(:first-child):hover {
background-color: #eee;
}
</style>
</head>
<body>
<h2>学生信息</h2>
<p>将数据渲染到页面中...</p>
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
<!-- script写到这里· -->
<script>
// 1、数据准备
let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '河南省'},
{name: '小刚', age: 17, gender: '男', hometown: '山西省'},
{name: '小丽', age: 18, gender: '女', hometown: '山东省'},
{name: '欢欢', age: 24, gender: '女', hometown: '陕西省'}
]
// 2、渲染页面
for(let i = 0; i < students.length; i++){
document.write(`
<tr>
<td>${i + 1}</td>
<td>${students[i].name}</td>
<td>${students[i].age}</td>
<td>${students[i].gender}</td>
<td>${students[i].hometown}</td>
</tr>
`)
}
</script>
</table>
</body>
</html>
内置对象
内置对象-Math
提供了一系列数学运算的方法
内置对象-生成任意范围随机数
取值在[0,1)之间的一个随机小数
生成N~M之间的随机数
Math.floor(Math.random() * (M - N + 1)) + N
随机点名案例
<!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、得到一个随机数,作为数组的索引号,这个随机数是0~6
let random = Math.floor(Math.random() * arr.length)
// 2、页面输出数组里面的元素
document.write(arr[random])
// 3、splice(起始位置(下标),删除几个元素)
arr.splice(random, 1)
console.log(arr)
</script>
</body>
</html>
猜数字游戏
<!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、随机生成一个数字 1~10
function getRandom(N, M){
return Math.floor(Math.random() * (M - N + 1)) + N
}
let random = getRandom(1,10)
// 2、设定三次 三次没猜对就直接退出
let flag = true
for(let i = 1; i <= 3; i++){
let num = +prompt('请您输入1~10之间的一个数字:')
if(num > random){
alert('您猜大了')
}else if(num < random){
alert('您猜小了')
}else{
flag = false
alert('您猜对了,真厉害')
break
}
}
//写到for的外面来
if(flag){
alert('次数已经用完')
}
</script>
</body>
</html>
生成随机颜色
<!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>
div {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div></div>
<script>
// 1、自定义一个随机颜色函数
function getRandomColor(flag = true){
if(flag){
// 3、如果是true 则返回#ffffff
let str = '#'
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
// 利用for循环,累加到str里面
for(let i =1; i <= 6; i++){
// 每次从数组里面随机抽取一个
// random 是数组的随机索引和
let random = Math.floor(Math.random() * arr.length)
str = str + arr[random]
}
return str
}else{
// 4、否则是false 则返回rgb(255,255,255)
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})`
}
}
// 2、调用函数 getRandomColor(布尔值)
console.log(getRandomColor(false))
console.log(getRandomColor(true))
console.log(getRandomColor())
const div = document.querySelector('div')
div.style.backgroundColor = getRandomColor()
</script>
</body>
</html>
##-综合案例-渲染学成在线页面
<!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>学车在线首页</title>
<link rel="stylesheet" href="./css/style.css">
<style>
</style>
</head>
<body>
<!-- 4. box核心内容区域开始 -->
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">
<script>
let data = [
{
src: 'images/course01.png',
title: 'Think PHP 5.0 博客系统实战项目演练',
num: 1125
},
{
src: 'images/course02.png',
title: 'Android 网络动态图片加载实战',
num: 357
},
{
src: 'images/course03.png',
title: 'Angular2 大前端商城实战项目演练',
num: 22250
},
{
src: 'images/course04.png',
title: 'Android APP 实战项目演练',
num: 389
},
{
src: 'images/course05.png',
title: 'UGUI 源码深度分析案例',
num: 124
},
{
src: 'images/course06.png',
title: 'Kami2首页界面切换效果实战演练',
num: 432
},
{
src: 'images/course07.png',
title: 'UNITY 从入门到精通实战案例',
num: 888
},
{
src: 'images/course08.png',
title: 'Cocos 深度学习你不会错过的实战',
num: 590
},
{
src: 'images/course08.png',
title: '自动添加的模块',
num: 1000
},
]
for(let i = 0; i < data.length; i++){
document.write(`
<li>
<a href="#">
<img src=${data[i].src} title = "${data[i].title}">
<h4>
${data[i].title}
</h4>
<div class="info">
<span>高级</span> • <span>${data[i].num}</span>人在学习
</div>
</a>
</li>
`)
}
</script>
</ul>
</div>
</div>
</body>
</html>
拓展-基础数据类型和引用数据类型
- 值类型:简单数据类型/基本数据类型,如string, number, boolean, undefinied, null
- 引用类型:复杂数据类型,存储的仅仅是地址(引用),如Object, Array, Date等
简单数据类型存到栈里面,引用类型存到堆里面
<!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 num1 = 10
let num2 = num1
num2 = 20
console.log(num1) //结果是10
let obj1 = {
age: 18
}
let obj2 = obj1
//修改属性
obj2.age = 20
console.log(obj1.age)
</script>
</body>
</html>