39 Using HTML and JS – Javascript Tutorial

Learn Javascript from Scratch

Last updated on June 30th, 2018 at 08:46 pm

HTML, CSS, Programming concepts and Javascript .

 

Watch Full Course >>

 

Transcript :

Hey, and welcome.

Up to this point, I’ve been doing JavaScript on the browser and I’ve been using Scratchpad.

And if you’re new to JavaScript, you’re probably wondering ‘How can I use JavaScript in my HTML’.

So, I want us to take a small detour and go through how to use JavaScript in the HTML.

We’re going to see a few ways you can use to output things if you’re going to try your examples using an HTML file.

So this is a small detour.

I just felt it very necessary for you to know how you can use JavaScript in the HTML.

So one way of using JavaScript, you can use an external file or you can use the JavaScript code right in the HTML document that you want to use.

So if I come here, if I come here, I have this HTML code, right.

It’s a very small amount of code.

And down here, you can see I’m loading a JavaScript file, this one that has ‘.js’.

So this is an external JavaScript file and this is the ‘script.js’ file that has been loaded in this HTML file.

So this is one way of using JavaScript in HTML.

We just load the external script.

And if I run this in the browser, it’ll do whatever this JavaScript is doing.

This is one way.

So I’m going to do an example in a moment.

Let’s look at the other way that you can use JavaScript in your HTML.

So, you can see the script that I’m loading.

I’m doing it at the bottom.

So this is really good for, this is good for speed because JavaScript, when the browser, how the browser works is that it goes through things like that, like that.

It loads things that way.

So that means that if you put this JavaScript, ‘Control+X‘, if I put this up here in the header, you can also put it in the head section of the HTML.

And if I put it here, it means that the browser will have to go and get this script.

It’ll go and get this script while nothing is happening.

So until the entire script has been loaded, that is when the browser will go on and continue loading the page.

So this is not, this is not advised.

That is why you’ll find that most scripts are put at the bottom here before the last body tag, before the closing of the body tag right here.

So this is the way to do it.

And then also, you can do your JavaScript code right here in your HTML.

So, I can just write my HTML in here.

So if I say something like ‘console.log(‘Hi there’)’ and then I, I save this.

And let me run this in the browser, open in the browser.

Now what I’ve used here, we’re going to see this in a moment as well.

What I’ve used here, you have to access this via the console.

So if I come to the browser, I can open Firebug on Firefox.

If you’re using Chrome, you can also open the Chrome Developer Tools using F12.

So these are things you, you know what they are.

If you’ve watched my HTML and CSS tutorial, you know what these are.

So I’ll open Firebug using F12 on my keyboard.

And if you open Firebug, you’re probably going to get this as your first screen.

So where you want to go? You want to go into the console.

And if you haven’t used the console or maybe in the past, you’ll find a notification here asking you to activate the console.

Just click on it to activate the console.

My console is already activated.

So the console.log statement which is here, this one will log things into the console.

So if I reload this page, we should see this, which is this.

Now, so you can write your scripts here on the same document where your HTML files are.

You can also, I can also take this, ‘Control+X’, so let me just remove this.

You’ve seen how you can do that.

And if I come and put that one here, the ‘console.log’ on the external file.

So if I run this, come here and save, you’ll see that the script will be loaded and we are going to see this in the console.

So if I come back, reload, you will see we have our statement in the console.

So that’s what I wanted to show you in this video.

How you can use a JavaScript file in your HTML.

The same is true for CSS.

You can see I’m putting the CSS here.

But I can also remove this and put it in an external file.

So if I say, let’s say I want to go and call it ‘css’, let me call it ‘mycss.css’.

So if I come here and I create that file, New File, then I’ll save it.

And I’ll save it as ‘mycss.css’.

So of course I’ll remove this.

And I’ll also remove this, there.

So if I come back, the style should still be loaded.

That’s it for this video.

In the next video, let’s see about JavaScript output.

How you can output things.

And we’ve seen an example using the ‘console.log’.

So this is good when you’re doing things like debugging.

So I’ll see you in the next video when we continue from here.

 

Click the button below to watch this full course:

Watch Full Course >>

 

 

Comment Here