You can see I get my little pop up box.
Now, if you're running this along with me at home, and
you're not using Chrome, the box is going to look different.
For some of you it's gonna have the little Safari symbol, or the Edge, or Firefox.
That's okay, the important thing is that somewhere in here it says hello world.
Now you might be click on the prevent this page from creating additional
dialogues button.
Don't do it.
Because in this class we're going to be playing with alert a lot
because it's a nice way for you to know if your code's working or not.
So again, this is just a quick and simple way for
you to generate output using the alert.
The next way we can generate output is using prompt.
So prompt is very similar to alert, but it's slightly different in that it wants
you to do more than just click OK or Cancel.
It wants you to generate some sort of input to put in there.
So as you can see, the alert and the prompt look very similar.
They've both got the key word, the parentheses, the semicolon and
the string, but the way they act is very different.
In this case when you run it, it's actually waiting for
you to type something in.
So I can put in Colleen van Lent and hit OK.
Now, don't get too excited.
We didn't do anything with the stuff I put in.
But, again, I'm just giving you some of the different options.
So you have alert and you have prompt and
both of them generate some sort of box where you can display information, but
nothing is actually showing up on the page.
So, let's switch to the general ways in which you can generate output
to the screen.
One way, if you want something to be what we call permanent,
to not just disappear once you hit okay, is to use what we call document.write.
So again, I'm hoping that you're picking up on these ideas that we're using terms
like document, and element, and different things like that.
The way that document.write works is it goes through and
it says, we want you to write something directly to the page.
We want it to become part of the dom,
we want it to become part of the page permanently.
So in this case I can't just use write.
That won't work.
Alert worked by itself, prompt worked by itself, but
here you need to have document.write().
Same thing, hopefully you're seeing the pattern.
So let's see when we add this.
Here you can see that inside the script tag, again, I have the document.write().
But instead of things popping up or asking us for input, it goes ahead and
just writes it directly into the screen.
Now I'm gonna change something right here.
Because I put h1 inside the quotes.
If I get rid of that you can see this still works, but
instead of being an h1 heading, its just regular old text.
So document.rate is a way for you to generate output.
But we need to realize that it is probably not the best way to do it.
Because sometimes if you're misusing it you can overwrite other things that exist.
So document.write is something you just want to use when you're beginning and
you don't know some of the more complex methods.
So one of the more complex methods you can use is called innerHTML.
And with innerHTML, you combine this with other functions that return elements.
So, you can't just say innerHTML or element.innerHTML.
You have to say, all right, what part of the page do I wanna change?
Oh, I wanna change that particular paragraph, all right.
But how do I grab that particular paragraph?
Or remember we have these different APIs that can go and get things for us.
So in this case, I have element which is hopefully we'll find something using
the API that in your HTML equals time to learn JavaScript.
So I wanted you to recognize something right away.
When we use document dot write alert and
prompt we had parenthesis around the side, here.
We don't have that anymore.
Instead we use an equal and we just have it ending with a semicolon.
So no parenthesis when you're using inner.HTML.
How do you figure that out when you're coding?
You don't.
You just keep coding and practicing and after a while,
it becomes second nature to you, all right?
So when I talk about this kind of generic element,
I didn't make it a color that's something that you need to grab using the API.
So let me give you an example of something we can do using innerHTML.
So let's go ahead and look at this, what I've done is I made an h1 heading and
I've given it the id of test.
I also have a paragraph element a little bit further down that just says,
hey what happens if I'd messed with this code?
All right, so I want you to look as closely as you can.
You might be on a small screen.
You might not be able to see it.
Is that in my h1 heading, I actually have the words tester, but
if you look at the web page, it says Hello World.
Well how did I do that?
It's pretty simple, actually.
Cuz you can go in, and I can say document.getElementById.
Test.
It's going to grab, it's going to look through the page and go where,
where can I find something that says ID equals test.
Oh there it is.
All right, now I wanna change whatever used to be in there and
replace it with the words, Hello World.
This is kind of what happens when this is a weird example,
but all early examples are weird examples, right?
Because you just want to get your feet wet.
But I did want you to look at what happens if I do this.