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>