Ken Ward's Java Script Tutorial ...

Writing where you want in a document.

If you clicked the button above, I hope you saw a prompt box which, when you clicked OK wrote a table in the page, just where you wanted it!

Here is the code:

<script type="text/javascript">

<!--function Info()

{

var Name1;

var Writing;

Name1=prompt("What is your name Enter a name in the box "+

"so you can see the effect on the page","Fido")

Writing="<table border='3'><tr><td>Only what is enclosed in the table "+

"and the horizontal rule below is written by Java Script:<p>"+

"<h1>"+Name1+"\'s Special Page</h1>"+

"Welcome to my page "+

Name1+"."

+

"I have made everything just right for you."+

"<p>So, "+Name1+", click <a href='index.html'>here</a> "+

"to learn how to get what you have been dreaming of for so long!"+

"</td></tr></table><hr>";

}

//-->

</script>

The above script was put in the HEAD tags of the page. The function Info() is pretty standard, calling the prompt we have learned to know and love. Next the function includes the variable Writing which we want to use later. If we put this variable outside the curly brackets of the function, we would not be able to use the value of Name1 because variables are only valid within their function. We could have put both of our variables right at the top outside the function, when they could be used freely. However, this can cause problems with long scripts with many functions.

Watch out for matching quotes!

The variable Writing takes a string value enclosed in quotation marks. One point to note is the line:

"<table border='3'><tr><td>Only what is enclosed in the table "+

...

where we have used single quotes to enclose the border value. If we had used double quotes, the script would have thought our string had ended (after all it had found a matching quote) and the Browser would have given us errors. So much for this script!

Just as easily, we could used the backward slash escape character (\), and have written:

"<table border=\"3\"><tr><td>Only what is enclosed in the table "+

...

Writing just where you want it.

The new bit is what we write in the BODY of the document:

<script type="text/javascript">
document.write(Writing);
</script>

We have a simple document dot write statement which uses the variable Writing, which we defined in the HEAD of the document in the function Info(). The script, therefore writes all the stuff we put in Writing, just where we put this bit of script! We can therefore write just where we wanted to!

What about the script in that jump button at the top of the page?

The script for the button is:

<form>

<p>

<input type="button" value="Prompt Example" onclick="top.location='alertPromptEx2.htm'" />

</p>

</form>

Being too lazy to write a function, I just wrote this for the onClick event:

top.location='alertPromptEx2.htm'

The script tells the browser the location of the document we want. Easy way to tell the button what to do, isn't it?

Let's look at Opening new Windows!

 

And for some programming for your brain: check out New Life Course