>> SPEAKER: Let's improve upon that last example by using a popular JavaScript
library called jQuery that will allow us to clean up our code while still
avoiding the issue we encountered earlier whereby some code that I wrote
was executed prematurely before the elements I needed to exist in a DOM
actually existed.
>> Notice here in dom-2.html, I have a script tag already with an attribute
of source whose value is the URL of the latest version of this library.
Below that I have a separate script tag with no source but where I've left
room to actually write some of my own code.
The code I'd like to write is as follows, $, which is really just
shorthand notation for jQuery itself, (document).
In other words, I'm simply passing as an argument to a function called
jQuery the document, the global variable, that already exists inside
of any web page.
>> Then let's do .ready, calling a function or method that specifies that
the following chunk of code should be executed only once the whole document
is ready, specifically this anonymous function here.
$"#demo", which specifies that I'd like to get the element from my DOM
who's unique identifier is demo.
And then once we've gotten that, let's register with it an event handler for
the submit event by specifying .submit, passing to that an anonymous
function that expects one argument that we'll call event, which is
ultimately just going to be a reference of sorts to the actual
submission event just in case we'd like to access that directly.
>> Meanwhile, let's specify open brace and close brace and inside of those
braces, let's actually write the code that we want executed when this form
is submitted.
alert"hello," and let's concatenate on so that the result of calling $"#name"
which specifies that I'd like to get the element in my DOM whose unique
identifier is name.
And let's now call a function inside of that object called val which gets
the textual value that the user is typed in.
And let's concatenate on so that, just for fun, an exclamation point.
>> Lastly, rather than just return false as we did before, let's be a bit more
explicit and specify that given that event object, we'd like to prevent its
default behavior by specifically calling a function or method called
prevent default as follows.
event.preventDefault.
Let's now save the file and open it up in my browser.
http://localhost/dom-2.html
>> There's that form.
Let's input David.
Clicking Submit and hello, David is back.