变量
1.目标
掌握变量的概念以及基本使用
变量：就是一个容器, 可以存放数据
2.实现思路
- 使用var关键字 声明一个变量
- 使用= 给变量赋值
3.代码实现
<!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. 使用var关键字吧声明一个变量 // var age; // 声明变量 没有赋值 默认就是undefined// 2. 给变量赋值 // age = 15;// 3. 弹框显示变量的值// alert(age);// 声明变量且赋值var age = 15;alert(age);// 提示用户输入姓名 年龄 点击的是取消按钮 值:nullvar name = prompt('请输入姓名');var age = prompt('请输入年龄');// 把用户输入的姓名 年龄 和年龄打印出来// alert(name);// alert(age);console.log('姓名',name);console.log('年龄', age);</script>
</body>
</html>
4.总结
.1. 使用var声明变量没有赋值时是未定义undefined
var 变量;
-
使用var 声明变量且赋值
var 变量名字 = 数据; -
变量用于保存数据， 比如保存用户输入的内容 prompt 点击确定保存输入的内容 点击的是取消保存的是null
5.变量命名规范和注意事项
1.目标
掌握变量命名规范
2.实现思路
☞ 规则 必须遵守的，不遵守的话 JS引擎 发现并报错
1. 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：var usrAge, num01, _name
2. 区分大小写 强调：JS 严格区分大小写 ，var app; 和 var App; 是两个变量
3. 不能 以数字开头
4. 不能 是关键字、保留字 和 代码符号，例如：var、for、while、&, class
5. 不能出现空格
☞ 规范 建议遵守的，不遵守的话 JS引擎 也不会报错
1. 变量名必须有意义
2. 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。
3.代码实现
<!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 name = '张三';// var age = 17;// 获取姓名 两个单词以上的变量名 采用驼峰命名// 驼峰命名 首字母小写 后面单词首字母大写// var getName = '获取姓名';// var sortByAge = '根据年龄排序';// var aaa = '张三'// var bbb = 17;// 变量命名规则// 1. 不能以数字开头// var 123name = '姓名';// alert(123name);// 2. 不能是关键字// var var = 10;// 3. 不能是代码符号// var & = 10;// 4. 不能是保留字// var class = 10;// 5. 严格区分大小写// var age = 10;// var Age = 20;// alert(Age);// alert(var);// 6 字母a-zA-Z 数字0-9 下划线 $ 都可以var name01_age = '张三 19';alert(name01_age)</script>
</body>
</html>
4.总结
规则:必须尊则 否则报错
规范：建议遵守 有意义的变量名 驼峰命名法
6.练习：两数相加
1.目标
实现两数相加
2.实现思路
- 使用var 定义两个变量
- 两个变量相加后得到和使用变量保存
- 使用alert把相加后的和弹出
3.代码实现
<!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. 定义两个变量 保存 两个数字// var num1 = 10;// var num2 = 20;// 2. 定义变量sum 保存两数相加// var sum = num1 + num2// 3. 使用alert 把sum弹出 // alert(sum);// 1.定义两个变量 接受用户输入的两个数字var num1 = prompt('请输入第一个数字');// 2.定义变量sum 保存 两数相加后的和var num2 = prompt('请输入第二个数字');// 3. 使用alert 把sum 弹出var sum = num1 + num2;alert(sum);// 带有引号 -> 字符串 字符串相加时 是拼接 不是运算// 如何解决？？ 把字符串转成数字 + 把字符串转成数字// var n1 = +'10'; // var n2 = +'20';// alert(n1 + n2)</script>
</body>
</html>
4.总结
1.带有引号的数据都是字符串 “100” “张三”
2.把数字字符串 “100” “200” 使用+ 可以转成数字 100 200
3.数字可以相加 字符串相加的时候是拼接
7.for循环
1.目标
掌握for循环的语法
2.实现思路
- 思考为什么循环？
- for语法
3.代码实现
<!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-10 // console.log(1);// console.log(2);// console.log(3);// console.log(4);// console.log(5);// console.log(6);// console.log(7);// console.log(8);// console.log(9);// console.log(10);// 问题// 1. 冗余代码 console.log// 2. 变量 i 保存变化的数据// 3. i = i+1 简写为 i++// 使用for循环实现打印1-10的输出for(var i = 1; i < 101; i++) {// 循环体 重复执行的代码放在循环体console.log(i);}</script>
</body>
</html>
4.总结
语法：
for (定义变量且赋值；条件; 表达式) {// 循环体
}
作用： 较少冗余代码 重复代码可以放在循环体
注意：要有退出循环的条件
