Last updated on July 13th, 2020 at 11:46 am
Hey, and welcome.
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.
So if I come here, if I come here, I have this HTML code, right.
It’s a very small amount of code.
We just load the external script.
This is one way.
So I’m going to do an example in a moment.
So, you can see the script that I’m loading.
I’m doing it at the bottom.
It loads things that way.
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.
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.
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.
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: