WEB前端
DAY5
-
JS引入方式
- 内部引入:一般自己做项目的时候放在底部,不影响加载顺序又可以和CSS文件进行区分,并且不会影响浏览器渲染。
- 外部引入:在script标签中使用src引入外部文件
-
输入输出语句
<script> prompt('') 输入语句 document.write('') 打印到页面 console.log('')
-
变量
盒子----存储数据的容器(数据本身不是变量)
-
变量声明:let 变量名
-
变量赋值:
age=prompt('请输入年龄') age=33 console.log(age)
- 变量的初始化
let uname=prompt('请输入您的用户名') console.log(uname)
- 同时定义多个变量(不建议)
let uname='zs',age=21 console.log(uname,age)
-
-
变量命名规范
1.有效符号(大小写字母、数字、下划线、$)
2.关键字、保留字不能用于变量命名
3.不以数字开头
4.尽量用有意义的变量名
5.驼峰命名法
-
let和var的区别
var 可以多次声明同一变量
-
const常量
-
数据类型
js是弱数据类型语言,只有赋值后才
- 基本数据类型----数字类型
<script>
let a=21
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)
<script>
- 字符串类型
<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 "gaoxin" sns'
console.log(typeof(uname4))
- 字符串拼接用加号+
- 模板字符串
let uname = prompt("请输入名字:")
let age = prompt("请输入年龄:")
document.write('${},${}')
- 布尔类型
console.log(3<5)
console.log(undefined+1) 声明,未赋值
console.log(null+1) null NaN not a number
- 显示转换
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))
- 运算符
// = 赋值运算符
// 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>
// && || !
// alert(4 > 3 && 3 < 5) //两真为真,一假则假
// alert(4 < 3 || 3 < 5) //一真则真 全假则假
// alert(!true)
alert(!(4 < 3))
</script>
- 单分支语句
let age = 11
// if(条件){
// 执行的代码
// }
if (age < 18) {
document.write('你是小弟弟,不要乱跑')
}
- 双分支语句
let age = +prompt('请输入您的年龄:')
if (age <= 18) {
alert('你不要乱跑')
} else {
alert('恭喜你,成年了')
}
- 多分支语句
let age = +prompt('age:')
if (age < 18) {
alert('你是未成年 学习吧')
} else if (age <= 25) {
alert('青春年华')
} else if (age <= 40) {
alert('好汉不提当年勇')
} else {
alert('男人四十一枝花')
}
- 三元运算符
let age = +prompt('请输入您的年龄:')
// if (age <= 18) {
// alert('你不要乱跑')
// } else {
// alert('恭喜你,成年了')
// }
// 判断条件?条件成立时执行的语句:条件不成立时执行的语句
age <= 18 ? alert('你不要乱跑') : alert('恭喜你,成年了')
- 求最大值
let a = +prompt('请输入num1:')
let b = +prompt('请输入num2:')
a > b ? alert(`最大值是:${a}`) : alert(`最大值是:${b}`)
- 数字补零
// alert(2 < '3')
let a = prompt('num')
a >= 10 ? alert(a) : alert(0 + a)
- switch
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('你是外星人吗')
}
- while循环
// while 一定要有终止条件
let i = 10
// while (i > 11) {
// console.log('你是大聪明')
// i--
// }
do {
console.log('你是大聪明')
i--
} while (i > 11)
- for循环
for (let i = 1; i <= 10; i++) {
document.write(`你真是个大聪明<br>`)
}
- 循环嵌套
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/>`)
}
- contine、break
for (let i = 1; i < 100; i++) {
if (i === 50) {
// break
continue
}
console.log(i)
}
// break:跳出循环
// continue:跳出本次循环
- 循环加强
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)
}
- 数组
// 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))
- 二维数组
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 获取数组长度的