JS基础（2~5）
JS基础 Day2
运算符
赋值运算符
对变量赋值
=：等号右边赋值给左边，左边是个容器
+=，-=，*=，/=，%=
一元运算符
二元、三元运算符
自增：++
前置自增：++i
后置自增：i++
自减：--
比较运算符
>，<，>=，<=
==（有隐式转换，只判断值），===（全等），!==
字符串比较比的是ASCII码
NaN不等于任何值
逻辑运算符
解决多重条件判断
&&，||，!
练习--判断一个数是4倍数且不是100倍数
<script>
let num = +prompt('输入数字：')
alert(num%4===0 && num%100!==0)
</script>
运算符优先级
语句
表达式和语句
表达式可被求值，可写在赋值语句右侧；语句不一定有值
分支语句
程序三大流程控制语句
顺序结构（从上往下）
分支结构（条件选择）
循环结构（重复执行）
分支语句：有选择性执行代码
if分支语句
单分支
if(条件) {...}
双分支
if(条件) {...} else {...}练习--判断用户登录
// 用户输入
let uname = prompt('输入用户名：')
let pwd = prompt('输入密码：')
// 判断输出
if (uname==='pink' && pwd==='123') {
alert('成功登录')
} else {
alert('用户名或密码错误')
}
练习--判断闰年
let year = +prompt('输入年份：')
if (year%4===0 && year%100!==0 || year%400===0) {
alert('${year}年是闰年')
} else {
alert('${year}年是平年')
}
多分支
if(条件1) {...} else if(条件2) {...} else{...}练习--判断成绩
let score = +prompt('输入成绩：')
if(score >= 90) {
alert('很棒')
} else if(score >= 70) {
alert('良好')
} else{
alert('加油')
}
三元运算符
条件 ? 满足执行 : 不满足执行一般用来赋值
练习--判断两个数最大值
let num1 = +prompt('输入第一个数')
let num2 = +prompt('输入第二个数')
num1>num2 ? alert(${num1}):alert(${num2})
练习--数字补零
let num = prompt('输入数字：')
num = num<10 ? 0+num : num
alert(num)
switch语句
语法：
switch(数据) {
case 值1:
代码1
break
......
default:
代码n
break
}
练习--简单计算器
let num1 = +prompt('输入第一个数：')
let num2 = +prompt('输入第二个数：')
let sp = prompt('输入+-*/其中一个：')
switch(sp) {
case '+':
alert(${num1+num2})
break
同理......
default:
alert('输入不符合要求')
}
循环语句
断点调试
位置：F12->sources一栏->选择代码文件
while循环
语法：
while(条件) {...}循环三要素：变量起始值、终止条件、变量变化量
循环退出
break：退出循环
continue：结束本次循环，继续下次循环
练习--页面弹出
while(true) {
let str = prompt('你爱我吗？')
if (str === '爱') {
break
}
}
综合案例--简易ATM取款机
let money = 100
while(true) {
let re = +prompt(`
请你选择操作：
1.存钱
2.取钱
3.查看余额
4.退出
`)
if(re === 4) {
break
}
switch(re) {
case 1:
let cun = +prompt('输入存钱金额：')
money += cun
break
case 2:
let qv = +prompt('输入取款金额：')
money -= qv
break
case 3:
alert('余额是${money}')
break
}
}
JS基础 Day3
循环for
for循环基本使用
for(变量起始值 ; 终止条件 ; 变量变化量) { 循环体 }最大价值：循环数组
for(let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
退出循环：continue、break
无限循环：while(true)、for(; ;)
循环嵌套
练习--九九乘法表
<head>
<style>
span {
display: inline-block;
width: 100px;
padding: 5px 10px;
border: 1px solid pink;
margin: 2px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(225, 192, 203, .4);
bavkground-color: rgba(225, 192, 203, .1);
text-align: center;
}
</style>
</head>
<body>
<script>
for(let i=1; i<=9; i++) {
for(let j=1; j<=i; j++) {
document.write(`<span>$(j) X ${i} = ${i*j}</span>`)
}
document.write('<br>')
}
</script>
</body>
数组
数组是什么
array一种按顺序保存数据的数据类型
数组的基本使用
声明数组
字面量声明：
let 数组名 = [数据1,数据2,...,数据n]构造函数声明：
let arr = new Array(数据1,数据2,...,数据n)
取值语法
数组名[下标]
遍历数组
操作数组
增：
arr.push(新增内容)、arr.unshift(新增内容)删：
arr.pop()、arr.shift()、arr.splice(操作的下标, 删除的个数)改：
数组[下标]=新值查：
数组[下标]练习--数组筛选，放入新数组
let arr = [2,0,6,1,77,9,54,3,78,7]
let newArr = []
for(let i=0; i<arr.length; i++) {
if(arr[i] >= 10) {
newArray.push(arr[i])
}
}
console.log(newArr)
练习--数组去0
数组案例
综合案例--根据数据生成柱形图
<body>
<script>
let arr = []
for(let i=1; i<=4; i++) {
arr.push(prompt(`输入第${i}季度数据：`))
}
document.write(`<div class="box">`)
for(let 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>
冒泡排序
let arr = [5,4,3,2,1]
for(let i=0; i<arr.length; i++) {
for(let j=0; j<arr.length-i-1; j++) {
if(arr[j]>arr[j+1]) {
let temp = arr[j]
arr[j] = arr[j+1]
arr[j+1] = temp
}
}
}
console.log(arr)
数组排序
升序
arr.sort(funtion(a,b)) {
return a-b
}
降序
arr.sort(funtion(a,b)) {
return b-a
}
JS基础 Day4
函数
为什么需要函数
抽取-封装
用于代码复用
被设计为执行特定任务的代码块
函数使用
函数的声明语法：
funtion 函数名() {函数体}命名规范
函数的调用语法：
函数名()
函数传参
funtion 函数名(参数列表) {函数体}形参、实参
参数默认值：让程序更严谨
练习--函数求和
funtion getSum(x=0, y=0) {
document.write(x+y)
}
getSum(1,2)
练习--求学生总分
funtion getArrSum(arr=[]) {
let sum = 0
for(let i=0; i<arr.length; i++){
sum+=arr[i]
}
console.log(sum)
}
getArrSum([1,2,3,4,5])
函数返回值
把处理结果返回给调用者
语法：
return 数据练习--输出数组最值funtion getArrValue(arr = []) {
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]
}
}
return [max, min]
}
let newArr = getArrValue([11,3,55,7,29])
console.log(`数组的最大值是：${newArr[0]}`)
console.log(`数组的最小值是：${newArr[1]}`)
作用域
可用性的代码范围
全局作用域（全局有效）、局部作用域（局部有效）
全局变量、局部变量
特殊情况
函数内部，变量没声明，直接赋值，当全局变量
函数内部的形参可以看做局部变量
变量访问原则：就近原则
匿名函数
具名函数、匿名函数funtion() { }
使用方法
函数表达式：
let fn = funtion() { }将匿名函数赋值给变量，通过变量名调用
fn()先声明，再调用
后期web API会使用
立即执行函数：（两种写法，一定要分号）
(funtion(形参){代码})(实参);(funtion(){}());避免全局变量之间污染
综合案例--转换时间
需求：输入秒数，转换为时分秒
代码：
let second = +prompt('输入秒数：')
funtion getTime(t) {
let h = parseInt(t/60/60%24)
let m = parseInt(t/60%60)
let s = parseInt(t%60)
h = h<10 ? '0'+h : h
m = m<10 ? '0'+m : m
s = s<10 ? '0'+s : s
return '转换完毕之后是${h}小时${m}分${s}秒'
}
let str = getTime(second)
document.write(str)
逻辑中断
类似参数默认值的写法
funtion getSum(x,y) {
x=x||0
y=y||0
console.log(x+y)
}
getSum(1,2)
逻辑运算符里的短路：只存在于&&（一假则假）和||（一真则真）中
转换为boolean型
显示转换：Boolean()
''（空）、0、undefined、null、false、NaN转换为布尔值后是false
JS基础 Day5
对象
什么是对象
object，JS里的一种数据类型，可理解成一种无序的数据集合
对象使用
对象声明
let 对象名={}let 对象名=new Object()
由属性和方法组成
let 对象名 = {
属性名: 属性值 ,
方法名: 函数
}
对象使用
增：
对象名.新属性名=新值删：
delete 对象名.属性名改：
对象.属性=值查：
对象.属性（对多词或-等属性，用：对象['属性']）
对象中的方法
本质是函数
方法由方法名和函数两部分组成，之间用“:”分隔
方法调用：
obg.方法名(参数)
遍历对象
for(let k in obj) {...}//结果是字符串for(let k in obj) { //属性名 'uname'（带引号）即'uname'===k
console.log(obj[k])
} //获得对象属性是k，获得对象值是obj[k]
练习--遍历数组对象
let students = [
{name:'小明',age:18,gender:'男'},
{name:'小红',age:19,gender:'女'},
{name:'小刚',age:17,gender:'男'},
]
for(let i=0; i<students.length; i++){
console.log(students[i].name)
}
内置对象
是什么
内置对象Math
ceil、floor、round、max、min、abs、pow...
生成任意范围随机数
Math.random() //取值[0,1)随机取数组：
let arr = ['red', 'green', 'blue']
let random = Math.floor(Math.random()*arr.length)
console.log(arr[random])
//改进，不重复
arr.splice(random, 1)
console.log(arr)
生成N~M之间的整数：
Math.floor(Math.random()*(M-N+1))+N练习--猜数字游戏
funtion getRandom(N, M) {
return Math.floor(Math.random()*(M-N+1))+N
}
let random = getRandom(1, 10)
console.log(random)
while(true) { //若设置了次数，就用for循环
let num = +prompt('输入你猜的数字：')
if(num>random) {
alert('猜大了')
}else if(num<random) {
alert('猜小了')
}else {
alert('猜对了')
break
}
}
练习--生成随机颜色
funtion getRandomColor(flag=true) {
if(flag) {
let str='#'
let arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
for(let i=1; i<=6; i++) {
let random=Math.floor(Math.random()*arr.length)
str+=arr[random]
}
return str
} else {
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})`
}
}
console.log(getRandomColor(false))
console.log(getRandomColor(true))
console.log(getRandomColor())
null也是JS数据类型的一种，通常用它表示不存在的对象
综合案例--学成在线页面渲染案例
拓展
简单类型（基本数据类型）（值类型）
复杂类型（引用类型）
通过new创建的对象，如Object、Array、Data等
在栈空间存地址，真正的对象实例存放在堆空间中
堆栈空间分配
栈：值，存放简单数据类型
堆：存放复杂数据类型（对象）