>> SPEAKER 1: Now in that last example, recall that we interspersed some
JavaScript code inside of my HTML, specifically, inside of the value of
the attribute called On Submit for that form tag.
Now for small pages, this isn't such a big deal.
But as a web page gets longer and more complex, simply putting your
JavaScript code here and there inside of the value of attributes isn't the
best design.
Best if we factor that out and at least put it inside of
the script tag centrally.
>> How to do this?
Well let's return to my form tag and first delete this attribute and its
value altogether.
Then up here, rather than define a function called Greet, let's hang on
to the line of code that ultimately we will still want to execute and replace
the Greet function as follows.
Document.get Element By ID quote unquote demo--
where demo, recall, is the unique identifier for the form itself--
dot on submit, which recall is the name of the event handler in which
we're interested.
And let's assign that on submit handler the value that's actually a
function itself.
>> Now notice that I'm not actually calling a function here.
I'm instead defining an anonymous, otherwise known as a lambda function,
by specifying between these curly braces a bunch of code that should
actually be executed.
Specifically, the code that I'd like to execute is that line that I had
before, and then let's add to that return false so that this form is not
ultimately submitted to end remote web server in the traditional way.
>> Let's now save this file, open it up in a browser, and see what happens.
http://localhost/dom-1.html.
Let's now type in my name, David, Submit.
And nothing appears to have happened except the URL of my page seems to
have changed as though the form was actually submitted to the same file.
>> Now why might that be?
Well I need some more information.
So let's go ahead and open up Chrome's Developer Tools so that I can actually
look at the console window to see if I've done something wrong.
I can access that via a couple of ways.
One of which is via this menu here, then under Tools, then down to
Developer Tools.
>> And notice here in the Console tab, there's an uncaught type error, cannot
set property on submit of null.
Now why might that be?
Well back in my source code here, notice that on submit I think is a
property of the element whose unique identifier is demo.
An element, again, is just a node in a tree.
>> So it appears that my browser doesn't think that that element
or node exists yet.
And indeed, it doesn't.
Recall that a web page is parsed or read by a web browser, top to bottom,
left to right.
And so when JavaScript code is encountered, typically, it's executed
right away.
>> But in this case, we haven't even gotten yet to the part of the dom, the
HTML, in which that form with a unique identifier demo has been declared.
And so we're trying to execute my JavaScript code before that node even
exists in the tree which, of course, is problematic because then, surely,
the element itself will be null at that point in time.
>> So how to fix?
Well we have a couple of solutions.
But let's try the simplest by relocating my script tag from the head
tag to my body, but specifically, toward the bottom of my page's body so
that it's below the nodes and questions.
Specifically, let's highlight and cut the open tag and close tag for script
and relocate that whole block of code to the bottom of the file here.
>> Now this isn't necessarily the cleanest design, but at least it will
enforce the right order of operations.
Let's save the file and reload in my browser.
Let's reload the page, re-input my name, and there, Hello David is back.