Ready jQuery | Table O Contents

Confirmation must be received in the form of a message from the DOM …

Ready jQuery | Table O Contents

Note. The Flammarion Logo Badge in the page header above is an .svg image file set to the dimensions of 5% width, auto height, and zoom. Go ahead and test the zoom-out feature by hovering over the badge to engage the expansion of the image.

First Subtitle

Hint. Out of the box, the jQuery object provides a jQuery function represented by the dollar sign $ that accepts a single parameter for its solo argument.

More to come …

Window onLoad

There is no short-cut in the properties and methods of the jQuery object to replace the jQuery $(window).load statement with a symbol.

A comparable property of your browser is the window.onload method.

The window.onload method waits until ALL of the assets of the subject page have been loaded including all images and iframes prior to sending a ready message.

Document ready

Whereas, the $(document).ready function and method of jQuery waits only for the browser to complete the construction of the Document Object Model, or DOM prior to sending its ready message.

Therefore, the window.onload method of your browser may be invoked AFTER our newly proposed job() function.

Job Function

For example, the following code waits for confirmation from the window Object upon total load …

Then, fires off an Anonymous Function Wrapper, or AFW event handler as argument to the load method.

In jQuery …

As follows,

$(window).load(function(){
  return console.log(`The page is now fully loaded. ➡️
  The Html has been parsed. ➡️
  The DOM has been rendered. ➡️
  All of the assets of the page have been uploaded to the browser. ➡️
  We can now go to work.`)
});

Similarly, the following code block waits for the confirmation message from the Html parser via the document Object model.

And, upon DOM readiness …

Fires off an Anonymous Function Wrapper, or AFW event handler as argument to the ready method.

Also in jQuery …

As follows,

$(document).ready(function(){
  return console.log(`The Html has been parsed. ➡️
  The DOM has been rendered. ➡️
  All of the assets of the page (perhaps) ... ➡️
  Are still in the process of being uploaded to the browser ... ➡️
  Depending on their weight and bandwidth. ➡️
  The page is most probably now NOT fully loaded. ➡️
  But, nevertheless ... we can go to work.`)
});

Anonymous Function Wrappers

Both of the long-cut statements shown above and by extension the single built in jQuery short-cut $() …

Place an Anonymous Function Wrapper, or AFW event handler next inline as an argument that fires when the respective ready condition is met, as follows:

job(function($){});

Note. An AFW can be the parameter that fills the single set of parenthesis as argument to the jQuery(document).ready function and method.

As previously, under the representation of the built-in jQuery short-cut $() …

And, also via our soon to override global job variable, as shown below.

Da DOM

BEFORE an event can fire in jQuery, confirmation in the form of a message must be received from the Document Object Model, or DOM.

jQuery $

Out of the box, the jQuery object provides a jQuery function represented by the dollar sign $ that accepts a single parameter for its solo argument, as follows:


$();

Quickly, however, we can embellish upon the out of the box jQuery function by placing the document parameter inside the set of parenthesis reserved for the argument of the jQuery function and by chaining the ready method of the jQuery object to the argument, as follows:

$(document).ready;

Here, the jQuery object is invoked to accomplish the feat of confirming the readiness of the DOM.

The ready method is chained to the jQuery function after inserting the top-node of the DOM aka the document as the parameter for the solo argument taken by the jQuery function.

Note. The dollar sign $ is a built-in substitute symbol for the term jQuery.

And, that substitute symbol can be changed programatically.

Let There Be Brevity

A let statement can be used in place of the now chained $(document).ready function and method, as follows:

let job = jQuery.noConflict(document).ready;

However, the now scoped job variable cannot be used to call DOM elements outside of its placement after the DOM has been built by the browser.

Collisions

Roll Ur Own to avoid collisions.

Isn’t that an oxymoron.

But, you can … with jQuery.

If the short-cut $() can be used to replace $(document).ready, then why not we?

First, let’s set the following global variable and hope with a high level of confidence that no other namespace will pollute ours.

In the micro-scope of the let variable we should be good to go.

However, in the global hoisted scope of our program, we may not.

We must make the new alias job available throughout the many functions and methods of our program.

To allow for this expanded level of functionality, we will have to expose the new job variable to the elements of our entire program, as follows:

var job = jQuery.noConflict(document).ready;

Notice how we have had to switch from the more modern, ES6 scoped variable keyword of let …

Back to the original plain-vanilla Javascript variable aka the more global variable keyword of var.

Now, let’s plug the var job into our jQuery object from above.

Running with the following algorithmic steps …

The built-in jQuery function $() is transformed to $(document).ready()
The job() function = jQuery.noConflict(document).ready()
The parameter of the argument for the job() function can be an AFW = job(function(){});

Note. Where noConflict is simply a chained method of the jQuery object under previous jQuery incarnations, or versions.

Yields,

job(function($){
  return console.log(`The Html has been parsed. ➡️
  The DOM has been rendered. ➡️
  We can now go to work.`)
});

What have we done?

In a nutshell …

We have replaced back to the jQuery object, the jQuery function represented by the term jQuery and the alias dollar sign $, and
We have subsequently chained the jQuery object method noConflict to the jQuery function.
Next, we have simply equated the method noConflict now chained to the to the value of the global variable job … AFTER
Embellishing the jQuery function with the document node as parameter to thejQuery.noConflict() argument coupled with the ready method of the jQuery object.
Then we placed an AFW as the parameter to the solo argument of the job function.

EL Labirinto (The Labyrinth)

Now that we have taken you, dear reader, through the opening of the Labyrinth that is the jQuery object …

Let’s take it for a spin!

Execution

Let’s craft a simple Javascript program that will accept our new job variable.

Simply highlight and copy the following code with your mouse or touchpad via command + C, and

Paste the code into your Javascript console over at an open Chrome browser window.

Note. You must first expose the Chrome Developer Toolset, or CDT to invoke the Javascript console command line via a Chrome browser window.

Finally, via command + V, paste the code into your Javascript console command line, and

Hit the enter key to execute.

"use strict";
// As of ES7 the Global use of the strict string pragma is recommended
// Set the local variable
// let job = jQuery.noConflict(document).ready;
// Set the global variable
var job = $(document).ready;
// Construct the function
job(function($){
  // Wait for the "DOM is complete" message from the Html parser
  return console.log(`The Html has been parsed ➡️
  The DOM has been rendered ➡️
  We can now go to work.`)
});

Note. We have had to remove the .noConflict() method from the chain of events in order to equate the var with the namespace job.

Does not jQuery version 3.3.1 possess a .noConflict() method in the Labyrinth of the newest and resident jQuery object?

Or, has the jQuery .noConflict() method been deprecated?

Safer Coding

Without the worry of the alias dollar sign $ being used by another program to inadvertently create collisions, our global variable job now sits within our our jQuery Labyrinth hidden, but accessible.

Last Subtitle