day01数据类型
javascript：js是一种通常运行在浏览器的脚本编程语言，前端唯一的语言
组成
ECMAScript、DOM（document object medal）、BOM（browser object medal）
ECMAScript：规范，js基础语法
DOM：网页文档模型，操作网页元素（标签）
BOM：浏览器对象模型
书写顺序
写在body里面，标签后面
书写位置
内部：
-
直接写在html文件里，用script标签包住
-
注意事项：写在所有标签最后面，因为浏览器是按从上到下的顺序执行
<!-- 浏览器逐行解析,遇到script标签,会阻塞文档解析 --> <!-- 原因一：如果JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效 --> <!-- 原因二：因为script可能会修改dom元素，那么继续解析文档没多大意义，为了提升性能，浏览器会阻塞文档解析 -->
外部：
-
代码写在以.js结尾的文件里
-
注意事项：中间不书写任何东西
内联：代码写在标签内部
结束符
即“ ； ”
-
推荐写
-
也可以不写，但要换行
注释
只有
常用输入输出语句
-
输出
向body内输出内容:document.write('我是大美铝')
alert('计算的结果是');
调试专用：console.log('我是程序员能看到的');
-
输入
prompt('情书内容：')
!--style="zoom:80%;float:left--
变量
是一个装数据的容器
变量的使用
声明变量
let age = 18;
let emeil = 'kaka@qq.com';
let gz = 2000;
声明多个变量,输出多个变量
let age,QQ,email; let name = '张三',age = 20
console.log(age,QQ,email);
3.1 只声明不赋值 结果是？
程序也不知道里面存的是啥 所以结果是 undefined 未定义的
let sex;
console.log(sex); // undefined
3.2 不声明 不赋值 直接使用某个变量会报错
console.log(tel);
3.3 不声明直接赋值使用（可以）
qq = 110;
console.log(qq);
变量命名规则
案例
交换变量（设置临时变量法）
<script>
// 给盒子
let num1 = 10;
let num2 = 20;
// 暂存
let temp = num1;
// 1换成2
num1 = num2;
// 2从temp取
num2 = temp;
// 打印出来，交换成功
console.log(num1,num2);
</script>
交换变量（加法）
<script>
let num1 = 10;
let num2 = 20;
//num1=30
num1 = num1 + num2;
//num2=10
num2 = num1 - num2;
//num1 = 20
num1 = num1 - num2;
console.log(num1,num2);
</script>
交换变量（减法）
<script>
let num1 = 10;
let num2 = 20;
console.log(num1,num2);
num1 = num1 - num2; //-10
num2 = num2 + num1;//10
num1 = num2 - num1;
console.log(num1,num2);
</script>
数据类型
两大类
引用数据类型
基本数据类型
1、number 数字型
console.log("正整数",+100);
console.log("小数",+1.09);
console.log("负数",-100);
-
NaN 是一个数字类型
2、string 字符串型
-
使用的符号
''""``
注意事项：
-
引号成双
-
单双嵌套使用
-
转换
let nbo = "4545 \'我是'\ "; console.log(nbo);
字符串拼接
普通字符串拼接
let uname = '今天'; let week = '星期一'; document.write(uname + week)
模板字符串使用方式：
-
引号使用反引号
`` -
变量使用${}
let age = 10;
let name = 'shushu';
console.log(`我今年${age}岁了`)
3、boolean 布尔型
// 布尔类型
let love = true;
4、undefined 未定义型
多用于检测后台数据是否已经传输给变量
// 未定义
let dass;
console.log("dass：",dass);//undefined
console.log(typeof(dass));//undefined
5、null 空类型
将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null
// 空值
let bb = null;
console.log("bb：",bb);//null
/*逻辑上讲，null 值表示一个空对象指针,这也是会返回"object"的原因*/
console.log(typeof(bb)); //object
null 和 undefined 区别
-
undefined 表示没有赋值 null 表示赋值了，但是内容为空
![image-20220415155733843]()
检测数据类型
-
控制台字体颜色
-
直接输入 typeof
方法：typeof（） 不推荐
let age = 10;
//console.log('age: ', typeof(age)); 不推荐加（），这样变成了方法
console.log('age: ', typeof age);
类型转换
解决promt输入的值默认字符串，无法做加减
只能属于字符串拼接（“1” + “1”=“11”
系统内部自动进行类型转化
规则：
1、+ 号两边只要有一个是字符串，都会把另外一个转成字符串
console.log("11" + 11); //1111
2、除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
console.log('1' * 1);
技巧：+号作为正号解析可以转换成Number
console.log(+'1' + 18);
显性转化
<!--编写程序时过度依靠系统内部的隐式转换是不严谨的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。 为了避免因隐式转换带来的问题，通常需要对数据进行显示转换。-->
转成数字
Number(数据)
-
转成数字类型
-
如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
-
NaN也是number类型的数据，代表非数字
console.log(Number('11111'));
console.log(typeof Number('11111'));//number
parseInt（数据）
-
只保留整数（不四舍五入）
console.log(parseInt(55.75));//55
console.log(parseInt(55.35));//55
parseFloat(数据)
-
可以保留小数
console.log(parseFloat(78.565656));//78.565656
console.log(parseFloat(55))//55，不会强制显示小数点后面的数值
转成字符串
String(数据)
console.log(String(123));
console.log(typeof String(123));
变量.toString(进制)
<!--注意：进制不写默认10进制 数字.toString()报错-->
let num = 445646;//number
console.log(num.toString());
console.log(typeof num.toString());//string
加法小案例
<!--记得给**字符串**num1、2赋值成为数字类型 num1 = Number(num1);，不然是无法转化的-->
<script>
let num1 = prompt('num1：');
let num2 = prompt('num2：');
num1 = Number(num1);
num2 = +num2;//转化为整数
// num2 = Number(num2);
console.log(typeof num1,num2)
document.write("总和是：",num1 + num2);
</script>
订单小案例
额外拓展
1、开启剪贴板快捷键：win+v
2、
插件分享
步骤：
-
先选中要输出的变量名
-
快捷键Cmd+Shift+L
-
效果：
console.log('gun: ', gun);
常见错误
1、单词写错导致没有声明
查找方法：通过搜索 全字匹配 区分大小写
浙公网安备 33010602011771号