倒计时、引用类型、作用域、window的加载方法

倒计时

<script>
    /*
    获取固定日期的时间对象,必须在 Date()中传入参数
    Date(年,月,日,时,分,秒); 此种方式注意 月份需要-1
    Date('月 日 年 时:分:秒')
    Date('月 日,年 时:分:秒')
    */
    let t1 = new Date(2023, 7, 28, 0, 0, 0);
    console.log(t1);

    let t2 = new Date('8 28 2023 0:0:0');
    console.log(t2);

    let t3 = new Date('8 28,2023 0:0:0');
    console.log(t3);

    function showDate() {
        // 获取当前日期对象
        let now = new Date();
        console.log(now);
        // 两个日期对象相减，就得到了两个日期对象相差的时间戳(毫秒数)
        let time = t3 - now;
        console.log(time);
        let day= Math.floor( time/1000/60/60/24 );
        console.log(day);
        let hour=Math.floor( time%86400000/1000/60/60 );
        console.log(hour);
        let min=Math.floor( time%86400000/1000/60%60 );
        console.log(min);
        let sec=Math.floor( time%86400000/1000%60 );
        console.log(sec);

        msg.innerHTML=`距离放假还有${day}天${hour}小时${min}分钟${sec}秒`
    };
    showDate();
    // 设置计时器
    setInterval(showDate,1000);
</script>

引用类型

<script>
/*
基本数据类型
number boolean string undefined object Null

Ecmascript 规定变量有两种不同的数据类型: 基本类型 和 引用类型
基本类型 包括 number boolean string undefined
引用类型 包括 数组和对象

也有其他的不同分类 原始类型 和 对象类型
或者 拥有方法类型 和 没有方法类型
可变类型 和 不可变类型

以上的这些叫法都是依据两种类型特点来命名的
1.基本类型
    基本类型的特点
        基本类型的值 是 不可变的
        基本类型的比较是 值的比较
        基本类型的值 存在于 栈区中
2.引用类型
    引用类型的特点
        引用类型的值 是 可变的
        引用类型的比较是 引用的比较
        引用类型的值 存在于 栈内存和堆内存中

栈: 指的是栈内存，存放的数据是先进后出，栈自动分配内存空间，也会自动释放内存空间
堆: 指的是堆内存，动态分配内存空间，大小不确定，也不会自动释放内存空间，先进先出

*/
let arr=[1,2,3,4];
let arr1=arr; //此时 arr1 指向 堆内存中的 数组空间

arr1[1]='七夕快乐';
arr1[2]='说散就散';

console.log(arr);

let arr2=arr.concat(); // 拷贝
arr2[2]='体面';
console.log(arr);

let arr3=arr.slice(); // 拷贝
arr3[2]='移情别恋';
console.log( arr );

let a={m:1};
let b=a;
// a.x=a={n:1}; 
a.x = {n:1}
a = {n:1}
/*
 由于. 操作的权重高于联=，因此先算 a.x = {n:1}
 此时a和b 指向内存中的同一个空间, 因此 b={ m:1,x:{n:1} } 
 然后在计算 a = {n:1}, 这样之前声明的a 会被直接释放，只留下一个新的 a={n:1}

 综上，计算结果是
 a = {n:1}
 b = {m:1,
        x:{n:1}
    }
 */

console.log(a.x); // undefined
console.log(b.x); // {n:1}

// 声明一个对象
let obj1={};
// 给对象添加属性
obj1.name ='牛郎';
obj1.act =function(){
    console.log('偷织女的衣服');
}
obj1.box={
    abc:'老黄牛',
};

console.log(obj1);
console.log(obj1.box.abc);
</script>

作用域

<script>
/*
作用域
指的是 变量 和 函数的 生效范围
在 Ecmascript5及其之前的作用域是函数作用域，不是块级作用域

根据作用域把变量和函数分为两种
1. 全局变量和全局函数
    全局变量和全局函数 的 生命周期和当前页面一样
2. 局部变量和局部函数
    包含局部变量的函数，只要在运行以后，该局部变量就会被js的垃圾回收机制回收

变量的声明(var) 和 函数的定义都会被前置,他们会被前置到当前作用域的最前面
注意: var 声明会被前置 let 不会

*/
let btn=document.getElementById('btn')
let num=document.getElementById('num')

// console.log(n); // 报错，let 声明的变量无法前置

let n=10; // n 是全局变量

btn.onclick= function(){
    // let n=10; // n是局部变量
    n++;
    num.innerHTML=n;

};


/*
js 允许同名函数，但是在调用的时候，后面的函数，会覆盖前面的函数
*/
function show(){
    console.log('我爱你');
}
show();
function show(){
    console.log('七夕快乐');
}
show();
/*
js中的原则，在js中不能访问函数的局部变量，然而在一个函数中，可以访问
外部的全局变量，可以简单理解为外面看不到里面，里面看得到外面
*/
let str='我应该在车底';
function du(){
    let str1=' 爱情不是你想买 ';
    console.log( str );
    str2='你为何想着别人';
}
du();
// 全局不能访问局部变量
// console.log( str1 );

/*
当函数的内部定义变量的时候，如果没有声明变量的关键字，此时的变量就相当于是一个全局变量(前提是没有局部变量和当前变量重名), 如果添加声明变量的关键字，他就是一个局部变量
*/
console.log( str2 );
// 全局变量和全局函数实质上都是声明在 window对象上的属性和方法
console.log( window.str2 );
window.show();

/*
函数内部变量的 就近原则: 在函数内部会优先选择这个作用域内部的变量，如果当前作用域中没有该变量，就会去他上一级作用域中去寻找，以此类推，直到全局作用域中。如果全局作用域中没有该变量，则抛出错误
*/

function run(){
    let str='你身上有她的香水味';
    function see(){
        str ='后来, 我总算学会了如何去爱';
        console.log( str );
    }
    see();
}
run();
console.log(str3);
</script>
<!-- 
如果有多个script标签，则会按照浏览器的解析方式，下面的script中可
以使用上面的script 的全局变量和全局函数，然而在上面的script中，
不能使用 下面的变量和方法
 -->
<script>
let str3 = '孤单的人那么多';
console.log(str);
show();
</script>

window的加载方法

<script>
        /*
        window.onload 是当前window对象被加载完毕之后，才执行他所绑定的方法，window对象中主要包含 页面上的所有资源，包括视频、音频、图片、文本、dom结构
        也就是说所有资源都加载完之后，window.onload才执行
        */
        window.onload=function(){
        // 如果单纯的操作元素，则会报错，因为在加载该script标签的时候，dom结构还没有加载完毕，在此处无法找到 id=wp的元素
        let wp=document.getElementById('wp');
        wp.style=`
                width:200px;
                height:200px;
                background:#04be02;
            `;
        };
    </script>
</head>
<body>
    <div id="wp"></div>
</body>
</html>
<script>
    /*
var a = 10;
function fn1(){
    console.log(a);
}
fn1();

function fn2(a){
    console.log(a);
}
fn2();
*/

// var a=10;
// function fn3(){
//     // var a;
//     console.log(a);
//     var a=20;
// }
// fn3();
// console.log(a);

let a = b = 10;

(function(){
 let a = b = 20;
})();
console.log(a); // 10
console.log(b); // 20 b在立即执行函数中，由于前面没有设置声明变量的关键字，因此是一个全局变量

var name = 'World'
;(function () {
    console.log( name );
  if (typeof name === 'undefined') {
    var name = "Jack"
    console.info('Goodbye ' + name)
  } else {
    console.info('Hello ' + name)
  }
})()
</script>```