js中的函数、预编译、DOM的引入_js import lib.dom-优快云博客

本文链接：https://blog.youkuaiyun.com/rainy_killer/article/details/88828469

DOM引入

/* 面向对象基于事件点击（单击双击）onclick 滚动条 onscroll
* 聚焦 onfocus 离焦 onblur
* 按下键盘 onkeydown 抬起键盘 onkeyup
*
* 表单提交（默认）onsubmit
*
* */
/*1:点击按钮弹框对象：按钮事件：点击事件函数：弹框 */

window 顶级对象
document 文档对象获取元素的方法

通过id获取元素 document.getElementById()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>何须执手问年华</title>
    <style>
        .dv {

        }
        #btn {

        }

    </style>
</head>
<body>

<button class="btn" id="btn">点我弹窗</button>
<div class="dv">我是div</div>
<script>

    var btn = document.getElementById("btn")
    var dv = document.getElementsByClassName("dv")     /*class默认取到的是数组   id默认取到的是数值*/
    btn.onclick = function () {
        // alert("I Love You")
        dv[0].style.width = "300px"
        dv[0].style.height = "300px"
        dv[0].style.backgroundColor = "blue"
    }

</script>

</body>
</html>

预编译

函数的定义时执行时----》函数执行期的上下文-------》作用域

此时产生一个作用域AO（Activation Object）

创建AO对象
找形参和变量声明，将形参和变量名作为AO属性名值undefined（同名只写一次）
将实参和形参相统一
在函数里找函数声明函数体作为值赋予函数名（AO的属性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>何须执手问年华</title>
</head>
<body>
<script>

var f = 10;
function fn(a) {
    console.log(a); //a(){}
    var a = 123;
    console.log(a) //123
    function a() {} //函数声明
    console.log(a) //123
    var b = function () {} //函数表达式
    console.log(b) //function(){}
    function d() {} //函数声明


}

/*
* AO{
*   a:123 ,
*   b:function () {},
*   d:d(){}
*
*
*
* }
* Global  Object fn 执行的全局域
* GO {
*    f:10,
*    fn:function(){}
*
* }
*
*
* */
fn(1);




</script>
</body>
</html>

函数

/*
* 函数：作为js的第一等公民
* 1：定义函数首+函数体并不占用内存
* function 函数名(形参){
*
* 函数体;
* return 结果 ;
* 如果你没写返回值 return undefined;
*
*
*
* }
* 2：语法
* 两种方法
* 1：函数声明
* 2：表达式法
*
*
* 3：返回值参数
* 4：调用（自己调用自己—》递归）
*
*
* */

/1：函数声明*/

js 全局的域 window 浏览器对象 > 文档树 document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
</head>
<body>
<script>

    var sum = 0;//显示的全局变量   生命周期： 浏览器打开 浏览器关闭就消失
    function add(a) {

        //两个数求和  输入其实就是你必须要用到的变量  输出：计算结果


        //函数遇到第一个return 函数立即结束
       /* var sum = 0; */ //局部变量 生命周期：函数开始调用 函数调用结束 销毁


        sum= 0;// 隐式全局变量  ===> window.sum
        for(var i =0;i<arguments.length;i++){

            sum+=arguments[i];
        }

        return sum ;



    }
    var s = add;
    var c = s(1,2,3,4,5);  // arguments:[1,2,3,4,5]
    console.log(c);

   /* console.log(c)

    console.log('add代表'+add)  // add是函数名 其实就是指针 保存的是函数在堆段的存储地址



    // 实参对象  arguments 保存实参数据 数据类型： 数组



    /*******2：函数表达式  利用变量 保存匿名函数地址*********/

    var sub = function (a,b) {
        return a-b;
    }

   var a = sub ;


    console.log( a(10,7));


    function a() {

    }
    function b() {

    }

    a(b);  // ?











</script>
</body>
</html>