Newbie web design help - Some JavaScript tricks

Note: All of my comments [the questions, etc.] can be changed to your own words. Please note that if you want to use a quote mark [single or double] in text that you convey through JavaScript, you have to type \' or \", not simply ' or ". Just trust me :) And to make a line break in the alert box, type \n

Wouldn't it be cool if you could have an alert box on your page saying "Sign my guestbook!" or something like that? Now you can. Just use the simple function below.

  
<SCRIPT LANGUAGE="JavaScript" TYPE="">
 <!--
  function ok_box()
   {
    alert('Hey, look at ME!
\nI\'m an alert box!\nI\'m COOL!
\nNow sign my guestbook!');
   }
 //-->
</SCRIPT>

Put it into the <HEAD> section of your document, then add the following into the BODY tag [after all the colours but before the >]:

onLoad="ok_box()"

Click here to see how this script will work. Please note that you should never press ENTER when you're typing one line of code in JavaScript. Only press ENTER when you're ready to start another line; otherwise text should just go on continuously. Yes, I KNOW I pressed enter above, but that's because of the <PRE> tag I used to show you the code.

Ever wonder how people make words appear in the status bar instead of the ugly URL's when you mouse moves over the links? Well, here's your answer. Simply add the following code into every A HREF tag after the closing quote mark of the URL and before the >:

OnMouseOver="window.status='Link text here';return true"
This is what it looks like
[put your mouse over the word `This']

But WAIT.. how do you make the text disappear??? Simple. After the code I just gave you, add the following code:

OnMouseOut="window.status='';return true"

And the text will disappear when you move your mouse off the link. Here's how the code looks together:

OnMouseover="window.status='Link text here';return true" 
OnMouseOut="window.status='';return true"
And this is what it looks like.
[again, `this' is the word]

Note that there is a function to do this, but there's too much to explain, and I'm too lazy. Go learn it somewhere else ;).

Ever been to a page that asks you your name, and then writes the name you give inside the document? Well now you can do that. Add the following code into your <HEAD> section:

<SCRIPT LANGUAGE="JavaScript" TYPE="">
 <!--
  var yrname=prompt('Enter your name');
   if ((yrname=='')||(yrname==null)||(yrname=='undefined'))
    {
     yrname="Person who cannot type"
    }
 //-->
</SCRIPT>

then add the following where you want the name the person typed in the document to go [hint: you can put it in multiple places, too!]:

<SCRIPT LANGUAGE="JavaScript" TYPE="">
 <!--
   document.write("Welcome, "+yrname+"!")
 //-->
</SCRIPT>

You can see how it works here. Try leaving the prompt field blank and see what happens :)

If you're very experimental-type, like me, you'll find ways to combine these for some really cool [and sometimes annoying] effects. Please note that you should really change the purple text to your own :) My examples are a little silly. And.. before you send me angry emails that my scripts don't work: JavaScript is whitespace- and case-sensitive. And since you have been this patient, click here to learn how to eliminate JavaScript errors on your pages. :) Well, go on to the next page to learn about some limitations of JavaScript.