According to the official jQuery .ready() documentation, the syntax suggested in this exercise has been deprecated and may be disabled in future versions: https://api.jquery.com/ready/
What I don’t understand is the recommended syntax does not include .ready() anywhere:
$(function() {
//Handler for .ready() called.
});
The rest of the document is not helpful in explaining how .ready() is called without explicit inclusion in the code. Have they baked the .ready() method into all $() wrappers? I want to make sure I’m not missing some crucial detail when I use their recommended syntax.
DOMContentLoaded looks to be the driving event going forward. Needless, deprecated does not mean ‘not supported’. The language will be backward compatible for a good long time to come.
.ready() is not being deprecated - only certain syntax variants. The example I posted is the recommended syntax for the .ready() method. I can’t think of any argument to use deprecated syntax when there is an equivalent syntax that has much less chance of breaking down the road. The implementation (complete omission of the word “ready”) is confusing to me and I was hoping to get some more insight.
Also, the document advocates an advantage .ready() has over DOMContentLoaded: since it is only waiting for a condition (is the DOM loaded?), it can be called well after the page loads. However:
In contrast, a DOMContentLoaded event listener added after the event fires is never executed.
The document is not written very well, so I can see how someone might misinterpret it (I had to read it several times).
As I said, the document isn’t written very well, so I’ll walk you through it.
The document lists several “equivalent” syntaxes :
jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:
$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )
As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated.
As the last line says, only the first syntax is recommended (and has not been deprecated). The document then provides an example in the recommended form, which I thought was a better analog to the Codecademy exercise than simply $( handler):
$(function() {
//Handler for .ready() called.
});
This code block misleadingly follows a block of how the .ready() method is “typically” written according to the document, and it is very similar to the Codecademy syntax:
$( document ).ready(function() {
// Handler for .ready() called.
});
Most importantly it refers to jQuery 3.0 and above.
$( handler )
$( document ).ready( handler )
Both have been taught here in the now removed jQuery course(s) which were version 1.8 and 1.9. We would need to check the version on any current lessons.
According to this page, the event has not been removed, so it’s still present and functioning. This is to support older versions of code that may be plugged into the namespace. Granted, we should follow the direction of the 3.x syntax in all future writing so that when support is officially removed, we don’t have to backtrack through our old code.
Just to be clear, I’m not talking about the fact it has been deprecated anymore. That whole bit was just a segue into my original question (from my first post), which I’m not sure you ever figured out. Let me try one more time. The following syntax does not have the word “ready” in it anywhere.
$( handler )
In every other JS method I’ve encountered on Codecademy, the method name is always included in the method call. So what makes .ready() different? I find it especially confusing because the syntax is so similar to jQuery syntax in general.
p.s. I hope there’s a prize at the end of this thread lol
There is an old stage joke that demonstrates this…
"Ask me, 'What's the secret of good comedy?'"
To which the listener replies,
"What's the secret of ...
only to be interrupted by the reply,
"Timing."
The ready event is somewhere in the mix of load events which created some confusion, as we have seen, as versions evolved and weaknesses began to reveal themselves. It wasn’t always perfectly timed.
These concerns are way above a learner’s head, for starters, but more importantly we only want the learner to know that deferral of scripts has a value, and is important. As long as the ready event fires at the right time for our lesson code it is not a concern whether it is deprecated or not.
Far be it for me to ascertain what the authors are planning in the courseware, or why. I only hope that for all intents and purposes they are giving the learner a chance to think on their own.
Perhaps this is true, but it appears my question is above your head, because I still don’t think you got it. Please don’t take this personally. I’m just baffled that I couldn’t explain it clearly enough. The joke reference was not helpful, btw. I’m ready to move on. Thank you for trying.
What this really suggests is that .ready() is not called, since as pointed out, it is deprecated. The function above does not wait for anything to be loaded. If it does, then that suggests jQuery itself is waiting for a suitable moment to jump into action. There are a range of load events that it can listen for in the background.
If the syntax does indeed wait for loading of DOM elements to complete then it is completely testable. Write the script into the HEAD and see if it works on DOM elements. If not, then that means just like all JS, there is no deferral. Script executes when it loads.
That’s such a great idea to test it - I tried this with the exercise I’m working on right now “Mouse Events: Chaining Events”. Putting the code in the <head> made no difference. All the jQuery event handlers still functioned.
I had considered this, but I thought it was an odd idea - why wrap everything again if every jQuery function is already waiting for the DOM? Seems inefficient (both the redundant wrapping and the need to check if the DOM loaded every time you call another function).
As I said before, 'ready() is not being deprecated, only some syntax variants. And the test you suggested bolsters that interpretation.
It may well have been introduced in the JavaScript course track, being the core aspect of JavaScript (which jQuery is wholly written in). jQuery and its alias, $ is a JS object with its own methods.
Furthermore, the DOM may even have been introduced in the HTML course track since it is the foundation of the browser interface. The HTML document is the first thing to come down from the host and it is immediately parsed and used as the basis for constructing the Document Object Model.
The DOM is akin to a tree that stems from its root element, <html> and every element becomes a branch node to which styles and behaviors can be attached.
Bottom line, if you have not learned HTML, CSS and JavaScript it would do well to pause this course and go into those ones, first. It will prevent any more confusion in learning jQuery. Also, take the time out to read up in detail what the DOM is, how it is constructed, traversed and manipulated. These are all fundamental to jQuery, and of course JS, too.
) below!
) to up-vote the contribution!