基础JavaScript练习（一）

任务目的

• 学习与实践JavaScript的基本语法、语言特性
• 初步了解JavaScript的事件是什么
• 初步了解JavaScript中的DOM是什么

任务描述

• 如图，模拟一个队列，队列的每个元素是一个数字，初始队列为空
• 有一个input输入框，以及4个操作按钮
  • 点击"左侧入"，将input中输入的数字从左侧插入队列中；
  • 点击"右侧入"，将input中输入的数字从右侧插入队列中；
  • 点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；
  • 点击"右侧出"，读取并删除队列又侧第一个元素，并弹窗显示元素中数值；
• 点击队列中任何一个元素，则该元素会被从队列中删除

任务注意事项

• 实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 示例图仅为参考，不需要完全一致
• 需要考虑数字输入的合法性
• 建议不使用任何第三方库、框架

 

 

任务完成与总结：

还是一脸的懵Zzzz

//事件绑定函数，兼容浏览器差异
function addEvent(element, event, listener) {
    if (element.addEventListener) {
        element.addEventListener(event, listener, false);
    }
    else if (element.attachEvent) {
        element.attachEvent("on" + event, listener);
    }
    else {
        element["on" + event] = listener;
    }
}

//遍历数组的方法，针对数组中每一个元素执行fn函数，并将数组索引和元素作为参数传递，后面用
function each(arr, fn) {
    for (var cur = 0; cur < arr.length; cur++) {
        fn(arr[cur], cur);
    }
}

window.onload = function() {
    var container = document.getElementById("container");
    var buttonList = document.getElementsByTagName("input");
    //定义队列的对象
    var queue = {
        str: [],
        
        leftPush: function(num) {
            this.str.unshift(num);
            this.paint();
        },
        
        rightPush: function(num) {
            this.str.push(num);
            this.paint();
        },
        
        isEmpty: function() {
            return (this.str.length == 0);
        },
        
        leftPop: function() {
            if (!this.isEmpty()) {
                alert(this.str.shift());
                this.paint();
            }
            else {
                alert("The queue is already empty!");
            }
        },
        
        rightPop: function() {
            if (!this.isEmpty()) {
                alert(this.str.pop());
                this.paint();
            }
            else {
                alert("The queue is already empty!");
            }
        },
        
        paint: function() {
            var str = "";
            each(this.str, function(item){str += ("<div>" + parseInt(item) + "</div>")});
            container.innerHTML = str;
            addDivDelEvent();
        },
        
        deleteID: function(id) {
            console.log(id);
            this.str.splice(id, 1);
            this.paint();
        }
        
    }
    
    //为container中的每个div绑定删除函数
    function addDivDelEvent() {
        for (var cur = 0; cur < container.childNodes.length; cur++) {
            
            //这里要使用闭包，否则永远绑定到指定div上的delete函数的参数永远等于跳出时的cur值(length);
            addEvent(container.childNodes[cur], "click", function(cur) {
                return function(){return queue.deleteID(cur)};
            }(cur));
        }
    }
    
    //为4个按钮绑定函数
    addEvent(buttonList[1], "click", function() {
        var input = buttonList[0].value;
        if ((/^[0-9]+$/).test(input)) {
            queue.leftPush(input);
        }
        else {
            alert("Please enter an interger!");
        }
    });
    addEvent(buttonList[2], "click", function() {
        var input = buttonList[0].value;
        if ((/^[0-9]+$/).test(input)) {
            queue.rightPush(input);
        }
        else {
            alert("Please enter an interger!");
        }
    });
    addEvent(buttonList[3], "click", function(){queue.leftPop()});
    addEvent(buttonList[4], "click", function(){queue.rightPop()});
}

　　

效果展示

 

先保存着，日后再看再研究。。。