变量
理解:就是创建一个变量,然后通过变量给与赋值,然后变量就有值了,可以输入使用了
<!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 nome; // 创建变量
nome = '某某'; // 变量赋值
console.log(nome) // 变量使用
// 我的爱好
let hobby; // 创建变量
hobby = '吃'; // 变量赋值
console.log(hobby) // 变量使用
// 我的身高
let width; // 创建变量
width = 18; // 变量赋值
console.log(width) // 变量使用
// 同时声明多个变量
let figure = '18',
nome = '张三'
// 输出变量连写
console.log(figure, nome)
</script>
</body>
</html>
1.变量的交换
简单来说就是创建一个空盒子,让他保护其他一个盒子的东西不受污染,然后再交换到需要的盒子上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>03-变量的交换.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
1 有两个变量 实现交换他们的值
num1 = 10 num2 = 20
经过程序的运作
num1 = 20 num2 = 10
*/
// // 1 声明两个变量
// let num1 = 10,
// num2 = 20;
// // 2 错误的演示
// num1 = num2; // num1 和 num2 = 20
// num2 = num1; // num2 = num1
// console.log(num1);
// console.log(num2);
// 1 要创建三个变量
let num1 = 101,
num2 = 202,
temp;
// 2 设置 空的变量 存放num1的值
temp = num1;
// 3 设置num1 等于 num2
num1 = num2;
// 4 设置num2 等于之前num1的值(temp)
num2 = temp;
console.log(num1);
console.log(num2);
// 5 小结
// 思路在于 要多创建一个变量 来存放临时的数据 即可
</script>
</body>
</html>
2.变量的规则和规范
理解:规则就是要遵守的,不然报错;
规范就是行业默认的行为准则,不这样做不利于自己以后的工作开展,要养成这样的习惯才行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>04-变量的规则和规范.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<!--
规则
不遵守就是出错 “不合法”
-->
<script>
// 创建一个变量 名字就叫做 let 、var 、 if 、 for 。。。内置的关键字 都不能使用
// let for = 123;
// 符号也是ok
let _hello = '123'; // 下划线开头
let $hello = '123'; // $
let hello = '123'; // 字母开头
// let 123bac="123" // 不能以数字开头
// 区分大小写
let USER = '用户1'; // 大写 单独
let user = '用户2'; // 小写 单独
// 最后 初学者还不太会创建变量和起那些名字
// 多学习老师的命名即可
// 多敲上课的代码的时候 命名规则 自然就熟悉了
// 命名有意义
// let a,b,c,d; // 不推荐 !!
let height = '100';
// 如果变量单词比较多
let userName = '姓名'; // 推荐的
let userHeight = '100'; // 推荐的
let shoppingSupermarketShop = '111'; // 小驼峰 首字母小写
let ShoppingSupermarketShop = '111'; // 大驼峰 首字母大写
</script>
</body>
</html>
早上总结:
早上学了变量,变量转换,变量的规则和规范;数据类型:(数字类型,有数字没有字符串包着的都是数字类型;字符串类型,不管是什么被字符串包着的都是字符串类型;布尔类型,一个单词的缩写转换,有两个值,是或者否,true(处斯):是的意思, fales(fo斯):否的意思)
3.字符串类型和数据类型的加法
字符串类型和数据类型的加法结果是不一样的,字符串的加法是跟字一样,加了之后一排列,不会产生数学上的加法,如下
// 字符串加法效果
let money3 = '帅哥';
let money4 = '你好呀';
sun1 = money3 + money4;
console.log(sun1)
得出的结果是:帅哥你好呀
而数据类型的加法才会产生数学上的加减乘除,如下
// 数据类型加法效果
let money = 100;
let money2 = 200;
sun = money + money2;
console.log(sun)
结果是:300
4. typeof: 获取变量的类型,通过这个代码来知道是什么数据类型,写法如下
// let num = 1;
// let userName = prompt('靓仔');
// let isRain = true;
// let foods;
// let money = null;
// console.log(typeof num); number类型,也就是数字类型
// console.log(typeof userName); string 字符串类型
// console.log(typeof isRain);boolean 布尔类型
// console.log(typeof foods);undefined 未定义类型
// console.log(typeof null); 对象类型也就是空类型 object
结论:就是在输出的括号里面加上 typeof 然后控制台会显示具体的数据类型
5.隐式和显式转换数据类型
就是将原本不是数据类型的类型转换为数据类型,当然前提得是数字,如果是文字和字母会转化失败,显示NaN,隐式写法如下
<script>
// let num1 = 1;
// let num2 = '2';
// // console.log(num1+num2); // 3
// // 隐式转换
// // console.log(num1+num2); // 12// 答案
// let num3 = num2 - 0;
// console.log(typeof num3 ); // number
// console.log(typeof num3 ); // string
// 工作中 比较常用的隐式转换写法,将字符串类型转换为数字类型
let num2 = '2';
let num3 = num2 - 0; // num3 是一个数字类型
console.log(typeof num3);
// 最简洁的写法 //没有为什么 js内部就有这样的技巧 你知道会用即可
注意点:隐式转换,放加号的值是正数,放减号的值会变成负数,放乘除会代码错误
let num4 = +num2; //在赋值的前面用上一个+号,也是可以的!
console.log(typeof num4);/* 这样就变成数字类型了 */
</script>
显式写法如下
<script>
let num = '9.9'
// 显式转换的三种方法
// Number代表数据类型, 这种写法可以将字符串转换为数据类型, 转化失败会显示NaN
num1 = Number(num)
// 整数转换 得出的值不会带小数点
// num1 = parseInt(9.9)
// 转换的值会保留小数点
// num1 = parseFloat(9.9)
console.log(typeof num1);
</script>
6.显式和隐式转换字符串
字符串类型和数据类型相加会使对方也变成字符串类型,减乘除不会,显式和隐式写法如下
<script>
let num = 12
// 2种显式转换字符串类型
// 第一种 string字符串类型的意思,直接转换
// str = String(num) 常用
// str = num.toString(); 常用
// 隐式转换字符串类型,加一个字符串,因为两者相加有一方是字符串得出的结果都是字符串
// str=12+''; 常用
console.log(typeof str);
// 总结:工作那个顺手用那个
</script>