JavaScript的学习日常

前端分为三层：
 - 结构层(HTML) 定义网页的内容
 - 表现层(CSS)  定义元素如何显示 描述网页的布局 
 - 行为层(JavaScript) 定义网页的行为

JavaScript分为三部分：
1.ECMAScript(js核心语法部分)
2.DOM(文档对象模型) Document Object Model
3.BOM(浏览器对象模型) Browser Object Model

JavaScript的注释方法：
    // 单行注释  
    // console.log("单行注释")

    console.log("打印")// 注释注释的内容
    // 多行注释
    /*
      var a=10;
      var b=20;
      声明两个变量
    */

JavaScript的语法：
  // 变量
    // 变量的声明
    var a;
    // 变量的赋值
    a=10;
    // 声明方法  func方法名
    function func(){
        // 执行的代码
    }
    // 数据类型
    // 操作符
    // js语句
    // 关键字
    // 函数
    // ....
    
 JavaScript的输出方式：

    // 1.文档输出  document
    document.write("这是通过document.write输出的内容")
    // document.getElementById("text").innerText="这是innerText输出的文本"
    // document.getElementById("box").innerHTML="<h2>这是innerHTML输出的文本</h2>"

    // 2.控制台输出  console
    console.log("这是控制台输出的日志");
    // console.info("这是控制台输出的信息");
    // console.warn("警告","这是控制台输出的警告");
    // console.error("错误","这是控制台输出的错误");

    // 3.窗口输出  window
    window.alert("这是警告框");
    // window.confirm("这是确认框");
    // window.prompt("这是提示框");
    
    
    JavaScript的入口函数：
    <script>
        // 当文档（包含图片,音视频等资源）加载完成  
        window.οnlοad=function(){
            // 执行的代码
            // console.log(document.getElementById("text"));//打印 h2
            // document.write("在文档中输出");
        }
    </script>
    
    <!-- <script>
    // JavaScript的入口函数
    // 代码从上而下加载   防止文档没有加载结束就调用了js代码
    console.log(document.getElementById("text"))
</script> -->

  JavaScript的变量：
  // 字面量  固定的值  1 2 3 4 5 

    
    // 变量  可变的量  容器
    // 变量的声明 var let  
    var a;//声明变量 变量名为a
    console.log(a);
    // 变量赋值  = 
    a=10;
    console.log(a);// 使用a变量
    // 重新给a赋值
    a=20;
    console.log(a);

    // 同时声明并赋值
    var b=100;
    console.log(b);

    // 同时声明多个变量
    var x=10,y=20,z=30;
    console.log(x,y,z);

    // 常量  不可改变的量  const
    // const web21=10000;
    // web21=100000;
    // console.log(web21)
    
JavaScript的变量命名规则：
// 1.不可以使用关键字或保留字命名,不能超过255个字符
    // var break=10;// Unexpected token 'break'
    // 2.不能使用纯数字命名
    // var 2000=10000;//Unexpected number
    // 3.变量以字母,$,_ 为开头 
    // 4.命名尽量语义化
    // 5.驼峰命名 headerWrap
    // 6.以数据类型为开头 sText nPrice oHeader
    // 7.区分大小写

    var a=10;
    var A=20;
    console.log(a);
    console.log(A);

    var str="hello world";
    console.log(str);

/*javascript的关键字
abstract  else    instanceof    super
boolean    enum    int    switch
break    export    interface    synchronized
byte    extends    let    this
case    false    long    throw
catch    final    native    throws
char    finally    new    transient
class    float    null    true
const    for    package    try
continue    function    private    typeof
debugger    goto    protected    var
default    if    public    void
delete    implements    return    volatile
do    import    short    while
double    in    static    with
*/

JavaScirpt的变量申明提升：
  // 08JavaScript变量的声明提升
    // var 有声明提升  提升到所有的代码前面
    // 先声明  后使用
    console.log(a);// undefined  先使用 后生声明
    var a=10;

    console.log(c);// c is not defined  未声明 直接使用
    // var b;
    // console.log("b:",b);
    
JavaScript的数据类型：
 // 值类型
    // Number:数字
    var num=10;
    // String:字符串
    var str1="hello wrold";
    var str2='hello China';
    var str3=`hello Nanjing`;// 反引号 ES6新增的 模板字符串
    // Boolean:布尔值
    var bool1=true;
    var bool2=false;
    // Undefined:未定义
    var un;
    // Null:空
    var kong=null;
    // Symbol:ES6中新增的原始数据类型，表示独一无二的值
    var web21=Symbol("这是web21班");

    // 引用数据类型
    // Object 对象
    var obj={
        name:"张三",
        age:18
    }
    // Array 数组
    var arr=[1,2,"a",{}];
    // Function 函数/方法
    function func(){
        // 方法执行的代码
    }

JavaScript的数据类型判断：
 // 值类型
    // Number:数字
    var num=10;
    console.log(typeof(num));// number
    console.log(typeof num);// number
    // String:字符串
    var str1="hello wrold";
    var str2='hello China';
    var str3=`hello Nanjing`;// 反引号 ES6新增的 模板字符串
    console.log(typeof(str1));// string
    console.log(typeof(str2));// string
    console.log(typeof(str3));// string
    // Boolean:布尔值
    var bool1=true;
    var bool2=false;
    console.log(typeof(bool1));// boolean
    console.log(typeof(bool2));// boolean
    // Undefined:未定义
    var un;
    console.log(typeof(un));// undefined
    // Null:空值  用来清空变量   var a=10; a=null;
    var kong=null;
    console.log(typeof(kong));// object 
    // Symbol:ES6中新增的原始数据类型，表示独一无二的值
    var web21=Symbol("这是web21班");
    console.log(typeof(web21));// symbol

    // 引用数据类型
    // Object 对象
    var obj={
        name:"张三",
        age:18
    }
    console.log(typeof(obj));// object
    // Array 数组
    var arr=[1,2,"a",{}];
    console.log(typeof(arr));// object
    // Function 函数/方法
    function func(){
        // 方法执行的代码
    }
    console.log(typeof(func));// function

    console.log(arr instanceof Array);// true
    console.log(obj instanceof Array);// false 
    console.log(arr instanceof Object);// true
    
JavaScript数据类型的转换：
  var num=10;
    var str="hello";
    var str2="10000";
    var bool1=true;
    var bool2=false;
    var un;
    var nu=null;
    var obj={};
    var arr=[];
    // Number(变量)  将变量转换为数字类型  被转换的值为非数字，返回NaN(Not a Number)不是一个数字
    console.log(Number(str));// NaN 
    console.log(Number(str2));// 10000
    console.log(str2);
    console.log(typeof Number(str2));// number
    console.log(typeof str2);// string
    console.log(typeof Number(str));// number
    // String(变量)  将变量转换为字符串类型
    console.log(String(num));
    console.log(typeof String(num));// string
    console.log(typeof String(bool1));
    console.log(String(arr));// 
    console.log(typeof String(arr));// string
    // Boolean(变量)  将变量转换为布尔值类型  除 0 "" '' null undefined NaN 之外都返回true
    console.log(Boolean(num));// true
    console.log(Boolean(str));// true
    console.log(Boolean(obj));// true 
    console.log(Boolean(arr));// true 
    console.log(Boolean(0));// false
    console.log(Boolean(''));// false
    console.log(Boolean(""));// false
    console.log(Boolean(nu));// false
    console.log(Boolean(un));// false
    console.log(Boolean(NaN));// false

    // parseFloat(变量)  将变量转换为浮点类型(小数)
    console.log(parseFloat("100.111"));
    console.log(parseFloat("a100.111"));// NaN
    console.log(parseFloat("100a.111"));// NaN
    console.log(typeof parseFloat("100.111"));

    // parseInt(变量)  将变量转换为整数类型
    console.log(parseInt("100.911"));
    console.log(parseInt("a100.111"));// NaN
    console.log(parseInt("100a.111"));// NaN
    console.log(typeof parseInt("100.111"));
    
JavaScript数据类型的栈和堆：
var obj={};
    var arr=[];
    
    // Boolean(变量)  将变量转换为布尔值类型  除 0 "" '' null undefined NaN 之外都返回true
    console.log(Boolean(obj));// true 
    console.log(Boolean(arr));// true 
    console.log(Boolean(0));// false
    console.log(Boolean(''));// false
    console.log(Boolean(""));// false