Js第二章

一.异步加载的说明
    由于HTML在浏览器的解析顺序式从上到下。
    那么如果将大量的JS代码放在body上方，就会导致
    浏览器再解析HTML网页的时候，将时间先花在加载JS代码上，
    就会导致网页一片空白。
 
    所以推荐将JS代码放在BODY下方。让浏览器先加载页面的内容，再加载JS代码。
    那么这样子也有弊端。如果说很多内容都和JS挂钩。
    所以就衍生出了异步加载JS代码：浏览器加载JS的同时不会影响HTML加载。
    
    为了减小JavaScript阻塞问题对页面造成的影响，
    可以使用HTML5为<script>标签新增的两个可选属性async和defer实现异步加载。
    所谓异步加载，指的是浏览器在执行加载JavaScript文件时不阻塞页面的加载和渲染。
    
    该知识点仅做了解。
    原因1：浏览器和计算机的执行速度已经非常快了，人的肉眼区分不了一丢丢时间差异带来的视      觉效果。
    原因2：即使退一万步讲，真的影响到了，使用上述方法也无法得到有效解决。
    我们常见的处理方式：生成一个加载页面，提示用户“正在加载中…”。

二.js的最基本的代码
第一行JS代码:仅仅用于弹窗.起到一个警告作用
 alert("密码错误!!");
第二行JS代码:prompt("xxx").弹出一个让用户可以输入的询问窗口
注意,这个方法可以获取到用户输入的值.如何获取将在今天的第二节课进行讲解.
 prompt("请输入你的账号");
 第三行JS代码:confirm("xxx"),弹出一个询问框,用户可以选择确定或取消.
  注意,这个方法可以获取到用户选择的值.如何获取将在今天的第二节课进行讲解.
 confirm("你确定要退出系统吗？"); 
第四行代码:console.log("xxx")
主要用于将进行打印在控制台,方便程序员进行调试和BUG的检查.
通过F12可以开启浏览器的调试模式,点击console看到控制台信息.
console.log("进入控制台");
第五行代码:document.write("xxx")
 用于将内容输出到html页面中
 document.write("你好啊");

三.js中的注释
这个<!-- 的是HTML注释
    
    
    //是JS的单行注释
    
    /*  
        这个是JS的多行注释 
        
    */

四.js中的变量讲解
     什么是变量：经常改变的量。
    变量是程序在内存中申请的一块用来存放数据的空间。
    变量由变量名和变量值组成，通过变量名可以访问变量的值。
    
    回顾：Java的变量名的命名规则：
    1.不能以数字开头
    2.不能使用关键字（Java或JavaScript中自带的相关属性或方法。）
    3.严格区分大小写
    4.只能够由  数字  字母   下划线  $ 符号组成
    5.见名知意  例如age   name  而不是 a  b  c  d
    6.推荐使用驼峰命名法，例如studentName
    
    正课：JS的变量名的命名规则，和Java完全一致。
    
    下面哪个变量名式合法的。
    number       合法、
    88shout      不合法，数字开头
    myScore      合法
    &num         不合法
    var          不合法  关键字
    it123        合法 但是不推荐
    $tuition     合法

    常见的关键字：
    if       else        switch   for    class  
    do       while       case     break  contiue
    return   default    new      var    void
    
    
    预留关键字：现在还没有自带，但是未来有，已经提前预留了。
    implements    package   public  interface

五.js如何声明变量
扫盲: var 是varible（翻译：变量） 的缩学
            回顾:Java是如何声明变量的:   数据类型   变量名   =   变量值   ; 
            js如何声明变量:      var 变量名   =   变量值   ; 
            潜台词:不管JS是什么数据类型,都用var.
            
            JS中声明变量的2种方式:
           1.先声明再赋值.例如:
            var num ;
            num = 10;
            
            2.声明的同时也赋值,例如:
            var age  = 20;

六.交换两个变量值的案例
            案例需要:自定义2个变量,要求让他们两个变量进行互换
            幻想成现实生活:张三和李四都拿了一个箱子,并且不能放在地上
            需要完成箱子的交换.
            做法:喊第三个人帮忙.把张三的箱子给第三个人,然后张三拿李四的箱子.,李四就拿第三个人箱子.
            var a1 = 100;
            var a2 = "张三";
            var a3 = a1;
            a1 = a2;
            a2 = a3;
            console.log(a1);
            console.log(a2);

七.javascript中的数据类型
                回顾:Java中的数据类型分类:
                A.基本数据类型
                B.引用数据类型
                
                新课：JS同上，完全一致。
                
                
                回顾：
                Java中的基本数据类型：
                1字节：byte  boolean
                2字节：char  short
                4字节: int   float
                8字节：long  double
                Java中的引用数据类型：
                String   数组(Array)  任何Class，不管是你写的类还是JAVA自带的类。  
                
                JavaScript的基本数据类型：
                number  注意：number是数据类型但不是关键字
                string  注意：string在java是引用，在JS是基本
                boolean
                
                null
                undefined   
                bigint
                symbol
                
                JavaScript的引用数据类型：
                数组  Object  函数(方法) 等等

八.boolean和number和string讲解
            //boolean读布尔
            //js的boolean和java的boolean完全一致
            //体现在:都是基本数据类型  都只有true和false
            //意义:用程序表示一件事成功或者失败，或表示一个条件成立或不成立。
            //JavaScript中严格区分大小写，因此true和false值只有全部为小写时才表示布尔型。
            //js中的number（读数值类型）讲解
            //一句话总结:即可以存放小数,也可以存储整数
            // var a = 123;
            // var b = 12.5;
            //a和b都是number类型.没有加引号
            
            //js中的string（读字符类型）讲解
            //这里要注意:
            //js的String和java的String不同之处1:
            // string在java是引用，在JS是基本
            //js的String和java的String不同之处2:
            // string在java中通过双引号声明
            // string在js  中既可以通过双引号也可以通过单引号声明
            //例如:
            var str1 = "你好";
            var str2 = '我好';
            //以上都是string的写法

九.转义符的使用
            //我想在页面输出:   你好,我的外号是"大聪明";
            // document.write("你好,我的外号是"大聪明";");写法是错误的.不能同时存在多个双引号
            //做法1:我们需要知道  单引号里面可以包着双引号
            // document.write('你好,我的外号是"大聪明";');
            //做法2:通过转义符--  反斜杠(enter上面的)：\  斜杠：/ (shift左边的)
            document.write("你好,我的外号是\"大聪明\";");
            
            //常见的转义符:
            //见十一.常见转义符.png

十一.常见转义符
转义字符    含义
\'    一个单引号字符
\''    一个双引号字符
\n    换行符
\t    水平制表符
\f    换页符
\b    退格符
\xhh    由两位十六进制数字hh表示的ISO-8859-1字符。如"\x61"表示"a"
\v    垂直制表符
\r    回车符
\\    反斜线"\"
 十二.null和undefined数据类型解析
            // null 表示空的意思 例如:
            var str = null;
            //null的注意事项:没有任何属性或方法可言
            
            
            //undefined 表示未定义的意思 只声明了变量但是未赋值
            //例如:
            var str123 ;//这个str123就是undefined

十三.bigint和symbol讲解
            //bigint 翻译:大数值
            //如果存在需求需要计算很大很大(不用去记，因为很大。)数字,那么number将无法实现
            //例如:下面的number绰绰有余
            // var num1 = 1111111;
            // var num2 = 2222222;
            // console.log(num1+num2);
            // var num1 = 11111111111111111111;//number
            // var num2 = 11111111111111111111;//number
            // console.log(num1+num2);//计算结果出现了误差
            //所以就需要借助于bigint
            //bigint类声明方法:
            // var num3 = 1111111111111111111n;//只需要在最后加n即可
            // var num4 = 1111111111111111111n;//只需要在最后加n即可
            // console.log(num3+num4);
            
            //symbol讲解:略 常用于独一无二的对象.

十四.数据类型检查
            var num = 11;//number
            var str = "11";//string类型
            console.log(num);
            console.log(str);
            //以上写法:是我们可以看到的.所以可以知道是什么类型.
            //但是缺点1:不方便在控制台得知是什么类型
            
            //例如我们第一章节学习的prompt语法
            // var money = prompt("请输入你的金额");//通过money变量接受用户在前台输入的值
            // console.log(money);//所需我们就要学习如何识别xx变量是什么类型
            //总结:prompt的返回值都是string
            
            //如何判断一个变量是什么类型
            //语法:  typeof xxx 返回是一个数据类型
            var str = 123;
            console.log( typeof str);//number
            str = "123";
            console.log( typeof str);//string

十五.掌握数据类型转换
            //为什么要学习数据类型转换？见一下例题:
            // var num1 = prompt("请输入第一个数");
            // var num2 = prompt("请输入第二个数");
            // alert("两数之和为" + (num1 + num2));//这种写法是错误的  
            //原因:prompt返回的是一个string类型,两个string类型相加,是以拼接的形式
            
            //如何将字符串转成number类型.
            //js提供了下面三个方法,各有区别,都要掌握
            // parseInt()
            // parseFloat()
            // Number()
            
            //parseInt 将一个字符串类型的数字解析成整数
            // alert( parseInt("11.12")  );//11
            // alert( parseInt("11.99")  );//11   总结1小数后面直接省略,不会四舍五入
            // alert( parseInt("11.a12")  );//11     总结2小数后面直接省略
            // alert( parseInt("11a.a12")  );//11    总结3:解析顺序从左到右,解析到非数字就停止.
            // alert( parseInt("1a1a.a12")  );//1    总结4:只需要记住总结3
            // alert( parseInt("a11a.a12")  );//NaN      NAN 翻译: not a   numnber  不是一个数字
            
            //parseFloat()和上面的语法完全一致,唯一区别保留小数
            // console.log(  parseFloat("11.11") );//11.11
            // console.log(  parseFloat("11.11a") );//11.11
            // console.log(  parseFloat("11.1a1a") );//11.1
            // console.log(  parseFloat("11a.11") );//11
            // console.log(  parseFloat("a11.11") );//NAN
            // console.log(  parseFloat("11.a") );//11   
            
            //Number()只能将真正的数字解析
            // console.log(  Number("11.11") );//11.11
            // console.log(  Number("11") );//11
            // console.log(  Number("11") );//NAN

十六.猜数字游戏
            //猜数字游戏:由管理员声明一个数字(1~100);
            //用户通过prompt输入进行猜测.根据猜测结果进行反馈,是大了还是小了.,
            //直至猜对.
            
            //游戏规则如下:
            //4个人参加.,每人都加2分, 猜对的那个人，指定另外三个人中的一个玩一把课堂惩罚小游戏.
            
            var num = Math.random() * 100+1;//(0,100)
            num = parseInt(num);
            var begin = 1;
            var end = 100;
            
            while(true){
                var n = prompt("请输入你要猜的数字。取值范围为" + begin + "~" + end);//string
                n = Number(n);//此时的n才是number类型
                if(n>num){
                    alert("你猜大了");
                    end = n;
                }else if(n<num){
                    alert("你猜小了");
                    begin = n;
                }else{
                    alert("你猜对了");
                    break;
                }
            }

十七.js中实现随机数
            // for(var i = 1 ; i<=1000 ;i++){
            //     var num = Math.random();
            //     console.log(num);
            // }
            //总结:Math.random()这个方法返回的是一个 0-1的随机数  (0,1)
            
            //如果说想生成1-100的随机数
            for(var i = 1 ; i<=1000 ;i++){
                var num = Math.random() * 100+1;//(0,100)
                console.log(parseInt(num));//得知:0-99