This video I'm going to demonstrate how we can write javascript in a separate file that we can then
include in an him file and get to run in the browser.
So rather than having to type all of our code in our consul here which only exists until we are fresh
the page or close the window we can now get things to persist and save in a file.
So to do this we need to have in each team file.
So I have one here in sublime It's called index that each team I'll call it whatever you want.
And we just need to put our basic him in here.
So I'm going to call this script demo.
And then we don't have to put anything here if we don't want to.
But just to make it clear that it's the same page I'm going to put Julius do including J S files and
save.
So I'm going to go ahead and open this up in the browser just so we have it.
So it looks like this including Geass files.
And just like any other site I can open up the console if I wanted to and I could start typing some
javascript here but the whole point was that we'd be typing a javascript in a separate file.
So to do that I first need to make a separate file.
So I'm going to make a new file and save it and I'm just going to call it script Dot.
Yes.
And the important part is the J.S. at the end.
So that tells the browser tell sublime It tells everything this is a javascript file and I'm going to
save it in the same directory and then I'm going to put a single line to javascript here to start.
Alert Hello from the js file so we can just see if it's working.
If we get this alert.
So right now if we just refresh the page it's not connected the file.
Or each time a file knows nothing about the javascript file so it doesn't work.
So we need to connect them in the way that we do that is using a script tag.
So you can either type script and hit tab and that will give it to and sublime or you can type it yourself
and it looks like this script and it's not self-closing So we need to have the closing tag.
And then we need the source attribute and that source attribute needs to be equal to the file that we
want to load.
And I'm actually going to start by putting a file that doesn't exist here just to show you something
wrong.
Yes and if I save this and go back to the browser and I refresh and I open up my console you'll see
it tells me failed to load resource error.
File not found it couldn't find wrong.
Yes so that's all I want to show.
If we put the wrong name there it will actually tell us that it can't find the file but only in the
console.
So it's not going to break the site it's just going to show it to people who know where to look.
Mainly developers so I'm going to put the right file here.
Scripts just Jesus save.
Go back to the browser and refresh and I now get my alert.
So any time this page loads that code is going to run automatically.
So unlike my javascript console when code runs when I hit enter
.
So in this case whenever refresh the page the code runs.
So what I want to do now is go back to the javascript file and just add a few lines instead of just
the alert.
I want to have a few lines that asks the user for his or her name and then it just prints out a message
that says Nice to meet you whatever the user entered.
So to do that we're going to use prompt.
So that's our first line prompt.
What is your name to capitalize that.
And then we're going to store that in a variable so we can use that later.
I'm going to save our user name equals prompt.
What is your name.
And then the next step is to use that username to then greet the user.
So I'm just going to say Nice to meet you.
Username.
So we're going to do an alert and to cancel that log.
So let's start with our alert alert.
Nice to meet you make sure we have the right spacing in there.
Plus user name
and a that log.
Just so we can see it in two places.
Also great to meet you.
Plus username.
So we're concatenating the strings together two different times one to alert them in one to cancel bot
log.
So now let's go back to the browser we refresh.
First thing that happens.
It asks us for a name so we're going to put in my dog's nickname Tator.
OK it tells me nice to meet you Tator.
And if I opened up the console I'll see.
Also great to meet you Tator.
And also you can see it tells me script yes line 3 so later when we have crazy complicated files and
something goes wrong we'll be able to see exactly where and what line number in our file.
So that's all I want to show there.
Those three methods we had prompt to ask the user for some input and it stores it in a variable alert
just to be obnoxious and alert something in the little pop up and cancel about log which just print
something to the console