Hey, everyone.
Welcome back.
Now it's time to start learning JavaScript for real, and the first thing we need to ask ourselves is
why JavaScript?
Well, if you're coming from my ASTM, Allen, CSX course, you know that we can be beautiful Web sites
using these two languages.
So this is the project we're finished in the last section.
This is a beautiful front page of a Web site.
This is hosted online.
It's fully responsive.
It's loading beautifully on mobile devices and all that.
But there's one problem with this page.
This is a static page.
The only thing the users can do if this is just scrolling up and down and clicking on links.
So there's no interaction with JavaScript.
We'll add the layer of interactivity that will make our Web sites much richer in terms of usability.
So I have a few examples here to show you.
So here's the front page of Microsoft's Web site.
So as you can see, we can't navigate through these photos, sliders, and then the content changes.
We can open and close menus.
I have also Apple's Web site here.
So you can create this kind of personalized shopping experience.
So if I change the colors, you can see that the photos change as well.
So this can make your Web site not only much more user friendly, but this can drastically increase
conversion.
So you can sell much more if you have an interactive Web site like this.
If you go down.
We also have a photo slider here.
We can also expand and collapse sections like this.
So here we have a few questions.
So by doing this, we're not overcrowding our page with content.
But if I'm interested in reading this question, I can open it and close it.
So with JavaScript, we are going to make our Web sites fully interactive.
So how do we use JavaScript in our Web site?
Let's go back to the course material and let's try to run some JavaScript code in this page.
So this is the zero one first steps that H.T. Amale.
Let's go to Visual Studio Code.
So I have it right here.
To include JavaScript in this page.
We just need to write the code inside script tags so these tags can be either inside the head element
or the body element.
So let's start by using it inside the head element.
So I'm just going to write a script tag.
So this just looks like any other age to Amelle element.
But the difference is that instead of writing content inside it, we are going to write JavaScript code.
So let's start with the alert comment just to test.
So just write.
Alert.
Open and close.
Parentheses and.
And weave a semicolon.
Don't worry about the syntax.
How do we write?
Why do we need parentheses?
We're going to talk about all this at the moment.
We just want to test writing some JavaScript here.
So this comment is going to show a message on our Web page.
So alert inside the parentheses.
Let's open and close quotation marks.
And inside it, we can write the message we want.
So I'm just going to write testing the alert.
Comment.
I'm going to save this, and if I go back to the Web site and refresh it, you can see that we are already
running Chavez script on our page.
So this is the message that we sent through the alert comment.
Let's click, OK?
And now our page is going to load.
So this is one way of using JavaScript in some cases.
We are going to use it inside the head element.
But normally the most recommended thing in most cases is including it inside the body elements right
before closing it.
So let's go to the end of the body element.
Here it is.
And now right before closing it.
So this is the best place to include the script tags.
This is because we we're going to interact with the elements of our page.
So we want the browser to first render the page, generate all the elements so we can interact with
them using JavaScript.
So this is the best place to put our script tag.
However, writing JavaScript inside this age, the amale file is not the best way of doing this because
then our script is going to grow and this is not going to be very organized.
So the best thing is placing our JavaScript code in separate files.
So instead of doing this, let's go to the J.
S folder.
Right now it's an empty folder, but we can create a new file here.
So I'm going to create a new file called.
Scripts dot j yes, so J.
S is the extension for a JavaScript files.
So here it is.
And now I'm going to cut this comment with Control X.
I'm just going to paste that inside this file.
And if we go back to the browser, nothing is going to happen yet because we don't have any link to
that file yet.
So we are still going to use the script tag.
But instead of writing scripts inside it, we are just going to use it as a link.
So we are going to use the source attribute.
So as our C.
And now we are just going to call the fire that it's inside J.
S slash scripts DOT.
Yes.
So now we can see that this is still working.
So this is how we are going to work from now on.
Now, going back to Visual Studio Code, if you go to the other files, you will see that I already
included a link to this file in all of them.
So you don't have to do it again.
I just left it undone on the first file so we could do together.
But you don't have to worry about this anymore.
All the other files we are going to work from now on already have the link.
So we are ready to start learning a few more JavaScript comments.
I just want to show you one more useful comment that you can use.
So instead of using the alert.
I'm going to copy this.
And I'm going to paste it right after and instead of using alert, I'm just going to use console dot
log.
So this time let's write a different message so we can differentiate.
So testing the console dot log comment.
So let's save this now.
Refreshing the page.
We can see the message sent using the alert comment and to see the message sent using the console dot
log.
We can just right.
Click on the page and go to inspect.
And then if you go to the can so we can see our message being printed right here.
The messages we send to the console are not for the users.
The users are never going to come here.
But this is an extremely useful tool to identify mistakes in our code and to understand what our JavaScript
code is doing as you are going to see in the next few lessons.
So now that we have JavaScript up and running in our Web site, we learned two ways of running it,
using a script tag directly in the agency email file and using an external dot J.
S file.
We just tested to comments so we can see that this is working.
So now in the next video, we're going to talk about some basic JavaScript syntax.
I'll see you then.