1
00:00:00,000 --> 00:00:00,310

2
00:00:00,310 --> 00:00:03,130
>> DAVID J. MALAN: Let's implement a web
page that says hello to a user, along

3
00:00:03,130 --> 00:00:06,830
the way demonstrating the DOM, the
document object model, or the tree

4
00:00:06,830 --> 00:00:10,220
structure that really is underneath the
hood when you render a web page.

5
00:00:10,220 --> 00:00:11,440
>> Let's take a look.

6
00:00:11,440 --> 00:00:15,950
Here, in dom-0.html, notice that inside
of the pages' body, I have a

7
00:00:15,950 --> 00:00:19,860
form tag, the unique identifier for
which is, quote unquote, "demo."

8
00:00:19,860 --> 00:00:23,670
Meanwhile, I also have an onsubmit
attribute, otherwise known as an event

9
00:00:23,670 --> 00:00:28,150
handler, onsubmit, which specifies that
when this form is submitted, a

10
00:00:28,150 --> 00:00:30,800
function that's apparently called
greet should be executed.

11
00:00:30,800 --> 00:00:32,960
And then false should be returned.

12
00:00:32,960 --> 00:00:33,830
>> Why false?

13
00:00:33,830 --> 00:00:36,850
Well, I don't actually want to submit
this form to a remote Web server in

14
00:00:36,850 --> 00:00:37,810
the traditional way.

15
00:00:37,810 --> 00:00:40,850
I want to circumvent that form
submission and do something with it

16
00:00:40,850 --> 00:00:42,690
client-side using JavaScript.

17
00:00:42,690 --> 00:00:44,010
Indeed, notice here.

18
00:00:44,010 --> 00:00:47,290
At the head of my web page, I have a
script tag, inside of which is the

19
00:00:47,290 --> 00:00:49,420
beginnings of that function
called greet.

20
00:00:49,420 --> 00:00:51,040
>> What do I actually want to do?

21
00:00:51,040 --> 00:00:54,530
Well, inside of greet, let's simply
call the alert function.

22
00:00:54,530 --> 00:00:57,770
And then print out something
like hello, with a space.

23
00:00:57,770 --> 00:01:01,460
And then concatenate onto the end
of that the result of calling

24
00:01:01,460 --> 00:01:08,370
document.getElementByID, specifying
specifically the unique identifier,

25
00:01:08,370 --> 00:01:10,070
quote unquote, "name."

26
00:01:10,070 --> 00:01:13,670
>> And specifically, once we've gotten
that element, the node in the tree

27
00:01:13,670 --> 00:01:17,640
that represents this web page, let's
specifically get it's value by

28
00:01:17,640 --> 00:01:19,320
specifying .value.

29
00:01:19,320 --> 00:01:22,060
And then, just for fun, let's
concatenate on to the end of that an

30
00:01:22,060 --> 00:01:23,730
exclamation point.

31
00:01:23,730 --> 00:01:28,460
>> Let's now save this file, open it
in a browser, and see a hello.

32
00:01:28,460 --> 00:01:33,600
http://localhost/dom-0.html.

33
00:01:33,600 --> 00:01:34,670
>> There's that form.

34
00:01:34,670 --> 00:01:36,530
Let's go ahead and type in my name.

35
00:01:36,530 --> 00:01:38,530
Followed by clicking Submit.

36
00:01:38,530 --> 00:01:39,910
And there we see hello, David!

37
00:01:39,910 --> 00:01:42,410

38
00:01:42,410 --> 00:01:43,660
That's me.

39
00:01:43,660 --> 00:01:44,363