08-函数, 09-伪数组 argument, 10-关于DOM的事件操作

函数：就是将一些语句进行封装，然后通过调用的形式，执行这些语句。

函数的作用：

• 将大量重复的语句写在函数里，以后需要这些语句的时候，可以直接调用函数，避免重复劳动。

• 简化编程，让编程模块化。

        console.log("hello world");
        sayHello();

        function sayHello(){
            console.log("hello");
            console.log("hello world");
        };

第一步: 函数的定义

函数定义的语法:

function 函数名() {

}

解释如下：

• function：是一个关键字。中文是“函数”、“功能”。

• 函数名字：命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。

• 参数：后面有一对小括号，里面是放参数用的。

• 大括号里面，是这个函数的语句。

第二部: 函数的调用

函数调用的语法:

函数名字();

函数的参数: 形参和实参

函数的参数包括形参和实参

注意: 实际参数和形参参数的个数,要相同

例子:

        sum(3,4);
        sum("3",4);
        sum("Hello","World");

        //函数：求和
        function sum(a, b) {
            console.log(a + b);
        }

函数的返回值

例子:

       console.log(sum(3, 4));

        //函数：求和
        function sum(a, b) {
            return a + b;
        }

 

09-伪数组arguments

arguments代表的是实参.有个讲究的地方是: arguments只在函数中使用

（1）返回函数实参的个数：arguments.length

例子：

    fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

    function fn(a,b,c) {
        console.log(arguments);
        console.log(fn.length);         //获取形参的个数
        console.log(arguments.length);  //获取实参的个数

        console.log("----------------");
    }

之所以说arguments是伪数组,是因为: arguments可以修改元素,但不能该改变数组的长短

   fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

    function fn(a,b) {
        arguments[0] = 99;  //将实参的第一个数改为99
        arguments.push(8);  //此方法不通过，因为无法增加元素
    }

清空数组的几种方式:

   var array = [1,2,3,4,5,6];

    array.splice(0);      //方式1：删除数组中所有项目
    array.length = 0;     //方式1：length属性可以赋值，在其它语言中length是只读
    array = [];           //方式3：推荐

一: JavaScript的组成

JavaScript基础分为三个部分：

• ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

• DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

• BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

二: 事件

JS是以事件驱动为核心的一门语言

事件的三要素

事件的三要素: 事件源, 事件, 事件驱动程序

比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。

再比如，网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了。

于是我们可以总结出：谁引发的后续事件，谁就是事件源。

总结如下:

　　事件源: 引发后续事件的html标签

　　事件: js已经定义好了

　　事件驱动程序: 对样式和html的操作.也就是DOM.

代码书写步骤如下:(重要)

　　1, 获取事件源: document.getElementById("box"); 

　　2,绑定事件: 事件源box,事件onclick = function(){事件驱动程序};

　　3,书写事件驱动程序; 关于DOM的操作

代码举例:

//1, 获取事件源
        var div = document.getElementsByClassName("box")[0];
        //2,绑定事件
        div.onclick = function(){
            //3 书写事件驱动程序
            div.style.backgroundColor = "green";
        };

常见事件如下:

下面针对这事件的三要素,进行分别介绍.

1,获取事件源的方式(DOM节点的获取)

获取事件源的常见方式如下:

var div1 = document.getElementById("box"); // 方式一: 通过id获取单个标签

var arr1 = document.getElementsByClassName("hehe"); // 方式二: 通过类名获得

var arr2 = document.getElementsByTagName("div");  //方式三: 通过  标签名简介

2,绑定事件的方式

方式一: 直接绑定匿名函数

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第一种方式
    div1.onclick = function () {
        alert("我是弹出的内容");
    }
</script>

方式二: 先单独定义函数,在绑定

 <div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第二种方式
    div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。
    //单独定义函数
    function fn() {
        alert("我是弹出的内容");
    }
</script>

注意上方代码的注释。绑定的时候，是写fn，不是写fn()。fn代表的是整个函数，而fn()代表的是返回值。

方式三: 行内绑定

<div id="box1" onclick="fn()"></div>

<script type="text/javascript">

    function fn() {
        alert("我是弹出的内容");
    }

</script>

注意第一行代码，绑定时，是写的"fn()"，不是写的"fn"。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。

3,事件驱动程序

        var div = document.getElementById("box");
        var isShow = true;

        div.onclick = function(){
            if(isShow){
                div.style.backgroundColor = "green";
                div.style.width = "200px";
                div.style.height = '200px';
                isShow = false;
            }else{
                div.style.backgroundColor = "red";
                div.style.width = '100px';
                div.style.height = '100px';
                isShow = true;
            }
        };

上方代码的注意事项：

• 在js里写属性值时，要用引号
• 在js里写属性名时，是backgroundColor，不是CSS里面的background-Color。记得所有的像css属性的text-*，line-*、backgroun-*等在js中都写成驼峰

onload事件

当页面加载(文本和图片)完毕的时候,触发onload事件

举例:

<script type="text/javascript">
    window.onload = function () {
        console.log("小马哥");  //等页面加载完毕时，打印字符串
    }
</script>

有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。

建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。

事件案例

关闭顶部广告栏

    <style>
        #box{
            width: 100%;
            height: 100px;
            background-color: red;
        }
        .ad{
            width: 1226px;
            height: 100px;
            background-color: green;
            margin: 0 auto;
            position: relative;
        }
        .ad a{
            position: absolute;
            top: 10px;
            right: 10px;
            text-decoration: none;
        }
        .hiden{
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="ad">
            <a href="#">X</a>
        </div>
    </div>
    <script>
        var adDiv = document.getElementsByClassName("ad")[0];
        var shutDown = document.getElementsByTagName("a")[0];
        //1:
        shutDown.onclick = function(){
            adDiv.style.display = 'none';
        };

        //2:
        shutDown.onclick = function(){
            adDiv.className += " hiden"
        }
    </script>

2,要求实现效果: 当数百哦悬停在img上时, 要更换为另外一张图片,鼠标离开时,还原为本来的图片.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .picture{
            width: 200px;
        }
        .picture img{
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="picture">
        <img id="a" src="timg.jpg" alt="#">
    </div>
    <script>
        var pictureS = document.getElementById("a");

        pictureS.onmouseover = function(){
            pictureS.src = "timg (1).jpg";
        }
        pictureS.onmouseout = function(){
            pictureS.src = "timg.jpg"
        }
    </script>
</body>
</html>