1.js入门
<!DOCTYPE htm1>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
title>Document</title>
</head>
<body>
<button>点击我变成粉色</button>
<script>
let btn = document.querySelector('button')
btn.addEventListener('click', () => {
btn.style.backgroundColor = 'pink'
})
</script>
</body>
</html>
2.js引入方式
<script>
// 内部
// prompt('请输入您的年龄:)
</script>
<!-- 外部 -->
<script src="./93-外部js.js"</script>
1
3.输入输出语句
<script>
//输入语句
prompt('请输入您的密码:')
//打印到页面//可以识别标签
document.write('<strong>天才</strong>')
//控制台输出语句//不识别标签
console.log('天才')
</script>
4.变量
变量:盒子----存储数据的容器 数据本身不是变量
变量的声明: let 变量名 ; var 变量名(不用)
<script>
//prompt('请输入您的年龄:')输入语句
let age=prompt('请输入您的年龄:')
console.log('age')
doucument。write(age)
</script>
变量初始化
let uname=prompt('请输入您的用户名:')
console.log('uname')
5.变量命名规范
<script>
变量命名规范:
1.有效符号(大小写字母、数字、下划线、$)
2.关键字、保留字不能用于变量命名
3.不以数字开头
4.尽量用有意义的变量名
5.驼峰命名法 userName
</script>
6.let和var的区别
var:可以次声明同一变量
console.log(age)
var age
7.const常量
常量名大小写 常量无法更改
const PI=3.14
console.log(PI)
//PI常量无法更改
8.数据类型
js是弱数据类型语言 只有赋值之后,才知道是什么数据类型
let uname=21
uname='gouxin'
console.log(typeof(uname))
9.基本数据类型—数字类型
let a=20
let b=30
console.log(a)
console.log(a+2)
console.log(a+b)
console.log(a*b)
console.log(a/b)
console.log(a%2)
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))
字符串拼接和模板字符串
let a=+prompt("请输入num1")
let b=+prompt("请输入num2")
//alert 禁示框
console.log(a+b)
let uname=prompt("请输入名字:")
let age=prompt("请输入年龄:")
document.write('你叫' + uname + ',今年' + 'age' + '岁了')
document.write()
11.布尔类型
console.log(typeof(3<5))
//undefinded 声明,未赋值
//null NaN not a number
console.log(undefined + 1)
console.log(null + 1)
12.显示转换
let a=prompt('num1')
let a=prompt('num2')
console.log(Number(a) + Number(b))
console.log(typeof(+a))
let c='200px'
console.log(parseint(c))
13.运算符
= 赋值运算符
let a = 21(a的默认值)
a = 33
a +=4 //a=a+4 37
a *=2 //a=a*2 74
a /=2 //a=a/2 37
alert(a) 37
let b = a++
alert(b) 37
alert(a) 37
b=++a 先自增,再赋值
alert(b) 38
//比较运算符
let num1 = 2
let num2 = '2'
alert(num1 == num2) true
alert(num1 === num2) false
//== (隐式转换)只比较数值,将字符
14.逻辑运算符
&&与 ||或 !非
alert(4>3 && 3<5) false
alert(4<3 || 3<5) true
alert(!true) false
alert(!(4<3)) false
15.单分支语句
<script>
let age = 11
//if(条件){
// 执行的代码
//}
if(age<18){
document.write('你是小弟弟')
}
</script>
16.双分支语句
<script>
let age = +prompt('请输入你的年龄:')
if(age<=18){
alert('你不要乱跑')
}
else{
alert('成年了')
}
</script>
17.闰年
<script>
let year = +prompt('请输入年份')
if
}
</script>
18.多分支语句
<script>
let age = +prompt('age:')
if(age<18){
alert('你是未成年')
}
else if(18<=18<25){
alert('青春年华')
}
else{
alert('好汉不提当年勇')
}
19.三元运算符
<script>
//判断条件 ?:条件成立时执行的语句 :条件不成立时执行的语句
age = ?
</script>
20.求最大值
<script>
let a = prompt('num')
a >= 10 ? alert(a):alert(0+a)
</script>
21.switch语句
<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>
22.while语句
一定要有终止条件
<script>
let i = 10
while(i>0){
console.log(抽象)
i--
}
</script>
do{
consolo.log('你是')
i--
}while(i>11)
23.for循环
<script>
for(let i = 1; i<= 10; i++){
console.log('你是')
}
</script>
24.循环嵌套
<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>`)
}
document.write(`<br/>`)
}
</script>
25.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>
26.循环加强
arr 数组名
for in 遍历数组 i 代表索引下标
for of 遍历数组 k 代表数组元素
30.数组
let arr:起变量名,可以是gouxin、12、true(布尔值)
索引下标从 0 开始,快速查找数组元素
<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>