第一天相关知识
js有三种书写方式 :
1.内部样式
2.外部样式
3.行内样式
js的相关输出语法 :
1.在页面上输出内容,在页面可以输出标签 document.write()
2.在浏览器弹窗 alert()
3.在控制台打印 console.log()
4.弹窗使用户输入内容 prompt()
变量相关
1.使用变量需要先定义一个变量
然后给它赋值 就可以将这个变量输出
let age
age = 18
let height = 170
console.log(height,age)
控制台输出多个数据 , 中间用逗号隔开
2.变量的交互
我们可以准备一个临时变量 利用这个临时变量达到交互的目的
let jj = '不死战神道友明'
let xhz = '忠肝义胆多隆'
// 准备一个临时变量
let temp = jj
// console.log(temp)
// 把xhz的数据赋值给jj
jj = xhz
// console.log(jj)
// 把temp的数据赋值给xhz
xhz = temp
console.log(jj,xhz)
3.字符串相关
只要是'' "" `` 包裹起来的内容都是字符串
字符串拼接 +
加号两边只要有一个字符串,加号就是拼接符
加号两边都是数字类型是加运算
console.log('我叫' + '吴彦祖') //我叫吴彦祖
console.log(12 + 3) //15
console.log('我今年' + 23) //我今年23
console.log('12' + 23) //1223
拓展 (检测数据类型) :
<script>
console.log(typeof 12)//number 数字类型
console.log(typeof '行侠')//string 字符串类型
console.log(typeof true)//boolean 布尔类型
let a
console.log(typeof a)//undefined 未定义类型
let age = prompt('请输入您的年龄')
console.log(typeof age)//string 字符串类型
console.log(`五年以后俺${age + 5}岁了`)//xx5岁了
</script>
拓展 (隐式转换) :
- * / %都会把两边转换为数字类型进行运算
+数据 转为数字类型
console.log(typeof+"2") //number
let age = prompt('请输入您的年龄')
console.log(typeof age)
console.log(+age+5)
第二天相关知识
if分支语句
1.单分支语句
if(条件) {
条件为true执行的代码
条件为false不执行
}
'' 0 undefined null NaN 转布尔类型1为false 其他全部转为true
if (条件) 如果条件不是布尔类型 会隐式转换为布尔类型
2.双分支语句
if(条件) {
条件为true执行该处代码
} else {
条件为false执行该处代码
}
<script>
// 用户输入 用户名:pink 密码:123456 则提示登陆成功 否则提示登陆失败
// 1.用户
let user = prompt('请输入用户名')
let pwd = prompt('请输入密码')
// 2.分支语句
if (user === 'pink' && pwd === '123456') {
alert('登陆成功')
} else {
alert('登陆失败')
}
</script>
我们可以拓展一个小案例来加深印象 :
<script>
// 找真 找到条件为true得 执行代码 后面的不执行
// if(条件1) {
// 条件1为true,执行该处代码,后面的代码不执行
// } else if (条件2) {
// 条件2为true,执行该处代码,后面的代码不执行
// } else if (条件3) {
// 条件3为true,执行该处代码,后面的代码不执行
// } else {
// 如果以上条件都为false,执行该处代码
// }
// 1.输入成绩
let score = + prompt('请输入成绩')
// 2.分支语句 多个分支 最终只会执行一个分支
if (score > 90) {
alert('非常牛逼')
} else if (score > 70) {
alert('有点牛逼')
} else if (score > 60) {
alert('一般牛逼')
} else {
alert('不太牛逼')
}
</script>
switch选择语句
<script>
// 根据输入的年龄 弹框用户喜欢的内容
let love = prompt('请输入您的年龄')
switch (like) {
case '10':
alert('钱')
break //阻断代码向下执行
case '20':
alert('钱钱')
break //阻断代码向下执行
case '30':
alert('钱钱钱')
break //阻断代码向下执行
case '40':
alert('钱钱钱钱')
break //阻断代码向下执行
// 如果前面的数据和case得值都不全等 则执行default
default:
alert('钱钱钱钱钱')
}
</script>
while循环
我们需要先设置一个变量的起始值 : let i = 1
然后需要终止条件 : i <= 3
while (i <= 3) {
// 每循环一次 就去再看条件 条件为true 继续循环 条件为false 循环结束
alert(`我是第${i}次循环`)
// 变量的变化值
i++
}
拓展 (continue和break退出循环)
continue 跳过本次循环 下次循环继续 continue 下面的代码不执行
break 结束当前循环 break下面的代码不执行
第三天相关知识
for循环相关知识点
1. for(循环开始值;循环条件;计数器) {
循环体
}
循环次数已知的 用for循环方便 循环未知的 用while方便
打印一个五行五列的小星星可以这么写
<script>
// 打印五行 每一行五颗星星
// 一行五颗星星
// 外层循环控制的是行数
for (let j = 1; j <= 5; j++) {
// 里层循环控制的是每一行星星的个数
for (let i = 1; i <= 5; i++) {
document.write('★')
}
// 每行换行
document.write('<br>')
}
</script>
数组相关
1.数组求和
我们可以准备一个空的数组 用来保存累加和的结果 然后遍历数组
for (let i = 0; i < arr.length; i++) {
sum = sum + arr[i]
}
将每次加的结果存到sum里面
arr.length 数组的长度 数组里面元素的个数
将数组的总和与数组的长度相除 我们就可以得到数组的平均值
2.求数组的最大值与最小值
<script>
let arr = [2, 6, 1, 7, 400, 55, 88, 100]
// 假设max(数组里面的第一个元素)是最大值
let max = arr[0]
// 假设min(数组里面的第一个元素)是最小值
let min = arr[0]
for (let i = 1; i < arr.length; i++) {
// 如果后面的元素比max打 则把后面的元素存到max里面去
// if (arr[i] > max) {
// max = arr[i]
// }
// if (arr[i] > max) max = arr[i]
arr[i] > max ? max = arr[i] : max
arr[i] < min ? min = arr[i] : min
}
alert(`最大值是${max},最小值是${min}`)
</script>
3.数组的 增,删,改,查
增 : arr.push() 向数组最后面增加新的元素
数组名 .unshift()像数组最前面增加新的元素
删 : 数组名.pop() 删除数组里面的最后一个元素
数组名.shift() 删除数组里面第一个元素
数组名(下标值,删除的个数)
例 : arr.splice(1,3)
数组名.splice(数字) 只写一个值 从当前索引开始 后面的全删除
改 : 数组名[下标] = 值
查 : 查询(访问)数组元素 数组名[下标]
4.数组筛选例子
<script>
// 重点案例
let arr = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]
// 定义新数组 用来存放大于10的元素
let newArr = []
// 遍历旧数组
for (let i = 0; i < arr.length; i++) {
// 大于等于10的元素筛选出来
if (arr[i] >= 10) {
// 大于等于10的老数组的元素追加到新数组里面去
newArr.push(arr[i])
}
}
console.log(newArr)
</script>
结合第三天相关知识点 我们可以完成一个用户输入案例
<!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>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
ul {
display: flex;
justify-content: space-around;
align-items: flex-end;
width: 600px;
height: 300px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
margin: 100px auto;
}
li{
position: relative;
top: 41px;
width: 40px;
text-align: center;
}
p {
background-image: linear-gradient(red,blue);
}
h3 {
white-space: nowrap;
text-indent: -10px;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<!-- <ul>
<li>
<div>13</div>
<p style="height: 13px;"></p>
<h3>第1季度</h3>
</li>
<li>
<div>26</div>
<p style="height: 26px;"></p>
<h3>第2季度</h3>
</li>
<li>
<div>35</div>
<p style="height: 35px;"></p>
<h3>第3季度</h3>
</li>
<li>
<div>46</div>
<p style="height: 46px;"></p>
<h3>第4季度</h3>
</li>
</ul> -->
<script>
// 创建一个空数组 用来存放用户输入的数据
let arr = []
// 循环将输入的数据存入到数组里面
for (let i = 1; i <= 4; i++) {
arr.push(prompt(`请输入第${i}季度的数据`))
}
// console.log(arr)
document.write('<ul>')
// 遍历打印li标签
for (let x = 0; x <arr.length; x++) {
document.write(`
<li>
<div>${arr[x]}</div>
<p style="height:${arr[x]}px;"></p>
<h3>第${x+1}季度</h3>
</li>
`)
}
document.write('</ul>')
</script>
</body>
</html>
第四天相关知识
函数
1.函数的基本使用
首先声明一个函数 :
function 函数名() {
函数体
}
函数调用 : 函数名() 函数不调用不执行 调用才执行 函数可以多次调用 调用一次 就执行一次函数体代码
2.函数参数
function 函数名 (形参1,形参2) {
函数体
}
函数名(实参1,实参2)
// 声明函数的时候,()里面的是形参 形式上的参数
// 调用函数的时候,()里面的是实参 实参会赋值给形参
(实参是可以任意类型的数据)
现要求 : 求n-m之间的和 封装成函数
可用如下写法 :
<script>
let n = +prompt('请输入第1个数')
let m = +prompt('请输入第2个数')
function getTotal(q, w) {
let sum = 0
for (let i = q; i <= w; i++) {
sum += i
}
alert(sum)
}
getTotal(n, m)
</script>
3.函数的返回值
返回值是函数处理的结果返回给函数调用
如果元素只是在函数里面打印 结果还在函数里面 没有到函数外面
<script>
function fn(x) {
let a = 2 + 3
console.log(a)
return a
alert('针不戳')
}
// 相当于 return 后面的值 赋值给了fn() fn使用函数调用后就是 fn() = a
console.log(fn(9) + 3)
</script>
★函数没有返回值 或者return后面没有数据 函数返回值默认undefined
★函数体里面 return下面的代码不执行 return后面的数据不要换行写
4.函数的极值
<script>
// 求任意数组中的最大值并返回这个最大值
function getMax(arr = []) {
// 假设数组里面第一个元素是最大值
let max = arr[0]
let min = arr[0]
for (let i = 1; i < arr.length; i++) {
// 如果max比后面的元素小 则把后面的元素赋值给max
if (max < arr[i]) {
max = arr[i]
}
if (min > arr[i]) {
min = arr[i]
}
}
return [max, min]
}
let sum1 = getMax([12, 23, 3, 4, 9])
console.log(`函数的最大值是${sum1[0]},函数的最小值是${sum1[1]}`)
</script>
5.函数的部分细节
函数名相同 后面覆盖前面
参数不匹配 形参和实参个数不相等
(★形参多 多余的形参默认值undefined)
(★实参多 多余的实参没有形参接受 被忽略)
return 和 break 的区别
break 结束当前循环
return 函数里面执行到return 整个函数结束执行
6.作用域
全局变量 : 生效范围是js代码部分 在任何范围和区域都可以范围和修改
局部变量 : 只在函数里面访问和生效
<script>
function fn1() {
let a = 20
}
console.log(a) // 报错
</script>
7.立即执行函数
立即执行函数 避免全局变量污染
(匿名函数)();
(function(a){console.log('立即执行函数方法1')})();
(匿名函数());
(function(){console.log('立即执行函数方法2')}());
8.拓展
变量的特殊情况 :
变量没有声明 直接赋值 也是全局变量 不推荐
函数的形参可以当局部变量来看待 函数外面不能访问
函数表达式 :
匿名函数表达式调用 必须写在后面
具名函数 调用顺序在函数前面后面都可以
完成一个用户输入秒数 我们转化为时分秒的小案例来巩固今天的记忆
<script>
// 用户输入总秒数
let seconds = +prompt('请输入总的秒数')
// 函数 参数 功能 返回值
function getTime(t) {
// 处理秒
let s = parseInt(t % 60)
// if (s < 10) {
// s = '0' + s
// }
// 补0操作
s = s < 10 ? '0' + s : s
// 处理分
let m = parseInt(t / 60 % 60)
// 补0操作
m = m < 10 ? '0' + m : m
// 处理小时
let h = parseInt(t / 60 / 60 % 24)
// 补0操作
h = h < 10 ? '0' + h : h
return `${h}:${m}:${s}`
}
let res = getTime(seconds)
document.write(res)
</script>