Learning JavaScript

Posted by Justin Lillico on Fri 24 November 2017

I know what you're thinking... Clearly, I should also be learning how to use software like Adobe Illustrator and not rely so heavily on MS Paint. But hey, I know it and have been using it for years, seems to do most things I need it to!

So this week I have been getting well stuck into developing this website. They gave me the task of creating a method of arranging thumbnails by date, views and type. This proved to be just the level of challenge I needed.

After sitting in front of my computer for nearly two days researching the things I could do using the JQuery library and vanilla JavaScript, I built a few functions to take care of the job.


<?php

    echo "var js_views_dates = [";
    for ($i = 0; $i < sizeof($articles_info); $i++) {
        echo " [ " . $articles_info[$i][6] . ", " . strtotime($articles_info[$i][7]) . "] ,";
    }
    echo "];";


?>

First, I converted the existing array containing the views and dates I needed to know into a JavaScript array. I found a few ways to do this but they were all to complex for me at this level so I came up with this method on my own. Basically just writes the JS on the fly by echoing strings. Pretty simple, but effective.

I won't bore you with the event listeners. I used Jquery for those. Let's skip to the functions I called AFTER the document was ready...


//Get the elements.
parent = document.getElementById("article_box").children;

//Here, we combine the object in its original form along with the views and date gathered from the php.
//0 : views
//1 : dates
for (var i = 0; i < js_views_dates.length; i++){
    js_article_info[i] = [parent[i], js_views_dates[i][0], js_views_dates[i][1]];
}

//This preserves the original order of the articles
original_order = js_article_info.slice();

So here I get the elements, attach them to the views and dates I got before and save the list as it currently is. I use this when the user chooses to reset from custom arrangements.


function setupOrder(original_array, order_by, high_low){

    //This is a sort function that arranges the array by the first dimention, in numeric lowest to highest order
    original_array.sort(function(a, b){
        if (a[order_by] === b[order_by]) {
            return 0;
        } else {
            return (a[order_by] < b[order_by]) ? -1 : 1;
        }
    });

    if(high_low){ 
        original_array.reverse(); 
    }

So I learned what the sort() function did and how to get it to do my bidding. I feel like this is a function I may end up taking advantage of a lot. This is called when the user chooses the arrangement they want. It sets the order of the list based on an integer value representing their choice.


function updateArticles(order){

    //This while loop simply removes the contents of the parent div by ID.
    while (document.getElementById("article_box").hasChildNodes()) {
        document.getElementById("article_box").removeChild(document.getElementById("article_box").lastChild);
    }

    //This for loop appends the objects from start to finish of the new array.
    for (var i = 0; i < order.length; i++){
        document.getElementById("article_box").appendChild(order[i][0]);
    }
}

Finally, this function is called after setupOrder() to update the elements on the page based on the new information.


Once I had these functions built, the rest of the logic was only a line or two in the event listeners. I feel like it was efficient, although I'm sure there are many other methods and this is far from the most efficient.