前言
记录时间：2023.2.27
坚持的第一天
JavaScript从入门到精通
学习javascript时间历程记录打卡
晚上8：00到 23：00
思维导图
完成代码练习
1.体验js
<!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>
.try {
background-color: rgb(8, 187, 231);
}
</style>
</head>
<body>
<button class="try">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
let bts = document.querySelectorAll('button')
for (let i = 0; i < bts.length; i++) {
bts[i].addEventListener('click', function () {
document.querySelector('.try').className = ''
this.className = 'try'
})
}
</script>
</body>
</html>2.js书写位置-内部
<!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>
</head>
<body>
<!-- 内部js -->
<script>
// 页面弹出警示框
alert('你好，js~')
</script>
</body>
</html>3.js书写位置-外部
<!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>
</head>
<body>
<script src="./js/my.js">
// 中间不要写内容
</script>
</body>
</html>4.窗口弹出
<!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>
</head>
<body>
<script>
alert('你好')
alert('我很好')
</script>
</body>
</html>5.输入和输出语法
<!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>
</head>
<body>
<script>
// 1. 文档输出内容
document.write('我是div标签')
document.write('<h1>我是标题<h1>')
// 2. 控制台打印输出
console.log('这是一个控制台输出')
console.log('日志');
// 3. 输入语句
prompt('请输入你的年龄')
</script>
</body>
</html>6.变量的使用
<!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>
</head>
<body>
<script>
// 1. 声明一个年龄变量
let age
// // 2. 赋值 = 赋值
age = 18
console.log(age);
// 3. 声明的同时直接赋值 变量的初始化
let age1 = 18
// 案例
let num = 20
let uname = 'try栈'
console.log(num);
console.log(uname);
</script>
</body>
</html>7.变量的使用更新
<!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>
</head>
<body>
<script>
// 1 声明的同时直接赋值 变量的初始化
// let age = 18
// age = 19
// console.log(age);
// 2. 声明多个变量
// let age = 18, uname = 'try栈'
// console.log(age, uname);
// 提倡声明的方式
let age =18
uname = 'try栈'
console.log(age, uname);
</script>
</body>
</html>8.输入用户名案例
<!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>
</head>
<body>
<script>
// 输出用户名案例
// 1. 用户输入
// prompt('请输入姓名')
// 2. 内部处理保存数据
let uname = prompt('请输入姓名')
// 3. 打印输出
document.write(uname)
</script>
</body>
</html>9.交互2个变量
<!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>
</head>
<body>
<script>
let num1 = 10
let num2 = 20
let temp
// 赋值：都是把右边给左边
temp = num1
num1 = num2
num2 = temp
console.log(num1, num2);
</script>
</body>
</html>10.变量的命名规范
<!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>
</head>
<body>
<script>
// let if = 10
let num1$_ = 11
// let nav-bar = 11
// let 1num = 10
// 严格区分大小写
let pink = 'try栈'
let Pink = 'try栈'
console.log(pink, Pink)
</script>
</body>
</html>11.输入姓名年龄案例
<!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>
</head>
<body>
<script>
// 1. 姓名弹窗输出
let uname = prompt('请输入名字')
let age = prompt('请输入年龄')
let gender = prompt('请输入性别')
document.write(uname, age, gender)
</script>
</body>
</html>12.let和var的区别
<!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>
</head>
<body>
<script>
var num
console.log(num)
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
// let num = 20
// let num = 10
// console.log(num)
</script>
</body>
</html>13.数组的使用方法
<!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>
</head>
<body>
<script>
// let arr = [10, 20, 30]
// 1. 声明数组 有序
let arr = ['小明', '小红', '小张', '小李', '小王', 10]
// 2. 使用数组 数组名[索引号] 从0
// console.log(arr);
console.log(arr[0]); //小明
console.log(arr[4]); //小王
// 3. 数组长度 = 索引号 + 1
console.log(arr.length); //6
</script>
</body>
</html>© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![光遇自动更新每日任务接口[接口分享]-try栈](https://www.vqqc.cn/wp-content/uploads/2022/12/1670250329-apijktppt.png)
![简单用html写了一个光遇蜡烛查询的网页工具[实用工具]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/02/1676084107-微信图片_20230211105428.png)
![php基础教程-数组冒泡排序算法[技术分享]-try栈](https://www.vqqc.cn/wp-content/uploads/2022/12/1670257414-slt..png)
![java入门基础教程：2023.2.27第一天，Java快速入门、IDEA开发工具的使用[java教程]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/02/1677498626-画布-1.png)
![【干货】分享一下我做的光遇自动更新任务接口内容集合[实用工具]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/03/1679064178-image.png)
![JS基础教程：2023.4.2坚持第35天-JavaScript web APIs BOM操作[js教程]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/04/1680450097-Web-APIs.png)
![JS基础教程：2023.3.5第七天-JavaScript数组和循环使用[js教程]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/03/1678026321-JS基础.png)
![JS基础教程：2023.3.2第四天-JavaScript流程控制使用[js教程]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/03/1677769054-JS基础.png)
![JS基础教程：2023.2.28第二天-JavaScript从入门到精通[js教程]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/02/1677598603-JS基础.png)
![JS基础教程：2023.4.3坚持第36天-JavaScript web APIs BOM操作[js教程]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/04/1680537133-Web-APIs.png)
暂无评论内容