Hello! Welcome back. In this video we're going to combine everything that we just learned to show you
why JavaScript is useful.
Because I know some of you are thinking: OK, we learned a whole bunch of new ways of writing JavaScript
and we learned about arrays and objects, but I don't really know how that relates to me building
websites or web apps?
Well, I'm going to show you that we can build a simplified version of Facebook with what we just learned.
So let's get started.
We're going to have a database with usernames and passwords. We're going to have a 'newsfeed' and we're
going to have users.
So let's start off by thinking about how Facebook works. With Facebook
we have a sign-up form usually. We need to sign in.
And once we sign in, if it's correct, it goes to our profile, where we can view our 'newsfeed'.
So let's build that. We can start off with having something called a 'database'.
So we'll have a variable 'database'.
And in this 'database' we can have multiple users.
Right?
So, what do we need here? We need an array - a list of users.
So now I can say
I have a 'username' and this might look familiar from our previous lessons. We have a 'username' of 'andrei'
and a 'password' of 'supersecret'.
For now we're just going to leave it at one user.
We have a 'database' and we also want to have a 'newsfeed', right?
So let's have a variable called 'newsfeed' and in here, a newsfeed,
well, again it's a list, an array of news. So we can have a 'username' - 'Bobby', that on his timeline has maybe,
'So tired from all that learning!'. We also have, we have more than one item usually in a 'newsfeed'.
We can say that 'username', 'Sally'. 'Sally' on her time line just posted 'Javascript is sooooooo cooooool!'.
OK.
So we have a 'newsfeed', which has an array of objects and we have a 'database', which is an array of just a
single object right now: a 'username' and 'password'.
Now how can we build a 'sign-in' form?
Well, we would want to perform an action to check a user's credentials: their 'username' and 'password'.
Well, we've done this before, right?
We've used 'prompt' before, accepts a user's input. So we can do variable 'userNamePrompt'
We'll say equals 'prompt':
"What's your username?"
OK.
We also have
And I'm going to make this smaller just so everything fits in here.
Hopefully you can still see. We have variable 'passwordPrompt', that equals 'prompt("What's your password?")
'?' OK.
So, we have this working.
When we open up this file and refresh: HTML is going to get loaded line by line. And we see, oh, we have
a script.
Let me load the script and then the browser reads line by line.
We have a 'database'.
We have a 'newsfeed'.
And then it's going to say 'usernamePrompt' equals 'prompt'. And it's going to ask us for "What's your user
name?"
And then it's going to ask us for "What's your password?"
Well, let's just test that.
I'm going to save and refresh and there you go.
"What's your user name?" - "andrei" and "What's your password?" - "supersecret".
That's very nice, but when I sign in, I either want to know that my password is incorrect or if I log
in and everything is correct.
I want to get my 'newsfeed, right?
So it sounds like we need to perform an action, but we don't really have a sign in function in JavaScript,
do we?
It's a custom function, that we need to build ourself.
So let's think about this.
We want to create a function called 'signIn' and to sign in, what do we need?
Well, we need a 'username' and 'password'.
And we can name these whatever we want and just to prove that to you I'm just going to do 'user'
and 'password'.
We'll, do 'pass' like that. OK.
And if we remember, to create a function, this is 'function declaration'
I have my curly brackets and in here I can do something.
So, again let's think about this logically: in order to sign in,
I need to check 'username' and 'password'.
Well, if the function gets the first argument 'user', well I can say that 'if (username)' - in this case 'user'
equals, well, what does it equal?
You need to check against our 'database' right?
Our 'database', when 'andrei' signed up for Facebook, he put his 'username' down, and 'password' down, so we have
that information. So, we can say, that when you sign in we're going to check 'user' to see that the 'user'
matches 'database'.
And it's an array.
So we're going to grab the first element in the array and we're going to grab the 'username'
OK.
And we also want to check the 'password', right?
So, what do we do when we have to check two things?
Well it's a conditional, that has "&&". So here I can say: the 'password' should equal 'database' - first item in
the array.
And this time instead of 'username' it's 'password'.
I'm going to put this on a new line just so you can see it.
There you go!
So, 'signIn' function is going to say if 'user' equals whatever we have in the 'database': 'username', and 'password'
equals whatever we have in the 'database'. If that is right,
well, we can say 'console.log', and we'll say - 'newsfeed'. Else, if the 'password' or 'username' is not correct, we'll
just say 'alert'.
"Sorry, wrong username and password!"
So, we have our function, but this disappeared somewhere. And we'll save this.
And let's just refresh. OK.
"What is your user name?"
We'll say 'andrei"
And "What is your password?"
Well, we'll say - "supersecret". I pressed enter.
OK.
And now nothing happens, because well we haven't callback function, right?
We just know that 'signIn' exists.
Let's just check that 'signIn' exists. 'signIn is not defined'. It's because I spelled it, I spelled it wrong
Let's do 'signIn' again.
Let's refresh. 'andrei'
'supersecret'
And if I look for a 'signIn' now - there's the function.
So, let's run it. Let's do 'signIn'. And we'll say: 'usernamePrompt', 'passwordPrompt'.
Look at that. We just received our 'newsfeed'.
That's very cool.
Let's put this inside though, so the script just runs and then we'll get our answer right away.
So, we'll do:
'usernamePrompt' and 'passwordPrompt'.
Now, just to show you what I did here, I am calling the function 'signIn' that accepts two parameters:
'user' and 'password'.
So, when I call the function, I'm going to give it two arguments to match those parameters.
I'm going to give it the 'usernamePrompt', which contains whatever we've written in the first 'prompt'
and then 'passwordPrompt', which contains whatever we read and the second 'prompt'.
So now, if I save this and refresh, I can say "What's your username?" - 'andre', 'password' - 'supersecret'.
And look at that. Now I'm logged in and I can view that "Bobby" is
"So tired from all that learning" and "Sally", well, Sally finds "javascript really-really cool".
Let's also try out the 'else' statement in case we mess up our information.
I press refresh and I do "andrei", and for password I'll just do "1, 2, 3". I'll get:
"Sorry, wrong username and password!"
There you go.
We've built a basic Facebook and that's what's so amazing about JavaScript is that you look at websites
like Facebook, that seem really-really complicated, but they're all made of these small chunks. And the
functionality, that you see on Facebook, is exactly that, when we are 'signIn' and they're checking the signing
information against a 'database' and then, based on if we're right or wrong, we either get the 'newsfeed'
or we get, you know, "Please sign in again".
And that's the power of JavaScript right here. And this is why I'm so excited to teach you the topic
because it opens up a whole new possibility of pretty much doing anything online now.
I have another exciting video for you
coming up next.
I'll see you in that one. Bye-bye