<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap{
            width: 100px;
            height: 100px;
            background-color: #3ea3ff;
        }
        #btn{
            width: 100px;
            height: 100px;
            background-color: lawngreen;
        }
    </style>
</head>
<body>
<div id="wrap"></div>
<div id="btn"></div>
<script>
let goudan = document.getElementById('wrap');
let dachui = document.getElementById('btn');
goudan.onclick = function () {
    goudan.innerHTML = 'wrap被点击了';
};
dachui.onclick = function () {
    dachui.innerHTML = 'BTN被点击了';
};
</script>
<!--
js版本问题    ECMA = JavaScript
Es5
    var
    function
Es6
    let
    const
    function
要么全部用Es5的规则定义变量,要么用Es6不可混
定义变量的时候吧所有变量名统一放在前面

关于变量名的规定
    -不能使用关键词/保留词
    -尽量不能使用js里面已经有意义的变量名
    -组成名字的字符最好是数字/字母/_/$四种并且不以数字开头
    -见名知意
数据类型
    number 数字
    string 字符串
    boolean 布尔值
    undefined 未定义
    null 空
    Symbol 唯一
    object
    [] 数组
    {} 对象
    let x = 10-vue-router; 数字
    let x = '10-vue-router'; 字符串
    let x = "10-vue-router";
    let x = "true";
    let x = `456`; 模板字符串 Es6中心的字符串定义方式
    let x = true; 布尔值只有这2种
    let x = false;
    let x;
    let x = undefined;
    let x = null;
    ...一系列代码之后
    x = document.getElementById('box');
    let x = Symbol(456); ES6新的独一无二的
    let x = Symbol(456); 这2个不同,新定义的不可能和以前任何一个一样
    let x = [10-vue-router,true,10-vue-router]; 数组  对象的一种
    let y = ['a','卡','10-vue-router'];
    console.log( y[2] ); >> 10-vue-router 从0开始
    let x =[
    10-vue-router
    [
        'aa',
        'bb'
    ]
    ];
    console.log(x[1][0]) >> aa
    对象
    let x ={
        name:'zy',
        age:20,
        marry:true
    };
    console.log(x.age);

-->
</body>
</html>