Gator.js a micro event handling framework

I’ve had a look at gator.js, it’s useful because it’s very a lightweight way of handling events on page elements. Quick demo below:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Gator demo</title>
      <script type="text/javascript" src="gator.min.js"></script>
</head>
<body>
     <table id="mytable">
        <tr>
            <td>A</td>
            <td>1</td>
        </tr>
        <tr>
            <td>B</td>
            <td>2</td>
        </tr>
        <tr>
            <td>C</td>
            <td>3</td>
        </tr>
        <tr>
            <td>D</td>
            <td>4</td>
        </tr>
        <tr>
            <td>E</td>
            <td>5</td>
        </tr>
    </table>
    <script type="text/javascript">
        var table = document.getElementById("mytable");
     
        Gator(table).on('click', 'tr', function (e) {
            alert("clicked on table row");
        });
    </script>
</body>
</html>

JavaScript check if a variable is defined

A good way to check if a variable has been defined is to make use of JavaScript typeof:

<script type="text/javascript">
    var varA = "Hello World!";

    if (typeof varA !== "undefined") {
        console.log("Defined");
    } else {
        console.log("Undefined");
    }
    
    // Undefined variable
    if (typeof varB !== "undefined") {
        console.log("Defined");
    } else {
        console.log("Undefined");
    }
</script>

JavaScript parse query string values

A quick post on how to use JavaScript to retrieve a query string value.

   // Function to parse the querystring
   getQueryString= function(sVar) {
        return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
    };

   // Get the value
   var queryParam = getQueryString("your key");