Home arrow Tutorials arrow JavaScript Alerts

Web Development

Welcome to Web Development section. Please choose a category. 
 
  • Hrvatski tutorijali
    Ovdje su objavljeni razni tutorijali na hrvatskom jeziku na temu PC, programiranje, web development, savjeti, trikovi, optreba racunala itd.
  • Tips / Tricks
    Articles about various tips and tricks concerning Windows, Linux and other OS usage.
  • JavaScripts
    Code snippets, tutorials and tricks for JavaScrip language.
  • PHP & MySQL
    Tutorials, code examples, tips and tricks for PHP and MySQL development.
  • Tutorials
    Place for tutorials about using various application in best and simplest way.
JavaScript Alerts Print E-mail
(0 votes)

JavaScript Alerts
Monday, 14 May 2007
Alert! Alert! How to pester your viewers until they can't take any more. Oh yes, and how to create a JavaScript alert box.

Well, you want to add one of those JavaScript alert boxes that come out of nowhere, don't you? Okay, let's begin with the alert box that just tells the viewer something you want them to know. Here's the alert command:

alert('your choice of text')

Now, to use it, we'll need to place it inside another command. Let's use one we are familiar with, the onMouseover command. The following script will alert the user that you did not want them trying to click this particular link when they move their mouse over it.

<A href="noplace" onMouseover="alert('Hey! I said not to try clicking this link!')"> Don't click this link!</A>

Give it a try. Move your mouse over the link below:

Don't click this link!

Yes! Now you can drive your friends insane with a bunch of fake links! Here's what all the commands are doing:

 

  1. onMouseover=" "
    This tells the browser to execute the command or function inside the double quote marks when the user moves their mouse over the link.

     

  2. alert('Hey! I said not to try clicking this link!')
    Instructs the browser to display the text inside the single quotes in an alert window.

That was nice, but could you make something a little more annoying? Of course! It's called the "alert as soon as you open the page!" alert. Just think, you could tell people stuff before they ever see anything on the page! The trick: placing the alert command inside the <HEAD> </HEAD> tags! You will now get to use the old SCRIPT tags I mentioned a couple of sections ago to set off the JavaScript from the other stuff. Here is the code:

<HEAD>
<TITLE>Cool JavaScripts</TITLE>

<SCRIPT language="JavaScript">
<!-- hide from old browsers

alert('Welcome to my Web Site!');

//-->
</SCRIPT>

</HEAD>

This will display the alert before the page starts loading. When you hit "OK" the page will go on and load normally.

Here's the breakdown:

 

  1. <SCRIPT language="JavaScript">
    This tag lets the browser know you are using JavaScript commands here.

     

  2. <!-- hide script from old browsers
    This makes sure older browsers don't display your script as text on the page.

     

  3. alert('Welcome to my Web Site!');
    This is your alert. Put your mesage inside the single quotes. Notice the semicolon at the end, this is what separates JavaScript commands.

     

  4. //-->
    Stops hiding the script from old browsers.

     

  5. </SCRIPT>
    Ends the JavaScript commands.

Want the code that did this? Here you go!

<HEAD>
<TITLE>JavaScript Example 2</TITLE>

<SCRIPT language="JavaScript">
<!--
alert('Please Sign My Guestbook, NOW!');
alert('I mean it, NOW!!!');
alert('Did I mention I had a guestbook? Well SIGN IT!');
alert('Oh, remember....THE GUESTBOOK! O.K.?!!');
//-->
</SCRIPT>
</HEAD>

So, how about that? Pretty wild, isn't it? You can also use the alert with a button, so that it is not such a surprise. Place the code where you want the button to be on your page. You won't need the SCRIPT tag for this one.

<FORM>
<INPUT type="button" value="Click here to see what I think of YOU!"
onClick="alert('You are the greatest person I have ever met!')">
</FORM>

Give it a try. You'll be glad you did....I think.....

 

 
< Prev   Next >
What's your favorite Internet browser?
 

Login






Lost Password?
No account yet? Register

Tools

Coming soon...

Partners

Syndicate