JavaScript函数基础+购物车小计计算案例

1.认识函数

为了给网页的界面添加特殊效果，可以使用函数操作页面元素，在生活中，函数类似于人的行为过程而在代码，中，函数描述的就是一段可以执行的代码块

2.函数的声明和调用

函数声明的语法（常用的两种）

function 函数名称() {
    函数体
}

var 函数名称 = function () {
    函数体
}

函数的调用

函数名();

函数的优点：函数的出现，可以将一些可以重复执行的代码封装起来，在需要的地方通过函数名称直接调用，提高了代码的复用性

案例：使用函数封装1-100的整数的和

function counter() {
    var sum = 0;
    for(var i=1;i<=100;i++) {
        sum += i;
    }
    console.log(sum);  
}
counter();

3.函数的参数

函数的参数就是函数在执行时需要的资源数据，分为形式参数（形参）和实际参数（实参）

形参就是形式上需要的数据（不是具体数据），实参就是函数在被调用执行时，传递给函数的具体数据

function 函数名称(形参) {
    函数体
}

函数名(实参);

案例：使用函数封装m-n的整数的和

function counter(m,n) {
    var sum = 0;
    for(var i=m;i<=n;i++) {
        sum += i;
    }
    console.log(sum);  
}
counter(50,100);

4.参数的数据类型

JavaScript·语法中，参数本身就是变量，其可以是任意一个基本或者是复杂的数据类型

注：null和undefined语法成眠表示无效数据，但是在项目实际开发中，可以通过变量中是否有null或者undefined来判断函数是否接受到数据

案例：通过undefined无效数据的特点，给函数的参数添加默认数据

function counter(m,n) {
    m = m || 100;
    n = n || 200;
    var sum = 0;
    for(var i=m;i<=n;i++) {
        sum += i;
    }
    console.log(sum);  
}
counter();

5.作用域、预解析

变量作用的范围称为作用域，分别为全局作用域和局部作用域

全局变量参与的作用域为全局作用域，局部变量参与的作用域为局部作用域

全局变量：声明在函数外部的变量，当前文件中所有位置都可以访问到

局部变量：生命在函数内部的变量，只能被当前函数使用，函数外部无法使用变量

与解析即在变量声明之后，会在某个作用域中进行与解析，也称为变量提升

var fn = '全局变量';
function fn() {
    console.log(fn);
    var fn = '局部变量';   
}
fn();

输出结果应为undefind，变量在访问时候遵循就近原则，找到距离使用变量最近的声明位置，获取和使用变量的数据

6.函数返回值

函数的返回值本质上描述了行为执行的结果，如果函数的外部需要使用这个结果数据，就需要函数内部添加返回结果的代码！返回结果的代码就是函数的返回值

return关键字：return关键字只能出现在函数中，表示函数的返回结果，函数内部return一旦执行，函数就会立即结束

return后面可以添加任何数据，便是函数执行结束返回的数据；也可以不添加数据，等价于return undefined

function counter(m,n) {
    m = m || 100;
    n = n || 200;
    var sum = 0;
    for(var i=m;i<=n;i++) {
        sum += i;
    }
    return sum;
     
}
var ret = counter(50,100);
console.log(ret);

案例：购物车小计计算

实现思路：获取需要操作的元素，通过for循环对按钮添加点击事件，并为所有的点击事件添加自定义属性index，通过index对应按钮的点击来操作按钮所在行内的所有需要操作的数据

 JavaScript代码

var less = document.querySelectorAll('.less');
var more = document.querySelectorAll('.more');
var total = document.querySelectorAll('.total');
var count = document.querySelectorAll('.count');
var price = document.querySelectorAll('.price');
var em = document.querySelectorAll('em')



for (var i = 0; i < less.length; i++) {
    less[i].index = i;

    less[i].addEventListener('click', function () {
        var h = parseInt(em[this.index].innerHTML);
        if (h == 0) {
            less[this.index].style.backgroundColor = 'red';
        } else {
            var a = parseInt(em[this.index].innerHTML);
            a--;
            em[this.index].innerHTML = a;

            var c = parseInt(price[this.index].innerHTML);
            total[this.index].innerHTML = a * c;
        }


    })
}
for (var i = 0; i < more.length; i++) {

    more[i].index = i;
    more[i].addEventListener('click', function () {
        less[this.index].style.backgroundColor = 'grey';
        var b = parseInt(em[this.index].innerHTML);
        b++;
        em[this.index].innerHTML = b;
        var d = parseInt(price[this.index].innerHTML);
        total[this.index].innerHTML = b * d;
    })
}

html+css代码

<style>
        * {
            margin: 0;
            padding: 0;
            font-size: 23px;
            list-style: none;
        }

        .box {
            border: 2px solid;
            width: 600px;
            margin: 100px auto;
            padding: 20px 0;

        }

        span {
            display: inline-block;
            width: 20%;
            text-align: center;
        }

        i,
        em {
            font-style: normal;
        }

        p {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: stretch;
        }

        i {
            display: inline-block;
            background: grey;
            width: 25px;
            height: 25px;
            cursor: pointer;
            text-align: center;
            line-height: 25px;
            color: white;

        }

        i:hover {
            background: #ccc;
        }

        li {
            margin: 15px;
        }

        em {
            display: inline-block;
            width: 20px;
            text-align: center;
        }
    </style>


<body>
    <div class="box">
        <ul>
            <li>
                <p>
                    <span>商品名称</span>
                    <span>购买数量</span>
                    <span>商品单价</span>
                    <span>小计金额</span>
                </p>
            </li>
            <li>
                <p>
                    <span class="goodsname">
                        苹果4
                    </span>
                    <span class="count">
                        <i class="less">-</i>
                        <em>0</em>
                        <i class="more">+</i>
                    </span>
                    <span class="price">
                        1368
                    </span>
                    <span class="total">
                        0
                    </span>
                </p>
            </li>
            <li>
                <p>
                    <span class="goodsname">
                        苹果5
                    </span>
                    <span class="count">
                        <i class="less">-</i>
                        <em>0</em>
                        <i class="more">+</i>
                    </span>
                    <span class="price">
                        2990
                    </span>
                    <span class="total">
                        0
                    </span>
                </p>
            </li>
            <li>
                <p>
                    <span class="goodsname">
                        苹果6
                    </span>
                    <span class="count">
                        <i class="less">-</i>
                        <em>0</em>
                        <i class="more">+</i>
                    </span>
                    <span class="price">
                        3990
                    </span>
                    <span class="total">
                        0
                    </span>
                </p>
            </li>
            <li>
                <p>
                    <span class="goodsname">
                        苹果7
                    </span>
                    <span class="count">
                        <i class="less">-</i>
                        <em>0</em>
                        <i class="more">+</i>
                    </span>
                    <span class="price">
                        5666
                    </span>
                    <span class="total">
                        0
                    </span>
                </p>
            </li>
            <li>
                <p>
                    <span class="goodsname">
                        苹果8
                    </span>
                    <span class="count">
                        <i class="less">-</i>
                        <em>0</em>
                        <i class="more">+</i>
                    </span>
                    <span class="price">
                        8999
                    </span>
                    <span class="total">
                        0
                    </span>
                </p>
            </li>

        </ul>
        <div>

        </div>
    </div>
    <script src="./homework.js"></script>