1 00:00:00,000 --> 00:00:00,380 2 00:00:00,380 --> 00:00:03,000 >> SPEAKER 1: Now in that last example, recall that we interspersed some 3 00:00:03,000 --> 00:00:07,170 JavaScript code inside of my HTML, specifically, inside of the value of 4 00:00:07,170 --> 00:00:10,460 the attribute called On Submit for that form tag. 5 00:00:10,460 --> 00:00:12,850 Now for small pages, this isn't such a big deal. 6 00:00:12,850 --> 00:00:15,950 But as a web page gets longer and more complex, simply putting your 7 00:00:15,950 --> 00:00:19,660 JavaScript code here and there inside of the value of attributes isn't the 8 00:00:19,660 --> 00:00:20,830 best design. 9 00:00:20,830 --> 00:00:23,440 Best if we factor that out and at least put it inside of 10 00:00:23,440 --> 00:00:25,200 the script tag centrally. 11 00:00:25,200 --> 00:00:26,080 >> How to do this? 12 00:00:26,080 --> 00:00:30,040 Well let's return to my form tag and first delete this attribute and its 13 00:00:30,040 --> 00:00:31,780 value altogether. 14 00:00:31,780 --> 00:00:35,730 Then up here, rather than define a function called Greet, let's hang on 15 00:00:35,730 --> 00:00:39,405 to the line of code that ultimately we will still want to execute and replace 16 00:00:39,405 --> 00:00:41,560 the Greet function as follows. 17 00:00:41,560 --> 00:00:48,190 Document.get Element By ID quote unquote demo-- 18 00:00:48,190 --> 00:00:52,410 where demo, recall, is the unique identifier for the form itself-- 19 00:00:52,410 --> 00:00:56,600 dot on submit, which recall is the name of the event handler in which 20 00:00:56,600 --> 00:00:57,710 we're interested. 21 00:00:57,710 --> 00:01:01,990 And let's assign that on submit handler the value that's actually a 22 00:01:01,990 --> 00:01:03,740 function itself. 23 00:01:03,740 --> 00:01:06,390 >> Now notice that I'm not actually calling a function here. 24 00:01:06,390 --> 00:01:10,650 I'm instead defining an anonymous, otherwise known as a lambda function, 25 00:01:10,650 --> 00:01:14,100 by specifying between these curly braces a bunch of code that should 26 00:01:14,100 --> 00:01:15,490 actually be executed. 27 00:01:15,490 --> 00:01:18,500 Specifically, the code that I'd like to execute is that line that I had 28 00:01:18,500 --> 00:01:23,370 before, and then let's add to that return false so that this form is not 29 00:01:23,370 --> 00:01:26,950 ultimately submitted to end remote web server in the traditional way. 30 00:01:26,950 --> 00:01:30,345 >> Let's now save this file, open it up in a browser, and see what happens. 31 00:01:30,345 --> 00:01:33,050 32 00:01:33,050 --> 00:01:39,800 http://localhost/dom-1.html. 33 00:01:39,800 --> 00:01:43,060 Let's now type in my name, David, Submit. 34 00:01:43,060 --> 00:01:46,900 And nothing appears to have happened except the URL of my page seems to 35 00:01:46,900 --> 00:01:52,580 have changed as though the form was actually submitted to the same file. 36 00:01:52,580 --> 00:01:53,870 >> Now why might that be? 37 00:01:53,870 --> 00:01:55,340 Well I need some more information. 38 00:01:55,340 --> 00:01:58,700 So let's go ahead and open up Chrome's Developer Tools so that I can actually 39 00:01:58,700 --> 00:02:01,440 look at the console window to see if I've done something wrong. 40 00:02:01,440 --> 00:02:03,330 I can access that via a couple of ways. 41 00:02:03,330 --> 00:02:07,250 One of which is via this menu here, then under Tools, then down to 42 00:02:07,250 --> 00:02:08,509 Developer Tools. 43 00:02:08,509 --> 00:02:12,890 >> And notice here in the Console tab, there's an uncaught type error, cannot 44 00:02:12,890 --> 00:02:15,390 set property on submit of null. 45 00:02:15,390 --> 00:02:16,900 Now why might that be? 46 00:02:16,900 --> 00:02:21,380 Well back in my source code here, notice that on submit I think is a 47 00:02:21,380 --> 00:02:25,360 property of the element whose unique identifier is demo. 48 00:02:25,360 --> 00:02:27,810 An element, again, is just a node in a tree. 49 00:02:27,810 --> 00:02:30,870 >> So it appears that my browser doesn't think that that element 50 00:02:30,870 --> 00:02:32,500 or node exists yet. 51 00:02:32,500 --> 00:02:33,790 And indeed, it doesn't. 52 00:02:33,790 --> 00:02:37,690 Recall that a web page is parsed or read by a web browser, top to bottom, 53 00:02:37,690 --> 00:02:38,430 left to right. 54 00:02:38,430 --> 00:02:41,810 And so when JavaScript code is encountered, typically, it's executed 55 00:02:41,810 --> 00:02:42,700 right away. 56 00:02:42,700 --> 00:02:46,460 >> But in this case, we haven't even gotten yet to the part of the dom, the 57 00:02:46,460 --> 00:02:51,100 HTML, in which that form with a unique identifier demo has been declared. 58 00:02:51,100 --> 00:02:54,320 And so we're trying to execute my JavaScript code before that node even 59 00:02:54,320 --> 00:02:58,530 exists in the tree which, of course, is problematic because then, surely, 60 00:02:58,530 --> 00:03:01,390 the element itself will be null at that point in time. 61 00:03:01,390 --> 00:03:02,390 >> So how to fix? 62 00:03:02,390 --> 00:03:03,810 Well we have a couple of solutions. 63 00:03:03,810 --> 00:03:07,200 But let's try the simplest by relocating my script tag from the head 64 00:03:07,200 --> 00:03:11,560 tag to my body, but specifically, toward the bottom of my page's body so 65 00:03:11,560 --> 00:03:14,170 that it's below the nodes and questions. 66 00:03:14,170 --> 00:03:19,930 Specifically, let's highlight and cut the open tag and close tag for script 67 00:03:19,930 --> 00:03:24,720 and relocate that whole block of code to the bottom of the file here. 68 00:03:24,720 --> 00:03:27,690 >> Now this isn't necessarily the cleanest design, but at least it will 69 00:03:27,690 --> 00:03:29,530 enforce the right order of operations. 70 00:03:29,530 --> 00:03:31,495 Let's save the file and reload in my browser. 71 00:03:31,495 --> 00:03:34,620 72 00:03:34,620 --> 00:03:40,240 Let's reload the page, re-input my name, and there, Hello David is back. 73 00:03:40,240 --> 00:03:42,784