1
00:00:00,000 --> 00:00:03,170
In the last lesson, we looked at what happens when you have

2
00:00:03,165 --> 00:00:07,355
an input and you put your mouse inside of it and then you like click.

3
00:00:07,350 --> 00:00:09,510
And then you, It's called focusing.

4
00:00:09,510 --> 00:00:11,310
You focus on the text area and you're able to

5
00:00:11,310 --> 00:00:14,430
type what happens when you want to unfocused.

6
00:00:14,430 --> 00:00:20,400
So value is going to be unfocused on me, on me.

7
00:00:20,400 --> 00:00:27,980
And what we're going to do here is just select this using a regular selector, dot on.

8
00:00:27,975 --> 00:00:30,165
And it's not called unfocused.

9
00:00:30,165 --> 00:00:32,165
It's called blur.

10
00:00:32,160 --> 00:00:34,760
And we give it a function.

11
00:00:34,755 --> 00:00:37,065
Console.log.

12
00:00:37,065 --> 00:00:43,775
You blurred away from this input area.

13
00:00:44,170 --> 00:00:47,740
Okay, unfocused one mean,

14
00:00:47,735 --> 00:00:48,865
that is a fun typo.

15
00:00:48,860 --> 00:00:49,700
Let's also change out.

16
00:00:49,700 --> 00:00:53,960
We now know that it's not called unfocused blur off of me.

17
00:00:53,960 --> 00:00:56,350
There we go. Blur off of me.

18
00:00:56,345 --> 00:00:59,815
And when I click in, nothing happens because that's the focus event.

19
00:00:59,810 --> 00:01:01,000
And when I click out of it,

20
00:01:00,995 --> 00:01:02,995
not when I move my mouse out of it,

21
00:01:02,990 --> 00:01:07,420
but when I click out of it and you can see that outline goes away out of it.

22
00:01:07,415 --> 00:01:09,815
It says, You blurred away from this input area.

23
00:01:09,815 --> 00:01:11,215
And every time I do it,

24
00:01:11,210 --> 00:01:14,500
it's going to trigger over and over and over.

25
00:01:14,495 --> 00:01:16,255
Now if you're thinking, hey,

26
00:01:16,250 --> 00:01:17,840
when is this going to be useful to me?

27
00:01:17,840 --> 00:01:22,400
This is a really good example of whenever you're typing in your address or

28
00:01:22,400 --> 00:01:27,740
someone types in a website URL and you want to work with that information,

29
00:01:27,740 --> 00:01:29,470
we can get the value here.

30
00:01:29,465 --> 00:01:32,065
We could say console dot log,

31
00:01:32,060 --> 00:01:39,680
this dot val, blur off of me.

32
00:01:39,680 --> 00:01:43,160
Doo-doo-doo-doo, 123123123. And when a blur out,

33
00:01:43,160 --> 00:01:45,260
it says blur off me, 123123123.

34
00:01:45,260 --> 00:01:47,480
And so now we can work with that information.

35
00:01:47,480 --> 00:01:49,140
Not on every key up,

36
00:01:49,140 --> 00:01:50,940
not when you focus on it,

37
00:01:50,935 --> 00:01:52,485
just when you're done typing,

38
00:01:52,480 --> 00:01:54,400
you can do something with it.

39
00:01:54,400 --> 00:01:57,340
And so as an example, we could do something like

40
00:01:57,340 --> 00:02:02,510
let website URL is equal to this dot val.

41
00:02:02,670 --> 00:02:13,750
And then we can say if website URL dot substring 04 does not equal HTTP,

42
00:02:13,750 --> 00:02:16,270
and we want to make sure that this is a website.

43
00:02:16,270 --> 00:02:22,960
So this is going to be some sort of website URL, so like www.facebook.com.

44
00:02:22,960 --> 00:02:26,340
But every website actually comes with HTTP.

45
00:02:26,335 --> 00:02:29,205
That's the HTTP protocol.

46
00:02:29,200 --> 00:02:34,890
And so we can now say the website URL is equal to.

47
00:02:34,990 --> 00:02:37,190
And we can use a template literal here.

48
00:02:37,190 --> 00:02:46,680
So we're using JavaScript ES6 and we can do HTTPS colon slash slash website URL.

49
00:02:46,684 --> 00:02:49,564
And we're using back ticks for the template literal.

50
00:02:49,565 --> 00:02:56,725
And then we can say this dot val is equal to the website URL.

51
00:02:56,720 --> 00:02:59,920
And so what we're doing here is whenever you blur off of this,

52
00:02:59,915 --> 00:03:03,725
if you have any sort of text in there that doesn't start with HTTP,

53
00:03:03,725 --> 00:03:06,505
it's going to automatically add HTTP.

54
00:03:06,500 --> 00:03:11,020
And then it's going to change that value to website URL.

55
00:03:11,015 --> 00:03:13,285
Now that website you or might not possibly changing,

56
00:03:13,280 --> 00:03:15,350
it might possibly change who, who knows.

57
00:03:15,350 --> 00:03:17,180
It depends on what the user types.

58
00:03:17,180 --> 00:03:19,670
So let's go ahead and, and write this as an example.

59
00:03:19,670 --> 00:03:22,610
Let's go to facebook.com.

60
00:03:22,610 --> 00:03:24,340
And when I blur out of here,

61
00:03:24,335 --> 00:03:30,085
it automatically adds HTTP colon slash slash facebook.com.

62
00:03:30,080 --> 00:03:36,490
And the nice thing about that is you can do user validation for them now.

63
00:03:36,485 --> 00:03:38,395
So you know, when you sign up on a website and it's like

64
00:03:38,390 --> 00:03:40,280
what is your website are what is your email address?

65
00:03:40,280 --> 00:03:45,110
And it's like you put my website.com and it's like, oh,

66
00:03:45,110 --> 00:03:46,420
actually you need that

67
00:03:46,415 --> 00:03:50,875
HTTP before you can submit this form before you can actually sign up.

68
00:03:50,870 --> 00:03:53,390
It's yes, I get it.

69
00:03:53,390 --> 00:03:56,650
But also the developer can do that for us.

70
00:03:56,645 --> 00:03:59,245
And you as the developer can now do that for the user,

71
00:03:59,240 --> 00:04:03,080
making the user experience significantly better.

72
00:04:03,080 --> 00:04:08,570
And that all happens with the blur function or the blur event listener.

73
00:04:08,570 --> 00:04:13,360
Now we're talked about submitting a form. Just now.

74
00:04:13,355 --> 00:04:19,445
Let's go ahead in the next lesson and see how we can prevent a form from submitting.