Programster's Blog

Tutorials focusing on Linux, programming, and open-source

Javascript Cheatsheet

cheatsheet JavaScript

Discover Function Arguments

When working with a third-party library, one will often write callbacks to handle things. Unfortunately, you may not know what items these callbacks are passed. The easiest way to figure things out, is to output the arguments to the console like so:

var myCallback = function() {
    console.log({ "myCallback arguments" : arguments });
};

Then you can look at the output in your browser's console.

Check if Element With ID Exists

With jquery...

if($("#" + name).length == 0) {
  //it doesn't exist
}

Get Whether Checkbox Ticked

Use jquery .is(':checked')

Execute Script When Document Loaded

$(document).ready()

You can chain these multiple times and all will execute. E.g.

$(document).ready(function(){
    doSomething(); 
})

$(document).ready(function(){
    doSomething2(); 
})

Using pure javascript, you can use:

body.onload(doSomething());

This will execute when all of the body is loaded, but these cannot be "chained". You are setting the onload property of the body instead of adding more methods to a queue to be executed.

Dynamically Set Attributes/Properties

var person = {};
var nameOfAttributeToSet = "name";
var attributeValueToSet = "John";
person[nameOfAttributeToSet] = attributeValueToSet;

Fade Away Text On Click

The code below shows you how to have some text appear beside the mouse that will eventually fade away, when you click on something.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
        </head>
    <body>
        <script type="text/javascript">

        // Track the mouse position and set it to global variables
        var g_mouseX = 0;
        var g_mouseY = 0;
        $(document ).on("mousemove", function( event ) {
            g_mouseX = event.pageX;
            g_mouseY = event.pageY;
        });

        function fadeAwayTextClickHandler(clickedElement, textToShow)
        {
            var alpha = 1;
            var startingLeft = g_mouseX + 20;
            var startingTop = g_mouseY - 20;

            var fadeAwayTextElement = document.createElement("p");
            fadeAwayTextElement = $(fadeAwayTextElement);
            fadeAwayTextElement.text(textToShow);
            fadeAwayTextElement.css("position", "absolute");
            fadeAwayTextElement.css("top", g_mouseY + "px");
            fadeAwayTextElement.css("left", startingLeft + "px");
            fadeAwayTextElement.css("z-index", 100);

            fadeAwayTextElement.css("color", "rgba(0,0,0, " + alpha + ")");
            $("body").append(fadeAwayTextElement);


            var difference = 0;
            var step = 1;
            var alphaStep = 0.02;

            var fader = function() {
                alpha -= alphaStep;
                difference += step;

                fadeAwayTextElement.css("color", "rgba(0,0,0, " + alpha + ")");
                var newTop = startingTop + difference;
                fadeAwayTextElement.css("top", newTop);

                if (alpha > 0)
                {
                    window.requestAnimationFrame(fader);
                }
                else
                {
                    fadeAwayTextElement.remove();
                }

            }

            window.requestAnimationFrame(fader);
        }
        </script>

        <a href="javaScript:void(0);" onclick="fadeAwayTextClickHandler(this, 'Copied!');"">advancedClickHandler</a>

    </body>
</html>

Arrays

Append To Array

var myArray = [];
myArray.push('newELement');

If you want to append multiple elements in another array to your array, use concat.

var myMasterList = ["a", "b", "c"];
var elementsToAppend = ["d", "e"];
myMasterList = myMasterList.concat(elementsToAppend);

Prepend To Array

var myArray = [];
myArray.unshift('newELement');

References

Last updated: 6th December 2021
First published: 16th August 2018