JS学习笔记

 <script>
    window.onload = function(){
        var aInp = document.getElementsByTagName('input');
        var oSum = document.getElementsByTagName('span')[0];
        var oBtn = document.getElementsByTagName('button')[0];

        for (i = 0; i < aInp.length; i++)
        {
            aInp[i].onkeyup = function ()
            {
                this.value = this.value.replace(/[^d]/,"")
                // 限制输入框只能输入数字。 
                // 再看一遍正则的视频，以及replace用法。
            };
        };

        oBtn.onclick = function(){
            var num1 = parseInt(aInp[0].value);
            var num2 = parseInt(aInp[1].value);

            (aInp[0].value == "" || aInp[1].value == "") ?   //  || 或运算符。 只要其中一个条件成立，就alert
            alert("请输入数字！") :
            oSum.innerHTML = num1 + num2;

            // 这种for循环写法不合理，会导致当2个输入框都为空时，alert两次。
            // for(let i=0; i<aInp.length; i++){
            //     if(aInp[i].value)
            //     {
            //         oSum.innerHTML = num1 + num2; 
            //     }else{
            //         alert('请输入数字');
            // };
        };
    };
    </script>

点击按钮自加1的练习

 <script>
    window.onload = function()
    {
        var oBtn = document.getElementsByTagName('button')[0];

        oBtn.onclick = function()
        {
            var oNum = parseInt(oBtn.innerHTML);
            oNum += 1;

            oBtn.innerHTML = oNum;
            alert(oBtn.innerHTML);
        };

        // 示例程序的写法：
        // aBtn.onclick = function ()
        // {
        //     aBtn.value = ++i;
        //     alert(i)
        // };
        
        // 在赋值时区别 i++  和 ++i
        // y=i++   y的值为i (先引用，后运算）
        // y=++i   y的值为i+1的结果 （先运算，后引用）
    };
    </script>