Welcome back everybody.
All right.
Let's talk a little bit about H.M.S. SS and Javascript and how it relates to Web sites and how Jair
spin really works.
So the first thing is that the reason why we're using Jaspan is that when we type something in we can
see it in real time in this output here and we can run any javascript with this little button here and
we'll get to that very shortly don't worry.
So what I like to tell beginners is to tell that HTL displays everything on the Web site for example
of splays images it displays.
Displays links.
It sets up the static parts being the parts that don't change the Internet and what CSSA does that styles
everything.
So if you wanted to change the text or the font or something like that you CSSA what it does is it takes
the pressure away from the html and it puts it off its own file and it makes stylize and your web site
a little bit easier.
Now javascript adds in the function which is actually really important.
And if you're in HBL 5 stuff that's exactly what a lot of Javascript can do for you.
All right.
So let's take a look at Ishmail first and I'm just going to give you a very small crash course in this.
The reason is just because it explains javascript a little better so we can do is you can type in two
paragraph tags which is the greater than a less than sign.
And then you can type in some text like this is awesome like that.
And then you can type slash P with the too greater than and less than signs around it and you see in
the output here that says this is awesome.
Now if you added another word here for example really awesome like that you can see that you can see
that it is.
It changes automatically so you'll also notice that there is a space here and that's because it really
looks like this.
But the window makes it shorter.
All right.
So it's really awesome.
Get rid of that.
Now at CSSA does here is if you type in P and you type in a curly bracket and push enter you'll see
that two curly brackets come up.
And the reason why this is that anything within this code relates to P-TECH so we can change the font
we can change the color etc. and how we do that if we just change color and then let's change to red
and he put a semi-colon at the end of that.
Now it's really important that you learn the two topics here.
You can see that he is a block of code and we can add in a whole bunch of other things we can change
the font etc..
But you'll also notice there's a semi-colon at the end of this line and you'll also notice that there
are two curly brackets this is super important especially in javascript and a lot of other programming
languages.
The curly brackets make sure that this is a block of code.
So if I taken something out here you see it won't work and sometimes what it will do is it will pop
up an error.
Now CSSA web development is a lot less error prone meaning that you can get away with a lot more and
that's actually really cool.
Now the consul here is if you were to put in something with javascript here but what are going to do
is Amasias get rid of the cons..
And I just want to show you a little bit of Javascript.
And you can go you can type this and we can go.
Alert colon and brackets quotes.
And you can type in whatever you want this case I'll just type in pop and bracket again and semi-colon.
All right.
Now you'll see that when I do this you'll see that there's a warning down here.
And the reason why there is a warning down there is because this isn't complete.
Now for the most part every line needs a sinkhole and after that now there are certain lines that don't
need a semi-colon.
But for any line that you're telling the computer to do something you need a semicolon.
So we're going to go ahead and put a semicolon there.
And when you're first starting out the semi-colon is the number one thing that beginners forget.
So put in that semi-colon there and there are times we don't put in any court and I will make those
apparently obvious to you.
All right.
The last thing we need to do is you just need to run Yes and you'll see that this thing comes up and
it says pop and that's exactly what we asked them to do.
So programming is telling the computer to do a whole bunch of things.
So we're telling the computer to literally just put up a window that says Pop we can type in something
else like awesome like this.
And it just says Awesome.
That's pretty cool.
Now what we're doing here is again we just tell the computer to do things.
Now there are some times where you add in two backslashes like this.
And what this is is that this is what is called a comment.
A comment is something that you can just write in here and it can remind you what to do.
So what we've done told the computer to do is to alert the user with a pop up.
That's all we've done.
And so if I were to write this in pseudo code or code that doesn't necessarily work that's what we that's
what we've done here.
Now if you can think of the code if you can think of something to do like I need the computer to do
this you can find the corresponding code.
That's really all you need to work with in with coding here.
Now the other thing we can do is again before CSSA wasn't vetting before you know javascript was really
a thing you could actually add this all within the HTML document.
So the final document is really kind of the the main area of which everything happens.
These are just separate files.
And if we were to do this off of J.S. bin we'd have an HTML document and we would call the CSSA and
Javascript to be like several different text files and all we would do is we would call it in here.
But the way we do that is we type in script K and push enter a couple times and then the greater than
less than sign because that's just how you make takes in in each T.M. and we're going to do slash script.
And what I'm going to do is I'm going to push control X or command X if you're on a Mac and we're going
to put that script in there.
Now what this does is that this essentially runs the javascript.
We've made a little section within the HTML to run javascript.
Normally it's in a different file but you can run it.
So if we run this here it says Awesome.
And if we change this we can change anything they want we can change it back to Pop we can change it
to your name you can change it to whatever you really want to.
And we're going to go run with javascript.
OK.
And if I take this alert pop cut and paste it right in here and get rid of the script tags you'll see
it's exactly the same thing.
So it is going to go run.
Yes it's pretty simple.
All right.
So we have the alert pop there so you can run it within the HTML document.
You can even run CSX.
You can put the style points within the tags here and you can or you can run the javascript with the
needed HTML but generally we do it in different areas here.
All right.
See you guys in next tutorial.