JavaScript_02 变量、数据类型
当页面加载完成后才执行js脚本
window.onload ：可将js写在头部，不影响渲染
defer（延迟）、async（异步）：页面运行完成后再运行脚本<script defer async type="text/javascript">
defer：延迟 => 当引入多个脚本的时候，按照引入的顺序来执行js脚本，但在实际操作中，不一定会按顺序执行
async：异步 => 当引入多个外部脚本的时候，不一定按照引入的顺序来执行js脚本
defer和async只对外部脚本有效
注意：如果在页内书写的所有js脚本都是无效的，不能输出
注意：JavaScript区分大小写，html不区分
<script async="async" src="js/index.js" type="text/javascript">
//在这里书写的所有js脚本都是无效的，不能输出
var a = 123;
console.log("我是在引入外部脚本的script标签中的代码",a);
</script>
一、如何声明一个变量
1）语法：
关键词（var，let，const） 标识符（自定义） =（=：赋值运算符） 值
2）变量名称（标识符）的命名规范：
（1）区分大小写
（2）变量的开头必须是一个字母、下划线（_）、美元符($)
(3)变量的第二个字符开始必须是字母、下划线、美元符、数字
二、数据类型：简单（基本）数据类型，复杂（引用）数据类型
简单数据类型：
数字类型（number）：var age = 18;
字符串类型（string）： var country = "我来自中国";
布尔类型（Boolean）：var bool = true;
symbol：let syb = symbol();
undefined：var people = undefined;
null ：var city = null;
复杂的数据类型包括：
object（对象）:var today = new Date();
array（数组）:var numArr = new numArr(100,55,99,82,366);
三、类型转换：
字符串转换为数字类型
1.parseInt(data,num)：将字符串转换成为整数
data:需要转换的数据
num:该数据是几进制的数据,默认十进制（可选）
如果一个字符串中，不包含有数字，则转换为NaN（no a number），
NaN：代表一个数字（非数字的数字类型）
2.parseFloat()：将字符串转换为小数（浮点数）
注意：1）在值为相同的情况下，浮点数的储存空间是整数储存空间的两倍。当我们定义一个变量值为10.00的时候，js会自动去掉小数点后面的0。一般默认储存整数
2）当进行小数运算时，要注意双精度问题（两个小数相加得到的结果并不一定是准确的）
3.Number()：将字符串转换为数字
4.isNaN()：判断一个数据是否是非数字类型,如果是数字则返回false，如果是非数字则返回true
5.prompt("请输入你的年龄",18);弹窗（标题，默认值）
四、案例：
点击按钮增加/减少数值
1.获取到按钮
2.给这个按钮一个点击事件
3.在这个点击事件里面操作（写js功能代码）
4.获取到装载数字的容器
5.改变容器中的数字
<div class="total">
<p class="numDesc">请输入你想要的数量</p>
<p class="num">1</p>
<button class="btn">+</button>
<button class="btn">-</button>
</div>
<script type="text/javascript"
var btns = document.getElementsByClassName("btn");//获取按钮
console.log(btns);
console.log(btns[0]);
var result = 0;
var num = document.getElementsByClassName("num");//获取
btns[0].onclick = function(){
var numb = num[0].innerText;//拿到内容
console.log(typeof numb);//string 字符串类型的数据
console.log(numb);//输出
numb = parseInt(numb) +1;//加1
num[0].innerText = numb;//改变数字
}
//减
btns[1].onclick = function(){
var numj = num[0].innerText;
if(numj>1){
numj = parseInt(numj) -1;
num[0].innerText = numj;
}
}
</script>
