JavaScript Alerts

by Taylor Pennington aka DigitalPimp   | filed under Web, HTML, CSS, and XML

This is an introduction in using Javascript with a web page. I am first off going to show you how to write a function in Javascript and then I will show you how to call it out using HTML. Javascript is A LOT like ActionScript, it uses dot notation and functions.

Anywho, let's get to learning, first off let's dissect a function. A function is something that you make to process data or create an action. In this case we are going to do the simple of simple functions, we are just going to make an alert pop-up. Alerts are very useful and are similar to the trace feature in AS.

The Code:

  <SCRIPT>
function alertUser() {
  alert("Hello World");
}
</SCRIPT>

Copy and paste that code into a HTML page. Now that we have written the function we need to write some code on the page to activate or 'set it off' if you the will the function because the browser has processed the function but it doesn't know when to make the function process. This is similar to doing an onRelease or onClipEvent in AS.

What we are going to do is use a hyperlink to set off this function. Now in a hyperlink you have many many actions that you can do to activate it just like in AS.

These are all the events:

• onBlur
• onClick
• onFocus
• onDblClick
• OnMouseOut
• OnMouseOver
• OnMouseDown
• OnMouseUp

To use the above actions, you will need to, as mentioned earlier, call them. The following syntax can be used:

<a

  event="functionName"
  href="javascript:void(0)">Click Me</a>

So, if you want to call the onClick example, your code will look similar to the following line of code:

<a

  onClick="alertUser()"
  href="javascript:void(0)">Click Me</a>

The event is onClick and the name of our function is alertUser(). I told you this would not be very complicated. The following list displays all of the aforementioned events as examples for you to interact with:

• onBlur
  To see this work, click on the link and then click else on the document. When you select the link, the focus (the dotted rectangle) goes around this link, but when you click elsewhere, the focus leaves. When that occurs - the code gets invoked.

• onClick
  To see this work, just click it.

• onFocus
  To see this work, this is like a click but it is when you set focus to the object. This isn't really meant for a hyperlink but more for other objects like a <TD> or <SPAN>. If you notice you can right-click on this hyperlink or even tab to it.

• onDblClick
  To see this work, double-click on it.

• onMouseOut
  To see this work, put your mouse over this object and then take your mouse off of it.

• onMouseOver
  To see this work, this is like onMouseOver but doesn't process the function until after your mouse is removed.

• onMouseDown
  To see this work, this is just like a onFocus or onClick, this also is meant for other objects but does work with a hyperlink. If you notice you can right-click on this hyperlink and it will still process the action.

• onMouseUp
  To see this work, this is just like a onMouseDown but the process doesn't happen until the mouse button is let go. If you notice you can right-click on this hyperlink and it will still process the action.

If you have any questions, feel free to post you in the Scripting forum for help.

Much Respect,

DigitalPimp

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇