1
00:00:00,890 --> 00:00:08,310
Hello! Welcome back. In this video we're going to combine everything that we just learned to show you

2
00:00:08,310 --> 00:00:10,540
why JavaScript is useful.

3
00:00:10,620 --> 00:00:18,380
Because I know some of you are thinking: OK, we learned a whole bunch of new ways of writing JavaScript

4
00:00:18,390 --> 00:00:25,120
and we learned about arrays and objects, but I don't really know how that relates to me building

5
00:00:25,120 --> 00:00:27,560
websites or web apps?

6
00:00:28,110 --> 00:00:34,280
Well, I'm going to show you that we can build a simplified version of Facebook with what we just learned.

7
00:00:35,240 --> 00:00:36,510
So let's get started.

8
00:00:36,830 --> 00:00:43,010
We're going to have a database with usernames and passwords. We're going to have a 'newsfeed' and we're

9
00:00:43,010 --> 00:00:44,780
going to have users.

10
00:00:44,840 --> 00:00:51,020
So let's start off by thinking about how Facebook works. With Facebook

11
00:00:51,020 --> 00:00:55,420
we have a sign-up form usually. We need to sign in.

12
00:00:56,000 --> 00:01:03,330
And once we sign in, if it's correct, it goes to our profile, where we can view our 'newsfeed'.

13
00:01:03,380 --> 00:01:10,180
So let's build that. We can start off with having something called a 'database'.

14
00:01:10,180 --> 00:01:12,520
So we'll have a variable 'database'.

15
00:01:12,520 --> 00:01:16,810
And in this 'database' we can have multiple users.

16
00:01:16,810 --> 00:01:17,230
Right?

17
00:01:17,350 --> 00:01:23,210
So, what do we need here? We need an array - a list of users.

18
00:01:23,230 --> 00:01:24,790
So now I can say

19
00:01:28,110 --> 00:01:36,000
I have a 'username' and this might look familiar from our previous lessons. We have a 'username' of 'andrei'

20
00:01:37,140 --> 00:01:42,740
and a 'password' of 'supersecret'.

21
00:01:42,800 --> 00:01:46,700
For now we're just going to leave it at one user.

22
00:01:46,700 --> 00:01:50,670
We have a 'database' and we also want to have a 'newsfeed', right?

23
00:01:50,720 --> 00:01:56,730
So let's have a variable called 'newsfeed' and in here, a newsfeed,

24
00:01:56,740 --> 00:02:15,350
well, again it's a list, an array of news. So we can have a 'username' - 'Bobby', that on his timeline has maybe,

25
00:02:15,590 --> 00:02:26,200
'So tired from all that learning!'. We also have, we have more than one item usually in a 'newsfeed'.

26
00:02:26,200 --> 00:02:39,330
We can say that 'username', 'Sally'. 'Sally' on her time line just posted 'Javascript is sooooooo cooooool!'.

27
00:02:41,660 --> 00:02:42,240
OK.

28
00:02:42,560 --> 00:02:53,070
So we have a 'newsfeed', which has an array of objects and we have a 'database', which is an array of just a

29
00:02:53,070 --> 00:02:55,980
single object right now: a 'username' and 'password'.

30
00:02:56,950 --> 00:03:01,190
Now how can we build a 'sign-in' form?

31
00:03:01,360 --> 00:03:10,500
Well, we would want to perform an action to check a user's credentials: their 'username' and 'password'.

32
00:03:10,550 --> 00:03:12,000
Well, we've done this before, right?

33
00:03:12,020 --> 00:03:24,170
We've used 'prompt' before, accepts a user's input. So we can do variable 'userNamePrompt'

34
00:03:24,500 --> 00:03:29,320
We'll say equals 'prompt':

35
00:03:29,680 --> 00:03:32,310
"What's your username?"

36
00:03:34,500 --> 00:03:35,370
OK.

37
00:03:35,760 --> 00:03:36,930
We also have

38
00:03:36,930 --> 00:03:39,300
And I'm going to make this smaller just so everything fits in here.

39
00:03:39,300 --> 00:03:53,050
Hopefully you can still see. We have variable 'passwordPrompt', that equals 'prompt("What's your password?")

40
00:03:54,080 --> 00:03:57,680
'?' OK.

41
00:03:57,860 --> 00:04:00,970
So, we have this working.

42
00:04:01,250 --> 00:04:10,590
When we open up this file and refresh: HTML is going to get loaded line by line. And we see, oh, we have

43
00:04:10,590 --> 00:04:11,280
a script.

44
00:04:11,340 --> 00:04:17,589
Let me load the script and then the browser reads line by line.

45
00:04:17,670 --> 00:04:19,029
We have a 'database'.

46
00:04:19,260 --> 00:04:20,500
We have a 'newsfeed'.

47
00:04:20,970 --> 00:04:26,540
And then it's going to say 'usernamePrompt' equals 'prompt'. And it's going to ask us for "What's your user

48
00:04:26,540 --> 00:04:26,930
name?"

49
00:04:27,150 --> 00:04:30,310
And then it's going to ask us for "What's your password?"

50
00:04:30,460 --> 00:04:32,400
Well, let's just test that.

51
00:04:32,490 --> 00:04:35,410
I'm going to save and refresh and there you go.

52
00:04:35,460 --> 00:04:42,730
"What's your user name?" - "andrei" and "What's your password?" - "supersecret".

53
00:04:43,260 --> 00:04:53,040
That's very nice, but when I sign in, I either want to know that my password is incorrect or if I log

54
00:04:53,040 --> 00:04:54,550
in and everything is correct.

55
00:04:54,780 --> 00:04:56,830
I want to get my 'newsfeed, right?

56
00:04:57,970 --> 00:05:05,560
So it sounds like we need to perform an action, but we don't really have a sign in function in JavaScript,

57
00:05:05,560 --> 00:05:05,920
do we?

58
00:05:05,920 --> 00:05:10,310
It's a custom function, that we need to build ourself.

59
00:05:11,110 --> 00:05:13,080
So let's think about this.

60
00:05:13,090 --> 00:05:20,880
We want to create a function called 'signIn' and to sign in, what do we need?

61
00:05:20,980 --> 00:05:25,800
Well, we need a 'username' and 'password'.

62
00:05:27,410 --> 00:05:32,450
And we can name these whatever we want and just to prove that to you I'm just going to do 'user'

63
00:05:35,190 --> 00:05:36,300
and 'password'.

64
00:05:36,730 --> 00:05:39,500
We'll, do 'pass' like that. OK.

65
00:05:39,530 --> 00:05:43,610
And if we remember, to create a function, this is 'function declaration'

66
00:05:43,610 --> 00:05:48,310
I have my curly brackets and in here I can do something.

67
00:05:48,350 --> 00:05:53,780
So, again let's think about this logically: in order to sign in,

68
00:05:53,800 --> 00:05:57,300
I need to check 'username' and 'password'.

69
00:05:57,640 --> 00:06:08,990
Well, if the function gets the first argument 'user', well I can say that 'if (username)' - in this case 'user'

70
00:06:10,780 --> 00:06:12,940
equals, well, what does it equal?

71
00:06:12,950 --> 00:06:16,820
You need to check against our 'database' right?

72
00:06:17,310 --> 00:06:25,770
Our 'database', when 'andrei' signed up for Facebook, he put his 'username' down, and 'password' down, so we have

73
00:06:25,770 --> 00:06:32,220
that information. So, we can say, that when you sign in we're going to check 'user' to see that the 'user'

74
00:06:32,430 --> 00:06:35,080
matches 'database'.

75
00:06:35,580 --> 00:06:36,790
And it's an array.

76
00:06:37,050 --> 00:06:45,660
So we're going to grab the first element in the array and we're going to grab the 'username'

77
00:06:50,170 --> 00:06:50,760
OK.

78
00:06:51,110 --> 00:06:55,310
And we also want to check the 'password', right?

79
00:06:55,310 --> 00:06:57,970
So, what do we do when we have to check two things?

80
00:06:57,980 --> 00:07:10,120
Well it's a conditional, that has "&&". So here I can say: the 'password' should equal 'database' - first item in

81
00:07:10,120 --> 00:07:11,060
the array.

82
00:07:11,290 --> 00:07:15,640
And this time instead of 'username' it's 'password'.

83
00:07:15,890 --> 00:07:18,200
I'm going to put this on a new line just so you can see it.

84
00:07:18,200 --> 00:07:18,820
There you go!

85
00:07:20,770 --> 00:07:30,610
So, 'signIn' function is going to say if 'user' equals whatever we have in the 'database': 'username', and 'password'

86
00:07:30,610 --> 00:07:36,190
equals whatever we have in the 'database'. If that is right,

87
00:07:36,220 --> 00:07:48,580
well, we can say 'console.log', and we'll say - 'newsfeed'. Else, if the 'password' or 'username' is not correct, we'll

88
00:07:48,640 --> 00:07:51,140
just say 'alert'.

89
00:07:51,550 --> 00:07:58,890
"Sorry, wrong username and password!"

90
00:07:58,980 --> 00:08:06,800
So, we have our function, but this disappeared somewhere. And we'll save this.

91
00:08:06,800 --> 00:08:09,720
And let's just refresh. OK.

92
00:08:09,930 --> 00:08:11,470
"What is your user name?"

93
00:08:11,520 --> 00:08:13,680
We'll say 'andrei"

94
00:08:13,790 --> 00:08:15,290
And "What is your password?"

95
00:08:15,410 --> 00:08:19,750
Well, we'll say - "supersecret". I pressed enter.

96
00:08:20,030 --> 00:08:20,350
OK.

97
00:08:20,360 --> 00:08:25,660
And now nothing happens, because well we haven't callback function, right?

98
00:08:25,670 --> 00:08:27,670
We just know that 'signIn' exists.

99
00:08:27,820 --> 00:08:38,510
Let's just check that 'signIn' exists. 'signIn is not defined'. It's because I spelled it, I spelled it wrong

100
00:08:39,230 --> 00:08:40,150
Let's do 'signIn' again.

101
00:08:40,190 --> 00:08:43,370
Let's refresh. 'andrei'

102
00:08:43,659 --> 00:08:46,800
'supersecret'

103
00:08:46,950 --> 00:08:51,370
And if I look for a 'signIn' now - there's the function.

104
00:08:51,390 --> 00:09:05,660
So, let's run it. Let's do 'signIn'. And we'll say: 'usernamePrompt', 'passwordPrompt'.

105
00:09:05,810 --> 00:09:08,450
Look at that. We just received our 'newsfeed'.

106
00:09:08,690 --> 00:09:09,320
That's very cool.

107
00:09:09,320 --> 00:09:16,090
Let's put this inside though, so the script just runs and then we'll get our answer right away.

108
00:09:16,280 --> 00:09:17,340
So, we'll do:

109
00:09:17,520 --> 00:09:22,230
'usernamePrompt' and 'passwordPrompt'.

110
00:09:23,110 --> 00:09:29,780
Now, just to show you what I did here, I am calling the function 'signIn' that accepts two parameters:

111
00:09:29,890 --> 00:09:32,410
'user' and 'password'.

112
00:09:32,440 --> 00:09:38,950
So, when I call the function, I'm going to give it two arguments to match those parameters.

113
00:09:38,950 --> 00:09:43,750
I'm going to give it the 'usernamePrompt', which contains whatever we've written in the first 'prompt'

114
00:09:44,290 --> 00:09:49,060
and then 'passwordPrompt', which contains whatever we read and the second 'prompt'.

115
00:09:49,060 --> 00:09:58,630
So now, if I save this and refresh, I can say "What's your username?" - 'andre', 'password' - 'supersecret'.

116
00:10:01,270 --> 00:10:04,930
And look at that. Now I'm logged in and I can view that "Bobby" is

117
00:10:04,940 --> 00:10:10,830
"So tired from all that learning" and "Sally", well, Sally finds "javascript really-really cool".

118
00:10:12,240 --> 00:10:16,480
Let's also try out the 'else' statement in case we mess up our information.

119
00:10:16,530 --> 00:10:23,580
I press refresh and I do "andrei", and for password I'll just do "1, 2, 3". I'll get:

120
00:10:23,580 --> 00:10:25,990
"Sorry, wrong username and password!"

121
00:10:27,640 --> 00:10:28,740
There you go.

122
00:10:28,780 --> 00:10:35,620
We've built a basic Facebook and that's what's so amazing about JavaScript is that you look at websites

123
00:10:35,620 --> 00:10:41,440
like Facebook, that seem really-really complicated, but they're all made of these small chunks. And the

124
00:10:41,440 --> 00:10:48,990
functionality, that you see on Facebook, is exactly that, when we are 'signIn' and they're checking the signing

125
00:10:49,000 --> 00:10:55,060
information against a 'database' and then, based on if we're right or wrong, we either get the 'newsfeed'

126
00:10:55,060 --> 00:10:57,180
or we get, you know, "Please sign in again".

127
00:10:58,030 --> 00:11:03,430
And that's the power of JavaScript right here. And this is why I'm so excited to teach you the topic

128
00:11:03,460 --> 00:11:09,670
because it opens up a whole new possibility of pretty much doing anything online now.

129
00:11:11,150 --> 00:11:12,970
I have another exciting video for you

130
00:11:12,970 --> 00:11:14,110
coming up next.

131
00:11:14,620 --> 00:11:16,260
I'll see you in that one. Bye-bye