WEBVTT

0
00:00.420 --> 00:06.210
I want to now talk about a very useful element when it comes to dealing with forms, and that is the

1
00:06.210 --> 00:07.710
output element.

2
00:08.250 --> 00:10.680
Okay, so what is this output element all about?

3
00:10.710 --> 00:15.600
Well, it is semantically the correct element to display results.

4
00:15.600 --> 00:19.080
For example, the results of a calculation from form 📰 elements.

5
00:19.200 --> 00:20.580
And where does it come from?

6
00:20.610 --> 00:22.260
Who gives us this output element?

7
00:22.290 --> 00:26.850
Well, it inherits from the HTMLOutputElement interface.

8
00:27.000 --> 00:28.110
(sound effect: What did you say?)

9
00:28.230 --> 00:31.100
And I don't want you to feel overwhelmed or confused.

10
00:31.110 --> 00:33.440
Just think about it like this.

11
00:33.450 --> 00:38.580
Someone has to give us elements to work with. That "someone" in our case is the browser.

12
00:38.610 --> 00:44.880
The browsers have to conform to certain specifications and browsers give us access to a lot of interfaces,

13
00:44.880 --> 00:49.650
and one of these interfaces that the browser gives us is the HTMLOutputElement.

14
00:49.650 --> 00:55.860
And it's just useful because the browser has attached many properties and methods for manipulating the

15
00:55.860 --> 01:00.760
layout and presentation of certain data that's shown in the output element.

16
01:00.760 --> 01:06.370
And this is all done because we have this HTMLOutputElement interface. But ... words are just words. 

17
01:06.370 --> 01:10.780
Let me just quickly jump over to the console and I'll prove this to you.

18
01:11.770 --> 01:14.980
Very quickly, let me prove to you where this output element comes from.

19
01:14.980 --> 01:15.600
So here we are.

20
01:15.610 --> 01:17.170
I'm just in a browser.

21
01:17.200 --> 01:18.700
Let's just go to the console.

22
01:19.550 --> 01:24.030
By the way, the console is a way for us to write JavaScript code.

23
01:24.050 --> 01:28.340
It's basically the browser's interface for executing JavaScript.

24
01:28.370 --> 01:29.750
That's all the console is, I'm sure,

25
01:29.870 --> 01:31.190
I'm sure you probably knew that.

26
01:31.640 --> 01:31.970
Okay.

27
01:31.970 --> 01:35.090
So all I want to do is I want to quickly create our output element.

28
01:35.090 --> 01:37.600
So let's just define it as output.

29
01:37.610 --> 01:42.020
And then I want to access the document object, which the DOM gives us. On here, 

30
01:42.020 --> 01:44.360
there is a method called createElement().

31
01:44.360 --> 01:47.390
And the element we want to create is this output element.

32
01:47.390 --> 01:49.270
So now we've created this output element.

33
01:49.280 --> 01:54.650
All I want to do now is I want to console log it out to the screen, but I don't want to use console

34
01:54.650 --> 01:58.370
log because console log gives us the actual HTML.

35
01:58.490 --> 01:59.390
Well, let me show you.

36
02:00.080 --> 02:05.870
If I go console log and I just console log our output, we get the actual HTML representation, we get

37
02:05.870 --> 02:06.800
our output tag.

38
02:06.800 --> 02:07.880
But that's not what I want.

39
02:07.880 --> 02:15.290
I want to see the JSON-tree kind of representational format of this output element, aka, I want to

40
02:15.290 --> 02:18.320
see all the properties and methods of this element.

41
02:18.320 --> 02:21.340
And in order to do that I want to use console

42
02:21.370 --> 02:21.920
dir.

43
02:22.530 --> 02:25.920
And I want to dir() out our output variable.

44
02:26.650 --> 02:27.640
Okay, there we go.

45
02:27.640 --> 02:33.190
And if we open this up, what's really cool and I encourage you to do this, go through and start seeing

46
02:33.190 --> 02:35.890
all the properties and methods that we have on this output element.

47
02:35.890 --> 02:40.300
But what I really want to look at is the __proto__. And if you scroll all the way down,

48
02:40.890 --> 02:43.920
you know, here are some properties, innerHTML and innerText ... 

49
02:43.920 --> 02:47.810
that's why we can access all of these properties and change values.

50
02:47.880 --> 02:49.920
This is where they come from. How cool.

51
02:49.920 --> 02:55.650
And if we scroll all the way down to the bottom, oh, look here ... haha, I keep stopping hey ... 

52
02:55.890 --> 02:59.580
Anyway, so interesting, you know, and here are some cool things. We've got 

53
03:00.180 --> 03:03.630
remember the events that we listened for in some of our previous examples?

54
03:03.630 --> 03:06.990
Well, here is the onblur event, onclick event.

55
03:08.730 --> 03:09.520
Very cool.

56
03:09.540 --> 03:10.290
Very cool.

57
03:10.320 --> 03:12.840
Anyway, let's scroll to the bottom for real this time.

58
03:12.840 --> 03:16.170
And you'll see here at the very bottom, we've got this __proto__.

59
03:16.170 --> 03:18.500
And don't worry what photo is.

60
03:18.510 --> 03:25.140
Just realize when it comes to JavaScript, it's an inheritance based model, meaning properties and

61
03:25.140 --> 03:28.620
methods and objects inherit from other properties or other objects.

62
03:28.620 --> 03:34.660
And here this output element inherits from the HTMLOutputElement.

63
03:34.680 --> 03:37.620
Proof is in the pudding, and you can see it right here.

64
03:38.100 --> 03:43.800
"Okay, Clyde, I know it comes from the HTMLOutputEelement interface, but what really else can you

65
03:43.800 --> 03:45.240
tell me about this output element?

66
03:45.240 --> 03:47.460
What's some juicy information about it?"

67
03:47.460 --> 03:52.980
Well, firstly, it does not have the value attribute.

68
03:53.070 --> 03:58.500
Remember we were talking about the textarea element and remember that the textarea also does not have

69
03:58.500 --> 04:00.090
the value attribute.

70
04:00.120 --> 04:01.620
Why doesn't it have the attribute?

71
04:01.620 --> 04:07.230
Well, very similarly to the textarea, it's because there's an opening and closing tag with this element.

72
04:07.230 --> 04:13.360
So therefore the text node between the opening and closing tags pretty much make up the value.

73
04:13.360 --> 04:18.460
So if you ever want a default value, you just put it in between the opening and closing tags.

74
04:18.460 --> 04:21.640
That's why there is no value attribute.

75
04:21.670 --> 04:26.590
The other thing that you need to bear in mind with the output element, is remember the first point on

76
04:26.590 --> 04:29.530
the screen, it's a semantic element.

77
04:29.560 --> 04:37.990
It's only used to display results and this means it does not submit any name:value pairs or content

78
04:38.020 --> 04:39.580
to the server.

79
04:39.580 --> 04:46.450
So just remember, my dear students, for the most part, this output element is only there for simple

80
04:46.450 --> 04:48.640
semantic display purposes

81
04:48.640 --> 04:49.510
for a user.

82
04:49.540 --> 04:56.680
There's something else now very important when it comes to the output element, and that is the oninput

83
04:56.710 --> 04:57.580
event.

84
04:57.610 --> 05:03.700
What! Before I even talk about the oninput event, let me show you how it works in action.