Modifying The World Around You

Javascript Tutorial 2

Welcome back class! Round 2!
Ring the Bell!!

Ding! Ding!

All right, Variables and document.write()

Like in the first tutorial we got you started with the script tag and a start on variables. so what did we learn? we learned how to use quotes in a variable. but what about some of these codes that use variables and display them on the page?
Excellent Question!!

Using these variables and displaying them:
First lets talk about displaying them on a page. There are several options to display something on a page but what we are going to use now is document.write()

document.write()

 

<script type="text/javascript">
var x = "this is a test";
document.write(x);
</script>

alright lets look at this code.
What do we see that we already know. We have the script tag we have a variable and something new.
document.write() is a way to write stuff directly on the page. so what does that code produce?

Output

 

this is a test

why does that output it like that? well the browser read the code like this. sees that it is a javascript, notices a variable inside the script. sees the document.write and writes what is in the parentheses in this case it sees the variable and that variable says "this is a test". so it writes out "this is a test". That is one way document.write() outputs information and works with variables.

Whats another way of writing stuff on a page?

document.write() 2

 

<script type="text/javascript">
document.write("this is a test");
</script>

This is another way. if you noticed there is no variable now and it is put directly right into the document.write(), quotes and all. just like a variable you need to watch your quotes inside the document.write(). This would output the same as above.

Now what would happen if we mixed the two?
Well lets find out!

document.write() 3

 

<script type="text/javascript">
var x = "with a variable";
document.write("this is a test "+ x);
</script>

output

 

this is a test with a variable

How does it do that?!
Well lets find out!
we have a variable and a document.write(). like before the document.write() outputs "this is a test" but than it has a variable in it. Well you see the + in there? dont be scared it wont hurt you! that is called an operator. what that does in there is it adds the variable into the text that is already in there.
so it reads it like this

Quote:

 

<script type="text/javascript">
var x = "with a variable";
document.write("this is a test "+ "with a variable");
</script>

as you can see it replaced the variable with the line that variable represents. it combines both of them together! a match made in heaven.
awww..

I hope you learned a little something so far and don't worry more tutorials will come. next up we will be talking about grabbing elements by ID or Tag Names and how those get worked into javascript along with innerHTML, because looking at all these scripts they all have it

So stay tuned for more Javascript lessons!

1. Add new comment:

   Post Comment