All right.
Welcome back.
So in this video we're going to talk about output.
So let's go to HD docs.
The short cut here on the desktop.
We're gonna go inside the learn basic javascript and I'm gonna right click and click on New Folder number
do 0 2.
I'll put my clothes that let's call into sublime and we can close these out from the previous video.
Minimize that one and go to output right click and do new file and that's to index that HD him.
And then I'm going to do new file again and that's to me and us.
OK.
So for the index at age to male file I want to type an HMO tab so that that's present.
And now what we're gonna do is we're going to talk about JavaScript display possibilities.
So JavaScript can display data in different ways.
Write it into an HDMI element using that inner each team will write it into an eight the hdmi output
using document that right.
Right into an alert box using window dog alert and write it into the browser console using counseled
out log.
So the first display possibility we're gonna talk about is inner each team.
So let's go inside of this file here and I'm going to return a couple times we're going to come at this
out.
Let's call this inner each Timo.
OK.
Now what we're gonna do is we're gonna make a script tag here
OK and inside of that script tag which return once to document that get element by Idi and let's do
test and we're gonna do dot enter each Timo equals eleven plus twenty
right.
And so we'll do that.
And then one of the two appear is I'm going to put in a paragraph tag with an I.D. of test pay and then
put that there.
Now if I right click and open in the browser we can see 31 OK.
So it if we inspect this real quick and go to the council it's not going to show anything because everything's
working the way it supposed to.
But if we go here and then scrapped 11 plus 20 20 is 31 and that's what is this playing because we did
document I get LMA by D which is test and you see how it filled out 31.
But if I close us we go here we don't have anything there.
So what it's doing is it's dynamically inputting information onto the web page.
OK.
So that's one way to do it.
Now another way to do it is to use document dot right.
So what I want you to do with this one.
You can leave this one here.
OK but I want you to copy all of this and then return a couple times and paste it down here and we're
gonna change this to document dot right.
OK.
And then I want to do is look at all of this
and what I'm gonna do is we're going to write and document that right.
And we're gonna do five
plus eleven
so if I right click and open the browser I got thirty one from the previous example.
And I have sixteen for this examples have I inspect this it's not going to show anything there because
it's an internal document.
So we have five plus eleven eleven plus twenty.
But again a second shot in the council because we're not doing council dialogue but we're going to get
to that in a second.
So close the tab there the next way we're going to talk about it is to use window dot alert.
OK.
So for window dot alert it's gonna be similar to that.
So let's control v. to paste this down here and I'm going to do window dot alert.
OK.
And we're going to do window dot alert.
And then I'll do five plus 20.
OK.
And make sure you close it.
And I want to right click on open the browser.
You can see it pops up a window.
So if I hit ok the window disappears.
If I right click and inspect this it's nowhere to be found because it's an internal script.
So it's not going to show anywhere else.
Now if I refresh.
Let's close this out refresh then it's going to pop up right there at twenty five.
So let's close that out and now we're going to try.
Cancel that log.
So what I want to do is copy this one here and go to line twenty five and paste set in and we're going
to do instead of window dot alert we're going to do council dot blog.
This is the fun part.
So we're gonna do council dot log and we'll do 10 plus 30.
And the reason why right click and open in the browser here is you see twenty there.
Now if I inspect this.
So what you're going to see is you're going to see 40 and the only number you're going to see is 40.
Because what we did.
If I go back to sublime real quick I did 10 plus 30.
So temples 30 is 40 now.
It'll show up here it'll print this off and counsel that log is a great way to test and debug your javascript.
I highly recommend using counseled out log first before you use anything else because what it's basically
for is debugging.
That's the purpose of it.
And you also have the council right here.
So anything you write in council that log it's going to show up in the council here this council tab
inside the web browser and that's what it's built for.
So if you type and clear like this and hit enter it will clear it out.
So if I do council dot log and we do 40
or 40
so it's clear that and I'll refresh this and then you see 40 because what as soon as it's run in the
council that log because it wants the council to log it and then display what is supposed to happen
and this is the way that you debug your site so that you make sure that everything is working the way
that you want it.
It's a great way to test to make sure everything's working.
Someone close that out and I'll see you in the next video.
Thanks for watching.