Div Deque?

**BlaineSch** · 11-09-2009 04:42 PM

So I was trying to make something for a project and though I might need a deque for the project I was working on. Not knowing a ton about OOP inside of JS or how various things pass (reference or copy) etc I thought this would be a realistic approach for what I needed. When I got done I realized this would be a great tutorial since it was so easy to make.

What is a deque? A deque is a double ended que. Most of you are familiar with it, but for those who are not, a stack is like a stack of plates. You put one plate on the top, and when you want the plate again you pick it up. First in last out. A deque is double ended so its kinda like those plates are hovering in the air, and you can put plates on the bottom and on the top and take one off from either end as well. If that was a horrible explanation click here.

The idea behind this is having a div, and inside of that div I will use JS to move around there.

So lets start off making a div, set the id to something we can remember "deque" seems appropriate to me. Add a input box and submit box to help us add things as well. I put an id on the text box as well since we will need the value.

HTML Code:

<input type="text" value="" id="insert">
<input type="submit" value="Push!">
<!-- Nodes here! -->
<div id="deque"></div>

To make this work should not be too hard, basically get the deque by the id, create a new div and add the content inside of it (innerHTML) then use javascripts "appendChild" to insert it into the bottom of the list.

Code:


<script>
    function Push() {
        //declare variables
        var mydeque = document.getElementById('deque'); //gets the deque
        var nodevalue = document.getElementById('insert'); //gets the input box
        var mynode = document.createElement('div'); //creates a div
        
        //insert
        mynode.innerHTML = nodevalue.value; //sets the value
            nodevalue.value = ""; //resets input box
        mydeque.appendChild(mynode);
    }
</script>
<input type="text" value="" id="insert">
<input type="submit" onclick="Push();" value="Push!">
<!-- Nodes here! -->
<div id="deque"></div>

Now we need to be able to add from the top, so we going to basically do the same approach, add a dropdown so we know which side to add too, instead of appending were going to use "insertBefore" in javascript to add them.

Code:


<script>
    function Push() {
        //declare variables
        var order = document.getElementById('side'); //gets the oder 0 = first element, 1 = second
        var mydeque = document.getElementById('deque'); //gets the deque
        var nodevalue = document.getElementById('insert'); //gets the input box
        var mynode = document.createElement('div'); //creates a div
        
        //insert
        mynode.innerHTML = nodevalue.value; //sets the value
            nodevalue.value = ""; //resets input box
        if(order.options.selectedIndex==0) {
            mydeque.insertBefore(mynode, mydeque.firstChild);
        } else {
            mydeque.appendChild(mynode);
        }
    }
</script>
<input type="text" value="" id="insert">
    <select id="side">
        <option>Top</option>
        <option>Bottom</option>
    </select>
<input type="submit" onclick="Push();" value="Push!">
<!-- Nodes here! -->
<div id="deque"></div>

Now to get values! This is really easy to do, were going to alert the value, and then remove the child using "removeChild" and with that use "firstChild" or "lastChild" so really simple.

Code:


<script>
    function pop(id) {
        if(id==0) {
            //top
            var deque = document.getElementById('deque');
            alert(deque.firstChild.innerHTML);
            deque.removeChild(deque.firstChild);
        } else {
            //bottom
            var deque = document.getElementById('deque');
            alert(deque.lastChild.innerHTML);
            deque.removeChild(deque.lastChild);
        }
    }
</script>

And the finished script, I added a little color to make it easier on the eyes!

Code:


<html>
<head>
<title>Div Deque!</title>
<style>
    div.glow0 {
        border-left:4px solid #952fa4;
        padding: 0px 0px 0px 4px;
    }
    div.glow1 {
        border-left:4px solid #40af0e;
        padding: 0px 0px 0px 4px;
    }
    div.glow2 {
        border-left:4px solid #3d769e;
        padding: 0px 0px 0px 4px;
    }
</style>
<script>
    var i = 0;
    function Push() {
        //declare variables
        var order = document.getElementById('side');
        var mydeque = document.getElementById('deque');
        var nodevalue = document.getElementById('insert');
        var mynode = document.createElement('div');
        
        //insert
        mynode.setAttribute('class', 'glow'+ (i%3));
        mynode.innerHTML = nodevalue.value;
            nodevalue.value = "";
        if(order.options.selectedIndex==0) {
            mydeque.insertBefore(mynode, mydeque.firstChild);
        } else {
            mydeque.appendChild(mynode);
        }
        i++;
    }
    function pop(id) {
        if(id==0) {
            //top
            var deque = document.getElementById('deque');
            alert(deque.firstChild.innerHTML);
            deque.removeChild(deque.firstChild);
        } else {
            //bottom
            var deque = document.getElementById('deque');
            alert(deque.lastChild.innerHTML);
            deque.removeChild(deque.lastChild);
        }
    }
</script>
</head>
<body>
<a href="javascript:pop(0)">Pop from Top!</a> | <a href="javascript:pop(1)">Pop from Bottom!</a><br />
<input type="text" value="" id="insert">
    <select id="side">
        <option>Top</option>
        <option>Bottom</option>
    </select>
<input type="submit" onclick="Push();" value="Push!">
<div id="deque"></div>
</body>
</html>