1
00:00:00,000 --> 00:00:00,470

2
00:00:00,470 --> 00:00:03,760
>> SPEAKER: Let's improve upon that last
example by using a popular JavaScript

3
00:00:03,760 --> 00:00:07,520
library called jQuery that will allow
us to clean up our code while still

4
00:00:07,520 --> 00:00:11,010
avoiding the issue we encountered
earlier whereby some code that I wrote

5
00:00:11,010 --> 00:00:15,600
was executed prematurely before the
elements I needed to exist in a DOM

6
00:00:15,600 --> 00:00:17,530
actually existed.

7
00:00:17,530 --> 00:00:22,120
>> Notice here in dom-2.html, I have a
script tag already with an attribute

8
00:00:22,120 --> 00:00:26,460
of source whose value is the URL of the
latest version of this library.

9
00:00:26,460 --> 00:00:30,220
Below that I have a separate script tag
with no source but where I've left

10
00:00:30,220 --> 00:00:32,590
room to actually write
some of my own code.

11
00:00:32,590 --> 00:00:36,690
The code I'd like to write is as
follows, $, which is really just

12
00:00:36,690 --> 00:00:40,510
shorthand notation for jQuery
itself, (document).

13
00:00:40,510 --> 00:00:43,330

14
00:00:43,330 --> 00:00:46,700
In other words, I'm simply passing as
an argument to a function called

15
00:00:46,700 --> 00:00:50,690
jQuery the document, the global
variable, that already exists inside

16
00:00:50,690 --> 00:00:52,100
of any web page.

17
00:00:52,100 --> 00:00:57,400
>> Then let's do .ready, calling a function
or method that specifies that

18
00:00:57,400 --> 00:01:01,290
the following chunk of code should be
executed only once the whole document

19
00:01:01,290 --> 00:01:04,750
is ready, specifically this
anonymous function here.

20
00:01:04,750 --> 00:01:07,450

21
00:01:07,450 --> 00:01:14,210
$"#demo", which specifies that I'd like
to get the element from my DOM

22
00:01:14,210 --> 00:01:16,370
who's unique identifier is demo.

23
00:01:16,370 --> 00:01:19,990
And then once we've gotten that, let's
register with it an event handler for

24
00:01:19,990 --> 00:01:25,250
the submit event by specifying .submit,
passing to that an anonymous

25
00:01:25,250 --> 00:01:29,370
function that expects one argument
that we'll call event, which is

26
00:01:29,370 --> 00:01:32,230
ultimately just going to be a reference
of sorts to the actual

27
00:01:32,230 --> 00:01:36,030
submission event just in case we'd
like to access that directly.

28
00:01:36,030 --> 00:01:40,470
>> Meanwhile, let's specify open brace and
close brace and inside of those

29
00:01:40,470 --> 00:01:44,140
braces, let's actually write the code
that we want executed when this form

30
00:01:44,140 --> 00:01:45,210
is submitted.

31
00:01:45,210 --> 00:01:54,810
alert"hello," and let's concatenate on
so that the result of calling $"#name"

32
00:01:54,810 --> 00:01:58,880
which specifies that I'd like to get
the element in my DOM whose unique

33
00:01:58,880 --> 00:02:00,750
identifier is name.

34
00:02:00,750 --> 00:02:04,790
And let's now call a function inside of
that object called val which gets

35
00:02:04,790 --> 00:02:07,370
the textual value that
the user is typed in.

36
00:02:07,370 --> 00:02:11,270
And let's concatenate on so that, just
for fun, an exclamation point.

37
00:02:11,270 --> 00:02:14,610
>> Lastly, rather than just return false as
we did before, let's be a bit more

38
00:02:14,610 --> 00:02:18,750
explicit and specify that given that
event object, we'd like to prevent its

39
00:02:18,750 --> 00:02:22,480
default behavior by specifically calling
a function or method called

40
00:02:22,480 --> 00:02:24,190
prevent default as follows.

41
00:02:24,190 --> 00:02:25,440
event.preventDefault.

42
00:02:25,440 --> 00:02:27,760

43
00:02:27,760 --> 00:02:30,080
Let's now save the file and
open it up in my browser.

44
00:02:30,080 --> 00:02:33,240

45
00:02:33,240 --> 00:02:40,120
http://localhost/dom-2.html

46
00:02:40,120 --> 00:02:41,410
>> There's that form.

47
00:02:41,410 --> 00:02:42,720
Let's input David.

48
00:02:42,720 --> 00:02:45,040
Clicking Submit and hello,
David is back.

49
00:02:45,040 --> 00:02:48,299